/* ==== 00-tokeny.css ==== */
/* ============================================================================
   TAMINOTA STEEL · ТОКЕНЫ. Источник — DESIGN.md (редакция 2, 17.09.2026,
   «холодная сталь + янтарь»). Величины здесь и только здесь; в остальных
   файлах стилей литералов цвета и кегля нет. Порядок склейки файлов задаёт
   sborka.mjs по имени: 00 → 99.

   Две поверхности — графит и лист. Основа страницы тёмная (графит), листы
   данных — светлые вставки. Семантические роли одни на обе поверхности:
   секция с классом .tma держит графитовый набор, секция с классом .list
   переопределяет роли на светлый. Компоненты читают роли и не знают, где
   стоят. Тем нет намеренно.
   ========================================================================== */
:root {
  /* -- палитра ------------------------------------------------------------ */
  --grafit: #101316; --grafit-2: #171B20; --grafit-3: #1F252B; --grafit-4: #2A3139;
  --liniya-grafita: #2B323A;
  --tekst-na-grafite: #EDEFF2; --tekst-2-na-grafite: #A6AEB7; --tekst-3-na-grafite: #7E8791;
  --list-fon: #EFF1F3; --list-fon-2: #E4E7EB; --list-fon-3: #FAFBFB; --liniya-lista: #D0D5DB;
  --chernila: #0F1215; --chernila-2: #474F58; --chernila-3: #5C656E;
  --yantar: #F0A423; --yantar-2: #FFB63D; --na-yantare: #101316;
  --yantar-glubokij: #8A4B00; --yantar-glubokij-2: #6E3B00;
  --plejsholder-lista: #6F7882; --plejsholder-grafita: #7E8791;

  /* -- роли · графит (по умолчанию) --------------------------------------- */
  --fon: var(--grafit); --fon-2: var(--grafit-2); --fon-3: var(--grafit-3); --fon-4: var(--grafit-4);
  --liniya: var(--liniya-grafita);
  --tekst: var(--tekst-na-grafite); --tekst-2: var(--tekst-2-na-grafite); --tekst-3: var(--tekst-3-na-grafite);
  --signal: var(--yantar); --signal-2: var(--yantar-2); --na-signale: var(--na-yantare);
  --knopka-fon: var(--yantar); --knopka-fon-2: var(--yantar-2); --knopka-tekst: var(--na-yantare);
  --plejsholder: var(--plejsholder-grafita);
  --fokus: var(--yantar);
  --vydelenie: color-mix(in srgb, var(--yantar) 14%, var(--grafit-2));
  --signal-krupno: var(--yantar);
  --tma: var(--grafit); --tma-2: var(--grafit-2); --tma-3: var(--grafit-3);
  color-scheme: dark;

  /* -- гарнитуры ---------------------------------------------------------- */
  --f-displej: 'Sofia Sans Condensed', 'Arial Narrow', sans-serif;
  --f-chislo: 'Sofia Sans Extra Condensed', Impact, 'Arial Narrow', sans-serif;
  --f-zag: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-tekst: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
  --f-brend: 'Unbounded', system-ui, sans-serif;

  /* -- шкала кегля · ступень «телефон» (<700) ------------------------------ */
  --k-displej: 52px; --i-displej: 48px;
  --k-zag1: 40px;    --i-zag1: 42px;
  --k-zag2: 24px;    --i-zag2: 28px;
  --k-zag3: 19px;    --i-zag3: 26px;
  --k-lid: 18px;     --i-lid: 28px;
  --k-tekst: 17px;   --i-tekst: 28px;
  --k-melkij: 14px;  --i-melkij: 20px;
  --k-mono: 13px;    --i-mono: 16px;
  --k-rubrika: 12px; --i-rubrika: 16px;
  --k-chislo: 56px;  --i-chislo: 52px;
  /* Крупные цифры блока «В цифрах»: своя ступень, крупнее обычного числа —
     четыре числа на всю ширину экрана читаются раньше подписей */
  --k-cifry: 96px;   --i-cifry: 88px;
  /* Телефон крупной цифрой и значение контакта моно: свои ступени, потому что
     обе строки длинные и мерятся не кеглем, а шириной колонки. Ступенчато, не
     fluid: clamp(vw) на витрине уже давал «разные шрифты» на соседних ширинах. */
  --k-telefon: 48px; --i-telefon: 48px;
  --k-kontakt: 24px; --i-kontakt: 30px;
  --k-btn: 17px;     --k-btn-sm: 17px;

  /* -- разрядка ----------------------------------------------------------- */
  --r-displej: 0.01em; --r-zag: -0.015em; --r-mono: 0.04em; --r-rubrika: 0.14em;
  --r-zag1: 0.01em;  /* заголовок блока набран капсом узкой гарнитурой */
  --r-btn: 0.06em;   /* подпись кнопки — капс Condensed */

  /* -- отступы, кратные 4 -------------------------------------------------- */
  --s4: 4px; --s8: 8px; --s12: 12px; --s16: 16px; --s24: 24px; --s32: 32px;
  --s48: 48px; --s64: 64px; --s96: 96px; --s128: 128px; --s160: 160px;

  /* -- каркас ------------------------------------------------------------- */
  --shirina: 1600px;
  --polya: 20px;
  --mezhkolonnik: 16px;
  --list-y: 64px;          /* вертикальный отступ секции-листа */
  --polosa-y: 48px;        /* вертикальный отступ полосы */
  --shapka-h: 72px;
  --mera-lid: 58ch;
  --mera-tekst: 66ch;

  /* -- форма -------------------------------------------------------------- */
  --radius: 2px;           /* контролы */
  --liniya-w: 1px;
  --liniya-aktiv-w: 2px;
  /* Три роста кнопки: крупная (действие экрана), обычная, малая. На телефоне
     крупная равна обычной — 64 px под пальцем занимают полосу, а не кнопку. */
  --knopka-h: 56px;
  --knopka-h-lg: 56px;
  --knopka-h-sm: 44px;
  --pole-h: 48px;
  --pole-h-lg: 56px;       /* поле поиска обложки стоит в строку с крупной кнопкой */

  /* -- движение ----------------------------------------------------------- */
  --t-bystro: 160ms;
  --t-sredne: 320ms;
  --t-dolgo: 720ms;
  --krivaya: cubic-bezier(0.2, 0.7, 0.2, 1);
  --sdvig: 20px;
  /* Появление по очереди: ступень задержки, сдвиг и длительность одного входа */
  --yav-zaderzhka: 90ms;
  --yav-sdvig: 24px;
  --t-yavlenie: 640ms;
}

/* Ступень «планшет и ноутбук» */
@media (min-width: 700px) {
  :root {
    --k-displej: 84px;  --i-displej: 76px;
    --k-zag1: 52px;     --i-zag1: 54px;
    --k-zag2: 28px;     --i-zag2: 32px;
    --k-zag3: 20px;     --i-zag3: 28px;
    --k-lid: 20px;      --i-lid: 32px;
    --k-chislo: 72px;   --i-chislo: 64px;
    --k-cifry: 144px;   --i-cifry: 130px;
    --k-telefon: 72px;  --i-telefon: 72px;
    --k-kontakt: 28px;  --i-kontakt: 36px;
    --k-btn: 19px;
    --polya: 32px; --mezhkolonnik: 24px;
    --list-y: 96px; --polosa-y: 64px;
    --shapka-h: 88px;
    --knopka-h: 56px; --knopka-h-lg: 64px; --pole-h: 52px; --pole-h-lg: 64px;
  }
}

/* Ступень «настольный экран» */
@media (min-width: 1024px) {
  :root {
    --k-displej: 96px;  --i-displej: 88px;
    --k-zag1: 64px;     --i-zag1: 66px;
    --k-zag2: 32px;     --i-zag2: 36px;
    --k-lid: 22px;      --i-lid: 34px;
    --k-chislo: 88px;   --i-chislo: 80px;
    --k-cifry: 176px;   --i-cifry: 158px;
    --k-kontakt: 36px;  --i-kontakt: 44px;
    --polya: 40px;
    --list-y: 128px; --polosa-y: 64px;
  }
}

/* Ступень «широкий экран» */
@media (min-width: 1440px) {
  :root {
    --k-displej: 112px; --i-displej: 100px;
    --k-zag1: 72px;     --i-zag1: 74px;
    --k-zag2: 36px;     --i-zag2: 40px;
    --k-chislo: 104px;  --i-chislo: 92px;
    --k-cifry: 208px;   --i-cifry: 188px;
    --k-telefon: 104px; --i-telefon: 96px;
    --k-kontakt: 44px;  --i-kontakt: 52px;
    --polya: 48px;
    --list-y: 160px;
  }
}

/* -- поверхность «лист» ------------------------------------------------------
   Светлая вставка данных: каталог, таблицы, документы, форма. Внутри неё все
   роли светлые. Класс .tma возвращает графитовые роли (шапка, подвал, сцены
   внутри листа). */
.list, .svetlo {
  --fon: var(--list-fon); --fon-2: var(--list-fon-2); --fon-3: var(--list-fon-3); --fon-4: var(--liniya-lista);
  --liniya: var(--liniya-lista);
  --tekst: var(--chernila); --tekst-2: var(--chernila-2); --tekst-3: var(--chernila-3);
  --signal: var(--yantar-glubokij); --signal-2: var(--yantar-glubokij-2); --na-signale: var(--list-fon-3);
  --knopka-fon: var(--yantar); --knopka-fon-2: var(--yantar-2); --knopka-tekst: var(--na-yantare);
  --plejsholder: var(--plejsholder-lista);
  --fokus: var(--yantar-glubokij);
  --vydelenie: color-mix(in srgb, var(--yantar) 16%, var(--list-fon));
  /* Крупные глифы (номера разделов и шагов, ≥ 24 px): светлее глубокого
     янтаря, чтобы не читались коричневым; 3,97:1 на листе — норма для крупного набора */
  --signal-krupno: #B0640C;
  color-scheme: light;
  background: var(--fon);
  color: var(--tekst);
}
.tma {
  --fon: var(--grafit); --fon-2: var(--grafit-2); --fon-3: var(--grafit-3); --fon-4: var(--grafit-4);
  --liniya: var(--liniya-grafita);
  --tekst: var(--tekst-na-grafite); --tekst-2: var(--tekst-2-na-grafite); --tekst-3: var(--tekst-3-na-grafite);
  --signal: var(--yantar); --signal-2: var(--yantar-2); --na-signale: var(--na-yantare);
  --knopka-fon: var(--yantar); --knopka-fon-2: var(--yantar-2); --knopka-tekst: var(--na-yantare);
  --plejsholder: var(--plejsholder-grafita);
  --fokus: var(--yantar);
  --vydelenie: color-mix(in srgb, var(--yantar) 14%, var(--grafit-2));
  --signal-krupno: var(--yantar);
  color-scheme: dark;
  background: var(--fon);
  color: var(--tekst);
}
/* Лист второго тона: панель внутри листа или соседний лист другого оттенка */
.list--2 { --fon: var(--list-fon-2); --fon-2: var(--list-fon); background: var(--fon); }
/* Совместимость с прежними именами палитры в стилях страниц */
:root, .tma, .list {
  --bumaga: var(--list-fon); --bumaga-2: var(--list-fon-2); --bumaga-3: var(--list-fon-3); --liniya-bumagi: var(--liniya-lista);
  --zhar: var(--yantar); --zhar-2: var(--yantar-2); --na-zhare: var(--na-yantare); --rzha: var(--yantar-glubokij); --rzha-2: var(--yantar-glubokij-2);
  --liniya-tmy: var(--liniya-grafita);
}

/* ==== 01-baza.css ==== */
/* ============================================================================
   TAMINOTA STEEL · БАЗА: сброс, роли набора, сетка, служебные классы,
   движение и его выключение. Литералов величин здесь нет — только токены.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--fon);
  color: var(--tekst);
  font-family: var(--f-tekst);
  font-size: var(--k-tekst);
  line-height: var(--i-tekst);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1;
}
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: var(--signal); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: text-decoration-thickness var(--t-bystro) var(--krivaya), color var(--t-bystro) var(--krivaya); }
a:hover { text-decoration-thickness: 2px; color: var(--signal-2); }
:focus-visible { outline: var(--liniya-aktiv-w) solid var(--fokus); outline-offset: 2px; }
::selection { background: var(--signal); color: var(--na-signale); }
hr { border: 0; border-top: var(--liniya-w) solid var(--liniya); margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
[hidden] { display: none !important; }

/* -- роли набора ----------------------------------------------------------- */
.t-displej { font-family: var(--f-displej); font-weight: 700; font-size: var(--k-displej); line-height: var(--i-displej); letter-spacing: var(--r-displej); text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
/* Заголовок блока набран так же, как обложка: узкий прописной. Строчный
   широкий гротеск владелец 17.09 забраковал — «блоки мелкие и серые»; капс
   Condensed держит ту же высоту строки крупнее на ступень. */
.t-zag1 { font-family: var(--f-displej); font-weight: 700; font-size: var(--k-zag1); line-height: var(--i-zag1); letter-spacing: var(--r-zag1); text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; }
.t-zag2 { font-family: var(--f-zag); font-weight: 700; font-size: var(--k-zag2); line-height: var(--i-zag2); letter-spacing: var(--r-zag); text-wrap: balance; }
/* Заголовок карточки капсом узкой гарнитурой — там, где он стоит в решётке */
.t-zag2--kaps { font-family: var(--f-displej); font-weight: 700; letter-spacing: var(--r-zag1); text-transform: uppercase; }
.t-zag3 { font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
.t-lid { font-size: var(--k-lid); line-height: var(--i-lid); color: var(--tekst-2); max-width: var(--mera-lid); text-wrap: pretty; }
.t-tekst { font-size: var(--k-tekst); line-height: var(--i-tekst); max-width: var(--mera-tekst); }
.t-melkij { font-size: var(--k-melkij); line-height: var(--i-melkij); }
.t-mono { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); line-height: var(--i-mono); letter-spacing: var(--r-mono); font-variant-numeric: tabular-nums lining-nums; }
.t-rubrika { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); }
.t-rubrika--signal { color: var(--signal); }
.t-chislo { font-family: var(--f-chislo); font-weight: 700; font-size: var(--k-chislo); line-height: var(--i-chislo); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0; }
.t-dim { color: var(--tekst-2); }
.t-dim-3 { color: var(--tekst-3); }
.t-signal { color: var(--signal); }
.chislo { font-variant-numeric: tabular-nums lining-nums; }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Проза: абзацы с воздухом, ссылки внутри — ржой */
.proza { max-width: var(--mera-tekst); }
.proza > * + * { margin-top: var(--s16); }
.proza h2, .proza h3 { margin-top: var(--s48); }
.proza h2 + *, .proza h3 + * { margin-top: var(--s16); }
.proza ul { padding-left: var(--s24); list-style: square; }
.proza ol { padding-left: var(--s24); list-style: decimal; }
.proza li + li { margin-top: var(--s8); }
.proza strong { font-weight: 600; }

/* -- каркас ---------------------------------------------------------------- */
.shell { width: 100%; max-width: var(--shirina); margin-inline: auto; padding-inline: var(--polya); }
.shell--uzkij { max-width: calc(var(--shirina) * 0.75); }
.setka { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mezhkolonnik); }
@media (min-width: 700px) { .setka { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .setka { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.stack > * + * { margin-top: var(--stack, var(--s24)); }
.row { display: flex; flex-wrap: wrap; gap: var(--s16); align-items: center; }
.row--between { justify-content: space-between; }

/* Секция-лист (бумага) и секция-полоса (тьма) */
.list { padding-block: var(--list-y); background: var(--fon); color: var(--tekst); }
.list--tesno { padding-block: var(--s64); }
.list + .list { border-top: var(--liniya-w) solid var(--liniya-lista); }
/* Рубрика листа в издательской манере: номер раздела крупной узкой цифрой и подпись моно */
.list__rubrika { display: flex; align-items: baseline; gap: var(--s12); margin-bottom: var(--s16); }
.list__n { font-family: var(--f-chislo); font-weight: 700; font-size: var(--k-zag2); line-height: 1; letter-spacing: 0; color: var(--signal-krupno); font-variant-numeric: tabular-nums; }
.polosa { padding-block: var(--polosa-y); }
/* Голова блока: слева рубрика → заголовок → лид, справа в той же строке выход
   (кнопка) или число. Лид всегда под заголовком (решение владельца 17.09: лид
   сбоку бывал длиннее заголовка и рвал шапку). */
.list__head { margin-bottom: var(--s48); display: grid; gap: var(--s24); align-items: end; }
.list__head__l { display: grid; gap: var(--s12); min-width: 0; }
.list__head .t-lid { margin-top: var(--s4); max-width: var(--mera-lid); }
.list__head__r { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12); }
/* Уже 700 кнопка головы идёт во всю ширину и переносит подпись — иначе «Весь каталог · 46 позиций» шире полосы. */
@media (max-width: 699px) {
  .list__head__r .btn { width: 100%; max-width: 100%; height: auto; min-height: var(--btn-h); justify-content: space-between; white-space: normal; text-align: left; }
  .list__head__r .btn > span:first-child { padding-block: var(--s12); }
}
@media (min-width: 700px) {
  .list__head:has(.list__head__r) { grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--s32); }
  .list__head__r { justify-content: flex-end; }
}
@media (min-width: 1024px) {
  .list__head { margin-bottom: var(--s64); }
}

/* Кадр: обёртка с фиксированным соотношением, чтобы вёрстка не прыгала */
.kadr { position: relative; overflow: clip; background: var(--fon-2); }
.kadr img { width: 100%; height: 100%; object-fit: cover; }
.kadr--4x3 { aspect-ratio: 4 / 3; }
.kadr--16x9 { aspect-ratio: 16 / 9; }
.kadr--21x9 { aspect-ratio: 21 / 9; }

/* Обложка внутренней страницы — на весь экран: первый экран держит внимание, а не следующий блок (решение владельца 17.09) */
main > .scena:first-child { min-height: calc(100dvh - var(--shapka-h)); }
main > .stranica-head:first-child { min-height: calc(100dvh - var(--shapka-h)); }

/* -- контракт обложки (одинаков на главной и на внутренних) -------------------
   Текст прижат к низу, слева рубрика → заголовок → лид (7/12), справа внизу
   колонка фактов или метаданных (5/12): правая половина не пустует, и взгляд
   идёт слева направо, а не только налево (разбор владельца 17.09). Тот же
   .stranica-head__in ставится и внутри сцены (scena vid=oblozhka), поэтому
   раскладка не зависит от .shell. */
.stranica-head { display: flex; align-items: flex-end; }
.stranica-head__in { width: 100%; display: grid; gap: var(--s32); align-items: end; }
.stranica-head__l { display: grid; gap: var(--s12); align-content: end; min-width: 0; }
.stranica-head__l .t-lid { margin-top: var(--s4); }
.stranica-head__r { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24); align-content: end; min-width: 0; }
@media (min-width: 1024px) {
  .stranica-head__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--s64); }
  .stranica-head__r { grid-template-columns: minmax(0, 1fr); gap: var(--s32); padding-left: var(--s32); border-left: var(--liniya-w) solid var(--liniya); }
}
.scena .stranica-head__in { align-items: end; }
/* Сцена: кадр во весь блок на тьме, набор поверх, глухая вуаль слева */
.scena { position: relative; isolation: isolate; overflow: clip; display: grid; align-items: end; background: var(--tma); }
.scena__kadr { position: absolute; inset: 0; z-index: 0; }
.scena__kadr img { width: 100%; height: 100%; object-fit: cover; object-position: var(--kadr-x, 60%) var(--kadr-y, 50%); }
.scena__vual { position: absolute; inset: 0; z-index: 1; background:
  linear-gradient(90deg, color-mix(in srgb, var(--tma) 92%, transparent) 0%, color-mix(in srgb, var(--tma) 80%, transparent) 44%, color-mix(in srgb, var(--tma) 30%, transparent) 70%, transparent 100%),
  linear-gradient(0deg, color-mix(in srgb, var(--tma) 88%, transparent) 0%, transparent 44%); }
.scena__vual--sverhu { background:
  linear-gradient(90deg, color-mix(in srgb, var(--tma) 92%, transparent) 0%, color-mix(in srgb, var(--tma) 80%, transparent) 44%, color-mix(in srgb, var(--tma) 30%, transparent) 70%, transparent 100%),
  linear-gradient(180deg, color-mix(in srgb, var(--tma) 80%, transparent) 0%, transparent 32%),
  linear-gradient(0deg, color-mix(in srgb, var(--tma) 88%, transparent) 0%, transparent 44%); }
.scena__telo { position: relative; z-index: 2; padding-block: var(--s64) var(--s48); }
.scena--oblozhka { min-height: 100dvh; }
.scena--vnutr { min-height: 72dvh; }
.scena--nizkaya { min-height: 48dvh; }
@media (min-width: 700px) { .scena__telo { padding-block: var(--s96) var(--s64); } }
/* Телефон: вуаль только снизу, чтобы кадр был виден над набором; набор
   стоит внизу сцены (align-items: end), и тьма под ним держит контраст. */
@media (max-width: 699px) {
  .scena__vual, .scena__vual--sverhu { background: linear-gradient(0deg, color-mix(in srgb, var(--tma) 96%, transparent) 0%, color-mix(in srgb, var(--tma) 84%, transparent) 48%, color-mix(in srgb, var(--tma) 30%, transparent) 72%, transparent 100%); }
  .scena--oblozhka { min-height: 100svh; }
  .scena__telo { padding-block: var(--s96) var(--s32); }
}

/* -- проявление по прокрутке -------------------------------------------------
   Элемент с data-yavlenie получает класс .vid от скрипта. До скрипта всё
   видно: класс html[data-js] ставит сам app.js первой строкой. */
html[data-js] [data-yavlenie] { opacity: 0; transform: translateY(var(--yav-sdvig)); transition: opacity var(--t-yavlenie) var(--krivaya), transform var(--t-yavlenie) var(--krivaya); }
html[data-js] [data-yavlenie].vid { opacity: 1; transform: none; }
/* Шесть ступеней задержки: ряд карточек читается слева направо, а не
   вспыхивает целиком. Ступень — --yav-zaderzhka, дальше по кругу. */
html[data-js] [data-yavlenie="2"] { transition-delay: var(--yav-zaderzhka); }
html[data-js] [data-yavlenie="3"] { transition-delay: calc(var(--yav-zaderzhka) * 2); }
html[data-js] [data-yavlenie="4"] { transition-delay: calc(var(--yav-zaderzhka) * 3); }
html[data-js] [data-yavlenie="5"] { transition-delay: calc(var(--yav-zaderzhka) * 4); }
html[data-js] [data-yavlenie="6"] { transition-delay: calc(var(--yav-zaderzhka) * 5); }

/* Кадр сцены живёт под прокруткой: нативная временная шкала, где есть;
   там, где нет, кадр стоит. Скрипта для этого нет намеренно. */
@supports (animation-timeline: view()) {
  html[data-js]:not([data-legko]) .scena--zhivaya .scena__kadr img {
    animation: kadr-plyvet linear both;
    animation-timeline: view();
    animation-range: entry 0% exit 100%;
  }
}
@keyframes kadr-plyvet {
  from { transform: scale(1.12) translateY(-4%); }
  to { transform: scale(1.04) translateY(4%); }
}

/* Лёгкая версия (телефон) и покой: всё в конечном состоянии */
html[data-legko] [data-yavlenie] { opacity: 1 !important; transform: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  [data-yavlenie] { opacity: 1 !important; transform: none !important; }
}

/* Печать */
@media print {
  .tma { background: #fff !important; color: #000 !important; }
  .scena__kadr, .scena__vual { display: none !important; }
  [data-yavlenie] { opacity: 1 !important; transform: none !important; }
}

/* Кросс-документного view transition нет намеренно: в скрытой вкладке
   анимация не идёт, и страница после перехода оставалась пустой (замер
   17.09.2026). Переходы между страницами — обычные. */

/* ==== 02-komponenty.css ==== */
/* ============================================================================
   TAMINOTA STEEL · КОМПОНЕНТЫ: кнопки, плашки, поля и форма, таблицы,
   плитки категорий, карточки позиций, гармошка, бланк документа, полоса
   фактов, хлебные крошки, поиск. Все они читают роли поверхности и потому
   одинаково стоят на бумаге и на тьме.
   ========================================================================== */

/* -- кнопки -------------------------------------------------------------------
   Подпись и стрелка стоят разными ячейками: стрелка в квадрате по высоте
   кнопки, отделённом вертикальной линией, — кнопка читается как деталь с
   толщиной, а не как заливка с подписью (разбор владельца 17.09: «очень
   просто»). При наведении стрелка уезжает вправо и приходит слева: вторая
   такая же ждёт за левой кромкой ячейки. Магнит (тяга к курсору) живёт в
   50-dvizhenie.js и двигает translate, а не transform, чтобы не спорить с
   подъёмом кнопки при наведении. */
.btn { --btn-h: var(--knopka-h); position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 0; height: var(--btn-h); padding-inline: var(--s24); border-radius: var(--radius); overflow: clip; font-family: var(--f-displej); font-weight: 700; font-size: var(--k-btn); line-height: 1; letter-spacing: var(--r-btn); text-transform: uppercase; text-decoration: none; white-space: nowrap; border: var(--liniya-w) solid transparent; transition: background-color var(--t-bystro) var(--krivaya), color var(--t-bystro) var(--krivaya), border-color var(--t-bystro) var(--krivaya), transform var(--t-bystro) var(--krivaya), translate var(--t-sredne) cubic-bezier(0.34, 1.4, 0.64, 1); user-select: none; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--zhar { background: var(--knopka-fon); color: var(--knopka-tekst); border-color: var(--knopka-fon); }
/* Янтарь темнеет на тон, кнопка приподнимается на пиксель: ответ виден боковым зрением */
.btn--zhar:hover { background: color-mix(in srgb, var(--knopka-fon) 86%, var(--grafit)); border-color: color-mix(in srgb, var(--knopka-fon) 86%, var(--grafit)); color: var(--knopka-tekst); transform: translateY(-1px); }
.btn--zhar:active { transform: translateY(1px); }
.btn--kontur { background: transparent; color: var(--tekst); border-color: var(--tekst); }
/* Заливка контурной идёт слева направо — в ту же сторону, что чтение */
.btn--kontur::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--knopka-fon); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-sredne) var(--krivaya); }
.btn--kontur:hover { background: transparent; color: var(--knopka-tekst); border-color: var(--knopka-fon); }
.btn--kontur:hover::before { transform: scaleX(1); }
.btn--tihij { background: var(--fon-2); color: var(--tekst); border-color: var(--fon-2); }
.btn--tihij:hover { background: var(--fon-3); border-color: var(--liniya); }
.btn--sm { --btn-h: var(--knopka-h-sm); padding-inline: var(--s16); font-size: var(--k-btn-sm); }
.btn--lg { --btn-h: var(--knopka-h-lg); padding-inline: var(--s32); }
.btn:disabled { opacity: 0.5; cursor: default; transform: none; }
/* Стрелка стоит ячейкой до правой кромки — правое поле кнопки снимается */
.btn--strelka { padding-right: 0; }
.btn__strelka { align-self: stretch; flex: none; width: var(--btn-h); display: grid; place-items: center; overflow: clip; margin-left: var(--s24); border-left: var(--liniya-w) solid color-mix(in srgb, currentColor 28%, transparent); }
.btn--sm .btn__strelka { margin-left: var(--s16); }
.btn__strelka svg { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform var(--t-sredne) var(--krivaya); }
.btn__strelka svg + svg { transform: translateX(-180%); }
.btn:hover .btn__strelka svg { transform: translateX(180%); }
.btn:hover .btn__strelka svg + svg { transform: none; }
.btn__strelka path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* -- плашки ---------------------------------------------------------------- */
.plashka { display: inline-flex; align-items: center; height: 28px; padding-inline: var(--s8); border-radius: var(--radius); border: var(--liniya-w) solid var(--liniya); font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: 1; letter-spacing: var(--r-mono); color: var(--tekst-2); white-space: nowrap; }
.plashka--signal { border-color: var(--signal); color: var(--signal); }
.plashka--zalita { background: var(--signal); border-color: var(--signal); color: var(--na-signale); }
.tegi { display: flex; flex-wrap: wrap; gap: var(--s8); }

/* Короткие строки-утверждения моно с янтарной точкой: стоят в правой половине
   обложки вместо пустоты, читаются без чтения абзаца */
.tochki { display: grid; gap: var(--s16); }
.tochki li { position: relative; padding-left: var(--s24); color: var(--tekst-2); }
.tochki li::before { content: ''; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; background: var(--signal); }

/* Даталайн под заголовком: моно, приглушённый */
.datalajn { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); line-height: var(--i-mono); letter-spacing: var(--r-mono); color: var(--tekst-3); text-transform: uppercase; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* -- поля и форма ---------------------------------------------------------- */
.pole { display: grid; gap: var(--s8); min-width: 0; }
/* Поле лежит внутри подписи: подпись строкой сверху, поле строкой ниже на всю ширину — так все поля одной высоты и ширины колонки */
.pole__l { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); display: flex; flex-wrap: wrap; gap: var(--s8); align-items: baseline; }
.pole__l .pole__i { flex: 1 1 100%; }
.pole__l small { font-size: inherit; letter-spacing: inherit; color: var(--signal); }
.pole__i { width: 100%; min-width: 0; height: var(--pole-h); padding-inline: var(--s16); background: var(--fon-3); color: var(--tekst); border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); font-size: var(--k-tekst); line-height: 1.2; transition: border-color var(--t-bystro) var(--krivaya), box-shadow var(--t-bystro) var(--krivaya); }
/* Отдельного правила «поле на тьме» нет намеренно: --fon-3 сам светлеет на
   листе и темнеет на графите, а `.tma .pole__i` красил графитом и светлую
   карточку, вложенную в тёмную секцию (форма обратного звонка, замер 17.09). */
.pole__i::placeholder { color: var(--plejsholder); opacity: 1; }
.pole__i:hover { border-color: var(--tekst-3); }
.pole__i:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 1px var(--fokus); }
.pole__i--mono { font-family: var(--f-mono); font-size: var(--k-mono); letter-spacing: var(--r-mono); font-variant-numeric: tabular-nums; }
textarea.pole__i { height: auto; min-height: calc(var(--pole-h) * 2); padding-block: var(--s12); line-height: var(--i-melkij); resize: vertical; }
.pole__err { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--signal); min-height: 0; }
.pole__err:empty { display: none; }
.pole[data-err] .pole__i { border-color: var(--signal); }
.pole--wide { grid-column: 1 / -1; }
input[type='number'] { -moz-appearance: textfield; appearance: textfield; }
input[type='number']::-webkit-inner-spin-button, input[type='number']::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; }

.forma { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
@media (min-width: 700px) { .forma { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .forma { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.forma__niz { grid-column: 1 / -1; display: grid; gap: var(--s16); justify-items: start; }
/* Три поля видны, остальное под «Добавить детали»: обычный клиент не пишет восемь строк */
.forma__eshche { grid-column: 1 / -1; }
.forma__eshche summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s8); min-height: 44px; color: var(--signal); font-weight: 500; }
.forma__eshche summary::-webkit-details-marker { display: none; }
.forma__eshche summary::after { content: ''; width: 8px; height: 8px; border-right: var(--liniya-w) solid currentColor; border-bottom: var(--liniya-w) solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--t-bystro) var(--krivaya); }
.forma__eshche[open] summary::after { transform: translateY(2px) rotate(225deg); }
.forma__eshche__polya { display: grid; gap: var(--s24); margin-top: var(--s16); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .forma__eshche__polya { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .forma__eshche__polya { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.forma__otvet { color: var(--signal); font-size: var(--k-melkij); line-height: var(--i-melkij); }
.forma__soglasie { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-3); max-width: var(--mera-lid); }
.prinyato { display: grid; gap: var(--s12); padding: var(--s32); border: var(--liniya-w) solid var(--liniya); border-left: var(--liniya-aktiv-w) solid var(--signal); background: var(--fon-2); }

/* -- таблица --------------------------------------------------------------- */
.tbl { width: 100%; font-variant-numeric: tabular-nums lining-nums; }
.tbl caption { text-align: left; font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); padding-bottom: var(--s12); }
.tbl th, .tbl td { text-align: left; padding: var(--s12) var(--s12); vertical-align: top; font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); line-height: var(--i-mono); letter-spacing: var(--r-mono); }
.tbl th:first-child, .tbl td:first-child { text-align: left; padding-left: 0; }
.tbl th:last-child, .tbl td:last-child { padding-right: 0; }
.tbl thead th { color: var(--tekst-3); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; border-bottom: var(--liniya-w) solid var(--tekst-3); white-space: nowrap; }
.tbl tbody th { font-weight: 700; color: var(--tekst); }
.tbl tbody td { color: var(--tekst); }
.tbl .txt { font-family: var(--f-tekst); letter-spacing: 0; font-size: var(--k-melkij); line-height: var(--i-melkij); text-align: left; text-transform: none; min-width: 16ch; }
.tbl tbody tr:nth-child(4n+1), .tbl tbody tr:nth-child(4n+2) { background: var(--fon-2); }
.tbl tbody tr:hover, .tbl tbody tr:focus-within { background: var(--vydelenie); box-shadow: inset var(--liniya-aktiv-w) 0 0 var(--signal); }
.tbl-wrap { max-width: 100%; overflow-x: auto; } /* страховка для широких реестров в узкой колонке (правовые страницы) */
/* Телефон: таблица становится сеткой пар «подпись — значение», подпись
   лежит в строке настоящим текстом (data-p из шапки ставит сборка) */
@media (max-width: 699px) {
  .tbl--adaptiv thead { position: absolute; width: 1px; height: 1px; overflow: clip; clip: rect(0 0 0 0); }
  .tbl--adaptiv, .tbl--adaptiv tbody, .tbl--adaptiv tr { display: block; }
  .tbl--adaptiv tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s4) var(--s16); padding-block: var(--s12); border-bottom: var(--liniya-w) solid var(--liniya); }
  .tbl--adaptiv tr:hover, .tbl--adaptiv tr:focus-within { box-shadow: none; }
  .tbl--adaptiv th, .tbl--adaptiv td { display: contents; }
  .tbl--adaptiv th:first-child { display: block; grid-column: 1 / -1; padding: 0; text-align: left; }
  .tbl--adaptiv td .p { display: block; font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); text-align: left; }
  .tbl--adaptiv td .z { display: block; text-align: left; }
}
@media (min-width: 700px) {
  .tbl--adaptiv td .p { position: absolute; width: 1px; height: 1px; overflow: clip; clip: rect(0 0 0 0); }
}
.snoska { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-3); max-width: var(--mera-lid); }
.snoska + .snoska { margin-top: var(--s8); }

/* Спецификация без линеек: подпись слева, значение справа */
.spec-list { display: grid; gap: var(--s8) var(--s24); grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.spec-list dt { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); }
.spec-list dd { text-align: right; font-family: var(--f-mono); font-size: var(--k-mono); font-variant-numeric: tabular-nums; }

/* -- плитка категории ------------------------------------------------------ */
.kat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--liniya-w); background: var(--liniya); border: var(--liniya-w) solid var(--liniya); }
@media (min-width: 700px) { .kat { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kat__p { display: grid; grid-template-rows: auto auto auto 1fr auto; row-gap: var(--s16); padding: var(--s24); background: var(--fon); color: var(--tekst); text-decoration: none; min-width: 0; transition: background-color var(--t-bystro) var(--krivaya); }
@supports (grid-template-rows: subgrid) { .kat { grid-auto-rows: auto; } .kat__p { grid-row: span 5; grid-template-rows: subgrid; } }
.kat__p:hover { background: var(--fon-2); color: var(--tekst); text-decoration: none; }
.kat__p:hover .sech { color: var(--signal); }
.kat__p .sech { width: 96px; height: 96px; color: var(--tekst-2); transition: color var(--t-bystro) var(--krivaya); }
.kat__t { font-family: var(--f-zag); font-weight: 700; font-size: var(--k-zag2); line-height: var(--i-zag2); letter-spacing: var(--r-zag); }
.kat__d { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }
.kat__n { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); align-self: end; }
.sech path, .sech circle, .sech rect, .sech line, .sech polygon { vector-effect: non-scaling-stroke; }

/* -- карточка позиции ------------------------------------------------------ */
.poz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); }
@media (min-width: 700px) { .poz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .poz { grid-template-columns: repeat(3, minmax(0, 1fr)); } .poz--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card { display: grid; grid-template-rows: auto 1fr auto; background: var(--fon-2); border: var(--liniya-w) solid var(--liniya); min-width: 0; }
.card__kadr { aspect-ratio: 4 / 3; overflow: clip; background: var(--fon-2); /* светлая заглушка: рендеры на светлом фоне, чёрный прямоугольник до ленивой загрузки бил по бумаге */ display: grid; place-items: center; color: var(--tekst-2); }
.card__kadr img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-dolgo) var(--krivaya); }
.card:hover .card__kadr img { transform: scale(1.03); }
.card__kadr .sech { width: 96px; height: 96px; }
.card__telo { display: grid; gap: var(--s8); padding: var(--s16) var(--s16) var(--s8); }
.card__data { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-3); overflow-wrap: anywhere; }
.card__t { font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
.card__t a { color: inherit; text-decoration: none; }
.card__t a::after { content: ''; position: absolute; inset: 0; }
.card { position: relative; }
.card__t a:hover { color: var(--signal); }
.card__d { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }
.card__niz { display: flex; gap: var(--s8); padding: var(--s8) var(--s16) var(--s16); position: relative; z-index: 1; }

/* -- гармошка вопросов ----------------------------------------------------- */
.faq { border-top: var(--liniya-w) solid var(--liniya); max-width: var(--mera-tekst); }
.faq details { border-bottom: var(--liniya-w) solid var(--liniya); }
.faq summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--s16); padding-block: var(--s16); font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
/* Реестр вопросов: строка не ниже 96 px, номер моно слева, вопрос капсом,
   плюс справа 32 px. Строка читается как запись реестра, а не как ссылка. */
.faq--nomera { max-width: none; }
.faq--nomera summary { grid-template-columns: auto minmax(0, 1fr) 32px; gap: var(--s24); min-height: 96px; padding-block: var(--s24); font-family: var(--f-displej); font-weight: 700; font-size: var(--k-zag2); line-height: var(--i-zag2); letter-spacing: var(--r-zag1); text-transform: uppercase; }
.faq--nomera .faq__n { color: var(--signal); align-self: center; }
.faq--nomera summary::after { width: 32px; height: 32px; }
.faq--nomera .faq__o { max-width: var(--mera-tekst); padding-left: 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t-sredne) var(--krivaya); }
.faq details[open] summary::after { transform: rotate(135deg); }
.faq summary:hover { color: var(--signal); }
/* Ответ раскрывается плавно (сетка 0fr → 1fr), текст подъезжает следом — как на витрине; без скрипта details работает как есть */
.faq__telo { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--krivaya); }
.faq__telo > .faq__o { overflow: hidden; }
.faq details[open] .faq__telo[data-otkryt] { grid-template-rows: 1fr; }
html:not([data-js]) .faq__telo { grid-template-rows: 1fr; }
.faq__o { padding-bottom: 0; color: var(--tekst-2); max-width: var(--mera-tekst); opacity: 0; transform: translateY(6px); transition: opacity 320ms var(--krivaya) 100ms, transform 320ms var(--krivaya) 100ms; }
.faq__telo[data-otkryt] .faq__o { opacity: 1; transform: none; }
html:not([data-js]) .faq__o { opacity: 1; transform: none; }
.faq__o > div { padding-bottom: var(--s24); }
.faq summary::after { transition: transform 360ms var(--krivaya); }

/* -- полоса фактов: тьма, три-четыре числа --------------------------------- */
.fakty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s24) var(--s16); }
@media (min-width: 700px) { .fakty { grid-template-columns: repeat(var(--fakty-n, 4), minmax(0, 1fr)); gap: 0; } .fakt + .fakt { border-left: var(--liniya-w) solid var(--liniya); padding-left: var(--s24); } }
.fakt { display: grid; gap: var(--s8); align-content: start; min-width: 0; }
.fakt__n { font-family: var(--f-chislo); font-weight: 700; font-size: var(--k-chislo); line-height: var(--i-chislo); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.fakt__n small { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); letter-spacing: var(--r-mono); margin-left: var(--s8); color: var(--tekst-2); }
.fakt__p { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); max-width: 24ch; }

/* -- хлебные крошки -------------------------------------------------------- */
.hleb { display: flex; flex-wrap: wrap; gap: var(--s8); font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-3); }
.hleb li + li::before { content: '/'; margin-right: var(--s8); color: var(--liniya); }
.hleb a { color: var(--tekst-2); text-decoration: none; padding: 14px var(--s8); margin-inline: calc(var(--s8) * -1); }
.hleb a:hover { color: var(--signal); }
.hleb [aria-current] { color: var(--tekst); }

/* -- поиск ----------------------------------------------------------------- */
.poisk { position: relative; max-width: 560px; }
.poisk .pole__i { padding-left: calc(var(--s16) + 28px); }
.poisk svg { position: absolute; left: var(--s16); top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--tekst-3); pointer-events: none; }
.poisk svg circle, .poisk svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.pusto { padding: var(--s32); border: var(--liniya-w) dashed var(--liniya); color: var(--tekst-2); max-width: var(--mera-tekst); }

/* -- бланк документа: показ вида документа, набранный текстом -------------- */
.blank { background: var(--bumaga-3); color: var(--chernila); border: var(--liniya-w) solid var(--liniya-bumagi); padding: var(--s24); position: relative; overflow: clip; min-width: 0; max-width: 100%; font-family: var(--f-mono); font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-mono); }
.blank__zag { font-family: var(--f-zag); font-weight: 700; font-size: var(--k-zag3); letter-spacing: var(--r-zag); text-transform: uppercase; margin-bottom: var(--s16); padding-right: 120px; }
.blank__polya { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8) var(--s16); }
.blank__pole { display: grid; gap: var(--s4); border-bottom: var(--liniya-w) solid var(--liniya-bumagi); padding-bottom: var(--s4); }
.blank__pole span:first-child { color: var(--chernila-3); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; }
.blank__pole span:last-child { color: var(--chernila); }
.blank__tbl { width: 100%; table-layout: fixed; margin-top: var(--s16); border-top: var(--liniya-w) solid var(--chernila-3); }
.blank__tbl th, .blank__tbl td { overflow-wrap: anywhere; }
.blank__polya > * { min-width: 0; }
.blank__pole span { overflow-wrap: anywhere; }
.blank__tbl th, .blank__tbl td { padding: var(--s4) var(--s8) var(--s4) 0; text-align: left; font-size: var(--k-rubrika); border-bottom: var(--liniya-w) solid var(--liniya-bumagi); font-weight: 500; }
.blank__tbl th { color: var(--chernila-3); text-transform: uppercase; letter-spacing: var(--r-rubrika); }
.blank__shtamp { position: absolute; right: var(--s16); top: var(--s12); transform: rotate(-8deg); border: var(--liniya-aktiv-w) solid var(--rzha); color: var(--rzha); padding: var(--s4) var(--s12); font-family: var(--f-zag); font-weight: 700; font-size: var(--k-zag3); text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.9; }

/* -- шаги процесса --------------------------------------------------------- */
.shagi { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s32) var(--s24); counter-reset: shag; }
@media (min-width: 700px) { .shagi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .shagi { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s24); } }
.shag { display: grid; gap: var(--s12); align-content: start; padding-top: var(--s16); border-top: var(--liniya-aktiv-w) solid var(--liniya); counter-increment: shag; min-width: 0; }
.shag__n { font-family: var(--f-chislo); font-weight: 700; font-size: var(--k-chislo); line-height: var(--i-chislo); color: var(--signal-krupno); font-variant-numeric: tabular-nums; }
.shag__n::before { content: '0' counter(shag); }
.shag__t { font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
.shag__d { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }

/* -- список пунктов без карточек ------------------------------------------- */
.punkty { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24) var(--s32); }
@media (min-width: 700px) { .punkty { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .punkty--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .punkty--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.punkt { display: grid; gap: var(--s8); padding-top: var(--s16); border-top: var(--liniya-w) solid var(--liniya); min-width: 0; }
.punkt__n { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); color: var(--signal); }
.punkt__t { font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
.punkt__d { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }

/* -- цитата-факт / врезка -------------------------------------------------- */
.vrezka { border-left: var(--liniya-aktiv-w) solid var(--signal); padding-left: var(--s24); max-width: var(--mera-lid); }

/* -- цели нажатия у строчных ссылок --------------------------------------
   Вертикальный паддинг у строчного элемента не двигает строки, но растит
   область нажатия до 44 px; отрицательный margin гасит паддинг там, где
   ссылка блокифицирована сеткой или флексом (подвал, шапка группы каталога). */
:where(.glav__ssylka, .t-lid, .kalk__dejstviya, .kontakt__v, .foot__line, .forma__prim, .forma__soglasie, .soglasie, .poz-dok__ssylka, .kont-niz) a:not(.btn) { padding-block: var(--s12); margin-block: calc(var(--s12) * -1); }

/* -- боковая шкала разделов (из направления N1) -------------------------------
   Стоит слева по середине экрана, только там, где для неё есть поле
   (≥1320); засечка текущего раздела ставится скриптом по геометрии. */
.shkala { position: fixed; left: var(--s24); top: 50%; transform: translateY(-50%); z-index: 30; display: none; flex-direction: column; gap: 0; }
.shkala a { position: relative; display: flex; align-items: center; gap: var(--s12); min-height: 44px; padding-block: var(--s4); text-decoration: none; font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); color: var(--tekst-3); transition: color var(--t-bystro) var(--krivaya); }
.shkala a::before { content: ''; width: 28px; height: var(--liniya-w); background: var(--liniya); transform: scaleX(0.43); transform-origin: left center; transition: transform var(--t-sredne) var(--krivaya), background-color var(--t-bystro) var(--krivaya); }
.shkala__podpis { position: absolute; left: 100%; top: 50%; transform: translate(var(--s8), -50%); white-space: nowrap; opacity: 0; text-transform: uppercase; color: var(--tekst-2); transition: opacity var(--t-bystro) var(--krivaya), transform var(--t-sredne) var(--krivaya); pointer-events: none; }
.shkala a:hover { color: var(--tekst); }
.shkala a:hover .shkala__podpis { opacity: 1; transform: translate(var(--s12), -50%); }
/* Над светлым листом шкала берёт чернильные роли: признак ставит скрипт по разделу под серединой экрана */
.shkala[data-svetlo] { --tekst: var(--chernila); --tekst-2: var(--chernila-2); --tekst-3: var(--chernila-3); --liniya: var(--liniya-lista); --signal: var(--yantar-glubokij); }
.shkala__podpis { background: var(--fon); padding: var(--s4) var(--s8); border-radius: var(--radius); }
.shkala[data-svetlo] .shkala__podpis { --fon: var(--list-fon); }
.shkala a[data-tut] { color: var(--signal); }
.shkala a[data-tut]::before { transform: scaleX(1); background: var(--signal); }
/* Шкала снята с главной 17.09 (решение владельца); правила оставлены для внутренних страниц, если понадобится */

/* -- «Подробнее»: свёрнутые абзацы прозы ---------------------------------- */
.eshche { margin-top: var(--s16); }
.eshche summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--s8); min-height: 44px; font-weight: 500; color: var(--signal); }
.eshche summary::-webkit-details-marker { display: none; }
.eshche summary::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' stroke='%23000' stroke-width='2' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform var(--t-sredne) var(--krivaya); }
.eshche[open] summary::after { transform: rotate(45deg); }
.eshche summary:hover { color: var(--signal-2); }
.eshche__telo > * + * { margin-top: var(--s16); }
.eshche__telo { margin-top: var(--s8); }

/* -- «В спецификацию»: нажатая кнопка показывает, что позиция уже в списке -- */
.spec-plus[aria-pressed="true"] { background: var(--vydelenie); border-color: var(--signal); color: var(--signal); }
.spec-plus[aria-pressed="true"]:hover { background: var(--vydelenie); }
/* Заливка контурной кнопки на уже нажатой «В спецификации» не идёт: две
   заливки разного смысла делают нажатую неотличимой от ненажатой */
.spec-plus[aria-pressed="true"]::before { display: none; }
/* Строки заголовка под маской SplitText: перенос слов не меняется, маска обрезает только по вертикали */
.stroka { will-change: transform; }

/* ==== 03-karkas.css ==== */
/* ============================================================================
   TAMINOTA STEEL · КАРКАС: шапка, меню телефона, подвал, диалог запроса,
   поднос спецификации, полоса согласия. Всё, что стоит на каждой странице.
   ========================================================================== */

/* -- шапка ----------------------------------------------------------------- */
/* Три зоны: лок-ап · разделы по центру · действия. Средняя колонка тянется,
   поэтому разделы стоят по середине полосы, а не прижимаются к лок-апу
   (композиция шапки витрины, Chrome.tsx). */
.nav { position: sticky; top: 0; z-index: 40; height: var(--shapka-h); background: color-mix(in srgb, var(--tma) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: var(--liniya-w) solid var(--liniya-tmy); }
.nav__in { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--s24); }
.lokap { display: inline-flex; align-items: center; gap: var(--s12); min-height: 44px; color: var(--tekst); text-decoration: none; flex: none; }
.lokap:hover { color: var(--tekst); text-decoration: none; }
.lokap__znak { width: 32px; height: 32px; flex: none; }
.lokap__slovo { font-family: var(--f-brend); font-weight: 400; font-size: 13px; line-height: 1; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; }
.lokap__slovo b { font-weight: 400; color: var(--zhar); }
.nav__links { display: none; }
.nav__right { display: flex; align-items: center; justify-content: flex-end; gap: var(--s12); grid-column: 3; }
.nav__cta { display: none; }
.yaz { display: flex; gap: var(--s4); }
/* Полупрозрачная шапка над бумагой даёт фон ≈ #2E2B29: tekst-3 на нём 4,0 — мало для 11 px, поэтому tekst-2 */
.yaz a { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius); font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-2); text-decoration: none; }
.yaz a:hover { color: var(--tekst); background: var(--fon-2); }
.yaz a[aria-current] { color: var(--tekst); background: var(--fon-3); }
.nav__burger { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--tekst); border-radius: var(--radius); }
.nav__burger svg { width: 24px; height: 24px; }
.nav__burger svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
/* Порог полной шапки — 1140, не 1024: на 1024–1100 четыре пункта, настройки и
   кнопка не помещались (приёмка 17.09: правый край уезжал на 12–76 px по
   языкам). До порога живёт бургер. */
@media (min-width: 1140px) {
  .nav__links { display: flex; justify-content: center; gap: var(--s4); grid-column: 2; }
  /* Разделы капсом узкой гарнитурой, как подписи кнопок: шапка и действия
     набраны одним голосом. Наведение — линией снизу, как на витрине, без
     серой подложки; текущий раздел держит линию постоянно. */
  .nav__links a { position: relative; display: inline-flex; align-items: center; height: 44px; padding-inline: var(--s12); color: var(--tekst-2); text-decoration: none; font-family: var(--f-displej); font-weight: 700; font-size: var(--k-tekst); letter-spacing: var(--r-btn); text-transform: uppercase; white-space: nowrap; transition: color var(--t-bystro) var(--krivaya); }
  .nav__links a::after { content: ''; position: absolute; left: var(--s12); right: var(--s12); bottom: 6px; height: var(--liniya-aktiv-w); background: var(--zhar); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-sredne) var(--krivaya); }
  .nav__links a:hover { color: var(--tekst); }
  .nav__links a:hover::after, .nav__links a[aria-current]::after { transform: scaleX(1); }
  .nav__links a[aria-current] { color: var(--tekst); }
  .nav__cta { display: inline-flex; }
  .nav__burger { display: none; }
}

/* -- меню телефона --------------------------------------------------------- */
.menu { position: fixed; inset: var(--shapka-h) 0 0 0; z-index: 39; overflow: auto; padding: var(--s32) var(--polya) var(--s48); display: grid; align-content: start; gap: var(--s32); }
.menu__links { display: grid; gap: var(--s4); }
.menu__links a { display: block; padding-block: var(--s12); font-family: var(--f-displej); font-weight: 700; text-transform: uppercase; font-size: var(--k-zag1); line-height: var(--i-zag1); letter-spacing: var(--r-zag); color: var(--tekst); text-decoration: none; border-bottom: var(--liniya-w) solid var(--liniya); }
.menu__links a:hover { color: var(--zhar); }
.menu__niz { display: grid; gap: var(--s16); justify-items: start; }
.menu__yaz { display: flex; align-items: center; gap: var(--s12); }
body[data-menu='open'] { overflow: hidden; }
/* Открытое меню телефона не накрывается полосой согласия и подносом */
body[data-menu='open'] .soglasie, body[data-menu='open'] .podnos { display: none; }

/* -- подвал ---------------------------------------------------------------- */
.foot { padding-block: var(--s64) var(--s32); border-top: var(--liniya-w) solid var(--liniya-tmy); }
.foot__in { display: grid; gap: var(--s48); }
.foot__top { display: grid; gap: var(--s48); }
@media (min-width: 1024px) { .foot__top { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s64); } }
.foot__brand { display: grid; gap: var(--s24); align-content: start; max-width: 46ch; }
/* Лок-ап в сетке колонки растянулся бы на всю её ширину, и ссылка на главную
   собирала бы нажатия рядом со знаком (та же беда, что разобрана на витрине). */
.foot__brand > .lokap { justify-self: start; }
.foot__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--s24); }
@media (min-width: 700px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot__col { display: grid; gap: 0; align-content: start; }
/* Кегль ссылок подвала — текстовый (17/28), а не мелкий: подвал читают так же,
   как страницу, и мелкий набор владелец 17.09 забраковал по всему сайту */
.foot__col a, .foot__mesto { color: var(--tekst-2); text-decoration: none; font-size: var(--k-tekst); line-height: 28px; padding-block: var(--s8); }
.foot__col a:hover { color: var(--tekst); }
.foot__mesto { color: var(--tekst-3); }
.foot__cap { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); margin-bottom: var(--s8); }
.foot__line { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s24); justify-content: space-between; padding-top: var(--s24); border-top: var(--liniya-w) solid var(--liniya-tmy); font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); color: var(--tekst-3); }
.foot__line a { color: var(--tekst-3); text-decoration: none; }
.foot__line a:hover { color: var(--tekst); }
.foot__pravo { display: flex; flex-wrap: wrap; gap: var(--s8) var(--s16); }
.foot__pravo a { padding-inline: var(--s8); margin-inline: calc(var(--s8) * -1); }
.soc { display: flex; gap: var(--s8); }
.soc a { display: inline-grid; place-items: center; width: 44px; height: 44px; border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); color: var(--tekst-2); }
.soc a:hover { color: var(--tekst); border-color: var(--tekst-3); }
.soc svg { width: 20px; height: 20px; fill: currentColor; }

/* -- диалог запроса -------------------------------------------------------- */
.dialog { border: 0; padding: 0; max-width: min(100vw, 880px); width: 100%; background: var(--fon); color: var(--tekst); }
.dialog::backdrop { background: color-mix(in srgb, var(--tma) 72%, transparent); }
.dialog__in { padding: var(--s24); display: grid; gap: var(--s24); }
@media (min-width: 700px) { .dialog__in { padding: var(--s48); } }
.dialog__head { display: flex; justify-content: space-between; gap: var(--s24); align-items: start; }
.dialog__x { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--tekst-2); flex: none; border-radius: var(--radius); }
.dialog__x:hover { color: var(--tekst); background: var(--fon-2); }
.dialog__x svg { width: 16px; height: 16px; }
.dialog__x svg path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* -- поднос спецификации --------------------------------------------------- */
.podnos { position: sticky; bottom: 0; z-index: 30; border-top: var(--liniya-w) solid var(--liniya-tmy); }
.podnos[hidden] { display: none; }
.podnos__in { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s12) var(--s24); padding-block: var(--s12); }
.podnos__itog { font-family: var(--f-mono); font-size: var(--k-mono); letter-spacing: var(--r-mono); color: var(--tekst-2); font-variant-numeric: tabular-nums; }
.podnos__itog b { color: var(--tekst); font-weight: 700; }
.podnos__knopki { margin-left: auto; display: flex; gap: var(--s8); }

/* -- полоса согласия на cookie --------------------------------------------- */
.soglasie { position: fixed; left: var(--polya); right: var(--polya); bottom: var(--s16); z-index: 50; max-width: 640px; margin-inline: auto; padding: var(--s16) var(--s24); border: var(--liniya-w) solid var(--liniya-tmy); display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16); font-size: var(--k-melkij); line-height: var(--i-melkij); }
.soglasie p { flex: 1 1 24ch; margin: 0; color: var(--tekst-2); }
.soglasie a { color: var(--tekst); }

/* -- пропуск к содержанию --------------------------------------------------- */
.skip { position: absolute; left: var(--s16); top: -100px; z-index: 60; padding: var(--s12) var(--s16); background: var(--zhar); color: var(--na-zhare); text-decoration: none; border-radius: var(--radius); }
.skip:focus { top: var(--s16); }

/* -- страница-заголовок (внутренние страницы без сцены) --------------------
   Обложка без кадра: тот же контракт, что у сцены, — на весь экран, набор
   внизу. Раскладка внутренностей — в 01-baza.css (.stranica-head__in). */
.stranica-head { padding-block: var(--s96) var(--s48); }
@media (min-width: 1024px) { .stranica-head { padding-block: var(--s128) var(--s64); } }
.stranica-head .t-lid { margin-top: var(--s8); }

/* -- телефон: шапка и подвал ----------------------------------------------
   На узком экране в шапке остаются лок-ап и бургер; язык, звук, телефон и
   спецификация живут в меню. Иначе полоса выходила за кромку (замер
   17.09.2026 на 375: nav__right уезжал вправо). */
@media (max-width: 699px) {
  .nav__right { gap: var(--s8); }
  .nav__right > .yaz { display: none; }
  .lokap__slovo { font-size: 17px; }
  .foot__cols { grid-template-columns: minmax(0, 1fr); }
  .foot__in > *, .foot__top > *, .foot__cols > * { min-width: 0; }
}

/* -- переключатель звука (перенос с витрины) ----------------------------------
   Только там, где звук есть: от 700. Знак — размерная линия в три штриха;
   при выключенном звуке крайние штрихи гаснут. */
/* Кнопка звука: в режиме бургера (700–1139) и от 1200; на 1140–1199 полной шапке не хватает 60 px */
.zvuk { display: none; }
@media (min-width: 700px) and (max-width: 1139px), (min-width: 1200px) {
  .zvuk { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--tekst-2); border-radius: var(--radius); }
  .zvuk:hover { color: var(--tekst); background: var(--fon-2); }
  .zvuk svg { width: 24px; height: 24px; }
  .zvuk line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: opacity var(--t-bystro) var(--krivaya); }
  .zvuk:not([aria-pressed="true"]) line:not(:nth-child(2)) { opacity: 0.25; }
  .zvuk[aria-pressed="true"] { color: var(--signal); }
}

/* -- полог смены языка (перенос с витрины) --------------------------------------
   Лежит поверх страницы, у него есть край — янтарная линия снизу. Полоса
   идёт линейно: это индикатор, а не объект. */
.polog { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: var(--grafit-2); box-shadow: inset 0 calc(var(--liniya-aktiv-w) * -1) 0 var(--signal); transform: translateY(-100%); transition: transform 240ms var(--krivaya); }
.polog[data-faza='vhodit'], .polog[data-faza='zhdyot'] { transform: translateY(0); }
.polog[data-faza='zhdyot'] { transition: none; }
.polog[data-faza='uhodit'] { transform: translateY(-100%); transition-duration: 560ms; }
.polog__b { display: grid; justify-items: center; gap: var(--s16); color: var(--tekst); }
.polog__svg { width: 88px; height: 88px; }
.polog__polosa { display: block; width: 168px; height: var(--liniya-aktiv-w); background: var(--liniya); overflow: clip; }
.polog__polosa > i { display: block; height: 100%; width: 100%; background: var(--signal); transform: scaleX(0); transform-origin: left center; }
.polog[data-faza='vhodit'] .polog__polosa > i, .polog[data-faza='uhodit'] .polog__polosa > i { animation: polog-polosa 860ms linear forwards; }
.polog[data-faza='zhdyot'] .polog__polosa > i { animation: polog-polosa 600ms linear forwards; }
@keyframes polog-polosa { to { transform: scaleX(1); } }
.polog__yaz { opacity: 0; animation: polog-imya 240ms var(--krivaya) 160ms forwards; color: var(--tekst-2); }
@keyframes polog-imya { to { opacity: 1; } }

/* -- настройки в шапке: язык и звук одной панелью (как входной экран витрины) -- */
.nastr { position: relative; }
.nastr__knopka { list-style: none; cursor: pointer; display: inline-grid; place-items: center; width: 44px; height: 44px; position: relative; border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); color: var(--tekst-2); font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; transition: color var(--t-bystro) var(--krivaya), border-color var(--t-bystro) var(--krivaya); }
.nastr__knopka::-webkit-details-marker { display: none; }
/* Значок настроек — три размерные линии с бегунками, как шкала уровня: не метафора-шестерёнка */
.nastr__znak { width: 22px; height: 22px; }
.nastr__znak line { stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.nastr__znak circle { fill: var(--fon); stroke: currentColor; stroke-width: 2; }
.nastr__knopka:hover, .nastr[open] .nastr__knopka { color: var(--tekst); border-color: var(--tekst-3); }
.nastr__tochka { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: transparent; }
.nastr__tochka[data-vkl] { background: var(--signal); }
.nastr__panel { position: absolute; right: 0; top: calc(100% + var(--s8)); z-index: 45; width: 300px; display: grid; gap: var(--s12); padding: var(--s16); background: var(--fon-2); border: var(--liniya-w) solid var(--liniya); }
.nastr__ryad { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--s12); min-height: 44px; }
.nastr__ryad > .t-rubrika { color: var(--tekst-3); }
.nastr .yaz { display: inline-flex; gap: 0; border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); overflow: clip; }
.nastr .yaz a { width: 56px; height: 42px; border: 0; border-radius: 0; background: transparent; }
.nastr .yaz a + a { border-left: var(--liniya-w) solid var(--liniya); }
.nastr .yaz a[aria-current] { background: var(--fon-3); color: var(--tekst); }
.nastr .seg button { min-width: 56px; height: 42px; }
@media (prefers-reduced-motion: no-preference) { .nastr[open] .nastr__panel { animation: nastr-vhod 200ms var(--krivaya) both; } }
@keyframes nastr-vhod { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.seg { display: inline-flex; border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); overflow: clip; }
.seg button { min-width: 64px; height: 40px; padding-inline: var(--s12); font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-2); transition: background-color var(--t-bystro) var(--krivaya), color var(--t-bystro) var(--krivaya); }
.seg button + button { border-left: var(--liniya-w) solid var(--liniya); }
.seg button:hover { color: var(--tekst); }
.seg button[aria-pressed="true"] { background: var(--fon-3); color: var(--tekst); }
@media (max-width: 699px) { .nastr__ryad--zvuk { display: none; } .nav__right > .nastr { display: none; } }

/* -- подвал на весь экран: поле знака, колонки, слово (перенос композиции витрины) -- */
.foot { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; min-height: 100dvh; padding-block: var(--list-y) var(--s32); overflow: clip; }
.foot__in { position: relative; z-index: 1; display: grid; gap: var(--s64); flex: 1 1 auto; }
/* Поле знака стоит на весь подвал и центрируется в нём — как на витрине
   (VITRINA .foot__field: inset 0, place-items center, svg min(52%, 620px)).
   Раньше слой стоял нижними 62 % подвала, а координаты указателя считались
   от всего подвала: пятно уезжало от курсора на 38 % высоты вниз. Слой и
   система координат теперь одна и та же коробка, и пятно стоит под пальцем. */
.foot__pole { position: absolute; inset: 0; z-index: 0; display: grid; place-items: center; pointer-events: none; color: var(--signal); opacity: 0.07; }
.foot__pole svg { width: min(52%, 620px); height: auto; }
.foot__pole--svet { opacity: 0; -webkit-mask-image: radial-gradient(280px at var(--mx, -1000px) var(--my, -1000px), #000 0%, rgba(0,0,0,0.35) 45%, transparent 72%); mask-image: radial-gradient(280px at var(--mx, -1000px) var(--my, -1000px), #000 0%, rgba(0,0,0,0.35) 45%, transparent 72%); transition: opacity var(--t-sredne) var(--krivaya); }
.foot__pole--svet[data-zhivo] { opacity: 0.45; }
/* Лок-ап подвала стоит слева над текстом принадлежности, а не по центру над
   словом: колонка бренда читается сверху вниз одной вертикалью. */
.lokap--podval { gap: var(--s16); }
.lokap--podval .lokap__znak { width: 40px; height: 40px; }
.lokap--podval .lokap__slovo { font-size: var(--k-tekst); letter-spacing: 0.16em; }
/* Слово внутри полосы содержания, а не от кромки окна: ширина равна ширине
   .shell, поэтому кегль считается от неё же — min(100vw, --shirina) минус два
   поля. Делитель — мера строки «TAMINOTA STEEL» в Unbounded 400 при трекинге
   0,02em, замеренная в браузере (ширина строки = кегль × 10,76). Меняется
   гарнитура, начертание, трекинг или само слово — мера пересчитывается тем же
   замером, на глаз она не подбирается. */
.foot__slovo { position: relative; z-index: 1; margin-top: auto; padding-block: var(--s48) var(--s24); }
.foot__word { display: block; width: 100%; font-family: var(--f-brend); font-weight: 400; font-size: min(calc((min(100vw, var(--shirina)) - var(--polya) * 2) / 10.76), 12rem); line-height: 0.92; letter-spacing: 0.02em; color: var(--tekst); text-transform: uppercase; user-select: none; white-space: nowrap; overflow: clip; }
@media (max-width: 699px) { .foot { min-height: auto; } .foot__slovo { padding-block: var(--s32) var(--s16); } }

/* ==== 10-glavnaya.css ==== */
/* ============================================================================
   TAMINOTA STEEL · ГЛАВНАЯ (редакция 3): обложка с поиском, каталог
   фотографиями, поставка на закреплённом кадре, подбор в три шага, вопросы,
   знания, связь. Выход из каждого блока — крупная кнопка (.list__vyhod).
   ========================================================================== */

/* -- обложка --------------------------------------------------------------- */
.scena--glav { align-items: end; min-height: calc(100dvh - var(--shapka-h)); }
.scena--glav .scena__telo { padding-bottom: var(--s48); }
/* Обложка главной стоит по общему контракту (.stranica-head__in в 01-baza):
   слева рубрика → заголовок → лид → поиск, справа внизу три утверждения
   моно с янтарной точкой. Числа ушли в блок «В цифрах». */
.oblozhka { gap: var(--s32); }
.oblozhka__l { gap: var(--s16); }
.oblozhka__nad { margin-bottom: var(--s4); }
.oblozhka__zag { max-width: 16ch; color: var(--tekst); }
.oblozhka__lid { color: var(--tekst-2); max-width: 46ch; }
.oblozhka__dejstviya { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s8); align-items: center; }
.oblozhka__poisk { display: flex; flex: 1 1 360px; max-width: 560px; gap: var(--s8); }
/* Поле поиска — рост крупной кнопки и кегль третьего заголовка: это главное действие первого экрана */
.oblozhka__poisk .pole__i { flex: 1 1 auto; height: var(--pole-h-lg); font-size: var(--k-zag3); }
.oblozhka__poisk .btn { flex: none; }
.oblozhka__tochki li { color: var(--tekst); }
/* Левая колонка обложки главной шире общей (8/4, а не 7/5): заголовок первого
   экрана длинный, и на 7/12 он уходил в пять строк и выталкивал поиск за
   кромку экрана (замер 1440×900). */
@media (min-width: 1024px) { .oblozhka { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } .oblozhka__zag { max-width: 20ch; } .oblozhka__tochki { gap: var(--s24); } }

/* Вход обложки: кадр подъезжает, рубрика, лид и действия поднимаются следом;
   заголовок выезжает по строкам (SplitText, 50-dvizhenie.js). */
@media (prefers-reduced-motion: no-preference) {
  html[data-js]:not([data-legko]) .scena--glav .scena__kadr img { animation: oblozhka-vhod 1800ms var(--krivaya) both; }
  html[data-js]:not([data-legko]) .oblozhka__l > *, html[data-js]:not([data-legko]) .oblozhka__tochki { animation: oblozhka-nabor 720ms var(--krivaya) both; }
  html[data-js]:not([data-legko]) .oblozhka__zag { animation: none; }
  html[data-js]:not([data-legko]) .oblozhka__lid { animation-delay: 360ms; }
  html[data-js]:not([data-legko]) .oblozhka__dejstviya { animation-delay: 460ms; }
  html[data-js]:not([data-legko]) .oblozhka__tochki { animation-delay: 560ms; }
}
@keyframes oblozhka-vhod { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes oblozhka-nabor { from { opacity: 0; transform: translateY(var(--sdvig)); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: view()) {
  html[data-js]:not([data-legko]) .scena--glav.scena--zhivaya .scena__kadr img { animation: oblozhka-vhod 1800ms var(--krivaya) both; }
}

/* -- выход из блока: крупная кнопка, а не строчная ссылка --------------------- */
.list__vyhod { margin-top: var(--s48); display: flex; flex-wrap: wrap; gap: var(--s12); }
@media (min-width: 1024px) { .list__vyhod { margin-top: var(--s64); } }

/* -- в цифрах: четыре числа во всю ширину на кадре ------------------------------
   Первое после обложки — масштаб, а не абзац: число набирается счётчиком,
   под ним рубрика и одна фраза. Кадр держит блок от пустого графита, вуаль
   глухая (90 %), чтобы числа читались поверх рулонов. */
.cifry { min-height: calc(100dvh - var(--shapka-h)); }
.cifry .scena__vual { background: color-mix(in srgb, var(--tma) 90%, transparent); }
.cifry .scena__telo { display: grid; align-content: center; gap: var(--s48); width: 100%; }
.cifry__golova { margin-bottom: 0; }
.cifry__ryad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--mezhkolonnik); }
@media (min-width: 1024px) { .cifry__ryad { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s32); } }
.cifra { display: grid; gap: var(--s8); align-content: start; min-width: 0; padding-top: var(--s16); border-top: var(--liniya-aktiv-w) solid var(--liniya); }
.cifra__n { font-size: var(--k-cifry); line-height: var(--i-cifry); color: var(--tekst); }
.cifra__n small { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); letter-spacing: var(--r-mono); margin-left: var(--s8); color: var(--tekst-2); }
.cifra__p { color: var(--signal); }
.cifra__f { max-width: 32ch; }

/* -- каталог решёткой без зазоров ----------------------------------------------
   Ячейки сомкнуты и разделены линиями: решётка читается как один каталог, а
   не как восемь отдельных карточек (разбор владельца 17.09). 2 × 4 до 1024,
   4 × 2 выше. Ячейка целиком ссылка. */
.foto-setka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--liniya-w); background: var(--liniya); border: var(--liniya-w) solid var(--liniya); }
@media (min-width: 1024px) { .foto-setka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.foto-plitka { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: clip; background: var(--fon); color: var(--tekst); text-decoration: none; transition: background-color var(--t-bystro) var(--krivaya); }
.foto-plitka__kadr { aspect-ratio: 4 / 3; overflow: clip; background: var(--fon-2); }
.foto-plitka__kadr img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-dolgo) var(--krivaya); }
.foto-plitka:hover .foto-plitka__kadr img { transform: scale(1.04); }
.foto-plitka__telo { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: var(--s4) var(--s12); padding: var(--s16); }
.foto-plitka__t { min-width: 0; }
.foto-plitka__n { color: var(--tekst-3); white-space: nowrap; }
.foto-plitka__strelka { width: 20px; height: 20px; color: var(--signal); opacity: 0; transform: translateX(-8px); transition: opacity var(--t-bystro) var(--krivaya), transform var(--t-sredne) var(--krivaya); }
.foto-plitka__strelka svg { width: 20px; height: 20px; }
.foto-plitka__strelka path { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foto-plitka:hover .foto-plitka__strelka, .foto-plitka:focus-visible .foto-plitka__strelka { opacity: 1; transform: none; }
.foto-plitka::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--liniya-aktiv-w); background: var(--signal); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-sredne) var(--krivaya); }
.foto-plitka:hover::after, .foto-plitka:focus-visible::after { transform: scaleX(1); }
.foto-plitka:hover { color: var(--tekst); text-decoration: none; background: var(--fon-2); }
@media (min-width: 700px) { .foto-plitka__telo { padding: var(--s24); } }
/* На телефоне стрелки нет (наведения нет), а число встаёт под именем: в две
   колонки имя и число в одной строке сжимали друг друга (замер 390) */
@media (max-width: 699px) { .foto-plitka__telo { grid-template-columns: minmax(0, 1fr); } .foto-plitka__strelka { display: none; } }

/* -- поставка: закреплённая сцена на весь экран --------------------------------
   Обычная раскладка (телефон, лёгкая версия, страница без скрипта) — список
   из пяти сцен: кадр шага, вуаль снизу, номер и текст поверх. На настольном
   экране со скриптом этот же список становится закреплённой сценой: дорога
   (.postavka__doroga) высотой 500vh проходит под экраном, шаги перекрёстно
   гаснут, шкала внизу заливается по прогрессу (00-osnova.js). */
.postavka { padding-block: var(--polosa-y) 0; }
.postavka__shag { position: relative; isolation: isolate; display: grid; align-items: end; min-height: 72dvh; }
.postavka__kadr { position: absolute; inset: 0; z-index: 0; overflow: clip; background: var(--fon-2); }
.postavka__kadr img { width: 100%; height: 100%; object-fit: cover; }
.postavka__vual { position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, color-mix(in srgb, var(--tma) 94%, transparent) 0%, color-mix(in srgb, var(--tma) 80%, transparent) 46%, color-mix(in srgb, var(--tma) 28%, transparent) 78%, transparent 100%); }
.postavka__tekst { position: relative; z-index: 2; display: grid; justify-items: start; gap: var(--s12); padding-block: var(--s64) var(--s48); align-self: end; }
.postavka__n { color: var(--signal); line-height: 1; }
.postavka__tekst .t-zag1 { max-width: 16ch; }
.postavka__d { max-width: 52ch; }
/* Шкала живёт только в закреплённой сцене: в списке шагов прогресса нет */
.postavka__shkala { display: none; }
/* Пустой сегмент на кадре — светлая линия, а не графитовая: на фотографии графит не виден */
.postavka__seg { display: block; height: var(--liniya-aktiv-w); background: color-mix(in srgb, var(--tekst) 28%, transparent); overflow: clip; }
.postavka__seg i { display: block; height: 100%; background: var(--signal); transform: scaleX(var(--zapolneno, 0)); transform-origin: left center; }
@media (min-width: 1024px) {
  html[data-js]:not([data-legko]) .postavka__doroga { height: 500vh; }
  html[data-js]:not([data-legko]) .postavka__ekran { position: sticky; top: var(--shapka-h); height: calc(100dvh - var(--shapka-h)); overflow: clip; }
  html[data-js]:not([data-legko]) .postavka__shagi { position: absolute; inset: 0; }
  html[data-js]:not([data-legko]) .postavka__shag { position: absolute; inset: 0; min-height: 0; opacity: 0; transition: opacity var(--t-dolgo) var(--krivaya); }
  html[data-js]:not([data-legko]) .postavka__shag[data-tut] { opacity: 1; }
  html[data-js]:not([data-legko]) .postavka__tekst { padding-block: var(--s64) var(--s128); }
  html[data-js]:not([data-legko]) .postavka__shkala { display: grid; position: absolute; left: 0; right: 0; bottom: var(--s48); z-index: 3; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s8); }
}

/* -- подбор: кадр слева, светлый лист с вопросом справа -------------------------
   Ничего серого: лист светлый, заголовок вопроса чёрный, акценты янтарь.
   Сверху три сегмента — где мы в подборе; пройденные янтарные. Кадр слева
   меняется на кадр выбранной категории (60-podbor.js). */
.opros { min-height: calc(100dvh - var(--shapka-h)); display: grid; align-content: center; }
.opros__telo { display: grid; gap: 0; border: var(--liniya-w) solid var(--liniya); }
@media (min-width: 1024px) { .opros__telo { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; } }
.opros__kadry { position: relative; overflow: clip; background: var(--fon-2); aspect-ratio: 16 / 9; }
@media (min-width: 1024px) { .opros__kadry { aspect-ratio: auto; } }
.opros__kadr { position: absolute; inset: 0; opacity: 0; transition: opacity var(--t-dolgo) var(--krivaya); }
.opros__kadr[data-tut] { opacity: 1; }
.opros__kadr img { width: 100%; height: 100%; object-fit: cover; }
.opros__list { display: grid; gap: var(--s24); align-content: start; padding: var(--s24); }
.opros__segmenty { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--s8); }
.opros__seg { display: grid; gap: var(--s4); align-content: start; min-width: 0; padding-top: var(--s12); border-top: var(--liniya-aktiv-w) solid var(--liniya); color: var(--tekst-3); }
.opros__seg[data-tut] { border-top-color: var(--signal); color: var(--tekst); }
.opros__seg[data-proyden] { border-top-color: var(--signal); color: var(--tekst-2); cursor: pointer; }
.opros__seg[data-tut] .opros__num, .opros__seg[data-proyden] .opros__num { color: var(--signal); }
.opros__seg-t { font-family: var(--f-displej); font-weight: 700; font-size: var(--k-zag3); line-height: var(--i-zag3); letter-spacing: var(--r-zag1); text-transform: uppercase; }
.opros__otvet { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); color: var(--tekst); overflow-wrap: anywhere; }
.opros__otvet:empty { display: none; }
.opros__ekran { display: grid; gap: var(--s24); align-content: start; }
.opros__nad { color: var(--signal); }
.opros__niz, .opros__knopki { display: flex; flex-wrap: wrap; gap: var(--s12); }
.forma--opros { grid-template-columns: minmax(0, 1fr); }
.forma--opros .pole--wide { grid-column: 1 / -1; display: grid; gap: var(--s8); }
.chipy { display: flex; flex-wrap: wrap; gap: var(--s8); }
/* Чип — тот же рост и голос, что у кнопки: выбор нажимается пальцем и читается капсом */
.chip { display: inline-flex; align-items: center; min-height: var(--knopka-h); padding-inline: var(--s16); border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); background: var(--fon); color: var(--tekst); font-family: var(--f-displej); font-weight: 700; font-size: var(--k-btn); line-height: 1; letter-spacing: var(--r-btn); text-transform: uppercase; transition: border-color var(--t-bystro) var(--krivaya), background-color var(--t-bystro) var(--krivaya), color var(--t-bystro) var(--krivaya); }
.chip:hover, .chip[aria-pressed="true"] { background: var(--knopka-fon); border-color: var(--knopka-fon); color: var(--knopka-tekst); }
.chip--tihij { color: var(--tekst-2); }
@media (min-width: 700px) { .opros__list { padding: var(--s32); } .forma--opros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .opros__list { padding: var(--s48); }
  .forma--opros { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* -- вопросы: заголовок слева закреплён, реестр справа ------------------------ */
.voprosy-blok { min-height: calc(100dvh - var(--shapka-h)); display: grid; align-content: center; }
.voprosy { display: grid; gap: var(--s32); }
.voprosy__l { display: grid; gap: var(--s16); align-content: start; }
@media (min-width: 1024px) {
  .voprosy { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--s64); align-items: start; }
  .voprosy__l { position: sticky; top: calc(var(--shapka-h) + var(--s48)); }
}

/* -- знания: три статьи решёткой с кадрами ------------------------------------ */
.znaniya-blok { padding-block: var(--list-y); }
.st-tri { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--liniya-w); background: var(--liniya); border: var(--liniya-w) solid var(--liniya); }
@media (min-width: 700px) { .st-tri { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-kart { position: relative; display: grid; grid-template-rows: auto 1fr; overflow: clip; background: var(--fon); color: var(--tekst); text-decoration: none; transition: background-color var(--t-bystro) var(--krivaya); }
.st-kart__kadr { aspect-ratio: 3 / 2; overflow: clip; background: var(--fon-2); }
.st-kart__kadr img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-dolgo) var(--krivaya); }
.st-kart:hover .st-kart__kadr img { transform: scale(1.04); }
.st-kart__telo { display: grid; gap: var(--s12); align-content: start; padding: var(--s24); }
.st-kart::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--liniya-aktiv-w); background: var(--signal); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-sredne) var(--krivaya); }
.st-kart:hover::after, .st-kart:focus-visible::after { transform: scaleX(1); }
.st-kart:hover { background: var(--fon-2); color: var(--tekst); text-decoration: none; }

/* -- связь: контакты крупно слева, обратный звонок справа --------------------- */
.svyaz-blok { min-height: calc(100dvh - var(--shapka-h)); display: grid; align-content: center; }
.svyaz-blok__in { display: grid; gap: var(--s48); }
@media (min-width: 1024px) { .svyaz-blok__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s64); align-items: start; } }
.svyaz-blok__l { display: grid; gap: var(--s24); align-content: start; min-width: 0; }
/* Телефон крупной цифрой. Кегль — своя ступень (--k-telefon), а не общая
   цифровая: строка в семнадцать знаков мерится шириной колонки, и на 1024
   общая ступень 88 уже не вставала (замер: ширина строки ≈ кегль × 6,4). */
.svyaz__tel { display: block; font-family: var(--f-chislo); font-size: var(--k-telefon); line-height: var(--i-telefon); color: var(--tekst); text-decoration: none; transition: color var(--t-bystro) var(--krivaya); }
.svyaz__tel:hover { color: var(--signal); text-decoration: none; }
.svyaz__stroki { display: grid; gap: var(--s8); justify-items: start; }
/* Поле нажатия строки связи не ниже 44: на телефоне моно-строка даёт 28 */
.svyaz__z { display: inline-block; font-size: var(--k-zag2); line-height: var(--i-zag2); padding-block: var(--s8); color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; transition: color var(--t-bystro) var(--krivaya); }
.svyaz__z:hover { color: var(--signal); text-decoration: none; }
.svyaz-blok__r { display: grid; gap: var(--s16); align-content: start; padding: var(--s24); }
@media (min-width: 700px) { .svyaz-blok__r { padding: var(--s32); } }
@media (min-width: 1024px) { .svyaz-blok__r { padding: var(--s48); } }
.forma--zvonok { grid-template-columns: minmax(0, 1fr); gap: var(--s16); margin-top: var(--s8); }

/* -- контакты: четыре ячейки контактов раздельными листами ---------------------
   Страница /kontakty (shablony/stranicy/50-stranicy.mjs, функция kontakty). */
.svyaz { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mezhkolonnik); }
@media (min-width: 700px) { .svyaz { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svyaz__k { display: grid; gap: var(--s8); align-content: start; padding: var(--s24); background: var(--fon-2); color: var(--tekst); text-decoration: none; min-width: 0; transition: background-color var(--t-bystro) var(--krivaya); }
a.svyaz__k:hover { background: var(--fon-3); color: var(--tekst); text-decoration: none; }
a.svyaz__k:hover .svyaz__v { color: var(--signal); }
/* Значение контакта моно: своя ступень (--k-kontakt) — кегль заголовка в
   моноширинной гарнитуре строку «+998 99 011 62 29» из ячейки выносит */
.svyaz__v { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-kontakt); line-height: var(--i-kontakt); letter-spacing: var(--r-mono); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; transition: color var(--t-bystro) var(--krivaya); }
.svyaz__p { color: var(--tekst-2); }
@media (min-width: 700px) { .svyaz__k { padding: var(--s32); } }
.kont-niz { display: grid; gap: var(--s16); margin-top: var(--s48); max-width: var(--mera-tekst); }
.kont-forma { max-width: 640px; }

/* -- документы и стандарты (на «Как работаем») ------------------------------ */
.dok { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s48); }
.dok > * { min-width: 0; }
.dok__blanki { display: grid; gap: var(--s16); align-content: start; }
@media (min-width: 700px) { .dok__blanki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .dok { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--s64); }
  .dok__spisok.punkty { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dok__blanki { grid-template-columns: 1fr; }
  .dok__blanki .blank:nth-child(2) { margin-left: var(--s48); }
}

/* -- каталог на графите: белые рендеры как предметы на тёмном ---------------- */
.katalog-blok { padding-block: var(--list-y); }
/* Рендеры сняты на белом: кадр держит светлую подложку и на графите */
.katalog-blok .foto-plitka__kadr { background: var(--list-fon-3); }

/* -- документы списком: номер узкой цифрой, заголовок, одна фраза ------------ */
.dok-spisok { display: grid; gap: 0; }
.dok-punkt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s8) var(--s24); align-items: start; padding-block: var(--s24); border-top: var(--liniya-w) solid var(--liniya); }
.dok-punkt:last-child { border-bottom: var(--liniya-w) solid var(--liniya); }
.dok-punkt__n { font-size: var(--k-zag1); line-height: 1; min-width: 2.2ch; color: var(--signal-krupno); }
.dok-punkt > div { display: grid; gap: var(--s8); }
.dok-punkt .t-tekst { max-width: 60ch; }
@media (min-width: 1024px) { .dok-spisok { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s64); } .dok-punkt { padding-block: var(--s32); } .dok-punkt__n { font-size: var(--k-chislo); line-height: var(--i-chislo); min-width: 2.4ch; } }

/* -- три пути доставки ------------------------------------------------------- */
.puti { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--liniya-w); background: var(--liniya); border: var(--liniya-w) solid var(--liniya); }
@media (min-width: 900px) { .puti { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.put { display: grid; gap: var(--s16); align-content: start; padding: var(--s32) var(--s24); background: var(--fon); }
@media (min-width: 1024px) { .put { padding: var(--s48) var(--s32); } }

/* ==== 11-katalog.css ==== */
/* ============================================================================
   TAMINOTA STEEL · КАТАЛОГ И КАТЕГОРИЯ: короткая голова, закреплённая панель
   фильтра, решётка позиций без зазоров, карточка позиции, обложка категории,
   описание категории со стандартами. Только токены 00-tokeny.css; поле
   поиска, кнопки и плашки — из 02-komponenty.css.
   ========================================================================== */

/* -- голова каталога -----------------------------------------------------------
   Голова короткая, и поле над ней берётся меньше обычного отступа листа:
   каталог обязан начинаться решёткой, а не пустотой. Полоса головы идёт на
   графите: шапка тёмная и панель фильтра тёмная, светлая голова между ними
   читалась как чужая вставка. Поле полосы — её собственное, поэтому верхний
   отступ листа снят, иначе над тёмной головой встаёт светлый зазор. */
.katalog { padding-top: 0; }
.katalog-golova-fon { padding-block: var(--s48) var(--s32); }
@media (min-width: 1024px) { .katalog-golova-fon { padding-block: var(--s96) var(--s48); } }
.katalog-golova { display: grid; gap: var(--s12); }
.katalog-golova__zag { margin-top: var(--s4); }

/* -- панель фильтра -----------------------------------------------------------
   Полоса фильтров витрины (pages/Katalog.tsx), перенесённая на sticky:
   трансформы ScrollSmoother, из-за которой витрине понадобился pin от
   ScrollTrigger, здесь нет, и закрепление держит обычный sticky от низа
   шапки. Высота взята оттуда же — поле 56 и ряд чипов, вместе около 150.

   Ниже 1024 закрепления нет намеренно: замер витрины на 390 показал, что
   сложенная панель занимает половину экрана и начинает мешать смотреть
   выдачу вместо того, чтобы помогать её сужать. */
/* Панель полупрозрачная и с размытием — теми же величинами, что шапка (.nav
   в 03-karkas.css): закреплённая полоса над решёткой читается тем же слоем
   интерфейса, а не второй сплошной плашкой. Фон перебивает непрозрачный
   background из .tma — правило стоит ниже по склейке. */
.katalog-panel { background: color-mix(in srgb, var(--tma) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: var(--liniya-w) solid var(--liniya-tmy); border-bottom: var(--liniya-w) solid var(--liniya-tmy); }
.katalog-panel__in { display: grid; gap: var(--s12); padding-block: var(--s16); }
.katalog-panel__ryad { display: grid; gap: var(--s12); align-items: center; }
@media (min-width: 1024px) {
  .katalog-panel { position: sticky; top: var(--shapka-h); z-index: 20; }
  .katalog-panel__in { gap: var(--s16); }
  .katalog-panel__ryad { grid-template-columns: minmax(240px, 1fr) auto auto; gap: var(--s16); }
}

.katalog-poisk { max-width: none; }
.katalog-poisk .pole__i { height: 56px; padding-left: calc(var(--s16) + var(--s32)); }
.katalog-poisk svg { width: 24px; height: 24px; }

/* Выпадающий список: подпись и значение в одной коробке высотой с поле
   поиска. Подпись остаётся видна при выбранном значении — иначе в свёрнутой
   панели «А500С» не говорит, по какому полю она выбрана. */
.katalog-vybory { display: flex; flex-wrap: wrap; gap: var(--s8); }
.vybor { position: relative; flex: 1 1 140px; min-width: 0; display: grid; align-content: start; gap: var(--s4); height: 56px; padding: var(--s8) var(--s32) 0 var(--s12); background: var(--fon-2); border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); }
.vybor::after { content: ''; position: absolute; right: var(--s16); top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: var(--liniya-aktiv-w) solid var(--tekst-3); border-bottom: var(--liniya-aktiv-w) solid var(--tekst-3); transform: rotate(45deg); pointer-events: none; }
.vybor__l { position: relative; z-index: 1; pointer-events: none; font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); }
/* Сам select растянут на всю ячейку — цель нажатия 56 px, а не строка в 16; подпись стоит поверх, текст значения — под ней. */
.vybor__s { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; padding: var(--s24) var(--s32) 0 var(--s12); box-sizing: border-box; border: 0; background: none; color: var(--tekst); font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); line-height: var(--i-mono); letter-spacing: var(--r-mono); text-overflow: ellipsis; appearance: none; -webkit-appearance: none; cursor: pointer; }
.vybor:focus-within { border-color: var(--fokus); box-shadow: 0 0 0 var(--liniya-w) var(--fokus); }
.vybor__s:focus-visible { outline: none; }
/* Список с выбором подсвечен кромкой: по свёрнутой панели видно, почему выдача короткая */
.vybor[data-est] { border-color: var(--signal); }
/* Заглушки на будущее: коробка та же, значение — «скоро» приглушённым */
.vybor--zhdyot, .vybor--zhdyot .vybor__s { cursor: default; }
.vybor--zhdyot .vybor__s { color: var(--tekst-3); }
/* Списки идут одной строкой: перенос четвёртого добавлял закреплённой панели
   64 px высоты — треть экрана вместо шестой части. */
@media (min-width: 1024px) {
  .katalog-vybory { flex-wrap: nowrap; }
  .vybor { flex: 0 1 136px; }
}

.katalog-schet { color: var(--tekst-2); white-space: nowrap; }
@media (min-width: 1024px) { .katalog-schet { justify-self: end; } }

/* Чипы категорий: узкий прописной, выбранный — янтарём */
.katalog-chipy { display: flex; flex-wrap: wrap; gap: var(--s8); }
.kat-chip { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--s12); background: transparent; color: var(--tekst-2); border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); font-family: var(--f-displej); font-weight: 700; font-size: var(--k-zag3); line-height: 1; letter-spacing: var(--r-displej); text-transform: uppercase; white-space: nowrap; transition: color var(--t-bystro) var(--krivaya), background-color var(--t-bystro) var(--krivaya), border-color var(--t-bystro) var(--krivaya); }
.kat-chip:hover { color: var(--tekst); border-color: var(--tekst-3); }
.kat-chip[aria-pressed='true'] { background: var(--signal); border-color: var(--signal); color: var(--na-signale); }

/* -- решётка позиций ----------------------------------------------------------
   Без зазоров: линии рисуют верх и лево каждой ячейки, право и низ — сама
   решётка. При любом числе карточек в последнем ряду сетка остаётся
   замкнутой, и ни одна линия не удваивается. */
.katalog-vydacha { margin-top: var(--s32); }
.kat-setka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-right: var(--liniya-w) solid var(--liniya); border-bottom: var(--liniya-w) solid var(--liniya); }
@media (min-width: 1024px) { .kat-setka { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1440px) { .kat-setka { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* Колонка карточки — minmax(0, 1fr): без неё длинное слово в имени
   («горячедеформированная») растягивало ряд карточки шире ячейки решётки, и
   кадр вылезал на соседа. */
.kat-karta { position: relative; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); min-width: 0; background: var(--fon); border-top: var(--liniya-w) solid var(--liniya); border-left: var(--liniya-w) solid var(--liniya); transition: background-color var(--t-bystro) var(--krivaya), box-shadow var(--t-bystro) var(--krivaya); }
.kat-karta:hover, .kat-karta:focus-within { background: var(--fon-3); box-shadow: inset 0 calc(var(--liniya-aktiv-w) * -1) 0 var(--signal); }
.kat-karta__kadr { aspect-ratio: 4 / 3; overflow: clip; display: grid; place-items: center; background: var(--list-fon-3); color: var(--tekst-2); }
.kat-karta__kadr img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-dolgo) var(--krivaya); }
.kat-karta:hover .kat-karta__kadr img { transform: scale(1.04); }
.kat-karta__kadr .sech { width: 96px; height: 96px; }
.kat-karta__telo { display: grid; gap: var(--s8); align-content: start; padding: var(--s16); }
/* Имя — узким прописным: в колонке шириной в четверть экрана широкий
   гротеск уходит на четыре строки. */
.kat-karta__t { font-family: var(--f-displej); text-transform: uppercase; letter-spacing: var(--r-displej); overflow-wrap: break-word; hyphens: auto; }
.kat-karta__t a { color: inherit; text-decoration: none; }
/* Ссылка имени накрывает карточку целиком; кнопка спецификации лежит слоем выше */
.kat-karta__t a::after { content: ''; position: absolute; inset: 0; }
.kat-karta__t a:hover { color: var(--signal); }
.kat-karta__kat { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }
/* На странице категории имя категории под каждым именем позиции повторяло
   заголовок страницы двадцать раз подряд */
.kat-setka--odna .kat-karta__kat { display: none; }
.kat-karta__niz { position: relative; z-index: 1; padding: 0 var(--s16) var(--s16); }
.kat-karta__niz .btn { max-width: 100%; }
@media (max-width: 699px) {
  .kat-karta__telo { padding: var(--s12); }
  .kat-karta__niz { padding: 0 var(--s12) var(--s12); }
  .kat-karta__niz .btn { width: 100%; padding-inline: var(--s8); }
}

/* Пустая выдача: строка и выход на спецификацию, а не тупик */
.katalog-pusto { display: grid; justify-items: start; gap: var(--s16); padding-block: var(--s64); }

/* -- описание категории: проза слева, стандарты плашками справа ------------------- */
.kat-opisanie__setka { display: grid; gap: var(--s48); }
.kat-opisanie__zag { margin-bottom: var(--s32); }
.kat-standarty { display: grid; gap: var(--s16); align-content: start; padding-top: var(--s24); border-top: var(--liniya-w) solid var(--liniya); }
.kat-standarty__tegi { gap: var(--s8); }
.kat-standarty .plashka { height: auto; min-height: 28px; padding-block: var(--s4); white-space: normal; line-height: var(--i-rubrika); }
@media (min-width: 1024px) {
  .kat-opisanie__setka { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--mezhkolonnik) * 2 + var(--s48)); }
  .kat-standarty { padding-top: 0; border-top: 0; padding-left: var(--s32); border-left: var(--liniya-w) solid var(--liniya); }
}
.kat-snoska { margin-top: var(--s16); }

/* ==== 12-poziciya.css ==== */
/* ============================================================================
   TAMINOTA STEEL · ПОЗИЦИЯ: лист-шапка, обзор с кадром и параметрами
   (асимметрия 5/12 и 7/12 на широком экране), таблица размеров с колонкой
   «В спецификацию», проза, документы, сцена. Только токены 00-tokeny.css.
   ========================================================================== */

/* -- лист-шапка ------------------------------------------------------------------- */
.poz-golova { padding-bottom: var(--s48); }
.poz-golova__data { margin-top: var(--s24); }
.poz-golova__zag { margin-top: var(--s12); max-width: 24ch; }
.poz-golova__lid { margin-top: var(--s16); }
.poz-golova__tegi { margin-top: var(--s24); }
.poz-golova__knopki { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s32); }
@media (max-width: 699px) { .poz-golova__knopki .btn { flex: 1 1 auto; } }

/* -- обзор: кадр и сечение слева, параметры справа ----------------------------------- */
.poz-obzor { padding-top: var(--s48); }
@media (min-width: 1024px) { .poz-obzor { padding-top: var(--s64); } }
.poz-obzor__setka { display: grid; gap: var(--s32); align-items: start; }
.poz-obzor__kadr { display: grid; gap: var(--s12); margin: 0; min-width: 0; }
.poz-obzor__kadr .kadr { border: var(--liniya-w) solid var(--liniya); }
.poz-obzor__zaglushka { display: grid; place-items: center; color: var(--tekst-2-na-tme); }
.poz-obzor__sech { display: flex; align-items: center; justify-content: space-between; gap: var(--s16); padding-top: var(--s12); border-top: var(--liniya-w) solid var(--liniya); }
.poz-obzor__sech .sech { width: 96px; height: 96px; color: var(--tekst-2); }
.poz-obzor__param { display: grid; gap: var(--s24); align-content: start; min-width: 0; }
/* Параметры: подпись и значение в две колонки без линеек; значения длинные
   (условия поставки, диапазоны), поэтому выровнены влево, а не вправо. */
.poz-param { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s12) var(--s24); align-items: start; }
.poz-param dt { padding-top: var(--s4); }
.poz-param dd { text-align: left; font-size: var(--k-tekst); line-height: var(--i-melkij); letter-spacing: var(--r-mono); color: var(--tekst); overflow-wrap: anywhere; }
@media (min-width: 700px) { .poz-obzor__setka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s48); } }
@media (min-width: 1024px) {
  .poz-obzor__setka { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--mezhkolonnik) * 2 + var(--s24)); }
  .poz-param { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
}

/* -- размеры и масса ----------------------------------------------------------------- */
.poz-razmery { scroll-margin-top: var(--shapka-h); }
.poz-razmery__kalk { margin-bottom: 0; }
.poz-razmery__kalk .kalk { border-bottom: 0; }
.poz-razmery__tablica { max-width: 100%; border: var(--liniya-w) solid var(--liniya); padding: var(--s16) var(--s24) var(--s16); background: var(--fon-3); }
@media (min-width: 700px) { .poz-razmery__tablica { padding: var(--s16) var(--s32) var(--s24); } }
.poz-razmery__snoska { margin-top: var(--s24); }
.poz-razmery__snoska + .snoska { margin-top: var(--s8); }
/* Колонка «В спецификацию»: поле и кнопка на одной строке с числами */
.tbl--spec td.spec-cell { vertical-align: middle; white-space: nowrap; padding-block: var(--s8); }
.tbl--spec td.spec-cell .spec-dobav { justify-content: flex-end; }
.tbl--spec tbody tr:hover, .tbl--spec tbody tr:focus-within { background: var(--vydelenie); box-shadow: inset var(--liniya-aktiv-w) 0 0 var(--signal); }
/* Без скрипта строка в спецификацию не уходит — набор скрыт */
html:not([data-js]) .spec-dobav { display: none; }
html:not([data-js]) .tbl--spec td.spec-cell { display: none; }
html:not([data-js]) .tbl--spec thead th:last-child { display: none; }
/* Планшет: заголовки колонок переносятся, поле и кнопка встают друг под
   другом — иначе пять колонок арматуры не входят в 704 px набора. */
@media (min-width: 700px) and (max-width: 1023px) {
  .tbl--razmery thead th { white-space: normal; }
  .tbl--razmery th, .tbl--razmery td { padding-inline: var(--s8); }
  .tbl--spec td.spec-cell .spec-dobav { display: grid; justify-items: end; gap: var(--s4); }
  .tbl--spec td.spec-cell .spec-dobav [data-spec-knopka] { padding-inline: var(--s12); }
}
@media (max-width: 699px) {
  .tbl--spec td.spec-cell { white-space: normal; }
  /* Подпись колонки не нужна: кнопка сама несёт слово «В спецификацию» */
  .tbl--spec td.spec-cell .p { display: none; }
  .tbl--spec td.spec-cell .z { grid-column: 1 / -1; margin-top: var(--s8); }
  .tbl--spec td.spec-cell .spec-dobav { justify-content: space-between; }
}

/* -- проза: описание слева, применение и упаковка справа ------------------------------ */
.poz-proza__setka { display: grid; gap: var(--s48); }
.poz-proza__zag { margin-bottom: var(--s32); }
.poz-proza__bok { display: grid; gap: var(--s32); align-content: start; }
.poz-proza__blok { display: grid; gap: var(--s12); padding-top: var(--s16); border-top: var(--liniya-w) solid var(--liniya); }
.poz-primenenie { display: grid; gap: var(--s8); }
.poz-primenenie li { padding-left: var(--s24); position: relative; font-size: var(--k-tekst); line-height: var(--i-tekst); }
.poz-primenenie li::before { content: ''; position: absolute; left: 0; top: calc(var(--i-tekst) / 2 - 1px); width: var(--s12); height: var(--liniya-aktiv-w); background: var(--signal); }
@media (min-width: 1024px) {
  .poz-proza__setka { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); column-gap: calc(var(--mezhkolonnik) * 2 + var(--s48)); }
  .poz-proza__bok { padding-top: calc(var(--k-zag1) + var(--s32)); }
}
.poz-snoska { margin-top: var(--s16); }

/* -- сцена: одна фраза про инспекцию ---------------------------------------------------- */
.poz-scena__fraza { max-width: 44ch; color: var(--tekst); }

/* -- документы ------------------------------------------------------------------------- */
.poz-dok__ssylka { margin-top: var(--s32); font-weight: 500; }

/* -- смежные позиции на бумаге-2 ------------------------------------------------------- */
.poz-smezhnye { background: var(--bumaga-2); --fon: var(--bumaga-2); --fon-2: var(--bumaga); }

/* ==== 13-kalkulyator.css ==== */
/* ============================================================================
   TAMINOTA STEEL · КАЛЬКУЛЯТОР МАССЫ: панель на бумаге-2 с полями слева и
   результатом справа. Полный вид — своя страница /kalkulyator (девять
   типов с переключателем); компактный — шапка таблицы размеров на странице
   позиции (один тип). Все величины — токены 00-tokeny.css.
   ========================================================================== */
.kalk { display: grid; gap: var(--s32); padding: var(--s24); background: var(--fon-2); border: var(--liniya-w) solid var(--liniya); }
@media (min-width: 700px) { .kalk { padding: var(--s32); } }
@media (min-width: 1024px) { .kalk { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s48); padding: var(--s48); } }
.kalk__vvod { display: grid; gap: var(--s24); align-content: start; min-width: 0; }
.kalk__zag { display: grid; gap: var(--s8); }

/* Переключатель типа: плитки с сечением, активная — с чертой сигнала снизу.
   Ширина колонок плавающая, чтобы девять плиток не переполняли ни одну
   ширину: на телефоне по две, на планшете по четыре. */
.kalk__tipy { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: var(--liniya-w); padding: var(--liniya-w); }
/* Линии между плитками — тенью-контуром самой плитки, а не заливкой сетки:
   девять плиток редко заполняют ряд целиком, и заливка проступала бы в
   пустых ячейках серым полем. Соседние контуры ложатся в один зазор и
   читаются одной линией. */
.kalk__tip { display: grid; justify-items: start; gap: var(--s8); min-width: 0; padding: var(--s12); background: var(--fon); color: var(--tekst-2); text-align: left; font-size: var(--k-melkij); line-height: var(--i-melkij); box-shadow: 0 0 0 var(--liniya-w) var(--liniya); transition: background-color var(--t-bystro) var(--krivaya), color var(--t-bystro) var(--krivaya); }
.kalk__tip .sech { width: 40px; height: 40px; color: var(--tekst-3); transition: color var(--t-bystro) var(--krivaya); }
.kalk__tip:hover { background: var(--fon-3); color: var(--tekst); }
.kalk__tip:hover .sech { color: var(--tekst-2); }
.kalk__tip[aria-pressed='true'] { background: var(--fon-3); color: var(--tekst); box-shadow: 0 0 0 var(--liniya-w) var(--liniya), inset 0 calc(var(--liniya-aktiv-w) * -1) 0 var(--signal); }
.kalk__tip[aria-pressed='true'] .sech { color: var(--signal); }

/* Поля: размеры, длина или количество, тонны — в одну сетку */
.kalk__polya { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s16); }
@media (min-width: 700px) { .kalk__polya { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); } }
.kalk__pole .pole__i { padding-inline: var(--s12); }
.kalk__dejstviya { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s16); }

/* Результат: три величины, главная — дисплейным кеглем, формула моно */
.kalk__rez { display: grid; gap: var(--s24); align-content: start; padding-top: var(--s24); border-top: var(--liniya-w) solid var(--liniya); min-width: 0; }
@media (min-width: 1024px) { .kalk__rez { padding-top: 0; border-top: 0; padding-left: var(--s48); border-left: var(--liniya-w) solid var(--liniya); } }
.rez { display: grid; gap: var(--s4); min-width: 0; }
.rez__n { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-zag2); line-height: var(--i-zag2); letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }
.rez--glav .rez__n { font-family: var(--f-displej); font-weight: 700; font-size: var(--k-chislo); line-height: var(--i-chislo); }
.rez__p { font-family: var(--f-mono); font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); }
.rez__f { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s4) var(--s12); color: var(--tekst-2); }
.kalk__rez .btn { justify-self: start; }

/* Компактный вид на странице позиции: панель ниже, результат в ряд */
.kalk--kompakt { gap: var(--s24); padding: var(--s24); }
@media (min-width: 1024px) { .kalk--kompakt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s32); padding: var(--s32); } .kalk--kompakt .kalk__rez { padding-left: var(--s32); } }
.kalk--kompakt .kalk__vvod { gap: var(--s16); }
.kalk--kompakt .kalk__rez { gap: var(--s16); }
@media (min-width: 700px) { .kalk--kompakt .kalk__rez { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kalk--kompakt .rez__f, .kalk--kompakt .kalk__rez .btn { grid-column: 1 / -1; } }
.kalk--kompakt .rez__n { font-size: var(--k-zag2); line-height: var(--i-zag2); white-space: nowrap; }
.kalk--kompakt .rez--glav .rez__n { font-size: var(--k-zag1); line-height: var(--i-zag1); }
@media (min-width: 1024px) and (max-width: 1439px) { .kalk--kompakt .rez--glav .rez__n { font-size: var(--k-zag2); line-height: var(--i-zag2); } }

/* Страница калькулятора */
.kalk-stranica .list__head { margin-bottom: var(--s32); }
.kalk-stranica__snoska { margin-top: var(--s16); }
.tbl--formuly td:nth-child(2) { white-space: nowrap; }
@media (max-width: 699px) { .tbl--formuly td:nth-child(2) { white-space: normal; } }

/* ==== 14-znaniya.css ==== */
/* ============================================================================
   TAMINOTA STEEL · ЗНАНИЯ: хаб с карточками-кадрами по трём темам, обложка
   статьи на кадре, проза на девять колонок и липкий блок на три,
   формула-врезка, фраза на низкой сцене. Все величины — токены
   00-tokeny.css; общие классы (proza, tbl, vrezka, datalajn, list__head,
   stranica-head) — из 01 и 02.
   ========================================================================== */

/* -- обложка статьи: длинный заголовок держит меру -------------------------- */
.st-oblozhka .t-displej { max-width: 20ch; }
/* Кадр статьи — рендер предмета на светлом фоне, а не тёмная сцена: на
   телефоне вуаль идёт только снизу, и крошки с рубрикой попадали на светлое.
   Здесь вуаль дотягивается выше — только на обложке статьи. */
@media (max-width: 699px) {
  .st-oblozhka .scena__vual {
    background: linear-gradient(0deg,
      color-mix(in srgb, var(--tma) 96%, transparent) 0%,
      color-mix(in srgb, var(--tma) 90%, transparent) 62%,
      color-mix(in srgb, var(--tma) 52%, transparent) 88%,
      transparent 100%);
  }
}

/* -- хаб: темы и карточки --------------------------------------------------
   Карточка статьи: кадр 3:2 сверху, даталайн, заголовок капсом, лид. Решётка
   без зазоров: линии рисуют сами карточки, а не фон контейнера, — иначе
   неполный последний ряд оставляет серый прямоугольник. Тем три, статей в
   них 6 · 3 · 3, поэтому три колонки от 1024 всегда заполняются нацело. */
.st-tema + .st-tema { margin-top: var(--s96); padding-top: var(--s64); border-top: var(--liniya-w) solid var(--liniya); }
.st-kartochki { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--liniya-w) solid var(--liniya); border-left: var(--liniya-w) solid var(--liniya); }
@media (min-width: 700px) { .st-kartochki { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-kartochki { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-kart { display: grid; grid-template-rows: auto 1fr; min-width: 0; background: var(--fon); color: var(--tekst); text-decoration: none; border-right: var(--liniya-w) solid var(--liniya); border-bottom: var(--liniya-w) solid var(--liniya); transition: background-color var(--t-bystro) var(--krivaya); }
@supports (grid-template-rows: subgrid) { .st-kartochki { grid-auto-rows: auto; } .st-kart { grid-row: span 2; grid-template-rows: subgrid; } }
.st-kart__kadr { display: block; aspect-ratio: 3 / 2; overflow: clip; background: var(--fon-2); position: relative; }
.st-kart__kadr img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-dolgo) var(--krivaya); }
/* Янтарная черта выезжает снизу кадра — тот же отклик, что у плиток каталога */
.st-kart__kadr::after { content: ''; position: absolute; inset: auto 0 0 0; height: var(--liniya-aktiv-w); background: var(--signal); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-sredne) var(--krivaya); }
.st-kart:hover .st-kart__kadr img { transform: scale(1.04); }
.st-kart:hover .st-kart__kadr::after { transform: scaleX(1); }
.st-kart__telo { display: grid; grid-template-rows: auto auto 1fr; row-gap: var(--s12); padding: var(--s24); min-width: 0; }
.st-kart:hover { background: var(--fon-2); color: var(--tekst); text-decoration: none; }
.st-kart:hover .st-kart__t { color: var(--signal); }
.st-kart__data { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-3); overflow-wrap: anywhere; }
/* Заголовок карточки — капс Condensed: карточки должны читаться как имена, а
   не как строки списка (разбор владельца 17.09.2026) */
.st-kart__t { font-family: var(--f-displej); font-weight: 700; font-size: var(--k-zag2); line-height: var(--i-zag2); letter-spacing: var(--r-displej); text-transform: uppercase; text-wrap: balance; transition: color var(--t-bystro) var(--krivaya); }
.st-kart__d { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }
.st-snoska { margin-top: var(--s16); }

/* -- статья: проза и липкий блок -------------------------------------------
   На телефоне и планшете блок стоит под прозой; от 1024 — сетка 8/4 и
   sticky под шапкой. Лёгкая версия липкого не требует: ниже 1024 он статичен
   сам по себе. */
.st-telo__setka { display: grid; gap: var(--s64); }
@media (min-width: 1024px) {
  .st-telo__setka { grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: var(--s64); align-items: start; }
  .st-aside { position: sticky; top: calc(var(--shapka-h) + var(--s24)); }
}
@media (min-width: 1440px) { .st-telo__setka { gap: var(--s96); } }

/* Проза не ограничивает ширину таблиц: мера набора лежит на абзацах,
   заголовках и списках, таблица берёт всю колонку. */
.st-proza { max-width: none; min-width: 0; }
.st-proza > p, .st-proza > ul, .st-proza > h2, .st-proza > .st-formula, .st-proza > .snoska { max-width: var(--mera-tekst); }
.st-proza > .tbl-wrap, .st-proza > .st-formula { margin-top: var(--s32); }
.st-proza > .tbl-wrap + *, .st-proza > .st-formula + * { margin-top: var(--s32); }
.st-proza > .tbl-wrap + .snoska { margin-top: var(--s16); }
.st-proza > h2 + .tbl-wrap { margin-top: var(--s24); }
.st-proza .tbl caption { padding-bottom: var(--s16); }
/* Шапки колонок в статьях длинные («Стержней 11,7 м в тонне»,
   «HRB500E · GB/T 1499.2-2018»): без переноса таблица в пять колонок на
   768 выходила за кромку. Перенос разрешён, ширина колонок — по содержимому. */
.st-proza .tbl thead th { white-space: normal; }
.st-proza .tbl { table-layout: auto; }
/* На телефоне таблица становится блоком, а подпись остаётся table-caption
   и сжимается до одного слова в строке; подпись тоже становится блоком. */
@media (max-width: 699px) { .st-proza .tbl--adaptiv caption { display: block; width: 100%; } }

/* Формула: врезка с рубрикой, моно-строкой и пояснением */
.st-formula { display: grid; gap: var(--s8); padding-block: var(--s4); }
.st-formula__f { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-zag3); line-height: var(--i-zag3); letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums; overflow-wrap: anywhere; }

/* Липкий блок: позиции по теме и другие статьи */
.st-aside { display: grid; gap: var(--s48); align-content: start; min-width: 0; }
.st-aside__blok { display: grid; gap: var(--s16); padding-top: var(--s16); border-top: var(--liniya-aktiv-w) solid var(--liniya); }
.st-pozicii, .st-drugie { display: grid; }
.st-poz { display: grid; gap: var(--s4); padding-block: var(--s12); border-bottom: var(--liniya-w) solid var(--liniya); color: var(--tekst); text-decoration: none; }
.st-poz:hover { color: var(--signal); text-decoration: none; }
.st-poz__t { font-weight: 600; line-height: var(--i-melkij); }
.st-poz__d { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-3); overflow-wrap: anywhere; }
.st-drugie a { display: block; padding-block: var(--s12); border-bottom: var(--liniya-w) solid var(--liniya); color: var(--tekst); text-decoration: none; font-size: var(--k-melkij); line-height: var(--i-melkij); font-weight: 500; }
.st-drugie a:hover { color: var(--signal); }
/* Цель нажатия не мельче 44 px: строчная ссылка 118 × 17 проваливала замер */
.st-aside__vse { font-size: var(--k-melkij); line-height: var(--i-melkij); }
.st-aside__vse a { display: inline-flex; align-items: center; min-height: 44px; }

/* -- фраза на низкой сцене ------------------------------------------------ */
.st-scena__zag { max-width: 32ch; color: var(--tekst); }

/* ==== 15-stranicy.css ==== */
/* ============================================================================
   TAMINOTA STEEL · СЛУЖЕБНЫЕ СТРАНИЦЫ (редакция захода 8, 18.09.2026):
   правая колонка обложки, лента пяти шагов и таблица 3 × 5 под ней на одной
   сетке, две панели узлов контроля одной высоты, стандарты таблицей, три
   пути с пиктограммами, блоки «О направлении», отрасли, контакты, правовые
   документы прозой, 404.

   Раскладку самой обложки (.stranica-head__in/__l/__r) держит 01-baza.css —
   она общая для главной и внутренних страниц; здесь только то, что стоит на
   внутренних. Величины — токены 00-tokeny.css.
   ========================================================================== */

/* -- лист на бумаге-2: второй тон между листами, чтобы соседние секции
   данных не сливались; роли фона меняются местами --------------------------- */
.list--vtoroj-ton { background: var(--bumaga-2); --fon: var(--bumaga-2); --fon-2: var(--bumaga); }

/* -- текст на низкой сцене: заголовок, лид, одно действие -------------------- */
.scena-tekst { display: grid; gap: var(--s24); justify-items: start; }
.scena-tekst__zag { max-width: 22ch; }
.scena-tekst__lid { color: var(--tekst-2); }

/* -- правая колонка обложки внутренней страницы -------------------------------
   Раскладку контракта (.stranica-head__in/__l/__r) держит 01-baza.css; здесь
   только вид того, что стоит справа на внутренних страницах: факты числами и
   метаданные статьи. Черта между фактами идёт поперёк колонки, а не сбоку:
   в столбце боковая линия читалась обрывком соседней сетки. */
.stranica-head__r .fakt { gap: var(--s4); }
.stranica-head__r .fakt + .fakt { border-left: 0; padding-left: 0; }
.stranica-head__r .t-chislo { color: var(--tekst); }
@media (min-width: 1024px) {
  .stranica-head__r .fakt + .fakt { padding-top: var(--s24); border-top: var(--liniya-w) solid var(--liniya); }
}
.metka-obl { display: grid; gap: var(--s4); min-width: 0; }
.metka-obl__v { color: var(--tekst); overflow-wrap: anywhere; }
.stranica-head__data { color: var(--tekst-3); }

/* -- лента пяти шагов ---------------------------------------------------------
   От 1024 шаги стоят пятью колонками слева направо, между ними пунктирная
   черта с точкой на оси: она прорастает от левого края вместе с колонкой
   (класс .vid ставит общий скрипт проявления, ступень — data-yavlenie).
   Ниже 1024 лента становится обычным столбцом: пять колонок текста на
   телефоне нечитаемы, а боковой прокрутки внутри блока здесь быть не должно. */
.lenta { display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--liniya-w) solid var(--liniya); }
.lenta__sh { display: grid; gap: var(--s8); align-content: start; min-width: 0; padding-block: var(--s24); border-bottom: var(--liniya-w) solid var(--liniya); }
.lenta__os { display: none; }
.lenta__n { color: var(--signal-krupno); }
.lenta__t { font-family: var(--f-displej); text-transform: uppercase; letter-spacing: var(--r-displej); overflow-wrap: break-word; }
.lenta__d { font-size: var(--k-tekst); line-height: var(--i-tekst); color: var(--tekst-2); }

/* -- таблица 3 × 5 под лентой -------------------------------------------------
   Три строки «вы присылаете · бюро делает · документ шага» на пять шагов.
   Номер шага в ячейке нужен узкому экрану, где колонки встают друг под
   друга; на широком его заменяет лента выше, и он уходит в скрытый слой —
   не display: none, иначе подпись пропадает и для чтения с экрана. */
.tri { margin-top: var(--s48); display: grid; grid-template-columns: minmax(0, 1fr); border-top: var(--liniya-w) solid var(--liniya); }
.tri__rubrika { padding-top: var(--s24); padding-bottom: var(--s8); }
.tri__ya { display: grid; gap: var(--s4); padding-block: var(--s12); border-bottom: var(--liniya-w) solid var(--liniya); min-width: 0; }
.tri__sh { color: var(--tekst-3); }
.tri__t { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }
.tri__ya--dok .tri__t { color: var(--tekst); font-weight: 500; }

/* -- лента и таблица — одна сетка ---------------------------------------------
   Список треков у обеих сеток один и тот же, поэтому колонка таблицы стоит
   ровно под номером своего шага. От 1024 это пять равных колонок, от 1280
   слева к ним встаёт колонка заголовков строк таблицы — и лента получает её
   тоже, пустой. Номер шага (data-shag) ставит и колонку ленты, и ячейку
   таблицы в свою колонку: без этого шестая колонка осталась бы пустой, а
   ряд съехал бы на одну влево. Линии только горизонтальные, между строками. */
@media (min-width: 1024px) {
  .lenta, .tri { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--s24); border-top: 0; }
  .lenta__sh { padding-block: 0; border-bottom: 0; gap: var(--s12); }
  .lenta__os { display: flex; align-items: center; gap: var(--s8); height: var(--s24); }
  .lenta__tochka { width: 12px; height: 12px; border-radius: 50%; border: var(--liniya-aktiv-w) solid var(--signal); flex: none; }
  .lenta__cherta { flex: 1 1 auto; height: var(--liniya-aktiv-w); margin-right: calc(-1 * var(--s24)); background-image: linear-gradient(90deg, var(--liniya) 6px, transparent 6px); background-size: 12px var(--liniya-aktiv-w); transform: scaleX(0); transform-origin: left center; transition: transform var(--t-dolgo) var(--krivaya); }
  .lenta__sh:last-child .lenta__cherta { visibility: hidden; }
  html[data-js] .lenta__sh.vid .lenta__cherta { transform: scaleX(1); }
  html[data-legko] .lenta__cherta { transform: scaleX(1) !important; transition: none !important; }
  .tri { margin-top: var(--s64); }
  .tri__rubrika { grid-column: 1 / -1; padding-block: var(--s24) var(--s8); border-top: var(--liniya-w) solid var(--liniya); align-self: start; }
  .tri__ya { padding-block: var(--s24); border-bottom: 0; }
  .tri__sh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Между 1024 и 1280 колонка ленты — около 165 px: текст основного кегля
   рвался на два-три слова в строке. Ступенью ниже он читается. */
@media (min-width: 1024px) and (max-width: 1279px) {
  .lenta__t { font-size: var(--k-zag3); line-height: var(--i-zag3); }
  .lenta__d { font-size: var(--k-melkij); line-height: var(--i-melkij); }
}
/* От 1280 заголовок строки уходит влево отдельной колонкой: место под него
   появляется только здесь, а до того он стоит строкой над своим рядом.
   Колонка заголовков уже колонки шага — иначе пять колонок текста сжимаются
   до двух слов в строке. */
@media (min-width: 1280px) {
  .lenta, .tri { grid-template-columns: minmax(0, 4fr) repeat(5, minmax(0, 5fr)); }
  .lenta__sh[data-shag="1"], .tri__ya[data-shag="1"] { grid-column: 2; }
  .lenta__sh[data-shag="2"], .tri__ya[data-shag="2"] { grid-column: 3; }
  .lenta__sh[data-shag="3"], .tri__ya[data-shag="3"] { grid-column: 4; }
  .lenta__sh[data-shag="4"], .tri__ya[data-shag="4"] { grid-column: 5; }
  .lenta__sh[data-shag="5"], .tri__ya[data-shag="5"] { grid-column: 6; }
  .tri__rubrika { grid-column: 1; padding-block: var(--s24) 0; }
  .tri__ya { border-top: var(--liniya-w) solid var(--liniya); }
}

/* -- два узла контроля: панель во всю ширину на своём кадре -------------------
   Место («Завод, КНР», «Склад, Ташкент») читается раньше заголовка, перечень
   идёт моно-строками по вуали. Вторая панель появляется после первой. */
.uzly-golova { padding-bottom: var(--s32); }
/* Обе панели одной высоты. Перечень у завода и у склада разной длины, и
   высота, набранная содержанием, разводила соседние панели на полсотни
   пикселей — рядом это читается ошибкой вёрстки, а не замыслом. Высоту даёт
   общая сетка из двух равных строк, а не текст панели; заданной высотой
   (height) панель на узком настольном экране обрезала бы свой же перечень. */
.uzly-panely { display: grid; grid-auto-rows: 1fr; }
.uzel-panel { min-height: 72dvh; }
.uzel-panel__in { display: grid; gap: var(--s12); max-width: 46ch; }
.uzel-panel__zag { font-family: var(--f-displej); text-transform: uppercase; letter-spacing: var(--r-displej); }
.uzel-panel__lid { color: var(--tekst-2); }
.uzel-punkty { display: grid; margin-top: var(--s12); }
.uzel-punkt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s12); padding-block: var(--s8); border-top: var(--liniya-w) solid var(--liniya); min-width: 0; }
.uzel-punkt__n { color: var(--signal); }
/* Интерлиньяж моно-строки берётся мелкий, а не моношкальный: пункт узла
   переносится на две строки, и 16 px склеивали их в одно пятно. */
.uzel-punkt__t { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); line-height: var(--i-melkij); letter-spacing: var(--r-mono); color: var(--tekst-2); }
@media (min-width: 1024px) { .uzel-panel__in { max-width: 58ch; } }

/* -- стандарты таблицей -------------------------------------------------------
   Строка — один ответ целиком: ГОСТ, GB, ASTM, EN и область применения рядом.
   Читаемость держат не оттенки, а линии: горизонтальная между строками и
   вертикальная между колонками; вместо полосатого фона строка отзывается на
   наведение. Обозначения набраны моно кеглем текста, а не мелким: за ними
   сюда и приходят. На телефоне общий .tbl--adaptiv разворачивает строку в
   пары «подпись — обозначение», и линии там свои. */
.tbl.tbl--standarty tbody tr { background: none; }
.tbl.tbl--standarty tbody tr:hover, .tbl.tbl--standarty tbody tr:focus-within { background: var(--fon-2); box-shadow: none; }
.standarty-snoska { margin-top: var(--s24); }
@media (min-width: 700px) {
  .tbl--standarty th, .tbl--standarty td { border-top: var(--liniya-w) solid var(--liniya); }
  .tbl--standarty th + th, .tbl--standarty td + td { border-left: var(--liniya-w) solid var(--liniya); padding-left: var(--s16); }
  .tbl--standarty thead th { border-top: 0; }
}
@media (min-width: 1024px) {
  .tbl--standarty tbody th, .tbl--standarty tbody td { font-size: var(--k-tekst); line-height: var(--i-tekst); padding-block: var(--s16); }
  .tbl--standarty tbody .txt { font-size: var(--k-tekst); line-height: var(--i-tekst); color: var(--tekst-2); }
}

.perechen { display: grid; }
.perechen li { padding-block: var(--s12); border-top: var(--liniya-w) solid var(--liniya); font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); }
.perechen li:first-child { border-top: 0; padding-top: 0; }
.perechen--tekst li { font-size: var(--k-tekst); line-height: var(--i-tekst); color: var(--tekst); }

/* -- двухколонный блок: заголовок слева, содержание справа -------------------- */
.dvoe { display: grid; gap: var(--s24); padding-block: var(--s32); border-top: var(--liniya-w) solid var(--liniya); }
.dvoe:first-child { border-top: 0; padding-top: 0; }
.dvoe:last-child { padding-bottom: 0; }
.dvoe__zag { display: grid; gap: var(--s12); align-content: start; }
.dvoe__telo { min-width: 0; }
@media (min-width: 1024px) {
  .dvoe { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s48); padding-block: var(--s48); }
  .dvoe__telo { max-width: 760px; }
}

/* -- четыре правила на сцене --------------------------------------------------- */
.pravila { display: grid; gap: var(--s32); }
.pravila__zag { max-width: 18ch; }
.pravila__setka { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s24); counter-reset: pravilo; }
.pravila__p { display: grid; gap: var(--s8); padding-top: var(--s16); border-top: var(--liniya-w) solid var(--liniya); max-width: 40ch; counter-increment: pravilo; }
.pravila__p::before { content: '0' counter(pravilo); font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-rubrika); color: var(--signal); }
.pravila__p p { font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
@media (min-width: 700px) { .pravila__setka { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s32) var(--s24); } }
@media (min-width: 1024px) { .pravila { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s48); align-items: start; } .pravila__setka { max-width: 760px; } }

/* -- о направлении: блоки и выход на бюро --------------------------------------- */
.o-bloki { display: grid; }
.o-byuro { display: grid; gap: var(--s24); justify-items: start; }

/* -- отрасли ------------------------------------------------------------------- */
.otrasli .punkt__d { color: var(--tekst); }

/* Контакты в заходе 7 переписаны и живут со своими стилями в 10-glavnaya.css
   (там же блок «Связь» главной, разметка у них общая) — здесь правил нет. */

/* -- как везём: три пути с пиктограммой ---------------------------------------
   Пиктограмма рисуется теми же линиями 2 px и кружками, что знак настроек в
   шапке: путь узнаётся до чтения заголовка. Под ней — маршрутная строка со
   станциями; сроков в днях нет нигде. */
.puti-polosa { padding-block: var(--list-y); }
.marshruty { display: grid; grid-template-columns: minmax(0, 1fr); }
.marshrut { display: grid; gap: var(--s12); align-content: start; min-width: 0; padding-block: var(--s32); border-top: var(--liniya-w) solid var(--liniya); }
.marshrut__znak { color: var(--signal); }
.marshrut__svg { width: 64px; height: 64px; }
.marshrut__svg rect, .marshrut__svg path, .marshrut__svg line, .marshrut__svg circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marshrut__svg circle { fill: var(--fon); }
.marshrut__stroka { color: var(--tekst); overflow-wrap: anywhere; }
.marshrut__zag { font-family: var(--f-displej); text-transform: uppercase; letter-spacing: var(--r-displej); }
.marshrut__d { color: var(--tekst-2); }
.marshrut__data { margin-top: var(--s4); }
@media (min-width: 700px) {
  .marshruty { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s32); }
  .marshrut { padding-block: var(--s48); }
}

/* -- правовые документы прозой ------------------------------------------------- */
/* «Конфиденциальности» одним словом дисплейным кеглем не влезает в 390 и
   распирает колонку обложки: break-word при вычислении min-content колонки не
   учитывается, anywhere — учитывается, и колонка сжимается по окну. */
.pravo-head .t-displej { overflow-wrap: anywhere; }
/* Соседние правовые документы в правой колонке обложки: страница редко
   читается одна, и уход на соседнюю не должен идти через подвал. */
.pravo-drugie { display: grid; gap: var(--s12); }
.pravo-drugie__spisok { display: grid; }
.pravo-drugie__spisok li { border-top: var(--liniya-w) solid var(--liniya); }
.pravo-drugie__spisok a { display: block; padding-block: var(--s12); color: var(--tekst); text-decoration: none; font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); }
.pravo-drugie__spisok a:hover { color: var(--signal); }
/* Проза держит меру текста, а таблицы выходят на всю узкую полосу:
   шесть колонок политики cookie в 68ch не читаются. */
.pravo { max-width: none; }
.pravo > :not(.tbl-wrap) { max-width: var(--mera-tekst); }
.pravo h2 { font-family: var(--f-zag); font-weight: 700; font-size: var(--k-zag2); line-height: var(--i-zag2); letter-spacing: var(--r-zag); }
.pravo h3 { font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-zag3); line-height: var(--i-zag3); margin-top: var(--s32); }
.pravo p, .pravo li { color: var(--tekst); }
.pravo code { font-family: var(--f-mono); font-weight: 500; font-size: var(--k-mono); letter-spacing: var(--r-mono); }
.pravo .tbl-wrap { max-width: none; margin-block: var(--s24); }
.pravo .tbl .txt { font-size: var(--k-melkij); line-height: var(--i-melkij); overflow-wrap: anywhere; }
/* Шапка шестиколонной таблицы cookie на планшете не помещается в одну
   строку — заголовкам колонок разрешён перенос. */
.pravo .tbl thead th { white-space: normal; }
/* Все колонки правовых таблиц текстовые — шапка выровнена по тексту, влево */
.pravo .tbl thead th { text-align: left; }
/* Таблица ключей: имя cookie или записи — моно, без переноса внутри слова */
.tbl--klyuchi td:first-child { font-family: var(--f-mono); font-size: var(--k-mono); letter-spacing: var(--r-mono); white-space: nowrap; }
.tbl--klyuchi td:first-child .z { overflow-wrap: normal; }
/* Колонка типа записи: «localStorage» и «SameSite=Lax» переносятся по
   пробелам, а не посреди слова */
.tbl--klyuchi td:nth-child(2) .z { overflow-wrap: normal; }
/* Поле, которое владельцу предстоит заполнить: в тексте оно стоит в
   квадратных скобках и подсвечивается, чтобы не уйти на бой незамеченным. */
.zapolnit { background: var(--vydelenie); color: var(--signal); font-weight: 600; padding-inline: var(--s4); border-radius: var(--radius); box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* -- 404 ----------------------------------------------------------------------- */
.ne-najdeno { min-height: calc(100dvh - var(--shapka-h)); display: grid; align-items: center; }
.ne-najdeno__in { display: grid; gap: var(--s24); justify-items: start; }
.ne-najdeno .t-zag1 { max-width: 16ch; }
.ne-najdeno .row { margin-top: var(--s8); }

/* Перечни «О направлении» — обычным кеглем текста, не мелким */
.perechen--tekst li { font-size: var(--k-tekst); line-height: var(--i-tekst); }

/* ==== 16-spec.css ==== */
/* ============================================================================
   TAMINOTA STEEL · СПЕЦИФИКАЦИЯ: набор в строке таблицы размеров, ведомость
   на странице /specifikaciya, действия над ней, добавления к подносу на
   телефоне. Только токены 00-tokeny.css; поднос стилизован в 03-karkas.css и
   здесь лишь дополняется правилами узкого экрана.
   ========================================================================== */

/* -- набор в строке таблицы размеров ---------------------------------------
   Разметка по контракту: span.spec-dobav[data-spec-dobav] > input.spec-dobav__kol
   + button[data-spec-knopka]. Поле узкое — тонны, до трёх знаков; кнопка
   получает вид контурной, если автор строки не дал ей классов .btn. */
.spec-dobav { display: inline-flex; align-items: center; gap: var(--s8); vertical-align: middle; }
.spec-dobav__kol { width: calc(var(--s64) + var(--s32)); height: 44px; padding-inline: var(--s12); background: var(--fon-3); color: var(--tekst); border: var(--liniya-w) solid var(--liniya); border-radius: var(--radius); font-family: var(--f-mono); font-size: var(--k-mono); letter-spacing: var(--r-mono); font-variant-numeric: tabular-nums; text-align: right; transition: border-color var(--t-bystro) var(--krivaya), box-shadow var(--t-bystro) var(--krivaya); }
.tma .spec-dobav__kol { background: var(--tma-3); }
.spec-dobav__kol::placeholder { color: var(--plejsholder); opacity: 1; }
.spec-dobav__kol:hover { border-color: var(--tekst-3); }
.spec-dobav__kol:focus { outline: none; border-color: var(--fokus); box-shadow: 0 0 0 1px var(--fokus); }
/* Пустое поле при нажатии на кнопку: подсветка ржой, строка не добавляется */
.spec-dobav__kol[data-pusto] { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.spec-dobav [data-spec-knopka]:not(.btn) { display: inline-flex; align-items: center; height: calc(var(--s32) + var(--s8)); padding-inline: var(--s16); border: var(--liniya-w) solid var(--tekst); border-radius: var(--radius); font-family: var(--f-tekst); font-weight: 600; font-size: var(--k-melkij); line-height: 1; white-space: nowrap; color: var(--tekst); transition: background-color var(--t-bystro) var(--krivaya), color var(--t-bystro) var(--krivaya), border-color var(--t-bystro) var(--krivaya); }
.spec-dobav [data-spec-knopka]:not(.btn):hover { background: var(--fon-2); }
/* Секунда после добавления: кнопка говорит «Добавлено» цветом сигнала и
   не принимает второй клик — так двойное нажатие не удваивает тонны. */
.spec-dobav [data-spec-knopka][data-dobavleno] { color: var(--signal); border-color: var(--signal); background: transparent; pointer-events: none; }
@media (max-width: 699px) {
  .spec-dobav { width: 100%; justify-content: space-between; }
  .spec-dobav [data-spec-knopka] { flex: 1 1 auto; justify-content: center; }
}

/* -- страница: ведомость над формой заявки ------------------------------------
   Ведомость и форма живут в одной секции #zapros: между ними ровно тот же
   воздух, что между головой листа и его содержимым. */
.spec-oblast { margin-bottom: var(--s64); }
@media (min-width: 1024px) { .spec-oblast { margin-bottom: var(--s96); } }
.spec-oblast:empty, .spec-oblast:has(> [data-spec-pusto][hidden]):has(> [data-spec-polno][hidden]) { margin-bottom: 0; }
.spec-pusto { display: grid; gap: var(--s24); justify-items: start; }
.spec-pusto p { max-width: var(--mera-lid); }
.spec-tablica { max-width: 100%; }
.spec-tbl th[scope='row'], .spec-tbl thead th:nth-child(2) { text-align: left; }
.spec-tbl th[scope='row'] { font-weight: 700; }
.spec-tbl th[scope='row'] a { color: inherit; text-decoration: none; }
.spec-tbl th[scope='row'] a:hover { color: var(--signal); text-decoration: underline; }
/* Номер строки внутри заголовка позиции нужен только телефону: на широком
   экране номер стоит своей колонкой. */
.spec-tbl__nomer { display: none; }
.spec-tbl__t { width: calc(var(--s64) + var(--s32)); height: 44px; padding-inline: var(--s12); text-align: right; font-size: var(--k-mono); }
.spec-tbl td:has(> .z > .spec-tbl__t), .spec-tbl__x { padding-block: var(--s8); vertical-align: middle; }
.spec-tbl__x { white-space: nowrap; }
/* Удаление строки — цель в 44 px: моно-надпись высотой в строку промахивалась
   пальцем, а стоит она рядом с полем количества, где промах дорог. Тихий вид
   остаётся: рамка появляется под указателем, в покое стоит одна надпись. */
.spec-tbl__udalit { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding-inline: var(--s12); border: var(--liniya-w) solid transparent; border-radius: var(--radius); font-family: var(--f-mono); font-weight: 500; font-size: var(--k-rubrika); line-height: var(--i-rubrika); letter-spacing: var(--r-rubrika); text-transform: uppercase; color: var(--tekst-3); transition: color var(--t-bystro) var(--krivaya), border-color var(--t-bystro) var(--krivaya); }
.spec-tbl__udalit:hover, .spec-tbl__udalit:focus-visible { color: var(--signal); border-color: var(--signal); }
.spec-tablica:focus { outline: none; }
.spec-tbl tfoot th, .spec-tbl tfoot td { border-top: var(--liniya-w) solid var(--tekst-3); font-weight: 700; padding-top: var(--s16); }
.spec-tbl tfoot th[scope='row'] { font-family: var(--f-mono); text-transform: uppercase; letter-spacing: var(--r-rubrika); font-size: var(--k-rubrika); color: var(--tekst-3); }
.spec-tbl tfoot [data-spec-itog-t] { font-size: var(--k-zag3); }
.spec-snoska { margin-top: var(--s16); }
.spec-dejstviya { display: flex; flex-wrap: wrap; gap: var(--s12); margin-top: var(--s32); align-items: center; }
/* Секунда после копирования: кнопка показывает «Скопировано» */
[data-spec-skopirovat][data-gotovo] { color: var(--signal); border-color: var(--signal); }

/* -- очистка в два нажатия ------------------------------------------------------
   Кнопка и вопрос стоят в одной коробке и меняются местами: строка действий не
   переставляется, когда вопрос длиннее кнопки. Сама «Очистить» тише соседних —
   она отменяет набор, а не продолжает его; под указателем цвет возвращается к
   полному, иначе на наведённом фоне приглушённый текст теряет контраст. */
.spec-ochistka { display: inline-flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.spec-ochistka__k { color: var(--tekst-3); }
.spec-ochistka__k:hover, .spec-ochistka__k:focus-visible { color: var(--tekst); }
.spec-ochistka__vopros { display: inline-flex; align-items: center; gap: var(--s8); flex-wrap: wrap; }
.spec-ochistka__vopros[hidden] { display: none; }
.spec-ochistka__t { font-family: var(--f-mono); font-size: var(--k-rubrika); letter-spacing: var(--r-mono); text-transform: uppercase; color: var(--tekst-2); }
@media (max-width: 699px) {
  /* Ведомость на телефоне: сетка пар «подпись — значение» от .tbl--adaptiv,
     заголовок строки — имя позиции с номером на всю ширину, колонка номера
     уходит, кнопка удаления тянется на обе колонки. */
  .spec-tbl td.spec-tbl__n { display: none; }
  .spec-tbl th[scope='row'] { display: block; grid-column: 1 / -1; padding: 0; }
  .spec-tbl__nomer { display: inline; color: var(--tekst-3); margin-right: var(--s8); }
  .spec-tbl__x [data-spec-udalit] { grid-column: 1 / -1; justify-self: start; margin-top: var(--s4); }
  .spec-tbl tfoot { display: block; }
  .spec-tbl tfoot th, .spec-tbl tfoot td { border-top: 0; padding-top: 0; }
  .spec-tbl tfoot th[scope='row'] { grid-column: 1 / -1; }
  .spec-dejstviya > * { flex: 1 1 calc(50% - var(--s12)); }
  .spec-ochistka, .spec-ochistka > .btn, .spec-ochistka__vopros { flex: 1 1 auto; justify-content: center; }
}

/* -- сцена: одна заявка на всю партию ------------------------------------------ */
.spec-scena { display: grid; gap: var(--s32); }
.spec-scena__zag { max-width: 16ch; }
.spec-scena__punkty .punkt { max-width: 40ch; }
@media (min-width: 1024px) {
  .spec-scena { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s48); align-items: end; }
}

/* -- форма заявки на странице ------------------------------------------------- */
.spec-zapros__zag { margin-top: var(--s12); }

/* -- поднос на телефоне: одна полоса не выше 64 px ------------------------------
   Итог до двух строк моно по 16 px (в одну на 320 тонны обрезались бы
   многоточием, а тонны — главное в итоге), одна кнопка «Открыть»;
   «Отправить» живёт на странице спецификации. Кнопка 40 выше двух строк:
   8 + 40 + 8 и линия сверху из каркаса = 57. */
@media (max-width: 699px) {
  .podnos__in { flex-wrap: nowrap; gap: var(--s12); padding-block: var(--s8); }
  .podnos__itog { flex: 1 1 auto; min-width: 0; line-height: var(--i-mono); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .podnos__knopki { flex: none; }
  .podnos__knopki [data-spec-otpravit] { display: none; }
}
/* Очистка в подносе снимается ниже 900. Замер: с ней кнопки переносятся во
   второй ряд и полоса растёт с 69 до 109 px — это треть видимой выдачи,
   отнятая у того, кто ещё набирает список. Очистка там живёт на странице
   спецификации, куда ведёт «Открыть». */
@media (max-width: 899px) { .podnos .spec-ochistka { display: none; } }

/* ==== 17-dokumenty.css ==== */
/* ============================================================================
   TAMINOTA STEEL · СТРАНИЦА «ДОКУМЕНТЫ»: шесть документов развёрнуто рядом с
   двумя бланками, таблица «кто выдаёт», две врезки. Величины — токены
   00-tokeny.css; бланки стилизованы в 02-komponenty.css.
   ========================================================================== */
.dok-polno { padding-top: var(--s16); }
.dok-polno__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s48); }
.dok-polno__in > * { min-width: 0; }
.dok-polno__spisok { display: grid; border-top: var(--liniya-w) solid var(--liniya); }
.dokument { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s16); padding-block: var(--s24); border-bottom: var(--liniya-w) solid var(--liniya); align-items: start; }
.dokument__n { padding-top: var(--s4); min-width: 2ch; }
.dokument__telo { display: grid; gap: var(--s12); min-width: 0; }
.dokument__korotko { font-size: var(--k-tekst); line-height: var(--i-tekst); max-width: var(--mera-tekst); }
.dokument__podrobno { font-size: var(--k-melkij); line-height: var(--i-melkij); color: var(--tekst-2); max-width: var(--mera-tekst); }
.dok-polno__blanki { display: grid; gap: var(--s16); align-content: start; }
@media (min-width: 700px) {
  .dokument { column-gap: var(--s24); padding-block: var(--s32); }
  .dok-polno__blanki { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .dok-polno__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s64); align-items: start; }
  .dok-polno__blanki { grid-template-columns: 1fr; position: sticky; top: calc(var(--shapka-h) + var(--s24)); }
  .dok-polno__blanki .blank:nth-child(2) { margin-left: var(--s48); }
}
/* Лёгкая версия: липкие элементы становятся статичными */
html[data-legko] .dok-polno__blanki { position: static; }

/* Таблица ролей: три текстовые колонки, первая — документ — жирнее */
.tbl--roli th[scope='row'] { font-family: var(--f-tekst); letter-spacing: 0; font-size: var(--k-melkij); line-height: var(--i-melkij); text-transform: none; }
.tbl--roli thead th { text-align: left; }
@media (min-width: 700px) {
  .tbl--roli th, .tbl--roli td { width: 33.333%; }
}

/* Две врезки под таблицей */
.dok-vrezki { display: grid; gap: var(--s32); margin-top: var(--s48); }
.dok-vrezka { display: grid; gap: var(--s8); }
@media (min-width: 1024px) { .dok-vrezki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s48); } }