.ss-blog-page { max-width: 1450px; width: 100%; margin: 0 auto; }
    .ss-blog-title { text-align: center; font-weight: 900; font-size: 6rem; color: var(--text-dark-green); margin: 100px 0 0; }
    .ss-blog-caption { text-align: center; padding-bottom: 30px; font-weight: 400; font-size: 1.6rem; color: var(--neutral-charcoal); }
    .ss-archive-context { text-align: center; color: var(--primary-forest); font-size: 1.4rem; font-weight: 700; margin: -15px 0 30px; }
    .ss-blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); align-items: flex-start; row-gap: max(20px, 5.6rem); column-gap: max(2.4rem, 16px); padding: 10px; margin-top: 50px; }
    .ss-empty { text-align: center; padding: 4rem 1rem; font-size: 1.6rem; color: var(--neutral-charcoal); }

    .ss-pagination { margin: 5rem auto 2rem; text-align: center; font-size: 1.4rem; }
    .ss-pagination .nav-links { display: flex; justify-content: center; gap: .8rem; flex-wrap: wrap; }
    .ss-pagination a, .ss-pagination span { display: inline-flex; min-width: 36px; height: 36px; padding: 0 1rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--secondary-mint); color: var(--text-dark-green); font-weight: 700; }
    .ss-pagination .current { background: var(--primary-forest); color: #fff; }

    @media (max-width: 850px) {
        .ss-blog-title { margin-top: 78px; }
    }
    @media (max-width: 834px) {
        .ss-blog-grid { padding: 5px; column-gap: max(1rem, 8px); }
    }
    @media (max-width: 749px) {
        .ss-blog-grid { grid-template-columns: repeat(2, 1fr); row-gap: max(20px, 2.2rem); }
    }
    @media (max-width: 600px) {
        .ss-blog-title { font-size: 3.5rem; margin-top: 38px; }
        .ss-blog-caption { font-size: 1.2rem; }
    }
    @media (max-width: 435px) {
        .ss-blog-grid { grid-template-columns: 1fr; padding: 5px; }
    }