/* Responsive safeguards for long copy. */
html,
body { overflow-x: clip; }

main :where(h1, h2, h3, p, a),
.site-footer :where(a, span) {
  overflow-wrap: break-word;
}

.inner-hero > h1,
.inner-hero > .lead {
  position: relative;
  z-index: 2;
}

@media (max-width: 760px) {
  .hero-copy,
  .inner-hero,
  .inner-hero > *,
  .section-intro > *,
  .copy-block > *,
  .editorial-hero-copy,
  .article-copy,
  .journal-card > *,
  .release-hero > *,
  .capability-grid > * {
    min-width: 0;
  }

  .home .hero-copy h1 {
    font-size: clamp(2.2rem, 10.5vw, 3.25rem);
    line-height: .98;
  }

  .inner-hero .lead,
  .editorial-hero .lead,
  .article-hero .lead {
    max-width: 100%;
  }

  .button-link,
  .text-link,
  .editorial-action,
  .home-music-link,
  .finale-copy > a {
    max-width: 100%;
    white-space: normal;
  }

  .article-hero h1 {
    hyphens: auto;
  }
}
/* Keep inner-page imagery in document flow on narrow viewports so long headings do not overlap it. */
@media (max-width: 760px) {
  .inner-hero .inner-window { position: relative !important; top: auto !important; right: auto !important; left: auto !important; margin: 0 0 28px auto !important; }
}
@media (max-width: 760px) {
  h1, h2, h3 { overflow-wrap: anywhere; }
  .statement h2, .finale h2 { font-size: clamp(2rem, 10vw, 3rem); letter-spacing: -.03em; }
}
/* Increase narrow-viewport heading line height to prevent multiline glyph overlap. */
@media (max-width: 760px) {
  h1:not(.fields h1), h2:not(.fields-head h2) { line-height: 1.12 !important; letter-spacing: -.02em !important; }
}