/*
 * Layout
 *
 * Page-level containers, grids, and structural rules. The "where things go".
 * Component typography and colour rules live in components/*.css.
 *
 * Envelope rule (applied universally): every page uses the same outer
 * envelope — max-width var(--content-max), centred in the viewport,
 * padded by var(--space-lg) on each side. This guarantees that the
 * wordmark in the site header and the first pixel of body content on
 * every page type share the same x coordinate, which is what makes pages
 * feel like "rooms in the same house".
 *
 * Inside that envelope, article pages have a real sidebar (see
 * .article-layout below). Non-article pages (.home, .static-page,
 * .search-page, .collection) reserve the sidebar column as empty space
 * on wide screens so their single column of content left-aligns with the
 * article reading column and the wordmark.
 */

/* Site header shell (shared across page types) */
.site-header {
    padding: var(--space-lg) 0 var(--space-md);
    margin-bottom: var(--space-lg);
}

.site-header-inner {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-border);
}

/* Shared envelope: every page type uses the same outer container width
   and padding. This is the key to cross-page alignment — the wordmark
   and the first pixel of body content share the same x coordinate. */
.home,
.static-page,
.search-page,
.collection,
.article-layout {
    max-width: var(--content-max);
    margin: 0 auto;
    padding: 0 var(--space-lg) var(--space-xxl);
}

/* Article layout: narrow reading column plus sidebar on wider screens.
   Single column on narrow screens (falls through to the shared rule above). */
.article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-xl);
}

@media (min-width: 1000px) {
    .article-layout {
        grid-template-columns: minmax(0, var(--reading-width)) 220px;
        column-gap: var(--space-xxl);
    }
}

/* Empty-sidebar pages: on wide screens, use the same two-column grid as
   article pages but leave the sidebar column empty. Every direct child
   is forced into column 1 (the reading-width column), and column 2 is
   reserved empty space. Net effect: content left-aligns with the article
   reading column and the header wordmark on every viewport width.

   .search-page is intentionally excluded from this group because the
   search page has real sidebar content (the filter panel) — its grid
   is defined in components/search.css. */
@media (min-width: 1000px) {
    .home,
    .static-page,
    .collection {
        display: grid;
        grid-template-columns: minmax(0, var(--reading-width)) 220px;
        column-gap: var(--space-xxl);
    }

    .home > *,
    .static-page > *,
    .collection > * {
        grid-column: 1;
    }
}

/* Below 1000px: no grid, but still constrain direct children of these
   non-article pages to the reading-width column, left-aligned by default
   because they are block-level elements in normal flow. */
@media (max-width: 999px) {
    .home > *,
    .static-page > *,
    .search-page > *,
    .collection > * {
        max-width: var(--reading-width);
    }
}

/* Home page sections — typography and vertical rhythm */
.home-intro {
    margin-bottom: var(--space-xl);
}

.home-intro p {
    font-size: 1.22rem;
    line-height: 1.55;
    color: var(--color-ink);
    margin-bottom: var(--space-sm);
    max-width: 620px;
}

.home-intro p:first-child {
    font-size: 1.35rem;
    line-height: 1.45;
}

.home-section {
    margin-bottom: var(--space-xl);
}

.home-section-heading {
    font-family: var(--font-sans);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-ink-muted);
    padding-bottom: var(--space-xs);
    border-bottom: 1px solid var(--color-border);
    margin-bottom: var(--space-md);
}

.collection-header {
    margin-bottom: var(--space-xl);
}

/* Narrow-screen layout adjustments */
@media (max-width: 720px) {
    .site-header {
        padding: var(--space-md) 0 var(--space-sm);
        margin-bottom: var(--space-lg);
    }

    .site-header-inner {
        flex-direction: column;
        gap: var(--space-xs);
        align-items: flex-start;
    }

    .home-intro p:first-child {
        font-size: 1.22rem;
    }

    .home-intro p {
        font-size: 1.1rem;
    }
}