.articles-main { padding-top: 12px; padding-bottom: 72px; min-height: 65vh; }
.articles-intro { max-width: 760px; margin: 40px 0 32px; }
.articles-intro h1 { font-size: clamp(2rem, 5vw, 3.25rem); margin-bottom: 16px; }
.articles-intro p, .article-content p, .articles-language-note { color: var(--text-muted); }
.articles-list { display: grid; gap: 24px; }
.article-card { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: var(--bg-card); overflow: hidden; }
.article-cover { display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg-dark); }
.article-cover img { display: block; width: 100%; height: auto; }
.article-content { min-width: 0; padding: 32px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--text-muted); font-size: 0.85rem; margin-bottom: 16px; }
.article-meta span { color: #b4ff00; }
.article-content h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 16px; }
.article-content h2 a { color: var(--text-main); }
.article-content h2 a:hover { color: var(--accent-blue); }
.article-content p { margin-bottom: 24px; }
.articles-language-note { font-size: 0.85rem; margin-top: 24px; }
.articles-page main a:focus-visible { outline: 3px solid #b4ff00; outline-offset: 4px; }
@media (max-width: 760px) {
    .articles-main { padding-bottom: 48px; }
    .articles-intro { margin-top: 28px; }
    .article-card { grid-template-columns: minmax(0, 1fr); }
    .article-cover { padding: 20px; }
    .article-cover img { max-width: 400px; }
    .article-content { padding: 24px; }
    .article-content .btn { width: 100%; }
}