/* ═══════════════════════════════════════════════════════════════════════════
       ROYAL RED VELVET & ANTIQUE ZARI GOLD — INTERACTIVE EDITION
       1. Two-Step Wax-Sealed Red Velvet Envelope Reveal -> Groom/Bride Choice
       2. "Jaise Mera Tu" (Sachin-Jigar & Arijit Singh) Spinning Vinyl Player
       3. Interactive 3D Folding Jharokha Windows for the Two Families
       4. Interactive 7-Petal Surya-Chandra Chakra Wheel & Morphing Sky Stage
       5. Interactive Lucknow ↔ Faridabad Royal Route Map & Gliding Compass
       ═══════════════════════════════════════════════════════════════════════════ */
    :root {
      /* Royal Red Velvet Ground & Warm Ivory Parchment Surfaces */
      --velvet-deep: #26050A;
      --velvet-ground: #350810;
      --velvet-mid: #4B0C17;
      --velvet-crimson: #6B1220;
      --velvet-light: #8C1B2D;
      --velvet-glass: rgba(42, 6, 12, 0.86);

      /* Envelope & Wax Seal Tokens */
      --env: #68111E;
      --env-deep: #480A13;
      --env-light: #8A1A2B;
      --seal-core: #350810;

      /* Warm Ivory Parchment (for the Hero Arch, Jharokha Sanctums & Interactive Stages) */
      --bg-card: #FCF6EC;
      --bg-parchment: #F4EAD8;
      --ink-primary: #2B090E;
      --ink-secondary: #5C2830;
      --ink-muted: #845259;

      /* Text on the Red Velvet Ground */
      --cream: #F9EFE2;
      --cream-dim: rgba(249, 239, 226, 0.8);

      /* Antique Zari Gold & Sindoor Accents */
      --sindoor: #8E1B28;
      --sindoor-soft: rgba(142, 27, 40, 0.11);
      --zari: #D4AF5A;
      --zari-light: #EFE0A6;
      --zari-deep: #9E7828;
      --zari-hairline: rgba(212, 175, 90, 0.38);
      --zari-faint: rgba(212, 175, 90, 0.16);
      --shutter-wood: #4E0C16;

      --shadow-soft: 0 24px 56px -22px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(212, 175, 90, 0.32);
      --shadow-elevated: 0 34px 72px -20px rgba(0, 0, 0, 0.78), 0 0 0 1px rgba(212, 175, 90, 0.5);

      --font-display: "Cormorant Garamond", Georgia, serif;
      --font-didone: "Bodoni Moda", Georgia, serif;
      --font-sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, sans-serif;
      --font-hindi: "Tiro Devanagari Hindi", serif;

      --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
      --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
      --ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1);
      --gravity: cubic-bezier(0.5, 0, 1, 1);
      --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background-color: var(--velvet-ground);
      color: var(--cream);
      font-family: var(--font-sans);
      font-weight: 400;
      font-size: 15.5px;
      line-height: 1.65;
      min-height: 100vh;
      overflow-x: hidden;
      -webkit-font-smoothing: antialiased;
    }
    /* Rich Red Velvet Radial Sheen & Vignette */
    body::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      background:
        radial-gradient(110% 75% at 50% 0%, rgba(160, 24, 44, 0.42), transparent 62%),
        radial-gradient(95% 70% at 50% 105%, rgba(12, 1, 3, 0.72), transparent 65%),
        radial-gradient(60% 100% at 0% 50%, rgba(15, 2, 4, 0.4), transparent 60%),
        radial-gradient(60% 100% at 100% 50%, rgba(15, 2, 4, 0.4), transparent 60%);
    }
    body:not(.revealed) {
      overflow: hidden;
      height: 100vh;
    }

    /* Ornate Outer Zari Frame */
    .page-border {
      position: fixed;
      inset: 10px;
      border: 1px solid var(--zari-hairline);
      pointer-events: none;
      z-index: 30;
    }
    .page-border::before {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px solid var(--zari-faint);
    }
    @media (max-width: 768px) {
      .page-border { inset: 5px; }
      .page-border::before { display: none; }
    }

    /* Ambient Falling Rose & Marigold Petals */
    .ambient-petals {
      position: fixed;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
      z-index: 1;
    }
    .ambient-petals span {
      position: absolute;
      top: -6vh;
      animation: ambientFall var(--t) linear var(--d) infinite;
    }
    .ambient-petals span i {
      display: block;
      width: var(--s);
      height: calc(var(--s) * 1.55);
      background: linear-gradient(160deg, #E89A3C, #9E1B2B);
      border-radius: 60% 60% 55% 55% / 70% 70% 40% 40%;
      opacity: 0.55;
      animation: ambientSway calc(var(--t) / 3) var(--ease-in-out) infinite alternate;
    }
    .ambient-petals span:nth-child(even) i {
      background: linear-gradient(160deg, #D4AF5A, #8C1B2D);
      opacity: 0.45;
    }
    .revealed .ambient-petals span:nth-child(n+6) { display: none; }
    @keyframes ambientFall { to { transform: translateY(112vh); } }
    @keyframes ambientSway {
      from { transform: translateX(-22px) rotate(-40deg) skewX(-8deg); }
      to   { transform: translateX(22px) rotate(50deg) skewX(8deg); }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       TWO-STEP OPENING REVEAL STAGE · ROYAL PALACE GATES
       Step 1: Click Sacred Mandala / Palace Gates -> Grand Doors Part Open
       Step 2: "Two invitations, one wedding" -> Groom's Side / Bride's Side
       ═══════════════════════════════════════════════════════════════════════════ */
    .stage {
      position: fixed;
      inset: 0;
      z-index: 100;
      overflow: hidden;
      background: #180205;
      transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s;
    }
    .revealed .stage {
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
    }

    /* Royal Palace Gates */
    .palace-gates {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    .gate-doors {
      position: absolute;
      inset: 0;
      pointer-events: none;
      overflow: hidden;
    }
    .gate-door {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 50.4%;
      background-color: #380507;
      background-image:
        radial-gradient(circle at 50% 50%, rgba(142, 27, 40, 0.5) 0%, transparent 75%),
        repeating-linear-gradient(45deg, rgba(212, 175, 90, 0.08) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(-45deg, rgba(212, 175, 90, 0.08) 0 1px, transparent 1px 18px);
      transition: transform 1.25s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }
    .gate-door.dl {
      left: 0;
      border-right: 2.5px solid var(--zari);
      box-shadow: inset -45px 0 65px -30px rgba(0, 0, 0, 0.85);
    }
    .gate-door.dr {
      right: 0;
      border-left: 2.5px solid var(--zari);
      box-shadow: inset 45px 0 65px -30px rgba(0, 0, 0, 0.85);
    }
    .gate-door::before {
      content: "";
      position: absolute;
      inset: 24px 18px;
      border: 1.5px solid var(--zari-hairline);
      border-radius: 4px;
      opacity: 0.75;
      pointer-events: none;
    }
    .gate-door::after {
      content: "";
      position: absolute;
      inset: 34px 26px;
      border: 1px dashed rgba(212, 175, 90, 0.35);
      border-radius: 2px;
      opacity: 0.6;
      pointer-events: none;
    }
    .gate-handle-mount {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--zari-light) 0%, var(--zari-deep) 100%);
      box-shadow: 0 4px 14px rgba(0, 0, 0, 0.65);
      display: grid;
      place-items: center;
      z-index: 2;
    }
    .gate-handle-mount.right { right: 18px; }
    .gate-handle-mount.left { left: 18px; }
    .gate-ring {
      width: 26px;
      height: 26px;
      border-radius: 50%;
      border: 3.5px solid #2B0508;
      box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* Parting State */
    .stage.parting .gate-door.dl {
      transform: translate3d(-102%, 0, 0);
    }
    .stage.parting .gate-door.dr {
      transform: translate3d(102%, 0, 0);
    }

    /* Central Sacred Mandala Button */
    .royal-seal-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: min(78vw, 320px);
      height: min(78vw, 320px);
      border-radius: 50%;
      background: radial-gradient(circle at center, rgba(56, 5, 7, 0.95) 0%, rgba(24, 2, 4, 0.98) 100%);
      border: 2px solid var(--zari);
      box-shadow: 0 0 50px rgba(0, 0, 0, 0.8), 0 0 32px rgba(212, 175, 90, 0.35);
      cursor: pointer;
      z-index: 10;
      padding: 0;
      display: grid;
      place-items: center;
      transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
      animation: sealBreathe 3.6s ease-in-out infinite;
    }
    .royal-seal-btn:hover {
      transform: translate(-50%, -50%) scale(1.04);
      box-shadow: 0 0 60px rgba(0, 0, 0, 0.9), 0 0 45px rgba(212, 175, 90, 0.5);
    }
    .royal-seal-btn:active {
      transform: translate(-50%, -50%) scale(0.97);
    }
    @keyframes sealBreathe {
      0%, 100% { transform: translate(-50%, -50%) scale(1); }
      50% { transform: translate(-50%, -50%) scale(1.025); }
    }
    .stage.parting .royal-seal-btn {
      animation: sealSink 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      pointer-events: none;
    }
    @keyframes sealSink {
      to { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
    }

    .mandala {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      fill: none;
      stroke: var(--zari-light);
      stroke-width: 0.85;
    }
    .mandala .pet {
      fill: var(--sindoor);
      stroke: none;
      opacity: 0.9;
    }
    .mandala .spin {
      animation: mandalaSpin 70s linear infinite;
      transform-box: fill-box;
      transform-origin: center;
    }
    @keyframes mandalaSpin {
      to { transform: rotate(360deg); }
    }

    .mandala-content {
      position: relative;
      z-index: 3;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      user-select: none;
    }
    .mandala-shubh {
      font-family: var(--font-hindi);
      font-size: clamp(26px, 8vw, 36px);
      color: var(--cream);
      text-shadow: 0 2px 14px rgba(0, 0, 0, 0.8), 0 0 20px rgba(212, 175, 90, 0.4);
      line-height: 1.1;
    }
    .mandala-monogram {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 15px;
      letter-spacing: 0.22em;
      color: var(--zari-light);
      text-transform: uppercase;
      opacity: 0.92;
    }

    .hint {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 84px;
      z-index: 12;
      margin: 0;
      font-size: 13.5px;
      color: var(--cream-dim);
      letter-spacing: 0.08em;
      text-align: center;
      transition: opacity 0.4s ease;
      pointer-events: none;
    }
    .hint b {
      font-weight: 500;
      color: var(--zari-light);
    }
    .skip {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      bottom: 50px;
      z-index: 12;
      font-size: 12.5px;
      color: var(--cream-dim);
      background: none;
      border: 0;
      cursor: pointer;
      text-decoration: underline;
      text-underline-offset: 4px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-weight: 500;
      opacity: 0.85;
      transition: color 0.2s, opacity 0.2s;
    }
    .skip:hover {
      color: var(--zari-light);
      opacity: 1;
    }
    .stage.parting .hint,
    .stage.parting .skip {
      opacity: 0;
      pointer-events: none;
    }

    /* Step 2: The Choice ("Two invitations, one wedding") */
    .rv-choice {
      display: block;
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) scale(0.92);
      opacity: 0;
      visibility: hidden;
      pointer-events: none;
      z-index: 8;
      text-align: center;
      padding: 16px;
      width: min(92vw, 560px);
      transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.65s;
    }
    .stage.choosing .rv-choice {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
      visibility: visible;
      pointer-events: auto;
    }
    .stage.leaving .rv-choice {
      opacity: 0;
      transform: translate(-50%, -50%) scale(1.04);
      transition: opacity 0.35s ease-out, transform 0.35s ease-out;
    }
    .stage.choosing .hint,
    .stage.choosing .skip {
      opacity: 0;
      pointer-events: none;
    }
    .ch-ask {
      margin: 0 0 22px;
      font-size: 12.5px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--zari-light);
    }
    .ch-btns {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .ch {
      min-width: 196px;
      padding: 22px 32px 20px;
      display: grid;
      gap: 7px;
      justify-items: center;
      background: var(--bg-card);
      color: var(--ink-primary);
      border: 1.5px solid var(--zari);
      border-radius: 10px;
      cursor: pointer;
      font: inherit;
      box-shadow: 0 26px 46px -18px rgba(0, 0, 0, 0.72), inset 0 0 0 4px var(--zari-faint);
      transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.25s;
    }
    .ch b {
      font-family: var(--font-didone);
      font-style: italic;
      font-weight: 400;
      font-size: 27px;
      line-height: 1.05;
      color: var(--sindoor);
    }
    .ch small {
      font-size: 11.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--ink-secondary);
      font-weight: 600;
    }
    .ch:hover {
      transform: translateY(-4px);
      box-shadow: 0 32px 54px -16px rgba(0, 0, 0, 0.82), 0 0 0 2px var(--zari-light);
    }
    .ch:focus-visible {
      outline: 2px solid var(--zari-light);
      outline-offset: 4px;
    }
    .ch:active { transform: scale(0.97); }
    @media (max-width: 520px) {
      .ch-btns { flex-direction: column; align-items: stretch; }
      .ch { min-width: 240px; }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       STICKY HEADER BAR (ON RED VELVET)
       ═══════════════════════════════════════════════════════════════════════════ */
    .topbar {
      position: sticky;
      top: 0;
      z-index: 40;
      background: var(--velvet-glass);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--zari-hairline);
      padding: 10px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      opacity: 0;
      visibility: hidden;
      transform: translate3d(0, -18px, 0);
      transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s;
    }
    .revealed .topbar {
      opacity: 1;
      visibility: visible;
      transform: translate3d(0, 0, 0);
    }
    .brand-crest {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      text-decoration: none;
      color: var(--cream);
    }
    .brand-crest .monogram-badge {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--zari);
      display: grid;
      place-items: center;
      font-family: var(--font-didone);
      font-style: italic;
      font-weight: 500;
      font-size: 14px;
      color: var(--zari-light);
      background: rgba(0, 0, 0, 0.28);
    }
    .brand-crest .hashtag-pill {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 17px;
      color: var(--zari-light);
      background: none;
      border: 0;
      padding: 2px 6px;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .brand-crest .hashtag-pill:hover { opacity: 0.8; }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 24px;
    }
    .nav-links a {
      text-decoration: none;
      font-size: 11.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--cream-dim);
      transition: color 0.2s;
    }
    .nav-links a:hover { color: var(--zari-light); }
    @media (max-width: 780px) {
      .nav-links { display: none; }
      .topbar { padding: 10px 14px; }
    }

    .top-actions {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .pill-btn {
      background: rgba(255, 255, 255, 0.08);
      color: var(--cream);
      border: 1px solid var(--zari-hairline);
      border-radius: 999px;
      padding: 6px 13px;
      font-family: var(--font-sans);
      font-size: 11.5px;
      letter-spacing: 0.08em;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      transition: all 0.2s var(--ease-out);
    }
    .pill-btn:hover {
      border-color: var(--zari-light);
      background: rgba(212, 175, 90, 0.18);
      transform: translateY(-1px);
    }
    .pill-btn svg {
      width: 14px;
      height: 14px;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.8;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       FLOATING SOUND TOGGLE BUTTON (ROYAL RED VELVET & GOLD)
       ═══════════════════════════════════════════════════════════════════════════ */
    .sound-toggle-btn {
      position: fixed;
      left: 20px;
      bottom: 20px;
      z-index: 150;
      width: 46px;
      height: 46px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1.5px solid var(--zari);
      color: var(--sindoor);
      box-shadow: 0 10px 24px rgba(0, 0, 0, 0.48), inset 0 0 0 2px var(--zari-faint);
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0;
      transition: transform 0.25s var(--ease-out), box-shadow 0.25s, background 0.25s, border-color 0.25s;
    }
    .sound-toggle-btn:hover {
      transform: scale(1.08) translateY(-2px);
      box-shadow: 0 14px 30px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(212, 175, 90, 0.35);
      border-color: var(--zari-light);
    }
    .sound-toggle-btn:active {
      transform: scale(0.95);
    }
    .sound-toggle-btn svg {
      width: 21px;
      height: 21px;
      stroke: currentColor;
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: transform 0.2s ease;
    }
    .sound-toggle-btn .icon-sound-on {
      display: none;
    }
    .sound-toggle-btn .icon-sound-off {
      display: block;
      color: var(--ink-secondary);
    }
    .sound-toggle-btn.playing {
      color: var(--sindoor);
      border-color: var(--zari-light);
    }
    .sound-toggle-btn.playing .icon-sound-on {
      display: block;
    }
    .sound-toggle-btn.playing .icon-sound-off {
      display: none;
    }
    .sound-toggle-btn.playing::after {
      content: "";
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px solid var(--zari);
      opacity: 0.6;
      animation: soundPulse 2.4s ease-out infinite;
      pointer-events: none;
    }
    @keyframes soundPulse {
      0% { transform: scale(0.95); opacity: 0.8; }
      50% { transform: scale(1.16); opacity: 0; }
      100% { transform: scale(1.16); opacity: 0; }
    }
    @media (max-width: 560px) {
      .sound-toggle-btn {
        left: 14px;
        bottom: 14px;
        width: 42px;
        height: 42px;
      }
      .sound-toggle-btn svg {
        width: 19px;
        height: 19px;
      }
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       MAIN CONTAINER & CHAPTER HEADINGS
       ═══════════════════════════════════════════════════════════════════════════ */
    .container {
      width: min(100%, 1020px);
      margin: 0 auto;
      padding: 24px 20px 104px;
      position: relative;
      z-index: 2;
      opacity: 0;
      visibility: hidden;
      transform: translate3d(0, 32px, 0);
      transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.85s;
    }
    .revealed .container {
      opacity: 1;
      visibility: visible;
      transform: translate3d(0, 0, 0);
    }
    section[id] { scroll-margin-top: 76px; }

    .chapter {
      margin-top: 76px;
      opacity: 0;
      transform: translateY(22px);
      transition: opacity 0.85s var(--ease-out), transform 0.85s var(--ease-out);
    }
    .chapter.in {
      opacity: 1;
      transform: none;
    }
    .chapter-head {
      text-align: center;
      margin-bottom: 32px;
    }
    .chapter-kicker {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--zari-light);
      margin: 0 0 8px;
      font-weight: 600;
    }
    body[data-mode="ivory"] .chapter-kicker { color: var(--zari-deep); }
    .chapter-kicker::before,
    .chapter-kicker::after {
      content: "";
      width: 26px;
      height: 1px;
      background: var(--zari-hairline);
    }
    .chapter-title {
      font-family: var(--font-display);
      font-weight: 400;
      font-size: clamp(32px, 6vw, 48px);
      line-height: 1.08;
      margin: 0;
      color: var(--cream);
    }
    .chapter-title em {
      font-style: italic;
      color: var(--zari-light);
    }
    body[data-mode="ivory"] .chapter-title em { color: var(--sindoor); }
    .chapter-sub {
      margin: 8px auto 0;
      max-width: 54ch;
      font-size: 14.5px;
      color: var(--cream-dim);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       CHAPTER I · THE HERO AWADHI BOTANICAL ARCHWAY (IVORY CARD ON RED VELVET)
       ═══════════════════════════════════════════════════════════════════════════ */
    .hero-arch-wrap {
      position: relative;
      max-width: 640px;
      margin: 4px auto 0;
      background: var(--bg-card);
      color: var(--ink-primary);
      border-radius: 320px 320px 20px 20px;
      padding: clamp(38px, 6vw, 54px) clamp(22px, 5vw, 50px) 32px;
      text-align: center;
      box-shadow: var(--shadow-elevated);
      border: 1.5px solid var(--zari);
      overflow: hidden;
    }
    .hero-arch-wrap::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 310px 310px 12px 12px;
      border: 1px solid var(--zari-hairline);
      pointer-events: none;
    }
    .arch-spandrel {
      position: absolute;
      top: 16px;
      width: 80px;
      height: 80px;
      color: var(--zari-deep);
      opacity: 0.55;
      pointer-events: none;
    }
    .arch-spandrel.left { left: 16px; }
    .arch-spandrel.right { right: 16px; transform: scaleX(-1); }
    @media (max-width: 520px) {
      .arch-spandrel { width: 54px; height: 54px; top: 12px; }
    }

    .crown-motif {
      width: 136px;
      height: 66px;
      margin: -18px auto 8px;
      display: block;
      color: var(--zari-deep);
    }
    .draw-path {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
    }
    .revealed .draw-path {
      animation: drawLine 1.8s var(--ease-out) 0.25s forwards;
    }
    @keyframes drawLine { to { stroke-dashoffset: 0; } }

    .sacred-heading {
      font-family: var(--font-hindi);
      font-size: 19px;
      color: var(--sindoor);
      margin: 0;
      letter-spacing: 0.02em;
    }
    .sacred-shloka {
      font-family: var(--font-hindi);
      font-size: 14.5px;
      line-height: 1.6;
      font-weight: 500;
      letter-spacing: 0.02em;
      max-width: 44ch;
      margin: 6px auto 0;
      color: var(--zari-deep);
    }
    .nowrap {
      white-space: nowrap;
    }
    .sacred-eng {
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--zari-deep);
      margin: 7px 0 0;
      font-weight: 600;
    }
    @media (max-width: 600px) {
      .sacred-eng {
        font-size: 9.5px;
        letter-spacing: 0.16em;
        line-height: 1.55;
        max-width: 92%;
        margin-inline: auto;
      }
    }
    .hero-invite-lead {
      margin: 16px auto 6px;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 18px;
      color: var(--ink-secondary);
      max-width: 38ch;
    }
    .couple-display {
      font-family: var(--font-didone);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(44px, 10vw, 66px);
      line-height: 1.02;
      letter-spacing: -0.01em;
      margin: 6px 0 10px;
      color: var(--ink-primary);
    }
    .couple-display .name-block { display: block; }
    .couple-display .conjunction {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 14px;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 0.48em;
      color: var(--sindoor);
      margin: 4px 0;
    }
    .couple-display .conjunction::before,
    .couple-display .conjunction::after {
      content: "";
      width: 36px;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--zari-deep), transparent);
    }

    .muhurat-medallion {
      margin: 16px auto 0;
      padding: 15px 22px;
      background: var(--bg-parchment);
      border: 1px solid var(--zari-hairline);
      border-radius: 14px;
      max-width: 430px;
      position: relative;
    }
    .medallion-date-num {
      font-family: var(--font-display);
      font-size: clamp(26px, 6.5vw, 34px);
      font-weight: 600;
      letter-spacing: 0.14em;
      color: var(--ink-primary);
      line-height: 1.1;
    }
    .medallion-date-words {
      font-size: 11.5px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--sindoor);
      margin-top: 5px;
      font-weight: 600;
    }
    .medallion-divider {
      width: 48px;
      height: 1px;
      background: var(--zari-hairline);
      margin: 10px auto;
    }
    .medallion-venue {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 20px;
      color: var(--ink-primary);
      line-height: 1.2;
      font-weight: 600;
    }
    .medallion-city {
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink-secondary);
      margin-top: 3px;
    }

    .hero-actions {
      margin-top: 18px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
    }
    .btn-primary {
      background: var(--sindoor);
      color: #FFFDF9;
      border: 1px solid var(--sindoor);
      border-radius: 999px;
      padding: 11px 22px;
      font-size: 11.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s var(--ease-out);
      text-decoration: none;
    }
    .btn-primary:hover {
      background: var(--velvet-deep);
      border-color: var(--zari);
      transform: translateY(-2px);
    }
    .btn-secondary {
      background: var(--bg-card);
      color: var(--ink-primary);
      border: 1px solid var(--zari-deep);
      border-radius: 999px;
      padding: 11px 20px;
      font-size: 11.5px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.25s var(--ease-out);
      text-decoration: none;
    }
    .btn-secondary:hover {
      border-color: var(--sindoor);
      background: var(--bg-parchment);
      transform: translateY(-2px);
    }
    .botanical-footer-vine {
      width: 180px;
      height: 32px;
      margin: 18px auto 0;
      display: block;
      color: var(--zari-deep);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       INSTALLATION 1 · THE ROYAL FARMAN (IMPERIAL SCROLL-TRIGGERED UNFURL)
       ═══════════════════════════════════════════════════════════════════════════ */
    .farman-stage {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 36px;
      margin-top: 18px;
      perspective: 1200px;
    }
    @media (max-width: 860px) {
      .farman-stage {
        grid-template-columns: 1fr;
        gap: 44px;
        max-width: 520px;
        margin-inline: auto;
      }
      .farman-scroll {
        margin-bottom: 32px !important;
      }
    }

    .farman-scroll {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      transition: transform 0.4s var(--ease-out), filter 0.4s ease;
      margin-bottom: 26px;
    }

    /* Top & Bottom Golden Roller Rods */
    .farman-rod {
      position: relative;
      width: calc(100% + 28px);
      height: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 5;
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
    }
    .farman-rod .rod-bar {
      flex: 1;
      height: 14px;
      background: linear-gradient(180deg, #F9E2A8 0%, #D4AF5A 45%, #8C6A28 85%, #5E4416 100%);
      border-radius: 4px;
      box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.5), inset 0 -2px 3px rgba(0, 0, 0, 0.6);
      position: relative;
    }
    .farman-rod .rod-bar::after {
      content: "";
      position: absolute;
      inset: 2px 8px;
      border-top: 1px solid rgba(255, 255, 255, 0.5);
      border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    }
    .farman-rod .finial {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #FFF0C2 0%, #D4AF5A 50%, #7A581E 100%);
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #5E4416;
      flex-shrink: 0;
      position: relative;
    }
    .farman-rod .finial::after {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 6px;
      height: 10px;
      background: #D4AF5A;
      border-radius: 2px;
    }
    .farman-rod .finial.left::after { right: -4px; }
    .farman-rod .finial.right::after { left: -4px; }

    .farman-rod.bottom {
      margin-top: -2px;
      position: relative;
    }
    .farman-tassel {
      position: absolute;
      top: 100%;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin-top: -2px;
      z-index: 6;
      filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45));
      pointer-events: none;
    }
    .tassel-svg {
      display: block;
      width: 22px;
      height: 30px;
    }

    /* Unfurling Scroll Body */
    .farman-body {
      position: relative;
      width: 100%;
      background:
        radial-gradient(circle at 50% 12%, rgba(215, 180, 106, 0.18), transparent 60%),
        linear-gradient(180deg, #FDF9F0 0%, #F5ECDC 45%, #EFE3CE 100%);
      border-left: 2px solid var(--zari);
      border-right: 2px solid var(--zari);
      box-shadow:
        0 24px 48px -12px rgba(0, 0, 0, 0.6),
        inset 0 0 40px rgba(184, 137, 56, 0.15),
        inset 12px 0 16px -8px rgba(0, 0, 0, 0.12),
        inset -12px 0 16px -8px rgba(0, 0, 0, 0.12);
      padding: 0 28px;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transform: scaleY(0.04);
      transform-origin: top center;
      -webkit-backface-visibility: hidden;
      backface-visibility: hidden;
      will-change: max-height, transform, opacity;
      transition: max-height 0.5s cubic-bezier(0.3, 0, 0.2, 1),
                  transform 0.5s cubic-bezier(0.3, 0, 0.2, 1),
                  padding 0.35s ease,
                  opacity 0.35s ease;
      color: var(--ink-primary);
      text-align: center;
    }

    /* Unfurled State */
    .farman-scroll.unfurled .farman-body {
      max-height: 640px;
      transform: scaleY(1);
      padding: 34px 28px 24px;
      opacity: 1;
      transition: max-height 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  padding 0.45s ease,
                  opacity 0.45s ease;
    }

    /* Dynamic Gold Foil Shimmer */
    .farman-shimmer {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle 240px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 235, 175, 0.35), transparent 70%);
      opacity: 0;
      transition: opacity 0.3s;
      z-index: 3;
    }
    .farman-scroll:hover .farman-shimmer {
      opacity: 1;
    }

    /* Ornate Filigree Corner Borders */
    .farman-filigree-frame {
      position: absolute;
      inset: 10px;
      border: 1px solid rgba(184, 137, 56, 0.38);
      pointer-events: none;
      z-index: 1;
    }
    .farman-filigree-frame::before {
      content: "";
      position: absolute;
      inset: 4px;
      border: 1px dashed rgba(184, 137, 56, 0.28);
    }
    .farman-filigree-frame .corner {
      position: absolute;
      width: 28px;
      height: 28px;
      color: var(--zari-deep);
    }
    .farman-filigree-frame .corner.tl { top: -2px; left: -2px; }
    .farman-filigree-frame .corner.tr { top: -2px; right: -2px; }
    .farman-filigree-frame .corner.bl { bottom: -2px; left: -2px; }
    .farman-filigree-frame .corner.br { bottom: -2px; right: -2px; }

    .farman-top-kalash {
      margin-bottom: 8px;
      color: var(--zari-deep);
      position: relative;
      z-index: 2;
    }

    .farman-content {
      position: relative;
      z-index: 2;
      opacity: 0;
      transform: translateY(10px);
      transition: opacity 0.2s ease, transform 0.2s ease;
    }
    .farman-scroll.unfurled .farman-content {
      opacity: 1;
      transform: translateY(0);
      transition: opacity 0.4s ease 0.15s, transform 0.4s var(--ease-out) 0.15s;
    }

    .sanctum-badge {
      display: inline-block;
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--sindoor);
      background: var(--sindoor-soft);
      border: 1px solid rgba(142, 27, 40, 0.26);
      padding: 4px 12px;
      border-radius: 999px;
      margin-bottom: 10px;
      font-weight: 600;
    }
    .sanctum-name {
      font-family: var(--font-display);
      font-size: clamp(27px, 4.2vw, 34px);
      font-weight: 700;
      margin: 0 0 6px;
      line-height: 1.15;
      background: linear-gradient(135deg, #8A641A 0%, #D4AF5A 22%, #FFF4CC 48%, #9E7828 72%, #C49838 100%);
      background-size: 220% auto;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      text-fill-color: transparent;
      filter: drop-shadow(0 1px 1.5px rgba(90, 45, 10, 0.35));
      animation: goldFoilSheen 7s ease-in-out infinite alternate;
    }

    @keyframes goldFoilSheen {
      0% { background-position: 0% 50%; }
      100% { background-position: 100% 50%; }
    }
    .sanctum-rel {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 16px;
      color: var(--sindoor);
      margin: 0 0 4px;
    }
    .sanctum-parents {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--zari-deep);
      margin: 0 0 8px;
      line-height: 1.45;
    }
    .sanctum-grand {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 14.5px;
      color: var(--zari-deep);
      margin: 0;
      line-height: 1.4;
    }

    .farman-divider {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 12px;
      margin: 10px auto;
      color: var(--zari-deep);
      max-width: 200px;
    }
    .farman-divider span {
      flex: 1;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--zari), transparent);
    }
    .farman-divider i {
      font-style: normal;
      font-size: 13px;
      color: var(--sindoor);
    }

    /* Interactive Wax Seal / Shower Blessings Trigger */
    .farman-seal-btn {
      position: relative;
      z-index: 4;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(142, 27, 40, 0.08);
      border: 1px solid var(--zari-deep);
      border-radius: 999px;
      padding: 6px 14px 6px 8px;
      margin-top: 14px;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 11.5px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--sindoor);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
      transition: all 0.25s var(--ease-out);
    }
    .farman-seal-btn:hover {
      background: var(--sindoor);
      color: var(--cream);
      border-color: var(--sindoor);
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 8px 18px rgba(142, 27, 40, 0.35);
    }
    .farman-seal-btn:active {
      transform: translateY(0) scale(0.98);
    }
    .farman-seal-btn .seal-disc {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: radial-gradient(circle, var(--sindoor) 0%, #5E0C16 100%);
      display: grid;
      place-items: center;
      color: var(--zari-light);
      font-size: 10px;
      box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease;
    }
    .farman-seal-btn:hover .seal-disc {
      transform: rotate(30deg) scale(1.1);
      color: #FFF;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       INSTALLATION 2 · THE 7-PETAL AWADHI SURYA-CHANDRA CHAKRA WHEEL
       & MORPHING SKY ARCHWAY STAGE
       ═══════════════════════════════════════════════════════════════════════════ */
    .chakra-theater {
      display: grid;
      grid-template-columns: 400px 1fr;
      gap: 32px;
      align-items: start;
      margin-top: 16px;
    }
    @media (max-width: 880px) {
      .chakra-theater {
        grid-template-columns: 1fr;
        gap: 24px;
      }
    }

    .chakra-wheel-col {
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .chakra-wheel-box {
      position: relative;
      width: min(86vw, 370px);
      height: min(86vw, 370px);
      display: grid;
      place-items: center;
      user-select: none;
    }
    .chakra-pointer {
      position: absolute;
      top: -8px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 6;
      color: var(--zari-light);
      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
    }

    .chakra-rotor {
      position: absolute;
      inset: 14px;
      border-radius: 50%;
      border: 2px solid var(--zari);
      background:
        radial-gradient(circle at center, var(--velvet-mid) 0 36%, var(--velvet-deep) 37% 68%, var(--velvet-mid) 69% 100%);
      box-shadow: var(--shadow-elevated), inset 0 0 0 6px rgba(212, 175, 90, 0.16);
      transition: transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
    }
    .chakra-rotor::before {
      content: "";
      position: absolute;
      inset: 18px;
      border-radius: 50%;
      border: 1px dashed var(--zari-hairline);
      pointer-events: none;
    }
    .chakra-svg-spokes {
      width: 100%;
      height: 100%;
      color: var(--zari);
      opacity: 0.65;
    }

    .chakra-node {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 68px;
      height: 68px;
      margin: -34px 0 0 -34px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 1.5px solid var(--zari);
      color: var(--ink-primary);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      cursor: pointer;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
      transition: transform 0.55s var(--ease-spring), background 0.3s, color 0.3s, border-color 0.3s, box-shadow 0.3s;
      padding: 4px;
      z-index: 4;
    }
    .chakra-node:hover {
      border-color: var(--zari-light);
    }
    .chakra-node.active {
      background: linear-gradient(135deg, var(--velvet-light), var(--sindoor));
      color: #FFFDF9;
      border-color: var(--zari-light);
      box-shadow: 0 0 0 4px rgba(212, 175, 90, 0.32), 0 12px 24px -6px rgba(0, 0, 0, 0.65);
    }
    .chakra-node .node-num {
      font-size: 9px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      opacity: 0.78;
      font-weight: 600;
    }
    .chakra-node .node-lbl {
      font-family: var(--font-display);
      font-size: 13.5px;
      font-weight: 600;
      line-height: 1;
      white-space: nowrap;
    }

    .chakra-hub {
      position: relative;
      z-index: 5;
      width: 126px;
      height: 126px;
      border-radius: 50%;
      background: var(--bg-card);
      border: 2px solid var(--zari);
      box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), inset 0 0 16px var(--zari-faint);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 6px;
    }
    .hub-roman {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 11.5px;
      color: var(--sindoor);
      letter-spacing: 0.04em;
      white-space: nowrap;
      line-height: 1.2;
    }
    .hub-title {
      font-family: var(--font-display);
      font-weight: 600;
      font-size: 17.5px;
      line-height: 1.1;
      color: var(--ink-primary);
      margin: 2px 0;
      white-space: nowrap;
    }
    .hub-eta {
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--zari-deep);
      font-weight: 600;
      white-space: nowrap;
      margin-top: 1px;
    }

    .wheel-controls {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-top: 26px;
      position: relative;
      z-index: 10;
    }
    .wheel-step-btn {
      background: rgba(255, 255, 255, 0.08);
      color: var(--cream);
      border: 1px solid var(--zari-hairline);
      border-radius: 999px;
      padding: 10px 22px;
      font-size: 11.5px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.2s;
      touch-action: manipulation;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
    }
    body[data-mode="ivory"] .wheel-step-btn {
      background: var(--bg-card);
      color: var(--ink-primary);
    }
    .wheel-step-btn:hover {
      border-color: var(--zari-light);
      background: rgba(212, 175, 90, 0.22);
    }

    /* Right: Morphing Sky Archway Stage */
    .morph-arch-stage {
      position: relative;
      border-radius: 260px 260px 20px 20px;
      padding: 12px;
      background: var(--bg-card);
      border: 2px solid var(--zari);
      box-shadow: var(--shadow-elevated);
      overflow: hidden;
    }
    .morph-sky {
      border-radius: 248px 248px 14px 14px;
      padding: 52px 32px 28px;
      color: #FAF5EC;
      position: relative;
      overflow: hidden;
      transition: background 0.75s var(--ease-out);
      background: var(--stage-sky, linear-gradient(180deg, #4A1219 0%, #6E1D27 55%, #8C2B32 100%));
      min-height: 520px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    @media (max-width: 540px) {
      .morph-sky {
        padding: 44px 20px 24px;
        min-height: 480px;
      }
    }
    .morph-sky::before {
      content: "";
      position: absolute;
      inset: 10px;
      border-radius: 238px 238px 8px 8px;
      border: 1px solid rgba(236, 208, 142, 0.34);
      pointer-events: none;
    }

    .sky-stars {
      position: absolute;
      inset: 0;
      background-image:
        radial-gradient(1.5px 1.5px at 18% 22%, #FFF, transparent),
        radial-gradient(1.2px 1.2px at 34% 14%, #FFE6A3, transparent),
        radial-gradient(1.6px 1.6px at 76% 19%, #FFF, transparent),
        radial-gradient(1.2px 1.2px at 84% 34%, #FFE6A3, transparent),
        radial-gradient(1.5px 1.5px at 24% 38%, #FFF, transparent),
        radial-gradient(1.4px 1.4px at 64% 12%, #FFF, transparent);
      opacity: var(--stars-op, 0);
      transition: opacity 0.75s ease;
      pointer-events: none;
    }

    .stage-illustration-wrap {
      position: relative;
      z-index: 2;
      text-align: center;
      margin-bottom: 4px;
    }
    .stage-hero-svg {
      width: 84px;
      height: 84px;
      margin: 0 auto;
      display: block;
      color: #ECD08E;
      filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.3));
    }
    .stage-hero-svg path,
    .stage-hero-svg circle,
    .stage-hero-svg line {
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    .stage-hero-svg .svg-glow {
      fill: #ECD08E;
      stroke: none;
      opacity: 0.88;
    }

    .stage-body {
      position: relative;
      z-index: 2;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 6px 0;
      min-height: 240px;
      justify-content: center;
    }
    .stage-ceremony-title {
      font-family: var(--font-display);
      font-weight: 500;
      font-size: clamp(28px, 5vw, 40px);
      line-height: 1.1;
      margin: 0;
      color: #FFFDF9;
      min-height: 2.3em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .stage-ceremony-when {
      font-size: 12px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #ECD08E;
      margin: 2px 0 0;
      font-weight: 600;
    }
    .stage-ceremony-venue {
      font-size: 13.5px;
      letter-spacing: 0.04em;
      color: rgba(255, 253, 249, 0.88);
      margin: 0;
      max-width: 42ch;
      line-height: 1.45;
      min-height: 2.8em;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .stage-ceremony-desc {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 18px;
      line-height: 1.48;
      color: rgba(255, 253, 249, 0.94);
      max-width: 42ch;
      margin: 6px auto 0;
      padding-top: 10px;
      border-top: 1px solid rgba(236, 208, 142, 0.24);
      min-height: 4.4em;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .stage-actions-footer {
      position: relative;
      z-index: 2;
      margin-top: 16px;
      padding-top: 12px;
      border-top: 1px solid rgba(236, 208, 142, 0.24);
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .stage-link {
      color: #ECD08E;
      text-decoration: none;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 600;
      background: none;
      border: 0;
      padding: 4px 0;
      cursor: pointer;
    }
    .stage-link:hover { color: #FFFFFF; text-decoration: underline; }

    /* ═══════════════════════════════════════════════════════════════════════════
       CHAPTER III · MUHURAT COUNTDOWN DIAL & BLESSING SHOWER
       ═══════════════════════════════════════════════════════════════════════════ */
    .countdown-banner {
      background: var(--bg-card);
      color: var(--ink-primary);
      border: 1.5px solid var(--zari);
      border-radius: 20px;
      padding: 34px 24px 30px;
      text-align: center;
      box-shadow: var(--shadow-elevated);
      position: relative;
      overflow: hidden;
    }
    .countdown-banner .chapter-kicker { color: var(--zari-deep); }
    .countdown-banner .chapter-title { color: var(--ink-primary); }
    .countdown-banner .chapter-title em { color: var(--sindoor); }
    .countdown-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(64px, 115px));
      justify-content: center;
      gap: 14px;
      margin: 18px auto 20px;
    }
    @media (max-width: 480px) {
      .countdown-grid { gap: 8px; }
    }
    .cd-arch {
      background: var(--bg-parchment);
      border: 1px solid var(--zari-hairline);
      border-radius: 56px 56px 10px 10px;
      padding: 18px 8px 12px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .cd-num {
      font-family: var(--font-display);
      font-size: clamp(32px, 7vw, 46px);
      font-weight: 600;
      line-height: 1;
      color: var(--sindoor);
      font-variant-numeric: tabular-nums;
    }
    .cd-unit {
      font-size: 10px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--zari-deep);
      margin-top: 6px;
      font-weight: 600;
    }
    .cd-caption {
      margin: 0 0 20px;
      font-family: var(--font-display);
      font-style: italic;
      font-size: 18.5px;
      color: var(--ink-secondary);
    }
    .blessing-btn {
      background: linear-gradient(135deg, var(--velvet-light), var(--sindoor));
      color: #FFFDF9;
      border: 1px solid var(--zari-light);
      border-radius: 999px;
      padding: 11px 24px;
      font-size: 12px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 500;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 12px 28px -10px rgba(142, 27, 40, 0.65);
      transition: transform 0.2s var(--ease-out), box-shadow 0.2s;
    }
    .blessing-btn:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 16px 34px -10px rgba(142, 27, 40, 0.8);
    }
    .blessing-count {
      background: rgba(255, 255, 255, 0.18);
      padding: 2px 9px;
      border-radius: 999px;
      font-variant-numeric: tabular-nums;
      font-size: 11.5px;
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       CHAPTER IV · WEDDING VENUES
       ═══════════════════════════════════════════════════════════════════════════ */
    .venues-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
    }
    .venues-grid.single-venue {
      grid-template-columns: minmax(0, 560px);
      justify-content: center;
    }
    @media (max-width: 760px) {
      .venues-grid {
        grid-template-columns: 1fr;
      }
    }
    .venue-card {
      background: var(--bg-card);
      color: var(--ink-primary);
      border: 1.5px solid var(--zari);
      border-radius: 22px;
      padding: 36px 28px 32px;
      box-shadow: var(--shadow-elevated);
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: relative;
      overflow: hidden;
    }
    .venue-card::before {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 16px;
      border: 1px solid var(--zari-hairline);
      pointer-events: none;
    }
    .pavilion-role {
      font-size: 10.5px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--sindoor);
      font-weight: 600;
      margin-bottom: 8px;
    }
    .pavilion-name {
      font-family: var(--font-display);
      font-size: clamp(25px, 4vw, 32px);
      font-weight: 600;
      color: var(--ink-primary);
      margin: 0 0 10px;
      line-height: 1.12;
    }
    .pavilion-addr {
      font-size: 14.5px;
      color: var(--ink-secondary);
      margin: 0 0 22px;
      max-width: 42ch;
      line-height: 1.55;
      flex: 1;
    }
    .pavilion-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 10px;
      position: relative;
      z-index: 1;
    }

    /* Closing Royal Seal Footer */
    .closing-seal {
      margin-top: 56px;
      text-align: center;
      padding: 32px 20px 12px;
      border-top: 1px solid var(--zari-hairline);
    }
    .closing-compliments {
      font-family: var(--font-display);
      font-style: italic;
      font-size: 22px;
      color: var(--cream);
      margin: 0;
    }

    footer {
      margin-top: 28px;
      text-align: center;
      font-size: 12.5px;
      color: var(--cream-dim);
      letter-spacing: 0.08em;
    }
    footer strong {
      font-family: var(--font-display);
      font-size: 17px;
      font-weight: 500;
      color: var(--zari-light);
    }

    /* Floating Blessing Petals Layer */
    .petal-stage {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 90;
      overflow: hidden;
    }
    .blessing-petal {
      position: absolute;
      top: -24px;
      width: var(--sz, 14px);
      height: calc(var(--sz, 14px) * 1.45);
      border-radius: 60% 40% 60% 40% / 70% 50% 50% 30%;
      background: var(--clr, #E08A2B);
      opacity: 0.85;
      animation: petalFall var(--dur, 4.2s) linear forwards;
    }
    @keyframes petalFall {
      0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0.92; }
      100% { transform: translate3d(var(--dx, 60px), 106vh, 0) rotate(var(--rot, 420deg)); opacity: 0; }
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translate(-50%, 14px);
      background: var(--bg-card);
      color: var(--ink-primary);
      border: 1.5px solid var(--zari);
      padding: 10px 20px;
      border-radius: 999px;
      font-size: 13px;
      letter-spacing: 0.04em;
      box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5);
      opacity: 0;
      pointer-events: none;
      transition: all 0.28s var(--ease-out);
      z-index: 120;
    }
    .toast.on {
      opacity: 1;
      transform: translate(-50%, 0);
    }

    /* ═══════════════════════════════════════════════════════════════════════════
       ADD TO CALENDAR MODAL & MOBILE BOTTOM SHEET
       ═══════════════════════════════════════════════════════════════════════════ */
    .cal-modal-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(18, 2, 4, 0.78);
      backdrop-filter: blur(8px);
      -webkit-backdrop-filter: blur(8px);
      z-index: 200;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px;
      opacity: 1;
      transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .cal-modal-backdrop[hidden] {
      display: none;
    }
    .cal-modal-card {
      background:
        radial-gradient(circle at 50% 0%, rgba(215, 180, 106, 0.22), transparent 70%),
        var(--bg-card);
      color: var(--ink-primary);
      border: 1.8px solid var(--zari);
      border-radius: 22px;
      max-width: 440px;
      width: 100%;
      padding: 28px 24px 24px;
      box-shadow: 0 28px 60px rgba(0, 0, 0, 0.7), inset 0 0 32px rgba(184, 137, 56, 0.12);
      position: relative;
      animation: calModalIn 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes calModalIn {
      from { transform: scale(0.92) translateY(12px); opacity: 0; }
      to { transform: scale(1) translateY(0); opacity: 1; }
    }
    @media (max-width: 600px) {
      .cal-modal-backdrop {
        align-items: flex-end;
        padding: 0;
      }
      .cal-modal-card {
        border-radius: 24px 24px 0 0;
        border-bottom: 0;
        max-width: 100%;
        padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
        animation: calSheetUp 0.36s cubic-bezier(0.16, 1, 0.3, 1);
      }
      @keyframes calSheetUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
      }
    }
    .cal-modal-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--zari-hairline);
      background: rgba(92, 12, 18, 0.08);
      color: var(--ink-secondary);
      font-size: 22px;
      line-height: 1;
      display: grid;
      place-items: center;
      cursor: pointer;
      transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .cal-modal-close:hover {
      background: rgba(92, 12, 18, 0.16);
      color: var(--ink-primary);
      transform: scale(1.08);
    }
    .cal-modal-head {
      text-align: center;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--zari-hairline);
    }
    .cal-kicker {
      font-size: 10px;
      letter-spacing: 0.24em;
      text-transform: uppercase;
      color: var(--sindoor);
      margin: 0 0 6px;
      font-weight: 600;
    }
    .cal-title {
      font-family: var(--font-display);
      font-size: 22px;
      color: var(--ink-primary);
      margin: 0 0 6px;
      line-height: 1.25;
      font-weight: 600;
    }
    .cal-meta {
      font-size: 13px;
      color: var(--ink-secondary);
      margin: 0 0 4px;
      font-weight: 500;
    }
    .cal-venue {
      font-size: 12px;
      color: var(--ink-secondary);
      opacity: 0.85;
      margin: 0;
    }
    .cal-options {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 18px;
    }
    .cal-option-btn {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 12px 16px;
      border-radius: 14px;
      border: 1.5px solid var(--zari-hairline);
      background: #FAF5EB;
      color: var(--ink-primary);
      text-decoration: none;
      cursor: pointer;
      transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s, border-color 0.2s;
      font-family: inherit;
      width: 100%;
      box-sizing: border-box;
      text-align: left;
    }
    .cal-option-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
      border-color: var(--sindoor);
      background: #FFFDF9;
    }
    .cal-opt-icon {
      width: 38px;
      height: 38px;
      border-radius: 10px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
    }
    .cal-option-btn.google .cal-opt-icon {
      background: #E8F0FE;
      color: #1a73e8;
    }
    .cal-option-btn.apple .cal-opt-icon {
      background: #111111;
      color: #FFFFFF;
    }
    .cal-option-btn.outlook .cal-opt-icon {
      background: #EBF3FC;
      color: #0078D4;
    }
    .cal-option-btn.ics .cal-opt-icon {
      background: rgba(92, 12, 18, 0.08);
      color: var(--sindoor);
    }
    .cal-opt-text {
      flex: 1;
      display: flex;
      flex-direction: column;
    }
    .cal-opt-text strong {
      font-size: 14px;
      color: var(--ink-primary);
      font-weight: 600;
    }
    .cal-opt-text span {
      font-size: 11px;
      color: var(--ink-secondary);
      margin-top: 2px;
    }
    .cal-opt-arrow {
      font-size: 15px;
      color: var(--zari-deep);
      opacity: 0.7;
      font-weight: 600;
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
      .chapter { opacity: 1; transform: none; }
    }