/* ArtisDomus — файл токенов. Направление «Реестр». Собран 3 сентября 2026. Единственный источник значений для макета и для кода. У каждого решения ниже записано основание, как требует Приложение 1: «файл токенов, где у каждого решения записано основание». Правило, действующее на весь файл: пять несущих ролей цвета, и ничего больше; всё, чего нет в списке, — ошибка. Ни одного font-size вне шкалы. Ни одного отступа вне ступеней. Ни одной кривой и длительности вне двух объявленных. */ /* ───────────────────────────────────────────────────────────── ГАРНИТУРЫ Одна семья на весь сайт: PP Neue Montreal. Заголовки набираются Medium, текст — оптическим вариантом Text, аппарат — моноширинным начертанием. Почему одна семья. «Реестр» строится не на контрасте гарнитур, а на строгости: различение несут вес, линейка и подчёркивание, а не смена рисунка. Швейцарский неогротеск нейтрален до безличности, и здесь это достоинство: страница читается как аналитическая записка, а не как реклама. Чего здесь нет и почему. Первой пробой стояла старостильная антиква, и это была ошибка: такой рисунок — язык аукционного дома и старых мастеров, а практика работает с современными художниками и от классического искусства открещивается прямо. Второй пробой была PP Acma, гротеск с антиквенным распределением веса. Отбор шёл по тринадцати кандидатам из библиотеки Заказчика, набранным одной фразой и одним рядом имён художников; сравнение сохранено в type-candidates.html. Лицензионное следствие, и оно денежное: все пять начертаний принадлежат одной семье. Тариф Pangram Pangram считается по начертаниям, и одна семья вместо двух упрощает и покупку, и продление. Системный довод той же силы: в библиотеке есть PP Neue Montreal Arabic. Арабская версия сайта — отдельный этап по Приложению 1, и при её запуске типографику переверстывать не придётся. ЛИЦЕНЗИЯ. Файлы взяты из набора Pangram Pangram на машине Исполнителя. Веб-лицензия покупается отдельно, привязана к домену, к числу просмотров страниц в месяц и к конкретным начертаниям, для компаний действует год. По п. 17.5 Договора она оформляется напрямую на ArtisDomus. До этого в системе держится запасная пара со свободной лицензией: переход — правка значений --font-display и --font-text, а не переверстка. ───────────────────────────────────────────────────────────── */ /* Гарнитуры подключаются подмножествами, а не полными файлами: пять полных woff2 весят 391 КБ, подмножества — 88, и это 77 % от того, что читатель ждёт до первой строки текста. Подмножество строится не по символам сегодняшней страницы, а по объявленному диапазону: 469 кодовых позиций, объявление лежит в `05-сборщики/.glyphrange.json` в одном экземпляре, и его же читает проверка покрытия. Пересобрать — `python3 .subset.py`. Полные файлы остаются в `fonts/`; чтобы вернуться к ним, достаточно убрать `subset/` из пяти строк ниже. */ @font-face { font-family: "PP Neue Montreal"; src: url("fonts/subset/PPNeueMontreal-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal Text"; src: url("fonts/subset/PPNeueMontrealText-Light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal Text"; src: url("fonts/subset/PPNeueMontrealText-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "PP Neue Montreal Text"; src: url("fonts/subset/PPNeueMontrealText-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* Курсив подключён 15.09.2026, после письменного подтверждения лицензии. До него в разметке стояло 295 узлов `` и `` — названия работ, — а курсивного начертания в системе не было: браузер наклонял прямое. Наклон браузера отличается от курсива не только углом: у настоящего курсива другой рисунок строчных, и на дисплейном кегле подмена видна. Подмножество собирает `05-сборщики/.subset.py` из тех знаков, которые в корпусе действительно набраны курсивом: 88 знаков, 7 КБ против 81. Набор берётся из самого корпуса, поэтому новая буква в новой статье попадёт в подмножество при следующей сборке, а не останется квадратом. */ @font-face { font-family: "PP Neue Montreal Text"; src: url("fonts/subset/PPNeueMontrealText-BookItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "PP Neue Montreal Mono"; src: url("fonts/subset/PPNeueMontrealMono-Book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } /* Моноширинный курсив. У семьи нет начертания Book Italic, поэтому взят курсив ближайшего прямого соседа — Regular. Пара названа здесь, чтобы её не приняли за недосмотр: 182 узла аппарата набраны курсивом, и все они названия работ внутри графы источника. */ @font-face { font-family: "PP Neue Montreal Mono"; src: url("fonts/subset/PPNeueMontrealMono-RegularItalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } /* Гарнитура одного слова: знак практики. Подрезана до девяти букв — A R T I S D O M U, — и весит 1764 байта. Заказчица прислала логотип нарисованным: знак плюс ARTISDOMUS высокой антиквой вразрядку. Сайт до 15.09.2026 ставил вместо него квадратик и то же слово гротеском — то есть не показывал её марку вовсе. Знак взят вектором из её же PDF, слово набирается живым текстом, а не картинкой: сайт построен на том, чтобы его цитировала машина, и имя практики в шапке обязано остаться текстом. Начертание подобрано сличением: из пятнадцати резов PP Right Didone её рисунку ближе всего Spatial Fine — тот же контраст штриха и та же ширина. Это шестая позиция в веб-лицензии по п. 17.5, и её надо назвать в счёте отдельно. */ @font-face { font-family: "PP Right Didone"; src: url("fonts/subset/PPRightDidone-SpatialFine.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } :root { /* ─── ЦВЕТ. Девять токенов, пять из них несущие роли ─── Пять ролей: paper, ink, muted, rule, accent. Четыре служебных: rule-strong, wash, paper-raised, focus. Костяная бумага и сине-чёрные чернила. Уклон чернил в синеву намеренный: чистый чёрный на костяном фоне выглядит грязным, а холодный оттенок держит регистр отчёта. Приглушённая роль затемнена против объявленного LEAD на четырнадцать сотых к чернилам. Причина повторилась дважды за проект: на самом глубоком грунте объявленный LEAD давал 4,89 номинально, то есть около 4,31 на отрисованных пикселях, и порог 4,5 не брал. После правки и разбавления бумаги роль даёт 7,39 на бумаге. Палитра практики, объявленная Заказчицей поимённо: PORTLAND STONE, PUMICE, LEAD, BRUNSWICK GREEN, ROYAL NAVY, BROWN MADDER. До 14.09.2026 сайт шёл на подобранной паре, и фирменного цвета на нём не было вовсе. Прежние значения здесь не выписаны намеренно: мёртвый цвет в комментарии неотличим от живого, и ровно так в этом файле пережило миграцию обоснование линеек — см. гейт `.palette.mjs`. Роли переложены, а не взяты буквально, и на то есть замер. Её собственное назначение отдавало основной текст цвету LEAD, и это роняло контраст с 11,76 до 7,39 — в полтора раза. Порог 4,5 при этом берётся, но запас съедается почти весь. Поэтому чернила — ROYAL NAVY, LEAD получает роль приглушённого, и оба её цвета остаются в деле. Пять красок из шести заняты: камень — бумага, ROYAL NAVY — чернила, LEAD — приглушённая роль светлой темы, PUMICE — тёмной, BROWN MADDER — акцент. BRUNSWICK GREEN не занят, и работу ему выдумывать не надо. Второй акцент означал бы второй смысл, а смысл у акцента на этом сайте один: он метит аппарат и переход. Цвет, заведённый без работы, через месяц получает её случайно — и правило «акцент всегда что-то отмечает» держится ровно до этого дня. Зелёный ждёт своего повода в её палитре, а не в этом файле. Разрешённые пары посчитаны по формуле WCAG 2.2: ink #17304A на paper #F2EFEB 11,76 : 1 (тёмная 14,12) muted #514C49 на paper 7,39 : 1 (тёмная 9,48) paper на ink 11,76 : 1 Порог для основного текста 4,5 : 1, для крупного и элементов 3 : 1. PUMICE #C6B29F в роли плашки под мелкий набор не годится, и причина названа числом: приглушённая роль даёт на нём 4,14, акцент 3,82 — оба ниже 4,5. Основной текст держит на нём 6,59 и порог берёт, но только в светлой теме: в тёмной чернила светлые, и та же плашка даёт 1,49. Плашка, читаемая в одной теме и слепая в другой, плашкой не является. На бумаге пемза даёт 1,78 и как граница невидима. Она работает грунтом и заливкой, но не подложкой под набор. */ /* Бумага — PORTLAND STONE, разбавленный белым на 55 %. Камень в полную силу стоял грунтом один день, и владелец снял его с одной фразы: «контрастность упала, читать сложнее». Замер подтвердил и назвал причину. Она не в акцентах и не в шрифте, а в самой паре: прежняя бумага имела светлоту 0,878, PORTLAND STONE — 0,715; прежние чернила 0,0072, ROYAL NAVY — 0,0279. Основной текст упал с 16,58 до 9,82, то есть в 1,69 раза, и это видно глазом любому, кто читал страницу до перехода. Разбавление выбрано из трёх посчитанных ступеней: 40 % давало 11,17, 55 % даёт 11,76, 70 % — 12,28 и почти стирало камень. Владелец выбрал середину. Седьмой краски при этом не заведено: это производная от объявленного цвета, того же класса, что и `--paper-raised` рядом и что ступени линеек, выведенные долей чернил. Чтобы вернуть камень в полную силу, довольно поменять здесь одно значение — и тогда придётся вернуть вместе с ним все числа выше, за чем следит `.palette.mjs`. */ --paper: #F2EFEB; --ink: #17304A; /* Приглушённая роль назначается по замеру на пикселях, а не по расчёту на токенах, и это стоило двух заходов. Сглаживание на кегле 12–13 px моноширинного набора не доводит штрих до полного тона и съедает около 0,58 контраста: пара, посчитанная на 4,69, отрисовывалась в 4,26 и порог 4,5 не брала. Отсюда правило файла — приглушённой роли мало взять 4,5 по расчёту, ей нужно 5,0. Нынешнее значение даёт 7,39 на бумаге, оставаясь на 1,74 от чернил, то есть читаясь приглушённым, а не вторым тоном текста. */ --muted: #514C49; /* Сильный цвет текста той комнаты, в которой текст стоит. В обычной комнате это чернила, на выворотной полосе — бумага. Роль заведена после того, как «Pl. 02» на чернильной полосе оказался набран чернилами по чернилам: подпись была на месте, занимала место, читалась машиной и не была видна. Правила, которые могут оказаться внутри полосы, берут --fg; те, что попасть внутрь не могут — шапка, кнопка темы, — остаются на --ink намеренно. Тёмная тема ничего не переопределяет: --fg выводится из --ink и следует за ним сам. */ --fg: var(--ink); /* Акцент — единственный цвет системы помимо бумаги и чернил, и он стоит только на аппарате: квадрат у знака, у сноски, у кнопки и у вкладки меню, да левая линейка цитаты. Больше нигде. Он был сведён к чернилам, то есть акцента не было вовсе, и сайт остался при двух цветах. Это читалось как «очень аккуратный современный редакционный сайт» и ничем не отличалось от соседних: антиква с гротеском, воздух, волосяные линии — язык распространённый. Один редкий цвет на атоме системы даёт то, чего типографика дать не может: память о марке. Цвет сургуча и каталожной пометки, а не золото. Он взят из утверждённого направления, а не подобран заново. Пары посчитаны, а не на глаз: BROWN MADDER #7B4330 на бумаге #F2EFEB — 6,82 на тёмной бумаге #070E16 акцент светлее, #9F7869 — 4,95 Обратная пара — чернила ROYAL NAVY на акценте — даёт 1,73 и в палитру не входит. На чернильном грунте акцент свой, ещё светлее: #B49789 даёт 4,96, тогда как ступень на десятую светлее давала 4,13 и порог не брала. Собрать недоступное сочетание нельзя даже по ошибке. */ --accent: #7B4330; --accent-on-ink: #B49789; /* Линейки. Пять ступеней прозрачности чернил разведены по назначению, и это то место, где такие сайты проваливают приёмку по доступности. 8, 16, 28 % — декоративные волосяные линии, информации не несут 55 % — 3,24 : 1 в светлой теме: ЕДИНСТВЕННАЯ ступень для границ полей формы и элементов интерфейса 40 % — 3,08 : 1 в тёмной: та же роль, посчитанная на своём грунте 72 % — сильные разделения и подложки Каждая ступень стоит на одной строке со своим числом нарочно: правило пересчёта в `.palette.mjs` читает пару «доля — контраст» в пределах строки, и запись, растянутая на три, этим правилом не проверялась бы. Тонкая рамка формы на 16 % дала бы 1,35 : 1 в светлой теме и 1,43 : 1 в тёмной, и приёмку провалила бы. Несущая ступень стоит на 3,24 в светлой теме и 3,08 в тёмной, то есть запаса над порогом почти нет, и предлагалось поднять её на том основании, что волосяная линия теряет на сглаживании столько же, сколько теряет моноширинный текст. Замерено 14.09.2026, и это неверно. Линия в 1 px, выровненная по оси, доходит до пикселя ровно со своим номиналом: снимок при плотности 1 и 2 даёт rgb(115 125 136) и контраст 3,05 в обоих случаях. Потеря 0,58 у моноширинного берётся из того, что штрих буквы тоньше пикселя и покрывает его частично; у горизонтальной границы покрытие полное. Ступень остаётся на 55 и 40 процентах, и поднимать её ради запаса, которого не теряется, незачем. */ --wash: rgb(23 48 74 / 0.08); --rule: rgb(23 48 74 / 0.16); --rule-mid: rgb(23 48 74 / 0.28); --rule-strong: rgb(23 48 74 / 0.55); --rule-heavy: rgb(23 48 74 / 0.72); /* Завеса лайтбокса — роль, а не шестая ступень прозрачности. Пять ступеней Приложения описывают линейки и графику: то, что лежит НА грунте. Завеса грунт заменяет, и её задача обратная — не проступить, а закрыть. Стояла числом 94 % прямо в правиле, то есть заводила шестую ступень молча. Названа отдельно: другое назначение и другая причина меняться. */ --scrim: color-mix(in srgb, var(--ink) 94%, transparent); /* Цвет, который не следует за темой, и это не оплошность. Он выбран не против грунта комнаты, а против фотографии: снимки корпуса — виды залов, светлые в любой теме, потому что тема меняет страницу, а не стену на снимке. Единственная роль, которой запрещено переключаться вместе с остальными, и потому названная отдельно. */ --ink-on-art: #17304A; /* Светлая пара к предыдущей и по тому же доводу: она стоит не на грунте комнаты, а на фотографии, и потому с темой не переключается. Нужна полю засечки указателя над работой: сама засечка там берёт чернила по снимку, а поле — бумагу по снимку. Без пары поле брало бы бумагу темы, и в тёмной теме тёмное кольцо вокруг светлого квадрата на светлой стене снимка читалось рамкой, а не отметкой. */ --paper-on-art: #E2DBD2; --paper-raised: #E7E4E1; --focus: var(--ink); /* Выделение — такая же пара ролей, как кольцо фокуса, и переопределяется так же: на чернильном грунте оба выводились из чернил и совпадали с фоном. Значения живут здесь, а не правилом в page.css, иначе ::selection оказался бы объявлен в двух файлах двумя парами. */ --select-bg: var(--ink); --select-fg: var(--paper); /* ─── ТРИ ОПОРНЫЕ ТОЧКИ ГРАДИЕНТА, ОНИ ЖЕ ГРУНТЫ КОМНАТ ─── Это не новые цвета. Приложение 1 заводит «пять ступеней прозрачности чернил и три опорные точки градиента» ровно затем, «чтобы добавлять графику, не заводя второй бренд-цвет», и приёмка разрешает их «в градиентах и как подложку под них». Точек ровно три; крайние значения анфилады — это сами роли, бумага и чернила, а не четвёртая и пятая точка. Счёт цветовых токенов не меняется: девять, пять из них несущие. Фон менялся вниз по странице: анфилада, где стена каждого зала своего тона, и переход из зала в зал ощущается порогом. Ступени сняты владельцем на показе, дважды, и вместе с ними сняты токены --mix-1/2/3 и --stop-1/2/3, которые их задавали. Разбор отказа — в page.css, у правила `.r0, .r1, .r2, .r3`: перепад в три-восемь процентов подмеса читался полосой поперёк экрана, то есть дефектом отрисовки, а не решением. Единственная оставшаяся смена грунта — `.rk`, полная инверсия: её не спутать с дефектом. Токены убраны, а не оставлены «на потом», и причина не в чистоте. Пока они стояли, страница-образец показывала три образца грунта и публиковала строку таблицы «muted on stop 3 — 5,04» про комнату, которой на сайте нет. Мёртвый токен, выставленный витриной, — это документация несуществующей системы, и читатель верит ей первой. Потолок шкалы был посчитан, и расчёт стоит сохранить: если ступени когда-нибудь вернутся, он говорит, где они обязаны остановиться. Приглушённая роль набрана на каждом разделе — это колонка аппарата с источником и датой, — и именно она упирается в порог первой. При нынешней палитре на подмесе чернил к бумаге она даёт 7,39 на чистой бумаге и уходит под расчётные 5,0 между двенадцатью и восемнадцатью процентами. Расчётные 5,0, а не 4,5: сглаживание на моноширинном в 12–13 px стоит около 0,58, и пара, посчитанная на 4,65, отрисовывается в 4,07. Решение принимается по пикселям, а не по арифметике. Числа в этой таблице считаются `05-сборщики/.pairs.py` из самих токенов и сверяются с тем, что напечатано на странице-образце. До этой проверки колонка `muted` была посчитана для прежнего значения роли и разошлась с палитрой на четыре сотых — молча, потому что таблица выглядела правильной. Тёмная тема держит порог глубже: на своих 11 % приглушённая роль даёт 7,56. Но ритм комнат одинаковый в обеих — разной глубины анфилада в двух темах читалась бы как разный сайт. */ /* Проценты вынесены отдельно, потому что у тёмной темы они свои. Ритм анфилады одинаков в обеих — тот же раздел, та же комната, — но у чёрного края глаз различает хуже, и на 3/5/8 % тёмные комнаты расходились всего на два уровня яркости против семи в светлой. На 4/7/11 % шаги выравниваются (9, 6, 8 против 7, 4, 7), а нижняя граница контраста приглушённой роли у обеих тем становится 5,0. */ /* Потолок светлой шкалы. Он же предел, до которого доходит текущий грунт страницы: перетекание считается по доле чернил и ограничено этим числом, поэтому текст всегда стоит на грунте из уже проверенного диапазона, как бы близко ни была чернильная полоса. Число то же, что в таблице выше, и меняется вместе с ней. */ /* ─── ЗЕРНО ─── Бумага не плоская. Ровная заливка даёт σ = 0,00 по яркости и читается как интерфейс; зерно частотой 0,82 при 3,2 % даёт σ = 0,51 и читается как материал. Крупное зерно (частота 0,42) при той же непрозрачности уже видно как шум и на кегле текста мешает — поэтому частота высокая, а непрозрачность низкая, а не наоборот. Изображение одно на обе темы, различается только непрозрачность слоя: на чернилах серый шум читается слабее, чем на бумаге, и требует больше. На контраст зерно не влияет: в самой тёмной точке бумага темнеет на 4 из 255, и пара ink на бумаге держит 11,34 вместо 11,76. */ --grain: 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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); --grain-size: 180px; --grain-opacity: 0.032; /* ─── ТИПОГРАФИКА ─── Три ступени по ширине, как требует Приложение 1: смена на контрольных точках, а не плавным пересчётом. Плавная шкала даёт непредсказуемый результат на промежуточных ширинах и здесь не применяется. Кегли заданы в rem, а не в пикселях: иначе страница игнорирует пользовательскую настройку базового размера шрифта в браузере. Названные Приложением 1 величины сохранены один в один при базе 16 px: 5rem = 80 px, 3.5rem = 56 px, 3rem = 48 px. Значения ниже — узкая ступень, ниже 810 px. */ /* ─── ЗАПАСНАЯ ПАРА СО СВОБОДНОЙ ЛИЦЕНЗИЕЙ ─── П. 17.6 требует, чтобы в систему тем же токеном была заложена пара со свободной лицензией и переход между парами был правкой значения, а не переверсткой. Системные Helvetica и Arial в стеке ниже — не она: они не свободные, а просто присутствующие на машине читателя. Названная пара, если веб-лицензия Pangram Pangram не покупается: дисплейная и текстовая Inter, лицензия SIL OFL 1.1 моноширинная IBM Plex Mono, лицензия SIL OFL 1.1 Inter выбран не по сходству рисунка, а по метрике: у него та же высота строчных к кеглю и близкая ширина знака, поэтому мера строки в 34em и три ступени шкалы остаются верными, и переверстывать ничего не приходится. Проверено: со снятыми гарнитурами страница не рассыпается, заголовок остаётся в две строки, содержание помещается на первый экран. Переход — правка трёх строк ниже и ничего больше. */ --font-display: "PP Neue Montreal", "Helvetica Neue", Arial, sans-serif; --font-text: "PP Neue Montreal Text", "Helvetica Neue", Arial, sans-serif; /* Только для знака практики. Нигде больше не применяется. */ --font-mark: "PP Right Didone", "Didot", "Bodoni 72", Georgia, serif; /* Знак практики контуром. Разобран покомандно из её `sign.pdf`, а не обведён по растру: путь в файле — одна заливка с тремя вырезами. */ --mark-sign: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 597.56 532.08' fill='%23000' fill-rule='evenodd' aria-hidden='true'%3E%3Cpath d='M 597.56 0.00 L 421.08 76.90 L 421.08 55.50 L 0.00 55.50 L 0.00 476.57 L 421.08 476.57 L 421.08 457.20 L 597.56 532.08 L 597.56 502.52 L 426.40 429.52 L 426.40 104.23 L 597.56 29.97 Z M 12.79 68.29 L 408.29 68.29 L 408.29 82.47 L 12.79 254.79 Z M 46.72 268.95 L 400.43 115.25 L 400.43 418.71 Z M 12.79 283.97 L 408.29 451.77 L 408.29 463.79 L 12.79 463.79 Z'/%3E%3C/svg%3E"); --font-mono: "PP Neue Montreal Mono", ui-monospace, "SF Mono", Menlo, monospace; --size-display: 3rem; /* h1: 48 → 56 → 80, прямо задано Приложением 1 */ --size-h2: 1.875rem; /* Третий заголовок был мельче лида на всех трёх ступенях шкалы: 20 против 21, 21 против 22, 22 против 24. Заголовок мельче абзаца, который под ним, — не ступень шкалы, а её отсутствие: читатель не видит уровня, а машина, разбирающая структуру, видит его только по тегу. Третий поднят над лидом, а освободившиеся значения стали четвёртым уровнем — он понадобится корпусу: у опорной статьи будут подразделы внутри разделов. */ --size-h3: 1.5rem; --size-h4: 1.25rem; --size-lead: 1.3125rem; --size-body: 1.125rem; --size-small: 0.875rem; --size-apparatus: 0.75rem; --size-label: 0.6875rem; /* У знака свой кегль. Он брал `--size-h3`, то есть двигался всякий раз, когда настраивали третий заголовок, — а знак к шкале заголовков отношения не имеет: он подпись издания, а не уровень структуры. */ /* На узкой полосе кегль на ступень меньше, и это не вкус, а арифметика шапки. Первая колонка шапки — `max-content`: знак в ней сжиматься не умеет и не должен, иначе рвётся блокировка. При 1,25 rem лозунг занимает 240 px, а на окне 320 под него остаётся 288 − 16 (зазор) − 50 (меню) = 222. Страница ехала вбок на три пикселя, и печатал это отчёт `.verify.mjs` на всех восьмидесяти восьми страницах сразу. Ступень вниз даёт 216 px и запас. Фигура при этом 19,8 px — выше минимума в 16, который требует Приложение 1. */ --size-mark: 1.125rem; /* Кегль знака, уменьшенный до ширины окна, если иначе слово не влезает. «ARTISDOMUS» — одно слово, перенести его некуда. При увеличении только текста до 200 % на узкой полосе оно становится шире окна: замер 16.09.2026 дал 491 px при окне 320, и достать уехавшее нечем — прокрутки вбок нет по замыслу. Предел в шесть сотых ширины окна срабатывает только там, где слово иначе не поместилось бы: на 1440 и на 768 при обычном корне он не вступает в силу вовсе, и кегль остаётся прежний. Проверено сравнением высоты шапки и положения знака — ни пикселя разницы. */ --size-mark-fit: min(var(--size-mark), 6vw); /* Потолок кегля заголовка по ширине его собственной графы. Шкала выше задана в `rem`, то есть идёт за настройкой браузера; ширина графы — нет. У читателя с базовым кеглем 24 px заголовок вырастал до 60 px в графе 386 px, и слово в неё не входило: замер нашёл двести четырнадцать таких мест. Двенадцать сотых ширины графы — та доля, при которой самое длинное слово корпуса помещается на всех ширинах от 320 px и при обоих базовых кеглях: при четырнадцати сотых корпус даёт одну поломку, при тринадцати — ни одной, и на телефоне заголовок первого экрана при них держит свои 46 px против 43 у двенадцати. На полосе 1440 px графа держит 816 px, потолок даёт 98 px, и заголовок остаётся своими 80 px по Приложению 1. */ --head-cap: 13cqi; /* Пол кегля первого уровня. Приложение 1: 48 px ниже 810. Потолок 13cqi опускал его до 43–46 на телефонах 360–400 (аудит 25.09). 15.5cqi держит самое длинное слово корпуса в колонке на 320–340 (305 px при 48 в колонке 288), поэтому полные 48 — от окна 344 px; ниже пол уступает, и это названо владельцу как остаток расхождения. px, а не rem: при увеличении текста работает потолок. */ --head-floor-display: min(48px, 15.5cqi); /* Раскрытие указателя разделов. Двенадцать засечек выходят из одной точки у края и разворачиваются по ходу чтения; шаг между ними — задержка соседней. Одиннадцать шагов по 16 мс плюс 260 мс на саму засечку дают 436 мс от первого движения до последнего: столько лист и разворачивается. Каждая отдельная длительность остаётся ниже потолка Приложения 1 — считается она по одному предмету, а не по очереди из двенадцати. */ --dur-rail: 260ms; --stagger-rail: 16ms; /* Ширина графы работы в записи архива. Доля от графы, потому что сама графа держит около пятидесяти одного рема на любом широком экране: полоса набора ограничена восемьюдесятью ремами, и шире архив не станет. Сорок процентов оставляют записи её шестьдесят — этого хватает имени и строке аппарата рядом с работой. */ --plate-col: minmax(18rem, 40%); --leading-display: 1.04; --leading-h2: 1.14; --leading-body: 1.6; /* верхняя граница диапазона 1,5–1,6. Стояла нижняя, из соображения «направление плотное»; на длинных страницах это и дало ту самую сплошную массу, в которой глазу не за что зацепиться. Запас на пользовательское переопределение интервала диапазон держит на обоих концах. */ --leading-tight: 1.32; --leading-lead: 1.45; /* лид: между текстом и заголовком */ --tracking-display: -0.025em; /* неогротеск в крупном кегле требует более тесного трекинга, чем антиква */ --tracking-label: 0.08em; /* Название работы в моноширинной подписи: курсива нет, выделение цветом и разрядкой. И та же роль в гарнитуре текста (перечень выставок). */ --tracking-title-mono: 0.04em; --tracking-title-text: 0.02em; /* Ширина строки. Измерена, а не угадана. Средняя ширина знака PP Neue Montreal Text Book на английском образце в 277 знаков равна 0,4537 em. Отсюда: 70 знаков = 31,8 em 75 знаков = 34,0 em 80 знаков = 36,3 em Требование Приложения 1 — 70–80 реальных знаков. Взято 34 em, то есть 75 знаков. Единица ch здесь не используется: она равна ширине нуля, а нуль шире средней буквы, и расхождение составило бы десятки знаков. */ /* Запас титульного блока: сколько он занимает от нижней кромки шапки до нижнего края действия, когда воздуха над ним нет вовсе. Замерено на 1440 px: 693 px, округлено вверх до ступени в 44rem. Из этой величины считается потолок воздуха над титулом — воздух не может съесть больше, чем осталось до кнопки, и поэтому действие остаётся в первом экране на любой высоте окна. На узком экране запас больше: заголовок там встаёт в четыре строки вместо двух, и блок выше. Величина не подогнана на глаз — 390×844 без поправки выносило действие за сгиб ровно на 53 px. */ --title-reserve: 50rem; --measure: 34em; --measure-narrow: 28em; /* ─── ОТСТУПЫ. Шаг 4 px, семь ступеней ─── Семь ступеней покрывают и внутренние интервалы, и секционные, поэтому шкала геометрическая, а не линейная. Произвольные значения запрещены. */ --s1: 4px; --s2: 8px; --s3: 16px; --s4: 32px; --s5: 64px; --s6: 96px; --s7: 160px; /* Цель нажатия: не меньше 24 px (СК 2.5.8 WCAG 2.2). Сумма двух ступеней. */ --target: calc(var(--s3) + var(--s2)); /* ─── СЕТКА ─── */ --register: 0px; /* колонка аппарата, на узкой ширине схлопнута */ --gutter: var(--s4); /* Ширина полосы объявлена в rem, а не в пикселях, и это не косметика. Колонки внутри полосы заданы шрифтовыми единицами: графа аппарата 13rem, мера строки 34em, графа кадра в архиве 22em — так и должно быть, набор обязан расти вместе с кеглем. А полоса стояла жёсткой: 1280 px при любом кегле. У читателя с базовым кеглем 24 px — а это обычная настройка Chrome, не экзотика — графа аппарата становится 312 px, графа кадра 648, и вместе с зазорами они забирают ровно всю полосу: ведомости достаётся НОЛЬ, имена рассыпаются по одной букве в строку. Именно это владелец и видел, пока все мои замеры на 16 px показывали исправную вёрстку. 80rem — те же 1280 px при кегле 16 и пропорционально шире при большем. Полоса и её колонки теперь меряются одним. */ --page-max: 80rem; /* Поля страницы на самой узкой ступени намеренно малы. Кегль заголовка ниже 810 px зафиксирован Приложением 1 на 48 px и уменьшению не подлежит, поэтому единственный способ добавить знаков в строку — отдать место полям. */ --page-pad: var(--s3); /* ─── ДВИЖЕНИЕ. Две кривые, две длительности, компонент их не выбирает ─── Потолок 300 мс. Анимируются только opacity и transform. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-pair: cubic-bezier(0.77, 0, 0.175, 1); --dur-fast: 140ms; /* ── Слой движения ────────────────────────────────────────────── Переехало из motion.css, где стоял второй блок `:root`. Значения и их обоснования перенесены дословно; ниже — те же комментарии. Четыре из этих длительностей выше подписанного потолка в 300 мс, и это расхождение вынесено решением Заказчику: identity.md §8. */ /* Кривая появления отдельная, и это главное число во всём слое. Прежняя `--ease-out` (0.23, 1, 0.32, 1) стартует со скоростью 4,35× и проходит 97 % пути за первую половину времени. Это не движение, а скачок с доводкой: глаз видит рывок и потом ничего. Отсюда и ощущение «быстро, но не гладко» — оно верное, и оно меряется, а не обсуждается. Новая проходит 28 % за первые 15 % времени, 77 % к середине и 97 % к 85 %. Старт 1,84×. Длинный ровный хвост — это и есть то, что читается как дорогое: объект не прыгает, а доезжает. Прежняя кривая остаётся отклику на курсор. Там нужна ровно обратная вещь — мгновенный старт, иначе наведение ощущается задержкой. Смешивать эти два назначения нельзя. */ --ease-glide: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Длительности. Прежние 300 мс на появление были подобраны под скачок: с ровной кривой на таком времени объект не успевает прочитаться как движущийся. Дорогое движение длиннее — но не медленнее по ощущению, потому что оно занято делом всё время, а не стоит после рывка. */ --dur-reveal: 640ms; /* появление блока: путь и прозрачность */ --dur-fade: 420ms; /* прозрачность внутри него — короче пути */ --dur-plate: 900ms; /* вытирание кадра плиты */ /* У заголовка своя длительность, и это не мелочь: он делил её с плитой, а заголовок не плита. Плиту снимают как ткань с работы — там 900 мс к месту. Строка набора должна встать быстрее. Считать надо итог, а не одну составляющую: полное время заголовка равно шагу × (строк − 1) + длительность. Сокращали дважды, и оба раза обе составляющие сразу — иначе на длинном заголовке выигрыш меньше, чем на коротком, и правка «на десять процентов» оказывается правкой на семь. Путь: 900/90 → 820/80 → 700/65. Итог на двух строках 990 → 765 мс, на трёх 1080 → 830, на четырёх 1170 → 895. Каждый раз одинаково при любом числе строк. Кривая при этом не трогалась ни разу. Ускорять надо длительностью, а не кривой: стоит вернуть резкий старт — и вернётся то самое «быстро, но не гладко», от которого уходили. */ --dur-head: 700ms; --dur-veil: 420ms; /* открытие и закрытие лайтбокса */ --stagger: 65ms; /* шаг между строками заголовка */ --rise: 18px; /* путь блока. Короткий путь читается щелчком */ /* Выворотка плиты идёт своей длительностью, и это не прихоть компонента, а поправка к правилу «две кривые, две длительности». Полоска ряда в один пиксель и сплошное поле в 263 пикселя — разные события: то, что для полоски отклик, для поля вспышка. Владелец так это и увидел: «черный оч быстро появляется». Приложение 1 ставит потолок 300 мс, вход взят 280, выход короче — уход должен опережать желание уйти. */ --dur-invert: 280ms; --dur-invert-out: 200ms; --sched: 1; --dur: 240ms; /* ─── РАДИУС ─── Реестр не скругляется. Две ступени, обе малые; крупные радиусы и кнопки-пилюли из внешних дизайн-скиллов не применяются. */ --radius-0: 0px; --radius-1: 2px; /* ─── СЛОИ ─── */ /* Шкала слоёв. Была объявлена наполовину — `--z-base` и `--z-sticky` стояли в файле и не использовались ни разу, а сырые числа лежали в пяти местах двух файлов: −1, 0, 1, 40, 45, 60. Пока предметов шесть, это читается; при двухстах страницах и новых компонентах два числа рано или поздно совпадут, и разбираться придётся по симптому. Ступеней ровно столько, сколько слоёв на сайте есть. `ground` — грунт и зерно комнаты, всегда под содержанием. `base` — содержание, оно же значение по умолчанию. `raised` — комната, поднятая над соседями целиком: чернильная полоса кроет грунты соседей с обеих сторон, а при равном уровне побеждал бы тот, кто ниже по разметке. `veil` — завеса лайтбокса, `stage` — кадр в ней, `close` — кнопка. `overlay` — ссылка перехода к содержанию: она обязана быть выше всего, иначе первое нажатие клавиши уходит под завесу. */ --z-ground: -1; --z-base: 0; --z-raised: 1; --z-veil: 40; --z-stage: 45; --z-close: 60; /* Ссылка перехода к содержанию обязана быть выше всего, включая завесу: стояла 20 при завесе 40 и кнопке 60, то есть при открытом лайтбоксе уезжала под него. Клавиатурный читатель фокусировал бы ссылку, которой не видно. */ --z-overlay: 80; /* Ступень ссылки обхода — своя, и она выше всех остальных. Пока ссылка стояла на `--z-overlay`, на той же ступени стояли шапка и лист указателя, а шапка идёт позже по документу и красит полосу во всю ширину псевдоэлементом. При равной ступени побеждает то, что позже, — и ссылка обхода при фокусе не давала на экране НИ ОДНОГО пикселя. Замер 16.09.2026: тридцать снимков области с фокусом и без, обе темы, три ширины — побайтное совпадение во всех тридцати. Даже пурпурная заливка с `!important` не проявлялась; проявилась сразу, как только из документа убрали обёртку страницы. Это первое, что встречает читатель с клавиатуры, и Приложение 1 требует её видимой. Держит гейт `.обход.mjs`: он меряет пиксели, а не объявления, потому что объявления здесь и были верны. */ --z-skip: 90; /* Схема объявляется трижды, и это не избыточность. Одно безусловное `light dark` говорит браузеру следовать системной настройке. Явный выбор читателя оно не слышит — и тогда браузер красит своё: полосу прокрутки, поля ввода, выделение, автозаполнение. Замер 16.09.2026: при системе светлой и выборе тёмного поле ввода выходило белым на тёмной бумаге, при обратном сочетании — тёмно-серым на светлой. Страница слушалась читателя, а браузер — системы. Точные значения обеих пар записаны в шапке гейта `.схема.mjs`: здесь их нет намеренно, потому что это краски браузера, а не палитры, и правило про обоснование от прежней палитры справедливо приняло бы их за свои. Поэтому схема называется по атрибуту темы там, где атрибут стоит, и остаётся системной только когда читатель не выбирал. Держит гейт `.схема.mjs`. */ color-scheme: light dark; } :root[data-theme="light"], .theme-light { color-scheme: light; } :root[data-theme="dark"], .theme-dark { color-scheme: dark; } /* ─── КОНТРОЛЬНЫЕ ТОЧКИ ─── Объявлены все пять и строго по возрастанию: 640, 810, 1200, 1280, 1536. Основание записано, потому что решение несущее, а ошибка тихая. Фреймворк выдаёт блоки в порядке объявления. Когда переопределены были только две точки из пяти, порядок стал 810, 1200, 640, 1280, 1536: правило для узких экранов оказалось после правила для широких и выигрывало на всём, что шире 1200. Подвал, размеченный как две колонки от 640 и четыре от 1200, тихо отрисовывался в две колонки на десктопе. */ @media (min-width: 40em) { :root { --page-pad: var(--s5); --size-mark: 1.25rem; } } @media (min-width: 50.625em) { :root { --title-reserve: 44rem; --size-display: 3.5rem; --size-h2: 2.125rem; --size-h3: 1.625rem; --size-h4: 1.3125rem; --size-lead: 1.375rem; --size-body: 1.1875rem; --size-small: 0.9375rem; --size-apparatus: 0.8125rem; --size-label: 0.75rem; --register: 11rem; } } @media (min-width: 75em) { :root { --size-display: 5rem; --size-h2: 2.5rem; --size-h3: 1.75rem; --size-h4: 1.375rem; --size-lead: 1.5rem; --size-body: 1.25rem; /* Аппарат берёт третью ступень здесь, потому что колонку полей в этом же блоке расширяет с 11rem до 13rem: колонка, которая становится шире при неподвижном кегле, читается не спокойнее, а пустее. Шаг тот же, что от базы к полосе 810 — по одному пикселю на класс. */ --size-small: 1rem; --size-apparatus: 0.875rem; --size-label: 0.8125rem; --register: 13rem; --gutter: var(--s5); } } @media (min-width: 80em) { :root { --page-pad: var(--s6); } } /* Пятая контрольная точка объявлена и намеренно ничего не переопределяет. Здесь стояло --page-pad: var(--s7), и это был дефект: ширина полосы уже ограничена --page-max, поэтому рост поля не отодвигал содержимое от края, а сужал саму колонку — с 1088 px до 960 px. На более широком экране читатель получал более узкую строку, и строка стоящих сведений в шапке переносилась. Симптом был виден, причина — нет. Точка остаётся объявленной, потому что Приложение 1 называет пять по возрастанию, и потому что она понадобится, когда появится содержание, которому широкий экран действительно даёт больше: развороты с двумя плитами рядом, таблицы сверки Показателей. */ @media (min-width: 96em) { :root { /* зарезервировано */ } } /* ─── ТЁМНАЯ ТЕМА ─── Рисуется как самостоятельная, а не выводится инверсией светлой. Текст не чисто белый, линейки полупрозрачные, фон уведён в ту же синеву, что и чернила светлой темы. Посчитанные пары тёмной темы: ink #E2DBD2 на paper #070E16 — 14,12 muted #C6B29F на paper #070E16 — 9,48 accent #9F7869 на paper #070E16 — 4,95 Приглушённая роль тёмной темы — PUMICE, и запас у неё здесь вчетверо больше, чем у её светлого двойника: на почти чёрном грунте пемза стоит на 9,48, тогда как LEAD на бумаге — на 7,39. Сглаживание, которое в светлой теме съедает около 0,58 и решает выбор значения, тут решает ничего. Зато тёмная тема держит собственный отказ, и он найден гейтом `.palette.mjs`, а не глазом. Вывернутая комната `.rk` кладёт грунтом чернила — а чернила тёмной темы светлые. Значит `--accent-on-ink` в ней обязан быть тёмным. Стояло же значение, скопированное из `--accent`: #9F7869 на #E2DBD2 даёт 2,85 при пороге 4,5, и так простояло всю миграцию, потому что ни одна проверка не смотрела на вывернутую комнату отдельно от прямой. Теперь там краплак светлой темы, #7B4330 — 5,69. Седьмой краски не заведено: обе темы делят один и тот же объявленный цвет, просто с разных сторон. Три блока: светлая на голом :root, тёмная по системной настройке, тёмная по явному выбору. Ни один цвет не определён только внутри медиазапроса, иначе при явном светлом выборе он остался бы неопределённым. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #070E16; --ink: #E2DBD2; --muted: #C6B29F; --accent: #9F7869; --accent-on-ink: #7B4330; --wash: rgb(226 219 210 / 0.08); --rule: rgb(226 219 210 / 0.16); --rule-mid: rgb(226 219 210 / 0.28); --rule-strong: rgb(226 219 210 / 0.40); --rule-heavy: rgb(226 219 210 / 0.72); --paper-raised: #191E25; --grain-opacity: 0.05; } } :root[data-theme="dark"], .theme-dark { --grain-opacity: 0.05; --paper: #070E16; --ink: #E2DBD2; --muted: #C6B29F; --accent: #9F7869; --accent-on-ink: #7B4330; --wash: rgb(226 219 210 / 0.08); --rule: rgb(226 219 210 / 0.16); --rule-mid: rgb(226 219 210 / 0.28); --rule-strong: rgb(226 219 210 / 0.40); --rule-heavy: rgb(226 219 210 / 0.72); --paper-raised: #191E25; } /* Обе темы одним классом. Нужны для страницы-образца: Приложение 1 требует, чтобы обе темы были сняты на каждом шаблоне, а не только на главной, и удобнее всего показать их рядом на одном экране. */ .theme-light { --grain-opacity: 0.032; --paper: #F2EFEB; --ink: #17304A; --muted: #514C49; --accent: #7B4330; --accent-on-ink: #B49789; --wash: rgb(23 48 74 / 0.08); --rule: rgb(23 48 74 / 0.16); --rule-mid: rgb(23 48 74 / 0.28); --rule-strong: rgb(23 48 74 / 0.55); --rule-heavy: rgb(23 48 74 / 0.72); --paper-raised: #E7E4E1; } .theme-light, .theme-dark { background: var(--paper); color: var(--ink); } /* ─── СБРОС И ОСНОВАНИЕ ─── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-text); font-size: var(--size-body); font-weight: 400; line-height: var(--leading-body); font-variant-numeric: tabular-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Тело страницы не едет вбок ни на одной ширине. Широкие таблицы, схемы и блоки кода прокручиваются внутри своего контейнера, а не тянут страницу. */ html, body { overflow-x: clip; } img { max-width: 100%; height: auto; } /* Фиксированные высоты у всего, что содержит текст, запрещены: иначе увеличение только текста до 200 % обрезает содержимое. Обрезка в одну строку с многоточием запрещена по той же причине. */ /* Ссылка различается подчёркиванием, а не цветом: акцентного цвета в этом направлении нет. */ a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.18em; text-decoration-color: var(--rule-strong); } @media (hover: hover) and (pointer: fine) { a:hover { text-decoration-color: var(--ink); } } /* Подсветка нажатия от браузера снимается: на касании она рисует прямоугольник собственного цвета поверх строки, и это единственное место, где на страницу попадает цвет вне палитры. Вместо неё — то же различение, что даёт наведение на курсоре: подчёркивание уходит в чернила. Правило на голом a покрывает все ссылки, включая те, у которых собственного состояния нажатия нет. */ :where(a, button, summary, [tabindex]) { -webkit-tap-highlight-color: transparent; } a:active { text-decoration-color: var(--ink); } :where(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-1); } ::selection { background: var(--select-bg); color: var(--select-fg); } /* ─── УМЕНЬШЕНИЕ ДВИЖЕНИЯ ─── Движение уменьшается, а не выключается. Сплошное отключение — известная ошибка: после него на странице остаётся висеть содержимое, которое должен был проявить скрипт, и пропадает обратная связь состояния. Убираем сдвиг, масштаб и размытие. Прозрачность оставляем: смена прозрачности движением не считается. Длительности схлопываем почти в ноль, а не в ноль, чтобы события завершения анимации срабатывали и интерфейс не зависал в промежуточном состоянии. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur-invert: 1ms; --dur-invert-out: 1ms; --sched: 0; --dur: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }