/* ============================================================================
   पवित्र बाइबिल (हिंदी) — UECF shared stylesheet
   ----------------------------------------------------------------------------
   One stylesheet for every page in this directory: the two book indexes
   (index.htm, index_en.htm) and all 1,189 chapter pages (NN/C.htm).

   It is the single source of truth for the design language, so no page needs
   an inline <style> block or inline style attributes. Both the index and the
   chapter layouts share the header, sticky tool bar, breadcrumb, section
   labels, icon buttons, footer, print rules and responsive rules below;
   only the middle of the page differs.

   Fonts: Devanagari body text is set in Tiro Devanagari Hindi (the Devanagari
   sibling of the Tiro superfamily), display text in Mukta, and Latin UI text
   in Inter. Local fallbacks (Nirmala UI, Mangal, Noto) keep the pages
   readable before the webfonts arrive, or offline.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------ */
:root{
  /* UECF site chrome — shared with the rest of uecf.net */
  --uecf-ink:#101B31;
  --uecf-gold:#C79A3D;
  --uecf-gold-soft:#E4C685;
  --uecf-cream:#FAF6EC;
  --uecf-header-h:76px;
  --uecf-max:1200px;

  /* Type families */
  --font-hi-body:'Tiro Devanagari Hindi','Noto Serif Devanagari','Nirmala UI','Mangal',Georgia,serif;
  --font-hi-display:'Mukta','Noto Sans Devanagari','Nirmala UI','Segoe UI',sans-serif;
  --font-ui:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --uecf-font-display:Georgia,'Times New Roman',serif;
  --uecf-font-body:var(--font-ui);

  /* Reading surface — dark is the default theme */
  --paper:#101B31;
  --paper-2:#182642;
  --paper-3:#20304F;
  --ink:#D7E0EC;
  --ink-soft:#EDE4CE;
  --ink-faint:#8FA4BE;
  --gold:#C9A45C;
  --gold-soft:#DCC28C;
  --gold-line:#C9A45C;
  --accent:#C9A45C;
  --cream:#EDE4CE;
  --rule:#28395A;
  --shadow:rgba(0,0,0,0.45);
  --focus-ring:#DCC28C;

  /* Reader preference, stepped by the A-/A+ buttons */
  --verse-size:1.1875rem;
}

/* Light mode keeps the same gold/ink family as the dark default. */
html[data-theme="light"]{
  --paper:#FAF6EC;
  --paper-2:#FFFFFF;
  --paper-3:#F1E9D6;
  --ink:#1E2A44;
  --ink-soft:#3C4A66;
  --ink-faint:#5C6579;
  --gold:#8A6516;
  --gold-soft:#B08D3C;
  --gold-line:#C79A3D;
  --accent:#8A6516;
  --cream:#101B31;
  --rule:#E0D5BC;
  --shadow:rgba(16,27,49,0.10);
  --focus-ring:#6B4E0C;
}

/* ---------------------------------------------------------------------------
   2. Base
   ------------------------------------------------------------------------ */
*{box-sizing:border-box;}

html,body{margin:0; padding:0; max-width:100%;}
html{
  /* `clip` does not create a scroll container, so the two sticky bars keep
     working; `hidden` first as the fallback for Safari < 16. */
  overflow-x:hidden;
  overflow-x:clip;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-hi-body);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  min-height:100svh;   /* 100vh includes the collapsing mobile URL bar */
  background-image:
    radial-gradient(circle at 100% 0%, rgba(201,164,92,0.05), transparent 45%),
    radial-gradient(circle at 0% 100%, rgba(31,92,87,0.05), transparent 45%);
  background-attachment:scroll;
}
/* Fixed attachment repaints a full-viewport gradient every scroll frame and
   is broken on iOS; opt in only for real pointers. */
@media (hover:hover) and (pointer:fine){
  body{background-attachment:fixed;}
}

a{color:inherit; text-decoration:none;}
img{max-width:100%; height:auto;}
::selection{background:var(--gold-soft); color:var(--paper);}

/* :focus base so Safari < 15.4 still shows an indicator; :focus-visible
   supersedes it where supported. --focus-ring meets 3:1 in both themes. */
:focus{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px;}
@supports selector(:focus-visible){
  :focus{outline:none;}
  :focus-visible{outline:2px solid var(--focus-ring); outline-offset:2px; border-radius:4px;}
}

/* visually hidden, still read by screen readers */
.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;
}
.skip-link{
  position:absolute; left:-999px; top:0; z-index:200;
  background:var(--uecf-gold); color:var(--uecf-ink);
  padding:10px 18px; font-weight:700; border-radius:0 0 6px 0;
  font-family:var(--font-ui);
}
.skip-link:focus{left:0;}

/* Progressive enhancement: the search field and the display-option buttons do
   nothing without script, so they stay hidden until bible.js has flagged the
   document. The flag is set by the inline head bootstrap, before first paint,
   so enabled browsers never see them appear late. */
html:not(.js) .search-wrap,
html:not(.js) .bar-tools,
html:not(.js) .page-actions button{display:none !important;}

/* ---------------------------------------------------------------------------
   3. UECF site header + primary navigation (identical on every page)
   ------------------------------------------------------------------------ */
header.site-header{
  background:var(--uecf-ink); color:var(--uecf-cream);
  position:sticky; top:0; z-index:100;
  border-bottom:3px solid var(--uecf-gold);
  box-shadow:0 4px 20px rgba(0,0,0,.15);
  font-family:var(--font-ui);
}
header.site-header .header-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 24px; max-width:var(--uecf-max); margin:0 auto;
}
header.site-header .brand{
  display:flex; align-items:center; gap:16px;
  color:var(--uecf-cream); text-decoration:none;
}
header.site-header .brand:hover{text-decoration:none;}
header.site-header .brand-logo-img{
  width:50px; height:50px; flex:none; display:block; object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.3));
}
header.site-header .brand-text{display:flex; flex-direction:column; line-height:1.2;}
header.site-header .brand-text .full{
  font-family:var(--uecf-font-display); font-size:1.15rem; font-weight:700;
  color:var(--uecf-cream); letter-spacing:-.01em;
}
header.site-header .brand-text .sub{
  font-size:.75rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--uecf-gold-soft); font-weight:600;
}
header.site-header nav.primary-nav{display:flex;}
header.site-header nav.primary-nav ul{
  display:flex; gap:4px; flex-wrap:wrap; align-items:center;
  margin:0; padding:0; list-style:none;
}
header.site-header nav.primary-nav a,
header.site-header nav.primary-nav button{
  color:var(--uecf-cream); font-size:.9rem; font-weight:600;
  padding:10px 14px; display:block; border-radius:4px;
  background:none; border:none; font-family:inherit; cursor:pointer;
  transition:all .2s ease; white-space:nowrap;
}
header.site-header nav.primary-nav a:hover,
header.site-header nav.primary-nav button:hover{
  background:rgba(228,198,133,.15); text-decoration:none; color:var(--uecf-gold-soft);
}
/* Active page marker — driven by aria-current so the state cannot drift
   away from what assistive tech announces. */
header.site-header nav.primary-nav a[aria-current="page"]{
  color:var(--uecf-gold-soft); background:rgba(228,198,133,.12);
  box-shadow:inset 0 -2px 0 var(--uecf-gold);
}
header.site-header .nav-toggle{
  display:none; background:none; border:1px solid rgba(228,198,133,.5);
  color:var(--uecf-cream); padding:8px 12px; border-radius:6px;
  font-size:1rem; cursor:pointer; font-family:var(--font-ui);
}
@media (max-width:992px){
  header.site-header nav.primary-nav{
    position:absolute; top:100%; left:0; right:0; background:var(--uecf-ink);
    flex-direction:column; max-height:0; overflow:hidden;
    transition:max-height .3s ease; border-bottom:1px solid rgba(228,198,133,.25);
  }
  header.site-header nav.primary-nav.open{max-height:600px;}
  header.site-header nav.primary-nav ul{
    flex-direction:column; align-items:stretch; padding:8px 24px 16px;
  }
  header.site-header .nav-toggle{display:block;}
}

/* ---------------------------------------------------------------------------
   4. Layout shell
   ------------------------------------------------------------------------ */
#shell{display:block;}
#main{margin-left:0; padding:0 0 80px;}

/* ---------------------------------------------------------------------------
   5. Sticky tool bar under the header (search + display options)
   ------------------------------------------------------------------------ */
#sidebar{
  width:100%;
  background:var(--uecf-ink);
  color:#D6E4F0;
  display:flex; flex-direction:row; align-items:center; flex-wrap:wrap;
  position:sticky; top:var(--uecf-header-h);
  overflow:visible; z-index:40;
  border-bottom:1px solid var(--rule);
  box-shadow:0 2px 14px rgba(0,0,0,0.18);
  padding:10px 20px; gap:18px;
}
/* The bar must never be the reason the page scrolls sideways, so the brand
   is allowed to shrink and its long Hindi book titles are allowed to wrap;
   only the tool buttons keep a fixed size. */
#sidebar .brand{display:flex; align-items:center; flex:1 1 auto; min-width:0;}
.brand-mark{display:flex; align-items:center; gap:10px; min-width:0;}
.brand-mark svg{flex-shrink:0;}
.brand-eyebrow{
  font-family:var(--font-ui); font-size:0.625rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--uecf-gold-soft); font-weight:600;
  overflow-wrap:break-word;
}
.brand-title{
  font-family:var(--font-hi-display); font-size:1.125rem; font-weight:600;
  line-height:1.45; color:#fff; margin:0; overflow-wrap:break-word;
}

/* --- search field (shared shell; the two pages search different things) --- */
.search-wrap{position:relative; flex:1 1 260px; min-width:160px;}
.search-box{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.38);
  border-radius:6px; padding:9px 12px;
}
.search-box:focus-within{border-color:var(--uecf-gold-soft);}
.search-box svg{flex-shrink:0; opacity:.7;}
#searchInput{
  background:none; border:none; outline:none; color:#fff;
  font-family:var(--font-hi-body); font-size:0.875rem; width:100%;
  min-width:0; appearance:none; -webkit-appearance:none;
}
/* Safari draws its own clear button; #searchClear replaces it. */
#searchInput::-webkit-search-cancel-button,
#searchInput::-webkit-search-decoration{-webkit-appearance:none; display:none;}
#searchInput::placeholder{color:#9FB8D4; font-family:var(--font-ui); font-size:0.8125rem;}
.search-clear{
  background:none; border:none; color:#9FB8D4; cursor:pointer; padding:0;
  display:none; line-height:1; font-size:1rem; font-family:var(--font-ui);
  /* WCAG 2.2 SC 2.5.8 — 28x28 hit area, negative margin keeps the visual size */
  width:28px; height:28px; border-radius:50%; flex-shrink:0;
  align-items:center; justify-content:center; margin:-4px -4px -4px 0;
}
.search-clear.show{display:flex;}
.search-clear:hover{color:var(--uecf-gold-soft);}

/* --- verse result dropdown (chapter pages) --- */
.search-results{
  position:absolute; left:0; right:0; top:100%;
  background:var(--paper); color:var(--ink);
  border-radius:0 0 8px 8px;
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  max-height:60vh; overflow-y:auto;
  display:none; z-index:60;
  border:1px solid var(--rule); border-top:none;
  margin:0; padding:0; list-style:none;
}
.search-results.open{display:block;}
.sr-item{
  display:flex; align-items:baseline; gap:10px;
  padding:10px 14px; border-bottom:1px solid var(--rule);
  cursor:pointer; font-size:0.875rem; text-align:left; color:inherit;
}
.sr-item:last-child{border-bottom:none;}
.sr-item:hover,.sr-item.is-active{background:var(--paper-2);}
.sr-num{
  font-family:var(--font-ui); font-weight:700; font-size:0.71875rem;
  color:var(--gold); flex-shrink:0; min-width:26px; text-align:left;
}
.sr-title{
  flex:1; font-family:var(--font-hi-body); text-align:left; line-height:1.7;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.sr-empty{padding:16px 14px; font-family:var(--font-ui); font-size:0.8125rem; color:var(--ink-faint);}

/* --- display option buttons --- */
.bar-tools{display:flex; gap:8px; flex:0 0 auto;}
.tool-btn{
  width:34px; height:34px; border-radius:50%;
  border:1px solid rgba(255,255,255,0.40);
  background:rgba(255,255,255,0.06);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:#E9F0F8; flex-shrink:0; padding:0;
  transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.tool-btn:hover{border-color:var(--uecf-gold-soft); color:var(--uecf-gold-soft); background:rgba(228,198,133,.12);}
/* one theme icon visible per mode */
.icon-moon{display:none;}
html[data-theme="light"] .icon-sun{display:none;}
html[data-theme="light"] .icon-moon{display:block;}

/* ---------------------------------------------------------------------------
   6. Page head: breadcrumb, title, rules, section labels
   ------------------------------------------------------------------------ */
.page-head{padding:40px 40px 0; max-width:1080px; margin:0 auto;}
.breadcrumb{
  font-family:var(--font-ui); font-size:0.78125rem; color:var(--ink-faint);
  display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap;
}
.breadcrumb a{color:var(--accent); font-weight:600;}
.breadcrumb a:hover{text-decoration:underline;}
.page-head h1{
  font-family:var(--font-hi-display); font-size:clamp(1.75rem,4.4vw,2.75rem);
  font-weight:600; color:var(--gold); margin:0 0 8px;
  /* Devanagari stacks matras above and below the baseline; a tight
     line-height clipped them at the top of the clamp range. */
  line-height:1.4;
}
.h1-sub{
  display:block; font-family:var(--font-ui); font-weight:600;
  font-size:clamp(0.8125rem,1.7vw,1rem); letter-spacing:.05em;
  color:var(--gold-soft); margin-top:8px;
}
.cat-en-line{
  font-family:var(--font-ui); font-size:0.8125rem; color:var(--ink-faint);
  margin:0 0 22px;
}
.rule-double{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  height:3px; margin:0 0 30px;
}
.section-label{
  font-family:var(--font-ui); font-size:0.78125rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:700;
  margin:0 0 14px; display:flex; align-items:center; gap:10px;
}
.section-label::after{content:""; flex:1; height:1px; background:var(--rule);}
.wrap{max-width:1080px; margin:0 auto; padding:0 40px 40px;}

/* --- index / index_en switch --- */
.view-switch{
  display:inline-flex; flex-wrap:wrap; gap:4px; padding:4px; margin:0 0 26px;
  border:1px solid var(--rule); border-radius:8px; background:var(--paper-2);
  font-family:var(--font-ui); font-size:0.8125rem; font-weight:600;
}
.view-switch a{
  padding:7px 14px; border-radius:5px; color:var(--ink-soft);
  transition:background .15s ease, color .15s ease;
}
.view-switch a:hover{color:var(--gold); background:var(--paper-3);}
.view-switch a[aria-current="page"]{
  background:var(--gold-line); color:var(--uecf-ink); cursor:default;
}

/* ---------------------------------------------------------------------------
   7. Index page: hero
   ------------------------------------------------------------------------ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(circle at 12% 12%, rgba(201,164,92,0.16), transparent 55%),
    radial-gradient(circle at 88% 90%, rgba(201,164,92,0.10), transparent 60%),
    linear-gradient(160deg, var(--paper-3), var(--paper-2) 70%);
  border:1px solid var(--rule); border-top:3px solid var(--gold-line);
  border-radius:10px; box-shadow:0 18px 50px var(--shadow);
  padding:56px 48px 52px; text-align:center;
}
.hero::after{
  content:""; position:absolute; inset:14px; border:1px solid var(--rule);
  border-radius:6px; pointer-events:none; opacity:.55;
}
.hero-eyebrow{
  font-family:var(--font-ui); font-size:0.6875rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--gold); font-weight:700;
  display:flex; align-items:center; justify-content:center; gap:9px; margin-bottom:16px;
}
.hero-eyebrow span.bk{font-size:1.0625rem;}
.hero h1{
  font-family:var(--font-hi-display); font-size:clamp(2rem,5.2vw,3.25rem);
  font-weight:600; color:var(--gold); margin:0 0 10px; line-height:1.4;
}
.hero h1 .h1-sub{
  font-size:clamp(0.875rem,1.8vw,1.1875rem); letter-spacing:.06em; margin-top:6px;
}
.hero-sub{
  font-family:var(--font-ui); font-size:clamp(0.8125rem,1.6vw,0.9375rem);
  color:var(--ink-soft); letter-spacing:.04em; margin:0 0 6px;
}
.hero-word{
  font-family:var(--font-ui); font-style:italic; font-size:0.8125rem;
  color:var(--ink-faint); letter-spacing:.08em; margin:0 0 26px;
}
.hero-divider{
  width:120px; height:1px; margin:0 auto 26px;
  background:linear-gradient(90deg,transparent,var(--gold-line),transparent);
}
figure.hero-quote{margin:0;}
blockquote.hero-verse{
  margin:0 auto; max-width:640px;
  font-family:var(--font-hi-body); font-style:italic;
  font-size:clamp(1.0625rem,2.3vw,1.375rem); line-height:2; color:var(--cream);
}
.hero-quote figcaption cite{
  display:block; margin-top:14px; font-family:var(--font-ui);
  font-style:normal; font-size:0.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--gold); font-weight:700;
}

/* ---------------------------------------------------------------------------
   8. Index page: testament cards
   ------------------------------------------------------------------------ */
/* min() keeps the 280px track from becoming a hard floor on 280-320px
   phones, where a fixed minimum would push the page into sideways scroll. */
.testaments{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
  gap:20px; margin:34px 0 44px;
}
.testament-card{
  display:block; background:var(--paper-2);
  border:1px solid var(--rule); border-radius:10px;
  padding:30px 28px; box-shadow:0 10px 30px var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
.testament-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold-line); opacity:.75;
}
/* Hover lift only where there is a real pointer; on touch it stuck until
   the next tap. */
@media (hover:hover) and (pointer:fine){
  .testament-card:hover{
    transform:translateY(-4px); box-shadow:0 22px 46px var(--shadow);
    border-color:var(--gold-line);
  }
  .testament-card:hover .tc-go{text-decoration:underline;}
}
.testament-card:focus-within{border-color:var(--gold-line);}
/* The heading holds the real link; ::after stretches its hit area over the
   whole card so the card stays clickable without wrapping a heading in <a>. */
.tc-link{color:inherit; text-decoration:none;}
.tc-link::after{content:""; position:absolute; inset:0; z-index:1;}
.tc-icon{font-size:1.625rem; line-height:1; display:block; margin-bottom:14px;}
.tc-te{
  font-family:var(--font-hi-display); font-size:1.625rem; font-weight:600;
  line-height:1.45; color:var(--cream); margin:0 0 6px;
}
.tc-en{
  font-family:var(--font-ui); font-size:0.75rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:700; margin:0 0 18px;
}
.tc-meta{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  font-family:var(--font-ui); font-size:0.8125rem; color:var(--ink-soft); margin:0;
}
.tc-meta b{font-size:1.625rem; color:var(--gold); font-weight:700; line-height:1;}
.tc-go{
  margin-top:20px; display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-ui); font-size:0.78125rem; font-weight:600; color:var(--accent);
}

/* ---------------------------------------------------------------------------
   9. Index page: book grid
   ------------------------------------------------------------------------ */
/* Both sticky bars are measured at runtime (see syncBarHeights in bible.js);
   the 76px fallback only applies before the first measurement. */
.books-section{
  margin-bottom:44px;
  scroll-margin-top:calc(var(--uecf-header-h) + var(--uecf-subbar-h, 76px) + 12px);
}
/* SC 2.4.11 — keep a focused card clear of the sticky bars */
.book-card,.testament-card,.stat,.chap-chip,.verse-block,.v-num{
  scroll-margin-top:calc(var(--uecf-header-h) + var(--uecf-subbar-h, 76px) + 12px);
}
.book-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr)); gap:12px;
}
.book-card{
  display:flex; flex-direction:column; gap:3px;
  background:var(--paper-2); border:1px solid var(--rule); border-radius:8px;
  padding:16px 18px 15px;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
@media (hover:hover) and (pointer:fine){
  .book-card:hover{
    transform:translateY(-3px); border-color:var(--gold-line);
    box-shadow:0 12px 26px var(--shadow);
  }
  .book-card:hover .bk-te{color:var(--gold);}
}
.book-card:focus-within{border-color:var(--gold-line);}
.bk-num{
  font-family:var(--font-ui); font-size:0.6875rem; font-weight:700;
  letter-spacing:.12em; color:var(--gold); margin-bottom:4px;
}
.bk-abbr{
  font-family:var(--font-ui); font-size:0.6875rem; font-weight:700;
  letter-spacing:.06em; color:var(--ink-faint);
}
.bk-te{
  font-family:var(--font-hi-display); font-size:1.0625rem; font-weight:600;
  line-height:1.5; color:var(--cream); transition:color .15s ease;
}
.bk-en{font-family:var(--font-ui); font-size:0.78125rem; color:var(--ink-soft); font-weight:500;}
.bk-ch{font-family:var(--font-hi-body); font-size:0.75rem; color:var(--ink-faint); margin-top:6px;}
.book-card[hidden],.books-section[hidden]{display:none;}
.no-results{
  display:none; padding:26px 20px; text-align:center;
  border:1px dashed var(--rule); border-radius:8px;
  font-family:var(--font-hi-body); font-size:0.9375rem; color:var(--ink-faint);
}
.no-results.show{display:block;}
.search-status{
  font-family:var(--font-ui); font-size:0.78125rem; color:var(--ink-faint);
  margin:0 0 20px; min-height:1em;
}

/* ---------------------------------------------------------------------------
   10. Index page: statistics + features
   ------------------------------------------------------------------------ */
.stats{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr)); gap:12px;
  margin-bottom:44px;
}
.stat{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:8px;
  padding:22px 18px; text-align:center; box-shadow:0 8px 22px var(--shadow);
}
.stat-num{
  font-family:var(--font-ui); font-size:1.875rem; font-weight:700;
  color:var(--gold); line-height:1; display:block; margin-bottom:8px;
}
.stat-te{
  font-family:var(--font-hi-display); font-size:0.9375rem; font-weight:600;
  line-height:1.5; color:var(--cream); display:block;
}
.stat-en{
  font-family:var(--font-ui); font-size:0.75rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); font-weight:600;
  display:block; margin-top:4px;
}
.features{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));
  gap:10px 26px; list-style:none; padding:0; margin:0 0 40px;
}
.features li{
  display:flex; align-items:flex-start; gap:10px;
  font-family:var(--font-ui); font-size:0.84375rem; color:var(--ink-soft);
}
.features li::before{
  content:"\2714"; color:var(--gold); font-size:0.8125rem; line-height:1.4; flex-shrink:0;
}

/* ---------------------------------------------------------------------------
   11. Chapter page: chapter chips
   ------------------------------------------------------------------------ */
.chapters{max-width:1080px; margin:0 auto; padding:0 40px 34px;}
.chap-grid{display:flex; flex-wrap:wrap; gap:6px;}
.chap-chip{
  min-width:2.5rem; padding:8px 10px; border-radius:6px;
  background:var(--paper-2); border:1px solid var(--rule);
  font-family:var(--font-ui); font-size:0.8125rem; font-weight:600;
  color:var(--ink); text-align:center;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
@media (hover:hover) and (pointer:fine){
  a.chap-chip:hover{
    transform:translateY(-2px); box-shadow:0 10px 22px var(--shadow);
    border-color:var(--gold-line); color:var(--gold);
  }
}
.chap-chip.is-current{
  background:var(--gold-line); border-color:var(--gold-line);
  color:var(--uecf-ink); cursor:default;
}

/* ---------------------------------------------------------------------------
   12. Chapter page: previous / next
   ------------------------------------------------------------------------ */
.chapter-nav-row{
  max-width:1080px; margin:0 auto; padding:0 40px 30px;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  font-family:var(--font-ui); font-size:0.8125rem;
}
.nv{
  display:flex; align-items:center; gap:8px; color:var(--accent); font-weight:600;
  padding:9px 14px; border:1px solid var(--rule); border-radius:6px;
  background:var(--paper-2);
  transition:border-color .15s ease, transform .15s ease;
}
.nv:hover{border-color:var(--gold-line); transform:translateY(-1px);}
/* Placeholder that reserves the slot at the first/last chapter without
   leaving an empty focusable element in the tab order. */
.nv-spacer{visibility:hidden;}

/* ---------------------------------------------------------------------------
   13. Chapter page: the chapter text card
   ------------------------------------------------------------------------ */
.song-detail{max-width:1080px; margin:0 auto; padding:0 40px 40px;}
.sd-card{
  background:var(--paper-2); border:1px solid var(--rule); border-radius:10px;
  padding:44px 48px; box-shadow:0 18px 50px var(--shadow); position:relative;
}
.sd-top{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin-bottom:6px;}
.sd-medallion{
  width:56px; height:56px; border-radius:50%; border:2px solid var(--gold-line);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-ui); font-size:1.25rem; font-weight:700; color:var(--accent);
  background:var(--paper-2); flex-shrink:0;
}
.sd-title{
  font-family:var(--font-hi-display); font-size:clamp(1.5rem,3.2vw,2rem);
  font-weight:600; color:var(--cream); line-height:1.45; margin:0 0 10px;
}
.sd-meta{
  display:flex; gap:10px 22px; flex-wrap:wrap; font-family:var(--font-ui);
  font-size:0.78125rem; color:var(--ink-soft); margin:0 0 26px;
}
.sd-meta b{color:var(--ink); font-weight:600;}
.sd-meta .divider{color:var(--rule);}
/* Editorial heading carried over from the source pages (was .dimver). */
.section-note{
  font-family:var(--font-hi-display); font-size:0.9375rem; font-weight:600;
  line-height:1.6; color:var(--gold); margin:0 0 22px;
  padding-inline-start:12px; border-inline-start:3px solid var(--gold-line);
}

.textBody{font-family:var(--font-hi-body); font-size:var(--verse-size); line-height:1.95; color:var(--ink);}
.verse-block{margin:0 0 14px;}
.verse-block:last-child{margin-bottom:0;}
.v-num{
  font-family:var(--font-ui); font-size:.62em; font-weight:700;
  color:var(--gold); vertical-align:.45em; margin-inline-end:.5em;
}
/* Drop cap on the opening verse. The first letter of that block is the "1" of
   its verse number, so the digit itself becomes the initial. */
.textBody>.verse-block:first-child::first-letter{
  float:left; font-size:300%; line-height:100%;
  margin-right:9px; padding:4px 8px 0 3px;
  color:var(--gold); font-family:Georgia,'Tiro Devanagari Hindi',serif;
}
.verse-block.is-hit{
  background:var(--paper-3); border-radius:6px;
  box-shadow:0 0 0 6px var(--paper-3);
  transition:background .4s ease, box-shadow .4s ease;
}

/* ---------------------------------------------------------------------------
   14. Page actions (print / email / share / top)
   ------------------------------------------------------------------------ */
.icon-btn{
  width:36px; height:36px; border-radius:50%; border:1px solid var(--rule);
  background:var(--paper-2); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--ink-soft); flex-shrink:0; padding:0;
  transition:border-color .15s ease, color .15s ease;
}
.icon-btn:hover{border-color:var(--gold-line); color:var(--accent);}
.page-actions{
  max-width:1080px; margin:0 auto; padding:0 40px 50px;
  display:flex; gap:10px; justify-content:flex-end;
}

/* ---------------------------------------------------------------------------
   15. Footer
   ------------------------------------------------------------------------ */
footer.site-footer{
  border-top:3px solid var(--gold-line);
  background:var(--uecf-ink); color:var(--uecf-cream);
  font-family:var(--font-ui);
  padding:30px 24px;
}
.footer-inner{max-width:980px; margin:0 auto; text-align:center;}
.footer-inner a{color:var(--uecf-gold-soft); font-weight:600;}
.footer-inner a:hover{text-decoration:underline;}
.footer-inner p{margin:0 0 8px; font-size:0.84375rem;}
.footer-inner p:last-child{margin-bottom:0; color:#9FB8D4; font-size:0.75rem;}
.footer-inner .footer-hi{font-family:var(--font-hi-body); line-height:1.8;}

/* ---------------------------------------------------------------------------
   16. Responsive
   ------------------------------------------------------------------------ */
@media (max-width:880px){
  #sidebar{padding:10px 14px; gap:10px;}
  .brand-title{font-size:1rem;}
  .search-wrap{order:3; width:100%; flex:1 1 100%;}
  .page-head{padding:26px 20px 0;}
  .wrap,.chapters,.chapter-nav-row,.song-detail,.page-actions{
    padding-left:20px; padding-right:20px;
  }
  .hero{padding:36px 22px 34px;}
  .hero::after{inset:9px;}
  .testament-card{padding:24px 20px;}
  .sd-card{padding:26px 20px;}
  .book-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
  .bk-te{font-size:1rem;}
}
/* Two 150px columns leave long Hindi book names badly wrapped under ~400px. */
@media (max-width:400px){
  .book-grid{grid-template-columns:1fr;}
  .page-head{padding:22px 14px 0;}
  .wrap,.chapters,.chapter-nav-row,.song-detail,.page-actions{
    padding-left:14px; padding-right:14px;
  }
  .sd-card{padding:22px 16px;}
  .chapter-nav-row{font-size:0.75rem;}
  .view-switch{width:100%; justify-content:center;}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}
@media (prefers-contrast:more){
  :root{--rule:#6A7FA6; --ink-faint:#B7C6DA;}
  html[data-theme="light"]{--rule:#8A7B58; --ink-faint:#4A5262;}
}

/* ---------------------------------------------------------------------------
   17. Print — leave the reader with the scripture only
   ------------------------------------------------------------------------ */
@media print{
  header.site-header,#sidebar,.breadcrumb,.chapters,.chapter-nav-row,
  .page-actions,.view-switch,.skip-link,footer.site-footer{display:none !important;}
  body{background:#fff; color:#000;}
  .hero,.testament-card,.book-card,.stat{
    box-shadow:none; border:1px solid #999; background:#fff;
  }
  .sd-card{box-shadow:none; border:none; padding:0; background:#fff;}
  .hero h1,.page-head h1,.sd-title,.bk-te,.tc-te,.stat-num,.v-num,.section-note,
  .textBody>.verse-block:first-child::first-letter{color:#000;}
  .textBody{font-size:12pt;}
  a[href]::after{content:"";}
}