/* Self-hosted so the names render even if Google Fonts is slow or blocked.
   "block" hides text briefly instead of flashing a fallback cursive. */
@font-face {
  font-family: 'Pinyon Script';
  src: url('assets/fonts/pinyon-script-latin.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: block;
}

/* ============================================================
   Design tokens — palette drawn from the save-the-date artwork
   ============================================================ */
:root {
  --color-blue: #5D84A2;
  --color-blue-deep: #3E6380;
  --color-blue-ink: #2C4A63;
  --color-blue-mist: #DCE6EC;
  --color-coral: #CF4F63;
  --color-coral-soft: #E9939F;
  --color-blush: #F6DCDD;
  --color-sage: #6E8A5C;
  --color-green-deep: #3D5B3C;
  --color-gold: #B8924A;
  --color-gold-light: #E3CD9A;
  --color-gold-deep: #8C6A2C;
  --color-ink: #33302A;
  --color-ink-soft: #5A554A;
  --color-cream: #FBF6EA;
  --color-paper: #F7F3E6;       /* matches the crest artwork's paper */
  --color-paper-deep: #EFE7D3;
  --color-backdrop: #24323D;

  --font-script: 'Pinyon Script', cursive;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-devanagari: 'Tiro Devanagari Hindi', 'Cormorant Garamond', serif;

  --stage-max-width: 460px;
  --reveal-distance: 26px;
  --reveal-duration: 1s;
  --ease-out-soft: cubic-bezier(.22, .8, .26, 1);

  /* Cusped Mughal arch cap, used as a mask on .arch elements. */
  --arch-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 140' preserveAspectRatio='none'%3E%3Cpath d='M0,140 L0,118 C0,100 14,92 24,84 C30,72 28,60 42,54 C58,48 72,52 84,44 C96,34 98,22 112,16 C126,10 140,10 150,0 C160,10 174,10 188,16 C202,22 204,34 216,44 C228,52 242,48 258,54 C272,60 270,72 276,84 C286,92 300,100 300,118 L300,140 Z'/%3E%3C/svg%3E");
  /* Line · diamond · line divider */
  --ornament: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cg fill='none' stroke='%23B8924A' stroke-width='1.2'%3E%3Cpath d='M8 8H100M140 8H232'/%3E%3Cpath d='M120 1 L127 8 L120 15 L113 8Z' fill='%23B8924A'/%3E%3Ccircle cx='104' cy='8' r='2'/%3E%3Ccircle cx='136' cy='8' r='2'/%3E%3C/g%3E%3Ccircle cx='6' cy='8' r='2' fill='%23B8924A'/%3E%3Ccircle cx='234' cy='8' r='2' fill='%23B8924A'/%3E%3C/svg%3E");
  --ornament-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 16'%3E%3Cg fill='none' stroke='%23F3E6C8' stroke-width='1.2'%3E%3Cpath d='M8 8H100M140 8H232'/%3E%3Cpath d='M120 1 L127 8 L120 15 L113 8Z' fill='%23F3E6C8'/%3E%3Ccircle cx='104' cy='8' r='2'/%3E%3Ccircle cx='136' cy='8' r='2'/%3E%3C/g%3E%3Ccircle cx='6' cy='8' r='2' fill='%23F3E6C8'/%3E%3Ccircle cx='234' cy='8' r='2' fill='%23F3E6C8'/%3E%3C/svg%3E");
  /* Faint damask motif, echoing the patterned paper on the card */
  --damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='-4 -4 64 64'%3E%3Cg fill='none' stroke='%23B8924A' stroke-width='.8' opacity='.13'%3E%3Cpath d='M28 14c-4 4-4 9 0 12 4-3 4-8 0-12Z'/%3E%3Cpath d='M28 26c-5-1-8 1-9 4M28 26c5-1 8 1 9 4'/%3E%3Cpath d='M28 26v6'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-serif);
  color: var(--color-ink);
  background:
    radial-gradient(80% 60% at 50% 0%, #2F4252 0%, transparent 70%),
    var(--color-backdrop);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
p { text-wrap: pretty; }
.family__invite, .meet__note, .closing__note, .tip__text, .section-head__sub { text-wrap: balance; }
a { color: inherit; }
::selection { background: var(--color-blush); color: var(--color-blue-ink); }
:focus-visible { outline: 2px solid var(--color-coral); outline-offset: 3px; border-radius: 4px; }

/* The invite is a phone-sized card centred on larger screens. */
.stage {
  position: relative;
  max-width: var(--stage-max-width);
  margin: 0 auto;
  background-color: var(--color-paper);
  background-image: var(--damask);
  overflow: hidden;
  box-shadow: 0 40px 100px rgba(0, 0, 0, .45);
}

/* ============================================================
   Shared building blocks
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition: opacity var(--reveal-duration) ease, transform var(--reveal-duration) var(--ease-out-soft);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

.section { position: relative; padding: 76px 28px 80px; text-align: center; }
.section + .section::before {
  /* hairline gold rule between sections */
  content: ""; position: absolute; top: 0; left: 50%; width: 64px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--color-gold), transparent);
}

.eyebrow {
  display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  font-weight: 600; text-transform: uppercase; letter-spacing: .4em;
  font-size: .7rem; color: var(--color-gold-deep);
  padding-left: .4em; /* optically balance the trailing letter-spacing */
}
.eyebrow::before, .eyebrow::after {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-gold));
}
.eyebrow::after { transform: scaleX(-1); }

.script-title {
  font-family: var(--font-script); font-weight: 400;
  font-size: clamp(2.3rem, 10.5vw, 2.85rem); line-height: 1.12;
  color: var(--color-blue-deep); margin-top: 10px;
}
.script-title--coral { color: var(--color-coral); }
.section-head__sub { font-style: italic; font-size: 1.05rem; color: var(--color-ink-soft); margin-top: 6px; }

.ornament {
  display: block; width: 168px; height: 12px; margin: 18px auto;
  background: var(--ornament) center / contain no-repeat;
}
.ornament--light { background-image: var(--ornament-light); }

.pill-link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .66rem;
  color: var(--color-blue-deep); text-decoration: none;
  padding: 10px 20px; border: 1px solid var(--color-gold); border-radius: 40px;
  background: rgba(255, 255, 255, .45);
  transition: background .3s, color .3s, border-color .3s;
}
.pill-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.pill-link:hover, .pill-link:focus-visible { background: var(--color-blue-deep); border-color: var(--color-blue-deep); color: var(--color-cream); }

/* ---------- Mughal arch component ----------
   .arch-shell is the size container; nested .arch layers share the
   same cap height (in container units) so the gold layer peeks out
   evenly as a border around the inner panel. */
.arch-shell { container-type: inline-size; position: relative; margin-inline: auto; }
.arch {
  --cap-height: 46cqw;
  -webkit-mask: var(--arch-cap) top / 100% var(--cap-height) no-repeat,
                linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--cap-height) + 1px) no-repeat;
          mask: var(--arch-cap) top / 100% var(--cap-height) no-repeat,
                linear-gradient(#000 0 0) bottom / 100% calc(100% - var(--cap-height) + 1px) no-repeat;
}
.arch--gold {
  padding: 3px;
  background: linear-gradient(180deg, var(--color-gold-light), var(--color-gold) 40%, var(--color-gold-deep));
  filter: drop-shadow(0 18px 30px rgba(44, 74, 99, .22));
}
.arch--blue {
  background:
    radial-gradient(120% 50% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%),
    linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-deep) 100%);
  color: var(--color-cream);
}

/* ---------- Floral vines (drawn by JS into [data-vine]) ---------- */
.vine { position: absolute; top: 0; width: 34%; max-width: 150px; z-index: 1; pointer-events: none; }
.vine--left { left: -6px; }
.vine--right { right: -6px; transform: scaleX(-1); }
.vine__stem { fill: none; stroke: var(--color-sage); stroke-width: 1.6; stroke-linecap: round; }
.vine__twig { fill: none; stroke: var(--color-sage); stroke-width: 1.1; stroke-linecap: round; }
.vine--closing { top: auto; bottom: 0; width: 22%; transform: scaleY(-1); opacity: .9; }
.vine--right.vine--closing { transform: scale(-1, -1); }

/* ============================================================
   Opening — content sits inside the cream arch of the frame art
   ============================================================ */
.opening { position: relative; text-align: center; padding-bottom: 8px; }
/* Full screen, like each function scene, with the arch centred in it. */
.section--countdown {
  padding-top: 36px; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.section--countdown::before { display: none; }

/* Plain paper (no damask) so the arch interior reads as open, lit space. */
.hero { position: relative; container-type: inline-size; background: var(--color-paper); }
.hero__frame { position: relative; z-index: 1; display: flex; flex-direction: column; }

/* Dusk sky behind the fort: dusty blue at the horizon (from the card),
   warming to peach, then dissolving into the cream of the arch. */
.hero__sky {
  position: absolute; left: 0; right: 0; bottom: 22cqw; height: 100cqw; z-index: 0;
  background:
    radial-gradient(55% 30% at 50% 100%, rgba(255, 218, 178, .65), transparent 70%),
    linear-gradient(to top, #93ADBB 0%, #B9C9CF 16%, #E6D3C3 40%, #F1DFCF 55%, rgba(247, 243, 230, 0) 100%);
}
.hero__birds { position: absolute; inset: 0; overflow: hidden; }
.bird {
  position: absolute; left: 0; width: var(--size); color: var(--color-blue-ink); opacity: .7;
  animation: bird-glide var(--glide) linear var(--delay) infinite;
}
.bird svg { width: 100%; display: block; overflow: visible; }
.bird path {
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transform-origin: 50% 60%; animation: bird-flap var(--flap) ease-in-out infinite alternate;
}
/* Birds drift left-to-right with a gentle rise and fall; the frame hides them at the sides. */
@keyframes bird-glide {
  0%   { transform: translate(-20cqw, 0); }
  50%  { transform: translate(50cqw, var(--bob)); }
  100% { transform: translate(120cqw, 0); }
}
@keyframes bird-flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
.hero__frame img { width: 100%; }
.hero__frame-middle {
  height: var(--middle-height, 41.3cqw);   /* one tile by default; JS fits whole tiles to the screen */
  background: url("assets/frame-middle.webp") top center / 100% auto repeat-y;
  margin-block: -1px;                        /* hide sub-pixel seams between layers */
}
/* Melt the bottom edge of the artwork into the page paper. */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 8cqw;
  background: linear-gradient(180deg, rgba(247, 243, 230, 0), var(--color-paper));
  pointer-events: none;
}

/* All sizes are in cqw (1cqw = 1% of the artwork width) so the
   text keeps its place inside the arch at every screen size.
   Top clears the arch cap; bottom stops above the chhatris. */
.hero__content {
  /* bottom clears the whole bottom layer (78.6cqw tall) so text never runs into the foliage */
  position: absolute; left: 14%; right: 14%; top: 14cqw; bottom: 81cqw; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.hero__lead {
  font-weight: 600; font-size: 3.6cqw; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-gold-deep); padding-left: .22em; text-wrap: balance;
}
.hero__crest { width: 70cqw; margin-top: 3cqw; animation: float 8s ease-in-out infinite; }
.hero__names {
  font-family: var(--font-script); font-weight: 400; font-size: 11.6cqw; line-height: 1.15;
  color: var(--color-blue-deep); white-space: nowrap; margin-top: 1.5cqw;
}
.hero__amp { color: var(--color-coral); font-size: .78em; margin: 0 .06em; }

/* Heart in place of the dot on an "i": a dotless ı glyph plus an SVG heart,
   so it never depends on an emoji font. Pinyon's own dot floats far up-right,
   which looks detached as a heart, so the heart sits just above the stem tip
   instead, continued along the italic axis. Offsets are in em so they scale:
   left is from the glyph's left edge, top from the top of its line box. */
.heart-i { position: relative; }
.heart-i__heart {
  --heart-size: .11em;
  --heart-slant: 22deg;           /* matches the script's lean */
  position: absolute; left: .255em; top: .43em;
  width: var(--heart-size); height: calc(var(--heart-size) * .9);
  transform: translate(-50%, -50%) rotate(var(--heart-slant));
  fill: var(--color-coral); pointer-events: none;
}


/* staggered entrance */
[data-stagger] {
  opacity: 0; transform: translateY(14px);
  transition: opacity 1.1s ease, transform 1.1s var(--ease-out-soft);
}
.hero__crest[data-stagger] { transform: scale(.94); filter: blur(4px); transition: opacity 1.6s ease, transform 1.8s var(--ease-out-soft), filter 1.6s ease; }
.is-opened [data-stagger] { opacity: 1; transform: none; }
.is-opened .hero__crest[data-stagger] { filter: none; }
.is-opened [data-stagger="1"] { transition-delay: .5s; }
.is-opened [data-stagger="2"] { transition-delay: .9s; }
.is-opened [data-stagger="3"] { transition-delay: 1.15s; }
.is-opened [data-stagger="4"] { transition-delay: 1.45s; }
.is-opened [data-stagger="5"] { transition-delay: 1.7s; }

@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1cqw; } }

.gold-dust { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.gold-dust__speck {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, #FFF4D2 0%, var(--color-gold-light) 40%, rgba(227, 205, 154, 0) 70%);
  opacity: 0; animation: twinkle 4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1.2); } }

.scroll-cue {
  position: relative; z-index: 3; margin: 6px auto 0; width: max-content;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-decoration: none; text-transform: uppercase; letter-spacing: .35em; font-size: .62rem; font-weight: 600;
  color: var(--color-coral); padding-left: .35em;
  opacity: 0; transition: opacity 1s ease 2.4s;
}
.is-opened .scroll-cue { opacity: .9; }
.scroll-cue svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; animation: bob 2.2s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

.petal {
  position: fixed; top: -24px; z-index: 30; pointer-events: none;
  border-radius: 0 100% 0 100%;
  background: radial-gradient(circle at 30% 30%, var(--petal-light), var(--petal-dark));
  opacity: .9;
}
@keyframes petal-fall {
  0%   { transform: translate(0, 0) rotate(0); opacity: .95; }
  100% { transform: translate(var(--sway), 105vh) rotate(var(--spin)); opacity: 0; }
}

/* ============================================================
   Countdown arch
   ============================================================ */
.countdown-arch { width: min(100%, 360px); margin-top: 30px; }
.countdown { padding: 30cqw 22px 34px; }
.countdown__eyebrow {
  font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: .66rem;
  color: var(--color-gold-light);
}
.scratch { position: relative; margin-top: 16px; border-radius: 10px; }
.countdown__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 2px; }
.countdown__cell {
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 2px 10px; border-radius: 6px;
  border: 1px solid rgba(243, 230, 200, .45); background: rgba(255, 255, 255, .08);
}
.countdown__num {
  font-weight: 600; font-size: 2rem; line-height: 1; color: var(--color-cream);
  font-variant-numeric: lining-nums tabular-nums;
}
.countdown__label { text-transform: uppercase; letter-spacing: .2em; font-size: .56rem; color: var(--color-gold-light); margin-top: 6px; padding-left: .2em; }
.countdown .ornament { margin: 20px auto 12px; width: 140px; }
.countdown__date { font-weight: 600; font-size: 1.15rem; letter-spacing: .06em; }
.countdown__date sup, .closing__dates sup { font-size: .6em; }
.countdown__caption { font-style: italic; font-size: 1.05rem; color: var(--color-blue-mist); margin-top: 6px; }

.scratch__foil {
  position: absolute; inset: 0; width: 100%; height: 100%;
  border-radius: 8px; cursor: grab; touch-action: none; transition: opacity .7s ease;
}
.scratch__foil:active { cursor: grabbing; }
.scratch__foil.is-cleared { opacity: 0; pointer-events: none; }

/* ============================================================
   Families
   ============================================================ */
.section--family { padding-bottom: 70px; }
.family__mantra { font-family: var(--font-devanagari); font-size: 1.12rem; color: var(--color-coral); }
.family__invite {
  font-size: 1.06rem; line-height: 1.6; color: var(--color-blue-ink);
  max-width: 330px; margin: 22px auto 0;
}
.person { margin-top: 34px; }
.person__name { font-family: var(--font-script); font-size: 3.4rem; line-height: 1.05; color: var(--color-coral); }
.person__lineage {
  font-style: italic; font-size: 1.02rem; line-height: 1.6; color: var(--color-ink);
  max-width: 340px; margin: 12px auto 0; text-wrap: balance;
}
.family__with {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--font-script); font-size: 2rem; color: var(--color-gold-deep); margin-top: 34px;
}
.ornament--short { width: 64px; margin: 0; }

/* Extended family blessings, two groups per row */
.family__groups {
  /* Columns take their content's width so a long name can borrow space from
     a shorter column; JS scales all names together if the pair still won't fit. */
  display: grid; grid-template-columns: repeat(2, auto); justify-content: space-evenly; gap: 28px 14px;
  max-width: 420px; margin: 40px auto 0;
}
.family__group-title {
  font-family: var(--font-devanagari); font-weight: 400; font-size: 1.15rem;
  color: var(--color-coral); margin-bottom: 8px;
}
.family__group-names { font-size: calc(.98rem * var(--names-scale, 1)); line-height: 1.65; color: var(--color-ink-soft); }
.family__name { display: block; white-space: nowrap; }

/* ============================================================
   Celebration days
   ============================================================ */
/* The label alone heads this section, so the garlands start close beneath it. */
.days { display: grid; gap: 28px; margin-top: 12px; }
.day { width: min(100%, 330px); }
.day__panel { padding: 30cqw 24px 36px; }
.day__label {
  font-weight: 600; text-transform: uppercase; letter-spacing: .34em; font-size: .66rem;
  color: var(--color-gold-light); padding-left: .34em;
}
.day__date { font-family: var(--font-script); font-size: clamp(2.3rem, 11vw, 2.8rem); line-height: 1.15; margin-top: 8px; white-space: nowrap; }
.day__date sup { font-size: .5em; }
.day__weekday { font-weight: 600; text-transform: uppercase; letter-spacing: .26em; font-size: .78rem; color: var(--color-blue-mist); padding-left: .26em; }
.day .ornament { margin: 18px auto; width: 130px; }
.day__events { display: grid; gap: 18px; }
.day__event-name { font-family: var(--font-script); font-size: 1.9rem; line-height: 1; color: var(--color-cream); }
.day__event-meta { font-size: .95rem; color: var(--color-blue-mist); margin-top: 4px; }
.day__event-dress { font-style: italic; font-size: .92rem; color: var(--color-gold-light); margin-top: 2px; }
.day__tbd { font-style: italic; font-size: 1.05rem; line-height: 1.55; color: var(--color-blue-mist); }

/* ---------- Illustrated function scenes (Haldi, Sangeet, Wedding) ----------
   Full-bleed and borderless so each artwork flows out of the page like the
   opening frame. Negative margins cancel the section's 28px side padding.
   Each theme sets its own text colours and how its edges melt into the page. */
.day-frame {
  --label-color: #B4561A;
  --date-color: #6B4423;
  --time-color: #6B4423;
  --note-color: #8A5A2B;
  --divider-color: #F29A1F;
  --edge-fade: linear-gradient(180deg, transparent 0, #000 4%, #000 93%, transparent 100%);
  position: relative; width: calc(100% + 56px); margin-inline: -28px;
  container-type: inline-size;
}
/* The art is cut in two; the gap between the halves grows so every scene
   fills at least one full screen, and the illustrated parts never stretch. */
.day-frame__art {
  --join: 3cqw;   /* crossfade where a slice meets the filler */
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  -webkit-mask-image: var(--edge-fade);
          mask-image: var(--edge-fade);
}
.day-frame__slice { display: block; position: relative; z-index: 1; width: 100%; height: auto; flex: none; }
.day-frame__fill { flex: 1 0 0; }
/* The filler tucks under each slice by twice the fade, so the fade never ends
   on the filler's edge (that left a hairline); its pattern starts at the cut. */
.day-frame--filled .day-frame__fill {
  --tuck: calc(2 * var(--join));
  min-height: calc(2 * var(--tuck)); margin-block: calc(-1 * var(--tuck));
  background: var(--fill-image) center var(--tuck) / 100% auto repeat-y;
}
.day-frame--fill-stretch .day-frame__fill { background: var(--fill-image) 0 0 / 100% 100% no-repeat; }
.day-frame--filled .day-frame__slice--top {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--join)), transparent);
          mask-image: linear-gradient(180deg, #000 calc(100% - var(--join)), transparent);
}
.day-frame--filled .day-frame__slice--bottom {
  -webkit-mask-image: linear-gradient(0deg, #000 calc(100% - var(--join)), transparent);
          mask-image: linear-gradient(0deg, #000 calc(100% - var(--join)), transparent);
}
/* Haldi: transparent paper, so only the garlands and garden fade at the edges. */
.day-frame--haldi::before {
  content: ""; position: absolute; inset: 22% 6% 24%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .28), rgba(255, 214, 120, 0));
}
/* Sangeet: the artwork stays crisp (chandeliers hang from its top edge); instead a
   band above it carries the night sky up out of the cream page. */
.day-frame--sangeet {
  --sky-lead-in: 96px;
  --label-color: #E9C77B;
  --date-color: #DCE3F0;
  --time-color: #F7EEDC;
  --note-color: #B9C3D8;
  --divider-color: #E9C77B;
  --edge-fade: linear-gradient(180deg, #000 0, #000 90%, transparent 100%);
  margin-top: var(--sky-lead-in);
}
.day-frame--sangeet::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: var(--sky-lead-in);
  background: linear-gradient(180deg, rgba(24, 39, 62, 0) 0%, rgba(24, 39, 62, .12) 30%, rgba(24, 39, 62, .5) 65%, #18273E 100%);   /* #18273E = the art's sky; eased stops avoid a flat grey band */
}
.day-frame--sangeet .day-frame__content { text-shadow: 0 2px 12px rgba(10, 18, 40, .6); }
/* Baraat: watercolor procession under a painted toran; the cream sky meets the
   page, so text is dark and both edges simply melt away. */
.day-frame--baraat {
  --label-color: #9C1C33;
  --date-color: #5E3A2A;
  --time-color: #5E3A2A;
  --note-color: #7A5440;
  --divider-color: #E07A1F;
  --edge-fade: linear-gradient(180deg, #000 0, #000 95%, transparent 100%);   /* top stays crisp: the toran hangs from the edge */
}

.day-frame--baraat::before {
  /* eases the page's paper into the warmer sky at the top of the art (#FEF3DD) */
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 72px;
  background: linear-gradient(180deg, rgba(254, 243, 221, 0), #FEF3DD);
}

/* Animated layers (Haldi petals, Sangeet sky): above the art, beneath the text. */
.scene-layer { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

/* Scene text is driven by scroll (app.js sets the variables, all 0…1):
   --reveal per line as the scene slides in, --exit as it slides away,
   --drift for a slight parallax lag against the art. */
.day-frame__content { transform: translateY(calc(var(--drift, 0) * 1px)); }
.day-frame__label, .day-frame__date, .day-frame__event, .day-frame__divider {
  --shown: calc(var(--reveal, 0) * (1 - var(--exit, 0)));
  opacity: var(--shown);
  transform: translateY(calc((1 - var(--reveal, 0)) * 18px - var(--exit, 0) * 16px));
}
.day-frame__event { filter: blur(calc((1 - var(--reveal, 0)) * 5px)); }
.day-frame__divider {
  transform: translateY(calc(var(--exit, 0) * -16px))
             scale(calc(.3 + .7 * var(--reveal, 0)))
             rotate(calc((1 - var(--reveal, 0)) * -140deg));
}
/* Haldi: the warm glow behind the text blooms as the scene arrives. */
.day-frame--haldi::before {
  opacity: calc(var(--scene-reveal, 0) * (1 - var(--exit, 0)));
  transform: scale(calc(.55 + .45 * var(--scene-reveal, 0)));
}
/* Sangeet: the event name lights up like the chandeliers coming on. */
.day-frame--sangeet.is-live .day-frame__event-name { animation: lights-on 2.6s ease-out both; }
@keyframes lights-on {
  0%   { text-shadow: 0 2px 12px rgba(10, 18, 40, .6), 0 0 0 rgba(241, 208, 138, 0); }
  40%  { text-shadow: 0 2px 12px rgba(10, 18, 40, .6), 0 0 24px rgba(241, 208, 138, .9); }
  100% { text-shadow: 0 2px 12px rgba(10, 18, 40, .6), 0 0 12px rgba(241, 208, 138, .3); }
}

/* Content sits in the open area of each artwork (insets from config). Sizes in cqw scale with the art. */
.day-frame__content {
  position: absolute; z-index: 1;
  top: var(--content-top); bottom: var(--content-bottom);
  left: var(--content-inset); right: var(--content-inset);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.day-frame__label {
  font-weight: 700; text-transform: uppercase; letter-spacing: .34em; font-size: 3.4cqw;
  color: var(--label-color); padding-left: .34em;
}
.day-frame__date { font-style: italic; font-size: 4.8cqw; color: var(--date-color); margin-top: 1.2cqw; }
.day-frame__date sup { font-size: .6em; }
.day-frame__events { display: flex; justify-content: center; margin-top: 5cqw; }
.day-frame__events--row { align-items: flex-start; gap: 4cqw; }
.day-frame__events--stack { flex-direction: column; align-items: center; gap: 3.5cqw; }
.day-frame__event { text-align: center; min-width: 26cqw; }
.day-frame__event-name { font-family: var(--font-script); font-size: 12.4cqw; line-height: 1.05; color: var(--accent); }
/* Haldi and Sangeet sit in a wide open patch of art; a larger setting fills it. */
.day-frame--haldi .day-frame__label,
.day-frame--sangeet .day-frame__label { font-size: 4.1cqw; }
.day-frame--haldi .day-frame__date,
.day-frame--sangeet .day-frame__date { font-size: 5.8cqw; }
.day-frame--haldi .day-frame__event-name,
.day-frame--sangeet .day-frame__event-name { font-size: 16cqw; }
.day-frame--haldi .day-frame__event-time,
.day-frame--sangeet .day-frame__event-time { font-size: 4.6cqw; }
.day-frame--sangeet .day-frame__event-note,
.day-frame--haldi .day-frame__event-note { font-size: 4.4cqw; }
.day-frame__events--stack .day-frame__event-name { font-size: 10.4cqw; white-space: nowrap; }
.day-frame__event-time {
  font-weight: 700; text-transform: uppercase; letter-spacing: .18em; font-size: 3.8cqw;
  color: var(--time-color); margin-top: 1.6cqw; padding-left: .18em;
}
.day-frame__event-note { font-style: italic; font-size: 3.6cqw; color: var(--note-color); margin-top: .6cqw; }
.day-frame__divider { width: 6cqw; height: 6cqw; flex: none; }
.day-frame__events--row .day-frame__divider { margin-top: 5cqw; }

/* ============================================================
   Venues
   ============================================================ */
/* Full screen: arch outline over a Pink City glow, Amer Fort on the horizon.
   Section width is the container, so the arch cap (46% of its width) and the
   horizon scale together. */
.section--venues {
  container-type: inline-size;
  display: flex; flex-direction: column;
  min-height: 100vh; min-height: 100svh;
  padding: 0;
  background: linear-gradient(180deg, transparent 28%, rgba(244, 208, 204, .62) 66%, rgba(244, 208, 204, .5) 84%, transparent 100%);
}
.section + .section--venues::before { display: none; }   /* the arch replaces the hairline rule */
.venues__arch {
  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible;
  /* the sides fade away behind the fort and hills */
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 50cqw), transparent calc(100% - 24cqw));
          mask-image: linear-gradient(180deg, #000 calc(100% - 50cqw), transparent calc(100% - 24cqw));
}
.venues__arch[data-reveal] { opacity: 1; transform: none; }   /* it draws itself instead of fading */
.venues__arch-line {
  fill: none; stroke: url(#venuesArchGold); stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--ease-out-soft);
}
.venues__arch-line--outer { stroke-width: 1.4; }
.venues__arch-line--inner { stroke-width: .8; opacity: .8; transition-delay: .25s; }
.venues__arch.is-visible .venues__arch-line { stroke-dashoffset: 0; }
.venues__inner {
  position: relative; z-index: 2; flex: 1;
  display: flex; flex-direction: column;
  /* heading starts inside the arch cap, where the arch is wide enough */
  padding: calc(18px + 26cqw) 26px 0;
}
.venues__place {
  font-weight: 600; text-transform: uppercase; letter-spacing: .3em; font-size: .72rem;
  color: var(--color-gold-deep); margin-top: 14px; padding-left: .3em;
}
.venues { display: grid; gap: 16px; width: 100%; max-width: 330px; margin: auto; padding-block: 28px; }
.venues__horizon {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  margin-top: -13cqw;   /* its open sky tucks under the cards */
}
.venue {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(184, 146, 74, .45);
  box-shadow: 0 10px 24px rgba(44, 74, 99, .08);
}
.venue__index {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-script); font-size: 1.5rem; color: var(--color-cream);
  background: var(--color-blue-deep);
}
.venue__body { flex: 1; min-width: 0; }
.venue__name { font-weight: 600; font-size: 1.12rem; line-height: 1.25; color: var(--color-blue-ink); }
.venue__area { font-style: italic; font-size: .92rem; color: var(--color-ink-soft); }
.venue .pill-link { padding: 9px 14px; letter-spacing: .14em; }

/* ============================================================
   Meet the couple
   ============================================================ */
.portrait { width: min(100%, 330px); margin-top: 36px; }
.portrait__image { aspect-ratio: 4 / 5; background: var(--color-paper-deep); }
.portrait__image img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.meet__note { font-size: 1.06rem; line-height: 1.8; color: var(--color-ink-soft); max-width: 360px; margin: 32px auto 0; }

/* ============================================================
   Good to know
   ============================================================ */
.tips { display: grid; gap: 40px; margin-top: 44px; }
.tip__icon {
  width: 58px; height: 58px; margin: 0 auto 14px; padding: 12px; border-radius: 50%;
  color: var(--color-coral); background: rgba(255, 255, 255, .6); border: 1px solid rgba(184, 146, 74, .45);
}
.tip__icon svg {
  width: 100%; height: 100%; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.tip__title { font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: .8rem; color: var(--color-blue-deep); padding-left: .2em; }
.tip__text { font-size: 1.02rem; line-height: 1.7; color: var(--color-ink-soft); max-width: 310px; margin: 8px auto 0; }

/* ============================================================
   Closing
   ============================================================ */
.section--closing { padding: 80px 28px 96px; }
.closing { position: relative; z-index: 2; }
.closing__crest { width: 190px; margin: 18px auto 0; }
.closing__note { font-style: italic; font-size: 1.12rem; line-height: 1.6; color: var(--color-blue-ink); max-width: 320px; margin: 14px auto 0; }
.closing__from-label { font-weight: 600; text-transform: uppercase; letter-spacing: .26em; font-size: .62rem; color: var(--color-gold-deep); padding-left: .26em; }
.closing__families { text-wrap: balance; font-family: var(--font-script); font-size: 2.1rem; line-height: 1.2; color: var(--color-coral); margin-top: 6px; }
.closing__dates { font-weight: 600; letter-spacing: .06em; font-size: 1rem; color: var(--color-blue-deep); margin-top: 14px; }

/* ============================================================
   Music toggle — floats bottom-right inside the stage
   ============================================================ */
.music-toggle {
  position: fixed; z-index: 40;
  right: max(16px, calc(50vw - var(--stage-max-width) / 2 + 16px));
  bottom: calc(16px + env(safe-area-inset-bottom));
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(251, 246, 234, .88);
  border: 1px solid rgba(184, 146, 74, .7);
  box-shadow: 0 6px 18px rgba(44, 74, 99, .18);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--color-gold-deep);
}
.music-toggle[hidden] { display: none; }
.music-toggle:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 3px; }
/* a soft ring invites the first tap, until the music has played once */
.music-toggle:not(.has-started)::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%;
  border: 1px solid var(--color-gold); animation: music-invite 2.4s ease-out infinite;
}
@keyframes music-invite { from { transform: scale(1); opacity: .8; } to { transform: scale(1.6); opacity: 0; } }
/* paused: a music note; playing: dancing bars */
.music-toggle__note { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music-toggle__bars { display: none; align-items: flex-end; gap: 3px; height: 16px; }
.music-toggle.is-playing .music-toggle__note { display: none; }
.music-toggle.is-playing .music-toggle__bars { display: flex; }
.music-toggle__bars i {
  width: 3px; height: 4px; border-radius: 2px; background: currentColor;
  transition: height .3s ease;
}
.music-toggle.is-playing .music-toggle__bars i { animation: music-bar 1s ease-in-out infinite alternate; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(2) { animation-delay: -.4s; animation-duration: .8s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(3) { animation-delay: -.7s; animation-duration: 1.15s; }
.music-toggle.is-playing .music-toggle__bars i:nth-child(4) { animation-delay: -.2s; animation-duration: .9s; }
@keyframes music-bar { from { height: 4px; } to { height: 16px; } }

/* ============================================================
   Reduced motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal], [data-stagger] { opacity: 1; transform: none; }
  .day-frame__content, .day-frame :is(.day-frame__label, .day-frame__date, .day-frame__event, .day-frame__divider) { opacity: 1; transform: none; filter: none; }
  .day-frame--haldi::before { opacity: 1; transform: none; }
  .scroll-cue { opacity: .9; }
  .music-toggle.is-playing .music-toggle__bars i { height: 12px; }
}