@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Pinyon+Script&display=swap');
:root{color-scheme:light;--paper:#eee9d3;--ink:#79745f;--white:#fbf6e5}
*{box-sizing:border-box}
html{min-height:100%;background:#24373c}
body{margin:0;color:var(--white);font-family:'Cormorant Garamond',Georgia,serif;-webkit-font-smoothing:antialiased}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:1px solid var(--white);outline-offset:7px}
.invitation{position:relative;width:100%;max-width:430px;margin-inline:auto;min-height:max(100svh,720px);container-type:inline-size;overflow:hidden;display:block;padding:0;isolation:isolate}
.composition{position:relative;width:84%;height:max(100svh,720px);margin:0 auto}
.heading{position:absolute;top:55px;left:-8%;width:116%;text-align:center;z-index:8;transition:opacity .45s,transform .7s;text-shadow:0 2px 8px #08191b45}
.heading p{margin:0 0 10px;font-size:11px;letter-spacing:.13em;font-weight:500}
.heading h1{margin:0;font:400 clamp(36px,11.8cqw,51px)/1.15 'Pinyon Script','Brush Script MT',cursive;white-space:nowrap}
.envelope{position:absolute;top:185px;left:6%;width:88%;aspect-ratio:360/260;perspective:1300px;filter:drop-shadow(0 13px 12px #17201b30);transition:transform 1.4s cubic-bezier(.2,.75,.2,1)}
.envelope-back,.envelope-front{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.envelope-back{z-index:0}
.envelope-front{z-index:4}
.flap{position:absolute;inset:0 0 auto;height:73.077%;transform-origin:50% 0;z-index:6;transition:transform .95s cubic-bezier(.4,0,.25,1)}
.flap svg{display:block;width:100%;height:100%;overflow:visible}
.monogram{position:absolute;top:42%;left:0;right:0;text-align:center;font:400 37px 'Pinyon Script',cursive;color:#8c866e;letter-spacing:-.09em;padding-right:5px;transition:opacity .35s}
.letter{position:absolute;left:-5%;top:-12%;width:110%;aspect-ratio:500/480;z-index:2;transform:translateY(20%) scale(.7);opacity:0;transition:transform 1.5s cubic-bezier(.2,.72,.2,1) .65s,opacity .25s .5s;transform-origin:50% 85%}
.heart{position:absolute;inset:0;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 3px 2px #685e4226)}
.letter-copy{position:absolute;left:0;top:29%;width:100%;text-align:center;color:var(--ink)}
.save-date{font:400 clamp(36px,12cqw,52px)/.78 'Pinyon Script',cursive;margin:0 0 23px;transform:rotate(-9deg)}
.save-date span{display:block}
.save-date span+span{margin-left:18px;margin-top:5px}
.card-names,.card-date{margin:0;font-size:clamp(9px,2.8cqw,12px);letter-spacing:.045em;line-height:1.4}
.card-date{font-size:clamp(8.5px,2.55cqw,11px);letter-spacing:.06em}
.opened-card{position:absolute;bottom:30px;left:0;width:100%;text-align:center;visibility:hidden;opacity:0;transform:translateY(8px);transition:opacity .8s 1.35s,transform .8s 1.35s}
.invitation-script{font:400 31px 'Pinyon Script',cursive;line-height:1.2}
footer{position:absolute;bottom:12px;font-size:9px;letter-spacing:.18em;text-shadow:0 1px 5px #000;left:0;width:100%;text-align:center;z-index:12}
footer a,footer button{font:9px serif;letter-spacing:.09em;color:#fff9e4c2;text-shadow:0 1px 6px #10282d;border:0;border-bottom:1px solid #fff9e440;padding:4px 0;background:transparent;cursor:pointer}
.is-open .heading{opacity:0;transform:translateY(-14px);pointer-events:none}
.is-open .envelope{transform:translateY(28px)}
.is-open .flap{transform:rotateX(-180deg);animation:flap-layer .95s forwards}
.is-open .monogram{opacity:0}
.is-open .letter{opacity:1;transform:translateY(-51%) scale(1)}
.is-open .opened-card{visibility:visible;opacity:1;transform:none}
.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{position:fixed;bottom:15px;left:0;width:100%;text-align:center;background:#22343a;padding:20px}
@keyframes flap-layer{0%,49%{z-index:6}50%,100%{z-index:1}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.is-open .flap{z-index:1}}

.invitation-script{margin:0 0 10px;text-shadow:0 1px 3px #102a32,0 0 9px #102a32}
.tap-note{margin:0;font:10px/1.8 serif;letter-spacing:.12em;text-shadow:0 1px 3px #102a32,0 0 9px #102a32}

/* One sharp photograph, fitted to the portrait frame without visual filters. */
.background-detail{position:absolute;inset:0;z-index:-2;pointer-events:none}
.background-detail img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.envelope-back,.envelope-front,.flap{pointer-events:none}
.letter{display:block;pointer-events:none;color:var(--ink)}
.is-ready .letter{pointer-events:auto;cursor:pointer}
.letter:focus-visible{outline:2px solid #fff8df;outline-offset:6px;border-radius:45%}
.opened-card{pointer-events:none}
.tap-note{font-size:11px}
@media(max-width:360px){.composition{width:88%}.heading{top:45px;left:-5%;width:110%}.heading h1{font-size:41px}.heading p{font-size:9px}.envelope{top:160px}.opened-card{bottom:30px}.invitation-script{font-size:27px}.save-date{font-size:40px;margin-bottom:17px}.card-names{font-size:9px}.card-date{font-size:8.5px}.is-open .envelope{transform:translateY(28px)}}