/* ═══ ARTICLE PAGE CSS — Extracted from SPA inline styles ═══ */
/* These styles support all ~200 standalone article pages.      */
/* Nav styles live in /assets/unified-nav.css (separate file).  */

/* ═══ READING PROGRESS BAR ═══ */
#reading-progress{position:fixed;top:0;left:0;height:3px;z-index:999;width:0;transition:width 0.1s linear;pointer-events:none;}

/* ═══ SIGNAL DISCLOSURE ═══ */
.signal-disclosure{
  max-width:680px;margin:24px auto 0;padding:0 28px;
}
.signal-disclosure-inner{
  border:1px solid rgba(242,125,35,0.3);border-left:3px solid var(--orange-logo, #f27d23);
  background:rgba(242,125,35,0.05);border-radius:3px;
  padding:16px 20px;
  font-family:'IBM Plex Serif',serif;font-size:13px;color:var(--warm-gray, #A89F93);line-height:1.6;
}

/* ═══ ARTICLE HEADER — DYNAMIC ═══ */
.article-header-dynamic{max-width:780px;margin:32px auto 24px;padding:0 40px;}
html.light-mode .article-header-dynamic .article-title,
html.light-mode .article-header-dynamic .article-subtitle,
html.light-mode .article-header-dynamic .article-byline,
html.light-mode .article-header-dynamic .city-tag{color:#111;}
html.light-mode .article-header-dynamic .byline-sep{color:#999;}
.article-meta-row{
  display:flex;align-items:center;gap:12px;margin-bottom:16px;
  font-family:'IBM Plex Mono',monospace;font-size:12px;
}
.article-section-label{font-weight:600;letter-spacing:1.5px;text-transform:uppercase;}

/* Section tag (color coding by division) */
.section-tag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:10px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;padding:4px 10px;border-radius:3px;
}

/* City tag */
.city-tag{
  display:inline-block;font-family:'IBM Plex Mono',monospace;
  font-size:10px;color:var(--dim, #999);letter-spacing:0.5px;
}

/* SCI badge */
.article-sci{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:10px;font-weight:600;
  padding:4px 10px;border-radius:3px;
}
.article-sci.sci-high{background:rgba(46,155,111,0.15);color:var(--high, #2E9B6F);border:1px solid rgba(46,155,111,0.3);}
.article-sci.sci-moderate{background:rgba(201,168,76,0.15);color:var(--moderate, #C9A84C);border:1px solid rgba(201,168,76,0.3);}
.article-sci.sci-low{background:rgba(77,77,77,0.15);color:var(--dim, #999);border:1px solid rgba(77,77,77,0.3);}
.article-sci.signed-col{background:rgba(0,0,0,0.05);color:#555;border:1px solid rgba(0,0,0,0.12);}

/* ═══ TITLE ROW WITH GLOBE ═══ */
.article-title-row{display:flex;align-items:flex-start;gap:16px;margin-bottom:12px;}
.article-title{
  font-family:'IBM Plex Sans',serif;font-size:42px;font-weight:400;
  line-height:1.15;color:var(--cream, #FAF6EE);flex:1;margin:0;
}
.article-globe-btn{
  flex:0 0 auto;margin-top:8px;
  width:38px;height:38px;border-radius:50%;
  background:var(--surface, #131313);border:1px solid var(--border2, #2a2a2a);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:all 0.2s;position:relative;
  text-decoration:none;
}
.article-globe-btn:hover{background:var(--surface2, #1a1a1a);border-color:var(--warm-gray, #A89F93);transform:scale(1.1);}
.globe-icon-dyn{font-size:18px;line-height:1;}
.globe-tooltip-dyn{
  position:absolute;right:46px;top:50%;transform:translateY(-50%);
  background:var(--surface, #131313);border:1px solid var(--border2, #2a2a2a);border-radius:3px;
  padding:4px 10px;white-space:nowrap;
  font-family:'IBM Plex Mono',monospace;font-size:8px;letter-spacing:1px;
  text-transform:uppercase;color:var(--cream, #FAF6EE);
  opacity:0;pointer-events:none;transition:opacity 0.2s;
}
.article-globe-btn:hover .globe-tooltip-dyn{opacity:1;}

/* ═══ SUBTITLE / DECK ═══ */
.article-subtitle, .deck{
  font-family:'IBM Plex Serif',serif;font-style:italic;font-size:22px;
  color:var(--warm-gray, #A89F93);line-height:1.5;margin:0 0 16px;
}

/* ═══ BYLINE ═══ */
.article-byline{
  font-family:'IBM Plex Mono',monospace;font-size:12px;
  color:var(--dim, #999);display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:20px;border-bottom:1px solid var(--border, #1f1f1f);
}
.byline-sep{color:#444;}

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

/* ═══ ARTICLE BODY ═══ */
.article-body{max-width:780px;margin:32px auto 0;padding:0 40px 80px;position:relative;}
.article-body p{font-family:'IBM Plex Serif',serif;font-size:1.2rem;line-height:1.7;letter-spacing:0.005em;color:var(--cream, #FAF6EE);margin-bottom:24px;opacity:0.9;}
.article-body > p:first-of-type::first-letter{font-family:'IBM Plex Sans',serif;font-style:italic;font-size:4rem;float:left;color:var(--orange-logo, #f27d23);line-height:0.8;padding-right:8px;padding-top:4px;}
.article-body h2{font-family:'IBM Plex Sans',serif;font-size:28px;font-weight:400;line-height:1.3;color:var(--cream, #FAF6EE);margin:2em 0 0.75em;}
.article-body h3{font-family:'IBM Plex Sans',sans-serif;font-size:16px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--dim, #999);margin:1.5em 0 0.5em;}
.article-body blockquote{font-family:'IBM Plex Sans',serif;font-style:italic;font-size:22px;line-height:1.5;color:var(--cream, #FAF6EE);text-align:center;padding:28px 0;margin:8px 0 32px;border-top:1px solid var(--border, #1f1f1f);border-bottom:1px solid var(--border, #1f1f1f);}
.article-body ul,.article-body ol{font-family:'IBM Plex Serif',serif;font-size:17px;line-height:1.7;color:var(--cream, #FAF6EE);margin:0 0 1.25em 1.5em;opacity:0.9;}
.article-body li{margin-bottom:0.5em;}
.article-body .structural-note{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--dim, #999);padding:20px 0 8px;border-bottom:1px solid var(--border, #1f1f1f);margin:2em 0 1em;}
.article-body img{max-width:100%;border-radius:8px;margin:1.5em 0;}
.article-body figure{margin:1.5em 0;}
.article-body figure img{max-width:100%;border-radius:8px;}
.article-body figcaption{font-family:'IBM Plex Serif',serif;font-style:italic;font-size:12px;color:var(--dim, #999);margin-top:8px;}
.article-body sup a{color:var(--dim, #999);text-decoration:none;font-size:11px;}
.article-body sup a:hover{color:var(--cream, #FAF6EE);}

/* ═══ PULL QUOTE ═══ */
.pull-quote,.article-body .pull-quote{
  font-family:'IBM Plex Sans',serif;font-style:italic;font-size:22px;
  line-height:1.5;color:var(--cream, #FAF6EE);text-align:center;
  padding:28px 0;margin:8px 0 32px;
  border-top:1px solid var(--border, #1f1f1f);border-bottom:1px solid var(--border, #1f1f1f);
}

/* ═══ PAYWALL FADE ═══ */
.article-fade{position:relative;}
.article-fade::after{
  content:'';position:absolute;bottom:0;left:0;right:0;
  height:150px;
  background:linear-gradient(transparent, var(--black, #111));
  pointer-events:none;
}

/* ═══ VALIDATION BADGE ═══ */
.validation-badge{
  max-width:780px;margin:3rem auto 1rem;padding:0 40px;
}
/* Fix dark-mode contrast (2026-07-17): the validation/echo card is always light (#fff);
   #vb-name had no explicit color, so in dark mode it inherited near-white body text and
   became invisible on the white card. Force dark text (card is white in both themes). */
#vb-name{color:#2a2620;}

/* ═══ LIGHT MODE OVERRIDES ═══ */
html.light-mode .article-body p{color:#222;}
html.light-mode .article-body .pull-quote{color:#111;border-top-color:var(--border);border-bottom-color:var(--border);}
html.light-mode .article-fade::after{background:linear-gradient(transparent, #FAF6EE);}
html.light-mode .article-audio{background:#FFFFFF;border-color:var(--border);}
html.light-mode .article-title{color:#111;}
html.light-mode .article-subtitle, html.light-mode .deck{color:#555;}
html.light-mode .article-byline{color:#777;border-bottom-color:#E8E4DC;}
html.light-mode .article-body h2{color:#111;}
html.light-mode .article-body blockquote{color:#333;border-top-color:#E8E4DC;border-bottom-color:#E8E4DC;}

/* ═══ RESPONSIVE ═══ */
@media(max-width:600px){
  .signal-disclosure,.article-body{padding-left:16px;padding-right:16px;}
  .article-title{font-size:28px!important;line-height:1.2!important;}
  .article-subtitle, .deck{font-size:18px!important;}
  .article-body p{font-size:16px!important;}
  .article-body h2{font-size:22px!important;}
  .article-globe-btn{width:32px;height:32px;}
  .globe-icon-dyn{font-size:15px;}
  .globe-tooltip-dyn{display:none;}
}