/* Shared foundation: tokens, reset and the atoms every page uses. Loaded first. */
:root{
  --ink:#0B2F36;            /* L* 17.32 — the page field. build.mjs hardcodes this. */
  --well:#05181D;           /* L*  6.99 — deltaL* -10.33. Recessed readouts. Raises
                               cream contrast from 11.22 to 15.46 by going DOWN. */
  --cream:#F3ECDD;--muted:#A9BDB8;--accent:#E8B547;--accent2:#f0c25f;
  /* Three rules, split by job. A single .16 rule was doing structural work at
     1.56:1 and also standing in as a control boundary, where it failed 1.4.11. */
  --hair:rgba(243,236,221,.14);   /* sub-division inside a block. decorative. */
  --rule:rgba(243,236,221,.30);   /* structure: section and row rules.        */
  --edge:rgba(243,236,221,.44);   /* 3.53:1 — any border that IS the control. */
  --rule2:rgba(243,236,221,.14);
  --max:1120px;--measure:38em;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --gutter:20px;
}
@media(min-width:760px){:root{--gutter:32px}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:84px}
html,body{overflow-x:clip}
@supports not (overflow:clip){body{overflow-x:hidden}}
body{background:var(--ink);color:var(--cream);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;position:relative;min-width:320px}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
a{color:inherit;text-decoration:none}
img,svg,iframe,video{max-width:100%;display:block}
p,li,h1,h2,h3,dd,dt{overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
main:focus{outline:none}

.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--gutter);min-width:0}
.skip{position:absolute;left:-999px;top:10px;z-index:100;background:var(--accent);color:var(--ink);padding:10px 14px;border-radius:6px;font-weight:600}
.skip:focus{left:12px}

/* type atoms */
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-weight:500}
h1,h2,.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.018em;line-height:1.03;text-wrap:balance}
h1 i,h2 i,.serif i,.gold{font-style:italic;color:var(--accent)}
h2{font-size:clamp(32px,4.4vw,54px);margin-top:16px;max-width:17em}
h3{font-family:var(--serif);font-weight:400;letter-spacing:-.01em;line-height:1.12}
.deck{font-size:clamp(17px,1.6vw,20px);color:var(--muted);max-width:var(--measure);margin-top:16px;line-height:1.55}
.mono{font-family:var(--mono)}
section{position:relative;z-index:1;padding:clamp(60px,8vw,110px) 0;border-top:1px solid var(--rule2)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:14px 26px;border-radius:999px;font-family:var(--mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;border:1px solid var(--rule);transition:transform .18s ease,background .18s ease,border-color .18s ease,color .18s ease;white-space:nowrap;cursor:pointer;color:var(--cream);background:transparent}
.btn.primary{background:var(--accent);color:var(--ink);border-color:var(--accent);font-weight:600}
.btn.primary:hover{background:var(--accent2);transform:translateY(-1px)}
.btn.ghost:hover{border-color:var(--accent)}
.btn.small{min-height:44px;padding:10px 18px;font-size:11px}
.ctarow{display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;margin-top:30px}

/* sticky top bar */
.top{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:66px}
.top .name{font-family:var(--serif);font-size:24px;letter-spacing:-.01em;white-space:nowrap}
.top nav{display:flex;align-items:center;gap:24px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.top nav a:not(.btn){padding:12px 0}
.top nav a:not(.btn):hover{color:var(--cream)}
.top nav .btn{min-height:44px;padding:9px 18px;font-size:12px}
@media(max-width:720px){.top .wrap{flex-wrap:wrap;padding-block:10px;min-height:0}.top nav{width:100%;order:2;gap:18px;justify-content:space-between}.top nav a:not(.btn){padding:8px 0}}
@media(max-width:460px){.top .wrap{gap:10px}.top .name{font-size:19px}.top nav .btn{padding:9px 13px;font-size:11px;letter-spacing:.05em}}
@media(max-width:340px){.top .name{font-size:17px}.top nav .btn{padding:8px 11px;font-size:10px}}

/* footer */
footer.site{position:relative;z-index:1;border-top:1px solid var(--rule);padding:34px 0 60px;font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.02em;line-height:1.9}
footer.site .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px}
footer.site a{color:var(--cream);border-bottom:1px solid var(--rule);padding-bottom:2px}
footer.site a:hover{border-color:var(--accent)}
footer.site .fnav{display:flex;flex-wrap:wrap;gap:8px 18px}
footer.site .tiny{width:100%;margin-top:6px;color:var(--muted)}
footer.site .tiny a{color:var(--muted)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.btn{transition:none}}

/* Narrow screens: let long CTA labels wrap instead of overhanging, and give
   them a full-width tap target. The sticky header button is excluded. */
@media(max-width:560px){
  .ctarow{gap:12px}
  .ctarow .btn{white-space:normal;text-align:center;width:100%;max-width:100%;line-height:1.4;padding:15px 20px}
}

/* ---------------------------------------------------------------------------
   The grade rule. Each figure states how it was measured, and the weight of the
   rule above the stamp encodes it: 2px gold for a holdout, 1px solid for a
   derived number, 1px dashed for one the business reported. A border rather
   than a filled chip, so it survives to paper with background graphics off.
   One axis only: measurement. Credit attribution stays in the caption, where
   the grammar is already right ("Promotional sales, co-led").
   --------------------------------------------------------------------------- */
.stamp{
  display:block;margin-top:12px;padding-top:8px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.10em;
  text-transform:uppercase;line-height:1.45;color:var(--muted);
}
[data-grade="holdout"]  > .stamp{border-top:2px solid var(--accent);color:var(--accent)}
[data-grade="derived"]  > .stamp{border-top:1px solid var(--edge)}
[data-grade="reported"] > .stamp{border-top:1px dashed var(--edge)}