:root{--background:#f8f4ed;--ink:#655044;--red:#973f50;--paper:#fffaf0;--serif:"Cormorant Garamond", Georgia, serif;--hand:"Caveat", "Bradley Hand", "Segoe Print", cursive}*{box-sizing:border-box}html{scrollbar-width:thin;scrollbar-color:#cfb7ab var(--background)}body{background:var(--background);color:var(--ink);-webkit-font-smoothing:antialiased;margin:0}button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--red);outline-offset:6px}.experience{overflow-anchor:none;height:850svh;position:relative;overflow:clip}.viewport-size{visibility:hidden;pointer-events:none;height:100svh;position:absolute;inset:0 0 auto}.stage{perspective:1800px;perspective-origin:50%;--envelope-width:min(560px, 84vw, 57svh);--envelope-height:calc(var(--envelope-width) * .62);--envelope-x:calc((100vw - var(--envelope-width)) / 2);--envelope-y:calc((100svh - var(--envelope-height)) / 2);--envelope-turn:0deg;--envelope-tilt:-5deg;--envelope-drop:0px;--seal-split:0px;--seal-twist:0deg;--seal-size:calc(var(--envelope-width) * .13);--flap-turn:0deg;--flap-z:9px;--paper-width:460px;--paper-height:658px;--paper-font:24px;--paper-x:25px;--paper-y:-130px;--sheet-width:460px;--sheet-height:658px;--paper-turn:0deg;--fold-top:-180deg;--fold-bottom:180deg;--top-thickness:.2px;--bottom-thickness:.4px;--top-shade:0;--bottom-shade:0;--fold-edge:.18;--unfolded:0;--album-scale:.2;--album-x:0px;--album-y:0px;--paper-shadow:.2;--paper-z:3px;--viewport-width:100vw;--written-visibility:hidden;--album-visibility:hidden;width:100%;height:100svh;position:sticky;top:0;overflow:clip}.stationery{background-color:var(--paper);background-image:repeating-linear-gradient(0deg,#8b745606 0 1px,#0000 1px 3px),repeating-linear-gradient(90deg,#8b745605 0 1px,#0000 1px 4px)}.envelope-position{width:var(--envelope-width);height:var(--envelope-height);left:var(--envelope-x);top:var(--envelope-y);transform-style:preserve-3d;pointer-events:none;position:absolute}.envelope-rotation{width:100%;height:100%;transform-style:preserve-3d;transform:rotateZ(var(--envelope-tilt)) rotateY(var(--envelope-turn));position:relative}.envelope-front,.envelope-back{backface-visibility:hidden;position:absolute;inset:0}.envelope-front{transform:translateY(var(--envelope-drop)) translateZ(12px);background-color:#f4e8d5;border:1px solid #deccb2;border-radius:3px;box-shadow:0 2px 1px #cfc2b4,0 4px 0 -1px #eee5d4,0 6px 1px -2px #cfc2b4,4px 24px 28px -15px #51432c45,18px 45px 65px -30px #77574344}.envelope-front:after{content:"";border:1px solid #cdbda72b;position:absolute;inset:5px}.address{font:clamp(27px, 5vw, 51px)/1.4 var(--hand);color:var(--red);position:absolute;top:38%;left:12%;transform:rotate(-3deg)}.address span{font:.65em var(--serif);margin-left:7px}.sender{font:clamp(12px, 1.6vw, 17px) var(--hand);color:#ad927b;position:absolute;bottom:10%;left:9%}.stamp{aspect-ratio:.8;outline-offset:-2px;color:#ab5966;background:#e7cfbf;border:5px solid #ebd8c8;outline:3px dotted #f4e8d5;place-items:center;width:13%;display:grid;position:absolute;top:9%;right:6%;transform:rotate(7deg)}.stamp span{font:clamp(20px, 4vw, 37px) var(--serif);text-shadow:1px 1px #fff7}.envelope-back{transform-style:preserve-3d;transform:rotateY(180deg)}.envelope-lining{transform:translateY(var(--envelope-drop));background-color:#e4cfc6;background-image:repeating-linear-gradient(45deg,#a9888222 0 1px,#0000 1px 8px);border:1px solid #d3bda0;border-radius:3px;position:absolute;inset:0;box-shadow:0 2px 1px #c8b5a1,5px 25px 30px -17px #71564060}.paper-position{width:var(--sheet-width);height:var(--sheet-height);transform:translate3d(var(--paper-x), var(--paper-y), var(--paper-z));transform-style:flat;isolation:isolate;perspective:1600px;position:absolute;top:0;left:0}.paper-rotation{width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--paper-turn));position:relative}.letter-written{width:var(--paper-width);height:var(--paper-height);transform-style:preserve-3d;backface-visibility:hidden;font:500 var(--paper-font)/1.42 var(--hand);visibility:var(--written-visibility);position:absolute;top:0;left:0;transform:translateZ(1px)}.letter-written:before{content:"";opacity:var(--unfolded);pointer-events:none;position:absolute;inset:0;box-shadow:0 1px 2px #b8a68f44,0 18px 40px -20px #715b4144}.letter-panel{width:100%;height:calc(33.3333% + .5px);transform-style:preserve-3d;position:absolute;left:0}.panel-top{transform-origin:bottom;transform:translateZ(var(--top-thickness)) rotateX(var(--fold-top));--fold-shade:var(--top-shade);top:0}.panel-middle{--fold-shade:0;top:33.3333%}.panel-bottom{transform-origin:top;transform:translateZ(var(--bottom-thickness)) rotateX(var(--fold-bottom));--fold-shade:var(--bottom-shade);top:66.6667%}.panel-face,.panel-back{backface-visibility:hidden;box-shadow:0 2px 5px rgb(89 64 42/var(--fold-edge));position:absolute;inset:0}.panel-face{overflow:hidden;transform:translateZ(.1px)}.panel-face:after{content:"";pointer-events:none;opacity:var(--fold-shade);background:linear-gradient(175deg,#6d5037,#0000 60%);position:absolute;inset:0}.panel-back{background-color:#f3e9d8;transform:rotateX(180deg)}.letter-copy{width:var(--paper-width);padding:8% 9%;position:absolute;left:0}.letter-written h1{font:500 1.6em/1.15 var(--hand);color:var(--red);margin:0 0 .65em}.letter-written p{white-space:pre-line;margin:0 0 .7em}.signature{flex-direction:column;margin-top:.7em;display:flex}.signature>span{font-size:.95em}.signature strong{font:500 1.45em/1.4 var(--hand);color:var(--red)}.sr-only{clip-path:inset(50%);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.letter-reverse{visibility:var(--album-visibility);backface-visibility:hidden;box-shadow:1px 3px 2px rgb(105 83 64/var(--paper-shadow)), 0 24px 55px -18px rgb(105 83 64/var(--paper-shadow));position:absolute;inset:0;transform:rotateY(180deg)}.gallery{width:var(--viewport-width);background:var(--background);transform-origin:0 0;min-height:100svh;transform:translate(var(--album-x), var(--album-y)) scale(var(--album-scale));padding:clamp(26px,6vw,100px);position:absolute;top:0;left:0}.photo-grid{perspective:1200px;grid-template-columns:.8fr 1.1fr 1.5fr .9fr;align-items:start;gap:clamp(36px,10vh,130px) clamp(20px,3.4vw,60px);padding:2vw 0;display:grid}.photo-print{transform:rotate(var(--rotation)) rotateX(3deg);background:#fffdf7;border:1px solid #f1e7d9;padding:clamp(6px,.8vw,12px);transition:transform .3s,box-shadow .3s;box-shadow:1px 2px 1px #aa968032,4px 14px 22px -10px #5d493744}.photo-print:nth-child(2n){margin-top:26px}.stage[data-gallery-ready=true] .letter-reverse{background-image:none}.stage[data-gallery-ready=true] .gallery{pointer-events:auto}.stage[data-gallery-ready=true] .photo-print:hover,.stage[data-gallery-ready=true] .photo-print:focus-visible{transform:rotate(0)rotateX(0)translateY(-5px);box-shadow:3px 20px 30px -10px #5d493744}.photo-image{place-items:center;width:100%;display:grid;position:relative;overflow:hidden}.photo-image.rose{background:linear-gradient(145deg,#e9d4ce,#d7b7b3)}.photo-image.sage{background:linear-gradient(145deg,#e0e2d5,#bac2ae)}.photo-image.butter{background:linear-gradient(145deg,#ece1c4,#ddcca2)}.photo-image.lavender{background:linear-gradient(145deg,#e2dde7,#c6b8cb)}.photo-image img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.placeholder-heart{font:clamp(30px, 4vw, 58px) var(--serif);color:#7b655b44}.envelope-pocket{transform:translateY(var(--envelope-drop)) translateZ(7px);filter:drop-shadow(0 -1px #c5ab8988);position:absolute;inset:0}.envelope-pocket>div{position:absolute;inset:0}.pocket-left{clip-path:polygon(0 0,57% 58%,0 100%);background:linear-gradient(120deg,#f5e8d1,#e6d1b5)}.pocket-right{clip-path:polygon(100% 0,43% 58%,100% 100%);background:linear-gradient(230deg,#f3e4cd,#e5cfb0)}.pocket-bottom{clip-path:polygon(0 100%,0 98%,50% 43%,100% 98%,100% 100%);background:linear-gradient(#f3e7d2,#f8ecda)}.flap-position{transform:translateY(var(--envelope-drop)) translateZ(var(--flap-z));transform-style:preserve-3d;position:absolute;inset:0}.envelope-flap{transform-origin:top;width:100%;height:56%;transform:rotateX(var(--flap-turn));transform-style:preserve-3d;position:absolute;top:0;left:0}.flap-face,.flap-reverse{clip-path:polygon(0 0,100% 0,50% 100%);backface-visibility:hidden;position:absolute;inset:0}.flap-face{background:linear-gradient(#f8edda,#ebd8bb);transform:translateZ(.1px)}.flap-reverse{background:linear-gradient(#e6cec0,#f3e3cd);transform:rotateY(180deg)}.seal-position{transform:translateY(var(--envelope-drop)) translateZ(13px);position:absolute;inset:0}.seal-upper-anchor,.seal-lower-anchor{width:var(--seal-size);height:var(--seal-size);position:absolute;left:50%}.seal-upper-anchor{backface-visibility:hidden;top:100%;transform:translate(-50%,-50%)translateZ(4px)}.seal-lower-anchor{top:56%;transform:translate(-50%,-50%)}.wax-fragment{background:radial-gradient(circle at 35% 25%,#c46a78,#98394c 65%,#6a2538);border:2px solid #a14c5d;border-radius:47% 51% 44% 50%;place-items:center;display:grid;position:absolute;inset:0;box-shadow:inset 1px 3px 4px #eeb0aa99,inset -2px -4px 5px #4a142c88}.wax-upper{clip-path:polygon(0 0,100% 0,100% 48%,83% 44%,70% 57%,55% 46%,43% 58%,29% 45%,16% 54%,0 48%);transform:translateY(calc(-1 * var(--seal-split))) rotate(calc(-1 * var(--seal-twist)))}.wax-lower{clip-path:polygon(0 48%,16% 54%,29% 45%,43% 58%,55% 46%,70% 57%,83% 44%,100% 48%,100% 100%,0 100%);transform:translateY(var(--seal-split)) rotate(var(--seal-twist))}.wax-fragment:before{content:"";border:1px solid #6e273955;border-radius:50%;position:absolute;inset:12%;box-shadow:1px 1px 1px #d28688}.wax-fragment span{font:clamp(18px, 3vw, 30px) var(--serif);color:#7e2b3b;text-shadow:0 1px 1px #dc9393,-1px -1px #651f2e}.photo-dialog{isolation:isolate;color:#fff7ef;overscroll-behavior:contain;background:0 0;border:0;width:100%;max-width:none;height:100dvh;max-height:none;margin:0;padding:0;position:fixed;inset:0;overflow:hidden}.photo-dialog[open]{justify-content:center;align-items:center;display:flex}.photo-dialog::backdrop{background:0 0}.viewer-backdrop{z-index:-1;pointer-events:none;-webkit-backdrop-filter:blur(13px);background:#302723ed;position:fixed;inset:0}.viewer-feed{scroll-snap-type:x mandatory;overscroll-behavior:contain;scrollbar-width:none;width:100%;height:100%;display:flex;overflow:auto hidden}.viewer-feed::-webkit-scrollbar{display:none}.viewer-slide{width:100%;min-width:0;height:100%;padding:max(64px, env(safe-area-inset-top)) 16px max(64px, env(safe-area-inset-bottom));scroll-snap-align:start;scroll-snap-stop:always;flex:0 0 100%;justify-content:center;align-items:center;display:flex}.photo-dialog[data-closing=true] .viewer-feed{overflow:hidden}.photo-dialog[data-closing=true] .viewer-slide[data-active=false]{visibility:hidden}.viewer-card{box-sizing:content-box;width:min(90vw, calc((100dvh - 144px) * var(--viewer-aspect)), 1200px);aspect-ratio:var(--viewer-aspect);transform-origin:0 0;background:#fffaf1;padding:8px;box-shadow:0 30px 100px #0004}.viewer-card .photo-image img{object-fit:contain}.viewer-card .placeholder-heart{font-size:70px}.viewer-close{z-index:2;color:#fff7ef;background:#ffffff12;border:0;border-radius:50%;place-items:center;width:44px;height:44px;font:30px Arial,sans-serif;display:grid;position:fixed;top:15px;right:20px}.viewer-navigation{justify-content:center;align-items:center;gap:44px;display:flex;position:fixed;bottom:17px;left:0;right:0}.viewer-navigation button:disabled{opacity:.3;cursor:default}.viewer-navigation button{color:#fff7ef;background:0 0;border:1px solid #ffffff30;border-radius:50%;width:44px;height:44px;font:20px Arial,sans-serif}.stage[data-gallery-ready=true]{top:var(--journey-duration);height:var(--album-height);perspective:none;position:absolute;overflow:clip}.stage[data-gallery-ready=true] .envelope-position,.stage[data-gallery-ready=true] .envelope-rotation,.stage[data-gallery-ready=true] .envelope-back,.stage[data-gallery-ready=true] .paper-position,.stage[data-gallery-ready=true] .paper-rotation,.stage[data-gallery-ready=true] .letter-reverse{transform-style:flat;perspective:none;backface-visibility:visible;width:100%;height:100%;box-shadow:none;top:0;left:0;transform:none}.stage[data-gallery-ready=true] .envelope-front,.stage[data-gallery-ready=true] .envelope-lining,.stage[data-gallery-ready=true] .envelope-pocket,.stage[data-gallery-ready=true] .flap-position,.stage[data-gallery-ready=true] .seal-position{display:none}.stage[data-gallery-ready=true] .gallery{position:relative;transform:none}.stage[data-gallery-ready=true] .photo-grid{perspective:none}.stage[data-gallery-ready=true] .photo-print{transform:rotate(var(--rotation))}@media (hover:none),(max-width:600px){.viewer-backdrop{-webkit-backdrop-filter:none}.photo-print{transition:none}}@media (max-width:600px){.photo-grid{grid-template-columns:1fr 1fr;gap:36px 22px;padding:12px 0}.photo-print:nth-child(2n){margin-top:20px}.gallery{padding:38px 25px}.placeholder-heart{font-size:35px}.stamp{border-width:3px}.viewer-card{padding:6px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}