/* Токены и базовая типографика. Цвета и шрифт менять только здесь.
   Система снята с разбора T1 Energy — подробности в 3_ДИЗАЙН/ДИЗАЙН-СИСТЕМА.md */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* Резиновая страница. Собственник 05.09: «не хочу, чтобы по центру — информация
   привязана к левому краю и растёт вместе с разрешением». Корневой кегль
   считается от ширины экрана: ровно 16 px на 1440 и пропорционально больше на
   широких мониторах (21,3 на 1920, 28,4 на 2560). Все размеры ниже заданы в rem,
   поэтому колонка, поля, кегли, отступы и шапка растут одним числом, а композиция
   ноутбука повторяется на любом мониторе один в один: колонка всегда 91,7 % ширины,
   текст начинается на 8,3 % от левого края. Ниже 1440 корневой кегль равен 16 px —
   там страница пиксель в пиксель прежняя. Линии 1–2 px оставлены в px, чтобы не
   мылились. Медиазапросы — в px, они про ширину окна, а не про кегль. */
html{ font-size:max(16px, 1.1111vw); }

:root{
  /* поверхности */
  /* Холст — чистый белый с 03.09. До этого был тёплый веллум #F0EFE9: он давал
     тон печатного листа, но приглушал фотографии. На белом каждый кадр
     отделяется от листа и читается отдельным объектом, тёмные блоки бьют
     контрастнее. Промежуточный тёплый белый пробовали — от чистого на экране
     неотличим, смысла в нём нет. */
  --vellum:#FFFFFF;      /* холст страницы */
  --paper:#FFFFFF;       /* карточки, светлые подложки */
  --carbon:#322D2A;      /* текст, тёмные заливки — никогда не чистый чёрный */
  --onyx:#0F0E12;        /* подвал, самый глубокий слой */
  --mercury:#6E6862;     /* подписи. Светлее было #8B8B8B — контраст 2,9,
                            на веллуме читалось с усилием. Сейчас 4,6 */
  /* линейки притемнены с .16 и .09: на веллуме они читались, на белом
     растворялись. */
  --hair:rgba(50,45,42,.18);

  /* фирменный цвет знака. Брендбук «Альфа-Трейд»: рябиновый Pantone 2018 XGC.
     На странице живёт только в логотипе и иконке вкладки — больше нигде. */
  --ryabina:#FF824D;
  --hair-soft:rgba(50,45,42,.11);

  /* шрифт */
  --ms:'Montserrat',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;

  /* шаг вертикального ритма: всё кратно 8, никаких 41 и 45 */
  --s1:0.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:2.5rem; --s6:3.5rem; --s7:5rem;

  /* вертикальный ритм: четыре ступени вместо восемнадцати случайных clamp-ов */
  --v1:clamp(1rem,2.4vh,1.5rem);   /* внутри строк списков */
  --v2:clamp(1.75rem,4vh,2.75rem);     /* заголовок → содержимое */
  --v3:clamp(2.5rem,6vh,4rem);     /* между частями раздела */
  --v4:clamp(3rem,8vh,5.5rem);     /* шапка раздела, финал */

  /* ритм */
  --pad:clamp(1.25rem,4.2vw,3.75rem);
  --gap:clamp(1.75rem,4vw,3rem);
  --sec:clamp(4.5rem,11vh,8.25rem);
  --maxw:82.5rem;

  /* Поле для того, что прибито к краям экрана: шапка, титул первого экрана,
     фраза на полосе-видео. Считается так, чтобы совпасть с началом текста
     в колонке 1320: половина свободного места плюс внутренний отступ колонки.
     До 05.09 внутренний отступ не прибавлялся, и логотип с титулом стояли
     на 60 px, а все заголовки разделов — на 120 (на 1920: 300 против 360).
     Две левые линии на одной странице читались как неаккуратность.
     Ниже 1320 обе формулы дают обычный отступ, там ничего не меняется. */
  --edge:max(var(--pad), calc(50vw - var(--maxw) / 2 + var(--pad)));

  /* Второе поле — для текста, который лежит на кадре во всю ширину: шапка,
     первый экран, финал. 13.09 смотрели, как страница выглядит с узким полем
     целиком, и оказалось, что разделам на белом оно не даёт ничего (абзацы
     и так ограничены 46 знаками), а один заголовок от лишней ширины распался
     на «Ни одной лишней / наценки». Выигрывает только текст на кадре: там
     широкое поле читается пустой рамкой поверх изображения.

     Ниже 1320 оба поля равны — колонка ещё не упирается в потолок, и обе
     формулы дают одно и то же. Расхождение появляется только на широких
     экранах и читается как два слоя: кадр и бумага. 50 против 120 на 1440,
     67 против 160 на 1920. Цитата на полосе осталась на --edge: она набрана
     тёмным по белому, это бумага. */
  --bleed:var(--pad);

  /* скругления. Крупное скругление на фото снято — Рома его забраковал:
     оно смягчало индустриальный кадр. Остались только капсулы интерфейса. */
  --r-nav:0.875rem;
  --r-pill:6.25rem;
}

@media(min-width:1320px){ :root{ --bleed:3.5vw; } }

html{ scroll-behavior:smooth; }
body{
  background:var(--vellum); color:var(--carbon);
  font-family:var(--ms); font-size:1rem; line-height:1.4;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* ——— типографика ——— */
.lab{
  font-size:0.8125rem; font-weight:400; letter-spacing:.09em; text-transform:uppercase;
  display:flex; gap:0.625rem; color:var(--carbon);
  margin-bottom:var(--s3);            /* один отступ под лейблом на всю страницу */
}
.lab::before{                    /* фирменный квадратик вместо точки */
  content:""; width:0.25rem; height:0.25rem; background:currentColor;
  flex:0 0 0.25rem; align-self:flex-start; margin-top:.42em;
}
/* Шкала крупного кегля с 05.09 — четыре ступени: 80 цифры / 72 титул первого
   экрана / 64 заголовки разделов / 48 цитата на видео. До этого было шесть
   кеглей между 56 и 92, и заголовки одного уровня стояли разным размером
   (68 в две колонки, 86 в одну). Все .disp разделов — 64, без переопределений
   по блокам.

   До 13.09 здесь было записано «80 титул и цифры» — запись расходилась
   с кодом, где титул с самого начала стоял на 72. По этой записи титул
   утром 13.09 подняли до 80 и в тот же день вернули: кегль не мера массы,
   и по площади букв числа тяжелее титула при любом из двух кеглей.
   Разбор — в `sections.css` рядом с `.hero .disp`. */
.disp{ font-weight:300; font-size:clamp(2rem,4.5vw,4rem); line-height:.98;
  letter-spacing:-.008em; text-wrap:pretty; }
.sub{ font-weight:400; font-size:clamp(1.25rem,2vw,1.375rem); line-height:1.3; letter-spacing:.01em; }
.body{ font-size:1rem; line-height:1.55; max-width:46ch; }
/* Лид раздела — абзац рядом с заголовком 64 px — на ступень крупнее текста:
   между 64 и 16 ступени не было, и вводка читалась как сноска к заголовку. */
.two .body, .prod-head .body, .lz-head .body, .hist-head .body, .br-head .body,
.cta .body{ font-size:1.125rem; line-height:1.5; }
.small{ font-size:0.875rem; line-height:1.35; color:var(--mercury); }
.num{ font-variant-numeric:tabular-nums; }

a{ color:inherit; }
/* выделение текста — фирменное, тёмные буквы на рябиновом 6,64:1 */
::selection{ background:var(--ryabina); color:#241F1C; }
/* Кольцо фокуса берёт цвет самой ссылки: белое на кадре первого экрана и в
   подвале, тёмное на светлых блоках. Жёстко заданный «карбон» пропадал на
   тёмном видео, где пункты меню белые. */
a:focus-visible{ outline:2px solid currentColor; outline-offset:0.1875rem; }

/* ——— кнопки-капсулы ——— */
.btn{
  display:inline-block; border-radius:var(--r-pill); padding:1.125rem 1.375rem;
  font-size:0.875rem; font-weight:400; text-decoration:none;
  transition:background .3s, color .3s, border-color .3s;
}
.fill{ background:var(--carbon); color:#fff; }
.fill:hover{ background:#1d1a18; }
.ghost{ border:1px solid var(--carbon); color:var(--carbon); }
.ghost:hover{ background:var(--carbon); color:var(--vellum); }

/* ——— проявление на скролле ——— */
.rv{ opacity:0; transform:translateY(0.5rem); transition:opacity .6s ease-out, transform .6s ease-out; }
.rv.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation:none !important; }
  .rv{ opacity:1; transform:none; }
}