/* ⚠️ ФАЙЛ СОБИРАЕТСЯ АВТОМАТИЧЕСКИ — правки здесь будут стёрты.
   Источник: sutra/brand/land-quiet/assets/base.css
   Собрано: predeploy.sh. Правьте источник и запускайте сборку. */
/* ═══════════════════════════════════════════════════════════════════════
   «Моя Сутра» — общая основа текстовых страниц сайта
   ═══════════════════════════════════════════════════════════════════════

   Зачем этот файл. До него каждая страница носила свою копию оформления
   внутри себя: лендинг, политика, 404 и образец экрана — четыре отдельных
   набора правил с одними и теми же цветами и шрифтами. Пока страниц четыре,
   это терпимо; на двадцати страницах справочника любая правка палитры
   превращается в двадцать одинаковых правок руками, и файлы неизбежно
   разъезжаются. Здесь — единственный источник правды по палитре, шрифтам,
   геометрии и типографике документа.

   Что этот файл НЕ покрывает: лендинг (index.html). У него собственная
   система — нить с насечками дней, экраны, анимация появления, — и она
   утверждена владельцем. Лендинг живёт своим кодом и намеренно не тронут.

   Образец, с которого списана типографика, — privacy.html: она уже прошла
   проверку живым документом (длинный текст, таблицы, печать в PDF).

   Цвета, шрифты и геометрия колонки живут не здесь, а в tokens.css —
   их делит с лендингом весь сайт. Подключать по порядку:
     <link rel="stylesheet" href="/fonts.css">
     <link rel="stylesheet" href="/assets/tokens.css">
     <link rel="stylesheet" href="/assets/base.css">
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Мера строки — 44em (решение владельца 22.08.2026). Было 34em: колонка читалась
     ужатой, особенно рядом с таблицами и на широком экране. 44em — это ~75 знаков
     в строке, верхняя граница нормы для длинного чтения. */
  /* 🔴 Мера несущих блоков — В ПИКСЕЛЯХ, а не в em (правка 20.09.2026).
     Была 44em, и это работало ровно до тех пор, пока элемент набран прозой
     17 px. На заголовке 49,6 px те же 44em давали 2182 px, на подзаголовке
     22,7 — 999, на крупном ответе — 1177: то есть у половины страницы меры
     не было вовсе, и правые края гуляли от 748 до 812. Слепой просмотр
     20.09.2026 нашёл это с другого конца: линейка над заголовком подходила
     к рисунку на 5 px, рамка кнопки месяца — на 2 px при норме 40.
     Та же ловушка уже описана в system.md §1 для подвала — там мера в пикселях
     с 13.08.2026 по этой же причине. Теперь она одна на весь сайт.
     Мера ПРОЗЫ остаётся в em и живёт отдельно — см. --proza ниже. */
  --measure: 748px;
  /* 🔴 Мера ПРОЗЫ — 32 em, около 62 знаков (system.md §1), и она не равна мере
     блока. Правка 20.09.2026 по слепому просмотру: абзацы справочника шли на
     44 em, то есть 86 знаков в строке на Меркурии и 81 на Домах — на 39 %
     длиннее собственной нормы бренда. 44 em остаются у списков, таблиц, прайса
     и подвала: там строка короткая по устройству, и мера держит колонку.
     В em, а не в пикселях, нарочно: 32 em остаются 62 знаками и в прозе 17 px,
     и в подводке 20 px (та же строка системы). */
  --proza: 32em;
  /* 🔴 Та же норма для МАШИНОПИСИ, но считанная в знаках: у моноширинного
     шрифта знак вдвое уже кегля, и 32 em дали бы 53 знака вместо 62. Единица ch
     — это ровно ширина знака, поэтому 62ch = 62 знака буквально.
     Заведено 20.09.2026: слепой просмотр намерил в машинописных сносках
     96–102 знака в строке — ровно ту длину, от которой мы только что лечили
     абзацы. Правило «у служебной строки строка короткая по устройству»
     проверки не выдержало. */
  --proza-mono: 62ch;
  /* Мера несущих блоков — та же, что у колонки. Объявлена здесь, чтобы страницы
     не заводили её каждая у себя: на страницах домов она была задана внутри
     (58em) и не работала вовсе — колонка уже 812 px, шире блок не станет.
     Одна мера на сайт, как и на главной. */
  --col-wide: var(--measure);
  /* Колонка текста целиком — мера плюс 4rem, 812 px. На широком экране она
     становится колонкой сетки рядом с колонкой меню (блок «колонка меню»),
     и её ширина обязана остаться той же, что без меню. */
  --col-max: calc(var(--measure) + 4rem);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-display);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

/* зерно бумаги — то же, что на лендинге */
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:3;
  opacity:.055;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

.page{
  position:relative;
  max-width:var(--shell);
  margin-inline:auto;
  min-height:100vh;
  display:flex; flex-direction:column;
  padding:36px var(--pad-r) 28px var(--text-x);
}

/*═ ОБЩЕЕ: нить ═*/
/* ⚠️ Блок повторяется слово в слово в трёх документах (sutra/brand/land-quiet:
   oferta.html, vozvrat.html, privacy.html): до 11.09.2026 у них была своя нить —
   прямая бледная линия с красной точкой, «не та, что на остальном сайте» (первый
   круг правок). Сборка build_html.py сверяет копии. Колонка документа на узком
   экране не центрируется, поэтому слагаемое центровки в left там переопределено
   собственным правилом документа сразу после блока. */

/* ————— нить —————
   🔴 Переписана 22.08.2026 по замечанию владельца и по system.md §7.

   Здесь стояла прямая полоска без насечек, и в комментарии — объяснение, что
   «здесь документ, а не календарь». Система бренда говорит обратное и прямо:
   «Нить — единственная графика на сайте, и она обязана вести себя одинаково
   везде», а насечки-дни «идут непрерывно, от первого экрана до подвала. Это
   шкала времени, а не украшение». Прямая полоска была самовольным упрощением.

   Волна и насечки взяты с лендинга без изменений: тот же паттерн размахом ±6
   в поле 40, начинается и кончается на координате 19 — стыкуется сама с собой
   при любой высоте страницы, шва не видно. Насечки одним слоем на весь документ,
   иначе шаг дней сбивается на каждом стыке.

   ЦВЕТ. Полный кирпич, как на лендинге: 5,16 : 1 к бумаге. До этого нить рисовали
   выцветшей (1 px на 45 % прозрачности, 1,98 : 1) — главный фирменный элемент
   физически не читался, а на телефоне пропадал совсем.

   ПОЛОЖЕНИЕ. Колонка .col центрируется, и жёсткая привязка к левому краю окна
   уводила нить на 214 px от текста. Слагаемое max(0px, …) — ровно то, на сколько
   центрирование сдвинуло колонку; нить всегда стоит на фирменном расстоянии
   от текста, а на узких экранах, где колонка занимает всю ширину, оно равно нулю. */
.thread{
  position:absolute; top:0; bottom:0; width:var(--thread-w);
  left:calc(var(--thread-x) - var(--thread-w) / 2
            + max(0px, (100% - var(--text-x) - var(--pad-r)
                        - (var(--measure) + 4rem)) / 2));
  pointer-events:none; z-index:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='168' viewBox='0 0 40 168'><path d='M19 0 C 19 28 25 56 25 84 C 25 112 14 140 19 168' fill='none' stroke='%23B23A22' stroke-width='1.5' stroke-linecap='round'/></svg>");
  background-repeat:repeat-y;
  background-position:top center;
}
/* Насечки-дни — отдельным слоем поверх нити, тем же шагом, что на лендинге.
   Гаснут растушёвкой у подвала: календарь кончается там, где кончается продукт. */
.thread::after{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(50% - var(--tick-w) / 2); width:var(--tick-w);
  background:repeating-linear-gradient(to bottom,
    rgba(178,58,34,.34) 0 1px, transparent 1px var(--day-step));
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 48px), transparent);
          mask-image:linear-gradient(to bottom,#000 calc(100% - 48px), transparent);
}
/* узел ставится на ту строку, которая на странице главная */
.knot{
  position:absolute; z-index:1;
  left:calc(var(--thread-x) - var(--text-x) - 6px);
  top:.55em; width:13px; height:13px; border-radius:50%;
  background:var(--thread);
}
/* 🔴 Узел на внутренних страницах не рисуем. В системе бренда он значит «сегодня»
   и существует в единственном числе — на лендинге. Разделы метятся нитью и насечкой,
   а не узлом (brand/land-quiet/system.md §7). Плюс при центрированной колонке узел,
   привязанный к заголовку, слезал с нити и висел в пустоте между ними. */
main .knot{display:none}
/*═ /ОБЩЕЕ: нить ═*/

/* ————— шапка ————— */
header{
  display:flex; justify-content:space-between; align-items:baseline;
  gap:24px; position:relative; z-index:1;
  padding-bottom:18px; border-bottom:1px solid var(--hairline);
  flex-wrap:wrap;
}

/* ── навигация по разделам ─────────────────────────────────────────────────────
   🔴 Заведена 22.08.2026 по решению владельца. До неё на сайте не было НИ ОДНОГО
   способа перейти со страницы на страницу: ни меню, ни крошек в шапке, ни
   закреплённой кнопки — при шести публичных разделах в подвале. Человек, попавший
   из поиска на календарь, о расчёте карты не узнавал вовсе.

   Набрана моноширинным вторым планом, а не терракотой: правило бренда даёт
   акценту три места на экран, и они уже заняты нитью, узлом и главной кнопкой.
   Текущий раздел помечен чернилами и линией — это единственное, что его выделяет. */
.nav{
  display:flex; flex-wrap:wrap; gap:0 22px; align-items:baseline;
  margin-left:auto; font-family:var(--font-mono); font-size:12px;
  letter-spacing:.06em;
}
/* 🔴 Подчёркивание пункта — text-decoration, а не border-bottom (правка
   23.08.2026). На телефоне цель нажатия добирается высотой коробки, и линия по
   низу коробки отъезжает от слова на всю добавку: читается разделителем строк,
   а не подчёркиванием. text-underline-offset привязан к тексту и переживает
   любую высоту коробки. */
.nav a{
  color:var(--muted); text-decoration:none; padding:6px 0;
  transition:color 140ms ease-out, text-decoration-color 140ms ease-out;
}
.nav a:hover{
  color:var(--thread);
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:5px; text-decoration-color:var(--thread);
}
/* «Вы здесь» сильнее, чем «под мышью» (первый круг правок 11.09.2026). Было:
   текущий пункт отличался от соседей только тоном (2,87 : 1 между ними) и
   оливковой чертой в 1 px, а наведение давало терракоту — то, где ты есть,
   читалось слабее того, куда показываешь. Теперь черта 2 px основным цветом
   текста; наведение остаётся тонкой терракотовой. */
.nav a[aria-current="page"]{
  color:var(--ink);
  text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:5px; text-decoration-color:var(--ink);
}
.nav a:focus-visible{outline:2px solid var(--ink); outline-offset:3px}

@media (max-width:900px){
  /* 🔴 Разделы переносятся по строкам, а не прокручиваются вбок (правка
     23.08.2026). Было: overflow-x:auto плюс выключенная руками полоса прокрутки
     (scrollbar-width:none). Замер слепого просмотра на 375: содержимое меню
     536 px в окне 313 — за экраном оставалось 42 % пунктов, на 320 из восьми
     не было видно трёх («Меркурий», «Книга перемен», «Как считаем»), и ни
     полосы, ни градиента, ни стрелки — ни одного намёка, что там что-то есть.
     Перенос по строкам — то же решение, что уже работает на широком экране.
     Высота пункта 44 px: норма цели нажатия, было 36. */
  header{align-items:center}
  .nav{
    order:3; width:100%; margin:8px 0 0; gap:0 20px; flex-wrap:wrap;
  }
  .nav a{
    white-space:nowrap; padding:0;
    min-height:44px; display:inline-flex; align-items:center;
  }
}
.mark{
  font-size:19px; letter-spacing:.005em; color:var(--ink);
  text-decoration:none;
  /* Имя сайта со знаком не переносится никогда: строка просит 135 px, и в узкой
     колонке знак уезжал на свою строку — коробка 80 px вместо 49 (слепой
     просмотр 20.09.2026). Перенос здесь не спасает вёрстку, а ломает знак. */
  white-space:nowrap;
}
.mark:hover{color:var(--thread)}
.back{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
  color:var(--muted); text-decoration:none;
  display:inline-flex; align-items:center; gap:8px;
  transition:color 140ms ease-out;
}
.back:hover{color:var(--thread)}
.back svg{display:block}

/* хлебные крошки: на страницах справочника человек должен видеть,
   где он и как вернуться на уровень выше */
.crumbs{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:.05em;
  color:var(--muted); margin:26px 0 0; position:relative; z-index:1;
}
.crumbs a{color:var(--muted); text-decoration:none}
.crumbs a:hover{color:var(--thread)}
.crumbs a:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.crumbs span{margin:0 7px; opacity:.6}

/* ————— тело документа ————— */
/* Одна колонка на всю страницу — шапка, крошки, тело и подвал по одной оси.
   Центрировать их по отдельности не вышло: у каждого свои поля, и они разъезжались. */
.col{
  max-width:calc(var(--measure) + 4rem); margin-inline:auto; width:100%;
  display:flex; flex-direction:column; flex:1 1 auto;
}
@media (max-width:900px){ .col{max-width:none} }
main{position:relative; z-index:1; flex:1 1 auto; padding:44px 0 8px}

/*═ ОБЩЕЕ: знак и полоса ═*/
/* ⚠️ Блок повторяется слово в слово в вёрстке главной и трёх документов
   (sutra/brand/land-quiet: index.html, oferta.html, vozvrat.html, privacy.html):
   base.css они не подключают. Сборка build_html.py сверяет копии с этим файлом
   и падает при расхождении. Правится здесь, потом переносится туда. */

/* ── знак у имени ─────────────────────────────────────────────────────────────
   «Орбита и точка» (sutra/brand/orbit) слева от слова «Моя Сутра» — решение
   владельца 11.09.2026. Размер — по слову, как в фирменном логотипе
   sutra-lockup-*.svg: там знак в 1,37 раза выше кегля надписи. 19 px × 1,37 = 26.
   На телефоне кегль 17, выходит 23,3 — меньше минимума знака 24 px
   (orbit/README.md), поэтому 24. Зазор до слова — пол-кегля, как в логотипе.

   Посадка: центр знака на середине высоты прописных. У Lora прописная 0,7 em,
   её середина — 0,35 em над строкой, значит низ знака уходит под строку на
   половину своего размера минус 0,35 em. Знак стоит в строке текста, а не
   отдельной коробкой, — шапка по-прежнему выравнивается по строке слова.

   Кольцо и бусина — чернилами самой надписи, в тёмной теме тоже: отдельный
   оттенок знака (#101014) рядом с чернилами сайта (#17140F) читался бы как
   склейка двух файлов. При наведении краснеет только слово: знак не
   перекрашивают (orbit/README.md, «Правила применения»). */
.mark .sign{
  width:26px; height:26px; margin-right:.5em;
  vertical-align:calc(.35em - 13px);
  color:var(--ink);
}
@media (max-width:640px){
  .mark .sign{width:24px; height:24px; vertical-align:calc(.35em - 12px)}
}

/* ── полоса клуба 108 ─────────────────────────────────────────────────────────
   Слово владельца 11.09.2026: «полупрозрачная строка в фирменном цвете
   с объявлением про клуб 108». Разметка — templates/_club.html, одна на сайт.

   ЦВЕТ. Нить на 18 % поверх бумаги: сквозь полосу видны бумага и её зерно,
   а по силе это строка-объявление, а не четвёртая кнопка. Терракоте правило
   бренда даёт три места на экран; сплошная заливка во всю ширину отняла бы
   вес у главной кнопки страницы. Итоговый цвет #E8CFC4, в тёмной теме #382017.
   Текст чернилами: 12,4 : 1 к итоговому цвету (в тёмной 13,0 : 1). Серый
   второго плана здесь не годится — к полосе он даёт 4,32 : 1 при норме 4,5.
   Прозрачность выбрана счётом: при 12 % полоса почти сливается с бумагой
   (1,19 : 1 между ними), при 30 % она темнее бледной кнопки тарифа «Начало»
   #DAA799 и спорит с ней.

   Цвет берётся из var(--thread), поэтому тема раздела перекрашивает полосу
   сама: на «Книге перемен» это тёмная терракота #D9603F поверх тёмной бумаги.
   Первая строка — запасной цвет для браузеров без color-mix.
   Не прилипает при прокрутке и не закрывается — решение владельца. */
.club{
  position:relative; z-index:1;
  background:rgba(178,58,34,.18);
  background:color-mix(in srgb, var(--thread) 18%, transparent);
  color:var(--ink);
}
.club__in{
  max-width:var(--shell); margin-inline:auto;
  /* Поля симметричные, текст по центру окна — слово владельца 12.09.2026.
     До этого объявление стояло по оси колонки текста, как вся страница. */
  padding:9px var(--pad-r);
}
/* Машинописью, а не антиквой: по правилу двух голосов (system.md §2) антиквой
   говорит человек, а объявление над шапкой — служебная пометка, того же рода,
   что меню, «Кабинет» и крошки под ним. Кегль 13 — на ступень крупнее меню (12):
   полоса стои́т первой строкой страницы и должна читаться, не споря с заголовком.

   max-width:none — не украшение. Общее правило абзаца на внутренних страницах
   и в документах — p{max-width:var(--measure)}, а мера в em: на кегле полосы
   она сжималась до 572 px (в документах до 442), и объявление на ноутбуке
   ломалось на две строки (поймано замером 11.09.2026). Ширину полосе задают её
   коробки, а не мера прозы. */
.club p{
  margin:0; max-width:none;
  font-family:var(--font-mono); font-size:13px; line-height:1.5; letter-spacing:.02em;
  color:var(--ink); text-wrap:pretty;
}
.club a{
  color:var(--ink); margin-left:.6em; white-space:nowrap;
  text-decoration:underline; text-decoration-thickness:1px;
  text-underline-offset:3px; text-decoration-color:currentColor;
}
.club a:hover{text-decoration-thickness:2px}
.club a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
/* Телефон: не больше двух строк на 320 (слово владельца). Текст полосы
   сменился 12.09.2026 — владелец выбрал вариант слепого критика, без слов
   «клуб» и «места»: «Первым 108 подписчикам — 20 % на всё, навсегда» плюс
   ссылка «К тарифам». Он короче прежнего, запас по строкам только вырос;
   замер держит tests/test_shapka_i_polosa.py (мерит в браузере).
   Поля 16, а не 36–42, как у колонки текста: на 320 при полях колонки тексту
   осталось бы 268 — меньше первой строки. Полоса во всю ширину окна, ей можно. */
@media (max-width:640px){
  .club__in{padding:8px 16px}
}

/* ── места нажатия на сенсорных ширинах (первый круг правок 11.09.2026) ──────
   Замер на 375: «К тарифам» 73×15, имя со знаком 121×27. Растим поля, а не
   строку: у строчной ссылки вертикальные поля в строку не входят, у блока шапки
   их гасит отрицательный отступ — вёрстка не сдвигается ни на пиксель. */
@media (max-width:900px){
  .mark{padding-block:9px; margin-block:-9px}
}
@media (max-width:640px){
  .club a{padding-block:15px}
}

/* ── «К содержанию» ───────────────────────────────────────────────────────────
   Первая остановка Tab на каждой странице, видна только в фокусе. До неё до
   главной кнопки страницы было 12–15 нажатий. Не display:none: спрятанную так
   ссылку не видит и читалка. */
.skip{
  position:absolute; left:12px; top:8px; z-index:10;
  padding:11px 14px; background:var(--paper); color:var(--ink);
  font-family:var(--font-mono); font-size:13px; letter-spacing:.04em;
  border:1px solid var(--ink); border-radius:2px; text-decoration:none;
  transform:translateY(calc(-100% - 16px));
}
.skip:focus{transform:none; outline:2px solid var(--ink); outline-offset:2px}
/* Строка полосы — по центру окна (слово владельца 12.09.2026). Правило живёт
   ВНУТРИ общего блока: снаружи оно не доезжало до копий главной и документов,
   и на главной текст оставался прижатым к колонке. */
.club__line{max-width:none; margin-inline:auto; text-align:center}
/*═ /ОБЩЕЕ: знак и полоса ═*/

/* Шапка стои́т рядом с колонкой текста, а не внутри неё (правка 11.09.2026):
   на широком экране её части расходятся по сетке страницы. На узком она обязана
   идти по той же оси, что колонка, — поэтому те же мера и центровка. */
.page > header{max-width:calc(var(--measure) + 4rem); margin-inline:auto; width:100%}
@media (max-width:900px){ .page > header{max-width:none} }
/* Текст полосы — с левого края колонки текста, как шапка под ним. */

/*═ ОБЩЕЕ: разделы ═*/
/* ⚠️ Блок повторяется слово в слово в вёрстке главной и трёх документов —
   base.css они не подключают. Сборка build_html.py сверяет копии.

   Разделы на телефоне — под одной кнопкой «Разделы» (первый круг правок
   11.09.2026). Замер до: на 375×812 заголовок страницы начинался на 347–393 px —
   43–48 % первого экрана уходило на полосу, знак и девять разделов переносом
   в три строки по 44 px; на «Книге перемен» название гексаграммы дня стояло
   ниже экрана. Разметка — <details> в общей шапке: открывается нажатием и
   с клавиатуры без скрипта, девять ссылок остаются в разметке для поиска.

   Шире 640 кнопки нет: блок всегда открыт, а подпись «Разделы» спрятана. */
.razdely summary{display:none}
.razdely .nav{margin:0}
/* Сенсорные ширины: крошки и правая ссылка шапки — место нажатия 44 px.
   Замер на 375: «Главная» в крошках 50×13, «Кабинет» на оферте 51×18. Приём тот
   же, что у «Кабинета» внутренних страниц: поля плюс отрицательный отступ. */
@media (max-width:900px){
  .back{padding-block:14px; margin-block:-14px}
  .crumbs a{padding-block:16px}
}
@media (max-width:640px){
  /* Кнопка «Разделы» одета так же, как кнопка в бота рядом: рамка несущей
     линейкой, машинопись чернилами. Стрелка поворачивается у открытого списка. */
  .razdely summary{
    display:inline-flex; align-items:center; gap:10px;
    min-height:44px; padding:0 14px;
    font-family:var(--font-mono); font-size:12px; letter-spacing:.06em;
    color:var(--ink); cursor:pointer; list-style:none;
    border:1px solid var(--rule-dark); border-radius:2px;
  }
  .razdely summary::-webkit-details-marker{display:none}
  .razdely summary::after{
    content:""; width:6px; height:6px; margin-top:-4px;
    border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor;
    transform:rotate(45deg); transition:transform 140ms ease-out;
  }
  .razdely[open] summary::after{margin-top:3px; transform:rotate(-135deg)}
  .razdely summary:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
  .razdely[open] .nav{margin-top:8px}
}
/*═ /ОБЩЕЕ: разделы ═*/

/*═ ОБЩЕЕ: колонка меню ═*/
/* ⚠️ Блок повторяется слово в слово в трёх документах (sutra/brand/land-quiet:
   oferta.html, vozvrat.html, privacy.html) — base.css они не подключают.
   Сборка build_html.py сверяет копии и падает при расхождении.

   Слово владельца 11.09.2026: «На всех страницах кроме главной слева и справа
   очень много воздуха — навигацию лучше переместить с верхнего горизонтального
   положения в левое и вертикальное… в колонке навигации должна быть кнопка
   с переходом в бота». Нарисовал он так: колонка меню слева от нити, «Моя Сутра»
   со знаком — в левый верхний угол над ней, «Кабинет» — в правый верхний угол.

   Геометрия:
     колонка меню 176 — по самой широкой строке, кнопке «Открыть в Telegram»
                        машинописью 12 px: 169 px вместе с полями и рамкой;
     меню → нить   40 — насечка-день торчит от оси на 10, волна на 6: между
                        краем меню и насечкой остаётся 30 px воздуха;
     нить → текст  96 — фирменное расстояние, --text-x минус --thread-x;
     колонка текста 812 — та же мера 44em + 4rem, что без меню;
     поля по краям от 48 — шаг сетки, 8 × 6.
   Сумма 176 + 40 + 96 + 812 + 48 × 2 = 1220. С этой ширины колонка меню встаёт,
   а колонка текста при ней остаётся полной, 812 — такой же, как сейчас на 1080.
   Уже 1220 меню уходит строкой под знак и «Кабинет».

   ЛЕВЫЙ КРАЙ ГРУППЫ (первый круг правок 11.09.2026: «логотип и полоса прыгают
   на 10 px при переходе с главной»). Сначала группа стояла по центру окна,
   и знак оказывался на 158 при 168 у главной (на 1920 — 398 против 408).
   Теперь группа начинается на линии главной — --text-x от края страницы
   шириной до 1440, — пока справа хватает места на всю группу и поле 48, то есть
   с 1340. Уже группа прижимается к правому полю и уходит левее линии главной
   (на 1280 на 60 px): 1124 px правее 168 на таком экране не помещаются. */
:root{
  /* 176 — по самой широкой строке колонки, кнопке «Открыть в Telegram».
     ⚠️ 20.09.2026 колонку сужали до 132, чтобы отдать место зверю раздела,
     и вернули обратно в тот же день: место нашлось в другом месте (мера прозы),
     а сужение стоило дорого — знак «⊙ Моя Сутра» просит 135 px и на 132
     разрывался на две строки на КАЖДОЙ внутренней странице. Страховка от этого
     теперь стои́т отдельно, у .mark. */
  --rail-w:   176px;
  --rail-gap: 40px;
  --side:     48px;
  /* меню + зазор до нити + нить→текст + колонка текста */
  --group: calc(var(--rail-w) + var(--rail-gap) + var(--text-x) - var(--thread-x)
                + var(--col-max));
  /* Проценты считаются от ширины окна там, где переменная применена (.page,
     .club__in): у пользовательских свойств значение подставляется как есть. */
  --rail-left: min(max(0px, (100% - var(--shell)) / 2) + var(--text-x),
                   100% - var(--side) - var(--group));}

/* 🔴 1220–1340: поля делятся поровну (правка 20.09.2026 по слепому просмотру).
   На этих ширинах группа уже не помещается на линии главной и по старому правилу
   упиралась в правое поле 48 px: слева оставалось 92–168, отношение до 3,2 : 1,
   и страница читалась съезжающей с экрана. Делим остаток пополам — поля ровные.

   ⚠️ Почему медиазапросом, а не формулой на всю ширину: с 1340 знак обязан
   стоять ровно на линии главной, иначе он прыгает при переходе с неё (правка
   11.09.2026 и её сторож test_znak_na_odnoy_linii_a_polosa_po_centru). Формула
   «треть остатка» держала симметрию, но сдвигала знак на 24 px как раз на 1340.
   Ниже 1340 знак с линией главной всё равно разошёлся — там симметрия дешевле. */
@media (min-width:1220px) and (max-width:1339px){
  :root{ --rail-left: calc((100% - var(--group)) / 2) }
}

/* Узкий экран: разделы и кнопка — строкой под знаком и «Кабинетом».
   Кнопка встаёт справа от разделов, если ей хватает места, иначе — под ними.
   Основа разделов 420 px: уже неё меню из девяти пунктов рвётся на четыре-пять
   строк, и тогда лучше отдать кнопке свою строку. */
.side{
  order:3; flex:1 1 100%; margin-top:8px;
  display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px 24px;
}
.side .razdely{flex:1 1 420px; min-width:0}
/* Телефон: «Разделы» и кнопка в бота — одной строкой. Раскрытый список встаёт
   на свою строку под ними и отодвигает кнопку в бота вниз: подпись «Разделы»
   при раскрытии остаётся на месте, прыгает только то, что ниже. */
@media (max-width:640px){
  .side{margin-top:0; gap:8px 12px; align-items:center}
  .side .razdely{flex:0 0 auto}
  .side .razdely[open]{flex-basis:100%}
}

/* Кнопка в бота в колонке меню.
   🔴 Залита терракотой — решение владельца 12.09.2026. До этого стояла рамкой,
   чтобы не спорить с главной кнопкой страницы: терракота по правилу бренда
   получает три места на экран, а меню видно на каждом. Владелец выбрал заливку,
   зная цену: на страницах с формой на экране две терракотовые кнопки.
   Бумага на терракоте — 5,25 : 1, как у главной кнопки. */
.bot{
  display:inline-flex; align-items:center; flex:none;
  min-height:40px; padding:9px 12px;
  font-family:var(--font-mono); font-size:12px; line-height:1.3; letter-spacing:.06em;
  color:var(--paper); text-decoration:none;
  background:var(--thread); border:1px solid var(--thread); border-radius:2px;
  transition:background-color 140ms ease-out, border-color 140ms ease-out;
}
.bot:hover{background:var(--thread-hi); border-color:var(--thread-hi)}
.bot:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
@media (max-width:900px){ .bot{min-height:44px} }

@media (min-width:1220px){
  /* Сетка страницы: колонка меню · нить · колонка текста, с линии главной. */
  .page{
    display:grid; max-width:none;
    grid-template-columns:var(--rail-w)
                          calc(var(--rail-gap) + var(--text-x) - var(--thread-x))
                          minmax(0, var(--col-max));
    grid-template-rows:auto 1fr;
    justify-content:start;
    padding-inline:var(--rail-left) var(--side);
  }
  /* Нить — во второй колонке сетки, на --rail-gap от края меню. Абсолютный
     элемент с номером колонки отсчитывается от неё: поля от края окна считать
     больше не нужно, нить стоит за меню на любой ширине. */
  .thread{grid-column:2; left:calc(var(--rail-gap) - var(--thread-w) / 2)}

  /* Шапка раскладывается по той же сетке (subgrid): знак — над колонкой меню,
     «Кабинет» — в правый угол над колонкой текста, разделы и кнопка — колонкой
     меню на всю высоту страницы. Коробка шапки при этом накрывает всю страницу,
     поэтому сама нажатий не ловит — их получают только её части. */
  .page > header{
    grid-column:1 / -1; grid-row:1 / -1; align-self:stretch;
    display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid;
    align-items:baseline; gap:0;
    max-width:none; margin:0; padding:0; border:0;
    pointer-events:none;
  }
  .page > header > *{pointer-events:auto}
  .page > header > .mark{grid-column:1; grid-row:1; padding-bottom:18px}
  .page > header > .back{grid-column:3; grid-row:1; justify-self:end; padding-bottom:18px}
  /* Линейка под шапкой — только над колонкой текста, как было: нить её
     не пересекает, а колонка меню стоит в поле без линеек. */
  .page > header::after{
    content:""; grid-column:3; grid-row:1; align-self:end;
    border-bottom:1px solid var(--hairline);
  }
  /* Колонка меню прилипает к верху окна: на длинных страницах (асцендент
     по знаку, дома — по 5–6 экранов) разделы и кнопка доступны без прокрутки
     наверх. Начинается на одной высоте с крошками. */
  .side{
    grid-column:1; grid-row:2; align-self:start;
    position:sticky; top:24px;
    flex:none; order:0; margin-top:26px;
    flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:24px;
  }
  /* Основа 420 px из узкой раскладки здесь — высота: колонка меню идёт сверху
     вниз, и блок разделов раздувался до 420, отодвигая кнопку в бота на ~200 px
     под разделы (поймано снимком 11.09.2026). */
  .side .razdely{flex:none}
  .side .nav{flex:none; flex-direction:column; align-items:flex-start; gap:2px}
  .side .nav a{padding:4px 0}
  .col{grid-column:3; grid-row:2; max-width:none; margin:0; width:auto}

  /* 🔴 Полоса больше НЕ по сетке страницы — 12.09.2026, слово владельца:
     «текст объявления сверху центрируй». Сетка ставила текст с края колонки
     меню, вровень со знаком под ним, и центр слов уезжал на 60 px влево от
     середины окна. Объявлению нужна только симметричная рамка полей. */
  .club__in{padding-inline:var(--side)}
  .club__line{max-width:none; margin:0}
}
/* Палец на широком планшете (iPad Pro в альбомной — 1366): цель нажатия
   включается по типу указателя, а не по ширине — design/craft-rules.md. */
@media (min-width:1220px) and (pointer:coarse){
  .side .nav a{min-height:44px; display:inline-flex; align-items:center; padding:0}
  .bot{min-height:44px}
}
/*═ /ОБЩЕЕ: колонка меню ═*/

/* ————— метка раздела: зверь в правом поле ————————————————————————————————
   🔴 Решение владельца 19–20.09.2026: «одна страница — один рисунок», и рисунок
   этот — знак раздела. На главной так уже стои́т дракон (index.html, блок
   «рисунок страницы»), здесь то же для девяти разделов справочника. Витрина
   /zveri — намеренное исключение: там рисунки содержание, а не метка, и стоят
   в полную силу на любой ширине (templates/calc/zveri.html).

   РАЗМЕР 188 px, и он добыт, а не выбран. Первая сборка дала 124: справа от
   колонки текста было 148 px, и всё. Слепой просмотр 20.09.2026 назвал это
   блокером — не бледностью, а толщиной линии: в рисунке она 2 px при ширине
   460, на показе 124 становится 0,54 px (у петуха 0,27), то есть тоньше точки
   экрана. Плотностью это не лечится: тигр темнеет в пятно, а морда остаётся
   кашей. Владелец решил добывать место сужением меню. Сложилось из двух
   источников:

       колонка меню 176 → 132        +44 px   (пол задаёт «Квадрат Пифагора», 127)
       заход в пустое поле колонки   +20 px   (строка кончается раньше кромки)
                                     ──────
       было 124 → стало 188                   линия 0,82 px вместо 0,54

   ⚠️ Больше взять неоткуда, и вот почему. Меню упирается в самую длинную строку
   (129 px, дальше пункты рвутся на две строки). Заход ограничен нормой зазора:
   самая длинная строка сайта кончается в 760 px от начала колонки при её ширине
   812, и после захода до краски петуха остаётся 46 px при норме 40 — запас
   в шесть пикселей, то есть одна длинная строка, которую завтра допишет
   копирайтер. Расстояния «меню → нить» (40) и «нить → текст» (96) — фирменные,
   их трогать нельзя (system.md §16).

   ПОРОГ 1440 — пересчитан после сужения меню и остался прежним. На 1280 свободно
   44 px, на 1340 — 88: это не рисунок, а пятно. Ниже порога зверя нет вовсе,
   и файл не качается — маска объявлена внутри медиазапроса.

   ЗАЗОР ДО ТЕКСТА мерится от набранных СТРОК до КРАСКИ, а не от коробки
   до коробки (system.md §9): у блочного элемента правый край врёт, а у рисунка
   своё прозрачное поле в 7–12 % ширины. Сторож — tests/test_zveri_na_stranicah.py.

   РЕЛЬСА КОНЧАЕТСЯ СО СТАТЬЁЙ. Сначала она шла по всей колонке и была длиннее
   статьи на 439 px: на снимке слепого просмотра тигр стоял поперёк линейки
   подвала, рядом с реквизитами. Теперь рельса живёт внутри <main>, и зверь
   уходит вместе с последним абзацем.

   ПОДПИСИ ПОД РИСУНКОМ НЕТ. Была строка «Почему здесь этот зверь» со ссылкой
   на витрину — снята 20.09.2026 по слепому просмотру. Замер: краска зверя даёт
   к бумаге 1,21 : 1 по основной массе, а подпись 5,64 : 1, подчёркнута и висит
   в правом поле всю прокрутку — самый громкий нетекстовый элемент страницы
   оказывался ярлыком, а не тем, что он объясняет. Та же ссылка стои́т в подвале
   каждой страницы, этого достаточно.

   ПЛОТНОСТЬ РАВНЯЕТСЯ ПО ЛИНИИ, А НЕ ПО МАССЕ. В линейном рисунке глаз читает
   линию, поэтому цель — контраст самой тёмной краски к бумаге: коридор
   1,48–1,56, точка отсчёта тигр на утверждённых 30 % (1,51 : 1). Числа считает
   сборщик масок (sutra/brand/tools/zveri_thumbs.py) — их не подбирают на глаз.

   ⚠️ До этого равняли МАССУ краски: сокол, у которого её вдвое меньше, получал
   45 %, и его линия выходила 1,92 : 1 против 1,45 у уток — вдвое громче, и это
   на «Расчёте», главной посадочной странице. Слепой просмотр назвал перекос,
   владелец выбрал линию. Следствие, которое надо знать: самая тёмная краска
   у всех файлов почти одна (227–239 из 255, генератор один), поэтому по линии
   прозрачности сходятся к 29–31 %, а разница в ОБЩЕЙ заметности между густым
   тигром и редким соколом возвращается. Это цена выбранной мерки, а не промах:
   две мерки одновременно не выравниваются.

   МАСКОЙ, А НЕ КАРТИНКОЙ. Файл отдаёт только плотность (она живёт в альфе),
   цвет берётся из var(--thread) — и тёмная тема «Книги перемен» перекрашивает
   зверя сама. Счёт при 30 %: светлая терракота #D9603F на тёмной бумаге даёт
   1,40 : 1, исходная #B23A22 — 1,21 : 1, то есть картинкой зверя на «Книге
   перемен» не было бы видно вовсе.

   ДЕРЖИТСЯ ОКНА при прокрутке, как дракон: он спутник чтения, а не картинка
   к абзацу. */
:root{
  /* Зазор от самой длинной строки до коробки рисунка — норма системы (§9).
     Мера блока 748 и есть теперь правый край ВСЕГО, что стои́т в статье:
     списков, таблиц, линеек, заголовков и сеток кнопок (правка 20.09.2026). */
  --metka-otstup: 40px;
  --metka-vozduh: 24px;                    /* воздух до кромки окна */
  --metka-levyy: calc(var(--measure) + var(--metka-otstup));
  /* Левый край колонки текста от кромки окна — та же арифметика, что у сетки
     страницы: поле под нить, колонка меню, зазор до нити и нить до текста. */
  --col-left: calc(var(--text-x) * 2 + var(--rail-w) + var(--rail-gap) - var(--thread-x));
  /* Сколько места остаётся зверю. Две ветки: пока окно уже композиции, группа
     стои́т на линии главной и поле растёт вместе с окном; шире композиции поле
     растёт вдвое медленнее — половина прибавки уходит в левое поле. min()
     сам берёт ту, что действует. */
  --metka-dostupno: min(
      calc(100vw - var(--metka-vozduh) - var(--col-left) - var(--metka-levyy)),
      calc(50vw + var(--shell) / 2 - var(--metka-vozduh) - var(--col-left) - var(--metka-levyy)));
  /* Потолок 188 — не вкус, а запас плотности: файл маски 320 px, и на 188
     остаётся 1,70, как на витрине. Шире — и линия начнёт мылиться. */
  --metka-w: min(var(--metka-dostupno), 188px);
  --metka-h: calc(var(--metka-w) * 1.5);   /* пропорция файлов 320 × 480 */
}
.zver-metka{display:none}

/* 🔴 Порог 1420, а не 1440 — правка 20.09.2026 по слепому просмотру. Ступенька
   в один пиксель («на 1439 поля уже 191 px, а зверя нет») лечится не порогом,
   а плавной шириной: зверь растёт вместе с окном от 128 px на 1420 до потолка
   188 на 1584 и выше. Сам порог взят оттуда, где рисунок перестаёт помещаться
   честно: на 1420 ему остаётся 128 px, ниже — меньше, и гунби превращается
   в пятно. Отдельно учтено окно 1440 с классической полосой прокрутки: браузер
   отдаёт медиазапросу 1440, а странице 1425 — зверь при этом встаёт на 148 px
   и всё равно остаётся внутри видимой области, потому что воздух справа (24)
   шире самой полосы (15–17). */
@media (min-width:1420px){
  .zver-metka{
    display:block; position:absolute; z-index:0; pointer-events:none;
    /* Отсчёт от колонки текста: <main> шириной ровно в неё и position:relative.
       Внутри main, а не в сетке страницы, — чтобы рельса кончалась вместе
       со статьёй и не заезжала в подвал. */
    top:0; bottom:0; left:var(--metka-levyy); width:var(--metka-w);
  }
  .zver-metka__in{
    display:block; position:sticky;
    top:calc((100vh - var(--metka-h)) / 2);
  }
  .zver-metka__pic{
    display:block; width:100%; height:var(--metka-h);
    background:var(--thread); opacity:.30;
    -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
    -webkit-mask-position:center; mask-position:center;
    -webkit-mask-size:contain;    mask-size:contain;
  }

  /* Кто на каком разделе — таблица «Где какой зверь стоит» из утверждённого
     текста витрины (sutra/brand/land-quiet/zveri-tekst.md). Файлы собирает
     sutra/brand/tools/zveri_thumbs.py, набор METKI; оттуда же прозрачности.
     Путь относительный: так он верен и для /static/base.css на сайте,
     и для assets/base.css в вёрстке. */
  .zver-metka--tigr      .zver-metka__pic{-webkit-mask-image:url("zveri-metka/tigr.png");      mask-image:url("zveri-metka/tigr.png");      opacity:.30}
  .zver-metka--petuh     .zver-metka__pic{-webkit-mask-image:url("zveri-metka/petuh.png");     mask-image:url("zveri-metka/petuh.png");     opacity:.30}
  .zver-metka--cherepaha .zver-metka__pic{-webkit-mask-image:url("zveri-metka/cherepaha.png"); mask-image:url("zveri-metka/cherepaha.png"); opacity:.29}
  .zver-metka--utki      .zver-metka__pic{-webkit-mask-image:url("zveri-metka/utki.png");      mask-image:url("zveri-metka/utki.png");      opacity:.31}
  .zver-metka--lunma     .zver-metka__pic{-webkit-mask-image:url("zveri-metka/lunma.png");     mask-image:url("zveri-metka/lunma.png");     opacity:.30}
  .zver-metka--ptica     .zver-metka__pic{-webkit-mask-image:url("zveri-metka/ptica.png");     mask-image:url("zveri-metka/ptica.png");     opacity:.30}
  .zver-metka--zayac     .zver-metka__pic{-webkit-mask-image:url("zveri-metka/zayac.png");     mask-image:url("zveri-metka/zayac.png");     opacity:.30}
  .zver-metka--pchela    .zver-metka__pic{-webkit-mask-image:url("zveri-metka/pchela.png");    mask-image:url("zveri-metka/pchela.png");    opacity:.31}
  .zver-metka--sokol     .zver-metka__pic{-webkit-mask-image:url("zveri-metka/sokol.png");     mask-image:url("zveri-metka/sokol.png");     opacity:.29}
}

/* 🔴 Заголовки держат ТОТ ЖЕ правый край, что списки, таблицы и линейки, —
   правка 20.09.2026 по слепому просмотру. Было: линейка над h2 кончалась
   на 748, а сам заголовок без обёртки тянулся до 812, и на одной странице
   оказывалось два правых края. Система (§1) разрешает заголовку выходить
   правее блока — это право оставлено главной, у которой колонка шире; здесь
   один край важнее, потому что в правом поле стои́т зверь и мерить зазор
   надо от самой длинной строки страницы. 16em при кегле 49,6 px давали 794 px
   и съедали у зверя 46. */
h1{
  font-size:clamp(2rem, 3.6vw, 3.1rem);
  font-weight:500; line-height:1.08; letter-spacing:-.02em;
  margin:0 0 20px; max-width:var(--measure); position:relative;
}
h2{
  font-size:1.42rem; font-weight:500; line-height:1.24; letter-spacing:-.012em;
  margin:0 0 18px; padding-top:22px; border-top:1px solid var(--hairline);
  max-width:var(--measure);
}
/* 🔴 Была ошибка единицы, та же самая, что разобрана четырьмя строками ниже
   у подводки: 1.02rem считается от КОРНЯ (16 px), а проза набрана 17. Заголовок
   выходил 16,32 px — мельче абзаца, который он возглавляет. Поймано слепым
   критиком на витрине /zveri 19.09.2026, где таких заголовков тринадцать подряд.
   Теперь em (считается от кегля страницы): 19,04 px на ноутбуке и 17,92 на
   телефоне — выше прозы и заметно ниже h2. */
h3{
  font-size:1.12em; font-weight:500; line-height:1.4;
  margin:32px 0 12px; color:var(--ink); max-width:var(--measure);
}

/* подводка под заголовком: крупнее прозы, но мягче по цвету

   🔴 Было 1.06rem — и это ошибка единицы, а не вкуса: rem считается от корня
   (16 px), а проза набрана 17 px. Подводка выходила 16,96 px, то есть на
   0,04 px МЕЛЬЧЕ прозы, — её просто не существовало ни на ноутбуке, ни на
   телефоне. Теперь em (считается от размера страницы) и величины из системы
   бренда: 20 px на широком экране, 16,5 px на телефоне (system.md §2). */
/* Мера подводки — мера колонки, а не 44 своих em (первый круг правок
   11.09.2026: на «Совместимости» и «Книге перемен» подводка доходила до ~1280,
   а линейки разделов обрывались на 1218 — у страницы было два правых края).
   Кегль подводки 1,18 em, значит 44 em прозы — это 44 / 1,18 её собственных. */
.lead{
  font-size:1.18em; line-height:1.6; color:var(--ink-soft);
  /* Подводка — та же мера прозы: 32 em её собственного кегля. Было 44 em / 1,18,
     то есть 37 em — подводка шла длиннее прозы, которую возглавляет. */
  max-width:var(--proza); margin:0 0 44px;
}

section{max-width:var(--measure); margin:0 0 48px; scroll-margin-top:24px}
section.wide{max-width:58em}

p{margin:0 0 15px; max-width:var(--measure)}
/* Проза внутри статьи — своей мерой; блоки (списки, таблицы, прайс) остаются
   на мере блока, их правило стои́т ниже и специфичнее. */
main p{max-width:var(--proza)}
p:last-child{margin-bottom:0}
strong,b{font-weight:600}

/* 🔴 Сплошной список — это проза, и мера у него прозы, а не блока (20.09.2026).
   Замер слепого просмотра: пункты шли по 77–88 знаков в строке при норме 62.
   Плюс втяжка маркера: её прибавляем к мере, иначе сам текст окажется короче
   нормы на ширину маркера.
   ⚠️ Двухколоночные перечни (.signs на асценденте, сетка домов) сюда НЕ входят:
   там строка-ряд, а не сплошной текст, и она коротка по устройству — это
   проверено замером по строчным боксам, а не объявлено. */
ul,ol{margin:0 0 15px; padding-left:1.15em; max-width:calc(var(--proza) + 1.15em)}
li{margin:0 0 8px}
li:last-child{margin-bottom:0}
ul{list-style:none; padding-left:0}
ul > li{position:relative; padding-left:20px}
ul > li::before{
  content:""; position:absolute; left:3px; top:.72em;
  width:5px; height:1px; background:var(--hairline);
}

a{
  color:var(--thread); text-decoration:underline; text-underline-offset:2px;
  text-decoration-thickness:.5px; text-decoration-color:rgba(178,58,34,.45);
}
a:hover{color:var(--thread-hi); text-decoration-color:var(--thread-hi)}
a:focus-visible{outline:2px solid var(--ink); outline-offset:2px}

/* врезка — оговорка или предупреждение по ходу текста */
/* 🔴 Коробка врезки — по своему тексту, а не по мере блока (20.09.2026).
   Было 748 при тексте 544: справа внутри рамки оставалось 163–204 px пустоты,
   и врезка читалась недозаполненной («Дома», «Совместимость», «Книга перемен»,
   возврат, политика). Мера прозы плюс собственные поля — текст внутри при этом
   не трогаем: расширь его, и вернётся строка на 80 знаков. */
.note{
  background:var(--paper-deep); border-left:1px solid var(--hairline);
  padding:16px 20px; margin:0 0 18px;
  max-width:calc(var(--proza) + 40px + 1px);   /* поля 20 + 20 и линейка слева */
}
.note p{margin:0}
.note p + p{margin-top:10px}

/* техническая строка: мелкая машинопись под содержательным блоком */
.tech{
  font-family:var(--font-mono); font-size:12px; line-height:1.6;
  letter-spacing:.02em; color:var(--muted);
  max-width:var(--proza-mono); margin:0 0 15px;
}

/* ————— таблица —————
   На широком — обычные колонки, на телефоне рассыпается в карточки:
   узкая таблица из трёх колонок нечитаема, а горизонтальная прокрутка
   на телефоне теряется. */
table{
  /* Мера общая с линейками и списками. Было 58em: на широком экране таблица
     уходила на 64 px правее всех линеек страницы, и у страницы оказывалось
     два правых края (слепой просмотр 20.09.2026, оферта). */
  border-collapse:collapse; width:100%; max-width:var(--measure);
  margin:0 0 20px; font-size:15.5px; line-height:1.5;
}
th{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.15em;
  text-transform:uppercase; color:var(--muted); font-weight:400;
  text-align:left; padding:0 24px 10px 0;
}
td{
  padding:15px 24px 15px 0; border-top:1px solid var(--hairline);
  color:var(--ink-soft); vertical-align:top;
}
td:first-child{color:var(--ink)}
tr:last-child td{border-bottom:1px solid var(--hairline)}

/* ————— кнопка в бота —————
   Единственный акцентный элемент страницы. Цвет — нить: то же, чем
   размечен весь сайт. */
.cta{
  display:inline-flex; align-items:center; gap:12px;
  background:var(--thread); color:var(--paper);
  font-family:var(--font-mono); font-size:14px;
  letter-spacing:.05em; text-decoration:none;
  border:0; cursor:pointer;
  padding:16px 28px; border-radius:2px;
  transition:transform 140ms cubic-bezier(.2,.8,.3,1), background-color 140ms ease-out;
}
.cta:hover{background:var(--thread-hi); transform:translateY(-1px)}
.cta:active{transform:translateY(0)}
.cta:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:2px}
.cta svg{display:block}

/* блок с кнопкой в конце статьи */
.act{
  border-top:1px solid var(--hairline);
  /* Та же правка, что у врезки: линейка над блоком идёт по его тексту. */
  padding-top:28px; margin:52px 0 0; max-width:var(--proza);
}
.act p{margin:0 0 20px; color:var(--ink-soft)}

/* ————— «читать дальше» —————
   Перелинковка: человек, пришедший из поиска на одну статью, должен
   увидеть соседние. Без этого каждая страница — тупик. */
.next{
  border-top:1px solid var(--hairline);
  padding-top:22px; margin:52px 0 0; max-width:44em;
}
.next__cap{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); margin:0 0 14px;
}
.next ul{margin:0}
.next li{margin:0 0 9px; padding-left:0}
.next li::before{display:none}
/* 🔴 Ссылка, а не проза (слепой разбор 11.09.2026). Было color:var(--ink-soft)
   без линии: на телефоне «читать дальше» ничем не отличалось от соседнего
   абзаца — замер дал один и тот же цвет до единицы, — а отличие давало только
   наведение, которого на телефоне нет. Та же грабля была в подвале 22.08.2026. */
.next a{
  color:var(--thread); text-decoration:underline; text-underline-offset:2px;
  font-size:15.5px; line-height:1.45;
}
.next a:hover{color:var(--thread-hi); text-decoration-color:var(--thread-hi)}
/* Фокус на содержании после ссылки «К содержанию» — без рамки: человек и так
   оказался там, куда просил. */
main:focus{outline:none}
/* Тёмный раздел объявляет себя системе, а не только цветами: под тёмное
   перекрашиваются поля ввода, полосы прокрутки и рамки браузера. */
.theme-dark{color-scheme:dark}
/* Палец: строка «читать дальше» 20 px в высоту (замер на 375, «Книга перемен»).
   Поля строчной ссылки в строку не входят — список не раздвигается. */
@media (max-width:900px){ .next a{padding-block:12px} }

/* ————— низ —————
   🔴 Подвал стал общим с главной 23.08.2026 (templates/_footer.html). Раньше
   здесь стоял свой, бедный: бот, дисклеймер, политика и GeoNames — ни реквизитов,
   ни почты, ни оферты. Разбор SEO: именно на эти страницы приходит поиск, и
   именно на них Яндекс смотрит признаки настоящего сервиса. Значения ниже
   повторяют .colophon из вёрстки лендинга — подвал на всех страницах один. */
.colophon{
  position:relative; z-index:1;
  /* Мера в пикселях, а не в em: подвал набран машинописью 12 px, и 44 em дали бы
     линейку 528 px — единственную на странице, не совпадающую с остальными. */
  max-width:748px;
  border-top:1px solid var(--rule-dark); padding-top:32px; margin-top:64px;
  font-family:var(--font-mono); font-size:12px; line-height:1.7;
  letter-spacing:.02em; color:var(--muted);
}
.cols{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:40px 32px}
.cols .cols__cap{
  font-size:11px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink); font-weight:400; margin:0 0 8px;
}
.cols p{margin:0}
/* Ссылки в подвале отличаются от текста подчёркиванием, а не только наведением:
   раньше они были того же цвета и без линии, то есть на вид не ссылки вовсе.
   Среди них «Политика обработки» — страница, которую человек обязан найти.
   Поймано слепым просмотром 22.08.2026.
   🔴 Подчёркивание — text-decoration, а не border-bottom (правка 23.08.2026).
   Цель нажатия добиралась через padding-bottom, а линия рисовалась по низу
   коробки — и на телефоне уезжала от своего слова на 13 px, вставая ровно
   посередине между строками. Читалась разделителем, а не подчёркиванием. */
footer a{
  color:var(--muted); text-decoration:underline;
  text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:var(--rule-dark);
  min-height:24px; display:inline-flex; align-items:center;
}
footer a:hover{color:var(--ink); text-decoration-color:var(--ink)}
footer a:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
/* Цель нажатия: было 14 px на всех ширинах — а это оферта, правила возврата
   и политика, обязательные юридические ссылки. Порог 44 держим на всех
   сенсорных ширинах (планшет — тоже палец), на настольной — 24, нижняя
   граница нормы. Кегль не трогаем, растёт только коробка. */
@media (max-width:900px){
  .cols{grid-template-columns:1fr; gap:32px}
  footer a{min-height:44px}
}
.legal{margin:40px 0 0; padding-top:24px; border-top:1px solid var(--rule-dark)}
/* Линейка идёт во всю ширину подвала, а мера строки живёт на самом тексте:
   иначе в подвале оказались бы две линейки разной длины. */
.legal span{display:block; max-width:var(--col-wide)}
.legal span + span{margin-top:8px}

/* Геометрия колонки на узких экранах задана в tokens.css — она общая
   с лендингом. Здесь только то, что касается документа. */

/* ————— телефон ————— */
@media (max-width:640px){
  :root{--measure:100%}
  body{font-size:16px; line-height:1.6}
  .page{padding-top:24px; padding-bottom:20px}
  /* 🔴 Шапка остаётся В СТРОКУ. Было flex-direction:column — «Кабинет» падал
     под логотип и читался подписью к названию, а не отдельной ссылкой; высота
     нажатия выходила ~16 px при норме 44. Места хватает с запасом: логотип
     занимает 90 px из 295 доступных. Отрицательные поля возвращают строку
     на место — площадь нажатия растёт, вёрстка не двигается. */
  header{gap:16px; padding-bottom:14px}
  .mark{font-size:17px}
  .back{font-size:11px; padding-block:14px; margin-block:-14px}
  .crumbs{font-size:11px; margin-top:18px}
  .knot{width:11px; height:11px; left:calc(var(--thread-x) - var(--text-x) - 5px)}
  main{padding:28px 0 4px}
  h1{font-size:clamp(1.65rem,7.4vw,2.1rem); line-height:1.09; margin-bottom:16px}
  h2{font-size:1.22rem; padding-top:18px; margin-bottom:15px}
  h3{font-size:1.12em; margin:26px 0 10px}   /* та же ошибка единицы: 1rem = 16 px, ровно кегль прозы телефона */
  .lead{font-size:1.03em; margin-bottom:32px; max-width:none}   /* 16,5 px при прозе 16 — system.md §2; мера здесь 100 % */
  section{margin-bottom:36px}
  .note{padding:14px 16px}
  .cta{width:100%; justify-content:center; padding:15px 24px}

  /* таблица → карточки: заголовки колонок прячем, подписи берём из data-label */
  thead{display:none}
  table,tbody,tr,td{display:block; width:100%}
  tr{border-top:1px solid var(--hairline); padding:14px 0}
  tr:last-child{border-bottom:1px solid var(--hairline)}
  td{border:0; padding:0 0 8px}
  td:last-child{padding-bottom:0}
  td[data-label]::before{
    content:attr(data-label); display:block;
    font-family:var(--font-mono); font-size:10px; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); margin-bottom:3px;
  }

  footer{font-size:11px; line-height:1.6; padding-top:14px; flex-direction:column; gap:10px}
}

/* ————— печать —————
   Статьи справочника сохраняют в PDF так же, как политику. */
@media print{
  :root{--text-x:0; --pad-r:0; --measure:100%}
  body{background:#fff; font-size:11pt}
  body::after,.thread,.knot,.back,.cta,.next{display:none}
  .page{padding:0; max-width:none}
  a{color:var(--ink); text-decoration:none}
  h2{break-after:avoid}
}

/* уважение к системной настройке «меньше движения» */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important}
}

/* ── поля ввода: общий стиль на весь сайт ─────────────────────────────────────
   🔴 Заведён 22.08.2026. До него каждая форма красила поля у себя, и все четыре
   (расчёт, кабинет, вход, регистрация) делали это одинаково неудачно: заливка
   --paper-deep на бумаге даёт контраст 1,08 : 1 при пороге 3 : 1 для органов
   управления. Поля держались на одной волосяной линии снизу и визуально
   не существовали — слепой просмотр страницы асцендента дал три пятна:
   заголовок, кнопку и серую кашу вместо формы.

   Цвет рамки #96866A выбран не на глаз: ближайший тон семейства, который берёт
   порог (3,38 : 1 к заливке поля, 3,07 : 1 к бумаге). Более светлый #B9AB90 дал бы
   2,15 : 1 — такая рамка была бы не лучше её отсутствия. */
input[type=date], input[type=time], input[type=text],
input[type=email], input[type=tel], input[type=number], input[type=password],
select, textarea{
  background:#FBF9F5;
  border:1px solid #96866A;
  border-radius:2px;
}
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--ink); outline-offset:1px;
}

/* ── замок согласия на обработку данных ───────────────────────────────────────
   🔴 Решение владельца 22.08.2026: вход по почте и через Telegram работают
   только при отмеченном согласии. Раньше человек нажимал «войти», получал отказ
   от сервера и лишь тогда узнавал, что нужна галочка.

   Гасим, а не прячем: способ входа видно, видно и что он пока заперт. Виджет
   Telegram — чужой iframe, выключить его атрибутом нельзя, поэтому перекрываем
   нажатия. Само согласие уходит на сервер только отмеченным человеком: запись
   о нём — юридическое доказательство, подставлять её за него нельзя. */
[data-needs-consent][disabled],
[data-needs-consent].is-locked{opacity:.45; pointer-events:none}
.chk--gate{margin:0 0 20px; font-size:16px; color:var(--ink)}
.reg__gate{font-size:14px; color:var(--muted); margin:0 0 14px}
/* Выключенная главная кнопка — контуром, а не бледной заливкой (первый круг
   правок 11.09.2026). Было: та же кнопка на 45 % прозрачности — светлый текст
   на бледно-лососевом, 1,98 : 1, и сама заливка почти совпадала с кнопкой
   тарифа «Начало» (1,08 : 1 между ними): запертая кнопка входа читалась как
   тариф. Теперь пунктирный контур несущей линейкой и надпись вторым планом —
   5,64 : 1 к бумаге; пунктир говорит «пока нельзя», а не «другая кнопка».
   Контур нарисован outline внутрь, а не рамкой: размер кнопки не меняется
   и она не прыгает, когда включается. Касается всех выключенных главных
   кнопок: вход, блок входа под картой, оплата разборов. */
.cta:disabled, .cta[aria-disabled="true"]{
  background:transparent; color:var(--muted);
  outline:1px dashed var(--rule-dark); outline-offset:-1px;
  opacity:1; cursor:not-allowed; transform:none;
}

/* ── тема раздела ─────────────────────────────────────────────────────────────
   🔴 Решение владельца 22.08.2026. Слепой просмотр главной: «на контактном листе
   из шестнадцати экранов различимы ровно два». Девять экранов подряд одного
   приёма — заголовок, линейка, строки. Скопируй такой ритм на пять страниц,
   и сайт станет одним серым свитком.

   Отличать разделы решено темой и рисунком, а не новыми приёмами вёрстки.
   Первый тёмный раздел — «Книга перемен»: китайская книга, тёмный лист ей идёт
   по смыслу, а не ради разнообразия.

   Тема ставится классом на странице и переопределяет токены — вся вёрстка
   работает как есть, ни одного правила дублировать не нужно. Это НЕ реакция
   на системную настройку: сайт светлый по определению, белого в бренде нет,
   тёмная тема здесь — фирменный приём раздела. */
.theme-dark{
  --paper:var(--dark-paper);
  --paper-deep:var(--dark-paper-deep);
  --hairline:var(--dark-hairline);
  --rule-dark:var(--dark-rule);
  --ink:var(--dark-ink);
  --ink-mid:var(--dark-ink-mid);
  --ink-soft:var(--dark-ink-soft);
  --muted:var(--dark-muted);
  --thread:var(--dark-thread);
  --thread-hi:var(--dark-thread-hi);
  background:var(--paper); color:var(--ink);
}
/* Поля ввода в тёмной теме: рамка и заливка своими значениями — светлые
   #FBF9F5 и #96866A на тёмной бумаге дали бы белый прямоугольник. */
.theme-dark input[type=date], .theme-dark input[type=time],
.theme-dark input[type=text], .theme-dark input[type=email],
.theme-dark input[type=tel], .theme-dark input[type=number],
.theme-dark input[type=password],
.theme-dark select, .theme-dark textarea{
  background:#221D16; border-color:var(--dark-rule); color:var(--dark-ink);
}
.theme-dark input::placeholder, .theme-dark textarea::placeholder{color:#8A8073}
/* Насечки на нити рисуются жёстким цветом — в тёмной теме он тонет. */
.theme-dark .thread::after{
  background:repeating-linear-gradient(to bottom,
    rgba(217,96,63,.42) 0 1px, transparent 1px var(--day-step));
}
.theme-dark .thread{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='168' viewBox='0 0 40 168'><path d='M19 0 C 19 28 25 56 25 84 C 25 112 14 140 19 168' fill='none' stroke='%23D9603F' stroke-width='1.5' stroke-linecap='round'/></svg>");
}