/* ==========================================================================
   IndiaDham — "Ek Yatra" design system  (loaded by EVERY page)
   A continuous sunrise-to-dusk journey across India's sacred architecture.

   Sections 1-4, 9-10, 12-13, 15-21 are shared site-wide.
   Sections 5-8, 11, 14 (hero scene, chakra, trail, thali) only ever match
   on the homepage, and cost nothing on the pages that don't use them.

   Vocabulary used across this file:
     toran     — mango-leaf & marigold garland strung across a doorway
     shikhara  — curvilinear tower over a North Indian (Nagara) sanctum
     gopuram   — tiered gateway tower of a South Indian (Dravidian) temple
     kalash    — finial pot crowning a temple spire
     jharokha  — projecting arched balcony window (Rajasthani)
     jali      — pierced lattice screen
     chakra    — wheel; here, the rotating mandala of states
     diya      — oil lamp
   Every motif below is drawn in CSS/SVG — no image sprites, no icon fonts.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
.yatra {
  --saffron: #ef8f2c;
  --saffron-lt: #f8b968;
  --saffron-dp: #d9622a;
  --vermilion: #c9331f;
  --maroon: #6f211c;
  --maroon-mid: #8c2b25;
  --maroon-dp: #3c120f;
  --gold: #c79a3d;
  --gold-lt: #ecd08a;
  --brass: #a87c33;
  --cream: #fbf5ea;
  --cream-2: #f3e7d0;
  --ink: #241712;
  --ink-2: #4a382f;
  --ink-3: #7e6d60;
  --indigo: #2a2f63;
  --night: #0b1030;
  --leaf: #3e6b3a;
  --leaf-lt: #5d9250;

  --parchment: rgba(251, 245, 234, 0.9);
  --parchment-solid: #fbf5ea;
  --rule: rgba(111, 33, 28, 0.16);

  --ease-temple: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-bell: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- 2. Page shell & the fixed sky the whole page floats on ---------- */
.yatra {
  position: relative;
  background: transparent;
  overflow-x: clip;
}

/* The sky sits behind everything and is repainted by JS as you scroll.
   Sections above it are translucent parchment, so the sun reads as warmth
   glowing through paper rather than a hard band of colour. */
.sky-journey {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}

.sky-wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    var(--sky-1, #fce3b4) 0%,
    var(--sky-2, #fbf0d8) 46%,
    var(--sky-3, #fbf5ea) 100%
  );
  transition: background 1.2s linear;
}

/* Starfield — dialled up only after the sun has set */
.sky-stars {
  position: absolute;
  inset: 0;
  opacity: var(--stars, 0);
  transition: opacity 1s linear;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 18%, #fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 28% 42%, #ffeec9 50%, transparent 55%),
    radial-gradient(1.8px 1.8px at 44% 12%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 61% 34%, #fff 50%, transparent 55%),
    radial-gradient(1.7px 1.7px at 74% 9%, #ffeec9 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 88% 27%, #fff 50%, transparent 55%),
    radial-gradient(1.5px 1.5px at 19% 63%, #fff 50%, transparent 55%),
    radial-gradient(1.2px 1.2px at 53% 71%, #ffeec9 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 81% 58%, #fff 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 36% 86%, #fff 50%, transparent 55%);
  animation: twinkle 5.5s ease-in-out infinite alternate;
}

@keyframes twinkle {
  from { opacity: calc(var(--stars, 0) * 0.55); }
  to   { opacity: var(--stars, 0); }
}

/* Surya — rises in the hero, arcs over the page, sets into the footer */
.sun-orb {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--sun-size, 150px);
  height: var(--sun-size, 150px);
  margin: calc(var(--sun-size, 150px) / -2) 0 0 calc(var(--sun-size, 150px) / -2);
  transform: translate3d(var(--sun-x, 50vw), var(--sun-y, 70vh), 0);
  will-change: transform;
  opacity: 0.88;
}

.sun-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 45%,
    var(--sun-core, #fff6da) 0%,
    var(--sun-core, #fff6da) 32%,
    var(--sun-edge, #f6a94f) 62%,
    rgba(239, 143, 44, 0) 72%
  );
  box-shadow:
    0 0 44px 10px var(--sun-halo, rgba(246, 169, 79, 0.38)),
    0 0 130px 44px var(--sun-halo, rgba(246, 169, 79, 0.16));
  transition: background 1.2s linear, box-shadow 1.2s linear;
}

/* Twelve rays — the aditya count; slow enough to read as shimmer, not spin */
.sun-rays {
  position: absolute;
  inset: -32%;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    var(--sun-ray, rgba(246, 169, 79, 0.5)) 0deg 2.2deg,
    transparent 2.2deg 30deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 30%, #000 42%, transparent 78%);
  mask-image: radial-gradient(circle, transparent 30%, #000 42%, transparent 78%);
  animation: sunSpin 140s linear infinite;
  opacity: calc(var(--ray-opacity, 1) * 0.55);
  transition: opacity 1.2s linear;
}

.sun-rays.alt {
  inset: -18%;
  background: repeating-conic-gradient(
    from 15deg,
    var(--sun-ray, rgba(246, 169, 79, 0.42)) 0deg 1.1deg,
    transparent 1.1deg 15deg
  );
  animation: sunSpinRev 95s linear infinite;
}

@keyframes sunSpin    { to { transform: rotate(360deg); } }
@keyframes sunSpinRev { to { transform: rotate(-360deg); } }

/* Content rides above the sky.
   Direct children need a stacking position or they would paint *behind* the
   fixed sky layer. Elements that position themselves keep doing so — without
   the three rules below, this would quietly flatten the sticky header, the
   sticky filter bars and the fixed CTAs into `relative`. */
.yatra > *:not(.sky-journey) {
  position: relative;
  z-index: 1;
}

.yatra > .sticky { position: sticky; }
.yatra > .fixed { position: fixed; }
.yatra > .sticky-cta { position: fixed; }

/* ---------- 3. Shared surfaces ---------- */
.veil {
  background: var(--parchment);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.veil-deep {
  background: linear-gradient(180deg, rgba(60, 18, 15, 0.96), rgba(111, 33, 28, 0.94));
  color: var(--cream);
}

.section-pad { padding: clamp(3.5rem, 8vw, 7rem) 0; }
.shell { width: min(100% - 2.5rem, 1200px); margin-inline: auto; }
@media (max-width: 480px) { .shell { width: min(100% - 2rem, 1200px); } }

/* Eyebrow + title lockup, framed by hand-drawn rules instead of a card */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--saffron-dp);
}

.kicker::before,
.kicker::after {
  content: "";
  width: 2rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold));
}

.kicker::after { background: linear-gradient(270deg, transparent, var(--gold)); }

.deva {
  font-family: 'Tiro Devanagari Hindi', 'Noto Serif Devanagari', Georgia, serif;
  font-weight: 400;
}

.title-lg {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.75rem, 4.2vw, 2.85rem);
  line-height: 1.12;
  color: var(--maroon);
  letter-spacing: -0.01em;
}

.veil-deep .title-lg { color: #fff; }

.lede {
  color: var(--ink-3);
  font-size: clamp(0.95rem, 1.5vw, 1.06rem);
  line-height: 1.7;
}

.veil-deep .lede { color: rgba(251, 245, 234, 0.75); }

/* Lotus-diamond divider used between sections */
.motif-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  color: var(--gold);
}

.motif-rule::before,
.motif-rule::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 10rem;
  background: linear-gradient(90deg, transparent, currentColor);
}

.motif-rule::after { background: linear-gradient(270deg, transparent, currentColor); }

/* ---------- 4. Toran — the swaying garland ---------- */
.toran {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 96px;
  overflow: hidden;
  pointer-events: none;
  z-index: 6;
}

.toran-rail {
  display: flex;
  width: 200%;
  animation: toranDrift 54s linear infinite;
}

/* The cord the garland hangs from, with a gentle catenary droop */
.toran::before {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  top: 8px;
  height: 22px;
  border-bottom: 2.5px solid rgba(201, 51, 31, 0.85);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  z-index: 2;
}

.toran-run {
  display: flex;
  width: 50%;
  flex: 0 0 50%;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 14px;
}

.toran-unit {
  position: relative;
  width: 3.2%;
  min-width: 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform-origin: 50% 0;
  animation: toranSway 4.2s ease-in-out infinite alternate;
}

.toran-unit:nth-child(4n + 2) { animation-delay: -1.1s; }
.toran-unit:nth-child(4n + 3) { animation-delay: -2.2s; }
.toran-unit:nth-child(4n + 4) { animation-delay: -3.3s; }

/* Marigold — layered petals via conic + radial gradients */
.toran-bloom {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, #d9622a 0 22%, transparent 23%),
    repeating-conic-gradient(from 0deg, #f8b968 0deg 14deg, #ef8f2c 14deg 28deg);
  box-shadow: 0 1px 3px rgba(111, 33, 28, 0.35);
}

.toran-unit:nth-child(odd) .toran-bloom {
  background:
    radial-gradient(circle at 50% 50%, #8c2b25 0 22%, transparent 23%),
    repeating-conic-gradient(from 8deg, #f2c14e 0deg 14deg, #d9622a 14deg 28deg);
}

/* Mango leaf — asymmetric border-radius gives the classic pointed blade */
.toran-leaf {
  width: 15px;
  height: 34px;
  margin-top: -3px;
  border-radius: 60% 60% 45% 45% / 30% 30% 80% 80%;
  background: linear-gradient(160deg, var(--leaf-lt), var(--leaf) 65%, #2d4f2b);
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, 0.18);
  position: relative;
}

.toran-leaf::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 12%;
  width: 1px;
  height: 76%;
  background: rgba(255, 255, 255, 0.35);
}

.toran-unit:nth-child(3n) .toran-leaf { height: 40px; }
.toran-unit:nth-child(3n + 1) .toran-leaf { height: 29px; }

/* Bell drop at every fourth unit */
.toran-unit:nth-child(4n + 1)::after {
  content: "";
  width: 9px;
  height: 11px;
  margin-top: 2px;
  border-radius: 40% 40% 50% 50% / 60% 60% 40% 40%;
  background: linear-gradient(180deg, var(--gold-lt), var(--brass));
}

@keyframes toranDrift {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}

@keyframes toranSway {
  from { transform: rotate(-3.2deg); }
  to   { transform: rotate(3.2deg); }
}

/* ---------- 5. Hero — the sunrise scene ---------- */
.hero {
  position: relative;
  min-height: clamp(620px, 94svh, 940px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding-top: 5.5rem;
  padding-bottom: clamp(9rem, 22vw, 15rem);
}

.hero.has-custom-hero-bg {
  background-color: #240a08;
}
.hero.has-custom-hero-bg .hero-bell {
  color: rgba(255, 255, 255, 0.45);
  z-index: 12;
}
.hero.has-custom-hero-bg .bird {
  color: rgba(255, 255, 255, 0.6);
  z-index: 12;
}

/* Layered silhouettes: peaks behind, temple skyline in front, ghat at the foot.
   Each layer parallaxes at its own rate via --p set on .hero by JS. */
.hero-layer {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(1440px, 118%);
  transform: translate3d(-50%, calc(var(--p, 0) * var(--rate, 0) * 1px), 0);
  pointer-events: none;
}

.hero-layer svg { display: block; width: 100%; height: auto; }

.layer-peaks    { --rate: 14; opacity: 0.55; z-index: 1; }
.layer-skyline  { --rate: 30; z-index: 2; }
.layer-ghat     { --rate: 52; z-index: 3; }

/* Mist rolling between the peaks and the skyline */
.hero-mist {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 16%;
  height: 34%;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(60% 100% at 30% 100%, rgba(255, 255, 255, 0.72), transparent 70%),
              radial-gradient(50% 100% at 72% 100%, rgba(255, 255, 255, 0.6), transparent 70%);
  filter: blur(6px);
  animation: mistDrift 26s ease-in-out infinite alternate;
}

@keyframes mistDrift {
  from { transform: translate3d(-3%, 0, 0) scaleY(1); opacity: 0.75; }
  to   { transform: translate3d(3%, -6%, 0) scaleY(1.12); opacity: 0.95; }
}

/* River shimmer under the ghat */
.hero-river {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 22%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(120, 155, 175, 0) 0%, rgba(104, 142, 166, 0.35) 55%, rgba(72, 108, 132, 0.5) 100%);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
  mask-image: linear-gradient(180deg, transparent, #000 40%);
}

.hero-river::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.5) 0 1px,
    transparent 1px 9px
  );
  opacity: 0.5;
  animation: ripple 9s linear infinite;
}

@keyframes ripple {
  from { transform: translateY(0) scaleX(1); }
  50%  { transform: translateY(-4px) scaleX(1.02); }
  to   { transform: translateY(0) scaleX(1); }
}

/* Diyas floating downriver */
.diya-float {
  position: absolute;
  bottom: 4%;
  z-index: 4;
  width: 26px;
  pointer-events: none;
  animation: diyaDrift var(--dur, 30s) linear infinite;
  animation-delay: var(--delay, 0s);
  opacity: 0;
}

@keyframes diyaDrift {
  0%   { transform: translate3d(-8vw, 0, 0) rotate(-4deg); opacity: 0; }
  8%   { opacity: 1; }
  50%  { transform: translate3d(50vw, -10px, 0) rotate(3deg); }
  92%  { opacity: 1; }
  100% { transform: translate3d(112vw, 0, 0) rotate(-3deg); opacity: 0; }
}

/* The diya flame, reused wherever a lamp appears */
.flame {
  transform-origin: 50% 100%;
  animation: flicker 1.6s ease-in-out infinite alternate;
}

@keyframes flicker {
  from { transform: scale(1) rotate(-3deg); opacity: 0.88; }
  to   { transform: scale(1.14) rotate(3deg); opacity: 1; }
}

/* Birds crossing the sky */
.bird {
  position: absolute;
  z-index: 2;
  color: rgba(60, 18, 15, 0.45);
  animation: birdCross var(--dur, 34s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.bird svg { animation: flap 0.9s ease-in-out infinite alternate; display: block; }

@keyframes birdCross {
  from { transform: translate3d(-12vw, 0, 0); }
  to   { transform: translate3d(114vw, -6vh, 0); }
}

@keyframes flap {
  from { transform: scaleY(0.55); }
  to   { transform: scaleY(1.15); }
}

/* Hanging temple bells at the hero shoulders */
.hero-bell {
  position: absolute;
  top: 0;
  z-index: 5;
  transform-origin: 50% 6%;
  animation: bellSway 5.4s ease-in-out infinite alternate;
  color: var(--brass);
  pointer-events: none;
}

.hero-bell.left  { left: clamp(0.5rem, 5vw, 5rem); }
.hero-bell.right { right: clamp(0.5rem, 5vw, 5rem); animation-delay: -2.7s; }

@keyframes bellSway {
  from { transform: rotate(-6deg); }
  to   { transform: rotate(6deg); }
}

/* Hero copy sits inside a cusped arch rather than on a slab */
.hero-copy {
  position: relative;
  z-index: 5;
  text-align: center;
  width: min(100% - 2.5rem, 900px);
  margin-inline: auto;
}

.hero-om {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--saffron-dp);
  line-height: 1;
  opacity: 0.9;
  animation: omPulse 4.5s ease-in-out infinite;
}

@keyframes omPulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.06); }
}

.hero-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(2.3rem, 6.6vw, 4.6rem);
  line-height: 1.04;
  color: var(--maroon-dp);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero-title .glow {
  background: linear-gradient(100deg, var(--vermilion), var(--saffron-dp) 45%, var(--brass));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Word-by-word rise on load */
.rise-word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(1.5deg);
  animation: riseWord 0.9s var(--ease-temple) forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 200ms);
}

@keyframes riseWord {
  to { opacity: 1; transform: none; }
}

.hero-scroll-cue {
  position: relative;
  z-index: 6;
  margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
  width: max-content;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: var(--maroon);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  animation: cueBob 2.6s ease-in-out infinite;
}

@keyframes cueBob {
  0%, 100% { transform: translateY(0); opacity: 0.72; }
  50%      { transform: translateY(8px); opacity: 1; }
}

/* ---------- 6. Sankalp — the search gateway (a torana, not a card) ---------- */
.gateway {
  position: relative;
  z-index: 8;
  width: min(100% - 2rem, 940px);
  margin: clamp(-11rem, -18vw, -7rem) auto 0;
}

.gateway-frame {
  position: relative;
  /* top padding clears the arch, which is ~92px tall at full width */
  padding: clamp(3.6rem, 8vw, 6rem) clamp(1.1rem, 4vw, 3.2rem) clamp(1.5rem, 3vw, 2.2rem);
}

/* Cusped arch drawn as SVG, sitting on two pillars */
.gateway-arch {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
  color: var(--maroon);
}

.gateway-arch svg { width: 100%; height: auto; display: block; }

.gateway-pillar {
  position: absolute;
  bottom: 0;
  width: clamp(16px, 2.6vw, 26px);
  top: clamp(1.9rem, 4.4vw, 3.2rem);
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.14), transparent 35%, rgba(255, 255, 255, 0.35) 55%, rgba(0, 0, 0, 0.16)),
    linear-gradient(180deg, var(--maroon-mid), var(--maroon));
  border-radius: 3px;
}

/* Carved bands along each pillar shaft */
.gateway-pillar::before {
  content: "";
  position: absolute;
  inset: 12% 15%;
  background: repeating-linear-gradient(
    180deg,
    rgba(236, 208, 138, 0.5) 0 1.5px,
    transparent 1.5px 14px
  );
}

/* Pillar capital + base */
.gateway-pillar::after {
  content: "";
  position: absolute;
  left: -32%;
  right: -32%;
  bottom: 0;
  height: 16px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--brass), var(--maroon-dp));
}

.gateway-pillar.left  { left: clamp(0.25rem, 1.5vw, 1rem); }
.gateway-pillar.right { right: clamp(0.25rem, 1.5vw, 1rem); }

.gateway-body {
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(201, 154, 61, 0.45);
  border-radius: 1.4rem;
  box-shadow: 0 26px 60px -30px rgba(60, 18, 15, 0.6);
  padding: clamp(0.85rem, 2vw, 1.2rem);
}

/* Tabs shaped as hanging brass bells instead of pills */
.bell-tabs {
  display: flex;
  gap: clamp(0.3rem, 1.4vw, 0.8rem);
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.bell-tab {
  --bell: var(--ink-3);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.9rem 0.5rem;
  border-radius: 0.4rem 0.4rem 1.6rem 1.6rem;
  border: 1px solid rgba(201, 154, 61, 0.4);
  background: linear-gradient(180deg, #fff, var(--cream-2));
  color: var(--bell);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 0.35s var(--ease-bell), color 0.25s, background 0.25s, box-shadow 0.25s;
  transform-origin: 50% 0;
}

.bell-tab::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--brass);
  transform: translateX(-50%);
  transition: background 0.25s;
}

.bell-tab:hover { transform: rotate(-4deg); }

.bell-tab[aria-selected="true"] {
  --bell: #fff;
  background: linear-gradient(180deg, var(--maroon-mid), var(--maroon));
  box-shadow: 0 10px 20px -10px rgba(111, 33, 28, 0.9);
  animation: bellRing 0.7s var(--ease-bell);
}

.bell-tab[aria-selected="true"]::after { background: var(--gold-lt); }

@keyframes bellRing {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(-9deg); }
  50%  { transform: rotate(6deg); }
  75%  { transform: rotate(-3deg); }
  100% { transform: rotate(0deg); }
}

.gateway-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.gateway-field {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
}

.gateway-input {
  width: 100%;
  border: 1px solid rgba(36, 23, 18, 0.14);
  background: #fff;
  border-radius: 0.85rem;
  padding: 0.9rem 1rem 0.9rem 2.8rem;
  font-size: 0.9rem;
  color: var(--ink);
}

.gateway-input:focus {
  outline: none;
  border-color: var(--saffron);
  box-shadow: 0 0 0 3px rgba(246, 169, 79, 0.35);
}

.gateway-go {
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;
  border-radius: 0.85rem;
  padding: 0.9rem 1.7rem;
  font-weight: 800;
  font-size: 0.9rem;
  color: #fff;
  background: linear-gradient(135deg, var(--vermilion), var(--saffron-dp) 60%, var(--saffron));
  box-shadow: 0 14px 28px -14px rgba(201, 51, 31, 0.9);
  transition: filter 0.2s, transform 0.2s;
}

.gateway-go:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Rotating suggestion line under the field */
.gateway-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.85rem;
  font-size: 0.75rem;
  color: var(--ink-3);
  min-height: 1.2rem;
}

.gateway-hint b {
  color: var(--maroon);
  font-weight: 800;
  animation: hintIn 0.5s var(--ease-temple);
}

@keyframes hintIn {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Trust marks strung along a thread */
.thread-marks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.8rem, 3vw, 2.4rem);
  margin-top: 1.5rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--maroon);
}

.thread-marks span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.thread-marks span::before {
  content: "";
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gold);
}

/* ---------- 7. Bharat Chakra — the rotating destination mandala ---------- */
.chakra {
  --stage: min(88vw, 640px);
  --ring: calc(var(--stage) * 0.372);
  --node: clamp(66px, 13.5vw, 108px);
  --sat-ring: calc(var(--stage) * 0.30);
  --sat: clamp(52px, 10vw, 74px);
  --core: calc(var(--stage) * 0.40);
  position: relative;
}

.chakra-stage {
  position: relative;
  background: radial-gradient(circle, rgba(251, 245, 234, 0.82) 38%, rgba(251, 245, 234, 0) 72%);
  border-radius: 50%;
  width: var(--stage);
  height: var(--stage);
  margin-inline: auto;
  isolation: isolate;
}

/* Three concentric decorative rings, each turning at its own pace */
.chakra-art {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.ring-petals {
  inset: 2%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(201, 154, 61, 0.28) 0deg 1.4deg,
    transparent 1.4deg 9deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 84%, #000 86%, #000 96%, transparent 98%);
  mask-image: radial-gradient(circle, transparent 84%, #000 86%, #000 96%, transparent 98%);
  animation: sunSpin 220s linear infinite;
}

.ring-teeth {
  inset: 13%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(111, 33, 28, 0.35) 0deg 2.6deg,
    transparent 2.6deg 15deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 88%, #000 90%, transparent 100%);
  mask-image: radial-gradient(circle, transparent 88%, #000 90%, transparent 100%);
  animation: sunSpinRev 160s linear infinite;
}

.ring-hair {
  inset: 22%;
  border: 1px solid rgba(201, 154, 61, 0.5);
  box-shadow: inset 0 0 0 6px rgba(201, 154, 61, 0.12);
}

.ring-lotus {
  inset: 30%;
  background: repeating-conic-gradient(
    from 11.25deg,
    rgba(239, 143, 44, 0.22) 0deg 11deg,
    transparent 11deg 22.5deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 62%, transparent 72%);
  mask-image: radial-gradient(circle, #000 62%, transparent 72%);
  animation: sunSpin 90s linear infinite;
}

/* State ring — rotated by JS so the chosen state swings to the gateway (top) */
.chakra-orbit {
  position: absolute;
  inset: 0;
  transform: rotate(var(--orbit-rot, 0deg));
  transition: transform 1.15s var(--ease-temple);
}

.chakra-node {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--node);
  height: var(--node);
  margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
  border: 0;
  padding: 0;
  cursor: pointer;
  background: none;
  border-radius: 50%;
  /* place on the ring, then unspin twice so the label stays upright */
  transform:
    rotate(var(--a))
    translateY(calc(var(--ring) * -1))
    rotate(calc(var(--a) * -1))
    rotate(calc(var(--orbit-rot, 0deg) * -1));
  transition: transform 1.15s var(--ease-temple), opacity 0.6s, filter 0.6s;
}

.chakra-node-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(251, 245, 234, 0.9), 0 0 0 3.5px rgba(201, 154, 61, 0.6),
              0 14px 26px -12px rgba(60, 18, 15, 0.75);
  transition: box-shadow 0.45s, transform 0.45s var(--ease-bell);
  animation: nodeBob 6s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * -0.7s);
}

.chakra-node-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-temple), filter 0.4s;
}

.chakra-node-disc::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 18, 15, 0.1), rgba(60, 18, 15, 0.72));
}

@keyframes nodeBob {
  from { transform: translateY(-4px); }
  to   { transform: translateY(4px); }
}

.chakra-node-label {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 4px 9px;
  text-align: center;
  color: #fff;
  font-size: clamp(0.56rem, 1.5vw, 0.72rem);
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1.15;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

.chakra-node-label i {
  display: block;
  font-style: normal;
  font-size: 0.82em;
  opacity: 0.8;
  font-weight: 500;
}

.chakra-node:hover .chakra-node-disc {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--saffron), 0 20px 34px -12px rgba(60, 18, 15, 0.85);
}

.chakra-node:hover .chakra-node-disc img { transform: scale(1.12); }

.chakra-node:focus-visible { outline: none; }

.chakra-node:focus-visible .chakra-node-disc {
  box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--vermilion);
}

/* Open state: the ring widens and dims, the chosen node keeps its glow */
.chakra.is-open {
  --ring: calc(var(--stage) * 0.432);
  --node: clamp(50px, 9vw, 70px);
}

.chakra.is-open .chakra-node { opacity: 0.82; filter: sepia(0.25) brightness(0.96); }
.chakra.is-open .chakra-node:hover { opacity: 1; filter: none; }

.chakra.is-open .chakra-node.is-active {
  opacity: 1;
  filter: none;
}

.chakra-node.is-active .chakra-node-disc {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--saffron), 0 0 26px 6px rgba(246, 169, 79, 0.6);
  animation-play-state: paused;
}

.chakra.is-open .chakra-node-label { opacity: 0; transition: opacity 0.3s; }
.chakra.is-open .chakra-node.is-active .chakra-node-label,
.chakra.is-open .chakra-node:hover .chakra-node-label { opacity: 1; }

/* Satellites — the chosen state's temples, cities and stays circling it */
.chakra-satellites {
  position: absolute;
  inset: 0;
  animation: sunSpin 46s linear infinite;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s;
}

.chakra.is-open .chakra-satellites { opacity: 1; pointer-events: auto; }

.chakra-sat {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--sat);
  height: var(--sat);
  margin: calc(var(--sat) / -2) 0 0 calc(var(--sat) / -2);
  border-radius: 50%;
  text-decoration: none;
  transform:
    rotate(var(--a))
    translateY(calc(var(--sat-ring) * -1))
    rotate(calc(var(--a) * -1))
    scale(0);
  transition: transform 0.75s var(--ease-bell);
  transition-delay: calc(var(--i, 0) * 70ms);
}

.chakra.is-open .chakra-sat {
  transform:
    rotate(var(--a))
    translateY(calc(var(--sat-ring) * -1))
    rotate(calc(var(--a) * -1))
    scale(1);
}

/* Counter-rotate the chip contents so faces and labels never turn upside down */
.chakra-sat-inner {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  animation: sunSpinRev 46s linear infinite;
  box-shadow: 0 0 0 2px rgba(251, 245, 234, 0.95), 0 0 0 3px rgba(201, 154, 61, 0.7),
              0 10px 20px -10px rgba(60, 18, 15, 0.8);
  transition: box-shadow 0.35s;
}

.chakra-sat-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chakra-sat-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 18, 15, 0.05), rgba(60, 18, 15, 0.78));
}

.chakra-sat-tag {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 0 3px 6px;
  text-align: center;
  color: #fff;
  font-size: clamp(0.46rem, 1.25vw, 0.6rem);
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

.chakra-sat:hover .chakra-sat-inner {
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--saffron), 0 14px 26px -10px rgba(60, 18, 15, 0.9);
}

/* Core — lotus at rest, the chosen state once opened */
.chakra-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--core);
  height: var(--core);
  margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2);
  border-radius: 50%;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #fffaf0, var(--cream-2) 70%, #e9dabb);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 61, 0.55), 0 18px 40px -22px rgba(60, 18, 15, 0.8);
  transition: box-shadow 0.6s;
}

.chakra-core-rest,
.chakra-core-live {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 0.3rem;
  padding: 12%;
  transition: opacity 0.55s, transform 0.7s var(--ease-temple);
}

.chakra-core-live {
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
  padding: 0;
}

.chakra.is-open .chakra-core-rest { opacity: 0; transform: scale(1.18); }
.chakra.is-open .chakra-core-live { opacity: 1; transform: scale(1); pointer-events: auto; }

.chakra.is-open .chakra-core {
  box-shadow: inset 0 0 0 2px rgba(246, 169, 79, 0.8), 0 0 40px 4px rgba(246, 169, 79, 0.28),
              0 18px 40px -22px rgba(60, 18, 15, 0.9);
}

.chakra-core-live img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chakra-core-live::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 32%, rgba(60, 18, 15, 0.28), rgba(60, 18, 15, 0.88));
}

.chakra-core-name {
  position: relative;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.75);
  z-index: 2;
  color: #fff;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(0.95rem, 3vw, 1.5rem);
  line-height: 1.1;
  padding: 0 8%;
}

.chakra-core-name small {
  display: block;
  font-family: 'Tiro Devanagari Hindi', Georgia, serif;
  font-size: 0.66em;
  color: var(--gold-lt);
  margin-top: 0.15rem;
}

/* Lotus at rest, breathing */
.lotus-rest {
  width: 46%;
  color: var(--saffron);
  animation: lotusBreath 6s ease-in-out infinite;
}

@keyframes lotusBreath {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.07) rotate(4deg); opacity: 1; }
}

.chakra-core-hint {
  font-size: clamp(0.6rem, 1.6vw, 0.74rem);
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--maroon);
  line-height: 1.4;
}

/* A ripple pulses out of the core each time a state is chosen */
.chakra-pulse {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--core);
  height: var(--core);
  margin: calc(var(--core) / -2) 0 0 calc(var(--core) / -2);
  border-radius: 50%;
  border: 2px solid rgba(246, 169, 79, 0.75);
  opacity: 0;
  pointer-events: none;
}

.chakra-pulse.go { animation: pulseOut 1.1s var(--ease-temple); }

@keyframes pulseOut {
  from { opacity: 0.85; transform: scale(0.6); }
  to   { opacity: 0; transform: scale(2.6); }
}

/* ---------- 8. The unfurled state detail (a scroll, not a modal) ---------- */
.unfurl {
  width: min(100% - 2rem, 940px);
  margin: clamp(1.5rem, 4vw, 2.75rem) auto 0;
  text-align: center;
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.75s var(--ease-temple), opacity 0.5s;
}

.unfurl.open { grid-template-rows: 1fr; opacity: 1; }

.unfurl-clip { overflow: hidden; min-height: 0; }

.unfurl-inner { padding-top: 1.25rem; }

/* Scalloped top edge ties the scroll back into the mandala above it */
.unfurl-scallop {
  height: 16px;
  background: radial-gradient(circle at 10px -4px, transparent 12px, var(--gold) 12px 13px, transparent 13px);
  background-size: 20px 16px;
  opacity: 0.55;
  margin-bottom: 1rem;
}

.unfurl-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.5rem, 4vw, 2.4rem);
  color: var(--maroon);
  line-height: 1.1;
}

.unfurl-sub {
  color: var(--ink-3);
  font-size: 0.95rem;
  max-width: 46rem;
  margin: 0.6rem auto 0;
  line-height: 1.7;
}

.unfurl-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(0.9rem, 4vw, 2.6rem);
  margin-top: 1.4rem;
}

.unfurl-stat {
  min-width: 5.5rem;
}

.unfurl-stat b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.3rem, 3.4vw, 1.9rem);
  color: var(--saffron-dp);
  line-height: 1;
}

.unfurl-stat span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.unfurl-stat + .unfurl-stat { position: relative; }

.unfurl-stat + .unfurl-stat::before {
  content: "";
  position: absolute;
  left: clamp(-1.3rem, -2vw, -0.45rem);
  top: 50%;
  width: 7px;
  height: 7px;
  rotate: 45deg;
  background: var(--gold);
  translate: 0 -50%;
}

.unfurl-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.unfurl-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(201, 154, 61, 0.55);
  background: rgba(255, 255, 255, 0.72);
  color: var(--maroon);
  font-size: 0.76rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}

.unfurl-chip:hover {
  background: var(--maroon);
  border-color: var(--maroon);
  color: #fff;
  transform: translateY(-2px);
}

.unfurl-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
}

/* ---------- 9. Buttons ---------- */
.btn-sacred,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.5rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.22s var(--ease-bell), box-shadow 0.22s, background 0.22s, color 0.22s;
}

.btn-sacred {
  color: #fff;
  background: linear-gradient(135deg, var(--maroon), var(--maroon-mid) 55%, var(--vermilion));
  box-shadow: 0 16px 30px -16px rgba(111, 33, 28, 0.95);
}

.btn-sacred:hover { transform: translateY(-2px); box-shadow: 0 20px 34px -14px rgba(111, 33, 28, 1); }

.btn-ghost {
  color: var(--maroon);
  border-color: rgba(201, 154, 61, 0.65);
  background: rgba(255, 255, 255, 0.6);
}

.btn-ghost:hover { background: #fff; transform: translateY(-2px); }

.veil-deep .btn-ghost { color: var(--gold-lt); border-color: rgba(236, 208, 138, 0.45); background: rgba(255, 255, 255, 0.06); }
.veil-deep .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--maroon);
  text-decoration: none;
}

.link-arrow svg { transition: transform 0.25s var(--ease-temple); }
.link-arrow:hover svg { transform: translateX(4px); }
.veil-deep .link-arrow { color: var(--gold-lt); }

/* ---------- 10. Shikhara portals — the Dhams ---------- */
.shikhar-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3.5vw, 2.6rem);
  margin-top: clamp(2rem, 5vw, 3.5rem);
  align-items: flex-end;
}

.shikhar {
  position: relative;
  flex: 1 1 230px;
  max-width: 280px;
  text-decoration: none;
  display: block;
  transition: transform 0.5s var(--ease-temple);
}

/* The spires: for 4 dhams, middle two rise taller; for 3, center rises */
.shikhar:nth-child(2) { margin-bottom: clamp(0.75rem, 2.5vw, 1.8rem); }
.shikhar-row:has(.shikhar:nth-child(4)) .shikhar:nth-child(3) { margin-bottom: clamp(0.75rem, 2.5vw, 1.8rem); }

.shikhar:hover { transform: translateY(-8px); }

/* Kalash finial crowning each portal */
.shikhar-finial {
  display: block;
  width: 26px;
  margin: 0 auto -6px;
  color: var(--brass);
  transition: transform 0.5s var(--ease-bell), color 0.3s;
}

.shikhar:hover .shikhar-finial { transform: translateY(-5px) scale(1.12); color: var(--saffron); }

/* Tall parabolic arch — the nagara silhouette, no rectangles anywhere */
.shikhar-arch {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 4.35;
  border-radius: 50% 50% 14px 14px / 34% 34% 0 0;
  box-shadow: 0 0 0 1px rgba(201, 154, 61, 0.6), 0 26px 46px -26px rgba(60, 18, 15, 0.85);
  background: var(--maroon-dp);
}

.shikhar-arch img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 0.9s var(--ease-temple), filter 0.5s;
}

.shikhar:hover .shikhar-arch img { transform: scale(1.14); }

.shikhar-arch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(60, 18, 15, 0.12) 0%, rgba(60, 18, 15, 0.25) 45%, rgba(60, 18, 15, 0.93) 100%);
}

/* Inner gold outline, inset so it reads as carving rather than a border */
.shikhar-arch::after {
  content: "";
  position: absolute;
  inset: 9px;
  z-index: 2;
  border: 1px solid rgba(236, 208, 138, 0.42);
  border-radius: 50% 50% 8px 8px / 34% 34% 0 0;
  pointer-events: none;
}

/* Light spilling from the sanctum on hover */
.shikhar-glow {
  position: absolute;
  left: 50%;
  bottom: -28%;
  width: 150%;
  aspect-ratio: 1;
  translate: -50% 0;
  z-index: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 169, 79, 0.5), transparent 62%);
  opacity: 0;
  transition: opacity 0.6s;
}

.shikhar:hover .shikhar-glow { opacity: 1; }

.shikhar-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  padding: 1.1rem 1.15rem 1.4rem;
  text-align: center;
  color: #fff;
}

.shikhar-tag {
  display: inline-block;
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-lt);
  margin-bottom: 0.4rem;
}

.shikhar-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  line-height: 1.15;
}

.shikhar-note {
  font-size: 0.74rem;
  line-height: 1.55;
  color: rgba(251, 245, 234, 0.72);
  margin-top: 0.4rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s var(--ease-temple), opacity 0.4s, margin-top 0.4s;
}

.shikhar:hover .shikhar-note,
.shikhar:focus-visible .shikhar-note { max-height: 5rem; opacity: 1; }

/* Plinth the portal stands on */
.shikhar-plinth {
  height: 12px;
  margin: 0 -6px;
  border-radius: 0 0 6px 6px;
  background: linear-gradient(180deg, var(--brass), rgba(60, 18, 15, 0.85));
  box-shadow: 0 10px 18px -12px rgba(60, 18, 15, 0.9);
}

/* ---------- 11. Yatra path — a trail that draws itself as you scroll ---------- */
.trail {
  position: relative;
  padding-block: clamp(1.5rem, 4vw, 2.5rem);
}

.trail-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.trail-line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 2000);
  stroke-dashoffset: calc(var(--len, 2000) * (1 - var(--draw, 0)));
  filter: drop-shadow(0 2px 6px rgba(201, 154, 61, 0.55));
}

.trail-line.under {
  stroke: rgba(111, 33, 28, 0.14);
  stroke-dasharray: 6 9;
  stroke-dashoffset: 0;
  filter: none;
}

/* Milestones pop as the drawn line passes them */
.trail-stop {
  opacity: 0;
  transform: scale(0.5);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s, transform 0.6s var(--ease-bell);
}

.trail-stop.lit { opacity: 1; transform: scale(1); }

.trail-stop circle { fill: var(--cream); stroke: var(--gold); stroke-width: 2; }
.trail-stop.lit circle { fill: #fff; stroke: var(--saffron-dp); }
.trail-stop path { fill: var(--maroon); }

.trail-stop text {
  font-family: 'Manrope', sans-serif;
  font-size: 11px;
  font-weight: 800;
  fill: var(--maroon);
  text-anchor: middle;
}

/* The walking pilgrim that tracks the drawn head of the trail */
.trail-walker {
  opacity: 0;
  transition: opacity 0.4s;
}

.trail-walker.on { opacity: 1; }

/* Circuit list beneath the trail — arched niches, not tiles */
.circuit-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(0.8rem, 2.5vw, 1.6rem);
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}

.circuit {
  position: relative;
  display: block;
  text-decoration: none;
  text-align: center;
  padding: 1.6rem 1rem 1.25rem;
  border-radius: 999px 999px 1rem 1rem;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(201, 154, 61, 0.45);
  transition: transform 0.35s var(--ease-temple), background 0.35s, box-shadow 0.35s;
}

.circuit:hover {
  transform: translateY(-6px);
  background: #fff;
  box-shadow: 0 22px 40px -24px rgba(60, 18, 15, 0.7);
}

.circuit-icon {
  width: 42px;
  height: 42px;
  margin: 0 auto 0.7rem;
  color: var(--maroon);
  transition: transform 0.5s var(--ease-bell), color 0.3s;
}

.circuit:hover .circuit-icon { transform: rotate(-8deg) scale(1.1); color: var(--vermilion); }

.circuit-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  color: var(--maroon);
}

.circuit-meta {
  font-size: 0.7rem;
  color: var(--ink-3);
  margin-top: 0.3rem;
  font-weight: 700;
  letter-spacing: 0.06em;
}

/* ---------- 12. Jharokha wall — the packages ---------- */
.wall {
  position: relative;
  overflow: hidden;
}

/* Jali screen woven from two rotated grids */
.wall::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.16;
  background-image:
    repeating-linear-gradient(45deg, rgba(236, 208, 138, 0.9) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(236, 208, 138, 0.9) 0 1px, transparent 1px 22px);
  pointer-events: none;
}

.wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 50% 0%, rgba(246, 169, 79, 0.2), transparent 70%);
  pointer-events: none;
}

.jharokha-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.2rem, 3vw, 2.2rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.jharokha {
  position: relative;
  display: block;
  text-decoration: none;
  padding-top: 18px;
  transition: transform 0.4s var(--ease-temple);
}

.jharokha:hover { transform: translateY(-7px); }

/* Chhatri canopy above the window */
.jharokha-canopy {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% 0;
  width: 78%;
  height: 26px;
  border-radius: 999px 999px 0 0;
  background: linear-gradient(180deg, var(--brass), rgba(111, 33, 28, 0.9));
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.7);
}

.jharokha-canopy::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -9px;
  translate: -50% 0;
  width: 9px;
  height: 12px;
  border-radius: 50% 50% 40% 40%;
  background: var(--gold-lt);
}

.jharokha-frame {
  position: relative;
  overflow: hidden;
  border-radius: 999px 999px 0.75rem 0.75rem / 42% 42% 0 0;
  aspect-ratio: 4 / 4.6;
  background: var(--maroon-dp);
  box-shadow: 0 0 0 1px rgba(236, 208, 138, 0.45), 0 30px 50px -28px rgba(0, 0, 0, 0.9);
}

.jharokha-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-temple);
}

.jharokha:hover .jharokha-frame img { transform: scale(1.1); }

.jharokha-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 18, 15, 0.05) 30%, rgba(60, 18, 15, 0.95) 100%);
}

.jharokha-days {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  background: rgba(251, 245, 234, 0.92);
  color: var(--maroon);
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.1em;
}

.jharokha-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.2rem 1.25rem 1.4rem;
  color: #fff;
}

.jharokha-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.12rem;
  line-height: 1.2;
}

.jharokha-route {
  font-size: 0.7rem;
  color: rgba(251, 245, 234, 0.72);
  margin-top: 0.35rem;
  line-height: 1.5;
}

.jharokha-price {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(236, 208, 138, 0.28);
}

.jharokha-price b {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1.22rem;
  color: var(--gold-lt);
}

.jharokha-price span {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(251, 245, 234, 0.6);
}

/* ---------- 13. Stays — lotus-petal tiles ---------- */
.petal-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(1rem, 3vw, 1.8rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}

.petal {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
  aspect-ratio: 1 / 1.08;
  /* the asymmetric radius is the petal itself */
  border-radius: 64% 8% 64% 8%;
  box-shadow: 0 0 0 1px rgba(201, 154, 61, 0.5), 0 24px 44px -26px rgba(60, 18, 15, 0.8);
  transition: border-radius 0.7s var(--ease-temple), transform 0.5s var(--ease-temple), box-shadow 0.5s;
  background: var(--maroon-dp);
}

.petal:nth-child(even) { border-radius: 8% 64% 8% 64%; }

.petal:hover {
  border-radius: 34% 34% 34% 34%;
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px var(--saffron), 0 30px 50px -24px rgba(60, 18, 15, 0.9);
}

.petal img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.9s var(--ease-temple);
}

.petal:hover img { transform: scale(1.09); }

.petal::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(60, 18, 15, 0.05) 35%, rgba(60, 18, 15, 0.92) 100%);
}

.petal-body {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 2;
  padding: 1.1rem 1.3rem 1.5rem;
  color: #fff;
  text-align: center;
}

.petal-rating {
  position: absolute;
  top: 12%;
  left: 50%;
  translate: -50% 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  background: rgba(251, 245, 234, 0.92);
  color: var(--maroon);
  font-size: 0.64rem;
  font-weight: 900;
}

.petal-name {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 1rem;
  line-height: 1.2;
}

.petal-dist {
  font-size: 0.68rem;
  color: rgba(251, 245, 234, 0.75);
  margin-top: 0.3rem;
}

.petal-price {
  margin-top: 0.55rem;
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--gold-lt);
}

/* ---------- 14. Aarti thali — things to do, arranged as lamps ---------- */
.thali {
  position: relative;
  width: min(92vw, 560px);
  aspect-ratio: 1;
  margin-inline: auto;
  display: grid;
  place-items: center;
}

.thali-plate {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background:
    repeating-conic-gradient(from 0deg, rgba(201, 154, 61, 0.2) 0deg 1.5deg, transparent 1.5deg 7.5deg),
    radial-gradient(circle, #fffaf0, var(--cream-2) 72%, #e4d2ae);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 61, 0.6), inset 0 0 40px rgba(201, 154, 61, 0.22),
              0 24px 50px -30px rgba(60, 18, 15, 0.8);
  animation: sunSpinRev 200s linear infinite;
}

.thali-center {
  position: relative;
  z-index: 2;
  width: 38%;
  text-align: center;
}

.thali-center .title-lg { font-size: clamp(1.1rem, 3.4vw, 1.7rem); }

.thali-lamp {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(88px, 19vw, 122px);
  margin: calc(clamp(88px, 19vw, 122px) / -2) 0 0 calc(clamp(88px, 19vw, 122px) / -2);
  transform: rotate(var(--a)) translateY(calc(min(92vw, 560px) * -0.355)) rotate(calc(var(--a) * -1));
  text-align: center;
  text-decoration: none;
  z-index: 3;
}

.thali-lamp-disc {
  display: block;
  position: relative;
  width: clamp(58px, 12vw, 78px);
  aspect-ratio: 1;
  margin: 0 auto 0.4rem;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 2px var(--cream), 0 0 0 3px rgba(201, 154, 61, 0.7), 0 12px 22px -12px rgba(60, 18, 15, 0.9);
  transition: box-shadow 0.4s, transform 0.4s var(--ease-bell);
}

.thali-lamp-disc img { width: 100%; height: 100%; object-fit: cover; }

.thali-lamp:hover .thali-lamp-disc {
  transform: scale(1.08);
  box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--saffron), 0 0 26px 4px rgba(246, 169, 79, 0.65);
}

/* The flame above each lamp only lights on hover */
.thali-lamp-flame {
  position: absolute;
  left: 50%;
  top: -14px;
  translate: -50% 0;
  width: 14px;
  opacity: 0;
  transition: opacity 0.35s;
}

.thali-lamp:hover .thali-lamp-flame { opacity: 1; }

.thali-lamp-name {
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--maroon);
  line-height: 1.25;
  display: block;
}

.thali-lamp-kind {
  display: block;
  font-size: 0.6rem;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- 15. Palm-leaf manuscripts — guides & stories ---------- */
.pothi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.6rem, 4vw, 3rem);
  margin-top: clamp(1.8rem, 4vw, 2.6rem);
}

.pothi {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding: 0.75rem 1rem 0.75rem 0.75rem;
  text-decoration: none;
  position: relative;
  /* the long, softly-rounded silhouette of a palm-leaf folio */
  border-radius: 999px;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0.85), rgba(243, 231, 208, 0.7));
  border: 1px solid rgba(201, 154, 61, 0.4);
  transition: transform 0.35s var(--ease-temple), box-shadow 0.35s, background 0.35s;
}

.pothi + .pothi { margin-top: 0.9rem; }

.pothi:hover {
  transform: translateX(6px);
  background: #fff;
  box-shadow: 0 18px 34px -22px rgba(60, 18, 15, 0.7);
}

/* The binding hole of a real pothi leaf */
.pothi::before {
  content: "";
  position: absolute;
  left: 4.6rem;
  top: 50%;
  width: 5px;
  height: 5px;
  translate: 0 -50%;
  border-radius: 50%;
  background: rgba(111, 33, 28, 0.22);
}

.pothi img {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(201, 154, 61, 0.55);
}

.pothi-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--ink);
  line-height: 1.35;
}

.pothi:hover .pothi-title { color: var(--maroon); }

.pothi-note {
  font-size: 0.72rem;
  color: var(--ink-3);
  margin-top: 0.2rem;
  line-height: 1.5;
}

/* ---------- 16. Reviews — voices on a turning lotus ---------- */
.vaani {
  position: relative;
  width: min(100% - 2rem, 780px);
  margin-inline: auto;
  text-align: center;
  min-height: 15rem;
}

.vaani-quote {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.7s, transform 0.8s var(--ease-temple);
  pointer-events: none;
}

.vaani-quote.on { opacity: 1; transform: none; pointer-events: auto; }

.vaani-text {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.05rem, 2.8vw, 1.5rem);
  line-height: 1.55;
  color: var(--maroon);
  max-width: 34rem;
}

.vaani-who {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.vaani-stars { color: var(--saffron); display: inline-flex; gap: 2px; }

.vaani-dots {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.vaani-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 1px solid var(--gold);
  background: transparent;
  rotate: 45deg;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}

.vaani-dot[aria-selected="true"] { background: var(--saffron-dp); transform: scale(1.25); }

/* ---------- 17. Sankalp — newsletter as a lamp you light ---------- */
.sankalp-lamp {
  width: 132px;
  margin: 0 auto 1.25rem;
  cursor: pointer;
  color: var(--gold-lt);
}

.sankalp-lamp .wick-flame {
  opacity: 0;
  transform-origin: 50% 100%;
  transition: opacity 0.5s;
}

.sankalp.lit .wick-flame { opacity: 1; animation: flicker 1.5s ease-in-out infinite alternate; }

.sankalp.lit .sankalp-halo { opacity: 1; }

.sankalp-halo {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(80vw, 420px);
  aspect-ratio: 1;
  translate: -50% -32%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(246, 169, 79, 0.45), transparent 62%);
  opacity: 0;
  transition: opacity 0.9s;
  pointer-events: none;
}

/* ---------- 18. Footer river at dusk ---------- */
.night-ghat {
  position: relative;
  overflow: hidden;
}

.night-ghat > svg {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(1200px, 110%);
  translate: -50% 0;
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- 19. Scroll reveals ---------- */
[data-rise] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease-temple), transform 0.85s var(--ease-temple);
  transition-delay: var(--d, 0ms);
}

[data-rise].seen { opacity: 1; transform: none; }

/* Sections whose contents open like a pair of temple doors */
[data-open-arch] {
  opacity: 0;
  transform: scale(0.94) translateY(20px);
  transition: opacity 0.9s var(--ease-temple), transform 1s var(--ease-temple);
  transition-delay: var(--d, 0ms);
}

[data-open-arch].seen { opacity: 1; transform: none; }

/* ---------- 20. Responsive ---------- */
@media (max-width: 900px) {
  .shikhar-row { gap: 1.1rem; }
  .shikhar:nth-child(2) { margin-bottom: 0; }
}

@media (max-width: 640px) {
  .chakra {
    --stage: min(93vw, 420px);
    --ring: calc(var(--stage) * 0.365);
    --node: 72px;
    --sat-ring: calc(var(--stage) * 0.295);
    --sat: 46px;
    --core: calc(var(--stage) * 0.385);
  }

  .chakra.is-open {
    --ring: calc(var(--stage) * 0.445);
    --node: 38px;
  }

  .toran { height: 74px; }
  .toran-unit { min-width: 26px; }
  .toran-leaf { width: 12px; height: 26px; }
  .toran-bloom { width: 15px; height: 15px; }

  .hero { padding-top: 4rem; }
  .hero-bell { width: 34px; }

  .thali { width: min(94vw, 400px); }
  .thali-lamp {
    width: 84px;
    margin: -42px 0 0 -42px;
    transform: rotate(var(--a)) translateY(calc(min(94vw, 400px) * -0.365)) rotate(calc(var(--a) * -1));
  }
  .thali-center { width: 46%; }

  .pothi::before { display: none; }
  .pothi { border-radius: 1.6rem; }
}

@media (max-width: 400px) {
  .chakra { --node: 62px; --core: calc(var(--stage) * 0.4); }
  .chakra.is-open { --node: 34px; }
}

/* ---------- 21. Reduced motion — keep the meaning, drop the movement ---------- */
@media (prefers-reduced-motion: reduce) {
  .toran-rail,
  .toran-unit,
  .sun-rays,
  .sky-stars,
  .hero-mist,
  .hero-river::after,
  .diya-float,
  .bird,
  .bird svg,
  .hero-bell,
  .flame,
  .hero-om,
  .chakra-art,
  .chakra-satellites,
  .chakra-sat-inner,
  .chakra-node-disc,
  .lotus-rest,
  .thali-plate,
  .hero-scroll-cue,
  .sankalp.lit .wick-flame {
    animation: none !important;
  }

  .rise-word { opacity: 1; transform: none; animation: none; }
  .diya-float { opacity: 0.9; }
  .hero-layer { transform: translateX(-50%) !important; }

  [data-rise],
  [data-open-arch] { opacity: 1; transform: none; }

  .trail-line { stroke-dashoffset: 0; }
  .trail-stop { opacity: 1; transform: none; }
}

/* ==========================================================================
   22. INNER-PAGE SYSTEM
   Everything below is used by the pages other than the homepage. The
   homepage tells the whole story of the journey; these pages are single
   stops along it, so they get one arch at the top and quieter motifs inside.
   ========================================================================== */

/* ---------- 22a. Page crown — the arched header every inner page opens with ---------- */
.page-crown {
  position: relative;
  padding: clamp(0.75rem, 2vw, 1.5rem) 0 0;
}

.page-crown-frame {
  position: relative;
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  overflow: hidden;
  /* a wide shallow dome — the silhouette of a mandapa roof */
  border-radius: 46% 46% 1.25rem 1.25rem / 16% 16% 0 0;
  min-height: clamp(280px, 38vw, 420px);
  display: flex;
  align-items: flex-end;
  background: var(--maroon-dp);
  box-shadow: 0 0 0 1px rgba(201, 154, 61, 0.55), 0 30px 60px -34px rgba(60, 18, 15, 0.85);
}

.page-crown-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: crownDrift 26s ease-in-out infinite alternate;
}

/* a slow Ken-Burns so the header is never quite still */
@keyframes crownDrift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.12) translate3d(-1.5%, -1.5%, 0); }
}

.page-crown-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(60, 18, 15, 0.55) 0%, rgba(60, 18, 15, 0.12) 34%, rgba(60, 18, 15, 0.92) 100%);
}

/* carved gold outline, inset so it reads as relief rather than a border */
.page-crown-inner-rule {
  position: absolute;
  inset: 10px;
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(236, 208, 138, 0.38);
  border-radius: 46% 46% 0.9rem 0.9rem / 16% 16% 0 0;
}

.page-crown-body {
  position: relative;
  z-index: 3;
  padding: clamp(1.5rem, 4vw, 3rem);
  color: #fff;
  max-width: 44rem;
}

.page-crown-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}

.page-crown-title .deva {
  display: block;
  font-size: 0.46em;
  color: var(--gold-lt);
  margin-top: 0.35rem;
  letter-spacing: 0;
}

.page-crown-body .kicker { color: var(--gold-lt); }
.page-crown-body .kicker::before,
.page-crown-body .kicker::after { background: linear-gradient(90deg, transparent, var(--gold-lt)); }
.page-crown-body .kicker::after { background: linear-gradient(270deg, transparent, var(--gold-lt)); }

.page-crown-note {
  margin-top: 0.8rem;
  font-size: clamp(0.88rem, 1.6vw, 1rem);
  line-height: 1.65;
  color: rgba(251, 245, 234, 0.82);
  max-width: 34rem;
}

/* facts strung along the foot of the crown */
.page-crown-facts {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.7rem, 3vw, 2rem);
  margin-top: 1.2rem;
}

.page-crown-facts span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(251, 245, 234, 0.9);
}

.page-crown-facts span::before {
  content: "";
  width: 6px;
  height: 6px;
  rotate: 45deg;
  background: var(--gold);
}

/* the toran hangs inside the crown rather than over the whole page */
.page-crown .toran { height: 62px; z-index: 4; }
.page-crown .toran-leaf { width: 12px; height: 24px; }
.page-crown .toran-bloom { width: 14px; height: 14px; }
.page-crown .toran::before { top: 4px; }
.page-crown .toran-unit:nth-child(4n + 1)::after { width: 7px; height: 9px; }

/* ---------- 22b. Breadcrumbs as a strung thread ---------- */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  width: min(100% - 2.5rem, 1200px);
  margin: 0 auto;
  padding-top: 1rem;
  font-size: 0.76rem;
  color: var(--ink-3);
}

.crumbs a {
  color: var(--ink-2);
  text-decoration: none;
  font-weight: 600;
}

.crumbs a:hover { color: var(--maroon); text-decoration: underline; }

.crumbs i {
  font-style: normal;
  color: var(--gold);
  font-size: 0.6rem;
}

.crumbs b { color: var(--maroon); font-weight: 800; }

/* ---------- 22c. Upgrade every existing card into a carved arch ----------
   The inner pages are full of `.content-card` grids from the original build.
   Restyling the class here lifts all of them at once, without touching
   a single line of their markup. */
.yatra .content-card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 231, 208, 0.82));
  border: 1px solid rgba(201, 154, 61, 0.4);
  /* elliptical dome on top, quiet corners below */
  border-radius: 1.5rem 1.5rem 0.8rem 0.8rem / 1.9rem 1.9rem 0.8rem 0.8rem;
  box-shadow: 0 14px 30px -18px rgba(60, 18, 15, 0.42);
  transition: transform 0.35s var(--ease-temple), box-shadow 0.35s, border-color 0.35s;
}

.yatra .content-card:hover {
  transform: translateY(-5px);
  border-color: rgba(201, 154, 61, 0.9);
  box-shadow: 0 26px 46px -22px rgba(60, 18, 15, 0.55);
}

/* Cards that lead with a photograph get the deeper arch */
.yatra .content-card > a:first-child > img,
.yatra .content-card > div:first-child,
.yatra .content-card > a:first-child {
  border-radius: 1.4rem 1.4rem 0 0 / 1.8rem 1.8rem 0 0;
  overflow: hidden;
}

/* ---------- 22d. Heritage pills ---------- */
.yatra .pill {
  border: 1px solid transparent;
  transition: background-color 0.25s, color 0.25s, transform 0.25s var(--ease-bell), border-color 0.25s;
}

.yatra .pill:hover { transform: translateY(-2px); }

.yatra a.pill.bg-white,
.yatra button.pill.bg-white { border-color: rgba(201, 154, 61, 0.45); }

/* ---------- 22e. Niche — an arched panel for sidebars and callouts ---------- */
.niche {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(243, 231, 208, 0.85));
  border: 1px solid rgba(201, 154, 61, 0.45);
  border-radius: 2rem 2rem 1rem 1rem / 2.6rem 2.6rem 1rem 1rem;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  box-shadow: 0 20px 40px -24px rgba(60, 18, 15, 0.5);
}

.niche::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -11px;
  translate: -50% 0;
  width: 11px;
  height: 14px;
  border-radius: 50% 50% 40% 40%;
  background: linear-gradient(180deg, var(--gold-lt), var(--brass));
}

.niche-deep {
  background: linear-gradient(180deg, var(--maroon), var(--maroon-dp));
  border-color: rgba(236, 208, 138, 0.35);
  color: var(--cream);
}

.niche-deep .niche-label { color: var(--gold-lt); }

.niche-label {
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--saffron-dp);
}

/* ---------- 22f. Section heading lockup used across inner pages ---------- */
.stop-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
}

.stop-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.35rem, 3vw, 1.9rem);
  color: var(--maroon);
  line-height: 1.15;
}

.stop-title .deva {
  color: var(--saffron-dp);
  font-size: 0.72em;
  margin-left: 0.35rem;
}

/* ---------- 22g. Jali divider between sections ---------- */
.jali-rule {
  height: 18px;
  margin: clamp(2rem, 5vw, 3.25rem) 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(45deg, var(--gold) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, var(--gold) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent);
}

/* ---------- 22h. Stat medallions ---------- */
.medallions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(0.8rem, 3vw, 2.2rem);
  justify-content: center;
}

.medallion {
  text-align: center;
  min-width: 6rem;
}

.medallion b {
  display: block;
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.4rem, 3.4vw, 2rem);
  color: var(--saffron-dp);
  line-height: 1;
}

.medallion span {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- 22i. Quieter sky for the utility pages ----------
   Bookings, the dashboard and sign-in are places to get something done.
   They keep the warm ground but not the travelling sun. */
.yatra-still .sun-orb { display: none; }

.yatra-still .sky-wash {
  background: linear-gradient(180deg, #fbeed6 0%, #fbf5ea 40%, #fbf5ea 100%);
}

/* ---------- 22j. Responsive ---------- */
@media (max-width: 640px) {
  .page-crown-frame {
    border-radius: 34% 34% 1rem 1rem / 9% 9% 0 0;
    min-height: 260px;
  }
  .page-crown-inner-rule { inset: 7px; border-radius: 34% 34% 0.7rem 0.7rem / 9% 9% 0 0; }
  .page-crown .toran { height: 48px; }
  .page-crown .toran-leaf { height: 18px; width: 10px; }
  .page-crown .toran-bloom { width: 11px; height: 11px; }
  .niche { border-radius: 1.5rem 1.5rem 0.8rem 0.8rem / 1.8rem 1.8rem 0.8rem 0.8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-crown-frame > img { animation: none; }
}

/* ---------- 22k. Lintel — the quieter header for listing and article pages ----------
   Pages that open on a list rather than a photograph get a carved lintel
   instead of a full arch: an ornament, the name, and a rule beneath. */
.lintel {
  width: min(100% - 2.5rem, 1200px);
  margin-inline: auto;
  padding: clamp(1.75rem, 4vw, 3.25rem) 0 clamp(0.75rem, 2vw, 1.25rem);
  text-align: center;
}

.lintel-ornament {
  width: 54px;
  margin: 0 auto clamp(0.75rem, 2vw, 1.1rem);
  color: var(--brass);
  display: block;
}

.lintel-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.75rem, 4.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--maroon);
  letter-spacing: -0.015em;
  margin-top: 0.7rem;
}

.lintel-title .deva {
  display: block;
  font-size: 0.44em;
  color: var(--saffron-dp);
  margin-top: 0.3rem;
  letter-spacing: 0;
}

.lintel-note {
  margin: 0.7rem auto 0;
  max-width: 34rem;
  color: var(--ink-3);
  font-size: clamp(0.88rem, 1.5vw, 0.98rem);
  line-height: 1.65;
}

.lintel .motif-rule { margin-top: clamp(1rem, 2.5vw, 1.5rem); }

/* ---------- 22l. Gallery under an arch ---------- */
.gallery-arch {
  border-radius: 36% 36% 1rem 1rem / 13% 13% 0 0;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(201, 154, 61, 0.5), 0 26px 50px -30px rgba(60, 18, 15, 0.7);
}

@media (max-width: 640px) {
  .gallery-arch { border-radius: 24% 24% .75rem .75rem / 7% 7% 0 0; }
}

/* ---------- 22m. The sign-in shrine ---------- */
.auth-shrine {
  position: relative;
  border-radius: 2.2rem 2.2rem 1.4rem 1.4rem / 3rem 3rem 1.4rem 1.4rem !important;
  box-shadow: 0 0 0 1px rgba(201, 154, 61, 0.55), 0 40px 70px -34px rgba(0, 0, 0, 0.8) !important;
}

/* kalash resting on the crown of the card */
.auth-shrine::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -17px;
  translate: -50% 0;
  z-index: 2;
  width: 14px;
  height: 20px;
  border-radius: 50% 50% 35% 35%;
  background: linear-gradient(180deg, var(--gold-lt), var(--brass));
  box-shadow: 0 -3px 10px rgba(236, 208, 138, 0.6);
}

/* ---------- 22n. Account-page headings ---------- */
.ledger-head {
  border-bottom: 1px solid rgba(201, 154, 61, 0.4) !important;
  position: relative;
}

.ledger-head::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 84px;
  height: 3px;
  background: linear-gradient(90deg, var(--saffron-dp), transparent);
}

/* ---------- 22o. The header over a live sky ----------
   `.glass` was tuned against a solid cream page. Now that the body is
   transparent and the sky moves behind it, it needs more body to stay
   readable — and a thin gold underline to sit in the same family as
   everything else. */
.yatra #site-header,
.yatra > header,
#site-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(201, 154, 61, 0.28) !important;
  box-shadow: 0 4px 20px -4px rgba(74, 56, 47, 0.08) !important;
}

/* ---------- 22p. Dropdown Elevation & Solid Opaque Background ---------- */
.nav-dropdown-item {
  position: relative;
}

.nav-dropdown-menu {
  display: none;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 100%;
  z-index: 1050 !important;
  background-color: #ffffff !important;
  box-shadow: 0 25px 50px -12px rgba(44, 18, 12, 0.28), 0 0 0 1px rgba(201, 154, 61, 0.25) !important;
  transition: opacity 0.15s ease, transform 0.15s ease;
  transform: translateY(4px);
  isolation: isolate;
}

.nav-dropdown-item:hover > .nav-dropdown-menu,
.nav-dropdown-item:focus-within > .nav-dropdown-menu,
.nav-dropdown-item.is-open > .nav-dropdown-menu {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* ---------- 22q. Maroon Palette Utilities ---------- */
.bg-maroon-950 {
  background-color: #200705 !important;
}
.text-maroon-950 {
  color: #200705 !important;
}
.border-maroon-950 {
  border-color: #200705 !important;
}