/* ============================================================================
   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.

   OFFICIAL PALETTE LANDED 2026-07-21 (Connie's "WTFU Colors and Fonts" sheet,
   Drive > WTFU STYLE GUIDE, owner connie@wholeclarity.com). This is now the
   colour source of truth and it SUPERSEDES the hexes in AGENT-BRIEF section 2
   rule 4, three of which were wrong:
     black #000000 · white #ffffff · green #7ce117 · blue #0024fd ·
     yellow #fff200 · purple #9c49d1 · pink #f63eda · red #fb0000
   Corrected here: purple #A323FF -> #9c49d1, pink #E117D3 -> #f63eda.
   Green and blue already matched. Yellow and red are new tokens.
   The lock above still governs HOW MUCH colour appears; the sheet governs
   WHICH hex a sanctioned accent uses. They are not in conflict.
   ========================================================================== */

/* ---- 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.
     DELIBERATELY NOT the official brand red --red (#fb0000): error text is
     reading text on white and needs 4.5:1. #D1000E measures 5.65:1; #fb0000
     measures only 4.12:1 and would FAIL. The brand red does not get this 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. */
  /* TONAL GREENS (Connie, 2026-07-22): the homepage "Three Ways" pillars are
     three shades of one green, not three different colours - the section gets
     more solid as you read it. These are the brand green composited over BLACK
     at 50% and 75% opacity, baked to solid hex so they stay identical on any
     ground (the pillars sit on the light --wash section, so a live rgba() over
     black is not available). --green-50 is dark enough to take WHITE text
     (5.9:1); --green-75 and full --green take BLACK text (7.15:1 / 12.6:1). */
  /* CORRECTED 2026-07-22 (Chad): these were baked over BLACK, which produced
     DARKER greens - the opposite of what was asked. Connie/Chad want literal
     opacity of the brand green: "a lighter green to... a full opacity green",
     50% -> 75% -> 100%. As true rgba they composite over the light --wash
     section, so the row reads light -> full green as you go. All three grounds
     are light, so all three take BLACK text. */
  --green-50:rgba(124,225,23,.6);   /* brand green at 60% opacity (Chad raised
                                       it from 50% - 50 read too washed out
                                       against the 75% neighbour). BLACK text. */
  --green-75:rgba(124,225,23,.75);  /* brand green at 75% opacity. BLACK text. */

  /* 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 the official #f63eda = 3.17:1,
     which FAILS AA (it was 3.99:1 on the old #E117D3 and failed then too).
     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. */
  /* OFFICIAL PINK 2026-07-21: corrected #E117D3 -> #f63eda per Connie's
     "WTFU Colors and Fonts" sheet (Drive, WTFU STYLE GUIDE). The official pink
     is LIGHTER, so white-on-pink drops 3.99 -> 3.17:1 - it was already banned
     as a text ground and stays banned. Pink-as-INK improves or holds
     everywhere: on white 3.17:1 (clears the 3:1 large-text floor - see
     .hc-voice / .hc-title on index) and on black 6.62:1 (was 5.27:1). */
  --pink-field:#f63eda;

  /* OFFICIAL PURPLE (Connie's colour sheet, 2026-07-21): #9c49d1.
     PROMOTED TO :root. It used to be declared three times - .about on
     index/hero-original (#A323FF), :root on about.html (#A323FF) and #event on
     events.html (#A423FF) - which is exactly the per-page drift this shell
     exists to make impossible. One token, one value, four pages.
     The official purple is DARKER and less saturated than the #A323FF we had.
     Measured: 3.86:1 on #111, 4.90:1 on #fff, 4.53:1 on #f6f6f6, 2.58:1 on
     #333 - which is why index/hero-original's MID pillar ground moved to
     --line #262626, where it measures 3.09:1. See the .pil notes there. */
  --purple-cat:#9c49d1;

  /* OFFICIAL YELLOW + RED (Connie's colour sheet, 2026-07-21). Both are new to
     the build; neither existed before, so no treatment could use them.
     --yellow is the deck-slide-27 "important information" block: a small box
     with black type and a hard black offset shadow. Connie 19 Jul: "any
     important information we can do that yellow box thing", and the reference
     designer "used yellow pretty sparingly" - so it has exactly ONE job on
     this site (the one real event's date + running time) and a second use
     needs a ruling. Yellow is near-white in luminance (0.848), so black-family
     ink only: --near on --yellow = 16.9:1, --body = 10.8:1; white on yellow is
     1.17:1 and is BANNED. A yellow block on a white ground also has only a
     1.17:1 EDGE, which is why the block is never drawn without its hard black
     offset shadow - the shadow, not the fill, is what gives it a boundary.
     --red is DECLARED but deliberately UNUSED - recorded here so the value
     lives in one place. See the --error note above for why it does not take
     the error job. Do not spend it on decoration; it needs a real moment. */
  --yellow:#fff200;
  --red:#fb0000;

  /* 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-statement is NOT a new size - it is the --t-display-sm STEP (same 40px
     desktop cap, deliberately identical) with a body-safe mobile floor.
     --t-display-sm's 29px floor is tuned for a SHORT display heading; a
     PARAGRAPH set at 29px inside a 279px phone column measures ~15 characters
     per line, which is unreadable. Dropping the floor to 22px keeps a sane
     measure at every width while the desktop end still lands on the ramp.
     Used by index/hero-original .pil__b (Three Ways to Wake Up body copy). */
  --t-statement:clamp(22px,3.05vw,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)}
/* The fixed floats sit over the black page body, so the default near-black ring
   measured 1.00:1 against it - a keyboard user tabbing to the site's primary
   email-capture CTA could not see where they were, and unlike .btn/.acc__hd
   these carry no compensating colour change on focus. Added 2026-07-21.
   Also covers the Leaflet popup link on the events map (1.05:1 on #111). */
.float-join:focus-visible,.float-social a:focus-visible,.leaflet-popup-content a:focus-visible{outline-color:var(--paper)}

/* ---- 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,.way-t,.ways-k,.lbl,.fcol h4,.kick{font-family:"Courier Prime",monospace;font-weight:700;font-size:var(--t-meta);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}

/* ---- 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}
/* TAP TARGETS IN THE NAV (2026-07-22 responsive pass). Measured: the lockup
   link was 167x32 and each nav link 45-64 x 22 - both under the 44px touch
   floor, in the one bar that is on every page at every width. The bar is 72px
   tall and both were vertically centred inside it, so raising each to a 44px
   min-height only grows the HIT BOX; nothing moves on screen. */
.logo{display:inline-flex;align-items:center;min-height:44px}
.nav .logo img{height:32px;width:auto;display:block}
.navlinks{display:flex;gap:26px;align-items:center}
.navlinks a{display:inline-flex;align-items:center;min-height:44px;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)}

/* ---- THE YELLOW BLOCK (.ev-when) - deck slide 27 -------------------------- */
/* Connie, 19 Jul review: "I'm talking about slide 27... like that yellow, with
   those kind of like little boxes, like especially for some really important
   information" / "any important information we can do that yellow box thing" -
   qualified in the same breath with the reference designer "used yellow pretty
   sparingly". So this is ONE device with ONE job, not a utility class:
   THE ONE REAL EVENT'S DATE AND RUNNING TIME. It wraps the two .ev-d lines on
   the event card, which renders on index, hero-original and events.html - the
   same component in the same three places, not three different yellow ideas.
   Adding a second yellow moment is a Connie ruling, not a designer's call.

   WHY THIS INFORMATION: Aug 8 LA attendance is conversion goal #1 (AGENT-BRIEF
   s1), and the date/time is the only fact on the site a visitor must leave
   with. It was previously indistinguishable from the address note below it.
   Deliberately NOT yellow-blocked: the .why stat SOURCE citations. A citation
   is subordinate to its fact by design (--mute-dk, --t-meta) and blocking it
   would put the loudest colour on the quietest line - an inverted hierarchy.
   The stats also cross-fade in a stacked grid, so a hugging block would jump
   size between the three facts.

   IT IS A BOX, NOT A BANNER: inline-block so it hugs the longest line ("little
   boxes"). Full-width would read as a section banner and out-shout the card's
   own Kaneda title, which is the card's focal point.
   THE SHADOW IS STRUCTURAL, NOT STYLE: the card ground is white and yellow's
   edge against white is 1.17:1 - effectively invisible. The hard offset shadow
   (the deck's own print device, already used on #map) is what gives the block
   a boundary. Never render this block without it.
   INK: --near only. 16.9:1 on yellow. White on yellow is 1.17:1 and banned.
   TIGHT, NOT ROOMY: first render used 12/16 padding and the lines' own 8-12px
   margins, and the result was a PANEL - it took half the card, out-shouted the
   Kaneda title above it and competed with the green Buy Tickets button beside
   it, which inverts the card's hierarchy (title leads, green CTA is the action,
   the date supports). Padding drops to 10/14, the leading tightens to 1.32 and
   the two lines close to a 4px beat, so it reads as a stamped label. */
.ev-when{display:inline-block;background:var(--yellow);color:var(--near);padding:10px 14px;margin-top:18px;line-height:1.32;box-shadow:5px 5px 0 var(--near)}
.ev-when .ev-d{color:var(--near);margin-top:0}
.ev-when .ev-d + .ev-d{margin-top:4px}
@media(max-width:860px){.ev-when{padding:9px 12px;box-shadow:4px 4px 0 var(--near)}}

/* ---- 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)}
/* FAILURE MUST NOT LOOK LIKE SUCCESS (2026-07-23, UX review). .form-ok is the
   only surface both branches write to, so a failed submission was rendering in
   a GREEN box with a GREEN border and role="status" - on a site whose entire
   success language is green. A glancing visitor read "done" and left; screen
   readers announced it politely instead of assertively. This modifier flips the
   same box to the error idiom without needing a second element. --error
   (#D1000E, 5.65:1) is the AA-safe red; brand --red must not take this job. */
.form-ok--err{background:rgba(209,0,14,.10);border-color:var(--error);color:#b00010}
@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}
/* TAP TARGETS (2026-07-18): the stacked footer link lists are ~14px text with
   ~7px gaps - under the 44px touch floor, and the adjacent social handles are
   the tightest. On mobile each stacked link becomes a full 44px-tall target. */
/* BREAKPOINT RAISED 860 -> 1023 (2026-07-22 responsive pass): 860 left the
   tablet-landscape band (861-1023, iPad landscape included) on the 22px desktop
   footer links even though it is a TOUCH context. 1023 is the same line the
   floating Join/social rail already switches on, so the two now agree on where
   "touch" ends. Above it the links keep their desktop rhythm and clear WCAG 2.2
   SC 2.5.8 on the spacing exception (22px tall on a 29px pitch). */
@media(max-width:1023px){
  .fcol a{display:flex;align-items:center;min-height:44px}
}

/* ---- 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. ---------------------*/
/* Join button in the brand display face, italic (Connie 19 Jul: "italic, correct brand font").
   THE ONE DELIBERATE BLUE POP (Connie 22 Jul): the floating Join CTA is now
   --blue-block with WHITE text (7.86:1, AA). It is the single blue accent on the
   site, so it reads as intentional rather than as a scattered pop. */
/* RED DROP SHADOW (Connie, 2026-07-22: "adding red"): the button stays blue,
   white text; its shadow is the brand red (--red #fb0000). Red earns a real
   moment here as a shadow, not as reading text - no AA burden. */
.float-join{position:fixed;right:20px;bottom:20px;z-index:500;background:var(--blue-block);color:var(--paper);box-shadow:0 10px 26px rgba(251,0,0,.5);white-space:nowrap;font-family:'Kaneda',Impact,sans-serif;font-style:italic;font-weight:900;letter-spacing:.02em;transition:opacity .28s ease,visibility .28s ease,transform .18s cubic-bezier(.34,1.56,.64,1),background .2s ease,box-shadow .2s ease}
.float-join.btn{padding:14px 22px}
/* keep the blue on hover/focus (the shell .btn:hover would otherwise turn it
   green); the .btn lift transform still applies. */
.float-join.btn:hover,.float-join.btn:focus-visible{background:#123bff;color:var(--paper);box-shadow:0 14px 28px rgba(251,0,0,.6)}
/* HIDE-ON-JOIN (2026-07-18, goal A): index.html toggles .is-hidden whenever the
   #join capture band is in view, so the floating CTA never sits over the form's
   "I'm In" button. SMOOTHED 2026-07-22: the show/hide now fades over .28s (the
   transition on .float-join above) instead of snapping, and the scroll handler
   is rAF-throttled on-page - together they stop the visible flicker/"detach"
   the hard geometric toggle produced when the rect grazed a CTA. reduced-motion
   drops the transition (block below), so it stays instant + motion-safe there. */
.float-join.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
/* The right-edge vertical social rail only rides mid-screen at >=1024px, where
   the page has room beside the 1180px content column. Below that it drops to the
   bottom-left corner ROW (the block below) so it can never overlap right-column
   content at tablet widths. */
/* MOVED 2026-07-18 (Connie, room note): the social icons now sit just ABOVE
   the Join button at the bottom-right, not on the mid-right edge - closer to
   the Join CTA. They hide with the Join button when the #join form is in view. */
.float-social{position:fixed;right:20px;bottom:84px;top:auto;z-index:500;display:flex;flex-direction:column;gap:8px;transition:opacity .28s ease,visibility .28s ease}
.float-social.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.float-social a{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:var(--near);color:var(--paper);border-radius:10px;box-shadow:0 6px 16px rgba(0,0,0,.24);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:translateY(-3px)}
.float-social svg{width:22px;height:22px;display:block;fill:currentColor}
@media(max-width:1023px){
  .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{right:16px;bottom:70px;left:auto;top:auto;transform:none;flex-direction:column;gap:8px}
  .float-social a{width:44px;height:44px;border-radius:10px}
}
@media (prefers-reduced-motion:reduce){
  .float-join,.float-social,.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}
}