@font-face{font-family:'Pinyon Script';src:url('fonts/pinyon-script.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--wine:#641e31;--ivory:#f8efdf;--paper:#fbf5e9;color-scheme:dark}
*{box-sizing:border-box}body{margin:0;background:#471722;font-family:'EB Garamond',Georgia,serif;color:var(--ivory)}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}button:focus-visible{outline:2px solid var(--ivory);outline-offset:8px}[hidden]{display:none!important}
.welcome{position:relative;isolation:isolate;min-height:100svh;display:grid;place-items:center;padding:80px 5vw 100px;overflow:hidden}
.fabric{position:absolute;inset:0;z-index:-2;background:url('assets/burgundy-fabric.webp') center 46%/cover no-repeat}
.welcome:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 43%,transparent 25%,#23050d30 100%)}
.arrangement{width:min(780px,100%,calc((100svh - 210px)*1.57));text-align:center;animation:arrive .9s ease both;perspective:1400px}
.envelope{position:relative;width:100%;aspect-ratio:1581/995;container-type:inline-size;isolation:isolate;filter:drop-shadow(0 18px 25px #14040c60);transform-style:preserve-3d}
.envelope-front,.flap,.flap img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.envelope-front{z-index:3;transition:clip-path .01s linear .32s}
.flap{z-index:4;clip-path:polygon(0 0,100% 0,100% 4%,50% 84%,0 4%);transform-origin:50% 2%;backface-visibility:hidden;transition:transform .95s cubic-bezier(.3,.7,.2,1),opacity .2s ease .75s}
.envelope-heading{position:absolute;z-index:5;top:16%;left:12%;width:76%;text-align:center;color:var(--wine);pointer-events:none;transition:opacity .25s ease,transform .4s ease}
.envelope-heading p{margin:0 0 1.1cqw;font-size:2.5cqw;line-height:1.3;font-variant:small-caps;letter-spacing:.09em}
.envelope-heading h1{margin:0;font:400 7.2cqw/1.2 'Pinyon Script',cursive;white-space:nowrap}
.seal{position:absolute;z-index:6;left:50%;top:77%;width:15.7%;aspect-ratio:1;min-width:44px;min-height:44px;padding:0;border:0;background:transparent;transform:translate(-50%,-50%);filter:drop-shadow(0 .65cqw .8cqw #442f2842);transition:transform .45s ease,opacity .25s ease;touch-action:manipulation}
.seal img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.seal:hover{transform:translate(-50%,-50%) rotate(-3deg) scale(1.035)}
.envelope-date{position:absolute;z-index:5;bottom:5.2%;left:15%;width:70%;margin:0;color:var(--wine);font-size:2.3cqw;line-height:1.3;letter-spacing:.14em;text-transform:uppercase;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1,'onum' 0}
.open-invitation{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;max-width:100%;padding:8px 12px;margin:27px 0 0;color:var(--ivory);background:transparent;border:0;font-size:23px;font-variant:small-caps;letter-spacing:.08em;text-shadow:0 1px 5px #19060a66;transition:opacity .25s ease}
.open-invitation:hover{opacity:.8}.action-arrow{font-size:20px}
.footnote{position:absolute;bottom:38px;left:20px;right:20px;text-align:center;margin:0;font-size:15px;line-height:1.4;letter-spacing:.06em;color:#efe1d1b3}
.envelope-back{position:absolute;inset:2% 1%;z-index:0;border-radius:5px;background:linear-gradient(160deg,#ece1c9,#fff8e9 60%,#eee1c9);opacity:0;transition:opacity .2s ease .3s}
.letter{position:absolute;z-index:2;left:13%;width:74%;bottom:9%;aspect-ratio:1.22;padding:6% 6% 4%;background:var(--paper);color:var(--wine);box-shadow:0 2px 12px #36191b20;border:1px solid #ddcdb5;transform:translateY(0);opacity:0;transition:transform 1s cubic-bezier(.2,.75,.2,1) .35s,opacity .3s ease .35s}
.letter:before{content:'';position:absolute;inset:4%;border:1px solid #a37d724d;pointer-events:none}
.letter-kicker{margin:0 0 5%;font-size:2.3cqw;font-variant:small-caps;letter-spacing:.09em}
.letter h2{position:relative;font:400 7cqw/1.2 'Pinyon Script',cursive;margin:0 0 4%;white-space:nowrap;outline:none}
.letter-invitation{font-size:2.6cqw;line-height:1.4;margin:0 0 7%}.letter-date{font-size:3.3cqw;font-variant:small-caps;letter-spacing:.08em;margin:0 0 2%;font-variant-numeric:lining-nums;font-feature-settings:'lnum' 1}.letter-place{font-size:3cqw;margin:0}
.is-open .envelope-front{clip-path:polygon(0 6%,50% 82%,100% 6%,100% 100%,0 100%)}
.is-open .flap{transform:rotateX(-150deg);opacity:0}.is-open .envelope-heading{opacity:0;transform:translateY(-8px)}.is-open .seal{opacity:0;transform:translate(-50%,-25%) rotate(-9deg) scale(.92);pointer-events:none}.is-open .envelope-back{opacity:1}.is-open .letter{opacity:1;transform:translateY(-10%)}
@keyframes arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@media(max-width:600px){.welcome{padding:clamp(40px,12svh,100px) 4.2vw clamp(80px,14svh,120px)}.arrangement{width:100%;max-width:460px}.envelope-heading p{font-size:3cqw}.envelope-heading h1{font-size:8cqw}.envelope-date{font-size:2.9cqw;bottom:4.5%}.open-invitation{font-size:21px;margin-top:26px}.footnote{bottom:35px;font-size:13px}.letter-kicker{font-size:3cqw}.letter-invitation{font-size:3.1cqw}.letter-date{font-size:4cqw}.letter-place{font-size:3.6cqw}}
@media(max-height:560px) and (min-width:601px){.welcome{padding:45px 4vw 70px}.arrangement{width:min(640px,100%,calc((100svh - 200px)*1.57))}.open-invitation{margin-top:10px;font-size:20px}.footnote{bottom:15px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}