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

:root {
  --serif: 'Space Grotesk', Arial, sans-serif;
  --sans: 'Atkinson Hyperlegible Next', Arial, sans-serif;
}

body {
  font-size: 17px;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1,
.section-head h2,
.sticky-copy h2,
.guide-copy h2,
.coach-copy h2,
.finale h2,
.app-copy h2,
.guide-label,
.boot-mark,
.coach-portrait::before {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(58px, 8.2vw, 132px);
  line-height: .91;
  max-width: 9.5ch;
}

.section-head h2,
.sticky-copy h2,
.guide-copy h2,
.coach-copy h2,
.app-copy h2 {
  line-height: 1;
  letter-spacing: -0.03em;
}

.finale h2 {
  line-height: .9;
  letter-spacing: -0.04em;
}

h1 em,
.section-head h2 em,
.sticky-copy h2 em,
.guide-copy h2 em,
.coach-copy h2 em,
.app-copy h2 em,
.finale h2 em {
  font-weight: 600;
}

.hero-sub,
.sticky-copy p,
.guide-copy p,
.coach-copy p,
.app-copy p,
.proof b,
.service h3,
.price-row b,
.track h3,
.project-meta h3 {
  font-family: var(--sans);
}

.hero-sub,
.sticky-copy p,
.guide-copy p,
.coach-copy p,
.app-copy p {
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.65;
}

.service p,
.track p {
  font-size: 16px;
  line-height: 1.65;
}

.service h3 {
  line-height: 1.08;
  max-width: 12ch;
}

.eyebrow,
.nav-mid,
.nav-links,
.hero-stats span,
.pointer-hint,
.section-head > span,
.service-no,
.proof span,
.proof small,
.guide-copy > span,
.coach-copy > span,
.finale > span,
.project-meta span,
.project-meta small,
.track span,
.footer {
  font-size: clamp(10px, .72vw, 12px);
  line-height: 1.45;
  letter-spacing: .075em;
}

.btn,
.text-link,
.filter,
.mode b {
  font-size: 12px;
  line-height: 1.35;
  letter-spacing: .065em;
}

.btn {
  min-height: 48px;
  padding: 14px 20px;
}

.proof b {
  font-size: clamp(22px, 2vw, 29px);
  line-height: 1.25;
}

body.archive h1 {
  font-size: clamp(58px, 8.2vw, 132px);
  line-height: .91;
  max-width: 10ch;
}

@media (max-width: 900px) {
  .hero-copy,
  body.archive .hero-copy { top: 13vh; }
  .hero-sub,
  body.archive .hero-sub { max-width: 520px; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }
  .hero-copy,
  body.archive .hero-copy { top: 12vh; }
  .hero h1,
  body.archive h1 { font-size: clamp(48px, 15vw, 76px); line-height: .94; }
  .hero-sub,
  body.archive .hero-sub { font-size: 17px; line-height: 1.5; }
  .section-head h2 { font-size: clamp(42px, 11vw, 64px); line-height: 1; }
}