/* ---------- type: self-hosted ----------
   These three faces came from Google's font CDN until 2026-09-07. The site
   deliberately runs cookie-free analytics and carries no consent banner, and
   that font request was the last thing on it reporting every visit to a third
   party. It is also two extra connections (one to the CSS host, one to the font host)
   before a single letter can paint.

   Ten files, 208KB, latin + latin-ext. latin-ext is not optional: entries
   transliterate Hebrew and Greek, so a, c, e, o and h with macrons and acutes
   appear in real prose and would otherwise fall back mid-word.

   Libre Franklin is a VARIABLE font — Google serves one file for 400, 600 and
   700, and the three downloads were byte-identical. It is declared once per
   style over the 100-900 range rather than three times over one file.

   Licences: Anton and Libre Franklin are SIL Open Font License 1.1; IBM Plex
   Mono is SIL OFL 1.1. All three permit self-hosting. See assets/fonts/LICENSES.
   ---------- */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/anton-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/libre-franklin-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/libre-franklin-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/libre-franklin-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Libre Franklin';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/libre-franklin-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ActualChristianMusic — "Broadside" letterpress aesthetic
   A two-ink job: letterpress black and one printing red on near-white stock.
   Every color on the site is one of these two inks, a screen (tint) of one,
   or the paper. No third ink, ever. */

:root {
  --paper: #fdfdfb;        /* broadside stock; deliberately not cream */
  --paper-deep: #f4f4f0;
  --ink: #131313;          /* the first ink: true letterpress black */
  --ink-soft: #454545;
  --red: #c8210f;          /* the second ink: printing rubine */
  --red-deep: #9a1408;
  --green: #131313;        /* two-ink press: what used to print green now prints in ink */
  --rule: #131313;         /* letterpress rules run in ink, not a pale tone */
  --serif-display: "Anton", "Arial Narrow", sans-serif;
  --serif-body: "Libre Franklin", Helvetica, sans-serif;
  --mono: "IBM Plex Mono", "Courier New", monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  /* real broadside stock: a flecked paper grain (assets/paper-grain.jpg, base tone
     = --paper, so it degrades to the flat color if the image is missing) */
  background-image: url("assets/paper-grain.jpg");
  background-size: 768px 768px;
}

::selection { background: var(--red); color: var(--paper); }

/* two-ink law: no browser blue anywhere. Prose links print in ink and answer in red. */
a { color: var(--ink); text-decoration-color: var(--red); }
a:hover { color: var(--red); }

/* keyboard users: jump past the nav */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.1rem;
  font-family: var(--mono); font-size: 0.75rem; text-decoration: none;
}
.skip-link:focus { left: 0; }

/* visible focus for keyboard navigation (browser default is easy to lose on paper) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--red); outline-offset: 2px;
}

.sheet {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* ---------- masthead ---------- */

.masthead {
  /* letterpress furniture: a 6px rule over a 1px rule */
  border-bottom: 6px solid var(--ink);
  position: relative;
  padding: 1.1rem 0 0.9rem;
}
.masthead::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px;
  border-top: 1px solid var(--ink);
}
.masthead .sheet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  flex-wrap: wrap;
}
.wordmark {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
}
.wordmark .actual { color: var(--red); }
/* The nav takes its own row on purpose, at every width, and the translation
   toggle rides up beside the wordmark. The sheet is 46rem wide everywhere, so
   the three parts have 688px to share and want 940: wordmark 181, nav 588,
   toggle 171. They have never fitted on one line, and letting flex-wrap decide
   put all three on separate rows — a masthead 154px deep on a desktop. Two rows
   is the most this furniture can do, and pairing the two short things is how. */
.masthead nav { display: flex; gap: 1rem; flex-wrap: wrap; order: 3; width: 100%; }
.tr-toggle { margin-left: auto; }
.masthead nav a {
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--red); }
.masthead nav a.nav-songs {
  background: var(--ink);
  color: var(--paper);
  padding: 0.28rem 0.6rem 0.2rem;
}
.masthead nav a.nav-songs:hover { background: var(--red); color: var(--paper); }
.masthead nav a.here {
  color: var(--red);
  box-shadow: inset 0 -3px 0 var(--red);
}
.masthead nav a.nav-songs.here,
.masthead nav a.nav-songs.here:hover { background: var(--red); color: var(--paper); box-shadow: none; }

/* Bible translation toggle (masthead, entry + archive pages) */
.tr-toggle { display: flex; align-items: center; }
.tr-toggle-label {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin-right: 0.45rem;
}
.tr-toggle button {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.05em;
  padding: 0.25rem 0.5rem; background: var(--paper); border: 1.5px solid var(--ink);
  color: var(--ink-soft); cursor: pointer;
}
.tr-toggle button + button { border-left: none; }
.tr-toggle button:hover { color: var(--red); }
.tr-toggle button.on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.tr-your { font-family: var(--mono); font-size: 0.85em; color: var(--red-deep); }
.tr-lock { font-family: var(--mono); font-size: 0.85em; color: var(--ink-soft); }

/* ---------- hero ---------- */

.hero { padding: 5.5rem 0 4rem; position: relative; overflow: hidden; margin-top: 10px; }

.hero .kicker {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1.6rem;
  animation: rise 0.7s ease both;
}

.hero h1 {
  font-family: var(--serif-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  animation: rise 0.7s 0.08s ease both;
}
/* stacked woodtype: each line its own size, like a real broadside */
.hero h1 .h-line { display: block; font-size: clamp(2rem, 6.4vw, 3.9rem); line-height: 0.95; }
.hero h1 .h-shout { display: block; font-size: clamp(4.2rem, 14.5vw, 8.9rem); line-height: 0.88; color: var(--red); letter-spacing: -0.005em; }
.hero h1 .h-big { display: block; font-size: clamp(2.7rem, 9.4vw, 5.8rem); line-height: 0.94; letter-spacing: -0.01em; }

.hero .dek {
  margin-top: 1.7rem;
  font-size: 1.15rem;
  line-height: 1.5;
  color: var(--ink);
  max-width: 36ch;
  animation: rise 0.7s 0.25s ease both;
}
.hero .dek em { font-style: italic; color: var(--ink); }

/* The rise moves, it does not fade (2026-09-30). It used to start at opacity 0,
   which meant the headline, the largest thing on the page, was invisible until
   the animation ran: that delays the measured first paint, and in a background
   tab, where animations do not run, the hero stayed blank. It also ignored a
   visitor's request for less motion. Now the words are always there. */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero .kicker, .hero h1, .hero .dek { animation: none; }
}



/* compact hero variant — get visitors to the checks fast */
.hero-compact { padding: 2.6rem 0 2.2rem; }
.hero-cta {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.15rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--ink);
  padding: 0.7rem 1.4rem 0.55rem;
  text-decoration: none;
  white-space: nowrap;
}
.hero-cta:hover { background: var(--red); color: var(--paper); }


/* ---------- section scaffolding ---------- */

section.block { padding: 4rem 0; border-top: 1px solid var(--rule); }

.section-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.section-label::after { content: ""; height: 1px; flex: 1; background: var(--rule); }

h2 {
  font-family: var(--serif-display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.05;
  margin-bottom: 1.2rem;
  max-width: 26ch;
}

.block p + p { margin-top: 1rem; }
.block .measure { max-width: 38rem; color: var(--ink-soft); }
.block .measure strong { color: var(--ink); }

/* ---------- the demo diff (hero of the verse-check idea) ---------- */

.diff-card {
  margin-top: 2.5rem;
  border: 1.5px solid var(--ink);
  background: var(--paper-deep);
  box-shadow: 6px 6px 0 rgba(19,19,19,0.12);
  scroll-margin-top: 1.2rem;   /* the "jump to the proof" landing sits off the top edge */
  /* The verdict band's entry animation scales it to 1.12 while it is still at
     opacity 0, and an invisible element is still a wide one: on a 600-768px
     window that pre-animation state made the whole page scroll sideways by
     about 9px until the reader scrolled the card into view. Clipping here
     contains it. The card's own drop shadow paints outside the border box and
     is untouched. */
  overflow: hidden;
}
.diff-card .diff-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.8rem 1.3rem;
  border-bottom: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.diff-card .diff-head .tag { color: var(--red); }
.diff-row { padding: 1.3rem 1.3rem 1.4rem; }
.diff-row + .diff-row { border-top: 1px dashed var(--rule); }
.diff-row .row-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}
.diff-row blockquote {
  font-family: var(--serif-body);
  font-size: 1.15rem;
  line-height: 1.55;
}
.diff-row .verse-text { color: var(--red-deep); }  /* red-letter */
.diff-row .lyric-text .cut { text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.diff-row .lyric-text .add { background: rgba(200,33,15,0.14); padding: 0 0.15em; }
.diff-row .attribution {
  margin-top: 0.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--ink-soft);
}
.diff-verdict {
  padding: 0.9rem 1.3rem;
  border-top: 1.5px solid var(--ink);
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.diff-verdict .mark { color: var(--red); font-weight: 700; }

/* ---------- pillars ---------- */

.pillars {
  margin-top: 2.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 0;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  grid-gap: 1.5px;
}
.pillar { background: var(--paper); padding: 1.6rem 1.4rem 1.8rem; position: relative; }
.pillar .num {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 2.2rem;
  color: var(--red);
  line-height: 1;
}
.pillar h3 {
  font-family: var(--serif-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0.7rem 0 0.5rem;
}
.pillar p { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; }

/* ---------- the standard ---------- */

.standard-list { margin-top: 2.2rem; counter-reset: crit; max-width: 38rem; }
.criterion {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
.criterion:last-child { border-bottom: 1px solid var(--rule); }
.criterion::before {
  counter-increment: crit;
  content: counter(crit, upper-roman) ".";
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--red);
}
.criterion h3 { font-family: var(--serif-display); font-size: 1.15rem; font-weight: 600; margin-bottom: 0.3rem; }
.criterion p { font-size: 0.98rem; color: var(--ink-soft); }

.seal-line {
  margin-top: 2.4rem;
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--red-deep);
}

/* ---------- footer ---------- */

footer {
  border-top: 6px solid var(--ink);
  position: relative;
  margin-top: 4rem;
  padding: 2.2rem 0 3rem;
}
footer::before {
  content: ""; position: absolute; left: 0; right: 0; top: -10px;
  border-top: 1px solid var(--ink);
}
footer .sheet { display: grid; gap: 1rem; }
footer p {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 44rem;
}
footer a { color: var(--red-deep); }

/* ---------- verse-check page extras ---------- */

.page-title { padding: 4rem 0 1rem; }
.page-title h1 {
  font-family: var(--serif-display);
  font-size: clamp(2.2rem, 6vw, 3.4rem);
  font-weight: 600;
  line-height: 1.08;
}
.page-title .dek { margin-top: 1rem; color: var(--ink-soft); font-size: 1.2rem; max-width: 36rem; }

.meta-table { margin: 2rem 0; width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.meta-table th, .meta-table td { text-align: left; padding: 0.55rem 0.8rem; border: 1px solid var(--rule); vertical-align: top; }
.meta-table th {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--paper-deep);
  white-space: nowrap;
}

.demo-banner {
  margin-top: 2rem;
  border: 1.5px dashed var(--red);
  padding: 0.8rem 1.2rem;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--red-deep);
  background: rgba(200,33,15,0.05);
}

/* ---------- bottom line: the plain answer, before the evidence ---------- */

.bottom-line {
  margin: 1.6rem 0 2.4rem;
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--red);
  background: var(--paper-deep);
  padding: 1.1rem 1.4rem 1.2rem;
  box-shadow: 5px 5px 0 rgba(19,19,19,0.12);
}
.bottom-line-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 0.6rem;
}
/* verdict + dwells, stated in the box before the sentence */
.bl-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  margin: 0.15rem 0 0.75rem;
}
/* inline-flow twin of .vc-badge (which is absolutely positioned for thumbnails);
   colour comes from the shared .badge-* classes */
.tier-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.6rem;
  border: 1.5px solid;
}
/* the signature moment: a VERIFIED entry wears an overprinted rubber stamp,
   set at a slight angle, its impression a hair off-register */
.tier-badge.badge-verified {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.34rem 0.9rem 0.22rem;
  border: 4px double var(--red);
  transform: rotate(-2.5deg);
  text-shadow: 1.5px 1px 0 rgba(200,33,15,0.35);
  box-shadow: 1.5px 1px 0 rgba(200,33,15,0.3), inset 1.5px 1px 0 rgba(200,33,15,0.3);
}
.bl-dwells {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.28rem 0.55rem;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  background: var(--paper);
}
.bl-dwells.dwells-god { border-color: var(--green); color: var(--green); }
.bl-dwells.dwells-self { border-color: var(--red); color: var(--red-deep); }
.bl-dwells.dwells-mixed { border-color: var(--red-deep); color: var(--red-deep); }

.bottom-line-text {
  font-family: var(--serif-body);
  font-weight: 700;
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  line-height: 1.45;
  color: var(--ink);
  max-width: 40rem;
}
.bottom-line-note {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  margin-top: 0.75rem;
}
.bl-jump {
  color: var(--red-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bl-jump:hover { color: var(--red); }

/* ---------- verse-check entry extras ---------- */

.video-embed {
  position: relative;
  padding-top: 56.25%;
  border: 1.5px solid var(--ink);
  box-shadow: 6px 6px 0 rgba(19,19,19,0.12);
  margin: 0 0 2rem;
  background: var(--ink);
}
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the lead player on a ✓ VERIFIED proof: the song met the standard, so hearing it
   is the next thing to do. Sits right under the answer, in the red ink. */
.video-embed.video-lead {
  margin-top: 1.6rem;
  border-color: var(--red);
  border-width: 3px;
  box-shadow: 6px 6px 0 rgba(200,33,15,0.18);
}

.song-says p {
  font-family: var(--serif-body);
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--ink);
}
.song-says p + p { margin-top: 0.7rem; }

/* The "watch out" box. Was an accent wash inside a matching accent border, which
   is the default LLM info-box grammar (Design-Theory awards research §16, tell A1).
   Replaced with the house alternative: a heavy left spine on plain paper. Nothing
   else on this site has a tinted fill, and now nor does this. */
.warn-block {
  border: 0;
  border-left: 4px solid var(--red);
  background: none;
  padding: 0.3rem 0 0.4rem 1.3rem;
  margin: 1.5rem 0 2rem;
}
.warn-block .warn-title {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 0.7rem;
}
.warn-block p.measure { color: var(--ink); font-size: 1rem; }
.warn-block p.measure + p.measure { margin-top: 0.7rem; }

.source-list { list-style: none; }
.source-list li {
  font-family: var(--mono);
  font-size: 0.8rem;
  color: var(--ink-soft);
  padding: 0.35rem 0;
  border-top: 1px solid var(--rule);
}
.source-list a { color: var(--red-deep); }

/* ---------- fact tiles (replaces the confusing meta table) ---------- */

.facts-heading { color: var(--ink-soft) !important; margin-top: 2rem; }
.facts-heading::after { background: var(--rule); }
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1.1rem 1.4rem;
  margin: 0 0 2rem;
}
.fact { border-left: 3px solid var(--rule); padding-left: 0.85rem; }
.fact-label {
  display: block;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.25rem;
}
.fact-value { display: block; font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
.fact-value a { color: var(--red-deep); font-size: 0.8em; font-family: var(--mono); text-decoration: none; white-space: nowrap; }
/* The onward links stack under the passage rather than trailing it. The long
   one ("3 more proofs on Revelation 4 →") must be allowed to wrap: nowrap on a
   9.5rem grid column pushed it across the neighbouring cell. */
.fact-value a.fact-link { display: block; margin-top: 0.3rem; }
.fact-value a.fact-link-wrap { white-space: normal; line-height: 1.35; }
.fact-value a:hover { text-decoration: underline; }
.fact-passage { border-left-color: var(--red); }
.fact-passage .fact-value { font-family: var(--mono); font-weight: 600; font-size: 0.95rem; }

/* ---------- criteria grid ---------- */

.crit-block { margin: 0 0 2.2rem; }
.crit-heading {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.crit-heading::after { content: ""; height: 1px; flex: 1; background: var(--rule); }
.crit-heading a { color: var(--red); }

.crit-group-label {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 0.45rem;
}
.crit-group-label + .crit-grid { margin-bottom: 1.4rem; }
.crit-group-note {
  display: block;
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
  margin-top: 0.15rem;
}

.crit-grid {
  display: grid;
  gap: 1.5px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
}
.crit-grid-3 { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); }
.crit-grid-1 { grid-template-columns: 1fr; }
.crit { background: var(--paper); padding: 0.8rem 0.9rem; display: flex; align-items: center; gap: 0.7rem; }
.crit-mark { font-size: 1.25rem; font-weight: 700; line-height: 1; }
/* solid tints: the grid's ink background shows through anything transparent,
   so these are the two inks pre-screened onto the paper color */
.crit.pass { background: #f2f2ef; }
.crit.pass .crit-mark { color: var(--ink); }
.crit.pass .crit-label { color: var(--ink); }
.crit.fail { background: #f9eeea; }
.crit.fail .crit-mark { color: var(--red); }
.crit.fail .crit-label { color: var(--ink); }
.crit.na .crit-mark { color: var(--ink); opacity: 0.35; }
.crit.na .crit-label { opacity: 0.55; }
.crit-label { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); line-height: 1.4; }

.dwells-tag {
  font-family: var(--mono); font-size: 0.8rem; line-height: 1.5;
  border-left: 4px solid var(--ink-soft); padding: 0.5rem 0 0.5rem 0.9rem;
  margin-bottom: 1rem; color: var(--ink);
}
.dwells-tag.dwells-god { border-left-color: var(--green); }
.dwells-tag.dwells-self { border-left-color: var(--red); }
.dwells-tag.dwells-mixed { border-left-color: var(--red-deep); }

.rev-flags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.rev-flag {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.04em;
  color: var(--red-deep); background: rgba(200,33,15,0.07); border: 1.5px solid var(--red);
  padding: 0.3rem 0.6rem;
}

/* ---------- lesson box ---------- */

.lesson-box {
  border: 1.5px solid var(--ink);
  border-left: 6px solid var(--red);
  background: var(--paper-deep);
  padding: 1.3rem 1.5rem 1.4rem;
  margin: 2.2rem 0;
  box-shadow: 5px 5px 0 rgba(19,19,19,0.12);
}
.lesson-box .lesson-kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red-deep);
  margin-bottom: 0.6rem;
}
.lesson-box p.lesson-text { font-family: var(--serif-display); font-size: 1.35rem; line-height: 1.3; font-weight: 600; }
.lesson-box p.lesson-body { margin-top: 0.5rem; font-size: 0.98rem; color: var(--ink-soft); line-height: 1.55; }
.lesson-box .lesson-more { margin-top: 0.7rem; font-family: var(--mono); font-size: 0.72rem; }
.lesson-box .lesson-more a { color: var(--red-deep); }

/* lessons page — numbered ledger, not repeated boxes */
/* Passage hub pages: one block per proof against the chapter. */
.hub-proof { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }
.hub-proof:first-of-type { border-top: none; }
.hub-span { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.03em; color: var(--red-deep); }
.hub-span strong { color: var(--ink); }
.hub-bottom { font-family: var(--serif-display); font-size: 1.15rem; line-height: 1.5; margin: 0.5rem 0 0.9rem; }
.hub-proof .vc-grid { grid-template-columns: minmax(0, 420px); }

/* The curriculum's shelves: a jump index up top, then one section per theme. */
.lesson-index {
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.6rem;
  margin: 1.4rem 0 0.6rem;
}
.lesson-index a {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.04em;
  text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--paper-deep);
  border: 1px solid var(--rule); padding: 0.42rem 0.7rem;
}
.lesson-index a:hover { border-color: var(--ink); }
.lesson-theme { margin-top: 2.6rem; }
.lesson-theme-head {
  font-family: var(--serif-display); font-size: 1.9rem; font-weight: 600;
  border-bottom: 3px double var(--ink); padding-bottom: 0.4rem;
}
.lesson-theme-dek { color: var(--ink-soft); margin: 0.5rem 0 0.4rem; }
.lesson-row {
  padding: 2rem 0;
  border-top: 1px solid var(--rule);
}
.lesson-row:last-of-type { border-bottom: 1px solid var(--rule); }
/* [hidden] loses to any display rule, so say it here rather than trust the UA */
.lesson-row[hidden] { display: none; }
.lesson-more { margin: 1.6rem 0 0; }
.lesson-more button {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.7rem 1.6rem; min-height: 44px;
  background: transparent; border: 1.5px solid var(--ink); color: var(--ink); cursor: pointer;
}
.lesson-more button:hover { background: var(--ink); color: var(--paper); }
.lesson-title[tabindex="-1"]:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.lesson-title { font-family: var(--serif-display); font-size: 1.45rem; font-weight: 600; line-height: 1.25; margin-bottom: 0.45rem; }
.lesson-body { font-size: 1rem; color: var(--ink-soft); line-height: 1.6; max-width: 36rem; }
.lesson-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1rem;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  padding: 0.35rem 0.8rem 0.35rem 0.35rem;
  text-decoration: none;
  color: var(--ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.lesson-chip:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 rgba(200,33,15,0.25); }
.lesson-chip img, .lesson-chip .chip-ph {
  width: 4rem; height: 2.4rem; object-fit: cover; display: block;
  border-right: 1.5px solid var(--ink);
}
.lesson-chip .chip-ph { display: flex; align-items: center; justify-content: center; font-family: var(--serif-display); color: var(--red); background: var(--paper-deep); }
.lesson-chip .chip-text { font-size: 0.82rem; line-height: 1.3; }
.lesson-chip .tier-mini {
  font-family: var(--mono); font-size: 0.58rem; font-weight: 600; letter-spacing: 0.08em;
  padding: 0.2rem 0.45rem; border: 1.5px solid; margin-left: 0.3rem; white-space: nowrap;
}

/* ---------- keyline pull-quote ---------- */

.keyline { margin: 2.4rem 0; padding: 0; position: relative; }
.keyline blockquote {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.7rem);
  line-height: 1.35;
  color: var(--red-deep);
  border-top: 3px double var(--ink);
  border-bottom: 3px double var(--ink);
  padding: 1.3rem 0.2rem;
}
.copyline {
  position: absolute; right: 0; bottom: -0.9rem;
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink-soft);
  padding: 0.25rem 0.6rem; cursor: pointer;
}
.copyline:hover { color: var(--red-deep); border-color: var(--red); }

/* ---------- related checks ---------- */

.related { margin: 3rem 0 1rem; }
.related .vc-grid { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }



/* ---------- prev / next proof ---------- */

.proof-nav {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: 2.2rem 0 0.5rem;
  font-family: var(--mono);
  font-size: 0.78rem;
}
.proof-nav a {
  color: var(--red-deep);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  overflow-wrap: anywhere;   /* long song titles wrap instead of pushing the row wide */
}
.proof-nav a:hover { border-color: var(--red); }
.pn-older { text-align: right; }

/* ---------- archive stats strip ---------- */

.stats-strip {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  border: 1.5px solid var(--rule);
  background: var(--paper-deep);
  padding: 0.7rem 1rem;
  margin: 1.5rem 0 0.5rem;
}
.stats-strip strong { color: var(--red-deep); }

/* ---------- subtle motion (gated on html.js; reduced-motion safe) ---------- */

.vc-thumb img { transition: transform 0.35s ease; }
.vc-card:hover .vc-thumb img { transform: scale(1.05); }

/* Anchor jumps are instant on purpose: scroll-behavior:smooth animates via rAF,
   which freezes in background/occluded tabs, so a #proof link could land at the
   top of the page. Plain jumps + scroll-margin-top have no failure modes. */

@media (prefers-reduced-motion: no-preference) {
  html.js .diff-row, html.js .glance-col, html.js .facts .fact, html.js .crit-grid,
  html.js .keyline, html.js .lesson-box, html.js .related .vc-card {
    opacity: 0; transform: translateY(14px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  html.js .inview.diff-row, html.js .inview.glance-col, html.js .facts.inview .fact,
  html.js .inview.crit-grid, html.js .inview.keyline, html.js .inview.lesson-box,
  html.js .related.inview .vc-card { opacity: 1; transform: none; }
  html.js .facts.inview .fact:nth-child(2) { transition-delay: 0.07s; }
  html.js .facts.inview .fact:nth-child(3) { transition-delay: 0.14s; }
  html.js .facts.inview .fact:nth-child(4) { transition-delay: 0.21s; }
  html.js .facts.inview .fact:nth-child(5) { transition-delay: 0.28s; }

  /* the editor's pen draws the strike */
  html.js .lyric-text .cut { text-decoration: none; position: relative; }
  html.js .lyric-text .cut::after {
    content: ""; position: absolute; left: -1%; right: -1%; top: 55%; height: 0.09em;
    background: var(--red); transform: scaleX(0); transform-origin: left center;
    transition: transform 0.6s 0.45s ease;
  }
  html.js .diff-row.inview .cut::after { transform: scaleX(1); }

  /* the added-words highlight sweeps in */
  html.js .lyric-text .add {
    background: linear-gradient(to right, rgba(200,33,15,0.16), rgba(200,33,15,0.16));
    background-repeat: no-repeat; background-size: 0% 100%;
    transition: background-size 0.6s 0.85s ease;
  }
  html.js .diff-row.inview .add { background-size: 100% 100%; }

  /* verdict stamps down */
  html.js .diff-verdict { opacity: 0; transform: scale(1.12) rotate(-0.8deg); transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.4, 0.64, 1); }
  html.js .diff-verdict.inview { opacity: 1; transform: none; }
}

/* ---------- at-a-glance good vs cautions ---------- */

.glance {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 0 0 2rem;
}
.glance-col { border: 1.5px solid var(--ink); padding: 1.1rem 1.2rem 1.2rem; background: var(--paper); }
.glance-good { border-color: var(--green); box-shadow: 4px 4px 0 rgba(19,19,19,0.14); }
.glance-caut { border-color: var(--red); box-shadow: 4px 4px 0 rgba(200,33,15,0.15); }
.glance-title {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.glance-good .glance-title { color: var(--green); }
.glance-caut .glance-title { color: var(--red-deep); }
.glance-col ul { list-style: none; }
.glance-col li {
  font-size: 0.95rem;
  line-height: 1.5;
  padding: 0.35rem 0 0.35rem 1.1rem;
  position: relative;
  color: var(--ink);
}
.glance-col li + li { border-top: 1px dashed var(--rule); }
.glance-good li::before { content: "✓"; position: absolute; left: 0; color: var(--green); font-weight: 600; }
.glance-caut li::before { content: "⚠"; position: absolute; left: 0; color: var(--red); font-size: 0.8em; top: 0.55em; }
.glance-none { font-family: var(--mono); font-size: 0.85rem; color: var(--green); }
@media (max-width: 640px) { .glance { grid-template-columns: 1fr; } }

/* ---------- corrections log ---------- */

.corrections {
  border: 1.5px solid var(--rule);
  border-left: 4px solid var(--ink-soft);
  background: var(--paper-deep);
  padding: 1.1rem 1.3rem 1.2rem;
  margin: 2.5rem 0 1rem;
}
.corrections-title {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.6rem;
}
.corrections-log { list-style: none; margin-bottom: 0.7rem; }
.corrections-log li {
  font-size: 0.95rem;
  line-height: 1.55;
  padding: 0.45rem 0;
  border-top: 1px solid var(--rule);
  color: var(--ink);
}
.corrections-log time {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--red-deep);
  margin-right: 0.5rem;
}
.corrections-none { font-family: var(--mono); font-size: 0.82rem; color: var(--ink-soft); margin-bottom: 0.55rem; }
.corrections-invite { font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }

/* ---------- verse-check card grid ---------- */

.vc-controls { margin: 1.5rem 0 2rem; display: grid; gap: 0.9rem; }
/* Grid items default to min-width:auto, so the widest dropdown's intrinsic
   width set the column and carried the tier chips past the text margin with it.
   Letting the items shrink is what makes the selects' own 100% cap meaningful. */
.vc-controls > * { min-width: 0; }
.vc-controls input[type="search"] {
  font-family: var(--mono); font-size: 0.9rem;
  padding: 0.7rem 0.9rem; max-width: min(26rem, 100%);
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink);
}
.vc-controls input[type="search"]:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.vc-selects { display: flex; gap: 0.7rem; flex-wrap: wrap; }
/* The four archive dropdowns sat beside the tier chips wearing native OS chrome:
   appearance:auto meant the browser drew its own arrow, quietly refused the 1.5px
   border (it rendered 1px) and made them 36px tall against the chips' 30px. Two
   control families in one row, one of them not ours. The caret below is drawn in
   the same ink as the rule, and the metrics are the chips' metrics. */
.vc-controls select {
  -webkit-appearance: none; appearance: none;
  font-family: var(--mono); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.45rem 2.1rem 0.45rem 0.9rem; max-width: min(22rem, 100%);
  /* The 100% half of that cap matters: the widest dropdown ("Teaching or
     experience") is 333px of intrinsic width, and on a 375px screen the sheet's
     content box is 327px. Without it the select set the grid column's width and
     pushed the tier chips 6px past the text column's right margin. */
  background-color: transparent; border: 1.5px solid var(--ink); color: var(--ink); cursor: pointer; line-height: 1.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 6'%3E%3Cpath d='M0.5 0.5 L4.5 5 L8.5 0.5' fill='none' stroke='%231c1a17' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.8rem center;
}
.vc-controls select:hover { background-color: var(--paper-deep); }
/* The native menu itself is still the OS's; give its options readable metrics. */
.vc-controls select option { font-family: var(--serif-body); font-size: 0.95rem; text-transform: none; letter-spacing: normal; }
.vc-empty { font-family: var(--mono); font-size: 0.85rem; color: var(--ink-soft); padding: 2rem 0; }

/* "Show more" for the archive. Ink block, same furniture as the Songs nav item:
   no third ink, and it reads as the one thing left to press at the foot of a list. */
.vc-more {
  margin: 2.6rem 0 1rem;
  display: flex; flex-direction: column; align-items: center; gap: 0.85rem;
  border-top: 1px solid var(--rule); padding-top: 2rem;
}
.vc-more-count {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.vc-more button {
  font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.8rem 2.2rem; min-height: 44px;
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); cursor: pointer;
}
.vc-more button:hover { background: var(--red); border-color: var(--red); }
.vc-pinned-more { margin: 1.1rem 0 0; }
.vc-pinned-more a {
  font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--red-deep); text-decoration: none;
  border-bottom: 1.5px solid var(--red); padding-bottom: 2px;
}
.vc-pinned-more a:hover { color: var(--ink); border-color: var(--ink); }
.vc-filter { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.vc-filter button {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.45rem 0.9rem; background: transparent; border: 1.5px solid var(--ink); color: var(--ink); cursor: pointer;
}
.vc-filter button.on { background: var(--red); border-color: var(--red); color: var(--paper); }

.vc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 1.5rem;
}
.vc-card {
  display: block;
  border: 1.5px solid var(--ink);
  background: var(--paper);
  text-decoration: none;
  color: var(--ink);
  box-shadow: 5px 5px 0 rgba(19,19,19,0.12);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.vc-card:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 rgba(200,33,15,0.25); }
.vc-thumb {
  display: block; position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: var(--paper-deep); border-bottom: 1.5px solid var(--ink);
}
.vc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-thumb-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--serif-display); font-size: 5rem; color: var(--red); opacity: 0.55;
}
.vc-badge {
  position: absolute; left: 0.6rem; bottom: 0.6rem;
  font-family: var(--mono); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.1em;
  padding: 0.25rem 0.55rem; border: 1.5px solid;
}
.badge-verified { background: var(--paper); border: 3px double var(--red); color: var(--red); }
.badge-faithful { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.badge-departs  { background: var(--red); border-color: var(--red); color: var(--paper); }
.badge-neutral  { background: var(--paper); border-color: var(--ink); color: var(--ink); }
.badge-demo     { left: auto; right: 0.6rem; background: var(--paper); border: 1.5px dashed var(--red); color: var(--red-deep); }
.badge-misleading { background: var(--ink); border-color: var(--red); color: var(--paper); }
.vc-card-body { display: block; padding: 1rem 1.1rem 1.2rem; }
.vc-card-title { display: block; font-family: var(--serif-display); font-size: 1.25rem; font-weight: 600; line-height: 1.2; }
.vc-card-artist { display: block; font-size: 0.92rem; color: var(--ink-soft); margin-top: 0.25rem; }
.vc-card-meta {
  display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0.6rem 0 0.7rem;
}
.vc-card-meta .vc-passage { color: var(--red-deep); font-weight: 600; }
/* The card's answer: the entry's own bottom line, above the evidence bullets,
   in the reading face rather than the small evidence face. Same hierarchy the
   entry page uses — the answer first, the reasons under it. */
/* Deliberately NOT line-clamped. The good/caution bullets below are evidence
   and can be trimmed; this is the answer, and half an answer is worse than
   none. On a phone a 40-word bottom line runs to six or seven lines, which a
   4-line clamp cut mid-sentence. The validator already caps its length. */
.vc-answer {
  display: block;
  font-size: 0.98rem; line-height: 1.4; color: var(--ink);
  margin: 0 0 0.65rem;
}
.vc-hl {
  /* No bottom padding on a line-clamped box: the clipped third line bleeds
     into the padding zone as a sliced-off strip. Spacing below goes on margin. */
  font-size: 0.85rem; line-height: 1.45; padding: 0.3rem 0 0; margin: 0 0 0.3rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.vc-hl-good { color: var(--green); border-top: 1px dashed var(--rule); }
.vc-hl-caut { color: var(--red-deep); border-top: 1px dashed var(--rule); }

@media (max-width: 600px) {
  .hero { padding-top: 3.5rem; }
  .diff-card { box-shadow: 4px 4px 0 rgba(19,19,19,0.12); }
  /* The phone masthead, rebuilt 2026-09-07. It was 154px tall with six items,
     and the links on its second row measured 16px against WCAG 2.5.8's 24px
     floor. It is now about the same height with SEVEN items and every target at
     44px: the wordmark and the translation toggle share row one, and the nav
     wraps to two rows of 44px links.

     A single scrolling row was built and measured first — it came in at 117px,
     37px shorter, and it was rejected. Seven labels of this length need 568px
     and the sheet is 327px wide, so a one-row nav can only ever be a nav with
     two items scrolled out of sight behind an affordance a reader has to guess
     at. On a site whose whole claim is that nothing is hidden, 37px is not
     worth two hidden destinations. The height here is the price of legible
     targets, and it buys back what the 16px links were stealing. */
  .masthead { padding: 0.55rem 0 0.4rem; }
  .masthead .sheet { gap: 0.3rem 0.75rem; align-items: center; }
  .wordmark { font-size: 1.02rem; }
  .masthead nav { gap: 0 1.15rem; }
  .masthead nav a {
    flex: 0 0 auto;
    display: inline-flex; align-items: center;
    min-height: 44px;
    font-size: 0.66rem;
  }
  .masthead nav a.nav-songs { padding: 0 0.6rem; }
  /* At 44px the inset rule would float a dozen pixels under its word and read as
     a stray mark. The red ink and aria-current carry "you are here" on a phone. */
  .masthead nav a.here { box-shadow: none; }
  /* "Read in" costs 55px and the row has 22px to spare. The three buttons say
     WEB / KJV / BSB and the group keeps its aria-label, so nothing is lost but
     the word — and losing it is what lets the wordmark and the toggle share a
     row instead of stacking into a third one. */
  .tr-toggle-label { display: none; }
}

/* Touch targets. The desktop metrics are deliberate — the dropdowns were tuned to
   the tier chips' exact height so the archive reads as one control family — so the
   growth is scoped to coarse pointers instead of to a width. 44px is the comfortable
   target; WCAG 2.5.8 sets the floor at 24px and the chips and selects sat at 30. */
@media (pointer: coarse) {
  .vc-controls select,
  .vc-filter button { min-height: 44px; padding-top: 0.7rem; padding-bottom: 0.7rem; }
  /* height only: extra horizontal padding here widened the toggle by 33px and
     bumped it out of the wordmark's row, which cost more than it bought */
  .tr-toggle button { min-height: 40px; padding: 0.25rem 0.5rem; }
  .setlist-picker button, .check-another button { min-height: 44px; }
}

/* ---------- print: a proof should print as a clean handout ---------- */

@media print {
  body { background: #fff; color: #000; font-size: 11pt; }
  .masthead nav, .tr-toggle, .skip-link, .vc-filter, .vc-controls, .crumbs, .footmap,
  .video-embed, .copyline, .related, .hero-cta, .motion-only, .req-form,
  .proof-nav, .bl-jump, .bl-print, .check-another, .vc-count { display: none !important; }
  .sheet { max-width: none; padding: 0; }
  a { color: #000; text-decoration: underline; }
  /* print the destination of real links so a paper handout stays checkable */
  .source-list a::after, .fact-value a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .diff-card, .glance-col, .crit-grid, .lesson-box, .corrections, .warn-block, .bottom-line {
    border-color: #000 !important; box-shadow: none !important; break-inside: avoid;
  }
  .crit.pass, .crit.fail { background: #fff !important; }
  h1, h2, .section-label { break-after: avoid; }
  footer { border-top: 1px solid #000; }
}

/* Live match count under the filters. Hidden in the default view, where the
   stats strip already says how many proofs there are. */
.vc-count {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0.9rem 0 0;
}

/* "Where the text survives the song" — the onward route from a proof to the
   passage sung whole. Marked off from "more proofs like this" so the two do
   not read as one undifferentiated pile of cards. */
.alternatives { border-top: 1px solid var(--rule); padding-top: 1.6rem; }
.related-dek {
  font-size: 0.95rem; color: var(--ink-soft); max-width: 46ch;
  margin: 0.5rem 0 1.2rem;
}

/* These labels became real <h2>s so the proof appears in the document outline:
   a screen-reader user navigating by heading used to jump from the title
   straight past the verdict, the passage and the good/cautions lists. They are
   headings semantically and unchanged visually, so the browser's bold-and-big
   default is reset here. */
.bottom-line-label, .crit-heading, .glance-title, .diff-card .diff-head h2 {
  font-weight: 400;
  font-size: inherit;
}
.bottom-line-label { font-size: 0.68rem; }
.crit-heading, .glance-title { font-size: 0.72rem; }
.diff-card .diff-head h2 { font: inherit; letter-spacing: inherit; text-transform: inherit; }

/* ---------- print button + "check another song" ---------- */

/* Revealed only where JS runs: window.print() is the whole control. */
.bl-print { display: none; }
html.js .bl-print {
  display: inline;
  font: inherit; font-family: var(--mono); font-size: 0.72rem;
  letter-spacing: 0.06em;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--red); cursor: pointer; padding: 0; margin-left: 0.6rem;
}
html.js .bl-print:hover { border-bottom-color: var(--red); }

.check-another {
  border-top: 1px solid var(--rule);
  margin-top: 2.6rem;
  padding-top: 1.6rem;
}
.check-another label {
  display: block;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red); margin-bottom: 0.8rem;
}
.check-another-row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.check-another input[type="search"] {
  flex: 1 1 16rem;
  font-family: var(--mono); font-size: 0.88rem;
  padding: 0.7rem 0.9rem;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.check-another input[type="search"]:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.check-another button {
  font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em;
  text-transform: uppercase; padding: 0.7rem 1.2rem;
  background: var(--red); color: var(--paper); border: 1.5px solid var(--red);
  cursor: pointer; white-space: nowrap;
}
.check-another button:hover { background: var(--red-deep); }
.check-another-note {
  font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft);
  margin-top: 0.8rem;
}
.check-another-note a { color: var(--red); }

/* ---------- setlist check ---------- */

.setlist-intro .dek { max-width: 44ch; }

.setlist-picker { margin: 2rem 0 1rem; position: relative; }
.setlist-picker label {
  display: block;
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--red); margin-bottom: 0.7rem;
}
.setlist-picker input[type="search"] {
  width: 100%;
  font-family: var(--mono); font-size: 0.95rem;
  padding: 0.8rem 1rem;
  background: var(--paper); border: 1.5px solid var(--ink); color: var(--ink); -webkit-appearance: none; appearance: none;
}
.setlist-picker input[type="search"]:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.setlist-hint {
  font-family: var(--mono); font-size: 0.7rem; line-height: 1.6;
  color: var(--ink-soft); margin-top: 0.7rem;
}
.setlist-hint a, .setlist-none a { color: var(--red); }

.setlist-results {
  list-style: none; margin: 0.4rem 0 0;
  border: 1.5px solid var(--ink); background: var(--paper);
  box-shadow: 5px 5px 0 rgba(19,19,19,0.12);
}
.setlist-results li + li { border-top: 1px solid var(--rule); }
.setlist-results button {
  display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap;
  width: 100%; text-align: left; cursor: pointer;
  background: none; border: 0; padding: 0.7rem 1rem;
  font-family: inherit; font-size: 1rem; color: var(--ink);
}
.setlist-results button:hover { background: var(--paper-deep); }
.setlist-results .sr-song { font-family: var(--serif-display); font-weight: 600; }
.setlist-results .sr-artist { font-size: 0.85rem; color: var(--ink-soft); }
/* the badge is absolutely positioned inside a card thumb; here it sits inline */
.setlist-results .vc-badge, .setlist-item .vc-badge { position: static; margin-left: auto; }
.setlist-none { padding: 0.7rem 1rem; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); }

.setlist-sheet { margin-top: 2.4rem; }
.setlist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.setlist-count { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); }
.setlist-list { list-style: none; counter-reset: sl; margin-top: 1.2rem; }
.setlist-item {
  counter-increment: sl;
  border-left: 3px solid var(--rule); padding: 0 0 0 1.1rem;
  margin-bottom: 1.6rem; break-inside: avoid;
}
.setlist-item-head { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; }
.setlist-item-head::before {
  content: counter(sl) ".";
  font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft);
}
.setlist-song {
  font-family: var(--serif-display); font-size: 1.2rem; font-weight: 600;
  color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule);
}
.setlist-song:hover { color: var(--red); border-bottom-color: var(--red); }
.setlist-remove {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.08em;
  background: none; border: 0; border-bottom: 1px solid var(--rule);
  color: var(--ink-soft); cursor: pointer; padding: 0;
}
.setlist-remove:hover { color: var(--red); border-bottom-color: var(--red); }
.setlist-meta {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0.35rem 0 0.5rem;
}
.setlist-bottom { font-size: 1.02rem; line-height: 1.5; }
.setlist-caut { font-size: 0.88rem; color: var(--red-deep); margin-top: 0.4rem; }

.setlist-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.8rem; }
.setlist-actions button {
  font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 0.65rem 1.1rem; cursor: pointer;
  background: var(--red); color: var(--paper); border: 1.5px solid var(--red);
}
.setlist-actions button:hover { background: var(--red-deep); border-color: var(--red-deep); }
.setlist-actions .setlist-clear { background: none; color: var(--ink-soft); border-color: var(--rule); }
.setlist-actions .setlist-clear:hover { background: none; color: var(--red); border-color: var(--red); }
.setlist-foot {
  font-size: 0.9rem; color: var(--ink-soft); max-width: 52ch;
  margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--rule);
}
.setlist-empty { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); margin-top: 2rem; }

@media print {
  .setlist-picker, .setlist-actions, .setlist-empty, .setlist-results { display: none !important; }
  .setlist-item { border-left: 2px solid #000; }
  .setlist-song { border: 0; }
}

/* ---------- artist pages ---------- */

.byline-link { color: inherit; text-decoration: none; border-bottom: 1px solid var(--rule); }
.byline-link:hover { color: var(--red); border-bottom-color: var(--red); }

.artist-tally { margin-top: 2rem; }
.tally-list {
  list-style: none; display: flex; flex-wrap: wrap; gap: 0.7rem 1.2rem;
  margin: 0 0 1.2rem;
}
.tally-list li { display: flex; align-items: center; gap: 0.5rem; }
/* the tier badge is normally absolute inside a card thumbnail */
.tally-list .vc-badge, .ai-tally .vc-badge { position: static; }
.tally-n { font-family: var(--mono); font-size: 0.95rem; font-weight: 500; }

.artist-guard {
  font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft);
  border-left: 3px solid var(--rule); padding-left: 1rem; max-width: 54ch;
}
.artist-guard strong { color: var(--ink); }
.artist-guard a { color: var(--red); }

.artist-index { list-style: none; margin-top: 1.5rem; }
.artist-index li { border-top: 1px solid var(--rule); padding: 0.9rem 0; }
.artist-index li:last-child { border-bottom: 1px solid var(--rule); }
.artist-index a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  text-decoration: none; color: var(--ink);
}
.artist-index a:hover .ai-name { color: var(--red); }
.ai-name { font-family: var(--serif-display); font-size: 1.15rem; font-weight: 600; }
.ai-n { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; }
.ai-tally { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.8rem; margin-top: 0.5rem; }

/* Two doors off the hero: look one song up, or vet the whole service. The
   second is the job worship leaders actually have on a Thursday night. */
.hero-actions { margin-top: 1.6rem; display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero-actions .hero-cta { margin-left: 0; }
.hero-cta-quiet {
  background: transparent; color: var(--red);
  border: 3px solid var(--red);
  padding: calc(0.7rem - 3px) calc(1.4rem - 3px) calc(0.55rem - 3px);
}
.hero-cta-quiet:hover { background: var(--red); color: var(--paper); }
.hero-note {
  font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft);
  margin-top: 0.9rem;
}

/* Songs that met the standard, indexed on The List. Deliberately a plain list
   and not a card grid: cards would read as endorsements, and one verified song
   is not a sealed artist. */
.verified-proofs { list-style: none; margin: 1.4rem 0; }
.verified-proofs li { border-top: 1px solid var(--rule); padding: 0.75rem 0; }
.verified-proofs li:last-child { border-bottom: 1px solid var(--rule); }
.verified-proofs a { text-decoration: none; color: var(--ink); }
.verified-proofs a:hover .vp-song { color: var(--red); }
.vp-song { font-family: var(--serif-display); font-size: 1.1rem; font-weight: 600; }
.vp-artist { color: var(--ink-soft); font-size: 0.95rem; }
.vp-passage {
  display: block; font-family: var(--mono); font-size: 0.66rem;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--red-deep);
  margin-top: 0.2rem;
}

/* A song with more than one proof. Sits under the bottom line, because a reader
   who arrives from a search on the song title needs to know immediately that
   the other card they saw is a different check, not a contradiction. */
.sibling-proofs {
  font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft);
  border-left: 3px solid var(--rule); padding-left: 1rem;
  margin: 1.4rem 0 0; max-width: 54ch;
}
.sibling-proofs strong { color: var(--ink); }
.sibling-proofs a { color: var(--red); }


/* ---------- woodtype normalization (Anton prints one weight, uppercase) ---------- */
.page-title h1, .pillar h3, .criterion h3, .lesson-theme-head, .lesson-title,
.vc-card-title, .setlist-song, .setlist-results .sr-song, .ai-name, .vp-song {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
/* prose set in the display face reads wrong in woodtype; keep it in Franklin */
.lesson-box p.lesson-text, .hub-bottom, .keyline blockquote {
  font-family: var(--serif-body);
  font-weight: 700;
}

/* ---------- tier legend: job-case furniture under the hero ---------- */
.tier-legend { margin-top: 2.6rem; }
.tier-legend .tl-rule6 { border-top: 6px solid var(--ink); }
.tier-legend .tl-rule1 { border-top: 1px solid var(--ink); margin-top: 3px; }
.tier-legend .tl-row { display: flex; border-bottom: 1px solid var(--ink); }
.tier-legend a {
  flex: 1; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.7rem 0.6rem 0.55rem; text-decoration: none; color: var(--ink);
}
.tier-legend a + a { border-left: 1px solid var(--ink); }
.tier-legend a:hover { background: rgba(19,19,19,0.05); }
.tier-legend .tl-name {
  font-family: var(--serif-display); font-weight: 400; text-transform: uppercase;
  font-size: 1rem; letter-spacing: 0.02em; white-space: nowrap;
}
.tier-legend svg { flex-shrink: 0; }
@media (max-width: 640px) {
  .tier-legend .tl-row { flex-wrap: wrap; }
  .tier-legend a { flex-basis: 50%; }
  .tier-legend a + a { border-left: none; }
  .tier-legend a:nth-child(even) { border-left: 1px solid var(--ink); }
  .tier-legend a:nth-child(n+3) { border-top: 1px solid var(--ink); }
}

/* ---------- woodcut engravings (assets/cut-*.png) ----------
   A broadside got its pictures from wood engravings printed in the same ink as
   the type. These are the only illustrations on the site, and they never appear
   on a proof page: there, every image is evidence. */
.page-title.with-cut {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  align-items: center;
}
.page-cut { width: clamp(7rem, 15vw, 12rem); height: auto; opacity: 0.92; }
@media (max-width: 640px) {
  .page-title.with-cut { grid-template-columns: 1fr; }
  .page-cut { width: 7.5rem; justify-self: start; }
}

/* a cut set into a run of prose, text wrapping around it like a real broadside */
.cut-inline {
  float: right;
  width: clamp(8rem, 20vw, 14rem);
  height: auto;
  margin: 0.2rem 0 1.2rem 1.8rem;
  shape-outside: margin-box;
  opacity: 0.92;
}
@media (max-width: 560px) {
  .cut-inline { float: none; display: block; width: 9rem; margin: 1.4rem 0; }
}


/* the three questions every proof answers (the Standard). A numbered list, set
   like the criteria below it, so the page states its job before its rules. */
.three-questions { list-style: none; counter-reset: q; margin: 1.6rem 0 0; }
.three-questions li {
  counter-increment: q;
  position: relative;
  padding: 0 0 1.1rem 3.1rem;
  max-width: 34rem;
}
.three-questions li + li { padding-top: 1.1rem; border-top: 1px solid var(--ink); }
.three-questions li::before {
  content: counter(q);
  position: absolute; left: 0; top: 0.05rem;
  font-family: var(--serif-display); font-size: 1.6rem; line-height: 1;
  color: var(--red);
}
.three-questions li + li::before { top: 1.15rem; }
.three-questions strong { display: block; margin-bottom: 0.2rem; }

/* ---------- song requests + voting (site/requests.html) ---------- */
.req-form { margin-top: 0.4rem; }
.req-fields { display: flex; gap: 1rem; flex-wrap: wrap; }
.req-fields label {
  flex: 1 1 15rem; display: flex; flex-direction: column; gap: 0.35rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
}
.req-fields input {
  font-family: var(--serif-body); font-size: 1rem; padding: 0.6rem 0.7rem;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
}
.req-fields input:focus { outline: 2px solid var(--red); outline-offset: 1px; }
.req-form button[type="submit"] {
  margin-top: 1rem;
  font-family: var(--serif-display); font-weight: 400; text-transform: uppercase;
  font-size: 1.05rem; letter-spacing: 0.03em;
  padding: 0.6rem 1.3rem 0.45rem;
  background: var(--ink); color: var(--paper); border: 1.5px solid var(--ink); cursor: pointer;
}
.req-form button[type="submit"]:hover { background: var(--red); border-color: var(--red); }
.req-form .cf-turnstile { margin-top: 1rem; }
.req-note { margin-top: 0.8rem; font-family: var(--mono); font-size: 0.78rem; min-height: 1.2em; }
.req-note.req-good { color: var(--ink); }
.req-note.req-bad { color: var(--red); }
.req-closed { border: 1.5px dashed var(--ink); padding: 1rem 1.1rem; }
.req-closed p { margin: 0; }
.req-fine {
  margin-top: 1.4rem; max-width: 38rem;
  font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft);
}

.req-list { list-style: none; margin: 0; padding: 0; }
.req-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 0; border-top: 1px solid var(--ink);
}
.req-item:last-child { border-bottom: 1px solid var(--ink); }
.req-votes {
  font-family: var(--serif-display); font-size: 1.5rem; line-height: 1;
  min-width: 2.4rem; text-align: right; color: var(--red);
}
.req-song { flex: 1; display: flex; flex-direction: column; }
.req-song strong { font-weight: 700; }
.req-artist { font-size: 0.88rem; color: var(--ink-soft); }
.req-vote {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.4rem 0.8rem; background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--ink); cursor: pointer;
}
.req-vote:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.req-vote:disabled { color: var(--ink-soft); border-color: var(--ink-soft); cursor: default; }
.req-done .req-votes { color: var(--ink-soft); }
.req-checked {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--red);
}
.req-empty { padding: 0.9rem 0; color: var(--ink-soft); font-family: var(--mono); font-size: 0.8rem; }

/* the canon verses on the Standard: scripture set as a short ruled list */
.canon-verses { list-style: none; margin: 1.4rem 0 1.8rem; padding: 0; }
.canon-verses li {
  padding: 0.9rem 0; border-top: 1px solid var(--ink); max-width: 40rem;
  font-size: 1.05rem; line-height: 1.5;
}
.canon-verses li:last-child { border-bottom: 1px solid var(--ink); }
.canon-verses .verse-swap { font-style: italic; color: var(--red-deep); }
/* the reference, set small and quiet after the verse */
.canon-verses li > span:last-child {
  display: block; margin-top: 0.35rem;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-soft);
}

/* ---------- wayfinding, 2026-09-30 ---------- */
/* Breadcrumb on every proof page. Mono, small, ink-soft: it is furniture, not a
   heading, and it sits above the h1 so a reader who arrived from search sees
   where the page lives before they see what it says. */
.crumbs {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-soft); margin: 1.4rem 0 -0.4rem;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.1rem 0.45rem;
}
.crumbs a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); padding: 0.35rem 0; }
.crumbs a:hover { color: var(--red); border-color: var(--red); }
.crumbs [aria-current] { color: var(--ink-soft); overflow-wrap: anywhere; }
.crumb-sep { color: var(--red); }

/* Footer site map: every section, one row, at the foot of every page. */
.footmap {
  display: flex; flex-wrap: wrap; gap: 0 1.1rem; margin: 0 0 1.4rem;
  padding-bottom: 1.1rem; border-bottom: 1px solid var(--rule);
}
.footmap a {
  font-family: var(--serif-body); font-weight: 600; font-size: 0.78rem;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
  color: inherit; display: inline-flex; align-items: center; min-height: 44px;
}
.footmap a:hover { color: var(--red); }

/* The corrections ledger. A plain dated list, the same furniture as the log on
   each proof, so the two read as one record. */
.ledger-why { max-width: 38rem; color: var(--ink-soft); line-height: 1.6; margin: 1.2rem 0; }
.ledger { list-style: none; padding: 0; margin: 2rem 0; border-top: 6px solid var(--ink); }
.ledger-row {
  display: grid; grid-template-columns: 7.2rem 1fr; gap: 0.3rem 1.2rem;
  padding: 1.1rem 0; border-bottom: 1px solid var(--rule);
}
.ledger-row time { font-family: var(--mono); font-size: 0.8rem; color: var(--red-deep); padding-top: 0.15rem; }
.ledger-row a { font-weight: 700; color: var(--ink); text-decoration: none; border-bottom: 1.5px solid var(--red); }
.ledger-row a:hover { color: var(--red); }
.ledger-passage { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); margin-left: 0.4rem; }
.ledger-row p { margin: 0.45rem 0 0; line-height: 1.55; max-width: 36rem; }
@media (max-width: 600px) { .ledger-row { grid-template-columns: 1fr; } }

/* ---------- watch page, 2026-09-30 ---------- */
.watch-note { max-width: 40rem; color: var(--ink-soft); line-height: 1.6; border-left: 3px solid var(--red); padding-left: 1rem; margin: 1.4rem 0; }
.watch-jump { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.6rem 0 0.4rem; }
.watch-jump a { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); text-decoration: none; border: 1.5px solid var(--ink); padding: 0.7rem 0.9rem; min-height: 44px; display: inline-flex; align-items: center; }
.watch-jump a:hover { background: var(--ink); color: var(--paper); }
.watch-shelf { margin-top: 3.2rem; }
.watch-dek { color: var(--ink-soft); max-width: 38rem; margin: -1.2rem 0 1.4rem; line-height: 1.55; }
.watch-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.6rem; }
.watch-card { border-top: 6px solid var(--ink); padding-top: 0.8rem; }
.watch-card a { text-decoration: none; color: var(--ink); display: block; }
.watch-thumb { display: block; aspect-ratio: 16 / 9; background: var(--paper-deep); border: 1.5px solid var(--ink); overflow: hidden; }
.watch-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.05); transition: filter 0.15s ease; }
.watch-card a:hover .watch-thumb img, .watch-card a:focus-visible .watch-thumb img { filter: none; }
.watch-title { display: block; font-weight: 700; line-height: 1.3; margin-top: 0.7rem; }
.watch-card a:hover .watch-title { color: var(--red); }
.watch-meta { font-family: var(--mono); font-size: 0.7rem; color: var(--ink-soft); margin: 0.4rem 0 0; }
.watch-blurb { font-size: 0.95rem; line-height: 1.5; margin: 0.45rem 0 0; }
@media (prefers-reduced-motion: reduce) { .watch-thumb img { transition: none; } }