/* Dataronomy — shared stylesheet for per-episode detail pages.
   Tokens copied from site/index.html so these pages read as the same site,
   not a bolt-on. Keep in sync if index.html's :root tokens ever change. */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{
  --paper:#F5EFE4;
  --card:#FAF5EA;
  --manila:#E7D9BC;
  --ink:#241E17;
  --red:#F0412B;
  --brass:#A9791E;
  --slate:#5B677A;
  --inkdim:#6B6156;
  --hair:rgba(36,30,23,.16);
  --hair2:rgba(36,30,23,.28);
  --disp:"Arial Black","Arial Bold",Arial,sans-serif;
  /* ACCESSIBILITY PASS 2026-08-29: body prose is SANS-SERIF now. Verdana was
     built for on-screen reading — wide letters, big x-height — and sits on the
     British Dyslexia Association's recommended list. It also keeps the page one
     system: Arial Black display + Verdana body + Consolas mono, all of a piece.
     Georgia survives ONLY as --serif, for verbatim KJV verse blocks (see
     blockquote.verse below) — never for running prose. */
  --body:Verdana,"Segoe UI",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:Consolas,"SF Mono",Menlo,"Courier New",monospace;
}
html{scroll-behavior:smooth}
/* 18px body, 1.65 leading — the dyslexia-friendly house standard (18–20px, 1.6+) */
body{background:var(--paper);color:var(--ink);font:400 1.125rem/1.65 var(--body);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit}
/* NO ITALICS, EVER (accessibility pass 2026-08-29): slanted letterforms are
   measurably harder for dyslexic readers. Emphasis = bold + a red highlighter
   swipe (same translucent red as the homepage's tape marks), so <em> still
   reads as "marked" without leaning a single glyph. */
em,i,cite,var,dfn,address{font-style:normal}
em,i{font-weight:700;background:linear-gradient(transparent 62%,rgba(240,65,43,.24) 62%)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ===== DESIGN DIRECTION D — FULL-BLEED EDITORIAL (locked 2026-08-29) =====
   Two containers do all the work:
     .wrap  — the NARROW reading column (600px). Short lines, easy tracking.
              Headline, prose, claims, sources, footer all live in here.
     .stage — the WIDE page container (900px). Only used on <main> once a
              page is migrated to this pattern. Images (.bleed / .hero-frame)
              and the pullquote band are direct children of .stage and break
              OUT of .wrap's width to read as editorial photography, not
              boxed art. Pages not yet migrated keep <main class="wrap"> —
              .hero-frame still works there, just contained to 600px with
              no card, which is a safe, unbroken interim look. */
.wrap{max-width:600px;margin:0 auto;padding:0 1.25rem}
.stage{max-width:900px;margin:0 auto;padding:0 1.25rem}

.wm{font:900 1.05rem/1 var(--disp);letter-spacing:-.02em;text-transform:lowercase;text-decoration:none}
.wm .r{color:var(--red)}
.wm .k{color:var(--ink)}

header.site{padding:1.4rem 0}
header.site .wrap{display:flex;align-items:center;justify-content:space-between}
.home-link{font:700 .7rem var(--mono);letter-spacing:.12em;text-decoration:none;color:var(--inkdim)}
.home-link:hover{color:var(--ink)}

.kicker{display:inline-block;font:700 .7rem var(--mono);letter-spacing:.14em;color:var(--brass);margin:2rem 0 .5rem}
h1{font:900 clamp(2rem,5.5vw,3.1rem)/1.04 var(--disp);letter-spacing:-.015em;text-transform:uppercase;margin-bottom:.6rem}
.meta-row{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;font:700 .72rem var(--mono);letter-spacing:.08em;color:var(--inkdim);margin-bottom:.4rem}
.meta-row b{color:var(--ink)}

/* Full-bleed image — no card, no border, no shadow. Breaks past its parent's
   1.25rem side padding so it reads wider than the text next to it: edge to
   edge of .stage on a migrated page, edge to edge of .wrap (600px) on one
   that isn't yet. width:auto + max-width keeps the art's true aspect. */
.bleed,.hero-frame{width:calc(100% + 2.5rem);margin:2.2rem -1.25rem}
.bleed img,.hero-frame img{display:block;width:100%;height:auto;max-height:82vh;margin:0 auto;object-fit:contain}
.bleed .cap{max-width:600px;margin:0 auto;padding:.6rem 1.25rem 0;
  font:700 .68rem var(--mono);letter-spacing:.06em;color:var(--inkdim);
  display:flex;justify-content:space-between;gap:.8rem}
.bleed .cap .k{color:var(--brass)}

.chip{display:inline-block;font:700 .5625rem/1 var(--mono);letter-spacing:.14em;
  padding:.32em .62em .36em;border-radius:2px;white-space:nowrap;vertical-align:middle}
.c-comp{background:var(--red);color:#fff}
.c-ext{background:var(--brass);color:#1D1405}

/* Sections auto-number inside .stage — a ghost numeral above the heading
   replaces the old card-and-border system as the structural device. Purely
   decorative counter: harmless where .stage isn't present. */
.stage{counter-reset:beat}
.stage section.block{counter-increment:beat}
.stage section.block h2.sec::before{content:counter(beat,decimal-leading-zero);display:block;
  font:900 3.2rem/1 var(--disp);color:var(--hair);letter-spacing:-.02em;margin-bottom:-1rem}
section.block{margin:2.8rem 0}
h2.sec{font:900 1.3rem var(--disp);text-transform:uppercase;letter-spacing:-.005em;margin-bottom:1.1rem}

ul.covers{list-style:none}
ul.covers li{position:relative;padding-left:1.3rem;margin-bottom:1rem;line-height:1.6}
ul.covers li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;background:var(--red);border-radius:50%}

.sources{background:var(--card);border:1px solid var(--hair);border-radius:8px;padding:1.3rem 1.4rem}
.sources ol{padding-left:1.2rem}
.sources li{margin-bottom:1rem;line-height:1.6;font-size:.9375rem}
.sources li:last-child{margin-bottom:0}

.parent-link{display:block;background:var(--manila);border:1px solid var(--hair2);border-radius:8px;
  padding:1rem 1.2rem;text-decoration:none;color:var(--ink);margin-bottom:1.8rem}
.parent-link .pl-eyebrow{font:700 .65rem var(--mono);letter-spacing:.12em;color:var(--inkdim);display:block;margin-bottom:.25rem}
.parent-link .pl-title{font:900 1.05rem var(--disp);text-transform:uppercase}

.cta-row{display:flex;flex-wrap:wrap;gap:.9rem;margin:2rem 0}
.btn{display:inline-flex;align-items:center;gap:.5rem;font:700 .8rem var(--mono);letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;padding:.75em 1.3em;border-radius:4px}
.btn-primary{background:var(--red);color:#fff}
.btn-secondary{border:1.5px solid var(--ink);color:var(--ink)}
.grp{margin:2rem 0}
.grp .sec a{text-decoration:none;color:var(--ink)}
.grp .sec a:hover{color:var(--red)}
ul.covers li a{color:var(--ink);text-decoration:none;border-bottom:1px dashed var(--hair2)}
ul.covers li a:hover{color:var(--red);border-color:var(--red)}

footer.site{margin-top:3rem;padding:2.2rem 0 2.8rem;border-top:1px solid var(--hair);text-align:center}
footer.site .wrap{max-width:600px}
footer.site .tagline{font:700 .5625rem var(--mono);letter-spacing:.2em;color:var(--inkdim);margin-top:.5rem}
footer.site .follow{font:700 .625rem var(--mono);letter-spacing:.1em;margin-top:.9rem}
footer.site .follow a{color:var(--ink);text-decoration:none;border-bottom:1px solid currentColor}
footer.site .follow a:hover{color:var(--red)}
footer.site .legal{font:400 .5625rem var(--mono);letter-spacing:.16em;color:var(--inkdim);margin-top:1rem;max-width:520px;margin-left:auto;margin-right:auto}

/* ===== Content-template additions (see website/CONTENT_TEMPLATE.md, 2026-08-29) =====
   Direction D drops the boxed-chip-plus-card-border claim unit in favor of a
   plain colored mono label (.k-row) — consistent with "no cards, no boxes"
   everywhere except the hero/mid-article images and the pullquote band. The
   WORD is always printed (TEXT / COMPUTED / EXTERNAL / A READING / DISPUTED),
   so the honesty class never depends on color alone; the dashed underline is
   the second, non-color signal for the two hedged classes. .chip/.c-text etc
   stay in place unchanged — Q&A answers still use the small filled pill
   inline within a sentence, which reads fine at that size and doesn't carry
   this file's "no boxes" rule (it's inline typography, not a card). */
.c-text{background:var(--ink);color:var(--paper)}
.c-read{border:1.5px dashed var(--slate);color:var(--slate);background:transparent;padding:.2em .54em .26em}
.c-disp{border:1.5px dashed var(--red);color:var(--red);background:transparent;padding:.2em .54em .26em}

/* Body prose — short paragraphs (2–3 sentences max) with generous gaps. */
.lede{font-size:1.2rem;line-height:1.6;margin:0 0 1.1rem}
.prose p{margin:0 0 1.1rem}
.prose p:last-child{margin-bottom:0}

hr.beat{border:0;width:.5rem;height:.5rem;background:var(--red);margin:1.4rem 0}

/* Claim unit — one badged claim per block. No card, no left border: the
   mono label IS the badge. is-comp/is-ext/is-read/is-disp color it; is-read
   and is-disp additionally get a dashed underline (the "unsettled" signal
   doesn't live in color alone). */
.k-row{display:flex;flex-wrap:wrap;gap:.5rem;align-items:baseline;margin:0 0 .6rem;
  font:700 .68rem var(--mono);letter-spacing:.08em}
.k-row .k-badge{color:var(--ink)}
.k-row .k-ref{color:var(--inkdim)}
.k-row.is-comp .k-badge{color:var(--red)}
.k-row.is-ext .k-badge{color:var(--brass)}
.k-row.is-read .k-badge{color:var(--slate);border-bottom:1.5px dashed var(--slate);padding-bottom:.05em}
.k-row.is-disp .k-badge{color:var(--red);border-bottom:1.5px dashed var(--red);padding-bottom:.05em}
.k-block{margin:1.5rem 0}
.k-block p{margin:0 0 1rem}
.k-block p:last-child{margin-bottom:0}

/* Verse block — verbatim KJV only; nothing paraphrased ever wears this style.
   NEVER italic. Upright serif (--serif) is the one place Georgia survives —
   quoted scripture reads as "from the old book," our own words stay sans. */
blockquote.verse{background:var(--card);border-left:4px solid var(--ink);
  padding:1.05rem 1.25rem;margin:1.25rem 0;
  font:400 1.1875rem/1.75 var(--serif);font-style:normal}
blockquote.verse cite{display:block;margin-top:.65rem;font:700 .7rem var(--mono);
  letter-spacing:.12em;color:var(--inkdim);font-style:normal}

/* Pull-quote — full-bleed inverted band, at most one per page. Direct child
   of .stage/.wrap only (uses the same breakout math as .bleed). */
.pullquote{width:calc(100% + 2.5rem);margin:2.6rem -1.25rem;background:var(--ink);color:var(--paper);padding:2.2rem 1.25rem}
.pullquote .pq-in{max-width:600px;margin:0 auto;font:900 clamp(1.4rem,3.8vw,2rem)/1.28 var(--disp);
  text-transform:uppercase;letter-spacing:-.01em}
.pullquote .hot{color:var(--red);background:none}

/* Caveat — the honesty fine print. A quiet rule-marked note, not a card, so
   it reads as part of the page's editorial voice rather than a warning box. */
.caveat{display:block;margin:1.1rem 0;padding:.1rem 0 .1rem 1rem;border-left:2px solid var(--hair2);
  font-size:.9375rem;line-height:1.6;color:var(--inkdim)}
.caveat .cv-lbl{font:700 .65rem var(--mono);letter-spacing:.14em;color:var(--slate);display:block;margin-bottom:.3rem}

/* Side-by-side contrast — two exact KJV words or two numbers, never a paraphrase */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair2);
  border:1px solid var(--hair2);border-radius:6px;overflow:hidden;margin:1.2rem 0}
.contrast>div{background:var(--card);padding:.95rem 1rem;text-align:center}
.contrast .big{font:900 clamp(1.1rem,3vw,1.45rem)/1.15 var(--disp);display:block}
.contrast .lbl{font:700 .6rem var(--mono);letter-spacing:.12em;color:var(--inkdim);display:block;margin-top:.4rem}

/* Q&A — one question per h3.q (sentence case, unlike h2.sec), direct answer
   in the first sentence of .a; maps 1:1 onto FAQPage schema later */
.qa{margin:2.1rem 0}
.qa h3.q{font:900 1.05rem/1.35 var(--disp);letter-spacing:-.005em;margin-bottom:.6rem}
.qa .a{margin:0}
.qa .a .chip{margin-right:.45rem}

/* ============ WATCH MODAL (2026-08-30) ============
   Shared by every page via assets/watch-modal.js - see that file for the
   trigger logic (only real per-video YouTube links open this; the bare
   channel link, used everywhere until an episode actually posts, is left
   to navigate normally). */
body.yt-modal-open{overflow:hidden}
.yt-modal-backdrop{position:fixed;inset:0;z-index:200;background:rgba(20,16,11,.86);
  display:flex;align-items:center;justify-content:center;padding:1.1rem;
  animation:yt-fade .18s ease}
@keyframes yt-fade{from{opacity:0}to{opacity:1}}
.yt-modal{position:relative;width:100%;max-width:56rem;background:var(--ink);
  border:1px solid rgba(245,239,228,.18);border-radius:4px;
  box-shadow:0 20px 60px rgba(0,0,0,.5);animation:yt-pop .22s ease}
@keyframes yt-pop{from{transform:scale(.97);opacity:0}to{transform:scale(1);opacity:1}}
.yt-modal-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000}
.yt-modal-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-modal-close{position:absolute;top:-2.6rem;right:0;width:2.2rem;height:2.2rem;
  border:1px solid rgba(245,239,228,.35);border-radius:50%;background:transparent;
  color:var(--paper);font:400 1.35rem/1 var(--body);cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0}
.yt-modal-close:hover,.yt-modal-close:focus-visible{background:var(--red);border-color:var(--red);color:#fff}
.yt-modal-alt{display:flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.9rem 1rem;font:700 .75rem var(--mono);letter-spacing:.14em;
  color:var(--paper);text-decoration:none;border-top:1px solid rgba(245,239,228,.14)}
.yt-modal-alt:hover,.yt-modal-alt:focus-visible{color:var(--red)}
@media (max-width:520px){
  .yt-modal-close{top:-2.4rem;width:2rem;height:2rem}
}