@font-face{font-family:Pinyon;src:url('assets/fonts/pinyon.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--forest:#132019;--cream:#f6f1e4;--soft:#e1e1d1;--paper:#f5f1e8;--ink:#293d30;--sans:Manrope,'Helvetica Neue',Arial,sans-serif;--ease:cubic-bezier(.22,.72,.16,1)}
*{box-sizing:border-box}html{background:var(--forest)}body{margin:0;color:var(--cream);font-family:var(--sans);font-size:14px;font-weight:400;-webkit-font-smoothing:antialiased}h1,h2,h3,p{margin:0}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}a,button{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:5px}::selection{background:#d7d4b9;color:#132019}
.scene{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--forest)}.scene picture,.scene img{display:block;width:100%;height:100%}.scene img{object-fit:cover;object-position:66% 35%;filter:saturate(.8) brightness(.9);animation:photograph-in 1.8s ease-out both}.scene-shade{position:absolute;inset:0;z-index:-1;pointer-events:none}
.wedding-cover{position:relative;isolation:isolate;height:100svh;min-height:650px;overflow:hidden}
.cover-view .scene-shade{background:linear-gradient(180deg,#0d171233 0%,transparent 27%,#13201915 40%,#1320199e 66%,#132019e8 89%,#132019 100%)}
.cover-header{position:absolute;left:45px;top:38px;font-size:13px;font-weight:500;letter-spacing:.025em;color:var(--cream);text-shadow:0 1px 12px #08110b}
.cover-content{position:absolute;left:25px;right:25px;bottom:40px;text-align:center;transition:opacity .35s,transform .65s var(--ease)}
.cover-intro{font-family:Cormorant,Georgia,serif;font-size:34px;font-style:italic;font-weight:400;line-height:1.2;letter-spacing:.015em;margin-bottom:24px;color:#fff8e9;text-shadow:0 2px 18px #08110b;animation:text-in 1s .2s both}
.cover-content h1{display:flex;align-items:center;justify-content:center;gap:.14em;font-family:Pinyon,'Brush Script MT',cursive;font-weight:400;font-size:clamp(110px,10.1vw,185px);line-height:.9}
.written-name{display:block;flex:none;height:.9em;overflow:visible;fill:currentColor}
.name-ink{fill:currentColor;stroke:none}
.js:not(.lettering-ready) .written-name,.js:not(.lettering-ready) .name-heart{visibility:hidden}
.name-heart{display:block;flex:none;align-self:center;width:.43em;height:.43em;overflow:visible;transform:rotate(-7deg) translateY(-.025em)}
.name-heart path{fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cover-date{font-size:14px;font-weight:450;letter-spacing:.025em;margin-top:27px;animation:text-in 1.1s .5s both}
.cover-actions{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:23px;animation:text-in 1s .65s both}
.open-invitation{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 12px;color:var(--cream);font-family:Cormorant,Georgia,serif;font-size:25px;font-style:italic;font-weight:400;line-height:1.2;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:#e1e1d180;transition:text-decoration-color .25s}
.open-invitation:hover{background:none;text-decoration-color:currentColor}
.cover-tools{color:#e1e1d1}.cover-tools a{font-size:18px}.cover-tools a:hover{color:#fff8e9}
 a:hover{background:#ffffff0d}
 a:hover{text-decoration-color:currentColor}
body.is-open{overflow:hidden}.is-open .cover-content{opacity:0;transform:translateY(18px)}
.invitation-dialog{position:fixed;inset:0;width:590px;max-width:calc(100% - 40px);height:fit-content;max-height:calc(100svh - 40px);margin:auto;padding:0;color:var(--ink);background:var(--paper);border:1px solid #c8c5ae;box-shadow:0 24px 85px #06120b66;overflow-y:auto;overflow-x:hidden;perspective:1400px;scrollbar-width:thin;scrollbar-color:#a3ae92 var(--paper)}
.invitation-dialog::backdrop{background:#0b1711a3;backdrop-filter:blur(4px)}
.invitation-dialog.is-opening{background:transparent;border-color:transparent;box-shadow:none;animation:postcard-arrive 1.15s cubic-bezier(.2,.65,.25,1) both}
.invitation-dialog.is-closing{animation:letter-out .35s var(--ease) both}
.letter-reverse{position:absolute;inset:0;z-index:3;display:grid;place-items:center;visibility:hidden;pointer-events:none;backface-visibility:hidden;transform:rotateY(180deg);background:#eee9dc;border:1px solid #b8b393}
.letter-reverse::before{content:"";position:absolute;inset:24px;border:1px solid #71805b66}
.postcard-note{display:grid;justify-items:center;gap:23px;color:#627153}
.postcard-note span{font-family:Cormorant,Georgia,serif;font-style:italic;font-size:54px;font-weight:400}
.postcard-note svg{width:54px;height:50px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.invitation-dialog.is-opening .letter-reverse{visibility:visible;animation:postcard-back 1.15s cubic-bezier(.4,0,.2,1) both}
.invitation-dialog.is-opening .paper-letter{backface-visibility:hidden;animation:postcard-front 1.15s cubic-bezier(.4,0,.2,1) both}
.invitation-dialog.is-opening .close-invitation{animation:ink-in .25s .9s both}
.close-invitation{position:absolute;right:30px;top:30px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:none;padding:0;transition:background .2s}
.close-invitation svg{display:block;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round}.close-invitation:hover{background:#e9dfd45c}
.paper-letter{--type-size:14px;--name-size:47px;--title-gap:18px;--heading-size:29px;--date-gap:24px;--date-number:49px;--event-size:29px;--events-gap:24px;--separator-gap:17px;--frame-inset:22px;--flower-top:155px;--flower-bottom:142px;padding:39px 51px 35px}
#letter-title:focus{outline:none}
.letter-footer{margin-top:23px}
.invitation-dialog.is-opening .letter-footer{animation:ink-in .25s .9s both}
@keyframes photograph-in{from{opacity:0}to{opacity:1}}
@keyframes text-in{from{opacity:0;transform:translateY(13px)}to{opacity:1;transform:translateY(0)}}
@keyframes postcard-arrive{0%{opacity:0;transform:translate(var(--open-x,0px),var(--open-y,180px)) scale(.23) rotate(-7deg)}15%{opacity:1}65%{transform:translate(0,-8px) scale(.96) rotate(1deg)}100%{opacity:1;transform:translate(0,0) scale(1) rotate(0)}}
@keyframes postcard-back{0%,18%{transform:rotateY(0deg)}85%,100%{transform:rotateY(-180deg)}}
@keyframes postcard-front{0%,18%{transform:rotateY(180deg)}85%,100%{transform:rotateY(0deg)}}
@keyframes letter-out{from{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(22px)}}
@keyframes ink-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(min-width:801px) and (max-height:820px){.cover-content{bottom:30px}.cover-content h1{font-size:clamp(100px,9.6vw,155px)}.cover-date{margin-top:21px}.paper-letter{--name-size:42px;--title-gap:13px;--date-gap:17px;--date-number:43px;--events-gap:18px;--separator-gap:13px;--flower-top:142px;--flower-bottom:130px;padding-top:28px;padding-bottom:28px}.paper-letter .stationery-heading{margin-bottom:13px}.letter-footer{margin-top:15px}}
@media(max-width:800px){
.scene img{object-position:100% top;filter:saturate(.8) brightness(.91)}
.cover-view .scene-shade{background:linear-gradient(180deg,#13201933 0%,transparent 18%,#13201900 34%,#13201950 49%,#132019e8 68%,#132019 82%)}
.cover-header{top:29px;left:26px;font-size:12px}.cover-content{left:20px;right:20px;bottom:max(36px,env(safe-area-inset-bottom))}.cover-intro{font-size:26px;margin-bottom:24px}.cover-content h1{font-size:14vw;gap:.14em}.name-heart path{stroke-width:3.2}.cover-date{font-size:13px;margin-top:27px;letter-spacing:0}.cover-actions{margin-top:22px}
.invitation-dialog{width:calc(100% - 24px);max-width:520px;max-height:calc(100svh - 24px)}
.paper-letter{--type-size:13px;--name-size:38px;--heading-size:27px;--title-gap:17px;--date-gap:21px;--date-number:44px;--event-size:27px;--events-gap:22px;--separator-gap:15px;--frame-inset:14px;--flower-top:94px;--flower-bottom:105px;padding:38px 23px 31px}
.close-invitation{top:22px;right:22px}.paper-letter .stationery-heading{margin-bottom:17px}.paper-letter .stationery-event>p{font-size:13px}.letter-footer{margin-top:18px}.letter-footer a{font-size:18px}
}
@media(max-width:370px){.cover-content h1{font-size:14vw}.cover-date{font-size:12px}.paper-letter{--name-size:33px;--event-size:25px;--flower-top:78px;--flower-bottom:82px;padding-left:19px;padding-right:19px}.paper-letter .stationery-event>p{font-size:12px}.paper-letter .event-heading{gap:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}