@layer components {
    .site-footer {
        border-block-start: 1px solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-text-muted);
        font-size: var(--size-step--1);

        & .site-footer__inner {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-2xs) var(--space-m);
            align-items: center;
            justify-content: space-between;
            padding-block: var(--space-s);
        }

        /* A thumb's target, 44 px tall (WCAG 2.5.5), not a line of text. */
        & .site-footer__privacy a {
            display: inline-flex;
            align-items: center;
            min-block-size: 44px;
            color: var(--color-text-muted);
        }
    }
}