/* Lulla.net Custom Styles */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Body typography for Hindi/English */
body {
  font-family: 'Noto Sans', 'Noto Sans Devanagari', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #2D1B0E;
  background-color: #FFF8F0;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Noto Serif', 'Noto Serif Devanagari', Georgia, serif;
  color: #8B1A1A;
  letter-spacing: -0.01em;
}

h1 { font-weight: 700; }
h2 { font-weight: 600; }

/* Links */
a { color: #D4831F; transition: color 0.2s ease; }
a:hover { color: #8B1A1A; }

/* Hero section */
.lulla-hero {
  background: linear-gradient(135deg, #8B1A1A 0%, #D4831F 50%, #8B1A1A 100%);
  color: #FFF8F0;
  padding: 80px 40px;
  text-align: center;
  border-radius: 12px;
  margin-bottom: 40px;
}
.lulla-hero h1 { color: #FFF8F0; font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 16px; }
.lulla-hero p { font-size: 1.2rem; opacity: 0.92; max-width: 700px; margin: 0 auto; }

/* Chapter cards grid */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin: 30px 0;
}

/* Card styles for chapters */
.wp-block-group.chapter-card,
.chapter-card {
  background: #FDF5E6;
  border: 1px solid #F5E6CC;
  border-radius: 10px;
  padding: 24px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(139, 26, 26, 0.12);
}
.chapter-card h3 { font-size: 1.1rem; margin-bottom: 8px; }
.chapter-card p { font-size: 0.95rem; color: #6B5B4E; }

/* Section divider */
.lulla-divider {
  text-align: center;
  margin: 50px 0;
  position: relative;
}
.lulla-divider::before {
  content: '॥';
  font-size: 2rem;
  color: #D4831F;
}

/* Blockquote - for shlokas */
blockquote {
  border-left: 4px solid #D4831F;
  background: #FDF5E6;
  padding: 20px 24px;
  margin: 24px 0;
  border-radius: 0 8px 8px 0;
  font-family: 'Noto Serif', 'Noto Serif Devanagari', Georgia, serif;
  font-style: normal;
}

/* Navigation */
.wp-block-navigation a {
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Footer */
.wp-block-template-part footer,
footer.wp-block-template-part {
  background: #2D1B0E;
  color: #F5E6CC;
}

/* Om symbol decoration */
.om-decoration {
  font-size: 3rem;
  color: #D4831F;
  text-align: center;
  line-height: 1;
  margin: 20px 0;
}

/* Responsive */
@media (max-width: 768px) {
  .lulla-hero { padding: 50px 20px; }
  .chapter-grid { grid-template-columns: 1fr; }
}

/* === Mobile-first polish (added 2026-04-20) === */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: rgba(212, 131, 31, 0.2); }

/* Prevent image overflow on narrow viewports */
img { max-width: 100%; height: auto; }
figure { max-width: 100%; }

/* Break long Devanagari compounds and URLs instead of overflowing */
p, li, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; }

/* Small-screen spacing */
@media (max-width: 640px) {
  .lulla-hero { padding: 40px 16px; }
  .lulla-hero p { font-size: 1rem; }
  blockquote { padding: 14px 18px; margin: 18px 0; }
  .chapter-card { padding: 18px; }
  figure.wp-block-image { margin-left: 0; margin-right: 0; }
  .wp-block-columns { gap: 16px; }
}

/* Smoother image appearance */
.wp-block-image img, .hc-app img { border-radius: 6px; }

/* === Site-wide mobile-first enhancements (added 2026-04-20, round 2) === */

/* Fluid typography, scoped to post/page content so theme block headings stay safe */
.wp-block-post-content h1,
.entry-content h1 { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 1.2; }
.wp-block-post-content h2,
.entry-content h2 { font-size: clamp(1.35rem, 4vw, 2rem); line-height: 1.3; }
.wp-block-post-content h3,
.entry-content h3 { font-size: clamp(1.1rem, 3vw, 1.5rem); line-height: 1.35; }
.wp-block-post-content h4,
.entry-content h4 { font-size: clamp(1rem, 2.3vw, 1.2rem); line-height: 1.4; }

/* Body text fluid */
.wp-block-post-content p,
.wp-block-post-content li,
.entry-content p,
.entry-content li { font-size: clamp(0.95rem, 1.8vw, 1.05rem); line-height: 1.75; }

/* Devanagari / Gurmukhi lines need a bit more height for readability */
.wp-block-post-content :lang(hi),
.wp-block-post-content :lang(pa),
.entry-content :lang(hi),
.entry-content :lang(pa) { line-height: 1.9; }

/* Touch-friendly button / nav tap targets */
.wp-block-button__link,
button,
.button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.wp-block-navigation .wp-block-navigation-item__content {
  padding: 0.55rem 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* Keyboard/accessibility focus ring */
a:focus-visible,
button:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid #D4831F;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Anchor-link scroll offset (so in-page jumps do not hit the nav) */
html { scroll-padding-top: 1rem; }
:target { scroll-margin-top: 1rem; }

/* Tables should scroll horizontally instead of overflowing the page */
.wp-block-post-content table,
.entry-content table { display: block; max-width: 100%; overflow-x: auto; white-space: nowrap; }

/* Code blocks overflow horizontally, not page */
pre { overflow-x: auto; max-width: 100%; }

/* Small-screen (<= 480px) tightening across the site */
@media (max-width: 480px) {
  .lulla-hero { padding: 32px 14px; border-radius: 8px; margin-bottom: 24px; }
  .lulla-hero h1 { font-size: clamp(1.35rem, 7vw, 1.9rem); margin-bottom: 10px; }
  .lulla-hero p { font-size: 0.92rem; line-height: 1.55; }
  .chapter-card { padding: 14px; }
  .chapter-card h3 { font-size: 1rem; }
  .chapter-card p { font-size: 0.86rem; }
  blockquote { padding: 12px 14px; margin: 14px 0; font-size: 0.95rem; }
  .wp-block-button__link { padding: 0.7rem 1.15rem; font-size: 0.95rem; }
  .wp-block-post-content,
  .entry-content { padding-left: 0.85rem; padding-right: 0.85rem; }
  .wp-block-columns { gap: 12px; }
}

/* Smooth image fade-in once lazy-loaded */
img { transition: opacity 0.25s ease; }

/* Print styles */
@media print {
  .wp-block-navigation,
  .wp-block-template-part footer,
  .lulla-hero { display: none !important; }
  body { color: #000; background: #fff; font-size: 11pt; }
  .wp-block-post-content, .entry-content { max-width: 100%; padding: 0; }
  a { color: #000; text-decoration: underline; }
  h1, h2, h3 { page-break-after: avoid; }
  p, li { page-break-inside: avoid; }
  img { max-width: 100%; page-break-inside: avoid; }
}
/* === 404 page v2 (revised 2026-04-30) === */
/* Replaces the earlier .lulla-404 block with a refined mobile-first layout */
.lulla-404 {
  max-width: 880px;
  margin-inline: auto;
  -webkit-text-size-adjust: 100%;
}

.lulla-404__figure {
  margin: 0 auto 22px;
  max-width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #FFF8F0;
  box-shadow: 0 6px 22px rgba(139, 26, 26, 0.10);
  aspect-ratio: 16 / 9;
  contain: layout paint;
}
.lulla-404__figure picture,
.lulla-404__figure img {
  display: block;
  width: 100%;
  height: 100%;
}
.lulla-404__figure img {
  object-fit: contain;
  background: #FFF8F0;
}

.lulla-404__title {
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  margin: 0.25em auto 0.15em;
  color: #8B1A1A;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lulla-404__lead {
  font-size: clamp(1rem, 2.4vw, 1.2rem);
  color: #2D1B0E;
  margin: 0 auto 0.5em;
  max-width: 640px;
  line-height: 1.5;
  text-wrap: pretty;
}
.lulla-404__lead [lang="hi"] {
  display: inline-block;
  margin-top: 0.25em;
  color: #6B5B4E;
  font-size: 0.95em;
}

.lulla-404__body {
  font-size: clamp(0.95rem, 2vw, 1.05rem);
  color: #6B5B4E;
  max-width: 600px;
  margin: 0 auto 1.2em;
  line-height: 1.6;
  text-wrap: pretty;
}

.lulla-404__buttons {
  margin: 0.8em auto 1.4em !important;
  gap: 10px !important;
}
.lulla-404__buttons .wp-block-button__link {
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
  min-height: 44px;
  white-space: nowrap;
}
.lulla-404__buttons [lang="hi"],
.lulla-404__buttons [lang="pa"] {
  font-weight: 500;
  margin-left: 0.18em;
}

/* Custom search (replaces wp:search to keep mobile attrs we control) */
.lulla-404__search {
  display: flex;
  align-items: stretch;
  max-width: 460px;
  margin: 0.4em auto 1.3em;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #F5E6CC;
  background: #FDF5E6;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.lulla-404__search:focus-within {
  border-color: #D4831F;
  box-shadow: 0 0 0 3px rgba(212, 131, 31, 0.18);
}
.lulla-404__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0.7rem 1rem;
  font: inherit;
  color: #2D1B0E;
  min-height: 44px;
  -webkit-appearance: none;
  appearance: none;
}
.lulla-404__search input[type="search"]::placeholder {
  color: #6B5B4E;
  opacity: 0.85;
}
.lulla-404__search button {
  flex: 0 0 auto;
  border: 0;
  background: #D4831F;
  color: #FFF8F0;
  padding: 0 1.1rem;
  min-height: 44px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}
.lulla-404__search button:hover,
.lulla-404__search button:focus-visible {
  background: #8B1A1A;
}
.lulla-404__search button:focus-visible {
  outline: 2px solid #FFF8F0;
  outline-offset: -4px;
}
.lulla-404__search svg { display: block; }

/* Screen-reader-only label */
.lulla-404 .screen-reader-text {
  position: absolute !important;
  clip-path: inset(50%);
  width: 1px; height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  border: 0;
  white-space: nowrap;
}

.lulla-404__quip {
  font-family: 'Noto Serif', 'Noto Serif Devanagari', Georgia, serif;
  color: #6B5B4E;
  font-size: clamp(0.95rem, 1.9vw, 1.05rem);
  margin: 0.5em auto 0;
  max-width: 560px;
  border-top: 1px dashed rgba(212, 131, 31, 0.4);
  padding-top: 1.1em;
  text-wrap: balance;
}
.lulla-404__quip::before { content: '\0965 '; color: #D4831F; }
.lulla-404__quip::after  { content: ' \0965'; color: #D4831F; }

/* Tablet+small-laptop tightening */
@media (max-width: 768px) {
  .lulla-404 { padding-inline: 16px !important; padding-top: var(--wp--preset--spacing--30) !important; }
  .lulla-404__figure { margin-bottom: 18px; border-radius: 10px; }
}

/* Phone tightening */
@media (max-width: 640px) {
  .lulla-404 { padding-inline: 12px !important; }
  .lulla-404__figure { border-radius: 8px; box-shadow: 0 4px 14px rgba(139, 26, 26, 0.08); margin-bottom: 16px; }
  .lulla-404__title { margin-top: 0.1em; }
  .lulla-404__buttons { gap: 8px !important; margin-top: 0.5em !important; margin-bottom: 1.1em !important; }
  .lulla-404__buttons .wp-block-button__link { padding: 0.6rem 0.95rem; font-size: 0.95rem; }
  .lulla-404__search { max-width: none; margin-inline: 6px; }
  .lulla-404__quip { padding-top: 0.95em; font-size: 0.95rem; }
}

/* Narrow phone: stack buttons full-width */
@media (max-width: 380px) {
  .lulla-404__buttons .wp-block-button { width: 100%; }
  .lulla-404__buttons .wp-block-button__link {
    width: 100%;
    text-align: center;
    justify-content: center;
    white-space: normal;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .lulla-404__figure { box-shadow: none; }
  .lulla-404__search,
  .lulla-404__search button { transition: none; }
}

/* High-contrast mode */
@media (prefers-contrast: more) {
  .lulla-404__figure { border: 2px solid #2D1B0E; }
  .lulla-404__search { border-color: #2D1B0E; }
}

/* =====================================================================
   TIER-1 REDESIGN 2026-04-30
   Goal: lift the site from "devotional pamphlet" to "scholarly archive
   for the technically curious". Adds design tokens, dark mode, modern
   hero, reading tracks, marginalia notes, and a reading-progress bar.
   All new rules are scoped to new class names (lulla-v2-*) where
   possible; existing 404 and chapter-card rules are kept and only have
   their hard-coded hex values replaced with var() tokens via override
   blocks at the bottom of this section.
   ===================================================================== */

/* --- Design tokens: light + dark ------------------------------------ */
:root {
  --lv-bg:          #FBF8F2;
  --lv-bg-soft:     #F4EEE2;
  --lv-bg-card:    #FFFFFF;
  --lv-ink:         #1A1814;
  --lv-ink-soft:    #5A4F45;
  --lv-ink-faint:   #5A4F45;
  --lv-accent:      #D4831F;          /* saffron, kept */
  --lv-accent-deep: #8B1A1A;          /* maroon, kept */
  --lv-accent-text: #8B1A1A;          /* WCAG-AA accent for small text in light theme */
  --lv-tech:        #4338CA;          /* indigo, new tech accent */
  --lv-tech-soft:   #EEF0FE;
  --lv-line:        rgba(26, 24, 20, 0.10);
  --lv-line-strong: rgba(26, 24, 20, 0.24);
  --lv-shadow:      0 1px 2px rgba(26, 24, 20, 0.04), 0 8px 24px rgba(26, 24, 20, 0.06);
  --lv-radius:      14px;
  --lv-measure:     65ch;

  --lv-font-ui:     'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --lv-font-prose:  'Noto Serif', 'Noto Serif Devanagari', 'Lulla Deva Fallback', 'Lulla Deva Fallback B', Georgia, 'Times New Roman', serif;
  --lv-font-script: 'Noto Sans Devanagari', 'Lulla Deva Fallback', 'Lulla Deva Fallback B', 'Noto Sans Gurmukhi', sans-serif;
  --lv-font-mono:   ui-monospace, 'JetBrains Mono', SFMono-Regular, Menlo, Consolas, monospace;
}

:root[data-theme="dark"] {
  --lv-bg:          #15110D;
  --lv-bg-soft:     #1F1A14;
  --lv-bg-card:     #221C16;
  --lv-ink:         #F0E8D8;
  --lv-ink-soft:    #C0B19A;
  --lv-ink-faint:   #8A7E6C;
  --lv-accent:      #E89B3A;
  --lv-accent-deep: #E07A7A;
  --lv-accent-text: #E89B3A;          /* warm saffron is readable on dark bg */
  --lv-tech:        #A5B4FC;
  --lv-tech-soft:   #1E1B4B;
  --lv-line:        rgba(240, 232, 216, 0.12);
  --lv-line-strong: rgba(240, 232, 216, 0.28);
  --lv-shadow:      0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
}

/* Honor system preference when user has not chosen explicitly */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lv-bg:          #15110D;
    --lv-bg-soft:     #1F1A14;
    --lv-bg-card:     #221C16;
    --lv-ink:         #F0E8D8;
    --lv-ink-soft:    #C0B19A;
    --lv-ink-faint:   #8A7E6C;
    --lv-accent:      #E89B3A;
    --lv-accent-deep: #E07A7A;
    --lv-accent-text: #E89B3A;
    --lv-tech:        #A5B4FC;
    --lv-tech-soft:   #1E1B4B;
    --lv-line:        rgba(240, 232, 216, 0.12);
    --lv-line-strong: rgba(240, 232, 216, 0.28);
    --lv-shadow:      0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  }
}

/* --- Body + content typography migrated to tokens ------------------- */
html { color-scheme: light dark; }
body {
  background-color: var(--lv-bg);
  color: var(--lv-ink);
  font-family: var(--lv-font-prose);
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* UI chrome (nav, buttons, meta, small text) uses the geometric sans */
.wp-block-navigation,
.wp-block-button__link,
button, input, select, textarea,
.lulla-meta, .lulla-eyebrow, .lulla-tag,
.lulla-v2-hero__cta, .lulla-track__cta,
.wp-block-post-meta, .wp-block-search__button,
.lulla-toc, .lulla-progress, .lulla-toggle {
  font-family: var(--lv-font-ui);
}

/* Headings: keep Inter for modern punch on pages, Noto Serif for prose H1 inside content */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--lv-font-ui);
  color: var(--lv-ink);
  letter-spacing: -0.015em;
  font-weight: 650;
}
h1 { font-weight: 720; }

/* Long-form prose inside posts/pages keeps its serif feel for body but uses Inter for headings */
.entry-content, .wp-block-post-content { font-family: var(--lv-font-prose); }
.entry-content p, .wp-block-post-content p { color: var(--lv-ink); max-width: var(--lv-measure); }

/* Devanagari / Gurmukhi runs */
:lang(hi), :lang(pa), :lang(sa) {
  font-family: var(--lv-font-prose);
  font-feature-settings: "kern" 1;
}

/* Links: accent-text is AA in both themes (light #8B1A1A, dark #E89B3A); plain --lv-accent fails in light */
a { color: var(--lv-accent-text); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--lv-accent-deep); }

/* --- Dark-mode toggle (floating button) ----------------------------- */
.lulla-toggle {
  position: fixed;
  right: 14px; bottom: 14px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--lv-line-strong);
  background: var(--lv-bg-card);
  color: var(--lv-ink);
  display: inline-flex;
  align-items: center; justify-content: center;
  cursor: pointer;
  z-index: 60;
  box-shadow: var(--lv-shadow);
  transition: transform 0.18s ease, background 0.18s ease;
}
.lulla-toggle:hover { transform: translateY(-1px); }
.lulla-toggle:focus-visible { outline: 2px solid var(--lv-tech); outline-offset: 2px; }
.lulla-toggle svg { width: 20px; height: 20px; display: block; }
.lulla-toggle .lulla-toggle__sun { display: none; }
:root[data-theme="dark"] .lulla-toggle .lulla-toggle__sun { display: block; }
:root[data-theme="dark"] .lulla-toggle .lulla-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .lulla-toggle .lulla-toggle__sun { display: block; }
  :root:not([data-theme="light"]) .lulla-toggle .lulla-toggle__moon { display: none; }
}

/* --- Reading progress bar ------------------------------------------- */
.lulla-progress {
  position: fixed; top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--lv-accent) 0%, var(--lv-accent-deep) 100%);
  width: 0%;
  z-index: 70;
  transition: width 80ms linear;
  pointer-events: none;
}

/* --- Hero v2 -------------------------------------------------------- */
.lulla-v2-hero {
  background: var(--lv-bg);
  padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 32px) clamp(32px, 5vw, 72px);
  border-bottom: 1px solid var(--lv-line);
  position: relative;
  overflow: hidden;
}
.lulla-v2-hero__inner {
  max-width: 1080px; margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
@media (max-width: 820px) {
  .lulla-v2-hero__inner { grid-template-columns: 1fr; }
}
.lulla-v2-hero__eyebrow {
  font-family: var(--lv-font-ui);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lv-tech);
  margin: 0 0 14px;
}
.lulla-v2-hero__title {
  font-family: var(--lv-font-ui);
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--lv-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.lulla-v2-hero__title em {
  font-style: normal;
  background: linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--lv-accent) 30%, transparent) 65%);
  padding: 0 0.08em;
}
.lulla-v2-hero__lede {
  font-family: var(--lv-font-prose);
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  line-height: 1.62;
  color: var(--lv-ink-soft);
  margin: 0 0 26px;
  max-width: 56ch;
}
.lulla-v2-hero__ctas {
  display: flex; flex-wrap: wrap; gap: 10px;
}
.lulla-v2-hero__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0.72rem 1.05rem;
  border-radius: 999px;
  font-weight: 600; font-size: 0.95rem;
  text-decoration: none;
  transition: transform 0.16s ease, background 0.16s ease, color 0.16s ease;
  min-height: 44px;
}
.lulla-v2-hero__cta--primary {
  background: var(--lv-ink);
  color: var(--lv-bg);
}
.lulla-v2-hero__cta--primary:hover { background: var(--lv-accent-deep); color: var(--lv-bg); transform: translateY(-1px); }
.lulla-v2-hero__cta--ghost {
  background: transparent;
  color: var(--lv-ink);
  border: 1px solid var(--lv-line-strong);
}
.lulla-v2-hero__cta--ghost:hover { border-color: var(--lv-ink); color: var(--lv-ink); }
.lulla-v2-hero__art {
  border-radius: var(--lv-radius);
  background: var(--lv-bg-soft);
  aspect-ratio: 4 / 3;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  border: 1px solid var(--lv-line);
}
.lulla-v2-hero__art img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.lulla-v2-hero__art--placeholder {
  background:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--lv-accent) 18%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 70% 70%, color-mix(in srgb, var(--lv-tech) 16%, transparent) 0%, transparent 60%),
    var(--lv-bg-soft);
}
.lulla-v2-hero__sigil {
  font-size: clamp(4rem, 10vw, 8rem);
  color: var(--lv-accent);
  font-family: var(--lv-font-prose);
  opacity: 0.7;
  line-height: 1;
}

/* --- Section wrapper (unifies the rest of the page) ------------------ */
.lulla-v2-section {
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 32px);
  max-width: 1080px;
  margin: 0 auto;
}
.lulla-v2-section__head {
  margin: 0 0 28px;
  display: flex; flex-wrap: wrap; align-items: end; gap: 8px 18px; justify-content: space-between;
}
.lulla-v2-section__title {
  font-family: var(--lv-font-ui);
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin: 0;
  letter-spacing: -0.02em;
  color: var(--lv-ink);
}
.lulla-v2-section__sub {
  color: var(--lv-ink-soft);
  font-size: 0.98rem;
  margin: 4px 0 0;
}
.lulla-v2-section__link {
  font-family: var(--lv-font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--lv-tech);
  text-decoration: none;
}
.lulla-v2-section__link:hover { color: var(--lv-accent-deep); text-decoration: underline; }

/* --- Reading tracks (Tier-3 reading guides preview on home) --------- */
.lulla-tracks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.lulla-track {
  background: var(--lv-bg-card);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  padding: 22px 22px 18px;
  display: flex; flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.lulla-track:hover { transform: translateY(-2px); border-color: var(--lv-line-strong); box-shadow: var(--lv-shadow); }
.lulla-track__time {
  font-family: var(--lv-font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--lv-ink-faint);
  margin: 0 0 10px;
}
.lulla-track__title {
  font-family: var(--lv-font-ui);
  font-size: 1.08rem;
  font-weight: 650;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--lv-ink);
  text-wrap: balance;
}
.lulla-track__desc {
  font-family: var(--lv-font-prose);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--lv-ink-soft);
  margin: 0 0 14px;
  flex: 1;
}
.lulla-track__cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--lv-tech);
}

/* --- Voice section (engineer-curator strip) -------------------------- */
.lulla-v2-voice {
  background: var(--lv-bg-soft);
  border-top: 1px solid var(--lv-line);
  border-bottom: 1px solid var(--lv-line);
  padding: clamp(40px, 6vw, 72px) clamp(16px, 4vw, 32px);
}
.lulla-v2-voice__inner {
  max-width: 760px; margin: 0 auto;
  text-align: center;
}
.lulla-v2-voice__eyebrow {
  font-family: var(--lv-font-ui);
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--lv-ink-faint);
  margin: 0 0 14px;
}
.lulla-v2-voice__quote {
  font-family: var(--lv-font-prose);
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.55;
  color: var(--lv-ink);
  margin: 0 0 18px;
  text-wrap: balance;
}
.lulla-v2-voice__byline {
  font-family: var(--lv-font-ui);
  font-size: 0.92rem;
  color: var(--lv-ink-soft);
}
.lulla-v2-voice__byline a { color: var(--lv-tech); text-decoration: none; }
.lulla-v2-voice__byline a:hover { text-decoration: underline; }

/* --- Tufte-style sidenotes ------------------------------------------ */
/* Usage:
     <span class="sidenote-ref">[1]</span>
     <span class="sidenote">A note in the margin on desktop, popover on mobile.</span>
*/
.has-sidenotes { position: relative; }
.sidenote-ref {
  font-family: var(--lv-font-ui);
  font-size: 0.78em;
  vertical-align: super;
  color: var(--lv-tech);
  cursor: pointer;
  user-select: none;
  margin: 0 0.08em;
}
.sidenote {
  display: block;
  font-family: var(--lv-font-prose);
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--lv-ink-soft);
  margin: 0.5em 0 1em;
  padding: 0.4em 0.8em;
  border-left: 2px solid var(--lv-accent);
  background: var(--lv-bg-soft);
  border-radius: 0 6px 6px 0;
}
@media (min-width: 1100px) {
  .has-sidenotes { display: grid; grid-template-columns: minmax(0, 65ch) 1fr; gap: 2.4rem; }
  .sidenote {
    grid-column: 2;
    background: transparent;
    border-left: none;
    padding: 0;
    margin: 0;
    font-size: 0.82rem;
    color: var(--lv-ink-faint);
    align-self: start;
  }
}

/* --- Verse anchor permalinks ---------------------------------------- */
.lulla-verse { padding: 0.5em 0; }
.lulla-verse__num {
  font-family: var(--lv-font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--lv-ink-faint);
  display: inline-block;
  margin-right: 0.5em;
}
.lulla-verse__permalink {
  opacity: 0;
  margin-left: 0.4em;
  font-family: var(--lv-font-mono);
  text-decoration: none;
  color: var(--lv-tech);
  font-size: 0.85em;
  transition: opacity 0.18s ease;
}
.lulla-verse:hover .lulla-verse__permalink,
.lulla-verse:focus-within .lulla-verse__permalink { opacity: 1; }
.lulla-verse:target {
  background: color-mix(in srgb, var(--lv-accent) 8%, transparent);
  border-radius: 6px;
}

/* --- Existing chapter cards: retoken to feel calmer ----------------- */
.wp-block-group.chapter-card,
.chapter-card {
  background: var(--lv-bg-card);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  padding: 22px;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.chapter-card:hover {
  transform: translateY(-2px);
  border-color: var(--lv-line-strong);
  box-shadow: var(--lv-shadow);
}
.chapter-card h3 { font-family: var(--lv-font-ui); font-size: 1.04rem; font-weight: 600; letter-spacing: -0.01em; color: var(--lv-ink); margin: 0 0 6px; }
.chapter-card h3 a { color: inherit; text-decoration: none; }
.chapter-card h3 a:hover { color: var(--lv-tech); }
.chapter-card p { font-family: var(--lv-font-prose); font-size: 0.92rem; color: var(--lv-ink-soft); margin: 0; }

/* --- Existing hero (.lulla-hero) given a calmer fallback look ------ */
.lulla-hero {
  background: var(--lv-bg);
  color: var(--lv-ink);
  border-radius: 0;
  border-bottom: 1px solid var(--lv-line);
  padding: clamp(40px, 5vw, 64px) 16px;
  margin-bottom: 0;
}
.lulla-hero h1 { color: var(--lv-ink); font-family: var(--lv-font-ui); font-weight: 720; }
.lulla-hero p { color: var(--lv-ink-soft); }

/* --- Footer (theme inherits parent footer.html which is empty) ------ */
.wp-block-template-part footer,
footer.wp-block-template-part {
  background: var(--lv-bg-soft);
  color: var(--lv-ink-soft);
  border-top: 1px solid var(--lv-line);
}
footer.wp-block-template-part a { color: var(--lv-tech); }
footer.wp-block-template-part a:hover { color: var(--lv-accent-deep); }

/* --- 404 page tokens (so it works in dark mode) --------------------- */
.lulla-404 { color: var(--lv-ink); }
.lulla-404__title { color: var(--lv-ink); font-family: var(--lv-font-ui); }
.lulla-404__lead, .lulla-404__body { color: var(--lv-ink-soft); }
.lulla-404__quip { color: var(--lv-ink-faint); border-top-color: var(--lv-line); }
.lulla-404__search { background: var(--lv-bg-card); border-color: var(--lv-line); }
.lulla-404__search input[type="search"] { color: var(--lv-ink); }
.lulla-404__search input[type="search"]::placeholder { color: var(--lv-ink-faint); }

/* --- Blockquote (shloka) using tokens -------------------------------- */
blockquote {
  border-left: 3px solid var(--lv-accent);
  background: var(--lv-bg-soft);
  color: var(--lv-ink);
}

/* --- Easy-quotes block (lulla_quote shortcode) appearance ----------- */
#lulla-quote-box {
  background: var(--lv-bg-soft);
  border: 1px solid var(--lv-line);
  border-radius: var(--lv-radius);
  padding: clamp(18px, 3vw, 28px);
  margin: 0 auto;
  max-width: 720px;
  font-family: var(--lv-font-prose);
  color: var(--lv-ink);
}
#lulla-quote-box p { color: var(--lv-ink); }

/* --- Reduced motion fallbacks --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lulla-track, .lulla-v2-hero__cta, .chapter-card { transition: none; }
  .lulla-progress { transition: none; }
}

/* --- High-contrast mode --------------------------------------------- */
@media (prefers-contrast: more) {
  :root { --lv-line: rgba(26, 24, 20, 0.5); --lv-line-strong: rgba(26, 24, 20, 0.85); }
  :root[data-theme="dark"] { --lv-line: rgba(240, 232, 216, 0.5); --lv-line-strong: rgba(240, 232, 216, 0.85); }
  .chapter-card, .lulla-track, .lulla-v2-hero__art { border-width: 2px; }
}

/* --- Print: hide chrome + use ink ------------------------------------ */
@media print {
  .lulla-toggle, .lulla-progress, .lulla-v2-hero__art { display: none !important; }
  body { background: #fff; color: #000; }
  .lulla-v2-hero { padding: 0; border-bottom: 1px solid #000; }
}

/* === End TIER-1 REDESIGN ============================================ */

/* =====================================================================
   PALETTE REFINEMENT 2026-04-30
   Goal: less brown, cleaner neutrals in both modes; drop the deep-indigo
   accent in favor of saffron for accent text (keeps the brand warm and
   improves contrast in dark mode); override legacy hardcoded hex from
   the pre-Tier-1 portion of this stylesheet so dark mode applies
   uniformly.
   ===================================================================== */

/* Warm manuscript light tokens (T123: warm palette restored site-wide,
   matching the landing; accents keep the brighter June values) */
:root {
  --lv-bg:          #FBF8F2;
  --lv-bg-soft:     #F4EEE2;
  --lv-bg-card:     #FFFFFF;
  --lv-ink:         #1A1814;
  --lv-ink-soft:    #5A4F45;
  --lv-ink-faint:   #6B5E50;
  --lv-line:        rgba(26, 24, 20, 0.10);
  --lv-line-strong: rgba(26, 24, 20, 0.24);
  --lv-shadow:      0 1px 2px rgba(26, 24, 20, 0.04), 0 8px 24px rgba(26, 24, 20, 0.06);
  --lv-accent:      #A05C0C;
  --lv-accent-deep: #8B1A1A;
  --lv-accent-text: #8B1A1A;
  --lv-tech:        #AB5500;
  --lv-tech-soft:   #FBE8D0;
}

/* Warm manuscript dark tokens (T123: night reading stays in the same world) */
:root[data-theme="dark"] {
  --lv-bg:          #15110D;
  --lv-bg-soft:     #1F1A14;
  --lv-bg-card:     #221C16;
  --lv-ink:         #F0E8D8;
  --lv-ink-soft:    #C0B19A;
  --lv-ink-faint:   #9C8F7C;
  --lv-line:        rgba(240, 232, 216, 0.12);
  --lv-line-strong: rgba(240, 232, 216, 0.28);
  --lv-shadow:      0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
  --lv-accent:      #F2A24A;
  --lv-accent-deep: #E88585;
  --lv-accent-text: #F2A24A;
  --lv-tech:        #F2A24A;
  --lv-tech-soft:   #2A1F12;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lv-bg:          #15110D;
    --lv-bg-soft:     #1F1A14;
    --lv-bg-card:     #221C16;
    --lv-ink:         #F0E8D8;
    --lv-ink-soft:    #C0B19A;
    --lv-ink-faint:   #9C8F7C;
    --lv-line:        rgba(240, 232, 216, 0.12);
    --lv-line-strong: rgba(240, 232, 216, 0.28);
    --lv-shadow:      0 1px 2px rgba(0,0,0,0.4), 0 8px 24px rgba(0,0,0,0.5);
    --lv-accent:      #F2A24A;
    --lv-accent-deep: #E88585;
    --lv-accent-text: #F2A24A;
    --lv-tech:        #F2A24A;
    --lv-tech-soft:   #2A1F12;
  }
}

/* --- Override the LEGACY rules that hardcoded warm-brown values  --- */
/* These rules existed before the token system and bypass dark mode. */

body {
  background-color: var(--lv-bg) !important;
  color: var(--lv-ink) !important;
}

/* Legacy heading rule used #8B1A1A (maroon) for all headings.
   Switch to ink so the text reads cleanly in both modes; reserve
   maroon as a deliberate accent on the hero gradient and a few CTAs. */
h1, h2, h3, h4, h5, h6 {
  color: var(--lv-ink);
}

/* Legacy link rule used #D4831F → keep saffron behavior but via tokens. */
a {
  color: var(--lv-accent);
}
a:hover {
  color: var(--lv-accent-deep);
}

/* Old gradient hero (.lulla-hero) — replace with calm flat surface so it
   stops fighting the new design language. */
.lulla-hero {
  background: var(--lv-bg) !important;
  color: var(--lv-ink) !important;
  border-bottom: 1px solid var(--lv-line);
  border-radius: 0;
}
.lulla-hero h1 { color: var(--lv-ink) !important; }
.lulla-hero p  { color: var(--lv-ink-soft) !important; }

/* Chapter cards: drop the cream fill, use the card surface token. */
.wp-block-group.chapter-card,
.chapter-card {
  background: var(--lv-bg-card) !important;
  border: 1px solid var(--lv-line) !important;
}
.chapter-card p { color: var(--lv-ink-soft) !important; }

/* Blockquote (used for shlokas) — soft surface, no cream. */
blockquote {
  background: var(--lv-bg-soft) !important;
  border-left: 3px solid var(--lv-accent) !important;
  color: var(--lv-ink);
}

/* Footer template-part — cool dark surface in dark mode, cool light in light. */
.wp-block-template-part footer,
footer.wp-block-template-part {
  background: var(--lv-bg-soft);
  color: var(--lv-ink-soft);
  border-top: 1px solid var(--lv-line);
}
footer.wp-block-template-part a { color: var(--lv-accent-text); }
footer.wp-block-template-part a:hover { color: var(--lv-accent-deep); }

/* Om decoration accent (legacy used #D4831F directly) */
.om-decoration { color: var(--lv-accent); }
.lulla-divider::before { color: var(--lv-accent); }

/* Quote box (legacy used a hard #6B5B4E for the "Loading quote..." text) */
#lulla-quote-box {
  background: var(--lv-bg-soft);
  border: 1px solid var(--lv-line);
  color: var(--lv-ink);
}
#lulla-quote-box p { color: var(--lv-ink-soft) !important; }

/* 404 page legacy bits (.lulla-404__quip used hardcoded #6B5B4E etc.) */
.lulla-404__quip {
  color: var(--lv-ink-faint);
  border-top-color: var(--lv-line);
}
.lulla-404__quip::before,
.lulla-404__quip::after { color: var(--lv-accent); }

.lulla-404__search {
  background: var(--lv-bg-card);
  border-color: var(--lv-line);
}
.lulla-404__search:focus-within {
  border-color: var(--lv-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-accent) 25%, transparent);
}
.lulla-404__search input[type="search"] { color: var(--lv-ink); }
.lulla-404__search input[type="search"]::placeholder { color: var(--lv-ink-faint); }
.lulla-404__search button { background: var(--lv-accent); color: var(--lv-bg); }
.lulla-404__search button:hover,
.lulla-404__search button:focus-visible { background: var(--lv-accent-deep); }

/* Tap highlight on body (legacy referenced rgba(212,131,31,...) directly) */
body { -webkit-tap-highlight-color: color-mix(in srgb, var(--lv-accent) 20%, transparent); }

/* Focus ring stays warm now (was indigo) */
a:focus-visible,
button:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-button__link:focus-visible {
  outline: 2px solid var(--lv-accent-text) !important;
  outline-offset: 2px;
  border-radius: 2px;
}

/* Accent used AS TEXT/affordance must use the AA-safe accent-text token
   (light #8B1A1A 8.76:1, dark #E89B3A) — plain --lv-accent #D4831F fails 2.80:1 in light */
.lulla-v2-hero__eyebrow { color: var(--lv-accent-text); }
.lulla-v2-section__link { color: var(--lv-accent-text); }
.lulla-v2-section__link:hover { color: var(--lv-accent-deep); }
.lulla-track__cta { color: var(--lv-accent-text); }
.sidenote-ref { color: var(--lv-accent-text); }
.lulla-verse__permalink { color: var(--lv-accent-text); }
.lulla-v2-voice__byline a { color: var(--lv-accent-text); }
.lulla-v2-voice__byline a:hover { color: var(--lv-accent-deep); }

/* Toggle button surface in dark mode shouldn't be brown */
.lulla-toggle {
  background: var(--lv-bg-card);
  border-color: var(--lv-line-strong);
  color: var(--lv-ink);
}
.lulla-toggle:focus-visible {
  outline: 2px solid var(--lv-accent-text);
}

/* Reading-progress bar gradient: subtle saffron, not a hot fan-fave */
.lulla-progress {
  background: linear-gradient(90deg, var(--lv-accent) 0%, var(--lv-accent-deep) 100%);
}

/* === End PALETTE REFINEMENT ======================================== */


/* =====================================================================
   VERSE COLOR FIX 2026-04-30
   Verses in /japji/, /hanuman-chalisa/, and Gita chapter posts were
   authored with inline style="color: blue;" — that's literal browser
   blue (#0000FF), which is jarring against any dark background and
   clashes with the warm palette in light mode. Inline styles outrank
   class rules, so the only way to override without rewriting every
   verse in the database is an attribute selector with !important.
   The chosen color is the brand maroon token, which auto-lifts to a
   warm rose in dark mode — readable in both, and traditionally the
   color used for sacred verses in printed Vedanta editions.
   ===================================================================== */

/* Catch verse text wrappers with inline blue */
.entry-content [style*="color: blue"],
.entry-content [style*="color:blue"],
.wp-block-post-content [style*="color: blue"],
.wp-block-post-content [style*="color:blue"] {
  color: var(--lv-accent-deep) !important;
}

/* The same wrappers when nested under <strong> for bold verses */
.entry-content [style*="color: blue"] strong,
.entry-content [style*="color:blue"] strong,
.wp-block-post-content [style*="color: blue"] strong,
.wp-block-post-content [style*="color:blue"] strong {
  color: inherit !important;
}

/* Center-aligned verse blocks have a slightly heavier weight on script
   text so they read as separate from the surrounding commentary. */
.entry-content center span[style*="color: blue"],
.entry-content center span[style*="color:blue"],
.wp-block-post-content center span[style*="color: blue"],
.wp-block-post-content center span[style*="color:blue"] {
  font-weight: 600;
  letter-spacing: 0.005em;
}

/* === End VERSE COLOR FIX =========================================== */


/* =====================================================================
   HC-APP DARK-MODE FIX 2026-04-30
   The Hanuman Chalisa post body wraps content in <div class="hc-app">
   with an inline <style> block that hardcodes light-mode colors:
     .hc-app          color #2c2c2a (dark)
     .hc-app .conc    background #eeedfe (near-white)
     .hc-app .chaupai background #faeeda (warm cream)
     .hc-app .math    background #eeedfe
     .hc-app .triad-item background #f1efe8
     .hc-app .sn      background #534ab7 (deep indigo)
     .hc-app h4       color #534ab7
   These bypass the token system and break in dark mode (most jarringly:
   h3 becomes light from the global heading rule, sits on the still-
   light .conc background, and disappears). Override with token-based
   colors so both modes read cleanly.
   ===================================================================== */

.entry-content .hc-app,
.wp-block-post-content .hc-app {
  color: var(--lv-ink) !important;
}

.entry-content .hc-app h2,
.entry-content .hc-app h3,
.wp-block-post-content .hc-app h2,
.wp-block-post-content .hc-app h3 {
  color: var(--lv-ink) !important;
  border-bottom-color: var(--lv-line) !important;
}

.entry-content .hc-app h4,
.wp-block-post-content .hc-app h4 {
  color: var(--lv-accent-deep) !important;
}

/* Summary / conclusion box */
.entry-content .hc-app .conc,
.wp-block-post-content .hc-app .conc {
  background: var(--lv-bg-soft) !important;
  border: 1px solid var(--lv-line) !important;
  color: var(--lv-ink) !important;
}

/* Chaupai (verse) box */
.entry-content .hc-app .chaupai,
.wp-block-post-content .hc-app .chaupai {
  background: var(--lv-bg-soft) !important;
  border-left: 3px solid var(--lv-accent) !important;
  color: var(--lv-ink) !important;
}

/* Math / insight callout box */
.entry-content .hc-app .math,
.wp-block-post-content .hc-app .math {
  background: var(--lv-bg-soft) !important;
  color: var(--lv-ink) !important;
}

/* Triad cards */
.entry-content .hc-app .triad-item,
.wp-block-post-content .hc-app .triad-item {
  background: var(--lv-bg-soft) !important;
  border: 1px solid var(--lv-line);
  color: var(--lv-ink) !important;
}
.entry-content .hc-app .triad-item strong,
.wp-block-post-content .hc-app .triad-item strong {
  color: var(--lv-accent-deep) !important;
}

/* Numbered circle indicator (was deep-indigo bg) */
.entry-content .hc-app .sn,
.wp-block-post-content .hc-app .sn {
  background: var(--lv-accent) !important;
  color: var(--lv-bg) !important;
}

/* Bulleted list diamond marker */
.entry-content .hc-app .sl li::before,
.wp-block-post-content .hc-app .sl li::before {
  color: var(--lv-accent) !important;
}

/* === End HC-APP DARK-MODE FIX ====================================== */


/* =====================================================================
   HC-APP COMPLETE PALETTE FIX 2026-04-30 v2
   Full override of every hardcoded color and border in the Hanuman
   Chalisa post's two inline <style> blocks. Anything else inheriting
   from .hc-app gets a fallback so dark mode never falls back to the
   hardcoded warm-cream / dark-gray pairings.
   ===================================================================== */

/* PDF download link block */
.entry-content .hc-pdf-link,
.wp-block-post-content .hc-pdf-link {
  color: var(--lv-ink-soft) !important;
}
.entry-content .hc-pdf-link a,
.wp-block-post-content .hc-pdf-link a {
  color: var(--lv-accent-deep) !important;
  border-bottom-color: var(--lv-accent) !important;
}
.entry-content .hc-pdf-link a:hover,
.entry-content .hc-pdf-link a:focus,
.wp-block-post-content .hc-pdf-link a:hover,
.wp-block-post-content .hc-pdf-link a:focus {
  color: var(--lv-accent) !important;
  border-bottom-color: var(--lv-accent-deep) !important;
}

/* Root .hc-app container — enforce token text color even when nested */
.entry-content .hc-app,
.entry-content .hc-app *,
.wp-block-post-content .hc-app,
.wp-block-post-content .hc-app * {
  border-color: var(--lv-line);
}

.entry-content .hc-app,
.entry-content .hc-app p,
.entry-content .hc-app li,
.entry-content .hc-app cite,
.wp-block-post-content .hc-app,
.wp-block-post-content .hc-app p,
.wp-block-post-content .hc-app li,
.wp-block-post-content .hc-app cite {
  color: var(--lv-ink) !important;
}

/* Headings inside .hc-app — h4 was the deep-indigo "blue title" */
.entry-content .hc-app h2,
.wp-block-post-content .hc-app h2 {
  color: var(--lv-ink) !important;
  border-bottom: 1px solid var(--lv-line) !important;
}
.entry-content .hc-app h3,
.wp-block-post-content .hc-app h3 {
  color: var(--lv-ink) !important;
}
.entry-content .hc-app h4,
.wp-block-post-content .hc-app h4 {
  color: var(--lv-accent-deep) !important;
}

/* Chaupai box — verse highlight */
.entry-content .hc-app .chaupai,
.wp-block-post-content .hc-app .chaupai {
  background: var(--lv-bg-soft) !important;
  border-left: 3px solid var(--lv-accent) !important;
  color: var(--lv-ink) !important;
}

/* Bulleted list marker */
.entry-content .hc-app .sl li::before,
.wp-block-post-content .hc-app .sl li::before {
  color: var(--lv-accent) !important;
}

/* Numbered circle pill */
.entry-content .hc-app .sn,
.wp-block-post-content .hc-app .sn {
  background: var(--lv-accent) !important;
  color: var(--lv-bg) !important;
}

/* Math / quantitative callout */
.entry-content .hc-app .math,
.wp-block-post-content .hc-app .math {
  background: var(--lv-bg-soft) !important;
  color: var(--lv-ink) !important;
  border: 1px solid var(--lv-line);
}

/* Triad cards */
.entry-content .hc-app .triad-item,
.wp-block-post-content .hc-app .triad-item {
  background: var(--lv-bg-soft) !important;
  border: 1px solid var(--lv-line);
  color: var(--lv-ink) !important;
}
.entry-content .hc-app .triad-item strong,
.wp-block-post-content .hc-app .triad-item strong {
  color: var(--lv-accent-deep) !important;
}
.entry-content .hc-app .triad-item span,
.wp-block-post-content .hc-app .triad-item span {
  color: var(--lv-ink-soft) !important;
}

/* "Notes" / explanatory side-block */
.entry-content .hc-app .note,
.wp-block-post-content .hc-app .note {
  background: var(--lv-bg-soft) !important;
  border-left: 3px solid var(--lv-accent) !important;
  color: var(--lv-ink) !important;
}
.entry-content .hc-app .note b,
.wp-block-post-content .hc-app .note b {
  color: var(--lv-ink) !important;
}

/* References / sources section divider */
.entry-content .hc-app .rs,
.wp-block-post-content .hc-app .rs {
  border-top: 1px solid var(--lv-line) !important;
}
.entry-content .hc-app .rs h3,
.wp-block-post-content .hc-app .rs h3 {
  border-bottom: none !important;
  color: var(--lv-ink) !important;
}
.entry-content .hc-app .rl li,
.wp-block-post-content .hc-app .rl li {
  color: var(--lv-ink-soft) !important;
}

/* Conclusion / Summary box */
.entry-content .hc-app .conc,
.wp-block-post-content .hc-app .conc {
  background: var(--lv-bg-soft) !important;
  border: 1px solid var(--lv-line) !important;
  color: var(--lv-ink) !important;
}
.entry-content .hc-app .conc h3,
.wp-block-post-content .hc-app .conc h3 {
  color: var(--lv-ink) !important;
  border: none !important;
}
.entry-content .hc-app .conc p,
.entry-content .hc-app .conc strong,
.wp-block-post-content .hc-app .conc p,
.wp-block-post-content .hc-app .conc strong {
  color: var(--lv-ink) !important;
}

/* Strong / bold inside .hc-app — ensure inherits ink */
.entry-content .hc-app strong,
.wp-block-post-content .hc-app strong {
  color: inherit;
}

/* --- Inline color: #888780 (warm gray) on aside paragraphs ---------- */
/* Several paragraphs use inline style="color: #888780" for asides.
   Override to ink-soft so they read in dark mode. */
.entry-content [style*="color: #888780"],
.entry-content [style*="color:#888780"],
.wp-block-post-content [style*="color: #888780"],
.wp-block-post-content [style*="color:#888780"] {
  color: var(--lv-ink-soft) !important;
}

/* Catch-all for any other hardcoded medium-gray color values that
   commonly fail in dark mode (#5f5e5a, #6B5B4E, #2c2c2a, #d3d1c7) */
.entry-content [style*="color: #5f5e5a"],
.entry-content [style*="color: #6B5B4E"],
.entry-content [style*="color: #2c2c2a"],
.entry-content [style*="color: #534ab7"],
.wp-block-post-content [style*="color: #5f5e5a"],
.wp-block-post-content [style*="color: #6B5B4E"],
.wp-block-post-content [style*="color: #2c2c2a"],
.wp-block-post-content [style*="color: #534ab7"] {
  color: var(--lv-ink) !important;
}

/* Old-theme cream backgrounds inline */
.entry-content [style*="background:#faeeda"],
.entry-content [style*="background: #faeeda"],
.entry-content [style*="background:#f1efe8"],
.entry-content [style*="background: #f1efe8"],
.entry-content [style*="background:#eeedfe"],
.entry-content [style*="background: #eeedfe"],
.wp-block-post-content [style*="background:#faeeda"],
.wp-block-post-content [style*="background: #faeeda"],
.wp-block-post-content [style*="background:#f1efe8"],
.wp-block-post-content [style*="background: #f1efe8"],
.wp-block-post-content [style*="background:#eeedfe"],
.wp-block-post-content [style*="background: #eeedfe"] {
  background: var(--lv-bg-soft) !important;
  color: var(--lv-ink) !important;
}

/* === End HC-APP COMPLETE PALETTE FIX =============================== */

/* =====================================================================
   MOBILE-FIRST OPTIMIZATIONS — added 2026-05-13
   Additive only; does not modify existing rules above.
   ===================================================================== */

/* Fonts are self-hosted subsets since T123 (see fonts.css); the old
   render-blocking Google Fonts @import chain was removed 2026-07-01. */

/* Mobile-first base font size — bumps up at tablet and desktop */
html { font-size: 17px; -webkit-text-size-adjust: 100%; }
@media (min-width: 768px) { html { font-size: 18px; } }

/* Body line-height tuned for mixed Devanagari + Latin */
body { line-height: 1.7; }

/* Devanagari-aware: targets lang attribute AND existing Devanagari-specific classes */
:lang(hi), :lang(sa), :lang(pa),
[lang^="hi"], [lang^="sa"], [lang^="pa"],
.astpadi-number, .pauri-number, .salok-label {
  line-height: 1.9;
}

/* Constrain prose width so long lines don't sprawl on tablet/desktop;
   stays 100% on mobile where viewport already caps it. */
.entry-content > p,
.entry-content > h2,
.entry-content > h3,
.entry-content > h4,
.entry-content > ul,
.entry-content > ol,
.entry-content > blockquote,
.wp-block-post-content > p,
.wp-block-post-content > h2,
.wp-block-post-content > h3,
.wp-block-post-content > h4,
.wp-block-post-content > ul,
.wp-block-post-content > ol,
.wp-block-post-content > blockquote {
  max-width: 38rem;
  margin-left: auto;
  margin-right: auto;
}

/* Sukhmani Sahib verse hierarchy (uses existing class hooks from the page) */
.astpadi-number {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 2px solid var(--wp--preset--color--accent-1, #D4831F);
}
.pauri-number {
  margin-top: 2rem;
  color: var(--wp--preset--color--accent-1, #D4831F);
  font-weight: 600;
}
.salok-label {
  font-size: 0.9rem;
  color: var(--wp--preset--color--accent-4, #6B5B4E);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

/* Touch targets — every nav item, button, in-flow link gets at least 44x44 tappable area */
.wp-block-navigation .wp-block-navigation-item__content,
.wp-block-navigation-link a,
.wp-block-button__link,
.lulla-track__cta,
.lulla-v2-hero__cta {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 10px 14px;
}

/* Mobile menu overlay — bigger tap zones, more vertical breathing */
@media (max-width: 768px) {
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
    gap: 0.5rem !important;
    font-size: 1.15rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    padding: 14px 16px;
    min-height: 48px;
  }
  .wp-block-navigation__responsive-container-open,
  .wp-block-navigation__responsive-container-close {
    padding: 12px;
    min-width: 48px;
    min-height: 48px;
  }
}

/* Mobile tweaks for homepage hero and content blocks */
@media (max-width: 768px) {
  .lulla-v2-hero { padding: 40px 20px !important; border-radius: 8px !important; }
  .lulla-v2-hero__title { font-size: clamp(1.4rem, 6.5vw, 2rem) !important; line-height: 1.25 !important; }
  .lulla-v2-hero__lede { font-size: 1rem !important; }
  .lulla-v2-hero__ctas { flex-direction: column; gap: 12px !important; align-items: stretch !important; }
  .lulla-v2-hero__cta { text-align: center; justify-content: center; }

  .lulla-v2-section__head { flex-direction: column; gap: 8px; align-items: flex-start !important; }

  .lulla-hero { padding: 40px 20px; border-radius: 8px; }
  .chapter-grid { grid-template-columns: 1fr; gap: 14px; }
  .chapter-card { padding: 18px; }

  blockquote { padding: 16px 18px; margin: 22px 0; font-size: 1.02rem; }
}

/* Verses and shloka quotes — Devanagari needs more inner padding on mobile */
@media (max-width: 480px) {
  blockquote { padding: 14px 16px; font-size: 1rem; }
  h1 { font-size: 1.6rem !important; }
  h2 { font-size: 1.3rem !important; }
}

/* Back-to-top anchor — CSS-only, no JS. Sits in lower-right thumb zone on mobile. */
.lulla-to-top-anchor {
  position: fixed;
  bottom: 18px;
  right: 18px;
  width: 46px;
  height: 46px;
  background: var(--wp--preset--color--accent-1, #D4831F);
  color: #FFF8F0 !important;
  text-decoration: none !important;
  border-radius: 50%;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(45, 27, 14, 0.25);
  opacity: 0.88;
  z-index: 100;
  transition: opacity 0.2s, transform 0.15s;
}
.lulla-to-top-anchor:hover { opacity: 1; transform: translateY(-2px); }

/* Dark mode — appreciated for evening devotional reading.
   Existing color palette stays valid; we just remap base/contrast and soften the page. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: #1a130c;
    color: #ebe1cf;
  }
  :root:not([data-theme="light"]) h1,
  :root:not([data-theme="light"]) h2,
  :root:not([data-theme="light"]) h3,
  :root:not([data-theme="light"]) h4,
  :root:not([data-theme="light"]) h5,
  :root:not([data-theme="light"]) h6 { color: #e89a4a; }
  :root:not([data-theme="light"]) a { color: #f0a040; }
  :root:not([data-theme="light"]) a:hover { color: #f5c47a; }
  :root:not([data-theme="light"]) blockquote {
    background: #2a1f15;
    border-left-color: #e89a4a;
  }
  :root:not([data-theme="light"]) .chapter-card,
  :root:not([data-theme="light"]) .wp-block-group.chapter-card {
    background: #241a11;
    border-color: #3a2e22;
  }
  :root:not([data-theme="light"]) .lulla-v2-hero { background: linear-gradient(135deg, #4a1010 0%, #6a3d10 50%, #4a1010 100%); }
  :root:not([data-theme="light"]) .salok-label { color: #b8a890; }
}

/* Reduced-motion respect */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* End mobile-first additions */

/* =====================================================================
   MOBILE-FIRST V2, 2026-05-20
   Additive only. Targets fixes found in mobile audit:
   (1) .sukhmani / .upanishad inline-style blocks lack dark-mode awareness.
   (2) Floating buttons (.lulla-toggle, .lulla-to-top-anchor) overlap and
       sit under iOS Safari home indicator.
   (3) 300ms tap delay on older browsers, add touch-action: manipulation.
   (4) Long verse-by-verse pages benefit from content-visibility: auto.
   (5) overflow-x: hidden safety net to prevent any horizontal scroll.
   ===================================================================== */

/* --- (5) horizontal-scroll safety net ------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
/* clip does not create a scroll container, so position:sticky keeps working in
   descendants (the reading rail). hidden stays as the fallback for old Safari. */
@supports (overflow-x: clip) { html, body { overflow-x: clip; } }

/* --- (3) kill 300ms tap delay --------------------------------------- */
a, button, [role="button"], .wp-block-button__link,
.lulla-toggle, .lulla-to-top-anchor,
.wp-block-navigation a {
  touch-action: manipulation;
}

/* --- (2) Floating buttons: safe-area-inset + stagger ---------------- */
/* Dark-mode toggle stays bottom-right, but with safe-area padding. */
.lulla-toggle {
  bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 14px)) !important;
  right: max(14px, calc(env(safe-area-inset-right, 0px) + 14px)) !important;
  z-index: 65;
}
/* Back-to-top moves UP above the toggle on mobile (stack vertically) */
.lulla-to-top-anchor {
  bottom: max(74px, calc(env(safe-area-inset-bottom, 0px) + 74px)) !important;
  right: max(18px, calc(env(safe-area-inset-right, 0px) + 18px)) !important;
  z-index: 64;
}

/* --- (4) content-visibility on long verse pages --------------------- */
/* Each .verse block on Ashtavakra / Rama Gita / Narada / Vibhishan pages
   can be skipped from painting until near the viewport. Big win for the
   100-verse Ashtavakra Ch 18, 84-sutra Narada, etc. */
.upanishad .verse,
.sukhmani .faq-item,
.sukhmani a.story-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 400px;
}

/* --- (1) Dark-mode awareness for .upanishad (verse-by-verse pages) -- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .upanishad {
    color: var(--lv-ink) !important;
  }
  :root:not([data-theme="light"]) .upanishad .chapter-title,
  :root:not([data-theme="light"]) .upanishad .v-speaker,
  :root:not([data-theme="light"]) .upanishad .v-sanskrit,
  :root:not([data-theme="light"]) .upanishad .closing,
  :root:not([data-theme="light"]) .upanishad a {
    color: var(--lv-accent) !important;
  }
  :root:not([data-theme="light"]) .upanishad .chapter-sub,
  :root:not([data-theme="light"]) .upanishad .chapter-intro,
  :root:not([data-theme="light"]) .upanishad .v-meaning,
  :root:not([data-theme="light"]) .upanishad .v-apply {
    color: var(--lv-ink) !important;
  }
  :root:not([data-theme="light"]) .upanishad .v-translit,
  :root:not([data-theme="light"]) .upanishad .v-context {
    color: var(--lv-ink-soft) !important;
  }
  :root:not([data-theme="light"]) .upanishad .v-sanskrit {
    background: var(--lv-bg-soft) !important;
  }
  :root:not([data-theme="light"]) .upanishad .v-context {
    background: var(--lv-bg-card) !important;
    border-left-color: var(--lv-accent) !important;
  }
  :root:not([data-theme="light"]) .upanishad .verse {
    border-bottom-color: var(--lv-line) !important;
  }
  :root:not([data-theme="light"]) .upanishad .chapter-head,
  :root:not([data-theme="light"]) .upanishad .nav {
    border-color: var(--lv-line) !important;
  }
  :root:not([data-theme="light"]) .upanishad .nav a {
    background: var(--lv-bg-card) !important;
    border-color: var(--lv-line) !important;
    color: var(--lv-accent) !important;
  }
  :root:not([data-theme="light"]) .upanishad .label {
    color: var(--lv-accent) !important;
  }
  :root:not([data-theme="light"]) .upanishad .v-num,
  :root:not([data-theme="light"]) .upanishad .chapter-kicker {
    color: var(--lv-accent) !important;
  }
}

/* --- (1) Dark-mode awareness for .sukhmani (landing pages) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sukhmani {
    color: var(--lv-ink) !important;
  }
  :root:not([data-theme="light"]) .sukhmani .hero,
  :root:not([data-theme="light"]) .sukhmani .intro-section h2,
  :root:not([data-theme="light"]) .sukhmani .story-section h2,
  :root:not([data-theme="light"]) .sukhmani .faq-q,
  :root:not([data-theme="light"]) .sukhmani .story-card-title,
  :root:not([data-theme="light"]) .sukhmani .hero-mool,
  :root:not([data-theme="light"]) .sukhmani .hero-subtitle,
  :root:not([data-theme="light"]) .sukhmani a {
    color: var(--lv-accent) !important;
  }
  :root:not([data-theme="light"]) .sukhmani .hero-attribution,
  :root:not([data-theme="light"]) .sukhmani .hero-context,
  :root:not([data-theme="light"]) .sukhmani .hero-mool-meaning,
  :root:not([data-theme="light"]) .sukhmani .intro-text,
  :root:not([data-theme="light"]) .sukhmani .story-card-theme,
  :root:not([data-theme="light"]) .sukhmani .story-section-sub,
  :root:not([data-theme="light"]) .sukhmani .faq-a {
    color: var(--lv-ink) !important;
  }
  :root:not([data-theme="light"]) .sukhmani .intro-highlight,
  :root:not([data-theme="light"]) .sukhmani a.story-card,
  :root:not([data-theme="light"]) .sukhmani .faq-item {
    background: var(--lv-bg-card) !important;
    border-color: var(--lv-line) !important;
    color: var(--lv-ink) !important;
  }
  :root:not([data-theme="light"]) .sukhmani .hero,
  :root:not([data-theme="light"]) .sukhmani .page-footer {
    border-color: var(--lv-line) !important;
  }
  :root:not([data-theme="light"]) .sukhmani .story-card-num,
  :root:not([data-theme="light"]) .sukhmani .footer-mark,
  :root:not([data-theme="light"]) .sukhmani .hero-khanda {
    color: var(--lv-accent) !important;
  }
}

/* --- Manual dark theme via [data-theme="dark"] (toggle button) ------ */
:root[data-theme="dark"] .upanishad,
:root[data-theme="dark"] .sukhmani {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .upanishad .chapter-title,
:root[data-theme="dark"] .upanishad .v-speaker,
:root[data-theme="dark"] .upanishad .v-sanskrit,
:root[data-theme="dark"] .upanishad .closing,
:root[data-theme="dark"] .upanishad a,
:root[data-theme="dark"] .sukhmani .hero-mool,
:root[data-theme="dark"] .sukhmani .hero-subtitle,
:root[data-theme="dark"] .sukhmani .intro-section h2,
:root[data-theme="dark"] .sukhmani .story-section h2,
:root[data-theme="dark"] .sukhmani .faq-q,
:root[data-theme="dark"] .sukhmani .story-card-title,
:root[data-theme="dark"] .sukhmani a {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .upanishad .chapter-sub,
:root[data-theme="dark"] .upanishad .chapter-intro,
:root[data-theme="dark"] .upanishad .v-meaning,
:root[data-theme="dark"] .upanishad .v-apply,
:root[data-theme="dark"] .sukhmani .hero-context,
:root[data-theme="dark"] .sukhmani .hero-mool-meaning,
:root[data-theme="dark"] .sukhmani .hero-attribution,
:root[data-theme="dark"] .sukhmani .intro-text,
:root[data-theme="dark"] .sukhmani .story-card-theme,
:root[data-theme="dark"] .sukhmani .story-section-sub,
:root[data-theme="dark"] .sukhmani .faq-a {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .upanishad .v-translit,
:root[data-theme="dark"] .upanishad .v-context {
  color: var(--lv-ink-soft) !important;
}
:root[data-theme="dark"] .upanishad .v-sanskrit,
:root[data-theme="dark"] .upanishad .v-context,
:root[data-theme="dark"] .upanishad .nav a,
:root[data-theme="dark"] .sukhmani .intro-highlight,
:root[data-theme="dark"] .sukhmani a.story-card,
:root[data-theme="dark"] .sukhmani .faq-item {
  background: var(--lv-bg-card) !important;
  border-color: var(--lv-line) !important;
}
:root[data-theme="dark"] .upanishad .verse,
:root[data-theme="dark"] .upanishad .chapter-head,
:root[data-theme="dark"] .upanishad .nav,
:root[data-theme="dark"] .sukhmani .hero,
:root[data-theme="dark"] .sukhmani .page-footer {
  border-color: var(--lv-line) !important;
}
:root[data-theme="dark"] .upanishad .v-num,
:root[data-theme="dark"] .upanishad .label,
:root[data-theme="dark"] .upanishad .chapter-kicker,
:root[data-theme="dark"] .sukhmani .story-card-num,
:root[data-theme="dark"] .sukhmani .footer-mark,
:root[data-theme="dark"] .sukhmani .hero-khanda {
  color: var(--lv-accent) !important;
}

/* --- Touch-target safety net: any standalone link in body content -- */
@media (max-width: 480px) {
  .entry-content a:not([class]),
  .wp-block-post-content a:not([class]) {
    padding: 2px 0;
  }
}

/* --- iOS-specific: respect notch on hero padding ---------------------- */
@supports (padding: max(0px)) {
  .lulla-v2-hero,
  .lulla-hero {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
}

/* --- Replace the @import font URL with a preconnect note ------------ */
/* The @import on line ~1481 is render-blocking. The font CSS itself is
   small (~2KB), but parsing must wait. We can't remove it from this file
   without editing the original, but we mitigate by ensuring fonts are
   display=swap (which they already declare). The browser's preconnect
   hints at the top of the doc cover the DNS+TLS cost. */

/* =====================================================================
   End MOBILE-FIRST V2
   ===================================================================== */

/* =====================================================================
   MOBILE FIX PASS 2026-05-20
   Targeted fixes from headless mobile audit
   ===================================================================== */

/* (1) Story-card overflow on yoga-vasistha & bhagavatam index pages.
   Root cause: grid items don't shrink below their content min-size, so
   `1fr` resolved to the intrinsic Hindi text width (~438px) and clipped
   on a 390px viewport. Unblock with min-width:0 + stronger wrapping. */
.story-grid,
.story-grid > * {
  min-width: 0;
}
.story-card {
  min-width: 0;
  max-width: 100%;
}
.story-card-title,
.story-card-theme,
.sukhmani .intro-text,
.story-card-num {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* (2) Same min-width:0 hygiene for any other grid/flex container in
   the custom landing pages (chapter cards, lulla-tracks, etc) where
   long Hindi/Sanskrit titles could blow out the column. */
.wp-block-columns > .wp-block-column,
.chapter-grid > *,
.lulla-tracks > * {
  min-width: 0;
}
.chapter-card h3,
.chapter-card p,
.lulla-track__title,
.lulla-track__desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* (3) Tap-target sizes >= 44x44 on mobile (Apple HIG / WCAG 2.5.5).
   Apply only at narrow viewports and only to standalone clickable
   elements (nav, card links, glossary letter pills). Inline prose
   links inside running text are intentionally left alone. */
@media (max-width: 768px) {
  /* Site header: title, nav items */
  .wp-block-site-title a,
  .wp-block-navigation .wp-block-navigation-item__content,
  .wp-block-navigation a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-block: 6px;
  }

  /* Chapter cards: whole card is a tap target via its anchor */
  .chapter-card {
    min-height: 88px;
  }
  .chapter-card a {
    display: block;
    padding: 4px 0;
  }

  /* Story cards on landing pages */
  .story-card {
    min-height: 64px;
    padding-block: 0.85rem;
  }

  /* Glossary alphabet pills */
  .glossary-letters a,
  .glossary-jump a,
  .glossary .alphabet a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
  }

  /* "Back to top", section-nav, footer chips, generic small links
     that exist outside running prose. */
  .back-to-top,
  .section-nav a,
  .lulla-v2-section__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
  }
}

/* (4) Defensive horizontal-overflow guard: anything with explicit max
   width should still fit on a 360px phone (Galaxy Fold cover etc).
   This catches stray inline images/tables/code blocks that don't
   downscale. */
@media (max-width: 768px) {
  img, video, iframe, table, pre, code {
    max-width: 100%;
  }
  table { display: block; overflow-x: auto; }
  pre { overflow-x: auto; }
}

/* =====================================================================
   End MOBILE FIX PASS 2026-05-20
   ===================================================================== */

/* =====================================================================
   MOBILE FIX PASS 2 — refinements after re-audit
   ===================================================================== */

@media (max-width: 768px) {
  /* Chapter card: the <a> is inside <h3>, not the card itself. Make the
     anchor fill the card so the whole card is a 44px+ tap target. */
  .chapter-card h3,
  .chapter-card h3 a {
    margin-block: 0;
  }
  .chapter-card h3 a {
    display: block;
    min-height: 44px;
    padding-block: 10px;
  }

  /* Glossary alphabet pills (actual class is .alpha-nav, not .alphabet) */
  nav.alpha-nav a,
  .alpha-nav a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    margin: 2px;
  }

  /* Table-of-contents on long verse pages (Upanishads) */
  nav.toc a,
  .toc-list a,
  .toc a,
  ol.toc-list a {
    display: inline-block;
    min-height: 44px;
    padding-block: 10px;
    line-height: 1.4;
  }
}

/* =====================================================================
   End MOBILE FIX PASS 2
   ===================================================================== */

/* =====================================================================
   MOBILE FIX PASS 3 — specificity & remaining tap targets
   ===================================================================== */
@media (max-width: 768px) {
  /* Override the existing .upanishad .toc-list a (min-height:40px) */
  .upanishad .toc-list a,
  .upanishad .toc a,
  .upanishad nav.toc a {
    min-height: 44px;
    padding-block: 12px;
  }

  /* Copy-to-clipboard buttons inside verse blocks. Too narrow at 28x44.
     Bump width to 44 minimum. */
  .upanishad .verse button,
  .upanishad button.copy,
  button.copy-btn,
  button[data-copy],
  button[aria-label*="copy" i],
  button[aria-label*="कॉपी"],
  .verse .copy {
    min-width: 44px;
    min-height: 44px;
  }

  /* Glossary verse-reference pills (cross-references in .term-where).
     These are list-like, not inline prose — bump to comfortable tap size. */
  .term-where a,
  .glossary .term-where a,
  .term-refs a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    border-radius: 4px;
  }

  /* Download / call-to-action standalone anchors in single-line strips
     (e.g., "↓ Download Hanuman Chalisa") */
  .download-link a,
  a.download-link,
  a.pdf-download,
  a[href$=".pdf"] {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 12px;
  }
}

/* =====================================================================
   End MOBILE FIX PASS 3
   ===================================================================== */

/* =====================================================================
   MOBILE FIX PASS 4 — verse permalinks + post-meta byline
   ===================================================================== */
@media (max-width: 768px) {
  /* Verse permalink # anchors on shloka / Hanuman Chalisa / Japji pages.
     Each verse has a small "#" link for copying its anchor URL. Bump
     hitbox without disturbing layout: make the anchor an inline-flex
     pill instead of a 10x19 character. */
  a.lulla-verse__permalink,
  .lulla-verse__permalink,
  .verse a[href^="#"][aria-label*="ermalink" i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    margin-left: 0.25rem;
    text-decoration: none;
    opacity: 0.5;
  }
  a.lulla-verse__permalink:hover,
  a.lulla-verse__permalink:focus {
    opacity: 1;
  }

  /* Post byline links ("Written by lullarajiv in Blog") */
  .wp-block-post-author-name a,
  .wp-block-post-author-name__link,
  .wp-block-post-terms a,
  .taxonomy-category a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 6px 8px;
    margin: -6px 0;
  }
}

/* =====================================================================
   End MOBILE FIX PASS 4
   ===================================================================== */

/* =====================================================================
   MOBILE FIX PASS 5 — post navigation + recent-posts listings
   ===================================================================== */
@media (max-width: 768px) {
  /* Prev/next post navigation block at bottom of singular posts */
  .wp-block-post-navigation-link a,
  .post-navigation-link-previous a,
  .post-navigation-link-next a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 4px;
  }

  /* Recent / related post listings: each item exposes a title link
     and a date link. Both are standalone, so bump both. */
  .wp-block-post-title a,
  .wp-block-post-date a,
  .wp-block-latest-posts a,
  .wp-block-latest-posts__post-title,
  .wp-block-latest-posts__post-date {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 6px;
  }
  /* The post item itself wraps title+date; give them breathing room */
  .wp-block-post {
    padding-block: 4px;
  }
}

/* =====================================================================
   End MOBILE FIX PASS 5
   ===================================================================== */


/* =====================================================================
   CONTRAST AUDIT FIX, 2026-05-24
   Addresses the 3,356-check audit findings:
     - Light theme accent: small orange labels failed WCAG on cream.
     - Dark theme: page-specific inline styles (Adi Granth ang, Gita chapters,
       Yoga Sutras, Saundarya Lahari, Bhagavatam stories, Sikh/Stotra long-form,
       category/author archives) kept hardcoded light backgrounds with light text
       OR hardcoded dark text on the dark site background.
   Strategy: route the affected page-specific class trees through theme tokens.
   Scoped via :root[data-theme=...] so the toggle and OS preference both work.
   ===================================================================== */

/* ---- Light theme: darker accent for small text/labels --------------- */
:root[data-theme="light"] .ang-num,
:root[data-theme="light"] .ang-num-label,
:root[data-theme="light"] .ang-section-name,
:root[data-theme="light"] .ang-nav-mid,
:root[data-theme="light"] .ang-meta strong,
:root[data-theme="light"] .v-num,
:root[data-theme="light"] .pauri-number,
:root[data-theme="light"] .saral-anuvad-label,
:root[data-theme="light"] .story-card-num,
:root[data-theme="light"] .story-num,
:root[data-theme="light"] .footer-mark,
:root[data-theme="light"] .raag-title,
:root[data-theme="light"] .chapter-kicker,
:root[data-theme="light"] .salok-label,
:root[data-theme="light"] .manthan-label,
:root[data-theme="light"] .eka-vaakya-label,
:root[data-theme="light"] .verses-heading,
:root[data-theme="light"] .ch-title,
:root[data-theme="light"] .glossary-auto-linked,
:root:not([data-theme="dark"]) .ang-num-label,
:root:not([data-theme="dark"]) .v-num,
:root:not([data-theme="dark"]) .saral-anuvad-label,
:root:not([data-theme="dark"]) .footer-mark,
:root:not([data-theme="dark"]) .story-card-num,
:root:not([data-theme="dark"]) .story-num {
  color: var(--lv-accent-text, #8B1A1A);
}

/* ---- Dark theme: force readable ink on page-specific containers ---- */
:root[data-theme="dark"] .adi-granth-page,
:root[data-theme="dark"] .adi-granth-page *,
:root[data-theme="dark"] [class*="ang-"],
:root[data-theme="dark"] .chapter-2,
:root[data-theme="dark"] .gita-page,
:root[data-theme="dark"] .gita-chapter,
:root[data-theme="dark"] .yoga-sutras,
:root[data-theme="dark"] .ys-page,
:root[data-theme="dark"] .sl-page,
:root[data-theme="dark"] .saundarya,
:root[data-theme="dark"] .bhagavatam-story,
:root[data-theme="dark"] .t4-story,
:root[data-theme="dark"] .hc-app,
:root[data-theme="dark"] .hc-page,
:root[data-theme="dark"] .sukhmani,
:root[data-theme="dark"] .vsn,
:root[data-theme="dark"] .vsn-page,
:root[data-theme="dark"] .shiva-mahimna-page,
:root[data-theme="dark"] .upanishad,
:root[data-theme="dark"] .ls-page,
:root[data-theme="dark"] .bh-context,
:root[data-theme="dark"] .yv-section,
  :root[data-theme="dark"] .yv-context,
:root[data-theme="dark"] .story-pass2 {
  color: var(--lv-ink) !important;
}

/* Headings, titles, and accents inside those containers, kept readable */
:root[data-theme="dark"] .adi-granth-page h1,
:root[data-theme="dark"] .adi-granth-page h2,
:root[data-theme="dark"] .adi-granth-page h3,
:root[data-theme="dark"] .adi-granth-page h4,
:root[data-theme="dark"] .adi-granth-page strong,
:root[data-theme="dark"] .ang-section-name,
:root[data-theme="dark"] .ang-nav-mid,
:root[data-theme="dark"] .ang-num,
:root[data-theme="dark"] .raag-title,
:root[data-theme="dark"] .verse-text,
:root[data-theme="dark"] .gita-page h1,
:root[data-theme="dark"] .gita-page h2,
:root[data-theme="dark"] .gita-page .ch-title,
:root[data-theme="dark"] .gita-page .ch-subtitle,
:root[data-theme="dark"] .gita-page .verses-heading,
:root[data-theme="dark"] .gita-sanskrit,
:root[data-theme="dark"] .gita-translit,
:root[data-theme="dark"] .saral-anuvad,
:root[data-theme="dark"] .saral-anuvad-label,
:root[data-theme="dark"] .pauri-number,
:root[data-theme="dark"] .ys-page h1,
:root[data-theme="dark"] .ys-page h2,
:root[data-theme="dark"] .ys-page .ys-sutra,
:root[data-theme="dark"] .sl-page h1,
:root[data-theme="dark"] .sl-page h2,
:root[data-theme="dark"] .bhagavatam-story h1,
:root[data-theme="dark"] .bhagavatam-story h2,
:root[data-theme="dark"] .t4-story h1,
:root[data-theme="dark"] .t4-story h2,
:root[data-theme="dark"] .story-title,
:root[data-theme="dark"] .story-subtitle,
:root[data-theme="dark"] .story-ref,
:root[data-theme="dark"] .manthan-label,
:root[data-theme="dark"] .hc-app h1,
:root[data-theme="dark"] .hc-app h2,
:root[data-theme="dark"] .hc-app .hc-sanskrit,
:root[data-theme="dark"] .sukhmani h1,
:root[data-theme="dark"] .sukhmani h2,
:root[data-theme="dark"] .sukhmani .hero,
:root[data-theme="dark"] .sukhmani .story-card-title,
:root[data-theme="dark"] .vsn h1,
:root[data-theme="dark"] .vsn h2,
:root[data-theme="dark"] .vsn .vsn-num,
:root[data-theme="dark"] .shiva-mahimna-page h1,
:root[data-theme="dark"] .shiva-mahimna-page h2,
:root[data-theme="dark"] .ls-page h1,
:root[data-theme="dark"] .ls-page h2,
:root[data-theme="dark"] .ls-page .ls-title,
:root[data-theme="dark"] .ls-page .ls-dev,
:root[data-theme="dark"] .ls-page .ls-name .ls-num,
:root[data-theme="dark"] .footer-mark,
:root[data-theme="dark"] .chapter-kicker,
:root[data-theme="dark"] .eka-vaakya-label,
:root[data-theme="dark"] .salok-label,
:root[data-theme="dark"] .story-num,
:root[data-theme="dark"] .story-card-num {
  color: var(--lv-accent) !important;
}

/* Body prose paragraphs inside themed containers (catches hardcoded #2D1B0E) */
:root[data-theme="dark"] .adi-granth-page p,
:root[data-theme="dark"] .adi-granth-page li,
:root[data-theme="dark"] .adi-granth-page .verse-meaning,
:root[data-theme="dark"] .adi-granth-page .saral-anuvad,
:root[data-theme="dark"] .adi-granth-page .shabd-commentary,
:root[data-theme="dark"] .gita-page p,
:root[data-theme="dark"] .gita-page li,
:root[data-theme="dark"] .ys-page p,
:root[data-theme="dark"] .ys-page li,
:root[data-theme="dark"] .sl-page p,
:root[data-theme="dark"] .sl-page li,
:root[data-theme="dark"] .bhagavatam-story p,
:root[data-theme="dark"] .bhagavatam-story li,
:root[data-theme="dark"] .t4-story p,
:root[data-theme="dark"] .t4-story li,
:root[data-theme="dark"] .t4-bhag-closer p,
:root[data-theme="dark"] .hc-app p,
:root[data-theme="dark"] .hc-app li,
:root[data-theme="dark"] .sukhmani p,
:root[data-theme="dark"] .sukhmani li,
:root[data-theme="dark"] .vsn p,
:root[data-theme="dark"] .vsn li,
:root[data-theme="dark"] .shiva-mahimna-page p,
:root[data-theme="dark"] .shiva-mahimna-page li,
:root[data-theme="dark"] .ls-page p,
:root[data-theme="dark"] .ls-page li,
:root[data-theme="dark"] .ls-page .ls-en,
:root[data-theme="dark"] .ls-page .ls-hi,
:root[data-theme="dark"] .bh-context p,
:root[data-theme="dark"] .yv-context p,
:root[data-theme="dark"] .yv-section p,
:root[data-theme="dark"] .story-pass2 p {
  color: var(--lv-ink) !important;
}

/* Themed BACKGROUNDS for cards / panels / verse blocks ---------------- */
:root[data-theme="dark"] .adi-granth-page .verse,
:root[data-theme="dark"] .adi-granth-page .verse-block,
:root[data-theme="dark"] .adi-granth-page .raag-notes,
:root[data-theme="dark"] .adi-granth-page .placeholder-msg,
:root[data-theme="dark"] .adi-granth-page .cross-banner,
:root[data-theme="dark"] .adi-granth-page .shabd-commentary,
:root[data-theme="dark"] .gita-page .verse,
:root[data-theme="dark"] .gita-page .gita-verse,
:root[data-theme="dark"] .gita-page .gita-iconic-shloka,
:root[data-theme="dark"] .gita-page .shloka-meaning,
:root[data-theme="dark"] .gita-page .chapter-card,
:root[data-theme="dark"] .ys-page .ys-sutra-block,
:root[data-theme="dark"] .ys-page .ys-card,
:root[data-theme="dark"] .sl-page .verse-block,
:root[data-theme="dark"] .sl-page .ls-name,
:root[data-theme="dark"] .bhagavatam-story .story-card,
:root[data-theme="dark"] .bhagavatam-story .verse-block,
:root[data-theme="dark"] .t4-bhag-closer > div,
:root[data-theme="dark"] .bh-context,
:root[data-theme="dark"] .yv-section,
:root[data-theme="dark"] .yv-context,
:root[data-theme="dark"] .story-pass2,
:root[data-theme="dark"] .av-textual-context,
:root[data-theme="dark"] .hc-app .hc-block,
:root[data-theme="dark"] .hc-app .hc-card,
:root[data-theme="dark"] .sukhmani .story-card,
:root[data-theme="dark"] .sukhmani .faq-item,
:root[data-theme="dark"] .sukhmani .intro-section,
:root[data-theme="dark"] .vsn .vsn-block,
:root[data-theme="dark"] .vsn .vsn-card,
:root[data-theme="dark"] .shiva-mahimna-page .sm-block,
:root[data-theme="dark"] .ls-page .ls-name,
:root[data-theme="dark"] .ls-page .ls-card,
:root[data-theme="dark"] .ls-page .ls-intro,
:root[data-theme="dark"] .ls-page .ls-nav,
:root[data-theme="dark"] .ls-page .ls-cross {
  background: var(--lv-bg-card) !important;
  border-color: var(--lv-line) !important;
}

/* Links inside the themed containers get the dark-friendly accent */
:root[data-theme="dark"] .adi-granth-page a,
:root[data-theme="dark"] .gita-page a,
:root[data-theme="dark"] .ys-page a,
:root[data-theme="dark"] .sl-page a,
:root[data-theme="dark"] .bhagavatam-story a,
:root[data-theme="dark"] .t4-story a,
:root[data-theme="dark"] .hc-app a,
:root[data-theme="dark"] .sukhmani a,
:root[data-theme="dark"] .vsn a,
:root[data-theme="dark"] .shiva-mahimna-page a,
:root[data-theme="dark"] .ls-page a {
  color: var(--lv-accent) !important;
}

/* Archive pages (category + author): make titles, dates, excerpts theme-aware */
:root[data-theme="dark"] .wp-block-query .wp-block-post-title a,
:root[data-theme="dark"] .wp-block-query .wp-block-post-title,
:root[data-theme="dark"] .wp-block-query .wp-block-post-excerpt,
:root[data-theme="dark"] .wp-block-query .wp-block-post-date,
:root[data-theme="dark"] .wp-block-query .wp-block-post-author,
:root[data-theme="dark"] .wp-block-archives,
:root[data-theme="dark"] .wp-block-archives a,
:root[data-theme="dark"] .archive .wp-block-post-title a,
:root[data-theme="dark"] .archive .wp-block-post-excerpt,
:root[data-theme="dark"] .category .wp-block-post-title a,
:root[data-theme="dark"] .author .wp-block-post-title a {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .wp-block-query .wp-block-post-date,
:root[data-theme="dark"] .wp-block-query .wp-block-post-author {
  color: var(--lv-ink-soft) !important;
}

/* Header + WP block nav links readable in both themes (handles the inherited
   light-text-on-light-bg bug when OS prefers dark but user set light). */
:root[data-theme="light"] .wp-block-navigation,
:root[data-theme="light"] .wp-block-navigation a,
:root[data-theme="light"] .wp-block-navigation-item__content,
:root[data-theme="light"] .wp-block-navigation-item__label,
:root[data-theme="light"] .wp-block-site-title,
:root[data-theme="light"] .wp-block-site-title a {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .wp-block-navigation a,
:root[data-theme="dark"] .wp-block-navigation-item__content,
:root[data-theme="dark"] .wp-block-navigation-item__label,
:root[data-theme="dark"] .wp-block-site-title a {
  color: var(--lv-ink) !important;
}

/* Lulla desktop nav links in dark mode */
:root[data-theme="dark"] .lulla-dnav__link,
:root[data-theme="dark"] .lulla-dnav__group ul a,
:root[data-theme="dark"] .lulla-dnav__simple-list a {
  color: var(--lv-ink);
}
:root[data-theme="dark"] .lulla-dnav__link.is-active {
  color: var(--lv-accent);
  border-bottom-color: var(--lv-accent);
}
:root[data-theme="dark"] .lulla-dnav__panel,
:root[data-theme="dark"] .lulla-dnav__panel--mega {
  background: var(--lv-bg-card);
  border-color: var(--lv-line);
}
:root[data-theme="dark"] .lulla-dnav__group h3 {
  color: var(--lv-accent);
  border-bottom-color: var(--lv-line);
}

/* Lulla mobile drawer + bottom nav in dark mode */
:root[data-theme="dark"] .lulla-mobile-drawer__panel {
  background: var(--lv-bg-card);
  color: var(--lv-ink);
}
:root[data-theme="dark"] .lulla-mobile-drawer__primary a,
:root[data-theme="dark"] .lulla-mobile-drawer__bucket > summary,
:root[data-theme="dark"] .lulla-mobile-drawer__bucket > ul a,
:root[data-theme="dark"] .lulla-mobile-drawer__brand strong {
  color: var(--lv-ink);
}
:root[data-theme="dark"] .lulla-mobile-bottom-nav {
  background: rgba(34, 28, 22, 0.97);
  border-top-color: var(--lv-line);
}
:root[data-theme="dark"] .lulla-mobile-bottom-nav a,
:root[data-theme="dark"] .lulla-mobile-bottom-nav button {
  color: var(--lv-ink-soft);
}
:root[data-theme="dark"] .lulla-mobile-bottom-nav a[aria-current="page"],
:root[data-theme="dark"] .lulla-mobile-bottom-nav button[aria-current="page"] {
  color: var(--lv-accent);
}

/* Glossary-auto-linked terms — readable in both themes */
:root[data-theme="light"] .glossary-auto-linked { color: var(--lv-accent-text, #8B1A1A) !important; border-bottom-color: var(--lv-accent) !important; }
:root[data-theme="dark"] .glossary-auto-linked  { color: var(--lv-accent) !important; border-bottom-color: var(--lv-accent) !important; }

/* End contrast audit fix */

/* =====================================================================
   DESKTOP NAV STYLES (moved here from inline shortcode 2026-05-24)
   ===================================================================== */
/* === Lulla desktop navigation (2026-05-24) === */
.lulla-dnav { display: none; }
.lulla-dnav__list,
.lulla-dnav__panel ul,
.lulla-dnav__panel-inner ul { list-style: none; margin: 0; padding: 0; }

@media (min-width: 901px) {
    .lulla-dnav {
        display: block;
        font-family: 'Noto Serif', Georgia, serif;
    }
    .lulla-dnav__list {
        display: flex; align-items: center; gap: 0.2rem;
        flex-wrap: wrap; justify-content: flex-end;
    }
    .lulla-dnav__item { position: relative; margin: 0; }
    .lulla-dnav__link {
        display: inline-flex; align-items: center; gap: 0.25rem;
        padding: 0.55rem 0.85rem;
        color: #2D1B0E; text-decoration: none;
        font-size: 0.94rem; font-weight: 500; letter-spacing: 0.01em;
        border-bottom: 2px solid transparent;
        transition: color 0.15s, border-color 0.15s;
        border-radius: 3px;
    }
    .lulla-dnav__link:hover,
    .lulla-dnav__link:focus-visible {
        color: #8B1A1A;
        border-bottom-color: #D4831F;
        outline: none;
    }
    .lulla-dnav__link.is-active {
        color: #8B1A1A;
        border-bottom-color: #8B1A1A;
    }
    .lulla-dnav__caret {
        font-size: 0.7rem; opacity: 0.7; margin-top: 1px;
        transition: transform 0.18s ease;
    }
    .has-dropdown:hover .lulla-dnav__caret,
    .has-dropdown:focus-within .lulla-dnav__caret { transform: translateY(2px); opacity: 1; }

    .lulla-dnav__panel {
        position: absolute; top: calc(100% + 0.35rem); right: 0;
        min-width: 240px;
        background: #FDF5E6;
        border: 1px solid #E8DCC4;
        border-top: 2px solid #D4831F;
        border-radius: 4px;
        box-shadow: 0 8px 24px rgba(45,27,14,0.12);
        padding: 0.9rem 1rem;
        opacity: 0; visibility: hidden; pointer-events: none;
        transform: translateY(-4px);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
        z-index: 500;
    }
    .has-dropdown:hover .lulla-dnav__panel,
    .has-dropdown:focus-within .lulla-dnav__panel {
        opacity: 1; visibility: visible; pointer-events: auto;
        transform: translateY(0);
    }

    /* Wide mega-menu for Texts (left-anchored so it doesn't run off screen) */
    .lulla-dnav__panel--mega {
        width: min(880px, calc(100vw - 2rem));
        right: auto; left: 50%; transform: translateX(-50%) translateY(-4px);
        padding: 1.3rem 1.5rem;
    }
    .has-dropdown:hover .lulla-dnav__panel--mega,
    .has-dropdown:focus-within .lulla-dnav__panel--mega {
        transform: translateX(-50%) translateY(0);
    }
    .lulla-dnav__panel-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.3rem 1.6rem;
    }
    .lulla-dnav__group h3 {
        font-family: 'Noto Serif', Georgia, serif;
        font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
        color: #8B1A1A; margin: 0 0 0.5rem; font-weight: 700;
        padding-bottom: 0.3rem;
        border-bottom: 1px dotted #E8DCC4;
    }
    .lulla-dnav__group ul li { margin: 0; }
    .lulla-dnav__group ul a,
    .lulla-dnav__simple-list a {
        display: block;
        padding: 0.34rem 0;
        font-size: 0.92rem;
        color: #2D1B0E;
        text-decoration: none;
        line-height: 1.4;
    }
    .lulla-dnav__group ul a:hover,
    .lulla-dnav__group ul a:focus-visible,
    .lulla-dnav__simple-list a:hover,
    .lulla-dnav__simple-list a:focus-visible {
        color: #8B1A1A;
        text-decoration: underline;
        text-underline-offset: 3px;
        text-decoration-color: #D4831F;
        outline: none;
    }
    .lulla-dnav__simple-list li { margin: 0; }
    .lulla-dnav__hint {
        margin: 0.7rem 0 0;
        padding-top: 0.5rem;
        border-top: 1px dotted #E8DCC4;
        font-size: 0.82rem; color: #6B5B4E;
    }

    /* Narrower desktop: 2-column mega grid */
    @media (max-width: 1100px) {
        .lulla-dnav__panel-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.3rem; }
        .lulla-dnav__panel--mega { width: min(640px, calc(100vw - 2rem)); padding: 1.1rem 1.2rem; }
    }
}

/* Below the desktop breakpoint, the mobile drawer/bottom-nav system takes over */
@media (max-width: 900px) {
    .lulla-dnav { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .lulla-dnav__panel,
    .lulla-dnav__panel--mega,
    .lulla-dnav__caret { transition: none !important; }
}


/* === HC dark-theme overrides (2026-05-24) ===
   The Hanuman Chalisa page uses an older light-only CSS block. In
   dark mode this produced light-text-on-light-card or dark-text-on-
   dark-bg invisibility. Map the .hc-* tree through the theme tokens.
   ============================================================== */

:root[data-theme="dark"] .hc-page {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page h1,
:root[data-theme="dark"] .hc-page h2,
:root[data-theme="dark"] .hc-page h3,
:root[data-theme="dark"] .hc-page h4,
:root[data-theme="dark"] .hc-page p,
:root[data-theme="dark"] .hc-page li,
:root[data-theme="dark"] .hc-page strong {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page .hc-verse {
  background: var(--lv-bg-card) !important;
  border-color: var(--lv-line) !important;
}
:root[data-theme="dark"] .hc-page .hc-sanskrit {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-page .hc-section-label {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-page .hc-positioning {
  color: var(--lv-ink-soft) !important;
  border-left-color: var(--lv-accent) !important;
  background: transparent !important;
}
:root[data-theme="dark"] .hc-page .hc-meta {
  color: var(--lv-ink-soft) !important;
}
:root[data-theme="dark"] .hc-page .hc-after {
  background: var(--lv-bg-soft) !important;
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page .hc-deeper {
  background: var(--lv-bg-soft) !important;
  border-color: var(--lv-line) !important;
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page .hc-story {
  background: var(--lv-bg-soft) !important;
  border-left-color: var(--lv-accent) !important;
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page .hc-mini-note {
  color: var(--lv-ink-soft) !important;
}
:root[data-theme="dark"] .hc-page .hc-jaikar {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-page .hc-footer {
  color: var(--lv-ink-soft) !important;
  border-top-color: var(--lv-line) !important;
}
:root[data-theme="dark"] .hc-page a,
:root[data-theme="dark"] .hc-page .glossary-auto-linked {
  color: var(--lv-accent) !important;
}

/* The new PDF download cards I inserted have inline light backgrounds.
   Override them so the card flips to a dark surface in dark mode. */
:root[data-theme="dark"] .hc-pdf-card {
  background: var(--lv-bg-card) !important;
  border-color: var(--lv-line) !important;
  border-left-color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-pdf-card p {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-pdf-card p:first-child {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-pdf-card a {
  background: var(--lv-accent) !important;
  color: var(--lv-bg) !important;
}

/* The figure captions I added inside hc-verse use hardcoded #5a4a3e.
   Make them readable in dark mode. */
:root[data-theme="dark"] .hc-page figure.lulla-panel figcaption,
:root[data-theme="dark"] .hc-verse figure.lulla-panel figcaption {
  color: var(--lv-ink-soft) !important;
}


/* === HC dark-theme overrides v2 (2026-05-24) ===
   Catches the elements with hardcoded inline-style light backgrounds and
   dark text colors that the v1 selectors missed:
     - .t4-iconic (the opening-दोहा hero on the HC page)
     - .lulla-cross-text and its inner cards (Companion Texts; outside .hc-page)
     - any element on the HC page with hardcoded inline light bg / dark text
   ============================================================== */

/* Opening hero card (the iconic दोहा block at the top) */
:root[data-theme="dark"] .t4-iconic {
  background: var(--lv-bg-card) !important;
  border-left-color: var(--lv-accent) !important;
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .t4-iconic p,
:root[data-theme="dark"] .t4-iconic strong,
:root[data-theme="dark"] .t4-iconic span {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .t4-iconic [style*="color:#8B1A1A"],
:root[data-theme="dark"] .t4-iconic [style*="color:#8b1a1a"] {
  color: var(--lv-accent) !important;
}

/* Companion Texts section (lulla-cross-text wraps an inner div with hardcoded
   light bg). Override both the wrapper bg and the inline-styled inner cells. */
:root[data-theme="dark"] .lulla-cross-text > div {
  background: var(--lv-bg-card) !important;
  border-color: var(--lv-line) !important;
}
:root[data-theme="dark"] .lulla-cross-text p,
:root[data-theme="dark"] .lulla-cross-text li,
:root[data-theme="dark"] .lulla-cross-text span {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .lulla-cross-text a {
  color: var(--lv-accent) !important;
  border-bottom-color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .lulla-cross-text [style*="color:#8B1A1A"],
:root[data-theme="dark"] .lulla-cross-text [style*="color:#8b1a1a"] {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .lulla-cross-text [style*="color:#6B5B4E"],
:root[data-theme="dark"] .lulla-cross-text [style*="color:#6b5b4e"] {
  color: var(--lv-ink-soft) !important;
}

/* Generic catch-all for the HC page: any element with these inline light
   backgrounds or dark text colors gets flipped in dark mode. Attribute
   selectors are slightly brittle but they're targeted at known hex values
   that appear only as hardcoded inline styles on this page. */
:root[data-theme="dark"] .hc-page [style*="background:#F5F0E8"],
:root[data-theme="dark"] .hc-page [style*="background:#FDF5E6"],
:root[data-theme="dark"] .hc-page [style*="background:#FEFAF1"],
:root[data-theme="dark"] .hc-page [style*="background:#fbeee5"],
:root[data-theme="dark"] .hc-page [style*="background:#fdf4f2"],
:root[data-theme="dark"] .hc-page [style*="background:#faf5ec"],
:root[data-theme="dark"] .hc-page [style*="background:#fff"],
:root[data-theme="dark"] .hc-page [style*="background:#FFFFFF"],
:root[data-theme="dark"] .hc-page [style*="background:#ffffff"] {
  background: var(--lv-bg-card) !important;
}
:root[data-theme="dark"] .hc-page [style*="color:#5a4a3e"],
:root[data-theme="dark"] .hc-page [style*="color:#5A4A3E"],
:root[data-theme="dark"] .hc-page [style*="color:#2D1B0E"],
:root[data-theme="dark"] .hc-page [style*="color:#2d1b0e"],
:root[data-theme="dark"] .hc-page [style*="color:#6B5B4E"],
:root[data-theme="dark"] .hc-page [style*="color:#6b5b4e"],
:root[data-theme="dark"] .hc-page [style*="color:#2a2a2a"],
:root[data-theme="dark"] .hc-page [style*="color:#333"],
:root[data-theme="dark"] .hc-page [style*="color:#1a1a1a"] {
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page [style*="color:#8B1A1A"],
:root[data-theme="dark"] .hc-page [style*="color:#8b1a1a"],
:root[data-theme="dark"] .hc-page [style*="color:#962d22"],
:root[data-theme="dark"] .hc-page [style*="color:#c0392b"] {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-page [style*="color:#8b7e6c"],
:root[data-theme="dark"] .hc-page [style*="color:#8a6d3b"] {
  color: var(--lv-ink-soft) !important;
}

/* === HC dark-theme overrides v3 (2026-05-24) ===
   The .hc-intro and .hc-context blocks share a legacy background rule
   .hc-intro,.hc-deeper,.hc-context,.hc-after{background:#fdf4f2}. The
   v1 fix only overrode .hc-after and .hc-deeper, leaving .hc-intro and
   .hc-context with the light background in dark mode (invisible text).
   ================================================================ */
:root[data-theme="dark"] .hc-page .hc-intro,
:root[data-theme="dark"] .hc-page .hc-context {
  background: var(--lv-bg-soft) !important;
  color: var(--lv-ink) !important;
}
:root[data-theme="dark"] .hc-page .hc-intro h3,
:root[data-theme="dark"] .hc-page .hc-context h3 {
  color: var(--lv-accent) !important;
}
:root[data-theme="dark"] .hc-page .hc-intro p,
:root[data-theme="dark"] .hc-page .hc-context p {
  color: var(--lv-ink) !important;
}
/* Also catch the .hc-meta badges */
:root[data-theme="dark"] .hc-page .hc-meta span {
  background: var(--lv-bg-soft) !important;
  color: var(--lv-ink-soft) !important;
}


/* ============================================================
   lulla.net — canonical scripture/text component system (WAVE 1: verse + story)
   ONE source of truth, token-based -> correct in light AND dark.
   Legacy per-text class names are aliased (wrapper-scoped) onto
   these components. Generated 2026-06-01 from the 66-block audit.
   Replaces hardcoded inline <style> on 44 verse/story templates.
   ============================================================ */

.lv-text,
.adi-granth-index,
.adi-granth-page,
.ag-page,
.bhaja-page,
.br-page,
.brahma-page,
.ch-page,
.dm-page,
.ganesha-page,
.gita-ch,
.gita-page,
.hc-page,
.hcd-page,
.jp-page,
.long-text-page,
.ls-page,
.mahavakya-page,
.ramayana-page,
.shiva-mahimna-page,
.shiva-page,
.sl-page,
.sukhmani,
.upanishad,
.vc-page,
.vsn,
.ys-page { font-family:var(--lv-font-prose);color:var(--lv-ink);line-height:1.85;max-width:820px;margin:0 auto;padding:0 1rem; }
.lv-text a,
.adi-granth-index a,
.adi-granth-page a,
.ag-page a,
.bhaja-page a,
.br-page a,
.brahma-page a,
.ch-page a,
.dm-page a,
.ganesha-page a,
.gita-ch a,
.gita-page a,
.hc-page a,
.hcd-page a,
.jp-page a,
.long-text-page a,
.ls-page a,
.mahavakya-page a,
.ramayana-page a,
.shiva-mahimna-page a,
.shiva-page a,
.sl-page a,
.sukhmani a,
.upanishad a,
.vc-page a,
.vsn a,
.ys-page a { color:var(--lv-accent-text);text-decoration:none;border-bottom:1px dotted transparent;transition:color .2s,border-color .2s; }
.lv-text a:hover,
.adi-granth-index a:hover,
.adi-granth-page a:hover,
.ag-page a:hover,
.bhaja-page a:hover,
.br-page a:hover,
.brahma-page a:hover,
.ch-page a:hover,
.dm-page a:hover,
.ganesha-page a:hover,
.gita-ch a:hover,
.gita-page a:hover,
.hc-page a:hover,
.hcd-page a:hover,
.jp-page a:hover,
.long-text-page a:hover,
.ls-page a:hover,
.mahavakya-page a:hover,
.ramayana-page a:hover,
.shiva-mahimna-page a:hover,
.shiva-page a:hover,
.sl-page a:hover,
.sukhmani a:hover,
.upanishad a:hover,
.vc-page a:hover,
.vsn a:hover,
.ys-page a:hover { color:var(--lv-accent);border-bottom-color:var(--lv-accent); }
.lv-hero,
.adi-granth-index .ang-hero,
.adi-granth-index .hero,
.adi-granth-index .raag-header,
.adi-granth-page .ang-hero,
.adi-granth-page .hero,
.adi-granth-page .raag-header,
.ag-page .ag-header,
.bhaja-page .bg-hero,
.br-page .b-hero,
.br-page .b-status,
.brahma-page .b-hero,
.brahma-page .b-status,
.ch-page .c-hero,
.dm-page .dm-header,
.ganesha-page .ga-hero,
.gita-ch .ch-hero,
.gita-page .gita-header,
.hc-page .hc-header,
.hcd-page .hcd-header,
.jp-page .jp-header,
.long-text-page .header,
.ls-page .ls-hero,
.mahavakya-page .m-hero,
.mahavakya-page .mv-hero,
.mahavakya-page .mv-status,
.ramayana-page .r-hero,
.shiva-mahimna-page .sm-hero,
.shiva-mahimna-page .sm-status,
.shiva-page .s-hero,
.sl-page .sl-header,
.sukhmani .hero,
.sukhmani .hero-context,
.sukhmani .story-hero,
.upanishad .astpadi-header,
.upanishad .astpadi-theme,
.upanishad .astpadi-title,
.upanishad .chapter-head,
.upanishad .hero,
.upanishad .hero-context,
.upanishad .hero-mool,
.upanishad .hero-mool-meaning,
.upanishad .story-hero,
.vc-page .vc-header,
.vsn .hero,
.vsn .hero-context,
.vsn .post-title-kept-off,
.vsn .section-subtitle,
.ys-page .ys-header { text-align:center;padding:2rem 1rem;border-bottom:1px solid var(--lv-line);margin-bottom:2rem; }
.lv-eyebrow,
.adi-granth-index .ang-num-label,
.adi-granth-index .hero-khanda,
.adi-granth-index .raag-meta,
.adi-granth-page .ang-num-label,
.adi-granth-page .hero-khanda,
.adi-granth-page .raag-meta,
.bhaja-page .bg-kicker,
.br-page .b-kicker,
.brahma-page .b-kicker,
.ch-page .c-kicker,
.ganesha-page .ga-kicker,
.gita-ch .ch-mark,
.gita-ch .ch-number,
.ls-page .ls-kicker,
.mahavakya-page .m-kicker,
.mahavakya-page .mv-kicker,
.ramayana-page .r-kicker,
.shiva-mahimna-page .sm-kicker,
.shiva-page .s-kicker,
.sukhmani .hero-khanda,
.sukhmani .story-num,
.upanishad .chapter-kicker,
.upanishad .hero-khanda,
.upanishad .story-num { font-family:var(--lv-font-ui);font-size:.75rem;letter-spacing:.3em;text-transform:uppercase;color:var(--lv-accent-text);font-weight:600;margin-bottom:.5rem; }
.lv-title,
.adi-granth-index .ang-section-name,
.adi-granth-index .hero-title,
.adi-granth-index .raag-title,
.adi-granth-page .ang-section-name,
.adi-granth-page .hero-title,
.adi-granth-page .raag-title,
.bhaja-page .bg-title,
.br-page .b-title,
.brahma-page .b-title,
.ch-page .c-title,
.ganesha-page .ga-title,
.gita-ch .ch-title,
.ls-page .ls-title,
.mahavakya-page .m-title,
.mahavakya-page .mv-title,
.ramayana-page .r-title,
.shiva-mahimna-page .sm-title,
.shiva-page .s-title,
.sukhmani .story-title,
.upanishad .chapter-title,
.upanishad .story-title { font-family:var(--lv-font-prose);font-size:clamp(1.6rem,3.2vw,2rem);color:var(--lv-accent-deep);font-weight:700;line-height:1.3;margin:0 0 .5rem; }
.lv-subtitle,
.adi-granth-index .hero-subtitle,
.adi-granth-index .raag-subtitle,
.adi-granth-page .hero-subtitle,
.adi-granth-page .raag-subtitle,
.bhaja-page .bg-subtitle,
.br-page .b-subtitle,
.brahma-page .b-subtitle,
.ch-page .c-subtitle,
.ganesha-page .ga-subtitle,
.gita-ch .ch-subtitle,
.long-text-page .subtitle,
.ls-page .ls-subtitle,
.mahavakya-page .m-subtitle,
.mahavakya-page .mv-subtitle,
.ramayana-page .r-subtitle,
.shiva-mahimna-page .sm-subtitle,
.shiva-page .s-subtitle,
.sukhmani .hero-mool,
.sukhmani .hero-subtitle,
.sukhmani .story-subtitle,
.upanishad .chapter-sub,
.upanishad .hero-subtitle,
.upanishad .story-subtitle,
.vsn .hero-subtitle { font-size:clamp(.92rem,2vw,1.05rem);font-style:italic;color:var(--lv-ink-soft);margin-bottom:.8rem; }
.lv-hero-meta,
.adi-granth-index .ang-meta,
.adi-granth-index .ang-num,
.adi-granth-index .ang-reading-time,
.adi-granth-index .hero-context,
.adi-granth-index .raag-count,
.adi-granth-index .raag-register,
.adi-granth-page .ang-meta,
.adi-granth-page .ang-num,
.adi-granth-page .ang-reading-time,
.adi-granth-page .hero-context,
.adi-granth-page .raag-count,
.adi-granth-page .raag-register,
.ag-page .ag-meta,
.bhaja-page .bg-meta,
.br-page .b-meta,
.br-page .b-meta-line,
.brahma-page .b-meta,
.ch-page .c-meta,
.dm-page .dm-meta,
.ganesha-page .ga-meta,
.gita-ch .ch-meta,
.gita-ch .ch-theme,
.gita-page .gita-meta,
.hc-page .hc-meta,
.hcd-page .hcd-meta,
.jp-page .jp-download,
.jp-page .jp-meta,
.jp-page .jp-status,
.ls-page .ls-meta,
.ls-page .ls-status,
.mahavakya-page .m-meta,
.mahavakya-page .mv-meta,
.ramayana-page .r-meta,
.shiva-mahimna-page .sm-meta,
.shiva-page .s-meta,
.sl-page .sl-meta,
.sukhmani .hero-attribution,
.sukhmani .hero-mool-meaning,
.sukhmani .story-ref,
.upanishad .hero-attribution,
.upanishad .reading-time,
.upanishad .story-ref,
.vc-page .vc-meta,
.vsn .meta,
.ys-page .ys-meta { font-size:.85rem;color:var(--lv-ink-soft); }
.lv-verse,
.adi-granth-index .verse,
.adi-granth-index .verse-block,
.adi-granth-page .verse,
.adi-granth-page .verse-block,
.ag-page .ag-verse,
.bhaja-page .bg-verse,
.br-page .b-passage,
.brahma-page .b-closing-shloka,
.brahma-page .b-pada,
.ch-page .c-passage,
.dm-page .dm-verse,
.ganesha-page .ga-section,
.gita-ch .pauri,
.gita-ch .verse-block,
.gita-page .gita-verse,
.hc-page .hc-verse,
.jp-page .jp-verse,
.ls-page .ls-name,
.mahavakya-page .m-vakya,
.mahavakya-page .mv-section,
.ramayana-page .r-shloka,
.shiva-mahimna-page .sm-section,
.shiva-page .s-verse,
.sl-page .sl-verse,
.sukhmani .pauri,
.sukhmani .rahau,
.sukhmani .salok,
.sukhmani .shloka,
.sukhmani .verse-block,
.upanishad .pauri,
.upanishad .salok,
.upanishad .shloka,
.upanishad .verse,
.upanishad .verse-block,
.vc-page .vc-verse,
.vsn .shloka,
.ys-page .ys-sutra { margin:2rem 0 2.25rem;padding-bottom:1.5rem;border-bottom:1px dashed var(--lv-line); }
.lv-verse:last-of-type,
.adi-granth-index .verse:last-of-type,
.adi-granth-index .verse-block:last-of-type,
.adi-granth-page .verse:last-of-type,
.adi-granth-page .verse-block:last-of-type,
.ag-page .ag-verse:last-of-type,
.bhaja-page .bg-verse:last-of-type,
.br-page .b-passage:last-of-type,
.brahma-page .b-closing-shloka:last-of-type,
.brahma-page .b-pada:last-of-type,
.ch-page .c-passage:last-of-type,
.dm-page .dm-verse:last-of-type,
.ganesha-page .ga-section:last-of-type,
.gita-ch .pauri:last-of-type,
.gita-ch .verse-block:last-of-type,
.gita-page .gita-verse:last-of-type,
.hc-page .hc-verse:last-of-type,
.jp-page .jp-verse:last-of-type,
.ls-page .ls-name:last-of-type,
.mahavakya-page .m-vakya:last-of-type,
.mahavakya-page .mv-section:last-of-type,
.ramayana-page .r-shloka:last-of-type,
.shiva-mahimna-page .sm-section:last-of-type,
.shiva-page .s-verse:last-of-type,
.sl-page .sl-verse:last-of-type,
.sukhmani .pauri:last-of-type,
.sukhmani .rahau:last-of-type,
.sukhmani .salok:last-of-type,
.sukhmani .shloka:last-of-type,
.sukhmani .verse-block:last-of-type,
.upanishad .pauri:last-of-type,
.upanishad .salok:last-of-type,
.upanishad .shloka:last-of-type,
.upanishad .verse:last-of-type,
.upanishad .verse-block:last-of-type,
.vc-page .vc-verse:last-of-type,
.vsn .shloka:last-of-type,
.ys-page .ys-sutra:last-of-type { border-bottom:none; }
.lv-vnum,
.adi-granth-index .verse-anchor,
.adi-granth-page .verse-anchor,
.bhaja-page .bg-vnum,
.brahma-page .b-sutra-num,
.ganesha-page .ga-snum,
.gita-ch .pauri-number,
.ls-page .ls-num,
.mahavakya-page .mv-snum,
.shiva-mahimna-page .sm-snum,
.shiva-page .s-vnum,
.sukhmani .pauri-number,
.upanishad .astpadi-number,
.upanishad .pauri-number,
.upanishad .v-num { font-family:var(--lv-font-ui);font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:var(--lv-accent-text);font-weight:600;margin-bottom:.5rem; }
.lv-speaker,
.bhaja-page .bg-label,
.br-page .b-ref,
.br-page .b-theme,
.brahma-page .b-adhi-range,
.ch-page .c-ref,
.ganesha-page .ga-shead,
.gita-ch .pauri-number,
.gita-ch .verses-heading,
.hc-page .hc-jaikar,
.hc-page .hc-section-label,
.mahavakya-page .m-veda,
.shiva-page .s-theme,
.sukhmani .astpadi-header,
.sukhmani .astpadi-number,
.sukhmani .astpadi-theme,
.sukhmani .astpadi-title,
.sukhmani .parable-label,
.sukhmani .rahau-label,
.sukhmani .salok-label,
.upanishad .astpadi-header,
.upanishad .astpadi-title,
.upanishad .salok-label,
.upanishad .v-speaker { font-size:.9rem;color:var(--lv-accent-deep);font-weight:600;margin-bottom:.4rem; }
.lv-sanskrit,
.adi-granth-index .verse-text,
.adi-granth-page .verse-text,
.ag-page .ag-sanskrit,
.bhaja-page .bg-sanskrit,
.br-page .b-shanti-skt,
.br-page .b-skt,
.brahma-page .b-csk,
.brahma-page .b-sutra,
.ch-page .c-skt,
.dm-page .dm-sanskrit,
.ganesha-page .ga-sanskrit,
.gita-ch .verse-sanskrit,
.gita-page .gita-sanskrit,
.hc-page .hc-sanskrit,
.jp-page .jp-gurmukhi,
.ls-page .ls-dev,
.mahavakya-page .m-skt,
.mahavakya-page .mv-sanskrit,
.mahavakya-page .mv-vakya,
.ramayana-page .r-skt,
.shiva-mahimna-page .sm-sanskrit,
.shiva-page .s-skt,
.sl-page .sl-sanskrit,
.sukhmani .rahau-verse,
.sukhmani .salok-verse,
.sukhmani .shloka-sanskrit,
.sukhmani .verse-gurbani,
.upanishad .hero-mool,
.upanishad .salok-verse,
.upanishad .shloka-sanskrit,
.upanishad .v-sanskrit,
.upanishad .verse-gurbani,
.vc-page .vc-sanskrit,
.vsn .sanskrit { font-family:var(--lv-font-prose);font-size:clamp(1.05rem,2.2vw,1.18rem);color:var(--lv-accent-deep);line-height:1.85;text-align:center;background:var(--lv-bg-soft);padding:1rem 1.25rem;border-radius:6px;margin:.5rem 0 .85rem;font-weight:500; }
.lv-translit,
.ag-page .ag-translit,
.bhaja-page .bg-iast,
.br-page .b-iast,
.br-page .b-shanti-iast,
.ch-page .c-iast,
.dm-page .dm-translit,
.ganesha-page .ga-iast,
.gita-page .gita-translit,
.ls-page .ls-iast,
.mahavakya-page .m-iast,
.mahavakya-page .mv-iast,
.shiva-mahimna-page .sm-iast,
.shiva-page .s-iast,
.sl-page .sl-translit,
.sukhmani .salok-transl,
.upanishad .v-translit,
.vc-page .vc-translit,
.ys-page .ys-translit { font-style:italic;font-size:.88rem;color:var(--lv-ink-soft);text-align:center;line-height:1.75;margin:0 0 1rem; }
.lv-meaning,
.bhaja-page .bg-block,
.br-page .b-arth,
.br-page .b-shanti-en,
.brahma-page .b-cgl,
.ch-page .c-arth,
.ganesha-page .ga-block,
.gita-ch .saral-anuvad,
.ls-page .ls-en,
.ls-page .ls-hi,
.mahavakya-page .m-gloss,
.mahavakya-page .mv-vakya-en,
.ramayana-page .r-gloss,
.sukhmani .rahau-meaning,
.sukhmani .salok-meaning,
.sukhmani .shloka-meaning,
.upanishad .hero-mool-meaning,
.upanishad .salok-meaning,
.upanishad .shloka-meaning,
.upanishad .v-meaning,
.vsn .hindi { font-size:.98rem;line-height:1.9;margin:1rem 0 .85rem;color:var(--lv-ink); }
.lv-note,
.ch-page .c-theme,
.hc-page .hc-mini-note,
.hc-page .hc-story,
.jp-page .jp-note,
.mahavakya-page .mv-anchor-note,
.upanishad .astpadi-theme,
.upanishad .v-context { background:var(--lv-bg-soft);border-left:3px solid var(--lv-accent);padding:.85rem 1.1rem;margin:1rem 0;font-size:.94rem;line-height:1.85;color:var(--lv-ink-soft);border-radius:0 4px 4px 0; }
.lv-commentary,
.adi-granth-index .commentary,
.adi-granth-index .intro,
.adi-granth-index .raag-intro,
.adi-granth-index .raag-pullquote,
.adi-granth-page .commentary,
.adi-granth-page .intro,
.adi-granth-page .raag-intro,
.adi-granth-page .raag-pullquote,
.ag-page .ag-after,
.br-page .b-sangati,
.brahma-page .b-adhi,
.brahma-page .b-commentary,
.ch-page .c-sangati,
.dm-page .dm-after,
.gita-ch .commentary,
.gita-ch .eka-vaakya,
.gita-ch .saral-anuvad,
.gita-ch .summary,
.hc-page .hc-after,
.hc-page .hc-context,
.hc-page .hc-deeper,
.hc-page .hc-intro,
.hcd-page .hcd-after,
.hcd-page .hcd-pavan,
.hcd-page .hcd-summary,
.hcd-page .hcd-word,
.mahavakya-page .m-block,
.mahavakya-page .mv-block,
.mahavakya-page .mv-close,
.shiva-mahimna-page .sm-block,
.shiva-mahimna-page .sm-howto,
.shiva-mahimna-page .sm-intro,
.shiva-page .s-para,
.sukhmani .commentary,
.sukhmani .manthan,
.upanishad .commentary,
.upanishad .eka-vaakya,
.upanishad .manthan,
.upanishad .parable,
.upanishad .saral-anuvad,
.upanishad .v-apply,
.vsn .story,
.ys-page .ys-after { background:var(--lv-bg-soft);border:1px solid var(--lv-line);border-left:4px solid var(--lv-accent-deep);border-radius:0 8px 8px 0;padding:1.4rem 1.6rem;margin:2.5rem 0 1.5rem;color:var(--lv-ink); }
.lv-commentary p,
.adi-granth-index .commentary p,
.adi-granth-index .intro p,
.adi-granth-index .raag-intro p,
.adi-granth-index .raag-pullquote p,
.adi-granth-page .commentary p,
.adi-granth-page .intro p,
.adi-granth-page .raag-intro p,
.adi-granth-page .raag-pullquote p,
.ag-page .ag-after p,
.br-page .b-sangati p,
.brahma-page .b-adhi p,
.brahma-page .b-commentary p,
.ch-page .c-sangati p,
.dm-page .dm-after p,
.gita-ch .commentary p,
.gita-ch .eka-vaakya p,
.gita-ch .saral-anuvad p,
.gita-ch .summary p,
.hc-page .hc-after p,
.hc-page .hc-context p,
.hc-page .hc-deeper p,
.hc-page .hc-intro p,
.hcd-page .hcd-after p,
.hcd-page .hcd-pavan p,
.hcd-page .hcd-summary p,
.hcd-page .hcd-word p,
.mahavakya-page .m-block p,
.mahavakya-page .mv-block p,
.mahavakya-page .mv-close p,
.shiva-mahimna-page .sm-block p,
.shiva-mahimna-page .sm-howto p,
.shiva-mahimna-page .sm-intro p,
.shiva-page .s-para p,
.sukhmani .commentary p,
.sukhmani .manthan p,
.upanishad .commentary p,
.upanishad .eka-vaakya p,
.upanishad .manthan p,
.upanishad .parable p,
.upanishad .saral-anuvad p,
.upanishad .v-apply p,
.vsn .story p,
.ys-page .ys-after p { color:var(--lv-ink);line-height:1.9; }
.lv-commentary-label,
.adi-granth-index .example-attr,
.adi-granth-page .example-attr,
.brahma-page .b-adhi-title,
.ganesha-page .ga-label,
.gita-ch .eka-vaakya-label,
.gita-ch .saral-anuvad-label,
.mahavakya-page .mv-label,
.shiva-mahimna-page .sm-label,
.sukhmani .manthan-label,
.upanishad .eka-vaakya-label,
.upanishad .label,
.upanishad .manthan-label,
.upanishad .parable-label,
.upanishad .saral-anuvad-label,
.vsn .story-label { font-size:1.1rem;letter-spacing:.05em;color:var(--lv-accent-deep);font-weight:700;display:block;margin-bottom:.7rem; }
.lv-callout,
.adi-granth-index .cross-banner,
.adi-granth-index .placeholder-msg,
.adi-granth-index .raag-notes,
.adi-granth-index .related-links,
.adi-granth-page .cross-banner,
.adi-granth-page .placeholder-msg,
.adi-granth-page .raag-notes,
.adi-granth-page .related-links,
.ag-page .ag-howto,
.ag-page .ag-intro,
.ag-page .ag-positioning,
.ag-page .ag-status,
.bhaja-page .bg-howto,
.bhaja-page .bg-intro,
.bhaja-page .bg-status,
.br-page .b-intro,
.br-page .b-shanti,
.brahma-page .b-adhi,
.brahma-page .b-cross,
.brahma-page .b-status,
.ch-page .c-intro,
.ch-page .c-status,
.dm-page .dm-after,
.dm-page .dm-howto,
.dm-page .dm-intro,
.dm-page .dm-positioning,
.dm-page .dm-status,
.ganesha-page .ga-howto,
.ganesha-page .ga-intro,
.ganesha-page .ga-status,
.gita-ch .hc-pdf-link,
.gita-ch .hc-pdf-meta,
.gita-ch .summary,
.gita-page .gita-after,
.gita-page .gita-howto,
.gita-page .gita-intro,
.gita-page .gita-positioning,
.gita-page .gita-status,
.hc-page .hc-positioning,
.hc-page .hc-status,
.hcd-page .hcd-intro,
.hcd-page .hcd-positioning,
.jp-page .jp-after,
.jp-page .jp-howto,
.jp-page .jp-intro,
.jp-page .jp-positioning,
.ls-page .ls-cross,
.ls-page .ls-intro,
.mahavakya-page .m-status,
.mahavakya-page .mv-howto,
.mahavakya-page .mv-intro,
.shiva-mahimna-page .sm-famous,
.shiva-mahimna-page .sm-fc,
.shiva-mahimna-page .sm-fv,
.shiva-page .s-status,
.sl-page .sl-after,
.sl-page .sl-anubandha,
.sl-page .sl-howto,
.sl-page .sl-intro,
.sl-page .sl-positioning,
.sl-page .sl-status,
.sukhmani .intro-highlight,
.sukhmani .parable,
.upanishad .chapter-intro,
.upanishad .intro-highlight,
.upanishad .parable,
.vc-page .vc-after,
.vc-page .vc-howto,
.vc-page .vc-intro,
.vc-page .vc-positioning,
.vc-page .vc-status,
.vsn .intro,
.ys-page .ys-howto,
.ys-page .ys-intro,
.ys-page .ys-positioning,
.ys-page .ys-status { background:var(--lv-bg-soft);border:1px solid var(--lv-line);border-left:4px solid var(--lv-accent);border-radius:0 8px 8px 0;padding:1rem 1.3rem;margin:1.5rem 0;color:var(--lv-ink); }
.lv-nav,
.adi-granth-index .ang-nav,
.adi-granth-index .ang-nav-bottom,
.adi-granth-index .ang-nav-mid,
.adi-granth-index .ang-nav-sep,
.adi-granth-index .ang-nav-top,
.adi-granth-index .back-link,
.adi-granth-index .raag-footer-nav,
.adi-granth-page .ang-nav,
.adi-granth-page .ang-nav-bottom,
.adi-granth-page .ang-nav-mid,
.adi-granth-page .ang-nav-sep,
.adi-granth-page .ang-nav-top,
.adi-granth-page .back-link,
.adi-granth-page .raag-footer-nav,
.bhaja-page .bg-cross,
.br-page .b-nav,
.brahma-page .b-nav,
.ch-page .c-nav,
.ganesha-page .ga-cross,
.gita-ch .nav-label,
.gita-ch .prev-next-nav,
.ls-page .ls-nav,
.mahavakya-page .m-cross,
.mahavakya-page .mv-cross,
.shiva-mahimna-page .sm-cross,
.shiva-page .s-cross,
.sukhmani .nav-footer,
.sukhmani .nav-label,
.upanishad .cross-link,
.upanishad .nav,
.upanishad .nav-footer,
.upanishad .nav-label,
.upanishad .nav-next,
.upanishad .nav-prev,
.upanishad .nav-up,
.upanishad .prev-next-nav { display:flex;justify-content:space-between;gap:1rem;margin:2.5rem 0 1rem;padding:1.25rem 0;border-top:1px solid var(--lv-line);font-size:.92rem;flex-wrap:wrap; }
.lv-nav a,
.adi-granth-index .ang-nav a,
.adi-granth-index .ang-nav-bottom a,
.adi-granth-index .ang-nav-mid a,
.adi-granth-index .ang-nav-sep a,
.adi-granth-index .ang-nav-top a,
.adi-granth-index .back-link a,
.adi-granth-index .raag-footer-nav a,
.adi-granth-page .ang-nav a,
.adi-granth-page .ang-nav-bottom a,
.adi-granth-page .ang-nav-mid a,
.adi-granth-page .ang-nav-sep a,
.adi-granth-page .ang-nav-top a,
.adi-granth-page .back-link a,
.adi-granth-page .raag-footer-nav a,
.bhaja-page .bg-cross a,
.br-page .b-nav a,
.brahma-page .b-nav a,
.ch-page .c-nav a,
.ganesha-page .ga-cross a,
.gita-ch .nav-label a,
.gita-ch .prev-next-nav a,
.ls-page .ls-nav a,
.mahavakya-page .m-cross a,
.mahavakya-page .mv-cross a,
.shiva-mahimna-page .sm-cross a,
.shiva-page .s-cross a,
.sukhmani .nav-footer a,
.sukhmani .nav-label a,
.upanishad .cross-link a,
.upanishad .nav a,
.upanishad .nav-footer a,
.upanishad .nav-label a,
.upanishad .nav-next a,
.upanishad .nav-prev a,
.upanishad .nav-up a,
.upanishad .prev-next-nav a { color:var(--lv-accent-text);text-decoration:none; }
.lv-nav a:hover,
.adi-granth-index .ang-nav a:hover,
.adi-granth-index .ang-nav-bottom a:hover,
.adi-granth-index .ang-nav-mid a:hover,
.adi-granth-index .ang-nav-sep a:hover,
.adi-granth-index .ang-nav-top a:hover,
.adi-granth-index .back-link a:hover,
.adi-granth-index .raag-footer-nav a:hover,
.adi-granth-page .ang-nav a:hover,
.adi-granth-page .ang-nav-bottom a:hover,
.adi-granth-page .ang-nav-mid a:hover,
.adi-granth-page .ang-nav-sep a:hover,
.adi-granth-page .ang-nav-top a:hover,
.adi-granth-page .back-link a:hover,
.adi-granth-page .raag-footer-nav a:hover,
.bhaja-page .bg-cross a:hover,
.br-page .b-nav a:hover,
.brahma-page .b-nav a:hover,
.ch-page .c-nav a:hover,
.ganesha-page .ga-cross a:hover,
.gita-ch .nav-label a:hover,
.gita-ch .prev-next-nav a:hover,
.ls-page .ls-nav a:hover,
.mahavakya-page .m-cross a:hover,
.mahavakya-page .mv-cross a:hover,
.shiva-mahimna-page .sm-cross a:hover,
.shiva-page .s-cross a:hover,
.sukhmani .nav-footer a:hover,
.sukhmani .nav-label a:hover,
.upanishad .cross-link a:hover,
.upanishad .nav a:hover,
.upanishad .nav-footer a:hover,
.upanishad .nav-label a:hover,
.upanishad .nav-next a:hover,
.upanishad .nav-prev a:hover,
.upanishad .nav-up a:hover,
.upanishad .prev-next-nav a:hover { color:var(--lv-accent); }
.lv-backlink,
.adi-granth-index .back-link,
.adi-granth-page .back-link,
.mahavakya-page .mv-home,
.sukhmani .back-link,
.upanishad .back-link { text-align:center;margin:1.5rem 0;font-size:.9rem; }
.lv-footer,
.adi-granth-index .page-footer,
.adi-granth-page .page-footer,
.ag-page .ag-footer,
.br-page .b-footer,
.brahma-page .b-footer,
.ch-page .c-footer,
.dm-page .dm-footer,
.ganesha-page .ga-footer,
.gita-page .gita-footer,
.hc-page .hc-footer,
.hcd-page .hcd-footer,
.jp-page .jp-footer,
.ls-page .ls-footer,
.mahavakya-page .mv-footer,
.shiva-page .s-footer,
.sl-page .sl-footer,
.sukhmani .footer-mark,
.sukhmani .page-footer,
.upanishad .closing,
.upanishad .footer-mark,
.upanishad .page-footer,
.vc-page .vc-footer,
.ys-page .ys-footer { text-align:center;padding:2.5rem 1rem;border-top:1px solid var(--lv-line);margin-top:2rem; }
.lv-source,
.adi-granth-index .raag-note,
.adi-granth-index .related-links,
.adi-granth-index .see-also,
.adi-granth-page .raag-note,
.adi-granth-page .related-links,
.adi-granth-page .see-also,
.bhaja-page .bg-footer,
.mahavakya-page .m-footer,
.mahavakya-page .mv-source,
.ramayana-page .r-footer,
.shiva-mahimna-page .sm-footer,
.sukhmani .footer-mark,
.upanishad .footer-mark { font-size:.85rem;color:var(--lv-ink-soft); }
.lv-rule,
.sukhmani .divider,
.sukhmani .divider-wide,
.upanishad .divider,
.upanishad .divider-wide,
.vsn .divider { width:64px;height:1px;background:var(--lv-line-strong);border:0;margin:2.4rem auto; }


/* ===== lulla.net canonical components — WAVE 2 (verse/story layout tail) =====
   image / button / grid / chips / cards / section headings / toc / glossary.
   Token-based aliases so stripping inline <style> on verse+story pages is safe. */
.lv-image,
.gita-ch .illust,
.gita-ch .story-panel,
.sukhmani .story-panel,
.sukhmani .sukh-img,
.upanishad .story-panel,
.vsn .vsn-img,
.vsn .vsn-panel,
.vsn .vsn-strip { text-align:center;margin:1.6rem auto; }
.lv-image img,
.gita-ch .illust img,
.gita-ch .story-panel img,
.sukhmani .story-panel img,
.sukhmani .sukh-img img,
.upanishad .story-panel img,
.vsn .vsn-img img,
.vsn .vsn-panel img,
.vsn .vsn-strip img { max-width:100%;height:auto;border-radius:6px;display:block;margin:0 auto;border:1px solid var(--lv-line); }
.lv-btn,
.adi-granth-index .hukamnama-btn,
.adi-granth-page .hukamnama-btn,
.gita-ch .copy-verse-btn,
.hc-page .hc-deeper-cta,
.hc-page .hc-download,
.sukhmani .download-link,
.upanishad .copy-verse-btn,
.vsn .pdf-download { display:inline-block;background:var(--lv-bg-soft);color:var(--lv-accent-deep);border:1px solid var(--lv-line);border-radius:6px;padding:.5rem .9rem;text-decoration:none;font-size:.9rem; }
.lv-btn:hover,
.adi-granth-index .hukamnama-btn:hover,
.adi-granth-page .hukamnama-btn:hover,
.gita-ch .copy-verse-btn:hover,
.hc-page .hc-deeper-cta:hover,
.hc-page .hc-download:hover,
.sukhmani .download-link:hover,
.upanishad .copy-verse-btn:hover,
.vsn .pdf-download:hover { background:var(--lv-bg-card);border-color:var(--lv-accent); }
.lv-grid,
.adi-granth-index .featured-grid,
.adi-granth-index .raag-grid,
.adi-granth-page .featured-grid,
.adi-granth-page .raag-grid,
.br-page .b-cards,
.ls-page .ls-cards { display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));margin:1.5rem 0; }
.lv-chips,
.adi-granth-index .ang-chips,
.adi-granth-index .raag-angs,
.adi-granth-page .ang-chips,
.adi-granth-page .raag-angs,
.long-text-page .ang-chips { display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0; }
.lv-chip,
.adi-granth-index .ang-chip,
.adi-granth-index .ang-chip-ellipsis,
.adi-granth-page .ang-chip,
.adi-granth-page .ang-chip-ellipsis,
.br-page .b-cnum,
.ch-page .c-cnum,
.long-text-page .ang-chip { display:inline-block;background:var(--lv-bg-soft);color:var(--lv-ink-soft);border:1px solid var(--lv-line);padding:.15rem .55rem;border-radius:4px;font-size:.8rem;text-decoration:none; }
.lv-card,
.adi-granth-index .feature-card,
.adi-granth-index .raag-card,
.adi-granth-page .feature-card,
.adi-granth-page .raag-card,
.br-page .b-card,
.ch-page .c-card,
.ls-page .ls-card { background:var(--lv-bg-card);border:1px solid var(--lv-line);border-radius:10px;padding:1.2rem 1.4rem;margin-bottom:1rem; }
.lv-card-title,
.adi-granth-index .feature-card-title,
.adi-granth-index .raag-card-name,
.adi-granth-page .feature-card-title,
.adi-granth-page .raag-card-name,
.ls-page .ls-cnum { color:var(--lv-accent-deep);font-weight:600; }
.lv-card-meta,
.adi-granth-index .feature-card-desc,
.adi-granth-index .feature-card-num,
.adi-granth-index .raag-card-desc,
.adi-granth-index .raag-card-meta,
.adi-granth-page .feature-card-desc,
.adi-granth-page .feature-card-num,
.adi-granth-page .raag-card-desc,
.adi-granth-page .raag-card-meta,
.ch-page .c-meta-line,
.ls-page .ls-cnum,
.ls-page .ls-meta-line { font-size:.85rem;color:var(--lv-ink-soft); }
.lv-section-title,
.adi-granth-index .section-title,
.adi-granth-page .section-title,
.gita-ch .verses-heading,
.upanishad .astpadi-header,
.upanishad .astpadi-title { font-size:1.3rem;color:var(--lv-accent-deep);font-weight:700;margin:2rem 0 .8rem; }
.lv-section-sub,
.adi-granth-index .section-sub,
.adi-granth-page .section-sub,
.upanishad .astpadi-theme { font-size:.95rem;color:var(--lv-ink-soft);margin:0 0 1rem; }
.lv-section,
.adi-granth-index .section,
.adi-granth-page .section { margin:1.5rem 0; }
.lv-toc,
.shiva-page .s-toc,
.sukhmani .toc,
.sukhmani .toc-list,
.upanishad .toc,
.upanishad .toc-list { background:var(--lv-bg-soft);border:1px solid var(--lv-line);border-radius:8px;padding:1rem 1.3rem;margin:1.5rem 0; }
.lv-glossary,
.shiva-page .s-gloss { background:var(--lv-bg-soft);border:1px solid var(--lv-line);border-radius:8px;padding:1rem 1.3rem;margin:1.5rem 0;color:var(--lv-ink); }

/* ============================================================
   Cross-document View Transitions (P3-2): smooth same-origin
   page navigations. Progressive enhancement — browsers without
   support navigate normally. Disabled under reduced-motion.
   ============================================================ */
/* Page transitions: one grammar in the site header CSS (theme/inc/chrome-header.php, scripts/build_static_header.py), 2026-09-27. */

/* Track S (2026-07-24): byline + art credit */
.lv-byline{font-size:.82rem;color:var(--lv-ink-faint);margin:2.2rem 0 0;text-align:center;}
.lv-lb__credit{display:block;text-align:center;font-size:.74rem;color:var(--lv-ink-faint);text-decoration:none;margin-top:.3rem;}
.lv-lb__credit:hover,.lv-lb__credit:focus-visible{color:var(--lv-accent-text);text-decoration:underline;}

/* Track S-12: voiced figure captions */
.lv-figcap{font-size:.82rem;color:var(--lv-ink-faint);text-align:center;margin:.5rem auto 0;max-width:600px;line-height:1.5;font-style:italic;}

/* --lv-rule was referenced by three stylesheets and 42 published pages but was
   never defined, so every one of those borders fell back to a solid #D8CFBF.
   In dark mode that painted a bright beige line where a 12% hairline belonged.
   Defining it as an alias fixes all of them at once, in every theme, because
   the var() resolves against whatever --lv-line is on :root at the time. */
:root { --lv-rule: var(--lv-line); }