/* ═══════════════════════════════════════════════════════════════
   Riya & Sanchit · Shubh Vivah
   Antique Indian heirloom: deep maroon (lehenga) + aged gold zari on warm
   parchment. Two colours only. (--wisteria/--powder names kept as aliases so
   JS and older rules keep resolving; they now carry maroon / parchment-tan.)
   ═══════════════════════════════════════════════════════════════ */

:root {
  --ivory: 41 40% 95%;
  --parchment: 39 34% 90%;
  --wisteria: 347 48% 32%;        /* maroon */
  --wisteria-deep: 347 60% 22%;   /* deep maroon */
  --powder: 38 30% 78%;
  --blush: 8 38% 78%;
  --gold: 40 52% 40%;             /* antique gold, readable on parchment */
  --gold-soft: 40 38% 62%;
  --marigold: 36 70% 52%;
  --ink: 348 24% 15%;
  /* burnished gold: light catches the top-left, falls into bronze */
  --gilt: linear-gradient(135deg, #7a5420 0%, #c9a24d 22%, #f1dc9c 40%, #b8903d 58%, #8a6226 78%, #d2ad5c 100%);

  --font-script: "Great Vibes", cursive;
  --font-display: "Cormorant Garamond", "Times New Roman", serif;
  --font-body: "Lora", Georgia, serif;

  --ease-luxe: cubic-bezier(.25, 1, .5, 1);
  --shadow-lift: 0 20px 50px -15px hsl(347 60% 18% / .24);
}

/* ── night mode ─────────────────────────────────────────────── */
html[data-theme="dark"] {
  --ivory: 346 34% 8%;
  --parchment: 346 30% 11%;
  --wisteria: 42 46% 68%;
  --wisteria-deep: 42 44% 80%;
  --powder: 345 22% 20%;
  --blush: 8 30% 60%;
  --gold: 42 56% 62%;
  --gold-soft: 41 38% 46%;
  --marigold: 36 66% 58%;
  --ink: 40 34% 90%;
  --shadow-lift: 0 20px 50px -15px hsl(346 50% 3% / .65);
}
html[data-theme="dark"] body { background-color: hsl(var(--ivory)); }
html { background-color: hsl(41 40% 95%); }
html[data-theme="dark"] { background-color: hsl(346 34% 8%); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.7;
  color: hsl(var(--ink));
  background-color: hsl(var(--ivory));
  /* faint paper grain */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p { margin: 0; }

/* prevent pre-JS flash only when JS is present to animate things in */
html.js .fade-up, html.js .hero-seq, html.js .interlude-art, html.js .interlude-line { opacity: 0; }
html.js.reduce-motion .fade-up,
html.js.reduce-motion .hero-seq,
html.js.reduce-motion .interlude-art,
html.js.reduce-motion .interlude-line { opacity: 1; }

/* ── layout primitives ─────────────────────────────────────── */
.wrap { max-width: 72rem; margin-inline: auto; padding-inline: 1.5rem; }
.wrap--narrow { max-width: 46rem; }
.band { padding-block: clamp(4.5rem, 10vw, 8rem); }
.band--tint { background: hsl(var(--parchment)); }
/* every act of the story gets its own full stage, at every viewport */
.band, .footer { min-height: 100svh; display: flex; align-items: center; }
/* Content sits ABOVE the fixed ambience layers (.ambient / #tsparticles, z 40-41)
   so falling petals can never paint over type — they drift behind the words and
   through the transparent band background. Don't drop this z-index. */
.band > .wrap, .footer > .wrap { width: 100%; position: relative; z-index: 45; }

.kicker {
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: hsl(var(--wisteria));
  margin-bottom: 1.4rem;
}
.script-head {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(2.3rem, 7vw, 3.8rem);
  line-height: 1.15;
  color: hsl(var(--wisteria-deep));
  margin-bottom: 2.5rem;
}
.display-head {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(2.3rem, 6.5vw, 4rem);
  line-height: 1.12;
  letter-spacing: .01em;
  margin-bottom: 3rem;
}
.display-head em, .script-head em { font-style: italic; color: hsl(var(--gold)); }
.display-head em, .gilt {
  background: var(--gilt); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
html[data-theme="dark"] .display-head em, html[data-theme="dark"] .gilt {
  background-image: linear-gradient(135deg, #b8903d 0%, #e9cf8a 30%, #fff0bd 45%, #d4ae5a 65%, #a67d34 100%);
}
.display-head { margin-bottom: 1.2rem; }

/* Maroon acts: countdown + blessings are lacquered maroon fields with gold zari
   text, so the page alternates maroon / parchment instead of one cream sheet. */
.countdown, .family {
  --ink: 40 36% 94%; --wisteria: 42 50% 72%; --wisteria-deep: 42 52% 82%;
  --gold: 42 58% 68%; --gold-soft: 41 42% 52%; --ivory: 347 50% 12%; --parchment: 347 55% 17%;
  background: radial-gradient(ellipse at 50% 0%, hsl(347 55% 22%), hsl(347 58% 14%) 70%);
  color: hsl(var(--ink));
}
.family-motif, html[data-theme="dark"] .family-motif { mix-blend-mode: normal; background: #f4ecd9; padding: 7px; border: 2px solid hsl(var(--gold)); box-shadow: 0 0 0 5px hsl(347 55% 17%), 0 0 0 6px hsl(var(--gold) / .7); filter: none; }
html[data-theme="dark"] .family-motif { background: #cfc0a0; }
html[data-theme="dark"] .family-motif { filter: brightness(.9) sepia(.12); }
.interlude-art img { filter: hue-rotate(-18deg) saturate(.85); }
/* outfit.js swaps in art-couple-true.jpg: the veil filter must not tint the true colours */
.interlude-art img.is-true { filter: none; }

/* One divider motif for the whole page: hairline, lozenge-in-lozenge, hairline.
   Gold zari picked out in the burnished gradient. */
.orn {
  display: block; width: min(14rem, 60%); height: 14px; margin: 0 auto 2.4rem; position: relative;
  background:
    linear-gradient(90deg, transparent, hsl(var(--gold) / .9)) left center / calc(50% - 16px) 1px no-repeat,
    linear-gradient(90deg, hsl(var(--gold) / .9), transparent) right center / calc(50% - 16px) 1px no-repeat;
}
.orn::before, .orn::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.orn::before { width: 10px; height: 10px; background: var(--gilt); }
.orn::after { width: 18px; height: 18px; border: 1px solid hsl(var(--gold) / .85); }

/* Hashiya: the double-ruled, corner-notched border of an antique card. Pseudo
   elements only, so the markup (incl. build.js event cards) stays untouched. */
.hashiya, .event-card, .gframe--veiled { position: relative; }
.hashiya::before, .event-card::before, .gframe--veiled::before {
  content: ""; position: absolute; inset: 7px; pointer-events: none;
  border: 1px solid hsl(var(--gold) / .55);
  background:
    radial-gradient(circle at 0 0, hsl(var(--gold)) 0 3px, transparent 3.5px) top left / 14px 14px no-repeat,
    radial-gradient(circle at 100% 0, hsl(var(--gold)) 0 3px, transparent 3.5px) top right / 14px 14px no-repeat,
    radial-gradient(circle at 0 100%, hsl(var(--gold)) 0 3px, transparent 3.5px) bottom left / 14px 14px no-repeat,
    radial-gradient(circle at 100% 100%, hsl(var(--gold)) 0 3px, transparent 3.5px) bottom right / 14px 14px no-repeat;
}


/* ═══ INTRO GATE ═════════════════════════════════════════════ */
#gate {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: hsl(var(--powder) / 1);
  overflow: hidden;
}
.gate-stage { position: absolute; inset: 0; }
.gate-still, .gate-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.gate-still--open, .gate-video { opacity: 0; }
/* Both reveal videos are stacked; only the active theme's is shown, and the
   theme toggle crossfades between them. They stay hidden until the reveal
   begins (#gate.revealing), so the closed-drape still owns the pre-tap frame. */
.gate-video { transition: opacity .55s ease; }
#gate.revealing .gate-video.is-active { opacity: 1; }
.gate-card {
  position: relative; z-index: 2;
  cursor: pointer;
  text-align: center;
  padding: 1.7rem 1.7rem 1.4rem;
  max-width: 24rem;
  margin-inline: 1.25rem;
  background: transparent;
  border: 0;
  /* soft wisteria-tinted shadow (follows the frosted shape) seats the panel a
     few mm in front of the drape rather than pasting it flat on top */
  filter: drop-shadow(4px 11px 20px hsl(var(--wisteria-deep) / .5));
}
/* Frosted sheer panel behind the content: the painted drape blurs and tints
   THROUGH it, so the card reads as the gauzy centre of the closed curtain —
   arched like a jharokha window at the top and feathered at the edges so it
   dissolves into the sheer instead of sitting on it as a hard rectangle. Frost
   lives on ::before (kept square-ish, no overflow-clip) so the arched card
   never triggers the iOS backdrop-filter gray-out. */
.gate-card::before {
  content: ""; position: absolute; inset: -5% -4%; z-index: -1;
  background: hsl(var(--ivory) / .74);
  -webkit-backdrop-filter: blur(16px) saturate(135%) brightness(1.09);
          backdrop-filter: blur(16px) saturate(135%) brightness(1.09);
  border-radius: 48% 48% 14px 14px / 30% 30% 14px 14px;
  box-shadow:
    inset 0 1px 0 hsl(var(--ivory) / .7),
    inset 0 0 0 1px hsl(var(--ivory) / .55),
    inset 0 0 0 5px hsl(var(--gold-soft) / .3);
  /* feather: solid through the centre, dissolving toward the edges/bottom */
  -webkit-mask-image: radial-gradient(125% 116% at 50% 42%, #000 58%, transparent 100%);
          mask-image: radial-gradient(125% 116% at 50% 42%, #000 58%, transparent 100%);
}
/* No backdrop-filter (older browsers): fall back to a solid, legible panel. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gate-card::before { background: hsl(var(--ivory) / .9); }
}
/* Ganesha invocation — heads the welcome gate and the footer. Static and
   un-animated by intent (sacred text must not shimmer/warp); the gate-card's
   own dismissal fade carries it off. Devanagari uses a text-subset webfont. */
.invocation { text-align: center; }
.shloka {
  display: block;
  font-family: "Noto Serif Devanagari", var(--font-display), serif;
  font-weight: 500;
  color: hsl(var(--gold));
  letter-spacing: .02em;
  line-height: 1.4;
}
.shloka-roman {
  display: block;
  margin-top: .35rem;
  font-size: .58rem; letter-spacing: .24em; text-transform: uppercase;
  color: hsl(var(--gold) / .72);
}
/* Ganesha medallion — deity above the shloka. Static; never animated. Gold via
   currentColor so it flips with the theme like the other gold marks. */
.invocation-motif {
  display: block;
  margin: 0 auto .4rem;
  color: hsl(var(--gold));
  aspect-ratio: 1;
}
.gate-invocation { margin-bottom: .75rem; }
.gate-invocation .invocation-motif { width: clamp(58px, 14vw, 72px); }
.gate-invocation .shloka { font-size: 1.02rem; }
.footer-invocation { margin-bottom: 1.1rem; }
.footer-invocation .invocation-motif { width: 62px; }
.footer-invocation .shloka { font-size: .95rem; }
.hero-invocation { margin-bottom: 1.3rem; }
.hero-invocation .invocation-motif { width: clamp(58px, 14vw, 74px); }
.hero-invocation .shloka { font-size: clamp(1rem, 3.4vw, 1.2rem); }
/* Hero sits over video → soft shadow keeps the gold legible on any frame. */
.hero-invocation .invocation-motif,
.hero-invocation .shloka {
  filter: drop-shadow(0 1px 4px hsl(346 40% 8% / .5));
}
/* Short / landscape phones: trim the invocation so the wax seal stays above
   the fold and tappable (#gate is centered + overflow:hidden, no scroll). */
@media (max-height: 640px) {
  .gate-invocation { margin-bottom: .55rem; }
  .gate-invocation .invocation-motif { width: 58px; margin-bottom: .3rem; }
  .gate-invocation .shloka { font-size: .92rem; }
  .gate-invocation .shloka-roman { display: none; }
}
.gate-kicker {
  font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: hsl(var(--gold)); font-weight: 500; margin-bottom: .7rem;
}
.gate-line {
  font-family: var(--font-display); font-weight: 400; font-style: italic;
  font-size: 1.25rem; line-height: 1.5; margin-bottom: 1.15rem;
}
.seal {
  position: relative;
  width: 164px; height: 164px;
  margin-inline: auto;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 10px 26px -8px hsl(var(--wisteria-deep) / .45);
  -webkit-tap-highlight-color: transparent;
}
.seal:focus-visible { outline: 2px solid hsl(var(--wisteria)); outline-offset: 4px; }
/* heartbeat + ripple ring driven by GSAP in animations.js */
.seal-ripple {
  position: absolute; inset: -5px;
  border-radius: 50%;
  border: 2px solid hsl(var(--gold) / .75);
  pointer-events: none;
  transform-origin: center;
  opacity: 0;
}
.seal.opened .seal-ripple { display: none; }
.seal img { width: 100%; height: 100%; border-radius: 50%; transform: scale(1.22); transform-origin: center; }
.seal-monogram {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500;
  font-size: 1.2rem; letter-spacing: .06em;
  color: hsl(40 60% 95% / .92);
  text-shadow: 0 1px 3px hsl(20 30% 15% / .5);
}
.seal-monogram em { font-family: var(--font-script); font-style: normal; font-size: .62em; color: hsl(0 0% 98%); margin-inline: .1em; }
.gate-hint { font-size: .8rem; color: hsl(var(--ink) / .72); margin-top: .85rem; font-style: italic; }
/* keep copy legible over the translucent frost (halo flips with the theme) */
.gate-invocation .shloka,
.gate-invocation .shloka-roman,
.gate-kicker,
.gate-line,
.gate-hint { text-shadow: 0 0 4px hsl(var(--ivory) / .92), 0 1px 2px hsl(var(--ivory) / .85); }
/* Pale gold (52% L) reads poorly on the light frosted panel — use a deeper
   bronze-gold for the small gate labels in light mode; dark mode keeps the
   brighter --gold, which has ample contrast on the dark panel. */
.gate-kicker,
.gate-invocation .shloka-roman,
.gate-invocation .shloka { color: hsl(38 62% 38%); }
html[data-theme="dark"] .gate-kicker,
html[data-theme="dark"] .gate-invocation .shloka-roman,
html[data-theme="dark"] .gate-invocation .shloka { color: hsl(var(--gold)); }

/* ═══ THEME TOGGLE ═══════════════════════════════════════════ */
#theme-toggle {
  position: fixed; right: 1.1rem; top: 1.1rem; z-index: 65;
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: hsl(var(--wisteria-deep));
  background: hsl(var(--ivory) / .92);
  border: 1px solid hsl(var(--gold-soft));
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(6px);
}
#theme-toggle:focus-visible { outline: 2px solid hsl(var(--wisteria)); outline-offset: 3px; }
/* Slow/low-end visit (boot-loader.js sets data-net once per session): theme
   follows local time only; no switch, so the other theme's gate art never loads. */
html[data-net="slow"] #theme-toggle { display: none; }
#theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] #theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] #theme-toggle .icon-sun { display: block; }

/* ═══ RIGHT DOCK (scroll cue + music, stacked bottom-right) ══ */
#right-dock {
  position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 55;
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
#music-dock {
  display: flex; flex-direction: column; align-items: flex-end; gap: .5rem;
}
#music-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: hsl(var(--wisteria-deep));
  background: hsl(var(--ivory) / .92);
  border: 1px solid hsl(var(--gold-soft));
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(6px);
}
#music-toggle[aria-pressed="false"] .icon-note { opacity: .45; }

#fullscreen-toggle {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: hsl(var(--wisteria-deep));
  background: hsl(var(--ivory) / .92);
  border: 1px solid hsl(var(--gold-soft));
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(6px);
}
#fullscreen-toggle .icon-exit { display: none; }
#fullscreen-toggle[aria-pressed="true"] .icon-enter { display: none; }
#fullscreen-toggle[aria-pressed="true"] .icon-exit { display: block; }

/* ═══ HERO ═══════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
}
/* the painted courtyard is wisteria-lilac: warm it toward sepia/aged gold so it sits in the maroon+gold system */
.hero-media { position: absolute; inset: -8% 0; z-index: 0; }
/* Warm antique tone as a static overlay, NOT a CSS filter: a filter on the
   hero video forces every decoded frame through an extra filter pass, and the
   hero plays behind the gate from page load, so it starved the gate-reveal
   decode and made the reveal lag. A flat translucent layer composites for free. */
.hero-media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: rgba(112, 62, 38, .22); }
.hero-media video, .hero-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 62%;
}
.hero-media video { opacity: 0; }
.hero-poster { opacity: 0; pointer-events: none; }
.hero-poster.is-visible { opacity: 1; }
html.reduce-motion .hero-poster { opacity: 1; animation: none; }
.hero-veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, hsl(41 40% 95% / .3) 0%, hsl(41 40% 95% / 0) 30%),
    linear-gradient(0deg, hsl(41 40% 95% / .93) 0%, hsl(41 40% 95% / .5) 26%, hsl(41 40% 95% / 0) 55%),
    radial-gradient(ellipse at center 58%, hsl(41 40% 95% / .5) 0%, hsl(41 40% 95% / 0) 68%),
    radial-gradient(ellipse at 50% 50%, transparent 50%, hsl(347 60% 20% / .38) 100%);
}
/* night: dusk wash so the pale painting can carry light text */
html[data-theme="dark"] .hero-veil {
  background:
    linear-gradient(180deg, hsl(346 34% 8% / .62) 0%, hsl(346 34% 8% / .3) 32%),
    linear-gradient(0deg, hsl(346 34% 8% / .97) 0%, hsl(346 34% 8% / .6) 28%, hsl(346 34% 8% / .28) 58%),
    radial-gradient(ellipse at center 58%, hsl(346 40% 6% / .5) 0%, hsl(346 34% 8% / .2) 70%);
}
.hero-inner {
  /* z 45 (not 2): clears the fixed petal/particle layers (40-41) so nothing
     drifts across the names or the Ganesha invocation roundel. Petals still
     float over the hero video, which sits below at z 0-1. */
  position: absolute; inset: 0; z-index: 45; width: 100%;
  display: grid;
  grid-template-rows: 1fr auto 1fr;   /* names row centred → "&" at 50svh */
  align-items: center; justify-items: center;
  padding: 9vh 1.25rem;               /* symmetric top/bottom keeps centre true */
  box-sizing: border-box;
}
.hero-top    { align-self: end; }      /* invocation + kicker: sit just above centre */
.hero-bottom { align-self: start; }    /* date + hashtag: sit just below centre */
.hero-inner > .hero-names { grid-row: 2; margin-block: .5rem; }
.hero .kicker { max-width: 36rem; margin-inline: auto; text-transform: none; letter-spacing: .05em; font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: clamp(1rem, 3.4vw, 1.2rem); line-height: 1.5; color: hsl(var(--wisteria-deep)); }
.hero-hosts-names { display: block; }
.hero-hosts-names .fq-fam { font-style: normal; font-weight: 600; }
.hero-hosts-ask { display: block; margin-top: .3rem; font-size: .8em; letter-spacing: .16em; text-transform: uppercase; font-style: normal; font-family: var(--font-body); font-weight: 600; color: hsl(38 62% 30%); }
.hero-names {
  color: hsl(var(--wisteria-deep));
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .02em;
  margin-block: .8rem .4rem;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(4rem, 17vw, 6.5rem);
  line-height: 1.12;
  letter-spacing: 0;
}
.hero-name { padding-inline: .12em; /* room for script flourishes */ }
.hero-amp {
  font-family: var(--font-script);
  font-size: .55em;
  line-height: .85;
  margin-block: 0 .04em;
  color: hsl(var(--gold));
}
.hero-names .hero-amp { background: var(--gilt); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; padding-inline: .1em; }
@media (min-width: 760px) {
  .hero-names {
    flex-direction: row; align-items: center;
    gap: .06em .12em;
    font-size: clamp(4.5rem, 10vw, 8.5rem);
  }
  .hero-amp { transform: translateY(-.04em); margin-block: 0; }
}
.hero-date {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(1.35rem, 4.5vw, 2rem);
  letter-spacing: .14em;
  /* same oldstyle fault as the countdown: "II & I2 December 2o26" */
  font-variant-numeric: lining-nums;
}
.hero-date .hero-amp { font-size: .85em; margin: 0 .15em; color: hsl(var(--gold)); }
@media (max-width: 600px) {
  .hero-date-sep { display: none; }
  .hero-date-location { display: block; }
}
.hero-tag {
  margin-top: .9rem;
  text-shadow: 0 0 6px hsl(var(--ivory) / .8);
  font-family: var(--font-body);
  font-size: .78rem; font-weight: 500;
  letter-spacing: .22em; text-transform: none;
  color: hsl(var(--gold));
}
.hero-tag-text {
  display: inline-block;
}
/* z 45 for the same reason as .hero-inner: above the fixed petal layer. */
.scroll-cue { position: absolute; bottom: 3.5vh; left: 0; right: 0; z-index: 45; margin-inline: auto; display: grid; place-items: center; gap: .3rem; }

/* floating scroll cue — compact circle, same style as music-toggle */
#floating-cue {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  color: hsl(var(--wisteria-deep));
  background: hsl(var(--ivory) / .92);
  border: 1px solid hsl(var(--gold-soft));
  box-shadow: var(--shadow-lift);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
  opacity: 1;
  transition: opacity .5s ease;
}
#floating-cue.cue-gone { opacity: 0; pointer-events: none; }
#floating-cue .cue-chevrons { display: grid; place-items: center; width: 20px; height: 20px; }
#floating-cue .cue-chevrons i {
  grid-area: 1 / 1;
  width: 8px; height: 8px;
  border-right: 1.5px solid hsl(var(--wisteria-deep) / .75);
  border-bottom: 1.5px solid hsl(var(--wisteria-deep) / .75);
  transform: rotate(45deg);
}
@media (prefers-reduced-motion: reduce) { #floating-cue { display: none; } }
.cue-label {
  font-size: .6rem; letter-spacing: .3em; text-transform: uppercase;
  color: hsl(var(--wisteria-deep) / .6);
}
.cue-mouse {
  display: none;
  position: relative;
  width: 26px; height: 42px;
  border: 1.5px solid hsl(var(--wisteria-deep) / .5); border-radius: 14px;
}
.cue-mouse span {
  position: absolute; left: 50%; top: 7px;
  width: 3px; height: 8px; margin-left: -1.5px;
  border-radius: 2px; background: hsl(var(--wisteria-deep) / .65);
  opacity: 1;
}
/* touch devices: drifting chevrons say "there is more below" */
.cue-chevrons { display: grid; place-items: center; width: 34px; height: 34px; }
.cue-chevrons i {
  grid-area: 1 / 1;
  width: 14px; height: 14px;
  border-right: 1.5px solid hsl(var(--wisteria-deep) / .75);
  border-bottom: 1.5px solid hsl(var(--wisteria-deep) / .75);
  transform: rotate(45deg);
  opacity: 0;
}
@media (min-width: 900px) {
  .cue-mouse { display: block; }
  .cue-chevrons { display: none; }
}

/* ═══ COUNTDOWN + SCRATCH ════════════════════════════════════ */
.countdown { text-align: center; }
.count-grid {
  display: flex; justify-content: center; gap: clamp(1rem, 5vw, 3.5rem);
  margin-bottom: clamp(3rem, 7vw, 4.5rem);
}
.count-cell {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(.55rem, 1.4vw, .9rem);
}
.count-num {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(2.7rem, 11vw, 6rem);
  /* >1 so the oldstyle descenders (3, 7, 9) stay inside the line box and
     cannot ride down onto the label beneath */
  line-height: 1.16;
  /* Cormorant defaults to oldstyle figures — elegant for the 01/02 event
     ordinals, wrong here where the digits ARE the content ("I38 o7").
     Lining fixes the shapes; tabular stops the row jittering per tick. */
  font-variant-numeric: lining-nums tabular-nums;
}
.count-label {
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: hsl(var(--ink) / .55);
}
.scratch { max-width: 24rem; margin-inline: auto; }
.scratch-prompt { font-style: italic; font-size: .92rem; color: hsl(var(--ink) / .7); margin-bottom: .5rem; }
.scratch-hint {
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: hsl(var(--gold)); margin-bottom: 1.2rem;
}
.scratch-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border: 1px solid hsl(var(--gold-soft));
  box-shadow: inset 0 0 0 4px hsl(var(--ivory)), inset 0 0 0 5px hsl(var(--gold-soft) / .5), var(--shadow-lift);
  background: hsl(var(--ivory));
  overflow: hidden;
  /* Touch never scratches (scroll does, via the scroll-driven sweep in
     animations.js), so a finger on the card must scroll the page. */
  touch-action: pan-y pinch-zoom;
}
.scratch-under {
  position: absolute; inset: 0;
  display: grid; place-content: center; gap: .3rem;
}
.scratch-date {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(2.2rem, 9vw, 3.2rem); letter-spacing: .1em;
  color: hsl(var(--gold));
}
.scratch-sub { font-family: var(--font-display); font-style: italic; font-size: 1.2rem; color: hsl(var(--wisteria-deep)); }
#scratch-canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }

/* ═══ EVENTS ═════════════════════════════════════════════════ */
.events { text-align: center; }
.event-grid {
  display: grid; gap: 2.2rem;
  grid-template-columns: 1fr;
  max-width: 24rem; margin-inline: auto;
}
.event-card {
  background: hsl(var(--ivory));
  border: 1px solid hsl(var(--gold-soft) / .7);
  box-shadow: var(--shadow-lift);
  padding: 1.9rem 1.6rem 2rem;
  transform-style: preserve-3d;
}
.event-card--main { border-color: hsl(var(--gold)); background: linear-gradient(180deg, hsl(var(--parchment)), hsl(var(--ivory))); }
.event-card--main::before { border-width: 2px; }
.arch {
  border-radius: 999px 999px 6px 6px / 88% 88% 6px 6px;
  overflow: hidden;
  border: 1px solid hsl(var(--gold-soft) / .8);
  margin-bottom: 1.5rem;
  transform: translateZ(28px);
}
.arch img { width: 100%; aspect-ratio: 3 / 3.6; object-fit: cover; }
.event-no { font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: hsl(var(--gold)); font-weight: 500; margin-bottom: .4rem; }
.event-card .event-name { color: hsl(var(--wisteria-deep)); }
.event-name { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.15; margin-bottom: .8rem; }
.event-when { font-size: .95rem; margin-bottom: .2rem; }
.event-venue { font-family: var(--font-display); font-style: italic; font-size: 1.12rem; color: hsl(var(--wisteria-deep)); margin-bottom: .9rem; }
.event-dress { font-size: .88rem; color: hsl(var(--ink) / .75); margin-bottom: 1.4rem; }
.event-dress span { display: block; font-size: .6rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--wisteria)); margin-bottom: .15rem; }
.event-card { display: flex; flex-direction: column; }
.event-actions { display: flex; justify-content: center; gap: 1.6rem; margin-top: auto; }
.btn-quiet {
  white-space: nowrap; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: hsl(var(--wisteria-deep));
  padding-bottom: .25rem;
  border-bottom: 1px solid hsl(var(--gold));
  text-decoration: none;
  display: inline-flex; align-items: center; min-height: 44px; /* hit area */
  transition: color .25s, border-color .25s;
}
.btn-quiet[hidden] { display: none; }
.btn-quiet:hover, .btn-quiet:focus-visible { color: hsl(var(--gold)); border-color: hsl(var(--wisteria)); }

@media (max-width: 600px) {
  /* #right-dock is position:fixed at right:1.1rem with 44px controls, so it owns
     a ~62px band down the right edge of the VIEWPORT. Anything full-width passes
     under that band at some scroll offset — measured: the music toggle lands on
     top of ADD TO CALENDAR, and a right thumb reaching for directions hits the
     music button instead. Padding the card alone cannot fix it, because the
     collision follows the scroll position, not the card. Keeping the actions out
     of the dock's band is what actually fixes it at every offset.

     Stacked rather than side-by-side: at 390px two side-by-side labels already
     wrap to two lines each, and reserving the gutter would squeeze them further.
     Directions and calendar are the two highest-value actions for a guest (and
     this skin's audience skews older), so they also get a real ~48px target
     instead of an 18px text baseline. */
  .event-actions {
    flex-direction: column;
    align-items: center;
    gap: .6rem;
  }
  .btn-quiet {
    /* Narrowed-and-CENTRED, not padded to one side. An earlier revision cleared
       the dock with `padding-right` on the row, which works when there are two
       buttons but visibly shifts a lone ADD TO CALENDAR off the card's centre
       (the gated build has no directions link). Symmetric inset keeps the button
       optically centred in the card while still ending before the fixed dock's
       ~62px band at the right edge of the VIEWPORT. */
    width: min(100%, 15rem);
    display: flex; align-items: center; justify-content: center;
    min-height: 48px;
    padding: .5rem .9rem;
    border: 1px solid hsl(var(--gold-soft));
    border-bottom-color: hsl(var(--gold));
  }
  .btn-quiet[hidden] { display: none; }
}

/* ═══ INTERLUDE ══════════════════════════════════════════════ */
/* This band overrides .band's generous padding-block. At the shared value the
   art + frame + caption exceeded the viewport, the group overflowed, and
   align-items:center clipped it upward — which read to every panel seat as
   "art pinned to the top, caption exiled to the bottom". Smaller padding plus
   the 66svh cap below lets the whole group sit optically centred instead.
   The faint gold wash echoes the painting's zari against the page, and three seats independently
   said the fault was that it appears exactly ONCE, reading as accident rather
   than accent. One faint echo behind the frame makes it read as chosen. */
.interlude {
  text-align: center;
  padding-block: clamp(3rem, 6vh, 4.5rem);
  background-image: radial-gradient(ellipse 62% 56% at 50% 44%, hsl(var(--gold) / .09), transparent 70%);
}
/* The painted portrait is a PORTRAIT-aspect asset in a LANDSCAPE viewport. Left
   uncapped it grew to ~100svh, which pushed .interlude-line below the fold: the
   band then delivered the painting with its caption amputated, on a page whose
   whole premise is one act per screenful. All four desktop panel seats scored it
   8.3-8.6 for exactly this and independently prescribed a 72-76svh cap. The cap
   must stay on the IMG (the frame wraps it), and width:auto lets the height drive
   the width so the aspect ratio is preserved. */
.interlude-art img {
  /* Definite height + intrinsic aspect-ratio reserve the box before the lazy image
     arrives (CLS); width follows from the ratio. Same size as the old max-height cap. */
  height: 66svh;
  max-height: 66svh;
  width: auto;
  max-width: 100%;
  aspect-ratio: 1493 / 2000;
  object-fit: cover;
}
.interlude-art {
  display: inline-block;
  border: 3px solid hsl(var(--gold));
  box-shadow: inset 0 0 0 6px hsl(var(--parchment)), inset 0 0 0 7px hsl(var(--gold-soft) / .7), 0 0 0 5px hsl(347 55% 22%), 0 0 0 7px hsl(var(--gold) / .8), var(--shadow-lift);
  padding: .9rem;
  background: hsl(var(--parchment));
}
.interlude-line {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.2rem, 3.6vw, 1.6rem); line-height: 1.5;
  max-width: 34rem; margin: 2.5rem auto 0;
  color: hsl(var(--wisteria-deep));
}
@media (max-width: 600px) {
  /* Mobile seats (8.7-9.1) reported the opposite fault to desktop: the caption ran
     nearly edge-to-edge as one long line, which reads as a caption rather than an
     epigraph and is the tightest text on the page for an older reader. A ~24ch
     measure wraps it to two centred lines under the plate, and the lighter tone
     lifts it off the deep aubergine in night mode. */
  .interlude-line {
    max-width: 24ch;
    font-size: clamp(1.15rem, 5vw, 1.35rem);
    margin-top: 1.7rem;
  }
}

/* ═══ GALLERY ════════════════════════════════════════════════ */
.gallery { text-align: center; }
.gallery-grid {
  display: grid; gap: clamp(.8rem, 2vw, 1.4rem);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-flow: row dense;
  text-align: initial;
}
@media (min-width: 760px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid > .gframe:last-child { grid-column: span 2; }
}
.gframe {
  margin: 0;
  background: hsl(var(--ivory));
  border: 1px solid hsl(var(--gold-soft) / .8);
  box-shadow: inset 0 0 0 4px hsl(var(--ivory)), inset 0 0 0 5px hsl(var(--gold-soft) / .5), var(--shadow-lift);
  padding: .55rem;
}
.gframe img { width: 100%; height: 100%; object-fit: cover; }
.gframe--tall { grid-row: span 2; }
.gframe--wide { grid-column: span 2; }
.gframe img { aspect-ratio: 4 / 5; }
.gframe--tall img { aspect-ratio: auto; min-height: 100%; }
.gframe--wide img { aspect-ratio: 16 / 10; }
/* Couple gate closed: a single veiled panel replaces the masonry (photos are
   absent from the build entirely — see gallery.js / build.js). */
.gallery-grid--veiled { grid-template-columns: 1fr; place-items: center; }
/* The plate must read as SEALED, not as a frame waiting for images that failed
   to load. So it collapses to its content: mark + note are one centred optical
   group (flex column, explicit gap), and the box is only as tall as a closed
   plate needs to be. Do not restore a tall min-height — the empty gold rule was
   read by reviewers as a broken image container. */
.gframe--veiled {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: clamp(1rem, 3vw, 1.5rem);
  width: 100%; min-height: 0;
  padding: clamp(1.6rem, 5vw, 2.2rem) 1.5rem;
  text-align: center;
}
/* every .band + footer holds min-height:100svh at all viewports (CLAUDE.md, user rule) */
@media (min-width: 760px) {
  .gframe--veiled { max-width: 34rem; margin-inline: auto; }
}
/* gallery.js still emits a glyph: swap it for the shared ornament, glyph hidden */
.gframe--veiled .veil-motif { display: block; font-size: 0; line-height: 0; width: 8rem; height: 14px; position: relative;
  background: linear-gradient(90deg, transparent, hsl(var(--gold) / .9)) left center / calc(50% - 16px) 1px no-repeat, linear-gradient(90deg, hsl(var(--gold) / .9), transparent) right center / calc(50% - 16px) 1px no-repeat; }
.gframe--veiled .veil-motif::before, .gframe--veiled .veil-motif::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); }
.gframe--veiled .veil-motif::before { width: 10px; height: 10px; background: var(--gilt); }
.gframe--veiled .veil-motif::after { width: 18px; height: 18px; border: 1px solid hsl(var(--gold) / .85); }
.gframe--veiled .veil-note {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.15rem, 3.6vw, 1.55rem); line-height: 1.5;
  color: hsl(var(--ink) / .72); max-width: 24rem;
}

/* ═══ FAMILY ═════════════════════════════════════════════════ */
.family { text-align: center; }
.family-motif { width: clamp(120px, 22vw, 170px); height: auto; margin: 0 auto 1.8rem; border-radius: 50%; mix-blend-mode: multiply; }
html[data-theme="dark"] .family-motif {
  mix-blend-mode: normal;
}
/* ── Blessings quotation ──────────────────────────────────────
   The family surnames are woven into one declarative union line ("In the joining
   of the Dang, Bhalla, Arora & Batra families and the Verma family, two houses
   become one."). A single gold fleuron crowns it. Set as a light italic serif so
   the names sit gently on the eye; the surnames themselves are upright so they
   read out of the italic prose. Scales for 1..n names and flips per side. */
.hashiya { padding: clamp(2.2rem, 6vw, 3.2rem) clamp(1.4rem, 5vw, 3rem); border: 1px solid hsl(var(--gold) / .8); background: hsl(var(--ivory) / .55); }
.hashiya .orn { margin-bottom: 1.4rem; }
/* Measure is tuned, not arbitrary: the surname group is a nowrap token, so too
   narrow a measure strands "Batra" from the noun "families" and leaves "united
   in love" as a two-word orphan. 42ch lets the first surname group + "families"
   sit on one line, and text-wrap:balance then evens the rest. If you widen or
   narrow this, re-check the mobile wrap before committing. */
.family-quote {
  max-width: 42ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.12rem, 4vw, 1.6rem);
  line-height: 1.6;
  letter-spacing: .01em;
  color: hsl(var(--ink) / .82);
  text-wrap: balance;
}
/* the surnames carry the weight (a calmer single axis than roman-in-italic); each
   family group stays on one line so a list is never split across a wrap */
.family-quote .fq-fam {
  font-weight: 600;
  color: hsl(var(--ink));
  letter-spacing: .015em;
  white-space: nowrap;
}

/* ═══ FOOTER ═════════════════════════════════════════════════ */
.footer {
  text-align: center;
  padding-block: clamp(4rem, 9vw, 6.5rem);
  background: hsl(var(--parchment));
  color: hsl(var(--ink));
}
html[data-theme="dark"] .footer { background: #2a0f16; color: hsl(40 36% 97% / .92); }
.footer-monogram { font-family: var(--font-display); font-weight: 500; font-size: 4.5rem; line-height: 1.1; background: var(--gilt); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: .06em; }
.footer-monogram em { -webkit-text-fill-color: hsl(var(--gold)); font-family: var(--font-script); font-style: normal; font-size: .62em; color: hsl(var(--gold)); }
.footer-rule { margin: 1.4rem auto 1.8rem; }
.footer-line { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.65; max-width: 30rem; margin-inline: auto; color: hsl(var(--ink) / .82); }
.footer-sign { margin-top: 1.6rem; font-size: .9rem; color: hsl(var(--ink) / .68); }
.footer-sign span { font-family: var(--font-script); font-size: 1.9rem; color: hsl(var(--wisteria-deep)); display: inline-block; margin-top: .4rem; }
.footer .shloka, .footer .shloka-roman, .footer .invocation-motif { color: hsl(38 62% 34%); }
.footer-tag { margin-top: 1.4rem; font-size: .75rem; font-weight: 500; letter-spacing: .22em; color: hsl(38 62% 34%); }
html[data-theme="dark"] .footer .shloka, html[data-theme="dark"] .footer .shloka-roman, html[data-theme="dark"] .footer .invocation-motif { color: hsl(42 62% 74%); }
html[data-theme="dark"] .footer-line { color: hsl(40 36% 97% / .8); }
html[data-theme="dark"] .footer-sign { color: hsl(40 36% 97% / .65); }
html[data-theme="dark"] .footer-sign span, html[data-theme="dark"] .footer-tag { color: hsl(42 50% 72%); }

/* ═══ CSS AMBIENCE (fallback layer under tsParticles) ════════
   Keyframes taken from the bridgerton reference bundle. */
.ambient { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.petal {
  position: absolute; top: -4vh;
  width: 12px; height: 9px;
  border-radius: 60% 40% 55% 45%;
  will-change: transform, opacity;
  opacity: 0;
}
.p1 { left: 6%;  background: hsl(var(--marigold) / .8); }
.p2 { left: 17%; background: hsl(var(--wisteria) / .7); width: 9px; height: 7px; }
.p3 { left: 28%; background: hsl(var(--blush)); }
.p4 { left: 39%; background: hsl(var(--marigold) / .65); width: 8px; height: 6px; }
.p5 { left: 52%; background: hsl(var(--wisteria) / .75); }
.p6 { left: 63%; background: hsl(var(--gold-soft)); width: 10px; height: 8px; }
.p7 { left: 74%; background: hsl(var(--blush)); }
.p8 { left: 85%; background: hsl(var(--marigold) / .75); width: 9px; height: 7px; }
.p9 { left: 94%; background: hsl(var(--wisteria) / .6); }
.firefly {
  position: absolute;
  width: 5px; height: 5px; border-radius: 50%;
  background: hsl(var(--gold-soft));
  will-change: transform, opacity, filter;
  opacity: 0.25;
}
.f1 { left: 12%; top: 68%; }
.f2 { left: 55%; top: 78%; }
.f3 { left: 84%; top: 60%; }
#tsparticles { position: fixed; inset: 0; pointer-events: none; z-index: 41; }

/* ═══ REDUCED MOTION ═════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .ambient, #tsparticles { display: none; }
  .scroll-cue { display: none; }
}

/* ═══ HEIRLOOM TEXTURE: zari jaal + mehrab ═══════════════════
   Cream bands (events, gallery, interlude) get a faint gold lattice (jaal) and one
   recurring motif: a mehrab (pointed-arch niche) with a lotus finial, set above each
   act's heading. Same arch everywhere so it reads as a chosen device. */
:root {
  --jaal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' stroke='%23a67d34' stroke-opacity='.09' stroke-width='.8'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z'/%3E%3Cpath d='M28 12 44 28 28 44 12 28Z' stroke-opacity='.05'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='%23a67d34' fill-opacity='.09' stroke='none'/%3E%3Ccircle cx='0' cy='0' r='1.4' fill='%23a67d34' fill-opacity='.08' stroke='none'/%3E%3Ccircle cx='56' cy='0' r='1.4' fill='%23a67d34' fill-opacity='.08' stroke='none'/%3E%3Ccircle cx='0' cy='56' r='1.4' fill='%23a67d34' fill-opacity='.08' stroke='none'/%3E%3Ccircle cx='56' cy='56' r='1.4' fill='%23a67d34' fill-opacity='.08' stroke='none'/%3E%3C/svg%3E");
  --mehrab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 60' fill='none' stroke='%23a67d34' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 58V27Q4 15 23 5Q42 15 42 27V58'/%3E%3Cpath d='M10 58V28Q10 19 23 12Q36 19 36 28V58' stroke-opacity='.7'/%3E%3Cpath d='M23 5V1M20.5 3.2 23 .6 25.5 3.2' stroke-width='1'/%3E%3Cpath d='M23 30 28 38 23 46 18 38Z' fill='%23a67d34' fill-opacity='.22'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --jaal: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' fill='none' stroke='%23d4ae5a' stroke-opacity='.06' stroke-width='.8'%3E%3Cpath d='M28 0 56 28 28 56 0 28Z'/%3E%3Cpath d='M28 12 44 28 28 44 12 28Z' stroke-opacity='.04'/%3E%3Ccircle cx='28' cy='28' r='2.2' fill='%23d4ae5a' fill-opacity='.07' stroke='none'/%3E%3C/svg%3E");
  --mehrab: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 60' fill='none' stroke='%23d4ae5a' stroke-width='1.2' stroke-linecap='round'%3E%3Cpath d='M4 58V27Q4 15 23 5Q42 15 42 27V58'/%3E%3Cpath d='M10 58V28Q10 19 23 12Q36 19 36 28V58' stroke-opacity='.7'/%3E%3Cpath d='M23 5V1M20.5 3.2 23 .6 25.5 3.2' stroke-width='1'/%3E%3Cpath d='M23 30 28 38 23 46 18 38Z' fill='%23d4ae5a' fill-opacity='.22'/%3E%3C/svg%3E");
}
.events, .gallery { background-image: var(--jaal); background-size: 56px 56px; }
/* maroon-tinted night surfaces so the maroon identity survives in dark */
html[data-theme="dark"] .events, html[data-theme="dark"] .gallery { background-color: hsl(347 38% 11%); }
html[data-theme="dark"] .event-card { background: hsl(347 36% 15%); }
html[data-theme="dark"] .hero .kicker, html[data-theme="dark"] .hero-hosts-ask { color: #e3c887; text-shadow: 0 1px 12px rgba(20,8,12,.75); }
html[data-theme="dark"] .hero-veil { background: linear-gradient(180deg, hsl(347 40% 8% / .6) 0%, hsl(347 40% 8% / .45) 35%, hsl(347 40% 8% / .9) 100%); }
.event-actions { min-height: 48px; }
.event-when--tbc { color: hsl(30 40% 34%); font-style: italic; }
html[data-theme="dark"] .event-when--tbc { color: hsl(38 50% 70%); }
.event-when { text-wrap: balance; }
.hero-date { letter-spacing: .07em; }
.scratch-hint { text-wrap: balance; }
.interlude { background-image: radial-gradient(ellipse 62% 56% at 50% 44%, hsl(var(--gold) / .09), transparent 70%), var(--jaal); background-size: auto, 56px 56px; }
.events > .wrap::before {
  content: ""; display: block; width: 40px; height: 52px; margin: 0 auto 1.1rem;
  background: var(--mehrab) center / contain no-repeat;
}

/* ── Mobile: fixed moon/music buttons own a ~48px gutter on the right edge; keep
   card-bearing acts symmetric inside it so no button ever sits on a card. */
@media (max-width: 600px) {
  #theme-toggle, #music-toggle, #fullscreen-toggle { width: 40px; height: 40px; }
  #theme-toggle { right: .35rem; top: .6rem; }
  #right-dock { right: .35rem; bottom: .6rem; }
  .events > .wrap, .gallery > .wrap { padding-inline: 3rem; }
  .btn-quiet { white-space: normal; text-align: center; max-width: 100%; letter-spacing: .1em; }
  .hero-names { flex-direction: row; flex-wrap: nowrap; gap: 0 .1em; font-size: clamp(2.9rem, 14vw, 4.6rem); white-space: nowrap; }
  .hero-amp { transform: translateY(-.04em); margin-block: 0; }
}

/* ── Day↔night circular reveal (View Transitions API) ──────────────────
   New theme wipes in as an expanding circle from the toggle button (driven in
   js/app/ui.js). Disable the default crossfade so the clip reveal reads clean. */
::view-transition-old(root),
::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { z-index: 1; }
::view-transition-old(root) { z-index: 0; }

/* ═══ REVIEW ROUND 3 ═════════════════════════════════════════ */
/* 3 countdown: masked glyphs sized like real digits, gold, never a loader */
.count-num { font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 400; color: hsl(var(--gold)); line-height: 1.1; }
.count-label { color: hsl(var(--ink) / .85); font-size: .66rem; }
.countdown .scratch-frame { background: hsl(347 42% 27%); box-shadow: inset 0 0 0 4px hsl(347 42% 27%), inset 0 0 0 5px hsl(var(--gold-soft) / .6), var(--shadow-lift); }
.countdown .scratch-prompt { color: hsl(var(--ink) / .88); }
/* 2 pending row on cards with no actions */
.event-actions--pending { align-items: center; }
.event-pending { font-family: var(--font-display); font-style: italic; font-size: 1.05rem; color: hsl(30 40% 34%); border-top: 1px dashed hsl(var(--gold-soft)); padding-top: .8rem; min-width: 60%; }
html[data-theme="dark"] .event-pending { color: hsl(38 50% 70%); }
.event-grid { align-items: start; }
@media (min-width: 900px) { .event-grid { align-items: stretch; } }
/* 9 main event: lacquered maroon, gold zari type, ribbon label */
.event-card--main {
  --ink: 40 36% 94%; --wisteria: 42 50% 72%; --wisteria-deep: 42 52% 82%; --gold: 42 58% 68%; --gold-soft: 41 42% 52%;
  background: radial-gradient(ellipse at 50% 0%, hsl(347 55% 24%), hsl(347 58% 15%) 75%);
  border: 2px solid hsl(var(--gold)); color: hsl(var(--ink));
  box-shadow: 0 0 0 4px hsl(var(--ivory)), 0 0 0 5px hsl(42 52% 40%), var(--shadow-lift);
}
html[data-theme="dark"] .event-card--main { background: radial-gradient(ellipse at 50% 0%, hsl(347 55% 24%), hsl(347 58% 15%) 75%); }
.event-card--main .event-no::after { content: " \00B7  The Main Event"; }
.event-card--main .event-name { font-size: 2.2rem; }
/* 1 interlude: no dead space on mobile */
@media (max-width: 600px) {
  .band.interlude { padding-block: 2.5rem; }
  .interlude-art img { height: 40svh; max-height: 40svh; }
  .interlude-line { margin-top: 1.3rem; }
  /* 11 kickers */
  .kicker { font-size: .82rem; font-weight: 600; letter-spacing: .22em; color: hsl(var(--wisteria-deep)); }
  .hero .kicker { font-size: clamp(1rem, 3.4vw, 1.2rem); font-weight: 500; letter-spacing: .05em; }
  /* 4 hero: sit lower, fill the bottom */
  .hero-inner { padding: 14vh 1.25rem 7vh; }
  .hero-bottom { padding-bottom: 6vh; }
  .hero-date { font-size: clamp(1.5rem, 6vw, 1.9rem); }
  .hero-tag { font-size: .88rem; margin-top: 1.4rem; }
  .hero-bottom::after { content: ""; display: block; width: 8rem; height: 1px; margin: 1.6rem auto 0; background: linear-gradient(90deg, transparent, hsl(var(--gold)), transparent); }
}
/* 4 dark hero: scrim behind the invitation lines */
.hero-top { position: relative; }
html[data-theme="dark"] .hero-top::before { content: ""; position: absolute; inset: -4rem -6rem; z-index: -1; background: radial-gradient(ellipse closest-side at center, hsl(347 45% 5% / .55) 0%, hsl(347 45% 5% / .3) 55%, transparent 100%); }
html[data-theme="dark"] .hero-hosts-ask { color: #f0d796; }
/* 7 dark portrait matte */
html[data-theme="dark"] .interlude-art { background: #3a1520; box-shadow: inset 0 0 0 6px #3a1520, inset 0 0 0 7px hsl(var(--gold-soft) / .7), 0 0 0 5px hsl(347 55% 22%), 0 0 0 7px hsl(var(--gold) / .8), var(--shadow-lift); }
/* 10 veiled gallery is never a void; events lone card */
.gallery-grid:empty { min-height: 12rem; }
/* 12 jewellery controls on desktop */
@media (min-width: 900px) {
  #theme-toggle, #music-toggle, #fullscreen-toggle, #floating-cue {
    width: 52px; height: 52px;
    background: radial-gradient(circle at 35% 30%, hsl(var(--ivory)), hsl(var(--parchment)));
    border: 1px solid hsl(var(--gold));
    box-shadow: 0 0 0 3px hsl(var(--ivory) / .85), 0 0 0 4px hsl(var(--gold-soft) / .8), 0 8px 20px -6px hsl(347 60% 12% / .45), inset 0 1px 0 hsl(0 0% 100% / .35);
    color: hsl(var(--gold));
    transition: box-shadow .4s var(--ease-luxe), transform .4s var(--ease-luxe);
  }
  #theme-toggle { right: 1.8rem; top: 1.6rem; }
  #right-dock { right: 1.8rem; bottom: 1.6rem; gap: .9rem; }
  #theme-toggle:hover, #music-toggle:hover, #fullscreen-toggle:hover { transform: rotate(8deg); box-shadow: 0 0 0 3px hsl(var(--ivory) / .85), 0 0 0 4px hsl(var(--gold)), 0 0 18px hsl(var(--gold) / .5); }
}
/* 10 desktop: let action rows wrap so five cards sit 3 + 2, never 2 + 2 + 1 */
@media (min-width: 900px) {
  .event-grid > .event-card { min-width: 0; padding-inline: 1.2rem; }
  .event-actions { flex-wrap: wrap; gap: .2rem 1.2rem; }
  .event-card .btn-quiet { letter-spacing: .08em; }
}

/* ═══ REVIEW ROUND 3b ═══════════════════════════════════════ */
html[data-theme="dark"] .event-card:not(.event-card--main) { background: #34161f; border-color: hsl(var(--gold) / .55); }
html[data-theme="dark"] .event-card--main { background: radial-gradient(ellipse at 50% 0%, #5a1626, #3c0f1a 80%); }
html[data-theme="dark"] .hero-veil { background: linear-gradient(180deg, rgba(26,10,16,.55) 0%, rgba(34,12,20,.5) 40%, rgba(42,15,24,.92) 100%); }
html:not([data-theme="dark"]) .footer-monogram { background-image: linear-gradient(135deg, #7a5420 0%, #b88a2e 40%, #8a6226 70%, #a67d34 100%); }
.footer-sign span { word-spacing: .12em; }
.gframe--veiled .veil-note { color: hsl(var(--ink) / .85); }
html[data-theme="dark"] .gframe--veiled { background: #34161f; }
@media (max-width: 600px) {
  .gframe--veiled { min-height: 260px; }
  .gframe--veiled .veil-note { font-size: clamp(1.15rem, 4.6vw, 1.4rem); }
  .family-motif { width: clamp(150px, 46vw, 190px); }
  .family-quote { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
  .interlude-line { font-size: clamp(1.15rem, 4.8vw, 1.4rem); }
}

/* ═══ REVIEW ROUND 7 ═════════════════════════════════════════ */
/* event times: date and time are separate lines, so no orphan "·" can ever lead one */
.event-when time span { display: block; }
.event-when .ev-t { font-style: italic; }
.event-when--tbc span { display: block; }
.event-when--tbc { min-height: 0; }
.event-actions--pending { min-height: 0; }
/* distinct gilt motif per card, same hairline language as the hashiya border */
.event-motif { display: block; width: 54px; height: 54px; margin: .1rem auto .6rem; color: hsl(var(--gold)); }
.event-no { margin-bottom: .5rem; }
/* main card: same type scale + 1px extra padding for its 2px border, so rows align with card 4 */
.event-card--main { padding: calc(1.9rem - 1px) calc(1.6rem - 1px) calc(2rem - 1px); }
.event-card--main .event-name { font-size: 1.9rem; }
.event-name { min-height: 2.2rem; }
.event-when { min-height: 2.6rem; }
@media (min-width: 900px) { .event-grid { align-items: stretch; } .event-card--main { transform: none; } }
/* mobile band padding (bands keep min-height:100svh) */
@media (max-width: 600px) {
  .band.countdown, .band.family { padding-block: 3rem; }
  /* fixed buttons never cover content: hidden while scrolling past the hero, a faint small seal at rest */
  html.dock-quiet #theme-toggle, html.dock-quiet #right-dock { transition: opacity .3s, transform .3s; opacity: .45; transform: scale(.75); }
  html.dock-quiet.is-scrolling #theme-toggle, html.dock-quiet.is-scrolling #right-dock { opacity: 0; pointer-events: none; }
  html.dock-quiet #right-dock { transform-origin: bottom right; }
  html.dock-quiet #theme-toggle { transform-origin: top right; }
}
/* scratch foil label: engraved, readable */
.scratch-frame { box-shadow: inset 0 0 0 4px hsl(347 42% 27%), inset 0 0 0 5px hsl(var(--gold-soft) / .8), 0 10px 26px rgba(0,0,0,.35); }

/* ═══ REVIEW ROUND 9 ═════════════════════════════════════════ */
/* 3+2 on desktop: six tracks, every card spans two, so row two sits on the same
   column width and gutters as row one, centred beneath it. */
@media (min-width: 900px) {
  .event-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 2.3rem; max-width: 74rem; margin-inline: auto; }
  .event-grid > .event-card { grid-column: span 2; }
  .event-grid > .event-card:nth-child(4):nth-last-child(2) { grid-column: 2 / span 2; }
  .event-grid > .event-card:nth-child(5):last-child { grid-column: 4 / span 2; }
  /* Per-tier links can show fewer cards: centre them instead of leaving them in
     the first columns (a lone wedding card sat hard left on desktop). */
  .event-grid > .event-card:only-child { grid-column: 3 / span 2; }
  .event-grid > .event-card:first-child:nth-last-child(2) { grid-column: 2 / span 2; }
  .event-grid > .event-card:nth-child(2):last-child { grid-column: 4 / span 2; }
}
/* date rows: every card reads date (ink) / time (italic ink); undated cards match */
.event-when--tbc, html[data-theme="dark"] .event-when--tbc { color: inherit; font-style: normal; }
.event-when--tbc .ev-t { font-style: italic; }
.event-when { min-height: 0; }
.event-when, .event-venue { margin-bottom: .2rem; }
.event-venue { margin-top: .5rem; margin-bottom: 1.1rem; }
/* cards with no buttons: a deliberate closing line pinned to the foot, not dead space */
.event-actions--pending { margin-top: auto; padding-top: 1rem; }
.event-pending { margin-inline: auto; text-align: center; }
/* dark: card rules legible against maroon */
html[data-theme="dark"] .event-card:not(.event-card--main) { border-color: hsl(var(--gold) / .95); box-shadow: 0 0 0 1px hsl(var(--gold) / .25), var(--shadow-lift); }
html[data-theme="dark"] .event-card::before { border-color: hsl(var(--gold) / .85); }
html[data-theme="dark"] .gframe--veiled { box-shadow: 0 0 0 1px hsl(var(--gold) / .6); border: 1px solid hsl(var(--gold) / .9); }
/* action icons */
.btn-quiet .ev-ic { flex: none; margin-right: .45em; }
.btn-quiet { gap: 0; }
/* mobile: both actions share one compact row */
@media (max-width: 600px) {
  .event-actions { flex-direction: row; flex-wrap: nowrap; gap: .5rem; justify-content: center; }
  .event-actions .btn-quiet { flex: 1 1 0; width: auto; min-width: 0; min-height: 44px; padding: .4rem .35rem; font-size: .62rem; letter-spacing: .05em; white-space: normal; line-height: 1.2; }
  .event-actions .btn-quiet .ev-ic { margin-right: .3em; width: 13px; height: 13px; }
  .scratch-prompt, .scratch-hint { text-wrap: balance; }
  .scratch-hint { font-size: .72rem; letter-spacing: .16em; }
}
.scratch-prompt { text-wrap: balance; }
/* veiled gallery: three ghost arch frames + kicker so the plate reads as a sealed set */
.veil-frames { display: flex; gap: .7rem; justify-content: center; }
.veil-frames i { display: block; width: 2.6rem; height: 3.4rem; border: 1px solid hsl(var(--gold) / .75); border-radius: 999px 999px 3px 3px / 70% 70% 3px 3px; background: linear-gradient(180deg, hsl(var(--gold) / .12), transparent); }
.veil-frames i:nth-child(2) { height: 4rem; margin-top: -.6rem; }
.veil-kicker { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: hsl(var(--gold)); font-weight: 500; }
html[data-theme="dark"] .veil-kicker { color: #e3c887; }

/* ═══ REVIEW ROUND 9b ════════════════════════════════════════ */
.count-num { font-variant-numeric: tabular-nums lining-nums; }
.event-pending { border-top-style: solid; border-top-color: hsl(var(--gold-soft) / .6); }
.footer { background-image: var(--jaal); background-size: 56px 56px; }
@media (max-width: 600px) {
  #theme-toggle, #music-toggle { background: hsl(var(--ivory) / .9); border: 1px solid hsl(var(--gold) / .8); box-shadow: 0 2px 10px rgba(0,0,0,.18); }
  html.dock-quiet #theme-toggle, html.dock-quiet #right-dock { opacity: .7; }
  .band.gallery { padding-block: 3.5rem; }
}

/* Prelude tier: unnumbered, sits alone above the programme. */
.event-card--prelude { text-align: center; }
.event-no--prelude { letter-spacing: .2em; }
.event-jai { font-family: var(--font-display); font-size: 1.15rem; color: hsl(var(--gold)); margin: -.1rem 0 .5rem; }
.event-note { font-size: .9rem; font-style: italic; margin-bottom: .2rem; }
.event-addr { font-size: .8rem; color: hsl(var(--ink) / .7); margin: -.6rem 0 .9rem; }
@media (min-width: 900px) {
  /* prelude: its own centred row above the 3+2 programme grid, at the SAME
     width as every programme card. Research pass: equal widths read as peers,
     a wider card outranks the rest, and a devotional prelude must not outrank
     the Wedding; it is set apart by its eyebrow, lack of number and the gap
     below instead. Card 01 is pinned to column 1 so auto-placement can't tuck
     it into the free columns beside the prelude. */
  .event-grid > .event-card--prelude { grid-column: 3 / span 2; }
  .event-card--prelude + .event-card { grid-column: 1 / span 2; }
  .event-card--prelude ~ .event-card:nth-child(5):nth-last-child(2) { grid-column: 2 / span 2; }
  .event-card--prelude ~ .event-card:nth-child(6):last-child { grid-column: 4 / span 2; }
  /* the prelude's row ends in the page's own divider ornament, full width, so
     the lone card reads as a deliberate overture above the programme rather
     than an orphan sitting on the first programme column (review round: "tall orphan").
     Explicit row 2: the grid places it before the auto-placed cards. */
  .event-grid:has(> .event-card--prelude)::before {
    content: ""; grid-column: 2 / span 4; grid-row: 2; align-self: center; margin: -.4rem auto;
    width: min(26rem, 70%); height: 14px;
    background:
      linear-gradient(90deg, transparent, hsl(var(--gold) / .9)) left center / calc(50% - 16px) 1px no-repeat,
      linear-gradient(90deg, hsl(var(--gold) / .9), transparent) right center / calc(50% - 16px) 1px no-repeat;
  }
  /* its centre jewel: the page's own lozenge (as .orn::before), same grid cell */
  .event-grid:has(> .event-card--prelude)::after {
    content: ""; grid-column: 2 / span 4; grid-row: 2; place-self: center;
    width: 10px; height: 10px; transform: rotate(45deg); background: var(--gilt);
    box-shadow: 0 0 0 4px hsl(var(--ivory)), 0 0 0 5px hsl(var(--gold) / .85);
  }
}
/* undated card's closing ornament */
.event-fin { margin: 0 auto; width: min(9rem, 60%); }