/* Page layout: containers, sections and grids. */

@layer layout {
    .container {
        width: min(100% - 2 * var(--gutter), var(--width));
        margin-inline: auto;
    }

    .container-narrow {
        width: min(100% - 2 * var(--gutter), var(--width-narrow));
        margin-inline: auto;
    }

    .main {
        display: block;
    }

    .main:focus {
        outline: none;
    }

    .section {
        padding-block: var(--section-space);
    }

    .section + .section:not(.section-muted) {
        padding-top: 0;
    }

    /* A band with a light grey background */
    .section-muted {
        background: var(--surface-muted);
    }

    .section-muted + .section:not(.section-muted) {
        padding-top: var(--section-space);
    }

    /* A band with a warm off-white background, matching the hero */
    .section-warm {
        background: var(--warm);
    }

    .section-head {
        display: grid;
        justify-items: start;
        gap: var(--space-4);
        max-width: 46rem;
        margin-bottom: var(--space-8);
    }

    .section-head-center {
        margin-inline: auto;
        text-align: center;
        justify-items: center;
    }

    .section-head p {
        color: var(--text-muted);
        font-size: var(--text-lg);
    }

    /* Heading on the left, link on the right */
    .section-head-row {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-5);
        margin-bottom: var(--space-8);
    }

    .section-head-row .section-head {
        margin-bottom: 0;
    }

    .section-foot {
        display: flex;
        justify-content: center;
        margin-top: var(--space-6);
    }

    /* Two columns: content + aside. Stacks on small screens. */
    .split {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-7);
        align-items: start;
    }

    @media (min-width: 900px) {
        .split {
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            gap: clamp(2.5rem, 5vw, 5rem);
        }

        .split-wide {
            grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        }

        .split-center {
            align-items: center;
        }

        .split-sticky > :first-child {
            position: sticky;
            top: calc(var(--header-height) + var(--space-6));
        }
    }

    .grid {
        display: grid;
        gap: var(--space-4);
        grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min, 16rem)), 1fr));
    }

    .grid-2 {
        --grid-min: 13rem;
    }

    .grid-3 {
        --grid-min: 19rem;
    }

    .stack {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-4);
    }

    .stack > * {
        margin: 0;
    }

    .stack-lg {
        gap: var(--space-5);
    }

    .stack-fill {
        align-items: stretch;
    }

    .cluster {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2);
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-3);
    }

    .prose {
        max-width: var(--measure);
    }

    .prose > * + * {
        margin-top: var(--space-4);
    }

    .prose > h2:not(:first-child) {
        margin-top: var(--space-8);
    }

    .prose > h3 {
        margin-top: var(--space-6);
    }

    .prose ul {
        display: grid;
        gap: var(--space-2);
        padding-left: var(--space-5);
        list-style: disc;
    }

    .lead {
        color: var(--text);
        font-size: var(--text-lg);
    }
}