/* Sanātana Dharmālok chapters. Loaded by templates/dharmalok.html and
   dharmalok-index.html. Tokens, ground, fibre and the theme rule all come from
   style.css; this file adds only what a reproduced chapter needs on top.

   It shares the ākhyāna pages' vocabulary — the lotus rule, the brass accent,
   the cream leaf — because both are thevyasa.in. What differs is what the page
   claims: an ākhyāna is a retelling and shows its ślokas as quotations, while
   a Dharmālok chapter is the book itself, so the text runs unbroken and the
   only marginal note is the printed folio. */

.dl-main{--measure:45.6rem; max-width:64rem; margin:0 auto;
  padding:1.5rem 1.25rem 5rem}

/* ── masthead ─────────────────────────────────────────────── */
.dl-head,.dl-main .masthead{text-align:center; padding:1rem 0 1.5rem}
.dl-head h1, .dl-main .masthead h1{
  margin:0 0 .5rem; font-family:var(--sa); font-weight:400;
  font-size:clamp(1.7rem,4.4vw,2.7rem); letter-spacing:.02em;
  color:var(--verse-ink); text-wrap:balance;
}
.eyebrow{margin:0 0 .35rem; font-family:var(--ui); font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft)}
.lotus{font-family:"Noto Sans Brahmi",var(--sa),serif; color:var(--brass);
  line-height:1; font-size:.95em}
.ornament{display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin:1rem auto 1.2rem; max-width:22rem; color:var(--brass)}
.ornament::before,.ornament::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.5}
.dl-locus{margin:0; font-family:var(--ui); font-size:.82rem; color:var(--ink-soft)}
.folio{color:var(--brass)}
.folio::before{content:"· "}

/* ── the leaf ─────────────────────────────────────────────── */
.dl-leaf{
  position:relative; isolation:isolate;
  background-color:var(--paper); border:1px solid var(--rule);
  border-radius:.75rem; margin:0 0 2rem;
  padding:clamp(1.5rem,4vw,3rem) clamp(1.25rem,4vw,3.5rem);
  box-shadow:0 1px 1px rgba(0,0,0,.03), 0 18px 40px -28px var(--cast);
}
.dl-leaf::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:var(--tex-fibre); background-size:200px 200px; opacity:.045;
  border-radius:inherit;
}

/* ── page strip ───────────────────────────────────────────── */
.dl-strip ol{
  list-style:none; display:flex; flex-wrap:wrap; gap:.35rem;
  justify-content:center; margin:0 0 2rem; padding:0}
.dl-strip a{
  display:block; min-width:2.2rem; padding:.25rem .45rem; text-align:center;
  font-family:var(--ui); font-size:.75rem; text-decoration:none;
  color:var(--ink-soft); border:1px solid var(--rule); border-radius:.35rem}
.dl-strip a:hover,.dl-strip a:focus-visible{
  color:var(--link); border-color:var(--brass)}

/* ── the text, as the book set it ─────────────────────────── */
.dl-body{max-width:var(--measure); margin:0 auto}
.dl-p{margin:0 0 1.3rem; text-align:justify; hyphens:auto}
/* The book's own numbered sub-headings — "( २५ ) चरणामृतका विज्ञान ।" —
   picked out by the printed page's geometry rather than by guessing at the
   text: the compositor centred them and gave them their own line. */
.dl-h{
  margin:2.4rem 0 1rem; font-family:var(--sa); font-weight:600;
  font-size:1.08rem; color:var(--verse-ink); letter-spacing:.01em;
  text-align:center; text-wrap:balance;
}
.dl-h::after{
  content:""; display:block; width:3.5rem; height:1px; margin:.6rem auto 0;
  background:var(--brass); opacity:.45;
}
/* The folio, printed where the leaf actually turns — mid-sentence if that is
   where it falls. A critical edition sets it exactly here, and it is the only
   honest place for it: putting it at the nearest paragraph break would claim
   the page ended somewhere it did not. Small, raised, and a link, so #p224
   still lands a reader from a search result on the right page. */
.dl-folio{
  font-family:var(--ui); font-size:.62em; vertical-align:.42em;
  color:var(--brass); text-decoration:none; opacity:.85;
  font-variant-numeric:tabular-nums; padding:0 .18em; margin-right:.12em;
  scroll-margin-top:5rem;
}
.dl-folio:hover,.dl-folio:focus-visible{opacity:1; text-decoration:underline}
.dl-body .verse{
  margin:1.4rem 0; padding:.15rem 0 .15rem 1rem;
  border-left:2px solid var(--brass); font-family:var(--sa)}
.dl-body .verse p{margin:0 0 .2rem; color:var(--verse-ink); text-align:left}

/* ── source and turning ───────────────────────────────────── */
.dl-source{max-width:var(--measure); margin:2.5rem auto 0;
  padding-top:1.5rem; border-top:1px solid var(--rule)}
.dl-source h3{
  display:flex; align-items:center; gap:.75rem; margin:0 0 .75rem;
  font-family:var(--ui); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-soft); font-weight:600}
.dl-source h3::after{content:""; flex:1; height:1px; background:var(--rule)}
.lede{margin:0 0 .7rem; color:var(--ink-soft)}
.lede.en{font-family:var(--ui); font-size:.85rem}
.dl-source strong{color:var(--verse-ink)}
.anchor{color:var(--link); font-weight:600; text-decoration:none;
  border-bottom:1px solid transparent}
.anchor:hover,.anchor:focus-visible{border-bottom-color:var(--brass)}

.dl-turn{display:flex; gap:1rem; justify-content:space-between;
  max-width:var(--measure); margin:0 auto}
.dl-turn a{
  flex:1 1 0; max-width:22rem; padding:.8rem 1rem; text-decoration:none;
  color:var(--verse-ink); background:var(--paper);
  border:1px solid var(--rule); border-radius:.5rem; font-size:.95rem}
.dl-turn a:hover,.dl-turn a:focus-visible{border-color:var(--brass)}
.dl-turn .next{text-align:right}
.dl-turn a span{display:block; font-family:var(--ui); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft);
  margin-bottom:.2rem}

/* ── index ────────────────────────────────────────────────── */
.ix-head{padding-bottom:1rem}
.ix-head .lede{max-width:42rem; margin-left:auto; margin-right:auto;
  text-align:left}
.ix-stats{display:flex; gap:2.25rem; justify-content:center; margin:1.75rem 0 0}
.ix-stats div{text-align:center}
.ix-stats dt{font-family:var(--ui); font-size:.7rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft)}
.ix-stats dd{margin:.15rem 0 0; font-family:var(--sa); font-size:1.5rem;
  color:var(--brass)}

.dl-index{list-style:none; margin:2rem auto 0; padding:0; max-width:48rem;
  display:grid; gap:.5rem}
.dl-index a,.dl-index .dl-row{
  display:grid; grid-template-columns:2.75rem 1fr auto; align-items:baseline;
  gap:.75rem; padding:.8rem 1.1rem; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--rule); border-radius:.5rem}
.dl-index a:hover,.dl-index a:focus-visible{border-color:var(--brass)}
/* A chapter the volume has but this build has not written yet. It is listed
   because the index describes the book, not the build — but it is plainly not
   a link, so nobody clicks into a 404. */
.dl-index .pending .dl-row{opacity:.5}
.dl-index .pending .dl-name{font-weight:400}
.dl-n{font-family:var(--ui); font-size:.8rem; color:var(--brass)}
.dl-name{font-size:1.02rem; color:var(--verse-ink); font-weight:600}
.dl-meta{font-family:var(--ui); font-size:.72rem; color:var(--ink-soft);
  white-space:nowrap}
@media (max-width:36rem){
  .dl-index a,.dl-index .dl-row{grid-template-columns:2.25rem 1fr}
  .dl-meta{grid-column:2; white-space:normal}
}

/* ── the explanatory notes under the masthead ─────────────────────────────
   What these are, how they were made, and how to check them. Set narrower
   than the list and quieter than the lede: a first-time reader should read
   them, a returning one should be able to scroll past in a single flick.
   The words live in src/copy_text.py and are edited in the Page Editor. */
.ix-notes{max-width:42rem;margin:2rem auto 0;display:grid;gap:1.5rem}
.ix-note h2{margin:0 0 .4rem;font-family:var(--ui);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--brass);
  display:flex;align-items:center;gap:.7rem}
.ix-note h2::after{content:"";flex:1;height:1px;background:var(--rule)}
.ix-note p{margin:0 0 .5rem;font-size:.98rem;line-height:1.85;color:var(--ink)}
.ix-note p:last-child{margin-bottom:0}
.ix-note p.en{font-size:.88rem;line-height:1.75;color:var(--ink-soft);
  font-family:var(--ui)}
@media (max-width:34rem){
  .ix-notes{gap:1.25rem;margin-top:1.5rem}
  .ix-note p{font-size:.95rem}
}