/* ============================================================
   МШ · сезон 26/27 — дизайн-система «Расписание-плакат»
   Канон: data/tokens.json (не менять без команды Альберта)
   Riso-правило: ч/б слой + один прогон фуксии, фуксия = только интерактив
   ============================================================ */

/* Шрифтовой стек = утверждённый мокап Claude Design (решение Альберта 13.08):
   заголовки Oswald 700, текст Arial/Helvetica, моно ui-monospace.
   Каветка: брендбук называет Stengazeta/Gunterz — их woff2 лежат в fonts/,
   вернуть = раскомментировать блок ниже и переключить --display/--text. */
@font-face{font-family:'Oswald';src:url('fonts/Oswald-500-cyrillic.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-500-latin.woff2') format('woff2');font-weight:500;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-700-cyrillic.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Oswald';src:url('fonts/Oswald-700-latin.woff2') format('woff2');font-weight:700;font-display:swap;unicode-range:U+0000-00FF,U+2000-206F,U+20AC}
/* @font-face{font-family:'Stengazeta';src:url('fonts/Stengazeta-Regular.woff2') format('woff2');font-display:swap}
@font-face{font-family:'Gunterz';src:url('fonts/Gunterz-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Gunterz';src:url('fonts/Gunterz-MediumItalic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap} */

:root{
  --bg:#FDFDFD; --ink:#252525; --accent:#E13F8A;
  --display:'Oswald', 'Arial Narrow', Arial, sans-serif;
  --text:Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --mono:ui-monospace, 'SF Mono', Menlo, monospace;
  --rule:1.5px; --nav-h:64px;
}
*{margin:0;padding:0;box-sizing:border-box;border-radius:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.5}
button{font-family:inherit;color:inherit;background:none;border:none;cursor:pointer;font-size:inherit}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
h1,h2,h3{font-family:var(--display);font-weight:700;text-transform:uppercase;line-height:1}
/* Буква никогда не перекрывает текст (ревизия 2) */
h1,h2,h3{padding-bottom:.12em}
h2{margin-bottom:.3em}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:10px 18px;z-index:200}
.skip-link:focus{left:0}

/* ===== NAVBAR (sticky) ===== */
header.top{position:sticky;top:0;z-index:90;display:flex;align-items:center;gap:32px;padding:0 64px;height:var(--nav-h);border-bottom:var(--rule) solid var(--ink);background:var(--bg)}
/* Знак — фирменный логотип из граф-пакета школы (SVG, цвета = токены #252525/#E13F8A/#FDFDFD),
   а не набранное «МШ»: Катя 17.08 — «логотип не тот, который нужен, он в граф-пакете».
   Фуксия на нём законна по нашему же правилу: знак кликабелен (наверх / на главную). */
.wordmark{display:inline-flex;align-items:center;text-decoration:none;line-height:0;flex:none}
.wordmark img{display:block;height:50px;width:auto}
.wordmark:hover img,.wordmark:focus-visible img{filter:brightness(.85)}
footer .wordmark img{height:88px}
nav.anchors{display:flex;gap:28px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}
nav.anchors a{text-decoration:none;border-bottom:2px solid transparent;padding:4px 0}
.nav-cta-mob{display:none} /* дубль главного действия — только внутри мобильного меню */
/* ПРАВИЛО КЕГЛЯ (аудит style-ops 14.08): фуксия даёт 3.91:1 на фоне и 3.98:1 под белым —
   ниже порога AA (4.5) для мелкого текста и выше порога для крупного (3.0).
   Значит фуксия не носит текст мельче 18.66px/700: на мелком она работает
   подчёркиванием, полосой или заливкой-без-текста, а читает пользователь чернила. */
nav.anchors a:hover{border-bottom-color:var(--accent)}
.nav-cta{margin-left:auto;border:var(--rule) solid var(--ink);background:var(--ink);color:#fff;padding:10px 22px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
.nav-cta:hover{background:var(--bg);color:var(--ink);box-shadow:inset 0 -4px 0 var(--accent)}
.nav-cta:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -4px 0 var(--accent)}
.menu-btn{display:none;margin-left:auto;border:var(--rule) solid var(--ink);padding:8px 14px;font-size:13px;text-transform:uppercase;letter-spacing:.06em}

/* ===== ЭФИРНАЯ СЕТКА (навигатор внимания, ревизии 2–3) ===== */
.page{display:grid;grid-template-columns:180px 1fr}
.efir{grid-column:1}
.efir-inner{position:sticky;top:calc(var(--nav-h) + 24px);padding:24px 0 24px 28px}
.efir-label{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(37,37,37,.55);margin-bottom:14px}
.efir a{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;text-transform:uppercase;letter-spacing:.04em;text-decoration:none;padding:6px 0;white-space:nowrap}
.efir a .n{font-family:var(--mono);font-size:13px}
.efir a .lbl-t{display:none}
.efir a::after{content:'';display:inline-block;width:0;height:2px;background:var(--accent);transition:width .3s}
.efir a.active{font-weight:700}
.efir a.active::after{width:34px}
.efir a:hover::after{width:18px}
main.content{grid-column:2;min-width:0}
/* мобильный прогресс-бар. Фуксия здесь легальна по riso-правилу: полоса — не декор,
   а живая обратная связь на действие пользователя (его скролл, показанный цветом). */
.scroll-progress{display:none;position:fixed;top:0;left:0;height:2px;background:var(--accent);z-index:120;width:0}

/* ===== HERO ===== */
.hero{padding:48px 64px 24px}
.live-pill{position:relative;display:inline-flex;align-items:center;gap:10px;border:var(--rule) solid var(--ink);padding:8px 16px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none;box-shadow:4px 4px 0 0 var(--ink);background:var(--bg)}
.live-pill::before{content:'';position:absolute;inset:-10px} /* расширенная зона наведения: контур и тень тоже «ловят» курсор */
.live-pill .dot{width:10px;height:10px;background:var(--accent);animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(.6)}}
.live-pill:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.live-pill:hover .dot{background:var(--accent)}
.hero h1{font-size:clamp(56px,13vw,168px);margin:24px 0 20px;letter-spacing:.01em;line-height:1.16} /* воздух под брев Й второй строки — не соприкасается с верхней */
.hero h1[data-animate]{min-height:2.1em}
.hero h1.h1-fit{font-size:clamp(64px,15vw,196px)} /* короткое слово-плакат (МЕДИА) — шкала мокапа */
.hero h1 .strike{position:relative;white-space:nowrap}
.hero h1 .strike::after{content:'';position:absolute;left:-2%;top:52%;height:.09em;background:var(--ink);width:0}
.hero h1.play .strike::after{animation:strike .35s .5s forwards}
@keyframes strike{to{width:104%}}
.hero h1 .type{display:inline-block;overflow-x:clip;overflow-y:visible;white-space:nowrap;vertical-align:bottom;max-width:0}
.hero h1.play .type{animation:type .9s steps(11) 1s forwards}
/* Набор открывается до ширины СВОЕГО ТЕКСТА, а не контейнера. Было 100%: на 1440
   строка в контейнер влезала и дефект не всплывал, а на 1024 контейнер 716px
   против 763px набора — последние 47px, то есть ТОЧКА и часть «А», оставались
   под overflow:clip навсегда. Слоган заморожен Куратором, терять его знаки нельзя. */
@keyframes type{to{max-width:max-content}}
.hero h1 .caret{display:none}
.hero h1.play .caret{display:inline-block;width:.52em;height:.09em;margin-left:.08em;background:var(--ink);vertical-align:baseline;animation:caret 1s step-end 1s 3 forwards} /* горизонтальный курсор-подчёркивание, как в мокапе */
/* курсор обязан ГАСНУТЬ после последнего мигания: раньше он оставался статичным
   тире рядом с точкой и читался как опечатка (аудит design-review 14.08) */
@keyframes caret{0%,49%{opacity:1}50%,100%{opacity:0}}
/* первый экран называет предмет, а не только настроение. Правка Кати 14.08:
   строки идут одна под другой, а не сплошным текстом; первая — плашкой-заголовком */
/* GRAFT ревизии 5 Claude Design: две правки клиента сведены в одну конструкцию —
   курсы стали строками эфирного журнала, действие приколото к концу строки */
.hero-sub{margin:0 0 24px;max-width:1100px}
.hs-lead{font-family:var(--display);font-weight:700;font-size:clamp(22px,2.4vw,30px);text-transform:uppercase;line-height:1.1;padding-bottom:10px;border-bottom:var(--rule) solid var(--ink)}
.hs-rows{border-bottom:var(--rule) solid var(--ink)}
.hs-row{display:flex;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid rgba(37,37,37,.18)}
.hs-row:last-child{border-bottom:none}
.hs-row .n{font-family:var(--mono);font-size:12px;color:rgba(37,37,37,.55);flex:none}
.hs-txt{font-size:19px;line-height:1.35;flex:1}
.hs-act{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;flex:none;border-bottom:2px solid var(--ink);padding-bottom:3px}
.hs-act:hover{border-bottom-color:var(--accent)}
/* две кнопки под описанием курса — «получить программу обучения» (правка Кати) */
/* действия карточки курса — один столбец во всю ширину карточки.
   Было: flex-ряд с переносом. Две кнопки давали 193+12+298=503px при 502px
   доступных и срывались в столбик рваной ширины (три разные ширины на две
   карточки). Теперь ширина одна, левый край один. */
.c-actions{margin-top:auto;display:grid;gap:10px;padding-top:14px}
/* программы на ТВ, где снимаются ученики */
.tv-k{margin-top:28px}
/* GRAFT ревизии 5: эфирный журнал вместо пяти равных клеток — полоса во всю ширину,
   моно-индекс, крупное название, справа источник и действие; кликается вся полоса */
.tvlist{list-style:none;border-top:var(--rule) solid var(--ink);max-width:1200px}
.tvlist li{border-bottom:var(--rule) solid var(--ink)}
.tvlist a{display:flex;align-items:baseline;gap:24px;padding:16px 4px;text-decoration:none}
.tvlist a:hover{background:rgba(37,37,37,.05)}
.tvlist .n{font-family:var(--mono);font-size:12px;color:rgba(37,37,37,.55);flex:none;width:24px}
.tv-name{font-family:var(--display);font-weight:700;font-size:clamp(20px,2.6vw,40px);text-transform:uppercase;line-height:1.05;flex:1}
.tv-src{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(37,37,37,.6);flex:none}
.tv-go{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;flex:none;border-bottom:2px solid var(--ink);padding-bottom:3px}
.tvlist a:hover .tv-go{border-bottom-color:var(--accent)}
.tv-old{display:block;font-family:var(--text);font-weight:400;font-size:12px;text-transform:none;letter-spacing:0;color:rgba(37,37,37,.6);margin-top:4px}
.badges{display:flex;flex-wrap:wrap;gap:0;border:var(--rule) solid var(--ink);width:max-content;max-width:100%}
.badges span{padding:8px 18px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;border-right:var(--rule) solid var(--ink)}
.badges span:last-child{border-right:none}

/* ===== SECTIONS ===== */
section.strip{padding:40px 64px;border-top:var(--rule) solid var(--ink)}
/* якорный переход не должен прятать шапку секции под липкий навбар */
section[id],.hero[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(37,37,37,.55);margin-bottom:8px}
.strip h2{font-size:clamp(28px,4.6vw,56px)}

/* ===== CALENDAR ===== */
.cal-head{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:20px}
.months{display:flex;border:var(--rule) solid var(--ink)}
.months button{padding:10px 18px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;border-right:var(--rule) solid var(--ink)}
.months button:last-child{border-right:none}
.months button[aria-pressed="true"]{background:var(--ink);color:#fff}
.months button:not([aria-pressed="true"]):hover{box-shadow:inset 0 -4px 0 var(--accent)}
.legend{display:flex;gap:24px;margin:0 0 16px;flex-wrap:wrap}
/* фильтры обязаны выглядеть нажимаемыми БЕЗ наведения (на телефоне ховера нет),
   а выключенное состояние — оставаться читаемым: раньше это была прозрачность .35,
   то есть текст уходил примерно в 2:1 (аудит design-review 14.08) */
.legend button{display:flex;align-items:center;gap:10px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;padding:8px 14px;border:var(--rule) solid var(--ink);background:var(--bg)}
.legend .sw{width:18px;height:18px;border:var(--rule) solid var(--ink)}
.legend .sw.ev{background:var(--accent)} .legend .sw.ls{background:var(--ink)}
.legend button[aria-pressed="false"]{border-style:dashed}
.legend button[aria-pressed="false"] .sw{background:transparent}
.legend button:hover{box-shadow:inset 0 -4px 0 var(--accent)}
.legend .lg-s{display:none}
table.grid{width:100%;border-collapse:collapse;table-layout:fixed}
.grid th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;font-weight:500;border:var(--rule) solid var(--ink);padding:10px 8px;text-align:left}
.grid td{border:var(--rule) solid var(--ink);vertical-align:top;height:118px;padding:0;position:relative}
.grid td.out{background:repeating-linear-gradient(45deg,transparent 0 7px,rgba(37,37,37,.05) 7px 8px)}
.daynum{font-weight:700;font-family:var(--display);font-size:clamp(20px,2.2vw,34px);padding:8px 10px 0;display:block}
.cellbtn{display:block;width:100%;height:100%;text-align:left;padding:0 0 8px}
.cellbtn:hover .daynum,.cellbtn:focus-visible .daynum{color:var(--accent)}
.start-tag{position:absolute;top:10px;right:10px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;border:1px solid rgba(37,37,37,.4);color:rgba(37,37,37,.6);padding:2px 6px}
/* кегль плашки события — clamp: «СКЛЕЙКА.СВОП» в декабре не помещался в ячейку
   и не читался (правка Кати 14.08); длинное имя теперь переносится, а не режется */
.ev-tile{background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:clamp(19px,1.4vw,20px);line-height:1.05;text-transform:uppercase;padding:8px 10px;margin:6px 6px 0;display:block;letter-spacing:-.01em}
.cellbtn:hover .ev-tile{background:var(--ink)}
/* ПЕРЕВЕС ВНУТРИ ЯЧЕЙКИ — решение lock-c93439114a от 16.08.
   Измерено до правки: съёмки несли 92 702 кв. px чернил, занятия — ноль. Одиннадцать
   съёмок в сентябре перевешивали воскресные занятия, которые школа и продаёт.
   Заливка переезжает на занятия, съёмка становится контурной плашкой с буквой проекта.
   Съёмки ОСТАЮТСЯ В ДАТАХ сетки — вынос во вторую полосу запрещён решением:
   Катя просила показывать их «как например мероприятия ты указываешь по субботам». */
.tv-tile{background:transparent;color:var(--ink);border:var(--rule) solid var(--ink);font-family:var(--display);font-weight:700;font-size:clamp(14px,1.1vw,17px);line-height:1.05;text-transform:uppercase;padding:7px 9px;margin:6px 6px 0;display:block;letter-spacing:-.01em}
.tv-mark{display:inline-block;background:var(--ink);color:var(--bg);font-style:normal;font-size:.86em;line-height:1;padding:3px 5px;margin-right:5px;vertical-align:baseline}
.cellbtn:hover .tv-tile{background:var(--accent);border-color:var(--accent);color:#fff}
.cellbtn:hover .tv-mark{background:#fff;color:var(--accent)}
/* время под плашкой чернилами: внутри фуксии мелкая строка давала 3.98 при норме 4.5
   (поймано собственным аудитом genome). Белое на чернилах внутри ТВ-плашки — 15.3, там можно */
.ev-t{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.04em;padding:3px 10px 0;margin:0 8px}
.tv-tile .ev-t{color:var(--ink);padding:4px 0 0;margin:0}
.cellbtn:hover .tv-tile .ev-t{color:#fff}

/* Занятия получают чернила. Внутренние светлые полосы сверху и снизу обязательны:
   на пробе четыре воскресенья подряд слились в одну непрерывную колонку, дни 6/13/20/27
   перестали читаться раздельно — это записано в решении как downstream-ограничение. */
.grid td:has(.ls-row) .cellbtn{
  background:var(--ink);color:var(--bg);
  box-shadow:inset 0 5px 0 var(--bg), inset 0 -5px 0 var(--bg);
}
.grid td:has(.ls-row) .daynum{color:var(--bg)}
.grid td:has(.ls-row) .cellbtn:hover .daynum,
.grid td:has(.ls-row) .cellbtn:focus-visible .daynum{color:var(--accent)}
.grid td:has(.ls-row) .ls-row .t{color:var(--bg);opacity:.72}
/* «СТАРТ» 6.09 стоит на воскресенье с занятиями — то есть на чернильной ячейке.
   После рестайла 16.08 метка осталась тёмно-серой по тёмному (регресс, пойман аудитом
   17.08: контраст ≠ 0). На чернилах метка светлая. */
.grid td:has(.ls-row) .start-tag{border-color:rgba(253,253,253,.55);color:rgba(253,253,253,.85)}
.legend .sw.tv{background:var(--ink);position:relative}
.legend .sw.tv::after{content:'';position:absolute;inset:4px;border:1.5px solid var(--bg)}
.ls-row{font-size:11px;letter-spacing:0;text-transform:uppercase;padding:2px 8px 0;display:flex;gap:6px;white-space:nowrap;overflow:hidden}
.ls-row .t{font-family:var(--mono);font-size:10.5px}
/* Ниже 1280 колонка сетки становится уже строки урока, и «13‑16» — возраст группы,
   то самое, что родитель в расписании и ищет — просто срезался. Замер до правки:
   1280 чисто · 1200 обрезано 12 строк из 15 · с 1100 и ниже обрезаны все 15,
   худший вылет 44px на 768. Геном-аудит этого не ловил: его схема про цвет и
   контраст, а не про обрезку — молчание инструмента не значит, что дефекта нет.
   Переносим строку, а не режем: время остаётся первым, курс и возраст уходят
   на вторую строку, неразрывный дефис держит «13‑16» целым. */
@media (max-width:1279px){
  .ls-row{white-space:normal;flex-wrap:wrap;overflow:visible;row-gap:0}
  /* Плашка события держала 19px на любой ширине: clamp(19px,1.4vw,20px) — нижняя
     граница равна рабочему кеглю, сжиматься некуда. Поэтому даже «ЛЕТУЧКА» (одно
     слово, ломать негде) просила 82px в плашке 79px, а «КИНОКЛУБ» — 98px.
     Замер до правки: переполнение в ЧЕТЫРЁХ месяцах из четырёх на 768 и в трёх на 1024. */
  /* Кегль плашки НЕ опускаем: белый по фуксии даёт 3.98:1, а ниже 18.66px/700
     норма AA становится 4.5 — tokens.json это прямо запрещает. Пробовал 13px,
     собственный геном-аудит поймал 4 нарушения контраста и был прав.
     Значит вместимость берём полями и переносом, а не кеглем. */
  /* Ширину плашке возвращаем полями, а не кеглем. Замер на 768 по всем четырём
     месяцам, слов с переносом: поля 6/10 → 11 · 4/8 → 9 · 2/6 → 4 · 0/6 → 4.
     Берём 2/6: «ЛЕТУЧКА» и «СКЛЕЙКА.» встают целиком, остаются «КИНОКЛУБ» и
     «ПРОЕКТНАЯ» — оба ломаются по естественному шву («КИНО-КЛУБ», «ПРОЕКТ-НАЯ»).
     В ноль не уводим: плашка должна отставать от линейки сетки, иначе теряется
     ощущение наклеенного элемента. */
  td .ev-tile,td .tv-tile{margin:6px 2px 0;padding:8px 6px}
}
/* Последний рубеж для слова, которое не влезает даже целой строкой: «ЛАБОРАТОРИЯ»
   на 14px просит 95px в плашке 79px, ломать её больше негде. break-word (НЕ anywhere)
   рвёт слово только когда оно не помещается в строку одно — короткие имена
   («ЛЕТУЧКА», «КИНОКЛУБ») он не трогает, поэтому возражение графта ревизии 5
   к overflow-wrap здесь не срабатывает. Текст, вылезший из плашки на границу
   ячейки, читается как поломка; перенос — нет. */
@media (max-width:1279px){
  /* hyphens идёт ПЕРЕД break-word: если слово всё-таки не влезает, пусть его
     сначала попробуют перенести по слогам (html lang="ru", словарь у движка есть),
     и только если и это не вышло — рубить. Здесь это страховка: ниже 1024
     работает «корешок», и переносить уже почти нечего. */
  .ev-tile,.tv-tile{hyphens:auto;overflow-wrap:break-word}
}
/* «КОРЕШОК» (ход Claude Design, узел 1a). Плашка события встаёт вертикально,
   как корешок кассеты: слово ограничено ВЫСОТОЙ ячейки (~135–225px), а не её
   шириной (91px). Раньше я лечил тесноту переносом по слогам — но «КИНО-КЛУБ»
   перестаёт работать как афиша, то есть платой шла ровно та плакатность, ради
   которой всё и делается; а короткое имя вместо полного — потеря информации.
   Дефицит был 7px по горизонтали при профиците ~100px по вертикали, поворот
   на 90° конвертирует одно в другое. Честная цена хода: ряд событий выше.
   Кегль остаётся 19px, то есть правило кегля фуксии не нарушено. */
@media (max-width:1023px){
  td:has(.ev-tile) .cellbtn{padding-right:34px}
  td .ev-tile{
    position:absolute;top:6px;right:6px;bottom:6px;margin:0;
    writing-mode:vertical-rl;transform:rotate(180deg);
    display:flex;align-items:flex-start;
    padding:8px 6px;hyphens:none;overflow-wrap:normal;
    /* корешок обязан быть В ОДНУ колонку: «ПРОЕКТНАЯ СТУДИЯ» разъезжалась на две
       (52px вместо 32px) и накрывала время — «17:00–18:30» срезалось до «17 / 18».
       Перенос из разметки (tileTitle ставит <br> для горизонтальной плашки) здесь
       гасим, ширина полосы становится постоянной и padding-right под неё точен. */
    white-space:nowrap;
  }
  td .ev-tile br{display:none}
  /* корешок занимает 38px справа; собственные поля времени (10px padding + 8px
     margin с каждой стороны) съедали остаток, и «17:00–18:00» переполнялось
     52px в 41px. Слева времени места достаточно, вертикали в ячейке с запасом. */
  td:has(.ev-tile) .cellbtn{padding-right:40px}
  td .ev-t{padding:3px 0 0;margin:0 0 0 10px}
  /* Страховка на браузеры без :has() (Firefox до 121): без него ячейка с
     событием не резервирует полосу и корешок наезжает на время. Тогда отступ
     ставим ВСЕМ ячейкам — воскресные строки занятий станут чуть уже, зато
     ничего не перекрывается. */
  @supports not selector(:has(*)){
    td .cellbtn{padding-right:40px}
  }
}
.fin{font-weight:700;font-family:var(--display);font-size:15px;text-transform:uppercase;padding:6px 10px 0;display:block}
.fin::before{content:'★ '}
.today-mark{position:absolute;top:8px;right:10px;display:flex;align-items:center;gap:6px;font-size:10px;letter-spacing:.08em;text-transform:uppercase}
.today-mark .dot{width:8px;height:8px;background:var(--accent);animation:pulse 1.6s infinite}
.agenda{display:none}

/* ===== POPOVER «мини-монтажный стол» ===== */
.ovl{position:fixed;inset:0;background:rgba(37,37,37,.55);display:none;align-items:center;justify-content:center;padding:20px;z-index:150}
.ovl.open{display:flex}
.card{background:var(--bg);border:var(--rule) solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);max-width:460px;width:100%;position:relative;max-height:92vh;overflow:auto}
/* Место под фото до съёмки 16.08 — ракорд, а не полосатая заглушка: серые полосы
   читались как битая картинка, а белая подпись поверх них давала ~1.4:1
   (аудит design-review, второй проход 14.08). Язык тот же, что у карточки педагога. */
.card .photo{height:150px;background:#2b2b2b;position:relative;display:block}
.card .photo .frame{display:none}
.card .photo::after{content:'';position:absolute;top:50%;left:50%;width:62px;height:62px;transform:translate(-50%,-50%);border:var(--rule) solid #8d8d8d;border-radius:50%;
  background:linear-gradient(#8d8d8d,#8d8d8d) center/1.5px 100% no-repeat,linear-gradient(#8d8d8d,#8d8d8d) center/100% 1.5px no-repeat}
.card .photo-label{position:absolute;top:14px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#c9c9c9;border:1px solid rgba(255,255,255,.32);padding:3px 7px}
.card .inner{padding:18px 20px 22px}
.card h3{font-weight:700;font-size:30px;margin-bottom:10px}
.meta{display:flex;border:var(--rule) solid var(--ink);width:max-content;max-width:100%;margin-bottom:12px;flex-wrap:wrap}
.meta span{font-family:var(--mono);font-size:13px;padding:6px 12px;border-right:var(--rule) solid var(--ink);white-space:nowrap}
.meta span:last-child{border-right:none}
.card .desc{font-size:15px;margin-bottom:8px}
.card ul.slots{list-style:none;margin:0 0 8px}
.card ul.slots li{display:flex;gap:12px;font-size:14px;padding:5px 0;border-bottom:1px solid rgba(37,37,37,.18)}
.card ul.slots li .t{font-family:var(--mono);font-size:13px;min-width:112px}
.tape-cta{font-weight:700;display:inline-block;background:var(--accent);color:#fff;font-family:var(--display);font-size:22px;text-transform:uppercase;text-decoration:none;padding:10px 26px;transform:rotate(-2deg);margin-top:12px;position:relative}
.tape-cta::before,.tape-cta::after{content:'';position:absolute;top:0;bottom:0;width:12px;background:inherit;opacity:.55}
.tape-cta::before{left:-12px;clip-path:polygon(100% 0,0 18%,100% 38%,10% 55%,100% 74%,0 92%,100% 100%)}
.tape-cta::after{right:-12px;clip-path:polygon(0 0,100% 14%,0 34%,90% 52%,0 70%,100% 88%,0 100%)}
.tape-cta:hover{background:var(--ink)}
.card .close{position:absolute;top:8px;right:8px;width:40px;height:40px;font-size:22px;line-height:1;background:var(--bg);border:var(--rule) solid var(--ink);z-index:2}
.card .close:hover{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:inset 0 -4px 0 var(--accent)}

/* ===== КУРСЫ + ЧТО ДАЁМ (контент-док Кати) ===== */
.courses{display:grid;grid-template-columns:1fr 1fr;border:var(--rule) solid var(--ink);max-width:1100px}
.course{padding:24px;border-right:var(--rule) solid var(--ink);display:flex;flex-direction:column}
.course:last-child{border-right:none}
.course h3{font-size:clamp(26px,3.2vw,44px);margin-bottom:2px}
.c-age{font-family:var(--mono);font-size:13px;color:rgba(37,37,37,.62);margin-bottom:14px}
.course > p{font-size:16px;margin-bottom:16px;max-width:46ch}
.c-who{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.course ul{list-style:none;margin-bottom:18px}
.course li{font-size:15px;line-height:1.4;padding:7px 0 7px 20px;position:relative;border-bottom:1px solid rgba(37,37,37,.18)}
.course li::before{content:'—';position:absolute;left:0}
.course li:last-child{border-bottom:none}
/* прижим к низу живёт на контейнере .c-actions, а не на каждой кнопке:
   иначе одинокая кнопка правой карточки вставала на уровень ВТОРОЙ кнопки левой,
   и над ней зияла дыра в высоту кнопки */
.course .btn-outline{text-align:center}
.gives-k{margin-top:30px}
.gives{list-style:none;border:var(--rule) solid var(--ink);max-width:1100px;counter-reset:g}
.gives li{font-size:16px;padding:12px 20px;border-bottom:var(--rule) solid var(--ink);display:flex;gap:16px;align-items:baseline}
.gives li:last-child{border-bottom:none}
.gives li::before{counter-increment:g;content:counter(g,decimal-leading-zero);font-family:var(--mono);font-size:12px;color:rgba(37,37,37,.55);flex:none}

/* выпускники — под блоком доверия */
.alumni{display:grid;grid-template-columns:2fr 1fr 1fr;border:var(--rule) solid var(--ink);max-width:1200px;margin-top:28px}
.al{padding:18px 20px;border-right:var(--rule) solid var(--ink)}
.al:last-child{border-right:none}
.al .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(37,37,37,.55);display:block}
.al p{font-size:15px;line-height:1.45;margin-top:8px}

/* ===== ЦЕНЫ ===== */
/* GRAFT ревизии 5: не карточки, а строки бухгалтерской книги. Клиент вычеркнула
   описания и время — интерес держит контраст масштаба и линейка, а не текст. */
/* сетка живёт на КОНТЕЙНЕРЕ, строки берут её через subgrid: иначе каждая строка
   считает треки сама, и колонки двух цен разъезжались на 23px («8 000» уже,
   чем «11 000»), то есть сопоставить курс с курсом глазом было нельзя */
.prices{border-top:var(--rule) solid var(--ink);max-width:1200px;display:grid;grid-template-columns:24px minmax(210px,max-content) minmax(0,1.4fr) minmax(0,1fr) auto}
/* ЦЕНА КАК СТРОКА СЕТКИ (ход Claude Design, узел 2a). Курс и возраст лежали в
   одной свободной строке, поэтому две цены не сопоставлялись: у первой курс
   короткий, у второй длинная фраза, возрасты вставали на разных отметках.
   Развожу по колонкам — разница читается геометрией, а не прозой; ни одного
   нового слова, оба поля клиент назвала сама.
   Его довод, который я принял: «„минимум информации“ ты понял как вычитание,
   а клиент имела в виду отсутствие воды. В точке решения родитель выбирает не
   сумму, а вариант — и ты отправляешь его скроллить назад за описанием». */
.price{display:grid;grid-column:1/-1;grid-template-columns:subgrid;align-items:baseline;gap:28px;padding:20px 4px;border-bottom:var(--rule) solid var(--ink)}
.price .age{font-size:13px;text-transform:uppercase;letter-spacing:.06em;line-height:1.4;color:rgba(37,37,37,.72)}
/* Страховка на браузеры без subgrid (Chrome до 117, Safari до 16): без него
   grid-template-columns:subgrid невалиден, строка схлопнулась бы в одну колонку
   и цена с курсом встали бы друг под другом. Возвращаем прежний ряд — колонки
   не совпадут по вертикали, но строка читается. */
@supports not (grid-template-columns: subgrid){
  .prices{display:block}
  .price{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 24px}
  .price .who,.price .age{flex:0 1 auto}
  .price .btn-outline{margin-left:auto}
}
.price .n{font-family:var(--mono);font-size:12px;color:rgba(37,37,37,.55);flex:none;width:24px}
.price .num{font-weight:700;font-family:var(--display);font-size:clamp(40px,6.4vw,104px);line-height:.95;flex:none}
.price .num .per{font-size:.34em;letter-spacing:.02em}
.price .who{font-size:13px;text-transform:uppercase;letter-spacing:.06em;flex:1;line-height:1.4}
.price .btn-outline{flex:none;align-self:center}
.btn-outline{display:inline-block;border:var(--rule) solid var(--ink);padding:10px 22px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;text-decoration:none}
/* ВТОРОЙ РАНГ — масса чернил, а не рамка (разбор Claude Design, узел 1a).
   Обводка 13px это ранг «сноска», и она была назначена всем шести призывам сразу:
   до 6200px страницы ни одно действие не весило больше соседнего текста.
   Вес даём чернилами, а не второй краской — белое на чернилах 15.33:1, фуксии
   не прибавилось ни капли, правило кегля фуксии не задето. Первый ранг остаётся
   один и там же, где был: скотч-кнопка в форме. Ранг получает САМО действие
   записи; «получить программу» и «о курсе подробно» остаются обводкой. */
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--bg);color:var(--ink);box-shadow:inset 0 -4px 0 var(--accent)}
.btn-outline:hover{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:inset 0 -4px 0 var(--accent)}
.pr-note{font-size:14px;margin-top:12px;max-width:980px}

/* ===== ДОВЕРИЕ + ОТЗЫВЫ ===== */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border:var(--rule) solid var(--ink);max-width:1200px}
.trust .cell{padding:16px 20px;border-right:var(--rule) solid var(--ink)}
.trust .cell:last-child{border-right:none}
.trust .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(37,37,37,.55);display:block;margin-bottom:6px}
.trust .val{font-weight:700;font-family:var(--display);font-size:clamp(18px,1.8vw,26px);text-transform:uppercase;line-height:1.05}
.trust a.val{text-decoration:none}
.trust a.val:hover{color:var(--accent)}
.nowrap{white-space:nowrap}
/* ===== ЛЕНТА ОТЗЫВОВ — бесконечная плёнка =====
   Дорожка содержит два одинаковых набора карточек и едет ровно на половину своей
   ширины: в момент возврата второй набор стоит там же, где стоял первый, поэтому
   шва не видно. Ведёт себя как плёнка: жёсткие обрезы по краям, общие линейки,
   никаких точек-пагинаций. Наведение и фокус останавливают ход. */
.rev-marquee{margin-top:28px;overflow:hidden;border-top:var(--rule) solid var(--ink);border-bottom:var(--rule) solid var(--ink)}
.rev-track{display:flex;align-items:stretch;width:max-content;animation:revscroll 64s linear infinite}
.rev-copy{display:flex;align-items:stretch}
.rev-marquee:hover .rev-track,.rev-marquee:focus-within .rev-track{animation-play-state:paused}
@keyframes revscroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* подпись прижата к низу: у карточек общая высота, и без этого имена авторов
   висели на разной высоте — полоса рассыпалась вместо ровной линии слугов */
.rev-track .review{flex:0 0 clamp(280px,24vw,360px);padding:22px 24px;border-right:var(--rule) solid var(--ink);border-bottom:none;display:flex;flex-direction:column}
.rev-track .review .who{margin-top:auto}
.rev-track .review blockquote{font-size:17px;line-height:1.45;margin-bottom:12px}
.reviews{display:grid;grid-template-columns:1fr 1fr;gap:0;border:var(--rule) solid var(--ink);max-width:1200px;margin-top:28px}
.review{padding:22px 24px;border-right:var(--rule) solid var(--ink)}
.review:last-child{border-right:none}
.review blockquote{font-size:17px;line-height:1.45;margin-bottom:12px}
.review .who{font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:rgba(37,37,37,.6)}

/* ===== ЛИЦА МШ (команда) =====
   Плёночный кадр: ч/б фото + ксерокс-зерно, чернильный скотч держит кадр.
   Карточка не кликабельна → фуксии здесь нет. */
/* Ответ Кате 16.08 на «это будут пустые квадратики?»: нет. Сетка перестала быть жёсткой
   решёткой — неполный последний ряд ЦЕНТРИРУЕТСЯ, а не висит слева. При девяти педагогах
   было 4+4+1 с сиротой у левого края; стало 4+4+1 по центру. Работает на любом числе
   карточек: клиент сказал, что состав ещё растёт.
   Эпсилон в basis — страховка от субпиксельного округления: без него четвёртая карточка
   изредка срывалась на следующую строку. */
.team{display:flex;flex-wrap:wrap;justify-content:center;gap:44px 38px;max-width:1200px}
.team > .tm{flex:0 1 calc((100% - 3 * 38px) / 4 - 0.5px)}
.team-2{grid-template-columns:repeat(2,1fr);max-width:660px}
.tm{margin:0}
/* плёночная рамка вокруг кадра (GRAFT из мокапа ревизии 4) — не занимает поток, поэтому зазор сетки увеличен */
.tm-shot{position:relative;aspect-ratio:4/5;background:#2b2b2b;overflow:hidden;outline:var(--rule) solid var(--ink);outline-offset:9px}
.tm-shot img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06)}
/* ксерокс-зерно — только внутри фотографии, фон остаётся стерильным */
.tm-shot::after{content:'';position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.3;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.55'/></svg>")}
/* скотч, который держит кадр */
.tm-shot::before{content:'';position:absolute;z-index:2;top:-9px;left:14px;width:74px;height:22px;background:rgba(37,37,37,.82);transform:rotate(-6deg)}
.tm-name{position:absolute;z-index:3;left:0;right:0;bottom:0;background:var(--ink);color:#fff;font-family:var(--display);font-weight:700;font-size:19px;line-height:1.15;text-transform:uppercase;padding:9px 12px}
.tm-role{font-size:13px;line-height:1.35;text-transform:uppercase;letter-spacing:.06em;padding:10px 2px 0;color:rgba(37,37,37,.78)}
/* ракорд вместо ещё не снятого портрета */
.tm-soon{display:flex;align-items:center;justify-content:center}
/* единственный радиус на сайте: перекрестье ракорда — графический знак, а не поверхность,
   поэтому token surface.radius:0 на него не распространяется (аудит style-ops 14.08) */
.tm-soon .tm-cross{position:absolute;top:50%;left:50%;width:78px;height:78px;transform:translate(-50%,-58%);
  background:linear-gradient(#8d8d8d,#8d8d8d) center/1.5px 100% no-repeat,linear-gradient(#8d8d8d,#8d8d8d) center/100% 1.5px no-repeat;
  border:1.5px solid #8d8d8d;border-radius:50%}
.tm-soon .tm-tag{position:absolute;top:16px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:#c9c9c9;border:1px solid rgba(255,255,255,.35);padding:3px 7px}

/* ===== ЗАПИСЬ ===== */
.cta-final{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:32px}
.cta-final h2{font-size:clamp(32px,5vw,72px);margin:0}
.lead{border:var(--rule) solid var(--ink);padding:28px;max-width:980px}
.lead-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field label{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.field input{width:100%;font-family:var(--text);font-size:17px;padding:12px 14px;min-height:48px;background:var(--bg);color:var(--ink);border:var(--rule) solid var(--ink)}
/* телефон моноширинным — язык таймкодов школы + меньше ошибок ввода (GRAFT из мокапа) */
.field input[type=tel]{font-family:var(--mono);font-size:17px}
.hint{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:rgba(37,37,37,.6);margin-top:8px}
.field input::placeholder{color:rgba(37,37,37,.38)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1.5px var(--accent)}
.field input[aria-invalid="true"]{border-style:dashed}
.err{font-size:13px;margin-top:6px;padding-left:14px;position:relative}
.err::before{content:'!';position:absolute;left:0;font-family:var(--mono);font-weight:700}
.chips{border:none;margin-top:22px}
.chips legend{font-size:13px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px;padding:0}
.chip-row{display:flex;flex-wrap:wrap;gap:0;border:var(--rule) solid var(--ink);width:max-content;max-width:100%}
.chip{position:relative;border-right:var(--rule) solid var(--ink)}
.chip:last-child{border-right:none}
.chip input{position:absolute;opacity:0;width:100%;height:100%;left:0;top:0;margin:0;cursor:pointer}
.chip span{display:block;font-family:var(--display);font-weight:700;font-size:19px;text-transform:uppercase;padding:11px 20px;min-height:48px;line-height:26px}
.chip:hover span{color:var(--accent)}
/* выбранная плашка кликабельна и активна → фуксия законна */
.chip input:checked + span{background:var(--accent);color:#fff}
.chip input:focus-visible + span{outline:3px solid var(--accent);outline-offset:2px}
.consent{display:flex;gap:12px;align-items:flex-start;margin-top:24px;max-width:640px;font-size:15px;cursor:pointer}
.consent input{width:22px;height:22px;margin-top:2px;flex:none;accent-color:var(--accent)}
.lead button[type=submit]{margin-top:26px;border:none;font-family:var(--display)}
.lead-note{font-size:13px;color:rgba(37,37,37,.62);margin-top:16px;max-width:640px}
.lead-done{border:var(--rule) solid var(--ink);box-shadow:8px 8px 0 0 var(--ink);padding:28px;max-width:980px}
/* фокус переводим программно для скринридера, но кольцо не рисуем: пользователь
   сюда не переходил табом, а 3px фуксии вокруг всей панели читались как ошибка */
.lead-done:focus,.lead-done:focus-visible{outline:none}
.lead-done h3{font-size:clamp(26px,3.4vw,40px);margin-bottom:14px}
.done-sum{font-family:var(--mono);font-size:14px;line-height:1.7;white-space:pre-wrap;border-left:var(--rule) solid var(--ink);padding:4px 0 4px 16px;margin-bottom:22px}
.done-actions{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.done-actions .tape-cta{margin-top:0}
.done-actions .btn-outline{min-height:48px;display:inline-flex;align-items:center}

/* ===== FOOTER ===== */
footer{padding:28px 64px;border-top:var(--rule) solid var(--ink);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
footer .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(37,37,37,.55);display:block;margin-bottom:8px}
footer p,footer li{font-size:15px;line-height:1.6}
footer ul{list-style:none}
.foot-line{grid-column:1 / -1;border-top:1px solid rgba(37,37,37,.25);padding-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}

/* ===== FAQ (страница курса) ===== */
.faq{max-width:980px}
.faq details{border-bottom:var(--rule) solid var(--ink)}
.faq details:first-child{border-top:var(--rule) solid var(--ink)}
/* нижняя граница клампа 19px, а не 18: на 390 фуксиевый ховер при 18px/700 уходил
   в «мелкий текст» по WCAG (нужно 4.5), а с 19px попадает в крупный (3.0) */
.faq summary{font-weight:700;display:flex;gap:18px;align-items:baseline;padding:16px 4px;cursor:pointer;font-family:var(--display);font-size:clamp(19px,2vw,26px);text-transform:uppercase;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary .n{font-family:var(--mono);font-size:13px}
.faq summary::after{content:'+';margin-left:auto;font-family:var(--mono)}
.faq details[open] summary::after{content:'–'}
.faq summary:hover{color:var(--accent)}
.faq .a{padding:0 4px 18px;max-width:760px;font-size:16px}

/* ===== КУРС: группы/модули ===== */
.rows{border:var(--rule) solid var(--ink);max-width:1100px}
.row{display:grid;grid-template-columns:120px 1fr 2fr;gap:16px;padding:14px 20px;border-bottom:var(--rule) solid var(--ink);align-items:baseline}
.row:last-child{border-bottom:none}
.row .t{font-family:var(--mono);font-size:14px;white-space:nowrap}
.row .g{font-weight:700;font-family:var(--display);font-size:clamp(18px,2vw,26px);text-transform:uppercase}
.row .d{font-size:15px}

/* ===== ПЛАНШЕТ 768–1023 ===== */
@media (max-width:1023px){
  .page{grid-template-columns:56px 1fr}
  /* пять ячеек доверия на планшете — 3+2, третья и пятая без правой линейки */
  /* сетка 2×2: с 22.08 фактов четыре, ряды «3+2» под пять ячеек больше не сходятся */
  .trust{grid-template-columns:repeat(2,1fr)}
  .trust .cell{border-bottom:var(--rule) solid var(--ink)}
  .trust .cell:nth-child(2n),.trust .cell:last-child{border-right:none}
  .trust .cell:nth-last-child(-n+2){border-bottom:none}
  .efir-inner{padding-left:16px}
  .efir-label{display:none}
  .efir a{gap:0}
  .efir a .lbl-d{display:none}
  .efir a{position:relative}
  .efir a .lbl-t{display:block;position:absolute;left:40px;top:4px;opacity:0;pointer-events:none;background:var(--bg);padding:2px 8px;border:1px solid var(--ink);font-size:12px;white-space:nowrap;z-index:5}
  /* Всплывающая подпись висела постоянно у активного пункта и ложилась ПОВЕРХ
     контентной колонки — в одном кадре накрыла заголовок «СЕНТЯБРЬ 2026», в другом
     ячейку календаря (замер: z-index 5 над td). Календарь закрывать нечем не
     оправдано. Теперь подпись показывается только по наведению и с клавиатуры,
     а «вы здесь» держит сам рельс: номер жирнеет, под ним фуксиевая черта.
     Фуксия тут — черта, а не текст: на 12px она текст носить не имеет права
     (3.91:1 при норме 4.5), это правило кегля из tokens.json. */
  .efir a.active .lbl-t{opacity:0}
  .efir a:hover .lbl-t,.efir a:focus-visible .lbl-t{opacity:1}
  .efir a{flex-direction:column;align-items:flex-start;gap:3px}
  .efir a::after{display:block;width:0}
  .efir a.active::after{width:20px}
  .efir a:hover::after{width:12px}
  .efir a .n{font-size:12px;padding:4px 0}
  /* 5 пунктов навигации на планшете не помещались и рвали шапку на две строки */
  header.top{padding:0 32px;gap:20px}
  nav.anchors{gap:16px;font-size:12px;white-space:nowrap}
  .nav-cta{padding:10px 16px;font-size:12px;white-space:nowrap}
  .hero,section.strip{padding-left:32px;padding-right:32px}
  footer{padding:28px 32px;grid-template-columns:1fr 1fr}
  .team{gap:26px 20px}
  .team > .tm{flex-basis:calc((100% - 2 * 20px) / 3 - 0.5px)}
  /* три фильтра перестают помещаться в ряд раньше телефона: на 768 доступно 648px,
     а подписи целиком просят 666 + зазоры — ряд рвался на 2+1 рваной ширины.
     Ниже 1024 подпись идёт короткой (день недели снят), плитки равные. */
  .legend{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
  .legend .lg-l{display:none}
  .legend .lg-s{display:inline}
}
@media (max-width:900px){
  .team > .tm{flex-basis:calc((100% - 20px) / 2 - 0.5px)}
  .courses{grid-template-columns:1fr}
  .course{border-right:none;border-bottom:var(--rule) solid var(--ink)}
  .course:last-child{border-bottom:none}
  .alumni{grid-template-columns:1fr}
  .al{border-right:none;border-bottom:var(--rule) solid var(--ink)}
  .al:last-child{border-bottom:none}
}
/* ===== ТЕЛЕФОН <768 ===== */
@media (max-width:767px){
  .page{display:block}
  .efir{display:none}
  .scroll-progress{display:block}
  header.top{padding:0 20px;gap:16px}
  nav.anchors,.nav-cta{display:none}
  .menu-btn{display:block}
  /* палец, а не курсор: всё нажимаемое на телефоне держит 44px по высоте
     (замер design-review 14.08: было 27–43px на восьми элементах) */
  .menu-btn,.months button,.legend button,.live-pill,.btn-outline,.wordmark{min-height:44px;display:inline-flex;align-items:center}
  .months button,.legend button{justify-content:center}
  /* на телефоне сетка легенды (задана выше, ≤1023) ещё и складывается:
     подпись уходит под образец цвета — иначе три чипа в ряд не влезают в 350px.
     Было 180px в столбик, стало 49 — календарь поднялся над сгибом. */
  .legend button{flex-direction:column;gap:5px;padding:7px 4px;font-size:12px;letter-spacing:.04em;line-height:1;text-align:center}
  .legend .sw{width:16px;height:16px}
  .live-pill{gap:12px}
  .trust a.val{min-height:44px;display:inline-flex;align-items:center}
  nav.anchors.open a{min-height:44px;display:flex;align-items:center}
  footer li a{min-height:44px;display:inline-flex;align-items:center}
  .consent{min-height:44px;align-items:center}
  .consent input{width:24px;height:24px;margin-top:0}
  nav.anchors.open{display:flex;position:absolute;top:var(--nav-h);left:0;right:0;flex-direction:column;background:var(--bg);border-bottom:var(--rule) solid var(--ink);padding:16px 20px;gap:14px}
  /* главное действие не должно пропадать именно там, где чаще всего открывают —
     с телефона в шапке видно только «МШ» и «Меню» (аудит design-review, второй проход) */
  nav.anchors.open .nav-cta-mob{display:flex;justify-content:center;background:var(--accent);color:#fff;font-family:var(--display);font-weight:700;font-size:19px;padding:12px 20px;border-bottom:none;margin-top:4px}
  .hero{padding:28px 20px 16px}
  .hero h1{min-height:auto}
  /* курсор не влезает в строку слогана и уезжал на третью строку один — на телефоне
     он лишний: механику допечатки видно и без него */
  .hero h1.play .caret{display:none}
  section.strip{padding:28px 20px}
  .badges{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .badges span{border:none;outline:.75px solid var(--ink)}
  table.grid{display:none}
  .agenda{display:block}
  .agenda .day{border:var(--rule) solid var(--ink);border-bottom:none}
  .agenda .day:last-child{border-bottom:var(--rule) solid var(--ink)}
  .agenda .daybtn{display:block;width:100%;height:auto;padding:0;text-align:left}
  .agenda .head{display:flex;gap:14px;align-items:baseline;padding:10px 14px;border-bottom:var(--rule) solid var(--ink);width:100%;text-align:left}
  .agenda .head .daynum{padding:0;font-size:26px}
  .agenda .head .wd{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
  .agenda .body{padding:10px 14px;display:flex;flex-direction:column;gap:6px}
  .agenda .ev-tile{margin:0;width:max-content;max-width:100%}
  .agenda .ls-row{padding:0;white-space:normal}
  /* Тот же перевес, что в сетке (lock-c93439114a): в списке занятия тоже держат
     чернила, иначе на телефоне съёмка в рамке снова выглядит весомее занятия —
     поймано при проверке мобильного вида. */
  .agenda .daybtn:has(.ls-row) .body{background:var(--ink);color:var(--bg)}
  .agenda .daybtn:has(.ls-row) .ls-row .t{color:var(--bg);opacity:.72}
  .reviews{grid-template-columns:1fr}
  /* строки журнала на телефоне складываются: текст на всю ширину, действие под ним */
  .hs-row{flex-wrap:wrap;gap:6px 14px}
  .hs-txt{flex:1 1 100%;order:2}
  /* палец: «Скачать программу» в hero и ссылка на Яндекс.Карты держат 44px, как всё нажимаемое
     (аудит 17.08: были 25px и 16px — единственные цели ниже порога на 375) */
  .hs-act{order:3;white-space:normal;min-height:44px;display:inline-flex;align-items:center}
  .pr-note a{min-height:44px;display:inline-flex;align-items:center}
  /* на телефоне колонки схлопываются в поток: номер и цена в строку,
     курс и возраст под ними, действие последним */
  .price{grid-template-columns:24px 1fr;gap:6px 20px;padding:18px 0}
  .price .num{grid-column:2}
  .price .who,.price .age{grid-column:2}
  .price .btn-outline{grid-column:2;justify-self:start;margin-top:6px}
  .tvlist a{flex-wrap:wrap;gap:6px 16px;padding:14px 0}
  .tv-name{flex:1 1 100%;order:2}
  .tv-src{order:3}
  .tv-go{order:4}
  .c-actions{flex-direction:column;align-items:stretch}
  .c-actions .btn-outline{text-align:center}
  .price,.review{border-right:none;border-bottom:var(--rule) solid var(--ink)}
  .price:last-child,.review:last-child{border-bottom:none}
  /* На телефоне факты идут одной колонкой. Причина замерена: в 2×2 ячейка ~187px,
     а неразрывное «~3000 ВЫПУСКНИКОВ» просит ~200px и вылезало за рамку вправо.
     До 22.08 эту ячейку спасал grid-column:1/-1 у пятой (последней) — фактов стало
     четыре, приём перестал работать. Одна колонка даёт 295px чистой ширины: строка
     помещается целиком, .nowrap сохраняется, разлиновка не зависит от числа ячеек. */
  .trust{grid-template-columns:minmax(0,1fr)}
  /* :not(:last-child) — не украшение, а вес: планшетное .cell:nth-last-child(-n+2)
     специфичнее простого .cell и иначе съедает линейку между третьей и четвёртой */
  .trust .cell{border-right:none}
  .trust .cell:not(:last-child){border-bottom:var(--rule) solid var(--ink)}
  .trust .cell:last-child{border-bottom:none}
  footer{padding:20px;grid-template-columns:1fr}
  .row{grid-template-columns:1fr;gap:4px}
  .price .slots{white-space:normal}
  /* лента лиц: 1.5 карточки в кадре — видно, что она листается */
  /* поля ленты — маржинами крайних карточек: padding скроллера съедается снап-скроллом,
     а рамке кадра (outline-offset) нужен воздух, иначе её срезает */
  .team{display:flex;gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -20px;padding:12px 0 16px;scroll-padding-left:20px;-webkit-overflow-scrolling:touch}
  .tm{flex:0 0 62%;scroll-snap-align:start}
  .tm:first-child{margin-left:20px}
  .tm:last-child{margin-right:20px}
  .tm-name{font-size:17px;padding:8px 10px}
  .lead,.lead-done{padding:20px}
  .lead-grid{grid-template-columns:1fr;gap:16px}
  /* столбец, а не перенос: иначе соседние плашки теряют разделитель и читаются как одно поле */
  .chip-row{width:100%;flex-direction:column;flex-wrap:nowrap}
  .chip{flex:1 1 auto;border-right:none;border-bottom:var(--rule) solid var(--ink)}
  .chip:last-child{border-bottom:none}
  .chip span{text-align:center}
  .lead button[type=submit]{width:100%;text-align:center}
  .done-actions{flex-direction:column;align-items:stretch}
  .done-actions .tape-cta,.done-actions .btn-outline{text-align:center;justify-content:center}
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero h1 .strike::after{width:104%}
  /* max-content, а не 100%: с отключёнными анимациями конечное состояние
     задаётся ЗДЕСЬ, и при 100% слоган терял финальную точку ровно так же,
     как терял её в анимированном пути (замер: 47px среза на 1024).
     Правку анимации без этой строки нельзя считать полной. */
  .hero h1 .type{max-width:max-content}
  .hero h1.play .caret{display:none} /* без анимации мигать нечему — тире не показываем */
  .ovl.open .photo .frame{opacity:1;transform:none}
  /* лента не едет сама — читатель листает её сам, дубль убран, чтобы не было повторов */
  .rev-marquee{overflow-x:auto}
  .rev-track{animation:none}
  .rev-copy{display:none}
}