/* ───────────────────────────────────────────────────────────
   Kapio — NEW UI · shared blog-article styles (/blog/*)
   Tokens come from ../chrome.css (loaded first). Fonts: Instrument Sans + IBM Plex Mono.
   Styles the article content classes used across all posts.
   ─────────────────────────────────────────────────────────── */

.article-wrap{max-width:720px;margin:0 auto;padding:92px 1.5rem 4.5rem;}

/* Breadcrumb */
.bp-crumb{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt3);margin-bottom:1.4rem;}
.bp-crumb a{color:var(--txt3);text-decoration:none;}
.bp-crumb a:hover{color:var(--brand);}
.bp-crumb span{margin:0 .45rem;opacity:.6;}

/* Meta row */
.article-meta{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.article-tag{font-family:var(--mono);font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;padding:4px 11px;border-radius:100px;background:rgba(16,29,48,.07);color:var(--txt2);}
.article-tag.risk{background:var(--loss-soft);color:var(--loss);}
.article-tag.start{background:var(--brand-soft);color:var(--brand-deep);}
.article-tag.history{background:var(--amber-soft);color:var(--amber-c);}
.article-tag.math{background:var(--ai-soft);color:var(--ai-deep);}
.article-tag.guides{background:rgba(16,29,48,.07);color:var(--txt2);}
.article-date,.article-read{font-family:var(--mono);font-size:11px;color:var(--txt3);letter-spacing:.04em;}

/* Title + lead */
h1.article-title{font-family:var(--sans);font-size:clamp(28px,4vw,40px);font-weight:700;letter-spacing:-.025em;line-height:1.15;color:var(--txt);margin-bottom:1rem;}
.article-lead{font-size:17px;color:var(--txt2);line-height:1.75;margin-bottom:2rem;padding-bottom:2rem;border-bottom:1px solid var(--line);}

/* Prose */
.prose h2{font-family:var(--sans);font-size:23px;font-weight:700;letter-spacing:-.02em;color:var(--txt);margin:2.5rem 0 .75rem;}
.prose h3{font-family:var(--sans);font-size:16.5px;font-weight:600;color:var(--txt);margin:1.75rem 0 .5rem;}
.prose p{font-size:15.5px;color:var(--txt2);line-height:1.85;margin-bottom:1.25rem;}
.prose ul,.prose ol{font-size:15.5px;color:var(--txt2);line-height:1.85;margin:0 0 1.25rem;padding-left:1.4rem;}
.prose li{margin-bottom:.45rem;}
.prose a{color:var(--brand-deep);text-decoration:none;border-bottom:1px solid var(--brand-soft);}
.prose a:hover{border-bottom-color:var(--brand);}
.prose strong{color:var(--txt);font-weight:600;}
.prose blockquote{border-left:3px solid var(--line2);background:var(--paper);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:.85rem 1.25rem;margin:1.5rem 0;font-size:15px;color:var(--txt2);line-height:1.7;}
.prose blockquote.good{border-left-color:var(--brand);background:var(--brand-soft);}
.prose blockquote.warn{border-left-color:var(--loss);background:var(--loss-soft);}

/* Stat cards */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:2rem 0;}
.stat-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1.25rem 1.1rem;box-shadow:var(--shadow);}
.stat-label{font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--txt3);margin-bottom:.45rem;font-weight:600;}
.stat-value{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1;margin-bottom:.3rem;letter-spacing:-.01em;color:var(--txt);}
.stat-sub{font-size:12px;color:var(--txt3);line-height:1.45;}
.stat-green{color:var(--brand);}.stat-red{color:var(--loss);}.stat-amber{color:var(--amber-c);}

/* Data tables */
.crash-table{width:100%;border-collapse:collapse;margin:1.75rem 0;font-size:14px;}
.crash-table th{text-align:left;padding:9px 13px;background:var(--paper);font-family:var(--mono);font-size:9.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--txt3);font-weight:600;border-bottom:1px solid var(--line);}
.crash-table td{padding:11px 13px;border-bottom:1px solid var(--line);color:var(--txt2);}
.crash-table tr:last-child td{border-bottom:none;}
.crash-table td:first-child{color:var(--txt);font-weight:600;}
.crash-table .bad{color:var(--loss);font-weight:600;}
.crash-table .good{color:var(--brand);font-weight:600;}

/* In-article CTA box */
.cta-box{background:var(--brand-soft);border:1px solid rgba(14,124,82,.18);border-radius:var(--r);padding:1.75rem;margin:2.5rem 0;text-align:center;}
.cta-box h3{font-family:var(--sans);font-size:21px;font-weight:700;letter-spacing:-.02em;color:var(--txt);margin-bottom:.5rem;}
.cta-box p{font-size:14px;color:var(--txt2);margin-bottom:1.25rem;line-height:1.7;}
.cta-box a{display:inline-block;padding:11px 26px;border-radius:10px;background:var(--brand);color:#fff;font-size:14px;font-weight:600;text-decoration:none;transition:background .15s;}
.cta-box a:hover{background:var(--brand-deep);}

/* Disclaimer */
.disclaimer{font-size:11.5px;color:var(--txt3);border-top:1px solid var(--line);padding-top:1.5rem;margin-top:3rem;line-height:1.7;}

/* Related */
.related{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--line);}
.related h3{font-family:var(--mono);font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--txt3);margin-bottom:1rem;}
.related-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.related-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:1rem 1.1rem;text-decoration:none;display:block;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s,border-color .15s;}
.related-card:hover{transform:translateY(-1px);box-shadow:var(--shadow-lg);border-color:var(--brand);}
.related-card-tag{font-family:var(--mono);font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-deep);margin-bottom:.35rem;}
.related-card-title{font-size:14px;font-weight:600;color:var(--txt);line-height:1.4;}

@media(max-width:640px){
  .article-wrap{padding:80px 1.15rem 3.5rem;}
  .stat-row{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  h1.article-title{font-size:27px;}
  .article-lead{font-size:15.5px;}
}