@font-face {
  font-family: 'LovariaDemo';
  src: url('assets/LovariaDemo.otf') format('opentype');
  font-display: swap;
}

@font-face {
  font-family: 'Qttney-e9X8g';
  src: url('assets/Qttney-e9X8g.otf') format('opentype');
  font-display: swap;
}

/* ── reset ───────────────────────────────────────────────────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  background: #a8d8f0;
  /* clip (not hidden) — `hidden` creates a new scroll context that can break
     descendant position:sticky (Safari especially). `clip` visually trims
     without creating a scroll container. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Entry scene — clouds → names → Hawa Mahal → cream fade.
   Fixed overlay covering the viewport.  JS reads window.scrollY (driven
   by .entry-scroll-spacer below) and animates this scene as the user
   scrolls — single scroller for the whole page.  At zoom completion the
   scene fades out, revealing the invite-card behind it (ganeshji-sticky
   already at the viewport top — no blank intermediate frame). */
.entry-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;                   /* true visible viewport — fixes iOS chrome-bar bug */
  overflow: hidden;
  background: #a8d8f0;
  z-index: 10;
  /* Smooth opacity fade when JS hides the scene at zoom completion. */
  transition: opacity 0.22s linear;
  will-change: opacity;
}

/* Scene fades out once the zoom is complete so the invite-card behind it
   becomes the active layer (no blank frame, no scroll jump). */
.entry-wrap.is-hidden {
  opacity: 0 !important;
  pointer-events: none;
}

/* ── Scroll runway ─────────────────────────────────────────────────────
   Invisible scroll-distance = entry animation length + settle coast:
     160vh  rise + zoom (ZOOM_FRAC 1.6 in script.d5c0a3f7.js)
   +  25vh  quiet coast
   = 185vh
   The invite-card that follows is cross-faded in by JS during the tail of
   the zoom, so it is fully opaque well before the animation ends.  The
   trailing 25vh is a settle beat: the scene is hidden and nothing is
   animating, so ganeshji glides up to the viewport top rather than
   snapping there — one scroller, no handoff jump.
   INVARIANT: height === (ZOOM_FRAC × 100vh) + 25vh.  Keep the two in sync. */
.entry-scroll-spacer {
  width: 100%;
  height: 185vh;
  pointer-events: none;
  position: relative;
}

/* During the trailing 25vh coast the scene is hidden and this runway is what
   sits above the invite card on screen — bare, it showed as a strip of sky.
   This band paints it with the same yellow as .cream-content so the handoff
   reads as one continuous card.
   It is a pseudo-element rather than a background on the spacer itself for two
   reasons: the rest of the runway must stay transparent, and `cover` on a
   30vh-tall box resolves to the same width-driven scale .cream-content uses —
   the texture grain therefore matches exactly across the seam, which a
   `100% 30vh` background-size would have squashed.
   30vh is a little taller than the 25vh coast so no sliver of sky can appear
   from vh-vs-innerHeight rounding; the overshoot sits behind the opaque
   .entry-wrap and is never seen. */
.entry-scroll-spacer::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  background: #f5eac2 url('assets/yellow_background.webp') center / cover no-repeat;
}

/* Back layer: clouds + names move together (name “fixed” on cloud) */
.entry-sky {
  position: absolute;
  inset: 0;
  z-index: 1;
  will-change: transform;
}

.entry-clouds {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.entry-names {
  position: absolute;
  left: 50%;
  top: clamp(12vh, 18vh, 24vh);
  transform: translateX(-50%);
  width: min(92vw, 920px);
  text-align: center;
  font-family: 'LovariaDemo', cursive;
  /* 1.5× prior sizing (was clamp(1.8rem, 5.2vw, 4.2rem)) */
  font-size: clamp(2.7rem, 7.8vw, 6.3rem);
  line-height: 1.12;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.45),
    0 0 40px rgba(0, 0, 0, 0.22);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  z-index: 1;
  pointer-events: none;
}

/* Front: Hawa Mahal — full width; initial offset set in JS (~50% visible).
   transform-origin = zoom focal point (facade window); tweak % to aim elsewhere. */
.entry-mahal {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 100vw;
  max-width: none;
  height: auto;
  object-fit: contain;
  transform: translateX(-50%);
  transform-origin: 50% 58%;
  z-index: 3;
  will-change: transform;
}

/* Mobile: focal point a bit higher on the façade (smaller Y% = closer to top of image). */
@media (max-width: 768px) {
  .entry-names {
    top: clamp(15vh, 21vh, 27vh);
  }

  .entry-mahal {
    transform-origin: 50% 62%;
  }
}

/* Cream fade during zoom → invite (temple-like handoff) */
.entry-cream {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: url('assets/yellow_background.webp') center / cover no-repeat;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* Invite-card starts hidden; JS cross-fades it in during the tail of the
   zoom (temple-style handoff).  No pinning, no second scroll container —
   the card simply flows below .entry-scroll-spacer and is revealed as
   the fixed .entry-wrap fades out. */

/* ── clouds ──────────────────────────────────────────────────────────── */
.clouds {
  position: absolute;
  inset: 0;
  background: url('assets/Clouds.webp') center bottom / cover no-repeat;
  height: 120vh;
  z-index: 0;
  will-change: transform, filter, opacity;
}

/* ── hero wedding text ───────────────────────────────────────────────── */
.wedding-text {
  position: absolute;
  top: 30%;
  left: 0;
  /* Stay on one row for short names (centered with side breathing room),
     but wrap when the names don't fit — `white-space: normal` allows
     natural line-breaks at word boundaries only. */
  width: calc(100% - 8vw);
  margin: 0 4vw;
  font-family: 'LovariaDemo', cursive;
  font-size: clamp(2.4rem, 5.5vw, 5rem);
  color: #fff;
  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(0, 0, 0, 0.25);
  text-align: center;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  line-height: 1.15;
  letter-spacing: 0.01em;
  z-index: 1;
  will-change: transform, opacity;
}

/* ── temple ──────────────────────────────────────────────────────────── */
.temple-wrap {
  position: absolute;
  bottom: -40vh;
  left: 50%;
  height: 90vh;
  transform: translateX(-50%);
  will-change: transform;
  z-index: 2;
}

.temple-wrap img {
  display: block;
  height: 100%;
  transform-origin: 50% 62%;
  will-change: transform;
}

/* ── vignette ────────────────────────────────────────────────────────── */
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
      transparent 55%,
      rgba(0, 0, 0, 0.28) 100%);
  z-index: 4;
}

/* ── cream overlay ───────────────────────────────────────────────────── */
.cream-overlay {
  position: absolute;
  inset: 0;
  background: url('assets/yellow_background.webp') center / cover no-repeat;
  opacity: 0;
  will-change: opacity;
  z-index: 5;
}

/* ── ganeshji — top of card, scrolls with content ───────────────────── */
.ganeshji-sticky {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 1.5vh 0 0.8vh;
  flex-shrink: 0;
  z-index: 2;
}

.ganeshji {
  height: 13vh;
  object-fit: contain;
  opacity: 1;
  filter: drop-shadow(0 8px 24px rgba(120, 80, 0, 0.18));
}

/* ── invitation card ───────────────────────────────────────────────────
   Flows in normal document order after .entry-scroll-spacer.  JS starts
   it at opacity 0 and cross-fades to 1 during the tail of the zoom, so
   the transition from Hawa Mahal → invite has no blank frame.  Once the
   user has scrolled past the spacer, the entry scene is hidden and this
   card (with ganeshji-sticky at the top) is what's on screen. */
.invite-card {
  position: relative;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  color: #5a0a0a;
  font-family: 'Georgia', 'Times New Roman', serif;
  background: transparent;
  overflow-x: hidden;
  /* clip full-bleed children — kills horizontal scroll */
  z-index: 6;
  opacity: 0;
  will-change: opacity;
}

/* ── cream content wrapper (everything above maroon) ──────────────── */
.cream-content {
  width: 100%;
  padding: 2vh 5vw 6vh;
  /* 6vh bottom = breathing room before maroon */
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: url('assets/yellow_background.webp') center / cover no-repeat;
  flex-shrink: 0;
  /* Ensures cream section is never shorter than the viewport —
     prevents mobile scroll from jumping straight to maroon. */
  min-height: 100dvh;
}

.invite-blessing {
  font-family: 'Qttney-e9X8g', serif;
  font-style: italic;
  font-size: clamp(0.72rem, 1.3vw, 0.95rem);
  letter-spacing: 0.14em;
  color: #8b1a1a;
}

.invite-couple-line {
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  letter-spacing: 0.04em;
  color: #6b1010;
  margin-top: 0.5vh;
}

.invite-divider {
  width: 64px;
  height: 1px;
  margin: 0.9vh auto;
  background: linear-gradient(90deg,
      transparent,
      #8b1a1a 30%,
      #8b1a1a 70%,
      transparent);
}

.invite-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2.6rem, 5.8vw, 4.8rem);
  letter-spacing: 0.18em;
  color: #5a0a0a;
  margin: 1vh 0 0.8vh;
  padding-left: 0.18em;
  font-weight: normal;
}

.invite-join {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(0.88rem, 1.4vw, 1.05rem);
  letter-spacing: 0.05em;
  color: #7a1515;
  margin-bottom: 0.8vh;
  font-style: italic;
}

.invite-person {
  font-family: 'Qttney-e9X8g', cursive;
  font-size: clamp(2.8rem, 6.5vw, 5.2rem);
  line-height: 1.1;
  color: #5a0a0a;
  margin: 0.1vh 0;
}

.invite-amp {
  font-family: 'Qttney-e9X8g', cursive;
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  color: #8b1a1a;
  margin: 0.1vh 0;
}

.invite-parents2 {
  margin-top: 1.2vh;
}

/* ── Reveal the Date section ─────────────────────────────────────────── */
.reveal-date-section {
  margin-top: 9vh;
  margin-bottom: 6vh;
  /* ← cream breathing room before maroon starts */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2vh;
  pointer-events: auto;
}

/* ── Reveal the Date — clickable header ─────────────────────────────── */
.reveal-date-header {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.18s;
  -webkit-tap-highlight-color: transparent;
}

.reveal-date-header:hover {
  opacity: 0.75;
}

.reveal-date-header:active {
  opacity: 0.55;
}


/* label font — matches Invite style, slightly smaller */
.reveal-label {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  letter-spacing: 0.18em;
  color: #5a0a0a;
  font-weight: normal;
  line-height: 1;
  padding-left: 0.18em;
  /* same offset as .invite-title */
  white-space: nowrap;
}

/* ── Tap hint — always visible static text ───────────────────────────── */
.tap-hint {
  font-family: 'Qttney-e9X8g', serif;
  font-style: italic;
  font-size: clamp(0.68rem, 1.5vw, 0.84rem);
  color: #8b1a1a;
  letter-spacing: 0.22em;
  margin: 0;
  padding: 0;
}

/* ── Date circles row ────────────────────────────────────────────────── */
.date-circles {
  display: flex;
  gap: clamp(12px, 3vw, 26px);
  align-items: center;
  justify-content: center;
}

.date-circle-wrap {
  position: relative;
  width: clamp(70px, 14.85vw, 100px);
  height: clamp(70px, 14.85vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ⑤ circles always visible */
.date-circle-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.date-circle-img-default {
  opacity: 1;
  z-index: 1;
}

.date-circle-img-bg {
  opacity: 0;
  z-index: 1;
}

/* date text: hidden until toggle ON */
.date-circle-text {
  position: relative;
  z-index: 2;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.9rem, 2.6vw, 1.3rem);
  font-weight: bold;
  color: #f9f4e2;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
}

/* ── Spin-in: rotate default circle, then fade in BG + date text ─────── */
.date-circle-wrap.spin-in .date-circle-img-bg {
  animation: bgFadeIn 0.24s ease 0.46s both;
}

.date-circle-wrap.spin-in .date-circle-img-default {
  animation: circleSpinIn 0.6s cubic-bezier(0.34, 1.2, 0.64, 1) both, defaultFadeOut 0.2s ease 0.46s both;
}

.date-circle-wrap.spin-in .date-circle-text {
  animation: textFadeIn 0.28s ease 0.5s both;
}

@keyframes circleSpinIn {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes textFadeIn {
  from {
    opacity: 0;
    transform: scale(0.85);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Spin-out: rotate back & text fades out ─────────────────────────── */
.date-circle-wrap.spin-out .date-circle-img-bg {
  animation: bgFadeOut 0.2s ease both;
}

.date-circle-wrap.spin-out .date-circle-img-default {
  animation: defaultFadeIn 0.16s ease 0.12s both, circleSpinOut 0.5s cubic-bezier(0.55, 0, 0.45, 1) 0.12s both;
}

.date-circle-wrap.spin-out .date-circle-text {
  animation: textFadeOut 0.18s ease both;
}

@keyframes circleSpinOut {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-360deg);
  }
}

@keyframes textFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(0.85);
  }
}

@keyframes bgFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bgFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes defaultFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes defaultFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── scroll hint ─────────────────────────────────────────────────────── */
.scroll-hint {
  position: absolute;
  bottom: 3.5vh;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.92);
  font-family: system-ui, sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
  z-index: 3;
  opacity: 0;
  animation: hintIn 1.2s cubic-bezier(0.22, 1, 0.36, 1) 1.6s forwards;
  transition: opacity 0.5s ease;
  text-align: center;
  pointer-events: none;
}

@keyframes hintIn {
  to {
    opacity: 1;
  }
}

.scroll-hint .line {
  display: block;
  width: 1px;
  height: 28px;
  margin: 10px auto 0;
  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.85) 100%);
  animation: lineDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
  transform-origin: top;
}

@keyframes lineDrop {
  0% {
    transform: scaleY(0);
    opacity: 0;
  }

  40% {
    transform: scaleY(1);
    opacity: 1;
  }

  100% {
    transform: scaleY(1);
    opacity: 0;
    transform-origin: bottom;
  }
}

.scroll-hint.hidden {
  opacity: 0 !important;
}

/* ── reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .scene,
  .scroll-hint {
    animation: none;
    opacity: 1;
  }

  .scroll-hint .line {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Functions section
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Full-bleed maroon wrapper ──────────────────────────────────────── */
.functions-section {
  /* bleed past the card's 5vw horizontal padding */
  width: calc(100% + 10vw);
  margin-left: -5vw;
  background: url('assets/green_background.webp') center / cover no-repeat;
  padding-bottom: 0;
  /* push down so glasses can straddle the junction above */
  padding-top: 0;
  flex-shrink: 0;
  position: relative;
}

/* ── Glasses image at cream / maroon junction ───────────────────────── */
.functions-glasses {
  display: flex;
  justify-content: center;
  margin-top: 0.5vh;
  margin-bottom: 0;
}

.glasses-img {
  /* ── SIZE: change this one line to resize the glasses ────────────────
   *  The negative margin-top above is set to exactly half this value.
   *  If you change the width here, update margin-top to match.
   * ------------------------------------------------------------------ */
  width: clamp(240px, 40vw, 430px);
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.25));
}

/* ── Tile grid ──────────────────────────────────────────────────────── */
.functions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

@media (max-width: 640px) {
  .functions-grid {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    gap: 0;
  }

  .function-tile {
    width: 100%;
    aspect-ratio: 1 / 1.02;
  }

  /* ── Mobile: inner tile content — extra side inset vs star frame ───── */
  .fn-content {
    padding: 13% 11% 10%;
    gap: clamp(5px, 1.1vw, 10px);
    transform: translateY(5%);
  }

  /* ── Mobile: title scales with viewport; keep letter-spacing tight ─── */
  .fn-name {
    font-size: clamp(1.1rem, min(7vw, 7.8vmin), 2rem);
    letter-spacing: clamp(0.01em, 0.35vw, 0.04em);
    line-height: 1.15;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
    text-wrap: balance;
    padding-inline: 2%;
  }

  /* LINE 551 — date / venue / time font size for mobile */
  .fn-date,
  .fn-venue,
  .fn-time {
    font-size: clamp(0.86rem, 3.8vw, 1.06rem);
    /* was clamp(0.62rem, 1.6vw, 0.84rem) */
  }

  /* LINE 558 — map link font size for mobile */
  .fn-map {
    font-size: clamp(0.8rem, 3.5vw, 0.98rem);
    /* was clamp(0.6rem, 1.5vw, 0.8rem) */
  }

  .fn-dress,
  .fn-notes {
    font-size: clamp(0.72rem, 3.1vw, 0.9rem);
  }
}

/* ── Individual tile ────────────────────────────────────────────────── */
.function-tile {
  /* tile image fills exactly — use 100% 100% to stretch to fit cell */
  background: url('assets/FunctionTile.webp') center / 100% 100% no-repeat;
  aspect-ratio: 1 / 1.2;
  display: flex;
  align-items: center;
  justify-content: center;
  /* lets font-size use cqi against the actual tile width (desktop + mobile) */
  container-type: inline-size;
  container-name: fn-tile;
}

.fn-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* Wider horizontal inset — star arms cut in; long titles need more margin */
  padding: 14% 12% 17%;
  gap: clamp(3px, 0.7vw, 7px);
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Function name — matches Invite style; stays inside star “safe” oval */
.fn-name {
  font-family: 'Qttney-e9X8g', serif;
  /* Scale with tile width so 3-up desktop and 1-col mobile both behave */
  font-size: clamp(0.9rem, 4.8cqi + 0.4rem, 1.72rem);
  letter-spacing: clamp(0.01em, 0.12cqi, 0.05em);
  color: #2a5c42;
  font-weight: normal;
  margin: 0;
  line-height: 1.14;
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
  max-width: 100%;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  padding-inline: 1%;
}

/* Browsers without container query font units: fall back to vw-based cap */
@supports not (font-size: 1cqi) {
  .fn-name {
    font-size: clamp(0.58rem, min(2.1vw, 2.8vmin), 1.28rem);
    letter-spacing: clamp(0.01em, 0.08vw, 0.05em);
  }
}

/* Date / venue / time */
.fn-date,
.fn-venue,
.fn-time {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.78rem, 2vw, 1.02rem);
  color: #3a5040;
  margin: 0;
  line-height: 1.32;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
}

/* Dress code */
.fn-dress {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.72rem, 1.7vw, 0.92rem);
  color: #3a5040;
  font-style: italic;
  margin: 0;
  line-height: 1.3;
}

/* Notes */
.fn-notes {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.7rem, 1.6vw, 0.88rem);
  color: #4a5a4a;
  margin: 0;
  line-height: 1.3;
  opacity: 0.85;
}

/* Map link */
.fn-map {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.74rem, 1.8vw, 0.95rem);
  color: #2a5c42;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: clamp(1px, 0.4vw, 3px);
  display: inline-block;
}

/* Desktop-only balancing for function tile content */
@media (min-width: 641px) {
  .fn-content {
    padding: 16% 11% 14%;
    transform: translateY(6%);
  }

  .fn-name {
    font-size: clamp(1rem, 4.8cqi + 0.42rem, 1.9rem);
  }

  .fn-date,
  .fn-venue,
  .fn-time {
    font-size: clamp(0.88rem, 2.2vw, 1.14rem);
  }

  .fn-map {
    font-size: clamp(0.84rem, 2vw, 1.06rem);
  }

  .fn-dress,
  .fn-notes {
    font-size: clamp(0.8rem, 1.9vw, 1rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Meet the Bride & Groom — cream section after maroon
   ═══════════════════════════════════════════════════════════════════════ */

.meet-couple-section {
  width: calc(100% + 10vw);
  /* bleed past card's 5vw padding (mirrors functions-section) */
  margin-left: -5vw;
  background: url('assets/red_background.webp') center / cover no-repeat;
  padding: 6vh 5vw 30vh;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.meet-couple-inner {
  max-width: 680px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 3vh;
}

/* ── Title ──────────────────────────────────────────────────────────── */
.meet-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2.2rem, 6vw, 4rem);
  letter-spacing: 0.18em;
  color: #5a0a0a;
  font-weight: normal;
  line-height: 1.2;
  padding-left: 0.18em;
}

/* ── Thin maroon rule ───────────────────────────────────────────────── */
.meet-divider {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8b1a1a 30%, #8b1a1a 70%, transparent);
  flex-shrink: 0;
}

/* ── Story paragraph ────────────────────────────────────────────────── */
.meet-story {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.88rem, 1.8vw, 1.05rem);
  color: #5a1010;
  line-height: 1.85;
  letter-spacing: 0.02em;
  max-width: 600px;
  font-style: italic;
}

.meet-bottom-design {
  width: calc(100% + 10vw);
  margin-left: -5vw;
  margin-top: 4vh;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translateY(17%);
  line-height: 0;
  z-index: 4;
}

.meet-bottom-design-img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 641px) {
  .meet-bottom-design-img {
    width: 30%;
    margin: 0 auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Couple Carousel
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Carousel outer row (arrows + viewport) ─────────────────────────── */
.carousel-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.couple-carousel {
  flex: 1;
  /* takes all space between the two buttons */
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(90, 10, 10, 0.18);
  user-select: none;
  touch-action: pan-y;
  /* height is controlled by the slides */
}

/* Manual profile — arrows, dots, swipe.  Snappy, so a tap mid-drift responds
   immediately instead of crawling.  Duration MUST match MANUAL_MS in
   script.d5c0a3f7.js. */
.carousel-track {
  display: flex;
  transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
}

/* Drift profile — the auto-advance.  The near-linear head of this curve is
   what reads as a continuous marquee pan; the tail eases the photo to rest on
   the slide boundary.  Duration MUST match DRIFT_MS in script.d5c0a3f7.js. */
.carousel-track.is-drifting {
  transition-duration: 2600ms;
  transition-timing-function: cubic-bezier(0.33, 0, 0.15, 1);
}

/* Guests who ask for reduced motion get the short profile only; the JS also
   stops auto-advancing entirely, so the reel moves solely on their input. */
@media (prefers-reduced-motion: reduce) {
  .carousel-track.is-drifting {
    transition-duration: 0.45s;
    transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
  }
}

/* Desktop: 3 slides visible — each slide = 1/3 of .couple-carousel width */
.carousel-slide {
  min-width: calc(100% / 3);
  width: calc(100% / 3);
  height: 340px;
  overflow: hidden;
  flex-shrink: 0;
  padding: 0 6px;
  /* gap between images on desktop */
  box-sizing: border-box;
}

/* NOTE: no :first-child / :last-child padding overrides — the reel is cloned
   at both ends for the infinite loop, so those edges land mid-reel and would
   show as a missing gap.  Every slide keeps the same symmetric padding. */

.carousel-slide img {
  border-radius: 10px;
  /* rounds individual photos */
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
  -webkit-user-drag: none;
}

/* ── Prev / Next arrows — outside the image (flex siblings) ─────────── */
.carousel-btn {
  flex-shrink: 0;
  background: rgba(255, 248, 235, 0.85);
  border: 1px solid rgba(90, 10, 10, 0.18);
  color: #5a0a0a;
  font-size: 1.8rem;
  line-height: 1;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 10px rgba(90, 10, 10, 0.14);
  transition: background 0.18s, transform 0.15s;
  padding: 0;
}

.carousel-btn:hover {
  background: rgba(255, 248, 235, 1);
  transform: scale(1.08);
}

.carousel-btn:active {
  transform: scale(0.95);
}

/* ── Dot indicators — sit below the wrapper row ──────────────────────── */
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}

.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 248, 235, 0.55);
  border: 1px solid rgba(90, 10, 10, 0.35);
  cursor: pointer;
  transition: background 0.22s, transform 0.22s;
}

.carousel-dot.active {
  background: #fff8eb;
  transform: scale(1.35);
}

/* ── Mobile tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .meet-title {
    font-size: clamp(2rem, 10vw, 3rem);
  }

  .meet-story {
    font-size: clamp(0.88rem, 3.8vw, 1rem);
  }

  /* Mobile: left/right breathing room for all content */
  .meet-couple-inner {
    padding: 0 5vw;
    /* LINE 783: left/right padding on mobile */
  }

  /* Mobile: 1 slide visible, no side padding needed */
  .carousel-slide {
    min-width: 100%;
    width: 100%;
    height: 380px;
    padding: 0;
    /* override desktop gap padding */
  }

  .carousel-slide img {
    border-radius: 12px;
  }

  .couple-carousel {
    border-radius: 12px;
  }

  .carousel-btn {
    width: 32px;
    height: 32px;
    font-size: 1.5rem;
  }

  .carousel-wrapper {
    gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Instagram Section
   ═══════════════════════════════════════════════════════════════════════ */

.insta-section {
  width: calc(100% + 10vw);
  /* same full-bleed as meet-couple */
  margin-left: -5vw;
  background: url('assets/yellow_background.webp') center / cover no-repeat;
  padding: 8vh 5vw 14vh;
  flex-shrink: 0;
}

.insta-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4vh;
}

/* ── Title ──────────────────────────────────────────────────────────── */
.insta-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  letter-spacing: 0.16em;
  color: #5a0a0a;
  font-weight: normal;
  line-height: 1.2;
  padding-left: 0.16em;
}

/* ── Caption paragraph ──────────────────────────────────────────────── */
.insta-caption {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.86rem, 1.7vw, 1rem);
  color: #5a1010;
  line-height: 1.85;
  letter-spacing: 0.02em;
  max-width: 520px;
  font-style: italic;
  white-space: pre-line;
  /* preserves the \n line break in the fallback text */
}

/* ── Instagram icon link ─────────────────────────────────────────────── */
.insta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, filter 0.2s;
}

.insta-link:hover {
  transform: scale(1.1);
  filter: drop-shadow(0 4px 16px rgba(131, 58, 180, 0.45));
}

.insta-icon {
  width: clamp(48px, 12vw, 72px);
  height: clamp(48px, 12vw, 72px);
  object-fit: contain;
  display: block;
}

/* ── Hashtag capsule ─────────────────────────────────────────────────── */
.insta-hashtag-wrap {
  display: inline-flex;
}

.insta-hashtag {
  display: inline-block;
  background: #5a0a0a;
  color: #f9f4e2;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.9rem, 2.2vw, 1.1rem);
  letter-spacing: 0.08em;
  padding: 0.55em 1.6em;
  border-radius: 999px;
  /* full capsule shape */
  cursor: default;
  user-select: all;
  /* lets guests copy the hashtag easily */
}

/* ── Desktop tweak — prevent elephant overlap ────────────────────────── */
@media (min-width: 641px) {
  .insta-section {
    padding-bottom: 22vh;
  }
}

/* ── Mobile tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .insta-section {
    /* extra breathing room before next section on small screens */
    padding-bottom: 16vh;
  }

  .insta-inner {
    padding: 0 5vw;
    /* same left/right breathing room as .meet-couple-inner */
  }

  .insta-title {
    font-size: clamp(1.8rem, 9vw, 2.8rem);
  }

  .insta-caption {
    font-size: clamp(0.86rem, 3.6vw, 1rem);
    padding: 0;
    /* outer .insta-inner padding handles the sides */
  }

  .insta-hashtag {
    font-size: clamp(0.88rem, 4vw, 1rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Pre-wedding Video Section
   ═══════════════════════════════════════════════════════════════════════ */

.video-section {
  width: calc(100% + 10vw);
  margin-left: -5vw;
  background: url('assets/yellow_background.webp') center / cover no-repeat;
  /* Desktop padding - change the last number (14vh) to add/reduce space ABOVE the elephant */
  padding: 5vh 5vw 40vh;
  flex-shrink: 0;
}

.video-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4vh;
}

/* ── Title block ─────────────────────────────────────────────────────── */
.video-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2.2rem, 5.8vw, 3.8rem);
  letter-spacing: 0.18em;
  color: #5a0a0a;
  font-weight: normal;
  line-height: 1.15;
  padding-left: 0.18em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}

.video-subtitle {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  letter-spacing: 0.22em;
  color: #8b1a1a;
  font-style: italic;
  font-weight: normal;
  text-transform: none;
}

/* ── Caption ─────────────────────────────────────────────────────────── */
.video-caption {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.86rem, 1.7vw, 1rem);
  color: #5a1010;
  line-height: 1.9;
  letter-spacing: 0.02em;
  font-style: italic;
  max-width: 560px;
}

/* ── Iframe embed (replaces thumbnail card in Handlebars mode) ──────── */
.video-embed-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 44px rgba(90, 10, 10, 0.22);
}

.video-embed-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ── Thumbnail play card ───────────────────────────────────────────── */
.video-thumb-card {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 12px 44px rgba(90, 10, 10, 0.22);
  text-decoration: none;
  cursor: pointer;
}

.video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease, filter 0.35s ease;
}

.video-thumb-card:hover .video-thumb-img {
  transform: scale(1.04);
  filter: brightness(0.75);
}

/* YouTube-style play button */
.video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(54px, 14vw, 80px);
  pointer-events: none;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0.9;
}

.video-thumb-card:hover .video-play-btn {
  transform: translate(-50%, -50%) scale(1.12);
  opacity: 1;
}

/* "Watch on YouTube" label appears on hover */
.video-watch-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 16px;
  background: linear-gradient(to top, rgba(90, 10, 10, 0.72) 0%, transparent 100%);
  color: #fff8eb;
  font-family: 'Georgia', serif;
  font-size: clamp(0.72rem, 1.8vw, 0.88rem);
  letter-spacing: 0.12em;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.video-thumb-card:hover .video-watch-label {
  opacity: 1;
}

/* ── Mobile tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .video-inner {
    padding: 0 5vw;
  }

  .video-title {
    font-size: clamp(1.9rem, 9.5vw, 2.8rem);
  }

  .video-subtitle {
    font-size: clamp(0.78rem, 3.2vw, 0.9rem);
  }

  .video-caption {
    font-size: clamp(0.84rem, 3.6vw, 1rem);
  }

  .video-thumb-card {
    border-radius: 10px;
  }

  /* Show the watch label on mobile (no hover) */
  .video-watch-label {
    opacity: 1;
  }

  /* Mobile: Space ABOVE elephant (reduces the 14vh desktop padding) */
  .video-section {
    padding-bottom: 28vh;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Elephant Divider
   ═══════════════════════════════════════════════════════════════════════ */

.elephant-divider {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 5;
  /* This forces the container to take ZERO space, so the Cream and Maroon backgrounds touch seamlessly */
  height: 0;
  min-height: 0;
  overflow: visible;
}

.elephant-img {
  width: clamp(300px, 30vw, 4500px);
  height: auto;
  object-fit: contain;
  /* Start off to the right, keep same size through animation */
  transform: translateX(60vw) translateY(-20%);
  opacity: 0;
  transition: transform 2.2s cubic-bezier(0.34, 1.1, 0.64, 1), opacity 0.62s ease;
  will-change: transform, opacity;
}

.elephant-img.elephant-visible {
  transform: translateX(0) translateY(-20%);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════
   Countdown Section
   ═══════════════════════════════════════════════════════════════════════ */

.countdown-section {
  width: calc(100% + 10vw);
  margin-left: -5vw;
  background: url('assets/red_background.webp') center / cover no-repeat;
  /* Desktop padding - change the first number (12vh) to add/reduce space BELOW the elephant */
  padding: 18vh 5vw 12vh;
  margin-top: -2px;
  /* Prevent rounding gaps */
  flex-shrink: 0;
  text-align: center;
}

.countdown-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.countdown-sub {
  font-family: 'Qttney-e9X8g', serif;
  /* Matching sub/title font styles from other sections contextually */
  font-size: clamp(1rem, 2.5vw, 1.3rem);
  letter-spacing: 0.2em;
  color: #8b1a1a;
  text-transform: uppercase;
}

.countdown-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2rem, 6vw, 3.8rem);
  letter-spacing: 0.12em;
  color: #5a0a0a;
  font-weight: normal;
  line-height: 1.2;
}

.countdown-date {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(1.2rem, 3.5vw, 1.8rem);
  letter-spacing: 0.08em;
  color: #5a1010;
  margin-top: 1.5vh;
  margin-bottom: 4vh;
}

.countdown-timer {
  display: flex;
  gap: clamp(10px, 3vw, 20px);
  justify-content: center;
}

.countdown-box {
  background: #f9f4e2;
  color: #5a0a0a;
  border-radius: 12px;
  width: clamp(65px, 18vw, 90px);
  padding: 15px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

.countdown-val {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(1.8rem, 6vw, 2.7rem);
  line-height: 1;
}

.countdown-lbl {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.7rem, 2.2vw, 0.95rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 8px;
  opacity: 0.8;
}

/* ── Mobile tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .countdown-inner {
    padding: 0 5vw;
  }

  .countdown-box {
    padding: 10px 2px;
    border-radius: 10px;
    width: clamp(60px, 20vw, 80px);
  }

  .countdown-lbl {
    margin-top: 4px;
  }

  /* Mobile: Space BELOW elephant (reduces the 12vh desktop padding) */
  .countdown-section {
    padding-top: 8vh;
  }

  /* Mobile: Elephant size and positioning */
  .elephant-img {
    width: 280px;
    transform: translateX(60vw) translateY(-25%);
  }

  .elephant-img.elephant-visible {
    transform: translateX(0) translateY(-25%);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Things to Know Section
   ═══════════════════════════════════════════════════════════════════════ */

.things-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8vh;
  /* Spacing between countdown and things to know */
}

.things-divider {
  margin-bottom: 3vh;
  opacity: 0.6;
}

.things-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2rem, 6vw, 3.8rem);
  letter-spacing: 0.05em;
  color: #5a0a0a;
  font-weight: normal;
  line-height: 1.2;
  margin-bottom: 4vh;
  text-align: center;
}

.things-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.thing-card {
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Frosted glass effect */
  border-radius: 16px;
  padding: 18px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
  text-align: left;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.thing-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #5a0a0a;
  background: rgba(255, 255, 255, 0.05);
}

.thing-icon svg {
  width: 22px;
  height: 22px;
}

.thing-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.thing-sub {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.7rem, 2vw, 0.85rem);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(90, 10, 10, 0.8);
  /* Slightly muted off-white */
}

.thing-val {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(1.2rem, 3.5vw, 1.6rem);
  color: #5a0a0a;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.thing-italic {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  letter-spacing: 0.03em;
}

.thing-desc {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.8rem, 2.2vw, 0.95rem);
  color: rgba(90, 10, 10, 0.85);
}

/* Clickable regions inside a thing-card (venue → map, contact → tel:) */
.thing-link,
.thing-link:visited {
  color: inherit;
  text-decoration: none;
  display: block;
  cursor: pointer;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.thing-link:hover,
.thing-link:focus-visible {
  color: #5a0a0a;
  opacity: 0.85;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.thing-desc.thing-link {
  display: inline-block;
}

/* ── Mobile tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .things-inner {
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .thing-card {
    padding: 16px 20px;
    gap: 15px;
  }

  .thing-icon {
    width: 44px;
    height: 44px;
  }

  .thing-icon svg {
    width: 18px;
    height: 18px;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Music Button — fixed bottom-right, always on top
   ═══════════════════════════════════════════════════════════════════════ */

.music-btn {
  position: fixed;
  bottom: 22px;
  right: 20px;
  z-index: 9999;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: rgba(249, 244, 226, 0.92);
  border: 1.5px solid rgba(90, 10, 10, 0.28);
  color: #5a0a0a;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  -webkit-tap-highlight-color: transparent;
  padding: 0;
}

.music-btn:hover {
  transform: scale(1.1);
  background: #fff8eb;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
}

.music-btn:active {
  transform: scale(0.93);
}

.music-btn svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

/* Gentle breathing pulse ring when music is playing */
.music-btn.is-playing::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(90, 10, 10, 0.28);
  animation: musicRing 2.4s ease-out infinite;
  pointer-events: none;
}

@keyframes musicRing {
  0%   { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* Playing muted until first tap — optional visual hint (title also set in JS) */
.music-btn.music-awaiting-unmute {
  animation: musicUnmuteHint 1.8s ease-in-out infinite;
}

@keyframes musicUnmuteHint {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22), 0 0 0 0 rgba(90, 10, 10, 0.35);
  }
  50% {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22), 0 0 0 12px rgba(90, 10, 10, 0);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   RSVP Section
   ═══════════════════════════════════════════════════════════════════════ */

.rsvp-section {
  width: calc(100% + 10vw);
  margin-left: -5vw;
  background: url('assets/ending_background.webp') center / cover no-repeat;
  padding: 12vh 5vw 4vh;
  margin-top: -2px;
  /* Prevent rounding gaps exactly like the maroon section */
  flex-shrink: 0;
  text-align: center;
}

.rsvp-inner {
  max-width: 620px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.rsvp-sub {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(0.82rem, 1.8vw, 1rem);
  letter-spacing: 0.22em;
  color: #f2d8a0;
  font-style: italic;
  font-weight: normal;
  text-transform: none;
  margin-bottom: 2vh;
}

.rsvp-title {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(2.2rem, 5.8vw, 3.8rem);
  letter-spacing: 0.12em;
  color: #fff3d6;
  font-weight: normal;
  line-height: 1.15;
  margin-bottom: 2vh;
}

.rsvp-text {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  color: #ffe8c2;
  line-height: 1.5;
  opacity: 1;
  margin-bottom: 6vh;
}

.rsvp-action-area {
  width: 100%;
  max-width: 400px;
}

.rsvp-buttons {
  display: flex;
  gap: 16px;
  width: 100%;
}

.rsvp-btn {
  flex: 1;
  padding: 14px 20px;
  border-radius: 30px;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.9rem, 2vw, 1rem);
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #f7ead0;
  background: #f7ead0;
  color: #5a0a0a;
}

.rsvp-btn.rsvp-no {
  background: transparent;
  color: #f7ead0;
  border-color: rgba(247, 234, 208, 0.8);
}

.rsvp-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 0, 0, 0.28);
}

.rsvp-btn.rsvp-no:hover {
  background: rgba(247, 234, 208, 0.12);
}

/* ── RSVP Form ───────────────────────────────────────────────────────── */
.rsvp-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
  animation: rsvpFadeIn 0.5s ease;
}

@keyframes rsvpFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.rsvp-input {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid rgba(247, 234, 208, 0.45);
  border-radius: 8px;
  background: rgba(255, 248, 235, 0.92);
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  color: #5a0a0a;
  transition: all 0.2s ease;
  box-sizing: border-box;
}

.rsvp-input::placeholder {
  color: rgba(90, 10, 10, 0.55);
}

.rsvp-input:focus {
  outline: none;
  border-color: #f7ead0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(247, 234, 208, 0.2);
}

.rsvp-row {
  display: flex;
  gap: 14px;
}

.rsvp-textarea {
  min-height: 100px;
  resize: vertical;
  font-family: 'Inter', sans-serif;
}

.rsvp-submit {
  padding: 16px;
  border-radius: 8px;
  background: #f7ead0;
  color: #5a0a0a;
  border: 1px solid #f7ead0;
  font-family: 'Qttney-e9X8g', serif;
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  margin-top: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.rsvp-submit:hover {
  background: #fff2d8;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(40, 0, 0, 0.28);
}

.rsvp-thank-you {
  font-family: 'Qttney-e9X8g', serif;
  font-size: clamp(1.4rem, 4vw, 2rem);
  color: #5a0a0a;
  line-height: 1.4;
  animation: rsvpFadeIn 0.5s ease;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 12px;
  border: 1px dashed rgba(90, 10, 10, 0.2);
}

.rsvp-miss {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(0.9rem, 2.5vw, 1.1rem);
  margin-top: 10px;
  color: #8b1a1a;
}

.rsvp-functions-label {
  font-family: 'Qttney-e9X8g', serif;
  font-size: 1.2rem;
  color: #5a0a0a;
  margin-top: 10px;
  margin-bottom: 8px;
  text-align: left;
}

.rsvp-checkboxes-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: left;
}

.rsvp-checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.95rem;
  color: #5a0a0a;
}

.rsvp-checkbox-label input {
  display: none;
}

.custom-checkbox {
  width: 20px;
  height: 20px;
  border: 1px solid rgba(90, 10, 10, 0.4);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.rsvp-checkbox-label input:checked+.custom-checkbox {
  background: #5a0a0a;
  border-color: #5a0a0a;
}

.rsvp-checkbox-label input:checked+.custom-checkbox::after {
  content: '✓';
  color: #f9f4e2;
  font-size: 14px;
}

.rsvp-checkbox-label:hover .custom-checkbox {
  border-color: #5a0a0a;
}

/* Mobile */
@media (max-width: 640px) {
  .rsvp-inner {
    padding: 0 5vw;
    box-sizing: border-box;
  }

  .rsvp-buttons {
    flex-direction: column;
  }

  .rsvp-row {
    flex-direction: column;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Wishes Section (Inherits RSVP Styles)
   ═══════════════════════════════════════════════════════════════════════ */

.wishes-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: stretch;
}

/* ── Wish wall — rotating 2×2 grid (desktop) / 1-col 3-card (mobile) ── */
.wish-wall {
  margin-top: 4vh;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  align-items: start;
}

/* Individual wish card */
.aamantran-wish {
  position: relative;
  background: rgba(255, 252, 245, 0.92);
  border: 1px solid rgba(180, 140, 80, 0.22);
  border-radius: 12px;
  padding: 22px 18px 16px;
  box-shadow: 0 2px 12px rgba(120, 70, 20, 0.07);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Decorative opening quote */
.aamantran-wish::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 3.2rem;
  line-height: 1;
  color: #c9956b;
  opacity: 0.55;
  position: absolute;
  top: 6px;
  left: 12px;
}

.aamantran-wish-message {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: clamp(0.78rem, 1.5vw, 0.92rem);
  color: #5a0a0a;
  line-height: 1.65;
  margin: 0;
  padding-top: 18px;
  word-break: break-word;
}

.aamantran-wish-author {
  font-family: 'Qttney-e9X8g', serif;
  font-style: italic;
  font-size: clamp(0.7rem, 1.3vw, 0.82rem);
  color: #9a6a2a;
  letter-spacing: 0.04em;
  align-self: flex-end;
}

/* Fade states for rotation */
.aamantran-wish {
  animation: wishFadeIn 0.4s ease both;
}

@keyframes wishFadeIn {
  from { opacity: 0; transform: scale(0.97) translateY(6px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

.aamantran-wish.wish-out {
  opacity: 0;
  transform: scale(0.96);
  pointer-events: none;
}

.aamantran-wish.wish-hidden {
  display: none;
}

.wishes-status-text {
  font-family: 'Inter', sans-serif;
  color: #5a0a0a;
  margin-top: 10px;
}

/* ── Mobile: single column, 3 cards ─────────────────────────────────── */
@media (max-width: 640px) {
  .wish-wall {
    grid-template-columns: 1fr;
  }
  .aamantran-wish-message {
    font-size: clamp(0.82rem, 3.8vw, 0.95rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Footer / Ending
   ═══════════════════════════════════════════════════════════════════════ */

.footer-ending {
  width: calc(100% + 10vw);
  margin-left: -5vw;
  margin-top: 8vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.ending-img {
  width: 95%;
  max-width: none;
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}




/* ── RSVP Field Labels ────────────────────────────────────────────────── */
.rsvp-field {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
}

.rsvp-field-label {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-size: 0.95rem;
  color: #ffe8c2;
  padding-left: 4px;
}