.posts-main { min-height: 70vh; padding: 48px 0 84px; }
.posts-home-link { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 24px; color: var(--teal); font-size: 13px; font-weight: 650; }
.posts-home-link:hover { color: var(--blue); }
.posts-home-link:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; }
.posts-heading { margin-bottom: 32px; }
.posts-heading h1 { margin: 0; color: var(--ink); font-size: clamp(32px, 5vw, 48px); letter-spacing: -.035em; line-height: 1.1; }
.posts-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.posts-filter { display: inline-flex; min-height: 40px; align-items: center; padding: 9px 16px; color: var(--ink); background: rgba(255,255,255,.8); border: 1px solid #dce7eb; border-radius: 32px; font-size: 14px; font-weight: 600; line-height: 1.4; }
.posts-filter:hover { border-color: #0177a9; }
.posts-filter[aria-current="page"] { color: #fff; background: #0177a9; border-color: #0177a9; }
.posts-filter:focus-visible { outline: 2px solid #0177a9; outline-offset: 3px; }
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.posts-grid .article-card { height: 320px; }
.posts-grid .article-link { grid-template-rows: 60% minmax(0, 40%); }
.posts-grid .article-content { padding: 16px; }
.posts-grid .article-title { font-size: 16px; }
.posts-grid .article-description { font-size: 12px; }
.posts-actions { display: grid; justify-items: center; gap: 12px; margin-top: 32px; }
.posts-more { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; padding: 12px 28px; color: #fff; background: var(--brand-gradient); border-radius: 32px; font-size: 15px; font-weight: 600; }
.posts-more:hover { filter: brightness(1.05); }
.posts-more:focus-visible { outline: 2px solid #0177a9; outline-offset: 4px; }
.posts-more[aria-disabled="true"] { opacity: .65; cursor: wait; }
.posts-more[hidden] { display: none; }
.posts-status { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) {
    .posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .posts-main { padding: 32px 0 56px; }
    .posts-grid { grid-template-columns: 1fr; }
}