/* A mobile scrapbook that builds around a centered portrait, one beat at a time. */
.scrapbook-stage{min-height:620px;max-height:none}
.scrapbook-heading{top:12%;left:4%;right:4%}
.chapter-number{top:8.5%}
.scrapbook-heading h2{font-size:clamp(65px,15vw,86px);margin-top:0}
.scrapbook-heading>.handwritten{font-size:clamp(18px,4vw,24px)}
.story-caption{min-height:2.8em;max-width:82%;margin:8px auto 0;font:italic clamp(16px,3.7vw,21px)/1.3 var(--serif);transition:opacity .38s,transform .38s!important;translate:none!important}
.has-js .is-seen .scrapbook-heading>.story-caption{transition-delay:0s;opacity:1}
.story-caption.changing{opacity:0!important;transform:translateY(5px)}
.portrait-collage{top:32%;bottom:12%;left:0;right:0}
.portrait-model{left:16%;width:68%;height:91%;bottom:3%;z-index:3}
.sticker{width:20%;z-index:4;transition:opacity .75s,translate .9s cubic-bezier(.2,.65,.2,1),scale .9s!important;transition-delay:0s!important}
.has-js .scrapbook .sticker{opacity:0;translate:0 15px;scale:.8}
.has-js .scrapbook .sticker.is-introduced,.has-js body[data-story-phase=free] .scrapbook .sticker{opacity:1;translate:0 0;scale:1}
.sticker-0{left:4%;top:-4%;width:19%}.sticker-1{right:4%;top:-2%;width:20%}
.sticker-2{left:0;top:16%;width:20%}.sticker-3{right:0;top:20%;width:20%}
.sticker-4{left:0;top:39%;width:20%}.sticker-5{right:0;top:44%;width:20%}
.sticker-6{left:1%;top:62%;width:19%}.sticker-7{right:0;top:68%;width:19%}
.sticker-8{left:4%;top:84%;width:19%}.sticker-9{right:4%;top:88%;width:20%}
.drawn-heart{right:19%;top:3%;font-size:32px;z-index:2}
.scrapbook-signature{bottom:4.5%}.scrapbook-signature>p{font-size:8px}.scrapbook-signature>span{font-size:15px}
.next-chapter{bottom:1.2%;font-size:9px}
.scrapbook-signature{opacity:0;transition:opacity 1s}
.scrapbook.is-complete .scrapbook-signature,body[data-story-phase=free] .scrapbook-signature{opacity:1}
.opening-music{position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));z-index:25;border:1px solid #c7a96b66;background:#0c0808a6;border-radius:25px;color:#e4cfaa;font-size:10px;min-height:40px;padding:8px 15px}
.pull-mesh{position:absolute;bottom:0;left:50%;height:100%;width:auto;max-width:none;transform:translateX(-50%);display:none}
.pull-bride .pull-mesh{transform:translateX(-50%) scaleX(-1)}
.mesh-ready .pull-model{visibility:hidden}.mesh-ready .pull-mesh{display:block}
@media(min-width:800px){.portrait-model{left:16%;width:68%}}
@media(max-width:360px){.scrapbook-heading h2{font-size:64px}.scrapbook-heading>.handwritten{font-size:18px}.story-caption{font-size:15px}.sticker{width:19%}.scrapbook-signature>span{font-size:13px}}
@media(max-height:700px){.scrapbook-heading{top:13%}.chapter-number{top:9%}.scrapbook-heading h2{font-size:64px}.story-caption{margin-top:4px;font-size:15px}.portrait-collage{top:33%;bottom:13%}}
@media(prefers-reduced-motion:reduce){.has-js .scrapbook .sticker,.scrapbook-signature,.story-caption.changing{opacity:1!important;translate:none;scale:1;transform:none}.pull-mesh{display:none!important}.mesh-ready .pull-model{visibility:visible}}

.opening-pause{position:absolute;left:18px;top:max(18px,env(safe-area-inset-top));z-index:25;border:1px solid #c7a96b44;background:#0c0808a6;border-radius:25px;color:#c7b492;font-size:10px;min-height:40px;padding:8px 15px}

.portrait-model{left:50%;width:auto;max-width:none;height:94%;bottom:2%;transform:translateX(-50%)}
@media(min-width:800px){.portrait-model{left:50%;width:auto;height:94%}}
@media(max-width:360px){.portrait-model{height:min(94%,136vw)}}
.film-opening[data-scene=blessing] .opening-pause{display:none}
/* Guests watch the two portrait chapters; normal scrolling returns at the date. */
html{scrollbar-gutter:stable}
html.portrait-lock,body.portrait-lock{overflow:hidden!important;overscroll-behavior:none}
body.portrait-lock{touch-action:pinch-zoom}
.portrait-lock a[href^="#"]{pointer-events:none}
.scrapbook.is-sequencing .scrapbook-signature{opacity:var(--signature-opacity,0);transition:none}
.portrait-lock .scrapbook-stage{min-height:0}
@media(max-height:650px){
 .portrait-lock .scrapbook-heading h2{font-size:clamp(36px,11dvh,64px)}
 .portrait-lock .scrapbook-heading>.handwritten{font-size:clamp(12px,3.5dvh,19px)}
 .portrait-lock .story-caption{font-size:clamp(11px,2.8dvh,14px);min-height:1.5em}
}