/* TrenchFu design system: tokens. Extracted verbatim from the apex (apex-v4-proto/index.html :root + base).
   Dark only, by design. A door sets its own colour with:  <body style="--door:var(--d-NAME)">  (see door-template.html). */
:root{
  /* ground, ink, hairlines */
  --void:#05060a; --void2:#08090e; --panel:#0b0f17; --hair:rgba(180,200,220,.14); --hair2:rgba(200,220,240,.26);
  --ink:#d5deea; --dim:#8a97a8; --faint:#7f8c9c;
  /* state colours */
  --sealed:#f0b429; --live:#5ce1ff; --settled:#3dff9a; --miss:#ff5a64; --later:#6a7a88; --proposed:#c89bff; --copper:#e8a87c;
  /* one colour per door (--d-nfl is the TMB door; --d-leash is the leash door's pink, set by the leash page before this system) */
  --d-teletask:#f0b429; --d-agents:#3ee0ff; --d-nfl:#b8ff3c; --d-pay:#3dff9a; --d-publish:#c89bff; --d-labs:#6a7a88; --d-leash:#ff6fb5;
  /* record-layer colours */
  --c-deploy:#3dff9a; --c-review:#5ce1ff; --c-config:#f0b429; --c-upgrade:#e8a87c; --c-idea:#b8ff3c; --c-correction:#ff5a64; --c-paper:#c89bff; --c-host:#ff7a45; --c-commit:#8c96ff; --c-grade:#3ee0c0;
  /* type faces */
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --disp:"Big Shoulders Display","Nimbus Sans Narrow",sans-serif;
  /* type scale: the literal sizes the apex uses, named (px) */
  --fs-micro:9.5px; --fs-xs:10.5px; --fs-sm:11px; --fs-body-sm:12px; --fs-body:13px; --fs-lead:15px; --fs-kpi:21px;
  --fs-h2:clamp(30px,3.8vw,54px); --fs-h1:clamp(46px,7.6vw,128px);
  /* spacing: the gaps and gutters the apex repeats (px) */
  --sp-1:6px; --sp-2:10px; --sp-3:14px; --sp-4:18px; --sp-5:28px; --sp-6:56px; --gutter:56px; --gutter-sm:16px; --wrap:1240px;
  /* radii */
  --r-sm:2px; --r-md:3px;
  /* chrome heights (header 48 + ticker 34 + 1 hairline) */
  --hh:48px; --stk:83px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:var(--stk)}
body{background:var(--void);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.tn{font-variant-numeric:tabular-nums}
.unk{border:1px dashed var(--faint);color:var(--faint);padding:0 .35em}
:focus-visible{outline:2px solid var(--live);outline-offset:2px}

/* reveal: sections fade/rise as they enter (components.js adds .in) */
.reveal :is(.panel,.kpis,.quote,.exit,.truth){transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal:not(.in) :is(.panel,.kpis,.quote,.exit,.truth){opacity:0;transform:translateY(22px)}
.reveal h2{transition:letter-spacing 1.4s cubic-bezier(.2,.7,.2,1),opacity .9s}
.reveal:not(.in) h2{opacity:0;letter-spacing:.06em}
.reveal .bar i{width:0}
.reveal.in .bar i{width:var(--w)}
.reveal:not(.in) .mk{opacity:0;transform:translateY(10px)}

/* reduced motion: everything static and visible */
@media (prefers-reduced-motion:reduce){
  .reveal:not(.in) :is(.panel,.kpis,.quote,.exit,.truth,h2){opacity:1;transform:none;letter-spacing:inherit}
  .reveal:not(.in) .mk{opacity:1;transform:none}
  html{scroll-behavior:auto}
  .bar i,.door-card,.sq i,.ev{transition:none!important}
  .reveal .bar i{width:var(--w)}
  .strip .tk,.axis .scan{animation:none}
  .strip{overflow-x:auto}.strip .tk{width:auto}
  .core *{animation:none!important}.core .scan{display:none}
  .btn *,.btn{transition:none}
}