.header-content {
    align-items: center;
    container: header-content/inline-size;
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr auto auto;
    inline-size: var(--w-content);
    margin-inline: auto;
    max-inline-size: var(--mw-3xl)
}

.brand-container {
    order: 1
}

.navvy-container {
    display: none;
    order: 2
}

.options-container {
    grid-column: 3;
    order: 3
}

@container header-content (min-width: 54rem) {
    .header-content>.navvy-container {
        display: block
    }

    .header-content>.options-container {
        grid-column: initial
    }
}

.navvy-container>nav>ul {
    color: currentColor;
    display: flex;
    font-weight: 700;
    gap: .25rem;
    line-height: 1;
    list-style: none;
    padding: 0;
    position: relative
}

.navvy-container>nav>ul>li a {
    text-decoration: none
}

.navvy-container>nav>ul>li {
    padding: var(--s-2xs) var(--s-3xs);
    position: relative;
    transition: background .3s, color .3s
}

.navvy-container>nav>ul>li:where(:hover, :focus-within) {
    background: var(--c-accent)
}

.navvy-container>nav>ul>li:has([popover]:popover-open) {
    background: var(--c-white-point);
    color: var(--c-g-1)
}

.navvy-container>nav>ul>li>button {
    background: none;
    color: inherit;
    letter-spacing: inherit;
    padding-inline-end: .75rem;
    text-transform: inherit
}

.navvy-container>nav>ul>li>:where(button, a):after {
    content: "";
    display: block;
    inset: 0;
    position: absolute
}

.navvy-container>nav>ul>li>button:before {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIGZpbGw9Im5vbmUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImNzcy1pNmR6cTEiPjxwYXRoIGQ9Im02IDkgNiA2IDYtNiIvPjwvc3ZnPg==);
    background-size: cover;
    block-size: .875rem;
    content: "";
    display: inline-block;
    filter: brightness(0);
    inline-size: .875rem;
    position: absolute;
    right: .25rem;
    transition: transform .3s, filter .3s
}

.navvy-container>nav>ul>li:has([popover]:popover-open)>button:before {
    filter: invert(1);
    transform: rotate(180deg)
}

.navvy-container>nav>ul>li>[popover] {
    border: 1px solid var(--c-frame);
    inset: unset;
    min-inline-size: 8rem;
    opacity: 0;
    padding: 0;
    transition: display allow-discrete .3s, opacity .3s, translate .3s;
    transition-timing-function: ease-in;
    translate: 0 30px;
    z-index: 6942069
}

.navvy-container>nav>ul>li>[popover]:popover-open {
    opacity: 1;
    transition-timing-function: ease-out;
    translate: 0 0
}

.menu-container,
.options-container {
    align-items: center;
    display: flex;
    gap: var(--s-3xs);
    justify-content: flex-end
}

.brand-container a {
    align-items: center;
    block-size: 3.5rem;
    color: currentColor;
    display: flex;
    gap: 2%;
    max-width: -moz-fit-content;
    max-width: fit-content;
    transition: block-size .3s
}

.brand-container a>svg {
    block-size: 100%
}

.brand-container a>svg:first-of-type {
    fill: currentColor
}

.brand-container a>svg:nth-of-type(2) {
    fill: currentColor;
    block-size: 50%
}

#hd {
    --b-color: var(--c-p-4);
    background: var(--c-sheet);
    container-name: header;
    container-type: inline-size;
    padding-block: var(--s-sm);
    position: sticky;
    top: 0;
    transition: padding .3s;
    z-index: 692401
}

#hd.enabled {
    padding-block: var(--s-2xs)
}

#hd.enabled .brand-container a {
    block-size: 2.5rem
}

@container header (max-width: 36rem) {
    .brand-container a>svg:nth-of-type(2) {
        display: none
    }

    .brand-container a>svg:nth-of-type(3) {
        display: block
    }

    .brand-container a {
        block-size: 2.75rem
    }

    #hd.enabled .brand-container a {
        block-size: 2.25rem
    }
}

#globalMenu[popover] {
    block-size: 100vb;
    border: unset;
    inline-size: min(80vi, 24rem);
    inset-inline-start: unset;
    margin: 0;
    margin-inline-start: auto;
    transition: display allow-discrete .25s ease-out, overlay allow-discrete .5s, opacity .25s ease-out, translate .25s ease-out;
    transition-timing-function: ease-in;
    translate: -100%;

    &:popover-open {
        transition-timing-function: ease-out;
        translate: 0
    }

    @starting-style {
        &:popover-open {
            translate: -100%
        }
    }

    -ms-overflow-style:none;
    overflow-y:scroll;
    scrollbar-width:none
}

#globalMenu[popover]::-webkit-scrollbar {
    display: none
}

#globalMenu[popover] {
    border-inline-start: 1px solid var(--c-frame);
    inset-inline-end: 0;
    translate: 100%;

    @starting-style {
        &:popover-open {
            translate: 100%
        }
    }
}

[title="close navigation menu"] {
    position: absolute;
    right: .5rem;
    top: .5rem
}

#globalMenu form.search-form {
    gap: .5rem
}

#globalMenu form.search-form input {
    block-size: 100%
}

.fish {}