/* Genuine document scrolling on phones gives Safari/Chrome ownership of their
   toolbars. Only the slides move; the existing fixed atmosphere stays put. */
html.project-deck.project-native-scroll {
 height:auto;overflow-x:clip;overflow-y:auto;overscroll-behavior-y:auto;
 scroll-snap-type:y mandatory;scroll-padding:0;scroll-behavior:auto;
}
/* Arrow movement and viewport re-anchoring are single transactions. Do not
   let native snapping/scroll anchoring compete with their measured position. */
html.project-deck.project-native-scroll {overflow-anchor:none}
html.project-deck.project-native-scroll.project-scroll-positioning {
 scroll-snap-type:none!important;scroll-behavior:auto!important;
}
html.project-deck.project-native-scroll body.page-project-detail {
 height:auto;min-height:100%;overflow:visible;overscroll-behavior-y:auto;
}
html.project-native-scroll body.page-project-detail #main-content {height:auto;overflow:visible}
html.project-native-scroll body.page-project-detail #project-story {
 height:auto;min-height:0;overflow:visible;touch-action:pan-y pinch-zoom;
}
html.project-deck.project-native-scroll body.page-project-detail #project-story > .story-panel {
 position:relative;inset:auto;display:flex;box-sizing:border-box;
 height:100vh;height:var(--story-viewport-height,100dvh);
 min-height:0;max-height:none;overflow:clip!important;
 scroll-snap-align:start;scroll-snap-stop:always;overscroll-behavior-y:auto;
}
html.project-native-scroll body.page-project-detail #project-story > .project-cover {
 padding:0!important;flex-direction:column;justify-content:flex-end!important;
}
/* Sideways preview/outgoing layers contain only a visible screen. They must
   not add root snap targets while the new project is mounted. */
html.project-native-scroll .project-swipe-old .story-panel,
html.project-native-scroll .project-swipe-preview .story-panel {scroll-snap-align:none}
html.project-native-scroll .project-swipe-preview {height:var(--story-viewport-height,100dvh)!important}
html.project-native-scroll body.page-project-detail #project-story .project-cover.has-expanded-details .project-cover__content {
 max-height:calc(var(--story-viewport-height,100dvh) - 86px);
}
@media (max-height:550px) and (orientation:landscape) {
 html.project-native-scroll body.page-project-detail #project-story > .story-slide {
  padding-top:max(68px,calc(env(safe-area-inset-top,0px) + 52px))!important;
  padding-bottom:max(44px,env(safe-area-inset-bottom,0px))!important;
 }
}