@media (max-width: 880px) {
  /* Keep the hero copy intentional on narrow screens instead of breaking at
     awkward single characters, and reserve a clear band for the bottom dock. */
  .hero-opening-copy {
    top: 41% !important;
  }

  .hero-opening-copy h1 {
    max-width: 340px;
    font-size: clamp(31px, 8.8vw, 35px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.095em !important;
  }

  .hero-opening-copy > span {
    max-width: 300px;
    margin-top: 16px !important;
    font-size: 11px !important;
    line-height: 1.75 !important;
  }

  .hero-opening-meta {
    right: 18px !important;
    bottom: 104px !important;
    transform: scale(.86);
    transform-origin: right bottom;
  }

  .detail-hero-copy {
    top: 44% !important;
    padding-top: 50px !important;
    transform: translateY(-42%);
  }

  .detail-hero-copy h1 {
    max-width: 330px;
    margin: 18px 0 20px !important;
    font-size: clamp(32px, 9vw, 36px) !important;
    line-height: 1.16 !important;
    letter-spacing: -.09em !important;
  }

  .detail-hero-copy strong {
    max-width: 300px;
    font-size: 12px !important;
    line-height: 1.75 !important;
  }

  .detail-hero-copy > p {
    margin-bottom: 22px !important;
  }

  .detail-hero-index {
    bottom: 104px !important;
    transform: scale(.86);
    transform-origin: right bottom;
  }

  .right-dock {
    z-index: 80 !important;
  }
}