/* Mandir Sunrise. invite.js draws the doors, the temple and the parchment frame as SVG; sizes in cqw follow the
   page column (.page is the container). */
:root{
  --paper:#f7ebd5; --card:#fdf6ec; --ink:#5b2615; --ink2:#86553f; --accent:#a8573a; --gold:#b9853f; --wood:#4a2a14;
  --line:rgba(185,133,63,.55);
  --name:'Bodoni Moda',Didot,'Times New Roman',serif;
  --brush:'Alex Brush','Snell Roundhand',cursive;
  --caps:'Marcellus','Cinzel',Georgia,serif;
  --serif:'Cormorant Garamond',Garamond,Georgia,serif;
  --deva:'Tiro Devanagari Hindi','Noto Serif Devanagari','Kohinoor Devanagari',serif;
  --col:480px;
  --spring:cubic-bezier(.34,1.56,.64,1);
}
*{box-sizing:border-box}
/* overflow clip, never hidden: a hidden overflow makes a scroll box and the sticky temple and paper stop sticking */
html{background:var(--wood);color:var(--ink);-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
html.locked,html.locked body{overflow:hidden;height:100%}
body{margin:0;min-height:100vh;min-height:100dvh;background:var(--wood);font-family:var(--serif);font-size:18px;line-height:1.5;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:8px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ico{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
[data-reveal="bloom"]{transform:scale(.6);filter:blur(5px)}

/* ---------- page column ---------- */
.page{position:relative;max-width:var(--col);margin:0 auto;background:var(--paper);min-height:100vh;min-height:100dvh;overflow-x:clip;container-type:inline-size;
  padding-bottom:env(safe-area-inset-bottom);box-shadow:0 0 80px rgba(0,0,0,.35)}
.paper{position:absolute;inset:0;z-index:0;pointer-events:none}
/* The same card twice: card.webp behind the page, and frame.webp (its arch cut out) in front, so text scrolls behind
   the arch and never across its gold lines. invite.js fades the front one in as the temple fades out.
   Each is the 1024×1536 painting as a border image: the arch top (300px of it), the chhatris (380) and the vines (150
   a side) keep their shape at the column's width, and only the plain middle stretches to the screen's height. The
   3cqw outset pushes the outer vines past the column's edge, which leaves more room inside the arch. */
.frame{z-index:3;opacity:0}
.card-art{position:sticky;top:0;height:100vh;height:100svh;border-style:solid;border-width:29.3cqw 14.65cqw 37.1cqw;border-image-slice:300 150 380 fill;border-image-repeat:stretch;border-image-outset:0 3cqw}
.scene,.art{display:block;width:100%;height:100%;object-fit:cover}
.page>section,.page>footer{position:relative;z-index:1}
section{padding:40px 15cqw;text-align:center}
.kick{font-family:var(--caps);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin:0}
.orn{display:block;width:160px;height:20px;margin:14px auto}
.sh{margin:0 auto 22px}
.sh h2{font:italic 400 clamp(30px,8.5cqw,40px)/1.1 var(--name);color:var(--ink);margin:6px 0 0}
.sh .orn{margin-bottom:0}
.linkbtn{background:none;border:0;padding:10px;font:italic 16px var(--serif);color:var(--ink2);text-decoration:underline;text-underline-offset:4px;cursor:pointer}

/* ---------- buttons ---------- */
.btn,.pill{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;text-decoration:none;font-family:var(--caps);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:9px 15px;font-size:12px;letter-spacing:.12em;color:var(--ink);background:#fff;border:1px solid var(--line)}
.btn{padding:15px 24px;font-size:13.5px;letter-spacing:.14em;color:#fdf6ec;background:var(--accent);border:0;box-shadow:0 8px 20px rgba(120,50,20,.25)}
.pill svg,.btn svg{width:16px;height:16px;flex:0 0 auto}
@media (hover:hover){.pill:hover,.btn:hover{transform:translateY(-2px)}}
.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,236,190,.5) 40%,transparent 70%);animation:glint .6s ease-out forwards}
@keyframes glint{from{transform:scale(.3);opacity:1}to{transform:scale(7);opacity:0}}

/* ---------- song pill: spinning record, expands to show the track ---------- */
#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:#fdf6ec;background:rgba(74,42,20,.9);box-shadow:0 0 0 1px rgba(212,165,72,.6),0 8px 22px rgba(60,25,8,.35);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);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:#2a1408 center/cover;box-shadow:inset 0 0 0 2px #2a1408,inset 0 0 0 3px rgba(212,165,72,.7);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:#fdf6ec;box-shadow:0 0 0 2px #d4a548}
#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-family:var(--caps);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:12.5px;color:#f7e0a0}
#snd .meta small{font-style:italic;font-size:13px;opacity:.85}
#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:#d4a548;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)}}
/* the host's YouTube song plays in a small visible card (shared.js), 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(212,165,72,.7),0 12px 30px -12px rgba(60,25,8,.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}

/* ---------- the temple doors ---------- */
#gate{position:fixed;inset:0;z-index:50;height:100vh;height:100dvh}
.doors{position:relative;max-width:var(--col);height:100%;margin:0 auto;perspective:1400px;perspective-origin:50% 45%}
.leaf{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;will-change:transform}
.leaf.l{left:0;transform-origin:0 50%}
.leaf.r{right:0;transform-origin:100% 50%}
.leaf .art{position:absolute;top:0;width:200%}
.leaf.l .art{left:0}
.leaf.r .art{left:-100%}
.shade{position:absolute;inset:0;opacity:0;pointer-events:none}
.leaf.l .shade{background:linear-gradient(90deg,rgba(30,12,2,.1),rgba(30,12,2,.7))}
.leaf.r .shade{background:linear-gradient(270deg,rgba(30,12,2,.1),rgba(30,12,2,.7))}
#gate.idle .leaf.l{animation:peekL 5s ease-in-out 2s infinite}
#gate.idle .leaf.r{animation:peekR 5s ease-in-out 2s infinite}
@keyframes peekL{0%,82%,100%{transform:rotateY(0)}90%{transform:rotateY(-5deg)}}
@keyframes peekR{0%,82%,100%{transform:rotateY(0)}90%{transform:rotateY(5deg)}}
.plaque{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top) + 2.5%);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;pointer-events:none}
.plaque .to{margin:0;max-width:100%;padding:5px 14px;border-radius:999px;background:rgba(74,42,20,.85);color:#f7e0a0;font:italic 600 17px/1.3 var(--serif);overflow-wrap:anywhere}
.plaque .n{margin:0;max-width:100%;padding:4px 18px 6px;border-radius:10px;background:linear-gradient(#fbf1dc,#f0dfbd);box-shadow:inset 0 0 0 1px #c9a35a,inset 0 0 0 4px #fbf1dc,inset 0 0 0 5px rgba(201,163,90,.5),0 6px 14px rgba(60,25,8,.25);
  font:italic 400 26px/1.3 var(--name);color:var(--ink);white-space:nowrap}
/* between the two painted lotus medallions, 56% down the door */
#coin{position:absolute;left:calc(50% - 52px);top:calc(56% - 52px);width:104px;height:104px;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
#coin svg{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 12px rgba(30,12,2,.5));animation:bob 3.6s ease-in-out infinite}
#coin::before,#coin::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(247,224,160,.9);animation:halo 2.6s ease-out infinite;pointer-events:none}
#coin::after{animation-delay:1.3s}
@keyframes halo{0%{transform:scale(.95);opacity:.9}100%{transform:scale(1.55);opacity:0}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hint{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 7%);width:max-content;margin:0 auto;padding:8px 18px;border-radius:999px;background:rgba(42,20,8,.7);box-shadow:inset 0 0 0 1px rgba(247,224,160,.5);
  font-family:var(--caps);font-size:12px;letter-spacing:.26em;text-transform:uppercase;color:#f7e0a0;pointer-events:none;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}

/* ---------- the temple: sticky while the guest scrolls through its 200 screens' worth of walk ---------- */
.walk{padding:0;height:200vh;height:200svh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#f8d2b4}
.zoom,.scene{position:absolute;inset:0}
.zoom{will-change:transform}
.hero-copy{position:absolute;left:11%;right:11%;top:calc(env(safe-area-inset-top) + 8.5%);display:flex;flex-direction:column;align-items:center;text-shadow:0 0 16px rgba(255,240,228,.95),0 0 4px rgba(255,240,228,.8)}
.invoc{font-family:var(--deva);font-size:clamp(13px,3.6cqw,17px);color:var(--accent);margin:0}
.hn{display:flex;flex-direction:column;align-items:center;margin:2.5cqw 0 0;font-weight:400;width:100%}
.hn-a,.hn-b{font:italic 400 15cqw/1 var(--name);color:var(--accent);max-width:100%;white-space:nowrap}
.weds{font:400 8.5cqw/1 var(--brush);color:var(--ink);margin:-.5cqw 0 .5cqw}
.hd{font-family:var(--caps);font-size:clamp(11px,2.9cqw,14px);letter-spacing:.2em;text-transform:uppercase;color:var(--ink);margin:3.5cqw 0 0}
.hc{font:italic 500 clamp(16px,4.4cqw,21px)/1.3 var(--serif);color:var(--ink);margin:1cqw 0 0}
.cue{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom) + 3.5%);width:max-content;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 20px;border:0;background:none;cursor:pointer;
  color:var(--ink);text-shadow:0 0 10px #fdf6ec,0 0 3px #fdf6ec;font-family:var(--caps);font-size:12px;letter-spacing:.24em;text-transform:uppercase}
.cue svg{width:20px;height:20px;animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.walk.still{height:auto}
.walk.still .stage{position:relative}

/* ---------- the invitation, rising as the temple fades ---------- */
.invite{z-index:2;padding:26cqw 15cqw 10cqw}
.walk:not(.still)+.invite{margin-top:-50vh;margin-top:-50svh}
.portrait{position:relative;width:min(210px,54cqw);aspect-ratio:272/342;margin:0 auto 22px}
.portrait svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.portrait .ph{position:absolute;left:2.206%;top:1.754%;width:95.588%;height:96.491%;background:#efe0c6;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.portrait .ph img{display:block;width:100%;height:100%;object-fit:cover}
.portrait.empty{display:grid;place-items:center;border:1.5px dashed var(--gold);border-radius:50% 50% 8px 8px/36% 36% 8px 8px;background:rgba(255,255,255,.4)}
.portrait.empty p{margin:0;font-family:var(--caps);font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.hosts{font-family:var(--caps);font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--gold);margin:12px 0 0}
.line{font-size:clamp(17px,4.6cqw,21px);line-height:1.45;color:var(--ink);margin:10px 0 0}
.couple{margin-top:6px}
.pp{display:flex;flex-direction:column;align-items:center}
.par{max-width:260px;margin:0 auto;font-size:15px;font-weight:600;line-height:1.35;color:var(--accent)}
.nm{max-width:100%;font:italic 400 clamp(38px,12.5cqw,58px)/1.05 var(--name);color:var(--accent);margin:6px 0 0;white-space:nowrap}
.and{font:400 clamp(28px,8cqw,38px)/1 var(--brush);color:var(--ink);margin:12px 0}
.gp{font-style:italic;color:var(--ink2);margin:24px auto 0;max-width:300px;font-size:16.5px}
.shloka{font-family:var(--deva);font-size:15.5px;line-height:1.75;color:var(--gold);margin:22px auto 0;max-width:300px}

/* ---------- save the date ---------- */
.sd{position:relative;max-width:300px;margin:0 auto;border-radius:16px;overflow:hidden;background:#fffbf4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 14px 34px rgba(120,60,20,.12)}
.sd-in{padding:34px 20px 30px;display:flex;flex-direction:column;align-items:center}
.sd .lbl{font-family:var(--caps);font-size:13px;letter-spacing:.2em;text-transform:uppercase;margin:0;color:var(--ink2)}
.sd .big{font:500 clamp(64px,18cqw,86px)/1 var(--serif);margin:8px 0;color:var(--ink)}
.sd .where{font-style:italic;margin:10px 0 0;color:var(--ink2)}
.sd canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;cursor:grab;transition:opacity .7s ease}
.sd canvas.gone{opacity:0;pointer-events:none}
.date.done .linkbtn{visibility:hidden}

/* ---------- countdown ---------- */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:2.5cqw;max-width:340px;margin:0 auto}
.cd div{aspect-ratio:4/5;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:12px;background:#fffbf4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.cd b{font:500 clamp(26px,8cqw,36px)/1 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.cd small{font-family:var(--caps);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink2);margin-top:6px}
.cd-note{margin:18px 0 0;font-size:16px;color:var(--ink2)}

/* ---------- welcome ---------- */
.welcome{padding-top:10px}
.welcome .msg{font-size:20px;line-height:1.6;font-style:italic;color:var(--ink);max-width:340px;margin:8px auto 0}

/* ---------- functions: each card under a scalloped temple arch ---------- */
.events{list-style:none;margin:0;padding:0;display:grid;gap:30px}
.ev{position:relative}
.cap{display:block;width:100%;height:58px;overflow:visible}
.ev-ic{position:absolute;top:16px;left:50%;width:46px;height:46px;margin-left:-23px;color:var(--accent)}
.ev-ic svg{width:100%;height:100%}
.ev-b{margin-top:-1px;padding:12px 20px 22px;background:var(--card);border:1px solid var(--gold);border-top:0;border-radius:0 0 14px 14px;box-shadow:0 14px 30px rgba(120,60,20,.08)}
.ev h3{font:italic 400 28px/1.15 var(--name);color:var(--accent);margin:0}
.ev-when{margin:8px 0 0;font-size:17px;color:var(--ink)}
.ev-when span{display:block;font-size:15.5px;color:var(--ink2)}
.ev-venue{margin:10px 0 0;font-size:17px;font-weight:600;line-height:1.35;color:var(--ink)}
.ev-venue span{display:block;font-weight:400;font-size:15.5px;color:var(--ink2)}
.ev-dress{margin:10px 0 0;font-size:15px;font-weight:600;color:var(--accent)}
.ev-note{margin:6px 0 0;font-size:16px;font-style:italic;color:var(--ink2)}
.ev-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.ev.big .ev-b{border-color:var(--accent)}
.ev.big .cap path{stroke:var(--accent)}

/* ---------- story / moments ---------- */
.chaps{list-style:none;margin:0;padding:0 0 0 26px;text-align:left;position:relative}
.chaps::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:1px;background:var(--gold)}
.chaps li{position:relative;margin:0 0 24px}
.chaps li:last-child{margin-bottom:0}
.chaps li::before{content:"";position:absolute;left:-22px;top:6px;width:9px;height:9px;transform:rotate(45deg);background:var(--card);box-shadow:inset 0 0 0 2px var(--accent)}
.chaps .yr{margin:0;font:400 12px var(--caps);letter-spacing:.22em;color:var(--gold)}
.chaps h3{margin:2px 0 4px;font:italic 400 23px/1.2 var(--name);color:var(--ink)}
.chaps p{margin:0;font-size:17.5px;color:var(--ink2)}
.chaps img{display:block;width:100%;max-height:240px;margin:12px 0 0;object-fit:cover;border-radius:12px;box-shadow:0 0 0 4px #fff,0 0 0 5px var(--line)}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 14px;padding:4px}
.gal button{padding:7px 7px 24px;border:0;background:#fff;cursor:zoom-in;rotate:var(--r);box-shadow:0 10px 22px rgba(90,40,10,.18)}
.gal img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover}
.box{max-width:min(94vw,560px);max-height:92vh;padding:0;border:0;border-radius:14px;background:#2a1408;overflow:visible}
.box::backdrop{background:rgba(42,20,8,.85)}
.box img{display:block;max-width:100%;max-height:92vh;border-radius:14px}
.box .x{position:absolute;top:-14px;right:-10px;width:40px;height:40px;border:0;border-radius:50%;background:var(--card);color:var(--ink);font:600 26px/1 var(--serif);cursor:pointer;box-shadow:inset 0 0 0 1px var(--line)}

/* ---------- travel / contacts ---------- */
.cards{display:grid;gap:12px;text-align:left}
.tc{display:flex;gap:14px;align-items:flex-start;background:#fffbf4;border-radius:14px;padding:16px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.tc .i{flex:0 0 42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f6e6cc;color:var(--accent)}
.tc .i svg{width:22px;height:22px}
.tc h3{font-family:var(--caps);font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:13.5px;margin:2px 0 4px;color:var(--ink)}
.tc p{margin:0;font-size:16.5px;line-height:1.45;color:var(--ink2)}
.contact{align-items:center;flex-wrap:wrap}
.contact .who{flex:1 1 130px;min-width:0}
.contact .role{font-style:italic;font-size:15px;color:var(--ink2)}
.ph{display:block;font-size:16px;letter-spacing:.04em;color:var(--ink);user-select:all;-webkit-user-select:all;margin-top:2px}
.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(--accent);color:#fdf6ec}
.contact .acts a svg{width:19px;height:19px}

/* ---------- RSVP ---------- */
.by-top{margin:-8px 0 18px;font-size:16px;color:var(--ink2)}
.rsvp-card{background:#fffbf4;border-radius:18px;padding:22px 18px;text-align:left;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),0 14px 34px rgba(120,60,20,.1)}
.fld{display:block;margin:0 0 16px}
.fld>span,.rsvp-card legend{display:block;font-family:var(--caps);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);margin-bottom:6px;padding:0}
.fld input,.fld select,.fld textarea{width:100%;font:17px var(--serif);color:var(--ink);background:#fffaf2;border:1px solid var(--line);border-radius:10px;padding:11px 14px;transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(168,87,58,.18)}
.rsvp-card fieldset{border:0;margin:0 0 16px;padding:0;min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips.two{display:grid;grid-template-columns:1fr 1fr}
.chip{position:relative;overflow:hidden;cursor:pointer;-webkit-tap-highlight-color:transparent}
.chip input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;justify-content:center;text-align:center;height:100%;padding:9px 14px;border-radius:999px;font-size:16px;line-height:1.2;background:#fffaf2;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink2);transition:background .25s,color .25s,transform .35s var(--spring)}
.chips.two .chip span{border-radius:12px;padding:12px 10px;font-weight:600}
.chip input:checked+span{background:var(--accent);color:#fdf6ec;box-shadow:none}
.chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.chip:active span{transform:scale(.94)}
.rsvp-card .btn{width:100%;margin-top:4px}
.rsvp-err{margin:0 0 8px;color:#b4364f;font:600 17px/1.4 var(--serif);text-align:center}
.thanks{text-align:center}
.ty-ic{width:80px;height:80px}
.ty{font:italic 400 34px/1.2 var(--name);color:var(--accent);margin:8px 0 0}
.thanks p{color:var(--ink2);margin:8px 0 0}
.thanks .btn{margin-top:18px}

/* ---------- footer ---------- */
footer{padding:30px 15cqw calc(34cqw + env(safe-area-inset-bottom));text-align:center}
.bless{font-size:18px;font-style:italic;color:var(--ink);margin:0}
.sig{font:italic 400 clamp(30px,9cqw,42px)/1.15 var(--name);color:var(--accent);margin:8px 0 0;overflow-wrap:anywhere}
.fam{font-size:16px;color:var(--ink2);margin:4px 0 0}
.hash{font-family:var(--caps);font-size:13px;letter-spacing:.14em;color:var(--gold);margin:14px 0 0;overflow-wrap:anywhere}
footer .pill{margin-top:22px}
.made{display:inline-block;margin-top:18px;font:400 11px var(--caps);letter-spacing:.18em;text-transform:uppercase;color:var(--ink2);text-decoration:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01s!important;transition-delay:0s!important}
}