/* ==========================================================================
   Catholic Study Library — theme.css
   The single source of style for the whole theme.

   Ported from the locked wireframes ("Style Guide", "Today", the interpretation
   & doctrine timelines, "Saint Page", "Scripture Reader"). The wireframes used
   inline styles; here those are consolidated into the component classes the
   contract names (.quote / .card / .timeline / .vhub / provenance + tradition
   badges / .seam / .lens-control etc.), so the data-driven PHP markup and this
   stylesheet match. Warm, book-like, mobile-first; the sources are the stars,
   the apparatus recedes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS  (the Style Guide :root — pinned by the build contract)
   -------------------------------------------------------------------------- */
:root{
  /* type */
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --ui:'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --mono:ui-monospace, Menlo, Monaco, 'SF Mono', monospace;

  /* paper & ink */
  --paper:#FAF6EE;          /* cards, header, raised surfaces */
  --page:#EFEADD;           /* the page field */
  --ink:#322E29;            /* primary text */
  --ink-soft:#6E685C;       /* apparatus, secondary */
  --ink-faint:#837A69;      /* labels, the quietest TEXT (≥4.5:1 on paper — WCAG AA) */
  --hairline-ink:#A89E8B;   /* decorative dots/rules only — never text */

  /* accent (single tweakable token — Oxblood default) */
  --accent:#8A3A2C;
  --soft:rgba(138,58,44,.10);
  --on-accent:#fff;         /* text set ON the accent (buttons, active chips) */

  /* rules */
  --rule:rgba(40,36,30,.16);
  --rule-soft:rgba(40,36,30,.09);

  /* liturgical / semantic */
  --lit:#5E6B47;            /* season green */
  --red:#9B3B33;
  --violet:#6E3D56;

  /* layout */
  --maxw:1440px;            /* header / full-width row */
  --measure:726px;          /* reading measure */
  --pad-x:40px;             /* page gutter */
  --reader-fs:16.5px;       /* base reading size; A-/A+ multiply via --reader-scale */
  --reader-scale:1;
}

/* accent variants — set via a body class (the wireframe's enum prop) */
body.accent-blue{ --accent:#284A6E; --soft:rgba(40,74,110,.09); }
body.accent-plum{ --accent:#6E3D56; --soft:rgba(110,61,86,.11); }

/* --------------------------------------------------------------------------
   2. BASE / RESET / TYPOGRAPHY
   -------------------------------------------------------------------------- */
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--page);
  color:var(--ink);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; height:auto; display:block; }
sup{ font-feature-settings:"sups"; }

::-webkit-scrollbar{ width:9px; height:9px; }
::-webkit-scrollbar-thumb{ background:rgba(40,36,30,.20); border-radius:5px; }
::-webkit-scrollbar-track{ background:transparent; }

/* accessibility */
.screen-reader-text{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent); color:var(--on-accent); padding:9px 16px;
  font:600 13px var(--ui); border-radius:0 0 8px 0;
}
.skip-link:focus{ left:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }

/* shared display headings (Newsreader) */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--ink); font-weight:500; margin:0; }
.h1{ font:500 46px/1.05 var(--serif); }
.h2{ font:500 26px/1.2 var(--serif); }
.lede{ font:400 20px/1.4 var(--serif); font-style:italic; color:var(--ink-soft); }

/* mono section labels — used everywhere (uppercase eyebrows) */
.eyebrow,
.label-mono{
  font:600 9.5px var(--ui);
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint);
}
.eyebrow--accent{ color:var(--accent); letter-spacing:.16em; font-size:10.5px; }
.kicker{ font:500 11px var(--mono); letter-spacing:.04em; color:var(--ink-faint); }

/* page wrappers (the wireframes' centred columns) */
.page{ min-height:100vh; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad-x); padding-right:var(--pad-x); }
.col{ max-width:884px; margin:0 auto; padding:34px 28px 96px; }
.col--narrow{ max-width:920px; }
.measure{ max-width:var(--measure); }

/* --------------------------------------------------------------------------
   3. HEADER  (sticky: wordmark · search pill · menu, then context sub-bar)
   -------------------------------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:30;
  background:var(--paper); border-bottom:1px solid var(--rule);
}
.site-header__bar{
  max-width:var(--maxw); margin:0 auto;
  padding:12px var(--pad-x);
  display:flex; align-items:center; gap:28px;
}
.wordmark{ display:flex; align-items:center; gap:11px; flex:0 0 auto; }
.wordmark__mark{
  width:26px; height:26px; border-radius:7px; flex:0 0 auto;
  background:var(--accent); color:var(--on-accent);
  display:flex; align-items:center; justify-content:center;
  font:600 13px var(--serif);
}
.wordmark__text{ display:flex; flex-direction:column; line-height:1.05; }
.wordmark__name{ font:600 12.5px var(--ui); letter-spacing:.02em; color:var(--ink); }
.wordmark__sub{ font:500 8.5px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); }

.header-search{
  flex:1; max-width:460px; margin:0 auto;
  display:flex; align-items:center; gap:10px;
  background:var(--page); border:1px solid var(--rule); border-radius:22px;
  padding:9px 16px;
}
.header-search svg{ flex:0 0 auto; }
.header-search__ph{ font:400 13px var(--ui); color:var(--ink-faint); }
.header-search input{
  flex:1; min-width:0; border:0; background:transparent;
  font:400 13px var(--ui); color:var(--ink);
}
.header-search input::placeholder{ color:var(--ink-faint); }
.header-search input:focus{ outline:none; }

.header-menu{ flex:0 0 auto; }

/* context / breadcrumb sub-bar */
.subbar{ border-top:1px solid var(--rule-soft); background:var(--page); }
.subbar__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:9px var(--pad-x);
  display:flex; align-items:center; gap:9px;
  font:500 12px var(--ui); color:var(--ink-soft);
}
.crumb{ color:inherit; }
.crumb--here{ color:var(--ink); }
.crumb__sep{ color:var(--ink-faint); }
.crumb__back{ color:var(--accent); }

/* the liturgical locator that rides the sub-bar on Today */
.lit-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--lit); flex:0 0 auto; }
.subbar__day{ color:var(--ink); }
.subbar__spacer{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.subbar__date{ display:inline-flex; align-items:center; gap:5px; color:var(--accent); }
.tag-mono{
  font:600 9px var(--mono); letter-spacing:.04em; color:var(--ink-faint);
  border:1px solid var(--rule); border-radius:3px; padding:3px 6px; white-space:nowrap;
}

/* --------------------------------------------------------------------------
   4. SITE-MENU drawer  (web component <csl-site-menu>; port of site-menu.js)
   -------------------------------------------------------------------------- */
.menu-trigger{
  display:inline-flex; align-items:center; gap:7px;
  font:600 12px var(--ui); color:var(--ink);
  background:var(--paper); border:1px solid var(--rule); border-radius:8px;
  padding:8px 13px; cursor:pointer;
}
.menu-trigger:hover{ border-color:var(--accent); color:var(--accent); }
.menu-trigger svg{ stroke:currentColor; }

.menu-overlay{
  position:fixed; inset:0; z-index:60;
  background:rgba(34,26,18,.36);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.menu-overlay.is-open{ opacity:1; pointer-events:auto; }
.menu-panel{
  position:fixed; top:0; right:0; bottom:0; z-index:61;
  width:min(360px,90vw);
  background:var(--paper); border-left:1px solid var(--rule);
  box-shadow:-18px 0 44px rgba(40,30,16,.22);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
}
.menu-panel.is-open{ transform:translateX(0); }
.menu-panel__head{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 22px; border-bottom:1px solid var(--rule);
}
.menu-panel__title{ font:600 10px var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.menu-panel__close{ font:500 20px var(--ui); color:var(--ink-soft); cursor:pointer; line-height:1; background:none; border:0; }
.menu-nav{ flex:1; overflow:auto; padding:14px 22px 28px; }
.menu-nav a{
  display:block; padding:11px 0; border-top:1px solid var(--rule-soft);
  font:500 18px var(--serif); color:var(--ink);
}
.menu-nav a:first-child{ border-top:0; }
.menu-nav a:hover{ color:var(--accent); }
.menu-nav__group{ font:600 9.5px var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin:18px 0 4px; }

/* --------------------------------------------------------------------------
   5. PROVENANCE BADGES  (cardinal principle: solid=hosted PD, dashed=link-out)
   -------------------------------------------------------------------------- */
.prov{
  display:inline-block; white-space:nowrap;
  font:500 10px var(--mono);
  color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:3px;
  padding:3px 6px;
}
.prov--solid{ border-style:solid; color:var(--ink-soft); }
.prov--dashed{ border-style:dashed; color:var(--ink-faint); }
.prov--sm{ font-size:8.5px; padding:2px 5px; }

/* --------------------------------------------------------------------------
   6. TRADITION BADGES  (doctrine timeline — muted, equal-weight; none "wins")
   -------------------------------------------------------------------------- */
.trad{
  display:inline-flex; align-items:center; gap:6px;
  font:600 9px var(--ui); letter-spacing:.1em; text-transform:uppercase;
  border:1px solid; border-radius:11px;
  padding:3px 10px 3px 8px;
}
.trad__dot{ width:7px; height:7px; border-radius:50%; flex:0 0 auto; background:currentColor; }
/* each tradition: equal muted hue, set on the badge; dot inherits via currentColor */
.trad--patristic{ color:#615942; background:rgba(110,101,82,.10); border-color:rgba(110,101,82,.30); }
.trad--catholic { color:#7C4553; background:rgba(140,87,101,.10); border-color:rgba(140,87,101,.30); }
.trad--orthodox { color:#3F5C61; background:rgba(78,110,116,.10); border-color:rgba(78,110,116,.30); }
.trad--lutheran { color:#4D5D7C; background:rgba(94,110,140,.10); border-color:rgba(94,110,140,.30); }
.trad--reformed { color:#596545; background:rgba(110,122,86,.10); border-color:rgba(110,122,86,.30); }
.trad--anglican { color:#6B5879; background:rgba(126,106,140,.11); border-color:rgba(126,106,140,.30); }

/* --------------------------------------------------------------------------
   7. BUTTONS / CHIPS / TABS / PILLS
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px var(--ui); border-radius:22px; padding:9px 16px; cursor:pointer;
  border:1px solid transparent;
}
.btn--primary{ color:var(--on-accent); background:var(--accent); }
.btn--secondary{ color:var(--accent); border-color:var(--rule); background:transparent; }
.btn--secondary:hover{ border-color:var(--accent); }
.link-arrow{ font:600 12px var(--ui); color:var(--accent); cursor:pointer; }
.link-arrow:hover{ text-decoration:underline; }

.chip{
  font:600 10.5px var(--ui); border-radius:20px; padding:5px 11px;
  color:var(--ink-soft); border:1px solid var(--rule); background:var(--paper); cursor:pointer;
}
.chip.is-active{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }
.chip--scripture{ color:var(--lit); border-color:rgba(94,107,71,.4); }

/* a pill toggle group (translation switcher, tier toggle) */
.pillset{ display:inline-flex; align-items:center; border:1px solid var(--rule); border-radius:7px; overflow:hidden; }
.pillset__pill{
  font:600 10.5px var(--ui); padding:6px 10px; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:0;
}
.pillset__pill + .pillset__pill{ border-left:1px solid var(--rule); }
.pillset__pill.is-active{ background:var(--accent); color:var(--on-accent); }

/* tabs (round, used in the verse-hub) */
.tabs{ display:flex; gap:6px; flex-wrap:wrap; }
.tab{
  font:600 10.5px var(--ui); border-radius:20px; padding:5px 10px; cursor:pointer;
  color:var(--ink-soft); border:1px solid var(--rule); background:transparent;
}
.tab.is-active{ color:var(--on-accent); background:var(--accent); border-color:var(--accent); }

/* text-size stepper A- / A+ */
.size-step{ display:flex; align-items:center; gap:12px; font:600 12px var(--ui); color:var(--ink-soft); }
.size-step button{ background:none; border:0; cursor:pointer; color:inherit; font:inherit; padding:8px 10px; margin:-6px -4px; border-radius:7px; }
.size-step .is-up{ font-size:15px; color:var(--ink); }

/* --------------------------------------------------------------------------
   8. QUOTE CARD  (the atom of the library: verbatim hero + quiet apparatus)
   parts/quote-card.php
   -------------------------------------------------------------------------- */
.quote{
  background:var(--paper); border:1px solid var(--rule); border-radius:9px;
  padding:17px 19px; margin-bottom:14px;
}
a.quote, .quote--link{ cursor:pointer; display:block; color:inherit; }
.quote--link:hover{ border-color:var(--accent); box-shadow:0 4px 16px rgba(40,30,16,.08); }
.quote--inset{ background:var(--page); }   /* nested (hub) variant */

.quote__top{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:11px; flex-wrap:wrap;
}
.quote__author{ font:600 13px var(--ui); color:var(--ink); }
.quote__author .dates{ color:var(--ink-faint); font-weight:500; }
.quote__year{ font:500 11px var(--mono); color:var(--ink-faint); }
.quote__note{ font:400 11.5px var(--serif); font-style:italic; color:var(--ink-faint); margin-top:3px; }

/* the verbatim body = the hero */
.quote__body{ font:400 19px/1.5 var(--serif); color:var(--ink); }
.quote__body--lg{ font-size:20px; line-height:1.6; }
.quote--inset .quote__body{ font-size:14.5px; line-height:1.52; }

/* term chip (e.g. transubstantiatio) */
.quote__term{
  display:inline-block; margin-top:11px;
  font:600 11px var(--mono); color:var(--accent);
  background:var(--soft); border-radius:5px; padding:4px 9px;
}

/* apparatus row: italic locus + provenance badge */
.quote__app{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:13px; flex-wrap:wrap;
}
.quote__locus{ font:400 12px var(--serif); font-style:italic; color:var(--ink-soft); }

/* the single "read in context" / cite footer */
.quote__foot{
  margin-top:11px; padding-top:11px; border-top:1px solid var(--rule-soft);
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
.quote__context{ font:600 11.5px var(--ui); color:var(--accent); }
.quote__cite{ font:500 10.5px var(--mono); color:var(--ink-faint); cursor:pointer; padding:7px 8px; margin:-7px -8px; }
.quote__cite:hover{ color:var(--accent); }

/* a generic raised card / panel */
.card{ background:var(--paper); border:1px solid var(--rule); border-radius:11px; padding:18px 19px; }
.card--page{ background:var(--page); }
.card--dashed{ border-style:dashed; }
.card__label{ font:600 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:13px; }
.section-rule{ margin-top:30px; padding-top:16px; border-top:1px solid var(--rule); font:400 11.5px/1.55 var(--serif); color:var(--ink-faint); }

/* --------------------------------------------------------------------------
   9. THE SPINE / TIMELINE  (template-spine.php: era-banded quote cards)
   -------------------------------------------------------------------------- */
.timeline{ position:relative; margin-top:14px; padding-left:4px; }
.timeline__rail{ position:absolute; left:11px; top:14px; bottom:18px; width:2px; background:var(--rule); }

/* era band header */
.era-band{
  position:relative; display:flex; align-items:center; gap:13px;
  padding:20px 0 12px;
}
.era-band__node{
  flex:0 0 24px; height:24px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 4px var(--page);
}
.era-band__node--anchor{
  background:var(--page); border:2px solid var(--rule);
  display:flex; align-items:center; justify-content:center;
}
.era-band__node--anchor::after{ content:""; width:7px; height:7px; border-radius:50%; background:var(--hairline-ink); }
.era-band__era{ font:700 12px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.era-band--anchor .era-band__era{ color:var(--ink-soft); font-size:11px; }
.era-band__range{ font:500 11px var(--mono); color:var(--ink-faint); }
.era-band__rule{ flex:1; height:1px; background:var(--rule); }

/* an entry hung off the rail */
.entry{ position:relative; padding-left:40px; margin-bottom:14px; }
.entry__node{
  position:absolute; left:5px; top:7px; width:14px; height:14px; border-radius:50%;
  background:var(--paper); border:2px solid var(--accent); box-shadow:0 0 0 4px var(--page);
}
.entry__node--glossa{ background:var(--page); border:2px dashed var(--hairline-ink); box-shadow:none; }
.entry__node--event{
  border-radius:0; background:var(--accent); border:0; transform:rotate(45deg);
  width:15px; height:15px; left:4px; top:6px; box-shadow:0 0 0 4px var(--page);
}

/* link-out gloss entry (dashed, link-out · Latin) */
.glossa{
  border:1px dashed var(--rule); border-radius:9px; padding:15px 18px;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
}
.glossa__title{ font:600 13px var(--ui); color:var(--ink); }
.glossa__title .year{ color:var(--ink-faint); font-weight:500; }
.glossa__body{ font:400 14.5px/1.45 var(--serif); font-style:italic; color:var(--ink-soft); margin-top:6px; }
.glossa__link{ font:600 12.5px var(--ui); color:var(--accent); margin-top:9px; cursor:pointer; display:inline-block; }

/* event card on the doctrine spine (an event, not a teaching) */
.event{ background:var(--page); border:1px solid var(--rule); border-radius:9px; padding:15px 18px; }
.event__kicker{ font:700 10px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.event__title{ font:500 18px/1.4 var(--serif); color:var(--ink); }
.event__body{ font:400 15px/1.58 var(--serif); color:var(--ink-soft); margin-top:7px; }

/* small note / develops-agrees tag */
.tag{
  font:600 8.5px var(--ui); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-soft);
  border:1px solid var(--rule); border-radius:10px; padding:2px 8px;
}

/* the chronological era-span bar under a timeline title */
.era-span{
  display:flex; align-items:center; gap:8px; margin-top:24px; max-width:600px;
  font:600 9px var(--mono); color:var(--ink-faint);
}
.era-span__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--accent); }
.era-span__dot--ring{ background:transparent; border:1px solid var(--accent); }
.era-span__dot--modern{ background:transparent; border:1px dashed var(--hairline-ink); }
.era-span__line{ flex:1; height:1px; background:var(--rule); }

/* --------------------------------------------------------------------------
   10. LENS CONTROL  (client-side re-sort/re-group of cards in the DOM)
   parts/lens-control.php
   -------------------------------------------------------------------------- */
.lens-control{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:24px 0 6px;
}
.lens-control__label{ font:600 9.5px var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.lens-control .chip{ font-size:11px; }

/* --------------------------------------------------------------------------
   11. HONEST SEAM  (template parts/honest-seam.php — never pad; say so)
   variants: thin · linkout · no-writings · modern
   -------------------------------------------------------------------------- */
.seam{
  margin-top:8px; padding:20px 22px;
  background:var(--paper); border:1px solid var(--rule); border-radius:11px;
}
.seam--thin,
.seam--no-writings{ border-style:dashed; }
.seam__head{ display:flex; align-items:center; gap:13px; margin-bottom:12px; }
.seam__node{ flex:0 0 14px; height:14px; border-radius:50%; border:2px dashed var(--ink-faint); }
.seam__era{ font:700 12px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); }
.seam__body{ font:400 15.5px/1.6 var(--serif); color:var(--ink-soft); max-width:680px; }
.seam__headline{ font:500 21px/1.35 var(--serif); color:var(--ink); }
.seam__links{ display:flex; gap:9px; flex-wrap:wrap; margin-top:14px; }
.seam__link{
  font:600 12px var(--ui); color:var(--accent);
  border:1px solid var(--rule); border-radius:22px; padding:7px 14px; cursor:pointer;
}
.seam__link:hover{ border-color:var(--accent); }
/* "what we do have" list inside a no-writings seam */
.seam__have{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-top:1px solid var(--rule-soft); }
.seam__have-label{ font:400 15px/1.4 var(--serif); color:var(--ink); }
.seam__foot{ font:400 12px/1.5 var(--serif); font-style:italic; color:var(--ink-faint); margin-top:14px; }

/* the centred thin-state card used inside the verse-hub */
.thin-state{
  background:var(--page); border:1px dashed var(--rule); border-radius:8px;
  padding:15px; text-align:center;
}
.thin-state__body{ font:400 14px/1.5 var(--serif); color:var(--ink-soft); }

/* --------------------------------------------------------------------------
   12. "IN SUMMARY" disclosure  (optional · editorial — clearly fenced, hideable)
   -------------------------------------------------------------------------- */
.summary{ margin-top:18px; border:1px solid var(--rule); border-radius:11px; overflow:hidden; background:var(--page); }
.summary__bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:15px 19px; cursor:pointer; list-style:none;
}
.summary__bar::-webkit-details-marker{ display:none; }
.summary__title{ display:flex; align-items:center; gap:10px; font:600 11px var(--ui); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-soft); }
.summary__chev::before{ content:"\25B8"; }              /* ▸ */
.summary[open] .summary__chev::before{ content:"\25BE"; } /* ▾ */
.summary__flag{ font:500 10.5px var(--mono); color:var(--ink-faint); }
.summary__body{ padding:0 19px 18px; }
.summary__prose{ font:400 15.5px/1.65 var(--serif); color:var(--ink); border-top:1px solid var(--rule-soft); padding-top:14px; }
.summary__prose b{ font-weight:600; }
.summary__prose .ref{ color:var(--accent); }
.summary__note{ font:400 12px/1.5 var(--serif); font-style:italic; color:var(--ink-faint); margin-top:11px; }

/* --------------------------------------------------------------------------
   13. TWO-COLUMN LAYOUT  (reading main + floating hub/rail)
   -------------------------------------------------------------------------- */
.layout{ display:flex; gap:60px; max-width:var(--maxw); margin:0 auto; padding:34px var(--pad-x) 92px; align-items:flex-start; }
.layout__main{ flex:1; min-width:0; }
.layout__main > .measure{ max-width:var(--measure); }

/* the floating hub / rail */
.vhub{ flex:0 0 410px; position:sticky; top:92px; align-self:flex-start; }
.vhub--narrow{ flex-basis:372px; }
.vhub--rail{ flex-basis:296px; top:104px; }
.vhub__card{
  display:flex; flex-direction:column; max-height:calc(100vh - 120px);
  background:var(--paper); border:1px solid var(--rule); border-radius:16px;
  box-shadow:0 12px 30px rgba(40,30,16,.13); overflow:hidden;
}
.vhub__scroll{ flex:1; min-height:0; overflow:auto; padding:21px 21px 23px; }
.vhub__hint{ margin-top:12px; text-align:center; font:400 12px/1.5 var(--serif); color:var(--ink-faint); }
.vhub__title{ font:700 10px var(--ui); letter-spacing:.16em; text-transform:uppercase; color:var(--ink); }
.vhub__block{ margin-top:18px; padding-top:16px; border-top:1px solid var(--rule); }
.vhub__block:first-child{ margin-top:14px; padding-top:0; border-top:0; }
.vhub__block-label{ font:600 9.5px/1 var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.vhub__block-label--faint{ color:var(--ink-faint); }
.vhub__prose{ font:400 14.5px/1.55 var(--serif); color:var(--ink); }

/* verse-hub interior (selected-verse panel) */
.vhub__head{ padding:18px 19px 0; }
.vhub__back-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.vhub__back{ font:600 12px var(--ui); color:var(--accent); cursor:pointer; }
.vhub__kind{ font:500 9.5px var(--mono); color:var(--ink-faint); }
.vhub__ref{ font:600 12px var(--ui); color:var(--accent); }
.vhub__sel{ font:400 15px/1.5 var(--serif); font-style:italic; color:var(--ink); padding:5px 0 12px; border-bottom:1px solid var(--rule); }
.vhub__tabs{ display:flex; gap:6px; flex-wrap:wrap; padding:12px 0 13px; }
.vhub__pane-wrap{ position:relative; flex:1; min-height:0; display:flex; flex-direction:column; }
.vhub__pane{ flex:1; min-height:0; overflow:auto; padding:2px 19px 22px; }
.vhub__fade{ position:absolute; left:1px; right:1px; bottom:0; height:40px; background:linear-gradient(transparent, var(--paper)); pointer-events:none; }
.vhub__foot{
  padding:12px 19px; border-top:1px solid var(--rule); background:var(--paper);
  display:flex; align-items:center; justify-content:space-between;
}
.vhub__foot-link{ font:600 12px var(--ui); color:var(--accent); }
.vhub__foot-note{ font:500 9px var(--mono); color:var(--ink-faint); }

/* cross-ref chips & latin gloss rows (hub panes) */
.xrefs{ display:flex; flex-wrap:wrap; gap:8px; }
.xref{ font:500 13px var(--serif); color:var(--ink); border:1px solid var(--rule); border-radius:6px; padding:7px 11px; cursor:pointer; }
.gloss-row{ padding:11px 0; border-bottom:1px solid var(--rule-soft); }
.gloss-row__w{ font:500 15px var(--serif); color:var(--accent); }
.gloss-row__g{ font:400 13.5px var(--serif); color:var(--ink-soft); }

/* "modern" follow-the-sources note inside a hub */
.hub-modern{ margin-top:4px; padding:12px 13px; border:1px solid var(--rule); border-radius:8px; background:var(--paper); }
.hub-modern__note{ font:400 11.5px/1.5 var(--serif); font-style:italic; color:var(--ink-soft); }
.hub-modern__links{ display:flex; gap:7px; flex-wrap:wrap; margin-top:9px; }
.hub-modern__link{ font:600 11px var(--ui); color:var(--accent); border:1px solid var(--rule); border-radius:20px; padding:5px 10px; cursor:pointer; }

/* jump list ("most-read in this chapter") */
.jump{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:7px 0; border-top:1px solid var(--rule-soft); cursor:pointer; }
.jump__ref{ font:500 13px var(--serif); color:var(--accent); }
.jump__gloss{ font:400 12px/1.4 var(--serif); font-style:italic; color:var(--ink-soft); text-align:right; }

/* --------------------------------------------------------------------------
   14. THE READER  (template-reader.php — book-like, tappable verses)
   -------------------------------------------------------------------------- */
.reader-head{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:22px; }
.reader-picker{ display:inline-flex; align-items:center; gap:8px; font:500 22px/1 var(--serif); color:var(--ink); border:1px solid var(--rule); border-radius:9px; padding:9px 13px; cursor:pointer; }
.reader-picker .caret{ color:var(--ink-faint); font-size:13px; }
.reader-chnav{ display:inline-flex; align-items:center; gap:9px; font:500 12px var(--ui); color:var(--ink-soft); }
.reader-chnav__arrow{ cursor:pointer; }
.reader-chnav__num{ font:600 14px var(--serif); color:var(--ink); }
.reader-controls{ display:flex; align-items:center; gap:13px; }

.reader-sectitle{ font:500 13px var(--ui); letter-spacing:.04em; color:var(--ink); margin-bottom:6px; }
.reader-subtitle{ font:400 12.5px/1.5 var(--serif); font-style:italic; color:var(--ink-faint); margin-bottom:18px; }

/* the verse-flow body — font-size driven by --reader-fs * --reader-scale */
.reading{
  font:400 calc(var(--reader-fs) * var(--reader-scale))/1.85 var(--serif);
  color:var(--ink); margin:0 0 26px;
}
.reading--epistle{ margin-bottom:26px; }
.verse{ cursor:pointer; }
.verse:hover{ background:var(--soft); border-radius:4px; }
.verse.is-sel,
.verse.is-key{
  background:var(--soft); border-radius:4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  padding:1px 3px;
}
.verse__n{ font:600 9px var(--ui); color:var(--ink-faint); margin:0 2px 0 4px; }
.verse.is-sel .verse__n,
.verse.is-key .verse__n{ color:var(--accent); }

/* translation note */
.trans-note{ font:400 11.5px/1.4 var(--serif); font-style:italic; color:var(--ink-faint); margin:-12px 0 18px; }

/* inline mobile hub that opens under a tapped verse (hidden on desktop) */
.mhub{ display:none; }
.mhub__card{
  display:block; background:var(--paper); border:1px solid var(--accent);
  border-radius:11px; box-shadow:0 6px 20px rgba(40,30,16,.10); overflow:hidden;
  margin:12px 0 16px;
}
.mhub__head{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 14px 0; }
.mhub__ref{ font:600 11px var(--ui); color:var(--accent); }
.mhub__close{ font:500 16px var(--ui); color:var(--ink-faint); cursor:pointer; line-height:1; }
.mhub__tabs{ display:flex; gap:5px; flex-wrap:wrap; padding:11px 14px 12px; }
.mhub__pane{ display:block; max-height:228px; overflow:auto; padding:0 14px 14px; }
.mhub__link{ display:block; border-top:1px solid var(--rule); padding:11px 14px; font:600 11.5px var(--ui); color:var(--accent); }
.mhint{ display:none; }

/* --------------------------------------------------------------------------
   15. SCRIPTURE-AT-ROOT block  (doctrine timeline: DR over Greek, contested words)
   -------------------------------------------------------------------------- */
.scripture-root{ margin-top:30px; }
.scripture-root__tabs{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:12px; }
.scripture-panel{ border:1px solid var(--rule); border-radius:11px; background:var(--paper); overflow:hidden; }
.scripture-panel__layer{ padding:17px 20px; }
.scripture-panel__layer + .scripture-panel__layer{ border-top:1px solid var(--rule-soft); }
.scripture-panel__lang{ font:600 9px var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:9px; }
.scripture-panel__text{ font:400 20px/1.6 var(--serif); color:var(--ink); }
.scripture-panel__text--grk{ line-height:1.65; }
.scripture-panel__key{ background:var(--soft); color:var(--accent); border-radius:4px; padding:0 5px; }
.scripture-panel__key--en{ font-style:italic; }
.scripture-panel__translit{ font:400 12px var(--mono); color:var(--ink-faint); margin-top:8px; }
.scripture-panel__note{ background:var(--page); border-top:1px solid var(--rule-soft); padding:12px 20px; font:400 13px/1.5 var(--serif); font-style:italic; color:var(--ink-soft); }

/* contested-words tricolumn */
.contested{ display:flex; border:1px solid var(--rule); border-radius:10px; overflow:hidden; background:var(--paper); }
.contested__cell{ flex:1; padding:13px 16px; }
.contested__cell + .contested__cell{ border-left:1px solid var(--rule); }
.contested__word{ font:500 16px var(--serif); font-style:italic; color:var(--accent); }
.contested__tag{ font:600 9px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px; }
.contested__gloss{ font:400 12.5px/1.4 var(--serif); color:var(--ink-soft); margin-top:5px; }

/* --------------------------------------------------------------------------
   16. IN-CONTEXT READER OVERLAY  (right-slide panel: passage in its place)
   -------------------------------------------------------------------------- */
.ctx-overlay{ position:fixed; inset:0; z-index:50; }
.ctx-overlay__scrim{ position:absolute; inset:0; background:rgba(34,26,18,.36); }
.ctx-panel{
  position:absolute; top:0; right:0; bottom:0; width:min(560px,94vw);
  background:var(--paper); border-left:1px solid var(--rule);
  box-shadow:-18px 0 44px rgba(40,30,16,.22);
  display:flex; flex-direction:column;
}
.ctx-panel__head{ padding:20px 26px 16px; border-bottom:1px solid var(--rule); }
.ctx-panel__top{ display:flex; align-items:center; justify-content:space-between; }
.ctx-panel__close{ font:500 18px var(--ui); color:var(--ink-soft); cursor:pointer; background:none; border:0; }
.ctx-panel__author{ font:500 22px/1.25 var(--serif); color:var(--ink); margin-top:12px; }
.ctx-panel__author .dates{ color:var(--ink-faint); font-size:15px; }
.ctx-panel__work{ font:400 14px/1.4 var(--serif); font-style:italic; color:var(--ink-soft); margin-top:6px; }
.ctx-panel__body{ flex:1; min-height:0; overflow:auto; padding:24px 26px; }
.ctx-panel__quote{ background:var(--soft); border-left:2px solid var(--accent); border-radius:4px; padding:14px 16px; font:400 18px/1.6 var(--serif); color:var(--ink); }
.ctx-panel__skel{ display:flex; flex-direction:column; gap:9px; }
.ctx-panel__skel span{ height:11px; border-radius:3px; background:var(--rule-soft); }
.ctx-panel__foot{ padding:14px 26px; border-top:1px solid var(--rule); display:flex; align-items:center; justify-content:space-between; }

/* --------------------------------------------------------------------------
   17. TODAY  (front-page.php — collect, saint of the day, fathers)
   -------------------------------------------------------------------------- */
.today-collect__label{ font:600 9.5px/1 var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
.today-collect__text{ font:400 14.5px/1.55 var(--serif); font-style:italic; color:var(--ink); }

.saint-day{ display:flex; gap:14px; align-items:flex-start; }
.portrait{
  flex:0 0 76px; height:96px; border-radius:6px; border:1px solid var(--rule);
  background-image:repeating-linear-gradient(45deg,var(--rule) 0,var(--rule) 1px,transparent 1px,transparent 8px);
  display:flex; align-items:flex-end; justify-content:center; padding-bottom:5px;
  overflow:hidden;
}
.portrait--lg{ flex-basis:142px; height:182px; border-radius:8px; }
.portrait__ph{ font:500 7.5px var(--mono); color:var(--ink-faint); }
.portrait img{ width:100%; height:100%; object-fit:cover; }

.saint-day__name{ font:500 19px/1.18 var(--serif); color:var(--ink); }
.saint-day__meta{ display:flex; align-items:center; gap:6px; font:500 11.5px var(--ui); color:var(--ink-soft); margin-top:5px; }
.saint-day__patron{ font:400 11.5px/1.4 var(--ui); color:var(--ink-faint); margin-top:6px; }
.saint-day__known-label{ font:600 9px/1 var(--ui); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:14px 0 6px; }
.saint-day__known{ font:400 13.5px/1.5 var(--serif); color:var(--ink); }
.saint-day__quote{ background:var(--page); border:1px solid var(--rule); border-radius:7px; padding:12px 13px; margin-top:11px; }
.saint-day__quote-text{ font:400 14px/1.5 var(--serif); font-style:italic; color:var(--ink); }
.saint-day__quote-foot{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:9px; }

.month-row{ display:flex; align-items:center; justify-content:space-between; cursor:pointer; }
.month-row__label{ font:600 9.5px/1 var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); }
.month-row__title{ font:400 14px/1.3 var(--serif); color:var(--ink); margin-top:4px; }
.month-row__caret{ font:400 18px var(--ui); color:var(--ink-faint); }

/* --------------------------------------------------------------------------
   18. SAINT PAGE  (single-figure.php — hero + tiers + at-a-glance rail)
   -------------------------------------------------------------------------- */
.figure-hero{ display:flex; gap:30px; align-items:flex-start; flex-wrap:wrap; }
.figure-hero__body{ flex:1; min-width:280px; }
.figure-badges{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:13px; }
.figure-badge{
  font:600 9.5px var(--ui); letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--rule); border-radius:11px; padding:5px 11px; color:var(--ink-soft);
}
.figure-badge--lead{ color:var(--accent); background:var(--soft); border-color:transparent; }
.figure-hero__name{ font:500 42px/1.05 var(--serif); color:var(--ink); margin:0; }
.figure-hero__title{ font:400 18px/1.35 var(--serif); font-style:italic; color:var(--ink-soft); margin-top:8px; }
.figure-hero__meta{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; margin-top:14px; font:500 12.5px var(--ui); color:var(--ink-soft); }
.figure-hero__meta .dot{ width:4px; height:4px; border-radius:50%; background:var(--ink-faint); }
.figure-hero__feast-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:#fff; border:1px solid var(--rule); }

.figure-cols{ display:flex; gap:48px; align-items:flex-start; margin-top:34px; }
.figure-main{ flex:1; min-width:0; max-width:660px; }
.figure-intro{ font:400 19px/1.65 var(--serif); color:var(--ink); margin:0; }

.figure-section{ margin-top:30px; }
.figure-section--accent .figure-section__label{ color:var(--accent); }
.figure-section__label{ font:600 9.5px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:12px; }

.known-for{ display:flex; gap:8px; flex-wrap:wrap; }
.known-for__item{ font:400 13.5px var(--serif); color:var(--ink); border:1px solid var(--rule); border-radius:7px; padding:7px 13px; background:var(--paper); }

.conversion-row{
  display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:18px;
  background:var(--page); border:1px solid var(--rule); border-radius:9px; padding:13px 16px; cursor:pointer;
}
.conversion-row:hover{ border-color:var(--accent); }
.conversion-row__label{ font:600 9px var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:4px; }
.conversion-row__text{ font:400 15px/1.35 var(--serif); color:var(--ink); }

/* writings list */
.writings__item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 2px; border-top:1px solid var(--rule-soft); }
.writings__title{ font:500 16px/1.25 var(--serif); color:var(--ink); }
.writings__meta{ font:400 11.5px var(--ui); color:var(--ink-faint); margin-top:3px; }

/* the at-a-glance / appears-in / collect rail */
.rail__card{ border:1px solid var(--rule); border-radius:11px; background:var(--paper); padding:18px 19px; }
.rail__card + .rail__card{ margin-top:16px; }
.rail__card--collect{ background:var(--page); }
.rail__label{ font:600 9.5px var(--ui); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:13px; }
.rail__label--accent{ color:var(--accent); margin-bottom:10px; }
.fact{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:8px 0; border-top:1px solid var(--rule-soft); }
.fact:first-of-type{ border-top:0; }
.fact__k{ font:500 11px var(--ui); color:var(--ink-faint); flex:0 0 auto; }
.fact__v{ font:400 13px/1.35 var(--serif); color:var(--ink); text-align:right; }
.appears-in__item{ font:500 13px var(--ui); color:var(--accent); cursor:pointer; padding:5px 0; }
.collect__text{ font:400 14.5px/1.6 var(--serif); font-style:italic; color:var(--ink); }

/* wireframe tier toggle (dev compare; safe to keep, harmless in prod) */
.tier-toggle{ display:flex; align-items:center; gap:13px; flex-wrap:wrap; border:1px dashed var(--rule); border-radius:9px; padding:11px 15px; margin-bottom:30px; background:var(--paper); }

/* --------------------------------------------------------------------------
   19. ARCHIVE / SEARCH / GENERIC LISTS
   -------------------------------------------------------------------------- */
.archive-head{ margin-bottom:24px; }
.archive-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.search-form{ display:flex; gap:10px; margin-bottom:26px; }
.search-form input{ flex:1; border:1px solid var(--rule); border-radius:22px; padding:11px 18px; font:400 15px var(--serif); background:var(--paper); color:var(--ink); }
.search-form input:focus{ outline:none; border-color:var(--accent); }
.result{ padding:16px 0; border-top:1px solid var(--rule-soft); }
.result__title{ font:500 19px/1.25 var(--serif); color:var(--ink); }
.result__title:hover{ color:var(--accent); }
.result__excerpt{ font:400 14px/1.55 var(--serif); color:var(--ink-soft); margin-top:5px; }
.empty-state{ padding:48px 0; text-align:center; font:400 16px/1.6 var(--serif); color:var(--ink-soft); }

/* generic prose (page.php, work reader long-form) */
.prose{ font:400 17px/1.7 var(--serif); color:var(--ink); max-width:var(--measure); }
.prose p{ margin:0 0 1.1em; }
.prose h2{ font:500 26px/1.2 var(--serif); margin:1.6em 0 .5em; }
.prose h3{ font:500 20px/1.3 var(--serif); margin:1.4em 0 .4em; }
.prose a{ color:var(--accent); }
.prose a:hover{ text-decoration:underline; }
.prose blockquote{ margin:1.2em 0; padding:2px 0 2px 18px; border-left:2px solid var(--accent); font-style:italic; color:var(--ink-soft); }

/* --------------------------------------------------------------------------
   20. FOOTER  (quiet centred plain-text colophon — no band)
   -------------------------------------------------------------------------- */
.site-footer{ max-width:760px; margin:0 auto; padding:4px var(--pad-x) 46px; text-align:center; }
.colophon{ font:400 11.5px/1.7 var(--serif); color:var(--ink-faint); }
.colophon a{ color:var(--ink-soft); text-decoration:underline; }

/* --------------------------------------------------------------------------
   21. MOBILE  (max-width:820px — stack two-col, inline verse-hub, hide search)
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  :root{ --pad-x:20px; --reader-fs:16px; }

  .site-header__bar{ padding:12px 18px; gap:14px; }
  .header-search{ display:none; }            /* hide header search on mobile */
  .subbar__inner{ padding:9px 18px; flex-wrap:wrap; }
  .subbar__spacer{ margin-left:0; }

  .col{ padding:28px 20px 72px; }

  /* stack the two-column layouts */
  .layout{ flex-direction:column; gap:22px; padding:28px 20px 72px; }
  .layout__main{ max-width:100%; flex:0 0 auto; }
  .figure-cols{ flex-direction:column; gap:28px; }
  .figure-main{ max-width:100%; }

  /* the floating hub / rail goes static & full-width; desktop vhub hidden */
  .vhub{ display:none; }
  aside.vhub{ display:none !important; }
  .rail{ width:100%; position:static; }
  .figure-cols aside.vhub.vhub--rail{ display:block; position:static; width:100%; max-height:none; top:auto; }

  /* the inline mobile hub & hint appear */
  .mhub{ display:block; }
  .mhint{ display:inline; }

  /* large headings ease down */
  .h1, .figure-hero__name, .seam__headline{ font-size:33px; line-height:1.12; }
  .figure-hero__name{ font-size:33px; }

  /* tri-column blocks stack */
  .contested{ flex-direction:column; }
  .contested__cell + .contested__cell{ border-left:0; border-top:1px solid var(--rule); }

  .archive-grid{ grid-template-columns:1fr; }
}

@media (max-width:560px){
  .saint-day{ flex-direction:column; }
  .reader-head{ gap:10px; }
}

/* respect reduced motion */
@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important; }
}

/* ======================================================================
   22. CANDLELIGHT — the warm dark mode (toggle via .theme-toggle + reader.js)
   The whole UI uses var() tokens, so overriding them under body.theme-dark
   flips every component at once. Warm, low-glare: cream ink on dark parchment.
   ====================================================================== */
.theme-toggle{
  appearance:none; -webkit-appearance:none; background:transparent;
  border:1px solid var(--rule); color:var(--ink-soft);
  width:34px; height:34px; border-radius:50%; font-size:15px; line-height:1;
  cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
  transition:color .15s ease, border-color .15s ease; flex:0 0 auto;
}
.theme-toggle:hover{ color:var(--accent); border-color:var(--accent); }
.theme-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

body.theme-dark{
  color-scheme:dark;
  --page:#1a1612;        /* deep warm parchment-dark */
  --paper:#241f19;       /* cards, lifted a touch */
  --ink:#ece4d6;         /* warm cream text */
  --ink-soft:#b3a892;
  --ink-faint:#9a8f7b;     /* ≥4.5:1 on the dark paper */
  --hairline-ink:#6b6153;  /* decorative only */
  --accent:#d08763;      /* oxblood, lit to a warm clay so it glows on dark */
  --on-accent:#241f19;   /* dark ink on the lit clay (white fails AA there) */
  --soft:rgba(208,135,99,.15);
  --rule:rgba(236,228,214,.15);
  --rule-soft:rgba(236,228,214,.08);
  --lit:#93a06a;         /* candle-green season dot */
  --red:#cf6f5f;
  --violet:#b07f97;
}
/* gently calm bright placeholders/images by candlelight */
body.theme-dark img,
body.theme-dark .portrait__ph,
body.theme-dark .figure-hero__portrait{ filter:brightness(.86) saturate(.94); }
/* keep the provenance + tradition badges legible on dark */
body.theme-dark .prov{ border-color:var(--rule); color:var(--ink-soft); }

/* keep the six equal-weight tradition badges legible by candlelight */
body.theme-dark .trad--patristic{ color:#c6bca4; background:rgba(198,188,164,.12); border-color:rgba(198,188,164,.32); }
body.theme-dark .trad--catholic { color:#d9aab6; background:rgba(217,170,182,.12); border-color:rgba(217,170,182,.32); }
body.theme-dark .trad--orthodox { color:#a9c7cd; background:rgba(169,199,205,.12); border-color:rgba(169,199,205,.32); }
body.theme-dark .trad--lutheran { color:#b3c1dd; background:rgba(179,193,221,.12); border-color:rgba(179,193,221,.32); }
body.theme-dark .trad--reformed { color:#bcc8a2; background:rgba(188,200,162,.12); border-color:rgba(188,200,162,.32); }
body.theme-dark .trad--anglican { color:#c9b6d8; background:rgba(201,182,216,.12); border-color:rgba(201,182,216,.32); }

/* ======================================================================
   23. ADDITIONS (2026-07 audit pass)
   ====================================================================== */

/* --- the <noscript> nav fallback (parts of csl_nav_fallback) --- */
.menu{ position:relative; display:inline-block; }
.menu__trig{
  display:inline-flex; align-items:center; gap:9px; cursor:pointer; list-style:none;
  color:var(--ink); font:600 13px var(--ui);
}
.menu__trig::-webkit-details-marker{ display:none; }
.menu__panel{
  position:absolute; right:0; top:calc(100% + 10px); z-index:50;
  min-width:250px; background:var(--paper); border:1px solid var(--rule);
  border-radius:11px; box-shadow:0 14px 38px rgba(40,30,16,.18); padding:12px 18px 16px;
}
.menu__link{ display:block; font:400 17px/1.3 var(--serif); color:var(--ink); padding:10px 2px; border-top:1px solid var(--rule-soft); }
.menu__link:first-child{ border-top:none; }
.menu__link:hover{ color:var(--accent); }
.menu__free{ margin:14px 0 0; font:400 11px/1.5 var(--serif); font-style:italic; color:var(--ink-faint); }

/* --- hub close/back controls are real <button>s now: keep the quiet look --- */
button.vhub__back,
button.mhub__close{
  appearance:none; -webkit-appearance:none; background:none; border:0;
  font:inherit; color:inherit; cursor:pointer; text-align:left; padding:6px 8px; margin:-6px -8px;
  border-radius:6px;
}
button.mhub__close{ line-height:1; padding:8px 10px; margin:-8px -6px; }

/* --- the provenance badge as a checkable source link --- */
a.prov--link{ cursor:pointer; }
a.prov--link:hover{ color:var(--accent); border-color:var(--accent); }

/* --- Today: the Collect's Latin + provenance note --- */
.today-collect__latin{
  font:400 13px/1.55 var(--serif); font-style:italic; color:var(--ink-soft); margin-top:8px;
}
.today-collect__note{
  font:400 10.5px/1.5 var(--serif); font-style:italic; color:var(--ink-faint); margin-top:7px;
}

/* --- spine: measured witness counts (an honest seam for imbalance) --- */
.witness-counts{
  margin:10px 0 0; font:500 11px var(--mono); letter-spacing:.03em; color:var(--ink-faint);
}

/* --- doctrine spine: contested-words wrapper spacing --- */
.contested-wrap{ margin-top:24px; }
.contested-wrap .eyebrow{ margin-bottom:11px; display:block; }

/* --- compare-translations (template-compare.php + parts/translation-diff.php) --- */
.cmp-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.cmp-col{
  border:1px solid var(--rule);
  border-radius:11px;
  background:var(--paper);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.cmp-col__head{
  padding:14px 16px 13px;
  border-bottom:1px solid var(--rule-soft);
  background:var(--page);
}
.cmp-col__abbr{
  font:600 9px var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px;
}
.cmp-col__name{ font:500 16px/1.2 var(--serif); color:var(--ink); margin-bottom:9px; }
.cmp-col__prov{ display:block; }
.cmp-col__body{ padding:6px 16px 16px; }
.cmp-row{
  padding:11px 0; margin:0;
  font:400 calc(15px * var(--reader-scale))/1.62 var(--serif);
  color:var(--ink);
}
.cmp-row + .cmp-row{ border-top:1px solid var(--rule-soft); }
.cmp-row__n{ font:600 9px var(--ui); color:var(--ink-faint); margin-right:6px; vertical-align:.15em; }
.cmp-row__native{ display:block; font:500 9.5px var(--mono); color:var(--ink-faint); margin-top:5px; }
.cmp-col--latin .cmp-row{ font-style:italic; color:var(--ink-soft); }
mark.diff{
  background:var(--soft); color:var(--accent);
  border-radius:4px; padding:0 4px;
  font-style:italic; -webkit-box-decoration-break:clone; box-decoration-break:clone;
}
.cmp-col--latin mark.diff{ font-style:normal; }
.cmp-legend{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:14px 0 2px; }
.cmp-legend__swatch{
  display:inline-block; width:30px; height:14px; border-radius:4px;
  background:var(--soft); border:1px solid rgba(138,58,44,.28); vertical-align:-2px;
}
.cmp-legend__text{ font:400 12px/1.5 var(--serif); font-style:italic; color:var(--ink-soft); }
.cmp-note{ margin:10px 0 0; font:400 11.5px/1.55 var(--serif); font-style:italic; color:var(--ink-faint); }
.tabs--facets{ align-items:center; gap:8px; }
@media (max-width:880px){
  .cmp-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:560px){
  .cmp-grid{ grid-template-columns:1fr; }
}

/* --- "From the churches": Seth's own photography, used sparingly ---
   Rules (documented in BUILD.md): at most one photograph per page; always a
   caption + credit; never behind text; the reading surfaces stay text-first. */
.place-photo{
  margin-top:16px; border:1px solid var(--rule); border-radius:11px;
  overflow:hidden; background:var(--paper);
}
.place-photo img{ width:100%; display:block; }
.place-photo__ph{
  display:flex; align-items:center; justify-content:center; aspect-ratio:3/2;
  background:var(--page); color:var(--ink-faint);
  font:600 9px var(--mono); letter-spacing:.12em; text-transform:uppercase;
}
.place-photo__meta{ padding:10px 13px 12px; }
.place-photo__caption{ font:400 12.5px/1.5 var(--serif); font-style:italic; color:var(--ink-soft); }
.place-photo__credit{ font:500 8.5px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); margin-top:5px; }

/* --- the day's Gospel, read aloud (LibriVox, public domain) --- */
.listen{ margin:14px 0 6px; }
.listen__label{ font:600 9.5px var(--ui); letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); margin-bottom:7px; }
.listen audio{ width:100%; max-width:420px; height:36px; display:block; }
.listen__note{ font:400 10.5px/1.5 var(--serif); font-style:italic; color:var(--ink-faint); margin-top:5px; }

/* --- time made visible: the gap seam between distant witnesses ---
   Rendered inside the preceding .entry; hidden outside the chronological lens. */
.time-gap{
  display:flex; align-items:center; gap:12px;
  margin:22px 0 4px; padding-left:2px;
}
.time-gap__line{ flex:1; height:0; border-top:1px dashed var(--rule); }
.time-gap__label{
  flex:0 0 auto; font:500 10px var(--mono); letter-spacing:.06em;
  color:var(--ink-faint); font-style:normal;
}
[data-lens="tradition"] .time-gap,
[data-lens="era"] .time-gap{ display:none; }

/* --- the verification ledger line (cite pages) --- */
.verified-line{
  display:inline-flex; align-items:center; gap:7px; margin-top:12px;
  font:500 10px var(--mono); letter-spacing:.05em; color:var(--ink-soft);
}
.verified-line::before{
  content:""; width:7px; height:7px; border-radius:50%;
  background:var(--lit); flex:0 0 auto;
}

/* ======================================================================
   24. PRINT — Today as a clean one-sheet (readings + collect + Fathers)
   ====================================================================== */
@media print{
  body{ background:#fff; color:#000; }
  .site-header, .theme-toggle, .vhub__hint, .menu, .header-menu, .header-search,
  .reader-controls, .pillset, .size-step, .trans-note, .mhub, .lens-control,
  .skip-link, .site-footer .colophon__link, .quote__foot, .listen audio{
    display:none !important;
  }
  .layout{ display:block; }
  .vhub{ position:static; width:auto; max-width:none; margin-top:26px;
         box-shadow:none; border:none; }
  .vhub__card{ box-shadow:none; border:1px solid #bbb; }
  .reading, .quote__body{ color:#000; }
  .quote, .cmp-col, .event, .seam{ break-inside:avoid; border-color:#bbb; }
  a{ color:inherit; }
  .site-footer{ border-top:1px solid #bbb; }
}