/* Show the complete widescreen performance above the mobile introduction.
   The stage gently dissolves into the same dark burgundy as the text area. */
@media (max-width: 700px) {
  body[data-page="home"] .cinema-hero.royal-hero {
    height: max(100svh, calc(66px + min(56.25vw, 292.5px) + 415px));
    min-height: 690px;
    background: #130304;
  }
  body[data-page="home"] .royal-hero .hero-screen,
  body[data-page="home"] .royal-hero.royal-video-playing .hero-screen {
    top: calc(66px + env(safe-area-inset-top, 0px));
    left: 50%;
    right: auto;
    bottom: auto;
    width: min(100%, 520px);
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    transform: translateX(-50%);
    background: #130304 url("/assets/video-chMbMF4h55w.jpg") center / cover no-repeat;
    overflow: hidden;
  }
  body[data-page="home"] .royal-hero .hero-screen #hero-film,
  body[data-page="home"] .royal-hero .hero-screen > iframe {
    position: absolute;
    top: 0;
    left: 0;
    right: auto;
    bottom: auto;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    transform: none;
    border: 0;
  }
  body[data-page="home"] .royal-hero .hero-screen::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(19, 3, 4, .08) 0%, transparent 45%, rgba(19, 3, 4, .38) 72%, #130304 100%);
  }
  body[data-page="home"] .royal-hero .royal-wash {
    background: linear-gradient(to bottom, rgba(19, 3, 4, .35), transparent 17%, transparent 36%, #130304 59%);
    opacity: .22;
  }
  body[data-page="home"] .royal-hero .royal-copy {
    top: calc(66px + env(safe-area-inset-top, 0px) + min(56.25vw, 292.5px) + 4px);
    bottom: auto;
    left: 24px;
    right: 24px;
    width: auto;
    max-width: 480px;
    margin-inline: auto;
    padding: 0;
    transform: none;
    text-align: left;
  }
  body[data-page="home"] .royal-hero .royal-copy h1 {
    font-size: clamp(46px, 13vw, 62px);
    line-height: .92;
    margin-bottom: 16px;
  }
  body[data-page="home"] .royal-hero .royal-copy .royal-summary {
    max-width: 390px;
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
  }
}
@media (max-width: 360px) {
  body[data-page="home"] .royal-hero .royal-copy { left: 20px; right: 20px; }
  body[data-page="home"] .royal-hero .royal-copy h1 { font-size: 45px; margin-bottom: 12px; }
  body[data-page="home"] .royal-hero .royal-copy .royal-summary { font-size: 14px; line-height: 1.55; }
}