:root{
  /* Rajputana palette: parchment, palace maroon, antique gold, royal emerald */
  --background:40 42% 95%; --foreground:350 40% 14%; --card:38 38% 90%; --line:38 35% 76%;
  --muted-foreground:350 12% 36%;
  --maroon:350 68% 22%; --maroon-deep:350 62% 13%; --gold:38 52% 47%; --gold-light:40 62% 70%;
  --emerald:160 48% 15%; --ivory:40 60% 96%; --mbg:hsl(40 42% 95%);
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:hsl(var(--background));color:hsl(var(--foreground));font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
[hidden]{display:none!important}
/* Display: Devanagari-inflected Latin, with a shirorekha-style bar across the tops */
.font-script{font-family:"Yatra One","Cormorant Garamond",Georgia,serif;font-weight:400;text-transform:lowercase;letter-spacing:.01em}
h1.font-script,h2.font-script,h3.font-script{line-height:1.2;text-wrap:balance}
.bar{background:linear-gradient(currentColor,currentColor) 0 .38em/100% .07em no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone}
.font-serif{font-family:"Cormorant Garamond","Iowan Old Style",Georgia,serif}
.gold-h{color:hsl(var(--maroon))}
body{font-size:1.1rem}
.kicker{letter-spacing:.3em;text-transform:uppercase;font-size:.85rem;color:hsl(var(--muted-foreground))}
@media(min-width:768px){.kicker{font-size:1rem}}
.rule{display:block;width:6rem;height:1px;background:hsl(var(--maroon));margin:1.5rem auto}

/* ===== Curtain ===== */
.curtain-screen{position:fixed;inset:0;z-index:60;overflow:hidden;background:#120a10;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:clamp(2.5rem,8vh,5rem)}
.curtain-poster,.curtain-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}
@media(min-width:768px){.curtain-poster,.curtain-vid{object-position:center 60%}}
/* Artwork is portrait — contain it on wide screens so nothing important is cropped. */
@media(min-aspect-ratio:1/1){
  .curtain-poster,.curtain-vid{object-fit:contain}
}
.curtain-vid{opacity:0;transition:opacity .5s ease}
.curtain-screen.playing .curtain-vid{opacity:1}
.curtain-screen.playing .curtain-poster{opacity:0;transition:opacity .5s ease .15s}
.curtain-scrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.15) 22%,transparent 45%)}
.curtain-cta{position:relative;z-index:10;background:none;border:0;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;animation:beat 2.5s ease-in-out infinite;transition:opacity .6s ease}
@keyframes beat{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
.heart-btn{width:4rem;height:4rem;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.4)}
/* the wedding monogram, worn like a seal: tap it to open the invitation */
.seal{display:block;width:clamp(6.5rem,24vw,8.5rem);aspect-ratio:1;border-radius:50%;overflow:hidden;background:#FBF5EB;
  box-shadow:0 0 0 3px rgba(251,245,235,.9),0 0 0 5px rgba(201,164,92,.85),0 14px 34px rgba(0,0,0,.5)}
.seal img{width:100%;height:100%;object-fit:cover;display:block}
.curtain-cta:focus-visible .seal{outline:3px solid #fff;outline-offset:6px}
.cta-label{color:#fff;letter-spacing:.2em;text-transform:uppercase;font-size:1.05rem;text-shadow:0 2px 12px rgba(0,0,0,.75)}
.curtain-screen.playing .curtain-cta{opacity:0;pointer-events:none}
/* the whole overlay dissolves while the video keeps playing underneath */
.curtain-screen.dissolve{opacity:0;transition:opacity 4.5s ease-out;pointer-events:none}
.petals{position:absolute;inset:0;pointer-events:none;z-index:5;overflow:hidden}
.petals svg{position:absolute;bottom:-40px;animation:rise linear forwards}
@keyframes rise{0%{transform:translateY(0) translateX(0) scale(.5);opacity:0}
  15%{opacity:.9}85%{opacity:.9}100%{transform:translateY(-100vh) translateX(var(--dx,0)) scale(1);opacity:0}}

/* ===== Hero ===== */
main{animation:fade 1s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.hero{position:relative;overflow:hidden;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:4rem 1rem 3rem;gap:1.25rem}
.hero-kicker{letter-spacing:.3em;text-transform:uppercase;font-size:.85rem;color:hsl(var(--muted-foreground))}
.hero-names{display:flex;flex-direction:column;align-items:center}
.hero-names h1{width:fit-content;max-width:100%;font-size:clamp(2.5rem,min(11vw,7.5svh),4.4rem);color:hsl(var(--maroon));font-weight:400}

.hero-names .amp{font-size:1.5rem;font-style:italic;color:hsl(var(--gold));margin:.1rem 0}
.hero-rule{display:block;width:8rem;height:1px;background:hsl(var(--gold));margin-top:.5rem}
.hero-sub{font-size:1.05rem;color:hsl(var(--muted-foreground));letter-spacing:.02em}
.scroll-cue{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:.35rem;color:hsl(var(--muted-foreground))}
.scroll-cue span{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase}
.scroll-cue svg{animation:bob 1.5s ease-in-out infinite;stroke:hsl(var(--maroon))}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(8px)}}

/* ===== Functions ===== */
.fn-head{position:relative;padding:6rem 1.25rem 3rem;text-align:center}
.fn-head h2{font-size:3rem}
@media(min-width:768px){.fn-head h2{font-size:4.5rem}}
.fn-rail{display:flex;flex-direction:column;gap:1.5rem;padding:1rem 1.25rem 4rem}
@media(min-width:768px){
  .fn-rail{flex-direction:row;gap:2rem;overflow-x:auto;padding:0 10vw 4rem;scroll-snap-type:x mandatory;scrollbar-width:none}
  .fn-rail::-webkit-scrollbar{display:none}
}
/* Flyers carry their own text, so show them whole — no crop, no overlay */
.fn-panel{flex:none;border-radius:2px;overflow:hidden;box-shadow:0 30px 60px -20px rgba(10,0,4,.85);outline:1px solid hsl(var(--gold-light)/.8);outline-offset:8px}
.fn-panel img{display:block;width:100%;height:auto}
@media(min-width:768px){
  .fn-panel{height:85vh;scroll-snap-align:center}
  .fn-panel img{width:auto;height:100%}
}

/* ===== Palace bands + gold line-art ===== */
.hero{background:radial-gradient(ellipse at 50% 55%,hsl(var(--gold-light)/.28),transparent 60%),hsl(var(--background))}
.band-maroon,.band-emerald{--mbg:hsl(var(--maroon));position:relative;color:hsl(var(--ivory));
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='%23C9A45C' stroke-opacity='.16' stroke-width='.8'%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='32' cy='0' r='16'/%3E%3Ccircle cx='0' cy='32' r='16'/%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3C/svg%3E") center/32px 32px,hsl(var(--maroon));background-blend-mode:normal}
.band-emerald{--mbg:hsl(var(--emerald));background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='%23C9A45C' stroke-opacity='.16' stroke-width='.8'%3E%3Ccircle cx='0' cy='0' r='16'/%3E%3Ccircle cx='32' cy='0' r='16'/%3E%3Ccircle cx='0' cy='32' r='16'/%3E%3Ccircle cx='32' cy='32' r='16'/%3E%3Ccircle cx='16' cy='16' r='16'/%3E%3C/svg%3E") center/32px 32px,hsl(var(--emerald))}
.band-maroon::before,.band-emerald::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,transparent 30%,rgba(20,4,8,.45) 100%)}
.band-maroon>*,.band-emerald>*{position:relative}
.fn-rail.band-maroon::before{display:none}
.band-maroon .gold-h,.band-emerald .gold-h{color:hsl(var(--gold-light))}
.band-maroon .kicker,.band-emerald .kicker,.band-maroon p{color:hsl(var(--ivory)/.8)}
.band-maroon .rule,.band-emerald .rule{background:hsl(var(--gold-light))}
.band-emerald .gal-dots button{background:hsl(var(--ivory)/.3)}
.band-emerald .gal-dots button.on{background:hsl(var(--gold-light))}
.band-maroon .foot-compliments{margin-top:1.75rem!important;font-size:1.15rem;font-style:italic;color:hsl(var(--ivory))!important}
.foot .foot-tag{color:hsl(var(--gold-light));font-size:.85rem;font-weight:600}
.foot-tag{color:hsl(var(--gold-light))}
/* jhalar: gilded hanging fringe along the top edge of a section */
.jhalar{position:absolute!important;top:0;left:0;right:0;height:22px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='22' fill='none' stroke='%23B08A3E' stroke-width='1'%3E%3Cpath d='M0 1.5H40M0 4.5H40'/%3E%3Cpath d='M0 4.5Q10 17 20 4.5Q30 17 40 4.5'/%3E%3Cpath d='M20 4.5V11'/%3E%3Ccircle cx='20' cy='13' r='2' fill='%23B08A3E'/%3E%3Ccircle cx='10' cy='16' r='1.3' fill='%23B08A3E'/%3E%3Ccircle cx='30' cy='16' r='1.3' fill='%23B08A3E'/%3E%3C/svg%3E") repeat-x center top}
.band-maroon .jhalar,.band-emerald .jhalar{filter:brightness(1.35)}
.motif{position:absolute;pointer-events:none;color:hsl(var(--gold))}
.band-maroon .motif,.band-emerald .motif{color:hsl(var(--gold-light))}
.motif.right{transform:scaleX(-1)}
.rule{position:relative;overflow:visible}
.rule::after{content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;background:currentColor;color:inherit;
  transform:translate(-50%,-50%) rotate(45deg);background:inherit}
/* hero: names under a hanging temple bell, a slow mandala behind them */
.hero{justify-content:center;padding-top:3.25rem}
.hero-frame{position:relative;display:flex;flex-direction:column;align-items:center;gap:.6rem;width:min(100%,34rem);padding:4.5rem 1rem 1rem}
.hero-frame>svg{position:absolute;pointer-events:none}
.hero-frame .mandala{left:50%;top:52%;width:min(92vw,30rem);aspect-ratio:1;height:auto;translate:-50% -50%;color:hsl(var(--gold));opacity:.2;
  animation:spin 140s linear infinite}
@keyframes spin{to{rotate:360deg}}
.hero>.bell{position:absolute;left:50%;top:14px;width:clamp(44px,6vw,64px);height:auto;aspect-ratio:40/130;translate:-50% 0;
  color:hsl(var(--gold));opacity:.55;transform-origin:50% 0;animation:swing 3.2s ease-in-out infinite;pointer-events:none}
@keyframes swing{0%,100%{transform:rotate(5deg)}50%{transform:rotate(-5deg)}}
.hero-frame>*:not(svg){position:relative}
.hero-shubh{font-size:1.15rem;color:hsl(var(--gold));letter-spacing:.06em;text-transform:none}
.hero-frame .hero-kicker{max-width:15rem;line-height:1.6;text-wrap:balance;font-size:.72rem}
.hero-frame .hero-lotus{position:relative;width:34px;height:26px;color:hsl(var(--gold))}
.hero .skyline{z-index:0;position:absolute;left:0;right:0;bottom:0;width:100%;height:clamp(110px,22vh,200px);color:hsl(var(--gold)/.14);--mbg:hsl(var(--background))}
.hero .scroll-cue{position:relative;margin-top:.75rem}
.sparkles{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.sparkles i{position:absolute;top:-10px;width:7px;height:7px;background:hsl(var(--gold));opacity:0;rotate:45deg;
  animation:drift 11s linear infinite}
.sparkles i:nth-child(1){left:8%;animation-delay:0s}.sparkles i:nth-child(2){left:18%;animation-delay:4s;animation-duration:13s}
.sparkles i:nth-child(3){left:29%;animation-delay:7s}.sparkles i:nth-child(4){left:41%;animation-delay:2s;animation-duration:14s}
.sparkles i:nth-child(5){left:57%;animation-delay:9s}.sparkles i:nth-child(6){left:66%;animation-delay:1s;animation-duration:12s}
.sparkles i:nth-child(7){left:77%;animation-delay:5s}.sparkles i:nth-child(8){left:86%;animation-delay:8s;animation-duration:15s}
.sparkles i:nth-child(9){left:93%;animation-delay:3s}.sparkles i:nth-child(10){left:50%;animation-delay:6s;animation-duration:16s}
@keyframes drift{0%{transform:translate(0,0) scale(.6);opacity:0}10%{opacity:.7}90%{opacity:.5}
  100%{transform:translate(30px,100vh) scale(1);opacity:0}}
.hero .motif{bottom:1rem;width:clamp(140px,17vw,230px);height:clamp(140px,17vw,230px);--mbg:hsl(var(--background))}
.hero .motif.left{left:2vw}.hero .motif.right{right:2vw}
/* the peacocks give a little hop now and then, taking turns */
.hero .peacock{animation:hop 4.2s var(--ease) infinite;transform-origin:50% 100%}
.hero .peacock.right{animation-delay:2.1s}
@keyframes hop{0%,55%,100%{translate:0 0;scale:1 1}
  60%{translate:0 0;scale:1.04 .94}
  68%{translate:0 -22px;scale:.98 1.04}
  76%{translate:0 0;scale:1.05 .93}
  82%{translate:0 -8px;scale:1 1}
  88%{translate:0 0;scale:1.02 .97}}
@media(max-width:760px){.hero .motif{width:96px;height:96px;bottom:.5rem}.hero .motif.left{left:0}.hero .motif.right{right:0}}
.foot .motif{bottom:.75rem;width:clamp(70px,12vw,120px);height:clamp(70px,12vw,120px)}
.foot .motif.left{left:.75rem}.foot .motif.right{right:.75rem}
.elephants{display:flex;align-items:flex-end;justify-content:center;gap:.5rem;margin-bottom:1rem}
.elephants .motif{position:static;width:clamp(96px,24vw,140px);height:clamp(72px,18vw,104px)}
.elephants .motif.left{transform:none}
.elephants .lotus-mid{width:40px;height:30px;margin-bottom:10px}
.tl-dot svg{width:26px;height:20px;color:hsl(var(--gold-light))}

/* ===== Save the date ===== */
.savedate{position:relative;min-height:100vh;overflow:hidden;display:flex;align-items:flex-end;justify-content:center}
.sd-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 12%}
/* keep the couple in view: on phones the card sits below their faces, on wider screens beside them */
@media(max-width:899px){.savedate{min-height:0;padding-top:58vh}
  .sd-bg{height:78vh;bottom:auto}
  .sd-scrim{background:linear-gradient(to bottom,transparent 0%,transparent 35vh,hsl(var(--maroon-deep)/.9) 70vh,hsl(var(--maroon-deep)) 78vh)!important}
  .savedate{background:hsl(var(--maroon-deep))}}
@media(min-width:900px){.savedate{justify-content:flex-end;align-items:center}
  .sd-inner{padding:4rem clamp(2rem,7vw,7rem) 4rem 0;max-width:42%}
  .sd-names{font-size:clamp(2.4rem,3.6vw,3.4rem)}
  .sd-bg{object-position:50% 30%;width:62%;right:auto}
  .sd-scrim{background:linear-gradient(to right,transparent 0%,transparent 45%,hsl(var(--maroon-deep)) 62%)!important}
  .savedate{background:hsl(var(--maroon-deep))}}
.sd-scrim{position:absolute;inset:0;background:linear-gradient(to top,hsl(var(--maroon-deep)/.92) 0%,hsl(var(--maroon-deep)/.5) 45%,hsl(var(--maroon-deep)/.15) 100%)}
.sd-inner{position:relative;z-index:2;text-align:center;padding:0 1rem 6rem;display:flex;flex-direction:column;align-items:center}
.sd-kicker{color:hsl(var(--ivory));letter-spacing:.3em;text-transform:uppercase;font-size:1.05rem;margin-bottom:1rem;text-shadow:0 2px 10px rgba(0,0,0,.5)}
.sd-names{font-size:3rem;color:hsl(var(--gold-light));margin-bottom:2rem;text-shadow:0 2px 12px rgba(0,0,0,.5)}
@media(min-width:768px){.sd-names{font-size:4.5rem}}
.sd-card{position:relative;width:min(88vw,360px);aspect-ratio:4/5;max-width:100%;border-radius:180px 180px 4px 4px;overflow:hidden;user-select:none;
  box-shadow:0 30px 60px -20px rgba(40,0,20,.8),0 0 0 3px hsl(var(--gold-light));background:hsl(var(--ivory))}
.sd-card::after{content:"";position:absolute;inset:10px;border:1px solid hsl(var(--gold-light)/.9);border-radius:170px 170px 2px 2px;pointer-events:none;z-index:3}
.sd-under{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;
  background:radial-gradient(circle at 50% 40%,hsl(var(--ivory)) 0%,hsl(var(--card)) 80%)}
.sd-dow,.sd-year{font-size:.95rem;font-weight:600;letter-spacing:.45em;text-transform:uppercase;color:hsl(var(--emerald));padding-left:.45em}
.sd-day{font-size:7.5rem;line-height:1;color:hsl(var(--maroon));text-shadow:none}
.sd-month{font-size:2.4rem;line-height:1.1;color:hsl(var(--foreground));margin-bottom:.5rem}
.sd-meter{width:min(88vw,360px);height:3px;margin-top:1.25rem;background:hsl(var(--ivory)/.3);border-radius:2px;overflow:hidden}
.sd-meter span{display:block;height:100%;width:0;background:hsl(var(--gold-light));transition:width .2s}
.sd-card.done #sdCanvas{opacity:0;transition:opacity .9s ease;pointer-events:none}
.sd-card.done .sd-day{animation:pop .9s var(--ease) both}
@keyframes pop{from{transform:scale(.85);opacity:.3}to{transform:scale(1);opacity:1}}
#sdCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:grab;touch-action:none}
#sdCanvas:active{cursor:grabbing}
.sd-hint{margin-top:1rem;color:hsl(var(--ivory));font-size:.9rem;letter-spacing:.15em;text-transform:uppercase;text-shadow:0 2px 8px rgba(0,0,0,.5);animation:pulse 2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.55}}

/* ===== Timeline ===== */
.tl{min-height:100vh;background:hsl(var(--background));display:flex;flex-direction:column;align-items:center;padding:5rem 1.25rem}
.tl-head{text-align:center;margin-bottom:4rem}
.tl-title{font-size:1.1rem;font-weight:500;letter-spacing:.35em;text-transform:uppercase;color:hsl(var(--muted-foreground))}
@media(min-width:768px){.tl-title{font-size:1.25rem}}
.tl-range{font-size:2.25rem;margin-top:.75rem}
.tl-list{position:relative;width:100%;max-width:42rem}
.tl-list::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:hsl(var(--gold)/.7);transform:translateX(-50%)}
.tl-row{position:relative;display:flex;align-items:center;margin-bottom:3rem}
.tl-row.right{flex-direction:row-reverse}
.tl-text{width:calc(50% - 2rem)}
.tl-row:not(.right) .tl-text{text-align:right;padding-right:1rem}
.tl-row.right .tl-text{text-align:left;padding-left:1rem}
.tl-name{font-family:"Yatra One",Georgia,serif;font-weight:400;text-transform:lowercase;font-size:1.3rem;line-height:1.25;color:hsl(var(--maroon))}
@media(min-width:768px){.tl-name{font-size:1.35rem}}
.tl-time{font-size:.95rem;color:hsl(var(--muted-foreground));margin-top:.25rem}
.tl-when{font-weight:700;font-size:1.02rem;color:hsl(var(--foreground));letter-spacing:.01em}
.tl-dot{position:absolute;left:50%;transform:translateX(-50%);width:3rem;height:3rem;border-radius:50%;
  background:hsl(var(--maroon));border:1px solid hsl(var(--gold));display:flex;align-items:center;justify-content:center;z-index:10;
  box-shadow:0 0 0 6px hsl(var(--background));font-size:1.25rem}
.tl-tail{width:calc(50% - 2rem)}
.tl-end{display:flex;justify-content:center;padding-top:1rem}
.tl-end span{width:.8rem;height:.8rem;transform:rotate(45deg);background:hsl(var(--gold))}
.tl-foot{font-size:1.9rem;margin-top:3rem}
@media(min-width:768px){.tl-foot{font-size:2.5rem}}

/* ===== Venue ===== */
.venue{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:5rem 1.25rem;
  background:radial-gradient(ellipse at 50% 40%,hsl(var(--gold-light)/.25) 0%,hsl(var(--background)) 70%)}
.v-name{font-size:3rem;margin-top:.5rem}
@media(min-width:768px){.v-name{font-size:4.5rem}}
.v-tag{font-size:1.05rem;color:hsl(var(--muted-foreground));max-width:28rem;line-height:1.7}
.v-addr{font-size:.95rem;color:hsl(var(--muted-foreground));margin-top:.5rem}
.map-frame{margin-top:2.5rem;width:100%;max-width:42rem;border-radius:.75rem;overflow:hidden;border:1px solid hsl(var(--maroon)/.25);box-shadow:0 20px 40px -20px rgba(0,0,0,.3)}
.map-frame iframe{width:100%;height:350px;border:0;display:block}
.v-actions{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.btn-gold{display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 2rem;border-radius:2px;text-decoration:none;
  border:1px solid hsl(var(--gold));background:hsl(var(--maroon));color:hsl(var(--gold-light));font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;transition:background .3s}
.btn-gold:hover{background:hsl(var(--maroon-deep))}
.btn-gold:focus-visible,.gal-dots button:focus-visible{outline:2px solid hsl(var(--gold));outline-offset:3px}
.btn-gold.ghost{background:transparent;color:hsl(var(--maroon))}

/* ===== Gallery ===== */
.gal{padding:5rem 1.25rem;text-align:center}
.gal h2{font-size:3rem}
@media(min-width:768px){.gal h2{font-size:4.5rem}}
.gal-fan{display:flex;overflow-x:auto;gap:1rem;padding:2rem calc(50% - 140px);scroll-snap-type:x mandatory;scrollbar-width:none}
.gal-fan::-webkit-scrollbar{display:none}
@media(min-width:768px){.gal-fan{overflow:visible;justify-content:center;align-items:center;gap:1rem;padding:2rem 0;max-width:72rem;margin:0 auto}}
.gal-item{flex:none;width:280px;height:400px;border-radius:140px 140px 4px 4px;border:1px solid hsl(var(--gold-light));overflow:hidden;box-shadow:0 12px 30px -12px rgba(0,0,0,.4);
  scroll-snap-align:center;cursor:pointer;transition:width .5s var(--ease),height .5s var(--ease),margin-top .5s var(--ease),opacity .5s}
.gal-item img{width:100%;height:100%;object-fit:cover}
@media(min-width:768px){
  .gal-item{width:150px;height:230px;margin-top:75px;opacity:.75}
  .gal-item.near{width:200px;height:300px;margin-top:40px;opacity:.9}
  .gal-item.active{width:280px;height:380px;margin-top:0;opacity:1}
}
.gal-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1.5rem}
.gal-dots button{width:.5rem;height:.5rem;border-radius:999px;border:0;cursor:pointer;background:hsl(var(--maroon)/.3);transition:all .3s}
.gal-dots button.on{width:1.5rem;background:hsl(var(--maroon))}

/* ===== Footer ===== */
/* ===== Countdown ===== */
.cd{padding:4.5rem 1.25rem;text-align:center;background:radial-gradient(ellipse at 50% 30%,hsl(var(--gold-light)/.22),transparent 65%),hsl(var(--background))}
.cd h2{font-size:2.6rem}
@media(min-width:768px){.cd h2{font-size:3.5rem}}
.cd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,8.5rem));justify-content:center;gap:clamp(.5rem,2.5vw,1.5rem);margin-top:1rem}
.cd-tile{display:flex;flex-direction:column;align-items:center;gap:.35rem;padding:1.6rem .25rem 1rem;background:hsl(var(--ivory));
  border:1px solid hsl(var(--gold));border-radius:999px 999px 4px 4px;outline:1px solid hsl(var(--gold)/.35);outline-offset:-6px}
.cd-num{font-size:clamp(1.9rem,8vw,3.4rem);line-height:1;color:hsl(var(--maroon));font-variant-numeric:tabular-nums;text-transform:none}
.cd-lbl{font-size:.7rem;font-weight:600;letter-spacing:.25em;text-transform:uppercase;color:hsl(var(--muted-foreground));padding-left:.25em}
.cd-note{margin-top:1.5rem;font-size:1.05rem;font-style:italic;color:hsl(var(--muted-foreground))}

/* ===== Awaiting your presence ===== */
.fam{padding:5rem 1.25rem;text-align:center;background:radial-gradient(ellipse at 50% 20%,hsl(var(--gold-light)/.22),transparent 60%),hsl(var(--background))}
.fam h2{font-size:2.6rem}
@media(min-width:768px){.fam h2{font-size:3.5rem}}
.fam-note{max-width:34rem;margin:0 auto;font-size:1.2rem;font-style:italic;line-height:1.6;color:hsl(var(--foreground));text-wrap:balance}
.fam-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr));gap:1.5rem;max-width:62rem;margin:2.5rem auto 0}
.fam-card{container-type:inline-size;padding:1.75rem clamp(.9rem,3vw,1.5rem);background:hsl(var(--ivory));border:1px solid hsl(var(--gold));
  outline:1px solid hsl(var(--gold)/.35);outline-offset:-7px;border-radius:2px}
.fam-side{font-size:.75rem;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:hsl(var(--gold))}
.fam-name{font-size:1.9rem;color:hsl(var(--maroon));margin:.35rem 0 1rem}
.fam-list{list-style:none;display:flex;flex-direction:column;gap:.45rem;font-size:1.2rem;color:hsl(var(--foreground))}
/* each couple stays on one line: the type shrinks with the card instead of wrapping */
.fam-list li{white-space:nowrap;font-size:min(1.2rem,4.3cqi)}

/* ===== RSVP ===== */
.rsvp{margin-top:2.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem}
.rsvp-list{list-style:none;display:flex;flex-direction:column;gap:.9rem;width:min(100%,34rem)}
.rsvp-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem 1rem;flex-wrap:wrap;padding:.9rem 1.1rem;
  background:hsl(var(--ivory));border:1px solid hsl(var(--gold)/.55)}
.rsvp-who{font-size:1.15rem;text-align:left}
.rsvp-who b{font-weight:700;color:hsl(var(--maroon));font-variant-numeric:tabular-nums;letter-spacing:.03em;user-select:all}
.rsvp-actions{display:flex;gap:.5rem}
.rsvp-actions .btn-gold{padding:.55rem 1.1rem;font-size:.72rem}

.foot{position:relative;padding:5rem 1.25rem 4rem;text-align:center;overflow:hidden}
.foot h3{font-size:3rem;position:relative}
@media(min-width:768px){.foot h3{font-size:3.75rem}}
.foot p{color:hsl(var(--ivory)/.9);margin-top:.5rem;position:relative;font-size:1.15rem}
.foot-compliments{margin-top:1.75rem!important;font-size:1.15rem;font-style:italic;color:hsl(var(--ivory))!important}
.foot .foot-tag{color:hsl(var(--gold-light));font-size:.85rem;font-weight:600}
.foot-tag{letter-spacing:.2em;text-transform:uppercase;font-size:.75rem;margin-top:1rem;color:hsl(var(--maroon))}

/* ===== Signature: whisper-quiet until someone goes looking ===== */
.foot .signature{margin-top:3rem;display:inline-flex;align-items:baseline;gap:.4em;flex-wrap:wrap;justify-content:center;
  font-size:.62rem;letter-spacing:.22em;text-transform:lowercase;color:hsl(var(--ivory));opacity:.28;cursor:default;
  transition:opacity .6s var(--ease),letter-spacing .6s var(--ease);outline:none}
.sig-name{font-family:"Yatra One",Georgia,serif;font-size:1.25em;letter-spacing:.08em;
  background:linear-gradient(100deg,hsl(var(--gold-light)) 0%,#fff6dc 45%,hsl(var(--gold)) 55%,hsl(var(--gold-light)) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.sig-spark{display:inline-block;color:hsl(var(--gold-light));font-size:.9em}
.foot .signature:hover,.foot .signature:focus-visible,.foot .signature:active{opacity:1;letter-spacing:.3em}
.signature:hover .sig-name,.signature:focus .sig-name{animation:shimmer 1.6s linear infinite}
.signature:hover .sig-spark,.signature:focus .sig-spark{animation:twirl 1.6s var(--ease) infinite}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-150% 0}}
@keyframes twirl{0%{transform:rotate(0) scale(1)}50%{transform:rotate(180deg) scale(1.5)}100%{transform:rotate(360deg) scale(1)}}

/* ===== Music + confetti ===== */
.music-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:50;width:2.75rem;height:2.75rem;border-radius:50%;
  background:hsl(var(--foreground)/.85);color:hsl(var(--background));border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  backdrop-filter:blur(4px);box-shadow:0 10px 26px -12px rgba(0,0,0,.6);transition:transform .2s}
.music-btn:hover{transform:scale(1.05)}
.music-btn .ic-off{display:none}
.music-btn.muted .ic-on{display:none}
.music-btn.muted .ic-off{display:block}
.confetti-canvas{position:fixed;inset:0;z-index:70;pointer-events:none}

@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}