.site-header {
    --height-header-full: 4rem;
    --height-header-collapsed: 3rem;
    position: fixed;
    top: 0;
    z-index: 10;
    width: 100%;
    max-height: var(--height-header-full);
    height: var(--height-header-full);

    background: rgb(250 250 250 / 0.6);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);

    transition: all 0.4s ease;

    .inner-site-header {
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        grid-template-rows: var(--height-header-full) auto;
        padding: 0 1rem;
        align-items: center;
        height: 100%;
        gap: var(--gap-size);
        transition: all 0.4s ease;

        .brand {
            img {
                display: block;
                flex: 0 0 auto;
                width: 100%;
            }

            grid-column: 2;
            margin-top: .1rem;
            inline-size: 9rem;
            block-size: var(--height-header-collapsed);
            overflow: hidden;
            display: flex;
            align-items: flex-end;
            transition: all 0.3s ease;
        }

        .menu-toggle {
            position: relative;
            width: 2.4rem;
            height: 2.4rem;
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            background: unset;
            border: unset;
            padding: 0;

            span {
                position: absolute;
                left: 50%;
                top: 50%;
                width: 1rem;
                height: 1.5px;
                background: var(--color-ink);
                transition: transform .18s ease;

                &:first-child {
                    transform: translate(-50%, -.18rem);
                }

                &:last-child {
                    transform: translate(-50%, .18rem);
                }
            }
        }

        .menu {
            align-self: start;
            visibility: hidden;
            opacity: 0;
            display: flex;
            flex-direction: column;
            grid-row: 3;
            grid-column: 1 / -1;
            gap: var(--gap-size);
            padding: 0 var(--gap-size) var(--gap-size);
            transform: translateY(-.75rem);
            transition: opacity .28s ease, transform .28s ease, visibility .28s;
            will-change: opacity, transform;

            a {
                font-family: var(--font-serif), serif;
                color: var(--color-ink);
                font-size: 1.6rem;
                opacity: 0;
                transform: translateY(-.6rem);
                transition: opacity .36s ease, transform .36s ease;
                will-change: opacity, transform;

                span {
                    font-family: var(--font-sans), sans-serif;
                    font-size: 1.3rem;
                }
            }
        }

        .audience-switch-menu {
            grid-column: 3;
            justify-self: end;
            display: none;
            grid-template-columns: auto;
            background-color: var(--col-bw-200);
            padding: .2rem;
            border-radius: .9rem;
            opacity: 0;
            transform: translateY(-.6rem);
            transition: opacity .36s ease, transform .36s ease;
            will-change: opacity, transform;

            a {
                border-radius: 2rem;
                transition: all .4s ease;
                font-size: .8rem;
                padding: .15rem .5rem;
                color: var(--color-ink);
                text-align: center;
                opacity: 1;

                &:hover {
                    text-decoration: none;
                }

                &:first-of-type {
                    grid-column: 1;
                    grid-row: 1;
                }

                &:nth-of-type(2) {
                    grid-column: 1;
                    grid-row: 2;
                }

                &.active {
                    background-color: white;
                    color: var(--color-ink);
                    padding: .25rem .5rem;

                    &.tenant {
                        & ~ span {
                            grid-column: 2;
                            grid-row: 1;
                        }
                    }

                    &.owner {
                        & ~ span {
                            grid-column: 2;
                            grid-row: 2;
                        }
                    }
                }
            }
        }
    }

    &.menu-open {
        height: 100lvh;
        max-height: 100lvh;
        background: rgb(255 255 255 / 0.7);

        .inner-site-header {
            width: 100%;
            height: 100lvh;
            grid-template-rows: var(--height-header-full) auto 1fr;
        }

        .menu-toggle span {
            &:first-child {
                transform: translate(-50%, 0) rotate(45deg);
            }

            &:last-child {
                transform: translate(-50%, 0) rotate(-45deg);
            }
        }

        .audience-switch-menu {
            display: grid;
            grid-row: 2;
            grid-column: 1 / -1;
            justify-self: center;
            width: min(20rem, calc(100% - 2rem));
            grid-template-columns: repeat(2, minmax(0, 1fr));
            margin-top: 1.5rem;
            background: var(--col-bw-200);
            border: 1px solid rgb(18 32 51 / .06);
            border-radius: 999px;
            opacity: 1;
            transform: translateY(0);

            a:first-of-type,
            a:nth-of-type(2),
            a.active {
                grid-row: 1;
                padding: .55rem 1rem;
            }

            a:first-of-type { grid-column: 1; }
            a:nth-of-type(2) { grid-column: 2; }
        }

        .menu {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
            padding: 3rem 1rem var(--gap-size);
        }

        .menu a {
            opacity: 1;
            transform: translateY(0);
        }

        .menu a:nth-child(1) { transition-delay: .05s; }
        .menu a:nth-child(2) { transition-delay: .09s; }
        .menu a:nth-child(3) { transition-delay: .13s; }
        .menu a:nth-child(4) { transition-delay: .17s; }
        .menu a:nth-child(5) { transition-delay: .21s; }
        .menu a:nth-child(6) { transition-delay: .25s; }
    }

    &.is-scrolled:not(.menu-open) {
        height: var(--height-header-collapsed);

        .inner-site-header {
            grid-template-rows: calc(var(--height-header-collapsed) - .1rem) auto;

            .brand {
                margin-top: .4rem;
                block-size: calc(var(--height-header-collapsed) - 1.6rem);
                inline-size: calc(8.4rem - 1rem);
            }

            @media (max-width: 75rem) {
                .audience-switch-menu {
                    background: none;
                    box-shadow: none;

                    .tenant {
                        transform: translateY(.6rem);
                    }

                    .owner {
                        transform: translateY(-.6rem);
                    }

                    a.active {
                        color: var(--color-ink);
                        background-color: white;
                    }

                    a:not(.active) {
                        opacity: 0;
                    }

                    span {
                        opacity: 0;
                    }
                }
            }
           
        }
    }
}

@media (min-width: 75rem) {
    .site-header {
        --height-header-collapsed: 2.5rem;
        position: sticky;
        top: 0;
        z-index: 10;
        width: 100%;
        max-height: var(--height-header-full);
        height: var(--height-header-full);
        transition: all 0.4s ease;

        .inner-site-header {
            .menu-toggle {
                display: none;
            }

            .menu {
                align-self: center;
                visibility: visible;
                opacity: 1;
                display: flex;
                flex-direction: row;
                justify-content: start;
                align-items: center;
                grid-row: 1;
                grid-column: 1;
                gap: 1rem;
                padding: 0;
                transform: none;

                a {
                    font-family: var(--font-sans), sans-serif;
                    color: var(--color-ink);
                    font-size: .85rem;
                    opacity: 1;
                    transform: none;

                    &.important {
                        font-weight: 600;
                    }

                    span {
                        font-family: var(--font-sans), sans-serif;
                        font-size: .85rem;
                    }
                }
            }

            .audience-switch-menu {
                display: grid;
                grid-template-columns: auto;
                column-gap: .7rem;
                opacity: 1;
                transform: translateY(0);

                a {
                    font-size: .85rem;

                    &:first-of-type {
                        padding: .25rem .5rem .1rem 1rem;
                        grid-column: 1;
                        grid-row: 1;
                    }

                    &:nth-of-type(2) {
                        padding: .25rem 1rem .1rem .5rem;
                        grid-column: 2;
                        grid-row: 1;
                    }

                    &.active {
                        padding: .25rem 1rem;
                        
                        &.tenant {
                            & ~ span {
                                grid-column: 1;
                                grid-row: 2;
                            }
                        }

                        &.owner {
                            & ~ span {
                                grid-column: 2;
                                grid-row: 2;
                            }
                        }
                    }
                }

                span {
                    opacity: 1;
                    transition: all .4s ease;
                    text-align: center;
                    margin-top: -.4rem;
                }
            }
        }

        &.is-scrolled:not(.menu-open) {
            --box-shadow: var(--shadow);

            .inner-site-header {
                .brand {
                    margin-top: .3rem;
                    inline-size: 8rem;
                    block-size: calc(var(--height-header-collapsed) - 1rem);
                }
                .audience-switch-menu {
                    .tenant {
                        transform: none;
                    }

                    .owner {
                        transform: none;
                    }

                    a:not(.active) {
                        opacity: 1;
                    }
                }
            }
        }
    }
}