/* Keep the photographic journey, with a separate portrait chapter on phones. */
html:has(body.room-page) { scroll-padding-top: 0; overflow-x: clip; }
@media (max-width: 1100px) {
  .r-header { gap: 18px; padding: 16px 24px; }
  .r-brand > span { display: none; }
  .r-menu { display: flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; padding: 8px 0; font-size: 12px !important; }
  .r-menu > span { font-size: 20px; }
  .r-header nav { position: absolute; inset: 100% 0 auto; display: none; margin: 0; padding: 18px 24px 28px; background: var(--ink); color: var(--paper); border-top: 1px solid #fff3; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .r-header.is-menu-open nav { display: flex; flex-direction: column; gap: 0; }
  .r-header nav a { display: flex; align-items: center; min-height: 54px; font-size: 17px; border-bottom: 1px solid #fff2; }
  .r-header.is-menu-open { background: var(--ink); color: var(--paper); }
  .r-header .r-sponsor { min-height: 44px; min-width: 0; gap: 20px; font-size: 12px; }
}

@media (max-width: 900px) {
  .r-header { padding: 14px 20px; gap: 18px; }
  .r-brand-logo { width: 36px; height: 38px; }
  .r-journey { height: max(270svh, 1620px); min-height: 0; }
  .r-stage { height: 100svh; min-height: 600px; }
  .r-opening { padding: 120px 22px 132px; }
  .r-opening-top { top: 106px; left: 22px; right: 22px; gap: 20px; font-size: 9px; }
  .r-opening-top p span { font-size: 8px; }
  .r-opening-top > a { flex-shrink: 0; font-size: 9px; }
  .r-opening h1 { font-size: clamp(125px, 36vw, 260px); line-height: .77; margin-bottom: 30px; }
  .r-opening-foot { gap: 18px; padding-top: 20px; font-size: 10px; }
  .r-opening-foot p > span { font-size: 11px; line-height: 1.6; max-width: 180px; }
  .r-film-open { font-size: 9px !important; max-width: 146px; grid-template-columns: 36px auto; }
  .r-film-open .r-play { width: 36px; height: 36px; }
  .r-film-open small { font-size: 8px; }
  .r-years-title p { font-size: clamp(66px, 18vw, 145px); }
  .r-years-title > span { font-size: 9px; }
  .r-years-bottom { left: 22px; right: 22px; bottom: 106px; gap: 14px; font-size: 10px; }
  .r-years-bottom a { min-height: 46px; padding: 12px 18px; font-size: 12px; }
  .r-rail { left: 22px; right: 22px; bottom: 24px; font-size: 9px; }
  .r-continue { min-height: 44px; font-size: 9px; }
  .r-progress { margin-bottom: 0; }

  .r-josh, .room-page.is-still .r-josh {
    position: relative; inset: auto; height: auto; min-height: 0; display: flex;
    padding: 66px 24px 60px; background: var(--paper); color: var(--ink);
    opacity: 1; transform: none !important; pointer-events: auto; scroll-margin-top: 72px;
  }
  .r-josh-eyebrow { position: static; padding: 0; max-width: 280px; font-size: 10px; letter-spacing: .12em; line-height: 1.8; }
  .r-josh h2 { position: static; padding: 0; width: 100%; margin: 36px 0 0; z-index: auto; display: block; line-height: .87; transform: none !important; }
  .r-josh h2 span:first-child { display: block; width: auto; font-size: clamp(52px, 16vw, 100px); }
  .r-josh h2 span:first-child br { display: none; }
  .r-josh h2 span:last-child { display: block; width: auto; margin-top: 8px; text-align: center; font-size: clamp(82px, 27vw, 168px); color: var(--purple); }
  .r-josh figure { width: min(100%, 380px); margin: 36px 0 0; transform: none; }
  .r-josh figure img { width: 100%; height: auto; transform: translateY(var(--portrait-lift, 0px)); }
  .r-josh figure::before { inset: 15% -2% 26%; border-radius: 48% 52% 46% 54%; transform: rotate(var(--halo-turn, -8deg)); }
  .r-josh figcaption { position: relative; left: auto; width: 100%; max-width: none; transform: none; margin-top: 22px; font-size: clamp(26px, 7.5vw, 36px); line-height: 1.15; letter-spacing: .015em; }
  .r-josh figcaption span { margin-top: 10px; font-size: 19px; }
  .r-josh-copy { position: static; display: block; width: 100%; max-width: 440px; margin-top: 36px; text-align: center; font-size: 14px; line-height: 1.8; }
  .r-josh-copy a { width: 100%; min-width: 0; min-height: 54px; margin-top: 25px; padding: 15px 0; font-size: 14px; text-align: left; }
  .r-josh-copy a span { font-size: 24px; }

  .r-alumni { padding-top: 30px; }
  .r-section-line { font-size: 9px; line-height: 1.6; }
  .r-alumni-heading { margin-top: 40px; }
  .r-alumni-heading > p { font-size: 21px; max-width: 440px; }
  .r-alumni-heading > p > span { font-size: 13px; }
  .r-players-intro, .r-players-note { font-size: 8px; line-height: 1.6; }
  .r-player, .r-wave-player { translate: 0 var(--card-lift, 0px); }
  .r-players { margin-inline: 0; gap: 24px 14px; }
  .r-player-label { left: 12px; right: 12px; font-size: clamp(28px, 8vw, 46px); line-height: .95; }
  .r-player-aaron .r-player-label, .r-player-grant .r-player-label { font-size: clamp(26px, 7.5vw, 42px); }
  .r-player:not(.r-player-bam) .r-player-arrow { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; font-size: 17px; }
  .r-player:not(.r-player-bam) .r-player-label { padding-bottom: 35px; }
  .r-player-year { font-size: 8px; max-width: calc(100% - 18px); }
  .r-player-bam { height: 112vw; max-height: 620px; }
  .r-player-bam .r-player-label { font-size: clamp(55px, 16vw, 86px); }
  .r-next-wave-heading p { font-size: 13px; }
  .r-wave-note { font-size: 8px; }
  .r-film-chapter > .r-section-line { font-size: 9px; }
  .r-film-heading > p { font-size: 14px; }
  .r-screen-play small { font-size: 9px; }
  .r-screen figcaption { font-size: 9px; line-height: 1.6; }
  .r-next { padding: 42px 24px 32px; }
  .r-next-top { font-size: 10px; line-height: 1.8; gap: 24px; }
  .r-next h2 { margin: 58px 0 40px; }
  .r-next-bottom { font-size: 14px; }
  .r-next-detail { font-size: 11px; line-height: 1.8; }
  .r-footer { padding: 28px 24px; font-size: 10px; }
  .r-footer button, .r-footer [data-replay] { font-size: 10px; }
  .room-page.is-still .r-player, .room-page.is-still .r-wave-player { translate: none; }
  .room-page.is-still .r-josh figure img, .room-page.is-still .r-josh figure::before { transform: none; }
}

@media (max-width: 360px) {
  .r-stage { min-height: 660px; }
  .r-journey { height: max(270svh, 1782px); }
  .r-header { padding-inline: 14px; gap: 12px; }
  .r-header .r-sponsor { padding-inline: 12px; gap: 10px; font-size: 11px; }
  .r-opening-foot { flex-direction: column; gap: 18px; }
  .r-opening { padding-bottom: 124px; }
  .r-opening h1 { margin-bottom: 22px; }
  .r-opening-foot p > span { max-width: none; }
  .r-film-open { max-width: none; }
  .r-josh { padding-inline: 20px; }
}

@media (max-width: 900px) and (orientation: landscape) {
  .r-stage { min-height: 520px; }
  .r-opening h1 { font-size: 22vw; white-space: nowrap; }
  .r-opening h1 > span { display: inline; }
  .r-opening-top { top: 96px; }
  .r-josh figure { width: min(65%, 380px); }
}

@media (prefers-reduced-motion: reduce) {
  .r-player, .r-wave-player { translate: none; }
  .r-josh figure img, .r-josh figure::before { transform: none; }
}