/* Page frame: header, nav, main, footer, container widths.
   A centered nameplate over a double rule; small-caps nav beneath it; the
   footer closes the paper with the same rule. Mobile-first in the literal
   sense: base styles ARE the phone styles (see docs/agents/styling.md). */

@layer layout {
    body {
        margin-inline: auto;
        max-inline-size: 90rem;
        padding-inline: var(--space-md);
    }

    main {
        min-block-size: 60vh;
        padding-block-end: var(--space-lg);
    }

    .site-header {
        border-block-end: 6px double var(--border-strong);
    }

    .site-header nav {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-2xs) var(--space-md);
        justify-content: center;
        padding-block: var(--space-sm);
    }

    /* The nameplate takes its own centered line; the nav wraps beneath it. */
    .site-header .brand {
        color: var(--text);
        flex-basis: 100%;
        font-family: var(--font-display);
        font-size: var(--text-h1);
        font-weight: 700;
        text-align: center;
    }

    .site-header a {
        color: var(--text-muted);
        font-size: var(--text-sm);
        letter-spacing: 0.08em;
        text-decoration: none;
        text-transform: uppercase;
    }

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

    .site-header .brand:hover {
        color: var(--text);
    }

    .site-header a.active {
        color: var(--text);
        text-decoration: underline;
        text-decoration-color: var(--accent);
        text-decoration-thickness: 2px;
        text-underline-offset: 0.4em;
    }

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

    .site-footer p {
        margin-inline: auto;
        max-inline-size: 65ch;
        text-align: center;
    }

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

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