/* ---- Brand-aligned palette (Brand Bible v3.9.1) ---- */
  :root {
    --butterfly:    #4A90D9;   /* the only brand-mark blue */
    --butterfly-dp: #2F6BA8;
    --ladybird:     #C8302E;   /* the only brand-mark red */
    --ladybird-dp:  #8E2218;
    --ladybird-soft:#F3C9C8;
    --collar:       #6B2D8B;   /* Zoe's purple collar */
    --collar-soft:  #B89BCD;

    --meadow:       #6FA253;   /* meadow green */
    --meadow-dp:    #2F5A2A;
    --meadow-soft:  #DCEACE;
    --orchard:      #8AA86E;
    --gold:         #E8B647;   /* summer gold, not arcade yellow */
    --gold-soft:    #F4D98A;
    --amber:        #C68A3C;   /* harvest amber, autumn */
    --amber-deep:   #8B5A23;
    --winter:       #A8B8C5;   /* cold blue-white, winter */
    --winter-deep:  #4F6878;
    --spring:       #A8C97A;   /* fresh spring green */

    --moss:         #7B8B6A;
    --stone:        #A89B82;
    --rich-black:   #1A1410;   /* like Zoe & Oscar's rich black */
    --ink:          #2A1F14;
    --ink-soft:     #5A4A38;

    --cream:        #FBF3E0;
    --cream-deep:   #F2E6C8;
    --paper:        #FFFBF0;

    --display: 'Fraunces', Georgia, serif;
    --hand:    'Caveat', cursive;
    --body:    'Atkinson Hyperlegible', system-ui, sans-serif;

    --shadow-soft: 0 6px 0 rgba(42,31,20,0.10);
    --shadow-card: 0 10px 30px -10px rgba(42,31,20,0.22);
  }

  /* Skip navigation */
  .skip-link {
    position: absolute; top: -100%; left: 0;
    background: var(--ink); color: var(--paper);
    padding: 0.75rem 1.25rem; font-weight: 700;
    border-radius: 0 0 8px 0; z-index: 9999;
    text-decoration: none; font-size: 1rem;
  }
  .skip-link:focus { top: 0; }

  * { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; scroll-padding-top: 6rem; }
  body {
    font-family: var(--body);
    font-size: 18px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--cream);
    background-image:
      radial-gradient(circle at 12% 18%, rgba(74,144,217,0.07) 0, transparent 35%),
      radial-gradient(circle at 88% 82%, rgba(232,182,71,0.10) 0, transparent 38%);
    min-height: 100vh;
  }
  a { color: var(--collar); text-decoration-thickness: 2px; text-underline-offset: 3px; }
  a:hover { color: var(--ladybird-dp); }
  img { max-width: 100%; display: block; }
  button { font: inherit; cursor: pointer; border: none; background: none; touch-action: manipulation; }

  /* ---------- TOP NAV ---------- */
  .topbar {
    position: sticky; top: 0; z-index: 50;
    background: var(--paper);
    border-bottom: 3px solid var(--ink);
    box-shadow: 0 4px 0 rgba(42,31,20,0.06);
  }
  .topbar-inner {
    max-width: 1240px; margin: 0 auto;
    display: flex; align-items: center; gap: 1.5rem;
    padding: 0.85rem 1.5rem;
  }
  .brand {
    display: flex; align-items: center; gap: 0.65rem;
    font-family: var(--display); font-weight: 900; font-size: 1.3rem;
    letter-spacing: -0.01em; color: var(--ink);
  }
  .brand-mark {
    width: 46px; height: 46px; border-radius: 12px;
    background: none;
    display: grid; place-items: center;
    overflow: hidden;
  }
  .brand-mark img { width: 46px; height: 46px; object-fit: cover; display: block; }
  .brand-sub {
    display: block; font-family: var(--hand); font-weight: 500;
    font-size: 0.95rem; color: var(--collar); margin-top: -4px;
    letter-spacing: 0.02em;
  }
  .nav-list {
    display: flex; gap: 0.25rem; list-style: none; margin-left: auto;
    flex-wrap: nowrap;
  }
  .nav-list a {
    font-family: var(--body); font-weight: 700;
    font-size: 0.85rem;
    padding: 0.55rem 0.6rem; border-radius: 8px;
    color: var(--ink); transition: all 0.15s ease;
    white-space: nowrap;
    text-decoration: none;
    display: inline-block;
  }
  .nav-list a:hover { background: var(--gold-soft); }
  .nav-list a.active {
    background: var(--ink); color: var(--paper);
  }
  .nav-buy-btn {
    display: inline-flex; align-items: center;
    font-family: var(--body); font-weight: 700; font-size: 0.85rem;
    padding: 0.55rem 0.6rem; border-radius: 8px;
    background: var(--collar); color: var(--paper) !important;
    text-decoration: none; transition: all 0.15s ease;
    white-space: nowrap;
  }
  .nav-buy-btn:hover { opacity: 0.88; }

  /* For Grown-ups submenu (2026-08-08): the nav link keeps navigating to
     /grownups on click exactly as before, a separate caret button
     discloses the dropdown, standard WAI-ARIA disclosure pattern rather
     than overloading one element with two meanings. */
  .nav-item-group { position: relative; display: flex; align-items: center; }
  .nav-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; margin-left: -0.25rem;
    border-radius: 6px; color: var(--ink-soft); font-size: 0.7rem;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .nav-caret:hover { background: var(--gold-soft); color: var(--ink); }
  .nav-caret[aria-expanded="true"] { transform: rotate(180deg); }
  .nav-submenu {
    position: absolute; top: 100%; left: 0; margin-top: 0.5rem;
    list-style: none; min-width: 150px;
    background: var(--paper); border: 3px solid var(--ink); border-radius: 12px;
    box-shadow: var(--shadow-card);
    padding: 0.4rem;
    opacity: 0; visibility: hidden; pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
    z-index: 60;
  }
  /* Direct-child combinator only, a hovered/focused ancestor must not
     force EVERY nested submenu visible at once, each level shows only
     its own immediate submenu. */
  .nav-item-group:hover > .nav-submenu,
  .nav-item-group:focus-within > .nav-submenu,
  .nav-caret[aria-expanded="true"] + .nav-submenu {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0);
  }
  .nav-submenu li { margin: 0; }
  .nav-submenu a {
    display: block; padding: 0.45rem 0.6rem; border-radius: 8px;
    font-family: var(--body); font-weight: 700; font-size: 0.82rem; color: var(--ink);
    white-space: nowrap; text-decoration: none;
  }
  .nav-submenu a:hover, .nav-submenu a:focus { background: var(--gold-soft); outline: none; }
  @media (prefers-reduced-motion: reduce) {
    .nav-caret, .nav-submenu { transition: none; }
  }

  /* Sub-submenus (For Grown-ups > Parents/Teachers, and Teachers > Book 1):
     a .nav-item-group nested inside a .nav-submenu renders as a normal menu
     row with its own caret at the right edge, its own submenu flies out to
     the RIGHT, cascading further right at each nesting level. */
  .nav-submenu .nav-item-group {
    position: relative; display: block;
  }
  .nav-submenu .nav-item-group > a {
    padding-right: 1.7rem;
  }
  .nav-submenu .nav-item-group > .nav-caret {
    /* higher specificity than the top-level .nav-caret[aria-expanded]
       rule, so this wins in both states, always pointing right toward
       the flyout regardless of open/closed. */
    position: absolute; right: 0.3rem; top: 50%; margin: 0;
    transform: translateY(-50%) rotate(-90deg);
  }
  .nav-submenu .nav-item-group > .nav-submenu {
    top: -0.4rem; left: 100%; right: auto; margin: 0 0 0 0.4rem;
  }

  .nav-cta {
    background: var(--collar) !important; color: var(--paper) !important;
    box-shadow: 3px 3px 0 var(--ink);
  }
  .nav-cta:hover {
    transform: translate(-1px,-1px);
    box-shadow: 4px 4px 0 var(--ink);
    background: #5a226f !important;
  }

  /* ---------- LAYOUT ---------- */
  main { max-width: 1240px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }
  /* Homepage's <main> holds only the hero, which already cancels the
     top padding itself (margin-top:-2.5rem on .home-hero-wrap); the
     bottom padding has nothing to cancel it, so it shows as a flat
     empty gap before the footer. Zeroed directly rather than with a
     matching negative margin, which would need to stay in sync with
     three different padding values across the breakpoints below. */
  .home-main { padding-bottom: 0; }
  /* footer's own margin-top (set for the header/footer height match)
     reopens the same gap directly below the full-bleed hero. Other
     pages keep it, they have real padded content right above the
     footer where that spacing still makes sense. */
  .home-main + footer { margin-top: 0; }
  .books-main { padding-bottom: 0; }
  .books-main + footer { margin-top: 0; }
  /* Kids Zone's 7 pages (2026-08-08): narrower reading column than the
     site default, ported forward from the old kids-header.php's own
     main.kids-main rule now that those pages use header.php directly. */
  main.kids-main { max-width: 900px; margin: 0 auto; padding: 0.5rem 1.25rem 2rem; }
  .view { animation: fadeUp 0.4s ease; }
  [data-view][hidden] { display: none !important; }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  h1, h2, h3, h4 { font-family: var(--display); line-height: 1.1; color: var(--ink); }
  h1 { font-size: clamp(2.3rem, 5vw, 3.8rem); font-weight: 900; letter-spacing: -0.02em; }
  h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; }
  /* Content pages whose page title was an <h2> for visual sizing, now a
     real <h1> for SEO (every page needs exactly one), sized to match h2
     so this is a semantic fix only, no visual change. */
  h1.h2-size { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -0.015em; }
  h3 { font-size: 1.3rem; font-weight: 700; }
  h4 { font-size: 1.05rem; font-weight: 700; }

  .eyebrow {
    font-family: var(--hand); font-size: 1.45rem; color: var(--collar);
    display: inline-block; transform: rotate(-2deg);
  }

  /* ---------- HOMEPAGE HERO ---------- */
  .hero {
    position: relative;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 24px;
    padding: 3rem 2.5rem 2.5rem;
    box-shadow: var(--shadow-soft);
    overflow: hidden;
  }
  .hero::before {
    content: ''; position: absolute; pointer-events: none;
    width: 240px; height: 240px; right: -70px; top: -70px;
    background: radial-gradient(circle, var(--gold-soft) 0%, var(--gold-soft) 50%, transparent 51%);
    opacity: 0.55;
  }
  .hero-grid {
    display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem;
    align-items: center;
  }
  @media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; } }
  .hero h1 .accent {
    color: var(--collar); position: relative; display: inline-block;
  }
  .hero h1 .accent::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 4px; height: 10px;
    background: var(--gold); z-index: -1; border-radius: 4px;
    transform: skew(-4deg);
  }
  .hero p.lede {
    font-size: 1.18rem; margin: 1.2rem 0 1.6rem; color: var(--ink-soft);
    max-width: 42ch;
  }
  .hero-meta {
    display: flex; gap: 1rem; flex-wrap: wrap;
    font-family: var(--hand); font-size: 1.25rem; color: var(--meadow-dp);
  }
  .hero-meta span { display: inline-flex; align-items: center; gap: 0.4rem; }

  /* ---------- BOOKS PAGE: "one farm, four seasons" ----------
     Page-specific classes (books-*), not shared with any other
     page, so this can be redesigned freely without touching
     .book-card (still used by fables/, kids/for-grownups/, and
     teacherpack/) or .hero/.hero-grid (still used by zoe/).
     Deliberately bolder than a typical content page: full-bleed
     photographic hero (same proven pattern as the homepage, a dark
     scrim under the title guarantees contrast rather than hoping
     the crop happens to be dark enough), saturated full-colour
     season bands rather than pale tints, and a huge translucent
     numeral per section for scale. The one hard rule throughout:
     any text that's actually meant to be READ (pitch copy, quotes,
     spec chips, buttons) sits inside a fully opaque paper panel,
     never floating loose on a busy gradient, so boldness never
     costs legibility. */

  .books-hero { position: relative; margin: -2.5rem 0 0; }
  .books-hero-art {
    position: relative; height: min(88vw, 620px); overflow: hidden;
    border-radius: 0 0 36px 36px; border-bottom: 4px solid var(--ink);
  }
  .books-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
  .books-hero-art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(26,20,16,0.82) 0%, rgba(26,20,16,0.48) 25%, rgba(26,20,16,0) 55%);
  }
  .books-hero-copy {
    position: absolute; z-index: 2; left: 6%; right: 6%; bottom: 1.75rem; color: var(--paper);
  }
  .books-hero-copy .eyebrow { color: var(--gold-soft); }
  .books-hero-copy h1 {
    font-family: var(--display); font-weight: 900; line-height: 1.02;
    font-size: clamp(1.9rem, 5.2vw, 3.4rem); margin: 0.35rem 0 0.7rem;
    color: var(--paper); text-shadow: 0 2px 3px rgba(0,0,0,0.8), 0 4px 20px rgba(0,0,0,0.6);
  }
  .books-hero-copy h1 .accent { color: var(--gold); }
  .books-hero-copy .lede {
    max-width: 56ch; font-size: clamp(0.95rem, 1.6vw, 1.1rem); color: var(--cream);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
  }

  /* Season scroll-tint: the whole page background shifts as you
     scroll from entry to entry (JS toggles data-season on #almanac
     via IntersectionObserver), evoking the turn of the year rather
     than a static page. Soft tints, never full-saturation, so the
     paper diary pages read clearly on top. */
  .almanac { transition: background-color 0.6s ease; }
  .almanac[data-season="summer"] { background-color: var(--gold-soft); }
  .almanac[data-season="autumn"] { background-color: color-mix(in srgb, var(--amber) 30%, var(--paper)); }
  .almanac[data-season="winter"] { background-color: color-mix(in srgb, var(--winter) 35%, var(--paper)); }
  .almanac[data-season="spring"] { background-color: color-mix(in srgb, var(--spring) 30%, var(--paper)); }

  /* The open book: whichever spine is active renders as a genuine
     two-page spread, not a card with tabs. Left page is the sales
     pitch, right page is the fable map, both visible at once since
     they're literally the two halves of an open book, with a shadowed
     gutter down the middle standing in for the spine crease. Torn
     washi tape across the top corners reads as holding the book open,
     tying back into the same scrapbook material language used
     elsewhere on the page (stamp, pin, tape all reused as-is). */
  .book-spreads { position: relative; z-index: 1; padding: 1rem 5% 3rem; }
  .book-spread {
    position: relative; max-width: 1040px; margin: 0 auto 2rem;
    background: var(--paper); border: 3px solid var(--ink);
    border-radius: 14px; box-shadow: 0 20px 40px -18px rgba(26,20,16,0.42), var(--shadow-card);
    display: grid; grid-template-columns: 1fr 1fr;
  }
  /* Author CSS always beats the UA stylesheet's [hidden]{display:none},
     regardless of specificity, so the display:grid above silently wins
     and the book-selector's hidden spreads would render anyway without
     this. */
  .book-spread[hidden] { display: none; }

  .book-gutter {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 40px; transform: translateX(-50%);
    background: linear-gradient(90deg, rgba(26,20,16,0.16), rgba(26,20,16,0.02) 35%, rgba(26,20,16,0.02) 65%, rgba(26,20,16,0.16));
    pointer-events: none; z-index: 2;
  }

  .almanac-tape {
    position: absolute; width: 84px; height: 26px; opacity: 0.88; z-index: 3;
    box-shadow: 0 2px 4px rgba(26,20,16,0.25);
    background: repeating-linear-gradient(45deg, var(--gold), var(--gold) 6px, var(--gold-soft) 6px, var(--gold-soft) 12px);
  }
  .almanac-tape-a { top: -13px; left: 8%; transform: rotate(-7deg); }
  .almanac-tape-b { top: -13px; right: 8%; transform: rotate(6deg); }
  .book-spread[data-season="autumn"] .almanac-tape { background: repeating-linear-gradient(45deg, var(--amber), var(--amber) 6px, var(--gold-soft) 6px, var(--gold-soft) 12px); }
  .book-spread[data-season="winter"] .almanac-tape { background: repeating-linear-gradient(45deg, var(--winter-deep), var(--winter-deep) 6px, var(--winter) 6px, var(--winter) 12px); }
  .book-spread[data-season="spring"] .almanac-tape { background: repeating-linear-gradient(45deg, var(--meadow), var(--meadow) 6px, var(--spring) 6px, var(--spring) 12px); }

  /* Page-number stamp: a small solid badge on the photo corner,
     not a giant low-opacity watermark. The watermark used to sit
     directly behind the spec chips and quote box, which are fully
     opaque, so it either vanished entirely (Book 1's quote block
     covered it completely) or showed only a fragment ambiguous
     enough to misread as a different digit (Book 2). A solid badge
     is legible regardless of how much copy a given book has. */
  .almanac-stamp {
    position: absolute; z-index: 2; top: -14px; left: -14px;
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--paper); border: 2px solid var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 900; font-size: 1.15rem; color: var(--ink);
    box-shadow: 0 2px 5px rgba(26,20,16,0.35);
  }

  .almanac-photo {
    position: relative; z-index: 1;
    aspect-ratio: 3 / 4; border: 8px solid var(--paper);
    outline: 2px solid var(--ink); background-size: cover; background-position: center;
    box-shadow: 0 8px 18px rgba(26,20,16,0.3); transform: rotate(-2.5deg);
  }
  /* All four books show their lead character's own portrait now
     (Zoe/Mabel/Squashy/Chewy), composed for the square, uncropped
     display used on /characters/ (object-fit:contain in a 1:1 box),
     not the tall 3:4 cover-crop the base .almanac-photo uses for a
     landscape scene. aspect-ratio:1/1 + background-size:contain keep
     the whole character in frame instead of cropping their head/ears
     off; background-color fills the letterbox gaps contain-fit leaves. */
  .book-inset-photo {
    width: min(100%, 210px); margin: 0 0 1.25rem;
    aspect-ratio: 1 / 1; background-color: var(--cream-deep); background-size: contain;
  }
  .almanac-photo.is-sketch {
    display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
    border-style: dashed; color: var(--ink-soft); filter: grayscale(0.55) contrast(0.92);
  }
  /* Lead character's own portrait, same desaturated/dashed "not
     finished yet" treatment, instead of a generic hatch pattern with
     no art at all. */
  .almanac-photo.is-sketch .status {
    font-family: var(--hand); font-size: 1rem; color: var(--ink);
    background: rgba(255,251,240,0.88); padding: 0.25rem 0.9rem; border-radius: 999px;
    margin-bottom: 0.75rem;
  }
  .almanac-pin {
    position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
    width: 22px; height: 22px; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, #fff, var(--ladybird) 45%, var(--ladybird-dp));
    border: 1.5px solid var(--ink); box-shadow: 0 2px 5px rgba(0,0,0,0.4); z-index: 2;
  }

  /* min-width:0 overrides the grid item default of min-width:auto,
     which otherwise refuses to shrink a column below its content's
     min-content size, the standards-table's own min-width:560px
     mobile rule would blow the whole card wider than the viewport
     without this, since both pages share one column once stacked. */
  .book-page { position: relative; z-index: 1; padding: 2.25rem; min-width: 0; }
  .book-page-left { padding-right: 2.75rem; }
  .book-page-right { padding-left: 2.75rem; }
  .almanac-date { font-family: var(--hand); font-size: 1.3rem; color: var(--collar); display: flex; align-items: center; gap: 0.5rem; }
  .book-page h3 { font-size: 1.5rem; margin: 0.3rem 0 0.8rem; }
  .book-page .pitch { color: var(--ink-soft); font-size: 1.0rem; margin-bottom: 1rem; }
  .book-page .characters-row { margin-bottom: 1.1rem; }
  .book-page-label { font-family: var(--hand); font-size: 1.3rem; color: var(--collar); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
  .books-spec-strip { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; }
  .books-spec-chip {
    background: var(--cream); border: 2px solid var(--ink); border-radius: 999px;
    padding: 0.3rem 0.8rem; font-size: 0.78rem; font-weight: 700;
  }
  .book-page .standards-table-wrap { margin-top: 0; }

  @media (max-width: 760px) {
    .book-spread { grid-template-columns: 1fr; }
    .book-gutter { display: none; }
    .book-page-left { padding-right: 2.25rem; border-bottom: 3px dashed var(--cream-deep); }
    .book-page-right { padding-left: 2.25rem; }
    .book-inset-photo { max-width: 200px; margin: 0 auto 1.25rem; }
  }

  /* ---------- HOMEPAGE: full-bleed hero + adventure zones ---------- */
  body { overflow-x: hidden; } /* guards the 100vw breakout below against a horizontal scrollbar */
  .full-bleed { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }

  .home-hero-wrap { position: relative; margin-top: -2.5rem; }
  .home-hero-art { position: relative; height: min(88vw, 620px); overflow: hidden; }
  .home-hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
  .home-hero-art::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(0deg, rgba(42,31,20,0.55) 0%, rgba(42,31,20,0.05) 42%, rgba(42,31,20,0) 60%);
  }
  .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;
  }

  /* Centred under the "Merevale Creek Farm" banner painted into the hero
     image itself (2026-08-08), independently positioned rather than a
     flex child, so it stays centred regardless of whether the ladybird
     badge or the rail have one item or several. .btn.home-hero-cta (not
     just .home-hero-cta) beats .btn's own later same-specificity rules
     for font/background/padding. */
  .btn.home-hero-cta {
    position: absolute; top: 8.5rem; left: 50%; transform: translateX(-50%);
    z-index: 4;
    font-family: var(--display); font-weight: 900; font-size: clamp(0.6rem, 1.4vw, 0.85rem);
    padding: 0.55rem 1rem;
    background: #FF8000; color: var(--paper);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    --pulse-base: 0 6px 18px rgba(0,0,0,0.35); --pulse-color: rgba(255, 128, 0, 0.7);
    animation: home-pulse 1.6s ease-out infinite, home-hero-cta-scale-pulse 1.6s ease-in-out infinite;
  }
  .btn.home-hero-cta:hover { transform: translateX(-50%) translateY(-1px); }
  @keyframes home-hero-cta-scale-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.25); }
  }

  /* .home-hero-badges is the positioning context (position:absolute,
     covers the hero) for three independently-placed pieces: the ladybird
     badge (top left, when shown), Download Free Story (top centre, see
     .btn.home-hero-cta above) and the badge rail (right, see
     .home-badge-rail below). Each is absolutely positioned on its own
     rather than flex-distributed, so moving/hiding one never shifts the
     others, unlike a single flex row would. */
  .home-hero-badges {
    position: absolute; z-index: 4; top: 1.2rem; left: 5%; right: 5%; bottom: 1.2rem;
  }
  .home-badge-ladybird {
    position: absolute; top: 0; left: 0;
  }
  /* Books / For Grown-ups / Kids' Zone / Buy Now grouped into their own
     column, pinned to the right of the hero (2026-08-08). */
  .home-badge-rail {
    position: absolute; top: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 0.6rem;
  }
  .home-badge {
    flex: 0 0 auto;
    width: clamp(78px, 15vw, 150px); height: clamp(78px, 15vw, 150px);
    border-radius: 50%; border: 4px solid var(--ink);
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    font-family: var(--display); font-weight: 900;
    font-size: clamp(0.62rem, 1.7vw, 1rem); line-height: 1.15;
    box-shadow: var(--shadow-card); text-decoration: none;
    transition: transform 0.15s;
  }
  .home-badge .ico { display: block; font-size: clamp(1.05rem, 2.6vw, 1.9rem); margin-bottom: 0.15rem; }

  /* Ladybird and Buy Now: the circle stays tilted like a sticker, but
     the icon+label inside counter-rotates by the same amount so the
     text itself reads level rather than tilted. */
  .home-badge-ladybird .badge-content,
  .home-badge-buy .badge-content {
    display: flex; flex-direction: column; align-items: center;
  }
  /* Ladybird circle sits at +9deg; -15deg here lands the text at -6deg
     absolute, matching For Grown-ups' own tilt. Buy Now circle sits at
     -9deg; +15deg here lands the text at +6deg, matching Kids' Zone. */
  .home-badge-ladybird .badge-content { transform: rotate(-15deg); }
  .home-badge-buy .badge-content { transform: rotate(15deg); }

  /* Exact hex swatch supplied by the user, not the usual brand tokens.
     Text colour follows the black/white pairing shown in that same
     swatch: black on the light green/yellow backgrounds, white on
     the darker orange/red/blue ones. All four badges pulse the same
     way Buy Now did, one shared keyframe reading each badge's own
     --pulse-color rather than four near-duplicate @keyframes blocks. */
  .home-badge-buy, .home-badge-grownups, .home-badge-kids, .home-badge-ladybird {
    --pulse-base: var(--shadow-card);
    animation: home-pulse 1.6s ease-out infinite;
  }
  /* Buy Now / For Grown-ups / Kids' Zone went back to plain circles
     (2026-08-08), same shape as Books, inherited straight from the base
     .home-badge rule below. Ladybird keeps the squircle, it's the one
     of the four not part of that change. */
  .home-badge-ladybird {
    border-radius: 26%; /* squircle: distinct from the plain circles (Books, Buy Now, For Grown-ups, Kids' Zone) */
  }
  @keyframes home-pulse {
    0%   { box-shadow: var(--pulse-base), 0 0 0 0 var(--pulse-color); }
    100% { box-shadow: var(--pulse-base), 0 0 0 9px transparent; }
  }
  @media (prefers-reduced-motion: reduce) {
    .home-badge-buy, .home-badge-grownups, .home-badge-kids, .home-badge-ladybird,
    .btn.home-hero-cta, .home-badge-buy .star {
      animation: none;
    }
  }

  .home-badge-buy { background: #FFFF00; color: var(--ink); transform: rotate(-9deg); --pulse-color: rgba(255, 255, 0, 0.7); }
  .home-badge-buy:hover { transform: rotate(-9deg) scale(1.05); }
  .home-badge-buy .star { color: var(--ladybird); font-size: clamp(1.4rem, 3.4vw, 2.5rem); animation: home-badge-icon-pulse 1.6s ease-in-out infinite; }

  .home-badge-grownups { background: #0000FF; color: var(--paper); transform: rotate(-6deg); --pulse-color: rgba(0, 0, 255, 0.7); }
  .home-badge-grownups:hover { transform: rotate(-6deg) scale(1.05); }

  .home-badge-kids { background: #00FF00; color: var(--ink); transform: rotate(6deg); --pulse-color: rgba(0, 255, 0, 0.7); }
  .home-badge-kids:hover { transform: rotate(6deg) scale(1.05); }

  .home-badge-ladybird { background: #FF0000; color: var(--paper); transform: rotate(9deg); --pulse-color: rgba(255, 0, 0, 0.7); }
  .home-badge-ladybird:hover { transform: rotate(9deg) scale(1.05); }

  /* Books: one more circle in the main row itself now (between
     Ladybirds/For Grown-ups and Kids' Zone/Buy Now), same flex-child
     pattern as the original four, just one more colour from the same
     pure-hex palette. Fables used to sit alongside it here too, until
     that page was merged into books/index.php (2026-08-07). */
  .home-badge-books {
    --pulse-base: var(--shadow-card);
    animation: home-pulse 1.6s ease-out infinite;
    background: #FF00FF; color: var(--paper); transform: rotate(-8deg); --pulse-color: rgba(255, 0, 255, 0.7);
  }
  .home-badge-books:hover { transform: rotate(-8deg) scale(1.05); }
  @media (prefers-reduced-motion: reduce) {
    .home-badge-books { animation: none; }
  }

  @keyframes home-badge-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.45); } }

  /* Seven items (3 circles, the CTA button, 3 more circles, in that
     exact DOM order) is too many for flex-wrap to break predictably
     on a phone, it was landing as an uneven 4-then-3 split with the
     button crammed sideways into whichever row it happened to fall
     on. Switching to a 3-column grid instead makes the button's own
     row a deliberate choice: grid-column:1/-1 forces it to span the
     full width and start a new row on its own, which, given the DOM
     order is exactly 3 circles / button / 3 circles, produces a
     clean three-row layout (3 circles, full-width button, 3 circles)
     with no manual row/column assignment needed for anything else. */
  @media (max-width: 650px) {
    .home-hero-badges {
      display: grid; grid-template-columns: repeat(3, 1fr);
      justify-items: center; align-items: center;
      gap: 0.9rem 0.5rem;
    }
    /* Ladybird and the CTA button are absolutely positioned above (desktop
       only), reset to normal grid flow below 650px so they rejoin the
       grid as ordinary items instead of floating over it. */
    .home-badge-ladybird, .btn.home-hero-cta { position: static; transform: none; }
    .btn.home-hero-cta:hover { transform: translateY(-1px); }
    /* Unwrap the rail below 650px: its 4 children rejoin the grid above
       as flat items, exactly as if .home-badge-rail didn't exist, so the
       existing mobile 3-column layout is untouched by the desktop-only
       right-hand rail. */
    .home-badge-rail { position: static; display: contents; }
    .home-badge { width: clamp(64px, 20vw, 82px); height: clamp(64px, 20vw, 82px); font-size: 0.58rem; }
    .home-badge .ico { font-size: 1.1rem; margin-bottom: 0.1rem; }
    .btn.home-hero-cta {
      grid-column: 1 / -1; justify-self: center;
      font-size: 0.72rem; padding: 0.6rem 1.1rem;
    }
  }
  @media (max-width: 380px) {
    .home-badge { width: clamp(56px, 22vw, 70px); height: clamp(56px, 22vw, 70px); font-size: 0.52rem; }
    .home-badge .ico { font-size: 0.95rem; }
    .btn.home-hero-cta { font-size: 0.66rem; padding: 0.5rem 0.9rem; }
  }

  /* Grown-ups Zone badge sub-menus (currently used on grownups-zone/
     index.php only). New wrapper class, doesn't touch .home-badge /
     .badge-content / .home-hero-badges, so the homepage's and
     kids-zone's plain badges keep their hover-scale and pulse exactly
     as before. */
  .home-badge-group { position: relative; display: inline-block; flex: 0 0 auto; }

  .home-badge-toggle {
    position: absolute; left: 50%; bottom: -0.55rem; transform: translateX(-50%);
    width: 26px; height: 26px; border-radius: 50%;
    border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem; line-height: 1; padding: 0; cursor: pointer;
    box-shadow: var(--shadow-card);
    z-index: 6;
    transition: transform 0.15s ease;
  }
  .home-badge-toggle[aria-expanded="true"] { transform: translateX(-50%) rotate(180deg); }

  .home-badge-menu {
    position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%) translateY(-6px);
    z-index: 5;
    list-style: none; margin: 0.9rem 0 0; padding: 0.4rem;
    min-width: 180px;
    background: var(--paper); border: 3px solid var(--ink); border-radius: 12px;
    box-shadow: var(--shadow-card);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  }
  /* Invisible bridge over the visual gap (the margin above): margin
     isn't part of an element's hoverable box, so without this the
     cursor crosses a genuine dead zone moving from the circle down
     to the menu, hover drops mid-transit and the menu closes before
     the cursor arrives. This extends the menu's own hover area
     upward to meet the circle, with nothing visible drawn there. */
  .home-badge-menu::before {
    content: ''; position: absolute; left: 0; right: 0; top: -0.9rem; height: 0.9rem;
  }
  .home-badge-menu li { margin: 0; }
  .home-badge-menu a {
    display: block; padding: 0.45rem 0.6rem; border-radius: 8px;
    font-family: var(--body); font-weight: 700; font-size: 0.78rem; line-height: 1.25;
    color: var(--ink); text-decoration: none; text-align: left;
    white-space: nowrap;
  }
  /* Longer item labels (e.g. "UK National Curriculum Word Lists")
     grow the menu itself rather than wrapping onto a second line:
     nowrap above forces each link's intrinsic width to its full
     single-line length, and max-content here lets the menu (a
     shrink-to-fit absolutely positioned box) expand to match the
     widest item instead of sitting stuck at min-width. */
  .home-badge-menu {
    width: max-content;
    max-width: min(90vw, 360px);
  }
  .home-badge-menu a:hover, .home-badge-menu a:focus { background: var(--gold-soft); outline: none; }

  /* > (direct child) not a descendant selector: a nested submenu
     inside a menu item is technically also a descendant of the outer
     group, a plain descendant selector here would reveal it just from
     hovering the outer circle, before the nested item itself is
     touched. */
  .home-badge-group:hover > .home-badge-menu,
  .home-badge-group:focus-within > .home-badge-menu,
  .home-badge-group.open > .home-badge-menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Nested flyout: a submenu hanging off one item inside a menu
     (e.g. "Parents" inside the For Grown-ups menu). Reuses
     .home-badge-group/.home-badge-toggle/.home-badge-menu for the
     shared JS (badgeToggle works on any nesting depth via
     closest()) and visuals, with position/size overrides scoped by
     the extra .home-badge-submenu-group class + element selector so
     they beat the base rules regardless of source order. */
  li.home-badge-group.home-badge-submenu-group {
    position: relative; display: block; padding-right: 1.5rem;
  }
  li.home-badge-group.home-badge-submenu-group > .home-badge-toggle {
    left: auto; right: 0; top: 50%; bottom: auto; transform: translateY(-50%);
    width: 18px; height: 18px; font-size: 0.55rem;
  }
  li.home-badge-group.home-badge-submenu-group > .home-badge-toggle[aria-expanded="true"] {
    transform: translateY(-50%) rotate(90deg);
  }
  li.home-badge-group.home-badge-submenu-group > .home-badge-menu {
    top: -0.4rem; left: 100%; margin: 0 0 0 0.5rem;
    transform: translateX(-6px);
  }
  /* This flyout's gap is horizontal (to the right), not vertical, so
     its hover-bridge needs to replace the base ::before entirely
     rather than extend it. */
  li.home-badge-group.home-badge-submenu-group > .home-badge-menu::before {
    left: -0.5rem; right: auto; top: 0; bottom: 0; width: 0.5rem; height: auto;
  }
  li.home-badge-group.home-badge-submenu-group:hover > .home-badge-menu,
  li.home-badge-group.home-badge-submenu-group:focus-within > .home-badge-menu,
  li.home-badge-group.home-badge-submenu-group.open > .home-badge-menu {
    transform: translateX(0);
  }

  @media (prefers-reduced-motion: reduce) {
    .home-badge-menu, .home-badge-toggle { transition: none; }
  }

  .home-wave { display: block; width: 100%; height: 64px; }

  .home-feature-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .home-feature { text-align: center; text-decoration: none; }
  .home-feature .badge {
    width: 84px; height: 84px; border-radius: 50%; margin: 0 auto 0.65rem;
    display: flex; align-items: center; justify-content: center; font-size: 2.1rem;
    border: 3px solid var(--ink); box-shadow: var(--shadow-soft); transition: transform 0.15s;
  }
  .home-feature:hover .badge { transform: translateY(-5px) rotate(-6deg); }
  .home-feature .label { font-weight: 800; font-size: 0.92rem; color: var(--ink); }
  @media (max-width: 720px) { .home-feature-row { grid-template-columns: repeat(2, 1fr); } }

  .home-zone { padding: 4rem 0; }
  .home-zone-ladybird { background: var(--ladybird-soft); }
  .home-zone-explore { background: var(--meadow-soft); }
  .home-zone-grid {
    max-width: 1240px; margin: 0 auto; padding: 0 1.5rem;
    display: grid; grid-template-columns: 1.05fr 1fr; gap: 3rem; align-items: center;
  }
  .home-zone-grid .eyebrow { font-size: 1.35rem; }
  .home-zone-art { border-radius: 22px; border: 4px solid var(--ink); overflow: hidden; box-shadow: var(--shadow-card); transform: rotate(1.3deg); }
  .lb-count { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; font-size: 2.6rem; }

  .home-cast-card { transition: transform 0.18s; }
  .home-cast-card:nth-child(1) { transform: rotate(-2.5deg); }
  .home-cast-card:nth-child(2) { transform: rotate(2deg); }
  .home-cast-card:nth-child(3) { transform: rotate(-1.5deg); }
  .home-cast-card:nth-child(4) { transform: rotate(2.5deg); }
  .home-cast-card:hover { transform: rotate(0deg) translateY(-6px); box-shadow: var(--shadow-card); }

  .home-trust-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.5rem; margin-bottom: 1.5rem; font-weight: 700; font-size: 0.88rem; color: var(--ink-soft); }
  .home-start-card {
    max-width: 760px; margin: 0 auto; text-align: center; background: var(--paper);
    border: 4px solid var(--ink); border-radius: 26px; padding: 2.5rem 2rem; box-shadow: var(--shadow-card);
  }
  .home-start-card .btn-row { justify-content: center; }


  /* DUAL DOORS */
  .doors {
    margin-top: 3rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;
  }
  @media (max-width: 720px) { .doors { grid-template-columns: 1fr; } }
  .door {
    border: 3px solid var(--ink);
    border-radius: 20px;
    padding: 2rem 2rem 1.75rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.2s ease;
    text-align: left;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .door:hover {
    transform: translate(-2px, -2px);
    box-shadow: 0 10px 0 rgba(42,31,20,0.15);
  }
  .door-kids { background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%); }
  .door-grown { background: linear-gradient(135deg, var(--paper) 0%, var(--cream-deep) 100%); }
  .door-icon {
    font-size: 2.6rem; line-height: 1; margin-bottom: 0.5rem;
    display: block;
  }
  .door h2 { margin-bottom: 0.4rem; }
  .door-arrow {
    position: absolute; right: 1.5rem; bottom: 1.5rem;
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--ink); color: var(--paper);
    display: grid; place-items: center;
    font-size: 1.4rem; font-weight: 700;
    transition: transform 0.2s;
  }
  .door:hover .door-arrow { transform: translateX(6px); }

  /* SECTION BLOCKS */
  .section { margin-top: 4rem; }
  .section-head {
    display: flex; align-items: end; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem;
    border-bottom: 3px solid var(--ink); padding-bottom: 0.75rem;
  }

  .reviews {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem;
  }
  .quote {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    position: relative;
  }
  .quote::before {
    content: '"'; font-family: var(--display); font-size: 4rem; line-height: 1;
    color: var(--collar); position: absolute; top: 0.5rem; left: 1rem; opacity: 0.3;
  }
  .quote p { font-style: italic; margin-bottom: 0.75rem; padding-left: 1rem; }
  .quote cite {
    font-style: normal; font-weight: 700; font-size: 0.9rem;
    color: var(--ink-soft); padding-left: 1rem;
  }

  /* Three sticky-pillar cards (replacing generic 'news') */
  .pillars {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem;
  }
  /* Same card language as .char-card above (black border, centred icon,
     paper bg, shadow) so the Butterfly/Ladybird entries read as two more
     cards in the cast, not a separate info-box style. */
  .pillar {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 20px;
    padding: 1.1rem 1.25rem;
    box-shadow: var(--shadow-soft);
    text-align: center;
  }
  .pillar-icon {
    width: 64px; height: 64px; margin: 0 auto 0.6rem;
    border-radius: 14px;
    border: 2px solid var(--ink);
    overflow: hidden;
    position: relative;
  }
  .pillar-icon img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0.6rem; }
  .pillar-icon span { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; font-size: 1.9rem; line-height: 1; }
  .pillar h3 { font-size: 1.05rem; margin: 0.3rem 0 0.4rem; }
  .pillar .badge {
    display: inline-block; font-family: var(--hand); font-size: 1.2rem;
    color: var(--collar);
  }
  .pillar p { color: var(--ink-soft); font-size: 0.85rem; line-height: 1.4; margin: 0; }

  /* ---------- BOOKS PAGE ---------- */
  .shelf {
    background: linear-gradient(180deg, transparent 0%, transparent 70%, var(--cream-deep) 70%, var(--cream-deep) 100%);
    padding: 2rem 1.5rem 0.5rem;
    border-radius: 16px;
    overflow-x: auto;
    margin-bottom: 3rem;
  }
  .shelf-row {
    display: flex; align-items: end; justify-content: center;
    gap: 0.5rem; min-width: max-content;
    padding-bottom: 0.5rem;
    border-bottom: 8px solid var(--ink);
    box-shadow: 0 12px 0 var(--ink-soft);
  }
  .spine {
    width: 64px; height: 250px;
    border: 2px solid var(--ink);
    border-radius: 4px 4px 0 0;
    color: var(--paper);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--display); font-weight: 800;
    writing-mode: vertical-rl; text-orientation: mixed;
    padding: 1rem 0; font-size: 0.9rem;
    box-shadow: -2px 0 0 rgba(0,0,0,0.15);
    cursor: pointer; transition: transform 0.2s;
  }
  .spine:hover { transform: translateY(-12px); }
  .spine.coming-soon {
    background: repeating-linear-gradient(45deg, var(--cream-deep), var(--cream-deep) 6px, var(--paper) 6px, var(--paper) 12px);
    color: var(--ink-soft); border-style: dashed;
  }

  .book-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.75rem;
  }
  .book-card {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column;
  }
  .book-card-cover {
    aspect-ratio: 4/3;
    display: grid; place-items: center;
    color: var(--paper); font-family: var(--display); font-weight: 900;
    font-size: 1.65rem; padding: 1.5rem;
    text-align: center; line-height: 1.05;
    border-bottom: 3px solid var(--ink);
    position: relative;
  }
  .book-card-cover .num-badge {
    position: absolute; top: 0.75rem; left: 0.75rem;
    background: var(--paper); color: var(--ink);
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 900;
    border: 2px solid var(--ink);
  }
  .book-card-cover .season-tag {
    position: absolute; top: 0.75rem; right: 0.75rem;
    background: rgba(0,0,0,0.25); color: var(--paper);
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-family: var(--body); font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    border: 1px solid rgba(255,255,255,0.4);
  }
  .book-card-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
  .book-card-body p { color: var(--ink-soft); margin: 0.5rem 0 1rem; }
  .meta-row {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    margin-bottom: 1rem; font-size: 0.85rem;
  }
  .meta-row span {
    background: var(--cream-deep); padding: 0.25rem 0.6rem; border-radius: 999px;
    border: 1.5px solid var(--ink); font-weight: 700;
  }
  .characters-row {
    font-family: var(--hand); font-size: 1.1rem; color: var(--meadow-dp);
    margin-bottom: 1rem;
  }
  .btn-row { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: auto; }
  .btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.6rem 1rem; border-radius: 10px;
    font-weight: 700; font-size: 0.92rem;
    border: 2px solid var(--ink);
    background: var(--paper); color: var(--ink);
    transition: all 0.15s;
    text-decoration: none;
  }
  .btn:hover { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--ink); }
  .btn-primary { background: var(--collar); color: var(--paper); }
  .btn-primary:hover { background: #5a226f; }
  .btn-sun { background: var(--gold); color: var(--ink); }
  .btn-leaf { background: var(--meadow); color: var(--paper); }
  .btn-leaf:hover { background: var(--meadow-dp); }
  .btn-pill { border-radius: 999px; padding: 0.7rem 1.4rem; }

  /* Small icon+label chips, e.g. a row of quick links under a hero */
  .feature-strip { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 1.75rem; }
  .feature-chip {
    display: inline-flex; align-items: center; gap: 0.55rem;
    background: var(--paper); border: 2px solid var(--ink); border-radius: 999px;
    padding: 0.6rem 1.1rem 0.6rem 0.7rem;
    font-weight: 700; font-size: 0.88rem; color: var(--ink);
    text-decoration: none; box-shadow: var(--shadow-soft);
    transition: transform 0.15s;
  }
  .feature-chip:hover { transform: translate(-2px, -2px); box-shadow: 3px 3px 0 var(--ink); }
  .feature-chip .ico {
    font-size: 1.35rem; width: 2.1rem; height: 2.1rem; border-radius: 50%;
    display: grid; place-items: center; flex-shrink: 0;
  }

  .collect-call {
    margin-top: 2.5rem;
    background: var(--ink); color: var(--paper);
    border-radius: 20px; padding: 2.5rem;
    text-align: center;
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-soft);
  }
  .collect-call h2 { color: var(--paper); }
  .collect-call .eyebrow { color: var(--gold); }
  .collect-call .btn-row { justify-content: center; margin-top: 1.5rem; }

  /* ---------- LADYBIRD MECHANIC PANEL ---------- */
  .ladybird-panel {
    background: linear-gradient(135deg, var(--paper) 0%, var(--cream-deep) 100%);
    border: 3px solid var(--ink);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: var(--shadow-soft);
    display: grid; grid-template-columns: 2fr 3fr; gap: 2rem;
    align-items: center;
  }
  @media (max-width: 720px) { .ladybird-panel { grid-template-columns: 1fr; } }
  .ladybird-grid {
    display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.5rem;
  }
  .lb-cell {
    aspect-ratio: 1;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 8px;
    display: grid; place-items: center;
    font-family: var(--display); font-weight: 800;
    font-size: 0.85rem; color: var(--ink-soft);
    position: relative;
  }
  .lb-cell .count {
    font-family: var(--hand); font-size: 1.4rem; color: var(--ladybird);
    line-height: 1;
  }
  .lb-cell .ch { font-size: 0.7rem; opacity: 0.65; margin-top: 2px; }

  /* ---------- CHARACTERS ---------- */
  /* Card footprint matches /kids-zone/animals/'s .animal-grid / .animal-card
     exactly (same minmax, same image height, same name/role font sizes),
     the filter buttons above the grid are the only thing this page keeps
     that Animals doesn't. */
  .character-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 1rem;
  }
  /* JS only ever touches #charGrid's own children (renderChars() clears and
     rebuilds this div on every filter click), display:contents lets those
     dynamically-injected .char-card items lay out as if they were direct
     .character-grid children, while the two static .pillar-inline cards
     after it are real siblings the filter logic never sees or clears, so
     they stay put (spanning half the row each) regardless of which filter
     is active. Content max-width (1240px) + this grid's 140px/1rem-gap
     tracks lock in exactly 7 columns at any viewport ≥ ~1124px, so span 3
     + span 3 fills the remaining row next to a single trailing card (Zoe)
     with no gap, matching the "All characters" view exactly; below that
     width the column count is no longer predictable, so the cards drop to
     full-row instead of guessing. */
  .char-grid-mount { display: contents; }
  .pillar-inline { grid-column: 1 / -1; }
  @media (min-width: 1124px) {
    .pillar-inline { grid-column: span 3; }
  }
  .char-card {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    position: relative;
    text-align: center;
  }
  .char-portrait {
    width: 100%; height: 110px;
    overflow: hidden;
    position: relative;
  }
  .char-portrait svg, .char-portrait img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 0.5rem; }
  .char-name { font-family: var(--display); font-weight: 900; font-size: 1.05rem; margin-top: 0.4rem; }
  .char-role { font-family: var(--hand); font-size: 0.95rem; color: var(--collar); padding: 0 0.6rem 0.7rem; }
  .fun-facts { list-style: none; }
  .fun-facts li {
    padding: 0.5rem 0; border-top: 1.5px dashed var(--cream-deep);
    font-size: 0.93rem; display: flex; gap: 0.5rem;
  }
  .fun-facts li:first-child { border-top: none; }
  .fun-facts strong { color: var(--meadow-dp); min-width: 7rem; flex-shrink: 0; }

  .char-filter {
    display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.5rem;
  }
  .char-filter button {
    padding: 0.5rem 1rem; border-radius: 999px;
    border: 2px solid var(--ink);
    background: var(--paper); color: var(--ink);
    font-weight: 700; font-size: 0.9rem;
  }
  .char-filter button:hover { background: var(--gold-soft); }
  .char-filter button.active { background: var(--ink); color: var(--paper); }

  /* ---------- MAP / WORLD ---------- */
  /* ---------- MAP SEASON BAR ---------- */
  .map-season-bar { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; }
  .map-season-btn {
    padding: 0.45rem 1.1rem; border-radius: 20px; font-weight: 700;
    font-size: 0.88rem; border: 2.5px solid var(--ink); cursor: pointer;
    transition: all 0.2s; background: var(--paper); color: var(--ink);
  }
  .map-season-btn.active { background: var(--ink); color: var(--paper); }
  .map-season-btn.summer { border-color: var(--gold); }
  .map-season-btn.summer.active { background: var(--gold); color: var(--ink); }
  .map-season-btn.autumn { border-color: var(--amber); }
  .map-season-btn.autumn.active { background: var(--amber); color: var(--paper); }
  .map-season-btn.winter { border-color: #5a8aaa; }
  .map-season-btn.winter.active { background: #5a8aaa; color: var(--paper); }
  .map-season-btn.spring { border-color: #5a9a3a; }
  .map-season-btn.spring.active { background: #5a9a3a; color: var(--paper); }


  /* ---------- TEACHER BOOK SELECTOR ---------- */
  .teacher-book-selector {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
    margin-bottom: 2rem;
  }
  @media (max-width: 700px) { .teacher-book-selector { grid-template-columns: repeat(2, 1fr); } }
  @media (max-width: 420px) { .teacher-book-selector { grid-template-columns: 1fr; } }
  .teacher-book-card {
    border: 3px solid var(--ink); border-radius: 16px; padding: 1.25rem;
    background: var(--paper); cursor: pointer; text-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: var(--shadow-soft);
  }
  .teacher-book-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
  .teacher-book-card.active { background: var(--ink); color: var(--paper); }
  .teacher-book-card.active .num-badge { background: var(--gold); color: var(--ink); }
  .tbc-season { font-size: 1.5rem; }
  .tbc-title { font-family: var(--display); font-weight: 800; font-size: 0.88rem; line-height: 1.3; }
  .tbc-lead { font-size: 0.78rem; opacity: 0.75; }
  .tbc-status { font-size: 0.75rem; font-weight: 700; border-radius: 20px; padding: 0.2rem 0.6rem; margin-top: 0.25rem; }
  .tbc-ready { background: #d4edda; color: #155724; }
  .tbc-soon  { background: #fff3cd; color: #856404; }
  .teacher-book-card.active .tbc-ready,
  .teacher-book-card.active .tbc-soon { background: rgba(255,255,255,0.2); color: var(--paper); }
  .teacher-book-panel { display: none; }
  .teacher-book-panel.active { display: block; }
  .teacher-coming-soon {
    text-align: center; padding: 3rem 2rem; max-width: 56ch; margin: 0 auto;
    background: var(--paper); border: 3px solid var(--ink); border-radius: 20px;
    box-shadow: var(--shadow-soft);
  }
  .teacher-coming-soon h3 { font-size: 1.3rem; margin-bottom: 0.75rem; }
  .teacher-coming-soon p { color: var(--ink-soft); }


  /* Subject selector bar */
  .teacher-subject-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 1.75rem;
  }
  .teacher-subject-btn {
    padding: 0.6rem 1.25rem; border-radius: 20px; font-weight: 700;
    font-size: 0.9rem; border: 2.5px solid var(--ink);
    background: var(--paper); color: var(--ink); cursor: pointer;
    transition: all 0.15s;
  }
  .teacher-subject-btn:hover { background: var(--cream-deep); }
  .teacher-subject-btn.active { background: var(--collar); color: var(--paper); border-color: var(--collar); }
  .teacher-subject-panel { display: none; }
  .teacher-subject-panel.active { display: block; }

  /* ---------- TEACHER RESOURCE TABS ---------- */
  .teacher-tab-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    margin-bottom: 2rem; justify-content: center;
  }
  .teacher-tab {
    padding: 0.55rem 1.1rem; border-radius: 20px; font-weight: 700;
    font-size: 0.88rem; border: 2.5px solid var(--ink);
    background: var(--paper); color: var(--ink); cursor: pointer;
    transition: all 0.15s;
  }
  .teacher-tab:hover { background: var(--cream-deep); }
  .teacher-tab.active { background: var(--ink); color: var(--paper); }
  .teacher-panel { display: none; }
  .teacher-panel.active { display: block; }

  /* Chapter grid (Tab 1) */
  .chapter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
  }
  .chapter-card {
    background: var(--paper); border: 3px solid var(--ink);
    border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  .chapter-card-num {
    background: var(--gold); color: var(--ink);
    font-family: var(--display); font-weight: 900; font-size: 0.82rem;
    padding: 0.2rem 0.6rem; border-radius: 20px; border: 2px solid var(--ink);
    display: inline-block; margin-bottom: 0.25rem;
  }
  .chapter-card-title {
    font-family: var(--display); font-weight: 800; font-size: 1.05rem;
    margin: 0;
  }
  .chapter-card-fable {
    font-size: 0.8rem; color: var(--ink-soft); font-style: italic;
  }
  .chapter-card-drama {
    font-family: var(--hand); font-size: 0.95rem; color: var(--collar);
  }
  .chapter-card-pshe {
    font-size: 0.8rem; background: var(--cream-deep);
    border-radius: 6px; padding: 0.25rem 0.5rem; display: inline-block;
  }
  .chapter-card-q {
    font-size: 0.88rem; color: var(--ink-soft); border-top: 2px dashed var(--cream-deep);
    padding-top: 0.5rem; margin-top: 0.25rem; line-height: 1.4;
  }

  /* PSHE plan cards (Tab 3) */
  .pshe-plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
  }
  .pshe-plan-card {
    background: var(--paper); border: 3px solid var(--collar);
    border-radius: 16px; padding: 1.25rem; box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column; gap: 0.4rem;
  }
  .pshe-plan-card h3 { font-size: 1rem; margin: 0; }
  .pshe-plan-strand {
    font-size: 0.78rem; color: var(--collar); font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
  }
  .pshe-plan-activity {
    font-family: var(--hand); font-size: 0.95rem; color: var(--ink-soft);
  }

  /* ---------- NUMBERED MAP ---------- */
  .map-num-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    justify-content: center; margin-bottom: 1rem;
  }
  .map-num-btn {
    display: flex; align-items: center; gap: 0.4rem;
    background: var(--paper); border: 2.5px solid var(--ink);
    border-radius: 20px; padding: 0.4rem 0.9rem;
    font-family: var(--display); font-weight: 700; font-size: 0.88rem;
    cursor: pointer; transition: background 0.15s, color 0.15s, transform 0.15s;
    box-shadow: var(--shadow-soft);
  }
  .map-num-btn:hover { transform: translateY(-2px); }
  .map-num-btn.active { background: var(--ink); color: var(--paper); }
  .map-num-btn .num {
    background: var(--ladybird); color: #fff;
    border-radius: 50%; width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem; font-weight: 900; flex-shrink: 0;
  }
  .map-num-btn.active .num { background: var(--gold); color: var(--ink); }
  /* Location panel */
  .map-loc-panel {
    display: none; margin-top: 1.25rem;
    background: var(--paper); border: 3px solid var(--ink);
    border-radius: 16px; padding: 1.25rem 1.5rem;
    box-shadow: var(--shadow-soft); animation: fadeUp 0.3s ease;
  }
  .map-loc-panel.open { display: block; }
  .map-loc-panel .loc-name { font-family: var(--display); font-size: 1.3rem; font-weight: 800; }
  .map-loc-panel .loc-character { font-family: var(--hand); font-size: 1.05rem; color: var(--collar); margin: 0.2rem 0 0.6rem; }
  .map-loc-panel .loc-quote { font-style: italic; color: var(--ink-soft); border-left: 3px solid var(--gold); padding-left: 0.75rem; line-height: 1.6; }
  /* Map toast */
  .map-toast {
    position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%);
    background: var(--ink); color: var(--paper);
    padding: 0.75rem 1.5rem; border-radius: 30px;
    font-weight: 700; font-size: 1rem; z-index: 999;
    opacity: 0; transition: opacity 0.4s;
    pointer-events: none; white-space: nowrap;
  }
  .map-toast.show { opacity: 1; }

  /* ---------- PAINT / COLOUR ONLINE ---------- */
  /* Colouring page carousel */
  .cpick-wrap {
    position: relative; margin-bottom: 1.25rem; padding: 0 2.5rem;
  }
  .cpick-viewport {
    overflow: hidden; width: 100%;
  }
  .cpick-track {
    display: flex; gap: 1rem; transition: transform 0.35s ease;
    padding: 0.5rem 0 0.75rem;
  }
  .cpick-arrow {
    position: absolute; top: 50%; transform: translateY(-60%);
    background: var(--paper); border: 2.5px solid var(--ink);
    border-radius: 50%; width: 38px; height: 38px;
    font-size: 1.4rem; font-weight: 900; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    z-index: 2; transition: background 0.15s;
  }
  .cpick-arrow:hover { background: var(--gold); }
  .cpick-arrow:disabled { opacity: 0.3; cursor: default; }
  .cpick-prev { left: 0; }
  .cpick-next { right: 0; }

  .colour-pick {
    border: 3px solid var(--ink); border-radius: 14px; overflow: hidden;
    cursor: pointer; transition: transform 0.15s, box-shadow 0.15s;
    background: var(--paper); text-align: center;
    flex: 0 0 calc((100% - 2rem) / 3);
  }
  @media (max-width: 600px) {
    .colour-pick { flex: 0 0 calc((100% - 1rem) / 2); }
  }
  .colour-pick:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0,0,0,0.18); }
  .colour-pick.active { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--collar); transform: translateY(-3px); }
  .colour-pick img { width: 100%; height: 140px; object-fit: cover; display: block; }
  .colour-pick-label { font-family: var(--display); font-weight: 800; font-size: 0.88rem; padding: 0.4rem 0.5rem 0.2rem; }
  .colour-pick-print { display: block; font-size: 0.78rem; color: var(--collar); padding: 0.2rem 0.5rem 0.6rem; text-decoration: none; }
  .colour-pick-print:hover { text-decoration: underline; }

  .paint-swatch {
    width: 38px; height: 38px; border-radius: 50%;
    border: 3px solid var(--ink); cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    flex-shrink: 0;
  }
  .paint-swatch:hover { transform: scale(1.15); }
  .paint-swatch.active { box-shadow: 0 0 0 3px var(--paper), 0 0 0 6px var(--ink); transform: scale(1.2); }
  .paint-sel {
    padding: 0.4rem 1rem; border-radius: 20px; font-weight: 700; font-size: 0.88rem;
    border: 2.5px solid var(--ink); background: var(--paper); cursor: pointer;
    transition: background 0.15s, color 0.15s;
  }
  .paint-sel.active { background: var(--ink); color: var(--paper); }

  /* ---------- KIDS ZONE ---------- */
  .zone-banner {
    border-radius: 20px;
    padding: 2.5rem 2rem;
    border: 3px solid var(--ink);
    box-shadow: var(--shadow-soft);
    margin-bottom: 2rem;
    position: relative; overflow: hidden;
  }
  .zone-banner.kids {
    background: linear-gradient(135deg, var(--gold-soft) 0%, var(--gold) 100%);
  }
  .zone-banner.grown {
    background: var(--paper);
  }
  .activity-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem;
  }
  .activity {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: var(--shadow-soft);
    transition: all 0.2s;
  }
  .activity:hover {
    transform: translate(-2px,-2px);
    box-shadow: 0 10px 0 rgba(42,31,20,0.15);
  }
  .activity-icon {
    font-size: 2.6rem; display: block; margin-bottom: 0.5rem;
  }

  /* ---------- GROWN-UPS ---------- */
  .resource-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
  }
  .resource-card {
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 16px;
    padding: 1.75rem;
    box-shadow: var(--shadow-soft);
    display: flex; flex-direction: column;
  }
  .resource-card .tag {
    align-self: flex-start;
    font-size: 0.78rem; font-weight: 700;
    background: var(--meadow); color: var(--paper);
    padding: 0.2rem 0.7rem; border-radius: 999px;
    margin-bottom: 0.75rem; letter-spacing: 0.05em;
    text-transform: uppercase;
  }
  .resource-card .tag.parents  { background: var(--butterfly); }
  .resource-card .tag.teachers { background: var(--meadow); }
  .resource-card .tag.libs     { background: var(--collar); }
  .resource-card .tag.media    { background: var(--ink); }
  .resource-card ul { list-style: none; margin: 0.75rem 0 1rem; }
  .resource-card li {
    padding: 0.4rem 0; padding-left: 1.5rem; position: relative;
    font-size: 0.95rem;
  }
  .resource-card li::before {
    content: '✓'; position: absolute; left: 0; color: var(--meadow-dp);
    font-weight: 700;
  }

  .standards-table {
    width: 100%; border-collapse: separate; border-spacing: 0;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: 16px;
    overflow: hidden;
    margin-top: 1.5rem;
  }
  .standards-table th, .standards-table td {
    padding: 0.85rem 1rem; text-align: left;
    border-bottom: 1.5px solid var(--cream-deep);
    font-size: 0.93rem;
  }
  .standards-table th {
    background: var(--ink); color: var(--paper);
    font-family: var(--display); font-weight: 700;
  }
  .standards-table tr:last-child td { border-bottom: none; }

  /* ---------- ABOUT ---------- */
  /* ---------- LANDING PAGE ---------- */
  .landing-grid {
    display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem;
    align-items: center;
  }
  .landing-grid .author-photo {
    max-height: 420px;
  }
  .landing-right {
    display: flex; flex-direction: column;
    justify-content: space-between;
  }
  .landing-doors {
    display: flex; flex-direction: column; gap: 0.75rem;
  }
  .landing-door {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem 1.25rem; border-radius: 16px;
    text-align: left; cursor: pointer; flex: 1;
    transition: transform 0.18s, box-shadow 0.18s;
  }
  .landing-door:hover { transform: translate(-2px,-2px); box-shadow: 4px 4px 0 var(--ink); }
  .landing-door .door-icon { font-size: 1.8rem; flex-shrink: 0; }
  .landing-door .door-arrow { margin-left: auto; font-size: 1.4rem; flex-shrink: 0; }

  @media (max-width: 720px) {
    .landing-grid { grid-template-columns: 1fr; }
  }

  .about-grid {
    display: grid; grid-template-columns: 1fr 2fr; gap: 2.5rem;
    align-items: start;
  }
  @media (max-width: 720px) { .about-grid { grid-template-columns: 1fr; } }
  .author-photo {
    aspect-ratio: 1; border-radius: 24px;
    background: linear-gradient(135deg, var(--collar-soft) 0%, var(--collar) 100%);
    border: 3px solid var(--ink);
    display: grid; place-items: center;
    box-shadow: var(--shadow-card);
    overflow: hidden;
  }
  .about-text p { margin-bottom: 1rem; font-size: 1.02rem; }

  /* ---------- FOOTER ---------- */
  /* Sized to match .topbar-inner's height (0.85rem padding around a
     two-line brand block, ~70px total), so the footer bookends the
     page the same weight the header opens it with. */
  footer {
    background: var(--ink); color: var(--cream);
    margin-top: 2rem;
    padding: 0.95rem 1.5rem;
    border-top: 3px solid var(--collar);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 0.6rem 1.5rem;
  }
  footer p { margin: 0; }
  .foot-grid {
    max-width: 1240px; margin: 0 auto;
    display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
  }
  @media (max-width: 720px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
  footer h4 { color: var(--gold); font-family: var(--display); margin-bottom: 0.75rem; }
  footer ul { list-style: none; }
  footer li { padding: 0.25rem 0; }
  footer a { color: var(--cream); text-decoration: none; font-size: 0.93rem; }
  footer a:hover { color: var(--gold); }
  .foot-social { display: flex; gap: 0.9rem; }
  .foot-social a { color: var(--cream); display: inline-flex; transition: color 0.15s; }
  .foot-social a:hover { color: var(--gold); }
  .foot-bottom {
    max-width: 1240px; margin: 2rem auto 0;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(251,243,224,0.2);
    font-size: 0.83rem; opacity: 0.8;
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  }

  /* The Blue Butterfly that drifts gently across the page */
  .drifter {
    position: fixed;
    width: 30px; height: 30px;
    z-index: 60; pointer-events: none;
    opacity: 0.82;
    animation: float 28s ease-in-out infinite;
  }
  @keyframes float {
    0%   { left:  5vw; top: 70%; transform: rotate(-4deg)  scale(1); }
    12%  { left: 22vw; top: 30%; transform: rotate( 3deg)  scale(1.05); }
    25%  { left: 45vw; top: 55%; transform: rotate(-6deg)  scale(1); }
    37%  { left: 65vw; top: 20%; transform: rotate( 5deg)  scale(1.05); }
    50%  { left: 80vw; top: 60%; transform: rotate(-3deg)  scale(1); }
    62%  { left: 60vw; top: 80%; transform: rotate( 6deg)  scale(1.05); }
    75%  { left: 35vw; top: 40%; transform: rotate(-5deg)  scale(1); }
    88%  { left: 15vw; top: 65%; transform: rotate( 4deg)  scale(1.05); }
    100% { left:  5vw; top: 70%; transform: rotate(-4deg)  scale(1); }
  }

  /* ================================================================
     HAMBURGER MENU
  ================================================================ */
  .menu-toggle {
    display: none;
    flex-direction: column; justify-content: center; align-items: center;
    gap: 5px;
    width: 44px; height: 44px;
    border-radius: 10px;
    border: 2px solid var(--ink) !important;
    background: var(--paper) !important;
    margin-left: auto;
    flex-shrink: 0;
    z-index: 200;
    position: relative;
  }
  .menu-toggle-bar {
    display: block; width: 22px; height: 2.5px;
    background: var(--ink); border-radius: 2px;
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(2) {
    opacity: 0;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle-bar:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }
  /* Full-screen mobile nav overlay — replaces slide drawer */
  .nav-overlay {
    display: none;
    position: fixed; inset: 0; z-index: 140;
    background: rgba(26,20,16,0.45);
  }
  .nav-overlay.open { display: block; }

  /* Mobile full-screen nav */
  .mobile-nav-screen {
    display: none;
    position: fixed; inset: 0; z-index: 200;
    background: var(--paper);
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .mobile-nav-screen.open { display: flex; }
  .mobile-nav-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 3px solid var(--ink);
    background: var(--paper);
    position: sticky; top: 0; z-index: 1;
  }
  .mobile-nav-title {
    font-family: var(--display); font-weight: 900; font-size: 1.15rem;
    color: var(--ink); text-decoration: none;
  }
  .mobile-nav-close {
    width: 44px; height: 44px; border-radius: 10px;
    border: 2px solid var(--ink) !important;
    background: var(--paper) !important;
    font-size: 1.4rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; flex-shrink: 0;
  }
  .mobile-nav-list {
    list-style: none; margin: 0; padding: 1rem;
    display: flex; flex-direction: column; gap: 0.5rem;
  }
  .mobile-nav-list > li > a,
  .mobile-nav-link {
    display: block; width: 100%;
    padding: 1rem 1.25rem;
    font-family: var(--body); font-weight: 700; font-size: 1.1rem;
    text-align: left; border-radius: 12px;
    border: 2px solid transparent;
    background: var(--cream); color: var(--ink);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-height: 56px;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  }
  button.mobile-nav-link { appearance: none; -webkit-appearance: none; }
  .mobile-nav-list > li > a:active, .mobile-nav-list > li > a:focus,
  .mobile-nav-link:active, .mobile-nav-link:focus {
    background: var(--gold-soft); border-color: var(--ink);
    outline: none;
  }
  .mobile-nav-list > li > a.active {
    background: var(--ink); color: var(--paper);
  }

  /* Accordion groups (Books, Kids' Zone, For Grown-ups, and the nested
     Parents/Teachers groups inside it): label + caret share a row via
     flex-wrap, the sublist itself is forced onto its own line with
     flex-basis:100% and stays display:none until the caret next to it
     is expanded, matching the desktop nav-caret[aria-expanded] pattern
     but as an in-place accordion instead of a hover flyout. */
  .mobile-nav-group {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem;
  }
  .mobile-nav-group > .mobile-nav-link { flex: 1 1 auto; min-width: 0; width: auto; }
  .mobile-nav-caret {
    flex: 0 0 auto; width: 48px; height: 48px; border-radius: 10px;
    border: 2px solid transparent; background: var(--cream); color: var(--ink);
    font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: transform 0.15s, background 0.15s;
    -webkit-tap-highlight-color: rgba(0,0,0,0.08);
  }
  .mobile-nav-caret:active, .mobile-nav-caret:focus {
    background: var(--gold-soft); border-color: var(--ink); outline: none;
  }
  .mobile-nav-caret[aria-expanded="true"] { transform: rotate(180deg); }
  .mobile-nav-sublist {
    flex-basis: 100%; list-style: none; margin: 0; padding: 0;
    display: none;
  }
  .mobile-nav-caret[aria-expanded="true"] ~ .mobile-nav-sublist { display: block; }

  .mobile-nav-sublist > li > a,
  .mobile-nav-sublist > li > .mobile-nav-link {
    padding: 0.7rem 1.25rem 0.7rem 2.5rem;
    font-size: 0.95rem; font-weight: 600; min-height: 44px;
    background: transparent;
    color: var(--ink); text-decoration: none;
  }
  .mobile-nav-sublist > li > a:visited { color: var(--ink); }
  .mobile-nav-sublist > li > a:hover,
  .mobile-nav-sublist > li > a:active,
  .mobile-nav-sublist > li > a:focus {
    background: var(--gold-soft); border-color: var(--ink);
  }
  /* Nested group labels (Parents / Teachers · Book 1 inside For
     Grown-ups) read as small caps section headings, same look the old
     static (non-interactive) headings used, just clickable now. */
  .mobile-nav-sublist > li.mobile-nav-group > .mobile-nav-link {
    font-family: var(--display); font-weight: 900; font-size: 0.72rem;
    text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft);
    min-height: 40px; padding: 0.6rem 1.25rem 0.6rem 2.5rem;
  }
  .mobile-nav-sublist > li.mobile-nav-group {
    border-top: 1.5px dashed var(--cream-deep); margin-top: 0.3rem; padding-top: 0.2rem;
  }
  .mobile-nav-sublist .mobile-nav-sublist > li > a {
    padding-left: 3.5rem;
  }
  .mobile-nav-sublist .mobile-nav-group > .mobile-nav-caret {
    width: 40px; height: 40px;
  }

  /* ================================================================
     RESPONSIVE — TABLET  ≤ 900px
  ================================================================ */
  @media (max-width: 900px) {
    .topbar-inner { gap: 1rem; padding: 0.75rem 1.25rem; }
    .brand { font-size: 1.1rem; }
    .brand-mark { width: 38px; height: 38px; }
    .brand-mark img { width: 38px; height: 38px; }
    main { padding: 2rem 1.25rem 3.5rem; }
    /* .home-hero-wrap/.books-hero cancel main's padding-top with a fixed
       -2.5rem margin (see the comment near the base `main` rule), that
       has to be kept in sync every time main's padding-top changes at a
       breakpoint, otherwise the hero overshoots flush and tucks under
       the sticky header, cropping its own top edge. */
    .home-hero-wrap { margin-top: -2rem; }
    .books-hero { margin-top: -2rem; }


    /* Footer: 2-col at tablet too */
    .foot-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }

    /* Standards table — allow horizontal scroll */
    .standards-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .standards-table { min-width: 560px; }

    /* Map popup — stay inside viewport on tablet */
    .map-pin .pop { min-width: 180px; font-size: 0.78rem; }
    /* Map: collapse side panel below map on tablet */
    #map-layout-grid { grid-template-columns: 1fr !important; }
  }

  /* ================================================================
     RESPONSIVE — MOBILE NAV  ≤ 768px
  ================================================================ */
  @media (max-width: 768px) {
    .menu-toggle { display: flex; }
    .main-nav { display: none; } /* hidden — replaced by .mobile-nav-screen */
  }

  /* ================================================================
     RESPONSIVE — MOBILE  ≤ 640px
  ================================================================ */
  @media (max-width: 640px) {
    body { font-size: 16px; }
    main { padding: 1.5rem 1rem 3rem; }
    .home-hero-wrap { margin-top: -1.5rem; }
    .books-hero { margin-top: -1.5rem; }

    h3 { font-size: 1.15rem; }

    /* Hero: tighten padding */
    .hero { padding: 2rem 1.25rem 1.75rem; }
    .hero-grid { gap: 1.5rem; }

    /* Doors: vertical stack (already 1fr via 720px query, add padding reduction) */
    .door { padding: 1.5rem 1.25rem 1.25rem; }
    .door-arrow { width: 40px; height: 40px; font-size: 1.2rem; }

    /* Book cards: allow full-width at small screens */
    .book-grid { grid-template-columns: 1fr; }

    /* Ladybird 6-col grid → 3 cols on mobile */
    .ladybird-grid { grid-template-columns: repeat(3, 1fr); gap: 0.4rem; }

    /* Activity grid: single col */
    .activity-grid { grid-template-columns: 1fr; }

    /* Resource grid: single col */
    .resource-grid { grid-template-columns: 1fr; }

    /* Footer: single col */
    .foot-grid { grid-template-columns: 1fr; }

    /* Shelf row: allow horizontal scroll on mobile */
    .shelf { padding: 1.25rem 1rem 0.4rem; }

    /* Map: reduce min-height */
    .map-container { min-height: 320px; }
    .map-pin .pop {
      left: auto; right: auto;
      top: 110%; transform: none;
      width: 180px;
    }
    .map-pin.right .pop { left: auto; right: auto; }

    /* Section spacing */
    .section { margin-top: 2.5rem; }

    /* Collect call */
    .collect-call { padding: 1.75rem 1.25rem; }
  }

  /* ================================================================
     RESPONSIVE — SMALL PHONE  ≤ 400px
  ================================================================ */
  @media (max-width: 400px) {
    .brand-sub { display: none; }

    /* Ladybird grid: 2 cols at tiny screens */
    .ladybird-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ================================================================
     SCROLLABLE TAB BARS (teacher pack, word lists, tier 2)
  ================================================================ */
  .tab-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    margin-bottom: -4px;
  }
  .tab-scroll-wrap > * {
    min-width: max-content;
  }

  /* Ensure standards table always has a scroll wrapper available */
  .standards-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 16px;
    margin-top: 1.5rem;
  }
  .standards-table-wrap .standards-table { margin-top: 0; }
  .wl-tab { font-size:0.85rem; padding:0.35rem 0.9rem; }
  .wl-tab-active { background:var(--ink) !important; color:var(--paper) !important; }
  .t2-tab { font-size:0.8rem; padding:0.3rem 0.7rem; }
  .t2-tab-active { background:var(--meadow) !important; color:#fff !important; }
  .wl-word { border-radius:6px; padding:0.35rem 0.6rem; font-size:0.85rem; font-family:var(--display); font-weight:700; }
  .wl-in { background:#2F5A2A; color:#fff; }
  .wl-out { background:var(--cream-deep); color:var(--ink); border:1.5px solid #C9B79C; }
  #ws-print-area { position:fixed; left:-9999px; top:0; width:210mm; }
  body.ws-printing > *:not(#ws-print-area) { display:none !important; }
  body.ws-printing #ws-print-area { position:static !important; }
  @media print {
    body.ws-printing > *:not(#ws-print-area) { display:none !important; }
    body.ws-printing #ws-print-area { position:static !important; display:block !important; }
    .ws-page { page-break-after: always; padding:15mm 15mm 10mm; font-family: Georgia, serif; color:#1A1410; }
    .ws-title { font-size:18pt; font-weight:900; margin-bottom:4pt; }
    .ws-sub { font-size:10pt; color:#5A4A38; margin-bottom:16pt; }
    .ws-label { font-size:9pt; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:4pt; color:#5A4A38; }
    .ws-box { border:1.5pt solid #1A1410; border-radius:4pt; min-height:44pt; margin-bottom:12pt; padding:6pt; }
    .ws-lines { margin-bottom:12pt; }
    .ws-line { border-bottom:1pt solid #C9B79C; height:22pt; margin-bottom:0; }
    .ws-opinion-bar { display:flex; justify-content:space-between; align-items:center; border:1.5pt solid #1A1410; border-radius:4pt; padding:6pt 10pt; margin:10pt 0 16pt; }
    .ws-circle { width:14pt; height:14pt; border:1.5pt solid #1A1410; border-radius:50%; }
    .ws-grid { display:grid; grid-template-columns:1fr 1fr; gap:10pt; }
    .ws-fable-box { background:#F2E6C8; border:1.5pt solid #1A1410; border-radius:4pt; padding:8pt; margin-bottom:12pt; font-size:9pt; line-height:1.5; }
    .ws-branding { font-size:8pt; color:#8B7B62; text-align:right; margin-top:8pt; }

    /* Librarian collection sheet */
    .lib-page { padding:14mm 16mm 12mm; font-family:Georgia,serif; color:#1A1410; }
    .lib-header { display:flex; justify-content:space-between; align-items:flex-start; border-bottom:2pt solid #1A1410; padding-bottom:8pt; margin-bottom:12pt; }
    .lib-series { font-size:7pt; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#5A4A38; margin-bottom:2pt; }
    .lib-title { font-size:16pt; font-weight:900; line-height:1.15; }
    .lib-sub { font-size:9pt; color:#5A4A38; margin-top:3pt; }
    .lib-cols { display:grid; grid-template-columns:1fr 1fr; gap:14pt; margin-bottom:12pt; }
    .lib-section { margin-bottom:10pt; }
    .lib-label { font-size:7pt; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:#5A4A38; margin-bottom:3pt; border-bottom:0.5pt solid #C9B79C; padding-bottom:1.5pt; }
    .lib-body { font-size:8.5pt; line-height:1.55; color:#1A1410; }
    .lib-body li { margin-bottom:1.5pt; padding-left:8pt; }
    .lib-talker { border:2pt solid #1A1410; border-radius:4pt; padding:8pt 10pt; margin-top:12pt; display:flex; gap:12pt; align-items:center; }
    .lib-talker-badge { background:#2F5A2A; color:#fff; padding:6pt 10pt; border-radius:3pt; font-size:7pt; font-weight:700; text-align:center; flex-shrink:0; width:52pt; }
    .lib-talker-text { font-size:8pt; line-height:1.5; }
    .lib-footer { font-size:7pt; color:#8B7B62; text-align:right; margin-top:10pt; border-top:0.5pt solid #C9B79C; padding-top:4pt; }

    /* Word list print */
    .wl-print-page { padding:12mm 15mm 10mm; font-family:Georgia,serif; color:#1A1410; }
    .wl-print-section { margin-bottom:14pt; }
    .wl-print-stage { font-size:7pt; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:#5A4A38; margin-bottom:3pt; }
    .wl-print-group { font-size:10pt; font-weight:900; margin-bottom:6pt; }
    .wl-print-words { display:flex; flex-wrap:wrap; gap:4pt 6pt; margin-bottom:10pt; }
    .wl-print-word { font-size:8.5pt; padding:2pt 5pt; border-radius:3pt; }
    .wl-print-in { background:#2F5A2A; color:#fff; font-weight:700; }
    .wl-print-out { border:1pt solid #C9B79C; color:#3a2b20; }
    .wl-print-legend { display:flex; gap:14pt; font-size:7.5pt; color:#5A4A38; margin-bottom:10pt; }
    .wl-print-legend span { display:flex; align-items:center; gap:4pt; }
    .wl-print-swatch { width:9pt; height:9pt; border-radius:2pt; display:inline-block; }

    /* HOTS cube net */
    .hots-net-page { padding:12mm 14mm 10mm; font-family:Georgia,serif; color:#1A1410; }
    .hots-net-title { font-size:14pt; font-weight:900; margin-bottom:2pt; }
    .hots-net-sub { font-size:8.5pt; color:#5A4A38; margin-bottom:8pt; }
    .hots-net { display:grid; grid-template-columns:repeat(4,46mm); grid-template-rows:repeat(3,46mm); gap:0; }
    .hots-face {
      width:46mm; height:46mm; box-sizing:border-box;
      border:1.2pt dashed #888; padding:5pt 6pt; overflow:hidden;
    }
    .hots-face.filled { border:1.5pt solid #1A1410; }
    .hots-face-head { font-size:7.5pt; font-weight:900; text-transform:uppercase; letter-spacing:0.03em; margin-bottom:3pt; }
    .hots-face ul { margin:0; padding-left:9pt; font-size:6.2pt; line-height:1.45; }
    .hots-face ul li { margin-bottom:1.5pt; }
    .hots-net-note { font-size:7.5pt; color:#5A4A38; margin-top:7pt; line-height:1.5; }
    .hots-net-note strong { color:#1A1410; }
  }