/* ═══════════════════════════════════════════════════════════════════════════════════
   ДИЗАЙН-СИСТЕМА ПЛАТФОРМЫ · единственный источник размеров
   ───────────────────────────────────────────────────────────────────────────────────
   Зачем. Замер 28.08 по 93 страницам: 514 разных размеров шрифта, 927 значений padding,
   9 ширин контейнера, 23 радиуса, 111 самособирающихся сеток auto-fit с 37 разными
   minmax, 2,87 МБ инлайнового CSS против 53 КБ общего слоя. Это и читается как
   «сгенерировано»: каждая страница — самостоятельный вывод одной модели по одному
   запросу, а не часть одной работы. Никакая графика этого не лечит.

   Здесь заморожены шкалы. Дальше страницы мигрируют на них волнами: произвольное
   значение заменяется ближайшей ступенью, инлайновый CSS тает.

   🔴 ПРАВИЛО: новых значений не заводить. Нужен размер между ступенями — значит либо
   ступень выбрана неверно, либо блоку не место в этом ряду. Ступени выведены из
   реального употребления (самые частые кегли: 12 · 11 · 10.5 · 14 · 13.5 · 13 · 16 · 19),
   поэтому миграция не ломает вид, а приводит его к порядку.
   ═══════════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── ШКАЛА КЕГЛЯ · 8 ступеней вместо 514 ────────────────────────────────────────
     Отношение 1.25 (большая терция) в мелком конце, 1.333 в крупном: мелкие ступени
     должны различаться заметно, крупные — не прыгать. Значения округлены к тем,
     что уже стоят на платформе, чтобы миграция не сдвигала вёрстку. */
  --t-1: 10.5px;   /* служебная подпись, колонцифра, метка */
  --t-2: 12px;     /* моно-кик, подпись под кадром, сноска */
  --t-3: 13.5px;   /* мелкий текст, оговорка, вторичная строка */
  --t-4: 16px;     /* основной текст — ниже него на витрине не набираем */
  --t-5: 19px;     /* лид, вводный абзац */
  --t-6: clamp(22px, 2.2vw, 28px);   /* подзаголовок раздела */
  --t-7: clamp(28px, 3.4vw, 44px);   /* заголовок раздела */
  --t-8: clamp(34px, 5.2vw, 68px);   /* титр первого экрана */

  /* ── ШКАЛА ОТСТУПА · 6 ступеней вместо 927 ──────────────────────────────────────
     Геометрическая с шагом ~1.6 (близко к φ): каждая следующая заметно больше
     предыдущей, поэтому иерархия читается без линейки. */
  --s-1: 6px;
  --s-2: 10px;
  --s-3: 16px;
  --s-4: 26px;
  --s-5: 42px;
  --s-6: 68px;
  /* поля секции — единственные два значения на всю платформу */
  --sec-y: clamp(56px, 9vh, 110px);
  --sec-x: clamp(20px, 4vw, 44px);

  /* ── КОНТЕЙНЕР · 2 ширины вместо 9 ──────────────────────────────────────────────
     Узкий — для набора (65 знаков, предел читаемости строки).
     Широкий — для раскладок и кадров. Третьего не бывает. */
  --w-text: 68ch;
  --w-wide: 1180px;

  /* ── РАДИУС · 3 значения вместо 23 ───────────────────────────────────────────────
     Платформа печатная, а не «мобильное приложение»: скругление здесь почти не нужно. */
  --r-0: 0;        /* печатная плашка — по умолчанию */
  --r-1: 2px;      /* кнопка, поле ввода */
  --r-2: 4px;      /* кадр, изображение */

  /* ── ЛИНИЯ · вес вместо одинакового 1px ─────────────────────────────────────────── */
  --line-hair: .5px;
  --line-thin: 1px;

  /* ── РИТМ ─────────────────────────────────────────────────────────────────────── */
  --lh-tight: 1.06;   /* титр */
  --lh-head:  1.18;   /* заголовки */
  --lh-text:  1.62;   /* набор */
}

/* ── БАЗОВЫЕ ПРИМЕНЕНИЯ. Только для помеченных блоков, чтобы миграция шла волнами
   и ни одна страница не поехала от одного подключения файла. ──────────────────── */
.sys{
  --rh: var(--s-4);
}
.sys h1{font-size:var(--t-8);line-height:var(--lh-tight)}
.sys h2{font-size:var(--t-7);line-height:var(--lh-head)}
.sys h3{font-size:var(--t-6);line-height:var(--lh-head)}
.sys p,.sys li{font-size:var(--t-4);line-height:var(--lh-text)}
.sys .lead{font-size:var(--t-5);line-height:1.5}
.sys .small{font-size:var(--t-3)}
.sys .kick,.sys .meta{font-size:var(--t-2)}
.sys .micro{font-size:var(--t-1)}
.sys .wrap-text{max-width:var(--w-text)}
.sys .wrap-wide{max-width:var(--w-wide)}
.sys section{padding-block:var(--sec-y);padding-inline:var(--sec-x)}
.sys > * + *{margin-top:var(--rh)}

/* ── ЗАПРЕТ САМОСОБИРАЮЩИХСЯ СЕТОК ───────────────────────────────────────────────
   111 сеток repeat(auto-fit,minmax(Npx,1fr)) с 37 разными N — самая узнаваемая
   подпись машинной вёрстки: раскладка не выбрана, а получилась. Взамен три
   намеренные раскладки. Их ровно три, и они называются вслух. */
.lay-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-5)}
.lay-side{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:var(--s-5)}
.lay-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:var(--s-5)}
@media(max-width:860px){
  .lay-2,.lay-side,.lay-wide{grid-template-columns:1fr;gap:var(--s-4)}
}