@charset "UTF-8";
:root{--bg:#f6f1e8;--ink:#594637;--muted:#8e7b69;--wine:#7c3540;--line:#cbb99f;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100svh;color:var(--ink);font-family:Georgia,'Times New Roman',serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:radial-gradient(ellipse at 28% 20%,#fffdf8 0,transparent 55%),radial-gradient(ellipse at 90% 90%,#e7ddcd66,transparent 50%),var(--bg)}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible,a:focus-visible,.deck:focus-visible{outline:2px solid var(--wine);outline-offset:7px}
button:disabled{cursor:default}
.ambient{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%239b8369' opacity='.23' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}
.masthead{height:96px;position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:0 5.2vw;gap:18px}
.monogram{font-size:24px;letter-spacing:-3px;font-style:italic}.monogram span{display:inline-block;font-size:16px;margin:0 3px;color:var(--wine)}
.masthead-date{font-size:11px;letter-spacing:3px;color:var(--muted);position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap}.masthead-date i{font-style:normal;padding:0 4px}
.replay{border:0;background:transparent;display:flex;align-items:center;gap:9px;font-family:Arial,sans-serif;font-size:10px;letter-spacing:1px;padding:12px 0}.replay svg{width:18px;fill:none;stroke:currentColor;stroke-width:1}.replay:hover{color:var(--wine)}
.intro{min-height:calc(100svh - 145px);position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 20px 35px;transition:opacity .6s ease,transform .8s var(--ease)}
.intro-copy{text-align:center;margin-bottom:65px;animation:arrival 1.2s var(--ease) both}.eyebrow{font-family:Arial,sans-serif;text-transform:uppercase;font-size:9px;letter-spacing:3px;margin:0 0 23px;color:var(--muted)}
h1{font-weight:400;font-size:clamp(36px,4.5vw,61px);letter-spacing:-2px;line-height:1.15;margin:0}h1 em{color:var(--wine);font-size:.85em;padding:0 .12em;font-weight:400}.intro-subtitle{font-size:14px;color:var(--muted);font-style:italic;margin:17px 0 0}
.envelope-scene{width:min(76vw,420px);perspective:1400px;position:relative;animation:envelope-arrival 1.5s var(--ease) both;isolation:isolate}
/* Keep the paper layers in one flat stacking context: the rotating flap must
   respect z-index instead of passing in front of the emerging letter in 3D. */
.envelope{display:block;width:100%;aspect-ratio:1.44;position:relative;border:0;padding:0;background:none;transform-style:flat;outline-offset:20px!important;transition:transform .6s var(--ease)}
.envelope:not(.is-opening):hover{transform:translateY(-5px) rotate(-.7deg)}
.paper{background-color:#eee0c7;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath d='M0 0h180v180H0z' filter='url(%23p)' opacity='.16'/%3E%3C/svg%3E");}
.envelope-back{position:absolute;inset:0;z-index:1;border-radius:3px;background-color:#e4d4b6;box-shadow:0 35px 45px -20px #5f412a45,0 10px 16px -10px #5f412a35,inset 0 0 0 1px #fff8e4}
.envelope-left,.envelope-right,.envelope-bottom{position:absolute;inset:0;z-index:3;border-radius:3px}
.envelope-left{clip-path:polygon(0 0,54% 52%,0 100%);background-color:#e9dac1}
.envelope-right{clip-path:polygon(100% 0,46% 52%,100% 100%);background-color:#e6d6ba}
.envelope-bottom{z-index:4;clip-path:polygon(0 100%,0 99%,48% 43%,52% 43%,100% 99%,100% 100%);background-color:#f0e3cc}
.envelope-bottom:after{content:'';position:absolute;inset:0;background:linear-gradient(164deg,#fff9e452,transparent 70%)}
.envelope-flap{position:absolute;top:0;left:0;width:100%;height:62%;z-index:5;transform-origin:50% 0;transform-style:flat;filter:drop-shadow(0 3px 2px #5b3f2a24)}
.flap-paper{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,53% 98%,50% 100%,47% 98%);background-color:#f4e8d2}
.flap-paper:after{content:'';position:absolute;inset:0;background:linear-gradient(145deg,#fff9e94f,transparent 55%,#c9b48c25)}
.letter{position:absolute;left:8%;top:8%;width:84%;height:87%;overflow:hidden;background:#f9ecd3;z-index:2;border:5px solid #f8ecd6;box-shadow:0 0 0 1px #b59b6b26;transform:translateY(0);visibility:hidden}.letter img{display:block;width:100%;height:auto}.letter-edge{position:absolute;inset:0;box-shadow:inset 0 0 12px #c5ac7e22}
.ribbon{position:absolute;top:53%;height:34px;width:50.2%;z-index:6;background:linear-gradient(180deg,#ae606264 0,#62212c 9%,#873a45 18%,#792c39 45%,#672330 81%,#a65a6066 95%,#692532 100%);box-shadow:0 2px 4px #42202d25;opacity:.97}.ribbon:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 1px,#d49d8b12 1px 2px)}.ribbon-left{left:-1px;transform:rotate(-1deg);transform-origin:0 50%}.ribbon-right{right:-1px;transform:rotate(.5deg);transform-origin:100% 50%}
.seal{position:absolute;left:50%;top:58%;width:100px;aspect-ratio:1;z-index:7;transform:translate(-50%,-50%) rotate(-9deg);filter:drop-shadow(1px 5px 4px #39121b42);transition:filter .4s,transform .4s}.seal svg{width:100%;height:100%;display:block}.envelope:hover .seal{filter:drop-shadow(1px 7px 5px #39121b50);transform:translate(-50%,-50%) rotate(-6deg) scale(1.025)}
.intro-bottom{text-align:center;margin-top:48px;animation:arrival 1.2s .4s var(--ease) both}.open-hint{display:flex;align-items:center;justify-content:center;gap:15px;font-family:Arial,sans-serif;text-transform:uppercase;font-size:9px;letter-spacing:2px;margin:0}.open-hint span{width:25px;height:1px;background:var(--line)}.intro-note{font-style:italic;color:var(--muted);font-size:12px;margin:14px 0 0}
.intro.is-opening .intro-copy,.intro.is-opening .intro-bottom{opacity:0;transition:opacity .45s;animation:none}
.is-opening .seal{animation:seal-release .8s var(--ease) forwards}
.is-opening .ribbon-left{animation:ribbon-left .75s .15s var(--ease) forwards}.is-opening .ribbon-right{animation:ribbon-right .75s .15s var(--ease) forwards}
.is-opening .envelope-flap{animation:flap-open 1.15s .4s ease-in-out forwards}
.is-opening .letter{visibility:visible;animation:letter-rise 1.5s 1.15s var(--ease) forwards}
.intro.is-opening .envelope-scene{animation:envelope-exit .8s 2.35s var(--ease) forwards}
.intro.is-leaving{opacity:0;pointer-events:none}
.invitation{position:relative;z-index:1;animation:arrival 1s var(--ease) both;padding-bottom:5px}
.deck{display:flex;align-items:center;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y pinch-zoom;min-height:220px;padding:18px 0 25px;outline-offset:-6px!important}.deck::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;min-width:0;scroll-snap-align:center;scroll-snap-stop:always;display:grid;place-items:center;padding:0 24px;perspective:1200px}
.card{position:relative;width:min(490px,calc((100svh - 298px)*.7608),calc(100vw - 52px));min-width:190px;aspect-ratio:1094/1438;background:#f9e7c9;box-shadow:0 16px 30px -16px #62462e55,0 1px 3px #846b4930;transform:scale(.955) rotate(1.1deg);transition:transform .85s var(--ease);isolation:isolate}
.card:before,.card:after{content:'';position:absolute;inset:0;z-index:-1;background:#f0e1c5;border:1px solid #c9b58e44;transform:rotate(-1.6deg)}.card:after{transform:rotate(.9deg);background:#f9ecd5}.slide.is-active .card{transform:scale(1) rotate(0)}
.card-art{width:100%;height:100%;display:block;background:#f8e7c9}.ink-bloom{transform:scale(0);transform-box:fill-box;transform-origin:center;will-change:transform}.ink-finish{opacity:0}.card.is-revealed .ink-bloom{animation:ink-bloom 2.5s var(--delay) cubic-bezier(.25,.3,.35,1) both}.card.is-revealed .ink-finish{animation:ink-finish .45s 2.3s linear forwards}
.card.is-settled .ink-bloom{animation:none;transform:scale(6);will-change:auto}.card.is-settled .ink-finish{animation:none;opacity:1}
.card-link{position:absolute;left:22%;top:78%;width:54%;height:9%;border-radius:50px;background:transparent;border:0;text-decoration:none;transition:box-shadow .3s,background .3s}.card-link:hover{background:#b88b4f0d;box-shadow:0 0 22px #b88b4f18}.card-link:focus-visible{outline-offset:0}.card-link-main{left:21%;top:79%;width:58%;height:9%}
.navigation{display:flex;flex-direction:column;align-items:center}.navigation-row{display:flex;align-items:center;gap:32px}.arrow{width:44px;height:44px;display:grid;place-items:center;padding:6px;border:1px solid #c5ae8d80;border-radius:50%;background:transparent;transition:background .25s,border-color .25s,opacity .25s}.arrow svg{width:24px;height:14px;stroke:currentColor;fill:none;stroke-width:1}.arrow:hover:not(:disabled){background:#e9dcc9;border-color:#b89d78}.arrow:disabled{opacity:.22}.card-caption{text-align:center;min-width:140px;display:flex;flex-direction:column;gap:7px}#card-label{font-size:16px}.card-count{font-family:Arial,sans-serif;color:var(--muted);font-size:9px;letter-spacing:2px}.card-count b{font-weight:400;color:var(--wine)}
.pagination{display:flex;margin-top:8px;gap:0}.pagination button{width:29px;height:28px;border:0;background:none;padding:10px;display:grid;place-items:center}.pagination span{width:5px;height:5px;border-radius:50%;background:#bdad98;transition:transform .3s,background .3s}.pagination button[aria-current=true] span{background:var(--wine);transform:scale(1.4)}
.swipe-hint{font-size:11px;color:var(--muted);font-style:italic;margin:1px 0 0}.swipe-hint span{font-style:normal;font-size:16px;margin-left:5px}
.page-footer{height:49px;display:flex;justify-content:center;align-items:center;font-size:10px;letter-spacing:1px;color:#a38f78;position:relative;z-index:1}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.no-script{max-width:600px;padding:20px;margin:auto}.no-script img{display:block;width:100%;margin:20px 0}
@keyframes arrival{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes envelope-arrival{from{opacity:0;transform:translateY(25px) rotate(-3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}
@keyframes seal-release{30%{transform:translate(-50%,-70%) rotate(5deg) scale(1.12);opacity:1}100%{transform:translate(-30%,25%) rotate(28deg) scale(.9);opacity:0}}
@keyframes ribbon-left{to{transform:translateX(-70%) rotate(-12deg);opacity:0}}@keyframes ribbon-right{to{transform:translateX(70%) rotate(10deg);opacity:0}}
@keyframes flap-open{0%{transform:perspective(1400px) rotateX(0);z-index:5}49%{z-index:5}50%{z-index:1}100%{transform:perspective(1400px) rotateX(-180deg);z-index:1;filter:drop-shadow(0 -1px 1px #5b3f2a15)}}
@keyframes letter-rise{0%{transform:translateY(0) rotate(0)}65%{transform:translateY(-69%) rotate(-3deg);box-shadow:0 10px 20px #6b4b2b22}100%{transform:translateY(-76%) rotate(-2deg) scale(1.04);box-shadow:0 12px 25px #6b4b2b22}}
@keyframes envelope-exit{to{transform:translateY(80px) scale(.94);opacity:0}}
@keyframes ink-bloom{0%{transform:scale(0)}25%{transform:scale(.65)}65%{transform:scale(2.5)}100%{transform:scale(6)}}@keyframes ink-finish{to{opacity:1}}
@media(min-width:1500px){.intro-copy{margin-bottom:75px}.envelope-scene{width:455px}.intro-bottom{margin-top:60px}.card{width:min(560px,calc((100svh - 298px)*.7608))}}
@media(max-width:600px){.masthead{height:75px;padding:0 24px}.monogram{font-size:21px}.masthead-date{font-size:9px;letter-spacing:2px}.replay span{display:none}.intro{min-height:calc(100svh - 119px);padding:10px 16px 26px}.intro-copy{margin-bottom:58px}.eyebrow{font-size:8px;letter-spacing:2.15px;margin-bottom:20px}h1{font-size:39px;letter-spacing:-1.5px}.intro-subtitle{font-size:12px;margin-top:14px}.envelope-scene{width:min(82vw,385px)}.seal{width:84px}.ribbon{height:28px}.intro-bottom{margin-top:42px}.open-hint{font-size:8px;letter-spacing:1.6px;gap:10px}.open-hint span{width:15px}.intro-note{font-size:11px}.deck{padding:12px 0 22px}.card{width:min(calc(100vw - 44px),calc((100svh - 259px)*.7608));min-width:190px}.page-footer{height:44px;font-size:9px}.navigation-row{gap:27px}.arrow{width:40px;height:40px}.card-caption{min-width:133px}.swipe-hint{font-size:10px}}
@media(max-height:720px){.intro-copy{margin-bottom:42px}.envelope-scene{width:min(70vw,330px)}.intro-bottom{margin-top:30px}.intro-subtitle{margin-top:10px}.intro{padding-top:0}.eyebrow{margin-bottom:14px}h1{font-size:37px}.seal{width:78px}.ribbon{height:26px}}
@media(max-height:560px) and (min-width:650px){.masthead{height:57px}.intro{min-height:430px}.card{width:260px}.deck{padding-top:10px}.page-footer{height:35px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.ink-bloom{transform:scale(6)!important}.ink-finish{opacity:1!important}.envelope:hover{transform:none!important}.intro.is-opening .envelope-scene{opacity:0}}