/* Chimera — компоненты. Подключать после tokens.css.
   Правило системы: подложку получает не больше одного блока на экран,
   всё остальное разделяется линейкой и воздухом. */

/* ── основа ───────────────────────────────────────────── */
html{ background: var(--ink); }
body{
  margin:0; background: var(--ink); color: var(--paper);
  font: var(--w-body) var(--t-body)/1.65 var(--sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
*,*::before,*::after{ box-sizing: border-box; }
img{ max-width:100%; height:auto; }
/* Браузерное правило a:-webkit-any-link{color:-webkit-link} перебивает
   наследование, поэтому ссылка в шапке/подвале красилась синим, несмотря
   на цвет контейнера. Найдено при сверке прототипа: навигация уходила в
   #0000EE. Хром наследует цвет, содержательные ссылки красит компонент. */
a{ color:inherit; }
.ch-prose a:not(.ch-btn):not(.ch-more),
.ch-main p a:not(.ch-btn):not(.ch-more){
  color:var(--emerald); text-decoration:none;
  border-bottom:1px solid color-mix(in srgb, var(--emerald) 32%, transparent); }
.ch-prose a:hover,.ch-main p a:hover{ border-bottom-color:currentColor; }
:focus-visible{ outline:2px solid var(--emerald); outline-offset:3px; }

/* ── фон ──────────────────────────────────────────────── */
.ch-backdrop{ position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--ink); }
.ch-backdrop canvas{ display:block; width:100%; height:100%; }
.ch-layer{ position:relative; z-index:1; }   /* вешать на header/main/footer */

/* ── сетка ────────────────────────────────────────────── */
.ch-wrap{ max-width:var(--max); margin:0 auto; padding:0 var(--pad); }
.ch-grid{ display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:var(--gut); }
/* журнальная раскладка: 1–3 подпись раздела, 4–12 содержание */
.ch-aside{ grid-column:1/4; }
.ch-main { grid-column:4/13; }
@media (max-width:940px){
  .ch-aside,.ch-main{ grid-column:1/13; }
  .ch-aside{ margin-bottom:32px; }
}

/* ── типографика ──────────────────────────────────────── */
/* Обводка и тень у заголовков — требование владельца, держим.
   На ровном тёмном фоне отделять не от чего (контраст 15:1), поэтому
   значения минимальные: контур читается как вес, а не как контур, и не
   съедает засечки Cormorant. paint-order уводит штрих под заливку —
   без него тонкие штрихи засечек истончаются. Инкремент 006. */
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; color:var(--paper);
             letter-spacing:-.005em; text-wrap:balance; margin:0; }

/* Золотое правило над заголовком раздела: короткий штрих, который
   привязывает заголовок к левой оси сетки и задаёт ритм сверху вниз. */
.ch-main > h2::before, .ch-sec h2.ch-ruled::before{
  content:""; display:block; width:58px; height:1px; margin-bottom:22px;
  background:linear-gradient(90deg, var(--gold-tick), transparent); }
h1{ font-size:var(--t-display); line-height:.98; }
h2{ font-size:var(--t-h2);      line-height:1.12; }
h3{ font-size:var(--t-h3);      line-height:1.2; }
p{ margin:0 0 1.1em; max-width:var(--measure); }
.ch-lead{ font-size:var(--t-lead); font-weight:var(--w-lead); line-height:1.6; color:var(--paper-2); max-width:48ch; }
.ch-label{ font:var(--w-label) var(--t-label)/1.5 var(--mono); letter-spacing:.2em;
           text-transform:uppercase; color:var(--gold-label); }
.ch-eyebrow{ font:var(--w-label) var(--t-label)/1 var(--mono); letter-spacing:.22em;
             text-transform:uppercase; color:var(--emerald); }

/* ── кнопки: ровно две ────────────────────────────────── */
/* Размеры взяты с эталона — страницы входа Dex: высота 54, разрядка
   .14em. Прежние 48 и .1em и делали кнопку «плоской рамочкой»: дело
   было в размере и воздухе внутри, а не в отсутствии объёма. */
/* Размер подбирался трижды, и каждый раз по замечанию владельца.
   48px и .1em — «плоские рамочки». 54px и .14em — крупновато.
   Сейчас 44px, кегль 12, разрядка .18em, насыщенность 500 вместо 600:
   изящество даёт не размер, а разрядка при небольшом кегле — буквы
   стоят просторно, а сама кнопка не спорит с заголовком. */
/* min-width обязателен для пары кнопок. Слова разной длины дают
   кнопки разной ширины — «Обзор» и «Скачать» отличались на треть, и
   пара читалась как случайная, а не как набор. Ширина задаётся по
   самому длинному однословному ярлыку, короткие добираются воздухом. */
.ch-btn{ display:inline-flex; align-items:center; justify-content:center;
  height:44px; padding:0 26px; min-width:9.5rem;
  border:1px solid transparent; border-radius:var(--radius); text-decoration:none;
  font:500 12px/1 var(--sans); letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; }
/* ── кнопки ──────────────────────────────────────────────────
   Плоские намеренно, и это решение принято дважды.

   Сначала они были плоскими по умолчанию — владелец назвал их
   «просто плоские рамочки». Тогда я собрал объём: градиент, фаска,
   отражение, внешняя тень. Ответ был «как из 90х» — и он верный: блик
   поверх градиента с тенью это стилистика кнопок Windows XP, а не
   калёного стекла.

   Эталоном взята страница входа Dex, про которую владелец сказал
   «идеально, не к чему придраться». Там кнопки совершенно плоские:
   сплошная латунь у главной, волосяная рамка у вторичной, и работают
   они за счёт другого — высоты 58px, разрядки в 0.14em, прописных букв
   и того, что при наведении проявляется золото. Объём давала не кнопка,
   а оправа вокруг карточки.

   Вывод, который стоит удержать: «плоско» было не диагнозом, а
   симптомом. Лечилось не объёмом, а размером, разрядкой и поведением
   при наведении. */

.ch-btn{ position:relative;
  transition:border-color .18s, background-color .18s, color .18s; }
.ch-btn--go{
  background:var(--accent); color:var(--accent-ink);
  border-color:var(--accent); }
.ch-btn--go:hover{
  background:var(--accent-hi); border-color:var(--accent-hi); }
.ch-btn--gh{
  background:rgba(6,13,11,.42); color:var(--paper);
  border-color:var(--rule); }
.ch-btn--gh:hover{
  border-color:var(--gold-line); color:var(--paper);
  background:rgba(201,162,39,.055); }
.ch-btn:active{ transform:translateY(1px); }

.ch-btn--sm{ height:36px; padding:0 18px; min-width:7rem; font-size:11px; letter-spacing:.2em; }

/* ── ссылка «дальше» ──────────────────────────────────── */
.ch-more{ font:600 13px/1 var(--sans); letter-spacing:.08em; text-transform:uppercase;
  text-decoration:none; color:var(--emerald); padding-bottom:4px;
  border-bottom:1px solid color-mix(in srgb, var(--emerald) 35%, transparent); }
.ch-more:hover{ border-bottom-color:currentColor; }

/* ── секция ───────────────────────────────────────────── */
.ch-sec{ position:relative; padding:var(--sec-y) 0; border-bottom:1px solid var(--rule); }
.ch-sec::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:linear-gradient(90deg, var(--gold-hair), transparent 34%); }
/* Заголовок раздела отбивается от содержания. Селектор нарочно
   короткий: длинная цепочка через .ch-grid не срабатывала там, где
   колонки сделаны флексом, и заголовок слипался со следующей строкой. */
.ch-main > h2{ margin-bottom:56px; }
.ch-main > h2 + .ch-lead{ margin-top:-32px; margin-bottom:40px; }

/* ── строка-раздел вместо карточки ────────────────────── */
.ch-row{ display:grid; grid-template-columns:1fr 232px; gap:56px;
  padding:36px 0; border-top:1px solid var(--rule-soft); }
.ch-row:first-of-type{ border-top:0; padding-top:0; }
.ch-row h3{ margin-bottom:14px; }
.ch-row p{ color:var(--paper-2); }
@media (max-width:940px){ .ch-row{ grid-template-columns:1fr; gap:24px; } }

/* ── приборная колонка: всё, что является данными ─────── */
/* Приборная плита. Рамка золотом, насечки по углам — это и есть
   «рамочки», которых просил владелец: деталь, которую видно вблизи и
   которая не шумит издалека. Внутри — подложка с градиентом. */
.ch-data{ position:relative; font:400 var(--t-data)/1 var(--mono);
  color:var(--quiet); align-self:start; font-variant-numeric:tabular-nums;
  padding:16px 18px; border:1px solid var(--gold-line);
  background-image:var(--panel-glow), var(--panel); }
.ch-data::before,.ch-data::after{ content:""; position:absolute;
  width:9px; height:9px; pointer-events:none; }
.ch-data::before{ top:-1px; left:-1px;
  border-top:1px solid var(--gold-tick); border-left:1px solid var(--gold-tick); }
.ch-data::after{ bottom:-1px; right:-1px;
  border-bottom:1px solid var(--gold-tick); border-right:1px solid var(--gold-tick); }
.ch-data > div{ display:flex; justify-content:space-between; gap:14px;
  padding:9px 0; border-bottom:1px solid var(--gold-hair); }
.ch-data > div:last-child{ border-bottom:0; }
.ch-data i{ font-style:normal; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.ch-data b{ font-weight:500; color:var(--paper-2); }
.ch-data b.is-on  { color:var(--live); }
.ch-data b.is-sky { color:var(--gold); }
.ch-data b.is-off { color:var(--quiet); }
@media (max-width:940px){ .ch-data{ margin-top:8px; } }

/* ── таблица: те же приборные правила ─────────────────── */
.ch-table{ width:100%; border-collapse:collapse; font-size:var(--t-small);
  font-variant-numeric:tabular-nums; }
.ch-table th{ font:500 var(--t-label)/1.5 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--quiet); text-align:left;
  padding:0 16px 12px 0; border-bottom:1px solid var(--rule); }
.ch-table td{ padding:13px 16px 13px 0; border-bottom:1px solid var(--rule-soft);
  color:var(--paper-2); }
.ch-table td:last-child,.ch-table th:last-child{ padding-right:0; }
.ch-table .num{ font-family:var(--mono); font-size:var(--t-data); color:var(--paper); }

/* ── единственная подложка на страницу ────────────────── */
.ch-panel{ position:relative;
  background-image:var(--panel-glow), var(--panel);
  border-top:1px solid var(--gold-line); border-bottom:1px solid var(--gold-line); }
.ch-panel::before{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(216,166,74,.07), transparent 42%); }

/* ── поля ввода ───────────────────────────────────────── */
.ch-field{ width:100%; background:var(--ink-3); color:var(--paper);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:13px 15px; font:400 var(--t-body)/1.4 var(--sans); }
.ch-field::placeholder{ color:var(--quiet); }
.ch-field:focus{ border-color:var(--emerald-lo); outline:none; }

/* ── шапка ────────────────────────────────────────────── */
.ch-top{ position:sticky; top:0; z-index:20; box-shadow:0 1px 0 var(--gold-hair);
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule); }
.ch-top .ch-wrap{ display:flex; align-items:center; justify-content:space-between;
  height:76px; gap:32px; }
.ch-brand{ display:flex; align-items:center; gap:11px; text-decoration:none; flex:none; }
.ch-brand b{ font:600 14px/1 var(--sans); letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper); }
.ch-nav{ display:flex; gap:30px; font:500 14px/1 var(--sans); color:var(--paper-2); }
.ch-nav a{ text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; }
.ch-nav a:hover{ color:var(--paper); border-bottom-color:var(--rule); }
.ch-nav a[aria-current]{ color:var(--paper); border-bottom-color:var(--emerald); }
/* На узком экране навигация не прячется, а становится полосой с
   горизонтальной прокруткой: шесть разделов, состояния нет, JS не нужен.
   Спрятать её было нельзя — с телефона в разделы можно было попасть
   только из подвала. */
@media (max-width:940px){
  .ch-top .ch-wrap{ height:auto; flex-wrap:wrap; padding-top:14px; padding-bottom:0; gap:14px; }
  .ch-nav{ order:3; width:100%; gap:22px; overflow-x:auto; padding:2px 0 12px;
           scrollbar-width:none; -webkit-overflow-scrolling:touch;
           mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .ch-nav::-webkit-scrollbar{ display:none; }
  .ch-nav a{ flex:none; white-space:nowrap; }
}

/* ── подвал ───────────────────────────────────────────── */
.ch-foot{ padding:72px 0 56px; background:color-mix(in srgb, var(--ink) 90%, transparent); }
/* Заголовок колонки подвала. Селектор перечисляет уровни, а не один
   тег: он был h4, стал h2 — подвал шёл после разделов второго уровня, и
   документ прыгал h2 → h4, пропуская ступень. Стиль при этом висел
   именно на h4, и смена тега без правки этой строки раздула бы подписи
   подвала с 11px до 42px.

   Уровень здесь про порядок документа, а не про размер: вид задаётся
   этим правилом и от тега не зависит. */
.ch-foot h2, .ch-foot h3, .ch-foot h4{
  font:500 11px/1 var(--mono); letter-spacing:.2em; text-transform:uppercase;
  color:var(--quiet); margin:0 0 20px; }
.ch-foot ul{ list-style:none; margin:0; padding:0; font-size:var(--t-small); }
.ch-foot li{ margin-bottom:11px; }
.ch-foot a{ color:var(--paper-2); text-decoration:none; }
.ch-foot a:hover{ color:var(--paper); }
.ch-colophon{ margin-top:56px; padding-top:24px; border-top:1px solid var(--rule);
  display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap;
  font:400 12px/1.5 var(--mono); letter-spacing:.06em; color:var(--quiet); }

@media (prefers-reduced-motion: no-preference){
  a,.ch-btn{ transition:color .15s, border-color .15s, background .15s; }
}

/* ═══ слой под блочные паттерны конструктора ═══════════════
   Классы ниже вешаются в разметке паттернов на обычные
   core-блоки, чтобы владелец правил содержимое в конструкторе,
   а вид держала система. Кастомных блоков нет намеренно. */

/* герой */
.ch-hero{ padding:104px 0 92px; border-bottom:1px solid var(--rule); }
.ch-hero .wp-block-columns{ gap:var(--gut); align-items:flex-start; }
.ch-hero h1{ max-width:15ch; margin-bottom:30px; }
.ch-hero .ch-eyebrow{ margin:0 0 26px; }
.ch-hero .ch-lead{ margin-bottom:40px; }
.ch-hero__state{ position:relative; padding:16px 18px;
  border:1px solid var(--gold-line);
  background-image:var(--panel-glow), var(--panel); }
.ch-hero__state::before,.ch-hero__state::after{ content:""; position:absolute;
  width:9px; height:9px; pointer-events:none; }
.ch-hero__state::before{ top:-1px; left:-1px;
  border-top:1px solid var(--gold-tick); border-left:1px solid var(--gold-tick); }
.ch-hero__state::after{ bottom:-1px; right:-1px;
  border-bottom:1px solid var(--gold-tick); border-right:1px solid var(--gold-tick); }
.ch-hero__state .ch-label{ margin:14px 0 2px; }
@media (max-width:940px){
  .ch-hero{ padding:64px 0 56px; }
  .ch-hero__state{ margin-top:44px; }
}

/* подпись в левой колонке */
.ch-aside__note{ margin-top:10px; font-size:13px; line-height:1.6;
  color:var(--quiet); max-width:22ch; }

/* строка раздела */
.ch-row.wp-block-columns{ gap:56px; padding:36px 0;
  border-top:1px solid var(--rule-soft); align-items:flex-start; }
.ch-row.wp-block-columns:first-of-type{ border-top:0; padding-top:0; }
.ch-more-wrap{ margin:20px 0 0; }
.ch-row__data{ border-left:1px solid var(--gold-line); padding-left:20px; }
@media (max-width:940px){
  .ch-row__data{ border-left:0; border-top:1px solid var(--gold-line);
    padding:14px 0 0; margin-top:8px; }
}

/* приборные таблицы: без шапки, метка слева, значение справа */
.ch-table--state table,.ch-table--data table{ width:100%; border-collapse:collapse; }
.ch-table--state td,.ch-table--data td{
  padding:11px 0; border-bottom:1px solid var(--gold-hair);
  font:400 var(--t-data)/1.3 var(--mono); color:var(--quiet);
  font-variant-numeric:tabular-nums; letter-spacing:.02em; }
.ch-table--state td:first-child,.ch-table--data td:first-child{
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; }
.ch-table--state td:last-child,.ch-table--data td:last-child{
  text-align:right; color:var(--paper-2); font-weight:500; }
.ch-table--state tr:last-child td,.ch-table--data tr:last-child td{ border-bottom:0; }
.ch-table--state figcaption,.ch-table--data figcaption{ display:none; }
.ch-datatable .ch-label{ margin-bottom:8px; }

/* полоса с подложкой */
.ch-panel{ padding:78px 0; }
.ch-panel .wp-block-columns{ gap:var(--gut); }

/* ═══ код, листинги и деревья ══════════════════════════════
   Две страницы раздела лаунчера («Исходники и работа», «Дерево
   исходников») состоят из кода и таблиц со строками — под них в системе
   не было ничего. Правила те же, что и везде: подложку получает не
   больше одного блока, остальное держат линейка и воздух; всё, что
   является данными, набирается моноширинным с табличными цифрами. */

/* однострочный код внутри абзаца.

   overflow-wrap:anywhere обязателен, а не украшение. Пути и имена вроде
   `chl-wine/examples/dll_placement_smoke_test.rs` не содержат ни одного
   места, где строка может перенестись сама: ни пробела, ни дефиса. На
   телефоне такое имя занимает 391px в колонке шириной 287 и растягивает
   всю страницу — документ становится 500px при окне 375, и сайт едет
   вбок целиком. Найдено живьём на /launcher/source/.

   На блок кода (.ch-code) это НЕ распространяется: там white-space:pre
   и своя горизонтальная прокрутка — код, перенесённый по середине
   строки, врёт о своём содержании. */
code, kbd, samp{ font-family:var(--mono); font-size:.92em;
  color:var(--paper); background:var(--ink-3);
  padding:.12em .38em; border-radius:var(--radius);
  border:1px solid var(--rule-soft);
  overflow-wrap:anywhere; word-break:break-word; }

/* Сюда напрашивается html{overflow-x:hidden} «на всякий случай». Его
   здесь нет намеренно: он не чинит причину, а прячет её — и заодно
   слепит проверку scrollWidth > clientWidth, которой этот самый дефект
   и был найден. Следующий такой случай мы бы уже не увидели. */

/* блок кода. Подложки нет намеренно: она конкурировала бы с
   единственной разрешённой подложкой страницы. Отделяет линейка слева. */
.ch-code{ margin:0 0 1.4em; padding:18px 0 18px 22px;
  border-left:2px solid var(--rule);
  font:400 13.5px/1.62 var(--mono); color:var(--paper-2);
  overflow-x:auto; white-space:pre; tab-size:2;
  font-variant-ligatures:none; }
.ch-code::-webkit-scrollbar{ height:8px; }
.ch-code::-webkit-scrollbar-thumb{ background:var(--rule); border-radius:var(--radius); }
.ch-code b{ font-weight:500; color:var(--paper); }        /* выделенная строка */
.ch-code i{ font-style:normal; color:var(--quiet); }      /* комментарий */

/* листинг с номерами строк: номера — отдельная колонка, не
   выделяются, не копируются вместе с кодом */
.ch-listing{ margin:0 0 1.4em; border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
  font:400 13.5px/1.7 var(--mono); overflow-x:auto; }
.ch-listing table{ width:100%; border-collapse:collapse; }
.ch-listing td{ padding:0; vertical-align:top; white-space:pre; }
.ch-listing .ln{ width:1%; padding:0 18px 0 2px; text-align:right;
  color:var(--quiet); user-select:none; font-variant-numeric:tabular-nums;
  border-right:1px solid var(--rule-soft); }
.ch-listing .src{ padding-left:18px; color:var(--paper-2); }
.ch-listing tr:target .src,.ch-listing tr.is-hit .src{ color:var(--paper); }
.ch-listing tr:target .ln,.ch-listing tr.is-hit .ln{ color:var(--emerald); }

/* дерево файлов: отступ рисуется волосяной линейкой, а не псевдографикой */
.ch-tree{ margin:0 0 1.4em; font:400 13.5px/1.9 var(--mono); }
.ch-tree ul{ list-style:none; margin:0; padding:0 0 0 18px;
  border-left:1px solid var(--rule-soft); }
.ch-tree > ul{ padding-left:0; border-left:0; }
.ch-tree li{ margin:0; }
.ch-tree a{ color:var(--paper-2); text-decoration:none; }
.ch-tree a:hover{ color:var(--paper); }
.ch-tree .dir > a{ color:var(--paper); }
.ch-tree .size{ color:var(--quiet); font-size:11.5px; margin-left:10px;
  font-variant-numeric:tabular-nums; }

/* таблица с кодом/путями — те же правила, что у приборной, но слева
   моноширинный путь, а не метка капителью */
.ch-table--files td:first-child{ font-family:var(--mono); font-size:var(--t-data);
  text-transform:none; letter-spacing:0; color:var(--paper-2); }
.ch-table--files td:last-child{ color:var(--quiet); }

/* ═══ оправа ════════════════════════════════════════════════
   Золото здесь — не второй акцент рядом с изумрудом, а материал
   рамки. Изумруд остаётся цветом живого: статус, действие, ссылка.
   Поэтому золотом рисуются только границы и углы, и никогда — текст,
   который надо прочитать. */

/* блок в оправе: волосяная рамка и две подчёркнутые угловые метки
   по диагонали. Четыре угла читались бы как «сертификат», две —
   как намеренная деталь. */
.ch-frame{ position:relative; border:1px solid var(--gold-line);
  background-image:var(--surface); padding:28px 30px; }
.ch-frame::before,.ch-frame::after{
  content:""; position:absolute; width:15px; height:15px; pointer-events:none; }
.ch-frame::before{ top:-1px; left:-1px;
  border-top:1px solid var(--gold-edge); border-left:1px solid var(--gold-edge); }
.ch-frame::after{ bottom:-1px; right:-1px;
  border-bottom:1px solid var(--gold-edge); border-right:1px solid var(--gold-edge); }
.ch-frame > :last-child{ margin-bottom:0; }
.ch-frame .ch-label{ margin-bottom:14px; }

/* приборная панель героя — та же оправа, но плотнее */
.ch-frame--state{ padding:20px 22px 14px; }
.ch-frame--state .ch-data{ border-left:0; padding-left:0; }

/* врезка на золоте: когда надо выделить одну мысль внутри текста */
.ch-note{ border-left:2px solid var(--gold-edge); padding:4px 0 4px 20px;
  margin:0 0 1.4em; color:var(--paper-2); max-width:var(--measure); }

/* разделитель секций — волосяная золотая черта по центру полосы */
.ch-sec{ border-bottom:1px solid var(--rule); }

/* ═══════════════════════════════════════════════════════════
   СОСТОЯНИЯ И НЕДОСТАЮЩИЕ ЧАСТИ
   До этого система описывала только «всё хорошо и всё заполнено».
   Ниже — то, что отличает законченную работу от показанного макета:
   что видно, когда данных нет, когда форма заполнена неверно, когда
   кнопка недоступна и когда человек пришёл по битой ссылке.
   ═══════════════════════════════════════════════════════════ */

/* ── кнопки: недоступна и нажата ──────────────────────── */
.ch-btn[aria-disabled="true"],.ch-btn:disabled{
  background:transparent; border-color:var(--rule); color:var(--quiet);
  cursor:not-allowed; box-shadow:none; }
.ch-btn--go:active{ transform:translateY(1px); }
.ch-btn--gh:active{ transform:translateY(1px); }

/* ── строка раздела: наведение ────────────────────────── */
/* Подсветка не заливкой, а проявлением золотой линии слева: заливка
   вернула бы карточку, от которой мы ушли. */
.ch-row{ position:relative; }
.ch-row::before{
  content:""; position:absolute; left:-22px; top:36px; bottom:0; width:1px;
  background:var(--gold-tick); opacity:0; transition:opacity .18s; }
.ch-row:hover::before{ opacity:.7; }
.ch-row:first-of-type::before{ top:0; }
@media (max-width:940px){ .ch-row::before{ display:none; } }

/* ── формы: покой, фокус, ошибка, недоступно ──────────── */
.ch-form{ display:grid; gap:20px; max-width:34rem; }
.ch-form-row{ display:grid; gap:8px; }
.ch-form-row > label{ font:500 var(--t-label)/1.4 var(--mono);
  letter-spacing:.16em; text-transform:uppercase; color:var(--gold-label); }
.ch-field{ width:100%; background:var(--ink-3); color:var(--paper);
  border:1px solid var(--rule); border-radius:var(--radius);
  padding:13px 15px; font:400 var(--t-body)/1.4 var(--sans); }
.ch-field::placeholder{ color:var(--quiet); }
.ch-field:hover{ border-color:var(--gold-hair); }
.ch-field:focus{ border-color:var(--emerald); outline:none;
  box-shadow:0 0 0 3px rgba(53,212,157,.14); }
.ch-field:disabled{ color:var(--quiet); cursor:not-allowed; opacity:.7; }
.ch-field[aria-invalid="true"]{ border-color:var(--danger); }
.ch-field[aria-invalid="true"]:focus{ box-shadow:0 0 0 3px rgba(184,67,58,.18); }
/* Подпись к ошибке объясняет, что не так и что сделать, а не извиняется. */
.ch-form-hint,.ch-form-error{ font:400 13px/1.5 var(--sans); }
.ch-form-hint{ color:var(--quiet); }
.ch-form-error{ color:#e08078; }
.ch-form-error::before{ content:"— "; }

/* ── бейдж состояния ──────────────────────────────────── */
.ch-badge{ display:inline-flex; align-items:center; gap:7px;
  font:500 11px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--paper-2); border:1px solid var(--rule);
  border-radius:var(--radius); padding:6px 10px 5px; }
.ch-badge::before{ content:""; width:6px; height:6px; border-radius:50%;
  background:var(--quiet); }
.ch-badge--on::before   { background:var(--live); }
.ch-badge--work::before { background:var(--gold); }
.ch-badge--off::before  { background:var(--quiet); }
.ch-badge--bad::before  { background:var(--danger); }

/* ── список определений: характеристики ───────────────── */
.ch-dl{ margin:0 0 1.4em; }
.ch-dl > div{ display:grid; grid-template-columns:minmax(9rem,26%) 1fr;
  gap:20px; padding:11px 0; border-bottom:1px solid var(--rule-soft); }
.ch-dl > div:last-child{ border-bottom:0; }
.ch-dl dt{ font:500 var(--t-label)/1.5 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--quiet); }
.ch-dl dd{ margin:0; color:var(--paper-2); font-variant-numeric:tabular-nums; }
@media (max-width:640px){ .ch-dl > div{ grid-template-columns:1fr; gap:4px; } }

/* ── оглавление длинной страницы ──────────────────────── */
/* Справка лаунчера — пятнадцать разделов; без оглавления это стена. */
.ch-toc{ position:sticky; top:104px; align-self:start;
  border-left:1px solid var(--gold-hair); padding-left:18px; }
.ch-toc ol{ list-style:none; margin:0; padding:0;
  counter-reset:toc; font-size:14px; }
.ch-toc li{ margin-bottom:9px; }
.ch-toc a{ color:var(--paper-2); text-decoration:none; }
.ch-toc a:hover{ color:var(--paper); }
.ch-toc a[aria-current]{ color:var(--gold-soft); }
@media (max-width:940px){ .ch-toc{ position:static; } }

/* ── возврат на главную ───────────────────────────────── */
/* Чеклист владельца: с каждой вложенной страницы должен быть переход
   на главную. Ставится первой строкой содержания, до заголовка. */
.ch-back{ display:inline-flex; align-items:center; gap:9px;
  font:500 var(--t-label)/1 var(--mono); letter-spacing:.14em;
  text-transform:uppercase; color:var(--quiet); text-decoration:none;
  margin-bottom:26px; }
.ch-back::before{ content:""; width:16px; height:1px; background:var(--gold-tick); }
.ch-back:hover{ color:var(--gold-soft); }

/* ── пагинация ────────────────────────────────────────── */
.ch-pager{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;
  margin-top:48px; padding-top:26px; border-top:1px solid var(--rule);
  font:400 var(--t-data)/1 var(--mono); }
.ch-pager a,.ch-pager span{ padding:9px 12px; border:1px solid transparent;
  border-radius:var(--radius); color:var(--paper-2); text-decoration:none; }
.ch-pager a:hover{ border-color:var(--gold-hair); color:var(--paper); }
.ch-pager [aria-current]{ border-color:var(--gold-tick); color:var(--gold-soft); }

/* ── пусто ────────────────────────────────────────────── */
/* Пустой раздел говорит, почему он пуст и что будет дальше, а не
   «ничего не найдено». */
.ch-empty{ border:1px dashed var(--gold-hair); border-radius:var(--radius);
  padding:40px 34px; text-align:left; }
.ch-empty h3{ font-size:22px; margin-bottom:10px; }
.ch-empty p{ color:var(--paper-2); margin-bottom:0; }
.ch-empty .ch-btn{ margin-top:22px; }

/* ── страница 404 ─────────────────────────────────────── */
.ch-404{ padding:130px 0 120px; }
.ch-404 .code{ font:500 clamp(64px,11vw,150px)/1 var(--mono);
  letter-spacing:.04em; color:transparent;
  -webkit-text-stroke:1px var(--gold-tick); margin-bottom:24px; }
.ch-404 h1{ font-size:clamp(34px,4.4vw,56px); margin-bottom:20px; }
.ch-404 p{ color:var(--paper-2); margin-bottom:34px; }
@media (max-width:940px){ .ch-404{ padding:70px 0 64px; } }

/* ── лента журнала ────────────────────────────────────── */
/* Записи идут по времени, поэтому у них своя композиция: дата слева
   на постоянной оси, запись справа. Это не «строка раздела». */
.ch-log{ display:grid; grid-template-columns:132px 1fr; gap:34px;
  padding:30px 0; border-top:1px solid var(--rule-soft); }
.ch-log:first-of-type{ border-top:0; padding-top:0; }
.ch-log time{ font:400 var(--t-data)/1.5 var(--mono); color:var(--quiet);
  letter-spacing:.06em; padding-top:8px; position:relative; }
.ch-log time::after{ content:""; position:absolute; right:-17px; top:12px;
  width:5px; height:5px; border-radius:50%; background:var(--gold-tick); }
.ch-log h3{ font-size:24px; margin-bottom:10px; }
.ch-log p{ color:var(--paper-2); margin-bottom:0; }
@media (max-width:940px){
  .ch-log{ grid-template-columns:1fr; gap:10px; }
  .ch-log time::after{ display:none; }
}

/* ── широкая полоса данных ────────────────────────────── */
/* Обсерватория показывает много значений сразу — им нужна вся ширина,
   а не колонка 4–12. Это вторая композиция страницы, не первая. */
.ch-band{ padding:var(--sec-y) 0; border-bottom:1px solid var(--rule); }
.ch-band__grid{ display:grid; gap:1px; background:var(--rule-soft);
  border:1px solid var(--rule); border-radius:var(--radius);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); overflow:hidden; }
.ch-band__cell{ background-image:var(--surface); padding:22px 24px 20px; }
.ch-band__cell .ch-label{ margin-bottom:10px; }
.ch-band__val{ font:500 clamp(26px,2.6vw,34px)/1 var(--mono);
  color:var(--paper); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.ch-band__val small{ font-size:.44em; color:var(--quiet); margin-left:7px;
  letter-spacing:.08em; text-transform:uppercase; }
.ch-band__note{ margin:9px 0 0; font-size:13px; color:var(--quiet); }

/* ── крупный блок возможности ─────────────────────────── */
/* Для продуктовой страницы лаунчера: у неё должен быть свой ритм,
   иначе все страницы сайта выглядят одинаково. */
.ch-feature{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gut);
  align-items:center; padding:52px 0; border-top:1px solid var(--rule-soft); }
.ch-feature:first-of-type{ border-top:0; padding-top:0; }
.ch-feature:nth-child(even) .ch-feature__body{ order:2; }
.ch-feature h3{ font-size:34px; margin-bottom:16px; }
.ch-feature p{ color:var(--paper-2); }
.ch-feature__art{ border:1px solid var(--gold-hair); border-radius:var(--radius);
  background-image:var(--surface); min-height:210px; position:relative;
  display:flex; align-items:center; justify-content:center; padding:26px; }
.ch-feature__art::before,.ch-feature__art::after{
  content:""; position:absolute; width:13px; height:13px; }
.ch-feature__art::before{ top:-1px; left:-1px;
  border-top:1px solid var(--gold-tick); border-left:1px solid var(--gold-tick); }
.ch-feature__art::after{ bottom:-1px; right:-1px;
  border-bottom:1px solid var(--gold-tick); border-right:1px solid var(--gold-tick); }
@media (max-width:940px){
  .ch-feature{ grid-template-columns:1fr; gap:22px; padding:34px 0; }
  .ch-feature:nth-child(even) .ch-feature__body{ order:0; }
}

/* ── компактный герой вложенной страницы ──────────────── */
.ch-hero--compact{ padding:66px 0 54px; }
.ch-hero--compact h1{ font-size:clamp(38px,5vw,64px); max-width:18ch; }
@media (max-width:940px){ .ch-hero--compact{ padding:44px 0 38px; } }

/* ═══════════════════════════════════════════════════════════
   ГРАВИРОВКА
   Замечание владельца: «слишком сдержанно, добавь текстуры на шрифты
   заголовков и рамки поярче». Направление — гравированная латунь и
   лист старого звёздного атласа: буквы с фаской, зерно печатной
   пластины поверх страницы, рамки с угловыми кронштейнами, линейки
   с ромбом посередине.
   Каждый приём держится в узком диапазоне яркости, чтобы украшение
   не съело читаемость — замеры после в DESIGN.md.
   ═══════════════════════════════════════════════════════════ */

/* ── заголовки: фаска и лёгкий перелив металла ────────── */
/* Светлая грань сверху, тёмная снизу — на тёмном фоне это читается
   как выпуклая литера. Перелив узкий (#f4efe3 → #d9d0b8), чтобы
   нижняя часть буквы оставалась заметно светлее фона. */
/* Металлическая заливка достаётся только самому крупному набору:
   заголовку страницы, цифре 404 и приборным значениям. Если раздать её
   всем уровням, приём перестаёт что-либо означать. Заголовки разделов
   получают только фаску — светлая грань сверху, тёмная снизу. */
/* Ни градиента на буквах, ни фаски.
   Замечание владельца по прошлой редакции: «оформление шрифта выглядит
   как из 90-х, аля word школьника». Он прав — градиентная заливка плюс
   фаска это буквально пресет WordArt по умолчанию, и это самый
   узнаваемый признак дешёвой вёрстки. Дорогие работы не делают на
   буквах эффектов вообще: работают гарнитура, кегль, интерлиньяж,
   трекинг и композиция. Осталась одна мягкая тень для отрыва от фона —
   и всё. */
h1,h2,h3,h4{ -webkit-text-fill-color:currentColor; background-image:none; }
h1{ -webkit-text-stroke:0; text-shadow:0 2px 14px rgba(0,0,0,.5); }
h2{ -webkit-text-stroke:0; text-shadow:0 2px 10px rgba(0,0,0,.42); }
h3,h4{ -webkit-text-stroke:0; text-shadow:0 1px 6px rgba(0,0,0,.36); }
.ch-404 .code{ -webkit-text-fill-color:transparent; background-image:none;
  -webkit-text-stroke:1px var(--gold-tick); text-shadow:none; }
.ch-band__val{ -webkit-text-fill-color:currentColor; background-image:none;
  color:var(--paper); text-shadow:none; }
.ch-drop::first-letter{ -webkit-text-fill-color:currentColor;
  background-image:none; color:var(--gold-soft); -webkit-text-stroke:0; }

/* ── зерно печатной пластины ──────────────────────────── */
/* Тонкий шум поверх всей страницы: он не виден как текстура, но
   убирает ощущение «плоской заливки», из-за которого тёмные сайты
   выглядят дёшево. Генерируется фильтром, файла нет. */
.ch-grain{ position:fixed; inset:0; z-index:2; pointer-events:none;
  opacity:.055; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:180px 180px; }
/* Виньетка: края страницы чуть глубже центра — как на печатном листе */
.ch-vignette{ position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 88% at 50% 32%, transparent 52%, rgba(0,0,0,.42) 100%); }
@media (prefers-reduced-motion: reduce){ .ch-grain{ opacity:.04; } }

/* ── оправа: кронштейны по четырём углам ──────────────── */
/* Главная панель сайта может позволить себе все четыре угла и двойную
   линейку — это её опознавательный знак. Остальные рамки остаются
   с двумя углами по диагонали. */
.ch-frame{ border-color:var(--gold-line);
  box-shadow:inset 0 0 0 1px rgba(6,13,11,.7), 0 0 0 0 transparent; }
.ch-frame--state{ box-shadow:
    inset 0 0 0 1px rgba(6,13,11,.8),
    inset 0 0 0 4px rgba(201,162,39,.14),
    0 22px 54px rgba(0,0,0,.42); }
.ch-frame--state::before,.ch-frame--state::after{ width:18px; height:18px;
  border-width:1.5px; }
/* Углы намеренно два, по диагонали: четыре читаются как рамка диплома.
   У главной панели они просто тяжелее — 18px и 1.5px вместо 15 и 1. */

/* ── линейка с ромбом: девиз листа атласа ─────────────── */
/* Разделитель секций — отдельный элемент, а не псевдоэлемент: так им
   можно управлять из конструктора и не ставить там, где он лишний. */
.ch-rule{ display:flex; align-items:center; justify-content:center; gap:14px;
  margin:calc(var(--sec-y) / 2) 0; }
.ch-rule::before,.ch-rule::after{ content:""; height:1px; width:76px;
  background:linear-gradient(90deg, transparent, var(--gold-line)); }
.ch-rule::after{ background:linear-gradient(90deg, var(--gold-line), transparent); }
.ch-rule i{ width:7px; height:7px; transform:rotate(45deg);
  border:1px solid var(--gold-edge); }

/* ── буквица ──────────────────────────────────────────── */
/* Первая буква вводного абзаца раздела — крупная, гравированная.
   Только там, где абзац длиннее трёх строк, иначе буквица повиснет. */
.ch-drop::first-letter{
  float:left; font-family:var(--serif); font-weight:600;
  font-size:4.1em; line-height:.84; margin:6px 14px 0 0;
  color:var(--gold-soft);
  -webkit-text-stroke:0.012em rgba(3,9,7,.5); }

/* ── эйбров с засечками по краям ──────────────────────── */
.ch-eyebrow{ display:inline-flex; align-items:center; gap:12px; }
.ch-eyebrow::before,.ch-eyebrow::after{ content:""; width:22px; height:1px;
  background:var(--gold-tick); }

/* ── приборные значения: перелив металла ──────────────── */
.ch-band__val{ text-shadow:0 1px 0 rgba(0,0,0,.5); }
.ch-band__val small{ -webkit-text-fill-color:var(--quiet); }

/* ── полоса с подложкой: двойная золотая кромка ───────── */
.ch-panel{ box-shadow:
    inset 0  1px 0 var(--gold-glow),
    inset 0 -1px 0 var(--gold-glow),
    inset 0  4px 0 -3px rgba(201,162,39,.22),
    inset 0 -4px 0 -3px rgba(201,162,39,.22); }

/* ═══════════════════════════════════════════════════════════
   ТИТУЛЬНЫЙ ЭКРАН
   Разбор победителей Awwwards: первый экран дорогой работы не выглядит
   как «шапка + заголовок + кнопка». Либо полноэкранный изобразительный
   материал, либо крупная типографика на весь вьюпорт.
   Съёмки и 3D у проекта нет — идём путём Pangram Pangram (Site of the
   Year 2021): там нет ни одной фотографии, весь изобразительный ряд
   это буквы в кегле, который не помещается в привычную мерку.
   ═══════════════════════════════════════════════════════════ */

/* min-height ограничен сверху. Было 82svh: на окне высотой 1000 это
   820px и смотрелось верно, а на высоком экране владельца — 1990px —
   давало 1630px под содержание высотой около 600, то есть тысячу
   пикселей пустоты над эйбровом. Содержание прижато книзу
   (justify-content:flex-end), поэтому вся разница собирается сверху.
   Причина не в svh, а в том, что высота заголовка упала со 170px до
   104px, а резерв под него остался прежним. */
.ch-title{ min-height:min(82svh, 660px); display:flex; flex-direction:column;
  justify-content:flex-end; padding:96px 0 46px;
  border-bottom:1px solid var(--rule); }
.ch-title .ch-wrap{ width:100%; }

/* Верхняя строка: эйбров слева, короткая сводка справа — как колонтитул
   титульного листа. Не кнопки: кнопкам место под заголовком. */
.ch-title__top{ display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; flex-wrap:wrap; margin-bottom:auto; padding-bottom:58px; }
.ch-title__meta{ font:400 var(--t-data)/1.5 var(--mono); color:var(--quiet);
  letter-spacing:.08em; text-align:right; font-variant-numeric:tabular-nums; }
.ch-title__meta b{ color:var(--paper-2); font-weight:500; }

/* Сам заголовок — изображение страницы. Ширина не ограничивается
   мерой: он должен доходить до края сетки. */
.ch-title h1{ font-size:var(--t-title); line-height:.86;
  letter-spacing:-.022em; max-width:none; margin:0 0 34px;
  text-wrap:balance; }

/* Низ: лид слева, действия справа — читается как подпись под титулом */
.ch-title__foot{ display:grid; grid-template-columns:minmax(0,1fr) auto;
  gap:40px; align-items:end; padding-top:30px;
  border-top:1px solid var(--gold-hair); }
.ch-title__foot .ch-lead{ margin:0; font-size:var(--t-lead);
  color:var(--paper-1); max-width:46ch; }
.ch-title .ch-btns{ margin:0; flex-wrap:nowrap; }

@media (max-width:940px){
  .ch-title{ min-height:auto; padding:56px 0 40px; }
  .ch-title__top{ padding-bottom:36px; }
  .ch-title__meta{ text-align:left; }
  .ch-title h1{ margin-bottom:26px; }
  .ch-title__foot{ grid-template-columns:1fr; gap:26px; align-items:start; }
  .ch-title .ch-btns{ flex-wrap:wrap; }
}

/* ═══════════════════════════════════════════════════════════
   ДВИЖЕНИЕ ПО СКРОЛЛУ
   Признак из разбора: «fade-in при появлении» есть у всех и ничего не
   стоит; отличает сцена, которая отматывается НАЗАД при обратной
   прокрутке. Делается штатной привязкой к таймлайну вьюпорта — без
   JavaScript, поэтому не мешает правке блоков в конструкторе.
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){

    /* Строки разделов и записи журнала проявляются и уходят обратно */
    .ch-row, .ch-log, .ch-feature, .ch-band__cell{
      animation:ch-rise linear both;
      animation-timeline:view();
      animation-range:entry 4% cover 26%;
    }
    @keyframes ch-rise{
      from{ opacity:0; transform:translateY(22px); }
      to  { opacity:1; transform:none; }
    }

    /* Ячейки приборной полосы вступают по очереди */
    .ch-band__cell:nth-child(2){ animation-range:entry 6%  cover 28%; }
    .ch-band__cell:nth-child(3){ animation-range:entry 8%  cover 30%; }
    .ch-band__cell:nth-child(4){ animation-range:entry 10% cover 32%; }

    /* Титульный заголовок уходит вглубь по мере прокрутки страницы */
    .ch-title h1{
      animation:ch-recede linear both;
      animation-timeline:view();
      animation-range:exit 0% exit 100%;
    }
    @keyframes ch-recede{
      from{ opacity:1; transform:none; }
      to  { opacity:.18; transform:translateY(-26px) scale(.985); }
    }

    /* Волосяная линейка над заголовком раздела прочерчивается */
    .ch-main > h2::before{
      animation:ch-draw linear both;
      animation-timeline:view();
      animation-range:entry 10% cover 22%;
    }
    @keyframes ch-draw{ from{ width:0; } to{ width:58px; } }
  }
}

/* ═══ совместимость с разметкой блоков WordPress ════════════
   В прототипе компоненты собраны своей разметкой, в конструкторе —
   стандартными core/columns. Правила ниже приводят второе к первому,
   чтобы владелец собирал страницы блоками и получал тот же вид.
   Проверять надо оба варианта: эталон в proto/ и pattern-check.html. */

/* столбцы WordPress — флекс, а не грид: раскладку задаём явно */
.ch-title__top.wp-block-columns{ display:flex; align-items:baseline; }
.ch-title__foot.wp-block-columns{ display:flex; align-items:flex-end;
  gap:40px; padding-top:30px; border-top:1px solid var(--gold-hair); }
.ch-title__foot.wp-block-columns .wp-block-column:last-child{ flex:0 0 auto; }
/* Кнопки в подвале титула не переносятся: колонка узкая, и перенос
   ставил бы их одна под другой вместо пары. */
.ch-title__foot .wp-block-buttons{ flex-wrap:nowrap; justify-content:flex-end; }
@media (max-width:940px){ .ch-title__foot .wp-block-buttons{ flex-wrap:wrap; justify-content:flex-start; } }

.ch-log.wp-block-columns{ display:grid; grid-template-columns:132px 1fr; gap:34px; }
.ch-log.wp-block-columns .wp-block-column{ flex-basis:auto !important; }
.ch-log time{ display:block; }
.ch-log p:has(> time){ margin:0; }

.ch-band__grid.wp-block-columns{ display:grid; gap:1px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.ch-band__grid.wp-block-columns .wp-block-column{ flex-basis:auto !important; margin:0; }
.ch-band__cell .ch-band__val{ margin:0; }
.ch-band__cell .ch-band__note{ margin:9px 0 0; }

.ch-feature.wp-block-columns{ display:grid; grid-template-columns:1fr 1fr;
  gap:var(--gut); align-items:center; }
.ch-feature.wp-block-columns .wp-block-column{ flex-basis:auto !important; }
.ch-feature.wp-block-columns:nth-of-type(even) .ch-feature__body{ order:2; }
.ch-feature__art.wp-block-column{ border:1px solid var(--gold-hair);
  border-radius:var(--radius); background-image:var(--surface);
  min-height:210px; padding:26px; position:relative;
  display:flex; align-items:center; }
.ch-feature__art.wp-block-column::before,
.ch-feature__art.wp-block-column::after{
  content:""; position:absolute; width:13px; height:13px; }
.ch-feature__art.wp-block-column::before{ top:-1px; left:-1px;
  border-top:1px solid var(--gold-tick); border-left:1px solid var(--gold-tick); }
.ch-feature__art.wp-block-column::after{ bottom:-1px; right:-1px;
  border-bottom:1px solid var(--gold-tick); border-right:1px solid var(--gold-tick); }
.ch-feature__art .wp-block-table{ width:100%; margin:0; }

.ch-back-wrap{ margin:0 0 26px; }

@media (max-width:940px){
  .ch-title__top.wp-block-columns,
  .ch-title__foot.wp-block-columns{ flex-direction:column; align-items:stretch; }
  .ch-log.wp-block-columns{ grid-template-columns:1fr; gap:10px; }
  .ch-feature.wp-block-columns{ grid-template-columns:1fr; gap:22px; }
  .ch-feature.wp-block-columns:nth-of-type(even) .ch-feature__body{ order:0; }
}

/* ── снимок программы во врезке возможности ───────────────
   Появились настоящие снимки интерфейса лаунчера (их собирает
   packaging/site/shots в репозитории лаунчера). Это единственное, чего
   системе не хватало: изобразительный материал, который нельзя скачать
   со стока. Рамка та же, что у приборной врезки, — снимок садится в
   оправу, а не висит сам по себе. */
.ch-feature__art--shot{ padding:0; overflow:hidden; align-items:stretch; }
.ch-feature__art--shot img{ display:block; width:100%; height:100%;
  object-fit:cover; object-position:left top; }
/* Снимок притушен, чтобы не перебивать текст рядом; при наведении
   раскрывается полностью. */
.ch-feature__art--shot img{ filter:saturate(.82) brightness(.86); transition:filter .25s; }
.ch-feature:hover .ch-feature__art--shot img{ filter:none; }
.ch-feature__art--shot::after{ z-index:2; }
.ch-feature__art--shot::before{ z-index:2; }
.ch-shot-cap{ margin:10px 0 0; font:400 var(--t-data)/1.5 var(--mono);
  color:var(--quiet); letter-spacing:.04em; }

/* Подпись под изображением, как её печатает WordPress.

   Класс .ch-shot-cap выше существовал, но ядро печатает
   <figcaption class="wp-element-caption">, и под наше правило он не
   попадал. Правила для figcaption в системе не было вовсе — оставался
   цвет ядра #555, то есть 2.63:1 на нашем фоне при норме 4.5. Замерено
   на живой /launcher/: семь подписей под скриншотами, самый частый
   мелкий текст продуктовой страницы.

   Выбор по тегу, а не только по классу ядра: класс у WordPress уже
   менялся (.wp-caption-text → .wp-element-caption), и привязка к нему
   сломается при следующей смене молча. Тег figcaption не изменится. */
figcaption, .wp-element-caption, .wp-caption-text{
  margin:10px 0 0; font:400 var(--t-data)/1.5 var(--mono);
  color:var(--quiet); letter-spacing:.04em; text-align:left; }

/* ═══ карта сайта ═══════════════════════════════════════════
   Сетка страниц с превью. Это единственное место, где плитка
   оправдана: карта по своей природе — набор равнозначных страниц,
   и превью здесь несёт информацию, а не украшает. Подложки у плиток
   нет, держит оправа — правило «одна подложка на страницу» не
   нарушается. */
.ch-map{ display:grid; gap:26px;
  grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); }
.ch-map__item{ display:flex; flex-direction:column; text-decoration:none;
  border:1px solid var(--rule); border-radius:var(--radius);
  overflow:hidden; position:relative; background:transparent; }
.ch-map__item:hover{ border-color:var(--gold-line); }
.ch-map__item:hover .ch-map__shot img{ filter:none; transform:scale(1.015); }

/* Превью: приглушено в покое, раскрывается при наведении — так
   плитки не перебивают текст, а страница не пестрит. */
.ch-map__shot{ position:relative; aspect-ratio:8/5; overflow:hidden;
  border-bottom:1px solid var(--rule); background:var(--ink-2); }
.ch-map__shot img{ display:block; width:100%; height:100%; object-fit:cover;
  object-position:top center; filter:saturate(.78) brightness(.82);
  transition:filter .25s, transform .35s; }
/* Угловые метки, как у остальных врезок системы */
.ch-map__item::before,.ch-map__item::after{
  content:""; position:absolute; width:12px; height:12px; z-index:2;
  opacity:0; transition:opacity .2s; pointer-events:none; }
.ch-map__item::before{ top:-1px; left:-1px;
  border-top:1px solid var(--gold-tick); border-left:1px solid var(--gold-tick); }
.ch-map__item::after{ bottom:-1px; right:-1px;
  border-bottom:1px solid var(--gold-tick); border-right:1px solid var(--gold-tick); }
.ch-map__item:hover::before,.ch-map__item:hover::after{ opacity:1; }

.ch-map__body{ padding:18px 20px 20px; display:flex; flex-direction:column;
  gap:8px; flex:1; }
.ch-map__name{ font:600 20px/1.2 var(--serif); color:var(--paper); margin:0; }
.ch-map__desc{ margin:0; font-size:14.5px; line-height:1.55;
  color:var(--paper-2); max-width:none; }
.ch-map__path{ margin:auto 0 0; padding-top:12px;
  font:var(--w-data) 11.5px/1 var(--mono); letter-spacing:.04em;
  color:var(--quiet); border-top:1px solid var(--rule-soft); }
.ch-map__item:hover .ch-map__path{ color:var(--gold-label); }

/* Группа карты: подпись слева, сетка справа — та же левая ось */
.ch-map-group + .ch-map-group{ margin-top:var(--sec-y); }

@media (max-width:640px){
  .ch-map{ grid-template-columns:1fr; gap:20px; }
}

/* ═══ сетка ═════════════════════════════════════════════════
   Эти правила два дня жили только в прототипе, в инлайновом блоке,
   и в опубликованном слое их не было. Страницам WordPress это было
   незаметно: там раскладку колонок даёт блочный редактор через
   .wp-block-columns. Статической странице взять её негде — журнальная
   раскладка у неё рассыпалась в один столбец, и сессии лаунчера
   пришлось скопировать правила себе.

   То есть у системы завёлся ровно тот второй источник правды, от
   которого она и защищает. Сетка переехала сюда; в прототипе
   инлайновая копия удалена, и он теперь доказывает опубликованный
   слой, а не подменяет его. */
.ch-cols{ display:flex; gap:var(--gut); align-items:flex-start; }
.ch-cols > *{ min-width:0; }
.c-25{ flex:0 0 23%; }   .c-75{ flex:1; }
.c-66{ flex:0 0 62%; }   .c-34{ flex:1; }
.c-68{ flex:1; }         .c-32{ flex:0 0 232px; }
@media (max-width:940px){
  .ch-cols{ flex-direction:column; }
  .c-25,.c-75,.c-66,.c-34,.c-68,.c-32{ flex:1 1 auto; width:100%; }
}

/* Подпись под знаком в подвале — тоже жила только в прототипе. */
.ch-foot__about{ color:var(--quiet); font-size:14.5px; line-height:1.65;
  margin:16px 0 0; max-width:26ch; }

/* ── листинг: не молчать, когда забыли класс ──────────────
   Правила номеров строк висели только на .ln и .src. Разметка без
   классов выглядела рабочей, но номера копировались вместе с кодом:
   user-select не применялся, и об этом ничто не сообщало. Позиционный
   запасной вариант закрывает случай, когда класс забыли. */
.ch-listing td:first-child:not(.src){
  width:1%; padding:0 18px 0 2px; text-align:right;
  color:var(--quiet); user-select:none; -webkit-user-select:none;
  font-variant-numeric:tabular-nums; border-right:1px solid var(--rule-soft); }
.ch-listing td:last-child:not(.ln){ padding-left:18px; color:var(--paper-2); }