/* =====================================================================
   blessbible.app — /bible/** (hub, books, chapters). Built on site.css
   tokens; every class is prefixed bib- (plus .vv/.bk for the compact
   chapter and book lists, which only exist on these pages).
   Reading first: the CPDV at 20–22.5px Cormorant, ~34em measure, quiet
   superscript verse numbers, a sticky reading bar that floats under the
   header's own fade. Animate transform/opacity only.
   ===================================================================== */

/* ---------- shared bits ---------- */
/* (site.css gives every serif heading lining figures; these are this section's own serif names) */
:is(.bib-row__t, .bk__t, .bib-pick__h a) { font-variant-numeric: lining-nums; }
.bib-h1sub { font-weight: 500; font-size: .6em; color: var(--dim); letter-spacing: 0; white-space: nowrap; }
.bib-heb { font-weight: 500; color: var(--dim); }
.bib-sec { margin-top: clamp(56px, 8vw, 104px); }
.bib-sec > .sec-head { margin-bottom: clamp(24px, 3vw, 36px); }
.bib-sec > .sec-head .h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.2rem); }
.bib-prov { margin-top: 12px; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.bib-prov a, .bib-more a { color: var(--gold); }
.bib-more { margin-top: 6px; font-size: 14px; color: var(--dim); }
.bib-tag { display: inline-block; margin-left: 8px; padding: 2px 7px 1px; border-radius: 999px; font: 700 10px/1.3 var(--sans); letter-spacing: .1em;
  text-transform: uppercase; vertical-align: 1px; color: var(--marian); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--marian) 45%, transparent); }
.bib-wide { display: none; }
@media (min-width: 560px) { .bib-wide { display: inline; } .bib-narrow { display: none; } }

/* ---------- chapter grid (book page + picker) ---------- */
.bib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.bib-grid a { display: grid; place-items: center; min-height: 44px; border-radius: 12px; text-decoration: none; font: 650 14.5px/1 var(--sans);
  font-variant-numeric: tabular-nums; color: var(--fg-2); background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 45%, transparent); transition: color .2s, background-color .2s, transform .25s var(--ease); }
.bib-grid a:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.bib-grid a:active { transform: scale(.95); }
.bib-grid a[aria-current] { color: #15121C; background: linear-gradient(180deg, #E4C673, #C9A44C 60%, #B48F3A); box-shadow: inset 0 0 0 1px rgb(255 240 200 / .5), 0 0 16px rgb(201 164 76 / .3); }
@media (min-width: 720px) { .bib-grid { grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); } }
.bib-jumpgrid { margin: calc(-1 * clamp(8px, 2vw, 24px)) 0 0; }

/* ---------- chapter page: lead (above the text) + text + companion (aside) ----------
   Phones: header → Challoner's summary + one row of jump links → the text → the companion
   rows (Mass, Catechism, saints) → Challoner's notes. Desktop (≥1080): the summary beside
   the title, the companion sticky beside the text. One-chapter books: introduction → text,
   with the summary and the companion beside it (after it on phones). */
.bib-ch { display: grid; gap: 30px; align-items: start; }
.bib-ch > * { min-width: 0; }
:is(.kind-chapter, .kind-book) .main { --vfs: clamp(1.25rem, 1.12rem + .52vw, 1.42rem); --col: calc(var(--vfs) * 28.5); }
.bib-main { min-width: 0; max-width: var(--col); }
.bib-main[data-view="both"] { max-width: none; }
.bib-side { min-width: 0; }
.bib-side__h { margin-bottom: 14px; font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.bib-side .scard, .bib-side .notice { margin-bottom: 10px; }
.bib-summ .scard__b p { font-size: 16.5px; line-height: 1.55; text-wrap: pretty; }
.bib-lead { min-width: 0; max-width: var(--col); }
.bib-ch--head { row-gap: 0; }
.bib-ch--head > .bib-lead { margin: calc(-1 * clamp(10px, 2vw, 24px)) 0 26px; }
.bib-ch--head > .bib-side { margin-top: 26px; }
.bib-ch--book > .bib-side { margin-top: 8px; }
@media (max-width: 1079.98px) {
  /* the label is for the outline; on phones the card's own kicker says it */
  .bib-lead__h { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .bib-lead .scard { padding: 15px 18px 15px 20px; }
  .bib-lead .bib-summ .card__k { display: none; }      /* its source line already names Challoner */
  .bib-lead .bib-summ .scard__b { margin-top: 0; }
  .bib-lead .notice { padding: 11px 16px 11px 18px; font-size: 14.5px; }
  .bib-main .bib-bar { margin-bottom: 22px; }
}
/* the one-chapter books’ introduction above their text: three lines on phones, then "Read more" */
.bib-clamp__in, .bib-clamp__more { display: none; }
@media (max-width: 599.98px) {
  .bib-clamp__in { display: block; position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
  .bib-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2.3em), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 2.3em), transparent); }
  .bib-clamp__in:checked + .bib-clamp { display: block; -webkit-line-clamp: unset; line-clamp: none; -webkit-mask-image: none; mask-image: none; }
  .scard__b > .bib-clamp__more { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 -10px; font: 650 15px/1 var(--sans); color: var(--gold); cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .bib-clamp__in:checked ~ .bib-clamp__more { display: none; }
  .bib-clamp__in:focus-visible ~ .bib-clamp__more { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
}
@media (min-width: 1080px) {
  .bib-ch { grid-template-columns: minmax(0, 1fr) 340px; column-gap: clamp(48px, 5vw, 88px); }
  .bib-side { grid-column: 2; position: sticky; top: calc(var(--head-h) + 22px); max-height: calc(100vh - var(--head-h) - 44px);
    overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; padding-right: 4px; }
  .bib-side.is-scroll-b { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 48px), transparent); }
  .bib-side.is-scroll-t.is-scroll-b { -webkit-mask-image: linear-gradient(180deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(180deg, transparent, #000 32px, #000 calc(100% - 48px), transparent); }
  .bib-side.is-scroll-t:not(.is-scroll-b) { -webkit-mask-image: linear-gradient(180deg, transparent, #000 32px); mask-image: linear-gradient(180deg, transparent, #000 32px); }
  .bib-main { grid-column: 1; }
  /* chapter: header | summary, then text | companion (sticky for the length of the text) */
  .bib-ch--head > .page-head { grid-column: 1; grid-row: 1; }
  /* bottom-aligned beside the title, so the companion follows the summary without a gap */
  .bib-ch--head > .bib-lead { grid-column: 2; grid-row: 1; align-self: end; margin: 0 0 clamp(36px, 5vw, 60px); max-width: none; }
  .bib-ch--head > .bib-main { grid-row: 2; }
  .bib-ch--head > .bib-side { grid-row: 2; margin-top: 0; }
  /* one-chapter book: the text from the top | introduction, then summary + companion (sticky) */
  .bib-ch--book { row-gap: 0; grid-template-rows: auto 1fr; }   /* the text's extra height goes to row 2 */
  .bib-ch--book > .bib-lead { grid-column: 2; grid-row: 1; margin-bottom: 30px; }
  .bib-ch--book > .bib-main { grid-row: 1 / span 2; }
  .bib-ch--book > .bib-side { grid-row: 2; margin-top: 0; }
}

/* jump links (phones): one row, scrolls sideways if it must, soft fade on the clipped side */
.bib-jumps { display: flex; gap: 8px; margin-top: 12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
.bib-jumps::-webkit-scrollbar { display: none; }
.bib-jumps a { flex: none; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 15px; border-radius: 999px;
  font: 600 14px/1.2 var(--sans); color: var(--fg-2); text-decoration: none; white-space: nowrap; background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 45%, transparent); -webkit-tap-highlight-color: transparent; }
.bib-jumps a:hover { color: var(--fg); }
.bib-jumps__m { color: var(--gold); font-variant-numeric: tabular-nums; }
.bib-jumps.is-scroll-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.bib-jumps.is-scroll-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px); mask-image: linear-gradient(90deg, transparent, #000 40px); }
@media (min-width: 1080px) { .bib-jumps { display: none; } }   /* the companion is beside the text there */
.bib-jumps.is-scroll-l.is-scroll-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 48px), transparent); }

/* companion rows: <details>, open/close without JS */
.bib-d { border-top: 1px solid var(--line); }
.bib-d:last-child { border-bottom: 1px solid var(--line); }
.bib-scard + .bib-d, .bib-side .scard + .bib-d, .bib-side .notice + .bib-d { margin-top: 18px; }
.bib-d > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 2px; cursor: pointer; list-style: none; -webkit-tap-highlight-color: transparent; }
.bib-d > summary::-webkit-details-marker { display: none; }
.bib-d__t { font: 650 15.5px/1.25 var(--sans); color: var(--fg); }
.bib-d__m { margin-left: auto; font-size: 14px; line-height: 1.3; color: var(--dim); text-align: right; }
.bib-d__i { color: var(--gold); transition: transform .3s var(--ease); }
.bib-d[open] > summary .bib-d__i { transform: rotate(90deg); }
.bib-d > summary:hover .bib-d__t { color: var(--gold); }
.bib-d__b { padding: 0 0 20px; }
@media (prefers-reduced-motion: no-preference) { .bib-d[open] .bib-d__b { animation: bib-in .4s var(--ease-out); } }
@keyframes bib-in { from { opacity: 0; transform: translateY(-4px); } }
.bib-d .quotes { padding: 0 16px; }
.bib-d .quote { grid-template-columns: 34px minmax(0, 1fr); gap: 12px; padding: 14px 0; }
.bib-d .avatar { width: 34px; height: 34px; font-size: 16px; }
.bib-d .quote__q p { font-size: 1.16rem; }

/* Mass dates */
.bib-mass li { position: relative; padding: 11px 0; }
.bib-mass li + li { border-top: 1px solid var(--line); }
.bib-mass__d { font: 650 13px/1.35 var(--sans); letter-spacing: .03em; color: var(--gold); }
.bib-mass__d a { text-decoration: none; }
.bib-mass__d a::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }   /* the whole date row is the link */
.bib-mass li:hover .bib-mass__d a { text-decoration: underline; }
.bib-mass__c { margin-top: 2px; font-size: 15px; line-height: 1.4; color: var(--fg); }
.bib-mass__r { margin-top: 2px; font-size: 14.5px; color: var(--dim); }
.bib-mass__r b { color: var(--fg); font-weight: 650; }

/* Catechism inside the companion: the whole row opens the paragraph on vatican.va; the verse
   numbers sit above that link with 44px tap areas (padding offset by negative margins) */
.bib-ccc li { position: relative; }
.bib-ccc .ccc { padding: 10px 0 2px; min-height: 0; }
.bib-ccc .ccc::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }
.bib-ccc .ccc__t { font-size: 1.06rem; }
.bib-ccc .ccc__t::after { content: "↗"; margin-left: .4em; font: 600 13px/1 var(--sans); color: var(--dim); }
.bib-on { padding-bottom: 10px; font-size: 13.5px; color: var(--dim); }
.bib-on a { position: relative; z-index: 1; display: inline-block; padding: 13px 9px; margin: -13px -5px; color: var(--gold); text-decoration: none; font-variant-numeric: tabular-nums; }
.bib-on a:hover { text-decoration: underline; }
.bib-ccc li:hover .ccc__t { text-decoration: underline; text-decoration-color: var(--line-2); }
.bib-ccc-more > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; cursor: pointer; list-style: none;
  font: 650 14.5px/1 var(--sans); color: var(--gold); -webkit-tap-highlight-color: transparent; }
.bib-ccc-more > summary::-webkit-details-marker { display: none; }
.bib-ccc-more > summary:hover { text-decoration: underline; }
.bib-ccc-more__i { transform: rotate(90deg); }
.bib-ccc-more[open] > summary { display: none; }
.bib-ccc-more > .ccc-list { border-top: 1px solid var(--line); }

/* ---------- the sticky reading bar (floats inside the header's fade) ---------- */
.bib-bar { position: sticky; top: calc(max(10px, env(safe-area-inset-top)) + 66px); z-index: 20; display: flex; align-items: center;
  justify-content: space-between; gap: 10px; margin: 0 0 30px; pointer-events: none; }
.bib-bar > * { pointer-events: auto; }
/* once stuck (bible.js), a soft fade of the page colour sits behind the pills so text
   dissolves under them instead of crowding them; never a hard edge */
.bib-bar::before { content: ""; position: absolute; z-index: -1; left: calc(-1 * var(--gutter)); right: calc(-1 * var(--gutter)); top: -26px; bottom: -64px;
  pointer-events: none; opacity: 0; transition: opacity .35s var(--ease);
  /* page colour, near-opaque through the pills (26–74px of 138) so no word shows between them,
     then a long smoothstep tail: the text dissolves well below the pills. The sides fade too
     (over the gutter), so on wide screens it is a soft vignette over the glow, never a block. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 88%, transparent), color-mix(in srgb, var(--bg) 98%, transparent) 14%,
    color-mix(in srgb, var(--bg) 98%, transparent) 57%, color-mix(in srgb, var(--bg) 88%, transparent) 66%,
    color-mix(in srgb, var(--bg) 64%, transparent) 76%, color-mix(in srgb, var(--bg) 34%, transparent) 86%,
    color-mix(in srgb, var(--bg) 10%, transparent) 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 var(--gutter), #000 calc(100% - var(--gutter)), transparent); }
.bib-bar.is-stuck::before { opacity: 1; }
.bib-pick { position: relative; min-width: 0; }
.bib-pick > summary { list-style: none; }
.bib-pick > summary::-webkit-details-marker { display: none; }
.bib-pick__btn { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 48px; padding: 0 16px 0 20px; border-radius: 999px; cursor: pointer;
  font: 650 15.5px/1 var(--sans); color: var(--fg); white-space: nowrap; background: var(--glass-solid);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 10px 26px -16px var(--shadow); -webkit-tap-highlight-color: transparent; }
.bib-pick--static .bib-pick__btn { cursor: default; padding-right: 20px; }
.bib-pick__i { color: var(--gold); transform: rotate(90deg); transition: transform .3s var(--ease); }
.bib-pick[open] .bib-pick__i { transform: rotate(-90deg); }
.bib-pick__panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 2; width: min(440px, calc(100vw - 2 * var(--gutter)));
  max-height: min(64vh, 540px); max-height: min(64dvh, 540px, calc(100dvh - max(10px, env(safe-area-inset-top)) - 66px - 48px - 10px - 20px));
  overflow-y: auto; overscroll-behavior: contain; padding: 16px 16px 12px; border-radius: 24px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 120px), var(--sheet); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 30px 60px -24px var(--shadow); }
.bib-pick__panel.is-scroll-b { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 40px), transparent); }
.bib-pick__panel.is-scroll-t.is-scroll-b { -webkit-mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(180deg, transparent, #000 28px, #000 calc(100% - 40px), transparent); }
.bib-pick__panel.is-scroll-t:not(.is-scroll-b) { -webkit-mask-image: linear-gradient(180deg, transparent, #000 28px); mask-image: linear-gradient(180deg, transparent, #000 28px); }
@media (prefers-reduced-motion: no-preference) { .bib-pick[open] .bib-pick__panel { animation: bib-pop .32s var(--ease-out); } }
@keyframes bib-pop { from { opacity: 0; transform: translateY(-6px) scale(.985); } }
.bib-pick__h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 2px 4px 14px; }
.bib-pick__h a { font: 600 1.3rem/1.2 var(--serif); color: var(--fg); text-decoration: none; }
.bib-pick__h a:hover { color: var(--gold); }
.bib-pick__h span { font-size: 13.5px; color: var(--dim); }
.bib-pick__f { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--line); }
.bib-pick__f a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px; font-weight: 650; color: var(--gold); text-decoration: none; }
.bib-seg { background: var(--glass-solid); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 10px 26px -16px var(--shadow); }
.bib-seg .seg__btn { padding: 0 13px; font-size: 14.5px; }
@media (min-width: 560px) { .bib-seg .seg__btn { padding: 0 17px; font-size: 15px; } }
@media (max-width: 359.98px) { .bib-seg .seg__btn { padding: 0 10px; } .bib-pick__btn { padding: 0 12px 0 14px; } }

/* ---------- the text ---------- */
.bib-tnote { margin: -12px 0 24px; font-size: 14px; line-height: 1.5; color: var(--dim); max-width: calc(60 * var(--ch)); }
.vv { --ind: 1.12em; font: 500 var(--vfs)/1.62 var(--serif); color: var(--fg);
  font-kerning: normal; font-variant-ligatures: common-ligatures; }
.vv--3 { --ind: 1.5em; }
.vv li { position: relative; padding: .1em 0; scroll-margin-top: 72px; border-radius: 14px; }
.vv li + li { margin-top: .32em; }
.vv p { text-indent: var(--ind); text-wrap: pretty; overflow-wrap: break-word; }
.vv .v1 > p { text-indent: 0; }
.vv .v1 { display: flow-root; }
/* the verse number: a quiet superscript whose link box is a 44px-tall tap target — the padding
   reaches into the gutter and above, offset by left/margin so the glyph doesn't move */
.vv li > a:first-child { position: absolute; left: -14px; top: .66em; font: 650 11.5px/1 var(--sans); letter-spacing: .02em; font-variant-numeric: tabular-nums;
  color: var(--gold); opacity: .78; text-decoration: none; padding: 16px 6px 16px 14px; margin-top: -16px; }
.vv li > a:first-child:hover { opacity: 1; text-decoration: underline; }
/* on parchment the gold must be full strength (4.9:1; at .78 it fell to 3.3:1) */
:root[data-theme="light"] .vv li > a:first-child { opacity: 1; }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .vv li > a:first-child { opacity: 1; } }
/* the † to Challoner's note: padding widens its tap area (≥ 24px), negative margins keep the glyph in place */
.vv .nt { margin: 0 -8px 0 calc(.18em - 8px); padding: 10px calc(.1em + 8px); font: 650 .62em/1 var(--sans); vertical-align: .55em; color: var(--gold); text-decoration: none; }
.vv .nt:hover { text-decoration: underline; }
.vv [lang="la"] { margin-top: .18em; text-indent: 0; font-style: italic; font-size: .88em; line-height: 1.55; color: var(--dim); }
.vv li:target { margin-inline: -12px; padding-inline: 12px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--gold-fill) 17%, transparent), color-mix(in srgb, var(--gold-fill) 4%, transparent) 75%, transparent); }
.vv li:target > a:first-child { left: -2px; }
/* drop cap on verse 1 (and on the Latin when the Latin is the view) */
.vv .v1 > p:first-of-type::first-letter, .bib-main[data-view="latin"] .vv .v1 > [lang="la"]::first-letter {
  color: var(--gold-fill); font-weight: 600; font-style: normal; text-shadow: 0 0 22px rgb(201 164 76 / .3); }
@supports ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
  .vv .v1 > p:first-of-type::first-letter, .bib-main[data-view="latin"] .vv .v1 > [lang="la"]::first-letter { -webkit-initial-letter: 2; initial-letter: 2; margin-right: .09em; }
}
@supports not ((initial-letter: 2) or (-webkit-initial-letter: 2)) {
  .vv .v1 > p:first-of-type::first-letter, .bib-main[data-view="latin"] .vv .v1 > [lang="la"]::first-letter { float: left; font-size: 3.15em; line-height: .8; padding: .07em .07em 0 0; }
}
/* views (site.js sets data-view; without JS both texts show, the Latin dim under each verse) */
.bib-main[data-view="cpdv"] .vv [lang="la"] { display: none; }
/* with JS on (html.js is set by the inline head script, before first paint) the default CPDV view
   holds from the first frame, so the Latin doesn't show and then collapse when site.js (a deferred
   module) applies the view; a saved Latin / side-by-side choice still arrives with site.js */
html.js .bib-main[data-switch][data-default="cpdv"]:not([data-view]) .vv [lang="la"] { display: none; }
.bib-main[data-view="latin"] .vv li > p:not([lang]) { display: none; }
.bib-main[data-view="latin"] .vv li.nl > p:not([lang]) { display: block; opacity: .55; }
.bib-main[data-view="latin"] .vv [lang="la"] { margin-top: 0; text-indent: var(--ind); font-style: normal; font-size: 1em; line-height: 1.62; color: var(--fg); }
.bib-main[data-view="latin"] .vv .v1 > [lang="la"] { text-indent: 0; }
@media (min-width: 760px) {
  .bib-main[data-view="both"] .vv { max-width: none; }
  .bib-main[data-view="both"] .vv li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 36px); }
  .bib-main[data-view="both"] .vv li + li { margin-top: .5em; }
  .bib-main[data-view="both"] .vv [lang="la"] { margin-top: 0; font-size: .92em; line-height: 1.62; color: var(--fg-2); }
}
.bib-src { margin-top: 30px; font-size: 13.5px; line-height: 1.5; color: var(--dim); }
.bib-src a { color: var(--fg-2); }

/* ---------- Challoner's notes ---------- */
.bib-notes { margin-top: clamp(52px, 7vw, 84px); max-width: var(--col); }
.bib-notes__src { margin-top: 12px; font-size: 14.5px; line-height: 1.55; color: var(--dim); max-width: calc(62 * var(--ch)); }
.bib-note { margin-top: 22px; }
.bib-note li { display: grid; gap: 2px 18px; padding: 15px 0 16px; border-top: 1px solid var(--line); scroll-margin-top: 20px; }
.bib-note li:target { background: linear-gradient(90deg, color-mix(in srgb, var(--gold-fill) 12%, transparent), transparent 70%); border-radius: 12px; }
.bib-note__v { font: 700 12px/1.9 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.bib-note__v a { display: inline-block; padding: 12px 10px; margin: -12px -10px; color: var(--gold); text-decoration: none; }   /* 44px tap area */
.bib-note__v a:hover { text-decoration: underline; }
.bib-note__t { font-size: 16px; line-height: 1.65; color: var(--fg-2); text-wrap: pretty; }
.bib-lemma { font-family: var(--serif); font-size: 1.12em; color: var(--fg); }
@media (min-width: 600px) { .bib-note li { grid-template-columns: 92px minmax(0, 1fr); } }

.bib-back { margin-top: 14px; }
.bib-back .more { color: var(--fg-2); }
.bib-back .more:hover { color: var(--gold); }
.bib-back .i { color: var(--gold); }
.kind-chapter .pager { max-width: var(--col); }

/* ---------- book page ---------- */
.bib-about__grid { display: grid; gap: 22px; align-items: start; }
@media (min-width: 900px) { .bib-about__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); } }
.bib-intro .scard__b p { font-size: 17px; line-height: 1.65; }
.bib-intro .card__k { color: var(--marian); }
.bib-rows { margin-top: 4px; }
.bib-row { position: relative; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 3px 14px; padding: 16px 0 17px; border-top: 1px solid var(--line); break-inside: avoid; }
.bib-row__n { grid-row: span 2; align-self: start; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  font: 600 1.2rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--gold);
  background: color-mix(in srgb, var(--gold-fill) 9%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 32%, transparent); transition: background-color .25s; }
.bib-row__t { font: 600 1.3rem/1.2 var(--serif); color: var(--fg); align-self: center; }
.bib-row__t a { text-decoration: none; }
.bib-row__t a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.bib-row__v { align-self: center; font-size: 13.5px; color: var(--dim); white-space: nowrap; }
.bib-row__s { grid-column: 2 / -1; font-size: 15.5px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.bib-row__s--none { color: var(--dim); font-style: italic; }
.bib-row:hover .bib-row__t { color: var(--gold); }
.bib-row:hover .bib-row__n { background: color-mix(in srgb, var(--gold-fill) 18%, transparent); }
@media (min-width: 1000px) { .bib-rows { columns: 2; column-gap: clamp(36px, 4vw, 64px); } }
.bib-sec > .src-line { margin-top: 18px; }
.bib-qmore__h { margin-top: 28px; color: var(--fg-2); }
.bib-qmore { margin-top: 8px; display: grid; gap: 0 32px; }
.bib-qmore li { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 14px; padding: 9px 0; border-top: 1px solid var(--line); }
.bib-qmore a { font-weight: 650; color: var(--gold); text-decoration: none; min-height: 28px; display: inline-flex; align-items: center; }
.bib-qmore a:hover { text-decoration: underline; }
.bib-qmore span { font-size: 14.5px; color: var(--dim); }
@media (min-width: 760px) { .bib-qmore { grid-template-columns: 1fr 1fr; } }
.bib-masstable td:last-child a { font-weight: 650; white-space: nowrap; }
@media (max-width: 599.98px) {
  /* stacked: date, celebration, then reading + citation — no sideways scroll */
  .bib-masstable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .bib-masstable, .bib-masstable tbody { display: block; }
  .bib-masstable tr { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; padding: 13px 18px 14px; }
  .bib-masstable tbody tr + tr { border-top: 1px solid var(--line); }
  .bib-masstable tbody tr + tr > * { border-top: 0; }
  .bib-masstable th, .bib-masstable td { display: block; padding: 0; }
  .bib-masstable th { flex: 1 0 100%; font-size: 14px; letter-spacing: .02em; }
  .bib-masstable td:nth-of-type(1) { flex: 1 0 100%; margin: 3px 0 2px; color: var(--fg); }
  .bib-masstable td:nth-of-type(2) { color: var(--dim); }
  .bib-masstable td:last-child a { white-space: normal; }
  .bib-masstable a { display: inline-block; padding: 12px 0; margin: -12px 0; }
}
.bib-read { margin-top: 0; }               /* one-chapter books: the text follows the page header */

/* ---------- hub ---------- */
.bib-stats { margin: calc(-1 * clamp(8px, 2vw, 22px)) 0 28px; }
.bib-jump { margin-bottom: clamp(48px, 7vw, 88px); }
.bib-canon { display: grid; gap: 30px; margin-bottom: clamp(64px, 9vw, 120px); }
.bib-canon__head .h2 { margin-bottom: 20px; }
@media (min-width: 1024px) {
  .bib-canon { grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .bib-canon__head { position: sticky; top: calc(var(--head-h) + 28px); }
}
.bib-test + .bib-test { margin-top: clamp(72px, 9vw, 120px); }
.bib-div + .bib-div { margin-top: clamp(40px, 5vw, 64px); }
.bib-div__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.bib-div__head .dim { font-size: 15px; }
.bib-books { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr)); }
.bk { position: relative; display: flex; flex-direction: column; padding: 18px 20px 19px; border-radius: 18px; background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent); transition: transform .35s var(--ease), box-shadow .35s; }
.bk:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--rim), inset 0 1px 0 var(--rim), 0 18px 36px -22px var(--shadow); }
.bk--dc { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 50%, transparent), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent);
  background: linear-gradient(160deg, color-mix(in srgb, var(--gold-fill) 9%, transparent), transparent 60%), var(--card-2); }
.bk__k { display: flex; align-items: center; gap: 10px; font: 700 11px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.bk__i { display: grid; place-items: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 8px; font: 600 14px/1 var(--serif); letter-spacing: 0;
  color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 35%, transparent); font-variant-numeric: lining-nums; }
.bk__t { margin-top: 10px; font: 600 1.55rem/1.1 var(--serif); color: var(--fg); }
.bk__t a { text-decoration: none; }
.bk__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.bk:hover .bk__t a { color: var(--gold); }
.bk__also { margin-top: 2px; font: italic 500 1.02rem/1.3 var(--serif); color: var(--dim); }
.bk__m { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; font-size: 14px; color: var(--dim); }
.bk__x { margin-top: 10px; font-size: 15px; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.bib-hubnote { margin-top: clamp(56px, 7vw, 88px); max-width: calc(72 * var(--ch)); }
@media (max-width: 559.98px) {
  .bk { padding: 13px 16px 14px; border-radius: 16px; }
  .bk__t { margin-top: 6px; font-size: 1.36rem; }
  .bk__m { margin-top: 4px; font-size: 13.5px; }
  .bk__x { margin-top: 6px; font-size: 14.5px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .bib-books { gap: 8px; }
}