/* case.css — страницы кейсов (work/*.html).
   Подключается только на work/*.html, после pages.css.

   ТОКЕНЫ. Все цвета берутся из base.css — своей палитры у кейса нет.
   Соответствие имён прототипа и проекта:
     --bg        → --bg              --t-1  → --text
     --surface-1 → --surface-2       --t-2  → --text-secondary
     --surface-2 → --surface-3       --t-3  → --text-muted
     --surface-3 → --surface         --line → --border
     --accent    → --accent          --page → --container
   Шкала отступов прототипа (--s2..--s14) не заводилась: в проекте уже есть
   рабочая --s-1..--s-10 с шагом 4/8/12/16/24/32/48/64/96/128. Две шкалы,
   различающиеся одним дефисом, — гарантированная путаница при правках.
   Единственное значение, которого в проектной шкале нет (56px — отступ
   рельса под хедером), задано ниже явной переменной. */

.case {
  /* Ширина рельса и промежуток до текста — переопределяются по брейкпоинтам */
  --rail: 100%;
  --gap: var(--s-5);
  /* Липкий рельс встаёт на 120px от верха окна. Константа именно суммарная:
     --header-h меняется по ширине (56px, от 90em — 64px), поэтому
     «хедер + отступ» давал бы то 112px, то 120px. max() страхует случай,
     если хедер когда-нибудь станет выше 96px. */
  --rail-top: max(120px, calc(var(--header-h) + var(--s-5)));
  /* Ширина колонки с текстом */
  --body-max: 760px;
}

/* ─────────────────────────────────────────────────────────────────
   Мета-полоса: клиент и инструменты (и «Сайт» там, где он есть).
   Живёт в начале секции «Задача», а не в первом экране: там ей нечем было
   дышать, а здесь она отвечает на вопросы ровно тогда, когда они возникают.
   Тип и год отсюда убраны — они стоят плашками на первом экране
   (.case-hero__tags), и держать их в двух местах значило бы расходиться
   при правке.
   ───────────────────────────────────────────────────────────────── */

.meta {
  --meta-gap: var(--s-5);
  display: grid;
  grid-template-columns: 1fr;
  align-items: start; /* длинное значение не тянет за собой соседа по ряду */
  gap: var(--meta-gap) var(--s-6);
  margin: 0 0 var(--s-6);
  padding-bottom: var(--s-6);
  border-bottom: 0.5px solid var(--border);
}

/* Две колонки — от 640px: Клиент и Инструменты встают в один ряд, «Сайт»
   уходит под них во всю ширину. Ниже 640px — одна колонка, тот же порядок. */
@media (min-width: 40em) {
  .meta {
    grid-template-columns: 1fr 1fr;
  }
}

/* Третье поле («Сайт» у «Архитектуры двора») — отдельной строкой во всю
   ширину: в пару к соседу оно не встаёт, а живая ссылка на сделанный сайт —
   слишком сильный аргумент, чтобы ронять её в пустую половину ряда. */
.meta__item--wide {
  grid-column: 1 / -1;
}

.meta__label {
  display: block;
  font-size: var(--label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.meta__value {
  display: block;
  font-size: 1.0125rem;
  color: var(--text);
  margin: 0; /* сброс отступа <dd> */
}

/* Стрелка в ссылке «Назад» — инлайн-SVG, наследует цвет текста */
.back-nav__icon {
  flex: none;
  margin-right: 0.5em;
  vertical-align: -0.1em;
}

/* ─────────────────────────────────────────────────────────────────
   Блок кейса: рельс + тело
   ───────────────────────────────────────────────────────────────── */

.block {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: var(--gap);
  padding-inline: var(--gutter);
  padding-block: var(--s-9);
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
}

.block + .block { padding-block-start: 0; }

/* На мобильном рельс не липнет — position:static из базы (см. медиа-запрос
   от 56.25em, где включается sticky). */
.block__rail {
  /* align-self:start обязателен: без него элемент растягивается на всю высоту
     грид-ячейки, sticky получает нулевой ход и не срабатывает. */
  align-self: start;
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
}

.block__num {
  font-size: var(--label);
  letter-spacing: 0.14em;
  color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}

.block__label {
  font-size: clamp(1.6875rem, 4vw, 1.96875rem);
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
}

.block__body {
  max-width: var(--body-max);
}

/* ─────────────────────────────────────────────────────────────────
   Типографика тела: абзац, список и подзаголовок — больше не вводить.
   ───────────────────────────────────────────────────────────────── */

/* Основной текст. Интерлиньяж 1.7 — на кириллице меньше нельзя. */
.block__body p {
  font-size: 1.1601563rem; /* 16.5px */
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 var(--s-4);
}

.block__body p:last-child { margin-bottom: 0; }

/* Лид-ин в начале абзаца */
.block__body p b {
  font-weight: 500;
  color: var(--text);
}

/* Тот же основной текст, набранный списком, — пятого типа не заводим:
   метрики совпадают с .block__body p, отличается только маркер. */
.block__body ul {
  margin: 0 0 var(--s-4);
  padding: 0;
}

.block__body ul:last-child { margin-bottom: 0; }

.block__body li {
  position: relative;
  padding-left: var(--s-5);
  font-size: 1.1601563rem; /* 16.5px */
  line-height: 1.7;
  color: var(--text-secondary);
}

.block__body li + li { margin-top: var(--s-2); }

.block__body li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--text-muted);
}

/* ─────────────────────────────────────────────────────────────────
   Медиа-слоты
   ───────────────────────────────────────────────────────────────── */

.stack {
  display: grid;
  gap: var(--s-2);
  margin-top: var(--s-7);
}

.stack:first-child { margin-top: 0; }

/* Текст после кадров — на том же расстоянии, что и кадры после текста */
.stack + p,
.stack + ul { margin-top: var(--s-7); }

/* Плашка кадра: пропорцию держит контейнер, поэтому страница не прыгает,
   пока картинка грузится. */
.ph {
  position: relative;
  overflow: hidden;
  background-color: var(--surface-2);
}

.ph > img,
.ph > video,
.ph > picture > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph > picture {
  display: block;
  width: 100%;
  height: 100%;
}

.ph--shot  { aspect-ratio: 3 / 2; }
.ph--wide  { aspect-ratio: 32 / 15; }
.ph--pair  { aspect-ratio: 19 / 15; }
.ph--low   { aspect-ratio: 16 / 9; }
.ph--tallr { aspect-ratio: 7 / 8; }

/* Кадр без заданной пропорции — для длинных скриншотов страницы целиком:
   такую картинку нельзя обрезать по фиксированной пропорции, иначе от
   секции остаётся полоса. Место всё равно резервируется заранее — из
   width/height самой картинки, так что скачка при загрузке нет. */
.ph--free { aspect-ratio: auto; }

.ph--free > img,
.ph--free > picture,
.ph--free > picture > img { height: auto; }

/* Компоновка: две равные колонки */
.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}

/* ─────────────────────────────────────────────────────────────────
   Фирменный знак на своём фоне.
   Единственное светлое пятно на тёмной странице — так и задумано.
   ───────────────────────────────────────────────────────────────── */

/* Пропорция зависит от ширины. В полосе 32:15 связка «год + знак + две
   подписи» помещается только от 640px: ниже средний ряд (1fr) сжимается
   меньше собственной высоты знака, и знак вылезает из своей ячейки на
   подписи — замерено 9px на 390px и 16px на 320px, где подписи ещё и
   переносятся каждая в две строки. Знак при этом не сплющивается
   (пропорция 1280:630 держится), поэтому на белом фоне наложение видно
   не всегда — но оно есть, и на кейсе с плотным знаком вылезет.
   До 40em карточке дана высота 3:2 — там же, где .meta переходит в две
   колонки, она возвращается к полосе. */
.brandcard {
  aspect-ratio: 3 / 2;
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(16px, 3vw, 32px);
  color: #111111;
}

@media (min-width: 40em) {
  .brandcard { aspect-ratio: 32 / 15; }
}

/* Селекторы с .brandcard — иначе .block__body p перебивает их по
   специфичности и подписи уезжают в цвет тёмной темы на белой карточке. */
.brandcard .brandcard__year,
.brandcard .brandcard__foot {
  font-size: var(--label);
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #6b6b6b;
  margin: 0;
}

.brandcard__center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-3);
  min-height: 0;
}

.brandcard__mark {
  display: block;
  max-width: min(58%, 320px);
  height: auto;
  object-fit: contain;
}

.brandcard .brandcard__foot {
  display: flex;
  justify-content: space-between;
  gap: var(--s-4);
}

/* ─────────────────────────────────────────────────────────────────
   Другие проекты
   ───────────────────────────────────────────────────────────────── */

.more {
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--s-9);
  border-top: 0.5px solid var(--border);
}

.more__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

.more__title {
  font-size: clamp(1.6875rem, 4vw, 1.96875rem);
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.more__all {
  font-size: var(--small);
  color: var(--text-muted);
  white-space: nowrap;
}

.more__all:hover,
.more__all:focus-visible { color: var(--accent-text); }

.more__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-6);
}

.pcard { display: block; }

.pcard__frame {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background-color: var(--surface-2);
  margin-bottom: var(--s-4);
}

.pcard__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.pcard:hover .pcard__frame img { transform: scale(1.03); }

.pcard__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-4);
}

.pcard__name {
  font-size: 1.546875rem; /* 22px */
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
  transition: color var(--transition);
}

.pcard:hover .pcard__name,
.pcard:focus-visible .pcard__name { color: var(--accent-text); }

.pcard__type {
  font-size: var(--small);
  color: var(--text-muted);
  text-align: right;
}

/* Описание и «Смотреть кейс» есть только в мобильном макете карточки:
   на десктопе карточку несёт обложка с названием. */
.pcard__desc,
.pcard__go { display: none; }

@media (prefers-reduced-motion: reduce) {
  .pcard__frame img { transition: none; }
  .pcard:hover .pcard__frame img { transform: none; }
}

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

/* от 900px — две колонки, рельс липнет */
@media (min-width: 56.25em) {
  .case {
    --rail: 220px;
    --gap: 36px;
  }

  .block__rail {
    position: sticky;
    top: var(--rail-top);
    display: block;
  }

  .block__num {
    display: block;
    margin-bottom: var(--s-2);
  }
}

/* от 1100px — рельс шире, промежуток больше */
@media (min-width: 68.75em) {
  .case {
    --rail: 300px;
    --gap: 48px;
  }
}

/* до 900px — одна колонка */
@media (max-width: 56.24em) {
  .block {
    grid-template-columns: minmax(0, 1fr);
    padding-block: var(--s-8);
  }

  .two,
  .more__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .more { padding-block: var(--s-8); }
}

/* ─────────────────────────────────────────────────────────────────
   Хлебные крошки, плашки направлений и баннер — общие для всех кейсов
   ───────────────────────────────────────────────────────────────── */
.case-crumbs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--small);
  color: var(--text-muted);
}
.case-crumbs__list li + li::before {
  content: "/";
  margin-right: var(--s-2);
}
.case-crumbs__list a { color: var(--text-muted); transition: color var(--transition); }
.case-crumbs__list a:hover { color: var(--text); }
.case-crumbs__list [aria-current] { color: var(--text-secondary); }

/* Направления работы — плашками на обложке. Год в data-year: его читает
   tools/sync-site.mjs для dateCreated, на экране он не нужен. */
.case-hero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: var(--s-4) 0 0;
  padding: 0;
  list-style: none;
}
.case-hero__tags li {
  max-width: none;
  padding: var(--s-1) var(--s-4);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  background: rgba(255, 255, 255, 0.1);
  font-size: var(--small);
  color: var(--text);
}

.case-banner img,
.case-banner video {
  display: block;
  width: 100%;
  height: auto;
}

/* Подзаголовок внутри тела блока (Заказчик / Проект / Задачи) */
.block__body h3 {
  margin: var(--s-6) 0 var(--s-2);
  font-size: var(--step-0);
  font-weight: 400;
  color: var(--text);
}
.block__body h3:first-child,
.block__body .meta + h3 { margin-top: 0; }

/* ─────────────────────────────────────────────────────────────────
   Десктоп — по макету Figma (кейс NY Knitwear)
   Под шапкой — крошки, ниже обложка полосой 814 единиц: название сверху
   слева, плашки направлений снизу слева, строка сути снизу справа.
   Блоки: слева лаймовая плашка с названием раздела, справа текст; картинки
   во всю ширину контейнера. Первый блок — вводный: номер и крупный
   заголовок слева, «Заказчик / Проект / Задачи» справа.
   ───────────────────────────────────────────────────────────────── */
@media (min-width: 64em) {
  .case {
    --rail: calc(580 * var(--u));
    --gap: 0px;
  }

  /* ── Первый экран ── */
  .case-hero {
    min-height: 0;
    padding-bottom: 0;
  }

  .case-bar {
    padding: calc(40 * var(--u)) var(--gutter) calc(15 * var(--u));
  }

  .case-crumbs__list {
    gap: calc(14 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
  }
  .case-crumbs__list li + li::before { margin-right: calc(14 * var(--u)); }

  /* Обложка — полоса под крошками, а не весь экран */
  .case-hero__cover {
    top: auto;
    bottom: 0;
    height: calc(814 * var(--u));
  }

  .case-hero__text {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr auto;
    min-height: calc(814 * var(--u));
    margin-top: 0;
    padding: calc(53 * var(--u)) var(--gutter) calc(52 * var(--u));
  }

  .case-hero__title {
    grid-column: 1 / -1;
    margin: 0;
    letter-spacing: 0;
    line-height: var(--lh-h1);
  }

  .case-hero__summary {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    max-width: calc(900 * var(--u));
    font-size: var(--fs-lead);
    line-height: 1.125;
    text-align: right;
    color: var(--text-secondary);
  }

  .case-hero__tags {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    max-width: calc(620 * var(--u));
    gap: calc(15 * var(--u));
    margin: 0;
  }
  .case-hero__tags li {
    padding: calc(10 * var(--u)) calc(30 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-secondary);
  }

  /* ── Блоки ── */
  .block {
    grid-template-columns: var(--rail) minmax(0, 1fr);
    padding-block: calc(120 * var(--u)) 0;
  }
  .block + .block { padding-block-start: calc(120 * var(--u)); }

  .block__rail { position: static; }
  .block__num { display: none; }

  /* Название раздела — лаймовая плашка */
  .block__label {
    display: inline-flex;
    padding: calc(10 * var(--u)) calc(30 * var(--u));
    border: 1px solid var(--accent);
    border-radius: 30px;
    background: rgba(216, 242, 73, 0.05);
    font-size: var(--fs-small);
    font-weight: 400;
    line-height: var(--lh-small);
    color: var(--accent-text);
  }

  /* Вводный блок: номер и крупный заголовок, колонки поровну */
  .case-hero + .block {
    grid-template-columns: calc(852 * var(--u)) minmax(0, 1fr);
    padding-top: calc(115 * var(--u));
  }
  .case-hero + .block .block__num {
    display: block;
    margin-bottom: calc(20 * var(--u));
    font-size: var(--fs-small);
    letter-spacing: 0;
  }
  .case-hero + .block .block__label {
    display: block;
    max-width: calc(700 * var(--u));
    padding: 0;
    border: 0;
    text-wrap: wrap; /* balance рвал «Интернет-магазин» по дефису */
    background: none;
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: var(--lh-h2);
    color: var(--text);
  }

  .block__body { max-width: none; }

  .block__body p,
  .block__body li {
    max-width: calc(1120 * var(--u));
    font-size: var(--fs-small);
    line-height: var(--lh-small);
    color: var(--text-muted);
  }
  .block__body p { margin-bottom: calc(30 * var(--u)); }
  .block__body p b { font-weight: 400; color: var(--text); }

  .block__body li { padding-left: calc(37 * var(--u)); }
  .block__body li + li { margin-top: calc(16 * var(--u)); }
  .block__body li::before {
    content: "";
    top: 0.45em;
    width: max(8px, calc(12 * var(--u)));
    height: max(8px, calc(12 * var(--u)));
    border-radius: 50%;
    background: var(--accent);
  }

  .block__body h3 {
    margin: calc(60 * var(--u)) 0 calc(14 * var(--u));
    font-size: var(--fs-h6);
    line-height: var(--lh-h6);
  }
  .block__body h3:first-child,
  .block__body .meta + h3 { margin-top: 0; }

  .block__body .meta { margin-bottom: calc(60 * var(--u)); }

  /* Картинки — во всю ширину контейнера: тело блока уходит влево на ширину
     рельса. */
  .block__body .stack {
    margin-top: calc(120 * var(--u));
    margin-left: calc(-1 * var(--rail));
    gap: calc(20 * var(--u));
  }
  .case-hero + .block .block__body .stack { margin-left: calc(-852 * var(--u)); }

  .block__body .two { gap: calc(20 * var(--u)); }

  .ph { border-radius: 12px; }

  .case-banner { margin-top: calc(120 * var(--u)); }

  /* Последний блок перед «Другими проектами» — с воздухом снизу */
  .case > .block:last-of-type { padding-bottom: calc(160 * var(--u)); }

  /* Пары кадров одной высоты: разные пропорции снимков не ломают ряд */
  .block__body .two > .ph { height: 100%; }
  .block__body .two > .ph > picture > img { height: 100%; object-fit: cover; }

  /* Верхний градиент мягче: на макете обложка светлая до самого заголовка,
     а крошки теперь стоят не на кадре, а над ним. */
  .case-hero__cover::before { opacity: 0.55; }
}

/* ─────────────────────────────────────────────────────────────────
   Мобильная версия по макету (кейс NY Knitwear, 393px)
   Первый экран 650px: крошки сверху на кадре, название и суть внизу.
   Плашки направлений и мета-блок «Клиент · Инструменты» на телефоне не
   показываются — их нет в макете; год и пары из них по-прежнему читает
   sync-site.mjs, поэтому из разметки они не уходят.
   Ритм макета: между разделами и от текста до кадров — 50px, от плашки
   раздела до текста — 30, между абзацами — 15, между кадрами — 20.
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 63.99em) {
  .case-hero { min-height: 650px; padding-bottom: 40px; }
  .case-bar { padding: 20px var(--gutter) 0; }
  .case-crumbs__list { font-size: 14px; }
  .case-hero__tags { display: none; }
  .case-hero__title { margin-bottom: 15px; font-size: 24px; line-height: 1.25; }
  .case-hero__summary { font-size: 16px; line-height: 1.375; color: var(--text-secondary); }

  .meta { display: none; }

  .block,
  .block + .block { gap: 0; padding-block: 50px 0; }
  .case-hero + .block { padding-top: 70px; }

  .block__rail { display: block; margin-bottom: 30px; }
  .block__num { display: block; margin-bottom: 10px; font-size: 14px; letter-spacing: 0; }

  /* Названия разделов — плашками: тонкая лаймовая рамка на четверти
     яркости и подложка в 5% */
  .block__label {
    display: inline-flex;
    padding: 6px 17px;
    border: 1px solid rgba(216, 242, 73, 0.25);
    border-radius: 15px;
    background: rgba(216, 242, 73, 0.05);
    font-size: 14px;
    font-weight: 400;
    line-height: 15px;
    color: var(--accent-text);
  }
  /* Первый раздел открывается заголовком, а не плашкой */
  .case-hero + .block .block__rail { margin-bottom: 50px; }
  .case-hero + .block .block__label {
    display: block;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 28px;
    font-weight: 500;
    line-height: 1.2857;
    color: var(--text);
  }

  .block__body p,
  .block__body li { font-size: 16px; line-height: 1.375; color: var(--text-muted); }
  .block__body p { margin-bottom: 15px; }
  .block__body ul { margin-bottom: 0; }
  .block__body li + li { margin-top: 15px; }
  .block__body * + ul { margin-top: 15px; }

  /* Списки в разделах — простыми абзацами, без маркеров. Маркеры остаются
     только у «Задач» в первом разделе, и там текст мельче. */
  .block__body li { padding-left: 0; }
  .block__body li::before { content: none; }
  .case-hero + .block li { padding-left: 20px; font-size: 14px; line-height: 1.5714; }
  .case-hero + .block li::before {
    content: "";
    top: 0.6em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }

  .block__body h3 { margin: 30px 0 15px; font-size: 24px; line-height: 1.25; }
  .block__body h3:first-child,
  .block__body .meta + h3 { margin-top: 0; }

  .stack,
  .stack:first-child,
  .block__body * + .stack { margin-top: 50px; }
  .stack + p, .stack + ul { margin-top: 50px; }
  .stack,
  .two { gap: 20px; }
  .two { grid-template-columns: minmax(0, 1fr); }
  .ph { border-radius: 2px; }

  /* NY Knitwear, «Бизнес задачи»: в макете первым идёт знак, за ним фото,
     и знак у́же колонки. Порядок меняем только здесь — на десктопе пара
     стоит рядом, и там первым остаётся фото. */
  .block[aria-labelledby="nyk-goals"] .two > :last-child { order: -1; max-width: 293px; }

  /* Баннер на телефоне — кадром в колонке текста, а не во всю ширину окна */
  .case-banner { padding: 50px var(--gutter) 0; }
  .case-banner img,
  .case-banner video { border-radius: 2px; }

  /* ── Заявка после кейса ── */
  .case-cta {
    margin: 70px var(--gutter) 0;
    padding: 40px 20px;
    border-radius: 6px;
    background: var(--surface);
  }
  .case-cta__title { margin: 0 0 20px; font-size: 32px; font-weight: 500; line-height: 30px; }
  .case-cta__lead { margin: 0 0 15px; font-size: 16px; line-height: 1.5; color: var(--text-muted); }
  .case-cta__list { margin: 0 0 15px; padding: 0; list-style: none; }
  .case-cta__list li {
    position: relative;
    padding-left: 20px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
  }
  .case-cta__list li + li { margin-top: 5px; }
  .case-cta__list li::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
  }
  .case-cta__note { margin: 0 0 50px; font-size: 14px; line-height: 24px; color: var(--text-secondary); }
  .case-cta__btn { display: flex; width: 100%; }
  .case-cta__tg {
    display: block;
    margin-top: 15px;
    font-size: 16px;
    line-height: 28px;
    text-align: center;
    color: var(--text);
  }
  .case-cta__tg:hover,
  .case-cta__tg:focus-visible { color: var(--accent-text); }

  /* ── Другие проекты: одна карточка, без заголовка и «Назад» ── */
  .more { padding-block: 100px; border-top: 0; }
  .more__head { margin: 0; }
  .more__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .more__all { display: none; }
  .more__grid { display: block; }
  .more__grid > .pcard + .pcard { display: none; }
  .pcard {
    overflow: hidden;
    padding-bottom: 25px;
    border-radius: 8px;
    background: var(--surface);
  }
  .pcard__frame { aspect-ratio: 353 / 240; margin-bottom: 20px; }
  .pcard__meta,
  .pcard__desc,
  .pcard__go { padding-inline: 20px; }
  .pcard__name { font-size: 20px; line-height: 1.5; }
  .pcard__type { display: none; }
  .pcard__desc {
    display: block;
    margin: 5px 0 20px;
    font-size: 14px;
    line-height: 20px;
    color: var(--text-muted);
  }
  .pcard__go {
    display: inline-flex;
    gap: 10px;
    font-size: 16px;
    line-height: 28px;
    color: var(--accent-text);
  }
  .back-nav--bottom { display: none; }
}