@font-face{font-family:Cormorant;src:url('assets/cormorant.woff2') format('woff2');font-display:swap}@font-face{font-family:Cormorant;src:url('assets/cormorant-italic.woff2') format('woff2');font-display:swap;font-style:italic}@font-face{font-family:DM;src:url('assets/dm-sans.woff2') format('woff2');font-display:swap}@font-face{font-family:Caveat;src:url('assets/caveat.woff2') format('woff2');font-display:swap}
:root{--paper:#f7efdf;--ink:#542233;--rose:#a66272;--gold:#ae8652;--muted:#805663;--display:Cormorant,Georgia,serif;--body:DM,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scrollbar-color:var(--rose) var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px}::selection{background:#d6a7ae;color:#331520}a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--rose);outline-offset:7px}button:disabled{cursor:wait}h1,h2,p{margin:0}h1,h2{font-family:var(--display);font-weight:400}em{font-weight:400}.masthead{position:absolute;z-index:20;inset:0 0 auto;height:105px;padding:0 5.7%;display:flex;align-items:center;justify-content:space-between}.monogram{text-decoration:none;font-family:var(--display);font-size:28px}.monogram span{font-style:italic;font-size:20px;color:var(--rose);margin:0 3px}.date{font-size:14px;letter-spacing:.13em}.sound{display:flex;gap:9px;align-items:center;border:0;background:transparent;color:var(--ink);font-size:13px}.sound svg{width:19px;height:19px;stroke:currentColor;stroke-width:1.3;fill:none}.opening{min-height:100svh;position:relative;padding:145px 8% 115px;display:grid;grid-template-columns:1.12fr 1fr;align-items:center;overflow:hidden}.opening-copy{z-index:2}.dedication{font-family:Caveat,cursive;font-size:25px;margin-bottom:26px;color:var(--muted)}h1{font-size:clamp(64px,6.7vw,96px);line-height:.98;letter-spacing:-.035em}h1 em{color:var(--rose)}.opening-note{font-size:16px;line-height:1.8;margin-top:28px;color:var(--muted)}.open-letter{border:1px solid #b88f96;color:var(--ink);background:transparent;padding:18px 22px;display:flex;gap:32px;align-items:center;font-size:14px;margin-top:32px;transition:background .3s,color .3s}.open-letter:hover{background:var(--ink);color:var(--paper)}.open-letter svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.3;fill:none}.signed{font-family:Caveat,cursive;font-size:25px;margin-top:25px}.opening-art{position:relative;align-self:stretch;min-height:480px}.opening-art img{position:absolute;width:135%;height:145%;top:-25%;left:-13%;object-fit:contain;mix-blend-mode:multiply}.art-caption{position:absolute;bottom:3%;left:5%;width:100%;text-align:center;font-family:Caveat,cursive;font-size:22px;transform:rotate(-5deg);color:var(--muted)}.opening-bottom{position:absolute;bottom:32px;left:5.7%;right:5.7%;display:flex;justify-content:space-between;font-size:12px;color:var(--muted);border-top:1px solid #d8c5b9;padding-top:20px}.opening-bottom a{text-decoration:none}.opening-bottom a span{margin-left:14px}.birthday{min-height:100vh;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:80px 20px;gap:32px}.birthday h2{font-size:clamp(48px,7vw,96px);line-height:1.05}.birthday h2 em{color:#dcb2b8}.reading-progress{position:fixed;left:0;top:0;right:0;z-index:100;height:2px}.reading-progress span{display:block;width:0;height:100%;background:var(--rose)}@media(max-width:700px){.masthead{height:80px;padding:0 6%}.date{font-size:12px}.opening{padding:120px 8% 100px;display:flex;flex-direction:column;align-items:stretch}.opening-art{height:370px;min-height:0;margin-top:10px}.opening-art img{height:160%;top:-35%;width:100%;left:0}.art-caption{bottom:0;left:0}h1{font-size:64px}.opening-bottom>span{display:none}.opening-bottom{justify-content:center}.dedication{font-size:22px}.opening-note{margin-top:22px}}
/* A letter in rose, ink and ivory. */
body{overflow-x:clip}.sound{position:fixed;right:5.7%;top:38px;z-index:50;padding:8px 12px;background:var(--paper);border-radius:30px;box-shadow:0 3px 15px #54223308}.masthead{pointer-events:none}.masthead>*{pointer-events:auto}.masthead .date{position:absolute;left:50%;transform:translateX(-50%)}.opening-art img{mask-image:linear-gradient(to bottom,transparent,black 15%,black 80%,transparent)}.opening-bottom svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1;vertical-align:middle;margin-left:12px}.opening-copy{transition:opacity .6s,transform .9s cubic-bezier(.16,1,.3,1)}.opening.opened .opening-copy{transform:translateY(-15px)}.script-note{font:28px Caveat,cursive}.scroll-scene{position:relative}.sticky{position:sticky;top:0;height:100svh;overflow:hidden}.birthday{display:block;height:190svh;padding:0;min-height:0}.birthday-inner{display:grid;place-items:center;padding:70px 24px}.birthday-content{position:relative;z-index:1}.birthday-date{font:clamp(300px,44vw,640px)/1 var(--display);position:absolute;opacity:.045;color:#ecc6b3;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.birthday .script-note{color:#e3bdbd;margin-bottom:32px}.birthday h2{font-size:clamp(52px,6.8vw,96px)}.birthday-name{font:42px Caveat,cursive;margin-top:32px;color:#e2b1b9}.birthday-small{font-size:16px;line-height:1.9;color:#e6d0c7;margin-top:28px}.scene-foot{position:absolute;bottom:34px;left:0;right:0;text-align:center;font-size:13px;color:#d4b7b0}.reveal{transition:opacity .25s;will-change:opacity,transform}.story{height:220svh;background:#f0e3d2}.story-inner{padding:10vh 10%;display:grid;grid-template-columns:1fr 1fr;gap:11%;align-items:center}.story-title{align-self:center}.story h2,.moments h2,.letter-aside h2,.wish h2{font-size:clamp(48px,5.3vw,78px);line-height:1.03;letter-spacing:-.025em}.story h2 em,.moments h2 em,.letter-aside h2 em{color:var(--rose)}.story-title>p{margin-top:26px;font-size:16px;color:var(--muted);line-height:1.8}.story-thread{width:235px;height:200px;margin-top:20px;fill:none;stroke:var(--rose);stroke-width:1;opacity:.7}.story-beats{display:flex;flex-direction:column;gap:40px;padding-left:30px;border-left:1px solid #c8a6a5}.story-beat{position:relative;transition:opacity .3s,transform .3s}.beat-mark{position:absolute;width:7px;height:7px;background:var(--rose);border-radius:50%;left:-34px;top:8px}.beat-intro{font-family:Caveat;font-size:22px;color:var(--muted);margin-bottom:10px}.story h3{font:36px/1.04 var(--display);margin:0 0 12px}.story-beat>p:last-child{font-size:14px;color:var(--muted)}.story h3 em{color:#8c3e53}.moments{padding:115px 8% 130px;overflow:hidden}.moments-heading{text-align:center}.moments-heading>p{font-size:16px;color:var(--muted);margin-top:24px}.photo-spread{display:flex;justify-content:center;align-items:center;gap:45px;margin:80px auto 0;max-width:1020px;min-height:560px}.memory{width:320px;margin:0;padding:14px 14px 28px;background:#fffbf1;box-shadow:0 14px 38px #54223319;flex-shrink:0;will-change:transform}.photo-window{height:380px;overflow:hidden}.memory img{width:100%;height:100%;object-fit:cover;object-position:50% 61%}.memory-one{transform:rotate(-7deg) translateY(-15px)}.memory-two{transform:rotate(7deg) translateY(30px)}.memory figcaption{font:24px/1.15 Caveat;text-align:center;margin-top:20px}.between-photos{width:150px;flex-shrink:0;text-align:center;align-self:center}.between-photos span{font:26px Caveat;display:block;transform:rotate(-8deg)}.between-photos svg{width:130px;height:80px;stroke:var(--rose);fill:none;stroke-width:1.4;margin-top:15px}.letter-scene{height:440svh;background:#efe1d0}.letter-inner{display:grid;grid-template-columns:.75fr 1.65fr;gap:5%;padding:8vh 6%;align-items:center}.letter-aside{position:relative;max-width:350px}.letter-aside h2{font-size:clamp(40px,4.4vw,65px);position:relative;z-index:1}.letter-aside>img{display:block;width:92%;margin-top:25px;max-height:38vh;object-fit:contain;mix-blend-mode:multiply;mask-image:linear-gradient(transparent,black 10%,black 90%,transparent)}.letter-aside .script-note{font-size:23px;transform:rotate(-5deg);text-align:center;margin-top:10px}.letter-paper{background:#fffaf0;position:relative;box-shadow:0 18px 60px #54223310;padding:30px 26px 20px;transform:rotate(-1deg);max-width:900px;width:100%;isolation:isolate}.letter-to{font:30px Caveat;display:block;margin-left:5%;color:var(--muted)}.writing-stage{position:relative;aspect-ratio:840/600;width:100%}.writing-stage>svg{width:100%;height:100%;overflow:visible;display:none}.writing-stage.ready>svg{display:block}.writing-hand{position:absolute;width:48%;height:auto;max-width:none;pointer-events:none;z-index:5;opacity:0;filter:drop-shadow(3px 8px 5px #4a291426);transform-origin:15.15% 19.7%;will-change:left,top,transform}.letter-fallback{font:clamp(20px,2.2vw,32px)/1.4 Caveat;padding:35px 5%;color:var(--ink)}.writing-stage.ready .letter-fallback{display:none}.letter-bottom{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #e4d5c8;padding:16px 3% 0;position:relative;z-index:6}.writing-hint{font-size:12px;color:var(--muted)}.text-button{font-size:12px;background:none;color:var(--ink);border:0;border-bottom:1px solid #bc9098;padding:4px 0}.text-button:hover{color:var(--rose)}.wish{position:relative;min-height:110svh;padding:100px 24px 95px;text-align:center;background:var(--ink);color:var(--paper);overflow:hidden}.wish .script-note{color:#ddb9bc}.wish h2{margin-top:22px}.wish h2 em{color:#dfb7bd}.wish-instruction{font-size:14px;color:#ddc6bf;margin:26px auto 0;line-height:1.6}.candle{display:flex;flex-direction:column;align-items:center;width:210px;padding:0;border:0;background:transparent;color:#f2ded1;margin:25px auto 30px}.candle-image{display:block;width:160px;height:240px;background-image:url('assets/candle.webp');background-size:200% 100%;background-position:left center;background-repeat:no-repeat;transition:filter .5s}.candle:hover .candle-image{filter:brightness(1.1)}.candle-label{font-size:13px;letter-spacing:.04em;border-bottom:1px solid #b88e91;padding:6px 0}.candle.blown .candle-image{background-position:right center}.candle.blown .candle-label{visibility:hidden}.wish.granted .wish-intro{display:none}.wish.granted .candle{position:absolute;right:6%;bottom:100px;opacity:.65;transform:scale(.7);transform-origin:bottom right}.last-letter{margin:30px auto 90px;position:relative;z-index:2;animation:letter-in 1.3s ease both}.last-letter>p:not(.script-note){margin:30px 0;font-size:18px;line-height:1.9;color:#ead9cc}.signature-wrap{display:flex;flex-direction:column;align-items:center;margin-top:35px}.signature-wrap>span{font:24px Caveat;color:#e1c1ba}.signature-wrap svg{width:235px;height:96px;overflow:visible}.wish footer{position:absolute;bottom:30px;left:6%;right:6%;border-top:1px solid #94616d;display:flex;justify-content:space-between;padding-top:20px;font-size:12px;color:#dfc5be}.wish footer a{text-underline-offset:5px}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;top:-20px;width:5px;height:9px;background:#dcb18d;border-radius:1px;animation:confetti-fall 5s cubic-bezier(.22,.61,.36,1) both}.confetti i:nth-child(3n){background:#d3a0aa}.confetti i:nth-child(2n){width:3px;height:6px;background:#f0dbb5}@keyframes confetti-fall{to{transform:translate3d(var(--drift),110vh,0) rotate(560deg);opacity:0}}@keyframes letter-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:1500px){.opening{padding-left:max(8%,calc((100vw - 1250px)/2));padding-right:max(8%,calc((100vw - 1250px)/2))}.letter-inner{max-width:1650px;margin:auto}}
@media(max-height:740px) and (min-width:900px){.opening{padding-top:125px;padding-bottom:90px}.opening-art{min-height:380px}.dedication{margin-bottom:20px}.opening-note{margin-top:20px}.open-letter{margin-top:23px}.story-beats{gap:25px}.story h3{font-size:31px}.story-inner{padding-top:5vh;padding-bottom:5vh}.letter-inner{padding:5vh 7%}.letter-paper{max-width:720px;padding-top:22px}.writing-stage{max-height:65vh}.letter-to{font-size:25px}.letter-aside>img{max-height:32vh}.birthday-small{margin-top:18px}.birthday-name{margin-top:20px}}
@media(max-width:900px){.story-inner{gap:6%;padding:8vh 7%}.story h3{font-size:30px}.photo-spread{gap:24px}.memory{width:280px}.between-photos{width:100px}.between-photos svg{width:90px}.letter-inner{grid-template-columns:.55fr 1.45fr;gap:3%;padding:7vh 4%}.letter-aside h2{font-size:40px}.letter-paper{padding:23px 12px 20px}.writing-hint{max-width:130px;line-height:1.5}.letter-aside .script-note{font-size:20px}}
@media(max-width:700px){.sound{top:24px;right:4%;font-size:12px;padding:5px 9px}.sound svg{width:16px}.masthead .date{left:48%;font-size:12px;letter-spacing:.05em}.opening{min-height:100svh}.opening-art{margin-top:0;height:360px}.opening-copy{padding-top:6px}.opening-art img{top:-36%;height:170%}.opening h1{font-size:68px}.opening-note{font-size:15px}.opening-bottom{font-size:12px;bottom:26px}.opening-bottom a{display:flex;align-items:center}.birthday{height:150svh}.birthday-inner{padding:90px 7%}.birthday h2{font-size:52px}.birthday .script-note{font-size:26px}.birthday-small{font-size:15px}.scene-foot{font-size:12px;padding:0 25px}.story{height:210svh}.story-inner{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:65px 9%;gap:30px}.story-title h2{font-size:44px}.story-title h2 br{display:none}.story-title>p{margin-top:15px;font-size:14px}.story-thread{display:none}.story-beats{gap:26px;padding-left:25px}.beat-mark{left:-29px}.beat-intro{font-size:20px;margin-bottom:5px}.story h3{font-size:28px;margin-bottom:8px}.story h3 br{display:none}.story-beat>p:last-child{font-size:13px}.moments{padding:80px 6% 90px}.moments h2{font-size:48px}.moments-heading>p{font-size:14px;line-height:1.6;padding:0 15px}.photo-spread{margin-top:50px;display:block;position:relative;min-height:0}.memory{width:75%;max-width:330px;margin:0 auto 60px;padding:11px 11px 24px}.photo-window{height:330px}.memory figcaption{font-size:23px}.between-photos{display:none}.letter-scene{height:390svh}.letter-inner{display:flex;flex-direction:column;justify-content:center;gap:22px;padding:60px 5% 28px}.letter-aside{max-width:none;align-self:stretch}.letter-aside h2{font-size:38px;text-align:center}.letter-aside h2 br{display:none}.letter-aside>img,.letter-aside .script-note{display:none}.letter-paper{padding:24px 8px 18px;transform:rotate(-.6deg)}.letter-to{font-size:26px;margin-left:4%}.writing-stage{aspect-ratio:840/680}.writing-stage>svg{height:100%}.letter-bottom{padding-top:10px;gap:8px}.writing-hint{font-size:11px;max-width:140px}.text-button{font-size:11px}.writing-hand{width:46%}.letter-fallback{font-size:22px}.wish{padding:85px 20px 110px;min-height:100svh}.wish h2{font-size:49px}.wish-instruction{font-size:13px;max-width:270px}.wish footer{font-size:11px;gap:20px;text-align:left;line-height:1.6}.wish footer>a{white-space:nowrap}.last-letter{margin:30px 0 110px}.last-letter>p:not(.script-note){font-size:16px}.wish.granted .candle{right:5px;bottom:65px;transform:scale(.4)}.signature-wrap svg{width:210px}.candle-image{height:220px;width:147px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.scroll-scene{height:auto!important}.sticky{position:relative;height:auto;min-height:95svh}.birthday-inner{min-height:100svh}.story-inner{padding-top:80px;padding-bottom:80px}.writing-hand{display:none}.letter-inner{padding-top:80px;padding-bottom:80px}.confetti{display:none}}
.opening-art img,.letter-aside>img{mask-image:linear-gradient(to bottom,transparent,black 15%,black 80%,transparent),linear-gradient(to right,transparent,black 12%,black 87%,transparent);mask-composite:intersect;-webkit-mask-composite:source-in}
.writing-hand{mask-image:linear-gradient(to bottom,black 75%,transparent 100%)}
.candle-image{height:280px;width:140px}
@media(max-width:700px){.letter-scene{height:auto}.letter-inner{position:relative;height:auto;min-height:100svh;padding:80px 5%}.letter-aside h2{font-size:38px}.writing-stage{aspect-ratio:auto}.writing-stage.ready>svg{display:none}.writing-stage.ready .letter-fallback{display:block;font-size:23px;line-height:1.4;padding:28px 5%}.writing-hand{display:none}.letter-paper{padding-bottom:20px}.writing-hint{font-size:12px}.letter-bottom .text-button{display:none}.candle-image{width:135px;height:270px}}

/* Entrance: a sealed keepsake opening into their watercolor world. */
body.booting{overflow:hidden}.loader{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:var(--ink);color:var(--paper);overflow:hidden;transition:clip-path 1.1s cubic-bezier(.76,0,.24,1),visibility 1.1s;clip-path:inset(0)}.loader.is-gone{clip-path:inset(0 0 100% 0);visibility:hidden}.loader-wash{position:absolute;inset:-20%;background:url('assets/portrait.webp') center/cover;opacity:.1;filter:blur(24px) saturate(.65);transform:scale(1.08);animation:loader-breathe 5s ease-in-out infinite alternate}.loader-wash:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#542233cc,#542233f5)}.loader-inner{position:relative;width:min(620px,86vw);text-align:center}.loader-mark{display:flex;align-items:center;justify-content:center;gap:18px;font:32px var(--display);margin-bottom:32px}.loader-mark i{width:46px;height:1px;background:#c8929e;position:relative}.loader-mark i:after{content:"";position:absolute;width:5px;height:5px;border:1px solid #c8929e;transform:rotate(45deg);top:-3px;left:20px;background:var(--ink)}.loader-script{font:25px Caveat,cursive;color:#ddbac0}.loader h1{font-size:clamp(54px,7vw,88px);margin-top:14px;color:var(--paper)}.loader-rule{height:1px;background:#81505d;margin:35px auto 18px;max-width:390px;overflow:hidden}.loader-rule span{display:block;width:100%;height:100%;background:#e1bd9b;transform:scaleX(0);transform-origin:left;transition:transform 1.8s cubic-bezier(.16,1,.3,1)}.loader.is-ready .loader-rule span{transform:scaleX(1)}.loader-status{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#d5b8b6;min-height:18px}.enter-story{margin:32px auto 0;border:1px solid #a7737e;background:transparent;color:var(--paper);padding:17px 22px;min-width:215px;display:flex;align-items:center;justify-content:space-between;gap:28px;opacity:.35;transition:opacity .3s,background .3s,color .3s,transform .3s}.enter-story:not(:disabled){opacity:1}.enter-story:not(:disabled):hover{background:var(--paper);color:var(--ink);transform:translateY(-2px)}.enter-story svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4}.masthead{position:fixed;transition:opacity .5s}.booting .masthead,.booting .reading-progress{opacity:0}

.opening{display:block;grid-template-columns:none;height:360svh;min-height:0;padding:0;background:var(--paper);overflow:clip}.opening-stage{width:100%;padding:0;display:grid;place-items:center;isolation:isolate}.opening-stage:before,.opening-stage:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:5}.opening-stage:before{background:linear-gradient(90deg,var(--paper) 0%,transparent 25%,transparent 75%,var(--paper) 100%);opacity:.52}.opening-stage:after{inset:auto 0 0;height:25%;background:linear-gradient(transparent,var(--paper));opacity:.75}.portal-glow{position:absolute;width:min(78vw,1030px);height:min(88vh,800px);border-radius:52% 52% 10px 10px/36% 36% 10px 10px;background:#c98b9842;filter:blur(48px);transform:scale(.86);will-change:transform,opacity}.portal{position:absolute;width:min(55vw,710px);height:min(76vh,720px);top:11vh;overflow:hidden;border-radius:48% 48% 4px 4px/30% 30% 4px 4px;box-shadow:0 26px 80px #54223329;transform-origin:50% 48%;will-change:transform,clip-path,filter;clip-path:inset(0 round 48% 48% 4px 4px/30% 30% 4px 4px);background:#ead5c8}.portal:before{content:"";position:absolute;inset:16px;border:1px solid #fff8eb99;border-radius:48% 48% 2px 2px/30% 30% 2px 2px;z-index:4;pointer-events:none}.portal-backdrop{position:absolute;inset:-15%;background:url('assets/portrait.webp') center/cover;filter:blur(20px) saturate(.65);opacity:.48;transform:scale(1.1);will-change:transform}.portal-portrait{position:absolute;inset:-7% -5%;width:110%;height:114%;object-fit:cover;object-position:center 48%;mix-blend-mode:multiply;mask-image:linear-gradient(transparent 1%,black 18%,black 87%,transparent);will-change:transform,filter}.portal-veil{position:absolute;inset:0;background:linear-gradient(180deg,#fff8ee28 0%,transparent 55%,#f7efdfb5 100%);z-index:3}.opening-copy{position:absolute;z-index:6;max-width:780px;text-align:center;pointer-events:none;will-change:transform,opacity,filter}.opening-copy .dedication{margin:0 0 22px}.opening-copy h1{font-size:clamp(58px,7vw,96px);text-shadow:0 2px 30px #f7efdf}.opening-copy-first{top:12vh}.opening-copy-second{opacity:0;top:24vh}.opening-copy-second .signed{font-size:27px}.portal-caption{position:absolute;z-index:7;bottom:7vh;display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);will-change:opacity,transform}.portal-caption svg{width:18px;fill:none;stroke:currentColor;stroke-width:1.2;animation:scroll-bob 1.8s ease-in-out infinite}.opening .opening-bottom{z-index:7}.opening .opening-bottom span:last-child{margin-left:auto}.birthday{margin-top:0}.reading-progress span{transition:background .3s}

@keyframes loader-breathe{to{transform:scale(1.15);filter:blur(18px) saturate(.8)}}@keyframes scroll-bob{50%{transform:translateY(6px)}}

@media(max-width:700px){.loader-script{font-size:21px}.loader h1{font-size:54px}.opening{height:280svh}.opening-stage{min-height:100svh}.portal{width:84vw;height:64vh;top:18vh}.portal-glow{width:96vw;height:70vh}.opening-copy{width:90%;padding:0 10px}.opening-copy-first{top:12vh}.opening-copy-second{top:22vh}.opening-copy h1{font-size:54px}.opening-copy .dedication{font-size:21px}.portal-caption{bottom:8vh}.opening .opening-bottom{display:none}}

@media(prefers-reduced-motion:reduce){.loader-wash,.portal-caption svg{animation:none}.loader{transition:opacity .3s}.loader.is-gone{clip-path:none;opacity:0}.opening{height:auto}.opening-stage{position:relative;height:100svh}.opening-copy-first{display:none}.opening-copy-second{opacity:1}.portal{transform:none!important}.portal-caption{display:none}}

/* --- Layer: doorway opening. The arch is a frame you pass through into light,
   never a portrait blown up until it is unreadable. --- */
.opening{height:250svh}
.opening-stage:before{opacity:.4}

/* Title sits above the doorway rather than on top of it, so the headline reads
   at full contrast and their faces stay uncropped. */
.portal{top:35vh;height:min(53vh,480px);--frame:1}
.portal:before{opacity:var(--frame)}
.portal-portrait{object-position:center 40%;mask-image:linear-gradient(transparent 1%,#000 13%,#000 88%,transparent)}
.portal-backdrop{opacity:.34}
.portal-glow{top:27vh}

/* Kept as a faint lift under the type for the moment the arch drifts up into it. */
.portal-scrim{position:absolute;z-index:5;width:min(64vw,840px);height:min(40vh,360px);top:4vh;
  background:radial-gradient(ellipse at 50% 42%,#f7efdfd6 0%,#f7efdf9e 45%,#f7efdf00 74%);
  pointer-events:none;will-change:opacity,transform}

/* The light you step into. Scales out of the arch and floods the screen. */
.portal-flood{position:absolute;inset:0;z-index:5;opacity:0;pointer-events:none;will-change:opacity,transform;
  background:radial-gradient(ellipse at 50% 46%,#fffaf0 0%,#f9f1e2 34%,#f2e3d2 68%,#eddbc9 100%)}

.opening-copy h1{text-shadow:0 1px 26px #f7efdf,0 1px 3px #f7efdf}
.opening-copy-first{top:7vh}
.opening-copy-second{top:26vh}


/* The date label was landing on top of section headings further down the page. */
.masthead .date{transition:opacity .45s}
body.past-opening .masthead .date{opacity:0}
.moments{padding-top:155px}

/* Birthday chapter: lines arrive one at a time instead of sitting there pre-rendered. */
.birthday-content .reveal{will-change:opacity,transform}
.birthday-date{will-change:transform,opacity}

@media(max-height:820px) and (min-width:900px){
  .opening-copy-first{top:5vh}
  .opening-copy h1{font-size:clamp(50px,5.4vw,72px)}
  .portal{top:32vh;height:min(52vh,430px)}
  .portal-glow{top:25vh}
}
@media(max-width:700px){
  .opening{height:215svh}
  .portal{top:38vh;height:48vh}
  .portal-glow{top:30vh}
  .portal-scrim{width:94vw;height:30vh;top:5vh}
  .moments{padding-top:110px}
}
@media(prefers-reduced-motion:reduce){
  .opening{height:auto}
  .portal-flood,.portal-scrim{display:none}
  .portal{--frame:1}
}

/* Clear the fixed masthead and the footer rule. */
.opening-copy-first{top:11vh}
.opening-copy h1{font-size:clamp(52px,5.6vw,80px)}
.portal-caption{bottom:11vh}
@media(max-height:820px) and (min-width:900px){.opening-copy-first{top:9vh}.opening-copy h1{font-size:clamp(46px,4.9vw,66px)}}
@media(max-width:700px){.opening-copy-first{top:12vh}.opening-copy h1{font-size:46px}.portal-caption{bottom:9vh}}

/* The blown-out candle was stranded half-out of the corner. Settle it under the
   closing letter instead, dimmed, as a spent object rather than a stray sprite. */
.wish.granted .candle{position:static;margin:0 auto 4px;opacity:.5;transform:scale(.72);
  transform-origin:center bottom;transition:opacity .9s ease .4s}
.wish.granted{display:flex;flex-direction:column;justify-content:center}
.wish.granted .last-letter{margin-bottom:60px}
@media(max-width:700px){.wish.granted .candle{transform:scale(.58);margin-bottom:0}}

/* The monogram inherits ink and vanishes against the burgundy chapters, and the
   date collides with section headings. Retire the whole masthead after the
   opening — the sound toggle is fixed separately and stays. */
.masthead{transition:opacity .5s}
body.past-opening .masthead{opacity:0;pointer-events:none}

/* ============================================================
   Cinema model. The page no longer scrolls in the ordinary sense:
   every chapter is a full-viewport scene stacked in one fixed stage,
   and scrolling cross-dissolves one scene into the next. An empty
   track below supplies the scroll distance.
   ============================================================ */
.stage{position:fixed;inset:0;overflow:hidden;z-index:1}
#track{position:relative;z-index:0;pointer-events:none}

.stage > section{
  position:absolute;inset:0;width:100%;height:100svh;min-height:0;
  overflow:hidden;opacity:0;pointer-events:none;
  transform-origin:50% 50%;will-change:opacity,transform,filter;
  display:grid;place-items:center;margin:0}
.stage > section.is-live{pointer-events:auto}

/* The old sticky wrappers become plain full-bleed scene contents. */
.stage > section > .sticky{position:static;height:100%;width:100%;overflow:visible}

/* Scenes that were laid out as ordinary flow now need to fill a scene box. */
.moments{padding:0 8%;display:grid;place-items:center;align-content:center}
.moments .photo-spread{margin-top:46px;min-height:0}
.wish{position:absolute;min-height:0;padding:0 24px;display:grid;place-items:center;align-content:center}
.wish footer{bottom:26px}

/* Chapters no longer own their scroll length in CSS; the track does. */
.opening,.birthday,.story,.letter-scene{height:100svh}

.stage > section > .scene-foot,.stage > section .scene-foot{z-index:8}

@media(prefers-reduced-motion:reduce){
  /* Fall back to an ordinary, complete, still document. */
  .stage{position:static;overflow:visible}
  #track{display:none}
  .stage > section{position:relative;opacity:1!important;pointer-events:auto;
    transform:none!important;filter:none!important;height:auto;min-height:100svh}
  .opening,.birthday,.story,.letter-scene{height:auto}
  .moments,.wish{position:relative;padding:90px 8%}
}
.stage{background:var(--paper)}

/* The stage owns the ground colour now, so chapters paint only their content. */
.stage > section{background:transparent!important}

/* Fit each scene inside one viewport: the photo spread and the closing
   signature were both running past the bottom edge of the stage. */
.moments .photo-window{height:min(42vh,360px)}
.moments .memory{width:min(27vw,300px)}
.moments-heading h2{font-size:clamp(34px,4vw,56px)}
.wish .last-letter{margin:18px auto 34px}
.wish .last-letter>p:not(.script-note){margin:20px 0;font-size:17px}
.wish .signature-wrap{margin-top:22px}
.wish .signature-wrap svg{height:82px}
.wish h2{font-size:clamp(38px,4.6vw,64px)}

/* --- The wedding day. Deep ground so the gold in the photographs glows. --- */
.the-day{color:var(--paper)}
.day-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:5%;
  padding:7vh 7%;align-items:center}
.day-copy .script-note{color:#e0b4ab;margin-bottom:14px}
.day-copy h2{font-size:clamp(46px,5.4vw,80px);line-height:1.02;letter-spacing:-.025em}
.day-copy h2 em{color:#e8bda4}
.day-spread{display:flex;justify-content:center;align-items:center}
.the-day .memory{background:#fffbf1;padding:11px 11px 13px;margin:0;
  box-shadow:0 20px 55px #14070c66;flex-shrink:0;will-change:transform,opacity}
.the-day .photo-window{height:min(48vh,410px)}
.day-one{width:min(25vw,300px);z-index:1}
.day-two{width:min(22vw,262px);z-index:2}
.the-day .memory img{object-position:50% 42%}

@media(max-width:900px){
  .day-inner{grid-template-columns:1fr;gap:26px;padding:6vh 7%;justify-items:center;text-align:center}
  .day-copy h2{font-size:44px}
  .the-day .photo-window{height:min(36vh,300px)}
  .day-one{width:min(46vw,230px)}
  .day-two{width:min(40vw,200px)}
}
@media(prefers-reduced-motion:reduce){
  .the-day .memory{opacity:1!important}
  .day-inner{padding:80px 7%}
}