.topbar nav a {
    font-size: .8rem;
    letter-spacing: .16em;
}

.nav-dropdown {
    position: relative;
    display: flex;
    align-items: center;
}

.topbar nav .nav-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: #a99a86;
    cursor: pointer;
    font: 700 .8rem "Courier New", monospace;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.nav-dropdown-trigger span {
    color: var(--gold);
    font-size: 1rem;
    line-height: 1;
    transition: transform .2s ease;
}

.nav-dropdown:hover .nav-dropdown-trigger,
.nav-dropdown:focus-within .nav-dropdown-trigger,
.nav-dropdown.open .nav-dropdown-trigger {
    color: var(--cream);
}

.nav-dropdown:hover .nav-dropdown-trigger span,
.nav-dropdown:focus-within .nav-dropdown-trigger span,
.nav-dropdown.open .nav-dropdown-trigger span {
    transform: rotate(180deg);
}

.season-dropdown {
    position: absolute;
    top: calc(100% + 25px);
    left: 50%;
    width: 390px;
    max-height: min(68vh, 520px);
    overflow-y: auto;
    padding: 10px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
    background: #211a14;
    border: 1px solid #574533;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, -8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 100;
}

.season-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -26px;
    height: 26px;
}

.season-dropdown::after {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    background: #211a14;
    border-left: 1px solid #574533;
    border-top: 1px solid #574533;
    transform: translateX(-50%) rotate(45deg);
}

.nav-dropdown:hover .season-dropdown,
.nav-dropdown:focus-within .season-dropdown,
.nav-dropdown.open .season-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}

.topbar nav .season-dropdown a {
    display: grid;
    gap: 2px;
    padding: 11px 12px;
    color: #d7cab8;
    font: 700 .77rem/1.25 Georgia, serif;
    letter-spacing: 0;
    text-transform: none;
    border: 1px solid transparent;
}

.topbar nav .season-dropdown a:hover,
.topbar nav .season-dropdown a:focus-visible {
    color: #fff5df;
    background: #30251b;
    border-color: #574533;
}

.topbar nav .season-dropdown-all {
    grid-column: 1 / -1;
    padding: 12px 13px;
    margin-bottom: 3px;
    background: #2a2118;
    border-bottom: 1px solid #574533;
}

@media (max-width: 900px) {
    .nav-dropdown {
        display: block;
        width: 100%;
    }

    .topbar nav .nav-dropdown-trigger {
        width: 100%;
        justify-content: space-between;
    }

    .season-dropdown {
        position: static;
        width: 100%;
        margin-top: 14px;
        padding: 8px;
        display: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        box-shadow: none;
        grid-template-columns: 1fr 1fr;
    }

    .season-dropdown::before,
    .season-dropdown::after {
        display: none;
    }

    .nav-dropdown:hover .season-dropdown,
    .nav-dropdown:focus-within .season-dropdown {
        display: none;
        transform: none;
    }

    .nav-dropdown.open .season-dropdown,
    .nav-dropdown.open:hover .season-dropdown,
    .nav-dropdown.open:focus-within .season-dropdown {
        display: grid;
        transform: none;
    }
}

@media (max-width: 520px) {
    .season-dropdown {
        grid-template-columns: 1fr;
        max-height: 55vh;
        overflow-y: auto;
    }

    .topbar nav .season-dropdown-all {
        grid-column: auto;
    }
}