.book-section{height:100svh;min-height:440px;display:grid;place-items:center;background:#d9b887;overflow:hidden}
.book-scene{position:relative;height:100%;max-width:100%;aspect-ratio:1312/1199}
.book-scene>img{width:100%;height:100%;object-fit:contain;display:block}
.open-book{position:absolute;left:45.4%;top:7.5%;width:52%;height:82.3%;border:0;background:transparent;border-radius:8px;cursor:pointer;transition:box-shadow .25s}
.open-book:hover{box-shadow:0 12px 40px #59360f40}.open-book:focus-visible{outline:3px dashed #fff0ce;outline-offset:5px}
.open-book span{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);background:#fff1d9;color:#843231;padding:10px 16px;border-radius:2px;font:12px 'Space Mono',monospace;white-space:nowrap;box-shadow:2px 3px 9px #0002}
.book-dialog{border:0;padding:50px 20px 30px;max-width:100vw;max-height:100svh;width:min(1120px,96vw);background:transparent;overflow:visible}
.book-dialog::backdrop{background:#302518bc;backdrop-filter:blur(5px)}
.close-book{position:absolute;right:20px;top:0;border:1px solid #e5c89e;background:#fff2db;color:#742b37;padding:10px 18px;border-radius:22px;font:12px 'Space Mono',monospace;cursor:pointer}
.book-spread{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.45;max-height:78svh;perspective:1600px;filter:drop-shadow(0 22px 22px #160b0644)}
.book-page{position:relative;background-color:#e8d7b5;border:1px solid #c3a77b;overflow:hidden;padding:12% 9%;background-image:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="180" height="180"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency=".65" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Cpath fill="%23886740" opacity=".13" filter="url(%23n)" d="M0 0h180v180H0z"/%3E%3C/svg%3E')}
.page-left{border-radius:8px 0 0 8px;box-shadow:inset -18px 0 22px -18px #5b361a99}
.page-right{border-radius:0 8px 8px 0;box-shadow:inset 18px 0 22px -18px #5b361a99}
.book-page:before{content:'';position:absolute;top:0;width:25%;height:100%;background:repeating-linear-gradient(0deg,#a43c3c70 0 13px,transparent 13px 26px),repeating-linear-gradient(90deg,#a43c3c70 0 13px,#fff0d6 13px 26px);opacity:.7}
.page-left:before{left:0}.page-right:before{right:0}
.blank-paper{position:relative;height:100%;background:#fff7e5;box-shadow:0 3px 10px #63432120;transform:rotate(-2deg);clip-path:polygon(0 1%,13% 0,28% 1%,44% 0,60% 1%,77% 0,100% 1%,99% 100%,81% 99%,65% 100%,43% 99%,25% 100%,0 99%)}
.page-right .blank-paper{transform:rotate(2deg)}
.paper-star{position:absolute;z-index:2;color:#9b203e;font-size:42px;left:9%;top:3%;transform:rotate(-12deg)}.page-right .paper-star{top:auto;left:auto;right:8%;bottom:3%}
.turning-cover{position:absolute;right:0;top:0;width:50%;height:100%;transform-origin:left center;backface-visibility:hidden;background-image:url('assets/book-cover-scene.png');background-size:192.3% 121.5%;background-position:94.6% 41%;border-radius:0 7px 7px 0;pointer-events:none}
.book-dialog[open] .turning-cover{animation:open-album 1.15s cubic-bezier(.2,.65,.3,1) forwards}
@keyframes open-album{0%{transform:rotateY(0);opacity:1}85%{opacity:1}100%{transform:rotateY(-180deg);opacity:0}}
@media(max-width:650px){.book-scene{width:100%;height:auto}.book-section{min-height:0}.book-dialog{padding:44px 5px 15px;width:98vw}.book-spread{aspect-ratio:1.2}.close-book{right:5px}.paper-star{font-size:25px}.open-book span{font-size:10px;padding:8px}.book-page{padding:15% 8%}}
@media(prefers-reduced-motion:reduce){.book-dialog[open] .turning-cover{animation:none;display:none}.open-book{transition:none}}

.book-spread{width:min(100%,113.1svh);margin-inline:auto}
.book-dialog{width:min(1100px,96vw);height:min(850px,94svh);padding:52px 15px 45px;overflow:hidden;background:#d9bb8c;border-radius:9px;box-shadow:0 25px 100px #20130855}
.close-book{top:12px;right:15px;z-index:5}
.album-stage{position:relative;height:100%;width:min(100%,100svh);margin:auto;perspective:1800px;transform:translateX(-25%);transition:transform 1.1s cubic-bezier(.22,.7,.2,1);isolation:isolate}
.album-paper{position:absolute;top:0;width:50%;height:100%;background:#e8d7b5;border:1px solid #c3a77b;padding:5% 4%;overflow:hidden;box-shadow:0 9px 20px #5b361a30}
.album-paper.page-left{left:0;opacity:0;transition:opacity .15s .35s}
.album-paper.page-right{right:0}
.album-cover{position:absolute;left:50%;top:0;width:50%;height:100%;padding:0;border:0;background:transparent;transform-origin:left center;transform-style:preserve-3d;transition:transform 1.1s cubic-bezier(.22,.7,.2,1);z-index:3;border-radius:0 7px 7px 0;cursor:pointer}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:0 7px 7px 0}
.cover-front{background:url('assets/book-cover-scene.png') 94.6% 41%/192.3% 121.5%;box-shadow:9px 9px 24px #49301b44}
.cover-back{transform:rotateY(180deg);background:#e8d7b5;box-shadow:inset -14px 0 20px -16px #5b361a99}
.open-label{position:absolute;bottom:5%;left:50%;transform:translateX(-50%);background:#fff1d9;color:#843231;padding:10px 16px;font:11px 'Space Mono',monospace;white-space:nowrap;border-radius:3px}
.album-open .album-stage{transform:translateX(0)}
.album-open .album-cover{transform:rotateY(-180deg);pointer-events:none}
.album-open .album-paper.page-left{opacity:1;z-index:4;transition:opacity .2s .82s}
.fold-book{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:none;border:0;color:#643d2b;font:11px 'Space Mono',monospace;padding:7px;cursor:pointer}
.album-cover:focus-visible{outline:3px dashed #fff0ce;outline-offset:5px}
@media(max-width:650px){.book-dialog{height:min(540px,80svh);padding:55px 10px 40px}.album-stage{width:100%;height:100%}.open-label{font-size:9px;padding:7px}.album-paper{padding:9% 3%}}
@media(prefers-reduced-motion:reduce){.album-stage,.album-cover,.album-paper.page-left,.album-open .album-paper.page-left{transition:none}}
.album-paper.page-left{padding:5% 3% 4%}
.twin-page{height:100%;margin:0;display:flex;flex-direction:column;align-items:center;gap:10px}
.twin-page img{width:100%;height:calc(100% - 42px);object-fit:contain;filter:drop-shadow(1px 3px 4px #58361520)}
.twin-page figcaption{font:clamp(12px,1.8vw,23px) 'Oooh Baby',cursive;color:#71332e;text-align:center}
.page-number{position:absolute;bottom:1.5%;left:50%;transform:translateX(-50%);font:10px 'Space Mono',monospace;color:#8b6c4d}
.letter-area{position:absolute;left:12%;right:12%;top:30%;height:47%;perspective:900px}
.letter-paper{position:absolute;inset:5% 6% 0;background:#fff9ed;box-shadow:0 2px 9px #45201924;transform:translateY(0);transition:transform .7s .1s,height .7s .1s;overflow:auto;padding:8%;z-index:1}
.letter-copy{font:clamp(11px,1.1vw,16px)/1.7 'Instrument Serif',serif;white-space:pre-wrap;color:#49392e;margin:0}
.letter-envelope{position:absolute;inset:0;background:#981833;border:0;padding:0;cursor:pointer;box-shadow:2px 8px 14px #51231533;border-radius:2px}
.envelope-pocket{position:absolute;inset:0;z-index:3;background:linear-gradient(145deg,#a51c39,#801029);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%)}
.envelope-flap{position:absolute;inset:0;z-index:4;transform-origin:50% 0;transition:transform .6s ease,z-index 0s .3s;background:#a01835;clip-path:polygon(0 0,100% 0,50% 57%);backface-visibility:hidden}
.envelope-seal{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);z-index:5;color:#db9c96;font-size:20px;transition:opacity .2s}
.letter-toggle{position:absolute;bottom:12%;left:50%;transform:translateX(-50%) rotate(-3deg);border:0;background:#fff1d5;padding:10px 13px;color:#8e3044;font:10px 'Space Mono',monospace;white-space:nowrap;cursor:pointer}
.page-right.letter-open .envelope-flap{transform:rotateX(180deg);z-index:0}
.page-right.letter-open .envelope-seal{opacity:0}
.page-right.letter-open .letter-paper{transform:translateY(-43%);height:135%;z-index:6}
.page-right.letter-open .letter-envelope{z-index:0}
.letter-envelope:focus-visible,.letter-toggle:focus-visible{outline:2px dashed #652638;outline-offset:4px}
@media(max-width:650px){.twin-page{gap:5px}.twin-page img{height:calc(100% - 28px)}.letter-toggle{font-size:8px;padding:7px}.letter-copy{font-size:12px}.envelope-seal{font-size:15px}}
@media(prefers-reduced-motion:reduce){.letter-paper,.envelope-flap,.envelope-seal{transition:none}}
/* Exact left-page artwork from the supplied reference, cropped in CSS. */
.album-paper.page-right{background:#e5d1ab url('assets/letter-page-reference.png') 10.345% 36.145%/209.023% 140.194% no-repeat;padding:0;border:0}
.album-paper.page-right>.paper-star,.album-paper.page-right>.page-number{display:none}
.album-paper.page-right .letter-area{left:7.5%;right:7%;top:19.5%;height:65%;perspective:none}
.album-paper.page-right .letter-envelope{inset:0;background:transparent;box-shadow:none;border:0}
.album-paper.page-right .envelope-pocket,.album-paper.page-right .envelope-flap,.album-paper.page-right .envelope-seal{display:none}
.album-paper.page-right .letter-paper{inset:0;height:100%;padding:7%;background:#fffdf9;box-shadow:none;transform:none;clip-path:polygon(0 0,10% 0,55% 37%,51% 45%,51% 52%,58% 61%,10% 100%,0 100%);pointer-events:none;z-index:1;transition:transform .65s,clip-path .65s,box-shadow .65s}
.album-paper.page-right.letter-open .letter-paper{height:100%;transform:translateY(-7%) rotate(-2deg);clip-path:polygon(0 0,100% 0,100% 100%,0 100%);box-shadow:0 8px 20px #50231b40;pointer-events:auto;z-index:6}
.album-paper.page-right .letter-toggle{left:69%;bottom:4.7%;width:40%;height:8.5%;padding:4px 3px;transform:none;translate:-50% 0;background:#f3e8ce;border-radius:0;font-size:clamp(7px,.72vw,10px);white-space:normal;text-transform:uppercase;line-height:1.25;color:#ae6375}
.album-paper.page-right .letter-envelope{z-index:3}
.album-paper.page-right.letter-open .letter-envelope{z-index:0}