@font-face{font-family:"Inter";font-style:normal;font-weight:400 600;
    font-display:swap;src:url("/assets/fonts/inter-var-latin.woff2") format("woff2");}
  @font-face{font-family:"Amiri";font-style:normal;font-weight:400;
    font-display:swap;src:url("/assets/fonts/amiri-regular-400-latin.woff2") format("woff2");}
  @font-face{font-family:"Amiri";font-style:normal;font-weight:700;
    font-display:swap;src:url("/assets/fonts/amiri-bold-700-latin.woff2") format("woff2");}
  @font-face{font-family:"Amiri";font-style:italic;font-weight:400;
    font-display:swap;src:url("/assets/fonts/amiri-italic-400-latin.woff2") format("woff2");}
  @font-face{font-family:"Amiri";font-style:italic;font-weight:700;
    font-display:swap;src:url("/assets/fonts/amiri-bolditalic-700-latin.woff2") format("woff2");}

  :root{
    /* ── Palette bank ──────────────────────────────────────────────
       25 semantic slots extracted from brand reference imagery, plus
       a light/dark shadow pair. Not every slot is consumed by every
       section on day one — extras are a reserve bank for future pages
       on the same site (retreat page, about page, etc). --btn-primary-
       grad-a/-b (added 2026-09-04, WCAG AA fix -- see .btn-primary's
       own comment below) are the 24th/25th: a per-theme override was
       required (dark mode needed darker stops than --speckle/--throat's
       own dark values to hold 4.5:1 contrast against white button text),
       which only the palette-bank pattern (not the flat one-off pattern
       used by --pure-white/--gradient-twilight-mid) provides. See
       TEMPLATE.md § Palette Bank Convention. */
    --throat:#B0154A; --speckle:#D42A6E; --blush:#E98DA8; --petal:#FBF5F1;
    --pollen:#9A5322; --shoot:#A9C56B; --leaf:#3C5E33;
    --rosewash:#F2B2A3; --coral:#E68E79; --butter:#F1E29A; --cream:#F8F2DC;
    --nightfall:#131E3C; --nightdeep:#0B1329; --starlight:#F4F7FF; --rosehair:#BE6580;
    --paper:#FCF8F4; --card:#FFFFFF; --ink:#1B1512; --soft:#5A514C; --faint:#6E655F;
    --line:rgba(27,21,18,.12);
    --gold:#a07843; --teal:#72b2ae;
    --btn-primary-grad-a:#D42A6E; --btn-primary-grad-b:#B0154A;
    --shadow:0 1px 2px rgba(60,20,35,.05),0 22px 48px -30px rgba(60,20,35,.38);
    --focus-ring:#D42A6E;
  }
  :root{
    /* -- Design tokens ------------------------------------------
       Spacing, type scale, radii, tracking, containers, element
       sizing, borders, focus-ring widths, one-off shadow-length
       pieces and durations -- every value below is an EXACT copy
       of what used to be a hard-coded literal in this stylesheet
       (not a redesigned/snapped scale), sourced from tokens.json.
       NOTE: breakpoints are deliberately NOT custom properties here
       -- CSS cannot reference a custom property inside an @media
       condition, so those are build-time template substitutions
       instead (see the @media rules below), sourced from the same
       tokens.json `breakpoint` block. See TEMPLATE.md section on
       Design Tokens for the full reference. */
    --text-16p5px:16.5px; --text-16px:16px; --text-1p05rem:1.05rem; --text-1p25rem:1.25rem;
    --text-1p2rem:1.2rem; --text-1p35rem:1.35rem; --text-1p3rem:1.3rem; --text-1p5rem:1.5rem;
    --text-1p6rem:1.6rem; --text-3em:3em; --text-3p4em:3.4em; --text-p62em:.62em;
    --text-p66rem:.66rem; --text-p68rem:.68rem; --text-p76rem:.76rem; --text-p78rem:.78rem;
    --text-p7rem:.7rem; --text-p82rem:.82rem; --text-p85rem:.85rem; --text-p86rem:.86rem;
    --text-p88rem:.88rem; --text-p8rem:.8rem; --text-p92rem:.92rem; --text-p93rem:.93rem;
    --text-p95rem:.95rem; --text-p9rem:.9rem; --space-1p1rem:1.1rem; --space-1p25rem:1.25rem;
    --space-1p2rem:1.2rem; --space-1p3rem:1.3rem; --space-1p4rem:1.4rem; --space-1p5rem:1.5rem;
    --space-1p6rem:1.6rem; --space-1p8rem:1.8rem; --space-1rem:1rem; --space-2p25rem:2.25rem;
    --space-2p2rem:2.2rem; --space-2p4rem:2.4rem; --space-2p6rem:2.6rem; --space-2p75rem:2.75rem;
    --space-2rem:2rem; --space-3p4rem:3.4rem; --space-3rem:3rem; --space-4p5rem:4.5rem;
    --space-4p75rem:4.75rem; --space-4rem:4rem; --space-5p5rem:5.5rem; --space-6p5rem:6.5rem;
    --space-7rem:7rem; --space-8p5rem:8.5rem; --space-neg1px:-1px; --space-neg3p2rem:-3.2rem;
    --space-neg9999px:-9999px; --space-p05em:.05em; --space-p06em:.06em; --space-p12em:.12em;
    --space-p12rem:.12rem; --space-p15em:.15em; --space-p1em:.1em; --space-p1rem:.1rem;
    --space-p2rem:.2rem; --space-p35rem:.35rem; --space-p3rem:.3rem; --space-p4rem:.4rem;
    --space-p55rem:.55rem; --space-p5rem:.5rem; --space-p62rem:.62rem; --space-p6rem:.6rem;
    --space-p75rem:.75rem; --space-p78rem:.78rem; --space-p7rem:.7rem; --space-p8rem:.8rem;
    --space-p95rem:.95rem; --space-p9rem:.9rem; --radius-10px:10px; --radius-12px:12px;
    --radius-14px:14px; --radius-18px:18px; --radius-20px:20px; --radius-4px:4px;
    --radius-8px:8px; --radius-999px:999px; --radius-9px:9px; --tracking-p005em:.005em;
    --tracking-p06em:.06em; --tracking-p08em:.08em; --tracking-p12em:.12em; --tracking-p22em:.22em;
    --tracking-p25em:.25em; --tracking-p2em:.2em; --container-26rem:26rem; --container-34rem:34rem;
    --container-36rem:36rem; --container-38rem:38rem; --container-44rem:44rem; --container-46rem:46rem;
    --container-64rem:64rem; --size-12rem:12rem; --size-14p5rem:14.5rem; --size-14rem:14rem;
    --size-152px:152px; --size-15p5rem:15.5rem; --size-16rem:16rem; --size-1p1rem:1.1rem;
    --size-1px:1px; --size-2px:2px; --size-352px:352px; --size-36px:36px;
    --size-56px:56px; --size-5px:5px; --size-6p5rem:6.5rem; --size-neg2px:-2px;
    --border-1px:1px; --border-2px:2px; --focus-2px:2px; --focus-3px:3px;
    --shadow-offset-12px:12px; --shadow-offset-1px:1px; --shadow-offset-22px:22px; --shadow-offset-2px:2px;
    --shadow-offset-30px:30px; --shadow-offset-48px:48px; --shadow-offset-60px:60px; --shadow-offset-neg12px:-12px;
    --shadow-offset-neg30px:-30px; --duration-p18s:.18s; --duration-p22s:.22s; --duration-p25s:.25s;
    --duration-p3s:.3s; --text-display-xl:clamp(2.5rem,10vw,5.6rem); --text-display-lg:clamp(2rem,7vw,3.6rem); --text-lede:clamp(1.05rem,2.4vw,1.3rem);
    --text-display-md:clamp(1.5rem,4.5vw,2.6rem); --text-display-countdown:clamp(1.6rem,4vw,2.4rem); --space-fluid-nav-x:clamp(1rem,4vw,2.5rem); --space-fluid-card-x:clamp(1.4rem,4vw,3rem); --pure-white:#fff;
    --gradient-hero-simple-mid:#1D2B55; --gradient-twilight-mid:#22315E; --ink-on-butter:#5a4a12; --duration-twinkle:4.5s;
    --duration-drift:11s; --gradient-firefly-core:#FFF7C9;
    --bp-mobile-max:767px; --bp-tablet-min:768px;
    --bp-tablet-max:1023px; --bp-desktop-min:1024px;
    --nav-toggle-min-size:44px; --nav-icon-bar-w:20px; --nav-icon-bar-h:2px;
  }

  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --paper:#12100F; --card:#1C1917; --ink:#F6EFEA; --soft:#BCB0A9; --faint:#8E837C;
      --line:rgba(246,239,234,.14);
      --throat:#E4497C; --speckle:#F0699B; --blush:#F0A6BC;
      --pollen:#E08B4A; --shoot:#BCD683; --leaf:#6E9C5E;
      --rosewash:#F5C0B3; --coral:#EDA28F; --butter:#F3E7AC;
      --gold:#c79a63; --teal:#7fbcb6;
      --btn-primary-grad-a:#BA5178; --btn-primary-grad-b:#CC416F;
      --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 48px -30px rgba(0,0,0,.85);
      --focus-ring:#F0699B;
    }
  }
  :root[data-theme="dark"]{
    --paper:#12100F; --card:#1C1917; --ink:#F6EFEA; --soft:#BCB0A9; --faint:#8E837C;
    --line:rgba(246,239,234,.14);
    --throat:#E4497C; --speckle:#F0699B; --blush:#F0A6BC;
    --pollen:#E08B4A; --shoot:#BCD683; --leaf:#6E9C5E;
    --rosewash:#F5C0B3; --coral:#EDA28F; --butter:#F3E7AC;
    --gold:#c79a63; --teal:#7fbcb6;
    --btn-primary-grad-a:#BA5178; --btn-primary-grad-b:#CC416F;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 22px 48px -30px rgba(0,0,0,.85);
    --focus-ring:#F0699B;
  }

  *{box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  body{margin:0;background:var(--paper);color:var(--ink);
    font-family:"Inter","Helvetica Neue",Arial,sans-serif;font-size:var(--text-16p5px);line-height:1.68;
    -webkit-font-smoothing:antialiased;overflow-x:hidden}
  h1,h2,h3,.serif{font-family:"Amiri",Georgia,serif;letter-spacing:var(--tracking-p005em);text-wrap:balance;overflow-wrap:break-word;word-break:normal}
  a{color:var(--throat)}
  img,svg{max-width:100%}
  :focus-visible{outline:var(--focus-3px) solid var(--focus-ring);outline-offset:var(--focus-2px);border-radius:var(--radius-4px)}
  .sr-only{position:absolute;width:var(--size-1px);height:var(--size-1px);padding:0;margin:var(--space-neg1px);overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* Skip link — first focusable element in the document */
  .skip-link{position:absolute;left:var(--space-1rem);top:var(--space-neg3p2rem);z-index:100;background:var(--card);
    color:var(--ink);padding:var(--space-p7rem) var(--space-1p2rem);border-radius:var(--radius-8px);text-decoration:none;
    font-weight:600;font-size:var(--text-p9rem);box-shadow:var(--shadow);transition:top var(--duration-p18s) ease}
  .skip-link:focus{top:var(--space-1rem)}

  .eyebrow{font-size:var(--text-p7rem);font-weight:600;letter-spacing:var(--tracking-p22em);text-transform:uppercase;margin:0 0 var(--space-p9rem)}

  /* ── Nav ─────────────────────────────────────── */
  nav{position:absolute;top:0;left:0;right:0;z-index:5;
    display:flex;align-items:center;justify-content:space-between;gap:var(--space-1rem);
    padding:var(--space-1p1rem) var(--space-fluid-nav-x);color:var(--starlight)}
  nav.nav-solid{position:relative;background:var(--nightdeep)}
  nav .mark{font-family:"Amiri",Georgia,serif;font-style:italic;font-size:var(--text-1p25rem);
    color:var(--starlight);text-decoration:none}
  nav ul{display:flex;gap:var(--space-1p4rem);list-style:none;margin:0;padding:0;flex-wrap:wrap;align-items:center}
  nav ul a{color:rgba(244,247,255,.9);text-decoration:none;font-size:var(--text-p85rem);font-weight:500}
  nav ul a:hover{color:var(--pure-white)}
  nav ul a[aria-current="page"]{color:var(--pure-white);text-decoration:underline;text-underline-offset:var(--tracking-p25em)}
  /* Optional nav CTA — rendered only when the config defines a nav-cta
     object ({label, href}); compact pill reusing the primary button style. */
  nav .nav-cta a.btn{padding:var(--space-p4rem) var(--space-1p1rem);font-size:var(--text-p82rem)}
  nav ul li.nav-cta{display:inline-flex;align-items:center}

  /* Hamburger toggle — hidden until the shared script's early `.js` swap
     confirms the interaction is actually wired up (progressive
     enhancement / no-JS fallback: with no toggle ever shown, #primary-menu
     just stays visible at every width per the rules below — always
     navigable, never a dead end for a visitor with JS disabled/blocked).
     Sized to Gate 17 / WCAG 2.5.8's 44x44 minimum touch target. */
  .nav-toggle{display:none;min-width:var(--nav-toggle-min-size);min-height:var(--nav-toggle-min-size);
    align-items:center;justify-content:center;background:transparent;
    border:var(--border-1px) solid rgba(244,247,255,.4);border-radius:var(--radius-8px);
    color:var(--starlight);cursor:pointer;padding:0;flex:0 0 auto}
  .nav-toggle.is-open{background:rgba(244,247,255,.14)}
  .nav-toggle-box{display:flex;flex-direction:column;gap:var(--nav-icon-bar-h);width:var(--nav-icon-bar-w)}
  .nav-toggle-bar{display:block;width:100%;height:var(--nav-icon-bar-h);background:currentColor;border-radius:var(--radius-4px)}

  /* Tablet + mobile (<=1023px, WordPress-grade default — see
     tokens.default.json's breakpoint.tablet-max): the nav leaves the
     absolute-overlay-on-hero pattern entirely and becomes a normal,
     in-flow, solid-color bar (reusing --nightdeep so its light-on-dark
     text always has real contrast regardless of what section follows
     it). This removes the whole class of "wrapped/expanded nav overlaps
     hero copy" bug at ANY link count, rather than papering over one
     instance of it — the same fix the old 720px rule made, just at the
     documented standard threshold and covering tablet too, not only
     narrow phones. */
  @media(max-width:1023px){
    nav{position:relative;background:var(--nightdeep)}
  }

  /* Mobile only (<=767px, WordPress-grade default — breakpoint.mobile-max):
     the full link list collapses behind the hamburger. Tablet (768–1023px)
     keeps the full, wrapped-if-needed horizontal link row from the rule
     above — a tablet viewport has room for it; only true mobile needs the
     collapse. JS (the shared script, end of <body>) drives #primary-menu's
     `hidden` attribute and the toggle's `aria-expanded`; with no JS this
     block still applies but `.js` never matches, so #primary-menu is never
     `hidden` and simply wraps onto its own row below the mark/toggle line
     (flex-basis:100% on a `flex-wrap:wrap` nav puts it there without any
     JS-dependent layout logic) — degraded but fully navigable. */
  @media(max-width:767px){
    nav{flex-wrap:wrap;gap:var(--space-p5rem)}
    .js .nav-toggle{display:inline-flex}
    nav #primary-menu{flex-basis:100%}
    .js nav #primary-menu[hidden]{display:none}
    .js nav #primary-menu:not([hidden]){display:flex;flex-direction:column;align-items:flex-start;
      gap:var(--space-p6rem);padding-top:var(--space-p6rem);border-top:var(--border-1px) solid rgba(244,247,255,.16)}
    nav ul{gap:var(--space-p8rem) var(--space-p95rem);font-size:var(--text-p82rem)}
  }

  /* ── Hero shell (variant partials add their own background) ──── */
  .hero{position:relative;overflow:hidden;color:var(--starlight);
    text-align:center;padding:var(--space-8p5rem) var(--space-1p25rem) var(--space-7rem)}
  .hero .inner{position:relative;z-index:3;max-width:var(--container-46rem);margin:0 auto}
  .hero .eyebrow{color:var(--butter)}
  .hero h1{font-size:var(--text-display-xl);font-style:italic;font-weight:700;
    line-height:1.04;margin:0 0 var(--space-1p1rem);color:var(--starlight);
    text-shadow:0 0 var(--shadow-offset-60px) rgba(233,141,168,.35)}
  .hero-simple{padding:var(--space-6p5rem) var(--space-1p25rem) var(--space-4rem);
    background:radial-gradient(130% 100% at 50% 0%, var(--gradient-hero-simple-mid) 0%, var(--nightfall) 46%, var(--nightdeep) 100%)}
  .hero-simple h1{font-size:var(--text-display-lg)}
  .hero .lede{font-size:var(--text-lede);color:rgba(244,247,255,.92);
    max-width:var(--container-34rem);margin:0 auto var(--space-2p2rem)}
  .hero .lede em{font-family:"Amiri",Georgia,serif;color:var(--butter)}
  .cta-row{display:flex;gap:var(--space-p9rem);justify-content:center;flex-wrap:wrap}
  .routing-line{margin:var(--space-1p1rem) 0 0;font-size:var(--text-p88rem);color:rgba(244,247,255,.82)}
  .routing-line a{color:var(--starlight);text-decoration:underline;text-underline-offset:var(--tracking-p2em);
    font-weight:600}
  .routing-line a:hover{color:var(--pure-white)}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-p55rem);border-radius:var(--radius-999px);
    padding:var(--space-p78rem) var(--space-1p5rem);font-weight:600;font-size:var(--text-p95rem);text-decoration:none;
    min-height:var(--nav-toggle-min-size);box-sizing:border-box;
    transition:transform var(--duration-p25s) ease, box-shadow var(--duration-p25s) ease;border:0;cursor:pointer;font-family:inherit}
  .btn:hover{transform:translateY(var(--size-neg2px))}
  .btn-primary{background:linear-gradient(120deg,var(--btn-primary-grad-a),var(--btn-primary-grad-b));color:var(--pure-white);
    box-shadow:0 var(--shadow-offset-12px) var(--shadow-offset-30px) var(--shadow-offset-neg12px) rgba(212,42,110,.6)}
  /* WCAG AA fix (Vaelor, 2026-09-04): dedicated --btn-primary-grad-a/-b tokens, NOT --speckle/
     --throat directly -- those two are reused elsewhere (link text, chip icons, error states)
     against DIFFERENT backgrounds already contrast-checked for THAT use; overriding them here
     would have rippled into those unrelated, already-passing pairs. Light-mode values are an
     exact copy of --speckle/--throat (pixel-identical, unchanged). Dark-mode values are darkened
     (same hue family, brand look preserved) so white .btn-primary text clears 4.5:1 AA across
     the whole gradient (computed worst-case contrast ~4.61:1; was ~2.92-3.79:1 with --speckle/
     --throat's own dark-mode values). */
  .btn-ghost{border:var(--border-1px) solid rgba(244,247,255,.4);color:var(--starlight);background:transparent}
  .btn-ghost:hover{border-color:rgba(244,247,255,.8)}
  .btn-ghost.on-light{border-color:var(--line);color:var(--ink)}
  .btn-ghost.on-light:hover{border-color:var(--soft)}
  .btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
  .hero .verse{margin-top:var(--space-3rem);font-family:"Amiri",Georgia,serif;font-style:italic;
    font-size:var(--text-1p05rem);color:rgba(244,247,255,.88)}

  @media(max-width:1023px){
    /* The nav no longer overlays the hero at this width (see the Nav rules
       above — now the same <=1023px tablet+mobile threshold the nav rule
       itself uses), so the hero no longer needs to reserve space for it —
       this intentionally overrides the desktop padding-top values above
       (8.5rem / 6.5rem), which existed only to clear the absolutely
       positioned nav. */
    .hero{padding-top:var(--space-2p75rem)}
    .hero-simple{padding-top:var(--space-2p25rem)}
  }

  /* Breadcrumbs (inside hero-simple) */
  .crumbs{margin:0 0 var(--space-1p4rem)}
  .crumbs ol{list-style:none;display:inline-flex;flex-wrap:wrap;justify-content:center;gap:var(--space-p35rem);
    padding:0;margin:0;font-size:var(--text-p8rem)}
  .crumbs li{color:rgba(244,247,255,.7)}
  .crumbs li:not(:last-child)::after{content:"/";margin-left:var(--space-p35rem);color:rgba(244,247,255,.4)}
  .crumbs a{color:rgba(244,247,255,.85);text-decoration:none}
  .crumbs a:hover{color:var(--pure-white);text-decoration:underline}
  .crumbs [aria-current="page"]{color:rgba(244,247,255,.95)}

  @media (prefers-reduced-motion: reduce){
    .stars i,.flies i{animation:none;opacity:.4}
    .btn,.skip-link{transition:none}
  }

  /* ── shared section shell ────────────────────── */
  section{padding:var(--space-4p5rem) var(--space-1p25rem)}
  .wrap{max-width:var(--container-64rem);margin:0 auto}
  .narrow{max-width:var(--container-44rem);margin:0 auto}
  h2{font-size:var(--text-display-md);font-weight:700;margin:0 0 var(--space-p75rem)}
  h3{font-size:var(--text-1p3rem);margin:var(--space-1p6rem) 0 var(--space-p5rem)}
  .sub{color:var(--soft);max-width:var(--container-38rem)}
  section p{color:var(--soft)}
  section .narrow > p, section .narrow > ul{color:var(--ink)}

  /* moon-phase divider */
  .moons{display:flex;justify-content:center;padding:var(--space-2p2rem) 0 0;color:var(--gold)}

  /* ── Listen band ─────────────────────────────── */
  .listen{background:var(--paper);text-align:center;padding-top:var(--space-3p4rem)}
  .listen .eyebrow{color:var(--pollen)}
  .chips{display:flex;gap:var(--space-p7rem);justify-content:center;flex-wrap:wrap;margin-top:var(--space-1p3rem)}
  .chip{display:inline-flex;align-items:center;gap:var(--space-p5rem);border:var(--border-1px) solid var(--line);
    background:var(--card);color:var(--ink);border-radius:var(--radius-999px);padding:var(--space-p55rem) var(--space-1p1rem);
    font-size:var(--text-p88rem);font-weight:500;text-decoration:none;box-shadow:var(--shadow);
    transition:transform var(--duration-p22s) ease}
  .chip:hover{transform:translateY(var(--size-neg2px))}
  .chip svg{color:var(--throat)}
  .chip.soon{opacity:.7;pointer-events:none}

  /* ── Spotify-style facade player card ────────── */
  .player{max-width:var(--container-44rem);margin:var(--space-2p4rem) auto 0;background:var(--card);border:var(--border-1px) solid var(--line);
    border-radius:var(--radius-20px);box-shadow:var(--shadow);overflow:hidden;text-align:left}
  .player .head{display:flex;align-items:center;gap:var(--space-1rem);padding:var(--space-1p2rem) var(--space-1p4rem);
    background:linear-gradient(120deg,var(--nightfall),var(--gradient-twilight-mid));color:var(--starlight)}
  .player .head .art{width:var(--size-56px);height:var(--size-56px);border-radius:var(--radius-12px);flex:none;
    background:radial-gradient(circle at 30% 30%, var(--blush), var(--throat) 70%);
    display:flex;align-items:center;justify-content:center;color:var(--pure-white)}
  .player .head h3{margin:0;font-size:var(--text-1p2rem);color:var(--starlight)}
  .player .head p{margin:var(--space-p1rem) 0 0;font-size:var(--text-p8rem);color:rgba(244,247,255,.8)}
  .player ol{list-style:none;margin:0;padding: var(--space-p4rem) 0}
  .player li{display:flex;align-items:center;gap:var(--space-p9rem);padding:var(--space-p62rem) var(--space-1p4rem);font-size:var(--text-p93rem)}
  .player li + li{border-top:var(--border-1px) solid var(--line)}
  .player li .n{font-family:"Amiri",Georgia,serif;color:var(--faint);width:var(--size-1p1rem);text-align:right}
  .player li .t{flex:1;font-weight:500;color:var(--ink)}
  .player li .s{font-size:var(--text-p78rem);color:var(--soft);font-variant-numeric:tabular-nums;font-weight:500}
  .player li .badge-top{font-size:var(--text-p66rem);font-weight:700;letter-spacing:var(--tracking-p06em);text-transform:uppercase;
    background:var(--butter);color:var(--ink-on-butter);border-radius:var(--radius-999px);padding:var(--space-p12rem) var(--space-p5rem);margin-left:var(--space-p4rem)}
  .player .load{display:flex;gap:var(--space-p8rem);align-items:center;justify-content:center;
    padding:var(--space-1rem) var(--space-1p4rem);border-top:var(--border-1px) solid var(--line);flex-wrap:wrap}
  .player .embed{display:none;padding:0}
  .player .embed iframe{display:block;width:100%;height:var(--size-352px);border:0}
  .player.open .embed{display:block}
  .player.open .load,.player.open ol{display:none}
  .player-caption{font-size:var(--text-p82rem);color:var(--soft);margin-top:var(--space-p9rem);max-width:var(--container-44rem);
    margin-left:auto;margin-right:auto;text-align:center}

  /* Inline Faery Circle capture (compact, reused under player / under story) */
  .inline-circle{max-width:var(--container-34rem);margin:var(--space-2rem) auto 0;text-align:center}
  .inline-circle p{margin:0 0 var(--space-p8rem);font-size:var(--text-p95rem);color:var(--soft)}
  .inline-circle form{display:flex;gap:var(--space-p55rem);justify-content:center;flex-wrap:wrap}
  .story .inline-circle p{color:rgba(244,247,255,.85)}
  .story .inline-circle{margin-top:var(--space-2p2rem);padding-top:var(--space-2rem);border-top:var(--border-1px) solid rgba(244,247,255,.16)}

  /* ── Support / Patreon ───────────────────────── */
  .support{background:
      radial-gradient(110% 100% at 50% 115%, rgba(233,141,168,.16), rgba(0,0,0,0) 60%),var(--paper);
    text-align:center}
  .support .eyebrow{color:var(--throat)}
  .support-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-14p5rem),1fr));gap:var(--space-1p2rem);
    margin-top:var(--space-2p2rem);text-align:left}
  .support .offer .badge{align-self:flex-start;font-size:var(--text-p68rem);font-weight:600;letter-spacing:var(--tracking-p12em);
    text-transform:uppercase;background:var(--butter);color:var(--ink-on-butter);border-radius:var(--radius-999px);
    padding:var(--space-p2rem) var(--space-p7rem);margin-bottom:var(--space-p6rem)}

  /* ── Offerings ───────────────────────────────── */
  .offer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-15p5rem),1fr));gap:var(--space-1p2rem);margin-top:var(--space-2p2rem)}
  .offer{background:var(--card);border:var(--border-1px) solid var(--line);border-radius:var(--radius-18px);
    padding:var(--space-1p8rem) var(--space-1p6rem) var(--space-1p6rem);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:var(--space-p4rem)}
  .offer svg{color:var(--pollen);margin-bottom:var(--space-p5rem)}
  .offer h3{font-size:var(--text-1p35rem);margin:0}
  .offer p{color:var(--soft);font-size:var(--text-p95rem);margin:0 0 var(--space-p6rem);flex:1}
  .offer .facts{font-size:var(--text-p82rem);color:var(--pollen);font-weight:600;margin:0 0 var(--space-p8rem)}
  .offer a{font-weight:600;font-size:var(--text-p92rem);text-decoration:none}
  .offer a::after{content:" →"}
  .offer.emphasis{border-color:var(--pollen);box-shadow:0 var(--shadow-offset-1px) var(--shadow-offset-2px) rgba(60,20,35,.05),0 var(--shadow-offset-22px) var(--shadow-offset-48px) var(--shadow-offset-neg30px) rgba(193,104,42,.45)}

  /* ── Story band: twilight treatment ──────────── */
  .story{background:
      radial-gradient(110% 90% at 50% -10%, var(--gradient-twilight-mid) 0%, var(--nightfall) 55%, var(--nightdeep) 100%);
    color:var(--starlight)}
  .story .eyebrow{color:var(--butter)}
  .story h2{color:var(--starlight)}
  .story .narrow > p:not(.eyebrow):not(.creed), .story .narrow > ul{color:rgba(244,247,255,.9)}
  .story .drop::first-letter{font-family:"Amiri",Georgia,serif;font-size:var(--text-3p4em);float:left;
    line-height:.82;padding:var(--space-p06em) var(--space-p12em) 0 0;color:var(--blush)}
  .story .creed{font-family:"Amiri",Georgia,serif;font-style:italic;font-size:var(--text-1p5rem);
    color:var(--butter);margin:var(--space-1p8rem) 0 var(--space-1p4rem)}
  .story a.btn-ghost{margin-top:var(--space-p6rem)}

  /* ── Retreat callout ─────────────────────────── */
  .retreat{background:linear-gradient(180deg,rgba(241,226,154,.28),rgba(241,226,154,0)),var(--paper)}
  .retreat .card-wide{background:var(--card);border:var(--border-1px) solid var(--line);border-radius:var(--radius-20px);
    box-shadow:var(--shadow);padding:var(--space-2p4rem) var(--space-fluid-card-x);display:grid;
    grid-template-columns:1.4fr 1fr;gap:var(--space-2rem);align-items:center}
  @media(max-width:760px){.retreat .card-wide{grid-template-columns:1fr}}
  .retreat .eyebrow{color:var(--pollen)}
  .retreat p{color:var(--soft)}
  .retreat .motif-wrap{display:flex;justify-content:center}
  .retreat .motif-wrap svg{color:var(--pollen)}
  .retreat .cta-pair{display:flex;gap:var(--space-p8rem);flex-wrap:wrap;margin-top:var(--space-p6rem)}

  /* ── "Help Build the World" scene (home only) ────
     Scoped to this one content-id (content.html's generic content-section
     renderer emits the id as a plain class) so it reads as its OWN
     cinematic beat -- continuous with .hero-portrait/.story's night-
     garden treatment -- rather than a bare content-section on --paper
     like an inner-page FAQ block. Zero effect on any other
     content-section anywhere else on the site (every other page's
     content-id is different or unset). Same gradient recipe as .story,
     reused (not reinvented) so hero -> story -> this section reads as
     one continuous night rather than three different treatments. */
  .build-world{background:
      radial-gradient(120% 90% at 50% -8%, var(--gradient-twilight-mid) 0%, var(--nightfall) 55%, var(--nightdeep) 100%);
    color:var(--starlight)}
  .build-world .eyebrow{color:var(--butter)}
  .build-world h2{color:var(--starlight)}
  .build-world > .wrap > p{color:rgba(244,247,255,.9);max-width:var(--container-38rem)}
  .build-world .content-cards .offer{background:rgba(244,247,255,.07);border-color:rgba(244,247,255,.2)}
  .build-world .content-cards .offer h3{color:var(--starlight)}
  .build-world .content-cards .offer p{color:rgba(244,247,255,.85)}
  .build-world .content-cards .offer a{color:var(--butter)}

  /* ── EPK strip ────────────────────────────────── */
  .epk{background:var(--card);border-top:var(--border-1px) solid var(--line);border-bottom:var(--border-1px) solid var(--line)}
  .epk .grid{display:grid;grid-template-columns:1.3fr 1fr;gap:var(--space-2rem);align-items:center}
  @media(max-width:760px){.epk .grid{grid-template-columns:1fr}}
  .epk .eyebrow{color:var(--teal)}
  .epk p{color:var(--soft)}
  .epk .stats{display:flex;gap:var(--space-1p6rem);flex-wrap:wrap;margin:var(--space-1p2rem) 0 var(--space-1p4rem)}
  .epk .stat b{display:block;font-family:"Amiri",Georgia,serif;font-size:var(--text-1p5rem);color:var(--ink)}
  .epk .stat span{font-size:var(--text-p78rem);color:var(--soft);text-transform:uppercase;letter-spacing:var(--tracking-p08em)}
  .epk .actions{display:flex;gap:var(--space-p8rem);flex-wrap:wrap}

  /* ── Faery Circle (email, full section) ──────── */
  .circle{text-align:center}
  .circle .eyebrow{color:var(--throat)}
  .circle form{display:flex;gap:var(--space-p6rem);justify-content:center;flex-wrap:wrap;margin-top:var(--space-1p6rem)}
  .circle .note{font-size:var(--text-p86rem);color:var(--soft);margin-top:var(--space-1rem);max-width:var(--container-34rem);
    margin-left:auto;margin-right:auto}

  /* Shared form field styling — 16px+ inputs everywhere (no iOS auto-zoom) */
  input[type="text"],input[type="email"],input[type="tel"],textarea,select{
    border:var(--border-1px) solid var(--line);background:var(--card);color:var(--ink);
    border-radius:var(--radius-14px);padding:var(--space-p78rem) var(--space-1p1rem);font:inherit;font-size:var(--text-16px);width:100%}
  .circle input[type="email"]{border-radius:var(--radius-999px);min-width:var(--size-16rem);width:auto;flex:1 1 var(--size-16rem)}
  input:focus,textarea:focus,select:focus{outline:var(--focus-2px) solid var(--focus-ring);outline-offset:var(--focus-2px)}
  textarea{min-height:var(--size-6p5rem);resize:vertical}
  .field{margin-bottom:var(--space-1p1rem);text-align:left}
  .field label{display:block;font-size:var(--text-p85rem);font-weight:600;margin-bottom:var(--space-p35rem)}
  .field .hint{display:block;font-size:var(--text-p78rem);color:var(--soft);margin-top:var(--space-p3rem)}
  .field-row{display:flex;gap:var(--space-1rem);flex-wrap:wrap}
  .field-row .field{flex:1 1 var(--size-12rem)}
  .radio-group{display:flex;gap:var(--space-1p1rem);flex-wrap:wrap;font-size:var(--text-p92rem)}
  .radio-group label{display:flex;align-items:center;gap:var(--space-p4rem);font-weight:500}
  .checkbox-row{display:flex;gap:var(--space-p6rem);align-items:flex-start;font-size:var(--text-p88rem);color:var(--soft);
    text-align:left;margin:var(--space-1rem) 0}
  .checkbox-row input{width:auto;margin-top:var(--space-p2rem)}
  .hp-field{position:absolute;left:var(--space-neg9999px);top:var(--space-neg9999px);width:var(--size-1px);height:var(--size-1px);overflow:hidden}
  .form-shell{max-width:var(--container-36rem);margin:0 auto;text-align:left}
  .form-expect{font-size:var(--text-p85rem);color:var(--soft);margin-top:var(--space-1rem);text-align:center}

  /* ── Client-side form validation/submit feedback (N1) ──────────
     .field-error is created/removed by the shared submit-handling script
     at the bottom of this file; .form-status carries the post-submit
     success/error message (configured per form via data-success-copy/
     data-error-copy). Colors reuse existing reserve-bank palette slots
     (--leaf/--throat) rather than inventing new ones. */
  .field-error{margin:var(--space-p35rem) 0 0;font-size:var(--text-p8rem);color:var(--throat);font-weight:600}
  [aria-invalid="true"]{border-color:var(--throat)}
  .form-status{margin-top:var(--space-1rem);font-size:var(--text-p9rem);font-weight:600;color:var(--leaf)}
  .form-status.is-error{color:var(--throat)}
  .form-status:empty{display:none}

  /* ── Generic content blocks (service / about / retreat / legal pages) ── */
  .content-section .narrow, .content-section .wrap{text-align:left}
  .content-section p.drop::first-letter{font-family:"Amiri",Georgia,serif;font-size:var(--text-3em);
    float:left;line-height:.82;padding:var(--space-p05em) var(--space-p1em) 0 0;color:var(--throat)}
  .content-section p.creed{font-family:"Amiri",Georgia,serif;font-style:italic;
    font-size:var(--text-1p35rem);color:var(--throat);margin:var(--space-1p6rem) 0}
  .content-list{padding-left:var(--space-1p3rem);margin:0 0 var(--space-1p2rem);color:var(--ink)}
  .content-list li{margin-bottom:var(--space-p5rem)}
  .content-list.itinerary{list-style:none;padding-left:0}
  .content-list.itinerary li{padding:var(--space-p5rem) 0 var(--space-p5rem) var(--space-1p6rem);border-left:var(--border-2px) solid var(--pollen);
    margin-left:var(--space-p3rem);margin-bottom:var(--space-p1rem)}
  .content-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--size-15p5rem),1fr));
    gap:var(--space-1p1rem);margin:var(--space-1p4rem) 0}
  .content-cards .offer .card-emoji{font-size:var(--text-1p6rem);line-height:1}
  .disclaimer-block{font-size:var(--text-p88rem);color:var(--soft);background:var(--card);
    border:var(--border-1px) solid var(--line);border-radius:var(--radius-14px);padding:var(--space-1rem) var(--space-1p2rem);margin:var(--space-1p4rem) 0}
  .facts-strip{display:inline-block;font-size:var(--text-p85rem);font-weight:600;color:var(--pollen);
    background:rgba(193,104,42,.1);border-radius:var(--radius-999px);padding:var(--space-p4rem) var(--space-1rem);margin:var(--space-p4rem) 0 var(--space-1p2rem)}

  /* Editor-only CONFIRM flag — subtle, visible on hover/focus for review;
     never printed as page copy. Not aria-hidden: an editor tabbing/inspecting
     should be able to find it, but it must never read as user-facing content. */
  .cflag{font-size:var(--text-p62em);vertical-align:super;color:var(--faint);opacity:.75;
    cursor:help;margin-left:var(--space-p15em);border-bottom:var(--border-1px) dotted var(--faint)}
  @media print{ .cflag{display:none} }

  /* ── FAQ ──────────────────────────────────────── */
  .faq-list{margin-top:var(--space-1p6rem)}
  .faq-item{border:var(--border-1px) solid var(--line);border-radius:var(--radius-14px);padding:var(--space-p2rem) var(--space-1p2rem);
    margin-bottom:var(--space-p7rem);background:var(--card)}
  .faq-item summary{cursor:pointer;font-weight:600;padding:var(--space-p9rem) 0;list-style:none;
    display:flex;justify-content:space-between;align-items:center;gap:var(--space-1rem)}
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{content:"+";font-size:var(--text-1p3rem);color:var(--pollen);flex:none}
  .faq-item[open] summary::after{content:"–"}
  .faq-item p{margin:0 0 var(--space-1rem);color:var(--soft)}

  /* ── Breadcrumb JSON-LD-visible nav already styled above (.crumbs) ── */

  /* ── Footer ──────────────────────────────────── */
  footer{background:var(--nightdeep);color:rgba(244,247,255,.85);padding:var(--space-2p6rem) var(--space-1p25rem);
    text-align:center;font-size:var(--text-p88rem)}
  footer .mark{font-family:"Amiri",Georgia,serif;font-style:italic;font-size:var(--text-1p3rem);
    color:var(--starlight);margin-bottom:var(--space-p6rem)}
  footer .links{display:flex;gap:var(--space-1p2rem);justify-content:center;flex-wrap:wrap;margin:var(--space-p9rem) 0 var(--space-1p2rem)}
  footer a{color:rgba(244,247,255,.9);text-decoration:none}
  footer a:hover{color:var(--pure-white)}
  footer .tm{font-size:var(--text-p8rem);color:rgba(244,247,255,.78);margin-top:var(--space-p8rem)}
  footer .footer-circle{max-width:var(--container-26rem);margin:var(--space-1p6rem) auto var(--space-1p8rem);padding-top:var(--space-1p6rem);
    border-top:var(--border-1px) solid rgba(244,247,255,.16)}
  footer .footer-circle p{font-size:var(--text-p85rem);color:rgba(244,247,255,.85);margin:0 0 var(--space-p7rem)}
  footer .footer-circle form{display:flex;gap:var(--space-p5rem);justify-content:center;flex-wrap:wrap}
  footer .footer-circle input[type="email"]{border-radius:var(--radius-999px);min-width:var(--size-14rem);flex:1 1 var(--size-12rem);
    background:rgba(255,255,255,.06);border-color:rgba(244,247,255,.25);color:var(--pure-white)}
  footer .footer-circle input[type="email"]::placeholder{color:rgba(244,247,255,.55)}
  footer .footer-circle .btn{padding:var(--space-p7rem) var(--space-1p2rem);font-size:var(--text-p88rem)}