/* ==========================================================================
   base.css — reset, page, typography, layout primitives (lane A1 "shell")
   Reads tokens.css only. Components live in components.css.
   ========================================================================== */

/* ---- Reset ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--space-5));
  hanging-punctuation: first last;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--track-text);
  font-weight: var(--fw-regular);
  font-kerning: normal;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: default; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
figure { margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }
:target { scroll-margin-top: calc(var(--header-h) + var(--space-5)); }
::selection { background: var(--selection); color: var(--ink); }

/* ---- Focus ------------------------------------------------------------ */
:focus { outline: none; }
:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: 3px;
}
main:focus-visible { outline: none; }

/* ---- Typography ------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  color: var(--ink);
  font-weight: var(--fw-semi);
  text-wrap: balance;
  font-synthesis: none;
}
h1, h2, .h1, .h2, .display {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  letter-spacing: var(--track-h);
}
.display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  text-wrap: balance;
}
h1, .h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
h2, .h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
h3, .h3 {
  font-family: var(--font-text);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: -.012em;
  font-weight: var(--fw-semi);
}
h4, .h4, h5, h6 {
  font-family: var(--font-text);
  font-size: var(--fs-h4);
  line-height: var(--lh-h3);
  font-weight: var(--fw-semi);
}
h1 em, h2 em, .display em, .h1 em, .h2 em {
  font-style: italic;
  letter-spacing: -.005em;
}
p, li, dd, figcaption, blockquote { text-wrap: pretty; }
strong, b { font-weight: var(--fw-semi); }
em, i { font-style: italic; }
small, .small { font-size: var(--fs-small); }

.lead, .dek {
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-2);
  letter-spacing: -.008em;
  max-width: 38em;
}

.meta, .mono-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  line-height: var(--lh-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--ink-meta);
}
.mono, code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: .88em;
  letter-spacing: 0;
}
.num, .tabular { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-meta); }

/* Inline code / file paths */
:not(pre) > code {
  padding: .08em .36em;
  border-radius: 4px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: .84em;
  white-space: break-spaces;
  overflow-wrap: anywhere;
}
kbd {
  padding: .05em .4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  font-size: .8em;
}
pre {
  overflow-x: auto;
  padding: var(--space-4) var(--space-5);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-media);
  font-size: .84rem;
  line-height: 1.6;
  tab-size: 2;
  -webkit-overflow-scrolling: touch;
}
pre code { font-size: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin-block: var(--space-7);
}

abbr[title] { text-decoration: underline dotted; text-underline-offset: .2em; cursor: help; }
sup, sub { font-size: .7em; line-height: 0; }

/* ---- Links ------------------------------------------------------------ */
a {
  color: var(--accent-ink);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  text-decoration-color: color-mix(in srgb, var(--accent-ink) 38%, transparent);
  transition: color var(--dur-fast) var(--ease-out), text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { text-decoration-color: currentColor; }
a:not([class]):visited { color: var(--accent-ink); }

/* External links inside running text get a quiet arrow (alt text empty for screen readers). */
.prose a[href^="http"]:not([class])::after,
.ext::after {
  content: "\2197" / "";
  display: inline-block;
  margin-left: .12em;
  font-size: .8em;
  text-decoration: none;
  color: var(--ink-3);
}

/* ---- Layout primitives ------------------------------------------------ */
.container {
  width: 100%;
  max-width: calc(var(--w-content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: calc(var(--w-wide) + 2 * var(--gutter)); }
.container--prose { max-width: calc(var(--w-prose) + 2 * var(--gutter)); }

/* .prose is a flow column: its children sit at the prose measure, left-aligned to the
   container edge, while .bleed children (charts, media, tables) take the full width. */
.prose { width: 100%; }
.prose > * { max-width: var(--w-prose); }
.prose > * + * { margin-top: var(--flow); }
.prose > :is(h2, .h2) { margin-top: calc(var(--space-8) + var(--space-2)); }
.prose > :is(h3, .h3) { margin-top: var(--space-7); }
.prose > :is(h2, h3, .h2, .h3, .eyebrow) + * { margin-top: var(--space-4); }
.prose > .eyebrow + :is(h2, h3) { margin-top: var(--space-3); }
.prose > :is(figure, .figure, .media, .media-row, .quote, .callout, .table-wrap, .diagram, .stat-grid, .artefact, pre, .bleed) {
  margin-block: var(--space-7);
}
.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose > .bleed, .prose > .figure, .prose > .stat-grid, .prose > .media-row { max-width: none; }
.prose--center > * { margin-inline: auto; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--ink-3); }
.prose ol > li::marker { font-family: var(--font-mono); font-size: .85em; }
.prose p, .prose li { color: var(--ink-2); }
.prose strong { color: var(--ink); }

.bleed { width: 100%; max-width: none; }
.measure { max-width: var(--w-prose); }

/* ---- Sections --------------------------------------------------------- */
.section { padding-block: var(--section-pad); }
.section--tight { padding-block: calc(var(--section-pad) * .6); }
.section--flush-top { padding-top: 0; }
.section--rule { border-top: 1px solid var(--line); }
.section--alt { background: var(--paper-2); }
.section--alt :not(pre) > code { background: var(--paper-3); }
/* Two plain sections in a row share one gap instead of stacking two. */
.section:not(.section--alt) + .section:not(.section--alt):not(.section--rule) { padding-top: 0; }

.section-head { margin-bottom: var(--space-7); max-width: 46rem; }
.section-head > * + * { margin-top: var(--space-4); }
.section-head > .eyebrow + * { margin-top: var(--space-3); }
.section-head .lead { margin-top: var(--space-4); }
.section-head--split {
  display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between;
  gap: var(--space-4) var(--space-7); max-width: none;
}

/* Generic grids */
.grid-2, .grid-3 { display: grid; gap: var(--space-6); }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.split { display: grid; gap: var(--space-6) var(--space-8); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
  .split--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.stack > * + * { margin-top: var(--space-4); }

/* ---- Utilities -------------------------------------------------------- */
.visually-hidden, .sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.nowrap { white-space: nowrap; }
.no-js-hide { display: none; }
.js .no-js-hide { display: revert; }

/* ---- Page transitions (View Transitions API, same-origin navigation) -- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 260ms; animation-timing-function: var(--ease-out); }
::view-transition-group(site-header) { animation: none; }

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Print ------------------------------------------------------------ */
@media print {
  .site-header, .site-footer, .skip, .toc, .theme-toggle, .figure-actions { display: none !important; }
  body { background: #fff; color: #000; }
  .section { padding-block: 1.5rem; }
  a { color: inherit; }
}