.nav-utility {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    white-space: nowrap;
}

.nav-utility svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.5;
}

.nav-utility b {
    display: inline-grid;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    place-items: center;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font-size: 9px;
    line-height: 1;
}

.nav-account-group .nav-parent { border: 0; }
.nav-logout-form { display: contents; margin: 0; }
.nav-logout-form button { border: 0; padding: 0; background: transparent; color: inherit; cursor: pointer; font: inherit; text-transform: uppercase; letter-spacing: inherit; }
.nav-account-group .nav-submenu form { margin: 0; }
.nav-account-group .nav-submenu form button { width: 100%; padding: .8rem 0; border: 0; border-top: 1px solid var(--line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }

@media (max-width: 1100px) {
    .nav-account-group.is-open .nav-submenu,
    .nav-account-group:focus-within .nav-submenu { max-height: 320px; }
}

@media (min-width: 901px) {
    .nav-utility span { font-size: 10px; }
}

@media (max-width: 900px) {
    .nav-utility {
        width: 100%;
        justify-content: flex-start;
        font-size: 1.1rem;
    }

    .nav-utility svg { width: 22px; height: 22px; }
    .nav-utility b { margin-left: .1rem; }
}