@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&family=Crimson+Pro:wght@400;500;600;700&display=swap");

:root {
  --font-display: "Crimson Pro", Georgia, serif;
  --font-body: "Atkinson Hyperlegible", "Segoe UI", sans-serif;
  --eyebrow-size: 0.84rem;
  --eyebrow-weight: 700;
  --eyebrow-spacing: 0.16em;
  --title-hero-size: clamp(2.35rem, 4.5vw, 4.2rem);
  --title-hero-line-height: 0.98;
  --title-hero-max: 12ch;
  --title-hero-wide-max: 24ch;
  --title-section-size: clamp(1.8rem, 3.4vw, 2.9rem);
  --title-section-line-height: 1.02;
  --lede-size: 1.08rem;
  --lede-line-height: 1.72;
}

body {
  font-family: var(--font-body);
}

.brand,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.eyebrow {
  margin: 0 0 14px;
  color: var(--teal, currentColor);
  font-size: var(--eyebrow-size);
  font-weight: var(--eyebrow-weight);
  letter-spacing: var(--eyebrow-spacing);
  text-transform: uppercase;
}

.title-hero {
  margin: 0;
  max-width: var(--title-hero-max);
  font-size: var(--title-hero-size);
  line-height: var(--title-hero-line-height);
  text-wrap: balance;
}

.title-hero--wide {
  max-width: var(--title-hero-wide-max);
}

.title-section {
  font-size: var(--title-section-size);
  line-height: var(--title-section-line-height);
}

.lede {
  max-width: 56ch;
  margin: 22px 0 0;
  color: var(--muted, inherit);
  font-size: var(--lede-size);
  line-height: var(--lede-line-height);
}

@media (max-width: 560px) {
  :root {
    --title-hero-size: clamp(2rem, 10.5vw, 2.9rem);
  }

  .title-hero {
    max-width: none;
  }
}