/*
 * Палитра брендбука для главной. Этот слой подключается после действующих
 * стилей и меняет только цветовые токены и состояния: размеры, сетки и
 * порядок карточек афиши, новостей и студий остаются в исходных CSS.
 */
:root {
  --ink: #00323c;
  --ink-soft: #47182e;
  --paper: #e9e4e1;
  --surface: #fffdfa;
  --line: #d6cbc3;
  --accent: #731637;
  --white: #fffdfa;
}

::selection { color: #fffdfa; background: #731637; }
html { scrollbar-color: #8b6587 #e9e4e1; }

.floating-header {
  background: #731637;
  box-shadow: 0 18px 60px rgba(71, 24, 46, .24), inset 0 1px 0 rgba(255, 255, 255, .16);
}

.nav-action,
.button-accent,
.news-action-button { color: #fffdfa; background: #731637; }

.nav-action:hover,
.button-accent:hover,
.news-action-button:hover { color: #fffdfa; background: #84243e; }

.button-outline { border-color: #c28a94; color: #fffdfa; background: #731637; }
.button-outline:hover { color: #fffdfa; background: #c13d5d; }
.button-dark { color: #fffdfa; background: #731637; }
.button-dark:hover { background: #47182e; }

.hero { background: #731637; }
.hero-shade {
  background: transparent;
}

.eyebrow,
.next-event a,
.event-overlay a,
.studio-showcase-card a { color: #f2a4b6; }

.next-event { background: rgba(71, 24, 46, .76); box-shadow: 0 22px 70px rgba(71, 24, 46, .30), inset 0 1px 0 rgba(255, 255, 255, .14); }
.hero-facts { background: rgba(115, 22, 55, .88); }

/* Фирменный геометрический модуль. Слой декоративный, клики проходят сквозь него. */
.hero-shade::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-color: #731637;
  background-image: linear-gradient(rgba(115, 22, 55, .58), rgba(115, 22, 55, .76)), url('../images/brandbook-home-module-original.png');
  background-repeat: no-repeat, repeat;
  background-position: center, left top;
  background-size: 100% 100%, auto 320px;
  /* Та же система координат и cover, что у фонового изображения 1672 × 941. */
  -webkit-mask: url('../images/hero-left-mask.svg') center / 100% 100% no-repeat;
  mask: url('../images/hero-left-mask.svg') center / 100% 100% no-repeat;
}

.mega-panel, .mobile-menu { background-color: #731637; }
.mega-panel > p, .mega-panel > div span, .mobile-menu strong { color: #e9e4e1; }
.hero-slider-controls button { background-color: #731637; }
.skip-link { color: #fffdfa; background-color: #731637; }
.news .news-action-button { color: #fffdfa; background-color: #731637; }
.news .news-action-button:hover { color: #fffdfa; background-color: #47182e; }
.section-title > a.button { color: #fffdfa; background-color: #731637; }

.event-card::after { background: linear-gradient(0deg, rgba(71, 24, 46, .88), transparent 66%); }

.directions a { background: rgba(255, 253, 250, .64); }
.directions a:hover { background: #fffdfa; }

.news-feature,
.news-list article,
.visit-copy { background: #fffdfa; }

.news-list a { color: #fffdfa; background: #731637; }
.news-list a:hover { background: #84243e; }

.studio-showcase-card { background: #00323c; }
.studio-showcase-card::after { background: linear-gradient(0deg, rgba(71, 24, 46, .88), transparent 72%); }
.studio-showcase-action { background: #00323c; }
.studio-showcase-action p { color: #f2a4b6; }

.calendar-link { color: #fffdfa; background: #731637; }
.calendar-link:hover { color: #fffdfa; background: #84243e; }

/* Названия категорий студий на главной. */
.studio-catalog.section .section-title h2 { color: #731637; }

/* Требование для фильтров афиши: чёрный фон не меняется при наведении. */
.events .pushkin-filter a:hover { color: #f6007d; background: #202020; }
.choreography-feature { background: #00323c; }
.choreography-card h3 { background: linear-gradient(180deg, transparent, rgba(71, 24, 46, .86) 82%); }
.choreography-card__age { color: #00323c; background: #d6cbc3; }
.choreography-card__price { background: rgba(71, 24, 46, .82); }
.choreography-card__enrolling { color: #00323c; background: #c9dfd0; }

@media (max-width: 700px) {
  .floating-header,
  .next-event,
  .hero-facts { background: #731637; }
  .hero-shade { background: transparent; }
  .hero-shade::after { background-size: 100% 100%, auto 240px; }
}