@layer layout {
    .site-header {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--backdrop);
        border-bottom: 1px solid var(--rule);
    }

    .site-header__inner,
    .section__inner,
    .site-footer__inner {
        width: min(100% - (2 * var(--space-s)), var(--container));
        margin-inline: auto;
    }

    .site-header__inner {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-s);
        min-height: var(--header-height);
    }

    .site-nav__list {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-m);
        list-style: none;
    }

    /* Every section is an anchor target under a sticky header, so each needs the offset. */
    .section {
        padding-block: var(--space-2xl);
        scroll-margin-top: var(--header-height);
    }

    .section + .section {
        border-top: 1px solid var(--rule);
    }

    .section--hero {
        display: grid;
        place-items: center;
        min-height: min(80vh, 44rem);
        background: var(--surface-sunken);
        text-align: center;
    }

    .hero__inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-s);
    }

    .carousel {
        margin-block: var(--space-l);
    }

    .work {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: calc((100% - (var(--cols) - 1) * var(--space-m)) / var(--cols));
        gap: var(--space-m);
        list-style: none;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding-block-end: var(--space-2xs);
    }

    /* The controls do nothing without JS, and the track is swipeable without them. */
    .carousel__controls {
        display: none;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-s);
    }

    :root.js .carousel__controls {
        display: flex;
    }

    .carousel__nav {
        display: flex;
        gap: var(--space-2xs);
    }

    /* carousel.js calls scrollBy with no behavior, so this is what decides smooth vs instant. */
    @media (prefers-reduced-motion: no-preference) {
        .work {
            scroll-behavior: smooth;
        }
    }

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

    .prose ul {
        padding-left: var(--space-m);
        max-width: var(--measure);
    }

    .piece__inner {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--space-m);
        padding: var(--space-m);
    }

    .site-footer {
        padding-block: var(--space-l);
        border-top: 1px solid var(--rule);
    }

    .site-footer__inner {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-2xs);
    }

    @media (width >= 56.25rem) {
        :root {
            --cols: 2;
        }

        .piece__inner {
            grid-template-columns: 7fr 4fr;
            align-items: start;
        }
    }

    @media (width >= 75rem) {
        :root {
            --cols: 3;
        }
    }
}