:root {
      font-family: Inter, sans-serif;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: #050711;
      color: #fff;
    }

    .font-yatra {
      font-family: "Yatra One", cursive;
    }

    ::selection {
      background: rgba(249, 115, 22, 0.35);
      color: #fff;
    }

    .mandala {
      /* Main-page mandala: circular rings only, with the radial sun-burst removed. */
      background: radial-gradient(circle,
          transparent 0 19%,
          rgba(251, 146, 60, 0.09) 19.5% 20%,
          transparent 20.5% 39%,
          rgba(251, 146, 60, 0.07) 39.5% 40%,
          transparent 40.5% 60%,
          rgba(251, 146, 60, 0.05) 60.5% 61%,
          transparent 61.5%);
      -webkit-mask-image: radial-gradient(circle,
          black 0 55%,
          transparent 74%);
      mask-image: radial-gradient(circle, black 0 55%, transparent 74%);
      animation: slowSpin 38s linear infinite;
    }

    .hero-grid {
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg,
          rgba(255, 255, 255, 0.035) 1px,
          transparent 1px);
      background-size: 34px 34px;
      -webkit-mask-image: linear-gradient(to bottom, black, transparent 85%);
      mask-image: linear-gradient(to bottom, black, transparent 85%);
    }

    .glass-card {
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.075),
          rgba(255, 255, 255, 0.035));
      border: 1px solid rgba(255, 255, 255, 0.11);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 20px 55px rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
      transition: 0.25s ease;
    }

    .spirit-copy {
      text-shadow: 0 1px 14px rgba(255, 255, 255, 0.06);
    }

    .glass-card:hover {
      border-color: rgba(251, 146, 60, 0.26);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 25px 70px rgba(0, 0, 0, 0.38),
        0 0 36px rgba(249, 115, 22, 0.07);
      transform: translateY(-2px);
    }

    .text-glow {
      text-shadow: 0 0 28px rgba(249, 115, 22, 0.26);
    }

    .ember {
      position: absolute;
      bottom: -16px;
      border-radius: 999px;
      background: #fb923c;
      box-shadow: 0 0 12px rgba(251, 146, 60, 0.9);
      animation: emberRise linear infinite;
    }

    .slice-in {
      animation: sliceIn.65s cubic-bezier(0.16, 1, 0.3, 1) both;
    }

    .soft-float {
      animation: softFloat 5.5s ease-in-out infinite;
    }

    .orbit {
      animation: orbit 24s linear infinite;
      transform-origin: 50% 50%;
    }

    .orbit-reverse {
      animation: orbitReverse 31s linear infinite;
      transform-origin: 50% 50%;
    }

    .aura-wrap {
      position: relative;
      width: min(86vw, 64vh, 600px);
      height: min(86vw, 64vh, 600px);
      flex: 0 0 auto;
      isolation: isolate;
      container-type: inline-size;
    }

    .aura-wrap::before {
      content: "";
      position: absolute;
      inset: -8%;
      border-radius: 50%;
      background: radial-gradient(circle,
          rgba(249, 115, 22, 0.1) 0 12%,
          rgba(249, 115, 22, 0.035) 30%,
          transparent 64%);
      filter: blur(8px);
      z-index: -2;
    }

    .aura-ring {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      overflow: visible;
      pointer-events: none;
    }

    .aura-ring svg {
      width: 100%;
      height: 100%;
      overflow: visible;
      display: block;
    }

    .aura-ring path {
      fill: none;
    }

    .aura-outer {
      opacity: 0.52;
      filter: drop-shadow(0 0 12px rgba(249, 115, 22, 0.22));
    }

    .aura-inner {
      opacity: 0.32;
      filter: drop-shadow(0 0 9px rgba(245, 158, 11, 0.18));
    }

    .aura-center {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      z-index: 5;
      pointer-events: none;
      text-shadow:
        0 0 16px rgba(249, 115, 22, 0.45),
        0 0 45px rgba(234, 88, 12, 0.18);
    }

    .aura-center {
      padding-inline: 4%;
      box-sizing: border-box;
    }

    .aura-center-text {
      font-size: clamp(2rem, 13.5cqw, 6.8rem);
      line-height: 0.96;
      letter-spacing: -0.02em;
      white-space: nowrap;
      width: 100%;
      max-width: 100%;
      padding-inline: 2%;
      box-sizing: border-box;
      text-align: center;
      transform: translateY(-1%);
    }

    .splash-sound-hint {
      width: min(92vw, 34rem);
      max-width: 100%;
      padding-inline: clamp(0.5rem, 2vw, 1rem);
      box-sizing: border-box;
      font-size: clamp(0.68rem, 2.6vw, 0.9rem);
      line-height: 1.5;
      letter-spacing: clamp(0.04em, 0.45vw, 0.14em);
      text-wrap: balance;
      overflow-wrap: anywhere;
    }

    .splash-enter-btn {
      width: clamp(10.75rem, 42vw, 15.5rem);
      min-height: clamp(3.55rem, 10vw, 4.65rem);
      max-width: 88vw;
      padding-inline: clamp(1rem, 4vw, 1.7rem);
      padding-block: clamp(0.7rem, 2vw, 1rem);
      font-size: clamp(1.25rem, 5vw, 1.8rem);
      line-height: 1;
      white-space: nowrap;
      justify-content: center;
    }

    .aura-core {
      position: absolute;
      inset: 30%;
      border-radius: 999px;
      background: radial-gradient(circle,
          rgba(249, 115, 22, 0.12),
          rgba(0, 0, 0, 0.07) 54%,
          transparent 72%);
      filter: blur(3px);
      animation: auraPulse 4.8s ease-in-out infinite;
    }

    .aura-ring-outline {
      position: absolute;
      border-radius: 999px;
      border: 1px solid rgba(249, 115, 22, 0.17);
      box-shadow:
        0 0 40px rgba(249, 115, 22, 0.08),
        inset 0 0 40px rgba(249, 115, 22, 0.04);
      pointer-events: none;
    }

    .aura-ring-outline.outer {
      inset: 1%;
    }

    .aura-ring-outline.middle {
      inset: 15%;
      border-color: rgba(251, 146, 60, 0.12);
    }

    .aura-ring-outline.inner {
      inset: 29%;
      border-color: rgba(248, 113, 113, 0.1);
    }

    @media (max-height: 620px) {
      .aura-wrap {
        width: min(76vw, 54vh, 500px);
        height: min(76vw, 54vh, 500px);
      }

      .aura-center-text {
        font-size: clamp(1.8rem, 12.8cqw, 5.7rem);
      }

      .splash-sound-hint {
        width: min(90vw, 32rem);
        font-size: clamp(0.64rem, 2.4vw, 0.82rem);
      }
    }

    @media (max-width: 380px) {
      .aura-wrap {
        width: min(88vw, 54vh, 420px);
        height: min(88vw, 54vh, 420px);
      }

      .aura-center-text {
        font-size: clamp(1.7rem, 13cqw, 4.8rem);
      }

      .splash-sound-hint {
        width: 94vw;
        letter-spacing: 0.03em;
      }

      .splash-enter-btn {
        width: min(78vw, 14rem);
      }
    }

    @media (min-width: 768px) {
      .splash-enter-btn {
        width: clamp(11.5rem, 19vw, 15.5rem);
      }
    }

    .confetti-piece {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 5px;
      height: 9px;
      border-radius: 2px;
      animation: confettiFall forwards cubic-bezier(0.2, 0.8, 0.3, 1);
      /* box-shadow is GPU-composited and far cheaper than filter: drop-shadow */
      box-shadow: 0 0 6px 1px rgba(249, 115, 22, 0.55);
      will-change: transform, opacity;
    }

    .hero-divider {
      height: 1px;
      background: linear-gradient(90deg,
          transparent,
          rgba(251, 146, 60, 0.45),
          rgba(239, 68, 68, 0.2),
          transparent);
    }

    .story-track {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
      gap: 1rem;
      width: 100%;
      padding: 2px 0 10px;
      align-items: stretch;
    }

    .attraction-card.glass-card {
      min-width: 0;
      width: 100%;
      position: relative;
      overflow: visible;
      border: none !important;
      border-color: transparent !important;
      outline: none !important;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.04),
          transparent) !important;
      box-shadow:
        0 0 20px 8px rgba(255, 255, 255, 0.02),
        0 0 50px 15px rgba(5, 7, 17, 0.5),
        inset 0 0 25px 8px rgba(255, 255, 255, 0.012) !important;
    }

    .attraction-card.glass-card:hover {
      border: none !important;
      border-color: transparent !important;
      box-shadow:
        0 0 25px 10px rgba(249, 115, 22, 0.04),
        0 0 55px 15px rgba(5, 7, 17, 0.45),
        inset 0 0 25px 8px rgba(255, 255, 255, 0.018) !important;
    }

    .attraction-visual {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      border-radius: 1.45rem;
      overflow: hidden;
      background: transparent;
      isolation: isolate;
    }

    .attraction-visual img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      object-position: center;
      padding: 0.35rem;
      filter: saturate(0.94) contrast(1.03);
      -webkit-mask-image: radial-gradient(ellipse 85% 85% at center,
          #000 50%,
          rgba(0, 0, 0, 0.7) 70%,
          rgba(0, 0, 0, 0.25) 88%,
          transparent 100%);
      mask-image: radial-gradient(ellipse 85% 85% at center,
          #000 50%,
          rgba(0, 0, 0, 0.7) 70%,
          rgba(0, 0, 0, 0.25) 88%,
          transparent 100%);
    }

    .attraction-card h3 {
      min-height: 2.8rem;
    }

    .story-card {
      min-width: 0;
      width: 100%;
      scroll-snap-align: none;
    }

    @media (max-width: 640px) {
      .story-track {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
      }

      .story-visual {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
      }
    }

    .story-visual {
      position: relative;
      height: clamp(8.5rem, 31vw, 12rem);
      margin: -0.25rem -0.25rem 0;
      overflow: hidden;
      border-radius: 1.4rem;
      background:
        radial-gradient(circle at 20% 20%,
          rgba(249, 115, 22, 0.15),
          transparent 35%),
        radial-gradient(circle at 80% 25%,
          rgba(234, 88, 12, 0.12),
          transparent 34%),
        linear-gradient(135deg,
          rgba(255, 255, 255, 0.06),
          rgba(255, 255, 255, 0.015));
      isolation: isolate;
    }

    .story-visual img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      object-position: center;
      opacity: 0.88;
      filter: saturate(0.82) contrast(1.04);
      -webkit-mask-image: radial-gradient(ellipse 92% 84% at center,
          #000 48%,
          rgba(0, 0, 0, 0.94) 65%,
          rgba(0, 0, 0, 0.52) 79%,
          transparent 96%);
      mask-image: radial-gradient(ellipse 92% 84% at center,
          #000 48%,
          rgba(0, 0, 0, 0.94) 65%,
          rgba(0, 0, 0, 0.52) 79%,
          transparent 96%);
      transition:
        transform.55s cubic-bezier(0.2, 0.75, 0.2, 1),
        opacity.35s ease,
        filter.35s ease;
    }

    .story-card:hover.story-visual img {
      transform: scale(1.045);
      opacity: 0.98;
      filter: saturate(0.96) contrast(1.06);
    }

    /* Heavy GIFs stay unloaded until they are near the viewport. */
    .lazy-media {
      opacity: 0;
      transition:
        opacity.35s ease,
        transform.55s cubic-bezier(0.2, 0.75, 0.2, 1),
        filter.35s ease;
    }

    .lazy-media.is-loaded {
      opacity: 1;
    }

    .attraction-visual.lazy-media.is-loaded {
      opacity: 1;
    }

    .story-visual-fallback {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      text-align: center;
      padding: 1rem;
      color: rgba(255, 255, 255, 0.52);
      font-size: 0.75rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      background: radial-gradient(circle,
          rgba(249, 115, 22, 0.12),
          transparent 58%);
      z-index: 1;
    }

    .story-visual-badge {
      position: absolute;
      left: 0.75rem;
      top: 0.75rem;
      z-index: 4;
      padding: 0.32rem.55rem;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, 0.12);
      background: rgba(0, 0, 0, 0.28);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      font-size: 0.62rem;
      font-weight: 800;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      color: rgba(255, 236, 213, 0.72);
    }

    .section-ornament {
      width: min(10rem, 42vw);
      height: 1px;
      margin: 0 auto;
      background: linear-gradient(90deg,
          transparent,
          rgba(251, 146, 60, 0.42),
          rgba(239, 68, 68, 0.34),
          transparent);
    }

    .venue-shell {
      position: relative;
      overflow: hidden;
    }

    .venue-shell::before {
      content: "";
      position: absolute;
      left: 50%;
      top: 1.35rem;
      width: min(5rem, 20vw);
      height: 1px;
      transform: translateX(-50%);
      background: linear-gradient(90deg,
          transparent,
          rgba(251, 146, 60, 0.48),
          transparent);
    }

    .venue-shell::after {
      content: "✦";
      position: absolute;
      left: 50%;
      top: 1.08rem;
      transform: translateX(-50%);
      color: rgba(251, 146, 60, 0.4);
      font-size: 0.62rem;
    }

    .venue-content {
      position: relative;
      padding-top: 0.6rem;
    }

    #fireworkCanvas {
      position: fixed;
      inset: 0;
      z-index: 95;
      pointer-events: none;
      will-change: transform;
    }

    @keyframes emberRise {
      0% {
        transform: translate3d(0, 0, 0) scale(0.65);
        filter: blur(0.2px);
      }

      50% {
        transform: translate3d(18px, -48vh, 0) scale(1);
      }

      100% {
        transform: translate3d(-12px, -110vh, 0) scale(0.25);
      }
    }

    @keyframes slowSpin {
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes orbit {
      from {
        transform: rotate(0deg);
      }

      to {
        transform: rotate(360deg);
      }
    }

    @keyframes orbitReverse {
      from {
        transform: rotate(360deg);
      }

      to {
        transform: rotate(0deg);
      }
    }

    @keyframes auraPulse {

      0%,
      100% {
        transform: scale(0.93);
        opacity: 0.55;
      }

      50% {
        transform: scale(1.05);
        opacity: 0.9;
      }
    }

    @keyframes softFloat {

      0%,
      100% {
        transform: translateY(0) rotate(3deg);
      }

      50% {
        transform: translateY(-14px) rotate(-1deg);
      }
    }

    @keyframes sliceIn {
      0% {
        opacity: 0;
        transform: translateY(14px) skewX(-8deg);
        clip-path: inset(0 100% 0 0);
      }

      55% {
        opacity: 1;
        transform: translateY(0) skewX(0);
        clip-path: inset(0 0 0 0);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    @keyframes confettiFall {
      0% {
        transform: translate(-50%, -50%) rotate(0);
        opacity: 1;
      }

      100% {
        transform: translate(var(--x), var(--y)) rotate(var(--r));
        opacity: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
      }
    }

    /* =========================================================
 FINAL RESPONSIVE UI POLISH
 Keeps spacing fluid instead of tying layout to fixed gaps.
 ========================================================= */

    :root {
      --page-pad: clamp(1rem, 3.8vw, 4rem);
      --section-space: clamp(2.75rem, 6vw, 6rem);
      --content-gap: clamp(0.75rem, 2vw, 1.5rem);
      --card-pad: clamp(1rem, 2.2vw, 1.75rem);
      --radius-lg: clamp(1.15rem, 2.2vw, 2rem);
    }

    html {
      overflow-x: hidden;
      scroll-padding-top: clamp(4.5rem, 8vw, 5.5rem);
    }

    body {
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    /* Fluid section spacing */
    main>section,
    main>section[class] {
      padding-left: var(--page-pad) !important;
      padding-right: var(--page-pad) !important;
      padding-top: var(--section-space) !important;
      padding-bottom: var(--section-space) !important;
    }

    /* Let the content breathe without giant fixed whitespace */
    main>section>div,
    main>section.mx-auto {
      width: min(100%, 78rem);
    }

    /* Fluid grids */
    #storyGrid,
    #attrGrid {
      width: 100%;
      gap: var(--content-gap) !important;
    }

    #storyGrid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit,
          minmax(min(100%, 14.5rem), 1fr)) !important;
      align-items: stretch;
    }

    #attrGrid {
      display: grid !important;
      grid-template-columns: repeat(auto-fit,
          minmax(min(100%, 15rem), 1fr)) !important;
      align-items: stretch;
    }

    /* Card spacing */
    .story-card,
    #attrGrid>a,
    .glass-card {
      border-radius: var(--radius-lg);
    }

    .story-card {
      padding: var(--card-pad) !important;
    }

    #attrGrid>a {
      padding: var(--card-pad) !important;
      min-width: 0;
    }

    /* Richer glass treatment */
    .glass-card {
      background: linear-gradient(145deg,
          rgba(255, 255, 255, 0.085),
          rgba(255, 255, 255, 0.035) 55%,
          rgba(249, 115, 22, 0.035));
      border-color: rgba(255, 255, 255, 0.13);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        0 18px 50px rgba(0, 0, 0, 0.24),
        0 0 0 1px rgba(249, 115, 22, 0.025);
    }

    .glass-card:hover {
      border-color: rgba(251, 146, 60, 0.32);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 24px 60px rgba(0, 0, 0, 0.34),
        0 0 34px rgba(249, 115, 22, 0.07);
    }

    /* Responsive story / attraction media */
    .story-visual {
      width: 100%;
      aspect-ratio: 16 / 10;
      min-height: clamp(8rem, 20vw, 15rem);
      overflow: hidden;
      border-radius: clamp(0.9rem, 1.5vw, 1.35rem);
      background:
        radial-gradient(circle at 50% 45%,
          rgba(249, 115, 22, 0.13),
          transparent 62%),
        rgba(255, 255, 255, 0.03);
    }

    .story-visual img,
    #attrGrid img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
    }

    /* Fluid headings */
    #meaningTitle,
    #spiritTitle,
    #storyTitle,
    #attrTitle,
    #scheduleTitle {
      font-size: clamp(2rem, 5vw, 3.5rem) !important;
      line-height: 1.08 !important;
    }

    #heroTitle {
      font-size: clamp(2.45rem, 8vw, 7rem) !important;
      line-height: 1.04 !important;
      overflow-wrap: anywhere;
    }

    #heroSub {
      font-size: clamp(0.98rem, 1.65vw, 1.2rem) !important;
      line-height: 1.75 !important;
      max-width: min(100%, 52rem);
    }

    /* Philosophy copy readability */
    #meaningText,
    #spiritText {
      font-size: clamp(1rem, 1.6vw, 1.18rem) !important;
      line-height: 1.85 !important;
    }

    #spiritText {
      font-weight: 600 !important;
      color: rgba(255, 255, 255, 0.92) !important;
      text-wrap: pretty;
    }

    /* Hero meta chips */
    #dateChip,
    #timeChip,
    #locationChip {
      min-width: 0;
      overflow-wrap: anywhere;
    }

    main.glass-card {
      max-width: 100%;
    }

    /* Countdown stays fluid */
    #countdown {
      width: 100%;
      max-width: 58rem !important;
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: clamp(0.5rem, 1.6vw, 1.15rem) !important;
    }

    #countdown>div {
      padding: clamp(0.8rem, 2vw, 1.4rem) !important;
      border-radius: clamp(0.9rem, 1.7vw, 1.35rem);
      min-width: 0;
    }

    #countdown [id^="d"] {
      font-size: clamp(1.8rem, 5vw, 3.7rem) !important;
    }

    #countdown [id^="l"] {
      font-size: clamp(0.65rem, 1.3vw, 0.9rem) !important;
    }

    /* Buttons and links scale naturally */
    a,
    button {
      -webkit-tap-highlight-color: transparent;
    }

    .splash-enter-btn {
      width: min(18rem, 78vw);
      min-height: clamp(3.25rem, 8vw, 4.35rem);
      padding-inline: clamp(1.2rem, 4vw, 2rem) !important;
      font-size: clamp(1.05rem, 2.5vw, 1.45rem) !important;
    }

    #scheduleBtn,
    #heroBooklet,
    #topDonation,
    #topVolunteer,
    #topBooklet,
    #donateBtn,
    #volLink,
    #philosophyLink {
      min-height: clamp(2.9rem, 6vw, 3.45rem);
      padding-inline: clamp(1rem, 2.6vw, 1.75rem) !important;
    }

    /* Reduce unnecessary fixed vertical gaps */
    main.mt-10 {
      margin-top: clamp(1.5rem, 4vw, 2.5rem) !important;
    }

    main.mt-12 {
      margin-top: clamp(1.25rem, 3.2vw, 2.25rem) !important;
    }

    main.mt-16 {
      margin-top: clamp(2rem, 5vw, 4rem) !important;
    }

    main.mt-7 {
      margin-top: clamp(1rem, 2.8vw, 1.75rem) !important;
    }

    main.mt-6 {
      margin-top: clamp(0.9rem, 2.2vw, 1.5rem) !important;
    }

    main.mb-8 {
      margin-bottom: clamp(1.25rem, 3vw, 2rem) !important;
    }

    main.mb-10 {
      margin-bottom: clamp(1.5rem, 3.5vw, 2.5rem) !important;
    }

    main.mb-12 {
      margin-bottom: clamp(1.75rem, 4vw, 3rem) !important;
    }

    main.mb-16 {
      margin-bottom: clamp(2rem, 5vw, 4rem) !important;
    }

    /* Better mobile breathing room */
    @media (max-width: 900px) {

      main>section,
      main>section[class] {
        padding-top: clamp(2.4rem, 7vw, 4.5rem) !important;
        padding-bottom: clamp(2.4rem, 7vw, 4.5rem) !important;
      }

      #storyGrid,
      #attrGrid {
        grid-template-columns: repeat(auto-fit,
            minmax(min(100%, 13.25rem), 1fr)) !important;
      }
    }

    @media (max-width: 640px) {
      :root {
        --page-pad: clamp(0.85rem, 4vw, 1.15rem);
        --section-space: clamp(2.15rem, 8vw, 3.5rem);
        --content-gap: clamp(0.65rem, 2.5vw, 0.9rem);
        --card-pad: clamp(0.9rem, 4vw, 1.15rem);
      }

      #storyGrid {
        grid-template-columns: repeat(2, 1fr) !important;
      }

      #countdown {
        gap: 0.45rem !important;
      }

      #countdown>div {
        padding: 0.7rem.35rem !important;
      }

      #countdown [id^="d"] {
        font-size: clamp(1.5rem, 10vw, 2.3rem) !important;
      }

      #heroTitle {
        font-size: clamp(2.15rem, 13vw, 4rem) !important;
      }

      #heroSub {
        font-size: 0.95rem !important;
        line-height: 1.7 !important;
      }

      #meaningText,
      #spiritText {
        font-size: 1rem !important;
        line-height: 1.75 !important;
      }

      .story-visual {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        min-height: 0;
      }

      main.px-4,
      main.sm\\:px-6 {
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }
    }

    /* =========================================================
 THEMED TYPOGRAPHY & COLOR SYSTEM
 Warm ivory + muted gold + ember red, instead of white everywhere.
 ========================================================= */

    :root {
      --text-primary: #f3eadb;
      --text-heading: #fff4df;
      --text-secondary: #b9b0a3;
      --text-muted: #8f877d;
      --text-gold: #f4b45f;
      --text-amber: #ffcc7a;
      --text-red: #ff7650;
      --text-emerald: #9fd6b0;
      --text-teal: #86d7d0;
      --text-blue: #a9bcff;
    }

    /* Overall page text */
    body {
      color: var(--text-secondary);
    }

    main {
      color: var(--text-secondary);
    }

    /* Main headings: luminous ivory, not stark white */
    main h1,
    main h2,
    main h3 {
      color: var(--text-heading) !important;
    }

    /* Hero */
    #heroTitle,
    #heroTitle span {
      color: transparent !important;
    }

    #heroSub {
      color: #bdb4a8 !important;
    }

    /* Section eyebrow labels */
    main>section [class*="tracking-[0.25em]"],
    main>section [class*="tracking-[0.18em]"] {
      color: var(--text-gold) !important;
    }

    /* General paragraphs and supporting copy */
    main p {
      color: var(--text-secondary) !important;
    }

    #meaningText {
      color: #d7cec1 !important;
    }

    #spiritText {
      color: #f0e7d9 !important;
    }

    /* Card titles */
    .glass-card h3,
    .glass-card h4 {
      color: var(--text-heading) !important;
    }

    /* Ramayana & attraction supporting copy */
    .story-card p,
    #attrGrid p {
      color: #a9a095 !important;
    }

    /* Event chips */
    #dateChip,
    #timeChip,
    #locationChip {
      color: #c8c0b5 !important;
    }

    /* Countdown */
    #countLabel,
    #countdown [id^="l"] {
      color: #a79e92 !important;
    }

    #countdown [id^="d"] {
      color: #f6c176 !important;
    }

    /* Schedule */
    #scheduleList h3 {
      color: #f3e8d8 !important;
    }

    #scheduleList p {
      color: #9f978c !important;
    }

    #scheduleList.text-orange-200 {
      color: #f2b45e !important;
    }

    /* Volunteer block */
    #volLabel {
      color: #9fd6b0 !important;
    }

    #volText {
      color: #aaa298 !important;
    }

    /* Janmashtami block */
    #janTitle {
      color: #f0e7d9 !important;
    }

    #janText {
      color: #aaa298 !important;
    }

    #janLink {
      color: var(--text-teal) !important;
    }

    /* Philosophy button / important accent links */
    #philosophyLink,
    #volLink {
      color: #f2c077 !important;
    }

    /* Donation/support area */
    #donateBtn {
      color: #fff4df !important;
    }

    /* Booklet */
    #heroBooklet,
    #topBooklet {
      color: #fff4df !important;
    }

    /* Location */
    #venueText {
      color: #bdb3a6 !important;
    }

    /* Footer hierarchy */
    footer h2 {
      color: #f2e9dc !important;
    }

    footer p,
    footer a {
      color: #8f887e;
    }

    footer a:hover {
      color: #f4bd6b !important;
    }

    /* Buttons use their own strong accent colors, while labels remain warm ivory */
    button,
    a {
      text-decoration-thickness: 0.08em;
    }

    /* Mobile readability */
    @media (max-width: 640px) {
      main p {
        color: #bcb3a7 !important;
      }

      #meaningText {
        color: #d3c9bc !important;
      }

      #spiritText {
        color: #f0e6d8 !important;
      }
    }

    @media (prefers-contrast: more) {
      body {
        color: #d8d0c5;
      }

      main p {
        color: #d8d0c5 !important;
      }

      #spiritText,
      #meaningText {
        color: #fff1dc !important;
      }
    }

    /* Floating Sanjeevani artwork: no card, no rectangular boundary */
    .sanjeevani-float {
      z-index: 4;
      width: clamp(7rem, 15vw, 13rem);
      aspect-ratio: 1;
      display: grid;
      place-items: center;
      opacity: 0.72;
      transform-origin: center;
    }

    .sanjeevani-haze {
      position: absolute;
      inset: 12%;
      border-radius: 50%;
      background: radial-gradient(circle,
          rgba(249, 115, 22, 0.18) 0 20%,
          rgba(251, 146, 60, 0.08) 38%,
          transparent 72%);
      filter: blur(22px);
      transform: scale(1.08);
    }

    .sanjeevani-gif {
      position: relative;
      z-index: 2;
      width: 100%;
      height: 100%;
      object-fit: contain;
      border-radius: 50%;
      opacity: 0;
      filter: drop-shadow(0 0 24px rgba(249, 115, 22, 0.14));
      -webkit-mask-image: radial-gradient(circle at center,
          #000 0 57%,
          rgba(0, 0, 0, 0.82) 66%,
          rgba(0, 0, 0, 0.38) 78%,
          transparent 94%);
      mask-image: radial-gradient(circle at center,
          #000 0 57%,
          rgba(0, 0, 0, 0.82) 66%,
          rgba(0, 0, 0, 0.38) 78%,
          transparent 94%);
      transition:
        opacity.55s ease,
        transform.55s ease;
    }

    .sanjeevani-gif.is-loaded {
      opacity: 0.9;
    }

    .sanjeevani-float::after {
      content: "";
      position: absolute;
      inset: 7%;
      border-radius: 50%;
      background: radial-gradient(circle,
          transparent 52%,
          rgba(249, 115, 22, 0.04) 66%,
          transparent 78%);
      filter: blur(12px);
      pointer-events: none;
    }

    @media (max-width: 900px) {
      .sanjeevani-float {
        right: 2vw;
        top: 18%;
        width: clamp(6rem, 18vw, 9rem);
      }
    }

    /* Decorative background artwork must never create layout width or overlap content. */
    .sanjeevani-float {
      pointer-events: none !important;
      max-width: 22vw;
      max-height: 22vw;
      overflow: visible;
    }

    /* Attraction cards: same auto-fit behavior as the Ramayana cards */
    #attrGrid {
      width: 100%;
      display: grid !important;
      grid-template-columns: repeat(auto-fit,
          minmax(min(100%, 15rem), 1fr)) !important;
      gap: var(--content-gap) !important;
      align-items: stretch;
    }

    #attrGrid>.attraction-card {
      min-width: 0;
      width: 100%;
      height: 100%;
    }

    .attraction-visual {
      width: 100%;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border-radius: clamp(0.9rem, 1.5vw, 1.35rem);
    }

    .attraction-visual img {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: contain;
      padding: 0.5rem;
    }

    @media (max-width: 640px) {
      #attrGrid {
        grid-template-columns: repeat(auto-fit,
            minmax(min(100%, 13.25rem), 1fr)) !important;
      }
    }

    @media (max-width: 380px) {
      #attrGrid {
        grid-template-columns: 1fr !important;
      }
    }

    /* =========================================================
 PREMIUM EPIC NIGHT FRONT-END SYSTEM
 Visual language: midnight navy + ember orange + antique gold
 + restrained red/teal/emerald accents.
 ========================================================= */

    :root {
      --bg-0: #04050b;
      --bg-1: #070a13;
      --bg-2: #0c0b12;
      --surface-1: rgba(18, 19, 30, 0.78);
      --surface-2: rgba(26, 24, 32, 0.62);
      --surface-soft: rgba(255, 255, 255, 0.045);

      --ivory: #f5ead9;
      --ivory-strong: #fff5e6;
      --warm-muted: #b6aa9b;
      --muted: #827a72;

      --gold: #f0b35d;
      --gold-soft: #d9a25c;
      --saffron: #f97316;
      --ember: #ff6748;
      --deep-red: #b9362c;

      --emerald: #74c79a;
      --teal: #62c7c1;
      --blue: #8eaaff;

      --line: rgba(255, 255, 255, 0.1);
      --line-warm: rgba(240, 179, 93, 0.22);

      --shadow-deep: 0 28px 80px rgba(0, 0, 0, 0.34);
      --shadow-warm: 0 18px 55px rgba(249, 115, 22, 0.08);

      --page-pad: clamp(1rem, 3.7vw, 4rem);
      --section-space: clamp(2.7rem, 6vw, 5.8rem);
      --content-gap: clamp(0.75rem, 1.8vw, 1.35rem);
    }

    html {
      background: var(--bg-0);
      color-scheme: dark;
    }

    body {
      background:
        radial-gradient(circle at 50% 8%,
          rgba(125, 62, 33, 0.13),
          transparent 28%),
        radial-gradient(circle at 86% 62%,
          rgba(39, 46, 91, 0.08),
          transparent 31%),
        linear-gradient(180deg,
          var(--bg-0) 0%,
          var(--bg-1) 48%,
          var(--bg-2) 100%);
      color: var(--warm-muted);
    }

    /* Keep the grid subtle. It should frame the page, not compete with it. */
    .hero-grid {
      opacity: 0.38 !important;
      background-size: 42px 42px !important;
    }

    /* Softer mandala presence */
    .mandala {
      opacity: 0.14 !important;
      filter: blur(0.1px);
    }

    /* ---------- Header ---------- */
    header.sticky {
      background: linear-gradient(180deg,
          rgba(7, 9, 18, 0.92),
          rgba(7, 9, 18, 0.74)) !important;
      border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
      box-shadow: 0 10px 35px rgba(0, 0, 0, 0.16);
    }

    /* Free Classes Dedicated Announcement Top Bar */
    #aiClassesTopBar {
      min-height: unset !important;
      background: linear-gradient(90deg, rgba(4, 29, 45, 0.98) 0%, rgba(7, 43, 68, 0.98) 50%, rgba(11, 27, 61, 0.98) 100%) !important;
      border-bottom: 1px solid rgba(6, 182, 212, 0.3) !important;
      box-shadow: 0 4px 20px rgba(6, 182, 212, 0.15) !important;
    }

    header a[href="#home"]>div:first-child {
      border-color: rgba(240, 179, 93, 0.28) !important;
      background: radial-gradient(circle at 35% 30%,
          rgba(249, 115, 22, 0.18),
          rgba(255, 255, 255, 0.025)) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 28px rgba(249, 115, 22, 0.09) !important;
    }

    #brandHi {
      color: #efc17b !important;
    }

    header.text-\[10px\] {
      color: rgba(214, 202, 186, 0.35) !important;
    }

    #langBtn,
    #mobileLangBtn {
      color: #d6cab9 !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      background: rgba(255, 255, 255, 0.035) !important;
    }

    #menuBtn {
      color: #e4d8c7 !important;
      border-color: rgba(255, 255, 255, 0.1) !important;
      background: rgba(255, 255, 255, 0.035) !important;
    }

    /* CTA differentiation */
    #topDonation,
    #mobileDonation {
      background: linear-gradient(135deg,
          #e34f2d 0%,
          #f97316 58%,
          #ff9a32 100%) !important;
      box-shadow: 0 11px 30px rgba(249, 115, 22, 0.18) !important;
    }

    #topVolunteer,
    #mobileVolunteer {
      color: #bde6c8 !important;
      border-color: rgba(116, 199, 154, 0.25) !important;
      background: linear-gradient(180deg,
          rgba(76, 175, 112, 0.1),
          rgba(76, 175, 112, 0.035)) !important;
    }

    #topBooklet,
    #mobileBooklet {
      background: linear-gradient(135deg,
          #3945b9 0%,
          #4f67ee 55%,
          #6478ff 100%) !important;
      box-shadow: 0 11px 30px rgba(77, 96, 233, 0.16) !important;
    }

    /* ---------- Hero ---------- */
    #home {
      isolation: isolate;
    }

    #home::before {
      content: "";
      position: absolute;
      inset: 10% 8% auto;
      height: 35%;
      background: radial-gradient(ellipse at center,
          rgba(249, 115, 22, 0.09),
          transparent 65%);
      filter: blur(28px);
      pointer-events: none;
      z-index: -1;
    }

    #home.inline-flex.rounded-full {
      color: #efc17b !important;
      border-color: rgba(240, 179, 93, 0.18) !important;
      background: rgba(249, 115, 22, 0.045) !important;
    }

    #heroTitle {
      filter: drop-shadow(0 0 22px rgba(249, 115, 22, 0.12));
    }

    #heroSub {
      color: #aaa197 !important;
    }

    /* Event chips */
    #home.mt-9.flex.flex-wrap>.glass-card {
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.055),
          rgba(255, 255, 255, 0.025)) !important;
      border-color: rgba(255, 255, 255, 0.085) !important;
      color: #aaa197 !important;
    }

    #home.mt-9.flex.flex-wrap>.glass-card.text-orange-300 {
      color: #eeb66a !important;
    }

    /* Countdown frame */
    #home.max-w-4xl>.glass-card {
      background:
        radial-gradient(circle at 50% -10%,
          rgba(249, 115, 22, 0.08),
          transparent 46%),
        linear-gradient(180deg,
          rgba(255, 255, 255, 0.055),
          rgba(255, 255, 255, 0.025)) !important;
      border-color: rgba(240, 179, 93, 0.15) !important;
      box-shadow: var(--shadow-deep), var(--shadow-warm) !important;
    }

    #countLabel {
      color: #c1b5a6 !important;
    }

    #countdown>div {
      background: linear-gradient(180deg,
          rgba(13, 14, 23, 0.84),
          rgba(7, 8, 14, 0.88)) !important;
      border-color: rgba(255, 255, 255, 0.085) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 12px 32px rgba(0, 0, 0, 0.22) !important;
    }

    #countdown [id^="d"] {
      color: #f1bb6d !important;
    }

    #countdown [id^="l"] {
      color: #877e74 !important;
    }

    #scheduleBtn {
      background: linear-gradient(135deg, #f7ead6, #e8d6bd) !important;
      color: #17120d !important;
    }

    #heroBooklet {
      border-color: rgba(240, 179, 93, 0.22) !important;
      background: linear-gradient(180deg,
          rgba(249, 115, 22, 0.08),
          rgba(249, 115, 22, 0.025)) !important;
      color: #f0c37c !important;
    }

    /* ---------- Shared section headings ---------- */
    main>section {
      position: relative;
    }

    main>section:not(#home)::before {
      content: "";
      display: block;
      width: min(7rem, 24vw);
      height: 1px;
      margin: 0 auto clamp(1.25rem, 2.7vw, 2rem);
      background: linear-gradient(90deg,
          transparent,
          rgba(240, 179, 93, 0.42),
          transparent);
      opacity: 0.55;
    }

    main>section>div>.text-center>div:first-child {
      color: #c6904e !important;
    }

    #meaningTitle,
    #spiritTitle,
    #storyTitle,
    #attrTitle,
    #scheduleTitle {
      color: var(--ivory-strong) !important;
      text-shadow: 0 7px 28px rgba(0, 0, 0, 0.32);
    }

    /* ---------- Philosophy ---------- */
    #meaningText {
      color: #d1c6b8 !important;
    }

    #spiritText {
      color: #f0e6d8 !important;
    }

    #philosophyLink {
      border-color: rgba(240, 179, 93, 0.23) !important;
      background: linear-gradient(180deg,
          rgba(240, 179, 93, 0.08),
          rgba(240, 179, 93, 0.025)) !important;
      color: #f0c37b !important;
    }

    /* ---------- Generic glass surfaces ---------- */
    .glass-card {
      background: linear-gradient(145deg,
          rgba(255, 255, 255, 0.072),
          rgba(255, 255, 255, 0.028) 58%,
          rgba(249, 115, 22, 0.028)) !important;
      border-color: rgba(255, 255, 255, 0.115) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.055),
        0 18px 48px rgba(0, 0, 0, 0.25) !important;
    }

    .glass-card:hover {
      border-color: rgba(240, 179, 93, 0.3) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 24px 62px rgba(0, 0, 0, 0.33),
        0 0 32px rgba(249, 115, 22, 0.06) !important;
    }

    /* ---------- Ramayana cards ---------- */
    .story-card {
      background: linear-gradient(160deg,
          rgba(255, 255, 255, 0.06),
          rgba(255, 255, 255, 0.025)) !important;
      border-color: rgba(255, 255, 255, 0.11) !important;
      overflow: hidden;
      position: relative;
    }

    .story-card::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 38%;
      background: linear-gradient(180deg, transparent, rgba(6, 7, 13, 0.55));
      pointer-events: none;
    }

    .story-card:hover {
      transform: translateY(-4px);
    }

    .story-visual {
      box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.045),
        0 10px 30px rgba(0, 0, 0, 0.24);
    }

    .story-card h3 {
      position: relative;
      z-index: 2;
      color: #f5eadc !important;
    }

    /* ---------- Attraction cards ---------- */
    #attrGrid>a,
    #attrGrid>.attraction-card {
      position: relative;
      overflow: visible;
      border: none !important;
      border-color: transparent !important;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.04),
          transparent) !important;
      box-shadow:
        0 0 20px 8px rgba(255, 255, 255, 0.02),
        0 0 50px 15px rgba(5, 7, 17, 0.5),
        inset 0 0 25px 8px rgba(255, 255, 255, 0.012) !important;
    }

    #attrGrid>a:hover,
    #attrGrid>.attraction-card:hover {
      transform: translateY(-4px);
      border: none !important;
      border-color: transparent !important;
      box-shadow:
        0 0 25px 10px rgba(249, 115, 22, 0.04),
        0 0 55px 15px rgba(5, 7, 17, 0.45),
        inset 0 0 25px 8px rgba(255, 255, 255, 0.018) !important;
    }

    .attraction-visual {
      background: transparent !important;
      box-shadow: none !important;
    }

    /* ---------- Schedule ---------- */
    #scheduleList.glass-card {
      background: linear-gradient(155deg,
          rgba(255, 255, 255, 0.065),
          rgba(255, 255, 255, 0.025)) !important;
    }

    #scheduleList.text-orange-200 {
      color: #efba69 !important;
    }

    #scheduleList h3 {
      color: #f5eadd !important;
    }

    #scheduleList p {
      color: #9f968b !important;
    }

    #scheduleList.bg-orange-400 {
      background: #df9a45 !important;
    }

    #scheduleList.bg-red-500 {
      background: #dc5842 !important;
    }

    /* Timeline itself should be refined, not loud */
    #scheduleList+* {
      opacity: 0.95;
    }

    /* ---------- Volunteer / Janmashtami ---------- */
    #volLink {
      color: #9ed9ae !important;
      border-color: rgba(116, 199, 154, 0.18) !important;
      background: rgba(116, 199, 154, 0.055) !important;
    }

    #volLabel {
      color: #91cb9f !important;
    }

    #volTitle {
      color: #f0e7da !important;
    }

    #volText {
      color: #a9a095 !important;
    }

    #janLink {
      color: #7fd3cc !important;
    }

    #janTitle {
      color: #f0e6d9 !important;
    }

    #janText {
      color: #a9a095 !important;
    }

    /* ---------- Transparency / donation block ---------- */
    #donate {
      scroll-margin-top: 6rem;
    }

    #donate>div {
      background:
        radial-gradient(circle at 12% 0%,
          rgba(116, 199, 154, 0.06),
          transparent 30%),
        radial-gradient(circle at 90% 100%,
          rgba(249, 115, 22, 0.07),
          transparent 34%),
        linear-gradient(145deg,
          rgba(255, 255, 255, 0.062),
          rgba(255, 255, 255, 0.026)) !important;
      border-color: rgba(255, 255, 255, 0.105) !important;
      box-shadow: var(--shadow-deep) !important;
    }

    #transLabel {
      color: #d4a15e !important;
    }

    #transTitle {
      color: #f5eadc !important;
    }

    #transText {
      color: #a79e93 !important;
    }

    #donateLink {
      background: linear-gradient(135deg,
          #dc4b31,
          #f97316,
          #ff9b39) !important;
      color: #fff5e8 !important;
      box-shadow: 0 12px 30px rgba(249, 115, 22, 0.16) !important;
    }

    /* ---------- Venue ---------- */
    .venue-shell {
      background:
        radial-gradient(circle at 50% 0%,
          rgba(249, 115, 22, 0.09),
          transparent 45%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent) !important;
      border-top: 1px solid rgba(240, 179, 93, 0.11);
    }

    #venueLabel {
      color: #c99555 !important;
    }

    #venueText {
      color: #d1c6b8 !important;
    }

    #mapsLink {
      color: #d8c7b2 !important;
      border-color: rgba(255, 255, 255, 0.12) !important;
      background: rgba(255, 255, 255, 0.028) !important;
    }

    /* ---------- Footer ---------- */
    footer {
      background:
        radial-gradient(circle at 50% 0%,
          rgba(249, 115, 22, 0.055),
          transparent 38%),
        #03050b !important;
      border-top-color: rgba(255, 255, 255, 0.07) !important;
    }

    footer h2 {
      color: #f0e5d7 !important;
    }

    footer p,
    footer a {
      color: #857e76;
    }

    footer a:hover {
      color: #f0bc70 !important;
    }

    /* ---------- Better focus states ---------- */
    a:focus-visible,
    button:focus-visible {
      outline: 2px solid rgba(240, 179, 93, 0.85) !important;
      outline-offset: 3px;
    }

    /* ---------- Responsive finishing ---------- */
    @media (max-width: 900px) {
      main>section:not(#home)::before {
        margin-bottom: clamp(1rem, 3vw, 1.6rem);
      }
    }

    @media (max-width: 640px) {
      header.sticky>div {
        min-height: 4.25rem;
      }

      #home.mt-9.flex.flex-wrap {
        gap: 0.55rem !important;
      }

      #home.mt-9.flex.flex-wrap>.glass-card {
        padding: 0.55rem.8rem !important;
        font-size: 0.78rem !important;
      }

      #countdown {
        gap: 0.45rem !important;
      }

      #storyGrid,
      #attrGrid {
        row-gap: clamp(0.85rem, 3vw, 1.15rem) !important;
      }

      .story-card:hover,
      #attrGrid>a:hover,
      #attrGrid>.attraction-card:hover {
        transform: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .glass-card:hover,
      .story-card:hover,
      #attrGrid>a:hover,
      #attrGrid>.attraction-card:hover {
        transform: none !important;
      }
    }

    /* =========================================================
 THEME LOCK v2
 Explicitly overrides legacy Tailwind text utilities so the
 premium dark palette is visible consistently in every section.
 ========================================================= */

    html,
    body {
      background: #04050b !important;
    }

    body {
      color: #b6aa9b !important;
    }

    /* Kill the old white/text-slate palette where it conflicts with
 the premium dark theme. Specific components below restore their
 intentional accent colors. */
    main [class*="text-white"],
    main [class*="text-slate-"],
    main [class*="text-gray-"] {
      color: #b6aa9b !important;
    }

    /* Primary hierarchy */
    main h1,
    main h2,
    main h3,
    main h4,
    main h5,
    main h6 {
      color: #f5ead9 !important;
    }

    /* Hero heading keeps its intentional gradient */
    #heroTitle,
    #heroTitle span {
      color: transparent !important;
    }

    /* Supporting copy */
    main p {
      color: #a69c91 !important;
    }

    #meaningText {
      color: #d4c8b8 !important;
    }

    #spiritText {
      color: #f2e8da !important;
      font-weight: 600 !important;
    }

    /* Gold labels and section eyebrows */
    main.text-orange-300,
    main.text-orange-200,
    main.text-amber-300,
    main.text-amber-200 {
      color: #e8b668 !important;
    }

    /* Accent families */
    main.text-green-300,
    main.text-green-200 {
      color: #8dcca0 !important;
    }

    main.text-teal-300,
    main.text-teal-200 {
      color: #79d0c8 !important;
    }

    main.text-blue-300,
    main.text-blue-200 {
      color: #a6b7ff !important;
    }

    /* Buttons */
    #topDonation,
    #mobileDonation,
    #donateLink {
      color: #fff5e7 !important;
    }

    #topVolunteer,
    #mobileVolunteer {
      color: #bce5c7 !important;
    }

    #topBooklet,
    #mobileBooklet,
    #heroBooklet {
      color: #fff1d7 !important;
    }

    /* Countdown digits */
    #countdown [id^="d"] {
      color: #f3bd72 !important;
    }

    #countdown [id^="l"],
    #countLabel {
      color: #9c9186 !important;
    }

    /* Cards */
    .story-card h3,
    #attrGrid h3 {
      color: #f5eadc !important;
    }

    .story-card p,
    #attrGrid p {
      color: #a59b90 !important;
    }

    /* Philosophy link */
    #philosophyLink {
      color: #efc076 !important;
    }

    /* Volunteer / Janmashtami */
    #volLabel {
      color: #8ed09e !important;
    }

    #janLink {
      color: #7fd3cc !important;
    }

    /* Venue */
    #venueText {
      color: #d0c4b6 !important;
    }

    #mapsLink {
      color: #d2c5b6 !important;
    }

    /* Footer */
    footer,
    footer * {
      color: #857d75;
    }

    footer h2 {
      color: #f0e5d8 !important;
    }

    footer a:hover {
      color: #efbb70 !important;
    }

    /* Make glass surfaces noticeably richer */
    .glass-card {
      background: linear-gradient(145deg,
          rgba(255, 255, 255, 0.075) 0%,
          rgba(255, 255, 255, 0.03) 58%,
          rgba(249, 115, 22, 0.04) 100%) !important;
      border-color: rgba(255, 255, 255, 0.13) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.065),
        0 20px 55px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(249, 115, 22, 0.025) !important;
    }

    #attrGrid>a,
    #attrGrid>.attraction-card {
      border: none !important;
      border-color: transparent !important;
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.04),
          transparent) !important;
      box-shadow:
        0 0 20px 8px rgba(255, 255, 255, 0.02),
        0 0 50px 15px rgba(5, 7, 17, 0.5),
        inset 0 0 25px 8px rgba(255, 255, 255, 0.012) !important;
    }

    /* Stronger section rhythm without fixed giant gaps */
    main>section:not(#home)::before {
      width: min(8rem, 24vw) !important;
      background: linear-gradient(90deg,
          transparent,
          rgba(240, 179, 93, 0.5),
          transparent) !important;
      opacity: 0.7 !important;
    }

    /* =========================================================
 AUTO DAY / NIGHT THEME
 The page uses the existing cinematic dark theme at night.
 During daylight it switches to a warm parchment/ivory theme.
 ========================================================= */

    body[data-theme="day"] {
      color-scheme: light !important;
      background:
        radial-gradient(circle at 50% 0%,
          rgba(246, 183, 104, 0.18),
          transparent 26%),
        radial-gradient(circle at 86% 42%,
          rgba(246, 217, 174, 0.18),
          transparent 31%),
        linear-gradient(180deg, #fffaf3 0%, #fff7ee 50%, #fff0e0 100%) !important;
      color: #665a4f !important;
    }

    body[data-theme="day"] header.sticky {
      background: rgba(255, 251, 246, 0.88) !important;
      border-bottom-color: rgba(117, 82, 49, 0.12) !important;
      box-shadow: 0 10px 32px rgba(132, 91, 50, 0.08) !important;
    }

    body[data-theme="day"] #aiClassesTopBar {
      background: linear-gradient(90deg, #093746 0%, #0e4c63 50%, #153e5e 100%) !important;
      border-bottom-color: rgba(6, 182, 212, 0.4) !important;
      box-shadow: 0 4px 20px rgba(14, 76, 99, 0.25) !important;
      color: #ffffff !important;
    }

    body[data-theme="day"] #brandHi {
      color: #9d5d1c !important;
    }

    body[data-theme="day"] #langBtn,
    body[data-theme="day"] #mobileLangBtn,
    body[data-theme="day"] #menuBtn {
      color: #5f5449 !important;
      border-color: rgba(112, 78, 45, 0.18) !important;
      background: rgba(255, 255, 255, 0.58) !important;
    }

    body[data-theme="day"] #topVolunteer,
    body[data-theme="day"] #mobileVolunteer {
      color: #4c825a !important;
      border-color: rgba(76, 130, 90, 0.25) !important;
      background: rgba(98, 164, 113, 0.08) !important;
    }

    body[data-theme="day"] #topBooklet,
    body[data-theme="day"] #mobileBooklet {
      box-shadow: 0 10px 26px rgba(75, 91, 214, 0.13) !important;
    }

    body[data-theme="day"] #home::before {
      background: radial-gradient(ellipse at center,
          rgba(228, 93, 24, 0.1),
          transparent 65%) !important;
    }

    body[data-theme="day"].hero-grid {
      opacity: 0.45 !important;
      background-image:
        linear-gradient(rgba(122, 83, 46, 0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122, 83, 46, 0.055) 1px, transparent 1px) !important;
    }

    body[data-theme="day"] #home.inline-flex.rounded-full {
      color: #a45f22 !important;
      border-color: rgba(180, 109, 33, 0.2) !important;
      background: rgba(228, 93, 24, 0.055) !important;
    }

    body[data-theme="day"] #heroSub {
      color: #75695e !important;
    }

    body[data-theme="day"] #home.mt-9.flex.flex-wrap>.glass-card {
      background: rgba(255, 255, 255, 0.7) !important;
      border-color: rgba(117, 82, 49, 0.13) !important;
      color: #6f6459 !important;
      box-shadow: 0 10px 28px rgba(119, 80, 43, 0.07) !important;
    }

    body[data-theme="day"] #home.max-w-4xl>.glass-card {
      background: linear-gradient(145deg,
          rgba(255, 255, 255, 0.88),
          rgba(255, 247, 237, 0.92)) !important;
      border-color: rgba(180, 109, 33, 0.16) !important;
      box-shadow: 0 24px 65px rgba(128, 84, 42, 0.11) !important;
    }

    body[data-theme="day"] #countLabel,
    body[data-theme="day"] #countdown [id^="l"] {
      color: #8b7e71 !important;
    }

    body[data-theme="day"] #countdown>div {
      background: linear-gradient(180deg,
          rgba(255, 255, 255, 0.95),
          rgba(255, 248, 239, 0.94)) !important;
      border-color: rgba(116, 82, 50, 0.12) !important;
      box-shadow: 0 12px 34px rgba(123, 84, 44, 0.08) !important;
    }

    body[data-theme="day"] #countdown [id^="d"] {
      color: #c66e1c !important;
    }

    body[data-theme="day"] #scheduleBtn {
      background: linear-gradient(135deg, #4b3c2f, #705342) !important;
      color: #fff8ee !important;
    }

    body[data-theme="day"] #heroBooklet {
      color: #9b5d20 !important;
      border-color: rgba(180, 109, 33, 0.23) !important;
      background: linear-gradient(180deg,
          rgba(228, 93, 24, 0.07),
          rgba(228, 93, 24, 0.025)) !important;
    }

    body[data-theme="day"] main h1,
    body[data-theme="day"] main h2,
    body[data-theme="day"] main h3,
    body[data-theme="day"] main h4,
    body[data-theme="day"] main h5,
    body[data-theme="day"] main h6 {
      color: #362b22 !important;
    }

    body[data-theme="day"] #heroTitle,
    body[data-theme="day"] #heroTitle span {
      color: transparent !important;
    }

    body[data-theme="day"] main p {
      color: #74695e !important;
    }

    body[data-theme="day"] #meaningText {
      color: #64584d !important;
    }

    body[data-theme="day"] #spiritText {
      color: #342920 !important;
    }

    body[data-theme="day"] main>section:not(#home)::before {
      background: linear-gradient(90deg,
          transparent,
          rgba(180, 109, 33, 0.48),
          transparent) !important;
    }

    body[data-theme="day"].glass-card,
    body[data-theme="day"] #attrGrid>a,
    body[data-theme="day"] #attrGrid>.attraction-card {
      background: linear-gradient(145deg,
          rgba(255, 255, 255, 0.88),
          rgba(255, 248, 240, 0.82)) !important;
      border-color: rgba(117, 82, 49, 0.13) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 18px 46px rgba(119, 82, 45, 0.09) !important;
    }

    body[data-theme="day"].glass-card:hover,
    body[data-theme="day"] #attrGrid>a:hover,
    body[data-theme="day"] #attrGrid>.attraction-card:hover {
      border-color: rgba(180, 109, 33, 0.3) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        0 24px 58px rgba(119, 82, 45, 0.13),
        0 0 26px rgba(228, 93, 24, 0.05) !important;
    }

    body[data-theme="day"].story-card h3,
    body[data-theme="day"] #attrGrid h3 {
      color: #3d3025 !important;
    }

    body[data-theme="day"].story-card p,
    body[data-theme="day"] #attrGrid p {
      color: #766b60 !important;
    }

    body[data-theme="day"] #scheduleList.glass-card {
      background: linear-gradient(150deg,
          rgba(255, 255, 255, 0.92),
          rgba(255, 247, 237, 0.9)) !important;
    }

    body[data-theme="day"] #scheduleList h3 {
      color: #3d3026 !important;
    }

    body[data-theme="day"] #scheduleList p {
      color: #786d62 !important;
    }

    body[data-theme="day"] #volLabel {
      color: #4f8a60 !important;
    }

    body[data-theme="day"] #volTitle,
    body[data-theme="day"] #janTitle {
      color: #3b3026 !important;
    }

    body[data-theme="day"] #volText,
    body[data-theme="day"] #janText {
      color: #776b60 !important;
    }

    body[data-theme="day"] #volLink {
      color: #4b8258 !important;
      border-color: rgba(75, 130, 88, 0.21) !important;
      background: rgba(98, 164, 113, 0.07) !important;
    }

    body[data-theme="day"] #janLink {
      color: #1d7b74 !important;
    }

    body[data-theme="day"] #donate>div {
      background:
        radial-gradient(circle at 10% 0%,
          rgba(95, 164, 112, 0.05),
          transparent 30%),
        radial-gradient(circle at 90% 100%,
          rgba(228, 93, 24, 0.06),
          transparent 35%),
        linear-gradient(145deg,
          rgba(255, 255, 255, 0.88),
          rgba(255, 248, 240, 0.84)) !important;
      border-color: rgba(117, 82, 49, 0.13) !important;
    }

    body[data-theme="day"] #transLabel {
      color: #ad6b24 !important;
    }

    body[data-theme="day"] #transTitle {
      color: #3a2f25 !important;
    }

    body[data-theme="day"] #transText {
      color: #786d61 !important;
    }

    body[data-theme="day"].venue-shell {
      background:
        radial-gradient(circle at 50% 0%,
          rgba(228, 93, 24, 0.07),
          transparent 48%),
        linear-gradient(180deg,
          rgba(255, 246, 236, 0.94),
          rgba(255, 239, 225, 0.95)) !important;
      border-top-color: rgba(180, 109, 33, 0.14) !important;
    }

    body[data-theme="day"] #venueLabel {
      color: #aa6722 !important;
    }

    body[data-theme="day"] #venueText {
      color: #665b50 !important;
    }

    body[data-theme="day"] #mapsLink {
      color: #5e5247 !important;
      border-color: rgba(108, 76, 47, 0.15) !important;
      background: rgba(255, 255, 255, 0.54) !important;
    }

    body[data-theme="day"] footer {
      background:
        radial-gradient(circle at 50% 0%,
          rgba(228, 93, 24, 0.055),
          transparent 40%),
        #2c221a !important;
    }

    body[data-theme="day"] footer h2 {
      color: #fff0dc !important;
    }

    body[data-theme="day"] footer p,
    body[data-theme="day"] footer a {
      color: #baa994 !important;
    }

    /* Splash follows the same daylight rule, while keeping the devotional aura. */
    body[data-theme="day"] #splash {
      background: #fff7ed !important;
    }

    body[data-theme="day"] #splash>.absolute.inset-0 {
      background:
        radial-gradient(circle at center,
          rgba(249, 115, 22, 0.12),
          transparent 33%),
        radial-gradient(circle at 50% 42%,
          rgba(180, 109, 33, 0.08),
          transparent 50%),
        linear-gradient(180deg, #fffaf3, #fff3e5 58%, #f9eadb) !important;
    }

    body[data-theme="day"].aura-ring-outline {
      border-color: rgba(180, 109, 33, 0.2) !important;
    }

    body[data-theme="day"] #splashRam {
      color: #b65f18 !important;
    }

    body[data-theme="day"] #splashSoundHint {
      color: #766a5f !important;
    }

    /* Keep decorative artwork behind content and never affecting layout. */
    body[data-theme="day"].sanjeevani-float {
      opacity: 0.58 !important;
    }

    /* =========================================================
 AUTO DAY/NIGHT VISUAL INTEGRATION FIX
 The first day-theme pass changed individual components but
 left several legacy dark wrappers above them. These rules
 switch the entire visual canvas coherently.
 ========================================================= */

    /* DAY CANVAS */
    body[data-theme="day"] #app {
      background:
        radial-gradient(circle at 50% 4%,
          rgba(235, 165, 83, 0.12),
          transparent 25%),
        linear-gradient(180deg, #fffaf4 0%, #fff7ef 55%, #fff1e4 100%) !important;
      color: #665a4e !important;
    }

    body[data-theme="day"] #background>div:first-child {
      opacity: 0.055 !important;
      filter: saturate(0.7) sepia(0.18) !important;
    }

    body[data-theme="day"] #background>div:nth-child(2) {
      background:
        radial-gradient(circle at 50% 12%,
          rgba(228, 93, 24, 0.1),
          transparent 30%),
        linear-gradient(to bottom, #fffaf3 0%, #fff7ef 52%, #fff0e2 100%) !important;
    }

    body[data-theme="day"] #background.hero-grid {
      opacity: 0.48 !important;
    }

    body[data-theme="day"] #background.mandala {
      opacity: 0.075 !important;
    }

    /* Hero itself must become light too */
    body[data-theme="day"] #home {
      background: transparent !important;
      color: #665a4e !important;
    }

    body[data-theme="day"] #home::after {
      content: "";
      position: absolute;
      inset: auto 0 0;
      height: 28%;
      background: linear-gradient(to bottom,
          transparent,
          rgba(255, 238, 220, 0.28));
      pointer-events: none;
      z-index: -1;
    }

    body[data-theme="day"] #home>.mx-auto {
      z-index: 2;
    }

    body[data-theme="day"] #heroTitle span {
      background-image: linear-gradient(110deg,
          #b85b17 0%,
          #d9862e 45%,
          #e44e2f 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #heroTitle {
      filter: drop-shadow(0 8px 20px rgba(171, 92, 35, 0.1)) !important;
    }

    body[data-theme="day"] #heroSub {
      color: #76695d !important;
    }

    /* Make event/meta pills legible */
    body[data-theme="day"] #home.glass-card {
      color: #70645a !important;
    }

    /* Countdown */
    body[data-theme="day"] #home.max-w-4xl>.glass-card {
      color: #64594f !important;
    }

    body[data-theme="day"] #countdown>div {
      color: #5e5349 !important;
    }

    /* All normal sections sit on the light canvas */
    body[data-theme="day"] main>section {
      background: transparent !important;
    }

    /* Philosophy card */
    body[data-theme="day"] #meaningText {
      color: #61564c !important;
    }

    body[data-theme="day"] #spiritTitle {
      color: #342a21 !important;
    }

    body[data-theme="day"] #spiritText {
      color: #3b3027 !important;
    }

    /* Ramayana + attractions */
    body[data-theme="day"].story-card,
    body[data-theme="day"] #attrGrid>a,
    body[data-theme="day"] #attrGrid>.attraction-card {
      color: #574c42 !important;
    }

    body[data-theme="day"].story-card h3,
    body[data-theme="day"] #attrGrid h3 {
      color: #3a2f25 !important;
    }

    body[data-theme="day"].story-card p,
    body[data-theme="day"] #attrGrid p {
      color: #766b60 !important;
    }

    /* SCHEDULE: remove dark page feel, keep cards */
    body[data-theme="day"] #schedule {
      background: linear-gradient(180deg,
          rgba(255, 248, 239, 0.24),
          rgba(255, 239, 224, 0.12)) !important;
    }

    body[data-theme="day"] #scheduleList.glass-card {
      color: #574c42 !important;
    }

    body[data-theme="day"] #scheduleList.text-orange-200,
    body[data-theme="day"] #scheduleList h3 {
      color: #3f3328 !important;
    }

    body[data-theme="day"] #scheduleList p {
      color: #786c61 !important;
    }

    body[data-theme="day"] #schedule.absolute {
      border-color: #fffaf3 !important;
    }

    /* Volunteer / Janmashtami */
    body[data-theme="day"] #volTitle,
    body[data-theme="day"] #janTitle {
      color: #3a2f25 !important;
    }

    body[data-theme="day"] #volText,
    body[data-theme="day"] #janText {
      color: #75695e !important;
    }

    /* Donation / transparency */
    body[data-theme="day"] #donate {
      background: transparent !important;
    }

    body[data-theme="day"] #donate>div {
      color: #5d5248 !important;
    }

    body[data-theme="day"] #transTitle {
      color: #3a2f25 !important;
    }

    body[data-theme="day"] #transText {
      color: #776b60 !important;
    }

    /* Venue and footer */
    body[data-theme="day"].venue-shell {
      color: #5d5248 !important;
    }

    body[data-theme="day"] footer {
      color: #c1b09a !important;
    }

    /* Floating social button: never a bright white blob in day mode */
    body[data-theme="day"] #floatingSocial {
      color: #c9637e !important;
      background: rgba(255, 249, 242, 0.88) !important;
      border-color: rgba(117, 82, 49, 0.13) !important;
      box-shadow: 0 12px 30px rgba(119, 82, 45, 0.1) !important;
    }

    /* Remove the hard-coded light/dark mix where it causes unreadable text */
    body[data-theme="day"] [class*="bg-black/"],
    body[data-theme="day"] [class*="bg-[#050711]"] {
      background: transparent !important;
    }

    /* Smooth day transition */
    body[data-theme="day"] #app,
    body[data-theme="day"] #background>div {
      transition:
        background.55s ease,
        opacity.45s ease,
        filter.45s ease;
    }

    /* =========================================================
 DAY MODE CONTRAST FIX v2
 ID selectors in the original UI have higher specificity
 than the generic day-mode heading rules. These explicit
 ID rules make the daylight hierarchy actually visible.
 ========================================================= */

    body[data-theme="day"] #meaningTitle {
      color: #3a2d23 !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #spiritTitle {
      color: #3a2d23 !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #storyTitle {
      color: #3a2d23 !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #attrTitle {
      color: #3a2d23 !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #scheduleTitle {
      color: #3a2d23 !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #storyIntro,
    body[data-theme="day"] #scheduleIntro {
      color: #796d61 !important;
    }

    body[data-theme="day"] #meaningText {
      color: #62564c !important;
    }

    body[data-theme="day"] #spiritText {
      color: #3d3128 !important;
    }

    /* Eyebrows should be readable but clearly secondary. */
    body[data-theme="day"] #home.text-orange-200,
    body[data-theme="day"] #home.text-amber-300 {
      color: #b06b24 !important;
    }

    /* Date/time/location chips get more contrast. */
    body[data-theme="day"] #dateChip,
    body[data-theme="day"] #timeChip,
    body[data-theme="day"] #locationChip {
      color: #73675c !important;
    }

    /* Keep the hero title's orange/ember gradient visible in daylight. */
    body[data-theme="day"] #heroTitle span {
      background-image: linear-gradient(110deg,
          #a94f12 0%,
          #d87522 48%,
          #df4930 100%) !important;
      -webkit-background-clip: text !important;
      background-clip: text !important;
      color: transparent !important;
    }

    /* A little more definition around light cards. */
    body[data-theme="day"].glass-card,
    body[data-theme="day"].story-card,
    body[data-theme="day"] #attrGrid>a,
    body[data-theme="day"] #attrGrid>.attraction-card {
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    /* Prevent the daylight grid and ember particles from washing
 out headings. */
    body[data-theme="day"].hero-grid {
      opacity: 0.32 !important;
    }

    /* =========================================================
 RAMAYANA CARD LIGHT-MODE CLEANUP
 Remove the old cinematic dark overlays from the card/image
 treatment so the daylight cards stay genuinely light.
 ========================================================= */

    /* Whole card should remain creamy/ivory, not grey. */
    body[data-theme="day"].story-card {
      background: linear-gradient(145deg,
          #fffdf9 0%,
          #fff8ef 58%,
          #fff3e7 100%) !important;
      border-color: rgba(128, 88, 49, 0.14) !important;
      box-shadow:
        0 14px 34px rgba(126, 88, 49, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
    }

    /* This old pseudo-element created the dark blurred band directly
 behind the card title. Remove it in daylight. */
    body[data-theme="day"].story-card::after {
      display: none !important;
      background: none !important;
    }



    /* Remove the dark image filter in daylight. */
    body[data-theme="day"].story-visual img {
      opacity: 1 !important;
      filter: saturate(0.92) contrast(1.01) !important;
    }

    /* Lazy state should still look like a warm neutral placeholder,
 not a charcoal block. */
    body[data-theme="day"].story-visual {
      background:
        radial-gradient(circle at 50% 45%,
          rgba(235, 173, 104, 0.1),
          transparent 58%),
        linear-gradient(145deg, #fffaf4, #f9efe3) !important;
      box-shadow:
        inset 0 0 0 1px rgba(128, 88, 49, 0.08),
        0 10px 25px rgba(126, 88, 49, 0.07) !important;
    }

    /* The fallback text, if a GIF is missing, should also be readable. */
    body[data-theme="day"].story-visual-fallback {
      color: rgba(104, 83, 64, 0.62) !important;
      background: radial-gradient(circle,
          rgba(228, 151, 77, 0.08),
          transparent 62%) !important;
    }

    /* Keep the actual title completely separate from any backdrop. */
    body[data-theme="day"].story-card h3 {
      color: #403126 !important;
      text-shadow: none !important;
      background: transparent !important;
    }

    /* Same cleanup for attraction GIF cards, keeping their own visual identity. */
    body[data-theme="day"].attraction-visual {
      background:
        radial-gradient(circle at 50% 45%,
          rgba(235, 173, 104, 0.08),
          transparent 60%),
        linear-gradient(145deg, #fffaf4, #f9efe3) !important;
    }

    body[data-theme="day"].attraction-visual.lazy-media {
      filter: saturate(0.92) contrast(1.01) !important;
    }

    /* Very subtle warm separator, rather than a grey shadow band. */
    body[data-theme="day"].story-card {
      position: relative;
    }

    body[data-theme="day"].story-card::before {
      content: "";
      position: absolute;
      inset: auto 12% 0;
      height: 1px;
      background: linear-gradient(90deg,
          transparent,
          rgba(180, 109, 33, 0.18),
          transparent);
      pointer-events: none;
    }

    /* Schedule Ravan card: no fire watermark behind text/content. */
    #scheduleList.ravan-watermark,
    #scheduleList [aria-hidden="true"].fire-watermark {
      display: none !important;
    }

    #scheduleList.glass-card {
      background-image: none;
    }

    /* Header brand visibility in daylight */
    body:not([data-theme="day"]) #brandSub {
      color: rgba(214, 202, 186, 0.42) !important;
      opacity: 1 !important;
    }

    body[data-theme="day"] #brandSub {
      color: #7a6856 !important;
      opacity: 1 !important;
      font-size: 10px !important;
      font-weight: 700 !important;
      letter-spacing: 0.3em !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.72);
    }

    body[data-theme="day"] #brandHi {
      color: #9b5b1b !important;
      font-weight: 700 !important;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65);
    }

    @media (max-width: 640px) {
      body[data-theme="day"] #brandSub {
        font-size: 9px !important;
        letter-spacing: 0.24em !important;
      }
    }

    /* =========================================================
 RESPONSIVE SPACING REFINEMENT
 Preserve fluid spacing, reduce accidental large whitespace.
 ========================================================= */

    /* Main sections remain fluid, but use a tighter rhythm. */
    :root {
      --section-space: clamp(2.25rem, 5vw, 5rem);
    }

    main>section:not(#home) {
      padding-top: clamp(2.15rem, 4.4vw, 4.5rem) !important;
      padding-bottom: clamp(2.15rem, 4.4vw, 4.5rem) !important;
    }

    /* Hero ends closer to the next section. */
    #home {
      padding-bottom: clamp(2.2rem, 4.2vw, 4.25rem) !important;
    }

    /* Avoid the visual "empty runway" beneath hero controls. */
    #home.relative.z-20 {
      margin-bottom: 0 !important;
    }

    /* Tighten section heading-to-content relationships. */
    main>section:not(#home).text-center {
      margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
    }

    /* Philosophy and story cards should not inherit oversized top gaps. */
    #meaningText,
    #spiritText,
    #storyGrid,
    #attrGrid,
    #scheduleList {
      margin-top: clamp(1rem, 2.4vw, 1.75rem) !important;
    }

    @media (max-width: 900px) {
      #home {
        min-height: auto !important;
      }

      main>section:not(#home) {
        padding-top: clamp(1.9rem, 5.5vw, 3.5rem) !important;
        padding-bottom: clamp(1.9rem, 5.5vw, 3.5rem) !important;
      }
    }

    @media (max-width: 640px) {
      main>section:not(#home) {
        padding-top: clamp(1.7rem, 6vw, 2.8rem) !important;
        padding-bottom: clamp(1.7rem, 6vw, 2.8rem) !important;
      }

      #home {
        padding-bottom: 2rem !important;
      }
    }

    /* =========================================================
 FIRE EMBERS
 Slightly larger, more visible particles without turning
 the background into a snowstorm of sparks.
 ========================================================= */

    #embers.ember,
    .ember {
      transform-origin: center;
    }

    #embers.ember {
      width: clamp(2px, 0.3vw, 4px) !important;
      height: clamp(2px, 0.3vw, 4px) !important;
      box-shadow:
        0 0 7px rgba(249, 115, 22, 0.62),
        0 0 14px rgba(249, 115, 22, 0.18) !important;
    }

    @media (max-width: 640px) {
      #embers.ember {
        width: 3px !important;
        height: 3px !important;
        box-shadow:
          0 0 6px rgba(249, 115, 22, 0.55),
          0 0 11px rgba(249, 115, 22, 0.16) !important;
      }
    }

    /* =========================================================
 MANUAL THEME TOGGLE
 Auto is the default. A manual choice overrides solar mode
 until the visitor selects "Auto".
 ========================================================= */

    .theme-toggle {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      min-height: 2.65rem;
      padding: 0.45rem.78rem;
      border: 1px solid rgba(255, 255, 255, 0.12);
      border-radius: 999px;
      color: #d8c9b8;
      background: rgba(255, 255, 255, 0.035);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      font-size: 0.78rem;
      font-weight: 700;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
      transition:
        background.3s ease,
        border-color.3s ease,
        color.3s ease,
        transform.2s ease;
    }

    .theme-toggle:hover {
      transform: translateY(-1px);
      border-color: rgba(240, 179, 93, 0.3);
    }

    .theme-toggle:focus-visible {
      outline: 2px solid rgba(240, 179, 93, 0.88);
      outline-offset: 3px;
    }

    .theme-toggle-icon {
      display: inline-flex;
      width: 1.2rem;
      height: 1.2rem;
      align-items: center;
      justify-content: center;
    }

    .theme-toggle-mobile {
      width: 2.45rem;
      padding: 0;
      min-height: 2.45rem;
      border-radius: 50%;
    }

    body[data-theme="day"] .theme-toggle {
      color: #6b5848 !important;
      background: rgba(255, 255, 255, 0.62) !important;
      border-color: rgba(117, 82, 49, 0.17) !important;
      box-shadow:
        0 7px 18px rgba(119, 82, 45, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);
    }

    body[data-theme="day"] .theme-toggle:hover {
      border-color: rgba(180, 109, 33, 0.34) !important;
    }

    body[data-theme="night"] .theme-toggle {
      color: #e2d5c3 !important;
      background: rgba(255, 255, 255, 0.035) !important;
      border-color: rgba(255, 255, 255, 0.11) !important;
    }

    @media (max-width: 900px) {
      .theme-toggle-label {
        display: none;
      }
    }

    @media (max-width: 640px) {
      .theme-toggle {
        min-height: 2.4rem;
        width: 2.4rem;
        padding: 0;
        border-radius: 50%;
      }
    }

    /* Theme toggle mode badge */
    .theme-toggle .theme-toggle-icon {
      font-size: 0.92rem;
      font-weight: 800;
      letter-spacing: 0;
      line-height: 1;
    }

    @media (max-width: 900px) {
      .theme-toggle .theme-toggle-icon {
        font-size: 0.85rem;
      }
    }

    /* Concise donation/transparency panel copy */
    #transText {
      max-width: 42rem !important;
      line-height: 1.65 !important;
    }

    /* Donation panel: concise responsive copy */
    #transTitle {
      max-width: 34rem !important;
      line-height: 1.12 !important;
      text-wrap: balance;
    }

    #transText {
      max-width: 42rem !important;
      line-height: 1.7 !important;
    }

    @media (max-width: 700px) {
      #transTitle {
        font-size: clamp(1.65rem, 6.8vw, 2.55rem) !important;
        max-width: 100% !important;
      }

      #transText {
        font-size: 0.94rem !important;
        max-width: 100% !important;
      }
    }

    /* =========================================================
   DAYLIGHT PHILOSOPHY CTA
   Make the outlined button clearly visible on the light theme.
   ========================================================= */
    body[data-theme="day"] #philosophyLink {
      color: #9a5718 !important;
      background: linear-gradient(180deg,
          rgba(228, 93, 24, 0.1),
          rgba(228, 93, 24, 0.045)) !important;
      border: 1px solid rgba(194, 112, 39, 0.42) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.78),
        0 8px 22px rgba(153, 91, 35, 0.08) !important;
      text-shadow: none !important;
    }

    body[data-theme="day"] #philosophyLink:hover {
      color: #7f4311 !important;
      background: linear-gradient(180deg,
          rgba(228, 93, 24, 0.15),
          rgba(228, 93, 24, 0.07)) !important;
      border-color: rgba(194, 112, 39, 0.58) !important;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.86),
        0 12px 28px rgba(153, 91, 35, 0.12) !important;
      transform: translateY(-2px);
    }

    body[data-theme="day"] #philosophyLink svg {
      color: #b9651d !important;
    }

    @media (max-width: 640px) {
      body[data-theme="day"] #philosophyLink {
        min-height: 2.9rem;
        padding-inline: 1.05rem !important;
      }
    }

    /* Developer contact in footer */
    .developer-contact {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      margin-top: 0.15rem;
      margin-bottom: 1.15rem;
      padding: 0.5rem 0.9rem;
      border-radius: 999px;
      border: 1px solid rgba(240, 179, 93, 0.2);
      background: rgba(240, 179, 93, 0.035);
      color: #d7b477 !important;
      font-size: 0.84rem;
      font-weight: 700;
      letter-spacing: 0.01em;
      text-decoration: none !important;
      transition:
        color 0.25s ease,
        background 0.25s ease,
        border-color 0.25s ease,
        transform 0.2s ease,
        box-shadow 0.25s ease;
    }

    .developer-contact:hover {
      color: #f3cb83 !important;
      background: rgba(240, 179, 93, 0.08);
      border-color: rgba(240, 179, 93, 0.38);
      transform: translateY(-1px);
      box-shadow: 0 8px 22px rgba(240, 179, 93, 0.08);
    }

    .developer-contact span:last-child {
      opacity: 0.72;
    }

    body[data-theme="day"] .developer-contact {
      color: #9a5a1a !important;
      background: rgba(228, 93, 24, 0.045);
      border-color: rgba(180, 109, 33, 0.22);
    }

    body[data-theme="day"] .developer-contact:hover {
      color: #7e4311 !important;
      background: rgba(228, 93, 24, 0.085);
      border-color: rgba(180, 109, 33, 0.4);
      box-shadow: 0 8px 22px rgba(153, 91, 35, 0.09);
    }

    @media (max-width: 640px) {
      .developer-contact {
        margin-top: 0;
        margin-bottom: 1rem;
        font-size: 0.8rem;
        padding: 0.45rem 0.8rem;
      }
    }

    /* =========================================================
   FOOTER RHYTHM FIX
   One consistent structure for both day and night themes.
   ========================================================= */

    footer {
      padding-top: clamp(2.8rem, 6vw, 4.25rem) !important;
      padding-bottom: clamp(2.4rem, 5vw, 3.8rem) !important;
    }

    footer>div {
      display: flex !important;
      flex-direction: column !important;
      align-items: center !important;
      width: min(100%, 72rem) !important;
      margin-inline: auto !important;
    }

    footer>div>div:first-child {
      width: clamp(2.75rem, 5vw, 3.5rem) !important;
      height: clamp(2.75rem, 5vw, 3.5rem) !important;
      margin-bottom: clamp(0.8rem, 1.6vw, 1.1rem) !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      border-radius: 50% !important;
      flex: none !important;
    }

    footer h2 {
      margin: 0 !important;
      padding: 0 !important;
      line-height: 1.2 !important;
      font-size: clamp(1.45rem, 3vw, 2rem) !important;
      text-align: center !important;
    }

    footer>div>p {
      margin-top: 0.55rem !important;
      margin-bottom: clamp(1.4rem, 3vw, 2rem) !important;
      line-height: 1.4 !important;
      text-align: center !important;
    }

    footer .footer-nav {
      display: flex !important;
      flex-wrap: wrap !important;
      justify-content: center !important;
      align-items: center !important;
      gap: clamp(0.9rem, 2.5vw, 1.5rem) !important;
      margin: 0 0 clamp(1.4rem, 3vw, 2rem) !important;
    }

    footer .footer-social {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
      gap: 0.7rem !important;
      margin: 0 0 clamp(1.5rem, 3.2vw, 2.2rem) !important;
    }

    footer .footer-credit {
      width: min(100%, 60rem) !important;
      margin-top: 0 !important;
      padding-top: clamp(1.1rem, 2.5vw, 1.5rem) !important;
      border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
      text-align: center !important;
    }

    footer .developer-contact {
      margin-top: 0.7rem !important;
      margin-bottom: 0 !important;
    }

    body[data-theme="day"] footer .footer-credit {
      border-top-color: rgba(255, 255, 255, 0.3) !important;
    }

    @media (max-width: 640px) {
      footer>div>p {
        margin-bottom: 1.25rem !important;
      }

      footer .footer-nav {
        gap: 0.8rem 1.1rem !important;
      }

      footer .footer-social {
        margin-bottom: 1.35rem !important;
      }
    }

    /* =========================================================
   LARGER FIRE EMBERS • DAY + NIGHT
   More visible drifting embers, still restrained enough to
   preserve the cinematic background.
   ========================================================= */
    #embers .ember {
      min-width: 3px !important;
      min-height: 3px !important;
      border-radius: 999px;
      box-shadow:
        0 0 9px rgba(249, 115, 22, 0.72),
        0 0 18px rgba(249, 115, 22, 0.24) !important;
    }

    body[data-theme="day"] #embers .ember {
      box-shadow:
        0 0 8px rgba(228, 93, 24, 0.58),
        0 0 16px rgba(228, 93, 24, 0.16) !important;
    }

    @media (max-width: 640px) {
      #embers .ember {
        min-width: 3px !important;
        min-height: 3px !important;
        box-shadow:
          0 0 8px rgba(249, 115, 22, 0.68),
          0 0 15px rgba(249, 115, 22, 0.2) !important;
      }
    }

    /* =========================================================
   ENTRY SCREEN: ALWAYS DARK
   The "जय श्री राम" entrance is intentionally independent
   of the main page day/night setting.
   ========================================================= */

    #splash {
      background: #050300 !important;
      color: #f5ead9 !important;
    }

    #splash>.absolute.inset-0 {
      background:
        radial-gradient(circle at center,
          rgba(249, 115, 22, 0.11),
          transparent 32%),
        radial-gradient(circle at 50% 42%,
          rgba(127, 29, 29, 0.1),
          transparent 48%),
        linear-gradient(180deg, #050403, #0a0502 58%, #040302) !important;
    }

    #splash .aura-ring-outline {
      border-color: rgba(249, 115, 22, 0.18) !important;
    }

    #splash .aura-core {
      background: radial-gradient(circle,
          rgba(249, 115, 22, 0.18),
          rgba(249, 115, 22, 0.035) 48%,
          transparent 72%) !important;
    }

    #splash .aura-outer text {
      fill: rgba(249, 115, 22, 0.86) !important;
    }

    #splash .aura-inner text {
      fill: rgba(245, 158, 11, 0.8) !important;
    }

    #splash #splashRam {
      color: rgba(249, 115, 22, 0.92) !important;
      text-shadow: 0 0 26px rgba(249, 115, 22, 0.22) !important;
    }

    #splash #splashSoundHint {
      color: rgba(255, 255, 255, 0.38) !important;
    }

    #splash .splash-enter-btn {
      color: #fff7eb !important;
      background: linear-gradient(135deg, #f97316, #ef4444) !important;
      border-color: rgba(251, 146, 60, 0.38) !important;
      box-shadow:
        0 0 35px rgba(249, 115, 22, 0.28),
        0 10px 45px rgba(0, 0, 0, 0.35) !important;
    }

    /* Prevent daylight theme overrides elsewhere from touching the entrance. */
    body[data-theme="day"] #splash,
    body[data-theme="day"] #splash>.absolute.inset-0,
    body[data-theme="day"] #splash .aura-ring-outline,
    body[data-theme="day"] #splash #splashRam,
    body[data-theme="day"] #splash #splashSoundHint {
      /* Explicitly restated by the #splash rules above. */
    }

    @media (prefers-reduced-motion: reduce) {

      #splash .orbit,
      #splash .orbit-reverse {
        animation: none !important;
      }
    }

    /* =========================================================
   ENTRY / SPLASH: ALWAYS CINEMATIC DARK
   This screen is independent from the main site's Auto/Light/Dark mode.
   ========================================================= */

    html body #splash {
      background: #050403 !important;
      color: #f4eadb !important;
    }

    html body #splash * {
      color-scheme: dark;
    }

    html body #splash::before,
    html body #splash::after {
      background: none !important;
    }

    html body #splash>div:first-child {
      background:
        radial-gradient(circle at 50% 42%,
          rgba(249, 115, 22, 0.13),
          transparent 30%),
        radial-gradient(circle at 50% 48%,
          rgba(127, 29, 29, 0.1),
          transparent 52%),
        linear-gradient(180deg, #050403 0%, #090502 58%, #030201 100%) !important;
    }

    html body[data-theme="day"] #splash,
    html body[data-theme="day"] #splash>div:first-child {
      background:
        radial-gradient(circle at 50% 42%,
          rgba(249, 115, 22, 0.13),
          transparent 30%),
        radial-gradient(circle at 50% 48%,
          rgba(127, 29, 29, 0.1),
          transparent 52%),
        linear-gradient(180deg, #050403 0%, #090502 58%, #030201 100%) !important;
    }

    html body #splash #splashRam {
      color: #f97316 !important;
      text-shadow: 0 0 28px rgba(249, 115, 22, 0.24) !important;
    }

    html body #splash #splashSoundHint {
      color: rgba(255, 255, 255, 0.42) !important;
    }

    html body #splash .splash-enter-btn {
      color: #fff7eb !important;
      background: linear-gradient(135deg,
          #f97316 0%,
          #ef4444 100%) !important;
      border-color: rgba(251, 146, 60, 0.36) !important;
      box-shadow:
        0 0 34px rgba(249, 115, 22, 0.27),
        0 12px 42px rgba(0, 0, 0, 0.4) !important;
    }

    html body #splash .aura-ring-outline {
      border-color: rgba(249, 115, 22, 0.18) !important;
    }

    html body #splash .aura-core {
      background: radial-gradient(circle,
          rgba(249, 115, 22, 0.18),
          rgba(249, 115, 22, 0.035) 48%,
          transparent 72%) !important;
    }

    html body #splash .aura-outer text {
      fill: rgba(249, 115, 22, 0.86) !important;
    }

    /* ENTRY THEME LOCK: inline-important at runtime is the final authority. */

    /* Classes Section - Day & Night Theme Support */
    #classes .glass-card {
      transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    }

    #classes .glass-card:hover {
      transform: translateY(-3px);
    }

    body[data-theme="day"] #classes .glass-card {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.94)) !important;
      border-color: rgba(6, 182, 212, 0.35) !important;
      box-shadow: 0 20px 50px rgba(59, 130, 246, 0.1) !important;
    }

    body[data-theme="day"] #classes h2,
    body[data-theme="day"] #classes h3,
    body[data-theme="day"] #classes h4 {
      color: #0f172a !important;
    }

    body[data-theme="day"] #classes p,
    body[data-theme="day"] #classes li,
    body[data-theme="day"] #classes .text-slate-200,
    body[data-theme="day"] #classes .text-slate-300 {
      color: #334155 !important;
    }

    body[data-theme="day"] #classes .text-white {
      color: #0f172a !important;
    }

    body[data-theme="day"] #classes .text-cyan-100,
    body[data-theme="day"] #classes .text-cyan-100\/95,
    body[data-theme="day"] #classes .text-cyan-100\/90,
    body[data-theme="day"] #classes .text-cyan-100\/80 {
      color: #0e7490 !important;
    }

    body[data-theme="day"] #classes .text-cyan-200,
    body[data-theme="day"] #classes .text-cyan-200\/90,
    body[data-theme="day"] #classes .text-cyan-200\/80 {
      color: #0891b2 !important;
    }

    body[data-theme="day"] #classes .text-indigo-200,
    body[data-theme="day"] #classes .text-indigo-200\/80 {
      color: #4338ca !important;
    }

    body[data-theme="day"] #classes .bg-black\/50,
    body[data-theme="day"] #classes .bg-black\/40,
    body[data-theme="day"] #classes .bg-black\/30 {
      background-color: rgba(241, 245, 249, 0.9) !important;
      border-color: rgba(203, 213, 225, 0.9) !important;
    }

    body[data-theme="day"] #classes .border-white\/10 {
      border-color: rgba(203, 213, 225, 0.8) !important;
    }

    body[data-theme="day"] .hero-classes-card {
      background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(240, 249, 255, 0.94)) !important;
      border-color: rgba(6, 182, 212, 0.45) !important;
      box-shadow: 0 16px 40px rgba(6, 182, 212, 0.12) !important;
    }

    body[data-theme="day"] .hero-classes-card h2 {
      color: #0f172a !important;
    }

    body[data-theme="day"] .hero-classes-card p {
      color: #334155 !important;
    }

    body[data-theme="day"] .hero-classes-card .text-white\/80 {
      color: #475569 !important;
    }

    body[data-theme="day"] .hero-classes-card .bg-white\/10 {
      background-color: rgba(226, 232, 240, 0.85) !important;
      color: #1e293b !important;
    }