/* =====================================================================
   ТОКЕНЫ. Значения из макета.
   Файл O4RbbtGF5mwsHSkBgXNyAc, страница «Page 1»:
     версия 1 — «Desktop - 27», node 159:1741
     версия 2 — «Desktop - 28», node 159:1788
   Оба фрейма 1440×841.
   ===================================================================== */

:root {
  /* --- СЦЕНА -------------------------------------------------------
     Все блоки сайта рисуются в системе координат шириной 1440 и
     масштабируются по ширине окна (k = w / 1440, см. js/main.js).
     Высота у каждой секции своя, у первого экрана — 841. */
  --scene-w: 1440px;
  --scene-h: 841px;

  /* --- ЦВЕТ --------------------------------------------------------- */
  --bg: #eeeeee;       /* бумага — фон всех секций */
  /* ПОЛЕ ЛИСТА. Кромка в 18 пунктов вокруг каждого разворота: там нет ни
     фактуры, ни зерна — только этот цвет. Он светлее бумаги, поэтому на
     стыке двух блоков их поля складываются в белую полосу в 36. Она и
     отделяет разворот от разворота — как поле печатного листа. */
  --field: #f7f7f7;
  --ink: #000000;      /* весь текст, кроме текста на красном */
  --red: #e03342;      /* плашки, кнопка, точки-маркеры */
  --red-hand: #d8303e; /* чуть иной красный рукописи во 2-й версии */
  --red-deep: #7a1c24; /* тёмный конец градиента нижней полосы */
  --on-red: #ffffff;   /* текст на красном */
  --red-gradient: linear-gradient(90deg, var(--red) 0%, var(--red-deep) 100%);

  /* --- ТИПОГРАФИКА --------------------------------------------------
     Три гарнитуры и ровно три роли: моноширинный интерфейс, рукопись
     в имени, Inter для служебной мелочи (соцсети, сноска). */
  --font-mono: "Mono", ui-monospace, Menlo, monospace;
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  --mono-fs: 16px;        /* основной кегль моно. Был 20, снижен до 16 по
                             решению Оксаны 05.09: «поправь везде шрифт
                             на 16». Крупное осталось крупным — заголовки,
                             число «100+», рукопись; сравнялся с подписями
                             весь основной набор. */
  --mono-lh: 22px;        /* было 26 при кегле 20: та же плотность строк */
  --mono-ls: 0.1em;       /* трекинг +10 %, как в макете */

  --nav-fs: 16px;         /* шапка: меню и кнопка. В макете было 20 —
                             уменьшено 02.09 по просьбе Оксаны, крупно */
  --nav-lh: 21px;

  --logo-fs: 21.16px;     /* логотип — единственный крупнее прочего моно */
  --logo-lh: 28px;
  --logo-w: 201px;        /* ширина блока: строки выключены по центру */

  --caption-fs: 16px;     /* подписи под фото («Рязань. Москва. Весь мир.») */
  --caption-lh: 21px;

  --ui-fs: 16px;          /* соцсети. Было 20 — сведено к 16 вместе со
                             всем основным набором 05.09. */
  --ui-lh: 20px;
  --ui-ls: -0.05em;

  /* Сноска про Meta. Было 7.4 из макета — на экране это 5 пикселей при
     обычном масштабе, то есть серая полоска, а не текст: прочесть
     нельзя. Поднято до 10 (05.09). Одиннадцать пробовала — сноска
     становилась ШИРЕ строки «Рязань. Москва. Весь мир.», под которой
     стоит, и мера ломалась; на десяти её ширина совпадает с ней. Это по-прежнему заметно мельче
     основного набора и своей роли не меняет — сноска остаётся сноской,
     но её хотя бы видно. */
  --fine-fs: 10px;
  --fine-lh: 10px;

  /* --- КОМПОНЕНТЫ ---------------------------------------------------- */
  --btn-w: 194px;         /* плашка кнопки «Связаться» */
  --btn-h: 64px;
  --corner-w: 60px;       /* красный угловой блок слева сверху */
  --corner-h: 113px;
  --stripe-h: 19px;       /* нижняя красная полоса */
  --dot-size: 5px;        /* точка-маркер в списке качеств */
  --dot-gap: 12px;        /* её вынос влево от слова */
  --dot-rise: 9px;        /* и подъём от верха строки */

  /* --- ФАКТУРЫ -------------------------------------------------------
     Обе взяты из Figma вместе с режимами наложения — без них бумага
     становится плоской, а зерно — грязным серым. */
  /* 0.3 → 0.6 (05.09). Вертикальные росчерки на бумаге у нас были куда
     бледнее, чем в Figma: фактура лежит в режиме exclusion, и на трёх
     десятых от неё оставался почти ровный тон. Снимала один и тот же
     угол листа при 0.3, 0.45, 0.6 и 0.8 — на 0.6 росчерки читаются
     так же, как в макете, и бумага ещё не начинает светлеть. */
  --paper-opacity: 0.6;
  --paper-blend: exclusion;
  --grain-opacity: 1;
  --grain-blend: multiply;
  /* Поле зерна от кромки листа. Оно и даёт светлую кайму по краю —
     печатное поле бумаги. 05.09 выяснилось, что у первого экрана оно
     было только слева и сверху, а справа и снизу зерно доходило до
     кромки; теперь поле одинаковое со всех сторон во всех блоках.
     Само число к правилам больше не подставляется — они считают его
     процентами от листа, чтобы переживать смену его высоты. */
  --grain-inset: 18px;

  /* ЗЕРНО ВЗЯТО ИЗ МАКЕТА, А НЕ ПРИДУМАНО. 05.09 замерили: на макете
     чистая бумага даёт яркость 220.9 и зерно 5.71, а на сайте выходило
     235.1 и 1.04 — в пять с половиной раз слабее. Настройкой это не
     чинилось: color-burn, overlay и soft-light дают 1.1 даже на полной
     непрозрачности, а multiply со старой фактурой давал нужное зерно,
     но чернил бумагу до 176.
     Причина была в самом файле: grain-node.png тёмный (средняя 161),
     и при любом смешивании он либо не виден, либо чернит лист.
     grain-figma.png собран из НАСТОЯЩЕГО зерна экспорта макета
     (_figma-ref/macket-v2.png, чистое поле y120–300 x500–900) и
     приведён к средней 240 при разбросе 6 — так умножение поверх
     бумаги даёт ровно макетные 221.7 и 5.69. */ 

  /* --- ПОЛЯ ----------------------------------------------------------
     Замерено по первому экрану — этих же краёв держатся новые блоки. */
  --edge: 60px;           /* левый край фото и углового блока */
  --edge-text: 73px;      /* левый край логотипа */

  /* --- РУКОПИСЬ ------------------------------------------------------
     Версии кадра отличаются не только размером подписи: в первой она
     набрана Katherine Plus, во второй — Denistina, трекинг −3 % против
     −4 %, и красный чуть другой. Это всплыло замером: у второй версии
     чернила оказались на 53px выше при той же высоте кегля.
     По умолчанию здесь первая версия, ниже — переопределение второй.
     Координаты подписи — в hero.css. */
  --hand-font: "Katherine", cursive;
  --hand-ls: -0.03em;
  --hand-red: var(--red);
  --hand-name-fs: 65.42px;
  --hand-surname-fs: 222.35px;
}

/* Вторая версия кадра — принята 02.09.2026, стоит по умолчанию в разметке. */
:root[data-v="2"] {
  --hand-font: "Denistina", cursive;
  --hand-ls: -0.04em;
  --hand-red: var(--red-hand);
  --hand-name-fs: 79.83px;
  --hand-surname-fs: 221.37px;
}

/* =====================================================================
   ГАРНИТУРЫ

   Katherine Plus — её собственный шрифт, взят из системы
   (~/Library/Fonts/katherine_plus.ttf), положен в assets-local/fonts.

   Roboto Mono В СИСТЕМЕ ОТСУТСТВУЕТ. В Figma он берётся из облачной
   библиотеки, локально его нет, а Google Fonts мы не подключаем.
   Поставлен Hack — моноширинный с близкой шириной знака. Начертание
   отличается: у Roboto Mono мягче овалы и уже прописные. Если нужен
   точный перенос — положить RobotoMono-Regular.ttf в assets-local/fonts
   и заменить src ниже, остальное менять не придётся.
   ===================================================================== */

@font-face {
  font-family: "Mono";
  src: local("Roboto Mono"), url("../assets-local/fonts/hack-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Denistina";
  src: url("../assets/fonts/denistina.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Katherine";
  src: url("../assets-local/fonts/katherine-plus.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}