/* ============================================================
   Kaufman Lab — основа обеих таблиц стилей: шрифты и примитивы.
   Сборка (build.py) ставит этот файл первым в site.css и proekt.css,
   отдельно на сайт он не попадает. Единственное место, где живут
   палитра, шрифтовые семейства, шкала размеров и отступы.
   Семантические цвета (--color-*) у страниц и статей свои — в их файлах.
   ============================================================ */

/* --- 0. Шрифты: свои, не Google. Кириллица и латиница отдельными файлами,
   браузер качает только нужный поднабор. font-display:swap — текст виден сразу. */
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/onest-cyrillic-700-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:700;font-display:swap;
  src:url("/assets/fonts/onest-latin-700-normal.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:Onest;font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/onest-cyrillic-800-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Onest;font-style:normal;font-weight:800;font-display:swap;
  src:url("/assets/fonts/onest-latin-800-normal.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:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-400-normal.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:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-cyrillic-500-normal.woff2") format("woff2");unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;
  src:url("/assets/fonts/ibm-plex-mono-latin-500-normal.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-100:#F8F7F5; --paper-200:#EDEBE8; --paper-300:#E3E0DC; --paper-400:#D4D0CB;
  --ink-900:#17161A;   --ink-400:#676370;   --ink-200:#A9A5AC;
  --magenta-500:#C40064; --magenta-100:#FBE3EF;
  --green-500:#1C6E4E;

  --f-display:Onest,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --step--1:.78rem;
  --step-0:1rem;
  --step-1:1.12rem;
  --step-2:clamp(1.25rem,3.2vw,1.6rem);
  --step-3:clamp(1.7rem,4.5vw,2.4rem);
  --step-4:clamp(2.1rem,6vw,3.4rem);

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px;
  --sp-6:28px; --sp-7:40px; --sp-8:56px;

  --measure:64ch; --page:1140px;
}

/* Повторы правил с proekt.css — намеренные. Оба файла собираются поверх osnova.css,
   и порядок правил внутри файла решает спор одинаковой силы: например, .mt6 должен
   стоять после .hero-links, иначе отступ станет 16px вместо 28. Перенос общих правил
   в osnova.css 20.09.2026 это и сломал — откачено, не повторять. */
/* ============================================================
   Kaufman Lab — стиль страниц сайта: главная, разделы, теги, панель.
   Язык: узкая колонка, тонкие линейки, таблицы, точечный акцент.
   Числа живут здесь, в разметке их быть не должно.

   Статьи этот файл НЕ грузят: у них свой proekt.css, и компоненты статьи
   описаны там. Здесь их копия лежала до 08.09.2026 — не применялась ни
   к чему и успела разойтись значениями (.article 720px против 820, .lede
   1.1rem/58ch против 1rem/62ch), то есть врала тому, кто правил её как
   эталон. Копия снята. Общее у двух файлов — шрифты и примитивы — лежит
   в osnova.css, сборка ставит его первым в оба.
   ============================================================ */

/* --- 1. Примитивы: в osnova.css, сборка ставит его первым --- */
:root{--wide:1140px;}

/* --- 2. Семантика ---------------------------------------- */
:root{
  --color-bg:var(--paper-200);
  --color-surface:var(--paper-100);
  --color-sunk:var(--paper-300);
  --color-text:var(--ink-900);
  --color-text-muted:var(--ink-400);
  --color-line:var(--paper-400);
  --color-poisk:#5189C6;      /* ряд «Яндекс» */
  --color-goo:#2F8F66;        /* ряд «Google» на панели видимости */
  --color-accent:var(--magenta-500);
  --color-seti:#6A4BD8;       /* нейросети на панели: розовый отдан просмотрам */
  --color-accent-bg:var(--magenta-100);
  --color-yes:var(--green-500);
  --color-no:#676370;
  /* чернила поверх акцентной плашки: в светлой теме акцент тёмный, в тёмной светлый */
  --chip-ink:#fff;
  --shot-bg:#1A181D; --shot-line:#34303A; --shot-ink:#8E8896;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --color-bg:#131215; --color-surface:#1B191E; --color-sunk:#0E0D10;
    --color-text:#F2F0EE; --color-text-muted:#9C97A2; --color-line:#302D36;
    --color-accent:#FF4D9E; --color-accent-bg:#3A0F26; --color-seti:#9B85F0;
    --color-yes:#5FD3A0; --color-no:#8E8896; --chip-ink:#131215;
    --shot-bg:#0B0A0D; --shot-line:#2A2730; --shot-ink:#6D6875;
  }
}
:root[data-theme="dark"]{
  --color-bg:#131215; --color-surface:#1B191E; --color-sunk:#0E0D10;
  --color-text:#F2F0EE; --color-text-muted:#9C97A2; --color-line:#302D36;
  --color-accent:#FF4D9E; --color-accent-bg:#3A0F26; --color-seti:#9B85F0;
  --color-yes:#5FD3A0; --color-no:#8E8896; --chip-ink:#131215;
  --shot-bg:#0B0A0D; --shot-line:#2A2730; --shot-ink:#6D6875;
}

/* --- 3. База --------------------------------------------- */
*{box-sizing:border-box}
/* Плавная прокрутка — только тем, кто не просил убрать движение: «наверх»
   с конца главной везёт через 5–10 тысяч пикселей, и общий выключатель ниже
   её не гасит — он трогает animation и transition, а это отдельное свойство. */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{
  margin:0; color:var(--color-text);
  /* фон: цвет + сетка еле заметных точек (глубина, как в Claude Code) */
  background-color:var(--color-bg);
  background-image:radial-gradient(color-mix(in srgb, var(--color-text) 7%, transparent) 1px, transparent 1.5px);
  background-size:22px 22px;
  font-family:var(--f-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--f-display); margin:0; text-wrap:balance; letter-spacing:-.02em; line-height:1.12}
h1{font-weight:800; font-size:var(--step-3); letter-spacing:-.03em; line-height:1.02}
h2{font-weight:800; font-size:var(--step-2)}
h3{font-weight:700; font-size:var(--step-0)}
p{margin:0}
a{color:inherit; text-decoration:none}
a:focus-visible,button:focus-visible{outline:2px solid var(--color-accent); outline-offset:3px}
svg{max-width:100%; display:block}

.page{max-width:var(--page); margin:0 auto; padding:0 var(--sp-5)}
.prose{display:flex; flex-direction:column; gap:var(--sp-4); max-width:var(--measure)}
.muted{color:var(--color-text-muted)}
.mono{font-family:var(--f-mono)}
.nums{font-family:var(--f-mono); font-variant-numeric:tabular-nums}
strong{font-weight:600}
.link{border-bottom:1px solid var(--color-accent)}

.eyebrow{
  font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--color-accent);
}
.label{
  font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--color-text-muted);
}

/* --- 4. Шапка и подвал ----------------------------------- */
.top{
  display:flex; align-items:center; gap:var(--sp-5); flex-wrap:wrap;
  padding:var(--sp-6) 0 var(--sp-5);
}
.nav{display:flex; gap:var(--sp-5); margin-left:auto; flex-wrap:wrap}
.nav a{
  font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--color-text-muted);
  padding-bottom:2px; border-bottom:1px solid transparent;
}
.nav a:hover,.nav a[aria-current]{color:var(--color-text); border-bottom-color:var(--color-accent)}
.nav a.cta, .foot-meta a.cta{color:var(--color-accent)}

.foot{
  border-top:1px solid var(--color-line); margin-top:var(--sp-6);
  padding:var(--sp-4) 0 var(--sp-7);
  display:flex; flex-wrap:wrap; gap:var(--sp-5); align-items:baseline;
  color:var(--color-text-muted); font-size:0.85rem;
}
.foot-brand{font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted)}
.foot-meta{margin-left:auto; font-family:var(--f-mono); font-size:0.788rem; display:flex; gap:var(--sp-5); flex-wrap:wrap}
.foot-meta a{color:var(--color-text-muted)}
.foot-meta a:hover{color:var(--color-accent)}
/* политика — отдельный нижний ряд подвала */
.foot-doc{flex-basis:100%; font-family:var(--f-mono); font-size:0.788rem}
.foot-doc a{display:inline-block; padding:4px 0; color:var(--color-text-muted)}
.foot-doc a:hover{color:var(--color-accent)}
/* на телефоне меню подвала ложится в несколько строк, и политика читалась
   его пунктом — её отделяет тонкая линейка */
@media (max-width:760px){.foot-doc{padding-top:var(--sp-3); border-top:1px solid var(--color-line)}}

/* Уведомление о cookie (COOKIE_JS в build.py). Тот же блок стоит в proekt.css:
   статьи этот файл не грузят. Правишь здесь — правь и там. */
.cookie{position:fixed; left:var(--sp-5); bottom:var(--sp-5); z-index:10; max-width:460px;
  display:flex; align-items:center; gap:var(--sp-5); padding:var(--sp-4) var(--sp-4) var(--sp-4) var(--sp-5);
  background:var(--color-surface); border:1px solid var(--color-line);
  opacity:0; transform:translateY(8px); transition:opacity .3s, transform .3s; pointer-events:none}
.cookie.on{opacity:1; transform:none; pointer-events:auto}
.cookie p{margin:0; font-family:var(--f-body); font-size:0.85rem; line-height:1.5; color:var(--color-text-muted)}
.cookie p a{color:var(--color-text)}
.cookie button{flex:0 0 auto; padding:10px var(--sp-4); background:none; cursor:pointer;
  border:1px solid var(--color-text); color:var(--color-text);
  font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.16em; text-transform:uppercase}
.cookie button:hover{border-color:var(--color-accent); color:var(--color-accent)}
@media (max-width:560px){
  .cookie{left:var(--sp-3); right:var(--sp-3); bottom:calc(var(--sp-3) + env(safe-area-inset-bottom)); max-width:none}
}
@media (prefers-reduced-motion:reduce){.cookie{transition:none; transform:none}}

/* --- 5. Заголовочный блок страницы ----------------------- */

.crumbs{
  display:flex; gap:var(--sp-2); align-items:center; flex-wrap:wrap;
  font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted);
  padding-top:var(--sp-2);
}
.crumbs a:hover{color:var(--color-accent)}

/* --- 6. Секции ------------------------------------------- */
.sec{display:flex; flex-direction:column; gap:var(--sp-5); padding:var(--sp-7) 0; border-top:1px solid var(--color-line)}
.sec-head{display:flex; flex-direction:column; gap:var(--sp-2)}

/* --- 7. Капсула, фактбокс, вердикт ----------------------- */


/* --- 8. Список проектов ------------------------------------ */
/* --- 9. Таблицы ------------------------------------------ */
.tw{overflow-x:auto; min-width:0; max-width:100%; border:1px solid var(--color-line); background:var(--color-surface)}
table{border-collapse:collapse; width:100%; min-width:520px}
th,td{text-align:left; padding:11px 15px; border-bottom:1px solid var(--color-line); font-size:0.925rem; vertical-align:top}
th{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-muted); font-weight:500}
tbody tr:last-child td{border-bottom:none}
td.n,th.n{font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right}
td.c,th.c{text-align:center; font-family:var(--f-mono)}
tr.total td{border-top:2px solid var(--color-text); font-weight:600}
.yes{color:var(--color-yes); font-weight:600}
.no{color:var(--color-no)}

/* --- 10. Схемы, скриншоты, код --------------------------- */
figure{margin:0; display:flex; flex-direction:column; gap:var(--sp-3)}
figcaption{font-size:0.85rem; color:var(--color-text-muted); max-width:var(--measure)}
.shot{background:var(--shot-bg); border:1px solid var(--color-line); padding:var(--sp-4); overflow-x:auto}
pre{
  background:var(--color-sunk); border:1px solid var(--color-line);
  padding:var(--sp-4); overflow-x:auto; font-family:var(--f-mono);
  font-size:0.85rem; line-height:1.55; margin:0;
}
code{font-family:var(--f-mono); font-size:.9em}

details.faq{border-bottom:1px solid var(--color-line); padding:var(--sp-4) 0}
/* text-wrap:balance — как у заголовков. Без него вопрос рвался по дефису:
   «сотрудника AI-» / «агентом?». Браузер сам переразбивает строки по
   пробелу и заодно не оставляет коротких хвостов у длинных вопросов. */
details.faq summary{cursor:pointer; font-family:var(--f-display); font-weight:700; font-size:1rem;
  list-style:none; display:flex; gap:var(--sp-3); text-wrap:balance}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::before{content:"+"; color:var(--color-accent); font-family:var(--f-mono)}
details.faq[open] summary::before{content:"−"}
details.faq p{margin-top:var(--sp-3); max-width:var(--measure); color:var(--color-text-muted); font-size:0.925rem}
/* Ответ раскрывается плавно, а не скачком: высота растёт за 0,25 с,
   сворачивается быстрее, за 0,18 с — уход короче появления. Текст ответа
   всегда в разметке и индексируется. Где нет ::details-content или
   interpolate-size, раскрытие мгновенное, как было. */
@supports (interpolate-size:allow-keywords) and selector(::details-content){
@media (prefers-reduced-motion:no-preference){
  details.faq{interpolate-size:allow-keywords}
  details.faq::details-content{block-size:0; overflow:hidden;
    transition:block-size .18s ease-in, content-visibility .18s allow-discrete}
  details.faq[open]::details-content{block-size:auto;
    transition:block-size .25s cubic-bezier(.16,1,.3,1), content-visibility .25s allow-discrete}
}
}


@media (prefers-reduced-motion:reduce){*{animation:none!important; transition:none!important}}

/* --- 13. Первый экран ------------------------------------ */
.wide{max-width:var(--wide); margin:0 auto; padding:0 var(--sp-5)}
.hero{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-7); align-items:center; padding:var(--sp-7) 0 var(--sp-8);
}
@media (max-width:900px){.hero{grid-template-columns:1fr; gap:var(--sp-6); padding-bottom:var(--sp-7)}}
.hero-name{
  font-family:var(--f-display); font-weight:800;
  font-size:clamp(2.7rem,6.4vw,5.1rem); line-height:.9; letter-spacing:-.045em; margin:0;
}
.hero-name em{font-style:normal; color:var(--color-accent)}

.hero-links{display:flex; align-items:baseline; gap:var(--sp-4); margin-top:var(--sp-6); font-family:var(--f-mono); font-size:0.788rem}
.hero-links a{color:var(--color-text-muted)}
.hero-links .sep{color:var(--color-text-muted); opacity:.5}
.hero-links a:hover{color:var(--color-accent)}

/* --- 16. Выравнивание и мелкие правки -------------------- */
.sec-head h2{max-width:24ch}

.tw{max-width:min(1000px, 100%)}

figure{max-width:1000px}
pre{max-width:1000px}

/* --- 17. Контраст цены и объём --------------------------- */


/* --- 19. Блок видимости в первом экране ------------------ */
.viz{border:1px solid var(--color-line); background:var(--color-surface); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-4)}
.viz-chart{background:var(--color-bg); border:1px solid var(--color-line); padding:var(--sp-3)}
.viz-rows{display:flex; flex-direction:column; gap:7px}
.vrow{display:grid; grid-template-columns:92px 1fr 52px; gap:var(--sp-3); align-items:center; font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted)}
.vbar{height:7px; background:var(--color-sunk); position:relative}
.vbar i{position:absolute; inset:0 auto 0 0; background:var(--color-seti); display:block}
.vbar.ya i{background:var(--color-poisk)}
.vbar.ist i{background:var(--color-poisk)}
.vbar.go i{background:var(--color-goo)}
.vrow .baza{color:var(--color-text-muted); font-size:.66rem; margin-left:6px}

/* Верх панели: сумма показов и доля упоминаний двумя числами */
.viz-dva{display:flex; gap:26px; align-items:center; padding-bottom:4px; flex-wrap:wrap}
/* Подпись стоит СПРАВА от числа, а не под ним: так верхняя строка экономит
   высоту, и её остаётся больше для таблицы под графиком. */
.viz-dva .p{display:flex; gap:9px; align-items:center}
.viz-dva b{font-family:var(--f-display); font-weight:800; font-size:1.9rem; line-height:1;
  font-variant-numeric:tabular-nums; color:var(--color-text); white-space:nowrap}
.viz-dva b.hot{color:var(--color-seti)}
.viz-dva span{font-family:var(--f-mono); font-size:.67rem; color:var(--color-text-muted); line-height:1.35}

/* Поиск таблицей: подписи метрик слева один раз, системы колонками */
.ptab{display:grid; gap:7px 14px; align-items:center;
  font-family:var(--f-mono); font-size:.715rem; color:var(--color-text-muted)}
.ptab.k1{grid-template-columns:auto 1fr}
.ptab.k2{grid-template-columns:auto 1fr 1fr}
.ptab.k3{grid-template-columns:auto 1fr 1fr 1fr}
.ptab .hd{font-size:.64rem; letter-spacing:.09em; text-transform:uppercase; text-align:left}
.ptab .cell{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:center}
.ptab .bar{height:7px; background:var(--color-sunk); position:relative}
.ptab .bar i{position:absolute; inset:0 auto 0 0; display:block}
.ptab .bar.ya i{background:var(--color-poisk)}
.ptab .bar.go i{background:var(--color-goo)}
.ptab .v{color:var(--color-text); font-variant-numeric:tabular-nums; text-align:left; min-width:0}
.otkuda{display:flex; flex-direction:column; gap:7px; margin-top:2px}
.otkuda .imena{display:flex; flex-wrap:wrap; gap:0 9px; font-family:var(--f-mono);
  font-size:.66rem; color:var(--color-text-muted); line-height:1.5}
.otkuda .imena > span{white-space:nowrap}
.otkuda .imena b{color:var(--color-text); font-weight:400; font-variant-numeric:tabular-nums}
.otkuda .imena i{font-style:normal; color:var(--color-text-muted); opacity:.55; margin-left:9px}
.otkuda .polosa{display:flex; height:13px; overflow:hidden}
.otkuda .polosa i{display:block; height:100%}
.otkuda .kv2{display:inline-block; width:8px; height:8px; margin-right:5px; vertical-align:baseline}
/* Части одного целого — один тон от тёмного к светлому по убыванию доли.
   Цветной радуги тут нет намеренно: сегменты равнозначны, и разные цвета
   заставляли бы искать смысл, которого в них не заложено. */
.t1{background:#A3004F} .t2{background:#D6006E} .t3{background:#E2408F}
.t4{background:#EB7AB0} .t5{background:#F3AFCF} .t6{background:#FBE3EF}
.stolbik{display:none}
@media (max-width:600px){ .ptab{display:none} .stolbik{display:block} }
/* Узкие телефоны: два числа рядом не помещаются, дата уходит под них */
@media (max-width:380px){
  .viz-dva{gap:16px}
  .viz-dva b{font-size:1.6rem}
  .viz-dva .p{flex-direction:column; gap:2px; align-items:flex-start}
}
.kv{display:inline-block; width:9px; height:9px; margin-right:7px}
.kv-set{background:var(--color-seti)}
.kv-ya{background:var(--color-poisk)}
.kv-go{background:var(--color-goo)}
.viz-dva b.pro{color:var(--color-accent)}   /* просмотры: тот же розовый, что область на графике */
.vrow .val{text-align:right; color:var(--color-text); font-variant-numeric:tabular-nums}
.viz-split{border-top:1px solid var(--color-line); padding-top:var(--sp-3); display:flex; flex-direction:column; gap:7px}

/* --- 20. Статейный формат кейса -------------------------- */
.factline{
  display:flex; flex-wrap:wrap; gap:var(--sp-5); padding:var(--sp-4) 0;
  border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line);
  font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted);
}
/* Последней в секции нижняя линейка не нужна: секция рисует свою, и между
   ними оставался пустой отступ — на телефоне это читалось как забытая
   пустая строка, а не как граница блока. */
.sec > .factline:last-child{border-bottom:none}
.factline b{font-family:var(--f-display); font-weight:700; font-size:0.925rem; color:var(--color-text); margin-left:6px}
.factline .ok{color:var(--color-accent)}
/* Широкая схема: растёт вправо, где есть свободное место, и никогда не уезжает
   за левый край экрана. Прежний вариант с margin-inline:-140px обрезал схему
   на ширинах 1180–1380 px. */
.wide-fig{margin-inline:0; width:min(1000px, calc(100vw - 2 * var(--sp-5))); max-width:none; padding-inline:0}
details.code{border:1px solid var(--color-line); background:var(--color-surface); padding:var(--sp-4) var(--sp-5)}
details.code summary{cursor:pointer; font-family:var(--f-mono); font-size:0.85rem; color:var(--color-accent); list-style:none}
details.code summary::-webkit-details-marker{display:none}
details.code pre{margin-top:var(--sp-4); background:var(--color-bg)}

/* --- 23. Реестр (страница /all/) ------------------------- */
.reg{width:100%; border-collapse:collapse; background:var(--color-surface); border:1px solid var(--color-line)}
.reg th{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase;
        color:var(--color-text-muted); font-weight:500; text-align:left; padding:12px 16px; border-bottom:1px solid var(--color-line)}
.reg th.n{text-align:right}
.reg td{padding:0; border-bottom:1px solid var(--color-line); vertical-align:top}
.reg tr:last-child td{border-bottom:none}
.reg a.cell{display:block; padding:16px; color:inherit}
/* Номер проекта: порядок его появления в лаборатории, не место в списке.
   Даёт глазу опору — без него на телефоне карточки сливаются в одну ленту. */
.reg .nomer{display:block; font-family:var(--f-mono); font-size:0.663rem;
  letter-spacing:.14em; color:var(--color-accent); margin-bottom:6px}
.reg .name{font-family:var(--f-display); font-weight:700; font-size:1rem; line-height:1.25; display:flex; gap:8px; align-items:baseline}

/* Две цены, ради которых человек и открыл реестр. По рынку — жирным чёрным,
   себестоимость — тем же начертанием, но акцентом. Подписи и пояснения под
   ними остаются служебными: выделяется только само число. */
.reg .m[data-k="По рынку"]{font-weight:700}
.reg .m[data-k="Себестоимость"]{color:var(--color-accent)}
.reg .m[data-k="По рынку"]::before,
.reg .m[data-k="По рынку"] .kto{font-weight:400}
.reg .m[data-k="Себестоимость"]::before,
.reg .m[data-k="Себестоимость"] .kto{color:var(--color-text-muted)}
.reg .name .arrow{color:var(--color-accent); opacity:0; transform:translateX(-4px); transition:opacity .14s ease, transform .14s ease; font-family:var(--f-mono)}
.reg .desc{font-size:0.85rem; color:var(--color-text-muted); margin-top:5px; max-width:62ch}
.reg .m{font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:0.85rem; text-align:right; white-space:nowrap; padding:16px}
/* Цифры выравниваются по названию проекта, а не по верху ячейки: над названием
   стоит номер отдельной строкой, и без этого отступа цифра висела на его уровне,
   в сорока пикселях над строкой, к которой относится. На телефоне таблица
   разворачивается в карточку и отступ не нужен. */
@media (min-width:761px){ .reg td.m{padding-top:40px} }
.reg .m.txt{text-align:left; white-space:normal; overflow-wrap:anywhere; line-height:1.35}
.reg .size{display:block; margin-top:6px; font-family:var(--f-mono); font-size:0.725rem; color:var(--color-text-muted)}
.reg .size i{font-style:normal}
.v-ok{color:var(--color-yes)}  .v-no{color:var(--color-accent)}
.reg tbody tr{transition:background .12s ease; cursor:pointer}
/* Строка подсвечивается целиком, показывает стрелку и курсор-руку — то есть
   обещает переход. Раньше переход был только в первой ячейке: клик по цене
   или дате подсвечивал строку и ничего не делал. Теперь невидимый слой
   ссылки растянут на всю строку. Других ссылок в строках реестра нет,
   перекрывать нечего. */
.reg tbody tr{position:relative}
.reg a.cell::after{content:""; position:absolute; inset:0}
.reg tbody tr:hover{background:var(--color-accent-bg)}
.reg tbody tr:hover .name .arrow{opacity:1; transform:translateX(0)}
.reg tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--color-accent)}
.reg tr.total td{border-top:2px solid var(--color-text); font-weight:600; padding:14px 16px; font-family:var(--f-mono); font-size:0.85rem; cursor:default}
.reg tr.total td.acc{color:var(--color-accent); font-weight:700}
.reg tr.podpis td{padding:10px 16px 4px; border-bottom:none; font-family:var(--f-mono);
  font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--color-text-muted); cursor:default; text-align:right}
.reg tr.podpis td:first-child{text-align:left}
.reg tr.podpis:hover{background:transparent}
.reg tr.total:hover{background:transparent}
/* На телефоне таблица разворачивается в карточку: шапка скрывается, и каждая
   ячейка сама называет себя подписью из data-k. Без этого от проекта остаётся
   столбик голых цифр, по которому не понять, где объём, а где цена по рынку. */
@media (max-width:760px){
  .reg thead{display:none}
  .reg tr{display:block; border-bottom:1px solid var(--color-line)}
  .reg td{display:block; border:none}
  .reg a.cell{padding:16px 16px 12px}
  .reg .m{display:flex; flex-wrap:wrap; gap:0 var(--sp-4); align-items:baseline;
    justify-content:space-between; padding:7px 16px; font-size:0.85rem; text-align:right;
    border-top:1px solid var(--color-line)}
  .reg .m::before{content:attr(data-k); flex:0 0 auto; font-size:0.663rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--color-text-muted); text-align:left}
  .reg .m.txt{text-align:right}
  .reg .m .kto{flex-basis:100%; text-align:right; margin-top:2px}
  .reg .m.skryt, .reg tr.total .m.skryt{display:none}

}

/* --- 24. Первый экран: компактнее и понятнее ------------- */
.hero{padding:var(--sp-6) 0 var(--sp-7); gap:var(--sp-6)}
.hero-name{font-size:clamp(2.5rem,5.4vw,4.4rem); line-height:.92}
.hero-rule{margin-top:var(--sp-4); font-size:1.06rem; max-width:30ch}



.hero-links{margin-top:var(--sp-4)}
.viz{padding:var(--sp-4); gap:var(--sp-3)}
/* Заголовок панели: имя блока строкой, под ним — кого именно спрашиваем.
   Раньше здесь было предложение в три строки, и панель начиналась с текста,
   а не с того, что она показывает. */
.viz-head{display:flex; flex-direction:column; gap:var(--sp-1);
  border-bottom:1px solid var(--color-line); padding-bottom:var(--sp-3)}
.viz-head b{font-family:var(--f-display); font-weight:800; font-size:var(--step-1);
  letter-spacing:-.02em; line-height:1.2; color:var(--color-text)}
.viz-chart{padding:var(--sp-2)}
.viz-rows{gap:5px}
.vrow{font-size:0.725rem}

/* --- 26. Акценты в таблице ------------------------------- */
.badge{
  font-family:var(--f-mono); font-size:0.613rem; letter-spacing:.12em; text-transform:uppercase;
  padding:2px 7px; margin-left:8px; vertical-align:middle; white-space:nowrap;
}
.badge.new{background:var(--color-accent); color:var(--chip-ink)}

/* --- 27. FAQ на главной ---------------------------------- */
.faq-list{border-top:1px solid var(--color-line); max-width:820px}

/* --- 27б. Таблица замера на телефоне ------------------------
   24 вопроса × 5 систем — форма для монитора. На 390 px каждый вопрос
   ломался на шесть строк, две системы уезжали за экран, а страница
   вытягивалась на девять экранов подряд из одних прочерков.
   Разворачиваем в карточку: вопрос строкой, под ним пять меток в ряд. */
@media (max-width:760px){
  .zamer table{min-width:0}
  .zamer thead{display:none}
  .zamer tr{display:block; padding:var(--sp-4) var(--sp-5);
    border-bottom:1px solid var(--color-line)}
  .zamer tr:last-child{border-bottom:none}
  .zamer td{display:block; border:none; padding:0}
  .zamer td:first-child{font-size:0.925rem; line-height:1.45; margin-bottom:var(--sp-3)}
  .zamer td.c{display:none}
  .zamer td.svod-mob{display:block; font-family:var(--f-mono); font-size:0.663rem;
    letter-spacing:.06em; color:var(--color-text-muted)}
}
/* На мониторе матрица читается по столбцам, и сводная строка там лишняя */
.svod-mob{display:none}

/* --- 27б. История замеров на телефоне ---------------------- */
/* Шесть колонок в 333 px не помещаются: «кого называют вместо нас» и
   «методология» уезжали за край — и это они растягивали строки до 90 px,
   так что видимая часть выглядела полупустой, будто вёрстка сломалась.
   Строка становится карточкой: короткие цифры в ряд с подписью, длинные
   тексты — подпись сверху, значение под ней. */
@media (max-width:760px){
  .istoriya{min-width:0}
  .istoriya thead{display:none}
  .istoriya tr{display:block; padding:var(--sp-4) var(--sp-5);
    border-bottom:1px solid var(--color-line)}
  .istoriya tr:last-child{border-bottom:none}
  .istoriya td{display:flex; justify-content:space-between; align-items:baseline;
    gap:0 var(--sp-4); border:none; padding:3px 0; text-align:right}
  .istoriya td::before{content:attr(data-k); flex:0 0 auto; font-family:var(--f-mono);
    font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase;
    color:var(--color-text-muted); text-align:left}
  .istoriya td.dlinno{display:block; text-align:left; padding-top:var(--sp-3)}
  .istoriya td.dlinno::before{display:block; margin-bottom:3px}
}

/* --- 27в. Таблица «кого называют вместо нас» на панели ------ */
/* min-width:0 гасит общее table{min-width:520px}: таблица «домен → число»
   узкая и на телефоне помещается целиком. С общей границей она упиралась
   в 520 px внутри 333 и уезжала вбок без всякой нужды. */
.vmesto{width:100%; max-width:520px; min-width:0; border-collapse:collapse;
  background:var(--color-surface); border:1px solid var(--color-line)}
.vmesto th{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.13em;
  text-transform:uppercase; color:var(--color-text-muted); font-weight:400;
  text-align:left; padding:10px 16px; border-bottom:1px solid var(--color-line)}
.vmesto th.n{text-align:right}
.vmesto td{padding:9px 16px; font-family:var(--f-mono); font-size:0.85rem;
  border-bottom:1px solid var(--color-line)}
.vmesto td.m{text-align:right; font-variant-numeric:tabular-nums; color:var(--color-text-muted)}
.vmesto tr:last-child td{border-bottom:none}

/* --- 28. Наверх ------------------------------------------ */
.totop{
  display:inline-block; margin-top:var(--sp-5); font-family:var(--f-mono); font-size:0.788rem;
  color:var(--color-text-muted); border-bottom:0;
}
.totop .ar{color:var(--color-accent)}
.totop:hover .wd{color:var(--color-accent)}

.viz-split{padding-top:var(--sp-2)}

/* --- 30. Мобильная: итоговая строка теми же подписями, что и карточки --- */
@media (max-width:760px){
  /* Повтор шапки перед итогом на телефоне не нужен: итоговая строка теперь
     называет свои цифры сама, а без значений рядом эти подписи висят столбиком. */
  .reg tr.podpis{display:block; padding:14px 16px 0}
  .reg tr.podpis td{display:none; padding:0; border:none}
  .reg tr.podpis td:first-child{display:block; font-family:var(--f-mono); font-size:0.663rem;
    letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-muted)}
  .reg tr.total{display:block; padding:8px 16px 14px; border-top:2px solid var(--color-text)}
  .reg tr.total td{display:block; padding:0; border:none}
  .reg tr.total td:empty{display:none}
  .reg tr.total > td:first-child{font-family:var(--f-mono); font-size:0.663rem;
    letter-spacing:.13em; text-transform:uppercase; color:var(--color-text-muted); margin-bottom:var(--sp-2)}
  .reg tr.total .m{display:flex; justify-content:space-between; align-items:baseline;
    gap:var(--sp-4); padding:4px 0; border:none; text-align:right}
  
  
  
}

/* --- 31. Логотип как меню, AI акцентом -------------------- */
/* Одно определение на файл. Раньше .mark стоял в трёх местах, и из первого
   жил ровно один line-height — остальное перебивалось. Кто убирал первое
   правило как «почти мёртвое», ронял высоту шапки: ровно эта поломка
   вылезла 08.09.2026 в proekt.css, где line-height не был задан вовсе. */
.mark{font-family:var(--f-mono); font-weight:500; font-size:0.725rem; letter-spacing:.16em; text-transform:uppercase; color:var(--color-text); line-height:1; padding:7px 0}
.mark em{font-style:normal; color:var(--color-accent)}
.mark:hover{color:var(--color-accent)}

/* --- 32. Первый экран занимает экран целиком -------------- */
.hero{min-height:calc(100svh - 108px); align-content:center; padding:var(--sp-6) 0 var(--sp-7)}
@media (max-width:900px){.hero{min-height:0}}
.hero-name{font-size:clamp(2.7rem,6.2vw,5.2rem)}
.hero-rule{font-size:1.18rem; max-width:28ch}


.viz{padding:var(--sp-5)}

/* --- 35. Первый экран ровно по высоте окна ---------------- */
#top{min-height:100svh; display:flex; flex-direction:column}
#top .hero{flex:1 0 auto; min-height:0; align-content:center}
@media (max-width:900px){#top{min-height:0}#top .hero{flex:0 0 auto}}

/* --- 51. Телефон: первый экран во всю высоту, ссылки прижаты к низу ------
   svh — высота окна при развёрнутой строке браузера. С ней нижняя строка
   никогда не уезжает под адресную строку, в отличие от vh и dvh.
   190px — шапка с меню в две строки плюс верхний отступ хиро. */
@media (max-width:760px){
  #top{min-height:100svh; display:flex; flex-direction:column}
  /* Свой отступ сверху убран: он складывался с auto-отступом, и воздух над
     заголовком выходил на 28 px больше, чем над ссылками. */
  #top > .hero{display:flex; flex-direction:column; gap:var(--sp-8); flex:1 1 auto;
    padding-top:0}
  #top > .hero > div:first-child{display:flex; flex-direction:column;
    min-height:calc(100svh - 190px)}
  /* Два auto-отступа делят свободное место поровну: часть встаёт над
     заголовком, часть над ссылками. Один auto собрал бы всё в одну дыру. */
  #top .hero-name{margin-top:auto}
  #top .hero-links{margin-top:auto; padding-bottom:var(--sp-5)}

  /* воздух между блоками: на телефоне ритм крупнее, чем на десктопе */
  .sec{padding:var(--sp-8) 0; gap:var(--sp-6)}
  .hero-rule{margin-top:var(--sp-5)}
  .hero-price{margin-top:var(--sp-6)}
  .hero-price-note{margin-top:var(--sp-3)}
  .numstrip .inner{gap:1px}
  .numstrip .tile{padding:var(--sp-5) var(--sp-4)}
}

/* --- 36. Блок «Проверить самому» -------------------------- */
.verify-rows{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1px; background:var(--color-line); border:1px solid var(--color-line)}
.verify-rows a{background:var(--color-bg); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1)}
.verify-rows a span{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted)}
.verify-rows a b{font-weight:600; font-size:0.925rem}
.verify-rows a:hover b{color:var(--color-accent)}
.verify-note{font-size:0.85rem; color:var(--color-text-muted); max-width:64ch}
.fl-link{border-bottom:1px dotted var(--color-text-muted)}
.fl-link:hover{color:var(--color-accent); border-bottom-color:var(--color-accent)}

/* --- 37. Журнал правок ------------------------------------ */
.log{display:flex; flex-direction:column; border-top:1px solid var(--color-line); max-width:820px}
.log-row{display:grid; grid-template-columns:110px 1fr; gap:var(--sp-5); padding:var(--sp-4) 0; border-bottom:1px solid var(--color-line)}
.log-row .d{font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted); font-variant-numeric:tabular-nums}
.log-row .t{font-size:0.925rem; max-width:60ch}
.log-row .t .where{font-family:var(--f-mono); font-size:0.725rem; color:var(--color-accent); margin-right:8px}
@media (max-width:600px){.log-row{grid-template-columns:1fr; gap:var(--sp-1)}}

/* --- 38. Страница 404 ------------------------------------- */
.nf{display:flex; flex-direction:column; gap:var(--sp-5); padding:var(--sp-8) 0; min-height:52svh; justify-content:center; align-items:flex-start}
.nf .code{font-family:var(--f-display); font-weight:800; font-size:clamp(4rem,14vw,8rem); line-height:1; color:var(--color-accent); font-variant-numeric:tabular-nums}
.nf p{max-width:44ch}

.reg span.cell{display:block; padding:16px}

.press-media{font-family:var(--f-mono); font-size:0.725rem; letter-spacing:.12em; text-transform:uppercase; color:var(--color-text-muted); display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.press-media em{font-style:normal; color:var(--color-text)}
.press-media .sq{width:8px; height:8px; background:var(--color-accent); display:inline-block; flex:0 0 auto}

/* --- 40. Реестр: стабильные колонки и стыки тел таблицы ---- */
@media (min-width:761px){
  .reg{table-layout:fixed}
  .reg col.c-name{width:43%} .reg col.c-vol{width:12%} .reg col.c-cost{width:16%} .reg col.c-mkt{width:18%} .reg col.c-date{width:11%}
}
.reg tbody:not(:last-child) tr:last-child td{border-bottom:1px solid var(--color-line)}

/* --- 42. Переключатель темы -------------------------------- */
.theme-btn{background:none; border:none; cursor:pointer; color:var(--color-text-muted); padding:0 2px;
  display:inline-flex; align-items:center; justify-content:center}
/* Круг темы: 13 px — это сам круг, рамка снаружи. Без content-box рамка
   съедала бы 3 px внутрь, а без flex:0 0 auto круг сплющивался бы в овал,
   потому что как элемент флекса он имеет право сжиматься. */
.theme-btn::before{content:''; flex:0 0 auto; box-sizing:content-box;
  width:13px; height:13px; border-radius:50%;
  border:1.5px solid currentColor;
  background:linear-gradient(90deg, currentColor 50%, transparent 50%)}
.theme-btn:hover{color:var(--color-accent)}

/* --- 43. Второй экран: автор + карта ----------------------- */
.about2{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--sp-7); align-items:center}
/* minmax(0,1fr), а не 1fr: у элемента грида min-width:auto, и колонка
   растягивается под самое широкое содержимое. С картой на 700 px это
   распирало страницу вместо того, чтобы включить прокрутку внутри карты. */
@media (max-width:900px){.about2{grid-template-columns:minmax(0,1fr)}}

/* --- 44. Цифровая полоса между экранами: плитки ------------ */
.numstrip .inner{max-width:var(--wide); margin:0 auto; display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  border-top:1px solid var(--color-line); border-bottom:1px solid var(--color-line)}
.numstrip .tile{background:var(--color-surface); padding:var(--sp-4) var(--sp-5); display:flex; flex-direction:column; gap:3px}
.numstrip .tile b{font-family:var(--f-display); font-weight:800; font-size:1.4rem; line-height:1.1; color:var(--color-text); font-variant-numeric:tabular-nums}
.numstrip .tile.akcent b{color:var(--color-accent)}
.numstrip .tile > span{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.11em; text-transform:uppercase; color:var(--color-text-muted)}
@media (max-width:900px){.numstrip .inner{grid-template-columns:repeat(2,1fr)}}
@media (max-width:420px){.numstrip .inner{grid-template-columns:1fr}}

/* --- 44б. Цена под тэглайном: рынок зачёркнут, свой расход акцентом --- */
.hero-price{
  margin-top:var(--sp-4); display:flex; align-items:baseline; gap:var(--sp-3);
  font-family:var(--f-display); font-variant-numeric:tabular-nums;
}
.hero-price s{font-weight:800; font-size:2.1rem; line-height:1; color:var(--color-text-muted);
  text-decoration-thickness:3px}
.hero-price b{font-weight:800; font-size:2.6rem; line-height:1; color:var(--color-accent)}
.hero-price i{font-style:normal; font-family:var(--f-mono); font-size:0.725rem;
  letter-spacing:.11em; text-transform:uppercase; color:var(--color-text-muted)}
.hero-price-note em{font-style:normal; font-family:var(--f-mono); text-transform:uppercase;
  letter-spacing:.1em; font-size:.78em; color:var(--color-accent)}
.hero-price-note{margin-top:var(--sp-2); max-width:44ch;
  font-size:0.85rem; line-height:1.5; color:var(--color-text-muted)}

/* На телефоне две цены рядом не помещаются и рвутся посреди числа.
   Ставим их друг под друга: сверху зачёркнутая, под ней живая.
   Сетка, а не перенос флекса: при flex-basis:100% коробка зачёркнутой цены
   растягивалась на всю строку, и прочерченная линия (44в) ушла бы за число.
   Здесь коробка шириной с текст, а положение то же: зазоры 8 px, живая цена
   и «в месяц» стоят по одной базовой линии. */
@media (max-width:560px){
  .hero-price{display:grid; grid-template-columns:max-content 1fr; gap:var(--sp-2); justify-items:start}
  .hero-price s{grid-column:1/-1; font-size:1.5rem; text-decoration-thickness:2px}
  .hero-price b{font-size:3rem}
}

/* --- 44в. Главный момент первого экрана: рынок зачёркивается на глазах ---
   Линия прочерчивается слева направо, и когда она дошла до конца, свой расход
   загорается маджентой. Оба числа видны с первого кадра, движутся только
   линия и цвет: это не появление текста, а жест, которым лаборатория и
   объясняет себя. Линия идёт по середине цифр — 0,48 em от верха строки
   при line-height:1 (Onest 800: базовая линия 0,8325 em, высота цифр 0,708 em).
   Без движения — «уменьшить движение», печать, режим высокой контрастности,
   старый браузер без forced-colors — стоит обычный line-through. */
@media screen and (prefers-reduced-motion:no-preference) and (forced-colors:none){
  .hero-price s{position:relative; text-decoration:none}
  .hero-price s::after{content:""; position:absolute; left:0; right:0; top:.48em;
    height:3px; margin-top:-1.5px; background:currentColor; transform-origin:0 50%;
    animation:zacherk .6s cubic-bezier(.16,1,.3,1) .35s both}
  .hero-price b{animation:zagoraetsya .35s ease-out .8s both}
}
@media screen and (prefers-reduced-motion:no-preference) and (forced-colors:none) and (max-width:560px){
  .hero-price s::after{height:2px; margin-top:-1px}
}
@keyframes zacherk{from{transform:scaleX(0)}}
@keyframes zagoraetsya{from{color:var(--color-text)}}

/* строка под ценой в реестре: что это за цена и откуда */
.reg .kto{display:block; margin-top:4px; font-family:var(--f-mono); font-size:0.663rem;
  line-height:1.35; letter-spacing:.02em; color:var(--color-text-muted);
  white-space:normal; text-align:right}

/* --- 45. Тэглайн хиро: подстрочный, лёгкий ------------------ */
.hero-rule{font-family:var(--f-body); font-weight:400; font-size:1rem; line-height:1.6; letter-spacing:0; color:var(--color-text-muted); max-width:42ch}

/* --- 46. Ревизия 24.08: шапка, полоса, реестр --------------- */

/* 19 · тап-таргеты: пункты меню до 24px, кегль не трогаем */
.nav a{padding-top:5px; padding-bottom:5px; border-bottom-width:1px}
.nav a:hover,.nav a[aria-current]{border-bottom-color:var(--color-accent)}

/* 15 · мобильная шапка в две строки: кнопка темы уходит на строку логотипа */
@media (max-width:620px){
  .top{position:relative; padding-right:34px}
  .theme-btn{position:absolute; top:var(--sp-6); right:0; padding:6px 4px}
  .nav{gap:var(--sp-2) var(--sp-4)}
}

/* 17 · у полосы цифр больше нет собственного фона — по краям видно страницу */
.numstrip{background:transparent}
.numstrip .inner{background:var(--color-line)}

/* 16 · на мобильном реестр раскладывается карточками, ширина таблицы не нужна */
@media (max-width:760px){
  .reg{min-width:0}
}

/* --- 47. Тап-таргеты: всё, что не ссылка внутри строки текста, — от 24px --- */
.theme-btn{min-width:24px; display:inline-flex; align-items:center; justify-content:center}
.crumbs a{padding:3px 0; display:inline-block}
.foot-meta a{padding:4px 0; display:inline-block}
.sec > p > a.link:only-child{padding:2px 0; display:inline-block}

/* --- 48. Тап-таргеты: одиночные ссылки-строки ---------------- */
.hero-links a{padding:4px 0}
.viz a.link, .totop, .article + p a.link{padding:3px 0; display:inline-block}
.factline .fl-link{padding:3px 0; display:inline-block}
.page > p > a.link{padding:3px 0; display:inline-block}

/* --- 49. «Повторить самому»: пункт без ссылки выглядит как пункт ------------ */
.verify-rows .pending{background:var(--color-bg); padding:var(--sp-4); display:flex; flex-direction:column; gap:var(--sp-1)}
.verify-rows .pending > span{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-text-muted)}
.verify-rows .pending > b{font-weight:600; font-size:0.925rem; color:var(--color-text-muted)}

/* --- 50. Утилиты вместо инлайновых стилей ---------------------
   Инлайновый style="" запрещён строгой политикой CSP: чтобы браузер
   мог отличить нашу разметку от подсунутой, стили живут только в файлах. */
.svg-fluid{width:100%; height:auto}

/* --- 33. Схемы на телефоне -------------------------------- */
/* Текст в SVG масштабируется вместе с картинкой: на 390 px подписи падали
   до 5,2–5,9 px при читаемом минимуме 12. Лечится по-разному, потому что
   схемы разные. */
@media (max-width:760px){
  /* График: в нём важна форма, он должен быть виден целиком. Поэтому не
     прокрутка, а крупнее шрифт и вдвое меньше дат — восемь при таком кегле
     сходятся вплотную. 15 — это единицы viewBox, на экране выходит ~10 px. */
  .viz-chart .svg-fluid text{font-size:15px; letter-spacing:0}

  /* Карта: в ней важны подписи строк, а «ИНФРАСТРУКТУРА» при читаемом кегле
     упирается в первый узел. Поэтому наоборот — держим ширину и листаем
     вбок, как схемы в статьях. Подпись под картой остаётся по ширине экрана. */
  /* Правый край акцентом — та же метка, что у схем в статьях: показывает,
     что карта продолжается вбок, и не уезжает вместе с содержимым. */
  .karta{overflow-x:auto; border-right:2px solid var(--color-accent);
    scrollbar-width:thin; scrollbar-color:var(--color-accent) transparent}
  .karta::-webkit-scrollbar{-webkit-appearance:none; height:4px}
  .karta::-webkit-scrollbar-thumb{background:var(--color-accent)}
  .karta .svg-fluid{min-width:700px}
}
.sec-first{border-top:none}
.mera{max-width:var(--measure)}
.mt0{margin-top:0}
.mt3{margin-top:var(--sp-3)}
.mt5{margin-top:var(--sp-5)}
.mt6{margin-top:var(--sp-6)}

.mb5{margin-bottom:var(--sp-5)}
.my6{margin:var(--sp-6) 0}
.fs76{font-size:0.788rem}
.fs88{font-size:0.85rem}
.fs90{font-size:0.925rem}
.fs94{font-size:0.925rem}

/* --- 12. Исследования: витрина на главной, список раздела ------------------
   Плитки собирает build.py из src/research/*.json через articles/research.py.
   Синий второго ряда — цвет ряда «Яндекс» на панели (--color-poisk). */
.sec-row{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--sp-5); flex-wrap:wrap}
.sec-row .more{font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted); padding:3px 0; border-bottom:1px solid var(--color-line)}
.sec-row .more:hover{color:var(--color-accent); border-color:var(--color-accent)}
.vg{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--color-line); border:1px solid var(--color-line)}
.vg a{background:var(--color-surface); padding:var(--sp-5); display:flex; flex-direction:column; gap:var(--sp-3); min-height:280px; min-width:0}
.vg a:hover{background:var(--color-bg)}
.vg a:hover h3{color:var(--color-accent)}
.vg .k{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent)}
.vg h3{font-size:1.06rem; line-height:1.3; max-width:30ch}
.vg .plot{width:100%; height:178px; display:flex; flex-direction:column; justify-content:center; margin-top:var(--sp-2)}
.vg .plot svg{width:100%; height:auto; max-height:178px; display:block; overflow:visible}
.vg a.last .plot{justify-content:flex-end}
.vg .ans{margin-top:auto; font-size:0.925rem; line-height:1.45; color:var(--color-text)}
.vg .ans b{color:var(--color-accent); font-weight:700}
.vg .scale{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.02em; color:var(--color-text-muted); line-height:1.6}
.vg svg text{font-family:var(--f-mono); font-size:10px; fill:var(--color-text-muted)}
.vg svg text.big{font-family:var(--f-display); font-weight:800; font-size:22px; fill:var(--color-text); letter-spacing:-.02em}
.vg svg text.big.hot{fill:var(--color-accent)}
.vg svg text.dark{fill:var(--color-text)}
.vg svg text.acct{fill:var(--color-accent); font-family:var(--f-display); font-weight:700}
.vg svg .ax{stroke:var(--color-text-muted); stroke-width:1}
.vg svg .grid{stroke:var(--color-line); stroke-width:1}
.vg svg .acc{fill:var(--color-accent)} .vg svg .accs{stroke:var(--color-accent); stroke-width:3}
.vg svg .mut{fill:var(--color-text-muted)}
.vg svg .sunk{fill:var(--color-sunk)}
.vg svg .blue{fill:var(--color-poisk)}
.vg .waffle{display:grid; grid-template-columns:repeat(20,1fr); gap:2px}
.vg .waffle i{display:block; aspect-ratio:1; background:var(--color-sunk)}
.vg .waffle i.a{background:var(--color-accent)} .vg .waffle i.b{background:var(--color-poisk)}
.vg .legend2{display:flex; gap:var(--sp-4); flex-wrap:wrap; margin-top:8px; font-family:var(--f-mono); font-size:0.663rem; color:var(--color-text-muted)}
.vg .legend2 span{display:flex; gap:6px; align-items:center} .vg .legend2 i{width:9px; height:9px; display:block}
.vg .legend2 .c1 i{background:var(--color-accent)} .vg .legend2 .c2 i{background:var(--color-poisk)} .vg .legend2 .c0 i{border:1.5px solid var(--color-text-muted); box-sizing:border-box}
.vg .bign{font-family:var(--f-display); font-weight:800; font-size:3.6rem; line-height:1; letter-spacing:-.03em; font-variant-numeric:tabular-nums}
.vg .bign small{display:block; font-family:var(--f-body); font-weight:400; font-size:0.9rem; letter-spacing:0; color:var(--color-text-muted); margin-top:6px; line-height:1.4; max-width:28ch}
@media (max-width:900px){.vg{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.vg{grid-template-columns:1fr} .vg a{min-height:0} .vg .plot{height:auto}}

/* Графика плиток собирается, пока плитка входит в экран. Каждая форма рисует
   свой смысл: гантель тянется от дешёвого к дорогому, полосы долей
   заполняются по очереди, отметки уровней встают на места (дефицит
   последним), 167 клеток вафли проступают рядами — и ни одна не розовеет.
   Двигается только графика: заголовки, ответы, подписи и числа в SVG стоят
   на месте. Анимация привязана к прокрутке, скрипта нет. Браузер без
   animation-timeline и «уменьшить движение» показывают готовую картинку. */
@supports (animation-timeline:view()){
@media screen and (prefers-reduced-motion:no-preference){
  .vg .plot{view-timeline:--plot block}
  .vg svg .accs, .vg svg rect.acc{transform-box:fill-box; transform-origin:0 50%;
    animation:rastyazhka cubic-bezier(.16,1,.3,1) both; animation-timeline:--plot; animation-range:cover 8% cover 26%}
  .vg svg:has(.accs) circle.acc,
  .vg svg:has(.acct) circle:is(.mut,.acc){transform-box:fill-box; transform-origin:50% 50%;
    animation:tochka cubic-bezier(.16,1,.3,1) both; animation-timeline:--plot; animation-range:cover 20% cover 30%}
  .vg svg rect.acc:nth-of-type(4){animation-range:cover 11% cover 29%}
  .vg svg rect.acc:nth-of-type(6){animation-range:cover 14% cover 32%}
  .vg svg:has(.acct) circle:nth-of-type(3){animation-range:cover 8% cover 18%}
  .vg svg:has(.acct) circle:nth-of-type(6){animation-range:cover 11% cover 21%}
  .vg svg:has(.acct) circle:nth-of-type(11){animation-range:cover 14% cover 24%}
  .vg .waffle i{animation:kletka ease-out both; animation-timeline:view(); animation-range:cover 6% cover 20%}
}
}
@keyframes rastyazhka{from{transform:scaleX(0)}}
@keyframes tochka{from{transform:scale(0)}}
@keyframes kletka{from{opacity:.15; transform:scale(.6)}}
/* Тот же переход, что в шапке секции, продублирован под витриной: человек,
   долиставший плитки до конца, иначе упрётся в тупик. Секция — флекс-колонка
   с gap, поэтому отступ сверху задавать не нужно, он уже есть. */
.vg-vse{display:flex; justify-content:flex-end}
.vg-vse a{font-family:var(--f-mono); font-size:0.788rem; color:var(--color-text-muted); padding:8px 2px; border-bottom:1px solid var(--color-line)}
.vg-vse a:hover{color:var(--color-accent); border-color:var(--color-accent)}
/* На узком экране ссылка встаёт по центру и получает поле под палец. Рамку
   во всю ширину не делаем: пустая коробка на точечном фоне читается как дыра. */
@media (max-width:560px){.vg-vse{justify-content:center} .vg-vse a{padding:14px 10px}}

.rlist{display:flex; flex-direction:column; border-top:1px solid var(--color-line)}
/* Своя верхняя линейка нужна списку, только если над ним что-то есть.
   Первым в секции он рисовал вторую линию в сорока пикселях под линейкой
   самой секции, и между ними висела пустая полоса — та же болезнь, что
   у .factline выше, и лечится так же: линию рисует секция. */
.sec > .rlist:first-child{border-top:none}
.rlist a{display:grid; grid-template-columns:120px minmax(0,1fr) 250px; gap:var(--sp-3) var(--sp-6); padding:var(--sp-6) 0; border-bottom:1px solid var(--color-line); align-items:start}
.rlist a:hover h3{color:var(--color-accent)}
.rlist .no{display:flex; flex-direction:column; gap:4px}
.rlist .no b{font-family:var(--f-display); font-weight:800; font-size:1.7rem; line-height:1; color:var(--color-accent); font-variant-numeric:tabular-nums}
.rlist .no span{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-text-muted)}
.rlist h3{font-size:1.25rem; line-height:1.25; max-width:34ch}
.rlist .ans{font-size:0.95rem; line-height:1.5; margin-top:var(--sp-2); max-width:62ch}
.rlist .ans b{color:var(--color-accent)}
.rlist .scale{font-family:var(--f-mono); font-size:0.663rem; color:var(--color-text-muted); margin-top:var(--sp-2); line-height:1.6}
.rlist .num{border-left:1px solid var(--color-line); padding-left:var(--sp-5); display:flex; flex-direction:column; gap:4px}
.rlist .num b{font-family:var(--f-display); font-weight:800; font-size:2rem; line-height:1; font-variant-numeric:tabular-nums}
.rlist .num span{font-size:0.82rem; color:var(--color-text-muted); line-height:1.4}
/* Две цены столбиком, обе одного кегля: сверху сколько стоила бы работа
   по рынку, под ней сколько стоила на деле. Розовый на этом сайте значит
   себестоимость — так покрашена полоса фактов и колонка в витрине на
   главной, где «по рынку» просто жирная.
   Подпись идёт под своим числом бровью: моноширинный в разрядку прописными,
   тот же голос, что у рубрикаторов, шапок таблиц и даты под номером проекта.
   Отступы посчитаны от gap:4px у .num, поэтому здесь на четыре меньше.
   Правила метят .pod и b.seb, которых нет в списке исследований: там справа
   не цена, а результат, и трогать его незачем. */
.rlist .num b.seb{color:var(--color-accent); margin-top:10px}
.rlist .num .pod{display:block; margin-top:1px; font-family:var(--f-mono);
  font-size:0.663rem; letter-spacing:.13em; text-transform:uppercase;
  color:var(--color-text-muted); line-height:1.4}
/* Пояснение под бровью — тот же кегль, но строчными и без разрядки:
   ярлык и примечание не должны читаться одинаково. */
.rlist .num .kto{display:block; margin-top:2px; font-family:var(--f-mono);
  font-size:0.663rem; line-height:1.35; letter-spacing:.02em;
  text-transform:none; font-style:normal}
@media (max-width:760px){.rlist a{grid-template-columns:1fr} .rlist .num{border-left:0; padding-left:0; border-top:1px solid var(--color-line); padding-top:var(--sp-3)}}

/* линии рисуют сами ячейки: пустое место в конце ряда остаётся фоном, а не серым квадратом */
.rblocks{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1px; padding:1px; border:1px solid var(--color-line)}
.rblocks > div{background:var(--color-surface); box-shadow:0 0 0 1px var(--color-line); padding:var(--sp-5); display:flex; flex-direction:column; gap:8px}
.rblocks .k{font-family:var(--f-mono); font-size:0.663rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-accent)}
.rblocks h3{font-size:1rem}
.rblocks p{font-size:0.85rem; color:var(--color-text-muted); line-height:1.5}

/* ── Скругление внешних углов блоков (20.09.2026, решение Романа) ──
   То же правило, что в proekt.css: радиус у контейнера, внутри всё прямое.
   Реестр на главной — голая таблица со схлопнутыми рамками, радиус к ней
   не применяется; её оставили прямой намеренно. */
:root{--ugol:10px}
.vg,.verify-rows,.rblocks{border-radius:var(--ugol); overflow:hidden}
.cookie,.tw,.shot,.viz,.viz-chart,details.code{border-radius:var(--ugol)}
/* Реестр — таблица: радиус работает только при раздельных рамках. Строка «Итого»
   рисует свою линию сверху, поэтому у строки над ней нижнюю линию убираем. */
.reg{border-collapse:separate; border-spacing:0; border-radius:var(--ugol); overflow:hidden}
.reg tr:has(+ tr.total) td{border-bottom:none}