@layer components {
    .site-nav__list {
        margin-top: calc(var(--spacer-vertical));
        margin-bottom: 0;
        list-style: none;
        display: flex;
        justify-content: center;
        gap: calc(var(--spacer-inter-item) / 2);
        font-family: var(--font-sans);
        font-size: var(--font-size-ui);
        line-height: var(--line-height-ui);
        letter-spacing: var(--letter-spacing-ui);
    }

    .site-nav__list a {
        text-decoration: none;
    }

    .site-nav__list a:is(:hover, :focus-visible) {
        text-decoration: underline;
        text-decoration-thickness: .045em;
        text-underline-offset: .14em;
    }

    .site-nav__list li+li::before {
        content: "·";
        margin-inline: calc(var(--spacer-inter-item) / 2);
    }

    /* @supports not (gap: 16px) {
        .site-nav__list>*+* {
            margin-inline-start: var(--_nav-gap);
        }
    } */
}