:root {
  --font-body: Manrope, Arial, sans-serif;
  --font-display: 'Grenze Gotisch', Georgia, serif;
}

/* Display typography is deliberately limited to brand and major hierarchy. */
.brand > span:last-child,
#page-title,
.detail-hero h2,
.session-heading h2,
.form-card > h2,
.class-heading h2,
.similar-games-heading h2,
.cycle-preview-heading h2,
.cycle-preview-empty h2,
.empty > h2 {
  font-family: var(--font-display);
  font-synthesis: none;
  font-weight: 700;
  line-height: .98;
  letter-spacing: .01em;
}

.brand > span:last-child {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .015em;
}

#page-title {
  font-size: clamp(32px, 4vw, 42px);
  line-height: .94;
}

.detail-hero h2 {
  line-height: .92;
  letter-spacing: -.01em;
}

.session-heading h2 {
  line-height: 1;
  letter-spacing: 0;
}

.form-card > h2,
.class-heading h2,
.similar-games-heading h2,
.cycle-preview-heading h2,
.cycle-preview-empty h2,
.empty > h2 {
  line-height: 1.08;
  letter-spacing: .015em;
}

@media (max-width: 760px) {
  .brand > span:last-child {
    font-size: 20px;
  }

  #page-title {
    font-size: 32px;
  }
}

@media (max-width: 420px) {
  .brand > span:last-child {
    font-size: 18px;
  }

  #page-title {
    font-size: 29px;
  }
}