:root{--surface:#fcfcfb;--page:#f9f9f7;--ink:#0b0b0b;--ink2:#52514e;--muted:#6f6d68;
  --grid:#e1e0d9;--border:rgba(11,11,11,.10);
  --record-warm:#a71a1b;--record-cold:#015ba6;--on-record:#fff;color-scheme:light}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--surface:#1a1a19;--page:#0d0d0d;
  --ink:#fff;--ink2:#c3c2b7;--muted:#898781;--grid:#2c2c2a;--border:rgba(255,255,255,.10);
  --record-warm:#ff9085;--record-cold:#7ab9ff;--on-record:#0d0d0d;color-scheme:dark}}
:root[data-theme=dark]{--surface:#1a1a19;--page:#0d0d0d;--ink:#fff;--ink2:#c3c2b7;--muted:#898781;
  --grid:#2c2c2a;--border:rgba(255,255,255,.10);--record-warm:#ff9085;--record-cold:#7ab9ff;--on-record:#0d0d0d;
  color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-feature-settings:'tnum' 1;-webkit-font-smoothing:antialiased}
.wrap{max-width:960px;margin:0 auto;padding:48px 24px 80px;display:flex;flex-direction:column;gap:26px}
.masthead{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;border-bottom:2px solid var(--ink)}
.back{font-size:12px;letter-spacing:.02em;color:var(--muted);text-decoration:none;font-weight:600}
.back:hover{color:var(--ink)}
h1{margin:0;font-size:clamp(26px,4.4vw,38px);font-weight:650;letter-spacing:-.022em;text-wrap:balance}
.caption{margin:0;max-width:62ch;color:var(--ink2);font-size:15px;line-height:1.6}
.chartcard{background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:8px}
.indicators{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;
  background:var(--border);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.indicators li{background:var(--surface);padding:16px 18px;display:flex;flex-direction:column;gap:4px}
.indicators a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px}
.indicators a:hover{text-decoration:underline}
.indicators span{color:var(--ink2);font-size:13.5px;line-height:1.5}
footer{padding-top:18px;border-top:1px solid var(--grid);font-size:12px;color:var(--muted);line-height:1.6}
a:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.notice{margin:0;padding:0;font-size:12px;line-height:1.5;color:var(--muted);max-width:62ch}
.notice strong{color:var(--ink2);font-weight:600}
footer{display:flex;flex-direction:column;gap:6px}
.credit{margin:0;font-size:12px;color:var(--muted)}

/* --- front page ------------------------------------------------------- */
.hero{display:flex;flex-direction:column;gap:12px;padding:16px 0 30px;border-bottom:2px solid var(--ink)}
.hero__eyebrow{margin:0;font-size:12px;font-weight:650;letter-spacing:.02em;color:var(--muted)}
.hero h1{margin:0;font-size:clamp(30px,6vw,50px);font-weight:650;letter-spacing:-.028em;
  line-height:1.08;text-wrap:balance}
.hero__lede{margin:0;max-width:54ch;color:var(--ink2);font-size:16px;line-height:1.6}

.panel{display:flex;flex-direction:column;gap:14px}
.panel h2{margin:0;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted)}

.cards{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(258px,1fr))}
.card{background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;
  transition:border-color .14s ease,transform .14s ease}
.card:hover{border-color:var(--muted);transform:translateY(-1px)}
.card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.card__spark{color:var(--muted);padding:14px 16px 0;opacity:.75}
.card__spark svg{display:block;width:100%;height:54px}
.card--warm .card__spark{color:var(--record-warm);opacity:1}
.card--cold .card__spark{color:var(--record-cold);opacity:1}
.card__body{padding:6px 16px 16px;display:flex;flex-direction:column;gap:4px}
/* The badge row is always there, occupied or not. A record on one card used to
   push its title, number and caption down while its neighbour's stayed put, and
   a row of cards then reads as broken rather than as different. Reserving the
   row costs 19px on the cards without one and buys a straight line across all
   of them. */
.card__badges{display:flex;flex-wrap:wrap;gap:6px;min-height:19px;margin-bottom:4px}
.badge{font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  padding:3px 7px;border-radius:3px;white-space:nowrap}
/* Ink on a record colour: white on light mode's deep red and blue, near-black
   on dark mode's pale ones. White on those was 2.2:1 and 2.1:1. */
.badge--warm{background:var(--record-warm);color:var(--on-record)}
.badge--cold{background:var(--record-cold);color:var(--on-record)}
/* Two lines reserved, because the longest title needs two and the shortest
   needs one — and without a floor the big number lands at a different height on
   every card in the row. A floor, not a fixed height: a third line still wraps
   rather than being clipped. */
.card h3{margin:0;font-size:15px;font-weight:600;letter-spacing:-.008em;line-height:1.3;
  min-height:2.6em}
.card__value{margin:2px 0 0;font-size:26px;font-weight:650;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1}
.card__unit{font-size:13px;font-weight:500;color:var(--muted);margin-left:5px;letter-spacing:0}
.card__caption{margin:2px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.card a:focus-visible{outline:2px solid var(--ink);outline-offset:-2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){.card{transition:none}.card:hover{transform:none}}

/* --- prose pages (methodology) ---------------------------------------- */
.prose section{display:flex;flex-direction:column;gap:12px}
.prose h2{margin:14px 0 0;font-size:20px;font-weight:650;letter-spacing:-.015em}
.prose h3.panelhead{margin:26px 0 2px;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted)}
.prose p{margin:0;max-width:66ch;font-size:15px;line-height:1.65;color:var(--ink2)}
.prose p strong,.prose li strong{color:var(--ink);font-weight:600}
.prose ul{margin:0;padding-left:20px;max-width:66ch;display:flex;flex-direction:column;gap:9px}
.prose li{font-size:15px;line-height:1.65;color:var(--ink2)}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  background:var(--surface);border:1px solid var(--border);border-radius:3px;padding:1px 5px}
.prose a{color:var(--ink)}
.prose table{border-collapse:collapse;font-size:14px;max-width:66ch}
.prose th,.prose td{text-align:left;padding:7px 14px 7px 0;border-bottom:1px solid var(--grid);
  color:var(--ink2)}
.prose th{color:var(--ink);font-weight:600;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase}
/* Each entry is a link target from a chart page, so it needs to be findable
   once the browser has jumped to it rather than landing flush against the
   viewport edge under the masthead. */
.prose .entry{scroll-margin-top:24px;background:var(--surface);border:1px solid var(--border);
  border-radius:4px;padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.prose .entry--pending{opacity:.72}
.prose .entry h4{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em}
.prose .entry .caption{font-size:13.5px}
.prose .pending{font-size:10.5px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);margin-left:6px}
.prose dl{margin:0;display:grid;gap:6px 18px;grid-template-columns:1fr}
.prose dl>div{display:grid;grid-template-columns:130px 1fr;gap:10px;align-items:baseline}
.prose dt{font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted)}
.prose dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.prose dd .lic{color:var(--muted)}
.prose .note{font-size:13px;line-height:1.55;padding-left:12px;border-left:2px solid var(--grid)}
@media(max-width:560px){.prose dl>div{grid-template-columns:1fr;gap:2px}}