#site-header {
    a {
        text-decoration: none;
    }
    .logo,
    .logo-alt {
        width: 100%;
        height: fit-content;
    }
    @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;
    }
    .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;
            }
        }
    }
    &&[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;
    }
}

body:not(.home) {
    .logo-alt {
        display: none;
    }
    header.open {
        .logo {
            display: none;
        }
        .logo-alt {
            display: flex;
        }
    }
}

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