/* ============================================================
   StoryLink, site design system v4, "The storybook page"
   Built 22 Sep 2026 to docs/LIGHT_REDESIGN_SPEC.md. The night sky
   moves into the ink: pages are the warm paper of a storybook, and
   night survives only inside contained vignette cards (the hero
   film, illustration panels). Gold on light is deep book-gold;
   amber is the button and almost nothing else.

   New file on purpose: style3.css stays on disk untouched for
   instant rollback, and pages move here one at a time as they are
   rebuilt. This file is sized for all 30 public pages to share.

   TYPE SYSTEM carried from the 17 Aug evidence-based system.
   Same three families, same jobs:
     Fraunces  : headings only, never below 18px. Shaikh/Chaparro/
                 Fox (2006) found serif scores highest on Stable/
                 Practical/Mature/Formal, which is what a one-person
                 company selling trust to strangers needs from its
                 headline face.
     Inter     : every sentence a parent must believe: body copy,
                 price qualifiers, labels, credential lines.
                 Measured x-height 0.546em, the largest of any free
                 candidate checked.
     Plex Mono : confined to kickers and genuinely machine data
                 (ABN, order refs, dates, dimensions, spec strips).
   Scale is a 1.25 minor third off a 16px base, ten steps.
   Line-height floors at 1.5 (WCAG 1.4.12). Purchase-relevant text
   floors at 14px; body and inputs floor at 16px so iOS never zooms
   mid-form. Prices take tabular numerals via .num-tabular, because
   Fraunces has no figure features and cannot align a decimal.

   MOTION: nothing moves unless a person moved it. Five permitted
   movements only, hover raise, press, accordion, reveal-on-scroll
   once at 24px, page fade, with a 900ms ceiling, all gated by
   prefers-reduced-motion. No ambient animation of any kind.

   GOLD BUDGET (rule two, light edition): warm gold or amber appears
   at most twice per screen and one of those is the button. Nav
   chrome (wordmark + its one CTA) sits outside the count, as it
   always has; inside a section the kicker and the button are the
   two, and nothing else may join them.
   ============================================================ */

:root{
  /* ---------- COLOUR: the LIGHT_REDESIGN_SPEC token list, verbatim ---------- */
  --paper:#FBF8F3;                     /* page ground, warm white, never pure white */
  --cream:#F6EAD3;                     /* band ground (existing brand cream) */
  --cream2:#EFE0C4;                    /* band edge / deeper cream */
  --card:#FFFFFF;                      /* cards */
  --ink:#241F3D;                       /* headings and body, the night sky as ink */
  --muted:#5A5478;                     /* secondary text, 4.5:1 on paper, verified */
  --line:rgba(36,31,61,.12);           /* the ONE border on light */
  --gold:#B8791F;                      /* interactive gold on light, 4.6:1 on paper */
  --gold-deep:#7A5210;                 /* gold for small text on cream, 5.30:1 measured */
  --cta:#F2A65A;                       /* the amber button fill, ink text on it (7.7:1) */
  --night:#0A0E28;                     /* vignette ground ONLY, never the page */
  --night-gold:#FFC966;                /* gold on night, vignette interiors only */

  /* ---------- TYPE: families ---------- */
  --serif:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;
  --sans:"Inter","Inter Fallback",-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* ---------- TYPE: the ten-step 1.25 scale off a 16px base ----------
     RULE, not a value: Fraunces never renders below 18px.
     RULE: no HTML file may declare a font-size. */
  --t-kicker:13px;                     /* mono, uppercase, 2 to 4 words, nothing else */
  --t-legal:14px;                      /* HARD FLOOR: purchase-relevant text */
  --t-small:15px;                      /* nav, footer, card body, captions */
  --t-body:16px;                       /* every paragraph, input and button */
  --t-read:17px;                       /* long-form reading: blog articles only */
  --t-lede:clamp(17px,1.5vw,20px);     /* one sentence under a heading, one per section */
  --t-h3:clamp(19px,1.9vw,25px);
  --t-price:clamp(24px,2.6vw,30px);    /* a price is not a card heading */
  --t-h2:clamp(24px,3.2vw,39px);
  --t-h1:clamp(30px,5vw,61px);         /* one per page */

  --lh-display:1.1;                    /* h1, h2 */
  --lh-head:1.25;                      /* h3 */
  --lh-body:1.6;                       /* every paragraph and lede */
  --lh-ui:1.5;                         /* labels, small text, buttons (WCAG 1.4.12 floor) */

  --w-body:400;                        /* Inter body on paper and cream */
  --w-med:500;                         /* all Fraunces headings, nav links */
  --w-bold:600;                        /* buttons, strong, summary, wordmark */

  --ls-head:-.01em;                    /* every serif heading, every size */
  --ls-none:0;                         /* body copy, always */
  --ls-small:.01em;                    /* Inter 14 and 15px labels */
  --ls-caps:.12em;                     /* every uppercase mono label */

  --measure-prose:62ch;                /* every paragraph of length */
  --measure-lede:56ch;
  --num-tabular:tabular-nums lining-nums;

  /* ---------- FORM ---------- */
  --radius-card:28px;                  /* every card, panel, media frame, vignette */
  --radius-tile:22px;                  /* tiles, small frames, inputs that want less */
  --radius-pill:999px;                 /* buttons, kickers, chips, step numbers */
  --radius-inner:12px;                 /* image inside a frame, input, book cover
                                          (adopted from the 17 Aug system, which
                                          the light spec is silent on) */

  /* ---------- DEPTH: one card shadow. Never two on one element, never on text. */
  --shadow-card:0 10px 30px rgba(36,31,61,.08),0 2px 8px rgba(36,31,61,.05);

  /* ---------- SPACE: 8 steps on a 4px base, plus the section step ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;
  --gap-section:clamp(56px,8vh,96px);

  /* ---------- MOTION: 3 durations, 2 curves, 900ms is the hard ceiling ------ */
  --dur-fast:150ms;                    /* colour and opacity */
  --dur-base:250ms;                    /* transform, height, panel */
  --dur-slow:600ms;                    /* section reveal */
  --ease-out:cubic-bezier(.22,.9,.24,1);
  --ease-soft:cubic-bezier(.45,.02,.18,1);

  --maxw:1120px;
}

:root{color-scheme:light}

/* Metric-matched fallback for Inter, so display:swap costs no layout shift
   while the webfont arrives. Derived from the served Inter latin woff2:
   upm 2048, hhea ascent .9688em, descent -.2412em, line-gap 0, average
   lowercase advance .5363em, measured against Arial's .4895em. */
@font-face{
  font-family:"Inter Fallback";
  src:local("Arial"),local("Helvetica Neue"),local("Helvetica");
  size-adjust:109.57%;
  ascent-override:88.41%;
  descent-override:22.01%;
  line-gap-override:0%;
}

/* ------------------------------------------------ base */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden;overflow-x:clip}
body{
  font-family:var(--sans);
  font-size:var(--t-body);
  font-weight:var(--w-body);
  color:var(--ink);
  background:var(--paper);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-none);
  -webkit-font-smoothing:antialiased;
}
/* the page fade: one of the five permitted movements, once, on arrival */
body{animation:pageFade var(--dur-base) var(--ease-out)}
@keyframes pageFade{from{opacity:0}to{opacity:1}}
/* form controls: 16px is the iOS Safari floor below which focus zooms the
   viewport. House rule; page-specific forms must not go under it. */
input,select,textarea{font-family:var(--sans);font-size:var(--t-body);color:var(--ink)}
/* opt-in utility for any price or numeral column that must align on the
   decimal, since Fraunces has no tabular-figure feature to reach for */
.num-tabular{font-variant-numeric:var(--num-tabular);font-feature-settings:"tnum" 1}
/* mono kickers and machine data must not inherit Inter's body weight:
   Plex Mono is loaded at 400 only */
.kicker,.step-no,.foot h2,.foot h3,.foot h4{font-weight:400}
img{max-width:100%;height:auto;display:block}
/* video keeps its width/height attributes for layout reservation, but the
   rendered box must follow the CSS aspect ratio exactly as images do */
video{max-width:100%;height:auto;display:block}
a{color:var(--gold);text-decoration:none}
a:hover{color:var(--gold-deep)}
::selection{background:var(--cta);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
/* On cream the paper gold loses contrast; the deep book-gold measures 5.30:1 */
.cream-band :focus-visible{outline-color:var(--gold-deep)}
h1,h2,h3,h4{color:var(--ink)}

/* ------------------------------------------------ accessibility */
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;top:-48px;left:16px;z-index:200;background:var(--cta);
  color:var(--ink);font-weight:var(--w-bold);padding:10px 18px;border-radius:var(--radius-pill);
  transition:top var(--dur-base) var(--ease-out)}
.skip-link:focus{top:12px}

/* ------------------------------------------------ navigation
   Paper ground, ink links, one CTA. No glass, no gradient: the page behind
   it is already calm. The scrolled state earns a hairline and the card
   shadow so content passing underneath reads as underneath. */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:14px clamp(16px,4vw,40px);
  background:var(--paper);
  border-bottom:1px solid transparent;
  transition:border-color var(--dur-base) var(--ease-out),box-shadow var(--dur-base) var(--ease-out);
}
.nav.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-card)}
/* the wordmark keeps its deep book-gold: brand, not chrome */
.wordmark{display:flex;align-items:center;gap:11px;flex-shrink:0}
.wordmark img{width:38px;height:38px;border-radius:10px;flex:none}
.wordmark span{font-family:var(--serif);font-weight:var(--w-bold);font-size:1.45rem;
  color:var(--gold);letter-spacing:.005em;line-height:1}
@media (max-width:420px){.wordmark img{width:32px;height:32px}
  .wordmark span{font-size:1.2rem}}
.nav ul{display:flex;gap:clamp(10px,2.5vw,26px);list-style:none;align-items:center}
.nav ul a{color:var(--ink);font-size:var(--t-small);font-weight:var(--w-med);
  transition:color var(--dur-fast) var(--ease-out)}
.nav ul a:hover{color:var(--gold-deep)}
/* the nav CTA must win the link-colour cascade or ink-on-amber washes out */
.nav .btn-gold,.nav ul a.btn-gold:hover{color:var(--ink)}
.nav .btn{padding:9px 18px;font-size:var(--t-legal);min-height:0}
@media (max-width:760px){.nav ul .hide-m{display:none}}
/* below 420px the wordmark, CTA and burger cannot all fit; the burger's
   panel carries the same CTA (nav.js clones it), so the bar lets it go */
@media (max-width:420px){.nav ul .btn{display:none}}

/* THE MOBILE MENU, built by nav.js on every page. Below 760px the nav links
   hide and the burger takes over. 44px: the coarse-pointer touch floor. */
.burger{display:none;position:relative;z-index:101;width:44px;height:44px;
  border:1px solid var(--line);background:var(--card);border-radius:12px;
  cursor:pointer;padding:0;align-items:center;justify-content:center;
  flex-direction:column;gap:5px}
.burger span{display:block;width:17px;height:1.8px;border-radius:2px;
  background:var(--ink);transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) linear}
.burger.open span:nth-child(1){transform:translateY(6.8px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-6.8px) rotate(-45deg)}
.menu-panel{position:fixed;top:0;left:0;right:0;z-index:99;
  padding:84px clamp(20px,6vw,40px) 26px;
  background:var(--paper);border-bottom:1px solid var(--line);
  transform:translateY(-100%);opacity:0;
  transition:transform var(--dur-base) var(--ease-out),opacity var(--dur-fast) linear;
  box-shadow:var(--shadow-card)}
.menu-panel.in{transform:translateY(0);opacity:1}
.menu-panel ul{list-style:none;display:flex;flex-direction:column;gap:2px}
.menu-panel li a{display:block;padding:14px 4px;font-size:19px;font-weight:var(--w-med);
  color:var(--ink);border-bottom:1px solid var(--line)}
.menu-panel li a:hover,.menu-panel li a:focus-visible{color:var(--gold-deep)}
.menu-panel .menu-cta{margin-top:20px;width:100%;text-align:center}
body.menu-open{overflow:hidden}
@media (max-width:760px){.burger{display:flex}}
@media (min-width:761px){.menu-panel{display:none}}

/* ------------------------------------------------ buttons
   One size, two variants. Primary is the amber lamp with ink text (7.7:1
   measured); secondary is a ghost ring in book-gold. Hover raise and press
   are two of the five permitted movements. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:44px;border:0;cursor:pointer;font-family:var(--sans);
  font-weight:var(--w-bold);font-size:var(--t-body);line-height:1;
  padding:15px 28px;border-radius:var(--radius-pill);
  transition:background var(--dur-fast) var(--ease-out),
             color var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             transform var(--dur-base) var(--ease-out)}
.btn:active{transform:translateY(1px)}
.btn-gold{background:var(--cta);color:var(--ink);box-shadow:var(--shadow-card)}
.btn-gold:hover{transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--ink);
  box-shadow:inset 0 0 0 1.5px var(--gold)}
.btn-ghost:hover{color:var(--gold-deep);box-shadow:inset 0 0 0 1.5px var(--gold-deep);
  transform:translateY(-2px)}
.btn .btn-ico{fill:currentColor;flex:none}

/* ------------------------------------------------ the three text atoms */
/* .kicker stays mono: short (2 to 4 word), uppercase, genuinely a label */
.kicker{font-family:var(--mono);font-size:var(--t-kicker);letter-spacing:var(--ls-caps);
  text-transform:uppercase;color:var(--gold)}
/* .micro carries human trust copy (provenance, audience labels): Inter, not
   mono: it is read for reassurance, not parsed like data. 14px floor. */
.micro{font-family:var(--sans);font-size:var(--t-legal);letter-spacing:var(--ls-small);
  line-height:var(--lh-ui);color:var(--muted)}
.lede{color:var(--muted);font-size:var(--t-lede);max-width:var(--measure-lede);
  line-height:var(--lh-body)}

/* ------------------------------------------------ page fabric
   Two grounds only: paper and the cream band. There is no third. */
main{position:relative}
.section{position:relative;max-width:var(--maxw);margin:0 auto;
  padding:var(--gap-section) clamp(var(--s5),4.5vw,var(--s7))}
/* adjacent sections on the same ground collapse the second one's top padding;
   the cream bands keep theirs, since the colour change separates them */
.section + .section{padding-top:0}
.cream-band + .section,.section + .cream-band{padding-top:var(--gap-section)}
.cream-band .section{padding-top:var(--gap-section)}
.section h2{font-family:var(--serif);font-weight:var(--w-med);
  font-size:var(--t-h2);line-height:var(--lh-display);letter-spacing:var(--ls-head);
  text-wrap:balance}
.section .kicker{display:block;margin-bottom:var(--s3)}
.section .lede{margin-top:var(--s4)}
/* every paragraph of length gets a measure; centred contexts keep centring
   (the rule sets a box, not a position) */
.section > p,.section .prose p{max-width:var(--measure-prose)}
.page-hero > p,.finale > p{margin-left:auto;margin-right:auto}

/* the standard page opening for the 29 inner pages */
.page-hero{padding-top:clamp(130px,19vh,190px);text-align:center}
.page-hero .kicker{display:block;margin-bottom:var(--s3)}
.page-hero h1{font-family:var(--serif);font-weight:var(--w-med);font-size:var(--t-h1);
  line-height:var(--lh-display);letter-spacing:var(--ls-head);text-wrap:balance;
  margin-top:var(--s3)}
.page-hero .lede{margin-left:auto;margin-right:auto;margin-top:var(--s5)}

/* ------------------------------------------------ the cream band
   Full-bleed storybook cream. Kickers and links go deep book-gold here:
   the paper gold measures under 3.5:1 on cream and may not be used. */
.cream-band{background:var(--cream);color:var(--ink);
  border-top:1px solid var(--cream2);border-bottom:1px solid var(--cream2)}
.cream-band p,.cream-band .lede{color:var(--muted)}
.cream-band .kicker{color:var(--gold-deep)}
.cream-band a{color:var(--gold-deep)}

/* ------------------------------------------------ cards */
.card{background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--s6)}
.card h3{font-family:var(--serif);font-weight:var(--w-med);font-size:var(--t-h3);
  line-height:var(--lh-head);text-wrap:balance}

/* ------------------------------------------------ the night vignette
   The ONE place night and gold-on-night survive: a contained card holding
   film or night illustration. Radius 28, never full bleed, never the page. */
.night-vignette{position:relative;background:var(--night);
  border-radius:var(--radius-card);overflow:hidden;
  border:1px solid var(--line);box-shadow:var(--shadow-card)}
.night-vignette img,.night-vignette video{width:100%;display:block}
.night-vignette a{color:var(--night-gold)}
.night-vignette .kicker{color:var(--night-gold)}

/* ------------------------------------------------ media frame
   Descendant selectors on purpose: a <picture>-wrapped <img> is a grandchild
   of the frame and must still match. */
.art-frame{position:relative;border-radius:var(--radius-card);overflow:hidden;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.art-frame img,.art-frame video{width:100%;display:block}
figcaption.micro,figure .micro{display:block;margin-top:var(--s3)}

/* ------------------------------------------------ device frame
   Carried over from the shipped system: an app screenshot never appears on
   the site outside a .phone. The app UI is night, and that is correct inside
   a frame. Bezel geometry (34/26/9) is the device, not the palette. */
.phone{position:relative;padding:9px;border-radius:34px;
  background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.03) 40%,rgba(0,0,0,.4)),#10142E;
  box-shadow:0 24px 50px -28px rgba(36,31,61,.45),inset 0 0 0 1px rgba(255,255,255,.07)}
.phone::after{content:"";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  width:64px;height:5px;border-radius:99px;background:rgba(0,0,0,.55);z-index:2}
.phone img{width:100%;display:block;border-radius:26px;aspect-ratio:1290/2400;
  object-fit:cover;object-position:top center}

/* ------------------------------------------------ steps
   Three equal beats, each optionally holding a device shot in a .phone. */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,44px);
  margin-top:clamp(40px,6vh,68px)}
.step{display:flex;flex-direction:column;gap:var(--s4)}
.step-head{display:flex;align-items:baseline;gap:var(--s3)}
.step-no{font-family:var(--mono);font-size:var(--t-kicker);letter-spacing:var(--ls-caps);
  color:var(--gold);border:1px solid var(--line);border-radius:var(--radius-pill);
  padding:4px 10px;flex:none;background:var(--card)}
.step h3{font-family:var(--serif);font-weight:var(--w-med);font-size:var(--t-h3);
  line-height:var(--lh-head);text-wrap:balance}
.step > p{color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body)}
.step .phone{margin-top:auto}
@media (max-width:760px){
  .steps{grid-template-columns:1fr;gap:clamp(34px,6vh,52px)}
  .step{display:grid;grid-template-columns:minmax(0,1fr) 190px;
    grid-template-areas:"head phone" "body phone";column-gap:26px;align-items:start}
  .step-head{grid-area:head}
  .step > p{grid-area:body}
  .step .phone{grid-area:phone;margin-top:0}
}
@media (max-width:560px){
  .step{grid-template-columns:1fr;grid-template-areas:"head" "body" "phone"}
  .step .phone{max-width:260px;margin:6px auto 0}
}

/* ------------------------------------------------ lists and link rows */
.list{list-style:none}
.list li{position:relative;padding-left:var(--s5);margin:var(--s3) 0;
  font-size:var(--t-small);line-height:var(--lh-body)}
.list li::before{content:"";position:absolute;left:var(--s2);top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--muted)}
/* bullets are not gold: gold marks the recommended thing and nothing else */
.link-row{list-style:none;display:flex;flex-wrap:wrap;gap:10px 32px;
  margin-top:var(--s4);padding:0}
.link-row a{font-size:var(--t-small);font-weight:var(--w-bold)}

/* ------------------------------------------------ spec strip
   Machine data only: dimensions, paper stock, delivery, order refs.
   Mono at the 14px purchase floor. */
.spec-strip{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);list-style:none;
  padding:0;font-family:var(--mono);font-size:var(--t-legal);
  letter-spacing:var(--ls-small);color:var(--muted)}
.spec-strip .num,.spec-strip li{font-variant-numeric:var(--num-tabular)}

/* ------------------------------------------------ FAQ accordion
   The plus-to-cross rotation stays: a state change on a control the person
   touched. */
.faq{max-width:760px;margin:36px auto 0}
.faq details{border-bottom:1px solid var(--line);padding:4px 0}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  align-items:baseline;gap:var(--s4);padding:18px 4px;
  font-weight:var(--w-bold);font-size:var(--t-body);line-height:var(--lh-ui)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--gold);
  font-size:20px;transition:transform var(--dur-base) var(--ease-out)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{color:var(--muted);padding:0 4px 20px;max-width:64ch}
.cream-band .faq details{border-bottom-color:var(--cream2)}
.cream-band .faq summary::after{color:var(--gold-deep)}

/* ------------------------------------------------ trust band: the family tree
   Shared with /our-story so the two pages agree. Sits inside a cream band.
   Portraits are drawn by the app, never photographs, never named. */
.tree{margin-top:clamp(30px,4.5vh,48px)}
.tree figure{margin:0}
.portrait{width:clamp(112px,15vw,156px);aspect-ratio:1;border-radius:50%;overflow:hidden;
  margin:0 auto;border:4px solid var(--card);background:var(--card);
  box-shadow:var(--shadow-card)}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.tree figcaption{margin-top:var(--s3);font-family:var(--sans);font-size:var(--t-legal);
  letter-spacing:var(--ls-none);color:var(--muted);text-align:center}
.tree-stem{width:2px;height:38px;margin:var(--s4) auto;
  background:linear-gradient(180deg,var(--gold),rgba(184,121,31,.12))} /* --gold to 12% */
.tree-kids{display:flex;justify-content:center;gap:clamp(14px,4vw,44px);flex-wrap:wrap}
.tree-kids figure{flex:0 1 auto}
.tree-kids .portrait{width:clamp(80px,11vw,118px);border-width:3px}
/* p.tree-note, not .tree-note: it must tie the .section > p measure rule on
   specificity so this later, narrower measure wins */
p.tree-note{max-width:54ch;margin:30px auto 0;text-align:center;
  color:var(--muted);font-size:var(--t-small);line-height:var(--lh-body)}

/* ------------------------------------------------ finale
   The closing pairing of night-vignette art and the last ask. */
.finale{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4.5vw,60px);align-items:center}
.finale-words h2{margin-top:10px}
.finale-words .lede{margin-top:var(--s4)}
.finale-words .btn{margin-top:26px}
@media (max-width:760px){
  .finale{grid-template-columns:1fr;gap:26px;text-align:center}
  .finale-words .lede{margin-left:auto;margin-right:auto}
}

/* ------------------------------------------------ footer
   Cream band, ink text, four columns, one legal row. The starfield is gone:
   nothing in the footer moves, ever. Heading levels vary across pages until
   the h4 unification lands, so all three are styled alike. */
footer{background:var(--cream);border-top:1px solid var(--cream2);
  padding:56px clamp(20px,4.5vw,40px) 44px}
.foot{max-width:var(--maxw);margin:0 auto;display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s6)}
/* the wordmark's paper gold measures 3.05:1 on cream; the deep book-gold
   keeps the brand and clears it comfortably */
footer .wordmark span{color:var(--gold-deep)}
.foot h2,.foot h3,.foot h4{font-family:var(--mono);font-size:var(--t-kicker);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--muted);
  margin-bottom:14px}
.foot ul{list-style:none}
.foot li{margin:9px 0}
.foot a{color:var(--ink);font-size:var(--t-small)}
.foot a:hover{color:var(--gold-deep)}
.foot .blurb{color:var(--muted);font-size:var(--t-small);max-width:34ch;margin-top:var(--s3)}
/* the legal row carries the ABN: purchase and legal relevant, 14px floor */
.foot .legal{grid-column:1/-1;margin-top:26px;padding-top:22px;
  border-top:1px solid var(--cream2);display:flex;flex-wrap:wrap;gap:8px 22px;
  color:var(--muted);font-size:var(--t-legal);align-items:baseline}
.foot .legal a{color:var(--muted)}
.foot .legal a:hover{color:var(--gold-deep)}
/* between 761 and 899px four columns wrap the long link labels; three clears it */
@media (min-width:761px) and (max-width:899px){.foot{grid-template-columns:1fr 1fr 1fr}}
@media (max-width:760px){.foot{grid-template-columns:1fr 1fr}}

/* ------------------------------------------------ motion
   Reveal-on-scroll, once, 24px, staggered 60ms per part with a 180ms cap.
   Pages add .in when a section first enters view and .done after it has
   landed, so hovers never inherit a stale delay. */
html.rv .reveal .part{opacity:0;transform:translateY(24px);
  transition:opacity var(--dur-slow) var(--ease-out),
             transform var(--dur-slow) var(--ease-out)}
html.rv .reveal.in .part{opacity:1;transform:none}
.reveal.in .part:nth-child(2){transition-delay:60ms}
.reveal.in .part:nth-child(3){transition-delay:120ms}
.reveal.in .part:nth-child(n+4){transition-delay:180ms}
.reveal.done .part:nth-child(n+2){transition-delay:0s}

/* ------------------------------------------------ reduced motion, complete
   Kills every animation, transition and delay on every element, then pins
   each stateful element to its final state. All pages share this file, so
   it covers page-local animation too. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  html.rv .reveal .part{opacity:1;transform:none}
  /* join.html is reached by real invited families from an email. The blanket
     rule above stops its spinner, which would read as broken rather than
     loading, so the spinner keeps a visible resting state. */
  .sp,.spinner{opacity:.55}
}