/* ═══════════════════════════════════════════════════════════
   ЧИТАЕМОСТЬ
   Со встречи 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}

/* ═══════════════════════════════════════════════════════════
   ПРАВКИ 7 АВГУСТА
   ═══════════════════════════════════════════════════════════ */

/* ── ШАПКА: СТЕКЛО И ПОДСВЕТКА РАЗДЕЛА ─────────────────────
   Шапка была прозрачной и мутнела только после прокрутки. Теперь
   стекло с самого начала: на светлых кадрах белые ссылки на
   прозрачном фоне читались через раз. */
nav.nav-x{
  background:rgba(7,7,21,.52);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid rgba(238,244,250,.09);
}
nav.nav-x.is-stuck{
  background:rgba(7,7,21,.8);
  border-bottom-color:rgba(238,244,250,.16);
}

/* Подсветка раздела, который сейчас на экране. Подчёркивание
   растёт от левого края, а не появляется целиком — так глаз
   успевает связать движение с прокруткой. */
.nav-x__links a{position:relative;padding-bottom:3px}
.nav-x__links a::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--x-red);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--x-ease);
}
.nav-x__links a.is-here{color:var(--x-ink)}
.nav-x__links a.is-here::after{transform:scaleX(1)}

/* ── КНОПКИ: ПЛОСКОСТИ РАСХОДЯТСЯ ПО ДИАГОНАЛИ ─────────────
   Красная уходит влево-вниз, синяя вправо-вверх — тот же жест,
   что у плоскостей в прологе. Раньше у основной кнопки была одна
   красная тень, уходившая вправо-вниз, и жест не читался. */
/* Синяя плоскость берётся осветлённой: у кнопки синяя заливка, и
   тень в тот же цвет с ней сливается — расхождения не видно
   вовсе. Красная остаётся фирменной. */
.btn-x:not(.btn-x--ghost){
  filter:drop-shadow(-3px 3px 0 var(--x-red)) drop-shadow(3px -3px 0 #8aa0ff);
}
.btn-x:not(.btn-x--ghost):hover{
  transform:none;
  filter:drop-shadow(-9px 9px 0 var(--x-red)) drop-shadow(9px -9px 0 #8aa0ff);
}
.btn-x:not(.btn-x--ghost):active{
  filter:drop-shadow(-2px 2px 0 var(--x-red)) drop-shadow(2px -2px 0 #8aa0ff);
}
.btn-x--sm{filter:drop-shadow(-2px 2px 0 var(--x-red)) drop-shadow(2px -2px 0 #8aa0ff)}
.btn-x--sm:hover{filter:drop-shadow(-5px 5px 0 var(--x-red)) drop-shadow(5px -5px 0 #8aa0ff)}

/* Красная кнопка премьеры: там наоборот, фирменный синий виден
   хорошо, а красную тень надо осветлить. */
.btn-x--red{filter:drop-shadow(-3px 3px 0 #ff8a85) drop-shadow(3px -3px 0 var(--x-blue))}
.btn-x--red:hover{filter:drop-shadow(-9px 9px 0 #ff8a85) drop-shadow(9px -9px 0 var(--x-blue))}

/* Вторичное действие: расхождение теперь на всех таких кнопках,
   а не только в первом экране. */
.btn-x--ghost{
  text-shadow:0 0 0 rgba(249,66,58,0), 0 0 0 rgba(48,84,255,0);
  transition:transform .42s var(--x-ease),filter .42s var(--x-ease),
             text-shadow .4s var(--x-ease);
}
.btn-x--ghost:hover{
  text-shadow:-.2em .13em 0 rgba(249,66,58,.4),
               .2em -.13em 0 rgba(48,84,255,.4);
}
.btn-x--ghost:active{
  text-shadow:-.08em .05em 0 rgba(249,66,58,.3),
               .08em -.05em 0 rgba(48,84,255,.3);
}
.btn-x--ghost.is-mute:hover{text-shadow:none}

/* ── КАРТОЧКИ: ПОДСВЕТКА ТЕМНЕЕ ────────────────────────────
   Синяя заливка в 28% перебивала содержимое: карточка кричала
   громче текста в ней. Берём фон страницы и осветляем на два
   тона — движение видно, а читать не мешает. */
.gx>*:not(.gx--empty):hover,
.prod:hover,
.faq details:hover{background:#161628}
.rows li:hover,
#agenda .agenda-item:hover{background:#12121f}

/* ── ПРОДУКТЫ В РЯД ────────────────────────────────────────
   Три карточки рядом: крупный знак, описание приходит снизу по
   наведению. Место под описание зарезервировано всегда — иначе
   соседние карточки прыгали бы при наведении на одну. */
.prods--row{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:rgba(238,244,250,.2);
}
.prods--row .prod{
  display:flex;flex-direction:column;align-items:flex-start;
  justify-content:flex-start;gap:0;
  background:var(--x-bg);
  padding:clamp(26px,3.4vh,40px) clamp(20px,2vw,32px);
  min-height:clamp(210px,26vh,270px);
  grid-template-columns:none;
}
.prods--row .prod__logo{margin-bottom:auto}
.prods--row .prods img,
.prods--row .prod img{height:clamp(26px,3vw,42px);width:auto;max-width:100%}
.prods--row .prod__t{
  position:static;max-width:none;padding-right:0;
  margin-top:clamp(18px,2.4vh,26px);
  font-size:var(--t-s);line-height:1.5;
  color:rgba(238,244,250,.92);
  opacity:0;transform:translateY(8px);
  transition:opacity .4s var(--x-ease),transform .4s var(--x-ease);
}
.prods--row .prod:hover .prod__t,
.prods--row .prod:focus-visible .prod__t{opacity:1;transform:none}
.prods--row .prod::after{display:none}

/* На тач-устройствах наведения нет — описание стоит открытым. */
@media (hover:none){
  .prods--row .prod__t{opacity:1;transform:none}
}
@media (max-width:900px){
  .prods--row{grid-template-columns:1fr}
  .prods--row .prod{min-height:0}
}

/* ── КНОПКА «НАВЕРХ» ───────────────────────────────────────
   Появляется, когда первый экран уже позади: на самом верху она
   бессмысленна и только загораживает кадр. */
.up{
  position:fixed;right:clamp(14px,2vw,28px);bottom:clamp(14px,2vw,28px);
  z-index:90;width:clamp(44px,3.4vw,52px);aspect-ratio:1;
  display:grid;place-items:center;border:0;padding:0;cursor:pointer;
  border-radius:50%;
  background:rgba(238,244,250,.1);
  backdrop-filter:blur(14px) saturate(1.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:inset 0 0 0 1px rgba(238,244,250,.22),
             0 8px 26px -10px rgba(7,7,21,.9);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .35s var(--x-ease),transform .35s var(--x-ease),
             visibility .35s,background .3s var(--x-ease);
}
.up.is-on{opacity:1;visibility:visible;transform:none}
.up:hover{background:rgba(48,84,255,.34)}
.up svg{width:42%;height:42%;display:block;fill:none;
  stroke:var(--x-ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){
  .up{transition:opacity .01ms,visibility .01ms}
}

/* ── ЗНАК ПЕРЕД СТРОКОЙ ПРО ВЫСТАВКУ ───────────────────────*/
.day__all{display:flex;align-items:center;gap:.6em;
  margin-top:clamp(10px,1.4vh,16px)}
.day__mark{
  flex:none;display:block;width:1.05em;height:1.05em;
  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;
}

/* ── ВЫДЕЛЕНИЕ В ПРЕМЬЕРЕ ──────────────────────────────────*/
.sig-x__hl{font-weight:600;color:#fff}

/* Логотип «Авандок» в строке с датой и городом — прижат вправо */
.ft__meta{display:flex;align-items:center;gap:clamp(14px,2vw,28px);flex-wrap:wrap}
.ft__meta-logo{margin-left:auto;line-height:0}
.ft__meta-logo img{height:clamp(26px,2.6vw,38px);width:auto;opacity:.9}
@media (max-width:560px){
  .ft__meta-logo{margin-left:0;width:100%}
}

/* ── ПЕРВЫЙ ЭКРАН: КАДР РАЗДВИГАЕТСЯ ШИРЕ ──────────────────
   Половинки уходили на 24% и «Лужники» показывались краем.
   Уводим на 42% и убираем масштабирование: увеличенный кадр
   съедал ту самую щель, ради которой всё и делается. */
@supports (animation-timeline:scroll()){
  .hero-x__half--l{animation-name:xSplitWideL}
  .hero-x__half--r{animation-name:xSplitWideR}
}
@keyframes xSplitWideL{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(-46%,0,0)}
}
@keyframes xSplitWideR{
  from{transform:translate3d(0,0,0)}
  to  {transform:translate3d(46%,0,0)}
}

/* Правая колонка ещё правее: между текстом и таймингом должен
   читаться световой шов, а не «два столбца рядом». */
@media (min-width:901px){
  .hx-right{padding-left:clamp(24px,3.6vw,64px)}
}

/* ── БЛОК ПРО АВАНДОК: В ОДИН ЭКРАН ────────────────────────
   Кадр держит фиксированную высоту, цифры и подписи лежат прямо
   на нём внизу. Затемнение идёт только к низу: если гасить весь
   кадр, город превращается в тёмное пятно и картинки будто нет.
   Высота подобрана так, чтобы заголовок, кадр и цифры влезали в
   один экран на ноутбуке. */
.numsx{
  position:relative;isolation:isolate;
  margin-top:clamp(18px,2.4vh,30px);border-top:0;
  min-height:clamp(300px,42vh,440px);
  display:flex;flex-direction:column;justify-content:flex-end;
}
.numsx__bg{position:absolute;inset:0;height:auto;z-index:0}
.numsx__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%}
.numsx__bg::after{
  background:linear-gradient(180deg,
    rgba(7,7,21,.12) 0%, rgba(7,7,21,.18) 34%,
    rgba(7,7,21,.62) 62%, rgba(7,7,21,.9) 84%, var(--x-bg) 100%)}
.numsx__seam{height:100%}

.numsx__row{height:auto;padding:0 0 clamp(4px,.6vh,8px);align-items:end}
.numsx__row b{font-size:clamp(34px,4vw,64px);
  text-shadow:0 2px 18px rgba(7,7,21,.95)}
.numsx__cap{background:transparent;gap:0}
.numsx__cap>div{background:transparent;
  padding:0 clamp(18px,1.8vw,30px) clamp(22px,2.8vh,34px)}
.numsx__cap span{
  font-size:var(--t-s);letter-spacing:.01em;text-transform:none;
  font-weight:500;line-height:1.35;color:#fff;
  text-shadow:0 1px 12px rgba(7,7,21,.98)}

/* Значки реестров поднимаем на уровень заголовка: они относятся
   к утверждению о сертификации, а не к цифрам под ним. Текст
   при этом надо подрезать по ширине — иначе строки уезжают под
   знаки и читаются поверх них. */
#about .sx__h{position:relative}
@media (min-width:901px){
  #about .certs{position:absolute;right:0;top:0;margin:0;
    align-items:flex-start}
  /* Оставляем полосу под знаки справа. Считаем от ширины
     заголовочного блока, а не от экрана: сам блок уже, и
     ограничение в символах делало из заголовка узкий столбик. */
  #about .sx__t{max-width:calc(100% - 210px)}
  #about .sx__l{max-width:calc(100% - 210px)}
}

/* ── ПРОГРАММА: РАСКРЫВАЮЩИЕСЯ ПУНКТЫ ──────────────────────
   Раскрываются только те, где есть что показать. Остальные
   остаются строкой: стрелка у пустого пункта обманывает. */
#agenda .agenda-item--open .agenda-item-head{cursor:pointer;position:relative}
.agenda-chev{
  flex:none;margin-left:auto;width:.62em;height:.62em;
  border-right:2px solid var(--x-red);border-bottom:2px solid var(--x-red);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--x-ease);
}
#agenda .agenda-item.is-open .agenda-chev{
  transform:rotate(-135deg) translate(-2px,-2px)}
.agenda-more{
  padding:0 0 clamp(16px,2.2vh,24px) calc(clamp(16px,1.35vw,21px) + clamp(18px,1.8vw,28px));
}
.agenda-more__row{display:grid;gap:5px;max-width:72ch}
.agenda-more__row b{font-size:var(--t-m);font-weight:600;color:#fff;line-height:1.35}
.agenda-more__row span{font-size:var(--t-s);font-weight:300;line-height:1.55;
  color:rgba(238,244,250,.82)}
#agenda .agenda-item-head{display:flex;align-items:center;gap:clamp(18px,1.8vw,28px)}

/* ── ФИНАЛЬНЫЙ КАДР ВЫШЕ ───────────────────────────────────
   Само место блока не двигаем, поднимаем содержимое кадра:
   кровля с логотипом уходила под обрез. */
.fin__bg img{object-position:center 22%}
.fin__veil{
  background:
    radial-gradient(76% 74% at 27% 50%,rgba(7,7,21,.9) 0%,rgba(7,7,21,.62) 46%,
      rgba(7,7,21,.2) 84%,transparent 100%),
    linear-gradient(180deg,var(--x-bg) 0%,rgba(7,7,21,.26) 15%,rgba(7,7,21,.18) 45%,
      rgba(7,7,21,.4) 76%,var(--x-bg) 100%)}

/* ── СПИКЕРЫ: ЦВЕТ И ТЕКСТ ПО НАВЕДЕНИЮ ────────────────────
   Спокойное состояние: обесцвеченный кадр, имя и должность под
   ним. При наведении кадр оживает цветом, а тема выступления
   проявляется поверх — она нужна тому, кто уже заинтересовался
   человеком, и только загромождает сетку у остальных. */
.spk--real .spk__ph img:not(.spk__cut){
  filter:saturate(0) brightness(.5) contrast(1.06);
  transition:filter .55s var(--x-ease)}
.spk--real:hover .spk__ph img:not(.spk__cut){
  filter:saturate(1) brightness(.72) contrast(1.02)}
.spk--real .spk__cut{
  filter:saturate(.2) contrast(1.02);
  transition:filter .55s var(--x-ease),transform .8s var(--x-ease)}
.spk--real:hover .spk__cut{filter:saturate(1) contrast(1)}

/* Тема выступления: лежит в подписи, всплывает по наведению */
.spk figcaption{position:relative;overflow:hidden}
.spk p{
  margin:0;max-height:0;opacity:0;transform:translateY(6px);
  text-transform:none;letter-spacing:.01em;font-size:var(--t-s);
  line-height:1.45;color:rgba(238,244,250,.86);
  transition:max-height .45s var(--x-ease),opacity .35s var(--x-ease),
             transform .45s var(--x-ease),margin .45s var(--x-ease);
}
.spk figure:hover p,
.spk figure:focus-within p{max-height:6em;opacity:1;transform:none;margin-top:9px}

/* Значок соцсети — в правом нижнем углу кадра, поверх затемнения */
.spk__soc{
  position:absolute;right:clamp(10px,1vw,16px);bottom:clamp(10px,1vw,16px);
  z-index:4;width:clamp(30px,2.4vw,36px);aspect-ratio:1;
  display:grid;place-items:center;border-radius:50%;
  background:rgba(238,244,250,.12);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(238,244,250,.26);
  opacity:0;transform:translateY(6px);
  transition:opacity .35s var(--x-ease),transform .35s var(--x-ease),
             background .3s var(--x-ease);
}
.spk figure:hover .spk__soc,
.spk__soc:focus-visible{opacity:1;transform:none}
.spk__soc:hover{background:var(--x-blue)}
.spk__soc svg{width:56%;height:56%;fill:var(--x-ink);display:block}
@media (hover:none){
  .spk p{max-height:6em;opacity:1;transform:none;margin-top:9px}
  .spk__soc{opacity:1;transform:none}
}

/* ── ФОТО У ЦИТАТ ──────────────────────────────────────────
   Фон кружка — тот же, что у страницы, плюс тонкая синяя
   обводка: белёсая заливка выбивалась из полосы. */
img.ava{
  background:var(--x-bg);
  border:1px solid rgba(48,84,255,.55);
  box-shadow:0 0 0 3px rgba(48,84,255,.1);
  object-fit:cover;object-position:center 22%}