/* site.css — the whole design system. Inlined into every page by build.js. */

/* ------------------------------------------------------------------ font -- */
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin.woff2)format('woff2');font-weight:400 800;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Archivo;src:url(/fonts/archivo-latin-ext.woff2)format('woff2');font-weight:400 800;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------------------------------------------------------------- tokens -- */
:root{
  --sage:#c6d8c8; --sage-2:#b8cebb;
  --cream:#f4f1e7; --cream-2:#ece7d8;
  --ink:#141414; --ink-2:#1f1f1f; --ink-3:#2c2c2c;
  --coral:#d33d27;        /* 4.70:1 with white — the old #f1543c was 3.46:1 */
  --coral-d:#b8331f;
  --coral-bright:#f1543c; /* decoration only: bars and washes that carry no text */
  --violet:#6b5cf3; --violet-d:#5847e0;
  --mustard:#f5c242; --mint:#b4e1d5; --ice:#a9dde8;
  --white:#fff;

  --page:var(--sage);
  --card:var(--cream);
  --text:var(--ink);
  --text-2:#3d463f;
  --text-3:#4d574f;   /* 5.04:1 on sage; #6d7a6f was 3.01 and #59645b 4.14 */
  --line:rgba(20,20,20,.14);
  --line-2:rgba(20,20,20,.28);
  --onink:#f2efe6;
  --onink-2:#9aa39c;
  --shadow:0 1px 0 rgba(20,20,20,.06);

  /* dark-tile surfaces, overridden in dark mode so cards keep reading as cards */
  --s-ink:var(--ink); --s-ink-2:var(--ink-2); --s-ink-3:var(--ink-3);

  /* the four reasoning terms, used by bars, legends and charts alike */
  --c-consensus:var(--violet);
  --c-age:var(--coral-bright);
  --c-format:var(--mustard);
  --c-scarcity:var(--mint);

  --r:26px; --r-sm:16px; --r-pill:999px;
  --gap:16px;
  --maxw:1180px;
  --font:Archivo,"Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --page:#0e100e; --card:#191b19; --text:#eef1ec; --text-2:#a8b3a9; --text-3:#7d887e;
    --line:rgba(238,241,236,.14); --line-2:rgba(238,241,236,.26);
    --cream:#191b19; --cream-2:#20231f; --sage-2:#20231f;
    --shadow:none;
    --s-ink:#1b1f1b; --s-ink-2:#242924; --s-ink-3:#303630;
  }
}
:root[data-theme=dark]{
  --page:#0e100e; --card:#191b19; --text:#eef1ec; --text-2:#a8b3a9; --text-3:#7d887e;
  --line:rgba(238,241,236,.14); --line-2:rgba(238,241,236,.26);
  --cream:#191b19; --cream-2:#20231f; --sage-2:#20231f;
  --shadow:none;
  --s-ink:#1b1f1b; --s-ink-2:#242924; --s-ink-3:#303630;
}

/* ------------------------------------------------------------------ base -- */
*,*::before,*::after{box-sizing:border-box}
/* Any display rule outranks the user agent's [hidden] styling, so hiding an
   element by setting .hidden silently failed on anything with a display of its
   own. This must stay above the component rules. */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
@media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0;background:var(--page);color:var(--text);
  font-family:var(--font);font-size:16px;line-height:1.5;font-weight:450;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.02em;line-height:.98;text-transform:uppercase;text-wrap:balance}
h1{font-size:clamp(38px,7.2vw,74px)}
h2{font-size:clamp(26px,3.6vw,40px)}
h3{font-size:clamp(20px,2.4vw,27px)}
h4{font-size:15px;letter-spacing:.01em}
p{margin:0 0 14px}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button,input,select{font:inherit;color:inherit}
/* A single-colour focus ring cannot contrast with every surface: violet on the
   violet promo tile was 1.00:1 — literally invisible — and 2.85:1 on mustard,
   under the 3:1 that WCAG 1.4.11 requires of a focus indicator.
   Two concentric rings fix it for any background: a light ring against dark
   surfaces and a dark ring against light ones. At least one always contrasts.
   The transparent outline is deliberate — it keeps the indicator visible in
   Windows High Contrast / forced-colors mode, where box-shadow is dropped. */
:focus-visible{
  outline:2px solid transparent;
  outline-offset:2px;
  border-radius:6px;
  box-shadow:0 0 0 3px var(--white), 0 0 0 6px var(--ink);
}
@media (forced-colors:active){
  :focus-visible{outline:3px solid Highlight;box-shadow:none}
}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--ink);color:var(--onink);padding:12px 18px;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:0}

/* --------------------------------------------------------------- shell ---- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.site-header{padding:20px 0 8px}
.site-header .bar{display:flex;align-items:center;gap:14px}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:800;letter-spacing:-.03em;font-size:19px;text-transform:uppercase;white-space:nowrap}
.brand .glyph{width:30px;height:30px;border-radius:9px;background:var(--coral);display:grid;place-items:center;flex:none}
.brand .glyph svg{width:17px;height:17px;display:block}
.nav{margin-left:auto;display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.nav a{
  text-decoration:none;font-size:13.5px;font-weight:600;padding:8px 13px;border-radius:var(--r-pill);
  color:var(--text-2);white-space:nowrap;
}
.nav a:hover{background:var(--sage-2);color:var(--text)}
.nav a[aria-current=page]{background:var(--ink);color:var(--onink)}

/* ---------------------------------------------------------------- tiles --- */
.grid{display:grid;gap:var(--gap)}
.tile{
  background:var(--card);border-radius:var(--r);padding:22px;position:relative;
  box-shadow:var(--shadow);min-width:0;
}
.tile.pad-lg{padding:28px}
.t-ink{background:var(--s-ink);color:var(--onink)}
.t-ink .kick,.t-ink .sub{color:var(--onink-2)}
.t-coral{background:var(--coral);color:#fff}
.t-violet{background:var(--violet);color:#fff}
.t-mustard{background:var(--mustard);color:var(--ink)}
.t-mint{background:var(--mint);color:var(--ink)}
.t-ice{background:var(--ice);color:var(--ink)}
/* Body copy on coral and violet was ~3.5:1. Full-strength white clears 4.5:1
   on both; the kickers are large-and-bold, but lift them anyway. */
.t-coral .kick,.t-violet .kick{color:#fff}
.t-coral .sub,.t-violet .sub,.t-coral .say,.t-violet .say{color:#fff}
.t-mustard .kick,.t-mint .kick,.t-ice .kick{color:rgba(20,20,20,.75)}

.kick{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 9px;
}
.sub{color:var(--text-2);font-size:14.5px;line-height:1.45}
.tile-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:14px}
.tile-head h2,.tile-head h3{flex:1;min-width:0}

/* the white circular arrow button from the reference */
.round{
  width:38px;height:38px;border-radius:50%;background:var(--white);color:var(--ink);
  display:grid;place-items:center;flex:none;border:0;cursor:pointer;text-decoration:none;
  transition:transform .16s ease;
}
.round:hover{transform:translate(2px,-2px)}
.round svg{width:15px;height:15px}
.t-mustard .round,.t-mint .round,.t-ice .round,.tile:not([class*=t-]) .round{background:var(--ink);color:var(--white)}
@media(prefers-reduced-motion:reduce){.round:hover{transform:none}}

/* ---------------------------------------------------------------- chips --- */
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.chip{
  position:relative;display:inline-flex;align-items:center;gap:7px;
  background:var(--white);color:var(--ink);border:0;border-radius:var(--r-pill);
  padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;white-space:nowrap;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .chip{background:var(--s-ink-3);color:var(--onink)}}
:root[data-theme=dark] .chip{background:var(--s-ink-3);color:var(--onink)}
.chip select{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;border:0;
}
.chip .cv{font-weight:700}
.chip svg{width:11px;height:11px;opacity:.55;flex:none}
.chip:has(select:focus-visible){
  outline:2px solid transparent;outline-offset:2px;
  box-shadow:0 0 0 3px var(--white), 0 0 0 6px var(--ink);
}
.chips .reset{background:transparent;border:1px solid var(--line-2);color:var(--text-2);font-weight:600}

/* ------------------------------------------------------------ trade sides - */
.sides{display:grid;gap:var(--gap);grid-template-columns:1fr 1fr;align-items:start}
.side{display:flex;flex-direction:column;min-height:236px}
.side .side-top{display:flex;align-items:baseline;gap:10px;margin-bottom:14px}
.side .side-top .kick{margin:0}
.side .tot{margin-left:auto;font-weight:800;font-size:20px;letter-spacing:-.02em}

.slots{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.slot{
  display:flex;align-items:center;gap:11px;background:var(--s-ink-2);border-radius:14px;padding:10px 11px;
}
/* The base colour lives on .pos, NOT on `.slot .pos`. Declaring it on the
   descendant selector gave that rule specificity (0,2,0), which silently beat
   `.pos-RB{color:#fff}` at (0,1,0) — every RB and PICK badge inside a trade
   slot rendered ink on coral at 3.9:1 while the modifier looked correct in
   isolation. Keep colour declarations on .pos and the .pos-* modifiers only. */
.pos{
  display:grid;place-items:center;flex:none;
  font-size:11px;font-weight:800;letter-spacing:.02em;color:var(--ink);
}
.slot .pos{width:34px;height:34px;border-radius:10px}
/* Doubled class (0,2,0) on purpose: a single `.pos-RB` (0,1,0) loses to any
   `.scope element` selector that happens to match the badge. */
.pos.pos-QB{background:var(--mustard);color:var(--ink)}
.pos.pos-RB{background:var(--coral);color:#fff}
.pos.pos-WR{background:var(--mint);color:var(--ink)}
.pos.pos-TE{background:var(--ice);color:var(--ink)}
.pos.pos-PICK{background:var(--violet);color:#fff}
.slot .nm{min-width:0;flex:1}
.slot .nm b{display:block;font-weight:600;font-size:14.5px;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot .nm span{display:block;font-size:11.5px;color:var(--onink-2);margin-top:1px}
.slot .val{font-weight:700;font-size:14.5px;white-space:nowrap}
.slot .x{
  width:26px;height:26px;border-radius:50%;border:0;background:transparent;color:var(--onink-2);
  cursor:pointer;display:grid;place-items:center;flex:none;
}
.slot .x:hover{background:var(--s-ink-3);color:#fff}
.slot .x svg{width:11px;height:11px}
.side .empty{color:var(--onink-2);font-size:14px;padding:6px 2px 14px}

/* ------------------------------------------------------------ typeahead --- */
.ta{position:relative;margin-top:auto}
.ta input{
  width:100%;background:var(--s-ink-3);border:1.5px solid transparent;color:var(--onink);
  border-radius:14px;padding:12px 14px;font-size:15px;
}
.ta input::placeholder{color:var(--onink-2)}
/* Let the global two-ring :focus-visible indicator apply here too rather than
   inventing a third treatment — an ink ring on an ink tile is 1.00:1. The
   border tint is supplementary feedback, never the indicator on its own. */
.ta input:focus{border-color:var(--onink)}
.ta-list{
  position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:var(--s-ink-2);
  border-radius:16px;padding:6px;margin:0;list-style:none;max-height:290px;overflow-y:auto;
  box-shadow:0 18px 40px rgba(0,0,0,.4);
}
.ta-list:empty{display:none}
.ta-list li{
  display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;cursor:pointer;
}
.ta-list li[aria-selected=true],.ta-list li:hover{background:var(--s-ink-3)}
.ta-list .pos{width:30px;height:30px;font-size:10px;border-radius:9px}
.ta-list b{font-weight:600;font-size:14px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Target the meta text by class, not by type. `.ta-list span` also matched the
   .pos badge — and at (0,1,1) it outranked `.pos-RB` (0,1,0), painting every
   badge grey on its colour at 1.6-1.8:1. Never colour a badge by element type. */
.ta-list .meta{font-size:11.5px;color:var(--onink-2);white-space:nowrap}

/* -------------------------------------------------------------- verdict --- */
.verdict{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:stretch}
.vmain{display:flex;flex-direction:column;justify-content:center;min-height:210px}
.vmain .big{font-size:clamp(40px,6.4vw,68px);font-weight:800;letter-spacing:-.03em;line-height:.94;text-transform:uppercase}
.vmain .pct{
  display:inline-flex;align-items:baseline;gap:6px;margin-top:12px;font-weight:700;font-size:17px;
  background:rgba(20,20,20,.22);padding:6px 13px;border-radius:var(--r-pill);align-self:flex-start;
}
.t-mustard .vmain .pct,.t-mint .vmain .pct{background:rgba(20,20,20,.12);color:var(--ink)}
.vmain .say{margin:14px 0 0;font-size:15.5px;line-height:1.45;max-width:34ch}

/* the four-segment reasoning bar */
.bars{display:flex;height:15px;border-radius:var(--r-pill);overflow:hidden;gap:2px;margin:4px 0 14px}
.bars i{display:block;min-width:0;transition:flex-basis .3s ease}
@media(prefers-reduced-motion:reduce){.bars i{transition:none}}
.bars i.b-consensus{background:var(--c-consensus)}
.bars i.b-age{background:var(--c-age)}
.bars i.b-format{background:var(--c-format)}
.bars i.b-scarcity{background:var(--c-scarcity)}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.legend li{display:flex;align-items:center;gap:9px;font-size:13.5px;padding:5px 0;border-bottom:1px solid var(--line)}
.legend li:last-child{border-bottom:0}
.legend .sw{width:11px;height:11px;border-radius:3px;flex:none}
.legend .lb{flex:1;min-width:0}
.legend .nu{font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.legend .pc{color:var(--text-3);font-size:12px;width:38px;text-align:right;white-space:nowrap}
.t-ink .legend li{border-color:rgba(255,255,255,.12)} .t-ink .legend .pc{color:var(--onink-2)}

.why{margin:0;font-size:15px;line-height:1.5}
.notes{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.notes li{
  display:flex;gap:10px;font-size:13.5px;line-height:1.45;background:var(--cream-2);
  padding:10px 12px;border-radius:12px;color:var(--text-2);
}
.notes li svg{width:15px;height:15px;flex:none;margin-top:2px;color:var(--coral)}

/* --------------------------------------------------------------- actions -- */
.actions{display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:8px;border:0;cursor:pointer;text-decoration:none;
  background:var(--ink);color:var(--onink);border-radius:var(--r-pill);
  padding:12px 20px;font-size:14.5px;font-weight:700;letter-spacing:.01em;
}
.btn:hover{background:var(--s-ink-3)}
.btn svg{width:15px;height:15px}
.btn.alt{background:var(--white);color:var(--ink)}
.btn.ghost{background:transparent;border:1.5px solid var(--line-2);color:var(--text)}
/* `.btn.alt` and `.btn.ghost` are (0,2,0) and sit AFTER `.btn:hover` (0,2,0),
   so they won the background and those variants had no hover feedback at all.
   Each variant needs its own hover — and it must keep its own text colour,
   because inheriting the dark `.btn:hover` background under `.ghost`'s dark
   text would be 1.3:1. */
.btn.alt:hover{background:var(--cream-2)}
.btn.ghost:hover{background:var(--sage-2);border-color:var(--text-3)}

/* Disabled controls are exempt from WCAG 1.4.3, but opacity:.45 put the label
   at 4.09:1 and looked broken rather than inactive. Explicit muted colours read
   as disabled and stay legible. */
.btn[disabled]{cursor:not-allowed;background:var(--s-ink-3);color:var(--onink-2)}
.btn.alt[disabled]{background:var(--cream-2);color:var(--text-3)}
.btn.ghost[disabled]{background:transparent;color:var(--text-3);border-color:var(--line)}

.live-note{
  margin:0 0 4px;padding:9px 13px;border-radius:var(--r-sm);
  background:var(--mustard);color:var(--ink);font-size:13.5px;font-weight:600;
}
.live-note:empty{display:none}

/* Manual-copy fallback: shown only when both clipboard paths fail, so the user
   has a real selection to act on instead of an instruction they cannot follow. */
.manual-copy{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  background:var(--cream-2);border:1.5px solid var(--line-2);
  border-radius:var(--r-sm);padding:10px 12px;
}
.manual-copy label{font-size:13px;font-weight:700;white-space:nowrap;color:var(--text)}
.manual-copy input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--text);
  font:inherit;font-size:13.5px;padding:4px 0;
}
/* No `outline:0` here. It sat at (0,2,1) and outranked the forced-colors
   `:focus-visible{outline:3px solid Highlight}` fallback at (0,1,0) — and
   because forced-colors mode also drops box-shadow, that left the input with no
   focus indicator at all in Windows High Contrast. Let the global two-ring
   indicator apply, exactly like every other control. */
.manual-copy .mc-close{
  border:0;background:transparent;color:var(--text-2);cursor:pointer;flex:none;
  width:26px;height:26px;border-radius:50%;font-size:17px;line-height:1;
}
.manual-copy .mc-close:hover{background:var(--sage-2);color:var(--text)}

/* ------------------------------------------------------------------ art --- */
.art{width:100%;max-width:300px;margin-inline:auto;filter:drop-shadow(0 8px 22px rgba(20,20,20,.14))}
.art-sm{max-width:190px}
/* Drop the shadow only in actual dark mode. ":root:not([data-theme=light])"
   alone also matches the default light theme, which has no data-theme at all. */
:root[data-theme=dark] .art{filter:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .art{filter:none}}

/* ----------------------------------------------------------------- table -- */
.tw{overflow-x:auto;border-radius:var(--r-sm);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:14px}
caption{text-align:left;font-size:13px;color:var(--text-3);padding-bottom:10px}
th{
  text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-3);padding:8px 12px 8px 0;border-bottom:1.5px solid var(--line-2);white-space:nowrap;
  position:sticky;top:0;background:var(--card);
}
td{padding:9px 12px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:var(--cream-2)}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td a{font-weight:600;text-decoration:none}
td a:hover{text-decoration:underline}
.pill{
  display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:3px 8px;
  border-radius:var(--r-pill);color:var(--ink);
}
/* Coral and violet are dark enough that ink text fails AA on them; those two
   carry white instead. Mustard, mint and ice keep ink. */
.pill.on-dark{color:#fff}
.up{color:#1c7a4f;font-weight:700} .down{color:var(--coral-d);font-weight:700}
:root[data-theme=dark] .up{color:#5fd39a}

/* ---------------------------------------------------------- chart filter -- */
.chart-filter{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:0 0 14px}
.chart-filter input[type=search]{
  flex:1 1 220px;min-width:0;border:1.5px solid var(--line-2);border-radius:var(--r-pill);
  background:var(--card);color:var(--text);padding:10px 15px;font:inherit;font-size:14px;
}
.chart-pos{display:flex;gap:5px;flex-wrap:wrap}
.chart-pos button{
  border:1.5px solid var(--line-2);background:transparent;color:var(--text-2);
  border-radius:var(--r-pill);padding:8px 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;
}
.chart-pos button:hover{background:var(--sage-2);color:var(--text)}
.chart-pos button[aria-pressed=true]{background:var(--ink);color:var(--onink);border-color:var(--ink)}
.chart-count{margin:0;font-size:13px;color:var(--text-3);flex-basis:100%}

/* --------------------------------------------------------------- details -- */
details.info{border-top:1px solid var(--line);padding:2px 0}
details.info>summary{
  list-style:none;cursor:pointer;padding:13px 0;font-weight:600;font-size:15px;
  display:flex;align-items:center;gap:10px;
}
details.info>summary::-webkit-details-marker{display:none}
details.info>summary::after{
  content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--text-3);border-bottom:2px solid var(--text-3);
  transform:rotate(45deg) translateY(-2px);transition:transform .18s ease;
}
details.info[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
details.info .body{padding:0 0 16px;color:var(--text-2);font-size:15px;line-height:1.6;max-width:66ch}
details.info .body :last-child{margin-bottom:0}
@media(prefers-reduced-motion:reduce){details.info>summary::after{transition:none}}

/* ---------------------------------------------------------------- charts -- */
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart .gl{stroke:var(--line);stroke-width:1}
.chart .ax{font-size:10.5px;font-weight:600;fill:var(--text-3)}
.chart .ln{fill:none;stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{stroke:var(--card);stroke-width:2}

/* ---------------------------------------------------------------- footer -- */
.site-footer{margin-top:40px;padding:26px 0 40px;border-top:1px solid var(--line);font-size:13.5px;color:var(--text-2)}
.site-footer .cols{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:22px}
/* Was an <h4>, which jumped the heading level on every page. These label
   navigation lists; they are not document structure. */
.site-footer .fh{
  font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--text-3);margin:0 0 9px;
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.site-footer a{text-decoration:none;color:var(--text-2)}
.site-footer a:hover{color:var(--text);text-decoration:underline}
.site-footer .fine{max-width:74ch;line-height:1.55}
.site-footer .fine b{color:var(--text)}

/* ----------------------------------------------------------------- utils -- */
.stack{display:grid;gap:var(--gap)}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.span-2{grid-column:span 2}
.flow>*+*{margin-top:14px}
.measure{max-width:62ch}
.center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
.big-num{font-size:clamp(30px,4.4vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1}

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  :root{--r:22px;--gap:12px}
  .cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cols-3{grid-template-columns:1fr}
  .verdict{grid-template-columns:1fr}
  .site-header .bar{flex-wrap:wrap}
  /* The nav scrolls horizontally on a phone. Fade the trailing edge so the
     last item is visibly cut off rather than silently missing. */
  .nav{
    margin-left:0;width:100%;flex-wrap:nowrap;overflow-x:auto;padding-bottom:2px;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
  }
  .nav::-webkit-scrollbar{display:none}
}
@media (max-width:640px){
  /* The chart needed horizontal scrolling on a phone. Drop the columns a
     lookup does not need; the player page carries the full record. */
  .opt{display:none}
  table{min-width:0}
  .sides{grid-template-columns:1fr}
  .cols-2,.cols-4{grid-template-columns:1fr}
  .span-2{grid-column:auto}
  .tile{padding:18px}.tile.pad-lg{padding:20px}
  body{font-size:15.5px}

  /* The calculator is what people came for. On a phone the hero illustration
     sits beside the headline instead of pushing the tool below the fold. */
  .hero{grid-template-columns:minmax(0,1fr) 104px!important;gap:14px;align-items:center}
  .hero .art{max-width:104px;margin:0}
  .hero h1{font-size:clamp(30px,9vw,42px)}
  .hero .sub{font-size:15px;margin-top:10px}
}

/* ------------------------------------------------------------------ print -- */
@media print{
  body{background:#fff;color:#000}
  .site-header .nav,.actions,.round,.ta,.skip{display:none!important}
  .tile{background:#fff!important;color:#000!important;border:1px solid #ccc;break-inside:avoid;box-shadow:none}
  table{min-width:0;font-size:10.5px}
  th{position:static}
  a{text-decoration:none;color:#000}
}