/* Вариант A · Memorandum — фирма как один непрерывный документ.
   Требует shared/tokens.css и shared/base.css, подключённых раньше.

   Три решения, из которых собран весь файл:

   1. Одна колонка, и она не разрывается. У колонки есть волосяная линия слева,
      она идёт от первого экрана до контактов без единого разрыва: секции не имеют
      промежутков, только внутренние отступы. Сетки карточек на странице нет вообще —
      многоколоночная раскладка разрешена ровно в футере.
   2. Левое поле колонки — место номеров. Туда вынесены номера практик 01–08
      и маркеры перечней; текст при этом остаётся в мере.
   3. Поле §1–§8 живёт снаружи документа и привязано к нему счётом, а не к краю окна:
      inset-inline-start считается от центра страницы и ширины колонки, поэтому
      рейка едет вместе с документом на любой ширине и уходит ниже 1024 px.

   Всё вариантное — под .v-memorandum. Словарь .zp-* глобально не переопределяется. */

.v-memorandum {
  /* Мера пришла из токенов. Прежняя оговорка `min(--measure, 38rem)` была
     заплаткой на враньё токена (68ch = 89 знаков); токен исправлен в таске 06,
     и колонка снова берёт меру напрямую. */
  --mm-text: var(--measure);
  --mm-hang: var(--s-8);   /* поле номера слева от текста */
  --mm-gap: var(--s-5);    /* номер → текст */
  --mm-pad: var(--s-5);    /* линия документа → поле номера */
  --mm-doc: calc(var(--mm-text) + var(--mm-hang) + var(--mm-gap) + var(--mm-pad) + var(--border));

  --mm-rail: var(--s-8);   /* ширина поля §1–§8 */
  --mm-step: var(--s-6);   /* высота строки этого поля и путь метки за один шаг */

  --mm-band: var(--s-8);   /* половина промежутка между секциями: 64 + 64 = 128 */
  --mm-portrait: 280px;    /* портрет партнёра, потолок по таску — 320 */
}

/* ═══ 1. Шапка ═════════════════════════════════════════════════════════
   Целиком из base.css: знак .zp-brand, кнопка .zp-header__cta, пороги 1260/768.
   Вариант в шапке не решает ничего — она общая на все три страницы. */

/* ═══ 2. Полоса секции и колонка документа ═════════════════════════════ */

.v-memorandum .mm-band {
  position: relative;
  padding-block: var(--mm-band);
  padding-inline: var(--margin);
}

.v-memorandum .mm-band--deep { background-color: var(--ink-900); }

.v-memorandum .mm-band--title { padding-block-start: var(--s-9); }

/* Линия документа. Она принадлежит полосе, а не колонке: колонка кончается
   вместе с текстом, а линия обязана пройти и через отступы между секциями —
   иначе «одна колонка, и она не разрывается» разрывается семь раз.
   Считается тем же выражением, что и левый край колонки, поэтому совпадает
   с ним пиксель в пиксель на любой ширине; на .zp-paper токен подменяется сам. */
.v-memorandum .mm-band::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: max(var(--margin), calc(50% - var(--mm-doc) / 2));
  inline-size: var(--border);
  background-color: var(--hairline-dark);
}

.v-memorandum .mm-col {
  display: grid;
  grid-template-columns: var(--mm-hang) minmax(0, var(--mm-text));
  column-gap: var(--mm-gap);
  max-inline-size: var(--mm-doc);
  margin-inline: auto;
  padding-inline-start: var(--mm-pad);
  border-inline-start: var(--border) solid var(--hairline-dark);
}

.v-memorandum .mm-col > * {
  grid-column: 2;
  margin-block: 0;
}

.v-memorandum .mm-col > .mm-full { grid-column: 1 / -1; }

/* ═══ 3. Вертикальный ритм колонки ═════════════════════════════════════
   Над заголовком всегда больше воздуха, чем под ним: заголовок принадлежит
   тому, что идёт после него, а не тому, что было до. */

.v-memorandum .mm-rule { margin-block-end: var(--s-7); }
.v-memorandum .mm-label { margin-block-end: var(--s-4); }
.v-memorandum .mm-h { margin-block-end: var(--s-5); }
.v-memorandum .mm-lede { margin-block-end: var(--s-7); }
.v-memorandum .mm-h + .mm-list { margin-block-start: var(--s-5); }
.v-memorandum .mm-para + .mm-para { margin-block-start: var(--s-5); }

.v-memorandum .mm-caption {
  margin-block-start: var(--s-7);
  margin-block-end: var(--s-4);
}

.v-memorandum .mm-outlink {
  justify-self: start;
  margin-block-start: var(--s-6);
}

/* ═══ 4. Первый экран ══════════════════════════════════════════════════ */

.v-memorandum .mm-band--title .mm-lede { margin-block-end: var(--s-6); }

.v-memorandum .mm-chevron { margin-block-end: var(--s-6); }

.v-memorandum .mm-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-6);
  margin-block-end: var(--s-7);
}

/* Оглавление. Номер — Playfair латунью в поле слева, заголовок — Small,
   строки разделены волосяной линией: это перечень, а не восемь ящиков. */
.v-memorandum .mm-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--border) solid var(--hairline-dark);
}

.v-memorandum .mm-toc a {
  display: grid;
  grid-template-columns: var(--mm-hang) minmax(0, var(--mm-text));
  column-gap: var(--mm-gap);
  align-items: baseline;
  padding-block: var(--s-2);
  border-block-end: var(--border) solid var(--hairline-dark);
  color: var(--text-hi);
  font-family: var(--font-text);
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}

.v-memorandum .mm-toc a:hover { color: var(--brass-400); }

.v-memorandum .mm-toc__num {
  justify-self: end;
  color: var(--brass-500);
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
}

/* Водяной знак — на правом поле титульного листа и только там. */
.v-memorandum .mm-ghost {
  inset-block-start: 50%;
  inset-inline-start: calc(50% + var(--mm-doc) / 2 + var(--s-7));
  translate: 0 -50%;
}

/* ═══ 5. Поле §1–§8 и латунная метка ═══════════════════════════════════ */

.v-memorandum .mm-rail {
  position: fixed;
  z-index: 40;
  inset-block-start: 50%;
  inset-inline-start: calc(50% - var(--mm-doc) / 2 - var(--mm-rail) - var(--s-5));
  inline-size: var(--mm-rail);
  translate: 0 -50%;
  transition:
    opacity var(--dur-enter) var(--ease),
    visibility 0s linear 0s;
}

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

.v-memorandum .mm-rail__list {
  margin: 0;
  padding: 0;
  padding-inline-end: var(--s-4);
  list-style: none;
  border-inline-end: var(--border) solid var(--hairline-dark);
}

.v-memorandum .mm-rail a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  block-size: var(--mm-step);
  color: var(--text-lo);
  font-family: var(--font-text);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: color var(--dur-hover) var(--ease);
}

.v-memorandum .mm-rail a:hover { color: var(--brass-400); }
.v-memorandum .mm-rail a[aria-current] { color: var(--champagne); }

/* ── Поле как оглавление ───────────────────────────────────────────────
   На 1440 колонка документа стоит по центру, и слева от неё оставалось
   383 px, из которых поле занимало 64: страница читалась не как документ
   с полем, а как документ, сдвинутый вправо без причины. Поле — это
   оглавление, и оно должно быть оглавлением: номер и заголовок раздела,
   выключка к линии документа. Заголовки не сочинены — это те же строки,
   что и раньше стояли в поле для скринридера, то есть заголовки самих
   разделов. Ширина поля не задана числом, а взята как весь остаток до
   поля страницы, с потолком 280: поле не может ни налезть на край окна,
   ни перерасти оглавление. */
@media (min-width: 1260px) {
  .v-memorandum {
    --mm-rail: min(280px, calc(50% - var(--mm-doc) / 2 - var(--margin) - var(--s-5)));
    --mm-step: var(--s-8);
  }

  .v-memorandum .mm-rail a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    justify-content: end;
    gap: var(--s-3);
    padding-block-start: var(--s-1);
    text-align: end;
  }

  .v-memorandum .mm-rail__title {
    font-size: var(--fs-small);
    letter-spacing: 0;
    /* Ступень строки уже задана шагом метки, поэтому интерлиньяж берётся
       плотнее основного: три строки заголовка обязаны уместиться в 64 px. */
    line-height: var(--lh-card-title);
    text-transform: none;
  }
}

/* Ниже порога в поле помещаются только номера. Заголовок при этом остаётся
   в доступном дереве: рецепт тот же, что у .zp-sr-only, но классом его
   не поставить — решение зависит от ширины окна, а не от разметки. */
@media (max-width: 1259px) {
  .v-memorandum .mm-rail__title {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

.v-memorandum .mm-rail__mark {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: calc(var(--border) * -1);
  inline-size: var(--border-accent);
  block-size: var(--mm-step);
  background-color: var(--brass-400);
  transition: translate var(--dur-enter) var(--ease);
}

/* Метка едет шагами строки: положение объявлено в CSS, скрипт лишь называет
   номер активной секции. Инлайновых стилей на странице нет ни одного. */
.v-memorandum .mm-rail[data-active="2"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 1); }
.v-memorandum .mm-rail[data-active="3"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 2); }
.v-memorandum .mm-rail[data-active="4"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 3); }
.v-memorandum .mm-rail[data-active="5"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 4); }
.v-memorandum .mm-rail[data-active="6"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 5); }
.v-memorandum .mm-rail[data-active="7"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 6); }
.v-memorandum .mm-rail[data-active="8"] .mm-rail__mark { translate: 0 calc(var(--mm-step) * 7); }

/* ═══ 6. Записи перечней ═══════════════════════════════════════════════
   Один и тот же скелет на трёх плотностях: практики, причины, опыт.
   Разводятся не отступом, а весом номера и заголовка. */

.v-memorandum .mm-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-memorandum .mm-entry {
  display: grid;
  grid-template-columns: var(--mm-hang) minmax(0, var(--mm-text));
  column-gap: var(--mm-gap);
  padding-block: var(--s-6);
}

.v-memorandum .mm-list > li:first-child { padding-block-start: 0; }
.v-memorandum .mm-list > li:last-child { padding-block-end: 0; }

.v-memorandum .mm-list > li + li {
  border-block-start: var(--border) solid var(--hairline-dark);
}

.v-memorandum .mm-entry > * {
  grid-column: 2;
  margin-block: 0;
}

.v-memorandum .mm-entry__num {
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  text-align: end;
}

/* Номер выравнивается по верху прописных заголовка, а не по рамке строки. */
.v-memorandum .mm-entry--major .mm-entry__num {
  margin-block-start: calc(var(--s-1) * -1);
}

.v-memorandum .mm-entry--minor .mm-entry__num {
  color: var(--brass-500);
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-block-start: var(--s-1);
}

/* Причины и статьи номера не носят: их последовательность ничего не значит.
   Поле слева держит маркер — волосяную латунную насечку. */
.v-memorandum .mm-entry--plain::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  inline-size: var(--s-4);
  block-size: var(--border);
  margin-block-start: var(--s-3);
  background-color: var(--brass-500);
}

.v-memorandum .mm-entry__title { margin-block-end: var(--s-3); }
.v-memorandum .mm-entry__meta { margin-block-end: var(--s-3); }

.v-memorandum .mm-title {
  color: var(--champagne);
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  line-height: var(--lh-h4);
  letter-spacing: var(--ls-display);
}

.v-memorandum .mm-post {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}

.v-memorandum .mm-post:hover {
  color: var(--brass-400);
  text-decoration: underline;
  text-decoration-thickness: var(--border);
  text-underline-offset: 0.2em;
}

.v-memorandum .mm-entry__link {
  justify-self: start;
  margin-block-start: var(--s-4);
}

/* Врезка практики 03 — латунная линия слева, тот же приём, что у цитаты. */
.v-memorandum .mm-inset {
  margin-block-start: var(--s-5);
  padding-inline-start: var(--s-5);
  border-inline-start: var(--border-accent) solid var(--brass-500);
}

/* ═══ 7. Перечень «We act for» ═════════════════════════════════════════ */

.v-memorandum .mm-acts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.v-memorandum .mm-acts > li {
  display: grid;
  grid-template-columns: var(--mm-hang) minmax(0, var(--mm-text));
  column-gap: var(--mm-gap);
  padding-block: var(--s-3);
}

.v-memorandum .mm-acts > li + li {
  border-block-start: var(--border) solid var(--hairline-dark);
}

.v-memorandum .mm-acts > li::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: center;
  inline-size: var(--s-4);
  block-size: var(--border);
  background-color: var(--brass-500);
}

/* ═══ 8. Партнёр ═══════════════════════════════════════════════════════ */

.v-memorandum .mm-role { margin-block-end: var(--s-6); }

/* Единственное место страницы, где текст обтекает: портрет вклеен в поле
   документа, и абзац идёт вокруг него. flow-root держит поплавок внутри секции. */
.v-memorandum .mm-flow { display: flow-root; }

.v-memorandum .mm-quote { margin-block-end: var(--s-6); }

.v-memorandum .mm-portrait {
  float: inline-start;
  inline-size: var(--mm-portrait);
  max-inline-size: 45%;
  aspect-ratio: 4 / 5;
  margin: 0 var(--s-6) var(--s-5) 0;
}

.v-memorandum .mm-portrait > img { object-position: 28% 15%; }

.v-memorandum .mm-facts { margin-block-start: var(--s-5); }

.v-memorandum .mm-flow .mm-outlink {
  display: inline-flex;
  margin-block-start: var(--s-5);
}

/* ═══ 9. Форма и контактные строки ═════════════════════════════════════
   Памятка не знает сеток карточек, и форма её не заводит: колонка остаётся
   одна. Но одиннадцать одинаковых полос подряд — это лестница, а не документ,
   поэтому поля собраны в четыре записи, как всё остальное в этой колонке:
   кто пишет · как отвечать · о чём дело · масштаб и способ ответа.
   Записи разведены волосяной линией и воздухом и помечены латунной насечкой
   в поле слева — тем же знаком, что строки контактов ниже. Ни одной новой
   надписи при этом не появилось: группу держат линия и пространство.
   Внутри записи короткие поля встают парами — это по-прежнему одна колонка,
   разделённая надвое, а не сетка. */

.v-memorandum .mm-form { row-gap: 0; }

.v-memorandum .mm-form__group {
  --mm-group-pad: 0px;
  position: relative;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--mm-gap);
  row-gap: var(--s-5);
  padding-block-start: var(--mm-group-pad);
}

.v-memorandum .mm-form__group + .mm-form__group {
  --mm-group-pad: var(--s-7);
  margin-block-start: var(--s-7);
  border-block-start: var(--border) solid var(--hairline-dark);
}

/* Насечка стоит на высоте первой подписи записи, а не на верхней кромке
   отступа: отступ принадлежит промежутку, а насечка — записи. */
.v-memorandum .mm-form__group::before {
  content: "";
  position: absolute;
  inset-block-start: calc(var(--mm-group-pad) + var(--s-2));
  inset-inline-start: calc((var(--mm-gap) + var(--s-4)) * -1);
  inline-size: var(--s-4);
  block-size: var(--border);
  background-color: var(--brass-500);
}

.v-memorandum .mm-field--wide { grid-column: 1 / -1; }

/* Кнопка отходит от последней записи на промежуток между записями. */
.v-memorandum .mm-form .zp-btn { margin-block-start: var(--s-7); }

.v-memorandum .mm-privacy {
  margin-block-start: var(--s-5);
  color: var(--text-lo);
}

.v-memorandum .mm-details { margin-block-start: var(--s-8); }

.v-memorandum .mm-details > div {
  display: grid;
  grid-template-columns: var(--mm-hang) minmax(0, var(--mm-text));
  column-gap: var(--mm-gap);
  padding-block: var(--s-4);
}

.v-memorandum .mm-details > div + div {
  border-block-start: var(--border) solid var(--hairline-dark);
}

.v-memorandum .mm-details > div::before {
  content: "";
  grid-column: 1;
  grid-row: 1;
  justify-self: end;
  align-self: start;
  inline-size: var(--s-4);
  block-size: var(--border);
  margin-block-start: var(--s-2);
  background-color: var(--brass-500);
}

.v-memorandum .mm-details dt {
  grid-column: 2;
  margin-block-end: var(--s-2);
}

.v-memorandum .mm-details dd {
  grid-column: 2;
  margin: 0;
}

.v-memorandum .mm-details a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-hover) var(--ease);
}

.v-memorandum .mm-details a:hover {
  color: var(--brass-400);
  text-decoration: underline;
  text-decoration-thickness: var(--border);
  text-underline-offset: 0.3em;
}

/* ═══ 10. Футер — единственная многоколоночная сетка страницы ══════════ */

/* Знак и адрес первой колонки — .zp-footer__brand из base.css. */

.v-memorandum .mm-foot-list {
  display: grid;
  gap: var(--s-3);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}

/* Строка дисклеймера и копирайта приехала в base.css — .zp-footer__legal. */

/* ═══ 11. Брейкпоинты ══════════════════════════════════════════════════ */

/* Ниже 1280 водяной знак не помещается в правое поле, не сжимая документ. */
@media (max-width: 1279px) {
  .v-memorandum .mm-ghost { display: none; }
}

/* Ниже 1024 поле §1–§8 уходит целиком: под него нет полей. */
@media (max-width: 1023px) {
  .v-memorandum .mm-rail { display: none; }
}

@media (max-width: 767px) {
  .v-memorandum { --mm-band: var(--s-7); }

  .v-memorandum .mm-band--title { padding-block-start: var(--s-8); }

  /* Поля номеров складываются: номер встаёт над заголовком, линия документа
     остаётся — она и есть непрерывность. */
  .v-memorandum .mm-col {
    grid-template-columns: minmax(0, 1fr);
    padding-inline-start: var(--s-4);
  }

  .v-memorandum .mm-col > *,
  .v-memorandum .mm-col > .mm-full { grid-column: 1; }

  .v-memorandum .mm-entry { grid-template-columns: minmax(0, 1fr); }
  .v-memorandum .mm-entry > * { grid-column: 1; }

  .v-memorandum .mm-entry__num {
    justify-self: start;
    text-align: start;
    margin-block-end: var(--s-3);
  }

  .v-memorandum .mm-entry--major .mm-entry__num { margin-block-start: 0; }
  .v-memorandum .mm-entry--plain::before { display: none; }

  /* Пары полей складываются в столбик: на 375 половина колонки — это 150 px. */
  .v-memorandum .mm-form__group { grid-template-columns: minmax(0, 1fr); }

  /* Поля слева нет, и линия во всю ширину прочиталась бы как ещё одно поле:
     линия в этой форме и есть поле. Границу записи держат промежуток и та же
     латунная насечка, поднявшаяся из поля в этот промежуток. */
  .v-memorandum .mm-form__group + .mm-form__group {
    --mm-group-pad: var(--s-6);
    margin-block-start: var(--s-6);
    border-block-start: 0;
  }

  .v-memorandum .mm-form__group::before { display: none; }

  .v-memorandum .mm-form__group + .mm-form__group::before {
    display: block;
    inset-block-start: calc(var(--mm-group-pad) / 2);
    inset-inline-start: 0;
  }

  /* Короткие строки перечней держат насечку: колонка под неё узкая. */
  .v-memorandum .mm-acts > li,
  .v-memorandum .mm-details > div {
    grid-template-columns: var(--s-5) minmax(0, 1fr);
    column-gap: var(--s-4);
  }

  .v-memorandum .mm-toc a {
    grid-template-columns: var(--s-6) minmax(0, 1fr);
    column-gap: var(--s-4);
  }

  .v-memorandum .mm-portrait {
    float: none;
    inline-size: 100%;
    max-inline-size: var(--mm-portrait);
    margin: 0 0 var(--s-6);
  }

  .v-memorandum .mm-actions { gap: var(--s-5); }
}