/* Article pages */
.article-back { display: table; font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-6); transition: color var(--transition); }
.article-back:hover { color: var(--color-primary); }
.page-hero h1 { max-width: 22ch; }
.article-meta { font-size: var(--text-sm) !important; color: var(--color-text-faint) !important; margin-top: var(--space-6); letter-spacing: 0.04em; }
.article-body { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); }
.article-container { max-width: 720px; margin: 0 auto; padding: 0 clamp(var(--space-5), 5vw, var(--space-12)); }
.article-container > p { margin-bottom: var(--space-5); color: var(--color-text); line-height: 1.8; }
.article-lead { font-size: var(--text-lg); color: var(--color-text) !important; line-height: 1.7 !important; border-left: 3px solid var(--color-primary); padding-left: var(--space-5); margin-bottom: var(--space-8) !important; }
.article-container h2 { font-size: var(--text-xl); color: var(--color-text); margin: var(--space-12) 0 var(--space-4); }
.article-container ul { margin: 0 0 var(--space-6) 0; padding-left: 0; list-style: none; }
.article-container li { position: relative; padding-left: var(--space-6); margin-bottom: var(--space-3); line-height: 1.7; }
.article-container li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 1px; }
.article-cta { margin-top: var(--space-16); padding: var(--space-10); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.article-cta h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.article-cta p { color: var(--color-text-muted); margin-bottom: var(--space-6); line-height: 1.7; }

/* Articles listing on blog page */
.articles-section { padding-block: clamp(var(--space-12), 6vw, var(--space-20)); border-top: 1px solid var(--color-divider); }
.article-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: var(--space-6); margin-top: var(--space-8); }
.article-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-8); background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-lg); transition: border-color var(--transition), transform var(--transition); }
.article-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.article-card-tag { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); }
.article-card h3 { font-size: var(--text-lg); line-height: 1.15; }
.article-card p { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.65; }
.article-card-more { margin-top: auto; font-size: var(--text-sm); font-weight: 600; color: var(--color-primary); }
@media (max-width: 600px) { .article-cta { padding: var(--space-6); } }

/* Numbered lists in articles */
.article-container ol { margin: 0 0 var(--space-6) 0; padding-left: 0; list-style: none; counter-reset: step; }
.article-container ol > li { counter-increment: step; }
.article-container ol > li::before { content: counter(step) "."; background: none; width: auto; height: auto; top: 0; border-radius: 0; color: var(--color-primary); font-weight: 700; }