/* Match the reference's 400 × 500 pages, scaled as a complete book. */
.scrapbook-scene{height:auto;min-height:100svh}
.scrapbook-scene .scene-stage{position:relative;height:100svh;min-height:100svh;padding:calc(72px + env(safe-area-inset-top)) 28px calc(40px + env(safe-area-inset-bottom));overflow:hidden;align-items:center}
.scrapbook-scene .scene-content{text-shadow:none;transform:none;opacity:1}
.scrapbook-shell{width:min(800px,100%,calc((100svh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*1.6));margin:auto;position:relative}
.scrapbook-book{width:100%;height:auto;aspect-ratio:1.6;position:relative;min-width:0!important;min-height:0!important;filter:drop-shadow(0 16px 22px #160c185c);transition:transform .9s cubic-bezier(.2,.65,.25,1);touch-action:pan-y;cursor:pointer}
.scrapbook-shell.is-landscape.is-front .scrapbook-book{transform:translateX(-25%)}
.scrapbook-shell.is-landscape.is-back .scrapbook-book{transform:translateX(25%)}
.scrapbook-book .stf__wrapper,.scrapbook-book .stf__block{height:100%}
.scrapbook-page{position:absolute;inset:0;width:50%;height:100%;background-color:#faf7ec;color:#322422;overflow:hidden;container-type:inline-size}
.scrapbook-page.paper-left{background-image:url('scrapbook-collage/left.webp');background-size:100% 100%;background-position:center}
.scrapbook-page.paper-right{background-image:url('scrapbook-collage/right.webp');background-size:100% 100%;background-position:center}
.scrapbook-page.cover{background-color:#111;background-image:url('scrapbook-reference-cover.webp');background-size:88% 100%;background-repeat:no-repeat;background-position:right center;color:#fff6eb}
/* One ring strip belongs to each cover and turns with it. Interior page art has its own rings. */
.scrapbook-cover-binding{position:absolute;inset:0 auto 0 0;width:12%;background-image:url('scrapbook-collage/right.webp');background-size:833.333333% 100%;background-position:left center;pointer-events:none}
.scrapbook-page.back-cover{background-position:left center}
.scrapbook-page.back-cover .scrapbook-cover-binding{inset:0 0 0 auto;background-image:url('scrapbook-collage/left.webp');background-position:right center}
.scrapbook-book:not(.is-ready) .scrapbook-page{display:none}
.scrapbook-book:not(.is-ready) .scrapbook-page:first-child{display:block;left:50%}
.scrapbook-cover-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0;white-space:nowrap}
.collage-layout{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.collage-layer{position:absolute;inset:0;width:100%;height:100%;margin:0;transform:translate(var(--x,0),var(--y,0)) rotate(var(--angle,0deg)) scale(var(--scale,1));transform-origin:center;pointer-events:none;user-select:none}
.collage-sticker{object-fit:contain}
.collage-caption{position:absolute;margin:0;color:#49352d;text-align:center;pointer-events:none;user-select:none;z-index:50}
.caption-smile{top:57%;left:31%;width:58%;font-family:'Playfair Display',Georgia,serif;font-size:clamp(16px,4.5cqw,18px);line-height:1.5}
.caption-smile span{display:table;margin:0 auto 4px;padding:1px 6px;background:#e3c9a8;box-shadow:0 1px 2px #58402b20}
.caption-khass{top:48%;left:42%;width:54%;padding:7px 10px;background:#dbc3a6;box-shadow:0 1px 3px #58402b25;transform:rotate(12deg);font-family:'Caveat',Georgia,serif;font-size:clamp(18px,5.5cqw,22px);font-weight:500;line-height:1.25}

.collage-frame{display:flex;align-items:center;justify-content:center}
.frame-canvas{position:relative;flex:none}
.frame-square{width:100%;aspect-ratio:1}
.frame-portrait{height:100%;aspect-ratio:375/666}
.collage-portrait{position:absolute;object-fit:cover;pointer-events:none}
.collage-frame-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none}
.scrapbook-status{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.scrapbook-book:focus-visible{outline:2px solid #ead0a8;outline-offset:9px}
.scrapbook-book.is-fallback .scrapbook-page{display:none;width:50%;left:0}
.scrapbook-book.is-fallback .scrapbook-page.is-current,.scrapbook-book.is-fallback .scrapbook-page.is-facing{display:block}
.scrapbook-book.is-fallback .scrapbook-page.is-facing,.scrapbook-book.is-fallback .scrapbook-page.cover:first-child{left:50%}
@media(max-width:767px){
 .scrapbook-scene .scene-stage{padding-inline:16px}
 .scrapbook-shell{width:min(400px,100%,calc((100svh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom))*.8))}
 .scrapbook-book{aspect-ratio:.8}
 .scrapbook-book:not(.is-ready) .scrapbook-page:first-child,.scrapbook-book.is-fallback .scrapbook-page{width:100%;left:0!important}
}
@media(prefers-reduced-motion:reduce){.scrapbook-book{transition:none}}