/* Utility transom */
.utility-bar {
    background: var(--umber-ink);
    color: var(--trim-shade);
    font-size: var(--type-label);
}

.utility-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding-block: 7px;
    flex-wrap: wrap;
}

.utility-bar nav {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

.utility-bar a {
    color: var(--trim-white);
    text-decoration: none;
}

.utility-bar a:hover {
    text-decoration: underline;
}

.u-narrow {
    display: none;
}

@media (max-width: 960px) {
    /* One-line utility bar at tablet width too: drop the "Serving..." span. */
    .utility-bar .container > span {
        display: none;
    }
}

@media (max-width: 600px) {
    /* Utility bar: one row, every link visible, no side-scroll. Dual
       labels (see .u-wide/.u-narrow) swap to short text so it all fits.
       Links keep a tall tap target. */
    .utility-bar .container {
        padding-block: 0;
        gap: 0;
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .utility-bar nav {
        flex-wrap: nowrap;
        gap: 4px;
        width: 100%;
    }

    .utility-bar a {
        flex: 0 0 auto;
        display: flex;
        align-items: center;
        padding: 13px 10px;
        white-space: nowrap;
    }

    .utility-bar .u-wide {
        display: none;
    }

    .utility-bar .u-narrow {
        display: inline;
    }
}