/* ===========================================================
   Typography
   =========================================================== */

.eyebrow {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}

.display-xl {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(56px, 9.5vw, 156px);
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-style: italic;
  margin: 0;
}
.display-l {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(40px, 5.5vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.015em;
  margin: 0;
}
.display-m {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0;
}
.display-s {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
  margin: 0;
}

.lede {
  font-family: var(--f-body);
  font-size: 22px;
  line-height: 1.45;
  color: var(--ink-2);
  font-weight: 350;
  letter-spacing: -0.005em;
}
.lede em { color: var(--ink); font-style: italic; }

.body p {
  margin: 0 0 1.15em;
  font-size: 18px;
  line-height: 1.62;
  color: var(--ink);
}
.body p em { font-style: italic; }
.body p strong { font-weight: 600; }

.smcaps {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.05em;
}

.mono { font-family: var(--f-mono); }

.num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
}