:root{--paper:#faf3e6;--ink:#574335;--soft:#7b6753;--gold:#9c7845;--rose:#945d4e;--line:#c5a77c;--glow:0 0 10px #faf3e6,0 0 3px #faf3e6;--serif:'Tiro Devanagari Hindi',serif;--display:'Amita',serif;--sanskrit:'Tiro Devanagari Sanskrit',serif;--numeral:'Rozha One',serif;--foil:linear-gradient(100deg,#6b4214 0%,#a06c1f 18%,#d9b25a 31%,#8a5a1a 46%,#b98a36 62%,#e6c676 74%,#764b17 100%);--sans:'Noto Sans Devanagari',sans-serif;color-scheme:light dark}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;background:#e8e0d1}body{margin:0;background:#e8e0d1;color:var(--ink);font:16px/1.85 var(--serif);-webkit-font-smoothing:antialiased}body.intro-active{overflow:hidden}
h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-weight:400}em{font-style:normal;color:var(--rose)}a{color:inherit;text-decoration:none}img,video{display:block;max-width:100%;height:auto}[hidden]{display:none!important}
button,textarea{font:inherit}button{cursor:pointer}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible,textarea:focus-visible{outline:2px solid var(--rose);outline-offset:5px}::selection{background:#dacaaf;color:#4a382b}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:fixed;top:-100px;left:15px;z-index:100;background:var(--paper);padding:12px;border:1px solid var(--gold)}.skip-link:focus{top:15px}
.reading-progress{position:fixed;top:0;left:0;right:0;z-index:80;height:2px;background:#aa8056;transform:scaleX(0);transform-origin:left}
.invitation-scroll{width:100%;max-width:600px;margin:0 auto;background:var(--paper);box-shadow:0 0 90px #6b492a16;overflow:hidden}

/* Hero: the video's final courtyard frame, with the invitation inside the arch. */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;overflow:hidden;background:var(--paper)}
.painted-world{position:absolute;inset:0;z-index:-1}.painted-world img,.intro-video{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.hero.drift .painted-world{transform:scale(1.04);transition:transform 18s cubic-bezier(.2,.2,.3,1)}
.hero-content{width:70%;margin:auto;padding:max(120px,16svh) 0 max(104px,15svh);text-align:center;text-shadow:var(--glow)}
.invocation{font-size:14px;color:#8d663b}
.ganesha-painting{width:132px;margin:4px auto 2px;mix-blend-mode:multiply;mask-image:radial-gradient(ellipse 68% 66% at 50% 50%,#000 61%,transparent 82%)}
.shloka{font-size:12.5px;line-height:1.85;color:#7f6349;white-space:nowrap}
.hero h1{color:var(--rose);font-size:50px;line-height:1.45;letter-spacing:-.04em;margin-top:10px}.hero h1>span{display:block;color:var(--gold);font-size:18px;line-height:1.7;letter-spacing:0}
.hero-home{font-size:22px;margin-top:2px}
.hero-date{font-size:13.5px;color:#735b43;margin-top:8px}.hero-date [aria-hidden]{padding:0 5px}
/* Scroll cue: a soft paper pill with moving chevrons, so guests know the invitation continues below. */
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;margin-top:14px;padding:7px 22px 6px;min-height:44px;border:1px solid #b8893f;border-radius:999px;background:#fffaf0e0;color:#7a4f22;text-shadow:none;box-shadow:0 0 0 3px #fff6e080,0 6px 20px #6a45231f;animation:door-call 2.4s ease-in-out infinite}.scroll-cue>b{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.5}.scroll-cue>small{font-size:11.5px;line-height:1.4;color:#9a7444}.cue-arrows{display:flex;flex-direction:column;align-items:center;margin-top:3px;height:16px}.cue-arrows>i{width:9px;height:9px;margin-top:-4px;border-right:1.5px solid #9c7845;border-bottom:1.5px solid #9c7845;transform:rotate(45deg);animation:cue-fall 1.6s ease-in-out infinite}.cue-arrows>i+i{animation-delay:.2s}
.enter-copy{transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.2,.7,.2,1)}.intro-boot .enter-copy,.intro-active .enter-copy{opacity:0;transform:translateY(14px)}
.hero h1.enter-copy{transition-delay:.15s}.hero-home.enter-copy{transition-delay:.25s}.hero-date.enter-copy{transition-delay:.35s}.scroll-cue.enter-copy{transition-delay:.5s}

/* Opening clip */
.entrance{position:absolute;inset:0;z-index:12;background:var(--paper) url('assets/intro-poster.webp') center/cover;transition:opacity 1.2s ease}.entrance.fading{opacity:0;pointer-events:none}
.intro-video{position:absolute;inset:0}
.open-doors{position:absolute;left:50%;bottom:13%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;min-width:210px;padding:10px 30px 12px;border:1.5px solid #b8893f;border-radius:999px;background:linear-gradient(#fffaf0f2,#f6e8cbf2);color:#7a4f22;font-family:var(--display);font-weight:700;font-size:22px;line-height:1.5;box-shadow:0 0 0 4px #fff6e099,0 8px 30px #6a452340;animation:door-call 2.4s ease-in-out infinite}.open-doors small{font-family:var(--sanskrit);font-weight:400;font-size:12.5px;color:#9a7444}
.entrance-skip{position:fixed;z-index:36;top:max(14px,env(safe-area-inset-top));right:max(14px,calc((100vw - 600px)/2 + 14px));display:none;align-items:center;min-height:44px;padding:9px 16px;border:1px solid #bc9a67;border-radius:30px;background:#fff7e8c9;backdrop-filter:blur(6px);color:#7c5a37;font-size:13px;white-space:nowrap}.entrance-skip span{margin-left:8px}
.intro-active .entrance-skip{display:inline-flex}.awaiting-tap .entrance-skip{display:none}

/* Paper sections */
.paper-section{position:relative;background:var(--paper);text-align:center}
.paper-divider{display:flex;align-items:center;justify-content:center;gap:15px;width:170px;margin:20px auto;color:var(--gold);font-size:24px;line-height:1.3}.paper-divider>span{height:1px;width:44px;background:linear-gradient(90deg,transparent,#be9d6a80)}.paper-divider>span:last-child{transform:rotate(180deg)}
.eyebrow{font-size:13.5px;color:#947547}
.body-copy{font-size:16px;line-height:1.95;color:var(--soft)}
.small-label{font-size:13px;color:#8a755b;line-height:1.6;margin-bottom:4px}
.welcome{padding:46px 24px 4px}.family{padding:40px 24px 40px}
.welcome h2,.homecoming h2{font-size:30px;line-height:1.6;margin:8px 0 12px;letter-spacing:-.02em}
.elders{display:grid;gap:14px}.elders h3{font-size:19px;line-height:1.6;color:#71523c}
.hosts{margin-top:24px;padding-top:22px;border-top:1px solid #c2a47d40}.hosts h3{font-size:23px;line-height:1.65;color:var(--rose)}.hosts .name{white-space:nowrap}.hosts .and{font-size:14px;color:#9a805e;padding:0 3px}#hero-title:focus{outline:none}
.family-name{font-size:14.5px;color:#8a7053;margin-top:6px}
.ceremony{padding:42px 0 18px}.welcome+.ceremony{padding-top:14px}.family{border-top:1px solid #c2a47d33}
.date-block time{display:block}.date-number{display:block;font-size:84px;line-height:1.25;color:#9a654e;letter-spacing:-.04em;margin-top:2px}.month{display:block;font-size:18px;color:#69513b}
.start-time{font-size:15px;color:var(--rose);margin-top:4px}
.havan-scene{position:relative;margin:14px auto 0;max-width:520px}.havan-scene>img{width:100%;mix-blend-mode:multiply;mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}.havan-scene figcaption{font-size:13.5px;color:#977544;margin:2px 0 6px}
.flame-light{position:absolute;left:37%;top:28%;width:23%;height:38%;background:radial-gradient(ellipse,#fba43033,transparent 70%);mix-blend-mode:multiply;opacity:.3;animation:flame-breathe 3s ease-in-out infinite alternate;pointer-events:none}
.program{max-width:380px;padding:0 24px;margin:0 auto;list-style:none}.program li{padding:14px 0 16px;position:relative}.program li+li:before{content:'';position:absolute;top:0;left:calc(50% - 24px);width:48px;height:1px;background:#c2a47d70}
.program h3{font-size:21px;line-height:1.7;color:#76533e}.program p{font-size:15px;line-height:1.8;color:#826f58}.program .event-time{font-size:13.5px;color:var(--rose)}

/* Closing courtyard */
.homecoming{position:relative;isolation:isolate;display:flex;min-height:760px;text-align:center;overflow:hidden}
.homecoming-art{position:absolute;inset:0;z-index:-1}.homecoming-art img{width:100%;height:100%;object-fit:cover}
.homecoming-content{width:72%;margin:0 auto;padding:150px 0 120px;text-shadow:var(--glow)}
.homecoming .body-copy{font-size:15px}
.venue h3{font-size:27px;color:var(--rose);line-height:1.6}.venue-address{white-space:pre-line;font-size:15px;line-height:1.75;margin-top:14px;color:#6f5640;overflow-wrap:anywhere}.closing-date{font-size:14.5px;color:#846444;margin:8px 0 14px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:10px 18px;border:1px solid #b48c58;background:#faf3e699;font-size:14px;color:#77553b;line-height:1.6;transition:background .3s,transform .3s}.button:hover{background:#efdfc3;transform:translateY(-2px)}.button svg{width:17px;height:17px}
.closing-actions{padding:30px 24px 4px}.signature{font-size:15px;color:var(--rose)}
footer{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 26px;background:var(--paper);padding:22px 22px 40px;text-align:center;font-size:13px;color:#8c7559}footer>p{width:100%;font-size:14.5px}footer button,footer a{font:inherit;min-height:44px;padding:8px 0;color:inherit;background:none;border:0}footer button>span{font-family:var(--sans);font-size:17px;margin-right:5px}

/* Floating controls */
.motion-ready .reveal{opacity:0;transform:translateY(22px);transition:opacity 1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1)}.motion-ready .reveal.visible{opacity:1;transform:none}
@keyframes cue-fall{0%{opacity:0;transform:translateY(-4px) rotate(45deg)}50%{opacity:1}100%{opacity:0;transform:translateY(5px) rotate(45deg)}}@keyframes flame-breathe{to{opacity:.6;transform:scale(1.04)}}@keyframes door-call{50%{box-shadow:0 0 0 7px #f3dca666,0 8px 38px #b48c5880}}


/* Typography: calligraphic Amita for names and titles, classical Tiro for reading,
   Tiro Sanskrit italic for mantras, gold foil on the two hero moments. */
.invocation,.shloka,.havan-scene figcaption,footer>p,#welcome .eyebrow{font-family:var(--sanskrit)}
.shloka{font-style:italic;font-size:13.5px;letter-spacing:.01em}
.hero h1,.hero-home,.welcome h2,.homecoming h2,.elders h3,.hosts h3,.program h3,.venue h3{font-family:var(--display)}
.hero h1{font-weight:700;font-size:56px;line-height:1.55;letter-spacing:0;margin-top:6px}
.hero h1 .foil,.date-number{background:var(--foil);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 .6px #5a3610) drop-shadow(0 1.5px 0 #fff4d6) drop-shadow(0 0 8px #faf3e6);animation:foil-sweep 7s ease-in-out infinite}
.hero h1>span{font-weight:400;color:var(--rose);font-size:21px;line-height:1.5}
.hero-home{font-weight:700;font-size:24px;color:#6b4a35;margin-top:0}
.welcome h2,.homecoming h2{font-size:31px;line-height:1.7;letter-spacing:0}
.elders h3{font-size:19px}.hosts h3{font-weight:700;font-size:24px;line-height:1.7}.hosts .and{font-family:var(--serif);font-weight:400}
.program h3{font-size:21px}.venue h3{font-weight:700;font-size:29px}
.date-number{font-family:var(--numeral);font-size:96px;line-height:1.15;letter-spacing:0;padding:0 .08em}
.body-copy{font-size:16.5px}.hero-date{font-size:14px}
.lotus{width:34px;height:17px;fill:#b48c4a}.paper-divider{gap:12px}
@keyframes foil-sweep{0%,55%{background-position:100% 0}100%{background-position:0 0}}
.kin{margin-top:22px;padding-top:20px;border-top:1px solid #c2a47d40}
.kin-names{font-family:var(--display);font-size:19px;line-height:1.8;color:#71523c}.kin-names.kin-lead{font-size:22.5px;font-weight:700}
.program{max-width:420px}.program li{padding:18px 0 20px}.program h3{font-size:27px}.program p{font-size:17px}.program .event-time{font-size:15.5px;margin-top:2px}
.welcome h2 em,.homecoming h2 em{white-space:nowrap}.elders h3{font-size:21px}
.map-button{gap:8px;border-radius:999px;padding:9px 22px;background:#fffaf0e6;font-family:var(--display);font-weight:700;font-size:17px;color:#7a4f22;border-color:#b8893f;box-shadow:0 0 0 3px #fff6e080,0 6px 20px #6a45231f;text-shadow:none}
@media(min-width:601px){body{padding:24px 0}.hero{min-height:min(1000px,calc(100svh - 48px))}.hero-content{padding-top:170px;padding-bottom:140px}.ganesha-painting{width:160px}.shloka{font-size:14px}.hero h1{font-size:68px}.hero h1>span{font-size:24px}.hero-home{font-size:29px}.hero-date{font-size:15.5px}.invocation{font-size:16px}
 .welcome{padding:56px 48px 8px}.family{padding:48px 48px 48px}.welcome h2,.homecoming h2{font-size:36px}.body-copy{font-size:17.5px}.elders h3{font-size:24px}.hosts h3{font-size:27px}.small-label{font-size:14px}
 .date-number{font-size:112px}.month{font-size:21px}.program h3{font-size:31px}.program p{font-size:18px}.kin-names{font-size:21px}.kin-names.kin-lead{font-size:30px}.scroll-cue>b{font-size:18px}.scroll-cue>small{font-size:12.5px}
 .homecoming{min-height:960px}.homecoming-content{padding-top:200px}.homecoming .body-copy{font-size:17px}.venue h3{font-size:32px}}
@media(max-width:360px){.hero-content{width:76%}.ganesha-painting{width:118px}.shloka{font-size:11.5px}.hero h1{font-size:44px}.hero-home{font-size:20px}.hero-date{font-size:12.5px}.welcome h2,.homecoming h2{font-size:26px}.elders h3{font-size:19px}.small-label{font-size:12px}.hosts h3{font-size:21px}.body-copy{font-size:14.5px}.homecoming-content{width:80%;padding-top:130px}.homecoming .body-copy{font-size:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal,.intro-active .enter-copy,.intro-boot .enter-copy{opacity:1;transform:none}.hero.drift .painted-world{transform:none}}

/* Declaring a dark theme stops Samsung Internet and Chrome from auto-darkening the page; the "dark theme" is the original palette. */
@media (prefers-color-scheme:dark){:root{--paper:#faf3e6;--ink:#574335;--soft:#7b6753;--gold:#9c7845;--rose:#945d4e;--line:#c5a77c}html,body{background:#e8e0d1;color:#574335}}
/* Samsung Internet darkens pages regardless of the above: invert its result back, and pre-invert pictures so they come out unchanged. */
html.samsung-dark{filter:invert(1) hue-rotate(180deg)}
html.samsung-dark img,html.samsung-dark video{filter:invert(1) hue-rotate(180deg)}
/* Blending happens before the inversion, so multiply becomes its inverse, screen; glows would turn into dark smudges. */
html.samsung-dark .ganesha-painting,html.samsung-dark .havan-scene>img{mix-blend-mode:screen}
html.samsung-dark .flame-light{display:none}
html.samsung-dark *{text-shadow:none!important}

/* Phones: sizes scale with screen width (320px to 600px), so lines keep their shape instead of overflowing or wrapping oddly. */
.nb{white-space:nowrap}.hero-date>.nb{display:block}
@media(max-width:600px){.hero-content{width:min(76%,440px)}.ganesha-painting{width:clamp(108px,34vw,150px)}.shloka{font-size:clamp(10.5px,3.4vw,14px)}
 .hero h1{font-size:clamp(42px,14.4vw,62px)}.hero h1>span{font-size:clamp(17px,5.4vw,22px)}.hero-home{font-size:clamp(19px,6.2vw,26px)}.hero-date{font-size:clamp(12.5px,3.7vw,15px);line-height:1.65}
 .welcome h2,.homecoming h2{font-size:clamp(24px,7.9vw,33px)}.body-copy{font-size:clamp(14.5px,4.2vw,17px)}.homecoming .body-copy{font-size:clamp(14px,3.9vw,16px)}
 .elders h3{font-size:clamp(17px,5vw,20px)}.hosts h3{font-size:clamp(19px,6.1vw,25px)}.kin-names{font-size:clamp(16.5px,4.9vw,19px)}.kin-names.kin-lead{font-size:clamp(23px,7.4vw,30px)}
 .homecoming-content{width:min(80%,440px)}.venue-address{font-size:clamp(13.5px,3.8vw,15.5px)}}
/* Phones: hosts as three centred lines (name / एवं / name); the address on a soft paper card so it reads over the painted railing. */
@media(max-width:600px){.hosts .name{display:block}.hosts .and{display:block;line-height:1.3}}
.venue-address{display:table;margin:14px auto 0;padding:6px 16px;border-radius:14px;background:#fffaf0d9;box-shadow:0 0 0 1px #d9bf9455;text-shadow:none}
/* Program card: the one block guests must remember, so it gets a framed paper card and large time badges. */
.program-title{font-family:var(--sanskrit);font-size:16px;color:#9a6a3c;margin:14px 0 12px;letter-spacing:.02em}
.program{width:calc(100% - 40px);max-width:420px;margin:0 auto;padding:12px 18px 8px;border:1.5px solid #c9a35f;border-radius:24px;background:radial-gradient(ellipse at 50% 0,#fffdf6,#f8ecd3 75%);box-shadow:inset 0 0 0 5px #fffaf0,inset 0 0 0 6px #dcc08c,0 12px 34px #6a45232e}
.program li{padding:16px 0 18px}.program li+li:before{left:calc(50% - 40px);width:80px;background:linear-gradient(90deg,transparent,#c9a35f,transparent)}
.program h3,.program li h3{font-weight:700;font-size:clamp(24px,7vw,30px);line-height:1.55;color:#8a4a36}
.program .event-time{display:inline-block;margin:6px 0 6px;padding:5px 20px 4px;border:1.5px solid #b8893f;border-radius:999px;background:linear-gradient(#fffaf0,#f3dfb6);font-family:var(--display);font-weight:700;font-size:clamp(19px,5.6vw,23px);line-height:1.5;color:#7a4f22;box-shadow:0 0 0 3px #fff6e0,0 4px 14px #b48c5840}
.program p:last-child{font-size:clamp(14.5px,4vw,16.5px)}
.kin-names.kin-lead{font-size:clamp(20px,5.9vw,23px)}
@media(max-width:600px){.kin-names.kin-lead{font-size:clamp(20px,5.9vw,23px)}}
/* Family-list version (variants/parivar): couples as name / एवं / name, so long names never squeeze. */
.couples{list-style:none;margin:0;padding:0;display:grid;gap:14px}.couples li{font-family:var(--display);font-size:clamp(16px,4.9vw,19px);line-height:1.6;color:#71523c}.couples li>span{display:block}
.couples .and,.kin-lead .and{font-family:var(--serif);font-size:13px;line-height:1.3;color:#9a805e}.kin-lead .and{font-weight:400;padding:0 4px}
.couples-lead li{font-weight:700;font-size:clamp(17px,5.2vw,20.5px);color:#7a4a38}