/* ==========================================================================
   Remnant of Promise — main stylesheet
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* === SACRED COLOR REGISTER — v4 (locked S127, DESIGN_LANGUAGE.md §3) ======
     Three registers, three jobs — mapped from the brand-mark to surface roles:

       techelet (#1A6FE5)  — divine-name register. RESERVED for divine names
                              in scripture. NOT used on chrome. The reservation
                              is load-bearing across both products.
       argaman  (#8E4FB3)  — covenant-body register (Yahudah / Yashar'el).
                              Carries the structural skeleton: page headings,
                              scripture-priesthood accents, illuminated caps.
       gold     (--accent) — priestly-witness register. Chrome / connective
                              tissue: buttons, nav, dividers, atonement-adjacent
                              accents (priest-scarlet folded into this register
                              per S127 — the high priest's office IS the
                              Day-of-Atonement office, so scarlet's atonement
                              meaning is absorbed without competing with the
                              techelet/argaman pair).

     Emerald (#00ae5f) is retired — not a v4 register. Headings carry argaman.
     Three registers stay locked; no fourth introduced.
     ====================================================================== */
  --bg:              #050b1f;          /* metallic midnight — deep saturated base */
  --bg-2:            #0a1f2e;          /* subtle metallic-teal lift — leaf-highlight hue, gentle luminance step */
  --bg-3:            #030714;          /* set-apart — barely deeper than bg, no abrupt drop */
  --bg-card:         #0a1530;          /* raised card — subtle midnight lift */
  --border:          #2d7896;          /* metallic teal — sampled from leaf highlights */
  --border-strong:   #3c87a5;          /* polished metallic teal — brightest leaf highlight */
  --text:            #ffffff;          /* fine linen white — body text, holiness, the base layer */
  --text-muted:      #ffffff;          /* S127 gray-to-white: secondary text reads as body */
  --text-dim:        #ffffff;          /* S127 gray-to-white: dim register collapses to body */
  --accent:          #d4af37;          /* gold — priestly-witness register; connective tissue */
  --accent-bright:   #f0d068;          /* gold-bright — link / nav / button accent */
  --accent-deep:     #8b6f1f;
  --techelet:        #1A6FE5;          /* divine-name register — reserved; NOT used on chrome */
  --techelet-bright: #7faae6;          /* readable techelet on dark bg */
  --argaman:         #8E4FB3;          /* covenant-body register — structural skeleton */
  --argaman-bright:  #b48ee0;          /* readable argaman on dark bg */
  --heading:         #8E4FB3;          /* argaman — headings cut against the blue/teal field, covenant-body register */
  --danger:          #c14a3c;          /* functional UI red — not a sacred register */
  --max-w:           1180px;
  --serif:           'Cormorant Garamond', 'Garamond', 'Times New Roman', Georgia, serif;
  --display:         'Cinzel', 'Trajan Pro', 'Cormorant Garamond', Georgia, serif;
  --sans:            -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 21px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---- Force-override safety net (hardened 2026-05-07 v1.0.3) ----
   Some WP installs ship a default body/paragraph stylesheet that beats our
   :root rules on specificity. This block makes the fine-linen-white body
   color and 21px size win regardless of wrapper. Headings keep their own
   color via the `h1, h2, h3, h4` rule below. !important is intentional —
   it's the only way to defeat Customizer Additional CSS, plugin styles,
   and aggressive WP defaults. */
body,
body p,
.entry-content, .entry-content p,
.post-content, .post-content p,
article, article p,
main, main p,
.page-content, .page-content p,
.container p,
.section p,
.framework-card p,
.tagline,
.section-intro,
.lead,
.prose,
.prose p {
  color: var(--text) !important;
}

body p,
.entry-content p,
.post-content p,
article p,
main p,
.page-content p {
  font-size: 21px !important;
}

/* ==========================================================================
   URIM AND THUMMIM — light/dark mode toggle (added 2026-05-07 v1.0.7)
   --------------------------------------------------------------------------
   The high priest's two stones — Urim ("lights") and Thummim ("perfection")
   — used for discernment. Here they toggle between candlelight (dark) and
   fine linen (light) registers. The site default is dark; light mode
   surfaces only when the wearer turns to it.
   ========================================================================== */

/* Light-mode variable overrides. The dark mode values live in :root above.
   v4 calibration (S128): techelet/argaman deepen for contrast on parchment;
   muted/dim collapse to body ink (parallel to dark-mode's body-white rule
   per S127's gray-to-white decision). */
[data-theme="light"] {
  --bg:              #f5ecd6;          /* fine linen / aged parchment */
  --bg-2:            #ece2c4;
  --bg-3:            #ddd0a8;
  --bg-card:         #f9f1dc;
  --border:          #c4b48c;
  --border-strong:   #9d8b66;
  --text:            #1a1410;          /* deep ink on linen */
  --text-muted:      #1a1410;          /* S127 parallel: muted reads as body ink */
  --text-dim:        #1a1410;
  --accent:          #8b6f1f;          /* deep gold for contrast on linen */
  --accent-bright:   #a87f1d;
  --accent-deep:     #5e4a14;
  --techelet:        #1A4FB5;          /* techelet deepens on parchment */
  --techelet-bright: #1f3a8a;
  --argaman:         #5A2A98;          /* argaman deepens on parchment */
  --argaman-bright:  #5A2A98;
  --heading:         #5A2A98;          /* argaman — same register, parchment calibration */
}

/* Light-mode section overrides — strip the dark gradient banner flow.
   In parchment mode the page reads as one continuous sheet of linen; the
   sacred-color register lives in argaman headings and gold accents rather
   than in shifting background gradients. */
[data-theme="light"] .section,
[data-theme="light"] .section-alt,
[data-theme="light"] .section-deep {
  background: var(--bg);
}
[data-theme="light"] .hero,
[data-theme="light"] .page-header,
[data-theme="light"] .partner-hero,
[data-theme="light"] .partner-cta,
[data-theme="light"] .cta-block {
  background: var(--bg);
}

/* The toggle itself: two stones in a small horizontal pill, sized to sit
   alongside the menu toggle in the header. Click anywhere on the pill
   switches modes. The stone for the active mode carries a soft glow ring. */
.urim-thummim-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 11px;
  background: var(--bg-2);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
  font-family: inherit;
}
.urim-thummim-toggle:hover { border-color: var(--accent); background: var(--bg-3); }

.urim-thummim-toggle .stone {
  width: 11px; height: 11px;
  border-radius: 50%;
  display: inline-block;
  transition: box-shadow 0.3s, border-color 0.3s;
  border: 1px solid;
}
.urim-thummim-toggle .urim {
  background: radial-gradient(circle at 35% 30%, #ffffff 0%, #ece1c0 70%);
  border-color: #b8a87c;
}
.urim-thummim-toggle .thummim {
  background: radial-gradient(circle at 35% 30%, #2c3a60 0%, #0a1226 70%);
  border-color: #4a5c80;
}

[data-theme="light"] .urim-thummim-toggle .urim {
  box-shadow: 0 0 8px 1.5px rgba(240, 220, 160, 0.85);
  border-color: var(--accent);
}
[data-theme="dark"]  .urim-thummim-toggle .thummim,
:root:not([data-theme="light"]) .urim-thummim-toggle .thummim {
  box-shadow: 0 0 8px 1.5px rgba(120, 150, 220, 0.55);
  border-color: var(--techelet-bright);
}

.urim-thummim-toggle .ut-side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.urim-thummim-toggle .ut-label {
  font-family: var(--display);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-dim);
  transition: color 0.25s;
  user-select: none;
}
[data-theme="light"] .urim-thummim-toggle .ut-light .ut-label,
[data-theme="dark"]  .urim-thummim-toggle .ut-dark .ut-label,
:root:not([data-theme="light"]) .urim-thummim-toggle .ut-dark .ut-label {
  color: var(--text);
  font-weight: 600;
}

/* ==========================================================================
   SACRED COLOR REGISTER — APPLIED (v4 reskin, S128)
   --------------------------------------------------------------------------
   Restraint, not rainbow. Each register surfaces only at moments that carry
   meaning. Gold remains the connective tissue binding the document together.
   The semantic class names (.scripture-throne / -atonement / -priesthood
   etc.) are stable across the v4 reskin — only the underlying tokens
   flipped per the S127 register lock:
     throne     → techelet (divine register — throne language)
     atonement  → gold     (priestly-witness register absorbs atonement)
     priesthood → argaman  (covenant-body register — Tabernacle / priesthood)

   The classes are applied SURGICALLY in body content (e.g. content-import.xml)
   — never sprinkled around.
   ========================================================================== */

/* Themed scripture blockquotes — change the left-border accent when the
   passage carries that meaning. Default `.scripture` keeps the gold border. */
.scripture.scripture-throne     { border-left-color: var(--techelet); }
.scripture.scripture-atonement  { border-left-color: var(--accent); }
.scripture.scripture-priesthood { border-left-color: var(--argaman); }

/* Inline pull-quote — pulls one landmark sentence out of running prose with
   a thin left-border accent in a sacred-register color. Used at most once
   per section, only where the sentence carries the matching theological weight. */
.accent-throne,
.accent-atonement,
.accent-priesthood {
  font-family: var(--serif);
  font-style: italic;
  padding: 0.4em 0 0.4em 1.4em;
  margin: 1.6em 0;
  border-left: 3px solid;
  font-size: 1.08em;
  line-height: 1.6;
}
.accent-throne     { border-left-color: var(--techelet); }
.accent-atonement  { border-left-color: var(--accent); }
.accent-priesthood { border-left-color: var(--argaman); }

/* Illuminated drop cap — the manuscript-style first letter of an opening
   paragraph. Restrained: only on set-apart sections (.section-deep wrappers)
   and only one per section. Letter is in the sacred-register color, oversized,
   floats to the left of the first three lines of body. */
.illuminated-throne::first-letter,
.illuminated-atonement::first-letter,
.illuminated-priesthood::first-letter {
  font-family: var(--display);
  font-size: 4.4em;
  line-height: 0.9;
  float: left;
  margin: 0.05em 0.12em -0.05em 0;
  font-weight: 600;
  letter-spacing: 0;
}
.illuminated-throne::first-letter     { color: var(--techelet-bright); }
.illuminated-atonement::first-letter  { color: var(--accent-bright); }
.illuminated-priesthood::first-letter { color: var(--argaman-bright); }

/* ==========================================================================
   OUTREACH / PARTNER page styles (added 2026-05-07 v1.0.4)
   Documentary register: video hero, photo grid, 25/75 math, pathways, CTA.
   ========================================================================== */
.partner-hero {
  position: relative;
  padding: 60px 24px 80px;
  background:
    radial-gradient(ellipse at 30% 50%, rgba(212, 175, 55, 0.08), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--border);
}
.partner-hero-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: 56px;
  align-items: center;
}
.partner-hero-text { padding: 12px 0; }
.partner-hero-eyebrow {
  font-family: var(--serif); font-style: italic;
  color: var(--accent); letter-spacing: 0.06em;
  font-size: 1.05rem; margin-bottom: 14px;
}
.partner-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 3.4rem);
  line-height: 1.1; margin: 0 0 18px;
}
.partner-hero .lede {
  font-family: var(--serif); font-size: 1.18rem;
  line-height: 1.55; color: var(--text); margin: 0 0 14px;
}
.partner-hero .lede strong { color: var(--accent-bright); font-weight: 500; }
.partner-hero .pitch {
  color: var(--text-muted); font-size: 1rem;
  line-height: 1.65; margin: 0 0 28px;
}
.partner-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.partner-video-frame {
  position: relative; width: 100%; max-width: 360px;
  margin: 0 auto; aspect-ratio: 9 / 16;
  background: #08090f;
  border: 1px solid var(--border-strong);
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(212, 175, 55, 0.15);
}
.partner-video-frame video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}

.partner-photos {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 16px; margin: 28px 0 14px;
}
.partner-photo {
  position: relative; aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #10131c 0%, #08090f 100%);
  border: 1px solid var(--border); border-radius: 4px; overflow: hidden;
}
.partner-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.partner-photo-caption {
  font-family: var(--serif); font-style: italic;
  color: var(--text-muted); font-size: 0.98rem;
  text-align: center; max-width: 720px;
  margin: 22px auto 0; line-height: 1.55;
}

.math-section { background: var(--bg-2); }
.math-split {
  max-width: 800px; margin: 36px auto 30px;
  display: grid; grid-template-columns: 1fr 3fr; gap: 0;
  border-radius: 4px; overflow: hidden;
  border: 1px solid var(--border-strong);
}
.math-split-cell { padding: 28px 20px; text-align: center; }
.math-split-cell .pct {
  font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.4rem);
  font-weight: 600; line-height: 1; margin: 0 0 8px; letter-spacing: 0.02em;
}
.math-split-cell .label {
  font-family: var(--serif); font-style: italic;
  color: var(--text-muted); font-size: 0.95rem; letter-spacing: 0.03em;
}
.math-split-cell.assembly { background: rgba(142, 79, 179, 0.08); }
.math-split-cell.assembly .pct { color: var(--argaman-bright); }
.math-split-cell.outward  { background: rgba(212, 175, 55, 0.06); border-left: 1px solid var(--border-strong); }
.math-split-cell.outward  .pct { color: var(--accent-bright); }

.math-equation {
  max-width: 880px; margin: 36px auto 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  gap: 12px; align-items: center;
}
.math-equation .stat { text-align: center; padding: 18px 12px; }
.math-equation .stat .num {
  font-family: var(--display); font-size: clamp(1.4rem, 3vw, 2rem);
  color: var(--heading); letter-spacing: 0.02em; margin: 0 0 6px;
}
.math-equation .stat .lbl {
  font-family: var(--serif); font-style: italic;
  color: var(--text-muted); font-size: 0.88rem; line-height: 1.4;
}
.math-equation .op {
  text-align: center; font-family: var(--display);
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--accent-deep);
}
.math-equation .stat.total .num { color: var(--accent-bright); }

.math-quote {
  font-family: var(--serif); font-style: italic;
  color: var(--text-muted); text-align: center;
  max-width: 720px; margin: 44px auto 0;
  font-size: 1.1rem; line-height: 1.6;
}

.pathways {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 20px; margin: 36px 0 0;
}
.pathway {
  padding: 28px 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex; flex-direction: column;
}
.pathway-eyebrow {
  font-family: var(--serif); font-style: italic;
  color: var(--accent); font-size: 0.92rem;
  letter-spacing: 0.04em; margin-bottom: 6px;
}
.pathway h3 { font-size: 1.2rem; margin: 0 0 14px; color: var(--heading); }
.pathway p {
  color: var(--text-muted); font-size: 0.98rem;
  line-height: 1.6; margin: 0 0 18px; flex-grow: 1;
}
.pathway.featured {
  border: 1px solid var(--accent);
  background: linear-gradient(180deg, var(--bg-card) 0%, rgba(212, 175, 55, 0.04) 100%);
}
.pathway.featured .pathway-eyebrow { color: var(--accent-bright); }

.partner-cta {
  text-align: center; padding: 80px 24px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.08), transparent 65%),
    var(--bg-3);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.partner-cta h2 { font-size: clamp(2rem, 4vw, 2.8rem); margin: 0 0 14px; }
.partner-cta .scripture { max-width: 640px; margin: 26px auto; text-align: left; }
.partner-cta .tax-line {
  font-family: var(--serif); font-style: italic;
  color: var(--text-dim); font-size: 0.95rem; margin-top: 26px;
}

@media (max-width: 880px) {
  .partner-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .partner-video-frame { max-width: 280px; }
  .math-split { grid-template-columns: 1fr; }
  .math-split-cell.outward { border-left: none; border-top: 1px solid var(--border-strong); }
  .math-equation { grid-template-columns: 1fr; gap: 6px; }
  .math-equation .op { display: none; }
  .pathways { grid-template-columns: 1fr; }
  .partner-photos { grid-template-columns: 1fr; }
}

/* ==========================================================================
   MEDIA page styles (added 2026-05-07 v1.0.4)
   Teaching video grid, YouTube embed, instructions block.
   ========================================================================== */
.media-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px; margin-top: 40px;
}
.media-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
}
.media-card-video {
  position: relative; aspect-ratio: 16 / 9; background: #08090f;
  border-bottom: 1px solid var(--border);
}
.media-card-video iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%; border: 0;
}
.media-card-body { padding: 18px 20px 20px; }
.media-card-body h3 {
  font-size: 1.1rem; margin: 0 0 8px;
  color: var(--heading); line-height: 1.3;
}
.media-card-body p {
  font-family: var(--serif); font-style: italic;
  color: var(--text-muted); font-size: 0.98rem;
  line-height: 1.55; margin: 0;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-bright); text-decoration: none; }
a:hover { color: var(--accent); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }

/* ---- Typography ---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--heading);
  margin: 0 0 0.6em;
  line-height: 1.2;
}
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; letter-spacing: 0.03em; }
h4 { font-size: 1.1rem; }

p, ul, ol { margin: 0 0 1.1em; }
.lead {
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}
.scripture {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-muted);
  border-left: 3px solid var(--accent-deep);
  padding: 0.2em 0 0.2em 1.4em;
  margin: 1.2em 0;
}
.scripture cite {
  display: block;
  font-style: normal;
  font-size: 0.92em;
  color: var(--text-dim);
  margin-top: 0.4em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---- Layout primitives --------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}
/* Section gradient flow — each banner sweeps darker→lighter→darker through the
   leaf-blue / metallic-teal range, with subtle gold + argaman blooms at
   opposite corners. Alternating sections reverse direction so the visual
   rhythm zigzags as the reader scrolls. */
.section {
  padding: 80px 0;
  background:
    radial-gradient(ellipse at 78% 28%, rgba(212, 175, 55, 0.08), transparent 55%),
    radial-gradient(ellipse at 22% 72%, rgba(142, 79, 179, 0.10), transparent 55%),
    linear-gradient(180deg,
      var(--bg) 0%,
      #0a1f2e 30%,
      #1b3d55 55%,
      #0f2b3f 75%,
      var(--bg) 100%);
}
.section-tight { padding: 48px 0; }
.section-alt {
  background:
    radial-gradient(ellipse at 22% 28%, rgba(212, 175, 55, 0.08), transparent 55%),
    radial-gradient(ellipse at 78% 72%, rgba(142, 79, 179, 0.10), transparent 55%),
    linear-gradient(0deg,
      var(--bg) 0%,
      #0a1f2e 30%,
      #1b3d55 55%,
      #0f2b3f 75%,
      var(--bg) 100%);
}
.section-deep {
  background:
    radial-gradient(ellipse at 50% 40%, rgba(26, 111, 229, 0.12), transparent 60%),
    radial-gradient(ellipse at 80% 80%, rgba(212, 175, 55, 0.06), transparent 50%),
    linear-gradient(180deg,
      var(--bg) 0%,
      #001e4b 35%,
      #0f3c69 55%,
      #001e4b 75%,
      var(--bg) 100%);
}
.divider {
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong), transparent);
  margin: 0;
}

/* ---- Header / Nav -------------------------------------------------------- */
.site-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(8px);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  max-width: var(--max-w);
  margin: 0 auto;
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--text);
}
.brand:hover { text-decoration: none; }
.brand img {
  height: 56px;
  width: auto;
  border-radius: 6px;
}
.brand-text {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--accent-bright);
  line-height: 1.1;
}
.brand-text small {
  display: block;
  font-family: var(--serif);
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.02em;
  margin-top: 2px;
}

.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a {
  color: var(--text);
  font-size: 0.95rem;
  padding: 8px 14px;
  border-radius: 4px;
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: background 0.15s, color 0.15s;
}
.nav a:hover { background: var(--bg-3); color: var(--accent-bright); text-decoration: none; }
.nav a.active { color: var(--accent-bright); }

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--border-strong);
  color: var(--text);
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 1rem;
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-block; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding-top: 12px;
  }
  .nav.open { display: flex; }
  .nav a {
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid var(--border);
  }
  .header-inner { flex-wrap: wrap; }
}

/* ---- Hero ---------------------------------------------------------------- */
.hero {
  position: relative;
  padding: 100px 24px 90px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(212, 175, 55, 0.12), transparent 60%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%);
  border-bottom: 1px solid var(--border);
}
.hero-logo {
  width: 220px;
  height: auto;
  margin: 0 auto 32px;
  border-radius: 12px;
  box-shadow: 0 0 60px rgba(212, 175, 55, 0.2);
}
.hero-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  color: var(--text-muted);
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}
.hero h1 {
  max-width: 900px;
  margin: 0 auto 24px;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
}
.hero p.tagline {
  max-width: 720px;
  margin: 0 auto 36px;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.55rem);
  color: var(--text);
}
.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: 4px;
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: 0.08em;
  font-size: 0.9rem;
  text-transform: uppercase;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--accent-bright);
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  cursor: pointer;
}
.btn:hover {
  background: var(--accent);
  color: var(--bg);
  text-decoration: none;
}
.btn-primary {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.btn-primary:hover {
  background: var(--accent-bright);
  border-color: var(--accent-bright);
  color: var(--bg);
}
.btn-ghost {
  border-color: var(--border-strong);
  color: var(--text);
}
.btn-ghost:hover { background: var(--bg-3); color: var(--accent-bright); border-color: var(--border-strong); }
.btn-disabled {
  border-color: var(--border);
  color: var(--text-dim);
  cursor: not-allowed;
  opacity: 0.7;
}
.btn-disabled:hover { background: transparent; color: var(--text-dim); }

/* ---- Page header (sub-pages) -------------------------------------------- */
.page-header {
  padding: 70px 24px 50px;
  text-align: center;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.08), transparent 70%),
    var(--bg-2);
  border-bottom: 1px solid var(--border);
}
.page-header h1 { margin-bottom: 14px; }
.page-header p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.35rem;
  color: var(--text);
  max-width: 720px;
  margin: 0 auto;
}

/* ---- Cards / grid ------------------------------------------------------- */
.section h2 {
  text-align: center;
  margin-bottom: 14px;
}
.section-eyebrow {
  font-family: var(--serif);
  font-style: italic;
  color: var(--accent);
  text-align: center;
  font-size: 1.15rem;
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}
.section-intro {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-style: italic;
  color: var(--text);
  text-align: center;
  max-width: 760px;
  margin: 0 auto 50px;
}

.book-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 36px;
  margin-top: 30px;
}
.book-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.book-card:hover {
  transform: translateY(-4px);
  border-color: var(--border-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
}
.book-cover {
  aspect-ratio: 2 / 3;
  background: var(--bg-3);
  overflow: hidden;
}
.book-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.book-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.book-title {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.03em;
  color: var(--text);
  margin: 0 0 8px;
  line-height: 1.25;
}
.book-blurb {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.45;
  margin: 0 0 16px;
  flex: 1;
}
.book-cta { margin-top: auto; }

/* ---- Two-column / prose ------------------------------------------------- */
.prose {
  max-width: 760px;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 1.3rem;
  line-height: 1.7;
  color: var(--text);
}
.prose p { margin-bottom: 1.3em; }
.prose h2, .prose h3 {
  font-family: var(--display);
  text-align: left;
  margin-top: 1.6em;
  letter-spacing: 0.03em;
}
.prose h2 { margin-top: 2em; }
.prose strong { color: var(--accent-bright); font-weight: 600; }

/* ---- Three-up framework section ----------------------------------------- */
.framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 30px;
  margin-top: 40px;
}
.framework-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 30px 26px;
}
.framework-card .num {
  font-family: var(--display);
  font-size: 1.8rem;
  color: var(--accent);
  margin-bottom: 8px;
  letter-spacing: 0.06em;
}
.framework-card h3 {
  margin-bottom: 12px;
  letter-spacing: 0.04em;
}
.framework-card p {
  font-family: var(--serif);
  font-size: 1.18rem;
  color: var(--text);
  font-style: italic;
  margin: 0;
  line-height: 1.55;
}

/* ---- Give / CTA blocks -------------------------------------------------- */
.cta-block {
  text-align: center;
  padding: 70px 24px;
  border-radius: 8px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(212, 175, 55, 0.1), transparent 70%),
    var(--bg-card);
  border: 1px solid var(--border);
}
.cta-block h2 { margin-bottom: 14px; }
.cta-block p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3rem;
  color: var(--text);
  max-width: 580px;
  margin: 0 auto 30px;
}

/* Tithe.ly button — defer to their inline styles, but provide a wrapper */
.tithely-wrapper {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

/* ---- Forms (contact) ---------------------------------------------------- */
.form-block {
  max-width: 580px;
  margin: 0 auto;
}
.form-block label {
  display: block;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.form-block input,
.form-block textarea {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  padding: 12px 14px;
  color: var(--text);
  font-family: var(--sans);
  font-size: 1rem;
  margin-bottom: 18px;
}
.form-block input:focus,
.form-block textarea:focus {
  outline: none;
  border-color: var(--accent);
}
.form-block textarea { min-height: 140px; resize: vertical; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--border);
  padding: 50px 24px 30px;
  margin-top: 80px;
}
.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 30px;
}
.footer-brand .scripture {
  border-left-color: var(--accent-deep);
  font-size: 0.95rem;
}
.footer-col h4 {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-col li { margin-bottom: 8px; }
.footer-col a {
  color: var(--text-muted);
  font-size: 0.95rem;
}
.footer-col a:hover { color: var(--accent-bright); }
.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--text-dim);
}

@media (max-width: 720px) {
  .footer-inner { grid-template-columns: 1fr; gap: 30px; }
  .footer-bottom { flex-direction: column; }
}

/* ---- Utility ------------------------------------------------------------ */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 12px; }
.mt-2 { margin-top: 24px; }
.mt-3 { margin-top: 36px; }
.mt-4 { margin-top: 48px; }
.mb-0 { margin-bottom: 0; }

/* ==========================================================================
   SoF inline expansion (Layer 1 → Layer 2)
   ========================================================================== */
.sof-stack { max-width: 820px; }
.sof-section { margin-bottom: 50px; }
.sof-roman {
  font-family: var(--display);
  color: var(--accent);
  margin-bottom: 18px;
  font-size: 1.6rem;
  letter-spacing: 0.04em;
}
.sof-short p { font-family: var(--serif); font-size: 1.18rem; line-height: 1.7; }
.sof-divider { margin: 50px 0; }

details.sof-deeper {
  margin: 18px 0 0;
  border-top: 1px dashed var(--border-strong);
  padding-top: 16px;
}
details.sof-deeper > summary {
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-bright);
  list-style: none;
  padding: 12px 0;
  user-select: none;
  display: inline-block;
  border: 1px solid var(--accent-deep);
  padding: 10px 18px;
  border-radius: 4px;
  transition: background 0.15s, color 0.15s;
}
details.sof-deeper > summary::-webkit-details-marker { display: none; }
details.sof-deeper > summary::before {
  content: "▾  ";
  display: inline-block;
  margin-right: 4px;
  transition: transform 0.2s;
}
details.sof-deeper:not([open]) > summary::before {
  content: "▸  ";
}
details.sof-deeper > summary:hover {
  background: var(--bg-3);
}
details.sof-deeper .sof-deeper-label-open { display: none; }
details.sof-deeper[open] .sof-deeper-label-closed { display: none; }
details.sof-deeper[open] .sof-deeper-label-open { display: inline; }

.sof-long {
  margin-top: 24px;
  padding: 24px 26px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: var(--serif);
  font-size: 1.1rem;
  line-height: 1.7;
  animation: sof-fade-in 0.35s ease;
}
@keyframes sof-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.sof-long p { margin-bottom: 1em; }
.sof-deeper-cta {
  text-align: center;
  margin: 30px 0 6px;
}

/* Blog index */
.blog-list { display: grid; gap: 18px; }
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 22px 28px;
  transition: border-color 0.15s, transform 0.15s;
}
.blog-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-2px);
}
.blog-card h3 {
  margin: 0;
  font-size: 1.25rem;
}
.blog-card h3 a {
  color: var(--text);
  text-decoration: none;
}
.blog-card h3 a:hover {
  color: var(--accent-bright);
}

/* ==========================================================================
   BUDDYPRESS BUTTON OVERRIDES (added S128 v4 reskin)
   --------------------------------------------------------------------------
   BuddyPress (Activity, Forums, Groups, Members, profile features) injects
   its own button styles that don't pick up the theme's CSS variables. These
   ~30 lines force every BP action button (Send Message, Add Friend, Reply,
   Join Group, Post Update, etc.) into the v4 sacred-color register so the
   community surfaces read as one continuous design with the rest of the site.

   No BuddyPress data is touched — this is purely visual. Members, posts,
   groups, messages, friendships all persist exactly as they are.
   ========================================================================== */
.bp-generic-button a,
.bp-generic-button button,
.bp-button,
a.button,
button.button,
input[type="submit"].button,
.generic-button a,
#buddypress .generic-button a,
#buddypress button,
#buddypress input[type="submit"],
#buddypress input[type="button"],
#buddypress input[type="reset"],
#buddypress ul.button-nav li a,
#buddypress div.generic-button a,
#buddypress .comment-reply-link,
#buddypress a.button,
#buddypress .standard-form button,
#buddypress a.bp-title-button {
  background: transparent !important;
  border: 1px solid var(--accent) !important;
  color: var(--accent-bright) !important;
  font-family: var(--display) !important;
  font-weight: 500 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  padding: 9px 18px !important;
  border-radius: 4px !important;
  text-decoration: none !important;
  transition: background 0.15s, color 0.15s, border-color 0.15s !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
.bp-generic-button a:hover,
.bp-generic-button button:hover,
.bp-button:hover,
a.button:hover,
button.button:hover,
input[type="submit"].button:hover,
#buddypress .generic-button a:hover,
#buddypress button:hover,
#buddypress input[type="submit"]:hover,
#buddypress input[type="button"]:hover,
#buddypress ul.button-nav li a:hover,
#buddypress div.generic-button a:hover,
#buddypress .comment-reply-link:hover,
#buddypress a.button:hover,
#buddypress .standard-form button:hover {
  background: var(--accent) !important;
  color: var(--bg) !important;
  border-color: var(--accent) !important;
  text-decoration: none !important;
}
/* Primary BP affordances (Send Message, Add Friend, Join Group) — argaman
   accent on hover ring to mark them as covenant-body actions. */
#buddypress div.message-button a:hover,
#buddypress div.friendship-button a:hover,
#buddypress div.group-button a.join-group:hover {
  border-color: var(--argaman) !important;
}
/* Active / "current" BP nav-style buttons (subnav, tabs) inherit the
   priestly-witness accent the rest of the site uses. */
#buddypress div.item-list-tabs ul li.current a,
#buddypress div.item-list-tabs ul li.selected a {
  background: var(--bg-3) !important;
  color: var(--accent-bright) !important;
  border-bottom: 2px solid var(--accent) !important;
}