/* Mobile typography hardening.
   Large display text must fit the content box even when iOS falls back from
   Arial Narrow to a wider system face. Keep this file after the primary CSS. */

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (max-width: 850px) {
  .hero-copy,
  .section-heading > *,
  .early-records-copy,
  .discipline-copy,
  .archive-intro > *,
  .mythic-heading > *,
  .detail-copy,
  .verdict-copy {
    min-width: 0;
  }

  .hero h1 {
    max-width: 100%;
    font-size: clamp(4.25rem, 21vw, 7.75rem);
  }

  .discipline-copy h3 {
    max-width: 100%;
    font-size: clamp(3rem, 15.5vw, 6.25rem);
  }

  .section-heading h2,
  .early-records-copy h2,
  .mythic-heading h2,
  .detail-copy h2,
  .verdict-copy h2 {
    max-width: 100%;
  }
}

@media (max-width: 580px) {
  .section-heading h2,
  .early-records-copy h2,
  .mythic-heading h2,
  .detail-copy h2 {
    font-size: clamp(2.5rem, 11.75vw, 4.25rem);
  }

  .provenance-copy h2 {
    max-width: 100%;
    font-size: clamp(2.35rem, 11.75vw, 4rem);
  }

  .verdict-copy h2 {
    font-size: clamp(4.75rem, 22vw, 8.5rem);
  }
}