:root{--ivory:#eee5d5;--paper:#faf6ed;--wine:#511d2b;--ink:#492c30;--faded:#78625b;--display:'Cormorant Garamond',serif;--body:'Be Vietnam Pro',sans-serif;--env-w:min(680px,80vw);--env-h:min(414px,48.7vw)}*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:var(--ivory);color:var(--ink);font:400 15px/1.7 var(--body);background-image:linear-gradient(#eee5d58c,#eee5d58c),url('assets/public/original-ivory-paper.png');background-size:auto,550px auto}body>main{overflow:clip}h1,h2,p,figure{margin:0}h1,h2{font:400 76px/1 var(--display)}button,input,textarea{font:inherit}a{color:inherit;text-underline-offset:4px}button{cursor:pointer;touch-action:manipulation}button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid #98543b;outline-offset:5px}[hidden]{display:none!important}.letter-nav{height:68px;position:absolute;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:0 35px;font-size:11px;z-index:30}.letter-nav>a{font-size:20px;display:grid;place-items:center;width:44px;height:44px;text-decoration:none}.letter-nav b{font-weight:400}.letter-nav>button{border:0;background:none;color:inherit;font-size:11px;min-height:44px;padding:8px 0}.letter-experience{position:relative}.letter-stage{height:100svh;min-height:620px;position:relative;perspective:1600px;isolation:isolate;overflow:visible}.intro-title{position:absolute;top:12%;left:50%;transform:translateX(-50%);width:90%;text-align:center;z-index:8;pointer-events:none}.intro-title>p{font-size:11px;margin-bottom:14px}.intro-title h1{font:italic clamp(54px,6.1vw,91px)/.93 var(--display);letter-spacing:-.025em}.envelope-back,.envelope-pocket,.flap-hinge{position:absolute;width:var(--env-w);height:var(--env-h);left:50%;top:61%;margin-left:calc(var(--env-w)/-2);margin-top:calc(var(--env-h)/-2)}.envelope-back{z-index:2;border-radius:3px;background:#652a36;box-shadow:inset 0 0 0 1px #3c1824,inset 0 6px 12px #29101e44}.envelope-back:after,.pocket-left:after,.pocket-right:after,.pocket-bottom:after,.flap-front:after,.flap-inside:after{content:'';position:absolute;inset:0;background:url('assets/public/original-ivory-paper.png') center/760px auto;mix-blend-mode:soft-light;opacity:.9;pointer-events:none}.envelope-shadow{position:absolute;width:var(--env-w);height:var(--env-h);left:50%;top:61%;margin-left:calc(var(--env-w)/-2);margin-top:calc(var(--env-h)/-2);background:#3e172622;box-shadow:0 35px 50px #40162642;z-index:1;transform:rotate(-1.5deg)}.envelope-back{transform:rotate(-1.5deg)}.envelope-pocket{z-index:5;transform:rotate(-1.5deg);filter:drop-shadow(0 -1px 1px #35101d55)}.pocket-left,.pocket-right,.pocket-bottom{position:absolute;inset:0;border-radius:3px}.pocket-left{background:linear-gradient(35deg,#6f2c3c,#582031);clip-path:polygon(0 0,56% 60%,0 100%)}.pocket-right{background:linear-gradient(150deg,#6e2c3b,#4d1c2b);clip-path:polygon(100% 0,44% 60%,100% 100%)}.pocket-bottom{background:linear-gradient(15deg,#5f2133,#702e3e);clip-path:polygon(0 100%,50% 42%,100% 100%);box-shadow:inset 0 -1px #e4bd7b44}.envelope-address{position:absolute;bottom:12%;left:0;right:0;text-align:center;color:#e9ddc8}.envelope-address>span{font:italic 38px/1 var(--display);display:block}.envelope-address small{font:10px var(--body);display:block;margin-top:12px;letter-spacing:.02em}.envelope-address b{font-weight:400}.flap-hinge{z-index:6;transform:rotate(-1.5deg);transform-origin:50% 50%;transform-style:preserve-3d;pointer-events:none}.flap-fold{position:absolute;inset:0;transform-origin:50% 0;transform-style:preserve-3d}.flap-front,.flap-inside{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 54%);backface-visibility:hidden;-webkit-backface-visibility:hidden}.flap-front{background:linear-gradient(150deg,#7b3847,#572131);box-shadow:inset 0 1px #c5938655}.flap-inside{background:#8b4d52;transform:rotateY(180deg)}.wax-seal{position:absolute;top:61%;left:50%;width:110px;height:110px;object-fit:contain;z-index:7;transform:translate(-50%,-50%) rotate(-8deg);filter:drop-shadow(0 3px 2px #270d1d66);pointer-events:none}.letter-sheet{position:absolute;top:0;left:50%;width:min(820px,88vw);transform:translateX(-50%);z-index:3;background:var(--paper);background-image:linear-gradient(#faf6edb3,#faf6edb3),url('assets/public/original-ivory-paper.png');background-size:auto,960px auto;box-shadow:0 2px 3px #402c2420,0 18px 55px #402c241c;transform-origin:50% 0;will-change:transform}.letter-sheet:before{content:'';position:absolute;inset:7px;border:1px solid #ae947b44;pointer-events:none;z-index:3}.letter-cover{height:550px;position:relative;margin:25px 25px 0;overflow:hidden;background:#51433c}.letter-cover img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 61%;filter:grayscale(1) sepia(.14) brightness(.73)}.cover-copy{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff9ed;text-shadow:0 2px 10px #0006;padding:24px;gap:20px}.cover-copy span{font-size:12px}.cover-copy h2{font:italic clamp(56px,6vw,76px)/1.05 var(--display);letter-spacing:-.035em}.letter-inner{text-align:center;padding:75px 65px 85px}.salutation{font:italic 30px var(--display);margin-bottom:30px}.personal-message{font:400 22px/1.65 var(--display);margin:0 auto 26px;max-width:460px;text-wrap:balance}.signature{font:italic 42px/1.1 var(--display);margin:35px auto 0}.letter-date{padding-top:70px;margin:60px auto 0;position:relative}.letter-date:before{content:'';position:absolute;top:0;width:60px;height:1px;left:calc(50% - 30px);background:#b09a7c}.letter-date>p{font-size:13px}.letter-date h2{font-size:40px;line-height:1.05;margin:20px 0}.letter-date .venue-note{font-size:11px;color:var(--faded);margin-top:9px}.ink-link{border:0;border-bottom:1px solid #90756677;background:none;color:inherit;min-height:44px;padding:9px 0;font-size:12px;text-decoration:none;display:inline-block}.letter-date .ink-link{margin-top:20px}.countdown-block{margin-top:60px}.countdown-block>p{font-size:12px}.countdown{display:flex;align-items:start;justify-content:center;gap:18px;margin:18px 0 0}.countdown strong{font:50px/1.5 var(--display);min-width:65px;display:block;font-variant-numeric:lining-nums tabular-nums}.countdown span{display:block;font-size:10px;line-height:1.6;margin-top:8px}.countdown i{font:28px var(--display);height:75px;display:flex;align-items:center;color:#ad9376}#event-ended{margin-top:20px}.scroll-cue{position:absolute;bottom:38px;left:50%;transform:translateX(-50%);text-align:center;z-index:10;font-size:10px}.cue-line{height:34px;width:1px;background:#95796b;display:block;margin:13px auto 0}.read-directly{position:absolute;bottom:25px;right:35px;font-size:10px;z-index:10}.reading-space{height:0}.wishes{position:relative;padding:85px 30px 40px;text-align:center;max-width:1120px;margin:auto}.small-note{font-size:12px;margin-bottom:18px}.wishes h2{font:italic 72px/.95 var(--display)}.wish-board{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin:55px auto 40px;align-items:start}.wish-card{background:var(--paper);background-image:linear-gradient(#faf6edc9,#faf6edc9),url('assets/public/original-ivory-paper.png');padding:32px 25px 25px;box-shadow:0 5px 15px #47252a12;transform:rotate(-3deg);text-align:center;position:relative}.wish-card:nth-child(2n){transform:rotate(3deg);margin-top:18px}.wish-card:before{content:'';width:7px;height:7px;border-radius:50%;position:absolute;top:7px;left:calc(50% - 3px);background:#a7906b;box-shadow:0 1px 2px #0004}.wish-card p{font:italic 28px/1.2 var(--display);overflow-wrap:anywhere}.wish-card strong{display:block;font-size:11px;margin-top:24px;font-weight:400}.wish-card small{display:block;font-size:10px;color:var(--faded)}.paper-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #78595055;border-radius:40px;min-height:48px;background:var(--wine);color:var(--paper);padding:11px 29px;font-size:13px}.local-disclosure{font-size:10px;color:var(--faded);margin:18px auto 0;max-width:310px}.review-notes{max-width:570px;margin:22px auto 0;font-size:11px}.review-notes summary{min-height:44px;cursor:pointer;padding:12px;color:var(--faded)}.pending-row{border-bottom:1px solid #baa68b66;padding:20px 0;overflow-wrap:anywhere}.pending-row p{font-size:14px}.pending-row button{min-height:44px;border:1px solid #b49c7b;background:none;padding:7px 13px;margin:10px 5px 0;border-radius:20px;color:var(--ink);font-size:11px}footer{text-align:center;padding:70px 25px 110px}.closing{font:italic clamp(64px,8vw,100px)/.9 var(--display)}footer .signature{font-size:36px;margin-top:35px}footer>.ink-link{margin-top:30px}.preview-sources{max-width:540px;font-size:10px;margin:30px auto 0;color:var(--faded)}.preview-sources summary{min-height:44px;cursor:pointer;padding:12px}.preview-sources p{margin:12px 0}.music-toggle{position:fixed;bottom:22px;left:25px;background:#f9f5e9;border:1px solid #cbbda6;border-radius:40px;z-index:40;color:var(--ink);display:flex;align-items:center;gap:9px;padding:5px 13px 5px 5px;min-height:44px;font-size:10px;box-shadow:0 3px 15px #3b202616}.record{height:31px;width:31px;display:grid;place-items:center;background:repeating-radial-gradient(circle,#272221 0 2px,#453a37 2px 3px);color:#e6d5b6;border-radius:50%}.music-toggle[aria-pressed=true]{border-color:#8b5e35}.music-toggle[aria-pressed=true] .record{animation:record-turn 8s linear infinite}@keyframes record-turn{to{transform:rotate(360deg)}}dialog{width:min(570px,calc(100vw - 30px));max-height:calc(100dvh - 30px);overflow:auto;background:var(--paper);color:var(--ink);border:1px solid #c0a98b;border-radius:8px;padding:48px 30px 30px}dialog::backdrop{background:#321b258c;backdrop-filter:blur(3px)}dialog h2{font:italic 48px/1 var(--display);margin-bottom:20px}.dialog-close{position:absolute;top:7px;right:7px;width:44px;height:44px;background:none;border:0;font-size:25px;color:var(--ink)}label{display:block;font-size:13px;margin:20px 0 7px}input,textarea{width:100%;border:1px solid #b6a38d;border-radius:4px;background:#fffcf4;color:var(--ink);padding:11px 12px;font-size:16px}textarea{resize:vertical}dialog .paper-button{margin-top:25px}dialog .ink-link{margin:20px}.form-note{font-size:12px;color:var(--faded);margin-top:15px}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}#toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);background:var(--wine);color:var(--paper);border-radius:8px;padding:15px 22px;font-size:12px;z-index:100;box-shadow:0 4px 20px #0002}
/* Without motion, the same real letter stays in normal document flow. */
body.static-letter .letter-stage{height:auto;min-height:0;overflow:visible;padding-top:95px}body.static-letter .intro-title,body.static-letter .envelope-back,body.static-letter .envelope-shadow,body.static-letter .envelope-pocket,body.static-letter .flap-hinge,body.static-letter .wax-seal,body.static-letter .scroll-cue,body.static-letter .read-directly{display:none}body.static-letter .letter-sheet{position:relative;left:auto;top:auto;margin:0 auto;transform:none;will-change:auto}
@media(min-width:1600px){:root{--env-w:760px;--env-h:463px}}
@media(max-width:700px){:root{--env-w:84vw;--env-h:52vw}.letter-nav{padding:0 16px;height:60px;font-size:10px}.letter-nav>button{font-size:10px}.letter-stage{min-height:560px}.intro-title{top:16%}.intro-title>p{font-size:10px;margin-bottom:18px}.intro-title h1{font-size:clamp(47px,10vw,65px);line-height:.97}.envelope-back,.envelope-pocket,.flap-hinge,.envelope-shadow{top:59%}.wax-seal{top:59%;width:80px;height:80px}.envelope-address>span{font-size:29px}.envelope-address small{font-size:9px;margin-top:7px}.scroll-cue{bottom:50px}.read-directly{bottom:18px;right:19px}.letter-sheet{width:91vw}.letter-cover{height:440px;margin:14px 14px 0}.cover-copy{gap:12px;padding:18px}.cover-copy span{font-size:10px}.cover-copy h2{font-size:58px;line-height:1.05;max-width:250px}.letter-inner{padding:55px 27px 60px}.salutation{font-size:28px;margin-bottom:26px}.personal-message{font-size:20px;line-height:1.65;margin-bottom:24px}.signature{font-size:36px;margin-top:30px}.letter-date{margin-top:48px;padding-top:48px}.letter-date>p{font-size:12px}.letter-date h2{font-size:32px}.letter-date .venue-note{font-size:10px}.countdown-block{margin-top:45px}.countdown{gap:7px}.countdown strong{font-size:40px;min-width:48px}.countdown i{font-size:24px;height:60px;padding:0}.countdown span{font-size:9px}.wishes{padding:55px 30px 20px}.wishes h2{font-size:61px}.wish-board{grid-template-columns:1fr;max-width:360px;gap:28px;margin-top:40px}.wish-card:nth-child(2n){margin-top:0}.wish-card p{font-size:29px}.music-toggle{left:12px;bottom:12px}.closing{font-size:65px}.preview-sources{font-size:10px}.field-grid{grid-template-columns:1fr;gap:0}dialog{padding:45px 22px 24px}#toast{bottom:70px;width:max-content}.reading-space{pointer-events:none}}
@media(max-width:360px){.letter-inner{padding-inline:20px}.countdown{gap:5px}.countdown strong{min-width:41px;font-size:36px}.countdown i{height:54px}.intro-title h1{font-size:46px}.cover-copy h2{font-size:53px}.letter-cover{height:390px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}html{scroll-behavior:auto}}
.letter-sheet{visibility:hidden}body.static-letter .letter-sheet{visibility:visible}
/* Keep the closed composition within short landscape viewports too. */
@media(max-height:740px) and (min-width:701px){:root{--env-w:min(560px,64vw,82vh);--env-h:min(340px,39vw,50vh)}.intro-title{top:10%}.intro-title h1{font-size:clamp(42px,8vh,65px)}.intro-title>p{margin-bottom:9px}.envelope-back,.envelope-pocket,.flap-hinge,.envelope-shadow{top:63%}.wax-seal{top:63%;width:85px;height:85px}.scroll-cue{bottom:18px}.cue-line{height:18px}}
.letter-stage{min-height:0}

.figma-envelope-heart{display:block;margin:0 auto 24px;width:60px;height:auto;mix-blend-mode:multiply}.figma-outline-heart{display:block;margin:0 auto 30px;width:32px;height:auto;mix-blend-mode:multiply}

/* Physical envelope: front + rear + four thin edges share one orientation. */
.envelope-object{position:absolute;inset:0;z-index:2;transform-style:preserve-3d;transform-origin:50% 61%;pointer-events:none}
.envelope-shell{position:absolute;width:var(--env-w);height:var(--env-h);left:50%;top:61%;margin-left:calc(var(--env-w)/-2);margin-top:calc(var(--env-h)/-2);transform:rotate(-1.5deg);transform-style:preserve-3d}
.envelope-back{transform:translateZ(-5px) rotate(-1.5deg);backface-visibility:hidden}
.envelope-pocket{transform:translateZ(5px) rotate(-1.5deg);backface-visibility:hidden;filter:none}
.flap-hinge{transform:translateZ(5px) rotate(-1.5deg)}
.letter-sheet{backface-visibility:hidden}
.wax-seal{transform:translate(-50%,-50%) translateZ(12px) rotate(-8deg);backface-visibility:hidden}
.envelope-rear{position:absolute;inset:0;border-radius:3px;background:#682b3b url('assets/public/original-ivory-paper.png') center/760px auto;background-blend-mode:multiply;transform:translateZ(-5px) rotateY(180deg);backface-visibility:hidden;box-shadow:inset 0 0 0 1px #9e61664d;display:grid;place-items:center;color:#e9ddc8;text-align:center}
.envelope-rear span{font:italic 34px/1.15 var(--display)}.envelope-rear i{font-size:46px;display:block;margin-top:8px}
.envelope-edge{position:absolute;background:linear-gradient(90deg,#421626,#8d4d56 40%,#5b2534);backface-visibility:hidden}
.edge-top,.edge-bottom{left:0;width:100%;height:10px;transform:translateY(-50%) rotateX(90deg)}
.edge-top{top:0}.edge-bottom{top:100%;transform:translateY(-50%) rotateX(-90deg)}
.edge-left,.edge-right{top:0;height:100%;width:10px;transform:translateX(-50%) rotateY(-90deg)}
.edge-left{left:0}.edge-right{left:100%;transform:translateX(-50%) rotateY(90deg)}
.envelope-interaction{position:absolute;width:calc(var(--env-w) + 36px);height:calc(var(--env-h) + 50px);left:50%;top:61%;transform:translate(-50%,-50%);z-index:11;cursor:grab;touch-action:pan-y;user-select:none;border-radius:12px}
.envelope-interaction.is-dragging{cursor:grabbing}
.envelope-interaction:focus,.envelope-interaction:focus-visible{outline:none}
.rotation-tools{position:absolute;left:50%;top:calc(61% + var(--env-h)/2 + 38px);transform:translateX(-50%);z-index:12;text-align:center;white-space:nowrap;font-size:10px;color:var(--faded)}
.rotation-tools>div{display:flex;justify-content:center;gap:18px}.rotation-tools button{border:0;border-bottom:1px solid #90756655;background:none;color:var(--ink);font-size:10px;min-height:44px;padding:8px 0}.rotation-tools p{font-size:10px}
body.static-letter .envelope-object{position:static;transform:none!important;perspective:none}
body.static-letter .envelope-shell,body.static-letter .envelope-interaction,body.static-letter .rotation-tools{display:none}
@media(max-width:700px){.envelope-shell,.envelope-interaction{top:59%}.envelope-object{transform-origin:50% 59%}.rotation-tools{top:calc(59% + var(--env-h)/2 + 25px)}.envelope-rear span{font-size:25px}.envelope-rear i{font-size:35px}}
@media(max-height:740px) and (min-width:701px){.envelope-shell,.envelope-interaction{top:63%}.rotation-tools{top:calc(63% + var(--env-h)/2 + 25px)}}
@media(max-height:500px){.rotation-tools p{display:none}.rotation-tools{top:calc(63% + var(--env-h)/2 + 8px)}.scroll-cue{left:30px;transform:none}.read-directly{bottom:10px}}
.letter-sheet{pointer-events:auto}
@media(min-width:701px) and (min-height:741px){.scroll-cue{bottom:18px}.cue-line{height:24px}}
@media(max-height:740px) and (min-width:701px){.rotation-tools{left:35px;top:auto;bottom:18px;transform:none;text-align:left}.rotation-tools p{display:none}}
@media(max-height:500px){.rotation-tools{left:22px;top:auto;bottom:10px;transform:none}.scroll-cue{left:50%;transform:translateX(-50%)}.rotation-tools p{display:none}}
/* Soft contact shadow stays on the paper surface as the envelope turns. */
.envelope-shadow{width:calc(var(--env-w)*.8);height:36px;top:calc(61% + var(--env-h)/2 + 18px);margin-top:0;margin-left:calc(var(--env-w)*-.4);border-radius:50%;background:#40162630;box-shadow:none;filter:blur(22px);transform:none}
.envelope-rear{background-blend-mode:soft-light}
@media(max-width:700px){.envelope-shadow{top:calc(59% + var(--env-h)/2 + 18px)}}
@media(max-height:740px) and (min-width:701px){.envelope-shadow{top:calc(63% + var(--env-h)/2 + 10px)}}
.envelope-rear{visibility:hidden;backface-visibility:visible}
.envelope-object[data-facing=rear] .envelope-rear{visibility:visible}
.envelope-object[data-facing=rear] .envelope-back,.envelope-object[data-facing=rear] .envelope-pocket,.envelope-object[data-facing=rear] .flap-hinge,.envelope-object[data-facing=rear] .wax-seal{visibility:hidden}
@media(min-width:701px) and (min-height:741px) and (max-height:960px){.rotation-tools{top:auto;bottom:64px}.rotation-tools p,.cue-line{display:none}}
@media(max-width:700px) and (max-height:700px){.rotation-tools{top:auto;bottom:70px}.rotation-tools p,.cue-line{display:none}.scroll-cue{bottom:25px}}
@media(max-height:500px) and (min-width:701px){:root{--env-w:min(45vw,64vh);--env-h:calc(var(--env-w)*.61)}.intro-title{top:60px}.intro-title>p{display:none}.intro-title h1{font-size:40px}.wax-seal{width:64px;height:64px}.rotation-tools{left:50%;bottom:7px;transform:translateX(-50%)}.scroll-cue{left:35px;bottom:84px;transform:none}.cue-line{display:none}}

/* Center the title + envelope as a single composition at every viewport height. */
.envelope-back,.envelope-pocket,.flap-hinge,.envelope-shell,.envelope-interaction,.wax-seal{top:var(--envelope-center,61%)}
.envelope-shadow{top:calc(var(--envelope-center,61%) + var(--env-h)/2 + 18px)}
/* Direct reading remains available to keyboard users without visible instructions. */
.read-directly{clip-path:inset(50%);width:1px;height:1px;min-height:0;overflow:hidden;padding:0;white-space:nowrap}
.read-directly:focus-visible{clip-path:none;width:auto;height:auto;min-height:44px;padding:9px 0;overflow:visible}