.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; }

.articles-wrap  { padding:50px 64px 80px; background:var(--paper-2); }
.articles-grid  { display:flex; flex-direction:column; gap:14px; min-height:100px; }

.articles-sections { display:flex; flex-direction:column; gap:56px; }
.articles-section.is-hidden { display:none; }

.articles-section-head { margin-bottom:24px; }
.articles-section-head .section-label { font-size:12.5px; font-weight:700; color:var(--sea-deep); letter-spacing:.02em; margin-bottom:8px; }
.articles-section-head .section-title { font-size:clamp(20px,2.4vw,26px); font-weight:800; color:var(--ink); }

.filter-bar { display:flex; gap:10px; margin-bottom:36px; flex-wrap:wrap; }
.filter-btn {
    font-family:inherit; font-size:13.5px; font-weight:700; color:var(--ink-soft);
    background:var(--paper); border:1px solid var(--line); border-radius:40px;
    padding:9px 20px; cursor:pointer; transition:.2s;
}
.filter-btn:hover { border-color:var(--sea); color:var(--ink); }
.filter-btn.is-active { background:var(--sea-deep); border-color:var(--sea-deep); color:#fff; }

.article-title--fa { text-align:right; margin-bottom:6px; }
.article-title-en { font-size:12.5px; color:var(--ink-soft); line-height:1.6; margin:0; }
.article-badge--ongoing { background:rgba(230,160,30,0.14); color:#b5790a; }
html[data-theme="dark"] .article-badge--ongoing { background:rgba(230,160,30,0.18); color:#e6a01e; }

.ongoing-card { cursor:default; }
.ongoing-card:hover { transform:none; border-color:var(--line); box-shadow:none; }

.article-card {
    display:flex; align-items:center; gap:18px; text-decoration:none;
    padding:20px 26px; border-radius:16px; background:var(--paper); border:1px solid var(--line);
    transition:transform .25s, border-color .25s, box-shadow .25s; cursor:pointer;
}
.article-card:hover { transform:translateX(-4px); border-color:var(--sea); box-shadow:0 8px 24px rgba(30,138,124,0.10); }
.article-card.is-pending { cursor:default; opacity:.55; }
.article-card.is-pending:hover { transform:none; border-color:var(--line); box-shadow:none; }

.article-num {
    flex-shrink:0; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    background:rgba(30,138,124,0.10); color:var(--sea-deep); font-weight:800; font-size:14px;
}
.article-body { flex:1; min-width:0; }
.article-badge { display:inline-block; background:rgba(30,138,124,0.10); color:var(--sea-deep); font-size:11px; font-weight:700; letter-spacing:.02em; padding:4px 12px; border-radius:40px; margin-bottom:8px; }
.article-title { font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.7; text-align:left; }
.article-arrow { flex-shrink:0; color:var(--muted); transition:.25s; }
.article-card:hover .article-arrow { color:var(--sea-deep); transform:translate(2px,-2px); }
@media (max-width:1024px) {
    .page-header, .articles-wrap { padding-left:24px; padding-right:24px; }
}
@media (max-width:640px) {
    .page-header { padding-top:120px; }
    .article-card { padding:16px 18px; gap:12px; }
    .article-num { width:32px; height:32px; font-size:12.5px; }
    .article-title { font-size:14.5px; }
}
html[data-theme="dark"] .article-card { background: #1c2541 !important; border-color: var(--line); }
@media (max-width: 1024px) {
    nav .nav-cta { display: none; }
}