/* The selected project fits as one unit; the archive remains a scrolling collection. */
.shuffle-mode main{bottom:calc(100px + env(safe-area-inset-bottom))}
.shuffle-mode .gallery>.project:nth-child(n)[style*="--stage-project-width"]{width:min(100%,var(--stage-project-width))!important;margin-inline:auto}
.shuffle-mode .gallery>.project:nth-child(n) .artwork>:is(img,video){width:100%;height:auto;object-fit:contain}
@media(min-width:900px) and (max-height:700px){.shuffle-mode main{top:calc(64px + var(--safe-top));padding-block:8px}}

/* A phone can always scroll the document, including a swipe over the media.
   Reserve the floating control's space instead of locking an oversized card
   inside a second scrolling area behind Safari's browser controls. */
@media(max-width:899px){
 body.shuffle-mode{display:flow-root;height:auto;min-height:100svh;overflow-y:auto;overflow-x:clip}
 .shuffle-mode main{position:relative;inset:auto;height:auto;min-height:calc(var(--stage-viewport-height,100svh) - 84px - var(--safe-top) - 100px - env(safe-area-inset-bottom));margin-top:calc(84px + var(--safe-top));margin-bottom:calc(100px + env(safe-area-inset-bottom));overflow:visible;overscroll-behavior:auto;touch-action:pan-y pinch-zoom}
}

/* Give the tweet a little more room by reclaiming surrounding stage space.
   Keep the complete card fit, source content and phone scroll fallback intact. */
body.shuffle-mode:has(.gallery>.project[data-project-id="a-case-for-chad"]:not([hidden])) main{padding-block:8px}
@media(max-width:899px){
 body.shuffle-mode:has(.gallery>.project[data-project-id="a-case-for-chad"]:not([hidden])) main{margin-top:calc(68px + var(--safe-top));min-height:calc(var(--stage-viewport-height,100svh) - 68px - var(--safe-top) - 100px - env(safe-area-inset-bottom))}
}
@media(min-width:900px) and (min-height:701px){
 body.shuffle-mode:has(.gallery>.project[data-project-id="a-case-for-chad"]:not([hidden])) main{top:calc(72px + var(--safe-top))}
}