/* ===========================================================================
   Nirilivilla blog, EXACT port of the PropFirmPickr data-study blog design.
   Verbatim copy of PFP's blog CSS (globals.css) with only the next/font CSS
   vars swapped for the self-hosted families below. All --ba-* colour tokens,
   spacing, layout and the [data-blog-theme] dark/light switch are unchanged,
   so this renders identically to propfirmpickr's blog. Enqueued on blog pages
   only. Default theme is DARK (matches PFP); the .ba-switch toggle flips it.
=========================================================================== */
@font-face{font-family:'DM Sans';font-style:normal;font-weight:100 1000;font-display:swap;src:url(../fonts/dm-sans.woff2) format('woff2');}
@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/outfit.woff2) format('woff2');}

.blog-prose { color: #eef1f4; font-size: 1rem; line-height: 1.6; font-family: 'DM Sans', "Segoe UI", system-ui, sans-serif; letter-spacing: 0; }
.blog-prose > * + * { margin-top: 1.25rem; }

.blog-prose .lead { font-size: 1rem; line-height: 1.6; color: #ffffff; font-weight: 400; margin-bottom: 1.25rem; }

/* Section headings match PropFirmMatch: Inter 24px / 700 for h2 (only the
   H1 title uses Poppins). No underline rule; scroll-margin keeps them clear
   of the sticky header when jumped to from the table of contents. */
.blog-prose h2 {
  font-family: 'DM Sans', "Segoe UI", system-ui, sans-serif;
  font-size: 1.5rem; line-height: 1.33; font-weight: 700; color: #ffffff;
  letter-spacing: -0.005em; margin-top: 2.5rem; margin-bottom: 0.75rem;
  scroll-margin-top: 96px;
}
.blog-prose h3 {
  font-family: 'DM Sans', "Segoe UI", system-ui, sans-serif;
  font-size: 1.125rem; line-height: 1.45; font-weight: 600; color: #ffffff;
  letter-spacing: 0; margin-top: 1.75rem; margin-bottom: 0.5rem;
  scroll-margin-top: 96px;
}
.blog-prose p { margin: 1.25rem 0; }
.blog-prose a {
  color: #8078f2; text-decoration: none; font-weight: 500;
  border-bottom: 1px solid rgba(128,120,242,0.35);
  transition: color .15s ease, border-color .15s ease;
}
.blog-prose a:hover { color: #a78bfa; border-bottom-color: #a78bfa; }
.blog-prose strong { color: #ffffff; font-weight: 700; }
.blog-prose em { color: #e2e8f0; }

.blog-prose ul, .blog-prose ol { margin: 1.05rem 0; padding-left: 1.4rem; }
.blog-prose ul { list-style: none; padding-left: 0.25rem; }
.blog-prose ul > li { position: relative; padding-left: 1.5rem; margin: 0.5rem 0; line-height: 1.75; }
.blog-prose ul > li::before {
  content: ""; position: absolute; left: 0.1rem; top: 0.68em;
  width: 6px; height: 6px; border-radius: 999px; background: #8078f2;
}
.blog-prose ol { list-style: decimal; }
.blog-prose ol > li { margin: 0.5rem 0; padding-left: 0.35rem; line-height: 1.75; }
.blog-prose ol > li::marker { color: #8078f2; font-weight: 700; }

.blog-prose blockquote {
  margin: 1.5rem 0; padding: 0.85rem 1.25rem;
  border-left: 3px solid #8078f2; background: rgba(128,120,242,0.06);
  border-radius: 0 0.5rem 0.5rem 0; color: #e2e8f0;
}
.blog-prose blockquote p { margin: 0.4rem 0; }

.blog-prose code {
  font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace;
  font-size: 0.85em; background: rgba(128,120,242,0.12); color: #a78bfa;
  padding: 0.15em 0.45em; border-radius: 0.375rem; border: 1px solid rgba(128,120,242,0.22);
}

.blog-prose table {
  width: 100%; border-collapse: collapse; margin: 1.75rem 0; font-size: 0.95rem;
  border: 1px solid rgba(255,255,255,0.10); border-radius: 0.75rem; overflow: hidden;
}
.blog-prose thead th {
  background: rgba(128,120,242,0.10); color: #ffffff; font-weight: 600; text-align: left;
  padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.12);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em;
}
.blog-prose tbody td {
  padding: 0.7rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.06);
  color: #cbd5e1; vertical-align: top;
}
.blog-prose tbody tr:nth-child(even) { background: rgba(255,255,255,0.02); }
.blog-prose tbody tr:hover { background: rgba(128,120,242,0.04); }
.blog-prose tbody tr:last-child td { border-bottom: none; }

.blog-prose hr { border: 0; border-top: 1px solid rgba(255,255,255,0.10); margin: 2.5rem 0; }

@media (max-width: 640px) {
  .blog-prose { font-size: 1rem; }
  .blog-prose .lead { font-size: 1rem; }
  .blog-prose h2 { font-size: 1.35rem; }
  .blog-prose table { font-size: 0.82rem; display: block; overflow-x: auto; white-space: nowrap; }
  .blog-prose thead th, .blog-prose tbody td { padding: 0.5rem 0.65rem; }
}

/* ---------------------------------------------------------------------------
   Data-study editorial article layout (.blog-article)
   Inter for text, DM Mono for data/eyebrows; a near-black zinc dark theme
   with a spring-green accent + a white light theme, toggled by the
   [data-blog-theme] attribute (BlogThemeToggle). Own implementation.
--------------------------------------------------------------------------- */
/* Exact SimplyCodes article palette (--ar-* tokens from their blog.css). */
.blog-article{
  --ba-bg:#000000; --ba-layer:#09090b; --ba-inset:#040405; --ba-border:#27272a; --ba-border-2:#18181b;
  --ba-ink:#fafafa; --ba-2:#d4d4d8; --ba-3:#a1a1aa; --ba-accent:#8078f2; --ba-on:#ffffff;
  --ba-callout-bg:#09090b; --ba-callout-line:#3f3f46; --ba-grid:rgba(255,255,255,.06);
  background:var(--ba-bg); color:var(--ba-ink);
  font-family:'DM Sans', system-ui, -apple-system, sans-serif;
  font-feature-settings:normal;
  transition:background .25s ease, color .25s ease;
}
.blog-article[data-blog-theme="light"]{
  --ba-bg:#fdfcfc; --ba-layer:#ffffff; --ba-inset:#f4f4f5; --ba-border:#e4e4e7; --ba-border-2:#ececed;
  --ba-ink:#18181b; --ba-2:#52525b; --ba-3:#71717a; --ba-accent:#4f46e5; --ba-on:#ffffff;
  --ba-callout-bg:#fafafa; --ba-callout-line:#d4d4d8; --ba-grid:rgba(0,0,0,.05);
}
.ba-wrap{max-width:768px; margin:0 auto; padding:26px 22px 84px;}
.ba-topline{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:30px;}
.ba-crumb{display:flex; align-items:center; font-size:12.5px; color:var(--ba-3);}
.ba-crumb a{display:inline-flex; align-items:center; color:var(--ba-3); text-decoration:none;}
.ba-crumb a:hover{color:var(--ba-accent);}
.ba-crumb .sep{margin:0 8px; opacity:.5;}
.ba-toggle{display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:12.5px; font-weight:600;
  color:var(--ba-2); background:var(--ba-layer); border:1px solid var(--ba-border); border-radius:999px;
  padding:6px 13px; cursor:pointer; transition:color .15s, border-color .15s;}
.ba-toggle:hover{color:var(--ba-ink); border-color:var(--ba-accent);}
.ba-eyebrow{font-family:'DM Sans', ui-monospace, monospace; font-size:.694rem; letter-spacing:.125em;
  text-transform:uppercase; color:var(--ba-3); font-weight:600; margin:0 0 1rem;}
.ba-title{font-family:'DM Sans', sans-serif; font-size:clamp(2rem, 5.4vw, 2.986rem); line-height:1.16;
  letter-spacing:-.02em; font-weight:500; margin:0 0 1rem; text-wrap:balance; color:var(--ba-ink);}
.ba-dek{font-size:1.2rem; line-height:1.46; color:var(--ba-2); max-width:60ch; margin:0 0 2rem; font-weight:400;}
.ba-meta{display:flex; flex-wrap:wrap; align-items:center; gap:9px; font-family:'DM Sans', sans-serif;
  font-size:13px; color:var(--ba-3);}
.meta-dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6; flex-shrink:0;}
.ba-cover{aspect-ratio:1200/630; border-radius:14px; overflow:hidden; border:1px solid var(--ba-border);
  margin:26px 0 4px; background:var(--ba-inset);}
.ba-cover img{width:100%; height:100%; object-fit:cover; display:block;}
.ba-rule{border:0; border-top:1px solid var(--ba-border); margin:26px 0;}
.ba-tags{display:flex; flex-wrap:wrap; gap:8px; margin:46px 0 0; padding-top:22px; border-top:1px solid var(--ba-border);}
.ba-tag{font-family:'DM Sans', monospace; font-size:12px; color:var(--ba-3);
  background:var(--ba-inset); border:1px solid var(--ba-border); border-radius:6px; padding:4px 9px;}
.ba-back{display:inline-block; margin-top:32px; font-size:14px; font-weight:600; color:var(--ba-accent); text-decoration:none;}
.ba-back:hover{text-decoration:underline;}

/* prose re-themed to the EXACT SimplyCodes article type scale (1.2 modular:
   body 1rem, h3 1.728rem, h2 2.074rem; weights 400/600; --sp-* rhythm). */
.blog-article .blog-prose{color:var(--ba-ink); font-size:1rem; line-height:1.75; font-family:'DM Sans', sans-serif; letter-spacing:0;}
.blog-article .blog-prose .lead{font-size:1.2rem; line-height:1.55; color:var(--ba-ink); font-weight:400; margin-bottom:1.5rem;}
.blog-article .blog-prose h2{font-family:'DM Sans', sans-serif; font-size:2.074rem; line-height:1.2; font-weight:600;
  letter-spacing:-.01em; color:var(--ba-ink); margin:3rem 0 1rem; padding:0; border:0; scroll-margin-top:96px;}
.blog-article .blog-prose h3{font-family:'DM Sans', sans-serif; font-size:1.728rem; line-height:1.16; font-weight:600;
  letter-spacing:0; color:var(--ba-ink); margin:2rem 0 .75rem; scroll-margin-top:96px;}
.blog-article .blog-prose p{margin:0 0 1.5rem; color:var(--ba-ink);}
.blog-article .blog-prose a{color:var(--ba-ink); text-decoration:underline; text-decoration-color:var(--ba-border);
  text-underline-offset:2px; font-weight:500; transition:text-decoration-color .15s ease;}
.blog-article .blog-prose a:hover{text-decoration-color:var(--ba-accent);}
.blog-article .blog-prose strong{color:var(--ba-ink); font-weight:700;}
.blog-article .blog-prose em{color:var(--ba-2);}
.blog-article .blog-prose ul{list-style:none; padding-left:.2rem; margin:1.2rem 0;}
.blog-article .blog-prose ul>li{position:relative; padding-left:1.4rem; margin:.5rem 0; line-height:1.72;}
.blog-article .blog-prose ul>li::before{content:""; position:absolute; left:.1rem; top:.7em; width:6px; height:6px; border-radius:999px; background:var(--ba-accent);}
.blog-article .blog-prose ol{margin:1.2rem 0; padding-left:1.3rem;}
.blog-article .blog-prose ol>li{margin:.5rem 0; line-height:1.72;}
.blog-article .blog-prose ol>li::marker{color:var(--ba-accent); font-weight:700;}
.blog-article .blog-prose blockquote{border-left:3px solid var(--ba-accent); background:color-mix(in srgb, var(--ba-accent) 8%, transparent);
  border-radius:0 8px 8px 0; padding:14px 18px; margin:1.6rem 0; color:var(--ba-2);}
.blog-article .blog-prose code{font-family:ui-monospace, "SF Mono", Menlo, Monaco, Consolas, monospace; font-size:.85em; background:var(--ba-inset);
  border:1px solid var(--ba-border); border-radius:5px; padding:.12em .4em; color:var(--ba-accent);}
/* Tables, exact SimplyCodes spec: DM Mono uppercase header, sharp corners. */
.blog-article .blog-prose table{width:100%; border-collapse:collapse; margin:2rem 0; font-size:.833rem;
  border:1px solid var(--ba-border); border-radius:0; overflow:visible;}
.blog-article .blog-prose thead th{font-family:'DM Sans', sans-serif; font-size:.694rem; font-weight:500;
  text-transform:uppercase; letter-spacing:.125em; color:var(--ba-3); padding:.75rem 1rem;
  border-bottom:1px solid var(--ba-border); text-align:left; background:var(--ba-inset);}
.blog-article .blog-prose tbody td{padding:.75rem 1rem; border-bottom:1px solid var(--ba-border); color:var(--ba-2);
  vertical-align:top; line-height:1.5rem; font-size:.833rem;}
.blog-article .blog-prose tbody tr:last-child td{border-bottom:0;}
.blog-article .blog-prose hr{border:0; border-top:1px solid var(--ba-border); margin:2.4rem 0;}
@media (max-width:560px){ .ba-title{font-size:30px;} .blog-article .blog-prose{font-size:16px;} .blog-article .blog-prose h2{font-size:23px;} }

/* ---------------------------------------------------------------------------
   Research & Insights hub (/blogs index), "data-study" landing.
   Shares the .blog-article theme vars (--ba-*) so the same light/dark toggle
   drives it. Wider 1120px measure for the card grid. Own implementation in
   the same visual language as the article template.
--------------------------------------------------------------------------- */
.bh-wrap{max-width:1300px; margin:0 auto; padding:26px 1.5rem 96px;}
.bh-topline{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:30px;}

/* Hero */
.bh-hero{padding:8px 0 34px; border-bottom:1px solid var(--ba-border); margin-bottom:38px;}
/* Hub hero, exact SimplyCodes .blog-tagline-* spec: 2.488rem/600 title,
   560px measure; 1.2rem grey desc at 480px. */
.bh-h1{font-family:'DM Sans', sans-serif; font-size:clamp(1.9rem, 5vw, 2.488rem); line-height:1.2;
  letter-spacing:-.02em; font-weight:600; margin:8px 0 .75rem; color:var(--ba-ink); text-wrap:balance; max-width:560px;}
.bh-h1 .dot{color:var(--ba-accent);}
.bh-lede{font-size:1.2rem; line-height:1.46; color:var(--ba-3); max-width:480px; margin:0 0 26px;}
.bh-stats{display:flex; flex-wrap:wrap; gap:10px;}
.bh-stat{display:inline-flex; align-items:baseline; gap:8px; font-family:'DM Sans', ui-monospace, monospace;
  font-size:12.5px; letter-spacing:.01em; color:var(--ba-2); background:var(--ba-inset);
  border:1px solid var(--ba-border); border-radius:999px; padding:7px 15px;}
.bh-stat b{font-size:15px; color:var(--ba-accent); font-weight:500;}

/* Featured hero card, matches .hero-card: image left 55 / body right 45, fixed dark */
.bh-lead{display:grid; grid-template-columns:55fr 45fr; border-radius:1rem; overflow:hidden; background:#040405;
  margin:1.5rem 0 0; text-decoration:none; color:inherit;}
.bh-lead-media{position:relative; overflow:hidden; background:#09090b;}
.bh-lead-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.bh-lead:hover .bh-lead-media img{transform:scale(1.03);}
.bh-lead-body{padding:3rem 2rem 2rem; display:flex; flex-direction:column; gap:1rem; justify-content:center; color:#fff;}
.bh-lead-title{font-family:'DM Sans', sans-serif; font-size:2.074rem; line-height:2.5rem; letter-spacing:-.01em;
  font-weight:600; color:#f4f4f5; margin:0;}
.bh-lead-foot{display:flex; align-items:center; gap:.6rem; padding-top:1rem; font-size:.75rem; color:#a1a1aa;}
.bh-lead-foot img{width:28px; height:28px; border-radius:999px; object-fit:cover; background:#09090b; border:1px solid #27272a;}

/* Category eyebrow + meta (author · date), shared by lead + cards */
.bh-kicker{display:inline-flex; align-items:center; gap:.3rem; font-family:'DM Sans', sans-serif; font-size:.694rem;
  font-weight:500; letter-spacing:.02em; text-transform:uppercase; color:var(--ba-accent);}
.bh-lead .bh-kicker{color:#8078f2;}
.bh-meta{display:flex; align-items:center; gap:.5rem; font-size:.694rem; color:var(--ba-3);}
.bh-meta .dot{width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.6;}

/* Category filter bar, matches .category-filter-bar / .filter-btn (outlined pills) */
.bh-filter{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; padding-top:1.5rem; margin-top:1.5rem;
  border-top:1px solid var(--ba-border-2);}
.bh-pill{display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; border-radius:40rem;
  font-family:'DM Sans', sans-serif; font-size:.833rem; font-weight:500; color:var(--ba-3); background:transparent;
  border:1px solid var(--ba-border); text-decoration:none; white-space:nowrap; cursor:pointer;
  transition:color .15s ease, border-color .15s ease;}
.bh-pill:hover{color:var(--ba-ink); border-color:var(--ba-2);}
.bh-pill.is-active{color:var(--ba-accent); border-color:var(--ba-accent); font-weight:600;}

/* Section header, matches .section-header (bottom rule) */
.bh-sec{display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:1rem; margin:3rem 0 2rem;
  border-bottom:1px solid var(--ba-border-2);}
.bh-sec-title{display:flex; align-items:center; gap:.5rem; font-family:'DM Sans', sans-serif; font-size:1.2rem;
  font-weight:600; letter-spacing:-.01em; color:var(--ba-ink); margin:0;}
.bh-sec-note{font-size:.833rem; color:var(--ba-3);}

/* Post-card grid, matches .post-grid--3: borderless cards, big row gap */
.bh-grid{display:grid; grid-template-columns:repeat(3, 1fr); column-gap:2rem; row-gap:3rem;}
.bh-card{display:flex; flex-direction:column; background:transparent; text-decoration:none; color:inherit; min-width:0;}
.bh-card-media{aspect-ratio:16/9; overflow:hidden; background:var(--ba-inset); border-radius:.5rem;
  border:1px solid var(--ba-border); position:relative;}
.bh-card-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .3s ease;}
.bh-card:hover .bh-card-media img{transform:scale(1.04);}
.bh-card-body{padding:.75rem 0 0; display:flex; flex-direction:column; gap:.5rem; flex:1;}
.bh-card-title{font-family:'DM Sans', sans-serif; font-size:1.2rem; line-height:1.6rem; font-weight:500;
  letter-spacing:0; color:var(--ba-2); margin:0; transition:color .15s ease; display:-webkit-box; -webkit-line-clamp:3;
  -webkit-box-orient:vertical; overflow:hidden;}
.bh-card:hover .bh-card-title{color:var(--ba-ink);}
.bh-card-foot{margin-top:auto; padding-top:.5rem;}

/* CTA band */
.bh-cta{margin:60px 0 0; border:1px solid var(--ba-border); border-radius:20px; background:var(--ba-inset);
  padding:38px 36px; display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:center;}
.bh-cta-eyebrow{font-family:'DM Sans', monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ba-accent); font-weight:500; margin:0 0 12px;}
.bh-cta-title{font-family:'DM Sans', sans-serif; font-size:clamp(24px,3vw,32px); line-height:1.1;
  letter-spacing:-.025em; font-weight:600; color:var(--ba-ink); margin:0 0 10px; text-wrap:balance;}
.bh-cta-sub{color:var(--ba-2); line-height:1.55; margin:0;}
.bh-cta-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-start;}
.bh-btn{display:inline-flex; align-items:center; gap:8px; font-family:'DM Sans', sans-serif; font-size:14px;
  font-weight:600; text-decoration:none; border-radius:11px; padding:13px 20px; transition:transform .15s ease, opacity .15s ease;}
.bh-btn:hover{transform:translateY(-1px);}
.bh-btn-primary{background:var(--ba-accent); color:var(--ba-on);}
.bh-btn-primary:hover{opacity:.9;}
.bh-btn-ghost{background:transparent; color:var(--ba-ink); border:1px solid var(--ba-border);}
.bh-btn-ghost:hover{border-color:var(--ba-accent);}

/* "Understand the engine", methodology explainer cards */
.bh-engine{margin:56px 0 0;}
.bh-engine-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; margin-top:20px;}
.bh-ecard{border:1px solid var(--ba-border); border-radius:14px; background:var(--ba-layer); padding:22px 22px 24px;
  text-decoration:none; display:flex; flex-direction:column; transition:border-color .18s ease, transform .18s ease;}
.bh-ecard:hover{border-color:var(--ba-accent); transform:translateY(-2px);}
.bh-ecard-num{font-family:'DM Sans', monospace; font-size:12px; color:var(--ba-accent); font-weight:500; margin-bottom:14px;}
.bh-ecard-title{font-family:'DM Sans', sans-serif; font-size:18px; font-weight:600; letter-spacing:-.01em;
  color:var(--ba-ink); margin:0 0 8px;}
.bh-ecard-sub{font-size:13.5px; line-height:1.5; color:var(--ba-3); margin:0 0 16px; flex:1;}
.bh-ecard-go{font-family:'DM Sans', monospace; font-size:12.5px; color:var(--ba-accent); font-weight:500;}

/* Responsive */
@media (max-width:900px){
  .bh-lead{grid-template-columns:1fr;}
  .bh-lead-media{aspect-ratio:16/9;}
  .bh-grid{grid-template-columns:repeat(2, 1fr); row-gap:2.5rem;}
  .bh-cta{grid-template-columns:1fr;}
  .bh-engine-grid{grid-template-columns:1fr;}
}
@media (max-width:600px){
  .bh-wrap{padding:20px 16px 72px;}
  .bh-grid{grid-template-columns:1fr; row-gap:2rem;}
  .bh-lead-body{padding:1.75rem 1.5rem;}
  /* Comfortable touch targets on small screens (>=44px tall). */
  .bh-pill{padding-top:12px; padding-bottom:12px;}
  .ba-toggle{padding-top:11px; padding-bottom:11px;}
}

/* Keyboard focus ring, on-brand, for the editorial blog surfaces. */
.blog-article a:focus-visible,
.blog-article button:focus-visible{outline:2px solid var(--ba-accent); outline-offset:2px;}

/* ---------------------------------------------------------------------------
   Data-study article component kit. Rendered inside .blog-article .blog-prose
   from admin/seed body_html, cite-blocks, callouts, pull-quotes, key-stat
   grids, pure-CSS bar charts, figures. Same visual language as the SimplyCodes
   data-study; own implementation, driven entirely by the --ba-* theme vars so
   it works in both light and dark.
--------------------------------------------------------------------------- */

/* "Canonical stat" cite block, exact SimplyCodes spec: minimal padded block
   with a bottom rule, a small grey mono label, and a pale-green stat box. */
.blog-article .blog-prose .cite-block{padding:1rem 0; margin:30px 0; border-bottom:1px solid var(--ba-border-2);
  display:flex; flex-direction:column; gap:12px;}
.blog-article .blog-prose .cite-block-label{align-self:flex-start; font-family:'DM Sans', monospace;
  font-size:.694rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ba-3);}
.blog-article .blog-prose .stat-callout{margin:0; padding:.75rem 1rem; font-family:'DM Sans', sans-serif;
  font-size:1rem; line-height:1.5; font-weight:500; color:var(--ba-ink);
  background:color-mix(in srgb, var(--ba-accent) 6%, var(--ba-bg));
  border:1px solid color-mix(in srgb, var(--ba-accent) 32%, transparent); border-radius:.5rem;}
.blog-article .blog-prose .cite-block cite{display:block; font-style:normal; font-family:'DM Sans', monospace;
  font-size:12.5px; color:var(--ba-3);}

/* Key-takeaway callout box */
.blog-article .blog-prose .callout{background:color-mix(in srgb, var(--ba-accent) 7%, var(--ba-inset));
  border:1px solid var(--ba-border); border-left:3px solid var(--ba-accent); border-radius:12px;
  padding:18px 22px; margin:30px 0;}
.blog-article .blog-prose .callout-label{display:flex; align-items:center; gap:7px; font-family:'DM Sans', monospace;
  font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ba-accent); margin:0 0 9px;}
.blog-article .blog-prose .callout > p{margin:.4rem 0; color:var(--ba-ink);}
.blog-article .blog-prose .callout > p:first-of-type{margin-top:0;}
.blog-article .blog-prose .callout > p:last-child{margin-bottom:0;}

/* Editorial pull-quote */
.blog-article .blog-prose .pullquote{margin:38px 0; padding:6px 0 6px 30px; border-left:3px solid var(--ba-accent);
  font-family:'DM Sans', sans-serif; font-size:clamp(20px,2.6vw,26px); line-height:1.3; font-weight:600;
  letter-spacing:-.02em; color:var(--ba-ink);}
.blog-article .blog-prose .pullquote footer{margin-top:14px; font-family:'DM Sans', monospace;
  font-size:12.5px; font-weight:400; letter-spacing:0; color:var(--ba-3);}

/* Key-stat grid, big number cards ("Key findings at a glance") */
.blog-article .blog-prose .stat-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:14px; margin:30px 0;}
.blog-article .blog-prose .stat-card{background:var(--ba-inset); border:1px solid var(--ba-border);
  border-radius:14px; padding:20px 20px 18px;}
.blog-article .blog-prose .stat-card .num{display:block; font-family:'DM Sans', sans-serif; font-size:38px;
  line-height:1; font-weight:800; letter-spacing:-.03em; color:var(--ba-accent);}
.blog-article .blog-prose .stat-card .lbl{display:block; margin-top:9px; font-size:13.5px; line-height:1.42; color:var(--ba-3);}

/* Pure-CSS horizontal bar chart (a figure, no external embed) */
.blog-article .blog-prose .ba-chart{margin:30px 0; border:1px solid var(--ba-border); border-radius:14px;
  background:var(--ba-layer); padding:22px 24px;}
.blog-article .blog-prose .ba-chart-title{font-family:'DM Sans', sans-serif; font-size:15.5px; font-weight:700;
  letter-spacing:-.01em; color:var(--ba-ink); margin:0 0 18px;}
.blog-article .blog-prose .ba-bar{margin:13px 0;}
.blog-article .blog-prose .ba-bar-top{display:flex; justify-content:space-between; gap:12px; margin-bottom:6px;
  font-size:13px; color:var(--ba-2);}
.blog-article .blog-prose .ba-bar-top b{font-family:'DM Sans', monospace; font-weight:500; color:var(--ba-ink);}
.blog-article .blog-prose .ba-bar-track{height:9px; border-radius:999px; background:var(--ba-inset); overflow:hidden;}
.blog-article .blog-prose .ba-bar-fill{height:100%; border-radius:999px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--ba-accent) 78%, transparent), var(--ba-accent));}
.blog-article .blog-prose .ba-chart figcaption{margin:16px 0 0;}

/* Figures (charts/images) with captions */
.blog-article .blog-prose figure{margin:30px 0;}
.blog-article .blog-prose figure img{width:100%; height:auto; display:block; border-radius:14px;
  border:1px solid var(--ba-border);}
.blog-article .blog-prose figcaption{margin-top:11px; font-size:12.5px; line-height:1.5; color:var(--ba-3);
  text-align:center;}

/* "Key findings" intro list, bold lead-in stat on each line */
.blog-article .blog-prose .findings{list-style:none; padding:0; margin:24px 0; display:flex; flex-direction:column; gap:2px;}
.blog-article .blog-prose .findings > li{position:relative; padding:11px 0 11px 22px; margin:0;
  border-top:1px solid var(--ba-border); line-height:1.55;}
.blog-article .blog-prose .findings > li:last-child{border-bottom:1px solid var(--ba-border);}
.blog-article .blog-prose .findings > li::before{content:""; position:absolute; left:2px; top:1.05em; width:7px; height:7px;
  border-radius:999px; background:var(--ba-accent);}
.blog-article .blog-prose .findings > li b, .blog-article .blog-prose .findings > li strong{color:var(--ba-accent); font-weight:700;}

@media (max-width:560px){
  .blog-article .blog-prose .cite-block{padding:16px 18px;}
  .blog-article .blog-prose .stat-callout{font-size:19px;}
  .blog-article .blog-prose .stat-card .num{font-size:32px;}
}

/* ---------------------------------------------------------------------------
   Data-study article chrome, wider doc with a sticky TOC rail, a dual byline
   (written by / reviewed by) and share tools. Header + cover run full width;
   the body is a [TOC | prose] grid that collapses to a mobile TOC accordion.
--------------------------------------------------------------------------- */
.ba-doc{max-width:1024px; margin:0 auto; padding:26px 22px 88px;}
.ba-head{max-width:840px;}

/* Byline + share row */
.ba-byline{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px;
  margin:24px 0 0; padding-top:22px; border-top:1px solid var(--ba-border);}
.ba-authors{display:flex; flex-wrap:wrap; gap:14px 26px;}
.ba-author{display:flex; align-items:center; gap:11px;}
.ba-author-avatar{width:36px; height:36px; border-radius:40rem; overflow:hidden; display:grid; place-items:center;
  flex-shrink:0; background:var(--ba-inset); border:1px solid var(--ba-border); color:var(--ba-accent);}
.ba-author-avatar--check{background:color-mix(in srgb, var(--ba-accent) 16%, var(--ba-bg)); border-color:color-mix(in srgb, var(--ba-accent) 40%, transparent); color:var(--ba-accent);}
.ba-author-avatar--mono{background:color-mix(in srgb, var(--ba-accent) 16%, var(--ba-bg)); border-color:color-mix(in srgb, var(--ba-accent) 38%, transparent); color:var(--ba-accent); font-size:12.5px; font-weight:600; letter-spacing:.02em;}
.ba-author-info{display:flex; flex-direction:column; line-height:1.3;}
.ba-author-label{font-family:'DM Sans', sans-serif; font-size:.694rem; line-height:1rem; color:var(--ba-3);}
.ba-author-name{font-size:.833rem; font-weight:500; color:var(--ba-ink);}

.ba-share{display:flex; gap:8px;}
.share-icon-btn{width:36px; height:36px; display:grid; place-items:center; border-radius:9px; background:var(--ba-inset);
  border:1px solid var(--ba-border); color:var(--ba-3); cursor:pointer; padding:0;
  transition:color .15s ease, border-color .15s ease, transform .15s ease;}
.share-icon-btn:hover{color:var(--ba-ink); border-color:var(--ba-accent); transform:translateY(-1px);}
.share-icon-btn.is-copied{color:var(--ba-accent); border-color:var(--ba-accent);}

/* Body grid: sticky TOC + prose */
.ba-body{display:grid; grid-template-columns:216px minmax(0, 1fr); gap:48px; align-items:start; margin-top:30px;}
.ba-main{min-width:0;}

.toc-sidebar{position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto;}
.toc-label{display:flex; align-items:center; gap:8px; margin:0 0 12px; font-family:'DM Sans', monospace;
  font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--ba-3);}
.toc-label svg{flex-shrink:0;}
/* TOC, exact SimplyCodes spec: border-bottom rows, filled active state. */
.toc-nav{display:flex; flex-direction:column;}
.toc-link{display:block; padding:.75rem 1rem; border-bottom:1px solid var(--ba-border-2);
  font-size:.833rem; line-height:1.25rem; color:var(--ba-2); text-decoration:none;
  transition:color .15s ease, background .15s ease;}
.toc-link:hover{color:var(--ba-ink);}
.toc-link--h3{padding-left:1.75rem;}
.toc-link.is-active{color:var(--ba-ink); background:var(--ba-inset);}

/* Mobile TOC accordion */
.toc-mobile{display:none; margin:0 0 26px;}
.toc-mobile-toggle{display:flex; align-items:center; gap:9px; width:100%; padding:13px 16px; background:var(--ba-inset);
  border:1px solid var(--ba-border); border-radius:12px; color:var(--ba-ink); font:inherit; font-size:14px;
  font-weight:600; cursor:pointer;}
.toc-mobile-toggle .caret{margin-left:auto; transition:transform .25s ease;}
.toc-mobile.is-open .toc-mobile-toggle{border-radius:12px 12px 0 0;}
.toc-mobile.is-open .toc-mobile-toggle .caret{transform:rotate(180deg);}
.toc-mobile-nav{display:none; flex-direction:column; padding:6px 16px 12px; background:var(--ba-inset);
  border:1px solid var(--ba-border); border-top:0; border-radius:0 0 12px 12px;}
.toc-mobile.is-open .toc-mobile-nav{display:flex;}
.toc-mobile .toc-link{padding-left:0;} .toc-mobile .toc-link--h3{padding-left:14px;}
.toc-mobile .toc-nav{border-left:0;}

@media (max-width:900px){
  .ba-body{grid-template-columns:minmax(0, 1fr);}
  .toc-sidebar{display:none;}
  .toc-mobile{display:block;}
}
@media (max-width:560px){
  .ba-doc{padding:20px 16px 72px;}
}

/* ===========================================================================
   Full data-study article layout, exact SimplyCodes structure. Flex header
   (text + hero card), a 200px | 1fr | 260px body grid with a sticky right
   sidebar (Cite This Research + Featured), sun/moon theme switch, eyebrow pill.
   All themed by the --ba-* vars.
=========================================================================== */

/* Sun/moon theme switch (.theme-toggle-pill) */
.ba-switch{display:inline-flex; align-items:center; gap:.5rem; padding:.25rem .5rem; border-radius:40rem;
  border:1px solid var(--ba-border); background:var(--ba-inset); cursor:pointer; user-select:none; flex-shrink:0;
  transition:border-color .15s, background .15s;}
.ba-switch:hover{border-color:var(--ba-accent);}
.ba-switch-ico{display:grid; place-items:center; color:var(--ba-3);}
.ba-switch-track{width:36px; height:20px; border-radius:40rem; background:var(--ba-border); position:relative; flex-shrink:0; transition:background .2s;}
.ba-switch-thumb{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:40rem; background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.35); transition:transform .2s ease;}
.ba-switch.is-dark .ba-switch-thumb{transform:translateX(16px);}
.ba-switch.is-dark .ba-switch-track{background:var(--ba-accent);}

/* Eyebrow pill with icon (.article-cat-tag), FIXED dark pill / white text in
   BOTH themes (exactly like SimplyCodes), green icon. */
.ba-cat-tag{display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .75rem; border-radius:1.25rem;
  font-family:'DM Sans', monospace; font-size:.694rem; font-weight:600; letter-spacing:.125em; text-transform:uppercase;
  background:#09090b; color:#ffffff; border:1px solid rgba(255,255,255,.12); text-decoration:none;}
.ba-cat-tag svg{flex-shrink:0; color:#8078f2;}

/* Header: flex [text | hero card], byline spans full width below */
.ba-header{padding:2rem 0 0;}
.ba-header-inner{display:flex; flex-wrap:wrap; gap:2rem; max-width:1300px; margin:0 auto; padding:0 1.5rem;}
.ba-header-text{flex:1 1 380px; min-width:0; display:flex; flex-direction:column; justify-content:center;}
.ba-header-hero{flex:1 1 380px; min-width:0; display:flex; align-items:center;}
.ba-eyebrow-row{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.5rem;}
/* Hero card, FIXED dark card in both themes (like SimplyCodes). Cover-image
   variant keeps a 16/10 ratio; the native-viz variant sizes to its content so
   the stat callouts never clip on narrow columns / mobile. */
.ba-hero-card{width:100%; border-radius:1rem; overflow:hidden; background:#040405; border:1px solid rgba(255,255,255,.08);
  aspect-ratio:16/10;}
.ba-hero-card:has(.ba-hero-viz){aspect-ratio:auto; min-height:17rem;}
.ba-hero-card img{width:100%; height:100%; object-fit:cover; display:block;}
/* Pre-rendered hero graphic (self-contained card PNG), display as-is. */
.ba-hero-graphic{width:100%; height:auto; aspect-ratio:1200/630; object-fit:cover; display:block; border-radius:1rem;}
/* Byline strip bounded by a rule above AND below (like SimplyCodes). */
.ba-byline{flex-basis:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  margin-top:1.5rem; padding:1.25rem 0; border-top:1px solid var(--ba-border); border-bottom:1px solid var(--ba-border);}

/* 3-column body grid */
.ba-body-inner{display:grid; grid-template-columns:200px 1fr 260px; gap:2rem; max-width:1300px; margin:2.5rem auto 0;
  padding:0 1.5rem; align-items:start;}
.ba-body-inner > .toc-sidebar{grid-column:1; position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px); overflow-y:auto;}
.ba-body-col{grid-column:2; min-width:0;}
.ba-right-sidebar{grid-column:3; position:sticky; top:96px; align-self:start; max-height:calc(100vh - 120px);
  overflow-y:auto; scrollbar-width:none;}
.ba-right-sidebar::-webkit-scrollbar{display:none;}

/* Sidebar section label */
.ba-side-label{display:flex; align-items:center; gap:.5rem; font-family:'DM Sans', monospace; font-size:.694rem;
  font-weight:600; color:var(--ba-3); text-transform:uppercase; letter-spacing:.125em; margin:0 0 1rem; padding-bottom:.75rem;
  border-bottom:1px solid var(--ba-border);}

/* Cite This Research panel */
.ba-cite{border:1px solid var(--ba-border); border-radius:.75rem; background:var(--ba-inset); padding:1.25rem; margin-bottom:1.75rem;}
.ba-cite .ba-side-label{border-bottom:0; padding-bottom:0; margin-bottom:.75rem;}
.ba-cite-blurb{font-size:.833rem; line-height:1.45; color:var(--ba-2); margin:0 0 1rem;}
.ba-cite-cta{display:inline-flex; align-items:center; justify-content:center; gap:.4rem; width:100%; padding:.6rem .75rem;
  font-family:'DM Sans', sans-serif; font-size:.833rem; font-weight:600; color:var(--ba-bg); background:var(--ba-ink);
  border:0; border-radius:.5rem; cursor:pointer; text-decoration:none; transition:opacity .15s;}
.ba-cite-cta:hover{opacity:.9;}

/* Featured picks */
.ba-pick{display:flex; gap:.75rem; padding:.75rem 0; border-bottom:1px solid var(--ba-border-2); text-decoration:none; color:inherit;}
.ba-pick:last-child{border-bottom:0;}
.ba-pick-img{width:72px; height:48px; border-radius:.5rem; overflow:hidden; flex-shrink:0; border:1px solid var(--ba-border);
  background:var(--ba-inset);}
.ba-pick-img img{width:100%; height:100%; object-fit:cover; display:block;}
.ba-pick-cat{display:inline-flex; align-items:center; gap:.25rem; font-family:'DM Sans', monospace; font-size:.694rem;
  font-weight:600; color:var(--ba-3); text-transform:uppercase; letter-spacing:.1em; margin-bottom:.25rem;}
.ba-pick-title{font-size:.833rem; font-weight:500; line-height:1.25rem; color:var(--ba-2); display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; transition:color .15s;}
.ba-pick:hover .ba-pick-title{color:var(--ba-ink);}

@media (max-width:1080px){
  .ba-body-inner{grid-template-columns:minmax(0,1fr) 260px;}
  .ba-body-inner > .toc-sidebar{display:none;}
  .ba-body-col{grid-column:1;}
  .ba-right-sidebar{grid-column:2;}
}
@media (max-width:820px){
  .ba-header-hero{flex-basis:100%;}
  .ba-body-inner{grid-template-columns:minmax(0,1fr);}
  .ba-right-sidebar{grid-column:1; position:static; max-height:none; margin-top:2rem;}
}

/* Breadcrumb bar (full-width above the header) + featured block spacing */
.ba-doc-top{max-width:1300px; margin:0 auto; padding:1.25rem 1.5rem 0;}
.ba-featured{margin-top:1.75rem;}

/* Author bio card */
.ba-author-bio{display:flex; gap:1.1rem; margin:3rem 0 0; padding:1.75rem 0 0; border-top:1px solid var(--ba-border);}
.ba-author-bio-avatar{width:64px; height:64px; border-radius:999px; overflow:hidden; flex-shrink:0; background:var(--ba-inset);
  border:1px solid var(--ba-border); display:grid; place-items:center; color:var(--ba-3);}
.ba-author-bio-avatar img{width:100%; height:100%; object-fit:cover;}
.ba-author-bio-name{font-family:'DM Sans', sans-serif; font-size:1.1rem; font-weight:600; color:var(--ba-ink); margin:0;}
.ba-author-bio-role{font-size:.833rem; color:var(--ba-3); margin:.15rem 0 .7rem;}
.ba-author-bio-text{font-size:.9rem; line-height:1.6; color:var(--ba-2); margin:0;}
.ba-author-bio-social{display:inline-flex; align-items:center; gap:.4rem; margin-top:.8rem; font-size:.833rem; font-weight:600;
  color:var(--ba-ink); text-decoration:none; border:1px solid var(--ba-border); border-radius:.5rem; padding:.35rem .7rem;}
.ba-author-bio-social:hover{border-color:var(--ba-accent);}

/* Newsletter block (full width) */
.ba-newsletter{border-top:1px solid var(--ba-border); margin-top:3.5rem;}
.ba-newsletter-inner{max-width:1300px; margin:0 auto; padding:4rem 1.5rem;}
.ba-newsletter-title{font-family:'DM Sans', sans-serif; font-size:2rem; font-weight:600; letter-spacing:-.02em;
  color:var(--ba-ink); margin:0 0 .5rem;}
.ba-newsletter-sub{font-size:1rem; line-height:1.5; color:var(--ba-2); max-width:52ch; margin:0 0 1.5rem;}
.ba-newsletter-form{display:flex; flex-wrap:wrap; gap:.6rem; max-width:520px;}
.ba-newsletter-input{flex:1 1 240px; min-width:0; padding:.75rem 1rem; font:inherit; font-size:1rem; color:var(--ba-ink);
  background:var(--ba-inset); border:1px solid var(--ba-border); border-radius:.6rem; outline:none;}
.ba-newsletter-input::placeholder{color:var(--ba-3);}
.ba-newsletter-input:focus{border-color:var(--ba-accent);}
.ba-newsletter-btn{padding:.75rem 1.4rem; font:inherit; font-size:1rem; font-weight:600; color:var(--ba-on);
  background:var(--ba-accent); border:0; border-radius:.6rem; cursor:pointer; transition:opacity .15s;}
.ba-newsletter-btn:hover{opacity:.9;}
.ba-newsletter-done{font-size:1rem; color:var(--ba-2); max-width:520px;}
.ba-newsletter-done a{color:var(--ba-accent); text-decoration:none; font-weight:600;}
.ba-newsletter-alt{display:inline-block; margin-top:1.1rem; font-size:.9rem; font-weight:500; color:var(--ba-3); text-decoration:none;}
.ba-newsletter-alt:hover{color:var(--ba-ink);}

/* Author bio social buttons */
.ba-author-bio-socials{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1rem;}
.ba-author-bio-social{display:inline-flex; align-items:center; gap:.4rem; font-size:.833rem; font-weight:600;
  color:var(--ba-ink); text-decoration:none; border:1px solid var(--ba-border); border-radius:.5rem; padding:.35rem .75rem;
  transition:border-color .15s, color .15s;}
.ba-author-bio-social:hover{border-color:var(--ba-accent); color:var(--ba-accent);}
.ba-author-bio-social svg{flex-shrink:0;}
/* Logo-mark avatars sit on a padded tile, not edge-to-edge like a photo */
.ba-author-avatar img, .ba-author-bio-avatar img{object-fit:cover;}

/* Native hero data-viz card (waveform + stats), always on the fixed-dark card */
.ba-hero-viz{width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between;
  padding:1.75rem 1.75rem 1.5rem; color:#ffffff;}
.ba-hero-kicker{font-family:'DM Sans', monospace; font-size:.694rem; letter-spacing:.14em; text-transform:uppercase;
  color:#8078f2; margin:0 0 .5rem;}
.ba-hero-viz-title{font-family:'DM Sans', sans-serif; font-size:1.55rem; line-height:1.08; font-weight:600;
  letter-spacing:-.02em; color:#ffffff; margin:0; max-width:15ch;}
.ba-hero-wave-wrap{position:relative; flex:1; display:flex; flex-direction:column; justify-content:center; gap:.6rem; margin:1rem 0;}
.ba-hero-wave{width:100%; height:96px; display:block;}
.ba-hero-note{font-size:.8rem; line-height:1.3; color:#a1a1aa; margin:0; max-width:22ch;}
.ba-hero-stats{display:flex; gap:2.25rem;}
.ba-hero-stat b{display:block; font-family:'DM Sans', sans-serif; font-size:1.4rem; font-weight:700; color:#fff; line-height:1;}
.ba-hero-stat span{display:block; font-size:.72rem; color:#a1a1aa; margin-top:.3rem;}

/* Cite modal */
.ba-modal-backdrop{position:fixed; inset:0; z-index:9999; background:rgba(0,0,0,.62); display:grid; place-items:center; padding:1.5rem;}
.ba-modal{width:100%; max-width:460px; max-height:85vh; overflow-y:auto; background:var(--ba-layer); border:1px solid var(--ba-border);
  border-radius:1rem; padding:1.5rem; display:flex; flex-direction:column; gap:.85rem; color:var(--ba-ink);
  box-shadow:0 24px 60px rgba(0,0,0,.5);}
.ba-modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:.25rem;}
.ba-modal-close{background:none; border:0; color:var(--ba-3); font-size:1rem; cursor:pointer; line-height:1; padding:.25rem;}
.ba-modal-close:hover{color:var(--ba-ink);}
.ba-cite-block{border:1px solid var(--ba-border); border-radius:.6rem; background:var(--ba-inset); padding:.9rem 1rem;}
.ba-cite-block-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:.5rem;}
.ba-cite-block-label{font-family:'DM Sans', monospace; font-size:.66rem; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ba-3);}
.ba-cite-block-copy, .ba-cite-block-link{font-size:.75rem; font-weight:600; color:var(--ba-accent); background:none; border:0;
  cursor:pointer; text-decoration:none;}
.ba-cite-block-copy:hover, .ba-cite-block-link:hover{text-decoration:underline;}
.ba-cite-stat{font-family:'DM Sans', sans-serif; font-size:.95rem; font-weight:500; line-height:1.4; color:var(--ba-ink); margin:0;}
.ba-cite-attr{font-size:.85rem; line-height:1.5; color:var(--ba-2); margin:0;}

/* Hero-viz padding trim on small screens */
@media (max-width:560px){
  .ba-hero-viz{padding:1.4rem;}
  .ba-hero-wave{height:72px;}
  .ba-modal{padding:1.15rem;}
}

/* ===========================================================================
   WordPress full-bleed. The theme nests .blog-article inside
   <main class="clip-main"> (max-width:1200px; padding:0 32px 90px), which boxed
   the PFP dark surface into a narrow centred column. PFP's blog is edge-to-edge,
   so when clip-main holds a blog article, drop its width cap + padding and let
   .blog-article span the viewport. The inner ba- and bh- containers keep their
   own max-width:1300px + centred 1.5rem padding, so the CONTENT stays aligned.
=========================================================================== */
.clip-main:has(.blog-article){ max-width:none; padding:0; }
.blog-article{ width:100%; }

/* Dark blog chrome: the blog has its own .ba-switch (in the article), so hide the
   site header's light/dark toggle on blog pages to avoid two competing controls. */
body:has(.blog-article) .clip-theme-toggle { display: none; }