/* =====================================================================
   Nidhi & Rajat — wedding invitation
   Watercolor storybook, kept quiet: ivory paper, brown ink, a little gold.
   ===================================================================== */

:root {
  --paper: #FBF6EE;
  --paper-2: #F5ECDF;
  --paper-3: #EFE3D2;
  --ink: #3A2B22;
  --ink-soft: #7A6557;
  --ink-faint: #B3A091;
  --gold: #B08A55;
  --gold-soft: #DCC8A6;
  --gold-faint: #EEE3CE;
  --marigold: #E39A3B;
  --blush: #E8C6B3;
  --sage: #A3AD92;
  --night: #1E2340;
  --night-2: #2A2F52;

  --f-script: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif;
  --f-serif: 'Cormorant Garamond', Georgia, serif;
  --f-caps: 'Marcellus', 'Cormorant Garamond', serif;
  --f-engraved: 'Cinzel', 'Cormorant Garamond', serif;

  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --shadow: 0 10px 30px -18px rgba(58, 43, 34, .35), 0 2px 6px -2px rgba(58, 43, 34, .08);
  --radius: 18px;
  --maxw: 720px;
  --maxw-wide: 1040px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background:
    radial-gradient(56% 40% at 6% 1%, rgba(242,193,78,.26), transparent 62%),
    radial-gradient(50% 38% at 97% 13%, rgba(224,138,110,.26), transparent 64%),
    radial-gradient(46% 30% at 50% 46%, rgba(157,170,140,.14), transparent 66%),
    radial-gradient(60% 34% at 88% 92%, rgba(242,193,78,.22), transparent 66%),
    linear-gradient(180deg, #FDF7EC 0%, #FAF1E1 40%, #F6EAD6 100%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-serif);
  font-size: 18px;
  line-height: 1.55;
  font-weight: 500;
  overflow-x: hidden;
}
body.is-gated { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--gold-soft); color: var(--ink); }

/* ---------- atmosphere ---------- */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.petals { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: clip; }
.petal {
  position: absolute; top: -6vh; left: var(--x);
  width: var(--s); height: calc(var(--s) * 1.5);
  background: radial-gradient(ellipse at 40% 35%, rgba(255,255,255,.28), transparent 60%), var(--c);
  border-radius: 55% 45% 60% 40% / 60% 60% 40% 40%;
  opacity: 0;
  animation: fall var(--d) linear var(--delay) infinite;
}
@keyframes fall {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
  6%   { opacity: var(--o); }
  50%  { transform: translate3d(calc(var(--sway) * -1), 50vh, 0) rotate(160deg); }
  94%  { opacity: var(--o); }
  100% { transform: translate3d(var(--sway), 112vh, 0) rotate(330deg); opacity: 0; }
}

/* ---------- type primitives ---------- */
.eyebrow {
  font-family: var(--f-caps);
  font-size: 11.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 10px;
}
.title {
  font-family: var(--f-serif);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(34px, 5.2vw, 48px);
  line-height: 1.08;
  margin: 0;
  letter-spacing: -.005em;
}
.heading { text-align: center; margin: 0 auto 38px; max-width: var(--maxw); }
.heading .title { position: relative; display: inline-block; padding: 0 22px; }
.heading .title::before, .heading .title::after {
  content: ""; position: absolute; top: 55%; width: 44px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-soft));
}
.heading .title::before { right: 100%; }
.heading .title::after  { left: 100%; transform: scaleX(-1); }
.heading__note { margin: 14px 0 0; color: var(--ink-soft); font-style: italic; }
.title--numeric { font-family: var(--f-engraved); font-style: normal; font-weight: 500; letter-spacing: .1em; font-size: clamp(34px, 5.4vw, 52px); }
.title--numeric i { font-style: normal; color: var(--marigold); font-size: .5em; margin: 0 .1em; vertical-align: .2em; }

.names {
  font-family: var(--f-script);
  font-weight: 500;
  letter-spacing: .07em;
  margin: 0;
  line-height: 1.04;
  display: flex; align-items: baseline; justify-content: center; gap: .18em;
  flex-wrap: wrap;
}
.names__amp {
  font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: 0;
  color: var(--gold); font-size: .5em; transform: translateY(-.06em);
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--f-caps); font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  padding: 15px 28px; border-radius: 999px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer; transition: transform .35s var(--ease-out), box-shadow .35s, background .35s, color .35s;
}
.btn:active { transform: translateY(1px); }
.btn--gold { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--gold:hover { background: #2a1d16; box-shadow: 0 10px 24px -14px rgba(58,43,34,.6); transform: translateY(-1px); }
.btn--line { background: rgba(255,255,255,.35); color: var(--ink); border-color: var(--gold-soft); }
.btn--line:hover { border-color: var(--gold); background: rgba(255,255,255,.7); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--gold); outline-offset: 3px;
}

.card {
  background: linear-gradient(180deg, rgba(255,255,255,.7), rgba(255,255,255,.35));
  border: 1px solid var(--gold-faint);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(16px); filter: blur(4px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
}
.reveal.is-in { opacity: 1; transform: none; filter: none; }

/* ---------- gate ---------- */
.gate {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(12px, 3.5vh, 28px) 16px;
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out), visibility 0s linear .9s;
}
/* the wash behind the card: its own layer, so it can fade to show the page while the cover still turns.
   fixed, not absolute, so it covers the viewport even when the gate scrolls on a short screen; the
   card's perspective lives in its own transform so nothing here becomes a containing block */
.gate::before {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(55% 44% at 82% 88%, rgba(224,138,110,.28), transparent 68%),
    radial-gradient(48% 38% at 14% 10%, rgba(242,193,78,.32), transparent 68%),
    linear-gradient(180deg, #FDF8F0, #F8EEDF);
  transition: opacity .9s ease .55s;
}
.gate.is-opening::before { opacity: 0; }
.gate.is-open { opacity: 0; visibility: hidden; pointer-events: none; }
.gate__card {
  position: relative; text-align: center; width: min(520px, 100%);
  margin: auto; flex: 0 0 auto;
  padding: clamp(52px, 13vw, 78px) clamp(24px, 6vw, 56px) clamp(30px, 5vw, 44px); /* top clears the vine */
  background: linear-gradient(180deg, rgba(255,253,248,.96), rgba(253,246,234,.93));
  border: 1px solid var(--gold);
  border-radius: 22px;
  box-shadow: 0 34px 64px -36px rgba(122,80,40,.5), 0 0 0 7px rgba(255,255,255,.4);
  overflow: clip;
  animation: gate-in 1.2s var(--ease-out) both;
}
.gate__card::before {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--gold-soft); border-radius: 16px; pointer-events: none;
}
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
.gate__to { color: var(--ink-soft); letter-spacing: .18em; text-transform: none; font-family: var(--f-serif); font-style: italic; font-size: 19px; margin-bottom: 8px; }
.gate__invite { margin: 4px 0 18px; color: var(--ink-soft); font-style: italic; font-size: 19px; }
.names--gate { font-size: clamp(34px, 7.6vw, 48px); margin-bottom: 18px; }
.gate__date { font-family: var(--f-caps); letter-spacing: .26em; font-size: 12.5px; text-transform: uppercase; margin: 0 0 26px; color: var(--ink); }
.gate__hint { margin: 12px 0 0; font-size: 13px; color: var(--ink-faint); font-style: italic; }
.gate__card > * { animation: gate-item .9s var(--ease-out) both; }
.gate__card > .vine--top, .gate__card > .gate__sprigs { animation: none; opacity: 1; }
.gate__card > :nth-child(4) { animation-delay: .5s; }
.gate__card > :nth-child(5) { animation-delay: .65s; }
.gate__card > :nth-child(6) { animation-delay: .8s; }
.gate__card > :nth-child(7) { animation-delay: .95s; }
.gate__card > :nth-child(8) { animation-delay: 1.15s; }
.gate__card > :nth-child(9) { animation-delay: 1.35s; }
@keyframes gate-item { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* the open control: three variants, chosen in config.js (gate.style) or ?gate= */
.gate__controls { display: flex; justify-content: center; }
.gate-open {
  display: none; flex-direction: column; align-items: center; gap: 16px;
  background: none; border: 0; padding: 6px 10px; margin: 0; cursor: pointer; color: var(--ink);
}
.gate[data-style="button"] .gate-open--button,
.gate[data-style="diya"]   .gate-open--diya,
.gate[data-style="seal"]   .gate-open--seal { display: inline-flex; }
.gate-open:focus-visible { outline: 2px solid var(--gold); outline-offset: 8px; border-radius: 14px; }
.gate-open__label {
  font-family: var(--f-caps); font-size: 12px; letter-spacing: .26em; text-transform: uppercase;
  padding-bottom: 5px; border-bottom: 1px solid var(--gold-soft); transition: border-color .3s;
}
.gate-open:hover .gate-open__label { border-color: var(--gold); }

/* 1. outlined pill with a slow gold shimmer */
.open-pill {
  position: relative; display: inline-flex; align-items: center; gap: 14px; overflow: clip;
  padding: 17px 36px; border-radius: 999px; border: 1px solid var(--gold);
  background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.45));
  font-family: var(--f-caps); font-size: 12.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink);
  box-shadow: 0 12px 26px -18px rgba(58,43,34,.5);
  transition: transform .4s var(--ease-out), border-color .4s, box-shadow .4s;
}
.open-pill::after {
  content: ""; position: absolute; inset: -2px; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.85) 50%, transparent 65%);
  transform: translateX(-130%); animation: pill-shimmer 3.6s ease-in-out infinite;
}
@keyframes pill-shimmer { 0%, 55% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
.open-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--marigold); box-shadow: 0 0 0 4px rgba(227,154,59,.16); animation: dot-pulse 2.6s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(227,154,59,.14); } 50% { box-shadow: 0 0 0 7px rgba(227,154,59,.06); } }
.gate-open--button:hover .open-pill { transform: translateY(-1px); border-color: var(--ink); box-shadow: 0 16px 30px -18px rgba(58,43,34,.55); }
.gate-open--button:active .open-pill, .gate.is-opening .open-pill { transform: translateY(1px) scale(.98); }

/* 2. brass diya: the flame flickers, tap to light the way */
.diya { width: 176px; height: 132px; display: block; overflow: visible; transition: transform .5s var(--ease-out); }
.gate-open--diya:hover .diya { transform: translateY(-2px) scale(1.03); }
.diya__flame { transform-box: fill-box; transform-origin: 50% 100%; animation: art-flicker 1.15s ease-in-out infinite alternate; }
.diya__flame--m { animation-duration: .95s; animation-delay: -.3s; }
.diya__flame--i { animation-duration: .8s; animation-delay: -.55s; }
.diya__glow { transform-box: fill-box; transform-origin: center; animation: diya-glow 2.4s ease-in-out infinite alternate; }
@keyframes diya-glow { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.06); } }
.gate.is-opening .diya__flame { transform: scale(1.35, 1.5) !important; transition: transform .25s var(--ease-out); animation: none; }
.gate.is-opening .diya__glow { opacity: 1; transform: scale(1.4); transition: transform .3s, opacity .3s; animation: none; }

/* 3. the thread: pull the knot to untie and open ---------------------- */
.gate-open--thread { display: flex; flex-direction: column; align-items: center; width: 100%; gap: 16px; cursor: default; }
/* the cord runs to the card's edges and stops flush, as if it went round the back; the svg overflows and the card clips it */
.thread { position: relative; width: 100%; aspect-ratio: 640 / 130; touch-action: pan-y; --pull: 0; --shift: 0; }
.thread__svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* a fine twisted thread, not a rope: about 2px on a phone */
.cord-core  { fill: none; stroke: #C4314A; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.cord-twist { fill: none; stroke: url(#cordTwist); stroke-width: 3.7; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
/* a thin broken catch of light along the top */
.cord-shine { fill: none; stroke: #F6B7C0; stroke-width: 1; stroke-linecap: round; stroke-dasharray: 1.6 4.2; opacity: .55; }
.cord-shadow, .knot__tail-shadow, .knot__loop-shadow, .knot__cinch-shadow {
  fill: none; stroke: rgba(94,16,28,.16); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round;
}
/* every shadow lives inside the part it belongs to and is offset here, so a part that moves,
   stretches or shrinks takes its shadow with it */
.knot__tail-shadow, .knot__loop-shadow, .knot__cinch-shadow { transform: translate(0, 2.4px); }
.cord .cord-core, .cord .cord-twist, .cord .cord-shadow { stroke-linecap: butt; }
.knot__loop-line.cord-core { stroke: url(#cordShade); }
.knot__tail .cord-core  { stroke-width: 3.6; }
.knot__tail .cord-twist { stroke-width: 3.3; }
.knot__cinch .cord-core  { stroke: #8E1A2E; stroke-width: 4.2; }
.knot__cinch .cord-twist { stroke-width: 3.8; opacity: .6; }

/* Everything is driven by --pull (0 tied, 1 undone) and, while dragging, by --tug (which way the
   finger is going, -1..1) and, on each end element, --grow (how much cord has fed into it).
   The knot unties where it is: it never slides sideways, and neither do the cord runs. What moves
   is the loop, which shrinks into the cinch as its cord feeds through, and the two ends, which
   lengthen and swing toward the finger — the end being pulled far more than the other. */
/* the knot itself is never scaled: only the resting zoom touches it. shoelaces do not shrink */
.knot { transform-box: fill-box; transform-origin: 50% 52%; }
/* the loop is where the cord comes from: it draws down into the cinch, leaning toward the finger */
.knot__loop {
  transform-box: fill-box; transform-origin: 50% 100%;
  transform: scale(calc(1 - var(--pull) * .94)) skewX(calc(var(--tug) * var(--pull) * -16deg));
}
/* the cinch tightens rather than spinning */
.knot__cinch {
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: rotate(calc(var(--pull) * 26deg)) scale(calc(1 - var(--pull) * .34), calc(1 + var(--pull) * .18));
}
/* each end: swings toward the finger, its cord stretches as it feeds out, its tassel rides the tip */
/* --grow (how much cord has fed into this end) and --swing (how far it leans to the hand) are set
   by script.js on each end in turn. Set them per element, never as an alias of a shared var on the
   thread: one alias rule per side is a cascade waiting to go wrong, and the left end lost. */
.knot__tail { --grow: 0; --swing: 0; --tail-len: 34; transform: rotate(calc(var(--swing) * -52deg)); }
.knot__tail--r { --tail-len: 31; }
.knot__tail-cord {
  transform-box: fill-box; transform-origin: 50% 0%;
  transform: scaleY(calc(1 + var(--grow) * 1.6));
}
.tassel-hang { transform: translateY(calc(var(--grow) * var(--tail-len) * 1.6px)); }
.thread.is-settling .knot__loop,
.thread.is-settling .knot__cinch,
.thread.is-settling .knot__tail,
.thread.is-settling .knot__tail-cord,
.thread.is-settling .tassel-hang { transition: transform .55s var(--ease-out); }

/* kalava-style tassels on the loose ends: a gold wrap, then a small spray of crimson and gold
   strands, so the ends read as something to take hold of */
.tassel__strand { fill: none; stroke: #C4314A; stroke-width: .9; stroke-linecap: round; }
.tassel__strand--gold { stroke: #D4AF5A; stroke-width: .7; }
.tassel__collar { fill: none; stroke: #C9A961; stroke-width: 2.4; stroke-linecap: round; }
.thread.is-opening .knot { transition: transform .4s cubic-bezier(.4,0,.7,.3), opacity .4s ease-in; opacity: 0; }
.thread.is-opening .knot__cinch,
.thread.is-opening .knot__loop,
.thread.is-opening .knot__tail,
.thread.is-opening .knot__tail-cord,
.thread.is-opening .tassel-hang { transition: transform .4s ease-in; }

.thread__grip {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: clamp(84px, 22vw, 116px); height: clamp(84px, 22vw, 110px);
  padding: 0; border: 0; background: none; cursor: grab;
  touch-action: none; border-radius: 50%;
}
.thread__grip:active { cursor: grabbing; }
.thread__grip:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* a slow, plain zoom in and out, scaled about the cinch: clearly visible, never a heartbeat */
.thread:not(.is-pulling):not(.is-settling):not(.is-opening) .knot { animation: knot-pulse 2.6s ease-in-out infinite; }
@keyframes knot-pulse { 0%, 100% { scale: 1; } 50% { scale: 1.15; } }
/* the loose ends hang from the cinch and swing a little, out of step with each other */
.knot__tail { transform-box: fill-box; transform-origin: 50% 0%; }
/* two motions on the ends, composed: a slow out-of-step sway on the `rotate` property, and every
   seven seconds a lift on `transform`, both ends swinging to the right together as if a hand had
   caught them and was about to pull, held a beat, then dropped back with a small bounce. The
   heart and cinch never move. Both stop while pulling and once open. */
.thread:not(.is-pulling):not(.is-settling):not(.is-opening) .knot__tail {
  animation: tail-sway 3.1s ease-in-out infinite alternate, tail-lift 7s ease-in-out infinite;
}
.thread:not(.is-pulling):not(.is-settling):not(.is-opening) .knot__tail--r {
  animation-duration: 3.7s, 7s; animation-delay: -1.4s, .1s;
}
@keyframes tail-sway { from { rotate: -3deg; } to { rotate: 3deg; } }
@keyframes tail-lift {
  0%, 60%  { transform: none; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
  66%      { transform: rotate(-32deg); animation-timing-function: linear; }
  70%      { transform: rotate(-32deg); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  76%      { transform: rotate(7deg); animation-timing-function: ease-out; }
  82%      { transform: rotate(-2.5deg); }
  88%, 100% { transform: none; }
}
.gate-open--thread .gate-open__label { cursor: default; }

/* once the knot gives and the cord has fallen, the card opens like the cover of a book: hinged on
   its left edge, its right edge lifts toward you and swings across, and the hero is already there
   beneath it. an animation, not a transition: it replaces gate-in cleanly, whose forwards fill would
   otherwise pin the transform. backface-visibility hides the cover once it passes edge-on. */
.gate.is-opening .gate__card {
  transform-origin: 0% 50%; backface-visibility: hidden;
  animation: gate-cover 1.25s cubic-bezier(.5,.05,.3,1) .5s both;
}
@keyframes gate-cover {
  from { transform: perspective(1400px) rotateY(0); opacity: 1; }
  74%  { opacity: 1; }
  to   { transform: perspective(1400px) rotateY(-112deg); opacity: 0; }
}
/* a shadow creeps across the cover as it lifts away from the light */
.gate__card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, rgba(70,40,15,0) 25%, rgba(70,40,15,.28) 100%);
}
.gate.is-opening .gate__card::after { animation: cover-shade 1.25s ease-in .5s both; }
@keyframes cover-shade { to { opacity: 1; } }
.gate.is-opening .gate__hint { opacity: 0; transition: opacity .3s; }

/* ---------- hero ---------- */
main { position: relative; z-index: 2; }
.hero {
  position: relative; min-height: 100svh; padding: clamp(56px, 10vh, 96px) 20px 80px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  overflow: clip;
}
.hero__glow {
  position: absolute; inset: 0; pointer-events: none; z-index: -1;
  background:
    radial-gradient(38% 34% at 74% 68%, rgba(232,198,179,.55), transparent 70%),
    radial-gradient(30% 28% at 18% 22%, rgba(247,225,161,.35), transparent 70%);
}
.hero > * { opacity: 0; transform: translateY(14px); transition: opacity 1.1s var(--ease-out), transform 1.1s var(--ease-out); }
body.is-revealed .hero > * { opacity: 1; transform: none; }
body.is-revealed .hero__eyebrow { transition-delay: .1s; }
body.is-revealed .hero__art     { transition-delay: .25s; }
body.is-revealed .hero__quote   { transition-delay: .55s; }
body.is-revealed .names--hero   { transition-delay: .7s; }
body.is-revealed .hero__date    { transition-delay: .9s; }
body.is-revealed .hero__place   { transition-delay: 1s; }
body.is-revealed .scroll-cue    { transition-delay: 1.5s; }
.hero__glow { opacity: 1 !important; transform: none !important; }

.hero__art { width: clamp(220px, 38vw, 300px); margin: 6px 0 22px; }
.hero__art img { width: 100%; border-radius: 50%; aspect-ratio: 1; object-fit: cover; border: 6px solid rgba(255,255,255,.8); box-shadow: var(--shadow); }

.hero__quote { margin: 0 0 14px; font-style: italic; color: var(--ink-soft); font-size: clamp(17px, 2.2vw, 20px); max-width: 32ch; }
.names--hero { font-size: clamp(40px, 8vw, 70px); margin-bottom: 18px; }
.hero__date { font-family: var(--f-caps); letter-spacing: .28em; text-transform: uppercase; font-size: 13px; margin: 0 0 6px; }
.hero__place { margin: 0; color: var(--ink-soft); font-style: italic; }

.scroll-cue {
  position: absolute; bottom: 26px; left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold); text-decoration: none;
}
.scroll-cue svg { animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); opacity: .6; } 50% { transform: translateY(5px); opacity: 1; } }

/* ---------- sections ---------- */
.section { position: relative; padding: clamp(72px, 11vw, 120px) 20px; }
.section > *:not(.sky) { position: relative; }

/* ---------- film ---------- */
.film__frame {
  width: min(880px, 100%); margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: clip; position: relative;
  border: 1px solid var(--gold-faint);
  box-shadow: 0 30px 60px -36px rgba(58,43,34,.55), 0 0 0 8px rgba(255,255,255,.5);
  background: var(--paper-3);
}
.film__frame iframe, .film__frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.film__poster {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0; padding: 0; cursor: pointer;
  background:
    radial-gradient(60% 70% at 70% 30%, rgba(247,225,161,.6), transparent 70%),
    radial-gradient(50% 60% at 20% 80%, rgba(232,198,179,.7), transparent 70%),
    linear-gradient(160deg, var(--paper-2), var(--paper-3));
  display: grid; place-items: center; color: var(--ink);
}
.film__poster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.film__poster::after {
  content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,20,15,0), rgba(30,20,15,.28));
  opacity: 0; transition: opacity .5s;
}
.film__poster:hover::after { opacity: 1; }
.film__play {
  position: relative; z-index: 1;
  width: 78px; height: 78px; border-radius: 50%;
  background: rgba(251,246,238,.92); border: 1px solid var(--gold-soft);
  display: grid; place-items: center;
  box-shadow: 0 16px 34px -18px rgba(58,43,34,.7);
  transition: transform .45s var(--ease-out);
}
.film__poster:hover .film__play { transform: scale(1.06); }
.film__play svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--ink); }
.film__poster-label {
  position: absolute; z-index: 1; bottom: 18px; left: 0; right: 0; text-align: center;
  font-family: var(--f-caps); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft);
}
.film__poster.has-image .film__poster-label { color: rgba(251,246,238,.9); text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.film__caption { text-align: center; margin: 22px 0 0; color: var(--ink-soft); font-style: italic; }

/* ---------- story timeline ---------- */
.timeline {
  list-style: none; margin: 0 auto; padding: 0; position: relative; max-width: var(--maxw-wide);
}
.timeline::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px;
  background: linear-gradient(180deg, transparent, var(--gold-soft) 8%, var(--gold-soft) 92%, transparent);
}
.tl-item { position: relative; width: 50%; padding: 0 52px 56px 0; }
.tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 56px 52px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-item .card { padding: 26px 28px; text-align: right; }
.tl-item:nth-child(even) .card { text-align: left; }
.tl-item__dot {
  position: absolute; top: 28px; right: -14px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--gold-soft);
  display: grid; place-items: center; color: var(--gold);
}
.tl-item__dot::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tl-item:nth-child(even) .tl-item__dot { right: auto; left: -14px; }
.tl-item .eyebrow { margin-bottom: 6px; }
.tl-item h3 { margin: 0 0 8px; font-weight: 500; font-size: 26px; line-height: 1.15; }
.tl-item p { margin: 0; color: var(--ink-soft); }

/* ---------- countdown ---------- */
.count { display: flex; justify-content: center; gap: clamp(10px, 3vw, 22px); flex-wrap: wrap; }
.count__unit { text-align: center; min-width: 78px; }
.count__num {
  font-family: var(--f-caps); font-weight: 400; font-size: clamp(34px, 5vw, 46px); line-height: 1;
  width: clamp(78px, 12vw, 104px); height: clamp(78px, 12vw, 104px); display: grid; place-items: center;
  border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.4));
  border: 1px solid var(--gold-faint); box-shadow: var(--shadow); margin: 0 auto 10px;
  font-variant-numeric: tabular-nums; transition: opacity .25s;
}
.count__num.is-tick { opacity: .4; }
.count__label { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.count__today { font-family: var(--f-script); font-weight: 500; letter-spacing: .06em; font-size: clamp(30px, 6vw, 46px); text-align: center; }

/* ---------- itinerary with shifting sky ---------- */
.itinerary { overflow: clip; }
.itinerary {
  --sec-ink: var(--ink); --sec-soft: var(--ink-soft); --sec-line: var(--gold-soft);
  color: var(--sec-ink);
  transition: color 1.2s;
}
.sky {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  transition: background 1.6s var(--ease-out);
  background: linear-gradient(180deg, #FBF6EE 0%, #FBF0DD 45%, #F8E7CF 100%);
}
.itinerary[data-phase="dusk"]    .sky { background: linear-gradient(180deg, #F7E9DB 0%, #F0D2C3 50%, #E1BFC0 100%); }
.itinerary[data-phase="evening"] .sky { background: linear-gradient(180deg, #E8C7BC 0%, #C99AA1 55%, #7C6390 100%); }
.itinerary[data-phase="night"]   .sky { background: linear-gradient(180deg, #2E2A4E 0%, #1E2340 55%, #171A31 100%); }
.itinerary[data-phase="evening"], .itinerary[data-phase="night"] {
  --sec-ink: #FBF6EE; --sec-soft: rgba(251,246,238,.72); --sec-line: rgba(251,246,238,.35);
}
.itinerary[data-phase="evening"] .eyebrow, .itinerary[data-phase="night"] .eyebrow { color: #E6CFA0; }
.itinerary .heading .title::before, .itinerary .heading .title::after { background: linear-gradient(90deg, transparent, var(--sec-line)); }
.sky__stars {
  position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 28% 62%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.4px 1.4px at 41% 30%, rgba(255,255,255,.95), transparent 60%),
    radial-gradient(1px 1px at 57% 75%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 12%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1px 1px at 78% 48%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.3px 1.3px at 88% 22%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1px 1px at 93% 80%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1px 1px at 6% 86%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 48% 92%, rgba(255,255,255,.75), transparent 60%);
  background-size: 700px 600px;
  animation: twinkle 6s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(.7); } }
.itinerary[data-phase="night"] .sky__stars { opacity: 1; }
.sky__moon {
  position: absolute; top: 9%; right: 12%; width: 54px; height: 54px; border-radius: 50%;
  background: #F6E7C4; box-shadow: 0 0 40px 10px rgba(246,231,196,.25);
  opacity: 0; transform: translateY(20px); transition: opacity 1.6s, transform 1.6s var(--ease-out);
}
.sky__moon::after { content: ""; position: absolute; top: -8px; left: -8px; width: 52px; height: 52px; border-radius: 50%; background: #1E2340; }
.itinerary[data-phase="night"] .sky__moon { opacity: .95; transform: none; }
.itinerary__inner { position: relative; z-index: 1; max-width: var(--maxw-wide); margin: 0 auto; }

.day { margin: 0 auto 64px; max-width: 820px; }
.day:last-child { margin-bottom: 0; }
.day__head { text-align: center; margin-bottom: 30px; }
.day__label { font-family: var(--f-script); font-weight: 500; letter-spacing: .08em; font-size: 30px; line-height: 1; margin: 0 0 6px; color: var(--sec-ink); }
.day__date { margin: 0; font-family: var(--f-caps); font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--sec-soft); }
.event {
  display: grid; grid-template-columns: 150px 1fr; gap: 0;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(251,246,238,.97), rgba(251,246,238,.92));
  margin-bottom: 22px; overflow: clip;
}
.event__time {
  padding: 28px 22px; border-right: 1px solid var(--gold-faint);
  position: relative;
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.2));
}
.event__icon { width: 34px; height: 34px; color: var(--gold); }
.event__icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.event__clock { font-family: var(--f-caps); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; }
.event__body { padding: 26px 30px 24px; }
.event__name { font-family: var(--f-serif); font-weight: 500; font-size: 30px; line-height: 1.1; margin: 0 0 4px; }
.event__place { margin: 0 0 12px; color: var(--ink-soft); font-style: italic; }
.event__text { margin: 0; color: var(--ink-soft); }

/* ---------- venue ---------- */
.venue__card { max-width: 880px; margin: 0 auto; overflow: clip; }
.venue__map { aspect-ratio: 16 / 8; background: var(--paper-3); position: relative; }
.venue__map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.venue__meta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 24px 28px; flex-wrap: wrap; }
.venue__name { margin: 0 0 4px; font-weight: 500; font-size: 28px; line-height: 1.1; }
.venue__addr { margin: 0; color: var(--ink-soft); }
.travel { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; max-width: 880px; margin: 26px auto 0; }
.travel__item { padding: 22px 24px; }
.travel__item h4 { margin: 0 0 6px; font-family: var(--f-caps); font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); font-weight: 400; }
.travel__item p { margin: 0; color: var(--ink-soft); font-size: 17px; }
.travel__list { list-style: none; margin: 14px 0 0; padding: 0; }
.travel__list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--gold-faint); font-size: 16px; }
.travel__list span { color: var(--ink); }
.travel__list em { color: var(--ink-soft); font-style: italic; text-align: right; white-space: nowrap; }

/* ---------- rsvp ---------- */
.rsvp__form { max-width: 640px; margin: 0 auto; padding: clamp(26px, 5vw, 44px); }
.field { margin: 0 0 24px; padding: 0; border: 0; min-width: 0; }
.field label, .field legend {
  display: block; font-family: var(--f-caps); font-size: 11px; letter-spacing: .24em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 10px; padding: 0;
}
.optional { text-transform: none; letter-spacing: .04em; font-family: var(--f-serif); font-style: italic; font-size: 14px; }
.field input[type="text"], .field input[type="tel"], .field select, .field textarea {
  width: 100%; font: inherit; color: var(--ink); background: rgba(255,255,255,.5);
  border: 1px solid var(--gold-faint); border-radius: 12px; padding: 13px 16px;
  transition: border-color .3s, background .3s;
}
.field input::placeholder, .field textarea::placeholder { color: var(--ink-faint); font-style: italic; }
/* contact number: a short country-code box beside the number */
.phone { display: flex; gap: 10px; }
.phone__code { flex: 0 0 5.4em; text-align: center; }
.phone__number { flex: 1 1 auto; min-width: 0; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); background: #fff; outline: none; }
.field textarea { resize: vertical; }
.field select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23B08A55' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
.pills, .chips { display: flex; flex-wrap: wrap; gap: 10px; }
.pill input, .chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.pill, .chip { position: relative; cursor: pointer; }
.pill span, .chip span {
  display: inline-block; padding: 11px 18px; border-radius: 999px; border: 1px solid var(--gold-faint);
  background: rgba(255,255,255,.5); font-size: 17px; transition: all .3s;
}
.pills--small .pill span { padding: 8px 14px; font-size: 16px; }
.pill input:checked + span, .chip input:checked + span { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pill input:focus-visible + span, .chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 2px; }
.chip span { font-family: var(--f-caps); font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; padding: 9px 14px; }
.rsvp__yes { transition: opacity .4s, max-height .5s; overflow: clip; }
.rsvp__yes.is-hidden { max-height: 0; opacity: 0; margin: 0; }
.rsvp__actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 6px; }
.rsvp__error { margin: 0; color: #8E1B1B; font-style: italic; }
.rsvp__success { max-width: 640px; margin: 0 auto; padding: 44px 32px; text-align: center; color: var(--ink); }
.rsvp__success svg { margin: 0 auto 12px; color: var(--marigold); }
.rsvp__success h3 { font-family: var(--f-script); font-weight: 500; letter-spacing: .06em; font-size: 34px; margin: 0 0 6px; line-height: 1; }
.rsvp__success p { margin: 0; color: var(--ink-soft); font-style: italic; }
.btn.is-busy { opacity: .6; pointer-events: none; }

/* ---------- gallery ---------- */
.gallery__grid { columns: 190px 4; column-gap: 20px; max-width: 920px; margin: 0 auto; }
/* instax: thin sides, a deep white lip along the bottom for the caption */
.frame {
  break-inside: avoid; margin: 0 0 20px; padding: 8px 8px 30px; background: #fff;
  border: 1px solid var(--gold-faint); box-shadow: var(--shadow); border-radius: 4px;
  transform: rotate(var(--tilt, 0deg)); transition: transform .5s var(--ease-out);
}
.frame:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 18px 34px -20px rgba(122,80,40,.5); z-index: 2; }
.frame__win { display: block; overflow: clip; border-radius: 3px; }
.frame img, .frame .ph { width: 100%; display: block; border-radius: 3px; }
.frame img { transform: scale(1.24); transform-origin: center; will-change: transform; }
.frame.is-in img {
  animation:
    photo-in 1.5s var(--ease-out) forwards,
    ken-burns 9s ease-in-out 1.5s infinite alternate;
  animation-delay: 0s, calc(1.5s + var(--kb, 0) * -3s);
}
@keyframes photo-in { from { transform: scale(1.24); } to { transform: scale(1.03); } }
@keyframes ken-burns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(0, -3%, 0); }
}
.frame:hover img { animation-play-state: paused; }
.frame .ph {
  aspect-ratio: var(--ar, 4 / 5);
  background:
    radial-gradient(60% 60% at 30% 30%, rgba(247,225,161,.7), transparent 70%),
    radial-gradient(60% 60% at 80% 80%, rgba(232,198,179,.7), transparent 70%),
    linear-gradient(160deg, var(--paper-2), var(--paper-3));
  display: grid; place-items: center; color: var(--gold);
}
.frame .ph svg { width: 28px; height: 28px; opacity: .7; }
.frame figcaption { margin: 10px 4px 0; text-align: center; font-style: italic; color: var(--ink-soft); font-size: 13.5px; line-height: 1.4; }

/* ---------- families ---------- */
.families__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 820px; margin: 0 auto; }
.family { position: relative; padding: 34px 26px 30px; text-align: center; overflow: clip; }
.family--a { --fam: var(--gold); background: linear-gradient(180deg, rgba(242,193,78,.13), rgba(255,255,255,.4) 55%); }
.family--b { --fam: #C08272; background: linear-gradient(180deg, rgba(224,138,110,.13), rgba(255,255,255,.4) 55%); }
.family::after {
  content: ""; position: absolute; inset: 7px; border: 1px solid var(--gold-faint);
  border-radius: 13px; pointer-events: none;
}
.family__crest { width: 46px; height: auto; margin: 0 auto 12px; display: block; color: var(--fam); }
.family__corners { color: var(--fam); }
.family__corner { position: absolute; width: 30px; height: auto; opacity: .55; }
.family__corner:nth-child(1) { left: 12px; bottom: 12px; }
.family__corner:nth-child(2) { right: 12px; bottom: 12px; transform: scaleX(-1); }
.family__corner:nth-child(3) { left: 12px; top: 12px; transform: scaleY(-1); }
.family__corner:nth-child(4) { right: 12px; top: 12px; transform: scale(-1); }
.family__surname { font-family: var(--f-script); font-weight: 500; letter-spacing: .07em; font-size: 29px; margin: 6px 0 16px; line-height: 1.1; }
.family__rule { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 0 auto 20px; }
.family__rule i { width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.family__rule i:last-child { transform: scaleX(-1); }
.family__rule span { width: 6px; height: 6px; background: var(--marigold); transform: rotate(45deg); border-radius: 1px; }
.family__member { margin: 0 0 14px; }
.family__member strong { display: block; font-weight: 500; font-size: 20px; }
.family__member span { font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-soft); }
.family__note { margin: 18px 0 0; font-style: italic; color: var(--ink-soft); }

/* ---------- calendar ---------- */
.calendar__actions { display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; }

/* ---------- footer ---------- */
.footer { text-align: center; padding: 40px 20px 110px; color: var(--ink); position: relative; }
.footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 180px; z-index: -1;
  background:
    radial-gradient(40% 70% at 12% 100%, rgba(232,198,179,.45), transparent 70%),
    radial-gradient(40% 70% at 50% 100%, rgba(163,173,146,.35), transparent 70%),
    radial-gradient(40% 70% at 88% 100%, rgba(247,225,161,.45), transparent 70%);
}
.footer svg { margin: 0 auto 10px; color: var(--marigold); }
.footer__thanks { font-family: var(--f-script); font-weight: 500; letter-spacing: .06em; font-size: clamp(26px, 5vw, 38px); margin: 0 0 8px; line-height: 1; }
.footer__names { margin: 0 0 6px; font-style: italic; color: var(--ink-soft); }
.footer__tag { margin: 0; font-family: var(--f-caps); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }

/* ---------- music toggle ---------- */
.music {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px 10px 12px; border-radius: 999px;
  background: rgba(251,246,238,.9); border: 1px solid var(--gold-soft); box-shadow: var(--shadow);
  cursor: pointer; backdrop-filter: blur(8px);
  font-family: var(--f-caps); font-size: 10.5px; letter-spacing: .26em; text-transform: uppercase;
}
.music__bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.music__bars i { width: 3px; height: 30%; background: var(--gold); border-radius: 2px; transition: height .3s; }
.music[aria-pressed="true"] .music__bars i { animation: bars .9s ease-in-out infinite; }
.music[aria-pressed="true"] .music__bars i:nth-child(2) { animation-delay: .15s; }
.music[aria-pressed="true"] .music__bars i:nth-child(3) { animation-delay: .3s; }
@keyframes bars { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* ---------- responsive ---------- */
@media (max-width: 720px) {
  body { font-size: 17px; }
  .timeline::before { left: 14px; }
  .tl-item, .tl-item:nth-child(even) { width: 100%; margin-left: 0; padding: 0 0 36px 44px; }
  .tl-item .card, .tl-item:nth-child(even) .card { text-align: left; padding: 22px 22px; }
  .tl-item__dot, .tl-item:nth-child(even) .tl-item__dot { left: 0; right: auto; top: 22px; }
  .event { grid-template-columns: 1fr; }
  .event__time { flex-direction: row; justify-content: flex-start; padding: 16px 22px; border-right: 0; border-bottom: 1px solid var(--gold-faint); }
  .event__icon { width: 26px; height: 26px; }
  .event__body { padding: 22px 22px 22px; }
  .event__name { font-size: 27px; }
  .venue__meta { padding: 20px 22px; }
  .gallery__grid { column-count: 2; column-width: auto; column-gap: 12px; }
  .frame { margin-bottom: 12px; padding: 5px 5px 20px; }
  .frame figcaption { margin-top: 7px; font-size: 11.5px; }
  .heading .title::before, .heading .title::after { width: 22px; }
  .sky__moon { right: 8%; top: 5%; width: 40px; height: 40px; }
  .sky__moon::after { width: 38px; height: 38px; top: -7px; left: -7px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .petal, .scroll-cue svg, .sky__stars, .music__bars i { animation: none !important; }
  .reveal, .hero > *, .gate, .gate__card, .gate__card > * { transition: none !important; animation: none !important; opacity: 1; transform: none; filter: none; }
  .open-pill::after, .open-pill__dot, .diya__flame, .diya__glow { animation: none !important; }
  .petals { display: none; }
}


/* ---------- monogram (N & R) ---------- */
.monogram { width: 100%; height: auto; overflow: visible; }
.mono-dots { fill: none; stroke: var(--gold-soft); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 0.1 7.28; opacity: .9; }
.mono-ring { fill: none; stroke: var(--gold); stroke-width: .9; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .9; }
.mono-mpetal { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); opacity: 0; }
.mono-mpetal use { fill: var(--gold-faint); stroke: var(--gold); stroke-width: .8; }
.mono-mpetal.is-alt use { fill: var(--blush); stroke: var(--gold); opacity: .9; }
.mono-mdot { fill: var(--marigold); opacity: 0; }
.mono-initial { font-family: var(--f-script); font-size: 76px; }
.mono-initial--n { fill: var(--ink); }
.mono-initial--r { fill: var(--ink); }
.mono-amp { font-family: var(--f-serif); font-style: italic; font-size: 30px; fill: var(--gold); }
.mono-petal { transform-box: fill-box; transform-origin: 50% 100%; }
.mono-petal use { fill: var(--blush); stroke: var(--gold); stroke-width: .9; opacity: .95; }
.mono-lotus__seed { fill: var(--marigold); }

/* resting (pre-reveal) state */
.mono-initial, .mono-amp { opacity: 0; transform: translateY(8px); }
.mono-petal { transform: scaleY(0); opacity: 0; }
.mono-lotus__seed { opacity: 0; }

body.is-revealed .mono-ring   { animation: mono-draw 1.5s var(--ease-out) .35s forwards; }
body.is-revealed .mono-mpetal { animation: mono-petal .7s var(--ease-out) forwards; animation-delay: calc(.45s + var(--i) * .045s); }
body.is-revealed .mono-mdot   { animation: mono-fade .5s ease-out forwards; animation-delay: calc(.9s + var(--i) * .08s); }
body.is-revealed .mono-initial--n { animation: mono-in 1s var(--ease-out) 1.05s forwards; }
body.is-revealed .mono-initial--r { animation: mono-in 1s var(--ease-out) 1.25s forwards; }
body.is-revealed .mono-amp    { animation: mono-in .9s var(--ease-out) 1.5s forwards; }
body.is-revealed .mono-petal  { animation: mono-petal .8s var(--ease-out) forwards; animation-delay: calc(1.55s + var(--i) * .12s); }
body.is-revealed .mono-lotus__seed { animation: mono-fade .6s ease-out 2s forwards; }
@keyframes mono-draw  { to { stroke-dashoffset: 0; } }
@keyframes mono-in    { to { opacity: 1; transform: none; } }
@keyframes mono-petal { to { opacity: 1; transform: scaleY(1); } }
@keyframes mono-fade  { to { opacity: 1; } }

/* ---------- itinerary: living illustrations ---------- */
.event__time { position: relative; justify-content: flex-start; padding-top: 30px; min-height: 210px; }
.event__icon, .event__clock { position: relative; z-index: 1; }
.event__art { position: absolute; left: 0; right: 0; bottom: 0; height: 58%; z-index: 0; pointer-events: none; }
.event__art svg { width: 100%; height: 100%; display: block; overflow: visible; }

/* Haldi: marigolds bloom, turmeric motes drift up */
.art-bloom { transform-box: fill-box; transform-origin: center; transform: scale(0); opacity: 0; }
.event.is-in .art-bloom { animation: art-bloom .9s var(--ease-out) forwards; animation-delay: calc(.35s + var(--i) * .18s); }
@keyframes art-bloom { 0% { transform: scale(0); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.art-float { opacity: 0; }
.event.is-in .art-float { animation: art-float 4.5s ease-in-out infinite; animation-delay: calc(.8s + var(--i) * 1.1s); }
@keyframes art-float { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .85; } 100% { transform: translateY(-44px); opacity: 0; } }

/* Sangeet: string lights twinkle, notes float */
.art-bulb__glow { opacity: 0; }
.art-bulb__lamp { opacity: .45; }
.event.is-in .art-bulb__lamp { animation: art-twinkle 2s ease-in-out infinite; animation-delay: calc(var(--i) * .33s); }
.event.is-in .art-bulb__glow { animation: art-glow 2s ease-in-out infinite; animation-delay: calc(var(--i) * .33s); }
@keyframes art-twinkle { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes art-glow { 0%, 100% { opacity: 0; } 50% { opacity: .5; } }
.art-note__in { opacity: 0; }
.event.is-in .art-note__in { animation: art-note 5.5s ease-in-out infinite; animation-delay: calc(.6s + var(--i) * 2.6s); }
@keyframes art-note { 0% { transform: translateY(8px) rotate(-6deg); opacity: 0; } 15% { opacity: .85; } 80% { opacity: .5; } 100% { transform: translateY(-48px) rotate(8deg); opacity: 0; } }

/* Varmala motifs: two garlands swing in and cross */
.art-garland { opacity: 0; transform: translate(var(--from), -12px); }
.event.is-in .art-garland { animation: art-garland-in 1.3s var(--ease-out) forwards; animation-delay: var(--d, .2s); }
@keyframes art-garland-in { to { opacity: 1; transform: none; } }
.art-garland__in { transform-box: fill-box; transform-origin: 50% 0; }
.event.is-in .art-garland__in { animation: art-mala-sway 4.2s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }

@keyframes art-mala-sway { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

/* Phere: sacred fire flickers, sparks rise, seven vows light up */
.art-flame { transform-box: fill-box; transform-origin: 50% 100%; }
.event.is-in .art-flame { animation: art-flicker 1.15s ease-in-out infinite alternate; }
.event.is-in .art-flame--m { animation-duration: .95s; animation-delay: -.3s; }
.event.is-in .art-flame--i { animation-duration: .8s;  animation-delay: -.55s; }
@keyframes art-flicker { 0% { transform: scale(1, 1) skewX(0); } 50% { transform: scale(1.06, .94) skewX(2.5deg); } 100% { transform: scale(.95, 1.08) skewX(-2deg); } }
.art-spark { opacity: 0; }
.event.is-in .art-spark { animation: art-spark 2.8s ease-out infinite; animation-delay: calc(var(--i) * .55s); }
@keyframes art-spark { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--x), -50px); opacity: 0; } }
.art-vow { opacity: .18; }
.event.is-in .art-vow { animation: art-vow .7s ease-out forwards; animation-delay: calc(.5s + var(--i) * .24s); }
@keyframes art-vow { to { opacity: 1; } }
.art-glow-fire { opacity: 0; }
.event.is-in .art-glow-fire { animation: art-firelight 2.2s ease-in-out infinite alternate; }
@keyframes art-firelight { from { opacity: .35; } to { opacity: .7; } }

@media (max-width: 720px) {
  .event__time { min-height: 96px; padding: 16px 22px; justify-content: flex-start; align-items: flex-start; }
  .event__art { left: auto; right: 10px; top: 0; bottom: 0; height: auto; width: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .mono-mpetal, .mono-mdot, .mono-initial, .mono-amp, .mono-petal, .mono-lotus__seed, .art-bloom, .art-garland, .art-vow { opacity: 1 !important; transform: none !important; animation: none !important; }
  .mono-ring { stroke-dashoffset: 0 !important; animation: none !important; }
  .art-float, .art-note__in, .art-spark, .art-bulb__glow { display: none; }
  .art-bulb__lamp, .art-flame, .art-garland__in, .art-glow-fire { animation: none !important; opacity: 1; }
}


/* ---------- Ganesha invocation ---------- */
.ganesha { margin: 0 0 16px; }
.ganesha__img {
  width: clamp(84px, 21vw, 108px); height: auto; margin: 0 auto; display: block;
  opacity: 0; transform: translateY(10px) scale(.94);
  animation: ganesha-in 1.1s var(--ease-out) .2s forwards;
  opacity: .88;
}
@keyframes ganesha-in { to { opacity: .88; transform: none; } }
.ganesha__mantra {
  margin: 10px 0 0; font-family: 'Tiro Devanagari Hindi', 'Cormorant Garamond', serif;
  font-size: clamp(12.5px, 3.3vw, 15px); color: var(--ink-soft); letter-spacing: .03em; opacity: 0;
  animation: gn-rise .9s var(--ease-out) 1s forwards;
}
@keyframes gn-fade { to { opacity: 1; } }
@keyframes gn-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- toran across the top of the hero ---------- */
.toran {
  position: absolute; top: 0; left: -2%; right: -2%; height: clamp(34px, 7vw, 56px);
  z-index: 3; pointer-events: none; opacity: 0; transform-origin: 50% 0;
  filter: drop-shadow(0 3px 4px rgba(120,78,40,.18));
}
.toran svg { width: 100%; height: 100%; display: block; }
body.is-revealed .toran { animation: toran-in 1.2s var(--ease-out) .35s forwards, toran-sway 6s ease-in-out 1.6s infinite alternate; }
@keyframes toran-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
@keyframes toran-sway { from { transform: rotate(-.5deg); } to { transform: rotate(.5deg); } }

@media (prefers-reduced-motion: reduce) {
  .ganesha__img, .ganesha__mantra, .toran { opacity: 1 !important; transform: none !important; animation: none !important; }
}


/* ---------- gate card ornament: gold vine + corner sprigs ---------- */
.vine--top {
  position: absolute; top: 5px; left: 9px; right: 9px;      /* inner border to inner border */
  aspect-ratio: 600 / 96; height: auto; pointer-events: none;
}
.vine--top svg, .sprig { width: 100%; height: 100%; display: block; overflow: visible; }
.v-stem { fill: none; stroke: #A8813F; stroke-width: 1.2; stroke-linecap: round; }
.v-stem--fine { stroke-width: .9; stroke: var(--gold); }
.v-leaf { fill: #F2E9D4; stroke: var(--gold); stroke-width: .9; stroke-linejoin: round; }
.v-leaf__rib { fill: none; stroke: rgba(168,129,63,.65); stroke-width: .5; stroke-linecap: round; }
/* small tulip buds in crimson, a paler stroke down one petal for form */
.v-bloom { fill: #B0182F; stroke: #7A0F1F; stroke-width: .5; stroke-linejoin: round; }
.v-bloom__hi { fill: none; stroke: #E4738A; stroke-width: .7; stroke-linecap: round; }
.v-bloom__dot { fill: #6B4A2A; opacity: .7; }
.v-stem, .v-stem--fine, .v-leaf, .v-leaf__rib, .v-bloom, .v-bloom__hi, .v-bloom__dot { opacity: 0; animation: vine-in .8s var(--ease-out) forwards; }
.v-stem--fine { animation-delay: .25s; }
.v-leaf, .v-leaf__rib { animation-delay: .45s; }
.v-bloom, .v-bloom__hi, .v-bloom__dot { animation-delay: .75s; }
@keyframes vine-in { to { opacity: 1; } }

.gate__sprigs { position: absolute; inset: 14px; pointer-events: none; }
.sprig { position: absolute; bottom: 0; width: clamp(50px, 13vw, 68px); height: auto; } /* 80 x 100 box: taller than wide */
.sprig:nth-child(1) { left: 0; }
.sprig:nth-child(2) { right: 0; transform: scaleX(-1); }

/* ---------- headings get a marigold diamond ---------- */
.heading .eyebrow::before, .heading .eyebrow::after {
  content: ""; display: inline-block; width: 5.5px; height: 5.5px; vertical-align: middle;
  background: var(--marigold); transform: rotate(45deg); border-radius: 1px; opacity: .8;
  position: relative; top: -1px;
}
.heading .eyebrow::before { margin-right: 15px; }
.heading .eyebrow::after  { margin-left: 15px; }

/* warm tint bands so the page is not one flat colour all the way down */
.story, .gallery { background: linear-gradient(180deg, transparent, rgba(242,193,78,.09) 35%, rgba(242,193,78,.03)); }
.venue, .families { background: linear-gradient(180deg, transparent, rgba(224,138,110,.09) 35%, rgba(224,138,110,.03)); }
.countdown { background: linear-gradient(180deg, transparent, rgba(157,170,140,.09) 40%, transparent); }

@media (prefers-reduced-motion: reduce) {
  .v-stem, .v-stem--fine, .v-leaf, .v-leaf__rib, .v-bloom, .v-bloom__hi, .v-bloom__dot { animation: none !important; opacity: 1 !important; }
  .knot, .knot__tail { animation: none !important; }
}


/* ---------- each event card carries the colour of its hour ---------- */
.event { position: relative; }
.event::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 2;
  background: var(--ev, var(--gold));
}
.event[data-phase="morning"] { --ev: linear-gradient(180deg, #F2C14E, #E9A23B); --ev-tint: rgba(242,193,78,.20); --ev-edge: rgba(233,162,59,.34); }
.event[data-phase="dusk"]    { --ev: linear-gradient(180deg, #E8A48C, #C0567F); --ev-tint: rgba(216,130,150,.18); --ev-edge: rgba(192,86,127,.30); }
.event[data-phase="evening"] { --ev: linear-gradient(180deg, #E9A23B, #C0392B); --ev-tint: rgba(224,120,86,.18); --ev-edge: rgba(192,57,43,.28); }
.event[data-phase="night"]   { --ev: linear-gradient(180deg, #6E77A8, #2B2F4A); --ev-tint: rgba(80,88,132,.16); --ev-edge: rgba(43,47,74,.28); }
.event__time { background: linear-gradient(180deg, var(--ev-tint), rgba(255,255,255,.25)) !important; border-right-color: var(--ev-edge) !important; }
.event__icon { color: var(--ink); opacity: .85; }
.event__name::after {
  content: ""; display: block; width: 30px; height: 2px; margin-top: 8px; border-radius: 2px;
  background: var(--ev, var(--gold)); opacity: .8;
}

@media (max-width: 720px) {
  .event__time { border-bottom-color: var(--ev-edge) !important; }
  .family__corner { width: 24px; }
  .family { padding: 30px 20px 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .frame img, .frame.is-in img { animation: none !important; transform: none !important; }
}


/* ---------- the gate must fit a small phone without clipping ---------- */
@media (max-height: 800px) {
  .gate__card { padding: clamp(40px, 7vw, 54px) clamp(20px, 5vw, 44px) clamp(22px, 4vw, 34px); }
  .ganesha { margin-bottom: 14px; }
  .ganesha__img { width: clamp(74px, 19vw, 92px); }
  .ganesha__mantra { margin-top: 8px; }
  .gate__to, .gate__invite { font-size: 16.5px; }
  .gate__invite { margin-bottom: 12px; }
  .names--gate { font-size: clamp(29px, 6.8vw, 40px); margin-bottom: 12px; }
  .gate__date { margin-bottom: 18px; }
  .gate-open { gap: 12px; }
  .gate__hint { margin-top: 10px; font-size: 12px; }
  .vine--top { top: 4px; left: 8%; right: 8%; }
  .sprig { width: clamp(44px, 11vw, 58px); }
}
@media (max-height: 660px) {
  .ganesha__img { width: 68px; }
  .ganesha { margin-bottom: 10px; }
  .ganesha__mantra { font-size: 11.5px; margin-top: 6px; }
  .gate__to, .gate__invite { font-size: 15px; }
  .gate__invite { margin-bottom: 8px; }
  .names--gate { font-size: clamp(25px, 6vw, 34px); margin-bottom: 8px; }
  .gate__date { font-size: 11px; margin-bottom: 14px; }
  .gate-open__label { font-size: 11px; }
  .gate__hint { display: none; }
}