/* LeanJe — дизайн-система лендинга тура 2026.
   От афиши дизайнера: готическое рваное лого LEANJE и надписи «ТУР»,
   «2026» — картинками из PSD (родной шрифт афиши, Rainer Test Bold,
   свободного аналога нет). Весь остальной шрифт сайта — Sofia Sans
   Extra Condensed того же сверхузкого тяжёлого склада; мелкий
   служебный текст — Golos Text.
   ФОН НИГДЕ НЕ БИТМАП: свечение — CSS-градиент. Растянутая картинка
   с афиши (2000px) на широких и ретиновых экранах пикселила — брак,
   повторять нельзя. Текстуры на фоне тоже нет (решение заказчика).
   Геометрия: срезов углов нет (забракованы 21.08 — «дешевизна»),
   но есть МЯГКИЕ СКРУГЛЕНИЯ по токенам --r-btn / --r-panel — правка
   заказчика 21.08: «округлить для дороговизны».
   ПАЛИТРА ЖИВЁТ ОТДЕЛЬНО — palitra-*.css (варианты на выбор). */

/* Текстуры на фоне НЕТ — решение заказчика 21.08: фон монотонный,
   переходы от чёрного к красному одним CSS-градиентом. Хром и сафари
   с 2025 дизерят градиенты сами, полос не даёт (проверено на 356am). */

/* Скругления — геометрия, а не палитра, поэтому живут здесь. */
:root{--r-btn:10px; --r-panel:16px}

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

/* ТИПОГРАФИКА — ровно три роли, больше кеглей и начертаний не заводить:
   .lj-krup — город (XC 900), .lj-data — дата (XC 700), .lj-slug —
   служебная строка (Golos 400): день недели и площадка ОДНИМ кеглем
   в одну строку. Заказчик 21.08: «везде разный кегль и разное
   расположение» — это лечится только этим правилом. */
.lj-krup{font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  font-weight:900;line-height:.96;letter-spacing:.005em;text-transform:uppercase;
  color:var(--kost)}
.lj-data{font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  font-weight:700;line-height:1;letter-spacing:.05em;text-transform:uppercase;
  color:var(--akcent)}
.lj-slug{font-family:'Golos Text',sans-serif;font-weight:400;font-size:14px;
  line-height:1.4;letter-spacing:.01em;color:var(--pyl)}

/* КНОПКА — прямая плашка. Высокая (56px против рыночных 42–46), но
   кегль ПОДЧИНЁН городу: в живых тур-списках кнопка всегда мельче
   названия города, иначе 11 одинаковых красных CTA конкурируют друг
   с другом и список выглядит дёшево (разбор 21.08.2026).
   ХОВЕР — костяная заливка слева направо (приём Каризмы и 356am).
   Красным заливать нельзя: кнопка уже красная, эффекта не видно —
   так и было до правки 21.08. Кость на чёрном фоне не сливается.
   Заливка идёт отдельным слоем ::before с z-index:-1 внутри своего
   контекста наложения (isolation) — он ложится поверх фона кнопки,
   но под текст, поэтому текст не надо оборачивать в span. */
.lj-btn{position:relative;isolation:isolate;overflow:hidden;
  display:inline-block;padding:17px 34px 15px;
  font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  font-weight:900;font-size:24px;line-height:1;letter-spacing:.08em;
  text-transform:uppercase;text-decoration:none;text-align:center;
  background:var(--knopka);color:var(--knopka-txt);border-radius:var(--r-btn);
  transition:color .2s}
.lj-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){
  .lj-btn:hover::before{transform:scaleX(1)}
  .lj-btn:hover{color:var(--knopka-hover-txt)}
}
@media (prefers-reduced-motion:reduce){
  .lj-btn::before,.lj-soc::before,.lj-ikon::before{transition:none}
}

/* КНОПКА-ПРИЗРАК — контур акцентом (соцсети подвала). Ховер тот же,
   что у основной кнопки: костяная заливка слева направо.
   Единая красная заливка для всего кликабельного пробовалась 21.08
   и заказчику не понравилась — откачено, контур вернули. */
.lj-soc{position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;
  justify-content:center;gap:10px;padding:15px 30px 14px;
  font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;font-weight:900;
  font-size:22px;line-height:1;letter-spacing:.08em;text-transform:uppercase;
  text-decoration:none;color:var(--kost);background:transparent;
  box-shadow:inset 0 0 0 2px var(--kontur);
  border-radius:var(--r-btn);transition:color .2s}
.lj-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)}
.lj-soc svg{width:19px;height:19px;display:block;flex:none}
.lj-soc .ikon-vk{width:27px;height:27px}
@media (hover:hover){
  .lj-soc:hover::before{transform:scaleX(1)}
  .lj-soc:hover{color:var(--knopka-hover-txt)}
}

/* БЕГУЩАЯ СТРОКА — лента поперёк экрана. Дорожка = ДВЕ одинаковые
   половины по 8 наборов (половина ~3900px — хватает и 3440-мониторам);
   правка текста = правка ВСЕХ копий. */
.lj-ticker{background:var(--lenta);overflow:hidden;white-space:nowrap;
  padding:10px 0 8px}
.lj-ticker-track{display:inline-block;animation:lj-marquee 42s linear infinite}
.lj-ticker-track b,.lj-ticker-track i{
  font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  font-size:23px;line-height:1;letter-spacing:.09em;text-transform:uppercase;
  color:var(--lenta-txt)}
.lj-ticker-track b{font-weight:900}
.lj-ticker-track i{font-style:normal;font-weight:700;margin:0 22px;opacity:.55}
@keyframes lj-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lj-ticker-track{animation:none}}

/* 16+ — в тонкой рамке. Оптическая центровка сделана НЕ паддингами:
   у Sofia XC чернила стоят на 13% от верха и 19% от низа кегельной
   площадки (замер по рендеру строки 100px), а трекинг .06em оставляет
   пустоту после «+». Подбор дробных паддингов упирался в округление
   бордера, поэтому текст вынесен в span и доводится трансформом —
   он не влияет на раскладку и даёт точный сдвиг.
   Замер после правки: зазоры сверху/снизу и слева/справа совпадают. */
.lj-age{display:inline-flex;align-items:center;justify-content:center;
  padding:6px 9px 5px;
  font-family:'Sofia Sans Extra Condensed','Arial Narrow',sans-serif;
  font-weight:700;font-size:15px;line-height:1;letter-spacing:.06em;
  color:var(--pyl);box-shadow:inset 0 0 0 1px var(--linia);
  border-radius:calc(var(--r-btn) - 2px)}
.lj-age span{display:block;transform:translate(.7px,-.12px)}

/* СОЦ-ИКОНКА шапки — ховер тот же: костяная заливка слева направо */
.lj-ikon{position:relative;isolation:isolate;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  width:46px;height:46px;color:var(--kost);background:var(--ikon-fon);
  box-shadow:inset 0 0 0 2px var(--ikon-kant);border-radius:var(--r-btn);
  transition:color .2s}
.lj-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)}
.lj-ikon svg{width:21px;height:21px;display:block}
.lj-ikon .ikon-vk{width:29px;height:29px}
@media (hover:hover){
  .lj-ikon:hover::before{transform:scaleX(1)}
  .lj-ikon:hover{color:var(--knopka-hover-txt)}
}

@media (max-width:640px){
  .lj-btn{display:block;padding:16px 20px 14px;font-size:22px}
  .lj-soc{width:100%;font-size:21px}
  .lj-ticker{padding:8px 0 6px}
  .lj-ticker-track b,.lj-ticker-track i{font-size:19px}
  .lj-ticker-track i{margin:0 15px}
}