/* Keep the full film and playback bar in the first desktop viewport.
   Secondary controls and the footer remain in document flow below. */
@media (min-width: 1001px) {
  .topbar { position: static; padding-block: 6px; }
  main, footer[data-exploration-controls] { width: 100%; max-width: none; }
  .topbar, main, footer[data-exploration-controls] {
    padding-inline: max(clamp(24px, 4vw, 80px), calc((100% - 1600px) / 2));
  }
  .intro { padding-block: 10px; }
  .intro h1 { font-size: clamp(32px, 3.5dvh, 42px); }
  .intro-copy p { font-size: 12px; }
  .production-note { margin-top: 3px; font-size: 9px; }
  #cinema-shell:not(.is-fullscreen) {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 23%, 340px);
    gap: 24px; align-items: start;
  }
  #cinema-shell:not(.is-fullscreen) .cinema {
    grid-column: 1; grid-row: 1; min-width: 0; display: flex; flex-direction: column;
  }
  #cinema-shell:not(.is-fullscreen) .look-toolbar { order: -2; }
  #cinema-shell:not(.is-fullscreen) .look-status { order: -1; }
  #cinema-shell:not(.is-fullscreen) .rides {
    grid-column: 2; grid-row: 1; grid-template-columns: minmax(0, 1fr);
    gap: 8px; margin: 0; padding: 0 4px 4px;
    /* Match the thumbnail image edge, allowing for its card border and padding. */
    margin-top: calc(var(--playlist-offset, 50px) - 6px);
    max-height: var(--playlist-height, calc(100dvh - 140px));
    overflow-y: auto; scrollbar-width: thin; overscroll-behavior-y: contain;
    scroll-padding-block: 6px;
  }
  #cinema-shell:not(.is-fullscreen) .ride {
    display: grid; grid-template-columns: 52% minmax(0, 1fr);
    column-gap: 10px; row-gap: 2px; align-items: center;
    padding: 5px; min-height: 0; border: 1px solid transparent; border-radius: 6px;
  }
  #cinema-shell:not(.is-fullscreen) .ride[aria-pressed=true] {
    border-color: var(--accent); background: #eee0d4;
  }
  #cinema-shell:not(.is-fullscreen) .ride img { grid-row: 1 / 3; }
  #cinema-shell:not(.is-fullscreen) .ride-type { align-self: end; margin: 0; font-size: 13px; }
  #cinema-shell:not(.is-fullscreen) .ride-location {
    align-self: start; margin: 0; font-size: 10px; white-space: normal;
  }
  #cinema-shell:not(.is-fullscreen) .look-toolbar { padding-bottom: 8px; }
  #cinema-shell:not(.is-fullscreen) .transport { min-height: 56px; gap: 12px; }
  #cinema-shell:not(.is-fullscreen) .transport-main { min-width: 0; gap: 8px; }
  #cinema-shell:not(.is-fullscreen) .view-controls { flex-shrink: 0; }
}
#cinema-shell:not(.is-fullscreen) .screen {
  width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9;
}
@media (min-width: 1001px) and (min-height: 650px) {
  #cinema-shell:not(.is-fullscreen) .screen {
    width: min(100%, calc(var(--picture-height, 40dvh) * 16 / 9));
  }
}

/* On phones the picture and playback controls precede every selector. */
@media (max-width: 1000px) {
  .topbar { position: static; padding: 6px 12px; gap: 8px; }
  .topbar nav { width: auto; margin-left: auto; gap: 6px; }
  .brand-logo { width: 100px; }
  .brand-divider, .series { display: none; }
  main { padding-inline: 12px; }
  .intro { padding: 10px 0; }
  .intro h1 { font-size: 30px; line-height: 1.15; letter-spacing: -.7px; }
  .intro-copy { display: none; }
  #cinema-shell:not(.is-fullscreen) .cinema { display: flex; flex-direction: column; }
  #cinema-shell:not(.is-fullscreen) .look-toolbar { padding: 12px 0; }
  #cinema-shell:not(.is-fullscreen) .screen {
    width: min(100%, calc(var(--picture-height, 55dvh) * 16 / 9));
  }
  #cinema-shell:not(.is-fullscreen) .rides {
    position: static; grid-template-columns: minmax(0, 1fr);
    gap: 8px; margin: 12px 0 20px;
  }
  #cinema-shell:not(.is-fullscreen) .ride {
    display: grid; grid-template-columns: min(42%, 180px) minmax(0, 1fr);
    column-gap: 12px; row-gap: 3px; align-items: center;
    padding: 6px; border: 1px solid transparent; border-radius: 6px;
  }
  #cinema-shell:not(.is-fullscreen) .ride[aria-pressed=true] {
    border-color: var(--accent); background: #eee0d4;
  }
  #cinema-shell:not(.is-fullscreen) .ride img { grid-row: 1 / 3; }
  #cinema-shell:not(.is-fullscreen) .ride-type { align-self: end; margin: 0; font-size: 14px; }
  #cinema-shell:not(.is-fullscreen) .ride-location { align-self: start; margin: 0; font-size: 11px; }
}
@media (max-width: 1000px) and (orientation: landscape) {
  .intro { padding-block: 6px; }
  .intro h1 { font-size: 24px; }
  #cinema-shell:not(.is-fullscreen) {
    display: grid; grid-template-columns: minmax(0, 1fr) clamp(160px, 28vw, 240px);
    gap: 12px; align-items: start;
  }
  #cinema-shell:not(.is-fullscreen) .cinema { min-width: 0; }
  #cinema-shell:not(.is-fullscreen) .rides {
    margin: calc(var(--playlist-offset, 0px) - 7px) 0 0; padding: 0 2px 4px;
    max-height: var(--playlist-height, calc(100dvh - 100px));
    overflow-y: auto; scrollbar-width: thin; overscroll-behavior-y: contain;
    scroll-padding-block: 7px;
  }
  #cinema-shell:not(.is-fullscreen) .ride {
    grid-template-columns: min(45%, 96px) minmax(0, 1fr); column-gap: 8px;
  }
  #cinema-shell:not(.is-fullscreen) .ride-type { font-size: 12px; }
  #cinema-shell:not(.is-fullscreen) .ride-location { font-size: 10px; white-space: normal; }
  #cinema-shell:not(.is-fullscreen) .transport {
    display: flex; min-height: 56px; padding: 0; gap: 8px;
  }
  #cinema-shell:not(.is-fullscreen) .transport-main { min-width: 0; gap: 6px; }
  #cinema-shell:not(.is-fullscreen) .view-controls {
    flex: none; border: 0; padding: 0; margin: 0; gap: 4px;
  }
  #cinema-shell:not(.is-fullscreen) .view-modes button { padding-inline: 8px; }
}
@media (max-width: 720px) and (orientation: landscape) {
  #cinema-shell:not(.is-fullscreen) .transport { flex-wrap: wrap; gap: 0; }
  #cinema-shell:not(.is-fullscreen) .transport-main { flex-basis: 100%; min-height: 44px; }
  #cinema-shell:not(.is-fullscreen) .view-controls { width: 100%; justify-content: flex-end; }
  #cinema-shell:not(.is-fullscreen) .view-modes { flex: 1; padding: 0; }
  #cinema-shell:not(.is-fullscreen) .view-modes button { min-height: 42px; padding-inline: 5px; }
}
.is-fullscreen .look-toolbar { order: -2; }
.is-fullscreen .look-status { order: -1; }

/* 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; }
}