/* Preserve the approved core box; show the extra rendered pixels around it. */
.film-quality .film-stage{--film-width:min(calc(63.75svh * 1024 / 973),46.5vw)}
/* Keep the preview controls available only when the pacing editor is open. */
.film-quality .film-stage:not(.is-editing) .film-controls{display:none}
.film-quality .film-frame{height:calc(var(--film-width) * 973 / 1024);background:transparent;-webkit-mask-image:none;mask-image:none}
.film-quality .film-frame canvas{
 inset:auto;left:0;top:-8.838643%;width:120.019531%;height:117.677287%;max-width:none;object-fit:fill;
 --picture-fade:linear-gradient(to right,#000 0,#000 58%,rgba(0,0,0,calc(.96 + .04*var(--film-open,0))) 64%,rgba(0,0,0,calc(.78 + .22*var(--film-open,0))) 70%,rgba(0,0,0,calc(.48 + .52*var(--film-open,0))) 77%,rgba(0,0,0,calc(.20 + .80*var(--film-open,0))) 84%,rgba(0,0,0,calc(.06 + .94*var(--film-open,0))) 92%,rgba(0,0,0,var(--film-open,0)) 100%);
 /* Edge fade disabled for the current review; recipe above is kept to restore it. */
 -webkit-mask-image:none;mask-image:none
}
.film-quality .film-stage.is-editing{--film-width:min(calc(var(--film-height)*1024/973),45vw)}
/* Centre below the 68px fixed navigation and its 1px bottom border. */
.film-quality .film-stage:not(.is-editing) .film-frame,
.film-quality .film-stage:not(.is-editing) .film-copy{top:calc(50% + 34.5px)}
/* Give the narrative a little more room beside the rendered picture. */
@media(min-width:1000px) and (min-aspect-ratio:7/5){
 .film-quality .film-stage:not(.is-editing) .film-copy{
  left:min(calc((100vw + var(--film-width) - var(--copy-width))/2 + clamp(24px,2.2vw,40px)),calc(100vw - var(--copy-width) - 4.5vw))
 }
}
@media(max-width:999px),(max-aspect-ratio:7/5){
 .film-quality .film-stage:not(.is-editing){--picture-width:min(100vw,calc(max(200px,100svh - 390px)*1229/1145));--film-width:calc(var(--picture-width)*1024/1229);--film-side:0!important}
 .film-quality .film-stage:not(.is-editing) .film-frame{left:calc((100vw - var(--picture-width))/2);top:calc(64px + var(--picture-width)*86/1229);transform:none}
 .film-quality .film-frame canvas{-webkit-mask-image:none;mask-image:none}
 .film-quality .film-stage:not(.is-editing) .film-copy{left:24px;right:24px;width:auto;top:calc(84px + var(--picture-width)*1145/1229);height:230px;transform:none}
 .film-quality .film-chapter,.film-quality .film-chapter.is-active,.film-quality .film-chapter.is-past{top:0;transform:none}
 .film-quality .film-chapter .eyebrow{margin-bottom:14px}
 .film-quality .film-chapter p.body{margin-top:14px}
 .film-quality .film-chapter h2{font-size:clamp(27px,4.4vw,42px)}
 .film-quality .film-sources hr{margin:15px 0 9px}
 .film-quality .trial-note{display:none}
}
/* Phone presentation: one self-contained viewport. The tall film keeps its
   aspect ratio and the copy owns every remaining pixel below it. */
@media(max-width:820px){
 .film-quality.is-tap-scenes .film-frame{cursor:pointer;touch-action:manipulation}
 .film-quality.film-journey.is-ready{height:100svh}
 .film-quality.is-ready>.film-stage:not(.is-editing){position:relative;top:auto;height:100svh;min-height:0}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall){
  --phone-copy-space:clamp(238px,31svh,274px);
  --phone-film-height:min(calc(100vw * 750 / 640),calc(100svh - 64px - var(--phone-copy-space)));
  --phone-film-width:calc(var(--phone-film-height) * 640 / 750);
  --picture-width:var(--phone-film-width);--film-width:var(--phone-film-width)
 }
 .film-quality .film-stage:not(.is-editing) .film-frame.has-mobile-tall{left:calc((100vw - var(--phone-film-width))/2);top:64px;width:var(--phone-film-width);height:var(--phone-film-height)}
 .film-quality .film-frame.has-mobile-tall canvas{inset:0;width:100%;height:100%;max-width:none}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-copy{top:calc(64px + var(--phone-film-height));bottom:0;height:auto}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-chapter,
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-chapter.is-active,
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-chapter.is-past{top:clamp(14px,2svh,18px)}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-chapter h2{font-size:clamp(21px,min(6.42vw,3svh),25px);line-height:1.14}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-chapter p.body{margin-top:clamp(10px,1.7svh,14px);font-size:clamp(13.5px,min(3.85vw,2svh),15px);line-height:1.46}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-sources hr{margin:clamp(10px,1.7svh,15px) 0 8px}
 .film-quality .film-stage:not(.is-editing):has(.film-frame.has-mobile-tall) .film-sources ol{font-size:clamp(9.5px,1.45svh,11px);line-height:1.4}
}