/* All @font-face rules live in fonts/fonts.css, generated by
 * scripts/self_host_fonts.py. They were moved out of this file so that fonts
 * are declared in one place, and so the URLs inside it are relative to
 * fonts/fonts.css rather than to the site root -- which means they resolve
 * identically at any page depth. The previous Google Fonts @import was also
 * removed there: fetching CSS and fonts from a third party contradicted the
 * Privacy Policy's statement that stylesheets and fonts are served from this
 * site's own domain. See that script for how to regenerate. */

:root {
  --bg: #f7f3ea;
  --bg-warm: #faf0d7;
  --text: #3b2e1e;
  --text-light: #6b5b4b;
  --accent: #9b4d1c;
  --accent-deep: #7a2e0e;
  --accent-light: #c47a3a;
  /* Colour of the Samarkan site name. Kept as its own token because it is the
   * one brand colour that gets tuned by eye; #AB4B25 gives 5.05:1 on the
   * cream background (WCAG AA needs 4.5:1). The previous #CE5E18 was only
   * 3.62:1 and read as washed out. index.html mirrors this value in its own
   * :root block, since the landing page does not load this stylesheet. */
  --brand-name: #AB4B25;
  /* The same site name where it sits on a LIGHT surface -- the top panel, which is
   * #fff, and the drawer, which is the cream #f2efe9. The accent above was tuned
   * against the cream page background (#f7f3ea, where it measures 5.04:1); on
   * these lighter surfaces it read washed out, so this darker red is used there
   * instead: #9B3107 measures 7.40:1 on white and 7.35:1 on the drawer's cream.
   * index.html mirrors this value in its own :root block, since the landing page
   * does not load this stylesheet. */
  --brand-name-on-white: #9B3107;
  /* UI chrome font. Google Sans is the face used in Google's own search pill,
   * chosen for the site's search field; the rest of the chrome stays on the
   * 'Segoe UI' stack. Self-hosted -- see fonts/fonts.css. */
  --font-ui: 'Google Sans', 'Segoe UI', system-ui, sans-serif;
  --border: #d9c8a5;
  --card-bg: #fef8ea;
  --sanskrit-bg: #fdf3d8;
  --verse-header-bg: #c47a3a;
  --nav-text: #fdf6e3;
  --link: #9b4d1c;
  --link-hover: #7a2e0e;
  --inner-top-row-height: 72px;
  --inner-search-height: 48px;
}
html { scrollbar-gutter: stable; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  background: var(--bg); color: var(--text);
  font-size: 17px; line-height: 1.8;
  max-width: 820px; margin: 0 auto; padding: 0 24px;
}
a { color: var(--link); }
a:hover { color: var(--link-hover); }

/* Inner pages app shell.
 *
 * The DOCUMENT is the single scroll container. This used to be an app-style
 * shell: .inner-app-shell pinned to 100vh with overflow:hidden, and
 * .inner-main-shell scrolling inside it. That produced TWO scrollbars on every
 * page whose footer renders -- entry pages, chapter summaries, listings,
 * kshetram/keerthanavali, legal -- because the footer is a SIBLING of
 * .inner-app-shell, not a child of it: the inner bar scrolled the top panel +
 * breadcrumb + content, while the outer bar scrolled all of that PLUS the
 * footer. Two tracks for one viewport.
 *
 * Dropping the fixed height leaves one bar, with the top panel and breadcrumb
 * pinned by position:sticky -- which only takes effect once no ancestor has
 * overflow:hidden, another reason the pinning had to go. It also revives
 * window.scrollTo({top:0}) on the Verses/Summary switch, which targeted the
 * window while the real scroller was the inner div, and so did nothing.
 *
 * Chapter VERSES pages (body.chapter-page) deliberately keep the old pinned
 * layout -- restored explicitly below -- because their verse list is meant to
 * scroll inside a fixed frame, and those pages render no footer.
 */
.inner-app-shell {
  display: flex;
}
.inner-main-shell {
  flex: 1;
  min-width: 0;
}
.inner-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Shared top panel for inner pages */
.shared-top-panel {
  background: #fff;
  border-top: 0;
  border-bottom: 1px solid #e6e6ea;
  border-left: 0;
  border-right: 0;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  min-height: var(--inner-top-row-height);
  padding: 0 18px;
  display: flex;
  align-items: center;
}
.shared-top-strip {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 16px;
  width: 100%;
  min-width: 0;
}
.shared-brand-inline {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
}
.shared-logo-link {
  text-decoration: none;
}
.shared-logo-icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
}
.shared-wordmark-link {
  text-decoration: none;
}
.shared-brand-wordmark {
  display: inline-flex;
  flex-direction: column;
  font-family: "Monotype Corsiva", "Segoe Script", "Times New Roman", serif;
  font-size: 28px;
  line-height: 0.92;
  color: #2f2418;
  white-space: nowrap;
}
.shared-brand-wordmark .line {
  display: block;
}
.shared-search-wrap {
  margin: 0;
  max-width: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 90px;
}
.shared-search {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 90%;
  max-width: 980px;
  min-height: var(--inner-search-height);
  padding: 0 18px;
  border: 1px solid #e4e4ea;
  border-radius: 999px;
  background: #f1f1f3;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  flex: 1;
  min-width: 0;
}
.shared-search:hover {
  border-color: #d3d3dc;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.07);
}
.shared-search:focus-within {
  background: #ffffff;
  border-color: #b9b9c6;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14), 0 0 0 3px rgba(0, 0, 0, 0.045);
}
.shared-search-sep {
  width: 1px;
  height: 20px;
  background: rgba(0, 0, 0, 0.14);
  flex: 0 0 auto;
}
.shared-search-icon {
  color: #555;
  width: 18px;
  height: 18px;
  display: inline-flex;
}
.shared-search input {
  border: 0;
  outline: 0;
  width: 100%;
  /* Form controls do NOT inherit the page font by default -- they fall back
   * to the browser's UI font (Arial here), which is why the pill had a Noto
   * Serif border and icon wrapped around Arial text. Google Sans is the face
   * Google's own search pill uses. */
  font-family: var(--font-ui);
  /* 1rem = 16px, the same size Google's pill uses. This is not cosmetic:
   * iOS Safari zooms the whole page in when you focus an input whose
   * font-size is under 16px. At the previous 0.9rem (14.4px) it triggered
   * that zoom on every tap. Do not reduce below 1rem. */
  font-size: 1rem;
  color: #000;
  background: transparent;
  min-width: 0;
}
.shared-search input::placeholder {
  /* Kept the same size as the text, so nothing shifts when you start typing. */
  font-size: 1rem;
  color: #8a8a92;
}
.shared-search-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Works home */
body.works-home {
  max-width: 980px;
  padding-top: 26px;
}
.works-home-wrap {
  max-width: 880px;
  margin: 0 auto;
}
.works-hero {
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, var(--card-bg), #f8edd2);
  padding: 24px 22px;
  margin-bottom: 20px;
}
.works-hero-san {
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1.15em;
  color: var(--accent-deep);
  margin-bottom: 6px;
}
.works-hero h1 {
  margin: 0;
}
.works-hero-sub {
  margin-top: 8px;
  color: var(--text-light);
  font-size: 0.95em;
}
.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.work-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  padding: 20px;
}
.work-card-san {
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1.3em;
  color: var(--accent-deep);
}
.work-card-iast {
  margin-top: 4px;
  color: var(--text-light);
  font-size: 0.95em;
}
.work-card-desc {
  margin-top: 10px;
  color: var(--text);
  font-size: 0.95em;
}
.work-card-link {
  display: inline-block;
  margin-top: 14px;
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 6px;
}
.work-card-link:hover {
  color: #fff;
  background: var(--accent-deep);
}


.book-home-breadcrumb,
nav.chapter-menu-bar {
  padding: 10px 18px;
  font-size: 0.9em;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-top: 0;
  margin-bottom: 12px;
  margin-left: 0;
  margin-right: 0;
  background: var(--card-bg);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.book-home-breadcrumb a,
nav.chapter-menu-bar a {
  text-decoration: none;
  color: var(--accent);
}
.book-home-breadcrumb a:hover,
nav.chapter-menu-bar a:hover {
  text-decoration: underline;
}
.book-home-breadcrumb .sep,
nav.chapter-menu-bar .sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  color: #b8a88a;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}

.book-home-breadcrumb .sep::before,
nav.chapter-menu-bar .sep::before {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}
.book-home-breadcrumb .crumb-label {
  color: var(--text-light);
  margin-right: 6px;
}
.book-home-breadcrumb .chapter-jump-select {
  font: inherit;
  font-size: 0.95em;
  color: var(--text);
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 6px;
  min-width: 78px;
}

/* Breadcrumb */
nav.breadcrumb {
  padding: 14px 0; font-size: 0.82em; color: var(--text-light);
  border-bottom: 1px solid var(--border); margin-bottom: 28px;
  font-family: 'Segoe UI', system-ui, sans-serif;
}



/* Chapter page split layout.
 *
 * HEIGHT UNITS -- 100dvh, not 100vh. Read this before changing them.
 *
 * On mobile browsers `100vh` is the LARGE viewport: the height the page would
 * have if the browser's own chrome (iOS Safari's address bar, Android Chrome's
 * URL bar) were HIDDEN. The chrome is not hidden on load, so a `100vh` box is
 * taller than the area you can actually see -- by the height of that bar.
 *
 * That is only survivable if the page can scroll. These pages cannot: the shell
 * is `overflow: hidden` by design, so the part of it that falls below the fold
 * is unreachable, and iOS cannot scroll the content up either. The result on an
 * iPhone was that the search bar in the top panel -- the top 115px of the
 * layout -- sat behind the address bar and there was no gesture that would
 * reveal it. The screen read as locked to the verses.
 *
 * `100dvh` is the DYNAMIC viewport height: the height currently visible, chrome
 * included. The frame then matches what the reader can see, and the top panel
 * is on screen. `100vh` is kept first as a fallback for engines without `dvh`
 * (Safari < 15.4), where the old behaviour is unchanged.
 *
 * Every height in the pinned shell must use the same unit, or the frame and its
 * scroller disagree -- .inner-app-shell and .inner-main-shell are set below, and
 * there is one more at the 900px breakpoint. */
body.chapter-page {
  max-width: none;
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* The viewport scroller must not scroll either.
 *
 * `overflow: hidden` above is on the BODY. The element that scrolls the
 * viewport is the HTML root, so the document could still be scrolled -- by
 * scrollIntoView from a "#verse-N" link, or by iOS bringing a focused input
 * into view. On a page pinned to one viewport that pushes the top panel off
 * the top of the screen, where no swipe can retrieve it, because the frame
 * itself is unscrollable.
 *
 * Guarded by @supports so it only applies where `dvh` is understood. Where it
 * is not (Safari before 15.4) the frame is still sized from `100vh` and can
 * legitimately be taller than the visible area, so locking the root there
 * WOULD hide content the reader could otherwise reach.
 *
 * `:has()` matches the same Safari version as `dvh` (15.4), so the two guards
 * agree. Scoped this way because every other page family relies on the document
 * scrolling normally. */
@supports (height: 100dvh) {
  html:has(body.chapter-page) {
    overflow: hidden;
  }
}
body.book-page {
  max-width: none;
  margin: 0;
  padding: 0;
}
/* Search results page uses the same full-width app shell as book pages. */
body.search-page-body {
  max-width: none;
  margin: 0;
  padding: 0;
}
.chapter-layout {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  height: auto;
  width: 100%;
  min-height: 0;
}
.chapter-page .inner-app-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* Restores the pinning that the base .inner-app-shell / .inner-main-shell rules
   no longer apply. Chapter VERSES pages keep the app-style shell: exactly one
   viewport tall, with .inner-main-shell scrolling inside it and the top panel
   sticky within that scroller. */
.chapter-page .inner-main-shell {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
  height: 100vh;
  height: 100dvh;
}

.chapter-page #chapterViewHost {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.chapter-page #chapterViewHost > .inner-content {
  max-width: none;
  margin: 0;
  padding: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.chapter-page #chapterViewHost > .inner-content > footer {
  display: none;
}
.chapter-summary-panel {
  position: static;
  z-index: 5;
  border-top: 0;
  border-bottom: 1px solid var(--border);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--card-bg), #f9efd5);
  padding: 12px 18px;
  text-align: center;
  box-shadow: 0 7px 14px -10px rgba(120, 80, 20, 0.35);
  margin-left: 0;
  margin-right: 0;
}
.chapter-brand {
  font-size: 1.7em;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.chapter-meta-line {
  font-size: 0.98em;
  color: var(--accent-deep);
  margin-top: 0;
  line-height: 1.35;
}
.chapter-meta-line.san {
  font-family: 'Tiro Devanagari Hindi', serif;
  color: var(--text);
}
.chapter-title-san {
  margin-top: 6px;
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1.1em;
  color: var(--accent-deep);
  line-height: 1.35;
}
.chapter-title-iast {
  margin-top: 2px;
  font-size: 0.98em;
  color: var(--text-light);
  font-style: normal;
  line-height: 1.35;
}
.chapter-title-en {
  margin-top: 2px;
  font-size: 0.92em;
  color: var(--text-light);
  line-height: 1.35;
}
.chapter-verse-panel {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 6px;
  padding-bottom: 28px;
}

.chapter-reading-panel {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(82, 56, 22, 0.12);
  padding: 14px;
  width: 100%;
}

.chapter-reading-title {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin-bottom: 10px;
}

.chapter-reading-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chapter-reading-chip {
  border: 1px solid #d8c29a;
  border-radius: 999px;
  background: #fff;
  color: var(--accent);
  padding: 7px 12px;
  font-size: 0.78rem;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.chapter-reading-chip.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.chapter-verse-panel {
  display: block;
  width: 100%;
  overflow-y: auto;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 28px;
  min-height: 0;
}

.verse-reader-card {
  border: 1px solid #d7c29d;
  border-radius: 14px;
  background: linear-gradient(180deg, #fff8ea, #fdf2da);
  box-shadow: 0 10px 18px rgba(74, 50, 18, 0.09);
  overflow: hidden;
  width: 100%;
  margin-bottom: 14px;
}

.chapter-verse-panel .verse-reader-card:last-of-type {
  margin-bottom: 0;
}

.verse-reader-main {
  display: flex;
  align-items: stretch;
}

.verse-reader-index {
  flex: 0 0 10%;
  width: 10%;
  min-width: 44px;
  border-right: 1px solid #dec8a4;
  background: #fff4de;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.94rem;
  font-weight: 400;
  color: #8a6132;
}

.verse-reader-content {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
}

.verse-reader-sanskrit {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
}

.verse-reader-san-line {
  margin: 0;
  text-align: left;
  line-height: 1.8;
  font-size: 1.15rem;
  color: #4b341e;
  font-family: 'Tiro Devanagari Hindi', serif;
}

.verse-reader-san-fallback {
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
  font-size: 0.92rem;
  color: var(--text-light);
}

.verse-reader-more-rail {
  flex: 0 0 15%;
  width: 15%;
  min-width: 72px;
  border-left: 1px solid #dec8a4;
  background: #fff3dc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 8px;
}

.verse-reader-more-link {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
}

.verse-reader-more-link:hover {
  color: var(--accent-deep);
  text-decoration: underline;
}

.ddv-c43-page .verse-reader-index {
  flex: 0 0 10%;
  width: 10%;
}

.ddv-c43-page .verse-reader-more-rail {
  flex: 0 0 15%;
  width: 15%;
}

.verse-reader-arrow {
  border: 0;
  background: transparent;
  width: 26px;
  height: 26px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.verse-reader-arrow-icon {
  width: 22px;
  height: 22px;
  object-fit: contain;
  display: block;
}



.verse-reader-subcards {
  border-top: 1px solid #e4cfaa;
  background: #fffaf0;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.verse-reader-subcards[hidden] {
  display: none !important;
}

.verse-subcard {
  border: 1px solid #e0cbac;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.verse-subcard-trigger {
  width: 100%;
  text-align: left;
  border: 0;
  background: #fff9ec;
  color: var(--accent-deep);
  padding: 9px 12px 9px 14px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.verse-subcard-trigger::after {
  content: '＋';
  font-size: 0.9em;
  font-weight: 400;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.18s ease;
}

.verse-subcard.open .verse-subcard-trigger {
  background: #f8e9c9;
}

.verse-subcard.open .verse-subcard-trigger::after {
  content: '－';
}

.verse-subcard-body {
  padding: 10px 12px 12px;
}

.verse-subcard-line,
.verse-subcard-empty {
  margin: 0 0 8px;
  font-size: 0.86rem;
  line-height: 1.65;
  color: var(--text);
}

.verse-subcard-empty {
  color: var(--text-light);
  font-style: italic;
}

.verse-subcard-list {
  margin: 0;
  padding-left: 18px;
  font-size: 0.84rem;
  line-height: 1.6;
}

.verse-subcard-list li {
  margin-bottom: 6px;
}

.verse-subcard-line:last-child,
.verse-subcard-empty:last-child,
.verse-subcard-list li:last-child {
  margin-bottom: 0;
}
nav.breadcrumb a { color: var(--accent); text-decoration: none; }
nav.breadcrumb a:hover { text-decoration: underline; }
nav.breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  color: #b8a88a;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}

nav.breadcrumb .sep::before {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}

/* Headings — centered like Vedabase */
h1 {
  font-size: 1.7em; color: var(--accent-deep); margin: 6px 0 6px;
  font-weight: 600; text-align: center; letter-spacing: 0.01em;
}
h1 .sanskrit {
  display: block; font-size: 0.82em; color: var(--text);
  margin-top: 6px; font-weight: 400;
  font-family: 'Tiro Devanagari Hindi', serif;
}
.home-title .home-title-san {
  display: block;
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1em;
}
.home-title .home-title-en {
  display: block;
  font-size: 0.72em;
  color: #666;
  margin-top: 2px;
  font-weight: 400;
  font-family: 'Noto Serif', Georgia, 'Times New Roman', serif;
}
.book-invocation {
  text-align: center;
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1.1em;
  color: var(--accent-deep);
  margin-bottom: 2px;
  margin-top: 8px;
}
.book-authorship {
  text-align: center;
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 0.95em;
  color: var(--text-light);
  margin-bottom: 10px;
}
h2 {
  font-size: 1.2em; color: var(--accent); margin: 28px 0 14px;
  text-align: center; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 600;
}
h3 {
  font-size: 1.05em; color: var(--accent-deep); margin: 22px 0 10px;
  text-align: center; font-weight: 600;
}
.subtitle {
  font-size: 1em; color: var(--text-light); margin-bottom: 28px;
  font-style: italic; text-align: center;
}

/* Volume & Chapter lists */
.volume-list, .chapter-list { list-style: none; }
.volume-list li, .chapter-list li {
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 10px; background: var(--card-bg);
  transition: box-shadow 0.2s, border-color 0.2s;
}
.volume-list li:hover, .chapter-list li:hover {
  box-shadow: 0 2px 12px rgba(120,80,20,0.1);
  border-color: var(--accent-light);
}
.volume-list a, .chapter-list a {
  display: block; padding: 14px 20px; text-decoration: none; color: var(--text);
}
.volume-list a:hover, .chapter-list a:hover { color: var(--accent-deep); }
.ch-num {
  color: var(--accent);
  font-weight: 600;
  font-size: 1.08rem;
  font-family: 'Tiro Devanagari Hindi', serif;
}
.ch-name-san {
  font-size: 1.16rem;
  font-family: 'Tiro Devanagari Hindi', serif;
}
.ch-name-en {
  font-size: 0.92rem;
  color: var(--text-light);
  font-style: normal;
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.ch-name-iast { font-size: 0.88em; color: var(--text-light); font-style: italic; }
.ch-verses {
  font-size: 1.02rem;
  color: #7b6d57;
  font-weight: 500;
  text-align: center;
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.book-index-page .inner-content {
  max-width: none;
  margin: 0;
  padding: 18px 20px 24px;
}

body.book-index-page .kbr-entry-content {
  max-width: 1080px;
}

body.book-index-page .shared-top-panel {
  min-height: var(--inner-top-row-height);
  padding: 0 18px;
}

.book-index-page .chapter-list {
  width: 100%;
}

.book-index-page .chapter-list a {
  display: grid;
  grid-template-columns: 10% 70% 20%;
  align-items: stretch;
  gap: 0;
  padding: 0;
}

.book-index-page .chapter-list .ch-zone {
  min-height: 84px;
  display: flex;
  align-items: center;
  padding: 8px 12px;
}

.book-index-page .chapter-list .ch-zone-name,
.book-index-page .chapter-list .ch-zone-meta {
  border-left: 1px solid #e2d2b1;
}

.book-index-page .chapter-list .ch-zone-num {
  justify-content: center;
}

.book-index-page .chapter-list .ch-zone-name {
  /* On this column flex container the main axis runs top-to-bottom, so
   * `justify-content` controls the VERTICAL position of the name block.
   * This used to read `stretch`, which is not a valid value for
   * `justify-content` (only `align-items`/`align-content` accept it). The
   * declaration was therefore dropped by the parser, the name fell back to
   * `flex-start`, and it sat at the top of the card while the number and
   * verse-count columns -- row flex containers centred by the parent's
   * `align-items: center` -- sat in the middle. `center` matches them. */
  justify-content: center;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}

.book-index-page .chapter-list .ch-zone-meta {
  justify-content: center;
  padding: 0;
}

.book-index-page .chapter-list .ch-arrow-wrap {
  width: 100%;
  height: 100%;
  min-height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.book-index-page .chapter-list .ch-arrow {
  width: 22px;
  height: 22px;
  object-fit: contain;
  opacity: 0.75;
  transform: translateX(0);
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}

.book-index-page .chapter-list li:hover .ch-arrow,
.book-index-page .chapter-list a:hover .ch-arrow {
  opacity: 1;
  transform: translateX(3px) scale(1.04);
  filter: drop-shadow(0 1px 1px rgba(92, 58, 19, 0.25));
}

.book-index-page .chapter-list .card-grid {
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.book-index-page .chapter-list .card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
}

.book-index-page .chapter-list .card-row + .card-row {
  border-top: 1px dashed #e8dcc3;
}

.book-index-page .chapter-list .card-cell {
  padding: 4px 8px;
  line-height: 1.2;
  margin: 0;
  overflow-wrap: anywhere;
}

.book-index-page .chapter-list .card-cell + .card-cell {
  border-left: 1px solid #efe4cc;
}

.book-index-page .chapter-list .card-sa {
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 0.9rem;
}

.book-index-page .chapter-list .card-ta {
  font-size: 0.84rem;
  font-weight: 500;
}

.book-index-page .chapter-list .card-en {
  font-size: 0.86rem;
}

.book-index-page .chapter-list .ch-num {
  font-size: 0.92rem;
}

/* DDV volumes index: widen meta column for "chapters" text */
.ddv-volumes-page .chapter-list a {
  grid-template-columns: 10% 70% 20%;
}

.ddv-volumes-page .chapter-list .ch-zone-meta {
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}

.ddv-chapters-page .chapter-list a {
  grid-template-columns: 10% 70% 20%;
}

.ddv-chapters-page .chapter-list .ch-zone-meta {
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}

.kbr-main-index-page .chapter-list a {
  grid-template-columns: 10% 70% 20%;
}

.kbr-main-index-page .chapter-list .ch-zone-name {
  /* `align-items: flex-start` is the cross axis here, so it left-aligns the
   * text. The vertical position is deliberately left to the base rule above,
   * so all three columns stay centred together. */
  align-items: flex-start;
}

.kbr-main-index-page .chapter-list .ch-zone-meta {
  justify-content: center;
  text-align: center;
  padding: 8px 12px;
}

/* Keerthanavali index: compact single-row cards */
.keerthanavali-page .chapter-list .ch-zone {
  min-height: 54px;
  padding: 6px 10px;
}

.keerthanavali-page .chapter-list .ch-arrow-wrap {
  min-height: 62px;
}

.keerthanavali-page .chapter-list .card-cell {
  padding: 3px 8px;
}

.keerthanavali-page .chapter-list .card-row {
  align-items: center;
}

.keerthanavali-page .chapter-list .card-cell {
  display: flex;
  align-items: center;
}

.keerthanavali-page .chapter-list .kv-card-main {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 56px;
  align-items: stretch;
}

.keerthanavali-page .chapter-list .kv-card-main .ch-zone-name {
  border-left: 1px solid #e2d2b1;
  justify-content: center;
}

.keerthanavali-page .chapter-list .kv-card-main .ch-zone-meta {
  border-left: 1px solid #e2d2b1;
}

.keerthanavali-page .chapter-list .kv-card-main .ch-zone-name .card-grid {
  align-content: center;
}

.keerthanavali-page .chapter-list .kv-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--accent-deep);
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 700;
}

.keerthanavali-page .chapter-list .kv-toggle:hover {
  background: #f8efde;
}

.keerthanavali-page .chapter-list .kv-song-panel {
  border-top: 1px solid #e8dcc3;
  background: #fcf7ee;
  padding: 10px 12px;
}

.keerthanavali-page .chapter-list .kv-subcards {
  display: grid;
  gap: 6px;
  margin-left: 80px;
  margin-right: 24px;
}

.keerthanavali-page .chapter-list .kv-subcard {
  border: 1px solid #dfcda6;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
}

.keerthanavali-page .chapter-list .kv-subcard-trigger {
  width: 100%;
  border: 0;
  background: #fff9ec;
  color: var(--accent-deep);
  font-size: 0.83rem;
  font-weight: 500;
  text-align: left;
  padding: 9px 30px 9px 12px;
  cursor: pointer;
  position: relative;
}

.keerthanavali-page .chapter-list .kv-subcard-link {
  display: block;
  text-decoration: none;
}

.keerthanavali-page .chapter-list .kv-sub-trigger-grid {
  display: grid;
  grid-template-columns: 5% 70% 25%;
  align-items: center;
  gap: 6px;
  width: 100%;
}

@media (max-width: 720px) {
  .keerthanavali-page .chapter-list .kv-subcards {
    margin-left: 24px;
    margin-right: 12px;
  }
}

.keerthanavali-page .chapter-list .kv-sub-col {
  min-width: 0;
}

.keerthanavali-page .chapter-list .kv-sub-col + .kv-sub-col {
  border-left: 1px solid #e1d1b2;
  padding-left: 8px;
}

.keerthanavali-page .chapter-list .kv-sub-num {
  text-align: left;
  color: #6f5524;
  font-variant-numeric: tabular-nums;
}

.keerthanavali-page .chapter-list .kv-sub-name {
  text-align: left;
}

.keerthanavali-page .chapter-list .kv-sub-ragam {
  text-align: left;
  color: #725324;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.keerthanavali-page .chapter-list .kv-subcard-trigger::after {
  content: '↗';
  font-size: 0.9em;
  font-weight: 400;
  color: var(--accent);
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
}

.keerthanavali-page .chapter-list .kv-subcard-link:hover {
  background: #f8efde;
}

.keerthanavali-page .chapter-list .kv-subcard-body {
  border-top: 1px solid #ecdcbf;
  background: #fffcf5;
  padding: 7px 10px;
}

.keerthanavali-page .chapter-list .kv-subcard-line {
  margin: 0;
  font-size: 0.82rem;
  color: #5c4a2a;
}

.keerthanavali-page .chapter-list .kv-song-text {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 0.88rem;
  line-height: 1.75;
  white-space: pre-wrap;
  color: #3b2a0e;
}

.keerthanavali-page .chapter-list .kv-song-content {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #3b2a0e;
}

.keerthanavali-page .chapter-list .kv-song-title-line {
  font-weight: 700;
  color: #8a4b00;
}

.keerthanavali-song-page .chapter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.keerthanavali-song-page .kv-song-detail-wrap {
  margin-top: 6px;
}

.keerthanavali-song-page .kv-song-detail-head {
  margin: 0 0 10px;
  padding: 8px 4px;
}

/* 2-row info panel */
.keerthanavali-song-page .kv-song-info-panel {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 8px;
}

.keerthanavali-song-page .book-invocation {
  font-size: 0.9em;
}

.keerthanavali-song-page h1 {
  font-size: 1.4em;
}

.keerthanavali-song-page .kv-song-info-title {
  margin: 0;
  text-align: center;
  font-size: 1.0rem !important;
  line-height: 1.35;
  color: var(--accent-deep);
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}

.keerthanavali-song-page .kv-info-separator {
  width: 40%;
  margin: 6px auto 0;
  border-top: 1px solid #d4b483;
}

.keerthanavali-song-page .kv-song-info-row2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin-top: 12px;
  padding: 0 0 8px 0;
  border-bottom: 1px solid #d4b483;
  margin-bottom: 6px;
}

.keerthanavali-song-page .kv-song-info-row3 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding: 0;
}

.keerthanavali-song-page .kv-song-info-col {
  font-size: 1.2rem;
  color: #5e3e00;
  line-height: 1.4;
  font-weight: 600;
  text-align: left;
}

.keerthanavali-song-page .kv-song-info-center {
  text-align: center;
}

.keerthanavali-song-page .kv-song-info-row2 .kv-song-info-col {
  font-size: 1.2rem;
  font-weight: 600;
}

.keerthanavali-song-page .kv-song-info-row3 .kv-song-info-col {
  font-weight: 400;
  font-size: 0.88rem;
}

/* kept for backward compat – no longer emitted but harmless */
.keerthanavali-song-page .kv-song-detail-title {
  margin: 4px 0 3px;
  font-size: 1.2rem;
  line-height: 1.35;
  color: var(--accent-deep);
}

.keerthanavali-song-page .kv-song-detail-sub {
  margin: 0;
  color: #7d6337;
  font-size: 0.9rem;
}

.keerthanavali-song-page .kv-song-detail-card {
  border: 1px solid #e2d2b1;
  border-radius: 10px;
  background: #fffdf9;
  box-shadow: 0 2px 7px rgba(111, 78, 19, 0.08);
  padding: 12px 14px;
}

.keerthanavali-song-page .kv-song-content-area {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid #e2d2b1;
}

.keerthanavali-song-page .kv-song-empty {
  margin: 0;
  color: #6e5834;
  font-size: 0.92rem;
}

.keerthanavali-song-page .kv-song-detail-card .kv-song-content {
  font-size: 0.98rem;
  line-height: 1.85;
  text-align: center;
}

/* Verse display */
.verse-block {
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 24px; overflow: hidden;
  box-shadow: 0 1px 4px rgba(120,80,20,0.06);
}
.verse-header {
  background: var(--verse-header-bg); color: var(--nav-text);
  padding: 9px 18px; font-weight: 600; font-size: 0.88em;
  font-family: 'Segoe UI', system-ui, sans-serif;
  letter-spacing: 0.02em;
}
.verse-header a { color: var(--nav-text) !important; }
.verse-sanskrit {
  background: var(--sanskrit-bg); padding: 20px 24px;
  font-size: 1.2em; line-height: 2.0; text-align: center;
  font-family: 'Tiro Devanagari Hindi', 'Mangal', serif;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.verse-iast {
  padding: 14px 24px; font-style: italic; color: var(--text-light);
  font-size: 0.92em; line-height: 1.7; text-align: center;
  border-bottom: 1px solid var(--border); background: #fdf8e8;
}
.verse-translation {
  padding: 18px 24px; font-size: 0.98em; line-height: 1.8;
  color: var(--text);
}

/* Tabs */
.tabs {
  display: flex; gap: 0; margin-bottom: 0;
  border-bottom: 2px solid var(--accent-light);
  font-family: 'Segoe UI', system-ui, sans-serif;
}
.tab {
  padding: 10px 22px; cursor: pointer; background: var(--card-bg);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: 6px 6px 0 0; margin-right: 2px;
  font-size: 0.9em; color: var(--text-light);
  transition: background 0.2s;
}
.tab:hover { background: var(--bg-warm); }
.tab.active {
  background: var(--bg); color: var(--accent-deep);
  font-weight: 600; border-color: var(--accent-light);
}
.tab-content { display: none; padding: 24px 0; }
.tab-content.active { display: block; }

/* Narrative */
.narrative { font-size: 0.98em; line-height: 1.85; }
.narrative p { margin-bottom: 16px; text-align: justify; }

/* DDV chapter narrative card (collapsible <details>) */
.chapter-narrative-card {
  border: 1px solid #d7c29d;
  border-radius: 12px;
  background: linear-gradient(180deg, #fffdf5, #fdf6e3);
  margin-bottom: 18px;
  overflow: hidden;
}
.chapter-narrative-toggle {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--accent-deep);
  padding: 10px 16px;
  cursor: pointer;
  list-style: none;
  background: #fff9ec;
  border-bottom: 1px solid #e4cfaa;
}
.chapter-narrative-toggle::-webkit-details-marker { display: none; }
.chapter-narrative-toggle::before { content: "▸ "; font-size: 0.78em; }
details.chapter-narrative-card[open] .chapter-narrative-toggle::before { content: "▾ "; }
.chapter-narrative-body {
  padding: 14px 18px 16px;
  font-size: 0.94rem;
  line-height: 1.82;
  color: var(--text);
}
.chapter-narrative-body p { margin: 0 0 13px; text-align: justify; }
.chapter-narrative-body p:last-child { margin-bottom: 0; }
/* Chapter header block above verse list */
.chapter-verse-panel-header {
  margin-top: 18px;
  margin-bottom: 18px;
}

/* Nav buttons */
.verse-nav, .chapter-nav {
  display: flex; justify-content: space-between; padding: 18px 0;
  margin-top: 28px; margin-bottom: 24px;
  font-family: 'Segoe UI', system-ui, sans-serif; font-size: 0.9em;
  align-items: center;
}
.verse-nav a, .chapter-nav a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 160ms ease, opacity 160ms ease, transform 160ms ease;
}
.verse-nav a:hover, .chapter-nav a:hover {
  color: var(--accent-deep);
  opacity: 0.9;
}

.chapter-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;
}

.chapter-nav-icon {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex: 0 0 auto;
  align-self: center;
}

.chapter-nav-icon[src$="back.png"] {
  margin-right: 3px;
}

.chapter-nav-icon[src$="forward.png"] {
  margin-left: 3px;
}

.chapter-nav-icon[src$="listing.png"] {
  width: 25px;
  height: 25px;
  filter: invert(1);
}

.chapter-nav-link:hover {
  transform: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Colophon */
.colophon {
  margin-top: 24px;
  margin-bottom: 10px;
  padding: 0;
  padding-bottom: 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-style: normal;
  font-size: 0.96em;
  color: var(--accent-deep);
  text-align: center;
}
.colophon .san {
  color: var(--accent-deep);
  font-style: normal;
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1.05em;
}

/* Footer */
footer {
  margin-top: 48px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.82em;
  /* Was #a89878, which is only 2.55:1 on the cream background -- well under
     the 4.5:1 minimum, and applied to the footer of every generated page.
     #6b5b4b is --text-light and gives 5.36:1. */
  color: var(--text-light);
}

/* ---------------------------------------------------------------------------
 * Site footer, emitted on every page by site_meta.site_footer_html().
 *
 * Two rows by design: copyright on one line, the two links on the next. The
 * thin rule above comes from .site-footer's own border-top, so the layout does
 * not depend on the generic `footer` rule above.
 *
 * MIRRORED in site/index.html (.site-footer and friends), which cannot use
 * this stylesheet because the landing page is self-contained. Keep in sync.
 * --------------------------------------------------------------------------- */
.site-footer {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  text-align: center;
  font-size: 0.76rem;
  /* 7.33:1 on the cream. */
  color: #4f4f57;
}

.site-footer .footer-note {
  margin: 0 0 6px;
  color: var(--text-light);
}

.site-footer .footer-copyright { margin: 0 0 6px; }

.site-footer .footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
}

.site-footer .footer-links a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.site-footer .footer-links a:hover { color: var(--link-hover); }

@media (max-width: 900px) {
  .shared-top-strip {
    gap: 10px;
  }
  .shared-brand-wordmark {
    font-size: 24px;
  }
  body.chapter-page {
    max-width: 820px;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .chapter-layout {
    height: 100%;
    min-height: 0;
  }
  .chapter-reading-panel {
    padding: 12px;
  }
  .chapter-reading-grid {
    gap: 6px;
  }
  .chapter-reading-chip {
    font-size: 0.74rem;
    padding: 6px 10px;
  }
  .verse-reader-index {
    min-width: 38px;
  }
  .verse-reader-more-rail {
    flex: 0 0 15%;
    width: 15%;
    min-width: 58px;
    padding: 8px 4px;
  }
  .verse-reader-more-link {
    display: none;
  }
  .verse-reader-san-line {
    font-size: 1.04rem;
    line-height: 1.8;
  }
  .chapter-verse-panel {
    overflow-y: auto;
    max-height: none;
    padding-right: 0;
  }
}

/* Single verse page enhancements */
.verse-single-sanskrit {
  background: var(--sanskrit-bg); padding: 28px 32px;
  font-size: 1.5em; line-height: 2.1; text-align: center;
  font-family: 'Tiro Devanagari Hindi', 'Mangal', serif;
  border: 1px solid var(--border); border-radius: 6px;
  margin-bottom: 28px; color: var(--text);
  box-shadow: 0 1px 4px rgba(120,80,20,0.06);
}
.verse-single-iast {
  font-style: italic; color: var(--text-light);
  font-size: 1.05em; line-height: 1.9; text-align: center;
  padding: 16px 0 24px;
}
.verse-single-translation {
  font-size: 1.05em; line-height: 1.85; padding: 16px 0;
  text-align: justify;
}

/* Krishna Bhakti Rasodayam entry page */
body.kbr-entry-page {
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Keep top search panel geometry identical across entry and chapters pages */
body.kbr-entry-page .shared-top-panel {
  min-height: 72px;
  padding: 0 18px;
}

body.kbr-entry-page .shared-top-strip {
  gap: 16px;
  width: 100%;
}

body.kbr-entry-page .shared-search-wrap {
  flex: 1 1 auto;
  max-width: none;
  min-width: 90px;
}

body.kbr-entry-page .shared-search {
  width: 90%;
  max-width: 980px;
  min-height: 48px;
  padding: 0 18px;
}

.entry-breadcrumb {
  padding: 10px 18px;
  font-size: 17px;
  color: var(--text-light);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin: 0 0 12px;
  background: var(--card-bg);
  font-family: 'Segoe UI', system-ui, sans-serif;
}

.entry-breadcrumb a {
  color: var(--accent);
  text-decoration: none;
}

.entry-breadcrumb a:hover {
  text-decoration: underline;
}

.entry-breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 8px;
  color: #b8a88a;
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}

.entry-breadcrumb .sep::before {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}

.entry-breadcrumb .crumb-label {
  color: var(--text-light);
}

.chapter-view-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* When chapter-view-switch uses the inline breadcrumb class, keep panel style but fix flex gap */
.entry-inline-breadcrumb.chapter-view-switch {
  padding: 9px 20px;
  gap: 0;
}

.chapter-top-controls {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 14px;
  margin-right: 8px;
}

.view-select-wrap {
  display: inline-flex;
  align-items: center;
}

.chapter-view-select {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: #111111;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.92em;
  line-height: 1;
  min-height: 26px;
  height: 26px;
  padding: 3px 36px 3px 12px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image:
    linear-gradient(#cfd4dc, #cfd4dc),
    linear-gradient(45deg, transparent 50%, #2b2b2b 50%),
    linear-gradient(135deg, #2b2b2b 50%, transparent 50%);
  background-position:
    calc(100% - 26px) 50%,
    calc(100% - 14px) 50%,
    calc(100% - 8px) 50%;
  background-size: 1px 58%, 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.options-toggle-btn {
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #4e5968;
  width: auto;
  height: auto;
  min-height: 0;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease, filter 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.options-toggle-btn img {
  width: 25px;
  height: 25px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1) contrast(1.1);
  transition: transform 0.2s ease, filter 0.2s ease;
}

.options-toggle-btn:hover {
  opacity: 1;
  border-radius: 999px;
  background: rgba(183, 145, 99, 0.22);
  box-shadow: 0 0 0 1px rgba(183, 145, 99, 0.28) inset;
}

.options-toggle-btn:hover img {
  transform: scale(1.1);
  filter: brightness(0) invert(1) contrast(1.2) drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
}

.options-toggle-btn.is-disabled,
[data-options-toggle][aria-disabled="true"] {
  opacity: 0.4;
  cursor: default;
  filter: grayscale(1);
}
[data-options-toggle][aria-disabled="true"]:hover {
  background: transparent;
}

.chapter-reading-panel[hidden] {
  display: none;
}

#chapterViewHost {
  transition: opacity 0.2s ease;
}

#chapterViewHost.is-loading {
  opacity: 0.65;
}

.kbr-entry-content {
  max-width: 980px;
  margin: 0 auto;
  padding: 0 24px 24px;
}

.entry-overview {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 26px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 0 8px 18px rgba(80, 56, 20, 0.08);
  padding: 20px;
}

body.kbr-entry-page .inner-content {
  max-width: none;
  margin: 0;
  padding: 18px 20px 24px;
}

body.book-index-page.kbr-entry-page .inner-content {
  max-width: none;
  margin: 0;
  padding: 18px 20px 24px;
}

body.kbr-entry-page .kbr-entry-content {
  max-width: none;
  margin: 0;
  padding: 0;
}

body.book-index-page.kbr-entry-page .kbr-entry-content {
  max-width: 1060px;
  margin: 0 auto;
  padding: 0 20px 24px;
}

body.book-index-page.kbr-entry-page .book-invocation {
  margin-top: 4px;
  margin-bottom: 0;
}

body.book-index-page.kbr-entry-page .home-title {
  margin: 2px 0 12px;
}

body.book-index-page.kbr-entry-page .home-title .home-title-san {
  margin-top: 0;
  line-height: 1.16;
}

body.book-index-page.kbr-entry-page .home-title .home-title-en {
  margin-top: 0;
  line-height: 1.2;
}

/* Pin the breadcrumb directly beneath the sticky top panel, so the whole header
 * area (search panel + breadcrumb) stays visible while the content scrolls
 * past it. Position:sticky works here only because no ancestor clips overflow
 * any more -- see the .inner-app-shell comment near the top of this file.
 *
 * The offset must equal the top panel's real height, which is NOT the
 * --inner-top-row-height minimum of 72px at every width: above 641px the strip
 * is one row (panel measured 72px), but at 640px and below `.shared-top-strip`
 * wraps to two rows and the panel grows to 115px. Using 72px there would tuck
 * the breadcrumb 43px underneath the panel.
 *
 * `.chapter-nav` is excluded: that class is also an .entry-inline-breadcrumb
 * (the previous/next bar at the foot of a chapter), and pinning that would
 * leave a second bar stuck to the screen.
 *
 * body.chapter-page is reset to static: those pages keep their own
 * internally-scrolling shell, where the panel is already sticky inside the
 * scroller and no second bar appears.
 */
.entry-inline-breadcrumb:not(.chapter-nav) {
  position: sticky;
  top: 72px;
  z-index: 900;
}
body.chapter-page .entry-inline-breadcrumb:not(.chapter-nav) {
  position: static;
}
@media (max-width: 640px) {
  .entry-inline-breadcrumb:not(.chapter-nav) {
    top: 115px;
  }
}

/* Base guard for the shared breadcrumb (applies to every page that renders it,
   including the hand-written search page). The body-scoped rules below only
   add theme colors on specific page types; without an unscoped size rule a
   page whose <body> class is not listed renders the home icon at its
   intrinsic 512px. */
.entry-inline-breadcrumb .crumb-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  text-decoration: none;
}

.entry-inline-breadcrumb .crumb-home-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
}

/* Search results status bar: reuses the breadcrumb bar look (same background,
   padding and type) but shows a Back button + the "Showing …" line instead of
   a trail. */
body.search-page-body .entry-inline-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
}

body.search-page-body .crumb-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
}

body.search-page-body .crumb-back-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

body.search-page-body .crumb-back-btn svg {
  width: 16px;
  height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

body.search-page-body .search-status-text {
  font-size: 15px;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
}

body.kbr-entry-page .entry-inline-breadcrumb,
body.book-index-page .entry-inline-breadcrumb,
body.search-page-body .entry-inline-breadcrumb {
  margin: 0 0 0 0;
  font-size: 15px;
  line-height: 1.25;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #5b6565;
  border-bottom: 1px solid var(--border);
  padding: 9px 20px;
}

body.kbr-entry-page .entry-inline-breadcrumb a,
body.book-index-page .entry-inline-breadcrumb a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: color 160ms ease, opacity 160ms ease;
}

body.kbr-entry-page .entry-inline-breadcrumb a:hover,
body.book-index-page .entry-inline-breadcrumb a:hover {
  color: rgba(255,255,255,0.92);
  opacity: 0.9;
}

body.kbr-entry-page .entry-inline-breadcrumb .sep,
body.book-index-page .entry-inline-breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px 0 3px;
  color: rgba(255,255,255,0.82);
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
  transform: none;
}

body.kbr-entry-page .entry-inline-breadcrumb .sep::before,
body.book-index-page .entry-inline-breadcrumb .sep::before {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-label,
body.book-index-page .entry-inline-breadcrumb .crumb-label {
  color: rgba(255,255,255,0.85);
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-home-link,
body.book-index-page .entry-inline-breadcrumb .crumb-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  text-decoration: none;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-home-icon,
body.book-index-page .entry-inline-breadcrumb .crumb-home-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  transform: translateY(1px);
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-text,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-text {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-toggle,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-toggle {
  border: 0;
  background: transparent;
  color: rgba(255, 255, 255, 0.92);
  cursor: pointer;
  padding: 0;
  width: 18px;
  height: 18px;
  line-height: 1;
  /* Same reason as .temple-acc-trigger: a button without an explicit font
     falls back to the browser default, which put this one on Arial while the
     rest of the chrome is on the 'Segoe UI' stack. */
  font-family: 'Segoe UI', system-ui, sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-caret,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-caret {
  width: 14.4px;
  height: 14.4px;
  display: block;
  font-size: 0;
  line-height: 0;
  background-image: url('assets/down-arrow.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: brightness(0) invert(1);
  transform: translateY(2px) rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.16s ease;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown.is-open .crumb-dd-caret,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown.is-open .crumb-dd-caret {
  transform: translateY(2px) rotate(180deg);
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 0;
  width: max-content;
  max-width: min(220px, 72vw);
  padding: 6px;
  border: 1px solid rgba(201, 183, 154, 0.95);
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 8px 18px rgba(43, 32, 18, 0.2);
  color: #3b2e1e;
  white-space: normal;
  z-index: 1100;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu[hidden],
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu[hidden] {
  display: none !important;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-link,
body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-label,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-link,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-label {
  display: block;
  padding: 5px 8px;
  border-radius: 6px;
  color: #3b2e1e;
  text-decoration: none;
  font-size: 0.92em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-link:hover,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-link:hover {
  color: #3b2e1e;
  text-decoration: underline;
  background: #f7f0e1;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-link.is-current,
body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-label.is-current,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-link.is-current,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-label.is-current {
  background: #efe2c6;
  color: var(--accent-deep);
  font-weight: 600;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-list,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dd-menu-grid,
body.book-index-page .entry-inline-breadcrumb .crumb-dd-menu-grid {
  display: grid;
  grid-template-columns: repeat(4, auto);
  gap: 4px;
  width: auto;
  max-width: none;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="work"] .crumb-dd-menu,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="work"] .crumb-dd-menu {
  max-width: min(210px, 72vw);
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="volume"] .crumb-dd-menu,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="volume"] .crumb-dd-menu {
  max-width: min(180px, 72vw);
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="chapter"] .crumb-dd-menu,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="chapter"] .crumb-dd-menu {
  width: auto;
  max-width: none;
}

body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="chapter"] .crumb-dd-menu-link,
body.kbr-entry-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="chapter"] .crumb-dd-menu-label,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="chapter"] .crumb-dd-menu-link,
body.book-index-page .entry-inline-breadcrumb .crumb-dropdown[data-crumb-kind="chapter"] .crumb-dd-menu-label {
  min-width: 4.25em;
  text-align: center;
}

/* Chapter-nav footer bar — full-bleed like the top breadcrumb, consistent height everywhere */
body.kbr-entry-page .chapter-nav.entry-inline-breadcrumb,
body.book-index-page .chapter-nav.entry-inline-breadcrumb {
  margin-left: -20px;
  margin-right: -20px;
  margin-top: 0;
  border-top: 0;
  padding-top: 12px;
  padding-bottom: 12px;
}

/* On chapter VERSES pages the bar must NOT be full-bleed, and this is the one
 * place the -20px above is wrong.
 *
 * That negative margin exists to cancel a 20px page gutter so the bar reaches
 * the edge of the column. On entry and book-index pages the gutter is padding
 * on an ancestor of the bar, so cancelling it is correct. On chapter pages the
 * bar sits inside .chapter-verse-panel, whose 20px padding is what keeps the
 * verse CARDS off the edge -- so the -20px does not cancel a gutter, it makes
 * the bar escape past the cards by exactly 20px at each end.
 *
 * Measured at 1440px before this rule (content width 1403, panel scrollbar 15):
 *
 *   verse cards   20 .. 1368
 *   bottom bar     0 .. 1388     <- 20px out at BOTH ends
 *
 * The left chevron landed at 20 and the right at 1353, so the bar's coloured
 * surface ran past the columns of text it sits under, at both edges.
 *
 * Zeroing the margin puts the bar on the cards' own box, and zeroing the
 * horizontal padding puts the chevrons on that same edge -- so the bar, the
 * cards and the chevrons share one left and one right edge. Vertical padding
 * (12px, set above) is kept: it sets the bar's height.
 *
 * Specificity is (0,3,1), equal to the rule above, so this must stay AFTER it;
 * it also outranks body.chapter-page .entry-inline-breadcrumb { padding-right:
 * 35px } at (0,2,1), which is why the 35px right inset must be cleared here
 * rather than there. */
body.chapter-page .chapter-nav.entry-inline-breadcrumb {
  margin-left: 0;
  margin-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* On summary pages, make the bottom chapter-nav strip span full content width */
body.book-page.kbr-entry-page .chapter-summary-content .chapter-nav.entry-inline-breadcrumb {
  margin-left: -20px;
  margin-right: -20px;
}

body.kbr-entry-page .entry-overview {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 34px;
}

body.kbr-entry-page .entry-poster-wrap {
  display: flex;
  flex-direction: column;
}

body.kbr-entry-page .entry-poster-wrap .entry-cta-row {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.kbr-entry-page .entry-poster-wrap .entry-cta-link {
  width: 100%;
  text-align: center;
  border-radius: 999px;
}

body.kbr-entry-page .entry-poster-wrap img {
  margin-top: 8px;
}

.entry-poster-wrap {
  width: 100%;
}

.entry-poster-wrap img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  border: 1px solid #111;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}

.entry-copy {
  color: var(--text);
  line-height: 1.75;
}

.entry-title {
  margin: 0;
  color: var(--accent-deep);
}

.entry-title-san {
  display: block;
  font-family: 'Tiro Devanagari Hindi', serif;
  font-size: 1.05em;
  line-height: 1.25;
}

.entry-title-en {
  display: block;
  margin-top: 5px;
  font-size: 0.72em;
  color: var(--text-light);
  font-weight: 400;
}

.entry-subtitle {
  margin: 10px 0 12px;
  color: var(--accent-deep);
  font-style: italic;
  text-align: center;
}

.entry-pariccheda {
  margin: 8px 0 6px;
  font-family: 'Tiro Devanagari Hindi', serif;
  color: var(--accent-deep);
  text-align: center;
  font-size: 1.03em;
  line-height: 1.35;
}

.entry-synopsis {
  margin: 0 0 12px;
}

.entry-speaker-line {
  font-size: 0.92em;
  font-weight: 700;
}

.entry-colophon {
  margin-top: 14px;
  text-align: center;
  font-style: italic;
  font-size: 0.88em;
  color: var(--accent-deep);
}

.entry-meta {
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--text-light);
  font-size: 0.95em;
}

.entry-meta-heading {
  margin: 0 0 10px;
  color: var(--accent-deep);
}

.entry-meta-note {
  margin-top: 10px;
  color: var(--accent-deep);
  font-size: 0.9em;
  font-weight: 700;
}

.entry-cta-row {
  margin-top: 18px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.entry-cta-link {
  display: inline-block;
  text-decoration: none;
  border-radius: 6px;
  padding: 10px 16px;
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 0.92em;
  font-weight: 600;
}

.entry-cta-primary {
  background: var(--accent);
  color: #fff;
  border: 1px solid var(--accent);
}

.entry-cta-primary:hover {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #fff;
}

.entry-cta-secondary {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent-light);
}

.entry-cta-secondary:hover {
  background: var(--bg-warm);
  color: var(--accent-deep);
  border-color: var(--accent-deep);
}

/* Non-clickable "coming soon" pill shown on placeholder entry pages in
   place of the CTA link. Styled to read as an inert status chip. */
.entry-cta-soon {
  background: var(--bg-warm);
  color: var(--accent-light);
  border: 1px dashed var(--accent-light);
  cursor: default;
  opacity: 0.95;
}

.kbr-entry-content.chapter-summary-content {
  max-width: none;
  margin: 0;
  padding: 0 0 18px;
}

.chapter-index-title {
  text-align: center;
  padding-top: 10px;
  margin-bottom: 28px;
  padding-bottom: 0;
  border-bottom: 0;
}

.chapter-summary-overview {
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

body.temple-detail-page .inner-content {
  max-width: none;
  margin: 0;
  padding: 18px 20px 24px;
}

body.temple-detail-page .kbr-entry-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 20px 24px;
}

body.temple-detail-page .entry-inline-breadcrumb {
  margin: 0;
  font-size: 15px;
  line-height: 1.25;
  color: #fff;
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #5b6565;
  border-bottom: 1px solid var(--border);
  padding: 9px 20px;
}

body.temple-detail-page .entry-inline-breadcrumb a {
  color: #fff;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

body.temple-detail-page .entry-inline-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.92);
  opacity: 0.9;
}

body.temple-detail-page .entry-inline-breadcrumb .sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 6px 0 3px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0;
  line-height: 1;
  vertical-align: middle;
}

body.temple-detail-page .entry-inline-breadcrumb .sep::before {
  content: '\203A';
  font-size: 14px;
  line-height: 1;
  color: currentColor;
}

body.temple-detail-page .entry-inline-breadcrumb .crumb-label {
  color: rgba(255, 255, 255, 0.85);
}

body.temple-detail-page .entry-inline-breadcrumb .crumb-home-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  text-decoration: none;
}

body.temple-detail-page .entry-inline-breadcrumb .crumb-home-icon {
  width: 14px;
  height: 14px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  transform: translateY(1px);
}

.temple-detail-content {
  color: var(--text);
}

.temple-title-main {
  margin: 2px 0 4px;
  text-align: center;
  color: var(--accent-deep);
  font-size: 1.55rem;
  line-height: 1.2;
}

.temple-title-sub {
  margin: 0 0 16px;
  text-align: center;
  font-size: 0.96rem;
  color: var(--text-light);
}

.temple-profile-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card-bg);
  box-shadow: 0 8px 18px rgba(80, 56, 20, 0.08);
  padding: 14px;
  margin-bottom: 14px;
}

.temple-profile-media {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.temple-profile-img {
  width: 100%;
  max-width: 220px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid #d7c7a8;
}

.temple-main-table,
.temple-location-table {
  width: 100%;
  border-collapse: collapse;
}

.temple-ddv-table {
  table-layout: fixed;
}

.temple-main-table th,
.temple-main-table td,
.temple-location-table th,
.temple-location-table td {
  border-bottom: 1px solid #eadcc2;
  padding: 8px 10px;
  vertical-align: top;
  font-size: 0.92rem;
  text-align: left;
  line-height: 1.35;
}

.temple-main-table th {
  width: 33.333%;
  color: var(--accent-deep);
  font-weight: 600;
  font-size: 0.89rem;
}

.temple-main-table td {
  width: 66.666%;
  font-size: 0.89rem;
}

.temple-location-table th {
  width: 30%;
  color: #000;
  font-weight: 400;
}

.temple-location-table td {
  width: 70%;
}

.temple-ddv-table th {
  width: 30%;
  color: #000;
  font-weight: 400;
}

.temple-ddv-table td {
  width: 70%;
}

.temple-pasurams-table {
  table-layout: fixed;
}

.temple-pasurams-table th,
.temple-pasurams-table td {
  border-right: 1px solid #d9ccc4;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.temple-pasurams-table th:last-child,
.temple-pasurams-table td:last-child {
  border-right: none;
}

.temple-pasurams-table th:first-child,
.temple-pasurams-table td:first-child {
  width: 25%;
  text-align: left;
}

.temple-pasurams-table th:nth-child(2),
.temple-pasurams-table td:nth-child(2) {
  width: 20%;
  text-align: left;
}

.temple-pasurams-table th:nth-child(3),
.temple-pasurams-table td:nth-child(3) {
  width: 55%;
  text-align: left;
}

@media (max-width: 900px) {
  .temple-pasurams-table th:first-child,
  .temple-pasurams-table td:first-child {
    width: 24%;
  }

  .temple-pasurams-table th:nth-child(2),
  .temple-pasurams-table td:nth-child(2) {
    width: 18%;
  }

  .temple-pasurams-table th:nth-child(3),
  .temple-pasurams-table td:nth-child(3) {
    width: 58%;
  }

  .temple-pasurams-table th,
  .temple-pasurams-table td {
    font-size: 0.88rem;
    padding: 6px 8px;
  }
}

@media (max-width: 640px) {
  .temple-pasurams-table {
    table-layout: auto;
  }

  .temple-pasurams-table th:first-child,
  .temple-pasurams-table td:first-child {
    width: auto;
  }

  .temple-pasurams-table th:nth-child(2),
  .temple-pasurams-table td:nth-child(2) {
    width: auto;
  }

  .temple-pasurams-table th:nth-child(3),
  .temple-pasurams-table td:nth-child(3) {
    width: auto;
  }

  .temple-pasurams-table th,
  .temple-pasurams-table td {
    font-size: 0.82rem;
    padding: 6px 6px;
  }
}

.temple-accordion {
  display: grid;
  gap: 10px;
}

.temple-acc-item {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg);
  overflow: hidden;
}

.temple-acc-trigger {
  width: 100%;
  border: 0;
  background: #f2e8d4;
  color: var(--accent-deep);
  text-align: left;
  padding: 11px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  /* Form controls do not inherit the page font; without this the accordion
     header fell back to the browser default (Arial) while every other piece
     of UI chrome on the site is on the 'Segoe UI' stack. */
  font-family: 'Segoe UI', system-ui, sans-serif;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.temple-acc-trigger::after {
  content: '+';
  font-size: 1rem;
}

.temple-acc-item.open .temple-acc-trigger::after {
  content: '-';
}

.temple-acc-body {
  padding: 10px 14px 12px;
}

.temple-empty {
  color: var(--text-light);
  font-style: italic;
}

@media (max-width: 640px) {
  .book-index-page .chapter-list a {
    grid-template-columns: 64px minmax(0, 1fr) 44px;
  }

  .ddv-volumes-page .chapter-list a {
    grid-template-columns: 10% 70% 20%;
  }

  .ddv-chapters-page .chapter-list a {
    grid-template-columns: 10% 70% 20%;
  }

  .kbr-main-index-page .chapter-list a {
    grid-template-columns: 10% 70% 20%;
  }

  .book-index-page .chapter-list .card-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
  }

  .book-index-page .chapter-list .card-cell {
    font-size: 0.8rem;
    padding: 4px 6px;
  }

  .chapter-view-switch {
    row-gap: 10px;
    align-items: flex-start;
  }

  .chapter-view-switch .crumb-dropdown[data-crumb-kind="work"] .crumb-dd-text,
  .chapter-view-switch .crumb-dropdown[data-crumb-kind="volume"] .crumb-dd-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }

  .chapter-view-switch .crumb-dropdown[data-crumb-kind="work"] .crumb-dd-text {
    max-width: 12ch;
  }

  .chapter-view-switch .crumb-dropdown[data-crumb-kind="volume"] .crumb-dd-text {
    max-width: 7.4ch;
  }

  .chapter-view-switch .sep {
    margin: 0 5px 0 2px;
  }

  .kbr-entry-content {
    padding: 0 16px 20px;
  }

  body.temple-detail-page .kbr-entry-content {
    padding: 0 14px 20px;
  }

  .temple-profile-panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .temple-image-placeholder {
    width: min(100%, 180px);
  }

  .temple-main-table th,
  .temple-main-table td,
  .temple-location-table th,
  .temple-location-table td {
    font-size: 0.86rem;
    padding: 7px 8px;
  }

  .entry-overview {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 14px;
  }

  .chapter-top-controls {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    margin-top: 6px;
    justify-content: flex-start;
    gap: 8px;
    padding-left: 0;
    border-left: 0;
    padding-right: 0;
  }

  .view-select-wrap {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
  }

  .chapter-view-select {
    min-width: 0;
    width: auto;
  }

  .options-toggle-btn {
    flex: 0 0 auto;
  }

  .entry-poster-wrap {
    max-width: 280px;
    margin: 0 auto;
  }
}

@media (max-width: 720px) {
  .chapter-view-switch .crumb-dropdown[data-crumb-kind="work"] .crumb-dd-text {
    max-width: 10.8ch;
  }

  .chapter-view-switch .crumb-dropdown[data-crumb-kind="volume"] .crumb-dd-text {
    max-width: 6.8ch;
  }
}

/* Verse highlight: applied briefly when arriving via a #verse-N search link. */
.verse-reader-card.verse-highlight {
  outline: 2px solid var(--accent, #7a2e0e);
  outline-offset: 2px;
  border-radius: 8px;
  background: #fff8e6;
  transition: background 0.4s ease, outline-color 0.4s ease;
}

/* ==========================================================================
   Hamburger + off-canvas navigation drawer (Round 29)
   ========================================================================== */

/* Hamburger button (left of the top panel) */
.nav-hamburger {
  width: 50px;
  height: 44px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--text, #3b2e1e);
}
.nav-hamburger:hover { background: rgba(183, 145, 99, 0.16); }
.nav-hamburger svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  fill: none;
}

/* Brand link in the top panel (next to the hamburger) */
/* The site wordmark: two stacked samarkan lines in the top panel and drawer.
 *
 * line-height is 1.22, not 1. Samarkan's own em box is 1.24x its font-size,
 * so `line-height: 1` was NEGATIVE leading -- the descenders of line 1 and the
 * ascenders of line 2 measured ~0.6px apart, i.e. grazing. 1.22 costs 6px of
 * panel height (34 -> 40px, inside a 72px panel) and clears it. Both lines are
 * on zero letter-spacing: line 1 previously carried 0.04em while line 2 had
 * none, so the two halves of the same lockup were tracked differently for no
 * recorded reason.
 *
 * NOTE ON SPELLING: the wordmark is ASCII ("Granthamrutham"), not the IAST
 * form used in page titles and prose, because SamarkanWeb is a 229-glyph
 * ASCII-only face with no `a-macron` or `r-dot-below`. See
 * ProjectResumed/BACKLOG.md B-001. If that item is ever done, this markup and
 * the `logo-line-2` text in scripts/site_sidebar.py both change.
 */
.panel-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  flex: 0 0 auto;
  /* Both lines are set at the SAME size (1.15rem) so the lockup reads as one
   * balanced name rather than a big line over a small one.
   *
   * That is only viable because of the 2026-10-17 rename. With the old second
   * line ("Granthamrutam", 13 characters) the two halves differed 45% in
   * character count, so no single size made them both equal in width AND equal
   * in size -- line 2 had to sit at 0.86rem, and the mismatch was hidden by
   * centring. "Divyavaani" is 10 characters against "Sri Premika"'s 11, so at
   * one shared size the widths come out 85.93px and 88.59px -- a 3% difference,
   * which centring splits into 1.3px on each side and which is imperceptible.
   *
   * Measured, not assumed: at 18.4px, "Divyavaani" advances 85.93px against
   * "Sri Premika"'s 88.59px. The exact equal-width size would be 18.97px
   * (1.186rem), but that would make line 2's type 3% LARGER than line 1's to
   * chase a 3% width difference -- trading an obvious size imbalance for a
   * subtle one. Equal type, near-equal width, is the better trade.
   *
   * Superseded note, kept because the reasoning still explains the centring: at
   * 0.86rem the old lockup measured 96.7px vs 101.5px. Centring is retained
   * because it keeps the weaker edge from looking ragged whatever the widths
   * drift to if the name changes again. */
  align-items: center;
}
.panel-brand .logo-line-1 {
  font-family: 'SamarkanWeb', serif;
  color: var(--brand-name-on-white);
  font-size: 1.15rem;
  line-height: 1.22;
  letter-spacing: 0;
  white-space: nowrap;
}
.panel-brand .logo-line-2 {
  font-family: 'SamarkanWeb', serif;
  color: var(--brand-name-on-white);
  /* Same size as line 1 -- see the note on .panel-brand above. Was 0.86rem when
   * this line read "Granthamrutam". */
  font-size: 1.15rem;
  line-height: 1.22;
  /* Vertical gap between the two lines of the lockup.
   *
   * Measured from the glyph outlines, not eyeballed: line 1's descender sits
   * 5px below its baseline and line 2's ascender above its own, so at
   * margin-top 1px the ink gap was 2.7px -- the descender of "Sri Premika" all
   * but touching the top of the second line.
   *
   * RENAMED 2026-10-17, twice over. First the name changed to "Divyavaani",
   * whose ink ascent is a capital `D` rather than the taller `h` of
   * "Granthamrutam", which closed the gap to 4.62px at margin-top 4px. Then
   * line 2 was raised from 0.86rem to 1.15rem to match line 1, which grows its
   * ink ascent from 12px to 17px -- and that alone would have closed the gap
   * again.
   *
   * What saves it is that the line box grows with the type: at 1.15rem the box
   * is 1.22 * 18.4 = 22.4px against an ink height of 17 + 5 = 22px, so the
   * extra size is absorbed by the box rather than eaten out of the gap.
   * Re-solved rather than guessed -- the ink gap at margin-top 5px is 5.45px,
   * against the 5.62px it measured before this change (and against ~5.7px when
   * the original 4px was chosen). No adjustment needed.
   *
   * Total lockup height grows 44.3 -> 49.9px, still well inside the 72px panel.
   *
   * Only the TWO-LINE state is affected: the <=640px rule zeroes this margin
   * for the single-line wordmark, and the drawer brand keeps its own rule below
   * (it is single-line at every width now, so it zeroes the margin outright). */
  margin-top: 5px;
  white-space: nowrap;
}
.panel-brand:hover { opacity: 0.85; }

/* Off-canvas drawer */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
}
.nav-drawer.is-open { pointer-events: auto; }

.nav-drawer-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.nav-drawer.is-open .nav-drawer-overlay { opacity: 1; }

.nav-drawer-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  /* Adaptive width: `min(360px, 92%)`, and nothing else.
   *
   * The panel is sized to what it has to hold, so it never becomes a wide band
   * with the content floating in the middle of it.
   *
   * 360px is the ceiling, set by the head row: 38 (back button) + 10 (gap) +
   * 275.8 (the name at 22px) + 32 (panel padding) = 355.8px, rounded up. Below
   * ~391px of viewport the 92% starts to bind instead and the panel simply
   * follows the screen down -- 345px at a 390px phone, 281px at a 320px one.
   *
   * Because the two limits cross over continuously, there is no step anywhere:
   * the panel is 92% up to ~391px and a flat 360px from there up. On a 1440px
   * laptop that is 25% of the screen, which is what a navigation drawer normally
   * occupies -- the drawer stays a drawer instead of turning into a sidebar.
   *
   * Earlier this had a `@media (max-width: 640px) { width: 92% }` override, which
   * made tablets and small laptops render a ~574px panel. Everything downstream
   * -- a full-width name plate, a centred name -- existed only to make that
   * over-wide panel look deliberate. Sizing the panel correctly removes the need
   * for all of it. */
  width: 360px;
  max-width: 92%;
  /* The whole panel is the light cream, not white.
   *
   * Was #fff, with the cream confined to the name plate. With the plate gone the
   * cream moved to the panel itself, which is the same surface the plate had
   * (#f2efe9) applied to the full height instead of one band. It separates the
   * drawer from the white top panel and reads warmer than white against the
   * cream page background (#f7f3ea) it slides over.
   *
   * One consequence worth knowing: every downstream colour that was chosen
   * against white now sits on cream instead -- see the menu hover and the back
   * button's circle, which are tuned for this surface. */
  background: #f2efe9;
  box-shadow: 2px 0 20px rgba(0, 0, 0, 0.2);
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer-panel { transform: translateX(0); }

.nav-drawer-head {
  /* ONE row: the back button, then the name.
   *
   * Back to a single line, but not back to the old problem. Previously the name
   * shared this row at a fixed 18px, which overflowed on a narrow phone and is
   * why the head was stacked in the first place. Now the name is sized against the
   * row's remaining width, so it always fits and the row can be one line at every
   * viewport.
   *
   * The head is 38px tall, set by the arrow. Stacked it was 106px, so this gives
   * back ~68px of vertical space -- most of it by removing the name plate, which
   * was a full-width band sitting on its own line. */
  display: flex;
  flex-direction: row;
  align-items: center;
  /* Space between the arrow and the name. Every px here comes out of the name. */
  gap: 10px;
  margin-bottom: 16px;
}
.nav-drawer-brand {
  /* A bare name -- no surface behind it now.
   *
   * The plate was removed for a measured reason, not a taste one. On a single row
   * the width budget is `arrow + gap + plate padding + name`, and the plate
   * contributed 24px of horizontal padding that came straight out of the name. The
   * plate cost about 2px of type at every width and capped the name at 20px;
   * without it the name reaches its full 22px on any screen from ~408px up.
   *
   * `inline-flex` rather than `flex`, so the element is only as wide as the name
   * and the row is laid out from the left. `min-width: 0` lets it shrink rather
   * than push the arrow off the edge if the name ever outgrows the budget. */
  display: inline-flex;
  flex-direction: row;
  align-items: baseline;
  /* Stands in for the word space the markup does not have: the two spans are
     adjacent with no whitespace between them (see scripts/site_sidebar.py).
     Resolves against THIS element's font-size, which is the inherited 17px, so
     the gap is a constant ~5px rather than scaling with the name -- which is why
     the width formula below carries a constant term. */
  gap: 0.3em;
  line-height: 1;
  text-decoration: none;
  min-width: 0;
}
.nav-drawer-brand .logo-line-1,
.nav-drawer-brand .logo-line-2 {
  font-family: 'SamarkanWeb', serif;
  color: var(--brand-name-on-white);
  /* Fluid, and the only thing that gives when the row is too narrow for all of it.
   *
   * The row leaves the name `0.92 * vw - 32 (panel padding) - 38 (arrow) -
   * 10 (gap)` = `0.92vw - 80`. The name measures `10.11 * fontSize + 4.8px`, where
   * the 4.8 is the word gap above -- measured off the font, not assumed, and note
   * that it is a constant rather than proportional to the size.
   *
   * RENAMED 2026-10-17: the coefficient was 12.32 for the 24-character
   * "Sri Premika Granthamrutam" and is 10.11 for the 21-character
   * "Sri Premika Divyavaani" (9.4844 advance + 0.63 tracking, both measured from
   * the real font). The formula below was rescaled by 12.3197/10.1144 = 1.218 so
   * the name keeps the same share of the row it had before, rather than shrinking
   * and leaving the drawer head looking empty. Solving for the size at 96% of
   * the available width with the new coefficient:
   *
   *     10.1144f + 4.8 = 0.96 * (0.92vw - 80)
   *     f = 0.0873vw - 8.07px
   *
   * rounded to `9.10vw - 8.98px`, which carries the same ~5px margin so the name
   * never sits flush against the panel edge. Capped at 22px; the cap now binds
   * from ~341px of viewport instead of ~393px, because the shorter name reaches
   * the cap sooner.
   *
   * `vw` here already excludes the ~15px scrollbar gutter that
   * `scrollbar-gutter: stable` reserves on <html>. Measured: at a 390px viewport
   * 100vw is 375.1px, so `9.10vw - 8.98px` = 25.16px, which the 22px cap caps. */
  font-size: min(22px, calc(9.10vw - 8.98px));
  line-height: 1.22;
  /* Same tracking as the single-line top-panel wordmark, so the name is set
     identically in both places. */
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.nav-drawer-brand .logo-line-2 {
  /* Was 4px, which spaced the two STACKED lines. On one line it must be zero,
     exactly as the <=640px top-panel rule does. */
  margin-top: 0;
}
/* The dismiss control: a grey chevron in a ringed circle, at the left of the head
 * row.
 *
 * Where the definition actually comes from, measured: the white fill against the
 * panel's cream is only ~1.07:1, so the fill is a soft lift rather than a visible
 * chip, and the 1px ring at ~1.45:1 is what outlines the button. That was equally
 * true before the panel went cream -- the fill matched white exactly then -- so
 * nothing about how visible the control is has changed, only what the numbers
 * are. Strengthening it means darkening the ring, not touching the fill. */
.nav-drawer-back {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #ccd3d3;
  border-radius: 50%;
  background: #fff;
  color: #5b6565;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Fixed, so it never gives width: the name is the element that shrinks. No
     `align-self` either -- the parent's `align-items: center` keeps the arrow
     optically level with the name. */
  flex: 0 0 auto;
  transition: background 160ms ease, border-color 160ms ease;
}
/* Warm-biased and deeper than the old #eef1f1 / #b9c2c2 pair. That pair was tuned
 * to lift a white chip off a white panel; against the cream it moved the fill by
 * only about 3/255, i.e. not visible at all. This moves both the fill and the ring
 * enough to register. */
.nav-drawer-back:hover { background: #e9eded; border-color: #a8b3b3; }
.nav-drawer-back:focus-visible { outline: 2px solid var(--brand-name, #ab4b25); outline-offset: 2px; }
.nav-drawer-back svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}

.nav-drawer-links {
  display: flex;
  flex-direction: column;
  /* Zero, not 4px: the rows are now separated by hairline rules rather than by
     space, so a gap would float each rule in the middle of nothing. */
  gap: 0;
}
.nav-drawer-link {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: #3d3d45;
  padding: 10px 12px;
  border-radius: 10px;
  /* The phone figure. 44px is the touch-target minimum, and on a phone the drawer
   * is 88-92% of the screen with nothing else competing for the eye, so the rows
   * can afford the air. The desktop layout range tightens this -- see the media
   * query below the hover rule. */
  min-height: 44px;
  /* The single live row (Settings) is a <button>; the rows that are not built
     yet are <span>s (see scripts/site_sidebar.py). These resets make every row
     render identically whichever element it happens to be. */
  width: 100%;
  border: 0;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
/* Hairline rule between rows, and only between them -- never above the first or
 * below the last, which would read as a box rather than a list.
 *
 * 0.12 alpha on the text colour, i.e. roughly #e0ddd4 on the panel's cream.
 *
 * Deliberately just a 1px border rather than a drawn element: at this machine's
 * 1.62 device scale that 1px floors to a single physical device pixel, which is
 * the thinnest line the screen can draw -- exactly the "very thin" rule asked
 * for. (getComputedStyle reports it as 0.617284px, which is that one device
 * pixel expressed back in CSS px; nothing is being thinned away.) The alpha is
 * what actually controls visibility at that thickness, so it sits a shade above
 * the lightest grey that still reads on this surface. */
.nav-drawer-link + .nav-drawer-link {
  border-top: 1px solid rgba(61, 61, 69, 0.12);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}
/* Square the INNER corners so the four rows read as one card. Without this the
 * 10px radius on each row's bottom corners would leave a rounded notch against
 * the next row's square top edge -- visible as soon as a row is hovered, since
 * the highlight would have a curved bottom and a straight top. Only the first
 * row keeps its top radius and only the last keeps its bottom radius. */
.nav-drawer-link:not(:last-child) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.nav-drawer-link:first-child { border-top: 0; }
/* Warm rather than the previous cool #e0ddd8, and a shade deeper.
 *
 * The panel is cream now, so a grey hover read as a slightly dirty patch against
 * it. This is a darker member of the same cream family. The extra depth is not
 * arbitrary: #e0ddd8 on white was a ~31/255 step, and #ddd6c9 on #f2efe9 is a
 * ~21-32 step, so the highlight keeps roughly the punch it had before the panel
 * colour changed underneath it. */
.nav-drawer-link:hover { background: #ddd6c9; }
.nav-drawer-link:focus-visible { outline: 2px solid var(--brand-name, #ab4b25); outline-offset: 2px; }

/* Desktop layout range (641px and up, the same boundary the rest of the site
 * uses for mobile vs desktop).
 *
 * 44px rows are a touch-target figure and a pointer does not need it. Up here the
 * panel is only 25-56% of the screen rather than near-full-width, so the same
 * 44px pitch reads as loose air in a narrow column.
 *
 * 42px, not the 38px this was briefly set to. 38 measured as tighter than 44 was
 * loose -- a 14% reduction turned out to be more than the column needed, and the
 * list read as cramped rather than compact. 42 is a 4.5% reduction from 44, and
 * the four-row list goes 176px -> 168px.
 *
 * The padding trim is what makes the min-height bind: a row is
 * `padding + max(icon, text line box)`, and the 19px icon is taller than the
 * 15px label's 16.5px line box, so at 10px padding the natural height is 39px and
 * a min-height of 42 would be ignored. At 8px the natural height is 35px, so the
 * min-height takes over and the row lands on exactly 42px. Changing one without
 * the other silently does nothing. */
@media (min-width: 641px) {
  .nav-drawer-link { min-height: 42px; padding: 8px 12px; }
}

/* Menu rows that have no destination yet. They keep their place so the drawer's
   shape is stable, but they are deliberately inert: dimmed (icon and label
   together), no hover highlight, and the arrow cursor instead of the pointing
   hand, so nothing reads as an available action.

   A deeper grey rather than the 0.45 `opacity` this used to be, for two reasons.

   Measured, the old treatment was barely legible. `opacity: 0.45` on #3d3d45 over
   the cream panel renders as roughly #a19f9f, about 2.2:1 -- below even the 3:1
   large-text floor -- and it gets worse the smaller the label, which is why it read
   as washed out on phones specifically. #6b6b73 measures 4.6:1 on the panel:
   comfortably readable while still a clear step down from the enabled 9.4:1, so the
   row still reads as unavailable. Disabled controls are exempt from the contrast
   minimums, but "exempt" is not the same as "should be unreadable".

   Second, and this was a bug rather than a preference: `opacity` on the row also
   faded that row's hairline border-top to 45%. All four rows are disabled, so every
   separator was rendering at an effective 0.054 alpha instead of the 0.12 it was
   designed at -- roughly 40% of the intended strength, which is why the rules looked
   fainter than intended. Setting colours on the two children instead of opacity on
   the row leaves the separators at full strength. */
.nav-drawer-link.is-disabled { cursor: default; }
.nav-drawer-link.is-disabled .nav-drawer-link-text,
.nav-drawer-link.is-disabled .nav-drawer-icon { color: #6b6b73; }
.nav-drawer-link.is-disabled:hover { background: transparent; }
.nav-drawer-icon {
  /* 19px against a 15px label -- a 1.27 ratio.
   *
   * Was 22px, which is 1.47 of the label and, more to the point, exactly the size
   * of the site name on a desktop panel. The label is a light 400-weight sans with
   * no fill; the icons are solid shapes in a 1.9 stroke, so at equal nominal size
   * they carry considerably more ink. 22px made the icons the heaviest thing in
   * the row.
   *
   * The SVGs scale, so the stroke thins with them: 1.9 in a 24 viewBox renders as
   * 1.74px at 22px and 1.50px at 19px. That is the same proportional reduction as
   * the width, which is what keeps the line weight looking deliberate rather than
   * either heavy or spindly. */
  width: 19px;
  height: 19px;
  color: #3d3d45;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nav-drawer-icon svg {
  width: 19px;
  height: 19px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.nav-drawer-link-text {
  font-family: 'Segoe UI', system-ui, sans-serif;
  /* 17px at every width. One size, no breakpoint.
   *
   * 17px is not a preference, it is the first size that actually reads differently
   * from the 15px this started at. Segoe UI's lowercase height is the same eight
   * pixels at 15px and at 16px -- the extra pixel goes into the ascender and the
   * side bearings, not into the letters the eye reads -- so a 15 -> 16 bump was
   * measurably invisible and did nothing on a real phone:
   *
   *     15px  x-height 8px   "Bookmarks" 73.2px
   *     16px  x-height 8px   "Bookmarks" 78.1px   <- invisible step
   *     17px  x-height 9px   "Bookmarks" 84.5px   <- first visible step
   *
   * Uniform rather than 17px-on-small / 15px-on-large. The two-values version was
   * defensible but the inversion read as a mistake, and on measurement the label
   * has ample room at every width -- 84.5px against 191px available even at a 320px
   * viewport -- so there was never a reason to shrink it on the large end. 17px is
   * also what Apple's body text defaults to on iOS, so on a phone it matches the
   * surrounding system UI. */
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.1;
  white-space: nowrap;
}

/* Lock page scroll while the drawer is open. On most inner pages the document
   is the scroller, so locking <body> is enough. Chapter VERSES pages keep their
   scroll on .inner-main-shell, so that is locked too -- scoped to
   body.chapter-page, because setting overflow:hidden on a non-scrolling
   ancestor would break the sticky top panel on the other pages. */
body.drawer-open { overflow: hidden; }
body.chapter-page.drawer-open .inner-main-shell { overflow: hidden; }

/* ---------------------------------------------------------------------------
 * Right-edge alignment of the header search pill + the breadcrumb view control
 * with the page's content column.
 *
 * The content column insets differ per page type, so the header right padding
 * is set to match each:
 *   - flat content pages (entry, chapter summary, listing, search): 20px
 *   - chapter pages: the verse list scrolls in .chapter-verse-panel which has
 *     a 15px inner scrollbar, so the verse cards end at 20 + 15 = 35px from
 *     the right edge. The header matches that so the pill and the view-select
 *     line up pixel-for-pixel with the cards below.
 * --------------------------------------------------------------------------- */
.chapter-top-controls { margin-right: 0; }

/* Right-align the header search only where the content spans the full page
 * width (chapter index/summary + entry pages), so its right edge lines up with
 * the content. Pages whose content is a narrower centred column (listings,
 * temple, keerthanavali, search) keep the pill centred as before. */
body.chapter-page .shared-search-wrap,
body.book-page.kbr-entry-page:not(.book-index-page) .shared-search-wrap {
  justify-content: flex-end;
}

body.kbr-entry-page .shared-top-panel,
body.book-index-page .shared-top-panel,
.shared-top-panel {
  padding-right: 20px;
}

body.chapter-page .shared-top-panel { padding-right: 35px; }
body.chapter-page .entry-inline-breadcrumb { padding-right: 35px; }

/* Narrow layout: .chapter-verse-panel drops to padding-right 0, so the cards
 * end just the 15px scrollbar from the edge -- match that inset instead. */
@media (max-width: 900px) {
  body.chapter-page .shared-top-panel { padding-right: 15px; }
  body.chapter-page .entry-inline-breadcrumb { padding-right: 15px; }
}

/* -----------------------------------------------------------------------
 * Content protection — verses and the accompanying study details
 *
 * Text selection is disabled on the reading content (Sanskrit verses, IAST,
 * translations, word-by-word meanings, purport, summaries, temple details,
 * keerthanavali text) so it cannot be easily copy/pasted. Interactive
 * controls inside these regions (verse arrows, "More" links, accordion
 * triggers, sub-card toggles) keep working — `user-select` does not affect
 * clicks. js/content-guard.js reinforces this by cancelling copy/cut/drag.
 * Keep this selector list in sync with PROTECTED_SELECTOR in that script.
 * ----------------------------------------------------------------------- */
.verse-reader-card,
.verse-subcard-body,
.chapter-summary-content,
.entry-copy,
.temple-detail-content,
.kv-song-content,
.kv-song-content-area,
.kv-song-info-panel,
.kv-song-text,
.kv-subcard-body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* Visually hidden, but available to screen readers and crawlers. Used to
 * give pages that have no visible heading (landing, search) a real <h1>, and
 * to label chapter sections without changing the visual design. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* ---------------------------------------------------------------------------
 * Chapter / volume listing cards on small screens.
 *
 * Each card is a number | name | verse-count grid. The NAME is the primary
 * content and deserves every pixel going, because KBR's IAST names contain
 * single unbreakable Sanskrit compounds. Measured at the phone font sizes
 * used here:
 *
 *     Śrī Kṛṣṇasvarūpavarṇanam ............... 171px on one line
 *     Madhyāhnikalīlābhāvanāvarṇanam ......... 224px as ONE word
 *     श्रीकृष्णस्वरूपवर्णन ....................... 108px as ONE word
 *
 * The verse-count column used to size itself to its max-content, i.e. just
 * wide enough to keep "18 verses" on one line (71px including padding). But
 * the widest WORD in any label is "verses", only 39px -- so the column
 * reserved 17px more than it ever needed, and all 17px came out of the name
 * column. At 393px that left the name column 2px short of what
 * "Śrī Kṛṣṇasvarūpavarṇanam" needs, which is why names broke mid-word.
 *
 * Fix on phones only: size the meta column to `min-content` -- the widest
 * WORD, not the whole label -- so the count wraps onto a second line
 * ("18" / "verses", which is perfectly acceptable). That hands ~24px back to
 * the name column, enough to keep ordinary names whole on one line.
 *
 * `overflow-wrap: break-word` on the count is deliberate. Unlike `anywhere`
 * it does NOT feed into min-content sizing, so the column settles at exactly
 * one word wide instead of collapsing to one character.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  /* The number cell only ever holds 2-3 digits ("027" is the widest we have),
   * so 2.2rem is ample. Trimming it 2.4rem -> 2.2rem hands 3.2px to the name
   * column, which is what pays for restoring the verse-count font size below. */
  body.book-index-page .chapter-list a {
    grid-template-columns: 2.2rem minmax(0, 1fr) min-content;
  }

  body.book-index-page .chapter-list .ch-zone-num {
    padding: 8px 4px;
  }

  body.book-index-page .chapter-list .ch-zone-name {
    padding: 8px 6px;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  /* Safety net: the longest compound above still cannot fit a 320px phone,
   * so keep `anywhere` to guarantee a name can never bleed across the
   * verse-count column. With the wider name column it now only triggers on
   * the very longest compounds. */
  body.book-index-page .chapter-list .ch-name-san,
  body.book-index-page .chapter-list .ch-name-en {
    min-width: 0;
    overflow-wrap: anywhere;
    /* These inherit the body's airy 1.8 line-height. Once a long name wraps to
       2-3 lines that inflates the whole card, so tighten it here. */
    line-height: 1.35;
  }

  /* NOTE: the verse-count font size is deliberately NOT overridden here. An
   * earlier version of this fix shrank it to 0.88rem purely to keep "18
   * verses" on a single line -- but that bought 7px at the cost of a 13.7%
   * font reduction, which is a bad trade now that the column is sized to
   * min-content and the label wraps to two short lines anyway. It keeps the
   * page's normal 1.02rem. The matching 2px of padding that pays for this is
   * the only thing needed, and 4px is enough to keep the label off the rule. */
  body.book-index-page .chapter-list .ch-zone-meta {
    padding: 8px 4px;
  }

  /* No `min-width: 0` here on purpose: this element's min-content width (the
   * longest word, "verses") is what sizes the column. `break-word` still
   * lets an over-long label break rather than spill. */
  body.book-index-page .chapter-list .ch-verses {
    line-height: 1.25;
    overflow-wrap: break-word;
  }
}

/* ---------------------------------------------------------------------------
 * Top panel on phones: give the search its own full-width row.
 *
 * The panel is one non-wrapping flex row -- hamburger, wordmark, search. On a
 * 390px screen the hamburger and wordmark take 193px, leaving the search
 * wrapper 161px; after the icon (18), separator, two 10px gaps and 36px of
 * padding, the actual <input> was only 85px wide. Too cramped to type into.
 *
 * Below 640px the strip is allowed to wrap and the search is given a whole
 * row, so it runs the full width of the panel under the hamburger row.
 *
 * SPECIFICITY: this must stay at the very END of the stylesheet. Several
 * body-scoped rules already set `flex`/`min-width` on the wrapper at
 * (0,2,1) -- e.g. body.kbr-entry-page .shared-search-wrap and
 * body.kbr-entry-page .shared-search -- and a media query adds no
 * specificity of its own. Each selector below therefore carries two classes
 * plus the body element, also (0,2,1), and wins purely on source order.
 * Moving this block earlier would silently break the layout again.
 * --------------------------------------------------------------------------- */
@media (max-width: 640px) {
  body .shared-top-panel {
    /* The panel is a flex ITEM of .inner-main-shell, which on chapter pages is
     * a column flex container pinned to 100vh. With the default
     * `flex-shrink: 1` the panel was squeezed down to its 72px min-height
     * even though there was room -- while the two-row strip inside needed
     * 114px. The strip then centred against the 72px box (the panel's
     * `align-items: center`) and spilled ~21px above the panel, off the top
     * of the screen, and ~21px below it, over the breadcrumb.
     *
     * `flex: 0 0 auto` stops the squeeze. Measured at 390px on a chapter
     * page: panel 72 -> 115px, strip offset from the panel top -21 -> 0,
     * breadcrumb no longer overlapped. A header should never be shrunk by
     * the flex layout, so this is correct rather than a workaround.
     *
     * Scoped to phones because only here does the strip become two rows;
     * above 640px the panel's content is already exactly its min-height, so
     * shrinking cannot bite. */
    flex: 0 0 auto;
  }

  body .shared-top-panel .shared-top-strip {
    /* Allow the second row, and tighten the horizontal gap so the wordmark
       and hamburger do not collide on a narrow screen. */
    flex-wrap: wrap;
    gap: 8px 12px;
    /* Vertical breathing room. Applied here rather than on the panel because
       .shared-top-panel is contested at (0,2,1) by several body-scoped rules
       and only offers one class to raise specificity with. The panel's
       min-height is only a minimum, so it grows to fit both rows. */
    padding: 8px 0 10px;
  }

  body .shared-top-panel .shared-search-wrap {
    /* A whole row of its own: no grow, no shrink, no shared basis. */
    flex: 0 0 100%;
    min-width: 0;
  }

  body .shared-top-panel .shared-search {
    width: 100%;
    max-width: none;
    /* A little shorter than the desktop 48px so the sticky header does not
       eat too much of a small screen. */
    min-height: 44px;
    padding: 0 14px;
  }

  /* The wordmark becomes ONE line: both halves shown, at ONE size.
   *
   * Once the search has its own row, row 1 holds only the hamburger and the
   * name -- and most of it is empty. Measured at 390px: the two-line lockup
   * used 102px of a 275px row, leaving 173px idle. On one line the whole name
   * fits, set larger than today's biggest line, with no second line to balance
   * against.
   *
   * Both spans are kept visible and given the SAME font-size, separated by a
   * flex gap. The markup is `<span>…</span><span>…</span>` with NO whitespace
   * between them (they sit on separate source lines, which HTML collapses), so
   * hiding line 2 -- the obvious reading of "one line" -- would silently drop
   * the second half of the name and show only the first. The gap supplies the
   * missing word space.
   *
   * The size is derived, not guessed, from three measured facts:
   *
   *     span advance (no tracking) = 9.4844 * fontSize    (px)
   *     flex gap                   = 5.1px, constant
   *     tracking                   = 21 * tracking_em * fontSize   (21 chars)
   *     right-hand region          = 100vw - 87.6          (px)
   *
   * so  brandWidth = (9.4844 + 21 * tracking_em) * fontSize + 5.1.
   *
   * Both the 5.1px gap and the tracking count are constant, not proportional.
   * The gap is constant because `gap: 0.3em` resolves against the CONTAINER's
   * font-size, not the spans'. The 21 is the literal character count of the two
   * spans ("Sri Premika" 11 + "Divyavaani" 10), because letter-spacing is
   * applied after the final character of each as well as between them --
   * verified by probe, not assumed.
   *
   * At 0.03em tracking the coefficient becomes 9.4844 + 0.63 = 10.1144. The
   * rule below is the exact-fit line scaled to 94% of the region, which measures
   * 88.6-90.7% fill in practice.
   *
   * RENAMED 2026-10-17, from "Sri Premika Granthamrutam" (24 chars,
   * coefficient 12.3197) to "Sri Premika Divyavaani" (21 chars, 10.1144).
   * Both coefficients were measured from the real font at 100px with the real
   * tracking. The size was rescaled by 12.3197/10.1144 = 1.218 so the name keeps
   * the same FILL of the row it had before; keeping the old formula would have
   * shrunk the block to 82% of its former width and left the right-hand side
   * conspicuously empty. Consequence to expect: the 24px cap now binds at about
   * 363px instead of 420px, so the name stops growing a little earlier.
   *
   * WHY NOT FILL THE REGION: the strip applies a 12px column-gap between the
   * hamburger and the name, and that gap exists on the left side only. So the
   * name's left inset is structurally 12px larger than its right inset, and it
   * always sits ~6px right of the region's centre. Chasing a higher fill means
   * the right inset is what disappears first: an earlier attempt at 90% of the
   * region left only 1.7px at 260px and 4.7px at 320px. This value is chosen to
   * protect the RIGHT margin, which is the one that can go to zero -- not to
   * maximise the fill number.
   *
   * Measured margins with this rule: gapL/gapR = 18.1/6.1 at 320px, 20.1/8.1 at
   * 390px, 24.3/12.3 at 440px. The 12px offset is inherent to the centring that
   * was requested, not a fault of the size rule; the tracking adds ~9px of width
   * at 320px without moving either margin appreciably, because the type is a
   * fraction smaller in exchange. It is self-correcting, because `vw` tracks the
   * scrollbar too, so a bigger scrollbar shrinks the type along with the row. If
   * it ever did overrun, `.shared-top-strip` has `flex-wrap: wrap`, so the name
   * would drop below the hamburger rather than overflow silently.
   *
   * The tracking was added after the spelling change shortened the name from 4
   * words to 3 and silently dropped the fill -- one fewer character is one
   * character-width less. Spending that headroom on tracking rather than size is
   * deliberate: it keeps the type size the user had approved (at 320px the
   * computed size is ~15.5px, barely changed) while widening the name ~6%, which
   * is what was asked for.
   *
   * Why the cap is 24px: ~440px and up is governed by the cap, not the formula.
   * The brand is ~29px tall at the cap, comfortably inside the 44px hamburger
   * that actually sets row 1's height -- so the panel stays 114.6px and the
   * breadcrumb's hardcoded `top: 115px` offset stays correct. Raising the cap
   * past ~36px WOULD grow the panel and break that offset.
   *
   * Verified 260-640px at 1px steps: one line, full text, no wrap, no horizontal
   * overflow. See ProjectResumed/BACKLOG.md B-001 for the spelling caveat. */
  body .shared-top-panel .panel-brand {
    flex-direction: row;
    /* One line now, so this is the cross axis: keeps both halves on a common
       baseline. */
    align-items: baseline;
    /* Stands in for the word space the markup does not have. */
    gap: 0.3em;
    /* Centre the name in the space left of it, i.e. between the hamburger and
       the right edge of the strip. Auto margins on a flex item absorb the free
       space, so the two sides come out equal without any width maths.
     *
     * Without this the name hugs the hamburger and all the slack collects on the
     * right. Measured gap on the right: 13px at 320px, but 69px at 480px and
     * 229px at 639px. The cause is the 24px size cap, not the alignment -- below
     * ~430px the `vw` formula fills about 89% of the row and the difference is
     * imperceptible (the name moves 0.4px at 320px, 3.7px at 430px). Above that
     * the cap freezes the size while the row keeps widening, and this is what
     * rebalances it.
     *
     * Deliberately NOT `justify-content: center` on the strip, and NOT centring
     * on the whole header: below ~449px the name would collide with the
     * hamburger (by 9-13px at 320-430px). Auto margins cannot do that, because
     * they only ever distribute space that is genuinely free.
     *
     * Consequence to be aware of at the wide end: at 639px the name sits ~120px
     * from the hamburger, with equal space on the far side. That is symmetric,
     * but it does detach the name from the menu button. */
    margin-left: auto;
    margin-right: auto;
  }

  body .shared-top-panel .panel-brand .logo-line-1,
  body .shared-top-panel .panel-brand .logo-line-2 {
    /* Letter-spacing is applied ONLY here (single-line, <=640px) and on the
     * landing hero. The >=641px two-line lockup keeps zero tracking: two stacked
     * lines already read as a block, and opening them up makes the lockup wider
     * than it is tall for no gain. The drawer brand likewise stays untracked.
     *
     * Tracking covers the whole width: it is applied after EVERY character --
     * 24 of them across both spans, including the last of each -- so it adds
     * `24 * 0.03 * fontSize`. That is a real widening, not just letterform air,
     * and it is what the size formula below has been re-derived to absorb. */
    letter-spacing: 0.03em;
    font-size: min(24px, calc(9.29vw - 9.76px));
    line-height: 1.2;
  }

  body .shared-top-panel .panel-brand .logo-line-2 {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------------
 * Legal pages (Disclaimer, Privacy Policy).
 *
 * None of these classes had any styling, so the text ran the full width of the
 * window: at a 1400px viewport the paragraphs were about 150 characters per
 * line, against a comfortable reading measure of 50-75. Capping the column and
 * centring it is what supplies the left margin -- and the right one with it.
 *
 * 45rem is ~720px at the default 16px root, which is roughly 78 characters at
 * this page's 17px body size.
 * --------------------------------------------------------------------------- */
.legal-doc {
  max-width: 45rem;
  margin: 0 auto;
}

/* The global h1/h2 rules centre headings ("centered like Vedabase"), which
 * reads well on the chapter and temple pages but not on a long legal
 * document. These two rules override that here only; the rest of the site is
 * unaffected. */
.legal-title {
  font-size: 1.75rem;
  line-height: 1.25;
  color: var(--accent-deep);
  text-align: left;
  margin: 8px 0 0;
}

.legal-updated {
  margin: 8px 0 0;
  font-size: 0.86rem;
  color: var(--text-light);
}

.legal-intro {
  margin: 18px 0 0;
  font-size: 1.06rem;
  line-height: 1.65;
}

.legal-section {
  margin-top: 30px;
}

.legal-section h2 {
  font-size: 1.15rem;
  line-height: 1.4;
  color: var(--accent-deep);
  /* Overrides the global centred h2, as above. */
  text-align: left;
  margin: 0 0 10px;
}

.legal-section p {
  margin: 0 0 12px;
}

.legal-section ul {
  margin: 0 0 12px;
  padding-left: 1.4em;
}

.legal-section li {
  margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
 * Legal page footer (Disclaimer, Privacy Policy).
 *
 * These classes previously had NO styling at all, so the footer inherited
 * whatever it landed on: the copyright line came out in a pale tan of about
 * 2.3:1 on the cream -- well under the 4.5:1 minimum -- and the two links sat
 * flush against each other with no gap, because nothing set one.
 *
 * This mirrors .site-footer / .footer-links in site/index.html, which governs
 * the same footer on the landing page. index.html does not load this
 * stylesheet, so the rules are necessarily duplicated -- KEEP THE TWO IN SYNC.
 * --------------------------------------------------------------------------- */
.legal-footer {
  /* Matches the column above, so the rule spans the text rather than the
     whole window. */
  max-width: 45rem;
  margin: 34px auto 0;
  padding-top: 18px;
  border-top: 1px solid var(--border);
  font-size: 0.76rem;
  /* 7.33:1 on the cream background. */
  color: #4f4f57;
  text-align: center;
}

.legal-footer-copy { margin: 0 0 6px; }

.legal-footer-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 0;
}

.legal-footer-links a {
  color: var(--link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-footer-links a:hover {
  color: var(--link-hover);
}