/* Page frame: header, nav, main, footer, container widths.
   Mobile-first in the literal sense: base styles ARE the phone styles. The only
   queries widen page padding at the two documented breakpoints (40em, 64em —
   the closed set in docs/agents/styling.md; custom properties are invalid in
   query conditions, so the values are literal). */

@layer layout {
    /* Wide container — a nineteen-column leaderboard wants the screen. Prose
       (footer disclaimer, legend definitions) is constrained at the element. */
    body {
        margin-inline: auto;
        max-inline-size: 90rem;
        padding-inline: var(--space-md);
    }

    /* Short pages (quarantine when empty) shouldn't leave the footer mid-screen. */
    main {
        min-block-size: 60vh;
        padding-block-end: var(--space-lg);
    }

    .site-header {
        border-block-end: 1px solid var(--border);
    }

    .site-header nav {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs) var(--space-md);
        padding-block: var(--space-sm);
    }

    .site-header a {
        color: var(--text);
        font-size: var(--text-sm);
        text-decoration: none;
    }

    .site-header a:first-child {
        font-weight: 700;
    }

    .site-header a:hover {
        color: var(--link);
    }

    .site-footer {
        border-block-start: 1px solid var(--border);
        color: var(--text-muted);
        font-size: var(--text-sm);
        margin-block-start: var(--space-xl);
        padding-block: var(--space-md);
    }

    .site-footer p {
        max-inline-size: 65ch;
    }

    @media (min-width: 40em) {
        body {
            padding-inline: var(--space-lg);
        }
    }

    @media (min-width: 64em) {
        body {
            padding-inline: var(--space-xl);
        }
    }
}