/*
 * GODISNOWHERE — Shared Article + Page Styles
 * All article pages, explore.html, and linked pages share this file.
 */

/* ── Flash-of-wrong-theme prevention ─────────────────────────── */
/* Applied by site.js immediately before DOMContentLoaded */
html.light-mode-early body,
html.light-mode-early {
  background: #f2ede6 !important;
  color: #1a1208 !important;
}

/* ── Reset & root ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

:root {
  --black:   #070707;
  --gold:    #C9932A;
  --gold-l:  #E8B84B;
  --gold-d:  #8A6518;
  --white:   #FFFFFF;
  --no-c:    #A82020;      /* crimson — Nowhere */
  --now-c:   #C9932A;      /* gold    — Now Here */
  --br-c:    #4A6FA5;      /* steel   — Between */
  --res-c:   #9C8A6A;      /* parchment — Resurrection */
  --com-c:   #5A7A5A;      /* sage    — Commentary */
  --glass:   rgba(7,7,7,.94);
}

/*
  RESPONSIVE ROOT FONT SCALE
  ─────────────────────────────────────────────────────────────────
  Everything in this stylesheet is sized in rem, so scaling the
  root font-size here automatically scales the entire design.

  Breakdown:
    375px phone  → 18px root  (small phone — bump up most)
    768px tablet → 17px root  (comfortable mid-range)
    1280px desk  → 16px root  (designed baseline)
    1600px+      → 17px root  (large monitors — slight bump)

  clamp(min, preferred, max) — preferred is viewport-relative.
  Two clamps handle the dip-then-rise curve:
    mobile→tablet: 18px → 17px   (slightly shrinks as screen widens)
    tablet→desktop: already at 17px, then we let the second clamp
    hold at 16–17px for large screens.

  Net effect on key elements at 375px vs 1280px:
    .prose         0.9rem  →  16.2px vs 14.4px  (+12%)
    .sb-list-item  0.77rem →  13.9px vs 12.3px  (+13%)
    .nav-link      0.5rem  →   9.0px vs  8.0px  (+12%)
    .article-title uses clamp() independently so stays large.
*/
html {
  scroll-behavior: smooth;
  /* Desktop baseline */
  font-size: 16px;
}

/* ── Mobile root scale: make 1rem bigger on phones so all rem values lift ── */
@media (max-width: 767px) {
  html { font-size: 20px; }
}
@media (max-width: 400px) {
  html { font-size: 21px; }
}

body {
  background:var(--black); color:var(--white);
  font-family:'Inter',sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ────────────────────────────────────────────────────────────────
   NAV — shared across all pages
──────────────────────────────────────────────────────────────── */
#site-nav {
  position:fixed; top:0; left:0; right:0; z-index:600;
  height:52px; padding:0 clamp(1rem,3.5vw,3rem);
  display:flex; align-items:center; justify-content:space-between;
  background:rgba(7,7,7,.96); backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.04);
}

.nav-logo-wrap {
  display:flex; align-items:center; gap:.6rem;
  text-decoration:none; user-select:none;
}
.nav-butterfly { display:flex; align-items:center; opacity:.72; transition:opacity .3s; }
.nav-logo-wrap:hover .nav-butterfly { opacity:1; }
.nav-word {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:.78rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.40); transition:color .3s;
}
.nav-logo-wrap:hover .nav-word { color:rgba(255,255,255,.65); }

.nav-links { display:flex; gap:clamp(.7rem,2vw,1.8rem); align-items:center; }
.nav-link {
  font-family:'Oswald',sans-serif; font-size:.5rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(255,255,255,.45); text-decoration:none;
  transition:color .2s;
}
.nav-link:hover, .nav-link.nav-active { color:rgba(255,255,255,.82); }
.nav-resurrection { color:rgba(156,138,106,.5) !important; }
.nav-resurrection:hover { color:rgba(156,138,106,.9) !important; }
.nav-resurrection.nav-active { color:var(--res-c) !important; }
.nav-commentary { color:rgba(90,122,90,.55) !important; }
.nav-commentary:hover { color:rgba(90,170,90,.8) !important; }
.nav-commentary.nav-active { color:var(--com-c) !important; }
.nav-gate {
  font-family:'Oswald',sans-serif; font-size:.5rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.40); text-decoration:none;
  border:1px solid rgba(255,255,255,.18); padding:.24rem .7rem;
  transition:color .2s, border-color .2s;
}
.nav-gate:hover { color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.38); }

.nav-tools {
  display:flex; align-items:center; justify-content:center;
  width:28px; height:28px;
  background:none; border:1px solid rgba(255,255,255,.08);
  border-radius:4px; color:rgba(255,255,255,.24);
  font-size:14px; cursor:pointer;
  transition:all .25s; user-select:none;
  flex-shrink:0;
}
/* First nav-tools button gets the margin-left:auto to push both to the right */
.nav-tools:first-of-type { margin-left:auto; }
/* Small gap between the two icon buttons */
#theme-toggle { margin-left:4px; }
.nav-tools:hover {
  color:rgba(201,147,42,.8); border-color:rgba(201,147,42,.3);
  background:rgba(201,147,42,.06);
}

/* ────────────────────────────────────────────────────────────────
   NAV TAGLINE — rotating phrase, centre of nav bar
──────────────────────────────────────────────────────────────── */
.nav-tagline {
  flex:1;
  text-align:center;
  font-family:'EB Garamond','Georgia',serif;
  font-style:italic;
  font-size:.78rem;
  color:rgba(255,255,255,.22);
  letter-spacing:.02em;
  pointer-events:none;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding:0 1rem;
  transition:opacity .6s ease;
}
.nav-tagline a.nav-tagline-link {
  color:inherit;
  text-decoration:none;
  pointer-events:all;
  cursor:pointer;
  transition:color .3s;
}
.nav-tagline a.nav-tagline-link:hover {
  color:rgba(201,147,42,.55);
}
/* Fade-out / fade-in animation classes */
.nav-tagline.nt-out { opacity:0; }
.nav-tagline.nt-in  { opacity:1; }
@media (max-width:767px) {
  /* ── Mobile nav: butterfly icon + links only ─────────────────────
     Hide the text wordmark, tagline and desktop contrast button.
     Nav links spread evenly across the full bar width.
  ──────────────────────────────────────────────────────────────── */
  .nav-tagline { display:none !important; }
  .nav-word    { display:none !important; }

  /* Logo wrap: just the butterfly icon, no extra space */
  .nav-logo-wrap { flex-shrink:0 !important; }

  /* Nav bar: tighter padding, no extra gap */
  #site-nav {
    padding:0 10px !important;
    gap:0 !important;
  }

  /* Links row fills the remaining width, evenly spaced */
  .nav-links {
    flex:1 !important;
    justify-content:space-evenly !important;
    gap:0 !important;
  }

  /* Each link: readable px size, tight letter-spacing, good tap target */
  .nav-link {
    font-size:13px !important;
    letter-spacing:.10em !important;
    padding:.4rem .3rem !important;
    white-space:nowrap;
  }

  /* Hide nav tool buttons on mobile — clean minimal nav */
  #contrast-toggle { display:none !important; }
  #theme-toggle    { display:none !important; }
}

/* ────────────────────────────────────────────────────────────────
   ARTICLE LAYOUT — two columns: essay | sidebar
──────────────────────────────────────────────────────────────── */
.article-wrap {
  display:grid;
  grid-template-columns: 1fr 0px;
  grid-template-rows: auto 1fr;
  min-height:100vh;
  transition:grid-template-columns .45s cubic-bezier(.4,0,.2,1);
}
.article-wrap.sidebar-open {
  grid-template-columns: 1fr min(420px, 36vw);
}
@media (max-width:900px) {
  .article-wrap.sidebar-open { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   MODE BAR (Read / Research toggle)
──────────────────────────────────────────────────────────────── */
.mode-bar {
  display:none; /* Read\/Research bar removed — mode switched via theme pill only */
}
.mode-btn {
  flex:1; font-family:'Oswald',sans-serif; font-size:.56rem;
  letter-spacing:.32em; text-transform:uppercase;
  padding:.95rem; border:none; background:transparent;
  cursor:pointer; color:rgba(255,255,255,.50);
  transition:color .2s, background .2s;
  border-bottom:2px solid transparent;
}
.mode-btn:hover:not(.active) { color:rgba(255,255,255,.55); background:rgba(255,255,255,.025); }

/* Side-colored active states */
.no-article          .mode-btn.active { color:var(--no-c);  border-bottom-color:var(--no-c);  background:rgba(140,18,18,.06); }
.now-article         .mode-btn.active { color:var(--now-c); border-bottom-color:var(--now-c); background:rgba(201,147,42,.06); }
.bridge-article      .mode-btn.active { color:var(--br-c);  border-bottom-color:var(--br-c);  background:rgba(74,111,165,.06); }
.resurrection-article .mode-btn.active { color:var(--res-c); border-bottom-color:var(--res-c); background:rgba(156,138,106,.06); }
.commentary-article  .mode-btn.active { color:var(--com-c); border-bottom-color:var(--com-c); background:rgba(90,122,90,.06); }

/* Sidebar toggle button */
#sidebar-toggle {
  display:flex; align-items:center; gap:.5rem;
  font-family:'Oswald',sans-serif; font-size:.5rem;
  letter-spacing:.22em; text-transform:uppercase;
  padding:.95rem 1.4rem; border:none;
  background:transparent; cursor:pointer;
  color:rgba(255,255,255,.42); border-left:1px solid rgba(255,255,255,.05);
  border-bottom:2px solid transparent;
  transition:color .2s, background .2s;
}
#sidebar-toggle:hover { color:rgba(255,255,255,.5); }
#sidebar-toggle .st-icon { font-size:.9rem; line-height:1; }
.st-label { white-space:nowrap; }

/* ────────────────────────────────────────────────────────────────
   HERO
──────────────────────────────────────────────────────────────── */
.article-hero {
  position:relative; height:56vh; min-height:340px;
  overflow:hidden; margin-top:52px;
  display:flex; align-items:flex-end;
}
.hero-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  filter:brightness(.32) saturate(.5);
  transition:filter 4s ease;
}
.article-hero:hover .hero-bg { filter:brightness(.40) saturate(.65); }
.hero-wash {
  position:absolute; inset:0;
  background:linear-gradient(to top,
    rgba(7,7,7,1) 0%,
    rgba(7,7,7,.58) 45%,
    rgba(7,7,7,.2) 100%);
}
.hero-content {
  position:relative; z-index:2; width:100%;
  /* Left padding accounts for .bn-toggle (22px wide) so title never hides under it */
  padding:clamp(1.5rem,4vw,3rem) clamp(1.5rem,5vw,5rem) clamp(2rem,5vw,4rem) clamp(1.8rem,4.5vw,5rem);
}

/* GODISNOWHERE — plain text, one color, no splits, no per-letter spans */
.hero-gisn {
  font-family:'Oswald',sans-serif; font-weight:300;
  font-size:clamp(1rem,2.5vw,1.5rem); letter-spacing:.22em;
  text-transform:uppercase; display:block;
  margin-bottom:.9rem; user-select:none;
  color:rgba(255,255,255,.22);
}
/* No accent rules. GODISNOWHERE is plain uniform text everywhere. */

.article-side-tag {
  font-family:'Oswald',sans-serif; font-size:.5rem;
  letter-spacing:.44em; text-transform:uppercase;
  margin-bottom:.8rem; display:block;
}
.no-article           .article-side-tag { color:rgba(168,32,32,.8); }
.now-article          .article-side-tag { color:rgba(201,147,42,.8); }
.bridge-article       .article-side-tag { color:rgba(74,111,165,.8); }
.resurrection-article .article-side-tag { color:rgba(156,138,106,.8); }
.commentary-article   .article-side-tag { color:rgba(90,122,90,.8); }

.article-title {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(1.8rem,5.5vw,4.2rem); letter-spacing:.05em;
  text-transform:uppercase; line-height:1.02; margin-bottom:.8rem;
  color:rgba(255,255,255,.96);
}
.article-subtitle {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(.88rem,1.6vw,1.08rem); color:rgba(255,255,255,.62);
  max-width:580px; line-height:1.68;
}

/* ────────────────────────────────────────────────────────────────
   ARTICLE PROGRESS FLAG  (e.g. "NO · 1 OF 8")
   Appears in hero content, below the subtitle
──────────────────────────────────────────────────────────────── */
.article-progress-flag {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  margin-top: 1.2rem;
  font-family: 'Oswald', sans-serif;
  font-size: .42rem;
  letter-spacing: .42em;
  text-transform: uppercase;
}
.apf-series {
  color: rgba(255,255,255,.28);
}
.apf-sep {
  color: rgba(255,255,255,.15);
}
.apf-count {
  color: rgba(255,255,255,.18);
}
/* Accent color per series */
.no-article           .apf-series { color: rgba(168,32,32,.75); }
.now-article          .apf-series { color: rgba(201,147,42,.75); }
.bridge-article       .apf-series { color: rgba(74,111,165,.75); }
.resurrection-article .apf-series { color: rgba(156,138,106,.75); }
.commentary-article   .apf-series { color: rgba(90,122,90,.75); }

/* ────────────────────────────────────────────────────────────────
   ARTICLE MAIN BODY
──────────────────────────────────────────────────────────────── */
.article-main { grid-column:1; }

.article-body {
  max-width:840px; margin:0 auto;
  padding:clamp(2.5rem,6vw,5rem) clamp(1.5rem,5vw,4rem);
}

/* READ / RESEARCH toggle */
#read-content    { display:block; }
#research-content { display:none; }
body.mode-research #read-content     { display:none; }
body.mode-research #research-content { display:block; }

/* ── READ prose ───────────────────────────────────────────────── */
.read-lede {
  font-family:'Playfair Display',serif;
  font-size:clamp(1.05rem,2vw,1.28rem);
  line-height:1.9; color:rgba(255,255,255,.85);
  margin-bottom:2.6rem; border-left:3px solid;
  padding-left:1.4rem;
}
.no-article           .read-lede { border-color:rgba(168,32,32,.5); }
.now-article          .read-lede { border-color:rgba(201,147,42,.5); }
.bridge-article       .read-lede { border-color:rgba(74,111,165,.5); }
.resurrection-article .read-lede { border-color:rgba(156,138,106,.5); }
.commentary-article   .read-lede { border-color:rgba(90,122,90,.5); }

.section-head {
  font-family:'Oswald',sans-serif; font-weight:600;
  font-size:.54rem; letter-spacing:.4em; text-transform:uppercase;
  margin:3.2rem 0 1.1rem;
}
.no-article           .section-head { color:rgba(168,32,32,.85); }
.now-article          .section-head { color:rgba(201,147,42,.85); }
.bridge-article       .section-head { color:rgba(74,111,165,.85); }
.resurrection-article .section-head { color:rgba(156,138,106,.85); }
.commentary-article   .section-head { color:rgba(90,122,90,.85); }

.prose {
  font-family:'Inter',sans-serif; font-size:clamp(.9rem,1.5vw,1.02rem);
  line-height:1.92; color:rgba(255,255,255,.78); margin-bottom:1.65rem;
}
.prose strong { color:rgba(255,255,255,.92); font-weight:600; }
.prose em     { font-style:italic; color:rgba(255,255,255,.78); }

.pull-quote {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(1.08rem,2.2vw,1.42rem); line-height:1.74;
  color:rgba(255,255,255,.80); border-left:3px solid;
  padding:1.2rem 1.8rem; margin:2.4rem 0;
  background:rgba(255,255,255,.018);
}
.no-article           .pull-quote { border-color:var(--no-c);  }
.now-article          .pull-quote { border-color:var(--now-c); }
.bridge-article       .pull-quote { border-color:var(--br-c);  }
.resurrection-article .pull-quote { border-color:var(--res-c); }
.commentary-article   .pull-quote { border-color:var(--com-c); }
.pull-quote cite {
  display:block; margin-top:.8rem;
  font-size:.72rem; font-style:normal; letter-spacing:.06em;
  color:rgba(255,255,255,.52);
}

.stat-callout {
  display:flex; gap:1.4rem; align-items:flex-start;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.022);
  padding:1.3rem 1.5rem; margin:2.2rem 0;
}
.stat-num {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(1.5rem,4vw,2.3rem); line-height:1; flex-shrink:0;
}
.no-article           .stat-num { color:rgba(168,32,32,.7); }
.now-article          .stat-num { color:rgba(201,147,42,.7); }
.bridge-article       .stat-num { color:rgba(74,111,165,.7); }
.resurrection-article .stat-num { color:rgba(156,138,106,.7); }
.commentary-article   .stat-num { color:rgba(90,122,90,.7); }
.stat-desc  { font-family:'Inter',sans-serif; font-size:.84rem; line-height:1.62; color:rgba(255,255,255,.66); }
.stat-source { font-size:.7rem; color:rgba(255,255,255,.42); margin-top:.35rem; display:block; }

/* ── RESEARCH mode ────────────────────────────────────────────── */
.research-intro {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(.9rem,1.5vw,1.02rem); color:rgba(255,255,255,.62);
  line-height:1.82; margin-bottom:2.4rem;
}

.sources-list { list-style:none; margin-bottom:2.8rem; }
.source-item {
  padding:1.2rem 0; border-bottom:1px solid rgba(255,255,255,.05);
  display:flex; flex-direction:column; gap:.32rem;
}
.source-cite {
  font-family:'Oswald',sans-serif; font-size:.62rem;
  letter-spacing:.04em; color:rgba(255,255,255,.75);
}
.source-desc { font-family:'Inter',sans-serif; font-size:.82rem; color:rgba(255,255,255,.62); line-height:1.56; }
.source-link {
  font-family:'Oswald',sans-serif; font-size:.5rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(201,147,42,.52); text-decoration:none; transition:color .2s;
}
.source-link:hover { color:var(--gold-l); }

/* Inference engine */
.inference-head {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(1rem,2vw,1.35rem); letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.82);
  margin-bottom:.6rem;
}
.inference-sub {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:.88rem; color:rgba(255,255,255,.55); margin-bottom:1.8rem;
}
.inference-options { display:flex; flex-direction:column; gap:.9rem; }
.inf-option {
  border:1px solid rgba(255,255,255,.07);
  background:rgba(10,8,5,.6); cursor:pointer;
  padding:1.1rem 1.3rem; text-align:left;
  transition:border-color .25s, background .25s, box-shadow .25s;
  display:flex; flex-direction:column; gap:.45rem;
}
.inf-option:hover {
  background:rgba(255,255,255,.03);
  border-color:rgba(255,255,255,.15);
}
.inf-option.selected {
  border-color:rgba(201,147,42,.5);
  background:rgba(201,147,42,.07);
  box-shadow:0 0 0 1px rgba(201,147,42,.15);
}
.inf-label {
  font-family:'Oswald',sans-serif; font-size:.52rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.48); display:block;
}
.inf-option.selected .inf-label { color:rgba(201,147,42,.7); }
.inf-title {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:.9rem; letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.75); display:block; line-height:1.2;
}
.inf-option.selected .inf-title { color:rgba(255,255,255,.92); }
.inf-body {
  font-family:'Inter',sans-serif; font-size:.82rem;
  color:rgba(255,255,255,.62); line-height:1.65;
  max-height:0; overflow:hidden;
  transition:max-height .4s ease, opacity .35s ease;
  opacity:0;
}
.inf-option:hover .inf-body {
  max-height:12rem; opacity:.65;
}
.inf-option.selected .inf-body {
  max-height:16rem; opacity:1;
  color:rgba(255,255,255,.78);
}

/* ── Post-inference recommendation block ── */
.inf-recommendation {
  display:none; margin-top:1.8rem;
  padding:1.4rem 1.6rem;
  border-left:3px solid rgba(201,147,42,.5);
  background:rgba(201,147,42,.04);
  animation:recFadeIn .5s ease forwards;
}
@keyframes recFadeIn {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:translateY(0); }
}
.inf-rec-eyebrow {
  font-family:'Oswald',sans-serif; font-size:.52rem;
  letter-spacing:.25em; text-transform:uppercase;
  color:rgba(201,147,42,.6); margin-bottom:.5rem; display:block;
}
.inf-rec-text {
  font-family:'Inter',sans-serif; font-size:.88rem;
  color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:1rem;
}
.inf-rec-links {
  display:flex; flex-wrap:wrap; gap:.7rem;
}
.inf-rec-btn {
  font-family:'Oswald',sans-serif; font-size:.52rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.52rem 1.2rem; text-decoration:none;
  border:1px solid rgba(201,147,42,.3);
  color:rgba(201,147,42,.8);
  transition:all .22s;
}
.inf-rec-btn:hover {
  background:rgba(201,147,42,.12); color:#E8B84B;
  border-color:rgba(201,147,42,.6);
}
.inf-rec-btn-sec {
  border-color:rgba(255,255,255,.1); color:rgba(255,255,255,.4);
}
.inf-rec-btn-sec:hover {
  border-color:rgba(255,255,255,.3); color:rgba(255,255,255,.7);
  background:transparent;
}

/* ────────────────────────────────────────────────────────────────
   ARTICLE NAVIGATION FOOTER
──────────────────────────────────────────────────────────────── */
.article-nav-foot {
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:1rem;
  border-top:1px solid rgba(255,255,255,.05);
  padding:2rem clamp(1.5rem,5vw,4rem); margin-top:2rem;
}
.anf-back {
  font-family:'Oswald',sans-serif; font-size:.54rem;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(255,255,255,.42); text-decoration:none;
  border:1px solid rgba(255,255,255,.15); padding:.55rem 1.2rem;
  transition:color .2s, border-color .2s;
}
.anf-back:hover { color:rgba(255,255,255,.7); border-color:rgba(255,255,255,.35); }
.anf-next {
  font-family:'Oswald',sans-serif; font-size:.54rem;
  letter-spacing:.26em; text-transform:uppercase;
  text-decoration:none; padding:.55rem 1.4rem;
  transition:background .2s, color .2s, border-color .2s;
  border:1px solid;
}
.no-article           .anf-next { border-color:rgba(168,32,32,.35); color:rgba(168,32,32,.7); }
.no-article           .anf-next:hover { background:rgba(168,32,32,.08); color:#c0392b; }
.now-article          .anf-next { border-color:rgba(201,147,42,.35); color:rgba(201,147,42,.7); }
.now-article          .anf-next:hover { background:rgba(201,147,42,.08); color:var(--gold-l); }
.bridge-article       .anf-next { border-color:rgba(74,111,165,.35); color:rgba(74,111,165,.7); }
.resurrection-article .anf-next { border-color:rgba(156,138,106,.35); color:rgba(156,138,106,.7); }
.commentary-article   .anf-next { border-color:rgba(90,122,90,.35); color:rgba(90,122,90,.7); }

/* ────────────────────────────────────────────────────────────────
   COMING SOON BLOCK  (end of last launch article in a series)
──────────────────────────────────────────────────────────────── */
.coming-soon-block {
  max-width: 640px;
  margin: 0 auto 3rem;
  padding: 2.5rem clamp(1.5rem,5vw,4rem);
  border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.csb-eyebrow {
  font-family: 'Oswald', sans-serif;
  font-size: .44rem;
  letter-spacing: .52em;
  text-transform: uppercase;
  color: rgba(168,32,32,.65);
  margin-bottom: .9rem;
  display: block;
}
.csb-title {
  font-family: 'Oswald', sans-serif;
  font-weight: 700;
  font-size: clamp(1.4rem,3vw,2.1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: .8rem;
  line-height: 1.1;
}
.csb-sub {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: .96rem;
  color: rgba(255,255,255,.38);
  line-height: 1.72;
  margin-bottom: 1.4rem;
}
.csb-note {
  font-family: 'Inter', sans-serif;
  font-size: .78rem;
  letter-spacing: .02em;
  color: rgba(255,255,255,.22);
  padding: .7rem 1rem;
  border-left: 2px solid rgba(168,32,32,.25);
  margin-bottom: 1.5rem;
  font-style: italic;
}
.csb-link {
  font-family: 'Oswald', sans-serif;
  font-size: .5rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  padding-bottom: .12rem;
  transition: color .2s, border-color .2s;
}
.csb-link:hover { color: rgba(255,255,255,.6); border-color: rgba(255,255,255,.35); }

/* ────────────────────────────────────────────────────────────────
   RESEARCH SIDEBAR
──────────────────────────────────────────────────────────────── */
#research-sidebar {
  grid-column:2; grid-row:1/-1;
  width:0; overflow:hidden;
  background:rgba(8,6,3,.98);
  border-left:1px solid rgba(255,255,255,.05);
  transition:width .45s cubic-bezier(.4,0,.2,1);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
#research-sidebar.open { width:min(420px, 36vw); }
@media (max-width:900px) {
  #research-sidebar {
    position:fixed; right:0; top:0; bottom:0; z-index:700;
    width:0 !important;
  }
  #research-sidebar.open { width:min(380px, 92vw) !important; }
}

.sb-inner { padding:5rem 1.6rem 2.6rem; min-width:260px; }
.sb-section { margin-bottom:2.4rem; }
.sb-head {
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.48rem;
  letter-spacing:.48em; text-transform:uppercase;
  color:rgba(255,255,255,.38); padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.07); margin-bottom:1rem;
  display:block;
}

/* Search buttons */
.sb-search-row { display:flex; flex-direction:column; gap:.55rem; }
.sb-search-btn {
  display:flex; align-items:center; gap:.55rem;
  padding:.65rem .9rem; border:1px solid rgba(255,255,255,.07);
  color:rgba(255,255,255,.44); text-decoration:none;
  font-family:'Oswald',sans-serif; font-size:.5rem;
  letter-spacing:.18em; text-transform:uppercase;
  transition:border-color .2s, color .2s, background .2s;
}
.sb-search-btn:hover { border-color:rgba(255,255,255,.18); color:rgba(255,255,255,.75); background:rgba(255,255,255,.03); }
.sb-search-icon { font-size:.9rem; }

/* Authors */
.sb-author-card {
  padding:.88rem 0; border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:.24rem;
}
.sb-author-name {
  font-family:'Oswald',sans-serif; font-size:.7rem;
  letter-spacing:.06em; text-transform:uppercase;
  color:rgba(255,255,255,.72); text-decoration:none;
  transition:color .2s;
}
a.sb-author-name:hover { color:var(--gold-l); }
.sb-author-dates { font-family:'Inter',sans-serif; font-size:.69rem; color:rgba(255,255,255,.52); }
.sb-author-work  { font-family:'Playfair Display',serif; font-style:italic; font-size:.74rem; color:rgba(255,255,255,.62); line-height:1.45; }
.sb-author-stance {
  font-family:'Oswald',sans-serif; font-size:.44rem;
  letter-spacing:.18em; text-transform:uppercase; padding:.18rem .5rem;
  display:inline-block; width:fit-content;
}
.sb-stance-no      { color:rgba(168,32,32,.8);  background:rgba(168,32,32,.1);  }
.sb-stance-now     { color:rgba(201,147,42,.8); background:rgba(201,147,42,.1); }
.sb-stance-neutral { color:rgba(160,180,220,.7); background:rgba(74,111,165,.1); }
.sb-stance-res     { color:rgba(156,138,106,.8); background:rgba(156,138,106,.1); }

/* Deep dive links */
.sb-link {
  display:block; font-family:'Inter',sans-serif; font-size:.77rem;
  color:rgba(201,147,42,.52); text-decoration:none;
  padding:.48rem 0; border-bottom:1px solid rgba(255,255,255,.04);
  transition:color .2s;
}
.sb-link:hover { color:var(--gold-l); }

/* Contrast rows */
.sb-contrast-row {
  display:grid; grid-template-columns:1fr auto 1fr;
  gap:.6rem; align-items:start;
  padding:.7rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.sb-contrast-no  { font-family:'Inter',sans-serif; font-size:.74rem; color:rgba(168,32,32,.85); line-height:1.52; }
.sb-contrast-div { font-size:.8rem; color:rgba(255,255,255,.42); padding-top:.2rem; }
.sb-contrast-now { font-family:'Inter',sans-serif; font-size:.74rem; color:rgba(201,147,42,.85); line-height:1.52; }

/* List items */
.sb-list-item {
  font-family:'Inter',sans-serif; font-size:.77rem;
  color:rgba(255,255,255,.55); line-height:1.6;
  padding:.45rem 0; border-bottom:1px solid rgba(255,255,255,.04);
}
.ci-item { color:rgba(74,111,165,.85); }

/* Source attribution tag — appears inline after contradiction/contraindicator text */
.sb-source {
  display:inline;
  font-family:'Oswald',sans-serif; font-size:.58rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.36);
  margin-left:.45rem;
  white-space:nowrap;
}
a.sb-source {
  text-decoration:none;
  border-bottom:1px dotted rgba(255,255,255,.15);
  transition:color .2s, border-color .2s;
}
a.sb-source:hover {
  color:rgba(201,147,42,.7);
  border-bottom-color:rgba(201,147,42,.35);
}

/* ────────────────────────────────────────────────────────────────
   TABBED RESOURCE SECTION (v2 sidebar)
──────────────────────────────────────────────────────────────── */
#sb-resources { margin-top:.4rem; }

.sb-tab-bar {
  display:flex; flex-wrap:wrap; gap:.3rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  margin-bottom:1rem; padding-bottom:.5rem;
}
.sb-tab {
  font-family:'Oswald',sans-serif; font-size:.44rem;
  letter-spacing:.2em; text-transform:uppercase;
  background:none; border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.32); padding:.35rem .7rem;
  cursor:pointer; transition:all .2s;
}
.sb-tab:hover  { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.2); }
.sb-tab.active { color:var(--gold); border-color:rgba(201,147,42,.5); background:rgba(201,147,42,.06); }
.now-article  .sb-tab.active { color:var(--gold);   border-color:rgba(201,147,42,.5);  background:rgba(201,147,42,.06); }
.no-article   .sb-tab.active { color:var(--no-c);   border-color:rgba(168,32,32,.5);   background:rgba(168,32,32,.06); }
.bridge-article .sb-tab.active { color:var(--br-c); border-color:rgba(74,111,165,.5);  background:rgba(74,111,165,.06); }

.sb-tab-panel { display:none; }
.sb-tab-panel.active { display:block; }

.sb-resource-item {
  padding:.85rem 0; border-bottom:1px solid rgba(255,255,255,.04);
  display:flex; flex-direction:column; gap:.28rem;
}
.sb-resource-item:last-child { border-bottom:none; }

.sb-resource-title {
  font-family:'Oswald',sans-serif; font-size:.68rem;
  letter-spacing:.04em; text-transform:uppercase;
  color:rgba(255,255,255,.76); text-decoration:none;
  line-height:1.35; transition:color .2s;
}
a.sb-resource-title:hover { color:var(--gold-l); }

.sb-resource-meta {
  font-family:'Inter',sans-serif; font-size:.67rem;
  color:rgba(255,255,255,.26); letter-spacing:.01em;
}
.sb-resource-desc {
  font-family:'Inter',sans-serif; font-size:.77rem;
  color:rgba(255,255,255,.52); line-height:1.58;
  margin-top:.2rem;
}
.sb-resource-link {
  font-family:'Oswald',sans-serif; font-size:.48rem;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(201,147,42,.6); text-decoration:none;
  transition:color .2s; display:inline-block; margin-top:.2rem;
}
.sb-resource-link:hover { color:var(--gold-l); }

/* Embedded video */
.sb-embed-wrap {
  position:relative; width:100%; padding-bottom:56.25%;
  height:0; margin-top:.6rem; overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
}
.sb-embed-wrap iframe {
  position:absolute; top:0; left:0; width:100%; height:100%; border:0;
}

/* Embedded audio */
.sb-audio-player {
  width:100%; margin-top:.5rem;
  filter:invert(1) sepia(1) saturate(.3) hue-rotate(180deg);
  opacity:.72;
}
.sb-audio-player:hover { opacity:1; }

/* Section label (used for "Expand Research" heading row) */
.sb-section-label {
  font-family:'Oswald',sans-serif; font-weight:600; font-size:.48rem;
  letter-spacing:.48em; text-transform:uppercase;
  color:rgba(255,255,255,.2); padding-bottom:.5rem;
  border-bottom:1px solid rgba(255,255,255,.05); margin-bottom:1rem;
  display:block;
}

/* ────────────────────────────────────────────────────────────────
   PAGE COVER + FOOTER
──────────────────────────────────────────────────────────────── */
#cover {
  position:fixed; inset:0; z-index:2000;
  background:var(--black); opacity:1; pointer-events:none;
  transition:opacity .65s;
}
#cover.gone { opacity:0; }

.article-footer {
  padding:2rem clamp(1.5rem,5vw,4rem);
  border-top:1px solid rgba(255,255,255,.04);
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem;
}
.footer-logo-wrap {
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; user-select:none;
}
.footer-word {
  font-family:'Oswald',sans-serif; font-size:.56rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.14);
}
.footer-note {
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:.72rem; color:rgba(255,255,255,.11);
}

/* ────────────────────────────────────────────────────────────────
   SCROLL REVEAL
──────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────
   WHO-BRIDGE BLOCK — Designer reveal, used in NOW articles
   and as the culmination of the evidence arc
──────────────────────────────────────────────────────────────── */
.who-bridge-block {
  margin:3.5rem 0 2.5rem;
  padding:2.2rem 2.4rem 2rem;
  border:1px solid rgba(156,138,106,.18);
  background:linear-gradient(135deg,
    rgba(156,138,106,.04) 0%,
    rgba(201,147,42,.03) 100%);
  position:relative;
}
.who-bridge-block::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,
    transparent, rgba(201,147,42,.35), rgba(156,138,106,.4), transparent);
}
.who-bridge-eyebrow {
  font-family:'Oswald',sans-serif; font-weight:400;
  font-size:.54rem; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(156,138,106,.5); margin-bottom:.7rem;
}
.who-bridge-title {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:1.45rem; letter-spacing:.04em;
  color:rgba(255,255,255,.88); margin-bottom:1.2rem; line-height:1.2;
}
.who-bridge-body {
  font-family:'Inter',sans-serif; font-size:.94rem;
  color:rgba(255,255,255,.58); line-height:1.78;
  margin-bottom:1rem;
}
.who-bridge-body strong {
  color:rgba(201,147,42,.9); font-weight:500;
}
.who-bridge-cta {
  display:inline-block; margin-top:1.2rem;
  font-family:'Oswald',sans-serif; font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase;
  padding:.65rem 1.5rem;
  color:rgba(156,138,106,.85); text-decoration:none;
  border:1px solid rgba(156,138,106,.3);
  background:rgba(156,138,106,.05);
  transition:all .25s;
}
.who-bridge-cta:hover {
  background:rgba(156,138,106,.12);
  border-color:rgba(156,138,106,.6);
  color:rgba(255,240,200,.9);
}

/* ────────────────────────────────────────────────────────────────
   HEDRICK PERSONAL INTERLUDE
   First-person analogy blocks — author's voice, set apart visually
──────────────────────────────────────────────────────────────── */
.hedrick-interlude {
  margin:2.8rem 0;
  padding:2rem 2.2rem 2.2rem;
  background:rgba(156,138,106,.04);
  border:1px solid rgba(156,138,106,.12);
  border-left-width:3px;
  border-left-color:rgba(156,138,106,.4);
  position:relative;
}
.hedrick-interlude::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,
    rgba(156,138,106,.4) 0%,
    rgba(201,147,42,.3) 50%,
    transparent 100%);
}
.hi-marker {
  font-family:'Oswald',sans-serif; font-size:.42rem;
  letter-spacing:.38em; text-transform:uppercase;
  color:rgba(156,138,106,.65); margin-bottom:.9rem;
  display:flex; align-items:center; gap:.7rem;
}
.hi-marker::before {
  content:'';
  display:inline-block; width:18px; height:1px;
  background:rgba(156,138,106,.5);
}
.hi-title {
  font-family:'Oswald',sans-serif; font-weight:700;
  font-size:clamp(1.1rem,2.2vw,1.4rem);
  letter-spacing:.04em; color:rgba(255,255,255,.85);
  margin-bottom:1.3rem; line-height:1.2;
}
.hi-body {
  font-family:'Playfair Display',serif;
  font-size:clamp(.88rem,1.4vw,.98rem);
  color:rgba(255,255,255,.62); line-height:1.85;
  margin-bottom:1rem;
}
.hi-body em { color:rgba(201,147,42,.85); font-style:italic; }
.hi-scripture {
  margin:1.4rem 0;
  padding:.9rem 1.2rem;
  border-left:3px solid rgba(156,138,106,.5);
  background:rgba(156,138,106,.05);
}
.hi-vs {
  display:block;
  font-family:'Playfair Display',serif; font-style:italic;
  font-size:clamp(.86rem,1.3vw,.96rem);
  color:rgba(255,255,255,.72); line-height:1.7;
  margin-bottom:.4rem;
}
.hi-ref {
  display:block;
  font-family:'Oswald',sans-serif; font-size:.42rem;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(156,138,106,.6);
}
.hi-cta {
  margin-top:1.8rem;
  padding-top:1.2rem;
  border-top:1px solid rgba(156,138,106,.12);
  display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
}
.hi-cta-label {
  font-family:'Oswald',sans-serif; font-size:.44rem;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.28); flex:1; min-width:160px;
}
.hi-cta-link {
  font-family:'Oswald',sans-serif; font-size:.46rem;
  letter-spacing:.24em; text-transform:uppercase;
  color:rgba(201,147,42,.7); text-decoration:none;
  border-bottom:1px solid rgba(201,147,42,.3);
  padding-bottom:.1rem;
  transition:color .2s, border-color .2s;
  white-space:nowrap;
}
.hi-cta-link:hover { color:rgba(201,147,42,.95); border-color:rgba(201,147,42,.7); }

/* ────────────────────────────────────────────────────────────────
   SCROLL REVEAL
──────────────────────────────────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.reveal.revealed { opacity:1; transform:translateY(0); }

/* ────────────────────────────────────────────────────────────────
   PDF / PRINT BUTTON
──────────────────────────────────────────────────────────────── */
.print-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:'Oswald',sans-serif; font-size:.48rem;
  letter-spacing:.24em; text-transform:uppercase;
  padding:.5rem 1rem;
  color:rgba(255,255,255,.28);
  border:1px solid rgba(255,255,255,.09);
  background:transparent; cursor:pointer;
  transition:color .2s, border-color .2s;
  text-decoration:none;
}
.print-btn:hover { color:rgba(255,255,255,.6); border-color:rgba(255,255,255,.25); }
.print-btn .pb-icon { font-size:.75rem; }

/* ────────────────────────────────────────────────────────────────
   BUTTERFLY TOPIC NAV (left-side topic list motif)
──────────────────────────────────────────────────────────────── */
.butterfly-nav {
  position:fixed; left:0; top:52px; /* below fixed nav */
  bottom:0;
  z-index:402;
  display:flex; flex-direction:column; gap:0;
  background:rgba(7,7,7,.97);
  border-right:1px solid rgba(255,255,255,.07);
  padding:.5rem 0;
  max-width:210px;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
  transform:translateX(-100%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  /* Scrollbar */
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.08) transparent;
}
.butterfly-nav::-webkit-scrollbar { width:4px; }
.butterfly-nav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }
.butterfly-nav.open {
  transform:translateX(0);
}
.bn-toggle {
  position:fixed; left:0; top:calc(52px + 1.5rem); /* below nav (52px) + small gap */
  transform:none;
  z-index:403;
  width:22px; height:56px;
  background:rgba(7,7,7,.92);
  border:1px solid rgba(255,255,255,.09);
  border-left:none;
  cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, left .4s cubic-bezier(.4,0,.2,1);
  writing-mode:vertical-rl;
  border-radius:0 3px 3px 0;
}
.bn-toggle:hover { background:rgba(201,147,42,.1); }
.bn-toggle-inner {
  font-family:'Oswald',sans-serif; font-size:.4rem;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.3); transform:rotate(180deg);
}
.bn-item {
  display:flex; align-items:center; gap:.7rem;
  padding:.55rem 1.1rem;
  text-decoration:none;
  border-left:2px solid transparent;
  transition:border-color .2s, background .2s;
}
.bn-item:hover { background:rgba(255,255,255,.03); }
.bn-item.bn-no:hover    { border-left-color:rgba(168,32,32,.6); }
.bn-item.bn-now:hover   { border-left-color:rgba(201,147,42,.6); }
.bn-item.bn-bridge:hover{ border-left-color:rgba(74,111,165,.6); }
.bn-item.bn-res:hover   { border-left-color:rgba(156,138,106,.6); }
.bn-item.bn-com:hover   { border-left-color:rgba(90,122,90,.6); }
.bn-item.bn-active      { border-left-color:rgba(201,147,42,.6); background:rgba(201,147,42,.04); }
.bn-butterfly {
  width:12px; height:8px; flex-shrink:0;
}
.bn-label {
  font-family:'Inter',sans-serif; font-size:.7rem;
  color:rgba(255,255,255,.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:130px;
}
.bn-cat {
  font-family:'Oswald',sans-serif; font-size:.38rem;
  letter-spacing:.25em; text-transform:uppercase;
  padding:.35rem 1.1rem .2rem;
  color:rgba(255,255,255,.18);
  border-top:1px solid rgba(255,255,255,.04);
}
.bn-cat:first-child { border-top:none; }

@media (max-width:900px) {
  .butterfly-nav, .bn-toggle { display:none; }
}

/* ── Eye icon — author link in article footers ── */
.footer-eye {
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  text-decoration:none;
  color:rgba(255,255,255,.25);
  transition:border-color .2s, color .2s, background .2s;
  margin-left:auto;
  flex-shrink:0;
}
.footer-eye:hover {
  border-color:rgba(201,147,42,.5);
  color:rgba(201,147,42,.8);
  background:rgba(201,147,42,.06);
}
.footer-eye-icon { font-size:.85rem; line-height:1; }

/* Mobile pill / FAB fully removed */
#mobile-mode-pill { display: none !important; }
.mmp-btn          { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   HIGH-CONTRAST MODE  —  body.hi-contrast
   Toggled by the contrast button in the nav. Stored in localStorage.
   Pushes all reading text to near-full white. Tinted elements get
   their opacity raised. Background gets a marginal lift.
   Does not affect decorative / intentionally dim elements.
════════════════════════════════════════════════════════════════ */
body.hi-contrast {
  background: #0e0e0e; /* very slight lift from #070707 */
}

/* Nav */
body.hi-contrast .nav-link            { color:rgba(255,255,255,.65); }
body.hi-contrast .nav-link.nav-active { color:rgba(255,255,255,.92); }
body.hi-contrast .nav-word            { color:rgba(255,255,255,.60); }
body.hi-contrast .nav-tagline         { color:rgba(255,255,255,.35); }
body.hi-contrast .mode-btn            { color:rgba(255,255,255,.65); }

/* Hero */
body.hi-contrast .article-subtitle    { color:rgba(255,255,255,.72); }
body.hi-contrast .hero-gisn           { color:rgba(255,255,255,.38); }

/* Read prose */
body.hi-contrast .read-lede           { color:rgba(255,255,255,.95); }
body.hi-contrast .prose               { color:rgba(255,255,255,.88); }
body.hi-contrast .prose strong        { color:#ffffff; }
body.hi-contrast .prose em            { color:rgba(255,255,255,.92); }
body.hi-contrast .pull-quote          { color:rgba(255,255,255,.92); }
body.hi-contrast .pull-quote cite     { color:rgba(255,255,255,.58); }
body.hi-contrast .stat-desc           { color:rgba(255,255,255,.78); }
body.hi-contrast .stat-source         { color:rgba(255,255,255,.50); }

/* Research tab */
body.hi-contrast .research-intro      { color:rgba(255,255,255,.72); }
body.hi-contrast .source-cite         { color:rgba(255,255,255,.90); }
body.hi-contrast .source-desc         { color:rgba(255,255,255,.70); }
body.hi-contrast .inference-sub       { color:rgba(255,255,255,.62); }
body.hi-contrast .inf-title           { color:rgba(255,255,255,.92); }
body.hi-contrast .inf-body            { color:rgba(255,255,255,.70); }
body.hi-contrast .inf-option.selected .inf-body { color:rgba(255,255,255,.85); }
body.hi-contrast .inf-rec-text        { color:rgba(255,255,255,.75); }

/* Sidebar */
body.hi-contrast .sb-list-item        { color:rgba(255,255,255,.75); }
body.hi-contrast .ci-item             { color:rgba(120,160,230,.95); }
body.hi-contrast .sb-author-dates     { color:rgba(255,255,255,.58); }
body.hi-contrast .sb-author-work      { color:rgba(255,255,255,.68); }
body.hi-contrast .sb-contrast-no      { color:rgba(220,80,80,.95); }
body.hi-contrast .sb-contrast-now     { color:rgba(220,165,60,.95); }
body.hi-contrast .sb-contrast-div     { color:rgba(255,255,255,.45); }

/* Gate / footer */
body.hi-contrast .gate-body           { color:rgba(255,255,255,.72); }
body.hi-contrast .gate-pull           { color:rgba(255,255,255,.92); }
body.hi-contrast .anf-back            { color:rgba(255,255,255,.60); }

/* Contrast toggle button appearance when active (nav bar button) */
.contrast-btn.hi-active {
  color:rgba(201,147,42,.9) !important;
  border-color:rgba(201,147,42,.4) !important;
  background:rgba(201,147,42,.07) !important;
}

/* ════════════════════════════════════════════════════════════════
   LIGHT MODE  —  body.light-mode
   Toggled by the ☀/🌙 button in the nav. Stored in localStorage
   under key 'gisn-theme' = 'light' | 'dark'.
   Strategy: override CSS variables + key colours only.
   Accent colours (crimson, gold, blue) are preserved for identity.
   Hero photos get a stronger brightness to show detail in light BG.
════════════════════════════════════════════════════════════════ */
body.light-mode {
  --black:  #e8e0d4;       /* muted warm parchment — not stark white */
  --white:  #1a1208;       /* near-black text */
  --glass:  rgba(232,224,212,.97);
  background: #e8e0d4;
  color: #1a1208;
}

/* Nav bar */
body.light-mode #site-nav {
  background: rgba(232,224,212,.97);
  border-bottom-color: rgba(0,0,0,.10);
}
body.light-mode .nav-word         { color: rgba(0,0,0,.55); }
body.light-mode .nav-logo-wrap:hover .nav-word { color: rgba(0,0,0,.80); }
body.light-mode .nav-link         { color: rgba(0,0,0,.50); }
body.light-mode .nav-link:hover,
body.light-mode .nav-link.nav-active { color: rgba(0,0,0,.88); }
body.light-mode .nav-gate         { color: rgba(0,0,0,.45); border-color: rgba(0,0,0,.20); }
body.light-mode .nav-gate:hover   { color: rgba(0,0,0,.75); border-color: rgba(0,0,0,.45); }
body.light-mode .nav-tagline      { color: rgba(0,0,0,.30); }
body.light-mode .nav-tools        { color: rgba(0,0,0,.35); border-color: rgba(0,0,0,.15); }
body.light-mode .nav-tools:hover  { color: var(--gold-d); border-color: rgba(201,147,42,.5); background: rgba(201,147,42,.07); }

/* Mode bar */
body.light-mode .mode-bar         { display: none; }

/* Hero */
body.light-mode .hero-bg          { filter: brightness(.50) saturate(.55); }
body.light-mode .hero-wash {
  background: linear-gradient(to top,
    rgba(232,224,212,1) 0%,
    rgba(232,224,212,.65) 45%,
    rgba(232,224,212,.15) 100%);
}
body.light-mode .hero-gisn        { color: rgba(0,0,0,.25); }
body.light-mode .article-subtitle { color: rgba(0,0,0,.58); }

/* Article body — read mode */
body.light-mode .article-body     { background: #e8e0d4; }
body.light-mode .read-lede        { color: rgba(0,0,0,.82); }
body.light-mode .prose            { color: rgba(0,0,0,.75); }
body.light-mode .prose strong     { color: rgba(0,0,0,.92); }
body.light-mode .prose em         { color: rgba(0,0,0,.80); }
body.light-mode .section-head     { /* accent colours kept — already visible on light */ }
body.light-mode .pull-quote       { color: rgba(0,0,0,.78); background: rgba(0,0,0,.03); }
body.light-mode .pull-quote cite  { color: rgba(0,0,0,.45); }
body.light-mode .stat-callout     { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); }
body.light-mode .stat-desc        { color: rgba(0,0,0,.65); }
body.light-mode .stat-source      { color: rgba(0,0,0,.40); }

/* Research mode */
body.light-mode .research-intro   { color: rgba(0,0,0,.62); }
body.light-mode .source-item      { border-bottom-color: rgba(0,0,0,.10); }
body.light-mode .source-cite      { color: rgba(0,0,0,.78); }
body.light-mode .source-desc      { color: rgba(0,0,0,.62); }
body.light-mode .inf-option       { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); }
body.light-mode .inf-option:hover { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.20); }
body.light-mode .inf-label        { color: rgba(0,0,0,.42); }
body.light-mode .inf-title        { color: rgba(0,0,0,.80); }
body.light-mode .inf-body         { color: rgba(0,0,0,.62); }
body.light-mode .inference-sub    { color: rgba(0,0,0,.52); }

/* Sidebar */
body.light-mode #research-sidebar { background: rgba(235,229,220,.99); border-left-color: rgba(0,0,0,.10); }
body.light-mode .sb-head          { color: rgba(0,0,0,.38); border-bottom-color: rgba(0,0,0,.10); }
body.light-mode .sb-search-btn    { color: rgba(0,0,0,.50); border-color: rgba(0,0,0,.12); }
body.light-mode .sb-search-btn:hover { color: rgba(0,0,0,.80); border-color: rgba(0,0,0,.28); background: rgba(0,0,0,.04); }
body.light-mode .sb-author-name   { color: rgba(0,0,0,.78); }
body.light-mode .sb-author-dates  { color: rgba(0,0,0,.48); }
body.light-mode .sb-author-work   { color: rgba(0,0,0,.60); }
body.light-mode .sb-list-item     { color: rgba(0,0,0,.65); border-bottom-color: rgba(0,0,0,.08); }
body.light-mode .sb-contrast-div  { color: rgba(0,0,0,.38); }
body.light-mode .sb-tab           { color: rgba(0,0,0,.40); border-color: rgba(0,0,0,.12); background: none; }
body.light-mode .sb-tab:hover     { color: rgba(0,0,0,.70); border-color: rgba(0,0,0,.28); }

/* Article nav footer */
body.light-mode .article-footnav  { background: rgba(235,229,220,.98); border-top-color: rgba(0,0,0,.10); }
body.light-mode .anf-back,
body.light-mode .anf-next         { color: rgba(0,0,0,.52); }

/* Explore page hero + card list (light mode) */
body.light-mode .sh-eyebrow       { color: rgba(150,60,60,.80); }
body.light-mode .sh-sub           { color: rgba(0,0,0,.62); }
body.light-mode .sh-cta           { color: rgba(120,60,15,.80); border-color: rgba(150,90,20,.35); }
body.light-mode .sh-cta:hover     { color: rgba(100,50,10,.95); border-color: rgba(150,90,20,.70); background: rgba(201,147,42,.07); }
body.light-mode .sl-header        { color: rgba(150,60,60,.70); }
body.light-mode .sl-feat-num      { color: rgba(150,60,60,.65); }
body.light-mode .sl-feat-title    { color: rgba(0,0,0,.88); }
body.light-mode .sl-feat-claim    { color: rgba(0,0,0,.58); }
body.light-mode .sl-feat-read     { color: rgba(150,60,60,.60); }
body.light-mode .sl-featured:hover .sl-feat-read { color: rgba(170,40,40,.90); }
body.light-mode .sl-featured      { background: rgba(242,237,230,.85); border-left-color: rgba(168,32,32,.25); }
body.light-mode .sl-featured:hover{ background: rgba(235,225,210,.90); border-left-color: rgba(168,32,32,.65); }
body.light-mode .sl-card          { background: rgba(235,229,220,.70); border-left-color: rgba(168,32,32,.12); }
body.light-mode .sl-card:hover    { background: rgba(225,218,205,.85); border-left-color: rgba(168,32,32,.55); }
body.light-mode .sl-card-num      { color: rgba(150,60,60,.55); }
body.light-mode .sl-card-title    { color: rgba(0,0,0,.78); }
body.light-mode .sl-card-claim    { color: rgba(0,0,0,.52); }
body.light-mode .sb-note          { color: rgba(0,0,0,.45); }
body.light-mode .sb-link          { color: rgba(0,0,0,.55); border-color: rgba(0,0,0,.15); }
body.light-mode .sb-link:hover    { color: rgba(0,0,0,.85); background: rgba(0,0,0,.04); }

/* Theme toggle button states */
.theme-btn         { font-size: 15px; }
.theme-btn.light-active {
  color: rgba(201,147,42,.9) !important;
  border-color: rgba(201,147,42,.4) !important;
  background: rgba(201,147,42,.07) !important;
}

/* Theme toggle nav button in light mode (desktop only) */
body.light-mode #theme-toggle { color: rgba(0,0,0,.40); border-color: rgba(0,0,0,.15); }
body.light-mode #theme-toggle:hover { color: var(--gold-d); border-color: rgba(201,147,42,.5); background: rgba(201,147,42,.07); }

/* ────────────────────────────────────────────────────────────────
   PRINT / PDF STYLES
──────────────────────────────────────────────────────────────── */
@media print {
  /* Hide everything except the article content */
  #site-nav, .mode-bar, #sidebar-toggle, .article-footnav,
  .research-sidebar, .article-footer, #cover,
  .butterfly-nav, .bn-toggle, .who-bridge-cta,
  .inf-rec-next, .src-link, .sb-search-btn { display:none !important; }

  body { background:#fff !important; color:#111 !important; }
  #read-content { display:block !important; }
  #research-content { display:block !important; }

  .article-wrap { display:block; grid-template-columns:1fr !important; }
  .article-hero { height:auto; min-height:0; page-break-after:avoid; }
  .hero-bg { filter:brightness(.5) saturate(.4) !important; }

  .article-body { padding:1.5rem !important; max-width:100% !important; }
  .article-title { color:#111 !important; font-size:2rem !important; }
  .article-subtitle { color:#444 !important; }

  .read-lede, .prose { color:#222 !important; }
  .section-head { color:#A82020 !important; }
  .pull-quote { border-color:#A82020 !important; color:#333 !important; }
  .pull-quote cite { color:#555 !important; }

  .stat-callout { border:1px solid #ccc !important; background:#f9f9f9 !important; }
  .sc-number { color:#A82020 !important; }

  .who-bridge { border:1px solid #ccc !important; background:#f9f9f9 !important; page-break-inside:avoid; }
  .who-bridge-title, .who-bridge-eyebrow, .who-bridge-body { color:#222 !important; }

  .inference-block { border:1px solid #ccc !important; }
  .inf-label { color:#222 !important; }
  .inf-body { color:#444 !important; }

  .source-item { border:1px solid #ddd !important; background:#f9f9f9 !important; }
  .src-cite { color:#222 !important; }
  .src-desc { color:#444 !important; }
  .src-label { color:#A82020 !important; }

  a[href]::after { content:" (" attr(href) ")"; font-size:.7em; color:#666; }
  a.who-bridge-cta::after,
  a.fn-next::after, a.fn-prev::after,
  a.hi-cta-link::after { content:''; }

  .hedrick-interlude { border:1px solid #ccc !important; background:#f5f0e8 !important; }
  .hi-body { color:#333 !important; }
  .hi-scripture { border-left:3px solid #8A6518 !important; background:#f0e8d5 !important; }
  .hi-vs { color:#222 !important; }
  .hi-ref { color:#555 !important; }

  .hero-gisn { display:none; }
  .article-side-tag { color:#A82020 !important; }

  /* Print header */
  .article-hero::after {
    content: 'GODISNOWHERE.ORG  —  by Daniel K. Hedrick';
    display:block; font-family:serif; font-size:.8rem;
    color:#555; padding:.5rem 2rem; border-bottom:1px solid #ccc;
  }
  .article-gate { display:none; }
}

/* ════════════════════════════════════════════════════════════════
   ARTICLE GATE — The personal question at the end of every article
   Injected via initArticleGate() in site.js
════════════════════════════════════════════════════════════════ */
.article-gate {
  margin: 5rem 0 2rem;
}

.gate-divider {
  text-align: center;
  margin-bottom: 3.5rem;
}
.gate-divider-sym {
  font-size: 1.2rem;
  color: rgba(201,147,42,.35);
  letter-spacing: .5em;
}

.gate-question {
  border-left: 3px solid rgba(201,147,42,.3);
  padding: 2rem 2.4rem;
  background: rgba(201,147,42,.03);
  margin-bottom: 2.5rem;
}

.gate-eyebrow {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: .52rem;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(201,147,42,.55);
  margin-bottom: 1.4rem;
}

.gate-body {
  font-family: 'Inter', sans-serif;
  font-size: clamp(.92rem, 1.3vw, 1rem);
  color: rgba(255,255,255,.52);
  line-height: 1.85;
  margin: 0 0 1.1rem;
}
.gate-body:last-child { margin-bottom: 0; }

.gate-pull {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  color: rgba(255,255,255,.82);
  line-height: 1.6;
  border: none;
  margin: 1.6rem 0;
  padding: 0;
}

.gate-actions {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  align-items: flex-start;
}

.gate-btn {
  display: inline-block;
  font-family: 'Oswald', sans-serif;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .85rem 1.8rem;
  border-radius: 2px;
  transition: all .22s ease;
}

.gate-btn-primary {
  background: rgba(201,147,42,.12);
  border: 1px solid rgba(201,147,42,.45);
  color: rgba(201,147,42,.9);
}
.gate-btn-primary:hover {
  background: rgba(201,147,42,.22);
  border-color: rgba(201,147,42,.75);
  color: #C9932A;
}

.gate-btn-secondary {
  background: transparent;
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.38);
}
.gate-btn-secondary:hover {
  border-color: rgba(255,255,255,.25);
  color: rgba(255,255,255,.6);
}

@media (max-width: 600px) {
  .gate-question { padding: 1.4rem 1.2rem; }
  .gate-actions { width: 100%; }
  .gate-btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   MOBILE LEGIBILITY OVERRIDES  (≤ 767px)
   Root is 20px on mobile, but fractional-rem elements (.4–.56rem)
   still land below readable. These px floors guarantee minimums.
   All values are in px so they are immune to root-scale drift.
════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

  /* ── Nav bar ── */
  .nav-link    { font-size: 13px; letter-spacing: .12em; }
  .nav-word    { font-size: 13px; letter-spacing: .15em; }

  /* ── Mode bar ── */
  .mode-btn       { font-size: 14px; letter-spacing: .14em; padding: .85rem; }
  #sidebar-toggle { font-size: 13px; letter-spacing: .10em; padding: .85rem 1rem; }

  /* ── Article hero ── */
  .article-side-tag { font-size: 11px; letter-spacing: .24em; }
  .article-subtitle { font-size: 16px; line-height: 1.72; }

  /* ── Read prose ── */
  .prose          { font-size: 17px; line-height: 1.9; }
  .read-lede      { font-size: 18px; line-height: 1.85; }
  .section-head   { font-size: 12px; letter-spacing: .24em; }
  .stat-desc      { font-size: 15px; }
  .stat-source    { font-size: 13px; }
  .pull-quote     { font-size: 17px; }
  .pull-quote cite { font-size: 13px; }
  .source-cite    { font-size: 13px; }
  .source-desc    { font-size: 14px; }
  .source-link    { font-size: 12px; }

  /* ── Inference engine ── */
  .inf-label       { font-size: 11px; letter-spacing: .14em; }
  .inf-title       { font-size: 16px; }
  .inf-body        { font-size: 15px; }
  .inf-rec-eyebrow { font-size: 11px; }
  .inf-rec-text    { font-size: 15px; }
  .inf-rec-btn     { font-size: 12px; }

  /* ── Research sidebar ── */
  .sb-head         { font-size: 11px; letter-spacing: .26em; }
  .sb-search-btn   { font-size: 13px; letter-spacing: .10em; }
  .sb-list-item    { font-size: 15px; line-height: 1.65; }
  .sb-source       { font-size: 12px; }
  .sb-author-name  { font-size: 14px; }
  .sb-author-dates { font-size: 12px; }
  .sb-author-work  { font-size: 13px; }
  .sb-author-stance { font-size: 11px; }
  .sb-contrast-no,
  .sb-contrast-now { font-size: 13px; }

  /* ── Article gate ── */
  .gate-eyebrow  { font-size: 11px; }
  .gate-body     { font-size: 16px; }
  .gate-btn      { font-size: 14px; }
  .gate-pull     { font-size: 18px; }

  /* ── Nav footer ── */
  .anf-back, .anf-next { font-size: 12px; letter-spacing: .14em; }

  /* ── Article footer ── */
  .foot-site  { font-size: 14px; }
  .foot-note  { font-size: 13px; }

  /* ── Tabbed resource section ── */
  .sb-tab        { font-size: 11px; letter-spacing: .14em; }
  .sb-res-title  { font-size: 14px; }
  .sb-res-meta   { font-size: 12px; }
  .sb-resource-desc { font-size: 13px; }
}