/* Chapter pages (pages/chapter-N.html, generated by scripts/build-seo.mjs).
   With JavaScript the page is the reader, exactly like read.html, and the
   full chapter text below stays in the page but out of view. Without
   JavaScript the chapter text is the page. */

.has-js .chapter-text {
  display: none;
}

.chapter-text {
  width: min(100%, 46rem);
  margin: 0 auto;
  padding: 0 1.15rem 2rem;
  display: grid;
  gap: 2rem;
}

.chapter-text a {
  color: var(--accent);
}

.chapter-crumbs {
  color: var(--muted);
  font-size: 0.9rem;
}

.chapter-head {
  text-align: center;
}

.chapter-title {
  margin: 0 0 0.3rem;
  font-size: clamp(1.45rem, 5vw, 2.1rem);
  font-weight: 500;
  line-height: 1.3;
}

.chapter-name-sa {
  margin: 0 0 0.9rem;
  color: var(--muted);
  font-size: 1.15rem;
}

.chapter-intro {
  margin: 0 0 0.6rem;
}

.chapter-verses {
  display: grid;
  gap: 1.25rem;
}

.chapter-verse {
  scroll-margin-top: 1rem;
}

.chapter-verse .ref {
  margin: 0;
  font-weight: 400;
}

.chapter-verse .ref a {
  color: inherit;
  text-decoration: none;
}

.chapter-verse .sanskrit-line {
  margin: 0;
  color: var(--text);
}

.chapter-verse .translation-line {
  margin: 0;
  font-size: clamp(1.02rem, 3.8vw, 1.25rem);
}

.chapter-verse .translation-line + .translation-line {
  color: var(--muted);
}

.chapter-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.chapter-foot {
  color: var(--muted);
  font-size: 0.85rem;
  text-align: center;
}

.chapter-foot p {
  margin: 0 0 0.45rem;
}