:root{--wine:#560d26;--wine-deep:#350915;--paper:#f7f0e5;--ink:#24201d;--serif:'Cormorant Garamond',Georgia,serif;--sans:'DM Sans',system-ui,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--serif);background:radial-gradient(ellipse at 45% 15%,#783048 0%,var(--wine) 48%,var(--wine-deep) 100%);min-height:100svh}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;cursor:pointer}
button:focus-visible,a:focus-visible{outline:3px solid #b779cf;outline-offset:6px}
[hidden]{display:none!important}
main{padding:38px 22px 50px}
.paper{background-color:var(--paper);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.055' filter='url(%23n)'/%3E%3C/svg%3E")}
.invitation{width:min(100%,620px);margin:0 auto;position:relative;isolation:isolate;padding:45px 40px 29px;border-radius:22px;box-shadow:0 20px 75px #15030b35}
.card-outline{position:absolute;inset:10px;border:1px solid #560d2690;border-radius:15px;pointer-events:none;z-index:8}
.card-header{text-align:center;position:relative;z-index:6}
.eyebrow{font-size:15px;font-weight:600;letter-spacing:.3em;text-transform:uppercase;margin:0;color:var(--wine)}
h1{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(100px,19vw,170px);line-height:1.08;margin:17px 0 1px;padding:0 12px;outline:none}
.name-detail{font-size:16px;font-weight:500;letter-spacing:.29em;text-transform:uppercase;margin:0}
.name-detail span{padding:0 6px}
.collage{position:relative;margin:24px -8px 20px;aspect-ratio:1.05;isolation:isolate}
.scene-layer{position:absolute;pointer-events:none;user-select:none;display:block;object-fit:contain}
.portrait-layer{top:0;left:21%;width:58%;height:61%;z-index:2;object-position:center bottom;clip-path:inset(28% 0 0 0);mask-image:linear-gradient(to bottom,#000 0%,#000 79%,transparent 94%)}
.back-paper{position:absolute;left:8%;top:30%;width:36%;height:29%;object-fit:contain;z-index:0;opacity:.7;--layer-opacity:.7;transform:rotate(-13deg);pointer-events:none}
.back-ball{position:absolute;right:8%;top:31%;width:15%;height:15%;object-fit:contain;z-index:1;opacity:.84;--layer-opacity:.84;transform-origin:50% -38%;pointer-events:none}
.paper-right{left:auto;right:4%;top:45%;width:27%;height:26%;opacity:.46;--layer-opacity:.46;transform:rotate(17deg) scaleX(-1)}
.ball-low{right:auto;left:7%;top:69%;width:16%;height:16%;opacity:.85;--layer-opacity:.85;transform-origin:50% 50%}
.bow-curl{position:absolute;right:-2%;top:12%;width:25%;height:68%;object-fit:contain;object-position:top center;z-index:1;pointer-events:none;transform-origin:44% 12%}
.doodle-star,.doodle-arrow{position:absolute;z-index:6;object-fit:contain;pointer-events:none;filter:contrast(1.25)}
.star-top{left:6%;top:8%;width:7%;height:8%}
.star-left{left:9%;top:59%;width:7%;height:8%;transform:rotate(-16deg)}
.star-right{right:7%;top:39%;width:6%;height:7%;transform:rotate(17deg)}
.doodle-arrow{left:20%;top:5%;width:16%;height:13%;transform:rotate(-8deg)}
.crown-layer{position:absolute;left:37.5%;top:-.5%;width:27%;height:23%;display:block;z-index:5;pointer-events:none;transform-origin:50% 90%}
.crown-layer img{display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 92%}
.coupe-layer{bottom:0;left:10%;width:80%;height:62%;z-index:3}
.ribbon{position:absolute;left:8%;top:46%;width:84%;aspect-ratio:3/1;z-index:4;transform:rotate(-3deg)}
.ribbon-piece{position:absolute;inset:0;display:block}
.ribbon-piece img{width:100%;height:100%;object-fit:fill;display:block}
.ribbon-left{clip-path:inset(0 78% 0 0);transform-origin:22% 50%;z-index:1}
.ribbon-right{clip-path:inset(0 0 0 78%);transform-origin:78% 50%;z-index:1}
.ribbon-center{clip-path:inset(0 20% 0 20%);z-index:2}
.ribbon-label{position:absolute;left:23%;width:54%;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--serif);font-size:clamp(17px,3.5vw,29px);line-height:1;font-weight:600;letter-spacing:-.025em;text-transform:uppercase;white-space:nowrap;z-index:3}
.party-details{display:grid;grid-template-columns:1.1fr 1fr;text-align:center;border-top:1px solid #560d2680;padding:23px 0 14px}
.party-details>div+div{border-left:1px solid #560d2640}
.party-details h2{font-size:14px;letter-spacing:.24em;text-transform:uppercase;color:var(--wine);font-weight:600;margin:0 0 7px}
.party-details p{font-size:clamp(25px,4.5vw,34px);line-height:1.2;letter-spacing:-.025em;margin:0}
.card-actions{display:flex;flex-direction:column;align-items:center;gap:17px;margin-top:15px}
.button{min-height:56px;border:0;border-radius:50px;display:flex;align-items:center;justify-content:center;text-align:center;padding:13px 24px;transition:transform .2s,background .2s}
.primary{background:var(--wine);color:var(--paper);font-family:var(--serif);font-size:25px;font-weight:500;width:100%;text-decoration:none}
.primary:hover{background:#701634;transform:translateY(-2px)}
.primary:active{transform:translateY(0) scale(.99)}
.rsvp-hint{font:13px var(--sans);color:#715d61;margin:-10px 0 -9px}
.text-link{font-size:21px;color:var(--ink);text-underline-offset:5px;text-decoration-thickness:1px;padding:6px 12px}
.text-link:hover{color:var(--wine)}
.card-footer{text-align:center;font-style:italic;font-size:21px;letter-spacing:.04em;margin-top:25px}
.has-cover{overflow:hidden}.has-cover main{visibility:hidden;max-height:100svh;overflow:hidden}
.cover{position:fixed;inset:0;z-index:10;overflow-y:auto;display:grid;place-items:center;padding:32px 24px;background:radial-gradient(ellipse at 50% 45%,#7d2c44 0%,#560d26 55%,#350915 100%);color:var(--paper)}
.cover-inner{width:min(100%,550px);text-align:center;margin:auto}
.cover .eyebrow{color:#ecd6d9;font-size:14px;letter-spacing:.22em}
.cover-title{font-family:'Great Vibes',cursive;font-size:clamp(110px,16vw,154px);font-weight:400;line-height:1.15;margin:12px 0 -7px}
.cover-subtitle{font-size:17px;letter-spacing:.4em;text-transform:uppercase;margin:0 0 33px}
.envelope-button{border:0;background:transparent;color:inherit;padding:0;width:100%;display:block;position:relative;perspective:1100px;border-radius:3px}
.envelope{display:block;position:relative;width:100%;aspect-ratio:1.68;transform:rotate(-3deg);transition:transform .5s ease;filter:drop-shadow(0 18px 25px #16040a55);perspective:1100px}
.envelope-button:hover .envelope{transform:rotate(0deg) translateY(-5px)}
.envelope-layer{position:absolute;inset:0;overflow:hidden}
.envelope-layer img{position:absolute;width:109.7%;height:122.8%;max-width:none;left:-4.85%;top:-11.75%;object-fit:fill}
.envelope-inside{position:absolute;inset:1%;background:#ddcabc;border-radius:2px}
.envelope-front{clip-path:polygon(0 0,50% 62%,100% 0,100% 100%,0 100%);z-index:3}
.envelope-flap{clip-path:polygon(0 0,100% 0,100% 2%,50% 63%,0 2%);transform-origin:50% 0;z-index:4;backface-visibility:hidden}
.envelope-seal{clip-path:circle(9% at 50% 60%);z-index:5}
.letter-peek{position:absolute;inset:9% 9% 3%;display:flex;flex-direction:column;justify-content:center;color:var(--wine);z-index:2;border:1px solid #b7947950;box-shadow:0 1px 10px #46261210}
.letter-peek>span{font-family:'Great Vibes',cursive;font-size:clamp(50px,9vw,80px);line-height:1.15}.letter-peek>small{font-size:12px;letter-spacing:.22em}
.open-label{display:inline-block;margin-top:34px;font-size:24px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:7px}
.cover-date{font-family:var(--sans);font-size:13px;letter-spacing:.05em;color:#e4c6ce;margin:27px 0 0}
.is-opening .envelope{transform:rotate(0)}
.is-opening .envelope-seal{animation:seal-pop .35s ease forwards}
.is-opening .envelope-flap{animation:flap-open .7s .18s cubic-bezier(.45,0,.2,1) forwards}
.is-opening .letter-peek{animation:letter-rise .8s .5s cubic-bezier(.25,.8,.25,1) forwards}
.is-opening .cover{animation:cover-away .55s 1.05s ease-in forwards;pointer-events:none}
.is-opening .open-label,.is-opening .cover-date{opacity:0;transition:opacity .2s}
.invitation-open .invitation{animation:card-arrive .8s cubic-bezier(.2,.7,.25,1) both}
.invitation-open .card-header{animation:reveal-up .7s .1s both}
.invitation-open .card-outline{animation:outline-in .55s .18s both}
.invitation-open .portrait-layer{animation:portrait-arrive .9s .28s both}
.invitation-open .crown-layer{animation:crown-reveal .55s .66s cubic-bezier(.2,1.5,.45,1) both}
.invitation-open .crown-layer img{animation:crown-wiggle 3.2s 1.45s steps(1,end) infinite}
.invitation-open .back-paper{animation:cutout-in .5s .28s steps(4,end) both,paper-drift 5.9s 1.2s steps(1,end) infinite}
.invitation-open .paper-right{animation:cutout-in .5s .62s steps(4,end) both,paper-right 6.8s 1.6s steps(1,end) infinite}
.invitation-open .back-ball{animation:cutout-in .48s .76s steps(4,end) both,ball-swing 5.8s 1.5s steps(1,end) infinite}
.invitation-open .ball-low{animation:cutout-in .48s 1.05s steps(4,end) both,ball-low 6.7s 1.8s steps(1,end) infinite}
.invitation-open .bow-curl{animation:cutout-in .52s .54s steps(4,end) both,bow-hop 4.9s 1.4s steps(1,end) infinite}
.invitation-open .doodle-star{animation:cutout-in .35s .84s steps(3,end) both,star-hop 4.3s 1.6s steps(1,end) infinite}
.invitation-open .star-left{animation-delay:1.05s,2s}
.invitation-open .star-right{animation-delay:1.22s,2.4s}
.invitation-open .doodle-arrow{animation:cutout-in .35s .67s steps(3,end) both,arrow-hop 5.2s 1.7s steps(1,end) infinite}
.invitation-open .coupe-layer{animation:coupe-arrive 1s .42s both}
.invitation-open .ribbon{animation:ribbon-arrive .9s .65s both}
.invitation-open .ribbon-center{animation:cutout-in .4s .93s steps(3,end) both}
.invitation-open .ribbon-left{animation:ribbon-left 6.4s 1.6s steps(1,end) infinite}
.invitation-open .ribbon-right{animation:ribbon-right 8.1s 1.2s steps(1,end) infinite}
.invitation-open .party-details,.invitation-open .card-actions,.invitation-open .card-footer{animation:reveal-up .7s .72s both}
.invitation-open .party-details>div:first-child{animation:reveal-up .48s .9s both}
.invitation-open .party-details>div:last-child{animation:reveal-up .48s 1.07s both}
.page-hidden *{animation-play-state:paused!important}
.toast{position:fixed;z-index:20;bottom:24px;left:50%;transform:translate(-50%,18px);max-width:min(90vw,470px);padding:15px 22px;border-radius:16px;background:var(--paper);color:var(--wine);box-shadow:0 8px 32px #0003;font:14px/1.5 var(--sans);text-align:center;opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;pointer-events:none}.toast.visible{opacity:1;visibility:visible;transform:translate(-50%,0)}
@keyframes seal-pop{to{opacity:0;transform:scale(1.16) translateY(12px)}}
@keyframes flap-open{to{transform:rotateX(175deg)}}
@keyframes letter-rise{to{transform:translateY(-48%) rotate(1deg)}}
@keyframes cover-away{to{opacity:0;transform:translateY(-35px)}}
@keyframes card-arrive{from{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:none}}
@keyframes outline-in{from{opacity:0;clip-path:inset(0 50%)}to{opacity:1;clip-path:inset(0 0)}}
@keyframes cutout-in{0%{opacity:0;scale:.68;translate:0 15px}60%{opacity:var(--layer-opacity,1);scale:1.09;translate:0 -3px}100%{opacity:var(--layer-opacity,1);scale:1;translate:0 0}}
@keyframes reveal-up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes portrait-arrive{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
@keyframes crown-reveal{from{opacity:0;transform:translateY(-12px) scale(.86) rotate(-10deg)}to{opacity:1;transform:none}}
@keyframes crown-wiggle{0%,28%,60%,100%{transform:translate(0,0) rotate(0)}30%{transform:translate(-2px,1px) rotate(-7deg)}38%{transform:translate(1px,-2px) rotate(5deg)}46%{transform:translate(-1px,1px) rotate(-4deg)}53%{transform:translate(1px,0) rotate(2deg)}}
@keyframes paper-drift{0%,33%,77%,100%{transform:translate(0,0) rotate(-13deg)}35%{transform:translate(-5px,-5px) rotate(-10deg)}57%{transform:translate(2px,-3px) rotate(-15deg)}}
@keyframes paper-right{0%,42%,80%,100%{transform:translate(0,0) rotate(17deg) scaleX(-1)}44%{transform:translate(4px,-4px) rotate(14deg) scaleX(-1)}62%{transform:translate(-2px,1px) rotate(20deg) scaleX(-1)}}
@keyframes ball-swing{0%,31%,74%,100%{transform:rotate(-7deg) translateY(1px)}33%{transform:rotate(8deg) translateY(-4px)}56%{transform:rotate(-3deg) translateY(-2px)}}
@keyframes ball-low{0%,40%,86%,100%{transform:rotate(8deg) translateY(0)}42%{transform:rotate(-9deg) translateY(-5px)}66%{transform:rotate(3deg) translateY(-2px)}}
@keyframes bow-hop{0%,34%,76%,100%{transform:translate(0,0) rotate(0)}36%{transform:translate(3px,-4px) rotate(4deg)}55%{transform:translate(-2px,-1px) rotate(-3deg)}}
@keyframes star-hop{0%,37%,75%,100%{opacity:1;transform:rotate(-8deg) scale(1)}39%{opacity:.7;transform:rotate(7deg) scale(.89)}56%{opacity:1;transform:rotate(-2deg) scale(1.09)}}
@keyframes arrow-hop{0%,47%,82%,100%{transform:rotate(-8deg) translate(0,0)}49%{transform:rotate(-2deg) translate(3px,-3px)}65%{transform:rotate(-12deg) translate(-2px,1px)}}
@keyframes coupe-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes ribbon-arrive{from{opacity:0;transform:translateX(-10px) rotate(-6deg)}to{opacity:1;transform:translateX(0) rotate(-3deg)}}
@keyframes ribbon-left{0%,100%{transform:rotate(0deg) skewY(0)}35%{transform:rotate(3deg) skewY(-1deg)}70%{transform:rotate(-1deg) skewY(1deg)}}
@keyframes ribbon-right{0%,100%{transform:rotate(0deg) skewY(0)}45%{transform:rotate(-3.5deg) skewY(1deg)}75%{transform:rotate(1deg) skewY(-1deg)}}
@media(max-width:560px){main{padding:13px 10px 25px}.invitation{padding:34px 24px 27px;border-radius:20px}.card-outline{inset:7px;border-radius:14px}.eyebrow{font-size:14px;letter-spacing:.25em}h1{font-size:clamp(106px,29vw,155px);margin:16px 0 1px}.name-detail{font-size:14px;letter-spacing:.24em}.collage{margin:22px -10px 19px;aspect-ratio:1.02}.ribbon-label{font-size:clamp(15px,4.7vw,24px)}.party-details{padding-top:19px}.party-details p{font-size:clamp(24px,6.1vw,30px)}.card-actions{gap:10px}.primary{font-size:24px}.rsvp-hint{margin:-3px 0 -4px}.card-footer{font-size:20px;margin-top:19px}.cover{padding:34px 30px}.cover-title{font-size:121px}.cover-subtitle{margin-bottom:36px}.cover .eyebrow{font-size:13px}.open-label{margin-top:33px}.cover-date{font-size:12px;letter-spacing:.03em}}
@media(max-height:650px) and (min-width:561px){.cover-inner{width:390px}.cover-title{font-size:90px}.cover-subtitle{margin-bottom:22px}.open-label{margin-top:22px}.cover-date{margin-top:20px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}