/*
 * The public navigation now contains one more entry. On wide displays the
 * header can use a larger rail; at intermediate widths it deliberately folds
 * into the existing accessible menu instead of wrapping labels.
 */
@media (min-width: 1101px) {
    .site-header .nav-wrap {
        width: min(1440px, calc(100% - 40px));
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .main-nav {
        display: none;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
        border: 0;
        background: transparent;
        font-weight: 800;
    }

    .main-nav.open {
        display: flex;
        position: absolute;
        top: 78px;
        left: 0;
        right: 0;
        padding: 20px;
        flex-direction: column;
        background: var(--cream);
        border-bottom: 1px solid var(--line);
    }
}