:root {
      --rose:      #a6384f;
      --rose-dark: #77283a;
      --sage:      #8d9a7a;
      --leaf-dark: #1f3329;
      --ivory:     #f7eedc;
      --parchment: #e9d7b8;
      --amber:     #d8a957;
      --amber-lit: #f0c86a;
      --ink:       #3e2b22;
      --night:     #060d0b;
      --display:   "Cormorant Garamond", Georgia, serif;
      --script:    "Parisienne", cursive;
      --body:      "EB Garamond", Georgia, serif;

      /* Parallax layer offsets — driven by JS */
      --px-bg-x: 0px;  --px-bg-y: 0px;
      --px-jhm-x: 0px; --px-jhm-y: 0px;
      --px-flr-x: 0px; --px-flr-y: 0px;
      --px-dya-x: 0px; --px-dya-y: 0px;
    }

    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    html { scroll-behavior: smooth; }
    body {
      font-family: var(--body);
      color: var(--ink);
      background: var(--night);
      overflow-x: hidden;
    }
    body.intro-active { overflow: hidden; height: 100svh; }

    /* ═══════════════════════════════════════════
       INTRO — cinematic mobile hero
    ═══════════════════════════════════════════ */
    .intro {
      position: fixed; inset: 0; z-index: 20;
      min-height: 100svh; overflow: hidden; isolation: isolate;
      background: var(--night);
    }
    .intro.is-complete {
      opacity: 0; visibility: hidden; pointer-events: none;
      transition: opacity 1.2s ease, visibility 1.2s ease;
    }

    /* ── Background layers ── */
    .intro-bg {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center top;
      pointer-events: none; user-select: none;
      will-change: transform;
    }
    .intro-bg-dark {
      z-index: 1;
      transform: translate3d(var(--px-bg-x), var(--px-bg-y), 0) scale(1.06);
      transition: transform 1100ms ease-out;
    }
    .intro-bg-lit {
      z-index: 2; opacity: 0;
      transform: translate3d(var(--px-bg-x), var(--px-bg-y), 0) scale(1.06);
      transition: transform 1100ms ease-out;
    }
    @keyframes lightFlicker {
      0%  { opacity: 0; }
      4%  { opacity: .55; }
      8%  { opacity: .03; }
      15% { opacity: .68; }
      21% { opacity: .07; }
      29% { opacity: .82; }
      40% { opacity: .58; }
      52% { opacity: .94; }
      62% { opacity: .82; }
      100%{ opacity: 1; }
    }
    .intro.is-lit .intro-bg-lit {
      animation: lightFlicker 1400ms ease forwards;
    }

    /* ── Vignette ── */
    .intro-vignette {
      position: absolute; inset: 0; z-index: 3; pointer-events: none;
      background:
        radial-gradient(ellipse 54% 62% at 50% 43%,
          rgba(216,169,87,.075) 0%,
          rgba(166,56,79,.045) 38%,
          transparent 66%),
        linear-gradient(180deg,
          rgba(4,8,6,.78) 0%,
          transparent 18%,
          transparent 50%,
          rgba(4,8,6,.92) 100%),
        linear-gradient(90deg,
          rgba(4,8,6,.54) 0%,
          transparent 20%,
          transparent 80%,
          rgba(4,8,6,.52) 100%);
      transition: background 2.2s ease;
    }
    /* Lit — open up the scene, let the bg breathe */
    .intro.is-lit .intro-vignette {
      background:
        linear-gradient(180deg,
          rgba(4,8,6,.28) 0%,
          transparent 16%,
          transparent 58%,
          rgba(4,8,6,.72) 100%),
        linear-gradient(90deg,
          rgba(4,8,6,.22) 0%,
          transparent 18%,
          transparent 82%,
          rgba(4,8,6,.20) 100%);
    }

    .intro-dark-vignette {
      position: absolute; inset: 0; z-index: 4; pointer-events: none;
      background: radial-gradient(ellipse 62% 70% at 50% 46%,
        transparent 28%, rgba(2,5,4,.76) 100%);
      opacity: 1; transition: opacity 2400ms ease;
    }
    .intro.is-lit .intro-dark-vignette { opacity: 0; }

    /* ── Warm amber bloom — LIGHT touch, trust the bg image ── */
    .intro-warm-glow {
      position: absolute; inset: 0; z-index: 5;
      pointer-events: none; opacity: 0;
      transform: translate3d(var(--px-jhm-x), var(--px-jhm-y), 0);
      background:
        radial-gradient(ellipse 70% 34% at 50% 0%,
          rgba(216,169,87,.30) 0%, transparent 68%);
      mix-blend-mode: screen;
      transition: opacity 1600ms ease 300ms;
      will-change: transform, opacity;
    }
    .intro.is-lit .intro-warm-glow {
      opacity: 1;
      animation: warmBreath 8s ease-in-out 1.4s infinite;
    }
    @keyframes warmBreath {
      0%,100% { opacity: .85; }
      50%     { opacity: 1; }
    }

    /* ── Jhoomer glow — subtle enhancement only ── */
    .intro-jhoomer-glow {
      position: absolute; inset: 0; z-index: 5; pointer-events: none; opacity: 0;
      transform: translate3d(var(--px-jhm-x), var(--px-jhm-y), 0);
      background: radial-gradient(ellipse 52% 28% at 50% 0%,
        rgba(216,169,87,.42) 0%,
        rgba(216,169,87,.12) 40%,
        transparent 66%);
      mix-blend-mode: screen;
      transition: opacity 1400ms ease 320ms;
      will-change: transform, opacity;
    }
    .intro.is-lit .intro-jhoomer-glow {
      opacity: 1;
      animation: lampBreath 6s ease-in-out 1.1s infinite;
    }
    @keyframes lampBreath {
      0%,100% { opacity: .85; }
      50%     { opacity: 1; }
    }

    /* ── Cinematic flash — golden burst when rope is pulled ── */
    @keyframes cinemaFlash {
      0%   { opacity: 0; }
      10%  { opacity: .94; }
      100% { opacity: 0; }
    }

    /* ── Diya floor glows ── */
    .diya-floor-glow {
      position: absolute; bottom: -4px; left: 50%;
      width: 120%; padding-top: 40%;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(ellipse at 50% 100%,
        rgba(216,169,87,.55) 0%, transparent 72%);
      pointer-events: none;
      opacity: 0; transition: opacity 1200ms ease 900ms;
    }
    .intro.is-lit .diya-floor-glow { opacity: 1; }

    /* ── Rose scatter — very subtle floor warmth ── */
    .intro-rose-scatter {
      position: absolute; inset: 0; z-index: 5;
      pointer-events: none; opacity: 0;
      background:
        radial-gradient(ellipse 60% 28% at 14% 86%,
          rgba(166,56,79,.14) 0%, transparent 68%),
        radial-gradient(ellipse 56% 26% at 86% 86%,
          rgba(166,56,79,.12) 0%, transparent 64%);
      mix-blend-mode: screen;
      transition: opacity 2000ms ease 900ms;
    }
    .intro.is-lit .intro-rose-scatter { opacity: 1; }

    /* ── Gold dust ── */
    .intro-dust {
      position: absolute; inset: 0; z-index: 6;
      pointer-events: none; overflow: hidden;
      opacity: 0; transition: opacity 2400ms ease 1100ms;
    }
    .intro.is-lit .intro-dust { opacity: 1; }
    .dust-particle {
      position: absolute; border-radius: 50%;
      background: rgba(216,169,87,.80);
      animation: dustRise linear infinite;
      will-change: transform, opacity;
    }
    @keyframes dustRise {
      0%   { transform: translateY(0) scale(1); opacity: .72; }
      55%  { opacity: .48; }
      100% { transform: translateY(-58svh) scale(.35); opacity: 0; }
    }

    /* ── Floating petals ── */
    .intro-petals {
      position: absolute; inset: 0; z-index: 6;
      pointer-events: none; overflow: hidden;
      opacity: 0; transition: opacity 2s ease 1.6s;
    }
    .intro.is-lit .intro-petals { opacity: 1; }
    .petal {
      position: absolute;
      border-radius: 50% 50% 0 50%;
      background: rgba(223,162,168,.58);
      animation: petalDrift ease-in-out infinite;
      will-change: transform, opacity;
    }
    @keyframes petalDrift {
      0%   { transform: translateY(0) rotate(0deg) translateX(0);    opacity: 0; }
      7%   { opacity: .62; }
      86%  { opacity: .38; }
      100% { transform: translateY(-52svh) rotate(300deg) translateX(24px); opacity: 0; }
    }

    /* ═══════════════════════════════════════════
       JHOOMER — only in lit state
    ═══════════════════════════════════════════ */
    .intro-jhoomer {
      position: absolute;
      top: -20px; left: 50%;
      /* Smaller — arch & ornament remain visible */
      width: min(200px, 50vw);
      transform: translate3d(calc(-50% + var(--px-jhm-x)), var(--px-jhm-y), 0);
      z-index: 10;
      /* HIDDEN in dark state */
      opacity: 0;
      pointer-events: none; user-select: none;
      filter:
        drop-shadow(0 22px 44px rgba(0,0,0,.28))
        drop-shadow(0 0 0px rgba(216,169,87,0));
      transition:
        opacity 1200ms ease 280ms,
        filter  1200ms ease 280ms;
      will-change: transform, opacity;
    }
    /* Only appears when lit */
    .intro.is-lit .intro-jhoomer {
      opacity: .92;
      filter:
        drop-shadow(0 26px 52px rgba(0,0,0,.22))
        drop-shadow(0 0 52px rgba(216,169,87,.78))
        drop-shadow(0 0 16px rgba(247,218,166,.50));
      animation: jhoomerSway 5.4s ease-in-out 1.1s infinite;
    }
    @keyframes jhoomerSway {
      0%,100% { transform: translate3d(calc(-50% + var(--px-jhm-x)), var(--px-jhm-y), 0) rotate(-.55deg); }
      50%     { transform: translate3d(calc(-50% + var(--px-jhm-x)), calc(var(--px-jhm-y) + 4px), 0) rotate(.55deg); }
    }

    /* ═══════════════════════════════════════════
       ROPE — large, natural — visible only in dark state
    ═══════════════════════════════════════════ */
    .rope-button {
      position: absolute;
      top: 0; left: 50%;
      transform: translateX(-50%);
      z-index: 11;
      width: clamp(100px, 24vw, 132px);
      height: clamp(440px, 60svh, 580px);
      border: 0; padding: 0; background: transparent;
      cursor: grab; touch-action: none;
      transform-origin: 50% 0;
      overflow: visible;
      /* Natural rope shadow — no 3D tube */
      filter:
        drop-shadow(0 32px 64px rgba(0,0,0,.78))
        drop-shadow(0 0 20px rgba(0,0,0,.36));
      animation: ropeDrop 1.15s ease .35s both;
      will-change: transform, filter;
    }

    @keyframes ropeDrop {
      0%   { transform: translateX(-50%) rotate(-.4deg); opacity: 0; }
      55%  { transform: translateX(-50%) rotate(.22deg); opacity: 1; }
      100% { transform: translateX(-50%) rotate(0deg); opacity: 1; }
    }
    @keyframes ropeIdle {
      0%   { transform: translateX(-50%) rotate(0deg); }
      20%  { transform: translateX(-50%) rotate(.5deg); }
      52%  { transform: translateX(-50%) rotate(-.42deg); }
      78%  { transform: translateX(-50%) rotate(.28deg); }
      100% { transform: translateX(-50%) rotate(0deg); }
    }
    .rope-button.rope-ready:not(.rope-idle) {
      animation: none;
      opacity: 1;
    }
    .rope-button.rope-idle {
      animation: ropeIdle 5.2s ease-in-out infinite;
      opacity: 1;
    }
    .rope-button.is-pulling {
      animation: none;
      opacity: 1;
      cursor: grabbing;
      filter:
        drop-shadow(0 38px 74px rgba(0,0,0,.84))
        drop-shadow(0 0 24px rgba(216,169,87,.16));
    }
    .rope-button.is-pulling::after {
      opacity: .62;
      filter: blur(10px);
      animation-duration: 2.2s;
    }
    .rope-button:active   { cursor: grabbing; }
    .rope-button:focus    { outline: none; }
    .rope-button:focus-visible {
      filter:
        drop-shadow(-6px 0 16px rgba(0,0,0,.82))
        drop-shadow(6px 0 16px rgba(0,0,0,.82))
        drop-shadow(0 48px 90px rgba(0,0,0,.92))
        drop-shadow(0 0 34px rgba(247,238,220,.22));
    }

    .rope-img {
      display: block; width: 100%; height: 100%;
      object-fit: contain; object-position: center top;
      transform-origin: top center;
      will-change: transform;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }

    /* Tassel halo — glows as user pulls */
    .rope-halo {
      position: absolute;
      top: clamp(112px, 20svh, 168px);
      left: 50%;
      width: min(118px, 34vw); height: min(118px, 34vw);
      border-radius: 50%;
      transform: translateX(-50%);
      background: radial-gradient(circle,
        rgba(216,169,87,.34) 0%,
        rgba(216,169,87,.12) 42%,
        transparent 70%);
      pointer-events: none;
      animation: haloBreath 3.4s ease-in-out infinite;
    }
    .rope-button::after {
      content: "";
      position: absolute;
      left: 50%;
      top: clamp(104px, 19svh, 158px);
      width: min(148px, 40vw);
      height: min(148px, 40vw);
      border-radius: 50%;
      transform: translate(-50%, 0);
      background:
        radial-gradient(circle,
          rgba(240,200,106,.30) 0%,
          rgba(216,169,87,.15) 34%,
          rgba(166,56,79,.07) 58%,
          transparent 74%);
      filter: blur(8px);
      opacity: .42;
      pointer-events: none;
      mix-blend-mode: screen;
      animation: tasselBloom 4.4s ease-in-out infinite;
    }
    @keyframes haloBreath {
      0%,100% { opacity: .28; transform: translateX(-50%) scale(1); }
      50%     { opacity: .72; transform: translateX(-50%) scale(1.24); }
    }
    @keyframes tasselBloom {
      0%,100% { opacity: .30; transform: translate(-50%, 0) scale(.94); }
      50%     { opacity: .56; transform: translate(-50%, 0) scale(1.08); }
    }

    /* Pull hint removed */

    /* Rope fully gone in lit state */
    .intro.is-lit .rope-button {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      animation: none;
      transform: translateX(-50%) translateY(-120%);
      transition:
        opacity 520ms ease 40ms,
        visibility 0ms linear 620ms,
        transform 620ms ease 40ms;
    }

    /* Rope anchor glow */
    .rope-anchor-glow {
      position: absolute; top: 0; left: 50%;
      width: min(180px, 46vw); height: min(120px, 15svh);
      transform: translateX(-50%);
      z-index: 9; pointer-events: none;
      background: radial-gradient(ellipse 100% 100% at 50% 0%,
        rgba(216,169,87,.22) 0%, transparent 100%);
      animation: anchorBreath 4.8s ease-in-out infinite;
    }
    @keyframes anchorBreath {
      0%,100% { opacity: .36; transform: translateX(-50%) scale(1); }
      50%     { opacity: .80; transform: translateX(-50%) scale(1.14); }
    }
    /* Hide anchor glow when lit — jhoomer takes over */
    .intro.is-lit .rope-anchor-glow { opacity: 0; transition: opacity 800ms ease; }

    /* ═══════════════════════════════════════════
       FLORAL CLUSTERS — bottom corners, lit state only
    ═══════════════════════════════════════════ */
    .intro-floral-left {
      position: absolute;
      left: -14vw; bottom: -12svh;
      width: min(280px, 70vw);
      z-index: 8;
      opacity: 0;
      transform: translate3d(var(--px-flr-x), var(--px-flr-y), 0)
                 rotate(-4deg) translateY(16px);
      filter: saturate(0) blur(.6px);
      transition:
        opacity 1800ms ease 600ms,
        filter  2000ms ease 600ms,
        transform 2000ms ease 600ms;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }
    .intro.is-lit .intro-floral-left {
      opacity: .72;
      filter: saturate(1) blur(0);
      transform: translate3d(var(--px-flr-x), var(--px-flr-y), 0) rotate(-3deg) translateY(0);
      animation: floralSway 10s ease-in-out 1.8s infinite;
    }

    .intro-floral-right {
      position: absolute;
      right: -14vw; bottom: -12svh;
      width: min(280px, 70vw);
      z-index: 8;
      opacity: 0;
      transform: translate3d(calc(var(--px-flr-x) * -1), var(--px-flr-y), 0)
                 scaleX(-1) rotate(-4deg) translateY(16px);
      filter: saturate(0) blur(.6px);
      transition:
        opacity 1800ms ease 700ms,
        filter  2000ms ease 700ms,
        transform 2000ms ease 700ms;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }
    .intro.is-lit .intro-floral-right {
      opacity: .65;
      filter: saturate(1) blur(0);
      transform: translate3d(calc(var(--px-flr-x) * -1), var(--px-flr-y), 0)
                 scaleX(-1) rotate(-3deg) translateY(0);
      animation: floralSwayR 11.5s ease-in-out 2s infinite;
    }
    @keyframes floralSway  {
      0%,100% { transform: translate3d(var(--px-flr-x), var(--px-flr-y), 0) rotate(-3deg) translateY(0); }
      50%     { transform: translate3d(var(--px-flr-x), calc(var(--px-flr-y) - 6px), 0) rotate(-2.2deg) translateY(-4px); }
    }
    @keyframes floralSwayR {
      0%,100% { transform: translate3d(calc(var(--px-flr-x) * -1), var(--px-flr-y), 0) scaleX(-1) rotate(-3deg) translateY(0); }
      50%     { transform: translate3d(calc(var(--px-flr-x) * -1), calc(var(--px-flr-y) - 6px), 0) scaleX(-1) rotate(-2.2deg) translateY(-4px); }
    }

    /* ═══════════════════════════════════════════
       DIYAS — arch gate floor level, lit state only
       Left pillar base ≈ 18vw from left
       Right pillar base ≈ 18vw from right
       Vertical ≈ 28svh from bottom (72% down)
    ═══════════════════════════════════════════ */
    .diya-wrap {
      position: absolute;
      width: min(76px, 19vw);
      z-index: 8;
      opacity: 0;
      transition: opacity 1000ms ease 1000ms, transform 1000ms ease 1000ms;
      pointer-events: none;
    }
    /* Diyas at outer pillar bases — left edge and right edge of arch */
    .diya-wrap.diya-left {
      left: 4vw; bottom: 27svh;
      transform: translate3d(var(--px-dya-x), var(--px-dya-y), 0)
                 scale(.88) translateY(10px);
    }
    .diya-wrap.diya-right {
      right: 4vw; bottom: 27svh;
      transform: translate3d(calc(var(--px-dya-x) * -1), var(--px-dya-y), 0)
                 scale(.88) translateY(10px);
    }
    .intro.is-lit .diya-wrap {
      opacity: 1;
    }
    .intro.is-lit .diya-wrap.diya-left {
      transform: translate3d(var(--px-dya-x), var(--px-dya-y), 0) scale(1) translateY(0);
      animation: diyaFlicker 4.3s ease-in-out 1.3s infinite;
    }
    .intro.is-lit .diya-wrap.diya-right {
      transform: translate3d(calc(var(--px-dya-x) * -1), var(--px-dya-y), 0) scale(1) translateY(0);
      animation: diyaFlicker 5.4s ease-in-out 1.7s infinite;
    }
    @keyframes diyaFlicker {
      0%,100% {
        filter: drop-shadow(0 -10px 18px rgba(216,169,87,.50))
                drop-shadow(0 12px 20px rgba(0,0,0,.22));
        opacity: .88;
      }
      30% { opacity: .78; }
      48% {
        filter: drop-shadow(0 -10px 28px rgba(216,169,87,.90))
                drop-shadow(0 12px 20px rgba(0,0,0,.18));
        opacity: .96;
      }
      72% { opacity: .84; }
    }

    .diya-img {
      display: block; width: 100%; height: auto;
      object-fit: contain;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }

    /* ═══════════════════════════════════════════
       INSTRUCTION — dark state
    ═══════════════════════════════════════════ */
    .intro-instruction {
      position: absolute; z-index: 12;
      /* Sits just below the rope tassel area */
      bottom: 28svh; left: 50%;
      transform: translateX(-50%) translateY(14px);
      text-align: center; pointer-events: none;
      opacity: 0; transition: opacity 600ms ease, transform 600ms ease;
    }
    .intro.is-waiting .intro-instruction {
      opacity: 1; transform: translateX(-50%) translateY(0);
    }
    .pull-label {
      display: block;
      font-family: var(--display); font-style: italic;
      font-size: clamp(1.46rem, 6.3vw, 2.28rem);
      color: rgba(248,226,186,.86);
      text-shadow:
        0 2px 20px rgba(0,0,0,.60),
        0 0 30px rgba(216,169,87,.20);
      letter-spacing: .075em;
      white-space: nowrap;
    }
    .pull-feedback {
      position: absolute;
      left: 50%;
      bottom: 21.5svh;
      z-index: 13;
      transform: translateX(-50%) translateY(10px) scale(.97);
      padding: 9px 16px 10px;
      border: 1px solid rgba(216,169,87,.22);
      border-radius: 999px;
      background:
        radial-gradient(ellipse 80% 120% at 50% 0%,
          rgba(216,169,87,.16),
          rgba(31,18,13,.20) 62%,
          rgba(31,18,13,.08));
      color: rgba(248,226,186,.84);
      font-family: var(--display);
      font-size: clamp(.92rem, 3.45vw, 1.08rem);
      font-style: italic;
      letter-spacing: .055em;
      text-align: center;
      text-shadow:
        0 2px 12px rgba(0,0,0,.52),
        0 0 18px rgba(216,169,87,.14);
      box-shadow:
        0 16px 42px rgba(0,0,0,.20),
        inset 0 0 18px rgba(247,226,190,.04);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 420ms ease,
        visibility 0ms linear 420ms,
        transform 520ms cubic-bezier(.18,1,.3,1);
      white-space: nowrap;
    }
    .pull-feedback.is-visible {
      opacity: 1;
      visibility: visible;
      transform: translateX(-50%) translateY(0) scale(1);
      transition:
        opacity 420ms ease,
        visibility 0ms,
        transform 520ms cubic-bezier(.18,1,.3,1);
    }
    .pull-ritual-cue {
      position: relative;
      width: 26px;
      height: 34px;
      margin: 0 auto 10px;
    }
    .pull-ritual-cue::before {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 1px;
      width: 22px;
      height: 8px;
      border-radius: 50%;
      transform: translateX(-50%);
      background: radial-gradient(ellipse, rgba(216,169,87,.46), transparent 72%);
      filter: blur(1px);
      opacity: .62;
      animation: diyaEmber 3.4s ease-in-out infinite;
    }
    .pull-ritual-cue::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 8px;
      width: 12px;
      height: 22px;
      border-radius: 60% 60% 55% 55%;
      transform: translateX(-50%) rotate(2deg);
      background:
        radial-gradient(circle at 50% 78%, rgba(255,236,176,.88) 0 18%, transparent 19%),
        radial-gradient(ellipse at 50% 60%,
          rgba(240,200,106,.88) 0%,
          rgba(216,122,66,.72) 42%,
          rgba(166,56,79,.22) 72%,
          transparent 100%);
      filter: blur(.15px) drop-shadow(0 0 12px rgba(216,169,87,.36));
      animation: diyaFlame 2.8s ease-in-out infinite;
      transform-origin: 50% 100%;
    }
    @keyframes diyaFlame {
      0%,100% { opacity: .62; transform: translateX(-50%) rotate(2deg) scaleY(.92); }
      45%     { opacity: .92; transform: translateX(-50%) rotate(-3deg) scaleY(1.08); }
      70%     { opacity: .74; transform: translateX(-50%) rotate(1deg) scaleY(.98); }
    }
    @keyframes diyaEmber {
      0%,100% { opacity: .42; transform: translateX(-50%) scale(.88); }
      50%     { opacity: .72; transform: translateX(-50%) scale(1.12); }
    }

    /* ═══════════════════════════════════════════
       NAME & TEXT REVEAL
    ═══════════════════════════════════════════ */
    .intro-reveal {
      position: absolute; inset: 0; z-index: 9; pointer-events: none;
    }
    /* Fix 3 — Frosted arch-shaped scrim — lifts names off the busy image */
    .intro-reveal::after {
      content: "";
      position: absolute;
      left: 50%; top: 28svh;
      width: min(500px, 94vw); height: 40svh;
      transform: translateX(-50%) scale(.88);
      border-radius: 50% 50% 46% 46% / 12% 12% 18% 18%;
      background: radial-gradient(ellipse at 50% 38%,
        rgba(18,5,4,.58) 0%,
        rgba(18,5,4,.32) 42%,
        rgba(18,5,4,.08) 68%,
        transparent 88%);
      pointer-events: none; z-index: 0;
      opacity: 0;
      transition: opacity 1600ms ease 400ms, transform 1800ms ease 400ms;
    }
    .intro.show-names .intro-reveal::after {
      opacity: 1; transform: translateX(-50%) scale(1);
    }
    /* Soft glow behind names */
    .intro-reveal::before {
      content: "";
      position: absolute; left: 50%; top: 46svh;
      width: min(520px, 94vw); height: 42svh;
      transform: translate(-50%,-50%) scale(.86);
      border-radius: 50%;
      background: radial-gradient(ellipse at center,
        rgba(247,226,190,.16) 0%, rgba(247,226,190,.06) 40%, transparent 70%);
      opacity: 0;
      transition: opacity 1800ms ease 520ms, transform 2200ms ease 520ms;
    }
    .intro.show-names .intro-reveal::before {
      opacity: 1; transform: translate(-50%,-50%) scale(1);
    }

    .intro-reveal-item {
      position: absolute; left: 50%;
      opacity: 0;
      transform: translateX(-50%) translateY(22px);
      transition: opacity 1100ms ease, transform 1200ms cubic-bezier(.16,1,.3,1);
      text-align: center; z-index: 1;
      width: min(600px, calc(100vw - 24px));
    }

    /* NAMES — cinematic title card, maximum legibility */
    .intro-reveal .names {
      top: 34svh;
      font-family: var(--display);
      font-size: clamp(4rem, 17vw, 7.2rem);
      font-weight: 300; font-style: italic;
      color: rgba(252, 241, 218, .99);
      line-height: 1.0;
      letter-spacing: .012em;
      /* Fix 1 — 5-layer shadow: rim highlight + base + depth + amber bloom + wide jhoomer halo */
      text-shadow:
        0 1px 0   rgba(255,240,200,.22),
        0 2px 4px  rgba(0,0,0,.96),
        0 6px 32px rgba(0,0,0,.82),
        0 0 60px  rgba(216,169,87,.55),
        0 0 120px rgba(216,169,87,.28);
      transform: translateX(-50%) translateY(28px) scale(.96);
      transition: opacity 1300ms ease, transform 1500ms cubic-bezier(.14,1,.28,1);
    }
    /* Names block itself is always visible once show-names fires — word spans handle stagger */
    .intro.show-names .names {
      opacity: 1; transform: translateX(-50%) translateY(0) scale(1);
      /* Fix 4 — Living shimmer: chandelier light washing over lettering */
      animation: nameGlow 6s ease-in-out 1.8s infinite;
    }
    @keyframes nameGlow {
      0%, 100% {
        text-shadow:
          0 1px 0   rgba(255,240,200,.18),
          0 2px 4px  rgba(0,0,0,.96),
          0 6px 32px rgba(0,0,0,.82),
          0 0 60px  rgba(216,169,87,.48),
          0 0 120px rgba(216,169,87,.22);
      }
      50% {
        text-shadow:
          0 1px 0   rgba(255,248,210,.36),
          0 2px 4px  rgba(0,0,0,.92),
          0 6px 28px rgba(0,0,0,.72),
          0 0 80px  rgba(240,200,106,.78),
          0 0 150px rgba(216,169,87,.42),
          0 0 220px rgba(216,169,87,.18);
      }
    }
    /* Script ampersand in warm gold */
    .names .amp {
      font-family: var(--script);
      font-size: .84em; font-style: normal;
      color: rgba(240,196,108,.99);
      display: inline-block; margin: 0 .06em;
      text-shadow:
        0 0 10px rgba(255,220,120,.60),
        0 0 28px rgba(216,169,87,.55),
        0 0 60px rgba(216,169,87,.32),
        0 3px 20px rgba(0,0,0,.52);
    }
    /* Fix 2 — Per-word staggered entrance */
    .names .word {
      display: inline-block;
      opacity: 0;
      transform: translateY(20px) scale(.96);
      transition:
        opacity  900ms ease,
        transform 1050ms cubic-bezier(.14,1,.28,1);
    }
    .names .amp-wrap { margin: 0 .05em; }
    .intro.show-names .names .word { opacity: 1; transform: translateY(0) scale(1); }
    .intro.show-names .names .word:nth-child(1) { transition-delay: 0ms; }
    .intro.show-names .names .word:nth-child(2) { transition-delay: 175ms; }
    .intro.show-names .names .word:nth-child(3) { transition-delay: 340ms; }

    /* Fix 6 — Animated ornament: lines draw out from center when show-date fires */
    .intro-reveal .ornament {
      top: 54.4svh;
      display: flex; align-items: center; justify-content: center; gap: 10px;
      width: min(240px, 60vw);
      transition: opacity 900ms ease, transform 1000ms ease;
    }
    .intro-reveal .ornament span {
      flex: 1; height: 1.5px;
      background: linear-gradient(90deg, transparent, rgba(216,169,87,.88), transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 850ms cubic-bezier(.22,1,.36,1) 160ms;
    }
    .intro.show-date .ornament span { transform: scaleX(1); }
    .intro-reveal .ornament i {
      width: 7px; height: 7px;
      background: rgba(216,169,87,.90);
      font-style: normal;
      transform: rotate(45deg);
      border-radius: 1px;
      box-shadow: 0 0 8px rgba(216,169,87,.60), 0 0 18px rgba(216,169,87,.30);
      flex-shrink: 0;
    }
    .intro.show-date .ornament { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* DATE — Fix 5: pill backdrop + gold shadow for guaranteed legibility */
    .intro-reveal .date {
      top: 57.2svh;
      font-family: var(--display);
      font-size: clamp(1.08rem, 4.45vw, 1.28rem);
      font-weight: 600;
      letter-spacing: .155em;
      text-transform: uppercase;
      color: rgba(252, 242, 218, .99);
      padding: 5px 20px 6px;
      background: rgba(8,3,2,.44);
      border-radius: 999px;
      border: 1px solid rgba(216,169,87,.22);
      text-shadow:
        0 1px 2px rgba(0,0,0,1),
        0 3px 14px rgba(0,0,0,.90),
        0 0 40px rgba(216,169,87,.42);
      transition: opacity 900ms ease, transform 1000ms ease;
    }
    .intro.show-date .date { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* VENUE — Fix 5: rose-amber glow echoing the floral palette */
    .intro-reveal .venue {
      top: 62.2svh;
      font-family: var(--display);
      font-size: clamp(1.02rem, 4.05vw, 1.22rem);
      font-style: italic; font-weight: 500;
      letter-spacing: .06em;
      color: rgba(252, 238, 214, .97);
      text-shadow:
        0 1px 2px rgba(0,0,0,1),
        0 3px 16px rgba(0,0,0,.90),
        0 0 36px rgba(166,56,79,.42),
        0 0 70px rgba(216,169,87,.28);
      transition: opacity 900ms ease, transform 1000ms ease;
    }
    .intro.show-venue .venue { opacity: 1; transform: translateX(-50%) translateY(0); }

    /* ═══════════════════════════════════════════
       LOTUS CTA
    ═══════════════════════════════════════════ */

    /* Wrapper — centres everything as a column */
    .lotus-cta-group {
      position: absolute;
      left: 50%; top: 70svh;
      transform: translate(-50%, 30px) scale(.90);
      z-index: 11;
      opacity: 0; pointer-events: none;
      display: flex; flex-direction: column; align-items: center;
      gap: 2px;
      transition: opacity 1100ms ease, transform 1100ms cubic-bezier(.22,1,.36,1);
    }
    .intro.show-lotus .lotus-cta-group {
      opacity: 1; transform: translate(-50%, 0) scale(1); pointer-events: auto;
    }

    /* The lotus button sits in flow inside the group */
    .lotus-button {
      border: 0; padding: 0; background: transparent; cursor: pointer;
      display: grid; place-items: center;
      width: clamp(84px, 23vw, 112px);
      height: clamp(84px, 23vw, 112px);
      -webkit-tap-highlight-color: transparent;
      flex-shrink: 0;
    }

    .lotus-icon-img {
      display: block;
      width: clamp(80px, 22vw, 108px); height: clamp(80px, 22vw, 108px);
      grid-area: 1 / 1;
      object-fit: contain;
      filter:
        drop-shadow(0 14px 28px rgba(0,0,0,.32))
        drop-shadow(0 0 22px rgba(223,162,168,.55));
      transition: transform .8s ease, filter .8s ease;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }
    /* Amplified pulse so the lotus visually calls for attention */
    .intro.show-lotus .lotus-icon-img {
      animation:
        lotusPulse 3.8s ease-in-out .6s infinite,
        lotusSacredTurn 18s linear .6s infinite,
        lotusBlink 1.18s ease-in-out .8s infinite;
    }
    @keyframes lotusBlink {
      0%, 100% { opacity: 1; }
      50%      { opacity: .42; }
    }
    @keyframes lotusPulse {
      0%,100% {
        filter:
          drop-shadow(0 12px 24px rgba(0,0,0,.28))
          drop-shadow(0 0 16px rgba(223,162,168,.40));
      }
      50% {
        filter:
          drop-shadow(0 10px 28px rgba(0,0,0,.16))
          drop-shadow(0 0 48px rgba(223,162,168,.85))
          drop-shadow(0 0 80px rgba(216,169,87,.35));
      }
    }
    @keyframes lotusSacredTurn {
      from { transform: rotate(-1.5deg) scale(1); }
      50%  { transform: rotate(1.5deg) scale(1.022); }
      to   { transform: rotate(-1.5deg) scale(1); }
    }
    .lotus-button.is-open .lotus-icon-img {
      transform: scale(1.40); animation: none; opacity: 1;
      filter: drop-shadow(0 12px 30px rgba(0,0,0,.16)) drop-shadow(0 0 54px rgba(223,162,168,.88));
    }

    /* Glow burst on tap */
    .lotus-glow-burst {
      position: absolute;
      top: 50%; left: 50%;
      width: min(340px, 86vw); aspect-ratio: 1;
      transform: translate(-50%,-50%) scale(.28);
      opacity: 0; z-index: -1; pointer-events: none; user-select: none;
      transition: opacity 800ms ease, transform 1000ms ease;
    }
    .lotus-button.is-open .lotus-glow-burst {
      opacity: .46; transform: translate(-50%,-50%) scale(.92);
    }

    /* ── Label — readable italic warm cream ── */
    .lotus-cta-label {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(1.05rem, 4.2vw, 1.22rem);
      letter-spacing: .06em;
      color: rgba(252, 241, 218, .95);
      text-align: center;
      text-shadow:
        0 1px 3px rgba(0,0,0,.90),
        0 3px 18px rgba(0,0,0,.72),
        0 0 36px rgba(216,169,87,.30);
      white-space: nowrap;
      opacity: 0;
      transform: translateY(8px);
      transition: opacity 700ms ease 200ms, transform 700ms cubic-bezier(.16,1,.3,1) 200ms;
      pointer-events: none;
    }
    .intro.show-lotus .lotus-cta-label {
      opacity: 1; transform: translateY(0);
      animation: lotusBlink 1.18s ease-in-out .8s infinite;
    }
    /* Dim label once lotus is tapped */
    .lotus-button.is-open ~ .lotus-cta-label {
      opacity: 0;
      animation: none;
      transition: opacity 400ms ease;
    }

    /* ── Skip ── */
    .skip-intro {
      position: absolute; z-index: 14;
      right: max(16px, env(safe-area-inset-right));
      bottom: max(18px, calc(env(safe-area-inset-bottom) + 18px));
      transform: none;
      border: 0; padding: 8px 0 8px 14px; background: transparent;
      color: rgba(247,226,190,.34);
      font-family: var(--display);
      font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
      text-shadow: 0 2px 8px rgba(0,0,0,.44);
      cursor: pointer; white-space: nowrap;
      transition: color .3s ease;
    }
    .skip-intro:hover { color: rgba(247,226,190,.64); }
    .intro.is-lit .skip-intro {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      transition:
        opacity 420ms ease,
        visibility 0ms linear 460ms;
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
      }
    }

    /* ═══════════════════════════════════════════
       PAGE SHELL
    ═══════════════════════════════════════════ */
    .page-shell { position: relative; z-index: 1; }
    .section { position: relative; padding: clamp(72px,10vw,120px) 18px; overflow: hidden; }
    .section-inner { width: min(1120px,100%); margin: 0 auto; position: relative; z-index: 1; }
    h1,h2,h3 { font-family: var(--display); font-weight: 500; }
    .eyebrow {
      margin: 0 0 12px; color: var(--rose);
      font-size: .74rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
    }
    .section-title { color: var(--rose); font-size: clamp(2.8rem,7vw,5.6rem); line-height: .9; }
    .section-lede {
      max-width: 620px; margin: 18px auto 0;
      font-family: var(--display); font-size: clamp(1.18rem,2.6vw,1.72rem); line-height: 1.38;
    }

    body {
      background:
        radial-gradient(circle at top left, rgba(166,56,79,.13), transparent 28rem),
        radial-gradient(circle at 82% 20%,  rgba(86,107,61,.16), transparent 24rem),
        linear-gradient(135deg, #f9efdd, #ead8b9);
    }
    /* ═══════════════════════════════════════════
       INVITE SECTION — arch window, layered design
    ═══════════════════════════════════════════ */
    .invite-section {
      position: relative;
      min-height: 100svh;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
    }

    /* Layer 1 — Pichwai background */
    .invite-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background: url("assets/invite/pn-inv-bg-panel-m-v01.webp") center / cover no-repeat;
      animation: kenBurns 10s ease-in-out infinite alternate;
      pointer-events: none;
    }
    @keyframes kenBurns {
      from { transform: scale(1); }
      to   { transform: scale(1.05); }
    }

    /* Layer 2 — Dark vignette */
    .invite-vignette {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,.45) 100%);
      pointer-events: none;
    }

    /* ── Birds — Pichwai spritesheet animation, upper sky ──
       REAL sheet dimensions: 2172 × 724 px  |  6 frames  |  each frame: 362 × 724 px
       File: assets/invite/Bird_frames.webp  (cleaned — stray feather blob removed)

       Bird content within each frame:
         Y: rows 170 – 543  →  373 px of actual bird  (rest is black)
         X: cols   0 – 362  →  full frame width

       BIRD A render size: frame width = 80 px
         scale         = 80 / 362  = 0.2210
         bg-width      = 2172 × 0.2210 = 480 px
         bg-height     = 724  × 0.2210 = 160 px
         div height    = 373  × 0.2210 =  82 px  ← crops to content only
         bg-pos-y      = -(170 × 0.2210) = -38 px  ← skip top black
         flap keyframe = 0 → -(80 × 6) = -480 px  steps(6, end)

       BIRD B render size: frame width = 60 px  (smaller / more distant)
         scale         = 60 / 362  = 0.1657
         bg-width      = 2172 × 0.1657 = 360 px
         bg-height     = 724  × 0.1657 = 120 px
         div height    = 373  × 0.1657 =  62 px
         bg-pos-y      = -(170 × 0.1657) = -28 px
         flap keyframe = 0 → -(60 × 6) = -360 px  steps(6, end)
    ── */

    /* ── Rose petal shower canvas ── */
    .invite-petals {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      pointer-events: none;
    }

    .invite-birds {
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      overflow: hidden;
      opacity: 0;
      transition: opacity 2s ease 2.2s;
    }
    .invite-section.invite-active .invite-birds {
      opacity: 1;
    }

    /* Shared base */
    .inv-bird {
      position: absolute;
      overflow: hidden;
      background-image:  url("assets/invite/Bird_frames.webp");
      background-repeat: no-repeat;
      pointer-events:    none;
    }

    /* ── Bird A — 80 px frame, left → right ── */
    .inv-bird--a {
      width:  80px;
      height: 82px;
      background-size:     480px 160px;
      background-position: 0px -38px;
      top: 10%;
      animation:
        birdFlapA  0.35s steps(6, end) infinite,
        birdFlyA   5s    linear 1.8s   infinite,
        birdDriftA 3.7s  ease-in-out 1.8s infinite;
    }
    @keyframes birdFlapA {
      from { background-position-x:    0px; }
      to   { background-position-x: -480px; }
    }
    @keyframes birdFlyA {
      0%   { left: -12%; }
      100% { left: 108%; }
    }
    @keyframes birdDriftA {
      0%   { top: 10%;  }
      25%  { top: 8%;   }
      55%  { top: 11%;  }
      80%  { top: 9%;   }
      100% { top: 10%;  }
    }

    /* ── Bird B — 60 px frame, right → left, mirrored ── */
    .inv-bird--b {
      width:  60px;
      height: 62px;
      background-size:     360px 120px;
      background-position: 0px -28px;
      top: 6%;
      transform: scaleX(-1);
      animation:
        birdFlapB  0.42s steps(6, end) 0.15s infinite,
        birdFlyB   7s    linear 8s     infinite,
        birdDriftB 5.1s  ease-in-out 8s infinite;
    }
    @keyframes birdFlapB {
      from { background-position-x:    0px; }
      to   { background-position-x: -360px; }
    }
    @keyframes birdFlyB {
      0%   { left: 110%; }
      100% { left: -12%; }
    }
    @keyframes birdDriftB {
      0%   { top: 6%;   }
      22%  { top: 8%;   }
      60%  { top: 4%;   }
      85%  { top: 7%;   }
      100% { top: 6%;   }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      .invite-birds { display: none !important; }
    }

    /* Layer 3 — Card wrap: arch floats as a centered frame */
    .invite-card-wrap {
      position: absolute;
      inset: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      animation: archFloat 7s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes archFloat {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-8px); }
    }

    /* Arch PNG — 25% larger than original; RGBA so transparent areas show background */
    .invite-arch-frame {
      display: block;
      height: 216svh;
      width: auto;
      max-width: 96vw;
      position: relative;
      z-index: 0;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      filter:
        drop-shadow(0 0 28px rgba(216,169,87,.44))
        drop-shadow(0 0 10px rgba(166,56,79,.24));
    }

    /* Layer 4 — Text occupies the arch interior window */
    .invite-text-content {
      position: absolute;
      top: 16%;
      bottom: 16%;
      left: 50%;
      transform: translateX(-50%);
      max-width: min(360px, 70vw);
      width: 100%;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      gap: 0;
      overflow: visible;
      /* Soft ivory scrim — lifts text off the Pichwai painting */
      background: radial-gradient(ellipse 85% 90% at 50% 50%,
        rgba(247,238,220,.28) 0%,
        rgba(247,238,220,.12) 55%,
        transparent 80%);
      border-radius: 50% 50% 46% 46% / 8% 8% 14% 14%;
    }

    /* CTA — floats outside the arch, horizontally centred in the section */
    .inv-cta {
      position: absolute;
      bottom: 5%;
      left: 0; right: 0;
      display: flex;
      justify-content: center;
      z-index: 5;
      opacity: 0;
    }
    .invite-section.invite-active .inv-cta { animation: fadeUp .9s ease-out 1.3s both; }

    /* ── Animations ── */
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(24px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes goldGlow {
      0%, 100% { text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 24px rgba(166,56,79,.10); }
      50%       { text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 40px rgba(166,56,79,.22); }
    }

    /* Cinematic name reveal — materialization from golden light */
    @keyframes nameReveal {
      0%   { opacity: 0; transform: scale(.86) translateY(18px); filter: blur(6px); letter-spacing: .12em; }
      55%  { filter: blur(0); }
      100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); letter-spacing: .05em; }
    }

    /* Rich amber–rose glow that breathes after reveal */
    @keyframes namePulse {
      0%, 100% {
        text-shadow:
          0 1px 0 rgba(255,255,255,.45),
          0 0 18px rgba(200,144,42,.22),
          0 0 48px rgba(200,144,42,.08);
      }
      50% {
        text-shadow:
          0 1px 0 rgba(255,255,255,.55),
          0 0 36px rgba(200,144,42,.46),
          0 0 80px rgba(200,144,42,.16),
          0 0 10px rgba(166,56,79,.14);
      }
    }

    /* Ampersand candle-flicker — Parisienne script feels like a lit diya */
    @keyframes ampFlicker {
      0%, 100% { opacity: 1;   filter: drop-shadow(0 0 5px rgba(200,144,42,.30)); }
      28%      { opacity: .82; filter: drop-shadow(0 0 14px rgba(216,169,87,.70)); }
      52%      { opacity: .94; filter: drop-shadow(0 0 8px rgba(200,144,42,.50)); }
      74%      { opacity: .88; filter: drop-shadow(0 0 18px rgba(216,169,87,.60)); }
    }

    /* Radial golden bloom behind the names */
    @keyframes nameRadiance {
      0%, 100% { opacity: .55; transform: scale(.88); }
      50%       { opacity: 1;   transform: scale(1.12); }
    }

    /* Ink drying on parchment — blur clears as text settles */
    @keyframes inkSettle {
      from { opacity: 0; filter: blur(4px); transform: translateY(14px); }
      60%  { filter: blur(0); }
      to   { opacity: 1; filter: blur(0);   transform: translateY(0); }
    }

    /* Kicker — letter-spacing breathes open like unfolding scroll */
    @keyframes scrollUnfurl {
      from { opacity: 0; letter-spacing: .04em; transform: translateY(10px); }
      to   { opacity: 1; letter-spacing: .24em; transform: translateY(0); }
    }

    /* Lotus — materialises with a gentle scale */
    @keyframes lotusBloom {
      from { opacity: 0; transform: scale(.78) translateY(8px); }
      to   { opacity: .68; transform: scale(1) translateY(0); }
    }

    /* Date — warm rose pulse after reveal */
    @keyframes datePulse {
      0%,100% { text-shadow: 0 0 0px rgba(166,56,79,0); }
      50%      { text-shadow: 0 0 22px rgba(166,56,79,.36), 0 0 8px rgba(216,169,87,.22); }
    }

    /* Venue — very gentle perpetual drift */
    @keyframes venueDrift {
      0%,100% { transform: translateY(0); opacity: .65; }
      50%      { transform: translateY(-2px); opacity: .80; }
    }

    /* Occasion — italic shimmer */
    @keyframes occasionShimmer {
      from { opacity: 0; letter-spacing: .01em; transform: translateY(10px); }
      to   { opacity: 1; letter-spacing: .03em; transform: translateY(0); }
    }

    /* All text blocks start hidden */
    .inv-blessing,
    .inv-blessing-alt,
    .inv-kicker,
    .inv-lotus-div,
    .inv-names,
    .inv-parents,
    .inv-occasion,
    .inv-meta,
    .inv-cta { opacity: 0; }

    /* Staggered reveals — each element gets a character-appropriate animation */
    .invite-section.invite-active .inv-blessing   { animation: inkSettle    1.1s cubic-bezier(.16,1,.3,1)  0s    both; }
    .invite-section.invite-active .inv-blessing-alt { animation: inkSettle  1.1s cubic-bezier(.16,1,.3,1)  0s    both; }
    .invite-section.invite-active .inv-kicker     { animation: scrollUnfurl 1.0s cubic-bezier(.16,1,.3,1)  .22s  both; }
    .invite-section.invite-active .inv-lotus-div  { animation: lotusBloom   1.0s cubic-bezier(.16,1,.3,1)  .4s   both; }
    .invite-section.invite-active .inv-names      {
      animation: nameReveal 1.5s cubic-bezier(.16,1,.3,1) .55s both,
                 namePulse  5.5s ease-in-out 2.2s infinite;
    }
    .invite-section.invite-active .inv-amp {
      animation: ampFlicker 6.5s ease-in-out 2.4s infinite;
    }
    .invite-section.invite-active .inv-parents  { animation: inkSettle      1.1s cubic-bezier(.16,1,.3,1) .88s  both; }
    .invite-section.invite-active .inv-occasion { animation: occasionShimmer 1.0s cubic-bezier(.16,1,.3,1) 1.05s both; }
    .invite-section.invite-active .inv-meta     { animation: inkSettle      1.0s cubic-bezier(.16,1,.3,1) 1.20s both; }
    /* Persistent glow on date after it fades in (~2.2s from active) */
    .invite-section.invite-active .inv-date     { animation: datePulse  4.2s ease-in-out 2.4s infinite; }
    /* Venue breathes gently */
    .invite-section.invite-active .inv-venue    { animation: venueDrift 6.0s ease-in-out 2.8s infinite; }

    /* ── Text element styles — dark colors for ivory card surface ── */

    /* Grandparents blessing — subtle, set apart by a bottom rule */
    .inv-blessing {
      font-family: var(--display);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      margin-bottom: 0.6rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid rgba(119,40,58,.15);
      width: 80%;
    }
    .inv-overline {
      font-size: 0.88rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: var(--rose-dark);
      opacity: .78;
      font-weight: 600;
      margin-bottom: 3px;
      text-shadow: 0 1px 6px rgba(247,238,220,.55);
    }
    .inv-blessing p:not(.inv-overline) {
      font-family: var(--display);
      font-style: italic;
      font-size: 1.07rem;
      color: var(--ink);
      opacity: .82;
      line-height: 1.5;
      margin: 0;
      text-shadow: 0 1px 4px rgba(247,238,220,.40);
    }

    /* Alternative top block when no grandparents — replaces blessing + kicker */
    .inv-blessing-alt {
      font-family: var(--display);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      margin-bottom: 0.5rem;
      padding-bottom: 0.6rem;
      border-bottom: 1px solid rgba(119,40,58,.15);
      width: 80%;
    }
    .inv-blessing-alt-line1 {
      font-size: 1.0rem;
      font-style: italic;
      color: var(--ink);
      opacity: .85;
      line-height: 1.5;
      margin: 0;
      text-shadow: 0 1px 4px rgba(247,238,220,.40);
    }
    .inv-blessing-alt-line2 {
      font-size: 1.0rem;
      font-style: italic;
      color: var(--ink);
      opacity: .75;
      line-height: 1.5;
      margin: 0;
      text-shadow: 0 1px 4px rgba(247,238,220,.40);
    }
    .inv-blessing-alt-line3 {
      font-size: .76rem;
      letter-spacing: .20em;
      text-transform: uppercase;
      color: var(--rose-dark);
      font-weight: 500;
      opacity: .82;
      margin-top: 4px;
    }

    /* "Together with their families" */
    .inv-kicker {
      font-family: var(--display);
      font-size: .76rem;
      letter-spacing: .24em;
      text-transform: uppercase;
      color: var(--rose-dark);
      font-weight: 500;
      opacity: .82;
      margin-bottom: 0.3rem;
    }

    /* Lotus divider asset */
    .inv-lotus-div {
      display: block;
      width: clamp(70px, 19vw, 110px);
      height: auto;
      margin: 0.2rem auto;
      opacity: .68;
      pointer-events: none;
      user-select: none;
    }

    /* Couple names — focal hero, larger */
    .inv-names {
      font-family: var(--display);
      font-size: clamp(4.2rem, 9vw, 6.4rem);
      font-weight: 300;
      font-style: italic;
      color: #C8902A;
      line-height: 1.1;
      letter-spacing: .05em;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      margin: 0.3rem 0;
      white-space: normal;
      overflow-wrap: break-word;
      word-break: break-word;
      position: relative;
    }
    /* Golden radiance bloom behind the names — feels like diya light on gold leaf */
    .inv-names::before {
      content: "";
      position: absolute;
      inset: -60% -28%;
      background: radial-gradient(ellipse at center,
        rgba(200,144,42,.16) 0%,
        rgba(216,169,87,.07) 42%,
        transparent 68%);
      pointer-events: none;
      z-index: -1;
      opacity: 0;
      animation: none;
    }
    .invite-section.invite-active .inv-names::before {
      animation: nameRadiance 5.5s ease-in-out 2s infinite;
    }
    .inv-amp {
      font-family: var(--script);
      font-style: normal;
      font-size: .80em;
      color: #C8902A;
    }

    /* Parent lines — each line separated by a hairline rule */
    .inv-parents {
      font-family: var(--display);
      font-style: italic;
      font-size: 1.10rem;
      color: var(--ink);
      opacity: .88;
      line-height: 1.52;
      display: flex;
      flex-direction: column;
      gap: 0;
      margin-bottom: 0.5rem;
      width: 92%;
      text-shadow: 0 1px 4px rgba(247,238,220,.40);
    }
    .inv-parents p { margin: 0; padding: 6px 0; }
    .inv-parents p + p {
      border-top: 1px solid rgba(119,40,58,.14);
    }

    /* Short occasion line */
    .inv-occasion {
      font-family: var(--display);
      font-style: italic;
      font-size: 1.18rem;
      color: var(--ink);
      opacity: .65;
      margin-bottom: 0.55rem;
    }

    /* Date & venue — anchored below a rule */
    .inv-meta {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 4px;
      padding-top: 0.55rem;
      border-top: 1px solid rgba(119,40,58,.15);
      width: 84%;
    }
    .inv-date {
      font-family: var(--display);
      font-size: 1.79rem;
      letter-spacing: .16em;
      color: var(--rose-dark);
      font-weight: 500;
      white-space: nowrap;
    }
    .inv-venue {
      font-family: var(--display);
      font-style: italic;
      font-size: 1.29rem;
      color: var(--ink);
      opacity: .65;
    }

    /* CTA button — styled for dark Pichwai background */
    .inv-btn {
      display: inline-block;
      border: 1px solid rgba(216,169,87,.55);
      color: var(--ivory);
      background: rgba(6,13,11,.36);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      padding: .52rem 2.2rem;
      letter-spacing: .20em;
      font-size: .62rem;
      font-family: var(--display);
      font-weight: 500;
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;
      transition: background .3s ease, border-color .3s ease, color .3s ease;
    }
    .inv-btn:hover {
      background: rgba(216,169,87,.14);
      border-color: rgba(216,169,87,.82);
      color: var(--amber);
    }

    .cta-row {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 12px; margin-top: 16px;
    }
    .btn {
      display: inline-flex; align-items: center; justify-content: center;
      min-height: 46px; border: 1px solid rgba(62,43,34,.14); border-radius: 999px;
      padding: 12px 22px; color: var(--ivory); background: var(--rose);
      font-family: var(--body); font-weight: 700; text-decoration: none; cursor: pointer;
      box-shadow: 0 12px 30px rgba(62,43,34,.14);
    }
    .btn.secondary { color: var(--rose); background: rgba(247,238,220,.78); }

    /* ═══════════════════════════════════════════
       EVENTS SECTION — Painted Path of Celebrations
    ═══════════════════════════════════════════ */
    .events-section {
      position: relative;
      padding: 0;
      overflow: hidden;
      background: none;
      color: var(--ivory);
    }

    /* Deep mauve-wine gradient — works at any section height */
    .evt-bg {
      position: absolute; inset: 0; z-index: 0;
      background:
        /* Faint moonlight shimmer at the very top */
        radial-gradient(ellipse 80% 28% at 50% 0%,
          rgba(190,215,255,.07) 0%, transparent 65%),
        /* Sky-to-earth: midnight indigo fades into warm mauve */
        linear-gradient(180deg,
          #080513  0%,   /* deep midnight — the open sky */
          #110A1C  10%,  /* dark indigo */
          #1B0E22  22%,  /* indigo-plum */
          #24132A  36%,  /* plum transition */
          #261520  52%,  /* warm mauve base — farmans live here */
          #2E1A26  68%,  /* warmer mauve near bottom */
          #1A0E16 100%); /* dark anchor at section foot */
    }

    /* Rose watercolor texture — painted tactile surface at very low opacity */
    .evt-tex-overlay {
      position: absolute; inset: 0; z-index: 0;
      background: url("assets/shared/pn-tex-ovl-watercolor-rose-x-v01.webp") center / cover;
      opacity: .05;
      pointer-events: none;
    }

    /* Starfield canvas */
    .evt-stars {
      position: absolute; inset: 0; z-index: 0;
      pointer-events: none;
      display: block;
    }

    /* Edge vignette — deepens top/bottom seams into the gradient */
    .evt-bg-vignette {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
        linear-gradient(180deg,
          rgba(26,14,22,.60) 0%,
          rgba(26,14,22,.12) 8%,
          rgba(26,14,22,0)   20%,
          rgba(26,14,22,0)   80%,
          rgba(26,14,22,.12) 92%,
          rgba(26,14,22,.60) 100%);
    }

    /* ── Section header — top padding clears the hanging jhoomer ── */
    .evt-header {
      position: relative; z-index: 5;
      text-align: center;
      padding: clamp(210px,56vw,260px) 24px clamp(8px,1.5svh,18px);
    }

    .evt-header .evt-eyebrow,
    .evt-header .evt-title,
    .evt-header .evt-divider { opacity: 0; }

    .evt-header.in-view .evt-eyebrow { animation: fadeUp 700ms cubic-bezier(.16,1,.3,1)   0ms both; }
    .evt-header.in-view .evt-title   { animation: fadeUp 880ms cubic-bezier(.16,1,.3,1) 130ms both; }
    .evt-header.in-view .evt-divider { animation: fadeUp 700ms cubic-bezier(.16,1,.3,1) 290ms both; }

    .evt-eyebrow {
      font-family: var(--display);
      font-size: .70rem; font-weight: 700;
      letter-spacing: .26em; text-transform: uppercase;
      color: rgba(233,215,184,.60);
      margin: 0 0 10px;
      text-shadow: 0 1px 8px rgba(0,0,0,.50);
    }

    .evt-title {
      font-family: var(--display);
      font-size: clamp(2.8rem,9vw,4.8rem);
      font-weight: 300; font-style: italic;
      color: rgba(247,238,220,.97);
      line-height: .94; letter-spacing: .02em;
      margin-bottom: clamp(12px,2.5vw,20px);
      text-shadow:
        0 2px 20px rgba(0,0,0,.60),
        0 0  50px rgba(0,0,0,.22);
    }

    .evt-divider {
      display: block;
      width: clamp(80px,22vw,148px); height: auto;
      margin: 0 auto clamp(8px,1.8vw,16px);
      pointer-events: none; user-select: none;
      filter: drop-shadow(0 1px 6px rgba(0,0,0,.36));
    }



    /* ── Journey spine ── */
    .evt-journey {
      position: relative; z-index: 2;
      max-width: 420px; margin: 0 auto;
      padding-bottom: clamp(36px,6svh,72px);
    }

    .evt-path-wrap { display: none; }

    /* ── Stops + footsteps flex column ── */
    .evt-stops {
      position: relative; z-index: 1;
      display: flex; flex-direction: column;
      align-items: stretch;
      gap: 0;
      padding: clamp(12px,2.5vw,20px) 0 clamp(18px,4vw,32px);
    }

    /* ── Individual event stop ── */
    .evt-stop {
      width: min(168px,46vw);
      opacity: 0;
      transform: translateY(28px) scale(.976);
      transition:
        opacity 860ms cubic-bezier(.16,1,.3,1),
        transform 960ms cubic-bezier(.16,1,.3,1);
    }
    .evt-stop.in-view { opacity: 1; transform: translateY(0) scale(1); }

    .evt-stop--left  { align-self: flex-start; margin-left: clamp(10px,5vw,28px); }
    .evt-stop--right { align-self: flex-end;   margin-right: clamp(10px,5vw,28px); }

    /* Plaque — PNG is RGBA; transparent bg so arch corners show garden behind */
    .evt-stop-plaque {
      position: relative;
      background-image: url("assets/event/pn-evt-crd-plaque-m-v01.png");
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-color: transparent;
      /* Lock to original 971 × 1619 ratio */
      aspect-ratio: 971 / 1619;
      width: 100%;
    }

    /* Content fills full plaque height; padding clears arch crown + base ornament */
    .evt-stop-content {
      position: absolute; inset: 0;
      display: flex; flex-direction: column;
      align-items: center; text-align: center;
      justify-content: center;
      /* top 30% of width ≈ 18% of height — clears arch crown
         bottom 20% of width ≈ 12% of height — clears base ornament
         shift centre slightly lower with asymmetric padding */
      padding: 34% 10% 18%;
      gap: 4px;
    }

    /* Motif — sized to fill plaque interior comfortably */
    .evt-stop-motif {
      width: clamp(40px,10.5vw,54px);
      height: clamp(40px,10.5vw,54px);
      object-fit: contain;
      flex-shrink: 0;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      margin-bottom: clamp(4px,1.2vw,7px);
      filter: drop-shadow(0 2px 6px rgba(62,43,34,.26));
    }

    /* Float + glow — unique per stop via --motif-* CSS vars set in JS */
    @keyframes motifFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      38%     { transform: translateY(-7px) rotate(.5deg); }
      72%     { transform: translateY(-3px) rotate(-.3deg); }
    }
    @keyframes motifGlow {
      0%,100% {
        filter:
          drop-shadow(0 3px 8px rgba(62,43,34,.22))
          drop-shadow(0 0 0px rgba(166,56,79,0));
      }
      50% {
        filter:
          drop-shadow(0 7px 18px rgba(62,43,34,.12))
          drop-shadow(0 0 18px rgba(166,56,79,.18));
      }
    }

    .evt-stop.in-view .evt-stop-motif {
      animation:
        motifFloat var(--motif-dur,  6s)   ease-in-out var(--motif-del, 0.9s) infinite,
        motifGlow  var(--motif-gdur, 4.4s) ease-in-out var(--motif-del, 0.9s) infinite;
    }

    /* Text — dark on parchment plaque */
    .evt-stop-name {
      font-family: var(--display);
      font-size: clamp(1.1rem,3vw,1.45rem);
      font-weight: 300; font-style: italic;
      color: var(--rose-dark);
      letter-spacing: .03em; line-height: 1.02;
      margin: 0 0 3px;
    }

    .evt-stop-datetime {
      font-family: var(--display);
      font-size: clamp(.58rem,1.55vw,.68rem);
      font-weight: 600; letter-spacing: .12em;
      text-transform: uppercase;
      color: var(--rose);
      margin: 0; line-height: 1.3;
    }

    .evt-stop-venue {
      font-family: var(--display); font-style: italic;
      font-size: clamp(.62rem,1.65vw,.72rem);
      color: var(--ink); opacity: .72;
      margin: 2px 0 0; line-height: 1.32;
    }

    .evt-stop-note {
      font-family: var(--display); font-style: italic;
      font-size: clamp(.56rem,1.5vw,.64rem);
      color: var(--ink); opacity: .50;
      margin: 1px 0 0; line-height: 1.36;
    }

    .evt-stop-map {
      display: inline-block;
      font-family: var(--display); font-style: italic;
      font-size: clamp(.54rem,1.4vw,.62rem);
      color: var(--rose-dark);
      text-decoration: none;
      opacity: .60;
      margin-top: 6px;
      transition: opacity .22s ease;
    }
    .evt-stop-map:hover { opacity: .92; }

    /* ── Peacock footsteps — between each pair of stops ── */
    .evt-footstep {
      align-self: center;
      display: flex; flex-direction: column;
      align-items: center; gap: 4px;
      padding: clamp(10px,2.6vw,16px) 0;
      position: relative; z-index: 1;
      pointer-events: none;
      opacity: 0;
      transition: opacity 700ms cubic-bezier(.16,1,.3,1);
    }
    .evt-footstep.in-view { opacity: 1; }

    /* Each paw svg — alternating side offset to simulate gait */
    .evt-paw {
      display: block;
      color: rgba(216,169,87,.62);
      width: 22px; height: 26px;
      flex-shrink: 0;
    }
    .evt-paw--l {
      transform: translateX(-8px) rotate(-6deg);
      opacity: 0;
    }
    .evt-paw--r {
      transform: translateX(8px) rotate(6deg);
      opacity: 0;
    }

    @keyframes pawStepL {
      from { opacity: 0; transform: translateX(-8px) rotate(-6deg) translateY(8px) scale(.6); }
      to   { opacity: 1; transform: translateX(-8px) rotate(-6deg) translateY(0) scale(1); }
    }
    @keyframes pawStepR {
      from { opacity: 0; transform: translateX(8px) rotate(6deg) translateY(8px) scale(.6); }
      to   { opacity: 1; transform: translateX(8px) rotate(6deg) translateY(0) scale(1); }
    }

    .evt-footstep.in-view .evt-paw--l {
      animation: pawStepL 520ms cubic-bezier(.16,1,.3,1) 80ms both;
    }
    .evt-footstep.in-view .evt-paw--r {
      animation: pawStepR 520ms cubic-bezier(.16,1,.3,1) 280ms both;
    }

    /* ── Flying birds ── */
    .evt-birds {
      position: absolute; inset: 0; z-index: 1;
      pointer-events: none; overflow: hidden;
    }
    .evt-bird {
      position: absolute;
      top: var(--bird-top, 20%);
      width: var(--bird-w, 20px);
      height: calc(var(--bird-w, 20px) * 0.5);
      color: rgba(62,43,34,.38);
      animation: birdFly var(--bird-dur, 26s) linear var(--bird-del, 0s) infinite;
      will-change: transform;
    }
    /* Two-arc wing shape using pseudo-elements */
    .evt-bird::before,
    .evt-bird::after {
      content: ''; position: absolute; top: 0;
      width: 50%; height: 100%;
      border-top: 2px solid currentColor;
      border-radius: 50% 50% 0 0;
    }
    .evt-bird::before { left: 0;  border-right: none; transform: skewX(4deg); }
    .evt-bird::after  { right: 0; border-left: none;  transform: skewX(-4deg); }

    @keyframes birdFly {
      0%   { transform: translateX(108vw) translateY(0);                   opacity: 0; }
      4%   { opacity: 1; }
      96%  { opacity: 1; }
      100% { transform: translateX(-14vw) translateY(var(--bird-drift,0)); opacity: 0; }
    }

    @media (prefers-reduced-motion: reduce) {
      .evt-bird { animation: none !important; display: none; }
    }

    /* ══════════════════════════════════════════
       EVENTS — Decorative ambient layer
    ══════════════════════════════════════════ */

    /* ── Warm centre glow — fills empty middle ── */
    .evt-glow-mid {
      position: absolute;
      top: 25%; left: 50%;
      transform: translateX(-50%);
      width: 140%; height: 55%;
      background:
        radial-gradient(ellipse 60% 55% at 50% 50%,
          rgba(216,169,87,.09) 0%,
          rgba(166,56,79,.07)  45%,
          transparent          75%);
      pointer-events: none;
      z-index: 0;
    }

    /* ── Jhoomer — top centre, fully visible, pendulum sway + inner glow ── */
    .evt-jhoomer-wrap {
      position: absolute;
      top: 0;                           /* chain anchors at section top edge */
      left: 50%;
      transform: translateX(-50%);
      z-index: 4;
      width: clamp(82px, 22vw, 110px);
      pointer-events: none;
    }
    .evt-jhoomer-inner {
      transform-origin: 50% 0%;
      animation: evtJhoomerSway 7s ease-in-out infinite;
    }
    @keyframes evtJhoomerSway {
      0%,100% { transform: rotate(0deg); }
      28%     { transform: rotate(2deg); }
      72%     { transform: rotate(-2deg); }
    }
    .evt-jhoomer-img {
      display: block; width: 100%; height: auto;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      animation: evtJhoomerGlow 3.8s ease-in-out infinite;
    }
    @keyframes evtJhoomerGlow {
      0%,100% {
        filter:
          drop-shadow(0 6px 20px rgba(166,56,79,.38))
          drop-shadow(0 2px 8px rgba(0,0,0,.55))
          drop-shadow(0 0 0px rgba(216,169,87,0));
      }
      50% {
        filter:
          drop-shadow(0 6px 20px rgba(166,56,79,.28))
          drop-shadow(0 2px 8px rgba(0,0,0,.45))
          drop-shadow(0 0 38px rgba(216,169,87,.55));
      }
    }

    /* ── Floral corners ── */
    .evt-corner {
      position: absolute;
      z-index: 3;
      width: clamp(80px, 22vw, 148px);
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      opacity: .65;
    }
    .evt-corner--tl { top: 0; left: 0; }
    .evt-corner--tr { top: 0; right: 0; }

    /* ── Floral borders — top & bottom edges ── */
    .evt-floral-border {
      position: absolute;
      left: 0; right: 0;
      z-index: 2;
      pointer-events: none;
      line-height: 0;
      opacity: .58;
    }
    /* Push top border down so jhoomer chain is visible above it */
    .evt-floral-border--top {
      top: clamp(44px, 12vw, 80px);
    }
    .evt-floral-border--bot { bottom: 0; transform: scaleY(-1); }
    .evt-floral-border img {
      display: block; width: 100%; height: auto;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }

    /* ── Banana leaf — upper left ── */
    .evt-bananaleaf {
      position: absolute;
      top: 12%; left: -8%;
      z-index: 1;
      width: clamp(110px, 30vw, 200px);
      opacity: .52;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      filter: drop-shadow(0 8px 28px rgba(0,0,0,.45));
      transform-origin: 80% 10%;
      animation: evtLeafSway 9s ease-in-out infinite;
    }

    /* ── Chhatri — upper right ── */
    .evt-chhatri {
      position: absolute;
      top: 8%; right: -10%;
      z-index: 1;
      width: clamp(100px, 28vw, 190px);
      opacity: .45;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      filter: drop-shadow(0 6px 22px rgba(49,27,40,.50));
      animation: evtMotifDrift 12s ease-in-out 2s infinite;
    }

    /* ── Peacock — mid left ── */
    .evt-peacock {
      position: absolute;
      top: 36%; left: -8%;
      z-index: 1;
      width: clamp(130px, 36vw, 210px);
      opacity: .60;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      filter:
        drop-shadow(0 -4px 28px rgba(49,27,40,.55))
        drop-shadow(0 8px 20px rgba(0,0,0,.38));
      animation: evtMotifDrift 14s ease-in-out 0s infinite;
      will-change: transform;
    }

    /* ── Diyas — lower left & right ── */
    .evt-diya {
      position: absolute;
      z-index: 2;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }
    .evt-diya--l {
      width: clamp(44px, 11vw, 76px);
      bottom: 22%; left: 4%;
      opacity: .72;
      filter:
        drop-shadow(0 -6px 22px rgba(255,180,60,.38))
        drop-shadow(0 4px 12px rgba(0,0,0,.45));
      animation: evtDiyaFlicker 2.8s ease-in-out 0s infinite;
    }
    .evt-diya--r {
      width: clamp(38px, 9vw, 64px);
      bottom: 28%; right: 5%;
      opacity: .65;
      filter:
        drop-shadow(0 -6px 20px rgba(255,180,60,.32))
        drop-shadow(0 4px 12px rgba(0,0,0,.40));
      animation: evtDiyaFlicker 3.2s ease-in-out 1.1s infinite;
    }

    /* ── Elephant — mid right ── */
    .evt-elephant {
      position: absolute;
      top: 44%; right: -8%;
      z-index: 1;
      width: clamp(140px, 38vw, 220px);
      opacity: .58;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      filter:
        drop-shadow(0 -4px 28px rgba(49,27,40,.50))
        drop-shadow(0 8px 20px rgba(0,0,0,.35));
      transform: scaleX(-1);
      animation: evtElephantDrift 16s ease-in-out 3s infinite;
      will-change: transform;
    }

    /* ── Cow — bottom centre ── */
    .evt-cow {
      position: absolute;
      bottom: -2%; left: 50%;
      transform: translateX(-50%);
      z-index: 2;
      width: clamp(100px, 26vw, 180px);
      opacity: .55;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      filter: drop-shadow(0 -4px 24px rgba(49,27,40,.45));
      animation: evtMotifDrift 13s ease-in-out 5s infinite;
    }

    /* ── Floating lotus accents ── */
    .evt-lotus {
      position: absolute;
      z-index: 1;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }
    .evt-lotus--1 {
      width: clamp(52px, 13vw, 88px);
      top: 22%; left: 5%;
      opacity: .28;
      filter: drop-shadow(0 4px 16px rgba(216,169,87,.22));
      animation: evtLotusFloat 9s ease-in-out 0s infinite;
    }
    .evt-lotus--2 {
      width: clamp(38px, 9vw, 64px);
      top: 58%; right: 6%;
      opacity: .22;
      filter: drop-shadow(0 4px 14px rgba(166,56,79,.20));
      animation: evtLotusFloat 11s ease-in-out 3.5s infinite;
    }

    /* ── New keyframes ── */
    @keyframes evtLeafSway {
      0%,100% { transform: rotate(0deg); }
      30%     { transform: rotate(4deg); }
      70%     { transform: rotate(-3deg); }
    }
    @keyframes evtMotifDrift {
      0%,100% { transform: translateY(0px); }
      40%     { transform: translateY(-10px); }
      75%     { transform: translateY(-4px); }
    }
    @keyframes evtElephantDrift {
      0%,100% { transform: scaleX(-1) translateY(0px); }
      40%     { transform: scaleX(-1) translateY(-8px); }
      75%     { transform: scaleX(-1) translateY(-3px); }
    }
    @keyframes evtDiyaFlicker {
      0%,100% { opacity: .72; }
      30%     { opacity: .55; }
      60%     { opacity: .80; }
      80%     { opacity: .50; }
    }
    @keyframes evtLotusFloat {
      0%,100% { transform: translateY(0) rotate(0deg); }
      45%     { transform: translateY(-10px) rotate(4deg); }
      78%     { transform: translateY(-4px) rotate(-2deg); }
    }

    @media (prefers-reduced-motion: reduce) {
      .evt-jhoomer-inner  { animation: none !important; }
      .evt-jhoomer-img    { animation: none !important; }
      .evt-lotus          { animation: none !important; }
      .evt-bananaleaf     { animation: none !important; }
      .evt-chhatri        { animation: none !important; }
      .evt-peacock        { animation: none !important; }
      .evt-elephant       { animation: none !important; }
      .evt-cow            { animation: none !important; }
      .evt-diya           { animation: none !important; }
    }

    /* ═══════════════════════════════════
       GALLERY SECTION — Hanging Frames
    ═══════════════════════════════════ */
    .gallery-section {
      position: relative;
      overflow: hidden;
      padding: 0 0 80px;
      min-height: 100vh;
    }

    /* ── Courtyard background ── */
    .gal-bg {
      position: absolute;
      inset: 0;
      background:
        url("assets/gallery/pn-gal-bg-hanging-courtyard-m-v01.webp")
        center top / cover no-repeat;
      transform-origin: center top;
      will-change: transform;
    }
    .gal-bg-vignette {
      position: absolute;
      inset: 0;
      background:
        linear-gradient(to bottom,
          rgba(30,18,10,.18) 0%,
          rgba(30,18,10,.04) 18%,
          rgba(30,18,10,.04) 72%,
          rgba(30,18,10,.52) 100%);
      pointer-events: none;
      z-index: 1;
    }

    /* ── Section header ── */
    .gal-header {
      position: relative;
      z-index: 2;
      text-align: center;
      padding: 72px 24px 0;
    }
    .gal-eyebrow  { color: var(--amber); letter-spacing: .22em; }
    .gal-title    { color: var(--ivory); text-shadow: 0 2px 18px rgba(30,18,10,.55); }
    .gal-lede     { color: rgba(247,238,220,.72); max-width: 460px; margin: 12px auto 0; font-style: italic; }

    /* ── Frames wall ── */
    .gal-wall {
      position: relative;
      z-index: 2;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: flex-start;
      gap: 0 32px;
      padding: 48px 24px 0;
      max-width: 1240px;
      margin: 0 auto;
    }

    /* ── Individual frame slot ── */
    .gal-frame-slot {
      position: relative;
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      /* Start above viewport, animate down */
      transform: translateY(-60px);
      opacity: 0;
      transition:
        transform 900ms cubic-bezier(.16,1,.3,1),
        opacity   700ms ease;
    }
    .gal-frame-slot.in-view {
      transform: translateY(0);
      opacity: 1;
    }

    /* Pendulum sway — looped after entering */
    @keyframes galSway {
      0%,100% { transform: rotate(0deg); }
      25%     { transform: rotate(.9deg); }
      75%     { transform: rotate(-.9deg); }
    }
    .gal-frame-slot.in-view .gal-frame-inner {
      animation: galSway 6s ease-in-out infinite;
      transform-origin: 50% 0%;
    }
    /* Stagger sway phase per frame */
    .gal-frame-slot:nth-child(1) .gal-frame-inner { animation-delay:    0s; }
    .gal-frame-slot:nth-child(2) .gal-frame-inner { animation-delay: -2.1s; }
    .gal-frame-slot:nth-child(3) .gal-frame-inner { animation-delay: -4.3s; }
    .gal-frame-slot:nth-child(4) .gal-frame-inner { animation-delay: -1.6s; }

    .gal-frame-inner {
      position: relative;
      display: block;
      overflow: hidden; /* safety: clips any photo bleed outside container bounds */
    }

    /* The frame PNG overlay — sits on top of photo */
    .gal-frame-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: fill;
      pointer-events: none;
      z-index: 3;
      user-select: none;
      -webkit-user-drag: none;
    }

    /* ─────────────────────────────────────────────────────────
       PHOTO WRAP — arch-polygon clip defines the exact window
       ─────────────────────────────────────────────────────────
       photo-wrap covers the entire frame-inner (inset: 0).
       A clip-path polygon traces the exact transparent arch
       window of each frame PNG, so the photo fills the arch
       shape perfectly — including the pointed/cusped top.
       The frame PNG (z-index 3, on top) overlays the decoration.
       Curtain reveal uses transform: scaleY(0 → 1) from the top.
    ───────────────────────────────────────────────────────── */
    .gal-photo-wrap {
      position: absolute;
      inset: 0;
      overflow: hidden;
      z-index: 1;
      cursor: pointer;
      background: transparent;
      transform: scaleY(0);
      transform-origin: top center;
      transition: transform 900ms cubic-bezier(.16,1,.3,1);
    }
    .gal-frame-slot.in-view .gal-photo-wrap {
      transform: scaleY(1);
    }

    .gal-photo {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 600ms cubic-bezier(.16,1,.3,1);
    }
    .gal-photo-wrap:hover .gal-photo { transform: scale(1.045); }

    /* Placeholder shown when no photo supplied */
    .gal-placeholder {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 10px;
      background: rgba(247,238,220,.08);
      cursor: pointer;
    }
    .gal-placeholder-icon {
      width: 44px; height: 44px;
      border: 1.5px dashed rgba(216,169,87,.45);
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      font-size: 20px;
      color: rgba(216,169,87,.55);
    }
    .gal-placeholder-label {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(.7rem, 2vw, .82rem);
      color: rgba(216,169,87,.45);
      text-align: center;
      padding: 0 12px;
    }
    input.gal-file-input {
      position: absolute;
      inset: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      cursor: pointer;
      z-index: 10;
    }

    /* ── Frame size variants ── */

    /* ── LANDSCAPE  (PNG 1402 × 1122, ratio 80.0%)
       Rectangular inner window with rounded corners.
       Top edge ~36 %, sides ~10/90 %, bottom ~88 %.          ── */
    .gal-slot-landscape { width: clamp(280px, 52vw, 560px); }
    .gal-slot-landscape .gal-frame-inner {
      width: 100%;
      padding-top: 80%; /* PNG natural ratio 1122/1402 */
    }
    .gal-slot-landscape .gal-photo-wrap {
      clip-path: polygon(
        14% 86%,
        16% 88%,
        84% 88%,
        86% 86%,
        86% 38%,
        76% 32%,
        24% 32%,
        14% 38%
      );
    }

    /* ── PORTRAIT  (PNG 1024 × 1536, ratio 150%)
       Rectangular body, gentle arch at top.
       Arch peak ~25 %, spring ~28 %, sides ~14/86 %, bottom ~94 %. ── */
    .gal-slot-portrait { width: clamp(180px, 32vw, 340px); }
    .gal-slot-portrait .gal-frame-inner {
      width: 100%;
      padding-top: 150%; /* PNG natural ratio 1536/1024 */
    }
    .gal-slot-portrait .gal-photo-wrap {
      clip-path: polygon(
        18% 94%,
        82% 94%,
        82% 25%,
        78% 23%,
        65% 21.5%,
        50% 21%,
        35% 21.5%,
        22% 23%,
        18% 25%
      );
    }

    /* ── HERO ARCH  (PNG 1024 × 1536, ratio 150%)
       Rectangular body, gentle arch at top.
       Arch peak ~33 %, spring ~35 %, sides ~15/85 %, bottom ~87 %. ── */
    .gal-slot-hero { width: clamp(200px, 36vw, 380px); }
    .gal-slot-hero .gal-frame-inner {
      width: 100%;
      padding-top: 150%; /* PNG natural ratio 1536/1024 */
    }
    .gal-slot-hero .gal-photo-wrap {
      clip-path: polygon(
        15% 93%,
        85% 93%,
        85% 28%,
        80% 26.5%,
        65% 25.5%,
        50% 25%,
        35% 25.5%,
        20% 26.5%,
        15% 28%
      );
    }

    /* ── Gold dust inside each frame ── */
    .gal-frame-dust {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 2;
    }
    @keyframes galDustRise {
      0%   { opacity:0; transform: translateY(0) translateX(0); }
      15%  { opacity:.65; }
      85%  { opacity:.35; }
      100% { opacity:0; transform: translateY(-40px) translateX(var(--dx,8px)); }
    }
    .gal-dust-dot {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(216,169,87,.85) 0%, rgba(216,169,87,0) 70%);
      animation: galDustRise var(--dur,4s) ease-out var(--del,0s) infinite;
      opacity: 0;
    }

    /* ── Caption beneath frame ── */
    .gal-frame-caption {
      display: none;
    }

    /* ── Lightbox ── */
    .gal-lightbox {
      position: fixed;
      inset: 0;
      z-index: 1000;
      background: rgba(6,13,11,.92);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 320ms ease;
    }
    .gal-lightbox:not([hidden]) { opacity: 1; }
    .gal-lightbox[hidden] { display: none !important; }
    .gal-lb-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      max-width: min(90vw, 900px);
      max-height: 90vh;
      gap: 14px;
    }
    .gal-lb-img {
      max-width: 100%;
      max-height: 80vh;
      object-fit: contain;
      border-radius: 4px;
      box-shadow: 0 32px 80px rgba(0,0,0,.6);
      transform: scale(.92);
      opacity: 0;
      transition: transform 400ms cubic-bezier(.16,1,.3,1), opacity 300ms ease;
    }
    .gal-lightbox:not([hidden]) .gal-lb-img {
      transform: scale(1);
      opacity: 1;
    }
    .gal-lb-caption {
      font-family: var(--display);
      font-style: italic;
      color: rgba(247,238,220,.55);
      font-size: .88rem;
      letter-spacing: .06em;
    }
    .gal-lb-close, .gal-lb-prev, .gal-lb-next {
      position: fixed;
      background: rgba(247,238,220,.10);
      border: 0.5px solid rgba(247,238,220,.18);
      color: var(--ivory);
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background 200ms ease, transform 200ms ease;
      font-family: var(--display);
    }
    .gal-lb-close:hover, .gal-lb-prev:hover, .gal-lb-next:hover {
      background: rgba(216,169,87,.22);
      transform: scale(1.08);
    }
    .gal-lb-close {
      top: 20px; right: 20px;
      width: 42px; height: 42px;
      font-size: 16px;
    }
    .gal-lb-prev, .gal-lb-next {
      top: 50%; transform: translateY(-50%);
      width: 48px; height: 48px;
      font-size: 28px;
      line-height: 1;
    }
    .gal-lb-prev { left: 16px; }
    .gal-lb-next { right: 16px; }
    .gal-lb-prev:hover { transform: translateY(-50%) scale(1.08); }
    .gal-lb-next:hover { transform: translateY(-50%) scale(1.08); }

    /* Hide nav arrows when only 1 photo */
    .gal-lightbox.single .gal-lb-prev,
    .gal-lightbox.single .gal-lb-next { display: none; }

    /* ── Responsive ── */
    @media (max-width: 860px) {
      .gal-wall { gap: 0 18px; padding-top: 32px; }
      .gal-slot-landscape { width: clamp(240px, 80vw, 420px); }
      .gal-slot-portrait  { width: clamp(140px, 40vw, 240px); }
      .gal-slot-hero      { width: clamp(160px, 44vw, 260px); }
    }
    @media (max-width: 560px) {
      .gal-wall { flex-direction: column; align-items: center; gap: 24px 0; }
      .gal-slot-landscape,
      .gal-slot-portrait,
      .gal-slot-hero { width: min(88vw, 360px); }
      .gal-slot-landscape .gal-frame-inner { padding-top: 80%; }  /* PNG ratio 1122/1402 */
      .gal-slot-portrait  .gal-frame-inner { padding-top: 150%; } /* PNG ratio 1536/1024 */
      .gal-slot-hero      .gal-frame-inner { padding-top: 150%; } /* PNG ratio 1536/1024 */
    }

    /* ═══════════════════════════════════════════════════
       THINGS TO KNOW — Pichwai Guest Info Board
    ═══════════════════════════════════════════════════ */
    .ttk-section {
      position: relative;
      overflow: hidden;
      padding: clamp(52px,11svh,100px) 0 clamp(52px,10svh,90px);
      background:
        radial-gradient(ellipse 80% 45% at 15% 10%,  rgba(194,64,96,.55), transparent 65%),
        radial-gradient(ellipse 70% 45% at 85% 90%,  rgba(110,20,45,.65), transparent 65%),
        radial-gradient(ellipse 60% 35% at 50% 50%,  rgba(140,30,55,.30), transparent 70%),
        linear-gradient(160deg, #bf3e5e 0%, #a6384f 35%, #8e2f42 65%, #70202f 100%);
      color: var(--ivory);
      isolation: isolate;
    }

    /* Shimmer veil — warm golden haze top + cool forest shadow bottom */
    .ttk-section::before {
      content: '';
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 100% 40% at 50% 0%,   rgba(247,238,220,.09), transparent 70%),
        radial-gradient(ellipse 80% 30%  at 50% 100%, rgba(20, 40, 30, .28),  transparent 80%);
    }

    /* Ambient pattern texture — subtle crosshatch at very low opacity */
    .ttk-section::after {
      content: '';
      position: absolute; inset: 0; z-index: 0; pointer-events: none;
      background-image:
        repeating-linear-gradient(45deg,  rgba(216,169,87,.025) 0px, rgba(216,169,87,.025) 1px, transparent 1px, transparent 28px),
        repeating-linear-gradient(-45deg, rgba(216,169,87,.025) 0px, rgba(216,169,87,.025) 1px, transparent 1px, transparent 28px);
    }

    /* Gold border lines — top and bottom */
    .ttk-border-top, .ttk-border-bot {
      position: absolute; left: 0; right: 0; z-index: 1;
      height: 3px; pointer-events: none;
      background: linear-gradient(90deg,
        transparent 0%, rgba(216,169,87,.50) 18%,
        rgba(247,238,220,.85) 50%, rgba(216,169,87,.50) 82%, transparent 100%);
    }
    .ttk-border-top { top: 0; }
    .ttk-border-bot { bottom: 0; }

    /* ── Pichwai animal motif backdrop ── */
    .ttk-motif-layer {
      position: absolute; inset: 0;
      z-index: 1; pointer-events: none; overflow: hidden;
    }
    .ttk-motif {
      position: absolute;
      object-fit: contain;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      /* Ivory-gold tinted silhouette */
      filter: brightness(3.5) sepia(0.6) saturate(0.4) hue-rotate(-10deg);
    }

    /* PEACOCK — majestic centrepiece at the bottom, tail fanning upward */
    .ttk-motif--peacock {
      bottom: -6%;
      left: 50%;
      transform: translateX(-50%);
      width: clamp(260px, 68vw, 440px);
      opacity: 0.11;
    }

    /* LEFT ELEPHANT — faces right, anchors left side */
    .ttk-motif--elephant-l {
      left: -6%;
      bottom: 8%;
      width: clamp(120px, 26vw, 190px);
      opacity: 0.14;
      transform: scaleX(1);
    }

    /* RIGHT ELEPHANT — mirrored, anchors right side */
    .ttk-motif--elephant-r {
      right: -6%;
      bottom: 8%;
      width: clamp(120px, 26vw, 190px);
      opacity: 0.14;
      transform: scaleX(-1);
    }

    /* COW — small, placed near top-right as a blessing motif */
    .ttk-motif--cow {
      top: 8%;
      right: 3%;
      width: clamp(70px, 14vw, 105px);
      opacity: 0.10;
    }

    .ttk-inner {
      position: relative; z-index: 2;
      width: min(560px, 92vw);
      margin: 0 auto;
    }
    .ttk-header {
      text-align: center;
      margin-bottom: clamp(28px,5vw,44px);
    }
    .ttk-eyebrow {
      font-family: var(--display);
      font-size: clamp(.78rem, 2.2vw, .91rem);
      font-weight: 700; letter-spacing: .26em; text-transform: uppercase;
      color: rgba(240,200,106,.75);
      display: block; margin-bottom: 8px;
    }
    .ttk-heading {
      font-family: var(--script);
      font-size: clamp(2.2rem, 7vw, 3.0rem);
      font-weight: 400; color: var(--ivory); line-height: 1.1;
      margin-bottom: 0px;
      text-shadow:
        0 2px 18px rgba(62,43,34,.35),
        0 0  40px rgba(216,169,87,.18);
    }
    /* Ornament: dual lines flanking a lotus SVG + diamond dots */
    .ttk-ornament {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin: 12px 0 10px;
    }
    .ttk-ornament span {
      height: 1px; width: clamp(28px,7vw,48px);
      background: linear-gradient(90deg, transparent, rgba(240,200,106,.80));
    }
    .ttk-ornament span:last-child {
      background: linear-gradient(90deg, rgba(240,200,106,.80), transparent);
    }
    /* Diamond dots flanking the lotus */
    .ttk-ornament i {
      display: block; width: 4px; height: 4px;
      border-radius: 1px;
      background: rgba(240,200,106,.85);
      transform: rotate(45deg);
    }
    .ttk-lotus-divider {
      width: clamp(30px, 8vw, 40px);
      height: auto;
      object-fit: contain;
      opacity: .80;
      filter: brightness(2.2) sepia(.3) saturate(.6);
      pointer-events: none; user-select: none;
    }
    .ttk-subline {
      font-family: var(--display); font-style: italic;
      font-size: clamp(1.07rem, 2.9vw, 1.22rem);
      color: rgba(247,238,220,.72); line-height: 1.55;
      letter-spacing: .01em;
    }

    /* ── Grid — 2-col mobile, odd-last centred ── */
    .ttk-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: clamp(10px, 3vw, 16px);
    }
    .ttk-grid--single {
      grid-template-columns: minmax(0, 220px);
      justify-content: center;
    }
    .ttk-card--last-odd {
      grid-column: 1 / -1;
      max-width: calc(50% - clamp(5px,1.5vw,8px));
      justify-self: center;
    }

    /* ── Card ── */
    .ttk-card {
      position: relative;
      display: flex; flex-direction: column;
      align-items: center; text-align: center;
      padding: clamp(22px,5vw,30px) clamp(13px,3vw,20px) clamp(20px,4vw,26px);
      border-radius: 16px;
      /* Layered parchment: warm ivory base with a faint rose-gold inner glow */
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(255,240,210,.55) 0%, transparent 70%),
        linear-gradient(170deg, #fef9f0 0%, #f8ecd6 55%, #f1e0c2 100%);
      border: 1.5px solid rgba(216,169,87,.48);
      box-shadow:
        0 1px 0  rgba(255,255,255,.90),         /* top highlight */
        0 3px 0  rgba(216,169,87,.18),           /* amber lift */
        0 10px 28px rgba(62,43,34,.20),          /* depth shadow */
        inset 0 0 0 1px rgba(255,255,255,.55);  /* inner glow edge */

      /* Start state — tilted, off-screen below */
      opacity: 0;
      transform: translateY(36px) rotate(-1.5deg) scale(.93);
      transition:
        opacity  700ms cubic-bezier(.16,1,.3,1),
        transform 800ms cubic-bezier(.16,1,.3,1),
        box-shadow 240ms ease;
    }

    /* Alternate cards tilt the other way */
    .ttk-card:nth-child(even) {
      transform: translateY(36px) rotate(1.5deg) scale(.93);
    }

    /* Ornamental corner brackets */
    .ttk-card::before, .ttk-card::after {
      content: ''; position: absolute;
      width: 16px; height: 16px; pointer-events: none;
    }
    .ttk-card::before {
      top: 6px; left: 6px;
      border-top: 1.5px solid rgba(216,169,87,.55);
      border-left: 1.5px solid rgba(216,169,87,.55);
      border-radius: 4px 0 0 0;
    }
    .ttk-card::after {
      bottom: 6px; right: 6px;
      border-bottom: 1.5px solid rgba(216,169,87,.55);
      border-right: 1.5px solid rgba(216,169,87,.55);
      border-radius: 0 0 4px 0;
    }

    .ttk-card:hover {
      transform: translateY(-4px) rotate(0deg) scale(1.02) !important;
      box-shadow:
        0 1px 0  rgba(255,255,255,.95),
        0 3px 0  rgba(216,169,87,.24),
        0 22px 44px rgba(62,43,34,.26),
        inset 0 0 0 1px rgba(255,255,255,.70);
    }

    /* ── Landed state — cards settle straight ── */
    .ttk-card.in-view {
      opacity: 1;
      transform: translateY(0) rotate(0deg) scale(1);
    }

    /* ── Icon — bigger, spring entrance, idle float ── */
    .ttk-card-icon-wrap {
      position: relative;
      display: flex; align-items: center; justify-content: center;
      width: clamp(64px, 18vw, 80px);
      height: clamp(64px, 18vw, 80px);
      margin-bottom: 10px;
      flex-shrink: 0;
    }

    /* Soft amber glow ring behind the icon */
    .ttk-card-icon-wrap::before {
      content: '';
      position: absolute; inset: -4px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(216,169,87,.18) 0%, transparent 70%);
      opacity: 0;
      transform: scale(.7);
      transition: opacity 600ms ease, transform 600ms ease;
    }
    .ttk-card.in-view .ttk-card-icon-wrap::before {
      opacity: 1; transform: scale(1);
      transition-delay: 400ms;
    }

    .ttk-card-icon {
      width: 100%; height: 100%;
      object-fit: contain;
      display: block;
      filter: drop-shadow(0 3px 8px rgba(62,43,34,.18));

      /* Start: squashed, invisible */
      opacity: 0;
      transform: scale(.3) translateY(8px);
      transition: none;
    }

    /* Icon springs in after card lands */
    .ttk-card.in-view .ttk-card-icon {
      opacity: 1;
      transform: scale(1) translateY(0);
      transition:
        opacity  500ms ease,
        transform 700ms cubic-bezier(.34,1.56,.64,1); /* spring overshoot */
      transition-delay: 200ms;
    }

    /* Idle float — starts after spring settles */
    @keyframes ttkIconFloat {
      0%, 100% { transform: translateY(0px) scale(1);     }
      45%      { transform: translateY(-6px) scale(1.03); }
      75%      { transform: translateY(-3px) scale(1.01); }
    }
    .ttk-card.in-view .ttk-card-icon {
      animation: ttkIconFloat 4.2s ease-in-out 1.0s infinite;
      /* Override transition after spring — animation takes over */
    }

    /* Keep spring in only during the very first reveal,
       then let animation run. We use the transition to get there. */
    .ttk-card-icon.icon-sprung {
      transition: none !important;
    }

    /* Stagger float timing per card so they don't all move together */
    .ttk-card:nth-child(1) .ttk-card-icon { animation-delay: 1.0s; }
    .ttk-card:nth-child(2) .ttk-card-icon { animation-delay: 1.4s; }
    .ttk-card:nth-child(3) .ttk-card-icon { animation-delay: 1.7s; }
    .ttk-card:nth-child(4) .ttk-card-icon { animation-delay: 2.1s; }
    .ttk-card:nth-child(5) .ttk-card-icon { animation-delay: 1.2s; }
    .ttk-card:nth-child(6) .ttk-card-icon { animation-delay: 1.6s; }

    .ttk-card-rule {
      width: 34px; height: 1px; flex-shrink: 0; margin-bottom: 8px;
      background: linear-gradient(90deg,
        transparent,
        rgba(216,169,87,.80) 30%,
        rgba(240,200,106,.90) 50%,
        rgba(216,169,87,.80) 70%,
        transparent);
      transform: scaleX(0);
      transform-origin: center;
      transition: transform 550ms cubic-bezier(.16,1,.3,1);
    }
    .ttk-card.in-view .ttk-card-rule {
      transform: scaleX(1);
      transition-delay: 350ms;
    }

    .ttk-card-title {
      font-family: var(--display);
      font-size: clamp(.83rem, 2.3vw, .96rem);
      font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
      /* Warm rose-crimson against ivory card */
      color: #8b2a3d;
      line-height: 1.2; margin-bottom: 5px;

      opacity: 0; transform: translateY(6px);
      transition: opacity 500ms ease, transform 500ms cubic-bezier(.16,1,.3,1);
    }
    .ttk-card.in-view .ttk-card-title {
      opacity: 1; transform: translateY(0);
      transition-delay: 420ms;
    }

    .ttk-card-body {
      font-family: var(--display); font-style: italic;
      font-size: clamp(.98rem, 2.6vw, 1.12rem);
      color: #3e2b22; opacity: 0; line-height: 1.48;
      white-space: pre-line;
      transform: translateY(6px);
      transition: opacity 500ms ease, transform 500ms cubic-bezier(.16,1,.3,1);
    }
    .ttk-card.in-view .ttk-card-body {
      opacity: .82; transform: translateY(0);
      transition-delay: 500ms;
    }

    .ttk-card-link {
      display: inline-block; margin-top: 8px;
      font-family: var(--display); font-style: italic;
      font-size: clamp(.63rem,1.7vw,.72rem);
      color: #8b2a3d; text-decoration: none;
      opacity: 0; transform: translateY(4px);
      transition: opacity .3s ease, transform .3s ease;
    }
    .ttk-card.in-view .ttk-card-link {
      opacity: .70; transform: translateY(0);
      transition-delay: 580ms;
    }
    .ttk-card-link:hover { opacity: 1 !important; text-decoration: underline; }

    @media (prefers-reduced-motion: reduce) {
      .ttk-card {
        opacity: 1 !important; transform: none !important;
        transition: none !important; animation: none !important;
      }
      .ttk-card-icon, .ttk-card-rule, .ttk-card-title,
      .ttk-card-body, .ttk-card-link {
        opacity: 1 !important; transform: none !important;
        transition: none !important; animation: none !important;
      }
      .ttk-card-icon-wrap::before { opacity: 1 !important; transform: scale(1) !important; }
    }

    .rsvp-section {
      min-height: 72svh; display: grid; place-items: center;
      background:
        radial-gradient(circle at 50% 30%, rgba(216,169,87,.18), transparent 15rem),
        linear-gradient(160deg, var(--leaf-dark), #16231f);
      color: var(--ivory); text-align: center;
    }
    .rsvp-card {
      width: min(720px,100%); padding: clamp(34px,7vw,70px);
      border: 1px solid rgba(247,238,220,.18); border-radius: 34px;
      background: rgba(247,238,220,.07); backdrop-filter: blur(10px);
      box-shadow: 0 22px 70px rgba(31,51,41,.22);
    }
    .rsvp-card h2 { font-size: clamp(3rem,9vw,6.4rem); line-height: .9; }

    /* ── Floating nav — Pichwai compass, bottom-right ── */
    .floating-menu {
      position: fixed; right: 6px; bottom: 18px; z-index: 100;
      display: none;
      flex-direction: column;
      align-items: flex-end;
      gap: 2px;
    }
    .floating-menu.is-visible { display: flex; }

    /* ── Music toggle button — inline with compass ── */
    .music-toggle {
      position: relative; z-index: 2;
      width: 101px; height: 101px;
      background: none; border: none;
      padding: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 3px 12px rgba(0,0,0,.50))
              drop-shadow(0 0 8px rgba(216,169,87,.18));
      transition: filter .3s ease, opacity .3s ease;
      opacity: .52; /* dimmed when paused */
      margin-right: -12px; /* shift right towards screen edge */
      margin-bottom: -18px; /* pull down closer to compass */
    }
    .music-toggle.is-playing {
      opacity: 1;
      filter: drop-shadow(0 3px 14px rgba(0,0,0,.52))
              drop-shadow(0 0 18px rgba(216,169,87,.52));
    }
    .music-toggle:hover {
      filter: drop-shadow(0 4px 18px rgba(0,0,0,.60))
              drop-shadow(0 0 22px rgba(216,169,87,.44));
      opacity: .85;
    }
    .music-toggle.is-playing:hover { opacity: 1; }

    /* Music icon image — spins slowly while playing */
    .music-icon-img {
      width: 101px; height: 101px;
      object-fit: contain;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
      transition: transform .3s ease;
    }
    .music-toggle.is-playing .music-icon-img {
      animation: musicSpin 8s linear infinite;
    }
    @keyframes musicSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* ring removed — new icon is self-contained, no CSS border needed */
    @keyframes musicRingPulse {
      0%, 100% { opacity: .7; transform: scale(1);    }
      50%       { opacity: 1;  transform: scale(1.08); }
    }

    /* ── Compass toggle button ── */
    .menu-toggle {
      position: relative; z-index: 2;
      width: 72px; height: 72px;
      background: none; border: none;
      padding: 0; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      filter: drop-shadow(0 4px 18px rgba(0,0,0,.52))
              drop-shadow(0 0 12px rgba(216,169,87,.22));
      transition: filter .3s ease;
    }
    .menu-toggle:hover {
      filter: drop-shadow(0 4px 22px rgba(0,0,0,.60))
              drop-shadow(0 0 22px rgba(216,169,87,.44));
    }

    /* Compass image — slow continuous rotation */
    .compass-img {
      width: 72px; height: 72px;
      object-fit: contain;
      border-radius: 50%;
      animation: compassSpin 24s linear infinite;
      transform-origin: center;
      pointer-events: none; user-select: none; -webkit-user-drag: none;
    }
    /* Pause spin while menu is open — gives a "settled" feel */
    .floating-menu.is-open .compass-img {
      animation-play-state: paused;
    }
    @keyframes compassSpin {
      from { transform: rotate(0deg); }
      to   { transform: rotate(360deg); }
    }

    /* ── Circular Pichwai menu panel ── */
    .menu-panel {
      position: absolute;
      /* Centre the circle above-left of the compass button */
      bottom: 80px;
      right: -28px;
      width: 280px; height: 280px;
      border-radius: 50%;
      overflow: hidden;
      display: flex; flex-direction: column;
      align-items: center; justify-content: center;
      gap: 0;
      /* Invisible until open */
      opacity: 0;
      transform: scale(.72) translateY(20px);
      transform-origin: bottom right;
      pointer-events: none;
      transition: opacity .34s cubic-bezier(.16,1,.3,1),
                  transform .38s cubic-bezier(.16,1,.3,1);
      /* Subtle outer ring */
      box-shadow:
        0 0 0 2.5px rgba(216,169,87,.55),
        0 0 0 5px rgba(216,169,87,.18),
        0 22px 56px rgba(0,0,0,.52);
    }
    .floating-menu.is-open .menu-panel {
      opacity: 1;
      transform: scale(1) translateY(0);
      pointer-events: auto;
    }

    /* Pichwai background image fills the circle */
    .menu-bg-circle {
      position: absolute; inset: 0;
      border-radius: 50%;
      overflow: hidden;
    }
    .menu-bg-img {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      pointer-events: none; user-select: none;
    }
    /* Slight dark overlay so text is legible over the illustration */
    .menu-bg-circle::after {
      content: "";
      position: absolute; inset: 0;
      border-radius: 50%;
      background: rgba(10,4,8,.38);
    }

    /* "Navigation" heading at the top */
    .menu-nav-header {
      position: relative; z-index: 2;
      font-family: var(--display);
      font-size: .62rem;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: rgba(247,238,220,.55);
      margin-bottom: 2px;
    }

    /* Lotus motif below heading */
    .menu-lotus-top {
      position: relative; z-index: 2;
      margin-bottom: 4px;
      opacity: .72;
    }

    /* Navigation links column */
    .menu-links {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      align-items: center; width: 100%;
    }
    .menu-link {
      display: block;
      width: 100%; text-align: center;
      padding: 5px 0;
      color: rgba(247,238,220,.92);
      font-family: var(--display);
      font-size: clamp(.88rem, 2.5vw, 1rem);
      letter-spacing: .08em;
      text-decoration: none;
      transition: color .18s ease, letter-spacing .18s ease;
      white-space: nowrap;
    }
    .menu-link:hover {
      color: var(--amber-lit);
      letter-spacing: .14em;
    }

    /* Gold hairline divider between links */
    .menu-divider {
      position: relative; z-index: 2;
      width: 52px; height: 1px;
      background: linear-gradient(90deg,
        transparent,
        rgba(216,169,87,.55) 30%,
        rgba(216,169,87,.55) 70%,
        transparent);
      margin: 0 auto;
      flex-shrink: 0;
    }

    /* Reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .evt-header .evt-eyebrow,
      .evt-header .evt-title,
      .evt-header .evt-divider { opacity: 1 !important; animation: none !important; }
      .evt-path-wrap { display: none !important; }
      .evt-stop { opacity: 1 !important; transform: none !important; transition: none !important; }
      .evt-stop.in-view .evt-stop-motif { animation: none !important; }
    }

    @media (max-width: 900px) {
    }
    @media (max-width: 620px) {
      .invite-arch-frame {
        height: auto;
        width: 125vw;
        max-width: 125vw;
      }
      .invite-text-content {
        max-width: min(300px, 76vw);
        top: 14%;
        bottom: 6%;
      }
      .inv-cta { bottom: 4%; }
      .inv-names { font-size: clamp(3.4rem, 11vw, 4.5rem); }
      .inv-overline { font-size: .81rem; }
      .inv-blessing p:not(.inv-overline) { font-size: .98rem; }
      .inv-kicker { font-size: .95rem; }
      .inv-parents { font-size: 1.00rem; }
      .inv-occasion { font-size: 1.06rem; }
      .inv-venue { font-size: 1.18rem; }
      .inv-date { font-size: 1.57rem; }
      .inv-lotus-div { width: clamp(60px, 17vw, 90px); margin: 0.1rem auto; }
      .inv-blessing { margin-bottom: 0.2rem; padding-bottom: 0.3rem; }
      .inv-blessing-alt { margin-bottom: 0.2rem; padding-bottom: 0.3rem; }
      .inv-kicker { margin-bottom: 0.1rem; }
      .inv-parents { margin-bottom: 0.2rem; }
      .inv-occasion { margin-bottom: 0.25rem; }
      .inv-meta { padding-top: 0.25rem; }
    }

    /* ══════════════════════════════════════════════════════════
       FARMAN EVENT CARDS — Royal Scroll Design
       Replaces the arch-plaque .evt-stop system
    ══════════════════════════════════════════════════════════ */

    /* Override container for centred farman column */
    .evt-stops {
      align-items: center;
      gap: clamp(32px, 8svh, 72px);
      padding-bottom: clamp(40px, 8svh, 90px);
    }

    /* ── Farman outer container ── */
    .farman-stop {
      position: relative;
      width: min(480px, 92vw);
      align-self: center;
    }

    /* ─────────────────────────────────
       ROLLED SCROLL — initial / entering state
    ───────────────────────────────── */
    .farman-rolled-wrap {
      position: absolute;
      top: 50%;
      left: 50%;
      /* Rolled scroll is landscape — slightly wider than the open farman */
      width: 120%;
      z-index: 3;
      pointer-events: none;
      transform: translate(-50%, -50%) translateY(28px);
      opacity: 0;
      transform-origin: center center;
      transition:
        opacity  260ms cubic-bezier(.16,1,.3,1),
        transform 300ms cubic-bezier(.16,1,.3,1);
    }

    /* Phase 1 — rolled scroll rises into view */
    .farman-stop.is-entering .farman-rolled-wrap {
      opacity: 1;
      transform: translate(-50%, -50%) translateY(0);
      animation: farmanRolledFloat 3.6s ease-in-out 0.7s infinite;
    }

    @keyframes farmanRolledFloat {
      0%,100% { transform: translate(-50%, -50%) translateY(0); }
      44%     { transform: translate(-50%, -50%) translateY(-10px); }
      72%     { transform: translate(-50%, -50%) translateY(-4px); }
    }

    /* Phase 2 — rolled squishes flat as the farman opens */
    .farman-stop.is-unrolling .farman-rolled-wrap,
    .farman-stop.is-open     .farman-rolled-wrap {
      opacity: 0;
      animation: none;
      transform: translate(-50%, -50%) scaleY(0.12) translateY(10px);
      transition:
        opacity  500ms ease 0ms,
        transform 600ms cubic-bezier(.4,0,.6,1) 0ms;
    }

    .farman-rolled-img {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      filter: drop-shadow(0 12px 28px rgba(62,43,34,.32));
    }

    /* ─────────────────────────────────
       OPEN FARMAN — unrolls on scroll
    ───────────────────────────────── */
    .farman-open-wrap {
      position: relative;
      width: 100%;
      clip-path: inset(0 0 100% 0 round 2px);
      /* Shorter duration — snappier on mobile */
      transition: -webkit-clip-path 860ms cubic-bezier(.4,0,.2,1) 60ms, clip-path 860ms cubic-bezier(.4,0,.2,1) 60ms;
      /* NO filter here — drop-shadow + animated clip-path forces a full
         repaint every frame on mobile, causing visible stutter.
         Filter is applied only after animation completes (is-open). */
      will-change: clip-path;
      transform: translateZ(0); /* own compositing layer */
    }

    .farman-stop.is-unrolling .farman-open-wrap {
      clip-path: inset(0 0 0% 0 round 2px);
    }
    .farman-stop.is-open .farman-open-wrap {
      clip-path: inset(0 0 0% 0 round 2px);
      transition: none;
      /* Shadow applied only after clip-path animation is fully done */
      filter:
        drop-shadow(0 22px 48px rgba(62,43,34,.22))
        drop-shadow(0 4px 12px rgba(62,43,34,.12));
    }

    .farman-parchment-img {
      display: block;
      width: 100%;
      height: auto;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
    }

    /* ─────────────────────────────────
       FARMAN CONTENT — centred over parchment
    ───────────────────────────────── */
    .farman-content {
      position: absolute;
      top: 8%; bottom: 12%;
      left: 10%; right: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      padding-top: 6%;
      padding-bottom: 4%;
      text-align: center;
      gap: 0;
      overflow: hidden;
      pointer-events: none;
      /* Hide entire content block until farman is fully open —
         this prevents the clip-path sweep from revealing partial text */
      visibility: hidden;
    }
    .farman-stop.is-unrolling .farman-content,
    .farman-stop.is-open .farman-content {
      visibility: visible;
      pointer-events: auto;
    }

    /* ─────────────────────────────────
       Content items — start invisible,
       animate in together once is-open fires
    ───────────────────────────────── */
    .farman-motif,
    .farman-name,
    .farman-rule,
    .farman-datetime,
    .farman-venue,
    .farman-note,
    .farman-map,
    .farman-map-rule {
      opacity: 0;
    }

    @keyframes farmanMotifIn {
      from { opacity: 0; transform: scale(.82) translateY(8px); }
      to   { opacity: 1; transform: scale(1) translateY(0); }
    }
    @keyframes farmanTextIn {
      from { opacity: 0; transform: translateY(12px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    /* Floating glow shimmer on motif after it appears */
    @keyframes farmanMotifFloat {
      0%,100% { filter: drop-shadow(0 6px 18px rgba(166,56,79,.22)) drop-shadow(0 0 0px rgba(216,169,87,0)); }
      50%     { filter: drop-shadow(0 10px 28px rgba(166,56,79,.18)) drop-shadow(0 0 22px rgba(216,169,87,.30)); }
    }
    /* Gold dust particles floating inside the farman */
    @keyframes farmanDustRise {
      0%   { opacity: 0; transform: translateY(0) translateX(0) scale(1); }
      20%  { opacity: .7; }
      80%  { opacity: .4; }
      100% { opacity: 0; transform: translateY(-38px) translateX(var(--dx,6px)) scale(.5); }
    }

    /* Motif fades in as the scroll unrolls — pre-filled feel */
    .farman-stop.is-unrolling .farman-motif,
    .farman-stop.is-open .farman-motif {
      animation:
        farmanMotifIn   500ms cubic-bezier(.4,0,.2,1) 200ms both,
        farmanMotifFloat 3.8s ease-in-out 900ms infinite;
    }
    /* Text staggers in gently as scroll opens — content feels inscribed */
    .farman-stop.is-unrolling .farman-name,
    .farman-stop.is-open .farman-name     { animation: farmanTextIn 420ms cubic-bezier(.4,0,.2,1) 300ms both; }
    .farman-stop.is-unrolling .farman-rule,
    .farman-stop.is-open .farman-rule     { animation: farmanTextIn 380ms cubic-bezier(.4,0,.2,1) 420ms both; }
    .farman-stop.is-unrolling .farman-datetime,
    .farman-stop.is-open .farman-datetime { animation: farmanTextIn 380ms cubic-bezier(.4,0,.2,1) 500ms both; }
    .farman-stop.is-unrolling .farman-venue,
    .farman-stop.is-open .farman-venue    { animation: farmanTextIn 360ms cubic-bezier(.4,0,.2,1) 580ms both; }
    .farman-stop.is-unrolling .farman-note,
    .farman-stop.is-open .farman-note     { animation: farmanTextIn 340ms cubic-bezier(.4,0,.2,1) 650ms both; }
    .farman-stop.is-unrolling .farman-map,
    .farman-stop.is-open .farman-map      { animation: farmanTextIn 320ms cubic-bezier(.4,0,.2,1) 720ms both; }
    .farman-stop.is-unrolling .farman-map-rule,
    .farman-stop.is-open .farman-map-rule { animation: farmanTextIn 300ms cubic-bezier(.4,0,.2,1) 760ms both; }

    /* ─────────────────────────────────
       Gold dust particles inside farman
    ───────────────────────────────── */
    .farman-dust-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      border-radius: 2px;
    }
    .farman-dust-dot {
      position: absolute;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(216,169,87,.9) 0%, rgba(216,169,87,0) 70%);
      animation: farmanDustRise var(--dur, 4s) ease-out var(--del, 0s) infinite;
      opacity: 0;
    }

    /* ─────────────────────────────────
       Typography inside the farman
    ───────────────────────────────── */
    .farman-motif {
      width: clamp(140px, 44%, 220px);
      height: clamp(140px, 44%, 220px);
      object-fit: contain;
      flex-shrink: 0;
      margin-top: -18px;
      margin-bottom: 2px;
    }

    .farman-name {
      font-family: var(--script);
      font-size: clamp(3.1rem, 9.8vw, 4.5rem);
      color: var(--rose-dark);
      line-height: 1;
      margin: 0 0 2px;
      letter-spacing: .01em;
    }

    .farman-rule {
      width: clamp(60px, 16vw, 90px);
      height: 1px;
      flex-shrink: 0;
      margin: 8px 0;
      background: linear-gradient(90deg,
        transparent,
        rgba(216,169,87,.80) 30%,
        rgba(216,169,87,.80) 70%,
        transparent);
    }

    .farman-datetime {
      font-family: var(--display);
      font-size: clamp(1.09rem, 3.4vw, 1.4rem);
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: var(--rose);
      margin: 0;
      line-height: 1.2;
    }

    .farman-venue {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(1.23rem, 3.8vw, 1.54rem);
      color: var(--ink);
      opacity: .78;
      margin: 4px 0 0;
      line-height: 1.3;
    }

    .farman-note {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(1.04rem, 3.1vw, 1.26rem);
      color: var(--ink);
      opacity: .62;
      max-width: 82%;
      margin: 4px auto 0;
      line-height: 1.34;
    }

    /* Gold rule drawn below the maps link */
    .farman-map-rule {
      width: clamp(50px, 14vw, 72px);
      height: 1px;
      flex-shrink: 0;
      margin: 6px 0 0;
      background: linear-gradient(90deg,
        transparent,
        rgba(216,169,87,.55) 30%,
        rgba(216,169,87,.55) 70%,
        transparent);
    }

    .farman-map {
      display: inline-block;
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(.98rem, 2.9vw, 1.18rem);
      color: var(--rose-dark);
      text-decoration: none;
      opacity: .62;
      margin-top: 10px;
      pointer-events: auto;
      transition: opacity .22s ease;
    }
    .farman-map:hover { opacity: 1; }

    /* ─────────────────────────────────
       Farman awaiting — scroll-lock state
       Pulses gently to say "wait for it"
    ───────────────────────────────── */
    @keyframes farmanAwaitPulse {
      0%, 100% { filter: drop-shadow(0 22px 48px rgba(62,43,34,.22)) drop-shadow(0 4px 12px rgba(62,43,34,.12)); }
      50%       { filter: drop-shadow(0 22px 48px rgba(62,43,34,.22)) drop-shadow(0 4px 12px rgba(62,43,34,.12)) drop-shadow(0 0 32px rgba(216,169,87,.28)); }
    }
    .farman-stop.farman-awaiting .farman-open-wrap {
      animation: farmanAwaitPulse 2.2s ease-in-out infinite;
    }

    /* ─────────────────────────────────
       Between-farman ornamental divider
    ───────────────────────────────── */
    .farman-inter {
      align-self: center;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 700ms ease;
    }
    .farman-inter.in-view { opacity: 1; }

    /* ─────────────────────────────────
       Reduced motion overrides
    ───────────────────────────────── */
    @media (prefers-reduced-motion: reduce) {
      .farman-rolled-wrap                   { display: none !important; }
      .farman-open-wrap                     { clip-path: none !important; transition: none !important; }
      .farman-content                       { visibility: visible !important; }
      .farman-stop .farman-motif,
      .farman-stop .farman-name,
      .farman-stop .farman-rule,
      .farman-stop .farman-datetime,
      .farman-stop .farman-venue,
      .farman-stop .farman-note,
      .farman-stop .farman-map,
      .farman-stop .farman-map-rule {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
      }
    }
    /* ═══════════════════════════════════════════════════════════════
       RSVP — Royal Night Finale
       Full-bleed cinematic section, immersive, mobile-first
    ═══════════════════════════════════════════════════════════════ */

    /* ── Section shell ── */
    .rsvp-section {
      position: relative;
      min-height: 100svh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      overflow: hidden;
      isolation: isolate;
    }

    /* ── Background image ── */
    .rsvp-bg {
      position: absolute;
      inset: 0;
      background-image: url("assets/rsvp/pn-rsvp-bg-royal-finale-m-v01.webp");
      background-size: cover;
      background-position: center center;
      background-repeat: no-repeat;
      z-index: 0;
      transform: scale(1.03);
      transition: transform 14s ease-out;
    }
    .rsvp-section.rsvp-alive .rsvp-bg {
      transform: scale(1.00);
    }

    /* ── Readability veil — lets sky breathe, anchors text ── */
    .rsvp-veil {
      position: absolute;
      inset: 0;
      z-index: 1;
      pointer-events: none;
      background:
        linear-gradient(180deg,
          rgba(6,13,11,0.10) 0%,
          rgba(6,13,11,0.30) 40%,
          rgba(6,13,11,0.72) 72%,
          rgba(6,13,11,0.88) 100%),
        radial-gradient(ellipse 78% 52% at 50% 38%,
          rgba(8, 14, 30, .36) 0%,
          transparent 70%);
    }

    /* ── Fireworks canvas ── */
    .rsvp-fireworks-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
    }


    /* ── Lamp glows ── */
    .rsvp-lamp-glows {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none;
    }
    .rsvp-lamp {
      position: absolute;
      border-radius: 50%;
      pointer-events: none;
    }
    /* Left palace lamp */
    .rsvp-lamp--l {
      left: 10%; bottom: 36%;
      width: 80px; height: 80px;
      background: radial-gradient(circle, rgba(240,190,80,.28) 0%, transparent 72%);
      animation: lampPulse 4.8s ease-in-out infinite;
    }
    /* Right palace lamp */
    .rsvp-lamp--r {
      right: 10%; bottom: 36%;
      width: 80px; height: 80px;
      background: radial-gradient(circle, rgba(240,190,80,.26) 0%, transparent 72%);
      animation: lampPulse 5.2s ease-in-out .6s infinite;
    }
    /* Centre-left lamp */
    .rsvp-lamp--cl {
      left: 26%; bottom: 28%;
      width: 56px; height: 56px;
      background: radial-gradient(circle, rgba(240,190,80,.20) 0%, transparent 72%);
      animation: lampPulse 6.1s ease-in-out 1.1s infinite;
    }
    /* Centre-right lamp */
    .rsvp-lamp--cr {
      right: 26%; bottom: 28%;
      width: 56px; height: 56px;
      background: radial-gradient(circle, rgba(240,190,80,.20) 0%, transparent 72%);
      animation: lampPulse 5.7s ease-in-out 1.8s infinite;
    }
    @keyframes lampPulse {
      0%, 100% { opacity: .55; transform: scale(1); }
      50%      { opacity: 1;   transform: scale(1.22); }
    }

    /* ── Lotus divider top ── */
    .rsvp-lotus-top {
      position: relative;
      z-index: 6;
      width: min(340px, 82vw);
      margin: clamp(32px, 7svh, 64px) auto 0;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 1.1s ease .4s, transform 1.1s ease .4s;
      pointer-events: none;
    }
    .rsvp-section.rsvp-alive .rsvp-lotus-top {
      opacity: .82;
      transform: translateY(0);
    }
    .rsvp-lotus-top img {
      display: block;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 2px 12px rgba(166,56,79,.28));
    }

    /* ── Content block ── */
    .rsvp-content {
      position: relative;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: clamp(20px, 4svh, 40px) clamp(20px, 6vw, 48px) clamp(48px, 10svh, 96px);
      max-width: 540px;
      width: 100%;
    }

    /* ── Reveal animation base ── */
    .rsvp-reveal {
      opacity: 0;
      transform: translateY(18px);
      transition: opacity .9s ease, transform .9s ease;
    }
    .rsvp-section.rsvp-alive .rsvp-reveal { opacity: 1; transform: translateY(0); }

    /* Staggered delays */
    .rsvp-eyebrow   { transition-delay: .5s;  }
    .rsvp-headline  { transition-delay: .75s; }
    .rsvp-body      { transition-delay: 1.05s; }
    .rsvp-cta-wrap  { transition-delay: 1.35s; }
    .rsvp-std       { transition-delay: 1.70s; }

    /* ── Eyebrow ── */
    .rsvp-eyebrow {
      font-family: var(--display);
      font-size: clamp(.94rem, 3.1vw, 1.12rem);
      font-weight: 500;
      letter-spacing: .26em;
      text-transform: uppercase;
      color: rgba(216,169,87,.88);
      margin-bottom: clamp(14px,3vw,22px);
      text-shadow: 0 2px 14px rgba(0,0,0,.55);
    }
    .rsvp-section.rsvp-alive .rsvp-eyebrow { opacity: .50; }

    /* ── Headline ── */
    .rsvp-headline {
      font-family: var(--display);
      font-weight: 300;
      font-style: italic;
      line-height: 1.08;
      margin-bottom: clamp(16px, 3svh, 28px);
      text-shadow: 0 4px 28px rgba(0,0,0,.60), 0 1px 6px rgba(0,0,0,.40);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .06em;
    }
    .rsvp-hl-will {
      font-size: clamp(1.9rem, 7.5vw, 3.2rem);
      color: rgba(247, 238, 220, .82);
      letter-spacing: .04em;
    }
    .rsvp-hl-join {
      font-size: clamp(3.2rem, 13vw, 5.4rem);
      font-style: normal;
      font-weight: 400;
      letter-spacing: .03em;
      color: var(--ivory);
      line-height: 1;
      /* Warm glow on the headline word */
      text-shadow:
        0 0 60px rgba(216,169,87,.34),
        0 4px 32px rgba(0,0,0,.68),
        0 1px 6px rgba(0,0,0,.44);
    }

    /* ── Body copy ── */
    .rsvp-body {
      font-family: var(--body);
      font-style: italic;
      font-size: clamp(1.3rem, 4.9vw, 1.56rem);
      line-height: 1.72;
      color: rgba(247,238,220,.78);
      max-width: 360px;
      margin-bottom: clamp(28px, 5svh, 44px);
      text-shadow: 0 2px 18px rgba(0,0,0,.55);
    }

    /* ── Primary RSVP CTA ── */
    .rsvp-cta-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-bottom: clamp(36px, 7svh, 60px);
    }
    .rsvp-btn-primary {
      display: inline-block;
      text-decoration: none;
      color: var(--ivory);
      background: linear-gradient(135deg,
        rgba(119, 40, 58, .95) 0%,
        rgba(100, 28, 46, .98) 55%,
        rgba(80, 20, 36, .96) 100%);
      border: 1px solid rgba(216,169,87,.38);
      border-radius: 2px;
      padding: clamp(14px, 3.2svh, 18px) clamp(32px, 8vw, 56px);
      font-family: var(--display);
      font-size: clamp(1.14rem, 4.4vw, 1.37rem);
      font-weight: 500;
      letter-spacing: .22em;
      text-transform: uppercase;
      box-shadow:
        0 8px 36px rgba(100,28,46,.52),
        0 2px 8px rgba(0,0,0,.34),
        inset 0 1px 0 rgba(216,169,87,.18),
        inset 0 -1px 0 rgba(0,0,0,.18);
      transition:
        background .28s ease,
        box-shadow  .28s ease,
        transform   .18s ease;
      position: relative;
      overflow: hidden;
    }
    /* Subtle shimmer sweep on hover */
    .rsvp-btn-primary::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(105deg,
        transparent 30%,
        rgba(216,169,87,.14) 50%,
        transparent 70%);
      transform: translateX(-100%);
      transition: transform .55s ease;
    }
    .rsvp-btn-primary:hover::before { transform: translateX(100%); }
    .rsvp-btn-primary:hover {
      box-shadow:
        0 12px 48px rgba(100,28,46,.68),
        0 3px 12px rgba(0,0,0,.38),
        inset 0 1px 0 rgba(216,169,87,.26),
        inset 0 -1px 0 rgba(0,0,0,.22);
      transform: translateY(-1px);
    }
    .rsvp-btn-primary:active { transform: translateY(0); }

    .rsvp-btn-inner {
      position: relative;
      z-index: 1;
    }

    /* ── Helper note ── */
    .rsvp-helper {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(.94rem, 3.4vw, 1.07rem);
      color: rgba(247,238,220,.44);
      letter-spacing: .04em;
      text-shadow: 0 1px 8px rgba(0,0,0,.40);
      max-width: 280px;
      line-height: 1.55;
    }

    /* ── Save the Date block ── */
    .rsvp-std {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: clamp(14px, 2.8svh, 22px);
    }
    .rsvp-std-heading {
      font-family: var(--display);
      font-size: clamp(.88rem, 2.9vw, 1.04rem);
      font-weight: 500;
      letter-spacing: .28em;
      text-transform: uppercase;
      color: rgba(216,169,87,.72);
      text-shadow: 0 2px 10px rgba(0,0,0,.44);
      /* Flanked decorative rules */
      display: flex;
      align-items: center;
      gap: 14px;
    }
    .rsvp-std-heading::before,
    .rsvp-std-heading::after {
      content: "";
      display: block;
      width: 36px;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(216,169,87,.48), transparent);
    }

    .rsvp-std-btns {
      display: flex;
      gap: clamp(10px, 3vw, 16px);
      flex-wrap: wrap;
      justify-content: center;
    }

    /* ── Secondary calendar buttons ── */
    .rsvp-cal-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      text-decoration: none;
      color: rgba(247,226,190,0.88);
      background: rgba(6,13,11,0.50);
      border: 1px solid rgba(216,169,87,0.38);
      border-radius: 999px;
      padding: 9px 20px;
      font-family: var(--display);
      font-style: italic;
      font-size: 0.96rem;
      letter-spacing: .10em;
      text-transform: none;
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      box-shadow: 0 4px 18px rgba(0,0,0,.24);
      transition: background 0.3s, border-color 0.3s;
    }
    .rsvp-cal-btn:hover {
      background: rgba(216,169,87,0.12);
      border-color: rgba(216,169,87,0.70);
      color: rgba(247,238,220,.96);
    }
    .rsvp-cal-icon {
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      opacity: .72;
    }

    /* ── Desktop refinements ── */
    @media (min-width: 640px) {
      .rsvp-content { padding-top: clamp(16px, 3svh, 28px); }
    }

    /* ── Reduced motion ── */
    @media (prefers-reduced-motion: reduce) {
      .rsvp-fireworks-canvas { display: none !important; }
      .ftn-jet, .ftn-mist, .ftn-pool-shim { animation: none !important; opacity: .5 !important; }
      .rsvp-lamp { animation: none !important; opacity: .4 !important; }
      .rsvp-bg { transform: none !important; transition: none !important; }
      .rsvp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
      .rsvp-lotus-top { opacity: .8 !important; transform: none !important; transition: none !important; }
    }
    /* ═══════════════════════════════════════════
       MEET THE COUPLE — Secret Garden Reveal
    ═══════════════════════════════════════════ */
    .cpl-section {
      position: relative;
      overflow: hidden;
      color: var(--ink);
      /* Height is driven by content — no min-height */
    }

    /* ── Background: top crop of painting, fades out at bottom ── */
    .cpl-bg {
      position: absolute; inset: 0; z-index: 0;
      background: url("assets/meet_the_couple/pn-cpl-bg-secret-garden-m-v01.webp") center top / cover no-repeat;
    }

    /* Strong fade at bottom so bg image doesn't overrun — section feels contained */
    .cpl-vignette {
      position: absolute; inset: 0; z-index: 1; pointer-events: none;
      background:
        linear-gradient(180deg,
          rgba(6,13,11,.55) 0%,
          rgba(6,13,11,.0)  10%,
          rgba(6,13,11,.0)  55%,
          rgba(247,238,220,.55) 80%,
          rgba(247,238,220,.92) 100%);
    }

    /* ── Content ── */
    .cpl-content {
      position: relative; z-index: 3;
      padding: clamp(48px,8svh,80px) 32px clamp(40px,7svh,64px);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
      max-width: 400px;
      margin: 0 auto;
    }

    /* ── Header ── */
    .cpl-header { text-align: center; }

    .cpl-eyebrow {
      font-family: var(--display);
      font-size: .83rem; font-weight: 700;
      letter-spacing: .28em; text-transform: uppercase;
      color: rgba(196, 140, 45, .92);
      margin-bottom: 6px;
    }

    .cpl-title {
      font-family: var(--display);
      font-size: clamp(3.0rem, 10.6vw, 4.75rem);
      font-weight: 300; font-style: italic;
      color: var(--rose-dark);
      line-height: .96;
      letter-spacing: .01em;
      margin-bottom: 14px;
      text-shadow: 0 2px 20px rgba(247,238,220,.70), 0 4px 32px rgba(0,0,0,.35);
    }

    .cpl-ornament {
      display: flex; align-items: center; justify-content: center; gap: 8px;
      margin: 0 auto;
    }
    .cpl-ornament span {
      display: block;
      width: clamp(24px,7vw,38px); height: 1px;
      background: linear-gradient(90deg, transparent, rgba(166,56,79,.50));
    }
    .cpl-ornament span:last-child {
      background: linear-gradient(270deg, transparent, rgba(166,56,79,.50));
    }
    .cpl-ornament i {
      display: block; width: 5px; height: 5px;
      border-radius: 50%; background: var(--rose); opacity: .65;
    }

    /* ── Story ── */
    .cpl-story {
      text-align: center;
      width: 100%;
    }
    .cpl-story-body {
      font-family: var(--body);
      font-size: clamp(1.1rem, 4.25vw, 1.25rem);
      line-height: 1.78;
      color: rgba(62,43,34,.96);
    }
    /* Personality tags row */
    .cpl-tags {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-top: 24px;
    }
    .cpl-tags:empty { display: none; }
    .cpl-tag-chip {
      font-family: var(--body);
      font-size: 0.62rem;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(62,43,34,.78);
      border: 1px solid rgba(216,169,87,.45);
      padding: 5px 14px;
      background: rgba(216,169,87,.08);
    }

    /* ─────────────────────────────────────────────
       TREE OVERLAYS
       Top-anchored, height = section height.
       Background-image tiles the PNG vertically.
       Trees are z-index 10 — above content (3).
    ───────────────────────────────────────────── */
    .cpl-tree {
      position: absolute;
      top: 0;
      bottom: 0;
      z-index: 10;
      width: 58%;
      pointer-events: none;
      user-select: none;
      will-change: transform;
      background-size: 100% auto;
      background-repeat: repeat-y;
      background-position: top center;
    }
    .cpl-tree--left {
      left: 0;
      background-image: url("assets/meet_the_couple/pn-cpl-ovl-tree-left-m-v01.webp");
    }
    .cpl-tree--right {
      right: 0;
      background-image: url("assets/meet_the_couple/pn-cpl-ovl-tree-right-m-v01.webp");
    }
    .cpl-tree img { display: none; }

    /* Trees: JS drives inline transform directly — no CSS var needed */

    /* ── Reduced motion: trees already open, content visible ── */
    @media (prefers-reduced-motion: reduce) {
      .cpl-tree--left  { transform: translateX(-100%) !important; }
      .cpl-tree--right { transform: translateX(100%)  !important; }
      .cpl-header, .cpl-story { opacity: 1 !important; transform: none !important; }
    }

    /* ═══════════════════════════════════════════════════════════
       INVITE KICKER — "Together with their families"
       Changed from uppercase pill to flowing script connector
    ═══════════════════════════════════════════════════════════ */
    .inv-kicker {
      font-family: var(--script) !important;
      font-size: clamp(1.54rem, 5.3vw, 1.85rem) !important;
      letter-spacing: .03em !important;
      text-transform: none !important;
      font-style: italic;
      color: var(--rose) !important;
      font-weight: 400 !important;
      opacity: .88 !important;
      margin-bottom: 0.45rem !important;
      text-shadow: 0 1px 10px rgba(166,56,79,.14);
    }
    .invite-section.invite-active .inv-kicker {
      animation: inkSettle 1.1s cubic-bezier(.16,1,.3,1) .22s both !important;
    }

    /* ═══════════════════════════════════════════════════════════
       LOTUS BUTTON — 5-phase open animation + ripple
    ═══════════════════════════════════════════════════════════ */

    /* Ripple rings around lotus — pulse outward to draw attention */
    @keyframes lotusRipple {
      0%   { transform: translate(-50%,-50%) scale(.72); opacity: .62; }
      100% { transform: translate(-50%,-50%) scale(1.9);  opacity: 0; }
    }
    .lotus-button::before {
      content: "";
      position: absolute;
      top: 50%; left: 50%;
      width: clamp(84px,22vw,108px);
      height: clamp(84px,22vw,108px);
      border-radius: 50%;
      border: 1.5px solid rgba(223,162,168,.52);
      transform: translate(-50%,-50%) scale(.72);
      opacity: 0;
      pointer-events: none;
      animation: lotusRipple 2.6s ease-out 1.2s infinite;
    }
    .intro.show-lotus .lotus-button::before {
      animation: lotusRipple 2.6s ease-out 0s infinite;
    }
    /* Second ripple ring — offset phase */
    .lotus-cta-group::before {
      content: "";
      position: absolute;
      top: clamp(42px,11vw,54px); left: 50%;
      width: clamp(84px,22vw,108px);
      height: clamp(84px,22vw,108px);
      border-radius: 50%;
      border: 1px solid rgba(216,169,87,.36);
      transform: translate(-50%,-50%) scale(.72);
      opacity: 0;
      pointer-events: none;
      animation: lotusRipple 2.6s ease-out 1.9s infinite;
    }

    /* Open image — sits in same grid cell as closed, starts hidden */
    .lotus-open-img {
      display: block;
      width: clamp(80px,22vw,108px);
      height: clamp(80px,22vw,108px);
      grid-area: 1 / 1;
      object-fit: contain;
      opacity: 0;
      transition: opacity 420ms ease 100ms;
      pointer-events: none;
      user-select: none;
      -webkit-user-drag: none;
      filter:
        drop-shadow(0 14px 28px rgba(0,0,0,.28))
        drop-shadow(0 0 38px rgba(223,162,168,.75))
        drop-shadow(0 0 70px rgba(216,169,87,.40));
    }

    /* Phase 1 — lotus breathes in (tiny inward pulse) */
    .lotus-button.lotus-phase-1 .lotus-icon-img {
      animation: none !important;
      transform: scale(.90) !important;
      transition: transform 200ms cubic-bezier(.16,1,.3,1) !important;
      filter:
        drop-shadow(0 10px 20px rgba(0,0,0,.32))
        drop-shadow(0 0 12px rgba(223,162,168,.35)) !important;
    }

    /* Phase 2 — scale up, golden glow intensifies */
    .lotus-button.lotus-phase-2 .lotus-icon-img {
      animation: none !important;
      transform: scale(1.15) !important;
      transition: transform 400ms cubic-bezier(.22,1,.36,1),
                  filter 400ms ease !important;
      filter:
        drop-shadow(0 10px 28px rgba(0,0,0,.20))
        drop-shadow(0 0 52px rgba(223,162,168,.95))
        drop-shadow(0 0 90px rgba(216,169,87,.52)) !important;
    }
    .lotus-button.lotus-phase-2 .lotus-glow-burst {
      opacity: .28 !important;
      transform: translate(-50%,-50%) scale(.60) !important;
      transition: opacity 400ms ease, transform 600ms ease !important;
    }

    /* Phase 3 — cross-fade closed → open */
    .lotus-button.lotus-phase-3 .lotus-glow-burst {
      opacity: .36 !important;
      transform: translate(-50%,-50%) scale(.75) !important;
      transition: opacity 300ms ease, transform 500ms ease !important;
    }

    /* Phase 4 / is-open — glow burst fully expanded */
    .lotus-button.is-open .lotus-open-img {
      opacity: 1;
      filter:
        drop-shadow(0 12px 30px rgba(0,0,0,.18))
        drop-shadow(0 0 60px rgba(223,162,168,.92))
        drop-shadow(0 0 110px rgba(216,169,87,.55));
    }

    /* ═══════════════════════════════════════════════════════════
       FARMAN EVENTS — Alternating layout + main event emphasis
    ═══════════════════════════════════════════════════════════ */

    /* Left-aligned farman */
    .farman-stop.farman-left {
      align-self: flex-start;
      margin-left: clamp(0px, 3vw, 18px);
    }
    /* Right-aligned farman */
    .farman-stop.farman-right {
      align-self: flex-end;
      margin-right: clamp(0px, 3vw, 18px);
    }

    /* Main event (Shaadi) — slightly larger, stronger drop shadow */
    .farman-stop--main {
      width: min(520px, 96vw);
    }
    .farman-stop--main .farman-open-wrap {
      filter:
        drop-shadow(0 28px 60px rgba(62,43,34,.32))
        drop-shadow(0 0 42px rgba(216,169,87,.22))
        drop-shadow(0 4px 14px rgba(62,43,34,.18));
    }
    .farman-stop--main .farman-name {
      font-size: clamp(1.96rem, 6.3vw, 2.66rem) !important;
    }

    /* Lotus inter-element between farmans */
    .farman-inter--lotus {
      align-self: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: clamp(6px,1.5svh,12px) 0;
      opacity: 0;
      transition: opacity 700ms ease;
    }
    .farman-inter--lotus.in-view { opacity: 1; }
    .farman-inter--lotus img {
      width: clamp(48px, 14vw, 72px);
      height: auto;
      opacity: .55;
      filter: drop-shadow(0 0 12px rgba(216,169,87,.28));
      animation: closingLotusBreath 5s ease-in-out infinite;
    }

    /* TTK icon glow ring — enhanced breathing pulse */
    @keyframes ttkGlowPulse {
      0%,100% {
        opacity: .70;
        transform: scale(1);
        box-shadow: 0 0 0 3px rgba(216,169,87,.12), 0 0 18px rgba(216,169,87,.10);
      }
      50% {
        opacity: 1;
        transform: scale(1.06);
        box-shadow: 0 0 0 5px rgba(216,169,87,.22), 0 0 32px rgba(216,169,87,.22);
      }
    }
    .ttk-card.in-view .ttk-card-icon-wrap::before {
      background: radial-gradient(circle,
        rgba(216,169,87,.28) 0%,
        rgba(216,169,87,.12) 45%,
        transparent 72%);
      animation: ttkGlowPulse 3.8s ease-in-out infinite;
      animation-delay: 600ms;
    }

    /* Lotus ornament in TTK / CPL headers — sizing */
    .ttk-ornament svg,
    .cpl-ornament svg {
      display: block;
      flex-shrink: 0;
    }

    /* ═══════════════════════════════════════════════════════════
       CLOSING SECTION — Love note farewell
    ═══════════════════════════════════════════════════════════ */
    .closing-section {
      position: relative;
      overflow: hidden;
      min-height: 62svh;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(64px,12svh,120px) 24px clamp(80px,14svh,144px);
      background: linear-gradient(180deg, #0c1a16 0%, #060d0b 100%);
      color: var(--ivory);
      text-align: center;
    }

    /* Reuse RSVP background at very low opacity for visual continuity */
    .closing-bg {
      position: absolute; inset: 0;
      background: url("assets/rsvp/pn-rsvp-bg-royal-finale-m-v01.webp") center bottom / cover no-repeat;
      opacity: .18;
      pointer-events: none;
    }

    .closing-veil {
      position: absolute; inset: 0;
      background: linear-gradient(180deg,
        rgba(6,13,11,.92) 0%,
        rgba(6,13,11,.62) 45%,
        rgba(6,13,11,.82) 100%);
      pointer-events: none;
    }

    .closing-content {
      position: relative; z-index: 2;
      display: flex; flex-direction: column;
      align-items: center; gap: 0;
      width: 100%;
    }

    .rsvp-closing-frame {
      position: relative;
      width: 100%;
      max-width: min(300px, 88vw);
      margin: 0 auto;
      padding: clamp(28px,6vw,48px) clamp(24px,6vw,44px);
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .rsvp-closing-frame::before,
    .rsvp-closing-frame::after,
    .rsvp-corner {
      content: "";
      position: absolute;
      width: 26px;
      height: 26px;
      pointer-events: none;
      border-color: rgba(216,169,87,0.40);
      border-style: solid;
    }

    .rsvp-closing-frame::before {
      top: 0;
      left: 0;
      border-width: 1px 0 0 1px;
    }

    .rsvp-closing-frame::after {
      right: 0;
      bottom: 0;
      border-width: 0 1px 1px 0;
    }

    .rsvp-corner--tr {
      top: 0;
      right: 0;
      border-width: 1px 1px 0 0;
    }

    .rsvp-corner--bl {
      bottom: 0;
      left: 0;
      border-width: 0 0 1px 1px;
    }

    /* Lotus divider at top */
    .closing-lotus {
      width: clamp(56px,16vw,84px);
      height: auto;
      opacity: 0;
      margin-bottom: 1.4rem;
      filter: drop-shadow(0 0 18px rgba(216,169,87,.38));
    }
    .closing-content.in-view .closing-lotus {
      animation:
        inkSettle 1.2s cubic-bezier(.16,1,.3,1) 0ms both,
        closingLotusBreath 5.5s ease-in-out 1.5s infinite;
    }
    @keyframes closingLotusBreath {
      0%,100% { opacity: .72; transform: scale(1); }
      50%      { opacity: .92; transform: scale(1.06); }
    }

    /* "With all our love" eyebrow */
    .closing-eyebrow {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(.80rem,2.5vw,.94rem);
      letter-spacing: .20em;
      color: rgba(216,169,87,.70);
      margin-bottom: 0.7rem;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(14px);
      transition: opacity 900ms ease, transform 900ms cubic-bezier(.16,1,.3,1);
      transition-delay: 200ms;
    }
    .closing-content.in-view .closing-eyebrow {
      opacity: 1; transform: translateY(0);
    }

    /* Couple names — Parisienne script, large and luminous */
    .closing-names {
      font-family: var(--script);
      font-size: clamp(3.2rem,11vw,5.4rem);
      font-weight: 400;
      color: var(--ivory);
      line-height: 1.05;
      letter-spacing: .02em;
      margin-bottom: 1.4rem;
      opacity: 0;
      transform: translateY(18px) scale(.96);
      transition: opacity 1100ms ease, transform 1200ms cubic-bezier(.14,1,.28,1);
      transition-delay: 380ms;
    }
    .closing-content.in-view .closing-names {
      opacity: 1;
      transform: translateY(0) scale(1);
      text-shadow:
        0 2px 24px rgba(0,0,0,.65),
        0 0 60px rgba(216,169,87,.30),
        0 0 130px rgba(216,169,87,.14);
      animation: closingNameGlow 6s ease-in-out 1.4s infinite;
    }
    @keyframes closingNameGlow {
      0%,100% {
        text-shadow:
          0 2px 24px rgba(0,0,0,.65),
          0 0 50px rgba(216,169,87,.24);
      }
      50% {
        text-shadow:
          0 2px 20px rgba(0,0,0,.55),
          0 0 80px rgba(216,169,87,.46),
          0 0 150px rgba(216,169,87,.18);
      }
    }

    /* Gold ornament rule */
    .closing-ornament {
      display: flex; align-items: center; justify-content: center; gap: 12px;
      margin-bottom: 1.4rem;
      opacity: 0;
      transform: scaleX(.6);
      transition: opacity 700ms ease, transform 800ms cubic-bezier(.16,1,.3,1);
      transition-delay: 560ms;
    }
    .closing-content.in-view .closing-ornament {
      opacity: 1; transform: scaleX(1);
    }
    .closing-ornament span {
      height: 1px; flex: 1; max-width: 60px;
      background: linear-gradient(90deg, transparent, rgba(216,169,87,.55));
    }
    .closing-ornament span:last-child {
      background: linear-gradient(90deg, rgba(216,169,87,.55), transparent);
    }
    .closing-ornament i {
      display: block; width: 6px; height: 6px;
      border-radius: 50%; background: rgba(216,169,87,.78);
      box-shadow: 0 0 9px rgba(216,169,87,.52);
      font-style: normal;
    }

    /* Farewell line */
    .closing-line {
      font-family: var(--display);
      font-style: italic;
      font-size: clamp(0.92rem,3vw,1.08rem);
      color: rgba(247,226,190,0.72);
      line-height: 1.7;
      max-width: 400px;
      margin-bottom: 1rem;
      letter-spacing: .03em;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 800ms ease, transform 900ms cubic-bezier(.16,1,.3,1);
      transition-delay: 680ms;
    }
    .closing-content.in-view .closing-line {
      opacity: 1; transform: translateY(0);
    }

    /* Date stamp */
    .closing-date {
      font-family: var(--display);
      font-size: clamp(.70rem,2.1vw,.82rem);
      letter-spacing: .24em;
      text-transform: uppercase;
      color: rgba(216,169,87,.44);
      opacity: 0;
      transition: opacity 700ms ease;
      transition-delay: 840ms;
    }
    .closing-content.in-view .closing-date { opacity: 1; }

    @media (prefers-reduced-motion: reduce) {
      .closing-lotus,
      .closing-eyebrow, .closing-names,
      .closing-ornament, .closing-line, .closing-date {
        opacity: 1 !important; transform: none !important;
        animation: none !important; transition: none !important;
      }
    }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE EXPANSION — tablet / desktop staging
       Mobile remains the source of truth. These rules only widen the
       existing Pichwai scenes and keep current mobile assets in use.
       Future desktop art can be swapped on the section backgrounds here.
    ═══════════════════════════════════════════════════════════════ */

    @media (min-width: 768px) {
      html,
      body {
        max-width: 100%;
        overflow-x: hidden;
      }

      .section {
        padding-left: clamp(28px, 4vw, 56px);
        padding-right: clamp(28px, 4vw, 56px);
      }

      .section-inner {
        width: min(1180px, 100%);
      }

      .section-title {
        font-size: clamp(4.2rem, 7.2vw, 6.8rem);
      }

      .section-lede {
        max-width: 560px;
        font-size: clamp(1.22rem, 1.8vw, 1.62rem);
      }

      /* Hero intro */
      .intro-bg {
        object-position: center top;
      }

      .intro-vignette {
        background:
          radial-gradient(ellipse 42% 60% at 50% 43%,
            rgba(216,169,87,.09) 0%,
            rgba(166,56,79,.04) 44%,
            transparent 70%),
          linear-gradient(180deg,
            rgba(4,8,6,.72) 0%,
            transparent 20%,
            transparent 56%,
            rgba(4,8,6,.86) 100%),
          linear-gradient(90deg,
            rgba(4,8,6,.62) 0%,
            transparent 24%,
            transparent 76%,
            rgba(4,8,6,.60) 100%);
      }

      .intro.is-lit .intro-vignette {
        background:
          linear-gradient(180deg,
            rgba(4,8,6,.24) 0%,
            transparent 18%,
            transparent 62%,
            rgba(4,8,6,.66) 100%),
          linear-gradient(90deg,
            rgba(4,8,6,.36) 0%,
            transparent 22%,
            transparent 78%,
            rgba(4,8,6,.34) 100%);
      }

      .intro-jhoomer {
        top: -24px;
        width: clamp(210px, 24vw, 290px);
      }

      .rope-button {
        width: clamp(110px, 13vw, 144px);
        height: clamp(500px, 64svh, 640px);
      }

      .intro-floral-left,
      .intro-floral-right {
        width: clamp(180px, 18vw, 260px); /* smaller — sit in corners */
        bottom: -10svh;
      }

      .intro-floral-left { left: -6vw; }
      .intro-floral-right { right: -6vw; }

      .diya-wrap {
        width: clamp(72px, 8vw, 102px);
      }

      .diya-wrap.diya-left {
        left: clamp(120px, 22vw, 280px); /* closer to arch pillar base */
        bottom: 22svh;
      }

      .diya-wrap.diya-right {
        right: clamp(120px, 22vw, 280px);
        bottom: 22svh;
      }

      .intro-reveal::after {
        top: 38svh;            /* moved down — scrim sits beneath jhoomer */
        width: min(680px, 66vw);
        height: 43svh;
      }

      .intro-reveal::before {
        width: min(720px, 70vw);
        top: 56svh;            /* glow centred on the pushed-down name block */
      }

      .intro-reveal-item {
        width: min(760px, 82vw);
      }

      .intro-reveal .names {
        top: 42svh;            /* below jhoomer (which ends ≈ 40svh at tablet) */
        font-size: clamp(6rem, 9vw, 8.4rem);
      }

      .intro-reveal .ornament {
        top: 66svh;            /* below names block */
        width: clamp(220px, 24vw, 320px);
      }

      .intro-reveal .date {
        top: 69svh;
        font-size: clamp(1.08rem, 1.5vw, 1.34rem);
      }

      .intro-reveal .venue {
        top: 73svh;
        font-size: clamp(1.06rem, 1.45vw, 1.3rem);
      }

      .lotus-cta-group {
        top: 79svh;
      }

      .lotus-button,
      .lotus-icon-img,
      .lotus-open-img {
        width: clamp(96px, 10vw, 124px);
        height: clamp(96px, 10vw, 124px);
      }

      .lotus-button::before,
      .lotus-cta-group::before {
        width: clamp(96px, 10vw, 124px);
        height: clamp(96px, 10vw, 124px);
      }

      .lotus-cta-group::before {
        top: clamp(48px, 5vw, 62px);
      }

      .lotus-cta-label {
        font-size: clamp(1.12rem, 1.45vw, 1.34rem);
      }

      /* Invite */
      .invite-section {
        min-height: 100svh;
        padding: 0;
      }

      .invite-bg {
        background-image: url("assets/invite/pn-inv-bg-panel-d-v01.webp");
        background-size: cover;
        background-position: center center;
      }

      .invite-vignette {
        background:
          radial-gradient(ellipse 35% 72% at center,
            rgba(0,0,0,.02) 0%,
            rgba(0,0,0,.12) 62%,
            rgba(0,0,0,.48) 100%),
          linear-gradient(90deg,
            rgba(6,13,11,.38) 0%,
            transparent 22%,
            transparent 78%,
            rgba(6,13,11,.36) 100%);
      }

      .invite-card-wrap {
        align-items: center;
      }

      .invite-arch-frame {
        content: url("assets/invite/pn-inv-fr-card-d-v01.webp");
        width: clamp(1040px, 172vw, 1320px);
        height: auto;
        max-width: none;
      }

      .invite-text-content {
        top: 58%;
        bottom: auto;
        transform: translate(-50%, -50%);
        max-width: min(500px, 52vw);
        min-height: 0;
        height: min(480px, 50svh);
        justify-content: center;
        padding-top: 0;
      }

      .inv-blessing,
      .inv-blessing-alt {
        font-size: 0.88rem;
      }

      .inv-blessing p:not(.inv-overline) {
        font-size: 0.9rem;
      }

      /* Tighten the gap between kicker → lotus → names */
      .inv-kicker {
        margin-bottom: 0;
      }

      .inv-lotus-div {
        margin: 0 auto;
        width: clamp(54px, 10vw, 80px);
      }

      .inv-names {
        font-size: clamp(3.6rem, 5.2vw, 4.8rem);
        white-space: nowrap;
        margin-top: 0;
        margin-bottom: 0;
      }

      /* Compress bottom elements */
      .inv-parents {
        max-width: 420px;
        margin-bottom: 0.2rem;
        font-size: 0.95rem;
      }

      .inv-parents p { padding: 3px 0; }

      .inv-occasion {
        font-size: 1rem;
        margin-bottom: 0.25rem;
      }

      .inv-meta {
        gap: 1px;
      }

      .inv-cta {
        bottom: clamp(42px, 6svh, 72px);
      }

      .inv-btn {
        padding: .62rem 2.6rem;
      }

      .inv-bird--a {
        width: 92px;
        height: 94px;
        background-size: 552px 184px;
        background-position: 0 -43px;
        animation:
          birdFlapADesktop  0.35s steps(6, end) infinite,
          birdFlyA          5s    linear 1.8s   infinite,
          birdDriftA        3.7s  ease-in-out 1.8s infinite;
      }

      .inv-bird--b {
        width: 72px;
        height: 74px;
        background-size: 432px 144px;
        background-position: 0 -34px;
        animation:
          birdFlapBDesktop  0.42s steps(6, end) 0.15s infinite,
          birdFlyB          7s    linear 8s     infinite,
          birdDriftB        5.1s  ease-in-out 8s infinite;
      }

      @keyframes birdFlapADesktop {
        from { background-position-x:    0px; }
        to   { background-position-x: -552px; }
      }

      @keyframes birdFlapBDesktop {
        from { background-position-x:    0px; }
        to   { background-position-x: -432px; }
      }

      /* Events */
      .events-section {
        padding-left: 0;
        padding-right: 0;
      }

      /* evt-bg: gradient works at any size — no desktop image override needed */

      .evt-bg-vignette {
        background:
          linear-gradient(180deg,
            rgba(26,14,22,.55) 0%,
            rgba(26,14,22,.10) 10%,
            rgba(26,14,22,0)   22%,
            rgba(26,14,22,0)   78%,
            rgba(26,14,22,.10) 90%,
            rgba(26,14,22,.55) 100%);
      }

      /* Decorative elements — desktop sizing */
      .evt-glow-mid {
        top: 20%;
        width: 100%;
        height: 65%;
      }

      .evt-jhoomer-wrap {
        width: clamp(120px, 11vw, 180px);
        top: 0;
      }

      .evt-corner {
        width: clamp(140px, 15vw, 220px);
      }

      .evt-peacock {
        width: clamp(200px, 20vw, 320px);
        left: 0;
        bottom: 0;
      }

      .evt-elephant {
        width: clamp(220px, 22vw, 340px);
        right: 0;
        bottom: 0;
      }

      .evt-lotus--1 {
        width: clamp(70px, 6vw, 110px);
        top: 16%; left: 2%;
      }

      .evt-lotus--2 {
        width: clamp(52px, 4.5vw, 80px);
        top: 58%; right: 3%;
      }

      .evt-lotus--3 {
        width: clamp(58px, 5vw, 90px);
        top: 36%; right: 2%;
      }

      .evt-lotus--4 {
        width: clamp(40px, 3.5vw, 64px);
        top: 76%; left: 3%;
      }

      .evt-header {
        /* Desktop jhoomer (~11vw wide, ~2.2x tall) needs clearance */
        padding-top: clamp(260px, 24vw, 420px);
      }

      .evt-title {
        font-size: clamp(4.2rem, 7vw, 6.8rem);
      }

      .evt-divider {
        width: clamp(126px, 16vw, 180px);
      }

      .evt-journey {
        max-width: min(720px, 86vw);
      }

      .evt-stops {
        align-items: center;
        gap: clamp(46px, 8svh, 82px);
      }

      .farman-stop,
      .farman-stop.farman-left,
      .farman-stop.farman-right {
        align-self: center;
        width: min(560px, 72vw);
        margin-left: 0;
        margin-right: 0;
      }

      .farman-stop--main {
        width: min(600px, 76vw);
      }

      .farman-content {
        left: 12%;
        right: 12%;
      }

      .farman-motif {
        width: clamp(150px, 34%, 210px);
        height: clamp(150px, 34%, 210px);
      }

      .farman-name {
        font-size: clamp(3.29rem, 5.6vw, 4.69rem);
      }

      .farman-stop--main .farman-name {
        font-size: clamp(2.52rem, 4.5vw, 3.29rem) !important;
      }

      .farman-datetime {
        font-size: clamp(1.15rem, 1.75vw, 1.4rem);
      }

      .farman-venue {
        font-size: clamp(1.32rem, 1.9vw, 1.57rem);
      }

      .farman-note {
        font-size: clamp(1.09rem, 1.5vw, 1.29rem);
      }

      .farman-map {
        font-size: clamp(.72rem, 1vw, .84rem);
      }

      .farman-inter--lotus img {
        width: clamp(62px, 8vw, 84px);
      }

      /* Desktop: bottom floral border overlaps farman cards — hide it */
      .evt-floral-border--bot {
        display: none;
      }

      /* Desktop: cow sits below the left diya, hugging the left edge */
      .evt-cow {
        bottom: 8%;
        left: 2%;
        top: auto;
        transform: none;
        width: clamp(70px, 7vw, 110px);
        opacity: 0.55;
        z-index: 1;
      }

      /* Meet the Couple */
      .cpl-section {
        min-height: 82svh;
        padding-left: 0;
        padding-right: 0;
      }

      .cpl-bg {
        background-image: url("assets/meet_the_couple/pn-cpl-bg-secret-garden-d-v01.webp");
        background-position: center top;
        background-size: cover;
      }

      .cpl-vignette {
        background:
          linear-gradient(180deg,
            rgba(6,13,11,.62) 0%,
            rgba(6,13,11,.12) 12%,
            rgba(6,13,11,0) 50%,
            rgba(247,238,220,.34) 78%,
            rgba(247,238,220,.90) 100%),
          radial-gradient(ellipse 38% 58% at 50% 48%,
            rgba(247,238,220,.62) 0%,
            rgba(247,238,220,.28) 48%,
            transparent 76%);
      }

      .cpl-content {
        max-width: min(620px, 70vw);
        min-height: 82svh;
        justify-content: center;
        padding: clamp(78px, 11svh, 126px) clamp(44px, 6vw, 72px);
        isolation: isolate;
      }

      .cpl-content::before {
        content: "";
        position: absolute;
        inset: clamp(44px, 7svh, 84px) 0;
        z-index: -1;
        border-radius: 48% 48% 44% 44% / 12% 12% 18% 18%;
        background:
          radial-gradient(ellipse 72% 66% at 50% 42%,
            rgba(247,238,220,.68) 0%,
            rgba(247,238,220,.34) 54%,
            transparent 78%);
        filter: blur(.2px);
        pointer-events: none;
      }

      .cpl-title {
        font-size: clamp(3.4rem, 5.2vw, 5.2rem);
      }

      .cpl-story-body {
        max-width: 580px;
        margin: 0 auto;
        font-size: clamp(1rem, 1.45vw, 1.18rem);
        line-height: 1.86;
      }

      .cpl-tree {
        width: 64%;
        background-size: 100% auto;
        z-index: 1; /* Desktop: trees behind content (z-index:3); mobile keeps z-index:10 for curtain reveal */
      }

      .cpl-tree--left { left: -6vw; }
      .cpl-tree--right { right: -6vw; }

      /* Gallery */
      .gallery-section {
        min-height: 100svh;
        padding-bottom: clamp(92px, 11svh, 132px);
      }

      .gal-bg {
        background-image: url("assets/gallery/pn-gal-bg-hanging-courtyard-d-v01.webp");
        background-position: center top;
        background-size: cover;
      }

      .gal-bg-vignette {
        background:
          linear-gradient(to bottom,
            rgba(30,18,10,.48) 0%,
            rgba(30,18,10,.14) 18%,
            rgba(30,18,10,.06) 50%,
            rgba(30,18,10,.14) 72%,
            rgba(30,18,10,.64) 100%),
          linear-gradient(90deg,
            rgba(30,18,10,.34) 0%,
            transparent 22%,
            transparent 78%,
            rgba(30,18,10,.32) 100%);
      }

      .gal-header {
        padding-top: clamp(86px, 11svh, 128px);
      }

      .gal-lede {
        max-width: 520px;
        text-shadow: 0 1px 12px rgba(20,10,4,.62), 0 2px 24px rgba(20,10,4,.38);
      }

      .gal-wall {
        max-width: min(940px, 94vw);
        padding-top: clamp(56px, 7svh, 82px);
        gap: clamp(16px, 3vw, 34px);
      }

      .gal-slot-hero {
        width: clamp(240px, 34vw, 390px);
      }

      .gal-slot-portrait {
        width: clamp(170px, 24vw, 280px);
      }

      .gal-slot-landscape {
        width: clamp(320px, 56vw, 540px);
      }

      /* Things to Know */
      .ttk-section {
        padding-top: clamp(76px, 10svh, 112px);
        padding-bottom: clamp(78px, 10svh, 118px);
      }

      .ttk-inner {
        width: min(760px, 90vw);
      }

      .ttk-heading {
        font-size: clamp(3rem, 5.4vw, 4rem);
      }

      .ttk-subline {
        max-width: 460px;
        margin: 0 auto;
        font-size: clamp(.96rem, 1.45vw, 1.08rem);
      }

      .ttk-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: clamp(14px, 2.2vw, 22px);
      }

      .ttk-card {
        border-radius: 14px;
        padding: clamp(24px, 3.2vw, 32px) clamp(18px, 2.5vw, 24px) clamp(22px, 2.8vw, 28px);
      }

      .ttk-card-icon-wrap {
        width: clamp(68px, 9vw, 84px);
        height: clamp(68px, 9vw, 84px);
      }

      .ttk-card-title {
        font-size: clamp(.88rem, 1.3vw, 1.01rem);
      }

      .ttk-card-body {
        font-size: clamp(1.07rem, 1.5vw, 1.2rem);
      }

      .ttk-motif--peacock {
        width: clamp(420px, 46vw, 640px);
        bottom: -12%;
      }

      .ttk-motif--elephant-l,
      .ttk-motif--elephant-r {
        width: clamp(190px, 18vw, 280px);
      }

      .ttk-motif--cow {
        width: clamp(100px, 9vw, 138px);
      }

      /* RSVP finale */
      .rsvp-section {
        min-height: 100svh;
        justify-content: center;
        padding-left: 0;
        padding-right: 0;
      }

      .rsvp-bg {
        background-image: url("assets/rsvp/pn-rsvp-bg-royal-finale-d-v01.webp");
        background-position: center center;
        transform: scale(1.04);
      }

      .rsvp-veil {
        background:
          linear-gradient(180deg,
            rgba(6,13,11,0.10) 0%,
            rgba(6,13,11,0.30) 40%,
            rgba(6,13,11,0.72) 72%,
            rgba(6,13,11,0.88) 100%),
          radial-gradient(ellipse 44% 48% at 50% 42%,
            rgba(8, 14, 30, .42) 0%,
            rgba(8, 14, 30, .22) 46%,
            transparent 76%);
      }

      .rsvp-lotus-top {
        width: clamp(280px, 28vw, 390px);
        margin-top: clamp(28px, 5svh, 54px);
      }

      .rsvp-content {
        max-width: 600px;
        padding: clamp(18px, 3svh, 30px) 44px clamp(100px, 13svh, 150px);
      }

      .rsvp-hl-will {
        font-size: clamp(2.35rem, 3.6vw, 3.7rem);
      }

      .rsvp-hl-join {
        font-size: clamp(4.6rem, 7.2vw, 7.2rem);
      }

      .rsvp-body {
        max-width: 430px;
        font-size: clamp(1.08rem, 1.55vw, 1.28rem);
      }

      .rsvp-btn-primary {
        padding-left: clamp(44px, 5vw, 70px);
        padding-right: clamp(44px, 5vw, 70px);
      }

      .rsvp-lamp--l { left: 15%; bottom: 35%; }
      .rsvp-lamp--r { right: 15%; bottom: 35%; }
      .rsvp-lamp--cl { left: 32%; bottom: 27%; }
      .rsvp-lamp--cr { right: 32%; bottom: 27%; }

      /* Closing continuation */
      .closing-section {
        min-height: 70svh;
      }

      .closing-bg {
        background-image: url("assets/rsvp/pn-rsvp-bg-royal-finale-d-v01.webp");
      }

      .closing-content {
        max-width: 620px;
      }

      .closing-names {
        font-size: clamp(5.2rem, 7vw, 7rem);
      }

      .rsvp-closing-frame {
        max-width: min(680px, 78vw);
        padding: clamp(40px, 5vw, 60px) clamp(60px, 9vw, 110px);
      }
    }

    @media (min-width: 1024px) {
      .intro-bg {
        object-position: center center;
      }

      .intro-jhoomer {
        width: clamp(250px, 20vw, 330px);
      }

      .intro-floral-left,
      .intro-floral-right {
        width: clamp(190px, 16vw, 280px); /* reduced — corner accent only */
        bottom: -12svh;
      }

      .intro-floral-left { left: max(-5vw, calc(50% - 760px)); }
      .intro-floral-right { right: max(-5vw, calc(50% - 760px)); }

      .diya-wrap.diya-left {
        left: clamp(200px, 26vw, 400px); /* aligned to arch pillar base */
        bottom: 20svh;
      }

      .diya-wrap.diya-right {
        right: clamp(200px, 26vw, 400px);
        bottom: 20svh;
      }

      .intro-reveal .names {
        width: min(820px, 78vw);
        font-size: clamp(6.8rem, 7.4vw, 9rem);
      }

      .invite-arch-frame {
        width: clamp(1320px, 128vw, 1440px);
      }

      .invite-text-content {
        max-width: min(540px, 46vw);
        height: min(580px, 60svh);
      }

      .inv-names {
        font-size: clamp(5.95rem, 6.4vw, 7.5rem);
      }

      .evt-journey {
        max-width: min(1120px, 92vw);
      }

      .evt-stops {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: start;
        justify-items: center;
        column-gap: clamp(22px, 3vw, 42px);
        row-gap: clamp(42px, 7svh, 76px);
        padding-left: clamp(20px, 3vw, 38px);
        padding-right: clamp(20px, 3vw, 38px);
      }

      .farman-stop,
      .farman-stop.farman-left,
      .farman-stop.farman-right {
        width: min(100%, 340px);
        align-self: start;
        justify-self: center;
      }

      .farman-stop--main {
        width: min(100%, 350px);
      }

      .farman-inter {
        display: none;
      }

      .farman-content {
        left: 10%;
        right: 10%;
        top: 8%;
        bottom: 12%;
        padding-top: 5%;
        padding-bottom: 3%;
      }

      .farman-motif {
        width: clamp(94px, 30%, 128px);
        height: clamp(94px, 30%, 128px);
        margin-top: -8px;
      }

      .farman-name {
        font-size: clamp(2.52rem, 3.78vw, 3.57rem);
      }

      .farman-stop--main .farman-name {
        font-size: clamp(2.03rem, 2.8vw, 2.66rem) !important;
      }

      .farman-rule {
        margin: 5px 0;
      }

      .farman-datetime {
        font-size: clamp(.9rem, 1.15vw, 1.09rem);
        letter-spacing: .13em;
      }

      .farman-venue {
        font-size: clamp(1.04rem, 1.33vw, 1.26rem);
        margin-top: 3px;
      }

      .farman-note {
        font-size: clamp(.87rem, 1.15vw, 1.06rem);
        max-width: 76%;
        margin-top: 3px;
      }

      .farman-map {
        font-size: clamp(.84rem, 1.09vw, 1.01rem);
        margin-top: 6px;
      }

      .farman-map-rule {
        margin-top: 4px;
      }

      .cpl-section {
        min-height: 92svh;
      }

      .cpl-content {
        max-width: min(680px, 58vw);
        min-height: 92svh;
      }

      .cpl-tree {
        width: 66%;
      }

      .cpl-tree--left { left: -10vw; }
      .cpl-tree--right { right: -10vw; }

      .gallery-section {
        min-height: 108svh;
      }

      .gal-wall {
        display: grid;
        grid-template-columns:
          minmax(150px, .8fr)
          minmax(240px, 1.12fr)
          minmax(240px, 1.12fr)
          minmax(150px, .8fr);
        align-items: start;
        max-width: min(1120px, 92vw);
        gap: clamp(8px, 1.8vw, 26px) clamp(22px, 3vw, 46px);
        padding-left: 0;
        padding-right: 0;
      }

      .gal-frame-slot {
        justify-self: center;
      }

      .gal-slot-hero {
        grid-column: 2 / 4;
        grid-row: 1;
        width: clamp(300px, 28vw, 430px);
        z-index: 3;
      }

      .gal-frame-slot:nth-child(2) {
        grid-column: 1 / 2;
        grid-row: 1;
        margin-top: clamp(68px, 9vw, 116px);
      }

      .gal-frame-slot:nth-child(3) {
        grid-column: 2 / 4;
        grid-row: 2;
        margin-top: clamp(-34px, -2vw, -12px);
      }

      .gal-frame-slot:nth-child(4) {
        grid-column: 4 / 5;
        grid-row: 1;
        margin-top: clamp(108px, 13vw, 168px);
      }

      .gal-slot-landscape {
        width: clamp(390px, 42vw, 590px);
      }

      .gal-slot-portrait {
        width: clamp(180px, 17vw, 250px);
      }

      .ttk-inner {
        width: min(1040px, 90vw);
      }

      .ttk-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
        gap: clamp(16px, 1.8vw, 24px);
      }

      .ttk-card {
        grid-column: span 2;
      }

      .ttk-grid--single {
        grid-template-columns: repeat(6, minmax(0, 1fr));
      }

      .ttk-grid--single .ttk-card {
        grid-column: 3 / span 2;
      }

      .ttk-card--last-odd {
        grid-column: span 2;
        max-width: none;
        justify-self: stretch;
      }

      .ttk-card:last-child:nth-child(3n + 1) {
        grid-column: 3 / span 2;
      }

      .ttk-card:nth-last-child(2):nth-child(3n + 1) {
        grid-column: 2 / span 2;
      }

      .ttk-card:last-child:nth-child(3n + 2) {
        grid-column: 4 / span 2;
      }

      .rsvp-content {
        margin-top: -2svh;
      }

      .floating-menu {
        right: clamp(8px, 1.2vw, 18px);
        bottom: clamp(24px, 2.4vw, 38px);
        transform: none;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
      }

      .music-toggle {
        pointer-events: auto;
        touch-action: manipulation;
      }

      .menu-panel {
        right: 84px;
        bottom: 0;
        transform-origin: bottom right;
      }

      .floating-menu.is-open .menu-panel {
        transform: scale(1) translateY(0);
      }
    }

    @media (min-width: 1280px) {
      .section-title {
        font-size: clamp(5rem, 5.4vw, 7.4rem);
      }

      .intro-jhoomer {
        width: clamp(280px, 18vw, 360px);
      }

      .rope-button {
        width: clamp(118px, 9vw, 152px);
      }

      .intro-floral-left,
      .intro-floral-right {
        width: clamp(200px, 14vw, 280px); /* corner accents, small */
      }

      .diya-wrap {
        width: clamp(88px, 6.5vw, 116px);
      }

      .diya-wrap.diya-left {
        left: clamp(250px, 28vw, 430px); /* at arch pillar bases */
        bottom: 18svh;
      }

      .diya-wrap.diya-right {
        right: clamp(250px, 28vw, 430px);
        bottom: 18svh;
      }

      /* ── At 1280px+ the font is bigger relative to vh — push text stack down ── */
      .intro-reveal::after {
        top: 40svh;            /* scrim behind larger name block */
      }

      .intro-reveal .names {
        top: 44svh;            /* clears jhoomer bottom (≈40svh at 1440×860) */
        font-size: clamp(7.2rem, 6.6vw, 9.4rem);
      }

      .intro-reveal .ornament {
        top: 73svh;            /* below expanded name block */
      }

      .intro-reveal .date {
        top: 76svh;
      }

      .intro-reveal .venue {
        top: 80svh;
      }

      .lotus-cta-group {
        top: 82svh;            /* 82+17.6svh=99.6svh — fits within viewport */
      }

      .invite-arch-frame {
        width: clamp(1420px, 112vw, 1540px);
      }

      .invite-text-content {
        max-width: 560px;
        height: min(620px, 64svh);
      }

      .events-section {
        min-height: 100svh;
      }

      .evt-journey {
        max-width: min(1180px, 90vw);
      }

      .farman-stop,
      .farman-stop.farman-left,
      .farman-stop.farman-right {
        width: min(100%, 350px);
      }

      .farman-stop--main {
        width: min(100%, 360px);
      }

      .cpl-content {
        max-width: 680px;
      }

      .cpl-tree {
        width: 68%;
      }

      .cpl-tree--left { left: -14vw; }
      .cpl-tree--right { right: -14vw; }

      .gal-wall {
        max-width: min(1240px, 90vw);
      }

      .gal-slot-hero {
        width: clamp(340px, 26vw, 460px);
      }

      .gal-slot-landscape {
        width: clamp(440px, 40vw, 620px);
      }

      .gal-slot-portrait {
        width: clamp(200px, 15vw, 270px);
      }

      .ttk-inner {
        width: min(1120px, 88vw);
      }

      .ttk-grid {
        grid-template-columns: repeat(8, minmax(0, 1fr));
      }

      .ttk-card {
        grid-column: span 2;
      }

      .ttk-grid--single .ttk-card {
        grid-column: 4 / span 2;
      }

      .ttk-card:last-child:nth-child(3n + 1),
      .ttk-card:nth-last-child(2):nth-child(3n + 1),
      .ttk-card:last-child:nth-child(3n + 2) {
        grid-column: span 2;
      }

      .ttk-card:last-child:nth-child(4n + 1) {
        grid-column: 4 / span 2;
      }

      .ttk-card:nth-last-child(2):nth-child(4n + 1) {
        grid-column: 3 / span 2;
      }

      .ttk-card:last-child:nth-child(4n + 2) {
        grid-column: 5 / span 2;
      }

      .ttk-card:nth-last-child(3):nth-child(4n + 1) {
        grid-column: 2 / span 2;
      }

      .ttk-card:nth-last-child(2):nth-child(4n + 2) {
        grid-column: 4 / span 2;
      }

      .ttk-card:last-child:nth-child(4n + 3) {
        grid-column: 6 / span 2;
      }

      .rsvp-bg {
        background-position: center center;
      }

      .rsvp-content {
        max-width: 640px;
      }

    }

    @media (min-width: 1536px) {
      .intro-bg {
        object-position: center 46%;
      }

      .intro-floral-left { left: calc(50% - 900px); }
      .intro-floral-right { right: calc(50% - 900px); }

      .diya-wrap.diya-left {
        left: calc(50% - 520px);
      }

      .diya-wrap.diya-right {
        right: calc(50% - 520px);
      }

      .invite-arch-frame {
        width: 1560px;
      }

      .evt-journey {
        max-width: min(1220px, 88vw);
      }

      .gallery-section {
        min-height: 112svh;
      }

      .gal-wall {
        max-width: 1320px;
      }

      .cpl-tree {
        width: 70%;
      }

      .cpl-tree--left { left: -17vw; }
      .cpl-tree--right { right: -17vw; }

      .rsvp-content {
        padding-bottom: clamp(120px, 14svh, 172px);
      }

      .rsvp-hl-join {
        font-size: clamp(6rem, 5.2vw, 7.8rem);
      }

    }

    @media (prefers-reduced-motion: reduce) and (min-width: 768px) {
      .invite-bg,
      .gal-bg,
      .rsvp-bg {
        transform: none !important;
      }
    }