/* MCPAmpel — Editorial article CSS
   Reused by all blog articles. Extends system.css tokens; no new colors. */

/* Article hero */
.art-hero{padding:64px 0 56px;border-bottom:1px solid var(--line-soft);position:relative}
.art-hero .crumb{display:flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase;margin-bottom:28px}
.art-hero .crumb a{color:var(--bone-2);transition:color .15s}
.art-hero .crumb a:hover{color:var(--bone)}
.art-hero .crumb .sep{opacity:0.4}
.art-hero .crumb .here{color:var(--bone)}

.art-hero .meta{display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-family:"JetBrains Mono",monospace;font-size:11.5px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase;margin-bottom:28px}
.art-hero .meta .pip{display:inline-flex;align-items:center;gap:8px}
.art-hero .meta .dot{width:6px;height:6px;background:var(--green);border-radius:99px;display:inline-block}
.art-hero .meta .sep{opacity:0.4}

.art-hero h1{font-family:"Outfit";font-weight:700;font-size:clamp(40px,5.4vw,80px);letter-spacing:-0.03em;line-height:1.0;max-width:22ch}
.art-hero h1 em{font-style:italic;color:var(--mute);font-weight:500}
.art-hero h1 .accent{color:var(--green);font-style:normal}

.art-hero .sub{margin-top:24px;color:var(--bone-2);font-size:18px;line-height:1.55;max-width:62ch}

.art-hero .byline{margin-top:36px;display:flex;flex-wrap:wrap;gap:32px;padding-top:24px;border-top:1px solid var(--line-soft)}
.art-hero .byline > div{display:flex;flex-direction:column;gap:4px}
.art-hero .byline .lbl{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase}
.art-hero .byline .val{font-size:14.5px;color:var(--bone)}
.art-hero .byline .val.muted{color:var(--bone-2)}

/* Cover band — striped placeholder */
.art-cover{position:relative;border-bottom:1px solid var(--line-soft);background:var(--ink-2)}
.art-cover .strip{height:280px;background:repeating-linear-gradient(135deg,oklch(0.22 0.014 255) 0 22px,oklch(0.20 0.014 255) 22px 44px);position:relative;overflow:hidden}
.art-cover .strip::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,transparent 60%,var(--ink) 100%);pointer-events:none}
.art-cover .label{position:absolute;left:32px;bottom:18px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase}
.art-cover .label b{color:var(--bone-2);font-weight:500}
@media(max-width:760px){.art-cover .strip{height:180px}}

/* Body grid: section number + content (matches /about pattern) */
.art-body{padding:72px 0 96px}
.art-body .sect-block{display:grid;grid-template-columns:auto 1fr;gap:64px;padding:48px 0;border-bottom:1px solid var(--line-soft);align-items:start}
.art-body .sect-block:last-child{border-bottom:none}
.art-body .sect-block:first-child{padding-top:0}
.art-body .sect-block .num{font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase;border:1px solid var(--line-soft);padding:8px 12px;border-radius:99px;display:inline-block;align-self:start;white-space:nowrap;position:sticky;top:90px}
@media(max-width:880px){.art-body .sect-block{grid-template-columns:1fr;gap:18px;padding:36px 0}.art-body .sect-block .num{position:static}}

/* Prose */
.prose{max-width:64ch;font-size:16.5px;line-height:1.7;color:var(--bone-2)}
.prose > * + *{margin-top:18px}
.prose h2{font-family:"Outfit";font-weight:600;font-size:clamp(26px,3vw,34px);letter-spacing:-0.02em;line-height:1.15;color:var(--bone);margin-top:0;margin-bottom:8px;max-width:24ch}
.prose h2 em{font-style:normal;color:var(--mute);font-weight:500}
.prose h2 .accent{color:var(--green)}
.prose h3{font-family:"Outfit";font-weight:600;font-size:20px;letter-spacing:-0.01em;color:var(--bone);margin-top:28px;margin-bottom:6px}
.prose h2 + p, .prose h3 + p{margin-top:14px}
.prose p{font-size:16.5px;line-height:1.7;color:var(--bone-2)}
.prose p b, .prose p strong{color:var(--bone);font-weight:600}
.prose a{color:var(--green);text-decoration:none;border-bottom:1px solid color-mix(in oklab,var(--green) 35%,transparent);transition:border-color .15s}
.prose a:hover{border-bottom-color:var(--green)}
.prose ul, .prose ol{padding-left:0;list-style:none;margin-left:0}
.prose ul li, .prose ol li{position:relative;padding-left:24px;line-height:1.65;font-size:16px;color:var(--bone-2);margin-bottom:8px}
.prose ul li::before{content:"";position:absolute;left:0;top:11px;width:10px;height:1px;background:var(--green)}
.prose ol{counter-reset:ol}
.prose ol li{counter-increment:ol}
.prose ol li::before{content:counter(ol,decimal-leading-zero);position:absolute;left:0;top:0;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--green);letter-spacing:0.04em}
.prose ol li{padding-left:32px}

.prose code{font-family:"JetBrains Mono",monospace;font-size:0.88em;background:var(--ink-2);border:1px solid var(--line-soft);padding:1.5px 6px;border-radius:4px;color:var(--bone)}
.prose pre{background:var(--ink-2);border:1px solid var(--line-soft);border-radius:10px;padding:18px 20px;overflow-x:auto;font-family:"JetBrains Mono",monospace;font-size:13px;line-height:1.6;color:var(--bone-2);margin:24px 0}
.prose pre code{background:none;border:none;padding:0;font-size:inherit;color:inherit}
.prose pre .c{color:var(--mute)}
.prose pre .k{color:var(--green)}
.prose pre .s{color:var(--amber)}

.prose blockquote{margin:28px 0;padding:20px 24px;background:var(--ink-2);border:1px solid var(--line-soft);border-left:2px solid var(--green);border-radius:10px;font-family:"Outfit";font-weight:500;font-size:19px;line-height:1.45;color:var(--bone);letter-spacing:-0.005em}
.prose blockquote p{font-size:inherit;line-height:inherit;color:inherit;margin:0}
.prose blockquote cite{display:block;margin-top:14px;font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase;font-style:normal;font-weight:400}

/* Tables — match .eng-grid editorial style */
.prose .tbl{margin:28px 0;border:1px solid var(--line-soft);border-radius:10px;overflow:hidden;background:var(--ink-2)}
.prose table{width:100%;border-collapse:collapse;font-size:14px}
.prose thead th{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:0.14em;color:var(--mute);text-transform:uppercase;font-weight:500;text-align:left;padding:14px 18px;border-bottom:1px solid var(--line-soft);background:var(--ink)}
.prose tbody td{padding:14px 18px;border-bottom:1px solid var(--line-soft);color:var(--bone-2);vertical-align:top}
.prose tbody tr:last-child td{border-bottom:none}
.prose tbody tr:hover td{background:color-mix(in oklab,var(--ink-3) 50%,transparent)}
.prose td b, .prose td strong{color:var(--bone);font-weight:600}
.prose td.num, .prose th.num{font-family:"JetBrains Mono",monospace;font-feature-settings:"tnum","ss01";text-align:right;white-space:nowrap}
.prose td.g{color:var(--green);font-family:"JetBrains Mono",monospace;font-weight:500}
.prose td.a{color:var(--amber);font-family:"JetBrains Mono",monospace;font-weight:500}
.prose td.r{color:var(--red);font-family:"JetBrains Mono",monospace;font-weight:500}
.prose .zone-dot{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:8px;vertical-align:middle}
.prose .zone-dot.r{background:var(--red)}
.prose .zone-dot.a{background:var(--amber)}
.prose .zone-dot.g{background:var(--green)}

/* Live snapshot aside */
.live-snapshot{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:0.04em;color:var(--bone-2);background:var(--ink-2);border:1px solid var(--line-soft);border-left:2px solid var(--green);border-radius:8px;padding:14px 18px;margin:0 0 28px}
.live-snapshot::before{content:"LIVE";font-size:10px;letter-spacing:0.18em;color:var(--green);font-weight:600;padding:3px 8px;border:1px solid color-mix(in oklab,var(--green) 40%,transparent);border-radius:99px}
.live-snapshot strong{color:var(--bone);font-weight:600;font-size:13px}
.live-snapshot .sep{color:var(--mute);opacity:0.5}

/* Stat callouts */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line-soft);border-radius:12px;background:var(--ink-2);overflow:hidden;margin:28px 0}
.stat-row > div{padding:24px 22px;border-right:1px solid var(--line-soft)}
.stat-row > div:last-child{border-right:none}
.stat-row .v{font-family:"Outfit";font-weight:700;font-size:42px;letter-spacing:-0.03em;line-height:1;color:var(--bone)}
.stat-row .v.g{color:var(--green)}
.stat-row .v.a{color:var(--amber)}
.stat-row .v.r{color:var(--red)}
.stat-row .l{margin-top:10px;font-size:13px;color:var(--bone-2);line-height:1.5}
@media(max-width:760px){.stat-row{grid-template-columns:1fr}.stat-row > div{border-right:none;border-bottom:1px solid var(--line-soft)}.stat-row > div:last-child{border-bottom:none}}

/* Bar chart */
.bars{display:flex;flex-direction:column;gap:10px;margin:24px 0}
.bar{display:grid;grid-template-columns:160px 1fr 60px;gap:14px;align-items:center;font-family:"JetBrains Mono",monospace;font-size:12px}
.bar .lbl{color:var(--bone-2);text-transform:none;letter-spacing:0}
.bar .track{height:18px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:4px;overflow:hidden;position:relative}
.bar .fill{height:100%;background:var(--green)}
.bar .fill.a{background:var(--amber)}
.bar .fill.r{background:var(--red)}
.bar .fill.mute{background:var(--mute)}
.bar .v{text-align:right;color:var(--bone);font-feature-settings:"tnum"}
@media(max-width:760px){.bar{grid-template-columns:120px 1fr 48px;gap:10px;font-size:11px}}

/* Venn-style overlap viz */
.venn-wrap{margin:32px 0;padding:32px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:12px}
.venn-wrap .venn-title{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase;margin-bottom:24px}
.venn{position:relative;height:280px;max-width:520px;margin:0 auto}
.venn .circle{position:absolute;width:200px;height:200px;border-radius:99px;border:1.5px solid;mix-blend-mode:screen;display:flex;align-items:center;justify-content:center;font-family:"Outfit";font-weight:600;font-size:14px;text-align:center}
.venn .c1{left:0;top:30px;border-color:var(--green);background:color-mix(in oklab,var(--green) 12%,transparent);color:var(--green)}
.venn .c2{left:120px;top:0;border-color:var(--amber);background:color-mix(in oklab,var(--amber) 12%,transparent);color:var(--amber)}
.venn .c3{left:60px;top:90px;border-color:var(--red);background:color-mix(in oklab,var(--red) 12%,transparent);color:var(--red)}
.venn .lbl-overlap{position:absolute;left:140px;top:140px;width:80px;text-align:center;font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--bone);z-index:10}
@media(max-width:760px){.venn{height:220px}.venn .circle{width:150px;height:150px;font-size:12px}.venn .c2{left:90px}.venn .c3{left:45px;top:70px}.venn .lbl-overlap{left:105px;top:110px;width:60px}}

/* End CTA */
.art-cta{margin-top:72px;padding:64px 48px;background:var(--ink-2);border:1px solid var(--line-soft);border-radius:14px;text-align:center;position:relative;overflow:hidden}
.art-cta::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(to right,transparent,var(--green),transparent)}
.art-cta .lights{display:inline-flex;gap:10px;align-items:center;padding:10px 16px;border:1px solid var(--line-soft);border-radius:99px;background:var(--ink);margin-bottom:24px}
.art-cta .lights .l{width:10px;height:10px;border-radius:99px;opacity:0.35}
.art-cta .lights .l.on{opacity:1}
.art-cta .lights .r{background:var(--red)}
.art-cta .lights .a{background:var(--amber)}
.art-cta .lights .g{background:var(--green)}
.art-cta h3{font-family:"Outfit";font-weight:700;font-size:clamp(28px,4vw,44px);letter-spacing:-0.025em;line-height:1.05;max-width:22ch;margin:0 auto}
.art-cta h3 em{font-style:italic;color:var(--mute);font-weight:500}
.art-cta h3 .accent{color:var(--green);font-style:normal}
.art-cta p{margin-top:14px;color:var(--bone-2);font-size:15.5px}
.art-cta .actions{margin-top:28px;display:inline-flex;gap:10px;flex-wrap:wrap;justify-content:center}
@media(max-width:760px){.art-cta{padding:44px 24px}}

/* Article footer — author + last updated + nav */
.art-foot{margin-top:48px;padding-top:28px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:1fr 1fr;gap:24px;font-family:"JetBrains Mono",monospace;font-size:11.5px;color:var(--mute)}
.art-foot .col{display:flex;flex-direction:column;gap:6px}
.art-foot .lbl{font-size:10.5px;letter-spacing:0.16em;text-transform:uppercase;color:var(--mute)}
.art-foot .val{color:var(--bone-2);font-size:13px;letter-spacing:0}
.art-foot a{color:var(--bone)}
.art-foot a:hover{color:var(--green)}
@media(max-width:760px){.art-foot{grid-template-columns:1fr}}

.art-nav{margin-top:32px;display:grid;grid-template-columns:1fr auto 1fr;gap:0;border:1px solid var(--line-soft);border-radius:12px;overflow:hidden}
.art-nav a{padding:22px 24px;display:flex;flex-direction:column;gap:6px;background:var(--ink-2);transition:background .15s}
.art-nav a:hover{background:var(--ink-3)}
.art-nav .lbl{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:0.16em;color:var(--mute);text-transform:uppercase}
.art-nav .ttl{font-family:"Outfit";font-weight:500;font-size:15px;color:var(--bone);letter-spacing:-0.005em}
.art-nav .next{text-align:right;align-items:flex-end}
.art-nav .divider{background:var(--line-soft);width:1px}
@media(max-width:680px){.art-nav{grid-template-columns:1fr}.art-nav .divider{width:auto;height:1px}}