/* ============================================================
   Shri Ram Janmbhoomi — Shared Stylesheet
   Extracted from single-page build for multi-page SEO site
   ============================================================ */

:root {
  --color-primary-container: #ff9933;
  --color-on-primary: #ffffff;
  --color-on-primary-container: #693800;
  --color-secondary: #735c00;
  --color-on-secondary: #ffffff;
  --color-secondary-container: #fed65b;
  --color-on-secondary-container: #745c00;
  --color-tertiary: #b22b1d;
  --color-on-tertiary: #ffffff;
  --color-tertiary-container: #ff9585;
  --color-on-tertiary-container: #8c0c05;
  --color-surface: #f9f9f9;
  --color-surface-dim: #dadada;
  --color-surface-variant: #e2e2e2;
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #f3f3f3;
  --color-surface-container: #eeeeee;
  --color-surface-container-high: #e8e8e8;
  --color-surface-container-highest: #e2e2e2;
  --color-background: #FAF6EE;
  --color-on-background: #1a1c1c;
  --color-on-surface: #1a1c1c;
  --color-on-surface-variant: #554336;
  --color-outline: #887364;
  --color-outline-variant: #dbc2b0;
  --font-jakarta: 'Plus Jakarta Sans', sans-serif;
  --fs-headline-lg: 48px;
  --lh-headline-lg: 1.2;
  --fw-headline-lg: 600;
  --fs-headline-lg-mobile: 32px;
  --lh-headline-lg-mobile: 1.2;
  --fw-headline-lg-mobile: 600;
  --fs-headline-md: 32px;
  --lh-headline-md: 1.3;
  --fw-headline-md: 500;
  --fs-body-lg: 18px;
  --lh-body-lg: 1.6;
  --fw-body-lg: 400;
  --fs-body-md: 16px;
  --lh-body-md: 1.6;
  --fw-body-md: 400;
  --fs-label-caps: 12px;
  --lh-label-caps: 1.0;
  --ls-label-caps: 0.1em;
  --fw-label-caps: 700;
  --margin-desktop: 64px;
  --container-max: 1280px;
  --gutter: 24px;
  --section-gap: 100px;
  --unit: 8px;
  --radius-lg: 14px;
  --radius-xl: 12px;
  --radius-full: 9999px;
  --color-primary: #8f4e00;
  --font-garamond: 'EB Garamond', serif;
  --margin-mobile: 16px;
  --bg-card: #FFFFFF;
  --bg-badge-tithi: #fdf5ea;
  --primary-maroon: #7e1e19;
  --primary-ochre: #b46b1a;
  --primary-gold: #c58d34;
  --gold-border: #e6cb9a;
  --text-main: #2b2118;
  --text-muted: #6B5D57;
  --text-light: #7d6e61;
  --border-card: #eedfcb;
  --card-shadow: 0 4px 18px rgba(139,90,43,0.05);
  --card-shadow-hover: 0 8px 24px rgba(139,90,43,0.12);
  --font-display: 'Cinzel', serif;
  --font-devanagari: 'Noto Serif Devanagari', serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --bg-cream: #FAF6EE;
  --bg-hero: #FAF6EE;
  --border-warm: #ebdccb;
  --border-light: #f3e9dc;
  --primary-red: #8b1d13;
  --secondary-maroon: #73120b;
  --accent-gold: #C29139;
  --accent-amber: #d97706;
  --gold-soft: #fef8ee;
  --tag-bg: #F4EDE0;
  --tag-border: #ebdcc9;
  --shadow-sm: 0 2px 8px rgba(90, 50, 20, 0.05);
  --shadow-md: 0 4px 16px rgba(90, 50, 20, 0.08);
  --bg-warm-canvas: #FAF6EE;
  --bg-tinted-card: #FFFDF9;
  --bg-verse: #FCF8EE;
  --text-maroon: #7D1B13;
  --text-brown-heading: #582414;
  --text-body: #3E2F2B;
  --accent-saffron: #BF4C14;
  --border-soft: #EADBCE;
  --border-accent: #E2C9A1;
  --tag-text: #6B4E3B;
  --radius-sm: 6px;
  --radius-md: 10px;
}

/* ── Janmbhoomi inline cards — animation hook ── */
.jb-card { /* styles inherited from inline; this class is for animation only */ }

/* ── SCROLL REVEAL with REVERSE ANIMATION ── */
[data-reveal] {
  opacity: 0;
  transition: opacity 0.65s cubic-bezier(0.16, 0.84, 0.44, 1),
              transform 0.65s cubic-bezier(0.16, 0.84, 0.44, 1);
  will-change: opacity, transform;
}

/* ── ENTER states (element below viewport → scrolling UP into view) ── */
[data-reveal="up"]    { transform: translateY(46px); }
[data-reveal="left"]  { transform: translateX(-60px); }
[data-reveal="right"] { transform: translateX(60px); }
[data-reveal="scale"] { transform: scale(0.84); }

/* ── REVEALED (fully visible) ── */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ── EXIT states (element above viewport → scrolled past) ── */
[data-reveal].is-exited-up    { opacity: 0; transform: translateY(-36px); }
[data-reveal].is-exited-down  { opacity: 0; transform: translateY(46px); }
[data-reveal].is-exited-left  { opacity: 0; transform: translateX(-60px); }
[data-reveal].is-exited-right { opacity: 0; transform: translateX(60px); }
[data-reveal].is-exited-scale { opacity: 0; transform: scale(0.84); }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  [data-reveal].is-exited-up,
  [data-reveal].is-exited-down,
  [data-reveal].is-exited-left,
  [data-reveal].is-exited-right,
  [data-reveal].is-exited-scale {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* === styles from index.html === */

/* ============================================================
   RESET / BASE
   ============================================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-jakarta);
  background-color: var(--bg-warm-canvas);
  color: var(--text-main);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle at 10% 20%, rgba(226,196,149,0.12) 0%, transparent 60%),
    radial-gradient(circle at 90% 80%, rgba(200,70,40,0.05) 0%, transparent 70%);
  background-attachment: fixed;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

/* ============================================================
   MATERIAL SYMBOLS
   ============================================================ */

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;
}

/* ============================================================
   LAYOUT WRAPPERS
   ============================================================ */

.site-wrapper {
  flex-grow: 1;
}

/* ============================================================
   NAV
   ============================================================ */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgba(255,255,255,0.90);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(219,194,176,0.30);
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.nav-inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  width: 100%;
  padding: 16px var(--margin-mobile);
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--margin-desktop);
}

.nav-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Nav links */

.nav-link {
  cursor: pointer;
  color: var(--color-on-surface-variant);
  font-family: var(--font-jakarta);
  font-size: 14px;
  font-weight: 500;
  transition: color .3s ease;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active-link {
  color: #8f4e00;
  font-weight: 700;
}

.nav-sub-link {
  display: none;
}

/* CTA / Donate button */

.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-self: end;
}

.btn-donate {
  background: linear-gradient(to right, #8f4e00, #ff9933);
  color: #fff;
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 10px 24px;
  border-radius: var(--radius-full);
  border: none;
  cursor: pointer;
  transition: box-shadow .2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-donate:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
}

/* ============================================================
   HERO SECTION
   ============================================================ */

.hero {
  position: relative;
  width: 100%;
  min-height: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(to bottom,#ffd9a4,#fbe4c5,#f7e8d2,#feecd2,#f5ece0,#fbf8f5);
}

/* OM watermark */

.hero-om-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}

.hero-om-glyph {
  font-family: var(--font-garamond);
  font-size: 420px;
  color: rgba(143, 78, 0, 0.045);
  line-height: 1;
}

/* Hero main content */

.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  padding: 64px var(--margin-mobile) 40px;
  max-width: 896px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-inline: var(--margin-desktop);
}

/* Eyebrow pill */

.hero-eyebrow-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(200,169,110,.50);
  background-color: rgba(255,255,255,.70);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: var(--radius-full);
  padding: 8px 20px;
  margin-bottom: 32px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

.hero-eyebrow-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  display: inline-block;
}

.hero-eyebrow-text {
  font-family: var(--font-jakarta);
  font-size: 11px;
  color: var(--color-secondary);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
}

/* Headline */

.hero-headline {
  font-family: var(--font-garamond);
  font-size: 52px;
  /* text-5xl */
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 16px;
  font-weight: 700;
}


/* sm:text-6xl */

/* md:text-7xl */

/* Sub-headline */

.hero-subheadline {
  font-family: var(--font-garamond);
  font-size: 24px;
  color: var(--color-secondary);
  font-style: italic;
  margin-bottom: 20px;
}

/* Body copy */

.hero-body {
  font-family: var(--font-jakarta);
  color: var(--color-on-surface-variant);
  font-size: 16px;
  line-height: 1.6;
  max-width: 672px;
  margin-inline: auto;
  margin-bottom: 24px;
}

/* Quote box */

.hero-quote-box {
  border: 1px solid rgba(200, 169, 110, 0.45);
  border-radius: var(--radius-lg);
  padding: calc(var(--unit) * 1.5) calc(var(--unit) * 3);
  background-color: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(4px);
  max-width: 608px;
  margin-inline: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin-bottom: 32px;
}

.hero-quote-text {
  font-family: var(--font-garamond);
  color: var(--color-on-surface-variant);
  font-style: italic;
  font-size: 18.4px;
}

/* Fact badges row */

.hero-facts-row {
  max-width: 896px;
  margin-inline: auto;
  padding: 16px var(--margin-mobile);
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.hero-fact-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 40px;
  white-space: nowrap;
}

.hero-fact-icon {
  flex-shrink: 0;
}

.hero-fact-text {
  font-family: var(--font-jakarta);
  font-size: 12.5px;
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

.hero-fact-divider {
  width: 1px;
  height: 20px;
  background-color: var(--color-outline-variant);
  flex-shrink: 0;
}

/* Shri Ram stamp */

.hero-stamp {
  position: relative;
  z-index: 10;
  padding-block: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.hero-stamp-icon {
  color: #c8a96e;
  font-size: 18px;
}

.hero-stamp-text {
  font-family: var(--font-garamond);
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.15em;
}

/* ============================================================
   FOOTER
   ============================================================ */

.site-footer {
  background-color: var(--color-surface-variant);
  width: 100%;
  border-top: 2px solid #fed65b;
  margin-top: auto;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px var(--margin-mobile);
  padding-inline: var(--margin-desktop);
  flex-direction: row;
  gap: 16px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.footer-copy {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: rgba(85,67,54,.80);
}

.footer-dedication {
  font-family: var(--font-garamond);
  font-size: 14px;
  font-style: italic;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 4px;
}


  .divider {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 0;
  }
  .divider-line {
    height: 1px;
    width: 96px;
    background: linear-gradient(to right, transparent, #b8860b, transparent);
  }
  .divider-symbol {
    color: #b8860b;
    font-size: 22px;
    margin: 0 16px;
    line-height: 1;
    user-select: none;
  }


/* === styles from panchang.html === */

/* NAV */

/* HERO */

.hero-watermark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
}

.hero-watermark-glyph {
  font-family: var(--font-garamond);
  font-size: 260px;
  font-weight: 700;
  color: rgba(143,78,0,0.055);
  line-height: 1;
  letter-spacing: -.04em;
}





/* FOOTER */

/* === styles from panchang.html === */

.panchang-body {
  background-color: #FAF7F2;
  background-image: radial-gradient(#F0E8DD 1px, transparent 1px);
  background-size: 28px 28px;
  color: #2D241E;
  font-family: 'Poppins', 'Noto Serif Devanagari', serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 20px 60px 20px;
}

.container {
  width: 100%;
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
}

/* === styles from panchang.html === */

.header-section {
  text-align: center;
  margin-bottom: 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pill-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #FFF8ED;
  border: 1.5px solid #F1C88E;
  color: #9E4200;
  padding: 8px 20px;
  border-radius: 9999px;
  font-size: 13.76px;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(184, 83, 14, 0.08);
  margin-bottom: 22px;
}

.pill-badge svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.main-title {
  font-family: var(--font-garamond);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  letter-spacing: -0.5px;
  margin-bottom: 4px;
}

.primary-subtitle {
  font-family: 'Noto Serif Devanagari', 'Poppins', serif;
  font-size: 17.92px;
  color: #5C4D43;
  font-weight: 500;
  max-width: 860px;
  line-height: 1.6;
  margin-bottom: 6px;
}

.secondary-subtitle {
  font-family: 'Cinzel', 'Poppins', serif;
  font-size: 15.68px;
  color: #7D6B5C;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* === styles from panchang.html === */

.section-title-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 12px;
}

.section-icon-box {
  width: 48px;
  height: 48px;
  background-color: #F8DFC8;
  border: 1px solid #ECD0B3;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #C05621;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(192, 86, 33, 0.12);
}

.section-icon-box svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.section-icon-box-circle {
  width: 46px;
  height: 46px;
  background-color: #F8E2AC;
  border: 1px solid #ECD394;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #7E4F06;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(184, 115, 14, 0.15);
}

.section-icon-box-circle svg {
  width: 24px;
  height: 24px;
}

.section-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.section-kicker {
  font-size: 12.16px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #9C4100;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-kicker span {
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #C05621;
}

.section-heading {
  font-family: var(--font-garamond);
  font-size: 37.6px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 8px;
}



/* === styles from panchang.html === */

.months-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.month-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 16px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-shadow: 0 4px 14px rgba(140, 110, 75, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
}

.month-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(158, 66, 0, 0.08);
  border-color: #DEC8A9;
}

.card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.index-pill {
  background: #FDF4E7;
  color: #9C4100;
  font-size: 12.16px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #F5DEBF;
  letter-spacing: 0.2px;
}

.season-pill {
  font-size: 11.84px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* Seasonal Color Tints */

.season-spring {
  background-color: #EDF7EE;
  color: #2D6A4F;
  border: 1px solid #C7E8CA;
}

.season-summer {
  background-color: #FEF6E9;
  color: #B45309;
  border: 1px solid #FBDDA7;
}

.season-monsoon {
  background-color: #EDF6FC;
  color: #1D4ED8;
  border: 1px solid #CCE5FB;
}

.season-autumn {
  background-color: #FCF4EB;
  color: #C05621;
  border: 1px solid #F6D7BC;
}


.season-winter {
  background-color: #F1F5F9;
  color: #475569;
  border: 1px solid #CBD5E1;
}


.card-title {
  font-family: var(--font-garamond);
  font-size: 21.6px;
  font-weight: 700;
  color: #7f1d1d;
  margin-bottom: 2px;
  line-height: 1.25;
}

.card-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 12.8px;
  color: var(--text-muted);
  line-height: 1.45;
  font-weight: 400;
  margin-bottom: 12px;
  flex-grow: 1;
}

/* === styles from panchang.html === */

.anga-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.anga-card {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 14px;
  padding: 22px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 4px 14px rgba(140, 110, 75, 0.05);
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.anga-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 22px rgba(158, 66, 0, 0.08);
}


.anga-ordinal {
  font-size: 12.8px;
  font-weight: 600;
  color: #8C541D;
  margin-bottom: 6px;
  font-family: 'Noto Serif Devanagari', serif;
}

.anga-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 20px;
  font-weight: 700;
  color: #8F3B00;
  margin-bottom: 12px;
  line-height: 1.3;
}


.anga-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 13.12px;
  color: #4A3E36;
  line-height: 1.55;
  font-weight: 400;
  margin-bottom: 20px;
  flex-grow: 1;
}

.anga-badge-wrap {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: auto;
}

.anga-badge {
  background-color: #FCEFD5;
  color: #8C4705;
  font-size: 11.84px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 9999px;
  display: inline-block;
  letter-spacing: 0.2px;
}


/* === styles from panchang.html === */

/* === styles from mandir.html === */

/* NAV */

/* HERO */

/* Eyebrow pill — icon variant */


/* FOOTER */

/* ─── SHARED ─── */

.section-inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 64px var(--margin-mobile) 40px;
  padding-inline: var(--margin-desktop);
}

.section-header {
  text-align: center;
  margin-bottom: 12px;
  max-width: 768px;
  margin-inline: auto;
}

.section-title {
  font-family: var(--font-garamond);
  font-size: 37.6px;
  font-weight: 700;
  color: #521c08;
  line-height: var(--lh-headline-lg);
  margin-bottom: 12px;
  text-align: center;
  letter-spacing: -0.01em;
}

.section-subtitle {
  font-family: var(--font-garamond);
  font-size: 14.08px;
  color: #715849;
  max-width: 680px;
  margin-inline: auto;
  line-height: 1.65;
  font-style: italic;
  margin-bottom: 12px;
  text-align: center;
  margin: 0 auto 36px auto;
}

/* ─── STATS STRIP ─── */

.stats-strip {
  background: #ffffff;
  border-top: 1px solid rgba(219, 194, 176, 0.40);
  border-bottom: 1px solid rgba(219, 194, 176, 0.40);
}

.stats-inner {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 0 var(--margin-mobile);
  padding-inline: var(--margin-desktop);
}

.stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5.6px;
  padding: 28px 16px;
  border-right: 1px solid rgba(219, 194, 176, 0.30);
  text-align: center;
}

.stat-card:last-child {
  border-right: none;
}

.stat-icon {
  font-size: 22.4px;
  color: var(--color-primary);
  font-variation-settings: 'FILL' 0;
}

.stat-value {
  font-family: var(--font-garamond);
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1;
}

.stat-label {
  font-family: var(--font-jakarta);
  font-size: 10.4px;
  letter-spacing: 0.08em;
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  font-weight: 600;
}

/* ─── ARCHITECTURE SECTION ─── */

.arch-section {
  background: #fdf8f3;
}

.arch-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.arch-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid rgba(219, 194, 176, 0.25);
}

.arch-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.arch-card-icon .material-symbols-outlined {
  font-size: 19.2px;
}

.arch-icon-pink {
  background: #fce7e7;
  color: #b91c1c;
}

.arch-icon-pink .material-symbols-outlined {
  color: #b91c1c;
}

.arch-icon-yellow {
  background: #fef3c7;
}

.arch-icon-yellow .material-symbols-outlined {
  color: #92400e;
}

.arch-icon-red {
  background: #fee2e2;
}

.arch-icon-red .material-symbols-outlined {
  color: #b91c1c;
}

.arch-card-title {
  font-family: var(--font-garamond);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-primary);
  line-height: 1.2;
}

.arch-card-body {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
  flex: 1;
}

.arch-card-footer {
  display: flex;
  align-items: center;
  gap: 6.4px;
  padding-top: 16px;
  border-top: 1px solid rgba(219, 194, 176, 0.30);
  margin-top: auto;
}

.arch-footer-icon {
  font-size: 14.4px;
  color: var(--color-secondary);
}

.arch-footer-text {
  font-family: var(--font-jakarta);
  font-size: 11.2px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--color-secondary);
  text-transform: uppercase;
}

/* ─── ENGINEERING SECTION ─── */

.eng-section {
  background: #ffffff;
}

.eng-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.eng-card {
  border: 1px solid rgba(219, 194, 176, 0.40);
  border-radius: 20px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eng-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.eng-card-icon .material-symbols-outlined {
  font-size: 20.8px;
}

.eng-icon-yellow {
  background: #fef3c7;
}

.eng-icon-yellow .material-symbols-outlined {
  color: #92400e;
}

.eng-icon-red {
  background: #fee2e2;
}

.eng-icon-red .material-symbols-outlined {
  color: #b91c1c;
}

.eng-card-label {
  font-family: var(--font-jakarta);
  font-size: 10.4px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--color-secondary);
}

.eng-card-title {
  font-family: var(--font-garamond);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.eng-card-body {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--color-on-surface-variant);
  line-height: 1.65;
}

.eng-check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid rgba(219, 194, 176, 0.30);
}

.eng-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-family: var(--font-jakarta);
  font-size: 12.8px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.eng-check {
  font-size: 16px;
  color: #16a34a;
  flex-shrink: 0;
  font-variation-settings: 'FILL' 1;
}

/* ─── FIVE MANDAPAS ─── */

.mandapa-section {
  background: #fdf8f3;
}

.mandapa-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.mandapa-card {
  background: #ffffff;
  border: 1px solid rgba(219,194,176,0.5);
  border-radius: var(--radius-xl);
  padding: 26.4px;
  display: flex;
  flex-direction: column;
  gap: 9.6px;
  transition: all 0.2s ease;
}

.mandapa-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.mandapa-num {
  display: inline-block;
  background: #fef3c7;
  color: var(--color-primary-container);
  font-family: var(--font-garamond);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 8px;
}

.mandapa-icon {
  font-size: 20.8px;
  color: var(--color-secondary);
}

.mandapa-name {
  font-family: var(--font-garamond);
  font-size: 22px;
  font-weight: 700;
  color: var(--color-primary);
}

.mandapa-body {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
  flex: 1;
}

.mandapa-meta {
  font-family: var(--font-jakarta);
  font-size: 10.4px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(85, 67, 54, 0.55);
  font-weight: 600;
  padding-top: 12px;
  border-top: 1px solid rgba(219, 194, 176, 0.30);
  margin-top: auto;
}

/* ─── SURYA TILAK ─── */

.surya-section {
  background: #ffffff;
}

.surya-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}

.surya-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.surya-eye-icon {
  font-size: 16px;
  color: var(--color-secondary);
}

.surya-eye-text {
  font-family: var(--font-jakarta);
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.surya-title {
  font-family: var(--font-garamond);
  font-size: 36px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  margin-bottom: 20px;
}

.surya-body {
  font-family: var(--font-jakarta);
  font-size: 15px;
  color: var(--color-on-surface-variant);
  line-height: 1.65;
  margin-bottom: 32px;
}

.surya-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.surya-steps li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.surya-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fef3c7;
  color: #92400e;
  font-family: var(--font-jakarta);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.surya-steps strong {
  display: block;
  font-family: var(--font-jakarta);
  font-size: 15px;
  font-weight: 700;
  color: #1a1c1c;
  margin-bottom: 5.6px;
}

.surya-steps p {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
}

/* Surya right card */

.surya-card {
  border: 1.5px solid #c8a96e;
  border-radius: 20px;
  padding: 32px 28px;
  background: #fffdf8;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.surya-card:hover {
  box-shadow: 0 8px 24px rgba(143, 78, 0, 0.12);
  transform: translateY(-3px);
}

.surya-card-sun {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.surya-card-label {
  font-family: var(--font-jakarta);
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  text-align: center;
  margin-bottom: 8px;
}

.surya-card-title {
  font-family: var(--font-garamond);
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
  text-align: center;
  margin-bottom: 12px;
}

.surya-card-sub {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--color-on-surface-variant);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
}

.surya-table {
  border-top: 1px solid rgba(200, 169, 110, 0.35);
  display: flex;
  flex-direction: column;
}

.surya-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(200, 169, 110, 0.25);
  gap: 16px;
}

.surya-row-key {
  font-family: var(--font-jakarta);
  font-size: 12.8px;
  color: rgba(85, 67, 54, 0.65);
}

.surya-row-val {
  font-family: var(--font-jakarta);
  font-size: 12.8px;
  font-weight: 600;
  color: #1a1c1c;
  text-align: right;
}

/* ─── GARBHAGRIHA ─── */

.garb-section {
  background: #fdf8f3;
}

.garb-inner {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 64px;
  align-items: center;
}

.garb-eyebrow {
  font-family: var(--font-jakarta);
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 16px;
}

.garb-title {
  font-family: var(--font-garamond);
  font-size: 40px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.15;
  margin-bottom: 16px;
}

.garb-subtitle {
  font-family: var(--font-jakarta);
  font-size: 15px;
  color: var(--color-on-surface-variant);
  line-height: 1.65;
}

.garb-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.garb-card {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: #ffffff;
  border: 1px solid rgba(219, 194, 176, 0.30);
  border-radius: 16px;
  padding: 24px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.garb-card:hover {
  box-shadow: 0 8px 24px rgba(143, 78, 0, 0.10);
  transform: translateY(-3px);
}

.garb-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.garb-card-icon .material-symbols-outlined {
  font-size: 19.2px;
}

.garb-icon-brown {
  background: #fde8d8;
}

.garb-icon-brown .material-symbols-outlined {
  color: #8f4e00;
}

.garb-icon-amber {
  background: #fef3c7;
}

.garb-icon-amber .material-symbols-outlined {
  color: #92400e;
}

.garb-icon-yellow {
  background: #fefce8;
}

.garb-icon-yellow .material-symbols-outlined {
  color: #a16207;
}

.garb-card-title {
  font-family: var(--font-garamond);
  font-size: 18px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 5.6px;
}

.garb-card-text {
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
}

/* ─── PARKOTA ─── */

.parkota-section {
  background: #fdf8f3;
}

.parkota-section .section-inner {
  padding-top: 0;
}

.parkota-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.parkota-card {
  background: #ffffff;
  border: 1px solid rgba(219, 194, 176, 0.30);
  border-radius: 16px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow 0.2s ease;
}

.parkota-card:hover {
  box-shadow: 0 4px 16px rgba(143, 78, 0, 0.08);
}

.parkota-card-num {
  width: 40px;
  height: 40px;
  background: #fef3c7;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-garamond);
  font-size: 20px;
  font-weight: 700;
  color: #92400e;
  flex-shrink: 0;
}

.parkota-card-title {
  font-family: var(--font-garamond);
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.parkota-card-text {
  font-family: var(--font-jakarta);
  font-size: 13px;
  color: var(--color-on-surface-variant);
  line-height: 1.65;
}

/* ─── TIMINGS ─── */

.timings-section {
  background: #ffffff;
}

.timings-section .section-inner {
  padding-top: 64px;
}

.timings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.timings-card {
  border: 1.5px solid rgba(200, 169, 110, 0.50);
  border-radius: 20px;
  padding: 28px;
  background: #fffdf8;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timings-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.timings-card-sub {
  font-family: var(--font-garamond);
  font-size: 12.8px;
  color: var(--color-on-surface-variant);
  font-style: italic;
  margin-bottom: 4px;
}

.timings-card-title {
  font-family: var(--font-garamond);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
}

.timings-card-badge {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fef3c7;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}


.darshan-slots {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.darshan-slot {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f9f9f9;
  border: 1px solid rgba(219, 194, 176, 0.25);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-jakarta);
  font-size: 14px;
  color: #1a1c1c;
  font-weight: 500;
}

.slot-icon {
  font-size: 16px;
  color: var(--color-secondary);
}




.aarti-slots {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.aarti-slot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  border-radius: 12px;
  padding: 16px 20px;
  border-left: 3px solid transparent;
}

.aarti-slot-yellow {
  background: #fffbeb;
  border-left-color: #f59e0b;
}

.aarti-slot-green {
  background: #f0fdf4;
  border-left-color: #22c55e;
}

.aarti-slot-red {
  background: #fff5f5;
  border-left-color: #ef4444;
}

.aarti-slot-left {
  flex: 1;
}

.aarti-name {
  font-family: var(--font-jakarta);
  font-size: 15px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.aarti-desc {
  font-family: var(--font-jakarta);
  font-size: 12.8px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

.aarti-time {
  font-family: var(--font-jakarta);
  font-size: 12px;
  font-weight: 700;
  padding: 5.6px 12px;
  border-radius: var(--radius-full);
  white-space: nowrap;
  flex-shrink: 0;
}

.aarti-time-yellow {
  background: #fef3c7;
  color: #92400e;
}

.aarti-time-green {
  background: #dcfce7;
  color: #166534;
}

.aarti-time-red {
  background: #fee2e2;
  color: #b91c1c;
}

.timings-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, 0.30);
  border-radius: 10px;
  padding: 12px 16px;
  font-family: var(--font-jakarta);
  font-size: 12.8px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
  margin-top: auto;
}

/* === styles from ayodhya.html === */

/* ================= NAV ================= */

/* ================= HERO ================= */


/* ================= CONTAINER & HEADINGS ================= */

.section-container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 64px var(--margin-desktop) 40px;
}

.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 5.6px;
  color: var(--color-secondary);
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.section-desc {
  font-family: var(--font-jakarta);
  color: var(--color-on-surface-variant);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  font-weight: var(--fw-body-md);
}

/* ================= 3 PILLARS / WELCOME ================= */

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 28px;
}

.feature-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.45);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(143, 78, 0, 0.08);
}

.card-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: #fdf3e7;
  border: 1px solid rgba(200, 169, 110, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.card-badge {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  text-transform: uppercase;
  letter-spacing: var(--ls-label-caps);
  color: var(--color-secondary);
  margin-bottom: 6.4px;
}

.card-text {
  font-size: 14.4px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  flex-grow: 1;
}

/* ================= STORY / DHARMA VALUES ================= */

.story-section {
  background-color: #FAF6EE;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.value-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: var(--radius-lg);
  padding: 28px;
  position: relative;
  overflow: hidden;
}

.value-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-primary-container));
}

.value-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-lg);
  background: #fdf5ea;
  color: var(--color-primary);
  font-family: var(--font-garamond);
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 13.6px;
}

.value-title {
  font-family: var(--font-garamond);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.value-subtitle {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  color: var(--color-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ls-label-caps);
  margin-bottom: 12px;
}

.value-desc {
  font-size: 14.08px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

/* ================= JANMBHOOMI & MANDIR HIGHLIGHT ================= */

.mandir-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
  align-items: stretch;
}

.mandir-block {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.45);
  border-radius: var(--radius-xl);
  padding: 36px;
  display: flex;
  flex-direction: column;
}

.mandir-block h3 {
  font-family: var(--font-garamond);
  font-size: 25.6px;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1.25;
}

.mandir-block p {
  font-size: 14.72px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  margin-bottom: 20px;
}

.spec-pills {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: auto;
  padding-top: 16px;
}

.spec-pill {
  background: #fdf7ee;
  border: 1px solid rgba(200, 169, 110, 0.35);
  border-radius: var(--radius-lg);
  padding: 12px;
  text-align: center;
}

.spec-pill-num {
  font-family: var(--font-garamond);
  font-size: 19.2px;
  font-weight: 700;
  color: var(--color-primary);
  display: block;
}

.spec-pill-label {
  font-size: 11.2px;
  color: var(--color-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ================= HERO QUOTE BOX ================= */

/* ================= PILGRIMAGE CIRCUIT ================= */

.circuit-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.circuit-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.45);
  border-radius: var(--radius-lg);
  padding: 28px;
  display: flex;
  flex-direction: column;
}

.circuit-tag {
  font-size: var(--fs-label-caps);
  font-weight: var(--fw-label-caps);
  color: var(--color-primary);
  letter-spacing: var(--ls-label-caps);
  text-transform: uppercase;
  margin-bottom: 8px;
}

.circuit-title {
  font-family: var(--font-garamond);
  font-size: 20.8px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 9.6px;
}

.circuit-desc {
  font-size: 14.08px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
  margin-bottom: 20px;
  flex-grow: 1;
}

.circuit-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 13.6px;
  border-top: 1px solid rgba(219, 194, 176, 0.35);
  font-size: 12.48px;
  color: var(--color-secondary);
  font-weight: 600;
}

/* ================= PILGRIM SERVICES ================= */

/* ================= SARAYU GRID ================= */

.sarayu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  max-width: var(--container-max);
  margin-inline: auto;
}

.sarayu-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.55);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.sarayu-card h3 {
  font-family: var(--font-garamond);
  font-size: 20.8px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.sarayu-card p {
  font-size: 14.4px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

/* ================= WHY VISIT GRID ================= */

.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.why-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.45);
  border-radius: 16px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}

.why-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: #fdf3e7;
  border: 1px solid rgba(200, 169, 110, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}

.why-card h3 {
  font-family: var(--font-garamond);
  font-size: 20px;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 4px;
}

.why-card p {
  font-size: 14.08px;
  line-height: 1.6;
  color: var(--color-on-surface-variant);
}

/* ================= TRANSPORT ================= */

.transport-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 864px;
  margin-inline: auto;
}

.transport-item {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.45);
  border-radius: 16px;
  padding: 20px 28px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.02);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.transport-item:hover {
  box-shadow: 0 8px 22px rgba(143, 78, 0, 0.10);
  transform: translateY(-3px);
}

.transport-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.transport-item h4 {
  font-family: var(--font-garamond);
  font-size: 19.2px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4px;
}

.transport-item p {
  font-size: 14.08px;
  line-height: 1.5;
  color: var(--color-on-surface-variant);
}

/* ================= FESTIVAL CARD FOOTER ================= */

.festival-footer {
  margin-top: 20px;
  padding-top: 13.6px;
  border-top: 1px solid rgba(219, 194, 176, 0.35);
  font-size: 12.8px;
  font-weight: 600;
  color: var(--color-primary);
  display: flex;
  align-items: center;
  gap: 5.6px;
}

/* ================= THREE PILLARS OF RAM RAJYA ================= */

.pillars-section {
  background-color: #FAF6EE;
}

.pillar-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.5);
  border-radius: var(--radius-xl);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.pillar-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fdf5e6;
  border: 1px solid rgba(200, 169, 110, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 20px;
}

.pillar-name {
  font-family: var(--font-garamond);
  font-size: 22.4px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 4.8px;
}

.pillar-subtitle {
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 16px;
}

.pillar-desc {
  font-size: 14.72px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  flex-grow: 1;
  margin-bottom: 24px;
}

.pillar-quote {
  border-top: 1px solid rgba(219, 194, 176, 0.4);
  padding-top: 16px;
  font-family: var(--font-garamond);
  font-style: italic;
  font-size: 14.72px;
  color: var(--color-on-surface-variant);
  line-height: 1.55;
}

/* ================= PILGRIM WALKWAYS ================= */

.walkways-section {
  background-color: #FAF6EE;
}

.walkway-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.5);
  border-radius: var(--radius-xl);
  padding: 28px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.walkway-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.walkway-tag {
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
}

.walkway-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
  background: #fdf5e6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.walkway-title {
  font-family: var(--font-garamond);
  font-size: 21.6px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 12px;
  line-height: 1.25;
}

.walkway-desc {
  font-size: 14.08px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  flex-grow: 1;
  margin-bottom: 20px;
}

.walkway-features {
  border-top: 1px solid rgba(219, 194, 176, 0.35);
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.walkway-feature {
  display: flex;
  align-items: center;
  gap: 9.6px;
  font-size: 13.12px;
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

.walkway-feature .material-symbols-outlined {
  font-size: 16px;
  color: var(--color-primary);
}

/* ================= CURATED ITINERARIES ================= */

.itinerary-section {
  background-color: #FAF6EE;
}

.itinerary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

.itinerary-card {
  background: var(--color-surface-container-lowest);
  border: 1px solid rgba(219, 194, 176, 0.5);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.itinerary-meta {
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 6.4px;
}

.itinerary-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.itinerary-title {
  font-family: var(--font-garamond);
  font-size: 24.8px;
  font-weight: 700;
  color: var(--color-on-surface);
  line-height: 1.2;
}

.itinerary-badge {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-primary-container);
  color: var(--color-on-primary);
  font-family: var(--font-jakarta);
  font-size: 12.8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.itinerary-tagline {
  font-size: 14.08px;
  color: var(--color-primary);
  line-height: 1.5;
  margin-bottom: 24px;
  font-weight: 500;
}

.itin-stop {
  display: flex;
  gap: 16px;
  padding-block: 13.6px;
  border-bottom: 1px solid rgba(219, 194, 176, 0.3);
}

.itin-stop:last-child {
  border-bottom: none;
}

.itin-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fdf5e6;
  border: 1px solid rgba(200, 169, 110, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.52px;
  font-weight: 700;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.itin-time {
  font-size: 11.52px;
  font-weight: 700;
  color: var(--color-secondary);
  margin-bottom: 2.4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.itin-stop-desc {
  font-size: 13.44px;
  color: var(--color-on-surface-variant);
  line-height: 1.55;
}

.itin-day-block {
  background: #f7f3ec;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 12px;
}

.itin-day-label {
  display: inline-flex;
  align-items: center;
  gap: 6.4px;
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-fixed-variant);
  border-radius: var(--radius);
  padding: 4px 9.6px;
  margin-bottom: 9.6px;
}

.itin-day-title {
  font-family: var(--font-garamond);
  font-size: 16.8px;
  font-weight: 700;
  color: var(--color-on-surface);
  margin-bottom: 9.6px;
}

.itin-day-item {
  display: flex;
  gap: 9.6px;
  font-size: 13.44px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
  margin-bottom: 7.2px;
}

.itin-day-item:last-child {
  margin-bottom: 0;
}

.itin-day-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 6px;
  flex-shrink: 0;
}

.itin-highlight {
  color: var(--color-primary);
  font-weight: 500;
}

/* ================= REST & REJUVENATE ================= */

.rest-section {
  background-color: #FAF6EE;
}

.rest-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gutter);
}

.rest-card {
  background: var(--color-surface-container-lowest);
  border: 2px solid rgba(219, 194, 176, 0.55);
  border-radius: var(--radius-xl);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.rest-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 8px;
}

.rest-tag {
  display: flex;
  align-items: center;
  gap: 5.6px;
  font-size: 11.2px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 5.6px;
}

.rest-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fdf5e6;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  flex-shrink: 0;
}

.rest-title {
  font-family: var(--font-garamond);
  font-size: 25.6px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 16px;
  line-height: 1.2;
}

.rest-desc {
  font-size: 14.72px;
  line-height: 1.65;
  color: var(--color-on-surface-variant);
  margin-bottom: 20px;
}

.rest-amenities-label {
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-on-surface-variant);
  margin-bottom: 9.6px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid rgba(219, 194, 176, 0.4);
}

.rest-amenity-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rest-amenity-pill {
  display: flex;
  align-items: center;
  gap: 5.6px;
  background: #f5f0e8;
  border: 1px solid rgba(200, 169, 110, 0.3);
  border-radius: var(--radius-full);
  padding: 4.8px 12px;
  font-size: 12.48px;
  color: var(--color-on-surface-variant);
  font-weight: 500;
}

.rest-amenity-pill .material-symbols-outlined {
  font-size: 13px;
  color: var(--color-primary);
}

/* ================= FOOTER ================= */

/* === styles from janmbhoomi.html === */

/* NAV */

/* HERO */

/* ── EXTENDED DESIGN TOKENS ── */

/* ── PAGE LAYOUT ── */

.page-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 56px var(--margin-mobile) 80px;
  padding-inline: var(--margin-desktop);
}

/* ── SECTION HEADER ── */

.section-tag .material-symbols-outlined {
  font-size: 15.2px;
  color: var(--color-primary);
}

.section-subheading {
  font-family: var(--font-jakarta);
  font-size: 15.68px;
  color: var(--color-on-surface-variant);
  max-width: 860px;
  margin: 0 auto;
  line-height: 1.65;
}

/* ── DIAMOND DIVIDER ── */







/* ── DEVOTIONAL CARD ── */

.devotional-card {
  background: #ffffff;
  border: 1px solid rgba(219,194,176,0.55);
  border-radius: var(--radius-xl);
  padding: 29.6px;
  position: relative;
  transition: all 0.25s ease;
  box-shadow: 0 2px 8px rgba(143,78,0,0.04);
}

.devotional-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(143,78,0,0.08);
  border-color: rgba(254,214,91,0.9);
}

.devotional-card.accent-top {
  border-top: 3px solid var(--color-primary-container);
}

.card-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, #fff2e0, #ffe1c2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
  margin-bottom: 20px;
  box-shadow: 0 2px 6px rgba(143,78,0,0.1);
}

.card-icon-badge .material-symbols-outlined {
  font-size: 22.4px;
  font-variation-settings: 'FILL' 1;
}

.card-category {
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 5.6px;
}

/* ── GRIDS ── */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 28px;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 24px;
}

/* ── GARBHAGRIHA ── */

/* ── MANDAPA CARDS ── */

.mandapa-card:hover {
  border-color: var(--color-primary-container);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(143,78,0,0.08);
}

/* ── CTA BOX ── */

/* ── RESPONSIVE ── */

/* FOOTER */

/* === styles from janmbhoomi.html === */

.chronicle-timeline {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  padding: 16px 0 32px;
}

.chronicle-timeline::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, transparent, rgba(143,78,0,.18) 5%, rgba(143,78,0,.25) 50%, rgba(143,78,0,.18) 95%, transparent);
  transform: translateX(-50%);
}

.chronicle-entry {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0 24px;
  align-items: start;
  margin-bottom: 56px;
  position: relative;
}

/* left side */

.chronicle-left {
  text-align: right;
}

.chronicle-right {
  text-align: left;
}

/* center dot */

.chronicle-dot-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.chronicle-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--color-primary);
  box-shadow: 0 0 0 4px rgba(143,78,0,.1);
  flex-shrink: 0;
  z-index: 1;
}

.chronicle-dot.highlight {
  background: var(--color-primary);
  box-shadow: 0 0 0 5px rgba(143,78,0,.15);
  width: 16px;
  height: 16px;
}

/* date badge */

.chronicle-date {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 10.4px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 10.4px;
  white-space: nowrap;
}

.chronicle-date.golden {
  background: var(--color-secondary-container);
  color: var(--color-on-secondary-container, #574500);
}

.chronicle-date.verdict {
  background: #b22b1d;
}

/* main card */

.chronicle-main h3 {
  font-family: var(--font-garamond);
  font-size: 24.8px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  margin-bottom: 8px;
}

.chronicle-main h3.red {
  color: #b22b1d;
}

.chronicle-main p {
  font-size: 13.76px;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
}

/* side note card */

.chronicle-note {
  background: #fff;
  border: 1px solid rgba(219,194,176,.6);
  border-radius: var(--radius-lg);
  padding: 16px 18.4px;
  margin-top: 4px;
}

.chronicle-note-label {
  font-size: 9.92px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: 6.4px;
}

.chronicle-note p {
  font-size: 13.12px;
  color: var(--color-on-surface-variant);
  line-height: 1.55;
  font-style: italic;
}

.chronicle-note .note-attr {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  margin-top: 6.4px;
  font-style: normal;
}

/* empty placeholder side */

/* === styles from patra.html === */

/* NAV */

/* HERO */

/* Eyebrow pill — icon variant */

/* Patra chips — the seven principal characters, not a numbered sequence */

.hero-patra-row {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 704px;
  margin-inline: auto;
  margin-bottom: 8px;
}

.patra-chip {
  font-family: var(--font-garamond);
  font-size: 15px;
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(200, 169, 110, 0.45);
  border-radius: var(--radius-full);
  padding: 6px 16px;
}

/* FOOTER */

/* ============================================================
   PATRA DETAIL SECTION (below Hero) — scoped under .patra-detail
   so its own typography/background rules never leak onto the
   site's 

/* === styles from kands.html === */

/* NAV */

/* HERO */

/* Eyebrow pill — icon variant */

/* Kand sequence — the seven books, in order */

.hero-kand-row {
  position: relative;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 768px;
  margin-inline: auto;
  margin-bottom: 8px;
}

.kand-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6.4px;
  font-family: var(--font-garamond);
  font-size: 15px;
  color: var(--color-primary);
  background-color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(200, 169, 110, 0.45);
  border-radius: var(--radius-full);
  padding: 6px 16px 6px 12px;
}

.kand-chip-number {
  font-family: var(--font-jakarta);
  font-size: 11px;
  font-weight: 700;
  color: var(--color-secondary);
}

/* FOOTER */

/* ============================================================
   KAND DETAIL SECTION (below Hero) — scoped under .manas-detail
   so its typography/background rules never leak onto the
   site's own 

/* === styles from ramcharitmanas.html === */

/* NAV */

/* HERO */

/* OM watermark — larger, centered */

/* Devanagari headline — large, bold */

.hero-headline-devanagari {
  font-family: var(--font-garamond);
  font-size: 88px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.1;
  margin-bottom: 20px;
}

/* ===== PAGE CONTENT SECTION ===== */

.page-content {
  background-color: #fbf9f4;
  color: #3b281c;
  width: 100%;
}

/* Typography & badges */

.badge-pill-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  background-color: #fcebd9;
  border: 1px solid #ebd0b5;
  border-radius: 9999px;
  font-size: 11.2px;
  font-weight: 700;
  color: #8c420b;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}

.center-wrapper {
  text-align: center;
}

/* Kand cards */

.kand-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}

.kand-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 12px;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 6px rgba(163, 119, 87, 0.04);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.kand-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(163, 119, 87, 0.08);
}

.numeric-pill {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background-color: #fffaf4;
  border: 1px solid #ebdccb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12.8px;
  font-weight: 700;
  color: #b45309;
}

.sopaan-badge {
  background-color: #f7f3ec;
  border: 1px solid #e7dcce;
  color: #7d6b5c;
  font-size: 10.88px;
  padding: 2px 8px;
  border-radius: 4px;
}

.kand-card-english {
  font-size: 10.4px;
  color: #a89a8f;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 14px;
}

.card-description {
  font-size: 12.32px;
  color: #5c4738;
  line-height: 1.6;
  flex-grow: 1;
  margin-bottom: 20px;
}

.card-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #f6efe6;
}

.read-more-link {
  color: #8c2a1a;
  font-size: 11.52px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.category-chip {
  background-color: #fdf6ec;
  color: #925f38;
  border: 1px solid #f0dfcb;
  font-size: 10.4px;
  padding: 3px 8px;
  border-radius: 4px;
}

.single-kand-wide {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 12px;
  padding: 24px 22px;
  box-shadow: 0 2px 6px rgba(163, 119, 87, 0.04);
  margin-bottom: 48px;
}

/* Character cards */

.character-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 60px;
}

.char-card {
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 10px;
  padding: 16px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 5px rgba(163, 119, 87, 0.03);
}

.char-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 12px;
  gap: 6px;
}

.char-name {
  font-family: var(--font-garamond);
  font-size: 18.4px;
  font-weight: 700;
  color: #27160c;
  line-height: 1.2;
}

.char-name-en {
  font-size: 10.4px;
  color: #8c7e75;
  margin-top: 1px;
}

.char-tag {
  font-size: 9.6px;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  font-weight: 500;
}

.tag-amber {
  background: #fff4db;
  color: #9a6700;
  border: 1px solid #f6dfab;
}





.tag-orange {
  background: #feede3;
  color: #9e4612;
  border: 1px solid #fad2bc;
}

.char-desc {
  font-size: 11.52px;
  color: #4b3d33;
  line-height: 1.55;
  margin-bottom: 16px;
  flex-grow: 1;
}

.char-footer {
  border-top: 1px solid #f6efe6;
  padding-top: 10px;
}

.char-footer-label {
  font-size: 10.4px;
  font-weight: 700;
  color: #852210;
  margin-bottom: 2px;
}

.char-footer-text {
  font-size: 10.88px;
  color: #5c4738;
  line-height: 1.45;
}

/* Bottom banner */

.bottom-banner {
  text-align: center;
}

.book-icon-wrapper {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #f2e2cf;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #923a10;
  margin-bottom: 14px;
  font-size: 16px;
}

.banner-title {
  font-family: var(--font-garamond);
  font-size: 24px;
  font-weight: 700;
  color: #3b1809;
  margin-bottom: 10px;
}

.banner-desc {
  font-size: 12.8px;
  color: #634f41;
  line-height: 1.65;
  max-width: 720px;
  margin: 0 auto;
}


.section-wrapper {
  margin-bottom: 12px;
  position: relative;
}

/* Section header */

.top-badge {
  display: inline-block;
  font-family: var(--font-jakarta);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-secondary);
  background-color: rgba(255, 153, 51, 0.10);
  padding: 4px 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(143, 78, 0, 0.18);
  margin-bottom: 10px;
}

.main-title span {
  font-weight: 500;
  font-size: 28.8px;
  color: #3a2a1a;
}

.intro-paragraph {
  font-family: var(--font-jakarta);
  font-size: 14.4px;
  color: var(--color-on-surface-variant);
  max-width: 760px;
  margin: 10px auto 0;
  line-height: 1.65;
}

/* Cards */

.custom-card {
  background: #ffffff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 10px rgba(143, 78, 0, 0.06);
  padding: 18px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
  display: flex;
  flex-direction: column;
}

.custom-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(143, 78, 0, 0.12);
  border-color: #c8a96e;
}

.tag-badge {
  font-size: 10.88px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 6px;
  display: inline-block;
  letter-spacing: 0.3px;
}

.tag-red {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}

.tag-green {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}

.tag-blue {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #bfdbfe;
}


.tag-english-alt {
  font-family: var(--font-jakarta);
  font-size: 11.2px;
  color: #8c8275;
  font-weight: 500;
}

.card-heading {
  font-family: var(--font-garamond);
  font-size: 18.4px;
  font-weight: 700;
  color: #1f1914;
  margin-bottom: 6px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.card-heading .en-title {
  font-size: 13.12px;
  font-weight: 500;
  color: #8c8275;
  font-family: var(--font-jakarta);
}

.card-body-text {
  font-family: var(--font-jakarta);
  font-size: 13.28px;
  color: var(--color-on-surface-variant);
  line-height: 1.6;
  flex-grow: 1;
}

.card-footer-quote {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-outline-variant);
  font-family: var(--font-jakarta);
  font-size: 12.16px;
  font-style: italic;
  color: var(--color-primary);
  font-weight: 600;
}

/* Grids */

.grid-5-col {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
}

.grid-4-col {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.grid-3-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

/* Purana cards */

.purana-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 8px rgba(143, 78, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.purana-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 16px rgba(143, 78, 0, 0.10);
}

.number-disc {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5efeb;
  color: var(--color-primary);
  border: 1px solid #e0d3c3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11.84px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  font-family: var(--font-jakarta);
}

.purana-content {
  flex: 1;
}

.purana-title {
  font-family: var(--font-garamond);
  font-size: 15.68px;
  font-weight: 700;
  color: #241d16;
  margin-bottom: 3px;
}

.purana-desc {
  font-family: var(--font-jakarta);
  font-size: 12.48px;
  color: var(--color-on-surface-variant);
  line-height: 1.5;
}

/* Epic cards */

.epic-card {
  background: #ffffff;
  border: 1px solid #decdb8;
  border-radius: 16px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 4px 16px rgba(180, 130, 80, 0.07);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.epic-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(180, 130, 80, 0.14);
  border-color: #cca575;
}

.epic-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 2px solid #fcd34d;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 24.8px;
  font-weight: 700;
  color: #92400e;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(180,83,9,0.15);
}

.epic-meta {
  display: inline-block;
  font-family: var(--font-jakarta);
  font-size: 11.52px;
  font-weight: 600;
  color: var(--color-primary);
  background: #fffbeb;
  padding: 3px 12px;
  border-radius: var(--radius-full);
  margin-bottom: 10px;
  border: 1px solid #fde68a;
}

.epic-name {
  font-family: var(--font-garamond);
  font-size: 22.4px;
  font-weight: 700;
  color: #2a2118;
  margin-bottom: 8px;
}

.epic-desc {
  font-family: var(--font-jakarta);
  font-size: 13.44px;
  color: var(--color-on-surface-variant);
  margin-bottom: 18px;
  line-height: 1.6;
}

.epic-quote-pill {
  background: #faf7f2;
  border: 1px solid #eae1d4;
  border-radius: 8px;
  padding: 7px 12px;
  font-family: var(--font-garamond);
  font-size: 12.8px;
  color: var(--color-primary);
  font-weight: 600;
  font-style: italic;
}

/* Navagraha numeral circle */

.graha-circle-symbol {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 23.2px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: 12px;
  border: 2px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}

/* Zodiac badge */

.zodiac-badge {
  font-size: 10.72px;
  padding: 2px 7px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* ============================================================
   FOOTER
   ============================================================ */

/* === styles from festivals.html === */

/* ── Mandir shell tokens ── */

/* ── NAV (mandir style) ── */

.nav-brand-logo {
  height: 36px;
  width: auto;
  display: block;
  object-fit: contain;
}

/* ── HERO (mandir style) ── */

/* ── Festival body ── */

.main-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.month-section {
  margin-bottom: 54px;
  scroll-margin-top: 40px;
}

.month-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg,#f7efe1 0%,#fff8eb 100%);
  border: 1px solid var(--gold-border);
  border-left: 6px solid var(--primary-ochre);
  border-radius: 10px;
  padding: 14px 22px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(145,93,31,.06);
}

.month-header-title-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.month-number-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-ochre);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(180,107,26,.35);
}

.month-title-hindi {
  font-family: var(--font-devanagari);
  font-size: 21.6px;
  font-weight: 700;
  color: var(--primary-maroon);
  letter-spacing: .02em;
}

.month-title-english {
  font-family: var(--font-heading);
  font-size: 20px;
  color: var(--text-main);
  font-weight: 600;
}

.month-season-badge {
  background-color: #fff;
  border: 1px solid var(--gold-border);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--primary-ochre);
  text-transform: uppercase;
  letter-spacing: .04em;
}

.cards-grid-4 {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  gap: 18px;
}

.card-festival {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 10px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: all .22s ease-in-out;
  box-shadow: var(--card-shadow);
  min-height: 185px;
  position: relative;
}

.card-festival:hover {
  transform: translateY(-3px);
  box-shadow: var(--card-shadow-hover);
  border-color: var(--primary-gold);
}

.card-header-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.tithi-tag {
  font-family: var(--font-devanagari);
  background-color: var(--bg-badge-tithi);
  color: var(--primary-maroon);
  font-size: 11.84px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #ebd9c3;
}

.observance-tag {
  font-size: 11.2px;
  color: var(--primary-ochre);
  font-weight: 600;
  text-transform: capitalize;
}

.card-title-group {
  margin-bottom: 8px;
}

.card-title-hindi {
  font-family: var(--font-devanagari);
  font-size: 16.8px;
  font-weight: 700;
  color: var(--primary-maroon);
  line-height: 1.3;
}

.card-title-english {
  font-family: var(--font-heading);
  font-size: 15.2px;
  font-weight: 600;
  color: var(--text-main);
  margin-top: 1px;
}

.card-footer {
  border-top: 1px dashed #efe6da;
  padding-top: 8px;
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11.52px;
  color: var(--text-light);
}

.card-footer-badge {
  font-weight: 600;
  color: var(--primary-ochre);
}

/* Highlights */

.highlights-section {
  margin-bottom: 50px;
  background: #fff;
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 6px 20px rgba(139,90,43,.06);
}

.highlights-title-group {
  text-align: center;
  margin-bottom: 24px;
}

.highlights-subtitle {
  font-family: var(--font-devanagari);
  font-size: 15.2px;
  font-weight: 700;
  color: var(--primary-ochre);
  letter-spacing: .05em;
  text-transform: uppercase;
}

.highlights-main-title {
  font-family: var(--font-heading);
  font-size: 26.4px;
  color: var(--primary-maroon);
  margin-top: 4px;
}

.highlight-card {
  background: linear-gradient(180deg,#fdfbf7 0%,#fffbf2 100%);
  border: 1px solid #ebd8bf;
  border-radius: 10px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(180,107,26,.05);
}

.highlight-badge-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.highlight-badge {
  font-family: var(--font-devanagari);
  background: #fbf2e3;
  color: var(--primary-ochre);
  border: 1px solid #e7cdab;
  padding: 2px 9px;
  border-radius: 4px;
  font-size: 11.52px;
  font-weight: 700;
}

.highlight-card-title {
  font-family: var(--font-heading);
  font-size: 18.4px;
  color: var(--primary-maroon);
  margin-bottom: 6px;
  font-weight: 700;
}

.highlight-card-p {
  font-size: 13.12px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
}

.highlight-bottom {
  border-top: 1px solid #efe3d2;
  padding-top: 8px;
  display: flex;
  justify-content: space-between;
  font-size: 11.84px;
  font-weight: 600;
  color: var(--primary-ochre);
}

/* Bottom panel */

.sacred-bottom-panel {
  margin-top: 50px;
  background: linear-gradient(145deg,#fffdfa 0%,#fdf5ea 100%);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 36px 28px;
  box-shadow: 0 8px 30px rgba(145,93,31,.08);
  position: relative;
  overflow: hidden;
}

.chaupai-box {
  text-align: center;
  padding: 18px 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ebd8c0;
}

.chaupai-title {
  font-family: var(--font-devanagari);
  font-size: 23.2px;
  font-weight: 700;
  color: var(--primary-maroon);
  line-height: 1.6;
  margin-bottom: 6px;
}

.chaupai-meaning {
  font-family: var(--font-heading);
  font-size: 15.2px;
  font-style: italic;
  color: var(--text-muted);
}

.darshan-aarti-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.info-pane {
  background: #fff;
  border: 1px solid #eddcc6;
  border-radius: 10px;
  padding: 20px;
}

.info-pane h4 {
  font-family: var(--font-heading);
  font-size: 17.6px;
  color: var(--primary-maroon);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.aarti-timing-list {
  list-style: none;
  padding: 0;
}

.aarti-timing-list li {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px dashed #f0e6d9;
  font-size: 13.6px;
}

.aarti-timing-list li:last-child {
  border-bottom: none;
}

/* ── FOOTER (mandir style) ── */

/* ===== MERGED SITE EXTRA STYLES ===== */

.page-section {
  display: none;
}

/* ── Remove all section & hero dividers ── */


/* ── Unified background: all pages use warm canvas (#FAF6EE) ── */

.arch-section,
.eng-section,
.mandapa-section,
.surya-section,
.garb-section,
.parkota-section,
.timings-section,
.panchang-body,
.site-wrapper,
.page-section > .site-wrapper,
.page-section {
  background: #FAF6EE !important;
  background-image: none !important;
}

.nav-links-scroll {
  display: flex;
  align-items: center;
  gap: 17.6px;
  flex-wrap: nowrap;
  justify-self: center;
}

/* ===== merged style block ===== */

/* left side */

/* center dot */

/* date badge */

/* main card */

/* side note card */

/* empty placeholder side */

/* ===== merged style block ===== */

.patra-intro-section {
  width: 100%;
  background: var(--bg-hero);
  position: relative;
  font-family: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', Georgia, serif;
  line-height: 1.6;
  color: var(--text-main);
}

.patra-content-section {
  width: 100%;
  background: var(--bg-hero);
  font-family: 'Noto Serif Devanagari', 'Tiro Devanagari Hindi', Georgia, serif;
  line-height: 1.6;
  color: var(--text-main);
  padding-bottom: 60px;
}

.patra-intro-section .watermark {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 110px;
  font-weight: 700;
  color: rgba(197, 155, 39, 0.06);
  pointer-events: none;
  user-select: none;
  font-family: 'Tiro Devanagari Hindi', serif;
  z-index: 0;
  line-height: 1;
}

/* Sub-hero intro + mahavakya */

.patra-page .detail-intro {
  text-align: center;
  padding: 44px 24px 8px;
  position: relative;
  z-index: 1;
}

.patra-page .detail-eyebrow {
  display: inline-block;
  background: #fde8bf;
  color: #78350f;
  font-size: 12.8px;
  font-weight: 600;
  padding: 4px 18px;
  border-radius: 50px;
  margin-bottom: 20px;
  letter-spacing: 0.5px;
  border: 1px solid #fed7aa;
}

.patra-page .detail-title {
  font-size: 38.4px;
  font-weight: 700;
  color: var(--primary-red);
  line-height: 1.25;
  margin-bottom: 8px;
  text-shadow: 0 1px 2px rgba(139, 29, 19, 0.1);
}

.patra-page .detail-subtitle {
  font-size: 18.4px;
  color: var(--secondary-maroon);
  font-weight: 500;
  margin-bottom: 16px;
  letter-spacing: 0.2px;
}

.patra-page .detail-lead {
  max-width: 780px;
  margin: 0 auto 28px;
  color: var(--text-muted);
  font-size: 16.32px;
  line-height: 1.7;
}

.patra-page .quote-box {
  max-width: 680px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid #ebd9c5;
  border-radius: 8px;
  padding: 16px 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.patra-page .quote-badge {
  font-size: 12.48px;
  color: var(--accent-amber);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.patra-page .quote-main {
  font-weight: 700;
  font-size: 18.4px;
  color: var(--primary-red);
  margin-bottom: 4px;
}

.patra-page .quote-sub {
  font-size: 15.2px;
  color: var(--text-muted);
  font-style: italic;
}

/* Section + grid layout */

.patra-page .content-container {
  max-width: var(--container-max, 1280px);
  margin-inline: auto;
  padding: 10px 48px 60px;
  position: relative;
  z-index: 1;
}

.patra-page .section-block {
  margin-top: 48px;
}

.patra-page .section-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 8px;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 8px;
}

.patra-page .section-title {
  font-size: 24.8px;
  color: #3b1b0b;
  font-weight: 700;
}

.patra-page .grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.patra-page .grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.patra-page .grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

/* Character cards */

.patra-page .char-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 22px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.patra-page .char-card:hover {
  box-shadow: 0 6px 16px rgba(115, 18, 11, 0.08);
  border-color: #dfcdb8;
}

.patra-page .card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 8px;
}

.patra-page .role-badge {
  display: inline-flex;
  align-items: center;
  background: #fdf3df;
  color: #854d0e;
  font-size: 11.52px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.3px;
  border: 0.5px solid #fef08a;
}

.patra-page .icon-badge {
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fffbeb;
  color: #d97706;
  border: 1px solid #fde68a;
  font-size: 12px;
  flex-shrink: 0;
}

.patra-page .card-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-red);
  margin-bottom: 10px;
  line-height: 1.35;
}

.patra-page .card-title .title-sub {
  color: #632212;
  font-weight: 600;
  font-size: 16.8px;
}

.patra-page .card-desc {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 14px;
}

.patra-page .virtues-wrap {
  margin-bottom: 14px;
}

.patra-page .virtues-title {
  font-size: 11.52px;
  font-weight: 700;
  color: #78350f;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.patra-page .pill-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.patra-page .virtue-pill {
  font-size: 11.68px;
  background: var(--tag-bg);
  color: #4b3621;
  padding: 2px 9px;
  border-radius: 4px;
  border: 1px solid var(--tag-border);
  font-weight: 500;
}

.patra-page .key-episode {
  font-size: 12.96px;
  color: #4a3b32;
  background: #fdfaf6;
  border-left: 3px solid var(--accent-gold);
  padding: 8px 12px;
  margin-bottom: 14px;
  border-radius: 0 4px 4px 0;
  line-height: 1.5;
}

.patra-page .key-episode strong {
  color: var(--primary-red);
  display: inline-block;
  margin-right: 4px;
}

.patra-page .card-banner {
  background: #fbf6ec;
  border: 1px solid #ebd9be;
  border-radius: 5px;
  padding: 8px 12px;
  font-size: 12.8px;
  color: #573719;
  line-height: 1.45;
}

.patra-page .card-banner strong {
  color: var(--primary-red);
  font-weight: 700;
}

.patra-page .sub-char-box {
  margin-top: 6px;
  padding: 6px 8px;
  background: #fcf9f2;
  border-radius: 4px;
  font-size: 13.12px;
}

/* Closing summary — a div, not a <footer>, so it never collides
   with the site's own <footer class="site-footer"> */

.patra-detail-summary {
  margin-top: 60px;
  padding: 36px 30px;
  background: #ffffff;
  border: 1px solid #ebdccb;
  border-radius: 10px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.patra-detail-summary .summary-eyebrow {
  font-size: 12.8px;
  color: var(--accent-amber);
  font-weight: 700;
  letter-spacing: 0.8px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.patra-detail-summary .summary-title {
  font-size: 26.4px;
  font-weight: 700;
  color: var(--primary-red);
  margin-bottom: 26px;
}

.patra-detail-summary .pillar-card {
  background: #fdfaf5;
  border: 1px solid #eee2cf;
  border-radius: 6px;
  padding: 18px 14px;
  text-align: center;
}

.patra-detail-summary .pillar-title {
  font-size: 16px;
  font-weight: 700;
  color: #4a1d13;
  margin-bottom: 8px;
  border-bottom: 1px dashed #dfceb7;
  padding-bottom: 6px;
}

.patra-detail-summary .pillar-desc {
  font-size: 12.8px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ── Khand (खंड) header bars — patra page ── */

.khand-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: linear-gradient(90deg, #f7efe1 0%, #fff8eb 100%);
  border: 1px solid var(--color-outline-variant, #dbc2b0);
  border-left: 6px solid var(--primary-red, #8b1d13);
  border-radius: 10px;
  padding: 14px 22px;
  margin-bottom: 22px;
  box-shadow: 0 2px 8px rgba(139, 29, 19, 0.06);
}

.khand-header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.khand-number-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-red, #8b1d13);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  box-shadow: 0 2px 6px rgba(139, 29, 19, 0.35);
  flex-shrink: 0;
}

.khand-category {
  display: block;
  font-size: 12.48px;
  font-weight: 700;
  color: #9a3412;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}

.khand-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--primary-red, #8b1d13);
  margin: 0;
  line-height: 1.2;
}

.khand-tagline-badge {
  background: #fff;
  border: 1px solid var(--color-outline-variant, #dbc2b0);
  border-radius: 20px;
  padding: 4px 14px;
  font-size: 12.8px;
  font-weight: 600;
  color: var(--accent-amber, #d97706);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

/* ===== merged style block ===== */

.manas-detail {
  background-color: var(--bg-warm-canvas);
  color: var(--text-body);
  font-family: 'Noto Serif Devanagari', Georgia, serif;
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
  padding: 40px var(--margin-mobile) 60px;
  width: 100%;
  padding-inline: var(--margin-desktop);
}

.manas-detail .main-container {
  max-width: var(--container-max, 1280px);
  margin: 0 auto;
}

/* Header + Stats */

.manas-detail .page-header {
  text-align: center;
  margin-bottom: 28px;
}

.manas-detail .badge-top {
  display: inline-block;
  padding: 4px 16px;
  background-color: #F8EFE0;
  color: var(--text-maroon);
  border: 1px solid var(--border-accent);
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.manas-detail .page-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--text-maroon);
  letter-spacing: -0.2px;
  margin-bottom: 8px;
  line-height: 1.3;
}

.manas-detail .page-subtitle {
  font-size: 14.5px;
  color: var(--text-muted);
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.6;
}

.manas-detail .stats-bar {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 24px 0 34px 0;
}

.manas-detail .stat-pill {
  background: #FFFFFF;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 10px 8px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.manas-detail .stat-pill .val {
  display: block;
  font-weight: 700;
  color: var(--text-maroon);
  font-size: 15px;
  margin-bottom: 2px;
}

.manas-detail .stat-pill .lbl {
  display: block;
  font-size: 12px;
  color: var(--text-muted);
}

/* Kand Cards */

.manas-detail .kand-card {
  background: var(--bg-card);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 24px 28px;
  margin-bottom: 28px;
  box-shadow: var(--shadow-sm);
  position: relative;
}

.manas-detail .kand-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--border-accent);
  padding-bottom: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
  gap: 12px;
}

.manas-detail .kand-title-area {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.manas-detail .kand-num-circle {
  width: 32px;
  height: 32px;
  background-color: var(--accent-saffron);
  color: #FFFFFF;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 2px 4px rgba(191, 76, 20, 0.3);
}

.manas-detail .kand-name {
  font-size: 22px;
  font-weight: 700;
  color: var(--text-brown-heading);
}

.manas-detail .kand-subtitle {
  font-size: 15px;
  color: #8C3A0F;
  font-weight: 500;
}

.manas-detail .kand-badges {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.manas-detail .chip-badge {
  background-color: var(--tag-bg);
  color: var(--tag-text);
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 14px;
  border: 1px solid rgba(194, 145, 57, 0.25);
  font-weight: 500;
  white-space: nowrap;
}

.manas-detail .narrative-grid {
  display: grid;
  grid-template-columns: 1fr 310px;
  gap: 22px;
  margin-bottom: 20px;
}

.manas-detail .narrative-left h4,
.manas-detail .narrative-right h4 {
  font-size: 14.5px;
  color: var(--accent-saffron);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}

.manas-detail .narrative-left p {
  font-size: 13.5px;
  color: #4A3E39;
  line-height: 1.7;
  text-align: justify;
}

.manas-detail .narrative-left p + p {
  margin-top: 10px;
}

.manas-detail .key-episodes-box {
  background-color: var(--bg-tinted-card);
  border: 1px solid #EFE4D6;
  border-radius: var(--radius-sm);
  padding: 14px 16px;
}

.manas-detail .key-episodes-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.manas-detail .key-episodes-box li {
  font-size: 13px;
  color: #55443E;
  margin-bottom: 7px;
  padding-left: 18px;
  position: relative;
  line-height: 1.45;
}

.manas-detail .key-episodes-box li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-gold);
  font-weight: 700;
  font-size: 12px;
}

.manas-detail .verse-card {
  background: var(--bg-verse);
  border: 1px solid #E8D3AB;
  border-left: 5px solid var(--accent-gold);
  border-radius: var(--radius-sm);
  padding: 18px 22px;
  margin-bottom: 18px;
  position: relative;
}

.manas-detail .verse-tag {
  position: absolute;
  top: 10px;
  right: 14px;
  background: #8F2D17;
  color: #FFFFFF;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.manas-detail .verse-text {
  font-size: 15.5px;
  font-weight: 600;
  color: #3C1E12;
  text-align: center;
  line-height: 1.8;
  margin-top: 4px;
  margin-bottom: 8px;
}

.manas-detail .verse-meaning {
  font-size: 13px;
  color: #69524A;
  line-height: 1.55;
  text-align: center;
  border-top: 1px dashed rgba(194, 145, 57, 0.35);
  padding-top: 8px;
}

.manas-detail .verse-meaning strong {
  color: var(--accent-saffron);
}

.manas-detail .attribute-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  border-top: 1px solid #F0E6DA;
  padding-top: 14px;
}

.manas-detail .attr-box {
  background: #FAF6EF;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border: 1px solid rgba(226, 201, 161, 0.4);
}

.manas-detail .attr-box .attr-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-maroon);
  margin-bottom: 4px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.manas-detail .attr-box .attr-content {
  font-size: 12.5px;
  color: #4D3B35;
  line-height: 1.45;
}

/* Parayan Section */

.manas-detail .parayan-wrapper {
  background: #FFFFFF;
  border: 1px solid var(--border-accent);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  margin-top: 40px;
  box-shadow: var(--shadow-md);
}

.manas-detail .section-headline-center {
  text-align: center;
  margin-bottom: 24px;
}

.manas-detail .section-headline-center h2 {
  font-size: 26px;
  font-weight: 700;
  color: var(--text-maroon);
  margin-bottom: 6px;
}

.manas-detail .section-headline-center p {
  font-size: 13.5px;
  color: var(--text-muted);
}

.manas-detail .parayan-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}

.manas-detail .parayan-card {
  background: #FCFAF6;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.manas-detail .parayan-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #EFE4D6;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.manas-detail .parayan-card-head h3 {
  font-size: 16px;
  color: var(--text-brown-heading);
  font-weight: 700;
}

.manas-detail .parayan-card-head .mini-tag {
  font-size: 11px;
  background: #F4E8D7;
  color: #8C3A0F;
  padding: 2px 7px;
  border-radius: 4px;
}

.manas-detail .parayan-card ul {
  list-style: none;
  padding: 0;
  font-size: 12.5px;
  color: #52423C;
  line-height: 1.6;
}

.manas-detail .parayan-card ul li {
  margin-bottom: 6px;
}

.manas-detail .parayan-card ul li strong {
  color: var(--text-maroon);
}

.manas-detail .ritual-box {
  background: #FFFDF9;
  border: 1px solid #EADBCE;
  border-radius: var(--radius-md);
  padding: 20px;
  margin-bottom: 28px;
}

.manas-detail .ritual-box h4 {
  font-size: 16px;
  color: var(--text-maroon);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.manas-detail .rules-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.manas-detail .rule-card {
  background: #FAF5ED;
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(226, 201, 161, 0.4);
}

.manas-detail .rule-card .rule-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--accent-saffron);
  margin-bottom: 4px;
}

.manas-detail .rule-card p {
  font-size: 12px;
  color: #55443E;
  line-height: 1.45;
}

.manas-detail .phal-title {
  font-size: 16px;
  color: var(--text-brown-heading);
  margin-bottom: 14px;
  text-align: center;
  font-weight: 700;
}

.manas-detail .phal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 28px;
}

.manas-detail .phal-card {
  background: #FAF6F0;
  border: 1px solid #EFE5D8;
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 12px;
}

.manas-detail .phal-card strong {
  display: block;
  color: var(--text-maroon);
  margin-bottom: 3px;
  font-size: 12.5px;
}

.manas-detail .phal-card span {
  color: #5C4A42;
  line-height: 1.4;
  display: block;
}

.manas-detail .stuti-banner {
  background: linear-gradient(180deg, #FBF6EB 0%, #F5EBD7 100%);
  border: 2px solid var(--accent-gold);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  position: relative;
}

.manas-detail .stuti-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-maroon);
  margin-bottom: 14px;
  letter-spacing: 0.5px;
}

.manas-detail .stuti-verse {
  font-size: 14.5px;
  line-height: 1.9;
  color: #38241B;
  font-weight: 600;
  max-width: 820px;
  margin: 0 auto 14px auto;
}

.manas-detail .stuti-badge {
  display: inline-block;
  border: 1px solid var(--accent-saffron);
  color: var(--accent-saffron);
  background: #FFF8EE;
  font-size: 12.5px;
  font-weight: 600;
  padding: 3px 14px;
  border-radius: 16px;
}

/* Closing devotional line — a div, not a <footer>, so it never
   collides with the site's own <footer class="site-footer"> */



/* ============================================================
   RESPONSIVE — COMPREHENSIVE BREAKPOINTS
   ============================================================ */

/* ── Mobile hamburger button (hidden on desktop) ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid rgba(143,78,0,0.2);
  border-radius: 8px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.mobile-nav-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 2px solid rgba(219,194,176,0.4);
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  z-index: 100;
  padding: 12px 20px 16px;
  flex-direction: column;
  gap: 0;
}
.mobile-nav-menu.open { display: flex; }
.mobile-nav-menu .nav-link {
  padding: 10.4px 8px;
  border-bottom: 1px solid rgba(219,194,176,0.2);
  font-size: 15.2px;
}
.mobile-nav-menu .nav-link:last-child { border-bottom: none; }

/* Ensure site-nav is relative for mobile dropdown positioning */
.site-nav { position: sticky; top: 0; z-index: 50; }

/* ── Inline grid responsive helpers ── */
.rg-3-auto { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.rg-4-auto { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rg-5-auto { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; }
.rg-6-auto { display: grid; grid-template-columns: repeat(6, 1fr); gap: 24px; }

/* ── Tablet: 1025px – 1199px ── */
@media (max-width: 1199px) {
  .nav-inner { padding-inline: 32px; }
  .hero-content { padding-inline: 32px; }
  .section-inner { padding-inline: 32px; }
  .section-container { padding-inline: 32px; }
  .page-container { padding-inline: 32px; }
  .manas-detail { padding-inline: 32px; }
  .main-container { padding-inline: 32px; }
  .patra-page .content-container { padding-inline: 32px; }

  /* 6-col → 4-col */
  .stats-inner { grid-template-columns: repeat(4, 1fr); }
  .manas-detail .stats-bar,
  .rg-6-auto { grid-template-columns: repeat(4, 1fr); }

  /* 5-col → 3-col */
  .anga-grid,
  .grid-5-col,
  .rg-5-auto { grid-template-columns: repeat(3, 1fr); }

  /* 4-col → 3-col */
  .arch-cards,
  .parkota-grid,
  .grid-4,
  .sarayu-grid,
  .manas-detail .rules-grid-4,
  .manas-detail .phal-grid,
  .rg-4-auto { grid-template-columns: repeat(3, 1fr); }

  /* festival cards */
  .cards-grid-4 { grid-template-columns: repeat(3, 1fr); }
  .character-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Tablet: 769px – 1024px ── */
@media (max-width: 1024px) {
  .hero-headline { font-size: 40px; }
  .hero-headline-devanagari { font-size: 64px; }
  .garb-inner { grid-template-columns: 1fr; gap: 32px; }
  .surya-inner { grid-template-columns: 1fr; }

  /* Hide desktop donate, show fixed — removed */

  /* 6-col → 3-col */
  .stats-inner { grid-template-columns: repeat(3, 1fr); }
  .manas-detail .stats-bar,
  .rg-6-auto { grid-template-columns: repeat(3, 1fr); }

  /* 5-col → 3-col */
  .anga-grid,
  .grid-5-col,
  .rg-5-auto { grid-template-columns: repeat(3, 1fr); }

  /* 4-col → 2-col */
  .arch-cards,
  .parkota-grid,
  .grid-4,
  .sarayu-grid,
  .manas-detail .rules-grid-4,
  .manas-detail .phal-grid,
  .rg-4-auto { grid-template-columns: repeat(2, 1fr); }

  /* festival 4-col → 2-col */
  .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* 3-col → 2-col */
  .eng-cards,
  .mandapa-grid,
  .months-grid,
  .kand-grid,
  .grid-3,
  .values-grid,
  .circuit-grid,
  .rg-3-auto { grid-template-columns: repeat(2, 1fr); }

  .character-grid { grid-template-columns: repeat(3, 1fr); }
  .mandir-showcase { grid-template-columns: 1fr; }
  .rest-grid { grid-template-columns: 1fr; }
}

/* ── Mobile: ≤ 768px ── */
@media (max-width: 768px) {
  /* NAV: hide desktop links, show hamburger */
  .nav-links-scroll { display: none; }
  .nav-hamburger { display: flex; }
  .nav-actions .btn-donate { padding: 7.2px 14.4px; font-size: 10.88px; letter-spacing: 0.06em; }
  .nav-inner { padding-inline: 16px; gap: 8px; grid-template-columns: auto 1fr; }
  .nav-actions { justify-self: end; }

  /* HERO */
  .hero { min-height: auto; padding-block: 32px; }
  .hero-content { padding: 32px 16px 24px; }
  .hero-headline { font-size: 28px; line-height: 1.15; }
  .hero-subheadline { font-size: 17.6px; }
  .hero-headline-devanagari { font-size: 48px; }
  .hero-facts-row { flex-direction: column; align-items: flex-start; gap: 8px; padding-inline: 16px; }
  .hero-fact-item { padding-inline: 0; }
  .hero-fact-divider { display: none; }
  .hero-quote-box { margin-inline: 0; }
  .hero-om-glyph { font-size: 200px; }
  .hero-watermark-glyph { font-size: 130px; }

  /* SECTION WRAPPERS */
  .section-inner { padding-inline: 16px; padding-top: 40px; }
  .section-container { padding-inline: 16px; }
  .page-container { padding: 32px 16px; }
  .manas-detail { padding-inline: 16px; padding-block: 24px; }
  .main-container { padding: 24px 16px 48px; }
  .patra-page .content-container { padding-inline: 16px; }
  .panchang-body { padding-inline: 16px; }

  /* SECTION HEADINGS */
  .section-title { font-size: 26.4px; }
  .section-heading { font-size: 24px; }
  .section-subheading { font-size: 14.08px; }
  .main-title { font-size: 25.6px; }

  /* ALL GRIDS → 1 column */
  .stats-inner,
  .arch-cards,
  .eng-cards,
  .mandapa-grid,
  .parkota-grid,
  .months-grid,
  .kand-grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .values-grid,
  .circuit-grid,
  .timings-grid,
  .mandir-showcase,
  .rest-grid,
  .garb-inner,
  .surya-inner,
  .darshan-aarti-grid,
  .sarayu-grid,
  .why-grid,
  .rg-3-auto,
  .rg-4-auto,
  .rg-5-auto,
  .rg-6-auto { grid-template-columns: 1fr !important; }

  /* 2-col exceptions on mobile */
  .anga-grid { grid-template-columns: repeat(2, 1fr); }
  .character-grid { grid-template-columns: repeat(2, 1fr); }
  .cards-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .manas-detail .stats-bar { grid-template-columns: repeat(3, 1fr); }
  .manas-detail .rules-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .manas-detail .phal-grid { grid-template-columns: repeat(2, 1fr); }
  .patra-page .grid-2 { grid-template-columns: 1fr; }
  .patra-page .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .patra-page .grid-4 { grid-template-columns: repeat(2, 1fr); }

  /* SPEC PILLS */
  .spec-pills { grid-template-columns: repeat(2, 1fr); }

  /* CHRONICLE TIMELINE */
  .chronicle-timeline::before { display: none; }
  .chronicle-entry {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 32px;
  }
  .chronicle-left { text-align: left; }
  .chronicle-dot-col { display: none; }
  .chronicle-left, .chronicle-right { display: block; }

  /* NARRATIVE GRID in manas-detail */
  .manas-detail .narrative-grid { grid-template-columns: 1fr !important; }

  /* KAND CARD in manas-detail */
  .manas-detail .kand-header-row { flex-direction: column; align-items: flex-start; }

  /* HERO PATRA / KAND chips */
  .hero-patra-row, .hero-kand-row { gap: 6.4px; }
  .patra-chip, .kand-chip { font-size: 12.8px; padding: 4px 10px; }

  /* STATS STRIP */
  .stats-inner { gap: 0; }
  .stat-card { border-right: none; border-bottom: 1px solid rgba(219,194,176,0.3); }
  .stat-card:last-child { border-bottom: none; }

  /* FOOTER */
  .footer-inner { flex-direction: column; text-align: center; gap: 8px; padding-inline: 16px; }

  /* TRANSPORT */
  .transport-item { flex-direction: column; align-items: flex-start; gap: 12px; }

  /* AARTI SLOTS */
  .aarti-slot { flex-direction: column; align-items: flex-start; gap: 8px; }
  .aarti-time { align-self: flex-start; }

  /* ITIN */
  .itin-stop { flex-direction: column; gap: 8px; }

  /* GARB CARD */
  .garb-card { flex-direction: column; }

  /* MANDAPA TOP */
  .mandapa-top { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* MONTH HEADER BAR */
  .month-header-bar { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* KHAND HEADER BAR */
  .khand-header-bar { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* PATRA detail */
  .patra-detail-summary [style*="grid-template-columns"] { display: flex; flex-direction: column; }

  /* HERO STAMP */
  .hero-stamp { padding-block: 16px; }

  /* SECTION DIVIDER DIAMOND */
  
  

  /* DARSHAN SLOTS */
  .darshan-slots { gap: 6.4px; }

  /* HIGHLIGHTS */
  .highlights-section { padding: 20px 16px; }
  .darshan-aarti-grid { grid-template-columns: 1fr; }

  /* white-space nowrap protection */
  .season-pill, .kand-chip, .aarti-time { white-space: normal; }

  /* INLINE GRID OVERRIDES — panchang & other inline-styled grids */
  [data-purpose="nakshatra-grid"],
  [data-purpose="yogas-grid"],
  [data-purpose="chara-karana-grid"],
  [data-purpose="sthira-karana-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* AYODHYA — itinerary cards → 1 column */
  .itinerary-grid { grid-template-columns: 1fr !important; }

  /* PANCHANG — ayana / paksha / muhurta 2-col grid → 1 column */
  .pc-grid-2col { grid-template-columns: 1fr !important; }

  /* GRANTH — all named column grids → 1 column */
  .grid-3-col,
  .grid-4-col,
  .grid-5-col { grid-template-columns: 1fr !important; }
}

/* ── Small mobile: ≤ 480px ── */
@media (max-width: 480px) {
  .hero-headline { font-size: 22px; }
  .hero-headline-devanagari { font-size: 38.4px; }
  .hero-subheadline { font-size: 16px; }
  .hero-quote-box { padding: 12px 16px; }
  .hero-quote-text { font-size: 15.2px; }

  .section-title { font-size: 22.4px; }
  .section-heading { font-size: 20.8px; }

  /* Collapse remaining 2-col grids to 1 */
  .anga-grid,
  .character-grid,
  .cards-grid-4,
  .manas-detail .rules-grid-4,
  .manas-detail .phal-grid,
  .patra-page .grid-3,
  .patra-page .grid-4 { grid-template-columns: 1fr !important; }

  .manas-detail .stats-bar { grid-template-columns: repeat(2, 1fr); }

  /* Panchang grids */
  [data-purpose="nakshatra-grid"],
  [data-purpose="yogas-grid"],
  [data-purpose="chara-karana-grid"],
  [data-purpose="sthira-karana-grid"] {
    grid-template-columns: 1fr !important;
  }

  /* Month/Kand number circles */
  .month-number-circle, .khand-number-circle { width: 28px; height: 28px; font-size: 12px; }

  /* Festival card footer */
  .card-footer { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Nav brand logo */
  .nav-brand-logo { height: 28px; }

  /* Spec pills */
  .spec-pills { grid-template-columns: 1fr; }

  /* Chronicle note */
  .chronicle-note { padding: 12px; }

  /* Darshan slots */
  .darshan-slot { flex-direction: column; gap: 4px; }

  /* Eng check list */
  .eng-check-list li { font-size: 12px; }

  /* Anga card */
  .anga-card { padding: 20px 16px; }

  /* Patra card */
  .patra-page .char-card { padding: 16px; }

  /* Manas stats bar */
  .manas-detail .stats-bar { grid-template-columns: repeat(2, 1fr); }
}

/* ── Large desktop ≥ 1440px ── */
@media (min-width: 1440px) {
  .hero-headline { font-size: 64px; }
  .nav-inner,
  .stats-inner,
  .section-inner,
  .section-container,
  .page-container,
  .footer-inner { max-width: var(--container-max); margin-inline: auto; }
}

/* ============================================================
   HOME PAGE CARDS — .home-card system
   ============================================================ */

/* Base card */
.home-card {
  background: #fff;
  border: 1px solid #ebd8c8;
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: 0 4px 14px rgba(143,78,0,.04);
}

/* Large feature card (left column hero card) */
.home-card--large {
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Horizontal media card (icon + text side by side) */
.home-card--media {
  padding: 21.6px 22.4px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

/* Navigate/explore card (centered, clickable, with top accent border) */
.home-card--nav {
  padding: 26.4px 22.4px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.home-card--nav:hover {
  box-shadow: 0 8px 28px rgba(143,78,0,.12);
  transform: translateY(-2px);
}

/* Centered nav card (icon + title + desc centered) */
.home-card--nav-center {
  padding: 26.4px 20px;
  text-align: center;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
}
.home-card--nav-center:hover {
  box-shadow: 0 8px 28px rgba(143,78,0,.12);
  transform: translateY(-2px);
}

/* Value/pillar card (icon + label + title + body, stacked) */
.home-card--value {
  padding: 28px 24px;
}

/* Top accent border colours */
.home-card--accent-saffron { border-top: 3px solid #ff9933; }
.home-card--accent-gold    { border-top: 3px solid #f2ab1e; }
.home-card--accent-amber   { border-top: 3px solid #f1aa1b; }
.home-card--accent-red     { border-top: 3px solid #b22b1d; }
.home-card--accent-ochre   { border-top: 3px solid #d48b11; }
.home-card--accent-brown   { border-top: 3px solid #8f4e00; }

/* ── Home card icon circle ── */
.home-card-icon {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.home-card-icon--sm  { width: 40px; height: 40px; }
.home-card-icon--md  { width: 42px; height: 42px; }
.home-card-icon--lg  { width: 44px; height: 44px; }
.home-card-icon--xl  { width: 48px; height: 48px; }

/* Icon backgrounds */
.home-card-icon--orange  { background: #ffede0; }
.home-card-icon--yellow  { background: #fff2d9; }
.home-card-icon--amber   { background: #fff9e6; }
.home-card-icon--gold    { background: #fff8e1; }
.home-card-icon--red     { background: #fde8e5; }
.home-card-icon--warm    { background: #faede3; }
.home-card-icon--yellow2 { background: #fff3d9; }

/* ── Home card eyebrow / label ── */
.home-card-eyebrow {
  font-size: 10.88px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b86200;
  margin-bottom: 8px;
}
.home-card-eyebrow--red   { color: #b22b1d; }
.home-card-eyebrow--muted { font-size: 11.52px; font-weight: 600; color: #8c8275; margin-bottom: 3.2px; letter-spacing: .01em; }

/* ── Home card sub-label (small uppercase above title in media cards) ── */
.home-card-sublabel {
  font-size: 11.52px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #b86200;
  margin-bottom: 5.6px;
}
.home-card-sublabel--red { color: #b22b1d; }

/* ── Home card title ── */
.home-card-title {
  font-family: var(--font-garamond);
  font-weight: 700;
  color: #8f4e00;
  line-height: 1.25;
}
.home-card-title--hero   { font-size: 28px; margin-bottom: 16px; font-style: italic; }
.home-card-title--hero2  { font-size: 26.4px; margin-bottom: 16px; font-style: italic; }
.home-card-title--nav    { font-size: 21.6px; margin-bottom: 10.4px; }
.home-card-title--nav-sm { font-size: 21.6px; margin-bottom: 8px; }
.home-card-title--media  { font-size: 17.6px; margin-bottom: 5.6px; }
.home-card-title--value  { font-size: 19.2px; margin-bottom: 7.2px; }
.home-card-title--value2 { font-size: 20.8px; margin-bottom: 12px; color: #1a1c1c; }
.home-card-title--red    { color: #b22b1d; }

/* ── Home card body text ── */
.home-card-body {
  font-size: 14.08px;
  color: var(--color-on-surface-variant);
  line-height: 1.65;
}
.home-card-body--sm  { font-size: 13.28px; line-height: 1.55; }
.home-card-body--md  { font-size: 13.44px; line-height: 1.5; }
.home-card-body--nav { font-size: 14.08px; line-height: 1.55; margin-bottom: 0; }
.home-card-body--sec { font-size: 13.76px; line-height: 1.5; }

/* ── Nav card footer link ── */
.home-card-link {
  margin-top: 22.4px;
  padding-top: 13.6px;
  border-top: 1px dashed #e6d3c2;
  display: flex;
  align-items: center;
  gap: 7.2px;
  font-size: 12.16px;
  font-weight: 600;
  color: #8f4e00;
}
.home-card-link--red { color: #b22b1d; }

/* ── Icon margin for centered nav cards ── */
.home-card-icon--centered {
  margin: 0 auto 17.6px;
}

/* ── Inline stacked card wrapper for right-side two-card columns ── */
.home-card-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ============================================================
   PANCHANG INLINE CARD CLASSES (converted from inline styles)
   ============================================================ */

/* ── Section icon circles (sections 3-9) ── */
.pc-section-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 3px 8px rgba(184, 115, 14, 0.15);
}
.pc-section-icon-gold {
  width: 46px; height: 46px;
  background-color: #FDE8A0;
  border: 1px solid #F8DF8A;
  border-radius: 50%;
  color: #8C6D1F;
}
.pc-section-icon-orange {
  width: 46px; height: 46px;
  background-color: #F8DFC8;
  border: 1px solid #ECD0B3;
  border-radius: 50%;
  color: #8F3B00;
}
.pc-section-icon-brown {
  width: 44px; height: 44px;
  background-color: #B26A2E;
  border-radius: 50%;
  color: #FAF7F2;
  box-shadow: 0 3px 8px rgba(178, 106, 46, 0.25);
}
.pc-section-icon-yellow {
  width: 44px; height: 44px;
  background-color: #F8D879;
  border-radius: 50%;
  color: #8F5B00;
  box-shadow: 0 3px 8px rgba(184, 115, 14, 0.18);
}
.pc-section-icon-sun {
  width: 44px; height: 44px;
  background-color: #FCE8D5;
  border-radius: 50%;
  color: #B45309;
  box-shadow: 0 2px 8px rgba(184, 83, 14, 0.15);
}

/* ── Section kicker text ── */
.pc-kicker {
  font-size: 13px;
  font-weight: 700;
  color: #9C4100;
  letter-spacing: 0.5px;
}
.pc-heading {
  font-size: 26px;
  font-family: 'Noto Serif Devanagari', serif;
  font-weight: 700;
  color: #8F3B00;
  margin-top: 4px;
}

/* ── Grid wrappers ── */
.pc-grid-tithis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 24px;
}
.pc-grid-weekdays {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.pc-grid-nakshatra {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.pc-grid-yoga {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.pc-grid-karana {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 24px;
}
.pc-grid-ritu {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin-top: 24px;
}
.pc-grid-dikpala {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: 14px;
  margin-top: 20px;
}
.pc-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* ── Tithi card ── */
.panchang-card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 18px 16px;
  border: 1px solid #EFE8DC;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.04);
  display: flex;
  flex-direction: column;
  min-height: 140px;
}
.panchang-card-label {
  color: #B45309;
  font-size: 12px;
  font-weight: 600;
}
.panchang-card-label--red { color: #C0392B; }
.panchang-card-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 17px;
  font-weight: 700;
  color: #2C2218;
  margin: 4px 0 8px;
}
.panchang-card-title--red { color: #B91C1C; }
.panchang-card-desc {
  font-size: 12.5px;
  color: #5C5245;
  line-height: 1.5;
  font-family: 'Noto Serif Devanagari', sans-serif;
}
/* Tithi border highlight variant */
.panchang-card--highlighted {
  border: 1.5px solid #8B5E3C;
}

/* ── Weekday card ── */
.pc-weekday-card {
  background: #FFFFFF;
  border: 1px solid #ECE4D8;
  border-radius: 14px;
  padding: 18px 20px;
  box-shadow: 0 4px 14px rgba(140, 110, 75, 0.05);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-weekday-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.pc-weekday-name {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #8F3B00;
  margin: 0;
}
.pc-weekday-en {
  font-size: 12.5px;
  font-weight: 600;
  color: #8C541D;
}
.pc-weekday-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 13px;
  color: #4A3E36;
  line-height: 1.6;
  margin: 0;
}

/* ── Nakshatra card ── */
.pc-nakshatra-card {
  background: #FFFFFF;
  border: 1px solid #EBE3D5;
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-nakshatra-card--highlight {
  border: 1.5px solid #A8651E;
  box-shadow: 0 4px 14px rgba(168, 101, 30, 0.12);
}
.pc-nakshatra-num-wrap { margin-bottom: 8px; }
.pc-nakshatra-num {
  background: #FDF3E5;
  color: #9C4100;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #F5DEBF;
  display: inline-block;
}
.pc-nakshatra-num--gold {
  background: #FCEFD5;
  color: #8C4705;
  border-color: #F5DEBF;
}
.pc-nakshatra-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 15px;
  font-weight: 700;
  color: #2C2218;
  margin: 0 0 4px;
}
.pc-nakshatra-title--highlight { color: #9C4100; }
.pc-nakshatra-deity {
  font-size: 11.5px;
  font-weight: 600;
  color: #8C541D;
  margin-bottom: 8px;
}
.pc-nakshatra-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 11.5px;
  color: #4A3E36;
  line-height: 1.5;
  margin: 0;
}

/* ── Yoga card ── */
.pc-yoga-card {
  background: #FFFFFF;
  border: 1px solid #EBE3D5;
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-yoga-card--highlight {
  border: 1.5px solid #A8651E;
  box-shadow: 0 4px 14px rgba(168, 101, 30, 0.1);
}
.pc-yoga-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pc-yoga-num {
  background: #FDF3E5;
  color: #9C4100;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #F5DEBF;
  display: inline-block;
}
.pc-yoga-num--gold {
  background: #FCEFD5;
  color: #8C4705;
  border-color: #F5DEBF;
}
.pc-yoga-badge-ashubh {
  background: #FDE8E7;
  color: #B91C1C;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #FBCACA;
  display: inline-block;
}
.pc-yoga-badge-shubh {
  background: #EDF7EE;
  color: #2D6A4F;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #C7E8CA;
  display: inline-block;
}
.pc-yoga-badge-atishubh {
  background: #E6FFFA;
  color: #0D9488;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #99F6E4;
  display: inline-block;
}
.pc-yoga-badge-mishrit {
  background: #FEF3C7;
  color: #B45309;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  border: 1px solid #FDE68A;
  display: inline-block;
}
.pc-yoga-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 15px;
  font-weight: 700;
  color: #2C2218;
  margin: 0 0 4px;
}
.pc-yoga-title--highlight { color: #9C4100; }
.pc-yoga-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 11.5px;
  color: #4A3E36;
  line-height: 1.5;
  margin: 0;
}

/* ── Ritu (Season) card — same structure as nakshatra ── */
.pc-ritu-card {
  background: #FFFFFF;
  border: 1px solid #EBE3D5;
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-ritu-card--highlight {
  border: 1.5px solid #A8651E;
  box-shadow: 0 4px 14px rgba(168, 101, 30, 0.12);
}

/* ── Karana card ── */
.pc-karana-card {
  background: #FFFFFF;
  border: 1px solid #EBE3D5;
  border-radius: 14px;
  padding: 16px 14px;
  box-shadow: 0 2px 8px rgba(90, 60, 20, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-karana-card--highlight {
  border: 1.5px solid #A8651E;
  box-shadow: 0 4px 14px rgba(168, 101, 30, 0.12);
}

/* ── Dikpala (Direction) card ── */
.pc-dikpala-card {
  background: #FAF7F2;
  border: 1px solid #EBE2D3;
  border-radius: 14px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-dikpala-card--highlight {
  border: 1.5px solid #A8651E;
  box-shadow: 0 4px 14px rgba(168, 101, 30, 0.12);
}
.pc-dikpala-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.pc-dikpala-name {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 15px;
  font-weight: 700;
  color: #8F3B00;
  margin: 0;
}
.pc-dikpala-name--highlight { color: #9C4100; }
.pc-dikpala-badge {
  background: #FDF3E5;
  color: #9C4100;
  font-size: 10.5px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid #F5DEBF;
  display: inline-block;
}
.pc-dikpala-badge--gold {
  background: #FCEFD5;
  color: #8C4705;
  border-color: #F5DEBF;
}
.pc-dikpala-deity {
  font-size: 11.5px;
  font-weight: 600;
  color: #2D241E;
  margin-bottom: 10px;
}
.pc-dikpala-divider {
  border-top: 1px solid #EAE0D0;
  margin-bottom: 10px;
}
.pc-dikpala-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 11.5px;
  color: #4A3E36;
  line-height: 1.5;
  margin: 0;
}

/* ── Outer section wrapper (Ayana, Paksha, Kala containers) ── */
.pc-outer-box {
  background: #FFFFFF;
  border: 1px solid #ECE3D4;
  border-radius: 18px;
  padding: 28px 24px;
  margin-top: 28px;
  box-shadow: 0 4px 16px rgba(140, 110, 75, 0.04);
}
.pc-outer-box-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #F0E8DD;
}
.pc-outer-box-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 21px;
  font-weight: 700;
  color: #78350F;
  margin: 0 0 3px;
}
.pc-outer-box-subtitle {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 12.5px;
  color: #6B5E52;
  margin: 0;
}

/* ── Ayana / Paksha card (2-column inside outer-box) ── */
.pc-ayana-card {
  background: #FAF7F2;
  border: 1px solid #EBE2D3;
  border-left: 4px solid #78350F;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-ayana-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.pc-ayana-pill {
  background: #FCEFD5;
  color: #8C4705;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #F5DEBF;
  display: inline-block;
}
.pc-ayana-period {
  font-size: 12px;
  font-weight: 600;
  color: #78350F;
}
.pc-ayana-title {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 18px;
  font-weight: 700;
  color: #78350F;
  margin: 2px 0;
}
.pc-ayana-subtitle {
  font-size: 11.5px;
  font-style: italic;
  color: #7D6B5C;
  margin-bottom: 12px;
}
.pc-ayana-divider {
  border-top: 1px solid #EAE0D0;
  margin-bottom: 12px;
}
.pc-ayana-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 12px;
  color: #4A3E36;
  line-height: 1.6;
  margin: 0;
}

/* ── Muhurta / Kala cards (inside the 2-col Kala section) ── */
.pc-kala-col-auspicious {
  background: #FAF7F2;
  border: 1px solid #E2EEDF;
  border-left: 4px solid #2D6A4F;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-kala-col-inauspicious {
  background: #FAF7F2;
  border: 1px solid #FCD4D4;
  border-left: 4px solid #B91C1C;
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.pc-kala-col-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.pc-kala-col-title-auspicious {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 17px;
  font-weight: 700;
  color: #2D6A4F;
  margin: 0;
}
.pc-kala-col-title-inauspicious {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 17px;
  font-weight: 700;
  color: #B91C1C;
  margin: 0;
}
.pc-kala-badge-auspicious {
  background: #EDF7EE;
  color: #2D6A4F;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #C7E8CA;
  display: inline-block;
}
.pc-kala-badge-inauspicious {
  background: #FDE8E7;
  color: #B91C1C;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid #FBCACA;
  display: inline-block;
}
.pc-kala-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pc-muhurta-card {
  background: #FFFFFF;
  border: 1px solid #EAE4D9;
  border-radius: 10px;
  padding: 12px 14px;
}
.pc-muhurta-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.pc-muhurta-name-auspicious {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 14px;
  font-weight: 700;
  color: #2D6A4F;
}
.pc-muhurta-name-inauspicious {
  font-family: 'Noto Serif Devanagari', serif;
  font-size: 14px;
  font-weight: 700;
  color: #B91C1C;
}
.pc-muhurta-time-tag {
  font-size: 11px;
  color: #7D6B5C;
  font-weight: 600;
}
.pc-muhurta-kaal {
  font-size: 11px;
  color: #8C541D;
  margin-bottom: 4px;
}
.pc-muhurta-desc {
  font-family: 'Noto Serif Devanagari', sans-serif;
  font-size: 11.5px;
  color: #4A3E36;
  line-height: 1.5;
  margin: 0;
}

/* ============================================================
   SUB-NAV (Kands / Patra) — shown only on Ramcharitmanas pages
   ============================================================ */
.nav-sub-link { display: none; }
body.show-subnav .nav-sub-link { display: inline-flex; }

/* ============================================================
   HOME NAV CARDS — now real <a> links (multi-page conversion)
   ============================================================ */
a.home-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  cursor: pointer;
}
a.home-card,
a.home-card:visited {
  color: inherit;
}


/* ============================================================
   STORIES — Page system & overflow fix
   ============================================================ */

/* Each story is a standalone page — this class kept for compatibility */
.story-page { display: block; }

/* Clip horizontal overflow from translateX entrance animations */
html, body { overflow-x: clip; }
.site-wrapper { overflow-x: clip; }

/* Allow CSS Grid cells to shrink below content width */
[style*="grid-template-columns"] > * { min-width: 0; }

/* Collapse all inline multi-column grids on mobile */
@media (max-width: 640px) {
  /* 2-column → 1 column */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  [style*="grid-template-columns:1fr 1fr"] > div:first-child,
  [style*="grid-template-columns: 1fr 1fr"] > div:first-child {
    border-right: none !important;
    border-bottom: 1px solid #f0e4d0 !important;
  }

  /* 3-column → 1 column */
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 4-column → 1 column */
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* 5-column → 1 column */
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Timeline rows (icon + text + label) → stack vertically */
  [style*="grid-template-columns:56px 1fr auto"],
  [style*="grid-template-columns: 56px 1fr auto"] {
    grid-template-columns: 1fr !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  [style*="grid-template-columns:56px 1fr auto"] > div:last-child,
  [style*="grid-template-columns: 56px 1fr auto"] > div:last-child {
    padding-left: 0 !important;
    margin-top: 8px !important;
    white-space: normal !important;
  }
  [style*="grid-template-columns:56px 1fr auto"] > div:nth-child(2),
  [style*="grid-template-columns: 56px 1fr auto"] > div:nth-child(2) {
    padding-left: 0 !important;
  }
}

/* Coming Soon styles */
.coming-soon-wrap {
  min-height: 60vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center; padding: 80px 24px;
}
.coming-soon-icon {
  width: 72px; height: 72px; border-radius: 50%;
  background: linear-gradient(135deg, #fff4e6, #ffe4b5);
  border: 2px solid #e6cb9a; display: flex;
  align-items: center; justify-content: center;
  margin: 0 auto 28px; box-shadow: 0 4px 16px rgba(143,78,0,0.10);
}
.coming-soon-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(143,78,0,0.08); border: 1px solid rgba(143,78,0,0.20);
  border-radius: var(--radius-full); padding: 6px 18px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--color-primary); margin-bottom: 20px;
}
.coming-soon-title {
  font-family: var(--font-garamond); font-size: clamp(32px, 5vw, 52px);
  font-weight: 700; color: var(--text-brown-heading); line-height: 1.15; margin-bottom: 16px;
}
.coming-soon-desc {
  font-size: 15.5px; color: var(--color-on-surface-variant);
  max-width: 560px; margin: 0 auto 36px; line-height: 1.7;
}

/* Story pages — tablet: collapse wide inline grids to 2-col */
@media (max-width: 860px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(5,1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Valmiki vs Tulsidas — responsive grids */
@media (max-width: 860px) {
  #vvt-hermeneutic > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
  #vvt-episode-grid { grid-template-columns: 1fr !important; }
  #vvt-pillar-grid { grid-template-columns: 1fr 1fr !important; }
  #vvt-teertha-grid { grid-template-columns: 1fr !important; }
}
@media (max-width: 540px) {
  #vvt-pillar-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   STORY SUB-STRIP
   ============================================================ */

.story-sub-strip {
  background: rgba(255, 248, 240, 0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(219, 194, 176, 0.40);
  position: sticky;
  top: 57px;
  z-index: 40;
}

.story-sub-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px var(--margin-desktop);
  max-width: var(--container-max);
  margin-inline: auto;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.story-sub-inner::-webkit-scrollbar {
  display: none;
}

.story-pill {
  font-family: var(--font-jakarta);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-on-surface-variant);
  padding: 5px 13px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  text-decoration: none;
}

.story-pill:hover {
  color: #8f4e00;
  background: rgba(143, 78, 0, 0.07);
}

.story-pill.active-pill {
  color: #8f4e00;
  font-weight: 700;
  background: rgba(143, 78, 0, 0.10);
  border-color: rgba(143, 78, 0, 0.25);
}

@media (max-width: 768px) {
  .story-sub-strip {
    top: 54px;
  }
  .story-sub-inner {
    padding: 7px 16px;
    gap: 6px;
  }
  .story-pill {
    font-size: 12.5px;
    padding: 5px 12px;
  }
}