/* ==========================================================================
   Advanced Health Chiropractic - Resources (hub, blog, podcast, topics, articles, FAQs)
   Loaded after site.css and service.css on the pages scripts/build-resources.mjs writes.
   Plan: ~/.claude/plans/eventual-mapping-ladybug.md

   Colour follows the brand book: the service fields (blush for pregnancy and postnatal, sky for
   children and teens, lime for adults) appear only as category bars and dots, never as text.
   Motion is the shared reveal pieces from site.css; nothing new moves.
   ========================================================================== */

/* filtered and paged rows carry [hidden]; their own display rules would otherwise win */
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Inner pages without a hero: the content clears the fixed header. */
.page-top{padding-top:calc(var(--promo-h) + var(--nav-h) + var(--s7) + env(safe-area-inset-top,0px))}
@media (min-width:768px){ .page-top{padding-top:calc(var(--promo-h) + var(--nav-h) + var(--s8) + env(safe-area-inset-top,0px))} }
.page-top .overline a,.art__meta a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--t)}
/* Small standalone links: a transparent pseudo-element extends the touch area to 44px,
   as the brand book asks, so the layout does not move. */
.page-top .overline a,.art__meta a,.ep__listen a,.side__link,.side__row a{position:relative}
.page-top .overline a::after,.art__meta a::after,.ep__listen a::after,.side__link::after,.side__row a::after{
  content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.page-top .overline a:hover,.art__meta a:hover{border-color:currentColor}
.page-top>.overline{color:var(--lime-text)}

/* ---------- article and episode heads ------------------------------------ */
.art__title{margin-top:var(--s3);font-weight:300;font-size:clamp(34px,4.4vw,60px);line-height:1.05;letter-spacing:-.03em;max-width:20ch}
.art .art__title{max-width:24ch}
.art__meta{margin-top:var(--s4)}
.art__bar{width:96px;height:6px;margin-top:var(--s5)}
.lede{margin-top:var(--s5);max-width:60ch}
.smap{display:grid;gap:var(--s7);margin-top:var(--s7)}
@media (min-width:600px){ .smap{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .smap{grid-template-columns:repeat(3,1fr)} }
.smap ul,.smap__more ul{margin-top:var(--s3);padding:0;list-style:none}
.smap li,.smap__more li{border-top:1px solid var(--line)}
.smap a,.smap__more li a{display:block;padding-block:var(--s3);font-size:15px;line-height:22px;color:var(--ink);text-decoration:none;transition:color var(--t)}
.smap a:hover,.smap__more li a:hover{color:var(--lime-text)}
.smap__more{margin-top:var(--s6);border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
.smap__more+.smap__more{margin-top:0;border-top:0}
.smap__more summary{display:flex;align-items:center;justify-content:space-between;min-height:56px;cursor:pointer;list-style:none}
.smap__more summary::-webkit-details-marker{display:none}
.smap__more summary::after{content:"+";font-size:20px;line-height:1;color:var(--ink-muted)}
.smap__more[open] summary::after{content:"\2212"}
@media (min-width:768px){ .smap__more ul{columns:2;column-gap:var(--s6)} .smap__more li{break-inside:avoid} }
.lede a{overflow-wrap:anywhere} /* the reception email address, on small phones */

/* ---------- article sidebar ----------------------------------------------
   Beside the post from 1024px, after it on phones. Booking leads on a cream
   card; the rest are quiet lists under small captions, one hairline each.
   It scrolls with the post rather than sticking: it's taller than most
   screens, and the floating booking dock already keeps Book Now in reach. */
.art__layout{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s8)}
@media (min-width:1024px){ .art__layout{grid-template-columns:minmax(0,1fr) 300px;column-gap:var(--s8);align-items:start} }
.side{max-width:68ch}
@media (min-width:1024px){ .side{margin-top:var(--s7)} }
.side__book{background:var(--surface-cream);padding:var(--s5)}
.side__book .body-sm{margin-top:var(--s2)}
.side__book .btn{width:100%;margin-top:var(--s4)}
.side__link{display:block;width:max-content;max-width:100%;margin-top:var(--s3);font-size:15px;line-height:22px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:text-decoration-color var(--t)}
.side__link:hover{text-decoration-color:currentColor}
.side__block{margin-top:var(--s6)}
.side__list{margin-top:var(--s2)}
.side__list li{border-top:1px solid var(--line)}
.side__list li:last-child{border-bottom:1px solid var(--line)}
.side__list a{display:block;padding-block:var(--s3);text-decoration:none;color:var(--ink)}
.side__list a>span:first-child{display:block;font-size:15px;line-height:21px;transition:color var(--t)}
.side__list a:hover>span:first-child{color:var(--lime-text)}
.side__list .caption{display:block;margin-top:var(--s1)}
.side__row{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s4);margin-top:var(--s2)}
.side__row a{font-size:15px;line-height:22px;color:var(--ink);
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px;transition:text-decoration-color var(--t)}
.side__row a:hover{text-decoration-color:currentColor}

/* ---------- prose: the migrated article and show-note bodies -------------- */
.prose{max-width:68ch;margin-top:var(--s7);font-size:17px;line-height:28px;color:var(--ink);overflow-wrap:break-word}
@media (min-width:768px){ .prose{font-size:18px;line-height:30px} }
.prose>*+*{margin-top:var(--s4)}
.prose h2{margin-top:var(--s7);font-weight:300;font-size:28px;line-height:34px;letter-spacing:-.02em}
.prose h3,.prose h4{margin-top:var(--s6);font-weight:400;font-size:21px;line-height:28px;letter-spacing:-.015em}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:var(--s3)}
.prose ul,.prose ol{padding-left:1.2em}
.prose ul{list-style:disc}
.prose ol{list-style:decimal}
.prose li+li{margin-top:var(--s2)}
.prose li::marker{color:var(--ink-muted)}
.prose strong{font-weight:500}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px;transition:text-decoration-color var(--t)}
.prose a:hover{text-decoration-color:var(--ink)}
.prose blockquote{padding-left:var(--s5);border-left:2px solid var(--ink);font-weight:300;font-size:21px;line-height:31px}
/* Photos show at their own size, never stretched past it (many of the old site's are 400-550px).
   The old site's small squares (.is-small) sit right with the text wrapping round them, wherever
   the old markup put them - at the start of a paragraph, inside a heading or between paragraphs. */
.prose img{display:block;width:auto;max-width:100%;height:auto;margin-block:var(--s6)}
.prose img.is-small{max-width:min(320px,100%)}
@media (min-width:768px){
  .prose img.is-small{float:right;max-width:260px;margin:var(--s1) 0 var(--s4) var(--s6)}
}
.prose::after{content:"";display:table;clear:both}

/* YouTube: a still and a play button until clicked, so no YouTube code loads before then */
.yt{position:relative;aspect-ratio:16/9;margin-block:var(--s6);background:var(--surface-ink);clear:both}
.yt__btn{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer}
.yt__btn img{width:100%;height:100%;margin:0;object-fit:cover;opacity:.88;transition:opacity var(--t)}
.yt__btn:hover img{opacity:1}
.yt__play{position:absolute;left:50%;top:50%;width:72px;height:72px;margin:-36px 0 0 -36px;border-radius:50%;background:var(--lime)}
.yt__play::after{content:"";position:absolute;left:29px;top:24px;border-style:solid;border-width:12px 0 12px 20px;border-color:transparent transparent transparent var(--on-field)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Ash's video series: previous and next */
.series{max-width:68ch;margin-top:var(--s7);padding-top:var(--s5);border-top:3px solid var(--ink)}
.series .overline{color:var(--ink-muted)}
.series div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4) var(--s6);margin-top:var(--s4)}

/* topic and service tags under a post */
.tags{display:grid;grid-template-columns:auto 1fr;gap:var(--s3) var(--s5);align-items:center;max-width:68ch;
  margin-top:var(--s7);padding-top:var(--s5);border-top:1px solid var(--line)}
.tags div{display:flex;flex-wrap:wrap;gap:var(--s2)}
.tag,.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 14px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink);font:inherit;font-size:14px;line-height:20px;text-decoration:none;cursor:pointer;
  transition:border-color var(--t),background-color var(--t),color var(--t)}
.tag:hover,.chip:hover{border-color:var(--ink)}
.tag i,.chip i{width:10px;height:10px;border-radius:50%;flex:none}

/* ---------- cards: the homepage journal pattern ---------------------------- */
.posts{display:grid;gap:var(--s7);margin-top:var(--s7)}
@media (min-width:600px){ .posts{grid-template-columns:repeat(2,1fr);gap:var(--s7) var(--s5)} }
@media (min-width:1024px){ .posts{grid-template-columns:repeat(3,1fr)} }
.posts a{display:block;text-decoration:none;color:inherit}
.posts img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;transition:opacity var(--t)}
.posts a:hover img{opacity:.86}
.posts .card__field{height:6px}
.posts .caption{margin-top:var(--s4)}
.posts h3{margin-top:var(--s2);transition:color var(--t)}
.posts a:hover h3{color:var(--lime-text)}
/* phones: a landscape thumbnail beside the title, as on the homepage journal */
@media (max-width:599px){
  .posts{gap:var(--s5)}
  .posts a{display:grid;grid-template-columns:38% 1fr;column-gap:var(--s4);align-items:start}
  .posts img{grid-row:1/4;aspect-ratio:4/3}
  .posts .card__field{grid-column:2;width:40px}
  .posts .caption{grid-column:2;margin-top:var(--s2)}
  .posts h3{grid-column:2;font-size:17px;line-height:22px}
}

/* ---------- library: the blog and podcast, a sidebar beside the results ------
   Search, then "Who it's for" and "Topic" as plain rows with counts - no boxes. Beside
   the list from 1024px, holding still while the results scroll on tall screens; on phones the rows
   fold behind one Filter button under the search. */
.lib{display:grid;gap:var(--s6);margin-top:var(--s7)}
@media (min-width:1024px){ .lib{grid-template-columns:250px minmax(0,1fr);gap:var(--s8);align-items:start} }
.lib__main>.posts,.lib__main>.ep-list{margin-top:var(--s4)}
@media (min-width:1024px){ .lib .posts{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1280px){ .lib .posts{grid-template-columns:repeat(3,1fr)} }
/* It holds still only on screens tall enough to show all of it (about 710px of sidebar
   under the header), so it never needs a scroll bar of its own; on shorter screens it
   scrolls with the page. */
@media (min-width:1024px) and (min-height:860px){
  .filters{position:sticky;top:calc(var(--promo-h) + var(--nav-h) + var(--s5))}
}
.filters__search input{width:100%;min-height:48px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:0;
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.filters__search input:focus{outline:2px solid var(--focus);outline-offset:2px}
.filters__more{margin-top:var(--s3)}
.filters__more summary{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 14px;
  border:1px solid var(--line-strong);cursor:pointer;list-style:none;font-size:16px}
.filters__more summary::-webkit-details-marker{display:none}
.filters__more summary::after{content:"+";font-size:20px;line-height:1;color:var(--ink-muted)}
.filters__more[open] summary::after{content:"\2212"}
@media (min-width:1024px){
  .filters__more{margin-top:0}
  .filters__more summary{display:none}
}
.facets{padding-top:var(--s2)}
.facets__label{margin-top:var(--s5);padding-bottom:var(--s2);border-bottom:1px solid var(--line-strong)}
.facet{display:grid;grid-template-columns:10px 1fr auto;gap:var(--s3);align-items:center;width:100%;min-height:44px;padding:6px 0;
  border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;font-size:15px;line-height:20px;
  text-align:left;cursor:pointer;transition:color var(--t)}
.facet i{width:10px;height:10px;border-radius:50%;transition:transform .3s var(--ease)}
.facet__n{font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
.facet:hover span:not(.facet__n){color:var(--lime-text)}
.facet[aria-pressed="true"]{font-weight:500}
.facet[aria-pressed="true"] i{transform:scale(1.4)}
.facet[aria-pressed="true"] span:not(.facet__n){text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.facets__clear{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--s2);padding:0;border:0;background:none;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.facets__clear:hover{text-decoration-color:currentColor}
.filters__count{min-height:18px}
.filters__empty{margin-top:var(--s6)}

/* ---------- resource heroes: the hub and the topic pages ------------------------
   The title, intro and ways in on the left, a photo from the practice on the right;
   on phones the photo follows as a shorter crop. */
.res-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s7)}
@media (min-width:1024px){ .res-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s8);align-items:end} }
.res-hero__img{overflow:hidden}
.res-hero__img img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 35%}
@media (min-width:1024px){ .res-hero__img img{aspect-ratio:4/5} }
.res-search{display:flex;max-width:560px;margin-top:var(--s6)}
.res-search input{flex:1;min-width:0;width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--line-strong);border-right:0;border-radius:0;
  background:var(--surface);color:var(--ink);font:inherit;font-size:16px}
.res-search input:focus{outline:2px solid var(--focus);outline-offset:2px}
.res-search .btn{min-height:52px}
/* the article's quieter search: in the side column under Book Now, and under Keep reading */
.res-search--side{margin-top:var(--s2)}
.res-search--side input,.res-search--side .btn{min-height:44px}
.res-search--side input{padding:8px 12px;font-size:15px}
.res-search--side .btn{padding-inline:var(--s4)}
.related__search{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4) var(--s6);margin-top:var(--s7);padding-top:var(--s6);border-top:1px solid var(--line)}
.related__search .res-search{margin-top:0;flex:1 1 320px}
.res-ways{display:grid;margin-top:var(--s6);border-top:1px solid var(--line-strong)}
@media (min-width:600px){ .res-ways{grid-template-columns:repeat(3,1fr);column-gap:var(--s5);border-top:0} }
.res-ways li{border-bottom:1px solid var(--line-strong)}
@media (min-width:600px){ .res-ways li{border-bottom:0;border-top:1px solid var(--line-strong)} }
.res-ways a{display:block;padding-block:var(--s4);text-decoration:none;color:var(--ink)}
.res-ways .h3{display:block;transition:color var(--t)}
.res-ways .caption{display:block;margin-top:var(--s1)}
.res-ways a:hover .h3{color:var(--lime-text)}
.res-hero__counts{display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5);margin-top:var(--s6)}
@media (min-width:600px){ .res-hero__counts{column-gap:var(--s7)} }
.res-hero__counts a{display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.res-hero__n{font-weight:300;font-size:40px;line-height:44px;letter-spacing:-.03em;transition:color var(--t)}
.res-hero__counts a:hover .res-hero__n{color:var(--lime-text)}
.more{margin-top:var(--s7)}

/* ---------- episode rows ----------------------------------------------------- */
.ep-list{margin-top:var(--s6);border-top:1px solid var(--line-strong)}
.ep-row{display:grid;grid-template-columns:4px 1fr auto;gap:var(--s4);align-items:center;padding-block:var(--s4);border-bottom:1px solid var(--line-strong)}
.ep-row__bar{align-self:stretch}
.ep-row__n{display:none;font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums}
@media (min-width:768px){
  .ep-row{grid-template-columns:4px 44px 1fr auto}
  .ep-row__n{display:block}
}
.ep-row__text{position:relative}
/* the whole title-and-date block is the touch area for the episode link */
.ep-row__text a::after{content:"";position:absolute;inset:0}
.ep-row__text a{display:block;color:inherit;text-decoration:none;font-size:18px;line-height:24px;transition:color var(--t)}
.ep-row__text a:hover{color:var(--lime-text)}
.ep-row__text p{margin-top:var(--s1)}
.ep-list--ink{border-color:rgba(247,246,240,.34)}
.ep-list--ink .ep-row{border-color:rgba(247,246,240,.34)}
.ep-list--ink .muted,.ep-list--ink .ep-row__n{color:rgba(247,246,240,.72)}
.ep-list--ink .ep-row__text a:hover{color:var(--lime)}

/* ---------- play buttons and the player bar ----------------------------------- */
.play{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--ink);border-radius:50%;
  background:transparent;color:var(--ink);cursor:pointer;transition:background-color var(--t),color var(--t)}
.play:hover{background:var(--ink);color:var(--ink-inverse)}
.play__icon{display:block;width:12px;height:14px;margin-left:2px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
.play.is-playing .play__icon{margin-left:0;clip-path:none;background:linear-gradient(to right,currentColor 0 34%,transparent 34% 66%,currentColor 66%)}
.play--big{display:inline-flex;gap:var(--s3);width:auto;height:52px;padding:0 var(--s5);border-radius:0;
  background:var(--surface-ink);border-color:var(--surface-ink);color:var(--ink-inverse);font:inherit;font-size:16px}
.play--big:hover{background:var(--ink-muted);border-color:var(--ink-muted)}
.band--ink .play{border-color:var(--ink-inverse);color:var(--ink-inverse)}
.band--ink .play:hover{background:var(--ink-inverse);color:var(--ink)}

.player-bar{position:fixed;left:0;right:0;bottom:0;z-index:56;background:var(--surface-ink);color:var(--ink-inverse);
  box-shadow:0 -8px 24px rgba(50,53,44,.2);transform:translateY(110%);transition:transform .45s var(--ease),bottom .45s var(--ease)}
.player-bar.on{transform:none}
.player-bar__in{display:grid;grid-template-columns:auto 1fr auto auto;gap:var(--s4);align-items:center;max-width:1160px;margin:0 auto;
  padding:var(--s3) var(--gutter) calc(var(--s3) + env(safe-area-inset-bottom,0px))}
.player-bar .play{border-color:var(--ink-inverse);color:var(--ink-inverse)}
.player-bar .play:hover{background:var(--ink-inverse);color:var(--ink)}
.player-bar__info{min-width:0}
.player-bar__title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:inherit;text-decoration:none;font-size:15px}
.player-bar__title:hover{text-decoration:underline}
.player-bar__seek{display:block;width:100%;margin-top:6px;accent-color:var(--lime)}
.player-bar__time{font-size:13px;color:rgba(247,246,240,.72);font-variant-numeric:tabular-nums}
.player-bar__close{width:44px;height:44px;border:0;background:none;color:inherit;font-size:24px;line-height:1;cursor:pointer}
@media (max-width:767px){
  .player-bar__time{display:none}
  /* on phones the bar rides above the booking dock once the dock is up */
  .dock.up~.player-bar{bottom:calc(56px + env(safe-area-inset-bottom,0px))}
  .dock.up~.player-bar .player-bar__in{padding-bottom:var(--s3)}
}

/* ---------- episode page ----------------------------------------------------- */
.ep__player{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s6)}
.ep__art{width:96px;height:96px;object-fit:cover}
@media (min-width:768px){ .ep__art{width:140px;height:140px} }
.ep__listen{margin-top:var(--s3)}
.ep__listen a{color:inherit}
.ep__player audio{margin-top:var(--s3)}
.ep__nav{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s4) var(--s6);max-width:68ch;margin-top:var(--s7);
  padding-top:var(--s5);border-top:1px solid var(--line)}

/* ---------- podcast listing ---------------------------------------------------- */
.pod-head{display:grid;gap:var(--s7);align-items:end}
@media (min-width:1024px){ .pod-head{grid-template-columns:1fr 300px} }
.pod-head__art{width:100%;max-width:300px;height:auto;aspect-ratio:1/1;object-fit:cover}
.pod-head__follow,.hub-links{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s6)}
.feat{display:grid;gap:var(--s7) var(--s5);margin-top:var(--s7)}
@media (min-width:600px){ .feat{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .feat{grid-template-columns:repeat(4,1fr)} }
.feat li{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.feat .card__field{width:100%;height:6px}
.feat h3 a{color:inherit;text-decoration:none;transition:color var(--t)}
.feat h3 a:hover{color:var(--lime-text)}
.feat .play{margin-top:auto}

/* ---------- hub ---------------------------------------------------------------- */
.topic-grid{display:grid;gap:var(--s5);margin-top:var(--s7)}
@media (min-width:600px){ .topic-grid{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .topic-grid{grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5)} }
.topic-grid a{display:flex;flex-direction:column;gap:var(--s2);height:100%;padding-bottom:var(--s5);border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none}
.topic-grid__bar{display:block;height:6px;margin-bottom:var(--s3);transform-origin:0 100%;transition:transform .45s var(--ease)}
.topic-grid a:hover .topic-grid__bar{transform:scaleY(1.8)}
.topic-grid .h3{transition:color var(--t)}
.topic-grid a:hover .h3{color:var(--lime-text)}
.topic-grid .caption{margin-top:auto;padding-top:var(--s2)}
.hub-pod{display:grid;gap:var(--s7)}
@media (min-width:1024px){ .hub-pod{grid-template-columns:5fr 7fr;gap:var(--s8);align-items:start} }
.vid-list{display:grid;margin-top:var(--s6);border-top:1px solid var(--line-strong)}
@media (min-width:768px){ .vid-list{grid-template-columns:1fr 1fr;column-gap:var(--s7)} }
.vid-list a{display:grid;grid-template-columns:40px 1fr;gap:var(--s4);align-items:baseline;padding-block:var(--s4);
  border-bottom:1px solid var(--line-strong);color:inherit;text-decoration:none}
.vid-list a:hover .h3{color:var(--lime-text)}
.vid-list__n{font-size:13px;color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* ---------- topic pages and FAQs ------------------------------------------------ */
.topic-head .art__bar{width:120px}
.topic-head .dot-link{margin-top:var(--s6)}
.jump-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:var(--s6)}
.faq-group .faq{margin-top:var(--s5)}
.faq .a a.dot-link{margin:-8px 0 var(--s5)}

@media (prefers-reduced-motion:reduce){
  .player-bar,.topic-grid__bar{transition:none}
}

/* Birthcare promo (practice feedback, 9 November 2026) */
.side__bc img{display:block;width:120px;height:auto;margin-bottom:var(--s3)}
.lib .bc-row--filter{display:none;margin-top:var(--s4);margin-bottom:var(--s6);padding-bottom:var(--s5);border-bottom:1px solid var(--line)}
.lib:has([data-service="pregnancy"][aria-pressed="true"],[data-service="postnatal"][aria-pressed="true"],[data-topic="pregnancy"][aria-pressed="true"],[data-topic="children"][aria-pressed="true"]) .bc-row--filter{display:grid}

/* After online booking: /visit-booked/ (12 November 2026). Ash's video is portrait, so it sits
   beside the text on wide screens and keeps a phone-like width on small ones. */
.bk-who{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);font-size:17px;line-height:25px}
.bk-who img{width:56px;height:56px;object-fit:cover;flex:none}
.bk-intro{display:grid;gap:var(--s6);margin-top:var(--s7)}
@media (min-width:768px){ .bk-intro{grid-template-columns:minmax(0,320px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"video hello" "video todo";gap:var(--s6) var(--s8);align-items:start} .bk-hello{grid-area:hello} .bk-video{grid-area:video} .bk-todo{grid-area:todo} }
@media (min-width:1024px){ .bk-intro{grid-template-columns:minmax(0,360px) minmax(0,560px)} }
.bk-video{margin:0;width:100%;max-width:360px}
.nowrap{white-space:nowrap}
/* Someone who has just booked doesn't need the phone dock's Book Now. */
body:has(.bk) .dock{display:none}
.bk-video video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:var(--surface-ink)}
.bk-text{margin-top:var(--s4);max-width:56ch;font-size:17px;line-height:27px}
.bk-todo{padding:var(--s5);background:var(--surface-cream);border-top:3px solid var(--ink)}
.bk-todo .h3{margin-top:var(--s2)}
.bk-todo p:not(.overline){margin-top:var(--s3);font-size:17px;line-height:27px}
.bk-todo p.body-sm{font-size:15px;line-height:23px}
.bk-section{margin-top:var(--s9);padding-top:var(--s6);border-top:1px solid var(--line)}
.bk-steps{display:grid;gap:var(--s5);margin-top:var(--s6);padding:0;list-style:none;counter-reset:bk}
@media (min-width:768px){ .bk-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)} }
.bk-steps li{counter-increment:bk;padding-top:var(--s4);border-top:3px solid var(--ink)}
.bk-steps li::before{content:counter(bk,decimal-leading-zero);display:block;margin-bottom:var(--s3);font-size:13px;letter-spacing:.12em;color:var(--lime-text)}
.bk-steps p{margin-top:var(--s2);font-size:17px;line-height:27px}
.bk-close{margin-top:var(--s7);max-width:56ch}
.bk-pull{font-weight:300;font-size:24px;line-height:31px;letter-spacing:-.02em}
.bk-close p+p{margin-top:var(--s3);font-size:17px;line-height:27px}
.bk-info{display:grid;gap:var(--s5);margin-top:var(--s6)}
@media (min-width:768px){ .bk-info{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)} }
.bk-info p:not(.overline){margin-top:var(--s2);font-size:17px;line-height:27px}
.bk-info .dot-link{margin-top:var(--s3)}
.bk-more{margin-top:var(--s6)}