@media (max-width: 739px) {
    .header-menu-button {
        display: inline-flex;
    }

    body:not(:has(.sidebar)) .header-menu-button {
        display: none;
    }

    .main {
        display: block;
    }

    .sidebar-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 40;
        background: rgba(15, 23, 42, 0.35);
    }

    .sidebar {
        display: none;
        position: fixed;
        top: 12px;
        left: 12px;
        bottom: 12px;
        z-index: 50;
        width: min(320px, calc(100vw - 24px));
        flex-basis: auto;
        overflow-y: auto;
    }

    body.sidebar-open {
        overflow: hidden;
    }

    body.sidebar-open .sidebar-overlay {
        display: block;
    }

    body.sidebar-open .sidebar {
        display: flex;
    }

        .header-top {
            flex-wrap: nowrap;
            align-items: center;
            gap: 4px;
            min-width: 0;
        }

        .header-logo {
            flex: 1 1 0;
            gap: 4px;
            container: header-logo / inline-size;
        }

        .header-logo a {
            gap: 0.1em;
            /* Reserve the menu button space, then fit both words and the mark. */
            font-size: clamp(20px, calc((100cqi - 51px) / 7.8), 25.6px);
        }

        .header-logo-mark {
            width: 0.805em;
            height: 0.805em;
            align-self: center;
            margin-left: 5px;
            margin-right: 5px;
        }

        .header-menu-button {
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            margin-right: 5px;
            font-size: 15px;
        }

        .header-actions {
            flex: 0 0 auto;
            flex-wrap: nowrap;
            gap: 4px;
            min-width: 0;
            margin-left: auto;
        }

        .header-user {
            flex: 0 1 auto;
            gap: 4px;
            min-width: 0;
            max-width: 100%;
            justify-content: flex-end;
        }

        .header-action {
            min-height: 36px;
            padding: 0 4px;
            gap: 4px;
        }

        .header-create-label {
            display: none;
        }

        .header-create,
        .header-action-icon {
            width: 36px;
            min-width: 36px;
            height: 36px;
            flex-shrink: 0;
            padding: 0;
        }

        .header-user-name {
            display: none;
        }

        .header-user-button:has(.header-user-name) {
            width: 36px;
            min-width: 36px;
            max-width: 36px;
            padding: 0;
        }

        .header-user .avatar {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

    @container header-logo (max-width: 230px) {
        .header-logo-mark {
            display: none;
        }

        .header-logo a {
            gap: 0.35em;
            font-size: clamp(20px, calc((100cqi - 41px) / 6.6), 25.6px);
        }
    }

    @container header-logo (max-width: 180px) {
        .header-logo-title:first-child {
            display: none;
        }

        .header-logo a {
            font-size: 25.6px;
        }
    }

    .subheader-search {
        container: subheader-search / inline-size;
    }

    @container subheader-search (width < calc(28rem + 12px)) {
        .subheader-search-geo[data-geo="city"] {
            max-width: none;
        }
    }

    .subheader-search-place {
        flex: 1 1 14rem;
        min-width: min(100%, 14rem);
    }

    .subheader-search-place:has([data-geo="city"]) {
        flex-basis: calc(28rem + var(--search-gap));
        min-width: min(100%, calc(28rem + var(--search-gap)));
    }

    .subheader-search-geo[data-geo="country"],
    .subheader-search-geo[data-geo="city"] {
        flex: 1 1 14rem;
        width: auto;
        min-width: min(100%, 14rem);
    }

    .content-subcategories {
        margin-bottom: 14px;
    }

    .content-feed-bar,
    .content-feed-settings {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 10px;
    }

    .content-feed-settings {
        margin-bottom: 0;
    }

    .content-feed-setting,
    .content-feed-settings > .button-toggle {
        width: 100%;
        white-space: normal;
    }

    .content-feed-settings select {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
    }

    .feed-subscribe {
        width: 100%;
        margin: 0;
    }

    .feed-subscribe-button {
        width: 100%;
        justify-content: flex-start;
        white-space: normal;
        text-align: left;
    }

    .feed-empty .feed-subscribe-button {
        padding: 10px;
        font-size: 90%;
    }

    .footer-top {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-top:not(:has(.footer-logout)) {
        align-items: center;
    }

    .footer-logout {
        margin-left: 0;
    }

        .content-subcategory {
            width: 72px;
        }

        .content-subcategory-icon {
            width: 58px;
            height: 58px;
            font-size: 22px;
        }
}