/* ============================================================
   DISHA & ISHAAN — Jaipur Marriott
   Palette read off the hotel: sandstone, coral dusk, pool blue, gold.
   ============================================================ */

:root{
  --sand-50:#fdf7f0;
  --sand-100:#f9ecdd;
  --sand-200:#f2dcc6;
  --sand-300:#e6c6a8;
  --clay:#c98a80;
  --clay-deep:#a8615c;
  --rose:#e08d86;
  --coral:#ef9f77;
  --gold:#c39a5a;
  --gold-lt:#e3c286;
  --pool:#8fb9c4;
  --pool-deep:#5d8f9d;

  /* pastel hues — added so the page isn't 11 shades of the same beige.
     Saturation stays low; it's the HUE spread that creates rhythm. */
  --sage:#aebfae;
  --sage-mid:#7f9784;      /* band ground */
  --sage-tint:#f1f3ec;     /* cream with a green cast */
  --mauve:#c9adb9;
  --mauve-mid:#a2849a;     /* band ground */
  --mauve-tint:#f7eef1;
  --pool-tint:#eef4f4;
  --blush-tint:#fbeee9;
  --apricot:#f2c79b;
  --marigold:#eeb168;
  --terra-mid:#b57a6d;     /* band ground */
  --ink:#3a2b28;
  --ink-soft:#6d5750;
  --white:#fffaf4;

  --display:"Cinzel",serif;
  --body:"Cormorant Garamond",Georgia,serif;
  --script:"Tangerine",cursive;
  --deva:"Tiro Devanagari Sanskrit",serif;

  --max:1120px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{
  scroll-behavior:smooth;scroll-padding-top:var(--nav-offset,4rem);
  -webkit-text-size-adjust:100%;
}
body{
  margin:0;background:var(--sand-50);color:var(--ink);
  font-family:var(--body);font-size:19px;line-height:1.7;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden;height:100vh}
body.is-gated{overflow:hidden;height:100svh}
body.is-gated>:not(.access-gate):not(script){visibility:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
::selection{background:var(--gold-lt);color:var(--ink)}

/* Nothing should flash a blue selection box or tap highlight when tapped.
   Prose stays selectable — see the opt-in list below. */
*{-webkit-tap-highlight-color:transparent}
button,a,label,summary,svg,canvas,
.seal,.envelope,.scratch,.hero,.intro,.acc__q,.nav,.kicker,.count__u,
.hero__names,.hero__eyebrow,.hero__venue{
  -webkit-user-select:none;user-select:none;
}
button:focus,a:focus,summary:focus{outline:none}
button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:4px;
}
p,li,address,blockquote,dd,dt,.story__body,.acc__a,.faq__a,.venue__addr{
  -webkit-user-select:text;user-select:text;
}

/* ─── shared type ─── */
.kicker{
  font-family:var(--display);font-size:.63rem;letter-spacing:.42em;
  text-transform:uppercase;color:var(--gold);margin:0 0 .9rem;font-weight:500;
}
.h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.6rem,4.4vw,2.5rem);letter-spacing:.06em;
  margin:0 0 1rem;color:var(--ink);
}
.lede{max-width:56ch;margin:0 auto;color:var(--ink-soft);font-size:1.05rem}
.amp{font-family:var(--body);font-style:italic;font-weight:400;color:var(--gold)}

.rule{
  display:flex;align-items:center;justify-content:center;gap:.7rem;
  margin:1.5rem auto;max-width:230px;color:var(--gold);
}
.rule::before,.rule::after{
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,transparent,currentColor);
}
.rule::after{background:linear-gradient(270deg,transparent,currentColor)}
.rule i{width:6px;height:6px;background:currentColor;transform:rotate(45deg);flex:none}

/* ============================================================
   PRIVATE INVITATION GATE
   ============================================================ */
.access-gate{
  position:fixed;inset:0;z-index:1000;visibility:visible!important;
  display:flex;align-items:center;justify-content:center;padding:1.5rem;
  background:
    radial-gradient(85% 65% at 50% 18%,rgba(255,255,255,.68),transparent 70%),
    linear-gradient(165deg,#fbe8d6,#f4d4bd 52%,#eab69f);
  opacity:1;
  transition:opacity var(--gate-fade,900ms) cubic-bezier(.4,0,.2,1);
}
.access-gate::before,.access-gate::after{
  content:"";position:absolute;width:min(32vw,220px);aspect-ratio:1;
  border:1px solid rgba(168,97,92,.18);transform:rotate(45deg);
}
.access-gate::before{left:-16%;top:-12%}
.access-gate::after{right:-16%;bottom:-12%}
.access-gate__card{
  position:relative;width:100%;max-width:520px;min-width:0;
  padding:clamp(2.5rem,8vw,4.2rem) 1.5rem;
  text-align:center;background:rgba(255,250,244,.86);
  border:1px solid rgba(195,154,90,.42);border-radius:3px;
  box-shadow:0 30px 70px -34px rgba(100,48,42,.62);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  transition:
    opacity var(--gate-fade,900ms) ease,
    transform var(--gate-fade,900ms) var(--ease),
    filter var(--gate-fade,900ms) ease;
}
.access-gate__mark{
  display:grid;place-items:center;width:76px;height:76px;margin:0 auto 1.5rem;
  border-radius:48% 52% 45% 55%/52% 46% 54% 48%;
  font-family:var(--display);font-size:1rem;font-weight:600;color:#f6d9c8;
  background:radial-gradient(circle at 34% 28%,#d4574c,#9e2b26 62%,#7d1d1a);
  box-shadow:0 12px 26px -14px rgba(120,40,32,.72);
}
.access-gate__kicker{
  margin:0 0 .75rem;font-family:var(--display);font-size:.6rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
}
.access-gate__title{
  margin:0;font-family:var(--display);font-size:clamp(1.35rem,5vw,2rem);
  font-weight:400;line-height:1.4;letter-spacing:.04em;color:var(--ink);
  overflow-wrap:break-word;
}
.access-gate__message,.access-gate__noscript{
  max-width:36ch;margin:1rem auto 0;color:var(--ink-soft);font-size:1rem;
}
.access-gate__loader{
  position:relative;display:block;width:46px;height:46px;margin:1.7rem auto 0;
}
.access-gate__loader::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid rgba(168,97,92,.2);
  border-top-color:var(--gold);border-right-color:rgba(168,97,92,.62);
  box-shadow:inset 0 0 12px rgba(227,194,134,.12);
  animation:gateSpin 1.8s cubic-bezier(.5,.15,.5,.85) infinite;
}
.access-gate__loader::after{
  content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  background:var(--gold);box-shadow:0 0 13px rgba(195,154,90,.55);
  transform:translate(-50%,-50%) rotate(45deg);
  animation:gatePulse 1.8s ease-in-out infinite;
}
.access-gate.is-denied .access-gate__loader{display:none}
.access-gate.is-denied .access-gate__mark{animation:gateSettle .7s var(--ease)}
.access-gate.is-leaving{opacity:0;pointer-events:none}
.access-gate.is-leaving .access-gate__card{
  opacity:.35;transform:translateY(-10px) scale(1.015);filter:blur(2px);
}
@keyframes gateSpin{to{transform:rotate(360deg)}}
@keyframes gatePulse{50%{opacity:.45;transform:translate(-50%,-50%) rotate(135deg) scale(.72)}}
@keyframes gateSettle{from{transform:scale(.86);opacity:.55}to{transform:none;opacity:1}}

/* ============================================================
   PROGRESS + PETALS
   ============================================================ */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:120;pointer-events:none}
.progress span{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--gold-lt),var(--gold),var(--rose));
  transition:width .12s linear;
}
.petals{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.85}

/* ============================================================
   ACT 0 · THE ENVELOPE
   ============================================================ */
.intro{
  position:fixed;inset:0;z-index:200;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.1rem;padding:2rem 1.25rem;overflow:hidden;
  transition:opacity .9s ease,visibility .9s;
}
.intro.is-gone{opacity:0;visibility:hidden;pointer-events:none}
.intro__sky{
  position:absolute;inset:-10%;
  background:
    radial-gradient(120% 80% at 50% 108%,#f7c9a4 0%,transparent 62%),
    radial-gradient(90% 70% at 18% 8%,#fbe7d3 0%,transparent 60%),
    linear-gradient(175deg,#fbe3cd 0%,#f6d3bb 45%,#eeb69c 100%);
}
.intro__sky::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side,rgba(255,255,255,.6),transparent 70%);
  animation:breathe 9s ease-in-out infinite;
}
@keyframes breathe{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.7;transform:scale(1.06)}}

.intro__eyebrow,.intro__hint{
  position:relative;margin:0;font-family:var(--display);
  font-size:.6rem;letter-spacing:.46em;text-transform:uppercase;
  color:var(--clay-deep);opacity:.85;
}
.intro__hint{opacity:0;animation:hintIn 1s var(--ease) 1.4s forwards}
@keyframes hintIn{to{opacity:.8}}
.intro.is-opening .intro__hint,.intro.is-opening .intro__eyebrow{
  opacity:0;transition:opacity .4s;animation:none;
}
.intro__credit{
  position:absolute;left:1rem;right:1rem;
  bottom:calc(1rem + env(safe-area-inset-bottom,0px));
  z-index:1;margin:0;text-align:center;
  font-size:.76rem;font-style:italic;letter-spacing:.04em;
  color:var(--clay-deep);opacity:.72;
}

.intro__scene{
  position:relative;width:min(90vw,440px);aspect-ratio:1/.78;
  perspective:1400px;
}
.envelope{
  position:absolute;inset:0;transform-style:preserve-3d;
  animation:float 6s ease-in-out infinite;
  transition:transform 1.1s var(--ease),opacity .8s ease;
}
@keyframes float{0%,100%{transform:translateY(0) rotateX(6deg)}50%{transform:translateY(-14px) rotateX(3deg)}}

.env__back,.env__front,.env__flap{position:absolute;inset:0;border-radius:6px}
.env__back{
  z-index:0;
  background:linear-gradient(160deg,#f6e2cd,#e8c8ab);
  box-shadow:0 40px 80px -28px rgba(120,64,52,.5);
  transform:translateZ(0);
  transition:opacity .8s ease,transform .9s var(--ease);
}
.env__front{
  z-index:2;
  transform:translateZ(2px);overflow:hidden;
  background:linear-gradient(165deg,#fbeeda,#eed4b8);
  clip-path:polygon(0 0,0 100%,100% 100%,100% 0,50% 56%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
  transition:opacity .8s ease,transform .9s var(--ease);
}
.env__front::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(195,154,90,.5),transparent);
}
.env__flap{
  z-index:3;
  transform-origin:top;transform:translateZ(3px);
  transition:transform 1s var(--ease),opacity .8s ease;
  clip-path:polygon(0 0,100% 0,50% 58%);
  background:linear-gradient(180deg,#f7e5cf,#e9cdae);
}
.env__flap-in{
  position:absolute;inset:0;backface-visibility:hidden;
  transform:rotateX(180deg);
  background:linear-gradient(180deg,#e2c2a2,#f3ddc4);
}

.env__card{
  position:absolute;left:6%;right:6%;top:6%;bottom:10%;
  z-index:1;transform:translateZ(1px);transform-origin:center bottom;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(255,255,255,.9),transparent 62%),
    linear-gradient(168deg,#fffdf8,#fdf2e3);
  border-radius:3px;
  box-shadow:0 12px 30px -14px rgba(120,64,52,.55),inset 0 0 0 1px rgba(198,160,90,.22);
  display:grid;place-items:center;padding:clamp(1rem,4vw,2rem);
  transition:transform 1.15s var(--ease),opacity .5s,box-shadow .9s var(--ease);
  will-change:transform;
}
/* double hairline frame, drawn inside the card edge */
.env__card::before,.env__card::after{
  content:"";position:absolute;pointer-events:none;border-radius:2px;
}
.env__card::before{inset:clamp(9px,3.2%,16px);border:1px solid rgba(198,160,90,.38)}
.env__card::after{inset:clamp(13px,4.4%,22px);border:1px solid rgba(198,160,90,.15)}

.env__card-inner{position:relative;text-align:center;opacity:0;transition:opacity .6s ease .4s}

/* small gold ornament: two tapering rules either side of a diamond */
.env__card-orn{position:relative;display:block;width:min(58%,150px);height:7px;margin:0 auto .9rem}
.env__card-orn::before,.env__card-orn::after{
  content:"";position:absolute;top:50%;width:calc(50% - 11px);height:1px;
}
.env__card-orn::before{left:0;background:linear-gradient(90deg,transparent,var(--gold))}
.env__card-orn::after{right:0;background:linear-gradient(270deg,transparent,var(--gold))}
.env__card-orn i{
  position:absolute;left:50%;top:50%;width:6px;height:6px;
  margin:-3px 0 0 -3px;transform:rotate(45deg);
  border:1px solid var(--gold);background:rgba(198,160,90,.28);
}

.env__card-rule{
  display:block;height:1px;width:44px;margin:.85rem auto .75rem;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.env__card-kicker{
  margin:0;font-family:var(--display);font-size:clamp(.5rem,1.6vw,.6rem);
  letter-spacing:.42em;text-indent:.42em;text-transform:uppercase;color:var(--gold);
}
.env__card-names{
  margin:1rem 0 0;font-family:var(--script);font-weight:700;
  font-size:clamp(2.4rem,9vw,3.6rem);line-height:1.02;color:var(--clay-deep);
}
/* the ampersand needs air — without this the two names read as one word */
.env__card-names .a{
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:.34em;color:var(--gold);vertical-align:.28em;margin:0 .2em;
}
/* A whisper, not a statement — it is standing in for the dates, so it
   must not look like them. */
.env__card-date{
  margin:0;font-family:var(--serif);font-style:italic;
  font-size:clamp(.7rem,2.2vw,.86rem);
  letter-spacing:.02em;color:var(--ink-soft);opacity:.85;
}
.env__card-date[hidden]{display:none}
.env__card-city{
  margin:.5rem 0 0;font-size:clamp(.58rem,1.8vw,.68rem);letter-spacing:.28em;
  text-indent:.28em;text-transform:uppercase;color:var(--ink-soft);opacity:.72;
}
.env__card-city[hidden]{display:none}

/* the wax seal */
.seal{
  position:absolute;left:50%;top:56%;width:104px;height:104px;
  z-index:4;
  transform:translate(-50%,-50%) translateZ(6px);
  display:grid;place-items:center;
  filter:drop-shadow(0 8px 14px rgba(120,40,32,.42));
  transition:transform .45s var(--ease),opacity .45s ease;
  animation:sealPulse 2.6s ease-in-out infinite;
}
@keyframes sealPulse{
  0%,100%{filter:drop-shadow(0 8px 14px rgba(120,40,32,.42))}
  50%{filter:drop-shadow(0 8px 22px rgba(190,70,55,.6))}
}
.seal::before,.seal::after{content:"";position:absolute;inset:0}
.seal::before{
  background:radial-gradient(circle at 34% 28%,#d4574c,#9e2b26 62%,#7d1d1a);
  border-radius:47% 53% 44% 56%/52% 46% 54% 48%;
}
.seal::after{
  inset:13px;
  background:radial-gradient(circle at 62% 70%,#a8342c,#8a221e);
  border-radius:52% 48% 55% 45%/46% 54% 46% 54%;
  box-shadow:inset 0 2px 5px rgba(0,0,0,.42),inset 0 -2px 4px rgba(255,255,255,.14);
}
.seal__text{
  position:relative;z-index:2;font-family:var(--display);font-weight:600;
  font-size:1.35rem;letter-spacing:.02em;color:#f6d9c8;
  text-shadow:0 1px 0 rgba(0,0,0,.5),0 -1px 0 rgba(255,255,255,.16);
}
.seal__amp{font-family:var(--body);font-style:italic;font-weight:400;opacity:.9}
.seal:hover{transform:translate(-50%,-50%) translateZ(6px) scale(1.07)}
.seal:active{transform:translate(-50%,-50%) translateZ(6px) scale(.95)}

/* stages */
.intro.is-opening .seal{opacity:0;transform:translate(-50%,-50%) translateZ(6px) scale(.5) rotate(-24deg);animation:none}
.intro.is-opening .env__flap{transform:translateZ(3px) rotateX(-172deg)}
.intro.is-opening .envelope{animation:none;transform:translateY(0) rotateX(6deg)}
.intro.is-lifted .env__card{
  transform:translateZ(1px) translateY(-78%) scale(.985) rotateZ(-.7deg);
  box-shadow:0 24px 44px -22px rgba(120,64,52,.68),inset 0 0 0 1px rgba(198,160,90,.22);
}
.intro.is-lifted .env__flap{
  opacity:0;pointer-events:none;
  transition:transform 1s var(--ease),opacity .22s ease;
}
.intro.is-lifted .env__card-inner{opacity:1}
.intro.is-pulled .env__card{
  z-index:4;
  transform:translateZ(7px) translateY(-84%) scale(1.01) rotateZ(-.25deg);
}
.intro.is-pulled .env__back{transform:translateZ(0) translateY(28%)}
.intro.is-pulled .env__front{transform:translateZ(2px) translateY(28%)}
.intro.is-pulled .env__flap{transform:translateZ(3px) translateY(28%) rotateX(-172deg)}
.intro.is-revealed .env__back,
.intro.is-revealed .env__front,
.intro.is-revealed .env__flap{opacity:0}
.intro.is-revealed .env__back{transform:translateZ(0) translateY(48%) scale(.94)}
.intro.is-revealed .env__front{transform:translateZ(2px) translateY(48%) scale(.94)}
.intro.is-revealed .env__flap{transform:translateZ(3px) translateY(48%) rotateX(-172deg) scale(.94)}
.intro.is-revealed .env__card{
  z-index:4;
  transform:translateZ(90px) translateY(-12%) scale(1.1) rotateZ(0);
  box-shadow:0 34px 64px -28px rgba(120,64,52,.68),inset 0 0 0 1px rgba(198,160,90,.22);
}

.intro__enter{
  position:absolute;left:50%;bottom:-.75rem;z-index:8;margin:0;
  padding:.85rem 2.6rem;border-radius:999px;
  font-family:var(--display);font-size:.66rem;letter-spacing:.36em;
  text-transform:uppercase;color:var(--white);
  background:linear-gradient(135deg,var(--clay-deep),#8d4a45);
  box-shadow:0 14px 30px -12px rgba(120,50,44,.7);
  opacity:0;transform:translate(-50%,14px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),box-shadow .3s;
}
.intro__enter.is-in{opacity:1;transform:translate(-50%,0)}
.intro__enter:hover{box-shadow:0 18px 38px -12px rgba(120,50,44,.85)}
.intro.is-entering .intro__enter{
  pointer-events:none;
  animation:enterDepart 1.35s var(--ease) forwards;
}
.intro.is-entering .env__card{
  opacity:0;filter:blur(2px);
  transform:translateZ(140px) translateY(-18%) scale(1.17);
  transition:transform 1.5s var(--ease),opacity 1.1s ease .2s,filter 1.1s ease .2s;
}
.intro.is-entering .intro__sky{
  transform:scale(1.045);
  transition:transform 1.7s var(--ease);
}
@keyframes enterDepart{
  0%{opacity:1;transform:translate(-50%,0) scale(1)}
  22%{transform:translate(-50%,2px) scale(.96)}
  46%{
    opacity:1;transform:translate(-50%,-4px) scale(1.035);
    box-shadow:0 0 0 8px rgba(255,250,244,.2),0 20px 42px -12px rgba(120,50,44,.82);
  }
  100%{opacity:0;transform:translate(-50%,-18px) scale(.92)}
}

.dissolve{
  position:fixed;inset:0;z-index:199;
  background:
    radial-gradient(circle at 50% 44%,#fffdf8 0%,#fdf7f0 48%,#f4dfcc 100%);
  opacity:0;transform:scale(1.025);pointer-events:none;
  transition:opacity 1.1s ease,transform 1.35s var(--ease);
}
.dissolve.is-on{opacity:1;transform:scale(1)}

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;
  padding:.85rem clamp(1rem,4vw,2.5rem);
  background:rgba(253,247,240,.34);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  box-shadow:0 1px 0 rgba(195,154,90,.12);
  transition:background .4s ease,backdrop-filter .4s ease,box-shadow .4s ease;
}
.nav.is-stuck{
  background:rgba(253,247,240,.9);backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(195,154,90,.24);
}
.nav__mark{
  font-family:var(--display);font-size:.72rem;letter-spacing:.34em;
  text-transform:uppercase;text-decoration:none;color:var(--clay-deep);
}
.nav__list{
  display:flex;gap:1.5rem;list-style:none;margin:0;padding:0;
}
.nav__list a{
  text-decoration:none;font-family:var(--display);font-size:.6rem;
  letter-spacing:.24em;text-transform:uppercase;color:var(--ink-soft);
  padding-bottom:3px;border-bottom:1px solid transparent;transition:.25s;
}
.nav__list a:hover,.nav__list a.is-active{color:var(--clay-deep);border-color:var(--gold)}
.nav__toggle{display:none;width:44px;height:44px;flex-direction:column;gap:5px;align-items:center;justify-content:center}
.nav__toggle span{display:block;width:22px;height:1.5px;background:var(--clay-deep);transition:.3s}
.nav__toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

/* ============================================================
   AMBIENT MUSIC
   ============================================================ */
.music-toggle{
  position:fixed;
  top:calc(var(--nav-offset,4rem) + .75rem + env(safe-area-inset-top,0px));
  right:1rem;z-index:210;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.55rem .85rem;border-radius:999px;
  font-family:var(--display);font-size:.54rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--clay-deep);background:rgba(255,250,244,.82);
  border:1px solid rgba(168,97,92,.28);
  box-shadow:0 10px 26px -15px rgba(90,52,44,.7);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:color .4s,background .4s,border-color .4s,transform .3s var(--ease),box-shadow .3s;
}
.music-toggle[hidden]{display:none}
.music-toggle:disabled{cursor:not-allowed;opacity:.55}
.music-toggle:hover{transform:translateY(-2px);box-shadow:0 14px 30px -15px rgba(90,52,44,.85)}
.music-toggle svg{width:18px;height:18px;overflow:visible}
.music-toggle__speaker{fill:currentColor}
.music-toggle__waves,.music-toggle__slash{
  fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;
  transition:opacity .25s;
}
.music-toggle__slash{opacity:0}
.music-toggle.is-muted .music-toggle__waves{opacity:0}
.music-toggle.is-muted .music-toggle__slash{opacity:1}
html.is-lit .music-toggle{
  color:#f0dcc4;background:rgba(40,24,40,.56);
  border-color:rgba(240,220,196,.34);
  box-shadow:0 10px 28px -14px rgba(0,0,0,.8);
}

/* ============================================================
   ACT 1 · HERO
   ============================================================ */
.hero{
  position:relative;min-height:100svh;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:6rem 1.25rem 5rem;
}
.hero__scene{position:absolute;inset:0;overflow:hidden}
/* base wash behind the photo — also the fallback if images fail */
.hero__scene .sky{
  position:absolute;inset:0;transition:background 1.6s var(--ease);
  background:linear-gradient(178deg,#fdf6ef 0%,#f9e8df 48%,#f4ded7 100%);
}
/* matches the top of the evening photo, so the two meet invisibly on phones */
.hero.is-lit .hero__scene .sky{
  background:linear-gradient(178deg,#2b2038 0%,#453354 44%,#6d4b5c 100%);
}

/* Two graded frames of the same photograph stacked; the lit one fades in
   when the lamp is switched on. Both are cropped identically, so the
   crossfade lands pixel-for-pixel. */
.photo{position:absolute;inset:0;will-change:transform}
.photo__f{position:absolute;inset:0;display:block}
.photo__f img{
  width:100%;height:100%;max-width:none;display:block;
  object-fit:cover;object-position:50% 62%;
}
.photo__f--night{opacity:0;transition:opacity 1.6s var(--ease)}
.hero.is-lit .photo__f--night{opacity:1}
/* the day frame cools very slightly as the evening one comes up */
.photo__f--day{transition:filter 1.6s var(--ease)}
.hero.is-lit .photo__f--day{filter:saturate(.9) brightness(.96)}

.hero__vignette{
  position:absolute;inset:0;pointer-events:none;
  transition:background 1.6s var(--ease);
  background:
    radial-gradient(118% 74% at 50% 38%,transparent 44%,rgba(112,72,62,.20) 100%),
    linear-gradient(180deg,rgba(253,247,240,.94) 0%,rgba(253,247,240,.80) 26%,rgba(253,247,240,.34) 46%,transparent 62%,rgba(253,247,240,.88) 100%);
}
.hero.is-lit .hero__vignette{
  background:
    radial-gradient(118% 74% at 50% 38%,transparent 40%,rgba(48,30,44,.44) 100%),
    linear-gradient(180deg,rgba(40,24,40,.72) 0%,rgba(44,27,42,.50) 30%,rgba(44,27,42,.18) 48%,transparent 64%,rgba(253,247,240,.72) 100%);
}

/* Lit mode drops the sky into dusk, so the maroon type has to come up to
   cream to stay readable. Everything transitions with the crossfade. */
.hero__eyebrow,.hero__names,.hero__venue,.hero__count,.scrollcue{
  transition:color 1.6s var(--ease),text-shadow 1.6s var(--ease);
}
/* The daytime photo is pale and detailed, so keep the varied ink palette
   while adding a tight cream halo behind the type. */
.hero:not(.is-lit) .hero__eyebrow,
.hero:not(.is-lit) .hero__venue,
.hero:not(.is-lit) .cd i,
.hero:not(.is-lit) .cd__voice,
.hero:not(.is-lit) .scrollcue{
  text-shadow:0 1px 1px rgba(255,250,244,.98),0 0 11px rgba(255,250,244,.95);
}
.hero:not(.is-lit) .hero__names,
.hero:not(.is-lit) .cd b,
.hero:not(.is-lit) .cd__voice--solo{
  text-shadow:0 1px 1px rgba(255,250,244,.98),0 0 14px rgba(255,250,244,.95),0 3px 28px rgba(255,240,220,.82);
}
.hero.is-lit .hero__eyebrow,
.hero.is-lit .hero__venue,
.hero.is-lit .scrollcue{color:#f0dcc4}
.hero.is-lit .hero__names{
  color:#fff6e6;text-shadow:0 2px 30px rgba(40,22,36,.55);
}
.hero.is-lit .hero__names .a{color:var(--gold-lt)}
.hero.is-lit .cd b{color:#fff6e6}
.hero.is-lit .cd i{color:#e0c9ae}
.hero.is-lit .scrollcue i{background:linear-gradient(180deg,rgba(240,220,196,.9),transparent)}
.hero.is-lit .scrollcue i::after{
  background:#f0dcc4;box-shadow:0 0 8px rgba(240,220,196,.8);
}
.hero.is-lit #scrollLabel{
  background:rgba(40,24,40,.54);border-color:rgba(240,220,196,.38);
  box-shadow:0 9px 24px -12px rgba(0,0,0,.8);
}
.hero.is-lit .hero__venue::after{background:#f0dcc4}

/* the nav floats over the hero until it sticks, so it follows the lights too */
html.is-lit .nav:not(.is-stuck) .nav__mark,
html.is-lit .nav:not(.is-stuck) .nav__list a{color:#f0dcc4}
html.is-lit .nav:not(.is-stuck) .nav__toggle span{background:#f0dcc4}
html.is-lit .nav:not(.is-stuck){
  background:rgba(40,24,40,.3);
  box-shadow:0 1px 0 rgba(240,220,196,.14);
}

/* On a phone the hero box is tall and narrow, so cover-cropping a wide
   photo leaves nothing but a slab of wall. Drop the picture to a band across
   the bottom instead and let it dissolve upward into the sky, which keeps the
   whole building in frame and gives the type clean space to sit in. */
@media (max-width:700px){
  .photo{top:auto;bottom:0;height:56%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22%);
            mask-image:linear-gradient(180deg,transparent 0,#000 22%);
  }
  .photo__f img{object-position:70% 48%}
  .hero__vignette{
    background:
      radial-gradient(130% 60% at 50% 76%,transparent 40%,rgba(112,72,62,.16) 100%),
      linear-gradient(180deg,transparent 60%,rgba(253,247,240,.72) 100%);
  }
  .hero.is-lit .hero__vignette{
    background:
      radial-gradient(130% 60% at 50% 76%,transparent 38%,rgba(48,30,44,.34) 100%),
      linear-gradient(180deg,transparent 58%,rgba(60,38,54,.62) 100%);
  }
}

.card__floor{
  display:inline-block;margin-top:.15rem;font-size:.78rem;letter-spacing:.09em;
  text-transform:uppercase;color:#93504a;
}
.sec--band .card__floor{color:#f7e6cc}

.card__sides{
  display:grid;gap:.9rem;margin:1.1rem 0 0;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
/* Colours are pinned to literal values, not tokens: inside a .sec--band the
   ink tokens flip to cream, which would put cream type on this pale panel. */
.side{
  padding:.85rem .9rem;border-radius:12px;
  background:rgba(255,255,255,.62);border:1px solid rgba(147,80,74,.14);
}
.side__who{
  display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:#93504a;
}
.side__name{
  display:block;margin:.25rem 0 .3rem;font-family:var(--display);
  font-size:1.05rem;letter-spacing:.03em;color:#3b2d2b;
}
.side__x{display:block;font-size:.86rem;line-height:1.5;color:#5c4b47}
/* On a band the card itself is glass, so the panel matches it rather than
   punching a white hole in the middle of the card. */
.sec--band .side{background:rgba(0,0,0,.17);border-color:rgba(255,255,255,.17)}
.sec--band .side__who{color:#f7e6cc}
.sec--band .side__name{color:#fff}
.sec--band .side__x{color:#f0e6de}

/* Cards on a band need a DARK surface, not a pale one: a translucent
   white panel over a mid-tone ground lands mid-tone too, and cream type
   then has nothing to separate from. Measured 2.4:1 before, 6.7:1 after. */
.sec--band .card,
.sec--band .fit,
.sec--band .map__bar{
  background:rgba(34,27,25,.34);
  box-shadow:0 1px 0 rgba(255,255,255,.10),0 22px 44px -30px rgba(20,14,12,.75);
}

.guide{margin-top:2.6rem;text-align:center}
.guide__note{
  margin:.7rem 0 0;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.75;
}
.sec--band .guide__note{color:rgba(255,255,255,.72)}

/* ── the lamp switch ─────────────────────────────────────────── */
.lamp{
  position:absolute;right:clamp(1rem,4vw,2.4rem);bottom:clamp(5.5rem,11vh,7rem);
  z-index:3;display:inline-flex;align-items:center;gap:.6rem;
  padding:.62rem 1.05rem .62rem .72rem;border:0;border-radius:999px;cursor:pointer;
  font-family:var(--display);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--clay-deep);
  background:rgba(255,250,244,.72);
  box-shadow:0 10px 26px -14px rgba(90,52,44,.7),inset 0 0 0 1px rgba(195,154,90,.45);
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:background .5s var(--ease),color .5s var(--ease),box-shadow .5s var(--ease),transform .3s var(--ease);
}
.lamp:hover{transform:translateY(-2px)}
.lamp__bulb{
  width:15px;height:15px;border-radius:50%;flex:none;
  background:radial-gradient(circle at 34% 32%,#fff8e8,#e4c489 62%,#c39a5a);
  box-shadow:inset 0 0 0 1px rgba(150,110,58,.5);
  transition:box-shadow .6s var(--ease),background .6s var(--ease);
}
.hero.is-lit .lamp{
  background:rgba(46,30,42,.5);color:#f8e7c8;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.6),inset 0 0 0 1px rgba(240,205,140,.5);
}
.hero.is-lit .lamp__bulb{
  background:radial-gradient(circle at 34% 32%,#fffdf3,#ffd98a 58%,#f0b455);
  box-shadow:0 0 16px 3px rgba(255,198,110,.85),inset 0 0 0 1px rgba(255,230,170,.7);
}

.ripples path{stroke-dasharray:6 14;animation:drift 6s linear infinite}
@keyframes drift{to{stroke-dashoffset:-40}}

.hero__content{
  position:relative;z-index:3;text-align:center;max-width:min(92vw,760px);
  /* sit in the sky, above the roofline */
  margin-bottom:auto;margin-top:clamp(1rem,7vh,5rem);
}
.hero__eyebrow{
  margin:0 0 clamp(1.1rem,3vw,2rem);font-family:var(--display);font-size:.58rem;
  letter-spacing:.44em;text-transform:uppercase;color:#7c3f38;
  opacity:0;animation:up 1s var(--ease) .2s forwards;
}
.hero__names{
  margin:0;font-family:var(--script);font-weight:700;
  font-size:clamp(3.2rem,14vw,9.5rem);line-height:.84;color:#5f2b28;max-width:100%;
  text-shadow:0 3px 26px rgba(255,240,220,.7);
}
.hero__names span{display:inline-block;opacity:0;animation:up 1.1s var(--ease) forwards}
.hero__names .n1{animation-delay:.35s}
.hero__names .n2{animation-delay:.65s}
/* every name pair is rendered by names() in app.js, which emits
   <span class="a">&</span>. One base rule so the ampersand can never
   render jammed again; components below only adjust size. */
.a{
  font-family:var(--body);font-style:italic;font-weight:400;
  font-size:.34em;color:var(--gold);vertical-align:.24em;margin:0 .2em;
}
.hero__names .a{
  animation-delay:.5s;font-family:var(--body);font-style:italic;font-weight:400;
  font-size:.34em;color:var(--gold);vertical-align:.18em;margin:0 .16em;
}
.hero__venue{
  margin:1rem 0 0;font-family:var(--display);font-size:clamp(.66rem,1.8vw,.82rem);
  letter-spacing:.36em;text-transform:uppercase;color:#6d3b34;min-height:1.4em;
}
.hero__venue::after{
  content:"";display:inline-block;width:1px;height:.95em;margin-left:3px;
  background:currentColor;vertical-align:-.1em;animation:caret .8s step-end infinite;
}
.hero__venue.is-done::after{display:none}
@keyframes caret{50%{opacity:0}}
@keyframes up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

.hero__count{
  display:flex;flex-direction:column;align-items:center;
  margin-top:2rem;opacity:0;animation:up 1s var(--ease) 1.1s forwards;
}
.cd__row{display:flex;justify-content:center;gap:clamp(.9rem,3.4vw,2.2rem)}
.cd__voice{
  margin:.95rem 0 0;font-family:var(--display);font-style:italic;
  font-size:clamp(.86rem,3.2vw,1rem);letter-spacing:.02em;color:#8a5048;
}
.cd__voice--solo{
  margin-top:0;font-style:normal;font-size:clamp(1.5rem,5.4vw,2.2rem);
  letter-spacing:.04em;color:#5f2b28;
}
.cd__voice.is-new{animation:cdVoice .7s var(--ease)}
@keyframes cdVoice{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.cd__voice.is-new{animation:none}}
.cd{text-align:center;min-width:58px}
.cd b{
  display:block;font-family:var(--display);font-weight:500;
  font-size:clamp(1.5rem,5vw,2.2rem);line-height:1;color:#5f2b28;
  font-variant-numeric:tabular-nums;
}
.cd i{
  display:block;font-style:normal;margin-top:.35rem;
  font-family:var(--display);font-size:.5rem;letter-spacing:.3em;
  text-transform:uppercase;color:#8a5048;
}

.scrollcue{
  position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);
  z-index:3;display:flex;flex-direction:column;align-items:center;gap:.45rem;
  font-family:var(--display);font-size:.58rem;font-weight:500;letter-spacing:.4em;
  text-transform:uppercase;text-decoration:none;color:#8a5048;
  opacity:0;animation:cueIn 1s var(--ease) 1.6s forwards;transition:opacity .4s;
}
#scrollLabel{
  display:block;padding:.42rem .62rem .42rem 1.02rem;border-radius:999px;
  background:rgba(255,250,244,.82);border:1px solid rgba(168,97,92,.3);
  box-shadow:0 9px 24px -12px rgba(90,52,44,.65);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:background 1.6s var(--ease),border-color 1.6s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease);
}
.scrollcue:hover #scrollLabel{transform:translateY(-2px);box-shadow:0 13px 28px -12px rgba(90,52,44,.75)}
.scrollcue.is-hidden{opacity:0!important}
.scrollcue i{
  width:2px;height:44px;background:linear-gradient(180deg,var(--gold),transparent);
  position:relative;overflow:hidden;border-radius:999px;
}
.scrollcue i::after{
  content:"";position:absolute;inset:0;background:var(--clay-deep);
  border-radius:999px;box-shadow:0 0 7px rgba(168,97,92,.65);
  animation:cue 2s ease-in-out infinite;
}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@keyframes cueIn{
  from{opacity:0;transform:translate(-50%,26px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* ============================================================
   ACT 2 · SCRATCH
   ============================================================ */
.scratch{
  position:relative;padding:clamp(3.4rem,7.5vw,5.4rem) 1.25rem;
  text-align:center;overflow:hidden;
  background:
    radial-gradient(70% 55% at 50% 0%,#fdeee0,transparent 70%),
    linear-gradient(180deg,var(--sand-50),var(--sand-100));
}
.scratch__grains{position:absolute;inset:0;pointer-events:none;z-index:2}
.scratch__head{position:relative;z-index:3}
.scratch__cta{
  margin:0 0 2.2rem;font-family:var(--display);
  font-size:clamp(1.05rem,3vw,1.5rem);letter-spacing:.06em;color:var(--ink);
}
.scratch__card{position:relative;z-index:3;display:inline-block}
.scratch__win{
  position:relative;width:min(84vw,430px);aspect-ratio:1/.62;
  border-radius:50%/50%;overflow:hidden;
  background:linear-gradient(165deg,#fffdf9,#fbeedd);
  box-shadow:
    0 0 0 1px var(--gold-lt),
    0 0 0 9px rgba(255,255,255,.75),
    0 0 0 10px rgba(195,154,90,.5),
    0 30px 60px -28px rgba(120,64,52,.5);
}
.scratch__win::after{
  content:"";position:absolute;inset:14px;border-radius:50%;
  border:1px dashed rgba(195,154,90,.4);pointer-events:none;z-index:4;
}
.scratch__under{
  position:absolute;inset:0;display:grid;place-content:center;
  gap:.2rem;padding:1rem;
}
.scratch__days{
  margin:0;font-family:var(--display);font-weight:500;
  font-size:clamp(2.3rem,9vw,3.6rem);line-height:1;color:var(--clay-deep);
  letter-spacing:.02em;
  opacity:0;transform:scale(.9);transition:opacity .7s var(--ease) .1s,transform .7s var(--ease) .1s;
}
.scratch__month{
  margin:0;font-family:var(--display);font-size:clamp(.6rem,2vw,.76rem);
  letter-spacing:.42em;text-transform:uppercase;color:var(--gold);
  opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .3s,transform .7s var(--ease) .3s;
}
.scratch.is-revealed .scratch__days,.scratch.is-revealed .scratch__month{opacity:1;transform:none}

.scratch__foil{
  position:absolute;inset:0;width:100%;height:100%;z-index:2;
  cursor:crosshair;touch-action:none;transition:opacity .6s ease;
}
.scratch.is-revealed .scratch__foil{opacity:0;pointer-events:none}
.scratch__glint{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.75) 50%,transparent 62%);
  transform:translateX(-120%);animation:glint 3.6s ease-in-out infinite;
}
.scratch.is-revealed .scratch__glint{display:none}
@keyframes glint{0%{transform:translateX(-120%)}55%,100%{transform:translateX(120%)}}
.scratch__hint{
  position:absolute;left:50%;bottom:14%;transform:translateX(-50%);
  z-index:3;pointer-events:none;
  font-family:var(--display);font-size:.53rem;letter-spacing:.3em;
  text-transform:uppercase;color:rgba(120,64,52,.62);
  animation:hintPulse 2.4s ease-in-out infinite;
}
.scratch.is-revealed .scratch__hint{display:none}
@keyframes hintPulse{0%,100%{opacity:.5}50%{opacity:1}}
.scratch__note{
  position:relative;z-index:3;margin:2rem auto 0;max-width:40ch;
  color:var(--ink-soft);font-size:1rem;font-style:italic;
  opacity:0;transition:opacity .8s ease .6s;
}
.scratch.is-revealed .scratch__note{opacity:1}

/* ============================================================
   ACT 3 · THE BALLROOM INVITATION
   ============================================================ */
.invite{
  position:relative;overflow:hidden;
  padding:clamp(3.8rem,8.5vw,6.4rem) 1.25rem;
  background:linear-gradient(180deg,#2a1d20 0%,#3a2725 45%,#4a2f29 100%);
}
.ballroom{position:absolute;inset:0;pointer-events:none}
.ballroom::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(75% 55% at 50% 22%,rgba(255,206,140,.3),transparent 68%);
}
.ballroom__floor{
  position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(255,205,140,.16),rgba(255,205,140,.02));
}
.ballroom__floor::after{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,rgba(255,222,170,.09) 0 2px,transparent 2px 84px);
}
.drape{
  position:absolute;top:-4%;bottom:0;width:clamp(70px,15vw,190px);
  background:
    repeating-linear-gradient(96deg,rgba(0,0,0,.24) 0 10px,rgba(255,190,130,.09) 10px 26px),
    linear-gradient(180deg,#5c3229,#301c1c);
  filter:blur(.4px);
}
.drape--l{left:-2%;border-radius:0 0 60% 0/0 0 12% 0;transform:skewX(2deg)}
.drape--r{right:-2%;border-radius:0 0 0 60%/0 0 0 12%;transform:skewX(-2deg)}

.chandelier{
  position:absolute;top:0;width:clamp(74px,11vw,132px);height:clamp(110px,17vw,190px);
  display:flex;flex-direction:column;align-items:center;
  animation:chSway 9s ease-in-out infinite;transform-origin:top center;
}
.chandelier--l{left:16%}
.chandelier--r{right:16%;animation-delay:-4s}
@keyframes chSway{0%,100%{transform:rotate(-.7deg)}50%{transform:rotate(.7deg)}}
.chandelier::before{
  content:"";width:1px;flex:0 0 34%;
  background:linear-gradient(180deg,rgba(255,214,150,.6),rgba(255,214,150,.15));
}
.chandelier i{
  display:block;border-radius:50%;
  background:radial-gradient(circle at 40% 34%,#fff2d2,#ffc978 46%,rgba(255,180,100,0) 74%);
  animation:chGlow 4.5s ease-in-out infinite;
}
.chandelier i:nth-child(1){width:70%;aspect-ratio:1/.5;margin-top:-4%}
.chandelier i:nth-child(2){width:50%;aspect-ratio:1/.5;margin-top:-6%;animation-delay:-1.4s}
.chandelier i:nth-child(3){width:30%;aspect-ratio:1/.55;margin-top:-6%;animation-delay:-2.8s}
@keyframes chGlow{0%,100%{opacity:.72;filter:blur(1px)}50%{opacity:1;filter:blur(0)}}

.invite__card{
  position:relative;z-index:3;max-width:660px;margin:0 auto;text-align:center;
  padding:clamp(2.4rem,6vw,4rem) clamp(1.4rem,5vw,3.4rem);
  background:linear-gradient(168deg,rgba(255,250,242,.97),rgba(250,237,220,.95));
  border-radius:3px;
  box-shadow:
    0 0 0 1px rgba(195,154,90,.55),
    0 0 0 7px rgba(255,250,242,.1),
    0 40px 90px -34px rgba(0,0,0,.75);
}
.invite__card::before,.invite__card::after{
  content:"";position:absolute;width:26px;height:26px;
  border:1px solid var(--gold);opacity:.55;
}
.invite__card::before{top:12px;left:12px;border-right:0;border-bottom:0}
.invite__card::after{bottom:12px;right:12px;border-left:0;border-top:0}

.inv-shlok{
  font-family:var(--deva);font-size:clamp(.85rem,2.4vw,1.02rem);
  line-height:2;color:var(--clay-deep);margin:0 0 .5rem;
}
.inv-shlok span{display:block}
.inv-meaning{
  margin:0 0 1.6rem;font-size:.86rem;font-style:italic;color:var(--ink-soft);opacity:.85;
}
.inv-eyebrow{
  margin:0 0 .8rem;font-family:var(--display);font-size:.55rem;
  letter-spacing:.4em;text-transform:uppercase;color:var(--gold);
}
.inv-elder{
  margin:.1rem 0;font-family:var(--display);font-size:clamp(.86rem,2.4vw,1.02rem);
  letter-spacing:.08em;color:var(--ink);
}
.inv-request{margin:1.4rem 0 0;font-size:1.02rem;color:var(--ink-soft)}
.inv-request span{display:inline-block;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s}
.invite.is-in .inv-request span{opacity:1;transform:none}
.inv-request--2{margin-top:.1rem}
.inv-names{
  margin:.7rem 0 .3rem;font-family:var(--script);font-weight:700;
  font-size:clamp(3.2rem,13vw,6rem);line-height:.9;color:var(--clay-deep);
}
.inv-names .a{font-family:var(--body);font-style:italic;font-weight:400;font-size:.3em;color:var(--gold);vertical-align:.2em;margin:0 .12em}
.inv-lineage{margin:.55rem 0 0;font-size:.92rem;color:var(--ink-soft);line-height:1.6}
.inv-lineage b{
  font-family:var(--display);font-weight:500;font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-right:.4rem;
}

/* ============================================================
   SHARED SECTION SHELL
   ============================================================ */
.sec{position:relative;padding:clamp(3.4rem,7.5vw,5.6rem) clamp(1.1rem,5vw,2rem)}
.wrap{max-width:var(--max);margin:0 auto}
.sec__head{text-align:center;margin-bottom:clamp(2.4rem,6vw,3.6rem)}

.sec--story{
  padding-top:clamp(9rem,15vw,10.5rem);
  background:
    linear-gradient(180deg,
      #4a2f29 0%,
      #593c34 14%,
      #735449 29%,
      #94766a 44%,
      #b7a093 60%,
      #d8c7b9 75%,
      #eee3d8 89%,
      var(--sand-50) 100%) top/100% 8.5rem no-repeat,
    var(--sand-50);
}
.sec--story .vine{top:2rem;color:var(--gold-lt);opacity:.5}

/* ── mid-tone bands ──────────────────────────────────────────────
   Every token below is redefined *scoped to the section*, so all the
   existing rules that reference var(--ink) etc. invert automatically.
   These are muted mid-tones, deliberately not night colours. */
.sec--band{
  --ink:#fffaf4;
  --ink-soft:#f6ece4;
  --clay-deep:#fff7ee;
  --gold:#f0dcb0;
  --gold-lt:#f8ecd0;
  --white:rgba(255,250,244,.09);
  --sand-50:rgba(255,250,244,.10);
  --sand-100:rgba(255,250,244,.15);
  --sand-200:rgba(255,250,244,.22);
  --sand-300:rgba(255,250,244,.32);
  color:var(--ink);
}
/* soft feathered edges so a band never lands as a hard rectangle */
.sec--band::before,.sec--band::after{
  content:"";position:absolute;left:0;right:0;height:clamp(40px,7vw,80px);
  pointer-events:none;
}
.sec--band{position:relative;isolation:isolate}
.sec--band::before{top:0;background:linear-gradient(180deg,rgba(253,247,240,.30),transparent)}
.sec--band::after{bottom:0;background:linear-gradient(0deg,rgba(253,247,240,.28),transparent)}

/* cream sections, each with a different hue cast rather than the
   same two sands alternating */
.sec--sched{
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.10),transparent 65%),
    linear-gradient(180deg,#5e7367,#546a5d);
}
.sec--venue{background:linear-gradient(180deg,var(--pool-tint),var(--sand-50))}
.sec--attire{
  background:
    radial-gradient(90% 70% at 50% 0%,rgba(255,255,255,.10),transparent 65%),
    linear-gradient(180deg,#7b6376,#705a6c);
}
.sec--faq{background:linear-gradient(180deg,var(--sage-tint),var(--sand-50))}
.sec--rsvp{
  background:
    radial-gradient(85% 65% at 50% 12%,rgba(255,255,255,.12),transparent 68%),
    linear-gradient(180deg,#8d5a50,#7d4f47);
  text-align:center;
}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.rv.is-in{opacity:1;transform:none}

/* ============================================================
   STORY
   ============================================================ */
.acts{display:grid;gap:clamp(2rem,5vw,3rem);grid-template-columns:repeat(3,1fr);margin-bottom:clamp(3rem,7vw,4.5rem)}
.act{text-align:center}
.act__motif{width:56px;height:56px;margin:0 auto 1rem;color:var(--gold)}
.act__eyebrow{margin:0;font-size:.95rem;font-style:italic;color:var(--ink-soft)}
.act__name{
  margin:.35rem 0 .5rem;font-family:var(--script);font-weight:700;
  font-size:clamp(2.4rem,7vw,3.4rem);line-height:.95;color:var(--clay-deep);
}
.act__tag{margin:0;font-size:.98rem;color:var(--ink-soft);line-height:1.6}

.story__body{max-width:60ch;margin:0 auto clamp(3rem,7vw,4.5rem);text-align:center}
.story__body p{margin:0 0 1.1rem;color:var(--ink-soft)}
.story__body p:first-child::first-letter{
  float:left;font-family:var(--display);font-size:3.4rem;line-height:.82;
  padding:.1rem .5rem 0 0;color:var(--gold);
}

.mile{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;position:relative}
.mile::before{
  content:"";position:absolute;left:6%;right:6%;top:15px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold-lt),var(--gold-lt),transparent);
}
.mile__i{position:relative;text-align:center}
.mile__dot{
  width:11px;height:11px;margin:10px auto 1rem;background:var(--white);
  border:1px solid var(--gold);transform:rotate(45deg);position:relative;z-index:2;
}
.mile__y{
  display:block;font-family:var(--display);font-size:.62rem;
  letter-spacing:.3em;color:var(--gold);margin-bottom:.3rem;
}
.mile__t{display:block;font-family:var(--display);font-size:.98rem;color:var(--ink);margin-bottom:.25rem}
.mile__x{display:block;font-size:.9rem;color:var(--ink-soft)}

/* ============================================================
   SCHEDULE
   ============================================================ */
/* ── the thread ──────────────────────────────────────────────────
   The schedule is a journey, not a table: one rail runs down the
   section, stops hang off alternating sides, and each stop carries the
   colour of its hour. --mood is set per stop by [data-mood] below and
   is consumed by the node ring and the card spine. */
.thread{position:relative;padding:.5rem 0 1rem}
.thread__rail{
  position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;
  background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden;
}
.thread__rail i{
  display:block;width:100%;height:0;border-radius:2px;
  background:linear-gradient(180deg,#f6d98f,#f0b9a0 45%,#c9b4d8);
  box-shadow:0 0 12px rgba(246,217,143,.45);
}

.station{
  position:relative;z-index:2;margin:2.6rem 0 2rem;text-align:center;
}
.station span{
  display:inline-block;padding:.42rem 1.1rem;border-radius:999px;
  font-family:var(--display);font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:#fff7ea;
  background:rgba(34,27,25,.55);border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.station:first-of-type{margin-top:.6rem}

.stop{
  position:relative;display:grid;align-items:start;
  grid-template-columns:1fr 76px 1fr;margin:0 0 1.6rem;
}
.stop__node{
  grid-column:2;justify-self:center;position:relative;z-index:2;
  width:52px;height:52px;display:grid;place-items:center;border-radius:50%;
  color:var(--mood);
  background:rgba(28,23,21,.78);
  box-shadow:0 0 0 1px var(--mood),0 0 0 7px rgba(255,255,255,.05),0 0 22px -4px var(--mood);
}
.stop__motif{width:24px;height:24px}
.stop .card{position:relative}
/* the little arm joining node to card */
.stop .card::after{
  content:"";position:absolute;top:34px;width:26px;height:1px;
  background:linear-gradient(90deg,transparent,var(--mood));
}
.stop--a .card{grid-column:1;grid-row:1;margin-right:.2rem}
.stop--a .card::after{right:-26px;background:linear-gradient(90deg,var(--mood),transparent)}
.stop--b .card{grid-column:3;grid-row:1;margin-left:.2rem}
.stop--b .card::after{left:-26px}

/* the hours of the day, in pastel */
.stop[data-mood="morning"]{--mood:#f2cf7c}
.stop[data-mood="day"]{--mood:#a8cbb4}
.stop[data-mood="dusk"]{--mood:#eda98f}
.stop[data-mood="night"]{--mood:#b7a6d6}

/* stops slide in from their own side */
.stop--a{transform:translate(-26px,22px)}
.stop--b{transform:translate(26px,22px)}
.stop--a.is-in,.stop--b.is-in{transform:none}

@media (max-width:860px){
  .thread__rail{left:26px;margin-left:0}
  .station{text-align:left;padding-left:64px}
  .stop{grid-template-columns:64px 1fr}
  .stop__node{grid-column:1;justify-self:start;width:44px;height:44px;margin-left:4px}
  .stop--a .card,.stop--b .card{grid-column:2;grid-row:1;margin:0}
  .stop--a .card::after,.stop--b .card::after{
    left:-22px;right:auto;width:22px;
    background:linear-gradient(90deg,var(--mood),transparent);
  }
  .stop--a,.stop--b{transform:translate(0,22px)}
}

.card{
  position:relative;padding:1.9rem 1.7rem 1.6rem;
  background:var(--white);border-radius:2px;
  box-shadow:0 1px 0 rgba(195,154,90,.3),0 22px 44px -32px rgba(120,64,52,.5);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
  overflow:hidden;
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--mood,var(--gold-lt)),transparent);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease);
}
.card:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(195,154,90,.4),0 34px 60px -30px rgba(120,64,52,.6)}
.card:hover::before{transform:scaleY(1)}
/* on the timeline the spine is the stop's hour, so it stays lit */
.stop.is-in .card::before{transform:scaleY(1)}
.card__motif{width:34px;height:34px;color:var(--gold);margin-bottom:.9rem}
.card__name{
  margin:0 0 .1rem;font-family:var(--display);font-weight:500;
  font-size:1.25rem;letter-spacing:.04em;color:var(--ink);
}
.card__when{
  margin:0 0 .9rem;font-family:var(--display);font-size:.6rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold);
}
.card__desc{margin:0 0 1.1rem;font-size:.98rem;color:var(--ink-soft);font-style:italic}
.card__meta{margin:0;font-size:.92rem;color:var(--ink-soft);line-height:1.65}
.card__meta b{font-weight:600;color:var(--ink);font-family:var(--display);font-size:.82rem}
.card__acts{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}

.chip{
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.48rem 1rem;border:1px solid rgba(195,154,90,.5);border-radius:999px;
  font-family:var(--display);font-size:.55rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);text-decoration:none;
  transition:.28s;background:transparent;
}
.chip:hover{background:var(--gold);color:var(--white);border-color:var(--gold)}
.sched__all{text-align:center;margin-top:2.4rem}

/* Pin calendar controls to literal colours: schedule band variables redefine
   both --gold and --white as pale tones, which otherwise disappear together. */
.sec--sched .chip{
  color:#f7e6cc;border-color:rgba(247,230,204,.58);
}
.sec--sched .chip:hover,
.sec--sched .chip:focus-visible,
.sec--sched .chip:active{
  background:#f7e6cc;color:#3a2b28;border-color:#f7e6cc;
}
.sec--sched .sched__all .btn--ghost{
  background:#fffaf4;color:#7d4f47;
  box-shadow:0 14px 30px -16px rgba(34,27,25,.65);
}
.sec--sched .sched__all .btn--ghost:hover,
.sec--sched .sched__all .btn--ghost:focus-visible,
.sec--sched .sched__all .btn--ghost:active{
  background:#f0dcb0;color:#3a2b28;
  box-shadow:0 18px 34px -16px rgba(34,27,25,.78);
}

/* ============================================================
   VENUE
   ============================================================ */
.vphoto__head{text-align:center;margin:0 0 1.25rem}
.vphoto__head .kicker{margin:0}
.vphoto{
  position:relative;margin:0 0 clamp(2.4rem,6vw,3.4rem);
  border-radius:2px;overflow:hidden;
  box-shadow:0 30px 70px -34px rgba(120,64,52,.65);
}
.vphoto__img{
  width:100%;aspect-ratio:16/9;object-fit:cover;
  transform:scale(1.14);transition:transform 12s linear;
}
.vphoto.is-in .vphoto__img{transform:scale(1)}
.vphoto__veil{
  position:absolute;inset:0;background:var(--sand-50);
  transform-origin:top;transition:transform 1.5s var(--ease);
}
.vphoto.is-in .vphoto__veil{transform:scaleY(0)}
.vphoto__grad{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(253,247,240,.08) 0%,rgba(58,43,40,.16) 42%,rgba(58,43,40,.88) 100%);
}
.vphoto__cap{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1.4rem,4vw,2.4rem);
  color:var(--white);
}
.vphoto__cap .kicker{color:var(--gold-lt)}
.vphoto__title{
  margin:0 0 .5rem;font-family:var(--display);font-weight:400;
  font-size:clamp(1.3rem,3.6vw,2rem);letter-spacing:.05em;
}
.vphoto__text{margin:0;max-width:50ch;font-size:.98rem;opacity:.9}
.vphoto__cap>*{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.vphoto.is-in .vphoto__cap>*{opacity:1;transform:none}
.vphoto.is-in .vphoto__cap>*:nth-child(1){transition-delay:.7s}
.vphoto.is-in .vphoto__cap>*:nth-child(2){transition-delay:.85s}
.vphoto.is-in .vphoto__cap>*:nth-child(3){transition-delay:1s}
.vphoto.is-in .vphoto__cap>*:nth-child(4){transition-delay:1.15s}

.travel{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-bottom:2.4rem}
.travel__i{text-align:center;padding:1.6rem 1rem}
.travel__i svg{width:34px;height:34px;color:var(--gold);margin:0 auto .9rem}
.travel__i h3{margin:0 0 .5rem;font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:.06em}
.travel__i p{margin:0;font-size:.95rem;color:var(--ink-soft)}

.map{
  position:relative;border:1px solid rgba(195,154,90,.4);border-radius:2px;
  overflow:hidden;background:var(--sand-100);
}
.map iframe{display:block;width:100%;height:clamp(280px,42vw,420px);border:0;filter:saturate(.82) sepia(.12)}
.map__bar{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.2rem 1.4rem;background:var(--white);
}
.map__addr{margin:0;font-size:.95rem;color:var(--ink-soft)}
.map__addr b{display:block;font-family:var(--display);color:var(--ink);font-size:1.02rem;margin-bottom:.2rem}

/* ============================================================
   STAY
   ============================================================ */

/* ============================================================
   ATTIRE
   ============================================================ */
.fits{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.fit{
  padding:1.5rem;background:var(--white);border-radius:2px;
  box-shadow:0 1px 0 rgba(195,154,90,.3);
}
.fit h3{margin:0 0 .3rem;font-family:var(--display);font-weight:500;font-size:1.02rem;letter-spacing:.05em}
.fit p{margin:0 0 1rem;font-size:.94rem;color:var(--ink-soft);font-style:italic}
.sw{display:flex;gap:.45rem}
.sw span{
  width:30px;height:30px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(58,43,40,.12),0 3px 8px -4px rgba(58,43,40,.4);
}

/* ============================================================
   FAQ
   ============================================================ */
.faqs{max-width:760px;margin:0 auto}
.faq-i{border-bottom:1px solid rgba(195,154,90,.32)}
.faq-i:first-child{border-top:1px solid rgba(195,154,90,.32)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1.2rem;padding:1.4rem .2rem;text-align:left;
  font-family:var(--display);font-size:1.02rem;letter-spacing:.03em;color:var(--ink);
  transition:color .25s;
}
.faq-q:hover{color:var(--clay-deep)}
.faq-q i{
  position:relative;flex:none;width:14px;height:14px;
}
.faq-q i::before,.faq-q i::after{
  content:"";position:absolute;background:var(--gold);
  left:50%;top:50%;transform:translate(-50%,-50%);transition:transform .35s var(--ease);
}
.faq-q i::before{width:14px;height:1px}
.faq-q i::after{width:1px;height:14px}
.faq-i.is-open .faq-q i::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-a{overflow:hidden;max-height:0;transition:max-height .5s var(--ease)}
.faq-a p{margin:0 0 1.4rem;padding-right:2rem;color:var(--ink-soft);font-size:1rem}

/* ============================================================
   RSVP
   ============================================================ */
.rsvp__hashtag{
  font-family:var(--body);font-size:.92rem;font-weight:600;
  letter-spacing:.1em;text-transform:none;
}
.rsvp__script{
  margin:0 0 .4rem;font-family:var(--script);font-weight:700;
  font-size:clamp(3rem,11vw,5.4rem);line-height:.9;color:var(--clay-deep);
}
.rsvp__welcome{
  max-width:50ch;margin:1.2rem auto 0;font-size:1.08rem;
  line-height:1.7;color:var(--ink);
}
.rsvp__note{max-width:46ch;margin:1rem auto 2rem;color:var(--ink-soft)}
.btn{
  display:inline-flex;align-items:center;gap:.7rem;
  padding:1.05rem 2.6rem;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-size:.66rem;letter-spacing:.3em;
  text-transform:uppercase;color:var(--white);
  background:linear-gradient(135deg,var(--clay-deep),#8d4a45);
  box-shadow:0 16px 34px -14px rgba(120,50,44,.75);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
.btn:hover{transform:translateY(-3px);box-shadow:0 22px 44px -14px rgba(120,50,44,.9)}
.btn:active{transform:translateY(-1px)}
.btn--ghost{
  background:transparent;color:var(--clay-deep);
  box-shadow:inset 0 0 0 1px rgba(168,97,92,.5);
}
.btn--ghost:hover{background:var(--clay-deep);color:var(--white);box-shadow:none}

/* On mid-tone bands --white/--clay-deep are redefined for text, which would
   make .btn near-white on near-white. Pin the button to literal colours. */
.sec--band .btn{
  background:linear-gradient(135deg,#fffaf4,#f7e7d7);
  color:#93504a;
  box-shadow:0 16px 34px -16px rgba(60,28,24,.6);
}
.sec--band .btn:hover{box-shadow:0 22px 44px -16px rgba(60,28,24,.75)}
.sec--band .btn--ghost{
  background:transparent;color:#fff7ee;
  box-shadow:inset 0 0 0 1px rgba(255,250,244,.55);
}
.sec--band .btn--ghost:hover{background:rgba(255,250,244,.16);color:#fff}
.rsvp__num{
  margin:1.6rem 0 0;font-family:var(--display);font-size:.68rem;
  letter-spacing:.24em;color:var(--ink-soft);
}
.rsvp__num a{color:var(--clay-deep)}

/* ============================================================
   FOOTER + FAB
   ============================================================ */
.foot{
  padding:clamp(3rem,7vw,4.5rem) 1.25rem clamp(4.5rem,9vw,5rem);
  text-align:center;background:#3a2b28;color:#e6d3c6;
}
.foot__closing{margin:0 auto 1.6rem;max-width:44ch;font-style:italic;font-size:1.05rem;opacity:.9}
.foot__contacts{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem;margin-bottom:1.8rem}
.foot__c{font-size:.92rem;opacity:.8}
.foot__c b{display:block;font-family:var(--display);font-size:.56rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold-lt);margin-bottom:.2rem;font-weight:500}
.foot__c a{color:#e6d3c6;text-decoration:none;border-bottom:1px solid rgba(227,194,134,.4)}
.foot__names{
  margin:0;font-family:var(--script);font-weight:700;
  font-size:clamp(2.4rem,8vw,3.6rem);line-height:1;color:var(--gold-lt);
}
.foot__tag{margin:.4rem 0 0;font-family:var(--display);font-size:.55rem;letter-spacing:.3em;text-transform:uppercase;opacity:.6}

.fab{
  position:fixed;right:clamp(.9rem,3vw,1.6rem);z-index:90;
  bottom:calc(clamp(.9rem,3vw,1.6rem) + env(safe-area-inset-bottom,0px));
  display:inline-flex;align-items:center;gap:.55rem;
  padding:.85rem 1.5rem;border-radius:999px;text-decoration:none;
  font-family:var(--display);font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:#fff;background:#25a35a;
  box-shadow:0 14px 30px -12px rgba(20,120,60,.75);
  opacity:0;transform:translateY(20px);pointer-events:none;
  transition:opacity .5s var(--ease),transform .5s var(--ease),box-shadow .3s;
}
.fab.is-in{opacity:1;transform:none;pointer-events:auto}
.fab:hover{box-shadow:0 20px 40px -12px rgba(20,120,60,.9)}

/* petal burst */
.burst{position:fixed;left:0;top:0;width:9px;height:9px;border-radius:60% 0 60% 0;pointer-events:none;z-index:150}
body.is-locked .burst{z-index:260}
.burst--slow{z-index:260}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .acts{grid-template-columns:1fr;gap:2.6rem}
  .mile{grid-template-columns:repeat(2,1fr);gap:2rem}
  .mile::before{display:none}
  .chandelier--l{left:6%}.chandelier--r{right:6%}
}
@media (max-width:720px){
  body{font-size:18px}
  .music-toggle{
    top:calc(var(--nav-offset,4rem) + .65rem + env(safe-area-inset-top,0px));
    right:.8rem;padding:.65rem;
  }
  .music-toggle span{display:none}
  .lamp{bottom:calc(7rem + env(safe-area-inset-bottom,0px))}
  .scrollcue{bottom:calc(.8rem + env(safe-area-inset-bottom,0px))}
  .nav__toggle{display:flex}
  .nav__list{
    position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;
    background:rgba(253,247,240,.98);backdrop-filter:blur(16px);
    box-shadow:0 20px 40px -20px rgba(120,64,52,.4);
    max-height:0;overflow:hidden;transition:max-height .45s var(--ease);
  }
  .nav__list.is-open{max-height:70vh}
  .nav__list li{border-top:1px solid rgba(195,154,90,.2)}
  .nav__list a{display:block;padding:1rem clamp(1rem,4vw,2.5rem);font-size:.65rem}
  .hero__count{gap:1rem}
  .cd{min-width:48px}
  .fab span{display:none}
  .fab{padding:.95rem}
  .card__acts .chip{flex:1 1 auto;justify-content:center;min-height:44px}
  .btn{padding:1.05rem 1.9rem;letter-spacing:.22em}
  .vphoto__img{aspect-ratio:4/3}
}
@media (max-width:460px){
  .mile{grid-template-columns:1fr}
  .intro__scene{width:min(94vw,360px)}
  .seal{width:88px;height:88px}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  .rv{opacity:1;transform:none}
  .petals{display:none}
}


/* ── the day passing ─────────────────────────────────────────────
   One fixed wash over the whole page, re-tinted as you scroll, so the
   site travels morning → afternoon → dusk → lamplight across the two
   days. Kept under 0.13 alpha: any heavier and it eats the contrast
   the bands were fixed for. */
.dusk{
  position:fixed;inset:0;z-index:4;pointer-events:none;
  background:rgba(0,0,0,0);
  transition:background .35s linear;
  will-change:background;
}
@media (prefers-reduced-motion:reduce){.dusk{transition:none}}


/* ── bandhanwar ──────────────────────────────────────────────────
   Hung from the top edge of a section. --sway is published by the
   scroll loop as a small pixel offset; the transition does the
   settling, so the string keeps swinging briefly after you stop. */
.garland{
  position:absolute;left:0;right:0;top:0;z-index:3;
  pointer-events:none;line-height:0;
  transform:translateY(calc(var(--sway,0) * 1px));
  transition:transform .55s cubic-bezier(.22,1.4,.36,1);
}
.garland__svg{display:block;width:100%;height:auto;opacity:.85}
.sec--band .garland__svg{opacity:.95}
@media (prefers-reduced-motion:reduce){
  .garland{transform:none;transition:none}
}


/* ── kolam ───────────────────────────────────────────────────────
   Drawn in front of the guest rather than presented finished: every
   stroke starts fully dashed-out and unrolls when the section arrives.
   The dots land after the line, the way they are pressed in last. */
.kolam{margin:0 auto 2.2rem;width:clamp(150px,22vw,210px)}
.kolam svg{display:block;width:100%;height:auto;overflow:visible}
.kolam__line circle{
  fill:none;stroke:var(--gold,#e9cf9b);stroke-width:1.4;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.kolam.is-in .kolam__line circle{
  animation:kolam-draw 1.25s cubic-bezier(.55,.05,.25,1) forwards;
}
.kolam__line circle:nth-child(1){animation-delay:.05s}
.kolam__line circle:nth-child(2){animation-delay:.13s}
.kolam__line circle:nth-child(3){animation-delay:.21s}
.kolam__line circle:nth-child(4){animation-delay:.29s}
.kolam__line circle:nth-child(5){animation-delay:.37s}
.kolam__line circle:nth-child(6){animation-delay:.45s}
.kolam__line circle:nth-child(7){animation-delay:.53s}
.kolam__line circle:nth-child(8){animation-delay:.61s}
.kolam__line circle:nth-child(9){animation-delay:0s}
.kolam__line circle:nth-child(10){animation-delay:.72s}
.kolam__dots circle{fill:var(--gold,#e9cf9b);opacity:0}
.kolam.is-in .kolam__dots circle{animation:kolam-dot .5s ease forwards 1.35s}
@keyframes kolam-draw{to{stroke-dashoffset:0}}
@keyframes kolam-dot{to{opacity:.9}}
@media (prefers-reduced-motion:reduce){
  .kolam__line circle{stroke-dashoffset:0;animation:none}
  .kolam__dots circle{opacity:.9;animation:none}
}


/* The addressee line — set above the eyebrow the way a name sits above
   the invitation text on a real card. Hidden entirely without a name. */
.intro__to{
  margin:0 0 .35rem;font-family:var(--serif);font-style:italic;
  font-size:clamp(1.05rem,2.4vw,1.35rem);color:var(--gold-lt,#f8ecd0);
  letter-spacing:.01em;opacity:0;animation:to-in .9s ease .35s forwards;
}
.intro__to[hidden]{display:none}
@keyframes to-in{to{opacity:.95}}
@media (prefers-reduced-motion:reduce){.intro__to{opacity:.95;animation:none}}


/* ── happening now ───────────────────────────────────────────────
   Bottom-left so it never fights the RSVP button bottom-right. */
.live{
  position:fixed;left:1rem;bottom:1rem;z-index:110;
  display:flex;align-items:center;gap:.6rem;
  max-width:min(20rem,calc(100vw - 2rem));
  padding:.62rem .95rem .62rem .8rem;border-radius:999px;
  background:rgba(34,27,25,.82);backdrop-filter:blur(10px);
  border:1px solid rgba(240,220,176,.28);
  box-shadow:0 10px 30px rgba(34,27,25,.28);
  opacity:0;transform:translateY(10px);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.3,1);
}
.live.is-up{opacity:1;transform:none}
.live__dot{
  flex:0 0 auto;width:.5rem;height:.5rem;border-radius:50%;
  background:#f0dcb0;box-shadow:0 0 0 0 rgba(240,220,176,.5);
}
.live.is-on .live__dot{background:#8fce9b;animation:live-pulse 2.2s ease-out infinite}
@keyframes live-pulse{
  0%{box-shadow:0 0 0 0 rgba(143,206,155,.55)}
  70%{box-shadow:0 0 0 .7rem rgba(143,206,155,0)}
  100%{box-shadow:0 0 0 0 rgba(143,206,155,0)}
}
.live__txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.live__txt b{
  font-family:var(--sans);font-weight:500;font-size:.8rem;
  letter-spacing:.02em;color:#f7ecdf;
}
.live__txt i{
  font-style:normal;font-size:.7rem;letter-spacing:.03em;
  color:#d9c6b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:520px){
  .live{left:.7rem;right:auto;bottom:.7rem;max-width:calc(100vw - 6.5rem)}
}
@media (prefers-reduced-motion:reduce){
  .live{transition:none;opacity:1;transform:none}
  .live.is-on .live__dot{animation:none}
}


/* ── venue photo as the map link ─────────────────────────────────
   The photo now carries the whole job the embedded map used to do,
   so it has to *look* pressable, not just be pressable. */
.vphoto__link{
  display:block;position:relative;color:inherit;text-decoration:none;
  border-radius:inherit;overflow:hidden;
}
.vphoto__link:focus-visible{outline:2px solid var(--gold-lt);outline-offset:4px}
.vphoto__go{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1rem;
  padding:.5rem 1.05rem;border-radius:999px;
  border:1px solid rgba(248,236,208,.58);
  background:rgba(58,43,40,.72);backdrop-filter:blur(6px);
  font-family:var(--display);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:#f8ecd0;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.65);
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease),transform .35s var(--ease),box-shadow .35s var(--ease);
}
.vphoto__go svg{width:.95rem;height:.95rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vphoto__go svg path{transition:transform .35s var(--ease)}
.vphoto__link:focus-visible .vphoto__go{
  background:#7d4f47;color:#fffaf4;border-color:#f0dcb0;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.78);
}
.vphoto__link:active .vphoto__go{
  background:#633e38;color:#fffaf4;border-color:#e3c286;
  transform:translateY(0) scale(.98);
}
@media (hover:hover){
  .vphoto__link:hover .vphoto__go{
    background:#7d4f47;color:#fffaf4;border-color:#f0dcb0;
    transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(0,0,0,.78);
  }
  .vphoto__link:hover .vphoto__go svg path{transform:translateX(2px)}
  .vphoto__link:hover .vphoto__img{transform:scale(1.03)}
}
.vphoto__img{transition:transform 1.2s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .vphoto__go,.vphoto__img{transition:none}
  .vphoto__link:hover .vphoto__img,.vphoto__link:hover .vphoto__go svg path{transform:none}
}


/* ---- mehendi vine dividers ---------------------------------- */
.vine{
  position:absolute;left:50%;top:.5rem;transform:translateX(-50%);
  width:min(300px,68%);pointer-events:none;color:var(--ink-soft);opacity:.45;
}
.vine svg{display:block;width:100%;height:auto}
.sec--band .vine{color:var(--gold-lt);opacity:.6}
.vine__stem{
  fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
}
.vine__leaf{fill:currentColor;transform-box:fill-box;transform-origin:0 50%;transform:scale(0)}
.vine__dot{fill:currentColor;opacity:0}
.vine.is-in .vine__stem{animation:vineDraw 1.5s var(--ease) forwards}
.vine.is-in .vine__leaf{animation:vineLeaf .5s var(--ease) forwards}
.vine.is-in .vine__dot{animation:vineDot .5s var(--ease) forwards}
@keyframes vineDraw{to{stroke-dashoffset:0}}
@keyframes vineLeaf{from{transform:scale(0)}to{transform:scale(1)}}
@keyframes vineDot{to{opacity:.85}}
@media (prefers-reduced-motion:reduce){
  .vine__stem{stroke-dashoffset:0}
  .vine__leaf{transform:none}
  .vine__dot{opacity:.85}
  .vine.is-in .vine__stem,.vine.is-in .vine__leaf,.vine.is-in .vine__dot{animation:none}
}

/* ---- the kolam you can draw on ------------------------------- */
.kolam--live{width:clamp(210px,64vw,280px)}
.kolam__stage{position:relative}
.kolam--live .kolam__stage svg{opacity:.45}
.kolam__pad{
  position:absolute;inset:0;width:100%;height:100%;
  color:var(--gold-lt);cursor:crosshair;
  touch-action:none;                 /* so a stroke doesn't scroll the page */
  border-radius:50%;
  transition:box-shadow .3s var(--ease);
}
.kolam__pad:hover,.kolam__pad.is-drawing{
  box-shadow:0 0 0 1px rgba(227,194,134,.35),0 0 26px rgba(227,194,134,.18);
}
.kolam__pad:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.kolam__hint{
  margin:.85rem 0 0;font-family:var(--display);font-style:italic;
  font-size:.82rem;letter-spacing:.02em;color:var(--ink-soft);
  opacity:.8;transition:opacity .6s var(--ease);
}
.kolam__hint.is-faded{opacity:0}
.kolam__clear{
  margin:.5rem 0 0;padding:.3rem .8rem;background:none;cursor:pointer;
  border:1px solid currentColor;border-radius:999px;color:var(--ink-soft);
  font-family:var(--display);font-size:.6rem;letter-spacing:.22em;
  text-transform:uppercase;opacity:.6;transition:opacity .25s var(--ease);
}
.kolam__clear:hover{opacity:1}

/* ---- five taps on the names ---------------------------------- */
#heroNames{cursor:default;-webkit-tap-highlight-color:transparent}
#heroNames.is-gold{animation:goldGlow 10s var(--ease)}
@keyframes goldGlow{
  0%{text-shadow:none}
  12%{text-shadow:0 0 22px rgba(242,169,59,.55),0 0 4px rgba(242,169,59,.35)}
  82%{text-shadow:0 0 22px rgba(242,169,59,.55),0 0 4px rgba(242,169,59,.35)}
  100%{text-shadow:none}
}
@media (prefers-reduced-motion:reduce){#heroNames.is-gold{animation:none}}