/* =====================================================================
   CROSS ENGLISH · system.css · v4 (S0, ночь 13, 21.10.2026) — v4: красного нет (--act, --lang), пульт цветов html[data-btn|data-acc|data-num]. v3 (прогон 11): v3: номера разделов светлые, мелкий текст ≥ 14 px, касание ≥ 44 px, data-dir. v2: — v1: clip/.stage/:where; v2: запись в 1 поле (.qform), без «дока», текст ≥16, без глифов у заголовков
   Система «Скрипторий»: лист (бумага) · плита (коробка одного цвета) ·
   миниатюра (живопись на всю коробку + бумажная панель).
   Подключение из папки раздела: <link rel="stylesheet" href="../system.css">
   Шрифты лежат в ../fonts/ (пути ниже — от этого файла).
   Все размеры — числа в «единицах макета» × var(--u):
     ПК  (≥1024): макет 1440, --u = max(1px, 100vw/1440) → на 1710/1920 всё растёт пропорционально, как у Вирджинии
     тел (<1024): макет 390,  --u = clamp(1px, 100vw/390, 1.35px)
   Пример: width: calc(444 * var(--u));  Токены шрифтов — тоже числа.
   ===================================================================== */

/* ---------- 0. Шрифты (variable woff2, подмножества v2.2: кириллица / латиница+знаки, ось wght урезана: Garamond 400–600, Vollkorn 400–700; ≈ 182 КБ на все 8 файлов вместо 290) ---------- */
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/sub/eb-garamond-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/sub/eb-garamond-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+271B,U+FEFF,U+FFFD}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;
  src:url(fonts/sub/eb-garamond-cyrillic-wght-italic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"EB Garamond";font-style:italic;font-weight:400 600;font-display:swap;
  src:url(fonts/sub/eb-garamond-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vollkorn";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/sub/vollkorn-cyrillic-wght-normal.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Vollkorn";font-style:normal;font-weight:400 700;font-display:swap;
  src:url(fonts/sub/vollkorn-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Vollkorn";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/sub/vollkorn-cyrillic-wght-italic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Vollkorn";font-style:italic;font-weight:400 700;font-display:swap;
  src:url(fonts/sub/vollkorn-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---------- 1. Токены ---------- */
:root{
  /* палитра сайта (COMMON) — других цветов нет */
  --paper:#f7f3ea;   /* лист: фон страницы */
  --bone:#fbf8f1;    /* кость: светлая плита, бумажная панель, карточка */
  --azure:#29466f;   /* лазурь */
  --verd:#2c5a4e;    /* ярь */
  --ink:#24262b;     /* тушь */
  --gold:#c9a84c;    /* золото: знаки, цифры, ✛ (на бумаге только ≥ 40px — контраст 2,1) */
  --gold-l:#e9cf8e;  /* светлое золото: акцент на тёмных плитах (≥ 5,1:1) */
  --gold-d:#8a6a1f;  /* тёмное золото: мелкий золотой текст на бумаге (4,6:1) */
  /* ночь 13: КРАСНОГО НЕТ (Роман 20.10: «мне не нравится красный текст и кнопки»). Киноварь заменена двумя ролями из цветов сайта,
     обе переключаются пультом (html[data-btn], html[data-acc]):
     --act  — главная кнопка: тушь / лазурь / ярь;  --lang — «языковой», буквица, рубрики: лазурь / тёмное золото / ярь */
  --act:var(--ink);
  --lang-light:var(--azure); --lang:var(--lang-light);   /* по умолчанию лазурь (совет H: синяя рубрика рукописи, 9,1:1 на бумаге) */
  --red:var(--lang); /* устаревшее имя для старых разделов: значение больше не красное */
  --muted:#55524b;   /* вторичный текст на бумаге (6,2:1) */
  --hair:rgba(36,38,43,.16); /* контур карточки/поля (не разделитель!) */

  /* роли (переопределяются внутри тёмных плит) */
  --fg:var(--ink); --fg-soft:var(--muted); --accent:var(--gold-d);
  /* номер раздела (пульт html[data-num]): золото как в черновике 1 / лазурь как в лабе / светлый как в прогоне 11 */
  --num-light:var(--gold); --num-dark:rgba(233,207,142,.62); --num:var(--num-light);
  --cta-bg:var(--act); --cta-fg:var(--bone);

  /* шрифты */
  --f-head:"EB Garamond",Georgia,"Times New Roman",serif;
  --f-text:"Vollkorn",Georgia,"Times New Roman",serif;

  /* единица макета */
  --u:max(.711px, calc(100vw / 1440)); /* 20.10 дирижёр: 1024–1439 px — макет 1440 сжимается пропорционально (было 1px — шапка и правая колонка обрезались, на 1024 была прокрутка вбок) */

  /* шкала шрифтов ПК (px в макете 1440) */
  --fs-display:112; --lh-display:.92;   /* h1 шапки */
  --fs-h2:52;  --lh-h2:1.04;            /* заголовок раздела */
  --fs-lead:40; --lh-lead:1.12;         /* крупное утверждение в плите */
  --fs-h3:32;  --lh-h3:1.08;            /* название карточки */
  --fs-h4:24;  --lh-h4:1.15;            /* подзаголовок, вопрос аккордеона */
  --fs-body:18; --lh-body:1.5;          /* текст (кириллица) */
  --fs-small:16; --lh-small:1.45;   /* v2: мельче 16 на ПК только юридические сноски (.t-micro) */
  --fs-micro:14;     /* v3: мельче 14 px на странице ничего нет (J2 п. 5) */
  --fs-num:136;                          /* номер раздела */
  --fs-stat:76;                          /* крупная цифра (60, 2 000 ₽, C2) */
  --fs-btn:20;

  /* сетка и коробки ПК */
  --gut:36;          /* поле страницы (плита от края окна) */
  --gap:20;          /* зазор между коробками внутри раздела */
  --sec:64;          /* зазор между разделами */
  --pad:48;          /* внутреннее поле плиты */
  --r:10;            /* радиус плиты */
  --r-s:6;           /* радиус карточки/панели/кнопки */
  --bar:72;          /* верхняя панель */
  --rubric:140;      /* полоса-заголовок раздела */
  --row:282;         /* низкая клетка бенто; высокая = 2*row+gap = 584 */
  --btn-h:58;
}
@media (max-width:1023.98px){
  :root{
    --u:clamp(.8px, calc(100vw / 390), 1.35px); /* 20.10 дирижёр: на 360–389 px страница сжимается пропорционально (было 1px — шапка и форма вылезали за плиту) */
    --fs-display:54; --lh-display:.95;
    --fs-h2:36; --lh-h2:1.06;
    --fs-lead:26; --lh-lead:1.16;
    --fs-h3:24; --lh-h3:1.1;
    --fs-h4:19;
    --fs-body:17; --lh-body:1.5;
    --fs-small:15.2; --fs-micro:15.2;   /* v3: при --u = 0,923 (360 px) даёт 14 px даже там, где разделы пишут calc без max() */
    --fs-num:64; --fs-stat:48; --fs-btn:18;
    --gut:12; --gap:10; --sec:40; --pad:22; --r:8; --r-s:6;
    --bar:58; --rubric:92; --row:170; --btn-h:54;
  }
}

/* ---------- 2. База ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) * var(--u) + 12px)}
body{margin:0;background:var(--paper);color:var(--fg);
  font:400 max(14px, calc(var(--fs-body) * var(--u)))/var(--lh-body) var(--f-text);   /* ночь 13: на 1024–1150 px (--u 0,71) текст был 12,8 px */
  font-variant-numeric:lining-nums;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
h1,h2,h3,h4{font-family:var(--f-head);font-weight:500;margin:0;letter-spacing:-.005em;text-wrap:balance}
p{margin:0 0 .7em}p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* типографские классы */
.t-display{font:500 calc(var(--fs-display) * var(--u))/var(--lh-display) var(--f-head);letter-spacing:-.015em}
.t-h2{font:500 calc(var(--fs-h2) * var(--u))/var(--lh-h2) var(--f-head)}
.t-lead{font:400 calc(var(--fs-lead) * var(--u))/var(--lh-lead) var(--f-head)}
.t-h3{font:500 calc(var(--fs-h3) * var(--u))/var(--lh-h3) var(--f-head)}
.t-h4{font:500 italic calc(var(--fs-h4) * var(--u))/var(--lh-h4) var(--f-head)}
.t-body{font-size:max(14px, calc(var(--fs-body) * var(--u)))}
.t-small{font-size:max(14px, calc(var(--fs-small) * var(--u)));line-height:var(--lh-small)}
.t-micro{font-size:max(14px, calc(var(--fs-micro) * var(--u)));line-height:1.4;letter-spacing:.02em}
/* метка-капитель: не больше одной на экран (жюри 10: «капитель в каждой коробке теряет вес»); в карточках — .t-h4 курсивом */
.t-kicker{font:500 max(14px, calc(var(--fs-small) * var(--u)))/1.3 var(--f-text);letter-spacing:.09em;text-transform:uppercase;color:var(--accent)}
.t-ital{font-family:var(--f-head);font-style:italic}
.t-soft{color:var(--fg-soft)}
.t-red,.t-lang{color:var(--lang)} /* .t-red — старое имя, цвет теперь акцент сайта */
.t-gold{color:var(--accent)}
.onum{font-variant-numeric:oldstyle-nums}
/* буквица — акцент (--lang), 3 строки; не больше 3 на странице */
.drop::first-letter{float:left;font:500 calc(var(--fs-body) * var(--u) * 4.3)/.8 var(--f-head);color:var(--lang);padding:.06em .08em 0 0}

/* ---------- 3. Каркас страницы ---------- */
.wrap{padding-inline:calc(var(--gut) * var(--u))}
.sec{margin-top:calc(var(--sec) * var(--u))}
.sec > * + *{margin-top:calc(var(--gap) * var(--u))}

/* полоса-заголовок раздела: h2 слева, номер справа. Без линейки (REJECTED 22). */
.rubric{display:grid;grid-template-columns:1fr auto;align-items:end;gap:calc(24 * var(--u));
  min-height:calc(var(--rubric) * var(--u));padding:0 calc(var(--pad) * .5 * var(--u)) calc(14 * var(--u))}
.rubric h2{font:500 calc(var(--fs-h2) * var(--u))/var(--lh-h2) var(--f-head);max-width:16em}
.rubric .rubric-sub{grid-column:1;font-size:calc(var(--fs-body) * var(--u));color:var(--fg-soft);max-width:38em;margin-top:calc(8 * var(--u))}
.num{font:italic 400 calc(var(--fs-num) * var(--u))/.72 var(--f-head);color:var(--num);font-variant-numeric:oldstyle-nums;
  letter-spacing:-.03em;user-select:none;grid-row:1 / span 2;grid-column:2;align-self:end}
@media (max-width:1023.98px){
  .rubric{grid-template-columns:auto 1fr;padding-inline:calc(6 * var(--u));gap:calc(12 * var(--u))}
  .rubric .num{grid-column:1;grid-row:1}
  .rubric h2{grid-column:2}
  .rubric .rubric-sub{grid-column:1 / -1}
}

/* ---------- 4. Коробки ---------- */
/* ПЛИТА: коробка одного цвета, внутри слои. Модификатор = цвет. */
.plate{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-radius:calc(var(--r) * var(--u));
  padding:calc(var(--pad) * var(--u));background:var(--bone);color:var(--fg)}
.plate--bone{background:var(--bone)}
.plate--paper{background:var(--paper);box-shadow:inset 0 0 0 1px var(--hair)}
.plate--azure,.plate--verd,.plate--ink,.on-dark{
  --fg:var(--bone);--fg-soft:rgba(251,248,241,.8);--accent:var(--gold-l);--num:var(--num-dark);--lang:var(--gold-l);
  --cta-bg:var(--bone);--cta-fg:var(--ink);--hair:rgba(251,248,241,.22);color:var(--fg)}
.plate--azure{background:var(--azure)}
.plate--verd{background:var(--verd)}
.plate--ink{background:var(--ink)}
/* на всю ширину окна (только тушь; не больше 2 на странице) */
.plate--bleed{margin-inline:calc(var(--gut) * -1 * var(--u));border-radius:calc(var(--r) * .7 * var(--u));
  padding-inline:calc((var(--gut) + var(--pad)) * var(--u))}
/* все слои плиты — над фоном-сценой */
/* v1: нулевая специфичность — любой класс дизайнера (position:absolute и т.п.) перебивает это правило без !important.
   Служебные слои исключены: .scene .stage .cutout .layer .abs .ph .ph-scene */
:where(.plate) > :where(:not(.scene, .stage, .cutout, .layer, .abs, .ph-scene, .ph)){position:relative;z-index:2}
:where(.plate) > :where(.ph){z-index:1}
.abs{position:absolute}

/* МИНИАТЮРА: живопись на всю коробку, текст только на бумажной панели (≤ 3 на странице) */
.mini{position:relative;isolation:isolate;overflow:hidden;overflow:clip;border-radius:calc(var(--r) * var(--u));
  padding:calc(var(--pad) * var(--u));display:flex;align-items:flex-start;background:var(--ink)}
.mini > .paint{position:absolute;inset:0;z-index:0}
.mini > .paint img{width:100%;height:100%;object-fit:cover}
.panel{position:relative;z-index:2;background:var(--bone);color:var(--ink);border-radius:calc(var(--r-s) * var(--u));
  padding:calc(28 * var(--u)) calc(30 * var(--u));box-shadow:0 calc(10 * var(--u)) calc(30 * var(--u)) rgba(20,18,14,.28);
  --fg:var(--ink);--fg-soft:var(--muted);--accent:var(--gold-d);--cta-bg:var(--act);--cta-fg:var(--bone);--lang:var(--lang-light);--num:var(--num-light)}

/* КАРТОЧКА-лист: кость, тонкий контур */
.card{position:relative;isolation:isolate;overflow:hidden;overflow:clip;background:var(--bone);border-radius:calc(var(--r-s) * var(--u));
  box-shadow:inset 0 0 0 1px var(--hair);padding:calc(28 * var(--u))}

/* ---------- 5. Сетки ---------- */
/* БЕНТО: 3 колонки; .tall = 2 ряда (584), обычная клетка = 282; .w2 = 2 колонки */
.bento{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:calc(var(--row) * var(--u));gap:calc(var(--gap) * var(--u))}
.bento > *{min-width:0}
.bento .tall{grid-row:span 2}
.bento .w2{grid-column:span 2}
.bento .w3{grid-column:1 / -1}
@media (max-width:1023.98px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .bento .w2,.bento .w3,.bento .m-wide{grid-column:1 / -1}
  .bento .m-tall{grid-row:span 2}
  .bento .m-short{grid-row:span 1}
}
.cols-2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--gap) * var(--u))}
.cols-3{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--gap) * var(--u))}
.cols-4{display:grid;grid-template-columns:repeat(4,1fr);gap:calc(var(--gap) * var(--u))}
.split{display:grid;grid-template-columns:7fr 5fr;gap:calc(40 * var(--u));align-items:start}
@media (max-width:1023.98px){
  .cols-2,.cols-3,.split{grid-template-columns:1fr}
  .cols-4{grid-template-columns:1fr 1fr}
  /* лента вместо столбика: карточки уезжают вбок, видна следующая */
  .m-rail{display:grid;grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;
    margin-inline:calc(var(--gut) * -1 * var(--u));padding-inline:calc(var(--gut) * var(--u));scroll-padding-inline:calc(var(--gut) * var(--u))}
  .m-rail::-webkit-scrollbar{display:none}
  .m-rail > *{scroll-snap-align:start}
}

/* ---------- 6. Картинки: одна техника ---------- */
/* ФОН-СЦЕНА: гравюра тушью на белом (PNG/AVIF без цвета). Цвет и прозрачность — в CSS.
   Всегда «окном» на всю плиту, низ сцены = пол плиты. Метод «После пробного». */
.scene{position:absolute;inset:0;pointer-events:none}   /* v3: без z-index — иначе своя группа наложения, и .scene--light (screen) на тёмной плите темнит (S5) */
.scene img{width:100%;height:100%;object-fit:cover;object-position:var(--focus,50% 100%)}
.scene--ink img{mix-blend-mode:multiply;opacity:var(--scene-o,.34)}               /* светлые плиты: тушь умножением */
.scene--light img{filter:invert(1);mix-blend-mode:screen;opacity:var(--scene-o,.2)} /* тёмные плиты: светлый штрих */
/* уход в прозрачность там, где текст */
.fade-top{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 62%);mask-image:linear-gradient(180deg,transparent 0,#000 62%)}
.fade-bottom{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 55%);mask-image:linear-gradient(0deg,transparent 0,#000 55%)}
.fade-left{-webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 70%);mask-image:linear-gradient(90deg,transparent 0,transparent 30%,#000 70%)}
.fade-right{-webkit-mask-image:linear-gradient(270deg,transparent 0,transparent 30%,#000 70%);mask-image:linear-gradient(270deg,transparent 0,transparent 30%,#000 70%)}

/* ВЫРЕЗКА: персонаж или предмет, подкрашенная гравюра на прозрачном.
   Ставится НОГАМИ на пол: bottom = --floor (по умолчанию низ плиты). Тень — контактная, под опорой. */
.cutout{position:absolute;z-index:1;bottom:calc(var(--floor,0) * var(--u));pointer-events:none}
.cutout img{width:100%;height:auto}
.cutout.shadow::after{content:"";position:absolute;left:12%;right:12%;bottom:calc(-6 * var(--u));height:calc(14 * var(--u));z-index:-1;
  background:radial-gradient(closest-side,rgba(28,24,18,.42),rgba(28,24,18,0));transform:translateX(calc(6 * var(--u)))} /* свет слева сверху */
.on-dark .cutout.shadow::after,.plate--azure .cutout.shadow::after,.plate--verd .cutout.shadow::after,.plate--ink .cutout.shadow::after{
  background:radial-gradient(closest-side,rgba(0,0,0,.5),rgba(0,0,0,0))}
/* СЦЕНА С ГЕРОЯМИ (v1): фон + вырезки одним слоем — пол не уезжает из-под ног.
   <div class="stage"><div class="scene scene--ink"><img></div><div class="cutout shadow" style="left:…;width:…"><img></div></div>
   Двигать можно только всю .stage целиком (.stage.window-scene); .window-scene на одной .scene — только если на её полу никто не стоит. */
.stage{position:absolute;inset:0;z-index:0;pointer-events:none}
.stage > .scene{z-index:auto}
.stage > .cutout{z-index:1}
.stage.window-scene,.scene.window-scene{top:calc(var(--lift,0) * -1);bottom:auto;height:calc(100% + var(--lift,0px))}
/* «выход на кромку»: предмет пересекает край коробки (виден целиком, коробка overflow:visible) */
.edge{overflow:visible}

/* ПРОЯВЛЕНИЕ КРАСКИ (наш знак): штриховая версия сверху, цветная под ней.
   ПК — при наведении на коробку; телефон — при входе в экран (класс .is-in от JS). Только opacity. */
.tint{position:relative;display:block}
.tint > img{width:100%;height:auto}
.tint > .tint-line{position:absolute;inset:0;transition:opacity .9s ease}
@media (hover:hover){ .tint-host:hover .tint-line{opacity:0} }
@media (hover:none){ .tint-host.is-in .tint-line{opacity:0;transition-delay:.4s} }

/* МЕСТО ПОД КАРТИНКУ (каркас): подписанный прямоугольник */
.ph,.ph-scene{display:grid;place-items:center;text-align:center;color:rgba(36,38,43,.55);
  font:500 calc(12 * var(--u))/1.35 var(--f-text);letter-spacing:.03em;
  background:repeating-linear-gradient(135deg,rgba(36,38,43,.045) 0 10px,rgba(36,38,43,0) 10px 20px);
  box-shadow:inset 0 0 0 1px rgba(36,38,43,.28);border-radius:calc(4 * var(--u));padding:8px}
.ph-scene{position:absolute;inset:0;z-index:0;border-radius:0;place-items:end start;padding:calc(10 * var(--u)) calc(14 * var(--u))}
.on-dark .ph,.on-dark .ph-scene,.plate--azure .ph,.plate--verd .ph,.plate--ink .ph,
.plate--azure .ph-scene,.plate--verd .ph-scene,.plate--ink .ph-scene{color:rgba(251,248,241,.62);
  background:repeating-linear-gradient(135deg,rgba(251,248,241,.06) 0 10px,rgba(251,248,241,0) 10px 20px);box-shadow:inset 0 0 0 1px rgba(251,248,241,.3)}
.ph b{display:block;font-weight:700;letter-spacing:.06em}

/* ---------- 7. Элементы ---------- */
/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:calc(var(--btn-h) * var(--u));
  padding:0 calc(28 * var(--u));border-radius:calc(var(--r-s) * var(--u));border:0;cursor:pointer;text-decoration:none;
  font:500 calc(var(--fs-btn) * var(--u))/1.1 var(--f-head);letter-spacing:.01em;
  background:var(--cta-bg);color:var(--cta-fg);transition:transform .2s ease,opacity .2s ease;white-space:nowrap}
.btn::after{content:"→";font-family:var(--f-text);transition:transform .2s ease}
.btn:hover::after{transform:translateX(calc(4 * var(--u)))}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px currentColor}
.btn--ink{--cta-bg:var(--ink);--cta-fg:var(--bone)}
.btn--plain::after{content:none}
.btn--block{display:flex;width:100%}
.btn-note{display:block;margin-top:calc(8 * var(--u));font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
/* ссылка-стрелка */
.go{font:500 italic calc(var(--fs-body) * var(--u))/1.3 var(--f-head);color:var(--fg);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;min-height:44px}
.go::after{content:" →";font-style:normal;display:inline-block;transition:transform .2s ease}
.go:hover::after{transform:translateX(calc(4 * var(--u)))}

/* крупная цифра + подпись */
.stat{display:flex;flex-direction:column;gap:calc(4 * var(--u))}
.stat b{font:400 calc(var(--fs-stat) * var(--u))/.9 var(--f-head);letter-spacing:-.02em;font-variant-numeric:lining-nums}
.stat span{font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft);line-height:1.3}

/* таблица цен (без линий-разделителей: ряды разделены кремовой подложкой) */
.price{display:grid;grid-template-columns:auto 1fr auto;gap:calc(6 * var(--u)) calc(24 * var(--u));align-items:baseline}
.price dt{font:500 calc(var(--fs-h4) * var(--u))/1.2 var(--f-head)}
.price dd{margin:0}
.price .val{font:500 calc(var(--fs-h3) * var(--u))/1.1 var(--f-head);text-align:right;white-space:nowrap}

/* список с ✛ */
.list-x{list-style:none;padding:0;margin:0;display:grid;gap:calc(12 * var(--u))}
.list-x li{position:relative;padding-left:1.5em}
.list-x li::before{content:"✛";position:absolute;left:0;top:0;color:var(--accent);font-family:var(--f-text)}

/* шкала уровней — один раз на странице, не в каждой карточке */
.levels{display:flex;gap:calc(6 * var(--u));font:500 max(14px, calc(var(--fs-micro) * var(--u)))/1 var(--f-text);letter-spacing:.06em}
.levels i{font-style:normal;padding:.45em .6em;border-radius:99px;box-shadow:inset 0 0 0 1px var(--hair)}
.levels i.on{background:var(--fg);color:var(--paper);box-shadow:none}

/* аккордеон: знак — плющевой лист ❧, поворот при раскрытии (не крест — ROMAN-7 п.9) */
.acc{background:var(--bone);border-radius:calc(var(--r-s) * var(--u));box-shadow:inset 0 0 0 1px var(--hair)}
.acc + .acc{margin-top:calc(10 * var(--u))}
.acc summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;align-items:center;gap:16px;
  min-height:calc(68 * var(--u));padding:0 calc(26 * var(--u));font:500 calc(var(--fs-h4) * var(--u))/1.2 var(--f-head)}
.acc summary::-webkit-details-marker{display:none}
/* v2: знак раскрытия — CSS-уголок, не глиф и не крест */
.acc summary::after{content:"";width:.5em;height:.5em;border-right:2px solid var(--gold-d);border-bottom:2px solid var(--gold-d);transform:translateY(-25%) rotate(45deg);transition:transform .3s ease}
.acc[open] summary::after{transform:translateY(15%) rotate(225deg)}
.acc .acc-body{padding:0 calc(26 * var(--u)) calc(22 * var(--u));max-width:46em;color:var(--fg-soft)}

/* формы */
.field{display:flex;flex-direction:column;gap:calc(6 * var(--u))}
.field label{font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
.input{height:calc(var(--btn-h) * var(--u));padding:0 calc(18 * var(--u));border-radius:calc(var(--r-s) * var(--u));border:0;
  background:var(--bone);color:var(--ink);box-shadow:inset 0 0 0 1px rgba(36,38,43,.28);font:inherit;font-size:max(16px, calc(var(--fs-body) * var(--u)))} /* ≥16 px: iPhone не увеличивает страницу при вводе */
.on-dark .input,.plate--ink .input,.plate--azure .input,.plate--verd .input{box-shadow:none}
select.input{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat}
.seg{display:inline-flex;padding:4px;border-radius:calc(var(--r-s) * var(--u));box-shadow:inset 0 0 0 1px var(--hair)}
.seg label{padding:.45em 1em;border-radius:4px;cursor:pointer;font-size:max(14px, calc(var(--fs-small) * var(--u)))}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg input:checked + span{color:var(--ink)}
.seg label:has(input:checked){background:var(--bone);color:var(--ink)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
.check input{width:18px;height:18px;margin-top:.2em;accent-color:var(--gold)}

/* ---------- 8. Верхняя панель и нижний «док» телефона ---------- */
.bar{position:sticky;top:0;z-index:50;height:calc(var(--bar) * var(--u));display:flex;align-items:center;gap:calc(28 * var(--u));
  padding-inline:calc((var(--gut) + 12) * var(--u));background:rgba(247,243,234,.9);-webkit-backdrop-filter:blur(10px) saturate(1.1);backdrop-filter:blur(10px) saturate(1.1)}
.brand{display:flex;align-items:center;gap:calc(12 * var(--u));text-decoration:none;color:var(--ink)}
.emblem{display:inline-block;width:calc(44 * var(--u));height:calc(44 * var(--u));background:var(--emblem-c,var(--azure));
  -webkit-mask:url(s0/emblem-mask-128.png) center/contain no-repeat;mask:url(s0/emblem-mask-128.png) center/contain no-repeat}
.wordmark{font:600 calc(22 * var(--u))/1 var(--f-head);letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:calc(26 * var(--u));margin-left:auto;font:500 calc(18 * var(--u))/1 var(--f-head)}
.nav a{text-decoration:none;opacity:.86;display:inline-flex;align-items:center;min-height:44px;padding:0 calc(4 * var(--u))}.nav a:hover{opacity:1}
.nav{gap:calc(22 * var(--u))}
.bar .btn{min-height:max(44px, calc(44 * var(--u)));padding:0 calc(20 * var(--u));font-size:calc(18 * var(--u))}
.bar .btn::after{content:none}
@media (max-width:1023.98px){
  .bar{gap:10px;padding-inline:calc(14 * var(--u))}
  .nav{display:none}
  .emblem{width:calc(36 * var(--u));height:calc(36 * var(--u))}
  .wordmark{font-size:calc(17 * var(--u));letter-spacing:.12em}
  .bar .btn{margin-left:auto;min-height:44px;font-size:calc(16 * var(--u));padding:0 calc(14 * var(--u))}
}
/* v2: нижнего «дока» нет — кнопка «Записаться» всегда в липкой верхней панели (жюри 10: док закрывал текст). Старая разметка .dock в макетах просто скрыта. */
.dock{display:none!important}

/* ---------- 9. Движение (только transform/opacity) ---------- */
/* одно появление на весь сайт: снизу 32px, 0,5 с, один раз */
.js .rise{opacity:0;transform:translateY(calc(32 * var(--u)));transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 70ms)}
.js .rise.is-in{opacity:1;transform:none}
/* «окно»: сцена внутри коробки отстаёт от прокрутки (JS ставит --py), коробка уезжает — как фикс-фото Вирджинии, но без background-attachment */
.window-scene{will-change:transform;transform:translate3d(0,var(--py,0px),0)}
/* ✛ поворачивается от прокрутки (360° на 800px) */
.spin-scroll{display:inline-block;transform:rotate(var(--rot,0deg))}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
  .window-scene,.spin-scroll{transform:none!important}
  .tint > .tint-line{transition:none}
  *{animation:none!important}
}

/* ---------- 10. Подвал ---------- */
.foot{background:var(--ink);color:var(--bone);--fg:var(--bone);--fg-soft:rgba(251,248,241,.7);--accent:var(--gold-l);--lang:var(--gold-l);--num:var(--num-dark)}

/* ---------- 11. Запись в одно поле (v2) ---------- */
/* .qform — короткая запись: одно поле + кнопка + согласие строкой + «сразу в бот».
   Ставится 3 раза: под шапкой (#quick), в «Цены» (карточка «Пробный урок»), полная форма в «Записи».
   Все формы помечены data-book — к ним ведут кнопки a[data-book] (system.js выбирает ближайшую ниже). */
.qform{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:calc(10 * var(--u));align-items:start}
.qform .input{width:100%}
.qform .btn{height:calc(var(--btn-h) * var(--u))}
.qform .q-note{grid-column:1 / -1;margin:0;font-size:max(14px, calc(var(--fs-micro) * var(--u)));line-height:1.45;color:var(--fg-soft)}
.qform .q-note a{color:inherit}
.qform .q-bot{grid-column:1 / -1;justify-self:start;display:inline-flex;align-items:center;min-height:44px;font:500 italic calc(var(--fs-body) * var(--u))/1.3 var(--f-head);text-decoration:none}
.qform .q-bot::after{content:" →";font-style:normal}
.qform--stack{grid-template-columns:1fr}
@media (max-width:1023.98px){ .qform{grid-template-columns:1fr} .qform .btn{width:100%} }

/* ---------- 12. Отзыв «было → стало» (v2) ---------- */
.rev{display:flex;flex-direction:column;gap:calc(14 * var(--u))}
.rev .who{display:grid;grid-template-columns:auto 1fr;gap:calc(4 * var(--u)) calc(14 * var(--u));align-items:center}
.rev .face{grid-row:span 2;width:calc(64 * var(--u));height:calc(64 * var(--u));border-radius:50%;overflow:hidden;background:var(--paper);
  display:grid;place-items:center;font:500 calc(26 * var(--u))/1 var(--f-head);color:var(--gold-d);box-shadow:inset 0 0 0 1px var(--hair)}
.rev .name{font:600 calc(var(--fs-body) * var(--u))/1.2 var(--f-text)}
.rev .dir{font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft)}
.rev .shift{font:500 calc(var(--fs-h3) * var(--u))/1 var(--f-head);letter-spacing:-.01em}
.rev .shift i{font-style:normal;color:var(--gold-d);margin:0 .25em}
.rev blockquote{margin:0;font:400 italic calc(21 * var(--u))/1.35 var(--f-head)}
@media (max-width:1023.98px){ .rev blockquote{font-size:calc(19 * var(--u))} }

/* ---------- 13. Указатель (список-оглавление внутри раздела, v2) ---------- */
.idx{list-style:none;margin:0;padding:0;display:grid}
.idx > li > a,.idx > li > button{display:grid;grid-template-columns:calc(44 * var(--u)) minmax(0,1fr) auto;gap:calc(14 * var(--u));align-items:baseline;width:100%;
  padding:calc(14 * var(--u)) calc(16 * var(--u));border:0;border-radius:calc(var(--r-s) * var(--u));background:transparent;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;
  transition:background-color .2s ease}
.idx > li > a:hover,.idx > li > button:hover,.idx > li > [aria-current]{background:var(--bone)}
.idx .rn{font:italic 400 calc(26 * var(--u))/1 var(--f-head);color:var(--gold-d)}
.idx b{font:500 calc(26 * var(--u))/1.15 var(--f-head);display:block}
.idx .l{display:block;font-size:max(14px, calc(var(--fs-small) * var(--u)));color:var(--fg-soft);margin-top:2px}
.idx em{font:500 italic calc(19 * var(--u))/1.2 var(--f-head);color:var(--fg);white-space:nowrap}
@media (max-width:1023.98px){
  .idx > li > a,.idx > li > button{grid-template-columns:calc(30 * var(--u)) minmax(0,1fr) auto;padding:calc(10 * var(--u)) calc(8 * var(--u))}
  .idx b{font-size:calc(21 * var(--u))} .idx .rn{font-size:calc(20 * var(--u))} .idx em{font-size:calc(16 * var(--u))}
}

/* v3: РФ по часовому поясу (класс tz-ru ставит инлайн-скрипт в <head>) — WhatsApp и др. скрыты */
.tz-ru .hide-ru{display:none!important}

/* 20.10 дирижёр по жюри J2: ссылки внутри текста на сенсорных экранах — зона касания выше строки (padding у строчной ссылки не двигает строки) */
@media (pointer:coarse){ main p a:not([class]), main li a:not([class]), main dd a:not([class]), .q-note a, .z-note a, footer p a:not([class]) { padding-block:max(.62em, calc((44px - 1.25em) / 2)); } }   /* ночь 13: зона касания ≥ 44 px при любом кегле; только строчные ссылки без класса — у строк-ссылок с классом свой размер (P: отступ раздувал строки списка) */
.bar .brand{min-height:44px}   /* ночь 13: логотип в панели — цель касания ≥ 44 px */

/* ---------- 14. Ночь 13: цвета из пульта (html[data-btn|data-acc|data-num]); красного в системе нет ---------- */
html[data-btn="azure"]{--act:var(--azure)}
html[data-btn="verd"]{--act:var(--verd)}
html[data-acc="gold"]{--lang-light:var(--gold-d)}
html[data-acc="verd"]{--lang-light:var(--verd)}
html[data-num="azure"]{--num-light:var(--azure);--num-dark:rgba(251,248,241,.34)}
html[data-num="r11"]{--num-light:#d9d2c4;--num-dark:rgba(251,248,241,.26)}
/* скрытый вариант раздела (пульт): не занимает места и не грузит картинки */
[data-sec][hidden]{display:none!important}

/* ---------- 15. Ночь 13: общий выключатель «Остановить анимацию» (html[data-theatre=off] или html.still — ставит подвал, помнит браузер) ----------
   Все CSS-анимации и переходы доигрывают мгновенно (до конечного кадра: ничего не пропадает), окна и ✛ стоят, проявление — сразу.
   Движение по таймерам в JS разделы гасят сами по этому же атрибуту. */
html[data-theatre="off"] *,html[data-theatre="off"] *::before,html[data-theatre="off"] *::after,
html.still *,html.still *::before,html.still *::after{animation-duration:.001s!important;animation-delay:0s!important;animation-iteration-count:1!important;
  transition-duration:.001s!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-theatre="off"] .window-scene,html[data-theatre="off"] .spin-scroll,html.still .window-scene,html.still .spin-scroll{transform:none!important}
html[data-theatre="off"].js .rise,html.still.js .rise{opacity:1;transform:none}

/* ---------- 16. День 14: номер раздела — своё, из рукописи (пульт html[data-nst]) ----------
   Роман 21.10: «нумерация страниц как у Вирджинии по всему сайту не то — это их фишка и это прям копия один в один».
   Номер теперь у всех разделов в одном месте — в начале заголовка h2 (знак .fol ставит сборка; римская цифра из data-r).
   cap   — инициал: лазурное поле, золотая римская цифра (как расписная версалия рукописи; на тёмной плите — золотое поле, цифра тушью);
   folio — «Глава III» капителью тёмным золотом над заголовком (как колонтитул-фолио рукописи);
   pil   — знак главы ¶ лазурью и римская цифра тёмным золотом перед заголовком (капитулум рубрикатора — синий вместо киновари);
   n13   — как в ночи 13: крупная курсивная цифра справа (.num). Красного нет. */
.fol{display:none}
html:not([data-nst="n13"]) .num{display:none!important}
html:not([data-nst="n13"]) .rubric{grid-template-columns:1fr}
html:not([data-nst="n13"]) .rubric h2,html:not([data-nst="n13"]) .rubric .rubric-sub{grid-column:1}
html[data-nst="cap"] .fol,html[data-nst="pil"] .fol{display:inline-block}
html[data-nst="folio"] .fol{display:block}
/* cap · инициал */
html[data-nst="cap"] .fol{min-width:1.32em;height:1.32em;padding:0 .22em;margin:0 .3em 0 0;vertical-align:-.17em;box-sizing:border-box;
  background:var(--azure);color:var(--gold-l);border-radius:calc(3 * var(--u));box-shadow:inset 0 0 0 .05em rgba(233,207,142,.55);
  font:500 .8em/1.32 var(--f-head);letter-spacing:.02em;text-align:center;font-style:normal;font-variant:normal;text-transform:none}
html[data-nst="cap"] .fol::before{content:attr(data-r)}
html[data-nst="cap"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{background:var(--gold);color:var(--ink);box-shadow:none}
/* folio · колонтитул */
html[data-nst="folio"] .fol{font:500 max(14px, .3em)/1.2 var(--f-head);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-d);
  margin:0 0 .5em;font-style:normal}
html[data-nst="folio"] .fol::before{content:"Глава\00a0" attr(data-r)}
html[data-nst="folio"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
/* pil · знак главы */
html[data-nst="pil"] .fol{font:500 .74em/1 var(--f-head);color:var(--gold-d);margin-right:.36em;letter-spacing:.02em;font-style:normal;vertical-align:.04em}
html[data-nst="pil"] .fol::before{content:"¶";color:var(--azure);margin-right:.14em}
html[data-nst="pil"] .fol::after{content:attr(data-r)}
html[data-nst="pil"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
html[data-nst="pil"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol::before{color:var(--bone)}

/* ---------- 17. День 14: одна «Записаться» в поле зрения ----------
   Роман 21.10: «2 две кнопки записаться на пробный урок рядом — криво». Строка записи ушла после «Направлений» (qk=low);
   кнопка панели прячется, пока в экране есть другая кнопка записи (html.cta-near ставит system.js); qk=lvl — строка под шапкой,
   а в шапке вместо тёмной кнопки остаётся «Узнать свой уровень». Только opacity/transform. */
/* FIX14 (жюри UX/motion): видима ⇔ нажимается — переключение мгновенное, без прозрачных кликабельных и видимых некликабельных кадров,
   без сдвига (reduced-motion тоже) */
html.cta-near .bar .btn{visibility:hidden}
html[data-qk="lvl"] .hero-cta{display:none!important}

/* ---------- 18. FIX14 (жюри дня 14): номер раздела — золотая римская цифра-инициал, единственная римская на странице ----------
   gold — цифра золотом тем же кеглем и начертанием, что h2, на его базовой линии, без плашки и рамки; стоит в «поле» одной ширины
   (висячий отступ h2 = 2,1em: самая широкая VIII — 1,71em), поэтому текст всех заголовков начинается с одной вертикали, а перенос h2 идёт под текст, не под цифру
   (телефон: «V Как / проходит обучение» больше не рвётся на цифре). На бумаге ПК — --gold (кегль ≥ 40 px); на телефоне h2 36 px —
   --gold-d (правило системы: золото на бумаге только ≥ 40 px). На тёмных плитах — --gold-l. */
html[data-nst="gold"] .fol{display:inline}
html[data-nst="gold"] h2:has(> .fol){position:relative;padding-left:2.1em;text-wrap:balance}
html[data-nst="gold"] .fol{position:absolute;left:0;top:0;width:1.8em;text-align:right;font:inherit;font-style:normal;font-weight:500;
  line-height:inherit;letter-spacing:.01em;color:var(--gold);font-variant-numeric:normal;text-transform:none}
html[data-nst="gold"] .fol::before{content:attr(data-r)}
html[data-nst="gold"] .rubric h2:has(> .fol){max-width:18.1em}   /* висячий отступ не съедает меру заголовка (16em системы) */
@media (min-width:1024px){ html[data-nst="gold"] .rubric:has(h2 > .fol) .rubric-sub{padding-left:calc(2.1 * var(--fs-h2) * var(--u))} }   /* подзаголовок — с той же вертикали, что текст заголовка */
html[data-nst="gold"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
@media (max-width:1023.98px){
  html[data-nst="gold"] .fol{color:var(--gold-d)}
  html[data-nst="gold"] :is(.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot) .fol{color:var(--gold-l)}
  /* cap на телефоне — поле над заголовком, h2 переносится сам */
  html[data-nst="cap"] .fol{display:table;margin:0 0 .3em}
  html[data-nst="cap"] h2:has(> .fol){text-wrap:balance}
}

/* ---------- 19. Ночь 15 · ритм страницы (rh) ----------
   Роман 21.10: «Все стало каким-то прямоугольно-коробочным..», «между секциями 6 и 7 должен быть пробел или что-то другое»,
   «у них между тяжелыми секциями есть разгружающие визуал пробелы … и легкие секции с текстом и легким фоновым изображением».
   FRAME-15 «A-лёгкая» + RHYTHM-15 §3: земля страницы — лист; коробка — событие. rh=sheet (по умолчанию) · rh=d14 (коробки дня 14).
   Заливка снятых коробок = цвет листа (var(--paper)), а не none: у плит isolation:isolate, и гравюры с multiply без своей подложки светлели бы до белого прямоугольника.
   Всё ниже — только под html[data-rh="sheet"] и только для вариантов по умолчанию ([data-sec][data-key]); d14 = день 14 без изменений.
   Рисунки «Тестов» и крестьяне Дюрера не тронуты: снята коробка (заливка, рамка, небо-подложка), фигуры и гравюры на месте. */

/* Р3 · строка записи под «Направлениями» — на бумаге: без заливки и контура, книга лежит на базовой линии */
html[data-rh="sheet"] [data-sec="quick"][data-key="one"] .zq{background:var(--paper);box-shadow:none;border-radius:0}

/* Р3 · VI «Тесты» — лёгкий лист. «Тест уровня»: снято небо-коробка (градиент, облака, свечение) — студент на лестнице и куча книг
   стоят на бумаге со своей тенью; текст без панели. «Какой ты студент»: без плиты кости, площадь — бледной гравюрой, края гаснут в бумагу */
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-lv{background:var(--paper);border-radius:0;overflow:visible}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] :is(.tt-far,.tt-near,.tt-glow,.tt-cap){display:none}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-lvp{background:none;box-shadow:none;border-radius:0}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-ty{background:var(--paper);border-radius:0}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-bg{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%),linear-gradient(90deg,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%),linear-gradient(90deg,#000 88%,transparent 100%);mask-composite:intersect}
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-card{background:none;box-shadow:inset 0 0 0 1px var(--hair)}

/* Р3 · IX «Канал» — окно канала без коробки: посты в рамках 1 px прямо на бумаге, площадь — бледной гравюрой, верх, низ и правый край гаснут в бумагу */
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-box{background:var(--paper);box-shadow:none;border-radius:0}
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-vl{border-radius:0;
  -webkit-mask:linear-gradient(to right,transparent var(--pz-vm0),#000 var(--pz-vm1),#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
  mask:linear-gradient(to right,transparent var(--pz-vm0),#000 var(--pz-vm1),#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);mask-composite:intersect}
html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-post{background:var(--paper)}

/* Р2 · знак ✛: один, золотом, 20u (тел 16u), в блоке 120u (тел 80u) — перед «Направлениями» и перед «Ценами». Без линий, пары и вращения (REJECTED 22, 26) */
html[data-rh="sheet"] :is([data-sec="courses"],[data-sec="prices"]):not([hidden])::before{content:"\271B";display:flex;align-items:center;justify-content:center;
  height:calc(120 * var(--u));margin-top:calc(var(--sec) * var(--u));margin-bottom:calc(var(--sec) * -1 * var(--u));
  font:400 calc(20 * var(--u))/1 var(--f-head);color:var(--gold);speak:never}
@media (max-width:1023.98px){
  html[data-rh="sheet"] :is([data-sec="courses"],[data-sec="prices"]):not([hidden])::before{height:calc(80 * var(--u));font-size:calc(16 * var(--u));color:var(--gold-d)}
}

/* Р1 · воздух: V→VI и VIII→«Запись» — +96u (тел +56u) сверх обычного шага */
html[data-rh="sheet"] :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 96) * var(--u))}
@media (max-width:1023.98px){
  html[data-rh="sheet"] :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 56) * var(--u))}
}

/* Р5 · «Запись» во всю ширину: лазурь от края до края, без скругления; содержимое стоит где стояло (поле плиты + поле страницы) */
/* раздел ship режет по горизонтали (overflow-x:clip — мачты не дают прокрутки вбок), поэтому вширь раздвигается сам раздел, а плита занимает его целиком */
html[data-rh="sheet"] [data-sec="zapis"][data-key="ship"] > .sec{margin-inline:calc(var(--gut) * -1 * var(--u))}
html[data-rh="sheet"] [data-sec="zapis"][data-key="ship"] .zm-plate{border-radius:0;padding-inline:calc((var(--gut) + var(--pad)) * var(--u))}
html[data-rh="sheet"] [data-sec="zapis"][data-key="ship"] :is(.zm-marine,.zm-sea){border-radius:0}
/* rh=sheet · телефон: без коробки края гравюр не режутся кромкой — гаснут в бумагу (REJECTED 5: обрезанные фоны) */
@media (max-width:1023.98px){
  html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-sky{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%)}
  html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-sqm{
    -webkit-mask-image:linear-gradient(transparent 0,#000 26%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
    mask-image:linear-gradient(transparent 0,#000 26%,#000 82%,transparent 100%),linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
  html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-vl{
    -webkit-mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
    mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 24%,#000 84%,transparent 100%);mask-composite:intersect}
}
/* FIX15 (жюри UX): на телефоне бледная площадь шла от заголовка канала до низа — под постами ~300 px «пустой» гравюры, пока крестьяне не проявились.
   Площадь сжата до полосы за крестьянами: под текстом и постами её нет (маска: ноль до 52 % высоты окна, полная с 68 %) */
@media (max-width:1023.98px){
  html[data-rh="sheet"] [data-sec="channel"]:is([data-key="ear"],[data-key="d14"]) .pz-vl{
    -webkit-mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 52%,#000 68%,#000 86%,transparent 100%);-webkit-mask-composite:source-in;
    mask:linear-gradient(to right,transparent 0,#000 12%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,transparent 52%,#000 68%,#000 86%,transparent 100%);mask-composite:intersect}
}
/* rh=sheet · два теста без коробок стоят дальше друг от друга: без рамки 20u между ними читались одной картинкой */
html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-rows{gap:calc(64 * var(--u))}
@media (max-width:1023.98px){ html[data-rh="sheet"] [data-sec="tests"][data-key="split"] .tt-rows{gap:calc(40 * var(--u))} }

/* ---------- 20. FIX15 (жюри ночи 15) ---------- */
/* UX J15: золотая подпись роли на фото преподавателей — 3,6:1 на 390 (нужно ≥ 4,5). Градиент под подписью плотнее там, где стоит строка роли
   (было .72 на 46 % высоты подписи, стало .88 на 50 % и .72 на 70 %); фото выше подписи не тронуто. Для всех ритмов: это доступность, а не вид. */
html [data-sec="teachers"] .v-r10 .t10-cap{background:linear-gradient(0deg,rgba(24,22,20,.92) 0,rgba(24,22,20,.88) 50%,rgba(24,22,20,.72) 70%,rgba(24,22,20,0) 100%)}
/* жюри: книга у строки записи «голой линией» — в листе книга сразу в краске (линия-гравюра была только до наведения/входа в экран) */
html[data-rh="sheet"] [data-sec="quick"][data-key="one"] .zq-obj .tint-line{opacity:0}
/* жюри: на телефоне ✛ сразу после шапки лишний (шапка и «Направления» и так разведены полем); ✛ перед «Ценами» остаётся */
@media (max-width:1023.98px){
  html[data-rh="sheet"] [data-sec="courses"]:not([hidden])::before{content:none}
}

/* =====================================================================
   НОЧЬ 16 · S0 (25→26.10.2026) — §21 кнопки · §22 плиты прозрачнее · §23 масштаб
   Пульт: btn = n16 (по умолчанию) | ink («Как в ночи 15» — тушь, правила §7 как были);
   (zm, btn, pl — системные ключи build-index.py SYS; zm по умолчанию 100 — поле def)
          pl  = soft (по умолчанию) | solid («Как в ночи 15» — сплошной цвет);  zm = 80 | 90 | 100 (по умолчанию) | 110.
   Страницы разделов (v<ключ>.html) атрибутов не ставят — на них сразу видна система ночи 16.
   ===================================================================== */

/* ---------- 21. Кнопки — одна система на всю страницу ----------
   Образец — прогон 25 («запасная v25», build3/lab/_src/p20.css §2 + p15.css «Кайма»): прозрачная кнопка с каймой пигмента,
   при наведении наливается краской. Роман: 09.10 «оставь вот такой вариант кнопки (прозрачный) изначально и чтобы он наполнялся краской
   при наведении мышки»; 12.10 «старые кнопки лучше в этой секции» (выбор «как v25», p33 DEF28); 05.10 «в стиле бумаги, не цветная почти»;
   01.10 «заполнение цветом … более нежным»; 08.10 «чёрные кнопки не нравятся»; 20.10 «не нравится красный текст и кнопки».
   РОЛИ (классы — для всех разделов; свои кнопки не изобретать):
     .btn               основная «Записаться на бесплатный урок»: прозрачная, кайма 1,5 px пигментом, Garamond 600 прямыми строчными
                        (в v25 — Vollkorn 600; он шире на 10 %, и «Записаться на бесплатный урок» в «Ценах» переносилась в две строки);
                        наведение / фокус / нажатие — краска наливается слева направо (только transform), текст становится костью
     .btn--ghost        вторая кнопка рядом с основной («Пройти тест»): кайма 1 px на 60 %, без заливки; наведение — кайма полная
     .btn--fill         и кнопка отправки формы (form .btn[type=submit]) — финальное действие: залита мягкой краской, наведение — снова кайма (как v25)
     .btn-bot / .q-bot  вторичная «или в бот →»: курсив Garamond, волосяное подчёркивание, стрелка; стоит рядом с основной (ПК) или под ней (телефон)
     .go                ссылка-действие: курсив, лазурь (на тёмном — кость), волосяное подчёркивание, стрелка
     .btn-row           ряд «основная + вторичная»: ПК — в строку, телефон — столбиком, основная во всю ширину
   ПИГМЕНТ — от поверхности: на бумаге, кости и бумажной панели — лазурь (--bt-c), текст на заливке — кость (--bt-t);
   на тёмной плите (лазурь, ярь, тушь, .on-dark, подвал) — кость, текст на заливке — цвет плиты. Красного и туши в кнопках нет.
   Касание ≥ 44 px везде. Контраст: лазурь на бумаге 8,6:1, на кости 9,0:1; кость на заливке лазурью 88 % 6,6:1; на прозрачной плите кайма-кость 5,5–9,4:1,
   цвет плиты на заливке костью 6,8–13:1 (s0/R16-S0.md «Замеры»). */
:root{--bt-c:var(--azure);--bt-t:var(--bone);--bt-link:var(--azure);--bt-mix:88%}
.plate--azure,.plate--verd,.plate--ink,.on-dark,.foot{--bt-c:var(--bone);--bt-t:var(--ink);--bt-link:var(--bone);--bt-mix:94%}
.plate--azure{--bt-t:var(--azure)}
.plate--verd{--bt-t:var(--verd)}
.panel,.plate--bone,.plate--paper,.card{--bt-c:var(--azure);--bt-t:var(--bone);--bt-link:var(--azure);--bt-mix:88%}

html:not([data-btn="ink"]) .btn{position:relative;isolation:isolate;overflow:hidden;
  min-height:max(44px, calc(var(--btn-h) * var(--u)));padding:0 calc(30 * var(--u));border-radius:calc(var(--r-s) * var(--u));
  font:600 max(16px, calc(var(--fs-btn) * var(--u)))/1.1 var(--f-head);letter-spacing:.01em;font-variant-numeric:lining-nums;white-space:nowrap;
  background:transparent;color:var(--bt-c);box-shadow:inset 0 0 0 1.5px var(--bt-c);
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:color 0s linear .13s,transform .2s ease}
html:not([data-btn="ink"]) .btn:not(.p10-btn)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;
  background:color-mix(in srgb,var(--bt-c) var(--bt-mix),transparent);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .34s cubic-bezier(.55,.05,.25,1)}
html:not([data-btn="ink"]) .btn::after{font-weight:400}
@media (hover:hover){
  html:not([data-btn="ink"]) .btn:hover{color:var(--bt-t)}
  html:not([data-btn="ink"]) .btn:not(.p10-btn):hover::before{transform:none}
}
html:not([data-btn="ink"]) .btn:is(:focus-visible,:active){color:var(--bt-t)}
html:not([data-btn="ink"]) .btn:not(.p10-btn):is(:focus-visible,:active)::before{transform:none}
html:not([data-btn="ink"]) .btn:focus-visible{outline:2px solid var(--bt-c);outline-offset:3px}
html:not([data-btn="ink"]) .btn:active{transform:translateY(1px);transition-duration:0s,.06s}
html:not([data-btn="ink"]) .btn:is(:disabled,[aria-disabled="true"]){opacity:.5;cursor:not-allowed;transform:none}
/* туши в кнопках нет: старое «.btn--ink» в ночи 16 — обычная основная кнопка (правила выше его перекрывают) */
/* вторая кнопка рядом с основной */
html:not([data-btn="ink"]) .btn--ghost{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bt-c) 60%,transparent);color:var(--bt-c)}
html:not([data-btn="ink"]) .btn--ghost::before{content:none!important}
@media (hover:hover){ html:not([data-btn="ink"]) .btn--ghost:hover{color:var(--bt-c);box-shadow:inset 0 0 0 1.5px var(--bt-c)} }
html:not([data-btn="ink"]) .btn--ghost:is(:focus-visible,:active){color:var(--bt-c);box-shadow:inset 0 0 0 1.5px var(--bt-c)}
/* отправка формы — залита мягкой краской; наведение — снова кайма (как v25) */
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill){color:var(--bt-t)}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill)::before{transform:none}
@media (hover:hover){
  html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):hover{color:var(--bt-c)}
  html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):hover::before{transform:scaleX(0);transform-origin:100% 50%}
}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):is(:focus-visible,:active){color:var(--bt-t)}
html:not([data-btn="ink"]) :is(form .btn[type="submit"],.btn--fill):is(:focus-visible,:active)::before{transform:none}
/* телефон: поля кнопки уже (Garamond 600 шире 500 на ≈ 2 %, «Записаться на бесплатный урок» на 360–390 должна стоять в одну строку) */
@media (max-width:1023.98px){ html:not([data-btn="ink"]) .btn{padding:0 calc(16 * var(--u))} }
/* панель сайта: та же кнопка, малая */
html:not([data-btn="ink"]) .bar .btn{font-size:max(15px, calc(17 * var(--u)));padding:0 calc(18 * var(--u))}
/* вторичная «или в бот →» */
html:not([data-btn="ink"]) :is(.btn-bot,.q-bot){display:inline-flex;align-items:center;min-height:44px;gap:.3em;
  font:500 italic max(16px, calc(var(--fs-body) * var(--u)))/1.3 var(--f-head);color:var(--fg);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)}
html:not([data-btn="ink"]) .btn-bot::after{content:"\2009→";font-style:normal;display:inline-block;transition:transform .2s ease}
@media (hover:hover){
  html:not([data-btn="ink"]) :is(.btn-bot,.q-bot):hover{color:var(--bt-c);text-decoration-color:currentColor}
  html:not([data-btn="ink"]) .btn-bot:hover::after{transform:translateX(calc(4 * var(--u)))}
}
/* ссылка-действие */
html:not([data-btn="ink"]) .go{color:var(--bt-link)}
html:not([data-btn="ink"]) .go:not(:has(small,b,strong)){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.24em;
  text-decoration-color:color-mix(in srgb,currentColor 38%,transparent)}
@media (hover:hover){ html:not([data-btn="ink"]) .go:hover{text-decoration-color:currentColor} }
/* .btn-bot — новый класс ночи 16: и при «Как в ночи 15» (btn=ink) у него касание 44 px и вид ссылки-«go» тех дней */
html[data-btn="ink"] .btn-bot{display:inline-flex;align-items:center;min-height:44px;font:500 italic calc(var(--fs-body) * var(--u))/1.3 var(--f-head);color:var(--fg);text-decoration:none}
html[data-btn="ink"] .btn-bot::after{content:" →";font-style:normal}
/* ряд «основная + вторичная» */
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:calc(14 * var(--u)) calc(28 * var(--u))}
@media (max-width:1023.98px){
  .btn-row{flex-direction:column;align-items:stretch;gap:calc(6 * var(--u))}
  .btn-row > .btn{width:100%}
  .btn-row > :is(.btn-bot,.q-bot,.go){align-self:center}
}
@media (forced-colors:active){ html:not([data-btn="ink"]) .btn{border:2px solid ButtonText} html:not([data-btn="ink"]) .btn::before{display:none} }
@media (prefers-reduced-motion:reduce){ html:not([data-btn="ink"]) .btn,html:not([data-btn="ink"]) .btn::before,html:not([data-btn="ink"]) .btn-bot::after{transition:none!important} }

/* ---------- 22. Плиты прозрачнее: краска 84–88 % по фактуре бумаги, а не плоский цвет ----------
   Роман 22.10: «синяя коробка внутри выглядит тяжело — очень тяжело — мне кажется эти тяжелые сплошные зеленые секции надо сделать прозрачнее»;
   «секция с кораблем … слишком сине-тяжелая — попозрачнее?».
   Фактура — одна на страницу (одна рука): тайлы O how/img/grain16-d.webp (тёмные волокна, α ≤ 0,12) и grain16-w.webp (светлые, α ≤ 0,085), 512 px, бесшовные.
   Слои снизу вверх: лист → тёмные волокна → краска плиты 84–88 % → светлые волокна (рецепт O, REQ-O п. 1; так же у B в записи и у R).
   Системные плиты (.plate--azure/--verd/--ink) переводятся сами (pl=soft), с нулевой добавкой специфичности: если раздел красит плиту сам (градиент,
   картинка), его правило сильнее — тогда владелец берёт классы ниже. Сплошной цвет одной плите — .plate--solid; всей странице — пульт pl=solid.
   Контраст замерен по всем пикселям фактуры (2-й перцентиль — «худшая точка» под буквой; s0/R16-S0.md «Замеры»):
     кость на лазури 86 % 5,5:1 · на яри 88 % 4,9:1 · на туши 86 % 8,1:1;
     вторичный текст (--fg-soft) поднят до 4,5:1 (лазурь .90, ярь .95); мелкий золотой акцент (--accent): лазурь #f1e1bb 4,6:1, ярь #f6eed8 4,5:1;
     светлое золото #e9cf8e на прозрачной плите — только кегль ≥ 24 px (3,9 / 3,4 ≥ 3:1).
   КЛАССЫ ДЛЯ СВОИХ КОРОБОК: .veil16 + .veil16--azure | --verd | --ink (фон целиком, на светлом листе), .veil16--bone-base (то же поверх кости).
   Текстовые роли внутри (--fg, --fg-soft, --accent, кнопки) классы ставят сами. Фактура грузится сразу (два тайла на всю страницу, 76 КБ, кэш). */
.plate--azure:where(:not(.plate--solid)):where(html:not([data-pl="solid"]) *),.veil16--azure{
  background:url(how/img/grain16-w.webp) 160px 90px/512px 512px repeat,linear-gradient(rgba(41,70,111,var(--veil-a,.86)),rgba(41,70,111,var(--veil-a,.86))),url(how/img/grain16-d.webp) 0 0/512px 512px repeat,var(--veil-base,var(--paper));
  --fg-soft:rgba(251,248,241,.9);--accent:#f1e1bb}
.plate--verd:where(:not(.plate--solid)):where(html:not([data-pl="solid"]) *),.veil16--verd{
  background:url(how/img/grain16-w.webp) 160px 90px/512px 512px repeat,linear-gradient(rgba(44,90,78,var(--veil-a-v,.88)),rgba(44,90,78,var(--veil-a-v,.88))),url(how/img/grain16-d.webp) 0 0/512px 512px repeat,var(--veil-base,var(--paper));
  --fg-soft:rgba(251,248,241,.95);--accent:#f6eed8}
.plate--ink:where(:not(.plate--solid)):where(html:not([data-pl="solid"]) *),.veil16--ink{
  background:url(how/img/grain16-w.webp) 160px 90px/512px 512px repeat,linear-gradient(rgba(36,38,43,var(--veil-a,.86)),rgba(36,38,43,var(--veil-a,.86))),url(how/img/grain16-d.webp) 0 0/512px 512px repeat,var(--veil-base,var(--paper))}
.veil16--bone-base{--veil-base:var(--bone)}
.veil16{--fg:var(--bone);--lang:var(--gold-l);--cta-bg:var(--bone);--cta-fg:var(--ink);--hair:rgba(251,248,241,.22);color:var(--fg);
  --bt-c:var(--bone);--bt-link:var(--bone);--bt-mix:94%}
.veil16--azure{--bt-t:var(--azure)} .veil16--verd{--bt-t:var(--verd)} .veil16--ink{--bt-t:var(--ink)}

/* ---------- 23. Масштаб на пульте (zm): вся страница 80 · 90 · 100 · 110 % ----------
   Роман 22.10: «надо сделать возможность уменьшать масштаб сайта … чтобы я мог видеть как выглядел бы сайт при увеличении и уменьшении всех пропорций».
   Обычное Cmd ± на этой странице почти ничего не меняет: все размеры — доли ширины окна (--u). zoom на html меняет все пропорции при той же ширине окна.
   Выбор помнит браузер (вместе с пультом). Пульт сам остаётся в 100 %. */
/* только на ПК (≥ 1024 px): на телефоне zoom 110 % даёт прокрутку вбок (15 px на 390), а 80 % — цели касания < 44 px (smoke ночи 16) */
@media (min-width:1024px){
  html[data-zm="80"]{zoom:.8} html[data-zm="90"]{zoom:.9} html[data-zm="110"]{zoom:1.1}
  html[data-zm="80"] #pult{zoom:1.25} html[data-zm="90"] #pult{zoom:1.1111} html[data-zm="110"] #pult{zoom:.90909}
}

/* =====================================================================
   ПРОГОН 17 · S1 (26.10.2026) — §24 масштаб ужимает всё · §25 живой разделитель · §26 коробка или слитно
   ===================================================================== */

/* ---------- 24. Масштаб: «секции во всю ширину тоже ужимаются» (Роман 26.10: «привязаны к краям») ----------
   §23 ставил zoom на html: содержимое (в --u) сжималось, а ширина разделов оставалась во всё окно — фон и плиты «прибиты к краям».
   Теперь при 80/90 % страница — лист шириной 100vw в единицах zoom (= 80/90 % окна), по центру; вокруг та же бумага.
   Так масштаб — честное «отойти на шаг»: все пропорции, включая разделы во всю ширину, меньше на 10–20 %. 110 % — как в §23. */
@media (min-width:1024px){
  html:is([data-zm="80"],[data-zm="90"]) body{width:100vw;margin-inline:auto;overflow-x:clip}
}

/* ---------- 25. Разделитель: живой (Роман 26.10: «вместо золотого ✛ — живой разделитель… крутится»; Вирджиния — механика, не вид; дирижёр: от прокрутки, 360° за ≈ 450 px) ----------
   rh=live — ✛ на всех разгрузках: перед «Направлениями», «Тестами», «Ценами», «Записью»; поворот от прокрутки (system.js пишет --s17-r на обёртку),
   соседние — в разные стороны; при reduced-motion и «Остановить анимацию» стоит. Воздух прежний (§19): знак стоит в нём, шаг почти тот же (+24u). */
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{content:"\271B";display:flex;align-items:center;justify-content:center;
  width:calc(120 * var(--u));height:calc(120 * var(--u));margin:calc(var(--sec) * var(--u)) auto calc(var(--sec) * -1 * var(--u));
  font:400 calc(26 * var(--u))/1 var(--f-head);color:var(--gold);speak:never;transform:rotate(var(--s17-r,0deg));will-change:transform}
@media (max-width:1023.98px){
  html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{width:calc(80 * var(--u));height:calc(80 * var(--u));font-size:calc(20 * var(--u));color:var(--gold-d)}
}
@media (prefers-reduced-motion:reduce){ html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) [data-sec]::before{transform:none!important} }
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 24) * var(--u))}
@media (max-width:1023.98px){
  html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) :is([data-sec="tests"],[data-sec="zapis"]):not([hidden]) > .sec{margin-top:calc((var(--sec) + 16) * var(--u))}
}
/* прежние снятые коробки §19 (строка записи one, тесты split, канал ear/d14) — и при live, как при sheet */
html:is([data-rh="live"],[data-rh="big"],[data-rh="glow"]) [data-sec="quick"][data-key="one"] .zq{background:var(--paper);box-shadow:none;border-radius:0}

/* ---------- 26. Коробка или слитно — «Какой ты студент» и «Между уроками» (пульт bx; Роман 26.10: «не знаю, что лучше») ----------
   bx=as — как сделал раздел (по умолчанию); flat — без заливки, рамок, теней и скруглений, на листе; box — светлая кость, рамка 1 px, мягкая тень.
   Договор для разделов: коробке, которая должна слушаться пульта, дать класс .bx17 (и свои внутренние поля в обоих видах).
   Известные коробки нынешних вариантов: тесты .tt-ty (ночь 16), .d7-box (обе коробки duo17 T2 — пара, слитно обе); канал .pz-box, .nw-club, .nw-soon. Заливка «слитно» — цвет листа, не none (гравюры с multiply). */
html[data-bx="flat"] [data-sec="tests"] :is(.tt-ty,.d7-box,.bx17),
html[data-bx="flat"] [data-sec="channel"] :is(.pz-box,.nw-soon,.nw-club,.bx17){background:var(--paper)!important;background-image:none!important;box-shadow:none!important;border-color:transparent!important;border-radius:0!important;outline:0!important}
html[data-bx="flat"] [data-sec="tests"] :is(.tt-ty,.d7-box,.bx17)::before,html[data-bx="flat"] [data-sec="channel"] :is(.pz-box,.nw-soon,.nw-club,.bx17)::before{background:none!important;box-shadow:none!important}
html[data-bx="box"] [data-sec="tests"] :is(.tt-ty,.d7-box,.bx17),
html[data-bx="box"] [data-sec="channel"] :is(.pz-box,.nw-soon,.nw-club,.bx17){background-color:var(--bone)!important;box-shadow:0 0 0 1px var(--hair),0 calc(14 * var(--u)) calc(36 * var(--u)) rgba(36,38,43,.10)!important;border-radius:calc(var(--r) * var(--u))!important}

/* ---------- 27. Блеклость — системные причины (S1, п. 8; замеры — R17-S1.md «Блеклость») ----------
   1) «Тушь → цвет» у предметов (.tint-host: сова «Вопросов», предметы «Обучения» и «Записи»): на ПК в покое лежит штрих тушью поверх цветной картинки,
      цвет виден только при наведении мыши — на экране это серый рисунок. tn=col (по умолчанию) — сразу в цвете; tn=ink — как в ночи 16.
      Шапка (ангел «тушь → цвет» при прокрутке) — своя механика H2, не трогается.
   2) Плиты §22: краска 86 % по бумаге снимает 20 % насыщенности лазури (C* 27 → 22) и светлит её (L* 29 → 39). pl=p17 — краска 95/96 %
      (C* 26 / 19 — почти как сплошная), фактура остаётся; pl=soft — как в ночи 16; pl=solid — сплошной цвет. Контраст при 95 % только выше. */
html[data-tn="col"] .tint > .tint-line{opacity:0!important;transition:none}
html[data-pl="p17"]{--veil-a:.95;--veil-a-v:.96}

/* ---------- 28. Телефон: прокрутка вбок 2–4 px от листьев у края коробки канала (row17, .r17-leaf) — режем по краю раздела (S1, smoke 26.10) ---------- */
@media (max-width:1023.98px){ [data-sec="channel"] > section{overflow-x:clip} }

/* =====================================================================
   ПРОГОН 18 · S2 (26.10.2026, ночь) — §29 фон страницы · §30 разделитель крупнее · §31 масштаб 110 без прокрутки вбок · §32 фоновые рисунки (слой B3)
   ===================================================================== */

/* ---------- 29. Фон страницы (пульт pg): кость (как сейчас, лист #f7f3ea) | Прогон 18 · белый ----------
   Роман 26.10 вечер: «посмотреть вариант сайта с белым фоном» — сравнить рядом. Меняется только лист (--paper); кость карточек и панелей (--bone) остаётся.
   Риск (Claude): картинки со своим тоном бумаги на белом читаются прямоугольниками-вырезками. */
html[data-pg="white"]{--paper:#ffffff}
html[data-pg="white"] body{background:#ffffff}

/* ---------- 30. Разделитель крупнее (rh=big): тот же живой ✛, в 1,8 раза крупнее; поворот от прокрутки — тот же (system.js) ---------- */
html[data-rh="big"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
  width:calc(180 * var(--u));height:calc(180 * var(--u));font-size:calc(47 * var(--u));
  margin:calc((var(--sec) - 20) * var(--u)) auto calc((var(--sec) + 20) * -1 * var(--u))}
@media (max-width:1023.98px){
  html[data-rh="big"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
    width:calc(120 * var(--u));height:calc(120 * var(--u));font-size:calc(36 * var(--u))}
}

/* ---------- 31. Масштаб 110 % без прокрутки вбок (J17-ux: 1745 px при окне 1710) ---------- */
@media (min-width:1024px){
  html[data-zm="110"]{overflow-x:clip}
  html[data-zm="110"] body{width:calc(100vw / 1.1);overflow-x:clip}
}

/* ---------- 32. Фоновые рисунки (пульт bgl): слой B3 — s0/bg18.css, все его правила под html[data-bgl="on"]; «нет» — слоя нет ---------- */
html[data-bgl="off"] :is(.bg18,[class^="bg18-"],[class*=" bg18-"]){display:none!important}

/* ---------- 33. Разделитель «живее» (rh=glow, записка B3): тот же живой ✛ в золотом сиянии (s0/bg18/star-glow.webp), поворот — тот же; знак в 1,9 раза крупнее live ---------- */
html[data-rh="glow"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
  width:calc(150 * var(--u));height:calc(150 * var(--u));font-size:calc(50 * var(--u));color:var(--gold-d,#a3802f);
  background:url(s0/bg18/star-glow.webp) center/calc(140 * var(--u)) no-repeat;
  margin:calc((var(--sec) - 15) * var(--u)) auto calc((var(--sec) + 15) * -1 * var(--u))}
@media (max-width:1023.98px){
  html[data-rh="glow"] :is([data-sec="courses"],[data-sec="tests"],[data-sec="prices"],[data-sec="zapis"]):not([hidden])::before{
    width:calc(112 * var(--u));height:calc(112 * var(--u));font-size:calc(38 * var(--u));background-size:calc(104 * var(--u))}
}