@font-face{font-family:WeddingSerif;src:url('/fonts/serif.woff') format('woff');font-display:swap;font-style:normal;font-weight:400}
@font-face{font-family:WeddingSerif;src:url('/fonts/serif-italic.woff') format('woff');font-display:swap;font-style:italic;font-weight:400}
:root{--sage:#59604b;--sage-deep:#424938;--sage-soft:#6c735e;--ivory:#f6f1e7;--cream:#eee5d7;--ink:#493f32;--muted:#796e5f;--gold:#b89352;--gold-pale:#dbc79f;--copper:#9d6f52;--shadow:rgba(39,40,29,.23)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#353a2e;color:var(--ink);font-family:WeddingSerif,Georgia,serif}
body{overflow:hidden}
button,a{font:inherit}
button{-webkit-tap-highlight-color:transparent}
.shell{position:relative;width:min(100%,600px);height:100svh;min-height:620px;margin:0 auto;overflow:hidden;background:var(--ivory);box-shadow:0 0 60px #161a14aa;isolation:isolate}
.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}

.envelope-scene{position:absolute;z-index:10;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 42%,#737a64 0,#626a55 30%,#535b48 76%,#484f3e 100%);perspective:1300px;transition:opacity .7s ease,visibility .7s}
.envelope-scene:after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;opacity:.34;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");mix-blend-mode:soft-light}
.paper-glow{position:absolute;inset:-20%;z-index:0;background:radial-gradient(circle at 50% 46%,#fff3 0,transparent 43%);animation:paper-breathe 7s ease-in-out infinite}
.envelope-back{position:absolute;inset:0;z-index:1;background:linear-gradient(145deg,#66705a,#505844)}
.envelope-flap{position:absolute;z-index:5;inset:0 0 38%;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;transform-style:preserve-3d;backface-visibility:visible;background:linear-gradient(164deg,#717965 0,#5e6652 57%,#4c5341 100%);filter:drop-shadow(0 9px 7px #30342866)}
.envelope-flap:before{content:"";position:absolute;inset:0;background:linear-gradient(106deg,transparent 48.8%,#cbb78785 49.4%,#f0dec044 50%,transparent 50.8%)}
.envelope-flap span{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#ffffff14,transparent 42%)}
.envelope-fold{position:absolute;z-index:4;inset:27% 0 0;background:#555d49}
.fold-left{clip-path:polygon(0 0,52% 52%,0 100%);background:linear-gradient(118deg,#626a56,#515845)}
.fold-right{clip-path:polygon(100% 0,48% 52%,100% 100%);background:linear-gradient(242deg,#626a56,#4e5542)}
.fold-bottom{z-index:4;clip-path:polygon(0 100%,50% 38%,100% 100%);background:linear-gradient(3deg,#626a55,#555d49)}
.emboss{position:absolute;z-index:6;width:46%;height:78%;top:5%;overflow:visible;pointer-events:none;opacity:.8;filter:drop-shadow(1px 2px 1px #272c2266)}
.emboss-left{left:-5%}.emboss-right{right:-5%;transform:scaleX(-1)}
.emboss-shadow{fill:#0000;stroke:#c2ad7d;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.emboss-shadow path:nth-child(3){fill:#66705a99;stroke:#c8b384}
.wax-seal{position:absolute;z-index:12;left:50%;top:51%;width:132px;aspect-ratio:1;transform:translate(-50%,-50%);display:grid;place-items:center;border:0;border-radius:50%;cursor:pointer;color:#695027;background:radial-gradient(circle at 37% 31%,#f1dca6 0,#c4a15e 22%,#9b733b 55%,#d2b471 74%,#815a2e 100%);box-shadow:0 14px 26px #22281f73,inset 0 0 0 4px #efdba5aa,inset 0 0 0 10px #815d2c66;transition:transform .35s ease,filter .35s ease}
.wax-seal:before{content:"";position:absolute;inset:-7px;border-radius:46% 54% 48% 52%/52% 47% 53% 48%;background:linear-gradient(145deg,#d3b674,#89612f);z-index:-1;box-shadow:inset 2px 3px 4px #f4e1b977,inset -3px -3px 5px #6d4829aa}
.wax-seal:hover,.wax-seal:focus-visible{transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.08);outline:2px solid #f1dfb9;outline-offset:8px}
.wax-seal svg{width:63%;fill:none;stroke:#6b4f29;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(1px 1px 0 #f2dda5aa)}
.seal-rim{position:absolute;inset:15px;border:1px solid #6d522e88;border-radius:50%;box-shadow:0 0 0 2px #f0daa766}
.open-prompt{position:absolute;z-index:11;left:0;right:0;top:calc(51% + 88px);margin:0;text-align:center;color:#f3ead7;letter-spacing:.28em;font:12px/1.4 Arial,sans-serif;text-shadow:0 2px 9px #222;animation:hint-pulse 2.4s ease-in-out infinite}

body[data-phase="opening"] .wax-seal{animation:seal-break .7s ease forwards}
body[data-phase="opening"] .open-prompt{animation:fade-away .35s ease forwards}
body[data-phase="opening"] .envelope-flap{animation:flap-open 1.35s cubic-bezier(.25,.7,.2,1) .28s forwards}
body[data-phase="opening"] .fold-left{animation:fold-left-open .95s ease 1.05s forwards}
body[data-phase="opening"] .fold-right{animation:fold-right-open .95s ease 1.05s forwards}
body[data-phase="opening"] .fold-bottom{animation:fold-bottom-open .95s ease 1.05s forwards}
body[data-phase="invitation"] .envelope-scene{opacity:0;visibility:hidden;pointer-events:none}

.flying-butterfly{position:absolute;z-index:30;left:50%;top:51%;width:92px;opacity:0;pointer-events:none;filter:drop-shadow(0 10px 7px #3d3e304d)}
.flying-butterfly svg{width:100%;overflow:visible}
.flying-butterfly .wing{fill:#e8eddf;stroke:#a58759;stroke-width:1.9;transform-box:fill-box;transform-origin:center right}
.flying-butterfly .wing-right{transform-origin:center left}
.flying-butterfly .body{fill:#9a7c50}.flying-butterfly .antenna{fill:none;stroke:#806741;stroke-width:1.5}
body[data-phase="opening"] .flying-butterfly{animation:butterfly-flight 4.8s cubic-bezier(.35,.1,.3,1) .7s both}
body[data-phase="opening"] .flying-butterfly .wing-left,body[data-phase="invitation"] .flying-butterfly .wing-left{animation:wing-left .19s ease-in-out infinite alternate}
body[data-phase="opening"] .flying-butterfly .wing-right,body[data-phase="invitation"] .flying-butterfly .wing-right{animation:wing-right .19s ease-in-out infinite alternate}

.invitation{position:absolute;z-index:2;inset:0;overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth;scroll-snap-type:y mandatory;background:var(--ivory);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 1s ease .1s,visibility 1s}
body[data-phase="invitation"] .invitation{opacity:1;visibility:visible;pointer-events:auto}
.panel{position:relative;min-height:100svh;scroll-snap-align:start;overflow:hidden;display:grid;place-items:center;padding:max(62px,8svh) 30px max(50px,6svh);background:radial-gradient(circle at 50% 34%,#fffdf7,var(--ivory) 58%,#ece2d3)}
.grain{position:absolute;inset:0;pointer-events:none;opacity:.16;mix-blend-mode:multiply;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.58' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E")}
.hero-botanical{position:absolute;z-index:0;top:1.8%;left:50%;width:min(92%,500px);transform:translateX(-50%);fill:#72806b1f;stroke:#87927b;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.82}
.hero-butterfly{position:absolute;z-index:1;top:17%;left:50%;width:94px;transform:translateX(-50%);filter:drop-shadow(0 9px 7px #5d53442b);animation:butterfly-hover 4s ease-in-out infinite}
.hero-butterfly svg{fill:#dfe5d8;stroke:#927455;stroke-width:1.4;overflow:visible}
.hero-copy{position:relative;z-index:2;width:100%;max-width:500px;text-align:center;margin-top:9svh}
.overline{margin:0;color:#75634e;font:11px/1.4 Arial,sans-serif;letter-spacing:.3em;text-transform:uppercase}
.names{margin:25px 0 9px;color:#66584a;font-size:clamp(55px,16vw,92px);font-style:italic;font-weight:400;line-height:.82;letter-spacing:-.04em}
.names span{display:block}.names em{display:block;color:#b59261;font-size:.56em;line-height:1.1;font-style:normal;font-weight:400}
.filigree{display:flex;align-items:center;justify-content:center;gap:13px;color:#ad8b56;margin:27px auto 24px}.filigree span{width:72px;height:1px;background:linear-gradient(90deg,transparent,#b08c55)}.filigree span:last-child{transform:scaleX(-1)}.filigree i{font-style:normal;font-size:8px}
.welcome{margin:0;color:#665b4e;font-size:18px;line-height:1.55;font-style:italic}
.hero-date{margin:24px 0 0;color:#786c5d;font:14px/1.4 Arial,sans-serif;letter-spacing:.28em}
.discover{margin-top:35px;padding:13px 4px;border:0;border-bottom:1px solid #a68757;background:transparent;color:#6f604d;font:11px/1.2 Arial,sans-serif;letter-spacing:.19em;cursor:pointer;transition:color .3s,border-color .3s}
.discover span{display:inline-block;margin-left:10px;animation:arrow-bob 1.5s ease-in-out infinite}.discover:hover,.discover:focus-visible{color:#9a7440;border-color:#c4a46b;outline:none}
.scroll-note{position:absolute;z-index:2;bottom:18px;left:0;right:0;margin:0;text-align:center;color:#847967;font:9px/1 Arial,sans-serif;letter-spacing:.27em;opacity:.7}
.reveal{opacity:0;transform:translateY(18px)}
body[data-phase="invitation"] .reveal{animation:text-reveal .9s cubic-bezier(.2,.7,.2,1) forwards}
body[data-phase="invitation"] .r1{animation-delay:.2s}body[data-phase="invitation"] .r2{animation-delay:.42s}body[data-phase="invitation"] .r3{animation-delay:.68s}body[data-phase="invitation"] .r4{animation-delay:.86s}body[data-phase="invitation"] .r5{animation-delay:1.04s}body[data-phase="invitation"] .r6{animation-delay:1.22s}

.details-panel{padding:52px 25px;background:radial-gradient(circle at 50% 30%,#fffdf8 0,#f4ede2 52%,#e8ddcc 100%)}
.details-card{position:relative;z-index:2;width:100%;max-width:470px;text-align:center;padding:31px 20px 25px;border:1px solid #b595633d;background:#fffaf28f;box-shadow:0 22px 70px #6e5d4420, inset 0 0 45px #fff7}
.details-card:before,.details-card:after{content:"";position:absolute;width:27px;height:27px;border-color:#b3915d80}.details-card:before{left:7px;top:7px;border-left:1px solid;border-top:1px solid}.details-card:after{right:7px;bottom:7px;border-right:1px solid;border-bottom:1px solid}
.details-card h2{margin:16px 0 17px;color:#615344;font-size:clamp(37px,10vw,57px);line-height:.96;font-weight:400}.details-card h2 span{display:block;color:#9b7355;font-size:.48em;font-style:italic;line-height:1.6}
.gold-line{width:78px;height:1px;margin:19px auto 23px;background:linear-gradient(90deg,transparent,#b48e56,transparent)}
.arrival{display:flex;align-items:center;justify-content:center;gap:15px;margin:0 auto 27px;color:#6e6050}.arrival-label{font:10px/1.3 Arial,sans-serif;letter-spacing:.18em}.arrival strong{padding-left:15px;border-left:1px solid #b18e5c;font-size:25px;font-weight:400}
.venue-block{margin:0 auto 23px}.venue-block svg{width:22px;fill:none;stroke:#a17b49;stroke-width:1.5}.venue-label{margin:6px 0 7px;color:#8b775e;font:10px/1.3 Arial,sans-serif;letter-spacing:.25em}.venue-block h3{margin:0;color:#574a3c;font-size:25px;line-height:1.05;font-weight:400}.venue-block>p:last-child{margin:8px 0 0;color:#817261;font-size:14px}
.map-button{display:flex;align-items:center;justify-content:center;gap:13px;width:min(100%,330px);margin:0 auto;padding:14px 16px;color:#fbf7ee;text-decoration:none;background:linear-gradient(105deg,#69715c,#505843 54%,#626b56);border:1px solid #a88a58;box-shadow:0 9px 24px #52584333;font:10px/1.2 Arial,sans-serif;letter-spacing:.16em;transition:transform .25s,filter .25s}.map-button span{font-size:17px}.map-button:hover,.map-button:focus-visible{transform:translateY(-2px);filter:brightness(1.08);outline:2px solid #b7945f;outline-offset:3px}
.countdown-block{margin:28px auto 0}.countdown-title{margin:0 0 12px;color:#8b775e;font:9px/1.3 Arial,sans-serif;letter-spacing:.23em}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}.countdown div{padding:9px 3px 8px;border-top:1px solid #b6925c66;border-bottom:1px solid #b6925c33;background:#fff9f17a}.countdown strong{display:block;color:#665646;font-size:23px;font-weight:400;line-height:1}.countdown span{display:block;margin-top:5px;color:#8a7b68;font:7px/1 Arial,sans-serif;letter-spacing:.08em}
.closing{margin:24px 0 0;color:#706456;font-size:15px;line-height:1.45;font-style:italic}.signature{margin:12px 0 0;color:#9c7354;font-size:27px;font-style:italic}.signature span{color:#b49360;font-style:normal;font-size:.7em}
.corner-branch{position:absolute;z-index:1;width:180px;fill:#75806d1f;stroke:#88927e;stroke-width:1.6;opacity:.72}.corner-top{top:-30px;right:-35px}.corner-bottom{bottom:-35px;left:-35px;transform:rotate(180deg)}
.utility{position:absolute;z-index:40;border:1px solid #b596644a;color:#665b4c;background:#f9f3e9c9;backdrop-filter:blur(8px);box-shadow:0 5px 18px #4e463924;cursor:pointer}.replay{left:14px;bottom:14px;border-radius:999px;padding:9px 12px;font:10px/1 Arial,sans-serif;letter-spacing:.08em}.replay span{margin-left:5px}.motion{right:14px;bottom:14px;width:36px;height:36px;border-radius:50%;font:13px/1 Arial,sans-serif}

@keyframes paper-breathe{50%{transform:scale(1.08);opacity:.55}}
@keyframes hint-pulse{50%{opacity:.48;letter-spacing:.34em}}
@keyframes seal-break{0%{transform:translate(-50%,-50%) scale(1)}55%{transform:translate(-50%,-50%) scale(1.1) rotate(7deg)}100%{transform:translate(-50%,-50%) scale(.7) rotate(-16deg);opacity:0}}
@keyframes fade-away{to{opacity:0}}
@keyframes flap-open{0%{transform:rotateX(0)}55%{transform:rotateX(105deg)}100%{transform:rotateX(178deg);z-index:0;filter:brightness(.82)}}
@keyframes fold-left-open{to{transform:translateX(-105%);opacity:.4}}
@keyframes fold-right-open{to{transform:translateX(105%);opacity:.4}}
@keyframes fold-bottom-open{to{transform:translateY(70%);opacity:.35}}
@keyframes wing-left{to{transform:scaleX(.28) rotateY(18deg)}}
@keyframes wing-right{to{transform:scaleX(.28) rotateY(-18deg)}}
@keyframes butterfly-flight{0%{left:50%;top:51%;opacity:0;transform:translate(-50%,-50%) scale(.22) rotate(0)}8%{opacity:1}24%{left:18%;top:31%;transform:translate(-50%,-50%) scale(.68) rotate(-19deg)}48%{left:78%;top:22%;transform:translate(-50%,-50%) scale(.9) rotate(18deg)}72%{left:36%;top:13%;transform:translate(-50%,-50%) scale(.72) rotate(-9deg);opacity:1}100%{left:70%;top:4%;transform:translate(-50%,-50%) scale(.48) rotate(12deg);opacity:0}}
@keyframes butterfly-hover{50%{transform:translate(-50%,8px) rotate(2deg)}}
@keyframes text-reveal{to{opacity:1;transform:translateY(0)}}
@keyframes arrow-bob{50%{transform:translateY(5px)}}

body[data-motion="paused"] *{animation-play-state:paused!important}
@media (max-height:700px){.hero-butterfly{top:12%;width:75px}.hero-copy{margin-top:8svh}.names{font-size:56px;margin-top:17px}.filigree{margin:18px auto}.welcome{font-size:16px}.hero-date{margin-top:15px}.discover{margin-top:22px}.details-panel{padding-top:28px;padding-bottom:28px}.details-card{padding-top:23px}.details-card h2{font-size:37px;margin-top:10px}.gold-line{margin:14px auto 17px}.arrival{margin-bottom:18px}.venue-block{margin-bottom:18px}.countdown-block{margin-top:20px}.closing{margin-top:17px}}
@media (min-width:601px){body{background:radial-gradient(circle,#505844,#252a21)}.shell:before,.shell:after{content:"";position:absolute;z-index:50;top:0;bottom:0;width:1px;background:#c7aa7940}.shell:before{left:0}.shell:after{right:0}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-delay:0ms!important;scroll-behavior:auto!important;transition-duration:.01ms!important}.flying-butterfly{display:none}}