@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/cormorant-garamond-italic-latin-ext.woff2?v=e3908a15') 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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400 700;font-display:swap;src:url('../fonts/cormorant-garamond-italic-latin.woff2?v=01c9275a') 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:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/cormorant-garamond-normal-latin-ext.woff2?v=6b8bf3dd') 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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/cormorant-garamond-normal-latin.woff2?v=5a7f94a1') 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:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('../fonts/figtree-italic-latin-ext.woff2?v=adc45382') 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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Figtree';font-style:italic;font-weight:300 900;font-display:swap;src:url('../fonts/figtree-italic-latin.woff2?v=ab2c6d32') 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:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/figtree-normal-latin-ext.woff2?v=00c37195') 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-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;}@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url('../fonts/figtree-normal-latin.woff2?v=eddba2ef') 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;}
/* =====================================================================
   blessbible.app — the shared design system (see DESIGN.md)
   Dark "candlelight" by default; parchment "daylight" via
   prefers-color-scheme and html[data-theme]. Animate transform/opacity only.
   The @font-face rules from assets/fonts/fonts.css are inlined above this
   comment at build time.
   ===================================================================== */

/* ---------- metric-matched fallbacks (CLS) ----------
   While Cormorant Garamond / Figtree load (font-display: swap), text is laid out in these local
   faces, scaled to the web fonts' widths and vertical metrics (measured in Chrome: median width
   ratio of the site's own headings / body text across 14 pages; ascent/descent of the woff2), so the swap
   doesn't rewrap headings and push the page down. Times New Roman / Arial and their metric
   clones (Liberation, Tinos/Arimo). Weight ranges pick the regular or bold local face. */
@font-face { font-family: "CG Fallback"; font-style: normal; font-weight: 100 550; size-adjust: 96.9%; ascent-override: 94.9%; descent-override: 29.9%; line-gap-override: 0%;
  src: local("Times New Roman"), local("TimesNewRomanPSMT"), local("Liberation Serif"), local("LiberationSerif"), local("Tinos"); }
@font-face { font-family: "CG Fallback"; font-style: normal; font-weight: 551 900; size-adjust: 91%; ascent-override: 101.1%; descent-override: 31.9%; line-gap-override: 0%;
  src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold"), local("Tinos Bold"); }
@font-face { font-family: "CG Fallback"; font-style: italic; font-weight: 100 550; size-adjust: 88%; ascent-override: 104.5%; descent-override: 33%; line-gap-override: 0%;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("LiberationSerif-Italic"), local("Tinos Italic"); }
@font-face { font-family: "CG Fallback"; font-style: italic; font-weight: 551 900; size-adjust: 86.5%; ascent-override: 106.4%; descent-override: 33.5%; line-gap-override: 0%;
  src: local("Times New Roman Bold Italic"), local("TimesNewRomanPS-BoldItalicMT"), local("Liberation Serif Bold Italic"), local("LiberationSerif-BoldItalic"), local("Tinos Bold Italic"); }
@font-face { font-family: "Figtree Fallback"; font-style: normal; font-weight: 100 549; size-adjust: 99.8%; ascent-override: 95.2%; descent-override: 25.1%; line-gap-override: 0%;
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans"), local("Arimo"); }
@font-face { font-family: "Figtree Fallback"; font-style: normal; font-weight: 550 900; size-adjust: 94.9%; ascent-override: 100.1%; descent-override: 26.3%; line-gap-override: 0%;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold"), local("Arimo Bold"); }
@font-face { font-family: "Figtree Fallback"; font-style: italic; font-weight: 100 549; size-adjust: 101%; ascent-override: 94.1%; descent-override: 24.8%; line-gap-override: 0%;
  src: local("Arial Italic"), local("Arial-ItalicMT"), local("Liberation Sans Italic"), local("LiberationSans-Italic"), local("Arimo Italic"); }
@font-face { font-family: "Figtree Fallback"; font-style: italic; font-weight: 550 900; size-adjust: 95.9%; ascent-override: 99.1%; descent-override: 26.1%; line-gap-override: 0%;
  src: local("Arial Bold Italic"), local("Arial-BoldItalicMT"), local("Liberation Sans Bold Italic"), local("LiberationSans-BoldItalic"), local("Arimo Bold Italic"); }

/* ---------- tokens ---------- */
:root {
  --ink: #15121C; --ink-2: #241E31; --panel: #1F1A2A; --vellum: #EFE5D0; --parchment: #F5EDDC;
  --gold-fill: #C9A44C; --crimson-fill: #B4404E; --marian-fill: #6E8CD6;

  --bg: #15121C;
  --fg: #EFE5D0;
  --fg-2: rgb(239 229 208 / .82);
  --dim: rgb(239 229 208 / .62);
  --faint: rgb(239 229 208 / .4);
  --gold: #C9A44C;
  --crimson: #DE7682;
  --focus: #C9A44C;      /* keyboard focus ring: ≥ 3:1 on the page and cards in both looks */
  --cap: #C9A44C;        /* the illuminated drop cap (large text: ≥ 3:1) */
  --marian: #8FA6E8;
  --line: rgb(239 229 208 / .11);
  --line-2: rgb(239 229 208 / .18);
  --card: rgb(255 255 255 / .04);
  --card-2: rgb(255 255 255 / .07);
  --glass: rgb(32 27 44 / .62);
  --glass-solid: rgb(30 25 41 / .94);
  --glass-hi: rgb(255 255 255 / .07);
  --rim: rgb(255 255 255 / .16);
  --rim-dim: rgb(255 255 255 / .07);
  --shadow: rgb(0 0 0 / .45);
  --amb-gold: .3; --amb-marian: .22; --amb-wine: .13;
  --grain-o: .2; --grain-mode: overlay;
  --sheet: #1A1623;
  --scrim: rgb(6 4 10 / .45);

  /* liturgical colours: --s-* for text and dots, --sw-* for swatches */
  --s-green: #6FA97B; --s-violet: #A88BD2; --s-white: #C9A44C; --s-red: #DE7682; --s-rose: #D99AAE;
  --sw-green: #4F8A5B; --sw-violet: #6B4E8E; --sw-white: #F4ECDA; --sw-red: #B4404E; --sw-rose: #C98A9E;

  --serif: "Cormorant Garamond", "CG Fallback", "Iowan Old Style", "Palatino Linotype", Palatino, "Times New Roman", serif;
  --sans: "Figtree", "Figtree Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hebrew: "SBL Hebrew", "Times New Roman", "Arial Hebrew", serif;
  --ease: cubic-bezier(.2, .75, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --gutter: clamp(16px, 4.6vw, 64px);
  --wrap: 1200px;
  /* Text measures in "ch" of the WEB fonts, as em: a real `ch` is the "0" of whatever font is showing,
     so while the fallback shows (Arial's 0 is 13% narrower than Figtree's) every ch-capped line
     re-wraps when Figtree lands. calc(40 * var(--ch)) = 40ch of Figtree, whatever font is showing. */
  --ch: .64em;           /* Figtree "0" advance */
  --ch-serif: .477em;    /* Cormorant Garamond 600 "0" advance */
  --measure: calc(68 * var(--ch));
  --head-h: 76px;
  --radius: 20px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #F5EDDC; --fg: #241E31; --fg-2: rgb(36 30 49 / .84); --dim: rgb(36 30 49 / .68); --faint: rgb(36 30 49 / .45);
    --gold: #765B1C; --crimson: #A13446; --marian: #3E5BA8; --focus: #765B1C; --cap: #96762A;
    --line: rgb(36 30 49 / .12); --line-2: rgb(36 30 49 / .2); --card: rgb(255 252 244 / .5); --card-2: rgb(255 252 244 / .8);
    --glass: rgb(255 250 240 / .66); --glass-solid: rgb(250 244 231 / .96); --glass-hi: rgb(255 255 255 / .55);
    --rim: rgb(36 30 49 / .13); --rim-dim: rgb(36 30 49 / .08); --shadow: rgb(90 67 26 / .18);
    --amb-gold: .36; --amb-marian: .24; --amb-wine: .08; --grain-o: .07; --grain-mode: multiply;
    --sheet: #F1E7D3; --scrim: rgb(36 30 49 / .16);
    --s-green: #3F744A; --s-violet: #6B4E8E; --s-white: #765B1C; --s-red: #A13446; --s-rose: #94596D;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #F5EDDC; --fg: #241E31; --fg-2: rgb(36 30 49 / .84); --dim: rgb(36 30 49 / .68); --faint: rgb(36 30 49 / .45);
  --gold: #765B1C; --crimson: #A13446; --marian: #3E5BA8; --focus: #765B1C; --cap: #96762A;
  --line: rgb(36 30 49 / .12); --line-2: rgb(36 30 49 / .2); --card: rgb(255 252 244 / .5); --card-2: rgb(255 252 244 / .8);
  --glass: rgb(255 250 240 / .66); --glass-solid: rgb(250 244 231 / .96); --glass-hi: rgb(255 255 255 / .55);
  --rim: rgb(36 30 49 / .13); --rim-dim: rgb(36 30 49 / .08); --shadow: rgb(90 67 26 / .18);
  --amb-gold: .36; --amb-marian: .24; --amb-wine: .08; --grain-o: .07; --grain-mode: multiply;
  --sheet: #F1E7D3; --scrim: rgb(36 30 49 / .16);
  --s-green: #3F744A; --s-violet: #6B4E8E; --s-white: #765B1C; --s-red: #A13446; --s-rose: #94596D;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 16px); background: var(--bg); }
/* body stays TRANSPARENT: html paints --bg on the canvas, and an opaque body would paint over the
   .ambient glows and the grain (negative z-index layers in the root stacking context). */
body { margin: 0; min-height: 100vh; background: transparent; color: var(--fg); font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; text-rendering: optimizeLegibility; }
img, svg, picture, video { display: block; max-width: 100%; }
img { height: auto; }
svg { flex: none; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: currentColor; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote, table { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: 650; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: rgb(201 164 76 / .32); }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i-heart, .i-bookmark { fill: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: var(--fg); color: var(--bg); font-weight: 650; text-decoration: none; }
.skip:focus { top: 12px; }
.no-js .js-only, html:not(.js) .js-only { display: none !important; }

/* ---------- ambient glow + grain (fixed, behind everything; composited transforms only) ---------- */
.ambient { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; contain: strict; }
.amb { position: absolute; border-radius: 50%; will-change: transform; }
.amb--gold { width: 95vmax; height: 95vmax; left: -32vmax; top: -48vmax; opacity: var(--amb-gold);
  background: radial-gradient(closest-side, #C9A44C, rgb(201 164 76 / .42) 38%, transparent 72%); }
.amb--marian { width: 90vmax; height: 90vmax; right: -40vmax; bottom: -44vmax; opacity: var(--amb-marian);
  background: radial-gradient(closest-side, #6E8CD6, rgb(110 140 214 / .4) 40%, transparent 72%); }
.amb--wine { width: 70vmax; height: 70vmax; right: -24vmax; top: 18vh; opacity: var(--amb-wine);
  background: radial-gradient(closest-side, #B4404E, rgb(180 64 78 / .32) 42%, transparent 72%); }
@media (prefers-reduced-motion: no-preference) {
  .amb--gold { animation: drift-a 70s ease-in-out infinite alternate; }
  .amb--marian { animation: drift-b 86s ease-in-out infinite alternate; }
  .amb--wine { animation: drift-c 64s ease-in-out infinite alternate; }
}
@keyframes drift-a { to { transform: translate3d(14vw, 10vh, 0) scale(1.08); } }
@keyframes drift-b { to { transform: translate3d(-12vw, -14vh, 0) scale(.94); } }
@keyframes drift-c { to { transform: translate3d(-18vw, 26vh, 0) scale(1.1); } }
body::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../img/grain.png") 0 0 / 128px 128px; opacity: var(--grain-o); mix-blend-mode: var(--grain-mode); }

/* ---------- type ---------- */
.display { font: 600 clamp(2.75rem, 1.15rem + 6.6vw, 6.4rem)/.94 var(--serif); letter-spacing: -.022em; text-wrap: balance; }
.h1, .page-title { font: 600 clamp(2.45rem, 1.45rem + 4.1vw, 4.5rem)/1.0 var(--serif); letter-spacing: -.018em; text-wrap: balance; }
.h2 { font: 600 clamp(2.15rem, 1.3rem + 3.3vw, 4rem)/1.02 var(--serif); letter-spacing: -.016em; text-wrap: balance; }
.h3 { font: 600 clamp(1.5rem, 1.22rem + 1.05vw, 2rem)/1.12 var(--serif); letter-spacing: -.008em; text-wrap: balance; }
.h4 { font: 650 1.06rem/1.35 var(--sans); }
.display em, .h1 em, .page-title em, .h2 em, .h3 em { font-style: italic; font-weight: 500; color: var(--gold); }
/* Cormorant's default figures are old-style ("Genesis ı:ı", "in ı2 chapters"). Every element turns the
   OpenType lnum feature on: a `font:` shorthand anywhere resets font-variant-numeric AND
   font-feature-settings, so this can't rely on inheritance — :not(#_) gives the rule ID-level
   specificity, so no section class can undo it, and font-feature-settings combines with any
   font-variant-numeric a class sets (tabular-nums stays tabular). Don't add old-style figures. */
:not(#_), :not(#_)::before, :not(#_)::after, :not(#_)::first-letter { font-feature-settings: "lnum" 1; }
:not(#_)::marker { font-feature-settings: "lnum" 1; }
:is(h1, h2, h3, h4, .display, .h1, .page-title, .h2, .h3, .prose h2, .card__t, .pager__name, .faq__q, .ccc__t,
    .cta-band__t, .quote__who) { font-variant-numeric: lining-nums; }
.lede { font-size: clamp(1.13rem, 1.02rem + .45vw, 1.33rem); line-height: 1.55; color: var(--fg-2); max-width: calc(40 * var(--ch)); text-wrap: pretty; }
.body { font-size: clamp(1.06rem, 1rem + .2vw, 1.14rem); line-height: 1.68; color: var(--fg-2); max-width: calc(56 * var(--ch)); text-wrap: pretty; }
.body b, .lede b, .body strong { color: var(--fg); }
.fine { font-size: 14.5px; line-height: 1.55; color: var(--dim); max-width: calc(60 * var(--ch)); }
.report-line { margin-top: 32px; }
.report-line a { color: var(--gold); text-underline-offset: 3px; }
.center { text-align: center; margin-inline: auto; }
.dim { color: var(--dim); }
.gold { color: var(--gold); }
.halo { color: var(--gold); }
.kicker { display: flex; align-items: center; gap: 10px; font: 650 12.5px/1.25 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 20px; }
.kicker--center, .sec-head--center .kicker { justify-content: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; display: inline-block; }
.dot--gold { background: var(--gold-fill); box-shadow: 0 0 10px rgb(201 164 76 / .6); }
.dot--crimson { background: var(--crimson-fill); box-shadow: 0 0 10px rgb(180 64 78 / .5); }
.dot--marian { background: var(--marian-fill); box-shadow: 0 0 10px rgb(110 140 214 / .5); }
.dot--green { background: var(--sw-green); box-shadow: 0 0 10px rgb(79 138 91 / .55); }
.dot--dim { background: var(--faint); }
.sec-head { margin-bottom: clamp(32px, 4vw, 52px); }
.sec-head .h2, .sec-head .h3 { margin-bottom: 0; }
.sec-head .lede { margin-top: 22px; max-width: calc(46 * var(--ch)); }
.sec-head--center { text-align: center; }
.sec-head--center .lede { margin-inline: auto; }

/* ---------- layout ---------- */
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.page { padding-top: calc(var(--head-h) + clamp(24px, 4vw, 48px)); padding-bottom: clamp(40px, 6vw, 72px); }
.page--prose > * { max-width: var(--measure); }
.band { position: relative; padding-block: clamp(56px, 7vw, 96px); overflow-x: clip; }
.band--tight { padding-block: clamp(48px, 6vw, 80px); }
.stack > * + * { margin-top: var(--stack, 20px); }
.grid-2 { display: grid; gap: clamp(20px, 3vw, 40px); }
@media (min-width: 860px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
.section + .section { margin-top: clamp(56px, 8vw, 96px); }
.section > .h2, .section > .h3 { margin-bottom: 22px; }
/* two-column content with a sticky aside (layout="aside", or .split by hand) */
.split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
.split > * { min-width: 0; }   /* a wide table scrolls inside .table-wrap, never pushes the page */
.split__aside > * + * { margin-top: 20px; }
@media (min-width: 1024px) {
  .split { grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(48px, 5vw, 88px); align-items: start; }
  .split__aside { position: sticky; top: calc(var(--head-h) + 24px); }
}

/* ---------- prose (articles, legal, long reading) ---------- */
.prose { max-width: var(--measure); color: var(--fg-2); font-size: 1.0625rem; line-height: 1.72; }
.prose > * + * { margin-top: 1.05em; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font: 600 clamp(1.8rem, 1.35rem + 1.7vw, 2.5rem)/1.08 var(--serif); color: var(--fg); margin-top: 2.1em; letter-spacing: -.01em; text-wrap: balance; }
.prose h3 { font: 600 clamp(1.35rem, 1.2rem + .6vw, 1.6rem)/1.18 var(--serif); color: var(--fg); margin-top: 1.7em; }
.prose h4 { font: 650 1.02rem/1.4 var(--sans); color: var(--fg); margin-top: 1.5em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: .6em; }
.prose a:not([class]) { color: var(--gold); }
.prose strong, .prose b { color: var(--fg); }
.prose ul:not([class]), .prose ol:not([class]) { padding-left: 1.3em; }
.prose ul:not([class]) { list-style: disc; } .prose ol:not([class]) { list-style: decimal; }
.prose li + li { margin-top: .4em; }
.prose li::marker { color: var(--gold); }
.prose > blockquote, .prose blockquote:not([class]) { border-left: 2px solid var(--gold-fill); padding: .2em 0 .2em 1.1em; font: 500 1.28rem/1.45 var(--serif); color: var(--fg); }
.prose hr { border: 0; height: 1px; background: var(--line-2); margin-block: 2.4em; }
.prose code { font-size: .92em; padding: .1em .35em; border-radius: 6px; background: var(--card-2); }
.prose > :is(.table-wrap, .verse, .notice, .scard, .quotes, .ccc-list, .cards, .day, figure) { margin-top: 1.6em; margin-bottom: 1.6em; }
.prose > .verse { max-width: none; }

/* ---------- glass ---------- */
.glass { background: linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--glass);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 10px 30px -14px var(--shadow); }

/* ---------- header (one backdrop-filter surface; content fades under it) ---------- */
.site-head { position: fixed; inset: 0 0 auto; z-index: 50; padding: max(10px, env(safe-area-inset-top)) var(--gutter) 0; pointer-events: none; view-transition-name: site-head; }
.site-head::before { content: ""; position: absolute; inset: 0 0 -54px; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 78%, transparent) 42%, color-mix(in srgb, var(--bg) 30%, transparent) 72%, transparent 100%); }
.site-head__bar { position: relative; pointer-events: auto; max-width: calc(var(--wrap) + 24px); margin-inline: auto; height: 58px;
  display: flex; align-items: center; gap: 10px; padding: 0 8px 0 14px; border-radius: 22px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 12px 32px -18px var(--shadow); }
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; flex: none; }
.brand img { border-radius: 8px; box-shadow: 0 0 0 1px var(--rim-dim); }
.brand__word { font: 600 25px/1 var(--serif); letter-spacing: .005em; }
.site-nav { display: none; margin-inline: auto; gap: 2px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 13px; border-radius: 13px; text-decoration: none; font: 550 14.5px/1 var(--sans); color: var(--fg-2); transition: color .2s, background-color .2s; }
.site-nav a:hover { color: var(--fg); background: var(--card-2); }
.site-nav a[aria-current="page"] { color: var(--fg); box-shadow: inset 0 -2px 0 -0px color-mix(in srgb, var(--gold-fill) 70%, transparent); border-radius: 13px 13px 4px 4px; }
.site-head__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.site-head__end .theme-toggle { display: none; }
/* The official badge, as is: no hover lift, ring or border (owner, 2026-10-20). Keyboard users
   still get a focus outline (:focus-visible only — never on mouse hover or click). */
.badge { display: inline-flex; align-items: center; min-height: 44px; flex: none; border: 0; background: none; box-shadow: none; cursor: pointer; }
.badge img { display: block; height: auto; border: 0; }
.badge:focus { outline: none; }
.badge:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 8px; }
.iconbtn { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--fg); flex: none;
  background: linear-gradient(180deg, var(--glass-hi), transparent 60%), var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim); transition: transform .25s var(--ease); }
.iconbtn:active { transform: scale(.94); }
.theme-toggle .ic-moon, .menu__theme .ic-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ic-sun, :root[data-theme="light"] .menu__theme .ic-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ic-moon, :root[data-theme="light"] .menu__theme .ic-moon { display: block; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .theme-toggle .ic-sun, :root:not([data-theme="dark"]) .menu__theme .ic-sun { display: none; }
  :root:not([data-theme="dark"]) .theme-toggle .ic-moon, :root:not([data-theme="dark"]) .menu__theme .ic-moon { display: block; }
}
html:not(.js) .theme-toggle, html:not(.js) .menu__theme { display: none !important; }
/* mobile menu: <details>, works without JS.
   The scrim is .site-head::after, NOT a pseudo inside the bar: the bar's backdrop-filter makes it the
   containing block of fixed descendants, so a scrim in there only covered the bar — over the close
   button, brand and badge (taps hit <details> and did nothing). Here it covers the viewport at
   z-index -1 inside the header's stacking context: under the bar, over the page; a tap on it
   lands on .site-head, outside the menu, and site.js closes the menu. */
.menu { position: relative; }
.site-head:has(.menu[open])::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: auto; background: var(--scrim); }
@media (prefers-reduced-motion: no-preference) { .site-head:has(.menu[open])::after { animation: scrim-in .3s var(--ease-out); } }
@keyframes scrim-in { from { opacity: 0; } }
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu__btn .ic-shut { display: none; }
.menu[open] .menu__btn .ic-open { display: none; }
.menu[open] .menu__btn .ic-shut { display: block; }
/* The panel sits inside the bar, whose backdrop-filter makes it the panel's backdrop root: the
   panel's own blur can't reach the page, so it is OPAQUE (a 98.5% sheet still let the page's text
   ghost through visibly in Daylight, 2026-10-20); the glass look is a top sheen over the solid sheet. */
.menu__panel { position: absolute; right: -8px; top: calc(100% + 14px); width: min(360px, calc(100vw - 2 * var(--gutter))); padding: 10px;
  border-radius: 24px; background: linear-gradient(180deg, color-mix(in srgb, var(--glass-hi) 60%, transparent), transparent 46%), var(--sheet);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim), 0 30px 60px -20px var(--shadow); }
@media (prefers-reduced-motion: no-preference) { .menu[open] .menu__panel { animation: menu-in .32s var(--ease-out); } }
@keyframes menu-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.menu__nav { display: flex; flex-direction: column; }
.menu__nav a { display: flex; align-items: center; min-height: 52px; padding: 0 16px; border-radius: 16px; text-decoration: none; font: 600 17.5px/1 var(--sans); color: var(--fg); }
.menu__nav a:hover, .menu__nav a[aria-current="page"] { background: var(--card-2); }
.menu__nav a[aria-current="page"]::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--gold-fill); margin-left: auto; }
.menu__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; padding: 12px 6px 4px 8px; border-top: 1px solid var(--line); }
.menu__theme { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 0 14px; border-radius: 14px; font: 600 15px/1 var(--sans); color: var(--fg-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.menu__theme-v { color: var(--gold); font-weight: 650; }
@media (min-width: 1024px) {
  .site-nav { display: flex; }
  .site-head__end { margin-left: 0; }
  .site-head__end .theme-toggle { display: grid; }
  .menu { display: none; }
}
@media (max-width: 359.98px) { .site-head__badge { display: none; } }

/* ---------- page head ---------- */
.page-head { margin-bottom: clamp(36px, 5vw, 60px); }
.page-head .page-title { max-width: calc(20 * var(--ch-serif)); }
.page-lede { margin-top: 22px; max-width: calc(58 * var(--ch)); }
.page-meta { margin-top: 18px; font-size: 14.5px; color: var(--dim); }
.page-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; }
.crumbs { margin-bottom: 18px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2px; font-size: 14.5px; color: var(--dim); }
.crumbs li { display: inline-flex; align-items: center; min-height: 36px; }
.crumbs li + li::before { content: "›"; margin: 0 8px 0 6px; color: var(--faint); }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; color: var(--dim); }
.crumbs a:hover { color: var(--fg); }
.crumbs [aria-current] { color: var(--fg-2); }

/* ---------- buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px;
  font: 650 15.5px/1 var(--sans); text-decoration: none; color: var(--fg); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim); transition: transform .25s var(--ease), background-color .25s; }
.btn:hover { background: color-mix(in srgb, var(--fg) 12%, transparent); }
.btn:active { transform: scale(.97); }
.btn--gold { color: #15121C; background: linear-gradient(180deg, #E4C673, #C9A44C 58%, #B48F3A); box-shadow: inset 0 0 0 1px rgb(255 240 200 / .5), 0 0 24px rgb(201 164 76 / .25); }
.btn--gold:hover { background: linear-gradient(180deg, #EBD083, #CFAA52 58%, #B8933E); }
.more { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 650; color: var(--gold); text-decoration: none; }
.more svg { transition: transform .3s var(--ease); }
.more:hover svg { transform: translateX(3px); }

/* ---------- pills, tags ---------- */
.pill { display: inline-flex; align-items: center; vertical-align: 2px; padding: 3px 9px; border-radius: 999px; font: 700 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--gold); box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 45%, transparent); white-space: nowrap; }
.pill--green { color: var(--s-green); } .pill--marian { color: var(--marian); } .pill--crimson { color: var(--crimson); } .pill--dim { color: var(--dim); }
.tag { display: inline-flex; align-items: center; min-height: 34px; padding: 0 13px; border-radius: 999px; font: 550 14px/1.2 var(--sans); color: var(--fg-2); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); text-decoration: none; }
a.tag { min-height: 44px; }
a.tag:hover { color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.tag--gold { color: var(--gold); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- the verse (gold illuminated drop cap — the signature) ---------- */
.verse { --vs: clamp(1.6rem, 1.25rem + 1.3vw, 2.15rem); max-width: min(100%, calc(var(--vs) * 18)); }
.verse--sm { --vs: 1.35rem; max-width: min(100%, calc(var(--vs) * 24)); }
.verse--lg { --vs: clamp(2rem, 1.45rem + 2.2vw, 3.1rem); }
.verse--xl { --vs: clamp(2.2rem, 1.35rem + 3.6vw, 3.9rem); }
.vtext { font: 600 var(--vs)/1.16 var(--serif); color: var(--fg); letter-spacing: -.004em; text-wrap: pretty; hanging-punctuation: first; }
.verse--cap .vtext::first-letter { color: var(--cap); font-weight: 600; text-shadow: 0 0 22px rgb(201 164 76 / .3); }
@supports (initial-letter: 2) { .verse--cap .vtext::first-letter { initial-letter: 2; margin-right: .1em; } }
@supports not (initial-letter: 2) { .verse--cap .vtext::first-letter { float: left; font-size: 2.55em; line-height: .8; padding: .06em .08em 0 0; } }
.verse__latin { margin-top: 14px; font: italic 500 calc(var(--vs) * .62)/1.35 var(--serif); color: var(--dim); }
.vref { margin-top: 14px; font: 600 13px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.vref a { color: var(--gold); text-decoration: none; }
.vref a:hover { text-decoration: underline; }
.verse__tr { letter-spacing: .06em; }

/* ---------- quotation (a saint in the comments) ---------- */
.quote { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 0; border-top: 1px solid var(--line); }
.quote:first-child { border-top: 0; }
.avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font: 600 19px/1 var(--serif); color: #F4ECDA; background: var(--av, #6B5A3E); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); }
.quote__who { font: 700 15px/1.35 var(--sans); color: var(--fg); }
.quote__who a { text-decoration: none; } .quote__who a:hover { text-decoration: underline; }
.quote__about { font-weight: 450; color: var(--dim); }
.quote__label { display: flex; align-items: center; gap: 7px; margin-top: 4px; font: 650 11.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.quote__label .dot { width: 6px; height: 6px; box-shadow: none; }
.quote--gold .quote__label { color: var(--gold); }
.quote--crimson .quote__label { color: var(--crimson); }
.quote__q p { margin-top: 8px; font: 600 1.32rem/1.3 var(--serif); color: var(--fg); text-wrap: pretty; }
.quote__src { margin-top: 8px; font-size: 14px; color: var(--dim); }
.quote__src--attr { color: var(--crimson); }
.quotes { border-radius: var(--radius); padding: 4px 20px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); }

/* ---------- sourced cards (Challoner, book intros, Latin …) ---------- */
.scard { position: relative; padding: 18px 20px 18px 22px; border-radius: 18px; background: var(--card-2); overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent); }
.scard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rail, var(--gold-fill)); opacity: .9; }
.scard--marian { --rail: var(--marian-fill); } .scard--crimson { --rail: var(--crimson-fill); }
.scard--plain { --rail: color-mix(in srgb, var(--fg) 50%, transparent); } .scard--vellum { --rail: var(--vellum); }
.card__k { font: 700 11.5px/1.35 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); }
.scard--marian .card__k { color: var(--marian); } .scard--crimson .card__k { color: var(--crimson); } .scard--plain .card__k, .scard--vellum .card__k { color: var(--fg-2); }
.scard__b { margin-top: 6px; color: var(--fg); font-size: 16px; line-height: 1.55; }
.scard__b > * + * { margin-top: .6em; }
.src-line { margin-top: 10px; font-size: 13.5px; line-height: 1.4; color: var(--dim); }
.src-line a { text-decoration: none; } .src-line a:hover { text-decoration: underline; }
.scards { display: grid; gap: 12px; }

/* ---------- Catechism references ---------- */
.ccc { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-height: 44px; padding: 10px 0; text-decoration: none; color: var(--fg); }
.ccc__cf { font-style: italic; color: var(--dim); }
.ccc__p { font: 700 13px/1.3 var(--sans); letter-spacing: .06em; color: var(--marian); white-space: nowrap; }
.ccc__t { font: 600 1.12rem/1.3 var(--serif); }
.ccc__via { display: inline-flex; align-items: center; gap: 5px; align-self: center; font: 600 12.5px/1.2 var(--sans); color: var(--dim); white-space: nowrap; }
.ccc .i { align-self: center; color: var(--dim); }
.ccc:hover .ccc__t { text-decoration: underline; text-decoration-color: var(--line-2); }
.ccc-list li + li { border-top: 1px solid var(--line); }

/* ---------- notices (provenance, known gaps) ---------- */
.notice { position: relative; padding: 14px 18px 14px 20px; border-radius: 16px; background: color-mix(in srgb, var(--rail, var(--marian-fill)) 9%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--rail, var(--marian-fill)) 22%, transparent); font-size: 15px; line-height: 1.55; color: var(--fg-2); }
.notice::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--rail, var(--marian-fill)); }
.notice--warn { --rail: var(--crimson-fill); } .notice--quiet { --rail: var(--faint); }
.notice__t { font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--fg); margin-bottom: 4px; }
.notice a { color: var(--gold); }

/* ---------- tables ---------- */
.table-wrap { position: relative; overflow-x: auto; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.table-wrap.is-scroll-r { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
.table-wrap.is-scroll-l { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px); mask-image: linear-gradient(90deg, transparent, #000 44px); }
.table-wrap.is-scroll-l.is-scroll-r { -webkit-mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, transparent, #000 44px, #000 calc(100% - 44px), transparent); }
.table { width: 100%; border-collapse: collapse; font-size: 15.5px; line-height: 1.45; }
.table caption { caption-side: top; text-align: left; padding: 16px 18px 4px; font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.table th, .table td { padding: 13px 18px; text-align: left; vertical-align: top; }
.table thead th { font: 700 12px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.table tbody tr + tr > * { border-top: 1px solid var(--line); }
.table tbody th { font-weight: 650; color: var(--fg); }
.table td { color: var(--fg-2); }
.table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table a { color: var(--gold); }
.table--facts th { width: 34%; min-width: 120px; color: var(--dim); font-weight: 600; }
.table--facts td { color: var(--fg); }
.table-wrap[tabindex]:focus-visible { outline-offset: 2px; border-radius: var(--radius); }
@media (max-width: 599.98px) {
  .table th, .table td { padding: 12px 14px; }
  .table thead th { white-space: normal; }   /* a long column title must not set the table's width */
}
/* Stacked rows (phones): site.js adds .is-stacked to a [data-stack] table that would scroll sideways
   below 600 px. Each row becomes a card; each cell shows its column label (data-label, from core). */
.table-wrap.is-compact > .table { font-size: 14.5px; }
.table-wrap.is-compact > .table > * > tr > * { padding-inline: 7px; }
.table-wrap.is-compact > .table > * > tr > :first-child { padding-left: 12px; }
.table-wrap.is-compact > .table > * > tr > :last-child { padding-right: 12px; }
.table-wrap.is-stacked { overflow: visible; border-radius: 0; background: none; box-shadow: none; -webkit-mask-image: none; mask-image: none; }
.table-wrap.is-stacked > .table { display: block; width: auto; min-width: 0; }
.table-wrap.is-stacked > .table > caption { display: block; padding: 8px 2px 12px; }
.table-wrap.is-stacked > .table > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-wrap.is-stacked > .table > tbody { display: grid; gap: 10px; }
.table-wrap.is-stacked > .table > tbody > tr { display: block; padding: 14px 18px 15px; border-radius: 18px; background: var(--card-2);
  box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent); }
.table-wrap.is-stacked > .table > tbody > tr > * { display: block; width: auto; min-width: 0; height: auto; padding: 0; border: 0; text-align: left; white-space: normal; }
.table-wrap.is-stacked > .table > tbody > tr > * + * { margin-top: 10px; }
.table-wrap.is-stacked > .table > tbody > tr > :empty { display: none; }
.table-wrap.is-stacked > .table > tbody > tr > [data-label]::before { content: attr(data-label); content: attr(data-label) / ""; display: block; margin-bottom: 2px;
  font: 700 11px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }

/* ---------- cards grid ---------- */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
@media (min-width: 720px) { .cards--2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .cards--3 { grid-template-columns: repeat(3, 1fr); } .cards--4 { grid-template-columns: repeat(4, 1fr); } }
.card { position: relative; padding: 22px 22px 20px; border-radius: var(--radius); background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent); transition: transform .35s var(--ease), box-shadow .35s; }
.card__t { font: 600 1.42rem/1.15 var(--serif); color: var(--fg); margin-top: 4px; text-wrap: balance; }
.card__t a { text-decoration: none; }
.card__t a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card__b { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--fg-2); }
.card__meta { margin-top: 12px; font-size: 14px; color: var(--dim); }
.card--link:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px var(--rim), inset 0 1px 0 var(--rim), 0 18px 36px -22px var(--shadow); }

/* ---------- pager ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: clamp(40px, 6vw, 64px); }
.pager__cell { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 14px 18px; border-radius: 18px; text-decoration: none; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim); transition: background-color .25s; min-width: 0; }
.pager__cell:hover { background: color-mix(in srgb, var(--fg) 11%, transparent); }
.pager__cell--next { justify-content: flex-end; text-align: right; }
.pager__cell--empty { background: none; box-shadow: none; }
.pager__cell > span { min-width: 0; }
.pager__sub { display: block; font: 650 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.pager__name { display: block; margin-top: 3px; font: 600 1.2rem/1.2 var(--serif); color: var(--fg); overflow-wrap: anywhere; }
.pager .i { color: var(--gold); }

/* ---------- FAQ ---------- */
.faq { border-top: 1px solid var(--line); }
.faq__item { padding: 22px 0 24px; border-bottom: 1px solid var(--line); }
.faq__q { font: 600 clamp(1.3rem, 1.15rem + .6vw, 1.6rem)/1.2 var(--serif); color: var(--fg); text-wrap: balance; }
.faq__a { margin-top: 10px; color: var(--fg-2); max-width: calc(64 * var(--ch)); }
.faq__a > * + * { margin-top: .7em; }
.faq__a a { color: var(--gold); }
.faq--collapse .faq__item { padding: 0; }
.faq--collapse summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none; }
.faq--collapse summary::-webkit-details-marker { display: none; }
.faq--collapse summary::after { content: "+"; font: 300 28px/1 var(--sans); color: var(--gold); transition: transform .3s var(--ease); }
.faq--collapse details[open] summary::after { transform: rotate(45deg); }
.faq--collapse .faq__a { margin: 0 0 22px; }

/* ---------- stats, ticks, toc ---------- */
.stats { display: flex; flex-wrap: wrap; gap: 18px clamp(26px, 3.4vw, 48px); }
.stats li { display: flex; flex-direction: column; gap: 2px; }
.stats b { font: 600 clamp(2rem, 1.6rem + 1.3vw, 2.8rem)/1 var(--serif); color: var(--gold); letter-spacing: -.01em; font-variant-numeric: lining-nums; }
.stats span { font-size: 14.5px; color: var(--dim); line-height: 1.35; }
.ticks { display: grid; gap: 12px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; color: var(--fg-2); }
.ticks .i { color: var(--gold); margin-top: 5px; }
.toc { padding: 18px 20px; border-radius: var(--radius); background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim); }
.toc__t { font: 700 12px/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.toc a { display: flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--fg-2); font-size: 15.5px; }
.toc a:hover { color: var(--gold); }
.toc__p { margin: 4px 0 14px; }

/* ---------- radio tabs (work without JS) ---------- */
.rtabs__in { position: absolute; opacity: 0; pointer-events: none; }
.rtabs__bar { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim); max-width: 460px; }
.rtabs__bar label { position: relative; z-index: 1; display: grid; place-items: center; min-height: 44px; padding: 0 10px; border-radius: 999px; font: 650 15px/1.1 var(--sans); color: var(--dim); cursor: pointer; transition: color .3s, background-color .3s; text-align: center; }
.rtabs__bar label:hover { color: var(--fg); }
.rtabs__in:nth-of-type(1):checked ~ .rtabs__bar label:nth-of-type(1),
.rtabs__in:nth-of-type(2):checked ~ .rtabs__bar label:nth-of-type(2),
.rtabs__in:nth-of-type(3):checked ~ .rtabs__bar label:nth-of-type(3),
.rtabs__in:nth-of-type(4):checked ~ .rtabs__bar label:nth-of-type(4) { color: #15121C; background: #E9DFC9; box-shadow: 0 2px 10px -3px rgb(0 0 0 / .35); }
.rtabs__in:nth-of-type(1):focus-visible ~ .rtabs__bar label:nth-of-type(1),
.rtabs__in:nth-of-type(2):focus-visible ~ .rtabs__bar label:nth-of-type(2),
.rtabs__in:nth-of-type(3):focus-visible ~ .rtabs__bar label:nth-of-type(3),
.rtabs__in:nth-of-type(4):focus-visible ~ .rtabs__bar label:nth-of-type(4) { outline: 2px solid var(--focus); outline-offset: 2px; }
.rtabs__panel { display: none; }
.rtabs__in:nth-of-type(1):checked ~ .rtabs__panels > .rtabs__panel:nth-child(1),
.rtabs__in:nth-of-type(2):checked ~ .rtabs__panels > .rtabs__panel:nth-child(2),
.rtabs__in:nth-of-type(3):checked ~ .rtabs__panels > .rtabs__panel:nth-child(3),
.rtabs__in:nth-of-type(4):checked ~ .rtabs__panels > .rtabs__panel:nth-child(4) { display: block; }
@media (prefers-reduced-motion: no-preference) { .rtabs__panel { animation: tab-in .45s var(--ease-out); } }
@keyframes tab-in { from { opacity: 0; transform: translateY(8px); } }

/* ---------- segmented control (JS switches, e.g. CPDV · Latin · side by side) ---------- */
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim); }
.seg__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; font: 650 15px/1 var(--sans); color: var(--dim); transition: color .3s, background-color .3s; white-space: nowrap; }
.seg__btn:hover { color: var(--fg); }
.seg__btn[aria-pressed="true"] { color: #15121C; background: linear-gradient(180deg, #E4C673, #C9A44C 60%, #B48F3A); box-shadow: inset 0 0 0 1px rgb(255 240 200 / .5), 0 0 18px rgb(201 164 76 / .3); }
html:not(.js) .seg[data-needs-js] { display: none; }
/* unselected labels sit on a light translucent track in daylight: --dim there measured < 4.5:1 */
:root[data-theme="light"] :is(.seg__btn:not([aria-pressed="true"]), .rtabs__bar label):not(:hover) { color: var(--fg-2); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) :is(.seg__btn:not([aria-pressed="true"]), .rtabs__bar label):not(:hover) { color: var(--fg-2); }
}
/* view switch contract (site.js): hide the other text only once JS has chosen a view */
[data-view="cpdv"] [data-show="latin"], [data-view="latin"] [data-show="cpdv"] { display: none; }
@media (min-width: 760px) { [data-view="both"] .sbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 32px; } }

/* ---------- passage for long reading (core.verse_list; chapter pages) ---------- */
.vlist-box { position: relative; }
.vlist__seg { margin-bottom: 26px; flex-wrap: wrap; }
.vlist__note { margin: -10px 0 22px; font-size: 14px; color: var(--dim); }
.vlist { max-width: calc(66 * var(--ch)); counter-reset: none; }
[data-view="both"] .vlist { max-width: none; }
.vlist__v { scroll-margin-top: calc(var(--head-h) + 24px); padding: 5px 0; }
.vlist__v:target { background: linear-gradient(90deg, color-mix(in srgb, var(--gold-fill) 14%, transparent), transparent 70%); border-radius: 12px; }
.vlist__t { font: 500 1.3rem/1.55 var(--serif); color: var(--fg); text-wrap: pretty; }
.vlist__t--la { margin-top: 2px; font-style: italic; font-size: 1.12rem; color: var(--dim); }
[data-view="latin"] .vlist__t--la { font-size: 1.3rem; color: var(--fg); }
.vlist__n { display: inline-block; min-width: 1.6em; margin-right: .35em; font: 650 12.5px/1 var(--sans); color: var(--gold); text-decoration: none; vertical-align: .32em; font-variant-numeric: tabular-nums; }
a.vlist__n:hover { text-decoration: underline; }
.vlist__t--cap::first-letter { color: var(--cap); font-weight: 600; text-shadow: 0 0 22px rgb(201 164 76 / .3); }
@supports (initial-letter: 2) { .vlist__t--cap::first-letter { initial-letter: 2; margin-right: .08em; } }
@supports not (initial-letter: 2) { .vlist__t--cap::first-letter { float: left; font-size: 3.1em; line-height: .8; padding: .05em .06em 0 0; } }
.vlist__t--cap .vlist__n { display: none; }
@media (min-width: 760px) { [data-view="both"] .vlist__t--la { margin-top: 0; font-size: 1.18rem; } }

/* ---------- phone frame (screenshots: .phone--img; CSS screens: see home.css) ---------- */
.phone { --sw: min(calc(100vw - 96px), 300px); --bz: calc(var(--sw) * .034); position: relative; flex: none; width: calc(var(--sw) + var(--bz) * 2); padding: var(--bz);
  border-radius: calc(var(--sw) * .172); background: linear-gradient(155deg, #4a4452 0%, #19161e 16%, #0b0a0e 52%, #17141b 86%, #3b3542 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 0 0 calc(var(--bz) * .5) #050407, 0 60px 100px -40px rgb(0 0 0 / .6), 0 30px 50px -30px rgb(0 0 0 / .55); }
:root[data-theme="light"] .phone { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 0 0 calc(var(--bz) * .5) #050407, 0 60px 100px -40px rgb(90 67 26 / .45), 0 30px 50px -30px rgb(60 44 20 / .35); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .phone { box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 0 0 calc(var(--bz) * .5) #050407, 0 60px 100px -40px rgb(90 67 26 / .45), 0 30px 50px -30px rgb(60 44 20 / .35); } }
.phone__screen { position: relative; width: var(--sw); aspect-ratio: 660 / 1434; border-radius: calc(var(--sw) * .14); overflow: clip; isolation: isolate; container-type: inline-size; background: var(--bg); transform: translateZ(0); --u: calc(100cqw / 402); }
.phone--img .phone__screen { background: #0b0a0e; }
.phone--img img { width: 100%; height: 100%; object-fit: cover; color: transparent; }
.phone__island { position: absolute; top: calc(var(--bz) + var(--sw) * .027); left: 50%; width: calc(var(--sw) * .285); height: calc(var(--sw) * .083); transform: translateX(-50%); border-radius: 999px; background: #000; z-index: 6; }
.phone-fig { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.phone-fig figcaption { font-size: 14px; color: var(--dim); text-align: center; max-width: calc(34 * var(--ch)); }

/* ---------- liturgical colour swatch + day card ---------- */
.swatch { display: inline-flex; align-items: center; gap: 8px; }
.swatch i { width: 12px; height: 12px; border-radius: 50%; background: var(--sw, var(--sw-green)); box-shadow: inset 0 0 0 1px rgb(0 0 0 / .25), 0 0 0 1px var(--rim-dim); flex: none; }
.swatch--green { --sw: var(--sw-green); } .swatch--violet { --sw: var(--sw-violet); } .swatch--white { --sw: var(--sw-white); }
.swatch--red { --sw: var(--sw-red); } .swatch--rose { --sw: var(--sw-rose); } .swatch--black { --sw: #111; }
.day { --sc: var(--s-green); position: relative; isolation: isolate; overflow: hidden; padding: clamp(20px, 3vw, 30px); border-radius: 26px;
  background: linear-gradient(180deg, var(--glass-hi), transparent 50%), var(--card-2);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent), inset 0 1px 0 var(--rim), 0 20px 50px -30px var(--shadow); }
.day--violet { --sc: var(--s-violet); } .day--white { --sc: var(--s-white); } .day--red { --sc: var(--s-red); } .day--rose { --sc: var(--s-rose); }
.day__tint { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--sc) 26%, transparent), transparent 70%); }
.day__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.day__h { font: 700 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sc); }
.day__date { font-size: 14.5px; color: var(--dim); }
.day__title { margin-top: 10px; font: 600 clamp(1.55rem, 1.25rem + 1.3vw, 2.25rem)/1.1 var(--serif); color: var(--fg); text-wrap: balance; }
.day__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; }
.day__meta dt { font: 650 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.day__meta dd { margin-top: 3px; font-size: 15.5px; color: var(--fg); }
.day__meta a { color: var(--gold); }
.day__reads { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.day__k { font: 650 11.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
.day__reads li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 14px; padding: 7px 0; }
.day__reads li + li { border-top: 1px solid var(--line); }
.day__slot { font-size: 14.5px; color: var(--dim); }
.day__cit { font-weight: 650; color: var(--fg); }
.day__prov { margin-top: 10px; font-size: 13.5px; color: var(--dim); }
.day__links { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 14px; }
.day__links a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 650; color: var(--gold); text-decoration: none; }
@media (min-width: 900px) { .day__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 73 books grid ---------- */
.books { display: grid; gap: 26px; }
.books__label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; font: 650 12.5px/1.3 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--dim); }
.books__label span { font: italic 600 18px/1 var(--serif); letter-spacing: 0; color: var(--gold); }
.books__tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr)); gap: 6px; }
.tile { display: grid; place-items: center; min-height: 46px; padding: 0 3px; border-radius: 12px; text-decoration: none; font: 650 12.5px/1.1 var(--sans); color: var(--fg-2); text-align: center;
  background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 color-mix(in srgb, var(--rim) 50%, transparent); transition: transform .25s var(--ease), color .2s, background-color .2s; }
a.tile:hover { transform: translateY(-2px); color: var(--fg); background: color-mix(in srgb, var(--fg) 12%, transparent); }
.tile__n { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tile--dc { color: var(--gold); background: color-mix(in srgb, var(--gold-fill) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 55%, transparent); }
.books__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 24px; }
.books__key { display: flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--dim); }
.books__swatch { width: 22px; height: 14px; border-radius: 5px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-fill) 60%, transparent); background: color-mix(in srgb, var(--gold-fill) 12%, transparent); }
@media (min-width: 720px) { .books__tiles { grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); } }

/* ---------- CTA band ---------- */
.cta-band { overflow-x: clip; padding-block: clamp(40px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.cta-band__card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(36px, 6vw, 64px) clamp(20px, 4vw, 48px);
  border-radius: 30px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rim-dim), inset 0 1px 0 var(--rim); }
.cta-band__card::before { content: ""; position: absolute; z-index: -1; left: 50%; top: -40%; width: 120%; aspect-ratio: 1.6; transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(201 164 76 / .22), transparent 72%); }
.cta-band__t { font: 600 clamp(2rem, 1.35rem + 2.6vw, 3.2rem)/1.04 var(--serif); letter-spacing: -.014em; text-wrap: balance; max-width: calc(18 * var(--ch-serif)); }
.cta-band__s { margin: 14px auto 26px; color: var(--fg-2); max-width: calc(46 * var(--ch)); text-wrap: pretty; }
.cta-band__fine { margin-top: 14px; font-size: 14px; color: var(--dim); }

/* ---------- footer ---------- */
.site-foot { position: relative; padding: clamp(56px, 7vw, 88px) 0 calc(36px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg) 70%, transparent) 30%); }
.site-foot__top { display: grid; gap: 40px; }
.site-foot__brand p { margin: 14px 0 20px; color: var(--dim); max-width: calc(34 * var(--ch)); font-size: 15.5px; }
.site-foot__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 20px; }
.foot-h { font: 700 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg); margin-bottom: 8px; }
.site-foot__nav a { display: flex; align-items: center; min-height: 44px; text-decoration: none; font-size: 15.5px; color: var(--dim); }
.site-foot__nav a:hover { color: var(--fg); }
.site-foot__src { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; line-height: 1.6; color: var(--dim); max-width: calc(100 * var(--ch)); }
.site-foot__src a { color: var(--fg-2); }
.site-foot__legal { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px; font-size: 13.5px; color: var(--dim); }
@media (min-width: 900px) {
  .site-foot__top { grid-template-columns: minmax(260px, 1fr) 2.4fr; gap: 64px; }
  .site-foot__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- motion: reveal on scroll (only when JS opted in; never hides content without JS) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .js .rv { animation: rv-in linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
  }
  @supports not (animation-timeline: view()) {
    .js .rv { opacity: 0; translate: 0 22px; transition: opacity .9s var(--ease), translate 1.1s var(--ease-out); }
    .js .rv.in { opacity: 1; translate: none; }
  }
  /* @view-transition { navigation: auto } is added by the inline head script (top-level windows only) */
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
}
@keyframes rv-in { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ---------- Windows High Contrast / forced colors ----------
   Selected states and control edges are drawn with gradients and box-shadows, which forced colors
   drop: give controls real borders and paint the selected one in Highlight. Focus outlines survive. */
@media (forced-colors: active) {
  .btn, .iconbtn, .seg, .tag, .card, .scard, .notice, .quotes, .pager__cell, .rtabs__bar, .menu__theme, .tile, .day,
  .table-wrap, .cta-band__card, .site-head__bar, .menu__panel { border: 1px solid CanvasText; }
  .seg__btn[aria-pressed="true"], [aria-pressed="true"], [aria-selected="true"],
  .rtabs__in:nth-of-type(1):checked ~ .rtabs__bar label:nth-of-type(1),
  .rtabs__in:nth-of-type(2):checked ~ .rtabs__bar label:nth-of-type(2),
  .rtabs__in:nth-of-type(3):checked ~ .rtabs__bar label:nth-of-type(3),
  .rtabs__in:nth-of-type(4):checked ~ .rtabs__bar label:nth-of-type(4) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .site-nav a[aria-current="page"], .menu__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
  .dot, .swatch i, .verse--cap .vtext::first-letter { forced-color-adjust: none; }
  .ambient, body::after { display: none; }
}

/* ---------- print (content pages) ---------- */
@media print {
  :root { --bg: #fff; --fg: #111; --fg-2: #222; --dim: #555; --faint: #777; --gold: #6b5317; --line: #ddd; --line-2: #bbb; --card: transparent; --card-2: transparent; --rim-dim: #ddd; color-scheme: light; }
  body { background: #fff; color: #111; font-size: 11.5pt; }
  body::after, .ambient, .site-head, .site-foot__nav, .site-foot__brand, .cta-band, .skip, .menu, .badge, .js-only, .seg, .pager { display: none !important; }
  .page { padding-top: 0; }
  .site-foot { border: 0; padding: 12pt 0 0; background: none; }
  a { color: inherit; text-decoration: underline; }
  .prose a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #555; }
  .verse--cap .vtext::first-letter { color: #6b5317; text-shadow: none; }
  .table-wrap { overflow: visible; box-shadow: none; -webkit-mask-image: none !important; mask-image: none !important; }
  .scard, .notice, .card, .day, .quotes { box-shadow: 0 0 0 1px #ccc; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}