@media (max-width:1439px) {
  .topbar {
    grid-template-columns:1fr auto;
    grid-template-areas:"brand aside" "nav nav";
    gap:14px 20px;
  }
  .brand-cluster { grid-area:brand; }
  .stepper { grid-area:nav; justify-content:flex-start; }
  .topbar-aside { grid-area:aside; }
}

@media (max-width:1120px) {
  .topbar {
    grid-template-columns:1fr auto;
    grid-template-areas:"brand aside" "nav nav";
    gap:14px 20px;
  }
  .brand-cluster { grid-area:brand; }
  .stepper { grid-area:nav; justify-content:flex-start; }
  .topbar-aside { grid-area:aside; }

  .favorites-hero { grid-template-columns:minmax(0,1fr) 180px; gap:28px; }
  .taste-board { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .tile-w4 { grid-column:span 3; }
  .tile-w3 { grid-column:span 3; }
  .tile-w2 { grid-column:span 2; }

  .profile-hero { grid-template-columns:minmax(0,1fr) 125px; gap:20px; }
  .profile-stamp { width:118px; height:118px; }
  .profile-title-block h1 { font-size:clamp(38px,5.5vw,60px); line-height:1.08; }

  /* Collapse the editorial rhythm to a clean two-column layout before mobile. */
  .editorial-rec { grid-column:span 6; }
}

@media (max-width:860px) {
  .app-shell { width:min(100% - 20px,1440px); padding-top:10px; }
  .brand-tagline,.topbar-note { display:none; }
  .stepper {
    display:flex;
    flex-wrap:nowrap;
    gap:3px;
    width:100%;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .stepper::-webkit-scrollbar { display:none; }
  .stepper .step { flex:0 0 auto; }
  .step { font-size:12px; padding-inline:10px; justify-content:center; }

  .favorites-hero,.profile-hero,.recommendations-masthead { grid-template-columns:1fr; gap:18px; margin-inline:0; }
  .bookmark-grid { grid-template-columns:1fr; }
  .favorites-side-note,.profile-stamp { justify-self:start; }
  .profile-stamp { margin:8px; }
  .note-arrow { left:6px; }
  .profile-stamp { width:110px; height:110px; }
  .profile-title-block h1 { max-width:720px; font-size:clamp(38px,8vw,58px); line-height:1.08; }

  .taste-board { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .tile-w4,.tile-w3,.tile-w2 { grid-column:span 3; }

  .profile-map { grid-template-columns:1fr; }
  .profile-map-aside { position:static; display:flex; align-items:center; gap:20px; transform:none; }
  .profile-aside-note { margin:0 0 0 auto; }

  .editorial-rec { grid-column:span 12; }
  .recommendation-medium-filter { margin-left:0; }

  .profile-footer,.recommendation-footer,.favorites-footer { align-items:stretch; flex-direction:column; }
  .action-group { width:100%; }
  .action-group .button { width:100%; flex-basis:auto; }
  .recommendation-footer-actions { flex-wrap:wrap; }
  .filter-context { width:100%; margin-left:0; }
  .refresh-banner.is-finished { align-items:stretch; flex-direction:column; }
  .refresh-banner.is-finished .action-group { min-width:0; width:100%; }
}

@media (max-width:620px) {
  .app-shell { width:min(100% - 10px,1440px); padding-top:6px; }

  /* Phone layouts should feel composed for the viewport rather than like the desktop board
     compressed into a narrow column. Keep the personality, reduce the competing frame/decor. */
  .favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen {
    --gutter:14px;
    --band:18px;
    padding:22px 14px 28px;
  }

  .topbar { grid-template-columns:1fr auto; grid-template-areas:"brand aside" "nav nav"; }
  .topbar-aside .prototype-label,.topbar-aside .topbar-note { display:none; }
  .brand-word { font-size:32px; }
  .step > span[aria-hidden="true"] { display:none; }
  /* During onboarding the nav has all five tabs (Favorites and Browse hide after it, #117). At the 860px
     padding they measured 401px against 372px of room at a 390px phone, so Library sat off the right edge,
     reachable only by swiping a scroller with no visible scrollbar. Tighter tabs fit five on one line at
     390px (about 357px); on a narrower phone, or with a wider fallback font, they wrap to a second line
     instead of hiding a destination off-screen. Tap targets keep their 44px height. */
  .stepper { flex-wrap:wrap; overflow-x:visible; gap:2px; }
  .step { font-size:11px; padding-inline:6px; }

  h1 { font-size:clamp(34px,10.5vw,42px); line-height:.98; }
  .favorites-screen { padding:22px 14px 28px; }
  .favorites-screen .button,.recommendations-screen .button { min-height:44px; }
  .profile-screen { padding:22px 14px 28px; }
  .recommendations-screen { padding:18px 14px 28px; }
  .bookmarks-screen,.library-screen,.browse-screen { padding:18px 14px 28px; }
  .favorites-hero,.profile-hero,.recommendations-masthead { margin-inline:4px; }

  .filter-band { margin-inline:0; align-items:flex-start; }
  .filter-band-label { width:100%; }
  .domain-filter { width:100%; }
  .domain-filter-button { flex:1 1 auto; }

  .taste-board { grid-template-columns:1fr; grid-auto-rows:auto; }
  .favorite-tile,.tile-w4,.tile-w3,.tile-w2 { grid-column:auto; min-height:168px; }
  .favorite-tile[aria-pressed="false"] { opacity:.58; }
  .favorites-footer { padding-inline:4px; }
  .selection-counter { align-self:flex-start; }

  .profile-title-block h1 { font-size:clamp(38px,11.5vw,52px); line-height:1.1; }
  .profile-headline-lead,.profile-headline-highlight { display:inline; }
  .profile-headline-highlight { top:-.05em; }
  .profile-evidence-strip { grid-template-columns:1fr; }
  .profile-map-aside { display:block; }
  .profile-aside-note { margin-top:12px; }
  .signal-row { grid-template-columns:58px minmax(0,1fr); }
  .signal-index { font-size:24px; }
  .signal-main { padding:17px 15px; }
  .signal-title-row { display:block; }
  .signal-status { display:inline-flex; margin-top:8px; }

  .editorial-rec-body { padding:15px; }
  .editorial-title-row { display:block; }
  .reaction-stamp { display:inline-block; margin-top:8px; }
  .reaction-rail { grid-template-columns:1fr; }
  .rating-button { min-height:44px; }
  .surprise-burst { width:68px; height:68px; font-size:15px; }
  .why-popover { width:min(300px,calc(100vw - 34px)); }
  .quality-note-row { display:block; }
  .quality-note-help { display:block; margin-top:7px; }
  .refresh-banner { align-items:stretch; flex-direction:column; gap:8px; padding:13px 14px; margin-bottom:14px; }
  .refresh-banner > div:first-child { flex:0 0 auto; min-width:0; }
  .refresh-banner strong { font-size:18px; line-height:1.15; }
  .refresh-banner p { font-size:12px; line-height:1.4; }
  .refresh-banner .button { width:100%; }

  /* Favorites: reduce first-screen visual competition and make progress legible. */
  .favorites-hero { gap:12px; margin:0 0 16px; }
  .favorites-hero h1 { max-width:12ch; margin-bottom:12px; }
  .favorites-hero .lede { margin:0 0 14px; font-size:16px; line-height:1.42; }
  .favorites-side-note { display:none; }
  .starter-search { width:100%; min-height:46px; margin-top:0; }
  .starter-browse-row { margin-top:8px; }
  .starter-browse-button { width:100%; min-height:42px; padding:8px 11px; font-size:12px; }
  .starter-progress {
    display:flex;
    align-items:center;
    gap:8px;
    margin:14px 0 12px;
    padding:10px 12px;
    border:1.5px solid var(--line);
    border-radius:12px;
    background:rgba(255,255,255,.78);
    font-size:12px;
    line-height:1.35;
  }
  .starter-progress strong { flex:none; font-size:14px; white-space:nowrap; }
  .starter-grid { gap:10px; }
  .starter-card,.starter-placeholder { min-height:154px; padding:14px; border-radius:13px; }
  .starter-placeholder .starter-index { top:12px; left:12px; }
  .starter-plus { width:40px; height:40px; font-size:24px; }
  .starter-placeholder strong { font-size:14px; }
  .favorites-footer { margin-top:16px; padding:12px; gap:12px; }
  .favorites-footer .selection-counter { display:none; }

  /* Recommendations: filters become a compact horizontal control and loading stays above the fold. */
  .recommendations-masthead { gap:12px; margin:0 0 14px; }
  .recommendation-filter-band {
    display:block;
    margin:0 0 10px;
    padding:10px;
    overflow:hidden;
  }
  .recommendation-filter-band .filter-band-label { display:block; margin-bottom:7px; }
  .recommendation-filter-band .domain-filter {
    width:100%;
    flex-wrap:nowrap;
    gap:6px;
    overflow-x:auto;
    padding-bottom:2px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .recommendation-filter-band .domain-filter::-webkit-scrollbar { display:none; }
  .recommendation-filter-band .domain-filter-button {
    flex:0 0 auto;
    min-height:36px;
    padding:6px 13px;
  }
  .recommendation-filter-band .filter-context { display:block; margin:7px 0 0; font-size:10px; line-height:1.35; }
  .recommendation-browse-link { margin:0 0 12px; }
  .recommendation-browse-link .button {
    width:auto;
    min-width:0;
    min-height:38px;
    padding:7px 10px;
    font-size:12px;
    box-shadow:none;
  }

  .editorial-grid { gap:14px; }
  .editorial-rec-body { padding:13px; }
  .editorial-rec-skeleton { min-height:0; }
  .skeleton-art { aspect-ratio:16 / 8.5; }
  .skeleton-body { padding:12px; gap:7px; }
  .skeleton-actions span { height:36px; }
  .rec-interaction { min-height:78px; padding-top:8px; }
}


@media (max-width:860px) {
  .sticker.t-hide { display:none; }
  .favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen { border-radius:16px; }
}
@media (max-width:620px) {
  .sticker-field { display:none; }
  .note-arrow { display:none; }
  .favorites-screen,.profile-screen,.recommendations-screen,.bookmarks-screen,.library-screen,.browse-screen { background-size:22px 22px,26px 26px,100% 100%; }
  .editorial-rec::before { display:none; }
}

/* Very small phones: three header buttons (search, My Tastemake, Look) plus the brand must fit on one row. */
@media (max-width:400px) {
  .brand-word { font-size:25px; }
  .favorites-hero h1 { font-size:34px; }
  .starter-progress { align-items:flex-start; }
  .recommendation-filter-band .domain-filter-button { padding-inline:11px; }
  .brand-cluster { gap:8px; }
  .topbar-aside { gap:6px; }
  .search-open, .me-open, .look-open { width:40px; height:40px; min-height:40px; }
}