/* The palette and the fonts live in tokens.css — the one definition
   shared by the site, the guide layout, Studio and the book Editor. */
@import url("tokens.css");

/* ==========================================================================
   The Messy Parents Collection — site styles
   ========================================================================== */


*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:17.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:var(--cream) url("../img/paper.jpg") center/cover no-repeat;
}

img{max-width:100%;display:block;height:auto}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}

.wrap{width:min(100% - 48px, var(--wrap));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;background:var(--blue);color:#fff;
  padding:10px 16px;border-radius:0 0 10px 0;z-index:100;font-weight:700}
.skip:focus{left:0}

/* --- Type ---------------------------------------------------------------- */

h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.14;margin:0}
h1{font-size:clamp(2.15rem,4.4vw,3.4rem);letter-spacing:-.005em}
.hl{display:block}
h2{font-size:clamp(1.6rem,2.8vw,2.2rem)}
h3{font-size:1.3rem}

.eyebrow{
  font-family:var(--hand);font-weight:400;
  font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.25;
  margin:0;color:var(--ink);
}
.lede{font-size:1.05rem;color:var(--ink-70);margin:0}

/* --- Header -------------------------------------------------------------- */

.site-head{position:relative;z-index:5;background:transparent;border:0}

.head-inner{display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:clamp(32px,6vw,90px);padding:10px 0}

.brand{flex:0 0 auto;display:block;transition:transform .18s ease}
.brand img{width:clamp(216px,17vw,300px);height:auto}
.brand:hover{text-decoration:none;transform:rotate(-1.5deg)}

.nav{display:flex;align-items:center;justify-content:space-between;
  width:100%;max-width:840px;justify-self:end;
  font-family:var(--hand);font-size:clamp(1.18rem,1.3vw,1.42rem)}
.nav a{color:var(--ink);padding:12px 12px;position:relative;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2.5px;
  background:var(--blue);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .2s ease}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:none;color:var(--blue)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}

.btn-ghost{display:none}

.nav-toggle{display:none}

/* --- Hero ---------------------------------------------------------------- */

.hero{padding:0;position:relative}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(6px,1.1vw,18px);align-items:start}
.hero-copy{padding:clamp(2px,1.4vh,14px) 0 8px}
.hero h1{margin-bottom:12px}
.hero .lede{font-family:var(--hand);font-size:1.28rem;line-height:1.36;
  color:var(--ink-70);max-width:40ch}
.hero-art{display:flex;justify-content:flex-start;align-items:flex-start;
  margin-top:calc(42px - var(--head-h, 104px));pointer-events:none}
.hero-art img{width:100%;height:auto;aspect-ratio:1000/747;
  object-fit:contain;object-position:left center;
  filter:drop-shadow(0 12px 16px rgba(33,29,24,.09))}

/* --- Search -------------------------------------------------------------- */

.search{display:flex;align-items:center;gap:11px;margin-top:20px;max-width:none;
  background:var(--cream-soft);border:1.7px solid var(--line);border-radius:999px;
  padding:5px 5px 5px 18px;transition:box-shadow .18s ease}
.search:focus-within{box-shadow:0 0 0 4px rgba(11,98,196,.16)}
.search svg{flex:0 0 auto;opacity:.5}
.search input{flex:1;min-width:0;border:0;background:transparent;
  font-family:var(--body);font-size:1rem;color:var(--ink);padding:9px 0}
.search input::placeholder{color:var(--ink-50)}
.search input:focus{outline:none}
.search button{flex:0 0 auto;border:0;cursor:pointer;background:var(--blue);color:#fff;
  font-family:var(--body);font-weight:800;font-size:.98rem;padding:11px 24px;
  border-radius:999px;transition:background .18s ease}
.search button:hover{background:var(--blue-dark)}

/* --- Label rows (the spine of the page) ---------------------------------- */

.rows{padding:clamp(14px,2.4vw,24px) 0 0}

.row{display:grid;grid-template-columns:var(--label) minmax(0,1fr);
  gap:clamp(12px,2vw,24px);align-items:start;padding:8px 0}
.row--stack{display:block;padding-top:clamp(14px,2.4vh,30px)}
.row--stack > .eyebrow{margin-bottom:clamp(10px,1.6vh,16px);padding-top:0}
.row--stack .row-note{margin-top:10px}
.row > .eyebrow{padding-top:9px}
.row--cards > .eyebrow{padding-top:14px}

.pills{display:flex;flex-wrap:wrap;gap:9px}

/* numbered steps — the rows are a real sequence, so say so */
.step{display:inline-block;font-family:var(--hand);color:var(--ink);
  font-size:1.15em;line-height:1;margin-right:12px;flex:0 0 auto;
  min-width:.7em;text-align:left}
.row > .eyebrow{display:flex;align-items:flex-start}
.row > .eyebrow .step{margin-top:1px}

.pill{display:inline-flex;align-items:center;gap:9px;
  border:1.6px solid var(--line);border-radius:999px;
  background:var(--cream-soft);color:var(--ink);
  font-family:var(--body);font-size:.95rem;font-weight:600;
  padding:8px 18px;cursor:pointer;white-space:nowrap;
  transition:transform .14s ease,background .16s ease,border-color .16s ease,color .16s ease}
.pill:hover{transform:translateY(-2px)}
.pill svg,.pill img{width:23px;height:23px;flex:0 0 auto;object-fit:contain}
.pill[aria-pressed="true"]{border-color:var(--blue);color:var(--blue);background:#fff;
  box-shadow:inset 0 0 0 1px var(--blue)}
.pill--age[aria-pressed="true"]{background:var(--blue);color:#fff;border-color:var(--blue);
  box-shadow:none}

.row-note{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-family:var(--hand);font-size:1.02rem;color:var(--ink-50);
  grid-column:2;margin:5px 0 0}
.row-note:empty{display:none}
.row-note .hint{color:var(--ink-70)}
.rows-hint{font-family:var(--hand);color:var(--ink-50);margin:4px 0 0;
  padding-left:calc(var(--label) + clamp(12px,2vw,24px))}

/* a small flash so it is obvious the results just changed */
@keyframes pop{from{opacity:.25;transform:translateY(5px)}to{opacity:1;transform:none}}
.card-grid.updated > *{animation:pop .3s cubic-bezier(.2,.7,.3,1) both}
.card-grid.updated > *:nth-child(2){animation-delay:.04s}
.card-grid.updated > *:nth-child(3){animation-delay:.08s}
.card-grid.updated > *:nth-child(4){animation-delay:.12s}
.link-reset{background:none;border:0;padding:0;cursor:pointer;font-family:var(--hand);
  font-size:1.05rem;color:var(--blue);text-decoration:underline;text-underline-offset:3px}

/* --- Guide cards --------------------------------------------------------- */

.card-grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fill,minmax(268px,1fr))}

.card{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1.6px solid var(--line-soft);border-radius:var(--radius);padding:15px 18px;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.card:hover{transform:translateY(-3px);border-color:var(--line);
  box-shadow:0 5px 0 rgba(33,29,24,.08);text-decoration:none}
.card-icon{flex:0 0 auto;width:52px;height:52px}
.card-icon svg,.card-icon img{width:100%;height:100%;object-fit:contain}
.card-text{min-width:0}
.card h3{font-family:var(--hand);font-weight:400;font-size:1.28rem;line-height:1.18;
  color:var(--ink);margin-bottom:5px}
.card-meta{margin:0;font-size:.82rem;font-weight:700;color:var(--ink-50);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.card-meta .topic{color:var(--blue)}
.card-meta .dot{opacity:.5}

.empty{border:1.6px dashed var(--line-soft);border-radius:var(--radius);
  padding:28px;text-align:center;color:var(--ink-70)}
.empty p{margin:0 0 6px}

/* --- Blue band ----------------------------------------------------------- */

.band{position:relative;margin:clamp(26px,4vw,44px) 0 0;background:var(--blue-wash);
  border:1.5px solid rgba(11,98,196,.16);border-radius:18px;
  padding:clamp(12px,1.6vw,20px) clamp(24px,3vw,44px);
  padding-left:clamp(150px,16vw,270px);min-height:0;text-align:center}
.band-art{position:absolute;left:clamp(6px,1.8vw,40px);top:50%;
  transform:translateY(-50%);line-height:0;pointer-events:none}
.band-art img{height:clamp(104px,13.5vw,178px);width:auto;max-width:none}
.band p{font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,2.9vw,2.7rem);line-height:1.15;margin:0}
.band .band-sub{font-family:var(--body);font-size:.98rem;font-weight:600;
  color:var(--ink-70);margin-top:5px}

/* --- Footer -------------------------------------------------------------- */

.site-foot{margin-top:clamp(22px,3vw,32px);border-top:1.5px solid var(--line-soft);
  padding:12px 0 16px}
.foot-note{margin:0;font-size:.85rem;color:var(--ink-50);
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap}

/* --- Article ------------------------------------------------------------- */

.article{padding:14px 0 0}
.article-inner{width:min(100%,700px)}
.crumb{font-family:var(--hand);font-size:1.05rem;color:var(--ink-50);
  margin:0 0 12px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--ink-70)}

.article h1{font-size:clamp(1.9rem,4vw,2.9rem);margin-bottom:12px}
.article-meta{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0;
  font-size:.86rem;font-weight:700;color:var(--ink-50);
  padding-bottom:16px;border-bottom:1.6px solid var(--line-soft)}
.tag{border:1.4px solid var(--line-soft);border-radius:999px;padding:3px 12px;
  font-size:.8rem;color:var(--ink-70);background:var(--cream-soft)}
.tag--topic{border-color:var(--blue);color:var(--blue)}

.article-body{margin-top:22px;font-size:1.05rem}
.article-body h2{font-size:clamp(1.45rem,2.4vw,1.85rem);margin:32px 0 10px}
.article-body p{margin:0 0 16px}
.article-body ul,.article-body ol{margin:0 0 18px;padding-left:21px}
.article-body li{margin-bottom:8px}
.article-body strong{font-weight:800}

.callout{border:1.7px solid var(--orange);border-radius:var(--radius);
  background:#fff6f1;padding:20px 22px;margin:28px 0}
.callout h3{font-family:var(--display);color:var(--orange);font-size:1.35rem;margin-bottom:9px}
.callout p:last-child,.callout ul:last-child{margin-bottom:0}

.quiet{border-left:4px solid var(--yellow);padding:3px 0 3px 16px;margin:24px 0;
  font-family:var(--hand);font-size:1.18rem;color:var(--ink-70)}

.related{margin-top:42px;padding-top:24px;border-top:1.6px solid var(--line-soft)}
.related h2{margin-bottom:14px}

/* --- Page bits ----------------------------------------------------------- */

.page-head{padding:clamp(12px,2.2vw,24px) 0 0;max-width:none;text-align:left}
.page-head p{font-family:var(--hand);color:var(--ink-70);
  font-size:clamp(1.16rem,1.5vw,1.34rem);line-height:1.35;
  max-width:44ch;margin:8px 0 0}

/* Page hero: title + subtitle on the left, an editable illustration on the
   right. Shared by Popular / Guides so the images stay consistent.
   The art sits in a FIXED-HEIGHT box, top-aligned to the title, so the
   illustration lands in the same spot on every page even though each page's
   heading and subtitle are different lengths. */
.page-hero{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);
  align-items:start;column-gap:clamp(10px,1.4vw,18px);
  padding:clamp(10px,2vw,22px) 0 0}
.page-hero .page-hero-copy{min-width:0}
.page-hero h1{margin:0}
.page-hero p{font-family:var(--hand);color:var(--ink-70);
  font-size:clamp(1.16rem,1.5vw,1.34rem);line-height:1.35;max-width:46ch;margin:8px 0 0}
/* Fixed art box: same height + top alignment on every page, so the hero
   illustration lands in the SAME place at the SAME size across Popular and
   Guides. (While searching, the art is hidden — see guides.html — so this
   reserved height never causes a gap above the results.) */
.page-hero-art{display:flex;justify-content:flex-start;align-items:flex-start;min-width:0;
  height:clamp(240px,24vw,300px);margin-top:6px}
.page-hero-art img{width:100%;height:100%;max-width:460px;
  object-fit:contain;object-position:left top;display:block;transform:translateX(80px)}
@media (max-width:820px){
  .page-hero{grid-template-columns:1fr;gap:10px}
  .page-hero-art{order:-1;height:auto;max-width:360px;margin:0 auto;justify-content:center}
  .page-hero-art img{height:auto;max-height:260px;transform:none;object-position:center}
}
/* the intro already provides the breathing room — don't stack another gap on top */
.page-head + .rows{padding-top:clamp(14px,1.8vw,22px)}
.rows > .row--stack:first-child{margin-top:0}
.rows > .row--stack + .row--stack{margin-top:clamp(24px,3vw,34px)}

/* Hand-drawn body copy so the About story matches the brand voice (not the
   plain Nunito sans it used before). Slightly larger for comfortable reading. */
.prose{width:100%;max-width:100%}
.prose > :first-child{margin-top:0}
.prose > :last-child{margin-bottom:0}
/* The paragraphs of an editable block sit inside a plain wrapper div, so the
   first/last-child trimming above has to reach one level further in. */
.prose > [data-mpc-text] > :first-child{margin-top:0}
.prose > [data-mpc-text] > :last-child{margin-bottom:0}
.prose p{font-family:var(--hand);font-size:1.28rem;line-height:1.5;
  color:var(--ink-80,var(--ink-70));margin:0 0 16px}
.prose p a{font-family:var(--hand)}
.prose h2{margin:0 0 12px}

/* =========================================================================
   ABOUT PAGE — reusable illustrated sections
   Each .about-section is one "AboutSection component": a column of copy and an
   optional illustration. Layout, spacing, art size and art side are all driven
   by classes / data-attributes that Studio sets, so the page reads like a
   beautifully illustrated children's book with the art beside the words —
   never interrupting them.
   ------------------------------------------------------------------------- */
.about{--about-gap:clamp(38px,6vw,72px);   /* space between sections            */
       --about-text:740px;                 /* readable measure for the copy     */
       --art-col:38%}                       /* art column width (art-* overrides) */

/* Single-column by default (text only). Becomes two-column when it has art.
   NB: keep margin-inline:auto (from .wrap) so each section stays centred — only
   set the vertical rhythm here, never a blanket margin:0. */
.about-section{padding:0;margin-inline:auto}
.about-section + .about-section{margin-top:var(--about-gap)}
.about-section .about-copy{min-width:0;max-width:var(--about-text)}
.about-section .prose{max-width:var(--about-text)}

/* The illustration lives in a figure with its own dedicated column. */
.about-art{margin:0;min-width:0;display:flex;align-items:flex-start;justify-content:center}
.about-art img{width:100%;height:auto;object-fit:contain;display:block;
  max-height:clamp(300px,34vw,430px);
  filter:drop-shadow(0 12px 18px rgba(33,29,24,.10))}
/* Anti-flash: when JS is on, keep the editable illustrations hidden until the
   CHOSEN image has actually loaded (per-image .ready), so the old/default
   picture never flashes before the uploaded one. .illus-ready is a timed
   safety net. Without JS the images show normally so the page still works. */
html.js .about-art img,
html.js .page-hero-art img,
html.js .hero-art img{opacity:0;transition:opacity .2s ease}
html.js .about-art img.ready,
html.js .page-hero-art img.ready,
html.js .hero-art img.ready,
html.illus-ready .about-art img,
html.illus-ready .page-hero-art img,
html.illus-ready .hero-art img{opacity:1}
/* Hide the art figure until it actually has an image (empty slots collapse). */
.about-section:not(.has-art) .about-art{display:none}

/* Two-column layout when an illustration is present. Text keeps its readable
   width and the art takes its own column — the text never flows under it. */
.about-section.has-art{display:grid;align-items:center;
  column-gap:clamp(26px,4.5vw,64px);row-gap:20px;
  grid-template-columns:minmax(0,1fr) minmax(0,var(--art-col))}
.about-section.has-art .about-copy{max-width:var(--about-text);justify-self:start}
/* data-pos="left" puts the illustration on the left, copy on the right */
.about-section.has-art[data-pos="left"]{grid-template-columns:minmax(0,var(--art-col)) minmax(0,1fr)}
.about-section.has-art[data-pos="left"] .about-copy{order:2}
.about-section.has-art[data-pos="left"] .about-art{order:1}
.about-section.has-art[data-pos="left"] .about-copy{justify-self:end}

/* The hero art sits centred against the copy so it covers the middle of the
   paragraphs rather than floating up by the title. */
.about-hero.has-art{align-items:start;
    padding-top:20px;
                   }
.about-hero .about-art{align-items:center;margin-top:60px;margin-left:-100px;
                      }
.about-hero .about-art img{
    transform:scale(1.30);
   }
.about-hero h1{margin:0}
/* Subtitle → first paragraph: a tidy, modest gap (no big empty space). */
.about-sub{font-family:var(--hand);color:var(--ink-70);
  font-size:clamp(1.18rem,1.6vw,1.42rem);line-height:1.35;max-width:44ch;
  margin:12px 0 0}
.about-hero .prose{margin-top:clamp(16px,2.2vw,26px)}

/* Art SIZE (Studio: Small / Medium / Large) — sets the column width and a
   sensible max so a small image never balloons on a wide screen. */
.about-section.art-small{--art-col:28%}
.about-section.art-medium{--art-col:38%}
.about-section.art-large{--art-col:46%}
.about-section.art-small  .about-art img{max-width:260px}
.about-section.art-medium .about-art img{max-width:360px}
.about-section.art-large  .about-art img{max-width:460px}
/* Optional max-width override (Studio slider) via inline --art-max. */
.about-art img{max-width:var(--art-max, none)}

@media (max-width:820px){
  .about{--about-gap:clamp(30px,7vw,44px)}
  /* Stack cleanly: copy first, illustration below, both full width. */
  .about-section.has-art,
  .about-section.has-art[data-pos="left"]{grid-template-columns:1fr;row-gap:18px}
  .about-section.has-art .about-copy,
  .about-section.has-art[data-pos="left"] .about-copy{order:1;justify-self:stretch;max-width:none}
  .about-section.has-art .about-art,
  .about-section.has-art[data-pos="left"] .about-art{order:2;justify-content:center}
  .about-art img,
  .about-section.art-small .about-art img,
  .about-section.art-medium .about-art img,
  .about-section.art-large .about-art img{max-width:min(340px,80%);margin-inline:auto}
  .about-hero .prose{margin-top:clamp(22px,5vw,32px)}
  /* The hero art nudge above (negative left margin, top offset, 1.3x scale) is
     deliberate on desktop but throws the picture off-centre and lets it overlap
     the next section on a phone. Neutralise it here only. */
  .about-hero .about-art{margin-top:0;margin-left:0;justify-content:center}
  .about-hero .about-art img{transform:none}
  /* Drop the height cap so the portrait art keeps its proportions instead of
     being letterboxed inside a shorter box by object-fit:contain. */
  .about-art img{max-height:none}
}

.split{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.75fr);
  gap:clamp(22px,4vw,50px);align-items:center}
.split img{width:100%;max-width:270px;max-height:500px;object-fit:contain;margin-inline:auto}

.book{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;
  border:1.6px solid var(--line-soft);border-radius:var(--radius);
  background:var(--card);padding:20px 24px;margin-bottom:16px}
.book-num{font-family:var(--display);font-size:2.3rem;line-height:1;color:var(--blue);opacity:.85}
.book h3{font-size:1.4rem;margin-bottom:5px}
.book p{margin:0;color:var(--ink-70)}
.book .status{display:inline-block;margin-top:11px;font-size:.78rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:4px 12px;
  background:var(--yellow);color:#4a3a00}
.book .status--out{background:var(--sage);color:#14320f}

/* --- Motion / responsive ------------------------------------------------- */

.rise{opacity:0;transform:translateY(12px);animation:rise .5s cubic-bezier(.2,.7,.3,1) forwards}
.rise:nth-child(2){animation-delay:.07s}
@keyframes rise{to{opacity:1;transform:none}}

/* Desktop: scale the top of the page to the screen height so the hero,
   the filter rows and the band all fit in one view. */
@media (min-width:961px){
  /* --- header ------------------------------------------------------- */
  .head-inner{padding:12px 0 2px}
  .brand img{width:clamp(230px,17vw,300px)}
  .nav{font-size:clamp(1.24rem,1.35vw,1.44rem);max-width:840px}
  .nav a{padding:13px 12px}

  /* --- hero: 631 / 30 / 419 inside the 1080 container ---------------- */
  .hero{padding:0}
  .hero-grid{grid-template-columns:minmax(0,631fr) minmax(0,419fr);
    gap:clamp(20px,3vw,30px);align-items:start}
  .hero-copy{padding-top:clamp(14px,2.2vw,26px)}
  .hero h1{font-size:clamp(2rem,4.05vw,44px);line-height:1.12;margin-bottom:14px}
  .hero .lede{font-size:clamp(1.2rem,1.55vw,1.4rem);max-width:42ch}
  .hero-art{margin-top:0;justify-content:flex-end;align-items:flex-start}
  .hero-art img{width:100%;max-width:430px;height:auto;max-height:none;
    object-position:right center}

  /* --- search ------------------------------------------------------- */
  .search{width:min(545px,100%);max-width:none;height:62px;margin-top:24px;
    padding:0 6px 0 21px;gap:12px}
  .search input{font-size:1.03rem;padding:0}
  .search button{width:116px;height:48px;padding:0;font-size:1rem;flex:0 0 auto}

  /* --- discovery rows ------------------------------------------------ */
  .rows{padding-top:34px}
  .row{grid-template-columns:min(163px,17vw) minmax(0,1fr);gap:0;
    padding:0;margin-bottom:21px}
  .row > .eyebrow{padding-top:9px;font-size:1.22rem;line-height:1.2}
  .step{font-size:1.15em;margin-right:12px}
  .pills{gap:9px}
  .pill{height:44px;padding:0 10px;font-size:.85rem}
  .pill svg,.pill img{width:23px;height:23px}

  /* --- popular guides ------------------------------------------------ */
  .row--stack{margin-top:34px;padding-top:0;margin-bottom:0}
  .row--stack > .eyebrow{font-size:1.44rem;margin-bottom:16px;padding-top:0}
  .card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:25px}
  .card{min-height:146px;padding:19px 22px;gap:16px;align-items:center}
  .card-icon{width:61px;height:61px}
  .card h3{font-size:1.36rem;line-height:1.2;margin-bottom:7px}
  .card-meta{font-size:.89rem}

  /* --- banner -------------------------------------------------------- */
  .band{width:1000px;max-width:calc(100% - 40px);height:114px;
    margin:26px auto 0;border-radius:22px;
    padding:0 36px 0 min(280px,27%);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 2px 10px rgba(11,98,196,.07)}
  .band p{font-size:clamp(1.8rem,3.4vw,40px)}
  .band-art{left:clamp(18px,3.5%,36px)}
  .band-art img{height:180px}
}

@media (max-width:960px){
  .hl{display:inline}
  .hero-grid{grid-template-columns:1fr;gap:8px}
  .hero-art{order:-1;max-width:460px;margin-inline:auto;margin-top:0}
  .hero h1 br{display:none}
  .hero .lede{max-width:none}
  .search{max-width:none}
  .row{grid-template-columns:1fr;gap:8px}
  .row > .eyebrow{padding-top:0}
  /* tidy two-column chip grid instead of a ragged wrap */
  .pills{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .pill{width:100%;justify-content:flex-start;height:46px;padding:0 14px;font-size:.95rem}
  .pill--age{justify-content:center}
  .row-note{grid-column:1}
  .rows-hint{padding-left:0}
  .split{grid-template-columns:1fr}
  .split img{order:-1}
}

@media (max-width:760px){
  .search{height:56px;padding:0 5px 0 16px;gap:8px}
  .search input{font-size:1rem;min-width:0}
  .search button{width:auto;height:44px;padding:0 18px;font-size:.95rem}
  .nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    gap:0;background:var(--cream-soft);border-bottom:1.6px solid var(--line-soft);
    padding:6px 18px 14px}
  .nav.is-open{display:flex}
  .nav a{padding:11px 0;border-bottom:1px solid var(--line-soft)}
  .nav-toggle{display:inline-flex;align-items:center;order:3;font-family:var(--hand);
    font-size:1.05rem;border:1.6px solid var(--line);border-radius:999px;padding:7px 15px;
    background:transparent;cursor:pointer;color:var(--ink)}
  .head-inner{display:flex;align-items:center;position:relative;gap:12px}
  .brand{margin-right:auto}
  .brand img{width:clamp(180px,42vw,230px)}
  /* The couple sits above the banner and overlaps its top edge. The art is
     --band-art-h tall and lifts --band-art-lift of itself above the band, so
     the space it needs above the band is exactly that much. The top margin is
     that overhang plus a little breathing room — keep them in step if either
     number changes, or the heads will run into whatever sits above (this is
     what was happening to the last book card on the Our Books page). */
  .band{--band-art-h:128px;--band-art-lift:.55;
    position:relative;display:block;width:auto;max-width:none;height:auto;
    margin:calc(var(--band-art-h) * var(--band-art-lift) + 24px) 0 0;
    padding:calc(var(--band-art-h) * (1 - var(--band-art-lift)) + 16px) 20px 22px;
    text-align:center}
  .band-art{position:absolute;left:50%;top:0;margin:0;
    transform:translate(-50%,calc(var(--band-art-lift) * -100%))}
  .band-art img{height:var(--band-art-h);width:auto}
  .band p{font-size:1.65rem;line-height:1.2}
  .book{grid-template-columns:1fr;gap:6px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
  .rise{opacity:1;transform:none}
}

/* --- Topic pills: emoji icon + tidy wrapping ---------------------------- */
/* An emoji chosen for a topic in Studio renders in this span; sized to match
   the 23px illustrated icons so a mixed row of image + emoji pills stays even. */
.pill .pill-ico{width:23px;height:23px;flex:0 0 auto;display:inline-flex;
  align-items:center;justify-content:center;font-size:18px;line-height:1}
/* When there are enough topics to need a second line, the pills wrap with an
   even row + column gap and stay left-aligned, so extra rows look intentional. */
.pills{align-content:flex-start}

/* --- Our Books: cover on top, summary box below ------------------------- */
.book-grid{display:grid;gap:clamp(18px,2.4vw,28px);
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}

.book-card{display:flex;flex-direction:column;background:var(--card);
  border:1.6px solid var(--line-soft);border-radius:var(--radius);overflow:hidden;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease}
.book-card:hover{transform:translateY(-3px);border-color:var(--line);
  box-shadow:0 5px 0 rgba(33,29,24,.08)}

/* The cover sits on top in a fixed book-shaped (2:3) frame so every card lines
   up whether or not a cover has been uploaded yet. */
.book-cover{aspect-ratio:2/3;background:var(--blue-wash);overflow:hidden}
.book-cover img{width:100%;height:100%;object-fit:cover;display:block}
.book-cover-empty{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:18px;
  background:linear-gradient(160deg,var(--blue-wash),var(--cream-soft))}
.book-cover-empty span{font-family:var(--display);font-weight:700;font-size:1.02rem;
  line-height:1.2;color:var(--blue-dark)}

.book-body{padding:15px 16px 18px;display:flex;flex-direction:column;gap:7px}
.book-card h3{font-family:var(--display);font-size:1.12rem;line-height:1.2;margin:0}
/* Summary in the site's handwritten font — no box, so it reads like a warm
   note under the cover rather than a form field. */
.book-summary{margin:2px 0 0;font-family:var(--hand);font-size:1.13rem;
  line-height:1.4;color:var(--ink-70)}
.book-card .status{align-self:flex-start;font-size:.7rem;font-weight:800;
  letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:4px 11px;
  background:var(--yellow);color:#4a3a00}
.book-card .status--out{background:var(--sage);color:#14320f}