@layer block {
    .footer {
        padding-block: var(--space-6);
        padding-inline: max(var(--space-page-mobile), calc((100% - var(--content-max-width)) / 2));
        text-align: center;
        border-top: 1px solid var(--color-border);

        & .footer__wordmark {
            font-family: var(--font-display);
            font-size: var(--text-headline-md);
            font-weight: 700;
            color: var(--color-ink);
            letter-spacing: -0.02em;

            & span {
                color: var(--color-secondary);
            }
        }

        & .footer__tagline {
            margin-top: var(--space-1);
            font-family: var(--font-body);
            font-size: var(--text-body-md);
            color: var(--color-text-muted);
        }

        & .footer__links {
            /* .cluster does the layout; centring it is this footer's business. */
            --cluster-space: var(--space-4);

            margin-top: var(--space-4);
            justify-content: center;
        }

        & .footer__link {
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            color: var(--color-text-muted);
            text-decoration: underline;
            text-underline-offset: 0.25em;
            text-decoration-color: transparent;
            transition: color var(--transition-fast), text-decoration-color var(--transition-fast);

            &:hover,
            &:focus-visible {
                color: var(--color-secondary);
                text-decoration-color: currentcolor;
            }
        }

        & .footer__copyright {
            margin-top: var(--space-3);
            font-family: var(--font-ui);
            font-size: var(--text-label-caps);
            color: var(--color-outline);
        }
    }
}