/* ==========================================================================
   Секция 11 — истории партнёров

   Блок пришёл из прошлого лендинга и в макете сохранил чужую стилистику:
   заголовок по центру обычным шрифтом, тёмно-синие кнопки. Здесь он приведён
   к общему виду лендинга: бейдж-надзаголовок, узкий заголовок слева,
   фиолетовые кнопки, скругления и тени из base.css.

   Третий проход — по трём замечаниям заказчика.

   1. «Фиолетовую стрелочку между "До NextBot" и "Вместе с NextBot" убрать».
      Убрана вместе с тем, что под неё раздвигалось: обе двухколоночные
      сетки карточки вернулись с промежутка 16 на 12.

   2. «Карточки стали как-то менее аккуратно выглядеть». Разбор снимка дал
      четыре причины, и все они про выравнивание, а не про отделку:
        — под фото зияла дыра: имя, город и должность стояли одной колонкой
          справа от снимка, должность уходила ниже его нижней кромки,
          и левые 76px оставались пустыми на 1-3 строки;
        — строка имени несла min-height: 44px под зону нажатия значка,
          из-за чего имя стояло ниже верхней кромки фото;
        — блоки соседних карточек начинались на разной высоте: должность
          в одну строку против двух — и дальше метрики, «до/вместе», цитата
          и кнопки разъезжались по вертикали во всей ленте;
        — цитата забирала весь запас высоты карточки и центровала текст
          в себе, поэтому в короткой истории посреди блока висело пустое поле.
      Лечится это не украшениями, а сеткой: карточка собрана на subgrid
      (см. ниже), должность вынесена в свою строку под фото, у имени убрана
      искусственная высота.

   3. «Пусть выводится 4 кейса, нажимаешь — ещё 4 появляется».
      Карусель со стрелками заменена сеткой с кнопкой «Показать ещё».
      Почему сеткой: формулировка заказчика описывает именно накопление
      («ещё 4 появляется»), а не перелистывание; вдобавок карусель на четыре
      карточки пришлось бы делать в две строки внутри прокручиваемой области,
      а это уже не карусель, а сетка с горизонтальным скроллом. Заодно
      уходят стрелки, скрытые до готовности скрипта, снапы и перехват
      клавиш — секция перестаёт быть отдельным механизмом на странице.
   ========================================================================== */

/* clip, а не hidden, и только по оси X — тот же приём, что на экране 5.
   Причина здесь прикладная: overflow: hidden делает секцию скролл-контейнером,
   и position: sticky у блока «Показать ещё» начинает считаться от неё, то есть
   перестаёт работать вовсе. clip обрезает так же, но контейнера прокрутки
   не заводит. Резать по вертикали секции нечего: декора у неё нет. */
.stories {
  overflow-x: clip;
}

/* ---------- Декор ----------
   Декора у секции нет, и это решение, а не пропуск.

   Объекта на экране нет: истории партнёров — лента одинаковых карточек
   с фото 152px, ни фигуры, ни окна интерфейса. По правилу
   (docs/visual-language.md, «Декор: два вопроса») узор привязан к объекту,
   значит здесь его нет.

   Стояла точечная сетка 240×200 в правом нижнем углу — единственная
   на сайте, поставленная не к объекту, а к углу секции. Ровно тот же
   случай, что на экране 7. */

/* ---------- Шапка секции ---------- */

/* Ритм шапки общий для всех секций: бейдж → 40 → H2 → 24 → лид → 48 → контент.
   48 до ленты даёт .section__head в base.css.
   Блок стрелок из шапки убран вместе с каруселью — управление лентой
   переехало под неё одной кнопкой. */
.stories__title { margin-top: calc(var(--s-6) + var(--s-2)); }
.stories__lead { margin-top: var(--s-5); }

/* ---------- Ссылка «пропустить истории» ---------- */

/* Обёртка нужна только как система координат для skip-ссылки: она встаёт
   в отбивку над лентой и никуда не двигает саму ленту. */
.stories__list-wrap { position: relative; }

/* Обычный skip-link: место в потоке не занимает, появляется только по фокусу.
   Размер держим и в скрытом состоянии — иначе зона нажатия по замерам
   получается 1x1. */
.stories__skip {
  position: absolute;
  bottom: 100%;
  left: var(--s-2);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  min-height: 46px;
  padding-inline: var(--s-5);
  border-radius: var(--r-md);
  background: var(--brand);
  color: #fff;
  font-size: var(--fz-small);
  font-weight: 700;
  letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase;
  /* Капс не переносится: свод, «Переносы». */
  -webkit-hyphens: none;
  hyphens: none;
  opacity: 0;
  pointer-events: none;
}

.stories__skip:focus {
  opacity: 1;
  pointer-events: auto;
}

/* Медиазапрос — общее правило сайта, разбор в base.css. */
@media (hover: hover) {
  .stories__skip:hover { color: #fff; }
}

/* Цель ссылки: пустая точка в потоке, ничего не занимает */
.stories__skip-end { display: block; height: 0; }

/* ---------- Сетка историй ----------

   По умолчанию одна колонка. Две включаются с 1200px и ни пикселем раньше:
   у карточки внутри две двухколоночные сетки (метрики и «до/вместе»),
   и на 1100px они получают по 170px на колонку — «Вместе с NextBot»
   разваливается на десяток строк по два слова. На 1200px карточка выходит
   546px, внутренняя колонка 235px — это нижняя граница, на которой пара
   «до/вместе» ещё читается как сравнение, а не как два столбика текста.
   Отсюда же берётся шаг показа в скрипте: 4 там, где колонки две
   (полный ряд из двух плюс ещё один), 2 там, где колонка одна. */
.stories__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- Карточка на общих строках ----------

   Главный приём этого прохода. Карточка состоит ровно из пяти блоков:
   человек, метрики, «до/вместе», цитата, кнопки. Раньше это была колонка
   flex, и высота каждого блока зависела только от его собственного текста:
   у одного партнёра должность в строку, у другого в три — и дальше вся
   карточка ехала вниз относительно соседней. В ленте из двух, а теперь
   из четырёх карточек это и читается как «менее аккуратно».

   Здесь пять блоков стоят на пяти строках ОБЩЕЙ сетки списка: и .stories__item,
   и сама карточка объявлены subgrid и занимают по пять строк. Поэтому высота
   строки считается по самому длинному блоку в ряду, и во всех карточках ряда
   метрики, «до/вместе», цитата и кнопки начинаются на одной высоте.
   Дополнительной разметки это не требует и на узкой ширине не мешает:
   там в ряду одна карточка, и subgrid ведёт себя как обычная колонка.

   Промежуток между блоками карточки — это row-gap списка (24). Он же стоит
   между карточками: одно число на всю секцию, разнобоя полей не возникает. */
.stories__item {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
}

.stories__card {
  display: grid;
  grid-row: span 5;
  grid-template-rows: subgrid;
  border: 1px solid var(--line);
}

/* ---------- Шапка карточки ----------

   Две строки вместо одной колонки справа от фото:
     [фото] [имя + значок связи]
            [город]
     [должность во всю ширину]
   Раньше должность стояла третьей строкой правой колонки и уходила ниже
   фото — под снимком оставался пустой прямоугольник в 76px шириной.
   Теперь под фото ничего не пустует, а левый край должности совпадает
   с левым краем метрик и блоков «до/вместе»: у карточки одна вертикаль. */
.stories__person {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--s-4);
  row-gap: var(--s-3);
  /* Блок стоит на общей строке сетки и может оказаться выше своего
     содержимого: без align-content: start запас распределялся между
     фото и должностью, и в разных карточках он был разный. */
  align-content: start;
}

/* Фото — единственный растр в карточке, и без отделки оно лежало на белом
   как вклеенный прямоугольник. Волосяная брендовая кромка плюс короткая
   контактная тень: та же микродеталь, что у карточек, только в масштабе
   значка.
   Центрируется против пары «имя + город», а не прижимается к верху:
   имя в две строки встречается (Евгений Шаповаленко на узкой карточке),
   и при верхнем прижиме фото повисало бы выше блока. */
/* Обёртка <picture> из раскладки убрана: элементом сетки шапки обязана
   остаться сама картинка — на ней стоят grid-column / grid-row. Обёртка нужна
   только затем, чтобы отдать телефону файл 128px под бокс 64 (на плотности 2
   ровно столько и требуется), а десктопу и планшету оставить прежние 152px
   под бокс 76. Через srcset+sizes так не выходит: 128 покрывает 76 CSS-px
   при плотности 1, и десктоп получил бы мелкий файл — принятый экран
   поехал бы, пусть и только в пересчёте пикселей.
   Пересжатия при этом не потребовалось: файлы 128px уже лежат в assets. */
.stories__person > picture { display: contents; }

/* <source> в UA-таблице Chrome не спрятан: пока у <picture> была своя коробка,
   это никого не касалось, а с display: contents он всплывает наружу
   и становится ПОЛНОЦЕННЫМ элементом сетки шапки. Замер: у .stories__person
   появлялась третья строка нулевой высоты, лишний row-gap в 12px и карточка
   росла с 889 до 901 на 1440 — то есть принятый десктоп ехал. */
.stories__person > picture > source { display: none; }

.stories__photo {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  width: 76px;
  height: 76px;
  border-radius: var(--r-md);
  object-fit: cover;
  box-shadow: 0 0 0 1px rgba(124, 59, 246, .10),
              0 4px 12px rgba(27, 22, 51, .10);
}

.stories__who {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
}

/* Строка имени больше не держит зону нажатия сама: min-height: 44px поднимал
   её до высоты значка, и имя стояло ниже верхней кромки фото на добрый
   десяток пикселей. Зону нажатия даёт .tap-safe на самой ссылке —
   невидимой областью, не меняя габарит строки. */
.stories__name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin: 0;
  font-size: var(--fz-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.stories__contact {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-pill);
  color: var(--brand);
  /* Перехода тут не было вовсе: base.css плавно меняет ссылке только цвет,
     а заливка кружка подставлялась рывком — единственный элемент на сайте,
     который под курсором мигал, а не загорался. */
  transition: background var(--t-fast), color var(--t-fast);
}

@media (hover: hover) {
  .stories__contact:hover { background: var(--brand-soft); color: var(--brand-dark); }
}

.stories__contact .icon { width: 20px; height: 20px; }

/* Ярлык-подпись — такая же таблетка, как бейджи и теги в остальных секциях. */
.stories__city {
  display: inline-block;
  margin-top: var(--s-2);
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: var(--fz-caption);
  font-weight: 600;
  line-height: 1.3;
}

.stories__role {
  grid-column: 1 / -1;
  color: var(--muted);
  font-size: var(--fz-small);
  line-height: 1.45;
}

/* ---------- Две метрики ---------- */

/* Промежуток такой же, как у пары «до / вместе» под ними: две двухколоночные
   сетки стоят одна над другой, и при разных промежутках их внутренние края
   расходятся — колонки карточки перестают быть одной вертикалью.
   Значение вернулось с 16 на 12: 16 стояли ради кружка-связки, а его больше
   нет (замечание заказчика). */
.stories__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Плитка метрики — единственный акцентный блок карточки, поэтому подложка
   не плоский --brand-softer, а перелив --grad-soft с волосяной кромкой:
   ровно та же фактура, что у бейджей на соседних экранах.
   Плоская заливка в docs/visual-language.md названа самым дешёвым приёмом. */
.stories__stat {
  padding: var(--s-4);
  border-radius: var(--r-md);
  border: 1px solid rgba(124, 59, 246, .12);
  background: var(--grad-soft);
}

/* Цифра метрики — главный акцент карточки, поэтому по кеглю она в одном ряду
   с заголовками карточек соседних секций (07 — 26px), а не мельче их. */
.stories__stat-value {
  display: block;
  color: var(--brand);
  font-size: var(--fz-h3);
  font-weight: 700;
  line-height: 1.15;
}

/* Подписи и текст «до/вместе» — обычный мелкий текст карточки: во всех
   подогнанных секциях это --fz-small (15px), а не --fz-caption (13.5px). */
.stories__stat-label {
  display: block;
  margin-top: var(--s-2);
  color: var(--muted);
  font-size: var(--fz-small);
  line-height: 1.4;
}

/* ---------- До / Вместе ----------

   Кружок со стрелкой в промежутке между блоками снят по замечанию
   заказчика: «эту фиолетовую стрелочку давай убрать, она здесь не очень
   нужна». Вместе с ним ушли раздвинутый под него промежуток (16 → 12),
   белое кольцо-подложка и позиционирующий контекст у .stories__step —
   держать больше нечего. Переход «до → вместе» объясняют сами заголовки
   и цвета блоков. */
.stories__path {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-3);
}

.stories__step {
  padding: var(--s-4);
  border-radius: var(--r-md);
}

.stories__step--before { background: var(--bad-bg); }
.stories__step--after  { background: var(--good-bg); }

.stories__step-title {
  margin: 0 0 var(--s-2);
  font-size: var(--fz-small);
  font-weight: 700;
  line-height: var(--lh-heading);
}

.stories__step--before .stories__step-title { color: var(--bad-ink); }
.stories__step--after  .stories__step-title { color: var(--good-ink); }

.stories__step-text {
  font-size: var(--fz-small);
  line-height: 1.5;
  color: var(--ink-2);
}

/* ---------- Раскрытие «до / вместе» на телефоне ----------

   Замер до правки (375×812, честная мобильная эмуляция): одна карточка
   1286 и 1308px, на 320 — 1442 и 1494. Полтора-два экрана на карточку:
   начало уезжает за верхнюю кромку раньше, чем читается конец, и охватить
   историю взглядом нельзя в принципе. Восемь таких карточек дают 10-12 тысяч
   пикселей ленты.

   Из пяти блоков карточки самый длинный — пара «до / вместе»: 445px на 375
   и 535 на 320, то есть 35% высоты карточки. Это подробность, а не довод:
   довод — две цифры выше и реплика ниже. Поэтому на телефоне пара уходит
   под раскрытие, а карточка сворачивается в один экран.

   Механика нативная: <details> + <summary>, без скрипта и без слушателей.
   Свод прямо называет этот случай («аккордеон FAQ — details/summary») —
   на телефоне INP главный провал, и городить своё раскрытие незачем.

   В разметке стоит open. Значит без JS видно всё, как и раньше, а скрипт
   (js/sections/11-stories.js) закрывает раскрытия только там, где они
   работают, — до 767px. Обратное решение (закрыто в разметке) сломало бы
   секцию на десктопе у тех, у кого JS не отработал.

   От 768 раскрытия нет вовсе: сводка спрятана, а сам <details> объявлен
   display: contents — он исчезает из раскладки, и .stories__path остаётся
   ПРЯМЫМ элементом сетки карточки. Это обязательно: карточка собрана
   на subgrid, и лишняя коробка посередине выбила бы блок из общих строк
   ряда — плашки «до» и «вместе» перестали бы тянуться на всю высоту строки.

   Текст сводки собран из заголовков, которые в карточке уже есть
   («До NextBot», «Вместе с NextBot»), — нового текста в секции не заводится. */

.stories__fold { display: contents; }
.stories__fold-summary { display: none; }

/* height: 100% обязателен, и вот почему. display: contents убирает коробку
   самого <details>, но НЕ убирает коробку ::details-content — служебной
   обёртки, в которую браузер (Chromium 131+) кладёт раскрываемое содержимое.
   Элементом сетки становится она, а .stories__path внутри неё получает
   высоту по содержимому. Замер: в ряду из двух карточек путь стоял 239
   в одной и 171 в другой — плашки «до» и «вместе» перестали доставать
   до низа строки, чего в принятом десктопе не было.
   Обёртка растянута по строке, её высота определена — процент от неё
   считается и возвращает прежнее поведение. На телефоне родитель обычной
   высоты, и 100% там разрешается в auto, то есть правило молчит. */
.stories__path { height: 100%; }

/* ---------- Цитата ----------

   Была вертикальная брендовая черта слева и та же лиловая заливка, что
   у плиток метрик, — в карточке набиралось три фиолетовых массива подряд,
   и кнопка переставала быть главным цветным пятном. Вертикальную черту
   у текста заказчик забраковал на плашках-выводах (docs/visual-language.md),
   повторять её здесь незачем: роль реплики объясняет знак кавычки.

   Что изменилось в этом проходе: блок больше не забирает весь запас высоты
   карточки (flex: 1 1 auto) и не центрует текст в себе. Запас теперь
   распределён по строкам общей сетки, а реплика прижата к верху блока —
   значит, во всех карточках ряда кавычка и первая строка стоят на одной
   высоте. Прежде короткая цитата висела посреди пустого поля.

   Курсива здесь нет и быть не может. У Golos Text кириллического курсивного
   начертания не существует вовсе (css/fonts.css подключает один файл,
   font-style: normal), поэтому браузер синтезировал наклон прямого — тот
   самый псевдокурсив, который в кириллице виден сразу: у настоящего курсива
   меняется конструкция букв (т похожа на m, п на n), ширина «т» вырастает
   на 50–90%, у наклона не меняется ничего. На 768 и 1440 четыре цитаты
   подряд читались как ошибка рендеринга. Роль реплики несут знак кавычки
   сверху, своя подложка, кромка и приглушённый цвет — этого достаточно,
   и по своду (раздел «Курсив») смысловой акцент в русском тексте так
   и полагается делать: весом, цветом, размером, но не наклоном. */
.stories__quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
  padding: var(--s-5);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--bg-tint);
  color: var(--ink-2);
  font-size: var(--fz-body);
  line-height: var(--lh-body);
}

/* Дуотонная кавычка — тот же набор, что и остальные значки сайта.
   Стоит НАД репликой, а не сбоку: сбоку она не выравнивается ни по первой
   строке, ни по блоку, когда реплики в ряду разной длины. */
.stories__quote-mark {
  width: 24px;
  height: 24px;
  flex: none;
  color: var(--brand);
}

/* ---------- Кнопка карточки ----------

   ПРАВКА ЗАКАЗЧИКА, идёт И НА ДЕСКТОП: «убери везде кнопки „Читать историю“,
   и на десктопной версии убери, их быть не должно, у нас идут кнопки
   „Создать ИИ БРО“». Ссылки на partner.nextbot.ru сняты из всех четырёх
   карточек в sections/11-stories.html.

   Что уехало вместе с ними:
     — двухколоночная сетка кнопок (она держала ровную пару, пары больше нет);
     — разведение кнопок на 24 в мобильном блоке ниже;
     — правило «в первых карточках прячем „Создать ИИ БРО“»: оно снимало
       соседство двух разных кнопок в 12px друг от друга, а соседства больше
       нет — рядом с целевой кнопкой в карточке не осталось ничего.

   Осталась одна кнопка, и она НЕ растянута во всю карточку. Ширина по тексту
   и прижим влево — это ровно та ширина, что была у «Создать ИИ БРО» до правки
   (277px из 546), то есть количество фиолетового на экране не изменилось.
   Растянутая на 546px кнопка в каждой из четырёх карточек дала бы четыре
   плотных брендовых полосы в одном поле зрения, а по docs/visual-language.md
   акцент живёт на действии и на одном смысловом ударе, а не на каждом
   втором элементе.

   align-self: end — карточка собрана на subgrid, и если в ряду строка кнопок
   выше, кнопка прижимается к низу карточки. */
.stories__actions {
  display: flex;
  align-self: end;
}

/* ---------- Показать ещё ----------

   Заменяет пару стрелок в шапке. Под кнопкой стоял счётчик «Показано 4 из 8» —
   заказчик его снял, и с ним ушла колонка flex с промежутком 16: под лентой
   остался один элемент, ему нужна только центровка.

   Отбивка от ленты — 64, а не прежние 48. Раньше 48 отделяли от карточек
   счётчик, а кнопка стояла ещё на 16+строку ниже, то есть примерно на 82.
   Оставить 48 значило подтянуть кнопку почти вплотную к последнему ряду:
   между карточками в ленте 24, и на 48 кнопка читалась бы как ещё один
   элемент ленты, а не как действие после неё. 64 — ближайшая ступень шкалы,
   которая возвращает прежнюю дистанцию.

   Цвет кнопки — ghost: акцентная заливка на этом экране закреплена
   за «Создать ИИ БРО» внутри карточек. */
.stories__more {
  display: flex;
  justify-content: center;
  margin-top: var(--s-8);
}

/* Своего значка «шеврон вниз» в наборе нет, и заводить его ради одной кнопки
   незачем: тот же chevron-right из спрайта, повёрнутый на четверть. */
.stories__more-icon { transform: rotate(90deg); }

/* ---------- Появление добавленных историй ----------

   Карточки скрыты атрибутом hidden, и до сих пор снятие атрибута выкидывало
   на экран сразу два-четыре готовых прямоугольника. Смена содержимого
   по нажатию — это ровно тот случай, где подмена рывком читается как
   перерисовка страницы, а не как ответ на кнопку: человек нажал внизу,
   а изменилось всё поле над кнопкой разом.

   Ступень --t-base по правилу из base.css: это появление СОДЕРЖИМОГО,
   а не отклик кнопки. Лесенка по 60 мс внутри партии — при шаге в четыре
   карточки последняя приходит на 180 мс позже первой, и порядок «слева
   направо, сверху вниз» читается сам.

   Класс снимается по окончании анимации (js/sections/11-stories.js):
   иначе он остался бы висеть на восьми карточках, и любой будущий
   перезапуск партии проиграл бы анимацию заново уже на показанных.

   Анимируются transform и opacity — .stories__item при этом остаётся
   subgrid-контейнером: трансформация не меняет раскладку, а рисование,
   поэтому строки внутри ряда по-прежнему выровнены. */

.stories__item--enter {
  animation: stories-card-in var(--t-base) both;
  animation-delay: var(--d, 0ms);
}

@keyframes stories-card-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* ---------- Адаптив ---------- */

@media (min-width: 1200px) {
  .stories__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Телефон: карточка в один экран ----------

   Сюда собрано всё, что делает карточку обозримой: раскрытие пары
   «до / вместе», поля на ступень мельче у плиток метрик и у цитаты.
   Порог 767 — «телефон» из шкалы в tokens.css: на планшете (768-999)
   экран высокий, карточка помещается и без сворачивания.

   Вторым условием добавлен ландшафт телефона (844×390 и 932×430): ширина
   там за 767, а высота 390 — карточка в 785-808px это два экрана, то есть
   ровно та беда, ради которой раскрытие и заводилось. max-width: 999
   обязателен: без него правило поймало бы десктоп в низком окне,
   а десктоп принят заказчиком и от высоты окна зависеть не должен.
   Тот же список условий стоит в js/sections/11-stories.js. */
@media (max-width: 767px),
       (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .stories__fold { display: block; }

  /* Строка-раскрытие. Ровно та же плитка, что у метрик и блоков
     «до / вместе» рядом: фон, радиус и кромка карточки, — иначе в столбике
     одинаковых плашек появился бы элемент из другого набора.
     min-height 48: кнопки на сайте держат 46-48, и строка, по которой
     нажимают пальцем, не может быть мельче их. */
  .stories__fold-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    min-height: 48px;
    padding: var(--s-2) var(--s-4);
    border-radius: var(--r-md);
    border: 1px solid var(--line);
    background: var(--bg-tint);
    color: var(--ink);
    font-size: var(--fz-small);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
    /* Стандартный треугольник убираем: у сайта свой шеврон из спрайта.
       list-style снимает маркер в Chrome и Firefox, ::-webkit-details-marker —
       в Safari, где list-style на summary до сих пор не действует. */
    list-style: none;
    /* Короткая метка в две-три слова — переносить нечего: свод, «Переносы». */
    -webkit-hyphens: none;
    hyphens: none;
  }

  .stories__fold-summary::-webkit-details-marker { display: none; }

  /* Тот же chevron-right из спрайта, что у кнопки «Показать ещё»:
     вниз — свернуто, вверх — развёрнуто. Своего значка «шеврон вниз»
     в наборе нет и заводить его ради двух мест незачем. */
  .stories__fold-icon {
    width: 20px;
    height: 20px;
    flex: none;
    color: var(--brand);
    transform: rotate(90deg);
    transition: transform var(--t-fast);
  }

  .stories__fold[open] .stories__fold-icon { transform: rotate(-90deg); }

  /* Отбивка появляется только в раскрытом виде: у свёрнутой строки
     под ней ничего нет, и хвост в 12px читался бы сбоем. */
  .stories__fold[open] .stories__path { margin-top: var(--s-3); }

  /* Поля на ступень мельче. На телефоне плитка метрики шириной во всю
     карточку, и 16px по кругу вокруг двух строк текста — это воздух ради
     воздуха: 8px с двух сторон возвращают ленте 32px на карточку. */
  .stories__stat { padding: var(--s-3); }
  .stories__quote { padding: var(--s-4); }

  /* ---------- Три истории вместо четырёх ----------

     Правка заказчика: на телефоне показываем три истории, Leadgenbot убираем.
     На десктопе остаются все четыре — там они складываются в квадрат два
     на два, и этот квадрат заказчик просил сохранить, поэтому правка живёт
     только здесь, в мобильном медиазапросе.

     display: none, а не hidden в разметке: атрибут убрал бы карточку и на
     десктопе, а скриптом это делать нечего — состав ленты не поведение,
     а раскладка. Из дерева доступности карточка уходит вместе с раскладкой,
     то есть диктор на телефоне читает те же три истории, что видит глаз. */
  .stories__item--wide-only { display: none; }

  /* ---------- Одна кнопка «Создать ИИ БРО» на секцию ----------

     Правило прежнее по смыслу, но записано иначе. Было
     `:not(:last-child) .btn--primary { display: none }` — то есть пряталась
     сама кнопка, а её обёртка .stories__actions оставалась пустой строкой
     сетки. Пока рядом стояла «Читать историю», обёртка не пустовала; после
     её удаления в первых карточках висела бы пустая пятая строка и лишний
     row-gap в 24px. Теперь прячется вся обёртка, а карточка сокращается
     до четырёх строк — см. правило ниже.

     Зачем вообще прятать: просить об одном и том же три раза подряд с шагом
     около 900px секция не должна. Кнопка остаётся ровно одна — в последней
     карточке, ПОСЛЕ всех историй, где она и читается как «прочитал — иди
     делай». Действие доступно ещё из блока цены и из финального призыва.

     :last-child, а не :nth-child(4): на телефоне последняя показанная
     карточка и есть последний элемент списка (скрытая Leadgenbot стоит
     второй). Появится «Показать ещё» — правило по-прежнему будет верным. */
  .stories__item:not(:last-child) .stories__actions { display: none; }

  /* Карточка без кнопок — четыре блока, а не пять.
     Карточка собрана на subgrid и жёстко занимает пять строк общей сетки
     (grid-row: span 5). Убрав пятый блок, но оставив пять строк, мы получили
     бы пустую строку и её row-gap на дне карточки. На телефоне колонка одна,
     каждая карточка стоит в своём ряду, поэтому число строк можно честно
     привести к числу блоков. */
  .stories__item:not(:last-child),
  .stories__item:not(:last-child) .stories__card { grid-row: span 4; }

  /* Кнопка во всю ширину карточки: на телефоне это главная цель экрана
     и она нажимается пальцем. Высота 56 — главная кнопка по сквозной шкале
     (вторичная 48); было 46 из .btn--sm, и на странице к ним добавлялись
     56 в цене и 64 в финале, три ступени на одну роль. */
  .stories__actions .btn {
    width: 100%;
    min-height: 56px;
  }
}

/* Телефон боком: шапка вдвое теснее. Замер до правки (852×393) — 229px
   из 393, то есть 58% экрана на бейдж, заголовок и подзаголовок.
   Селектор `.badge + .stories__title` берёт специфичность 0-2-0 у правила
   base.css, которое задаёт отбивку метки на всём, что ниже 1000px. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 999px) {
  .badge + .stories__title { margin-block-start: var(--s-3); }
  .stories__lead { margin-top: var(--s-3); }
}

@media (max-width: 640px) {
  .stories__card { padding: var(--s-5); }
  .stories__photo { width: 64px; height: 64px; }
  .stories__stats { grid-template-columns: minmax(0, 1fr); }
  .stories__path { grid-template-columns: minmax(0, 1fr); }
  /* Правила для .stories__actions тут больше нет: блок перестал быть сеткой
     из двух колонок вместе с кнопкой «Читать историю». */
}

/* ---------- Узкий телефон: значку связи не хватает 9px ----------

   Замер (320, index.html и kz.html): у карточки «Евгений Шаповаленко» ссылка
   .stories__contact выходит за правый край .stories__who на 9.02px и встаёт
   в правое поле карточки. Соседние три карточки в норме, полоса дефекта
   320-329: на 330 запас уже нулевой, дальше растёт.

   Причина в строке имени. .stories__name — флекс, и текст в ней анонимный
   флекс-элемент с min-width: auto: у́же самого длинного слова он не станет
   никогда. «Шаповаленко» при 19px/700 занимает 131.03, значок держит жёсткие
   28 (flex: none) плюс промежуток 8 — итого 167.03 при 158 доступных.
   Переносом это не лечится: h1-h4 в base.css стоят под hyphens: none, и это
   правило не про капс, а про заголовки вообще — рвать фамилию дефисом нельзя.
   Значит, недостающее берём с трёх мест, где на этом экране оно лишнее.

   1. Значок теряет 8px пустой рамки. 28×28 у него стоят не под палец,
      а под заливку при наведении, а правило с ней лежит внутри
      @media (hover: hover) и на телефоне не срабатывает никогда — то есть
      эти 8px тут не рисуются ни в одном состоянии. Зона нажатия не трогается
      вовсе: её даёт .tap-safe::after размером max(100%, 44px), абсолютом.
      Сам значок внутри и так ровно 20px, рамка просто садится по глифу.
   2. Промежуток имени идёт со ступени 8 на 4: рамки вокруг глифа больше нет,
      и прежние 8 читались бы дырой между фамилией и стрелкой.
   3. Колонка шапки — с 16 на 12, как у .stories__stats и .stories__path
      внутри этой же карточки: на самом узком экране шапка перестаёт быть
      единственным местом с промежутком 16.

   Итого 16px против 9.03 нехватки — запас 6.97 на длину фамилии.
   Своей границы правка не заводит: ступень «узкого телефона» в проекте уже
   есть (tokens.css, --container-pad), по ней же идут hero, niches, selling
   и form. Выше 360 замер не меняется ни на пиксель — проверено на
   360/375/412/430/641/768/1100/1280/1440/1920, включая принятый десктоп
   (карточка на 1440 — 889.44 до и после). */
@media (max-width: 359px) {
  .stories__person { column-gap: var(--s-3); }
  .stories__name { gap: var(--s-1); }
  .stories__contact { width: 20px; height: 20px; }
}



/* ---------- Кнопка «Показать ещё» не должна улетать ----------

   Замер до правки (375×812): человек нажимает кнопку, и она уходит
   на 2068px ниже кромки экрана — два с половиной экрана. Второе нажатие
   уносит её на 2208. То есть на телефоне кнопка исчезает ровно в тот момент,
   когда на неё нажали, и понять, что произошло, можно только прокруткой.

   Прокручивать к кнопке после нажатия нельзя: она стоит ПОД добавленной
   партией, и страница проскочила бы мимо тех самых историй, ради которых
   кнопку и нажали. Автоподгрузка по IntersectionObserver отпадает по другой
   причине: показ двух карточек без действия человека — это чистый CLS,
   бесплатны только сдвиги в пределах 500 мс после ввода (свод, «CLS»).

   Поэтому кнопка не уезжает, а всплывает: до 999px блок прилипает к нижней
   кромке экрана, пока лента в кадре. Добавленные истории идут своим
   чередом сверху вниз, кнопка остаётся под большим пальцем, и следующая
   партия открывается без единой прокрутки. На последнем нажатии блок
   получает hidden и исчезает сам.

   Контекст прилипания — .stories__list-wrap, поэтому кнопка появляется
   вместе с лентой, а не висит над шапкой секции (см. комментарий
   в sections/11-stories.html).

   pointer-events: none на блоке — обязательное: он растянут во всю ширину
   полосы, и без этого невидимая полоса поверх карточек перехватывала бы
   нажатия по «Читать историю» и «Создать ИИ БРО». Нажимается только сама
   кнопка, у неё pointer-events возвращён.

   Тень на ступень выше (--sh-lift вместо --sh-card из .btn--ghost): кнопка
   лежит не на фоне секции, а поверх карточек, и контактной тени ей мало.

   Прилипание включается ТОЛЬКО ПОСЛЕ ПЕРВОГО НАЖАТИЯ — класс ставит скрипт.
   До него кнопка стоит в потоке под лентой, как и стояла: человек доходит
   до неё прокруткой сам, и висеть над карточками ей незачем. Улетает она
   именно с нажатия — с него прилипание и начинается. Заодно вдвое меньше
   времени полоса кнопки проводит поверх кнопок карточек. */
@media (max-width: 999px) {
  .stories__more--pinned {
    position: sticky;
    /* max(), а не сложение: на устройстве без выреза иначе выйдет 16,
       а на iPhone 16+34=50 и полоса раздувается. Свод, «Липкая нижняя
       кнопка». Инсеты приходят из viewport-fit=cover в шаблоне страницы. */
    bottom: max(var(--s-4), env(safe-area-inset-bottom));
    z-index: 3;
    pointer-events: none;
  }

  .stories__more--pinned .stories__more-btn {
    pointer-events: auto;
    box-shadow: var(--sh-lift);
  }
}