.page-header { padding:160px 64px 60px; background:var(--paper); }
.page-title  { font-size:clamp(32px,4vw,50px); font-weight:800; color:var(--ink); max-width:600px; line-height:1.25; }
.page-sub    { margin-top:16px; font-size:15.5px; color:var(--ink-soft); max-width:540px; line-height:1.85; }
.filters { display:flex; gap:10px; flex-wrap:wrap; padding:0 64px; margin-top:36px; }
.filter-btn {
    background:#fff; border:1px solid var(--line); color:var(--ink-soft); border-radius:40px;
    padding:9px 20px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:.2s;
}
.filter-btn:hover  { border-color:var(--sea); color:var(--sea-deep); }
.filter-btn.active { background:var(--ink); color:#fff; border-color:var(--ink); }

.articles-wrap  { padding:50px 64px 60px; background:var(--paper-2); }
.articles-grid  { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; min-height:320px; }

.article-card { border-radius:20px; overflow:hidden; background:var(--paper); border:1px solid var(--line); transition:transform .3s, opacity .25s; cursor:pointer; }
.article-card:hover { transform:translateY(-5px); }
.article-img  { width:100%; height:200px; object-fit:cover; display:block; }
.article-body { padding:24px; }
.article-tag  { display:inline-block; background:rgba(30,138,124,0.10); color:var(--sea-deep); font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 14px; border-radius:40px; margin-bottom:14px; }
.article-title{ font-size:16.5px; font-weight:700; color:var(--ink); line-height:1.55; margin-bottom:13px; }
.article-meta { display:flex; gap:14px; font-size:12px; color:var(--muted); flex-wrap:wrap; }

.articles-grid.is-switching .article-card { opacity:0; transform:translateY(10px); }

.pagination { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:54px; flex-wrap:wrap; }
.page-btn {
    min-width:42px; height:42px; padding:0 6px; border-radius:12px; border:1px solid var(--line);
    background:#fff; color:var(--ink-soft); font-family:inherit; font-size:14px; font-weight:700;
    cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center;
}
.page-btn:hover:not(.active):not(:disabled) { border-color:var(--sea); color:var(--sea-deep); }
.page-btn.active   { background:var(--sea); border-color:var(--sea); color:#fff; }
.page-btn:disabled { opacity:.35; cursor:not-allowed; }
.page-btn.nav-arrow svg { width:16px; height:16px; }
.page-dots { color:var(--muted); font-size:13px; padding:0 4px; user-select:none; }
.page-status { text-align:center; margin-top:14px; font-size:12.5px; color:var(--muted); }

@media (max-width:1024px) {
    .page-header, .articles-wrap { padding-left:24px; padding-right:24px; }
    .filters { padding-left:24px; padding-right:24px; }
    .articles-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:640px) {
    .articles-grid { grid-template-columns:1fr; }
    .page-header { padding-top:120px; }
}

html[data-theme="dark"] .filter-btn { background: #1c2541; border-color: var(--line); color: var(--ink-soft); }
html[data-theme="dark"] .filter-btn.active { background: var(--sea); border-color: var(--sea); color: #fff; }
html[data-theme="dark"] .article-card { background: #1c2541 !important; border-color: var(--line); }
html[data-theme="dark"] .page-btn { background: #1c2541; border-color: var(--line); color: var(--ink-soft); }
html[data-theme="dark"] .page-btn.active { background: var(--sea); border-color: var(--sea); color: #fff; }
@media (max-width: 1024px) {
    nav .nav-cta { display: none; }
}