:root{
  --paper:#f4eee8;--paper-deep:#e9ded6;--ink:#4a4643;--muted:#8d827b;
  --accent:#9d7771;--accent-deep:#7d544f;--line:rgba(74,70,67,.22);
  --serif:"Cormorant Garamond",Georgia,serif;--sans:"DM Sans",Arial,sans-serif;
  --script:"Italianno",cursive;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);overflow-x:hidden}
a{text-decoration:none;color:inherit}button{font:inherit}
.preloader{position:fixed;inset:0;background:var(--paper);z-index:99;display:grid;place-content:center;text-align:center;transition:.7s ease}
.preloader .monogram-mark{width:170px;height:auto;opacity:.9}
.preloader.hide{opacity:0;visibility:hidden}
/* justify-content centres monogram + butterfly + copy as one block, so the
   whitespace above the logo matches the whitespace below the arrow. */
.cover{height:100svh;min-height:720px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-bottom:10px;background:linear-gradient(120deg,#f5efe9,#eee5df 50%,#f7f1ec)}
.topbar{z-index:5;display:flex;justify-content:center;align-items:center;padding:10px 5vw 0;font-size:.68rem;letter-spacing:.17em;text-transform:uppercase}
.monogram{display:flex;align-items:center}.monogram img{height:74px;width:auto;display:block}
/* The wordmark is inline SVG so the butterfly can be its own path and animate
   independently of the lettering. */
.monogram-mark{height:74px;width:auto;display:block;overflow:visible}
.mono-script,.mono-butterfly{fill:#1c1917}
/* Two nested transforms: the group drifts, the path flaps. The flap scales
   about the body (far left of the shape) so the wings fold toward it. */
.mono-bf{transform-box:fill-box;transform-origin:50% 60%}
.mono-butterfly{transform-box:fill-box;transform-origin:6% 82%}
.cover-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:18px}
.cover-nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 24px;
  border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.5);
  font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;
  transition:background .28s,color .28s,border-color .28s,transform .28s,box-shadow .28s}
.cover-nav a:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-2px);box-shadow:0 10px 22px rgba(74,70,67,.16)}
.cover-nav a:active{transform:translateY(0);box-shadow:none}
.cover-nav a.primary{border-color:var(--accent);color:var(--accent-deep);background:rgba(157,119,113,.1)}
.cover-nav a.primary:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;box-shadow:0 10px 22px rgba(125,84,79,.3)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cover-copy{z-index:3;text-align:center;margin:0 auto}
.micro{font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);margin:0}
.thin-rule{width:75px;height:1px;background:var(--line);margin:10px auto}
.cover-copy .script{font-family:var(--script);font-size:2.8rem;line-height:.7;color:var(--accent);margin-top:8px}
.cover-copy h1{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:.16em;font-size:clamp(3.5rem,7.4vw,6.4rem);line-height:.8;margin:6px 0 14px}
.names{font-family:var(--script);font-size:3.5rem;color:#6d625e;margin:0 0 12px}.names span{font-family:var(--serif);font-size:1.3rem;color:var(--accent)}
.date{font-size:.66rem;letter-spacing:.3em;margin:0}.place{font-size:.55rem;letter-spacing:.22em;color:var(--muted)}
.round-arrow{display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--line);border-radius:50%;margin:14px auto 0;font-size:1.1rem;transition:.3s}.round-arrow:hover{background:var(--ink);color:var(--paper)}
/* A flex item, not absolute: the copy can never collide with it. The two auto
   margins here and on .cover-copy split the free space, centring them as a pair. */
.butterfly{position:static;z-index:1;width:min(215px,46vw,26vh);margin:24px auto 16px;pointer-events:none}
.butterfly svg{width:100%;height:auto;filter:drop-shadow(8px 14px 12px rgba(74,70,67,.14))}
.wing-fill{fill:url(#wingGlow);stroke:#8f746c;stroke-width:1.4}
.wing-fill.lower{fill:#e4d5cc;opacity:.95}
.wing-vein{stroke:#9d7771;stroke-width:1;opacity:.45;fill:none}
.wing-spot{fill:#f7f3ee;stroke:#9d7771;stroke-width:1}
.butterfly-body{fill:#6a5d58}
.antenna{stroke:#6a5d58;stroke-width:1.6;fill:none;stroke-linecap:round}
.antenna-tip{fill:#6a5d58}
.wing-left,.wing-right{transform-box:fill-box;transform-origin:right center}
.wing-right{transform-origin:left center}
.paper-wash{position:absolute;bottom:-25%;left:-10%;width:120%;height:45%;background:rgba(255,255,255,.3);filter:blur(35px);border-radius:50%}
/* Two layers on purpose: the wrapper carries the scroll parallax, the inner
   element carries the endless drift, so the two transforms never overwrite. */
.flit{position:absolute;pointer-events:none;z-index:2;
  transform:translateY(calc(var(--scroll-p,0) * var(--par,0px)));
  transition:transform .2s linear;will-change:transform}
.flit-drift{width:var(--s);opacity:0}
.flit svg{width:100%;height:auto;display:block;transform:rotate(var(--tilt,0deg))}
/* Strokes are sized for the 240-wide viewBox shrunk to ~45px, so they read as
   hairlines rather than vanishing. */
.flit .wing-fill{fill:var(--w1);stroke:var(--wd);stroke-width:3;stroke-opacity:.5}
.flit .wing-fill.lower{fill:var(--w2)}
.flit .wing-spot{fill:#fff;opacity:.45;stroke:none}
.flit .butterfly-body{fill:var(--wd)}
.flit .antenna{stroke:var(--wd);stroke-width:5;fill:none;stroke-linecap:round;opacity:.8}
.flit .antenna-tip{fill:var(--wd);opacity:.8}
.events h2,.countdown h2,.details h2,.rsvp h2,.map-section h2{font-family:var(--serif);font-weight:400;font-size:clamp(3rem,6vw,5.7rem);line-height:.86;letter-spacing:-.04em;margin:24px 0}
h2 em{font-style:normal;color:var(--accent)}
.ticker{position:relative;overflow:hidden;padding:26px 0;background:var(--accent);color:#f7f2ed;border-block:1px solid rgba(74,70,67,.12)}
.ticker-track{display:flex;align-items:center;gap:26px;width:max-content;white-space:nowrap}
.ticker-track span{font-family:var(--serif);font-size:1.5rem;letter-spacing:.04em}
.ticker-track i{font-style:normal;font-size:.7rem;opacity:.65}
.events{background:#e9ded6;padding:140px 8vw 100px;position:relative;overflow:hidden}.events-head{max-width:1050px;margin:auto;display:grid;grid-template-columns:1fr 1fr;align-items:end;padding-bottom:60px}.events-intro{max-width:350px;color:var(--muted);font-family:var(--serif);font-size:1.25rem;line-height:1.5;justify-self:end}
.timeline{position:relative;max-width:780px;margin:0 auto;padding:10px 0 20px}
.timeline:before{content:"";position:absolute;left:92px;top:18px;bottom:18px;width:1px;background:var(--line)}
.event-card{display:grid;grid-template-columns:84px 24px 1fr;gap:18px;align-items:stretch;margin-bottom:22px}
.event-when{text-align:center;padding-top:28px;color:var(--muted)}
.event-when strong{display:block;font-family:var(--serif);font-size:2.9rem;font-weight:400;line-height:.95;color:var(--ec,var(--ink))}
.event-when span{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink)}
.event-day{margin-bottom:4px}
.event-dot{position:relative}
.event-dot:before{content:"";position:absolute;left:50%;top:42px;width:11px;height:11px;border-radius:50%;background:var(--paper);border:1.5px solid var(--ec,var(--accent));transform:translateX(-50%);z-index:1;transition:.35s}
.event-card:hover .event-dot:before{background:var(--ec,var(--accent));box-shadow:0 0 0 5px color-mix(in srgb,var(--ec,var(--accent)) 18%,transparent)}
.event-body{position:relative;background:rgba(247,242,237,.82);border:1px solid var(--line);padding:30px 194px 32px 32px;box-shadow:0 10px 30px rgba(74,70,67,.05);transition:transform .35s ease,box-shadow .35s ease}
.event-body:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ec,var(--accent));opacity:.55;transition:.35s}
.event-card:hover .event-body{transform:translateY(-5px);box-shadow:0 18px 40px rgba(74,70,67,.11)}
.event-card:hover .event-body:before{opacity:1}
.event-card .event-body h3 em{color:var(--ec,var(--accent))}
.event-motif{position:absolute;right:26px;top:50%;width:152px;color:var(--ec,var(--accent));opacity:.22;pointer-events:none;
  transform:translateY(-50%);transition:opacity .4s ease,transform .4s ease}
.event-motif svg{display:block;width:100%;height:auto;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.event-card:hover .event-motif{opacity:.3;transform:translateY(-50%) rotate(-4deg) scale(1.05)}
/* Panel tracks the poster's own portrait ratio (~0.56) so the whole artwork reads
   at a sensible size rather than as a zoomed-in fragment. */
.ec-mehendi{--ec:#6f8463}.ec-sangeet{--ec:#9d6b82}.ec-haldi{--ec:#bf9436}.ec-wedding{--ec:#b05f4f}
.event-body .micro{margin-bottom:10px}
.event-time{display:flex;flex-wrap:wrap;align-items:center;gap:0 9px;margin:0 0 14px;
  font-size:.72rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ec,var(--accent))}
/* The day only rides along in the copy where the date column is hidden. */
.when-inline{display:none}
.when-inline:after{content:"·";margin-left:9px;opacity:.55}
.event-body h3{font-family:var(--serif);font-size:2.4rem;line-height:.92;font-weight:400;margin:0 0 16px}
.event-body h3 em{color:var(--accent);font-style:normal}
.event-body p:not(.micro):not(.event-time):not(.event-theme),.event-body span:not(.when-inline):not(.event-theme span){font-size:.75rem;line-height:1.6;color:var(--muted)}
/* A soft tinted chip — lighter than a bordered pill, and the label sits in its
   own solid swatch so the pair reads as one little badge. */
.event-theme{display:inline-flex;align-items:stretch;margin:16px 0 0;overflow:hidden;
  border-radius:4px;background:color-mix(in srgb,var(--ec,var(--accent)) 12%,transparent);
  font-size:.63rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ec,var(--accent));transition:background .3s ease}
.event-theme span{display:inline-flex;align-items:center;padding:7px 10px;margin-right:11px;
  background:color-mix(in srgb,var(--ec,var(--accent)) 22%,transparent);
  font-size:.54rem;letter-spacing:.15em;opacity:.85}
.event-theme{padding-right:14px;align-items:center}
.event-card:hover .event-theme{background:color-mix(in srgb,var(--ec,var(--accent)) 20%,transparent)}
.event-body a{display:inline-block;font-size:.62rem;text-transform:uppercase;letter-spacing:.13em;border-bottom:1px solid var(--ink);padding-bottom:4px;margin-top:14px}
.countdown{position:relative;text-align:center;padding:140px 7vw;background:#514945;color:#f5eee8;overflow:hidden}.countdown:before{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(244,238,232,.14);border-radius:50%;left:-170px;top:-100px}.countdown:after{content:"";position:absolute;width:350px;height:350px;border:1px solid rgba(244,238,232,.1);border-radius:50%;right:-130px;bottom:-150px}.countdown-inner{position:relative}.countdown-decor{font-size:1rem;color:#c7a49d}.countdown .micro{color:#c7b9b1}.countdown h2{font-size:clamp(3.2rem,6vw,5.5rem)}.countdown h2 em{color:#d1aaa2}
.timer{display:grid;grid-template-columns:repeat(4,1fr);max-width:700px;margin:55px auto 0}.timer div{border-right:1px solid rgba(244,238,232,.18)}.timer div:last-child{border:0}.timer strong{font-family:var(--serif);font-weight:400;font-size:4rem;display:block}.timer span{text-transform:uppercase;letter-spacing:.17em;font-size:.52rem;color:#c7b9b1}
.details{position:relative;overflow:hidden;max-width:1100px;margin:auto;padding:150px 8vw 80px;display:grid;grid-template-columns:1.12fr .88fr;gap:80px;align-items:center}
.details h2{font-size:clamp(2.7rem,4.7vw,4.5rem)}.details-left>p:last-child{max-width:440px;color:var(--muted);font-family:var(--serif);font-size:1.2rem;line-height:1.6}.details-right{border-top:1px solid var(--line)}.details-right div{display:flex;justify-content:space-between;gap:30px;padding:22px 0;border-bottom:1px solid var(--line)}.details-right span{font-size:.55rem;letter-spacing:.2em;color:var(--muted)}.details-right b{font-weight:500;font-size:.72rem;text-align:right}
.map-section{position:relative;overflow:hidden;max-width:1100px;margin:0 auto 130px;padding:0 8vw;display:grid;grid-template-columns:minmax(220px,.7fr) 1.3fr;gap:40px;align-items:center}
.map-section h2{margin-top:12px}
.map-copy p:not(.micro){color:var(--muted);font-family:var(--serif);font-size:1.15rem;line-height:1.5;margin:0 0 18px}
/* Spans the whole venue section rather than sitting in the narrow left column,
   which is the only way three of these fit side by side. */
.travel{grid-column:1/-1;list-style:none;margin:48px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.travel li{padding-top:22px;border-top:1px solid var(--line);text-align:center}
.travel svg{display:block;width:27px;height:27px;margin:0 auto 14px;
  fill:none;stroke:var(--accent);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.travel span{display:block;font-size:.54rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.travel b{display:block;font-weight:500;font-size:.78rem;color:var(--ink);line-height:1.35}
.travel em{display:block;font-style:normal;font-size:.68rem;color:var(--muted);margin-top:3px}
.map-link{display:inline-block;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--ink);padding-bottom:4px}
.map-frame{display:block;position:relative;min-height:320px;border:1px solid var(--line);overflow:hidden;background:#ddd4cd}
.map-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;filter:grayscale(.25) saturate(.85) contrast(.95)}
.map-overlay{position:absolute;right:14px;bottom:14px;z-index:1;background:var(--ink);color:#f7f2ed;font-size:.55rem;letter-spacing:.14em;text-transform:uppercase;padding:10px 12px}
.rsvp{display:grid;grid-template-columns:1fr 1fr;min-height:620px}.rsvp-art{background:linear-gradient(135deg,#d9c7be,#eee2db);display:grid;place-items:center;position:relative;overflow:hidden}
.mini-butterfly{width:210px}.mini-butterfly svg{width:100%;height:auto;filter:drop-shadow(8px 12px 10px rgba(74,70,67,.12))}
.mini-butterfly .wing-fill{fill:#f3ece6;stroke:#8f746c;stroke-width:1.4}
.mini-butterfly .wing-fill.lower{fill:#e4d5cc}
.rsvp-copy{display:flex;flex-direction:column;justify-content:center;padding:90px 10vw;background:#f7f2ed}.rsvp-copy>p:not(.micro){color:var(--muted);font-family:var(--serif);font-size:1.2rem;line-height:1.6;max-width:450px}.rsvp-button{display:inline-block;width:max-content;background:var(--ink);color:#fff;padding:17px 25px;font-size:.62rem;letter-spacing:.17em;margin-top:15px;transition:background .3s,transform .3s,box-shadow .3s}
.rsvp-button:not(.disabled):hover{background:var(--accent);transform:translateY(-3px);box-shadow:0 12px 26px rgba(157,119,113,.3)}
.event-body a,.map-link{transition:color .25s,border-color .25s}
.event-body a:hover,.map-link:hover{color:var(--ec,var(--accent));border-color:var(--ec,var(--accent))}
.timer div{transition:.3s}.timer div:hover strong{color:#e8c3bb}.rsvp-button.disabled{opacity:.45;cursor:not-allowed}.rsvp-copy small{color:var(--muted);font-size:.57rem;line-height:1.5;margin-top:14px;max-width:360px}
footer{position:relative;overflow:hidden;background:#3c3734;color:#eee5df;text-align:center;padding:75px 20px}
.footer-mark{height:92px;width:auto;margin:0 auto 8px;opacity:.92}
.footer-mark .mono-script,.footer-mark .mono-butterfly{fill:#eee5df}
footer p{font-family:var(--script);font-size:2rem;color:#cdb8b0}.footer small{font-size:.5rem;letter-spacing:.2em;color:#958983}
@media(max-width:800px){
  .cover{min-height:650px}.topbar{padding:8px 8vw 0}
  .cover-nav{gap:8px;margin-top:26px}.cover-nav a{padding:0 16px;font-size:.55rem;letter-spacing:.14em}
  .monogram img{height:58px}.butterfly{width:min(150px,40vw,18vh);margin-bottom:16px}
  .cover-copy .script{font-size:2.4rem}.cover-copy h1{font-size:3.2rem}.names{font-size:3.4rem}
  .ticker{padding:18px 0}.ticker-track{gap:18px}.ticker-track span{font-size:1.15rem}
  .events{padding:100px 8vw 70px}.events-head{grid-template-columns:1fr;gap:25px;padding-bottom:45px}.events-intro{justify-self:start}
  .timeline:before{left:18px}.event-card{grid-template-columns:16px 1fr;gap:14px}.event-when{display:none}.event-dot{grid-column:1}.event-body{grid-column:2;padding:22px 20px 24px}.event-body h3{font-size:2rem}
  .when-inline{display:inline}.event-time{font-size:.66rem;letter-spacing:.12em}
  .event-motif{width:60px;right:14px;top:18px;bottom:auto;transform:none;opacity:.2}
  .event-card:hover .event-motif{transform:rotate(-4deg) scale(1.05)}
  /* Only the time and title clear the corner icon; the description runs full width. */
  .event-body .event-time,.event-body h3{padding-right:70px}
  .timer strong{font-size:2.4rem}.timer span{font-size:.43rem}.details{grid-template-columns:1fr;gap:50px;padding:100px 9vw 40px}
  .map-section{grid-template-columns:1fr;margin-bottom:90px;padding:0 9vw}.map-frame{min-height:260px}
  .travel{grid-template-columns:1fr;gap:0;margin-top:34px}
  .travel li{display:grid;grid-template-columns:34px 1fr;column-gap:14px;align-items:center;padding:16px 0;border-top:0;border-bottom:1px solid var(--line);text-align:left}
  .travel svg{grid-row:span 3;width:24px;height:24px;margin:0}
  .travel span{margin-bottom:2px}
  .rsvp{grid-template-columns:1fr}.rsvp-art{min-height:330px}.rsvp-copy{padding:80px 10vw}.rsvp h2{font-size:3.8rem}
  .flit.wide-only{display:none}
}
/* Short laptop windows: scale the hero down so the scroll arrow isn't clipped. */
@media(min-width:801px) and (max-height:780px){
  .butterfly{width:min(150px,17vh);margin-bottom:16px}
  .cover-copy .script{font-size:2.5rem}
  .cover-copy h1{font-size:clamp(3rem,6vw,5rem)}
  .names{font-size:3.2rem}
}
@media(prefers-reduced-motion:no-preference){
  .cover-copy{animation:rise 1s .2s both}.butterfly-main{animation:float 5s ease-in-out infinite}
  .butterfly-main .wing-left{animation:flap-left 3.6s ease-in-out infinite}
  .butterfly-main .wing-right{animation:flap-right 3.6s ease-in-out infinite}
  .mini-butterfly{animation:float-soft 6.5s ease-in-out infinite}
  .mini-butterfly .wing-left{animation:flap-left 4.4s ease-in-out infinite}
  .mini-butterfly .wing-right{animation:flap-right 4.4s ease-in-out infinite}
  .flit-drift{animation:drift var(--dur) linear var(--delay) infinite}
  .flit .wing-left{animation:flap-soft-left var(--flap) ease-in-out infinite}
  .flit .wing-right{animation:flap-soft-right var(--flap) ease-in-out infinite}
  .ticker-track{animation:ticker 38s linear infinite}
  .ticker:hover .ticker-track{animation-play-state:paused}
  .js .reveal{opacity:0;transform:translateY(26px)}
  .js .reveal.in{opacity:1;transform:none;
    transition:opacity .85s cubic-bezier(.22,.7,.3,1) var(--rd,0s),transform .85s cubic-bezier(.22,.7,.3,1) var(--rd,0s)}
  .timer strong.tick{animation:pop .5s ease-out}
  .round-arrow{animation:nudge 2.8s ease-in-out infinite}
  .round-arrow:hover{animation-play-state:paused}
  .mono-bf{animation:mono-flutter 5.5s ease-in-out infinite}
  .mono-butterfly{animation:mono-flap 1.5s ease-in-out infinite}
}
@keyframes rise{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(10px)}}
@keyframes float-soft{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@keyframes flap-left{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
@keyframes flap-right{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.82)}}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pop{0%{transform:translateY(-6px);opacity:.35}60%{transform:translateY(0)}100%{opacity:1}}
@keyframes nudge{0%,72%,100%{transform:translateY(0)}82%{transform:translateY(5px)}92%{transform:translateY(0)}}
@keyframes mono-flutter{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  20%{transform:translate(3%,-9%) rotate(-7deg)}
  45%{transform:translate(6%,-4%) rotate(4deg)}
  70%{transform:translate(1%,-7%) rotate(-3deg)}
}
@keyframes mono-flap{
  0%,100%{transform:scaleX(1) scaleY(1)}
  50%{transform:scaleX(.7) scaleY(1.05)}
}
@keyframes flap-soft-left{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
@keyframes flap-soft-right{0%,100%{transform:scaleX(1)}50%{transform:scaleX(.9)}}
@keyframes drift{
  0%{transform:translate(0,0);opacity:0}
  12%{opacity:var(--o)}
  25%{transform:translate(calc(var(--dx)*.25),calc(var(--dy)*.25 - 20px))}
  50%{transform:translate(calc(var(--dx)*.5),calc(var(--dy)*.5 + 16px))}
  75%{transform:translate(calc(var(--dx)*.75),calc(var(--dy)*.75 - 12px))}
  88%{opacity:var(--o)}
  100%{transform:translate(var(--dx),var(--dy));opacity:0}
}