/* СКОПИРОВАНО МАШИНОЙ — ПРАВИТЬ ЗДЕСЬ НЕЛЬЗЯ.
 * Источник: 02-ERFOLG/site/_shared/zhurnal/zhurnal.css
 * Правка в этой копии живёт до первой синхронизации и молча исчезает.
 * Разнести заново: python3 02-ERFOLG/site/sync_zhurnal.py
 */
/* ── ФОН СТРАНИЦ ЖУРНАЛА ────────────────────────────────────────────────────
   12.09.2026, её слова: «фон слишком бежевый — мы смотрели статьи в форбс и
   крутых изданиях, но исполнитель выбрала оттуда не принцип вёрстки статьи на
   сайт, а размеры высот». Замечание точное: из четырёх разобранных изданий
   принесли колонки, кегли и интерлиньяжи — а не то, на чём эти числа стоят.

   А стоят они на белом. Forbes, Architectural Digest, Kinfolk, The
   Gentlewoman — у всех четырёх страница статьи белая или почти белая, и это
   не вкус эпохи: долгий текст читают с листа, а лист бумажно-белый. Наш
   тёплый беж (--bg: #f7f3ec) — лицо ВИТРИНЫ, где он и уместен: он держит
   кадры товара и золото. Но восемь экранов текста на нём читаются глуше, и
   бежевое пятно спорит с самими кадрами.

   Поэтому у журнала свой фон — бумага (--paper: #fffdf9), тот же токен, на
   котором уже стоят карточки подборщика. Своего цвета журнал не заводит:
   третьего значения в палитре не появляется, меняется только роль
   существующего. В тёмной теме --paper тоже определён (#201c14) — значит
   переключение работает само, без второго правила.

   Фон задаётся на .zh (корень страницы журнала), а не на body: body один на
   весь сайт, и трогать его значило бы перекрасить витрину заодно. */
.zh { background: var(--paper, #fffdf9) }
html:has(.zh) body { background: var(--paper, #fffdf9) }

/* ═══════════════════════════════════════════════════════════════════════════
   ЖУРНАЛ — оформление списка и статьи, одно на все витрины. 09.09.2026.

   ЦВЕТ ЧИСЛОМ ЗДЕСЬ НЕ ПИШЕТСЯ ВООБЩЕ. Все значения — var(--pb-*), то есть в
   конце концов палитра самого сайта. Вбитый числом цвет не переключается
   вместе с тёмной темой: :root обновится, а это место останется в прежней
   гамме (audit_site.py, check_color_in_css). Переменные --pb-* объявлены на
   классе .pb (podborshchik.css) — его несёт <main> обеих страниц журнала, тот
   же приём, что у страницы раздела.

   РАЗМЕРЫ И РИТМ — общие токены _shared/tokens/core.css, нижняя граница шкалы:
   «все размашистые места плотнее — чтоб не скроллить клиенту» (Айгуль,
   28.08.2026). У статьи это особенно заметно: длинный текст с воздушными
   отбивками растягивается на три лишних экрана и до конца его не дочитывают.

   КРАСНАЯ СТРОКА НЕ ОБЪЯВЛЯЕТСЯ ЗДЕСЬ. Правило `p { text-indent: 1.5em }`
   стоит на всём сайте (home.css, по RULES.md), и текст статьи получает его
   сам. Здесь она только СНИМАЕТСЯ там, где мешает: лид, подпись под снимком,
   кнопка, дата — по правилам красной строки отступа не имеют.
   ═══════════════════════════════════════════════════════════════════════════ */

.zh {
  max-width: var(--wrap, 1200px);
  margin: 0 auto;
  padding: var(--space-4, 40px) var(--gutter, 32px) var(--space-5, 64px);
}

/* ── ОБЩАЯ ШАПКА ОБЕИХ СТРАНИЦ ──────────────────────────────────────────── */

/* ЗАГОЛОВКИ ПО ЦЕНТРУ — решение Айгуль 09.09.2026, дословно: «все заголовки =
   посередине расположение, не слева». Касается заголовков, а не текста: абзацы
   остаются по левому краю, потому что выключка по центру в длинном тексте рвёт
   строку — глаз теряет начало следующей.

   Сама шапка тоже центрируется как блок (margin auto), а не только текст
   внутри неё: выключенный по центру текст в блоке, прижатом влево, встаёт не
   посередине страницы, и это читается как сбитая вёрстка, а не как решение. */
.zh-shapka {
  max-width: var(--measure, 65ch);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.zh-nad {
  display: block;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
  text-indent: 0;
}
.zh-imya {
  margin: var(--space-1, 8px) 0 0;
  font-size: var(--fs-h2, 3rem);
  font-weight: var(--fw-h2, 400);
  line-height: var(--lh-h2, 1.08);
  letter-spacing: var(--tr-h2, -.01em);
  text-indent: 0;
}
/* ── АВТОР ──────────────────────────────────────────────────────────────────
   Заведено 12.09.2026 её словами «я автор». Стоит между датой и лидом — тот
   же порядок, что у всех четырёх изданий, по которым сверялись 11.09.2026:
   сначала когда, потом кто, потом о чём.

   Регистр НЕ прописной, в отличие от соседней даты. Причина не во вкусе:
   прописные съедают написание марок и имён — «BeCo» выходит «BECO», а
   переписывать марку запрещает фирстиль (BRAND-SYSTEM, §8.4). У изданий в
   кредитах тот же смешанный регистр — у трёх из четырёх.

   Цвет — чернила, а не приглушённый: имя автора это не служебная строка. В
   приглушённом идёт только роль, и она ниже по кеглю: имя должно читаться
   первым. */
.zh-avtor {
  margin: var(--space-1, 8px) auto 0;
  font-size: var(--fs-cap, .9375rem);
  line-height: 1.4;
  color: var(--pb-ink);
  text-indent: 0;
}
.zh-avtor a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--pb-line);
}
.zh-avtor a:hover { border-bottom-color: currentColor }
.zh-avtor span {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
}

.zh-lid {
  margin: var(--space-2, 16px) auto 0;
  font-size: var(--fs-lead, 1.25rem);
  line-height: var(--lh-lead, 1.5);
  color: var(--pb-ink);
  text-indent: 0;
}

/* ── СПИСОК СТАТЕЙ ──────────────────────────────────────────────────────────
   Плитка ведёт себя как плитка товара (.pb-tovar): без рамки и заливки,
   отделяется воздухом. Причина та же — «белые рамки дешевые» (Айгуль,
   29.08.2026). Своей копии стилей плитки товара тут нет: у карточки статьи
   другое содержимое (дата, лид на три строки), общего только поведение.

   РАСКЛАДКА ДЕРЖИТ ЛЮБОЕ ЧИСЛО СТАТЕЙ — переделано 11.09.2026 по её словам:
   «erfolg.com.kz/zhurnal/ — непонятно… журнал для чего?» и «пропустил статью
   некрасивую ни по содержанию, ни по дизайну».

   Что было не так. Сетка стояла жёсткая, `repeat(3, 1fr)`. При одной статье
   это давало карточку в 363 px у левого края и две трети пустого экрана
   справа, при том что шапка над ней выключена по центру: ось страницы
   разъезжалась, и страница читалась как сбитая вёрстка, а не как молодой
   журнал. Жёсткая тройка ломается на каждом числе статей, не делящемся на
   три: при четырёх — одна карточка в левой трети последнего ряда, при
   пяти — две.

   Что сделано. Первая статья идёт КРУПНЫМ блоком на всю ширину (кадр и текст
   рядом), остальные — плитками, которые переносятся сами и остаток ряда
   доцентровывают (`justify-content: center`). Так раскладка достойна и при
   одной статье, и при двух, и при десяти, и остатка-дырки не бывает ни при
   каком числе.

   Выключка по центру сохранена — решение Айгуль 09.09.2026 («все заголовки =
   посередине расположение») здесь не отменяется: в крупном блоке текст
   выключен по центру внутри своей колонки, а сама колонка стоит напротив
   кадра. Левый край текста в этой системе не появляется нигде. */

.zh-lenta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4, 40px) var(--space-3, 24px);
  margin: var(--space-4, 40px) 0 0;
  padding: 0;
  list-style: none;
}

/* Плитка: не уже 300 и не шире 380 px. Верхняя граница нужна, чтобы одинокая
   плитка в остатке ряда не растягивалась на всю ширину и не притворялась
   главным блоком. */
.zh-lenta > li {
  display: flex;
  flex: 1 1 300px;
  min-width: 0;
  max-width: 380px;
}

/* ГЛАВНЫЙ БЛОК — первая (или единственная) статья.
   Кадр слева, текст напротив; на телефоне кадр сверху, текст под ним —
   порядок в разметке уже такой, отдельного правила не нужно. */
.zh-lenta > li.zh-glavnaya {
  flex: 1 1 100%;
  max-width: none;
}

.zh-glavnaya .zh-karta {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  grid-template-rows: repeat(4, auto);
  align-content: center;
  column-gap: var(--space-4, 40px);
}
/* Кадр занимает все четыре строки текстовой колонки и сам задаёт себе
   пропорцию: высоту блока определяет он, а не число строк лида. */
.zh-glavnaya .zh-karta-foto {
  grid-column: 1;
  grid-row: 1 / -1;
  align-self: center;
  aspect-ratio: 3 / 2;
}
/* Плашка под КАДР-ПРЕДМЕТ короче и квадратнее: вырез приходит квадратом, и в
   плашке 3:2 он встаёт по высоте, оставляя по 95 px пустого белого с каждой
   стороны — плашка тогда читается как недозаполненная коробка, а не как кадр.
   Замер 11.09.2026: при колонке 1.08fr плашка 568×379, сам предмет 379×379. */
.zh-glavnaya-predmet .zh-karta { grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); }
.zh-glavnaya-predmet .zh-karta-foto { aspect-ratio: 4 / 3; }
.zh-glavnaya-predmet .zh-karta-foto img { padding: var(--space-1, 8px); }
.zh-glavnaya .zh-data,
.zh-glavnaya .zh-karta-imya,
.zh-glavnaya .zh-karta-lid,
.zh-glavnaya .zh-karta-hod { grid-column: 2; }
.zh-glavnaya .zh-data { margin-top: 0; }
.zh-glavnaya .zh-karta-imya {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: var(--fw-h2, 400);
  line-height: 1.16;
  margin-top: var(--space-2, 16px);
}
.zh-glavnaya .zh-karta-lid {
  font-size: var(--fs-lead, 1.25rem);
  line-height: var(--lh-lead, 1.5);
  color: var(--pb-ink);
  margin-top: var(--space-2, 16px);
}

.zh-karta {
  display: flex;
  flex-direction: column;
  /* Плитка тянется на всю высоту своего ряда, а «читать разбор» уезжает вниз
     (margin-top: auto): заголовки статей разной длины, и без этого подпись у
     трёх плиток одного ряда стоит на трёх разных высотах — ряд выглядит
     оборванным. Длину заголовков при этом не выравниваем: «заголовки одной
     длины» — как раз признак машинной вёрстки. */
  flex: 1;
  color: inherit;
  text-decoration: none;
  transition: .25s var(--ease, ease);
  /* Плитка выключается по центру целиком, а не одним заголовком. Заголовок по
     центру при дате и лиде по левому краю читается как сбой вёрстки, а не как
     решение — а решение Айгуль 09.09.2026 про заголовки, не про перекос. */
  text-align: center;
}
.zh-karta:hover { transform: translateY(-2px); }

.zh-karta-foto {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pb-fon);
}
.zh-karta-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* КАДР-ПРЕДМЕТ: каталожный снимок вещи, вырезанной на белом фоне.
   Такой кадр нельзя обрезать по рамке, как обстановку: у обрезанного предмета
   пропадают концы, и вместо вещи получается фрагмент. Поэтому он вписывается
   целиком (`contain`) и лежит на белой плашке — белый под ним свой, снимок с
   плашкой сливается и не выглядит белым прямоугольником, вклеенным в тёплую
   страницу. Плашка белая и в тёмной теме намеренно: кадр всё равно белый, и
   тёмная подложка под ним дала бы ту же нашлёпку, только наоборот.
   Признак ставит разносчик по пропорции файла — см. sync_zhurnal.py::вид_кадра. */
.zh-karta-foto.zh-predmet {
  background: var(--pb-belyy);
  border: 1px solid var(--pb-line);
}
.zh-karta-foto.zh-predmet img {
  object-fit: contain;
  padding: var(--space-2, 16px);
  box-sizing: border-box;
}

.zh-data {
  display: block;
  margin-top: var(--space-2, 16px);
  font-size: var(--fs-label, .75rem);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
  text-indent: 0;
}

.zh-karta-imya {
  display: block;
  margin-top: var(--space-1, 8px);
  text-align: center;
  text-indent: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
  letter-spacing: var(--tr-h3, -.01em);
}

.zh-karta-lid {
  display: block;
  margin-top: var(--space-1, 8px);
  color: var(--pb-muted);
  line-height: var(--lh-body, 1.55);
}

.zh-karta-hod {
  display: block;
  margin-top: auto;
  padding-top: var(--space-2, 16px);
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-accent);
}

.zh-pusto { color: var(--pb-muted); text-indent: 0; }

/* ── СТРАНИЦА СТАТЬИ ────────────────────────────────────────────────────────
   Одна колонка шириной в строку чтения. Снимки выходят шире текста ровно на
   столько, чтобы читалась схема, — но не во всю ширину экрана: широкая
   картинка посреди узкого текста рвёт колонку и глаз возвращается наверх
   искать, где он читал. */

.zh-st { max-width: 46rem; }

.zh-st .zh-imya {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  line-height: 1.16;
}

/* ── ЛИД СТАТЬИ ─────────────────────────────────────────────────────────────
   ЧТО БЫЛО НЕ ТАК. Замер 11.09.2026: лид статьи шёл 20 px тем же шрифтом и тем
   же цветом, что тело (16 px, Raleway, #2a2018). Отличался он от абзаца ровно
   одним — кеглем на четыре пункта, — и читался не как лид, а как крупный
   первый абзац. У изданий лид — отдельный элемент: Kinfolk ставит его КРУПНЕЕ
   заголовка, The Gentlewoman — 28 px и шире колонки.

   ЧТО СДЕЛАНО И ЧЕГО НЕ СДЕЛАНО. Крупнее заголовка идти нельзя: заголовки на
   этом сайте выключены по центру (решение Айгуль 09.09.2026), и лид крупнее h1
   отобрал бы у страницы доминанту — а доминанта на холст ровно одна. Менять
   гарнитуру тоже нельзя: Playfair Display не содержит ә ғ қ ң ұ, а лид стоит
   на КАЖДОЙ статье, в отличие от необязательного выноса (память хаба «Шрифты —
   только с казахскими буквами»). Поэтому взяты три хода сразу, все внутри
   Raleway: кегль 20 → 26 px, интерлиньяж 1.5 → 1.3 и ШИРИНА БОЛЬШЕ КОЛОНКИ.

   ШИРИНА — ГЛАВНЫЙ ХОД, И ОН ЖЕ ДЕШЁВЫЙ ПО ВЫСОТЕ. Лид выходит до 52rem
   (832 px) против 640 px текстовой колонки, то есть шире её на 96 px с каждой
   стороны. Крупный кегль в узкой колонке добавил бы строк; тот же кегль в
   широкой укладывается в то же число строк, и подорожание выходит десятками
   пикселей, а не сотнями. Тот же приём и по той же причине, что у
   `.zh-figura.zh-shire`, включая max(100%, …): на телефоне выступать некуда,
   и там лид остаётся по ширине колонки. */
.zh-st .zh-lid {
  width: max(100%, min(52rem, calc(100vw - 2 * var(--gutter, 32px))));
  margin-left: 50%;
  transform: translateX(-50%);
  margin-top: var(--space-3, 24px);
  font-size: clamp(1.1875rem, 1rem + 1vw, 1.625rem);
  line-height: 1.3;
  letter-spacing: -.005em;
}

.zh-hero {
  margin: var(--space-3, 24px) 0 0;
  border-radius: 14px;
  overflow: hidden;
  background: var(--pb-fon);
}
.zh-hero img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  object-position: center 35%;
}

/* ГЕРОЙ-ПРЕДМЕТ. То же, что у кадра-предмета в списке, и по той же причине,
   плюс вторая: каталожный снимок вещи на белом не работает героем на
   пол-экрана. Правило хаба (память: «HOME не берёт клинические кадры»):
   голый студийный снимок на белом или сером годится для Med, а HOME —
   премиальная витрина, её лицом должна быть обстановка, а не деталь со
   склада. Пока обстановки нет, предмет показывается сдержанно: вписан
   целиком, высотой вполовину меньше обстановочного кадра.
   Замер 11.09.2026: решётка основания шла героем 672×420 на десктопе и
   343×343 на телефоне — это первое, что видел читатель разбора. */
.zh-hero.zh-predmet {
  background: var(--pb-belyy);
  border: 1px solid var(--pb-line);
  /* Плашка по размеру самого предмета, а не по ширине колонки: растянутая на
     672 px, она давала 412 px пустого белого по бокам от кадра 260×260 —
     то есть большую пустую карточку с маленькой вещью посередине. */
  width: fit-content;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.zh-hero.zh-predmet img {
  max-height: 260px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  padding: var(--space-2, 16px);
  box-sizing: border-box;
}

.zh-telo { margin-top: var(--space-4, 40px); }

/* ── ЧТО В РАЗБОРЕ: ОГЛАВЛЕНИЕ ПО ЯКОРЯМ ────────────────────────────────────
   Заведено 11.09.2026. Разбор идёт на восемь экранов и делится на девять
   разделов, а навигации по нему не было вовсе: читатель, пришедший с вопросом
   «как настроить жёсткость», листал весь текст или уходил. Оглавление — это
   ещё и ответ на вопрос «что мне это даёт», заданный Айгуль: человек видит
   список того, что узнает, до того как начал читать.

   Двумя колонками с 760 px и одной ниже: девять строк в одну колонку на
   мониторе выглядят списком дел, а не оглавлением, и занимают лишний экран. */
.zh-vnutri {
  margin: var(--space-3, 24px) 0 0;
  padding: var(--space-3, 24px) var(--space-3, 24px) var(--space-2, 16px);
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
}
.zh-vnutri-z {
  display: block;
  margin: 0 0 var(--space-2, 16px);
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
  text-align: center;
  text-indent: 0;
}
.zh-vnutri ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: zh-punkt;
}
.zh-vnutri li {
  counter-increment: zh-punkt;
  margin: 0 0 var(--space-1, 8px);
  /* 24 — из ряда отступов (8/16/24/40/64/96). Промежуточные числа вроде 28 в
     core.css прямо названы следами разных сессий, а не решением. */
  padding-left: var(--space-3, 24px);
  position: relative;
  font-size: var(--fs-cap, .9375rem);
  line-height: 1.4;
  text-indent: 0;
  break-inside: avoid;
}
.zh-vnutri li::before {
  content: counter(zh-punkt);
  position: absolute;
  left: 0;
  top: 0;
  font-size: var(--fs-label, .75rem);
  letter-spacing: 0;
  color: var(--pb-accent);
}
.zh-vnutri a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: .2s var(--ease, ease);
}
.zh-vnutri a:hover,
.zh-vnutri a:focus-visible { border-bottom-color: var(--pb-accent); outline: none; }

@media (min-width: 760px) {
  .zh-vnutri ol { columns: 2; column-gap: var(--space-4, 40px); }
}

.zh-telo h2 {
  margin: var(--space-4, 40px) 0 var(--space-2, 16px);
  /* ВЛЕВО, и только здесь — внутри текста статьи. Решение Айгуль 12.09.2026.
     Заголовки страниц, витрины и шапки статьи остаются по центру: её решение
     09.09.2026 «все заголовки = посередине расположение» касается их и не
     отменяется.

     Почему в статье иначе. Подзаголовок в длинном тексте работает не вывеской
     над блоком, а ЯКОРЕМ для глаза: за него цепляются, когда листают восемь
     экранов, и по нему решают, читать раздел или пропустить. Найти якорь глаз
     может только там, где ищет — у левого края, откуда начинается каждая
     строка текста под ним. По центру он в потоке не виден: глаз проходит мимо.
     У всех четырёх изданий, по которым сверялись 11.09.2026 (Forbes,
     Architectural Digest, Kinfolk, The Gentlewoman), подзаголовки слева.

     Честная оговорка: на телефоне разницы почти нет и это проверено замером —
     на 375 px колонка 343 px, и все восемь подзаголовков статьи занимают две
     три строки на полную ширину, отличается только последняя неполная строка.
     Но и там выключка влево ровнее: хвост заголовка встаёт по той же линии,
     что текст под ним, вместо того чтобы висеть посередине. */
  text-align: left;
  text-indent: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
  letter-spacing: var(--tr-h3, -.01em);
  /* Шапка сайта липкая. Без этого отступа переход по якорю ставит заголовок
     ПОД шапку, и читатель попадает в середину первого абзаца раздела. */
  scroll-margin-top: 96px;
}
.zh-telo h2:first-child { margin-top: 0; }

/* ── РИТМ ЧТЕНИЯ ────────────────────────────────────────────────────────────
   Мера строки. Ширина блока статьи (46rem) держит кадры и схемы, а текст
   внутри неё идёт уже. Замер 11.09.2026 на живом: колонка 672 px, кегль 16 px,
   в строку влезает 77 знаков при норме 60–75 (BRAND-SYSTEM §2). Строка длиннее
   нормы читается тяжелее не «по вкусу», а физически: глаз теряет начало
   следующей. 40rem дают 73 знака — внутри нормы, и кадры при этом остаются
   шире текста, как и задумано выше.

   Отбивка между абзацами. Красная строка на сайте стоит везде (RULES.md), и
   при ней полный шаг 16 px между абзацами разбивает связный текст на 52
   отдельные карточки — именно это Айгуль и назвала: «текст рубленый, ритма
   нет». Шаг уменьшен до 8 px: красная строка остаётся (она и есть признак
   нового абзаца), а поток перестаёт рассыпаться. Отбивку не убираю в ноль
   намеренно — скил pravilo-krasnoy-stroki требует держать оба признака. */
.zh-telo > p,
.zh-telo > .zh-spisok,
.zh-telo > .zh-shagi {
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

.zh-telo p {
  margin: 0 0 var(--space-1, 8px);
  line-height: var(--lh-body, 1.55);
}

/* ── ПРОВЕРОЧНЫЙ СПИСОК И ШАГИ ──────────────────────────────────────────────
   Заведено 11.09.2026. Заголовок журнала обещает «что проверить своими руками
   за минуту», а в разборе не было ни одного списка: проверять по сплошному
   тексту нельзя — читатель не удержит в голове, что он уже посмотрел.

   Маркер рисуется рамками, без иконочного шрифта и без эмодзи (RULES.md):
   две линии под углом — галочка, которая берёт цвет акцента витрины и поэтому
   переключается вместе с темой. */
.zh-spisok,
.zh-shagi {
  margin: var(--space-3, 24px) auto;
  padding: 0;
  list-style: none;
}
.zh-spisok-z {
  display: block;
  margin: var(--space-3, 24px) auto var(--space-2, 16px);
  max-width: 40rem;
  font-size: var(--fs-label, .75rem);
  font-weight: var(--fw-label, 500);
  letter-spacing: var(--tr-label, .22em);
  text-transform: uppercase;
  color: var(--pb-muted);
  text-align: center;
  text-indent: 0;
}
.zh-spisok-z + .zh-spisok,
.zh-spisok-z + .zh-shagi { margin-top: 0; }

.zh-spisok li,
.zh-shagi li {
  position: relative;
  margin: 0 0 var(--space-2, 16px);
  padding-left: var(--space-3, 24px);
  line-height: var(--lh-body, 1.55);
  /* Элементу списка красная строка не ставится — скил pravilo-krasnoy-stroki,
     раздел «где НЕ ставится». */
  text-indent: 0;
}
.zh-spisok li:last-child,
.zh-shagi li:last-child { margin-bottom: 0; }

.zh-spisok li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .45em;
  width: 6px;
  height: 11px;
  border-right: 1.5px solid var(--pb-accent);
  border-bottom: 1.5px solid var(--pb-accent);
  transform: rotate(45deg);
}

.zh-shagi { counter-reset: zh-shag; }
.zh-shagi li { counter-increment: zh-shag; }
.zh-shagi li::before {
  content: counter(zh-shag);
  position: absolute;
  left: 0;
  top: .1em;
  width: 16px;
  text-align: center;
  font-size: var(--fs-cap, .9375rem);
  font-weight: var(--fw-num, 300);
  color: var(--pb-accent);
}

.zh-figura {
  margin: var(--space-3, 24px) 0;
}
.zh-figura .zh-ramka {
  display: block;
  border: 1px solid var(--pb-line);
  border-radius: 14px;
  overflow: hidden;
  background: var(--pb-paper);
}
.zh-figura img,
.zh-figura svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ── КАДР ШИРЕ КОЛОНКИ И КАДРЫ ПАРОЙ ────────────────────────────────────────
   ЗАЧЕМ. Замер 11.09.2026 на этом разборе: шесть кадров подряд шли одной и той
   же шириной 672 px. Ровный столбик одинаковых кадров — это и есть «плоско»:
   глазу не за что зацепиться, все шесть рисунков выглядят одинаково важными,
   и читатель перестаёт их смотреть.

   ОТКУДА ВЗЯТО. Kinfolk (home-tour-sphinx-hill): первый кадр 710, затем
   четыре по 328 плиткой парами. The Gentlewoman (library/lynne-ramsay): ни
   одной повторяющейся ширины на статью — 720, 840, 840, 600+600, 360. То есть
   иерархия у изданий держится не рамками и не подписями, а РАЗНОЙ ШИРИНОЙ
   кадра: широкий читается как главный, парный — как две частности рядом.

   ПОЧЕМУ НЕ ВО ВСЮ ШИРИНУ ЭКРАНА. Примечание выше («Страница статьи») уже
   объясняет: картинка во всю ширину посреди узкого текста рвёт колонку, и глаз
   возвращается наверх искать, где он читал. Потолок 56rem (896 px) — это на
   112 px шире колонки с каждой стороны, заметно и не разрывно.

   ПОЧЕМУ max(100%, …). На телефоне выступать некуда: 100vw минус поля меньше
   самой колонки, и без max() «широкий» кадр вышел бы УЖЕ обычного — то есть
   модификатор работал бы наоборот. На узком экране он просто становится
   обычным кадром, и это верно: там ширина уже занята целиком. */
.zh-figura.zh-shire {
  width: max(100%, min(56rem, calc(100vw - 2 * var(--gutter, 32px))));
  margin-left: 50%;
  transform: translateX(-50%);
}

/* ПАРА СНИЖАЕТ ВЫСОТУ, а не поднимает: два кадра, стоявшие друг под другом,
   занимают одну строку вместо двух, и каждый при половинной ширине втрое
   короче по высоте. Поэтому пара — не украшение, а способ уложить разбор в
   меньшее число экранов («чтоб не скроллить клиенту», Айгуль 28.08.2026).

   Ниже 600 px пара складывается в столбик: при половине от 343 px кадр
   выходит 160 px шириной, и схема в нём не читается — а схема здесь ровно то,
   ради чего кадр стоит. */
.zh-para {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3, 24px);
  align-items: start;
  margin: var(--space-3, 24px) 0;
}
.zh-para > .zh-figura { margin: 0; }

/* ── СХЕМА ──────────────────────────────────────────────────────────────────
   Схема приходит в страницу не картинкой, а самим кодом рисунка (разносчик
   вставляет SVG внутрь, см. sync_zhurnal.py::блок). Три причины, все
   проверены на этом разборе 11.09.2026:

   1. ТЁМНАЯ ТЕМА. В файле схемы цвета вписаны числом: подписи #6b5a3f и
      #7a7061, рамки #c9bfa8. Снимком такая схема в тёмной теме остаётся в
      светлой гамме, и подпись «Поперечные рейки» ложится тёмно-коричневым по
      почти чёрному — контраст около 3:1 при норме 4.5. Вставленную схему
      перекрашивает CSS, и она переключается вместе с сайтом.
   2. ШРИФТ. Внутри файлов стоит Arial — чужая гарнитура на странице, набранной
      Raleway. Вставленной схеме шрифт задаёт страница.
   3. РАМКА В РАМКЕ. Схема сама рисует свои прямоугольники, а сверху лежала
      ещё рамка фигуры с заливкой. В силуэте страницы эти шесть блоков читались
      как пустые контейнеры, а не как рисунки. У схемы внешняя рамка снята.

   Подписи внутри схемы: жирные — смысловые (имя варианта), обычные —
   пояснительные. Отсюда разные цвета: жирные основным, обычные приглушённым.
   Свойство fill из CSS сильнее атрибута fill в файле, поэтому сами файлы
   схем не правятся вовсе. */
.zh-figura.zh-shema .zh-ramka {
  border: 0;
  background: none;
  border-radius: 0;
}
.zh-shema svg text {
  font-family: inherit;
  font-size: 13.5px;
}
/* КЕГЛЬ ПОДПИСИ В СХЕМЕ МЕРЯЕТСЯ НЕ В ЭКРАННЫХ ПИКСЕЛЯХ. Внутри SVG размер
   задаётся в единицах рисунка, а рисунок сжимается под ширину колонки: замер
   11.09.2026 — схема шириной 670 единиц показывается на 343 px, то есть
   масштаб 0.51, и подпись 13.5 превращается на телефоне в 6.9 px. Читать это
   нельзя, и так было и раньше, когда схема стояла картинкой; разница в том,
   что у вставленной кодом схемы кегль наконец можно поправить.
   Взято 20 единиц — около 10 px на телефоне вместо 6.9. Больше нельзя:
   при 24 подписи «Поперечные рейки» и «Сплошной лист» упираются друг в друга
   (проверено снимком на 375 px), а координаты подписей лежат в самом файле
   схемы, и вёрстка их не раздвинет. Настоящее лечение — вынести подписи из
   файла схемы в HTML: тогда они станут текстом, который переносится по
   строкам, читается поиском и читалкой экрана. Это перерисовка схем,
   отдельная работа. */
@media (max-width: 600px) {
  .zh-shema svg text { font-size: 20px; }
}
.zh-shema svg text[font-weight="bold"] { fill: var(--pb-ink); }
.zh-shema svg text:not([font-weight]) { fill: var(--pb-muted); }
.zh-shema svg rect[fill="none"] { stroke: var(--pb-line); }
.zh-shema svg [stroke="#7a7061"] { stroke: var(--pb-muted); }
.zh-podpis {
  margin: var(--space-1, 8px) 0 0;
  font-size: var(--fs-cap, .9375rem);
  color: var(--pb-muted);
  line-height: 1.45;
  text-indent: 0;
}

/* Врезка — то, чего товар НЕ делает. Стоит отдельно намеренно: сказанное
   в общем потоке ограничение читатель пролистывает, а именно оно снимает
   возврат товара. */
.zh-vrezka {
  margin: var(--space-4, 40px) 0;
  padding: var(--space-3, 24px);
  border: 1px solid var(--pb-line);
  border-left: 3px solid var(--pb-accent);
  border-radius: 12px;
  background: var(--pb-paper);
}
.zh-vrezka h2 { margin-top: 0; color: var(--pb-accent); text-align: center; text-indent: 0; }
.zh-vrezka p:last-child { margin-bottom: 0; }

/* ── ЦИТАТА-ВЫНОС ───────────────────────────────────────────────────────────
   ОТКУДА ВЗЯТО. The Gentlewoman, thegentlewoman.co.uk/library/lynne-ramsay:
   вынос там — `div.module.pullquote` шириной 720 px внутри текстовой колонки
   960 px, кегль 36/44, БЕЗ рамки, БЕЗ заливки и без нарисованных кавычек.
   Работает он одним приёмом: набран гарнитурой, которой НЕ набран текст
   (текст — засечный Lyon, вынос — Futura). Kinfolk (home-tour-sphinx-hill),
   Architectural Digest (best-online-furniture-stores) и Forbes на разобранных
   страницах выносов не держат вовсе — то есть приём необязателен, но там, где
   он есть, он сделан контрастом гарнитуры, а не рамкой.

   ПОЧЕМУ КУРСИВ, А НЕ КРУПНЕЕ. У нас всё наоборот: текст — Raleway без
   засечек, заголовки — Playfair Display. Первая проба ставила вынос
   заголовочной гарнитурой прямого начертания в 28 px — и он совпал с `.zh-telo
   h2` (28 px, Playfair, по центру) ровно во всём: кегль, гарнитура, выключка.
   Глазами это читалось как второй подзаголовок, то есть прямое нарушение
   законов «Контраст» и «Повторение» (BRAND-SYSTEM §8.1). Поэтому отличие
   взято не кеглем вверх, а начертанием плюс кеглем ВНИЗ: 22–24 px против 28 у
   h2. Вверх идти нельзя и по второй причине: h2 на этой странице выключен по
   центру, и вынос крупнее него отобрал бы у раздела доминанту, а доминанта на
   холст ровно одна.

   Курсив заголовочной гарнитуры — уже существующий приём этого сайта для
   личного голоса (home.css: `.about .sign`, `.feiler .text .it`,
   `.legal h2 .par`). Веса 500 курсивом заказаны в ссылке на шрифты в шапке
   (`Playfair+Display:ital,wght@…1,500;1,600`), проверено на живой странице:
   `document.fonts.check('italic 500 28px "Playfair Display"')` → true, то есть
   псевдокурсив браузер не синтезирует.

   ШИРИНА УЖЕ КОЛОНКИ — по образцу The Gentlewoman (720 из 960, это 75%).
   Вынос, стоящий ровно по краям текста, читается не как вынос, а как абзац
   другим шрифтом. Ступенька внутрь и есть приём: 544 из 672 — те же 81%.

   ПУСТОТ РОВНО СТОЛЬКО, СКОЛЬКО У ЗАГОЛОВКА. Отбивка --space-4 (40px), та же,
   что у `.zh-telo h2` сверху. У изданий вынос дышит полэкрана; правило Айгуль
   «не переборщить с пустотами» сильнее этой привычки.

   КАЗАХСКИЙ. Playfair Display не содержит ә ғ қ ң ұ (home.css, примечание о
   проверке шрифтов по файлу; память хаба «Шрифты — только с казахскими
   буквами»). Пока заголовочная гарнитура HOME не заменена, вынос ставится
   только в русском тексте. Казахской витрины журнала нет, так что сегодня это
   ничего не ломает — но заводя её, вынос проверить первым. */

.zh-vynos {
  max-width: 34rem;
  margin: var(--space-4, 40px) auto;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  text-indent: 0;
  font-family: var(--display, inherit);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.375rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: var(--pb-ink);
}
.zh-vynos p {
  margin: 0;
  text-indent: 0;
}

/* КТО СКАЗАЛ. Прописные здесь БЫЛИ и сняты 11.09.2026 после проверки глазами:
   `text-transform: uppercase` на этом поле съедает написание марки — «BeCo»
   выходило на страницу как «BECO», а BRAND-SYSTEM §8.4 запрещает переписывать
   марку во втором месте. Поле держит не только имя человека, но и «имя,
   компания», поэтому регистр отдаётся автору целиком.

   Заодно это совпало с практикой изданий: смешанный регистр в кредитах у трёх
   из четырёх — The Gentlewoman «Text by Mark Smith», Architectural Digest
   «By Audrey Lee and Kate McGregor», Forbes «By Courtney Connley-Hampton».
   Прописные держит один Kinfolk («Words EMMA MOORE»), и у него в этом поле
   стоит только имя человека.

   Кегль и цвет — те же, что у подписи под кадром (`.zh-podpis`,
   --fs-cap / --pb-muted): это тоже служебная строка при содержании, и второй
   вид служебной строки на одной странице развалил бы «Повторение».
   Контраст --pb-muted на --pb-paper замерен: 3.74:1. Для 14 px это ниже
   нормы AA (нужно 4.5:1) — но это НЕ значение журнала: на нём уже стоят все
   подписи под кадрами и лиды карточек журнала. Решение про --pb-muted одно на
   весь сайт, и здесь особого случая заводить нельзя. Названо Оркестратору
   11.09.2026, ждёт решения. */
.zh-vynos-kto {
  display: block;
  margin-top: var(--space-2, 16px);
  font-family: var(--sans, inherit);
  font-style: normal;
  font-size: var(--fs-cap, .9375rem);
  font-weight: 400;
  letter-spacing: .04em;
  color: var(--pb-muted);
  text-indent: 0;
}


/* ── ЧИСЛО-ВЫНОС ────────────────────────────────────────────────────────────
   ЗАЧЕМ ОТДЕЛЬНО ОТ `.zh-ryad`. `.zh-ryad` — ряд значений, из которых
   ВЫБИРАЮТ (размеры основания: 80, 90, 140…). Число-вынос — одно число,
   которое надо ЗАПОМНИТЬ: предел нагрузки 120 кг, 28 реек, 5 зон. Задачи
   разные, и слить их в один вид нельзя: ряд из одного значения выглядит
   недоделанным рядом, а вынос, поставленный рядом, теряет вес.

   ПОЧЕМУ БЕЗ РАМКИ И БЕЗ ЗАЛИВКИ. Рамку с заливкой уже носит `.zh-ryad`,
   рамку с акцентной полосой слева — `.zh-vrezka`. Третий блок в рамке
   превратил бы разбор в набор карточек, и «Повторение» перестало бы что-либо
   значить: три разных по смыслу блока выглядели бы одинаково. Здесь работу
   делает кегль цифры.

   ЗНАЧЕНИЯ НЕ ВЫДУМАНЫ: кегль и вес цифры — токены --fs-num / --fw-num
   (32→48 px, вес 300), те же, что у `.zh-ryad-znachenie b`. Тонкое начертание
   в крупном кегле — источник дорогого вида по BRAND-SYSTEM §2. Контраст
   #b08344 на --pb-paper замерен: 3.35:1 — для 48 px это крупный текст, норма
   AA для него 3:1, проходит.

   ПОЯСНЕНИЕ — ЧЕРНИЛАМИ, НЕ ПРИГЛУШЁННЫМ. Первая проба ставила его
   --pb-muted, и глазами вышло два слабых элемента рядом: бледное золото и
   бледно-серое. Приглушать сосед доминанты надо, но здесь доминанта уже
   выделена кеглем и цветом, а пояснение — это та самая фраза, из-за которой
   число вообще что-то значит, то есть содержание, а не подпись. Поставлено
   --pb-ink: контраст 15.68:1, и блок читается как одна вещь с одним акцентом.

   ОТБИВКА МЕНЬШЕ, ЧЕМ У ЦИТАТЫ (24 против 40): цитата — пауза в чтении,
   число — факт по ходу. Одинаковая отбивка сделала бы из факта паузу и
   добавила бы странице высоты на ровном месте. */

.zh-chislo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  column-gap: var(--space-3, 24px);
}
/* ОТБИВКА ПИШЕТСЯ ОТДЕЛЬНОЙ СТРОКОЙ И С БОЛЬШИМ ВЕСОМ — исправлено при
   применении патча 11.09.2026. Блок приходит на страницу тегом
   `<p class="zh-chislo">`, а правило ритма `.zh-telo p { margin: 0 0 8px }`
   весит 0,1,1 против 0,1,0 у одного класса: `margin: 24px 0` внутри
   `.zh-chislo` молча проигрывало, и число вставало с отбивкой абзаца.
   Глазами такое не видно — блок на странице есть, просто прижат. */
.zh-telo > .zh-chislo { margin: var(--space-3, 24px) 0; }
.zh-chislo b {
  font-size: var(--fs-num, 3rem);
  font-weight: var(--fw-num, 300);
  line-height: var(--lh-num, 1);
  letter-spacing: -.01em;
  color: var(--pb-accent);
  white-space: nowrap;
  text-indent: 0;
}
.zh-chislo span {
  line-height: var(--lh-body, 1.55);
  color: var(--pb-ink);
  text-indent: 0;
}

/* Ряд чисел — размеры, из которых выбирают. */
.zh-ryad {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 16px);
  margin: var(--space-3, 24px) 0;
}
.zh-ryad-znachenie {
  flex: 1 1 140px;
  padding: var(--space-2, 16px);
  border: 1px solid var(--pb-line);
  border-radius: 12px;
  background: var(--pb-paper);
  text-align: center;
}
.zh-ryad-znachenie b {
  display: block;
  font-size: var(--fs-num, 3rem);
  font-weight: var(--fw-num, 300);
  line-height: var(--lh-num, 1);
  color: var(--pb-accent);
}
.zh-ryad-znachenie span {
  display: block;
  margin-top: var(--space-1, 8px);
  font-size: var(--fs-cap, .9375rem);
  color: var(--pb-muted);
}

/* ── СВЯЗИ С КАТАЛОГОМ ──────────────────────────────────────────────────────
   Статья без входящих и исходящих ссылок индексируется плохо, а читателю
   после разбора некуда идти. Ссылки собираются из данных статьи: раздел она
   называет сама, второй записи об этом нигде нет. */

.zh-svyazi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2, 16px);
  margin: var(--space-4, 40px) 0 0;
}
/* На странице-списке те же связи стоят по центру: там они не хвост статьи,
   а самостоятельный выход в каталог. */
.zh-dalshe .zh-svyazi { justify-content: center; margin-top: var(--space-3, 24px); }
.zh-svyaz {
  display: inline-block;
  padding: 10px var(--space-2, 16px);
  border: 1px solid var(--pb-line);
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: var(--fs-cap, .9375rem);
  transition: .25s var(--ease, ease);
}
.zh-svyaz:hover { border-color: var(--pb-accent); color: var(--pb-accent); }

/* ── ЧТО ДАЛЬШЕ (страница-список) ───────────────────────────────────────────
   Заведено 11.09.2026. Страница-список кончалась последней плиткой и сразу
   подвалом: журнал выглядел недоделанным, а на вопрос Айгуль «журнал для
   чего? что он даёт людям?» страница не отвечала нигде.

   Блок отвечает делом, а не словами о себе: из разбора человек уходит туда,
   где лежит сам товар — с размерами, ценой и наличием. Ссылки собираются из
   разделов, которые статьи назвали сами (поле «разделКаталога»), поэтому
   одиннадцатая статья добавит свой раздел без правки вёрстки.

   Плотность: блок узкий и низкий намеренно (память хаба «не переборщить с
   пустотами»), рамки у него нет — отделяется линией сверху. */

.zh-dalshe {
  max-width: var(--measure, 65ch);
  /* Отбивка равна паддингу: линия сверху читается как разделитель, только
     когда воздух над ней и под ней одинаков. Шаг взят 40, а не 64 — «все
     размашистые места плотнее» (Айгуль, 28.08.2026). */
  margin: var(--space-4, 40px) auto 0;
  padding-top: var(--space-4, 40px);
  border-top: 1px solid var(--pb-line);
  text-align: center;
}
.zh-dalshe h2 {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
  letter-spacing: var(--tr-h3, -.01em);
  text-indent: 0;
}
.zh-dalshe p {
  margin: var(--space-2, 16px) auto 0;
  color: var(--pb-muted);
  line-height: var(--lh-body, 1.55);
  text-indent: 0;
}

/* ── ПРИЗЫВ ─────────────────────────────────────────────────────────────── */

.zh-prizyv {
  margin: var(--space-5, 64px) 0 0;
  padding: var(--space-4, 40px) var(--space-3, 24px);
  border-radius: 16px;
  background: var(--pb-fon);
  text-align: center;
}
.zh-prizyv h2 {
  margin: 0;
  font-size: var(--fs-h3, 1.375rem);
  font-weight: var(--fw-h3, 500);
  line-height: var(--lh-h3, 1.25);
  text-indent: 0;
}
.zh-prizyv p {
  max-width: 52ch;
  margin: var(--space-2, 16px) auto var(--space-3, 24px);
  text-indent: 0;
  color: var(--pb-muted);
}
.zh-znaki {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3, 24px);
  flex-wrap: wrap;
  margin-bottom: var(--space-3, 24px);
}
.zh-znaki img {
  height: 56px;
  width: auto;
  background: var(--pb-belyy);
  border-radius: 10px;
  padding: 6px 10px;
}
.zh-btn {
  display: inline-block;
  padding: 14px 30px;
  border-radius: 999px;
  background: var(--pb-accent);
  /* Цвет текста на золоте у каждого сайта свой (--btn-ink на HOME): золото
     светлое, и белым по нему читается хуже, чем тёмным. Запасной путь —
     фиксированный белый, чтобы кнопка не осталась без цвета на витрине,
     где своей переменной нет. */
  color: var(--btn-ink, var(--pb-belyy));
  font-weight: 600;
  text-decoration: none;
  text-indent: 0;
}

/* ── УЗКИЕ ЭКРАНЫ ───────────────────────────────────────────────────────── */

/* Плитки переносятся сами — раскладке ленты медиа-запрос больше не нужен.
   Перестраивается только ГЛАВНЫЙ блок: ниже 760 px кадр и текст рядом не
   помещаются, колонка текста становится уже строки чтения. */
@media (max-width: 760px) {
  .zh-glavnaya .zh-karta {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .zh-glavnaya .zh-karta-foto {
    grid-column: 1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
  .zh-glavnaya .zh-data,
  .zh-glavnaya .zh-karta-imya,
  .zh-glavnaya .zh-karta-lid,
  .zh-glavnaya .zh-karta-hod { grid-column: 1; }
  .zh-glavnaya .zh-data { margin-top: var(--space-2, 16px); }
}

@media (max-width: 600px) {
  .zh { padding: var(--space-3, 24px) var(--space-2, 16px) var(--space-4, 40px); }
  .zh-lenta { gap: var(--space-4, 40px) var(--space-3, 24px); }
  .zh-ryad-znachenie { flex-basis: 100%; }
  .zh-znaki img { height: 44px; }
  /* Оглавление на телефоне: боковые поля забирает сама страница, блоку они
     не нужны — иначе текст пунктов стоит в двух рамках отступов. */
  .zh-vnutri { padding-left: 0; padding-right: 0; }
  /* Герой-предмет на телефоне ещё сдержаннее: 260 px на экране 375 — это
     треть первого экрана под каталожным кадром. */
  .zh-hero.zh-predmet img { max-height: 200px; }
  /* Пара кадров на телефоне складывается в столбик: половина от 343 px — это
     кадр 160 px шириной, и схема в нём не читается. Разбор — у `.zh-para`. */
  .zh-para {
    grid-template-columns: 1fr;
    row-gap: var(--space-2, 16px);
  }
  /* Блок «что дальше» на телефоне подтянут: 64 отбивки плюс 40 паддинга — это
     104 px воздуха перед заголовком на экране высотой 660 («не переборщить с
     пустотами», Айгуль). */
  .zh-dalshe {
    margin-top: var(--space-4, 40px);
    padding-top: var(--space-3, 24px);
  }
}

/* Цифра и пояснение числа-выноса держатся рядом до 480 px; ниже пояснению
   остаётся полоса в два-три слова, и это перестаёт читаться. Порог свой, а не
   общий телефонный 600 px: на 600 строка ещё нормальная, а столбик добавил бы
   высоты на ровном месте. Замерено — складывание стоит +49 px (131 против 82
   на широком экране). */
@media (max-width: 480px) {
  .zh-chislo {
    grid-template-columns: 1fr;
    row-gap: var(--space-1, 8px);
  }
}

/* ── СВЯЗЬ СО СОСЕДНЕЙ СТАТЬЁЙ ──────────────────────────────────────────────
   Заведено 12.09.2026. До этого статья на статью сослаться не могла вовсе:
   HTML в данных запрещён, а из видов связи в разносчике существовала только
   «журнал → раздел каталога». Две статьи, прямо продолжающие друг друга,
   стояли порознь — при собственном правиле журнала, что страница без
   входящих ссылок индексируется плохо.

   ПОЧЕМУ НЕ ПОХОЖЕ НА ВРЕЗКУ. У врезки рамка со всех сторон и заливка: она
   отступление от текста, которое читают на месте. Связь — выход со страницы,
   и выглядеть она обязана иначе, иначе читатель принимает её за очередной
   блок текста и проходит мимо. Отсюда: без заливки, линия только сверху и
   снизу, имя статьи — ссылкой кеглем подзаголовка.

   Кегль и цвет — токенами, как весь журнал: страница читается и в тёмной
   теме, и на телефоне, а собственных чисел цвета здесь не заводится. */
.zh-svyaz {
  margin: var(--space-4, 40px) 0;
  padding: var(--space-3, 24px) 0;
  border-top: 1px solid var(--pb-line);
  border-bottom: 1px solid var(--pb-line);
}
.zh-svyaz-nad {
  display: block;
  font-size: var(--fs-small, .875rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--pb-muted);
}
.zh-svyaz-imya {
  display: block;
  margin-top: var(--space-1, 8px);
  font-size: var(--fs-h3, 1.5rem);
  line-height: 1.2;
  color: var(--pb-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--pb-accent);
}
.zh-svyaz-imya:hover { color: var(--pb-accent); }
.zh-svyaz-zachem {
  margin: var(--space-1, 8px) 0 0;
  color: var(--pb-muted);
  text-indent: 0;
}

/* ── ЗНАК НАПОЛНИТЕЛЯ ПОД ЗАГОЛОВКОМ РАЗДЕЛА ────────────────────────────────
   Заведено 14.09.2026 по слову Айгуль «иконки нужны». Символы семейств
   наполнения Brinkhaus (перо, завиток волоса, верблюд, бабочка на коконе,
   лента волокна) стоят маленькими под заголовком раздела — как метка главы, а
   не как иллюстрация.

   БЕЗ НОВОГО ВИДА БЛОКА. В данных это обычный «снимок»; отличается он именем
   файла с приставкой `znak-`, и правило ловит именно её. Причина: вид блока
   живёт в разносчике `sync_zhurnal.py`, а его ведёт Оркестратор — менять
   чужой движок ради оформления одного элемента дороже, чем одно правило
   здесь. `:has()` в этом файле уже используется (`html:has(.zh)`).

   Кадр при этом остаётся кадром: проверки наличия файла и обязательного alt
   в воротах работают как для любого снимка. */
.zh-figura:has(img[src*="/znak-"]) {
  max-width: 132px;
  margin-left: auto;
  margin-right: auto;
  margin-top: calc(-1 * var(--space-1, 8px));
}
.zh-figura:has(img[src*="/znak-"]) .zh-ramka {
  border: 0;
  background: none;
  border-radius: 0;
}
/* Подпись под знаком — служебная строка, а не подпись к фотографии: тот же
   кегль, что у прочих подписей, но по центру и уже, чтобы она не спорила с
   первым абзацем раздела. */
.zh-figura:has(img[src*="/znak-"]) .zh-podpis {
  text-align: center;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* ── РОЛИК В СТАТЬЕ ─────────────────────────────────────────────────────────
   Вид блока «видео» заведён 14.09.2026, переписан 15.09.2026
   (sync_zhurnal.py::ролик). Ролик стоит на месте кадра: та же рамка, та же
   подпись, та же ширина колонки.

   ПУЛЬТ ЕСТЬ, САМОПУСКА НЕТ. 14.09 ролик был беззвучным фоном к тексту и шёл
   сам. С 15.09 в журнал идут истории коллекций — их СМОТРЯТ, и у смотрящего
   обязана быть кнопка. Обратная сторона: пять историй, запускавшихся сами,
   качали бы до 15 МБ у каждого, кто открыл страницу, — поэтому autoplay снят,
   а `preload="metadata"` берёт заголовок файла вместо файла. Ролик начинает
   грузиться, когда посетитель нажал.

   Побочно этим закрыт и prefers-reduced-motion: без самопуска движение на
   странице начинается только по нажатию. Прежняя редакция уважать его не
   могла — остановить autoplay нечем, скриптов на странице статьи нет. */
.zh-video video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  /* Пока постер не пришёл, место под ролик держится размерами из самого файла
     (width/height в разметке ставит разносчик). Фон — бумага страницы, а не
     системный чёрный: чёрный прямоугольник — ровно то, от чего заведено
     требование постера. */
  background: var(--pb-paper);
}

/* СТОЯЧИЙ РОЛИК. Съёмки для соцсетей приходят вертикальными: 720×1280. В
   колонке 672 px такой ролик вырос бы до 1195 px высоты — полтора экрана
   монитора на одну иллюстрацию, и подпись под ним читатель уже не видит.
   Поэтому у стоячего ограничена ВЫСОТА, а ширина считается от неё: 620 px
   высоты дают около 349 px ширины — кадр телефона внутри колонки, каким его и
   снимали. Признак ставит машина по размерам файла (sync_zhurnal.py::ролик),
   а не автор статьи глазами.

   Замер 15.09.2026 на образце из трёх историй Feiler (720×1280 каждый): и на
   390 px, и на 1280 px ролик выходит 349×620 — потолок высоты срабатывает
   раньше ширины колонки. На телефоне ролик с пультом и подпись под ним
   укладываются в один экран; рамка обводит сам кадр (351×622), а не колонку. */
.zh-video-stoyachiy { text-align: center; }
.zh-video-stoyachiy .zh-ramka {
  display: inline-block;
  max-width: 100%;
  /* Рамка сжимается по ролику, иначе она обводила бы пустое место колонки
     слева и справа от узкого кадра. */
  line-height: 0;
}
.zh-video-stoyachiy video {
  width: auto;
  max-width: 100%;
  max-height: min(80vh, 620px);
}
/* Подпись под узким кадром идёт по центру и не шире его окружения: строка во
   всю колонку под кадром 349 px читалась бы как отдельный абзац. */
.zh-video-stoyachiy .zh-podpis {
  text-align: center;
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
}

/* ═══════════════════════════════════════════════════════════════════════════
   РИТМ СТРАНИЦЫ: ПОДЛОЖКИ, ПОЛОСЫ, ВЫДЕЛЕНИЯ. Заведено 15.09.2026.

   ЗАЧЕМ. Требование Айгуль дословно: «жирным важные слова, выделить
   подложками премиум уровня — не делать монотонный текст, глаз должен гулять
   по тексту, но не отрывать; вертикальные полосы на основных мыслях» и
   «не плоские фоны, вёрстка должна быть за 5000 долларов по восприятию
   читателя». Речь о восьми экранах сплошного текста: читать его можно, но
   держаться в нём не за что.

   ЧТО ИМЕННО МЕНЯЕТСЯ И ПОЧЕМУ ТАК.
   1. Врезка была плоской бумагой с полоской слева в рамке. Стала подложкой с
      МЯГКИМ ВЕРТИКАЛЬНЫМ ПЕРЕХОДОМ (сверху золото 7%, к низу почти чистая
      бумага) и отдельной полосой-градиентом на левом краю, вне рамки. Плоская
      заливка и золотой кант — приём бесплатных шаблонов; переход в четверть
      тона плюс внутренний блик читаются как бумага с фактурой.
   2. Вынос был по центру, без полосы. Стал ЛЕВОЙ ВЫКЛЮЧКОЙ С ВЕРТИКАЛЬНОЙ
      ПОЛОСОЙ — это и есть «полоса на основной мысли». Центр здесь проигрывал:
      выключенный по центру курсив посреди выключенного по левому краю текста
      читается как подпись к картинке, а не как мысль, которую вынесли.
   3. Жирное внутри абзаца получило МЯГКУЮ ЗОЛОТУЮ ПОДЛОЖКУ в нижней трети
      строки. Не заливка целиком: заливка превращает абзац в маркированный
      учебник. Подложка снизу — приём журнальной вёрстки, глаз цепляется, но
      строка остаётся строкой.

   СТАРЫЕ БРАУЗЕРЫ. Каждое правило с `color-mix` идёт ВТОРЫМ объявлением, а
   первым стоит простое: Safari до 16.2 просто не увидит второго и покажет
   ровно прежний вид. Ни одного свойства, без которого блок рассыпается, в
   новом синтаксисе нет.

   КОНТРАСТ. Текст нигде не меняет цвет: и на подложке врезки, и под золотой
   подложкой жирного он остаётся --pb-ink. Самая тёмная точка новых заливок —
   золото 26% на бумаге, это светлее линии --pb-line, на которой текст уже
   стоит в таблицах. Проверка контраста из-за этих правил не сдвигается.
   ═══════════════════════════════════════════════════════════════════════════ */

.zh-vrezka {
  position: relative;
  padding: var(--space-3, 24px) var(--space-3, 24px) var(--space-3, 24px)
           calc(var(--space-3, 24px) + 12px);
  border: 1px solid var(--pb-line);
  border-left: 0;
  background: var(--pb-paper);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--pb-accent) 7%, var(--pb-paper)) 0%,
      var(--pb-paper) 62%,
      color-mix(in srgb, var(--pb-accent) 4%, var(--pb-paper)) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 14px 30px -26px rgba(42, 37, 32, .55);
}
/* Полоса-градиент на левом краю: гаснет книзу, поэтому блок не выглядит
   «обведённым», а выглядит начатым. */
.zh-vrezka::before {
  content: "";
  position: absolute;
  left: 0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(180deg,
    var(--pb-accent) 0%, var(--pb-accent) 42%, rgba(184, 153, 104, .15) 100%);
}

.zh-vynos {
  position: relative;
  max-width: 36rem;
  margin: var(--space-4, 40px) auto;
  padding-left: 26px;
  text-align: left;
}
.zh-vynos::before {
  content: "";
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    var(--pb-accent) 0%, var(--pb-accent) 55%, rgba(184, 153, 104, .12) 100%);
}
.zh-vynos-kto { text-align: left; }

/* ВЫДЕЛЕННОЕ СЛОВО. Подложка нарисована фоном, а не обводкой: у обводки свой
   прямоугольник, и на переносе строки она рвётся на два куска с кантами. */
.zh-telo strong,
.zh-vrezka strong {
  font-weight: 600;
  color: var(--pb-ink);
  background-repeat: no-repeat;
  background-image: linear-gradient(180deg,
    transparent 58%,
    color-mix(in srgb, var(--pb-accent) 26%, transparent) 58%,
    color-mix(in srgb, var(--pb-accent) 10%, transparent) 100%);
  padding: 0 .08em .04em;
  margin: 0 -.08em;
  border-radius: 2px;
}

/* ПОДПИСЬ ПОД ЗНАКОМ — ширина берётся у колонки, а не у значка. Замер
   15.09.2026 на живой странице: правило `znak-` ставило max-width 132px на всю
   фигуру, и подпись «Пух и перо. Знак, которым производитель помечает это
   семейство наполнения» вставала лентой в шесть слов по одному слову в строке.
   Значок остаётся 132 px, но ограничение переехало на рамку кадра. */
.zh-figura:has(img[src*="/znak-"]) {
  max-width: none;
  text-align: center;
}
.zh-figura:has(img[src*="/znak-"]) .zh-ramka {
  display: inline-block;
  max-width: 132px;
}
.zh-figura:has(img[src*="/znak-"]) .zh-podpis {
  max-width: 30rem;
  margin: var(--space-1, 8px) auto 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ПОТОЛОК ВЫСОТЫ У КАДРОВ. Заведено 15.09.2026, её слово: «фото слишком
   большие — и приходится скроллить».

   ЗАМЕР, ИЗ КОТОРОГО ЭТО СЛЕДУЕТ. При колонке 672 px кадр 4:3 вставал
   672×504, главный — 672×504, квадратный ролик 672×473. На ноутбуке с рабочей
   высотой около 700 px это значит: один кадр занимает три четверти экрана, и
   между двумя абзацами читатель делает полный прокрут. У статьи восемь кадров
   и четыре ролика — то есть двенадцать таких прокрутов.

   ПОЧЕМУ ВЫСОТА, А НЕ ШИРИНА. Ограничить ширину значило бы задать её числом и
   получить разную высоту у разных пропорций: вертикальный кадр при ширине
   520 px вырос бы до 700. Потолок высоты работает одинаково для всех: кадр
   сжимается ЦЕЛИКОМ, ничего не обрезается, и на странице он всегда ниже
   половины экрана.

   ШИРИНА СЧИТАЕТСЯ ОТ ВЫСОТЫ, поэтому кадр становится уже колонки — и это не
   побочный эффект, а приём: кадр внутри текстового поля читается спокойнее,
   чем кадр во всю ширину, у изданий так и сделано. Рамка сжимается по кадру
   (inline-block), иначе она обводила бы пустое место слева и справа.
   ═══════════════════════════════════════════════════════════════════════════ */

.zh-figura { text-align: center; }
.zh-figura > .zh-ramka {
  display: inline-block;
  max-width: 100%;
  line-height: 0;
}
.zh-figura img { max-height: 400px; width: auto; max-width: 100%; }
.zh-hero img { max-height: 420px; width: auto; max-width: 100%; margin: 0 auto; }
.zh-hero { text-align: center; }

.zh-video { text-align: center; }
.zh-video > .zh-ramka { display: inline-block; max-width: 100%; line-height: 0; }
.zh-video video { max-height: 400px; width: auto; max-width: 100%; }
/* Стоячий ролик и раньше держался высотой; потолок опущен тем же решением. */
.zh-video-stoyachiy video { max-height: min(62vh, 460px); }

/* Подпись остаётся по ширине читаемой строки, а не по ширине сжавшегося
   кадра: под кадром 430 px подпись в две строки по три слова выглядит
   обрывком. */
.zh-figura .zh-podpis,
.zh-video .zh-podpis {
  max-width: 32rem;
  margin-left: auto;
  margin-right: auto;
}
/* В паре кадры и так вдвое уже колонки — там потолок не нужен, иначе два
   кадра рядом станут разной высоты при разных пропорциях. */
.zh-para .zh-figura img { max-height: none; width: 100%; }

/* Потолок кадров опущен ещё раз 15.09.2026 — её слово «фото не делай огромными»
   повторено после первой правки, значит 400 px мало помогли. Кадр 360 px по
   высоте при пропорции 4:3 даёт 480×360 — это половина экрана ноутбука вместе
   с подписью. Ролик оставлен чуть крупнее кадра: его смотрят, а не листают. */
.zh-figura img { max-height: 360px; }
.zh-hero img { max-height: 380px; }
.zh-video video { max-height: 380px; }
.zh-video-stoyachiy video { max-height: min(56vh, 430px); }

/* ПЕРВЫЙ АБЗАЦ РАЗДЕЛА КРУПНЕЕ. Взято из редакционной вёрстки, которую Айгуль
   прислала в docx 15.09.2026: там у части разделов первый абзац набран стилем
   Lead — 13 pt против 12 pt основного, цвет темнее. Приём журнальный: он
   обозначает вход в тему и разбивает ровное поле текста, ничего не добавляя к
   словам. У нас — на один шаг кегля и на тот же тон, что лид статьи. */
.zh-telo h2 + p {
  font-size: calc(var(--fs-body, 1rem) * 1.08);
  line-height: 1.5;
  color: var(--pb-ink);
}