@font-face{font-family:Ballet;src:url('fonts/ballet/Ballet-opsz.ttf') format('truetype');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'EB Garamond';src:url('fonts/eb-garamond.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:light;--olive:#4b5134;--olive-dark:#343e27;--ivory:#fff7df;--paper:#fbf7ed;--quiet:#626649;--ease:cubic-bezier(.22,.68,.2,1)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{min-width:280px;background:#e9e2cf}
body{margin:0;color:var(--olive);font-family:'EB Garamond',Georgia,serif;-webkit-font-smoothing:antialiased}
button{font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button:focus-visible{outline:2px solid var(--olive-dark);outline-offset:6px}
button:disabled{cursor:default}
.olive-invitation{position:relative;isolation:isolate;min-height:100svh}
.silk-background{position:fixed;inset:0;z-index:-2;background:#e9e2cf url('assets/champagne-silk-v1.webp') center 48%/cover no-repeat;pointer-events:none}
.welcome{position:relative;min-height:100svh;display:grid;place-items:center;padding:34px 5vw 70px;overflow:hidden}
.arrangement{width:min(790px,100%,calc((100svh - 270px)*1.5));text-align:center;animation:arrive 1s var(--ease) both}
.welcome-kicker{margin:0 0 26px;font-size:14px;font-variant:small-caps;letter-spacing:.2em;line-height:1.5;color:var(--olive-dark)}
.envelope{position:relative;width:100%;aspect-ratio:1.5;container-type:inline-size;filter:drop-shadow(0 16px 18px #41432b2e);transform-origin:50% 75%}
.envelope-art{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.envelope-copy{position:absolute;top:15.5%;left:11%;width:78%;color:var(--ivory);text-align:center;pointer-events:none;text-shadow:0 1px 1px #32351935}
.envelope-kicker{margin:0 0 .7cqw;font-size:2.05cqw;line-height:1.5;font-variant:small-caps;letter-spacing:.18em}
.envelope-copy h1{margin:0;font:400 8.8cqw/1.55 Ballet,cursive;white-space:nowrap;font-optical-sizing:auto}
.ampersand{display:inline-block;margin:0 .015em;font-size:.78em}
.wax-seal{position:absolute;top:75%;left:50%;width:15.8%;aspect-ratio:1;min-width:44px;min-height:44px;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;filter:drop-shadow(0 .6cqw .6cqw #292e243d);transition:transform .35s var(--ease),filter .35s ease}
.wax-seal img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.wax-seal:focus-visible{outline-color:var(--ivory);outline-offset:3px}
.envelope-date{position:absolute;bottom:11.8%;left:20%;width:60%;margin:0;text-align:center;color:var(--ivory);font-size:2.55cqw;line-height:1.4;letter-spacing:.12em;font-variant:small-caps;font-variant-numeric:lining-nums}
.pill{display:inline-flex;justify-content:center;align-items:center;gap:20px;min-height:52px;padding:13px 26px;border:1px solid var(--olive);border-radius:999px;background:var(--olive);color:var(--ivory);font-size:17px;line-height:1.3;letter-spacing:.035em;box-shadow:0 6px 18px #45472d16;transition:transform .25s var(--ease),background .25s ease,box-shadow .25s ease}
.pill svg{flex:none;transition:transform .25s var(--ease)}
.open-invitation{margin-top:25px}
.seal-hint{margin:13px 0 0;font-size:13px;line-height:1.4;letter-spacing:.04em;color:var(--quiet)}
.welcome-footnote{position:absolute;bottom:23px;left:20px;right:20px;margin:0;text-align:center;color:var(--olive-dark);font-size:14px;line-height:1.5;font-style:italic;text-shadow:0 1px 5px #fff7dfb3}
.is-opening .envelope{animation:envelope-away .7s var(--ease) both}
.is-opening .wax-seal{opacity:0;transform:translate(-50%,-68%) rotate(-12deg) scale(.94);transition:opacity .25s ease,transform .4s var(--ease)}
.is-opening .welcome-kicker,.is-opening .open-invitation,.is-opening .seal-hint,.is-opening .welcome-footnote{opacity:0;transition:opacity .3s ease}
.letter-scene{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;padding:42px 20px}
.invitation-letter{position:relative;isolation:isolate;width:min(490px,100%);min-height:610px;padding:44px 34px 42px;border:1px solid #b1b393;border-radius:200px 200px 12px 12px;background:var(--paper);text-align:center;box-shadow:0 20px 60px #4b513426;animation:letter-arrive .9s var(--ease) both}
.letter-border{position:absolute;inset:13px;z-index:-1;border:1px solid #b1b39385;border-radius:inherit;pointer-events:none}
.letter-seal{width:62px;height:62px;display:block;margin:0 auto 20px;filter:drop-shadow(0 2px 2px #41432b1a)}
.letter-kicker{margin:0 0 22px;font-size:13px;font-variant:small-caps;letter-spacing:.13em;line-height:1.5}
.invitation-letter h2{margin:0 0 24px;font:400 75px/.95 Ballet,cursive;font-optical-sizing:auto;outline:none}
.invitation-letter h2 span{display:block}
.invitation-letter h2 .letter-ampersand{font-family:'EB Garamond',Georgia,serif;font-size:28px;line-height:1.6;margin:0}
.letter-request{margin:0;font-size:17px;line-height:1.65;font-variant:small-caps;letter-spacing:.06em}
.letter-rule{width:36px;height:1px;margin:25px auto 18px;background:#969b77}
.letter-date{margin:0 0 8px;font-size:24px;line-height:1.3;font-variant:small-caps;font-variant-numeric:lining-nums}
.letter-place{margin:0;font-size:18px;line-height:1.4;letter-spacing:.04em}
.back-to-envelope{background:#fbf7ed8c;color:var(--olive);font-size:15px;min-height:48px;box-shadow:none;animation:arrive 1s var(--ease) both}
.no-script{margin:0;padding:10px 20px 20px;text-align:center;font-size:16px;background:var(--paper)}
@media(hover:hover){.wax-seal:hover{transform:translate(-50%,-50%) rotate(-4deg) scale(1.045);filter:drop-shadow(0 .8cqw .8cqw #292e2445)}.pill:hover{transform:translateY(-2px);background:var(--olive-dark);box-shadow:0 8px 22px #45472d24}.pill:hover svg{transform:translate(2px,-2px)}.back-to-envelope:hover{color:var(--ivory)}}
.pill:active{transform:translateY(0) scale(.98)}
@keyframes arrive{from{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}
@keyframes envelope-away{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(35px) scale(.96)}}
@keyframes letter-arrive{from{opacity:0;transform:translateY(60px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:600px){.welcome{padding:48px 4vw 90px}.arrangement{width:100%;max-width:470px}.welcome-kicker{font-size:12px;letter-spacing:.16em;margin-bottom:35px}.envelope-copy{top:15.5%}.envelope-kicker{font-size:2.8cqw;margin-bottom:1.1cqw}.envelope-copy h1{font-size:9cqw;line-height:1.55}.envelope-date{font-size:3.1cqw;bottom:12%}.wax-seal{width:17.2%}.open-invitation{margin-top:32px;min-height:50px;font-size:16px;padding:12px 23px;gap:18px}.seal-hint{font-size:12px}.welcome-footnote{bottom:31px;font-size:13px}.letter-scene{padding:32px 20px;gap:20px}.invitation-letter{min-height:570px;padding:38px 24px 36px}.invitation-letter h2{font-size:69px}.letter-kicker{font-size:12px}.letter-request{font-size:16px}.letter-date{font-size:22px}.letter-place{font-size:17px}}
@media(max-height:600px) and (min-width:601px){.welcome{padding:24px 5vw 50px}.arrangement{width:min(620px,100%,calc((100svh - 160px)*1.5))}.welcome-kicker{margin-bottom:12px;font-size:12px}.open-invitation{margin-top:10px;min-height:44px;padding:9px 23px;font-size:15px}.seal-hint{margin-top:7px;font-size:12px}.welcome-footnote{bottom:12px;font-size:12px}.letter-scene{justify-content:flex-start}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}