/* A Defense of the Faith — base stylesheet
   "Berean": a study-edition reading experience. Source Serif body at a book
   measure, Newsreader headings, a Fraunces wordmark, Libre Franklin labels, a
   colored masthead band, and a left margin rail that frames each article like an
   annotated text. One teal accent. Light and dark via prefers-color-scheme.
   Fonts are self-hosted (latin subset) under /fonts; no external font calls. */

/* ---- Self-hosted fonts (latin subset). Serif faces are variable so the
       optical-size axis matches the title/headings to their display size. ---- */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("../fonts/ssf-var.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap; src: url("../fonts/ssf-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("../fonts/news-var.woff2") format("woff2"); }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 400 500; font-display: swap; src: url("../fonts/news-italic-var.woff2") format("woff2"); }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/fraunces-var.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/franklin-400.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/franklin-500.woff2") format("woff2"); }
@font-face { font-family: "Libre Franklin"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/franklin-600.woff2") format("woff2"); }

:root {
  /* Editorial base (light) */
  --paper:       #FFFFFF;
  --paper-2:     #F2F4F7;
  --ink:         #0E1116;
  --ink-soft:    #2C3340;
  --muted:       #5E6675;
  --rule:        #DDE1E7;
  --rule-strong: #B9C0CC;

  /* Teal accent */
  --link:        #1F5D54;
  --link-press:  #143F39;
  --accent:      #1F5D54;

  /* Colored masthead band (fixed in both themes; white text) */
  --band-bg:     #1F5D54;
  --band-ink:    #FFFFFF;
  --band-soft:   rgba(255,255,255,.80);
  --band-muted:  rgba(255,255,255,.60);
  --band-rule:   rgba(255,255,255,.18);
  /* Faint paper-grain overlay for the band; monochrome feTurbulence, ~7% white on average */
  --band-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");

  --serif:   "Source Serif 4", Georgia, "Times New Roman", serif;
  --display: "Newsreader", Georgia, serif;
  --logo:    "Fraunces", Georgia, serif;
  --label:   "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;

  --measure: 64ch;
  --rail:    11rem;
  --gap:     clamp(1.5rem, 4vw, 3rem);
  --space:   clamp(1rem, 2.5vw, 1.7rem);
  --base:    1.16rem;
  --leading: 1.7;
}

/* Dark tokens: applied when the reader picks Dark, or by the OS preference
   unless the reader has explicitly chosen Light. */
:root[data-theme="dark"] {
  --paper:       #0C0E12;
  --paper-2:     #14171D;
  --ink:         #EEF0F3;
  --ink-soft:    #C7CCD4;
  --muted:       #8B93A0;
  --rule:        #232830;
  --rule-strong: #38404C;
  --link:        #7FC8BB;
  --link-press:  #9FD9CE;
  --accent:      #7FC8BB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:       #0C0E12;
    --paper-2:     #14171D;
    --ink:         #EEF0F3;
    --ink-soft:    #C7CCD4;
    --muted:       #8B93A0;
    --rule:        #232830;
    --rule-strong: #38404C;
    --link:        #7FC8BB;
    --link-press:  #9FD9CE;
    --accent:      #7FC8BB;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip; /* guard full-bleed 100vw sections against a scrollbar-width overflow (clip, not hidden, so position:sticky still works) */
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--base);
  line-height: var(--leading);
  font-feature-settings: "kern", "liga", "onum";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* Sticky footer: main grows to fill short pages so the footer rests at the bottom. */
main { flex: 1 0 auto; }
.site-footer { flex-shrink: 0; }

.container { width: 100%; max-width: 58rem; margin-inline: auto; padding-inline: var(--space); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--link-press); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

.skip-link { position: absolute; left: -999px; background: var(--ink); color: var(--paper); padding: .5rem .9rem; border-radius: 4px; }
.skip-link:focus { left: 1rem; top: 1rem; z-index: 50; }

/* Shared sans label treatment (sentence case) */
.label {
  font-family: var(--label); font-weight: 600; font-style: normal;
  letter-spacing: .005em;
}

/* ---- Header (colored band) ---- */
.site-header { background-color: var(--band-bg); background-image: var(--band-texture); color: var(--band-ink); border-bottom: 1px solid rgba(255,255,255,.22); box-shadow: 0 3px 12px rgba(0,0,0,.09); position: sticky; top: 0; z-index: 50; }
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.4rem; flex-wrap: wrap; padding-block: 1.05rem;
  transition: padding-block .2s ease;
}
.brand { text-decoration: none; color: var(--band-ink); display: inline-flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-family: var(--logo); font-weight: 600; font-size: 1.4rem; letter-spacing: -.01em; color: var(--band-ink); transition: font-size .2s ease; }
.brand-tag { font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--band-soft); margin-top: .25rem; overflow: hidden; max-height: 2rem; transition: opacity .2s ease, max-height .2s ease, margin .2s ease; }

/* Condensed state: a much smaller pinned bar once the reader has scrolled down. */
.site-header.is-condensed .header-inner { padding-block: .2rem; }
.site-header.is-condensed .brand-name { font-size: 1rem; }
.site-header.is-condensed .brand-tag { opacity: 0; max-height: 0; margin-top: 0; }
.site-header.is-condensed .site-nav a { font-size: .9rem; }
.site-header.is-condensed .site-nav a.nav-feature { padding-block: .16rem; }
.site-header.is-condensed .theme-toggle button { padding: .2rem .42rem; }
.site-header.is-condensed .theme-toggle svg { width: 15px; height: 15px; }
.site-header.is-condensed .tr-select select { padding-top: .14rem; padding-bottom: .14rem; }
.site-header.is-condensed .nav-toggle { padding: .28rem .42rem; }
/* On wide screens the header is normally two rows (wordmark, then nav). When
   condensed, collapse everything onto a single compact row. This needs more than
   the usual centered measure, so the condensed bar drops the container cap and
   spans the full width. Guarded at 60rem, below which there is not enough room
   for one row (it stays two-row and just loses height), and above the mobile
   breakpoint so the mobile drop-down menu can still wrap to its own row. */
@media (min-width: 60rem) {
  .site-header.is-condensed .header-inner { flex-wrap: nowrap; max-width: none; }
  .site-header.is-condensed .header-right { flex-wrap: nowrap; }
}

.site-nav ul { list-style: none; display: flex; align-items: center; flex-wrap: wrap; gap: 1.3rem; margin: 0; padding: 0; }
.site-nav a {
  font-family: var(--label); font-weight: 600; font-size: .95rem; letter-spacing: .005em;
  color: var(--band-soft); text-decoration: none; padding-block: .15rem; transition: color .15s ease, font-size .2s ease;
}
.site-nav a:hover { color: var(--band-ink); }
.site-nav a[aria-current="page"] { color: var(--band-ink); box-shadow: 0 2px 0 var(--band-ink); }

.header-right { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
/* Desktop: nav fills the left, the translation + theme controls sit far right. */
@media (min-width: 46.01rem) {
  .header-right { flex: 1 1 auto; }
  .header-right .site-nav { margin-right: auto; }
}

/* Featured nav link (The Gospel): set apart with an outlined pill. */
.site-nav a.nav-feature {
  color: var(--band-ink); border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px; padding-block: .3rem; padding-inline: .8rem;
  transition: padding .2s ease, background-color .15s ease;
}
.site-nav a.nav-feature:hover { background: rgba(255,255,255,.12); color: var(--band-ink); }
.site-nav a.nav-feature[aria-current="page"] { background: #fff; color: var(--band-bg); border-color: #fff; box-shadow: none; }

/* Theme toggle (light / system / dark) */
.theme-toggle { display: inline-flex; border: 1px solid var(--band-rule); border-radius: 999px; overflow: hidden; }
.theme-toggle button {
  background: transparent; border: 0; color: var(--band-soft); cursor: pointer;
  padding: .34rem .5rem; display: inline-flex; align-items: center; line-height: 0;
  transition: background-color .15s ease, color .15s ease, padding .2s ease;
}
.theme-toggle svg { transition: width .2s ease, height .2s ease; }
.theme-toggle button:hover { color: var(--band-ink); }
.theme-toggle button[aria-pressed="true"] { background: rgba(255,255,255,.16); color: var(--band-ink); }
.theme-toggle svg { width: 17px; height: 17px; }

/* Mobile nav toggle (hamburger). Hidden on wide screens; shown in the mobile media query. */
.nav-toggle {
  display: none; align-items: center; background: transparent; color: var(--band-ink);
  border: 1px solid var(--band-rule); border-radius: 8px; cursor: pointer;
  padding: .4rem .5rem; line-height: 0;
}
.nav-toggle:hover { background: rgba(255,255,255,.12); }
.nav-toggle .nav-icon svg { width: 22px; height: 22px; }
.nav-toggle .nav-toggle-close { display: none; }
.site-header.is-menu-open .nav-toggle .nav-toggle-open { display: none; }
.site-header.is-menu-open .nav-toggle .nav-toggle-close { display: inline-flex; }

/* Link icons (Lucide, self-hosted in assets/icons) */
.site-nav a, .footer-col a { display: inline-flex; align-items: center; gap: .45rem; }
.nav-icon { display: inline-flex; flex: none; }
.nav-icon svg { width: 16px; height: 16px; }

main { padding-block: clamp(1.6rem, 3.5vw, 2.6rem); }

/* ---- Eyebrow / section labels ---- */
.eyebrow { font-family: var(--label); font-weight: 600; font-size: .9rem; color: var(--accent); margin: 0; }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { color: var(--link-press); }
.date { font-family: var(--label); font-size: .85rem; color: var(--muted); margin: .3rem 0 0; }
.byline { font-family: var(--label); font-size: .85rem; color: var(--muted); margin: .2rem 0 0; }

/* ---- Article masthead (rail + body) ---- */
.post-title {
  font-family: var(--display); font-optical-sizing: auto; font-weight: 700;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 1rem;
}
.lead { font-size: 1.24rem; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: var(--measure); }
.key-verse {
  font-family: var(--display); font-style: italic; font-weight: 400;
  font-size: 1.18rem; line-height: 1.5; color: var(--ink-soft);
  border-left: 3px solid var(--accent); padding: .15rem 0 .15rem 1rem; margin: 1.6rem 0 0; max-width: var(--measure);
}

.masthead { margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.masthead-meta .eyebrow { color: var(--accent); }
/* Plain pages (no section, no date): no rail, tighter title-to-body gap. */
.post--plain .masthead { margin-bottom: clamp(1.2rem, 2.5vw, 1.6rem); }
.post--plain .post-title { margin-bottom: 0; }

@media (min-width: 60rem) {
  .post:not(.post--plain) .masthead {
    display: grid; column-gap: var(--gap);
    grid-template-columns: var(--rail) minmax(0, var(--measure)); align-items: start;
  }
  .masthead-meta { text-align: right; padding-top: .6rem; }
  .post:not(.post--plain) .masthead-body { grid-column: 2; }
  .post:not(.post--plain) .prose { margin-left: calc(var(--rail) + var(--gap)); }
}

/* Opening drop cap on articles (matches the mockup lead). */
.post:not(.post--plain) .prose > p:first-of-type::first-letter {
  float: left; font-family: var(--display); font-weight: 700; color: var(--accent);
  font-size: 3.4em; line-height: .8; padding: .02em .12em 0 0;
}

/* ---- Prose ---- */
.prose { max-width: var(--measure); }
.prose > * { margin: 0; }
.prose > * + * { margin-top: 1.5rem; }
.prose h2 { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 1.55rem; line-height: 1.22; letter-spacing: -.01em; margin-top: 2.2rem; }
.prose h3 { font-family: var(--display); font-weight: 600; font-size: 1.25rem; line-height: 1.25; margin-top: 1.7rem; }
/* Headings bind to the text they introduce: more space above, less below. */
.prose :is(h2, h3) + * { margin-top: .65rem; }
.prose blockquote { margin: 1.5rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; }
.prose ul, .prose ol { padding-left: 1.3rem; }
.prose li + li { margin-top: .4rem; }
.prose code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; background: var(--paper-2); padding: .1em .35em; border-radius: 3px; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 2.2rem 0; }
.prose img { max-width: 100%; height: auto; }

/* Margin gloss (study-Bible cross-reference in the rail) */
.gloss { font-family: var(--label); font-size: .82rem; line-height: 1.4; color: var(--muted); display: block; margin: .2rem 0 .8rem; }
.gloss a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
@media (min-width: 60rem) {
  .gloss {
    float: left; clear: left; width: var(--rail);
    margin-left: calc(-1 * (var(--rail) + var(--gap))); margin-top: .35rem;
    text-align: right;
  }
}

/* Margin footnotes (sidenotes): numbered marker in the text, note in the rail. */
.prose { counter-reset: sidenote; }
.sidenote-ref { counter-increment: sidenote; }
.sidenote-ref::after {
  content: counter(sidenote); font-family: var(--label); font-weight: 600; font-size: .62em;
  vertical-align: super; color: var(--accent); padding-left: 1px;
}
.sidenote { font-family: var(--label); font-size: .9em; line-height: 1.4; color: var(--muted); }
.sidenote a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
@media (min-width: 60rem) {
  .sidenote {
    display: block; float: left; clear: left; width: var(--rail);
    margin-left: calc(-1 * (var(--rail) + var(--gap))); margin-top: .15rem; margin-bottom: .7rem;
    font-size: .8rem; line-height: 1.45; text-align: left;
  }
  .sidenote::before { content: counter(sidenote); font-weight: 600; color: var(--accent); margin-right: .35em; }
}

/* Footnotes: the mobile rendering of sidenotes (built by scripture.js). Hidden by
   default; shown below the rail breakpoint in place of the inline note. */
.fn-ref { text-decoration: none; }
.footnotes {
  display: none; list-style: decimal; max-width: var(--measure);
  margin: 2.5rem 0 0; padding: 1.3rem 0 0 1.4rem; border-top: 1px solid var(--rule);
  font-family: var(--label); font-size: .9rem; line-height: 1.55; color: var(--muted);
  font-variant-numeric: lining-nums;
}
.footnotes li { margin: .6rem 0; padding-left: .2rem; scroll-margin-top: 1rem; }
.footnotes li:target { background: var(--paper-2); }
.footnotes a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.footnotes .fn-back { margin-left: .4rem; border-bottom: 0; }
@media (max-width: 59.99rem) {
  .js .sidenote { display: none; }
  .js .footnotes { display: block; }
  /* On narrow screens (no rail grid) put the date/byline under the title:
     title, then meta, then key verse. display:contents lets the title and key
     verse order independently of their .masthead-body wrapper. */
  .masthead { display: flex; flex-direction: column; }
  .masthead-body { display: contents; }
  .post-title { order: 1; }
  .masthead-meta { order: 2; margin: .1rem 0 0; }
  .key-verse { order: 3; }
}

/* ---- Bibliography (shortcode output): secondary-source citations at the end
       of a post, set as a quiet apparatus. A tracked label, a hairline rule,
       and serif entries with a Chicago hanging indent. ---- */
.bibliography {
  max-width: var(--measure);
  margin-top: clamp(2.4rem, 5vw, 3.2rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.bibliography .bibliography-head {
  font-family: var(--label); text-transform: uppercase; letter-spacing: .12em;
  font-size: .72rem; font-weight: 600; line-height: 1.3; color: var(--muted);
  margin: 0 0 1rem;
}
.bibliography ul {
  list-style: none; padding-left: 0; margin: 0;
  font-family: var(--serif); font-size: .92rem; line-height: 1.5;
  color: var(--ink-soft); font-variant-numeric: lining-nums;
}
.bibliography li {
  margin: 0; padding-left: 1.4em; text-indent: -1.4em;  /* hanging indent */
}
.bibliography li + li { margin-top: .7rem; }
.bibliography a { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--link); }
.bibliography a:hover { border-bottom-style: solid; }

/* ---- Scripture references (shortcode output) ---- */
.ref { font-variant-numeric: lining-nums; white-space: nowrap; }
a.ref { color: var(--link); text-decoration: none; border-bottom: 1px dotted var(--link); }
a.ref:hover { border-bottom-style: solid; }
.ref-tr { font-family: var(--label); font-style: normal; font-size: .8em; color: var(--muted); }

/* Translation picker (header band, beside the theme toggle) */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tr-select { display: inline-flex; align-items: center; gap: .4rem; }
.tr-select-label { display: inline-flex; color: var(--band-soft); line-height: 0; }
.tr-select-label svg { width: 16px; height: 16px; }
.tr-select select {
  font-family: var(--label); font-weight: 600; font-size: .85rem;
  color: var(--band-ink); background: transparent;
  border: 1px solid var(--band-rule); border-radius: 999px;
  padding: .3rem 1.6rem .3rem .7rem; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .55rem center;
  transition: padding .2s ease, background-color .15s ease, color .15s ease;
}
.tr-select select:hover { color: var(--band-ink); background-color: rgba(255,255,255,.12); }
.tr-select option { color: var(--ink); background: var(--paper); }

/* Inline scripture passage (printed in the flow instead of cited) */
.scripture-inline {
  margin: 1.5rem 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent);
  color: var(--ink-soft); font-style: italic;
}
.scripture-inline-text { margin: 0; }
.scripture-inline-cite {
  display: block; margin-top: .5rem; font-style: normal;
  font-family: var(--label); font-size: .82rem; color: var(--muted);
}
.scripture-inline-cite a, .scripture-inline-text a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }

/* Scripture comparison (tabs by default, list to stack) */
.comparison { margin: 1.6rem 0; max-width: var(--measure); }
.comparison-tabs { display: flex; flex-wrap: wrap; gap: .3rem; border-bottom: 1px solid var(--rule); margin-bottom: .9rem; }
.comparison-tab {
  font-family: var(--label); font-weight: 600; font-size: .82rem; letter-spacing: .01em;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
  padding: .35rem .7rem; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.comparison-tab:hover { color: var(--ink); }
.comparison-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.comparison-text {
  margin: 0; padding: .2rem 0 .2rem 1.1rem; border-left: 3px solid var(--accent);
  color: var(--ink-soft); font-style: italic;
}
.comparison-link { margin: 0; }
.comparison-link a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.comparison-cite { margin: .5rem 0 0; font-family: var(--label); font-size: .82rem; color: var(--muted); }
/* List layout: show every panel stacked, hide the tab strip. */
.comparison[data-layout="list"] .comparison-tabs { display: none; }
.comparison[data-layout="list"] .comparison-panel[hidden] { display: block; }
.comparison[data-layout="list"] .comparison-panel { margin-bottom: 1.1rem; }

/* Hover/focus tooltip for references */
.scripture-tip {
  position: absolute; z-index: 50; max-width: min(28rem, 90vw);
  background: var(--paper); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  padding: .7rem .85rem; font-style: normal;
}
.scripture-tip[hidden] { display: none; }
.scripture-tip-text { margin: 0; font-size: .92rem; line-height: 1.45; }
.scripture-tip-cite { margin: .45rem 0 0; font-family: var(--label); font-size: .78rem; color: var(--muted); }
.scripture-tip a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted var(--accent); }
.scripture-tip-open {
  display: inline-block; margin-top: .6rem; padding-top: .5rem;
  border-top: 1px solid var(--rule); border-bottom: 0;
  font-family: var(--label); font-weight: 600; font-size: .82rem; color: var(--accent);
}

/* ---- List / section pages ---- */
.list-page, .list-header { max-width: var(--measure); }
.list-header .post-title { font-size: clamp(2.2rem, 4.5vw, 3.1rem); }
.list-intro { font-size: 1.2rem; color: var(--ink-soft); margin: .2rem 0 0; }
.list-header .prose { margin-top: 1.2rem; }

.section-rule { border: 0; border-top: 2px solid var(--rule-strong); margin: clamp(1.5rem, 3vw, 2.2rem) 0 1.3rem; }
.section-title { font-family: var(--label); font-weight: 600; font-size: 1rem; color: var(--muted); margin: 0 0 1.1rem; }

/* ---- Post lists (shared) ---- */
.post-list { list-style: none; margin: 0; padding: 0; max-width: var(--measure); }
.post-item { padding-block: 1.2rem; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: .3rem; }
.post-item > a { font-family: var(--display); font-optical-sizing: auto; font-weight: 600; font-size: 1.4rem; line-height: 1.2; text-decoration: none; color: var(--ink); }
.post-item > a:hover { color: var(--link); }
.post-excerpt { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.post-item .post-meta { font-family: var(--label); font-size: .82rem; color: var(--muted); }
.muted { color: var(--muted); }

/* ---- Home ---- */
.hero { max-width: var(--measure); }
.hero .eyebrow { margin-bottom: .6rem; }
.hero h1 { font-family: var(--display); font-optical-sizing: auto; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 1.06; letter-spacing: -.02em; margin: 0 0 .8rem; }
.hero-body { font-size: 1.12rem; color: var(--ink-soft); }
.hero-body > * + * { margin-top: .9rem; }
.hero-actions { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem; }

/* Image hero: full-bleed manuscript banner with a teal scrim, text overlaid white. */
.hero--image {
  position: relative; max-width: none;
  width: 100vw; margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * clamp(1.6rem, 3.5vw, 2.6rem));
  min-height: clamp(21rem, 46vh, 31rem);
  display: flex; align-items: center; overflow: hidden; isolation: isolate;
}
.hero-media, .hero-media img { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  /* Lighter, directional deep-teal so the gold parchment of the duotone reads
     through; text legibility is carried by the gradient plus a text-shadow. */
  background:
    linear-gradient(105deg, rgba(15,50,45,.82) 0%, rgba(20,63,57,.5) 52%, rgba(20,63,57,.14) 100%),
    linear-gradient(to top, rgba(11,38,34,.55) 0%, rgba(11,38,34,0) 40%);
}
.hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 58rem; margin-inline: auto;
  padding-inline: var(--space); padding-block: clamp(2.4rem, 6vw, 4rem);
}
/* Tight, dark shadows hug the letters for contrast without hazing over the gold. */
.hero--image .eyebrow { color: var(--band-soft); text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.hero--image h1 { color: #fff; text-wrap: balance; text-shadow: 0 1px 3px rgba(0,0,0,.72); }
.hero--image .hero-body { color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.72); }
.hero--image .hero-body a { color: #fff; }
/* Buttons: lift off the busy image. White primary CTA, defined outline secondary. */
.hero--image .btn {
  background: #fff; color: var(--band-bg); border-color: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,.32);
}
.hero--image .btn:hover { background: var(--paper-2); color: var(--link-press); border-color: var(--paper-2); }
.hero--image .btn-quiet {
  background: rgba(9,32,29,.3); color: #fff; border-color: rgba(255,255,255,.72);
  box-shadow: 0 3px 14px rgba(0,0,0,.24);
}
.hero--image .btn-quiet:hover { background: rgba(9,32,29,.5); color: #fff; border-color: #fff; }
.hero-credit {
  position: absolute; z-index: 2; right: 0; bottom: 0; margin: 0;
  padding: .5rem clamp(1rem, 4vw, 2rem);
  font-family: var(--label); font-size: .72rem; letter-spacing: .01em; color: var(--band-muted);
}
@media (max-width: 46rem) {
  .hero--image { min-height: clamp(17rem, 60vh, 24rem); }
  .hero-media img { object-position: 50% 40%; }
  /* Denser scrim on small screens for contrast, but still letting gold show. */
  .hero-scrim {
    background:
      linear-gradient(120deg, rgba(15,50,45,.88) 0%, rgba(20,63,57,.64) 60%, rgba(20,63,57,.34) 100%),
      linear-gradient(to top, rgba(11,38,34,.6) 0%, rgba(11,38,34,0) 44%);
  }
}

.btn {
  font-family: var(--label); font-weight: 600; font-size: .92rem;
  display: inline-block; padding: .68rem 1.3rem; border-radius: 3px;
  background: var(--accent); color: #fff; text-decoration: none; border: 1px solid var(--accent);
}
.btn:hover { background: var(--link-press); border-color: var(--link-press); color: #fff; }
.btn-quiet { background: transparent; color: var(--link); }
.btn-quiet:hover { background: var(--paper-2); color: var(--link-press); }

.pillars { margin-top: clamp(2.6rem, 6vw, 4rem); }
.pillar-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.pillar-card {
  display: block; padding: 1.4rem 1.5rem; background: var(--paper-2);
  border: 1px solid var(--rule); border-radius: 5px; text-decoration: none; color: var(--ink);
  transition: border-color .15s ease;
}
.pillar-card:hover { border-color: var(--accent); }
.pillar-card h3 { font-family: var(--display); font-weight: 600; margin: 0 0 .4rem; font-size: 1.3rem; line-height: 1.2; }
.pillar-card p { margin: 0; color: var(--muted); font-size: .98rem; line-height: 1.5; }

.recent { margin-top: clamp(2.6rem, 6vw, 4rem); }
.recent > .section-rule, .pillars > .section-rule { margin-top: clamp(1.3rem, 2.5vw, 1.8rem); }

/* Featured (latest) post card */
.featured-post {
  display: block; max-width: var(--measure); text-decoration: none; color: var(--ink);
  background: var(--paper-2); border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: clamp(1.3rem, 3vw, 1.8rem); transition: border-color .15s ease;
}
.featured-post:hover { border-color: var(--accent); }
.featured-title { font-family: var(--display); font-optical-sizing: auto; font-weight: 700; font-size: clamp(1.55rem, 3.5vw, 2.1rem); line-height: 1.14; letter-spacing: -.01em; margin: 0 0 .5rem; }
.featured-post:hover .featured-title { color: var(--link); }
.featured-desc { color: var(--ink-soft); font-size: 1.06rem; line-height: 1.5; margin: 0 0 .9rem; }
.featured-meta { font-family: var(--label); font-size: .85rem; color: var(--muted); }
.featured-read { color: var(--accent); font-weight: 600; }
.recent .post-list { margin-top: 1.4rem; }
.more-link { margin-top: 1.5rem; }
.more-link a { font-family: var(--label); font-weight: 600; font-size: .95rem; color: var(--accent); text-decoration: none; }
.more-link a:hover { color: var(--link-press); }

/* ---- Series navigation box (in-post) ---- */
.series-nav {
  max-width: var(--measure);
  margin: 0 0 clamp(1.8rem, 4vw, 2.6rem);
  background: var(--paper-2);
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: clamp(1.1rem, 3vw, 1.5rem) clamp(1.2rem, 3vw, 1.6rem);
}
.series-nav-head { letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; line-height: 1.3; color: var(--muted); margin: 0; }
.series-nav-head a { color: var(--muted); text-decoration: none; }
.series-nav-head a:hover { color: var(--accent); }
.series-nav-pos { font-family: var(--display); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin: .35rem 0 .8rem; }
.series-nav-list { list-style: none; margin: 0; padding: 0; counter-reset: series; font-variant-numeric: lining-nums; }
.series-nav-item {
  counter-increment: series;
  padding: .32rem 0; border-top: 1px solid var(--rule);
  font-family: var(--display); font-size: 1.02rem; line-height: 1.3;
  display: flex; gap: .55rem; align-items: baseline;
}
.series-nav-item::before { content: counter(series) "."; flex: none; font-family: var(--label); font-weight: 600; font-size: .8rem; color: var(--muted); }
.series-nav-item a { color: var(--ink); text-decoration: none; }
.series-nav-item a:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.series-nav-item.is-current { color: var(--accent); font-weight: 600; }
.series-nav-item.is-current::before { color: var(--accent); }

/* ---- Post footer / tag chips ---- */
.post-footer {
  max-width: var(--measure);
  margin-top: clamp(2.4rem, 5vw, 3.2rem); padding-top: 1.3rem;
  border-top: 1px solid var(--rule);
}
.post-tags-head { letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; color: var(--muted); margin: 0 0 .7rem; }
.post-tags { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; }
.tag-chip {
  display: inline-block; font-family: var(--label); font-weight: 600; font-size: .82rem;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--rule); border-radius: 999px; padding: .28rem .8rem;
  transition: color .15s ease, border-color .15s ease;
}
.tag-chip:hover { color: var(--accent); border-color: var(--accent); }

/* Taxonomy term-page "Part N" label above a series entry */
.post-part { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--accent); }

/* On the rail grid, align the series box and tag footer with the prose column. */
@media (min-width: 60rem) {
  .post:not(.post--plain) .series-nav,
  .post:not(.post--plain) .post-footer { margin-left: calc(var(--rail) + var(--gap)); }
}

/* ---- Homepage Scripture band (full-bleed, under the hero) ---- */
.home-verse {
  width: 100vw; margin-inline: calc(50% - 50vw);
  /* Deep teal, darker than the header/footer band, with the same paper-grain texture. */
  background-color: #0D2723; background-image: var(--band-texture);
  color: var(--band-ink);
  border-top: 1px solid var(--band-rule);
  padding-block: clamp(1.5rem, 3.5vw, 2.4rem);
}
.home-verse-inner { max-width: 44rem; margin-inline: auto; padding-inline: var(--space); text-align: center; }
/* Recolor the shared .scripture-inline markup for the teal band. */
.home-verse .scripture-inline { margin: 0; padding: 0; border-left: 0; color: var(--band-ink); font-style: normal; }
.home-verse .scripture-inline-text {
  font-family: var(--display); font-optical-sizing: auto; font-style: italic; font-weight: 400;
  font-size: clamp(1.35rem, 3.2vw, 2rem); line-height: 1.35; color: var(--band-ink);
  text-wrap: balance; margin: 0;
}
.home-verse .scripture-inline-text::before { content: "\201C"; }
.home-verse .scripture-inline-text::after { content: "\201D"; }
.home-verse .scripture-inline-text a { color: #fff; }
.home-verse .scripture-inline-cite {
  display: block; margin-top: 1rem; font-style: normal;
  font-family: var(--label); font-weight: 600; font-size: .82rem;
  letter-spacing: .08em; text-transform: uppercase; color: var(--band-soft);
}
.home-verse .scripture-inline-cite .ref-tr { color: var(--band-muted); letter-spacing: .04em; }

/* ---- Homepage columns: latest posts beside the series widget ---- */
.home-cols { margin-top: clamp(1.2rem, 3vw, 2rem); display: grid; gap: var(--gap); }
.home-cols > section { margin-top: 0; min-width: 0; }
.home-cols > section > .section-rule { margin-top: 0; }
.home-cols .series-card-grid { margin: 1.1rem 0 0; }
@media (min-width: 60rem) {
  .home-cols { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
}

/* ---- Series card widget (homepage / posts list) ---- */
.series-promo { margin-top: clamp(2.6rem, 6vw, 4rem); }
.series-promo > .section-rule { margin-top: clamp(1.3rem, 2.5vw, 1.8rem); }
.series-card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); max-width: var(--measure); margin: 1.4rem 0; }
.series-card {
  background: var(--paper-2);
  border: 1px solid var(--rule); border-left: 4px solid var(--accent);
  border-radius: 6px; padding: clamp(1.2rem, 3vw, 1.6rem);
}
.series-card-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); margin: 0 0 .4rem; }
.series-card-title { font-family: var(--display); font-optical-sizing: auto; font-weight: 700; font-size: 1.35rem; line-height: 1.15; margin: 0 0 .8rem; }
.series-card-title a { color: var(--ink); text-decoration: none; }
.series-card-title a:hover { color: var(--link); }
.series-card-list { list-style: none; margin: 0; padding: 0; counter-reset: scard; font-variant-numeric: lining-nums; }
.series-card-item {
  counter-increment: scard;
  padding: .3rem 0; border-top: 1px solid var(--rule);
  display: flex; gap: .55rem; align-items: baseline;
  font-family: var(--display); font-size: 1.02rem; line-height: 1.3;
}
.series-card-item::before { content: counter(scard) "."; flex: none; font-family: var(--label); font-weight: 600; font-size: .8rem; color: var(--muted); }
.series-card-item a { color: var(--ink); text-decoration: none; }
.series-card-item a:hover { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Under-title series label on post cards */
.card-series { display: block; font-size: .82rem; color: var(--accent); margin: .25rem 0 0; letter-spacing: .01em; }
.post-item .card-series { margin-top: 0; }

/* ---- Footer (mirrors the header band) ---- */
.site-footer { background-color: var(--band-bg); background-image: var(--band-texture); color: var(--band-ink); margin-top: clamp(2.4rem, 5vw, 3.5rem); padding-block: clamp(2.2rem, 4vw, 2.8rem); }
.footer-inner { display: grid; grid-template-columns: 1fr; gap: 1.8rem 2.5rem; }
.footer-brand { text-decoration: none; color: var(--band-ink); display: inline-block; }
.footer-brand .brand-name { font-size: 1.3rem; }
.footer-blurb { font-family: var(--serif); font-size: .95rem; line-height: 1.5; color: var(--band-soft); margin: .6rem 0 0; max-width: 38ch; }
.footer-head { font-family: var(--label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 600; color: var(--band-muted); margin: 0 0 .8rem; }
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin: .4rem 0; }
.footer-col a { font-family: var(--label); font-size: .92rem; color: var(--band-soft); text-decoration: none; }
.footer-col a:hover { color: var(--band-ink); }
.footer-scripture-notice {
  margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: 1.3rem; border-top: 1px solid var(--band-rule);
  font-family: var(--label); font-size: .72rem; line-height: 1.5; color: var(--band-muted); max-width: 70ch;
}
.footer-scripture-notice p { margin: 0 0 .4rem; }
.footer-scripture-notice a { color: var(--band-soft); }
.footer-scripture-notice + .footer-bottom { margin-top: 1.4rem; border-top: 0; padding-top: 0; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .6rem 2rem; margin-top: clamp(1.6rem, 3vw, 2.2rem); padding-top: 1.3rem; border-top: 1px solid var(--band-rule);
}
.footer-verse { font-family: var(--display); font-style: italic; font-size: .95rem; color: var(--band-soft); margin: 0; }
.footer-verse .ref { font-style: normal; color: var(--band-muted); }
.footer-meta { font-family: var(--label); font-size: .8rem; color: var(--band-muted); margin: 0; }
.footer-meta a { color: var(--band-soft); }

@media (min-width: 48rem) {
  .footer-inner { grid-template-columns: 1.7fr 1fr 1fr; }
}

/* ---- Responsive ---- */
@media (max-width: 46rem) {
  /* Compact bar: wordmark left, hamburger right; the menu drops to a second row. */
  .header-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  #site-menu {
    flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 1rem; padding-top: .2rem;
  }
  #site-menu .site-nav { width: 100%; }
  #site-menu .site-nav ul { flex-direction: column; align-items: flex-start; gap: .1rem; width: 100%; }
  #site-menu .site-nav a { padding-block: .5rem; }
  #site-menu .site-nav a.nav-feature { margin-top: .3rem; }
  /* Collapse only when JS can toggle it; without JS the menu stays visible. */
  .js #site-menu { display: none; }
  .js .site-header.is-menu-open #site-menu { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}