/* Neha & Ankit — the scrolling edition. One Alwar sky behind the whole story; its time of day follows the scroll. */
:root{
  --paper:#f8f4ec;
  --card:#fffdf8;
  --ink:#211f3a;
  --ink-2:#4a4763;
  --ink-3:#6b6780;
  --ink-4:#8b87a0;
  --cream:#f3ece0;
  --gold:#b8873c;
  --red:#a8433a;
  --line:rgba(33,31,58,.12);
  --line-2:rgba(33,31,58,.22);
  --serif:'Cormorant Garamond','Noto Serif Devanagari',Georgia,serif;
  --sans:'Karla','Noto Sans Devanagari',system-ui,sans-serif;
  --r:8px;
  --ease:cubic-bezier(.2,.8,.2,1);
  /* driven by scroll.js — these defaults are a calm afternoon */
  --sky-top:#a9cfe6;--sky-bot:#f6e7cc;
  --far:#c9b8a6;--mid:#a7a383;--near:#7f8a5c;--fort:#8a7766;
  --night:0;--sun-x:50%;--sun-y:30%;--sun-o:1;--moon-o:0;
  --on-sky:#211f3a;--on-sky-2:#4a4763;--on-sky-shadow:rgba(255,255,255,.55);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:64px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-text-size-adjust:100%}
body.locked{overflow:hidden}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
[hidden]{display:none!important}
h1,h2,h3{text-wrap:balance}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes seal{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes draw{to{stroke-dashoffset:0}}

.kicker{font:500 12px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--acc,var(--red))}
.lbl{color:var(--ink-4)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:0 22px;border-radius:var(--r);font-weight:500;font-size:16px;text-decoration:none;text-align:center;transition:background .2s,color .2s,border-color .2s,transform .15s}
.btn:active{transform:scale(.98)}
.btn-ink{background:var(--ink);color:var(--paper)}
.btn-line{border:1.5px solid currentColor;background:transparent}
.btn-gold{background:var(--gold);color:var(--ink);font-weight:700}
.btn-red{background:var(--red);color:#fff}
.linkish{font-size:15px;color:inherit;opacity:.75;text-decoration:underline;padding:8px}
.acts{display:flex;gap:10px;flex-wrap:wrap}
.acts>*{flex:1 1 150px}
.rows{display:flex;flex-direction:column;gap:9px;font-size:16px}
.rows .row{display:flex;justify-content:space-between;gap:14px;border-top:1px solid var(--line);padding-top:9px}
.rows .row span:last-child{text-align:right}
.wear{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:16px}
.sw{width:30px;height:30px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(33,31,58,.15),0 1px 3px rgba(33,31,58,.12);position:relative}
.sw::after{content:"";position:absolute;inset:3px;border-radius:50%;background:repeating-linear-gradient(45deg,rgba(255,255,255,.18) 0 2px,transparent 2px 5px)}

/* Reveal as you scroll (only when JS is running, so the page is complete without it) */
.js .rv{opacity:0;transform:translateY(22px)}
.js .cover.in .rv,.js .rv.in{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0) * 110ms + 80ms)}

/* ================= Envelope ================= */
.env{position:fixed;inset:0;z-index:200;background:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px;padding:28px 16px;animation:fadeIn .5s ease both;overflow:hidden;transition:opacity .6s ease}
.env.out{opacity:0}
.env::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 34%,rgba(184,135,60,.24),transparent 62%);pointer-events:none}
.env>*{position:relative}
.env-kicker{font:500 11px var(--sans);letter-spacing:.28em;color:var(--gold);text-transform:uppercase}
.env-guest{font-family:var(--serif);font-size:24px;color:var(--cream);text-align:center;font-style:italic}
.envelope{position:relative;width:min(320px,86vw);height:210px;transition:transform .5s ease;perspective:900px}
.env-card{position:absolute;left:8%;right:8%;bottom:14px;background:var(--paper);border-radius:3px;padding:20px 16px;text-align:center;box-shadow:0 10px 30px rgba(0,0,0,.35);transition:transform .7s var(--ease) .35s,opacity .5s ease .35s;opacity:0}
.env-card .n{font-family:var(--serif);font-size:30px;line-height:1.1}
.env-card .d{font-size:13px;color:var(--ink-3);margin-top:6px}
.env-body{position:absolute;inset:0;border:1px solid rgba(184,135,60,.55);background:#2b2850;border-radius:4px}
.env-flap{position:absolute;left:0;right:0;top:0;height:118px;background:#332f5c;border:1px solid rgba(184,135,60,.55);border-bottom:none;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;transition:transform .7s cubic-bezier(.4,0,.2,1);backface-visibility:hidden}
.env-seal{position:absolute;left:50%;top:96px;width:54px;height:54px;margin-left:-27px;border-radius:50%;background:var(--red);border:1px solid rgba(255,255,255,.25);display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:19px;color:var(--cream);animation:seal 2.6s ease-in-out infinite;transition:opacity .3s}
.env.open .env-seal{opacity:0}
.env.open .env-flap{transform:rotateX(180deg)}
.env.open .env-card{opacity:1;transform:translateY(-58%);z-index:2}
.env.open .envelope{transform:translateY(10px)}
.env .btn-gold{font-size:18px;min-height:58px;padding:0 34px}
.env-skip{font-size:14px;color:rgba(243,236,224,.65);text-decoration:underline;padding:6px}

/* ================= Language toggle ================= */
.lang{display:flex;border:1px solid var(--line-2);border-radius:20px;overflow:hidden;font-size:14px;flex:none;background:rgba(255,253,248,.6)}
.lang span{padding:7px 12px}
.lang [data-lang=hi]{font-family:'Noto Sans Devanagari',sans-serif}
.lang .on{background:var(--ink);color:var(--paper)}
.env .lang{border-color:rgba(184,135,60,.6);background:none}
.env .lang span{padding:9px 16px;color:var(--cream)}
.env .lang .on{background:var(--gold);color:var(--ink)}

/* ================= Top bar & clock ================= */
.top{position:fixed;left:0;right:0;top:0;z-index:50;padding:10px 16px;padding-top:calc(10px + env(safe-area-inset-top,0px));background:rgba(248,244,236,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-row{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:10px}
.mono{display:flex;align-items:center;margin-right:auto;text-decoration:none;min-height:44px}
.mono img{display:block;height:52px;width:auto;margin:-4px 0}
.top-rsvp{min-height:40px;padding:0 16px;font-size:15px}
.clock{position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:50;display:flex;align-items:center;gap:10px;min-height:48px;max-width:calc(100vw - 24px);padding:0 16px;border-radius:24px;background:rgba(33,31,58,.88);color:var(--cream);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 8px 24px rgba(20,18,38,.25);font-size:14px;white-space:nowrap;animation:fadeIn .4s ease both}
.clock-dot{width:10px;height:10px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(184,135,60,.25);flex:none}
.clock-t{font-variant-numeric:tabular-nums}
.clock-ev{font-family:var(--serif);font-style:italic;font-size:17px;overflow:hidden;text-overflow:ellipsis}
.clock-ev:empty{display:none}
.clock-more{opacity:.6;font-size:13px}

/* ================= The world: sky, sun, moon, stars, the Aravalli ridge with the fort ================= */
.world{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sky{position:absolute;inset:0;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bot) 78%)}
.stars{position:absolute;inset:0 0 40% 0;opacity:var(--night);background-image:radial-gradient(1.4px 1.4px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 12%,#fff,transparent),radial-gradient(1.6px 1.6px at 44% 30%,#fff,transparent),radial-gradient(1px 1px at 58% 16%,#fff,transparent),radial-gradient(1.3px 1.3px at 72% 26%,#fff,transparent),radial-gradient(1px 1px at 86% 10%,#fff,transparent),radial-gradient(1.2px 1.2px at 92% 34%,#fff,transparent),radial-gradient(1px 1px at 6% 40%,#fff,transparent),radial-gradient(1.2px 1.2px at 36% 46%,#fff,transparent),radial-gradient(1px 1px at 66% 44%,#fff,transparent),radial-gradient(1px 1px at 20% 52%,#fff,transparent),radial-gradient(1.3px 1.3px at 80% 50%,#fff,transparent),radial-gradient(1px 1px at 52% 6%,#fff,transparent),radial-gradient(1.2px 1.2px at 3% 14%,#fff,transparent),radial-gradient(1px 1px at 97% 22%,#fff,transparent)}
.sun{position:absolute;left:var(--sun-x);top:var(--sun-y);width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;opacity:var(--sun-o);background:radial-gradient(circle,#fff6d8 0%,#ffd98a 45%,#f6a25a 100%);box-shadow:0 0 70px 30px rgba(255,200,120,.4)}
.moon{position:absolute;left:84%;top:10%;width:40px;height:40px;border-radius:50%;opacity:var(--moon-o);background:#f6efd9;box-shadow:0 0 26px 8px rgba(246,239,217,.3)}
.moon::after{content:"";position:absolute;left:9px;top:-4px;width:40px;height:40px;border-radius:50%;background:var(--sky-top);opacity:.0}
.ridge{position:absolute;left:0;right:0;bottom:0;width:100%;height:36vh;min-height:220px}
.ridge .far{fill:var(--far)}
.ridge .fort path{fill:var(--fort)}
.ridge .mid{fill:var(--mid)}
.ridge .near{fill:var(--near)}

main{position:relative;z-index:1}
.sec{position:relative;padding:72px 16px 72px;display:flex;align-items:center}
.mark{position:absolute;left:0;width:1px;height:0;pointer-events:none}
.wrap{width:100%;max-width:1120px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.split{display:flex;flex-direction:column;gap:22px}
@media (min-width:900px){
  .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:56px}
  .split.rev>:first-child{order:2}
}
.on-sky{color:var(--on-sky);text-shadow:0 1px 16px var(--on-sky-shadow);display:flex;flex-direction:column;gap:10px}
.on-sky .kicker{color:inherit;opacity:.85}
.on-sky.center{text-align:center;align-items:center}
.sec h2{margin:0;font:400 clamp(46px,11vw,84px)/1 var(--serif)}
.lead{margin:0;font-size:18px;max-width:34em;color:var(--on-sky-2)}
.card{position:relative;background:rgba(255,253,248,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:22px 20px;box-shadow:0 18px 50px rgba(20,18,38,.16);display:flex;flex-direction:column;gap:14px;color:var(--ink)}
.card.tint{background:color-mix(in srgb,var(--tint) 92%,transparent)}
.card h2{font-size:clamp(46px,10vw,72px);color:var(--ink)}
.card .when{font-size:20px;font-weight:500;color:var(--acc)}
.card p{margin:0;color:var(--ink-2);font-size:17px}
.card-h{margin:0;font:400 32px/1.1 var(--serif)}
.note-p{margin:0;color:var(--ink-2)}
.tbc{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--red)}

/* ================= Cover (unchanged look; opaque, so the sky starts below it) ================= */
.cover{background:var(--paper);padding:0;display:block;min-height:auto;z-index:2}
.c-scene{display:flex;flex-direction:column;padding-top:60px}
.shot{position:relative;overflow:hidden;background:color-mix(in srgb,var(--gold) 14%,var(--paper))}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.shot.empty .zoom{display:none}
.c-shot{height:58vh;min-height:340px;flex:none}
.c-shot img{object-position:50% 22%;animation:kb 9s cubic-bezier(.2,.6,.3,1) both}
@keyframes kb{from{transform:scale(1.14)}to{transform:scale(1.02)}}
.c-shot::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,var(--paper) 0%,rgba(248,244,236,.6) 14%,rgba(248,244,236,0) 32%)}
.c-text{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;padding:0 16px 40px;margin-top:-34px}
.names{margin:0;font:400 clamp(54px,15vw,112px)/.95 var(--serif)}
.names i{font-weight:300;color:var(--gold)}
.names .ch-l{display:inline-block;opacity:0;transform:translateY(.35em) rotate(4deg)}
.in .names .ch-l{animation:letter .7s var(--ease) forwards;animation-delay:calc(var(--k) * 55ms + 400ms)}
@keyframes letter{to{opacity:1;transform:none}}
.date{font-size:17px;color:var(--ink-2);max-width:30em}
.count{display:flex;align-items:baseline;gap:10px;padding:8px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.count b{font:400 44px/1 var(--serif);font-variant-numeric:lining-nums tabular-nums;color:var(--red)}
.count span{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.c-acts{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;width:100%;max-width:460px}
.c-acts .btn{flex:1 1 180px;min-height:56px;font-size:17px}
.scroll-cue{position:absolute;left:50%;bottom:-28px;width:2px;height:56px;margin-left:-1px;background:linear-gradient(var(--gold),transparent);z-index:3}
.scroll-cue span{position:absolute;left:-3px;top:0;width:8px;height:8px;border-radius:50%;background:var(--gold);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(48px);opacity:0}}
.cover::after{content:"";position:absolute;left:0;right:0;bottom:-80px;height:80px;background:linear-gradient(var(--paper),rgba(248,244,236,0));pointer-events:none}
@media (min-width:900px){
  .c-scene{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:100vh;padding-top:0}
  .c-shot{height:100vh}
  .c-shot::after{background:linear-gradient(to right,rgba(248,244,236,0) 70%,var(--paper) 100%)}
  .c-shot img{object-position:50% 30%}
  .c-text{margin-top:0;padding:40px 48px}
}

/* ================= At a glance ================= */
.day-card{gap:4px}
.day-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.day-head h3{margin:0;font:400 28px/1.1 var(--serif)}
.day-head .sub{font-size:13px;color:var(--ink-3)}
.tl{position:relative;height:150px}
.tl svg{position:absolute;left:0;top:10px;width:100%;height:80px;overflow:hidden}
.tl .night{fill:rgba(33,31,58,.07)}
.tl .arc{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-dasharray:3 4}
.tl .sunset-lbl{position:absolute;top:0;font-size:11px;color:var(--gold);transform:translateX(-50%);white-space:nowrap}
.tl .axis{position:absolute;left:0;right:0;top:90px;height:1px;background:var(--line-2)}
.tl .tick{position:absolute;top:132px;font-size:11px;color:var(--ink-4);transform:translateX(-50%);font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{position:absolute;top:96px;height:32px;border-radius:16px;background:var(--pc);color:#fff;font-size:13px;font-weight:500;display:flex;align-items:center;justify-content:center;padding:0 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 6px rgba(33,31,58,.15);text-decoration:none;transition:transform .2s}
.pill:hover{transform:translateY(-2px)}
.pill.tbc{background:transparent;color:var(--pc);border:1.5px dashed var(--pc);box-shadow:none}

/* ================= Arrive ================= */
.carousel{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:10px;margin:-6px -6px 0}
.carousel::-webkit-scrollbar{display:none}
.carousel .shot{flex:0 0 100%;aspect-ratio:4/3;scroll-snap-align:center}
.dots{display:flex;justify-content:center;gap:8px;margin-top:-6px}
.dots button{width:28px;height:20px;display:flex;align-items:center;justify-content:center}
.dots button::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--line-2)}
.dots button.on::before{background:var(--ink)}

/* ================= Interludes & day markers ================= */
.plan{padding-top:84px}
.plan-grid{display:flex;flex-direction:column;gap:16px}
.days2{display:flex;flex-direction:column;gap:14px}
.stay-card .kicker{--acc:var(--gold)}
@media (min-width:900px){.plan-grid{display:grid;grid-template-columns:1fr minmax(380px,460px);gap:56px;align-items:center}}
.plan{min-height:80vh}
.day{padding-top:40px;padding-bottom:40px}
.dayhead{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;margin:22vh 0 6vh}
.dm-k{font:500 13px var(--sans);letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.dm-d{font:400 clamp(44px,11vw,96px)/1 var(--serif)}
.ev-block{position:relative;padding-top:120px}
.ev-block .card{z-index:1;max-width:560px}
.ev-block.tilak{margin-top:26vh;padding-bottom:10vh}
.ev-block.tilak .card{margin-left:auto}
.ev-block .toran,.ev-block .lights{left:50%;right:auto;width:100vw;transform:translateX(-50%);top:0}

/* ================= Mehendi ================= */
.toran{position:absolute;height:110px;overflow:visible}
.toran .str{fill:none;stroke:#7a5b2a;stroke-width:1}
.toran .leaf{fill:#6d8a3a}
.toran .bloom{transform-box:fill-box;transform-origin:center;animation:sway 4s ease-in-out infinite;animation-delay:var(--sd)}
@keyframes sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.art{position:relative;display:flex;align-items:center;justify-content:center;min-height:240px}
.mandala{position:absolute;z-index:0;right:-18%;top:40px;width:min(520px,120vw);overflow:visible;pointer-events:none}
@media (min-width:900px){.mandala{right:2%;top:50%;width:min(520px,44vw);transform:translateY(-38%)}}
.mandala *{fill:none;stroke:#7a3e1f;stroke-width:.7;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - clamp(0, (var(--draw, 0) * 3300 - var(--d)) / 700, 1));opacity:.75}
.mehendi .mandala{filter:drop-shadow(0 1px 0 rgba(255,255,255,.4))}

/* ================= Tilak ================= */
.lights{position:absolute;height:90px;pointer-events:none}
.lights svg{position:absolute;inset:0;width:100%;height:100%}
.lights path{fill:none;stroke:rgba(60,40,60,.45);stroke-width:1}
.bulb{position:absolute;width:11px;height:14px;margin-left:-5.5px;border-radius:50% 50% 50% 50% / 40% 40% 60% 60%;background:#6c5a5e;transition:background .35s,box-shadow .35s}
.bulb.on{background:var(--bc);box-shadow:0 0 14px 5px color-mix(in srgb,var(--bc) 60%,transparent);animation:twinkle var(--tw) ease-in-out infinite}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.6}}
.diyas{display:flex;gap:16px;justify-content:center;align-items:flex-end;height:44px;margin:-4px 0 4px}
.diya{position:relative;width:40px;height:18px;border-radius:0 0 28px 28px;background:linear-gradient(#b8693a,#7d3f22);box-shadow:inset 0 3px 0 rgba(255,255,255,.18)}
.diya::before{content:"";position:absolute;left:50%;bottom:20px;width:14px;height:24px;margin-left:-7px;border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff4c2 0%,#ffb347 45%,#e0452b 80%,transparent 82%);opacity:0;transform:scale(.4);transition:opacity .4s,transform .4s}
.diya::after{content:"";position:absolute;left:50%;bottom:22px;width:70px;height:70px;margin-left:-35px;border-radius:50%;background:radial-gradient(circle,rgba(255,180,90,.45),transparent 65%);opacity:0;transition:opacity .6s}
.diya.on::before{opacity:1;transform:none;animation:flicker 1.1s ease-in-out infinite alternate}
.diya.on::after{opacity:1}
@keyframes flicker{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.08,1.15) rotate(3deg)}}

/* ================= Haldi: the photo is the backdrop ================= */
.haldi{background:#f8efd0;overflow:hidden;z-index:2;min-height:100vh;padding-bottom:110px;align-items:flex-end;-webkit-mask-image:linear-gradient(transparent 0,#000 90px,#000 calc(100% - 120px),transparent 100%);mask-image:linear-gradient(transparent 0,#000 90px,#000 calc(100% - 120px),transparent 100%)}
.h-back{position:absolute;inset:0}
.h-back img{object-position:50% 20%;transform:scale(1.08);transition:transform 2.4s var(--ease)}
.haldi.in .h-back img{transform:scale(1)}
.h-back::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(248,239,208,.55) 0%,rgba(248,239,208,0) 22%,rgba(248,239,208,0) 45%,rgba(248,239,208,.9) 78%,#f8efd0 100%);pointer-events:none}
.h-back .zoom{top:76px}
.h-wrap{position:relative;z-index:2}
.h-card{max-width:560px}
.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:3}
.petal{position:absolute;top:-30px;width:var(--s);height:calc(var(--s) * .8);border-radius:60% 0 60% 0;background:var(--pc);opacity:.92;animation:fall var(--dur) cubic-bezier(.3,.2,.6,1) var(--del) forwards}
@keyframes fall{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--dx),115vh) rotate(var(--rot))}}
@media (min-width:900px){
  .haldi{align-items:center;min-height:100vh;padding-bottom:72px}
  .h-back img{object-position:30% 25%}
  .h-back::after{background:linear-gradient(to right,rgba(248,239,208,0) 35%,rgba(248,239,208,.85) 65%,#f8efd0 100%)}
  .h-wrap{align-items:flex-end}
}
.zoom{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;background:rgba(248,244,236,.9);color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:17px;z-index:3;box-shadow:0 2px 10px rgba(0,0,0,.15)}

/* ================= Varmala & Phere: a tall section with a sticky stage ================= */
.varmala{display:block;min-height:230vh;padding:0}
.v-sticky{position:sticky;top:0;height:100vh;display:flex;padding:84px 16px 84px}
.v-wrap{height:100%;justify-content:flex-start}
.v-card{margin-top:auto}
.v-head{gap:6px}
.moments{list-style:none;margin:6px 0 0;padding:12px 14px;display:flex;flex-direction:column;gap:8px;border-radius:12px;background:rgba(20,16,40,.12);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);align-self:flex-start}
.moments li{display:flex;gap:12px;align-items:baseline;color:var(--on-sky);opacity:.45;text-shadow:0 1px 12px var(--on-sky-shadow);transition:opacity .4s,transform .4s;transform-origin:left}
.moments li b{font-size:13px;font-weight:500;min-width:84px;letter-spacing:.06em}
.moments li span{font:italic 400 22px/1.2 var(--serif)}
.moments li.on{opacity:1;transform:scale(1.04)}
.agni{position:absolute;left:50%;bottom:44vh;width:150px;height:70px;margin-left:-75px;pointer-events:none}
.fire{position:absolute;left:50%;bottom:16px;width:34px;height:46px;margin-left:-17px;border-radius:50% 50% 45% 45% / 60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff4c2 0%,#ffb347 40%,#e0452b 80%,transparent 82%);box-shadow:0 0 50px 22px rgba(255,140,60,.5);opacity:var(--fire,0);animation:flicker 1.2s ease-in-out infinite alternate}
.rounds{position:absolute;inset:0}
.rounds i{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:rgba(255,255,255,.25);box-shadow:none;transition:background .3s,box-shadow .3s}
.rounds i.on{background:#ffd27a;box-shadow:0 0 10px 3px rgba(255,190,110,.6)}
.v-card{max-width:520px;padding:16px 18px;gap:12px}
.v-card p{font-size:15px}
@media (min-width:900px){
  .v-wrap{display:grid;grid-template-columns:1fr 420px;grid-template-rows:auto 1fr auto;align-content:stretch}
  .v-head{grid-column:1}
  .moments{grid-column:1;grid-row:2;align-self:start}
  .v-card{grid-column:2;grid-row:3;justify-self:end}
  .agni{bottom:22vh}
}

/* ================= RSVP (single card) ================= */
.rsvp .wrap{max-width:640px}
.rsvp-card{gap:16px}
.choice{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.choice button{min-height:60px;border-radius:var(--r);border:1.5px solid var(--line-2);font-size:17px;background:#fff;transition:all .2s}
.choice button[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.field{display:flex;flex-direction:column;gap:8px}
.field-l{font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
html[lang=hi] .field-l{letter-spacing:0}
.stepper{display:flex;align-items:center;gap:14px}
.stepper button{width:56px;height:56px;border-radius:50%;border:1.5px solid var(--ink);font-size:26px;display:flex;align-items:center;justify-content:center}
.stepper output{font:400 48px/1 var(--serif);min-width:56px;text-align:center;font-variant-numeric:lining-nums tabular-nums}
.input{font:400 17px var(--sans);padding:14px;border:1.5px solid rgba(33,31,58,.22);border-radius:var(--r);background:#fff;color:var(--ink);width:100%}
textarea.input{resize:vertical;min-height:90px}
.names-in{display:flex;flex-direction:column;gap:8px}
.err{color:var(--red);font-size:15px}
.wa-note{font-size:14px;color:var(--ink-3);text-align:center;margin:0}
.big{min-height:60px;font-size:18px}
.center{text-align:center;align-items:center}
.seal-env{position:relative;width:200px;height:130px;margin:40px auto 4px}
.seal-env .eback{position:absolute;inset:0;background:#e9dfcf;border-radius:4px}
.seal-env .letter{position:absolute;left:14px;right:14px;top:-40px;height:110px;background:#fff;border-radius:3px;box-shadow:0 4px 10px rgba(0,0,0,.08);animation:tuck .9s var(--ease) .2s forwards;padding:12px;display:flex;flex-direction:column;gap:6px}
.seal-env .letter i{display:block;height:5px;border-radius:3px;background:#e6ddd0}
.seal-env .letter i:nth-child(2){width:70%}
.seal-env .efront{position:absolute;inset:0;background:linear-gradient(160deg,#f3eadb 0%,#eadfcd 100%);clip-path:polygon(0 30%,50% 62%,100% 30%,100% 100%,0 100%);border-radius:4px}
.seal-env .eflap{position:absolute;left:0;right:0;top:0;height:82px;background:#e2d5c0;clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transform:rotateX(180deg);opacity:0;animation:close .6s var(--ease) 1.05s forwards;z-index:3}
.seal-env .wax{position:absolute;left:50%;top:62px;width:44px;height:44px;margin-left:-22px;border-radius:50%;background:var(--red);color:var(--cream);font:400 15px var(--serif);display:flex;align-items:center;justify-content:center;z-index:4;transform:scale(0);animation:stamp .45s cubic-bezier(.3,1.6,.5,1) 1.6s forwards}
@keyframes tuck{to{transform:translateY(58px)}}
@keyframes close{from{opacity:1}to{opacity:1;transform:rotateX(0)}}
@keyframes stamp{to{transform:scale(1)}}

/* ================= See you in Alwar (sunrise, lanterns) ================= */
.finale{padding:80px 16px 120px;min-height:100vh}
.fin-grid{display:flex;flex-direction:column;gap:56px;position:relative;z-index:1}
.fin-rsvp,.fin-end{display:flex;flex-direction:column;gap:16px}
.fin-end .on-sky{text-align:center;align-items:center}
.fin-end .lead{margin:0 auto}
.fin-end .hosts{grid-template-columns:1fr}
@media (min-width:900px){.fin-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}.fin-end .on-sky{text-align:left;align-items:flex-start}.fin-end .lead{margin:0}}
.e-wrap{align-items:center;text-align:center;max-width:720px}
.hosts{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));text-align:left;width:100%}
.host{background:rgba(255,253,248,.92);border-radius:14px;padding:14px;display:flex;align-items:center;gap:14px;box-shadow:0 10px 30px rgba(20,18,38,.12)}
.host .shot{width:56px;height:56px;flex:none;border-radius:50%}
.host .shot.empty::before{content:attr(data-initial);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:italic 300 32px var(--serif);color:var(--red);opacity:.45}
.host .who{flex:1;min-width:0}
.host .nm{font-size:18px;font-weight:500}
.host .side{font-size:14px;color:var(--ink-4)}
.group{border:1.5px dashed var(--red);color:var(--red);background:rgba(255,253,248,.85)}
.e-wrap>.btn-line{background:rgba(255,253,248,.85);color:var(--ink)}
.foot-note{font-size:14px;color:var(--on-sky-2)}
.lanterns{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lantern{position:absolute;bottom:-60px;width:18px;height:24px;border-radius:5px 5px 7px 7px;background:linear-gradient(#ffe2a3,#f39a4b);box-shadow:0 0 18px 6px rgba(255,170,80,.45);opacity:0}
.in .lantern{animation:float var(--dur) linear var(--del) infinite}
@keyframes float{0%{transform:translate(0,0);opacity:0}10%{opacity:.95}85%{opacity:.8}100%{transform:translate(var(--dx),-115vh);opacity:0}}

/* ================= Moments menu ================= */
.menu{position:fixed;inset:0;z-index:150;background:var(--paper);overflow-y:auto;animation:fadeIn .25s ease both}
.menu-in{max-width:760px;margin:0 auto;padding:16px 16px 30px;display:flex;flex-direction:column;gap:14px}
.menu-top{display:flex;justify-content:space-between;align-items:center}
.menu-top h2{margin:0;font:400 34px/1 var(--serif)}
.menu ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.menu li a{width:100%;display:grid;grid-template-columns:96px 1fr auto;align-items:center;gap:12px;text-decoration:none;padding:14px 16px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);min-height:64px}
.menu li a:hover{border-color:var(--ink)}
.menu .when{font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
.menu .t{font-size:18px;font-weight:500}
.x{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:22px}

/* ================= Save the date sheet ================= */
.cal-sheet{position:fixed;left:0;right:0;bottom:0;z-index:160;max-height:92%;overflow-y:auto;background:var(--paper);border-radius:18px 18px 0 0;box-shadow:0 -20px 50px rgba(20,18,38,.25);animation:sheetUp .5s var(--ease) both;padding-bottom:env(safe-area-inset-bottom,0px);overscroll-behavior:contain}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.cal-in{max-width:560px;margin:0 auto;padding:12px 18px 26px;display:flex;flex-direction:column;gap:16px}
.cal-bar{display:flex;justify-content:space-between;align-items:center}
.grip{width:46px;height:5px;border-radius:3px;background:var(--line-2)}
#na-cal-body{display:flex;flex-direction:column;gap:16px}
.cal-h{margin:0;font:400 34px/1.05 var(--serif)}
.cal-sub{margin:-8px 0 0;color:var(--ink-3);font-size:15px}
.leaf{position:relative;align-self:center;width:230px;background:var(--card);border-radius:8px;box-shadow:0 16px 36px rgba(33,31,58,.18);transform-origin:50% -10px;animation:swing 1.4s cubic-bezier(.3,1.4,.5,1) both;text-align:center}
@keyframes swing{0%{transform:rotate(-14deg) translateY(-30px);opacity:0}40%{opacity:1}100%{transform:none}}
.leaf-top{background:var(--red);color:var(--cream);font:500 12px var(--sans);letter-spacing:.22em;text-transform:uppercase;padding:14px 0 10px;position:relative;border-radius:8px 8px 0 0}
.leaf-top::before,.leaf-top::after{content:"";position:absolute;top:-7px;width:10px;height:16px;border-radius:5px;background:#cbbda6;box-shadow:inset 0 -2px 0 rgba(0,0,0,.15)}
.leaf-top::before{left:56px}.leaf-top::after{right:56px}
.leaf-day{font:400 96px/1 var(--serif);color:var(--ink);padding-top:10px;font-variant-numeric:lining-nums}
.leaf-wd{font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.leaf-ev{font:italic 400 24px/1.2 var(--serif);padding:8px 12px 0}
.leaf-t{font-size:15px;color:var(--ink-2);padding:2px 12px 16px}
.leaf-tear{height:10px;background:radial-gradient(circle at 5px 10px,var(--paper) 4px,transparent 4.5px) 0 0/10px 10px repeat-x;border-top:1px dashed var(--line-2)}
html[lang=hi] .leaf-top,html[lang=hi] .leaf-wd{letter-spacing:0}
.cal-opts{display:flex;flex-direction:column;gap:10px}
.cal-opt{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;border:1.5px solid var(--line-2);border-radius:10px;background:var(--card);text-decoration:none;text-align:left;width:100%;transition:border-color .2s;animation:rise .5s var(--ease) both;animation-delay:calc(var(--k) * 80ms + 400ms)}
.cal-opt:hover{border-color:var(--ink)}
.cal-opt .ico{width:40px;height:40px;border-radius:9px;flex:none;display:flex;align-items:center;justify-content:center;font:700 14px var(--sans);color:#fff}
.cal-opt .ico svg{width:22px;height:22px}
.cal-opt .tx{flex:1;display:flex;flex-direction:column}
.cal-opt .tx b{font-size:17px;font-weight:500}
.cal-opt .tx small{font-size:13px;color:var(--ink-3)}
.cal-opt .go{font-size:20px;color:var(--ink-3)}
.cal-opt.done{border-color:#4d7a4d}
.cal-opt.done .go{color:#4d7a4d}
.cal-note{font-size:13px;color:var(--ink-3);text-align:center;margin:0}
.month{background:var(--card);border-radius:12px;box-shadow:0 12px 30px rgba(33,31,58,.1);padding:14px 14px 10px;animation:rise .6s var(--ease) both}
.month-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.month-h b{font:400 26px var(--serif)}
.month-h span{font-size:13px;color:var(--ink-3)}
.mgrid{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-variant-numeric:tabular-nums;row-gap:2px}
.mgrid .wd{font-size:11px;color:var(--ink-4);padding-bottom:6px}
.mgrid .d{position:relative;height:38px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--ink-2)}
.mgrid .d.hit{font-weight:700;color:var(--red)}
.mgrid .d svg{position:absolute;left:50%;top:50%;width:46px;height:40px;transform:translate(-50%,-50%);overflow:visible}
.mgrid .d path{fill:none;stroke:var(--red);stroke-width:1.8;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw .9s var(--ease) forwards;animation-delay:var(--dl)}
.ev-list{display:flex;flex-direction:column;gap:8px}
.ev-row{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 12px;animation:rise .5s var(--ease) both;animation-delay:calc(var(--k) * 80ms + 300ms)}
.ev-row .dt{text-align:center;line-height:1}
.ev-row .dt b{display:block;font:400 26px var(--serif);color:var(--red)}
.ev-row .dt small{font-size:11px;color:var(--ink-3);text-transform:uppercase}
.ev-row .nm{font-weight:500}
.ev-row .tm{font-size:13px;color:var(--ink-3)}
.ev-row a{font-size:14px;padding:10px 12px;border:1.5px solid var(--line-2);border-radius:8px;text-decoration:none;white-space:nowrap}
.ev-row a.done{border-color:#4d7a4d;color:#4d7a4d}

/* ================= Lightbox ================= */
.scrim{position:fixed;inset:0;z-index:155;background:rgba(20,18,38,.6);animation:fadeIn .25s ease both}
#na-scrim{z-index:170;background:rgba(20,18,38,.78)}
.lightbox{position:fixed;z-index:180;background:var(--ink);border-radius:var(--r);overflow:hidden;transition:left .45s var(--ease),top .45s var(--ease),width .45s var(--ease),height .45s var(--ease)}
.lightbox img{width:100%;height:100%;object-fit:contain;display:block}

html[lang=hi] .kicker,html[lang=hi] .env-kicker,html[lang=hi] .count span,html[lang=hi] .dm-k,html[lang=hi] .tbc{letter-spacing:0}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .lantern{display:none}
}

/* =====================================================================
   The journey: a pinned stage. The calendar stays, the scenery and one card change with the scroll.
   ===================================================================== */
.ridge{height:max(34vh,26vw,220px)}
.journey{position:relative;z-index:1;height:900vh}
.j-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}

/* the calendar that stays */
.tlbar{position:absolute;z-index:5;left:12px;right:12px;top:calc(64px + env(safe-area-inset-top,0px));max-width:860px;margin:0 auto;background:rgba(255,253,248,.92);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:10px 14px 6px;box-shadow:0 12px 34px rgba(20,18,38,.16);color:var(--ink)}
.tl-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.tl-now{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.tl-ev{font:italic 400 19px/1.1 var(--serif);color:var(--acc,var(--red));text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tl-track{position:relative;height:64px;margin:4px 6px 0}
.tl-day{position:absolute;top:0;font:500 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);transform:translateX(-50%);white-space:nowrap}
html[lang=hi] .tl-day{letter-spacing:0}
.tl-line{position:absolute;top:28px;height:2px;border-radius:1px;background:var(--line-2)}
.tl-night{position:absolute;top:24px;height:10px;border-radius:5px;background:repeating-linear-gradient(90deg,rgba(33,31,58,.28) 0 3px,transparent 3px 6px)}
.tl-seg{position:absolute;top:22px;height:14px;border-radius:7px;background:var(--pc);opacity:.55;transition:opacity .3s,transform .3s;padding:0}
.tl-seg.tbc{background:repeating-linear-gradient(90deg,var(--pc) 0 5px,transparent 5px 8px)}
.tl-seg.on{opacity:1;transform:scaleY(1.35)}
.tl-seg::after{content:"";position:absolute;inset:-14px -4px}
.tl-lbl{position:absolute;top:42px;font-size:11px;color:var(--ink-2);transform:translateX(-50%);white-space:nowrap;transition:color .3s,font-weight .3s;pointer-events:none}
.tl-lbl.on{color:var(--pc);font-weight:700}
.tl-arr{position:absolute;top:24px;left:0;width:10px;height:10px;margin-left:-5px;border-radius:50%;border:2px solid var(--gold);background:var(--card)}
.tl-head{position:absolute;top:29px;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;background:radial-gradient(circle,#fff6d8,#f6a25a);box-shadow:0 0 0 4px rgba(246,162,90,.25),0 2px 6px rgba(0,0,0,.2);z-index:2}
.tl-head.moon{background:radial-gradient(circle at 40% 40%,#fffbe9,#d9d2bd);box-shadow:0 0 0 4px rgba(120,110,160,.25),0 2px 6px rgba(0,0,0,.2)}

/* the scenery */
.scenes{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.scene.on{opacity:1}
.pin{position:absolute;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-100%)}
.pin-dot{width:22px;height:22px;border-radius:50% 50% 50% 0;transform:rotate(-45deg);background:var(--red);box-shadow:0 4px 10px rgba(0,0,0,.25);animation:pinDrop 1.2s cubic-bezier(.3,1.5,.5,1) both}
.pin-l{order:-1;font:italic 400 18px var(--serif);color:var(--on-sky);text-shadow:0 1px 10px var(--on-sky-shadow);white-space:nowrap}
.scene.on .pin-dot{animation:pinDrop 1.2s cubic-bezier(.3,1.5,.5,1) both,bob 2.4s ease-in-out 1.2s infinite}
@keyframes pinDrop{from{transform:translateY(-60px) rotate(-45deg);opacity:0}to{transform:rotate(-45deg);opacity:1}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 -6px}}
.scene .toran{position:absolute;left:0;right:0;width:100%;top:150px;height:110px;transform:none}
.scene .mandala{position:absolute;left:50%;right:auto;top:44%;width:min(560px,118vw);transform:translate(-50%,-50%)}
.scene .lights{position:absolute;left:0;right:0;width:100%;top:150px;height:90px;transform:none}
.scene .diyas{position:absolute;left:50%;bottom:calc(max(34vh,26vw,220px) * .55);transform:translateX(-50%);height:60px;margin:0;gap:22px}
.scene .diya{width:52px;height:22px}
.scene .h-back{position:absolute;inset:0;opacity:1}
.scene .h-back img{object-position:50% 22%;transform:none}
.scene .h-back::after{background:linear-gradient(to bottom,rgba(248,239,208,.75) 0%,rgba(248,239,208,0) 30%,rgba(248,239,208,0) 50%,rgba(248,239,208,.85) 85%)}
.garlands{position:absolute;left:50%;top:40%;width:min(560px,96vw);transform:translate(-50%,-50%);overflow:visible}
.scene .agni{position:absolute;left:50%;bottom:calc(max(34vh,26vw,220px) * .5);width:150px;height:70px;margin-left:-75px}
.scene .fire{opacity:var(--fire,0)}

/* one card per moment */
.j-cards{position:absolute;z-index:4;left:12px;right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px));top:200px;pointer-events:none}
.jcard{position:absolute;left:0;right:0;bottom:0;max-width:520px;max-height:100%;overflow-y:auto;margin:0 auto;background:rgba(255,253,248,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:16px;padding:18px 18px 16px;box-shadow:0 18px 50px rgba(20,18,38,.2);display:flex;flex-direction:column;gap:10px;opacity:0;transform:translateY(26px);transition:opacity .55s ease,transform .7s var(--ease);pointer-events:none}
.jcard.on{opacity:1;transform:none;pointer-events:auto}
.jcard h2{margin:0;font:400 clamp(40px,10vw,64px)/1 var(--serif)}
.jcard p{margin:0;color:var(--ink-2);font-size:16px}
.jcard .rows{font-size:15px}
.jcard.cap{background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;text-align:center;top:30%;bottom:auto}
.jcard.cap .whisper{margin:0;font:italic 400 clamp(28px,7vw,44px)/1.2 var(--serif);color:var(--on-sky);text-shadow:0 1px 16px var(--on-sky-shadow)}
@media (min-width:900px){
  .j-cards{left:max(32px,calc(50% - 560px));right:auto;width:470px;top:210px;bottom:40px}
  .jcard{margin:0}
  .jcard.cap{width:auto;left:0;right:auto;max-width:680px}
  .scene .mandala{left:68%;width:min(560px,44vw)}
  .garlands{left:66%;width:min(560px,44vw)}
  .scene .agni{left:66%}
  .scene .diyas{left:66%}
}
/* On phones the card covers the lower half, so the diyas and the fire sit higher, in the open sky. */
@media (max-width:899px){
  .scene .diyas{bottom:auto;top:33vh}
  .scene .agni{bottom:auto;top:36vh}
  .garlands{top:36%}
  .scene .mandala{top:40%}
}

/* =====================================================================
   Journey, second pass: phone first, words set on the scene, no boxes, no pinned calendar.
   ===================================================================== */
.tlbar,.j-cards{display:none}
.journey{height:900vh}

/* The words for each moment, sitting in a soft fade of the sky at the bottom of the screen */
.j-words{position:absolute;inset:0;z-index:4;pointer-events:none}
.jt{position:absolute;left:0;right:0;bottom:0;padding:120px 28px calc(40px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:12px;color:var(--on-sky);text-shadow:0 1px 14px var(--on-sky-shadow);background:linear-gradient(to top,color-mix(in srgb,var(--sky-bot) 94%,transparent) 0%,color-mix(in srgb,var(--sky-bot) 82%,transparent) 55%,transparent 100%);opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .9s var(--ease)}
.jt.on{opacity:1;transform:none}
.jt.on .jt-link{pointer-events:auto}
.jt-k{font:500 12px/1.4 var(--sans);letter-spacing:.2em;text-transform:uppercase;opacity:.8}
html[lang=hi] .jt-k{letter-spacing:.02em;font-size:13px}
.jt-time{font-variant-numeric:tabular-nums}
.jt h2{margin:0;font:400 clamp(60px,17vw,104px)/.92 var(--serif);letter-spacing:-.01em}
.jt p{margin:0;font-size:18px;line-height:1.55;color:var(--on-sky-2);max-width:30em}
.jt .jt-s{font:italic 400 21px/1.35 var(--serif);color:var(--on-sky)}
.jt-link{align-self:flex-start;font:italic 400 22px/1.3 var(--serif);color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;padding:6px 0}
.jt.on>*{animation:rise .9s var(--ease) both}
.jt.on>:nth-child(2){animation-delay:.08s}.jt.on>:nth-child(3){animation-delay:.16s}.jt.on>:nth-child(4){animation-delay:.24s}.jt.on>:nth-child(5){animation-delay:.32s}
.jt-cap{top:0;justify-content:center;align-items:center;text-align:center;background:none;padding:0 32px}
.jt-cap p{font:italic 400 clamp(30px,8.5vw,48px)/1.25 var(--serif);color:var(--on-sky);max-width:14em}
/* Haldi sits on its photo, in a turmeric wash */
.jt-haldi{color:var(--ink);text-shadow:none;background:linear-gradient(to top,rgba(248,239,208,.98) 0%,rgba(248,239,208,.92) 50%,rgba(248,239,208,0) 100%)}
.jt-haldi p{color:var(--ink-2)}
.jt-haldi .jt-k{color:#80600d;opacity:1}
/* The wedding moments sit on the palace wall below the window */
.jt[data-m=varmala],.jt[data-m=dinner],.jt[data-m=phere]{color:#f6ead2;--on-sky-2:rgba(246,234,210,.86);text-shadow:none;background:none}
.jt[data-m=varmala] .jt-k,.jt[data-m=phere] .jt-k{color:#e2bd72;opacity:1}
.jt[data-m=dinner]{top:auto;bottom:0;padding-bottom:calc(16vh + env(safe-area-inset-bottom,0px))}
.jt[data-m=dinner] p{color:#f6ead2}

/* A quiet trail of the moments down the right edge */
.j-dots{position:absolute;z-index:5;right:10px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:9px;pointer-events:none}
.j-dots i{width:6px;height:6px;border-radius:50%;background:var(--on-sky);opacity:.3;transition:all .4s}
.j-dots i.on{opacity:1;background:var(--gold);transform:scale(1.6)}
.j-dots i.done{opacity:.6}

/* Scenes, composed for a phone first */
.scene .toran{top:62px}
.scene .mandala{top:34%;width:min(520px,112vw)}
.scene .lights{top:62px}
.scene .diyas{bottom:auto;top:30vh}
.pin-l{font-size:20px}
.scene .h-back::after{background:linear-gradient(to bottom,rgba(248,239,208,.55) 0%,rgba(248,239,208,0) 22%)}
.scene .h-back img{object-position:50% 18%}

/* The jharokha: a carved maroon-and-gold palace window, drawn to fit the screen */
.arch{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.arch .wall{fill:#4a1c2c}
.arch .jaali{fill:url(#na-jaali)}
.arch .edge{fill:none;stroke:#d7ad5e;stroke-width:3}
.arch .edge2{fill:none;stroke:#d7ad5e;stroke-width:1;opacity:.55}
.arch .sill{fill:#6a2b3c;stroke:#d7ad5e;stroke-width:1.5}
.arch .far{fill:var(--far)}
.arch .mid{fill:var(--mid)}
.arch .strand{transform-box:fill-box;transform-origin:top center;animation:sway 5s ease-in-out infinite;animation-delay:var(--sd)}
.arch .strand line{stroke:#7a5b2a;stroke-width:1}
.garlands{position:absolute;overflow:visible;pointer-events:none}
.scene .agni{bottom:auto;top:0;left:0;margin:0;transform:translate(-50%,-50%)}
.rose-petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.rose{position:absolute;top:-20px;width:11px;height:8px;border-radius:60% 0 60% 0;background:var(--rc);opacity:.9;animation:fall var(--dur) linear var(--del) infinite}

@media (min-width:900px){
  .jt{left:6vw;right:auto;width:min(560px,40vw);bottom:9vh;padding:0;background:none}
  .jt h2{font-size:clamp(72px,7vw,112px)}
  .jt-cap{left:0;right:0;width:auto;bottom:0}
  .jt-haldi{padding:28px 30px;border-radius:4px;background:linear-gradient(to right,rgba(248,239,208,.95),rgba(248,239,208,.8))}
  .jt[data-m=dinner]{left:6vw;right:auto;width:min(560px,40vw);align-items:flex-start;text-align:left;bottom:9vh;padding:0}
  .scene .mandala{left:70%;top:46%;width:min(560px,44vw)}
  .scene .diyas{left:70%;top:46vh}
  .scene .h-back img{object-position:30% 25%}
  .j-dots{right:22px}
}
.scene .garlands{transform:none}
/* Arrive on a phone: the illustrated Alwar fills the open sky above the words */
.arrive-art{display:none}
@media (max-width:899px){
  .arrive-art{display:block;position:absolute;left:0;right:0;top:56px;width:100%;height:52vh}
  [data-scene=arrive] .pin{display:none}
  .arrive-art .a-fort path{stroke-dasharray:1;stroke-dashoffset:1}
  .scene.on .arrive-art .a-fort path{animation:draw 2.4s var(--ease) .4s forwards}
  .arrive-art .birds{transform:translate(-40px,70px)}
  .scene.on .arrive-art .birds{animation:fly 14s linear infinite .6s}
}
@keyframes fly{from{transform:translate(-40px,70px)}to{transform:translate(440px,40px)}}
@media (min-width:900px){
  .jt-haldi{padding:0;background:none}
  .scene .h-back::after{background:linear-gradient(to right,rgba(248,239,208,.95) 0%,rgba(248,239,208,.82) 34%,rgba(248,239,208,0) 58%)}
  .scene .h-back img{object-position:70% 25%}
}

/* The page ends with the RSVP, under the dawn sky */
.finale .fin-grid{display:flex;flex-direction:column;max-width:560px;margin:0 auto}
@media (min-width:900px){.finale .fin-grid{display:flex}}
.jt h2.long{font-size:clamp(46px,12.5vw,84px);line-height:.98}

/* Phere: the mandap scene, with the words on the night sky like the other moments */
.jt[data-m=phere]{color:var(--on-sky);--on-sky-2:rgba(243,236,224,.85);text-shadow:0 1px 14px var(--on-sky-shadow);background:linear-gradient(to top,color-mix(in srgb,var(--sky-bot) 94%,transparent) 0%,color-mix(in srgb,var(--sky-bot) 82%,transparent) 55%,transparent 100%)}
.jt[data-m=phere] .jt-k{color:#e2bd72;opacity:1}
.mandap-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.mandap-svg .glow{opacity:var(--fire,0);transition:opacity .4s}
.mandap-svg .rd{fill:rgba(255,255,255,.22);transition:fill .3s,filter .3s}
.mandap-svg .rd.on{fill:#ffd27a;filter:drop-shadow(0 0 5px rgba(255,190,110,.9))}
[data-scene=phere] .agni{position:absolute;width:0;height:0;margin:0;transform:none}
[data-scene=phere] .fire{position:absolute;left:0;bottom:0;margin-left:-17px;width:34px;height:46px}
.sparks{position:absolute;width:0;height:0;pointer-events:none;opacity:var(--fire,0)}
.sparks i{position:absolute;left:0;top:0;width:3px;height:3px;border-radius:50%;background:#ffd27a;box-shadow:0 0 6px 2px rgba(255,170,80,.7);animation:spark var(--dur) ease-out var(--del) infinite}
@keyframes spark{0%{transform:translate(0,0);opacity:1}100%{transform:translate(var(--dx),-140px);opacity:0}}
@media (min-width:900px){.jt[data-m=phere]{background:none}}
/* RSVP: a name and a number */
.rsvp-card .field+.field{margin-top:4px}
/* Phere: a real flame shape (two teardrops) instead of a round glow */
[data-scene=phere] .fire{width:44px;height:58px;margin-left:-22px;background:none;border-radius:0;box-shadow:none;filter:drop-shadow(0 0 10px rgba(255,170,70,.95)) drop-shadow(0 0 26px rgba(255,120,40,.6));transform-origin:50% 100%}
[data-scene=phere] .fire::before,[data-scene=phere] .fire::after{content:'';position:absolute;left:50%;border-radius:0 50% 50% 50%;transform:rotate(45deg)}
[data-scene=phere] .fire::before{width:32px;height:32px;margin-left:-16px;bottom:8px;background:radial-gradient(circle at 70% 70%,#ffd77a 0%,#ff8a2a 55%,#c9361f 100%)}
[data-scene=phere] .fire::after{width:16px;height:16px;margin-left:-8px;bottom:6px;background:radial-gradient(circle at 70% 70%,#fffbe6 0%,#ffd36b 100%)}
/* Varmala: the watercolour on its own cream paper, words beneath it */
[data-scene=varmala]{background:#faf8f4}
.v-back{position:absolute;inset:0}
.v-back img{position:absolute;left:0;top:56px;width:100%;height:62vh;object-fit:cover;object-position:50% 28%;-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent 100%);mask-image:linear-gradient(to bottom,#000 78%,transparent 100%)}
.jt[data-m=varmala]{color:var(--ink);--on-sky-2:var(--ink-2);text-shadow:none;background:linear-gradient(to top,#faf8f4 0%,#faf8f4 70%,rgba(250,248,244,0) 100%)}
.jt[data-m=varmala] p{color:var(--ink-2)}
.jt[data-m=varmala] .jt-k{color:var(--red);opacity:1}
@media (min-width:900px){
  .v-back img{left:auto;right:5vw;top:72px;width:auto;height:calc(100% - 88px);aspect-ratio:1122/1402;object-fit:contain;-webkit-mask-image:radial-gradient(ellipse 72% 70% at 50% 46%,#000 70%,transparent 100%);mask-image:radial-gradient(ellipse 72% 70% at 50% 46%,#000 70%,transparent 100%)}
  .jt[data-m=varmala]{background:none}
}
/* Phere: the second watercolour, same treatment as the varmala */
[data-scene=phere]{background:#faf8f4}
.jt[data-m=phere]{color:var(--ink);--on-sky-2:var(--ink-2);text-shadow:none;background:linear-gradient(to top,#faf8f4 0%,#faf8f4 70%,rgba(250,248,244,0) 100%)}
.jt[data-m=phere] p{color:var(--ink-2)}
.jt[data-m=phere] .jt-k{color:var(--red);opacity:1}
.jt[data-m=phere] .jt-link{color:var(--ink)}
@media (min-width:900px){.jt[data-m=phere]{background:none}}
/* Keep the fire in view on phones: crop from the top, fade only the last strip */
@media (max-width:899px){
  [data-scene=phere] .v-back img{object-position:50% 82%;-webkit-mask-image:linear-gradient(to bottom,#000 90%,transparent 100%);mask-image:linear-gradient(to bottom,#000 90%,transparent 100%)}
}
@media (max-width:899px) and (max-height:760px){
  [data-scene=phere] .v-back img{height:52vh;object-fit:contain;object-position:50% 50%}
}
/* Haldi: the watercolour too, on the same cream paper */
[data-scene=haldi]{background:#faf7f1}
.jt-haldi{background:linear-gradient(to top,#faf7f1 0%,#faf7f1 70%,rgba(250,247,241,0) 100%)}
@media (min-width:900px){.jt-haldi{background:none}}
/* Mehendi and the ring ceremony: their watercolours too, same treatment as the varmala.
   (The toran, mandala, lights and diyas stay in the page for the script, but the paintings replace them.) */
[data-scene=mehendi],[data-scene=tilak]{background:#faf8f4}
[data-scene=mehendi] .toran,[data-scene=mehendi] .mandala,[data-scene=tilak] .lights,[data-scene=tilak] .diyas{display:none}
.jt[data-m=mehendi],.jt[data-m=tilak]{color:var(--ink);--on-sky-2:var(--ink-2);text-shadow:none;background:linear-gradient(to top,#faf8f4 0%,#faf8f4 70%,rgba(250,248,244,0) 100%)}
.jt[data-m=mehendi] p,.jt[data-m=tilak] p{color:var(--ink-2)}
.jt[data-m=mehendi] .jt-k,.jt[data-m=tilak] .jt-k{color:var(--red);opacity:1}
[data-scene=tilak] .v-back img{object-position:50% 34%}
@media (min-width:900px){.jt[data-m=mehendi],.jt[data-m=tilak]{background:none}}
/* The logo inside the RSVP wax seal */
.seal-env .wax img{display:block;height:32px;width:auto}
/* Phones: the pinned scene fills the full screen even while the address bar is hidden (100lvh), and the words
   at the bottom sit above the bar when it's showing (the difference between the large and small viewport). */
@supports (height:100lvh){
  .j-stage{height:100lvh}
  .jt{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px) + (100lvh - 100svh))}
}
/* Phones: keep the moving layers on the GPU, and skip the costly blur behind the top bar (more opaque instead). */
.scene,.jt{will-change:opacity}
@media (max-width:899px){
  .top{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(248,244,236,.96)}
}
/* Moment-to-moment hand-offs. The new scene fades in on top while the old one stays solid underneath
   (no washed-out middle where both are see-through); the old one drops away once it's covered.
   The old words leave quickly, then the new ones come in, so two titles never overlap. */
.scene{z-index:0;transition:opacity 0s linear .8s}
.scene.on{z-index:1;transition:opacity .75s ease}
.jt{transition:opacity .22s ease,transform .3s ease}
.jt.on{transition:opacity .55s ease .2s,transform .8s var(--ease) .2s}
.jt.on>*{animation-delay:.2s}
.jt.on>:nth-child(2){animation-delay:.28s}.jt.on>:nth-child(3){animation-delay:.36s}.jt.on>:nth-child(4){animation-delay:.44s}.jt.on>:nth-child(5){animation-delay:.52s}
/* Haldi: the dress code, with a yellow swatch */
.jt .dress{display:flex;align-items:center;gap:10px;font:500 17px var(--sans);color:var(--on-sky)}
.jt .dress .sw{width:22px;height:22px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fbe08a,#f2b81d 70%);box-shadow:inset 0 0 0 1px rgba(128,96,13,.25)}