/* Dynamic viewport for visual panels; scroll runways remain svh-based. */
:root{--visual-header:94px}
@media(max-width:1000px){:root{--visual-header:80px}}
@media(max-width:650px){:root{--visual-header:72px}}
.has-page-navigation{--visual-top:calc(var(--page-nav-header,var(--visual-header)) + var(--page-nav-height,62px))}
.scroll-drive{--drive-visible-top:var(--visual-top,var(--drive-header))}
.page-story{--story-visible-top:var(--visual-top,var(--story-header))}
@supports(height:100dvh){
 /* The opening hero keeps its stable svh height while Safari chrome collapses. */
 .destination-pin{height:calc(100dvh - var(--visual-top,var(--visual-header)));top:var(--visual-top,var(--visual-header))}
 .drive-stage{height:100dvh}
 .scroll-drive.drive-ready .drive-stage{top:var(--drive-visible-top);height:calc(100dvh - var(--drive-visible-top))}
 .scroll-drive.drive-ready.drive-static .drive-stage{top:0;height:calc(100dvh - var(--drive-visible-top))}
 .page-story-stage{height:calc(100dvh - var(--story-visible-top))}
 .page-story-ready .page-story-stage{top:var(--story-visible-top)}
 .motion-ready .scroll-story>.editorial-motion{top:var(--visual-top,var(--visual-header));height:calc(100dvh - var(--visual-top,var(--visual-header)))}
 #site-menu{height:100dvh;max-height:100dvh}
 dialog{max-height:100dvh}
}
.story-following .destination-pin{top:0}
@media(prefers-reduced-motion:reduce){.page-story-ready .page-story-stage{top:0}}