/* ─────────────────────────────────────────────────────────────
   BuyThe200 — Blog Stylesheet
   Covers: blog index (home.php) + single post (single.php)
   Fonts: Bricolage Grotesque / Plus Jakarta Sans / Lora / DM Mono
   ───────────────────────────────────────────────────────────── */

/* ── RESET + BASE ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

:root {
  --b-ink:      #0F172A;
  --b-ink2:     #1E293B;
  --b-ink3:     #475569;
  --b-ink4:     #94A3B8;
  --b-ink5:     #CBD5E1;
  --b-white:    #FFFFFF;
  --b-off:      #F8F7F4;
  --b-off2:     #F2F0EC;
  --b-border:   #E8E6E1;
  --b-amber:    #D97706;
  --b-amber2:   #F59E0B;
  --b-amber-lt: #FEF3C7;
  --b-amber-pl: #FFFBEB;
  --b-amber-dk: #92400E;
  --b-green:    #059669;
  --b-green-bg: #ECFDF5;
  --b-green-dk: #065F46;
  --b-blue:     #2563EB;
  --b-blue-bg:  #EFF6FF;
  --b-blue-dk:  #1E40AF;
  --b-purple:   #7C3AED;
  --b-purple-bg:#F5F3FF;
  --b-purple-dk:#5B21B6;
  --b-red:      #DC2626;
  --b-red-bg:   #FEF2F2;
  --b-serif:    'Bricolage Grotesque', system-ui, sans-serif;
  --b-sans:     'Plus Jakarta Sans', system-ui, sans-serif;
  --b-prose:    'Lora', Georgia, serif;
  --b-mono:     'DM Mono', monospace;
  --b-r:        12px;
  --b-r-sm:     8px;
  --b-r-lg:     20px;
  --b-sh:       0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --b-sh-md:    0 4px 20px rgba(0,0,0,.08), 0 2px 6px rgba(0,0,0,.04);
  --b-sh-lg:    0 12px 48px rgba(0,0,0,.12), 0 4px 16px rgba(0,0,0,.06);
  --b-nav-h:    60px;
}

body {
  font-family: var(--b-sans);
  background: var(--b-white);
  color: var(--b-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.6;
}

/* ── NAV ── */
.b-nav {
  background: var(--b-white);
  border-bottom: 1px solid var(--b-border);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: var(--b-sh);
}
.b-nav-inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--b-nav-h);
}
.b-brand {
  font-family: var(--b-serif);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -.04em;
  color: var(--b-ink);
  text-decoration: none;
  flex-shrink: 0;
}
.b-brand-200 { color: var(--b-amber); }
.b-nav-links {
  display: flex;
  gap: 2px;
  list-style: none;
}
.b-nav-links a {
  font-family: var(--b-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--b-ink3);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: var(--b-r-sm);
  transition: color .15s, background .15s;
}
.b-nav-links a:hover { color: var(--b-ink); background: #F1EEE8; }
.b-nav-links a.active { color: var(--b-amber); background: var(--b-amber-pl); font-weight: 600; }
.b-nav-cta {
  background: var(--b-ink);
  color: #fff;
  font-family: var(--b-sans);
  font-size: 12px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: var(--b-r-sm);
  text-decoration: none;
  transition: opacity .15s;
  flex-shrink: 0;
}
.b-nav-cta:hover { opacity: .85; }
.b-nav-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--b-ink3);
  text-decoration: none;
  transition: color .15s;
}
.b-nav-back:hover { color: var(--b-amber); }

/* ── BADGES ── */
.b-badge {
  font-family: var(--b-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
  display: inline-block;
}
.b-badge-strategy  { background: var(--b-amber-lt); color: var(--b-amber-dk); }
.b-badge-signals   { background: var(--b-green-bg);  color: var(--b-green-dk); }
.b-badge-analysis  { background: var(--b-blue-bg);   color: var(--b-blue-dk); }
.b-badge-education { background: var(--b-purple-bg); color: var(--b-purple-dk); }
.b-badge-live {
  background: var(--b-green);
  color: #fff;
  animation: b-livePulse 2.5s ease-in-out infinite;
}
@keyframes b-livePulse { 0%,100%{opacity:1} 50%{opacity:.65} }

/* ════════════════════════════════════════════════════════
   BLOG INDEX
   ════════════════════════════════════════════════════════ */

/* ── INDEX HERO ── */
.b-hero {
  background: #0F172A;
  position: relative;
  overflow: hidden;
  padding: calc(var(--nav-h, 58px) + 56px) 28px 100px;
}
.b-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 28px 28px;
}
.b-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(217,119,6,.08) 0%, transparent 60%);
}
.b-hero-inner {
  max-width: 1340px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.b-hero-eyebrow {
  font-family: var(--b-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--b-amber);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.b-hero-eyebrow::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1px;
  background: var(--b-amber);
}
.b-hero-title {
  font-family: var(--b-serif);
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.0;
  color: #fff;
  margin-bottom: 16px;
}
.b-hero-sub {
  font-family: var(--b-sans);
  font-size: 15px;
  color: rgba(255,255,255,.55);
  max-width: 400px;
  line-height: 1.65;
}
.b-hero-stats {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.b-hero-stat {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b-hstat-k {
  font-family: var(--b-sans);
  font-size: 11px;
  color: rgba(255,255,255,.45);
  letter-spacing: .04em;
}
.b-hstat-v {
  font-family: var(--b-mono);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
}
.b-hstat-v.pos { color: #34D399; }
.b-hstat-v.amb { color: var(--b-amber2); }

/* ── FEATURED CARD ── */
.b-feat-outer {
  max-width: 1340px;
  margin: -56px auto 0;
  padding: 0 28px;
  position: relative;
  z-index: 10;
}
.b-feat-card {
  background: var(--b-white);
  border-radius: var(--b-r-lg);
  box-shadow: var(--b-sh-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 400px;
}
.b-feat-art {
  position: relative;
  min-height: 340px;
  background: #0F172A;
  overflow: hidden;
}
.b-feat-art canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.b-feat-art-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(15,23,42,.8) 0%, rgba(15,23,42,.15) 100%);
}
.b-feat-art-inner {
  position: absolute;
  inset: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.b-feat-badge-row {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.b-feat-hl {
  font-family: var(--b-serif);
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #fff;
  margin-bottom: 10px;
}
.b-feat-deck {
  font-size: 13px;
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  margin-bottom: 16px;
}
.b-feat-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: rgba(255,255,255,.5);
}
.b-feat-meta-dot { opacity: .4; }
.b-feat-chart-label {
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--b-mono);
  font-size: 9px;
  background: rgba(255,255,255,.1);
  backdrop-filter: blur(4px);
  color: rgba(255,255,255,.6);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: .06em;
}
.b-feat-stats {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b-feat-stats-eyebrow {
  font-family: var(--b-sans);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--b-amber);
  margin-bottom: 20px;
}
.b-feat-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #F1EEE8;
}
.b-feat-stat-row:last-of-type { border-bottom: none; }
.b-fstat-k { font-family: var(--b-sans); font-size: 12px; color: var(--b-ink3); }
.b-fstat-v { font-family: var(--b-mono); font-size: 13px; font-weight: 500; color: var(--b-ink); }
.b-fstat-v.pos { color: var(--b-green); }
.b-fstat-v.amb { color: var(--b-amber); }
.b-feat-cta {
  display: block;
  background: var(--b-ink);
  color: #fff;
  text-align: center;
  padding: 13px;
  border-radius: var(--b-r-sm);
  font-family: var(--b-sans);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity .15s;
  margin-top: 20px;
}
.b-feat-cta:hover { opacity: .85; }

/* ── BODY LAYOUT ── */
.b-body {
  max-width: 1340px;
  margin: 40px auto 80px;
  padding: 0 28px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 40px;
  align-items: start;
}

/* ── FILTER PILLS ── */
.b-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.b-pill {
  border: none;
  padding: 7px 16px;
  border-radius: 40px;
  font-family: var(--b-sans);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  background: var(--b-white);
  color: var(--b-ink3);
  box-shadow: var(--b-sh);
}
.b-pill:hover { background: #F1EEE8; color: var(--b-ink); }
.b-pill.on { background: var(--b-ink); color: #fff; box-shadow: none; }
.b-pill[data-color="amber"].on { background: var(--b-amber); color: #fff; }
.b-pill[data-color="green"].on { background: var(--b-green); color: #fff; }
.b-pill[data-color="blue"].on  { background: var(--b-blue);  color: #fff; }
.b-pill[data-color="purple"].on{ background: var(--b-purple);color: #fff; }

/* ── ARTICLE CARDS ── */
.b-articles { display: flex; flex-direction: column; gap: 16px; }
.b-card {
  background: var(--b-white);
  border-radius: var(--b-r);
  box-shadow: var(--b-sh);
  display: grid;
  grid-template-columns: 200px 1fr;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
  color: inherit;
}
.b-card:hover { box-shadow: var(--b-sh-md); transform: translateY(-2px); }
.b-card-thumb {
  position: relative;
  overflow: hidden;
  background: #0F172A;
}
.b-card-thumb canvas { width: 100%; height: 100%; min-height: 160px; display: block; }
.b-card-thumb-empty,
.b-chart-empty {
  width: 100%;
  height: 100%;
  min-height: 160px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  background: linear-gradient(180deg, #111C2C 0%, #172436 100%);
  color: rgba(255,255,255,.88);
}
.b-chart-empty { min-height: 120px; }
.b-chart-empty-lg { min-height: 420px; }
.b-card-thumb-empty-k,
.b-chart-empty-k {
  font-family: var(--b-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--b-amber2);
}
.b-card-thumb-empty-v,
.b-chart-empty-v {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,.7);
  max-width: 28ch;
}
.b-card-thumb-empty code,
.b-chart-empty code {
  font-family: var(--b-mono);
  color: rgba(255,255,255,.92);
}
.b-card-thumb-tag {
  position: absolute;
  bottom: 8px;
  left: 10px;
  font-family: var(--b-mono);
  font-size: 9px;
  color: rgba(255,255,255,.7);
  letter-spacing: .06em;
  background: rgba(0,0,0,.35);
  padding: 2px 6px;
  border-radius: 3px;
}
.b-card-body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.b-card-badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.b-card-hl {
  font-family: var(--b-serif);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--b-ink);
  margin-bottom: 8px;
}
.b-card-deck { font-size: 13px; color: var(--b-ink3); line-height: 1.6; margin-bottom: 12px; }
.b-card-meta { font-size: 11px; color: var(--b-ink4); display: flex; gap: 10px; align-items: center; }
.b-card-read { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--b-amber); }

/* Coming soon card */
.b-coming {
  background: repeating-linear-gradient(45deg, #FAFAF8, #FAFAF8 10px, #F5F5F0 10px, #F5F5F0 20px);
  border-radius: var(--b-r);
  border: 1.5px dashed #D1CBB8;
  padding: 28px 24px;
  opacity: .75;
  cursor: default;
}
.b-coming-badge {
  display: inline-block;
  background: var(--b-purple-bg); color: var(--b-purple);
  font-family: var(--b-sans); font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 4px; margin-bottom: 10px;
}
.b-coming-hl { font-family: var(--b-serif); font-size: 18px; font-weight: 700; letter-spacing: -.02em; color: var(--b-ink3); margin-bottom: 6px; }
.b-coming-meta { font-size: 12px; color: var(--b-ink4); }

/* Card thumb overlay */
.b-card-thumb-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 8px 10px;
  background: linear-gradient(transparent, rgba(15,23,42,.65));
}
.b-card-thumb-tag {
  font-family: var(--b-mono); font-size: 9px;
  color: rgba(255,255,255,.8); letter-spacing: .06em;
}

/* No posts state */
.b-empty {
  text-align: center;
  padding: 80px 40px;
  background: var(--b-off);
  border-radius: var(--b-r-lg);
}
.b-empty-title { font-family: var(--b-serif); font-size: 24px; font-weight: 700; color: var(--b-ink); margin-bottom: 8px; }
.b-empty-sub { font-size: 14px; color: var(--b-ink3); }

/* ── SIDEBAR ── */
.b-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }
.b-sb-card {
  background: var(--b-off);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r);
  overflow: hidden;
}
.b-sb-hd {
  padding: 14px 18px 12px;
  border-bottom: 1px solid var(--b-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.b-sb-title {
  font-family: var(--b-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--b-ink);
}
.b-sb-link { font-size: 11px; font-weight: 600; color: var(--b-amber); text-decoration: none; }
.b-sb-body { padding: 4px 0 8px; }

/* Watchlist */
.b-wl-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 18px;
  transition: background .15s;
}
.b-wl-row:hover { background: rgba(0,0,0,.02); }
.b-wl-sym { font-family: var(--b-serif); font-weight: 700; font-size: 12px; color: var(--b-ink); }
.b-wl-px { font-family: var(--b-mono); font-size: 11px; font-weight: 500; color: var(--b-ink2); }
.b-wl-chg { font-family: var(--b-mono); font-size: 10px; margin-top: 1px; }
.b-wl-loading { padding: 16px 18px; font-size: 12px; color: var(--b-ink4); }
.b-wl-empty { padding: 14px 18px; font-size: 12px; color: var(--b-ink4); line-height: 1.5; }
.b-wl-empty a { color: var(--b-amber); text-decoration: none; font-weight: 600; }
.b-wl-footer { padding: 8px 18px; font-size: 11px; color: var(--b-ink4); border-top: 1px solid var(--b-border); }
.b-wl-footer a { color: var(--b-amber); text-decoration: none; font-weight: 600; }
.b-wl-error { padding: 18px; text-align: left; }
.b-wl-error-t { font-size: 12px; font-weight: 700; color: var(--b-ink); margin-bottom: 4px; }
.b-wl-error-d { font-size: 11px; color: var(--b-ink4); line-height: 1.5; margin-bottom: 12px; }
.b-wl-retry {
  background: var(--b-amber); color: #fff; border: none;
  font-family: var(--b-sans); font-size: 11px; font-weight: 600;
  padding: 7px 14px; border-radius: var(--b-r-sm); cursor: pointer;
  transition: opacity .15s;
}
.b-wl-retry:hover { opacity: .85; }
.b-wl-row-na { opacity: .5; }
.b-wl-na { font-size: 10px; color: var(--b-ink4); font-style: italic; }

/* Trending */
.b-tr-item {
  padding: 12px 18px;
  border-bottom: 1px solid var(--b-border);
  cursor: pointer;
  transition: background .15s;
  text-decoration: none;
  display: block;
  color: inherit;
}
.b-tr-item:last-child { border-bottom: none; }
.b-tr-item:hover { background: rgba(0,0,0,.02); }
.b-tr-rank { font-family: var(--b-mono); font-size: 10px; color: var(--b-ink4); margin-bottom: 4px; }
.b-tr-hl { font-family: var(--b-serif); font-size: 13px; font-weight: 700; letter-spacing: -.02em; line-height: 1.35; color: var(--b-ink); }
.b-tr-meta { font-size: 11px; color: var(--b-ink4); margin-top: 4px; }

/* Terminal Signal Alert */
.b-terminal { background: #0F172A; border-radius: var(--b-r); overflow: hidden; box-shadow: var(--b-sh-md); }
.b-term-bar {
  background: #1E293B;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.b-term-dot { width: 10px; height: 10px; border-radius: 50%; }
.b-term-dot:nth-child(1) { background: #EF4444; }
.b-term-dot:nth-child(2) { background: #F59E0B; }
.b-term-dot:nth-child(3) { background: #22C55E; }
.b-term-label { font-family: var(--b-mono); font-size: 10px; color: #64748B; margin-left: 6px; letter-spacing: .06em; }
.b-term-body { padding: 16px 18px; min-height: 140px; }
.b-t-line { font-family: var(--b-mono); font-size: 11px; line-height: 1.7; }
.b-t-prompt { color: #64748B; }
.b-t-cmd { color: #F59E0B; }
.b-t-out { color: #94A3B8; }
.b-t-out.green { color: #22C55E; }
.b-t-out.amber { color: #F59E0B; }
.b-t-out.white { color: #fff; }
.b-t-cursor {
  display: inline-block;
  width: 7px;
  height: 12px;
  background: #F59E0B;
  animation: b-blink .9s step-end infinite;
  vertical-align: text-bottom;
  margin-left: 2px;
}
@keyframes b-blink { 0%,100%{opacity:1} 50%{opacity:0} }
.b-term-cta {
  display: block;
  margin: 14px 18px 16px;
  background: var(--b-amber);
  color: var(--b-ink);
  text-align: center;
  padding: 10px;
  border-radius: var(--b-r-sm);
  font-family: var(--b-sans);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .15s;
}
.b-term-cta:hover { opacity: .9; }

/* ── FOOTER ── */
.b-footer { background: var(--b-ink2); color: rgba(255,255,255,.5); padding: 28px; }
.b-footer-inner {
  max-width: 1340px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.b-foot-brand { font-family: var(--b-serif); font-size: 15px; font-weight: 800; letter-spacing: -.04em; color: #fff; }
.b-foot-brand-200 { color: var(--b-amber); }
.b-foot-legal { font-size: 11px; max-width: 480px; line-height: 1.5; }

/* ════════════════════════════════════════════════════════
   BLOG SINGLE POST
   ════════════════════════════════════════════════════════ */

/* ── PROGRESS BAR ── */
.b-progress {
  position: fixed;
  top: var(--nav-h, 58px);
  left: 0;
  right: 0;
  height: 2px;
  background: var(--b-border);
  z-index: 150;
}
.b-progress-fill {
  height: 100%;
  background: linear-gradient(to right, var(--b-amber), var(--b-amber2));
  width: 0%;
  transition: width .1s linear;
}

/* ── ARTICLE HEADER ── */
.b-art-hd {
  background: var(--b-off);
  border-bottom: 1px solid var(--b-border);
  padding: calc(var(--nav-h, 58px) + 48px) 28px 40px;
}
.b-art-hd-inner { max-width: 760px; margin: 0 auto; }
.b-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--b-ink4);
  margin-bottom: 20px;
}
.b-breadcrumb a { color: var(--b-ink4); text-decoration: none; transition: color .15s; }
.b-breadcrumb a:hover { color: var(--b-amber); }
.b-breadcrumb-sep { opacity: .4; }
.b-art-badges { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.b-art-title {
  font-family: var(--b-serif);
  font-size: clamp(26px, 4vw, 42px);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.1;
  color: var(--b-ink);
  margin-bottom: 18px;
}
.b-art-deck {
  font-family: var(--b-sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--b-ink3);
  margin-bottom: 24px;
}
.b-art-meta-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  border-top: 1px solid var(--b-border);
  padding-top: 18px;
  flex-wrap: wrap;
}
.b-art-author { display: flex; align-items: center; gap: 10px; }
.b-art-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--b-amber) 0%, var(--b-amber2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--b-serif);
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.b-art-avatar img { width: 100%; height: 100%; object-fit: cover; }
.b-author-name { font-size: 13px; font-weight: 600; color: var(--b-ink); }
.b-author-role { font-size: 11px; color: var(--b-ink4); }
.b-art-meta-stats { display: flex; align-items: center; gap: 16px; font-size: 12px; color: var(--b-ink4); }
.b-art-meta-sep { opacity: .4; }
.b-art-share { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.b-share-btn {
  background: none;
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-sm);
  padding: 6px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--b-ink3);
  cursor: pointer;
  transition: all .15s;
}
.b-share-btn:hover { border-color: var(--b-amber); color: var(--b-amber); }

/* ── HERO IMAGE / CHART (contained, premium, 16:9) ── */
.b-art-hd { padding-bottom: 56px; }                       /* extra space so the hero card can lift over it */
.b-art-hero-section {
  position: relative;
  background:
    linear-gradient(180deg, var(--b-off) 0%, var(--b-off) 50%, #FFFFFF 50%, #FFFFFF 100%);
  padding: 0 28px;
  margin-top: -32px;                                      /* lift card up into the header band */
}
.b-art-hero-frame {
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}
.b-art-hero {
  position: relative;
  aspect-ratio: 16 / 9;
  width: 100%;
  background: #0F172A;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(15,23,42,0.04),
    0 24px 60px -20px rgba(15,23,42,0.32),
    0 8px 20px -8px rgba(15,23,42,0.18);
  border: 1px solid rgba(15,23,42,0.06);
}
.b-art-hero::after {                                       /* subtle inner ring for premium feel */
  content: ""; position: absolute; inset: 0; border-radius: 22px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  pointer-events: none;
}
.b-art-hero canvas,
.b-art-hero .b-art-hero-media,
.b-art-hero img {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* If the image already has the title baked in, prefer 'contain' on very wide viewports
   to never crop the baked-in headline. 16:9 frames at 16:9 image = no cropping anyway. */
.b-art-hero--img img { object-fit: cover; }

.b-art-hero-cap {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 1080px;
  margin: 18px auto 0;
  padding: 0 4px;
}
.b-art-hero-cap-rule {
  flex: 0 0 32px;
  height: 2px;
  background: var(--b-amber);
  border-radius: 2px;
}
.b-art-hero-cap-txt {
  font-family: var(--b-mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--b-ink4);
  line-height: 1.5;
}

/* ── SINGLE LAYOUT ── */
.b-art-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 28px 80px;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 64px;
  align-items: start;
}
.b-art-main { min-width: 0; }

/* ── KEY TAKEAWAYS ── */
.b-takeaways {
  background: var(--b-ink);
  border-radius: var(--b-r-lg);
  padding: 28px 32px;
  margin-bottom: 36px;
}
.b-takeaways-label {
  font-family: var(--b-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--b-amber2);
  margin-bottom: 16px;
}
.b-takeaways-list { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.b-takeaways-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255,255,255,.82);
}
.b-takeaways-list li::before {
  content: '→';
  color: var(--b-amber2);
  font-family: var(--b-mono);
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── PROSE (the_content() wrapper) ── */
.b-prose {
  font-family: var(--b-prose);
  font-size: 17px;
  line-height: 1.78;
  color: var(--b-ink2);
}
.b-prose > * + * { margin-top: 1.5em; }

.b-prose h2 {
  font-family: var(--b-serif);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.2;
  color: var(--b-ink);
  margin-top: 2.4em;
  margin-bottom: .6em;
  padding-top: 24px;
  border-top: 1px solid var(--b-border);
}
.b-prose h3 {
  font-family: var(--b-serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1.25;
  color: var(--b-ink);
  margin-top: 1.8em;
  margin-bottom: .5em;
}
.b-prose p { margin-bottom: 0; }
.b-prose strong { font-weight: 700; color: var(--b-ink); }
.b-prose em { font-style: italic; }
.b-prose a { color: var(--b-amber); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.b-prose a:hover { color: var(--b-amber-dk); }

.b-prose blockquote {
  margin: 2em 0;
  padding: 24px 28px;
  border-left: 3px solid var(--b-amber);
  background: var(--b-amber-pl);
  border-radius: 0 var(--b-r) var(--b-r) 0;
}
.b-prose blockquote p {
  font-family: var(--b-prose);
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  line-height: 1.6;
  color: var(--b-ink);
  margin: 0;
}
.b-prose blockquote cite {
  display: block;
  margin-top: 12px;
  font-family: var(--b-sans);
  font-size: 12px;
  font-style: normal;
  color: var(--b-ink3);
  font-weight: 600;
}

.b-prose ul, .b-prose ol {
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.b-prose ul li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 17px;
  line-height: 1.65;
}
.b-prose ul li::before {
  content: '—';
  color: var(--b-amber);
  font-family: var(--b-mono);
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 4px;
}
.b-prose ol { counter-reset: b-ol; }
.b-prose ol li {
  counter-increment: b-ol;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.b-prose ol li::before {
  content: counter(b-ol, decimal-leading-zero);
  font-family: var(--b-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--b-amber);
  flex-shrink: 0;
  background: var(--b-amber-lt);
  padding: 2px 7px;
  border-radius: 4px;
  margin-top: 3px;
}
.b-prose hr { border: none; border-top: 1px solid var(--b-border); margin: 2.5em 0; }

/* ── PULL QUOTE ── */
.b-pull-quote {
  margin: 2.5em 0;
  padding: 32px;
  text-align: center;
  border-top: 2px solid var(--b-ink);
  border-bottom: 2px solid var(--b-ink);
  position: relative;
}
.b-pull-quote::before {
  content: '\201C';
  font-family: Georgia, serif;
  font-size: 80px;
  line-height: 1;
  color: var(--b-amber);
  position: absolute;
  top: -8px;
  left: 24px;
  opacity: .4;
}
.b-pull-quote p {
  font-family: var(--b-prose);
  font-size: 22px;
  font-weight: 600;
  font-style: italic;
  line-height: 1.45;
  color: var(--b-ink);
  letter-spacing: -.02em;
}
.b-pull-quote cite {
  display: block;
  margin-top: 10px;
  font-family: var(--b-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--b-ink3);
}

/* ── SIGNAL CARD ── */
.b-signal-card {
  background: var(--b-green-bg);
  border: 1px solid #A7F3D0;
  border-radius: var(--b-r);
  padding: 20px 24px;
  margin: 2em 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px;
  align-items: center;
}
.b-signal-card.amber { background: var(--b-amber-pl); border-color: var(--b-amber-lt); }
.b-signal-card.blue  { background: var(--b-blue-bg);  border-color: #BFDBFE; }
.b-signal-card.red   { background: var(--b-red-bg);   border-color: #FECACA; }
.b-sc-label { font-family: var(--b-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--b-green-dk); margin-bottom: 6px; }
.b-signal-card.amber .b-sc-label { color: var(--b-amber-dk); }
.b-signal-card.blue  .b-sc-label { color: var(--b-blue-dk); }
.b-signal-card.red   .b-sc-label { color: var(--b-red); }
.b-sc-text { font-family: var(--b-sans); font-size: 14px; font-weight: 600; color: var(--b-ink); line-height: 1.45; }
.b-sc-val { font-family: var(--b-mono); font-size: 28px; font-weight: 500; color: var(--b-green); text-align: right; }
.b-signal-card.amber .b-sc-val { color: var(--b-amber); }
.b-signal-card.blue  .b-sc-val { color: var(--b-blue); }
.b-signal-card.red   .b-sc-val { color: var(--b-red); }

/* ── CALLOUT BOX ── */
.b-callout { border-radius: var(--b-r); padding: 20px 24px; margin: 2em 0; display: flex; gap: 14px; align-items: flex-start; }
.b-callout.info { background: var(--b-blue-bg); border: 1px solid #BFDBFE; }
.b-callout.warn { background: var(--b-amber-pl); border: 1px solid var(--b-amber-lt); }
.b-callout.tip  { background: var(--b-green-bg); border: 1px solid #A7F3D0; }
.b-callout-icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.b-callout-title { font-family: var(--b-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 5px; }
.b-callout.info .b-callout-title { color: var(--b-blue-dk); }
.b-callout.warn .b-callout-title { color: var(--b-amber-dk); }
.b-callout.tip  .b-callout-title { color: var(--b-green-dk); }
.b-callout-text { font-family: var(--b-sans); font-size: 13px; line-height: 1.6; color: var(--b-ink3); }

/* ── DATA TABLE ── */
.b-table-wrap { overflow-x: auto; margin: 2em 0; border-radius: var(--b-r); border: 1px solid var(--b-border); box-shadow: var(--b-sh); }
.b-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.b-table thead th {
  background: var(--b-ink);
  color: rgba(255,255,255,.8);
  font-family: var(--b-mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 12px 16px;
  text-align: left;
  font-weight: 500;
}
.b-table tbody tr { border-bottom: 1px solid #F1EEE8; transition: background .1s; }
.b-table tbody tr:last-child { border-bottom: none; }
.b-table tbody tr:hover { background: #FAFAF8; }
.b-table td { padding: 12px 16px; font-size: 13px; color: var(--b-ink2); }
.b-table td:first-child { font-family: var(--b-mono); font-weight: 500; color: var(--b-ink); }
.b-td-pos { font-family: var(--b-mono); font-weight: 600; color: var(--b-green); }
.b-td-neg { font-family: var(--b-mono); font-weight: 600; color: var(--b-red); }
.b-td-amb { font-family: var(--b-mono); font-weight: 600; color: var(--b-amber); }

/* ── INLINE CHART ── */
.b-inline-chart { background: #0F172A; border-radius: var(--b-r); overflow: hidden; margin: 2em 0; box-shadow: var(--b-sh-md); }
.b-inline-chart-hd { padding: 14px 18px 0; display: flex; align-items: center; justify-content: space-between; }
.b-inline-chart-title { font-family: var(--b-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.b-inline-chart canvas { display: block; width: 100%; height: 200px; }
.b-inline-chart-ft { padding: 8px 18px 12px; display: flex; gap: 16px; }
.b-chart-leg { display: flex; align-items: center; gap: 6px; font-family: var(--b-mono); font-size: 10px; color: rgba(255,255,255,.45); }
.b-leg-dot { width: 8px; height: 3px; border-radius: 2px; }
.b-leg-price { background: rgba(148,163,184,.6); }
.b-leg-sma { background: #F59E0B; }

/* ── ARTICLE SIDEBAR ── */
.b-art-sidebar { position: sticky; top: 80px; display: flex; flex-direction: column; gap: 16px; }

/* TOC */
.b-toc-list { list-style: none; padding: 8px 0; }
.b-toc-item { border-left: 2px solid var(--b-border); margin-left: 18px; transition: border-color .15s; }
.b-toc-item.active { border-color: var(--b-amber); }
.b-toc-link { display: block; padding: 7px 14px; font-size: 12px; line-height: 1.4; color: var(--b-ink3); text-decoration: none; transition: color .15s; }
.b-toc-link:hover { color: var(--b-amber); }
.b-toc-item.active .b-toc-link { color: var(--b-ink); font-weight: 600; }
.b-toc-empty { padding: 14px 18px; font-size: 12px; color: var(--b-ink4); }

/* Live signal sidebar card */
.b-live-card { background: var(--b-ink); border-radius: var(--b-r); overflow: hidden; }
.b-live-hd { padding: 14px 18px 12px; border-bottom: 1px solid rgba(255,255,255,.08); display: flex; justify-content: space-between; align-items: center; }
.b-live-title { font-family: var(--b-serif); font-size: 13px; font-weight: 700; color: #fff; }
.b-live-body { padding: 16px 18px; }
.b-live-sym { font-family: var(--b-mono); font-size: 22px; font-weight: 500; color: var(--b-amber2); margin-bottom: 4px; }
.b-live-detail { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 14px; line-height: 1.5; font-family: var(--b-mono); }
.b-live-cta { display: block; background: var(--b-amber); color: var(--b-ink); text-align: center; padding: 10px; border-radius: var(--b-r-sm); font-size: 12px; font-weight: 700; text-decoration: none; transition: opacity .15s; }
.b-live-cta:hover { opacity: .9; }

/* ── AUTHOR BIO ── */
.b-author-bio {
  background: var(--b-white);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r-lg);
  padding: 28px 32px;
  margin-top: 48px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.b-bio-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--b-amber) 0%, var(--b-amber2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--b-serif);
  font-weight: 800;
  font-size: 20px;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.b-bio-avatar img { width: 100%; height: 100%; object-fit: cover; }
.b-bio-name { font-family: var(--b-serif); font-size: 16px; font-weight: 700; color: var(--b-ink); margin-bottom: 4px; }
.b-bio-role { font-size: 12px; color: var(--b-amber); font-weight: 600; margin-bottom: 10px; }
.b-bio-text { font-size: 13px; line-height: 1.65; color: var(--b-ink3); }

/* ── RELATED ARTICLES ── */
.b-related { background: var(--b-off); border-top: 1px solid var(--b-border); padding: 56px 28px; }
.b-related-inner { max-width: 1200px; margin: 0 auto; }
.b-related-label { font-family: var(--b-mono); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--b-ink4); margin-bottom: 28px; }
.b-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.b-rel-card {
  background: var(--b-white);
  border: 1px solid var(--b-border);
  border-radius: var(--b-r);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
  color: inherit;
  display: block;
}
.b-rel-card:hover { box-shadow: var(--b-sh-md); transform: translateY(-2px); }
.b-rel-thumb { height: 120px; position: relative; overflow: hidden; background: #0F172A; }
.b-rel-thumb canvas,
.b-rel-thumb .b-chart-empty { width: 100%; height: 100%; display: block; }
.b-rel-body { padding: 16px 18px; }
.b-rel-hl { font-family: var(--b-serif); font-size: 14px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; color: var(--b-ink); margin-bottom: 6px; margin-top: 8px; }
.b-rel-meta { font-size: 11px; color: var(--b-ink4); }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .b-hero-inner { grid-template-columns: 1fr; }
  .b-hero-stats { display: none; }
  .b-feat-card { grid-template-columns: 1fr; }
  .b-feat-stats { display: none; }
}
@media (max-width: 980px) {
  .b-body { grid-template-columns: 1fr; }
  .b-sidebar { position: static; }
  .b-art-wrap { grid-template-columns: 1fr; gap: 40px; }
  .b-art-sidebar { position: static; }
  .b-related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .b-nav-links { display: none; }
  .b-hero { padding: calc(var(--nav-h, 58px) + 24px) 20px 80px; }
  .b-feat-outer { padding: 0 16px; }
  .b-body { padding: 0 16px; margin-top: 24px; }
  .b-card { grid-template-columns: 120px 1fr; }
  .b-art-hd { padding: calc(var(--nav-h, 58px) + 20px) 20px 44px; }
  .b-art-hero-section { padding: 0 16px; margin-top: -24px; }
  .b-art-hero { border-radius: 16px; }
  .b-art-hero-cap { padding: 0 4px; margin-top: 14px; }
  .b-art-wrap { padding: 32px 20px 60px; }
  .b-art-meta-bar { gap: 14px; }
  .b-art-share { display: none; }
  .b-related-grid { grid-template-columns: 1fr; }
  .b-author-bio { flex-direction: column; }
}