/* Varanasi: Kashi on Dev Deepawali. See themes/varanasi/DESIGN.md */

@font-face{font-family:"Rozha One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rozha-one-devanagari.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Rozha One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rozha-one-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/great-vibes.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-style:normal;font-weight:300 700;font-display:swap;src:url(fonts/cormorant.woff2) format("woff2")}
@font-face{font-family:"Cormorant";font-style:italic;font-weight:300 700;font-display:swap;src:url(fonts/cormorant-italic.woff2) format("woff2")}
@font-face{font-family:"Tiro Devanagari Hindi";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tiro-devanagari-hindi-devanagari.woff2) format("woff2");unicode-range:U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+25CC,U+A830-A839,U+A8E0-A8FF}
@font-face{font-family:"Tiro Devanagari Hindi";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/tiro-devanagari-hindi-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}

:root{
  /* Kashi by night: indigo sky, Ganga teal, sindoor and maroon silk, saffron and marigold, Banarasi zari gold, ghat sandstone */
  --night:#0A0F24; --night-2:#141B3A; --ganga:#0F3A4A; --teal:#1F6F78; --sindoor:#B3202A; --maroon:#6E0F1F;
  --saffron:#F28C28; --marigold:#FFB627; --zari:#D4AF37; --zari-lt:#F5DE9B; --ivory:#FFF6E5; --sand:#E9C9A0; --stone:#C79A6B;
  --ink:#2A1A12; --ink-soft:#5C4636; --astra-blue:#5AC8FA; --astra-pink:#FF4FA3;
  --display:"Rozha One",Georgia,serif; --script:"Great Vibes",cursive; --serif:"Cormorant","Cormorant Garamond",Georgia,serif; --dev:"Tiro Devanagari Hindi","Rozha One",serif;
  --gutter:clamp(18px,5vw,48px); --ease:cubic-bezier(.2,.7,.2,1);
  --cm-face:#6E0F1F; --cm-ring:#D4AF37; --cm-icon:#F5DE9B; --cm-label-bg:rgba(255,246,229,.96); --cm-label-ink:#6E0F1F; --cm-veil:rgba(10,15,36,.55); --cm-font:"Cormorant",Georgia,serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.wait body{opacity:0}
html.wait.gated body{opacity:1}
html.gated body{overflow:hidden;height:100%}
html.gated .cmenu{display:none}
body{margin:0;background:var(--night);color:var(--ink);font-family:var(--serif);font-size:19px;line-height:1.55;transition:opacity .5s;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
.kicker{font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--saffron);margin:0}
.title{font-family:var(--display);font-weight:400;font-size:clamp(34px,7vw,58px);line-height:1.08;margin:.25em 0 .2em;text-wrap:balance}
.title em{font-family:var(--script);font-style:normal;font-size:1.3em;color:var(--marigold)}
.lede{font-style:italic;font-size:clamp(19px,3.8vw,23px);margin:0 auto;max-width:34ch;text-wrap:balance}
.dev{font-family:var(--dev);margin:0;color:var(--zari-lt);letter-spacing:.06em}
.section{position:relative;padding:clamp(80px,14vw,140px) var(--gutter);text-align:center;overflow:hidden}
.wrap{position:relative;z-index:1;max-width:1080px;margin:0 auto}
.head{margin-bottom:clamp(30px,6vw,54px)}
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.rv.in{opacity:1;transform:none}

/* a diya flame drawn in CSS: it breathes and flickers */
.flame{position:absolute;width:14px;height:24px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFFDF0 0 18%,#FFE07A 30%,#FF9D2E 58%,rgba(255,80,20,.0) 74%);
  filter:drop-shadow(0 0 6px #FFB347) drop-shadow(0 0 16px rgba(255,150,40,.7));transform-origin:50% 90%;animation:flicker 1.6s ease-in-out infinite alternate}
@keyframes flicker{0%{transform:scale(1,1) rotate(-2deg)}35%{transform:scale(.92,1.08) rotate(2deg)}70%{transform:scale(1.05,.95) rotate(-1deg)}100%{transform:scale(.97,1.04) rotate(1.5deg)}}

/* ------------------------------------------------------------------ 0. gate: light the diya */
.gate{position:fixed;inset:0;z-index:100;background:#05070F;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity 1.3s var(--ease),visibility 1.3s;outline:none}
.gate-bg{position:absolute;inset:0;background:url(img/hero-v.webp) center/cover;filter:blur(10px) brightness(.18) saturate(.8);transform:scale(1.08);transition:filter 2.2s var(--ease)}
.gate.lit .gate-bg{filter:blur(4px) brightness(.55) saturate(1.1)}
.gate-text{position:relative;z-index:2;text-align:center;color:var(--ivory)}
.gate .dev{font-size:clamp(18px,5vw,24px)}
.gate .kicker{margin-top:10px;color:var(--zari-lt)}
.monogram{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:118px;height:118px;margin-top:18px;border-radius:50%;
  font-family:var(--script);font-size:44px;color:var(--zari-lt);border:1px solid rgba(212,175,55,.6);box-shadow:inset 0 0 0 5px rgba(10,15,36,.6),inset 0 0 0 6px rgba(212,175,55,.35),0 0 40px rgba(255,170,60,.18)}
.monogram i{font-family:var(--display);font-style:normal;font-size:18px;color:var(--marigold)}
.gate-diya{position:relative;z-index:2;width:min(46vw,210px);margin-top:clamp(26px,6svh,52px);animation:bob 4s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.gate-diya img{width:100%;filter:drop-shadow(0 14px 20px rgba(0,0,0,.6))}
.gate-diya .flame{z-index:2;left:47%;top:5%;width:14%;height:29%;opacity:0;transform:scale(.2);transition:opacity .5s,transform .7s var(--ease)}
.gate.lit .gate-diya .flame{opacity:1;transform:scale(1);animation:flicker 1.6s ease-in-out .6s infinite alternate}
.gate-diya::after{content:"";position:absolute;left:54%;top:22%;width:0;height:0;border-radius:50%;box-shadow:0 0 0 0 rgba(255,180,70,0);transition:box-shadow 1.4s}
.gate.lit .gate-diya::after{box-shadow:0 0 120px 70px rgba(255,170,60,.35)}
.tap{position:relative;z-index:2;margin:20px 0 0;font-family:var(--script);font-size:clamp(30px,8vw,42px);color:var(--zari-lt);animation:breath 2.4s ease-in-out infinite}
@keyframes breath{0%,100%{opacity:.5}50%{opacity:1}}
.gate.lit .tap{opacity:0;transition:opacity .5s;animation:none}
/* the light runs along the ghat: a row of diyas lights one after another */
.ghat-line{position:absolute;left:0;right:0;bottom:7svh;height:40px;z-index:2;display:flex;justify-content:space-around;padding:0 4vw}
.ghat-line i{position:relative;width:16px;height:9px;border-radius:0 0 9px 9px;background:linear-gradient(#8C4A1E,#5A2E12)}
.ghat-line i::before{content:"";position:absolute;left:4px;bottom:7px;width:8px;height:13px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFFDF0 0 18%,#FFE07A 30%,#FF9D2E 58%,rgba(255,80,20,0) 74%);box-shadow:0 0 14px 4px rgba(255,160,50,.55);opacity:0;transform:scale(.2);transition:opacity .4s,transform .5s}
.gate.lit .ghat-line i::before{opacity:1;transform:scale(1);transition-delay:calc(.9s + var(--i) * 45ms)}
html:not(.gated) .gate{opacity:0;visibility:hidden;pointer-events:none}

/* ------------------------------------------------------------------ 1. hero: the ghats on Dev Deepawali */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--night);color:var(--ivory);text-align:center;cursor:crosshair}
.hero-art{position:absolute;inset:-6% 0 0;background:url(img/hero-v.webp) center bottom/cover no-repeat;transform:translateY(var(--py,0px))}
@media (min-aspect-ratio:1/1){.hero-art{background-image:url(img/hero-w.webp)}}
/* on a phone the painting starts lower, under open night sky, so the names sit on the sky */
@media (max-aspect-ratio:1/1){.hero{background:linear-gradient(#070B1C,#0D1634 60%,var(--night))}
  .hero-art{top:11svh;-webkit-mask:linear-gradient(transparent,#000 10%);mask:linear-gradient(transparent,#000 10%)}}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(80% 32% at 50% 20%,rgba(7,11,28,.7),rgba(7,11,28,0) 100%),linear-gradient(rgba(10,15,36,.4),rgba(10,15,36,0) 38%,rgba(10,15,36,0) 72%,var(--night))}
/* twinkling diyas on the ghats */
.twinkle{position:absolute;left:0;right:0;top:44%;height:26%;z-index:5;pointer-events:none;mix-blend-mode:screen}
.twinkle i{position:absolute;width:3px;height:3px;border-radius:50%;background:#FFE6A8;box-shadow:0 0 6px 2px rgba(255,190,90,.8);animation:tw var(--d,2s) ease-in-out infinite alternate;opacity:.2}
@keyframes tw{to{opacity:1}}
/* the Dev Deepawali laser show: three soft beams sweeping the sky from the ghats */
.lasers{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}
.lasers i{position:absolute;bottom:42%;width:3px;height:120vh;transform-origin:50% 100%;opacity:.38;filter:blur(1.5px);
  background:linear-gradient(to top,rgba(90,200,250,.9),rgba(90,200,250,0) 75%);animation:beam 9s ease-in-out infinite alternate}
.lasers i:nth-child(1){left:22%;--a:-34deg;--b:-6deg}
.lasers i:nth-child(2){left:55%;--a:14deg;--b:-18deg;background:linear-gradient(to top,rgba(255,79,163,.85),rgba(255,79,163,0) 75%);animation-duration:11s}
.lasers i:nth-child(3){left:80%;--a:30deg;--b:6deg;background:linear-gradient(to top,rgba(255,182,39,.9),rgba(255,182,39,0) 75%);animation-duration:7.5s}
@keyframes beam{from{transform:rotate(var(--a))}to{transform:rotate(var(--b))}}
/* the river glints */
.river-glints{position:absolute;left:0;right:0;bottom:0;height:28%;z-index:5;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,200,110,.35) 22px 24px,transparent 24px 61px);
  -webkit-mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);mask:linear-gradient(transparent,#000 30%,#000 70%,transparent);animation:glint 3.2s linear infinite}
@keyframes glint{to{background-position:61px 0}}
/* leaf-boat diyas floating down the river */
.floaters{position:absolute;inset:0;z-index:6;pointer-events:none}
.floaters b{position:absolute;bottom:var(--y);left:-8%;width:var(--w);height:calc(var(--w)*.45);border-radius:0 0 50% 50%;background:linear-gradient(#2E6B2A,#1C4A1A);animation:drift var(--d) linear infinite;animation-delay:var(--dl)}
.floaters b::before{content:"";position:absolute;left:30%;bottom:55%;width:40%;height:120%;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFFDF0 0 18%,#FFE07A 30%,#FF9D2E 58%,rgba(255,80,20,0) 74%);box-shadow:0 0 12px 4px rgba(255,170,60,.55);animation:flicker 1.4s ease-in-out infinite alternate}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(118vw)}}
.fw{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none}
/* the ghats in front (the painting with its sky cut away): the names rise from behind them, the lasers shine from behind them */
.hero-front{position:absolute;inset:-6% 0 0;z-index:4;pointer-events:none;background:url(img/hero-v-front.webp) center bottom/cover no-repeat;transform:translateY(var(--py,0px))}
@media (min-aspect-ratio:1/1){.hero-front{background-image:url(img/hero-w-front.webp)}}
@media (max-aspect-ratio:1/1){.hero-front{top:11svh}}
.hero-text{position:absolute;z-index:3;left:0;right:0;top:max(8svh,62px);padding:0 var(--gutter);pointer-events:none;transform:translateY(64svh)}
.hero.risen .hero-text{transform:none;transition:transform 3s cubic-bezier(.22,.7,.2,1) .15s}
.hero.done .hero-text{z-index:5}   /* once risen, the words come in front of the ghats so every line reads */
.hero .dev{font-size:min(20px,2.5svh);text-shadow:0 0 12px rgba(0,0,0,.8)}
.hero .kicker{color:var(--zari-lt);margin-top:6px}
.names{font-family:var(--script);font-weight:400;font-size:min(17vw,10svh,124px);line-height:.95;margin:.1em 0;color:var(--zari-lt);
  background:linear-gradient(180deg,#FFF3C8,#F5DE9B 40%,#D4AF37 70%,#A9781D);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 18px rgba(255,170,60,.45)) drop-shadow(0 3px 2px rgba(0,0,0,.6))}
.names span{display:block;padding:0 .15em}
.names em{display:block;font-family:var(--display);font-style:normal;font-size:.28em;margin:.05em 0;-webkit-text-fill-color:var(--marigold)}
@media (min-aspect-ratio:1/1){.names span,.names em{display:inline}.names em{margin:0 .35em;vertical-align:middle}}
.hero .date{font-weight:700;font-size:min(14px,1.8svh);letter-spacing:.32em;text-transform:uppercase;margin:min(10px,1.4svh) 0 2px;color:var(--zari-lt)}
.hero .place{font-style:italic;font-size:min(21px,2.6svh);margin:0;text-shadow:0 0 10px rgba(0,0,0,.9)}
.hero .tip{margin:min(10px,1.2svh) 0 0;font-family:var(--script);font-size:min(24px,3svh);color:var(--marigold);animation:breath 2.6s ease-in-out infinite}
.cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:7;font-size:12px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;color:var(--zari-lt)}
.cue::after{content:"";display:block;width:1px;height:40px;margin:10px auto 0;background:linear-gradient(var(--zari-lt),transparent);animation:cue 2.2s ease-in-out infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0);opacity:0}40%{opacity:1}100%{transform:scaleY(1);opacity:0}}

/* ------------------------------------------------------------------ 2. the invitation in Banarasi brocade */
.invite{background:radial-gradient(120% 70% at 50% 30%,#3B0A16,#1A0610 70%,var(--night));color:var(--ivory)}
.sparks{position:absolute;inset:0;pointer-events:none}
.sparks i{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:#FFD27A;box-shadow:0 0 8px 2px rgba(255,180,70,.7);animation:rise var(--d) linear infinite;animation-delay:var(--dl);opacity:0}
@keyframes rise{0%{transform:translate(0,0);opacity:0}10%{opacity:1}100%{transform:translate(var(--dx),-110vh);opacity:0}}
.card-wrap{perspective:1600px}
.card{position:relative;width:min(92vw,64svh,560px);margin:0 auto;aspect-ratio:1024/1536;container-type:inline-size;text-align:center;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
/* the silk unfolds from the middle when the guest reaches it */
.unveil .card{clip-path:inset(0 50% 0 50%);transition:clip-path 2.4s cubic-bezier(.6,.05,.2,1) .2s}
.unveil.in .card{clip-path:inset(0 0 0 0)}
.card-frame{position:absolute;inset:0;width:100%;height:100%}
.sheen{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(105deg,transparent 30%,rgba(255,240,200,.75) 45%,transparent 60%) -150% 0/250% 100% no-repeat;opacity:0}
.unveil.in .sheen{animation:sheen 3.2s 1.8s ease-in-out forwards}
@keyframes sheen{0%{opacity:1;background-position:-150% 0}100%{opacity:0;background-position:150% 0}}
.card-inner{position:absolute;left:19%;right:19%;top:13%;bottom:13%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--ink)}
.card .dev.small{font-size:3cqw;color:var(--sindoor);margin-bottom:1cqw}
.card .dev.ganesh{color:var(--maroon);margin-bottom:.4cqw}
.card .kicker{font-size:2.3cqw;letter-spacing:.2em;margin:0 0 1.2cqw;color:var(--maroon)}
.invite-lines p{margin:0;font-style:italic;font-size:3.15cqw;line-height:1.32;color:var(--ink-soft)}
.trishul-rule{width:30cqw;margin:1.2cqw 0 .2cqw}
.trishul-rule svg{width:100%;height:auto;fill:none;stroke:var(--zari);stroke-width:1.6;stroke-linecap:round}
.person{font-family:var(--script);font-weight:400;font-size:11.5cqw;line-height:1.05;margin:.4cqw 0 0;padding:0 2cqw;color:var(--maroon)}
.fam{margin:.3cqw 0 0;font-size:2.55cqw;color:var(--ink);line-height:1.4;white-space:pre-line}
.fam b{display:block;font-weight:700;font-size:1.9cqw;letter-spacing:.2em;text-transform:uppercase;color:var(--saffron);margin-top:.4cqw}
.amp{font-family:var(--display);font-size:5cqw;line-height:1;color:var(--zari);margin:1.2cqw 0 .2cqw}
.card .intro{margin-top:2.2cqw;color:var(--sindoor)}

/* ------------------------------------------------------------------ 3. Ganga Yatra: the boat ride */
.yatra{background:linear-gradient(var(--night),#0C1A2C 12%,#0C1A2C 88%,var(--night));color:var(--ivory);padding-bottom:clamp(60px,10vw,100px)}
.yatra .title{color:var(--ivory)}.yatra .lede{color:#C9D6DE}
.hint{margin:14px 0 0;font-size:13px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--marigold)}
.voyage{position:relative;max-width:900px;margin:0 auto;height:calc(var(--n,6) * clamp(240px,34vh,320px) + 160px)}
/* the banks: ghat sandstone steps drawn in CSS, faintly lit */
.voyage::before{content:"";position:absolute;inset:0;border-radius:18px;opacity:.35;
  background:repeating-linear-gradient(0deg,rgba(199,154,107,.18) 0 2px,transparent 2px 22px)}
.river{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.river .bank{fill:none;stroke:rgba(199,154,107,.22);stroke-linecap:round}
.river .water{fill:none;stroke:url(#rv-g);stroke-linecap:round}
.river .flow{fill:none;stroke:rgba(180,230,240,.28);stroke-width:2;stroke-dasharray:6 22;animation:flow 2.4s linear infinite}
@keyframes flow{to{stroke-dashoffset:-56}}
/* the boat's wake: the stretch already sailed glows gold */
.river .route{fill:none;stroke:var(--marigold);stroke-width:3;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(255,182,39,.9));opacity:.85}
.river-diyas{position:absolute;inset:0;pointer-events:none}
.river-diyas i{position:absolute;width:6px;height:6px;margin:-3px;border-radius:50%;background:#FFE3A0;box-shadow:0 0 10px 4px rgba(255,170,60,.6);animation:tw var(--d,2s) ease-in-out infinite alternate}
.boat{position:absolute;left:0;top:0;width:clamp(42px,8vw,64px);z-index:3;pointer-events:none;transform-origin:50% 50%;filter:drop-shadow(0 10px 10px rgba(0,0,0,.6));will-change:transform}
.ghats{position:absolute;inset:0}
.ghat{all:unset;position:absolute;box-sizing:border-box;width:min(54%,330px);cursor:pointer;text-align:left;-webkit-tap-highlight-color:transparent;
  transform:translateY(-50%) scale(.94);opacity:.45;transition:opacity .8s,transform .8s var(--ease)}
.ghat.left{left:0}.ghat.right{right:0;text-align:right}
.ghat.lit{opacity:1;transform:translateY(-50%) scale(1)}
.ghat:focus-visible .plaque{outline:2px solid var(--marigold);outline-offset:4px}
/* a stack of sandstone ghat steps with the plaque on top */
.ghat .steps{height:30px;margin-top:-2px;background:repeating-linear-gradient(180deg,#C79A6B 0 7px,#A87A4E 7px 8px,#B88A5C 8px 15px,#93683F 15px 16px);
  border-radius:0 0 8px 8px;opacity:.85;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ghat .plaque{position:relative;padding:16px 18px 14px;border-radius:14px 14px 4px 4px;background:linear-gradient(160deg,#F4DFC0,#E3C397);color:var(--ink);
  box-shadow:0 0 0 1px rgba(110,15,31,.25),inset 0 0 0 4px rgba(255,246,229,.45),0 18px 30px -12px rgba(0,0,0,.6)}
.ghat .num{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--sindoor)}
.ghat h3{font-family:var(--display);font-weight:400;font-size:clamp(20px,4.6vw,28px);line-height:1.1;margin:2px 0 4px;color:var(--maroon)}
.ghat .when{font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.ghat .where{font-style:italic;font-size:16px;color:var(--ink)}
.ghat .lamp{position:absolute;top:-14px;width:22px;height:12px;border-radius:0 0 12px 12px;background:linear-gradient(#8C4A1E,#5A2E12)}
.ghat.left .lamp{right:18px}.ghat.right .lamp{left:18px}
.ghat .lamp .flame{left:5px;bottom:9px;width:12px;height:20px;opacity:0;transform:scale(.2);transition:opacity .5s,transform .6s var(--ease)}
.ghat.lit .lamp .flame{opacity:1;transform:scale(1);animation:flicker 1.6s ease-in-out .6s infinite alternate}
.ghat .more{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--sindoor)}
/* event details: a native popover, opened with a view transition where supported */
.ev-pop{width:min(92vw,420px);max-height:86svh;overflow:auto;border:0;padding:0;border-radius:24px;background:var(--ivory);color:var(--ink);text-align:center;
  box-shadow:0 0 0 1px var(--zari),0 0 0 7px var(--ivory),0 0 0 8px var(--sindoor),0 40px 80px rgba(0,0,0,.6);view-transition-name:ev-pop}
.ev-pop::backdrop{background:rgba(10,15,36,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ev-pop .pic{height:170px;background:radial-gradient(circle at 50% 60%,#FFE9B0,#F28C28 55%,#6E0F1F 100%);display:grid;place-items:center}
.ev-pop .pic img{width:130px;aspect-ratio:1;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px var(--zari),0 0 0 9px rgba(255,246,229,.6)}
.ev-pop .body{padding:22px 24px 26px}
.ev-pop h3{font-family:var(--display);font-weight:400;font-size:32px;margin:0;color:var(--maroon)}
.ev-pop .when{margin:8px 0 0;font-weight:700;font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--saffron)}
.ev-pop .where{margin:6px 0 0;font-style:italic;font-size:21px;color:var(--ink-soft)}
.ev-pop .row{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap}
.ev-pop .close{position:absolute;right:12px;top:12px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,246,229,.92);color:var(--maroon);font-size:20px;cursor:pointer}
::view-transition-old(ev-pop),::view-transition-new(ev-pop){animation-duration:.45s}

/* ------------------------------------------------------------------ 4. Kashi Vishwanath: through the gateway, the couple walks up to the golden spires */
.temple{position:relative;height:340vh;background:var(--night)}
.temple .stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;color:var(--ivory)}
.t-back{position:absolute;inset:0;background:radial-gradient(60% 80% at 50% 40%,#1A2350,var(--night));transform:scale(calc(1.25 - .25 * var(--g,0)));transform-origin:50% 40%}
/* the painting at its natural shape, covering the screen (contained on wide screens); flags and couple are placed on it */
.t-img{position:absolute;left:50%;top:50%;width:max(100vw,100svh * 1024 / 1536);aspect-ratio:1024/1536;transform:translate(-50%,-50%)}
@media (min-aspect-ratio:1/1){.t-img{width:calc(100svh * 1024 / 1536)}}
.t-img > img:first-child{position:absolute;inset:0;width:100%;height:100%}
.t-gate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* light glinting off the gold of the spires */
.gold-sweep{position:absolute;inset:0;mix-blend-mode:color-dodge;pointer-events:none;opacity:calc(var(--g,0));
  background:linear-gradient(110deg,transparent 35%,rgba(255,220,140,.55) 45%,transparent 55%) 0 0/300% 100% no-repeat;animation:sweep 4.5s ease-in-out infinite;
  -webkit-mask:linear-gradient(#000 0 45%,transparent 58%);mask:linear-gradient(#000 0 45%,transparent 58%)}
@keyframes sweep{0%{background-position:120% 0}60%,100%{background-position:-60% 0}}
/* saffron flags on the spires, fluttering in the wind (the cloth itself ripples) */
.flag{position:absolute;width:5.2%;aspect-ratio:100/60;transform-origin:0 0;animation:flutter 2.3s ease-in-out infinite alternate;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4))}
.flag.big{width:7.6%;animation-duration:2.8s}
.flag svg{display:block;width:100%;height:100%;overflow:visible}
@keyframes flutter{0%{transform:rotate(4deg) scaleX(.94)}50%{transform:rotate(-3deg) scaleX(1.04)}100%{transform:rotate(6deg) scaleX(.98)}}
/* the couple walks up the courtyard to the temple door as the guest scrolls */
.walkers{position:absolute;left:50%;bottom:calc(var(--w,0) * 36%);height:calc(40% - var(--w,0) * 33%);width:auto;transform:translateX(-50%);
  opacity:calc(1 - (var(--w,0) - .9) * 10);filter:drop-shadow(0 10px 12px rgba(0,0,0,.45));animation:bob .7s ease-in-out infinite alternate}
.t-gate{transform:scale(calc(1 + var(--g,0) * var(--g,0) * 7));transform-origin:50% var(--oy,44%);opacity:calc(1 - (var(--g,0) - .72) * 4);will-change:transform}
.embers{position:absolute;inset:0;pointer-events:none;opacity:var(--g,0)}
.embers i{position:absolute;bottom:-8px;width:3px;height:3px;border-radius:50%;background:#FFD27A;box-shadow:0 0 8px 2px rgba(255,170,60,.8);animation:rise var(--d) linear infinite;animation-delay:var(--dl)}
/* the scene dissolves into the warm maroon of the couple's section below */
.t-fade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(43,15,24,.2),#2B0F18 70%);opacity:var(--end,0)}
.t-cue{position:absolute;left:0;right:0;bottom:24px;text-align:center;font-size:12px;font-weight:700;letter-spacing:.35em;text-transform:uppercase;color:var(--zari-lt);opacity:calc(1 - var(--g,0) * 3)}

/* ------------------------------------------------------------------ 5. the couple in a BHU arch */
.couple-sec{background:linear-gradient(#2B0F18,#4A1621 55%,#2B0F18);color:var(--ivory)}
.couple-sec .title{color:var(--ivory)}
.couple{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(30px,6vw,70px);align-items:center;text-align:left}
.arch-frame{position:relative;width:min(78vw,380px);aspect-ratio:851/1491;margin:0 auto}
.arch-frame .photo{position:absolute;left:22.8%;top:27.5%;width:54.6%;height:57.5%;overflow:hidden;background:#3A1A14}
.arch-frame .photo img{width:100%;height:100%;object-fit:cover}
.arch-frame .arch{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 24px 30px rgba(0,0,0,.55))}
.love{font-style:italic;font-size:clamp(20px,3.8vw,24px);color:#F1E3C8;margin:16px 0 0}
.tag{font-family:var(--script);font-size:clamp(32px,6vw,42px);color:var(--marigold);margin:14px 0 0}
.gallery{margin-top:clamp(80px,13vw,120px)}
.carousel{position:relative;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:30px calc(var(--gutter)*-1) 0;padding:30px 0}
.carousel::-webkit-scrollbar{display:none}
.track{display:flex;gap:26px}
.track .spacer{flex:none}
.track figure{flex:none;margin:0;width:min(62vw,250px);aspect-ratio:3/4;scroll-snap-align:center;border-radius:999px 999px 14px 14px;overflow:hidden;opacity:.5;transform:scale(.86);transition:transform .6s var(--ease),opacity .6s;
  border:6px solid #E3C397;outline:1.5px solid var(--zari);outline-offset:-4px;box-shadow:0 24px 36px -20px rgba(0,0,0,.7)}
.track figure.on{opacity:1;transform:none}
.track img{width:100%;height:100%;object-fit:cover}
.dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
.dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--zari);opacity:.35;cursor:pointer}
.dots button.on{opacity:1;background:var(--marigold);transform:scale(1.3)}

/* ------------------------------------------------------------------ 5b. Moments on the Ganga: a strip of photos over the river that the guest swipes sideways */
.drift{position:relative;background:var(--night)}
.drift-stage{position:relative;height:100vh;height:100svh;min-height:620px;max-height:980px;overflow:hidden;color:var(--ivory)}
.drift-sky{position:absolute;inset:0;background:radial-gradient(90% 55% at 50% 0%,#3A1424,transparent 70%),linear-gradient(#2B0F18,#141B3A 45%,#0C2433 64%)}
.drift .head{position:absolute;z-index:3;left:0;right:0;top:max(6svh,34px);text-align:center;padding:0 var(--gutter)}
.drift .title{color:var(--ivory);font-size:clamp(30px,6.4vw,52px)}
/* the river: reflections show through a gently rippling surface */
.water{position:absolute;z-index:1;left:0;right:0;bottom:0;height:34%;background:linear-gradient(#0F3A4A,#0A2230 70%,var(--night));overflow:hidden}
.water::before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(255,200,110,.18),transparent 30%)}
.ripples{position:absolute;inset:0;z-index:3;mix-blend-mode:screen;opacity:.5;
  background:repeating-linear-gradient(180deg,transparent 0 9px,rgba(180,230,240,.18) 9px 10px,transparent 10px 23px);animation:ripples 4s linear infinite}
@keyframes ripples{to{background-position:0 46px}}
.water .floaters{z-index:4}
/* its own sideways scroller: the page scrolls past it as usual; only a sideways swipe (or the arrows) moves the photos */
.strip-box{position:absolute;z-index:2;inset:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y}
.strip-box::-webkit-scrollbar{display:none}
.strip{position:absolute;left:0;bottom:34%;display:flex;align-items:flex-start;gap:clamp(34px,7vw,80px);
  padding:0 calc(50vw - min(26vw,13svh))}
.ph{scroll-snap-align:center}
.drift-nav{position:absolute;z-index:3;top:46%;width:44px;height:44px;margin-top:-22px;border-radius:50%;border:1px solid rgba(212,175,55,.7);background:rgba(43,15,24,.75);
  color:var(--zari-lt);font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;transition:opacity .3s}
.drift-nav.prev{left:14px}.drift-nav.next{right:14px}
.drift-nav[disabled]{opacity:.25;cursor:default}
.drift-hint{position:absolute;z-index:3;left:0;right:0;bottom:calc(4% + 26px);margin:0;text-align:center;font-family:var(--script);font-size:22px;color:var(--marigold);animation:breath 2.6s ease-in-out infinite}
/* a garland of marigolds the photos hang from */
.toran{position:absolute;left:0;right:0;top:-30px;height:20px;
  background:radial-gradient(circle at 50% 55%,#FFD25A 0 5px,#FFB627 6px 7px,#E86F1A 8px 9.5px,transparent 10.5px) 0 0/21px 20px repeat-x;
  filter:drop-shadow(0 4px 4px rgba(0,0,0,.45))}
.toran::after{content:"";position:absolute;left:0;right:0;top:15px;height:10px;
  background:radial-gradient(ellipse at 50% 0,#2E7D32 0 4px,transparent 5px) 10px 0/42px 10px repeat-x}
.ph{position:relative;flex:none;width:min(52vw,26svh);margin:0;transform-origin:50% -26px;transform:rotate(var(--r,0deg)) scale(calc(.9 + var(--near,0) * .1));transition:filter .4s}
.ph::before{content:"";position:absolute;left:50%;top:-24px;width:1.5px;height:24px;margin-left:-.75px;background:linear-gradient(#D4AF37,#8C6B1F)}
.ph .peg{position:absolute;left:50%;top:-12px;z-index:2;width:12px;height:22px;margin-left:-6px;border-radius:3px;background:linear-gradient(90deg,#8C5A2B,#C08A50,#8C5A2B);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.ph .pic{position:relative;aspect-ratio:3/4;background:#FFF6E5;padding:7px 7px 34px;box-shadow:0 18px 28px -10px rgba(0,0,0,.65),0 0 0 1px rgba(212,175,55,.4);
  -webkit-box-reflect:below 18px linear-gradient(transparent 52%,rgba(255,255,255,.28))}
.ph .pic img{width:100%;height:100%;object-fit:cover}
.ph figcaption{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--display);font-size:15px;letter-spacing:.2em;color:var(--maroon)}
.ph{filter:brightness(calc(.62 + var(--near,0) * .38)) saturate(calc(.75 + var(--near,0) * .25))}
.drift-count{position:absolute;z-index:3;left:0;right:0;bottom:4%;text-align:center;font-family:var(--display);font-size:14px;letter-spacing:.35em;color:var(--zari-lt)}

/* ------------------------------------------------------------------ 6. venue, bucket list, things */
.sand{background:#F6E7CF;background-image:radial-gradient(circle at 12% 8%,rgba(242,140,40,.16),transparent 40%),radial-gradient(circle at 88% 92%,rgba(179,32,42,.1),transparent 40%)}
.sand .title{color:var(--maroon)}.sand .title em{color:var(--saffron)}
.venue-card{position:relative;display:grid;grid-template-columns:1fr 1.15fr;max-width:840px;margin:0 auto;text-align:left;background:var(--ivory);border-radius:20px;overflow:hidden;
  box-shadow:0 0 0 1px var(--zari),0 0 0 6px var(--ivory),0 0 0 7px var(--sindoor),0 30px 60px -30px rgba(42,26,18,.5)}
.venue-info{padding:clamp(26px,5vw,42px)}
.venue-info h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,5vw,34px);color:var(--maroon);margin:8px 0}
.venue-info address{font-style:normal;white-space:pre-line;color:var(--ink-soft)}
.btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 22px;border-radius:999px;border:1px solid var(--maroon);background:var(--maroon);color:var(--ivory);
  font-family:var(--serif);font-weight:700;font-size:13px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .3s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--maroon)}
#map{min-height:300px;height:100%;filter:sepia(.15) saturate(.9)}
/* the Banaras bucket list: a swipeable strip of illustrated stops */
.bucket{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter)*-1);padding:6px var(--gutter) 18px;text-align:left}
.bucket::-webkit-scrollbar{display:none}
.bl{flex:none;width:min(64vw,240px);scroll-snap-align:center;background:var(--ivory);border-radius:18px;overflow:hidden;box-shadow:0 0 0 1px rgba(212,175,55,.6),0 20px 30px -18px rgba(42,26,18,.45)}
.bl img{width:100%;aspect-ratio:1;object-fit:cover}
.bl .bl-boat{aspect-ratio:1;display:grid;place-items:center;background:radial-gradient(circle,#FFE0A8,#F6C77B 60%,#E3A15A)}
.bl .bl-boat img{width:28%;aspect-ratio:auto;transform:rotate(-90deg)}
.bl h4{font-family:var(--display);font-weight:400;font-size:21px;color:var(--maroon);margin:12px 16px 2px}
.bl p{margin:0 16px 16px;font-size:16px;line-height:1.4;color:var(--ink-soft)}
@media (min-width:1000px){.bucket{justify-content:center;flex-wrap:wrap;overflow:visible}}
.things{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;max-width:980px;margin:0 auto}
.thing{background:var(--ivory);border-radius:20px;box-shadow:0 0 0 1px var(--zari),0 0 0 5px var(--ivory),0 0 0 6px rgba(179,32,42,.45);padding:30px 22px}
.thing .ic{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 40% 35%,#8A1A2C,var(--maroon));color:var(--zari-lt);box-shadow:0 0 0 4px var(--ivory),0 0 0 5px var(--saffron)}
.thing svg{width:28px;height:28px}.thing svg *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.thing h4{font-family:var(--display);font-weight:400;font-size:22px;color:var(--maroon);margin:0 0 6px}
.thing p{margin:0;font-size:17px;color:var(--ink-soft)}

/* ------------------------------------------------------------------ 7. RSVP at the Ganga Aarti */
.aarti{background:var(--night);color:var(--ivory);min-height:100vh}
.aarti-bg{position:absolute;inset:-10% 0;background:url(img/aarti.webp) center/cover;transform:translateY(var(--py,0px))}
.aarti::after{content:"";position:absolute;inset:0;background:linear-gradient(var(--night),rgba(10,15,36,.25) 25%,rgba(10,15,36,.55) 75%,var(--night))}
.flicker{position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(40% 30% at 30% 35%,rgba(255,160,50,.22),transparent 70%);animation:aarti 2.8s ease-in-out infinite alternate}
@keyframes aarti{0%{opacity:.4;transform:translateX(-4%)}100%{opacity:1;transform:translateX(6%)}}
.aarti .title{color:var(--ivory)}.aarti .kicker{color:var(--zari-lt)}
.rsvp-card{max-width:600px;margin:0 auto;text-align:left;padding:clamp(26px,6vw,44px);border-radius:24px;background:rgba(20,10,20,.66);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);
  border:1px solid rgba(212,175,55,.6);box-shadow:0 0 0 6px rgba(20,10,20,.4),0 0 0 7px rgba(179,32,42,.55)}
.form{display:flex;flex-wrap:wrap;gap:16px 14px}
.fld{flex:1 1 calc(50% - 7px);min-width:0}.fld.full{flex-basis:100%}
.fld label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--zari-lt);margin-bottom:4px}
.fld input,.fld select{width:100%;padding:9px 2px;border:0;border-bottom:1px solid rgba(212,175,55,.5);background:transparent;color:var(--ivory);font-size:19px;outline:none;border-radius:0;-webkit-appearance:none;appearance:none;color-scheme:dark}
.fld select option{color:#222}
.fld input:focus,.fld select:focus{border-color:var(--marigold)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px}
.chip{border:1px solid rgba(212,175,55,.55);border-radius:999px;padding:6px 14px;font-size:16px;cursor:pointer;background:transparent;color:var(--ivory);transition:all .25s}
.chip.on{background:var(--sindoor);border-color:var(--sindoor);color:#fff}
.send{width:100%;margin-top:24px;padding:15px;background:linear-gradient(90deg,#B8862F,#F5DE9B,#B8862F)!important;border-color:var(--zari)!important;color:var(--maroon)!important}
.send[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.err{color:#FFB4B4;font-size:16px;margin-top:12px;text-align:center}
.thanks{text-align:center}
.thanks .seal{width:62px;height:62px;margin:0 auto 12px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#C8333C,var(--sindoor));display:grid;place-items:center;box-shadow:0 0 0 4px var(--zari)}
.thanks h3{font-family:var(--display);font-weight:400;font-size:30px;margin:0;color:var(--ivory)}
.wa{background:#25D366!important;border-color:#25D366!important;color:#fff!important}
.linkish{background:none;border:0;color:var(--zari-lt);text-decoration:underline;cursor:pointer;font-size:15px;margin-top:10px}

/* ------------------------------------------------------------------ 8. Agni Sakshi: the countdown in rings of fire */
.agni{background:radial-gradient(80% 60% at 50% 55%,#2A0B1A,#0B0716 60%,#05040B);color:var(--ivory);min-height:100vh;display:flex;flex-direction:column;justify-content:center}
.astra{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.agni .title{color:var(--ivory)}.agni .kicker{color:#FF9FCB}
.clock{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,3vw,40px);max-width:900px;margin:clamp(24px,5vw,40px) auto 0}
.ring{position:relative;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring b{position:relative;font-family:var(--display);font-weight:400;font-size:clamp(24px,7vw,58px);line-height:1;color:#FFF3DE;text-shadow:0 0 14px rgba(255,140,60,.9);font-variant-numeric:lining-nums tabular-nums}
.ring span{position:relative;margin-top:4px;font-size:clamp(9px,2.3vw,12px);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--zari-lt)}
.agni-line{margin-top:clamp(26px,5vw,40px);color:#F1D7E6}
.diyas-count{margin:10px 0 0;font-family:var(--script);font-size:clamp(26px,5vw,34px);color:var(--marigold)}

/* ------------------------------------------------------------------ 9. finale: Dev Deepawali from a boat */
.foot{position:relative;min-height:128svh;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;text-align:center;color:var(--ivory);background:var(--night);cursor:pointer}
.finale-art{position:absolute;inset:0 0 auto;height:100svh;background:url(img/finale.webp) center 30%/cover no-repeat;-webkit-mask:linear-gradient(#000 80%,transparent);mask:linear-gradient(#000 80%,transparent)}
.foot::after{content:"";position:absolute;inset:0 0 auto;height:100svh;pointer-events:none;background:linear-gradient(rgba(10,15,36,.55),rgba(10,15,36,0) 35%)}
.floated{position:absolute;inset:0;z-index:2;pointer-events:none}
.floated b{position:absolute;width:30px;height:13px;margin:-6px 0 0 -15px;border-radius:0 0 50% 50%;background:linear-gradient(#2E6B2A,#1C4A1A);transition:transform 9s linear,opacity 9s ease-in}
.floated b::before{content:"";position:absolute;left:30%;bottom:55%;width:40%;height:140%;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(ellipse at 50% 72%,#FFFDF0 0 18%,#FFE07A 30%,#FF9D2E 58%,rgba(255,80,20,0) 74%);box-shadow:0 0 14px 5px rgba(255,170,60,.6);animation:flicker 1.4s ease-in-out infinite alternate}
.finale{position:relative;z-index:3;padding:clamp(60px,10vw,100px) var(--gutter) 30px;pointer-events:none}
.finale a{pointer-events:auto}
.dev.big{font-size:clamp(52px,14vw,110px);line-height:1.15;color:var(--zari-lt);text-shadow:0 0 30px rgba(255,170,60,.55)}
.foot .names.small{font-size:clamp(46px,11vw,80px);margin:.1em 0 0}
.foot .names span{display:inline}.foot .names em{display:inline;font-size:.32em;margin:0 .3em;vertical-align:middle}
.foot .date{font-weight:700;font-size:13px;letter-spacing:.32em;text-transform:uppercase;color:var(--zari-lt);margin:12px 0 0}
.finale-tip{margin:14px 0 0;font-family:var(--script);font-size:26px;color:var(--marigold);animation:breath 2.4s ease-in-out infinite}
.comp{margin-top:30px;text-shadow:0 1px 10px rgba(0,0,0,.9)}.comp .kicker{color:var(--zari-lt)}
.comp p.line{font-family:var(--display);font-size:clamp(20px,4.4vw,26px);margin:8px 0 0;color:var(--ivory)}
.comp p.and-line{font-family:var(--script);font-size:32px;color:var(--marigold);margin:2px 0}
.contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px;pointer-events:auto}
.contacts a{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:999px;background:var(--ivory);color:var(--maroon);text-decoration:none;font-weight:700;font-size:16px;box-shadow:0 0 0 1px var(--zari),0 8px 20px -8px rgba(0,0,0,.6)}
.contacts svg{width:18px;height:18px;fill:#25A55A;flex:none}
.foot .pixvid-credit{position:relative;z-index:3;margin-top:auto}

/* ------------------------------------------------------------------ 6 (look): the venue, bucket list and things to know, at the ghats by night */
.sand{color:var(--ivory);background:
  radial-gradient(70% 30% at 50% 0%,rgba(242,140,40,.16),transparent 70%),
  radial-gradient(60% 30% at 50% 100%,rgba(179,32,42,.22),transparent 70%),
  linear-gradient(var(--night),#120A1E 45%,#1A0B16)}
/* ghat steps, faintly lit, rising from the bottom */
.sand::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(199,154,107,.09) 0 2px,transparent 2px 26px);
  -webkit-mask:linear-gradient(transparent 35%,#000);mask:linear-gradient(transparent 35%,#000)}
.sand .title{color:var(--ivory)}.sand .title em{color:var(--marigold)}
.sand .kicker{color:var(--zari-lt)}
/* a little row of diyas under each heading, flickering */
.sand .head::after{content:"";display:block;width:170px;height:16px;margin:16px auto 0;opacity:.9;
  background:radial-gradient(circle at 50% 60%,#FFF3C4 0 1.6px,#FFC85A 2.4px,rgba(255,150,40,.35) 4.5px,transparent 8px) 0 0/34px 16px repeat-x;
  animation:breath 2.2s ease-in-out infinite alternate}
/* the venue: maroon silk inside the same Banarasi brocade border as the invitation */
.venue-card{background:linear-gradient(160deg,#5E0E1E,#3A0814 70%);border:16px solid transparent;border-image:url(img/card-frame.webp) 134 / 16px round;border-radius:0;
  box-shadow:0 34px 60px -24px rgba(0,0,0,.85),0 0 60px rgba(242,140,40,.12)}
.venue-info h3{color:var(--zari-lt)}
.venue-info .kicker{color:var(--marigold)}
.venue-info address{color:#E9DCC4}
.sand .btn{background:linear-gradient(90deg,#B8862F,#F5DE9B,#B8862F);border-color:var(--zari);color:var(--maroon)}
.sand .btn.ghost{background:transparent;color:var(--zari-lt);border-color:rgba(212,175,55,.7)}
#map{filter:sepia(.4) saturate(.85) brightness(.9) contrast(1.05)}
/* things to know: dark cards with zari edges and glowing brass icons */
.thing{background:linear-gradient(170deg,rgba(255,246,229,.07),rgba(255,246,229,.02));border-radius:18px;padding:30px 22px;
  box-shadow:0 0 0 1px rgba(212,175,55,.5),inset 0 0 0 5px rgba(10,15,36,.4),inset 0 0 0 6px rgba(212,175,55,.18),0 24px 40px -24px rgba(0,0,0,.8)}
.thing .ic{background:radial-gradient(circle at 35% 30%,#FFF0B8,#D4AF37 45%,#8C6B1F);color:var(--maroon);
  box-shadow:0 0 0 3px rgba(10,15,36,.6),0 0 0 4px rgba(212,175,55,.6),0 0 28px rgba(255,170,60,.45)}
.thing h4{color:var(--zari-lt)}
.thing p{color:#E0D2BC}
/* the bucket list: vintage Kashi postcards, each with a postmark */
.bucket{padding-top:18px;padding-bottom:30px}
.bl{position:relative;background:#F6E8CF;border-radius:6px;padding:10px 10px 16px;transform:rotate(var(--rot,-2deg));
  outline:1px dashed rgba(110,15,31,.35);outline-offset:-5px;box-shadow:0 26px 36px -18px rgba(0,0,0,.85),0 0 0 1px rgba(212,175,55,.4);transition:transform .4s var(--ease)}
.bl:nth-child(even){--rot:2deg}
.bl:hover{transform:rotate(0) translateY(-4px)}
.bl.rv{transform:rotate(var(--rot,-2deg)) translateY(28px)}.bl.rv.in{transform:rotate(var(--rot,-2deg))}.bl.rv.in:hover{transform:rotate(0) translateY(-4px)}
@media (min-width:1000px){.bl{width:188px}}
.bl img,.bl .bl-boat{border-radius:3px}
.bl h4{margin:12px 6px 2px;color:var(--maroon)}
.bl p{margin:0 6px;color:var(--ink-soft)}
.bl::after{content:"काशी";position:absolute;top:18px;right:18px;width:56px;height:56px;border-radius:50%;border:2px solid rgba(110,15,31,.6);
  display:grid;place-items:center;font-family:var(--dev);font-size:15px;color:rgba(110,15,31,.75);background:rgba(246,232,207,.45);transform:rotate(-14deg);
  box-shadow:inset 0 0 0 4px rgba(246,232,207,.45),inset 0 0 0 5px rgba(110,15,31,.35)}

#bgm-toggle{position:fixed;right:18px;bottom:18px;z-index:50;width:48px;height:48px;border-radius:50%;border:1px solid var(--zari);background:rgba(110,15,31,.92);color:var(--zari-lt);display:grid;place-items:center;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.4)}
#bgm-toggle svg{width:20px;height:20px}#bgm-toggle .off{display:none}
#bgm-toggle[data-on="false"] .on{display:none}#bgm-toggle[data-on="false"] .off{display:block}

@media (max-width:760px){
  .couple{grid-template-columns:1fr;text-align:center}
  .venue-card{grid-template-columns:1fr}.venue-info{text-align:center}.btns{justify-content:center}
  #map{height:260px}
  .ghat{width:58%}
  .clock{grid-template-columns:repeat(2,minmax(0,150px));justify-content:center;gap:18px 28px}
  .ghat .plaque{padding:13px 14px 12px}
}
@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .hero-text{transform:none}
  .unveil .card{clip-path:none}
  .ripples,.flag,.walkers,.flame,.twinkle i,.lasers i,.river-glints,.floaters b,.sparks i,.embers i,.gold-sweep,.flicker,.tap,.finale-tip,.hero .tip,.river .flow,.river-diyas i,.gate-diya,.cue::after{animation:none}
}
/* the Weddings by Pixvid credit (layout in shared/cmenu.css), in this theme's colours */
.foot .pixvid-credit{color:#E9DCC4;text-shadow:0 1px 8px rgba(0,0,0,.9)}