@layer components {
    .skip-link {
        position: absolute;
        inset-block-start: var(--space-2);
        inset-inline-start: var(--space-2);
        padding: var(--space-3) var(--space-4);
        transform: translateY(calc(-100% - var(--space-4)));
        border-radius: var(--radius-md);
        background: var(--color-action);
        color: var(--color-on-action);
        font-weight: var(--font-weight-semibold);
        text-decoration: none;
        transition: transform var(--duration-fast) var(--ease-standard);
    }

    .skip-link:focus-visible {
        transform: translateY(0);
    }

    .site-header {
        border-block-end: var(--border-thin) solid var(--color-border);
        background: var(--color-surface);
    }

    .site-header__inner {
        min-block-size: var(--space-16);
        justify-content: space-between;
    }

    .site-identity {
        display: inline-flex;
        min-block-size: var(--space-12);
        align-items: center;
        color: var(--color-text);
        font-size: var(--text-xl);
        font-weight: var(--font-weight-bold);
        letter-spacing: var(--tracking-component);
        text-decoration: none;
    }

    .site-identity:hover {
        color: var(--color-action);
    }

    .site-nav__list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-0);
        list-style: none;
    }

    .site-nav__link {
        display: inline-flex;
        min-block-size: var(--space-12);
        align-items: center;
        padding-inline: var(--space-2);
        color: var(--color-text-muted);
        font-weight: var(--font-weight-medium);
        text-decoration: none;
    }

    .site-nav__link:hover {
        color: var(--color-action);
    }

    .button {
        display: inline-flex;
        min-block-size: var(--space-12);
        align-items: center;
        justify-content: center;
        padding-inline: var(--space-4);
        border: var(--border-thin) solid var(--color-border-strong);
        border-radius: var(--radius-md);
        background: var(--color-surface);
        color: var(--color-text);
        font-weight: var(--font-weight-semibold);
        line-height: var(--leading-small);
        text-decoration: none;
        transition:
            border-color var(--duration-fast) var(--ease-standard),
            background-color var(--duration-fast) var(--ease-standard),
            color var(--duration-fast) var(--ease-standard);
    }

    .button:hover,
    .button:active {
        border-color: var(--color-action);
        background: var(--color-surface-muted);
        color: var(--color-action-hover);
    }

    .site-footer {
        border-block-start: var(--border-thin) solid var(--color-border);
        background: var(--color-surface);
        color: var(--color-text-muted);
        font-size: var(--text-sm);
    }

    .site-footer__inner {
        min-block-size: var(--space-20);
        justify-content: space-between;
    }
}