/* Мобильная версия (телефон и планшет). Подключается последней и только переопределяет десктоп внутри media-запросов,
   ничего нового не добавляет: те же блоки, шрифты и цвета, перестроена сетка и размеры.
   Меню (js/mobile-nav.js): бургер, логотип, корзина в шапке; пункты, CONTACT US, тема и язык — в полноэкранном меню.
   Правила разбиты по страницам; общая переменная --page-gutter на телефоне становится 20px и тянет за собой
   поля шапки, футера, экрана работы и страницы «О нас». */

.m-burger, .m-menu { display: none; }

html.m-menu-open { overflow: hidden; }

@media (max-width: 900px) {
  :root { --page-gutter: 28px; }
  html, body { overflow-x: clip; }
  body { -webkit-text-size-adjust: 100%; }

  /* ---------- шапка ---------- */
  .navbar {
    grid-template-columns: 1fr auto 1fr; /* бургер слева, логотип по центру, справа тема и корзина */
    padding: calc(22px + env(safe-area-inset-top)) 20px 8px; /* шапка чуть ниже верхнего края; общая высота прежняя при логотипе на 10% крупнее */
    align-items: center;
  }
  .navbar__links,
  .navbar__cta .navbar__contact-group,
  .navbar__cta .navbar__lang-switch { display: none; } /* язык — внутри меню */
  .navbar__cta { display: flex; align-items: center; justify-self: end; gap: 8px; }
  /* тема и корзина всегда в шапке, кружки по 40px */
  .navbar__theme-toggle { width: 40px; height: 40px; }
  .navbar__theme-icon { width: 18px; height: 18px; }
  .navbar__logo img { height: 57px; } /* логотип на 10% крупнее */
  .navbar__logo { justify-self: center; }

  .m-burger {
    position: relative;
    display: block;
    justify-self: start;
    width: 40px;  /* боковые кнопки на 10% меньше */
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: color-mix(in srgb, var(--color-text) 11%, transparent); /* полупрозрачное стекло: тёмная тема — светлая дымка, светлая — тёмная */
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-tap-highlight-color: transparent;
  }
  .m-burger i {
    position: absolute;
    left: 12px;
    right: 12px;
    height: 1.5px;
    background: var(--color-text);
    transition: transform 0.45s cubic-bezier(0.65, 0, 0.35, 1), top 0.45s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.25s ease;
  }
  /* три полоски; при открытии верхняя и нижняя сходятся в крестик, средняя исчезает */
  .m-burger i:nth-child(1) { top: 13.5px; }
  .m-burger i:nth-child(2) { top: 19.25px; }
  .m-burger i:nth-child(3) { top: 25px; }
  html.m-menu-open .m-burger i:nth-child(1) { top: 19.25px; transform: rotate(45deg); }
  html.m-menu-open .m-burger i:nth-child(2) { opacity: 0; transform: scaleX(0); }
  html.m-menu-open .m-burger i:nth-child(3) { top: 19.25px; transform: rotate(-45deg); }
  .navbar__cart { width: 40px; height: 40px; }
  .navbar__cart > svg { width: 18px; height: 18px; }
  .navbar__cart-count { top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 10px; line-height: 18px; }
  html.m-menu-open .navbar::before { opacity: 0; }

  /* ---------- меню ---------- */
  .m-menu {
    position: fixed;
    inset: 0;
    z-index: 990;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 122px var(--page-gutter) calc(28px + env(safe-area-inset-bottom));
    background:
      linear-gradient(var(--m-tint), var(--m-tint)),
      var(--hero-bg) 62% center / cover no-repeat;
    --m-tint: rgba(250, 245, 233, 0.78);
    color: var(--color-text);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
    overflow-y: auto;
  }
  [data-theme="dark"] .m-menu { --m-tint: rgba(5, 9, 12, 0.72); }
  html.m-menu-open .m-menu { opacity: 1; visibility: visible; transition-delay: 0s; }

  /* пункты по центру экрана; текущая страница в скобках цветом акцента, по бокам от неё линии до краёв */
  .m-menu__list { flex: 1; display: grid; align-content: center; justify-items: center; gap: 18px; padding-bottom: 20px; }
  .m-menu__link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px 0;
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
    transition-delay: 0s;
  }
  html.m-menu-open .m-menu__link { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i, 0) * 0.07s); }
  .m-menu__t { font-family: "Cormorant Garamond", "Baskerville Display PT", Georgia, serif; font-weight: 300; font-size: clamp(36px, 10.6vw, 54px); line-height: 1.1; letter-spacing: 0; }
  .m-menu__link.is-current { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 16px; }
  .m-menu__link.is-current::before,
  .m-menu__link.is-current::after { content: ""; height: 1px; background: color-mix(in srgb, var(--color-text) 30%, transparent); }
  .m-menu__link.is-current .m-menu__t { color: var(--color-accent); }
  .m-menu__link.is-current .m-menu__t::before { content: "("; }
  .m-menu__link.is-current .m-menu__t::after { content: ")"; }

  .m-menu__foot {
    display: grid;
    justify-items: center;
    gap: 22px;
    margin-top: 8px;
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.m-menu-open .m-menu__foot { opacity: 1; transform: none; transition-delay: calc(0.12s + var(--i, 0) * 0.07s); }
  .m-menu__contact {
    display: flex;
    align-items: center;
    justify-content: center;
    width: min(100%, 240px);
    height: 52px;
    border: 1px solid var(--color-text);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 14px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
  }

  .m-menu__lang { display: flex; justify-content: center; gap: 8px; }
  .m-menu__lang a, .m-menu__lang span {
    display: grid;
    place-items: center;
    min-width: 52px;
    height: 44px;
    padding: 0 14px;
    border: 1px solid color-mix(in srgb, var(--color-text) 30%, transparent);
    border-radius: 999px;
    color: var(--color-text);
    font-size: 14px;
    letter-spacing: 0.08em;
    text-decoration: none;
  }
  .m-menu__lang .is-current { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }

  /* служебная кнопка «Plan» (доска планов) на телефоне не мешает контенту */
  .plan-btn { display: none; }

  /* ---------- футер ----------
     Сверху копия меню: пять ссылок крупнее в две строки на всю ширину (3 + 2, края и середина с равными промежутками),
     ниже «AFTAB art COLLECTION» по центру, внизу мелкий текст тоже по центру */
  .footer { padding: 84px 20px 22px; }
  .footer__main { flex-direction: column; align-items: stretch; gap: 0; }
  .footer__title { order: 1; }
  .footer__links { order: 2; }
  .footer__links {
    align-self: stretch;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    /* промежуток между ссылками один на обе строки: js/mobile-nav.js считает его так, чтобы первая строка (3 ссылки)
       заняла всю ширину, вторая (2 ссылки) стоит по центру с тем же промежутком */
    column-gap: var(--fgap, 82px);
    row-gap: 13px; /* между строками выходит 26px: перенос ниже — пустая строка нулевой высоты */
    padding: 26px 0;
    margin-top: 30px;
    border-top: 1px solid var(--ft-line); /* линия под заголовком; вторая — над мелким текстом (.footer__bottom) */
  }
  .footer__links li:nth-child(-n + 3) { order: 1; }
  .footer__links::after { content: ""; flex: 0 0 100%; height: 0; order: 2; }
  .footer__links li:nth-child(n + 4) { order: 3; }
  .footer__links a { font-size: 15px; letter-spacing: 0.08em; }
  .footer__title { align-self: center; text-align: center; font-size: clamp(40px, 12.4vw, 110px); }
  .footer__bottom { flex-direction: column; align-items: center; text-align: center; gap: 8px; margin-top: 0; padding-top: 22px; font-size: 11px; }
  .footer__bottom p { text-align: center; }
  .footer__tagline { text-align: center; }
}

@media (max-width: 900px) {
  /* ---------- главная: первый экран ----------
     Всё помещается в один экран: сверху ряд картин (малая слева, большая по центру, две малые справа
     и «Scroll» под ними), ниже крупный заголовок, текст и кнопка Visit Gallery. Контейнеры .showcase и
     колонки «растворяются» (display: contents), поэтому заголовок, текст и картины делят одну сетку */
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.26fr) minmax(0, 1fr) minmax(0, 0.26fr);
    grid-template-rows: 1fr auto auto;
    column-gap: 8px; /* по горизонтали такой же зазор, как между двумя правыми фото по вертикали (8px) */
    row-gap: 14px;
    min-height: 100vh;
    min-height: 100svh;
    padding: 106px 20px max(22px, env(safe-area-inset-bottom)); /* верхний отступ: ряд картин не липнет к шапке */
  }
  .showcase, .showcase__col--left, .showcase__col--center { display: contents; }

  .showcase__photo--center { grid-column: 2; grid-row: 1; align-self: center; width: 100%; height: auto; max-width: none; aspect-ratio: 1 / 1; }
  .showcase__photo--left { grid-column: 1; grid-row: 1; align-self: center; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .showcase__col--right {
    grid-column: 3;
    grid-row: 1;
    align-self: center;
    height: auto;
    align-items: center; /* «Scroll» со стрелкой стоит по центру малых картин над ним */
    justify-content: center;
    gap: 16px;
  }
  .showcase__right-photos { width: 100%; height: auto; display: flex; flex-direction: column; gap: 8px; }
  .showcase__photo--right-little,
  .showcase__photo--right-big { position: relative; top: auto; left: auto; width: 100%; height: auto; aspect-ratio: 1 / 1; }
  .showcase__scroll { font-size: 14px; gap: 6px; white-space: nowrap; justify-self: auto; align-self: center; }
  /* на телефоне картины цветные: чёрно-белый вид нужен только как «до наведения» на компьютере */
  .showcase__photo--left img,
  .showcase__photo--right-little img,
  .showcase__photo--right-big img { filter: none; }

  .hero__title {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 0;
    margin: 4px 0 0;
    padding: 0;
    text-align: left;
    font-size: clamp(52px, 20.6vw, 150px);
    line-height: 0.94;
    letter-spacing: -0.05em;
  }
  .showcase__top { grid-column: 1 / -1; grid-row: 3; margin-top: 0; gap: 26px; }
  .showcase__text { font-size: 15px; line-height: 1.55; max-width: 19.6em; text-wrap: balance; } /* без одинокого слова в последней строке */
  .showcase__visit { gap: 12px; font-size: 12px; }
  .showcase__visit-icon { width: 52px; height: 52px; }
  .showcase__visit-icon > svg:not(.showcase__visit-arrow) { width: 100%; height: 100%; }

  /* ---------- главная и галерея: заголовок, фильтры, карточки ---------- */
  .gallery-intro { padding: 96px var(--page-gutter) 0; }
  .gallery-intro__title { font-size: clamp(52px, 16vw, 110px); }
  .gallery-intro__text { margin-top: 20px; font-size: 16px; line-height: 1.55; }
  .gallery-page .gallery-intro { padding-top: 104px; }
  .gallery-page .gallery-intro__title { font-size: clamp(40px, 11.6vw, 110px); line-height: 1.04; }
  .gallery-filters { margin-top: 28px; width: 100%; gap: clamp(6px, 2.2vw, 10px); --gf-icon: clamp(38px, 11.6vw, 46px); }
  /* капсула со вкладками ужимается вместе с экраном (шрифт и поля в vw), чтобы обе вкладки и два круга всегда помещались в строку */
  /* вкладок три и они не помещаются в строку с двумя кругами: капсула занимает всё свободное место, первые две видны целиком (если вкладок две, как у художников, капсула ровно по ним),
     третья выглядывает под затуханием справа и листается пальцем (js/mobile-nav.js гасит затухание в конце и подкатывает выбранную вкладку) */
  .gallery-filters__tabs { flex: 0 1 auto; min-width: 0; padding: 4px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
  .gallery-filters__tabs::-webkit-scrollbar { display: none; }
  .gallery-filters__tabs:not(.is-end) { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent); }
  .gallery-filters__tab { height: calc(var(--gf-icon) - 10px); padding: 0 clamp(7px, 2.6vw, 16px); font-size: clamp(9px, 2.7vw, 13px); letter-spacing: 0.02em; }
  .gallery-filters__pill { top: 4px; height: calc(var(--gf-icon) - 10px); font-size: clamp(9px, 2.7vw, 13px); letter-spacing: 0.02em; }
  .gallery-filters__icon, .gallery-filters__search { width: var(--gf-icon); height: var(--gf-icon); }
  .gallery-filters { justify-content: center; }
  .gallery-filters__search { margin-left: 0; } /* круг поиска вплотную к капсуле, через обычный зазор, а не у края строки */
  .gallery-filters__search-pill { width: var(--gf-icon); height: var(--gf-icon); }
  .gallery-filters__search-btn { width: calc(var(--gf-icon) - 10px); height: calc(var(--gf-icon) - 10px); }
  .gallery-filters__search-input { height: calc(var(--gf-icon) - 10px); font-size: 13px; padding: 0 14px 0 10px; }

  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 10px; padding: 30px 20px 80px; }
  .gallery-card { margin: 0; }
  .gallery-card__photo { width: 100%; max-width: none; height: 42vw; }
  .gallery-card__stage img { max-width: 42vw; max-height: 42vw; }
  .gallery-page { --card-box: 42vw; }
  .gallery-page .gallery-card__photo { height: 42vw; max-width: none; }
  .gallery-page .gallery-card__stage img { max-width: 42vw; max-height: 42vw; }
  /* hover на телефоне нет: картина выбирается нажатием (js/card-tap.js ставит .is-hovered), и тогда появляются
     линейки размеров, остальные картины гаснут, подпись заменяют кнопки, а поверх картины встаёт линза (js/photo-lens.js) */
  .gallery-card__dim--top { height: 24px; gap: 3px; }
  .gallery-card__dim--left { width: 22px; gap: 3px; }
  .gallery-card__dim--top .gallery-card__dim-line { height: 7px; }
  .gallery-card__dim--left .gallery-card__dim-line { width: 7px; }
  .gallery-card__dim-label { font-size: 9px; }
  .gallery-card__stage { -webkit-tap-highlight-color: transparent; }
  .gallery-card.is-hovered .gallery-card__stage { touch-action: none; } /* выбранную картину палец не прокручивает, а двигает линзу */
  .gallery-card__hint { position: absolute; inset: 0; display: flex !important; align-items: center; justify-content: center; pointer-events: none; }
  .gallery-card__buttons { display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
  .gallery-card.is-hovered .gallery-card__buttons { opacity: 1; transform: none; transition-delay: 0.1s; }
  .gallery-card.is-hovered .gallery-card__buttons > a { pointer-events: auto; }
  .gallery-card__caption .gallery-card__title,
  .gallery-card__caption .gallery-card__meta { transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
  .gallery-card.is-hovered .gallery-card__caption .gallery-card__title,
  .gallery-card.is-hovered .gallery-card__caption .gallery-card__meta { opacity: 0; transform: translateY(-10px); }
  .gallery-card__buttons .gallery-card__shop { height: 38px; padding: 0 16px; font-size: 12px; letter-spacing: 0.06em; }
  .gallery-card__buttons .gallery-card__shop .navbar__btn-ring-track,
  .gallery-card__buttons .gallery-card__shop .navbar__btn-ring-progress { height: 38px; rx: 19px; ry: 19px; }
  .gallery-card__buttons .gallery-card__cart { width: 38px; height: 38px; }
  .gallery-card__buttons .gallery-card__cart svg { width: 16px; height: 16px; }
  .gallery-card__buttons .gallery-card__cart-del { margin: -8px 0 0 -8px; }
  .gallery-card__caption { margin-top: 14px; }
  .gallery-card__title { font-size: 20px; }
  .gallery-card__meta { font-size: 12px; }
  .gallery-card__price { font-size: 15px; }
  .gallery-more { padding-top: 40px; }
  .gallery-more .navbar__btn { height: 54px; padding: 0 34px; font-size: 14px; }
  .gallery-more .navbar__btn-ring-track,
  .gallery-more .navbar__btn-ring-progress { height: 54px; rx: 27px; ry: 27px; }
  .gallery-more .navbar__new-arrow { width: 54px; height: 54px; }
  .gallery-more .navbar__new-arrow svg { width: 20px; height: 20px; }

  /* лента «A (Journey) Through Time»: на телефоне картины сеткой 3 в ширину и 4 в высоту, заголовок в две строки поверх */
  .journey__grid {
    --cell: min(calc((100vw - 46px) / 3), calc((100svh - 120px) / 4));
    grid-template-columns: repeat(3, var(--cell));
    grid-template-rows: repeat(4, var(--cell));
    gap: 7px;
  }
  .journey__title { font-size: min(13vw, 64px); line-height: 1.12; padding: 0 12px; }

  /* ---------- галерея / художники: панель фильтров — шторка снизу ---------- */
  .gallery-layout,
  .gallery-layout.is-filters-hidden { display: block; padding: 24px 14px 100px; }
  .gallery-layout:not(.is-filters-hidden) .gallery-filter {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 960;
    max-height: 84vh;
    display: flex;
    border-radius: 26px 26px 0 0;
    border-width: 1px 0 0;
    box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.35);
    animation: mSheetIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  @keyframes mSheetIn { from { transform: translateY(100%); } to { transform: none; } }
  .gallery-layout .gf__scroll { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .gallery-layout .gf__foot { display: block; }
  .gallery-layout.is-filters-hidden .gallery-filter { display: none; }
  .artist-grid,
  .gallery-layout:not(.is-filters-hidden) .artist-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 12px; }
  .artists-page .gallery-layout { padding-top: 28px; }
  .artist-card__name { margin-top: 18px; font-size: 22px; }
  .artist-card__meta { font-size: 12px; }
  .artist-card__count { font-size: 14px; margin-top: 8px; }
  .artists-page .gallery-intro__text { max-width: none; }
}

@media (max-width: 900px) {
  /* ---------- «О нас»: первый экран ---------- */
  /* маленькие картины на первом экране на телефоне убраны: остаются сцена, «Scroll» внизу по центру и заголовок */
  .about-first__photo, .about-first__right .showcase__right-photos { display: none; }
  .about-first__right { top: auto; bottom: calc(3.2vh + env(safe-area-inset-bottom)); left: 0; right: 0; align-items: center; }
  .about-first__title { font-size: min(26vw, 22.85vh); bottom: 9vh; line-height: 0.96; } /* «About» и «Aftab» больше не слипаются */

  /* ---------- «О нас»: манифест, цифры ---------- */
  .abm { padding-top: 100px; }
  .abm__h { font-size: calc((100vw - 2 * var(--page-gutter)) / 8.7); }
  .abm__side { grid-template-columns: 1fr; row-gap: 28px; margin-top: 60px; }
  .abm__lead { max-width: none; font-size: clamp(30px, 8.4vw, 44px); }
  .ab__sec { padding: 64px var(--page-gutter); }
  .ab__num-v { font-size: clamp(54px, 16vw, 90px); }

  /* ---------- «О нас»: лента эпох (закреплена, едет по прокрутке) ---------- */
  .abt__copy { top: 15vh; transform: none; width: calc(100vw - 2 * var(--page-gutter)); }
  .abt__p--intro .abt__copy { top: 50%; transform: translateY(-50%); width: calc(100vw - 2 * var(--page-gutter)); }
  .abt__h { font-size: clamp(46px, 15vw, 90px); }
  .abt__t { font-size: clamp(32px, 9.4vw, 54px); }
  .abt__num { font-size: 64vw; left: -2vw; bottom: -6vw; }
  .abt__fig--1 { left: var(--page-gutter); right: auto; top: auto; bottom: 13vh; width: 42vw; }
  .abt__fig--2 { right: var(--page-gutter); top: auto; bottom: 22vh; width: 34vw; }
  .abt__bar { bottom: 4.5vh; }

  /* ---------- «О нас»: стопка работ ---------- */
  /* стопка по центру экрана (картина 4:3 шириной 74vw); заголовок разбит надвое: «A (Journey)» над картиной, «Through Time» под ней
     (под стопкой видны края нижних листов — отступ побольше), обе по центру и без наезда на фото */
  .abv__stick { --abv-w: 74vw; --abv-h: 55.5vw; }
  .abv__stack { top: 0; height: calc(50vh + var(--abv-h) / 2); }
  .abv__img { width: 74vw; margin-left: -37vw; }
  .abv__title { font-size: clamp(34px, 12.6vw, 70px); }
  .abv__side { left: 0; right: 0; text-align: center; }
  .abv__side--l { top: calc(50vh - var(--abv-h) / 2 - 44px); transform: translateY(-100%); }
  .abv__side--r { top: calc(50vh + var(--abv-h) / 2 + 11vh); transform: none; }

  /* ---------- «О нас»: ленты и художники ---------- */
  .ab__work-img { height: 46vw; }
  .abr__row[data-row="-1"] .ab__work-img { height: 36vw; }
  .abr__head { padding: 0 var(--page-gutter); }
  .abl__row { grid-template-columns: 34px minmax(0, 1fr); row-gap: 4px; }
  .abl__city { grid-column: 2; font-size: 11px; }
  .abl__cnt { display: none; }
  .abl__name { font-size: clamp(30px, 8.6vw, 44px); }
  .abl__head { align-items: flex-start; }

  /* ---------- страница работы ---------- */
  .work__inner { min-height: 100svh; padding: 100px var(--page-gutter) calc(40px + env(safe-area-inset-bottom)); }
  .work__layout { margin-top: 38px; row-gap: 30px; align-content: start; }
  /* рамка по размеру самой картины (а не квадрат): горизонтальная картина занимает всю ширину, вертикальная — высоту экрана;
     слева место под вертикальную размерную линию */
  .work__frame { width: 100%; height: auto; justify-content: center; }
  .work__stage img { max-width: calc(100vw - 2 * var(--page-gutter) - 56px); max-height: min(60svh, 520px); } /* по 28px с каждой стороны: слева как раз помещается вертикальная линейка, картина остаётся по центру экрана */
  .work__stage .gallery-card__dim--top { height: 30px; gap: 3px; }
  .work__stage .gallery-card__dim--left { width: 28px; gap: 3px; }
  .work__stage .gallery-card__dim-label { font-size: 11px; }
  html.lens-touch-on .work__stage { touch-action: none; } /* пока линза на картине, палец двигает её, а не листает страницу */
  .work__eyebrow { font-size: 12px; letter-spacing: 0.1em; }
  .work__title, .work__title.is-md, .work__title.is-sm { margin-top: 6px; font-size: clamp(44px, 13vw, 76px); line-height: 1.02; text-wrap: balance; }
  .work__tabs { gap: 24px; margin-top: 20px; padding-top: 0; }
  .work__tab { padding-bottom: 10px; font-size: 13px; letter-spacing: 0.06em; }
  .work__panel { height: auto; max-height: none; min-height: 220px; }
  .work__scroll { max-height: 46svh; padding: 14px 24px 14px 14px; }
  .work__text { font-size: 15px; line-height: 1.5; }
  .work__buttons { gap: 10px; margin-top: 22px; }

  /* ---------- 404 ---------- */
  .nf .work__inner { padding-top: 104px; }
  .nf .work__layout { grid-template-columns: 1fr; row-gap: 28px; }
  .nf .work { --frame: min(78vw, 46vh, 420px); }
  .nf .work__frame { margin: 0 auto; justify-content: center; }
  .nf__code { font-size: clamp(100px, 34vw, 180px); }
  .nf__title { font-size: 12px; letter-spacing: 0.34em; text-indent: 0.34em; }
}

/* ---------- корзина: шаги в одну строку на узком экране ---------- */
@media (max-width: 520px) {
  .cp__steps { padding: 0 20px 18px; font-size: 10px; letter-spacing: 0.8px; }
  .cp__steps li { gap: 5px; }
  .cp__steps li + li::before { width: 12px; margin: 0 6px 0 8px; }
  .cp__steps i { width: 20px; height: 20px; font-size: 10px; }
}

/* низкие телефоны (например 360×640): чуть плотнее, чтобы первый экран главной помещался без прокрутки */
@media (max-width: 900px) and (max-height: 680px) {
  .hero { padding-top: 98px; padding-bottom: 14px; row-gap: 12px; }
  .showcase__top { gap: 20px; }
}

@media (max-width: 380px) {
  .navbar { padding-left: 16px; padding-right: 16px; }
  .navbar__cta { gap: 6px; }
}

/* ---------- свой курсор выключен на узком экране ----------
   Картинки-курсоры (стрелка, рука, запрет), спиннер и плавающий элемент нужны только при управлении мышью
   в широком окне (от 901 px). Здесь возвращаем обычные курсоры системы */
@media (max-width: 900px) {
  html, html.has-cursor { cursor: auto; }
  :root { --cursor-pointer: pointer; --cursor-not-allowed: not-allowed; }
  html.has-cursor { --cursor-pointer: pointer; --cursor-not-allowed: not-allowed; }
  html.is-busy, html.is-busy * { cursor: auto !important; }
  .cursor { display: none !important; }
}