/* стиль.css — ПРАВИЛА ПОКАЗА корпоративного сайта gdw.kz. Регистр ЖУРНАЛЬНЫЙ.
 *
 * ОДНА ПОВЕРХНОСТЬ. Вся страница лежит на одной тёплой светлой поверхности: чередования
 * тёмных и светлых полос нет, рамок вокруг содержимого нет. Смысловые блоки разделяют
 * чертёжные волосяные линии и пустота; акцент ставится точечно — на подписи и маркеры.
 * Рамка остаётся только у ОРГАНОВ УПРАВЛЕНИЯ (свёрнутое меню).
 *
 * ОПОРА ПОД МЕЛКИМ. Карточки перечней и группы мелких данных лежат на плашке-ОПОРЕ: без
 * рамки, без тени, отличие от поверхности объявлено долей светлоты и держится на пороге
 * различимости. Второй поверхностью опора не становится, свой фон разворотам не заводит и
 * радиус берёт СВОЙ — органы управления остаются чертёжно острыми.
 *
 * ЧИСЕЛ ЗДЕСЬ НЕТ. Все величины подачи — кегли, шкала промежутков, доли ведущего элемента,
 * поля разворота, пропорции групп кадров, длительности движения и палитра — объявлены
 * значениями в одном месте (сайт-gdw-прямой/подача.js) и приходят страницей записями
 * (токены.css). Правила ниже эти записи ЧИТАЮТ. Единственные числа, допустимые в файле, —
 * ноль и диапазоны знаков в @font-face, к подаче не относящиеся.
 *
 * ДВА МЕТОДА РАСКЛАДКИ ОБЪЯВЛЕНЫ ОТДЕЛЬНО: широкий и узкий стоят каждый в своей полосе
 * @media и не правят друг друга; вне полос — то, что общее обоим. Порог методов объявлен
 * подачей (ПОРОГ_УЗКОГО) и сверяется с ним сторожем.
 */

/* ── ГАРНИТУРЫ: их две, лежат своим узлом, внешних обращений нет ─────────────────────── */
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/inter-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jbmono-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jbmono-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jbmono-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(fonts/jbmono-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* ── ОСНОВА ──────────────────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: var(--font-text);
  font-size: var(--size-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: var(--full); height: auto; display: block; }
a { color: inherit; }
#верх { position: absolute; top: 0; }
::selection { background: var(--brass); color: var(--paper); }

/* ── РАЗВОРОТЫ НА ОДНОЙ ПОВЕРХНОСТИ ─────────────────────────────────────────────────── */
.разворот {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  --accent: var(--brass);
  --quiet: var(--ink-quiet);
  --quiet-2: var(--quiet-note);
  --edge: var(--rule);
  --edge-soft: var(--rule-soft);
}

/* ВЫСОТУ РАЗВОРОТА ЗАДАЁТ СОДЕРЖИМОЕ, А НЕ ЭКРАН. Прежде здесь стояла минимальная высота в
 * полный экран и выравнивание по центру: разворот с коротким содержимым ОБЯЗАН был занять весь
 * экран, и над содержимым и под ним оставались две пустые полосы — тем шире, чем короче
 * раздел. Правило работало против собственной цели, и это и есть «мёртвые зоны внизу экрана».
 * Теперь высота есть высота содержимого плюс объявленные поля; полный экран остаётся у
 * ведущего элемента там, где у него своя геометрия (ниже, «ведущий элемент»).
 *
 * ПОЛЕ РАЗВОРОТА — СЕТКА, А НЕ СТОЛБЕЦ. Умолчание — во всю строку; из умолчания объявленно
 * выходит только мелкое, собранное кластером (широкий метод ниже). */
.разворот-поле {
  max-width: var(--canvas);
  margin-inline: auto;
  padding-block: var(--spread-pad);
  padding-inline: var(--side-pad);
  display: grid;
  gap: var(--lead-gap);
}
.разворот-поле > * { grid-column: var(--full-row); }

/* КЛАСТЕР МЕЛКИХ ОРГАНОВ. Подряд идущие мелкие органы собраны разметкой в один кластер и
 * раскладываются здесь колонками. Число колонок объявлено записью; последний орган нечётного
 * кластера занимает строку целиком — иначе рядом с ним осталась бы пустая колонка в половину
 * полотна, то есть та самая мёртвая зона, только сбоку. */
.кластер { display: grid; gap: var(--step-5); align-content: start; }

/* чертёжная линия документа: смысловые блоки разделяет волосяная линия */
.разворот + .разворот { border-top: var(--hairline) solid var(--edge); }

/* ── ОПОРА ПОД МЕЛКИМ ────────────────────────────────────────────────────────────────────
 * Плашка держит карточки перечней и группы мелких данных, чтобы они не висели в пустоте.
 * Она ОПОРА, а не коробка: рамки нет, тени нет, цвет выведен из объявленной доли светлоты
 * той же бумаги, радиус — свой, органов управления он не касается. Внутри опоры смысл
 * по-прежнему делят волосяные линии. */
.карточка, .модель, .отдел, .орган-пары, .орган-таблица, .орган-полоса,
.шифр-сегмент, .патент-графика img, .logo {
  background: var(--card);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

/* ПРИЁМ ИСТОЧНИКА: АКЦЕНТНАЯ ЛИНИЯ НАД КАРТОЧКОЙ. Латунная черта поверх опоры — тот самый
 * журнальный приём разворота-источника: КАЖДАЯ белая карточка колоды несёт её. Толщина
 * объявлена записью и толще волоса: иначе приём неотличим от разделителя. Линия принадлежит
 * КАРТОЧКЕ и на секции не растекается; перечень мест выводится подачей из перечня опоры
 * (без изображений, знаков и полосы показателей) и сверяется сторожем. */
.карточка, .модель, .отдел, .орган-пары, .орган-таблица, .шифр-сегмент {
  border-top: var(--accent-line) solid var(--accent);
}

/* Счёт и титул переносятся, а не распирают строку: длинный титул на узком экране иначе
 * выталкивает разворот за правый край окна. */
.разворот-шапка { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--step-4); }
.разворот-номер, .разворот-всего {
  font-family: var(--font-data);
  font-size: var(--size-quiet);
  letter-spacing: var(--tracking-wide);
}
.разворот-номер { color: var(--accent); }
.разворот-всего { color: var(--quiet); }
.разворот-титул {
  font-size: var(--size-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  font-weight: var(--w-title);
  text-wrap: balance;
}

/* знак непереведённого раздела: малый именованный, содержимого не заслоняет */
.перевод-знак {
  font-family: var(--font-data);
  font-size: var(--size-quiet);
  color: var(--accent);
  align-self: center;
  text-transform: lowercase;
}

/* ── ВЕДУЩИЙ ЭЛЕМЕНТ: доля площади объявлена подачей по роду ──────────────────────────────
 * ВЫСОТУ РЕЗЕРВИРУЮТ ТОЛЬКО ИЗОБРАЖЕНИЕ И СХЕМА — у них есть своя геометрия, не выводимая из
 * текста. Таблице и полосе показателей высоту задают их строки, и объявленный им резерв
 * обернулся бы пустой полосой ровно в разнице между резервом и содержимым. Перечень родов
 * ниже сверяется сторожем с объявленным видом ведущего: разойтись молча они не могут, а
 * записи высоты у нерезервирующего рода нет вовсе — читать правилу нечего. */
.доминанта[data-род="hero"],
.доминанта[data-род="models"],
.доминанта[data-род="scheme"],
.доминанта[data-род="section-header"],
.доминанта[data-род="patent"] { min-height: var(--lead-высота); }
.доминанта[data-род="hero"] { --lead-высота: var(--lead-герой-в); }
.доминанта[data-род="models"] { --lead-высота: var(--lead-модели-в); }
.доминанта[data-род="scheme"] { --lead-высота: var(--lead-схема-в); }
.доминанта[data-род="section-header"] { --lead-высота: var(--lead-шапка-раздела-в); }
.доминанта[data-род="patent"] { --lead-высота: var(--lead-патент-в); }

/* ── ГРУППЫ КАДРОВ: одна пропорция и одна обработка на всю группу ───────────────────── */
img[data-группа="row"] {
  aspect-ratio: var(--ratio-row);
  object-fit: var(--fit-row);
  width: var(--full);
  height: auto;
}
img[data-группа="models"] {
  aspect-ratio: var(--ratio-model);
  object-fit: var(--fit-model);
  width: var(--full);
  height: auto;
}
img[data-группа="single"] { object-fit: var(--fit-single); }
/* Нулевой минимум ширины обязателен: собственная ширина кадра иначе входит в минимум фигуры,
 * фигура распирает свою колонку, и ряд выносит за край полотна — сжать его некому. */
figure { display: grid; align-content: center; justify-items: center; min-width: 0; }
.герой-графика img, .патент-графика img, .раздел-графика img { max-height: var(--lead-высота); width: auto; }

/* ── ТИПОГРАФИКА ОРГАНОВ ────────────────────────────────────────────────────────────── */
.надзаголовок {
  display: block;
  font-family: var(--font-data);
  font-size: var(--size-quiet);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: var(--step-3);
}
.орган-заголовок {
  font-size: var(--size-heading);
  line-height: var(--leading-heading);
  font-weight: var(--w-heading);
  letter-spacing: var(--tracking-heading);
}
.орган { display: grid; gap: var(--step-4); align-content: start; }
.текст-колонка { max-width: var(--line); color: inherit; }
.орган-текст .текст-колонка + .текст-колонка { margin-top: var(--step-2); }
.орган-примечание { max-width: var(--line); font-size: var(--size-quiet); color: var(--quiet-2); }

/* показатели: конечные числа в разметке, кегль не мельче титула разворота */
/* ЧИСЛА ПОЛОСЫ ВЫРАВНИВАЮТСЯ ПО ВЕРХУ, А НЕ ПО НИЗУ. Прежде полоса прижимала показатели к
 * низу, а каждый показатель прижимал к низу своё содержимое: подписи разной длины — одна в две
 * строки, другая в одну — опускали число ровно на высоту недостающей строки, и в ряду
 * «150+ · 4 · 2» среднее число просаживалось. Теперь числа стоят своей строкой на общем верху,
 * а подпись свисает вниз произвольным числом строк и высоты числа не трогает. */
.орган-полоса { display: flex; flex-wrap: wrap; gap: var(--step-7); align-items: start; }
.показатель {
  display: grid;
  grid-template-columns: auto auto var(--rest);
  align-items: baseline;
  column-gap: var(--step-1);
  align-content: start;
}
/* Крупное число показателя — ЗНАЧЕНИЕ, а не украшение: оно окрашено чернилами, и акцента у
 * этого органа нет вовсе. Акцент остаётся подписям, маркерам и числовым ячейкам таблиц. */
.пк-число, .пк-ед {
  font-family: var(--font-data);
  font-size: var(--size-figure);
  font-weight: var(--w-semibold);
  line-height: var(--leading-figure);
  letter-spacing: var(--tracking-figure);
  color: var(--ink);
}
.пк-подпись { grid-column: var(--full-row); font-size: var(--size-quiet); color: var(--quiet-2); max-width: var(--line-label); }

/* карточные сетки */
.сетка { display: grid; gap: var(--step-5); }
.карточка {
  display: grid;
  gap: var(--step-2);
  align-content: start;
}
.карточка-код { font-family: var(--font-data); font-size: var(--size-quiet); color: var(--accent); letter-spacing: var(--tracking-caps); }
.карточка-титул { font-size: var(--size-card); font-weight: var(--w-card); line-height: var(--leading-tight); }
.карточка-мета { font-family: var(--font-data); font-size: var(--size-quiet); color: var(--quiet-2); }
.карточка-текст { font-size: var(--size-quiet); line-height: var(--leading-quiet); color: var(--quiet); max-width: var(--line-card); }

/* перечни пар */
.пары { display: grid; gap: var(--step-2); }
.пара { display: grid; gap: var(--step-4); border-top: var(--hairline) solid var(--edge-soft); padding-top: var(--step-2); }
.пара dt { font-family: var(--font-data); font-size: var(--size-quiet); color: var(--quiet); padding-top: var(--row-lift); }
.пара dd { font-size: var(--size-body); }

/* таблицы: широкий метод — таблицей, узкий — вертикальной чередой (объявлено ниже) */
.таблица-прокрутка { overflow-x: auto; }
.орган-таблица table { border-collapse: collapse; width: var(--full); }
.орган-таблица th, .орган-таблица td { border-top: var(--hairline) solid var(--edge-soft); padding: var(--step-3) var(--step-4); text-align: left; }
.орган-таблица th { font-family: var(--font-data); font-size: var(--size-quiet); letter-spacing: var(--tracking-table); color: var(--quiet); text-transform: uppercase; }
.яч-число { font-family: var(--font-data); text-align: right; font-variant-numeric: tabular-nums; }
.орган-таблица tbody .яч-число { color: var(--accent); font-weight: var(--w-semibold); }
.узкая-группа { border-top: var(--hairline) solid var(--edge); padding-block: var(--step-3); display: grid; gap: var(--step-2); }
.узкая-колонка { font-family: var(--font-data); color: var(--accent); font-weight: var(--w-semibold); }
.узкая-пара { display: flex; justify-content: space-between; gap: var(--step-4); border-top: var(--hairline) solid var(--edge-soft); padding-top: var(--step-1); }
.узкая-имя { color: var(--quiet-2); font-size: var(--size-quiet); }
.узкая-значение { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* разбор шифра */
/* СЕТКА РАВНЫХ КОЛОНОК, А НЕ ПОТОК С ПЕРЕНОСОМ. Число сегментов известно заранее, и поток
 * отдавал их ширину на откуп длине текста: четыре знака вставали в первую строку, два во
 * вторую, а справа оставалось пустое поле почти в половину экрана. Число колонок объявлено
 * записью подачи на каждой ширине показа; здесь его не набирают. Объявленный минимум ширины
 * сегмента снят вместе с переносом — он был подпоркой под перенос и без него не нужен. */
.шифр { display: grid; grid-template-columns: var(--grid-cipher); gap: var(--step-4); }
.шифр-сегмент { display: grid; gap: var(--step-1); align-content: start; }
.шифр-знак { font-family: var(--font-data); font-size: var(--size-cipher); font-weight: var(--w-title); color: var(--accent); line-height: var(--leading-one); }
.шифр-подпись { font-family: var(--font-data); font-size: var(--size-quiet); text-transform: uppercase; letter-spacing: var(--tracking-table); color: var(--quiet); }
.шифр-текст { font-size: var(--size-quiet); max-width: var(--line-label); }

/* кадр источника: фотография темы объявленной ширины, по центру строки разворота */
.орган-кадр { width: var(--topic-photo-w); margin-inline: auto; }
.кадр-темы { width: var(--full); }

/* стена знаков партнёров: марки рядами равных колонок, каждый знак на белой карточке */
.знаки {
  list-style: none;
  display: grid;
  grid-template-columns: var(--grid-logos);
  gap: var(--step-4);
  align-items: center;
}
.logo { display: grid; place-items: center; }
.кадр-знака { height: var(--logo-h); width: auto; max-width: var(--full); object-fit: var(--fit-logo); }

/* контакты */
.орган-контакты { gap: var(--step-3); }
.контакт { display: flex; gap: var(--step-4); border-top: var(--hairline) solid var(--edge-soft); padding-top: var(--step-2); }
.контакт-подпись { font-family: var(--font-data); font-size: var(--size-quiet); color: var(--quiet-2); min-width: var(--label-col); padding-top: var(--label-lift); }
.контакт-значение { font-size: var(--size-card); font-weight: var(--w-semibold); }
.контакт-значение a { text-decoration: none; border-bottom: var(--hairline) solid var(--accent); }

/* ── ГЕРОЙ ──────────────────────────────────────────────────────────────────────────── */
.герой { display: grid; gap: var(--lead-gap); align-items: center; }
.герой-титул {
  font-size: clamp(var(--size-hero-title-min), var(--size-hero-title-share), var(--size-hero-title-max));
  line-height: var(--leading-hero);
  letter-spacing: var(--tracking-hero);
  font-weight: var(--w-hero);
  display: grid;
  gap: var(--step-3);
}
.герой-акцент {
  font-size: clamp(var(--size-lede-min), var(--size-lede-share), var(--size-lede-max));
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-heading);
  color: var(--quiet);
  max-width: var(--line-lede);
  line-height: var(--leading-heading);
}
.герой-текст { max-width: var(--line); color: var(--quiet); font-size: var(--size-card); line-height: var(--leading-tight); margin-top: var(--step-5); }
/* Полоса героя — та же полоса показателей: числа стоят на общем верху, подписи свисают вниз. */
.герой-показатели { display: flex; flex-wrap: wrap; gap: var(--step-7); margin-top: var(--step-7); align-items: start; }
.платформа { display: grid; gap: var(--lead-gap); align-items: center; }
.ряд-обзор { display: grid; gap: var(--step-6); }
.ряд-полоса { display: grid; gap: var(--step-5); align-items: end; text-decoration: none; }
.ряд-полоса:hover .ряд-кадр, .ряд-полоса:focus-visible .ряд-кадр { opacity: var(--dim-response); }

/* ── МОДЕЛИ ─────────────────────────────────────────────────────────────────────────── */
/* Колонка мелкого текста лежит на ОПОРЕ (объявлена выше): прежде она отделялась волосяной
 * линией сверху, и текст висел на голом фоне — ровно то, что отмечено заказчиком. */
/* ── МОДЕЛЬНЫЙ РЯД — ЧЕТЫРЕ КОЛОНКИ В ОДНУ СТРОКУ (карта 10001038) ──────────────────────
 * Разворот источника ставит S · M · X · AI рядом, и смысл этого — СРАВНЕНИЕ: покупатель
 * прикладывает модели друг к другу глазом. Вкладки, стоявшие здесь прежде, сравнение
 * уничтожали: чтобы сличить S и X, надо было переключиться и запомнить числа.
 *
 * ОДНУ ВЫСОТУ ОДНОИМЁННЫХ ВЕЛИЧИН ДЕРЖИТ ПОДСЕТКА, А НЕ УДАЧА. Раздел объявляет места по
 * вертикали, колонка занимает их все и наследует границы, поэтому описание разной длины у
 * соседей НЕ сдвигает величины ниже себя. Подгонка высот руками сюда не годится: она держится,
 * пока тексты похожей длины, и рассыпается на первом же новом описании. */
.модели {
  display: grid; grid-template-columns: var(--grid-range);
  grid-template-rows: var(--model-rows);
  gap: var(--step-6); align-items: start;
}
.модель {
  display: grid; grid-row: var(--model-span); grid-template-rows: var(--subgrid);
  /* Колонка объявлена гибкой записью, а не оставлена неявной: у неявной колонки ширина
   * неопределённая, и кадр выводит свою ширину из высоты ряда по пропорции — на узком окне
   * ряд выходил за край. Определённая колонка даёт кадру ширину, а высоту — пропорция. */
  grid-template-columns: var(--flex-col);
  gap: var(--step-4); align-content: start;
}
.модель-коды {
  font-family: var(--font-data); font-size: var(--size-quiet); color: var(--quiet);
  display: flex; flex-wrap: wrap; gap: var(--step-3);
}
.модель-титул { font-size: var(--size-heading); font-weight: var(--w-title); }
.модель-подзаголовок {
  font-family: var(--font-data); font-size: var(--size-quiet); color: var(--accent);
  line-height: var(--leading-quiet);
}
.модель-текст { font-size: var(--size-card); color: var(--quiet); line-height: var(--leading-tight); max-width: var(--line); }
.модель-срок { font-family: var(--font-data); font-size: var(--size-quiet); color: var(--accent); }
.модель-пометка { color: var(--quiet); padding-left: var(--step-2); }
/* Перечень применения — СТРОКАМИ, между строками волосяная линия. Склеенный в абзац, он
 * перестаёт быть перечнем: прочитать его можно только целиком. */
.модель-применение { border-top: var(--hairline) solid var(--edge); padding-top: var(--step-3); }
.модель-применение ul { list-style: none; display: grid; }
.модель-применение li {
  font-family: var(--font-data); font-size: var(--size-quiet); color: var(--quiet);
  padding-block: var(--step-2);
}
.модель-применение li + li { border-top: var(--hairline) solid var(--edge-soft); }
/* ВЕЛИЧИНЫ — ВЕРТИКАЛЬНЫМ СПИСКОМ, строка на величину: слева мелкий ключ, справа крупное
 * значение. Три величины в ряд делили подвал на трети, и значение ломалось на пять строк. */
.модель-величины { display: grid; border-top: var(--hairline) solid var(--edge); }
.модель-величина {
  /* Имя величины короткое («тип», «на стойку») — колонка берёт его по содержимому с
   * объявленным потолком, а вся оставшаяся ширина достаётся значению: резерв под длинное
   * имя оставлял значению меньше собственного слова. */
  display: grid; grid-template-columns: fit-content(var(--name-col)) var(--flex-col);
  gap: var(--step-4); align-items: baseline;
  padding-block: var(--step-3);
}
.модель-величина + .модель-величина { border-top: var(--hairline) solid var(--edge-soft); }
.модель-величина dt {
  font-family: var(--font-data); font-size: var(--size-quiet);
  text-transform: uppercase; letter-spacing: var(--tracking-table); color: var(--quiet);
}
.модель-величина dd {
  font-family: var(--font-data); font-size: var(--size-heading);
  font-weight: var(--w-title); line-height: var(--leading-one);
  /* Значение сжимается до колонки и за неё не выходит. Переносов по слогам здесь нет:
   * значения величин — числа с единицами, и рубленые куски слов в них читались сбоем
   * (замечание Владельца 13.08); текстовая строка «тип» источником не объявлена и снята. */
  min-width: 0; overflow-wrap: anywhere;
}
.модель-единица { color: var(--quiet); font-size: var(--size-card); padding-left: var(--step-1); }

/* ── ОТДЕЛЫ: схема цикла разметкой ──────────────────────────────────────────────────── */
.отделы { display: grid; gap: var(--step-6); }
/* Отдел — слово слева, умения справа (широкий метод ниже): одна колонка на всю ширину
 * плашки оставляла справа мёртвую зону — всё содержимое стояло в левой половине. */
.отдел {
  position: relative;
  display: grid;
  gap: var(--step-5);
  align-content: start;
}
.отдел-слово { display: grid; gap: var(--step-4); align-content: start; min-width: 0; }
.отдел-номер {
  font-family: var(--font-data);
  font-size: var(--size-dept);
  font-weight: var(--w-title);
  color: var(--accent);
  line-height: var(--leading-one);
}
.отдел-умения { display: grid; gap: var(--step-4); }
/* Умение лежит ВНУТРИ опоры отдела: вторая плашка поверх первой завела бы вложенную
 * поверхность. Разделяет их волосяная линия — тот же приём, что у прочих перечней. */
.умение { display: grid; gap: var(--step-1); border-top: var(--hairline) solid var(--edge-soft); padding-top: var(--step-2); }
.отдел-шаги { list-style: none; display: grid; gap: var(--step-2); counter-reset: шаг; }
.отдел-шаги li { display: grid; grid-template-columns: auto var(--rest); gap: var(--step-3); counter-increment: шаг; align-items: baseline; }
.отдел-шаги li::before {
  content: counter(шаг, decimal-leading-zero);
  font-family: var(--font-data);
  font-size: var(--size-quiet);
  color: var(--accent);
}
.шаг-титул { font-weight: var(--w-semibold); }
.шаг-текст { grid-column: var(--col-2); font-size: var(--size-quiet); color: var(--quiet-2); }

/* ── ПАТЕНТ ─────────────────────────────────────────────────────────────────────────── */
/* Свидетельство источника лежит на ОПОРЕ (объявлена выше вместе с прочим мелким), а не в
 * рамке: рамка осталась только у органов управления. */
.патент { display: grid; gap: var(--lead-gap); align-items: center; }

/* ── СКВОЗНАЯ ЧАСТЬ ─────────────────────────────────────────────────────────────────── */
.шапка {
  position: fixed; inset: 0 0 auto 0; z-index: var(--header-z);
  display: flex; align-items: center; gap: var(--step-6);
  padding: 0 var(--side-pad);
  min-height: var(--touch-size);
  height: var(--header-h);
  background: color-mix(in srgb, var(--paper) var(--header-density), transparent);
  backdrop-filter: blur(var(--header-blur));
  color: var(--ink);
  border-bottom: var(--hairline) solid var(--rule);
}
.марка { display: flex; align-items: center; gap: var(--step-3); text-decoration: none; min-height: var(--touch-size); }
/* ЗНАК МАРКИ УТВЕРЖДЁН ПОД СВЕТЛЫЙ ФОН: в нём есть и белый квадрат, и чёрный. Положенный
   прямо на тёмную шапку, он теряет чёрную долю целиком, а белая читается пятном.
   Перекрашивать доли марки запрещено — это правка фирменного знака. Поэтому знак кладётся
   на СВОЁ светлое поле, и держит это поле сам знак, а не оболочка вокруг него: читается он
   одинаково и с обёрткой, и без неё. */
.марка-поле { display: inline-flex; align-items: center; }
.марка-знак {
  display: block; height: var(--mark-size); width: auto; box-sizing: content-box;
  background: var(--paper); padding: var(--step-1) var(--step-2); border-radius: var(--radius-s);
}
.марка-продукт { font-family: var(--font-data); font-size: var(--size-quiet); letter-spacing: var(--tracking-mark); }
.меню { flex-grow: var(--grow); display: flex; justify-content: center; }
.меню-пункт {
  font-family: var(--font-data); font-size: var(--size-quiet);
  text-decoration: none; letter-spacing: var(--tracking-menu);
  color: var(--ink-quiet);
  padding: var(--step-3);
  min-height: var(--touch-size);
  display: inline-flex; align-items: center;
}
.меню-пункт:hover, .меню-пункт:focus-visible { color: var(--ink); }
.язык { display: flex; gap: var(--step-2); }
.язык-пункт {
  font-family: var(--font-data); font-size: var(--size-quiet); text-transform: uppercase;
  text-decoration: none; padding: var(--step-1) var(--step-2);
  color: var(--ink-quiet);
  min-width: var(--touch-size); min-height: var(--lang-h);
  display: inline-flex; align-items: center; justify-content: center;
}
.язык-действующий { color: var(--ink); border-bottom: var(--hairline) solid var(--accent); }
a.язык-пункт:hover, a.язык-пункт:focus-visible { color: var(--ink); }

.подвал {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--step-3);
  padding: var(--step-7) var(--side-pad);
  background: var(--paper);
  color: var(--ink-quiet);
  border-top: var(--hairline) solid var(--rule);
  font-family: var(--font-data);
  font-size: var(--size-quiet);
}
.подвал-строка:first-child { color: var(--accent); }
.подвал-точка { opacity: var(--dot-dim); }

/* фокус видим всегда */
:focus-visible { outline: var(--focus-ring) solid var(--brass); outline-offset: var(--focus-gap); }

/* ── ДВИЖЕНИЕ КАК СООБЩЕНИЕ ─────────────────────────────────────────────────────────── */
/* Класс html.движение ставит сценарий и ставит ЛИШЬ тогда, когда посетитель не объявил
 * запрет движения. Скрытое начальное состояние, плавный переход между разворотами и
 * отклик органов существуют только под этим классом: при запрете содержимое стоит видимым
 * и конечным с первого байта, а органы меняют состояние мгновенно. */
html.движение { scroll-behavior: smooth; }
html.движение .появление {
  opacity: 0;
  translate: 0 var(--reveal-shift);
  transition: opacity var(--dur-reveal) ease-out, translate var(--dur-reveal) ease-out;
}
html.движение .появление.показано { opacity: var(--full-opacity); translate: 0 0; }
html.движение .меню-пункт,
html.движение .язык-пункт,
html.движение .контакт-значение a,
html.движение .ряд-кадр,
html.движение .меню-узкое summary i {
  transition: color var(--dur-response) ease-out, opacity var(--dur-response) ease-out,
    background-color var(--dur-response) ease-out;
}
/* Отклик держат те, у кого есть чем откликнуться: опора — подъёмом. Цвет рамки у элемента без
 * рамки — обещание, которого показ не выполняет, потому модель и отдел, легшие на опору,
 * откликаются подъёмом наравне с прочими плашками. */
html.движение .карточка,
html.движение .модель,
html.движение .отдел,
html.движение .шифр-сегмент {
  transition: translate var(--dur-response) ease-out;
}
html.движение .модель:hover,
html.движение .карточка:hover,
html.движение .шифр-сегмент:hover,
html.движение .отдел:hover { translate: 0 var(--lift-response); }

/* ── ШИРОКИЙ МЕТОД РАСКЛАДКИ ────────────────────────────────────────────────────────── */
@media (min-width: 835px) {
  .меню-узкое { display: none; }
  .меню-широкое { display: flex; gap: var(--step-2); }
  .таблица-узкая { display: none; }

  /* КЛАСТЕРЫ МЕЛКИХ СУЩНОСТЕЙ. Умолчание разворота — во всю строку; сюда выходит лишь то,
   * что мельче строки. Подряд идущее мелкое собрано разметкой в КЛАСТЕР и раскладывается в
   * нём колонками; одинокая узкая таблица («имя → значение», не шире объявленного числа
   * столбцов) идёт в паре со своим текстовым органом — профиль слева, показатели справа.
   * Ширина таблицы читается У САМОЙ ТАБЛИЦЫ: появление третьего столбца в её голове означает,
   * что ужимать её некуда, и она остаётся во всю строку вместе со своим текстом. Порог
   * столбцов объявлен подачей (КЛАСТЕР) и сверяется с этим условием сторожем. */
  .разворот-поле { grid-template-columns: var(--grid-2); }
  .кластер { grid-template-columns: var(--grid-2); }
  .кластер > :last-child:nth-child(odd) { grid-column: var(--full-row); }
  .разворот-поле > .орган-таблица:not(:has(th:nth-child(3))) { grid-column: auto; }
  .разворот-поле > .орган-текст:has(+ .орган-таблица:not(:has(th:nth-child(3)))) { grid-column: auto; }

  .герой { grid-template-columns: var(--flex-col) var(--lead-герой-ш); }
  .платформа { grid-template-columns: var(--lead-герой-ш) var(--flex-col); }
  .патент { grid-template-columns: var(--lead-патент-ш) var(--flex-col); }
  /* Слово отдела и умения делят плашку пополам; перечень умений — чередой правой колонки. */
  .отдел { grid-template-columns: var(--grid-2); }
  .отдел-умения { grid-template-columns: var(--flex-col); align-content: start; }
  .сетка { grid-template-columns: var(--grid-3); }
  [data-колонн="2"] .сетка { grid-template-columns: var(--grid-2); }
  [data-колонн="4"] .сетка { grid-template-columns: var(--grid-4); }
  .ряд-полоса { grid-template-columns: var(--grid-3); }
  .пара { grid-template-columns: minmax(var(--name-col-min), var(--name-col)) var(--rest); }
  .раздел-графика { width: var(--lead-шапка-раздела-ш); margin-inline: auto; }
}

/* ── УЗКИЙ МЕТОД РАСКЛАДКИ ──────────────────────────────────────────────────────────── */
/* Свой метод, а не поправки поверх широкого: сетки — вертикальной чередой, меню — свёрнутым
 * органом с полным перечнем, таблицы — узкой чередой без горизонтальной прокрутки, ведущий
 * элемент берёт свою долю площади по ширине. Все разделы и значения широкого присутствуют. */
@media (max-width: 834px) {
  .меню-широкое { display: none; }
  .таблица-прокрутка { display: none; }
  /* Кадр темы на узком окне занимает всю строку: половина узкого экрана нечитаемо мала. */
  .орган-кадр { width: var(--full); }
  /* Колонка узкой таблицы — гибкой записью: неявная колонка держит минимум по длиннейшей
   * строке значений и выносит опору за край окна. */
  .таблица-узкая { display: grid; grid-template-columns: var(--flex-col); gap: var(--step-2); }
  /* Значение узкой черёды сжимается и переносится внутри слова: данные несут слова длиннее
   * узкого окна («Электрораспределительное»), и без переноса они тянут за собой весь лист. */
  .узкая-значение { min-width: 0; overflow-wrap: anywhere; }

  /* Слово титула, не влезающее в узкое окно целиком, переносится по слогам, а не выносит
   * разворот за край: язык страницы объявлен, и перенос ведёт словарь браузера. Нулевой
   * минимум ширины обязателен: без него строка держит минимум по целому слову и переносу
   * не даёт случиться. */
  .разворот-титул { hyphens: auto; min-width: 0; overflow-wrap: break-word; }

  /* Колонка одна: кластер остаётся кластером, но раскладывается чередой. Трек объявлен
   * гибкой записью, а не голым остатком: голый остаток держит минимум по содержимому, и
   * разворот с процентной внутренней колонкой (патент) раздувался до полной ширины своего
   * содержимого — на окне 390px документ выходил в 569px с прокруткой вбок. */
  .разворот-поле { grid-template-columns: var(--flex-col); }
  .кластер { grid-template-columns: var(--flex-col); }

  .герой { grid-template-columns: var(--lead-герой-ш); }
  .платформа { grid-template-columns: var(--lead-герой-ш); }
  .патент { grid-template-columns: var(--lead-патент-ш); }
  .сетка, [data-колонн="2"] .сетка, [data-колонн="4"] .сетка { grid-template-columns: var(--flex-col); }
  .ряд-полоса { grid-template-columns: var(--flex-col); }
  .пара { grid-template-columns: var(--flex-col); gap: var(--step-1); }

  /* Подсетка мест обслуживает сравнение моделей ПО ГОРИЗОНТАЛИ: одноимённые величины соседей
   * стоят на одной высоте. В одной колонке соседей по горизонтали нет, а семь объявленных
   * мест на четыре колонки span 7 загоняют вторую и последующие модели в неявные ряды —
   * раскладка расползалась за край окна. Узкому методу — обычные ряды по содержимому. */
  .модели { grid-template-rows: auto; }
  .модель { grid-row: auto; grid-template-rows: auto; }
  .орган-полоса { flex-direction: column; align-items: flex-start; gap: var(--step-5); }
  .раздел-графика { width: var(--lead-шапка-раздела-ш); }

  /* Полотно меню позиционируется от ШАПКИ, а не от кнопки: кнопка стоит посреди шапки, и
   * отсчитанное от неё полотно выходило за правый край окна (замер 13.08: край 427px при
   * окне 390px). От шапки оно ложится сразу под неё и занимает окно от края до края. */
  .меню-узкое { position: static; }
  .меню-узкое summary {
    list-style: none; cursor: pointer;
    display: grid; gap: var(--bar-gap); place-content: center;
    width: var(--touch-size); height: var(--touch-size);
  }
  .меню-узкое summary::-webkit-details-marker { display: none; }
  .меню-узкое summary i { display: block; width: var(--menu-bar); height: var(--bar-w); background: var(--ink); }
  /* Свёрнутое меню — ОРГАН УПРАВЛЕНИЯ, а не блок содержимого: рамка и заливка нужны ему,
     чтобы всплывающее полотно читалось поверх страницы. */
  .меню-полотно {
    position: absolute; top: var(--full); left: 0; right: 0;
    display: grid;
    background: var(--paper);
    border-block: var(--hairline) solid var(--rule);
    padding: var(--step-2);
    min-width: var(--menu-panel);
  }
  .меню-полотно .меню-пункт { min-height: var(--touch-size); }
}