/* Stage and Prog share one symmetrical scene column and the photo's own ratio. */
:root{--scene-top-space:42px;--scene-columns:minmax(200px,1fr) minmax(280px,3.1fr) minmax(200px,1fr)}
@media screen{
/* Match navigation height, scene top gutter and usable scene height on both pages. */
body[data-mode=stage]:not(.separateStageScreen) .stage,
body[data-mode=stage]:not(.separateStageScreen) .stage:not(.hasPhoto){margin-top:var(--scene-top-space);height:calc(var(--stage-space,600px) - var(--scene-top-space));max-height:calc(var(--stage-space,600px) - var(--scene-top-space))}
body[data-mode=stage]:not(.separateStageScreen) .stage.hasPhoto{height:auto;width:min(100%,calc((var(--stage-space,600px) - var(--scene-top-space)) * var(--photo-ratio)));aspect-ratio:var(--photo-ratio)}

body[data-mode=stage]:not(.separateStageScreen) .top>section:first-child{grid-template-columns:var(--scene-columns);gap:10px;padding:0;border:0;background:transparent;height:var(--stage-space,600px)}
body[data-mode=stage]:not(.separateStageScreen) .stage,
body[data-mode=stage]:not(.separateStageScreen) .stage:not(.hasPhoto){align-self:start;justify-self:center}
}
@media(max-width:900px){:root{--scene-columns:minmax(0,1fr) minmax(0,2.5fr) minmax(0,1fr)}}