/* Mobile landscape is intentionally isolated so desktop remains pixel-identical. */
@media (orientation: landscape) and (max-width: 1000px) and (max-height: 600px) {
  html,
  body {
    min-height: 100%;
    background-color: var(--blue);
    background-image: url("assets/cover/background.jpg");
    background-position: center;
    background-size: cover;
  }

  .viewport {
    height: 100dvh;
    background-color: var(--blue);
    background-image: url("assets/cover/background.jpg");
    background-position: center;
    background-size: cover;
    overscroll-behavior-y: contain;
    scroll-padding-block: 0;
    touch-action: pan-y;
  }

  .slide-panel {
    height: 100dvh;
    min-height: 100dvh;
    padding: 0;
    overflow: hidden;
    background-color: transparent;
    background-image: url("assets/cover/background.jpg");
    background-position: center;
    background-size: cover;
  }

  .slide-panel.is-filter-entering,
  .slide-panel.is-filter-exiting {
    height: 0;
    min-height: 0;
  }

  .stage-shell {
    width: min(100vw, calc(100dvh * 1.79)) !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }

  .filter-menu {
    top: max(3px, env(safe-area-inset-top));
    left: max(4px, env(safe-area-inset-left));
    width: clamp(157px, 20.7vw, 182px);
    filter: drop-shadow(0 1px 1px rgb(0 0 80 / 32%));
  }

  .is-cover-active .filter-menu {
    opacity: 0;
    pointer-events: none;
  }

  .cover-menu {
    top: max(3px, env(safe-area-inset-top));
    left: 50%;
    display: block;
    width: clamp(174px, 23vw, 202px);
    transform: translate(-50%, -8%) scale(.985);
  }

  .cover-stage.is-settled .cover-menu {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) scale(1);
  }

  .filter-menu__button[aria-pressed="true"] {
    box-shadow: inset 0 -1px 0 rgb(255 255 255 / 88%);
  }

  .scanlines {
    opacity: .2;
  }
}