@layer root {
    header.site h1 > a:hover { text-decoration: none; }

    header.site {
        display: flex;
        width: 100%;
        z-index: 10000;
    }

    header.site h1 {
        margin: 0;
        order: 1;
    }

    header.site > .grid {
        align-items: baseline;
        display: flex;
        flex-wrap: wrap;
        gap: 0 0.5em;
        margin: 0 auto;
        max-width: var(--content-width);
        padding: 1.5rem 3rem;
        width: 100%;
    }

    header.site > .grid > nav {
        align-items: center;
        display: flex;
        justify-content: start;
        list-style: none;
    }

    header.site nav > li { display: block; }

    header.site nav:first-of-type {
        justify-content: start;
        order: 2;
    }

    header.site nav:last-of-type {
        justify-content: end;
        order: 3;
    }

    @media (max-width: 516px) {
        header.site > .platter {
            border-left: none;
            border-radius: 0;
            border-right: none;
            border-top: none;
        }

        header.site > .grid { max-width: none; }
    }

    @media (max-width: 435px) {
        header.site nav:first-of-type { order: 5; }
    }

    nav.social > li { margin-inline-start: var(--nav-bulleted-spacing); }
    nav.social > li:first-child { margin-inline-start: 0; }

    .social {
        display: block flex;
        letter-spacing: 2px;
        margin-left: auto;
        order: 2;
    }

    .social > li > a {
        background-image: var(--url);
        background-repeat: no-repeat;
        background-size: var(--menu-icon-size);
        display: block;
        height: var(--menu-icon-size);
        width: var(--menu-icon-size);
    }

    .social > li > a > span {
        display: none;
    }

    .social > li + li:before {
        color: var(--dark);
        padding: 0 0.5rem;
    }
}