/* Shared hero typography for the site's coded subtitle-bearing heroes. */
.about-page .site-hero-copy h1,
.history-page .site-hero-copy h1 {
  max-width: 20ch;
  margin: 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(34px, 4.4vw, 70px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, .48);
}

.about-page .site-hero-copy > p:not(.site-hero-attribution),
.history-page .site-hero-copy > p:not(.site-hero-attribution) {
  max-width: 34ch;
  margin: clamp(8px, 1vw, 14px) 0 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(16px, 1.6vw, 25px);
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .42);
}

.about-page .site-hero-copy .site-hero-attribution,
.history-page .site-hero-copy .site-hero-attribution {
  margin: clamp(6px, .7vw, 10px) 0 0;
  color: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(13px, 1.05vw, 18px);
  font-weight: 400;
  font-style: normal;
  line-height: 1.2;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .42);
}

@media (max-width: 620px) {
  .about-page .site-hero-copy h1,
  .history-page .site-hero-copy h1 {
    max-width: 16ch;
    font-size: clamp(32px, 9vw, 48px);
  }

  .about-page .site-hero-copy > p:not(.site-hero-attribution),
  .history-page .site-hero-copy > p:not(.site-hero-attribution) {
    max-width: 30ch;
    font-size: clamp(15px, 4.6vw, 20px);
  }

  .about-page .site-hero-copy .site-hero-attribution,
  .history-page .site-hero-copy .site-hero-attribution {
    font-size: 14px;
  }
}