body #site-header {
    position: fixed !important;
    width: 100%;
    max-width: 100vw !important;
    @media screen and (min-width: 782px) {
        &&.home {
            height: 267px;
        }
    }
    z-index: 99999;
    &&.open {
        height: fit-content !important;
        @media screen and (max-width: 781px) {
            height: 100dvh !important;
            overflow-y: scroll;
            overflow-x: hidden;
        }
    }
    &&.scrolled {
        &&:not(.open) {
            height: auto !important;
        }
        a.d-none.d-md-flex:has(.logo) {
            display: none !important;
        }
        a.d-flex.d-md-none:has(.logo) {
            display: flex !important;
        }
        .primary-row {
            .pillars {
                display: none !important;
            }
        }
        &&.open {
            @media screen and (min-width: 782px) {
                .primary-row {
                    .pillars {
                        display: flex !important;
                    }
                }
            }
        }
    }
    /* ———
    Matching max-height to margin-top
    so that the page doesn't need to
    set variable via JS and cause a visual jump
    ——— */
    @media screen and (min-width: 782px) {
        min-height: 95px;
    }
    + main {
        margin-top: 65px;
        @media screen and (min-width: 782px) {
            margin-top: 95px;
        }
    }
    /* ^^^ */
}
body.home #site-header + main {
        @media screen and (min-width: 782px) {
            margin-top: 267px !important;
        }
    }

#site-header {
    a {
        text-decoration: none;
    }
    .logo,
    .logo-alt {
        width: 100%;
        height: fit-content;
        /* On larger screns, limit height and fit image into top-left corner of img container */
        max-height: 197px;
        object-fit: contain;
        object-position: top left;
        /* ^^^ */
    }
    @media screen and (max-width: 781px) {
        .logo {
            width: fit-content;
            height: 35px;
        }
    }
    .description {
        font: italic 700 1.125rem 'Exposure', serif;
    }
    .pillars * {
        font-size: 1.125rem;
    }
    .menu-open {
        display: flex;
    }
    .menu-close {
        display: none;
    }
    .menu-open,
    .menu-close {
        width: 30px;
        justify-content: center;
    }
    .additional-mobile,
    .additional-desktop {
        display: none;
    }
    &&.open {
        .menu-open {
            display: none;
        }
        .menu-close {
            display: flex;
        }
        @media screen and (max-width: 781px) {
            .additional-mobile {
                display: flex;
            }
        }
        @media screen and (min-width: 782px) {
            .additional-desktop {
                display: flex;
            }
        }
        a.d-none.d-md-flex:has(.logo) {
            display: flex !important;
            @media screen and (max-width: 781px) {
                .logo {
                    height: 120px !important;
                }
            }
        }
        a.d-flex.d-md-none:has(.logo) {
            display: none !important;
        }
    }
    &&[data-flower="top-left-petal"] {
        #top-left-petal {
            fill: var(--blue);
        }
    }
    &&[data-flower="top-right-petal"] {
        #top-right-petal {
            fill: var(--yellow);
        }
    }
    &&[data-flower="bottom-left-petal"] {
        #bottom-left-petal {
            fill: var(--dark-pink);
        }
    }
    &&[data-flower="bottom-right-petal"] {
        #bottom-right-petal {
            fill: var(--red);
        }
    }
    &&[data-flower="stem"] {
        #stem {
            fill: var(--green);
        }
    }
    #flower {
        height: 100%;
        width: auto;
        min-width: 0;
        flex-shrink: 0;
        aspect-ratio: 67.82/105;
        path {
            fill: transparent;
            stroke: var(--white);
            stroke-width: 1px;
            stroke-dasharray: 5 2;
            stroke-linecap: round;
        }
        &&:hover {
            path {
                stroke-width: 0;
            }
            #top-left-petal {
                fill: var(--blue);
            }
             #top-right-petal {
                fill: var(--yellow);
            }
             #bottom-left-petal {
                fill: var(--dark-pink);
            }
            #bottom-right-petal {
                fill: var(--red);
            }
            #stem {
                fill: var(--green);
            }
        }
    }
    #flower-alt {
        width: 25%;
        height: fit-content;
        min-width: 0;
        flex-shrink: 0;
        aspect-ratio: 67.82/105;
    }
    /* Pillar hover colors */
    .menu-item {
        font-weight: 700;
        transition: color 0.2s ease;
        &&[href*='state-power']:hover {
            color: var(--yellow) !important;
        }
        &&[href*='bodies-gender-health']:hover {
            color: var(--pink) !important;
        }
        &&[href*='borders-empire']:hover {
            color: var(--red) !important;
        }
        &&[href*='culture-media-education']:hover {
            color: var(--blue) !important;
        }
        &&[href*='land-labor-extraction']:hover {
            color: var(--green) !important;
        }
    }
}

body:not(.home) {
    .logo-link {
        display: flex;
    }
    .logo-alt-link {
        display: none;
    }
    header.open {
        .logo-link {
            display: none;
        }
        .logo-alt-link {
            display: flex;
            @media screen and (max-width: 781px) {
                img {
                    width: fit-content !important;
                    height: 120px !important;
                }
            }
        }
    }
}

#tag-header {
    min-height: 275px;
}

@media screen and (max-width: 781px) {
    /* div wrapping logo */
    div:has(> a > img) {
        width: fit-content !important;
        z-index: 999;
    }
}

#site-header {
    ~ main {
        position: relative;
        &&:before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0);
            transition: background-color 0.2s ease;
            pointer-events: none;
        }
    }
    &&.open {
        ~ main {
            &&::before {
                background-color: rgba(0, 0, 0, 0.25);
            }
        }
    }
}