/* contactPatch — shared brand stylesheet (identity v3, black). One sheet, whole suite. */
@import url('https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,900&family=Saira+Condensed:ital,wght@0,600;0,700;0,800;0,900;1,700;1,900&family=JetBrains+Mono:wght@400;500;700&display=swap');
:root{
  --grid:#0A0A12; --void:#000000; --pit:#14141C; --p2:#101018; --line:#262633; --line2:#33384a;
  /* --celeste lifted from #6674A3 → #7C8AC0 so small mono labels clear WCAG AA (≈5.4:1 on the grid).
     --celeste-tx is kept as an alias so both resolve the same. Revert both to #6674A3 for the old shade. */
  --celeste:#7C8AC0; --celeste-tx:#7C8AC0; --pole:#FFEA00; --race:#FF0026; --scud:#D40000;
  --ink:#F5F6F8; --ink2:#AEB8D8; --green:#33D17A; --warn:#FFB000;
  /* --exp was 'Saira Expanded' — not a real Google family; it silently fell back to Saira, so this is the true face */
  --exp:'Saira',system-ui,sans-serif;
  --cond:'Saira Condensed','Saira',system-ui,sans-serif;
  --sans:'Saira',system-ui,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --wrap:1160px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:66px;color-scheme:dark}
body{background:var(--grid);color:var(--ink);font-family:var(--sans);line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/* premium tells: branded text selection + slim dark scrollbar */
::selection{background:var(--pole);color:var(--void)}
*{scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--line2);border:3px solid var(--grid);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#454b60}

/* global visible focus (accessibility) */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--pole);outline-offset:3px;border-radius:1px}
/* skip link */
.skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--pole);color:var(--void);
  font-family:var(--mono);font-size:12px;font-weight:700;padding:10px 14px}
.skip:focus{left:8px;top:8px}

/* persistent "watch the video" affordance — fixed top-left below the nav, on every page, so the
   hero film (which takes a moment to load) is always one tap away. index.html nudges it below its
   sound button. links to the hero on the home page. */
.watchvid{position:fixed;left:24px;top:72px;z-index:55;display:inline-flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:rgba(6,6,12,.72);backdrop-filter:blur(6px);border:1px solid var(--line);padding:9px 14px;
  transition:border-color .2s ease,color .2s ease}
.watchvid:hover,.watchvid:focus-visible{border-color:var(--pole);color:var(--pole)}
.watchvid .pl{color:var(--pole);font-size:10px}
@media(max-width:640px){.watchvid{top:auto;bottom:18px}}
@media(prefers-reduced-motion:reduce){.watchvid{backdrop-filter:none}}

/* scroll reveal (transform + opacity only) */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .55s cubic-bezier(.2,.7,.2,1),transform .55s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.06s}.reveal.d2{transition-delay:.12s}
.reveal.d3{transition-delay:.18s}.reveal.d4{transition-delay:.24s}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* section-level reveal (auto, no per-element markup). .js gates it so no-JS shows all. */
/* Sections used to start hidden and be revealed by JS, which meant one throw
   in app.js left all seven pages blank with no way to tell. Content is visible
   by default now; the reveal is an enhancement that can fail safely. */

.js section.in > .wrap{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js section:not(.hero) > .wrap{opacity:1;transform:none;transition:none}}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono)} .pole{color:var(--pole)} .race{color:var(--race)}
.cel{color:var(--celeste)} .dim{color:var(--ink2)}

/* ---- sticky nav (the suite connective tissue) ---- */
.nav{position:sticky;top:0;z-index:60;background:rgba(10,10,18,.82);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav .row{display:flex;align-items:center;gap:22px;height:60px}
.nav .brand{display:flex;align-items:center;gap:11px;flex:none}
.nav .brand svg{width:30px;height:30px}
.nav .wm{font-family:var(--exp);font-weight:800;font-size:17px;text-transform:uppercase;
  letter-spacing:.02em}
.nav .wm b{color:var(--pole);font-weight:900}
.nav .links{display:flex;gap:20px;margin-left:auto;flex-wrap:wrap}
.nav .links a{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--celeste-tx);transition:color .2s ease}
.nav .links a:hover,.nav .links a.active{color:var(--pole)}
.nav .status{font-family:var(--mono);font-size:11px;color:var(--ink2);display:flex;
  align-items:center;gap:7px;flex:none}
.nav .status .dot{width:7px;height:7px;border-radius:50%;background:var(--race);
  animation:blink 1.8s ease-in-out infinite}
@keyframes blink{50%{opacity:.32}}
.navhair{height:1px;background:var(--line);position:relative}
.navhair::before{content:"";position:absolute;left:0;top:0;width:72px;height:1px;background:var(--pole)}
.nav .navtoggle{display:none;background:none;border:1px solid var(--line);color:var(--ink);
  font-family:var(--mono);font-size:15px;line-height:1;padding:7px 11px;cursor:pointer;margin-left:auto;
  min-width:44px;min-height:44px}
@media(max-width:1040px){
  .nav .navtoggle{display:block}
  .nav .status{display:none}
  .nav .links{display:none;position:absolute;top:60px;left:0;right:0;background:var(--grid);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:4px 24px 12px;margin-left:0}
  .nav.open .links{display:flex}
  .nav .links a{padding:13px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .nav .links a:last-child{border-bottom:none}
}

/* ---- nav dropdown panels (a terminal table-of-contents, not a megamenu) ---- */
.nav .navitem{position:relative;display:flex;align-items:center}
.nav .navitem > a{display:inline-flex;align-items:center;gap:7px}
.nav .navitem > a .cv{width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg);transition:transform .22s ease;flex:none}
.nav .navitem:hover > a .cv,.nav .navitem:focus-within > a .cv{transform:rotate(225deg)}
/* hover bridge across the 14px gap so the panel doesn't drop */
.nav .navitem::after{content:"";position:absolute;top:100%;left:-14px;right:-14px;height:16px}
.nav .panel{position:absolute;top:calc(100% + 14px);left:-14px;min-width:300px;
  background:rgba(8,8,14,.97);backdrop-filter:blur(10px);border:1px solid var(--line);padding:9px;
  opacity:0;visibility:hidden;transform:translateY(-6px);z-index:70;
  box-shadow:0 20px 54px rgba(0,0,0,.6);
  transition:opacity .18s ease,transform .18s ease,visibility 0s .18s}
.nav .panel::before{content:"";position:absolute;left:-1px;top:-1px;width:13px;height:13px;
  border-top:2px solid var(--pole);border-left:2px solid var(--pole)}
.nav .navitem:hover > .panel,.nav .navitem:focus-within > .panel{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .18s ease,transform .18s ease}
.nav .panel .ph{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--celeste-tx);padding:4px 12px 8px}
.nav .panel a.pi{display:block;padding:9px 12px;border:1px solid transparent;transition:background .16s ease}
.nav .panel a.pi b{display:block;font-family:var(--cond);font-weight:800;font-size:14.5px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1.05}
.nav .panel a.pi span{display:block;font-family:var(--sans);font-size:12px;color:var(--celeste-tx);
  letter-spacing:0;text-transform:none;margin-top:3px;line-height:1.4}
.nav .panel a.pi:hover{background:var(--pit)}
.nav .panel a.pi:focus-visible{background:var(--pit);outline:2px solid var(--pole);outline-offset:-2px}
.nav .panel a.pi:hover b{color:var(--pole)}
.nav .panel a.pi .rr{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nav .panel .chip{font-style:normal;font-size:10px;padding:3px 7px}
.nav .panel a.pi.allrec{margin-top:4px;border-top:1px solid var(--line);border-radius:0}
.nav .panel a.pi.allrec b{color:var(--celeste);font-size:12px}
.nav .panel a.pi.allrec:hover b{color:var(--pole)}
@media(prefers-reduced-motion:reduce){
  .nav .panel{transition:none}.nav .navitem > a .cv{transition:none}}
@media(max-width:1040px){
  /* below the hamburger breakpoint there is no hover — flatten each panel into an indented sub-list */
  .nav .navitem{flex-direction:column;align-items:stretch;width:100%}
  .nav .navitem > a{padding:13px 0;font-size:13px;border-bottom:1px solid var(--line);
    justify-content:space-between}
  .nav .navitem > a .cv{display:none}
  .nav .navitem::after{display:none}
  .nav .panel{position:static;opacity:1;visibility:visible;transform:none;min-width:0;
    background:transparent;border:none;box-shadow:none;backdrop-filter:none;padding:2px 0 6px 12px;
    border-left:1px solid var(--line);margin:6px 0 6px 2px}
  .nav .panel::before{display:none}
  .nav .panel .ph{padding:6px 0}
  .nav .panel a.pi{padding:11px 0;border-bottom:1px solid var(--line);border-left:0;border-right:0;border-top:0}
  .nav .panel a.pi:hover{background:transparent}
  .nav .panel a.pi.allrec{margin-top:0}
}

/* ---- shared chrome ---- */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--celeste-tx);display:flex;align-items:center;gap:10px;margin-bottom:16px}
.eyebrow::before{content:"";width:24px;height:2px;background:var(--celeste)}
h1,h2{font-family:var(--exp);font-weight:900;text-transform:uppercase;letter-spacing:-.01em;
  line-height:.96;text-wrap:balance}
h1{font-size:clamp(34px,5vw,58px)}
h2{font-size:clamp(26px,3.6vw,42px)}
.lead{font-size:clamp(16px,1.8vw,20px);color:var(--ink2);max-width:64ch;margin-top:14px;text-wrap:pretty}
/* small mono footnote — a real class, not an inline override of .lead down to 13px per page */
.footnote{font-family:var(--mono);font-size:13px;line-height:1.7;color:var(--celeste-tx);max-width:74ch}
section{padding:72px 0;border-top:1px solid var(--line)}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--exp);font-weight:800;
  text-transform:uppercase;letter-spacing:.02em;font-size:14px;padding:12px 20px;cursor:pointer;
  border:none;transition:transform .18s cubic-bezier(.2,.7,.2,1),background .2s ease,color .2s ease,
  border-color .2s ease,box-shadow .2s ease}
.btn.primary{background:var(--pole);color:var(--void)}
.btn.primary:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(255,234,0,.18)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--celeste)}
.btn.ghost:hover{border-color:var(--pole);color:var(--pole)}
.btn:active{transform:translateY(1px) scale(.99)}
.btn:focus-visible{outline:2px solid var(--pole);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.btn:hover,.btn:active{transform:none}}

/* ---- panels / cards / chips ---- */
.card{background:var(--pit);border:1px solid var(--line);padding:22px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:820px){.g2,.g3,.g4{grid-template-columns:1fr}}
.chip{display:inline-block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.08em;padding:4px 9px;text-transform:none}
/* the verdict scale: miss (inside the call's own 95% band) is amber, strong miss
   (outside it, re-freeze trigger) keeps the red. One red for both would flatten a
   2.0σ near-band result and a 4.2σ blowout into the same pixel. */
.chip.miss{background:var(--warn);color:var(--void)}
.chip.strong{background:var(--scud);color:#fff}
.chip.pending{background:var(--pole);color:var(--void)}
.chip.abst{color:var(--celeste-tx);border:1px solid var(--line)}
.chip.hit{color:var(--green);border:1px solid var(--line)}

/* ---- stat tiles ---- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.stats .t{background:var(--grid);padding:18px 16px}
.stats .v{font-family:var(--cond);font-weight:900;font-size:30px;line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums}
.stats .v.y{color:var(--pole)}
.stats .l{font-family:var(--mono);font-size:11px;color:var(--celeste-tx);text-transform:uppercase;
  letter-spacing:.08em;margin-top:6px}

/* ---- number / readout ---- */
.big{font-family:var(--cond);font-weight:900;color:var(--pole);line-height:.85;letter-spacing:0}
/* every headline / animated number gets tabular figures so counters don't jitter and columns align */
.big,.hero .lap,.pole .num,.decomp .v,.wf .val,.upside .v,.shbars .n,.dtiles .v{font-variant-numeric:tabular-nums}

/* ---- footer ---- */
.foot{background:var(--void);border-top:1px solid var(--line);padding:40px 0 60px}
.foot .row{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:flex-start}
.foot .wm{font-family:var(--exp);font-weight:800;text-transform:uppercase;font-size:20px}
.foot .wm b{color:var(--pole);font-weight:900}
.foot .tagline{color:var(--ink2);font-family:var(--sans);font-size:14px;margin-top:6px;font-style:italic}
.foot .links{font-family:var(--mono);font-size:12px;color:var(--celeste-tx);line-height:2;text-align:right}
.foot .links a{transition:color .2s ease}
.foot .links a:hover{color:var(--pole)}

@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto}}