/* =========================================================
   Ankit & Madhura — 4 December 2026, Lucknow
   Design tokens → base → components → sections
========================================================= */

:root {
  /* Palette */
  --color-maroon: #6B1F2E;
  --color-maroon-deep: #4A1520;
  --color-gold: #C9A96E;
  --color-gold-bright: #D4B87A;
  --color-gold-deep: #A8874C;
  --color-forest: #1F4A3A;
  --color-forest-deep: #143528;
  --color-terracotta: #C97B4A;
  --color-cream: #F5EBD8;
  --color-cream-light: #FAF3E4;
  --color-ivory: #FDF9EF;
  --color-ink: #2A1810;

  /* Typography */
  --font-display: 'Cormorant Garamond', 'Playfair Display', serif;
  --font-body: 'Cormorant', 'EB Garamond', Georgia, serif;
  --font-script: 'Great Vibes', 'Allura', cursive;
  --font-devanagari: 'Gotu', sans-serif;
  --type-body: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --type-small: clamp(.9375rem, .9rem + .15vw, 1rem);
  --tracking-label: .14em;

  /* Rhythm */
  --section-py: clamp(2rem, 4vw, 3rem);
  --content-max: 640px;
  --content-max-wide: 1100px;
  --bar-h: 56px;

  /* Motion */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-slow: 900ms;
  --dur-med: 600ms;
  --dur-fast: 300ms;
}

@media (min-width: 768px) { :root { --bar-h: 72px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-ivory);
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 600; line-height: 1.12; font-family: var(--font-display); text-wrap: balance; }

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip-link {
  position: fixed; top: 0; left: 50%; z-index: 300;
  transform: translate(-50%, -110%);
  background: var(--color-maroon); color: var(--color-cream);
  font-family: var(--font-display); font-size: .8rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .75rem 1.5rem; border: 1px solid var(--color-gold);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* ---------- Top bar ---------- */
/* Invitation cover: two paper leaves part to reveal the invitation. */
.invitation-cover:not([open]) { display: none; }
.invitation-cover {
  position: fixed; inset: 0;
  width: 100%; max-width: none; height: 100%; max-height: none;
  margin: 0; padding: clamp(1rem, 4vw, 2.5rem);
  border: 0; color: var(--color-maroon);
  background: var(--color-ivory) url('assets/images/paper-texture.webp') center / 520px;
  display: grid; place-items: center; overflow-y: auto;
}
.invitation-cover::backdrop { background: var(--color-ivory); }
.invitation-cover.is-opening { background: transparent; overflow: hidden; perspective: 1600px; }
.invitation-cover.is-opening::backdrop { animation: invitation-backdrop 1600ms ease-in-out both; }
.invitation-cover.is-opening > .invitation-card { visibility: hidden; }
.invitation-leaf {
  position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; pointer-events: none;
  background: var(--color-ivory) url('assets/images/paper-texture.webp') center / 520px;
  will-change: transform, opacity;
  backface-visibility: hidden;
  animation: invitation-unfold 1600ms cubic-bezier(.4, 0, .2, 1) both;
}
.invitation-leaf-left { left: 0; transform-origin: left center; --leaf-turn: -82deg; }
.invitation-leaf-right { right: 0; transform-origin: right center; --leaf-turn: 82deg; }
.invitation-leaf .invitation-card { position: absolute; margin: 0; max-width: none; }
.invitation-leaf .invitation-open { transform: none; }
@keyframes invitation-unfold {
  from { transform: rotateY(0); opacity: 1; }
  to { transform: rotateY(var(--leaf-turn)); opacity: 0; }
}
@keyframes invitation-backdrop {
  from { opacity: 1; }
  to { opacity: 0; }
}
.invitation-card {
  position: relative; isolation: isolate;
  width: min(100%, 31rem); margin: auto;
  border: 1px solid rgba(168, 135, 76, .5);
  padding: clamp(2rem, 5vh, 3rem) clamp(1.25rem, 4vw, 2.5rem) 1rem;
  background: rgba(253, 249, 239, .85);
  box-shadow: 0 18px 60px rgba(74, 21, 32, .07);
  text-align: center;
}
.invitation-card::before {
  content: ''; position: absolute; inset: 7px;
  border: 1px solid rgba(168, 135, 76, .2); pointer-events: none;
}
.invitation-floral { position: absolute; width: clamp(65px, 18vw, 105px); z-index: -1; pointer-events: none; }
.invitation-floral-tl { top: 0; left: 0; }
.invitation-floral-br { bottom: 0; right: 0; }
.invitation-eyebrow {
  font-family: var(--font-display); font-size: .8125rem;
  font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
}
.invitation-seal { width: clamp(100px, 19vh, 160px); margin: 1.25rem auto .75rem; }
.invitation-names {
  font-family: 'Lovers Quarrel', var(--font-script); font-weight: 400;
  font-size: clamp(3rem, 9vw, 4.25rem); line-height: 1.1;
}
.invitation-names span { color: var(--color-gold-deep); }
.invitation-date { font-size: .9375rem; margin-top: .6rem; }
.invitation-date span { padding-inline: .3em; color: var(--color-gold-deep); }
.invitation-message { font-size: 1.1875rem; font-style: italic; line-height: 1.5; color: var(--color-ink); }
.invitation-open {
  display: inline-flex; align-items: center; justify-content: center; gap: 1.25rem;
  min-height: 48px; margin-top: 1.5rem; padding: .85rem 1.5rem;
  background: var(--color-maroon); color: var(--color-ivory);
  border: 1px solid var(--color-gold-deep);
  font-family: var(--font-display); font-size: .9375rem; letter-spacing: .08em;
  transition: background-color 200ms, transform 200ms;
}
.invitation-open:hover { background: var(--color-maroon-deep); transform: translateY(-2px); }
.invitation-open:active { transform: translateY(0) scale(.97); }
.invitation-note { font-size: .875rem; margin-top: .65rem; color: var(--color-ink); }
.invitation-quiet { min-height: 44px; padding: .5rem; font-size: .875rem; color: var(--color-maroon); text-decoration: underline; text-underline-offset: .2em; }
@media (prefers-reduced-motion: reduce) {
  .invitation-cover, .invitation-card, .invitation-open { transition: none; }
  .invitation-leaf { animation: none; }
  .invitation-cover.is-opening::backdrop { animation: none; background: transparent; }
}

#topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 120;
  height: var(--bar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 .75rem;
  color: var(--color-gold-deep);
  transition: background-color var(--dur-med) var(--ease-soft),
              box-shadow var(--dur-med) var(--ease-soft),
              backdrop-filter var(--dur-med);
}
#topbar.is-stuck {
  background: rgba(253, 249, 239, .88);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  box-shadow: 0 1px 0 rgba(201, 169, 110, .34);
  color: var(--color-maroon);
}

.bar-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 44px;
  color: inherit;
  transition: color var(--dur-fast), transform var(--dur-fast) var(--ease-soft);
}
.bar-btn:hover { color: var(--color-maroon); transform: translateY(-1px); }
#topbar.is-stuck .bar-btn:hover { color: var(--color-gold-deep); }

.bar-monogram {
  display: inline-flex; align-items: baseline; gap: .18em;
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: inherit;
  padding: .5rem;
}
.bar-monogram em { font-family: var(--font-script); font-style: normal; font-size: 1.25em; color: var(--color-gold); letter-spacing: 0; }

#music-toggle .ico-music-on { display: none; }
#music-toggle[aria-pressed="true"] .ico-music-on { display: block; }
#music-toggle[aria-pressed="true"] .ico-music-off { display: none; }

/* ---------- Nav drawer ---------- */
.drawer { position: fixed; inset: 0; z-index: 200; visibility: hidden; }
.drawer.is-open { visibility: visible; }

.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(42, 24, 16, .55);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-soft);
}
.drawer.is-open .drawer-backdrop { opacity: 1; }

.drawer-panel {
  position: relative; z-index: 1;
  width: min(330px, 86vw); height: 100%;
  background: var(--color-ivory);
  border-right: 1px solid rgba(201, 169, 110, .4);
  padding: 1.25rem 1.75rem 2rem;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform var(--dur-med) var(--ease-soft);
}
.drawer.is-open .drawer-panel { transform: none; }

.drawer-close { align-self: flex-end; color: var(--color-maroon); }

.drawer-logo {
  font-family: var(--font-script);
  font-size: 2rem; line-height: 1.2;
  color: var(--color-maroon);
  text-align: center; margin: .5rem 0 1rem;
}

.drawer-panel ul { margin-top: 1.25rem; }
.drawer-panel li + li { border-top: 1px solid rgba(201, 169, 110, .22); }
.drawer-panel li a {
  display: block; padding: .9rem .25rem;
  font-family: var(--font-display); font-size: .9375rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-soft);
}
.drawer-panel li a:hover { color: var(--color-maroon); padding-left: .75rem; }

.drawer-foot {
  margin-top: auto; padding-top: 2rem; text-align: center;
  font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--color-gold-deep);
}
.drawer-foot span { font-size: .72rem; opacity: .75; }

/* ---------- Ornaments ---------- */
.rule-gold {
  display: block; height: 1px; width: 100%; max-width: 180px;
  margin: 1rem auto;
  background: linear-gradient(to right, transparent, var(--color-gold), transparent);
}
.rule-gold.wide { max-width: 100%; margin: 2.75rem auto; }

/* Two gradient rules flanking a centred ◆.
   The diamond is a rotated square painted as the element's own background. */
.rule-diamond {
  --dia: 7px;
  display: flex; align-items: center; justify-content: center;
  gap: .75rem; width: 100%; max-width: 230px;
  height: var(--dia);
  margin: 1.1rem 0;
  background-image: linear-gradient(45deg, var(--color-gold) 0 100%);
  background-repeat: no-repeat;
  background-size: var(--dia) var(--dia);
  background-position: center;
}
.rule-diamond.center { margin-left: auto; margin-right: auto; }
.rule-diamond.rule-short { max-width: 150px; }
.rule-diamond::before, .rule-diamond::after {
  content: ""; flex: 1; min-width: 24px; height: 1px;
  /* leave a gap either side of the diamond */
  margin-inline: 0 calc(var(--dia) / 2 + .35rem);
  background: linear-gradient(to right, transparent, var(--color-gold));
}
.rule-diamond::after {
  margin-inline: calc(var(--dia) / 2 + .35rem) 0;
  background: linear-gradient(to left, transparent, var(--color-gold));
}
.rule-diamond.gold { background-image: linear-gradient(45deg, var(--color-gold-bright) 0 100%); }
.rule-diamond.gold::before { background: linear-gradient(to right, transparent, var(--color-gold-bright)); }
.rule-diamond.gold::after { background: linear-gradient(to left, transparent, var(--color-gold-bright)); }

.corner-floral {
  position: absolute; z-index: 3; pointer-events: none;
  width: clamp(88px, 22vw, 190px); height: auto;
  opacity: .96;
}
.corner-tl { top: 0; left: 0; }
.corner-tr { top: 0; right: 0; }
.corner-bl { bottom: 0; left: 0; }
.corner-br { bottom: 0; right: 0; }

.paper-grain {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* plain url() for old browsers, then image-set for the WebP upgrade */
  background-image: url("assets/images/paper-texture.jpg");
  background-image: -webkit-image-set(
    url("assets/images/paper-texture.webp") type("image/webp"),
    url("assets/images/paper-texture.jpg") type("image/jpeg"));
  background-image: image-set(
    url("assets/images/paper-texture.webp") type("image/webp"),
    url("assets/images/paper-texture.jpg") type("image/jpeg"));
  background-size: 520px;
  opacity: .18;
  mix-blend-mode: multiply;
}

.paithani-strip {
  position: absolute; left: 0; right: 0; height: 13px; z-index: 2;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg,
      var(--color-gold) 0 5px,
      transparent 5px 10px,
      var(--color-maroon) 10px 14px,
      transparent 14px 19px,
      var(--color-forest) 19px 24px,
      transparent 24px 30px);
  opacity: .5;
}
.paithani-strip.top { top: 0; }
.paithani-strip.bottom { bottom: 0; }

.peacock {
  position: absolute; z-index: 2; pointer-events: none;
  width: clamp(130px, 19vw, 250px); height: auto;
  opacity: .92;
}
.peacock-celebrations { right: -1.5rem; bottom: 2rem; }
.peacock-venue { right: -2rem; bottom: 1rem; }
@media (max-width: 1023px) { .peacock { display: none; } }

/* Each divider ramps from the colour of the section above it to the colour
   of the one below, so no seam is ever visible. Without this, three
   near-identical creams stack up and read as banding. */
.divider {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1.25rem, 4.5vw, 2.25rem) 1.5rem;
  background: var(--color-cream);
  /* 100svh resolves to a fractional height, so the next block starts on a
     half pixel and a hairline of the page background shows through the
     crack. Overlapping by 1px each side closes it. */
  margin-block: -1px;
  position: relative; z-index: 1;
}
.divider svg { width: 100%; max-width: 560px; height: auto; }

.lotus-crest { width: 46px; height: auto; margin: 0 auto .75rem; display: block; }
.swash { width: 150px; height: auto; margin: .35rem auto 1rem; display: block; }

/* ---------- Reveal ---------- */
.reveal { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .reveal.motion-ready {
    opacity: 0;
    transform: translateY(24px);
    transition:
      opacity var(--dur-slow) var(--ease-soft),
      transform var(--dur-slow) var(--ease-soft);
    transition-delay: var(--reveal-delay, calc(var(--i, 0) * 100ms));
  }
  .reveal.motion-ready.is-visible { opacity: 1; transform: none; }
  .divider > svg.reveal.motion-ready {
    transform: scaleX(.72);
    transition-duration: 1.2s;
  }
  .divider > svg.reveal.is-visible { transform: none; }
  .corner-floral.reveal.motion-ready {
    transform: translateY(16px);
    transition-duration: 1.3s;
  }
  .corner-floral.reveal.is-visible { opacity: .96; transform: none; }
  .homes-figure.reveal.motion-ready,
  .venue-art.reveal.motion-ready {
    transform: translateY(24px) scale(.97);
    transition-duration: 1.2s;
  }
  .homes-figure.reveal.is-visible,
  .venue-art.reveal.is-visible { transform: none; }
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: var(--font-display);
  font-size: clamp(.65rem, 1.5vw, .74rem);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--color-gold-deep); line-height: 1.9;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(2.125rem, 1.5rem + 2.5vw, 3.25rem);
  font-weight: 500; letter-spacing: .015em;
  line-height: 1.15;
  color: var(--color-maroon);
  text-align: center;
}

.head-stack {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, .95rem + 2.1vw, 2.5rem);
  font-weight: 500; letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--color-maroon);
  text-align: center;
  line-height: 1.32;
}
.head-stack span { display: block; }

.lede {
  font-family: var(--font-body);
  font-size: var(--type-body);
  color: rgba(42, 24, 16, .78);
  text-align: center; line-height: 1.75;
  max-width: 36ch; margin: 0 auto;
  text-wrap: pretty;
}

.script-line {
  font-family: var(--font-script);
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: var(--color-gold-deep);
  text-align: center; line-height: 1.5;
  margin-top: 2.75rem;
}

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 48px; padding: .85rem 2rem;
  font-family: var(--font-display); font-size: .82rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--color-gold-bright);
  background: var(--color-forest);
  border: 1px solid var(--color-gold);
  transition: background-color var(--dur-fast), transform var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast);
}
.btn-primary:hover {
  background: var(--color-forest-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(31, 74, 58, .26);
}
.btn-primary:active { transform: translateY(0); }

.btn-rsvp { background: var(--color-maroon); }
.btn-rsvp:hover { background: var(--color-maroon-deep); box-shadow: 0 10px 26px rgba(107, 31, 46, .28); }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 44px; padding: .55rem 1.1rem; margin-top: .65rem;
  font-family: var(--font-display); font-size: .7rem; font-weight: 600;
  letter-spacing: .17em; text-transform: uppercase;
  color: var(--color-gold-deep);
  border: 1px solid rgba(201, 169, 110, .5);
  transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast);
}
.btn-ghost:hover {
  border-color: var(--color-gold);
  background: rgba(201, 169, 110, .12);
  color: var(--color-maroon);
}

/* =========================================================
   01 — HERO
========================================================= */
#hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  overflow: hidden;
  padding: calc(var(--bar-h) + 1.5rem) 1.25rem 2rem;
}
@media (min-width: 1024px) { #hero { min-height: 92vh; } }

/* The artwork is a cut-out, so the section's own surface shows through
   wherever it is transparent. Giving that surface a paper grain means the
   bare band along the top reads as laid paper instead of flat fill. */
#hero { background-color: var(--color-cream-light); }
#hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background-image: url("assets/images/paper-texture.jpg");
  background-image: -webkit-image-set(
    url("assets/images/paper-texture.webp") type("image/webp"),
    url("assets/images/paper-texture.jpg") type("image/jpeg"));
  background-image: image-set(
    url("assets/images/paper-texture.webp") type("image/webp"),
    url("assets/images/paper-texture.jpg") type("image/jpeg"));
  background-size: 420px;
  /* no mix-blend-mode: a blended layer can form a backdrop root and stop
     .hero-copy::before from sampling the scene behind it */
  opacity: .34;
}

.hero-bg { position: absolute; inset: -6% 0 0; z-index: 1; will-change: transform; }
/* Each variant is already drawn to its viewport's shape, so it only needs
   centring — no per-breakpoint nudging of the focal point. */
.hero-bg img, .hero-bg picture {
  width: 100%; height: 106%;
  object-fit: cover; object-position: center center;
}

.hero-scrim {
  position: absolute; inset: 0; z-index: 2;
  background: rgba(42, 24, 16, .06);
}

/* Plain flow, no fixed ratios: the copy block sizes itself from its own
   content and carries its own legibility veil, so nothing to re-tune when
   the viewport changes. The background image supplies the arch. */
.hero-copy {
  /* no isolation here: it would make this a backdrop root and the
     ::before blur would have nothing behind it to sample */
  position: relative; z-index: 4;
  width: 100%; max-width: 27rem;
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
  padding: clamp(1.75rem, 7vw, 3rem) clamp(1.25rem, 6vw, 2.25rem);
}

/* Frosted halo rather than a cream panel: the scene behind the words is
   blurred and lifted slightly, and the whole thing is masked to an ellipse
   that fades to nothing — so there is no rectangle edge and the palace
   keeps its colour instead of being washed out. */
.hero-copy::before {
  content: "";
  position: absolute; inset: -14% -10%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(253, 249, 239, .74) 0%,
    rgba(253, 249, 239, .60) 46%,
    rgba(253, 249, 239, .26) 74%,
    rgba(253, 249, 239, 0) 100%);
  -webkit-backdrop-filter: blur(20px) brightness(1.07) saturate(.95);
  backdrop-filter: blur(20px) brightness(1.07) saturate(.95);
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 50%,
    #000 36%, rgba(0, 0, 0, .7) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 58% at 50% 50%,
    #000 36%, rgba(0, 0, 0, .7) 64%, transparent 100%);
}

.hero-copy > * { position: relative; z-index: 1; }

/* Where the blur cannot run, lean on an opaquer wash instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero-copy::before {
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(253, 249, 239, .95) 0%,
      rgba(253, 249, 239, .9) 46%,
      rgba(253, 249, 239, .5) 74%,
      rgba(253, 249, 239, 0) 100%);
  }
}

.hero-names {
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 10vw, 4rem);
  font-weight: 500; line-height: 1.06;
  letter-spacing: .04em;
  color: var(--color-maroon);
  margin: .7rem 0 .55rem;
}
.hero-name { display: block; text-transform: uppercase; }
.hero-amp {
  font-family: var(--font-script);
  font-size: .62em; line-height: 1;
  color: var(--color-gold-deep);
  margin: .08em 0 .12em;
}

.hero-states {
  font-family: var(--font-display);
  font-size: clamp(.68rem, 2.3vw, .8rem);
  font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
  color: var(--color-forest-deep);
}
.hero-states .dia { color: var(--color-gold); margin: 0 .55em; font-size: .7em; vertical-align: .15em; }

.hero-copy .rule-diamond { margin-left: auto; margin-right: auto; max-width: 190px; }

.hero-date {
  font-family: var(--font-display);
  font-size: clamp(1.05rem, 3.4vw, 1.3rem);
  font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-maroon-deep);
}
.hero-place {
  font-family: var(--font-display);
  font-size: clamp(.68rem, 2.1vw, .8rem);
  font-weight: 600;
  letter-spacing: .24em; text-transform: uppercase;
  color: var(--color-forest-deep);
  margin-top: .45rem;
}

/* A tight cream halo on the glyphs themselves. This does most of the
   legibility work, which is what lets the veil above stay so light. */
/* The small caps lines sit over the brightest, busiest parts of the scene,
   so they take the darkest tones in the palette rather than gold or mid
   forest, which washed out at this size. */
#hero .eyebrow {
  color: var(--color-maroon-deep);
  font-weight: 600;
  opacity: .92;
}

#hero .eyebrow,
.hero-states,
.hero-date,
.hero-place,
.hero-scroll span {
  text-shadow:
    0 0 6px rgba(253, 249, 239, 1),
    0 0 14px rgba(253, 249, 239, .92),
    0 1px 2px rgba(253, 249, 239, .95);
}
.hero-names {
  text-shadow:
    0 0 10px rgba(253, 249, 239, .98),
    0 0 28px rgba(253, 249, 239, .85),
    0 1px 3px rgba(253, 249, 239, .95);
}

.hero-scroll {
  position: relative; z-index: 4;
  margin-top: clamp(1.25rem, 5vh, 2.75rem);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .7rem 1.6rem;
  font-family: var(--font-display);
  font-size: .68rem; font-weight: 600;
  letter-spacing: .28em; text-transform: uppercase;
  line-height: 1.9; text-align: center;
  color: var(--color-maroon-deep);
  transition: color var(--dur-fast);
}
.hero-scroll > * { position: relative; z-index: 1; }

/* matching frosted halo, sized to the label */
.hero-scroll::before {
  content: "";
  position: absolute; inset: -20% -12%;
  z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 62% 54% at 50% 50%,
    rgba(253, 249, 239, .7) 0%,
    rgba(253, 249, 239, .42) 58%,
    rgba(253, 249, 239, 0) 100%);
  -webkit-backdrop-filter: blur(14px) brightness(1.06);
  backdrop-filter: blur(14px) brightness(1.06);
  -webkit-mask-image: radial-gradient(ellipse 60% 52% at 50% 50%,
    #000 34%, rgba(0, 0, 0, .65) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 60% 52% at 50% 50%,
    #000 34%, rgba(0, 0, 0, .65) 64%, transparent 100%);
}

.hero-scroll:hover { color: var(--color-maroon-deep); }

@media (prefers-reduced-motion: no-preference) {
  .hero-scroll .chev { animation: nudge 2s var(--ease-soft) infinite; }
}
@keyframes nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* =========================================================
   Shared panel shell (02, 03, 04, 06, 08)
========================================================= */
.panel {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  padding: var(--section-py) 1.25rem;
  scroll-margin-top: var(--bar-h);
  overflow: hidden;
}
@media (min-width: 768px) {
  .panel { padding-inline: 2rem; }
}
.panel .script-line { margin-top: 1.75rem; }
.panel-cream, .panel-ivory { background: var(--color-ivory); }

.wrap { position: relative; z-index: 4; width: 100%; max-width: var(--content-max-wide); margin: 0 auto; }
.wrap-narrow { max-width: var(--content-max); }

/* =========================================================
   02 — TWO HOMES
========================================================= */
#two-homes .rule-diamond { margin-block: 1rem; }
#two-homes .homes-watermark {
  -webkit-mask-image: linear-gradient(#000 50%, transparent);
  mask-image: linear-gradient(#000 50%, transparent);
}
#two-homes > .corner-floral {
  width: clamp(80px, 21vw, 150px);
}

/* Pale architectural wash filling the lower half of the panel. */
.homes-watermark {
  position: absolute; z-index: 1;
  left: 50%; bottom: 0;
  width: min(150%, 1000px);
  transform: translateX(-50%);
  pointer-events: none;
  opacity: .12;
}
.homes-watermark img {
  width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%);
  mask-image: linear-gradient(to top, #000 10%, transparent 92%);
}

/* The figure shrinks to the width of the artwork, so the caption grid
   beneath it lines up with the two painted arches at every size. */
.homes-figure {
  width: 100%; max-width: 420px;
  margin: 0 auto;
}
/* The portrait source has transparent padding above and below the arches.
   Frame the artwork in CSS so that padding does not scale into large gaps. */
.homes-figure > picture {
  display: block;
  position: relative;
  aspect-ratio: 900 / 1280;
  overflow: hidden;
}
.homes-figure img {
  display: block;
  width: 100%; height: auto;
  transform: translateY(-10.94%);
  margin-inline: auto;
}

/* Landscape sources have no large border. Size by available width rather
   than viewport height to keep the composition stable on taller screens. */
@media (min-width: 768px) {
  .homes-figure { max-width: 760px; }
  .homes-figure > picture { aspect-ratio: 4 / 3; }
  .homes-figure img { transform: none; }
}
@media (min-width: 1024px) {
  .homes-figure { max-width: 940px; }
  .homes-figure > picture { aspect-ratio: 1599 / 900; }
}

.homes-captions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.75rem, 3vw, 1.75rem);
  margin-top: 1.35rem;
}

.home { text-align: center; }
/* Each caption now lives in a half-width column, so the type is sized to
   fit ~150px at 360px wide without the state names wrapping mid-word. */
.home .from {
  display: block;
  font-family: var(--font-display);
  font-size: .75rem;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-gold-deep); margin-bottom: .35rem;
}
.home strong {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(.92rem, 3.4vw, 1.3rem); font-weight: 600;
  letter-spacing: .035em; text-transform: uppercase;
  color: var(--color-maroon); margin-bottom: .45rem;
  text-wrap: balance;
}
.home p {
  font-family: var(--font-body);
  font-size: var(--type-small);
  color: rgba(42, 24, 16, .82); line-height: 1.65;
  max-width: 21ch; margin: 0 auto;
  text-wrap: pretty;
}

/* =========================================================
   03 — TWO THREADS
========================================================= */
#two-threads {
  padding: 1rem 0 3rem;
}
#two-threads .wrap { max-width: 440px; }
#two-threads .corner-floral { width: clamp(80px, 24vw, 160px); }
#two-threads .lotus-crest { width: 38px; color: var(--color-gold-deep); }
#two-threads .head-stack {
  padding-inline: 1.25rem;
  color: var(--color-forest-deep);
  font-size: clamp(1.5rem, 5.4vw, 2rem);
  letter-spacing: .015em;
  line-height: 1.2;
}
#two-threads .lede {
  padding-inline: 1.25rem;
  margin-top: .75rem;
  font-size: 1rem;
  line-height: 1.5;
}
#two-threads .threads-stage {
  display: block;
  width: 100%;
  margin: 1rem auto 0;
  /* Blend the entrance into the paper and soften the folds behind the values. */
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 65%, transparent 88%);
  mask-image: linear-gradient(transparent, #000 12%, #000 65%, transparent 88%);
}
@media (prefers-reduced-motion: no-preference) {
  /* The existing scroll reveal gently develops the artwork out of the paper. */
  #two-threads .threads-stage.reveal {
    transform: none;
    transition: opacity 1.4s var(--ease-soft);
  }
}
#two-threads .threads-stage img {
  width: 100%;
  height: auto;
  aspect-ratio: 941 / 1672;
}
#two-threads .values {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  /* The tassel ends at roughly 68% of the portrait. Begin the labels
     below it, with an overlap that scales with the artwork's width. */
  margin-top: -34%;
}
#two-threads .values li { display: flex; flex-direction: column; align-items: center; gap: .45rem; }
#two-threads .values svg { width: 32px; height: auto; color: var(--color-gold-deep); }
#two-threads .values span {
  font-family: var(--font-display); font-size: .8125rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-forest); text-align: center; line-height: 1.6;
}
@media (min-width: 768px) {
  #two-threads { padding: 1.5rem 2rem 3rem; }
  #two-threads .wrap { max-width: 940px; }
  #two-threads .head-stack { font-size: clamp(2rem, 3vw, 2.5rem); }
  #two-threads .lede { font-size: var(--type-body); }
  #two-threads .threads-stage {
    margin-top: 1.5rem;
    -webkit-mask-image: linear-gradient(transparent, #000 12%);
    mask-image: linear-gradient(transparent, #000 12%);
  }
  #two-threads .threads-stage img { aspect-ratio: 1672 / 941; }
  #two-threads .values {
    flex-direction: row;
    justify-content: center;
    gap: clamp(2rem, 6vw, 5rem);
    margin-top: 1.5rem;
  }
}

/* =========================================================
   04 — OUR STORY
========================================================= */
.story { margin-top: 2.25rem; position: relative; }
.story::before {
  content: ""; position: absolute;
  left: 0; top: .5rem; bottom: .5rem; width: 1px;
  background: linear-gradient(to bottom, transparent, var(--color-gold) 8%, var(--color-gold) 92%, transparent);
  opacity: .55;
}
@media (min-width: 640px) { .story::before { left: 0; } }

.story-row {
  position: relative;
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1.1rem;
  align-items: center;
  padding-left: 1.6rem;
}
.story-row + .story-row { margin-top: 1.9rem; }
@media (min-width: 640px) {
  .story-row { grid-template-columns: 92px 1fr; gap: 1.6rem; padding-left: 2.25rem; }
}

.story-row .node {
  position: absolute; left: -4px; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px;
  background: var(--color-gold);
  transform: rotate(45deg);
  box-shadow: 0 0 0 4px var(--color-ivory);
}

.vignette {
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--color-gold);
  background:
    radial-gradient(circle at 35% 30%, rgba(201, 169, 110, .55), transparent 62%),
    linear-gradient(150deg, var(--color-maroon), var(--color-gold-deep));
  box-shadow: 0 6px 18px rgba(74, 21, 32, .14);
}
.vignette img { width: 100%; height: 100%; object-fit: cover; }

.story-copy .chapter {
  font-family: var(--font-display); font-size: .75rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--color-gold-deep); margin-bottom: .2rem;
}
.story-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.1875rem, 1rem + .7vw, 1.5rem); font-weight: 500;
  color: var(--color-maroon); line-height: 1.24; margin-bottom: .3rem;
}
.story-copy .desc {
  font-family: var(--font-body); font-style: italic;
  font-size: var(--type-body); line-height: 1.65;
  color: rgba(42, 24, 16, .74);
}
#our-story .story-row { align-items: start; }
#our-story .story-row .node { top: 38px; }
@media (min-width: 640px) {
  #our-story .story-row .node { top: 46px; }
}
#our-story .story-date {
  font-style: italic;
  font-size: var(--type-small);
  color: var(--color-maroon);
}
#our-story .story-detail summary {
  width: fit-content;
  min-height: 44px;
  padding-block: .5rem;
  cursor: pointer;
  font-size: var(--type-small);
  color: var(--color-maroon);
  text-underline-offset: .2em;
}
#our-story .story-detail summary:hover { text-decoration: underline; }
#our-story .story-less,
#our-story .story-detail[open] .story-more { display: none; }
#our-story .story-detail[open] .story-less { display: inline; }
#our-story .story-detail .desc { font-style: normal; margin-top: .25rem; }

/* =========================================================
   05 — TWO CULTURES
========================================================= */
#two-cultures {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  /* Keep room for the couple in the photograph without stretching with
     the screen height. Text remains in flow and can grow freely. */
  gap: clamp(12rem, 28vw, 22rem);
  padding: var(--section-py) 1.25rem;
  scroll-margin-top: var(--bar-h);
  overflow: hidden;
}
@media (min-width: 768px) { #two-cultures { padding-inline: 2rem; } }

.cultures-bg { position: absolute; inset: 0; z-index: 0; }
.cultures-bg img, .cultures-bg picture { width: 100%; height: 100%; object-fit: cover; object-position: center 28%; }

.cultures-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to bottom,
    rgba(253, 249, 239, .48) 0%,
    rgba(253, 249, 239, .24) 30%,
    transparent 48%,
    transparent 65%,
    rgba(20, 53, 40, .65) 100%);
}

.cultures-copy {
  position: relative; z-index: 3;
  width: 100%; max-width: 30rem;
  text-align: center;
  text-shadow: 0 1px 2px var(--color-ivory), 0 0 8px rgba(253, 249, 239, .8);
}
/* Match the hero's feathered frost, confined to the text rather than a panel.
   Avoid isolation so the filter can sample the photograph behind this layer. */
.cultures-copy::before {
  content: "";
  position: absolute;
  inset: -14% -10%;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 70% 60% at 50% 50%,
    rgba(253, 249, 239, .74) 0%,
    rgba(253, 249, 239, .60) 46%,
    rgba(253, 249, 239, .26) 74%,
    rgba(253, 249, 239, 0) 100%);
  -webkit-backdrop-filter: blur(20px) brightness(1.07) saturate(.95);
  backdrop-filter: blur(20px) brightness(1.07) saturate(.95);
  -webkit-mask-image: radial-gradient(ellipse 68% 58% at 50% 50%,
    #000 36%, rgba(0, 0, 0, .7) 64%, transparent 100%);
  mask-image: radial-gradient(ellipse 68% 58% at 50% 50%,
    #000 36%, rgba(0, 0, 0, .7) 64%, transparent 100%);
}
.cultures-copy > * { position: relative; z-index: 1; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cultures-copy::before {
    background: radial-gradient(ellipse 70% 60% at 50% 50%,
      rgba(253, 249, 239, .95) 0%,
      rgba(253, 249, 239, .9) 46%,
      rgba(253, 249, 239, .5) 74%,
      rgba(253, 249, 239, 0) 100%);
  }
}
.cultures-copy p {
  font-family: var(--font-body);
  font-size: var(--type-body);
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-ink);
  max-width: 32ch; margin: 0 auto;
  text-wrap: pretty;
}

.cultures-script {
  position: relative; z-index: 3;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 5vw, 2.25rem);
  line-height: 1.45; text-align: center;
  color: #FFF8EA;
  max-width: 100%;
  text-shadow: 0 2px 3px rgba(20, 53, 40, .9), 0 0 12px rgba(20, 53, 40, .65);
}

/* =========================================================
   06 — CELEBRATIONS
========================================================= */
.ceremonies { margin-top: 2.5rem; }

.celebration-note {
  max-width: 36ch;
  margin: 1.5rem auto 0;
  font-size: var(--type-small);
  font-style: italic;
  line-height: 1.65;
  text-align: center;
  color: var(--color-ink);
  text-wrap: pretty;
}

.ceremony {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 1.25rem;
  align-items: start;
  padding: 1.5rem 0;
}
.ceremony + .ceremony { border-top: 1px solid rgba(201, 169, 110, .34); }
@media (min-width: 640px) { .ceremony { grid-template-columns: 92px 1fr; gap: 1.75rem; } }

.badge {
  display: grid; place-items: center;
  width: 100%; aspect-ratio: 1; border-radius: 50%;
  background: var(--color-forest-deep);
  border: 1px solid var(--color-gold);
  box-shadow: 0 3px 10px rgba(20, 53, 40, .09);
  overflow: hidden;
}
.badge svg { width: 56%; height: auto; }
.badge img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ceremony-copy h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 500;
  letter-spacing: .02em;
  color: var(--color-maroon); margin-bottom: .3rem;
}
.ceremony-copy .when {
  font-family: var(--font-display);
  font-size: clamp(1rem, 2.4vw, 1.125rem); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-maroon); margin-bottom: .5rem;
}
.ceremony-copy .meta {
  font-family: var(--font-body); font-size: var(--type-body);
  line-height: 1.7; color: rgba(42, 24, 16, .74);
}

/* =========================================================
   07 — THE BIG DAY
========================================================= */
/* Same hairline guard as .divider, for the boundaries that have no divider
   between them. Most visible here, where cream meets maroon. */
#big-day, #venue-rsvp, .site-footer { margin-top: -1px; }

#big-day {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2.5rem;
  padding: var(--section-py) 1.5rem;
  scroll-margin-top: var(--bar-h);
  background: var(--color-maroon-deep);
  overflow: hidden;
}
@media (min-width: 768px) { #big-day { padding-inline: 2rem; } }
/* The decorative picture must not create an empty flex item and extra gap. */
#big-day > picture { position: absolute; inset: 0; pointer-events: none; }

.skyline {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 0;
  width: 100%; height: 48%;
  object-fit: cover; object-position: center bottom;
  opacity: .4; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent);
  mask-image: linear-gradient(to top, #000 55%, transparent);
}

.bigday-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 32rem;
  text-align: center;
}

.bigday-eyebrow {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.4vw, 1.5rem); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-gold-bright);
}

.cartouche {
  display: block;
  width: clamp(190px, 58vw, 300px); height: auto;
  margin: .5rem auto 1.5rem;
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, .3));
}

.bigday-script {
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 3.4vw, 1.5rem);
  color: var(--color-gold-bright);
  margin-top: .9rem;
}

.bigday-body {
  font-family: var(--font-body);
  font-size: var(--type-body);
  line-height: 1.85;
  color: rgba(245, 235, 216, .92);
}

.bigday-date {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 4vw, 1.7rem); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-gold-bright);
  margin-bottom: .35rem;
}
.bigday-place {
  font-family: var(--font-display);
  font-size: clamp(.76rem, 2.2vw, .88rem);
  letter-spacing: .24em; text-transform: uppercase;
  color: rgba(245, 235, 216, .88);
  margin-bottom: 1.5rem;
}
.bigday-deva {
  font-family: var(--font-devanagari);
  font-size: clamp(1rem, 2.8vw, 1.2rem);
  font-weight: 400; line-height: 1.95;
  color: var(--color-gold-bright);
}

.bigday-closing {
  position: relative; z-index: 2;
  font-family: var(--font-script);
  font-size: clamp(1.5rem, 5vw, 2.3rem);
  line-height: 1.5; text-align: center;
  color: var(--color-gold-bright);
}

/* =========================================================
   08 — VENUE & RSVP
========================================================= */
#venue-rsvp .wrap { text-align: center; }

.venue-art {
  width: 100%; max-width: 460px;
  margin: 2rem auto 1.5rem;
}

.btn-map { margin-bottom: 2.5rem; }

.info-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; margin: 0 auto; max-width: 30rem;
}
@media (min-width: 768px) {
  .info-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 20rem; }
}

.info-item {
  width: 100%; min-height: 44px;
  display: flex; flex-direction: column; align-items: center; gap: .7rem;
  padding: 1.1rem .5rem;
  border: 1px solid rgba(201, 169, 110, .3);
  transition: border-color var(--dur-fast), transform var(--dur-fast) var(--ease-soft),
              background-color var(--dur-fast);
}
.info-item:hover {
  border-color: var(--color-gold);
  background: rgba(201, 169, 110, .08);
  transform: translateY(-3px);
}
.info-ring {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1.4px solid var(--color-gold);
  color: var(--color-maroon);
}
.info-ring svg { width: 22px; height: 22px; }
.info-label {
  font-family: var(--font-display); font-size: .875rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--color-ink); line-height: 1.7;
}

.rsvp-head { margin-bottom: .9rem; }

.rsvp-wrap {
  display: flex; flex-direction: column; align-items: center; gap: .75rem;
  margin-top: 1.75rem;
}
.rsvp-note {
  font-family: var(--font-body); font-style: italic;
  font-size: var(--type-small); color: rgba(42, 24, 16, .78);
}

/* Consistent breathing room; surface changes provide their own separation. */
main > section:not(#hero) { padding-block: var(--section-py); }

/* ---------- Footer ---------- */
.site-footer { position: relative; overflow: hidden; background: var(--color-forest-deep); }
.footer-border {
  --border-height: clamp(48px, 6vw, 72px);
  height: var(--border-height);
  /* Artwork occupies rows 225–491 of the 724px source. Exclude its
     transparent padding and repeat horizontally without stretching motifs. */
  background-image: url("assets/images/paithani-border-strip.png");
  background-repeat: repeat-x;
  background-size: auto calc(var(--border-height) * 2.71161);
  background-position: center calc(var(--border-height) * -.8427);
}

.footer-band {
  position: relative; z-index: 4;
  background: var(--color-forest-deep);
  color: var(--color-cream);
  text-align: center;
  padding: 3rem 1.5rem 2.45rem;
  margin-top: 0;
}
.footer-band::before {
  content: "";
  display: block;
  width: min(9rem, 46vw);
  height: 1px;
  margin: 0 auto 1.15rem;
  background: linear-gradient(to right, transparent, rgba(212, 184, 122, .72), transparent);
}
.footer-names {
  font-family: 'Lovers Quarrel', var(--font-script);
  font-size: 3.35rem;
  color: var(--color-gold-bright);
  line-height: .92;
  letter-spacing: .01em;
  text-shadow: 0 12px 30px rgba(0, 0, 0, .24);
}
.footer-date {
  font-family: var(--font-display);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  font-variant-caps: small-caps;
  color: rgba(245, 235, 216, .94);
  margin-top: .8rem;
}
.footer-date .pipe { color: var(--color-gold-bright); margin: 0 .65em; }
.footer-tag {
  font-family: var(--font-body);
  font-size: 1rem;
  font-style: italic;
  letter-spacing: .015em;
  color: rgba(245, 235, 216, .76);
  margin-top: .85rem;
}
.footer-lotus { width: 34px; height: auto; margin: 1.15rem auto 0; opacity: .72; }

.footer-credit {
  margin-top: 1.5rem;
  font-family: var(--font-body);
  font-style: italic;
  line-height: 1.5;
  color: rgba(245, 235, 216, .72);
}
.footer-credit small { font-size: .8125rem; letter-spacing: .03em; }

@media (min-width: 768px) {
  .footer-band { padding: 3.35rem 1.5rem 2.75rem; }
  .footer-band::before { width: 11rem; margin-bottom: 1.25rem; }
  .footer-names { font-size: 4.25rem; }
  .footer-date { font-size: .9375rem; letter-spacing: .18em; }
  .footer-tag { font-size: 1.08rem; }
}


/* ---------- Modal ---------- */
.modal {
  position: fixed; inset: 0; z-index: 250;
  display: grid; place-items: center;
  padding: 1.25rem;
  visibility: hidden;
}
.modal.is-open { visibility: visible; }

.modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(42, 24, 16, .62);
  opacity: 0; transition: opacity var(--dur-med) var(--ease-soft);
}
.modal.is-open .modal-backdrop { opacity: 1; }

.modal-box {
  position: relative; z-index: 1;
  width: 100%; max-width: 27rem;
  background: var(--color-ivory);
  border: 1px solid var(--color-gold);
  padding: 2.5rem 1.75rem 2rem;
  text-align: center;
  opacity: 0; transform: scale(.96);
  transition: opacity var(--dur-med) var(--ease-soft), transform var(--dur-med) var(--ease-soft);
  box-shadow: 0 24px 60px rgba(42, 24, 16, .3);
}
.modal.is-open .modal-box { opacity: 1; transform: none; }

.modal-close { position: absolute; top: .4rem; right: .4rem; color: var(--color-maroon); }
.modal-lotus { width: 40px; height: auto; margin: 0 auto .75rem; }
.modal-box h2 {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4vw, 1.6rem); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--color-maroon);
}
#modal-body {
  font-family: var(--font-body);
  font-size: 1rem; line-height: 1.75;
  color: rgba(42, 24, 16, .78);
}

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 1.75rem; z-index: 280;
  transform: translate(-50%, 140%);
  background: var(--color-forest-deep);
  color: var(--color-cream);
  border: 1px solid var(--color-gold);
  font-family: var(--font-display);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  padding: .8rem 1.4rem;
  opacity: 0; pointer-events: none;
  transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med);
  max-width: calc(100vw - 2.5rem);
  text-align: center;
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* ---------- Print ---------- */
@media print {
  #topbar, .drawer, .modal, .toast, .hero-scroll, #bg-audio { display: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .panel, #hero, #big-day, #two-cultures { min-height: auto; page-break-inside: avoid; }
}