/* --- the two-screen shell ----------------------------------------------
   index.html is one page holding two full-screen "screens": the intro
   (.intro-screen, styled by intro/introduction-style.css) and, below it,
   the photos gallery (.photos-screen, styled by photos/photos-style.css).
   Each of those files used to own <body>; their body rules now live on
   their own screen instead, and this file owns the page itself.

   The document never scrolls. .screens does, as one screen-tall box with
   mandatory snapping, so the page always comes to rest on exactly one
   screen -- never half intro, half photos -- and a scroll in either
   direction carries it to the next. scroll-snap-stop: always stops a
   hard fling from skipping past a screen. Keeping the scroll inside a box
   rather than on the document also keeps iOS Safari's toolbar from
   collapsing and resizing the screens mid-scroll.

   Scrolling up from the gallery back to the intro needs no code: when
   the grid (.grid-scroll) is already at its top, the browser carries a
   further upward scroll on to .screens, which snaps to the intro. */

html,
body {
    height: 100%;
}

body {
    overflow: hidden; /* the page itself never scrolls -- .screens does */
    background: #ffffff; /* both screens are white; shows nowhere else */
}

.screens {
    height: 100vh;
    height: 100dvh; /* the real visible height as iOS Safari's bar shows/hides; 100vh above is the fallback */
    overflow-y: auto;
    overflow-x: hidden;
    scroll-snap-type: y mandatory;
    overscroll-behavior: none; /* no rubber-band of the whole stack past either end */
    scrollbar-width: none; /* the screens are pages, not a document with a scrollbar */
}

.screens::-webkit-scrollbar {
    display: none;
}

.screen {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* The gallery's window casts a shadow (.window in photos-style.css) that
   reaches a few px above its top edge. Alone on its page that fell off
   the top of the screen; stacked under the intro it showed as a grey
   haze along the intro's bottom. Clipped to its own screen instead.
   clip, not hidden, so the screen doesn't become a scroll container of
   its own; hidden is the fallback for browsers without clip. */
.photos-screen {
    overflow: hidden;
    overflow: clip;
}

/* While a photo is open, the stack stays put. Without this, scrolling the
   viewer's own details panel past its top would carry on into .screens
   and slide the page back up to the intro with the photo still open. */
.screens:has(.viewer:not([hidden])) {
    overflow-y: hidden;
}

/* ...and for the rest of a trackpad swipe that started while the photo was
   open, if it's closed mid-swipe (Space, Escape). The browser won't let
   that swipe be cancelled once it's under way, so its leftover momentum
   would otherwise scroll the stack on up to the intro. site.js sets this
   and takes it off once the swipe has finished. */
.screens.stack-held {
    overflow-y: hidden;
}