@media (max-width: 900px) {
    .site-nav {
        flex-wrap: wrap;
    }

    .nav-links {
        width: 100%;
        gap: 0.4rem;
    }

    .nav-search {
        width: 100%;
    }

    .lede {
        padding: 2rem 1.25rem;
    }
}

@media (max-width: 640px) {
    .topbar, .site-nav {
        padding: 0.75rem 1rem;
    }

    .page-content {
        padding: 1.5rem 1rem 2rem;
    }

    .home-grid,
    .featured-posts,
    .recent-posts-grid,
    .posts-grid,
    .related-grid {
        grid-template-columns: 1fr;
    }

    .masthead {
        position: sticky;
    }

    .prose {
        max-width: 100%;
        padding: 0;
        font-size: 1rem;
        line-height: 1.75;
    }

    .article-body .prose {
        max-width: 100%;
        padding: 0;
    }

    .article-body .prose p {
        font-size: 1rem;
        line-height: 1.75;
    }
}