/* Reserve room for navigation and controls before sizing the picture.
   Short/narrow windows retain document scrolling and the fullscreen workspace. */
@media (min-width: 1001px) and (min-height: 650px) {
  body { min-height: 100dvh; height: 100dvh; display: flex; flex-direction: column; }
  .topbar { flex: none; width: 100%; padding-block: 10px; position: static; }
  main { width: 100%; max-width: 1600px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .intro { flex: none; padding: 12px 0; }
  .intro h1 { font-size: clamp(36px, 4.5dvh, 60px); }
  #cinema-shell:not(.is-fullscreen) { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #cinema-shell:not(.is-fullscreen) .rides { flex: none; margin-bottom: 10px; gap: 12px; }
  #cinema-shell:not(.is-fullscreen) .ride { padding-bottom: 6px; }
  #cinema-shell:not(.is-fullscreen) .ride img { height: clamp(44px, 8dvh, 100px); aspect-ratio: auto; }
  #cinema-shell:not(.is-fullscreen) .ride-type { margin-top: 4px; margin-bottom: 0; }
  #cinema-shell:not(.is-fullscreen) .cinema { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0; }
  #cinema-shell:not(.is-fullscreen) .look-toolbar { flex: none; padding-bottom: 8px; }
  #cinema-shell:not(.is-fullscreen) .picture-stage { flex: 1; min-height: 140px; container-type: size; }
  #cinema-shell:not(.is-fullscreen) .screen {
    flex: none; width: min(100cqw, calc(100cqh * 16 / 9));
    height: min(100cqh, calc(100cqw * 9 / 16)); min-height: 0; aspect-ratio: 16 / 9;
  }
  #cinema-shell:not(.is-fullscreen) .transport { flex: none; min-height: 52px; }
  #cinema-shell:not(.is-fullscreen) .cut-strip { flex: none; padding: 6px 0; gap: 14px; }
  #cinema-shell:not(.is-fullscreen) .cut-button { min-height: 44px; padding: 5px 9px; }
  #cinema-shell:not(.is-fullscreen) .comparison-control { flex: none; padding-top: 4px; }
  #cinema-shell:not(.is-fullscreen) .viewer-hint { flex: none; padding: 5px 0; }
  #cinema-shell:not(.is-fullscreen) .render-note { flex: none; max-width: none; padding-top: 4px; font-size: 11px; }
  footer[data-experiment-controls] { flex: none; width: 100%; max-width: 1600px; padding-block: 8px; gap: 6px 20px; }
  footer > .footer-name, footer > a { display: none; }
}
@media (min-width: 1001px) and (min-height: 650px) and (max-height: 950px) {
  .intro { padding-block: 8px; }
  .production-note { display: none; }
  #cinema-shell:not(.is-fullscreen) .ride {
    display: grid; grid-template-columns: 40% minmax(0, 1fr); column-gap: 8px;
    align-items: center; padding: 5px 0; min-height: 58px;
  }
  #cinema-shell:not(.is-fullscreen) .ride img { grid-row: 1 / 3; height: auto; aspect-ratio: 16 / 9; }
  #cinema-shell:not(.is-fullscreen) .ride-type { align-self: end; margin: 0; font-size: 12px; }
  #cinema-shell:not(.is-fullscreen) .ride-location { align-self: start; font-size: 9px; }
}

/* The frame hugs the footage; spare workspace stays paper-colored, never black. */
.picture-stage { display: grid; place-items: center; min-width: 0; }
.is-fullscreen .picture-stage { flex: 1; min-height: 120px; container-type: size; }
#cinema-shell.is-fullscreen .screen {
  flex: none; width: min(100cqw, calc(100cqh * 16 / 9));
  height: min(100cqh, calc(100cqw * 9 / 16)); min-height: 0; aspect-ratio: 16 / 9;
}
.screen { container-type: inline-size; }
.screen-caption h2 { font-size: clamp(18px, 4cqw, 44px); }
@container (max-width: 480px) {
  .screen-caption { left: 14px; right: 65px; bottom: 12px; }
  .screen-caption > span { font-size: 9px; }
  .picture-labels { top: 10px; left: 10px; right: 10px; font-size: 9px; }
  .picture-labels > span:first-child { padding: 3px 6px; }
}