/* Landscape entrance: horizontal routes frame the signature more loosely,
   while the upright routes sit nearer to it. */
@media (max-width: 900px) and (orientation: landscape) {
  .intro-bars .bar-a { left: 3%; width: 32%; }
  .intro-bars .bar-c { right: 3%; width: 32%; }
  .intro-bars .bar-b { right: 22%; }
  .intro-bars .bar-d { left: 22%; }
}

@media (max-width: 540px) and (orientation: portrait) {
  /* Give the masthead its own edge; the purple stage strip starts below it. */
  .masthead { margin-left: 9.5%; }

  /* Keep the black ornament at the same top position as on inner pages.
     Auto margins above and below the film/menu group centre that group. */
  .site:has(.home-view:not([hidden])) .stage {
    justify-content: flex-start;
    gap: 0;
  }
  .site:has(.home-view:not([hidden])) .black-band {
    flex: 0 0 auto;
  }
  .site:has(.home-view:not([hidden])) .home-view {
    margin-top: auto;
  }
  .site:has(.home-view:not([hidden])) .category-nav {
    margin-top: 22px;
    margin-bottom: auto;
  }
}