/* ============================================================================
   WTFU - THE SHARED SHELL  (single source of truth)
   ----------------------------------------------------------------------------
   Every page links this BEFORE its own inline <style>. Inline = page-specific
   layout only. If a value must change, it changes HERE, once - not in 6 files.

   This file replaces the "paste the :root VERBATIM into every page" rule in
   BUILD-GUIDE.md. That rule existed to stop per-page CSS drift; a shared file
   makes drift structurally impossible instead of merely forbidden.

   COLOUR LOCK (Connie, 2026-07-11 mission meeting):
     BLACK + WHITE are primary. GREEN is the single accent. Nothing else.
     Green earns its place in exactly five jobs:
       1. the nav strip        2. primary CTAs        3. the hero swipe
       4. the join capture band    5. "evolution" in the tagline
     Anything else green is a bug. Red / pink / purple / blue-as-accent are
     RETIRED. The only surviving blue is --bolt, and it is hero-only.
   ========================================================================== */

/* ---- FONTS (self-hosted; no Google Fonts) --------------------------------- */
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Bold_Italic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Black.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Kaneda';src:url('../fonts/Kaneda_Gothic_Black_Italic.woff2') format('woff2');font-weight:900;font-style:italic;font-display:swap}
@font-face{font-family:'Garet';src:url('../fonts/Garet-Book.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Garet';src:url('../fonts/Garet-Heavy.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-Italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('../fonts/CourierPrime-BoldItalic.woff2') format('woff2');font-weight:700;font-style:italic;font-display:swap}

/* ---- TOKENS --------------------------------------------------------------- */
:root{
  /* THE GROUND - black + white carry the message (>=85% of every screen) */
  --ink:#000000;        /* true black - hero stage, statement bands, footer */
  --near:#0a0a0a;       /* near-black - type on white, hard shadows          */
  --panel:#111111;      /* raised dark surfaces (map, popups)                */
  --line:#262626;       /* dividers on dark                                  */
  --paper:#ffffff;      /* white content sections                            */
  --off:#f5f5f5;        /* body text on dark / off-white sections            */
  --wash:#f6f6f6;       /* the one grey section tint                         */
  --rule:#e6e6e6;       /* card borders, hairlines on white                  */
  --dim:#bdbdbd;        /* disabled / de-emphasised on dark                  */
  --mute:#6a6a6a;       /* THE KICKER COLOUR on white. 5.4:1 - passes AA.
                           Kickers used to be red/blue/pink/purple per page;
                           that per-page accent system is what read as
                           "monster energy". It is retired. Kickers are grey. */
  --mute-dk:#9a9a9a;    /* the same job on BLACK. 7.5:1. --mute would fail. */
  --body:#333333;       /* body copy on white                                */

  /* FUNCTIONAL, not brand: form errors. A red error message is UI, not colour
     confetti - it survives the lock because nothing else can do its job. */
  --error:#D1000E;

  /* THE ONE ACCENT */
  /* ARTWORK-SAMPLED (2026-07-15): --green-hi and --bolt below are now taken
     from Jane's actual brand files, not from earlier hand-typed values.
     --green-hi was #83FF00 - a value that appears in ZERO of Jane's files; it
     was an invented, more acid green. --bolt was #0924FF, one digit off the
     sampled bolt colour. Both corrected to what the artwork actually contains. */
  --green:#7CE117;      /* identity + action. NEVER text on white (fails AA). */
  --green-hi:#86E518;   /* hover state of green fills, nothing else.
                           artwork-sampled from Jane's files.                  */
  --green-ink:#3D7008;  /* AA-safe green FOR TEXT ON WHITE (5.9:1). Use only
                           where a green word genuinely earns it. Not default. */

  /* HERO-ONLY - the sacred load moment (MOTION-BRIEF). Do not use elsewhere. */
  --bolt:#0923FF;       /* artwork-sampled from Jane's files.                  */

  /* DECK p7 ORIGIN-STORY BLOCK (about.html .paste__turn ONLY).
     Artwork-sampled from the brand deck's page-7 origin-story block.
     NOT --bolt (#0923FF), which is hero-only. These are two genuinely
     different colours - do not collapse them into one token.
     Takes WHITE TEXT ONLY: #fff on #0024FD = 7.86:1 (AA pass).
     Never --mute-dk on it (2.79:1) and never green.
     NOTE FOR CHAD/CONNIE: this reintroduces a blue accent on a page other
     than the hero, which sits in tension with the 2026-07-11 colour lock
     ("green is the single accent; blue-as-accent is retired"). It is here
     because the deck p7 treatment was explicitly specced. If the lock wins,
     deleting this token + the .paste__turn background is the whole revert. */
  --blue-block:#0024FD;

  /* DECK p13 MAGENTA FIELD (index .why__field ONLY). Artwork-sampled from the
     brand deck's page-13 "VOICE IN ACTION" slide, where this wedge is the flat
     ground the halftone megaphone straddles.
     FIELD ONLY - never behind text. White on #E117D3 = 3.99:1, which FAILS AA.
     The device stays legible-safe structurally, not by discipline: .why .wrap
     sits at z-index:2 above it, and both the field and the megaphone are hidden
     <=899px where the copy would reflow across them. Artwork may touch this
     colour; a glyph never may.
     NOTE FOR CHAD/CONNIE: like --blue-block above, this reintroduces a non-green
     accent and sits in tension with the 2026-07-11 colour lock ("green is the
     single accent"). It is here because Chad specced the deck p13 device
     directly. If the lock wins, deleting this token + .why__field is the whole
     revert. */
  --pink-field:#E117D3;

  /* TYPE RAMP (locked - every size maps to a token, no in-between values) */
  --t-meta:12px;
  --t-small:14px;
  --t-body:clamp(16px,1.2vw,17px);
  --t-lead:clamp(17px,1.5vw,21px);
  --t-card-sm:clamp(20px,1.9vw,26px);
  --t-card:clamp(24px,2.3vw,32px);
  --t-display-sm:clamp(29px,2.9vw,40px);
  --t-display:clamp(35px,3.7vw,52px);
  --t-h1:clamp(41px,5vw,64px);
  --t-mega:clamp(34px,5.8vw,80px);

  /* SPACING - calm-premium rhythm (2026-07-14): the standard section band is
     raised 96 -> 120 desktop for more whitespace and quiet confidence (Connie's
     "more whitespace + calm" / Aesop-Apple restraint direction). Drops to 72 on
     mobile via the responsive shell. Both 8-aligned (120 = 8x15, 72 = 8x9).
     One token, referenced by every standard section's padding - never hand-tune
     a one-off. Page-hero bands (80/72) and minor statement bands (64) are a
     separate, deliberate rhythm and keep their own values. */
  --section-pad:120px;

  --maxw:1180px;
}

/* ---- BASE ----------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:hidden;scroll-padding-top:75px}
body{font-family:'Garet',system-ui,Arial,sans-serif;color:var(--off);background:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
section{position:relative}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.mono{font-family:"Courier Prime",monospace}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* focus: dark ring on light ground, green ring on dark ground */
a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--near);outline-offset:3px;border-radius:2px}
footer a:focus-visible,.hero .cta-row .btn:focus-visible{outline-color:var(--green)}

/* ---- SECTION TITLE (.deckbar) - a headline, never a box ------------------- */
/* Connie: green title boxes read as buttons. It is type, full stop. */
/* margin-bottom 40px = the calm-premium gap between a section heading and its
   content (raised from 28; more air between title and body per the restraint pass) */
.deckbar{display:block;background:none;box-shadow:none;padding:0;border-radius:0;margin-bottom:40px;max-width:100%}
.deckbar .dk{display:block;font-family:"Courier Prime",monospace;font-size:var(--t-meta);letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--mute);margin-bottom:10px}
.deckbar h2,.deckbar h1{font-family:'Kaneda',Impact,sans-serif;font-weight:900;font-style:italic;text-transform:uppercase;font-size:var(--t-h1);line-height:.92;letter-spacing:.005em;color:var(--near);margin:0;text-shadow:none}
.lead{font-size:var(--t-lead);font-weight:400;color:var(--body);max-width:640px;margin-bottom:40px}

/* the one kicker rule, everywhere a kicker appears */
.dk,.ev-k,.fk,.cc-k,.way-t,.ways-k,.lbl,.fcol h4,.sn,.ek,.net,.kick{font-family:"Courier Prime",monospace;font-weight:700;font-size:var(--t-meta);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* ---- ANNOUNCEMENT TICKER - above the sticky nav on every page --------------
   v2 (2026-07-17, Paul via Chad's session): the static strip is now a
   continuous marquee ticker - the message train runs across in a slow,
   readable, newsy loop. Still position:static ON PURPOSE - it scrolls away
   and the white nav stays sticky beneath it; the sacred hero height calc is
   untouched. Still the whole strip = ONE <a> into the join capture band.
   MECHANICS: two identical .tk-seq copies inside one flex .tk-track,
   CSS-animated translateX(-50%) - seamless loop by construction, zero JS,
   transform-only (compositor). 75s per loop (one seq width ~ 1300px, ~17px/s).
   Pauses on hover AND on keyboard focus (animation-play-state).
   A11Y: the moving track is aria-hidden; .tk-static is the visually-hidden
   always-on copy for AT. prefers-reduced-motion = the marquee is display:none
   and the static copy becomes the visible line (no motion at all). Type never
   drops below --t-small. White on #0024FD = 7.86:1 (AA); white inset focus
   ring as before.
   FLAGS - NEEDS CONNIE (carried + new, see VOICE.md):
   (a) blue as site chrome on all 5 pages - pre-existing tension with the 7/11
       colour lock. Chad's explicit call; needs Connie's ratification.
   (b) messages are pool lines + approved event facts; the third message
       ("Next wake up: Elevate Legacy Festival · Sat Aug 8 · DTLA") is a NEW
       composition of approved facts (Paul via Chad's session) - flagged. */
.announce{display:block;background:var(--blue-block);color:#fff;font-family:'Garet',system-ui,Arial,sans-serif;font-weight:800;font-size:var(--t-small);line-height:1.3;letter-spacing:.02em}
.announce .tk-view{display:flex;align-items:center;overflow:hidden;min-height:44px}
.announce .tk-track{display:flex;flex:none;width:max-content;animation:tk-scroll 75s linear infinite}
.announce .tk-seq{display:block;flex:none;white-space:nowrap;padding:10px 0}
.announce .bang{display:inline-block;padding:0 1.6em}  /* the !! separator glyph */
.announce .tk-cta{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px}
/* the mission-line chip (2026-07-17, Paul via Chad's session). Paul asked for
   the line HOT PINK on the ticker; --pink-field on the blue is ~2:1 - a hard
   AA fail - so the line rides in a BLACK chip: --pink-field on --ink = 5.26:1
   (AA pass, measured). The chip is the only non-blue segment of the train. */
.announce .tk-chip{display:inline-block;background:var(--ink);color:var(--pink-field);border-radius:3px;padding:3px 12px}
.announce:hover{background:#0020e2}
.announce:hover .tk-track,.announce:focus-visible .tk-track{animation-play-state:paused}
.announce:focus-visible{outline:3px solid #fff;outline-offset:-4px;border-radius:0}
.announce .tk-static{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes tk-scroll{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){
  .announce .tk-view{display:none}
  .announce .tk-static{position:static;width:auto;height:auto;margin:0;padding:10px 16px;overflow:visible;clip:auto;white-space:normal;display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center}
}

/* ---- NAV - white with a green accent line --------------------------------- */
/* WHITE NAV + GREEN LINE (Connie, 2026-07-16 review: "not mad at the white with
   the green" / likes "the green line"). Supersedes the 7/17 all-green nav (which
   was Chad's in-call experiment "I've asked it to make it green" - Connie kept
   the white). Green earns its nav-accent job as a 3px underline strip, not a
   fill: black lockup + near-black links on white, green marks the bar. Current-
   page underline is green (its sanctioned link-underline job). */
.nav{position:sticky;top:0;z-index:600;background:var(--paper);border-bottom:3px solid var(--green);box-shadow:0 2px 10px rgba(0,0,0,.05)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.logo{display:inline-flex;align-items:center}
.nav .logo img{height:32px;width:auto;display:block}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{font-size:var(--t-small);font-weight:800;letter-spacing:.02em;color:var(--near);text-decoration:none}
.navlinks a:hover{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:6px}
.navlinks a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:3px;text-underline-offset:6px}
.menu-toggle{display:none;background:none;border:0;color:var(--near);font-size:24px;cursor:pointer;line-height:1;padding:10px 12px;min-width:44px;min-height:44px}
.menu-toggle .hb{display:block;width:22px;height:3px;background:var(--near);margin:4px auto;border-radius:1px}

/* ---- BUTTONS -------------------------------------------------------------- */
/* Green is ALWAYS the primary action. Never dilute it with a second colour. */
.btn{display:inline-block;font-weight:800;font-size:clamp(15px,1.25vw,18px);letter-spacing:.04em;text-transform:uppercase;background:var(--green);color:var(--ink);padding:16px 30px;border-radius:4px;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease;cursor:pointer;border:0;font-family:inherit;min-height:48px}
.btn:hover,.btn:focus-visible{background:var(--green-hi);transform:translateY(-3px) scale(1.04);box-shadow:0 14px 28px rgba(124,225,23,.28)}
.btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.btn:disabled{opacity:.55;cursor:wait;transform:none;box-shadow:none}
.btn.page{padding:18px 34px}
.btn .arr{display:inline-block;transition:transform .18s ease;margin-left:6px}
.btn:hover .arr{transform:translateX(6px)}

/* secondary: black on light grounds */
.btn.dark{background:var(--ink);color:var(--paper)}
.btn.dark:hover,.btn.dark:focus-visible{background:#2a2a2a;color:var(--paper);box-shadow:0 14px 28px rgba(0,0,0,.4)}
/* secondary: white on dark grounds (was .btn.blue - blue is retired) */
.btn.light{background:var(--paper);color:var(--near)}
.btn.light:hover,.btn.light:focus-visible{background:var(--off);box-shadow:0 14px 28px rgba(255,255,255,.22)}
/* tertiary: outline, on white only, sparingly */
.btn.ghost{background:transparent;color:var(--near);border:1.5px solid var(--near)}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--near);color:var(--paper);box-shadow:0 14px 28px rgba(0,0,0,.18)}
/* tertiary on DARK grounds (index .why "Learn More"): the ghost idiom adapted -
   white 1.5px outline, white Garet 800 label, SUBTLE fill on hover (a low-alpha
   white wash, not the light-ground full invert - a hard white fill on black
   would out-shout the green CTAs, which ghost may never do). Focus ring is
   green per the shell's dark-ground convention. */
.btn.ghost.inv{background:transparent;color:var(--paper);border:1.5px solid var(--paper)}
.btn.ghost.inv:hover,.btn.ghost.inv:focus-visible{background:rgba(255,255,255,.14);color:var(--paper);box-shadow:0 14px 28px rgba(255,255,255,.10)}
.btn.ghost.inv:focus-visible{outline-color:var(--green)}

/* ---- CARD ----------------------------------------------------------------- */
/* Top bars were a green/pink/blue trio. Under the colour lock they are black -
   the eye should be pulled by the green CTA, not by three competing card tops. */
.card{background:var(--paper);border:1px solid var(--rule);border-top:5px solid var(--near);border-radius:8px;box-shadow:0 10px 30px rgba(0,0,0,.08)}

/* ---- PHOTO BAND ----------------------------------------------------------- */
/* Full-bleed content photography in FULL WARM COLOUR (Connie 7/11: happy people
   in colour is the core fix). A gentle warm grade seats the colour intentionally
   in the B&W system; a thin top+bottom edge scrim seats the band into the dark
   page without darkening the faces. A short approved-pool caption ties each
   frame to WTFU. Caption uses --mute-dk (not --mute) to pass AA on the dark
   band - --mute is the white-ground kicker colour and fails here. */
.photoband{position:relative;width:100%;overflow:hidden;background:var(--near)}
.photoband img{display:block;width:100%;height:clamp(280px,36vw,440px);object-fit:cover;filter:saturate(1.05) contrast(1.02) brightness(1.02)}
.photoband.tall img{height:clamp(300px,42vw,500px)}
/* thin black top+bottom EDGE only (.28) - keeps the colour reading intentional */
.photoband::after{content:"";position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,0) 18%,rgba(0,0,0,0) 80%,rgba(0,0,0,.28) 100%)}
.photoband .pb-cap{position:relative;z-index:1;background:var(--near);font-family:'Garet',system-ui,Arial,sans-serif;font-size:var(--t-meta);letter-spacing:.02em;line-height:1.4;color:var(--mute-dk);padding:14px 28px 16px}

/* ---- FORMS ---------------------------------------------------------------- */
/* Wiring is byte-identical across pages - never refactor the POST/honeypot. */
.form-ok{display:none;background:rgba(124,225,23,.15);border:1px solid var(--green);color:var(--near);border-radius:5px;padding:14px 16px;font-size:var(--t-small);font-weight:800;max-width:460px;transform-origin:top;animation:popbox .24s cubic-bezier(.2,0,0,1)}
@keyframes popbox{from{transform:scaleY(.4);opacity:0}}

/* ---- FOOTER --------------------------------------------------------------- */
/* BLACK FOOTER, WHITE TEXT (Connie, 2026-07-16 review: "revert it back to the
   black" + "we need a bigger contrast so all the small text needs to be white
   instead of this charcoal gray"). Reverses the 7/17 green footer. Wordmark
   texture restored behind a dark scrim (it read on black); green lockup back
   in the footer; ALL small text now white #fff, not the old charcoal. */
/* padding-bottom raised 32 -> 92 so the fixed floating Join button / social
   stack (bottom corners, ~66px zone) never sit over the footer's credit line */
footer{background:var(--ink);color:var(--paper);padding:56px 0 92px;border-top:1px solid var(--line);position:relative;overflow:hidden}
footer::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.62),rgba(0,0,0,.62)),url("../wordmark-texture.webp") center/cover no-repeat;opacity:1;pointer-events:none}
footer .wrap{position:relative;z-index:2}
.fgrid{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;margin-bottom:36px}
footer .logo img{height:44px;width:auto;display:block}
.fcol h4{color:#fff;margin-bottom:12px}
.fcol a,.fcol p{display:block;font-size:var(--t-small);color:#fff;margin-bottom:7px}
.fcol a:hover{color:var(--green)}
.fbase{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:var(--t-meta);color:#fff}

/* ---- FLOATING SITE-WIDE COMPONENTS (added 2026-07-18, Connie 7/16 IA) ------
   Two fixed elements present on every remaining page. Both sit at z-index:500,
   BELOW the sticky nav (z-index:600) so an open mobile menu is never covered.
   The lower-right Join CTA is modeled on the AquaCat floating button and reuses
   the shell .btn idiom (green fill / --ink text). The right-edge social stack
   replaces the retired socials page. Positioned to never collide: socials ride
   mid-right (vertically centred), the Join CTA sits in the bottom-right corner;
   on small screens they split to opposite bottom corners. ---------------------*/
.float-join{position:fixed;right:20px;bottom:20px;z-index:500;box-shadow:0 10px 26px rgba(0,0,0,.28);white-space:nowrap}
.float-join.btn{padding:14px 22px}
.float-social{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:500;display:flex;flex-direction:column;gap:8px}
.float-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--near);color:var(--paper);border-radius:10px 0 0 10px;box-shadow:-3px 4px 14px rgba(0,0,0,.22);transition:transform .16s ease,background .16s ease,color .16s ease}
.float-social a:hover,.float-social a:focus-visible{background:var(--green);color:var(--ink);transform:translateX(-3px)}
.float-social svg{width:22px;height:22px;display:block;fill:currentColor}
@media(max-width:520px){
  .float-join{right:16px;bottom:16px;padding:12px 16px;font-size:14px}
  /* opposite corner from the Join CTA - clear of centre-screen content */
  .float-social{top:auto;bottom:16px;left:16px;right:auto;transform:none;flex-direction:row;gap:10px}
  .float-social a{width:44px;height:44px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .float-join.btn,.float-social a{transition:none}
  .float-join.btn:hover,.float-join.btn:focus-visible,.float-social a:hover,.float-social a:focus-visible{transform:none}
}

/* ---- REVEAL SYSTEM (progressive enhancement; content visible by default) --- */
.reveal{opacity:1;transform:none}
html.js .reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}
html.js .stagger.reveal>*{opacity:0;transition:opacity .55s ease}
html.js .stagger.reveal.in>*{opacity:1}
html.js .stagger.reveal.in>*:nth-child(2){transition-delay:.08s}
html.js .stagger.reveal.in>*:nth-child(3){transition-delay:.16s}
html.js .stagger.reveal.in>*:nth-child(4){transition-delay:.24s}
html.js .stagger.reveal.in>*:nth-child(n+5){transition-delay:.3s}

/* ---- RESPONSIVE SHELL ----------------------------------------------------- */
@media(max-width:860px){
  /* calm-premium rhythm: section bands relax to 72 on mobile (8-aligned) */
  :root{--section-pad:72px}
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--paper);flex-direction:column;gap:0;padding:0;border-bottom:3px solid var(--green);box-shadow:0 12px 24px rgba(0,0,0,.10);display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:15px 28px;width:100%}
  .navlinks a + a{border-top:1px solid var(--rule)}
  .menu-toggle{display:block}
}

/* ---- REDUCED MOTION - nothing autoplays that cannot be stilled ------------ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .reveal{opacity:1;transform:none;transition:none}
  html.js .stagger.reveal>*{opacity:1;transition:none}
  .form-ok{animation:none}
}