/* Article pages: reuse the site's theme tokens from ../styles.css, with a readable single-column layout. */
.article-nav { display:flex; justify-content:space-between; align-items:center; gap:1rem; }
.article-nav a { text-decoration:none; }
.article-back { color:var(--text-dim); font-size:0.85rem; }
.article-back:hover { color:var(--cyan); }
.article { max-width:58rem; margin:0 auto; padding:3rem 1.5rem 4rem; }
.article-kicker { font-size:0.75rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--magenta); margin-bottom:0.75rem; }
.article h1 { font-size:2.1rem; line-height:1.15; color:var(--text); text-wrap:balance; margin-bottom:0.75rem; }
.article-meta { color:var(--text-faint); font-size:0.82rem; margin-bottom:2rem; }
.article h2 { font-size:1.35rem; color:var(--cyan); margin:2.2rem 0 0.7rem; text-wrap:balance; }
.article p, .article li { color:var(--text-dim); font-size:0.95rem; line-height:1.75; }
.article p { margin-bottom:1rem; }
.article b { color:var(--text); font-weight:600; }
.article ul { padding-left:1.2rem; display:flex; flex-direction:column; gap:0.55rem; margin-bottom:1rem; }
.article a { color:var(--cyan); }
.article-foot { margin-top:2.5rem; padding-top:1.25rem; border-top:1px solid var(--border); }
/* Figures break out of the text column so diagrams stay readable. */
.article-figure {
  position:relative; left:50%; transform:translateX(-50%); width:min(940px, calc(100vw - 2rem));
  margin:1.5rem 0 2rem; padding:1.25rem; background:var(--surface); border:1px solid var(--border); border-radius:3px; overflow-x:auto;
}
.article-figure svg { display:block; width:100%; height:auto; }
@media (max-width:700px) { .article-figure svg { min-width:640px; } }
.article-figure figcaption { color:var(--text-faint); font-size:0.78rem; line-height:1.6; margin-top:0.75rem; }
@media (max-width:640px) {
  .article { padding:2rem 1rem 3rem; }
  .article h1 { font-size:1.6rem; }
}