/* Дизайн-контракт Mantra Space. Правила — в DESIGN.md в корне проекта.
   Здесь только их техническая запись: шрифты, цвета, шкала отступов. */

/* --- Шрифты. Лежат рядом, не с чужих серверов: так быстрее и не зависит
       от доступности Google в России. --------------------------------- */

@font-face {
  font-family: 'Druk Wide Cy';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(../fonts/DrukWideCyWeb-Medium.woff2) format('woff2'),
       url(../fonts/DrukWideCyWeb-Medium.woff) format('woff');
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Inter-400-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Inter-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Inter-600-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Inter-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Токены ------------------------------------------------------------ */

:root {
  /* Три цвета брендбука и ничего сверх. */
  --color-bg: #000000;
  --color-text: #ffffff;
  --color-accent: #e2ad5d;
  --color-muted: #e0e0e0;

  /* Служебные — только для форм и сообщений, в макетах не участвуют. */
  --color-error: #ff6b5e;
  --color-success: #61fd7d;

  --font-display: 'Druk Wide Cy', 'Arial Black', sans-serif;
  --font-text: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;

  --content-width: 1200px;
}

/* --- База -------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* Все заголовки — Druk, капсом. Правило действует на уровне тегов,
   чтобы новые блоки не приходилось помнить одевать в класс .title. */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  overflow-wrap: anywhere;
  margin: 0;
}

/* Правило брендбука: кегль заголовка = межстрочное расстояние.
   Именно плотный набор строка-к-строке даёт характер афиши. */
.title {
  font-family: var(--font-display);
  font-weight: 500;
  text-transform: uppercase;
  line-height: 1;
  letter-spacing: 0;
  margin: 0;
  /* Страховка: что бы ни ввели в админку, страница не уедет вбок. */
  overflow-wrap: anywhere;
}

/* Кегль первого экрана зависит от длины самого длинного слова.
   Druk Wide тратит до 1.08 кегля на символ (кириллица шире латиницы —
   замерено на самом шрифте), поэтому в расчёте берём 1.1 с запасом:
   кегль ≈ 92vw / (1.1 × длина слова).
   Класс выбирает events/typography.py — руками не проставлять. */
.title--hero      { font-size: clamp(32px, 11vw, 140px); }  /* до 7 знаков */
.title--hero-md   { font-size: clamp(26px, 8vw, 110px); }   /* 8–10 */
.title--hero-sm   { font-size: clamp(20px, 5.8vw, 84px); }  /* 11–14 */
.title--hero-xs   { font-size: clamp(16px, 4vw, 60px); }    /* длиннее */

.title--page   { font-size: clamp(32px, 7vw, 72px); }
.title--block  { font-size: clamp(22px, 4vw, 36px); }

/* Строка «28.08 · ПЯТНИЦА · КОНЦЕРТ» — мелко, капсом, с разрядкой. */
.meta-line {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.meta-line__dot { color: var(--color-accent); padding: 0 var(--space-1); }

a { color: inherit; }

/* Золотой на чёрном — контраст 8.9:1, проходит.
   Золотой на белом — 2.1:1, НЕ проходит: на светлом фоне так не писать. */
.accent { color: var(--color-accent); }

.wrap {
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--space-3);
}

img { max-width: 100%; height: auto; display: block; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}