/* Страница кейса: общие стили для всех кейсов (site/<проект>/index.html).
   Подключается последней, после site.css, hero-proto.css, reveal-window.css, lenis.css и ba-slider.css.
   У страницы кейса на <body> классы "home-b case". Блоки и их разметка: components/case-blocks.html.
   Собрано 29.10.2026 из case-c.css, case-d.css и стилей внутри страницы forward; порядок правил сохранён. */

/* ============================================================
   1. Каркас: сетка, поля, обложка, переключатель, блоки потока
   ============================================================ */

.cs-info dl, .cs-credits dl { margin: 0; }
.cs-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(24px, 3.4vw, 56px); }

/* черта с засечкой на конце — у Ashfall .border--left / .border--right */
.tick { position: relative; height: 1px; background: var(--line-strong); }
.tick::after { content: ''; position: absolute; top: 0; left: 0; width: 1px; height: 9px; background: var(--line-strong); }
.tick--right::after { left: auto; right: 0; }

/* ===== Поля страницы — как у плашек на главной (прототип 6): 16 px от края, без ограничения ширины ===== */
.case main { --gutter: 16px; }
.case main .wrap { max-width: none; }
/* шапка-капсула своей полосы не занимает — первый экран начинается с самого верха без подтяжки */
.case .ph-pin { margin-top: 0; }
/* «All work» — в одну линию с меню-капсулой (top 14 px, высота 54 px); на телефоне капсула широкая — ссылка остаётся под ней */
@media (min-width: 721px) { .case .ph__top { top: 14px; height: 54px; } }
/* обложка с подписями — ровно по середине экрана (в B была выше на 4vh) */
@media (min-width: 901px) {
  .case .ph__media { top: 50%; }
  .case .ph__caption { top: calc(50% - var(--mh) / 2); }
  .case .ph__bottom { bottom: calc(50% - var(--mh) / 2); }
}

/* ===== Тело кейса: без оглавления, переключатель Summary / Case study прячет разделы ===== */
.case .cs-body { display: block; padding-top: var(--section); }
.cs-body.is-summary .cs-flow, .cs-body.is-summary .cs-info__lead { display: none; }

/* начало: переключатель, черта с засечкой, крупное заявление */
.seg-slot { height: 54px; margin-bottom: 20px; }
/* переключатель прилипает: как только при прокрутке доходит до строки меню (top 14 px, как у капсулы), остаётся там на своём месте слева;
   прокрутка назад — отлипает. На телефоне капсула меню широкая — переключатель прилипает под ней (14 + 54 + 8 = 76 px) */
.case { --seg-top: 14px; }
@media (max-width: 720px) { .case { --seg-top: 76px; } }
.case .seg.is-docked { position: fixed; top: var(--seg-top); left: var(--gutter, 16px); z-index: 40; background: rgba(247, 247, 248, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); box-shadow: 0 6px 24px -12px rgba(24, 24, 27, .18); }
/* переключатель — высотой с меню-капсулу (54 px: поля 6 + кнопки 40 + рамка), выбранный пункт чёрный */
.case .seg { padding: 6px; }
.case .seg::before { top: 6px; bottom: 6px; left: 6px; width: calc(50% - 6px); background: var(--ink); box-shadow: none; }
.case .seg button { height: 40px; padding: 0 20px; white-space: nowrap; }
.case .seg button[aria-selected="true"] { color: #FAFAFA; }
.cs-intro__statement { margin-top: 28px; max-width: 24em; text-wrap: pretty; }

/* ===== О проекте: цифры слева, текст и факты справа ===== */
.cs-info { padding-top: var(--block); row-gap: 48px; }
.cs-info__left { grid-column: 1 / 7; align-self: end; }
.cs-info__left .metrics { margin-top: 0; }
.cs-info__left .metrics-note { margin-top: 16px; }
.cs-info__copy { grid-column: 7 / 13; display: grid; gap: 40px; align-content: start; color: var(--ink-2); font-size: var(--text-lead); line-height: 1.5; }
.cs-info__lead { display: grid; gap: 1em; max-width: 40em; }
.cs-facts { display: grid; }
.cs-facts div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px; padding: 24px 0 26px; border-top: 1px solid var(--line); }
.cs-facts div:last-child { border-bottom: 1px solid var(--line); }
.cs-facts dt { padding-top: 5px; }
.cs-facts dd { margin: 0; font-size: var(--text-body); line-height: 1.5; color: var(--ink); max-width: 34em; }

/* ===== Поток блоков ===== */
.cs-flow { display: grid; gap: 20px; padding-top: var(--section); }

/* заголовок слева, текст справа */
.cs-tc { padding: calc(var(--section) - 20px) 0 var(--block); }
.cs-flow > .cs-tc:first-child { padding-top: 0; }
.cs-tc .cs-grid { padding-top: 28px; row-gap: var(--stack); }
.cs-tc__head { grid-column: 1 / 6; display: grid; gap: 12px; align-content: start; }
.cs-tc__head .h3 { max-width: 14em; }
.cs-tc__body { grid-column: 7 / 13; display: grid; gap: var(--stack); align-content: start; }
.cs-tc__body .prose { max-width: 40em; }
.cs-tc__body .points { grid-template-columns: 1fr; margin-top: 8px; }
.cs-tc__body .points li { padding: 20px 0 24px; }
/* список сразу под общей чертой блока — своя черта над первым пунктом её дублирует */
.cs-tc__body > .points:first-child { margin-top: 0; }
.cs-tc__body > .points:first-child > li:first-child { border-top: 0; padding-top: 0; }

/* картинка на всю ширину и пары */
.cs-asset .frame { aspect-ratio: var(--ar, 4 / 3); }

/* лента картинок: экраны одной высоты, прокрутка вбок, стрелки под лентой. Высота — --strip-h у .cs-strip */
.cs-strip { min-width: 0; }
.cs-strip__track { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; }
.cs-strip__track::-webkit-scrollbar { display: none; }
.cs-strip__item { flex: 0 0 auto; height: var(--strip-h, 520px); scroll-snap-align: start; border-radius: var(--radius); overflow: hidden; background: var(--surface); }
.cs-strip__item img { display: block; width: auto; height: 100%; }
.cs-strip__foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 12px; }
.cs-strip__nav { display: flex; gap: 8px; flex: none; }
.cs-strip__nav button { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; background: var(--bg); color: var(--ink); cursor: pointer; transition: border-color var(--fast) var(--ease), opacity var(--fast) var(--ease); }
.cs-strip__nav button:hover { border-color: var(--line-strong); }
.cs-strip__nav button:disabled { opacity: .35; cursor: default; }
@media (max-width: 720px) {
  .cs-strip__item { height: calc(var(--strip-h, 520px) * .7); }
  .cs-strip__nav { display: none; }
}
.cs-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* текст рядом с картинкой: текст — узкая колонка, картинка — половина */
.cs-ca { align-items: start; }
.cs-ca__copy { grid-column: 1 / 6; display: grid; gap: var(--stack); padding-top: 8px; }
.cs-ca__copy .prose { max-width: 40em; }
.cs-ca__asset { grid-column: 7 / 13; }
.cs-ca--flip .cs-ca__copy { grid-column: 8 / 13; grid-row: 1; }
.cs-ca--flip .cs-ca__asset { grid-column: 1 / 7; grid-row: 1; }
.cs-ca .points { grid-template-columns: 1fr; }
.cs-ca .points li { padding: 20px 0 24px; }
/* нумерация пунктов — как на главной: [001] */
.case .points--num li { grid-template-columns: 56px 1fr; }
.case .points--num li::before { content: "[00" counter(n) "]"; font-size: var(--text-caption); }
.cs-ca .acc { max-width: none; }

/* цитата: метка, черта с засечкой слева, крупный текст, слова проявляются по прокрутке */
.cs-quote { padding: calc(var(--section) - 20px) 0; }
.cs-quote .label { padding-bottom: 12px; }
.cs-quote + .cs-tc { padding-top: 0; }
.cs-quote__text { margin-top: 28px; max-width: 22em; text-wrap: pretty; }
.cs-quote__text .w { color: var(--reveal); transition: color 120ms linear; }
.cs-quote__text .w.on { color: var(--ink); }
.cs-quote__after { margin-top: var(--block); }
.cs-quote__after .prose { grid-column: 7 / 13; max-width: 40em; }

/* что сделали и что отрезали — два столбца */
.cs-lists { row-gap: var(--block); }
.cs-lists .acc { grid-column: span 6; max-width: none; }
.cs-lists .acc + .acc { margin-top: 0; }

.cs-flow > .compare { max-width: none; }
.case .compare-title, .case .compare-cell { padding-left: clamp(24px, 3.4vw, 56px); padding-right: clamp(24px, 3.4vw, 56px); }

/* цифры теста и вывод */
.cs-result { padding-top: var(--block); row-gap: 40px; align-items: end; }
.cs-result .metrics { grid-column: 1 / 7; margin-top: 0; }
.cs-result .prose { grid-column: 7 / 13; max-width: 40em; }

/* ===== Роль и рамки — тёмная полоса ===== */
.cs-credits { margin-top: var(--section); padding: var(--section) 0; background: var(--ink); color: #FAFAFA; }
.cs-credits .label { color: rgba(250, 250, 250, .56); }
.cs-credits__head { grid-column: 1 / 7; }
.cs-credits__head .h3 { margin-top: 12px; max-width: 10em; }
.cs-credits__rows { grid-column: 7 / 13; display: grid; }
.cs-credits__rows div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 40px; padding: 20px 0; border-top: 1px solid rgba(250, 250, 250, .14); }
.cs-credits__rows dt { padding-top: 4px; }
.cs-credits__rows dd { margin: 0; font-size: var(--text-small); line-height: 1.5; }

/* ===== Другие кейсы ===== */
.cs-more { padding-top: var(--section); }
.cs-more > .h1 { margin-bottom: var(--block); }
.cs-more__cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-card { display: grid; gap: 16px; align-content: start; }
.cs-card .frame { aspect-ratio: 4 / 3; }
.cs-card__row { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.cs-card__row .title { max-width: 14em; }
.cs-card__row .caption { margin-top: 6px; }
/* карточка-ссылка: без синего цвета и подчёркивания браузера; при наведении картинка чуть крупнее, как на главной */
a.cs-card { color: inherit; text-decoration: none; }
a.cs-card .frame img { transition: transform var(--slow) var(--ease); }
a.cs-card:hover .frame img { transform: scale(1.02); }

/* ===== Телефон и планшет ===== */
@media (max-width: 960px) {
  .cs-info__left, .cs-info__copy, .cs-tc__head, .cs-tc__body,
  .cs-ca__copy, .cs-ca__asset, .cs-ca--flip .cs-ca__copy, .cs-ca--flip .cs-ca__asset,
  .cs-quote__after .prose, .cs-lists .acc, .cs-result .metrics, .cs-result .prose,
  .cs-credits__head, .cs-credits__rows { grid-column: 1 / -1; grid-row: auto; }
  .cs-ca { row-gap: 32px; }
  .cs-ca--flip .cs-ca__copy { grid-row: 2; }
  .cs-credits { row-gap: 40px; }
}
@media (max-width: 720px) {
  .cs-pair, .cs-more__cards { grid-template-columns: 1fr; }
  .cs-credits__rows div, .cs-facts div { grid-template-columns: 1fr; gap: 6px; }
  .cs-card__row { flex-direction: column; }
  .cs-quote__text { font-size: var(--text-h2); }
}

/* ============================================================
   2. Типографика кейса: плотный интерлиньяж и трекинг
   Интерлиньяж ровно 1 у всех шрифтов (решение 24.10.2026: «везде 1, если что — увеличим»).
   !important — потому что интерлиньяж задан во многих правилах разной силы; где понадобится больше — ставим здесь же, тоже с !important.
   ============================================================ */

.case, .case * { line-height: 1 !important; }
/* мелкий текст (пояснения, подписи, факты, аккордеон) — 1.2: при 1 строки слипаются (решение 29.10.2026) */
.case :is(.small, .caption, .points li p + p, .acc-body, .cs-facts2 dd, .cs-facts dd, .cs-credits__rows dd, .cs-note, .prose--muted p, .cs-ca__copy .prose p, .hp-ba figcaption, .info__text) { line-height: 1.2 !important; }

/* трекинг основного шрифта: -0.005em в site.css → -0.025em */
.case { letter-spacing: -0.025em; }
.case .lead { letter-spacing: -0.025em; }                      /* -0.01em */
.case .small { letter-spacing: -0.02em; }                      /* 0 — тот же основной шрифт, мельче */
.case .caption,
.case .ph__summary { letter-spacing: -0.015em; }               /* 0 */

/* ===== Первый экран (24.10.2026) ===== */
/* первый экран сокращён (25.10.2026): название, краткое описание и результаты; тегов и роли нет.
   Результаты — крупно, размером h3 (24–32 px; было 14 px, потом 20–24 px), отступ от описания — 64 px (gap 16 + 48) */
.case .ph__results { margin-top: 48px; font-size: var(--text-h3); letter-spacing: -0.02em; color: var(--ink); }
/* колонка справа от обложки — не уже 360 px, а до края экрана, чтобы каждый результат стоял в одну строку */
@media (min-width: 901px) {
  .case .ph__bottom { width: calc(50% - var(--mw) / 2 - var(--side-gap) - var(--gutter)); }
  .case .ph__summary { max-width: 400px; }
  .case .ph__results { white-space: nowrap; font-size: min(var(--text-h3), 2.1vw); }
}
/* при раскрытии обложки тексты гаснут сразу и быстро, и уходят под растущую картинку.
   Раньше, если прокрутить в первые 2 с после загрузки, побеждало правило появления (.ph.is-intro: 1,2 с с задержкой 0,5 с)
   и текст оставался поверх уже раскрытой обложки — «через раз». Сила селектора выше обоих правил site.css */
.case .ph.is-open [data-ph-fade] { opacity: 0; transition: opacity 200ms ease 0ms; transition-delay: 0ms; }
.case .ph.is-open .ph__caption,
.case .ph.is-open .ph__bottom,
.case .ph.is-open .ph__top,
.case .ph.is-open .ph__foot { z-index: 1; }
/* описание на первом экране крупнее (25.10.2026): 15–16 px → 20–24 px (размер заголовка пункта); результаты остаются крупнее — 24–32 px */
.case .ph__summary { font-size: var(--text-title); letter-spacing: -0.015em; color: var(--ink-2); }

/* ============================================================
   3. Блоки кейса: факты, сводка, аккордеон, цифры, слайдер, следующий кейс
   ============================================================ */

/* факты о проекте: две колонки на всю ширину */
.cs-facts2 { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(24px, 3.4vw, 56px); margin: 0; }
.cs-facts2 div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 20px 0 22px; border-top: 1px solid var(--line); }
.cs-facts2 div:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
.cs-facts2 dt { padding-top: 4px; }
.cs-facts2 dd { margin: 0; font-size: var(--text-body); line-height: 1.5; color: var(--ink-2); }

/* сводка: три колонки, заголовок и короткий текст, как How I work на главной */
.cs-glance { padding-top: var(--section); }
.cs-glance > .label { text-align: center; margin-bottom: var(--block); }
.cs-glance .ruler-cols { align-items: start; }
.cs-glance .ruler-cols > div { padding: 0 clamp(16px, 2vw, 32px); }
.cs-glance .ruler-cols .small { color: var(--ink-2); }

/* обложка: описание главнее результатов */
.case .ph__summary { font-size: var(--text-h3); line-height: 1.25; letter-spacing: -0.02em; color: var(--ink); }
.case .ph__results { margin-top: 24px; font-size: var(--text-lead); line-height: 1.4; letter-spacing: -0.01em; color: var(--muted); }
@media (min-width: 901px) {
  .case .ph__summary { max-width: 440px; font-size: min(var(--text-h3), 2.1vw); }
  .case .ph__results { font-size: var(--text-lead); }
}

/* тело кейса */
.cs-layout { padding-top: var(--section); }
.cs-layout .cs-flow { padding-top: 0; }
.cs-body.is-summary .cs-layout { display: none; }
.cs-body.is-summary .cs-info__lead--keep { display: grid; }

/* саммари (04-тексты/тексты-кейс-forward-саммари.md): видно только в режиме Summary,
   заменяет строки фактов и сводку At a glance */
.cs-sum { display: none; padding-top: var(--section); }
.cs-body.is-summary .cs-sum { display: block; }
.cs-body.is-summary .cs-glance { display: none; }
.cs-sum__flow { display: grid; gap: 20px; }
.cs-sum__flow > .cs-tc:first-child { padding-top: 0; }
.cs-sum .cs-facts2 { display: grid; grid-column: auto; grid-template-columns: 1fr; }
.cs-sum .cs-facts2 div:nth-last-child(2) { border-bottom: 0; }
.cs-sum .cs-facts2 div:last-child { border-bottom: 1px solid var(--line); }
.cs-sum__nums dt { padding-top: 0; font-size: var(--text-title); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink); }
.cs-sum__nums dd { padding-top: .2em; }
.cs-sum .cs-results__value { font-size: var(--text-h2); }
.cs-sum__more { margin-top: var(--stack); }

/* вводный текст раздела: крупнее основного */
.cs-lead p { font-size: var(--text-title); line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-2); }
.cs-lead p + p { margin-top: .6em; }
/* текст шире: колонка с 6-й, вводный текст на всю колонку */
@media (min-width: 961px) { .cs-tc__body { grid-column: 6 / 13; } }
.cs-tc__body .prose { max-width: none; }
.cs-tc__body .prose:not(.cs-lead) p + p { margin-top: .6em; }
.cs-tc__body .prose--muted { color: var(--muted); }

/* раскрывающийся список с плюсом справа */
.cs-acc { max-width: none; margin-top: 16px; }
.cs-acc .acc-row:first-child { border-top: 1px solid var(--line); }
.cs-acc .acc-row summary { padding: 20px 0; }
.cs-acc__t { display: grid; gap: 6px; font-size: var(--text-lead); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); }
.cs-acc .acc-body { font-size: var(--text-small); line-height: 1.55; max-width: 60ch; padding-bottom: 24px; color: var(--ink-2); }
.cs-acc .acc-body p + p, .cs-acc .acc-body p + ul, .cs-acc .acc-body ul + p { margin-top: 10px; }
.cs-acc .acc-body ul { margin: 0; padding-left: 1.1em; }
.cs-acc .acc-body li + li { margin-top: 6px; }
.cs-acc .acc-body b { font-weight: 500; color: var(--ink); }
/* подпункты внутри раскрытого блока: заголовок отдельной строкой, текст серым под ним */
.cs-acc .acc-body { font-size: 18px; } /* ровно 18 px на всех ширинах (29.10.2026) */
.cs-acc .acc-body .cs-sub { list-style: none; padding: 0; margin: 20px 0 0; }
.cs-acc .cs-sub li { padding: 16px 0; border-top: 1px solid var(--line); color: var(--muted); }
.cs-acc .cs-sub li + li { margin-top: 0; }
.cs-acc .cs-sub b { display: block; margin-bottom: 4px; font-size: var(--text-lead); font-weight: 400; letter-spacing: -0.01em; color: var(--ink); }

.cs-media { margin-top: var(--block); }
.cs-media + .cs-media { margin-top: 20px; }
.cs-note { margin-top: var(--stack); color: var(--muted); max-width: 44em; font-size: var(--text-caption); line-height: 1.5; }

/* место под картинку, которой ещё нет */
.cs-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 32px; text-align: center; color: var(--faint); font-size: var(--text-small); line-height: 1.5; }
.cs-ph span { max-width: 36em; }

.cs-quote__text { max-width: 24em; }

/* карточка варианта: слайдер и список */
.cs-finding { margin-top: var(--block); align-items: start; }
.cs-finding__ba .hp-ba__tag--before { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.cs-finding__ba .hp-ba__tag--after { background: var(--ink); color: #fff; }
.cs-finding__ba .hp-ba__knob { border: 1px solid var(--line); box-shadow: 0 6px 24px -12px rgba(24, 24, 27, .18); }
.cs-finding__ba .hp-ba__knob svg { position: static; width: 12px; height: 10px; }
.cs-finding .cs-acc, .cs-finding__label + .cs-acc { margin-top: 12px; }
.cs-finding .cs-ca__copy { grid-row: 1; }
@media (max-width: 960px) { .cs-finding .cs-ca__copy { grid-row: auto; } }

/* цифры: изменение в процентах, над линейкой */
.cs-results { margin-top: var(--section); text-align: center; }
.cs-results > .label { margin-bottom: var(--block); }
.cs-results--early { margin-top: var(--block); }
.cs-results__value { font-size: var(--text-metric); line-height: 1; letter-spacing: -0.03em; margin-bottom: 20px; display: inline-flex; align-items: flex-start; gap: 4px; }
.cs-results__value small { font-size: var(--text-title); letter-spacing: -0.01em; color: var(--muted); margin-top: .35em; }
.cs-results__note { max-width: 44em; margin: 24px auto 0; color: var(--muted); }
.cs-results .ruler-cols > div { padding: 0 16px; }

.cs-tc__body .points--num { margin-top: 16px; }
.cs-tc__body .points li p + p { max-width: 34em; color: var(--muted); }

/* следующий кейс */
/* две карточки в ряд, на телефоне друг под другом (.cs-more__cards выше) */
.cs-next > .label { margin-bottom: var(--stack); }

@media (max-width: 720px) {
  .cs-facts2 { grid-template-columns: 1fr; }
  .cs-facts2 div { grid-template-columns: 1fr; gap: 6px; }
  .cs-facts2 div:nth-last-child(2) { border-bottom: 0; }
  .cs-glance .ruler-cols { text-align: left; gap: 0; }
  .cs-glance .ruler-cols > div { padding: 20px 0; border-top: 1px solid var(--line); }
  .cs-glance > .label { text-align: left; }
  .cs-glance .ruler-cols .small { margin: 0; max-width: none; }
}

/* ============================================================
   Страница сертификатов (site/certificates/): без обложки, карточки по три в ряд
   ============================================================ */
.certs-head { padding-top: calc(var(--section) + 24px); display: grid; gap: 28px; justify-items: start; }
.certs-head__lead { max-width: 30em; color: var(--ink-2); }
.certs-sec { padding-left: var(--gutter); padding-right: var(--gutter); padding-bottom: 0; }
.certs-sec:last-of-type { padding-bottom: var(--section); }
.cert-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 20px; margin-top: var(--block); }
.cert .frame { aspect-ratio: var(--ar, 4 / 3); }
@media (max-width: 960px) { .cert-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 720px) { .cert-grid { grid-template-columns: 1fr; gap: 32px; } }