/* Hard viewport containment for animated layers and narrow mobile screens. */
* { min-width: 0; }
html, body, main, .chapter {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
}
img { max-width: 100%; }

@media (max-width: 760px) {
  .hero-image { object-position: 69% center; }
  .nav { max-width: calc(100vw - 28px); }
  .hero-copy { max-width: calc(100% - 40px); }
  .hero h1 {
    max-width: 100%;
    font-size: clamp(62px, 23vw, 104px);
    line-height: .72;
    overflow-wrap: anywhere;
  }
  .hero-foot { gap: 12px; padding-right: 48px; }
  .hero-foot p { max-width: 65%; overflow-wrap: anywhere; }
  .title-mark { max-width: 35%; }
  .portrait-wrap { width: 100%; padding-right: 18px; }
  .vertical-label { right: 0; }
  .procession-copy, .horizon-copy { max-width: calc(100% - 40px); }
  .captain { grid-template-columns: minmax(0, 1fr); }
  .captain-copy, .captain figure { width: 100%; max-width: 100%; }
  .finale h2 {
    max-width: 100%;
    font-size: clamp(56px, 18vw, 92px);
    overflow-wrap: anywhere;
  }
  .coordinates {
    max-width: 100%;
    font-size: 8px;
    letter-spacing: .15em;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 380px) {
  .hero-image { object-position: 71% center; }
  .hero-copy { inset-inline: 16px; max-width: calc(100% - 32px); }
  .hero h1 { font-size: clamp(58px, 22vw, 82px); }
  .hero h1 .serif { margin-left: 3vw; }
  .kicker, .section-no { letter-spacing: .14em; }
  .proclamation, .creed, .captain { padding-left: 16px; padding-right: 16px; }
  .proclamation h2, .captain h2, .horizon h2 { font-size: clamp(43px, 14vw, 58px); }
  .procession blockquote { font-size: clamp(38px, 12vw, 52px); }
  .nav-link { font-size: 9px; }
  .scroll-cue { display: none; }
}