[hidden]{display:none !important}
@font-face{font-family:Pinyon;src:url(/invite/fonts/pinyon.woff2) format('woff2');font-display:swap}
@font-face{font-family:Cormorant;src:url(/invite/fonts/cormorant.woff2) format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:Cormorant;src:url(/invite/fonts/cormorant-italic.woff2) format('woff2');font-weight:400 700;font-style:italic;font-display:swap}
:root{--fern:#0c1d15;--fern2:#16301f;--moss:#2c4a34;--ivory:#f6f0e3;--paper:#efe6d2;--gold:#c9a96a;--wax:#7d1f2a;--ink:#23332a;--mute:#9fb3a5;--w:min(84vw,340px);--lw:min(86vw,360px)}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fern);color:var(--ivory);-webkit-text-size-adjust:100%}
body{font:400 19px/1.55 Cormorant,Georgia,serif;background:var(--fern);overflow-x:hidden}
a{color:var(--gold)}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sample-bar{background:#06100b;color:var(--mute);font:400 12px/1.4 system-ui,sans-serif;text-align:center;padding:7px 14px}

.stage{position:relative;height:calc(100svh - 32px);min-height:600px;overflow:hidden;touch-action:pan-y;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:22px 16px 18px;-webkit-user-select:none;user-select:none;
  background:radial-gradient(80% 60% at 50% 45%,#1d3a28 0%,#10241a 55%,#07130d 100%)}
.flies{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.fern{position:absolute;bottom:-20px;width:130px;fill:none;stroke:#2f5a3e;stroke-width:2.2;stroke-linecap:round;opacity:.7;pointer-events:none}
.fern.l{left:-30px;transform:rotate(14deg)}.fern.r{right:-30px;transform:scaleX(-1) rotate(14deg)}
.fern path{stroke-dasharray:420;stroke-dashoffset:420;animation:draw 3.2s ease-out .3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.snd{position:absolute;top:14px;right:14px;z-index:9;display:flex;align-items:center;gap:6px;font:400 11px/1 system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);padding:7px 10px;border:1px solid #29453a;border-radius:99px}
.snd svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.6}
.snd[aria-pressed=false] .w{opacity:.15}
.to{position:relative;font:400 clamp(34px,10vw,48px)/1.1 Pinyon,cursive;color:var(--gold);margin-top:36px;text-align:center;transition:opacity .8s}

/* envelope */
.env{position:relative;width:var(--w);height:calc(var(--w)*.68);margin-top:4vh}
.back,.pocket,.flap{position:absolute;inset:0;border-radius:4px}
.back{background:linear-gradient(#d9ccb2,#cbbd9f);box-shadow:0 34px 70px rgba(0,0,0,.55);z-index:1}
.pocket{z-index:4;background:linear-gradient(170deg,var(--paper),#e3d8bf);clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%);
  box-shadow:inset 0 0 40px rgba(120,100,60,.12)}
.pocket::before,.pocket::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent 49.6%,rgba(120,100,60,.18) 50%,transparent 50.6%)}
.pocket::after{background:linear-gradient(to top left,transparent 49.6%,rgba(120,100,60,.18) 50%,transparent 50.6%)}
.flap{z-index:6;transform-origin:50% 0;transform:perspective(900px) rotateX(0deg);transition:transform 1.1s cubic-bezier(.4,.1,.2,1),z-index 0s .45s;height:62%}
.flap-in{position:absolute;inset:0;clip-path:polygon(0 0,100% 0,50% 100%);background:linear-gradient(#f3ead8,#e6dbc2);filter:drop-shadow(0 2px 2px rgba(0,0,0,.2))}
.open .flap{transform:perspective(900px) rotateX(180deg);z-index:0}
.open .flap-in{background:linear-gradient(#d2c4a8,#c3b392)}
.seal{position:absolute;left:50%;top:62%;z-index:8;width:clamp(64px,20vw,84px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  animation:pulse 2.4s ease-in-out 1.4s infinite}
@keyframes pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
.seal .h{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 30%,#b23a46,var(--wax) 55%,#4e0f17);
  box-shadow:0 4px 10px rgba(0,0,0,.45),inset 0 0 0 6px rgba(0,0,0,.12),inset 0 -3px 6px rgba(0,0,0,.35);transition:transform 1s cubic-bezier(.5,0,.7,.4),opacity 1s}
.seal .a{clip-path:polygon(0 0,58% 0,44% 38%,60% 62%,46% 100%,0 100%)}
.seal .b{clip-path:polygon(58% 0,100% 0,100% 100%,46% 100%,60% 62%,44% 38%)}
.seal em{position:relative;font:400 clamp(24px,7vw,32px)/1 Pinyon,cursive;font-style:normal;color:#e6a9a9;text-shadow:0 1px 0 #4e0f17,0 -1px 0 #c7505c;transition:opacity .3s}
.seal em i{font-style:normal;font-size:.7em}
.cracked .seal{animation:none;pointer-events:none}
.cracked .seal em{opacity:0}
.cracked .seal .a{transform:translate(-40px,120px) rotate(-50deg);opacity:0}
.cracked .seal .b{transform:translate(40px,140px) rotate(60deg);opacity:0}

.letter{position:absolute;left:50%;top:5%;z-index:3;width:var(--lw);padding:34px 26px 30px;text-align:center;color:var(--ink);border-radius:2px;transform-origin:50% 0;
  background:linear-gradient(170deg,#fffdf7,var(--ivory));box-shadow:0 12px 40px rgba(0,0,0,.25),inset 0 0 0 10px #fffdf7,inset 0 0 0 11px var(--gold);
  clip-path:inset(0 0 58% 0);transition:transform 1.2s cubic-bezier(.2,.8,.2,1),clip-path 1.2s cubic-bezier(.2,.8,.2,1),box-shadow 1s}
.pull .letter{touch-action:none;cursor:grab;animation:tease 1.8s ease-in-out .8s infinite}
@keyframes tease{50%{margin-top:-10px}}
.letter.drag{transition:none;animation:none}
.outed .letter{z-index:10;clip-path:inset(0 0 0 0);animation:none;box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 10px #fffdf7,inset 0 0 0 11px var(--gold)}
.t1,.t2{font:italic 400 17px/1.3 Cormorant,serif;color:#55665a}
.letter h1{font:400 clamp(54px,16vw,72px)/.95 Pinyon,cursive;color:var(--ink);margin:14px 0 10px;font-weight:400}
.letter h1 span{display:block}
.letter h1 i{display:block;font:italic 400 .42em/1.4 Cormorant,serif;color:var(--gold)}
.t3{font:500 19px/1.5 Cormorant,serif;letter-spacing:.02em;margin:16px 0 12px}
.t4{font:400 34px/1 Pinyon,cursive;color:var(--moss)}
.lbtn{display:inline-block;margin-top:22px;font:600 13px/1 Cormorant,serif;letter-spacing:.28em;text-transform:uppercase;color:var(--ivory);background:var(--moss);padding:14px 22px;text-decoration:none;border-radius:99px;opacity:0;transition:opacity .8s 1s}
.outed .lbtn{opacity:1}
.env > .back,.env > .pocket,.env > .flap{transition:transform 1.1s cubic-bezier(.5,0,.7,.4),opacity 1s,z-index 0s .45s}
.outed .env > .back,.outed .env > .pocket,.outed .env > .flap{transform:translateY(70vh) rotate(4deg);opacity:0}
.outed .env > .flap{transform:perspective(900px) rotateX(180deg) translateY(-70vh)}

.petals{position:absolute;inset:0;pointer-events:none;z-index:11}
.petals i{position:absolute;top:-20px;width:12px;height:16px;border-radius:70% 0 70% 0;background:linear-gradient(135deg,#f3c9c4,#d98c8c);opacity:.9;animation:fall linear forwards}
.petals i.g{background:linear-gradient(135deg,#a9c4a0,#5f8a5a)}
@keyframes fall{to{transform:translate(var(--dx),110vh) rotate(var(--r))}}

.hint{position:relative;text-align:center;min-height:64px;transition:opacity .6s}
.hint .h{font:italic 500 clamp(26px,7vw,32px)/1.1 Cormorant,serif;color:var(--ivory)}
.hint .s{font:400 11px/1.4 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-top:8px}
.skip{position:relative;font:400 13px/1 system-ui,sans-serif;color:var(--mute);text-decoration:underline;text-underline-offset:3px;padding:8px}
.outed .hint,.outed .skip,.outed .to{opacity:0;pointer-events:none}

/* sections */
.in{max-width:620px;margin:0 auto;padding:0 22px}
.day,.wear,.stay,.reply,.faq{padding:84px 0;border-top:1px solid #1d3527}
.k{font:600 12px/1 Cormorant,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
h2{font:400 clamp(46px,13vw,70px)/1 Pinyon,cursive;color:var(--ivory);margin:12px 0 22px;font-weight:400}
.count{display:flex;gap:24px;margin:6px 0 30px}
.count p{font:500 12px/1 Cormorant,serif;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.count b{display:block;font:500 46px/1 Cormorant,serif;color:var(--gold);letter-spacing:0;margin-bottom:6px}
.tl{list-style:none;display:grid;gap:12px;margin-bottom:28px}
.tl li{padding:20px 22px;border:1px solid #2a4836;border-radius:14px;background:rgba(255,255,255,.02)}
.tl li.hi{border-color:var(--gold);background:rgba(201,169,106,.07)}
.tl .d{font:600 12px/1 Cormorant,serif;letter-spacing:.3em;text-transform:uppercase;color:var(--gold)}
.tl .w{font:500 26px/1.2 Cormorant,serif;margin:6px 0 2px}
.tl .x{color:var(--mute);font-style:italic}
.btns{display:flex;flex-wrap:wrap;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 24px;border-radius:99px;font:600 14px/1 Cormorant,serif;letter-spacing:.24em;text-transform:uppercase;text-decoration:none;background:var(--gold);color:var(--fern)}
.btn.ghost{background:none;border:1px solid #3d6049;color:var(--ivory)}
.sw{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;text-align:center;font:500 14px/1.2 Cormorant,serif;color:var(--mute)}
.sw i{display:block;aspect-ratio:1;border-radius:50%;margin:0 auto 10px;width:80%;border:1px solid #ffffff22}
.c1{background:#a8b9a0}.c2{background:#d6a9a4}.c3{background:#e8d6b0}.c4{background:#3f6b4a}
.note{color:var(--mute);font-style:italic;margin-top:18px}
.cardx{border:1px solid #2a4836;border-radius:14px;padding:24px;margin-bottom:22px}
.cardx .nm{font:400 34px/1.1 Pinyon,cursive;color:var(--gold);margin-bottom:8px}
.cardx p+p{margin-top:8px;color:#d7dccf}
form{display:grid;gap:22px}
.txt{display:grid;gap:8px;font:600 12px/1 Cormorant,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.txt input,.txt textarea{font:500 20px/1.3 Cormorant,serif;color:var(--ivory);background:rgba(255,255,255,.04);border:1px solid #2f4f3b;border-radius:10px;padding:14px;letter-spacing:0;text-transform:none}
.txt input::placeholder,.txt textarea::placeholder{color:#6f8a79}
.txt input:focus,.txt textarea:focus{border-color:var(--gold);outline:none}
fieldset{border:0;display:grid;gap:8px}
legend{font:600 12px/1 Cormorant,serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.opt label{position:relative;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0}
.opt span{display:block;padding:15px 18px;border:1px solid #2f4f3b;border-radius:10px;font:500 20px/1.2 Cormorant,serif;transition:all .2s}
.opt input:checked + span{border-color:var(--gold);background:rgba(201,169,106,.12);color:#fff}
.opt input:focus-visible + span{outline:2px solid var(--gold);outline-offset:2px}
.err span,.err input{border-color:#d98a7f !important}
.msg{color:#f0a49a;font-size:16px;min-height:1em}
.demo{font:400 12px/1.5 system-ui,sans-serif;color:var(--mute)}
.thanks{text-align:center;padding:34px 22px;border:1px solid var(--gold);border-radius:18px;background:rgba(201,169,106,.06)}
.bloom{width:70px;margin-bottom:8px}
.bloom path,.bloom circle{stroke-dasharray:140;stroke-dashoffset:140;animation:draw 2.4s ease-out forwards}
.ty{font:400 40px/1.15 Pinyon,cursive;color:var(--ivory);margin-bottom:8px}
.code{font:600 13px/1 Cormorant,serif;letter-spacing:.3em;color:var(--gold);margin:16px 0}
details{border-bottom:1px solid #22402f;padding:16px 0}
summary{font:500 22px/1.3 Cormorant,serif;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::after{content:"+";color:var(--gold)}
details[open] summary::after{content:"–"}
details p{color:#c9d3c6;margin-top:8px}
.foot{text-align:center;padding:70px 20px 90px;color:var(--mute);font:400 14px/1.6 system-ui,sans-serif;border-top:1px solid #1d3527}
.sig{font:400 46px/1 Pinyon,cursive;color:var(--gold);margin-bottom:16px}
.sig i{font-style:normal}
.rv{opacity:0;transform:translateY(16px);transition:opacity .9s,transform .9s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none !important;transition:none !important}.rv{opacity:1;transform:none}.fern path{stroke-dashoffset:0}}
@media (min-width:900px){:root{--w:440px;--lw:400px}}