/* Общая оболочка праздничных страниц.
   Своё у каждого праздника - блоки и палитра; общее - ритм секций,
   типографика заголовков, крошки и кнопка. Палитра приходит из
   tokens.css по data-holiday на <html>, поэтому здесь нет ни одного
   цвета праздника - только ссылки на токены.

   Правка этого файла меняет все четыре лендинга сразу. */

body.prazdnik {
  background: var(--bg);
  color: var(--text);
}

/* Секция праздника: вертикальный ритм один на всех - 116 на десктопе,
   52 на телефоне (макет: padding [116, 56] и [52, 20]).

   Заливка цветом страницы здесь не украшение, а необходимость. Слой
   видео лежит под фонами блоков (.fon-video, z-index: -1 в base.css), и
   любая секция без своей заливки показывает ролик насквозь: на четырёх
   лендингах так протекало одиннадцать секций, текст ложился прямо на
   движущийся кадр и читался с трудом - замер контраста ловил там до 23
   строк ниже планки на страницу. В макете видео видно только в первом
   экране и в окнах, у остальных блоков сплошной фон (эталон wKZnT и
   соседние). Первый экран своей заливки не получает - у него свой
   класс, не .hw-sec. */
.hw-sec {
  padding-block: 116px;
  background: var(--bg);
}

.hw-sec--deep { background: var(--bg-deep); }

@media (max-width: 860px) {
  .hw-sec { padding-block: 52px; }
}

/* Высоты строк везде целыми пикселями, а не множителем. Причина: pen
   рисует строку целым числом пикселей, браузер - нет. Множитель 1.1 на
   заголовке 52px даёт 57,2 вместо 57, и на каждом заголовке блок уезжает
   на доли пикселя, а по сумме секции - на целый. Найдено замером в пяти
   блоках Хэллоуина сразу. */

/* Надстрочник: Inter 12/700, разрядка 3, заглавными. */
.hw-kicker {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--kicker);
  line-height: 15px;
  letter-spacing: var(--kicker-ls);
  text-transform: uppercase;
  color: var(--accent-text);
}

.hw-kicker--lime { color: var(--accent-2); }

/* Заголовок секции: Manrope 52/800. */
.hw-h2 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: var(--h2);
  line-height: 57px;   /* 52 x 1.10 из --h2-lh */
  letter-spacing: var(--h2-ls);
  color: var(--text);
}

.hw-lead {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-2);
}

@media (max-width: 860px) {
  /* На телефоне кегль надстрочника меньше - и строка тоже: 15px остались
     бы десктопные и давали бы лишние 2px над каждым заголовком блока. */
  /* Разрядка на телефоне 3px, а не токенные 2,4: так нарисовано во всех
     пяти праздничных блоках, где надстрочник есть (проверено по дампам
     Sfba1, P0c1eN, RJYso, Su4Kc, Z5I7Y1). Токен описывает другие
     страницы, его не трогаем. */
  .hw-kicker { font-size: var(--m-kicker); line-height: 13px; letter-spacing: 3px; }   /* 11 x 1.21 */
  /* Межстрочный 1.1, а не токен --m-h2-lh (1.12): в праздничных макетах
     на телефоне у всех заголовков секций нарисован ровно 1.1 - проверено
     по дампам P0c1eN, RJYso, kJ5ai, Su4Kc, Z5I7Y1. Токен снят с других
     страниц, их он и описывает; трогать его нельзя. */
  .hw-h2 { font-size: var(--m-h2); line-height: 31px; letter-spacing: var(--m-h2-ls); }   /* 28 x 1.1 */
  .hw-lead { font-size: var(--m-lead); }
}

/* Крошки: собираются сниппетом kCrumbs из дерева страниц. */
.crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 15px;
  color: var(--text-3);
}

/* На телефоне крошки мельче: 11px и строка по метрикам Inter. */
@media (max-width: 860px) {
  .crumbs { font-size: 11px; line-height: 13px; }   /* 11 x 1.21 */
}

.crumbs__link:hover { color: var(--text-2); }

.crumbs__sep { color: var(--text-3); }

/* Фокус на тёмном фоне: малиновый обвод на ночном фоне почти не виден,
   поэтому на праздничных страницах он акцентного цвета праздника.

   Правило привязано к data-holiday, а не к одному классу body. Хаб
   праздников тоже носит класс prazdnik, но палитры праздника у него нет
   и --accent там пуст. Пустой var() в outline - это не "правило не
   сработало", а недействительное значение: свойство падает в начальное,
   то есть в outline-style: none, и малиновое кольцо из base.css уже не
   возвращается. Так на хабе пропадало кольцо фокуса сразу на всех
   элементах страницы - все 46 на компьютере и 29 на телефоне. Запасной
   цвет в var() оставлен на случай новой страницы без палитры. */
html[data-holiday] body.prazdnik :focus-visible {
  outline: 2px solid var(--accent, var(--magenta));
  outline-offset: 3px;
}