:root {
  --type-scale-hero: clamp(3rem, 5.5vw, 6rem);
  --type-scale-page: clamp(2rem, 4vw, 3.2rem);
  --type-scale-section: clamp(2rem, 3vw, 3rem);
  --type-scale-subsection: clamp(1.6rem, 3vw, 2.4rem);
  --type-scale-detail: clamp(1.25rem, 2vw, 1.8rem);
  --type-scale-h1: var(--type-scale-hero);
  --type-scale-h2: var(--type-scale-section);
  --type-scale-h3: var(--type-scale-subsection);
  --type-scale-h4: var(--type-scale-detail);
  --type-scale-body: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
}

body {
  font-size: var(--type-scale-body);
}

:where(h1) {
  font-size: var(--type-scale-h1);
}

:where(h2) {
  font-size: var(--type-scale-h2);
}

:where(h3) {
  font-size: var(--type-scale-h3);
}

:where(h4) {
  font-size: var(--type-scale-h4);
}

:where(
  p,
  .hero-tagline,
  .hero-sub,
  .hero-bio,
  .page-subtitle,
  .body-text,
  .section-sub,
  .a-body,
  .about-body,
  .connect-sub,
  .card-desc,
  .skills-sub,
  .cta-sub,
  .cta-body,
  .left-body,
  .form-sub,
  .fs-body,
  .cs-tagline,
  .ph-sub,
  .expert-review-finding-text,
  .expert-review-answer-text,
  .expert-review-conclusion-text,
  .expert-review-verdict-text
) {
  font-size: var(--type-scale-body);
}