/* Rose Haveli. Fixed colours (no palettes): rose walls, maroon type, old gold. */
:root{
  --rose:#e7b3b9; --rose2:#d9969f; --rose3:#b9707d;
  --maroon:#6b1d3a; --maroon2:#8a2e4f;
  --ink:#3a2320; --ink2:#5a3b36;
  --gold:#c99a4b; --gold-ink:#8a5d14;
  --cream:#fff8f2; --card:rgba(255,249,243,.95); --line:rgba(201,154,75,.6);
  --caps:'Cinzel','Trajan Pro',Georgia,serif;
  --serif:'Cormorant Garamond',Garamond,Georgia,serif;
  --script:'Pinyon Script','Snell Roundhand',cursive;
  --deva:'Tiro Devanagari Hindi','Noto Serif Devanagari','Kohinoor Devanagari',serif;
  --col:480px;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --halo:0 0 2px rgba(255,248,242,.95),0 0 12px rgba(255,248,242,.9),0 0 22px rgba(255,248,242,.7);
}
*{box-sizing:border-box}
html{background:#ecd3cf;color:var(--ink);-webkit-text-size-adjust:100%;overflow-x:clip}
html.locked,html.locked body{overflow:hidden;height:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:radial-gradient(120% 80% at 50% 0%,#f6e3dc,#e2c0bd);font-family:var(--serif);font-size:18px;font-weight:500;line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--maroon2);outline-offset:3px;border-radius:10px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
svg{display:block}

/* ---------- scene layers: a fixed 400x860 stage scaled to cover the column ---------- */
.layer{position:fixed;top:0;bottom:0;left:50%;width:min(100%,var(--col));transform:translateX(-50%);overflow:hidden}
.stage{position:absolute;left:50%;top:50%;width:max(100%,calc(100vh*400/860));width:max(100%,calc(100lvh*400/860));aspect-ratio:400/860;transform:translate(-50%,-50%)}
.zoom{position:absolute;inset:0;transform-origin:50% 56.7%}
.stage svg.full{position:absolute;inset:0;width:100%;height:100%}
.bit{position:absolute;will-change:transform}
#scene{z-index:0}
#scene .zoom{transform:scale(1.22);transition:transform 2.4s cubic-bezier(.2,.7,.1,1)}
html.through #scene .zoom,html:not(.locked) #scene .zoom{transform:none}
.sky{position:absolute;inset:0;background:radial-gradient(60% 30% at 50% 18%,#fff4ea,rgba(255,244,234,0)),linear-gradient(#f4c9cc 0%,#f8d9cf 30%,#f6e6dc 52%,#d5e7e9 70%,#b6d8de 82%)}
.clouds{animation:drift 26s ease-in-out infinite alternate}
.clouds.b{animation-duration:34s;animation-direction:alternate-reverse}
@keyframes drift{from{transform:translateX(-4%)}to{transform:translateX(4%)}}
.swing{left:61%;top:53.6%;width:20%;height:21%;transform-origin:50% 0;animation:swing 4.6s ease-in-out infinite alternate}
@keyframes swing{from{transform:rotate(3.5deg)}to{transform:rotate(-3.5deg)}}
.swans{left:26%;top:79.4%;width:17.5%;animation:bob 3.2s ease-in-out infinite alternate}
@keyframes bob{to{transform:translateY(5%) rotate(-1deg)}}
.flame{width:1.6%;height:1.6%;margin:-1.4% 0 0 -.8%;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff6c8,#ffc43d 45%,#ff7a1a 75%,rgba(255,90,20,0));transform-origin:50% 100%;animation:flick .5s ease-in-out infinite alternate;box-shadow:0 0 12px 5px rgba(255,180,70,.45)}
@keyframes flick{to{transform:scale(.82,1.12) rotate(4deg)}}
.bfly{width:5%;left:20%;top:62%;animation:fly 16s ease-in-out infinite}
.bfly.b{left:70%;top:46%;animation-duration:19s;animation-delay:-7s}
.bfly svg{animation:flap .28s ease-in-out infinite alternate;transform-origin:50% 50%}
@keyframes flap{to{transform:scaleX(.25)}}
@keyframes fly{0%{transform:translate(0,0)}25%{transform:translate(260%,-180%) rotate(8deg)}50%{transform:translate(520%,40%)}75%{transform:translate(160%,220%) rotate(-10deg)}100%{transform:translate(0,0)}}

/* ---------- door ---------- */
#door{z-index:50;cursor:pointer;-webkit-tap-highlight-color:transparent}
.skip #door{display:none}
#door .zoom{transition:transform 1.9s cubic-bezier(.55,0,.25,1),opacity 1.3s ease .6s}
html.through #door .zoom{transform:scale(3.6);opacity:0}
#leaves{position:absolute;left:27.5%;top:23.837%;width:45%;height:65.93%;perspective:900px;perspective-origin:50% 45%}
.leaf{position:absolute;top:0;width:50%;height:100%;transition:transform 1.7s cubic-bezier(.6,.02,.25,1);will-change:transform}
.leaf.l{left:0;transform-origin:0 50%}
.leaf.r{right:0;transform-origin:100% 50%}
.leaf svg{width:100%;height:100%}
.leaf::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(60,15,30,.0),rgba(60,15,30,.35));opacity:0;transition:opacity 1.4s}
.leaf.r::after{transform:scaleX(-1)}
html.opening .leaf.l{transform:rotateY(-112deg)}
html.opening .leaf.r{transform:rotateY(112deg)}
html.opening .leaf::after{opacity:1}
#door:not(.used) #leaves{animation:knock 3.4s ease-in-out 2.8s infinite}
@keyframes knock{0%,86%,100%{transform:none}90%{transform:translateX(-.6%) rotate(-.4deg)}94%{transform:translateX(.6%) rotate(.4deg)}}
.garland{width:10%;top:-1%;transform-origin:50% 0;animation:sway 3.8s ease-in-out infinite alternate}
.garland.l{left:1%}.garland.r{right:1%;animation-delay:-1.9s}
@keyframes sway{from{transform:rotate(2.5deg)}to{transform:rotate(-2.5deg)}}
.grow{transform:scale(0);transform-box:fill-box;transform-origin:center;animation:pop .7s var(--spring) forwards;animation-delay:var(--d,0s)}
@keyframes pop{to{transform:none}}
.hint{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 18px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;padding:12px 20px 12px 16px;border-radius:999px;white-space:nowrap;
  background:rgba(255,248,242,.96);color:var(--maroon);font:600 13.5px/1 var(--caps);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 0 0 1px var(--line),0 10px 26px rgba(107,29,58,.25);transition:opacity .4s}
.hint svg{width:22px;height:22px;animation:tap 1.6s ease-in-out infinite}
@keyframes tap{50%{transform:translateY(-3px) scale(.92)}}
.hint::before{content:"";position:absolute;inset:-6px;border-radius:inherit;border:1.5px solid rgba(201,154,75,.7);animation:ring 2s ease-out infinite}
@keyframes ring{from{transform:scale(.92);opacity:1}to{transform:scale(1.12);opacity:0}}
/* a guest-name link: "Dear Sharma family," above the hint */
.to{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom) + 76px);transform:translateX(-50%);max-width:90%;margin:0;padding:6px 16px;border-radius:999px;background:rgba(255,248,242,.9);
  color:var(--maroon);font:italic 600 19px/1.3 var(--serif);text-align:center;transition:opacity .4s}
html.opening .hint,html.opening .to{opacity:0}

/* ---------- song pill ---------- */
#snd{position:fixed;z-index:80;top:calc(env(safe-area-inset-top) + 12px);right:max(12px,calc((100vw - var(--col))/2 + 12px));height:48px;max-width:48px;padding:4px;border:0;border-radius:999px;cursor:pointer;
  display:flex;align-items:center;gap:10px;overflow:hidden;font-family:var(--serif);color:#fff6ef;background:rgba(107,29,58,.92);box-shadow:0 0 0 1px rgba(201,154,75,.7),0 8px 22px rgba(80,20,40,.35);
  transform:scale(0);transform-origin:100% 50%;transition:transform .5s var(--spring),max-width .6s cubic-bezier(.3,.8,.2,1),padding .6s;-webkit-tap-highlight-color:transparent}
#snd.show{transform:scale(1)}
#snd:active{transform:scale(.92)}
#snd.wide{max-width:300px;padding-right:16px}
#snd .disc{position:relative;flex:0 0 40px;height:40px;border-radius:50%;background:radial-gradient(circle,#c99a4b 0 18%,#6b1d3a 19% 46%,#2a0f1a 47%) center/cover;box-shadow:inset 0 0 0 2px #2a0f1a,inset 0 0 0 3px rgba(201,154,75,.8);animation:spin 5s linear infinite paused;transition:filter .4s}
#snd .disc::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-radial-gradient(circle,rgba(0,0,0,0) 0 3px,rgba(0,0,0,.14) 3px 4px)}
#snd .disc::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#fff6ef;box-shadow:0 0 0 2px var(--gold)}
#snd.on .disc{animation-play-state:running}
#snd:not(.on) .disc{filter:grayscale(.5) brightness(.75)}
#snd .meta{display:flex;flex-direction:column;text-align:left;line-height:1.2;white-space:nowrap;opacity:0;transition:opacity .25s}
#snd.wide .meta{opacity:1;transition-delay:.25s}
#snd .meta b{font:600 12.5px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:#ffe3b0}
#snd .meta small{font-style:italic;font-size:14px}
#snd .eq{display:flex;align-items:flex-end;gap:2px;height:16px;flex:0 0 auto;opacity:0;transition:opacity .25s}
#snd.wide .eq{opacity:1;transition-delay:.3s}
#snd .eq i{width:3px;height:100%;border-radius:2px;background:var(--gold);transform-origin:50% 100%;transform:scaleY(.25);animation:eq .8s ease-in-out infinite alternate paused}
#snd .eq i:nth-child(2){animation-delay:-.3s}#snd .eq i:nth-child(3){animation-delay:-.55s}#snd .eq i:nth-child(4){animation-delay:-.15s}
#snd.on .eq i{animation-play-state:running}
@keyframes spin{to{transform:rotate(1turn)}}
@keyframes eq{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
/* shared.js plays a YouTube song in this small card while it plays, as YouTube's embedding rules expect */
.yt-card{position:fixed;left:max(12px,calc((100vw - var(--col))/2 + 12px));bottom:calc(env(safe-area-inset-bottom) + 14px);z-index:80;width:160px;height:90px;overflow:hidden;border-radius:12px;background:#000;
  box-shadow:0 0 0 1px rgba(201,154,75,.7),0 12px 30px -12px rgba(80,20,40,.6);opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s;pointer-events:none}
.yt-card.on{opacity:1;transform:none;pointer-events:auto}
.yt-card iframe{display:block;width:160px;height:90px;border:0}
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:60;pointer-events:none}

/* ---------- page ---------- */
.page{position:relative;z-index:10;max-width:var(--col);margin:0 auto;padding-bottom:calc(env(safe-area-inset-bottom) + 30px);transition:opacity .8s}
html.locked .page{opacity:0}
section{text-align:center}

/* hero sits straight on the painted sky; a soft cream halo keeps every line readable */
.hero{position:relative;min-height:100vh;min-height:100svh;padding:calc(env(safe-area-inset-top) + 9svh) 24px 40px;display:flex;flex-direction:column;align-items:center}
.hero .halo{position:absolute;left:50%;top:4svh;width:min(100%,430px);height:66svh;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(255,247,241,.9),rgba(255,247,241,.7) 55%,rgba(255,247,241,0));pointer-events:none}
.hero>*:not(.halo){position:relative;text-shadow:var(--halo)}
.seq{opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity 1s ease var(--d,0s),transform 1.1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter 1s ease var(--d,0s)}
html.go .seq{opacity:1;transform:none;filter:none}
.skip .seq{transition:none}
.ganesh{width:46px;height:46px;color:var(--maroon2)}
.inv{margin:6px 0 0;font:20px/1.3 var(--deva);color:var(--maroon)}
.inv-en{margin:2px 0 0;font:600 13px/1.4 var(--caps);letter-spacing:.2em;text-transform:uppercase;color:var(--maroon)}
.mono{width:178px;height:178px;margin:10px 0 2px}
/* break-word, not anywhere: names wrap at the space and only split a word too long for the line on its own */
.hero .names{margin:0;padding:0 8%;font:600 clamp(24px,8.4vw,34px)/1.15 var(--caps);letter-spacing:.06em;color:var(--maroon);overflow-wrap:break-word;text-wrap:balance}
.hero .names i{font:400 1.35em/0 var(--script);color:var(--gold-ink);letter-spacing:0;vertical-align:-.12em}
.hero .tag{margin:8px 0 0;font:italic 600 21px/1.35 var(--serif);color:var(--ink)}
.cue{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 18px;border-radius:999px;background:rgba(255,248,242,.94);color:var(--maroon);font:600 12px var(--caps);letter-spacing:.2em;text-transform:uppercase;text-decoration:none;box-shadow:0 0 0 1px var(--line);text-shadow:none!important}
.cue svg{width:16px;height:16px;animation:cue 1.6s ease-in-out infinite}
@keyframes cue{50%{transform:translateY(4px)}}

/* arch-topped cream cards, echoing the doorway */
.card{position:relative;margin:0 14px 26px;padding:70px 22px 36px;background:var(--card);border-radius:50% 50% 24px 24px/150px 150px 24px 24px;box-shadow:0 0 0 1px var(--line),0 18px 44px rgba(107,29,58,.2)}
.card::before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,154,75,.5);border-radius:inherit;pointer-events:none}
.card.plain{border-radius:24px;padding-top:40px}
#events.card{padding-inline:12px}
.par,.who,.fam,.kick,.love,.hosts .line,.msg{text-wrap:balance}
input,select,.cd b{font-variant-numeric:lining-nums}
.kick{margin:0;font:600 12.5px/1.4 var(--caps);letter-spacing:.22em;text-transform:uppercase;color:var(--maroon2)}
h2{margin:6px 0 4px;font:600 30px/1.15 var(--caps);letter-spacing:.06em;color:var(--maroon);overflow-wrap:anywhere}
h2 i{font:400 40px/0 var(--script);letter-spacing:0;color:var(--gold-ink);padding:0 2px;text-transform:none}
.lead{margin:0;font-size:19px;color:var(--ink2)}
.divider{width:170px;height:30px;margin:14px auto}
.shloka{margin:0 auto 14px;max-width:30ch;font:17px/1.6 var(--deva);color:var(--maroon2)}
.big-name{margin:4px 0 0;font:600 clamp(28px,10vw,36px)/1.1 var(--caps);letter-spacing:.08em;color:var(--maroon);overflow-wrap:break-word}
.par{margin:2px 0 0;font:600 15px/1.45 var(--caps);letter-spacing:.06em;color:var(--ink2)}
.amp{margin:10px 0 4px;font:400 52px/.8 var(--script);color:var(--gold-ink)}
.hosts .gp{margin:0 auto 8px;max-width:32ch;font-style:italic;font-size:18px;color:var(--ink2)}
.hosts .who{margin:0;font:600 18px/1.4 var(--caps);letter-spacing:.04em;color:var(--ink)}
.hosts .line{margin:4px auto 0;max-width:30ch;font-style:italic;font-size:19px;color:var(--ink2)}

/* buttons */
.btn,.pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;cursor:pointer;text-decoration:none;font:600 13px/1 var(--caps);letter-spacing:.14em;text-transform:uppercase;border-radius:999px;transition:transform .35s var(--spring),box-shadow .3s;-webkit-tap-highlight-color:transparent}
.btn:active,.pill:active{transform:scale(.94)}
.pill{padding:12px 18px;background:#fff;color:var(--maroon);box-shadow:inset 0 0 0 1px var(--line),0 6px 16px rgba(107,29,58,.12)}
.pill.solid,.btn{background:linear-gradient(135deg,var(--maroon2),var(--maroon));color:#fff6ef;box-shadow:0 8px 20px rgba(107,29,58,.3),inset 0 0 0 1px rgba(255,220,170,.35)}
.btn{padding:16px 26px;font-size:14px}
.btn:disabled{opacity:.6;cursor:progress}
.pill svg,.btn svg{width:16px;height:16px;flex:0 0 auto}
.pill.sm{padding:10px 12px;font-size:11px;letter-spacing:.08em}
@media (hover:hover){.pill:hover,.btn:hover{transform:translateY(-2px)}}
.linkbtn{margin-top:14px;background:none;border:0;padding:6px;font:italic 600 17px var(--serif);color:var(--maroon2);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.glint{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,.95),rgba(255,230,200,.5) 40%,transparent 70%);animation:glint .6s ease-out forwards}
@keyframes glint{from{transform:scale(.3);opacity:1}to{transform:scale(7);opacity:0}}
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* date medallion */
.love{margin:0;font:600 17px/1.4 var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}
.medal{position:relative;width:236px;height:236px;margin:20px auto 8px;border-radius:50%;background:radial-gradient(circle,#fffaf4 58%,#f7e2d8);box-shadow:0 0 0 1px var(--line),0 0 0 9px #fff8f2,0 0 0 10px rgba(201,154,75,.55),0 14px 32px rgba(107,29,58,.2)}
.medal .in{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.medal .d{font:700 72px/1 var(--caps);color:var(--maroon)}
.medal .d sup{font-size:.34em;vertical-align:1.5em;margin-left:2px}
.medal .m{font:600 21px/1.2 var(--caps);letter-spacing:.16em;color:var(--maroon)}
.medal .y{margin-top:4px;font:600 17px/1 var(--caps);letter-spacing:.2em;color:var(--ink2)}
.medal .tba{font:600 20px/1.3 var(--caps);letter-spacing:.1em;color:var(--maroon)}
.medal canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;cursor:grab;transition:opacity .8s}
.medal canvas.gone{opacity:0;pointer-events:none}
.when{margin:12px 0 0;font:600 16px/1.5 var(--caps);letter-spacing:.1em;color:var(--ink)}
.place{margin:6px 0 2px;font:700 26px/1.2 var(--caps);letter-spacing:.1em;color:var(--maroon)}
.city{margin:0 0 16px;font-size:19px;color:var(--ink2)}
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:22px}
.cd div{padding:12px 2px 10px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.cd b{display:block;font:700 26px/1.1 var(--caps);color:var(--maroon);font-variant-numeric:tabular-nums}
.cd small{font:600 10.5px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.cd-note{margin:12px 0 0;font-style:italic;font-size:18px;color:var(--ink2)}

/* photo */
.photo{width:min(78%,300px);aspect-ratio:3/4;margin:6px auto 18px;border-radius:50% 50% 14px 14px/38% 38% 14px 14px;overflow:hidden;box-shadow:0 0 0 5px #fff,0 0 0 6px var(--gold),0 16px 34px rgba(107,29,58,.25)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.ph{display:grid;place-items:center;background:repeating-linear-gradient(135deg,#fbeee8 0 12px,#f6e1da 12px 24px);color:var(--maroon2);font:600 13px var(--caps);letter-spacing:.16em;text-transform:uppercase}
.msg{margin:0 auto;max-width:32ch;font-size:20px;line-height:1.6;color:var(--ink)}
.hash{margin:16px 0 0;font:600 22px var(--caps);letter-spacing:.06em;color:var(--maroon2);overflow-wrap:anywhere}

/* our story: a gold thread of chapters */
.chaps{list-style:none;margin:22px 0 0;padding:0 0 0 26px;text-align:left;position:relative}
.chaps::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;border-left:1.5px dashed var(--gold)}
.chaps li{position:relative;margin:0 0 22px}
.chaps li:last-child{margin-bottom:0}
.chaps li::before{content:"";position:absolute;left:-24px;top:4px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--gold),inset 0 0 0 3px #fff,inset 0 0 0 7px var(--rose2)}
.chaps .yr{margin:0;font:700 13px var(--caps);letter-spacing:.2em;color:var(--gold-ink)}
.chaps h3{margin:2px 0 4px;font:700 19px/1.25 var(--caps);letter-spacing:.05em;color:var(--maroon)}
.chaps p{margin:0;font-size:18px;color:var(--ink)}
.chaps img{display:block;width:100%;max-height:240px;margin:10px 0 0;object-fit:cover;border-radius:40% 40% 12px 12px/22% 22% 12px 12px;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold)}

/* moments: every uploaded photo in small arches; tap for full size */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:20px}
.gal button{padding:0;border:0;background:none;cursor:zoom-in;aspect-ratio:3/4;border-radius:50% 50% 10px 10px/30% 30% 10px 10px;overflow:hidden;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--gold),0 8px 18px rgba(107,29,58,.18)}
.gal img{width:100%;height:100%;object-fit:cover;display:block}
.box{max-width:min(94vw,560px);max-height:92vh;padding:0;border:0;border-radius:16px;background:#2a0f1a;overflow:visible}
.box::backdrop{background:rgba(42,15,26,.82)}
.box img{display:block;max-width:100%;max-height:92vh;border-radius:16px}
.box .x{position:absolute;top:-14px;right:-10px;width:40px;height:40px;border:0;border-radius:50%;background:var(--cream);color:var(--maroon);font:600 26px/1 var(--serif);cursor:pointer;box-shadow:0 0 0 1px var(--line)}

/* functions */
.evs{display:flex;flex-direction:column;gap:18px;margin-top:22px;text-align:left}
.ev{position:relative;border-radius:22px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),0 10px 26px rgba(107,29,58,.12)}
.ev-band{display:flex;align-items:center;gap:12px;padding:14px 16px;background:linear-gradient(90deg,color-mix(in srgb,var(--c1) 26%,#fff8f2),#fff8f2);border-bottom:1px solid color-mix(in srgb,var(--c1) 45%,#fff)}
.ev-ic{flex:0 0 50px;height:50px;border-radius:50%;display:grid;place-items:center;background:#fff;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--c1) 70%,#fff);color:color-mix(in srgb,var(--c1) 60%,#3a2320)}
.ev-ic svg{width:34px;height:34px}
.ev-hi{margin:0;font:17px/1.2 var(--deva);color:var(--maroon2)}
.ev h3{margin:2px 0 0;font:700 21px/1.15 var(--caps);letter-spacing:.06em;color:var(--maroon);overflow-wrap:anywhere}
.ev-date{margin-left:auto;text-align:center;font:700 26px/1 var(--caps);color:var(--maroon)}
.ev-date small{display:block;margin-top:3px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.ev-body{padding:14px 16px 16px}
.ev-row{display:flex;gap:10px;margin:0 0 8px;font-size:18px;line-height:1.4;color:var(--ink)}
.ev-row svg{flex:0 0 18px;height:18px;margin-top:3px;color:var(--maroon2)}
.ev-row b{font-weight:700}
.ev-row span small{display:block;font-size:16px;color:var(--ink2)}
.ev-note{margin:4px 0 12px;padding:10px 12px;border-radius:12px;background:#fdf3ec;font-style:italic;font-size:17.5px;color:var(--ink2)}
.ev-links{display:flex;flex-wrap:wrap;gap:8px}
.ev .tag{position:absolute;top:10px;right:10px;padding:4px 10px;border-radius:999px;background:var(--maroon);color:#fff6ef;font:600 10px var(--caps);letter-spacing:.14em;text-transform:uppercase}
.ev.big .ev-date{margin-top:14px}

/* travel */
.tips{margin-top:18px;text-align:left}
.tips p{margin:0 0 12px;padding:12px 14px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);font-size:18px;color:var(--ink)}
.tips p:last-child{margin-bottom:0}
.tips b{display:block;font:700 14px var(--caps);letter-spacing:.12em;text-transform:uppercase;color:var(--maroon)}

/* contacts */
/* On a narrow phone the call and WhatsApp buttons wrap under the name instead of pushing out of the card */
.contact{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:14px;margin-top:12px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);text-align:left}
.contact > div:nth-child(2){flex:1 1 130px;min-width:0}
.contact .av{flex:0 0 46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--rose);color:var(--maroon);font:700 18px var(--caps)}
.contact h3{margin:0;font:700 17px/1.2 var(--caps);letter-spacing:.04em;color:var(--maroon)}
.contact .role{display:block;font-style:italic;font-size:16px;color:var(--ink2)}
.contact .acts{margin-left:auto;display:flex;gap:6px}
.contact .acts a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--maroon);color:#fff6ef}
.contact .acts a svg{width:19px;height:19px}

/* RSVP */
form{text-align:left;margin-top:18px}
.fld{display:block;margin-bottom:14px}
.fld>span,legend{display:block;margin-bottom:6px;font:600 12.5px var(--caps);letter-spacing:.14em;text-transform:uppercase;color:var(--maroon)}
input,select,textarea{width:100%;padding:13px 14px;border:1px solid rgba(201,154,75,.75);border-radius:14px;background:#fff;font:500 18px var(--serif);color:var(--ink);outline:none;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#8a6d66}
input:focus,select:focus,textarea:focus{border-color:var(--maroon2);box-shadow:0 0 0 3px rgba(138,46,79,.15)}
fieldset{border:0;padding:0;margin:0 0 14px;transition:opacity .3s}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;pointer-events:none}
.chip span{position:relative;overflow:hidden;display:inline-block;padding:10px 15px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px rgba(201,154,75,.75);font:600 17px var(--serif);color:var(--ink);cursor:pointer;transition:background .25s,color .25s}
.chip input:checked+span{background:var(--maroon);color:#fff6ef;box-shadow:none}
.chip input:focus-visible+span{outline:2px solid var(--maroon2);outline-offset:2px}
form .btn{width:100%;margin-top:6px}
.rsvp-err{margin:0 0 8px;color:#b3261e;font:600 17px/1.4 var(--serif);text-align:center}
.by{margin:12px 0 0;text-align:center;font-style:italic;font-size:17px;color:var(--ink2)}
.thanks{text-align:center;padding-top:10px}
.thanks .script{margin:6px 0;font:400 48px/1.1 var(--script);color:var(--maroon)}
.thanks p{font-size:19px;color:var(--ink)}

footer{margin:0 14px;padding:34px 20px 20px;text-align:center;border-radius:24px;background:var(--card);box-shadow:0 0 0 1px var(--line)}
.regards{margin:0;font:400 44px/1.1 var(--script);color:var(--maroon)}
.fam{margin:6px 0 0;font:600 17px/1.5 var(--caps);letter-spacing:.06em;color:var(--ink)}
.tiny{margin:10px 0 0;font:600 12px var(--caps);letter-spacing:.2em;color:var(--ink2)}
.made{display:inline-block;margin-top:18px;font:600 12px var(--caps);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);text-decoration:none;opacity:.85}

@media (prefers-reduced-motion:reduce){
  .clouds,.swing,.swans,.flame,.bfly,.bfly svg,.garland,.hint svg,.hint::before,.cue svg,#door:not(.used) #leaves{animation:none!important}
  .grow{animation:none;transform:none}
  .seq{transition:none}
}