/* Compact mobile brand header and single-row city selector. */
@media (max-width: 800px) {
    body .masthead,
    body.home-page .masthead {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: nowrap;
        height: 64px;
        gap: 0;
        padding: 9px 16px;
        background: #fbd1f2 url("assets/mobile-header-pink.svg") center/100% 100% no-repeat;
    }
    body .masthead:before {
        display: none;
    }
    body .masthead .brand,
    body.home-page .masthead .brand {
        flex: 0 1 110px;
        width: 110px;
        max-width: 100%;
        margin: 0;
        padding: 0;
        background: transparent;
        border-radius: 0;
    }
    body .masthead .brand-logo,
    body.home-page .masthead .brand-logo {
        display: block;
        width: 100%;
        height: auto;
        max-height: 36.667px;
        object-fit: contain;
    }
    body .masthead .search,
    body .masthead .city-picker,
    body .masthead .mobile-account,
    body .masthead > .publish {
        display: none;
    }
    .city-context {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        padding: 6px 7px;
        margin: 0 0 8px;
        min-height: 40px;
        background: #fff;
        border-color: #e9e2f2;
        border-radius: 5px;
    }
    .city-context > div {
        min-width: 0;
        max-width: 76px;
        flex: 0 1 auto;
    }
    .city-context b {
        display: block;
        max-width: 100%;
        font-size: 12px;
        line-height: 24px;
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .city-context > div > span {
        display: none;
    }
    .city-context nav {
        display: flex;
        flex: 1;
        min-width: 0;
        width: auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 3px;
    }
    .city-context nav button {
        flex: 0 1 auto;
        white-space: nowrap;
        padding: 5px 6px;
        font-size: 11px;
        line-height: 16px;
    }
    .city-context nav button:nth-child(n + 5):not([data-city-picker]) {
        display: none;
    }
    .city-context nav button[data-city-picker] {
        flex-shrink: 0;
    }
    .mobile-welcome {
        background: transparent;
        padding: 0;
        margin: 0 -10px 8px;
        border-radius: 0;
    }
    .mobile-welcome > a {
        display: flex;
        align-items: center;
        aspect-ratio: 1.9;
        padding: 20px;
        border-radius: 0;
        background: #240078 url("assets/mobile-globe-purple.png") center/cover no-repeat;
    }
    .mobile-welcome h2 {
        font-size: clamp(24px, 8.6vw, 48px);
        line-height: 1.38;
        font-weight: 800;
        letter-spacing: 0.3px;
        margin: 0;
        text-shadow: 0 2px 6px #23005d80;
    }
    .mobile-welcome h2 span {
        display: block;
    }
    .mobile-welcome i {
        display: none;
    }
}
@media (max-width: 360px) {
    .city-context > div {
        max-width: 61px;
    }
    .city-context nav button {
        padding: 5px 4px;
    }
    .mobile-welcome > a {
        padding: 16px;
    }
}