/* ══ Главная · Chapters ═════════════════════════════════════════════════
   Правило системы «один экран — один смысл» (design-system 2.4): восемь глав,
   каждая скомпонована как разворот. Ростом с экран из них две — те, где экран
   занимает кадр, а не воздух: герой и партнёр. Остальные шесть растут по
   содержимому и держат промежуток между секциями по системе 2.4 (128–160).
   Справа у края — рейка глав, сверху — волосяная линия прогресса.

   Требует styles/tokens.css и styles/base.css, подключённых раньше.
   Весь файл живёт под корневым классом .v-chapters; .zp-* глобально
   не переопределяется — общий словарь остаётся общим для будущих страниц.

   Три вещи, которые здесь легко испортить и которые держатся намеренно:
   · у героя и партнёра min-block-size: 100svh, а НЕ block-size — глава обязана
     честно расти, если контент выше экрана, и никогда не обрезать его;
   · карточка практики без заливки — её фон равен фону страницы, отделяет
     только волосяная линия латунью 55 %, ховер доводит её до 100 %;
   · снап — proximity, только на десктопе с указателем, и полностью снят
     при prefers-reduced-motion. */

/* ═══ 1. Корень варианта ═══════════════════════════════════════════════ */

.v-chapters {
  --v-rail-w: 0px;            /* до 1024 рейки нет и место под неё не резервируется */
  --v-rail-gap: var(--s-5);   /* зазор между рейкой и колонкой текста */
  --v-hero-media: 57%;        /* семь колонок из двенадцати */
  --v-hero-media-vw: 57vw;    /* то же в единицах экрана — для обрыва линии главы */
}

@media (min-width: 1024px) {
  .v-chapters { --v-rail-w: 60px; }
}

/* Скролл-снап живёт на прокручиваемом элементе, а это <html>, до которого
   от body.v-chapters дотянуться можно только так. Ни один другой вариант
   этим правилом не задет: селектор требует именно эту страницу.
   proximity, а не mandatory: главы разной высоты, обязательный снап на них
   отбирает у читателя управление. */
@media (min-width: 1024px) and (hover: hover) {
  :root:has(> body.v-chapters) { scroll-snap-type: y proximity; }
}

/* Снап — это движение. При reduce он снимается целиком, а не смягчается. */
@media (prefers-reduced-motion: reduce) {
  :root:has(> body.v-chapters) { scroll-snap-type: none; }
}

/* ═══ 2. Шапка ═════════════════════════════════════════════════════════
   Порог 1260 (навигация → гамбургер) и 768 (кнопка шапки → панель меню)
   поднят в base.css: он общий для всех трёх вариантов. Здесь не осталось
   ничего — шапка B ничем не отличается от шапки A и C, и это правильно. */

/* ═══ 3. Волосяная линия прогресса ═════════════════════════════════════
   Ширина приходит из --v-progress, который выставляет наблюдатель.
   Без скрипта линия остаётся в нуле и просто не видна — страница цела. */

.v-chapters .v-progress {
  position: fixed;
  z-index: 200;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: var(--border);
  background-color: var(--hairline-dark);
}

.v-chapters .v-progress__fill {
  display: block;
  block-size: 100%;
  background-color: var(--brass-500);
  transform-origin: left center;
  scale: var(--v-progress, 0) 1;
}

/* ═══ 4. Рейка глав ════════════════════════════════════════════════════
   Восемь меток у правого края: номер, штрих и — у текущей — имя главы
   корешком вдоль рейки. Ниже 1024 рейка снимается: её работу берут на себя
   гамбургер-меню (переход) и линия прогресса (где я). */

.v-chapters .v-rail {
  position: fixed;
  z-index: 80;
  inset-inline-end: var(--s-3);
  inset-block-start: 50%;
  inline-size: var(--v-rail-w);
  translate: 0 -50%;
  transition:
    opacity var(--dur-enter) var(--ease),
    visibility 0s linear 0s;

  --v-rail-ink: var(--text-lo);
  --v-rail-on: var(--brass-400);
  --v-rail-tick: var(--hairline-card);
}

/* Латунь на бумаге даёт 2.1:1 и меткой быть не может. На светлой главе
   рейка переезжает на --brass-800 (5.4:1) и чернильный вторичный текст. */
.v-chapters .v-rail[data-on-paper] {
  --v-rail-ink: var(--text-ink-lo);
  --v-rail-on: var(--brass-800);
  --v-rail-tick: color-mix(in srgb, var(--brass-800) 55%, transparent);
}

@media (max-width: 1023px) {
  .v-chapters .v-rail { display: none; }
}

/* Рейка кончается вместе с главами. Ниже последней главы идёт футер, а он
   не глава: держать над ним счётчик 01–08 значит обещать девятый экран,
   которого нет. Атрибут ставит наблюдатель в конце страницы; без скрипта
   рейка остаётся на месте — как и всё остальное в B, она сначала разметка. */
.v-chapters .v-rail[data-off] {
  opacity: 0;
  visibility: hidden;
  transition-delay: 0s, var(--dur-enter);
}

.v-chapters .v-rail ol {
  display: grid;
  gap: var(--s-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-chapters .v-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding-block: var(--s-1);
  color: var(--v-rail-ink);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}

.v-chapters .v-rail a:hover { color: var(--v-rail-on); }

.v-chapters .v-rail__tick {
  inline-size: var(--s-3);
  block-size: var(--border);
  background-color: var(--v-rail-tick);
  transition:
    inline-size var(--dur-hover) var(--ease),
    background-color var(--dur-hover) var(--ease);
}

.v-chapters .v-rail a:hover .v-rail__tick,
.v-chapters .v-rail [aria-current] .v-rail__tick {
  inline-size: var(--s-5);
  background-color: var(--v-rail-on);
}

.v-chapters .v-rail__num {
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-display);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
}

.v-chapters .v-rail [aria-current] { color: var(--v-rail-on); }

/* Имя текущей главы — корешком слева от рейки, по её вертикальному центру.
   Контейнер абсолютного позиционирования — сама .v-rail (она fixed),
   поэтому корешок центрируется на рейке целиком, а не на своей метке.
   Смещения здесь физические: логические у этого элемента разворачиваются
   вместе с writing-mode, и inset-block-start уехал бы вправо. */
.v-chapters .v-rail__name {
  position: absolute;
  right: calc(100% - var(--s-2));
  top: 50%;
  translate: 0 -50%;
  writing-mode: vertical-rl;
  color: var(--v-rail-on);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 500;
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-hover) var(--ease);
}

.v-chapters .v-rail [aria-current] .v-rail__name { opacity: 1; }

/* ═══ 5. Глава ═════════════════════════════════════════════════════════
   Глава растёт по содержимому. Внутреннего скролла нет нигде.
   Верхний отступ учитывает липкую шапку, отрицательный scroll-margin гасит
   scroll-padding из base.css, иначе снап уводил бы главу на высоту шапки.
   Промежуток между главами — сумма нижнего и верхнего отступов, 48 + 88 = 136:
   полоса 128–160, назначенная системой на стык секций десктопа (2.4). */

.v-chapters .v-chapter {
  position: relative;
  display: grid;
  align-content: center;
  padding-block: calc(var(--header-h) + var(--s-4)) var(--s-7);
  scroll-snap-align: start;
  scroll-margin-block-start: calc(var(--header-h) * -1);
}

/* Ростом с экран остаются две главы, и обе — потому что экран у них занят
   кадром: у героя портрет выпущен в правый край абсолютом по inset-block,
   у партнёра колонка портрета стоит на block-size: 100%. Отними у них экран —
   и снимок сожмётся до высоты текста.

   Остальным шести 100svh давала не разворот, а пустоту. Их содержимое просит
   560–1050 px; весь остаток окна align-content: center раскладывал поровну
   сверху и снизу, а на стыке двух глав два остатка складывались. При окне
   900 это 250–400 px пустоты между блоками, при 1250 — 580–800, и росло
   ровно на столько, на сколько растёт окно. min-block-size, а не block-size —
   у героя и партнёра: контент выше экрана обязан показаться целиком. */
.v-chapters .v-chapter--hero,
.v-chapters .v-chapter--partner { min-block-size: 100svh; }

.v-chapters .v-chapter--hero,
.v-chapters .v-chapter--partner,
.v-chapters .v-chapter--contact { background-color: var(--ink-900); }

.v-chapters .v-chapter__inner {
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px) {
  /* Правая колонка отдана рейке; текст в неё не заезжает. */
  .v-chapters .v-chapter__inner {
    padding-inline-end: calc(var(--v-rail-w) + var(--v-rail-gap) + var(--s-3));
  }
}

/* Маркер главы: номер, надзаголовок, волосяная линия до правого края. */
.v-chapters .v-chapter__mark {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin: 0 0 var(--s-4);
}

/* Ширина двузначного номера прибита к 2ch — это ремонт под Каслон, а не украшение.
   У Libre Caslon Display нет ни табличных цифр, ни вообще каких-либо цифровых
   OpenType-фич: `font-variant-numeric: tabular-nums` на нём ничего не делает,
   а цифры пропорциональные и очень разные (на кегле 48 «0» — 29.9 px, «1» — 16.5).
   Номер стоит первой колонкой `auto`, поэтому «01» сдвигало заголовок карточки
   на 5 px левее, чем «05», и два ряда карточек переставали держать общий край.
   `ch` — это и есть ширина «0», а «0» здесь самая широкая цифра, поэтому 2ch
   вмещает любую пару и делает колонку одинаковой во всех карточках.
   При Playfair этой строки не требовалось: у него цифры табличные. */
.v-chapters .v-chapter__no {
  color: var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
  min-inline-size: 2ch;
}

.v-chapters .v-chapter__rule {
  flex: 1 1 auto;
  block-size: var(--border);
  background-color: var(--hairline-dark);
  transform-origin: left center;
}

/* Единственное авторское движение страницы: линия главы прочерчивается
   один раз при первом появлении. Начальное состояние ставится только тогда,
   когда скрипт жив, — иначе без JS линия осталась бы невидимой навсегда.
   Длительность из токена, поэтому prefers-reduced-motion гасит её сам. */
.v-chapters[data-motion="on"] .v-chapter__rule {
  scale: 0 1;
  transition: scale var(--dur-enter) var(--ease);
}

.v-chapters[data-motion="on"] .v-chapter.is-seen .v-chapter__rule { scale: 1 1; }

/* .zp-ghost лежит абсолютом с z-index 0: статичные соседи рисовались бы
   под ним, поэтому блоки содержимого главы позиционируются явно. */
.v-chapters .v-chapter__head {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-4) var(--gutter);
  align-items: end;
  margin-block-end: var(--s-5);
}

.v-chapters .v-chapter__intro {
  max-inline-size: var(--measure);
  color: var(--text-lo);
}

@media (max-width: 767px) {
  /* min-block-size здесь снимает экранную высоту у героя и партнёра —
     остальные шесть глав и так растут по содержимому. Правило стоит ниже
     их собственного и потому перебивает его: специфичность равная. */
  .v-chapters .v-chapter {
    align-content: start;
    min-block-size: 0;
    padding-block: var(--section-y);
    scroll-snap-align: none;
    scroll-margin-block-start: 0;
  }

  .v-chapters .v-chapter__head { grid-template-columns: minmax(0, 1fr); }

  /* Надзаголовок съедает всю строку, и линия главы вырождается в чёрточку —
     она переносится под него и идёт во всю ширину. */
  .v-chapters .v-chapter__mark { flex-wrap: wrap; }
  .v-chapters .v-chapter__rule { flex-basis: 100%; }

  /* Филигрань снимает пустоту с большого поля (2.5). На узком экране
     большого поля нет — есть текст, поперёк которого она и легла бы. */
  .v-chapters .zp-ghost { display: none; }
}

/* ═══ 6. Глава 01 · Hero ═══════════════════════════════════════════════
   Слева пять колонок: надзаголовок, H1, лид, одна кнопка. Справа семь:
   портрет в дуотоне, выпущенный в правый край под градиентом --ink-900. */

.v-chapters .v-hero__photo {
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: var(--v-hero-media);
  border-block: 0;
  border-inline-end: 0;
  border-radius: 0;   /* выпуск в край: шов остаётся только слева, одной линией */
}

.v-chapters .v-hero__photo > img { object-position: 24% center; }

/* Правая кромка уводится в --ink-900, чтобы рейка глав читалась поверх
   светлых участков снимка. Под самой рейкой кромка глухая, и только за ней
   начинается растяжка: на просвет самый тихий цвет рейки давал над белой
   стеной 4.1:1, на глухом --ink-900 он даёт 8.29:1. */
.v-chapters .v-chapter--hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: calc(var(--v-rail-w) + var(--s-11));
  background-image: linear-gradient(
    to left,
    var(--ink-900) 0 calc(var(--v-rail-w) + var(--s-3)),
    transparent 100%
  );
  pointer-events: none;
}

/* Линия главы обрывается по левой кромке кадра: иначе она проходит поверх
   лица. Считается от края экрана, потому что снимок выпущен в край секции,
   а маркер главы живёт в контейнере: из ширины экрана вычитается ширина
   кадра, левое поле контейнера и зазор до кромки. Ниже 768 снимок становится
   полосой над текстом, перекрывать нечего — правило туда не идёт. */
@media (min-width: 768px) {
  .v-chapters .v-chapter--hero .v-chapter__mark {
    max-inline-size: calc(
      100vw - var(--v-hero-media-vw)
      - (100vw - min(var(--container), 100vw - 2 * var(--margin))) / 2
      - var(--s-5)
    );
  }
}

.v-chapters .v-hero__ghost {
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--s-11) * 2);
}

.v-chapters .v-hero__text {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--s-5);
  max-inline-size: calc((100% - 11 * var(--gutter)) / 12 * 5 + 4 * var(--gutter));
}

.v-chapters .v-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-5) var(--s-7);
  margin: var(--s-3) 0 0;
}

@media (max-width: 1023px) {
  .v-chapters { --v-hero-media: 44%; --v-hero-media-vw: 44vw; }

  .v-chapters .v-hero__text {
    max-inline-size: calc((100% - 7 * var(--gutter)) / 8 * 4 + 3 * var(--gutter));
  }
}

@media (max-width: 767px) {
  /* Портрет становится полосой над текстом: текст поверх светлой стены
     снимка не удержал бы контраст, а обрезать снимок здесь нечем. */
  .v-chapters .v-chapter--hero { gap: var(--s-7); }

  .v-chapters .v-hero__photo {
    position: relative;
    inset: auto;
    inline-size: auto;
    block-size: 42svh;
    border-inline: 0;
  }

  /* Полоса режет квадрат по высоте, а не по ширине: кадр смещается к лицу. */
  .v-chapters .v-hero__photo > img { object-position: 26% 16%; }
  .v-chapters .v-partner__photo > img { object-position: 30% 14%; }

  .v-chapters .v-chapter--hero::after { content: none; }

  .v-chapters .v-hero__text { max-inline-size: none; }
}

/* ═══ 7. Глава 02 · Практики ═══════════════════════════════════════════
   Восемь карточек 4 × 2. Фон карточки равен фону страницы: заливки нет
   нигде, отделяет только волосяная линия латунью 55 %, ховер — до 100 %.
   Четыре уровня иерархии даются краской, а не кеглем (система 1.4). */

.v-chapters .v-practices {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-3);
}

/* Строки: заголовок · текст (забирает остаток) · ссылка. Так «Learn more»
   в каждой карточке садится на общую нижнюю линию, а не плавает за текстом. */
.v-chapters .v-practice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-4);
  border: var(--border) solid var(--hairline-card);
  border-radius: var(--radius);
  background-color: transparent;
  transition: border-color var(--dur-hover) var(--ease);
}

.v-chapters .v-practice:hover,
.v-chapters .v-practice:focus-within { border-color: var(--brass-500); }

.v-chapters .v-practice__num {
  grid-column: 1;
  grid-row: 1;
  align-self: baseline;   /* номер и заголовок сидят на одной базовой линии */
  margin: 0;
  color: var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
  min-inline-size: 2ch;
}

.v-chapters .v-practice__title {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
}

.v-chapters .v-practice__body {
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  margin: 0;
  color: var(--text-hi);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-wrap: pretty;
}

.v-chapters .v-practice__more {
  grid-column: 1 / -1;
  grid-row: 3;
  justify-self: start;
  align-self: end;
  color: var(--text-lo);
}

/* Врезка практики 03: полосой под сеткой, а не внутри карточки —
   в карточке она поднимает высоту всей строки на полторы сотни пикселей
   и ломает 4 × 2. Номер связывает полосу с её карточкой. */
.v-chapters .v-inset {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  margin-block-start: var(--s-4);
  padding-inline-start: var(--s-5);
  border-inline-start: var(--border-accent) solid var(--brass-500);
}

.v-chapters .v-inset__num {
  margin: 0;
  color: var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-h4);
  font-variant-numeric: tabular-nums;
  min-inline-size: 2ch;
}

.v-chapters .v-inset__body {
  margin: 0;
  max-inline-size: var(--measure);
  color: var(--champagne);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-wrap: pretty;
}

@media (max-width: 1279px) {
  .v-chapters .v-practices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .v-chapters .v-practices { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 8. Глава 03 · Международные клиенты ══════════════════════════════
   Единственная светлая глава страницы: точка отдыха для длинного текста. */

.v-chapters .v-intl {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s-7) var(--s-9);
  align-items: start;
}

.v-chapters .v-intl__text {
  display: grid;
  justify-items: start;
  gap: var(--s-5);
}

.v-chapters .v-who {
  display: grid;
  gap: 0;
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

.v-chapters .v-who li {
  padding-block: var(--s-3);
  border-block-end: var(--border) solid var(--hairline-card);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.v-chapters .v-who li:first-child {
  border-block-start: var(--border) solid var(--hairline-card);
}

@media (max-width: 1023px) {
  .v-chapters .v-intl {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--s-7);
  }

  .v-chapters .v-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v-chapters .v-who li:nth-child(2) { border-block-start: var(--border) solid var(--hairline-card); }
}

@media (max-width: 767px) {
  .v-chapters .v-who { grid-template-columns: minmax(0, 1fr); }
  .v-chapters .v-who li:nth-child(2) { border-block-start: 0; }
}

/* ═══ 9. Глава 04 · Почему эта фирма ═══════════════════════════════════
   Не карточки: шесть записей на разграфке 3 × 2, линия сверху у каждой. */

.v-chapters .v-why {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-6) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-chapters .v-why__item {
  display: grid;
  align-content: start;
  gap: var(--s-3);
  padding-block-start: var(--s-5);
  border-block-start: var(--border) solid var(--hairline-card);
}

.v-chapters .v-why__num {
  margin: 0;
  color: var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-num);
  font-variant-numeric: tabular-nums;
}

.v-chapters .v-why__title {
  margin: 0;
  color: var(--champagne);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-display);
  text-wrap: balance;
}

.v-chapters .v-why__body {
  margin: 0;
  color: var(--text-lo);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-wrap: pretty;
}

@media (max-width: 1023px) {
  .v-chapters .v-why { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .v-chapters .v-why { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* ═══ 10. Глава 05 · Управляющий партнёр ═══════════════════════════════
   Разворот: портрет слева во всю высоту главы и до самого края,
   текст и цитата справа. Контейнера здесь нет — выпуск в край требует
   полной ширины секции. */

.v-chapters .v-chapter--partner {
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  grid-template-rows: minmax(min-content, 1fr);
  align-content: stretch;
  padding-block: 0;
}

.v-chapters .v-partner__photo {
  block-size: 100%;
  border-block: 0;
  border-inline-start: 0;
  border-radius: 0;
}

.v-chapters .v-partner__photo > img { object-position: 14% center; }

.v-chapters .v-partner__text {
  display: grid;
  align-self: center;
  justify-items: start;
  gap: var(--s-5);
  padding-block: calc(var(--header-h) + var(--s-7)) var(--s-7);
  padding-inline: var(--s-9) calc(var(--margin) + var(--v-rail-w) + var(--v-rail-gap));
}

.v-chapters .v-partner__text .v-chapter__mark {
  align-self: stretch;
  margin-block-end: 0;
}

.v-chapters .v-partner__role { color: var(--brass-500); }

.v-chapters .v-partner__quote { max-inline-size: var(--measure); }

.v-chapters .v-partner__facts { color: var(--champagne); }

@media (max-width: 1023px) {
  .v-chapters .v-chapter--partner { grid-template-columns: minmax(0, 38%) minmax(0, 1fr); }
  .v-chapters .v-partner__text { padding-inline: var(--s-7) var(--margin); }
}

@media (max-width: 767px) {
  .v-chapters .v-chapter--partner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    padding-block: 0 var(--section-y);
  }

  .v-chapters .v-partner__photo { block-size: 46svh; border-inline: 0; }

  .v-chapters .v-partner__text {
    padding-block: var(--s-7) 0;
    padding-inline: var(--margin);
  }
}

/* ═══ 11. Глава 06 · Род работы ════════════════════════════════════════
   Нумерованный перечень 2 × 4 на горизонтальных линиях; номер в поле слева. */

.v-chapters .v-exp {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--s-9);
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-chapters .v-exp__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-4);
  padding-block: var(--s-4);
  border-block-end: var(--border) solid var(--hairline-card);
}

.v-chapters .v-exp__item:nth-child(-n + 2) {
  border-block-start: var(--border) solid var(--hairline-card);
}

.v-chapters .v-exp__num {
  margin: 0;
  color: var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-h4);
  font-variant-numeric: tabular-nums;
  min-inline-size: 2ch;
}

.v-chapters .v-exp__title {
  margin: 0 0 var(--s-1);
  color: var(--champagne);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display);
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-display);
}

.v-chapters .v-exp__body {
  margin: 0;
  color: var(--text-lo);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-wrap: pretty;
}

/* Колонка главы шире меры — строка держится в --measure (§7). */
.v-chapters .v-exp__body { max-inline-size: var(--measure); }

@media (max-width: 1023px) {
  .v-chapters .v-exp { grid-template-columns: minmax(0, 1fr); }
  .v-chapters .v-exp__item:nth-child(-n + 2) { border-block-start: 0; }
  .v-chapters .v-exp__item:first-child { border-block-start: var(--border) solid var(--hairline-card); }
}

/* ═══ 12. Глава 07 · Insights ══════════════════════════════════════════
   Три записи крупной серифной строкой. Дат нет — их не существует. */

/* Три записи — три строки во всю ширину главы, а не три колонки: колонками
   их набирает C, и там это уместно — у него страница идёт секциями по контенту.
   Здесь экран отдан одному смыслу, и смысл читается сверху вниз: заголовок
   статьи крупной серифной строкой, раздел — выключкой вправо, между записями
   волосяная линия. Ни одного слова текста при этом не переставлено. */
.v-chapters .v-insights {
  position: relative;
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border) solid var(--hairline-card);
}

.v-chapters .v-insight {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-3) var(--s-8);
  padding-block: var(--s-6);
  border-block-end: var(--border) solid var(--hairline-card);
}

.v-chapters .v-insight__cat {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  color: var(--brass-500);
  text-align: end;
}

.v-chapters .v-insight__title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-display);
  text-wrap: pretty;
}

.v-chapters .v-insight__title a {
  color: var(--text-hi);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}

.v-chapters .v-insight__title a:hover {
  color: var(--brass-400);
  text-decoration: underline;
  text-decoration-thickness: var(--border);
  text-underline-offset: 0.15em;
}

.v-chapters .v-insights__more { position: relative; margin: var(--s-7) 0 0; }

/* Филигрань здесь по своему прямому назначению из 2.5: снять пустоту
   с большого поля самой просторной главы, не добавляя в неё содержания. */
.v-chapters .v-insights__ghost {
  inset-block-end: 0;
  inset-inline-end: 0;
  inline-size: calc(var(--s-11) * 1.5);
}

/* На узком экране раздел уходит из выключки вправо и встаёт над заголовком:
   на 375 у него не остаётся ширины, а перенос капслока в две строки рядом
   с серифным заголовком читается мусором. */
@media (max-width: 767px) {
  .v-chapters .v-insight { grid-template-columns: minmax(0, 1fr); }

  .v-chapters .v-insight__cat {
    grid-column: 1;
    grid-row: 1;
    text-align: start;
  }

  .v-chapters .v-insight__title { grid-row: 2; }
}

/* ═══ 13. Глава 08 · Контакт ═══════════════════════════════════════════
   Слева заголовок и подтверждённые факты, справа форма из одиннадцати
   полей ТЗ. Карта не встраивается: сторонний скрипт с куками — вместо неё
   ссылка на координаты. */

/* Глава складывается поперёк, а не вдоль. Приглашение и подтверждённые
   факты идут полосой во всю ширину, форма — под ними, тоже во всю ширину.
   Двухколонник «слева текст, справа форма» здесь был бы ровно тем же, чем
   он остаётся у C, где он и на месте: C ведёт страницу от человека, и рядом
   с формой у него стоят его же факты. У B глава — один экран и один смысл,
   а смысл этого экрана — форма; ей и отдана вся ширина. */
.v-chapters .v-contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-7);
  align-items: start;
}

.v-chapters .v-contact__aside {
  display: grid;
  justify-items: start;
  gap: var(--s-4);
}

/* Факты — строка ведомости, а не колонка: четыре пары «подпись / значение»
   идут вдоль полосы, поэтому поток у сетки колоночный. */
.v-chapters .v-facts {
  display: grid;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--s-2) var(--gutter);
  margin: 0;
  padding-block: var(--s-4);
  border-block: var(--border) solid var(--hairline-dark);
  inline-size: 100%;
}

.v-chapters .v-facts dt { margin-block-start: 0; }

.v-chapters .v-facts dd {
  margin: 0;
  align-self: start;
  max-inline-size: var(--measure);
  color: var(--text-hi);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.v-chapters .v-facts a {
  color: var(--text-hi);
  text-decoration: none;
  border-block-end: var(--border) solid var(--hairline-card);
  transition: color var(--dur-hover) var(--ease), border-color var(--dur-hover) var(--ease);
}

.v-chapters .v-facts a:hover {
  color: var(--brass-400);
  border-block-end-color: var(--brass-400);
}

/* Восемь коротких полей ложатся в четыре колонки ровно двумя строками —
   тот же счёт, что у сетки практик 4 × 2 в главе 02. Три колонки оставили бы
   в конце второй строки дыру, а переставлять поля нельзя: порядок задан ТЗ.
   Оставшиеся три поля идут ниже без дыр: описание дела во всю ширину,
   а два последних — по половине. Именно они носят самые длинные подписи,
   и на половине ширины те укладываются в одну строку.
   Всего четыре ряда полей: глава остаётся одним экраном. */
.v-chapters .v-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s-5) var(--gutter);
}

.v-chapters .v-field--wide { grid-column: 1 / -1; }
.v-chapters .v-field--pair { grid-column: span 2; }

.v-chapters .v-form__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4) var(--s-6);
}

.v-chapters .v-form__privacy {
  max-inline-size: var(--measure);
  color: var(--text-lo);
}

/* Селект-шеврон — один на весь проект, в base §10. Здесь его нет. */

@media (max-width: 1023px) {
  .v-chapters .v-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* На двух колонках «половина» — это одна колонка, иначе последние два поля
     встанут в столбик и в ряду снова появится дыра. */
  .v-chapters .v-field--pair { grid-column: span 1; }
  /* Полоса складывается вдвое: две пары фактов в столбце, столбцов два. */
  .v-chapters .v-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, auto);
    gap: var(--s-2) var(--gutter);
  }
  /* Вторая пара в каждом столбце отходит от первой. */
  .v-chapters .v-facts dt:nth-of-type(2),
  .v-chapters .v-facts dt:nth-of-type(4) { margin-block-start: var(--s-4); }
}

@media (max-width: 767px) {
  .v-chapters .v-form { grid-template-columns: minmax(0, 1fr); }
  .v-chapters .v-facts {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
  .v-chapters .v-facts dt:nth-of-type(n + 2) { margin-block-start: var(--s-4); }
}

/* ═══ 14. Футер ════════════════════════════════════════════════════════
   Разделитель-шеврон садится ровно на верхнюю линию футера, чтобы линий
   было по-прежнему одна, а не две. */

.v-chapters .v-footer__divider {
  inline-size: calc(100% - var(--margin) * 2);
  max-inline-size: var(--container);
  margin-block-start: calc(var(--s-2) * -1);
  margin-inline: auto;
}

/* Рейка висит у правого края и над футером тоже — правая колонка футера
   получает тот же отступ, что и главы, иначе номера ложатся на копирайт. */
@media (min-width: 1024px) {
  .v-chapters .zp-footer > .zp-container {
    padding-inline-end: calc(var(--v-rail-w) + var(--v-rail-gap) + var(--s-3));
  }
}

.v-chapters .v-footer__col ul {
  display: grid;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

/* Знак футера, строка дисклеймера и копирайта — .zp-footer__brand
   и .zp-footer__legal из base.css. */