/* Great Vibes' capital "A" reads as a lowercase "a" ("anushka"). This face
   holds only a capital A (from Allura, SIL Open Font License, subset to
   that one glyph); listed before Great Vibes, it supplies just the A and
   Great Vibes renders every other letter. */
@font-face {
  font-family: 'Script Cap A';
  src: url('../assets/fonts/script-cap-a.woff2') format('woff2');
  unicode-range: U+0041;
  font-display: swap;
  /* Allura's capitals are drawn smaller than Great Vibes' — scale this one
     glyph up so the A matches the S (cap height ~80 vs ~60 units at 100px) */
  size-adjust: 133%;
}

/* ============ Theme tokens (overridden at runtime from config) ============ */
:root {
  --color-primary: #c1121f;
  --color-accent: #f4a300;
  --color-deep: #7a0b12;
  --color-bg: #fff6e5;
  --color-surface: #ffe3a8;
  --color-text: #4a1010;
  --color-muted: #8c5a3c;
  --color-green: #1f7a3d;
  --font-heading: 'Playfair Display', 'Cormorant Garamond', serif;
  --font-script: 'Parisienne', cursive;
  --font-monogram: 'Script Cap A', 'Great Vibes', cursive; /* Great Vibes, with a true capital A */
  --font-names: 'Script Cap A', 'Great Vibes', cursive; /* Great Vibes with a true capital A */
  --font-display: 'Yeseva One', 'Playfair Display', serif;
  --font-body: 'Cormorant Garamond', Georgia, serif;
  --max-width: 780px;
}

* { box-sizing: border-box; }
/* Matches body's own base colour: mobile browsers reveal whatever is behind
   <body> during rubber-band/elastic overscroll (scrolling past the very
   top or bottom of the page) — with no background of its own here, that
   showed as a flash of plain white, which reads as "the page ran out and
   I'm now scrolling into empty space" rather than the natural bounce it
   actually is. */
html {
  scroll-behavior: smooth;
  background: #9e1f2c;
}

/* One carved red damask ground for the whole page, so the hero and the
   sections below it read as a single invitation rather than two designs.
   Content sits on it as cream/gold cards.

   No `background-attachment: fixed`: it's a well-known source of scroll
   jank, repaint stutter, and in some older iOS Safari versions outright
   broken rendering, for exactly the kind of long, image-heavy scrolling
   page this is. The pattern is a subtle texture, not a hero image — the
   parallax effect fixed attachment would add here isn't worth iOS's
   history of bugs with it. */
body {
  margin: 0;
  background-color: #9e1f2c;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(255,222,170,0.16) 0 2px, transparent 3px),
    radial-gradient(circle at 0 0,     rgba(255,222,170,0.10) 0 3px, transparent 4px),
    radial-gradient(circle at 100% 100%, rgba(255,222,170,0.10) 0 3px, transparent 4px),
    repeating-linear-gradient(45deg,  rgba(0,0,0,0.10) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,0.10) 0 1px, transparent 1px 22px),
    linear-gradient(170deg, #b32834 0%, #9e1f2c 45%, #7d1522 100%);
  background-size: 44px 44px, 44px 44px, 44px 44px, auto, auto, auto;
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 19px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.intro-open {
  overflow-y: auto;
}
body:not(.intro-open) {
  height: 100vh;
  overflow: hidden;
}

img { max-width: 100%; display: block; }

a { color: inherit; }
h1, h2, h3 { font-family: var(--font-heading); font-weight: 600; margin: 0; }

/* Section headings sit directly on the red ground, so they run gold/cream */
.section-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.95rem;
  color: #ffd77a;
  text-shadow: 0 1px 2px rgba(40,0,6,0.55), 0 0 14px rgba(244,163,0,0.35);
  margin: 0 0 0.6rem;
  text-align: center;
}

.section-title {
  text-align: center;
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 1rem;
  color: #fff4d6;
  text-shadow: 0 2px 6px rgba(40,0,6,0.45);
}
/* gold section title (e.g. "Will You Join Us?") */
.section-title-gold {
  color: #ffd77a;
  text-shadow: 0 2px 6px rgba(40,0,6,0.5), 0 0 18px rgba(244,163,0,0.35);
}
/* "Our Story": gold, larger, with a soft glow */
.section-title-highlight {
  font-size: clamp(2.2rem, 7vw, 3rem);
  color: #ffd77a;
  text-shadow: 0 2px 6px rgba(40,0,6,0.5), 0 0 22px rgba(244,163,0,0.45);
  margin-bottom: 0.5rem;
}

/* ============ Live falling petals ============ */
.petal-field {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  overflow: hidden;
}
.petal {
  position: absolute;
  top: -5vh;
  will-change: transform, opacity;
  animation-name: petal-fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.85;
}
.petal svg { display: block; filter: drop-shadow(0 2px 3px rgba(58,36,28,0.15)); }

@keyframes petal-fall {
  0% { transform: translate3d(0, -8vh, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift, 40px), 112vh, 0) rotate(var(--spin, 320deg)); }
}

@media (prefers-reduced-motion: reduce) {
  .petal-field { display: none; }
}

/* ============ Scroll reveal ============ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ---- Mute toggle ---- */
/* Fixed, and a direct child of <body>: it stays reachable while scrolling
   the whole site — the one way to silence music that plays site-wide.
   Hidden during the opening overlay; fades in once the site is revealed. */
.mute-toggle {
  position: fixed;
  /* Sits below the sticky nav (which is only ~60-70px tall, but this clears
     it with margin on any device) rather than at the very top edge — at
     the top edge it landed directly on top of the RSVP nav link. */
  top: calc(env(safe-area-inset-top) + 4.25rem);
  right: 1.1rem;
  z-index: 900;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(217, 180, 106, 0.4);
  background: rgba(13, 4, 3, 0.55);
  color: rgba(236, 224, 200, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, border-color 0.2s ease;
}
.mute-toggle:hover { border-color: rgba(217, 180, 106, 0.75); }
.mute-toggle .icon-on,
.mute-toggle .icon-off { display: block; }
.mute-toggle[data-muted="true"] .icon-on { display: none; }
.mute-toggle[data-muted="false"] .icon-off { display: none; }
body.intro-open .mute-toggle {
  opacity: 1;
  pointer-events: auto;
}

/* ============ Site content ============ */
.site-content {
  position: relative;
  z-index: 5;
  opacity: 0;
  transform: scale(0.97);
  transform-origin: 50% 0;
  transition: opacity 0.6s cubic-bezier(.65,0,.35,1), transform 0.8s cubic-bezier(.22,1,.36,1);
}
.site-content.is-visible {
  opacity: 1;
  transform: none;
}

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.5rem;
  background: rgba(94, 8, 18, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(244,163,0,0.45);
  gap: 1rem;
}
.nav-monogram {
  font-family: var(--font-monogram);
  font-size: 1.4rem;
  color: var(--color-accent);
  flex-shrink: 0;
}
.nav-monogram img { display: block; height: 40px; width: auto; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }
.nav-links {
  display: flex;
  gap: 1.25rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links a {
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: #ffe9b3;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(40,0,6,0.5);
}
.nav-links a:hover { color: var(--color-accent); }

/* ---- Hero: the invitation in a gold-lined arch ---- */
.hero { position: relative; width: 100%; padding: 2.25rem 1rem 1.5rem; }
.arch {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 4.25rem 1.75rem 3rem;
  text-align: center;
  color: #fff4d6;
  background:
    radial-gradient(ellipse at 50% 18%, rgba(244,163,0,0.12), transparent 60%),
    linear-gradient(180deg, #4d0812 0%, #3a050c 55%, #2c0308 100%);
  border: 1px solid rgba(244,163,0,0.6);
  border-radius: 280px 280px 12px 12px / 240px 240px 12px 12px;
  box-shadow:
    0 0 0 7px rgba(58,5,12,0.55),
    0 0 0 8px rgba(244,163,0,0.35),
    0 30px 60px -28px rgba(20,0,4,0.85);
}
/* faded flower sprays climbing each side, as in the printed card */
.arch-flora {
  position: absolute;
  top: 22%;
  width: 92px;
  height: 230px;
  opacity: 0.5;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 300'%3E%3Cg fill='none' stroke='%23c8a05a' stroke-width='2'%3E%3Cpath d='M20 300 C40 230 30 170 60 110 S70 40 50 0'/%3E%3Cpath d='M44 190 C70 180 90 160 100 140'/%3E%3C/g%3E%3Cg fill='%23c8a05a' fill-opacity='.55'%3E%3Cpath d='M38 222 C10 214 2 190 14 176 C28 196 36 206 38 222Z'/%3E%3Cpath d='M66 128 C92 118 108 96 100 80 C82 94 70 108 66 128Z'/%3E%3C/g%3E%3Cg transform='translate(58 104)'%3E%3Cg fill='%23a8323e'%3E%3Cellipse rx='9' ry='20' cy='-16'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(60)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(120)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(180)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(240)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(300)'/%3E%3C/g%3E%3Ccircle r='9' fill='%23c8a05a'/%3E%3Ccircle r='5' fill='%237a1a2a'/%3E%3C/g%3E%3Cg transform='translate(100 140) scale(.7)'%3E%3Cg fill='%23a8323e'%3E%3Cellipse rx='9' ry='20' cy='-16'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(72)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(144)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(216)'/%3E%3Cellipse rx='9' ry='20' cy='-16' transform='rotate(288)'/%3E%3C/g%3E%3Ccircle r='8' fill='%23c8a05a'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}
.arch-flora-left { left: 6px; }
.arch-flora-right { right: 6px; transform: scaleX(-1); }

.arch > *:not(.arch-flora) { position: relative; }
.arch-om {
  margin: 0;
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 2.6rem;
  line-height: 1;
  color: #d9a441;
}
.arch-invocation {
  margin: 1.4rem 0 0;
  font-family: 'Tiro Devanagari Sanskrit', serif;
  font-size: 1rem;
  letter-spacing: 0.12em;
  color: rgba(255,244,214,0.9);
}
.arch-pretitle {
  margin: 0.35rem 0 0;
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,244,214,0.92);
}
.arch-names { margin: 1.5rem 0 0; font-weight: 400; }
.arch-name {
  display: block;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: clamp(3rem, 15vw, 4.6rem);
  line-height: 1.05;
  color: #fff8ec;
}
.arch-parents {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: rgba(224,180,110,0.85);
}
.arch-amp {
  display: block;
  margin: 0.6rem 0 0.4rem;
  font-family: var(--font-heading);
  font-size: 2.2rem;
  line-height: 1;
  color: #d9a441;
}
.arch-tagline {
  max-width: 30ch;
  margin: 2rem auto 0;
  font-size: 1.25rem;
  line-height: 1.6;
  color: #fff4d6;
}
.arch-tagline:empty, .arch-place:empty { display: none; }
.arch-date {
  margin: 1.8rem 0 0;
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 6.5vw, 2rem);
  color: #fff8ec;
}
.arch-place {
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(255,244,214,0.92);
}
.arch-cta {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.95rem 1.6rem;
  border: 1px solid rgba(244,163,0,0.6);
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  text-decoration: none;
  color: #fff4d6;
  transition: background 0.25s ease, color 0.25s ease;
}
.arch-cta:hover { background: var(--color-accent); color: #3a050c; }

@media (max-width: 420px) {
  .hero { padding: 1.5rem 0.75rem 2.5rem; }
  .arch { padding: 3.75rem 1.1rem 2.5rem; border-radius: 200px 200px 10px 10px / 170px 170px 10px 10px; }
  .arch-flora { width: 64px; height: 160px; opacity: 0.4; left: 0; }
  .arch-flora-right { left: auto; right: 0; }
  .arch-pretitle { letter-spacing: 0.22em; font-size: 0.74rem; }
  .arch-tagline { font-size: 1.12rem; }
  .arch-cta { letter-spacing: 0.18em; padding: 0.9rem 1.2rem; }
}

/* ---- Ganesha mark ---- */
/* The source art is red line-work on solid white; `multiply` drops the white
   so it sits on the cream disc without a visible square. */
.ganesh-mark {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  background: #fffaf0;
  box-shadow:
    0 0 0 3px var(--color-accent),
    0 0 0 6px rgba(255,255,255,0.8),
    0 0 0 8px rgba(244,163,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin: 0 auto;
}
.ganesh-mark img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.ganesh-mark.small { width: 74px; height: 74px; margin-bottom: 1rem; }

/* When | Where under the countdown */
.hero-glance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 0.25rem 0 1.75rem;
  flex-wrap: wrap;
}
.glance-item { display: flex; flex-direction: column; align-items: center; }
.glance-label {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #ffd77a;
  margin-bottom: 0.25rem;
}
.glance-value {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #fff4d6;
}
.glance-sep {
  width: 1px;
  height: 34px;
  background: rgba(255,215,122,0.35);
}
.countdown-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}


/* ---- Generic section spacing ---- */
section {
  padding: 2.5rem 1.5rem 2.75rem;
  max-width: var(--max-width);
  margin: 0 auto;
}
/* A small gold rule-diamond-rule between sections, so the breaks read as
   deliberate rather than as empty red space. */
.site-content > section::before,
.site-footer::before {
  content: '';
  display: block;
  width: min(220px, 60%);
  height: 12px;
  margin: 0 auto 2.25rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 12' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='l'%3E%3Cstop offset='0' stop-color='%23f4a300' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23f4a300'/%3E%3C/linearGradient%3E%3ClinearGradient id='r'%3E%3Cstop offset='0' stop-color='%23f4a300'/%3E%3Cstop offset='1' stop-color='%23f4a300' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='0' y='5.5' width='96' height='1' fill='url(%23l)'/%3E%3Crect x='124' y='5.5' width='96' height='1' fill='url(%23r)'/%3E%3Cpath d='M110 0 L116 6 L110 12 L104 6Z' fill='%23f4a300'/%3E%3Ccircle cx='100' cy='6' r='1.3' fill='%23f4a300'/%3E%3Ccircle cx='120' cy='6' r='1.3' fill='%23f4a300'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ---- Countdown ---- */
/* No band of its own: sits on the page's red background with its diagonal
   lines, like the rest of the site. */
.countdown-section {
  text-align: center;
  max-width: none;
  width: 100%;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Scratch to reveal: a gold foil <canvas> over the countdown + When/Where,
   drawn and scratched in main.js (setupScratch). */
.scratch {
  position: relative;
  max-width: 560px;
  margin: 0 auto 1.75rem;
  padding: 1rem 0.75rem 0.25rem;
  border-radius: 18px;
}
.scratch .hero-glance { margin-bottom: 0.75rem; }
/* When | Where always side by side, even on narrow phones: two equal
   columns either side of the rule, a long venue wraps inside its column. */
.hero-glance { flex-wrap: nowrap; align-items: stretch; gap: 1rem; }
.hero-glance .glance-item { flex: 1 1 0; min-width: 0; justify-content: flex-start; text-align: center; }
.hero-glance .glance-sep { flex: 0 0 1px; height: auto; align-self: stretch; }
@media (max-width: 480px) {
  .hero-glance { gap: 0.6rem; }
  .hero-glance .glance-value { font-size: 0.95rem; line-height: 1.3; }
}
.scratch-foil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 18px;
  touch-action: none;
  cursor: grab;
  box-shadow: 0 14px 30px -14px rgba(40,0,6,0.7);
  transition: opacity 0.7s ease;
}
.scratch-foil:active { cursor: grabbing; }
.scratch-foil:focus-visible { outline: 2px solid #fff4d6; outline-offset: 3px; }
.scratch-foil.is-revealed { opacity: 0; pointer-events: none; }
.scratch .countdown-grid { margin: 0.5rem 0 1.5rem; flex-wrap: nowrap; }
@media (max-width: 480px) {
  .scratch { padding: 0.85rem 0.4rem 0.25rem; }
  .scratch .countdown-grid { gap: 0.45rem; }
  .scratch .countdown-cell { flex: 1 1 0; min-width: 0; padding: 0.75rem 0.2rem; }
  .scratch .countdown-label { letter-spacing: 0.06em; font-size: 0.66rem; }
}
.countdown-section .section-kicker { color: #ffd77a; }
.countdown-inner { max-width: 900px; margin: 0 auto; }
.countdown-grid {
  display: flex;
  justify-content: center;
  gap: clamp(0.6rem, 2.5vw, 1.5rem);
  margin: 1.5rem 0 2rem;
  flex-wrap: wrap;
}
.countdown-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 74px;
  padding: 0.85rem 0.65rem;
  border-radius: 12px;
  background: rgba(58,5,12,0.45);
  border: 1px solid rgba(244,163,0,0.65);
}
.countdown-num {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  color: #ffd77a;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.countdown-label {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff4d6;
  margin-top: 0.35rem;
}
.countdown-section .ghost-button {
  border-color: #ffd77a;
  color: #ffd77a;
}
.countdown-section .ghost-button:hover {
  background: #ffd77a;
  color: var(--color-deep);
}
.ghost-button {
  display: inline-block;
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  padding: 0.7rem 1.6rem;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease;
}
.ghost-button:hover { background: var(--color-accent); color: #fff; }
.ghost-button.small { padding: 0.5rem 1.2rem; font-size: 0.85rem; }

/* ---- Story ---- */
.story-section { text-align: center; }
.story-text { margin: 0 auto; max-width: 30rem; }
/* each line stays on one row: shrinks with the screen rather than wrapping */
.story-line { display: block; font-size: min(1.3rem, 5vw); line-height: 1.45; color: #fff4d6; white-space: nowrap; }
.story-line + .story-line { margin-top: 0.9rem; }
.story-q { font-style: italic; font-weight: 500; color: rgba(255,244,214,0.92); }
.story-a {
  display: inline-block;
  font-weight: 700;
  color: #ffd77a;
  text-shadow: 0 1px 2px rgba(40,0,6,0.5);
}


/* ---- Couple photo card ---- */
.photo-card {
  margin: 1rem auto 1.75rem;
  max-width: 340px;
}
.photo-frame {
  position: relative;
  padding: 12px;
  border-radius: 200px 200px 14px 14px;
  background: linear-gradient(150deg, #f7b733 0%, var(--color-accent) 45%, #b9700a 100%);
  box-shadow: 0 18px 40px -20px rgba(74,16,16,0.6);
}
/* inner hairline so the gold frame reads as two nested mouldings */
.photo-frame::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 196px 196px 10px 10px;
  border: 1px solid rgba(255,255,255,0.55);
  pointer-events: none;
}
.photo-frame img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 190px 190px 8px 8px;
  display: block;
}
/* Reads as a hashtag, so it takes the body face rather than the script one —
   the script face renders "#" poorly. */
.photo-caption {
  margin-top: 1rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.9rem, 7.5vw, 2.4rem);
  letter-spacing: 0.04em;
  color: #ffd77a;
  text-shadow: 0 1px 2px rgba(40,0,6,0.55), 0 0 14px rgba(244,163,0,0.35);
}

/* ---- Festivities: flip cards ---- */
.festivities-section { text-align: center; max-width: 960px; }
.festivities-hint {
  text-align: center;
  color: #fff4d6;
  font-style: italic;
  font-weight: 600;
  font-size: 1.05rem;
  margin: -0.5rem 0 2rem;
}
.festivity-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.5rem;
}
.festivity-card {
  perspective: 1400px;
  height: 320px;
}
.festivity-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1);
  transform-style: preserve-3d;
  cursor: pointer;
}
.festivity-card.is-flipped .festivity-card-inner {
  transform: rotateY(180deg);
}
.festivity-card-face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--color-accent);
  box-shadow: 0 14px 34px -18px rgba(74,16,16,0.5);
}
.festivity-card-front {
  background:
    radial-gradient(circle at 50% 0%, rgba(244,163,0,0.28), transparent 60%),
    linear-gradient(165deg, #ffd98a 0%, var(--color-surface) 45%, #fff3d2 100%);
  align-items: center;
  justify-content: center;
  text-align: center;
}
.festivity-icon {
  width: 46px;
  height: 46px;
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.festivity-card-front .festivity-title {
  font-family: var(--font-script);
  font-size: 2.1rem;
  color: var(--color-text);
  margin-bottom: 0.3rem;
}
.festivity-card-front .festivity-subtitle {
  font-style: italic;
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-bottom: 0.9rem;
}
.festivity-card-front .festivity-date {
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
  font-weight: 600;
}
.festivity-tap-hint {
  margin-top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-muted);
  opacity: 0.75;
}

.festivity-card-back {
  background:
    radial-gradient(circle at 80% 10%, rgba(244,163,0,0.22), transparent 55%),
    linear-gradient(165deg, #9c1119 0%, var(--color-deep) 60%, #5e0810 100%);
  color: #fff4d6;
  transform: rotateY(180deg);
  justify-content: center;
}
.festivity-card-back .festivity-back-title {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  margin-bottom: 0.75rem;
  color: #fddc86;
}
.festivity-back-row {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  opacity: 0.92;
}
.festivity-back-row strong {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.65;
  margin-bottom: 0.1rem;
}
/* Dress-code colour palette: plain swatches (names are in title/aria-label
   only). Each dot has an ivory ring so dark colours still read on the red. */
.festivity-palette {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 2px; /* room for the ring */
}
/* one row however many colours: each dot shrinks below 30px if needed */
.palette-dot {
  flex: 0 1 30px;
  min-width: 0;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(255,244,214,0.9), 0 3px 8px rgba(0,0,0,0.35);
}
.festivity-quote {
  margin-top: 0.75rem;
  font-style: italic;
  font-size: 0.92rem;
  opacity: 0.9;
  border-top: 1px solid rgba(253,240,216,0.25);
  padding-top: 0.75rem;
}

/* ---- RSVP ---- */
/* ---- How to reach: a printed itinerary ----
   One deep-maroon panel with a thin gold rule (same treatment as the
   invitation arch), numbered steps on a slim gold timeline, and an
   "arrive by" line at the foot. Deliberately quiet: ivory type, small
   gold line-weight icons, no badges or tilted stamps. */
.travel-section { text-align: center; max-width: 600px; }
.travel-actions { margin-top: 1.75rem; display: flex; justify-content: center; }
.itinerary {
  margin: 1.5rem auto 0;
  padding: 2rem 1.75rem 1.6rem;
  text-align: left;
  color: #fff4d6;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(244,163,0,0.10), transparent 60%),
    linear-gradient(180deg, #4d0812 0%, #3a050c 60%, #2c0308 100%);
  border: 1px solid rgba(244,163,0,0.6);
  border-radius: 14px;
  box-shadow: 0 0 0 6px rgba(58,5,12,0.45), 0 0 0 7px rgba(244,163,0,0.3), 0 26px 50px -28px rgba(20,0,4,0.85);
}
.itin { list-style: none; margin: 0; padding: 0; }
.itin-step { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 1.1rem; padding-bottom: 1.6rem; }
.itin-step:last-child { padding-bottom: 0.4rem; }
/* the timeline joining the markers */
.itin-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 21.5px;
  top: 46px;
  bottom: 4px;
  width: 1px;
  background: linear-gradient(rgba(244,163,0,0.7), rgba(244,163,0,0.25));
}
.itin-marker {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244,163,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #e9b84f;
}
.itin-icon, .itin-icon svg { display: block; width: 20px; height: 20px; }
.itin-body { display: flex; flex-direction: column; padding-top: 0.15rem; }
.itin-no {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: rgba(233,184,79,0.85);
  margin-bottom: 0.15rem;
  font-variant-numeric: lining-nums;
}
.itin-title { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; color: #fff8ec; line-height: 1.3; }
.itin-detail { font-size: 1rem; color: rgba(255,244,214,0.82); line-height: 1.45; margin-top: 0.1rem; }
.itin-option { display: flex; flex-direction: column; }
.itin-or {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.7rem 0;
  font-size: 0.72rem;
  font-style: italic;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(233,184,79,0.85);
}
.itin-or::after { content: ''; flex: 1; height: 1px; background: rgba(244,163,0,0.3); }
.itin-arrive {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244,163,0,0.4);
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.itin-arrive-label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(233,184,79,0.9); }
.itin-arrive-when { font-family: var(--font-heading); font-size: 1.35rem; color: #ffd77a; }
.itin-dot { color: rgba(233,184,79,0.6); padding: 0 0.15em; }

@media (max-width: 420px) {
  .itinerary { padding: 1.6rem 1.1rem 1.4rem; }
  .itin-step { grid-template-columns: 40px 1fr; gap: 0.85rem; }
  .itin-marker { width: 40px; height: 40px; }
  .itin-step:not(:last-child)::before { left: 19.5px; top: 42px; }
  .itin-title { font-size: 1.1rem; }
  .itin-detail { font-size: 0.95rem; }
  .itin-arrive-when { font-size: 1.15rem; }
}

.rsvp-section { max-width: 640px; }
.rsvp-inner { text-align: center; }
.rsvp-deadline { color: #fff4d6; font-weight: 600; font-size: 1.05rem; margin-bottom: 1.75rem; }
.rsvp-section .section-title { margin-bottom: 1.75rem; }
.rsvp-cta-card {
  background: linear-gradient(165deg, var(--color-surface), #fff6e1);
  border: 1px solid rgba(200,148,31,0.35);
  border-radius: 18px;
  padding: 2.5rem 2rem;
  box-shadow: 0 12px 30px -20px rgba(58,36,28,0.4);
}
.rsvp-cta-icon {
  width: 52px;
  height: 52px;
  color: var(--color-primary);
  margin: 0 auto 1.25rem;
}
.rsvp-cta-text {
  color: var(--color-text);
  font-size: 1.05rem;
  margin: 0 auto 1.5rem;
  max-width: 380px;
}
.rsvp-open-link {
  display: block;
  text-align: center;
  text-decoration: none;
  max-width: 320px;
  margin: 0 auto;
}
.rsvp-cta-note {
  margin: 0.9rem 0 0;
  font-size: 0.8rem;
  color: var(--color-muted);
}
.rsvp-call-fallback {
  margin-top: 1.25rem;
  color: rgba(255,244,214,0.82);
  font-size: 0.9rem;
}
.rsvp-call-fallback a {
  color: var(--color-accent);
  text-decoration: underline;
}

.submit-button {
  display: inline-block;
  width: 100%;
  padding: 0.95rem;
  border: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-family: var(--font-body);
  font-size: 1.05rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.15s ease;
}
.submit-button:hover { background: #8a2222; }
.submit-button:active { transform: scale(0.98); }

/* ---- Accommodations ---- */
.accommodation-list { display: grid; gap: 1.25rem; margin-top: 1.5rem; }
.accommodation-item {
  background: var(--color-surface);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  text-align: center;
}
.accommodation-item h4 { font-family: var(--font-heading); font-size: 1.1rem; margin-bottom: 0.35rem; }
.accommodation-item p { color: var(--color-muted); font-size: 0.95rem; margin: 0; }
.accommodation-item a { color: var(--color-primary); font-size: 0.9rem; }

/* ---- Registry ---- */
.registry-section { text-align: center; }
.registry-note { color: rgba(255,244,214,0.85); margin-bottom: 1.5rem; }
.registry-links { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.registry-links a {
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--color-accent);
}

/* ---- Footer ---- */
/* Sits on the page's own red-with-lines background like every section,
   opened by the same gold divider. */
.site-footer {
  text-align: center;
  padding: 2.5rem 1.5rem 3rem;
  color: #fff4d6;
  /* the warm gold glow the Om sat in on the earlier footer band */
  background: radial-gradient(ellipse 60% 220px at 50% 150px, rgba(244,163,0,0.25), transparent 70%);
}
.footer-om {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-accent);
  margin-bottom: 0.75rem;
}
.footer-blessing {
  max-width: 420px;
  margin: 0 auto 1.75rem;
  font-style: italic;
  color: rgba(255,244,214,0.92);
  font-size: 1rem;
}
.footer-names { font-family: var(--font-names); font-size: 2.2rem; color: #fff4d6; margin-bottom: 0.4rem; }
.footer-hashtag { color: var(--color-accent); letter-spacing: 0.05em; margin-bottom: 0.75rem; }
.footer-note { color: rgba(255,244,214,0.6); font-style: italic; font-size: 0.9rem; }

/* ============ Responsive ============ */

@media (max-width: 560px) {
  body { font-size: 17px; }
  section { padding: 2rem 1.25rem 2.25rem; }
  .site-nav { padding: 0.75rem 1rem; }
  .nav-links { gap: 0.9rem; }
}
/* four links + monogram on a phone: tighten so RSVP isn't pushed off-screen */
@media (max-width: 440px) {
  .site-nav { padding: 0.75rem 0.75rem; gap: 0.6rem; }
  .nav-monogram { font-size: 1.2rem; }
  .nav-links { gap: 0.6rem; }
  .nav-links a { font-size: 0.74rem; letter-spacing: 0.04em; }
  .festivity-card { height: 300px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Festivity cards with caricature art: the card takes the scene's own 9:16
   shape so the painting is never cropped, and the label sits in the blank
   band each painting leaves for text (top or bottom, light or dark). The
   image carries its own border-radius rather than relying on an ancestor's
   overflow clip inside the 3D flip. */
.festivity-cards.has-art {
  grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
  justify-content: center;
}
.festivities-section:has(.festivity-cards.has-art) { max-width: 1180px; }
.festivity-card.has-art { height: auto; aspect-ratio: 9 / 16; }
.festivity-card-front.has-art { padding: 0; background: #fff3d2; justify-content: flex-start; }
.festivity-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
}
.festivity-art-label {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 28%;
  padding: 0.9rem 0.9rem 1.1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.art-text-top .festivity-art-label { top: 0; }
.art-text-bottom .festivity-art-label { bottom: 0; }
.festivity-card-front.has-art .festivity-title { margin-bottom: 0.1rem; font-family: var(--font-monogram); font-size: 1.75rem; line-height: 1.15; }
.festivity-card-front.has-art .festivity-subtitle { margin-bottom: 0.35rem; font-size: 0.85rem; line-height: 1.3; }
/* the section's own "Tap a card to reveal the details" line covers this */
.festivity-card-front.has-art .festivity-tap-hint { display: none; }
.art-tone-dark .festivity-title { color: #fff4d6; }
.art-tone-dark .festivity-subtitle,
.art-tone-dark .festivity-tap-hint { color: rgba(255,244,214,0.85); }
.art-tone-dark .festivity-date { color: #ffd77a; }