/* ДИЗАЙН-СИСТЕМА KITANA — единственный источник стилей лендинга.
   Всё, кроме вёрстки самих блоков, живёт здесь.

   ПАЛИТРА СНЯТА С АФИШИ ПИПЕТКОЙ, не придумана (замер по ядру заливки,
   эрозия 5×5, см. разбор в README):
   у афиши ДВА жёлтых, и это её главный приём —
     #FFC500 насыщенный  — логотип, подзаголовок, знак ФУТУРА;
     #FFE075 бледный     — список городов и дат.
   На сайте это разделение сохранено и стало правилом:
   насыщенный = действие (кнопки, ховер, лого), бледный = информация
   (даты, дни недели, служебные строки). Смешивать их нельзя.
   Фон — не чёрный, а тёмная хвоя с кадра (#0B1305): именно она делает
   жёлтый «дачным», а не «диджитальным».                                 */

:root{
  /* фон и поверхности */
  --fon:      #0B1305;   /* глубокая хвоя, фон страницы */
  --fon-2:    #14200A;   /* плита города, панель */
  --fon-3:    #1E2C10;   /* плита под курсором, обводки */
  --obvodka:  rgba(241,239,226,.12);

  /* акценты афиши */
  --akcent:   #FFC500;   /* действие */
  --akcent-2: #FFE075;   /* информация */
  --trava:    #6D771C;   /* олива с газона: линии, приглушённое */

  /* текст */
  --tekst:    #F1EFE2;   /* тёплый белый в тон футболке на кадре */
  --tekst-2:  rgba(241,239,226,.60);
  --na-zhyoltom:#0B1305; /* текст на жёлтой заливке — только фон страницы */

  /* геометрия: скругления заказчик просит «для дороговизны» (правка
     LeanJe 21.08), срезы углов по всему парку запрещены */
  --r-btn:   10px;
  --r-panel: 16px;

  /* сетка */
  --shirina: 1200px;
  --pole:    40px;

  /* ЗАГОЛОВОЧНЫЙ ШРИФТ — одна точка переключения на весь сайт.
     Fira Sans Extra Condensed 700 стоит вместо Bahnschrift с афиши
     (тот системный и как веб-шрифт не раздаётся). Обоснование выбора
     и что было до него — в shrifty.css. */
  --shrift-zag: 'Fira Sans Extra Condensed','Golos Text',sans-serif;
  --zhir-zag: 700;

  --bystro: .18s cubic-bezier(.4,0,.2,1);
  --plavno: .38s cubic-bezier(.4,0,.2,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--fon); color:var(--tekst);
  font:400 17px/1.5 'Golos Text',-apple-system,Segoe UI,sans-serif;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

.wrap{width:100%;max-width:var(--shirina);margin:0 auto;padding:0 var(--pole)}

/* ── ТИПОГРАФИКА ───────────────────────────────────────────────────── */
/* Заголовочный шрифт — только заглавными и только крупно: в мелком
   кегле узкий гротеск теряет читаемость. Служебные строки — Golos. */
.zag{
  font-family:var(--shrift-zag); font-weight:var(--zhir-zag);
  text-transform:uppercase; line-height:.86; letter-spacing:-.005em;
}
.sluzhebno{
  font-size:13px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tekst-2);
}

/* ── КНОПКИ ────────────────────────────────────────────────────────── */
/* Единый ховер всего кликабельного в парке: заливка слева направо.
   ВАЖНО (грабли LeanJe): заливать ховером ЦВЕТОМ САМОЙ КНОПКИ нельзя —
   эффекта не видно. Жёлтая кнопка на ховере заливается светлой костью
   (приём LeanJe: красный → кость; бледный жёлтый контраста не давал —
   правка промоутера 24.08), контурная — заливается насыщенным жёлтым.
   Техника: отдельный слой ::before с z-index:-1 внутри своего контекста
   наложения (isolation:isolate) — ложится поверх фона, но под текст,
   поэтому текст не надо оборачивать в span. */
.knopka{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  position:relative;isolation:isolate;overflow:hidden;
  font-weight:600;font-size:16px;letter-spacing:.02em;
  padding:16px 34px;border-radius:var(--r-btn);
  transition:color var(--bystro);
}
.knopka::before{
  content:'';position:absolute;z-index:-1;inset:0;
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--plavno);
}
.knopka:focus-visible::before{transform:scaleX(1)}

.knopka-glavnaya{background:var(--akcent);color:var(--na-zhyoltom)}
.knopka-glavnaya::before{background:var(--tekst)}

.knopka-kontur{
  color:var(--akcent);box-shadow:inset 0 0 0 2px var(--akcent);
}
.knopka-kontur::before{background:var(--akcent)}
.knopka-kontur:focus-visible{color:var(--na-zhyoltom)}

/* Тёмная кнопка — для жёлтых карточек столиц (тёмная хвоя на жёлтом),
   ховер — заливка светлой костью с тёмным текстом. */
.knopka-tyomnaya{background:var(--fon);color:var(--akcent)}
.knopka-tyomnaya::before{background:var(--tekst)}
.knopka-tyomnaya:focus-visible{color:var(--na-zhyoltom)}

.knopka-tihaya{
  color:var(--tekst);box-shadow:inset 0 0 0 1px var(--obvodka);
  background:var(--fon-2);font-size:15px;padding:13px 24px;
}
.knopka-tihaya::before{background:var(--akcent)}
.knopka-tihaya:focus-visible{color:var(--na-zhyoltom);box-shadow:inset 0 0 0 1px var(--akcent)}

/* ── СОЦ-ИКОНКИ ────────────────────────────────────────────────────── */
.soc{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:var(--r-btn);
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--tekst);background:rgba(11,19,5,.62);
  box-shadow:inset 0 0 0 1px var(--obvodka);
  transition:color var(--bystro),box-shadow var(--bystro);
}
.soc::before{content:'';position:absolute;z-index:-1;inset:0;background:var(--akcent);
  transform:scaleX(0);transform-origin:left;transition:transform var(--plavno)}
.soc:focus-visible::before{transform:scaleX(1)}
.soc:focus-visible{color:var(--na-zhyoltom);box-shadow:inset 0 0 0 1px var(--akcent)}
.soc svg{width:22px;height:22px;fill:currentColor}

/* Ховеры — только на устройствах с настоящим курсором: на таче :hover
   срабатывает по тапу и ЗАЛИПАЕТ до следующего касания (вернулся из
   кассы — кнопка так и стоит залитой). :focus-visible от ховеров
   отделён и живёт выше, вне медиазапроса — клавиатуре подсветка нужна
   везде. Образец приёма — футер, он был так завёрнут с самого начала. */
@media (hover:hover){
  .knopka:hover::before{transform:scaleX(1)}
  .knopka-kontur:hover{color:var(--na-zhyoltom)}
  .knopka-tyomnaya:hover{color:var(--na-zhyoltom)}
  .knopka-tihaya:hover{color:var(--na-zhyoltom);box-shadow:inset 0 0 0 1px var(--akcent)}
  .soc:hover::before{transform:scaleX(1)}
  .soc:hover{color:var(--na-zhyoltom);box-shadow:inset 0 0 0 1px var(--akcent)}
}

/* ── СЛУЖЕБНОЕ ─────────────────────────────────────────────────────── */
/* Подпись только для экранных читалок: у поля поиска на экране плейсхолдер,
   но плейсхолдер подписью не считается. */
.vizualno-skryto{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── ФОКУС С КЛАВИАТУРЫ ────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--akcent);outline-offset:3px}

/* ── ЗЕРНО ─────────────────────────────────────────────────────────── */
/* Ровные тёмные заливки на больших экранах полосят (бандинг). Зерно
   поверх фона его прячет и заодно роднит страницу с плёночным кадром. */
.zerno{
  position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}