/* Vedyatra web — stylesheet entry. Shared layers first, then app shell, then modules. */
/* Self-hosted fonts (SIL Open Font License), generated by tools/fetch-fonts.mjs. Do not edit by hand. */
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/eczar-devanagari-500-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/eczar-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/eczar-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/eczar-devanagari-600-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/eczar-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/eczar-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/eczar-devanagari-700-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/eczar-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Eczar'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/eczar-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/mukta-devanagari-400-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/mukta-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/mukta-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/mukta-devanagari-500-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/mukta-latin-ext-500-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 500; src: url('../fonts/mukta-latin-500-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/mukta-devanagari-600-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/mukta-latin-ext-600-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 600; src: url('../fonts/mukta-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/mukta-devanagari-700-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/mukta-latin-ext-700-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Mukta'; font-style: normal; font-display: swap; font-weight: 700; src: url('../fonts/mukta-latin-700-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Tiro Devanagari Sanskrit'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/tiro-devanagari-sanskrit-devanagari-400-normal.woff2') format('woff2'); unicode-range: U+0900-097F,U+1CD0-1CF9,U+200C-200D,U+20A8,U+20B9,U+20F0,U+25CC,U+A830-A839,U+A8E0-A8FF,U+11B00-11B09; }
@font-face { font-family: 'Tiro Devanagari Sanskrit'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/tiro-devanagari-sanskrit-latin-ext-400-normal.woff2') format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Tiro Devanagari Sanskrit'; font-style: normal; font-display: swap; font-weight: 400; src: url('../fonts/tiro-devanagari-sanskrit-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* Design tokens.
   Flat colour only: no gradients in the interface. Neutral paper / ink base;
   festival colours (saffron, kumkum, haldi, peacock, indigo, tulsi) are used
   as solid fills on buttons, tabs, labels and markers, one colour per text.
   Box shapes with small corners. Type with Indian roots: Eczar and Mukta were
   designed for Devanagari and Latin together. */

:root {
  /* Festival spectrum */
  --saffron: #ff7a1a;
  --kumkum: #e5175f;
  --haldi: #ffc23d;
  --peacock: #0fb5ae;
  --indigo: #5b4cf0;
  --tulsi: #2fbf71;

  /* One hue per text, used for tags, dots and portals */
  --hue-veda: var(--saffron);
  --hue-gita: var(--peacock);
  --hue-ramayana: var(--kumkum);
  --hue-mahabharata: var(--indigo);
  --hue-upanishad: var(--tulsi);
  --fill-veda: var(--fill-saffron);
  --fill-gita: var(--fill-peacock);
  --fill-ramayana: var(--fill-kumkum);
  --fill-mahabharata: var(--fill-indigo);
  --fill-upanishad: var(--fill-tulsi);

  /* Older names kept so modules keep working */
  --saffron-500: var(--saffron);
  --saffron-400: #ff9a4d;
  --gold-400: var(--haldi);
  --gold-300: #ffd54a;
  --gold-100: #fff3c4;
  --night-800: #0a1240;
  --night-600: #1d3fa8;

  /* Fills deep enough for white text (WCAG AA) */
  --fill-saffron: #c2410c;
  --fill-kumkum: #c8105a;
  --fill-peacock: #0b746f;
  --fill-indigo: #4a3bd6;
  --fill-tulsi: #15803d;
  --action: var(--fill-kumkum);
  --action-hover: #a80d4b;
  /* A flat five-colour band, used as a signature strip */
  --band: linear-gradient(90deg, var(--saffron) 0 20%, var(--kumkum) 20% 40%, var(--haldi) 40% 60%, var(--peacock) 60% 80%, var(--indigo) 80% 100%);

  --font-display: 'Eczar', 'Tiro Devanagari Sanskrit', Georgia, serif;
  --font-serif: 'Eczar', Georgia, serif;
  --font-sans: 'Mukta', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Mukta', system-ui, sans-serif;
  --font-sa: 'Tiro Devanagari Sanskrit', 'Noto Serif Devanagari', 'Kohinoor Devanagari', serif;

  --radius: 6px;
  --radius-sm: 3px;
  --max: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --ease: cubic-bezier(.2, .7, .2, 1);
}

/* Light: paper (default) */
:root,
:root[data-theme="light"] {
  --bg: #fbfaf7;
  --bg-2: #f2f0eb;
  --surface: #ffffff;
  --surface-solid: #ffffff;
  --surface-2: #f4f2ee;
  --line: #e6e2da;
  --line-strong: #cfc9be;
  --text: #15121a;
  --muted: #55505c;
  --accent: #c2410c;
  --accent-2: #be123c;
  --on-accent: #ffffff;
  --sa: #9f1239;
  --shadow: 0 1px 2px rgba(20, 16, 28, .05), 0 12px 32px rgba(20, 16, 28, .08);
  --shadow-lg: 0 2px 6px rgba(20, 16, 28, .06), 0 30px 70px rgba(20, 16, 28, .14);
  --header-bg: rgba(251, 250, 247, .86);
  --ok: #15803d; --warn: #b45309; --info: #1d4ed8;
  /* Background mandalas: kumkum, haldi-brown and indigo ink on paper */
  --mandala-1: #881337; --mandala-2: #7c2d12; --mandala-3: #312e81; --mandala-opacity: .34;
}

/* Dark: ink */
:root[data-theme="dark"] {
  --bg: #0e0d12;
  --bg-2: #15131b;
  --surface: #16141c;
  --surface-solid: #16141c;
  --surface-2: #1d1a25;
  --line: #26232f;
  --line-strong: #3a3645;
  --text: #ecebf0;
  --muted: #a9a5b4;
  --accent: #ff9a4d;
  --accent-2: #ff5c8a;
  --on-accent: #ffffff;
  --sa: #ffc58a;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 32px rgba(0, 0, 0, .35);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .3), 0 30px 70px rgba(0, 0, 0, .5);
  --header-bg: rgba(14, 13, 18, .82);
  --ok: #4ade80; --warn: #fbbf24; --info: #93c5fd;
  /* Background mandalas: gold, saffron and peacock light on ink */
  --mandala-1: #ffc23d; --mandala-2: #ff9a4d; --mandala-3: #2dd4bf; --mandala-opacity: .2;
}

/* Base elements, buttons, section layout, footer, dialog and toast */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
html { max-width: 100%; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  max-width: 100%;
  background: var(--bg);
  color: var(--text);
  font: 400 16px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s, color .4s;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.hl { color: var(--kumkum); }
:root[data-theme="dark"] .hl { color: #ff6b9a; }
.eyebrow { display: inline-block; font: 600 .74rem/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--cf, var(--action)); padding: 6px 9px 5px; border-radius: var(--radius-sm); margin: 0 0 16px; }
.band { display: block; height: 4px; background: var(--band); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 8px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.muted { color: var(--muted); }
.deva { font-family: var(--font-sa); }

/* Background mandalas sit behind every block (z-index -1 paints above the page background only). */
#mandalas { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.mandala {
  position: absolute; width: min(78vmin, 640px); height: auto; translate: -50% -50%;
  opacity: var(--mandala-opacity); transition: opacity 6s ease;
  fill: none; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.mandala .tone-1 { stroke: var(--mandala-1); }
.mandala .tone-2 { stroke: var(--mandala-2); }
.mandala .tone-3 { stroke: var(--mandala-3); }
.mandala path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: mandala-draw 8s ease-in-out forwards; }
.mandala-turn { animation: mandala-turn 360s linear infinite; transform-origin: 0 0; }
.mandala.fade { opacity: 0; }
#mandalas.still .mandala path { stroke-dashoffset: 0; animation: none; }
#mandalas.still .mandala-turn { animation: none; }
@keyframes mandala-draw { to { stroke-dashoffset: 0; } }
@keyframes mandala-turn { to { rotate: 360deg; } }
@media (max-width: 700px) { .mandala { width: 120vmin; } }

#embers { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  padding: 10px 20px; border-radius: var(--radius); font: 600 1rem var(--font-sans);
  text-decoration: none; cursor: pointer; border: 1px solid transparent; transition: transform .2s var(--ease), box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); }
.btn.primary { background: var(--cf, var(--action)); color: #fff; }
.btn.primary:hover { background: var(--action-hover); }
.btn.ghost { border: 2px solid var(--text); color: var(--text); background: transparent; }
.btn.ghost:hover { background: var(--text); color: var(--bg); }
.btn.small { min-height: 38px; padding: 6px 14px; font-size: .92rem; background: var(--cf, var(--fill-peacock)); color: #fff; }
.btn.small:hover { filter: brightness(1.1); }

.section { position: relative; z-index: 2; padding: clamp(64px, 9vw, 120px) var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(2.2rem, 4.6vw, 3.4rem); margin: 0 0 14px; color: var(--text); }
.section-head h2::after { content: ""; display: block; width: 56px; height: 5px; margin-top: 14px; background: var(--c, var(--kumkum)); }
/* One colour per section */
#learn { --c: var(--saffron); --cf: var(--fill-saffron); }
#storyteller { --c: var(--indigo); --cf: var(--fill-indigo); }
#read { --c: var(--peacock); --cf: var(--fill-peacock); }
#library { --c: var(--kumkum); --cf: var(--fill-kumkum); }
#art { --c: var(--haldi); --cf: var(--fill-saffron); }
#roadmap { --c: var(--indigo); --cf: var(--fill-indigo); }
.section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

.footer { position: relative; z-index: 2; text-align: center; padding: 40px var(--gutter) 60px; color: var(--muted); font-size: .9rem; border-top: 1px solid var(--line); }
.footer a { color: var(--text); }
.footer p { margin: 4px 0; }
.footer .legal { margin: 8px 0; line-height: 2; }
.footer .legal a { display: inline-block; min-height: 24px; }
dialog { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-solid); color: var(--text); padding: 24px; width: min(480px, calc(100vw - 32px)); box-shadow: var(--shadow); }
dialog::backdrop { background: rgba(16, 6, 40, .65); backdrop-filter: blur(4px); }
dialog h3 { margin: 0 0 4px; }
dialog label { display: block; font-size: .85rem; color: var(--muted); margin: 14px 0 6px; }
dialog select, dialog textarea { width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font: inherit; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.toast { position: fixed; bottom: 24px; left: 50%; translate: -50% 20px; padding: 12px 20px; border-radius: var(--radius); background: var(--surface-solid); border: 1px solid var(--accent); box-shadow: var(--shadow); opacity: 0; transition: .35s var(--ease); z-index: 70; pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; translate: -50% 0; }
/* Phones: the music bar and cookie notice sit at the bottom, so messages appear under the top bar. */
@media (max-width: 700px) { .toast { bottom: auto; top: 76px; translate: -50% -20px; } }

.load-error { position: relative; z-index: 5; max-width: 720px; margin: 20px auto; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--accent-2); background: var(--surface-solid); color: var(--text); text-align: center; }

/* Generated illustrations stand in for the SVG scenes: fill the box the same way `slice` did. */
.scene-img { display: block; object-fit: cover; object-position: 50% 40%; background: var(--surface-2, #2b0f5e); }

/* Back-to-top button: appears after scrolling past the first screen. Body has no overflow of its own,
   so the sticky top bar keeps working where overflow: clip is unsupported (older iOS Safari). */
.to-top {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 40; width: 46px; height: 46px; display: grid; place-items: center;
  border: 1px solid var(--accent); border-radius: 50%; background: var(--surface-solid); color: var(--accent);
  box-shadow: var(--shadow); cursor: pointer; opacity: 0; translate: 0 12px; transition: opacity .3s var(--ease), translate .3s var(--ease);
}
.to-top.show { opacity: 1; translate: 0 0; }
.to-top[hidden] { display: none; }
.to-top svg { width: 20px; height: 20px; }
.to-top:hover { background: var(--accent); color: var(--bg); }
.to-top:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }

/* App shell: top bar, hero and roadmap */

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 20px;
  padding: 10px var(--gutter) 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 4px; background: var(--band); }
.brand { flex: none; display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--accent); }
.brand-mark { width: 52px; height: 52px; margin: -8px 0; object-fit: contain; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .25)); }
.nav { display: flex; gap: 2px; margin-left: 12px; }
.nav a { position: relative; color: var(--text); text-decoration: none; padding: 8px 10px; border-radius: var(--radius-sm); font-size: .98rem; font-weight: 500; }
.nav a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 3px; background: var(--c); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
.nav a:hover::after, .nav a:focus-visible::after { transform: none; }
.nav a:nth-child(1) { --c: var(--saffron); } .nav a:nth-child(2) { --c: var(--indigo); } .nav a:nth-child(3) { --c: var(--peacock); }
.nav a:nth-child(4) { --c: var(--kumkum); } .nav a:nth-child(5) { --c: var(--tulsi); } .nav a:nth-child(6) { --c: var(--haldi); }
.icon-btn.menu-btn { display: none; } /* must beat .icon-btn below */
.controls { margin-left: auto; min-width: 0; display: flex; align-items: center; gap: 8px; }
.lang-btn {
  display: flex; align-items: center; gap: 8px; min-height: 40px; min-width: 0; padding: 0 10px 0 12px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface);
  color: var(--text); font: 600 .95rem var(--font-sans); cursor: pointer;
}
.lang-btn svg { width: 18px; height: 18px; flex: none; color: var(--accent); }
.lang-btn .chev { width: 14px; height: 14px; color: var(--muted); }
.lang-now { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 140px; }
.lang-btn:hover { border-color: var(--accent); }
.lang-btn:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }

.lang-dialog {
  width: min(720px, calc(100vw - 24px)); max-height: min(86vh, 860px); padding: 0;
  margin-top: 6vh; display: none; flex-direction: column; overflow: hidden;
}
.lang-dialog[open] { display: flex; }
.ld-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 14px 4px 20px; }
.ld-head h2 { margin: 0; font: 700 1.3rem var(--font-display); }
.ld-note { margin: 0 20px 10px; color: var(--muted); font-size: .92rem; }
.ld-find { padding: 0 20px 10px; border-bottom: 1px solid var(--line); }
.ld-find input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 400 1rem var(--font-sans);
}
.ld-find input:focus { outline: 3px solid var(--haldi); outline-offset: 0; }
.ld-body { overflow-y: auto; padding: 4px 20px 18px; }
.ld-body h3 { margin: 14px 0 8px; font: 700 .78rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ld-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.ld-lang {
  width: 100%; min-height: 56px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px;
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); text-align: start; cursor: pointer; font: inherit;
}
.ld-lang .ld-name { font: 600 1.05rem var(--font-sans); }
.ld-lang small { color: var(--muted); font-size: .8rem; }
.ld-lang:hover { border-color: var(--accent); }
.ld-lang:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }
.ld-lang[aria-pressed="true"] { background: var(--fill-indigo); border-color: var(--fill-indigo); color: #fff; }
.ld-lang[aria-pressed="true"] small { color: rgb(255 255 255 / .8); }
.ld-none { color: var(--muted); margin: 14px 0; }
.icon-btn {
  flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius); border: 0; background: var(--cf, var(--fill-indigo)); color: #fff; cursor: pointer;
}
#ambientBtn { --cf: var(--fill-peacock); }
#themeBtn { --cf: var(--fill-indigo); }
.icon-btn:hover { filter: brightness(1.12); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn[aria-pressed="true"] { background: var(--fill-kumkum); color: #fff; }

.hero { position: relative; z-index: 3; isolation: isolate; overflow: hidden; min-height: min(100svh, 920px); display: grid; align-items: center; background: #150833; color: #fff; }
.hero-frame { position: absolute; inset: 0; z-index: -3; background: #150833; }
.hero-art { position: absolute; inset: -3%; width: 106%; height: 106%; }
.hero-art picture, .hero-art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.hero-art .layer { transition: transform .6s var(--ease); will-change: transform; }
/* Hero slider (modules/hero): each slide has its own entrance; the active image drifts slowly. */
.hero-slides { position: absolute; inset: 0; }
.hero-slides .slide { position: absolute; inset: 0; opacity: 0; z-index: 0; }
.hero-slides .slide img { object-position: var(--focus, 60% 50%); }
.hero-slides .slide.is-prev { opacity: 1; z-index: 1; transition: opacity 1.2s ease 1s; }
.hero-slides .slide.is-on { opacity: 1; z-index: 2; }
.hero-slides .slide.is-on img { animation: hero-drift 9s ease-out both; }
.hero-slides .fx-zoom.is-on { animation: hero-fade 1.6s ease both; }
.hero-slides .fx-wipe.is-on { animation: hero-wipe 1.4s cubic-bezier(.7, 0, .2, 1) both; }
.hero-slides .fx-rise.is-on { animation: hero-rise 1.4s cubic-bezier(.7, 0, .2, 1) both; }
.hero-slides .fx-iris.is-on { animation: hero-iris 1.6s cubic-bezier(.5, 0, .2, 1) both; }
.hero-slides .fx-blur.is-on { animation: hero-blur 1.8s ease both; }
@keyframes hero-drift { from { transform: scale(1.12); } to { transform: scale(1.02); } }
@keyframes hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes hero-wipe { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-rise { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hero-iris { from { clip-path: circle(0% at 62% 50%); } to { clip-path: circle(150% at 62% 50%); } }
@keyframes hero-blur { from { opacity: 0; filter: blur(18px) saturate(1.6); } to { opacity: 1; filter: none; } }
.hero-dots { position: absolute; right: var(--gutter); bottom: 52px; z-index: 3; display: flex; gap: 2px; }
.hero-dots[hidden] { display: none; }
.hero-dots button { width: 32px; height: 44px; border: 0; background: none; cursor: pointer; padding: 0; display: grid; place-items: center; }
.hero-dots button::before { content: ""; width: 22px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .45); transition: background .3s, width .3s; }
.hero-dots button[aria-pressed="true"]::before { background: var(--haldi); width: 28px; }
.hero-dots button:focus-visible { outline: 3px solid var(--haldi); outline-offset: -6px; }
@media (prefers-reduced-motion: reduce) {
  .hero-slides .slide.is-on, .hero-slides .slide.is-on img { animation: none; }
}
.frame-label { position: absolute; right: var(--gutter); bottom: 18px; z-index: 2; font: 600 .74rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: rgba(14, 13, 18, .8); padding: 5px 9px; border-radius: var(--radius-sm); }
.hero-scrim { display: none; }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(app/%23n)'/%3E%3C/svg%3E"); }
.hero-inner { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy { position: relative; z-index: 2; padding: clamp(26px, 4vw, 44px); background: rgba(14, 13, 18, .9); border-radius: var(--radius); }
.hero-copy::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--band); border-radius: var(--radius) var(--radius) 0 0; }
.hero h1 { font-size: clamp(2.5rem, 5.6vw, 4.6rem); margin: 0 0 20px; color: #fff; letter-spacing: -.015em; line-height: 1.04; }
.hero .hl { color: var(--haldi); }
.deva-xl { display: block; font-family: var(--font-display); font-size: .5em; letter-spacing: 0; color: #ff8fb3; margin-bottom: 12px; font-weight: 600; }
.lede { font-size: clamp(1.08rem, 1.6vw, 1.25rem); color: rgba(255, 255, 255, .84); max-width: 540px; margin: 0 0 28px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; }
.hero .btn.ghost { color: #fff; border-color: #fff; }
.hero .btn.ghost:hover { background: #fff; color: #0e0d12; }
.hero .search input { background: #fff; color: #15121a; border-color: transparent; }
.hero .search input::placeholder { color: #55505c; }
.hero .search > svg { color: var(--fill-kumkum); }
.hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 22px 0 0; font: 500 .88rem var(--font-sans); color: rgba(255, 255, 255, .8); }
.hero-facts li { padding: 4px 10px; border-radius: var(--radius-sm); border-left: 4px solid var(--c); background: rgba(255, 255, 255, .07); }
.hero-facts li:nth-child(1) { --c: var(--saffron); } .hero-facts li:nth-child(2) { --c: var(--kumkum); }
.hero-facts li:nth-child(3) { --c: var(--peacock); } .hero-facts li:nth-child(4) { --c: var(--tulsi); }
.hero-facts b { color: #fff; font-weight: 700; }

.hero-visual { position: relative; min-height: 520px; }
.float-card { position: absolute; z-index: 3; display: grid; gap: 6px; padding: 14px 16px; border-radius: var(--radius); max-width: 260px;
  background: var(--surface-solid); border: 1px solid var(--line); border-top: 5px solid var(--c); box-shadow: var(--shadow-lg); color: var(--text); font-size: .92rem; line-height: 1.4;
  animation: floaty 7s ease-in-out infinite; }
.float-card .fc-top { justify-self: start; font: 600 .7rem/1 var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: #fff; background: var(--cf); padding: 5px 7px 4px; border-radius: var(--radius-sm); }
.float-card .dot { display: none; }
.float-card .fc-sa { font: 400 1.15rem/1.35 var(--font-sa); color: var(--sa); margin: 2px 0 0; }
.float-card p { margin: 0; }
.float-card small { color: var(--muted); }
.fc-verse { --c: var(--peacock); --cf: var(--fill-peacock); right: 4%; top: 4%; }
.fc-lang { --c: var(--kumkum); --cf: var(--fill-kumkum); left: 2%; top: 42%; animation-delay: -2.5s; }
.fc-story { --c: var(--indigo); --cf: var(--fill-indigo); right: 10%; bottom: 4%; min-width: 230px; animation-delay: -4.5s; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.chip { font: 600 .8rem var(--font-sans); padding: 3px 9px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); color: var(--text); }
.chip.on { background: var(--fill-kumkum); color: #fff; border-color: var(--fill-kumkum); }
.chip.on + .chip.on { background: var(--fill-indigo); border-color: var(--fill-indigo); }
.st-progress { display: flex; gap: 3px; margin-top: 4px; }
.st-progress i { flex: 1; height: 6px; background: var(--line-strong); }
.st-progress i.on { background: var(--indigo); }

@keyframes floaty { 50% { transform: translateY(-8px); } }

.search { position: relative; max-width: 560px; }
.search input:focus { outline: 3px solid var(--haldi); outline-offset: 0; }
.search > svg { position: absolute; z-index: 1; left: 18px; top: 50%; translate: 0 -50%; width: 20px; color: var(--accent); }
.search input {
  width: 100%; min-height: 54px; padding: 14px 18px 14px 50px; border-radius: var(--radius);
  border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--text); font: 400 1rem var(--font-sans); box-shadow: var(--shadow);
}
.search input::placeholder { color: var(--muted); }
.results {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px); list-style: none; margin: 0; padding: 6px;
  background: var(--surface-solid); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); text-align: left; z-index: 5;
}
.results li button { width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; font: inherit; }
.results li button:hover, .results li button:focus-visible { background: var(--surface); }
.results small { display: block; color: var(--muted); }
.results mark { background: var(--haldi); color: inherit; border-radius: 3px; }
.results .none { padding: 12px; color: var(--muted); }

.scroll-cue { display: none; position: absolute; bottom: 18px; left: 50%; translate: -50% 0; width: 26px; height: 42px; border: 1.5px solid var(--line); border-radius: 14px; z-index: 2; }
.scroll-cue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; background: var(--accent); border-radius: 2px; animation: cue 2s ease-in-out infinite; }

.phases { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.phases li { position: relative; padding: 20px; border-radius: var(--radius); border: 1px solid var(--line); border-top: 5px solid var(--c); background: var(--surface); }
.phases li:nth-child(1) { --c: var(--tulsi); --cf: var(--fill-tulsi); } .phases li:nth-child(2) { --c: var(--kumkum); --cf: var(--fill-kumkum); }
.phases li:nth-child(3) { --c: var(--saffron); --cf: var(--fill-saffron); } .phases li:nth-child(4) { --c: var(--peacock); --cf: var(--fill-peacock); }
.phases li:nth-child(5) { --c: var(--indigo); --cf: var(--fill-indigo); }
.phases li > span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); background: var(--cf); color: #fff; font: 700 1.05rem var(--font-display); margin-bottom: 12px; }
.phases li.now { box-shadow: 0 0 0 2px var(--c); }
.phases li.now > span { animation: glowRing 2.4s ease-in-out infinite; }
.phases li.done::after { content: "Done"; position: absolute; top: 18px; right: 16px; font: 600 .7rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fill-tulsi); }
.phases li.now::after { content: "Now"; position: absolute; top: 18px; right: 16px; font: 600 .7rem var(--font-sans); letter-spacing: .1em; text-transform: uppercase; color: var(--fill-kumkum); }
.phases h3 { margin: 0 0 4px; font-size: 1.15rem; }
.phases p { margin: 0; color: var(--muted); font-size: .95rem; }

/* Daily verse module */

.daily { position: relative; z-index: 2; padding: 0 var(--gutter); max-width: calc(var(--max) + 2 * var(--gutter)); margin: -40px auto 0; --cf: var(--fill-kumkum); }
.daily-card {
  display: grid; grid-template-columns: 1.1fr 1fr; overflow: hidden; border-radius: var(--radius);
  border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-lg);
}
.daily-art { position: relative; min-height: 280px; }
.daily-art .scene { position: absolute; inset: 0; width: 100%; height: 100%; }
.daily-body { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 12px; justify-content: center; }
.sanskrit { font-family: var(--font-sa); color: var(--sa); font-size: clamp(1.35rem, 2.4vw, 1.8rem); line-height: 1.8; margin: 0; white-space: pre-line; }
.daily-tr { font-family: var(--font-serif); font-size: 1.2rem; margin: 0; }
.daily-ref { color: var(--muted); font-size: .9rem; margin: 0; }
.daily .btn { align-self: flex-start; }


/* Learn module: story cards */

.stories { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.story {
  position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); border-top: 5px solid var(--c);
  background: var(--surface-solid); cursor: pointer;
  transition: transform .5s var(--ease), box-shadow .5s;
  transform-style: preserve-3d;
}
.story:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.story .art { aspect-ratio: 5 / 3; position: relative; overflow: hidden; }
.story .art .scene { width: 100%; height: 100%; transition: transform 6s var(--ease); }
.story:hover .art .scene { transform: scale(1.08); }
.story .body { padding: 18px 20px 20px; position: relative; }
.story .tag { display: inline-block; font: 600 .72rem/1 var(--font-sans); text-transform: uppercase; letter-spacing: .1em; color: #fff; background: var(--cf); padding: 5px 7px 4px; border-radius: var(--radius-sm); }
.story h3 { margin: 12px 0 6px; font-size: 1.4rem; }
.story p { margin: 0 0 14px; color: var(--muted); font-size: .98rem; }
.story .meta { display: flex; justify-content: space-between; align-items: center; font-size: .85rem; color: var(--muted); }
.story .play { width: 40px; height: 40px; display: grid; place-items: center; background: var(--cf); color: #fff; border-radius: var(--radius); }
.story .play svg { width: 14px; }
.story button.overlay { position: absolute; inset: 0; opacity: 0; cursor: pointer; }


/* Guide reader dialog */
.guide-dialog {
  width: min(760px, calc(100vw - 24px)); max-height: min(88vh, 1000px); padding: 0;
  margin-top: 5vh; display: none; flex-direction: column; overflow: hidden;
}
.guide-dialog[open] { display: flex; }
.gd-head { display: flex; justify-content: flex-end; padding: 10px 10px 0; }
.gd-body { overflow-y: auto; padding: 0 clamp(18px, 4vw, 40px) 32px; line-height: 1.7; }
.gd-body h2 { margin: 0 0 10px; font-size: clamp(1.6rem, 4vw, 2.2rem); }
.gd-body h3 { margin: 26px 0 8px; font-size: 1.25rem; }
.gd-deva { margin: 0; font-family: var(--font-sa, serif); color: var(--accent); font-size: 1.2rem; }
.gd-note { color: var(--muted); font-size: .92rem; }
.gd-passages { padding: 0; list-style: none; display: grid; gap: 10px; }
.gd-passages a, .gd-passages b { display: inline-block; min-height: 44px; padding: 10px 0; font-weight: 600; }
.gd-passages span { display: block; color: var(--muted); }
.gd-lede { font-size: 1.12rem; color: var(--muted); }
.gd-verses { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.gd-verses a { display: inline-block; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
@media (max-width: 640px) {
  .guide-dialog { margin-top: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
}

/* Guide and introduction titles with their share button (also used by the library's introductions). */
.gd-titlebar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.gd-titlebar h2 { margin: 0; }
.gd-titlebar .share-btn { flex: none; }

/* Storyteller module: home teaser, full-screen overlay, pickers and player */

/* ---------- Home teaser ---------- */
.st-teaser {
  position: relative; display: grid; grid-template-columns: 1.2fr 1fr; overflow: hidden;
  border-radius: var(--radius); border: 1px solid var(--line); border-top: 6px solid var(--c); background: var(--surface-solid);
}
.st-teaser-art { position: relative; min-height: 340px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 6px; padding: 6px; background: #150833; }
.st-teaser-art .scene { width: 100%; height: 100%; border-radius: var(--radius-sm); }
.st-teaser-art > :first-child { grid-row: span 2; }
.st-teaser-body { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.st-teaser-body h3 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0; }
.st-teaser-body p { margin: 0; color: var(--muted); font-family: var(--font-serif); font-size: 1.15rem; }
.st-teaser-body ul { margin: 0; padding-left: 18px; color: var(--muted); }
.st-teaser-body .btn { align-self: flex-start; }

/* ---------- Overlay ---------- */
body.st-open { overflow: hidden; }
.st-overlay {
  position: fixed; inset: 0; z-index: 80; overflow: hidden;
  background: #0b0a10;
  color: #f4f2f7; animation: stIn .5s var(--ease);
  --text: #f4f2f7; --muted: #a9a5b4; --line: rgba(255, 255, 255, .12); --surface: #16141c; --surface-solid: #16141c; --accent: #ffb37a; --on-accent: #0b0a10;
}
.st-overlay[hidden] { display: none; }
.st-overlay::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--band); z-index: 6; }
.st-close { position: absolute; top: 14px; right: 16px; z-index: 5; }
.st-body { height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.st-overlay[data-view="player"] .st-body { overflow: hidden; }
.st-back { color: #fff; font-weight: 600; text-decoration: none; font-size: .9rem; display: inline-flex; min-height: 44px; align-items: center; }
.st-loading, .st-empty { padding: 120px 24px; text-align: center; color: var(--muted); }
@keyframes stIn { from { opacity: 0; transform: scale(1.03); } }

/* ---------- Subject picker: portal cards ---------- */
.st-picker { padding: 28px var(--gutter) 60px; max-width: 1320px; margin: 0 auto; }
.st-intro { max-width: 640px; margin: 10px 0 28px; }
.st-intro h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 0 0 8px; color: #fff; outline: none; }
.st-intro p { color: var(--muted); margin: 0; font-size: 1.05rem; }
.st-intro .deva { font-size: 1.5rem; color: #ffd5a8; margin: 0; }
.st-group { margin-bottom: 34px; }
.st-group h3 { display: inline-block; font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: #0b0a10; background: #fff; padding: 5px 8px 4px; border-radius: var(--radius-sm); font-family: var(--font-sans); font-weight: 700; margin: 0 0 14px; }
.st-portals { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
.portal {
  position: relative; display: block; aspect-ratio: 3 / 4.2; text-decoration: none; color: inherit;
  border-radius: var(--radius); overflow: hidden; isolation: isolate; background: #16141c;
  border: 1px solid var(--line); border-top: 6px solid var(--c);
  transition: transform .5s var(--ease), box-shadow .5s, border-color .5s;
}
.portal-art { position: absolute; inset: 0 0 42% 0; z-index: -2; overflow: hidden; }
.portal-art .scene { width: 100%; height: 100%; transform: scale(1.15); transition: transform 1.2s var(--ease); }
.portal-glow { display: none; }
.portal-text { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; padding: 14px 16px; display: grid; align-content: start; gap: 2px; background: #16141c; }
.portal-text .deva { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--c); line-height: 1.3; }
.portal-text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.portal-text small { color: var(--muted); font-size: .85rem; }
.portal-text em { justify-self: start; font-style: normal; font-size: .7rem; font-weight: 700; text-transform: uppercase; color: #fff; background: var(--cf); padding: 4px 7px 3px; border-radius: var(--radius-sm); letter-spacing: .08em; margin-top: 8px; }
.portal:hover, .portal:focus-visible { transform: translateY(-6px); border-color: var(--c); box-shadow: 0 0 0 2px var(--c); }
.portal:hover .portal-art .scene, .portal:focus-visible .portal-art .scene { transform: scale(1.3); }
.portal.is-planned { filter: saturate(.55) brightness(.85); }
.portal.is-planned em { background: #3a3645; }

/* ---------- Chapter picker: journey of medallions ---------- */
.st-chapters { padding-top: 0; max-width: none; }
.st-chapter-hero { position: relative; height: min(46vh, 400px); margin: 0 calc(var(--gutter) * -1); display: flex; align-items: flex-end; overflow: hidden; }
.st-chapter-hero > .scene { position: absolute; inset: 0; width: 100%; height: 100%; animation: kenburns 30s ease-in-out infinite alternate; }
.st-chapter-shade { position: absolute; inset: 0; background: rgba(11, 10, 16, .35); }
.st-chapter-hero .st-intro { position: relative; margin: 0 var(--gutter) 24px; padding: 20px 24px; background: #0b0a10; border-radius: var(--radius); border-left: 6px solid var(--c); }
.journey { position: relative; max-width: 1240px; margin: 10px auto 0; padding: 20px 0 40px; }
.journey-path { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: 120px; translate: 0 -50%; color: var(--c); opacity: .6; }
.journey-path path { animation: march 30s linear infinite; }
.medals { position: relative; list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; }
.medal { width: 180px; }
.medal.high { transform: translateY(-34px); }
.medal.low { transform: translateY(34px); }
.medal a, .medal > span { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: inherit; text-align: center; }
.medal-art { position: relative; width: 150px; height: 150px; border-radius: var(--radius); overflow: hidden; border: 3px solid var(--c); transition: transform .4s var(--ease), box-shadow .4s; }
.medal-art .scene { width: 100%; height: 100%; transform: scale(1.3); }
.medal-num { position: absolute; margin-top: -8px; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--cf); color: #fff; font: 700 .9rem var(--font-display); }
.medal-text { display: grid; gap: 2px; margin-top: 10px; }
.medal-text strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.medal-text small { color: var(--muted); font-size: .8rem; }
.medal a:hover .medal-art, .medal a:focus-visible .medal-art { transform: scale(1.05); box-shadow: 0 0 0 4px #0b0a10, 0 0 0 7px var(--c); }
.medal.is-planned { opacity: .55; filter: grayscale(.5); }
.medal.is-planned .medal-num { background: #3a3645; }
.medal.is-planned .medal-art { border-color: #3a3645; }

/* ---------- Player ---------- */
.player { height: 100%; display: grid; grid-template-rows: auto 1fr auto; }
.player-bar { display: flex; align-items: center; gap: 14px; padding: 10px 70px 10px var(--gutter); }
.player-title { flex: 1; display: grid; text-align: center; }
.player-title strong { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
.player-title small { color: var(--muted); font-size: .8rem; }
.stage { position: relative; min-height: 0; padding: 0 var(--gutter); cursor: pointer; user-select: none; }
.beat { position: relative; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 14px; animation: beatIn .7s var(--ease); }
.panels { display: grid; gap: 10px; min-height: 0; }
.layout-split { grid-template-columns: 1fr 1fr; }
.layout-triptych { grid-template-columns: 1fr 1.3fr 1fr; }
.panel { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius); border: 1px solid rgba(255, 255, 255, .14); animation: panelIn .8s var(--ease) both; animation-delay: var(--d); background: #150833; }
.cam { position: absolute; inset: -12%; transition: transform 9s cubic-bezier(.25, .1, .25, 1); will-change: transform; }
.cam .scene { width: 100%; height: 100%; }
.panel-grain { display: none; }
/* Speech bubbles and hotspots float over the art; on phones the bubbles move below it (see the 640px block). */
.overlays, .bubbles { position: absolute; inset: 0 0 auto 0; bottom: var(--cap-h, 150px); pointer-events: none; }
.overlays > *, .bubbles > * { pointer-events: auto; }
.bubble {
  /* Shifted by its anchor's own percentage (x 10 → 10% of its width), so a bubble always stays inside the panel. */
  position: absolute; max-width: min(320px, 44%); translate: calc(var(--x, 50) * -1%) 0; padding: 12px 16px; border-radius: var(--radius);
  background: #fff; color: #15121a; border-left: 5px solid var(--c); font: 500 1.02rem/1.45 var(--font-serif); box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
  animation: pop .45s var(--ease) both; animation-delay: var(--d);
}
.bubble b { display: block; font: 700 .7rem var(--font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--cf); margin-bottom: 2px; }
.bubble::after { content: ""; position: absolute; left: clamp(12px, calc(var(--x, 50) * 1% - 10px), calc(100% - 32px)); bottom: -10px; border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; }
.hotspot { position: absolute; translate: -50% -50%; }
.hotspot > button {
  position: relative; min-height: 34px; padding: 6px 12px 6px 28px; border-radius: var(--radius-sm); border: 0;
  background: var(--cf); color: #fff; font: 600 .84rem var(--font-sans); cursor: pointer;
}
.hotspot > button::before { content: ""; position: absolute; left: 10px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: #fff; animation: hsPulse 1.8s ease-out infinite; }
.hs-note { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; width: min(300px, 70vw); padding: 12px 14px; border-radius: var(--radius); background: #fff; color: #15121a; border-top: 4px solid var(--c); font: 1rem/1.45 var(--font-serif); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); z-index: 3; }
.caption {
  position: relative; padding: 16px 20px; border-radius: var(--radius); cursor: auto;
  background: #16141c; color: #f4f2f7; border-left: 6px solid var(--c) !important;
  font-family: var(--font-serif); font-size: 1.12rem;
  border: 1px solid rgba(255, 255, 255, .12); max-width: 980px; width: 100%; margin: 0 auto;
}
.caption p { margin: 0; font: 500 clamp(1.05rem, 1.8vw, 1.3rem)/1.5 var(--font-serif); }
.caption p span { opacity: 0; animation: word .5s var(--ease) forwards; animation-delay: calc(.35s + var(--w)); }
.caption[dir="rtl"] p { font-family: var(--font-sans); }
.cap-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; font: 500 .82rem var(--font-sans); color: #a9a5b4; }
.cap-meta .badge.ok { background: var(--fill-tulsi); color: #fff; } .cap-meta .badge.warn { background: var(--fill-saffron); color: #fff; }
.cap-meta .fallback { color: #ff8fb3; }
.beat-count { position: absolute; top: 10px; left: 12px; padding: 3px 8px 2px; border-radius: var(--radius-sm); background: var(--cf); font: 700 .74rem var(--font-sans); color: #fff; }
.verse-card { position: absolute; top: 8%; right: 4%; width: min(380px, 60%); perspective: 1000px; cursor: pointer; animation: pop .6s var(--ease) both; animation-delay: 1.2s; outline: none; }
.vc-face { padding: 18px 20px; border-radius: var(--radius); backface-visibility: hidden; transition: transform .7s var(--ease); background: #16141c; border: 1px solid rgba(255, 255, 255, .14); border-top: 6px solid var(--haldi); text-align: center; }
.vc-front .sanskrit { font-size: clamp(1.05rem, 2vw, 1.35rem); margin: 6px 0; color: #ffd9a0; }
.vc-ref { font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--haldi); }
.vc-front small { color: var(--muted); }
.vc-back { position: absolute; inset: 0; transform: rotateY(180deg); display: grid; place-content: center; gap: 12px; }
.vc-back p { margin: 0; font: 1.05rem/1.5 var(--font-serif); }
.verse-card.flipped .vc-front { transform: rotateY(-180deg); }
.verse-card.flipped .vc-back { transform: rotateY(0); }
.verse-card:focus-visible .vc-face { outline: 2px solid var(--haldi); outline-offset: 3px; }
.player-foot { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px var(--gutter) 18px; }
.nav-btn { width: 48px; height: 48px; border-radius: var(--radius); border: 0; background: var(--cf); color: #fff; font-size: 1.6rem; cursor: pointer; }
.nav-btn:hover { filter: brightness(1.15); }
.beat-dots { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.beat-dots button { width: 22px; height: 6px; padding: 0; border-radius: 0; border: 0; background: #3a3645; cursor: pointer; position: relative; }
.beat-dots button::after { content: ""; position: absolute; inset: -16px; }
.beat-dots button[aria-current="true"] { background: var(--c); }
.end-card { height: 100%; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; animation: beatIn .7s var(--ease); cursor: auto; }
.end-card h3 { font-size: clamp(1.8rem, 4vw, 2.8rem); margin: 0; color: #fff; }
.end-card p { margin: 0; color: var(--muted); }
.end-verses, .end-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.end-actions { margin-top: 10px; }

@keyframes beatIn { from { opacity: 0; } }
@keyframes panelIn { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes pop { from { opacity: 0; transform: scale(.85) translateY(8px); } }
@keyframes word { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes hsPulse { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 122, .8); } 100% { box-shadow: 0 0 0 12px rgba(255, 210, 122, 0); } }
@keyframes kenburns { to { transform: scale(1.12) translate(-2%, 1%); } }
@keyframes march { to { stroke-dashoffset: -280; } }

@media (prefers-reduced-motion: reduce) {
  .caption p span { opacity: 1; }
}

@media (max-width: 860px) {
  .st-teaser { grid-template-columns: 1fr; }
  .st-teaser-art { min-height: 240px; }
  .layout-triptych { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
  .layout-triptych .panel:nth-child(2) { grid-column: span 2; grid-row: 1; }
  .medal.high, .medal.low { transform: none; }
  .journey-path { display: none; }
  .medals { flex-direction: column; align-items: center; }
  .medal { width: 100%; max-width: 360px; }
  .medal a, .medal > span { grid-template-columns: 110px 1fr; justify-items: start; text-align: left; align-items: center; }
  .medal-art { width: 100px; height: 100px; }
  .medal-num { margin: 0; }
  .verse-card { top: 4%; right: 3%; width: 70%; }
}
@media (max-width: 640px) {
  /* Phones: each panel runs the full width at its own art's shape (--ar, set from the image; most art
     is landscape), so the whole scene shows, and the beat scrolls when its panels are taller than the screen. */
  .stage { padding: 0; overflow-y: auto; overscroll-behavior: contain; }
  .beat { height: auto; min-height: 100%; grid-template-rows: auto auto; align-content: center; padding-bottom: 16px; }
  .panels, .layout-split, .layout-triptych { grid-template-columns: 1fr; grid-template-rows: none; gap: 4px; }
  .layout-triptych .panel:nth-child(2) { grid-column: auto; grid-row: auto; }
  .panel { aspect-ratio: var(--ar, 16 / 9); border-radius: 0; border-width: 0; }
  .cam { inset: -6%; }
  /* The caption stays pinned to the bottom of the screen while the art scrolls behind it, so the
     text is never below the fold; a long caption scrolls inside its own box. */
  .caption { margin: 0 var(--gutter); width: auto; position: sticky; bottom: 10px; z-index: 4; max-height: 42dvh; overflow-y: auto; box-shadow: 0 -10px 30px rgba(0, 0, 0, .55); }
  .player-bar { padding-right: 64px; }
  .player-title { text-align: left; }
  .layout-split { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  /* A phone panel is a short strip with no room for a bubble or a verse card on top of the art,
     so both sit below the panels, in the flow, above the pinned caption. */
  .bubbles { position: static; display: grid; gap: 8px; margin: 6px var(--gutter) 0; }
  .bubbles:empty { display: none; }
  .bubbles .bubble { position: relative; left: auto !important; top: auto !important; translate: none; max-width: none; font-size: .95rem; }
  .bubbles .bubble::after { display: none; }
  .verse-card { position: relative; top: auto; right: auto; width: auto; margin: 0 var(--gutter); }
  .st-portals { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .portal-text { padding: 12px; }
  .portal-text small { display: none; }
}
/* Portal art keeps its subject in the top 58%; the label box covers the rest. */
.portal-art .scene-img { object-position: 50% 15%; }
.medal-art .scene-img { object-position: 50% 35%; }

/* Entry veil: lotus mandala, diya flame and marigold sparks, then a curtain opening (veil.js). */
.st-veil { position: absolute; inset: 0; z-index: 20; pointer-events: none; display: grid; place-items: center; overflow: hidden; }
.vl-curtain {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: #1d1033;
  animation: vl-open .55s cubic-bezier(.7, 0, .2, 1) .9s forwards;
}
.vl-l { left: 0; transform-origin: left; }
.vl-r { right: 0; transform-origin: right; --dir: 1; }
.vl-l { --dir: -1; }
.vl-l { border-right: 2px solid #ffc23d; }
.vl-r { border-left: 2px solid #ffc23d; }
@keyframes vl-open { to { transform: translateX(calc(var(--dir) * 102%)); } }

.vl-mandala { position: relative; width: min(56vmin, 340px); animation: vl-spin 1.5s ease-out both, vl-out .5s ease-in .95s forwards; filter: drop-shadow(0 0 24px rgba(255, 150, 40, .45)); }
.vl-mandala path, .vl-mandala circle { transform-box: fill-box; transform-origin: 50% 100%; }
.vl-p1, .vl-p2, .vl-p3 { transform: scaleY(0); animation: vl-bloom .5s cubic-bezier(.2, .8, .2, 1.2) var(--d) forwards; stroke-width: .8; }
.vl-p1 { fill: rgba(229, 23, 95, .85); stroke: #ffc23d; }
.vl-p2 { fill: rgba(255, 122, 26, .7); stroke: #ffd98a; }
.vl-p3 { fill: rgba(255, 194, 61, .35); stroke: rgba(255, 194, 61, .9); }
.vl-ring { fill: none; stroke: rgba(255, 194, 61, .6); stroke-width: .8; stroke-dasharray: 503; stroke-dashoffset: 503; animation: vl-draw .8s ease-out .1s forwards; }
.vl-dot { fill: #ffc23d; opacity: 0; transform-origin: center; animation: vl-pop .3s ease-out var(--d) forwards; }
.vl-core { fill: #ffc23d; }
.vl-flame { fill: #fff3c4; transform-origin: 50% 100%; animation: vl-flicker .18s ease-in-out infinite alternate; }
.vl-sparks { position: absolute; inset: 0; }
.vl-sparks i { position: absolute; left: var(--x); bottom: -10px; width: 6px; height: 6px; border-radius: 50%; background: #ff9f1c; box-shadow: 0 0 10px #ffc23d; opacity: 0; transform: scale(var(--s)); animation: vl-rise 1.3s ease-out var(--d) forwards; }

@keyframes vl-bloom { to { transform: scaleY(1); } }
@keyframes vl-draw { to { stroke-dashoffset: 0; } }
@keyframes vl-pop { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes vl-spin { from { transform: rotate(-30deg) scale(.6); } to { transform: rotate(0) scale(1); } }
@keyframes vl-out { to { opacity: 0; transform: scale(1.6); } }
@keyframes vl-flicker { from { transform: scaleY(.9) skewX(-3deg); } to { transform: scaleY(1.08) skewX(3deg); } }
@keyframes vl-rise { 0% { opacity: 0; } 15% { opacity: .9; } 100% { opacity: 0; transform: translateY(-70vh) scale(var(--s)); } }

/* Views inside the Story World fade in gently. */
.st-body > * { animation: st-fade .45s ease-out both; }
@keyframes st-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .st-veil { display: none; }
  .st-body > * { animation: none; }
}

/* Reader module */

.reader { display: grid; grid-template-columns: 260px 1fr; gap: 28px; align-items: start; }
.reader-nav { position: sticky; top: 84px; display: grid; gap: 20px; }
.tabs { display: grid; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 4px; overscroll-behavior: contain; }
.read-filters { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 8px 10px; }
.read-filters label { font-size: .85rem; color: var(--muted); font-weight: 600; }
.read-filters select, .read-filters input {
  min-width: 0; min-height: 42px; padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font: inherit;
}
.read-filters :is(select, input):focus-visible { outline: 3px solid var(--haldi); outline-offset: 0; }
.read-count { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .85rem; }
.read-none { margin: 0; padding: 12px; color: var(--muted); }
.tab {
  text-align: left; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 5px solid var(--c);
  background: var(--surface); color: var(--text); cursor: pointer; font: 600 1rem var(--font-sans);
}
.tab small { display: block; color: var(--muted); font-size: .8rem; }
.tab:hover { border-color: var(--c); }
.tab[aria-selected="true"] { border-color: var(--cf); background: var(--cf); color: #fff; }
.tab[aria-selected="true"] small { color: rgba(255, 255, 255, .85); }
.toggles { display: grid; gap: 6px; padding: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.chk { display: flex; gap: 10px; align-items: center; font-size: .92rem; cursor: pointer; min-height: 32px; }
.chk input { accent-color: var(--fill-peacock); width: 18px; height: 18px; }
.sel { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: .92rem; min-height: 44px; }
.sel select { min-height: 36px; max-width: 60%; }
.bookmarks h3 { font-size: .95rem; margin: 0 0 8px; }
.bookmarks ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.bookmarks li button { background: none; border: 0; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-align: left; }
.bookmarks .empty { color: var(--muted); font-size: .88rem; }

.verse {
  position: relative; border-radius: var(--radius); border: 1px solid var(--line); border-top: 6px solid var(--c); overflow: hidden;
  background: var(--surface);
  animation: fadeUp .6s var(--ease);
}
.verse-banner { position: relative; height: 150px; }
.verse-banner .scene { width: 100%; height: 100%; }
.verse-inner { padding: 24px clamp(20px, 4vw, 44px) 36px; position: relative; }
.verse-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.verse-head h3 { margin: 0; font-size: 1.5rem; }
.verse-head .who { color: var(--muted); font-size: .9rem; margin: 2px 0 0; }
.verse-head .text-flag { color: var(--muted); font-size: .82rem; font-style: italic; margin: 4px 0 0; max-width: 60ch; }
.verse-actions { display: flex; gap: 8px; }
.verse-actions .icon-btn { --cf: var(--fill-indigo); }
.verse-actions .icon-btn[aria-pressed="true"] { background: var(--fill-kumkum); color: #fff; }
.verse .sanskrit { font-size: clamp(1.5rem, 3vw, 2.2rem); text-align: center; padding: 20px 0 8px; }
.verse .accent-note { text-align: center; font-size: .8rem; color: var(--muted); margin: 0 0 6px; }
.translit { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 1.2rem; color: var(--muted); white-space: pre-line; margin: 0 0 22px; }
.padapatha { text-align: center; font-family: var(--font-serif); font-size: .98rem; color: var(--muted); margin: -12px 0 22px; line-height: 1.7; }
.padapatha [lang="sa"] { font-family: var(--font-deva, inherit); font-size: .8rem; letter-spacing: .04em; color: var(--accent); margin-inline-end: 6px; }
.words { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0 0 28px; padding: 0; list-style: none; }
.words li { padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-solid); font-size: .9rem; transition: transform .2s; }
.words li:hover { transform: translateY(-2px); border-color: var(--c); }
.words b { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; color: var(--accent); font-weight: 600; margin-right: 6px; }
.tr-card { padding: 18px 20px; border-radius: var(--radius); border: 1px solid var(--line); border-left: 5px solid var(--fill-saffron); background: var(--surface-solid); }
.tr-card + .tr-card { border-left-color: var(--fill-indigo); }
.tr-card .tr-lang { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .12em; font-weight: 600; margin-bottom: 8px; }
.tr-card p { margin: 0; font-family: var(--font-serif); font-size: 1.25rem; line-height: 1.55; }
.tr-card[dir="rtl"] p { font-family: var(--font-sans); font-size: 1.1rem; }
.tr-card.missing p { color: var(--muted); font-size: 1.05rem; font-style: italic; }
.tr-card.missing a { font-style: normal; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 3px; border-radius: var(--radius-sm); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: #fff; white-space: nowrap; }
.badge.ok { background: var(--fill-tulsi); } .badge.warn { background: var(--fill-saffron); } .badge.info { background: #1d4ed8; }
.commentary { margin-top: 18px; padding: 16px 20px; border-left: 5px solid var(--fill-indigo); background: var(--surface-solid); border-radius: 0 var(--radius) var(--radius) 0; }
.commentary h4 { margin: 0 0 6px; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--text); }
.commentary p { margin: 0; font-family: var(--font-serif); font-size: 1.08rem; }

.audio { display: flex; align-items: center; gap: 14px; margin: 22px 0; padding: 12px 16px; border-radius: var(--radius); border: 1px dashed var(--line); }
.audio .bars { display: flex; gap: 3px; align-items: center; height: 28px; flex: 1; min-width: 0; overflow: hidden; }
.audio .bars i { width: 3px; background: var(--c); opacity: .35; animation: bar 1.6s ease-in-out infinite; }
.audio small { color: var(--muted); flex-shrink: 0; }

.trust { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.trust div { background: var(--surface-solid); padding: 12px 14px; }
.trust dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--muted); }
.trust dd { margin: 4px 0 0; font-size: .92rem; }
.trust-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 14px; font-size: .88rem; color: var(--muted); }
.link-btn { background: none; border: 0; color: var(--accent); font: 600 .9rem var(--font-sans); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 6px 0; }


/* Folding panels: display options and bookmarks (open on wide screens), and the source details. */
.reader-more { border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); }
.reader-more > summary, .trust-wrap > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px;
  padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: .92rem; list-style: none;
}
.reader-more > summary::-webkit-details-marker, .trust-wrap > summary::-webkit-details-marker { display: none; }
.reader-more > summary::after, .trust-wrap > summary span:first-child::after { content: "▾"; margin-left: 8px; color: var(--muted); transition: transform .2s; display: inline-block; }
.reader-more[open] > summary::after, .trust-wrap[open] > summary span:first-child::after { transform: rotate(180deg); }
.reader-more > summary:focus-visible, .trust-wrap > summary:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; border-radius: var(--radius); }
.reader-more .toggles { border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.reader-more .bookmarks { padding: 0 14px 14px; }

/* Previous / next verse, with the chanting note between them. */
.verse-step { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin: 22px 0 6px; }
.verse-audio { text-align: center; color: var(--muted); font-size: .82rem; }

.trust-wrap { margin-top: 14px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface-solid); }
.trust-wrap > summary { color: var(--muted); }
.trust-wrap .trust { margin: 0 14px; }
.trust-note { margin: 10px 14px 14px; font-size: .85rem; color: var(--muted); }
.trust-foot { justify-content: flex-end; }

@media (max-width: 860px) {
  /* One swipeable row of verses instead of a tall list. */
  .tabs {
    grid-auto-flow: column; grid-auto-columns: max-content; grid-template-columns: none;
    max-height: none; overflow-x: auto; overflow-y: hidden; padding: 2px 2px 8px; scroll-snap-type: x proximity;
  }
  .tab { padding: 10px 14px; scroll-snap-align: center; }
  .tab small { display: none; }
  .verse-banner { height: 110px; }
  .verse-audio { display: none; }
  .verse-step { grid-template-columns: auto auto; justify-content: space-between; }
}

/* Library module */

.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.book { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); border-top: 5px solid var(--c); background: var(--surface-solid); }
.book .art { height: 120px; } .book .art .scene { width: 100%; height: 100%; }
.book .body { padding: 14px 16px 18px; }
.book .deva { color: var(--sa); font-size: 1.25rem; }
.book h3 { margin: 2px 0 2px; font-size: 1.05rem; }
.book .count { color: var(--muted); font-size: .85rem; }
.book .phase { position: absolute; top: 10px; right: 10px; padding: 4px 8px 3px; border-radius: var(--radius-sm); font: 700 .7rem var(--font-sans); letter-spacing: .08em; text-transform: uppercase; background: var(--cf); color: #fff; }
.meter { height: 8px; background: var(--line); margin-top: 12px; overflow: hidden; }
/* Share of the text already in the reader, computed at build time from the verse files. */
.meter span { display: block; height: 100%; background: var(--c); width: 0; transition: width 1.6s var(--ease); }
.book .pct { font-size: .78rem; color: var(--muted); margin-top: 6px; }


.lib-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: 22px; }
.lib-none { color: var(--muted); }
.lib-read { margin-top: 12px; width: 100%; }

/* Art direction module */

.palettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 22px; }
.palette { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--surface-solid); }
.palette .art { aspect-ratio: 16 / 9; } .palette .art .scene { width: 100%; height: 100%; }
.swatches { display: flex; height: 54px; }
.swatches button { flex: 1; border: 0; cursor: pointer; position: relative; transition: flex .3s var(--ease); }
.swatches button:hover, .swatches button:focus-visible { flex: 1.8; }
.swatches button span { position: absolute; bottom: 4px; left: 0; right: 0; font: 600 .66rem var(--font-sans); letter-spacing: .04em; opacity: 0; transition: opacity .2s; }
.swatches button:hover span, .swatches button:focus-visible span { opacity: 1; }
.palette .body { padding: 16px 20px 20px; }
.palette h3 { margin: 0 0 2px; font-size: 1.2rem; }
.palette .ref { color: var(--muted); font-style: italic; font-size: .85rem; margin: 0 0 10px; }
.palette dl { margin: 0; display: grid; gap: 6px; font-size: .9rem; }
.palette dt { display: inline; color: var(--muted); }
.palette dd { display: inline; margin: 0; }


/* Ambient music player: card bottom-right from 768px, compact bottom bar on phones. */
.music {
  position: fixed;
  z-index: 60;
  right: 20px;
  bottom: 20px;
  width: min(380px, calc(100vw - 40px));
  padding: 14px 16px 12px;
  background: var(--surface-solid);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: none;
  font-family: var(--font-sans);
}
.music.is-open { display: block; animation: music-in .35s var(--ease); }
.music::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  border-radius: 14px 14px 0 0;
  background: var(--band);
}
@keyframes music-in { from { opacity: 0; transform: translateY(12px); } }

/* Minimized: the card folds into a round button in the same corner; the music keeps playing. */
.music-fab { display: none; }
.music.is-min { width: auto; padding: 0; border: 0; background: none; box-shadow: none; border-radius: 50%; }
.music.is-min::before, .music.is-min .music-panel { display: none; }
.music.is-min .music-fab {
  display: grid; place-items: center; position: relative; width: 58px; height: 58px; padding: 0; border: 2px solid var(--surface-solid);
  border-radius: 50%; background: none; box-shadow: var(--shadow-lg); cursor: pointer; overflow: hidden;
}
.music-fab .music-art { position: absolute; inset: 0; width: auto; height: auto; border-radius: 50%; padding-bottom: 16px; }
.music-fab > svg { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; color: #fff; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .4)); }
.music.is-playing .music-fab .music-art i { animation: music-eq 1.1s ease-in-out infinite alternate; }
.music-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Track pages: ten tracks at a time. */
.music-pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.music-pager[hidden] { display: none; }
.music-page { color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }
.music-pager .music-btn:disabled { opacity: .35; cursor: default; }

/* With the player in the bottom-right corner, back-to-top moves to the bottom-left. */
body.has-music .to-top { right: auto; left: max(16px, env(safe-area-inset-left)); }

.music-row { display: grid; grid-template-columns: 46px 1fr auto; grid-template-areas: 'art meta tools' 'transport transport transport'; align-items: center; column-gap: 12px; row-gap: 6px; }
.music-art { grid-area: art; }
.music-meta { grid-area: meta; }
.music-tools { grid-area: tools; display: flex; gap: 2px; }
.music-transport { grid-area: transport; display: flex; justify-content: center; align-items: center; gap: 14px; }
.music-art {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--saffron), var(--kumkum) 55%, var(--indigo));
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 3px;
  padding: 0 0 11px;
}
.music-art i { width: 3px; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .92); }
.music.is-playing .music-art i { animation: music-eq 1.1s ease-in-out infinite alternate; }
.music-art i:nth-child(2) { animation-delay: -.3s; height: 16px; }
.music-art i:nth-child(3) { animation-delay: -.6s; height: 22px; }
.music-art i:nth-child(4) { animation-delay: -.15s; height: 14px; }
.music-art i:nth-child(5) { animation-delay: -.45s; height: 10px; }
@keyframes music-eq { 0% { transform: scaleY(.35); } 100% { transform: scaleY(1); } }
.music-art i { transform-origin: bottom; }

.music-meta { min-width: 0; flex: 1; display: grid; }
.music-title, .music-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.25; }
.music-sub { color: var(--muted); font-size: .8rem; }

.music-btn {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.music-btn svg { width: 18px; height: 18px; }
.music-btn:hover, .music-btn[aria-expanded="true"] { color: var(--text); background: var(--surface-2); }
.music-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.music-play { width: 40px; height: 40px; background: var(--action); color: var(--on-accent); }
.music-play:hover { background: var(--action-hover); color: var(--on-accent); }

.music-progress { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.music-seek, .music-vol input {
  -webkit-appearance: none;
  appearance: none;
  height: 4px;
  border-radius: 4px;
  background: var(--line);
  cursor: pointer;
}
.music-track { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.music-track .music-fill { position: absolute; left: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--action); pointer-events: none; }
.music-seek { width: 100%; background: var(--line); }
.music-track .music-seek { position: relative; background: transparent; }
.music-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 4px; background: var(--line); }
.music-seek::-webkit-slider-thumb, .music-vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--action); border: 2px solid var(--surface-solid); }
.music-seek::-moz-range-thumb, .music-vol input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--action); border: 2px solid var(--surface-solid); }
.music-vol { display: flex; align-items: center; gap: 4px; }
.music-vol svg { width: 16px; height: 16px; }
.music-vol input { width: 64px; }

.music-list {
  list-style: none;
  margin: 10px -6px 0;
  padding: 6px 0 0;
  border-top: 1px solid var(--line);
  max-height: min(470px, 55vh);
  overflow-y: auto;
}
.music-list button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
}
.music-list button:hover, .music-list button:focus-visible { background: var(--surface-2); outline: none; }
.music-list span { display: grid; min-width: 0; }
.music-list b { font-weight: 600; font-size: .9rem; }
.music-list small { color: var(--muted); font-size: .75rem; }
.music-list time { color: var(--muted); font-size: .75rem; font-variant-numeric: tabular-nums; }
.music-list [aria-current] b, .music-list [aria-current] time { color: var(--accent-2); }

.music-line { display: none; }

/* Phones: a compact bar along the bottom; the list opens upward as a sheet. */
@media (max-width: 767px) {
  .music {
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    border-radius: 14px 14px 0 0;
    border-width: 1px 0 0;
  }
  .music::before { display: none; }
  .music-line { display: block; position: absolute; inset: 0 0 auto; height: 3px; background: var(--line); border-radius: 14px 14px 0 0; overflow: hidden; }
  .music-line span { display: block; height: 100%; width: 0; background: var(--action); }
  .music-art { width: 38px; height: 38px; padding-bottom: 8px; }
  .music-progress, .music-prev { display: none; }
  .music-row { display: flex; gap: 10px; }
  .music-transport { gap: 2px; }
  .music-title { font-size: .92rem; }
  .music-btn { width: 40px; height: 40px; }
  .music-play { width: 42px; height: 42px; }
  .music-list { max-height: 50vh; margin-top: 8px; }
  body.has-music { padding-bottom: 72px; }
  body.has-music:has(.music.is-min) { padding-bottom: 0; }
  .music.is-min { left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  body.has-music:not(:has(.music.is-min)) .to-top { bottom: calc(84px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  .music.is-open, .music.is-playing .music-art i { animation: none; }
}

/* Global search dialog, hero result rows, and the filter chips shared by reader and library */

.fchips { display: flex; flex-wrap: wrap; gap: 6px; }
.fchip {
  min-height: 40px; padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--text);
  font: 600 .9rem var(--font-sans);
}
.fchip b { font-weight: 700; margin-left: 4px; color: var(--muted); }
.fchip[aria-pressed="true"] { background: var(--fill-kumkum); border-color: var(--fill-kumkum); color: #fff; }
.fchip[aria-pressed="true"] b { color: #fff; }
.fchip:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }

.search-dialog {
  width: min(760px, calc(100vw - 24px)); max-height: min(86vh, 900px); padding: 0;
  margin-top: 6vh; display: none; flex-direction: column; overflow: hidden;
}
.search-dialog[open] { display: flex; }
.sd-head { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px 18px; border-bottom: 1px solid var(--line); }
.sd-head > svg { width: 20px; flex: none; color: var(--accent); }
.sd-head input {
  flex: 1; min-width: 0; min-height: 46px; padding: 10px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: 400 1.05rem var(--font-sans);
}
.sd-head input:focus { outline: 3px solid var(--haldi); outline-offset: 0; }
.sd-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 18px 0; }
.sd-filters select {
  margin-left: auto; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--text); font: inherit;
}
.sd-filters #sdBook { margin-left: 0; }
.sd-filters select[hidden] { display: none; }
.sd-status { margin: 10px 18px 4px; color: var(--muted); font-size: .92rem; }
.sd-results { list-style: none; margin: 0; padding: 4px 10px 14px; overflow-y: auto; }

.sd-hit {
  display: flex; gap: 12px; align-items: flex-start; width: 100%; text-align: left; cursor: pointer;
  padding: 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--text); font: inherit;
}
.sd-hit:hover, .sd-hit:focus-visible { background: var(--surface); outline: none; }
.sd-hit:focus-visible { box-shadow: inset 0 0 0 2px var(--haldi); }
.sd-badge {
  flex: none; min-width: 52px; margin-top: 2px; padding: 2px 8px; border-radius: 999px; text-align: center;
  font: 700 .72rem var(--font-sans); letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.sd-badge.verse { background: var(--fill-peacock); }
.sd-badge.story { background: var(--fill-indigo); }
.sd-badge.text { background: var(--fill-kumkum); }
.sd-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sd-title { font-weight: 600; }
.sd-sub { color: var(--text); opacity: .85; font-size: .93rem; overflow-wrap: anywhere; }
.sd-main small { color: var(--muted); font-size: .8rem; }
.sd-more { margin: 8px auto 0; display: block; }
.results .sd-all { font-weight: 600; color: var(--accent); }

@media (max-width: 640px) {
  .search-dialog { margin-top: 0; width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .sd-filters select { margin-left: 0; width: 100%; }
}

/* Cookie settings banner */
.cookie-bar {
  position: fixed; z-index: 60; inset-inline: 12px; bottom: 12px; margin-inline: auto; max-width: 720px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px 18px;
  background: var(--surface-solid); color: var(--text); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.cookie-bar[hidden] { display: none; }
.cookie-bar p { flex: 1 1 320px; margin: 0; font-size: .95rem; line-height: 1.5; }
.cookie-bar h2 { font-size: 1.05rem; margin: 0 0 4px; }
.cookie-bar .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-bar button {
  min-height: 44px; min-width: 112px; padding: 10px 18px; border-radius: var(--radius-sm); cursor: pointer;
  font: 600 .95rem var(--font-sans); border: 1px solid var(--fill-kumkum); background: var(--fill-kumkum); color: #fff;
}
.cookie-bar button:focus-visible, .footer .link-btn:focus-visible { outline: 3px solid var(--haldi); outline-offset: 2px; }
.footer .link-btn { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; min-height: 44px; }

/* Ambient animations (all disabled under prefers-reduced-motion) */

.pulse { animation: pulse 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.rays { animation: rays 9s ease-in-out infinite; }
.ring { animation: ring 4s ease-in-out infinite; }
.spin-slow { animation: spin 40s linear infinite; }
.flame { animation: flicker 1.8s ease-in-out infinite; }
.sway { animation: sway 7s ease-in-out infinite; }
.bird { animation: flap .9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.birds { animation: drift 40s linear infinite; }
.birds.big { animation-duration: 60s; }
.twinkle { animation: twinkle 3s ease-in-out infinite; }
.clouds { animation: clouds 50s ease-in-out infinite alternate; }
.cape { animation: cape 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: left center; }

@keyframes pulse { 50% { opacity: .75; transform: scale(1.04); } }
@keyframes rays { 50% { opacity: .55; } }
@keyframes ring { 50% { opacity: .45; stroke-dashoffset: 40; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flicker { 0%, 100% { transform: scaleY(1) skewX(0); } 25% { transform: scaleY(1.06) skewX(-2deg); } 60% { transform: scaleY(.95) skewX(2deg); } }
@keyframes sway { 50% { transform: rotate(1.2deg); } }
@keyframes flap { 50% { transform: scaleY(.45); } }
@keyframes drift { from { transform: translateX(-60px); } to { transform: translateX(60px); } }
@keyframes twinkle { 50% { opacity: .2; } }
@keyframes clouds { to { transform: translateX(80px); } }
@keyframes cape { 50% { transform: skewY(-6deg) scaleX(1.08); } }
@keyframes glow { 50% { text-shadow: 0 0 60px rgba(255, 210, 122, .9), 0 0 10px rgba(255, 240, 200, .5); } }
@keyframes cue { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }
@keyframes bar { 50% { transform: scaleY(.3); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(16px); } }
@keyframes flash { 0% { background: rgba(143, 209, 138, .35); } }
@keyframes glowRing { 50% { box-shadow: 0 0 0 8px rgba(255, 210, 122, .15); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

.spin-rev { animation: spin 50s linear infinite reverse; }

/* Breakpoints shared across modules */

@media (max-width: 1080px) {
  .phases { grid-template-columns: repeat(2, 1fr); }
}
/* The header keeps its links on laptops and tablets in landscape; the menu button takes over on narrow screens. */
@media (max-width: 860px) {
  .icon-btn.menu-btn { display: inline-grid; place-items: center; }
  .nav { display: none; }
  .nav.open {
    display: flex; flex-direction: column; gap: 0; margin: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 8px var(--gutter) 14px; background: var(--bg);
    border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgb(0 0 0 / .18);
  }
  .nav.open a { padding: 14px 10px; font-size: 1.1rem; border-bottom: 1px solid var(--line); }
  .nav.open a:last-child { border-bottom: 0; }
  .nav.open a::after { left: 0; right: auto; width: 4px; top: 10px; bottom: 10px; height: auto; transform: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { min-height: 0; display: none; }
  .reader { grid-template-columns: 1fr; }
  .reader-nav { position: static; }
  .daily-card { grid-template-columns: 1fr; }
  .daily-art { min-height: 200px; }
  .trust { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .controls { gap: 6px; }
  .lang-btn { padding: 0 8px; gap: 6px; }
  .lang-btn .chev { display: none; }
  .lang-now { max-width: 72px; }
  .phases { grid-template-columns: 1fr; }
  .palettes { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .lang-btn > svg:first-child { display: none; }
  .brand-mark { width: 44px; height: 44px; }
  .lang-now { max-width: 96px; }
}