/* Take42 — общая обвязка сайта: шапка, меню, набор, подвал, узкий вид.

   ЗАЧЕМ ЭТОТ ФАЙЛ. До него шапка, кнопка меню, подвал и весь узкий вид лежали
   копией в каждой странице. Любая правка требовала обойти пять файлов, и это
   уже подводило: страница проекта осталась на пороге 1023 и со старым подвалом,
   когда остальной сайт переехал на 1180 и на складные строки. Теперь общее
   живёт здесь, а страница держит только своё.

   ЧТО ЗДЕСЬ ЛЕЖИТ
     — тона бумаги, гарнитуры, сброс, `.t42-lock`;
     — шапка: знак, рабочие строки, строка меню со слэшами, перелистывание
       пунктов, цвет по тому, что под шапкой (`html.head-dark` / `head-light`);
     — набор: `.kicker`, `.giant`, `.lead`, `.arrow-link` и стрелка `.ar`;
     — подпись у курсора, своя полоса прокрутки;
     — хвост страницы: «Let's Talk», знак, цветная полоса подвала, подписка;
     — кнопка меню и лист меню во весь экран;
     — узкий вид целиком, порог 1180.

   ПРАВИЛА
     1. Подключается ПОСЛЕ `/take42-fonts.css`, `/take42-brand.css` и
        `/vendor/fonts.css`, но ДО собственного `<style>` страницы: тогда
        страница перебивает общее, а не наоборот.
     2. Акцент здесь НЕ объявляется. Цвет живёт одной строкой в
        `/take42-brand.css`; всюду, где он берётся, стоит запасное значение
        `var(--accent, #c20aff)` — на случай, когда файл цвета не доехал.
     3. Порог узкого вида 1279 повторён в `/take42-site.js` (matchMedia
        `(min-width: 1280px)`). Меняется в обоих местах сразу. Разбор, почему
        именно 1279, — в `new-website/handoff-mobile-layout.md`.
     4. Разметка шапки, листа меню и подвала одинакова на всех страницах —
        образец лежит в `public/dev/careers.html`. Стили без этой разметки
        работать не будут.

   Собран из `public/dev/careers.html` 19.08.2026; замеры оригинала и разбор
   каждого числа оставлены в комментариях на месте. */

  :root {
    /* Тона бумаги сняты с оригинала пипеткой 18.08 — см. index.html */
    --paper: #dddee2;
    --sheet: #f8f8f8;
    --card: rgba(222, 223, 227, 0.95);
    --ink: #101012;
    --ink-dim: #67676a;
    /* --accent живёт в /take42-brand.css, здесь не объявляется */
    --hairline: rgba(16, 16, 18, 0.2);
    /* Гарнитура набора: Archivo. Выбрана юзером в пробнике
       /dev/marks-title.html — он сравнивал рисунок букв, а не ширину. У них
       DenimWeb, лицензионный, точного совпадения не будет; из наших Archivo
       ближе всех по рисунку. По ширине она чуть шире их: «Highlights» при
       кегле 175 у нас 750 px против их 690, у прежнего Space Grotesk было
       790. Единственная заметная разница в рисунке — хвост у «g». */
    --giant: 'Archivo', 'Arial', sans-serif;
    --body: 'Manrope', sans-serif;
    --mono: 'JetBrains Mono', monospace;
  }
/* Шрифты знака (все OFL, лежат в /vendor/fonts, ничего не тянется наружу).
     Знак у The Line нарисован прямоугольниками, а не набран, поэтому такой
     широкий и тяжёлый. Ближайшее из свободного — широкие гротески с осью
     ширины. Варианты и замеры высоты прописных: /dev/_logo.html */
  @font-face {
    font-family: 'Archivo';
    font-style: normal; font-weight: 100 900; font-stretch: 62% 125%;
    font-display: swap;
    src: url(/vendor/fonts/Archivo-var-latin.woff2) format('woff2');
  }
  @font-face {
    font-family: 'Anton';
    font-style: normal; font-weight: 400;
    font-display: swap;
    src: url(/vendor/fonts/Anton-latin.woff2) format('woff2');
  }
  /* Логотип он же домен: take42.mov одной строкой, без планки поперёк.
     Шрифт Unbounded 700, кегль 20.59vw — знак выбран юзером в пробнике
     /dev/marks-mix.html, разбор и замеры в index.html. Прежний Anton 39.53vw
     давал вдвое более высокий знак и другую букву. */
  .t42-lock {
    display: block;
    font-family: 'Unbounded', var(--giant);
    font-weight: 700; font-variation-settings: 'wght' 700;
    font-size: 20.59vw; line-height: 0.78; letter-spacing: -0.035em;
    text-transform: uppercase; white-space: nowrap;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: clip; }
  body {
    background: var(--paper); color: var(--ink);
    font-family: var(--body); font-size: 17px; line-height: 1.5;
    -webkit-font-smoothing: antialiased; overflow-x: clip;
  }
  /* ПРАВИЛО ПРОЕКТА: любая линия под текстом ровно в один пиксель — и та,
     что нарисована рамкой, и та, что рисует сам браузер. Без этого браузер
     берёт толщину из шрифта, и у Archivo на крупном кегле подчёркивание
     выходит жирным: так было у почты в футере при наведении, хотя во всём
     остальном макете линии тонкие.
     ВАЖНО: включать и выключать подчёркивание только длинным именем
     text-decoration-line. Короткое text-decoration сбрасывает толщину
     обратно в auto — именно на этом правило и не срабатывало. */
  * { text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
  a { color: inherit; text-decoration-line: none; }
  img, svg, video { max-width: 100%; display: block; }
  .pad { padding-left: max(6px, 0.463vw); padding-right: max(6px, 0.463vw); }

  header {
    position: fixed; inset: 0 0 auto 0; z-index: 20;
    display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    /* Правое поле шапки вдвое больше левого, и это не глазомер, а замер
       оригинала на трёх ширинах (1440 / 1920 / 2560): у них зазор от правого
       края до последнего пункта держится 0.92% ширины, у нас был 0.46%, то
       есть ровно вдвое меньше, и меню прилегало к углу. Левый край совпадал
       и там и там (0.46%). Логика та же, что у копирайта в подвале: правый
       край сидит на ВТОРОМ желобке, потому что по первому идёт полоса
       прокрутки. */
    gap: 16px; align-items: start; padding: 0.46vw max(12px, 0.926vw) 0.5vw max(6px, 0.463vw);
    color: var(--ink);
  }
  /* Цвет шапки задаётся не позицией скролла, а тем, что реально под ней —
     см. index.html: блоки помечены data-tone, скрипт смотрит под полосу.
     Подложки-градиента у шапки нет: у оригинала её тоже нет. */
  header { transition: color 0.35s ease; }
  html.head-dark header { color: #f6f6f4; }
  html.head-light header { color: #101012; }
  .brand { color: inherit; }
  /* Знак в шапке по размеру оригинала: у них 105x18 px при экране 1440 */
  .brand .brand-lock { font-size: max(16px, 1.60vw); letter-spacing: -0.02em; line-height: 0.8; }
  .head-slots { display: flex; gap: max(24px, 8vw); padding-left: max(16px, 14vw); }
  /* Правило было только на span, а почта в шапке — ссылка, и ей доставался
     кегль текста страницы (17 px вместо 10). Рядом со строкой «OPEN FOR
     PITCHES» она читалась заметно крупнее. У них обе строки одного кегля:
     10 px при 1440 и 12.33 при 1775 — 0.694vw. */
  .head-slots span, .head-slots a {
    font-family: var(--giant); font-size: max(9.5px, 0.6944vw); font-weight: 440;
    letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap;
  }
  /* Кружок фигурой, размеры с оригинала; мигание убрано (см. index.html) */
  .dot {
    display: inline-block; vertical-align: middle; align-self: center;
    position: relative; top: -0.08em;
    width: max(5px, 0.465vw); height: max(5px, 0.465vw);
    background: currentColor; border-radius: 50%;
    color: var(--accent, #c20aff);
    font-size: 0; line-height: 0; overflow: hidden;
  }
  nav.main .dot {
    width: max(8.5px, 0.868vw); height: max(8.5px, 0.868vw);
  }
  nav.main {
    display: flex; gap: 9px;
    font-family: var(--giant); font-size: max(15px, 1.2731vw); font-weight: 440;
    text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  }
  nav.main a { display: inline-flex; gap: 8px; align-items: baseline; }
  nav.main .sep { color: inherit; opacity: 0.75; font-weight: 300; padding: 0 3px; }
  nav.main .active { color: var(--accent, #c20aff); }

  .rl { position: relative; display: inline-block; overflow: hidden; }
  .rl > span { display: inline-block; transition: translate 0.45s cubic-bezier(.19,1,.22,1); }
  .rl::after {
    content: attr(data-t);
    position: absolute; left: 0; top: 100%;
    color: inherit;
    transition: translate 0.45s cubic-bezier(.19,1,.22,1);
  }
  nav.main a:hover .rl > span { translate: 0 -100%; }
  nav.main a:hover .rl::after { translate: 0 -100%; }

  /* Кикер, гигант и подводка — те же, что на index.html */
  .kicker {
    font-family: var(--giant); font-size: max(9px, 0.694vw); font-weight: 440;
    line-height: 1.167; letter-spacing: -0.01em;
    text-transform: uppercase; color: var(--ink);
  }
  .giant {
    /* вес 600, как выбрал юзер в пробнике (вариант «Archivo 600») */
    font-family: var(--giant); font-weight: 600; font-variation-settings: 'wght' 600;
    /* Потолка нет — см. index.html: у оригинала кегль чисто в vw */
    font-size: max(56px, 12.15vw);
    line-height: 0.8; letter-spacing: -0.04em;
  }
  .lead { font-size: max(19px, 1.9vw); line-height: 1.45; max-width: 46ch; }
  .arrow-link {
    font-family: var(--giant); font-size: max(17px, 1.852vw); font-weight: 440;
    line-height: 1.1; letter-spacing: -0.01em;
    padding-bottom: 4px; position: relative;
    display: inline-flex; align-items: center;
    transition: color 0.3s cubic-bezier(.19,1,.22,1);
  }
  .arrow-link::after {
    /* 1 px, как у них (замер их ссылок интро: ::after высотой 1 px,
       чёрный, bottom −3.33). У нас было 2 px, линия читалась жирной. */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
    background: currentColor;
    transform-origin: left; transition: transform 0.6s cubic-bezier(.19,1,.22,1);
  }
  /* Наведение на любую ссылку со стрелкой: подчёркивание уходит, цвет НЕ
     меняется, стрелка едет из конца строки в её начало. */
  .arrow-link:hover::after { transform: scaleX(0); transform-origin: right; }
  .arrow-link { padding-right: calc(0.637em + 12px); transition: color 0.3s, padding 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
  /* при наведении место под стрелку переезжает вправо-налево, поэтому текст
     отходит и стрелка встаёт перед ним, а не поверх него */
  .arrow-link:hover { padding-left: calc(0.637em + 12px); padding-right: 0; }
  .arrow-link .ar {
    /* едем по left, а не по right: проценты у right считались от коробки
       содержимого и стрелка не доезжала до начала строки */
    position: absolute; left: calc(100% - 0.637em); right: auto; top: 50%; translate: 0 -50%;
    transition: left 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .arrow-link:hover .ar { left: 0; }
  /* старое правило уводило саму фигуру стрелки за край её коробки; теперь
     едет коробка, а фигура должна оставаться на месте, иначе слева пусто */
  .arrow-link:hover .ar i { translate: 0 0; }
  .arrow-link .ar::before { content: none; }
  .arrow-link sup { font-size: 0.5em; letter-spacing: 0; }
  /* стрелка уезжает вправо, клон влетает слева */
  /* line-height по высоте самой стрелки: при единице коробка была 27 px
     вместо 15 и тянула строку вниз. */
  .ar { position: relative; display: inline-block; overflow: hidden; line-height: 0.5625; }
  /* Стрелка по обмеру оригинала: тонкий шеврон отдельно от планки,
     viewBox 22×19. Размер уточнён 18.08 прямым замером их ссылки: 17×15 px
     при кегле 26.67 — это 0.637 и 0.5625 кегля. Было 0.75/0.648, стрелка
     выходила заметно крупнее их. */
  .ar i, .ar::before {
    display: inline-block; width: 0.637em; height: 0.5625em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3E%3Cpath d='M10.392%2016.88l7.232-7.264-7.264-7.232%201.696-1.76%208.992%208.992-8.96%208.992zM.568%208.304h18.4v2.656H.568z'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 19'%3E%3Cpath d='M10.392%2016.88l7.232-7.264-7.264-7.232%201.696-1.76%208.992%208.992-8.96%208.992zM.568%208.304h18.4v2.656H.568z'/%3E%3C/svg%3E") no-repeat center / contain;
    vertical-align: -0.02em;
  }
  .ar i { transition: translate 0.5s cubic-bezier(.19,1,.22,1); }
  .ar::before {
    content: ""; position: absolute; left: 0; top: 0;
    translate: -130% 0; transition: translate 0.5s cubic-bezier(.19,1,.22,1) 0.05s;
  }
  a:hover > .ar i, a:hover .ar i { translate: 130% 0; }
  a:hover > .ar::before, a:hover .ar::before { translate: 0 0; }

  /* ── Подпись у курсора на первом экране ───────────────────────────────
     Пока указатель на фиолетовой плёнке, рядом с ним идёт строка; ушёл с
     плёнки — строка гаснет, курсор обычный. Замер оригинала 18.08: блок
     position: fixed, z-index 400, pointer-events: none, едет за мышью через
     transform: translate(x, y); подпись внутри — absolute, left 20px, top 0,
     кегль 10 px при ширине 1440, вес 440, прописные, трекинг −0.1 px, цвет #f8f8f8, текст
     «Scroll to explore». Свой курсор они НЕ прячут: системная стрелка
     остаётся, строка идёт рядом с ней. Плавность гашения моя: у них переход
     нулевой и строка щёлкает.
     Кегль переведён с жёстких пикселей на долю ширины экрана (18.08): вся
     остальная страница набрана в vw, поэтому на мониторе 2560 строка в 10 px
     выглядела вдвое мельче всего вокруг, хотя при 1440 совпадала с оригиналом.
     Теперь 0.86vw с полом 13 px: при 1440 это 13 px, при 2560 около 22 px.
     Отступ от указателя переведён туда же, иначе строка липла к стрелке. */
  .cursor { position: fixed; left: 0; top: 0; z-index: 400; pointer-events: none; will-change: transform; }
  .cursor-label {
    position: absolute; left: max(20px, 1.39vw); top: 0;
    font-family: var(--giant); font-size: max(13px, 0.86vw); font-weight: 440; line-height: 1.2;
    letter-spacing: -0.1px; text-transform: uppercase; white-space: nowrap;
    color: #e8e9ee; opacity: 0; transition: opacity 0.2s ease;
  }
  .cursor-label.is-on { opacity: 1; }
  /* Цвет подписи оставлен как на главной, светлый (решение юзера). Он
     сливается ровно там, где проходит по белым буквам заголовка, и это
     принято сознательно: тёмная подпись выбивалась из кадра. */
  /* на тач-экранах указателя нет вовсе */
  @media (hover: none), (pointer: coarse) { .cursor { display: none; } }

  @supports (animation-timeline: scroll()) {
    html { scrollbar-width: none; }
    ::-webkit-scrollbar { display: none; width: 0; }
    /* Толщина по замеру оригинала: их бегунок 6.7 px при 1440, то есть
       0.463vw — ровно ширина бокового желобка. У нас стояло жёсткие 5 px,
       и на широком экране полоса выглядела заметно тоньше ихней. */
    .sb { position: fixed; top: 0; right: 0; bottom: 0; width: max(5px, 0.463vw); z-index: 45; pointer-events: none; }
    .sb i {
      position: absolute; left: 0; right: 0; top: 0; height: 12svh;
      /* чёрная, как у них: ирисовым помечен только активный пункт меню */
      background: var(--ink);
      animation: sb-run linear both;
      animation-timeline: scroll();
    }
    @keyframes sb-run { from { top: 0; } to { top: 88svh; } }
  }
  @supports not (animation-timeline: scroll()) {
    .sb { display: none; }
  }

  /* ── Цветная полоса «открывается» на последних экранах ──────────────────
     Замер оригинала 19.08 (1440x900): их красная панель прибита sticky, а
     внутренняя коробка едет translateY со 135 px до нуля на последних 500 px
     прокрутки (135 = 15svh, 500 = 56svh). То есть панель приходит снизу,
     видимая полоса сначала короче и дорастает до полной высоты. У нас она
     стояла на месте с самого начала, и последний экран выглядел статичным.
     Своё движение делаем тем же приёмом: полоса прибита к низу, поэтому
     сдвиг вниз просто прячет её нижнюю часть за краем экрана, и она
     «выезжает» вверх. Кривая та же, что у остальных приходов на странице. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .foot-zone {
        animation: foot-rise cubic-bezier(0.4, 0, 0.2, 1) both;
        animation-timeline: scroll(root block);
        animation-range: calc(100% - 44svh) 100%;
      }
      @keyframes foot-rise { from { translate: 0 13svh; } to { translate: 0 0; } }
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
      /* На последних экранах знак идёт быстрее страницы, а содержимое
         цветной зоны отстаёт. Из-за разницы белое поле со знаком как бы
         выезжает над подписью. У оригинала так же: в последние 150 px
         прокрутки знак проходит 276 px, а колонки всего 11. */
      /* Своего прихода у знака нет: он едет вместе с листом — см. index.html */
      /* Завала хвоста здесь больше нет — как на index.html: у оригинала низ
         полосы ровный, а наклонённая кромка накрывала «/ REACH OUT». */

      /* Собственного входа у колонок нет: зона стоит, её открывает лист. */
    }
  }


  footer { position: relative; background: var(--sheet); }
  /* Пропорции знака и анатомия уходящего листа — см. комментарии в index.html */
  .tail {
    position: relative; z-index: 2;
    background: var(--sheet);
    transform-origin: 0% 100%;
    /* Нижнее поле и высота листа — как на index.html: последний кадр целиком
       занят листом со знаком, знак прижат к цветной полосе. Нижнее поле
       0.17vw: от букв знака до цветного у них 9 px при 1775, шесть из них
       дают сами буквы. */
    padding-bottom: 0.17vw;
    /* Блок «строка + знак» имеет постоянную высоту в долях ширины и прижат
       к полосе снизу, всё что выше — белое поле. Разбор в index.html. */
    min-height: calc(100svh - 27.1vw);
    display: flex; flex-direction: column; justify-content: flex-end;
    /* Без will-change намеренно — см. index.html */
  }
  /* Верхнее поле. Коробка строки у них начинается в 44 px от верха кадра при
     1775 (2.48vw), но БУКВЫ внутри коробки у DenimWeb сидят на 13 px ниже её
     верха, а у Archivo всего на 2: при одинаковом межстрочном 0.8 у шрифтов
     разные метрики. Замер по пикселям — их «Let's Talk» начинается на 57,
     наш начинался на 46. Добавка 0.62vw (0.051 кегля) равняет БУКВЫ, а не
     коробки, и держится на любой ширине. Нижнего поля нет: разрыв до знака
     набирается сам, знак прижат к низу листа. */
  /* Нижнее поле = разрыв до знака. Считается из их 53.2vw: минус строка
     (9.72vw), минус знак (16.06vw = кегль 20.59 при межстрочном 0.78), минус
     щель под знаком (0.17vw). Плюс поправка на метрики: у DenimWeb буквы
     сидят на 13.4 px ниже верха своей коробки, у Archivo на 1.6, поэтому наша
     коробка должна стоять на 0.66vw ниже ихней — равняем буквы, а не коробки.
     Итог: от верха НАШЕЙ коробки до полосы 52.5vw. Верхнего поля нет: блок
     прижат к полосе снизу, сверху остаётся белое. */
  .talk { padding: 0 max(8px, 0.9vw) 25.45vw; }
  /* Буква приезжает в свою ячейку, по дороге мелькает случайный знак.
     Ячейка режется по горизонтали через clip-path, а НЕ overflow: hidden:
     при line-height 0.84 у .giant верхушки букв вылезают за строку, и
     overflow срезал бы их. Мигание заголовка убрано, оно спорило с проездом. */
  /* Настоящая строка остаётся в разметке для экранных читалок и копирования:
     в ячейках лежат ещё и подменные знаки, читать их вслух незачем */

  /* Заголовок под «стеклом»: настоящий текст остаётся в разметке (его читают
     поиск и озвучка, его можно выделить), но красится в прозрачный, а рисует
     его холст поверх. Холст шире заголовка на запас: картинку в шейдере
     смещает, без запаса края съедало бы. */
  .talk a { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .talk .giant { border-bottom: 1px solid var(--ink); padding-bottom: 0.015em; transition: color 0.2s, border-color 0.2s; }
  /* Стрелка у «Let's Talk»: у них 154×129 при кегле 175 и 190×159 при 215.7,
     то есть ровно 0.88 кегля на любом экране. Кегль у стрелки свой, и в нём
     оставался потолок 200 px: с 1646 стрелка переставала расти вместе с
     надписью и на широком экране была на 8% мельче ихней. */
  .talk .ar {
    font-family: var(--giant); font-weight: 700; line-height: 1;
    font-size: max(56px, 12.15vw);
    transition: translate 0.3s cubic-bezier(0.16,1,0.3,1);
  }
  /* Наведение: подчёркивание уходит, цвет НЕ меняется, а стрелка едет
     справа в начало строки. Перебор букв при этом отыгрывается заново. */
  .talk a { position: relative; }
  .talk a:hover .giant { border-color: transparent; }
  .talk .ar {
    position: absolute; right: 0; top: 50%; translate: 0 -50%;
    transition: right 0.7s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .talk a:hover .ar { right: calc(100% - 0.88em); }
  .talk a:hover .ar i { translate: 0 0; }
  /* заголовок отходит вправо ровно на ширину стрелки с зазором */
  .talk .giant { transition: color 0.2s, border-color 0.2s, translate 0.7s cubic-bezier(0.19, 1, 0.22, 1); }
  .talk a:hover .giant { translate: calc(0.88em + 26px) 0; }
  /* у этой стрелки свой ход, клон-подмена из общего правила тут не нужна */
  .talk .ar::before { content: none; }
  .talk .ar i, .talk .ar::before { width: 0.88em; height: 0.736em; }
  /* строку задаёт надпись, а не стрелка: у них ряд 140 px при стрелке 129 */
  .talk .ar { line-height: 0.736; }
  .talk .giant { line-height: 0.8; }

  .foot-mark {
    position: relative; z-index: 2; color: var(--ink);
    /* Тот же кегль, что у знака на index.html */
    width: 100%; margin-left: 0; font-size: 20.59vw;
  }
  .foot-mark .t42-lock { font-size: inherit; }
  /* Сам .page кликов НЕ ловит, ловят его дети — см. index.html: иначе его
     коробка накрывала цветную зону и съедала нажатия по ссылкам футера. */
  .page { position: relative; z-index: 1; pointer-events: none; }
  .page > * { pointer-events: auto; }
  /* Содержательные блоки идут по светлому листу, серым остаётся только фон */
  main { background: var(--sheet); }
  /* Зона стоит на месте, страница идёт над ней — см. index.html */
  .foot-zone {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 0;
    background: var(--accent, #c20aff); color: #ffffff;
    overflow: hidden;
    /* Высота полосы снята с оригинала — см. index.html: их блок надписей
       376 px стоит вплотную к низу экрана, верхнего поля у него нет. */
    /* Верхнее поле 0.96vw — замер по пикселям, см. index.html */
    padding: max(6px, 0.96vw) max(6px, 0.463vw) 0;
  }
  /* Раскладка колонок — см. index.html: слева почта, потом пустое поле под
     печать, с 803 до правого края правый куст, навигация в самом углу. */
  .foot-cols { display: grid; grid-template-columns: 55.79% 1fr; gap: 0; align-items: start;
    min-height: max(190px, 21.354vw);
    font-size: 16px; line-height: 1; }
  /* Правый куст не доходит до края: у них правый край навигации стоит в
     3.07vw от края экрана (44 px при 1440, 54.5 при 1775), а копирайт под
     ней прижат к желобку. У нас навигация упиралась в тот же желобок, и
     угол выглядел набитым. Поле = 3.07vw минус желобок. */
  /* Колонка осталась одна (блок «/ STATUS» снят по решению юзера 19.08:
     о планах в подвале не пишем). space-between с одним ребёнком кладёт его
     влево, поэтому прижимаем явно. */
  .foot-inner { display: flex; justify-content: flex-end; align-items: start;
    gap: max(24px, 6.4vw);
    padding-right: 2.607vw; }
  .foot-cols .kicker { color: rgba(255,255,255,0.85); }
  /* Складные строки подвала живут только на узком экране: на широком кнопка
     спрятана, содержимое раскрыто всегда, и колонка выглядит ровно как раньше —
     мелкий кикер «/ STATUS» и список под ним. */
  .fc-head { display: none; }
  .foot-cols a { display: block; cursor: pointer; }
  .foot-cols a:hover { text-decoration-line: underline; }
  /* Отступ под кикером и шаг списка по замеру оригинала — см. index.html */
  /* Кегли футера в vw без потолка — замеры в index.html */
  /* Ссылка по ширине надписи, а не всей колонки — см. index.html */
  .foot-cols .foot-reach { display: inline-block; font-family: var(--giant); font-size: max(19px, 1.852vw); font-weight: 470; line-height: 1.1; margin-top: max(20px, 1.39vw); }
  .foot-nav { margin-top: max(20px, 1.39vw); font-size: max(14px, 1.157vw); line-height: 1.2; display: grid; gap: 0; }
  /* Нижняя строка футера, как у оригинала: слева большая ссылка, справа
     копирайт, обе на одной линии у самого низа ирисовой зоны. */
  .foot-bottom {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; flex-wrap: wrap;
    /* Своего отступа нет — поле держит нижняя граница блока колонок.
       Высота второй строки 4.79vw, содержимое прижато к её низу. */
    margin-top: 0;
    min-height: max(56px, 4.79vw);
    /* Линия подписки и копирайт стоят у них в 6.7 px от низа полосы при 1440
       (0.463vw, тот же желобок). У нас было 15.8 плюс свои 6 у копирайта —
       строка висела на 16 px выше ихней. */
    padding-bottom: max(6px, 0.463vw);
  }
  /* Блок подписки у них не по ширине надписи, а фиксированный: 507.5 px при
     1440 и 625.6 при 1775 — 35.28vw. Линия идёт на всю эту ширину, надпись
     слева, стрелка прижата к правому концу линии. У нас линия шла ровно по
     тексту, а стрелка стояла сразу за ним. */
  .foot-news { margin-top: 0; width: max(320px, 35.28vw); }
  /* Печать по ирисовому. Рисунок разложен в растровую точку под 45°, как
     печатают в газете: к краям точка мельчает и пропадает совсем, поэтому
     нет ни прямоугольника, ни мягкой рамки, край получается живой.
     Кадр берётся целиком, вместе с землёй: на растре она не даёт полосы. */
  .foot-art {
    /* Печать работает фоном, а не иллюстрацией в ряд: у оригинала их кадр
       крупный, стоит ниже середины полосы и уходит за нижний край (418..793
       по горизонтали, но 686..1143 по вертикали при полосе 525..901).
       Отсюда наши 33vw вместо 26, верх 7vw вместо 2.6 и центр 46% вместо 42:
       печать ниже, правее и крупнее, правым краем заходит под «/ STATUS»
       мягким краем растра. */
    position: absolute; left: 46%; transform: translateX(-50%); top: 7vw;
    width: max(240px, 33vw); height: auto;
    pointer-events: none;
  }
  /* Строка подписки на письмо студии. Замер оригинала 19.08 на 1440: блок
     35.243vw (совпал с нашими 35.28vw, стоявшими тут под прежнюю строку),
     поле набрано кеглем 3.704vw весом 470, цвет бумаги, а стрелка справа —
     тот же знак, что у нас в .ar: у них viewBox 0 0 22 19 и та же кривая.
     Кнопка 3.47 x 3.07vw, прижата к правому концу линии. */
  .foot-news .news {
    border-bottom: 1px solid rgba(255,255,255,0.9); padding-bottom: 0.04em;
    display: flex; width: 100%; align-items: baseline; justify-content: space-between;
    gap: max(10px, 0.9vw);
  }
  .foot-news .news__el {
    flex: 1 1 auto; min-width: 0;
    background: none; border: 0; padding: 0; color: inherit; border-radius: 0;
    font-family: var(--giant); font-weight: 470; line-height: 0.8;
    font-size: max(30px, 3.704vw); letter-spacing: -0.01em;
  }
  /* Подпись поля того же цвета, что и набранный адрес: у них они не
     различаются, поэтому браузерную приглушённость снимаем. */
  .foot-news .news__el::placeholder { color: inherit; opacity: 1; }
  .foot-news .news__el:focus { outline: none; }
  .foot-news .news__btn {
    flex: none; background: none; border: 0; padding: 0; color: inherit; cursor: pointer;
    font-size: max(30px, 3.704vw); line-height: 0.8;
  }
  .foot-news .ar i, .foot-news .ar::before { width: 0.94em; height: 0.786em; }
  /* Отлёт стрелки прописан для ссылок (a:hover), а здесь кнопка — повторяем */
  .foot-news .news__btn:hover .ar i { translate: 130% 0; }
  .foot-news .news__btn:hover .ar::before { translate: 0 0; }
  .foot-news .news__btn:hover { color: rgba(255,255,255,0.85); }
  .foot-base {
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    /* Нижняя строка по замеру оригинала — см. index.html */
    font-family: var(--giant); font-size: max(13px, 1.273vw); font-weight: 440;
    line-height: 0.85; letter-spacing: -0.01em; text-transform: uppercase;
    /* Поле справа — ещё один желобок: у них строка кончается на 1427 при 1440
       и на 1758.6 при 1775, то есть в двух желобках от края экрана, а не в
       одном. Без него «UP» упиралось прямо в кромку. */
    padding: 0 max(6px, 0.463vw) 0 0;
  }
  .foot-base a:hover { text-decoration-line: underline; }

  /* ── Мобильное меню: кнопка и лист во весь экран ──────────────────────────
     Строка навигации на узком экране не живёт: до этого её жали до 13 px и
     выбрасывали CAREERS. Вместо строки — кнопка в третьей колонке шапки,
     пункты уезжают в лист во весь экран.

     Размеры и движение сняты с живого оригинала 19.08 (замер на ширинах
     909 / 768 / 390, у них всё в фиксированных пикселях, ничего не тянется):
     кнопка 52x14 из двух полос по 4 px с щелью 6 px, правое поле 8 px. Она же
     и закрывает лист: и знак, и кнопка лежат ВЫШЕ листа, поэтому второй
     крестик в углу не нужен.

     Лист не гаснет прозрачностью, а прилетает из правого верхнего угла ДВУМЯ
     пластинами: снизу светлая, поверх неё цветная, и вторая с задержкой в
     0.1 с — за счёт этой задержки видно, как одна страница ложится на другую.
     Углы и сдвиги ихние: светлая с 20% вправо, 110% вверх и наклоном 8°,
     цветная со своими 30% / 80% / 14°. Разгон и торможение РАЗНЫЕ:
     на уход cubic-bezier(.9,0,.1,1) — сперва нехотя, потом швырком; на
     приход cubic-bezier(.14,1,.34,1) — влетает и мягко встаёт. */
  .burger {
    display: none;
    -webkit-appearance: none; appearance: none;
    background: none; border: 0; margin: 0; padding: 8px 0 8px 14px;
    color: inherit; cursor: pointer; line-height: 0;
  }
  /* Кнопка крупнее ихней и тянется за шириной. Их 52x14 держатся на любом
     узком экране, но у нас порог узкого вида не 1023, а 1180, и на ширине
     около 1150 такая кнопка читается мелко — заказчик просил размер как в его
     сравнении, там их страница крупнее в полтора раза.
     Пропорции ихние и держатся сами: ширина задаётся один раз в --bw, полоса
     это --bw/13 (4 при 52), щель --bw/8.667 (6 при 52). Меняется одна строка,
     а не три. */
  .burger-box {
    display: block;
    --bw: clamp(56px, 6.3vw, 74px);
    width: var(--bw);
  }
  .burger-box i {
    display: block; height: calc(var(--bw) / 13); background: currentColor;
    transition: translate 0.3s ease, rotate 0.3s ease;
  }
  .burger-box i + i { margin-top: calc(var(--bw) / 8.667); }
  /* Крестик у них не квадратный, а широкий и плоский: 50x22 при полосе 52.
     Такому прямоугольнику отвечает наклон 24° (арктангенс 22/50), а не 45°,
     поэтому полосы не разворачиваются вертикально, а только приподнимаются.
     Съезд полос к середине — половина шага между ними, то есть 0.0962 ширины
     (5 px при 52), поэтому при смене --bw крестик сходится сам. */
  html.menu-open .burger-box i:first-child { translate: 0 calc(var(--bw) * 0.0962); rotate: 24deg; }
  html.menu-open .burger-box i:last-child { translate: 0 calc(var(--bw) * -0.0962); rotate: -24deg; }
  /* Пока лист открыт, под шапкой цветная пластина — знак и кнопка светлые */
  html.menu-open header { color: var(--sheet); }
  html.menu-open, html.menu-open body { overflow: hidden; }
  /* своя полоса скролла живёт выше листа — на время меню её убираем */
  html.menu-open .sb { display: none; }

  /* Светлая пластина. Полосы прокрутки от неё не будет: она fixed, а
     fixed-элементы в область прокрутки страницы не попадают, сколько бы они
     ни торчали за край. На этом же держится и оригинал. */
  .menu-sheet {
    position: fixed; inset: 0; z-index: 15;
    display: none;
    background: var(--paper); color: var(--sheet);
    translate: 20% -110%; rotate: 8deg;
    visibility: hidden;
    transition: translate 0.8s cubic-bezier(.9,0,.1,1),
                rotate 0.8s cubic-bezier(.9,0,.1,1),
                visibility 0s linear 0.8s;
  }
  html.menu-open .menu-sheet {
    translate: 0 0; rotate: 0deg; visibility: visible;
    transition: translate 0.8s cubic-bezier(.14,1,.34,1),
                rotate 0.8s cubic-bezier(.14,1,.34,1);
  }
  /* Цветная пластина: своя геометрия поверх светлой, поэтому в углу на подлёте
     видно обе. Цвет кладёт ::before, чтобы содержимое осталось над ним. */
  .menu-in {
    position: relative; display: flex; flex-direction: column; height: 100%;
    padding: 70px 8px 13px;
    translate: 30% -80%; rotate: 14deg;
    transition: translate 0.8s cubic-bezier(.9,0,.1,1),
                rotate 0.8s cubic-bezier(.9,0,.1,1);
  }
  .menu-in::before { content: ""; position: absolute; inset: 0; background: var(--accent, #c20aff); }
  /* Печать в нижней половине листа — та же, что в подвале. У них на этом месте
     свой рисунок, положенный режимом multiply на половинной плотности: он не
     закрывает цвет, а темнит его. Лежит ПОД строками (z-index у них 1 только у
     списка и контактов), поэтому подписи по нему читаются. */
  /* Печать шире листа и уходит за левую кромку: у них рисунок занимает нижнюю
     половину экрана (доля 390/456 на ширину окна), а наш вытянут поперёк, и в
     ширину экрана он лёг бы узкой полосой. */
  .menu-fig {
    position: absolute; left: -14%; width: 128%; bottom: 13px; z-index: 0;
    mix-blend-mode: multiply; opacity: 0.5; pointer-events: none;
  }
  .menu-fig img { width: 100%; height: auto; }
  html.menu-open .menu-in {
    translate: 0 0; rotate: 0deg;
    transition-delay: 0.1s; transition-timing-function: cubic-bezier(.14,1,.34,1);
  }
  /* пункты сверху под шапкой, рабочие строки прижаты к низу */
  .menu-nav { position: relative; z-index: 1; display: flex; flex-direction: column; row-gap: 2px; }
  .menu-nav a {
    display: flex; align-items: center; gap: 0.17em;
    font-family: var(--giant); font-size: clamp(28px, 8.4vw, 46px); font-weight: 470;
    text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.8;
  }
  /* Кружок белый, не ирисовый: на цветной пластине акцент не читается вовсе.
     Места он не занимает, пока раздел не открыт: строка стоит на его месте и
     отъезжает вправо только у активного пункта, как в оригинале. */
  .menu-nav .dot {
    /* Кегль возвращается: базовое правило .dot гасит его в ноль, чтобы не
       вылез запасной знак «●», а здесь размер задан в долях кегля строки —
       без своего кегля доли считались бы от нуля. Знака в разметке у пунктов
       меню нет вовсе, гасить нечего. */
    font-size: inherit; color: inherit; width: 0.7em; height: 0.7em; top: 0;
    scale: 0; transition: scale 0.4s cubic-bezier(.19,1,.22,1);
  }
  .menu-nav .ml { translate: -0.87em 0; transition: translate 0.4s cubic-bezier(.19,1,.22,1); }
  .menu-nav .active .dot { scale: 1; }
  .menu-nav .active .ml { translate: 0 0; }
  /* Рабочие строки из шапки на узком экране спрятаны — место им здесь */
  .menu-foot {
    position: relative; z-index: 1; margin-top: auto;
    display: flex; flex-direction: column; gap: 14px;
  }
  .menu-status {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--giant); font-size: 12px; font-weight: 440;
    letter-spacing: 0.04em; text-transform: uppercase;
  }
  .menu-status .dot { color: inherit; }
  /* Почта отдельной крупной строкой со стрелкой у правого края — так же, как
     у них внизу открытого меню. */
  .menu-mail {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding-top: 12px; border-top: 1px solid rgba(248, 248, 248, 0.35);
    font-family: var(--giant); font-size: clamp(18px, 5.2vw, 28px); font-weight: 440;
    letter-spacing: -0.02em; line-height: 1; text-transform: lowercase;
  }
  .menu-mail .menu-ar { font-style: normal; font-weight: 440; }
  @media (prefers-reduced-motion: reduce) {
    .menu-sheet, .menu-in, .menu-nav .dot, .menu-nav .ml, .burger-box i {
      transition-duration: 0.01ms; transition-delay: 0s;
    }
  }


  @media (max-width: 1279px) {
    .cols { grid-template-columns: 1fr; }
    .foot-cols { grid-template-columns: 1fr; gap: 28px; min-height: 0; }
    .foot-inner { display: grid; gap: 28px; padding-right: 0; }
    /* На узком экране колонки идут в один столбец, места по высоте много —
       знак идёт во всю ширину, иллюстрация уходит правее вниз, чтобы не
       ложиться на почту и меню. Ширину знака задаёт кегль в vw, а не бокс,
       поэтому от 104% с отъездом влево слово просто уезжало за левый край и
       у «T» срезало ножку: бокс ровно по экрану, как на широком. */
    /* margin-bottom не перебиваем: от -6vw знак нижней третью залезал на
       ирисовую зону, тогда как на широком экране он весь на бумаге и
       кромка проходит под ним. Общий отступ 3.8vw держит тот же стык. */
    /* margin-top не обнуляем: это разгон до знака, он и уводит ссылку за кадр */
    .foot-mark { width: 100%; margin-left: 0; }
    /* Верхнее поле 22.5vw держало содержимое ниже наклонённой кромки листа;
       завала нет — поле такое же, как на широком экране. Зато на узком нужен
       свой отступ до нижней строки: блок колонок здесь без нижней границы. */
    .foot-bottom { margin-top: 36px; }
    /* на узком экране печать уходит вправо вниз, мимо почты и меню */
    .foot-art { left: auto; right: -8%; top: auto; bottom: 26vw; transform: none; width: clamp(200px, 62vw, 380px); }
    /* ── Подвал на узком экране ────────────────────────────────────────────
       Числа сняты с их подвала прямым замером на 913 px (19.08):

         желобок по краям        8
         «/ REACH OUT»           12 / 14, поле снизу 16
         почта                   24 / 26.4 (1.1), вес 440
         блок почты, поле снизу  30
         заголовок строки        24 / 22.8 (0.95), вес 440, поле снизу 10
         черта                   1 px, от неё до содержимого 16
         стрелка строки          18 x 21
         пункты списка           16 / 19.2 (1.2), вес 440
         после раскрытой строки  30
         после всех строк        48
         подписка                32 / 25.6 (0.8), вес 470, стрелка 25 x 22
         нижняя строка           14 / 11.9 (0.85), вес 470, сверху 33.6, снизу 8

       Взяты они НЕ впрямую, а через общий множитель --k, ровно как знак и
       кнопка в шапке. Причина та же: заказчик сравнивает два окна, где их
       страница крупнее нашей примерно в полтора раза целиком, и просит наш
       подвал под то, что он видит. Плюс порог узкого вида у нас 1180, а не
       1023, и ихние фиксированные числа на планшете смотрятся мелко.

       --k это единица размера: 1 px на телефоне и 1.45 px на 1180. Любое ихнее
       число B пишется как calc(B * var(--k)) — на телефоне выходит ровно ихнее,
       на планшете в полтора раза крупнее. Меняется ОДНА строка: коэффициент
       0.1229vw (это 1.45 / 1180) и потолок 1.45px. */
    /* Множитель поднят на десятую после сверки с их подвалом бок о бок
       (19.08): 1.1 на телефоне, 1.6 на 1279. Единственная строка, которой
       крутится общий кегль подвала. */
    .foot-zone { --k: clamp(1.1px, 0.1352vw, 1.6px); padding: 0 8px; }
    .foot-cols { gap: 0; }
    /* Блок почты стоит раскрытым и без черты, как у них */
    .foot-cols > .fc-reach { padding-bottom: calc(30 * var(--k)); }
    .fc-reach .kicker {
      display: block; color: inherit;
      font-size: calc(12 * var(--k)); line-height: 1.167;
      padding-bottom: calc(16 * var(--k));
    }
    .foot-cols .foot-reach {
      font-size: calc(24 * var(--k)); font-weight: 440; line-height: 1.1; margin-top: 0;
    }
    /* Складные строки: кикер уступает место крупному заголовку */
    .fc-col > .kicker { display: none; }
    .fc-head {
      display: flex; width: 100%; align-items: flex-start; justify-content: space-between;
      gap: calc(16 * var(--k)); padding: 0 0 calc(10 * var(--k)); margin: 0 0 calc(16 * var(--k));
      -webkit-appearance: none; appearance: none; background: none; border: 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.9);
      color: inherit; cursor: pointer; text-align: left;
    }
    .fc-title {
      font-family: var(--giant); font-size: calc(24 * var(--k)); font-weight: 440;
      letter-spacing: -0.01em; line-height: 0.95;
    }
    .fc-ar { flex: none; line-height: 0; }
    .fc-ar svg {
      width: calc(18 * var(--k)); height: calc(21 * var(--k));
      transition: rotate 0.35s cubic-bezier(.19,1,.22,1);
    }
    .fc-head[aria-expanded="true"] .fc-ar svg { rotate: 180deg; }
    /* Раскрытие идёт высотой строки сетки, а не пикселями: 0fr → 1fr считает
       браузер сам, поэтому мерить содержимое скриптом не нужно. */
    .fc-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s cubic-bezier(.19,1,.22,1); }
    .fc-body-in { overflow: hidden; }
    .fc-head[aria-expanded="true"] + .fc-body { grid-template-rows: 1fr; }
    .fc-head[aria-expanded="true"] + .fc-body .fc-body-in { padding-bottom: calc(30 * var(--k)); }
    .foot-nav { margin-top: 0; font-size: calc(16 * var(--k)); font-weight: 440; line-height: 1.2; }
    /* Раскладка сбрасывается в обычный поток: на широком экране у .foot-inner
       стоит justify-content, и в сетке оно мешает — дорожка перестаёт
       растягиваться и черта под заголовком обрезается по ширине самой длинной
       строки вместо всей полосы. */
    .foot-inner { display: block; gap: 0; padding: 0 0 calc(48 * var(--k)); }
    /* Подписка во всю ширину полосы, а не в фиксированные 320 px */
    .foot-news { width: 100%; margin-top: 0; }
    .foot-news .news__el { font-size: calc(32 * var(--k)); line-height: 0.8; }
    .foot-news .news__btn { font-size: calc(32 * var(--k)); }
    .foot-news .ar i, .foot-news .ar::before { width: calc(25 * var(--k)); height: calc(22 * var(--k)); }
    .foot-bottom { display: block; margin-top: 0; min-height: 0; padding-bottom: 0; }
    /* Нижняя строка: копирайт слева, «UP» справа. Имя студии на узком экране
       у них тоже уходит — остаётся только год. */
    .foot-base {
      justify-content: space-between;
      padding: calc(33.6 * var(--k)) 0 calc(8 * var(--k));
      font-size: calc(14 * var(--k)); font-weight: 470; line-height: 0.85;
    }
    .fb-long, .fb-sep { display: none; }
    .fb-up { margin-left: auto; }
    /* Печать ложится в правый нижний угол и уходит за кромку, как у них
       (у них рисунок 138.5vw от 20.5vw слева, режимом multiply на четверти
       плотности). Наш растр реже, поэтому плотность выше. */
    .foot-art {
      left: 64%; transform: translateX(-50%); top: auto; bottom: -3vw;
      /* Потолок в 520 px: порог узкого вида у нас 1180, и на планшете доля от
         ширины разносила печать на пол-экрана — растр расплывался в шум. */
      width: min(92vw, 520px); opacity: 0.45; mix-blend-mode: multiply;
    }
    }


  /* ── Порог узкого вида: 1279, а не 1023 ───────────────────────────────────────
     У оригинала строка меню держится до 1023, но их набор заметно уже нашего:
     восемь пунктов DenimWeb занимают там меньше места, чем наши шесть в
     Archivo. С 1024 до 1180 наша строка уже сидела на нижнем пороге кегля
     (15 px) и всё равно не влезала — её пришлось жать до 13 px с урезанными
     просветами, то есть строка там жила из последних сил.
     Поэтому весь узкий вид включается раньше ихнего пункт в пункт: причина не
     в копировании числа, а в ширине гарнитуры. Порог общий для всего — шапки,
     подвала, наклонов листов и колонок.
     Правила шапки стоят ЗДЕСЬ, последним блоком в стилях, а не вместе с
     остальным узким видом: выше по файлу их перебивают объявления
     `.burger { display: none }` и `.fc-head { display: none }`.
     Порог продублирован в скрипте кнопки внизу страницы: matchMedia
     (min-width: 1181px). Меняется во всех местах сразу. */
  @media (max-width: 1279px) {
    .head-slots { display: none; }
    /* в шапке остаются два элемента — знак слева, кнопка справа */
    header { grid-template-columns: auto auto; justify-content: space-between; }
    nav.main { display: none; }
    .burger { display: block; }
    /* Знак в шапке перестаёт быть долей экрана и встаёт крупно, как у них ниже
       их порога (там он фиксированный, 126x22 px на любой ширине вплоть до 390).
       Кегль 27.5 дал бы ровно ихнюю высоту коробки в 22 px, но заказчик трижды
       сказал, что знак мельче ихнего: в его сравнении их страница крупнее нашей
       примерно в полтора раза целиком. Отсюда вилка вместо одного числа —
       на телефоне 30 px (знак занимает те же две пятых ширины, что у них), на
       планшете и узком рабочем столе доходит до 40. Фиксированные 40 на 390 px
       заняли бы половину экрана, поэтому именно вилка. */
    .brand .brand-lock { font-size: clamp(30px, 3.4vw, 40px); }
    /* Поля шапки фиксированные 8 px, как у них */
    header { padding: 8px; }
    /* Полосы кнопки встают вровень с верхом знака, но нажимается она по-прежнему
       крупным полем: запас уходит в отрицательные поля и раскладку не двигает. */
    .burger { padding: 10px 0 10px 16px; margin-block: -10px; }
    .menu-sheet { display: block; }
  }