/* Mr Lambo x Пабло — дизайн-система лендинга осеннего тура 2026.
   От афиши «квадро»: гранж-леттеринги имён и красные рваные штампы дат —
   КАРТИНКАМИ из PSD (родная фактура, шрифтом не набрать). Города и
   кнопки — Druk Cyr (тот же склад тяжёлого узкого гротеска, что города
   на афише), мелкий служебный текст — Golos Text.
   ФОН НЕ БИТМАП (урок LeanJe: растянутая картинка пикселит на ретине) —
   чёрная стена одним цветом, фактуру несут сами леттеринги и штампы.
   Геометрия: скругления --r-btn/--r-panel — правка заказчика 04.09
   («чтобы выглядело чуть дороже, не так топорно»); прямые углы отменены. */

:root{--r-btn:6px; --r-panel:14px}  /* кнопки — «прям минимальное» скругление (правка 04.09) */

html{scroll-behavior:smooth;overflow-anchor:none}

/* ТИПОГРАФИКА — три роли: .ml-krup — город (Druk Bold),
   .ml-slug — служебная строка (Golos 400). Даты набираются ШТАМПАМИ
   с афиши (картинки), текстовой роли даты нет. */
.ml-krup{font-family:'Druk Cyr','Arial Narrow',sans-serif;
  font-weight:700;line-height:.96;letter-spacing:.01em;text-transform:uppercase;
  color:var(--bumaga)}
.ml-slug{font-family:'Golos Text',sans-serif;font-weight:400;font-size:14px;
  line-height:1.4;letter-spacing:.01em;color:var(--pyl)}

/* КНОПКА — красная плашка в цвет штампов. Ховер — бумажная заливка
   слева направо (приём всего парка); красным заливать нельзя,
   кнопка уже красная. Заливка слоем ::before c z-index:-1. */
.ml-btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;padding:16px 34px 18px; /* оптика: Druk сидел низко (замер 3x: зазор 22/18.3) — верх/низ поменяны */
  font-family:'Druk Cyr','Arial Narrow',sans-serif;
  font-weight:700;font-size:26px;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  background:var(--knopka);color:var(--knopka-txt);border-radius:var(--r-btn);
  transition:color .2s}
.ml-btn::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--knopka-hover);transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.3,1)}
@media (hover:hover){
  .ml-btn:hover::before{transform:scaleX(1)}
  .ml-btn:hover{color:var(--knopka-hover-txt)}
}
@media (prefers-reduced-motion:reduce){
  .ml-btn::before,.ml-soc::before,.ml-ikon::before{transition:none}
}

/* КНОПКА-ПРИЗРАК — контур акцентом (соцсети подвала) */
.ml-soc{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;
  justify-content:center;gap:10px;padding:13px 28px 15px; /* оптика Druk: было 15/13 — текст низко */
  font-family:'Druk Cyr','Arial Narrow',sans-serif;font-weight:700;
  font-size:19px;line-height:1;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;color:var(--bumaga);background:transparent;
  box-shadow:inset 0 0 0 2px var(--kontur);
  border-radius:var(--r-btn);transition:color .2s}
.ml-soc::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--knopka-hover);transform:scaleX(0);transform-origin:left;
  transition:transform .38s cubic-bezier(.2,.7,.3,1)}
.ml-soc svg{width:19px;height:19px;display:block;flex:none}
@media (hover:hover){
  .ml-soc:hover::before{transform:scaleX(1)}
  .ml-soc:hover{color:var(--knopka-hover-txt)}
}

/* БЕГУЩАЯ СТРОКА — красная лента в цвет штампов. Дорожка = две
   одинаковые половины; правка текста = правка ВСЕХ копий. */
.ml-ticker{background:var(--lenta);overflow:hidden;white-space:nowrap;
  position:relative;z-index:6; /* выше туман-слоя hero: лента накрывает пустой низ сцены (сжатие стыков 04.09) */
  padding:10px 0 10px} /* оптика: замер 12/10.7 при 11/9 */
.ml-ticker-track{display:inline-block;animation:ml-marquee 42s linear infinite}
.ml-ticker-track b,.ml-ticker-track i{
  font-family:'Druk Cyr','Arial Narrow',sans-serif;
  font-size:24px;line-height:1;letter-spacing:.07em;text-transform:uppercase;
  color:var(--lenta-txt)}
.ml-ticker-track b{font-weight:700}
.ml-ticker-track i{font-style:normal;font-weight:500;margin:0 22px;opacity:.55}
@keyframes ml-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ml-ticker-track{animation:none}}

/* 16+ — в тонкой рамке */
.ml-age{display:inline-flex;align-items:center;justify-content:center;
  padding:5px 8px 6px; /* оптика Druk: чернила низко в кегельной */
  font-family:'Druk Cyr','Arial Narrow',sans-serif;
  font-weight:500;font-size:14px;line-height:1;letter-spacing:.04em;
  color:var(--pyl);box-shadow:inset 0 0 0 1px var(--linia);
  border-radius:calc(var(--r-btn) - 2px)}

/* СОЦ-ИКОНКА шапки */
.ml-ikon{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;color:var(--bumaga);background:var(--ikon-fon);
  box-shadow:inset 0 0 0 2px var(--ikon-kant);border-radius:var(--r-btn);
  transition:color .2s}
.ml-ikon::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--knopka-hover);transform:scaleX(0);transform-origin:left;
  transition:transform .34s cubic-bezier(.2,.7,.3,1)}
.ml-ikon svg{width:21px;height:21px;display:block}
@media (hover:hover){
  .ml-ikon:hover::before{transform:scaleX(1)}
  .ml-ikon:hover{color:var(--knopka-hover-txt)}
}

@media (max-width:640px){
  .ml-btn{display:block;padding:14px 18px 16px;font-size:22px} /* оптика Druk */
  .ml-soc{width:100%;font-size:18px}
  .ml-ticker{padding:7px 0 7px} /* оптика */
  .ml-ticker-track b,.ml-ticker-track i{font-size:20px}
  .ml-ticker-track i{margin:0 14px}
}