/* TheoMaps, the Bible pages: one page for every chapter, set on top of pages.css. The chapter's name and point
   sit on the left with the contents, the way the plain pages do; on the right, where it sits, what it says, the
   chapter itself in the BSB, and what TheoMaps Plus holds for it. The colours of the eight divisions are the
   app's and the landing page's strip. */
:root {
  --div-law: #E8664A;
  --div-history: #C98A1E;
  --div-wisdom: #3FA35A;
  --div-prophets: #8A63D2;
  --div-gospels: #E39A1C;
  --div-acts: #1F9E8F;
  --div-letters: #2F7BE0;
  --div-revelation: #D9487A;
  --gold: #E39A1C;
  --gold-ink: #8A5A00;
  --gold-soft: #D2B06C;
  --jesus: #93361F;
  --t-sub: clamp(26px, 2.2vw, 32px);
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* the page: the chapter on the left, its notes and text on the right */
.ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; padding-block: clamp(40px, 5vw, 88px) clamp(88px, 9vw, 144px); }
.ch__side { grid-column: 1 / span 4; display: grid; gap: 18px; }
.ch__main { grid-column: 6 / span 7; display: grid; gap: 52px; min-width: 0; }
.ch__main > * { max-width: 680px; }

.crumbs ol { display: flex; padding: 0; list-style: none; flex-wrap: wrap; gap: 2px 0; font: var(--t-small)/1.45 var(--sans); color: var(--muted); }
.crumbs li + li::before { content: "›"; margin: 0 0.45em; color: var(--line); }
.crumbs a { text-decoration: none; }
.crumbs [aria-current] { color: var(--ink); }
.kicker { display: flex; align-items: center; gap: 9px; margin-top: 6px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--muted); }
.kicker i { width: 10px; height: 10px; border-radius: 3px; background: var(--d); flex: none; }
.ch__side h1 { display: grid; gap: 10px; }
.ch__ref { font-size: clamp(44px, 4.2vw, 68px); line-height: 1; letter-spacing: -0.03em; overflow-wrap: anywhere; }
.ch__handle { font-style: italic; font-size: clamp(24px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.015em; color: var(--olive); }
.ch__point { font-size: var(--t-lead); line-height: 1.45; }
.ch__meta { display: flex; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ch__meta span + span::before { content: "·"; margin: 0 0.5em; }
.ch .toc { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--line); }

/* a block of the page */
.blk { display: grid; gap: 18px; }
.blk:not(:first-child) { padding-top: 52px; border-top: 1px solid var(--line); }
.blk h2, .plus h2 { font-size: var(--t-sub); line-height: 1.15; scroll-margin-top: 28px; }
.blk h3 { margin-top: 8px; font: 600 13px/1.3 var(--sans); letter-spacing: 0.02em; color: var(--muted); }
.blk a { text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* where it sits: the 66 books, this one lit, then its chapters */
.strip { margin: 0; padding: 16px 18px 14px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); font-family: var(--sans); }
.strip__bar { display: flex; gap: 1.5px; height: 14px; align-items: end; }
.strip__bar b { flex: var(--c) 1 0; height: 100%; border-radius: 2px; background: var(--d); opacity: 0.28; }
.strip__bar b.on { opacity: 1; height: 160%; margin-top: -8px; box-shadow: 0 0 0 1.5px var(--paper); }
.strip__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 9px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.strip__foot span:nth-child(2) { text-align: center; }
.ticks { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: min(2px, calc(80px / var(--n))); margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tone-2); }
.ticks i { height: 8px; border-radius: 2px; background: var(--tone-2); }
.ticks i.on { height: 8px; background: var(--olive); box-shadow: 0 0 0 2px var(--road); }

.facts { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 12px 20px; margin: 0; }
.facts dt { padding-top: 0.2em; font: 600 var(--t-small)/1.45 var(--sans); color: var(--muted); }
.facts dd { margin: 0; }

/* the sections, with the verse each begins at */
.secs { display: grid; gap: 2px; counter-reset: sec; }
.secs li { counter-increment: sec; display: grid; grid-template-columns: 2em minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tone-2); }
.secs li::before { content: counter(sec); font: italic 400 20px/1 var(--serif); color: var(--brass); }
.secs li b { font-weight: 500; }
.secs li p { margin-top: 4px; color: var(--muted); }
.secs__range { font: 500 var(--t-small)/1.3 var(--sans); color: var(--brass-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.blk .secs__range { text-decoration: none; }

/* the chapter in the BSB */
.bsb__body { display: grid; gap: 14px; padding: clamp(24px, 3vw, 40px); border-radius: var(--r-lg); background: var(--paper); border: 1px solid var(--line); font-size: 19px; line-height: 1.7; }
.bsb__body p { max-width: 62ch; }
.bsb__hd { margin-top: 10px; font: 600 var(--t-small)/1.4 var(--sans); color: var(--olive); }
.bsb__hd:first-child { margin-top: 0; }
.bsb__ms, .bsb__mr { font: 600 13px/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.bsb__d { font-style: italic; color: var(--muted); }
.bsb__qa { font: 600 13px/1.4 var(--sans); letter-spacing: 0.04em; color: var(--brass-ink); }
.bsb__b { height: 0; }
.bsb__q1, .bsb__q2, .bsb__qr, .bsb__li1, .bsb__li2 { margin-top: -10px; }
.bsb__q1 { padding-left: 1.4em; text-indent: -1.4em; margin-left: 1.4em; }
.bsb__q2 { padding-left: 1.4em; text-indent: -1.4em; margin-left: 2.8em; }
.bsb__qr { text-align: right; font-style: italic; }
.bsb__pc { text-align: center; }
.bsb__li1 { margin-left: 1.4em; }
.bsb__li2 { margin-left: 2.8em; }
.bsb__body sup { margin-right: 0.18em; font: 600 0.62em/0 var(--sans); color: var(--brass-ink); vertical-align: 0.55em; scroll-margin-top: 40vh; }
.bsb__body sup:target { padding: 2px 5px; border-radius: 4px; background: var(--road); color: var(--ink); }
.j { color: var(--jesus); }
.bsb__note { font: var(--t-small)/1.45 var(--sans); color: var(--muted); }

/* around it: places and chapters */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a, .chips span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; font: 500 var(--t-small)/1 var(--sans); }
.chips a { background: var(--tone); text-decoration: none; transition: background-color 160ms ease; }
.chips span { border: 1px solid var(--line); color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .chips a:hover { background: var(--tone-2); } }
.notes { display: grid; gap: 14px; }
.notes b { font: 600 var(--t-small)/1.4 var(--sans); }
.notes li { padding-left: 14px; border-left: 2px solid var(--tone-2); }

.christ { display: grid; gap: 8px; padding: 22px 26px; border-radius: 16px; background: var(--paper); border-left: 4px solid var(--gold); }
.blk .christ h3 { margin: 0; color: var(--gold-ink); }
.shape { display: grid; gap: 10px; }
.shape h3 .muted { font-weight: 500; }
.shape ol { display: grid; gap: 8px; padding-left: 1.3em; }
.shape li::marker { color: var(--brass); }

.qs { display: grid; gap: 14px; counter-reset: q; }
.qs li { counter-increment: q; display: grid; grid-template-columns: 2em minmax(0, 1fr); gap: 4px 12px; }
.qs li::before { content: counter(q); font: italic 400 20px/1.5 var(--serif); color: var(--brass); }
.qs li > * { grid-column: 2; }
.qs details { font-size: 17px; }
.qs summary { cursor: pointer; font: 600 var(--t-small)/1.6 var(--sans); color: var(--olive); }
.qs details p { margin-top: 6px; color: var(--muted); }

/* what TheoMaps Plus holds for the chapter, named but not written */
.plus { display: grid; gap: 20px; padding: clamp(26px, 3vw, 36px); border-radius: var(--r-lg); background: var(--olive); color: var(--on-olive); scroll-margin-top: 28px; }
.plus h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.plus__mark { display: inline-flex; align-items: center; min-height: 28px; padding: 0 12px; border-radius: 999px; background: var(--gold-soft); color: var(--olive-2); font: 700 13px/1 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; }
.plus > p { color: var(--on-olive-soft); max-width: 52ch; }
.plus__list { display: grid; gap: 4px; }
.plus__list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 0; border-bottom: 1px solid rgba(252, 250, 245, 0.12); font: var(--t-small)/1.5 var(--sans); }
.plus__list .lock { width: 14px; height: 16px; margin-top: 2px; fill: none; stroke: var(--gold-soft); stroke-width: 1.6; }
.bars { display: grid; gap: 6px; margin-top: 10px; }
.bars i { display: block; height: 8px; border-radius: 4px; background: rgba(252, 250, 245, 0.16); }
.bars i:last-child { width: 62%; }
.plus__go { display: flex; flex-wrap: wrap; gap: 10px; }
.plus .btn { background: var(--paper); color: var(--olive-2); }
.plus .btn--line { background: transparent; color: var(--on-olive); box-shadow: inset 0 0 0 1.5px rgba(252, 250, 245, 0.5); }
.plus--open { background: var(--tone); color: var(--ink); }
.plus--open > p { color: var(--muted); }
.plus--open .btn { background: var(--olive); color: var(--on-olive); }
@media (hover: hover) and (pointer: fine) {
  .plus .btn:hover { background: #FFFFFF; }
  .plus .btn--line:hover { background: rgba(252, 250, 245, 0.08); }
  .plus--open .btn:hover { background: var(--olive-2); }
}

/* who wrote it, from what */
.byline { display: grid; gap: 10px; font: var(--t-small)/1.5 var(--sans); color: var(--muted); }
.byline a { color: var(--ink); text-underline-offset: 0.2em; }
.byline summary { cursor: pointer; color: var(--ink); }
.byline ul { display: grid; gap: 4px; margin-top: 10px; padding-left: 1.2em; }
.byline li::marker { color: var(--brass); }

/* the chapters either side */
.pn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pn > div { display: grid; gap: 4px; padding: 18px 22px; border-radius: 16px; background: var(--tone); }
.pn a, .pn > div > :last-child { font-size: 19px; line-height: 1.3; text-decoration: none; }
.pn__next { grid-column: 2; text-align: right; }
@media (hover: hover) and (pointer: fine) { .pn a:hover { text-decoration: underline; text-underline-offset: 0.2em; } }

@media (min-width: 960px) and (min-height: 820px) { .ch__side { position: sticky; top: 32px; } }
@media (max-width: 959.98px) {
  .ch { display: block; }
  .ch__side { margin-bottom: 44px; }
  .ch .toc { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 16px; }
  .ch .toc a { padding: 8px 14px; border-radius: 999px; background: var(--tone); color: var(--ink); }
}
@media (max-width: 640px) {
  .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .facts dd + dt { margin-top: 12px; }
  .bsb__body { margin-inline: calc(var(--margin) * -0.5); padding: 22px 20px; font-size: 18px; }
  .strip__foot span:nth-child(2) { display: none; }
  .pn { grid-template-columns: minmax(0, 1fr); }
  .pn__next { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .chips a { transition: none; } }

/* the pages above the chapters: the Bible, its testaments, categories and acts, the books and their outlines */
.kicker a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .kicker a:hover { color: var(--ink); } }
.strip--all .strip__bar b { opacity: 1; }
.strip--group .strip__bar b.on { height: 100%; margin-top: 0; box-shadow: none; }
.btn--quiet { background: var(--tone); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn--quiet:hover { background: var(--tone-2); } }
blockquote { margin: 0; padding-left: 16px; border-left: 2px solid var(--gold-soft); font-style: italic; }

.bl { display: grid; }
.bl li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 11px 0 11px 20px; border-bottom: 1px solid var(--tone-2); position: relative; }
.bl li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 9px; height: 9px; border-radius: 3px; background: var(--d); }
.bl__name { font-weight: 500; }
.bl__handle { color: var(--muted); font-style: italic; }
.bl li p { margin-top: 4px; font-size: 17px; }
.bl__n { font: var(--t-small)/1.4 var(--sans); color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.bl--cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: 32px; }
.dh { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.dh::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--d); }
.blk .dh a { color: var(--ink); text-decoration: none; }
.blk h3.dh { font-size: var(--t-small); color: var(--ink); }

.acts { display: grid; gap: 2px; }
.acts li { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--tone-2); }
.acts__n { font: italic 400 22px/1 var(--serif); color: var(--brass); }
.acts a, .acts b { font-weight: 500; }
.acts li p { margin-top: 4px; color: var(--muted); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.tiles li { display: grid; align-content: start; gap: 8px; padding: 20px 22px; border-radius: 16px; background: var(--tone); }
.tiles li[style] { box-shadow: inset 4px 0 0 var(--d); }
.tiles a { display: grid; gap: 2px; text-decoration: none; }
.tiles a b { font-size: 21px; font-weight: 500; line-height: 1.25; }
.tiles a span { font: var(--t-small)/1.4 var(--sans); }
.tiles p { font-size: 17px; }
@media (hover: hover) and (pointer: fine) { .tiles a:hover b { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; } }

.themes { display: flex; flex-wrap: wrap; gap: 8px; }
.themes li { padding: 8px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); font: 500 var(--t-small)/1.35 var(--sans); }

.cl { display: grid; }
.cl li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--tone-2); }
.cl__n { font: italic 400 22px/1.3 var(--serif); color: var(--brass); font-variant-numeric: tabular-nums; }
.cl li > div > a, .cl li > div > b { font-weight: 500; }
.cl li p { margin-top: 4px; }
.cl__secs { font: var(--t-small)/1.6 var(--sans); }
.blk .cl li > div > a { text-decoration-color: var(--line); }
.ph { margin-top: 22px !important; }
.blk .ph a { color: var(--ink); text-decoration: none; }
.blk h3.ph { font-size: var(--t-small); color: var(--ink); }

.kv { display: grid; gap: 18px; }
.kv li { display: grid; gap: 6px; }
.kv__ref { font: 600 var(--t-small)/1.4 var(--sans); }
.stops { display: grid; gap: 26px; counter-reset: stop; }
.stops li { display: grid; gap: 8px; padding-left: 44px; position: relative; counter-increment: stop; }
.stops li::before { content: counter(stop); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--olive); color: var(--on-olive); font: 600 13px/28px var(--sans); text-align: center; }
.christ blockquote { border-left-color: var(--gold); }

.op h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.op__range { font: 500 var(--t-small)/1.3 var(--sans); color: var(--brass-ink); letter-spacing: 0; }
.mv { display: grid; gap: 8px; margin-top: 14px; padding: 20px 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line); scroll-margin-top: 28px; }
.blk .mv h3 { display: flex; justify-content: space-between; gap: 12px; margin: 0; font: 600 var(--t-body)/1.35 var(--sans); color: var(--ink); letter-spacing: -0.01em; }
.mv__in { font-style: italic; color: var(--muted); }
.mv .cl li:last-child { border-bottom: 0; padding-bottom: 0; }
.secs--in { margin-top: 8px; }
.secs--in li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; }
.secs--in li::before { content: none; }
.dq { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--tone-2); }
.blk .dq h3 { margin: 0; font: 600 var(--t-body)/1.4 var(--sans); color: var(--ink); }
@media (max-width: 640px) {
  .mv { padding: 16px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
}