/* Typography: headings, body text, eyebrows, section titles */

/* Ramps are linear fits between the 390 and 1440 px widths; recompute them when a size token moves. */
:root {
  --ramp-display: clamp(var(--text-mobile-display), 2.29vw + 27.09px, var(--text-display));
  --ramp-h2: clamp(var(--text-mobile-h2), 1.14vw + 23.54px, var(--text-h2));
  --ramp-lede: clamp(var(--text-mobile-lede), 0.38vw + 16.51px, var(--text-lede));
  --ramp-body-large: clamp(var(--text-mobile-body-large), 0.19vw + 17.26px, var(--text-body-large));
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  text-wrap: balance;
}

h1 {
  font-size: var(--ramp-display);
  line-height: 1.05;
  color: var(--color-white);
}
h2 {
  font-size: var(--ramp-h2);
  line-height: 1.12;
}
h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
h4 {
  font-size: var(--text-body);
  font-weight: 700;
}

@media (min-width: 768px) {
  h1 {
    line-height: 1;
  }
  h2 {
    line-height: 1.05;
  }
}

em {
  font-style: normal;
  color: var(--color-accent);
}

.eyebrow {
  display: inline-block;
  margin-bottom: var(--space-sm);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-quiet);
}

.section__title {
  margin-bottom: var(--space-md);
  max-width: 24ch;
}
.section__lede {
  font-size: var(--ramp-body-large);
  line-height: 1.5;
  color: var(--color-muted);
  max-width: 60ch;
  margin-bottom: var(--space-lg);
}
.section__footnote {
  margin-top: var(--space-lg);
}