/* Base: reset, type, layout primitives. Reads tokens.css only. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + var(--sp-4)); scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-1);
  font: 400 var(--fs-16) / var(--lh-16) var(--font-ui);
  font-feature-settings: "ss01" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, p, ol, ul, dl, dd, figure, blockquote { margin: 0; }
ol, ul { padding: 0; list-style: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
code, kbd { font-family: var(--font-ui); font-size: 0.92em; background: var(--surface-2); padding: 0 4px; }

a { color: var(--text-1); text-decoration-thickness: 1px; text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-strong); text-decoration-thickness: 2px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
::selection { background: color-mix(in oklab, var(--accent) 24%, transparent); }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: var(--z-overlay);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-control);
  background: var(--accent); color: var(--on-accent); text-decoration: none;
}
.skip-link:focus { top: var(--sp-2); }

.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.icon { width: 20px; height: 20px; flex: none; }
.icon--sm { width: 16px; height: 16px; }

/* ---------- Layout ---------- */
.wrap { max-width: calc(var(--content-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--text-max); }
.stack > * + * { margin-top: var(--stack, var(--sp-4)); }

/* ---------- Type roles ---------- */
.eyebrow {
  font: 500 var(--fs-12) / var(--lh-12) var(--font-ui);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2);
}
.display-56, .display-40, .display-28, .display-22 {
  font-family: var(--font-display); font-weight: 400;
  letter-spacing: var(--display-tracking); text-wrap: balance;
}
.display-56 { font-size: calc(var(--fs-56) * var(--display-scale)); line-height: var(--lh-56); }
.display-40 { font-size: calc(var(--fs-40) * var(--display-scale)); line-height: var(--lh-40); }
.display-28 { font-size: calc(var(--fs-28) * var(--display-scale)); line-height: var(--lh-28); }
.display-22 { font-size: calc(var(--fs-22) * var(--display-scale)); line-height: var(--lh-22); }
.lead { font-size: var(--fs-18); line-height: var(--lh-18); color: var(--text-2); text-wrap: pretty; hyphens: auto; }
.prose, .article p, .article dd { hyphens: auto; }
.small { font-size: var(--fs-14); line-height: var(--lh-14); }
.meta { font-size: var(--fs-12); line-height: var(--lh-12); color: var(--text-3); }

/* Number + unit: the unit is always smaller and lighter than the value.
   Large single numbers keep proportional figures; columns use .tnum. */
.figure { white-space: nowrap; }
.figure__unit { font-family: var(--font-ui); font-weight: 400; font-size: 0.42em; letter-spacing: 0; color: var(--text-2); }
.tnum { font-variant-numeric: tabular-nums; }
.hero-figure {
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--fs-hero); line-height: 0.95; letter-spacing: var(--hero-tracking);
}
.hero-figure .figure__unit { font-size: 0.32em; margin-left: 0.06em; }

/* Reduced motion: keep fades, drop movement. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-name: none !important;
    transition-property: opacity, color, background-color, border-color !important;
  }
}

/* Print: the data table of the page, no chrome, no controls; charts print as drawn. */
@media print {
  .site-header, .skip-link, .jump, .chart-frame__actions, .chart-frame__controls, .picker, .share, .legend__x, button.info { display: none !important; }
  body { background: #fff; color: #000; }
  .chart-frame { break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
}