/* Extends the existing site's palette and shared shell. */
.article-list { display: grid; border-top: 1px solid var(--line); }
.article-card { display: grid; grid-template-columns: 185px 1fr 30px; align-items: start; gap: 24px; padding: 32px 22px; border-bottom: 1px solid var(--line); background: var(--panel); }
.article-card:hover h2 { color: var(--accent); }
.article-card time, .article-meta { color: var(--muted); font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; }
.article-card h2 { font-size: clamp(24px,3vw,36px); line-height: 1.1; letter-spacing:-.03em; margin: 0 0 12px; transition:color .15s; }
.article-card p { margin: 0; color: var(--muted); max-width: 72ch; }
.article-card .article-arrow { color: var(--accent); font-size: 22px; }
.article-layout { display: grid; grid-template-columns: 210px minmax(0, 830px); gap: 60px; margin-top: 46px; }
.article-toc { position: sticky; top: 30px; height: max-content; padding: 24px 18px; border: 1px solid var(--line); background: var(--panel); }
.article-toc .eyebrow { display:block; margin-bottom: 18px; }
.article-toc a { display:block; margin: 0 0 12px; color: var(--muted); font-size: 13px; line-height:1.3; }
.article-toc a:hover { color:var(--accent); }
.article-body { min-width:0; padding-bottom:70px; }
.article-body h2 { margin: 54px 0 20px; font-size: clamp(25px, 3vw, 36px); letter-spacing:-.035em; line-height:1.1; scroll-margin-top: 24px; }
.article-body p { color:#b7bdc4; font-size:17px; line-height:1.85; margin:0 0 22px; }
.article-body strong {color:var(--text)}
.article-body em { color:var(--muted); }
.article-body code {padding:2px 6px;border:1px solid var(--line);background:var(--panel);font: 0.86em ui-monospace,Menlo,monospace;color:#d9dde1}
.article-hero {padding:80px 0 16px;border-bottom:1px solid var(--line)}
.article-hero h1 { font-size: clamp(47px,7vw,84px); max-width:1030px; line-height:1.02; }
.article-hero .lead {max-width:830px;}
.article-meta {display:flex; gap:22px; margin:22px 0 0; flex-wrap:wrap;}
.back-link {display:inline-block; color:var(--accent); margin:24px 0 0; font-size:14px;}
@media(max-width:850px){ .article-layout{grid-template-columns:1fr;gap:18px;} .article-toc{position:static;} .article-card{grid-template-columns:1fr 26px;gap:16px;padding:24px 20px;} .article-card time{grid-column:1/-1;} .article-card h2{grid-column:1;} .article-card .article-arrow{grid-column:2;} .article-hero{padding:55px 0 15px;} .article-body p{font-size:16px;} }
@media(max-width:560px){.topbar{flex-wrap:wrap;align-items:center;gap:12px;padding:12px 0}.topbar nav{flex-wrap:wrap;gap:12px}.topbar nav a{font-size:13px}}