/* Лента завлекалок — один файл на весь сайт.

   Стоит и на главной (React), и внизу лендингов. Цвета берём из переменных:
   если страница их не задала, работают значения по умолчанию отсюда. Лайм —
   общая нить сайта, он один и тот же везде.

   Устройство: в ленте только фотография и текст, кнопки на ней нет. Тап по
   плашке раскрывает её почти на весь экран — там и переход, и сердечки. */
:root{
  --nkf-lime:#B9EF4B;
  --nkf-lime-ink:#1C2A05;
  --nkf-muted:#6B6677;
}

.nkf{ margin:0; padding:0; }

.nkf__head{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 16px; }
.nkf__title{ margin:0; font-size:15px; font-weight:700; letter-spacing:.01em; color:inherit; }
.nkf__hint{ margin:0; font-size:13px; color:var(--nkf-muted); }

/* Крупные плашки. Раньше здесь была кладка в три колонки — на телефоне она
   давала две узкие карточки, где крючок ломался на четыре строки и наезжал на
   фотографию. Теперь сетка с одинаковой пропорцией: на телефоне одна плашка в
   ряд, на широком экране две-три, но всегда большие. */
.nkf__grid{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill, minmax(400px, 1fr));
}
@media (max-width:860px){
  .nkf__grid{ grid-template-columns:1fr; gap:14px; }
}

.nkf-cr{
  position:relative; display:block; overflow:hidden; border-radius:20px;
  background:#11130F; cursor:pointer; border:1px solid rgba(0,0,0,.06);
  -webkit-tap-highlight-color:transparent; transition:transform .18s ease;
  aspect-ratio:4 / 5;
}
@media (min-width:861px){ .nkf-cr{ aspect-ratio:3 / 4; } }
.nkf-cr:active{ transform:scale(.99); }
/* Плашка внутри сетки главной: высоту там задаёт ячейка, а не пропорция. */
.nkf-cr--tile{ aspect-ratio:auto; height:100%; border-radius:16px; }
.nkf-cr img{ display:block; width:100%; height:100%; object-fit:cover; background:#1a1c17; }
/* Запись без фотографии живёт типографикой, а не серым прямоугольником. */
.nkf-cr--noimg{ background:linear-gradient(150deg,#1C2A05,#11130F); }

.nkf-cr__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.93) 0%, rgba(0,0,0,.6) 34%, rgba(0,0,0,.08) 66%);
}
.nkf-cr__in{ position:absolute; inset:auto 0 0 0; padding:20px 20px 18px; color:#fff; }
.nkf-cr__kind{
  display:inline-block; margin-bottom:9px; color:var(--nkf-lime);
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.nkf-cr__h{ margin:0; font-size:27px; font-weight:600; line-height:1.14; }
.nkf-cr--noimg .nkf-cr__h{ font-size:30px; }
/* Длинную строку обрезаем, а не даём ей закрыть фотографию целиком. */
.nkf-cr__o{
  margin:10px 0 0; font-size:15px; line-height:1.42; color:rgba(255,255,255,.84);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Счётчик тапов: общий на всех посетителей. Пока цифра не пришла из базы,
   места под неё не занимаем — пустая плашка честнее нуля. */
.nkf-cr__taps{
  margin-top:13px; display:inline-flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:rgba(255,255,255,.72);
}
.nkf-cr__taps[hidden]{ display:none; }
.nkf-cr__taps svg{ width:15px; height:15px; }
.nkf-cr.is-tapped .nkf-cr__taps{ color:var(--nkf-lime); }

/* ------------------------------------------- раскрытая лента (думскрол)

   Тап по плашке открывает не одну карточку, а полноэкранную листалку: дальше
   человек листает вниз, как в рилсах, и лента не кончается. Прокрутка с
   прилипанием, чтобы карточка всегда вставала ровно. */

.nkf-modal{
  position:fixed; inset:0; z-index:9999; background:#080907;
  overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain;
  scroll-snap-type:y mandatory; -webkit-overflow-scrolling:touch;
  -webkit-tap-highlight-color:transparent; animation:nkf-fade .18s ease;
}
@keyframes nkf-fade{ from{ opacity:0 } to{ opacity:1 } }

.nkf-slide{
  position:relative; height:100vh; height:100dvh; overflow:hidden;
  scroll-snap-align:start; scroll-snap-stop:always;
  display:flex; align-items:flex-end; background:#11130F; cursor:pointer;
}
.nkf-slide img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  background:#1a1c17;
}
.nkf-slide--noimg{ background:linear-gradient(150deg,#1C2A05,#11130F); }
.nkf-slide__veil{
  position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top,
    rgba(0,0,0,.94) 0%, rgba(0,0,0,.62) 30%, rgba(0,0,0,.1) 62%, rgba(0,0,0,.35) 100%);
}

.nkf-modal__close{
  position:fixed; top:14px; right:14px; z-index:10;
  width:42px; height:42px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(10,12,9,.55); color:#fff; backdrop-filter:blur(8px);
  display:grid; place-items:center; font:400 22px/1 system-ui, sans-serif;
}
.nkf-modal__close:hover{ background:rgba(10,12,9,.85); }
.nkf-modal__close:focus-visible{ outline:2px solid var(--nkf-lime); outline-offset:2px; }

.nkf-modal__in{
  position:relative; z-index:2; width:100%; max-width:620px;
  margin:0 auto; padding:0 22px 40px; color:#fff;
}
.nkf-modal__kind{
  display:inline-block; margin-bottom:8px; color:var(--nkf-lime);
  font-size:10.5px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
}
.nkf-modal__h{ margin:0; font-size:30px; font-weight:600; line-height:1.14; }
.nkf-modal__o{ margin:12px 0 0; font-size:16px; line-height:1.5; color:rgba(255,255,255,.86); }

.nkf-modal__foot{ display:flex; align-items:center; gap:12px; margin-top:20px; }
.nkf-cr__cta{
  background:var(--nkf-lime); color:var(--nkf-lime-ink); border:0; border-radius:999px;
  padding:12px 22px; font-size:15px; font-weight:700; line-height:1;
  text-decoration:none; white-space:nowrap; cursor:pointer;
}
.nkf-cr__cta:hover{ filter:brightness(1.06); }
.nkf-cr__cta:focus-visible{ outline:2px solid #fff; outline-offset:2px; }

.nkf-modal__taps{
  margin-left:auto; display:inline-flex; align-items:center; gap:7px;
  font-size:14px; font-weight:700; color:rgba(255,255,255,.75); user-select:none;
}
.nkf-modal__taps svg{ width:19px; height:19px; transition:transform .18s ease; }
.nkf-modal__taps.is-hot{ color:var(--nkf-lime); }
.nkf-modal__taps.is-hot svg{ transform:scale(1.18); }

.nkf-modal__hint{
  margin:12px 0 0; font-size:12px; color:rgba(255,255,255,.45);
}

/* Сердечки, которые улетают вверх от места тапа. Ставятся поверх всего,
   кликов не ловят. */
.nkf-modal__hearts{ position:absolute; inset:0; pointer-events:none; z-index:4; overflow:hidden; }
.nkf-heart{
  position:absolute; width:34px; height:34px; margin:-17px 0 0 -17px;
  color:var(--nkf-lime); animation:nkf-fly 1s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes nkf-fly{
  0%   { transform:scale(.4) translateY(0);      opacity:0; }
  18%  { transform:scale(1.15) translateY(-10px); opacity:1; }
  100% { transform:scale(.85) translateY(-110px); opacity:0; }
}

/* Полоса ленты на лендинге: у страницы свой фон и своя ширина, поэтому здесь
   только отступы и максимум по ширине — ничего, что спорит с темой страницы. */
.nkf-band{ padding:44px 0 8px; }
.nkf-band .nkf{ max-width:1180px; margin:0 auto; padding:0 18px; }
.nkf-band .nkf__title{ color:var(--nk-ink, #16141F); }

/* Снимки интерфейса показываем целиком.

   Картинки приложений лежат поперёк — 1200×750. Плашка на телефоне
   вертикальная, и обрезка по ширине оставляла от окна бессмысленную полосу
   посередине: половина экрана — пустая чернота, ни текста, ни картинки не
   понять. Теперь картинка вписана целиком, а под ней её же размытая копия,
   чтобы кадр не зиял. Фотографии земли и товаров как были — им обрезка идёт. */
/* Вписанную картинку поднимаем: текст занимает низ, и держать её ровно по
   центру — значит оставить пустую полосу сверху и залезть на подпись снизу. */
.nkf-slide--fit > img:not(.nkf-slide__bg){ object-fit:contain; object-position:center 34%; }
.nkf-slide__bg{
  position:absolute; inset:-8%; width:116%; height:116%;
  object-fit:cover; filter:blur(34px) saturate(1.25) brightness(.6);
  transform:translateZ(0); pointer-events:none;
}
.nkf-cr--fit > img:not(.nkf-cr__bg){ object-fit:contain; object-position:center 30%; }
.nkf-cr__bg{
  position:absolute; inset:-8%; width:116%; height:116%;
  object-fit:cover; filter:blur(22px) saturate(1.25) brightness(.6);
  transform:translateZ(0); pointer-events:none;
}
/* Текст поверх вписанной картинки читается хуже: подложка светлее обрезанной
   фотографии, поэтому низ притемняем сильнее. */
.nkf-slide--fit .nkf-slide__veil{
  background:linear-gradient(to top,
    rgba(0,0,0,.96) 0%, rgba(0,0,0,.74) 34%, rgba(0,0,0,.28) 66%, rgba(0,0,0,.42) 100%);
}
.nkf-cr--fit .nkf-cr__veil{
  background:linear-gradient(to top,
    rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 38%, rgba(0,0,0,.24) 70%);
}

/* Появление первого экрана.

   Сайт не выпрыгивает целиком: плашки поднимаются одна за другой, с
   небольшой задержкой. Волна только на первых десяти — дальше человек уже
   листает, и анимация там мешала бы. Класс остаётся на сетке навсегда, но
   догруженные плашки под :nth-child(-n+10) не попадают и не дёргаются. */
@keyframes nk-rise{
  from{ opacity:0; transform:translateY(16px); }
  to  { opacity:1; transform:none; }
}
.nk-rise > *:nth-child(-n+10){
  animation:nk-rise .5s cubic-bezier(.2,.8,.3,1) both;
}
.nk-rise > *:nth-child(1){ animation-delay:.02s }
.nk-rise > *:nth-child(2){ animation-delay:.06s }
.nk-rise > *:nth-child(3){ animation-delay:.10s }
.nk-rise > *:nth-child(4){ animation-delay:.14s }
.nk-rise > *:nth-child(5){ animation-delay:.18s }
.nk-rise > *:nth-child(6){ animation-delay:.22s }
.nk-rise > *:nth-child(7){ animation-delay:.26s }
.nk-rise > *:nth-child(8){ animation-delay:.30s }
.nk-rise > *:nth-child(9){ animation-delay:.34s }
.nk-rise > *:nth-child(10){ animation-delay:.38s }

@media (prefers-reduced-motion:reduce){
  .nk-rise > *{ animation:none !important; }
}

/* ------------------------------------------------------------- поиск

   Липкая полоса: на первом экране её нет, появляется когда человек начал
   листать. Ищет по всему тексту страниц, не по названиям. */
.nks{
  position:fixed; top:0; left:0; right:0; z-index:900;
  padding:10px 14px; pointer-events:none;
  transform:translateY(-120%); opacity:0;
  transition:transform .26s cubic-bezier(.2,.8,.3,1), opacity .2s ease;
}
.nks.is-shown{ transform:none; opacity:1; pointer-events:auto; }
.nks__bar{
  display:flex; align-items:center; gap:10px;
  max-width:720px; margin:0 auto; padding:9px 14px;
  background:rgba(20,22,18,.82); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.14); border-radius:999px;
  box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.nks__icon{ width:18px; height:18px; color:var(--nkf-lime); flex:none; }
.nks__input{
  flex:1; min-width:0; background:none; border:0; outline:none;
  color:#fff; font:500 15px/1.2 inherit; padding:2px 0;
}
.nks__input::placeholder{ color:rgba(255,255,255,.5); }
.nks__input::-webkit-search-cancel-button{ display:none; }
.nks__close{
  flex:none; width:26px; height:26px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.12); color:#fff; font:400 17px/1 system-ui,sans-serif;
}
.nks__close:hover{ background:rgba(255,255,255,.22); }

.nks-sheet{
  position:fixed; inset:0; z-index:899; background:rgba(8,9,7,.9);
  overflow-y:auto; overscroll-behavior:contain; padding:78px 14px 24px;
  animation:nkf-fade .18s ease;
}
.nks-sheet__in{ max-width:720px; margin:0 auto; }

.nks-past{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:16px; }
.nks-past__label{
  font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-right:2px;
}
.nks-chip{
  border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08);
  color:#fff; border-radius:999px; padding:7px 14px; font:600 13px inherit; cursor:pointer;
}
.nks-chip:hover{ background:var(--nkf-lime); color:var(--nkf-lime-ink); border-color:var(--nkf-lime); }
.nks-chip--ghost{ background:none; color:rgba(255,255,255,.45); border-style:dashed; }
.nks-chip--ghost:hover{ background:none; color:#fff; border-color:rgba(255,255,255,.4); }

.nks-count{ margin:0 0 12px; font-size:13px; color:rgba(255,255,255,.6); }

.nks-hits{ display:grid; gap:10px; }
.nks-hit{
  display:flex; gap:12px; align-items:stretch; text-decoration:none;
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1);
  border-radius:14px; padding:10px; color:#fff;
}
.nks-hit:hover{ background:rgba(255,255,255,.12); border-color:var(--nkf-lime); }
.nks-hit__pic{ width:76px; height:76px; flex:none; object-fit:cover; border-radius:10px; background:#1C2A05; }
.nks-hit__pic--empty{ background:linear-gradient(150deg,#1C2A05,#11130F); }
.nks-hit__body{ display:flex; flex-direction:column; justify-content:center; min-width:0; }
.nks-hit__kind{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--nkf-lime); margin-bottom:4px;
}
.nks-hit__title{ font-size:15.5px; font-weight:600; line-height:1.2; }
.nks-hit__snip{
  margin-top:5px; font-size:12px; line-height:1.4; color:rgba(255,255,255,.62);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

@media (prefers-reduced-motion:reduce){
  .nks{ transition:none; }
  .nks-sheet{ animation:none; }
}

/* ------------------------------------------------- блок-лендинг в потоке

   Кусок страницы прямо в прокрутке: обложка, название, три факта и полоска
   фотографий. Не iframe — те же поля, что и на самой странице. */
.nkf-ld{
  position:relative; display:block; overflow:hidden; border-radius:20px;
  background:#11130F; color:#fff; text-decoration:none;
  border:1px solid rgba(0,0,0,.06); min-height:300px;
}
.nkf-ld__hero{ position:absolute; inset:0; }
.nkf-ld__hero img{ width:100%; height:100%; object-fit:cover; display:block; }
.nkf-ld__veil{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.94) 0%, rgba(0,0,0,.55) 46%, rgba(0,0,0,.12) 78%);
}
.nkf-ld__in{
  position:relative; z-index:2; padding:22px 22px 20px;
  display:flex; flex-direction:column; height:100%; justify-content:flex-end;
}
.nkf-ld__tag{
  display:inline-block; align-self:flex-start; margin-bottom:10px; color:var(--nkf-lime);
  font-size:10px; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
}
.nkf-ld__h{ margin:0; font-size:26px; font-weight:700; line-height:1.14; }
.nkf-ld__line{ margin:8px 0 0; font-size:14px; color:rgba(255,255,255,.78); }
.nkf-ld__facts{ margin:14px 0 0; padding:0; list-style:none; display:grid; gap:6px; }
.nkf-ld__facts li{
  font-size:13.5px; line-height:1.4; color:rgba(255,255,255,.88);
  padding-left:16px; position:relative;
}
.nkf-ld__facts li::before{
  content:''; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--nkf-lime);
}
.nkf-ld__strip{ display:flex; gap:7px; margin-top:16px; }
.nkf-ld__strip img{
  width:64px; height:48px; object-fit:cover; border-radius:8px;
  border:1px solid rgba(255,255,255,.18);
}
.nkf-ld__go{
  margin-top:16px; align-self:flex-start; background:var(--nkf-lime); color:var(--nkf-lime-ink);
  border-radius:999px; padding:10px 18px; font-size:14px; font-weight:700; line-height:1;
}
@media (max-width:560px){
  .nkf-ld__in{ padding:18px; }
  .nkf-ld__h{ font-size:22px; }
  .nkf-ld__facts li{ font-size:12.5px; }
  .nkf-ld__strip img{ width:54px; height:41px; }
}

.nkf__more{ height:1px; }
.nkf__end{ padding:18px 0; text-align:center; font-size:13px; color:var(--nkf-muted); }

/* На телефоне плашка занимает всю ширину, но текст всё равно не должен
   съедать фотографию целиком. */
@media (max-width:560px){
  .nkf-cr__in{ padding:16px 16px 15px; }
  .nkf-cr__h{ font-size:23px; }
  .nkf-cr--noimg .nkf-cr__h{ font-size:25px; }
  .nkf-cr__o{ font-size:14px; -webkit-line-clamp:2; }
  .nkf-modal__in{ padding:0 18px 34px; }
  .nkf-modal__h{ font-size:25px; }
  .nkf-modal__o{ font-size:15px; }
}

@media (prefers-reduced-motion:reduce){
  .nkf-cr, .nkf-modal, .nkf-modal__taps svg{ animation:none; transition:none; }
  .nkf-cr:active{ transform:none; }
  .nkf-heart{ animation-duration:.4s; }
  .nkf-modal{ scroll-snap-type:none; }
}