/* Size the media itself; a fixed-height stage adds letterboxing on narrow screens. */
.vertical .stage,
.workflow.vertical .workflow-stage { height:auto; aspect-ratio:auto; }
.vertical video {
  width:100%; height:auto; min-width:0; max-height:none;
  max-width:min(100%, calc(min(70vh, 640px) * 9 / 16));
  aspect-ratio:9/16;
}
.workflow.vertical video { max-width:min(100%, calc(min(78vh, 760px) * 9 / 16)); }
.workflow.feed video { max-width:min(100%, calc(min(78vh, 760px) * 4 / 5)); aspect-ratio:4/5; }

/* SourceMedium website tokens, adapted to the existing review controls. */
:root { --review-navy:#0b1224; --review-surface:#171e34; --review-accent:#a78bfa; --review-link:#b8c2ff; --review-border:#353d57; }
body { background:var(--review-navy); }
fieldset { border:0; border-radius:999px; background:var(--review-surface); padding:6px; gap:4px; }
legend { color:#c5cad8; padding:0 8px 5px; }
fieldset label span { min-height:44px; display:flex; align-items:center; border-radius:999px; padding:10px 18px; }
fieldset input:checked+span { background:var(--review-accent); color:var(--review-navy); }
fieldset label:hover span { color:#fff; }
fieldset input:checked+span:hover { color:var(--review-navy); }
fieldset input:focus-visible+span { outline-color:var(--review-link); }
select { min-height:44px; border:1px solid var(--review-border); border-radius:8px; background:var(--review-navy); color:#f5f5f8; }
.workflow { background:var(--review-surface); border-color:var(--review-border); }
.chapter { min-height:44px; border-radius:8px; }
.chapter:not(:disabled):hover, .chapter[aria-current=true] { background:var(--review-accent); color:var(--review-navy); border-color:var(--review-accent); }
.download, .text-button, .fine a, .workflow-links a, .workflow-controls a { color:var(--review-link); }
.supporting a, .supporting a:visited { color:var(--review-link); }
.workflow-links a { display:inline-flex; align-items:center; min-height:44px; }
.workflow-controls>p:last-child>a { display:inline-flex; align-items:center; min-height:44px; padding:10px 18px; border:0; border-radius:8px; background:var(--review-accent); color:var(--review-navy); font-weight:600; text-decoration:none; }
.pick { min-height:44px; border-radius:8px; border-color:var(--review-accent); }
.selected .pick { background:var(--review-accent); color:var(--review-navy); }
a:focus-visible, button:focus-visible, select:focus-visible, video:focus-visible { outline:3px solid var(--review-link); outline-offset:4px; }
@media(max-width:650px) { fieldset { flex-wrap:wrap; border-radius:16px; } fieldset label span { padding-inline:14px; } }

/* Keep the film prominent on phones without shrinking its controls or footage. */
@media(max-width:650px) {
  header { padding:16px 14px; gap:12px; }
  header img { width:164px; max-width:60%; }
  .private { flex-shrink:0; }
  main { padding:20px 12px 36px; }
  .heading { gap:16px; margin-bottom:14px; }
  .intro { font-size:15px; line-height:1.45; }
  .format-status { margin:12px 0 6px; }
  .review-note { font-size:13px; margin-bottom:12px; }
  nav.supporting { margin:16px 0 20px; line-height:1.7; }
  .workflow { margin:20px 0 32px; border-radius:12px; }
  .workflow-top { padding:16px; gap:14px; }
  .workflow-top h2 { font-size:22px; line-height:1.25; }
  .workflow-controls { padding:16px; }
  .play-status:empty { display:none; }
  .chapter-row { min-width:0; }
  .chapter-row>div { flex-wrap:nowrap; width:100%; overflow-x:auto; padding:4px 4px 12px; }
  .chapter { flex:0 0 auto; max-width:240px; text-align:left; }
  .workflow-links { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 16px; padding:8px 0 16px; }
  .workflow-links>span { grid-column:1/-1; }
  .workflow-links>span a { min-width:44px; justify-content:center; }
  .workflow-controls>p:last-child { margin-bottom:0; }
}