:root {
      --maroon: #123d7f;
      --maroon-deep: #0d2f65;
      --maroon-dark: #081d42;
      --gold: #d9b34a;
      --gold-light: #f0d884;
      --gold-glow: rgba(217,179,74,0.18);
      --gold-glow-strong: rgba(217,179,74,0.34);
      --cream: #f7fbff;
      --cream-soft: rgba(244,248,255,0.92);
      --burgundy: #1f5fb0;
      --page-bg: #fcfaf5;
      --page-alt: #f5ecdd;
      --ink: #2a1216;
      --muted: #6b4f52;
      --font-display: 'Playfair Display', Georgia, serif;
      --font-body: 'Cormorant Garamond', 'Times New Roman', serif;
      --font-sans: 'Josefin Sans', sans-serif;
    }
    *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
    html{scroll-behavior:smooth;overflow-x:hidden}
    body{font-family:var(--font-body);background:var(--page-bg);color:var(--ink);overflow-x:hidden;-webkit-font-smoothing:antialiased}
    ::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--page-alt)}::-webkit-scrollbar-thumb{background:var(--gold);border-radius:3px}

    /* PETALS */
    .petal-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1150;transition:opacity 1.5s ease}
    .petal-canvas.hidden{opacity:0}
    .petal{position:absolute;top:-60px;width:20px;height:26px;opacity:0;animation:petalFall linear infinite}
    .petal svg{width:100%;height:100%}
    @keyframes petalFall{0%{transform:translateY(0) rotate(0deg) scale(1);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translateY(110vh) rotate(720deg) scale(.5);opacity:0}}

    

	/* Landing kolam: draw first, then rotate the completed design as one unit. */
    .hero-chakra-svg {
      position: absolute;
      left: 16px;
      top: 50%;
      width: 58px;
      height: 58px;
      overflow: visible;
      transform: translateY(-50%);
      animation: none !important;
      filter: drop-shadow(0 0 7px rgba(255,224,125,.92)) drop-shadow(0 0 16px rgba(217,164,65,.58));
    }

    /* Prevent any legacy per-ring rotation from styles.css. */
    .hero-chakra-svg .ring-outer,
    .hero-chakra-svg .ring-blades,
    .hero-chakra-svg .ring-mid,
    .hero-chakra-svg .ring-inner,
    .hero-chakra-svg .ring-core {
      animation: none !important;
      transform: none !important;
    }

    .hero-chakra-svg .ring-outer,
    .hero-chakra-svg .ring-blades,
    .hero-chakra-svg .ring-mid,
    .hero-chakra-svg .ring-inner { opacity: .92 !important; }
    .hero-chakra-svg .ring-core { opacity: .9 !important; }
    .hero-chakra-svg .ring-outer > use,
    .hero-chakra-svg .ring-blades > use,
    .hero-chakra-svg .ring-mid > use,
    .hero-chakra-svg .ring-inner > use,
    .hero-chakra-svg .ring-outer > circle,
    .hero-chakra-svg .ring-blades > circle,
    .hero-chakra-svg .ring-mid > circle { stroke-width: 1.45; }

    .hero-chakra-svg .ring-outer > use,
    .hero-chakra-svg .ring-blades > use,
    .hero-chakra-svg .ring-mid > use,
    .hero-chakra-svg .ring-inner > use,
    .hero-chakra-svg .ring-outer > circle,
    .hero-chakra-svg .ring-blades > circle,
    .hero-chakra-svg .ring-mid > circle {
      stroke-dasharray: 1;
      stroke-dashoffset: 1;
      animation: heroKolamDraw 1.1s ease-out forwards;
      animation-delay: calc(var(--i) * 24ms);
    }

    .hero-chakra-svg .ring-core > circle {
      opacity: 0;
      transform-box: fill-box;
      transform-origin: center;
      animation: heroKolamDot .28s ease-out forwards;
      animation-delay: calc(var(--i) * 24ms);
    }

    @keyframes heroKolamDraw {
      from { stroke-dashoffset: 1; }
      to   { stroke-dashoffset: 0; }
    }

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

	/* LANDING */
    .landing {
      position: fixed;
      inset: 0;
      z-index: 1100;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      min-height: 100svh;
      padding: clamp(22px, 4vw, 44px);
      overflow: hidden;
      background: #091d40;
      text-align: center;
      transform: translateY(0);
      opacity: 1;
      transition: transform 3.8s cubic-bezier(.22,.61,.36,1), opacity 1.2s ease 2.6s;
    }
    .landing[hidden] { display: none; }
    html.invitation-opening,
    html.invitation-opening body { overflow: hidden; }

    .landing-hero-media,
    .landing-hero-overlay {
      position: absolute;
      inset: 0;
    }
    .landing-hero-media { overflow: hidden; }
    .landing-hero-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 54% 52%;
      transform-origin: 69% 43%;
      transform: scale(1);
      transition: transform 3.8s cubic-bezier(.22,.61,.36,1), filter 2.4s ease;
      filter: saturate(1.04) brightness(1.02);
    }
    .landing-hero-overlay {
      background:
        linear-gradient(180deg, rgba(7,24,59,.15) 0%, rgba(7,24,59,.08) 28%, rgba(7,24,59,.62) 100%),
        radial-gradient(circle at 82% 30%, rgba(255,241,209,.28), transparent 34%),
        linear-gradient(90deg, rgba(7,24,59,.36) 0%, rgba(7,24,59,.08) 28%, rgba(7,24,59,.12) 100%);
      pointer-events: none;
    }

    .landing-copy {
      position: relative;
      z-index: 2;
      width: min(92vw, 1120px);
      margin: 0 auto 130px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      text-align: left;
      transition: opacity .55s ease, transform .9s ease;
    }
    .landing-overline {
      font-family: var(--font-sans);
      font-size: clamp(.82rem, 1.9vw, 1rem);
      letter-spacing: .42em;
      text-transform: uppercase;
      color: var(--gold-light);
      margin-bottom: 16px;
      text-shadow: 0 1px 18px rgba(7,24,59,.45);
    }
    .landing-title {
      font-family: var(--font-display);
      font-size: clamp(3rem, 8vw, 6.4rem);
      line-height: 1;
      font-weight: 700;
      color: #ffffff;
      text-shadow: 0 10px 35px rgba(7,24,59,.28);
      margin-bottom: 14px;
    }
    .landing-title span { color: var(--gold-light); font-style: italic; }
    .landing-subtitle {
      max-width: 40rem;
      font-family: var(--font-sans);
      font-size: clamp(.95rem, 2.4vw, 1.2rem);
      letter-spacing: .12em;
      text-transform: uppercase;
      color: rgba(255,255,255,.95);
      line-height: 1.7;
      text-shadow: 0 8px 22px rgba(7,24,59,.36);
    }
    .landing-namah {
      position: relative;
      z-index: 2;
      max-width: 90%;
      margin: 18px 0 0;
      font-family: var(--font-body);
      font-size: clamp(12px, 2.7vw, 18px);
      font-weight: 700;
      color: var(--gold-light);
      letter-spacing: 1px;
      line-height: 1.8;
      text-shadow: 0 6px 18px rgba(7,24,59,.36);
      transition: opacity .4s ease;
    }
    /* Phase 1: click is registered and the full-screen Om takes over. */
    .landing.is-opening {
      pointer-events: none;
    }

    /* Phase 2: after the Om fills the viewport, the temple cover glides upward. */
    .landing.is-sliding {
      transform: translateY(-100%);
      opacity: 0;
    }

    .landing.is-sliding .landing-hero-image {
      transform: scale(1.42);
      filter: brightness(1.1) saturate(1.06);
    }

    .landing.is-sliding .landing-copy {
      opacity: 0;
      transform: translateY(-22px);
    }

.invitation-leaf { display: none; }

    /* HERO BUTTON */
    .hero-chakra-container {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: clamp(26px, 4.5vh, 56px);
      z-index: 3;
      width: min(90vw, 340px);
      height: 84px;
      margin: 0;
      border: 1px solid rgba(240,216,132,.55);
      border-radius: 24px;
      padding: 0 24px 0 86px;
      color: var(--gold-light);
      background: linear-gradient(135deg, rgba(74,9,19,.94), rgba(122,20,32,.93));
      box-shadow: 0 18px 40px rgba(54,8,16,.28), inset 0 0 0 1px rgba(255,243,201,.08);
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: box-shadow .3s ease;
      will-change: transform, opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
    }
    .invitation-button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 5px; }
    .invitation-button:disabled { cursor: default; }
    .hero-chakra-container:hover:not(:disabled) { box-shadow: 0 24px 50px rgba(7,24,59,.24), 0 0 0 1px rgba(240,216,132,.15) inset; }
    .hero-chakra-container:hover:not(:disabled) .hero-chakra-svg { filter: drop-shadow(0 0 12px rgba(240,216,132,.68)); }
    /* Smooth button close: one uninterrupted GPU transform, with the label fading
       before the button becomes extremely narrow. */
    .landing.is-opening .hero-chakra-container {
      pointer-events: none;
      transition: none !important;
      transform-origin: 50% 50%;
      will-change: transform, opacity;
      backface-visibility: hidden;
      -webkit-backface-visibility: hidden;
      /* Many small, pre-eased transform steps below make the side-collapse read as
         one continuous squeeze instead of a handful of visible jumps. */
      animation: invitationButtonCollapseSmooth 1s linear forwards;
    }

    .landing.is-opening .hero-chakra-container::after {
      animation: none !important;
      transition: none !important;
      opacity: .34;
    }

    .landing.is-opening .hero-chakra-container:hover {
      box-shadow:
        0 18px 40px rgba(54,8,16,.28),
        inset 0 0 0 1px rgba(255,243,201,.08);
    }

    /* Fade only the inner content. Keeping the parent animation independent prevents
       the SVG/text from forcing extra repaints while the button is being squeezed. */
    .landing.is-opening .invitation-button-center,
    .landing.is-opening .hero-chakra-svg {
      transition: none !important;
      animation: invitationButtonContentFade .48s cubic-bezier(.25,.1,.25,1) forwards;
      will-change: opacity;
    }

    @keyframes invitationButtonCollapseSmooth {
      0%   { opacity:1;    transform:translate3d(-50%,0,0) scale3d(1.000,1.000,1); }
      5%   { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.993,1.000,1); }
      10%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.972,1.000,1); }
      15%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.939,.999,1); }
      20%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.896,.999,1); }
      25%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.844,.998,1); }
      30%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.784,.997,1); }
      35%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.718,.996,1); }
      40%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.648,.995,1); }
      45%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.575,.993,1); }
      50%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.500,.991,1); }
      55%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.425,.989,1); }
      60%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.352,.986,1); }
      65%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.282,.982,1); }
      70%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.216,.977,1); }
      75%  { opacity:1;    transform:translate3d(-50%,0,0) scale3d(.156,.971,1); }
      80%  { opacity:.98;  transform:translate3d(-50%,0,0) scale3d(.104,.964,1); }
      85%  { opacity:.90;  transform:translate3d(-50%,0,0) scale3d(.061,.956,1); }
      90%  { opacity:.72;  transform:translate3d(-50%,0,0) scale3d(.028,.947,1); }
      94%  { opacity:.50;  transform:translate3d(-50%,0,0) scale3d(.012,.940,1); }
      97%  { opacity:.27;  transform:translate3d(-50%,0,0) scale3d(.004,.934,1); }
      100% { opacity:0;    transform:translate3d(-50%,0,0) scale3d(.001,.930,1); }
    }

    @keyframes invitationButtonContentFade {
      0%, 18% { opacity: 1; }
      62%     { opacity: .62; }
      100%    { opacity: 0; }
    }

    .hero-chakra-container::after{
      content:'';
      position:absolute;
      inset:-18px;
      border-radius:32px;
      background:radial-gradient(circle,var(--gold-glow-strong) 0%,var(--gold-glow) 42%,transparent 72%);
      opacity:.46;
      animation:glowPulse 3s ease-in-out infinite;
      z-index:-1;
      pointer-events:none
    }
    @keyframes glowPulse{0%,100%{opacity:.28;transform:scale(1)}50%{opacity:.58;transform:scale(1.05)}}

    .invitation-button-center {
      position: relative;
      inset: auto;
      width: 100%;
      height: 100%;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: inherit;
      background: transparent;
      box-shadow: none;
    }
    .invitation-button-label,
	.invitation-button-om {
	  grid-area: 1 / 1;
	  transition: opacity .35s ease, transform .45s ease;
	}

	/* OPEN INVITATION — visible normally */
	.invitation-button-label {
	   display: flex;
	   flex-direction: column;
	   align-items: center;
		justify-content: center;

		  font-family: var(--font-sans);
		  font-size: .82rem;
		  font-weight: 700;
		  line-height: 1.35;

		  letter-spacing: .28em;
		  text-transform: uppercase;

		  color: #fff3c9;

		  opacity: 1;
		  transform: scale(1);

		  text-shadow:
			0 1px 8px rgba(74, 9, 19, .7),
			0 0 12px rgba(217, 164, 65, .25);
	}

/* OM — hidden until button is clicked */
	.invitation-button-om {
	  font-family: 'Nirmala UI', 'Noto Sans Devanagari', serif;
	  font-size: clamp(48px, 11vw, 68px);
	  line-height: 1;

	  color: #ffe59a;

	  opacity: 0;
	  transform: scale(.28);

	  text-shadow:
		0 0 12px rgba(255,229,154,.75),
		0 0 24px rgba(217,164,65,.5);
	}
	.landing.is-opening .invitation-button-label {
	  opacity: 0;
	  transform: scale(.75);
	  transition:
		opacity .2s ease,
		transform .23s ease;
	}

    /* The small Om inside the button is no longer used for the opening effect.
       app.js creates one fixed, full-screen Om layer so it is not constrained by
       the button's transformed containing block. */



    /* OPENING CEREMONY — compositor-friendly version
       The whole ceremony is one continuous transform animation. This avoids the
       frame hitch that can happen when one animation is replaced by another.
       The kolam and Om arrive together, hold for exactly .5s, then only the
       kolam expands while the Om stays fixed and fades. */
    .opening-screen {
      position: fixed;
      inset: 0;
      z-index: 99999;
      display: grid;
      place-items: center;
      pointer-events: none;
      visibility: hidden;
      overflow: hidden;
      transform: translateZ(0);

      --opening-start-x: 0px;
      --opening-start-y: 0px;
      --opening-start-scale: .16;
    }

    .opening-screen.active { visibility: visible; }

    .opening-kolam-motion {
      position: absolute;
      width: min(52vw, 52vh);
      height: min(52vw, 52vh);
      opacity: 0;
      transform:
        translate3d(var(--opening-start-x), var(--opening-start-y), 0)
        scale(var(--opening-start-scale));
      transform-origin: center center;
      will-change: transform, opacity;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }

    /* A cheap radial glow replaces SVG drop-shadow filters during motion.
       Filters on a large, rotating SVG force expensive re-rasterization. */
    .opening-kolam-motion::before {
      content: '';
      position: absolute;
      inset: -16%;
      border-radius: 50%;
      background:
        radial-gradient(circle,
          rgba(255,244,194,.34) 0%,
          rgba(255,226,132,.23) 30%,
          rgba(217,164,65,.13) 50%,
          rgba(217,164,65,.055) 62%,
          transparent 76%);
      opacity: .95;
      pointer-events: none;
      transform: translateZ(0);
    }

    .opening-kolam-rotator {
      position: relative;
      width: 100%;
      height: 100%;
      transform-origin: center center;
      will-change: transform;
      backface-visibility: hidden;
      transform: translateZ(0);
    }

    .opening-kolam-svg {
      display: block;
      width: 100%;
      height: 100%;
      overflow: visible;
      color: #ffe7a0 !important;
      filter: none !important;
      opacity: 1;
      transform: translateZ(0);
      transform-origin: center center;
      backface-visibility: hidden;
    }

    /* Keep the cloned Kolam luminous even when it becomes very large. Direct stroke
       styling is cheaper and smoother than a large animated SVG drop-shadow. */
    .opening-kolam-svg .ring-outer,
    .opening-kolam-svg .ring-blades,
    .opening-kolam-svg .ring-mid,
    .opening-kolam-svg .ring-inner,
    .opening-kolam-svg .ring-core {
      opacity: 1 !important;
      color: #ffe7a0 !important;
    }

    .opening-kolam-svg .ring-outer > use,
    .opening-kolam-svg .ring-blades > use,
    .opening-kolam-svg .ring-mid > use,
    .opening-kolam-svg .ring-inner > use,
    .opening-kolam-svg .ring-outer > circle,
    .opening-kolam-svg .ring-blades > circle,
    .opening-kolam-svg .ring-mid > circle {
      stroke: #ffe8a6 !important;
      stroke-opacity: 1 !important;
      stroke-width: 1.75 !important;
    }

    .opening-kolam-svg .ring-core > circle {
      stroke: #fff0b8 !important;
      fill: #ffe7a0 !important;
      opacity: 1 !important;
    }

    /* The cloned kolam should already be fully drawn when it leaves the button. */
    .opening-kolam-svg .ring-outer > use,
    .opening-kolam-svg .ring-blades > use,
    .opening-kolam-svg .ring-mid > use,
    .opening-kolam-svg .ring-inner > use,
    .opening-kolam-svg .ring-outer > circle,
    .opening-kolam-svg .ring-blades > circle,
    .opening-kolam-svg .ring-mid > circle,
    .opening-kolam-svg .ring-core > circle {
      animation: none !important;
      stroke-dashoffset: 0 !important;
    }

    .opening-kolam-svg .ring-core > circle { opacity: 1 !important; }

    .opening-om {
      position: absolute;
      display: block;
      font-family: 'Nirmala UI', 'Noto Sans Devanagari', 'Arial Unicode MS', serif;
      font-size: min(16vw, 16vh);
      line-height: 1;
      color: #ffe59a;
      opacity: 0;
      transform:
        translate3d(var(--opening-start-x), var(--opening-start-y), 0)
        scale(.18);
      transform-origin: center center;
      text-shadow:
        0 0 10px rgba(255,242,184,.88),
        0 0 24px rgba(240,190,74,.50);
      will-change: transform, opacity;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }

    /* Pause nonessential landing effects while the large ceremony animation runs.
       This frees compositor/GPU time for the kolam and Om. */
    html.invitation-opening .petal {
      animation-play-state: paused !important;
    }

    .landing.is-opening .hero-chakra-container::after {
      animation-play-state: paused !important;
    }

    .opening-screen.active .opening-kolam-motion {
      animation:
        openingKolamMotion 4.8s linear forwards,
        openingKolamOpacity 4.8s linear forwards;
    }

    .opening-screen.active .opening-kolam-rotator {
      animation: openingKolamSpin 8s linear infinite;
    }

    .opening-screen.active .opening-om {
      animation:
        openingOmMotion 4.8s linear forwards,
        openingOmOpacity 4.8s linear forwards;
    }

    @keyframes openingKolamSpin {
      from { transform: translateZ(0) rotate(0deg); }
      to   { transform: translateZ(0) rotate(360deg); }
    }

    /* 0–54.1667%  = 2.6s travel to center
       54.1667–64.5833% = .5s exact centered hold
       64.5833–100% = 1.7s full-screen expansion */
    @keyframes openingKolamMotion {
      0% {
        transform:
          translate3d(var(--opening-start-x), var(--opening-start-y), 0)
          scale(var(--opening-start-scale));
        animation-timing-function: cubic-bezier(.22,.54,.24,1);
      }

      54.1667% {
        transform: translate3d(0,0,0) scale(1);
        animation-timing-function: linear;
      }

      64.5833% {
        transform: translate3d(0,0,0) scale(1);
        animation-timing-function: cubic-bezier(.22,.61,.36,1);
      }

      100% {
        transform: translate3d(0,0,0) scale(5.2);
      }
    }

    @keyframes openingKolamOpacity {
      0%    { opacity: 0; }
      4.5%  { opacity: 1; }
      96%   { opacity: 1; }
      100%  { opacity: 0; }
    }

    @keyframes openingOmMotion {
      0% {
        transform:
          translate3d(var(--opening-start-x), var(--opening-start-y), 0)
          scale(.18);
        animation-timing-function: cubic-bezier(.22,.54,.24,1);
      }

      54.1667% {
        transform: translate3d(0,0,0) scale(1);
        animation-timing-function: linear;
      }

      64.5833%,
      100% {
        transform: translate3d(0,0,0) scale(1);
      }
    }

    @keyframes openingOmOpacity {
      0%      { opacity: 0; }
      7%      { opacity: 1; }
      64.5833% { opacity: 1; }
      78%     { opacity: 1; }
      100%    { opacity: 0; }
    }

    @media (max-width: 760px) {
      .landing-copy {
        width: min(92vw, 560px);
        align-items: center;
        text-align: center;
        margin-bottom: 148px;
      }
      .landing-subtitle,
      .landing-namah { max-width: 100%; }
      .hero-chakra-container { width: min(90vw, 320px); }
    }

    @media (prefers-reduced-motion: reduce) {
      .hero-chakra-svg .ring-outer > use,
      .hero-chakra-svg .ring-blades > use,
      .hero-chakra-svg .ring-mid > use,
      .hero-chakra-svg .ring-inner > use,
      .hero-chakra-svg .ring-outer > circle,
      .hero-chakra-svg .ring-blades > circle,
      .hero-chakra-svg .ring-mid > circle,
      .hero-chakra-svg .ring-core > circle {
        animation: none !important;
        stroke-dashoffset: 0;
      }
      .landing,
      .landing-hero-image,
      .landing-copy,
      .hero-chakra-container,
      .invitation-button-label,
      .invitation-button-om,
      .hero-chakra-container::after { transition: none !important; animation: none !important; }
      .landing.is-opening { transform: none; opacity: 1; }
      .landing.is-sliding { transform: none; opacity: 0; }
      .landing.is-sliding .landing-hero-image { transform: none; }
      .opening-screen,
      .opening-kolam-motion,
      .opening-kolam-svg,
      .opening-om { animation: none !important; transition: none !important; }
      .opening-screen.active .opening-kolam-motion,
      .opening-screen.active .opening-om { opacity: 0; transform: none; }
    }


    /* NAMES REVEAL */
    .names-reveal {
      position: relative;
      min-height: 100vh;
      min-height: 100svh;
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      overflow: hidden;
      isolation: isolate;
      background:
        radial-gradient(ellipse at 50% 28%, rgba(255,239,188,.46) 0%, transparent 46%),
        linear-gradient(180deg, #fffaf0 0%, #f9efd9 58%, #f5e5c5 100%);
      color: #3b1a1e;
    }

    .names-reveal-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
    }

    .names-reveal-bg-image {
      --names-zoom: 1;
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center 22%;
      transform: scale(var(--names-zoom));
      transform-origin: 50% 35%;
      will-change: transform;
      filter: brightness(1.02) saturate(1.04) contrast(0.98);
      opacity: 1;
      transition: transform .08s linear;
    }

    .names-reveal-bg-overlay {
      position: absolute;
      inset: 0;
      z-index: 1;
      background:
        linear-gradient(
          180deg,
          rgba(255,252,244,.34) 0%,
          rgba(255,247,226,.44) 46%,
          rgba(248,232,195,.62) 100%
        ),
        radial-gradient(
          circle at 50% 43%,
          rgba(255,255,255,.10) 0%,
          rgba(122,20,32,.08) 100%
        );
      pointer-events: none;
    }

	.names-reveal .corner-ornament {
	  opacity: 1;
	}

	.names-reveal.revealed{display:flex;animation:fadeIn .8s ease}
    .names-reveal .couple-names[tabindex="-1"]:focus{outline:none}
    .names-reveal-content{display:flex;flex-direction:column;align-items:center;position:relative;z-index:4}

    /* CORNER MANDALA BORDER */
    .corner-ornament{position:absolute;width:clamp(165px,28vw,286px);height:clamp(165px,28vw,286px);pointer-events:none;z-index:0;opacity:.62;filter:drop-shadow(0 0 7px rgba(217,164,65,.18))}
    .corner-tl{top:0;left:0}
    .corner-tr{top:0;right:0;transform:scaleX(-1)}
    .corner-bl{bottom:0;left:0;transform:scaleY(-1)}
    .corner-br{bottom:0;right:0;transform:scale(-1,-1)}
    .names-reveal-sparkles{position:absolute;inset:8% 6%;pointer-events:none;z-index:3;background-image:radial-gradient(1.5px 1.5px at 18% 22%,rgba(232,201,90,.7),transparent 60%),radial-gradient(1px 1px at 32% 12%,rgba(255,255,255,.5),transparent 60%),radial-gradient(2px 2px at 78% 18%,rgba(212,175,55,.6),transparent 60%),radial-gradient(1px 1px at 88% 35%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1.5px 1.5px at 12% 55%,rgba(232,201,90,.6),transparent 60%),radial-gradient(1.2px 1.2px at 50% 48%,rgba(212,175,55,.5),transparent 60%),radial-gradient(1px 1px at 70% 62%,rgba(255,255,255,.45),transparent 60%),radial-gradient(1.8px 1.8px at 40% 78%,rgba(232,201,90,.55),transparent 60%),radial-gradient(1px 1px at 80% 85%,rgba(212,175,55,.5),transparent 60%),radial-gradient(1.2px 1.2px at 25% 88%,rgba(255,255,255,.4),transparent 60%);background-repeat:no-repeat}
    .fade-el{opacity:0;animation:fadeUp 1s ease forwards;animation-play-state:paused}
    .names-reveal.revealed .fade-el{animation-play-state:running}
    .ganesha-placeholder-reveal{font-size:3rem;color:var(--gold);opacity:.6;margin-bottom:8px}
    .ganesha-namah{font-family:var(--font-body);font-size:calc(1.2rem + 1px);color:var(--gold-light);opacity:.85;letter-spacing:2px;margin-bottom:24px}
    .ganesha-img{width:clamp(100px,25vw,160px);height:auto;margin-bottom:20px;filter:drop-shadow(0 0 20px var(--gold-glow))}
    .wedding-label{font-family:var(--font-sans);font-size:calc(.75rem + 3px);letter-spacing:6px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px;line-height:1.8}
    .couple-names{font-family:var(--font-display);font-size:calc(clamp(2.5rem,8vw,5rem) + 1px);font-weight:700;color:var(--cream);line-height:1.15;margin-bottom:8px}
    .couple-names .ampersand{display:block;font-size:.5em;font-style:italic;font-weight:400;color:var(--gold);margin:4px 0}
    .chakra-divider{width:200px;margin:20px auto}
    .wedding-date-hero{font-family:var(--font-sans);font-size:calc(.85rem + 1px);letter-spacing:4px;color:var(--gold-light);margin-top:20px}



    /* Light-theme typography for the first invitation page. */
    .names-reveal .ganesha-namah {
      color: #8d5d13;
      opacity: .95;
      text-shadow: 0 1px 10px rgba(255,255,255,.72);
    }
    .names-reveal .wedding-label {
      color: #8f5d12;
      text-shadow: 0 1px 12px rgba(255,255,255,.78);
    }
    .names-reveal .couple-names {
      color: #7a1420;
      text-shadow: 0 2px 14px rgba(255,255,255,.80), 0 2px 4px rgba(74,9,19,.10);
    }
    .names-reveal .couple-names .ampersand {
      color: #b77918;
    }
    .names-reveal .wedding-date-hero {
      color: #7a1420;
      font-weight: 700;
      text-shadow: 0 1px 12px rgba(255,255,255,.82);
    }
    .names-reveal .chakra-divider line,
    .names-reveal .chakra-divider circle {
      stroke: #b77918;
    }
    .names-reveal .chakra-divider polygon,
    .names-reveal .chakra-divider circle[fill] {
      fill: #b77918;
    }

    /* SECTIONS */
    section{position:relative;padding:100px 24px;overflow:hidden;isolation:isolate}
    .invitation-content section::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(circle at 14% 17%,rgba(217,164,65,.34) 0 1.1px,transparent 1.7px),radial-gradient(circle at 38% 9%,rgba(122,20,32,.16) 0 .8px,transparent 1.4px),radial-gradient(circle at 72% 21%,rgba(232,163,23,.28) 0 1.2px,transparent 1.8px),radial-gradient(circle at 89% 42%,rgba(122,20,32,.13) 0 .9px,transparent 1.5px),radial-gradient(circle at 22% 64%,rgba(217,164,65,.26) 0 1.1px,transparent 1.7px),radial-gradient(circle at 56% 54%,rgba(122,20,32,.11) 0 .7px,transparent 1.3px),radial-gradient(circle at 78% 76%,rgba(217,164,65,.29) 0 1px,transparent 1.6px),radial-gradient(circle at 34% 86%,rgba(232,163,23,.22) 0 .8px,transparent 1.4px);background-size:230px 230px;}
    .section-bg{background:radial-gradient(ellipse at 18% 18%,rgba(232,163,23,.08) 0%,transparent 36%),radial-gradient(ellipse at 82% 72%,rgba(122,20,32,.055) 0%,transparent 42%),var(--page-bg)}
    .section-bg-alt{background:radial-gradient(ellipse at 80% 20%,rgba(232,163,23,.10) 0%,transparent 38%),radial-gradient(ellipse at 20% 75%,rgba(122,20,32,.06) 0%,transparent 44%),var(--page-alt)}
    .section-title{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,2.8rem);font-weight:600;color:var(--maroon);text-align:center;margin-bottom:12px}
    .section-subtitle{font-family:var(--font-sans);font-size:calc(.72rem + 3px);letter-spacing:5px;text-transform:uppercase;color:#a66d12;text-align:center;margin-bottom:60px}
    .ornate-divider{width:200px;margin:20px auto}

    /* GLOW CARDS */
    .glow-card{position:relative;transition:box-shadow .5s ease,transform .4s ease}
    .glow-card::after{content:'';position:absolute;inset:-2px;border-radius:inherit;background:radial-gradient(ellipse at 50% 50%,var(--gold-glow-strong),transparent 70%);opacity:0;transition:opacity .6s ease;z-index:-1;pointer-events:none}
    .glow-card:hover::after,.glow-card.in-view::after{opacity:1}
    .glow-card:hover{transform:translateY(-4px);box-shadow:0 8px 40px var(--gold-glow),0 0 80px var(--gold-glow)}

    /* SCROLL ANIMS */
    .slide-left{opacity:0;transform:translateX(-80px);transition:opacity .8s ease,transform .8s cubic-bezier(.25,.46,.45,.94)}
    .slide-right{opacity:0;transform:translateX(80px);transition:opacity .8s ease,transform .8s cubic-bezier(.25,.46,.45,.94)}
    .slide-up{opacity:0;transform:translateY(60px);transition:opacity .8s ease,transform .8s cubic-bezier(.25,.46,.45,.94)}
    .slide-left.visible,.slide-right.visible,.slide-up.visible{opacity:1;transform:translate(0)}

    /* COUPLE */
    .couple-section{display:flex;flex-direction:row;align-items:flex-start;justify-content:center;gap:32px;max-width:900px;margin:0 auto;flex-wrap:wrap}
    .person-card{width:calc(50% - 16px);min-width:260px;max-width:440px;background:linear-gradient(145deg,rgba(19,61,127,.62),rgba(9,29,64,.78));border:1px solid rgba(240,216,132,.26);border-radius:18px;padding:40px;text-align:center;backdrop-filter:blur(12px)}
    .person-photo-frame{position:relative;width:clamp(220px,42vw,260px);aspect-ratio:650/888;margin:0 auto 24px;filter:drop-shadow(0 0 18px var(--gold-glow))}
    .person-photo-frame .photo-clip{position:absolute;inset:0;overflow:hidden;background:linear-gradient(180deg,rgba(10,42,92,.55),rgba(4,14,36,.7));-webkit-clip-path:polygon(50% 3.5%,64% 8.2%,74.2% 13.7%,81.2% 20.7%,85.4% 26.8%,92.5% 27%,92.5% 93%,5.8% 93%,5.8% 28%,14.6% 26.8%,18.8% 20.7%,25.8% 13.7%,36% 8.2%);clip-path:polygon(50% 3.5%,64% 8.2%,74.2% 13.7%,81.2% 20.7%,85.4% 26.8%,92.5% 27%,92.5% 93%,5.8% 93%,5.8% 28%,14.6% 26.8%,18.8% 20.7%,25.8% 13.7%,36% 8.2%)}
    .person-photo-frame .photo-clip img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
    .person-photo-frame .photo-clip::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),transparent 42%,rgba(4,14,36,.18));pointer-events:none}
    .person-photo-frame .person-photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--burgundy),var(--maroon));font-family:var(--font-display);font-size:3rem;color:var(--gold)}
    .person-photo-frame .arch-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;z-index:2}
    .person-role{font-family:var(--font-sans);font-size:.95rem;letter-spacing:5px;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
    .person-name{font-family:var(--font-display);font-size:2rem;font-weight:600;color:var(--cream);margin-bottom:12px}
    .person-parents{font-family:var(--font-body);font-size:1rem;color:var(--cream-soft);font-style:italic;line-height:1.6}

    /* EVENTS */
    .events-list{display:flex;flex-direction:column;align-items:center;gap:40px;max-width:600px;margin:0 auto}
    .event-card{width:100%;background:linear-gradient(145deg,rgba(19,61,127,.5),rgba(9,29,64,.72));border:1px solid rgba(240,216,132,.2);border-radius:18px;backdrop-filter:blur(12px);overflow:hidden}
    .event-toggle{width:100%;padding:36px 32px;display:flex;align-items:center;gap:28px;background:transparent;border:0;color:inherit;text-align:left;cursor:pointer;font:inherit}
    .event-toggle:focus{outline:none}
    .event-toggle:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
    .event-icon{flex-shrink:0;width:64px;height:64px;border-radius:50%;border:1px solid var(--gold);display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:rgba(212,175,55,.08)}
    .event-details{flex:1}.event-name{font-family:var(--font-display);font-size:1.4rem;font-weight:600;color:var(--cream);margin-bottom:6px}
    .event-datetime{font-family:var(--font-sans);font-size:.75rem;letter-spacing:2px;color:var(--gold-light);margin-bottom:6px}
    .event-venue{font-family:var(--font-body);font-size:.95rem;color:var(--cream-soft)}
    .event-chevron{margin-left:auto;font-size:1.1rem;color:var(--gold);transition:transform .35s ease;flex-shrink:0;line-height:1}
    .event-card.expanded .event-chevron{transform:rotate(180deg)}
    .event-expanded{max-height:0;overflow:hidden;transition:max-height .5s ease,padding .5s ease;padding:0 32px}
    .event-card.expanded .event-expanded{max-height:600px;padding:0 32px 28px}
    .event-detail-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:14px 0;border-top:1px solid rgba(212,175,55,.15)}
    .event-detail-row:first-child{padding-top:20px}
    .detail-label{font-family:var(--font-sans);font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);flex-shrink:0;padding-top:3px;min-width:90px}
    .detail-value{font-family:var(--font-body);font-size:1rem;color:var(--cream-soft);text-align:right;line-height:1.5}
    .detail-link{color:var(--gold-light);text-decoration:none;border-bottom:1px solid rgba(212,175,55,.4);transition:border-color .2s,color .2s}
    .detail-link:hover{color:var(--gold);border-bottom-color:var(--gold)}
    /* Stay & Travel */
    .hotel-wrapper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px;max-width:1200px;margin:0 auto;align-items:stretch}
    .hotel-card{height:100%;display:flex;flex-direction:column;background:linear-gradient(145deg,rgba(19,61,127,.58),rgba(9,29,64,.78));border:1px solid rgba(240,216,132,.24);border-radius:18px;padding:40px;backdrop-filter:blur(12px)}
    .hotel-card .event-detail-row:last-of-type{margin-bottom:auto}
    .hotel-name{font-family:var(--font-display);font-size:clamp(1.3rem,3.5vw,1.72rem);font-weight:600;color:#fff;text-align:center;margin-bottom:8px}
    .hotel-tagline{font-family:var(--font-body);font-size:.97rem;color:var(--cream-soft);text-align:center;line-height:1.6;margin-bottom:10px}
    .hotel-book{display:block;padding:16px;margin-top:28px;font-family:var(--font-sans);font-size:.75rem;letter-spacing:4px;text-transform:uppercase;text-align:center;text-decoration:none;color:var(--maroon-dark);background:linear-gradient(135deg,var(--gold),var(--gold-light));border-radius:10px;transition:all .3s ease}
    .hotel-book:hover{box-shadow:0 4px 30px var(--gold-glow-strong);transform:translateY(-2px)}
    .hotel-note{font-family:var(--font-body);font-size:.85rem;color:var(--cream-soft);opacity:.92;text-align:center;line-height:1.6;margin-top:18px}
    .hotel-note code{font-family:var(--font-sans);font-size:.8rem;letter-spacing:2px;color:var(--gold-light)}
    @media (max-width: 900px){.hotel-wrapper{grid-template-columns:1fr;gap:24px}}

    /* COUNTDOWN */
    .countdown-wrapper{text-align:center;max-width:700px;margin:0 auto}
    .countdown-display{display:flex;justify-content:center;gap:clamp(16px,4vw,40px);margin-top:20px}
    .countdown-unit{display:flex;flex-direction:column;align-items:center}
    .countdown-number{font-family:var(--font-display);font-size:clamp(2.5rem,8vw,4.5rem);font-weight:700;color:var(--gold);line-height:1;text-shadow:0 0 30px var(--gold-glow-strong);min-width:80px}
    .countdown-label{font-family:var(--font-sans);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:#7a1420 ;margin-top:8px}
    .countdown-separator{font-family:var(--font-display);font-size:clamp(2rem,6vw,3.5rem);color:var(--gold);opacity:.4;align-self:flex-start;margin-top:4px}

    /* RSVP */
    .rsvp-wrapper{max-width:520px;margin:0 auto}
    .rsvp-card{background:linear-gradient(135deg,rgba(10,42,92,.6),rgba(6,27,63,.8));border:1px solid rgba(212,175,55,.25);border-radius:16px;padding:48px 40px;backdrop-filter:blur(10px)}
    .rsvp-card .form-group{margin-bottom:38px}
    .rsvp-card label{display:block;font-family:var(--font-sans);font-size:.65rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:14px;font-weight:700}
    .rsvp-card input,.rsvp-card textarea,.rsvp-card select{width:100%;padding:14px 16px;background:transparent;border:1px solid rgba(212,175,55,.16);border-radius:8px;color:var(--cream);font-family:var(--font-body);font-size:1rem;font-weight:600;transition:border-color .25s,background .25s,box-shadow .3s;outline:none}
    .rsvp-card input::placeholder,.rsvp-card textarea::placeholder{color:var(--cream-soft);opacity:.5}
    .rsvp-card input:hover,.rsvp-card textarea:hover,.rsvp-card select:hover{border-color:rgba(212,175,55,.35);background:rgba(4,14,36,.4)}
    .rsvp-card input:focus,.rsvp-card textarea:focus,.rsvp-card select:focus{border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow)}
    .rsvp-card textarea{resize:vertical;min-height:100px}
    .rsvp-card select option{background:var(--maroon-dark);color:var(--cream)}
    .form-hint{font-family:var(--font-body);font-size:.74rem;letter-spacing:.5px;text-transform:none;color:var(--cream-soft);opacity:.92;margin-left:8px;font-weight:600}
    .form-helper{font-family:var(--font-body);font-size:.85rem;color:var(--cream-soft);opacity:.85;font-style:italic;font-weight:600;margin-top:10px}
    .event-checkboxes{display:flex;flex-direction:column;gap:8px}
    .form-group-header{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-bottom:14px}
    .form-group-header label{margin-bottom:0}
    .select-all-btn{font-family:var(--font-sans);font-size:.6rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);background:transparent;border:1px solid rgba(212,175,55,.4);border-radius:6px;padding:6px 14px;cursor:pointer;transition:background .25s,border-color .25s,color .25s;white-space:nowrap}
    .select-all-btn:hover{background:rgba(212,175,55,.12);border-color:var(--gold);color:var(--gold-light)}
    .select-all-btn:focus{outline:none}
    .select-all-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
    .rsvp-card label.event-checkbox{display:flex;align-items:center;gap:14px;padding:12px 16px;background:transparent;border:none;border-radius:8px;cursor:pointer;transition:background .25s,box-shadow .25s;font-family:var(--font-body);font-size:1rem;font-weight:600;letter-spacing:0;text-transform:none;color:var(--cream-soft);margin-bottom:0}
    .rsvp-card label.event-checkbox:hover{background:rgba(4,14,36,.75)}
    .rsvp-card label.event-checkbox:has(input:checked){background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.16),rgba(212,175,55,.05));box-shadow:inset 0 -3px 0 var(--gold);color:var(--cream)}
    .rsvp-card .event-checkbox input{-webkit-appearance:none;appearance:none;width:18px;height:18px;min-width:18px;padding:0;margin:0;border:1px solid rgba(212,175,55,.5);border-radius:3px;background:rgba(4,14,36,.8);flex-shrink:0;cursor:pointer;position:relative;transition:background .2s,border-color .2s}
    .rsvp-card .event-checkbox input:checked{background:var(--gold);border-color:var(--gold)}
    .rsvp-card .event-checkbox input:checked::after{content:'';position:absolute;left:4px;top:1px;width:8px;height:5px;border-left:2px solid var(--maroon-dark);border-bottom:2px solid var(--maroon-dark);transform:rotate(-45deg)}
    .rsvp-card .event-checkbox input:focus{box-shadow:none}
    .rsvp-card .event-checkbox input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
    .checkbox-icon{font-size:1.2rem;flex-shrink:0;line-height:1}
    .checkbox-name{flex:1;display:flex;flex-direction:column;gap:1px}
    .checkbox-date{font-size:.72rem;font-weight:500;letter-spacing:.5px;color:var(--gold-light);opacity:.85;text-transform:none}
    .side-selector{display:flex;align-items:stretch;border-radius:10px}
    .rsvp-card label.side-option{flex:1;position:relative;cursor:pointer;margin:0;padding:0}
    .side-option input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
    .side-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;padding:14px 10px;text-align:center;height:100%;border-radius:8px;transition:background .25s,box-shadow .25s}
    .side-label{font-family:var(--font-sans);font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);opacity:.7;transition:opacity .25s}
    .side-name{font-family:var(--font-display);font-size:1.15rem;color:var(--cream-soft);transition:color .25s}
    .side-option:hover .side-inner{background:rgba(4,14,36,.75)}
    .side-option input:checked + .side-inner{background:radial-gradient(ellipse at 50% 0%,rgba(212,175,55,.16),rgba(212,175,55,.05));box-shadow:inset 0 -3px 0 var(--gold)}
    .side-option input:checked + .side-inner .side-label{opacity:1}
    .side-option input:checked + .side-inner .side-name{color:var(--cream)}
    .side-option input:focus-visible + .side-inner{outline:2px solid var(--gold);outline-offset:-2px}
    .side-heart{display:flex;align-items:center;justify-content:center;width:30px;flex-shrink:0;color:var(--gold);font-size:.85rem;opacity:.6}
    .rsvp-submit{width:100%;padding:16px;font-family:var(--font-sans);font-size:.75rem;letter-spacing:4px;text-transform:uppercase;color:var(--maroon-dark);background:linear-gradient(135deg,var(--gold),var(--gold-light));border:none;border-radius:8px;cursor:pointer;transition:all .3s ease;margin-top:8px}
    .rsvp-submit:hover{box-shadow:0 4px 30px var(--gold-glow-strong);transform:translateY(-2px)}
    .rsvp-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
    .rsvp-message{text-align:center;margin-top:20px;font-family:var(--font-body);font-size:1rem;padding:12px;border-radius:8px}
    .rsvp-message.success{color:var(--gold-light);background:rgba(212,175,55,.1);border:1px solid rgba(212,175,55,.3)}
    .rsvp-message.error{color:#f5a3a3;background:rgba(200,50,50,.1);border:1px solid rgba(200,50,50,.3)}

    /* MUSIC TOGGLE */
    .music-btn{position:fixed;bottom:28px;right:28px;z-index:9999;width:44px;height:44px;border-radius:50%;background:rgba(4,14,36,.85);border:1px solid rgba(212,175,55,.45);color:var(--gold);font-size:1.1rem;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);transition:background .3s,border-color .3s,box-shadow .3s;box-shadow:0 2px 16px rgba(0,0,0,.4);opacity:0;pointer-events:none}
    .music-btn.visible{opacity:1;pointer-events:auto}
    .music-btn:hover{background:rgba(10,42,92,.9);border-color:var(--gold);box-shadow:0 0 20px var(--gold-glow-strong)}
    .music-btn.playing .icon-muted{display:none}
    .music-btn:not(.playing) .icon-playing{display:none}

    /* GALLERY */
    .gallery-carousel-wrap{position:relative;max-width:560px;margin:0 auto;padding:0 8px}
    .gallery-carousel{--slide:min(360px,76vw);display:flex;align-items:center;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px calc(50% - var(--slide)/2) 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
    .gallery-carousel::-webkit-scrollbar{display:none}
    .gallery-slide{flex:0 0 var(--slide);scroll-snap-align:center;margin:0;position:relative;border-radius:16px;overflow:hidden;border:1px solid rgba(212,175,55,.25);background:linear-gradient(135deg,rgba(10,42,92,.6),rgba(6,27,63,.85));opacity:.5;transform:scale(.88);transition:opacity .45s ease,transform .45s ease,box-shadow .45s ease}
    .gallery-slide.active{opacity:1;transform:scale(1);box-shadow:0 0 34px var(--gold-glow)}
    .gallery-slide.wide{flex-basis:min(460px,88vw)}
    .gallery-slide img{position:relative;width:100%;height:auto;display:block}
    .gallery-slide::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 36px rgba(4,14,36,.45);pointer-events:none;z-index:1}
    .gallery-slide figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:40px 18px 16px;display:flex;flex-direction:column;gap:3px;background:linear-gradient(180deg,transparent,rgba(4,14,36,.9))}
    .gi-role{font-family:var(--font-sans);font-size:.58rem;letter-spacing:3px;text-transform:uppercase;color:var(--gold-light);font-weight:700}
    .gi-name{font-family:var(--font-display);font-size:1.1rem;color:var(--cream);line-height:1.25}
    .gal-nav{position:absolute;top:44%;transform:translateY(-50%);z-index:5;width:44px;height:44px;border-radius:50%;border:1px solid rgba(212,175,55,.4);background:rgba(4,14,36,.7);color:var(--gold);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .25s,border-color .25s;backdrop-filter:blur(4px)}
    .gal-nav:hover{background:rgba(10,42,92,.9);border-color:var(--gold)}
    .gal-prev{left:-6px}.gal-next{right:-6px}
    .gallery-dots{display:flex;justify-content:center;gap:8px;margin-top:6px}
    .gallery-dots button{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:rgba(212,175,55,.3);cursor:pointer;transition:background .25s,width .25s}
    .gallery-dots button.active{background:var(--gold);width:22px;border-radius:4px}

    /* Warm cream page treatment from the supplied invitation reference */
    .invitation-content .person-card,
    .invitation-content .event-card,
    .invitation-content .hotel-card,
    .invitation-content .rsvp-card {
      background: rgba(255,255,255,.72);
      border-color: rgba(217,164,65,.38);
      box-shadow: 0 16px 42px rgba(74,9,19,.06);
      color: var(--ink);
    }
    .invitation-content .person-name,
    .invitation-content .event-name,
    .invitation-content .hotel-name { color: var(--maroon); }
    .invitation-content .person-parents,
    .invitation-content .event-venue,
    .invitation-content .detail-value,
    .invitation-content .hotel-tagline,
    .invitation-content .hotel-note,
    .invitation-content .form-hint,
    .invitation-content .form-helper,
    .invitation-content .side-name { color: var(--muted); }
    .invitation-content .event-datetime,
    .invitation-content .detail-label,
    .invitation-content .person-role,
    .invitation-content .rsvp-card label,
    .invitation-content .side-label,
    .invitation-content .checkbox-date { color: #a66d12; }
    .invitation-content .detail-link { color: var(--maroon); border-bottom-color: rgba(122,20,32,.32); }
    .invitation-content .detail-link:hover { color: var(--maroon-deep); border-bottom-color: var(--maroon); }
    .invitation-content .event-detail-row { border-top-color: rgba(217,164,65,.28); }
    .invitation-content .rsvp-card input,
    .invitation-content .rsvp-card textarea,
    .invitation-content .rsvp-card select {
      background: rgba(255,255,255,.9);
      color: var(--ink);
      border-color: rgba(217,164,65,.38);
    }
    .invitation-content .rsvp-card input::placeholder,
    .invitation-content .rsvp-card textarea::placeholder { color: var(--muted); opacity: .58; }
    .invitation-content .rsvp-card input:hover,
    .invitation-content .rsvp-card textarea:hover,
    .invitation-content .rsvp-card select:hover { background: #fffdf8; border-color: rgba(122,20,32,.28); }
    .invitation-content .rsvp-card select option { background: #fff; color: var(--ink); }
    .invitation-content .rsvp-card label.event-checkbox { color: var(--muted); }
    .invitation-content .rsvp-card label.event-checkbox:hover,
    .invitation-content .side-option:hover .side-inner { background: rgba(217,164,65,.08); }
    .invitation-content .rsvp-card label.event-checkbox:has(input:checked),
    .invitation-content .side-option input:checked + .side-inner { background: linear-gradient(180deg,rgba(232,163,23,.12),rgba(217,164,65,.04)); }
    .invitation-content .rsvp-card label.event-checkbox:has(input:checked),
    .invitation-content .side-option input:checked + .side-inner .side-name { color: var(--ink); }
    .invitation-content .rsvp-card .event-checkbox input { background: #fff; border-color: rgba(122,20,32,.36); }
    .invitation-content .rsvp-card .event-checkbox input:checked { background: var(--gold); border-color: var(--gold); }
    .invitation-content .rsvp-message.success { color: var(--maroon); background: rgba(217,164,65,.10); }
    .invitation-content .rsvp-message.error { color: #8b1e28; }
    .hotel-book,
    .rsvp-submit { color: #fff7e4; background: linear-gradient(135deg,var(--maroon),#9a2531); }
    .hotel-book:hover,
    .rsvp-submit:hover { box-shadow: 0 5px 26px rgba(122,20,32,.22); }
    .music-btn { background: rgba(74,9,19,.9); border-color: rgba(217,164,65,.55); color: var(--gold-light); }
    .music-btn:hover { background: rgba(122,20,32,.94); }
    .gal-nav { background: rgba(74,9,19,.78); border-color: rgba(217,164,65,.52); color: var(--gold-light); }
    .gal-nav:hover { background: rgba(122,20,32,.92); }
    footer { background: var(--maroon-deep); }

    /* FOOTER */
	footer {
	  position: relative;
	  overflow: hidden;
	  isolation: isolate;
	}
    footer{text-align:center;padding:10px 24px 60px;background:#7a1420}
    .footer-names{font-family:var(--font-display);font-size:clamp(1.5rem,4vw,2.2rem);font-weight:600;color:var(--cream);margin-bottom:16px}
    .footer-families{font-family:var(--font-body);font-size:1rem;color:var(--cream-soft);line-height:1.8;margin-bottom:24px;font-style:italic}
    .footer-closing{font-family:var(--font-sans);font-size:.65rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);position:relative;z-index: 2;}
	footer .corner-ornament {
	  z-index: 0;
	  opacity: .55;
	  pointer-events: none;
	}
    .invitation-content{display:none}.invitation-content.revealed{display:block;animation:fadeIn .6s ease}

    @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
    @keyframes fadeScaleIn{from{opacity:0;transform:scale(.7) rotate(-30deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
    @keyframes zoomBurst{0%{transform:scale(1);opacity:1;filter:none}70%{transform:scale(5);opacity:1;filter:brightness(1.2)}100%{transform:scale(22);opacity:0;filter:brightness(1.5)}}
    @keyframes fadeIn{from{opacity:0}to{opacity:1}}
    @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes spinR{from{transform:rotate(360deg)}to{transform:rotate(0deg)}}
    .chakra-spin{animation:spin 20s linear infinite;transform-origin:center}

    @media(max-width:600px){
      .event-toggle{flex-direction:column;text-align:center;gap:16px;padding:28px 24px}
      .event-chevron{margin-left:0}
      .event-expanded{padding:0 24px}
      .event-card.expanded .event-expanded{padding:0 24px 24px}
      .event-detail-row{flex-direction:column;align-items:center;gap:6px;text-align:center}
      .detail-value{text-align:center}
      .detail-label{min-width:0}
      .person-card{padding:32px 24px;width:100%;min-width:unset}.rsvp-card{padding:36px 24px}.hotel-card{padding:32px 22px}
      .couple-section{flex-direction:column;align-items:center;gap:40px}
      .countdown-number{min-width:50px}
      .wedding-label{letter-spacing:3px;font-size:calc(.7rem + 3px)}
    }
    @media(min-width:601px){
      .ganesha-namah{font-size:calc(1.8rem + 1px);font-weight:700}
    }