/* ═══════════════════════════════════════════════════════════
   ЧИТАЕМОСТЬ
   Со встречи 5 августа это претензия номер один и повторяется
   семь раз: «еле видно», «сиди в лупу рассматривай», «всё для
   вампиров». Проверялось на 13,3 дюйма — там приглушённый
   текст пропадает совсем.

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

   Логика уровней:
     1.00  заголовки и числа
     0.92  основной текст
     0.78  вторичный текст и подписи
     0.66  капитель и метки — самый нижний допустимый уровень
   ═══════════════════════════════════════════════════════════ */

/* ── заголовки и крупные числа ── */
.sx__t,.sig-x__t,.fin__t,.gx h3,.rows h3,.nums b,.numsx__row b,
.quotes figcaption b,.spk h3,.day__from,.hours dt,.place__v,
.reg__cap b,.cd b,.faq summary,.mq span{color:#fff}

/* ── основной текст ── */
.sx__l,.lead-x,.sig-x__p,.fin__p,.gx p,.rows p,.faq details p,
.quotes blockquote,.reg__facts dd,.day__name,.day__all,
.chk,.f--set .chk,.reg__ok__p{color:rgba(238,244,250,.92)}

/* ── вторичный текст ── */
.day__to,.reg__cap span,.f__hint,.place__a a,.map__place span,
.ft__meta li,.gx--wait h3{color:rgba(238,244,250,.78)}

/* ── капитель, метки, подписи: нижний допустимый уровень ── */
.sx__sub,.gx__k,.nums span,.numsx__cap span,.spk p,.hours dd,
.quotes figcaption span,.panel__k,.day__k,.day__dur,.cd span,
.f>label,.f--set legend,.logos-x .slot>span,.facts li,
.cue,.f__opt,.gx--wait p:not(.gx__k),
#agenda .agenda-phase-count{color:rgba(238,244,250,.72)}

/* поля формы и их плейсхолдеры */
.reg__form input,.reg__form textarea,.reg__form select{color:#fff}
.reg__form input::placeholder,.reg__form textarea::placeholder{
  color:rgba(238,244,250,.5)}

/* волосяные линии тоже были почти невидимы */
.gx,.nums,.numsx__cap,.spk,.quotes,.logos-x{background:rgba(238,244,250,.2)}
.rows,.rows li,.faq,.faq details,.reg__facts,.reg__facts>div{
  border-color:rgba(238,244,250,.2)}

/* ── КРАСНЫЕ МЕТКИ ПОЖИРНЕЕ ────────────────────────────────
   «Я бы пожирнее хотела красненькие штуки, мне их еле
   заметно» — буллеты в программе и в списке причин. */
.rows__n::before,#agenda .agenda-item-head::before{
  width:clamp(16px,1.35vw,21px);height:clamp(16px,1.35vw,21px)}

/* ── ЗНАК НАД ЗАГОЛОВКАМИ — КРАСНЫЙ ────────────────────────
   «Это будет только красное вместо вот этих заплаток».
   Перекрашиваем маской, чтобы цвет остался за токеном. */
.sx__mark{
  /* content:'' гасит сами пиксели картинки — иначе белый
     логотип рисуется поверх красной заливки и цвет не виден */
  content:'';
  background:var(--x-red);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain;
  opacity:1}

/* ── СПИКЕРЫ: ФОТО НЕ ГАСИМ ────────────────────────────────
   «Он затемняется, когда неактивный, а когда наводишься —
   становится цветным. Наоборот должно быть.» */
/* Правило веса не набирало и не работало — рабочая версия
   стоит ниже, в правках 6 августа. Оставлено пустым намеренно,
   чтобы вес селектора не всплыл снова. */
.spk--real .spk__ph::after{
  background:linear-gradient(180deg,transparent 62%,rgba(7,7,21,.42) 88%,rgba(7,7,21,.8))}

/* ── АВАТАРЫ ОДНОГО МАСШТАБА ───────────────────────────────
   «У всех голова разного размера получилась». Кадрирование
   выровнено при подготовке файлов, здесь — общий размер. */
img.ava{width:clamp(54px,4vw,66px);height:clamp(54px,4vw,66px);
  filter:none}

/* ── ФОТОГРАФИИ СВЕТЛЕЕ ────────────────────────────────────
   «Секси-картинку, всё в темноте, под покровом ночи». */
.band--photo::after{background:linear-gradient(180deg,var(--x-bg) 0%,
  rgba(7,7,21,.22) 10%,rgba(7,7,21,0) 34%,rgba(7,7,21,0) 66%,
  rgba(7,7,21,.26) 88%,var(--x-bg) 100%)}
.band--top::after{background:linear-gradient(180deg,var(--x-bg) 0%,
  rgba(7,7,21,.2) 12%,rgba(7,7,21,0) 38%,rgba(7,7,21,.22) 80%,var(--x-bg) 100%)}
.sig-x__veil{background:
  radial-gradient(72% 70% at 26% 50%,rgba(7,7,21,.9) 0%,rgba(7,7,21,.6) 48%,
    rgba(7,7,21,.14) 86%,transparent 100%),
  linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.2) 16%,rgba(7,7,21,.1) 46%,
    rgba(7,7,21,.3) 78%,var(--x-bg) 100%)}

/* ── ЛИНИЯ ДНЯ: ПОЛОСЫ ТОЛЩЕ ───────────────────────────────
   «Для меня слишком тонкие линии, я бы хотела их потолще». */
.day__seg::after{height:4px}
.day__seg::before,.day__to::before{height:12px;width:2px;
  background:rgba(238,244,250,.7)}
.day__rail{border-top-color:rgba(238,244,250,.24)}
/* знак теперь пустой элемент, а не картинка: маска красит
   его в фирменный красный, файл задаёт только форму */
i.sx__mark{display:block;width:clamp(22px,2.2vw,30px);
  height:clamp(24px,2.6vw,34px);margin:0 0 clamp(16px,2.2vh,24px)}
i.sx__mark--big{width:clamp(26px,2.6vw,35px);height:clamp(28px,3vw,40px)}

/* ═══════════════════════════════════════════════════════════
   ЧЕКБОКС: ЗНАК В КВАДРАТЕ
   Знак сам по себе не читался как отметка — «непонятно, что
   это я жму на галочки». Возвращаем квадратную рамку: она
   говорит «сюда нажимать», а знак появляется внутри вместо
   галочки. Рамка есть всегда, знак — только когда отмечено.
   ═══════════════════════════════════════════════════════════ */
.chk input{
  position:relative;appearance:none;-webkit-appearance:none;
  width:clamp(24px,1.9vw,28px);height:clamp(24px,1.9vw,28px);
  min-height:0;flex:none;margin:0;padding:0;
  background:transparent;
  border:1.5px solid rgba(238,244,250,.45);border-radius:0;
  -webkit-mask:none;mask:none;
  box-shadow:none;cursor:pointer;transform:none;
  transition:border-color .28s var(--x-ease),background .28s var(--x-ease)}
.chk input:hover{border-color:rgba(238,244,250,.8)}

/* знак внутри квадрата — маской, чтобы цвет остался за токеном */
.chk input::before{content:'';position:absolute;inset:3px;
  background:var(--x-blue);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain;
  opacity:0;transform:scale(.55);
  transition:opacity .26s var(--x-ease),transform .26s var(--x-ease)}
.chk input::after{content:none}
.chk input:checked{border-color:var(--x-blue);background:rgba(48,84,255,.1)}
.chk input:checked::before{opacity:1;transform:scale(1)}
.chk input[aria-invalid="true"]{border-color:var(--x-red);background:transparent}
.chk input[aria-invalid="true"]::before{background:var(--x-red)}
.chk input:focus-visible{outline:2px solid var(--x-blue);outline-offset:3px}

/* подпись выравнивается по верху квадрата */
.f--set .chk{align-items:start;gap:clamp(12px,1.2vw,16px)}
.f--set .chk>span{padding-top:1px}
/* знак вертикальный и узкий: в маленьком квадрате он читался
   полоской. Квадрат крупнее, поля внутри минимальные */
.chk input{width:clamp(28px,2.2vw,32px);height:clamp(28px,2.2vw,32px)}
.chk input::before{inset:2px}

/* ═══════════════════════════════════════════════════════════
   ОТРАСЛИ БЕГУЩЕЙ СТРОКОЙ
   В ячейках одинакового размера слова разной длины читались
   вразнобой: «банки как будто блок, а эти как будто просто
   перечисление». Та же механика, что у клиентов, — расстояния
   задаёт сама строка, а не сетка. Идёт в другую сторону,
   чтобы два ряда не выглядели одним.
   ═══════════════════════════════════════════════════════════ */
.mq--ind .mq__track{animation-direction:reverse;animation-duration:30s}
.mq--ind span{color:rgba(238,244,250,.8)}

/* ═══════════════════════════════════════════════════════════
   ТАЙМИНГ: ВЕЧЕРИНКА НА ВТОРОЙ ПЛАН
   «Мне вот эта хрень 18:00–22:00 не нравится, вечеринка как
   бельмо на глазу» — деловая часть главная, вечер вторичен.
   ═══════════════════════════════════════════════════════════ */
.hours>div:last-child dt{font-size:var(--t-m);color:rgba(238,244,250,.72);font-weight:400}
.hours>div:last-child dd{color:rgba(238,244,250,.5)}

/* ═══════════════════════════════════════════════════════════
   ВЫСТАВКА В ШАПКЕ ПРОГРАММЫ
   Из списка убрана: она не пункт расписания, а фон всего дня.
   Стоит третьей меткой у тайминга — «весь день, выставка и
   демо-зоны», решение встречи 5 августа.
   ═══════════════════════════════════════════════════════════ */
.hours__all dt{font-size:var(--t-s)!important;font-weight:600!important;
  letter-spacing:var(--tr);text-transform:uppercase;
  color:rgba(238,244,250,.72)!important;line-height:1.4}
.hours__all dd{color:rgba(238,244,250,.72)!important;text-transform:none!important;
  letter-spacing:0!important;font-size:var(--t-s)!important;margin-top:4px!important}

/* ═══════════════════════════════════════════════════════════
   АРЕНА НА ВЕСЬ БЛОК
   «Дай мне эту вонючую арену на самый главный слайд, чтобы её
   было видно» — кадр был полосой в 240px и стадиона в нём не
   читалось. Теперь весь блок стоит на арене, цифры лежат
   поверх, а логотип на кровле идёт отдельным кадром ниже.
   ═══════════════════════════════════════════════════════════ */
.numsx__bg,.numsx__row,.numsx__seam{height:clamp(280px,44vh,460px)}
.numsx__bg img{object-position:center 40%}
.numsx__bg::after{background:
  linear-gradient(180deg,rgba(7,7,21,.6) 0%,rgba(7,7,21,.24) 34%,
    rgba(7,7,21,.42) 74%,var(--x-bg) 100%)}
.numsx__row{align-items:end;padding-bottom:clamp(26px,4vh,44px)}

/* ═══════════════════════════════════════════════════════════
   ПРОДУКТОВЫЕ НАПРАВЛЕНИЯ
   Ячейка с логотипом и постоянным описанием жила здесь и
   перебивала skin.css. Правка 6 августа — «оставить только
   логотипы, сделать их больше, текст по наведению» — снимает
   этот пласт целиком: компонент собран в skin.css, разметка
   узкого экрана в mobile.css. Здесь остаётся только стрелка
   перехода: она говорит, что знак ведёт на сайт продукта.
   ═══════════════════════════════════════════════════════════ */
.prod::after{content:'';position:absolute;right:clamp(20px,2vw,32px);
  top:clamp(18px,2.4vh,26px);width:9px;height:9px;
  border-right:1.5px solid var(--x-red);border-top:1.5px solid var(--x-red);
  transform:rotate(45deg);opacity:.6;
  transition:transform .4s var(--x-ease),opacity .4s var(--x-ease)}
.prod:hover::after{opacity:1;transform:rotate(45deg) translate(3px,-3px)}
@media (max-width:900px){.prods{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   СЧЁТЧИК МЕСТ ПОД ДЕЙСТВИЕМ
   «Счётчик может быть под кнопку зарегистрироваться внести» —
   слева нагнетаем, справа факты. Цифра досчитывается тем же
   механизмом, что и остальные числа на странице.
   ═══════════════════════════════════════════════════════════ */
.seats{margin:clamp(16px,2.4vh,24px) 0 0;font-size:var(--t-s);font-weight:300;
  color:rgba(238,244,250,.8)}
.seats b{font-size:var(--t-l);font-weight:600;color:#fff;
  font-variant-numeric:tabular-nums;margin-right:.35em}
.seats__bar{margin-top:clamp(9px,1.3vh,13px);height:2px;
  max-width:min(320px,60%);background:rgba(238,244,250,.2)}
.seats__bar i{display:block;height:100%;background:var(--x-red)}

/* ═══════════════════════════════════════════════════════════
   СОГЛАСИЯ В ДВЕ КОЛОНКИ, ДЕЙСТВИЕ ПО ЦЕНТРУ
   «Согласие вот это и вот это просто параллельно поставим
   и сделаем страницу чуть меньше. А зарегистрироваться будет
   по центру» — блок регистрации становится короче.
   ═══════════════════════════════════════════════════════════ */
.f--two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(12px,1.8vh,18px) clamp(20px,2.4vw,40px)}
.f--two legend{grid-column:1/-1}
.reg__form>.btn-x{justify-self:center;min-width:min(360px,100%)}
@media (max-width:900px){.f--two{grid-template-columns:1fr}}

/* ═══════════════════════════════════════════════════════════
   БУЛЕТЫ — ЛОГОТИП, А НЕ ЗАПЛАТКА
   Скошенная плоскость читалась как заплатка. Маркером пункта
   работает сам знак «Авандок», красный, той же формы, что
   в официальном логотипе.
   ═══════════════════════════════════════════════════════════ */
.rows__n::before,#agenda .agenda-item-head::before{
  width:clamp(13px,1.05vw,16px);height:clamp(22px,1.8vw,28px);
  background:var(--x-red);
  clip-path:none;
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain}
.rows__n::before{top:.28em}
#agenda .agenda-item-head::before{margin-top:.2em}

/* разделитель в бегущих строках — тоже знак, не плашка */
.mq span::after{width:7px;height:12px;background:var(--x-red);opacity:.8;
  clip-path:none;
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center/contain;
          mask:url('assets/opt/mark.svg') no-repeat center/contain}

/* ═══════════════════════════════════════════════════════════
   ОТМЕТКА — КРАСНЫЙ ЗНАК
   Синий в квадрате читался чужеродно. Знак красный, как
   в логотипе; рамка подсвечивается тем же цветом.
   ═══════════════════════════════════════════════════════════ */
.chk input::before{background:var(--x-red)}
.chk input:checked{border-color:var(--x-red);background:rgba(249,66,58,.08)}
.chk input:focus-visible{outline-color:var(--x-red)}

/* ═══════════════════════════════════════════════════════════
   АРЕНА ОДНА
   Кадр стадиона стоял дважды подряд — под цифрами и отдельно
   с логотипом. Остался один: цифры сверху, логотип на кровле
   читается под ними.
   ═══════════════════════════════════════════════════════════ */
.numsx__bg,.numsx__row,.numsx__seam{height:clamp(340px,52vh,540px)}
.numsx__bg img{object-position:center 34%}
.numsx__row{align-items:start;padding-top:clamp(26px,4vh,44px);padding-bottom:0}
.numsx__bg::after{background:
  linear-gradient(180deg,rgba(7,7,21,.66) 0%,rgba(7,7,21,.3) 30%,
    rgba(7,7,21,.12) 56%,rgba(7,7,21,.4) 86%,var(--x-bg) 100%)}
/* логотип на кровле лежит в нижней половине снимка — при
   кадрировании по верху он срезался, а он тут главный */
.numsx__bg img{object-position:center 62%}

/* ═══════════════════════════════════════════════════════════
   ОТМЕТКА: СИНИЙ ЗНАК, ВПИСАННЫЙ В КВАДРАТ
   Знак вертикальный и при сохранении пропорций занимал в
   квадрате узкую полоску. Здесь он растянут до 80% ширины
   и высоты — заполняет квадрат, как галочка, и читается
   как отметка, а не как значок сбоку.
   ═══════════════════════════════════════════════════════════ */
.chk input::before{inset:0;background:var(--x-blue);
  -webkit-mask:url('assets/opt/mark.svg') no-repeat center;
          mask:url('assets/opt/mark.svg') no-repeat center;
  -webkit-mask-size:80% 80%;mask-size:80% 80%}
.chk input:checked{border-color:var(--x-blue);background:rgba(48,84,255,.12)}
.chk input:focus-visible{outline-color:var(--x-blue)}
.chk input[aria-invalid="true"]::before{background:var(--x-red)}
/* прежнее правило задавало ::before жёстко 12x12 — из-за него
   inset не работал и знак сидел мелким пятном в углу */
.chk input::before{left:0;top:0;right:0;bottom:0;width:auto;height:auto}
/* в самом SVG пропорции сохраняются, поэтому знак оставался
   узкой полоской. Для отметки берём версию, которая тянется
   по ширине квадрата */
.chk input::before{
  -webkit-mask-image:url('assets/opt/mark-fill.svg');
          mask-image:url('assets/opt/mark-fill.svg')}

/* ═══════════════════════════════════════════════════════════
   ОТМЕТКА: ЗНАК ВЫХОДИТ ЗА КВАДРАТ
   Знак вертикальный: чтобы он заполнил квадрат, его пришлось
   бы растянуть и испортить пропорции логотипа. Вместо этого
   он крупнее рамки и выходит за неё сверху и снизу — рамка
   говорит «это отметка», знак остаётся собой.
   ═══════════════════════════════════════════════════════════ */
.chk input{overflow:visible}
.chk input::before{
  left:50%;top:50%;right:auto;bottom:auto;
  width:auto;height:150%;aspect-ratio:138/331;
  -webkit-mask-image:url('assets/opt/mark.svg');
          mask-image:url('assets/opt/mark.svg');
  -webkit-mask-size:contain;mask-size:contain;
  background:var(--x-blue);
  transform:translate(-50%,-50%) scale(.5);
  transform-origin:center}
.chk input:checked::before{transform:translate(-50%,-50%) scale(1)}

/* ═══════════════════════════════════════════════════════════
   ЦИФРЫ ПОД КАДРОМ, А НЕ ПОВЕРХ НЕГО
   На снимке они спорили со стадионом: и кадр читался хуже,
   и числа висели на пёстром. Кадр стоит сам по себе, числа
   с подписями идут под ним в тех же колонках.
   ═══════════════════════════════════════════════════════════ */
.numsx{display:flex;flex-direction:column}
.numsx__bg{position:relative;left:auto;right:auto;top:auto;
  height:clamp(240px,38vh,420px);order:-1}
.numsx__bg::after{background:linear-gradient(180deg,
  rgba(7,7,21,.34) 0%,rgba(7,7,21,0) 26%,
  rgba(7,7,21,0) 70%,rgba(7,7,21,.5) 92%,var(--x-bg) 100%)}
.numsx__seam{height:clamp(240px,38vh,420px)}

.numsx__row{height:auto;align-items:end;
  padding-top:clamp(26px,3.6vh,40px);padding-bottom:clamp(12px,1.6vh,18px)}
.numsx__row b{text-shadow:none}
.numsx__cap>div{padding-top:clamp(14px,2vh,20px)}

/* ═══════════════════════════════════════════════════════════
   КНОПКИ: КОНТРАСТ ПО WCAG AA
   Текст на залитых кнопках наследовался от темы: в тёмной
   выходил #EEF4FA, в светлой — navy. На синем это давало 4.94
   и 3.28, на красном 3.23 при норме 4.5.

   Сочетания посчитаны по палитре, ничего не подобрано на глаз:
     белый на синем  #3054FF — 5.47  проходит
     navy  на красном #F9423A — 5.01  проходит
   Белый на красном даёт всего 3.58 и годится только для
   крупного текста, поэтому на красной кнопке текст navy.
   Тема на это не влияет — правило одно для обеих версий.
   ═══════════════════════════════════════════════════════════ */
.btn-x,
html[data-theme="light"] .btn-x{color:#fff}
.btn-x--red,
html[data-theme="light"] .btn-x--red{color:var(--x-navy)}

/* ═══════════════════════════════════════════════════════════
   СОСТАВ: ДЕВЯТЬ ЧЕЛОВЕК
   Вместо четырёх заглушек пришли настоящие люди. Девять
   ложатся в три колонки ровно, без дыры в последнем ряду.
   Фигуры вырезаны и стоят на фирменном рендере — фон общий,
   масштаб лиц одинаковый.
   ═══════════════════════════════════════════════════════════ */
.spk{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}
.spk figcaption{padding:clamp(20px,2.6vh,30px) clamp(18px,1.8vw,28px)}
.spk h3{font-size:var(--t-m);color:#fff}
.spk p{margin-top:9px;color:rgba(238,244,250,.66);text-transform:none;
  letter-spacing:.005em;font-size:var(--t-s);font-weight:300;line-height:1.5}
@media (max-width:900px){.spk{--cols:2!important}}

/* ═══════════════════════════════════════════════════════════
   ТАЙМИНГ В ПЕРВОМ ЭКРАНЕ
   Строки были собраны в ряд с разделителем-линией слева.
   Когда ряд переносился, у второй строки оставались отступ
   и линия — она уезжала вправо на 22px, а правые края
   расходились на 999 и 1016.

   Теперь это столбец во всю ширину колонки: общий левый
   край, общий правый, разделитель горизонтальный. Деловая
   часть — главная строка, вечер идёт следом и тише.
   ═══════════════════════════════════════════════════════════ */
.hero-x .hours{display:grid;grid-template-columns:1fr;
  gap:clamp(16px,2.4vh,26px)}
.hero-x .hours>div{padding:0;border-left:0}
.hero-x .hours>div+div{
  border-top:1px solid rgba(238,244,250,.16);
  padding-top:clamp(16px,2.4vh,26px)}

/* деловая часть — приоритет: крупнее и в полную яркость */
.hero-x .hours>div:first-child dt{font-size:var(--t-l);color:#fff;font-weight:600}
.hero-x .hours>div:first-child dd{color:rgba(238,244,250,.8)}
/* вечер — второй голос */
.hero-x .hours>div:last-child dt{font-size:var(--t-m);font-weight:400;
  color:rgba(238,244,250,.72)}
.hero-x .hours>div:last-child dd{color:rgba(238,244,250,.52)}

/* больше воздуха между панелями первого экрана */
.hero-x .panel{padding:clamp(18px,2.6vh,30px) 0}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 6 АВГУСТА
   Отдельным пластом в конце файла: подключается последним и
   перебивает прежние значения, поэтому все правки этого
   круга видно в одном месте, а не по семи таблицам.
   ═══════════════════════════════════════════════════════════ */

/* ── ТАЙМИНГ В ПЕРВОМ ЭКРАНЕ: НАЗВАНИЯ ЧАСТЕЙ ДНЯ ───────────
   «Деловая программа» и «Авандок.Вечеринка» набирались
   капителью в 12px на 60% яркости — на кадре их не было
   видно. Названия важнее самих цифр: это то, ради чего
   человек читает панель. */
.hero-x .hours dd,
.hours--sx dd{
  font-size:var(--t-s);letter-spacing:.01em;text-transform:none;
  font-weight:500;line-height:1.25}
.hero-x .hours>div:first-child dd{color:#fff}
.hero-x .hours>div:last-child dd{color:rgba(238,244,250,.86)}
/* время и название — одна связка, а не две строки через провал */
.hero-x .hours dd,.hours--sx dd{margin-top:3px}

/* ── ПРОГРАММА ДНЯ: ВЫСТАВКА УХОДИТ ВПРАВО ──────────────────
   Выставка идёт параллельно всему дню и не встаёт третьей
   фазой в один ряд с деловой частью и вечером. Отбиваем её
   к правому краю: две фазы слева, сквозная линия справа. */
.hours--sx{width:100%}
.hours--sx .hours__all{margin-left:auto;text-align:right;
  padding-right:0;
  /* линия слева, а не справа: справа она встаёт на самой кромке
     полосы и читается как случайный штрих */
  border-left:1px solid rgba(238,244,250,.2);
  padding-left:clamp(20px,2.4vw,36px)}
.hours--sx .hours__all dt{color:rgba(238,244,250,.8)}

/* ── КАРТОЧКИ СЕТКИ: ПОЛОСА ТОЛЩЕ, ПОДСВЕТКА СИНЯЯ ──────────
   Белая подсветка выглядела как выцветание, а красная полоса
   в один пиксель терялась. Синий — фирменный цвет действия,
   на нём белый текст держит контраст лучше, чем на сером.
   Работает разом в «Один день», «Максимум пользы»
   и «Наши достижения 2025» — это одна и та же сетка. */
.gx>*:not(.gx--empty)::before{height:3px}
.gx>*:not(.gx--empty):hover{background:rgba(48,84,255,.28)}

/* подписи в карточках: были 15px, 300-го веса, 70% яркости */
.gx p{font-size:var(--t-m);font-weight:400;line-height:1.5;
  color:rgba(238,244,250,.96)}

/* ── «ЗАЧЕМ ИДТИ»: ПОДПИСИ ПОД ЗАГОЛОВКАМИ ──────────────────
   Тот же разбор, что и в карточках. */
.rows p{font-size:var(--t-m);font-weight:400;line-height:1.5;
  color:rgba(238,244,250,.96)}

/* ── ПОДПИСИ ПОД ЦИФРАМИ 20+ / 3 / 14 ───────────────────────
   Капитель в 12px на 72% под 72-пиксельным числом читалась
   как техническая сноска. */
.numsx__cap span{font-size:var(--t-s);font-weight:600;
  letter-spacing:.01em;text-transform:none;line-height:1.35;
  color:#fff}

/* ── СПИКЕРЫ: НАСЫЩЕННОСТЬ И ОБРЕЗКА ────────────────────────
   «В обычном состоянии Saturation −20, при наведении 0.»
   Приглушаем только насыщенность: яркость и контраст не
   трогаем, иначе лицо уходит в темноту, как было раньше.

   Увеличение растёт от нижней кромки, а не от центра: фигура
   стоит на месте и уходит верхом за край кадра. Кадр режет —
   .spk__ph с overflow:hidden работает как фрейм с clip content.

   Селекторы намеренно длинные. Общее правило ряда —
   `.spk figure:hover .spk__ph img` — весит три класса и два
   тега; прежняя правка `.spk--real:hover .spk__cut` весила
   три класса и проигрывала ему. Поэтому фигура и продолжала
   гаснуть при наведении, хотя в файле было написано обратное.
   Здесь в селекторе на класс больше — он выигрывает. */
.spk--real .spk__ph img.spk__cut{
  filter:saturate(.8);
  transform-origin:50% 100%;
  transition:filter .55s var(--x-ease),transform .7s var(--x-ease)}
.spk--real:hover .spk__ph img.spk__cut{filter:saturate(1);transform:scale(1.07)}
/* фон-коридор под фигурой на наведение не реагирует: иначе
   двигаются два слоя с разной скоростью и кадр «плывёт» */
.spk--real .spk__ph img:not(.spk__cut),
.spk--real:hover .spk__ph img:not(.spk__cut){
  filter:grayscale(1) brightness(.34) contrast(1.1);transform:none}

/* ── ФИНАЛ: КРОВЛЯ «ЛУЖНИКОВ» НЕ В ПОТЁМКАХ ─────────────────
   Под текстом затемнение нужно, справа — нет: там стоит
   логотип на кровле, ради которого кадр и взят. */
.fin__veil{background:
  radial-gradient(64% 66% at 24% 50%,rgba(7,7,21,.86) 0%,rgba(7,7,21,.52) 52%,
    rgba(7,7,21,.08) 88%,transparent 100%),
  linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.14) 14%,rgba(7,7,21,.04) 48%,
    rgba(7,7,21,.22) 80%,var(--x-bg) 100%)}

/* правило про выставку живёт в этом файле — mobile.css
   подключён раньше и его версия проигрывала бы */
@media (max-width:900px){
  .hours--sx .hours__all{margin-left:0;text-align:left;
    border-right:0;padding-left:0}
  .gx p,.rows p{font-size:var(--t-s)}
}

/* Шапка «Программы дня» ограничена по ширине как текстовая —
   из-за этого «Весь день · Выставка» упиралась в 920px и не
   доходила до правого края. Здесь в шапке не текст, а строка
   тайминга: отпускаем её на всю полосу, чтобы правый край
   совпал с правым краем самой программы. */
#program .sx__h,#program .sx__h>.sx__l{max-width:none}