:root {
    --site-nav-paper: #fdf9f4;
    --site-nav-ink: #1c1c19;
    --site-nav-muted: #444748;
    --site-nav-red: #a73821;
    --site-nav-shell: 1120px;
}

.site-header {
    position: sticky;
    z-index: 100;
    top: 0;
    border-bottom: 1px solid rgba(28, 28, 25, 0.07);
    background: rgba(253, 249, 244, 0.93);
    backdrop-filter: blur(14px);
}

.site-nav-shell {
    width: min(calc(100% - 96px), var(--site-nav-shell));
    min-height: 70px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.site-home-mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: var(--site-nav-ink);
    text-decoration: none;
    font-size: 24px;
    line-height: 1;
}

.site-desktop-nav {
    display: flex;
    align-items: center;
    gap: 26px;
    color: var(--site-nav-ink);
    font: 600 10px/1.7 "IBM Plex Sans", Arial, sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.site-desktop-nav a,
.site-desktop-nav button,
.site-mobile-nav a,
.site-mobile-nav button {
    position: relative;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-decoration: none;
    text-transform: inherit;
    cursor: pointer;
    transition: color 180ms ease;
}

.site-desktop-nav a::after,
.site-desktop-nav button::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -9px;
    left: 0;
    height: 1px;
    background: var(--site-nav-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 200ms ease;
}

.site-desktop-nav a:hover,
.site-desktop-nav button:hover,
.site-desktop-nav .is-active,
.site-mobile-nav a:hover,
.site-mobile-nav button:hover,
.site-mobile-nav .is-active {
    color: var(--site-nav-red);
}

.site-desktop-nav a:hover::after,
.site-desktop-nav button:hover::after,
.site-desktop-nav .is-active::after {
    transform: scaleX(1);
}

.site-desktop-nav > span {
    color: rgba(68, 71, 72, 0.25);
}

.site-language-switch {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: 2px;
    color: var(--site-nav-muted);
    font-size: 9px;
    letter-spacing: 0.11em;
}

.site-language-switch > span {
    color: rgba(68, 71, 72, 0.3);
}

.site-language-switch a[aria-current="true"] {
    color: var(--site-nav-red);
}

.site-language-switch a[aria-current="true"]::after {
    transform: scaleX(1);
}

.site-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    color: var(--site-nav-ink);
    background: transparent;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
}

.site-mobile-nav {
    width: min(calc(100% - 40px), var(--site-nav-shell));
    margin-inline: auto;
    padding: 8px 0 26px;
    display: grid;
    gap: 18px;
    color: var(--site-nav-ink);
    font: 600 11px/1.7 "IBM Plex Sans", Arial, sans-serif;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.site-mobile-nav[hidden],
.site-mobile-nav.hidden {
    display: none;
}

.site-mobile-language-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(28, 28, 25, 0.12);
    color: var(--site-nav-muted);
}

.site-mobile-language-switch > span {
    color: rgba(68, 71, 72, 0.3);
}

.site-mobile-language-switch a[aria-current="true"] {
    color: var(--site-nav-red);
}

@media (max-width: 1050px) {
    .site-desktop-nav {
        gap: 17px;
        font-size: 9px;
    }
}

@media (max-width: 850px) {
    .site-nav-shell {
        width: min(calc(100% - 48px), var(--site-nav-shell));
    }

    .site-desktop-nav {
        display: none;
    }

    .site-menu-button {
        display: grid;
        place-items: center;
    }
}

@media (max-width: 600px) {
    .site-nav-shell {
        min-height: 68px;
    }
}