/* style.css — правила показа сайта RP Partners Group.
 *
 * РЕВИЗИЯ 2 (слово Владельца 14.08.2026): СВЕТЛЫЙ РЕГИСТР ПРОФИЛЯ ГРУППЫ — тёплая бумага,
 * белые карточки с волосяной границей и бронзовой верхней линейкой, один бронзовый акцент,
 * графика из документа-источника. Тень только у плавающего слоя; движение — появление и
 * набор числа, только transform и opacity.
 *
 * ЗДЕСЬ НЕТ НИ ОДНОЙ ВЕЛИЧИНЫ ОБЛИКА. Цвета, кегли, промежутки, доли, длительности — всё
 * читается из записей темы (/site/tokens.css), рождённых presentation.js. Правило, набравшее
 * число мимо записи, ловится сторожем набора.
 *
 * ДВИЖЕНИЕ ОБЪЯВЛЕНО ДВУМЯ СЛОЯМИ. Начальное состояние появления ставится ЗДЕСЬ только под
 * признаком data-motion-ready на корне: без сценария страница обязана читаться целиком —
 * посетитель без исполнения сценариев не получает пустых мест.
 */

/* ── ОСНОВА ─────────────────────────────────────────────────────────────────────────── */

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

/* ПЕРЕХОД К РАЗДЕЛУ — МГНОВЕННЫЙ. Плавная прокрутка через всю страницу успевает поймать
 * подгрузку изображений и якорение прокрутки обозревателя: цель уезжает по ходу хода, и
 * читатель не доезжает до раздела с первого нажатия (замечание Владельца 15.08.2026).
 * Отступ якоря — высота шапки: закреплённая шапка иначе накрывает имя раздела. */
.spread { scroll-margin-top: var(--header-h); }

body {
  font-family: var(--font-text);
  font-size: var(--size-body);
  font-weight: var(--w-body);
  line-height: var(--leading-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none;
    transition: none;
  }
}

::selection { background: var(--accent); color: var(--on-accent); }

a { color: inherit; }

:focus-visible {
  outline: var(--focus-ring) solid var(--accent);
  outline-offset: var(--focus-gap);
}

#top { position: absolute; top: var(--none); }

/* ── ШАПКА (плавающий слой — единственный носитель глубины) ─────────────────────────── */

.header {
  position: fixed;
  top: var(--none);
  left: var(--none);
  right: var(--none);
  z-index: var(--header-z);
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--step-6);
  padding: var(--none) var(--side-pad);
  background: var(--card);
  border-bottom: var(--hairline) solid var(--rule);
  box-shadow: var(--depth-float);
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: var(--step-2);
  text-decoration: none;
  min-height: var(--touch-size);
  align-items: center;
}

.brand-word {
  font-weight: var(--w-title);
  font-size: var(--size-subhead);
  letter-spacing: var(--tracking-title);
  white-space: nowrap;
}

.menu { margin-left: auto; }

.menu-wide {
  display: flex;
  gap: var(--step-5);
}

.menu-item {
  font-family: var(--font-data);
  font-size: var(--size-menu);
  font-weight: var(--w-medium);
  letter-spacing: var(--tracking-menu);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-quiet);
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-size);
  transition: color var(--dur-response) var(--ease-response);
}

.menu-item:hover { color: var(--accent); }

/* узкое меню: три черты, панель под шапкой */
.menu-narrow { display: none; position: relative; }

.menu-narrow summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--bar-gap);
  min-width: var(--touch-size);
  min-height: var(--touch-size);
  align-items: center;
}

.menu-narrow summary::-webkit-details-marker { display: none; }

.menu-narrow summary i {
  display: block;
  width: var(--menu-bar);
  height: var(--bar-w);
  background: var(--ink);
  transition: transform var(--dur-response) var(--ease-response);
}

.menu-narrow[open] summary i:first-child { transform: translateY(calc(var(--bar-gap) + var(--bar-w))) rotate(45deg); }
.menu-narrow[open] summary i:nth-child(2) { transform: scaleX(0); }
.menu-narrow[open] summary i:last-child { transform: translateY(calc(var(--none) - var(--bar-gap) - var(--bar-w))) rotate(-45deg); }

.menu-panel {
  position: absolute;
  right: var(--none);
  top: var(--full);
  width: var(--menu-panel);
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  padding: var(--step-3);
  box-shadow: var(--depth-float);
}

.menu-panel .menu-item { padding: var(--none) var(--step-4); }

.lang { display: flex; gap: var(--step-1); }

.lang-item {
  font-family: var(--font-data);
  font-size: var(--size-menu);
  letter-spacing: var(--tracking-menu);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink-faint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--lang-h);
  height: var(--lang-h);
  border: var(--hairline) solid var(--rule);
  transition: color var(--dur-response) var(--ease-response);
}

a.lang-item:hover { color: var(--accent); border-color: var(--accent); }

.lang-active { color: var(--on-accent); background: var(--accent); border-color: var(--accent); }

/* ── РАЗВОРОТ ───────────────────────────────────────────────────────────────────────── */

main { padding-top: var(--header-h); }

.spread {
  border-bottom: var(--hairline) solid var(--rule);
}

.spread-field {
  max-width: var(--canvas);
  margin: var(--none) auto;
  padding: var(--spread-pad) var(--side-pad);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* номер и титул разворота */
.spread-head {
  display: flex;
  align-items: baseline;
  gap: var(--step-3);
}

.spread-number {
  font-family: var(--font-data);
  font-size: var(--size-subhead);
  font-weight: var(--w-semibold);
  color: var(--accent);
}

.spread-total {
  font-family: var(--font-data);
  font-size: var(--size-quiet);
  color: var(--ink-faint);
}

.spread-title {
  font-size: var(--size-title);
  font-weight: var(--w-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--accent);
  text-wrap: balance;
  max-width: var(--line);
}

.translation-sign {
  font-family: var(--font-data);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-faint);
  border: var(--hairline) solid var(--rule);
  padding: var(--step-1) var(--step-2);
  align-self: center;
}

/* ── ОРГАНЫ: ОБЩЕЕ ──────────────────────────────────────────────────────────────────── */

.kicker {
  display: block;
  font-family: var(--font-data);
  font-size: var(--size-micro);
  font-weight: var(--w-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--accent);
  margin-bottom: var(--step-3);
}

/* ЗАГОЛОВОК БЛОКА — ВТОРАЯ СТУПЕНЬ ЛЕСТНИЦЫ. Он открывает блок, под ним стоит вводный
 * абзац, и потому он крупнее абзаца: прежде было наоборот, и заголовок читался подписью. */
.organ-heading {
  font-size: var(--size-heading);
  font-weight: var(--w-title);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-title);
  margin-bottom: var(--step-4);
  max-width: var(--line);
}

.organ-note {
  color: var(--ink-faint);
  font-size: var(--size-quiet);
  line-height: var(--leading-quiet);
  margin-top: var(--step-3);
  max-width: var(--line);
}

.text-column {
  max-width: var(--line);
  color: var(--ink-quiet);
}

.text-column + .text-column { margin-top: var(--step-4); }

/* СТРОКА РАЗВОРОТА — подзаголовок под именем раздела и итоговая строка в конце. Идёт ВО ВСЮ
 * ширину строки: в источнике она стоит прямо под заголовком, а не колонкой сбоку. */
.organ-lede .line-text,
.organ-summary .line-text {
  max-width: none;
  font-size: var(--size-lede);
  line-height: var(--leading-body);
}

.organ-lede .line-text { color: var(--ink-quiet); }

.organ-summary .line-text {
  color: var(--ink);
  font-weight: var(--w-semibold);
}

.line-text + .line-text { margin-top: var(--step-4); }

/* Текстовый орган, занявший строку ОДИН, идёт во всю ширину ячейки: узкая колонка посреди
 * полотна оставила бы справа пустое поле. Колонками он раскладывается ТОЛЬКО когда абзацев
 * несколько: одно предложение, разрезанное пополам, читается двумя обрывками. Меру называет
 * сборка — она одна знает, чем кончилась строка и сколько в органе абзацев. */
.organ-text[data-measure] .text-column { max-width: none; }

.organ-text[data-measure="columns"] .text-column {
  column-count: var(--lede-cols);
  column-gap: var(--gap);
}

/* ── ПОЛОСА ПОКАЗАТЕЛЕЙ ─────────────────────────────────────────────────────────────── */
/* Числа группы стоят РЯДОМ НА БУМАГЕ, как на листе источника: карточка превратила бы величину
 * в предмет, а здесь важна сама величина. Опоры и рамок нет — только волосяная линия сверху. */

.organ-band {
  display: grid;
  grid-template-columns: var(--grid-figures-row);
  gap: var(--gap);
  border-top: var(--hairline) solid var(--rule);
  padding-top: var(--step-5);
}

.figure {
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
}

.figure-value {
  font-size: var(--size-figure);
  font-weight: var(--w-title);
  line-height: var(--leading-figure);
  letter-spacing: var(--tracking-figure);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.figure-unit {
  font-size: var(--size-subhead);
  font-weight: var(--w-semibold);
  color: var(--accent);
}

.figure-label {
  font-size: var(--size-quiet);
  line-height: var(--leading-quiet);
  color: var(--ink-quiet);
}

/* ── ГЕРОЙ: РАЗРЕЗАННЫЙ ЭКРАН С ЭСКИЗОМ ─────────────────────────────────────────────── */

/* Высота титульного разворота идёт ПО СОДЕРЖИМОМУ. Резерв в целый экран прогонялся 15.08 и
 * снят в тот же день: на высоком окне он давал полосу пустоты между текстом и следующим
 * блоком — ту самую дыру, ради снятия которой запрет резервировать высоту и заведён.
 * Присутствие первого экрана даётся РАЗМЕРОМ ВРЕЗКИ, а не воздухом под нею. */
.organ-hero {
  display: flex;
  align-items: start;
  gap: var(--gap);
}

.hero-text {
  flex: var(--none) var(--none) var(--hero-text-w);
  max-width: var(--hero-text-w);
  display: flex;
  flex-direction: column;
  gap: var(--step-6);
}

/* ИМЯ ГРУППЫ — ГЛАВНЫЙ ЗАГОЛОВОК РАЗВОРОТА, а не надзаголовок-украшение (замечание
 * Владельца 15.08.2026). Оно набрано первой ступенью лестницы и своим титулом разворот
 * больше не повторяется: на этом развороте имя и есть титул. */
.hero-kicker {
  font-size: var(--size-title);
  font-weight: var(--w-title);
  line-height: var(--leading-title);
  letter-spacing: var(--tracking-title);
  color: var(--accent);
}

.hero-title {
  font-size: var(--size-display);
  font-weight: var(--w-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero-lede {
  max-width: var(--line);
  color: var(--ink-quiet);
  display: flex;
  flex-direction: column;
  gap: var(--step-4);
}

.hero-actions { display: flex; gap: var(--step-4); }

/* ЭСКИЗ НА ТИТУЛЕ — ИЛЛЮСТРАЦИЯ НА СТРАНИЦЕ, А НЕ КАРТОЧКА. В источнике он лежит на бумаге
 * без рамки и подложки; карточное убранство делало из титульной страницы технический бланк. */
.hero-plate {
  flex: var(--grow);
  min-width: var(--none);
}

.hero-image {
  width: var(--full);
  height: auto;
  display: block;
}

.plate-caption {
  font-family: var(--font-data);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-faint);
  margin-top: var(--step-3);
}

/* ── ОРГАН ПРИЗЫВА ──────────────────────────────────────────────────────────────────── */

.cta-button {
  display: inline-flex;
  align-items: center;
  gap: var(--step-3);
  min-height: var(--touch-size);
  padding: var(--step-3) var(--step-6);
  background: var(--accent);
  color: var(--on-accent);
  text-decoration: none;
  font-weight: var(--w-semibold);
  letter-spacing: var(--tracking-menu);
  text-transform: uppercase;
  font-size: var(--size-quiet);
  font-family: var(--font-data);
  border-radius: var(--radius);
  transition: background var(--dur-response) var(--ease-response);
}

.cta-button:hover { background: var(--accent-deep); }

.cta-note { font-weight: var(--w-body); text-transform: none; letter-spacing: var(--none); }

/* ── BENTO: РЯД НЕРАВНЫХ ПЛИТОК ─────────────────────────────────────────────────────── */

.bento {
  display: grid;
  grid-template-columns: var(--grid-bento);
  gap: var(--gap-tight);
}

/* Вводный абзац блока не прилипает к ряду плиток: между сказанным и показанным есть промежуток
 * (замечание Владельца 15.08.2026). Промежуток берётся шкалой, числом здесь не набирается. */
.text-column:last-of-type + .bento { margin-top: var(--step-6); }

.bento-tile {
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  border-top: var(--accent-line) solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--step-2);
  min-width: var(--none);
}

.bento-tile[data-span="3"] { grid-column: span 3; }
.bento-tile[data-span="4"] { grid-column: span 4; }
.bento-tile[data-span="5"] { grid-column: span 5; }
.bento-tile[data-span="6"] { grid-column: span 6; }
.bento-tile[data-span="7"] { grid-column: span 7; }
.bento-tile[data-span="12"] { grid-column: var(--full-row); }

.tile-code {
  font-family: var(--font-data);
  font-size: var(--size-quiet);
  font-weight: var(--w-semibold);
  color: var(--accent);
}

.tile-value {
  display: flex;
  align-items: baseline;
  gap: var(--step-2);
  flex-wrap: wrap;
}

/* Значение и его единица — ОДНОГО кегля: они равноценны. Кегль задаёт РЯД: где все
 * величины коротки — крупно, где есть развёрнутое значение — ровно, чтобы соседи одного
 * смысла не выглядели разного веса. */
.bento[data-values="plain"] .tile-number,
.bento[data-values="plain"] .tile-unit {
  font-size: var(--size-lede);
  font-weight: var(--w-semibold);
  color: var(--ink);
  line-height: var(--leading-heading);
}

.tile-number {
  font-size: var(--size-figure);
  font-weight: var(--w-title);
  line-height: var(--leading-figure);
  letter-spacing: var(--tracking-figure);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.tile-unit {
  font-family: var(--font-data);
  font-size: var(--size-figure);
  color: var(--accent);
  line-height: var(--leading-figure);
}

.tile-title {
  font-size: var(--size-subhead);
  font-weight: var(--w-heading);
  line-height: var(--leading-heading);
}

.tile-label,
.tile-meta {
  font-family: var(--font-data);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-faint);
}

.tile-text { color: var(--ink-quiet); font-size: var(--size-card); margin-top: auto; }

/* ЕДИНИЦА ДЕРЖИТСЯ ПРИ ЧИСЛЕ: короткий хвост величины переносу не подлежит. Длинный
 * хвост — уже пояснение, и он переносится как обычный текст. Границу длины объявляет
 * подача, признак ставит орган. */
.unit-tight { white-space: nowrap; }

/* первая плитка ряда отличается ПОДЛОЖКОЙ, а не кеглем: величины ряда равноценны */
.bento-tile:first-child { background: var(--wash); }

/* ── ВРЕЗКИ ПЛИТОК: логотипы, документы, свидетельства ──────────────────────────────── */

.tile-art {
  display: block;
  max-width: var(--full);
  max-height: var(--doc-h);
  width: auto;
  height: auto;
  margin: var(--none) auto;
}

/* логотипы обществ: коробка объявленных пределов, знак вписан целиком, прижат к началу */
[data-node="companies"] .tile-art {
  max-height: var(--logo-h);
  max-width: var(--logo-w);
  height: auto;
  width: auto;
  object-fit: contain;
  margin: var(--none) var(--none) var(--step-4);
}

/* документы (письма, патент, кейс): лист на белом, волосяная рамка */
[data-node="proofs"] .tile-art,
[data-node="case"] .tile-art {
  border: var(--hairline) solid var(--rule-soft);
}

/* ── ОТКЛИК НА НАВЕДЕНИЕ ────────────────────────────────────────────────────────────── */
/* Частица под указателем приподнимается и берёт акцентную границу: это СООБЩЕНИЕ О
 * СОСТОЯНИИ, а не украшение. Движется только transform — раскладка не пересчитывается. */

.bento-tile,
.spec-card,
.stack-card,
.organ-contacts {
  transition: transform var(--dur-response) var(--ease-response),
    border-color var(--dur-response) var(--ease-response);
}

.bento-tile:hover,
.spec-card:hover,
.stack-card:hover,
.organ-contacts:hover {
  transform: translateY(var(--hover-lift));
  border-color: var(--accent);
}

/* Изображение, которое можно рассмотреть, объявляет это указателем и лёгким приближением. */
[data-zoom] { cursor: zoom-in; transition: transform var(--dur-response) var(--ease-response); }
.bento-tile:hover [data-zoom],
.spec-card:hover [data-zoom] { transform: scale(1.02); }

/* ── СЛОЙ УВЕЛИЧЕНИЯ ────────────────────────────────────────────────────────────────── */
/* Плавающий слой: тень канон разрешает только ему и шапке. Появляется по нажатию на
 * изображение, закрывается нажатием и клавишей выхода; без сценария слоя нет вовсе. */

.zoom-layer {
  position: fixed;
  inset: var(--none);
  z-index: var(--zoom-z);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--zoom-pad);
  background: var(--veil);
  opacity: 0;
  transition: opacity var(--dur-response) var(--ease-out);
  cursor: zoom-out;
}

.zoom-layer[data-zoom-shown] { opacity: 1; }

.zoom-image {
  max-width: var(--zoom-max-w);
  max-height: var(--zoom-max-h);
  width: auto;
  height: auto;
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-card);
}

/* ── КАРТОЧКИ ВЕЛИЧИН (продукты) ────────────────────────────────────────────────────── */

/* карточки линейки — ОДНОЙ ВЫСОТЫ, и части их совпадают построчно: коробка рендера
 * объявлена одной величиной, заголовок стоит на одном уровне, строки величин идут
 * от общей опоры. Разная пропорция рендеров сдвигала соседа на десятки точек. */
.specs {
  display: grid;
  grid-template-columns: var(--grid-specs);
  gap: var(--gap);
  align-items: stretch;
}

.spec-card {
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  border-top: var(--accent-line) solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
  display: flex;
  flex-direction: column;
}

.spec-art {
  display: block;
  width: var(--full);
  height: var(--spec-art-h);
  object-fit: contain;
  margin-bottom: var(--step-5);
}

.spec-head {
  font-size: var(--size-subhead);
  font-weight: var(--w-title);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-heading);
  margin-bottom: var(--step-5);
}

.spec-rows { display: flex; flex-direction: column; margin-top: auto; }

.spec-row {
  display: flex;
  min-height: var(--spec-row-h);
  align-items: center;
  justify-content: space-between;
  gap: var(--step-4);
  padding: var(--step-3) var(--none);
  border-bottom: var(--hairline) solid var(--rule-soft);
}

.spec-row:last-child { border-bottom: var(--none); }

.spec-name {
  font-family: var(--font-data);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-table);
  color: var(--ink-faint);
  flex: var(--none) var(--none) var(--name-col);
}

.spec-value { text-align: right; }

.spec-number { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }

.spec-value-big .spec-number {
  font-size: var(--size-lede);
  font-weight: var(--w-title);
  letter-spacing: var(--tracking-figure);
  color: var(--accent);
}

.spec-unit { color: var(--ink-quiet); }

/* ── ГРАНИ (гибкость) ───────────────────────────────────────────────────────────────── */
/* Грани читают по одной и сравнивают между собой — они стоят СЕТКОЙ, а не липкой стопкой.
 * Стопка ревизии 1 накладывала карточки друг на друга: шаг закрепления меньше высоты
 * заголовка, и второй номер садился на первый (замер живой страницы 14.08). */

.stack {
  display: grid;
  grid-template-columns: var(--grid-2);
  gap: var(--gap-tight);
  align-items: stretch;
}

.stack-card {
  display: flex;
  gap: var(--gap-tight);
  align-items: baseline;
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  border-top: var(--accent-line) solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.stack-index {
  font-family: var(--font-data);
  font-size: var(--size-figure);
  font-weight: var(--w-title);
  line-height: var(--leading-figure);
  letter-spacing: var(--tracking-figure);
  color: var(--accent);
  flex: var(--none) var(--none) auto;
}

.stack-body { display: flex; flex-direction: column; gap: var(--step-2); }

.stack-title {
  font-size: var(--size-subhead);
  font-weight: var(--w-title);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-heading);
  text-transform: uppercase;
}

.stack-meta {
  font-family: var(--font-data);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-faint);
}

.stack-text { color: var(--ink-quiet); max-width: var(--line); }

/* ── ПРИЗЫВ (контакты) ──────────────────────────────────────────────────────────────── */

.organ-call {
  display: flex;
  flex-direction: column;
  gap: var(--step-6);
  padding: var(--step-8) var(--none);
}

.call-title {
  font-size: var(--size-mega);
  font-weight: var(--w-title);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
  color: var(--accent);
}

.call-text {
  max-width: var(--line);
  color: var(--ink-quiet);
  font-size: var(--size-lede);
  line-height: var(--leading-body);
}

.call-actions { display: flex; gap: var(--step-4); }

.call-figure { margin: var(--none); }

.call-art {
  display: block;
  width: var(--full);
  height: auto;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-card);
}

/* ── СЛАЙДШОУ ───────────────────────────────────────────────────────────────────────── */
/* Виды показываются по очереди. БЕЗ СЦЕНАРИЯ виден первый, остальные идут под ним обычными
 * изображениями — содержимое доступно всегда; очерёдность есть удобство, а не условие. */

.slideshow { display: flex; flex-direction: column; gap: var(--step-3); }

.slide-track { display: flex; flex-direction: column; gap: var(--gap-tight); }

.slide { margin: var(--none); }

.slide-image {
  display: block;
  width: var(--full);
  height: auto;
  border: var(--hairline) solid var(--rule);
  border-radius: var(--radius-card);
}

/* Под сценарием виды ложатся друг на друга и сменяются прозрачностью. */
[data-slides-ready] .slide-track {
  display: grid;
  grid-template-columns: var(--rest);
}

[data-slides-ready] .slide {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity var(--dur-slide) var(--ease-out);
}

[data-slides-ready] .slide[data-slide-shown] { opacity: 1; }

/* ── ПЕРЕЧЕНЬ СВЯЗИ ─────────────────────────────────────────────────────────────────── */

.organ-contacts {
  background: var(--card);
  border: var(--hairline) solid var(--rule);
  border-top: var(--accent-line) solid var(--accent);
  border-radius: var(--radius-card);
  padding: var(--card-pad);
}

.contact {
  display: flex;
  align-items: baseline;
  gap: var(--step-4);
  padding: var(--step-2) var(--none);
}

.contact-label {
  font-family: var(--font-data);
  font-size: var(--size-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--ink-faint);
  flex: var(--none) var(--none) var(--name-col);
}

.contact-value a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: var(--hairline) solid var(--accent);
  transition: color var(--dur-response) var(--ease-response);
}

.contact-value a:hover { color: var(--accent); }

/* ── КЛАСТЕР МЕЛКОГО ────────────────────────────────────────────────────────────────── */

.cluster {
  display: grid;
  grid-template-columns: var(--grid-2);
  gap: var(--gap);
  align-items: start;
}

.cluster > :last-child:nth-child(odd) { grid-column: var(--full-row); }

/* ── ДОМИНАНТА ──────────────────────────────────────────────────────────────────────── */

.dominant { width: var(--full); }

/* ── ПОДВАЛ ─────────────────────────────────────────────────────────────────────────── */

.footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--step-3);
  max-width: var(--canvas);
  margin: var(--none) auto;
  padding: var(--step-6) var(--side-pad);
  color: var(--ink-faint);
  font-size: var(--size-quiet);
  font-family: var(--font-data);
}

.footer-dot { color: var(--accent); }

/* ── ДВИЖЕНИЕ: НАЧАЛЬНОЕ СОСТОЯНИЕ ТОЛЬКО ПОД ПРИЗНАКОМ СЦЕНАРИЯ ────────────────────── */

[data-motion-ready] [data-motion="reveal"] {
  opacity: 0;
  transform: translateY(var(--reveal-shift));
  transition: opacity var(--dur-reveal) var(--ease-out),
    transform var(--dur-reveal) var(--ease-out);
  will-change: transform, opacity;
}

[data-motion-ready] [data-motion="reveal"][data-motion-shown] {
  opacity: 1;
  transform: none;
}

/* ── СРЕДНИЙ МЕТОД ──────────────────────────────────────────────────────────────────── */

@media (max-width: 1179px) {
  .organ-hero { flex-direction: column; align-items: stretch; }
  .hero-text { max-width: var(--full); flex: var(--grow); }
}

/* ── УЗКИЙ МЕТОД: ЯВНЫЙ КОЛЛАПС СЕТОК ───────────────────────────────────────────────── */

@media (max-width: 768px) {
  .menu-wide { display: none; }
  .menu-narrow { display: block; }

  .spread-title { font-size: var(--size-title); }

  .bento { grid-template-columns: var(--grid-bento); }
  .bento-tile[data-span="3"],
  .bento-tile[data-span="4"],
  .bento-tile[data-span="5"],
  .bento-tile[data-span="6"],
  .bento-tile[data-span="7"] { grid-column: auto; }
  .bento-tile[data-span="12"] { grid-column: var(--full-row); }

  .specs { grid-template-columns: var(--grid-specs); }

  .cluster { grid-template-columns: var(--flex-col); }
  .cluster > :last-child:nth-child(odd) { grid-column: auto; }

  .stack { grid-template-columns: var(--flex-col); }
  .stack-card { flex-direction: column; gap: var(--step-3); }

  .spec-row { flex-direction: column; align-items: flex-start; gap: var(--step-1); }
  .spec-name { flex: var(--grow); }
  .spec-value { text-align: left; }

  .contact { flex-direction: column; gap: var(--step-1); }

  .footer { flex-direction: column; align-items: flex-start; }
  .footer-dot { display: none; }
}