@charset "UTF-8";
/* thevyasa.in — the theme layer.
 *
 * Loaded LAST on every page, after style.css and the section's own sheet, so
 * this file alone decides how the site looks and the others decide how it is
 * laid out. The earlier look was a library room — oak rail, paper fibre,
 * brass hairline, a wooden shelf — and it read as dated. This is the same
 * visual language as the Ākhyāna Panel: a near-white page lit by warm glows,
 * glass cards, generous radii, and one gradient (amber → saffron → rose)
 * kept for the few things that should pop: titles, numbers and the primary
 * button. Everything else stays quiet, because these are pages for reading.
 *
 * Two rules it keeps:
 *   - The reading surface is the calmest thing on the page. Text sits on a
 *     near-opaque card, never on the glows.
 *   - Devanāgarī headings carry vertical padding. A gradient is painted
 *     through the glyphs with background-clip, and without room above the
 *     line the matras are cut off.
 *
 * The WordPress homepage shelf is built from style.css's @embed regions and
 * does not load this file, so the homepage is untouched by it.
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */
:root {
  --room:        #fffbf5;
  --paper:       #ffffff;
  --paper-warm:  #fff6ea;
  --paper-card:  #ffffff;
  --ink:         #1f2937;
  --ink-soft:    #6b7280;
  --rule:        #f1e2cf;
  --accent:      #ea580c;
  --link:        #c2410c;
  --link-visit:  #9a3412;
  --mark:        #fde68a;
  --verse-bg:    #fff8ef;
  --verse-edge:  #fbd5a8;
  --verse-ink:   #2a1a0d;
  --scan-mat:    #faf4ec;
  --brass:       #c2410c;
  --brass-lit:   #fdba74;
  --cast:        rgba(124, 45, 18, 0.22);
  --tex-fibre:   none;
  --tex-wood:    none;

  --ui: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans Devanagari", sans-serif;
  --sa: var(--serif);

  --go:     linear-gradient(135deg, #fbbf24 0%, #f97316 42%, #ec4899 100%);
  --title:  linear-gradient(120deg, #9a3412 0%, #ea580c 55%, #db2777 100%);
  --edge:   linear-gradient(135deg, rgba(251,191,36,.60), rgba(249,115,22,.38) 50%, rgba(236,72,153,.34));
  --glass:        rgba(255, 255, 255, 0.84);
  --glass-strong: rgba(255, 255, 255, 0.94);
  --glass-edge:   rgba(255, 255, 255, 0.95);
  --ring:         rgba(234, 88, 12, 0.10);
  --tint:         rgba(249, 115, 22, 0.07);
  --tint-strong:  rgba(249, 115, 22, 0.13);
  --shadow:       0 1px 2px rgba(124,45,18,.05), 0 18px 48px -24px rgba(124,45,18,.30);
  --shadow-lift:  0 2px 4px rgba(124,45,18,.06), 0 24px 56px -22px rgba(124,45,18,.38);
  --glow-a: rgba(251, 191, 36, 0.30);
  --glow-b: rgba(249, 115, 22, 0.16);
  --glow-c: rgba(236, 72, 153, 0.10);
  --r-lg: 26px;
  --r:    18px;
  --r-sm: 12px;
}

:root[data-theme="dark"] {
  --room:        #110c09;
  --paper:       #1b1511;
  --paper-warm:  #251c15;
  --paper-card:  #201913;
  --ink:         #f2e8db;
  --ink-soft:    #b09f8b;
  --rule:        #3a2c20;
  --accent:      #fb923c;
  --link:        #fdba74;
  --link-visit:  #fda4af;
  --mark:        #6b4e10;
  --verse-bg:    #22180f;
  --verse-edge:  #4d3421;
  --verse-ink:   #fbf0e2;
  --scan-mat:    #1d1610;
  --brass:       #fb923c;
  --brass-lit:   #fdba74;
  --cast:        rgba(0, 0, 0, 0.55);

  --title:  linear-gradient(120deg, #fdba74 0%, #fb923c 50%, #f472b6 100%);
  --edge:   linear-gradient(135deg, rgba(251,191,36,.45), rgba(249,115,22,.30) 50%, rgba(236,72,153,.28));
  --glass:        rgba(30, 23, 17, 0.80);
  --glass-strong: rgba(30, 23, 17, 0.92);
  --glass-edge:   rgba(255, 255, 255, 0.07);
  --ring:         rgba(251, 146, 60, 0.12);
  --tint:         rgba(251, 146, 60, 0.08);
  --tint-strong:  rgba(251, 146, 60, 0.15);
  --shadow:       0 1px 2px rgba(0,0,0,.4), 0 20px 50px -24px rgba(0,0,0,.8);
  --shadow-lift:  0 2px 4px rgba(0,0,0,.4), 0 26px 60px -22px rgba(0,0,0,.9);
  --glow-a: rgba(251, 191, 36, 0.10);
  --glow-b: rgba(249, 115, 22, 0.08);
  --glow-c: rgba(236, 72, 153, 0.06);
}

/* ── the room: near-white, lit from the corners ─────────────────────────── */
html { background-color: var(--room); }
body {
  background-color: var(--room);
  background-image:
    radial-gradient(60rem 42rem at 6% -8%, var(--glow-a), transparent 62%),
    radial-gradient(52rem 38rem at 104% 4%, var(--glow-b), transparent 60%),
    radial-gradient(48rem 42rem at 50% 112%, var(--glow-c), transparent 62%);
  background-size: auto;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-blend-mode: normal;
}
::selection { background: rgba(249, 115, 22, 0.22); }

a { color: var(--link); text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
    text-underline-offset: 3px; }
a:visited { color: var(--link-visit); }
a:hover { color: var(--accent); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ── the header: a glass strip ──────────────────────────────────────────── */
.site-header {
  background: color-mix(in srgb, var(--room) 72%, transparent);
  border-bottom: 1px solid var(--ring);
  box-shadow: 0 8px 28px -22px var(--cast);
}
@supports (backdrop-filter: blur(8px)) {
  .site-header { backdrop-filter: saturate(1.7) blur(18px); }
}
.site-title, .site-title:visited {
  font-family: var(--ui); font-weight: 750; font-size: 1.02rem; letter-spacing: .01em;
  background: var(--title); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.site-title:hover { filter: saturate(1.3) brightness(1.05); }
.site-menu > summary { border-radius: 12px; }
.site-menu > summary:hover, .site-menu > summary:focus-visible,
.site-menu[open] > summary { border-color: var(--ring); background: var(--glass-strong); }
.site-nav {
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  border-radius: var(--r); padding: .5rem;
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--ring);
}
@supports (backdrop-filter: blur(8px)) {
  .site-nav { backdrop-filter: saturate(1.6) blur(20px); }
}
.site-nav a { border-radius: 10px; font-weight: 500; }
.site-nav a:hover, .site-nav a:focus-visible { background: var(--tint); color: var(--accent); }
.theme-toggle { border-radius: 10px; }
.theme-toggle:hover { background: var(--tint); }

/* ── the reading card ───────────────────────────────────────────────────── */
/* One card per page. Section pages nest their own <main class="wrap"> and
   an article leaf inside base.html's <main>, which drew a page inside a page;
   there the outer two step back and the leaf is the card. */
main.wrap, .leaf, .katha, .vy-leaf, .dl-leaf {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow), 0 0 0 1px var(--ring);
}
@supports (backdrop-filter: blur(8px)) {
  main.wrap, .leaf, .katha, .vy-leaf, .dl-leaf { backdrop-filter: saturate(1.3) blur(16px); }
}
main.wrap::before, .leaf::before, .katha::before, .vy-leaf::before, .dl-leaf::before {
  display: none;
}
.katha, .vy-leaf, .dl-leaf, .leaf { border-radius: var(--r-lg); }
@media (min-width: 46rem) {
  main.wrap { border-radius: calc(var(--r-lg) + 4px); }
}
@media (max-width: 45.99rem) {
  main.wrap { width: calc(100% - 1rem); margin-inline: auto; margin-top: .6rem;
              border-radius: var(--r-lg); }
}
main.wrap main.wrap,
main.wrap:has(> main.wrap) {
  background: none; border: 0; box-shadow: none; backdrop-filter: none;
}
main.wrap:has(> main.wrap) { padding-inline: 0; max-width: 62rem; width: 100%; }
main.wrap main.wrap { margin-block: 0; padding-inline: clamp(.5rem, 2vw, 1rem); max-width: none; }

/* A section's front door: the title stands on the glow as a hero, and the
   notes under it — prose, so they need the calm surface — get a card. */
.ix-notes {
  background: var(--glass); border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg); box-shadow: var(--shadow), 0 0 0 1px var(--ring);
  padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3.5vw, 2.25rem);
}
@supports (backdrop-filter: blur(8px)) {
  .ix-notes { backdrop-filter: saturate(1.3) blur(16px); }
}
.ix-note h2 { color: var(--accent); }
.ix-note h2::after { background: var(--edge); }

/* The invocation, set small and lit rather than printed. */
.mangala { color: var(--ink-soft); letter-spacing: .04em; }
.mangala-rule { background: var(--go); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; }

/* ── headings: the gradient, with room for the matras ───────────────────── */
h1, .masthead h1, .shelf-hero h1, .mm-head h1, .katha-head h2 .uk {
  background: var(--title); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-block: .14em .06em; line-height: 1.45;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
h1 { font-weight: 700; letter-spacing: -.005em; }
.masthead h1 { font-weight: 600; }
.katha-head h2 { line-height: 1.5; }

.subtitle, .lede { color: var(--ink-soft); }
.eyebrow, .standing { color: var(--accent); }

.ornament { color: var(--accent); }
.ornament::before, .ornament::after { background: var(--edge); opacity: 1; height: 1.5px; }
.lotus { color: var(--accent); }

/* Numbers that count something are the one other place the gradient goes. */
.ix-stats { border-color: var(--rule); }
.ix-stats dd {
  font-family: var(--ui); font-weight: 800; letter-spacing: -.01em;
  background: var(--go); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  padding-block: .1em;
}

.breadcrumbs li::after { color: var(--brass-lit); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

/* ── scripture: a warm card with a lit edge ─────────────────────────────── */
.verse, .shloka, .mm-verse {
  background:
    linear-gradient(var(--verse-bg), var(--verse-bg)) padding-box,
    var(--edge) border-box;
  border: 1px solid transparent;
  border-radius: var(--r);
  box-shadow: 0 14px 34px -26px rgba(234, 88, 12, .55);
}
:root[data-theme="dark"] .verse, :root[data-theme="dark"] .shloka,
:root[data-theme="dark"] .mm-verse { box-shadow: 0 14px 34px -24px rgba(0,0,0,.8); }
.shloka.in-stuti { box-shadow: none; }
.gloss { color: var(--ink); }

/* ── the kathā's measure ────────────────────────────────────────────────── */
/* The prose ran 846px — about 95 characters of Devanāgarī a line at a
   1440px window — and a long line is where the eye loses its place on the
   way back. The old leaf was 608px: quick to read, cramped to look at. This
   card leaves ~720px of text, about 75 characters: the comfortable measure
   for continuous reading, and 15% narrower than it was. */
.katha, .dl-leaf, .vy-leaf { max-width: 52rem; margin-inline: auto; }
/* Dharmālok's prose set its own 730px measure inside a 960px card; the card
   now fits it, and the text settles at the same ~720px as a kathā. Vyākhyā
   already sets 672px and keeps it. */
.dl-body, .dl-p { max-width: none; }

/* A quoted śloka is a set piece, not a paragraph: a narrower card than the
   prose around it, the verse centred as the book prints it, the Hindi under
   it set left like the prose — centred lines of translation read as ragged
   verse. On a phone the card is already the width of the text, so nothing
   changes there. The hymn blocks keep their own centred layout. */
.katha .shloka:not(.stuti):not(.in-stuti) {
  max-width: 36rem; margin: 2.1rem auto;
  padding: 1.3rem clamp(1.1rem, 3vw, 1.75rem) 1rem;
}
.katha .shloka:not(.stuti):not(.in-stuti) .sa,
.katha .shloka:not(.stuti):not(.in-stuti) .speaker { text-align: center; }
.katha .shloka:not(.stuti):not(.in-stuti) .gloss {
  text-align: left; max-width: none; margin: .9rem 0 0; padding-top: .75rem;
  font-size: .9rem; line-height: 1.7;
}
.katha .shloka figcaption { justify-content: center; }

/* ── controls ───────────────────────────────────────────────────────────── */
/* The primary action gets the gradient, as the panel's buttons do. */
.search-form button, .book-search button, .more-results-btn {
  background: var(--go); color: #fff; border: 0; border-radius: 999px;
  font-weight: 650; letter-spacing: .01em; cursor: pointer;
  box-shadow: 0 8px 20px -10px rgba(234, 88, 12, .65), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.search-form button:hover, .book-search button:hover, .more-results-btn:hover {
  transform: translateY(-1px); filter: saturate(1.1) brightness(1.03);
  box-shadow: 0 12px 26px -10px rgba(234, 88, 12, .75), inset 0 1px 0 rgba(255,255,255,.35);
}
.more-results-btn[disabled] { filter: grayscale(.6); opacity: .5; transform: none; }

.search-form input, .book-search, .shelf-find {
  background: var(--glass-strong); border: 1px solid var(--rule);
  box-shadow: inset 0 1px 2px rgba(124,45,18,.05);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.search-form input:focus-visible, .book-search:focus-within, .shelf-find:focus-within {
  outline: none; border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .16);
}
.book-search { border-radius: 999px; }
.book-search button { padding: .5rem 1.15rem; }

/* Chips: glass at rest, the dark pill when chosen — the panel's selected tab. */
.chip, .facets .chip, .mm-tag, .mm-jump a, .shelf-nav button, .view-toggle {
  background: var(--glass-strong); border: 1px solid var(--rule);
  border-radius: 999px; color: var(--ink);
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.chip:hover, .facets .chip:hover, .mm-tag:hover, .mm-jump a:hover,
.shelf-nav button:hover, .view-toggle:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent); background: var(--glass-strong);
}
.chip.is-on, .facets .chip.is-on, .view-toggle.is-open {
  background: #1f2937; color: #fff; border-color: #1f2937;
}
:root[data-theme="dark"] .chip.is-on, :root[data-theme="dark"] .facets .chip.is-on,
:root[data-theme="dark"] .view-toggle.is-open {
  background: #fdf2e6; color: #1b1511; border-color: #fdf2e6;
}

.vy-top, .to-top {
  background: var(--go); color: #fff; border: 0;
  box-shadow: 0 10px 24px -10px rgba(234, 88, 12, .7);
}
.vy-top:hover, .vy-top:focus-visible { color: #fff; transform: translateY(-2px); }

/* Vyākhyā's layer switches: a glass bar of pills, the shown layers lit. */
.vy-tools {
  background: var(--glass-strong); border: 1px solid var(--glass-edge);
  border-radius: var(--r); box-shadow: 0 10px 28px -20px var(--cast), 0 0 0 1px var(--ring);
}
.vy-tools button {
  font-family: var(--ui); font-size: .8rem; border: 1px solid var(--rule);
  opacity: .6; transition: opacity .12s ease, background .12s ease;
}
.vy-tools button:hover { opacity: 1; }
.vy-tools button.is-on {
  opacity: 1; background: var(--tint-strong); color: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.vy-tocfab.is-on { background: var(--go); color: #fff; }
.vy-disclosure {
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-left: 3px solid var(--accent); border-radius: var(--r-sm);
}

/* ── lists that are really cards ────────────────────────────────────────── */
.index a, .dl-index a, .vy-index a, .mm-card, .book-card, .pager a {
  background: var(--glass-strong);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r);
  box-shadow: 0 1px 2px rgba(124,45,18,.05), 0 10px 28px -20px var(--cast), 0 0 0 1px var(--ring);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.index a:hover, .dl-index a:hover, .vy-index a:hover, .mm-card:hover,
.book-card:hover, .pager a:hover {
  transform: translateY(-2px);
  border-color: transparent;
  background:
    linear-gradient(var(--glass-strong), var(--glass-strong)) padding-box,
    var(--edge) border-box;
  box-shadow: var(--shadow-lift);
}
.index a:hover .ix-name, .dl-index a:hover .dl-name, .vy-index a:hover .vy-ix-name {
  color: var(--accent);
}

/* A book's contents: rows that light up under the pointer. */
.toc li { border-bottom: 1px solid var(--rule); }
.toc li a { border-radius: 10px; transition: background .12s ease; }
.toc li a:hover { background: var(--tint); }
.toc .range { color: var(--accent); font-variant-numeric: tabular-nums; }

.result { border-bottom: 1px solid var(--rule); border-radius: 0; }
.result h3 a { text-decoration: none; }
.result h3 a:hover { text-decoration: underline; }

/* Section labels in small caps take the saffron rather than brass. */
.mm-group > h2, .toc-heading, .index .ix-work h2 { color: var(--accent); }

/* ── a corpus window's furniture ────────────────────────────────────────── */
.progress { background: var(--rule); height: 4px; border-radius: 999px; }
.progress > span { background: var(--go); border-radius: 999px; }
.page-strip { background: color-mix(in srgb, var(--paper) 80%, transparent); border-bottom-color: var(--ring); }
.page-strip a {
  border-radius: 999px; background: var(--glass-strong); border: 1px solid var(--rule);
  font-family: var(--ui); font-size: .82rem; font-variant-numeric: tabular-nums;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.page-strip a:hover, .page-strip a:focus-visible {
  background: var(--tint); border-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.page-strip a[aria-current], .page-strip a.is-current {
  background: var(--go); color: #fff; border-color: transparent;
}
.page > h2 { color: var(--accent); font-family: var(--ui); }

/* ── scans ──────────────────────────────────────────────────────────────── */
.page-scan img, .scan img { border-radius: 10px; }
.page-scan, .scan { border-radius: var(--r-sm); }

/* ── the shelf: books on a glass ledge ──────────────────────────────────── */
.shelf {
  background-color: transparent;
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(255,237,213,.55) 100%);
  background-size: auto; background-blend-mode: normal;
  border-block: 1px solid var(--ring);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
:root[data-theme="dark"] .shelf {
  background-image: linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(251,146,60,.07) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.shelf::after {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.95) 22%,
                            rgba(253,230,205,.95) 23%, rgba(250,214,176,.9) 100%);
  background-size: auto; background-blend-mode: normal;
  box-shadow: 0 12px 26px -14px rgba(124,45,18,.45);
}
:root[data-theme="dark"] .shelf::after {
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.14) 22%,
                            rgba(60,42,28,.95) 23%, rgba(38,27,18,.95) 100%);
}
.shelf-cover { border-radius: 4px 10px 10px 4px; }

/* ── the footer: no more wood ───────────────────────────────────────────── */
.site-footer {
  background: transparent; box-shadow: none;
  border-top: 1px solid var(--ring);
}
.site-footer::before, .site-footer::after { display: none; }
.site-footer p, .site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .index a, .dl-index a, .vy-index a, .mm-card, .book-card, .pager a,
  .search-form button, .book-search button, .more-results-btn, .vy-top {
    transition: none;
  }
  .index a:hover, .dl-index a:hover, .vy-index a:hover, .mm-card:hover,
  .book-card:hover, .pager a:hover { transform: none; }
}