.article-shell { width:min(820px, calc(100% - 3rem)); margin:0 auto; padding:7rem 0 9rem; }
.article-kicker { margin:0 0 1.2rem; color:var(--accent); font:500 .62rem var(--mono); letter-spacing:.14em; }
.article-title { max-width:900px; margin:0; color:var(--text); font-family:var(--display); font-size:clamp(3.2rem, 8vw, 6.7rem); font-weight:500; letter-spacing:-.085em; line-height:.92; text-wrap:balance; }
.article-dek { max-width:650px; margin:2rem 0 0; color:var(--muted); font-size:1.05rem; line-height:1.8; }
.article-meta { display:flex; flex-wrap:wrap; gap:.7rem 1.2rem; margin-top:2rem; color:var(--faint); font:500 .58rem var(--mono); letter-spacing:.06em; text-transform:uppercase; }
.article-rule { height:1px; margin:4rem 0; background:var(--line); }
.article-body { max-width:700px; }
.article-body h2 { margin:4.5rem 0 1rem; color:var(--text); font-size:clamp(2rem, 4vw, 3.2rem); line-height:1; }
.article-body h3 { margin:2.7rem 0 .75rem; color:var(--text); font:500 1.3rem var(--display); letter-spacing:-.03em; }
.article-body p, .article-body li { color:var(--muted); font-size:.98rem; line-height:1.85; }
.article-body ul, .article-body ol { padding-left:1.3rem; }
.article-body li { margin:.55rem 0; }
.article-body strong { color:var(--text); font-weight:600; }
.article-body a { color:var(--accent); border-bottom:1px solid transparent; transition:border-color .2s ease; }
.article-body a:hover { border-color:var(--accent); }
.article-code { margin:1.5rem 0; padding:1.15rem 1.25rem; overflow:auto; color:var(--text); background:var(--panel); border:1px solid var(--line); border-left:2px solid var(--accent); font: .72rem/1.75 var(--mono); }
.article-callout { margin:2rem 0; padding:1.2rem 1.3rem; background:var(--panel); border-left:2px solid var(--accent); color:var(--muted); font-size:.9rem; line-height:1.75; }
.article-toc { margin:2.5rem 0 0; padding:1rem 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.article-toc p { margin:0 0 .55rem; color:var(--faint); font:500 .58rem var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.article-toc a { display:block; padding:.25rem 0; color:var(--muted); font-size:.8rem; }
.article-footer { margin-top:5rem; padding-top:1.5rem; border-top:1px solid var(--line); color:var(--faint); font:.62rem/1.7 var(--mono); }
@media (max-width:680px) { .article-shell { width:min(100% - 2rem,820px); padding:5rem 0 6rem; }.article-title { font-size:clamp(3rem, 16vw, 5rem); }.article-dek { font-size:.92rem; }.article-body p, .article-body li { font-size:.9rem; }.article-body h2 { margin-top:3.5rem; } }