/* ============================================================================
   BASE — minimal global resets + the brand's baseline body voice.
   Kept deliberately small. Anything structural (nav, cards, grids) is a
   component, not a global. This just makes a bare page already read as Notebook:
   dark cream/slate ground, serif prose, mono fine-print, hairline rules.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--surface);
  color: var(--text);
  font-family: var(--font-serif);
  font-weight: var(--w-reg);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-feature-settings: "kern" 1, "onum" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* Links — quiet by default, underline on hover. No colour-shift dance. */
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
/* Body-prose links carry a resting underline: colour alone can't be the only
   link signal (WCAG 1.4.1; protan reader). Nav/TOC/cards/headers stay quiet. */
main p a, main li a, main figcaption a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--link) 55%, transparent);
}

/* Focus — always visible, accent ring, no removal anywhere. */
:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--r-1);
}

/* Headings inherit the serif display voice. */
h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: var(--w-med);
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tk-display); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: -0.012em; }
h3 { font-size: var(--fs-h3); line-height: var(--lh-tight); }
em { font-style: italic; }
b, strong { font-weight: var(--w-semi); }

p { margin: 0 0 1.1rem; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

/* The mono "instrument" voice — every label uses it. */
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }

/* Hairline rule helpers. */
hr, .rule {
  border: 0;
  height: 1px;
  background: var(--border-strong);
  margin: var(--sp-6) 0;
}

img, svg { max-width: 100%; }
code {
  overflow-wrap: break-word;
  font-family: var(--font-mono);
  /* mono x-height reads larger than the serif at equal em — compensate so
     inline identifiers sit flush with prose instead of shouting over it */
  font-size: 0.85em;
}

/* Quantitative-value voice — results wear the machine face, prose stays human.
   .qx wraps the whole quantitative statement (wash + padding, base font);
   .qv is the number itself (mono + bold). Standalone .qv gets its own wash.
   Rollout: tools/convert-quant.py (bolded-metric → qx/qv, ≥60% quant chars). */
.qv { font-family: var(--font-mono); font-size: 0.85em; font-weight: 600; }
.qx, .qv, :not(pre) > code {
  background: color-mix(in srgb, var(--text) 12%, transparent);
  padding: 0.08em 0.32em;
  border-radius: 4px;
}
.qx .qv { background: none; padding: 0; border-radius: 0; }