html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-primary);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Display face is reserved for the page-level statement and big numerals.
   Everything else is Inter, tightly tracked — modern rather than editorial. */
h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  max-width: 20ch;
  text-wrap: balance;
}

h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  text-wrap: balance;
}
h2 { font-size: var(--fs-2xl); max-width: 24ch; }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); font-weight: 600; letter-spacing: -.02em; }
h5 { font-size: var(--fs-sm); }

p { color: var(--text-secondary); text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

strong { color: var(--text-primary); font-weight: 600; }

a { color: var(--brand-fg); transition: color var(--dur-base) var(--ease); }
a:hover { color: var(--brand-bg-hover); }

code { font-family: var(--font-mono); font-size: .9em; }

hr { border: none; height: 1px; background: var(--hairline); }

::selection { background: var(--brand-200); color: var(--brand-900); }

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

/* ---- Section rhythm ---------------------------------------------------- */
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--flush-top { padding-top: 0; }
.section--surface-1 { background: var(--surface-1); }
.section--hairline { border-top: 1px solid var(--border-subtle); }

/* Stacks: vertical rhythm without per-element margin guesswork. */
.stack > * + * { margin-top: var(--space-4); }
.stack-lg > * + * { margin-top: var(--space-6); }