/* ═══════════════════════════════════════════════════════════════════
   IN-KluSo Article CSS — v1.0 — April 2026
   Single external stylesheet for all 152 articles.
   Replaces all inline <style> blocks across flow/thrive/axis/ground/core/pulse.

   Requires: inkluso-design-system.css (loads :root variables)
   Body must carry: data-division="flow|thrive|axis|ground|core|pulse"
   ═══════════════════════════════════════════════════════════════════ */


/* ─── Per-Division Accent Overrides ─────────────────────────────── */
/* --div-color is the single accent variable used throughout article  */

/* Colors from INKLUSO-ESTRUCTURA-EDITORIAL-ARTICULOS.md */
body[data-division="flow"]   { --div-color: #D54D9B; }
body[data-division="thrive"] { --div-color: #F37D24; }
body[data-division="axis"]   { --div-color: #FCB912; }
body[data-division="ground"] { --div-color: #AFD274; }
body[data-division="pulse"]  { --div-color: #4DAACB; }
body[data-division="core"]   { --div-color: #4D4D4D; }

/* Fallback if data-division is absent */
body { --div-color: var(--orange); }


/* ─── Base Article Body ──────────────────────────────────────────── */

body {
  font-family: 'Lora', 'Inter', sans-serif;
  background: var(--black);
  color: var(--cream);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ─── Reading Progress Bar ───────────────────────────────────────── */

#reading-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 3px;
  background: var(--div-color);
  z-index: 9999;
  transition: width 0.1s ease;
}


/* ─── Navigation — Primary Bar ───────────────────────────────────── */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(17, 17, 17, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
}

.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 52px;
  gap: 12px;
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.nav-logo svg,
.nav-logo .ink-logo {
  height: 18px;
  width: auto;
  display: block;
}

.nav-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.nav-back {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--dim);
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.15s;
  white-space: nowrap;
}

.nav-back:hover { color: var(--cream); }

/* Nav gamification widgets */
.nav-klus {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--orange-logo);
  cursor: pointer;
}

.nav-klus .klu-icon {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--orange-logo);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  font-weight: 800;
}

.nav-streak {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--orange-logo);
  cursor: pointer;
}

.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  cursor: pointer;
}

/* Nav links — horizontal bar variant (older article structure) */
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-links::-webkit-scrollbar { display: none; }

.nav-links li { white-space: nowrap; }

.nav-links li a {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 52px;
  text-decoration: none;
  color: var(--dim);
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: color 0.15s;
}

.nav-links li a:hover { color: var(--cream); }


/* ─── Section Bar — Division Navigation Strip ────────────────────── */

.section-bar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: 0 28px;
  position: sticky;
  top: 52px;
  z-index: 99;
}

.section-bar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 40px;
  gap: 0;
}

.sb-sections {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.sb-sections::-webkit-scrollbar { display: none; }

.sb-item {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 14px;
  height: 40px;
  cursor: pointer;
  transition: all 0.15s;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  text-decoration: none;
  color: inherit;
}

.sb-item:hover { background: var(--surface2); }
.sb-item.active { border-bottom-color: var(--cream); }

.sb-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sb-name {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.15s;
}

.sb-item:hover .sb-name,
.sb-item.active .sb-name { color: var(--cream); }

.sb-divider {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
  flex-shrink: 0;
}

.sb-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.sb-map-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  height: 40px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.sb-map-link:hover { background: var(--surface2); }

.sb-map-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  transition: color 0.15s;
}

.sb-map-link:hover .sb-map-label { color: var(--cream); }

.sb-auth-btn {
  font-family: 'Inter', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.15s;
  border: 1px solid var(--border2);
  background: transparent;
  color: var(--dim);
  text-decoration: none;
}

.sb-auth-btn:hover { color: var(--cream); border-color: #444; }

.sb-auth-btn.premium {
  background: var(--orange-logo);
  color: var(--black);
  border-color: var(--orange-logo);
  font-weight: 800;
}


/* ─── Division Stripe — Thin Color Bar Below Nav ─────────────────── */

.division-stripe {
  height: 4px;
  background: var(--div-color);
}


/* ─── Hidden Elements ────────────────────────────────────────────── */
/* Suppress duplicate/legacy structures in migrated articles          */

.hero-thumb-hidden,
.article-hero,
.meta-line { display: none !important; }


/* ─── Hero — Full-Bleed Cinematic Image ──────────────────────────── */

.hero-wrapper {
  display: block !important;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 62vh;
  min-height: 340px;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

.hero-wrapper img,
.hero-wrapper .hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(0.9) contrast(1.06) brightness(0.88);
}

/* Bottom gradient fade — overlays photo into page background.
   Uses var(--black) so the fade matches the body bg in both themes. */
.hero-wrapper::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(transparent, var(--black));
  pointer-events: none;
}

/* Alternate hero: div.hero-image (some articles use a div, not img wrapper) */
div.hero-image {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: 62vh;
  min-height: 340px;
  max-height: 600px;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0 !important;
}

div.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(0.9) contrast(1.06) brightness(0.88);
}

/* Explicit gradient overlay div (used in some articles) */
.hero-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52%;
  background: linear-gradient(transparent, var(--black));
  pointer-events: none;
}

/* Photo credit line below hero */
.hero-credit,
.photo-credit {
  text-align: right;
  font-size: 0.68rem;
  color: var(--dim);
  font-style: italic;
  letter-spacing: 0.02em;
  margin: 0.4rem 0 0;
  padding-right: 1rem;
  font-family: 'Inter', sans-serif;
}


/* ─── Article Container — Narrow Reading Column ───────────────────── */

.article-container {
  position: relative;
  z-index: 1;
  max-width: 740px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 7rem;
}


/* ─── Signal Header — Above-the-Fold Article Header ─────────────── */

.signal-header {
  margin-bottom: 3rem;
  padding-top: 0.5rem;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* Meta row: division tag + SCI badge + territory + signal ID */
.signal-meta-row,
.signal-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}

/* Division badge — solid background with division color */
.division-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  background: var(--div-color);
  color: #fff;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* SCI badge — outlined, color matches SCI level */
.sci-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  background: transparent;
  border: 1.5px solid currentColor;
}

.sci-high   { color: var(--high);     border-color: var(--high); }
.sci-moderate { color: var(--moderate); border-color: var(--moderate); }
.sci-low    { color: var(--low);      border-color: var(--low); }

/* Signal ID — faint mono identifier */
.signal-id-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: var(--dim);
  font-weight: 500;
}

/* Territory label — geographic/topical scope */
.territory-tag {
  font-size: 0.75rem;
  color: var(--dim);
  font-weight: 500;
  font-family: 'Inter', sans-serif;
}

/* Article headline */
h1.signal-title,
.signal-header h1 {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2.1rem, 5.5vw, 3.25rem);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--cream);
  margin-bottom: 1.1rem;
  margin-top: 0.25rem;
}

/* Deck / subtitle — Lora italic, slightly muted */
.signal-subtitle,
.deck {
  font-family: 'Lora', serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  color: var(--cream);
  opacity: 0.82;
  line-height: 1.65;
  margin-bottom: 1.75rem;
  max-width: 640px;
}

/* Byline — author + date */
.byline,
.byline-text,
.publish-date {
  font-family: 'Inter', sans-serif;
  font-size: 0.82rem;
  color: var(--dim);
  line-height: 1.6;
}

.byline strong { color: var(--cream); font-weight: 600; }


/* ─── Signal Body — Editorial Reading Column ─────────────────────── */

.signal-body,
.evidence-section,
.signal-footer {
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}


/* ─── Audio Player (standalone articles) ───────────────────────────
   Mirrors the SPA's #article-audio styles so the play/pause block is
   readable + properly contained inside the article column. */

.article-audio {
  max-width: 720px;
  margin: 24px auto;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--orange-logo);
  border-radius: 3px;
}
.article-audio .audio-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 10px;
}
.article-audio .audio-controls {
  display: flex;
  align-items: center;
  gap: 12px;
}
.article-audio .audio-play-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border2);
  background: var(--surface2);
  color: var(--cream);
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.article-audio .audio-play-btn:hover,
.article-audio .audio-play-btn.playing {
  background: var(--orange-logo);
  border-color: var(--orange-logo);
  color: white;
}
.article-audio .audio-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--dim);
}


/* ─── Body Typography ────────────────────────────────────────────── */

/* Paragraphs: comfortable reading measure */
p,
.signal-body p,
.article-body p,
.article-container p {
  font-family: 'Lora', serif;
  font-size: 1.08rem;
  line-height: 1.85;
  letter-spacing: 0.008em;
  color: var(--cream);
  margin-bottom: 1.5rem;
  font-weight: 400;
}

/* Section headings */
h2,
.signal-body h2,
.article-body h2,
.article-container h2 {
  font-family: 'DM Serif Display', serif;
  font-size: 1.75rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin-top: 3rem;
  margin-bottom: 0.9rem;
  border-bottom: none;
  padding-bottom: 0;
}

/* Sub-section headings — uppercase Inter */
h3,
.signal-body h3 {
  font-family: 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--div-color);
  margin-top: 2rem;
  margin-bottom: 0.6rem;
}

/* Pull quotes — DM Serif italic with division-color left border */
blockquote {
  margin: 2.75rem -1rem;
  padding: 0.25rem 0 0.25rem 1.75rem;
  border-left: 4px solid var(--div-color);
  background: none;
  border-radius: 0;
  font-family: 'DM Serif Display', serif;
  font-size: 1.25rem;
  font-style: italic;
  line-height: 1.55;
  color: var(--cream);
}

blockquote cite {
  display: block;
  margin-top: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  font-style: normal;
  font-weight: 600;
  color: var(--dim);
}

/* Lists */
ul, ol {
  margin: 0 0 1.25rem 1.5rem;
  color: var(--cream);
}

li {
  font-family: 'Lora', serif;
  font-size: 1.08rem;
  line-height: 1.65;
  margin-bottom: 0.5rem;
}

/* Inline code */
code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.88em;
  background: var(--surface2);
  color: var(--cream);
  padding: 0.15em 0.4em;
  border-radius: 3px;
  letter-spacing: 0.02em;
}

/* Code blocks */
pre {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.85rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--div-color);
  color: var(--cream);
  padding: 1.25rem 1.5rem;
  border-radius: 0 6px 6px 0;
  overflow-x: auto;
  margin: 1.5rem 0 2rem;
  line-height: 1.65;
}

pre code {
  background: none;
  padding: 0;
  font-size: inherit;
}

/* Links */
a {
  color: var(--orange);
  text-decoration: none;
  transition: color 0.15s;
}

a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Superscripts / footnote markers */
sup { color: var(--orange); font-size: 0.7em; }
sup a { color: var(--orange); text-decoration: none; }


/* ─── Section Divider & Horizontal Rule ──────────────────────────── */

.section-divider {
  height: 1px;
  background: var(--surface2);
  margin: 3rem 0;
  border-radius: 0;
  border: none;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 3rem auto;
  width: 40%;
}


/* ─── Layer Label — Section Eyebrow ─────────────────────────────── */

.layer-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.25rem;
}

.layer-label::before {
  content: '';
  display: inline-block;
  width: 16px;
  height: 2px;
  background: var(--div-color);
  border-radius: 1px;
}


/* ─── Evidence Block — Verified/Inferred Source Panel ────────────── */

.evidence-block {
  background: rgba(255, 255, 255, 0.025);
  color: var(--cream);
  border-radius: 12px;
  padding: 2rem;
  margin: 2.5rem 0;
  border: 1px solid var(--border2);
  border-left: 3px solid var(--div-color);
}

.evidence-block h3 {
  color: var(--div-color);
  font-size: 0.85rem;
  margin-top: 0;
}

.evidence-block p {
  color: var(--cream);
  font-size: 0.9rem;
  margin-bottom: 0.75rem;
}

/* Section labels within evidence block */
.evidence-section-label,
.evidence-block .evidence-section-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
  margin-top: 1.25rem;
}

.verified-label,
.evidence-block .verified-label { color: var(--high); }
.inferred-label,
.evidence-block .inferred-label { color: var(--moderate); }

/* Evidence line items */
.evidence-item {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--cream);
}

.evidence-item::before {
  content: '▸';
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: var(--dim);
}

.evidence-item.verified::before { color: var(--high); }
.evidence-item.inferred::before { color: var(--moderate); }


/* ─── SCI Breakdown — Signal Confidence Index Table ─────────────── */

.sci-breakdown {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.75rem;
  margin: 2.5rem 0;
}

.sci-breakdown h3 {
  color: var(--cream);
  margin-bottom: 1rem;
  margin-top: 0;
  text-transform: none;
  font-size: 0.95rem;
  letter-spacing: 0;
}

/* SCI row: label + value */
.sci-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}

.sci-row:last-child { border-bottom: none; }

.sci-row.total {
  border-top: 1px solid var(--border);
  margin-top: 4px;
  padding-top: 8px;
  border-bottom: none;
  font-weight: 700;
}

/* Label variants */
.sci-row .sci-label  { font-weight: 500; color: var(--cream); flex: 1; }
.sci-row .sci-label-sm { flex: 1; color: var(--cream); font-size: 0.84rem; }

/* Score value — mono, green */
.sci-row .sci-val {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 600;
  color: var(--high);
  min-width: 3em;
  text-align: right;
}

/* SCI total row accent */
.sci-total {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--div-color);
  display: flex;
  justify-content: space-between;
  font-weight: 700;
  font-size: 1rem;
  color: var(--cream);
}

.sci-total .sci-val { font-size: 1.1rem; }


/* ─── Signal Tags ────────────────────────────────────────────────── */

.signal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2rem 0;
}

.tag-pill {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: var(--div-color);
  color: #fff;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}


/* ─── Structural Note — Green Callout ───────────────────────────── */

.structural-note {
  border-left: 3px solid var(--high);
  background: rgba(46, 155, 111, 0.08);
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
}

.structural-note .note-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--high);
  margin-bottom: 0.5rem;
}

.structural-note p {
  font-size: 0.92rem;
  margin-bottom: 0;
  color: var(--cream);
}


/* ─── Uncertainty Block — Gold Callout ───────────────────────────── */

.uncertainty-block {
  border-left: 3px solid var(--moderate);
  background: rgba(201, 168, 76, 0.08);
  padding: 1.25rem 1.5rem;
  border-radius: 0 8px 8px 0;
  margin: 2rem 0;
}

.uncertainty-block .unc-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--moderate);
  margin-bottom: 0.75rem;
}

.uncertainty-block p {
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
  color: var(--cream);
}


/* ─── Alternative Explanations ──────────────────────────────────── */

.alt-explanation {
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.alt-explanation .alt-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 0.5rem;
}

.alt-explanation p {
  font-size: 0.92rem;
  margin: 0;
  color: var(--cream);
}


/* ─── Audio Player ───────────────────────────────────────────────── */

.audio-player-wrap {
  max-width: 780px;
  margin: 0 auto 2rem;
  padding: 0;
}

.audio-player-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Native audio element */
audio {
  border-radius: 8px;
  background: var(--surface);
  width: 100%;
  display: block;
}

/* Inkluso audio player container (JS-driven) */
#inkluso-player {
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 0 24px;
}


/* ─── References Section ─────────────────────────────────────────── */

.references-section p {
  font-size: 0.85rem;
  line-height: 2;
  color: var(--dim);
}

.references-section a {
  color: var(--orange);
  text-decoration: none;
}

.references-section a:hover { text-decoration: underline; }


/* ─── Validation Box ─────────────────────────────────────────────── */

.validation-box {
  border: 1px solid var(--border2);
  border-left: 3px solid var(--div-color);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 0 8px 8px 0;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}

.validation-box .val-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--div-color);
  margin-bottom: 0.6rem;
}

.validation-box p {
  font-size: 0.9rem;
  color: var(--cream);
  margin-bottom: 0.5rem;
}


/* ─── Signal Footer ──────────────────────────────────────────────── */

.signal-footer {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
  margin-top: 3rem;
}


/* ─── Page Footer ────────────────────────────────────────────────── */

footer {
  position: relative;
  z-index: 1;
  background: var(--surface);
  color: var(--dim);
  padding: 3rem 2rem;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 0.8rem;
  line-height: 1.8;
  border-top: 1px solid var(--border);
}

footer .footer-logo {
  font-family: 'DM Serif Display', serif;
  font-size: 1.5rem;
  color: var(--cream);
  margin-bottom: 0.5rem;
}

footer a {
  color: var(--orange);
  text-decoration: none;
}

footer a:hover { text-decoration: underline; }


/* ─── Responsive — 900px (Tablet) ───────────────────────────────── */

@media (max-width: 900px) {
  .nav { padding: 0 16px; }
  .section-bar { padding: 0 16px; }
  .sb-item { padding: 0 10px; }
  .sb-name { font-size: 9px; }

  .article-container {
    padding: 3rem 1.25rem 5.5rem;
  }

  .signal-header,
  .signal-body,
  .evidence-section,
  .signal-footer {
    padding-left: 16px;
    padding-right: 16px;
  }

  h2,
  .signal-body h2 { font-size: 1.55rem; margin-top: 2.5rem; }
}


/* ─── Responsive — 600px (Mobile) ───────────────────────────────── */

@media (max-width: 600px) {
  .nav-klus,
  .nav-streak { display: none; }

  .hero-wrapper {
    height: 48vw;
    min-height: 220px;
    max-height: 360px;
  }

  .hero-wrapper img,
  .hero-wrapper .hero-image { height: 100%; }

  div.hero-image {
    height: 48vw;
    min-height: 220px;
    max-height: 360px;
  }

  div.hero-image img { height: 100%; }

  .article-container {
    padding: 2.5rem 1rem 5rem;
  }

  .signal-header,
  .signal-body,
  .evidence-section,
  .signal-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  h1.signal-title,
  .signal-header h1 { font-size: 1.85rem; }

  h2,
  .signal-body h2 { font-size: 1.4rem; margin-top: 2.25rem; }

  p,
  .signal-body p,
  .article-container p { font-size: 1rem; line-height: 1.8; }

  blockquote {
    font-size: 1.1rem;
    margin-left: 0;
    margin-right: 0;
    padding-left: 1.25rem;
  }

  .signal-subtitle,
  .deck { font-size: 1.05rem; }

  .evidence-block { padding: 1.25rem; }
  .sci-breakdown { padding: 1.25rem; }
}


/* ─── Responsive — 390px (Small Phone) ──────────────────────────── */

@media (max-width: 390px) {
  .hero-wrapper {
    height: 52vw;
    min-height: 180px;
    max-height: 280px;
  }

  div.hero-image {
    height: 52vw;
    min-height: 180px;
    max-height: 280px;
  }

  h1.signal-title,
  .signal-header h1 { font-size: 1.65rem; letter-spacing: -0.02em; }

  h2,
  .signal-body h2 { font-size: 1.3rem; }

  p,
  .signal-body p,
  .article-container p { font-size: 0.97rem; }

  blockquote { font-size: 1.05rem; }

  .sb-name { display: none; }
  .sb-dot  { width: 8px; height: 8px; }
}


/* ─── Layer Labels (editorial section markers) ───────────────────── */

.layer-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--div-color);
  margin-top: 3rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}


/* ─── Voice Paragraphs (editorial analysis callouts) ─────────────── */

p.voice, .voice {
  font-style: italic;
  color: var(--cream);
  border-left: 3px solid var(--div-color);
  padding-left: 1.25rem;
  margin: 2rem 0;
}


/* ─── Structural Notes ───────────────────────────────────────────── */

.structural-note {
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border2, #2a2a2a);
  border-left: 3px solid var(--div-color);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.structural-note .note-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--div-color);
  margin-bottom: 0.5rem;
}
.structural-note p {
  font-size: 0.95rem;
  line-height: 1.75;
  margin-bottom: 0;
}


/* ─── Uncertainty Block ──────────────────────────────────────────── */

.uncertainty-block {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-left: 3px solid var(--moderate, #C9A84C);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}


/* ─── Discussion Section (Giscus) ────────────────────────────────── */

.giscus, .giscus-frame {
  margin-top: 3rem;
}
.giscus-error {
  display: none !important;
}


/* ─── Division Stripe with Text ──────────────────────────────────── */

.division-stripe {
  height: auto;
  min-height: 4px;
  background: var(--div-color);
  display: flex;
  align-items: center;
  padding: 0 28px;
}
.division-stripe .stripe-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #fff;
  padding: 6px 0;
}


/* ─── Signal Intelligence Disclosure ─────────────────────────────── */

.signal-disclosure {
  border-left: 4px solid var(--div-color);
  background: rgba(255,255,255,0.02);
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  color: var(--cream);
  line-height: 1.65;
  font-style: italic;
}
.signal-disclosure strong {
  color: var(--div-color);
  font-style: normal;
}


/* ─── References Section ─────────────────────────────────────────── */

.references-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.references-section h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim, #666);
  margin-bottom: 1rem;
}
.reference-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.5rem 0;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--cream);
  border-bottom: 1px solid var(--border);
}
.tier-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 2px;
  flex-shrink: 0;
  margin-top: 2px;
}
.tier-badge.tier-a { background: var(--high, #2E9B6F); color: #fff; }
.tier-badge.tier-b { background: var(--moderate, #C9A84C); color: #111; }
.tier-badge.tier-c { background: var(--dim, #666); color: #fff; }


/* ─── Alternative Explanations ───────────────────────────────────── */

.alt-section {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}
.alt-section h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim, #666);
  margin-bottom: 1rem;
}
.alt-item {
  margin-bottom: 1.5rem;
}
.alt-claim {
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--div-color);
  margin-bottom: 0.4rem;
}
.alt-item p {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--cream);
}


/* ─── Uncertainty Block ──────────────────────────────────────────── */

.uncertainty-block {
  background: rgba(201,168,76,0.06);
  border: 1px solid rgba(201,168,76,0.2);
  border-left: 3px solid var(--moderate, #C9A84C);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin: 2rem 0;
}
.uncertainty-block .u-label,
.uncertainty-block .note-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--moderate, #C9A84C);
  margin-bottom: 0.5rem;
}
.uncertainty-block p {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--cream);
  margin-bottom: 0;
}


/* ─── Signal Tags ────────────────────────────────────────────────── */

.signal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 2.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.signal-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 12px;
  border-radius: 2px;
  border: 1px solid var(--div-color);
  color: var(--div-color);
  background: transparent;
  text-transform: lowercase;
}


/* ─── Validation Box ─────────────────────────────────────────────── */

.validation-box {
  background: var(--surface, #131313);
  border: 1px solid var(--border2, #2a2a2a);
  padding: 24px 28px;
  border-radius: 4px;
  margin: 3rem 0;
}
.validation-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 2px;
}
.validation-badge.lv0 { background: var(--warm-gray, #8A8578); color: #fff; }
.validation-badge.lv1 { background: #2D6BE4; color: #fff; }
.validation-badge.lv2 { background: var(--high, #2E9B6F); color: #fff; }
.validation-badge.lv3 { background: var(--moderate, #C9A84C); color: #111; }
.validation-badge.contested { background: var(--orange, #E8602C); color: #fff; }


/* ─── Reading Time ───────────────────────────────────────────────── */

/* FIX: reading-time was #666 = 3.45:1 contrast (WCAG fail). #999 = 5.2:1 (pass) */
.reading-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: #999;
  letter-spacing: 0.05em;
}


/* ─── Sticky Bottom Bar ──────────────────────────────────────────── */

.sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 90;
  background: rgba(17,17,17,0.96);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--border, #1f1f1f);
  padding: 0 28px;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}
.sticky-bar.visible {
  transform: translateY(0);
}
.sticky-bar-inner {
  max-width: 740px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  gap: 16px;
}
.sticky-bar a, .sticky-bar button {
  font-family: 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim, #666);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.sticky-bar a:hover, .sticky-bar button:hover { color: var(--cream); }
.sticky-bar .validate-btn {
  color: var(--div-color);
  border: 1px solid var(--div-color);
  padding: 6px 16px;
  border-radius: 2px;
}
.sticky-bar .validate-btn:hover {
  background: var(--div-color);
  color: #fff;
}

@media (max-width: 768px) {
  .sticky-bar { padding: 0 16px; }
  .sticky-bar-inner { height: 44px; }
}


/* ═══════════════════════════════════════════════════════════════════
   POLISH PATCH v1.1 — April 16, 2026
   Fixes: subtitle readability, bottom section spacing, missing class
   aliases, sticky-bar clearance, focus states, hover states.
   ═══════════════════════════════════════════════════════════════════ */

/* FIX 1: ALL header text uses theme variable so it adapts dark↔light */
.signal-header,
.signal-header h1,
.signal-header p,
.signal-header .signal-subtitle,
.signal-header .deck,
.signal-header .signal-meta-row,
.signal-header .signal-id-tag,
.signal-header .territory-tag,
.signal-header .reading-time,
.article-container .signal-subtitle,
.article-container .deck,
p.signal-subtitle,
p.deck {
  color: var(--cream) !important;
}
.signal-subtitle,
.deck {
  font-weight: 500 !important;
  opacity: 1 !important;
}
.signal-header .byline,
.signal-header .byline-text,
.byline, .byline-text {
  color: var(--dim) !important;
}

/* FIX 2: .audio-wrap alias — HTML uses this, CSS only had .audio-player-wrap */
.audio-wrap {
  margin-bottom: 2rem;
}

/* FIX 3: .alt-explanations alias — HTML uses plural, CSS only had .alt-section */
.alt-explanations {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.alt-explanations h3 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1rem;
}

/* FIX 4: Evidence marker spans (.ev-v / .ev-i) */
.evidence-marker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ev-v { background: var(--high); color: #fff; }
.ev-i { background: var(--moderate); color: #111; }

/* FIX 5: Sticky bar clearance — content not obscured behind 48px bar */
footer {
  padding-bottom: calc(3rem + 48px);
}

/* FIX 6: Focus states — keyboard accessibility */
a:focus-visible,
button:focus-visible,
.sb-item:focus-visible {
  outline: 2px solid var(--div-color);
  outline-offset: 3px;
  border-radius: 2px;
}

/* FIX 7: Signal tag hover */
.signal-tag {
  transition: background 0.15s, color 0.15s;
  cursor: default;
}
.signal-tag:hover {
  background: var(--div-color);
  color: #fff;
}

/* FIX 8: Byline spacing — was merging into subtitle */
.byline,
.byline-text {
  margin-top: 0.25rem;
}

/* FIX 9: .layer-label conflict resolution — force JetBrains + div-color */
.layer-label {
  font-family: 'JetBrains Mono', monospace !important;
  color: var(--div-color) !important;
  opacity: 0.85;
}

/* FIX 10: Mobile sticky bar clearance */
@media (max-width: 768px) {
  footer {
    padding-bottom: calc(2rem + 44px);
  }
}


/* ═══════════════════════════════════════════════════════════════════
   VISUAL AUDIT PATCH v1.2 — April 16, 2026
   From BrowserAgent 17-point visual audit
   ═══════════════════════════════════════════════════════════════════ */

/* FIX: CORE division stripe barely visible — lighter shade + border */
body[data-division="core"] .division-stripe {
  background: #666;
  border-bottom: 1px solid #888;
}

/* FIX: Dark division stripes need white text with better contrast */
.division-stripe .stripe-text {
  color: #fff !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* FIX: Hero gradient stronger for consistent themed bottom edge */
.hero-wrapper::after {
  height: 60% !important;
  background: linear-gradient(transparent, var(--black)) !important;
}

/* FIX: SCI badge standardized size and position */
.sci-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 3px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  white-space: nowrap;
}
.sci-badge.sci-high { background: var(--high, #2E9B6F); color: #fff; }
.sci-badge.sci-moderate { background: var(--moderate, #C9A84C); color: #111; }
.sci-badge.sci-low { background: var(--low, #C94C4C); color: #fff; }

/* FIX: Thin separator between header and hero — themable border */
.signal-header {
  border-bottom: 1px solid var(--border);
  padding-bottom: 2rem;
}

/* FIX: Photo credit — themable dim color */
.photo-credit,
.hero-credit {
  color: var(--dim) !important;
  font-size: 0.72rem;
}

/* FIX: Mobile hero too short (was 202px) */
@media (max-width: 768px) {
  .hero-wrapper {
    height: 52vw !important;
    min-height: 280px !important;
    max-height: 400px;
  }
  .hero-wrapper img,
  .hero-wrapper .hero-image {
    height: 100% !important;
  }
  div.hero-image {
    height: 52vw !important;
    min-height: 280px !important;
    max-height: 400px;
  }
  div.hero-image img {
    height: 100% !important;
  }
}

/* FIX: Byline same size as subtitle — needs visual hierarchy */
.byline,
.byline-text {
  font-size: 0.82rem !important;
  font-family: 'Inter', sans-serif !important;
  color: var(--dim);
  margin-top: 0.75rem;
}

/* FIX: Signal ID tag nearly invisible (was 35% opacity) */
.signal-id-tag {
  opacity: 0.5;
}

/* FIX: Footer text — themable dim color */
footer p {
  color: var(--dim);
}

/* FIX: "← Signal Desk" nav link too dim */
.nav-back {
  color: #999 !important;
}
.nav-back:hover {
  color: var(--cream) !important;
}

/* FIX: Signal disclosure text — themable dim color */
.signal-disclosure {
  color: var(--dim) !important;
}

/* FIX: Mobile section bar — show division dots as minimal nav */
@media (max-width: 768px) {
  .sb-sections {
    display: flex !important;
    gap: 4px;
  }
  .sb-dot {
    width: 8px;
    height: 8px;
    display: block !important;
  }
}


/* ═══════════════════════════════════════════════════════════════════
   PREMIUM EDITORIAL UPGRADE — April 16, 2026
   From Opus-level editorial design consulting report.
   10 highest-impact changes for top-tier publication feel.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. BODY TYPOGRAPHY: Tighter line-height, text-wrap, hyphens */
p,
.signal-body p,
.article-container p {
  line-height: 1.68 !important;
  text-wrap: pretty;
  -webkit-hyphens: auto;
  hyphens: auto;
  hanging-punctuation: first allow-end last;
}

/* 2. DROP CAP: First letter of article opening */
.layer-label + h2 + p::first-letter {
  font-family: 'DM Serif Display', serif;
  font-size: 3.8em;
  float: left;
  line-height: 0.8;
  padding-right: 0.08em;
  padding-top: 0.08em;
  color: var(--div-color);
  font-weight: 400;
}

/* 3. HEADING TEXT BALANCE */
h1.signal-title,
.signal-header h1 {
  text-wrap: balance;
}
h2,
.signal-body h2,
.article-container h2 {
  text-wrap: balance;
  max-width: 85%;
}

/* 4. SPACING RHYTHM: Consistent scale */
.signal-body h2,
.article-container h2 { margin-top: 4rem; margin-bottom: 1rem; }
.signal-body h3,
.article-container h3 { margin-top: 3rem; margin-bottom: 0.5rem; }
.section-divider { margin: 4rem 0; }
blockquote { margin: 3rem 0; }
.structural-note,
.uncertainty-block,
.evidence-block { margin: 3rem 0; }

/* 5. BLOCKQUOTE: Editorial pull-quote feel */
blockquote {
  padding: 2rem 0 2rem 2rem;
  border-left: 3px solid var(--div-color);
  font-size: 1.35rem;
  line-height: 1.5;
  color: var(--cream);
}
blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dim);
}

/* 6. VOICE PARAGRAPHS: Editor's margin notes */
p.voice, .voice {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--cream);
  border-left: 2px solid var(--div-color);
  padding: 0.75rem 0 0.75rem 1.5rem;
  margin: 2.5rem 0;
  border-radius: 0 4px 4px 0;
}

/* 7. LAYER LABELS: Section openers with extending line */
.layer-label {
  display: flex !important;
  align-items: center;
  gap: 0.75rem;
  margin-top: 4rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
}
.layer-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--div-color), transparent);
  opacity: 0.3;
}

/* 8. SCI TABLE: Bloomberg terminal feel */
.sci-breakdown {
  background: rgba(255, 255, 255, 0.015);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2rem 2.25rem;
  backdrop-filter: blur(4px);
}
.sci-row {
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
  transition: background 0.15s;
}
.sci-row:hover {
  background: var(--border);
}
.sci-row .sci-val {
  font-size: 0.92rem;
  color: var(--high);
  font-variant-numeric: tabular-nums;
}
.sci-row.total {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px solid var(--div-color);
}
.sci-row.total .sci-val {
  font-size: 1.15rem;
  color: var(--cream);
}

/* 9. PEER REVIEW BANNER (compact, above hero) */
.peer-review-banner {
  max-width: 740px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.pr-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: var(--surface, #131313);
  border: 1px solid var(--border, #1f1f1f);
  border-left: 3px solid var(--div-color);
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
.pr-division-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  background: var(--div-color);
  color: #fff;
  padding: 4px 8px;
  border-radius: 2px;
}
.pr-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dim);
}
.pr-state {
  font-family: 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--cream);
}
.pr-state.lv0 { color: var(--warm-gray); }
.pr-state.lv1 { color: #2D6BE4; }
.pr-state.lv2 { color: var(--high); }
.pr-state.lv3 { color: var(--moderate); }
.pr-action {
  font-family: 'Inter', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--div-color);
  white-space: nowrap;
  transition: color 0.15s;
}
.pr-action:hover { color: var(--cream); }

@media (max-width: 600px) {
  .pr-info { flex-direction: column; align-items: flex-start; gap: 2px; }
  .pr-action { margin-top: 4px; }
}

/* 10. PRINT STYLESHEET */
@media print {
  .nav, .section-bar, .division-stripe, .sticky-bar, .audio-wrap,
  #reading-progress, .giscus, .nav-right, footer, .peer-review-banner { display: none !important; }
  body { background: #fff !important; color: #111 !important; font-size: 11pt; line-height: 1.55; }
  .hero-wrapper { width: 100% !important; margin-left: 0 !important; height: auto !important; max-height: 300px !important; }
  .hero-wrapper::after { display: none !important; }
  .hero-wrapper img { filter: none !important; max-height: 280px; }
  h1.signal-title, .signal-header h1 { color: #111 !important; font-size: 28pt; text-shadow: none !important; }
  p, .signal-body p { color: #222 !important; font-size: 11pt; line-height: 1.55; orphans: 3; widows: 3; }
  h2 { color: #111 !important; page-break-after: avoid; }
  .signal-subtitle, .deck { color: #333 !important; text-shadow: none !important; }
  .article-container { max-width: 100%; padding: 0; }
  .signal-header, .signal-body, .evidence-section, .signal-footer { max-width: 100%; padding: 0; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #666; }
  @page { margin: 2cm; }
}