/* pageindex.space — «ГРЕБЁНКА» / протяжка ленты
   Токены — закон. Генератор сотен страниц не изобретает значения, он берёт их отсюда.
   Направление и обоснование: ./DESIGN.md
   Шрифты (кириллица проверена по subset U+0400):
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Rubik:wght@500;800&family=Vollkorn:wght@400;600&family=Ubuntu+Sans+Mono:wght@400;600&display=swap&subset=cyrillic,latin" rel="stylesheet">
*/

:root {
  /* ── цвет: 6 имён, холодная гамма ─────────────────────────────────── */
  --lenta:    #B9B4C2;  /* фон: средний тон, пыльная сиренево-серая лента */
  --list:     #F6F5F8;  /* лист расшифровки, карточка указателя          */
  --grifel:   #1A1820;  /* текст, зубцы гребёнки, засечки                */
  --sled:     #605B6B;  /* вторичный текст, мета, служебные подписи      */
  --kobalt:   #2436C8;  /* машина: ссылки, головка, метки индексации     */
  --naydeno:  #D9DCF7;  /* заливка найденного куска речи                 */

  /* производные */
  --kobalt-press: #1A28A0;                                        /* ховер/фокус */
  /* след на ленте: #605B6B даёт на #B9B4C2 всего 3.23 и не проходит AA.
     Служебный текст, лежащий прямо на ленте, берёт этот тон — 4.73.
     На листе остаётся обычный --sled. */
  --sled-lenta: #48434F;
  --volos:        color-mix(in oklch, var(--grifel), transparent 88%); /* 12% линия */
  --zub-tikho:    color-mix(in oklch, var(--grifel), transparent 55%); /* зубец в покое */

  /* ── шрифт: 2 гарнитуры + моно на показания ───────────────────────── */
  --displey: "Rubik", "Segoe UI", system-ui, sans-serif;  /* заголовки, интерфейс */
  --rech:    "Vollkorn", Georgia, serif;                  /* только речь */
  --pribor:  "Ubuntu Sans Mono", ui-monospace, "SF Mono", monospace; /* тайм-коды, цифры */

  /* кегли */
  --t-pribor: 0.75rem;   /* 12 — тайм-код, длительность, статус       */
  --t-meta:   0.875rem;  /* 14 — мета на строке указателя             */
  --t-rech:   1.1875rem; /* 19 — расшифровка, мера 60ch               */
  --t-h3:     1.5rem;    /* 24 — название в строке указателя          */
  --t-h2:     2rem;      /* 32                                         */
  --t-h1:     clamp(2rem, 5vw, 4.25rem);  /* 32 → 68                  */

  --w-displey: 800;
  --w-displey-ui: 500;
  --w-rech: 400;
  --w-rech-zhirn: 600;

  --ls-displey: -0.02em;
  --ls-pribor: 0.01em;
  --lh-displey: 1.02;
  --lh-rech: 1.72;
  /* 68ch у Vollkorn давали 75-79 знаков в строке — выше верхней границы
     читабельной меры. 60ch = 66-68 знаков, это середина полосы. */
  --mera: 60ch;
  --cifry: tabular-nums;   /* font-variant-numeric на всём, где цифры */

  /* ── ритм: плотный указатель, просторная речь ─────────────────────── */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 160px;
  --razdel:  clamp(64px, 8vw, 128px);  /* между секциями               */
  --stroka-h: 76px;                    /* высота строки указателя      */
  --pole-levoe: clamp(64px, 18vw, 232px); /* служебное поле тайм-кодов */
  --kolonka: 1280px;
  --pole: max(16px, 4vw);

  /* ── гребёнка ─────────────────────────────────────────────────────── */
  --greb-h:      28px;   /* на странице ролика                         */
  --greb-h-mal:  14px;   /* в строке указателя                         */
  --zub-w:       2px;
  --zub-gap:     1px;
  --golovka-w:   1px;    /* головка воспроизведения                    */
  --zasechka-h:  5px;    /* засечка смены темы                         */

  /* ── одна радиус-логика: прямой угол на всём ──────────────────────── */
  --r: 0;

  /* ── одна теневая стратегия: теней нет ────────────────────────────── */
  --shadow: none;
  --stupen: var(--list);                 /* лист отделяется тоном      */
  --linia:  1px solid var(--volos);      /* и волосяной линией         */
  --fokus:  0 0 0 2px var(--list), 0 0 0 4px var(--kobalt);

  /* ── движение: протяжка ───────────────────────────────────────────── */
  --t-hover:   120ms;   /* строка под курсором                         */
  --t-stroka:  240ms;   /* строка указателя встаёт                     */
  --t-zubcy:   480ms;   /* зубцы прорисовываются шагами                */
  --t-golovka: 6s;      /* проход головки по гребёнке в первом экране  */
  --shag:      40ms;    /* сдвиг между строками                        */
  --e-stroka:  cubic-bezier(.2, .9, .3, 1);
  --e-transport: linear;          /* головка идёт равномерно           */
  --sdvig-vhod: 6px;              /* по горизонтали, вертикали нет     */
  --sdvig-hover: 4px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-hover: 1ms; --t-stroka: 1ms; --t-zubcy: 1ms;
    --t-golovka: 0s; --shag: 0ms;
    --sdvig-vhod: 0px; --sdvig-hover: 0px;
  }
}

/* Витрина живёт на светлой ленте: тёмной темы у неё нет по решению
   направления. Схема объявлена, чтобы браузер не инвертировал формы. */
:root { color-scheme: light; }

html { background: var(--lenta); }
body {
  margin: 0;
  background: var(--lenta);
  color: var(--grifel);
  font: var(--w-displey-ui) var(--t-meta)/1.5 var(--displey);
  font-variant-numeric: var(--cifry);
  -webkit-font-smoothing: antialiased;
}

/* речь — единственное место серифа */
.rech {
  font: var(--w-rech) var(--t-rech)/var(--lh-rech) var(--rech);
  max-inline-size: var(--mera);
}


/* pageindex.space — «ГРЕБЁНКА»
   Оформление строится из токенов. Сырых значений цвета здесь нет.
   Движение только по горизонтали: fade и translateY запрещены направлением. */

*, *::before, *::after { box-sizing: border-box; }

img, svg { display: block; max-width: 100%; }

::selection { background: var(--naydeno); color: var(--grifel); }

:focus-visible {
  outline: none;
  box-shadow: var(--fokus);
}

a { color: var(--kobalt); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--kobalt-press); }

.pribor {
  font-family: var(--pribor);
  font-size: var(--t-pribor);
  font-variant-numeric: var(--cifry);
  letter-spacing: var(--ls-pribor);
}

.polosa {
  max-inline-size: var(--kolonka);
  margin-inline: auto;
  padding-inline: var(--pole);
  padding-block-end: var(--razdel);
}

.razdel { margin-block-start: var(--razdel); }

.razdel__zagolovok {
  font-family: var(--displey);
  font-weight: var(--w-displey);
  font-size: var(--t-h2);
  line-height: var(--lh-displey);
  letter-spacing: var(--ls-displey);
  margin: 0 0 var(--s-5);
}

/* ───────────────────────────────── шапка */

.shapka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  max-inline-size: var(--kolonka);
  margin-inline: auto;
  padding: var(--s-5) var(--pole);
  border-block-end: var(--linia);
}

.shapka__znak { text-decoration: none; color: var(--grifel); display: flex; align-items: baseline; gap: var(--s-3); }
.shapka__imia {
  font-family: var(--displey);
  font-weight: var(--w-displey);
  font-size: 1.125rem;
  letter-spacing: 0.06em;
}
.shapka__dom { font-family: var(--pribor); font-size: var(--t-pribor); color: var(--sled); }

.shapka__nav { display: flex; gap: var(--s-5); }
.shapka__ssylka {
  font-family: var(--displey);
  font-weight: var(--w-displey-ui);
  font-size: var(--t-meta);
  color: var(--grifel);
  text-decoration: none;
  padding-block-end: 2px;
  border-block-end: 2px solid transparent;
  transition: border-color var(--t-hover) linear, color var(--t-hover) linear;
}
.shapka__ssylka:hover,
.shapka__ssylka[aria-current="page"] { border-block-end-color: var(--kobalt); color: var(--grifel); }

/* ───────────────────────────────── первый экран */

.pervyi { padding-block: var(--s-7) var(--s-5); }
.pervyi--uzkii { padding-block: var(--s-7) var(--s-6); }

.pervyi__nadpis { color: var(--sled); margin: 0 0 var(--s-3); text-transform: uppercase; letter-spacing: 0.14em; }

.pervyi__zagolovok {
  font-family: var(--displey);
  font-weight: var(--w-displey);
  font-size: var(--t-h1);
  line-height: var(--lh-displey);
  letter-spacing: var(--ls-displey);
  margin: 0;
  max-inline-size: 18ch;
  overflow: clip;
}

/* строки заголовка встают из-под маски, сдвиг по горизонтали */
.pervyi__zagolovok > span {
  display: block;
  translate: calc(var(--sdvig-vhod) * -2) 0;
  clip-path: inset(0 100% 0 0);
  animation: vstaet var(--t-stroka) var(--e-stroka) forwards;
  animation-delay: calc(var(--i, 0) * var(--shag));
}
@keyframes vstaet {
  to { translate: 0 0; clip-path: inset(0 0 0 0); }
}

.pervyi__text { margin: var(--s-5) 0 0; color: var(--grifel); }
.pervyi__cifry { margin: var(--s-5) 0 0; color: var(--sled); }
.pervyi__vyhod { margin: var(--s-5) 0 0; }

/* лента каталога с головкой воспроизведения — единственный зацикленный эффект */
.lenta-katalog {
  position: relative;
  margin: var(--s-6) 0 0;
  padding: var(--s-4) var(--s-4) var(--s-2);
  background: var(--list);
  border: var(--linia);
}
.lenta-katalog__podpis { color: var(--sled); margin: var(--s-3) 0 0; }

.golovka {
  position: absolute;
  inset-block: var(--s-4) calc(var(--s-3) + 1.6em);
  inset-inline-start: var(--s-4);
  inline-size: var(--golovka-w);
  background: var(--kobalt);
  animation: protyazhka var(--t-golovka) var(--e-transport) infinite;
}
@keyframes protyazhka {
  from { translate: 0 0; }
  to { translate: calc(100cqw - var(--golovka-w)) 0; }
}
.lenta-katalog { container-type: inline-size; }

/* ───────────────────────────────── гребёнка */

.greb {
  inline-size: 100%;
  block-size: var(--greb-h);
  overflow: visible;
}
.greb--malaia { block-size: var(--greb-h-mal); }
.greb--bolshaia { block-size: var(--greb-h); }
.greb--katalog { block-size: 56px; }
.greb--vedomost { block-size: 20px; }
.greb--katalog .greb__zub { stroke: var(--grifel); stroke-width: 13px; }
.greb--katalog .greb__zas { stroke-width: 2px; }
.greb--bolshaia .greb__zub { stroke-width: 3px; }

.greb__zub {
  stroke: var(--zub-tikho);
  stroke-width: var(--zub-w);
  vector-effect: non-scaling-stroke;
  transition: stroke var(--t-hover) linear;
}
.greb__zas {
  stroke: var(--kobalt);
  stroke-width: 1px;
  vector-effect: non-scaling-stroke;
}

/* расшифровки нет — пустая дорожка вместо гребёнки.
   Закон направления: нарисованной волны здесь не будет.
   Сплошная линия во всю ширину читалась как поле ввода и повторялась
   строка за строкой; остался короткий пунктир — обрубок оси времени. */
.greb--net {
  display: flex;
  align-items: flex-end;
  inline-size: 100%;
  block-size: var(--greb-h-mal);
}
.greb--net__os {
  display: block;
  inline-size: 34%;
  block-size: 1px;
  background: repeating-linear-gradient(
    to right, var(--zub-tikho) 0 2px, transparent 2px 5px);
}

/* зубцы прорисовываются слева направо шагами */
.ukazatel .greb,
.greb--bolshaia,
.greb--katalog {
  clip-path: inset(0 100% 0 0);
}
.is-vidno .greb,
.greb--bolshaia.is-vidno,
.greb--katalog.is-vidno {
  animation: zubcy var(--t-zubcy) steps(var(--zubcov, 24)) forwards;
}
@keyframes zubcy {
  to { clip-path: inset(0 0 0 0); }
}

.greb-blok { margin: var(--s-6) 0 0; padding: var(--s-4) var(--s-5) var(--s-3); }
.greb-blok__podpis { color: var(--sled); margin: var(--s-3) 0 0; }
.greb-blok .greb__zub { stroke: var(--grifel); }

/* ───────────────────────────────── поиск и фильтры */

.poisk {
  margin-block-start: var(--s-6);
  padding-block-end: var(--s-5);
  border-block-end: var(--linia);
}

.poisk__pole {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: var(--s-3);
  background: var(--list);
  border: var(--linia);
  padding: var(--s-3) var(--s-4);
}
.poisk__yarlyk {
  grid-column: 1 / -1;
  color: var(--sled);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}
.poisk__vvod {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--grifel);
  font-family: var(--displey);
  font-weight: var(--w-displey);
  font-size: var(--t-h3);
  letter-spacing: var(--ls-displey);
  padding: var(--s-1) 0;
  inline-size: 100%;
  border-radius: var(--r);
}
.poisk__vvod::placeholder { color: var(--sled); font-weight: var(--w-displey-ui); }
.poisk__vvod:focus-visible { box-shadow: none; outline: none; }
.poisk__pole:focus-within { border-color: var(--kobalt); }
.poisk__schet { color: var(--kobalt); font-weight: 600; padding-block-end: var(--s-2); }

.chipy { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-block-start: var(--s-4); }
.chipy--temy { margin-block-start: var(--s-2); }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  border: var(--linia);
  border-radius: var(--r);
  background: transparent;
  color: var(--grifel);
  font-family: var(--displey);
  font-weight: var(--w-displey-ui);
  font-size: var(--t-meta);
  padding: var(--s-2) var(--s-3);
  cursor: pointer;
  transition: background var(--t-hover) linear, border-color var(--t-hover) linear,
              translate var(--t-hover) linear;
}
.chip:hover { border-color: var(--grifel); translate: var(--sdvig-hover) 0; }
.chip[aria-pressed="true"] { background: var(--list); border-color: var(--kobalt); }
.chip[aria-pressed="true"] .chip__schet { color: var(--kobalt); }
.chip__schet { font-family: var(--pribor); font-size: var(--t-pribor); color: var(--sled); font-variant-numeric: var(--cifry); }

.sbros {
  margin-block-start: var(--s-4);
  border: 0;
  background: transparent;
  color: var(--kobalt);
  font-family: var(--pribor);
  font-size: var(--t-pribor);
  letter-spacing: 0.06em;
  cursor: pointer;
  padding: var(--s-2) 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ───────────────────────────────── указатель: строки встык */

.ukazatel {
  margin-block-start: var(--s-6);
  border-block-start: var(--linia);
}

.stroka {
  display: grid;
  grid-template-columns: 11ch 190px minmax(0, 1fr) 7ch;
  align-items: center;
  gap: var(--s-5);
  min-block-size: var(--stroka-h);
  padding: var(--s-2) var(--s-4);
  background: var(--list);
  border-block-end: var(--linia);
  color: var(--grifel);
  text-decoration: none;
  transition: translate var(--t-hover) linear, background var(--t-hover) linear;
}
/* Строка при появлении СТОИТ. Приезжает только её гребёнка, шагами.
   Так в указателе движется ровно то, что несёт данные. */

.stroka:hover,
.stroka:focus-visible { translate: var(--sdvig-hover) 0; }
.stroka:hover .stroka__data { color: var(--kobalt); }
.stroka:hover .greb__zub { stroke: var(--grifel); }
.stroka:hover .stroka__tekst { text-decoration: underline; text-decoration-color: var(--kobalt); }

.stroka__levo { display: flex; flex-direction: column; gap: 2px; }
.stroka__data { color: var(--sled); transition: color var(--t-hover) linear; }
.stroka__kanal { font-family: var(--pribor); font-size: var(--t-pribor); color: var(--sled); }

.stroka__greb { display: block; min-inline-size: 0; }

.stroka__nazv {
  font-family: var(--displey);
  font-weight: var(--w-displey-ui);
  font-size: 1.0625rem;
  line-height: 1.32;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  min-inline-size: 0;
}
.stroka__tekst { min-inline-size: 0; }
.stroka__short { color: var(--sled); flex: none; }
.stroka__dlit { color: var(--sled); text-align: end; }

.stroka mark { background: var(--naydeno); color: var(--grifel); }

.pusto {
  margin: var(--s-6) 0 0;
  font-family: var(--rech);
  font-size: var(--t-rech);
  color: var(--grifel);
}

/* ───────────────────────────────── карты каналов и тем */

.karty { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1px; background: var(--volos); border: var(--linia); }
.karta {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  background: var(--list);
  color: var(--grifel);
  text-decoration: none;
  transition: translate var(--t-hover) linear;
}
.karta:hover { translate: var(--sdvig-hover) 0; }
.karta:hover .karta__imia { text-decoration: underline; text-decoration-color: var(--kobalt); }
.karta__imia { font-family: var(--displey); font-weight: var(--w-displey); font-size: var(--t-h3); line-height: 1.1; }
.karta__ruchka { color: var(--kobalt); }
.karta__schet { color: var(--sled); }

.temy { display: flex; flex-wrap: wrap; gap: 1px; background: var(--volos); border: var(--linia); }
.tema {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  background: var(--list);
  color: var(--grifel);
  text-decoration: none;
  flex: 1 1 260px;
  transition: translate var(--t-hover) linear;
}
.tema:hover { translate: var(--sdvig-hover) 0; }
.tema:hover .tema__imia { text-decoration: underline; text-decoration-color: var(--kobalt); }
.tema__imia { font-family: var(--displey); font-weight: var(--w-displey-ui); font-size: 1.0625rem; }
.tema__schet { color: var(--kobalt); margin-inline-start: auto; }

/* ───────────────────────────────── крошки */

.krohi { padding-block: var(--s-5) 0; }
.krohi__spisok { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0;
  font-family: var(--pribor); font-size: var(--t-pribor); color: var(--sled); }
.krohi__zveno + .krohi__zveno::before { content: "/"; margin-inline-end: var(--s-2); color: var(--sled); }
.krohi__zveno[aria-current="page"] { color: var(--grifel); }

/* ───────────────────────────────── страница ролика: асимметрия 3/9 */

.rolik {
  display: grid;
  grid-template-columns: var(--pole-levoe) minmax(0, 1fr);
  column-gap: var(--s-7);
  padding-block-start: var(--s-6);
}
.rolik > * { grid-column: 2; }

/* блок = ярлык в левом служебном поле + тело на белом листе справа.
   Здесь асимметрия 3/9 становится видимой, а не объявленной. */
.blok {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: var(--pole-levoe) minmax(0, 1fr);
  column-gap: var(--s-7);
  margin-block-start: var(--razdel);
  border-block-start: var(--linia);
  padding-block-start: var(--s-5);
}
.blok__yarlyk {
  grid-column: 1;
  margin: 0;
  font-family: var(--displey);
  font-weight: var(--w-displey);
  font-size: 1.0625rem;
  line-height: 1.2;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sled);
  position: sticky;
  inset-block-start: var(--s-5);
  align-self: start;
}
.blok > :not(.blok__yarlyk):not(.vedomost) { grid-column: 2; }

.list {
  background: var(--list);
  border: var(--linia);
  padding: var(--s-5) var(--s-6);
}

.shapka-v { grid-column: 1 / -1; padding-block-end: var(--s-6); border-block-end: var(--linia); }
.shapka-v__meta { display: flex; flex-wrap: wrap; gap: var(--s-4); color: var(--sled); margin: 0 0 var(--s-4); }
.shapka-v__zagolovok {
  font-family: var(--displey);
  font-weight: var(--w-displey);
  font-size: clamp(1.75rem, 3.6vw, 3rem);
  line-height: var(--lh-displey);
  letter-spacing: var(--ls-displey);
  margin: 0;
  max-inline-size: 22ch;
}
.shapka-v__nota { color: var(--sled); margin: var(--s-4) 0 0; }

/* плеер: обложка, которая по нажатию становится iframe */
.pleer {
  position: relative;
  max-inline-size: 860px;
  margin-block-start: var(--s-7);
  background: var(--grifel);
  border: var(--linia);
  aspect-ratio: 16 / 9;
}
.pleer__knopka {
  position: absolute; inset: 0;
  padding: 0; border: 0; border-radius: var(--r);
  background: transparent; cursor: pointer; inline-size: 100%; block-size: 100%;
}
.pleer__kadr { inline-size: 100%; block-size: 100%; object-fit: cover; }
.pleer__play {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%;
  inline-size: 72px; block-size: 52px;
  background: var(--kobalt);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  transition: inline-size var(--t-hover) linear;
}
.pleer__play::after {
  content: ""; position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  translate: -40% -50%;
  border-inline-start: 16px solid var(--list);
  border-block: 10px solid transparent;
}
.pleer__knopka:hover .pleer__play { inline-size: 86px; }
.pleer__dlit {
  position: absolute; inset-block-end: var(--s-3); inset-inline-end: var(--s-3);
  background: var(--grifel); color: var(--list); padding: 2px var(--s-2);
}
.pleer__ramka { inline-size: 100%; block-size: 100%; border: 0; display: block; }
.pleer--stoya { aspect-ratio: 9 / 16; max-inline-size: 380px; }
.pleer--stoya .pleer__play { inline-size: 56px; block-size: 40px; }
.pleer--stoya .pleer__knopka:hover .pleer__play { inline-size: 68px; }

.vyzhimka .rech { margin: 0; font-weight: var(--w-rech-zhirn); }
.opisanie__text p { margin: 0 0 var(--s-4); }
.opisanie__text { color: var(--grifel); }

/* ведомость: левое служебное поле на длине расшифровки.
   Гребёнка ролика + головка, которая идёт за чтением, + тайм-код реплики. */
.vedomost {
  grid-column: 1;
  position: sticky;
  inset-block-start: var(--s-5);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.vedomost__doroga { position: relative; }
.vedomost .greb__zub { stroke: var(--zub-tikho); }
.vedomost__golovka {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--p, 0) * 100%);
  inline-size: var(--golovka-w);
  background: var(--kobalt);
  transition: inset-inline-start var(--t-hover) linear;
}
.vedomost__tk { color: var(--sled-lenta); }
.vedomost__tek { color: var(--grifel); font-weight: 600; }

/* расшифровка: поле тайм-кодов слева, речь справа */
.rasshifrovka__nota { color: var(--sled); margin: 0 0 var(--s-4); }
.rasshifrovka__telo { min-inline-size: 0; }

.replika {
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr);
  column-gap: var(--s-5);
  padding-block: var(--s-4);
  border-block-start: var(--linia);
  background: var(--list);
  padding-inline: var(--s-5);
  transition: background var(--t-hover) linear;
}
.replika:first-of-type { border-block-start: var(--linia); }
.replika:last-child { border-block-end: var(--linia); }
.replika__tk {
  color: var(--kobalt);
  text-decoration: none;
  align-self: start;
  padding-block-start: 0.45em;
  transition: color var(--t-hover) linear;
}
.replika:hover .replika__tk,
.replika__tk:hover { color: var(--kobalt-press); text-decoration: underline; }
/* реплика, до которой дочитали: отметка внутрь, без сдвига текста */
.replika.is-tut { box-shadow: inset 2px 0 0 var(--kobalt); }
.replika__rech { margin: 0; }
.replika:target { background: var(--naydeno); }

.metki { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2);
  list-style: none; margin: var(--razdel) 0 0; padding: 0; }
.metka {
  font-family: var(--pribor); font-size: var(--t-pribor); color: var(--sled);
  border: var(--linia); border-radius: var(--r); padding: var(--s-2) var(--s-3);
  background: var(--list);
}

.vyhody { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-3);
  margin-block-start: var(--s-7); }
.vyhod {
  font-family: var(--displey); font-weight: var(--w-displey-ui); font-size: var(--t-meta);
  color: var(--grifel); background: var(--list);
  border: var(--linia); border-radius: var(--r);
  padding: var(--s-3) var(--s-5); text-decoration: none;
  transition: translate var(--t-hover) linear, border-color var(--t-hover) linear;
}
.vyhod:hover { translate: var(--sdvig-hover) 0; border-color: var(--grifel); color: var(--grifel); }
.vyhod--glavnyi { background: var(--kobalt); color: var(--list); border-color: var(--kobalt); }
.vyhod--glavnyi:hover { background: var(--kobalt-press); border-color: var(--kobalt-press); color: var(--list); }

.razdel--sosedi { margin-block-start: var(--razdel); }

/* ───────────────────────────────── подвал */

.podval {
  max-inline-size: var(--kolonka);
  margin-inline: auto;
  padding: var(--s-7) var(--pole) var(--s-8);
  border-block-start: var(--linia);
}
.podval__stroka { display: flex; flex-wrap: wrap; gap: var(--s-5); margin: 0 0 var(--s-4); color: var(--sled); }
.podval__stroka .pribor { font-family: var(--pribor); font-size: var(--t-pribor); }
.podval__text { margin: 0 0 var(--s-3); color: var(--grifel); max-inline-size: 62ch;
  font-family: var(--displey); font-weight: var(--w-displey-ui); font-size: var(--t-meta); }
.podval__text.pribor { color: var(--sled); }

/* ───────────────────────────────── узкий экран */

@media (max-width: 900px) {
  /* 19px серифом на 390px давали 33-34 знака в строке — ниже полосы.
     17px дают 38-40 и вытягивают меру обратно. */
  :root { --t-rech: 1.0625rem; }
  .rolik, .replika, .blok { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
  .rolik > *, .blok > * { grid-column: 1; }
  /* тот же вес селектора, что у колоночного правила выше: иначе тело блока
     остаётся во второй колонке и на узком экране наезжает на ведомость */
  .blok > :not(.blok__yarlyk):not(.vedomost) { grid-column: 1; }
  .blok__yarlyk { position: static; margin-block-end: var(--s-4); }
  .vedomost { position: static; margin-block-end: var(--s-4); }
  .vedomost .blok__yarlyk { margin-block-end: 0; }
  .replika__tk { padding-block-end: var(--s-2); }
  .list { padding: var(--s-4); }
  .replika { padding-inline: var(--s-4); }
  .replika__tk { padding-block: 0 var(--s-2); }
  .stroka {
    grid-template-columns: minmax(0, 1fr) 7ch;
    grid-template-areas: "nazv dlit" "greb greb" "levo levo";
    gap: var(--s-2) var(--s-4);
    padding-block: var(--s-4);
  }
  .stroka__nazv { grid-area: nazv; }
  .stroka__dlit { grid-area: dlit; }
  .stroka__greb { grid-area: greb; }
  .stroka__levo { grid-area: levo; flex-direction: row; gap: var(--s-3); }
  /* счётчик уезжал на строку поиска и срезал подсказку в поле */
  .poisk__yarlyk { grid-column: 1; }
  .poisk__schet { grid-row: 1; grid-column: 2; align-self: center; padding-block-end: 0; }
  .poisk__vvod { grid-column: 1 / -1; font-size: 1.25rem; }
  /* шестнадцать фильтров в столбик — стена до указателя; плотнее на треть */
  .chip { font-size: 0.8125rem; padding: var(--s-1) var(--s-2); }
  .chipy { gap: var(--s-1); }
  /* зубец каталога в 13px не масштабируется (non-scaling-stroke): на 390px
     63 недели слипались в чёрное пятно вместо гребёнки */
  .greb--katalog .greb__zub { stroke-width: 4px; }
  .greb--katalog { block-size: 44px; }
  .shapka { padding-block: var(--s-4); }
  .pervyi { padding-block: var(--s-6) var(--s-5); }
  .pervyi__zagolovok { max-inline-size: 14ch; }
}

@media (prefers-reduced-motion: reduce) {
  .golovka { animation: none; }
  .greb, .greb--bolshaia, .greb--katalog, .ukazatel .greb { clip-path: none; animation: none; }
  .pervyi__zagolovok > span { translate: 0 0; animation: none; clip-path: none; }
}


/* ───────────────────────────────── закон ленты
   На ленте --lenta служебный текст берёт --sled-lenta (AA 4.73),
   а кобальт живёт только на листе: на ленте он остаётся линией
   подчёркивания, текст при этом грифельный. */

.shapka__dom,
.chip__schet,
.pervyi__nadpis,
.pervyi__cifry,
.krohi__spisok,
.krohi__zveno + .krohi__zveno::before,
.shapka-v__meta,
.shapka-v__nota,
.rasshifrovka__nota,
.podval__stroka,
.podval__stroka .pribor,
.podval__text.pribor,
.blok__yarlyk { color: var(--sled-lenta); }

.krohi a,
.shapka-v__kanal,
.shapka-v__nota a,
.rasshifrovka__nota a,
.sbros {
  color: var(--grifel);
  text-decoration: underline;
  text-decoration-color: var(--kobalt);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.krohi a:hover,
.shapka-v__kanal:hover,
.shapka-v__nota a:hover,
.rasshifrovka__nota a:hover,
.sbros:hover { text-decoration-thickness: 2px; color: var(--grifel); }

.lenta-katalog__podpis, .greb-blok__podpis { color: var(--sled); }