/* Normal content pages use the dark header colour. Pages whose first section
   sits behind the header use the overlay colour instead. */
.site-header {
    color: var(--header-text);
}

.home-template .site-header,
.tag-template .site-header,
.author-template .site-header {
    color: var(--header-overlay);
}

@media (max-width: 850px) {
    body.menu-open {
        overflow: hidden;
    }

    .menu-open .site-header {
        color: var(--ink);
    }

    .menu-open .brand {
        position: relative;
        z-index: 102;
    }

    .menu-open .menu-toggle {
        color: var(--ink) !important;
    }

    .menu-open .menu-icon span {
        background: var(--ink) !important;
    }

    .menu-toggle {
        position: relative;
        z-index: 102;
        display: grid;
        width: 46px;
        height: 46px;
        padding: 0;
        place-items: center;
        cursor: pointer;
    }

    .menu-icon {
        display: grid;
        width: 27px;
        height: 18px;
        align-content: space-between;
    }

    .menu-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background: currentColor;
        transition: transform .25s ease, opacity .2s ease;
        transform-origin: center;
    }

    .menu-toggle[aria-expanded="true"] .menu-icon span:first-child {
        transform: translateY(8px) rotate(45deg);
    }

    .menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle[aria-expanded="true"] .menu-icon span:last-child {
        transform: translateY(-8px) rotate(-45deg);
    }

    .site-nav {
        z-index: 100;
        width: 100vw;
        height: 100dvh;
        background: var(--paper) !important;
        color: var(--ink);
    }

    .site-nav .nav {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 24px;
        color: var(--ink);
        font-size: clamp(24px, 6vw, 34px);
    }

    .site-nav .nav a {
        color: var(--ink);
    }
}