/* ============================================================================
   ГУСІ — мобильный макет
   Отдельный фрейм Figma 2104:21 (360×5550). Это не «сжатый десктоп»:
   у мобильной версии свои координаты, свой порядок блоков и своя палитра
   секции «Дызайн гусей» (на мобиле она тёмная).

   Координаты переопределяются через !important, потому что на десктопе
   они заданы инлайново — так значения из Figma остаются рядом с разметкой.
   ========================================================================= */

@media (max-width: 767px) {

  /* ══════════════════════════════════════════════════════════════════
     Общее
     ═══════════════════════════════════════════════════════════════ */
  .br-mobile { display: block; }

  /* Межстрочный в мобильном фрейме распределён иначе: у заголовков секций
     он плотный (40 при кегле 50), у абзаца — ровно кегль. Значения те же
     два токена, что и на десктопе, меняется только их применение. */
  .section h2.t-h1 { line-height: var(--lh-tight); }
  .t-body--tight { line-height: var(--lh-flat); }

  .btn {
    height: calc(50 * var(--u));
    padding: 0 var(--btn-pad-x);
  }

  .arrow {
    width: calc(40 * var(--u));
    height: calc(40 * var(--u));
  }

  /* Шеврон в мобильном фрейме той же величины в юнитах макета, что и на
     десктопе (21×32), — своего размера у него нет, правило убрано. */

  /* Подвал на мобиле обычный, без «раскрытия» — иначе fixed-слой
     конфликтует с адресной строкой браузера. */
  #scroll-content {
    margin-bottom: 0;
  }

  /* В мобильном кадре подвал живёт по своим координатам целиком: он не
     раскрывается из-под контента и не ужимается — высота у него своя,
     из мобильного фрейма. */
  .section--footer {
    --footer-k: 1;
    position: relative;
    height: auto;

    /* Подвал поднят НАД содержимым и оставлен без своей заливки — оба
       условия нужны боковым лентам арнаменту, чтобы уйти за него, а не
       обрываться на его кромке (см. .page-orn ниже).

       Поднят: ленты живут внутри #scroll-content (z-index 1), и при
       подвале на нулевом слое они рисовались бы ПОВЕРХ него.
       Без заливки: своя белая подложка спрятала бы их наглухо, и срез
       получился бы ровно там же, где и был. Белое под подвалом никуда
       не делось — оно на body.

       Панель подвала полупрозрачная (opacity .5), поэтому лента под ней
       не пропадает, а гаснет до трети силы: ровно то, что читается как
       «орнамент уходит под панель». */
    z-index: 2;
    background: transparent;
  }

  /* Скругление и обрез на мобиле не нужны: панель тут отдельным слоем
     (.footer__glow) и своей высоты, а слово из кадра не свисает. */
  .section--footer .stage {
    width: calc(var(--design-w) * var(--u));
    height: calc(var(--stage-h) * var(--u));
    overflow: visible;
    border-radius: 0;
  }

  /* Композиция мобильного подвала стоит по своим координатам, за края
     кадра ей держаться не надо. */
  .footer__duck--r { left: calc(var(--x) * var(--u)); right: auto; }
  .footer__wordmark { left: calc(var(--x) * var(--u)); }

  /* ══════════════════════════════════════════════════════════════════
     Шапка
     ═══════════════════════════════════════════════════════════════ */
  /* Шапка едет вместе со страницей. На узком экране до магазина и меню
     иначе не дотянуться, не прокрутив всю страницу обратно наверх.

     fixed, а не sticky: шапка лежит внутри первой секции, и sticky
     отпустил бы её на её же границе. Ни на одном из предков нет ни
     transform, ни filter, ни will-change — единственного, что делает
     fixed-потомка привязанным к предку, — поэтому коробка честно
     остаётся у верха окна. */
  .hdr {
    position: fixed;
    height: calc(70 * var(--u));

    /* 0 — шапка как в макете первого экрана, 1 — подобранная шапка над
       содержимым. Число ведёт прокрутка (js, stickyHeader); всё, что от
       него зависит, считает css. Так за кадр меняется одно свойство на
       шапке, а не четыре записи в стиль трёх её детей. */
    --hdr-lift: 0;
  }

  /* Подбор — только translate и scale, то есть та же матрица, которую
     браузер и так держит на слое. Ни высота шапки, ни top детей за кадр
     не трогаются: раскладке пересчитываться не с чего.

     6 юнитов и 0.12 не взяты на глаз: при них шапка садится с 70 юнитов
     на 58 (столько же остаётся от подложки), «МЕНЮ» и «МАГАЗІН» уходят
     с 22 на 16, а середина логотипа — с 35 на 29, ровно в середину
     подобранной полосы. */
  .hdr__menu,
  .hdr__store {
    translate: 0 calc(var(--hdr-lift) * -6 * var(--u));
  }

  .hdr__logo {
    translate: -50% calc(var(--hdr-lift) * -6 * var(--u));
    scale: calc(1 - var(--hdr-lift) * 0.12);
  }

  /* В режиме сверки с макетом шапка возвращается на своё место в первой
     секции: снимки идут по секциям, и закреплённая шапка попала бы в
     каждый из них. */
  html.is-static .hdr {
    position: absolute;
  }

  /* Подложка. Пока первый экран в кадре, её нет — шапка стоит прямо на
     фотографии, как в макете. Дальше она наливается и подбирается к
     56 юнитам: под ней уже идёт содержимое, и читаться поверх него шапка
     обязана. Полупрозрачная нарочно — сквозь неё видно и боковые ленты
     арнаменту, и то, что проезжает под шапкой. */
  .hdr__veil {
    display: block;
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(10px) saturate(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(1.08);
    opacity: 0;
  }

  /* Волосяная линия по низу подложки — граница шапки и страницы. */
  .hdr__veil::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--c-brand-50);
    opacity: 0.4;
  }

  .hdr__menu,
  .hdr__store {
    top: calc(22 * var(--u));
    height: calc(26 * var(--u));
    font-size: 0;               /* на мобиле остаются только иконки */
    gap: 0;
  }

  .hdr__menu { left: calc(20 * var(--u)); }
  .hdr__store { right: calc(20 * var(--u)); }

  .hdr__burger {
    width: calc(20 * var(--u));
    height: calc(21 * var(--u));
  }

  .hdr__burger span:nth-child(2) { top: calc(9.5 * var(--u)); }
  .hdr__burger span:nth-child(3) { top: calc(19 * var(--u)); }
  .hdr__menu[aria-expanded="true"] .hdr__burger span:nth-child(1) { transform: translateY(calc(9.5 * var(--u))) rotate(45deg); }
  .hdr__menu[aria-expanded="true"] .hdr__burger span:nth-child(3) { transform: translateY(calc(-9.5 * var(--u))) rotate(-45deg); }

  .hdr__store-icon {
    width: calc(26 * var(--u));
    height: calc(24 * var(--u));
  }

  .hdr__logo {
    height: calc(70 * var(--u));
    gap: calc(8 * var(--u));
  }

  .hdr__logo-duck {
    width: calc(29 * var(--u));
    height: calc(36 * var(--u));
  }

  /* Та же координата, что у бургера в шапке — слева */
  .menu__close {
    top: calc(22 * var(--u));
    left: calc(20 * var(--u));
    height: calc(26 * var(--u));
    gap: calc(10 * var(--u));
    font-size: var(--fs-body);
  }

  .menu.is-open .menu__close .hdr__burger span:nth-child(1) { transform: translateY(calc(9.5 * var(--u))) rotate(45deg); }
  .menu.is-open .menu__close .hdr__burger span:nth-child(3) { transform: translateY(calc(-9.5 * var(--u))) rotate(-45deg); }

  /* ══════════════════════════════════════════════════════════════════
     1 · HERO — Figma «блок 1» 360×750
     ═══════════════════════════════════════════════════════════════ */
  .section--hero { height: max(100vh, calc(750 * var(--u))); }
  .section--hero .stage { --stage-h: 750 !important; }

  .hero__goose  { --x: -681 !important; --y: -80 !important; --w: 1794 !important; --h: 906 !important; }
  /* Коробка дымки расширена на 150 юнитов в каждую сторону — туда уходил
     бы гауссов хвост. Стопы — тот же erf-профиль σ=50, пересчитанный на
     мобильную высоту 224 (при ней центр не добирает до 0.8, как в макете). */
  .hero__haze {
    --x: -310 !important; --y: 250 !important; --w: 980 !important; --h: 524 !important;
    background: linear-gradient(180deg,
      rgba(255, 255, 255, 0.001) 0%,
      rgba(255, 255, 255, 0.018) 9.5%,
      rgba(255, 255, 255, 0.127) 19.1%,
      rgba(255, 255, 255, 0.400) 28.6%,
      rgba(255, 255, 255, 0.673) 38.2%,
      rgba(255, 255, 255, 0.776) 47.7%,
      rgba(255, 255, 255, 0.780) 50%,
      rgba(255, 255, 255, 0.776) 52.3%,
      rgba(255, 255, 255, 0.673) 61.8%,
      rgba(255, 255, 255, 0.400) 71.4%,
      rgba(255, 255, 255, 0.127) 80.9%,
      rgba(255, 255, 255, 0.018) 90.5%,
      rgba(255, 255, 255, 0.001) 100%);
  }
  /* Figma отмеряет текстовый блок от верха строки, браузер — от верха
     line-box. На двух строках кегля 50 разница набегает в 10 юнитов,
     поэтому координата сдвинута на них, а не подогнана «на глаз». */
  .hero__title  { --x: 39 !important;  --y: 317 !important; --w: 283 !important; }
  /* Коробка подводки шире написанного и стоит серединой на оси кадра:
     ширину ей задаёт не текст, а ось. В прежних 136 юнитах — мерке под
     кегль 20 — подводка уровня LEAD (26) рвалась на две строки, и вторая
     уходила под кнопку. */
  .hero__sub    { --x: 30 !important;  --y: 423 !important; --w: 300 !important; }
  /* Кнопки стоят по центру кадра — так же, как заголовок и подзаголовок
     над ними. Координата стоит на ЯКОРЕ центра, а не на самой кнопке:
     кнопку двигает GSAP, якорь неподвижен (см. .at--cx в base.css). */
  .hero__btn-slot { --cx: 180 !important; --y: 458 !important; }

  /* Внизу геро — горизонтальная орнаментная лента (Figma Rectangle 23) */
  /* В мобильном фрейме полоса — тот же горизонтальный градиент, что и на
     десктопе, но поверх него лежит лента арнамента (в макете она на 70%). */
  .hero__bar {
    --x: 20 !important;
    --y: 678 !important;
    --w: 320 !important;
    --h: 25 !important;
    background: var(--grad-h);
  }

  .hero__bar::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Шаг мотива в макете — 19.6 юнита; при `auto 100%` тайл даёт 20.6
       (99/120 от высоты полосы), и к правому краю лента разъезжается на
       целый мотив. Поэтому ширина задаётся явно, а не выводится из высоты. */
    background: url("../assets/ornament/ornament-tile-h.png") repeat-x calc(-18 * var(--u)) center / calc(19.6 * var(--u)) 100%;
    opacity: 0.7;
  }

  /* Вертикальные полосы орнамента — только для десктопного макета */
  .section--hero .depth-2 { display: none; }

  /* Боковые ленты арнаменту идут и на мобиле — теми же двумя полосами по
     краям страницы, что и на десктопе.

     Ширина не переносится из десктопного кадра как есть: 53 юнита при
     ширине 360 съели бы по 15% экрана с каждой стороны. Взято 16 при
     отступе 2 — ровно поле макета (--gutter: 18), поэтому лента кончается
     там, где начинается содержимое: заголовки секций стоят на 18, панели
     на 20, и ни на одно из них лента не залезает.

     Шаг повтора считается из ширины, а не переносится числом: звено в
     картинке 53×1132, при 16 юнитах ширины ему полагается 1132·16/53 =
     341.7. Иначе мотив растянулся бы по вертикали втрое.

     Мобильный фрейм Figma этих лент не содержит — там арнамент лежит
     поперёк, под первым экраном (см. .hero__bar::after). Ленты по краям
     добавлены по прямой просьбе: на телефоне страница должна быть в той
     же рамке, что и на компьютере. Поперечная лента при этом остаётся. */
  .page-orn {
    width: calc(16 * var(--u));
    background-size: 100% calc(341.7 * var(--u));

    /* Лента заходит ЗА подвал и там гаснет. Прежде она кончалась ровно по
       верхней кромке панели — прямым срезом поперёк обеих лент, и в
       вырезах скруглённых углов этот срез был виден целиком.

       130 юнитов — столько нужно, чтобы уход читался: панель
       полупрозрачная, лента под ней видна и продолжается, а её конец
       прячется. Дальше идти незачем и дорого: с 538-го юнита начинается
       «ГУСІ», его буквы едут на своих слоях, и держать под ними ещё
       и повторяющийся узор стоило пяти миллисекунд p95 и полудюжины
       длинных кадров на прогон.

       Гаснет маской, а не обрывается: полная сила до самой кромки
       (100% − 130) и в ноль к своему низу. Шаг мотива при этом не
       сбивается — повтор отмеряется от верха ленты, а верх не двигался.

       Высоты документу лента не добавляет: 130 юнитов целиком лежат
       внутри подвала, которому до конца страницы ещё 360. */
    bottom: calc(-130 * var(--u));
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 130 * var(--u)), transparent 100%);
            mask-image: linear-gradient(to bottom, #000 calc(100% - 130 * var(--u)), transparent 100%);
  }

  /* ══════════════════════════════════════════════════════════════════
     2 · БІРУЛЬКА — «блок 2»
     ═══════════════════════════════════════════════════════════════ */
  .section--birulka .stage { --stage-h: 750 !important; }

  .birulka__goose { --x: -199 !important; --y: 21 !important;  --w: 731 !important; --h: 487 !important; }
  .birulka__brush { --x: 41 !important;   --y: 505 !important; --w: 279 !important; }
  .birulka__sub   { --x: 30 !important;   --y: 559 !important; --w: 300 !important; }
  .birulka__btn-slot { --cx: 180 !important;  --y: 595 !important; }


  /* ══════════════════════════════════════════════════════════════════
     3 · НАШЫ БІРУЛЬКІ — «блок 3»
     На мобиле в кадре один товар, стрелки листают его же слот.
     ═══════════════════════════════════════════════════════════════ */
  .section--keychains .stage { --stage-h: 750 !important; }

  .section--keychains h2 { --x: 18 !important; --y: 25 !important; --w: 141 !important; }

  .key { display: none; }

  .key--mid {
    display: block;
    --x: -97 !important;
    --y: 138 !important;
    --w: 577 !important;
    --h: 343 !important;
  }

  /* В кадре один товар — видима только средняя кнопка. Прячется ЯКОРЬ,
     а не кнопка: у нулевого по ширине якоря display:none снимает из
     потока и его, и её разом. */
  .buy-slot { display: none; }

  .buy-slot:nth-child(2) {
    display: flex;
    --cx: 180 !important;
    --y: 498 !important;
  }

  /* Выделяться этой кнопке не на фоне чего — заливка здесь просто её вид,
     как в макете. На десктопе, где рядом стоят ещё две, она живёт только
     на наведении.

     Кегль тут на уровень выше десктопного (BODY, а не SMALL): в мобильном
     кадре эта кнопка одна и она главный призыв блока, а не подпись в ряду
     из трёх. Коробка у неё из макета — 152×50, — и подпись уровня SMALL
     тонула бы в ней. Уровень свой, но из той же шкалы. */
  .buy-slot:nth-child(2) .btn--buy {
    min-width: calc(152 * var(--u));
    width: calc(152 * var(--u));
    padding: 0;
    font-size: var(--fs-body);
    background: var(--c-brand-50);
    color: var(--c-paper);
  }

  .section--keychains .arrow--prev { --x: 13 !important; --y: 275.5 !important; }
  .section--keychains .arrow--next { --x: 306 !important; --y: 275.5 !important; }

  .keychains__brush {
    --x: 12 !important;
    --y: 609.5 !important;
    --w: 334 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     4 · ДЫЗАЙН ГУСЕЙ — «блок 4», карточки в столбик
     ═══════════════════════════════════════════════════════════════ */
  .section--design .stage { --stage-h: 1770 !important; }
  .section--design h2 { --x: 18 !important; --y: 39 !important; --w: 141 !important; }

  /* Градиент панели в мобильном фрейме растянут иначе, чем в десктопном:
     первые ~31% высоты он держит сиреневый и только потом уходит в белый.
     Стопы посчитаны по трём замерам цвета из экспорта Figma. */
  .design__panel {
    --x: 20 !important;
    --y: 128 !important;
    --w: 320 !important;
    --h: 1634 !important;
    background: linear-gradient(180deg,
      var(--c-brand-50) 0%,
      var(--c-brand-50) 30.8%,
      var(--c-paper-50) 93.3%);
  }

  .dcard:nth-of-type(1) { --x: 31 !important; --y: 154 !important;  --w: 297 !important; --h: 380 !important; }
  .dcard:nth-of-type(2) { --x: 31 !important; --y: 554 !important;  --w: 297 !important; --h: 385 !important; }
  .dcard:nth-of-type(3) { --x: 31 !important; --y: 962 !important;  --w: 297 !important; --h: 380 !important; }
  .dcard:nth-of-type(4) { --x: 31 !important; --y: 1362 !important; --w: 297 !important; --h: 380 !important; }

  /* Коробки подобраны так, чтобы кадрирование совпало с макетом: размер
     равен натуральному размеру файла, умноженному на масштаб из Figma,
     поэтому object-fit: fill не искажает пропорции. */
  .dcard__img { object-fit: fill; }

  .dcard:nth-of-type(1) .dcard__img { --x: -7 !important; --y: 44.9 !important; --w: 303 !important; --h: 366.6 !important; }
  .dcard:nth-of-type(2) .dcard__img { --x: -28.2 !important; --y: -2.2 !important; --w: 345 !important; --h: 395 !important; }
  .dcard:nth-of-type(3) .dcard__img { --x: -28.4 !important; --y: 5.1 !important; --w: 355.2 !important; --h: 422.2 !important; }
  .dcard:nth-of-type(4) .dcard__img { --x: 0 !important; --y: 20 !important; --w: 294.8 !important; --h: 358.5 !important; }

  .dcard:nth-of-type(1) .dcard__brush {
    --x: 77.5 !important; --y: 18 !important; --w: 143 !important;
  }
  .dcard:nth-of-type(2) .dcard__brush {
    --x: 13.5 !important; --y: 15 !important; --w: 271 !important;
  }
  .dcard:nth-of-type(3) .dcard__brush {
    --x: 80 !important; --y: 19 !important; --w: 138 !important;
  }
  .dcard:nth-of-type(4) .dcard__brush {
    --x: 38.5 !important; --y: 15 !important; --w: 221 !important;
  }

  /* ══════════════════════════════════════════════════════════════════
     5 · БЕЛАРУСКІЯ ТРАДЫЦЫІ — «блок 5»
     ═══════════════════════════════════════════════════════════════ */
  .section--traditions .stage { --stage-h: 750 !important; }

  .section--traditions h2       { --x: 18 !important;  --y: 18 !important;  --w: 189 !important; }
  .section--traditions .t-lead  { --x: 19 !important;  --y: 110 !important; --w: 280 !important; }
  /* В мобильном рендере верх панели закрыт белым фото, а градиент
     начинается только под ним — поэтому саму панель ставим туда,
     где она реально видна. */
  .trad__panel {
    --x: 20 !important;
    --y: 370 !important;
    --w: 320 !important;
    --h: 360 !important;
    background: var(--grad-panel);
  }
  /* object-fit: contain ограничивает картинку по высоте (622×756 уже
     коробки), поэтому масштаб задаёт --h, а --x компенсирует боковые поля,
     которые contain добавляет сам. Низ коробки упирается в верх панели. */
  .trad__photo                  { --x: 17 !important;  --y: 130.5 !important; --w: 320 !important; --h: 240 !important; }
  /* В мобильном фрейме заголовок панели центрирован, а не прижат влево:
     вторая строка «БІРУЛЬКІ?» стоит по центру первой. */
  .section--traditions h3       { --x: 58 !important;  --y: 382 !important; --w: 244 !important; text-align: center; }
  .section--traditions .t-body--tight { --x: 80 !important; --y: 610 !important; --w: 241 !important; text-align: right; }
  .section--traditions .link    { --x: 245 !important; --y: 690 !important; }

  /* ══════════════════════════════════════════════════════════════════
     6 · МЕРЧ — верхняя часть «блока 6», светлая
     ═══════════════════════════════════════════════════════════════ */
  .section--merch {
    background: var(--c-paper);

    /* Карточка выходит за НИЗ секции, как в макете, — значит вертикаль
       остаётся открытой. А горизонталь обязана резаться: заголовок секции
       разобран на буквы, и до своего появления они разлетены по ±300
       юнитов в стороны (headingConverge в js/animations.js). Пока стояло
       overflow: visible, эти буквы растягивали ДОКУМЕНТ до 437 px при
       экране в 360 — страница ездила вбок, а начальный кадр браузера
       считал ширину окна по ней. Заодно на этой ширине центрировалась и
       закреплённая шапка, из-за чего «МАГАЗІН» уезжал за правый край.

       Пара clip/visible — единственная, которая режет одну ось и не
       трогает другую: у overflow значение visible превращается в auto,
       если по соседней оси стоит hidden, и вместо обрезки получилась бы
       прокрутка. Та же пара уже стоит на кадре карусели. */
    overflow-x: clip;
    overflow-y: visible;
  }

  /* Секция кончается там, где начинается панель подвала, — на 420-м юните
     «блока 6», а не на 340-м. Композиция от этого не двигается: карточка,
     носок, заголовок и стрелки стоят на своих --y из макета, меняется
     только граница между секциями.

     Двигать её пришлось из-за боковых лент арнаменту. Ленты кончаются
     вместе с #scroll-content, то есть вместе с этой секцией; при границе
     на 340 между их концом и верхом панели (420) оставалась голая белая
     полоса в 80 юнитов — рамка обрывалась, не дойдя до подвала. Теперь
     лента доходит ровно до панели, и разрыва нет.

     В самом макете этот зазор есть (низ карточки 372, верх панели 420),
     но там и лент по краям нет, поэтому пустое место читалось воздухом,
     а не дырой. Ни одна координата макета при этом не сдвинута. */
  .section--merch .stage { --stage-h: 420 !important; }
  .section--merch h2   { --x: 18 !important; --y: 20 !important; --w: 271 !important; }
  .section--merch .link { --x: 18 !important; --y: 140 !important; display: none; }

  .mcard { display: none; }

  .mcard--hero {
    display: block;
    --x: 20 !important;
    --y: 156 !important;
    --w: 320 !important;
    --h: 216 !important;
  }

  /* Скругление карточки мерча в мобильном фрейме — 30 (Figma 2137:53), а
     не общее --card-radius: 20, по которому живут карточки «Дызайну». */
  .mcard,
  .mcard__img {
    border-radius: calc(30 * var(--u));
  }

  /* В мобильном макете содержимое карточки — носок, футболка не показывается */
  .mcard--hero .mcard__img { display: none; }
  .mcard--hero .mcard__hang {
    display: block;
    --x: 62 !important; --y: -41 !important; --w: 197 !important; --h: 295 !important;
  }

  /* В мобильном фрейме стрелки мерча лежат прямо на сиреневой карточке
     и потому белые, а не сиреневые, как в остальных секциях. */
  .section--merch .arrow { color: var(--c-paper); }

  .section--merch .arrow--prev { --x: 14 !important;  --y: 244 !important; }
  .section--merch .arrow--next { --x: 307 !important; --y: 244 !important; }

  /* ══════════════════════════════════════════════════════════════════
     7 · ПАДВАЛ — нижняя часть «блока 6»
     Светлый фон + сиреневая панель со скруглением.
     ═══════════════════════════════════════════════════════════════ */
  /* На 80 меньше прежних 440 — ровно на столько подвал начинается выше.
     Низ страницы остаётся на 780-м юните макета, и «ГУСІ» свисает за него
     теми же 60 юнитами, что и раньше. */
  .section--footer .stage { --stage-h: 360 !important; }

  /* Кегль «ГУСІ» — 302 юнита, как в мобильном фрейме (Figma 2138:74).
     Объявить его заново приходится здесь: .section--footer в sections.css
     пересчитывает шкалу на свой --u (он зависит от --footer-k) и ставит
     туда десктопные 800. На мобиле --footer-k равен 1, но 800 всё равно
     побеждали медиазапрос на :root — слово выходило в 2.65 раза крупнее
     макета и накрывало собой весь подвал. Тем же кеглем считается и
     компенсация верха строки в .at--cap-display, поэтому вместе с
     размером на место встаёт и координата. */
  .section--footer {
    --fs-display: calc(302 * var(--u));
  }

  .footer__glow {
    inset: auto;
    left: 0;
    /* Панель и есть верх подвала: секция начинается ровно на ней. */
    top: 0;
    width: 100%;
    height: calc(406 * var(--u));
    border-radius: var(--panel-radius);
    opacity: 0.5;
  }

  /* На мобиле панель подвала — один слой градиента, а не два */
  .footer__glow::after { display: none; }

  .footer__duck { display: none; }

  /* Значков два. Координаты — из мобильного фрейма (Figma 2137:51), по
     КОРОБКАМ его фреймов: файлы static/ДЕКАБРЬ*.svg выгружены теми же
     коробками 122×217, глиф стоит внутри них там же, что и в Figma, —
     подгонять по краске нечего. Instagram занял крайнее левое место,
     где в макете стоял WhatsApp; Telegram остался у правого края.

     Числа — y макета минус 420: столько теперь до верха подвала внутри
     «блока 6» (см. --stage-h выше). Значок начинается выше этой границы,
     но краска в его коробке лежит с 84-го юнита, то есть с 450-го по
     кадру, — под белым верхом ничего видимого не прячется. */
  .footer__social li:nth-child(1) .footer__social-link { --x: -5 !important;  --y: -54 !important; }
  .footer__social li:nth-child(2) .footer__social-link { --x: 242 !important; --y: -53 !important; }

  .footer__wordmark { --x: -13 !important; --y: 88 !important; --w: 387 !important; }
}

/* ----------------------------------------------------------------------
   Планшеты 768–1200: макет десктопный, но 3D и тяжёлые эффекты
   имеет смысл упростить — этим занимается js (pointer: coarse).
   -------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 1200px) {
  .section--hero { height: max(100vh, calc(1080 * var(--u))); }
}