/* Position players in the light panel, beyond the decorative purple strip. */
@media (max-width: 900px) {
  .stage > .view .player-shell,
  .stage > .view .film-detail .player-shell,
  .stage > .view .film-detail.has-film .player-shell {
    width: min(720px, calc(100% - 9vw));
    margin-inline: auto;
    transform: translateX(4.5vw);
  }

  .stage > .home-view .player-shell.featured-player {
    width: min(610px, calc(100% - 9vw));
  }

  /* Match the video descriptions to the corrected player inset. */
  .stage > .view .film-copy,
  .stage > .view .activity-intro,
  .stage > .view .film-caption {
    width: min(720px, calc(100% - 9vw));
    margin-inline: auto;
    transform: translateX(4.5vw);
  }

  .stage > .view .film-copy { overflow-wrap: anywhere; }

  /* The navigation below the film is already correctly centred. */
  .category-nav, .category-nav-level { transform: none; }

  /* Keep the four original Saul Bass bars and their hover behaviour. */
  .intro-title { left: 50%; }
  .intro-bars .bar-a { top: 29%; left: 5%; width: 35%; height: 6%; }
  .intro-bars .bar-b { top: 8%; right: 17%; width: 5%; height: 27%; }
  .intro-bars .bar-c { right: 5%; bottom: 29%; width: 35%; height: 6%; }
  .intro-bars .bar-d { bottom: 8%; left: 17%; width: 5%; height: 27%; }
}

@media (max-width: 540px) and (orientation: portrait) {
  .intro-bars .bar-a { top: 30%; width: 36%; }
  .intro-bars .bar-b { top: 8%; right: 14%; width: 6%; height: 27%; }
  .intro-bars .bar-c { bottom: 30%; width: 36%; }
  .intro-bars .bar-d { bottom: 8%; left: 14%; width: 6%; height: 27%; }
  .intro-route span { font-size: .56rem; }
}