/* toprev — дизайн-макет. Прототип, не продакшн.
   Тема A «Бумага» — по умолчанию. Тема B «Стенд» — data-theme="b" на <html>. */

/* PT Serif — гарнитура лендинга «Журнал», файлы лежат рядом в fonts/ (кириллица и
   латиница, 400 и 700). Если файла нет, браузер молча возьмёт Georgia. */
@font-face{
  font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/pt-serif-normal-400-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"PT Serif";font-style:normal;font-weight:400;font-display:swap;
  src:url("fonts/pt-serif-normal-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:"PT Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/pt-serif-normal-700-cyrillic.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"PT Serif";font-style:normal;font-weight:700;font-display:swap;
  src:url("fonts/pt-serif-normal-700-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{
  --paper:#f7f5ef;
  /* Шапка на волосок темнее бумаги (247,245,239 → 241,238,228): разницу видно только
     рядом, зато шапка перестаёт сливаться с первым экраном и держит линию при скролле.
     Отдельная переменная, потому что --paper ещё красит фон страницы и таблицы. */
  --head-bg:#f1eee4;
  --card:#ffffff;
  --ink:#17140f;
  --ink-2:#3d382f;
  --muted:#6d675c;
  --line:#e2dbcc;
  --line-2:#cfc6b2;
  --accent:#0e5a44;
  --accent-soft:#e8f1ed;
  --warn:#a83a2b;
  --mark:#f7e7b0;
  /* --text — набор основного текста и цифр (PT Serif, как на лендинге «Журнал»),
     --body — интерфейс: кнопки, подписи капсом, служебные строки (системный sans). */
  --head:"PT Serif",Georgia,"Times New Roman",serif;
  --text:"PT Serif",Georgia,"Times New Roman",serif;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --w:1200px;
  --r:14px;
  --rail:300px;
}

[data-theme="b"]{
  --paper:#0f100f;
  --head-bg:#0a0b0a;
  --card:#171917;
  --ink:#f1f2ec;
  --ink-2:#d3d6cc;
  --muted:#9ba295;
  --line:#2b302a;
  --line-2:#3c433a;
  --accent:#cdf25a;
  --accent-soft:#1e241a;
  --warn:#ff8f7e;
  --mark:#3b3420;
  --head:var(--body);
  --text:var(--body);
  --hw:600;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 17px/1.62 var(--text);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--head);font-weight:var(--hw,700);letter-spacing:-.01em;margin:0}
h1{font-size:44px;line-height:1.1}
h2{font-size:29px;line-height:1.2}
h3{font-size:22px;line-height:1.25}
p{margin:0 0 18px}
small{font-size:13px}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:28px}
.muted{color:var(--muted)}

/* — служебная плашка макета — */
.mockbar{
  background:var(--mark);color:#3b3420;
  font:600 12px/1.4 var(--body);letter-spacing:.04em;text-transform:uppercase;
  text-align:center;padding:7px 16px;
}
[data-theme="b"] .mockbar{color:#cbbf8e}

/* — шапка — */
.head{
  position:sticky;top:0;z-index:20;
  background:var(--head-bg);
  border-bottom:1px solid var(--line);
}
.head__in{display:flex;align-items:center;gap:28px;height:66px}
/* Знак в шапке — растровый лок-ап «значок + TOP review», 618×139, прозрачный PNG.
   Высота фиксирована, ширина считается сама по пропорции 4.45; на тёмной теме
   подменяется светлая версия, поэтому оба файла стоят в разметке. Подпись
   («территория верных находок») в лок-ап не входит: на 28 px она была бы 4 px
   и читалась грязным пятном. Полная версия с подписью лежит рядом — для мест,
   где высота больше (logo-toprev-full.png). */
.logo{display:flex;align-items:center;flex:0 0 auto;text-decoration:none}
.logo__img{display:block;height:28px;width:auto}
.logo__img--inv{display:none}
[data-theme="b"] .logo__img{display:none}
[data-theme="b"] .logo__img--inv{display:block}
.logo:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px}
.nav{display:flex;gap:22px;margin-left:8px;font-size:15px}
.nav a{text-decoration:none;color:var(--ink-2);padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--accent);color:var(--ink)}
.head__right{margin-left:auto;display:flex;align-items:center;gap:14px;font-size:14px;color:var(--muted)}
.searchbtn{
  display:flex;align-items:center;gap:8px;
  border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;
  background:var(--card);color:var(--muted);text-decoration:none;
  font:inherit;font-size:14px;line-height:1.2;cursor:pointer;
}
.searchbtn:hover{color:var(--ink);border-color:var(--ink-2)}
.searchbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Поле поиска в шапке — рабочее, не кнопка: на десктопе искать можно сразу, не
   прокручивая страницу до первого экрана. Стоит в одной строке с меню и уезжает
   вправо. Подсказки выдачи открываются абсолютным блоком под полем: шапка
   sticky с z-index:20, панель снаружи шапки уехала бы вместе с прокруткой. */
.hsearch{
  position:relative;margin-left:auto;flex:0 0 260px;
  display:flex;align-items:center;gap:2px;
  background:var(--card);border:1px solid var(--line-2);border-radius:999px;
  height:38px;padding:0 4px 0 14px;
}
.hsearch:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hsearch input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:400 15px/1 var(--body);padding:8px 0;outline:none;
  -webkit-appearance:none;appearance:none;
}
.hsearch input::placeholder{color:var(--muted)}
.hsearch input::-webkit-search-cancel-button,
.hsearch input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.hsearch__go{
  flex:0 0 30px;height:30px;border:0;border-radius:999px;background:transparent;
  color:var(--muted);font:400 18px/1 var(--body);line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.hsearch__go:hover,.hsearch__go:focus-visible{color:var(--accent);background:var(--accent-soft);outline:none}
/* выдача шире поля: заголовки подборок длинные, в 260 px они рвутся по слогам */
.hsearch .searchout{
  position:absolute;top:calc(100% + 8px);right:0;width:360px;max-width:none;
  margin:0;z-index:5;max-height:min(62vh,420px);overflow:auto;
  box-shadow:0 24px 50px -28px rgba(23,20,15,.6);
}
.hsearch .searchout[hidden]{display:none}

/* — общие блоки — */
.kicker{
  font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:0 0 14px;display:flex;align-items:center;gap:10px;
}
.kicker::before{content:"";width:26px;height:2px;background:var(--accent);display:block}
.section{padding-block:56px;border-top:1px solid var(--line)}
.section--tight{padding-block:40px}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.section__head h2{max-width:640px}
.more{font-size:15px;color:var(--accent);text-decoration:none;white-space:nowrap;border-bottom:1px solid var(--line-2);padding-bottom:2px}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--accent);color:#fff;text-decoration:none;
  font:600 15px/1 var(--body);padding:14px 20px;border-radius:10px;border:1px solid transparent;
}
.btn:hover{filter:brightness(1.08)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
[data-theme="b"] .btn{color:var(--accent-ink)}

/* — реклама — */
.admark{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px;
  font:600 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
/* Тёплая подложка — только у денег и у пометки «Реклама»: акцент остаётся за действием. */
.admark b{color:var(--ink);font-weight:600;background:var(--mark);padding:3px 7px;border-radius:4px}
.admark .erid{text-transform:none;letter-spacing:0;font-weight:400;opacity:.85}

.pricebar{
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
  overflow:hidden;margin:0 0 34px;
}
.pricebar__head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 18px;background:var(--accent-soft);
  border-bottom:1px solid var(--line);
}
.pricebar__row{
  display:grid;grid-template-columns:1fr 130px auto;gap:18px;align-items:center;
  padding:14px 18px;border-top:1px solid var(--line);
}
.pricebar__row:first-of-type{border-top:0}
.pricebar__name{font-weight:600;font-size:16px;line-height:1.3}
.pricebar__name span{display:block;font-weight:400;font-size:13px;color:var(--muted);margin-top:3px}
.pricebar__price{font:400 18px/1 var(--head);white-space:nowrap;font-variant-numeric:tabular-nums}
.pricebar__price small{display:block;font:400 11px/1.4 var(--body);color:var(--muted);margin-top:5px;white-space:normal}
.pricebar__go{
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  border:1px solid var(--accent);color:var(--accent);border-radius:8px;
  font:600 14px/1 var(--body);padding:11px 16px;white-space:nowrap;
}
.pricebar__go:hover{background:var(--accent);color:#fff}
[data-theme="b"] .pricebar__go:hover{color:var(--accent-ink)}
.pricebar__foot{padding:0 18px 14px;font-size:12px;color:var(--muted)}

/* — главная: герой — */
/* Фон героя: рука с указующим пальцем и светящееся кольцо обзоров.
   Кадр — img/hero-frame.jpg (1800×1005, вес 140 КБ). Это полный кадр, а не
   вырезка: вшитую надпись «TOP revue» человек поправил сам — «review» через i,
   края букв сглажены под цвет фона. Поэтому прятать надпись больше не нужно,
   и кадр показывается как фотография: cover, без блюра, без увеличения в 4 раза.
   Место — правая колонка блока (52 %, не шире 700 px): левые 48 % остаются
   чистой бумагой под заголовок и лид, и текст с picture не встречается.
   Резких границ нет: справа кадр уходит в край окна, вертикальную маску даёт
   .hero__bg, горизонтальную его ::before, вложенные маски перемножаются сами.
   В multiply белое бумагу не темнит, поэтому блики кольца сами по себе светлее
   фона не становятся — их придерживает brightness, а не непрозрачность. */
.hero{position:relative;padding-block:64px 34px}
.hero>*:not(.hero__bg){position:relative;z-index:1}
.hero__bg{
  position:absolute;top:0;right:0;bottom:0;width:52%;max-width:700px;
  z-index:0;overflow:hidden;pointer-events:none;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 14%,#000 70%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 14%,#000 70%,rgba(0,0,0,0) 100%);
}
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:url("img/hero-frame.jpg") no-repeat 38% 50%/cover;
  filter:brightness(.96) contrast(1.04) saturate(.98);
  -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 20%,#000 52%,#000 88%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,rgba(0,0,0,.5) 20%,#000 52%,#000 88%,rgba(0,0,0,0) 100%);
}
[data-theme="b"] .hero__bg{mix-blend-mode:screen;opacity:.4}
/* На тёмном фоне multiply не годится: screen складывает свет, и картинку
   придерживает уже не brightness, а непрозрачность. Поэтому в теме Б кадр
   отдаётся притушенным по яркости — тёмная бумага сама гасит его до свечения. */
[data-theme="b"] .hero__bg::before{filter:brightness(.84) contrast(1.04) saturate(.92)}
/* Заголовок первого блока. 13.11.2026 ограничение 760 px сняли по слову человека;
   14.11.2026 он вернул его: «на декстопной версии надо оставить так, как было до
   правки, потому что это смотрелось красиво, и картинка смотрелась сбоку. А сейчас
   вы растянули заголовок на весь блок… Мы правили только мобильную версию».
   Поэтому здесь снова 760 px: заголовок идёт в две-три строки, справа остаётся
   место под кадр. Правим только телефон — десктоп не трогаем.
   Кегль общий, 44 px (строка 83); выключку не включаю — она тянет пробелы. */
.hero h1{max-width:760px}
.hero__sub{font-size:19px;line-height:1.6;color:var(--ink-2);max-width:620px;margin:20px 0 28px}
.search{
  display:flex;align-items:center;gap:12px;max-width:640px;margin:0;
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;padding:6px 6px 6px 18px;
}
.search input{
  flex:1;border:0;background:transparent;color:var(--ink);
  font:400 17px/1 var(--body);padding:14px 0;outline:none;min-width:0;
  -webkit-appearance:none;appearance:none;
}
.search input::placeholder{color:var(--muted)}
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search .btn{cursor:pointer}

/* выдача поиска — под полем, своей карточкой */
.searchout{
  max-width:640px;margin-top:10px;padding:14px 16px 12px;
  background:var(--card);border:1px solid var(--line-2);border-radius:12px;
  box-shadow:0 18px 40px -30px rgba(23,20,15,.55);
}
.searchout__n{margin:0;font:600 12px/1.3 var(--body);letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.searchout__list{list-style:none;margin:8px 0 0;padding:0}
.searchout__list li+li{border-top:1px solid var(--line)}
.searchout__list a{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:10px 0;text-decoration:none;color:var(--ink);
}
.searchout__list a:hover{color:var(--accent)}
.searchout__t{font-size:16px;line-height:1.35}
.searchout__k{font:600 11px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.searchout__hint{margin:8px 0 0;font-size:14px;line-height:1.5;color:var(--ink-2);max-width:54ch}
.searchout__all{margin:10px 0 0;padding-top:10px;border-top:1px solid var(--line);font-size:14px}
.searchout__all a{color:var(--accent);text-decoration:none}

/* поиск на внутренних страницах — панель поверх страницы (js/search.js) */
.sp{
  position:fixed;inset:0;z-index:40;display:flex;justify-content:center;align-items:flex-start;
  padding:11vh 20px 20px;background:rgba(23,20,15,.34);
}
.sp[hidden]{display:none}
body.is-search{overflow:hidden}
.sp__sheet{
  width:100%;max-width:640px;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:0 30px 70px -40px rgba(23,20,15,.65);padding:6px 6px 4px;
}
.sp__top{display:flex;align-items:center;gap:10px;padding:2px 2px 2px 12px}
.sp__ico{color:var(--muted);font-size:18px;line-height:1}
.sp__in{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);
  font:400 17px/1.2 var(--body);padding:14px 0;outline:none;
  -webkit-appearance:none;appearance:none;
}
.sp__in::placeholder{color:var(--muted)}
.sp__in::-webkit-search-cancel-button,
.sp__in::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.sp__x{
  flex:none;width:34px;height:34px;border:1px solid var(--line-2);border-radius:999px;
  background:transparent;color:var(--muted);font:inherit;font-size:14px;line-height:1;cursor:pointer;
}
.sp__x:hover{color:var(--ink);border-color:var(--ink-2)}
.sp__out{padding:8px 12px 12px;border-top:1px solid var(--line);max-height:62vh;overflow:auto}
.sp__out:empty{display:none}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{
  font-size:14px;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--line-2);border-radius:999px;padding:8px 14px;background:var(--card);
}
.chip:hover{border-color:var(--accent);color:var(--accent)}

/* — главная: подборки — */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pick{
  display:flex;flex-direction:column;gap:14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:24px;text-decoration:none;
}
.pick:hover{border-color:var(--line-2);box-shadow:0 10px 30px -22px rgba(23,20,15,.55)}
.pick__kicker{font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
.pick h3{font-size:23px}
.pick p{font-size:15px;color:var(--ink-2);margin:0}
.pick__meta{margin-top:auto;display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted);padding-top:6px;border-top:1px solid var(--line)}
.pick__meta b{font-weight:600;color:var(--ink-2)}

/* — категории — */
.cats{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.cat{
  display:block;text-decoration:none;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:18px 16px;
}
.cat:hover{border-color:var(--accent)}
.cat b{display:block;font:400 17px/1.3 var(--head);margin-bottom:6px}
.cat span{font-size:13px;color:var(--muted)}

/* — методика — */
.method{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
.method__n{font:400 40px/1 var(--head);color:var(--accent);margin-bottom:12px}
.method h3{font-size:19px;margin-bottom:8px}
.method p{font-size:15px;color:var(--ink-2);margin:0}

/* — лента — */
.feed{display:grid;gap:0;border-top:1px solid var(--line)}
.feed a{
  display:grid;grid-template-columns:120px 1fr auto;gap:22px;align-items:baseline;
  padding:18px 0;border-bottom:1px solid var(--line);text-decoration:none;
}
.feed a:hover .feed__t{color:var(--accent)}
.feed time{font-size:13px;color:var(--muted);white-space:nowrap}
.feed__t{font:400 19px/1.35 var(--head)}
.feed__tag{font-size:13px;color:var(--muted);white-space:nowrap}

/* — подвал — */
.foot{border-top:1px solid var(--line-2);padding:48px 0 40px;margin-top:20px;background:var(--card)}
.foot__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:34px}
.foot h4{font:600 12px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.foot ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:2}
.foot a{text-decoration:none;color:var(--ink-2)}
.foot a:hover{color:var(--accent);text-decoration:underline}
.foot__about{font-size:14px;color:var(--muted);max-width:300px;line-height:1.6}
.foot__bottom{
  margin-top:36px;padding-top:20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--muted);flex-wrap:wrap;
}

/* — статья — */
.crumbs{font-size:13px;color:var(--muted);padding:22px 0 0}
.crumbs a{text-decoration:none}
.crumbs span{margin:0 6px;opacity:.5}

.article{display:grid;grid-template-columns:minmax(0,760px) var(--rail);gap:56px;padding-block:22px 40px;align-items:start}
.art{grid-column:1;grid-row:1;min-width:0}
.art__meta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;font-size:14px;color:var(--muted);margin:18px 0 14px}
.art__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--line-2)}
.lead{font-size:20px;line-height:1.62;color:var(--ink-2);margin:22px 0 30px}
.lead strong{color:var(--ink);font-weight:600}
.art>h2{margin:46px 0 14px}
.art>h2:first-of-type{margin-top:34px}

.shortlist{
  border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);
  padding:22px 24px;margin:0 0 36px;
}
.shortlist h2{font-size:15px;font-family:var(--body);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 16px}
.shortlist ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.shortlist li{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:baseline;font-size:inherit}
.shortlist .if{color:var(--muted)}
.shortlist b{font-weight:600}
.shortlist .arrow{color:var(--accent);text-decoration:none;font-size:14px;white-space:nowrap}

.model{border-top:2px solid var(--ink);padding:26px 0 30px;margin:0}
.model__head{display:flex;align-items:baseline;gap:14px;margin-bottom:10px}
.model__num{font:400 15px/1 var(--body);font-weight:600;color:var(--accent);letter-spacing:.08em;text-transform:uppercase}
.model h3{font-size:26px}
.model__why{font-size:inherit;color:var(--ink-2);margin:14px 0 18px}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:0 0 18px}
.fact{border-left:2px solid var(--line-2);padding-left:14px}
.fact b{display:block;font:400 22px/1.2 var(--head);margin-bottom:4px;font-variant-numeric:tabular-nums}
.fact span{font-size:13px;color:var(--muted)}
.minus{
  border-left:3px solid var(--warn);padding:2px 0 2px 14px;margin:0 0 16px;
  font-size:inherit;color:var(--ink-2);
}
.minus b{color:var(--warn);font-weight:600}
.skip{font-size:15px;color:var(--muted);margin:0 0 18px;padding-left:14px;border-left:2px dashed var(--line-2)}
.buy{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  padding:14px 0 0;border-top:1px solid var(--line);
}
.buy__price{font:400 20px/1 var(--head);font-variant-numeric:tabular-nums;background:linear-gradient(180deg,transparent 58%,var(--mark) 58%)}
.buy__price small{display:block;font:400 12px/1.4 var(--body);color:var(--muted);margin-top:4px}
.buy--cta{border-top:none;padding:0;margin:0 0 6px}
.buy--cta .buy__price{font-size:18px}

.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line-2);border-radius:var(--r);background:var(--card);margin:0 0 8px}
.tbl{width:100%;min-width:620px;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.tbl thead th{font:600 12px/1.3 var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--paper)}
.tbl td{font-variant-numeric:tabular-nums}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child,.tbl th:first-child{position:sticky;left:0;background:var(--card);box-shadow:1px 0 0 var(--line);font-weight:600}
.tbl thead th:first-child{background:var(--paper)}
.tablehint{font-size:13px;color:var(--muted);margin:8px 0 34px}

.verdict{border-left:3px solid var(--accent);background:var(--accent-soft);padding:20px 22px;border-radius:0 12px 12px 0;margin:0 0 32px}
.verdict h3{font-size:20px;margin-bottom:10px}
.verdict p:last-child{margin:0}

.checklist{list-style:none;padding:0;margin:0 0 8px}
.checklist li{position:relative;padding:0 0 12px 30px;font-size:inherit;color:var(--ink-2)}
.checklist li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;border:1px solid var(--line-2);border-radius:3px;background:var(--card)}

.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{font:400 19px/1.4 var(--head);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-size:20px;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq p{font-size:inherit;color:var(--ink-2);margin:12px 0 0}

/* — правая колонка — */
.rail{position:sticky;top:92px;display:grid;gap:22px;grid-column:2;grid-row:1}
.toc{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px 20px}
.toc h4{font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:9px;counter-reset:toc}
.toc li{counter-increment:toc;font-size:14px;line-height:1.35;display:grid;grid-template-columns:16px 1fr;gap:8px}
.toc li::before{content:counter(toc);color:var(--muted);font-size:12px;padding-top:1px}
.toc a{text-decoration:none;color:var(--ink-2)}
.toc a:hover{color:var(--accent)}
/* оглавление на телефоне: свёрнутое, стоит после лида — иначе до первого подзаголовка
   восемь экранов без навигации (боковая колонка там уезжает под текст) */
.tocm{display:none}
.tocm summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card);font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tocm summary::-webkit-details-marker{display:none}
.tocm summary::after{content:"+";font:400 16px/1 var(--body);letter-spacing:0;color:var(--accent)}
.tocm[open] summary::after{content:"—"}
.tocm[open] summary{border-bottom-left-radius:0;border-bottom-right-radius:0}
.tocm ol{list-style:none;margin:0;padding:14px 18px 16px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;background:var(--card);display:grid;gap:10px;counter-reset:tocm}
.tocm li{counter-increment:tocm;font-size:14px;line-height:1.35;display:grid;grid-template-columns:16px 1fr;gap:8px}
.tocm li::before{content:counter(tocm);color:var(--muted);font-size:12px;padding-top:1px}
.tocm a{text-decoration:none;color:var(--ink-2)}
.passport{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px 20px;font-size:13px;color:var(--muted);line-height:1.55}
.passport h4{font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.passport dl{margin:0;display:grid;grid-template-columns:1fr auto;gap:8px 12px}
.passport dt{color:var(--muted)}
.passport dd{margin:0;color:var(--ink-2);text-align:right;font-variant-numeric:tabular-nums}
.passport p{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--line)}

/* — подпись автора и раскрытие партнёрства — */
.sign{border-top:1px solid var(--line-2);margin:38px 0 0;padding:20px 0 0;font-size:14px;color:var(--ink-2);line-height:1.6}
.sign b{display:block;font:400 17px/1.3 var(--head);color:var(--ink);margin-bottom:6px}
.sign p{margin:0 0 6px}
.sign a{color:var(--accent)}
.disclose{font-size:12px;line-height:1.65;color:var(--muted);margin:16px 0 0}
.disclose a{color:var(--muted)}

/* — категория (лента) — */
.cat-hero{padding:26px 0 26px;border-bottom:1px solid var(--line)}
.cat-hero h1{font-size:38px}
.cat-hero p{font-size:18px;color:var(--ink-2);max-width:660px;margin:16px 0 0}
.cat-body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:56px;padding-block:30px 56px;align-items:start}
.cat-tools{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;font-size:14px;color:var(--muted)}
.cat-tools .sort{border:1px solid var(--line-2);border-radius:8px;padding:9px 12px;background:var(--card);color:var(--ink-2);font-size:14px}
.post{
  display:grid;grid-template-columns:1fr 116px;gap:26px;
  padding:24px 0;border-bottom:1px solid var(--line);text-decoration:none;
}
.post:hover h2{color:var(--accent)}
.post h2{font-size:23px;line-height:1.28;margin-bottom:8px}
.post p{font-size:15px;color:var(--ink-2);margin:0 0 12px}
.post__meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:13px;color:var(--muted)}
.post__thumb{
  height:86px;border-radius:8px;border:1px solid var(--line-2);
  background:
    repeating-linear-gradient(135deg,transparent 0 7px,var(--line) 7px 8px),
    var(--card);
  display:flex;align-items:center;justify-content:center;
  font:600 10px/1.3 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-align:center;
}
.post__tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.post__pick{display:inline-block;margin:0 0 10px;font-size:13px;color:var(--accent);background:var(--accent-soft);border-radius:6px;padding:4px 9px}
.cat-side{display:grid;gap:22px;position:sticky;top:92px}
.side-box{border:1px solid var(--line);border-radius:12px;background:var(--card);padding:18px 20px}
.side-box h4{font:600 11px/1 var(--body);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.side-box ul{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
.side-box a{text-decoration:none;color:var(--ink-2);display:flex;justify-content:space-between;gap:10px}
.side-box a:hover{color:var(--accent)}
.side-box a span{color:var(--muted)}
.pager{display:flex;gap:8px;margin-top:26px;font-size:14px}
.pager a{text-decoration:none;border:1px solid var(--line-2);border-radius:8px;padding:9px 14px;background:var(--card);color:var(--ink-2)}
.pager a[aria-current]{background:var(--ink);color:var(--paper);border-color:var(--ink)}

/* — адаптив — */
@media (max-width:1100px){
  .cats{grid-template-columns:repeat(3,1fr)}
  .article{display:flex;flex-direction:column;gap:0}
  .art{display:contents}
  .art>*{order:6}
  .art>h1{order:1}
  .art>.art__meta{order:2}
  .art>.lead{order:3}
  .art>.tocm{order:4}
  .art>.shortlist{order:5}
  .rail{position:static;order:6;grid-template-columns:1fr 1fr;margin:18px 0 10px;width:auto}
  .cat-body{grid-template-columns:1fr}
  .cat-side{position:static;grid-template-columns:1fr 1fr}
  .nav{display:none}
}
@media (max-width:900px){
  .grid3{grid-template-columns:1fr}
  .method{grid-template-columns:1fr;gap:24px}
  .foot__in{grid-template-columns:1fr 1fr}
  .pick__meta{justify-content:space-between}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{padding-inline:18px}
  h1{font-size:30px;line-height:1.16}
  .hero{padding-block:34px 20px}
  .hero__sub{font-size:17px;margin:16px 0 22px}
  .search{padding:4px 4px 4px 14px}
  .search input{font-size:16px;padding:12px 0}
  .search .btn{padding:12px 16px;font-size:14px}
  .searchout{padding:12px 12px 10px;margin-top:8px}
  .searchout__list a{gap:10px;padding:9px 0}
  .searchout__t{font-size:15px}
  /* Телефон: кадр — не полоса под чипсами, а подложка под заголовком. Он лежит
     абсолютным слоем в верхней части блока, начинается сразу под шапкой (то есть
     попадает в первый экран) и уходит в бумагу к началу лида: лид и чипсы стоят на
     чистой бумаге, а заголовок читается поверх кадра.
     Правая колонка на 390 px невозможна (44 % — это 172 px, рука не читается),
     поэтому кадр занимает всю ширину и обрезается по высоте: cover от кадра
     1800×1005 берёт середину. Маски вложенные, поэтому перемножаются: вертикаль
     на .hero__bg, горизонталь на ::before — резких границ нет ни сверху/снизу,
     ни слева/справа. Блюра нет: кадр узнаётся по кисти и кольцу.
     В кадре яркое золотое пятно и надпись «ТОП review» приходятся ровно туда, где
     садятся заголовок и лид, поэтому поверх кадра лежит бумажная вуаль (.hero::after):
     она гасит кадр под текстом почти до бумаги, а по краям блока остаётся видимой.
     Слои: кадр → вуаль → текст; цвет вуали — var(--paper), поэтому она годна и для
     тёмной темы B. */
  .hero{padding-block:26px 20px}
  .hero__bg{
    position:absolute;top:0;right:0;bottom:auto;left:0;
    width:auto;max-width:none;height:340px;margin:0;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 8%,#000 42%,rgba(0,0,0,0) 94%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 8%,#000 42%,rgba(0,0,0,0) 94%);
  }
  .hero__bg::before{
    background-position:52% 20%;background-size:cover;filter:brightness(1.04) contrast(1.02) saturate(.92);
    -webkit-mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 8%,#000 72%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to right,rgba(0,0,0,0) 0%,#000 8%,#000 72%,rgba(0,0,0,0) 100%);
  }
  .hero::after{
    content:"";position:absolute;top:0;right:0;left:0;height:340px;z-index:0;
    pointer-events:none;background:var(--paper);
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.8) 70%,#000 94%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.34) 0%,rgba(0,0,0,.46) 34%,rgba(0,0,0,.8) 70%,#000 94%);
  }
  /* Текст на телефоне: кегль чуть меньше прежнего (28 и 16.5 против 30 и 17) —
     отсюда меньше строк и плотнее набранный абзац. По ширине текст НЕ выключаю:
     выключка тянет пробелы между словами, а это ровно то, чего быть не должно.
     Переносы по-русски объявлены, но работают только там, где в браузере есть
     словарь переносов: в моём рендере они не срабатывают, на живых телефонах -
     обычно да. На вёрстку они не влияют, если не срабатывают. */
  /* Заголовок на телефоне. 13.11.2026 человек сказал «от края до края», я понял
     буквально и снял поля обёртки отрицательным margin — он поправил: «ты смотри
     буквально всё не воспринимай от края до края, отступ должен быть так же, как в
     обычном тексте». Поэтому h1 снова в колонке, в тех же 18 px, что и остальной
     текст; во всю ширину он идёт внутри этих полей.
     text-wrap:pretty не ставлю: он переносит слово на будущую строку ради ровного
     хвоста, и строки выглядят рваными именно из-за него.
     Выключку снял 13.11.2026 по замечанию человека: в первой строке ровно один
     пробел («Территория осознанного»), и justify раздувает его с 7 до ~25 px —
     дырка в середине строки хуже рваного края. Переносы тоже выключены: словарь
     переносов по-русски в этом браузере не подключается, hyphens:auto молчит,
     разрывы держат неразрывные пробелы в разметке. Кегль 27 px из замера по
     отрисованному экрану 390 px: единственный в диапазоне 26-34, где обе первые
     строки полные и нет сироты (заполнение 95 % и 99 % против 90 % и 95 % у 26).
     Третья строка («до отзывов») короткая при любом кегле — это хвост абзаца,
     его по ширине не выравнивают и в обычной типографике. */
  /* Телефон бывает не 390 px, а 320–430, и мобильные браузеры сами увеличивают
     текст («font boosting»): на узком экране заданные 27 px превращаются примерно
     в 34, и заголовок рвётся на пять рваных строк — ровно это человек увидел на
     своём телефоне 14.11.2026 и написал: «все мобильники могут по-разному, надо
     учитывать и андроиды, и разные разрешения и iPhone». Поэтому кегль больше не
     фиксирован, а тянется от ширины экрана, а строки заданы разметкой (.h1-l):
     при свободном переносе на 320-365 px остаётся сирота «выбора:» одна на строке,
     а подбор кегля под неё даёт запас 1-2 px и ломается на соседнем телефоне.
     Три заданные строки влезают при кегле не больше 21,1 px на 320 и 23,8 на 360,
     отсюда clamp(18px,6.6vw,27px): 21,1 / 23,8 / 25,7 / 27 px на 320/360/390/430.
     text-size-adjust:100 % отключает android-увеличение кегля, иначе браузер снова
     умножит его и разобьёт строки. */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
  .hero h1{
    font-size:clamp(18px,6.6vw,27px);line-height:1.18;
    text-align:left;text-wrap:wrap;
    -webkit-hyphens:none;hyphens:none;
  }
  .hero h1 .h1-l{display:block}
  .hero__sub{
    font-size:16.5px;line-height:1.58;text-wrap:pretty;
    -webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:7 3 3;
  }
  /* Плашки задач на телефоне: каждая — во всю ширину колонки и на своей строке.
     Так распорядился человек 13.11.2026: «в ширину экрана мобильника, а каждая на
     отдельной строке. Никак по-другому». Правило только для первого блока (.hero):
     фильтры на странице категории остаются рядом, их человек не трогал.
     Колонка на 390 px — 354 px (18 px отступа с боков), плашка тянется на всю её
     ширину, текст по центру, чтобы длинные имена не липли к левому краю.
     Вертикальный padding 12 px даёт высоту 46 px: палец попадает без прицеливания
     (общепринятый минимум — 44). Пять строк вместо трёх прежних — первый экран
     становится выше на ~130 px; это следствие требования, а не ошибка.
     Выключки нет: она тянет пробелы, а текст здесь короткий. */
  .hero .chips{flex-direction:column;gap:8px}
  .hero .chip{
    display:block;width:100%;box-sizing:border-box;
    text-align:center;padding:12px 14px;
  }
  .section{padding-block:36px}
  .art__meta{gap:6px 14px}
  .art__meta .dot{display:none}
  .section__head{flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:20px}
  .cats{grid-template-columns:1fr 1fr;gap:10px}
  /* Шапка на телефоне: знак сверху, поле поиска своей строкой во всю ширину.
     В одну строку 157 px лок-ап и поле не встают — это 390 px минус отступы. */
  .head__in{height:auto;padding-block:10px 8px;gap:8px 12px;flex-wrap:wrap}
  .logo__img{height:26px}
  .hsearch{order:3;flex:1 0 100%;margin-left:0;height:36px;padding:0 3px 0 12px}
  .hsearch input{font-size:16px}
  .hsearch .searchout{left:0;right:0;width:auto;max-height:min(56vh,340px)}
  .article{padding-top:8px}
  .rail{grid-template-columns:1fr;margin-bottom:22px}
  .toc{display:none}
  .tocm{display:block;margin:22px 0 18px}
  .lead{font-size:17px;line-height:1.6}
  .shortlist{padding:18px}
  .shortlist li{grid-template-columns:1fr;gap:2px}
  .shortlist .if{font-size:13px}
  .model h3{font-size:21px}
  .facts{grid-template-columns:1fr 1fr;gap:12px}
  .pricebar__row{grid-template-columns:1fr auto;gap:10px 12px;padding:12px 14px}
  .pricebar__price{grid-column:1;font-size:16px}
  .pricebar__go{grid-column:2;grid-row:1 / span 2}
  .pricebar__head{padding:10px 14px;flex-direction:column;align-items:flex-start;gap:6px}
  .pricebar__foot{padding:0 14px 12px}
  .buy{gap:12px}
  .buy .btn{width:100%;justify-content:center}
  .tablehint{font-size:12px}
  .post{grid-template-columns:1fr;gap:12px}
  .post__thumb{display:none}
  .cat-side{grid-template-columns:1fr}
  .feed a{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .feed__tag{display:none}
  .foot__in{grid-template-columns:1fr;gap:22px}
  .foot__bottom{flex-direction:column;gap:8px}
  .pager{flex-wrap:wrap}
}

/* — «на чём зарабатываем» — */
.earn{
  display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);padding:24px 26px;
}
.earn p{margin:0;font-size:inherit;color:var(--ink-2);max-width:640px}
.earn p b{color:var(--ink)}

/* — карточка обзора в списке: доп. поля — */
.post__tags{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.tag{
  font:600 11px/1 var(--body);letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-2);border-radius:6px;padding:5px 8px;color:var(--ink-2);background:var(--card);
}
.tag--ad{border-color:var(--warn);color:var(--warn)}
.post__verdict{font-size:15px;color:var(--ink);margin:0 0 10px;padding-left:12px;border-left:2px solid var(--accent)}
.post__verdict b{font-weight:600}

/* — липкая полоса на мобиле (зона 4) — */
.tbar{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:30;
  align-items:center;gap:12px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:var(--card);border-top:1px solid var(--line-2);
  box-shadow:0 -8px 24px -18px rgba(23,20,15,.6);
}
.tbar.is-on{display:flex}
.tbar__txt{flex:1;min-width:0;line-height:1.25}
.tbar__txt b{display:block;font:600 14px/1.25 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tbar__txt span{font-size:12px;color:var(--muted)}
.tbar .btn{padding:12px 14px;font-size:14px;flex:none}
body.has-tbar{padding-bottom:78px}

/* — таблица на 390 px: карточки вместо прокрутки (ответ на H5) — */
@media (max-width:640px){
  .tablewrap{overflow:visible;border:0;background:transparent;border-radius:0}
  .tbl{min-width:0;display:block;font-size:15px}
  .tbl thead{display:none}
  .tbl tbody,.tbl tr,.tbl td{display:block;width:auto}
  .tbl tr{
    border:1px solid var(--line-2);border-radius:12px;background:var(--card);
    padding:12px 14px;margin:0 0 10px;
  }
  .tbl td{border:0;padding:0 0 8px;display:grid;grid-template-columns:104px 1fr;gap:10px;align-items:baseline}
  .tbl td:last-child{padding-bottom:0}
  .tbl td::before{
    content:attr(data-l);font:600 11px/1.4 var(--body);letter-spacing:.06em;
    text-transform:uppercase;color:var(--muted);
  }
  .tbl td:first-child{
    position:static;box-shadow:none;background:transparent;
    font-size:17px;padding-bottom:10px;margin-bottom:6px;border-bottom:1px solid var(--line);
  }
  .tbl td:first-child::before{display:none}
  .earn{grid-template-columns:1fr;gap:16px;padding:20px}
  .earn .btn{width:100%;justify-content:center}
  .cat-tools{flex-direction:column;align-items:stretch;gap:10px}
  .cat-tools .sort{width:100%}
  /* мета карточки: на телефоне точки-разделители не переносятся отдельной строкой */
  .post__meta{gap:4px 14px}
  .post__meta .sep{display:none}
}