/* ============================================================
   BASE — reset + editorial typography
   ============================================================ */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'kern', 'liga', 'calt', 'ss01';
  overflow-x: hidden;
}

/* ─── Display headlines ──────────────────────────────────── */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1.08;
  font-weight: 600;
}
h1 { letter-spacing: -0.04em; line-height: 0.98; font-weight: 700; }
h2 { letter-spacing: -0.03em; line-height: 1.05; }
h3 { letter-spacing: -0.02em; }

/* ─── Body links ─────────────────────────────────────────── */
a {
  color: var(--teal);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover { color: var(--teal-dark); }

::selection { background: var(--teal); color: #fff; }

img, svg { display: block; max-width: 100%; }

input, textarea, select, button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ─── Dark section text inversions ───────────────────────── */
.on-dark, .on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 {
  color: var(--on-dark);
}
.on-dark p, .on-dark span:not(.tag):not(.accent) {
  color: var(--on-dark-muted);
}