/* ── Typography ─────────────────────────────────────────────────────── */

/* Display: Fraunces, low optical size for tight editorial headlines. */
.display {
  font-family: var(--serif);
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 1;
  line-height: 0.98;
  letter-spacing: -0.025em;
  text-wrap: balance;
  margin: 0;
}

.d1 { font-size: clamp(2.75rem, 1.2rem + 6.6vw, 8.5rem); }
.d2 { font-size: clamp(2.25rem, 1.3rem + 4.2vw, 5.5rem); }
.d3 { font-size: clamp(1.6rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.12; }

/* An eyebrow, set as small caps tracking rather than a badge or pill. */
.eyebrow {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--cream-faint);
  margin: 0 0 2.25rem;
}

.lede {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.55rem);
  line-height: 1.5;
  color: var(--cream);
  max-width: 28ch;
  text-wrap: pretty;
}

.body { max-width: var(--measure); color: var(--cream-dim); text-wrap: pretty; }
.body p + p { margin-top: 1.5em; }
.body em { font-style: normal; color: var(--cream); }

.amber { color: var(--amber); }

/* Per-line reveal: each line sits in a clipping mask and rises into place. */
.line-mask { display: block; overflow: hidden; }
.line-mask > span {
  display: block;
  transform: translateY(105%);
  will-change: transform;
}