/**
 * Magic Sketch + Magic Blend — phone portrait header only.
 * Desktop + iPad: brand stays one line; recents limits unchanged in JS (10).
 */
@media (max-width: 600px) and (orientation: portrait) {

    body.sketch-page .main-header .app-brand-wrap .brand--stacked-phone,
    body.magic-blend-page .main-header .app-brand-wrap .brand--stacked-phone {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;
        white-space: normal !important;
        font-size: 0.58rem !important;
        line-height: 1.05 !important;
        letter-spacing: 0.06em !important;
        gap: 1px !important;
        max-width: 48px !important;
    }

    body.sketch-page .main-header .app-brand-wrap .brand-stacked-line,
    body.magic-blend-page .main-header .app-brand-wrap .brand-stacked-line {
        display: block !important;
    }

    body.sketch-page .main-header .hdr-editor-title-lane,
    body.magic-blend-page .main-header .hdr-editor-title-lane {
        gap: 6px !important;
    }

    body.sketch-page .main-header #sketch-recents-strip.sketch-recents-strip,
    body.magic-blend-page .main-header #sketch-recents-strip.sketch-recents-strip {
        padding-left: 2px !important;
        padding-right: 2px !important;
        gap: 4px !important;
    }

    body.sketch-page .main-header #sketch-recents-strip .sketch-recent-thumb,
    body.magic-blend-page .main-header #sketch-recents-strip .sketch-recent-thumb {
        width: 32px !important;
        height: 38px !important;
        flex: 0 0 32px !important;
        max-width: 32px !important;
        min-width: 0 !important;
        border-radius: 3px !important;
        object-fit: cover !important;
    }

    /* Undo legacy sketch.css 5-thumb cap on these two pages only (JS shows 7). */
    body.sketch-page .main-header #sketch-recents-strip .sketch-recent-thumb:nth-child(n+6),
    body.magic-blend-page .main-header #sketch-recents-strip .sketch-recent-thumb:nth-child(n+6) {
        display: block !important;
    }

    body.sketch-page .main-header #sketch-recents-strip .sketch-recent-thumb:nth-child(n+7),
    body.magic-blend-page .main-header #sketch-recents-strip .sketch-recent-thumb:nth-child(n+7) {
        display: none !important;
    }

    /* Magic Blend: recents strip anchored after narrower stacked brand */
    body.magic-blend-page .main-header #sketch-recents-strip {
        left: calc(54px + 2mm) !important;
    }
}

/* Desktop + iPad: keep single-line title (stacked markup reads as "Magic Sketch") */
@media (min-width: 601px),
       (max-width: 600px) and (orientation: landscape) {
    body.sketch-page .brand--stacked-phone,
    body.magic-blend-page .brand--stacked-phone {
        display: inline !important;
        white-space: nowrap !important;
        font-size: inherit !important;
        line-height: inherit !important;
        letter-spacing: inherit !important;
        max-width: none !important;
    }

    body.sketch-page .brand--stacked-phone .brand-stacked-line,
    body.magic-blend-page .brand--stacked-phone .brand-stacked-line {
        display: inline !important;
    }

    body.sketch-page .brand--stacked-phone .brand-stacked-line + .brand-stacked-line::before,
    body.magic-blend-page .brand--stacked-phone .brand-stacked-line + .brand-stacked-line::before {
        content: ' ';
    }
}