/* ===========================================================================
   WCAT : design tokens (locked from assets/avatar.png + assets/banner.png)
   ---------------------------------------------------------------------------
   Palette   : void        #0A0B10  (night sky behind the dealership lot)
               navy        #171A2B  (suit navy, sampled rgb(42,46,65) darkened)
               navy-deep   #0D0F1A
               red         #9A1F27  (avatar backdrop red, sampled rgb(151,30,38))
               red-bright  #D4271F  (tie / string-light warm red, sampled rgb(212,39,31))
               red-deep    #5C1013
               gold        #E9C74E  (hair + string lights, sampled rgb(233,199,78))
               gold-deep   #B98A2A
               gold-bright #F6D77A
               cream       #F3E6C4  (campaign-pin card stock)
               ink         #171208  (text on cream)
               white       #FBF6EA  (headline ink on dark)
   Type      : Anton 400        - display: masthead name, WINS tally, CHEER label
               Oswald 400 (var) - UI/labels/badges/nav chrome
               Space Mono 400/700 - CA readout, canary, ticks, flavor lines
               (self-hosted woff2 in assets/fonts, no runtime remote fetch)
   Spacing   : 4 . 8 . 12 . 16 . 24 . 28 . 32 . 48 . 64 . 96 (px)
   Radius    : 0 on plaques/panels (poster cut), 50% only on the campaign pin
               and the CHEER rosette button, since both are literally round
               objects in the real world, not a default-rounded-button habit.
   Motion    : "rally surge" cubic-bezier(.34,1.56,.64,1) for the puppet bounce
               and pin-ring pulse; cubic-bezier(.16,.84,.32,1) for the meter
               fill/reset loop. prefers-reduced-motion collapses all of it.
   =========================================================================== */

@font-face{font-family:"Anton";src:url("assets/fonts/anton-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Oswald";src:url("assets/fonts/oswald-400.woff2") format("woff2");font-weight:200 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("assets/fonts/spacemono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:"Space Mono";src:url("assets/fonts/spacemono-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;}

:root{
  --void:#0A0B10;
  --navy:#171A2B;
  --navy-deep:#0D0F1A;
  --navy-line:#2C3149;
  --red:#9A1F27;
  --red-bright:#D4271F;
  --red-deep:#5C1013;
  --gold:#E9C74E;
  --gold-deep:#B98A2A;
  --gold-bright:#F6D77A;
  --cream:#F3E6C4;
  --cream-dim:rgba(243,230,196,.62);
  --ink:#171208;
  --white:#FBF6EA;

  --font-display:"Anton",Impact,"Arial Narrow Bold",sans-serif;
  --font-ui:"Oswald",-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Space Mono","SFMono-Regular",Consolas,monospace;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:28px; --sp-7:32px; --sp-8:48px; --sp-9:64px; --sp-10:96px;

  --ease-surge:cubic-bezier(.34,1.56,.64,1);
  --ease-fill:cubic-bezier(.16,.84,.32,1);
  --dur-fill:450ms;
}

@media (prefers-reduced-motion:reduce){
  :root{ --dur-fill:1ms; }
}

*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;}
body{
  background:var(--void);
  color:var(--white);
  font-family:var(--font-ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

#boot-error-banner{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:#B01717; color:#fff; font-family:var(--font-mono);
  font-size:13px; padding:10px 14px; text-align:center;
}

/* ---------------------------------------------------------------- STAGE */
.stage{
  position:relative;
  width:100vw; height:100vh; height:100dvh;
  overflow:hidden;
}

.bunting{
  position:absolute; top:0; left:0; right:0; height:64px; z-index:3;
  pointer-events:none;
}
.bunting::before{
  content:""; position:absolute; top:14px; left:0; right:0; height:2px;
  background:var(--gold-deep);
}
.bunting-row{ display:flex; height:100%; padding-top:14px; }
.flag{
  flex:1 1 auto; min-width:22px; max-width:46px; height:30px; margin-top:0;
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.flag:nth-child(3n+1){ background:var(--red); }
.flag:nth-child(3n+2){ background:var(--navy); border-left:1px solid var(--gold-deep); border-right:1px solid var(--gold-deep); }
.flag:nth-child(3n+3){ background:var(--gold-deep); }

.backdrop{ position:absolute; inset:0; z-index:0; cursor:pointer; }
.backdrop:focus-visible{ outline:3px solid var(--gold); outline-offset:-3px; }
.backdrop-photo{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:saturate(1.1) contrast(1.04) brightness(.82) blur(3px);
  transform:scale(1.06);
}
.backdrop.bounce .backdrop-photo{ animation:heroBounce .5s var(--ease-surge); }
@keyframes heroBounce{
  0%{ transform:scale(1.06) translateY(0); }
  32%{ transform:scale(1.11,1.01) translateY(-7px); }
  58%{ transform:scale(1.02,1.09) translateY(4px); }
  100%{ transform:scale(1.06) translateY(0); }
}
.backdrop-scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,11,16,.72) 0%, rgba(10,11,16,.38) 22%, rgba(10,11,16,.5) 60%, rgba(10,11,16,.95) 100%);
}
.spotlight{
  position:absolute; left:50%; top:2%; width:72vw; height:72vw; max-width:820px; max-height:820px;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(233,199,78,.24), rgba(233,199,78,0) 62%);
  pointer-events:none;
}

/* ---------------------------------------------------------------- MASTHEAD */
.masthead{ position:absolute; top:76px; left:28px; z-index:3; max-width:46vw; }
.masthead-kicker{ margin:0 0 2px; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.masthead-name{
  margin:0; font-family:var(--font-display); font-weight:400;
  font-size:clamp(34px,5.4vw,66px); line-height:.88; letter-spacing:.01em;
  color:var(--white); text-shadow:3px 3px 0 var(--red-deep);
}
.masthead-tag{ margin:6px 0 0; font-family:var(--font-mono); font-size:12px; color:var(--cream-dim); }

/* ---------------------------------------------------------------- TALLY */
.tally-board{
  position:absolute; top:76px; right:28px; z-index:3; text-align:right;
  background:rgba(10,11,16,.58); border:2px solid var(--gold-deep);
  padding:10px 18px 12px; max-width:260px;
}
.tally-label{ display:block; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.tally-number{
  display:block; font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,4.2vw,52px); line-height:1.05; color:var(--white);
  font-variant-numeric:tabular-nums;
}
.tally-flavor{ display:block; font-family:var(--font-mono); font-size:10.5px; color:var(--cream-dim); margin-top:4px; }

/* ---------------------------------------------------------------- APPLAUSE */
.applause{
  position:absolute; left:26px; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.applause-label{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold);
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.applause-track{
  position:relative; width:24px; height:210px;
  background:rgba(10,11,16,.62); border:2px solid var(--navy-line); overflow:hidden;
}
.applause-fill{
  position:absolute; left:0; right:0; bottom:0;
  background:linear-gradient(180deg, var(--gold-bright), var(--red-bright));
  transition:height var(--dur-fill) var(--ease-fill);
}
.applause-tick{ position:absolute; left:0; right:0; height:1px; background:rgba(10,11,16,.55); }
.applause-pct{ font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--gold); }

/* ---------------------------------------------------------------- PLATFORM */
.platform{
  position:absolute; left:50%; bottom:150px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center;
}
.podium{ display:flex; flex-direction:column; align-items:center; }
.podium-face{
  width:clamp(160px,21vw,250px);
  background:linear-gradient(180deg, var(--navy), var(--navy-deep));
  border:3px solid var(--gold-deep); border-top:none;
  clip-path:polygon(4% 0,96% 0,100% 100%,0 100%);
  padding:14px 12px 20px; display:flex; justify-content:center;
}
.podium-shadow{
  width:64%; height:14px; margin-top:6px;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,0) 72%);
}

.ca-pin{
  position:relative; width:110px; height:110px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:radial-gradient(circle at 34% 28%, var(--cream), #E4D3A6 74%);
  border:4px solid var(--red); cursor:pointer;
  box-shadow:0 6px 0 var(--red-deep), 0 11px 18px rgba(0,0,0,.5);
  transition:transform .1s, box-shadow .1s;
}
.ca-pin:active{ transform:translateY(4px); box-shadow:0 2px 0 var(--red-deep), 0 5px 10px rgba(0,0,0,.5); }
.ca-pin.clicked{ animation:pinClick .32s var(--ease-surge); }
@keyframes pinClick{ 0%{transform:scale(1);} 40%{transform:scale(.9);} 100%{transform:scale(1);} }
.ca-pin-ring{
  position:absolute; inset:8px; border:1px dashed var(--red-deep); border-radius:50%; opacity:.5;
}
.ca-pin-star{ color:var(--red); font-size:13px; line-height:1; margin-bottom:2px; }
.ca-pin-text{
  font-family:var(--font-mono); font-weight:700; font-size:8.5px; color:var(--ink);
  text-align:center; line-height:1.25; padding:0 8px; word-break:break-all;
}
.ca-pin-state{
  font-family:var(--font-ui); font-size:8px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--red-deep); margin-top:4px;
}

/* ---------------------------------------------------------------- CONFETTI */
.confetti-canvas{ position:absolute; inset:0; z-index:5; pointer-events:none; }

/* ---------------------------------------------------------------- CHEER */
.cheer-btn{
  position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:4;
  width:126px; height:126px; border-radius:50%; cursor:pointer;
  border:5px solid var(--gold);
  background:radial-gradient(circle at 35% 28%, var(--red-bright), var(--red-deep) 78%);
  color:var(--white); display:flex; flex-direction:column; align-items:center; justify-content:center;
  box-shadow:0 10px 0 var(--red-deep), 0 18px 28px rgba(0,0,0,.5);
  transition:transform .08s, box-shadow .08s;
}
.cheer-btn:active, .cheer-btn.pressed{
  transform:translateX(-50%) translateY(6px);
  box-shadow:0 4px 0 var(--red-deep), 0 8px 16px rgba(0,0,0,.5);
}
.cheer-btn-label{ font-family:var(--font-display); font-weight:400; font-size:23px; letter-spacing:.02em; }
.cheer-btn-sub{ font-family:var(--font-ui); font-size:9px; text-transform:uppercase; letter-spacing:.12em; color:var(--gold-bright); margin-top:2px; }
.cheer-ring{ position:absolute; inset:-8px; border-radius:50%; border:2px solid var(--gold); opacity:0; }
.cheer-btn.pressed .cheer-ring{ animation:ringPulse .55s ease-out; }
@keyframes ringPulse{ 0%{opacity:.85; transform:scale(.86);} 100%{opacity:0; transform:scale(1.4);} }

/* ---------------------------------------------------------------- CHROME */
.stage-chrome{ position:absolute; right:26px; bottom:26px; z-index:4; display:flex; align-items:center; gap:10px; }
.chrome-link{
  display:flex; align-items:center; gap:7px; cursor:pointer; text-decoration:none;
  background:rgba(10,11,16,.62); border:2px solid var(--gold-deep); color:var(--cream);
  padding:10px; font-family:var(--font-ui); font-size:12px; text-transform:uppercase; letter-spacing:.08em;
  transition:border-color .15s, color .15s;
}
.chrome-link:hover{ border-color:var(--gold); color:var(--gold-bright); }
.chrome-x{ padding:10px; }
.chrome-buy{ padding:10px 14px; }
.chrome-buy span{ white-space:nowrap; }
.chrome-more{ padding:10px 14px; }
.chrome-more span{ white-space:nowrap; }

/* ---------------------------------------------------------------- FOOTER */
.stage-footer{
  position:absolute; left:26px; bottom:16px; z-index:3;
  display:flex; flex-direction:column; gap:2px; max-width:300px;
}
.canary{ font-family:var(--font-mono); font-size:10px; color:var(--gold); letter-spacing:.03em; }
.chain-tag{ font-family:var(--font-mono); font-size:10px; color:var(--cream-dim); }
.disclosure{ margin:2px 0 0; font-family:var(--font-ui); font-size:9px; line-height:1.35; color:rgba(243,230,196,.42); }

/* ==================================================================
   CAMPAIGN DOSSIER : scroll depth below the hero stage
   ================================================================== */
.dossier{ position:relative; padding:88px 24px 96px; }
.dossier.on-void{ background:var(--void); }
.dossier.on-navy{ background:var(--navy-deep); }
.dossier-inner{ max-width:760px; margin:0 auto; }
.dossier-kicker{ margin:0 0 6px; font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); }
.dossier-title{
  margin:0 0 14px; font-family:var(--font-display); font-weight:400;
  font-size:clamp(28px,4vw,44px); line-height:1; color:var(--white);
  text-shadow:2px 2px 0 var(--red-deep);
}
.dossier-intro{ margin:0 0 40px; max-width:56ch; font-family:var(--font-ui); font-size:15px; line-height:1.55; color:var(--cream-dim); }

/* ---- Exhibit A : platform planks, numbered ledger, not a card grid ---- */
.plank-list{ list-style:none; margin:0; padding:0; counter-reset:plank; border-top:1px solid var(--navy-line); }
.plank-item{
  counter-increment:plank; display:flex; gap:18px; align-items:flex-start;
  padding:20px 0; border-bottom:1px solid var(--navy-line);
}
.plank-item::before{
  content:counter(plank,decimal-leading-zero);
  flex:0 0 auto; padding-top:3px; width:28px;
  font-family:var(--font-mono); font-weight:700; font-size:13px; color:var(--gold);
}
.plank-body{ flex:1 1 auto; min-width:0; }
.plank-title{ margin:0 0 4px; font-family:var(--font-display); font-weight:400; font-size:16px; letter-spacing:.02em; color:var(--white); }
.plank-text{ margin:0; font-family:var(--font-ui); font-size:14px; line-height:1.5; color:var(--cream-dim); }

/* ---- Exhibit B : committee, rosette-pin filmstrip (echoes the CA pin) ---- */
.committee-row{
  display:flex; flex-wrap:wrap; justify-content:center; gap:22px 18px; padding:6px 2px 20px;
}
.committee-card{ flex:0 0 auto; width:150px; text-align:center; }
.committee-pin{
  width:76px; height:76px; margin:0 auto 12px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 34% 28%, var(--cream), #E4D3A6 74%);
  border:4px solid var(--red); box-shadow:0 6px 0 var(--red-deep), 0 10px 16px rgba(0,0,0,.45);
  font-family:var(--font-display); font-weight:400; font-size:26px; color:var(--red);
}
.committee-name{ margin:0 0 2px; font-family:var(--font-display); font-weight:400; font-size:16px; color:var(--white); }
.committee-role{ margin:0 0 6px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--gold); }
.committee-bio{ margin:0; font-family:var(--font-ui); font-size:12.5px; line-height:1.4; color:var(--cream-dim); }

/* ---- Exhibit C : press releases, stacked memo cards, not a uniform grid ---- */
.memo-stack{ display:flex; flex-direction:column; gap:24px; }
.memo{
  position:relative; background:var(--cream); color:var(--ink);
  padding:20px 22px 22px; box-shadow:0 12px 26px rgba(0,0,0,.4);
  overflow:hidden;
}
.memo:nth-child(odd){ transform:rotate(-0.6deg); }
.memo:nth-child(even){ transform:rotate(0.5deg); }
.memo::before{
  content:""; position:absolute; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg, var(--red) 0 33%, var(--navy) 33% 66%, var(--gold-deep) 66% 100%);
}
.memo-dateline{
  display:block; margin:10px 0 10px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--red-deep);
}
.memo-headline{ margin:0 0 10px; font-family:var(--font-display); font-weight:400; font-size:18px; line-height:1.2; }
.memo-body{ margin:0; font-family:var(--font-ui); font-size:13.5px; line-height:1.55; color:rgba(23,18,8,.82); }

/* ---- Exhibit D : FAQ, native accordion transcript ---- */
.faq-list{ border-top:1px solid var(--navy-line); }
.faq-item{ border-bottom:1px solid var(--navy-line); }
.faq-item summary{
  cursor:pointer; list-style:none; padding:18px 2px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-display); font-weight:400; font-size:15px; color:var(--white);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; flex:0 0 auto; font-family:var(--font-mono); font-size:18px; color:var(--gold);
  transition:transform .2s;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-answer{ margin:0 2px 18px; max-width:60ch; font-family:var(--font-ui); font-size:14px; line-height:1.55; color:var(--cream-dim); }

/* ---- Site footer (final disclaimer, repeated at the true end of the page) ---- */
.site-footer{
  padding:48px 24px 64px; text-align:center;
  background:var(--navy-deep); border-top:2px solid var(--gold-deep);
}
.site-footer .disclosure{
  max-width:520px; margin:0 auto 16px; font-family:var(--font-ui);
  font-size:11px; line-height:1.4; color:rgba(243,230,196,.5);
}
.back-to-top{
  display:inline-block; font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--gold); text-decoration:none;
  border-bottom:1px solid var(--gold-deep); padding-bottom:2px;
}
.back-to-top:hover{ color:var(--gold-bright); }

/* ---------------------------------------------------------------- MOBILE */
@media (max-width:760px){
  html,body{ overflow-y:auto; height:auto; }
  .stage{
    position:static; width:100%; height:auto; min-height:100dvh; overflow:visible;
    display:flex; flex-direction:column; align-items:center;
    padding:20px 16px 40px; gap:20px;
  }
  .bunting{ position:static; order:0; height:44px; }
  .backdrop{ position:fixed; inset:0; z-index:-1; }
  .spotlight{ top:-4%; }

  .masthead{ position:static; order:1; max-width:100%; text-align:center; }
  .tally-board{ position:static; order:2; text-align:center; margin:0 auto; }
  .applause{ position:static; order:3; transform:none; flex-direction:row; }
  .applause-label{ writing-mode:horizontal-tb; transform:none; }
  .applause-track{ width:20px; height:120px; }
  .platform{ position:static; order:4; transform:none; }
  .cheer-btn{ position:static; order:5; transform:none; margin:4px auto 0; }
  .cheer-btn:active, .cheer-btn.pressed{ transform:translateY(6px); }
  .stage-chrome{ position:static; order:6; flex-wrap:wrap; justify-content:center; }
  .stage-footer{ position:static; order:7; align-items:center; text-align:center; max-width:100%; }

  .dossier{ padding:56px 18px 64px; }
  .dossier-intro{ max-width:100%; }
  .plank-item{ gap:12px; }
  .memo:nth-child(odd),.memo:nth-child(even){ transform:none; }
}

/* ---------------------------------------------------------------- REDUCED MOTION */
@media (prefers-reduced-motion:reduce){
  .backdrop.bounce .backdrop-photo{ animation:none; }
  .ca-pin.clicked{ animation:none; }
  .cheer-btn.pressed .cheer-ring{ animation:none; }
  .applause-fill{ transition:none; }
}