@charset "UTF-8";
/* Self-hosted fonts (SIL Open Font License): Cormorant Garamond, Pinyon Script and Amiri. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:block;src:url(../fonts/cormorant-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:300 700;font-display:block;src:url(../fonts/cormorant-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:block;src:url(../fonts/cormorant-italic-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/pinyon-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Pinyon Script';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/pinyon-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/amiri-arabic.woff2) format('woff2');unicode-range:U+0600-06FF,U+0750-077F,U+0870-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:'Amiri';font-style:normal;font-weight:400;font-display:block;src:url(../fonts/amiri-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+2000-206F}

/* Base colours (--paper, --white, --ink, --green, --gold, --on-primary) come from /theme.css. */
.invitation-body{--display:'Cormorant Garamond',Georgia,'Times New Roman',serif;--script:'Pinyon Script','Cormorant Garamond',cursive;--arabic:'Amiri','Traditional Arabic','Geeza Pro',serif;--muted:color-mix(in srgb,var(--ink) 68%,var(--white));--line:color-mix(in srgb,var(--gold) 32%,var(--white));--frame:color-mix(in srgb,var(--gold) 55%,var(--white));--tint:color-mix(in srgb,var(--green) 9%,var(--white));--sheen:color-mix(in srgb,var(--gold) 55%,#fff);--glow:color-mix(in srgb,var(--gold) 30%,transparent);--accent-ink:color-mix(in srgb,var(--gold) 55%,var(--ink));--arch:min(46vw,270px);--ease:cubic-bezier(.2,.7,.2,1);font-variant-numeric:lining-nums;min-height:100vh;overflow-x:hidden;color:var(--ink);background:radial-gradient(ellipse 42% 32% at 0 0,color-mix(in srgb,#c7a3c9 28%,var(--paper)),transparent 70%),radial-gradient(ellipse 46% 36% at 100% 100%,color-mix(in srgb,#d0ddee 55%,var(--paper)),transparent 72%),var(--paper)}
.invitation-body h1,.invitation-body h2,.invitation-body h3{font-family:var(--display);font-weight:500}
.invitation-body :is(p,span,strong,small,h2,h3,legend,label,select){font-variant-numeric:lining-nums}
.invitation-body .eyebrow{font:600 .6875rem/1.6 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.invitation-body .muted{color:var(--muted)}
.invitation-body .primary{background:var(--green);color:var(--on-primary,#fff);border-radius:999px;letter-spacing:.06em;box-shadow:0 10px 24px -12px color-mix(in srgb,var(--green) 80%,transparent)}.invitation-body .primary:hover{background:color-mix(in srgb,var(--green) 85%,#000)}
.invitation-body .outline{border-color:var(--frame);color:var(--ink);border-radius:999px}.invitation-body .outline:hover{background:var(--tint)}
.invitation-body input:not([type=radio]):not([type=checkbox]):not([type=hidden]),.invitation-body select{border-color:var(--frame);border-radius:10px;background:var(--white);color:var(--ink)}
.invitation-body .notice{background:var(--tint);border-color:var(--line);color:var(--ink);border-radius:12px}.invitation-body .notice.error{background:color-mix(in srgb,#c0392b 12%,var(--white));border-color:color-mix(in srgb,#c0392b 40%,var(--white))}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
#khatam path{fill:none;stroke:var(--gold);stroke-width:1}
.glass-core{stop-color:#fff7d6}.glass-mid{stop-color:var(--sheen);stop-opacity:.9}.glass-edge{stop-color:var(--gold);stop-opacity:.45}.halo-core{stop-color:#fff3c4;stop-opacity:.85}.halo-edge{stop-color:var(--gold);stop-opacity:0}

/* Background: an eight-pointed-star lattice that fades towards the centre. */
.lattice{display:none}
.lattice-base{opacity:.13;-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,transparent 35%,#000 95%);mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,transparent 35%,#000 95%)}.lattice-glint{display:none}

/* Hanging lanterns sit in the empty shoulders of the arch. */
.invitation-shell{position:relative;z-index:1;width:min(100% - 28px,520px);margin:0 auto;padding:36px 0 36px}
.lanterns{display:none}
.lantern{position:absolute;width:var(--w);height:auto;overflow:visible;transform-origin:50% 0;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--sheen) 70%,transparent)) drop-shadow(0 0 18px var(--glow))}
.lantern.l1{--w:48px;top:24px;left:2%}.lantern.l2{--w:40px;top:-6px;right:3%}.lantern.l3{--w:28px;top:-40px;right:16%}
.lantern .halo{fill:url(#lantern-halo);transform-box:fill-box;transform-origin:center;transform:scale(2.2)}.lantern .chain{fill:none;stroke:var(--gold);stroke-width:1.2}.lantern .ring{fill:none;stroke:var(--gold);stroke-width:1.2}.lantern .metal,.divider circle,.divider .star,.invitation-footer svg{fill:var(--gold)}.lantern .glass{fill:url(#lantern-glass)}.lantern .flame{fill:#fffbe9;transform-box:fill-box;transform-origin:50% 100%}.lantern .frame{fill:none;stroke:color-mix(in srgb,var(--gold) 75%,#000);stroke-width:1}

/* The invitation card is an Andalusian arch. */
.invitation-card{position:relative;padding:8px;background:var(--white);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--white));border-radius:18px;box-shadow:0 28px 60px -36px color-mix(in srgb,var(--ink) 45%,transparent)}.invitation-card:focus{outline:0}
.card-inner{position:relative;isolation:isolate;overflow:hidden;padding:42px 34px 36px;text-align:center;border-radius:12px;background:url(../images/paper-grain.png) 0 0/512px,var(--white)}
.card-inner::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(115deg,transparent 42%,color-mix(in srgb,var(--sheen) 28%,transparent) 50%,transparent 58%) 150% 0/260% 100% no-repeat;opacity:0}
.gold-frame{position:absolute;inset:16px 14px 18px;z-index:0;pointer-events:none;border:1px solid color-mix(in srgb,var(--gold) 82%,#7d6840);border-radius:48% 48% 3px 3px/26% 26% 3px 3px}
.gold-frame i{position:absolute;width:7px;height:7px;background:var(--white);border:1px solid color-mix(in srgb,var(--gold) 82%,#7d6840);transform:rotate(45deg)}
.gold-frame i:nth-child(1){top:-4px;left:50%;margin-left:-4px}.gold-frame i:nth-child(2){top:26%;left:-4px}.gold-frame i:nth-child(3){top:26%;right:-4px}
.card-inner>:not(.gold-frame){position:relative;z-index:1}
.opening-line{margin:8px 0 14px;font:400 clamp(1.35rem,5vw,1.7rem)/1.7 var(--arabic);color:var(--ink)}
.invitation-body .event-name{margin:0 0 8px;color:var(--green);letter-spacing:.42em}
.greeting{margin:18px 0 0;font:500 1.35rem/1.3 var(--display);overflow-wrap:anywhere}
.family{margin:8px 0 0;color:var(--ink)}.family p{margin:0;font:500 1.05rem/1.45 var(--display)}.family p:first-child,.family .invite-line{font-weight:400;font-size:1.02rem}.family-amp{margin:2px 0;font:italic 400 1.35rem/1 var(--display);color:var(--green)}
.couple{margin:0;font-weight:500;line-height:.92}.couple .name{display:block;font:500 clamp(4.2rem,16vw,5.6rem)/.92 var(--display);color:var(--ink);overflow-wrap:anywhere}
.couple .amp{position:relative;display:flex;align-items:center;justify-content:center;height:46px;margin:2px 0 0;font:italic 400 2.4rem/1 var(--script);color:var(--green)}.couple .amp>span{position:relative;z-index:1}
.name-sprig{position:absolute;left:50%;top:50%;z-index:0;width:min(58%,180px);height:auto;transform:translate(-50%,-52%);pointer-events:none}
.particulars{margin:26px auto 0;padding:0;list-style:none;display:grid;gap:12px;justify-items:center}.particulars li{display:flex;align-items:center;gap:12px;max-width:280px;text-align:left;font:500 1.15rem/1.25 var(--display);color:var(--ink)}.particulars svg{flex:none;width:22px;height:22px;color:var(--green)}.particulars strong{display:block;font-weight:600}
.countdown{display:flex;justify-content:center;gap:9px;margin:22px auto 0}.countdown>div{min-width:62px;padding:12px 6px 8px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--paper) 55%,var(--white));overflow:hidden}.countdown strong{display:block;font:500 1.45rem/1.1 var(--display);font-variant-numeric:tabular-nums lining-nums}.countdown small{display:block;font-size:.5625rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.presence{margin:26px 0 4px;font:italic 400 1.15rem/1.4 var(--display);color:var(--ink)}
.location{min-width:180px}.invitation-image{display:block;width:100%;height:auto;margin:32px auto 0;border-radius:12px}

/* Replies */
.rsvp-section{position:relative;z-index:1;max-width:520px;margin:36px auto 0;padding:36px 28px;text-align:center;background:color-mix(in srgb,var(--white) 82%,transparent);border:1px solid var(--line);border-radius:24px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.rsvp-section>.eyebrow{margin-bottom:8px}.rsvp-section h2{font-size:2.1rem;margin-bottom:14px}.rsvp-section>p{font:400 1.1rem/1.6 var(--display)}
.rsvp-form{margin-top:24px;text-align:left}.rsvp-form fieldset{margin:0;padding:0;border:0}.rsvp-form legend{margin-bottom:12px;font:500 1.15rem var(--display)}.response-options{display:grid;gap:12px}
.response-option{display:flex;align-items:center;gap:14px;min-height:82px;margin:0;padding:16px 20px;border:1px solid var(--frame);border-radius:14px;background:var(--white);font:500 1.35rem/1.2 var(--display);cursor:pointer;transition:border-color .25s,background .25s,transform .25s,box-shadow .25s}.response-option:hover{transform:translateY(-2px)}.response-option>span:nth-child(2){flex:1}.response-option>span:last-child{font-size:1.3rem;color:var(--accent-ink)}.response-option small{display:block;margin-top:4px;font:400 .8125rem var(--sans);color:var(--muted)}
.response-option:has(input:checked){border-color:var(--gold);background:var(--tint);box-shadow:0 0 0 1px var(--gold),0 12px 26px -16px color-mix(in srgb,var(--gold) 80%,transparent)}
.guest-count{margin-top:22px}.guest-count select{max-width:170px}.rsvp-form>.button{width:100%;margin-top:24px}
.rsvp-confirmation{margin:24px 0;padding:28px 24px;border:1px solid var(--line);border-radius:16px;background:var(--tint)}.rsvp-confirmation h3{margin-bottom:10px;font-size:1.6rem}.rsvp-confirmation p{font:400 1.1rem var(--display)}
.confirmation-mark{position:relative;display:grid;place-items:center;width:56px;height:56px;margin:0 auto 14px;border-radius:50%;background:var(--green);color:var(--on-primary,#fff);font-size:1.4rem;box-shadow:0 0 0 6px color-mix(in srgb,var(--green) 15%,transparent)}
.change-rsvp summary{cursor:pointer;text-decoration:underline;text-underline-offset:4px}
.burst{position:absolute;left:50%;top:50%}.burst i{position:absolute;width:9px;height:9px;margin:-4.5px;border-radius:50% 50% 0 50%;background:var(--gold);opacity:0}.burst i.alt{width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--green)}
.invitation-footer{position:relative;z-index:1;padding:36px 0 10px;text-align:center}.invitation-footer svg{width:18px;height:18px}.invitation-footer p{margin:10px 0 0;font:500 1.15rem var(--display)}.invitation-footer p span{display:block;font:400 1.9rem/1.3 var(--script);color:var(--accent-ink)}

/* Opening intros are only shown once intro.js has marked the page with .js. */
.intro-stage,.ambient{display:none}
.js:not(.skip-intro) .has-intro:not(.revealed){overflow:hidden}
.js:not(.skip-intro) .intro-stage{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:24px;text-align:center;cursor:pointer;background:radial-gradient(ellipse 60% 50% at 50% 50%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%)}
.intro-to{max-width:26ch;margin:0;font:italic 400 1.6rem/1.25 var(--display);overflow-wrap:anywhere}.intro-to small{display:block;margin-bottom:6px;font:600 .6875rem/1.4 var(--sans);font-style:normal;letter-spacing:.3em;text-transform:uppercase;color:var(--muted)}
.intro-hint{margin:0;font-size:.6875rem;letter-spacing:.28em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 78%,var(--paper))}

/* Palace doors: cream paper doors in the card's arch, framed by its florals and sealed with the couple's monogram. */
.js:not(.skip-intro) .doors-stage{gap:16px;overflow:hidden}.doors-stage>:not(.intro-flora){position:relative;z-index:1}
.intro-flora{position:absolute;z-index:0;height:auto;pointer-events:none;user-select:none}.intro-flora.top{top:max(-2%,-16px);left:max(-7%,-24px);width:min(44vw,340px);transform-origin:0 0}.intro-flora.bottom{right:max(-7%,-24px);bottom:max(-2%,-16px);width:min(44vw,340px);transform-origin:100% 100%}
@media(max-width:360px),(max-height:680px){.intro-flora.top,.intro-flora.bottom{width:min(34vw,240px)}.doors-stage .intro-button{padding:0 22px;letter-spacing:.16em}}.doors-stage .intro-button{white-space:nowrap}
.intro-opening{margin:0 0 -4px;font:400 clamp(1.15rem,4.6vw,1.45rem)/1.6 var(--arabic);color:var(--accent-ink)}
.doors-stage .intro-to{max-width:min(84vw,420px);font:400 clamp(1.7rem,8.4vw,2.6rem)/1.15 var(--script);color:var(--ink)}.doors-stage .intro-to small{margin-bottom:10px}
.intro-rule{display:flex;align-items:center;gap:10px;margin-top:-6px}.intro-rule::before,.intro-rule::after{content:'';width:54px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.intro-rule::after{transform:scaleX(-1)}.intro-rule i{width:6px;height:6px;border:1px solid var(--gold);transform:rotate(45deg)}
.doorway{position:relative;width:min(56vw,240px,30vh);aspect-ratio:1/1.58;margin:14px 0 6px;perspective:1300px;border-radius:50% 50% 3px 3px/31.6% 31.6% 3px 3px;box-shadow:0 0 0 6px var(--white),0 0 0 7px color-mix(in srgb,var(--gold) 75%,var(--white)),0 0 0 13px color-mix(in srgb,var(--white) 55%,transparent),0 0 0 14px color-mix(in srgb,var(--gold) 30%,transparent),0 40px 60px -30px color-mix(in srgb,var(--green) 50%,transparent)}
.doorway::before{content:'';position:absolute;z-index:3;left:50%;top:-19px;width:8px;height:8px;margin-left:-5px;border:1px solid color-mix(in srgb,var(--gold) 75%,var(--white));background:var(--white);transform:rotate(45deg)}
.doorway-glow{position:absolute;inset:0;border-radius:inherit;background:radial-gradient(ellipse 70% 60% at 50% 55%,#fffdf8,color-mix(in srgb,var(--white) 82%,var(--gold)) 72%,color-mix(in srgb,var(--white) 62%,var(--gold)))}
.door{position:absolute;top:0;bottom:0;width:50%;background:linear-gradient(90deg,color-mix(in srgb,var(--white) 84%,var(--gold)),var(--white) 45%,color-mix(in srgb,var(--white) 90%,var(--green)));box-shadow:inset -1px 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}.door.right{background:linear-gradient(270deg,color-mix(in srgb,var(--white) 84%,var(--gold)),var(--white) 45%,color-mix(in srgb,var(--white) 90%,var(--green)));box-shadow:inset 1px 0 0 color-mix(in srgb,var(--gold) 45%,transparent)}
.door::after{content:'';position:absolute;inset:0;background:color-mix(in srgb,var(--green) 62%,var(--white));-webkit-mask:url(../images/door-panel-mask.png) 50% 100%/100% 100% no-repeat;mask:url(../images/door-panel-mask.png) 50% 100%/100% 100% no-repeat;opacity:.9;pointer-events:none}.door.right::after{scale:-1 1}
.door.left{left:0;transform-origin:0 50%;border-radius:100% 0 0 3px/31.6% 0 0 3px}.door.right{right:0;transform-origin:100% 50%;border-radius:0 100% 3px 0/0 31.6% 3px 0}
.door::before{content:'';position:absolute;border:1px solid color-mix(in srgb,var(--gold) 70%,transparent)}.door.left::before{inset:12px 6px 12px 12px;border-right:0;border-radius:100% 0 0 0/28% 0 0 0}.door.right::before{inset:12px 12px 12px 6px;border-left:0;border-radius:0 100% 0 0/0 28% 0 0}
.door-light{position:absolute;z-index:2;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:linear-gradient(180deg,transparent,#fffdf6 10%,#fffdf6 88%,transparent);box-shadow:0 0 10px 2px color-mix(in srgb,var(--gold) 40%,transparent);pointer-events:none}
.door-seal{position:absolute;z-index:3;left:50%;top:57%;display:flex;align-items:center;justify-content:center;gap:.08em;width:62px;height:62px;padding-left:.08em;transform:translate(-50%,-50%);border-radius:49% 51% 47% 53%/52% 47% 53% 48%;font:500 1.2rem/1 var(--display);letter-spacing:.02em;color:color-mix(in srgb,var(--gold) 45%,#fff);background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--green) 72%,#fff),var(--green) 55%,color-mix(in srgb,var(--green) 72%,#000));box-shadow:inset 0 0 0 4px color-mix(in srgb,var(--green) 82%,#fff),inset 0 0 0 5px color-mix(in srgb,var(--gold) 65%,transparent),0 8px 16px -6px color-mix(in srgb,var(--green) 75%,transparent)}
.door-seal em,.envelope-seal em{font-size:.78em;color:inherit}
.intro-date{margin:2px 0 0;font:600 .6875rem/1.4 var(--sans);letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}
.intro-button{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 30px;border:1px solid var(--frame);border-radius:999px;background:var(--white);color:var(--ink);font:600 .75rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;box-shadow:0 14px 30px -18px color-mix(in srgb,var(--ink) 60%,transparent);cursor:pointer}.intro-button:hover{background:var(--tint)}.intro-button span{font-size:1rem;letter-spacing:0}.intro-button::after{content:'';position:absolute;inset:-1px;border:1px solid var(--gold);border-radius:inherit;opacity:0;pointer-events:none}

/* Envelope (alternative intro) */
.envelope{position:relative;width:min(84vw,360px);aspect-ratio:3/2;perspective:1400px;filter:drop-shadow(0 24px 30px color-mix(in srgb,var(--ink) 22%,transparent))}.envelope-back,.envelope-pocket,.envelope-flap{position:absolute;inset:0;border-radius:6px}.envelope-back{z-index:1;background:color-mix(in srgb,var(--green) 78%,#000)}
.envelope-letter{position:absolute;left:6%;right:6%;top:7%;height:88%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;padding-top:9%;background:var(--white);border:1px solid var(--line);border-radius:3px;color:var(--ink)}.envelope-letter span{font:1.7rem var(--display)}.envelope-letter em{font-size:.7em;color:var(--accent-ink)}.envelope-letter small{font-size:.625rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.envelope-pocket{z-index:3;background:linear-gradient(160deg,color-mix(in srgb,var(--green) 90%,#fff),var(--green));clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}.envelope-flap{z-index:4;background:linear-gradient(180deg,color-mix(in srgb,var(--green) 80%,#fff),color-mix(in srgb,var(--green) 92%,#000));clip-path:polygon(0 0,100% 0,50% 60%);transform-origin:50% 0;border-radius:6px 6px 0 0}
.envelope-botanicals{position:absolute;z-index:4;bottom:-14px;right:-22px;width:62%;height:auto;pointer-events:none;transform:rotate(-10deg);filter:drop-shadow(0 3px 3px #0001)}
.envelope-seal{position:absolute;left:50%;top:58%;z-index:5;display:flex;align-items:center;justify-content:center;width:78px;height:78px;padding:0;border:0;border-radius:50%;transform:translate(-50%,-50%);font:600 1.45rem var(--display);color:color-mix(in srgb,var(--gold) 40%,#000);background:radial-gradient(circle at 34% 30%,color-mix(in srgb,var(--gold) 55%,#fff),var(--gold) 52%,color-mix(in srgb,var(--gold) 70%,#000));box-shadow:inset 0 0 0 5px color-mix(in srgb,var(--gold) 85%,#fff),inset 0 0 0 6px color-mix(in srgb,var(--gold) 60%,#000),0 6px 14px #0004}

@media(min-width:900px){.lantern.l1{--w:58px;top:60px;left:-22%}.lantern.l2{--w:50px;top:20px;right:-20%}.lantern.l3{--w:32px;top:-20px;right:-6%}}
.ambient i.petal.p1{background-image:url(../images/petal-1.webp)}.ambient i.petal.p2{background-image:url(../images/petal-2.webp)}.ambient i.petal.p3{background-image:url(../images/petal-3.webp)}.ambient i.petal.p4{background-image:url(../images/petal-4.webp)}
@media(max-width:600px){.invitation-shell{padding-top:28px}.card-inner{padding:36px 22px 28px}.date-block{gap:10px}.date-day{font-size:3.2rem}.countdown{gap:6px}.countdown>div{min-width:60px}.rsvp-section{padding:32px 18px}.response-option{padding:16px}.rsvp-section h2{font-size:1.85rem}.lantern.l1{--w:42px;left:0}.lantern.l2{--w:34px;right:1%}.lantern.l3{display:none}}

@media(prefers-reduced-motion:no-preference){
.invitation-body:not(.animated) .invitation-card{animation:arrive .9s var(--ease) both}
.animated .lattice-glint{display:block;opacity:.32;-webkit-mask:radial-gradient(circle closest-side,#000,transparent) 0 0/70vmax 70vmax no-repeat;mask:radial-gradient(circle closest-side,#000,transparent) 0 0/70vmax 70vmax no-repeat;animation:glint 22s ease-in-out infinite alternate}
.ambient{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}.ambient.petals-front{z-index:6}
.ambient i{position:absolute;top:100%;left:var(--x);width:var(--s);height:var(--s);border-radius:50%;background:radial-gradient(circle,#fffbe6 0,var(--sheen) 35%,transparent 70%);opacity:0;animation:mote var(--t) linear var(--delay) infinite}
.ambient i.petal{top:-4%;border-radius:0;background:50%/contain no-repeat;filter:drop-shadow(0 2px 2px color-mix(in srgb,var(--ink) 16%,transparent));animation:petal var(--t) linear var(--delay) infinite}
.animated .lantern{animation:swing var(--sw,6s) ease-in-out var(--sd,0s) infinite alternate}.lantern.l2{--sw:7.5s;--sd:-2s}.lantern.l3{--sw:5.2s;--sd:-4s}
.animated .lantern .flame{animation:flicker 2.6s ease-in-out infinite}.animated .lantern .halo{animation:halo 3.4s ease-in-out infinite}
.js .animated:not(.revealed) .reveal,.js .animated:not(.revealed) .lanterns{opacity:0}
.js .animated:not(.has-intro):not(.revealed) .reveal{animation:failsafe 0s 8s forwards}
.animated.revealed .reveal{animation:rise 1.1s var(--ease) var(--d,0s) both}
.animated.revealed .invitation-card.reveal{animation:card-in 1.5s var(--ease) both}
.animated.revealed .lanterns{animation:lanterns-drop 1.8s cubic-bezier(.3,1.35,.5,1) .2s both}
.animated.revealed .card-inner::after{animation:gleam 14s ease-in-out 1.6s infinite}
.animated.revealed .arch-lattice{animation:fade-in 3s ease .6s both}
.animated.revealed .wisteria{animation:fade-in 2.2s ease .9s both,vine-sway 10s ease-in-out 3.1s infinite}
.animated .opening-line{background:linear-gradient(100deg,var(--accent-ink) 40%,var(--sheen) 50%,var(--accent-ink) 60%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.animated.revealed .opening-line.reveal{animation:rise 1.4s var(--ease) var(--d,0s) both,sheen 8s ease-in-out calc(var(--d,0s) + 1.5s) infinite}
.animated .couple .name{background:linear-gradient(110deg,var(--ink) 40%,var(--sheen) 50%,var(--ink) 60%) 100% 0/300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;-webkit-mask:linear-gradient(90deg,#000 42%,transparent 58%) 0 0/260% 100% no-repeat;mask:linear-gradient(90deg,#000 42%,transparent 58%) 0 0/260% 100% no-repeat}
.animated.revealed .couple .name.reveal{animation:write 2s cubic-bezier(.5,.1,.3,1) var(--d,0s) both,sheen 10s ease-in-out calc(var(--d,0s) + 2.4s) infinite}
.animated.revealed .couple .amp.reveal{animation:rise 1.1s var(--ease) var(--d,0s) both,heartbeat 4.5s ease-in-out calc(var(--d,0s) + 1.5s) infinite}
.animated.revealed .couple .amp::before,.animated.revealed .couple .amp::after{animation:grow 1.4s var(--ease) var(--d,0s) both}
.js .animated .divider .line{stroke-dasharray:1;stroke-dashoffset:1}.animated.revealed .divider .line{animation:draw 1.6s var(--ease) calc(var(--d,0s) + .2s) forwards}.animated.revealed .divider .star{animation:star-in 1.2s cubic-bezier(.3,1.5,.5,1) var(--d,0s) both,spin 30s linear calc(var(--d,0s) + 1.2s) infinite}
.animated.revealed .occasion.reveal .date-side:first-child{animation:slide-left 1.2s var(--ease) var(--d,0s) both}.animated.revealed .occasion.reveal .date-side:last-child{animation:slide-right 1.2s var(--ease) var(--d,0s) both}.animated.revealed .occasion.reveal .date-day{animation:pop 1s cubic-bezier(.3,1.5,.5,1) calc(var(--d,0s) + .15s) both}
.animated.revealed .botanical-crown img{animation:bloom 1.8s var(--ease) .3s both,botanical-sway 9s ease-in-out 2.1s 3}.animated.revealed .botanical-signoff img{animation:botanical-sway 11s ease-in-out 2 reverse}
.countdown .tick{animation:tick .45s var(--ease)}
.js .animated .scroll-reveal{opacity:0;transform:translateY(30px);transition:opacity 1s ease,transform 1s var(--ease)}.js .animated .scroll-reveal.in-view{opacity:1;transform:none}
.response-option:has(input:checked)>span:last-child{animation:pop .5s cubic-bezier(.3,1.6,.5,1)}
.doorway{animation:float 6s ease-in-out infinite}.door.left{animation:peek-left 4.5s ease-in-out 1.2s infinite}.door.right{animation:peek-right 4.5s ease-in-out 1.2s infinite}.door-light{animation:light-peek 4.5s ease-in-out 1.2s infinite}.intro-button::after{animation:ring 2.4s ease-out infinite}.intro-button span{animation:nudge 1.6s ease-in-out infinite}.intro-hint{animation:breathe 2.6s ease-in-out infinite}
.door-seal{animation:seal-pulse 3s ease-in-out infinite}.intro-flora.top{animation:floral-top-sway 7.5s ease-in-out infinite}.intro-flora.bottom{animation:floral-bottom-sway 8.5s ease-in-out infinite}
.doors-stage.opening .door-seal{animation:seal-break .45s ease-in forwards}.doors-stage.opening .door-light{animation:light-flare .8s .25s ease forwards}.doors-stage.opening .door.left{animation:door-left 1.2s .3s cubic-bezier(.6,0,.25,1) forwards}.doors-stage.opening .door.right{animation:door-right 1.2s .3s cubic-bezier(.6,0,.25,1) forwards}.doors-stage.opening .doorway-glow{animation:glow-flare 1.3s .45s ease forwards}.doors-stage.opening .doorway{animation:walk-in 1.05s 1.1s cubic-bezier(.55,0,.35,1) forwards}
.doors-stage.opening .intro-flora.top{animation:flora-out-top 1.2s .9s cubic-bezier(.5,0,.3,1) forwards}.doors-stage.opening .intro-flora.bottom{animation:flora-out-bottom 1.2s .9s cubic-bezier(.5,0,.3,1) forwards}.opening :is(.intro-opening,.intro-rule,.intro-date){animation:fade-out .4s ease forwards}.intro-stage.doors-stage.opening{animation:stage-out .8s 1.45s ease forwards}
.envelope{animation:float 5s ease-in-out infinite}.envelope-seal{animation:seal-pulse 2.6s ease-in-out infinite}
.envelope-stage.opening .envelope-seal{animation:seal-break .5s ease-in forwards}.envelope-stage.opening .envelope-flap{animation:flap-open .8s .3s cubic-bezier(.45,0,.25,1) forwards}.envelope-stage.opening .envelope-letter{animation:letter-rise 1s .95s var(--ease) forwards}
.opening .intro-to,.opening .intro-hint,.opening .intro-button{animation:fade-out .4s ease forwards}.intro-stage.opening{animation:stage-out .7s 2s ease forwards}
.celebrate .confirmation-mark{animation:pop .7s cubic-bezier(.3,1.6,.5,1) both}.burst i{animation:burst 1.5s cubic-bezier(.1,.7,.3,1) var(--delay,0s) forwards}
@keyframes arrive{from{opacity:0;transform:translateY(12px)}}
@keyframes rise{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@keyframes card-in{from{opacity:0;transform:translateY(40px) scale(.96)}to{opacity:1;transform:none}}
@keyframes failsafe{to{opacity:1}}
@keyframes fade-in{from{opacity:0}}
@keyframes write{from{opacity:1;-webkit-mask-position:100% 0;mask-position:100% 0}to{opacity:1;-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes sheen{0%{background-position:100% 0}35%,100%{background-position:0 0}}
@keyframes gleam{0%{opacity:1;background-position:150% 0}18%{opacity:1;background-position:-50% 0}19%,100%{opacity:0;background-position:-50% 0}}
@keyframes heartbeat{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes grow{from{width:0}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes star-in{from{opacity:0;transform:rotate(-180deg) scale(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes slide-left{from{opacity:0;transform:translateX(-24px)}}
@keyframes slide-right{from{opacity:0;transform:translateX(24px)}}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
@keyframes bloom{from{opacity:0;transform:scale(.88) translateY(10px);filter:blur(6px)}}
@keyframes vine-sway{0%,100%{transform:rotate(0)}50%{transform:rotate(1.6deg)}}
@keyframes botanical-sway{0%,100%{transform:rotate(-1deg) translateY(0)}50%{transform:rotate(1deg) translateY(-5px)}}
@keyframes lanterns-drop{from{opacity:0;transform:translateY(-90px)}to{opacity:1;transform:none}}
@keyframes swing{from{transform:rotate(-3.5deg)}to{transform:rotate(3.5deg)}}
@keyframes flicker{0%,100%{opacity:1;transform:scale(1)}20%{opacity:.82;transform:scale(.94,1.06)}45%{opacity:.95;transform:scale(1.04,.96)}70%{opacity:.78;transform:scale(.97,1.03)}}
@keyframes halo{0%,100%{opacity:.75}50%{opacity:1}}
@keyframes glint{0%{-webkit-mask-position:-10% -10%;mask-position:-10% -10%}50%{-webkit-mask-position:110% 40%;mask-position:110% 40%}100%{-webkit-mask-position:20% 110%;mask-position:20% 110%}}
@keyframes mote{0%{opacity:0;transform:translate3d(0,0,0)}12%,80%{opacity:var(--o)}100%{opacity:0;transform:translate3d(var(--drift),-112vh,0)}}
@keyframes petal{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%,85%{opacity:var(--o)}100%{opacity:0;transform:translate3d(var(--drift),112vh,0) rotate(var(--spin))}}
@keyframes tick{from{opacity:.2;transform:translateY(-40%)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes breathe{0%,100%{opacity:.45}50%{opacity:1}}
@keyframes breathe-glow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.12)}}
@keyframes peek-left{0%,62%,100%{transform:rotateY(0)}74%{transform:rotateY(-15deg)}86%{transform:rotateY(-3deg)}}
@keyframes peek-right{0%,62%,100%{transform:rotateY(0)}74%{transform:rotateY(15deg)}86%{transform:rotateY(3deg)}}
@keyframes light-peek{0%,62%,100%{width:2px;opacity:.75}74%{width:16px;opacity:1}}
@keyframes light-flare{50%{width:50px;opacity:1}to{width:140px;opacity:0}}
@keyframes ring{from{opacity:.7;transform:scale(1)}to{opacity:0;transform:scale(1.12,1.45)}}
@keyframes nudge{50%{transform:translateX(4px)}}
@keyframes door-left{to{transform:rotateY(-112deg)}}
@keyframes door-right{to{transform:rotateY(112deg)}}
@keyframes glow-flare{to{filter:brightness(1.12);box-shadow:0 0 110px 46px color-mix(in srgb,var(--white) 85%,transparent)}}
@keyframes flora-out-top{to{opacity:0;transform:translate(-18%,-14%) rotate(-6deg) scale(1.12)}}
@keyframes flora-out-bottom{to{opacity:0;transform:translate(18%,14%) rotate(6deg) scale(1.12)}}
@keyframes walk-in{to{opacity:0;transform:scale(3.4)}}
@keyframes seal-pulse{0%,100%{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.06)}}
@keyframes seal-break{to{opacity:0;transform:translate(-50%,-50%) scale(1.6) rotate(-20deg)}}
@keyframes flap-open{0%{transform:rotateX(0);z-index:4}50%{z-index:4}51%{z-index:1}to{transform:rotateX(180deg);z-index:1}}
@keyframes letter-rise{to{transform:translateY(-62%)}}
@keyframes fade-out{to{opacity:0}}
@keyframes stage-out{to{opacity:0;transform:scale(1.06)}}
@keyframes burst{0%{opacity:1;transform:rotate(var(--a)) translateY(0) scale(.3)}70%{opacity:1}to{opacity:0;transform:rotate(var(--a)) translateY(calc(var(--r) * -1)) scale(1)}}
}