/* ========================================
   EDITORIAL HEALTH JOURNAL — Design System
   "A beloved hardcover, made for the web"
   ======================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Newsreader:ital,opsz,wght@0,6..72,400..700;1,6..72,400..700&family=Inter:wght@500;600;700;800&display=swap');

/* ========================================
   COLOR SYSTEM
   ======================================== */
:root {
  /* Paper & Ink */
  --paper: #F4EAD5;
  --paper-light: #FBF6EB;
  --paper-dark: #EBDDB7;
  --ink: #2A1F12;
  --ink-soft: #5A4A36;
  --ink-light: #8A7A66;

  /* Accents */
  --terracotta: #C24E2C;
  --terracotta-deep: #8C3618;
  --sage: #6B8C5A;
  --sage-deep: #4A6B3E;
  --teal: #1F4842;
  --gold: #C68F3D;
  --gold-soft: #E5BC78;

  /* Functional */
  --rule: rgba(42, 31, 18, 0.18);
  --rule-soft: rgba(42, 31, 18, 0.08);
  --shadow-paper: 0 1px 3px rgba(42, 31, 18, 0.08), 0 12px 32px rgba(42, 31, 18, 0.06);
  --shadow-photo: 0 2px 4px rgba(42, 31, 18, 0.12), 0 20px 50px rgba(42, 31, 18, 0.18);

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Newsreader', Georgia, serif;
  --font-mono: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body.section-emergency {
  --paper: #F2E5E0;
  --paper-light: #F9EFEB;
  --paper-dark: #E8D2C8;
  --terracotta: #B83A1F;
}

body.section-nutrition {
  --paper: #F1E5C8;
  --paper-light: #F9F0DA;
  --paper-dark: #E5D2A6;
}

/* ========================================
   FOUNDATION
   ======================================== */
* { box-sizing: border-box; }

body.editorial {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 450;
  line-height: 1.6;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
}

.editorial ::selection {
  background: var(--terracotta);
  color: var(--paper-light);
}

/* ========================================
   PAPER TEXTURE — subtle grain
   ======================================== */
.editorial::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.12 0 0 0 0 0.07 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* ========================================
   EDITORIAL HEADER (top bar)
   ======================================== */
/* Sticky header stack — masthead + folio glued together */
.ed-header-stack {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--ink);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  contain: layout style;
  will-change: transform;
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  /* Establish OWN font context — independent of body */
  font-size: 16px;
  line-height: 1.4;
  font-family: var(--font-display);
}
.ed-header-stack * {
  line-height: inherit;
}

/* Hide content-area breadcrumbs on sub-pages — we already have ed-folio breadcrumbs */
.section-nutrition .article-hero .breadcrumb,
.section-emergency .article-hero .breadcrumb {
  display: none;
}

/* Reset body */
body { margin: 0; }
body.editorial > .ed-header-stack { margin-top: 0; }

.ed-masthead {
  position: relative;
  z-index: auto;
  background: var(--ink);
  color: var(--paper);
  padding: 8px 0;
  border-bottom: none;
  box-shadow: none;
}
.ed-masthead-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ed-logo {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  color: var(--paper);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ed-logo img { width: 24px; height: 24px; }
.ed-logo em { color: var(--gold-soft); font-style: italic; font-weight: 400; }
.ed-nav {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-nav a {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--paper);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s, color 0.2s;
}
.ed-nav a:hover, .ed-nav a.active {
  color: var(--gold-soft);
  border-bottom-color: var(--gold);
}
.ed-nav .nav-disabled {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(244, 234, 213, 0.3);
  padding: 6px 0;
  cursor: not-allowed;
  user-select: none;
}
@media (max-width: 800px) {
  .ed-masthead-inner { flex-direction: column; gap: 12px; padding: 0 20px; }
  .ed-nav { flex-wrap: wrap; gap: 12px 18px; justify-content: center; }
}

/* ========================================
   FOLIO BAR — running head, page number, date
   ======================================== */
.ed-folio {
  position: relative;
  z-index: auto;
  border-top: 1px solid var(--gold);
  border-bottom: none;
  padding: 6px 0;
  background: var(--paper-light);
  box-shadow: none;
  margin-top: 0;
}
.ed-folio-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
}
.ed-folio-crumbs a {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.ed-folio-crumbs a:hover { border-bottom-color: var(--terracotta); }
.ed-folio-sep { margin: 0 10px; color: var(--ink-light); }
.ed-folio-issue { font-weight: 700; color: var(--ink); }
@media (max-width: 700px) {
  .ed-folio-inner { flex-direction: column; gap: 4px; padding: 0 20px; text-align: center; }
}

/* ========================================
   CHAPTER OPENER (hero)
   ======================================== */
.chapter-opener {
  position: relative;
  z-index: 2;
  padding: 64px 0 80px;
  border-bottom: 1px solid var(--rule);
  overflow: hidden;
}
.chapter-opener-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .chapter-opener-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
}

/* Left side */
.chapter-meta-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 32px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  font-weight: 600;
}
.chapter-meta-bar::before {
  content: '';
  width: 48px; height: 2px;
  background: var(--terracotta);
}

.chapter-number {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(64px, 10vw, 120px);
  line-height: 0.9;
  color: var(--terracotta);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  font-feature-settings: "lnum" off, "onum" on;
}
.chapter-number sup {
  font-size: 0.4em;
  vertical-align: super;
  margin-right: 4px;
  font-weight: 400;
}

.chapter-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(48px, 7vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 0 0 24px;
  font-feature-settings: "ss01", "ss02";
}
.chapter-title em {
  font-style: italic;
  font-weight: 600;
  color: var(--terracotta);
  font-feature-settings: "ss01";
}

.chapter-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ink-soft);
  margin: 0 0 32px;
  max-width: 540px;
}

.chapter-lede {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 520px;
  margin: 0 0 36px;
  border-left: 3px solid var(--gold);
  padding-left: 20px;
}
.chapter-lede strong { font-weight: 600; color: var(--terracotta); }

.byline {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-light);
}
.byline-line { width: 32px; height: 1px; background: var(--rule); }

/* Right side — photo */
.chapter-photo {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--paper-light);
  padding: 16px 16px 56px;
  box-shadow: var(--shadow-photo);
  transform: rotate(2deg);
  transition: transform 0.4s ease;
}
.chapter-photo:hover { transform: rotate(0deg) scale(1.02); }
.chapter-photo::before {
  content: '';
  position: absolute;
  top: 12px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 100px; height: 22px;
  background: rgba(198, 143, 61, 0.4);
  border: 1px solid rgba(198, 143, 61, 0.5);
}
.chapter-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.08) saturate(0.95);
}
.chapter-photo-caption {
  position: absolute;
  bottom: 18px; left: 16px; right: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-soft);
  text-align: center;
}

/* Anatomical diagram (alternative to chapter-photo for editorial illustrations) */
.chapter-diagram {
  position: relative;
  aspect-ratio: 4/5;
  background: var(--paper-light);
  border: 1px solid var(--rule);
  padding: 0;
  box-shadow: var(--shadow-paper);
  overflow: hidden;
}
.chapter-diagram::before {
  content: '';
  position: absolute;
  top: 8px; left: 8px; right: 8px; bottom: 8px;
  border: 1px solid var(--rule);
  pointer-events: none;
  z-index: 2;
}
.chapter-diagram svg, .chapter-diagram img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.chapter-diagram-frame-tab {
  position: absolute;
  top: -1px; left: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--gold-soft);
  padding: 6px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  z-index: 3;
}

/* Decorative chapter ornament */
.chapter-opener::after {
  content: '⊕';
  position: absolute;
  bottom: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 28px;
  color: var(--terracotta);
  background: var(--paper);
  padding: 0 16px;
  z-index: 3;
}

/* ========================================
   DISCLAIMER NOTICE — paper note style
   ======================================== */
.ed-notice {
  background: var(--paper-light);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--gold);
  padding: 20px 28px;
  margin: 48px auto;
  max-width: 760px;
  position: relative;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
}
.ed-notice::before {
  content: 'NOTICE';
  position: absolute;
  top: -10px;
  left: 24px;
  background: var(--paper);
  padding: 0 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--gold);
}
.ed-notice strong { color: var(--ink); }
.ed-notice.notice-emergency {
  border-left-color: var(--terracotta-deep);
  background: rgba(184, 58, 31, 0.04);
}
.ed-notice.notice-emergency::before {
  content: 'WARNING';
  color: var(--terracotta-deep);
}

/* ========================================
   FACTS SHEET — editorial stats
   ======================================== */
.facts-sheet {
  position: relative;
  z-index: 2;
  background: var(--ink);
  color: var(--paper);
  padding: 56px 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.facts-sheet-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
}
.facts-sheet-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold-soft);
  margin: 0 0 36px;
  text-align: center;
}
.facts-sheet-label::before, .facts-sheet-label::after {
  content: '—';
  margin: 0 14px;
  color: var(--ink-light);
}
.facts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(245, 234, 213, 0.2);
}
@media (max-width: 700px) {
  .facts-grid { grid-template-columns: 1fr; }
}
.fact {
  padding: 32px 28px;
  border-right: 1px solid rgba(245, 234, 213, 0.15);
  border-bottom: 1px solid rgba(245, 234, 213, 0.15);
  text-align: center;
  position: relative;
}
.fact:last-child { border-right: none; }
@media (max-width: 700px) {
  .fact { border-right: none; }
  .fact:last-child { border-bottom: none; }
}
.fact-figure {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 56px;
  line-height: 1;
  color: var(--gold-soft);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  font-feature-settings: "lnum";
}
.fact-figure em {
  font-style: italic;
  font-weight: 300;
  color: var(--paper);
}
.fact-label {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  color: var(--paper-dark);
  max-width: 240px;
  margin: 0 auto;
}
.fact-source {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink-light);
  font-style: italic;
}

/* ========================================
   ARTICLE BODY — editorial typography
   ======================================== */
.article-spread {
  position: relative;
  z-index: 2;
  padding: 80px 0 40px;
}
.article-spread-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 64px;
}
@media (max-width: 900px) {
  .article-spread-inner { grid-template-columns: 1fr; gap: 0; padding: 0 24px; }
}

/* Sidebar (left margin) — sticky TOC */
.article-aside {
  position: sticky;
  top: 110px;  /* masthead (~50px) + folio (~36px) + breathing room */
  align-self: start;
  color: var(--ink);
}
@media (max-width: 900px) { .article-aside { display: none; } }
.article-aside-label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
  color: var(--terracotta);
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
}
.article-aside-toc {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-aside-toc a {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  line-height: 1.35;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
}
.article-aside-toc a:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}
.article-aside-toc a.active {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
  font-weight: 700;
}
.article-aside-toc a.active .num {
  color: var(--terracotta-deep);
}
.article-aside-toc .num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--terracotta);
  font-weight: 700;
  flex-shrink: 0;
  min-width: 28px;
  padding-top: 2px;
}

/* Main column */
.article-main {
  max-width: 720px;
}

/* Lede with drop cap */
.article-main > .lede:first-of-type {
  font-family: var(--font-body);
  font-size: 22px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 40px;
}
.article-main > .lede:first-of-type::first-letter,
.dropcap-para::first-letter {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 5em;
  float: left;
  line-height: 0.85;
  margin: 4px 12px -4px 0;
  color: var(--terracotta);
  font-feature-settings: "ss01";
}

/* Section headings */
.section-heading {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 20px;
  align-items: baseline;
  margin: 64px 0 24px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
}
.section-heading-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 28px;
  color: var(--terracotta);
  line-height: 1;
}
.section-heading-text {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3.5vw, 38px);
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin: 0;
}
.section-heading-text em { font-style: italic; font-weight: 600; color: var(--terracotta); }

/* Sub-headings */
.article-main h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
  color: var(--ink);
  margin: 36px 0 12px;
  letter-spacing: -0.01em;
}

/* Body paragraphs */
.article-main p {
  margin: 0 0 18px;
  color: var(--ink);
}
.article-main p strong { font-weight: 600; }
.article-main em { font-style: italic; }

/* Lists */
.article-main ul, .article-main ol {
  margin: 0 0 24px;
  padding-left: 24px;
}
.article-main li {
  margin-bottom: 10px;
  line-height: 1.6;
}
.article-main ul li::marker { color: var(--terracotta); }
.article-main ol li::marker {
  color: var(--terracotta);
  font-family: var(--font-mono);
  font-weight: 600;
}

/* Pull quote — full bleed editorial */
.pull-quote {
  margin: 56px -32px;
  padding: 56px 64px 48px;
  background: var(--paper-light);
  position: relative;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
@media (max-width: 700px) { .pull-quote { margin: 40px 0; padding: 40px 32px; } }
.pull-quote::before {
  content: '\201C';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 80px;
  line-height: 1;
  color: var(--terracotta);
  background: var(--paper);
  padding: 0 18px;
}
.pull-quote-text {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.35;
  color: var(--ink);
  margin: 0 0 20px;
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}
.pull-quote-attribution {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-light);
}
.pull-quote-attribution::before { content: '— '; }

/* Asterism divider */
.asterism {
  text-align: center;
  margin: 56px 0;
  letter-spacing: 1.5em;
  color: var(--terracotta);
  font-size: 12px;
  text-indent: 1.5em;
}
.asterism::before { content: '✻ ✻ ✻'; }

/* Margin note (info box editorial) */
.margin-note {
  margin: 32px 0;
  padding: 24px 28px;
  background: var(--paper-light);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--terracotta);
  position: relative;
}
.margin-note-label {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  margin: 0 0 10px;
}
.margin-note p:last-child { margin-bottom: 0; }
.margin-note.warning {
  border-left-color: var(--gold);
  background: rgba(198, 143, 61, 0.06);
}
.margin-note.warning .margin-note-label { color: var(--gold); }
.margin-note.tip {
  border-left-color: var(--sage);
  background: rgba(107, 140, 90, 0.06);
}
.margin-note.tip .margin-note-label { color: var(--sage-deep); }
.margin-note.alert {
  border-left-color: var(--terracotta-deep);
  background: rgba(184, 58, 31, 0.06);
}
.margin-note.alert .margin-note-label { color: var(--terracotta-deep); }

/* Drug warning — darker treatment */
.drug-warning-ed {
  margin: 32px 0;
  padding: 28px 32px;
  background: var(--ink);
  color: var(--paper);
  border-left: 6px solid var(--terracotta-deep);
  position: relative;
}
.drug-warning-ed::before {
  content: '⚠';
  position: absolute;
  top: -14px; left: 28px;
  background: var(--paper);
  color: var(--terracotta-deep);
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  border: 2px solid var(--terracotta-deep);
}
.drug-warning-ed-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--gold-soft);
  margin: 0 0 10px;
}
.drug-warning-ed p { margin: 0; line-height: 1.55; }

/* Ed-tables */
.ed-table-wrap {
  margin: 32px 0;
  border: 1px solid var(--rule);
  background: var(--paper-light);
}
.ed-table {
  width: 100%;
  border-collapse: collapse;
}
.ed-table thead {
  background: var(--ink);
  color: var(--paper);
}
.ed-table th {
  padding: 14px 18px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-soft);
}
.ed-table td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-soft);
  font-size: 15px;
  vertical-align: top;
}
.ed-table tr:last-child td { border-bottom: none; }
.ed-table strong { color: var(--ink); }

/* Spike callout — owner voice */
.spike-voice {
  margin: 48px 0;
  padding: 32px 36px;
  background: var(--paper-light);
  border: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 28px;
  align-items: start;
  position: relative;
}
@media (max-width: 600px) {
  .spike-voice { grid-template-columns: 1fr; text-align: center; padding: 28px; gap: 18px; }
}
.spike-voice::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--sage));
}
.spike-voice-photo {
  width: 80px; height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid var(--paper);
  box-shadow: 0 4px 14px rgba(42, 31, 18, 0.15);
  margin: 0 auto;
}
.spike-voice-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.1) saturate(0.92);
}
.spike-voice-byline {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  margin-bottom: 10px;
}
.spike-voice p {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}

/* Footnote sources */
.ed-sources {
  margin: 80px 0 0;
  padding: 56px 0 64px;
  border-top: 3px double var(--rule);
}
.ed-sources-header {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 32px;
  text-align: center;
}
.ed-sources-header::before, .ed-sources-header::after {
  content: '§';
  margin: 0 14px;
  color: var(--ink-light);
  font-style: italic;
  font-family: var(--font-display);
}
.ed-sources-list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: src;
  max-width: 720px;
  margin: 0 auto;
}
.ed-sources-list li {
  counter-increment: src;
  margin-bottom: 14px;
  padding-left: 36px;
  position: relative;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  font-feature-settings: "onum";
}
.ed-sources-list li::before {
  content: counter(src);
  position: absolute;
  left: 0; top: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--terracotta);
  background: var(--paper-light);
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
}
.ed-sources-list a {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
.ed-sources-list a:hover { border-bottom-color: var(--terracotta); }

/* Bottom disclaimer — colophon style */
.ed-colophon {
  margin: 64px 0 0;
  padding: 48px 0;
  background: var(--ink);
  color: var(--paper);
  position: relative;
  z-index: 2;
}
.ed-colophon-inner {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 32px;
  text-align: center;
}
.ed-colophon-mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 32px;
  color: var(--gold-soft);
  margin: 0 0 20px;
}
.ed-colophon-mark::before, .ed-colophon-mark::after {
  content: '\2766';
  margin: 0 16px;
  font-style: normal;
}
.ed-colophon h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold-soft);
  margin: 0 0 16px;
}
.ed-colophon p {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--paper-dark);
  margin: 0 0 12px;
}
.ed-colophon strong { color: var(--paper); }
.ed-colophon ul {
  list-style: none;
  margin: 16px 0;
  padding: 0;
  text-align: left;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.ed-colophon li {
  padding: 8px 0 8px 24px;
  position: relative;
  font-size: 14px;
  color: var(--paper-dark);
  line-height: 1.5;
}
.ed-colophon li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--gold);
}

/* Related — further reading */
.further-reading {
  position: relative;
  z-index: 2;
  padding: 64px 0 96px;
  background: var(--paper-dark);
  border-top: 1px solid var(--rule);
}
.further-reading-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: 0 32px;
}
.further-reading-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--terracotta);
  margin: 0 0 12px;
  text-align: center;
}
.further-reading-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-style: italic;
  font-size: 36px;
  color: var(--ink);
  text-align: center;
  margin: 0 0 40px;
  letter-spacing: -0.01em;
}
.further-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 800px) { .further-grid { grid-template-columns: 1fr; } }
.further-card {
  display: block;
  padding: 28px 28px 32px;
  background: var(--paper-light);
  border: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.further-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--terracotta);
  transform: translateY(-3px);
  transition: transform 0.3s;
}
.further-card:hover {
  background: var(--paper);
  transform: translateY(-4px);
  box-shadow: var(--shadow-paper);
}
.further-card:hover::before { transform: translateY(0); }
.further-card-num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--terracotta);
  margin-bottom: 12px;
}
.further-card-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
.further-card-desc {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 16px;
}
.further-card-link {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--terracotta);
}
.further-card-link::after { content: ' \2192'; transition: margin 0.2s; }
.further-card:hover .further-card-link::after { margin-left: 4px; }

/* Footer */
.ed-footer {
  background: var(--ink);
  color: var(--paper-dark);
  padding: 56px 0 28px;
  position: relative;
  z-index: 2;
}
.ed-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}
.ed-footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 56px;
  padding-bottom: 36px;
  border-bottom: 1px solid rgba(245, 234, 213, 0.15);
}
@media (max-width: 800px) {
  .ed-footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
.ed-footer-brand h4 {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  color: var(--paper);
  margin: 0 0 12px;
}
.ed-footer-brand p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--paper-dark);
  max-width: 380px;
  margin: 0;
}
.ed-footer-col h5 {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--gold-soft);
  margin: 0 0 18px;
}
.ed-footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ed-footer-col li { margin-bottom: 10px; }
.ed-footer-col a {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--paper-dark);
  text-decoration: none;
  transition: color 0.2s;
}
.ed-footer-col a:hover { color: var(--gold-soft); }
.ed-footer-bottom {
  padding-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-light);
  text-align: center;
}

/* Print fix */
@media print {
  .editorial::before { display: none; }
}