:root {
  --body-size: 1.125rem;
  --small-size: .875rem;
  --heading-ink: #dce5ed;
}

html[data-theme="light"] {
  --ink: #3f4750;
  --heading-ink: #535f6b;
  --muted: #66717c;
}

html[data-theme] :where(h1, h2, h3, h4, h5, h6) {
  color: var(--heading-ink);
}

html[data-font-size="s"] {
  font-size: 13px;
  --body-size: 1.125rem;
  --small-size: .875rem;
}

html[data-font-size="m"] {
  font-size: 14px;
  --body-size: 1.125rem;
  --small-size: .875rem;
}

html[data-font-size="l"] {
  font-size: 15px;
  --body-size: 1.125rem;
  --small-size: .875rem;
}

.hero-copy > p:not(.hero-kicker) {
  font-size: var(--body-size);
}

.button {
  font-size: var(--body-size);
}

.hero h1 {
  font-size: clamp(2.625rem, calc(3.5rem + .5vw), 4.25rem);
}

.section-heading h2,
.collective-intro h2,
.privacy h2,
.closing h2,
.permission-intro h2,
.video-material-copy h2 {
  font-size: clamp(2.125rem, calc(2.5rem + .5vw), 3.125rem);
}

.closing h2 {
  color: #fff;
  font-size: clamp(2rem, calc(2.25rem + .4vw), 2.75rem);
}

@media (max-width: 760px) {
  .hero h1 {
    font-size: clamp(2.375rem, calc(2.25rem + 2vw), 3rem);
  }

  .section-heading h2,
  .collective-intro h2,
  .privacy h2,
  .closing h2,
  .permission-intro h2,
  .video-material-copy h2 {
    font-size: clamp(1.875rem, calc(1.75rem + 1.5vw), 2.5rem);
  }
}