/* Akhyāna pages. The tokens, the ground, the fibre and the theme rule all come
   from style.css — this file only adds what an akhyāna page needs on top, and
   is loaded by templates/akhyana.html. Kept separate so editing it does not
   make every book stale: render's invalidation key fingerprints style.css. */
/* Tokens lifted verbatim from static/style.css so an akhyāna page sits inside
   the site rather than beside it. Two things are copied deliberately:

   - the verse bubble's own cream (--verse-bg / --verse-edge / --verse-ink),
     which is a shade deeper than the page and reads as part of the theme;
   - the theme rule. The granth pages do NOT follow prefers-color-scheme, and
     the comment in style.css says why: a reader arriving from the light
     WordPress side landed on a dark granth page unprompted. Light is the
     default here too, and dark applies only when the reader asks. */
.desk{max-width:60rem; margin:0 auto; padding:2.5rem 1.25rem 6rem}

/* ── masthead ─────────────────────────────────────────────── */
.masthead{text-align:center; padding:1rem 0 2.25rem}
.masthead h1{
  margin:0 0 .5rem; font-family:var(--sa); font-weight:400;
  font-size:clamp(2rem,5vw,3rem); letter-spacing:.02em; color:var(--verse-ink);
}
/* An unbroken rule with the Brahmi lotus 𑁍 set into it — the mark a
   manuscript uses to close a section. Noto Sans Brahmi is loaded above
   because the glyph is absent from ordinary Devanāgarī faces. */
.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:1.15rem auto 1.35rem; max-width:22rem; color:var(--brass);
}
.ornament::before,.ornament::after{
  content:""; flex:1; height:1px; background:currentColor; opacity:.5;
}
.masthead p{
  margin:0 auto; max-width:34rem; color:var(--ink-soft); font-size:.95rem;
}
.note{
  margin:1.5rem auto 0; max-width:40rem; padding:.75rem 1rem;
  font-family:var(--ui); font-size:.78rem; line-height:1.6;
  color:var(--ink-soft); border:1px solid var(--rule); border-radius:.5rem;
  background:var(--paper);
}
.note strong{color:var(--brass)}

/* ── one leaf per katha ───────────────────────────────────── */
.katha{
  position:relative; isolation:isolate;
  background-color:var(--paper); border:1px solid var(--rule);
  border-radius:.75rem; margin:0 0 3.5rem;
  padding:clamp(1.75rem,4vw,3.5rem) clamp(1.25rem,4vw,3.5rem);
  box-shadow:0 1px 1px rgba(0,0,0,.03), 0 18px 40px -28px var(--cast);
}
/* The leaf's own tooth, at the weight the site uses. */
.katha::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;
}
.katha-head{text-align:center; padding-bottom:1.75rem}
.katha-head h2{
  margin:0 0 .75rem; font-family:var(--sa); font-weight:400;
  font-size:clamp(1.45rem,3.3vw,2.15rem); line-height:1.45;
  text-wrap:balance; color:var(--ink);
}
.uk{color:var(--verse-ink); white-space:nowrap}
.theme{
  margin:0 0 .6rem; font-size:1.02rem; color:var(--brass);
  letter-spacing:.02em;
}
.standing{
  margin:0 auto .9rem; max-width:30rem; font-size:.88rem; font-style:italic;
  color:var(--ink-soft);
}
.locus{
  margin:0; font-family:var(--ui); font-size:.74rem; color:var(--ink-soft);
  letter-spacing:.06em; font-variant-numeric:tabular-nums;
}
.frame{
  max-width:var(--measure); margin:1.75rem auto 0; padding:.9rem 1.1rem;
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  text-align:center;
}
.teller{margin:0; font-size:.9rem; color:var(--ink-soft)}
.teller span{color:var(--verse-ink); font-weight:600}
.occasion{margin:.2rem 0 0; font-size:1rem}

/* ── prose ────────────────────────────────────────────────── */
/* The corpus column is 38rem, sized for scanning a page at a time. An akhyāna
   is read straight through and wants more room; 20% wider. Still a max-width,
   so a phone is unaffected — it was never reaching the cap. */
.akhyana-main{--measure:45.6rem}
.prose{max-width:var(--measure); margin:2rem auto 0}
.prose p{margin:0 0 1.3rem; text-align:justify; hyphens:auto}
.prose > p:first-of-type::first-letter{
  float:left; font-family:var(--sa); font-size:3.1rem; line-height:.86;
  padding:.32rem .5rem 0 0; color:var(--verse-ink);
}

/* ── the śloka bubble ─────────────────────────────────────── */
.shloka{
  position:relative; margin:1.6rem 0; padding:1.1rem 1.25rem .8rem;
  background:var(--verse-bg); border:1px solid var(--verse-edge);
  border-radius:.8rem; text-align:center;
  box-shadow:0 8px 20px -20px var(--cast);
}
/* One lotus, on the top edge only. A second at the foot made the block feel
   fenced in; a single mark opens it. */
.shloka .mark{
  position:absolute; top:-.5rem; left:50%; transform:translateX(-50%);
  background:var(--verse-bg); padding:0 .5rem; color:var(--brass);
  font-family:"Noto Sans Brahmi",var(--sa),serif; font-size:.9rem;
  line-height:1;
}
.speaker{
  display:block; font-family:var(--ui); font-size:.64rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--brass);
  margin-bottom:.45rem;
}
.sa::first-letter{font-size:inherit; font-weight:inherit; float:none}
.sa{
  /* 2.05 was set for a single pāda pair and left the two lines of a verse
     floating apart; Devanāgarī needs headroom for the mātrās but not that
     much. 1.6 keeps the conjuncts clear and closes the gap. */
  margin:0 0 .5rem; font-family:var(--sa); font-weight:600;
  font-size:clamp(1.05rem,2.2vw,1.22rem); line-height:1.6;
  color:var(--verse-ink); letter-spacing:.012em;
}
.sa:last-of-type{margin-bottom:0}
.gloss{
  margin:.7rem auto 0; max-width:30rem; padding-top:.6rem;
  border-top:1px dashed var(--verse-edge);
  font-size:.84rem; line-height:1.65; color:var(--ink-soft);
}
.shloka figcaption{
  margin-top:.65rem; font-family:var(--ui); font-size:.68rem;
  letter-spacing:.04em; color:var(--ink-soft);
  display:flex; justify-content:center; gap:.6rem; flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.folio{color:var(--brass)}
.folio::before{content:"· "}

/* ── the source, which is the only thing that follows the katha ─────── */
.source{max-width:var(--measure); margin:2.5rem auto 0;
  padding-top:1.5rem; border-top:1px solid var(--rule)}
.source h3{
  margin:0 0 .7rem; font-family:var(--ui); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--brass);
  font-weight:600; display:flex; align-items:center; gap:.7rem;
}
.source h3::after{content:""; flex:1; height:1px; background:var(--rule)}
.lede{margin:0 0 .7rem}
.anchor{color:var(--link); font-weight:600; text-decoration:none;
  border-bottom:1px solid var(--brass-lit); padding-bottom:1px}
.anchor:hover,.anchor:focus-visible{border-bottom-color:var(--brass)}
.windows{
  margin:0; padding:0; list-style:none; font-family:var(--ui);
  font-size:.74rem; display:flex; flex-wrap:wrap; gap:.35rem .8rem;
}
.windows a{color:var(--ink-soft); text-decoration:none}
.windows a:hover,.windows a:focus-visible{color:var(--link)}
.colophon{
  margin:1.1rem 0 0; font-family:var(--ui); font-size:.71rem;
  color:var(--ink-soft); font-variant-numeric:tabular-nums; line-height:1.7;
}
.colophon strong{color:var(--brass)}
/* ── the index of kathās, when pages are written one per episode ────── */
.index{list-style:none;margin:0 auto;padding:0;max-width:44rem;
  display:flex;flex-direction:column;gap:.6rem}
.index a{display:block;padding:.9rem 1.1rem;text-decoration:none;color:inherit;
  background-color:var(--paper);border:1px solid var(--rule);border-radius:.6rem;
  box-shadow:0 1px 1px rgba(0,0,0,.03)}
.index a:hover{border-color:var(--brass)}
.ix-name{display:block;font-size:1.05rem;color:var(--verse-ink);font-weight:600}
.ix-q{display:block;margin-top:.15rem;font-size:.92rem;color:var(--ink)}
.ix-meta{display:block;margin-top:.35rem;font-family:var(--ui);font-size:.72rem;
  color:var(--ink-soft);font-variant-numeric:tabular-nums}
a:focus-visible{outline:2px solid var(--brass); outline-offset:3px; border-radius:2px}
@media (max-width:34rem){
  .prose p{text-align:left}
  .katha{border-radius:.5rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── the index page ─────────────────────────────────────────────────────── */
.ix-head{max-width:46rem;margin-inline:auto}
.ix-head .eyebrow{margin:0 0 .35rem;font-family:var(--ui);font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
.ix-head .lede{margin:0 auto .9rem;max-width:40rem;font-size:1rem;
  line-height:1.8;color:var(--ink);text-align:left}
.ix-head .lede.en{font-size:.92rem;color:var(--ink-soft);font-style:italic}
.ix-stats{display:flex;justify-content:center;gap:2.5rem;margin:1.75rem 0 0;
  padding:1rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ix-stats div{text-align:center}
.ix-stats dt{font-family:var(--ui);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-soft)}
.ix-stats dd{margin:.2rem 0 0;font-family:var(--sa);font-size:1.5rem;
  color:var(--verse-ink);font-variant-numeric:tabular-nums}

/* ── what the page says in English ────────────────────────── */
/* Real, visible text — see english_html() in scripts/preview_akhyana.py for
   why it is not a hidden keyword block. Set quieter than the kathā itself:
   it is apparatus for a reader who arrived in the wrong language, not part
   of the retelling. */
.in-english{
  max-width:var(--measure); margin:2.5rem auto 0; padding-top:1.5rem;
  border-top:1px solid var(--rule); font-family:var(--ui);
}
.in-english h3{
  display:flex; align-items:center; gap:.75rem; margin:0 0 .75rem;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
.in-english h3::after{content:""; flex:1; height:1px; background:var(--rule)}
.en-title{margin:0 0 .4rem; font-family:var(--sa); font-size:1.15rem;
  color:var(--verse-ink)}
.abstract{margin:0 0 1rem; font-size:.95rem; line-height:1.65}
.asked-head{margin:0 0 .35rem; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-soft)}
.asked{margin:0 0 1rem; padding-left:1.1rem; font-size:.92rem; line-height:1.7}
.asked li{margin:0 0 .15rem}
.also{margin:0; font-size:.8rem; color:var(--ink-soft)}

/* ── 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}
}