/* ============================================================================
   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 */
  --green:#7CE117;      /* identity + action. NEVER text on white (fails AA). */
  --green-hi:#83FF00;   /* hover state of green fills, nothing else.          */
  --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:#0924FF;

  /* 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(26px,2.9vw,40px);
  --t-display:clamp(30px,3.7vw,52px);
  --t-h1:clamp(30px,5vw,64px);
  --t-mega:clamp(34px,5.8vw,80px);

  --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,.statflash a:focus-visible,.statflash button: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. */
.deckbar{display:block;background:none;box-shadow:none;padding:0;border-radius:0;margin-bottom:28px;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)}

/* ---- NAV - the deck's green strip ----------------------------------------- */
.nav{position:sticky;top:0;z-index:600;background:var(--green);border-bottom:3px solid var(--ink)}
.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:13px;font-weight:800;letter-spacing:.02em;color:var(--near)}
.navlinks a:hover,.navlinks a[aria-current="page"]{color:var(--ink);text-decoration:underline;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)}

/* ---- 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)}

/* ---- 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 --------------------------------------------------------------- */
footer{background:var(--ink);color:var(--paper);padding:56px 0 32px;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:70px;width:auto;display:block}
.fcol h4{color:#8a8a8a;margin-bottom:12px}
.fcol a,.fcol p{display:block;font-size:var(--t-small);color:#d4d4d4;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:#8a8a8a}

/* ---- 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){
  .navlinks{position:absolute;top:100%;left:0;right:0;background:var(--green);flex-direction:column;gap:0;padding:8px 0;border-bottom:1px solid var(--line);display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:13px 28px;width:100%}
  .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}
}