/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-light);
  color: var(--text-primary);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
img { display: block; max-width: 100%; height: auto; }
hr { border: 0; border-top: 1px solid var(--border-color); margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; }

/* ---- Typography primitives ---- */
.serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; }
.mono  { font-family: var(--mono); }

.eyebrow {
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-secondary);
}
.eyebrow.muted { color: var(--text-muted); }

.eyebrow-num {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.display {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(48px, 7.4vw, 112px);
  line-height: 0.96;
  letter-spacing: -0.018em;
}
.display em { font-style: italic; font-weight: 300; }

.h-large {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.012em;
}

.h-med {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.1;
  letter-spacing: -0.005em;
}

.h-small {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  line-height: 1.25;
}

.lede {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 48ch;
}

.body-sm { font-size: 13.5px; line-height: 1.6; color: var(--text-secondary); }

.tag {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}