.site-header {
    position: relative;
    height: clamp(80px, calc(9.2vw + var(--wave-height)), 260px);
    overflow: hidden;
    background: #1d2a0c;
}

.site-header::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: var(--wave-height);
    background: var(--wave) center / 100% 100% no-repeat;
    pointer-events: none;
}

.brand {
    position: absolute;
    inset: 0;
    background: url("../images/logo-banner-centred.jpg") 50% 20% / cover no-repeat;
}

.site-nav {
    position: sticky;
    z-index: 10;
    top: 0;
    background: var(--night);
}

.nav-inner {
    display: flex;
    gap: 8px 20px;
    align-items: center;
    min-height: 58px;
}

.nav-links {
    display: flex;
    gap: 2px;
    min-width: 0;
    padding: 10px 24px 10px 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
}

.nav-links::-webkit-scrollbar {
    display: none;
}

.nav-links a {
    flex-shrink: 0;
    padding: 6px 10px;
    border-radius: var(--radius-sm);
    color: var(--mist);
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
    transition: background-color var(--ease), color var(--ease), box-shadow var(--ease);
}

.nav-links a:hover {
    color: var(--night);
    background: var(--aqua);
    box-shadow: none;
}

.nav-links a[aria-current="page"]:not(:hover) {
    color: var(--yellow);
    box-shadow: inset 0 -2px 0 var(--yellow);
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.nav-primary {
    flex: 0 0 auto;
    margin-left: -10px;
    padding-right: 0;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
}

.nav-series {
    position: relative;
    flex: 1 1 auto;
    padding-left: 14px;
}

.nav-series::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    height: 22px;
    border-left: 1px solid rgba(228, 236, 236, 0.25);
    transform: translateY(-50%);
}

.nav-series a {
    color: #fff;
    font-size: 14px;
}

@media (hover: hover) and (pointer: fine) {
    .nav-series {
        flex-wrap: wrap;
        align-content: center;
        padding-block: 8px;
        padding-right: 0;
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .nav-series::before {
        top: 14px;
        bottom: 14px;
        height: auto;
        transform: none;
    }
}

@media (max-width: 720px) {
    .nav-inner {
        flex-wrap: wrap;
        gap: 0 12px;
        min-height: 0;
    }

    .nav-links a {
        font-size: 14px;
    }

    .nav-primary {
        padding-block: 8px;
    }

    .site-nav .btn {
        margin-left: auto;
        padding: 8px 14px;
        font-size: 14px;
    }

    .nav-series {
        flex-basis: calc(100% + var(--gutter) * 2);
        order: 3;
        margin: 0 calc(var(--gutter) * -1);
        padding: 6px var(--gutter) 8px calc(var(--gutter) - 10px);
        border-top: 1px solid rgba(228, 236, 236, 0.15);
    }

    .nav-series::before {
        display: none;
    }
}