/* Preserve the supplied two-line hero within one animated, accessible H1. */
#intro-title { white-space: pre-line; }

/* Shared roles below desktop; rem floors honor browser text-size preferences. */
:root {
  --type-hero-h1: clamp(2.5rem, 7vw, 4.5rem);
  --type-page-h1: clamp(2.5rem, 6vw, 4.5rem);
  --type-display-h2: clamp(2.25rem, 6vw, 4rem);
  --type-card-h2: 2rem;
  --type-section-h2: clamp(1.75rem, 3vw, 2rem);
  --type-section-h3: 1.5rem;
  --type-body: 1rem;
  --type-body-large: 1.125rem;
  --type-small: .875rem;
}
body { font-size: var(--type-body); }
#opening h1 { font-size: var(--type-hero-h1); }
main.case h1 { font-size: var(--type-page-h1); }
.statement h2, #trailer-interlude h2, #studio-title { font-size: var(--type-display-h2); }
#contact .contact-panel h2 { font-size: var(--type-card-h2); }
main.case section h2 { font-size: var(--type-section-h2); }
main.case h3, main.case details li h3 { font-size: var(--type-section-h3); }
.panel .credit, .media-caption, footer { font-size: var(--type-small); }

/* Preserve the approved desktop display sizes. */
@media (min-width: 901px) {
  :root {
    --type-hero-h1: clamp(3.5rem, 6.75vw, 6.75rem);
    --type-page-h1: clamp(2.5rem, 5vw, 5.5rem);
    --type-display-h2: clamp(2.5rem, 6vw, 6rem);
    --type-card-h2: 2.5rem;
    --type-section-h2: 2rem;
    --type-heading-weight: 500;
    --type-heading-leading: 1.08;
    --type-heading-tracking: -.025em;
  }

  #opening h1 {
    font-size: var(--type-hero-h1);
  }

  main.case h1 {
    font-size: var(--type-page-h1);
  }

  .statement h2,
  #trailer-interlude h2,
  #studio-title {
    font-size: var(--type-display-h2);
    font-weight: var(--type-heading-weight);
    line-height: var(--type-heading-leading);
    letter-spacing: var(--type-heading-tracking);
    max-width: 15ch;
  }

  #studio-title {
    max-width: none;
    margin-bottom: 36px;
    color: #fff;
  }

  #contact .contact-panel h2 {
    font-size: var(--type-card-h2);
  }

  main.case section h2 {
    font-size: var(--type-section-h2);
  }

  html[data-route='static'] #studio-title .reveal-char {
    opacity: 1;
    animation: none;
    transform: none;
    filter: none;
  }
}