/* Страницы кейсов: общие стили (шаблон — portfolio-2026/case-template.md). Подключается после site.css. */
  /* ---------- Страница кейса ---------- */
  .case-hero { padding-top: clamp(28px, 5vw, 72px); }
  .back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); transition: color .2s; }
  .back:hover { color: var(--ink); }
  .case-kicker { margin-top: clamp(24px, 3vw, 40px); }
  .case-kicker span { white-space: nowrap; } /* годы «2023–2025» не рвутся на тире */
  .case-h1 {
    margin-top: 12px; font-weight: 600; font-size: clamp(40px, 6vw, 88px);
    line-height: 1.02; letter-spacing: -0.035em; max-width: 15ch;
  }
  /* русские слова длиннее: заголовок шире, чтобы не рассыпался на пять строк */
  :root:lang(ru) .case-h1 { max-width: 19ch; }
  .case-lede { margin-top: 20px; font-size: clamp(19px, 1.8vw, 24px); line-height: 1.4; color: var(--muted); max-width: 44ch; }
  .case-meta {
    margin-top: clamp(32px, 4vw, 56px); padding-top: 20px; border-top: 1px solid var(--line);
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px 24px;
  }
  .case-meta dt, .glance dt, .ctx dt, .why .mono, .dropped > .mono { color: var(--muted); }
  .case-meta dd { margin-top: 4px; font-weight: 500; }
  .case-cover { margin-top: clamp(32px, 4vw, 56px); margin-bottom: 0; }
  .case-cover img { height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius); }

  /* коротко: три строки, которые читаются за 10 секунд */
  .glance { margin-top: clamp(56px, 7vw, 104px); }
  .glance > div {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 8px 24px;
    padding: 20px 0; border-top: 1px solid var(--line);
  }
  .glance > div:last-child { border-bottom: 1px solid var(--line); }
  .glance dt { padding-top: 8px; }
  .glance dd { font-size: clamp(20px, 2vw, 28px); line-height: 1.3; letter-spacing: -0.015em; font-weight: 500; max-width: 36ch; }

  /* тело кейса: оглавление слева, текст и картинки справа */
  .case-body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; margin-top: clamp(72px, 9vw, 136px); }
  .case-toc { grid-column: 1 / span 2; position: sticky; top: 96px; align-self: start; display: grid; gap: 10px; font-size: 14px; }
  .case-toc a { color: var(--muted); transition: color .2s; }
  .case-toc a:hover, .case-toc a.on { color: var(--ink); }
  .case-toc a.on::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 8px 3px 0; background: var(--accent); vertical-align: middle; }
  /* ширина текста кейса (решение Augustinas 20.10): не шире 880 px — это 93% колонки на большом экране (942 px).
     Где колонка уже (ноутбук до ~1280 px, планшет, телефон), строка и так короче — там текст на всю её ширину. Один правый
     край у абзацев, «Контекста», фактов, выводов и подписей в обоих языках; строка длиннее рекомендованных 80 знаков
     осознанно. Мера считается от колонки (cqi), поэтому вложенные блоки не сужаются */
  .case-flow { grid-column: 4 / span 9; min-width: 0; container-type: inline-size; --measure: min(100cqi, 880px); }
  .case-flow > section { scroll-margin-top: 96px; }
  .case-flow > section + section { margin-top: clamp(64px, 7vw, 100px); }
  .case-flow h2 { margin-bottom: 20px; }
  .case-flow p { max-width: var(--measure); }
  .case-flow figure { margin: 0; }
  .case-flow figure img { height: auto; border-radius: var(--radius); }
  .case-flow figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); max-width: var(--measure); }

  .ctx { display: grid; gap: 16px; max-width: var(--measure); }
  .ctx > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; }

  .decision + .decision { margin-top: clamp(64px, 8vw, 104px); }
  .decision h3 { font-weight: 600; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 20px; }
  .why { margin-top: 28px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 40px; }
  .why p { margin-top: 6px; }
  .dropped { margin-top: 32px; }
  .opts { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* отброшенные варианты приглушены: видно, что от них отказались */
  .opts img { aspect-ratio: 4 / 3; border-radius: 10px; filter: grayscale(.6); opacity: .85; }
  .opts figcaption { display: flex; gap: 6px; align-items: baseline; }
  .dropped .fit-row img { filter: grayscale(.6); opacity: .85; } /* отброшенные кадры приглушены, как варианты в .opts */
  .opts figcaption i { color: var(--accent); flex: none; }

  .details-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .details-grid img { aspect-ratio: 4 / 3; }

  .stats { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 40px; align-items: end; }
  .num { display: block; font-weight: 600; letter-spacing: -0.05em; line-height: .9; }
  .stat-main .num { font-size: clamp(80px, 11vw, 160px); }
  .stat-side { display: grid; gap: 28px; }
  .stat-side .num { font-size: clamp(40px, 4.4vw, 60px); }
  .stat .lbl { display: block; margin-top: 10px; color: var(--muted); max-width: 32ch; }
  .case-flow .case-quote { margin-top: clamp(48px, 6vw, 80px); padding-top: 32px; border-top: 1px solid var(--line); }
  .case-quote blockquote { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.35; letter-spacing: -0.015em; max-width: 32ch; }
  .case-quote figcaption { font-size: 15px; }

  .takeaways { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; }
  .takeaways li { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; max-width: var(--measure); padding-left: 28px; position: relative; }
  .takeaways li::before { content: ""; position: absolute; left: 0; top: .62em; width: 14px; height: 2px; background: var(--accent); }
  .takeaways strong { font-weight: 600; }

  .next-case { display: block; margin-top: clamp(96px, 12vw, 160px); color: inherit; }
  .next-case .next-img { border-radius: var(--radius); overflow: hidden; aspect-ratio: 3 / 1; }
  .next-case .next-img img { transition: transform .8s var(--ease); }
  .next-case:hover .next-img img { transform: scale(1.015); }
  .next-row { margin-top: 18px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; }
  .next-title { font-weight: 600; font-size: clamp(24px, 3vw, 40px); letter-spacing: -0.03em; line-height: 1.1; }
  .next-row i { font-size: 28px; transition: transform .3s var(--ease); }
  .next-case:hover .next-row i { transform: translateX(4px); }
  /* соседние кейсы парой: предыдущий слева со стрелкой назад, следующий справа; на телефоне следующий — первым */
  .case-nav { margin-top: clamp(96px, 12vw, 160px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px); align-items: start; }
  .case-nav .next-case { margin-top: 0; }
  .case-nav .next-img { aspect-ratio: 16 / 9; }
  .case-nav .next-title { font-size: clamp(20px, 2vw, 28px); }
  .prev-case .next-row { justify-content: flex-start; }
  .prev-case:hover .next-row i { transform: translateX(-4px); }
  .case-page .contact { margin-top: clamp(96px, 12vw, 160px); }

  /* ---------- Наполнители отступов: голос пользователя, заметки на полях, наброски из скетчбука ---------- */
  .voice-row { margin-top: clamp(64px, 8vw, 112px); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .voice-row + .case-body { margin-top: clamp(64px, 8vw, 112px); }
  .voice-row .voice { grid-column: 4 / span 8; }
  .voice { margin: 0; }
  .voice blockquote { font: 400 clamp(28px, 3.4vw, 46px)/1.2 "Shantell Sans", var(--font); max-width: 24ch; }
  .voice figcaption { margin-top: 14px; color: var(--muted); }
  .case-flow .sketch-cap { margin-top: 12px; font: 400 18px/1.35 "Shantell Sans", var(--font); color: var(--muted); }
  /* ритм: наполнитель встаёт в отступ, не раздувая его вдвое */
  .case-flow > .filler { margin-top: clamp(56px, 7vw, 88px); }
  .case-flow > .filler + section { margin-top: clamp(56px, 7vw, 88px); }
  .decision + .filler, .filler + .decision { margin-top: clamp(48px, 6vw, 80px); }

  @media (max-width: 899px) {
    .case-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .glance > div, .ctx > div { grid-template-columns: 1fr; }
    .glance dt { padding-top: 0; }
    .case-toc { display: none; }
    .case-flow { grid-column: 1 / -1; }
    .why, .details-grid, .stats { grid-template-columns: 1fr; }
    .opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
    .opts figcaption { font-size: 12px; }
    .voice-row .voice { grid-column: 1 / -1; }
  }

  /* ---------- Дополнения для страниц настоящих кейсов ---------- */
  /* обложка: видео первого экрана на десктопе и телефоне рядом, на тонированной подложке */
  .case-cover--duo {
    display: grid; grid-template-columns: minmax(0, 3.3fr) minmax(0, 1fr); gap: clamp(14px, 2.4vw, 36px); align-items: center;
    padding: clamp(18px, 3.6vw, 52px); border-radius: var(--radius); background: var(--cover-tint, var(--surface));
  }
  .case-cover--duo video, .case-cover .case-cover--duo img { height: auto; border-radius: 12px; box-shadow: 0 22px 44px -28px rgb(0 0 0 / .45); }
  .case-cover .case-cover--duo img { aspect-ratio: auto; }
  .case-cover--duo .phone, .case-cover .case-cover--duo img.phone { border-radius: 16px; }
  /* обложка из двух кадров один под другим на той же подложке */
  .case-cover--stack {
    display: grid; gap: clamp(12px, 2vw, 28px); padding: clamp(18px, 4vw, 56px) clamp(18px, 7vw, 104px);
    border-radius: var(--radius); background: var(--cover-tint, var(--surface));
  }
  .case-cover .case-cover--stack img { height: auto; aspect-ratio: auto; border-radius: 12px; box-shadow: 0 22px 44px -28px rgb(0 0 0 / .45); }
  /* «было / стало»: два кадра рядом с подписью над каждым */
  /* подпись под парой или сеткой кадров — как подпись под одиночной картинкой */
  .case-flow .cap { margin-top: 10px; font-size: 14px; color: var(--muted); max-width: var(--measure); }
  .compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .compare figcaption { margin: 0 0 8px; }
  .compare img { border-radius: 10px; }
  /* выбранный вариант среди отброшенных — без приглушения и с обводкой */
  .opts .chosen img { filter: none; opacity: 1; outline: 2px solid var(--accent); outline-offset: 3px; }
  .opts .chosen figcaption i { color: var(--accent); }
  .grid-2 { margin-top: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grid-2 img { border-radius: 10px; }
  /* ряд кадров разной формы одной высоты (21.10): у кадра --r = ширина / высота, ширина ряда делится по ним */
  .fit-row { display: flex; gap: 16px; align-items: flex-start; }
  .fit-row > figure { flex: var(--r) 1 0; min-width: 0; }
  /* длинная страница целиком: видна верхняя часть, низ растворяется в фоне */
  .tall { position: relative; max-height: min(80vh, 860px); overflow: hidden; border-radius: var(--radius); }
  .tall::after { content: ""; position: absolute; inset: auto 0 0 0; height: 28%; background: linear-gradient(to bottom, transparent, var(--bg)); }
  /* метрики продукта: три числа в ряд над цифрами процесса (пока примеры с пунктиром .tbd) */
  .metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px;
    padding: 24px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .metric .num { display: inline-block; font-weight: 600; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.04em; line-height: 1.05; }
  .metric .lbl { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 28ch; }
  .facts-list { margin: 24px 0 0; padding: 0; list-style: none; display: grid; gap: 14px; }
  .facts-list li { padding-left: 28px; position: relative; max-width: var(--measure); }
  .facts-list li::before { content: ""; position: absolute; left: 0; top: .7em; width: 14px; height: 2px; background: var(--accent); }
  /* то, что ещё надо подтвердить: пунктир и подсказка. Для автора — перед публикацией снять */
  .tbd { text-decoration: underline dotted color-mix(in srgb, var(--accent) 80%, transparent) 1.5px; text-underline-offset: 4px; cursor: help; }
  /* белый скриншот на светлом фоне: тонкий контур, чтобы край не терялся */
  .shot { box-shadow: 0 0 0 1px var(--line); }
  /* отброшенные варианты парой, когда у решения их два */
  .opts--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* переключатель кадров (case.js): пилюля с кнопками, как переключатель языка; кадры сменяются наплывом */
  .switch-tabs { display: inline-flex; flex-wrap: wrap; padding: 3px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 999px; }
  .switch-tabs button {
    padding: 8px 14px; border: 0; border-radius: 999px; background: none; color: var(--muted); cursor: pointer;
    font: 500 12px/1 var(--mono); letter-spacing: .04em; transition: background-color .2s, color .2s;
  }
  .switch-tabs button:hover { color: var(--ink); }
  .switch-tabs button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .switch-tabs button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .switch-frames { display: grid; }
  .switch-frames > img { grid-area: 1 / 1; opacity: 0; transition: opacity .45s var(--ease); }
  .switch-frames > img.on { opacity: 1; }
  /* мелкие состояния интерфейса — каждое в натуральную величину (--w) на тонированной подложке */
  .ui-board {
    margin-top: 24px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
    grid-template-areas: "a b" "a c" "d d";
  }
  .ui-board figure { display: flex; flex-direction: column; }
  .ui-board .panel {
    flex: 1; display: grid; place-items: center; padding: clamp(16px, 2.6vw, 36px);
    border-radius: var(--radius); background: var(--cover-tint, var(--surface));
  }
  .case-flow .ui-board .panel img { width: min(100%, var(--w)); border-radius: 10px; box-shadow: 0 14px 30px -22px rgb(0 0 0 / .45); }
  /* те же подложки без раскладки по областям: парой или столбиком */
  .ui-board.ui-board--pair { grid-template-areas: none; }
  .ui-board.ui-board--stack { grid-template-columns: minmax(0, 1fr); grid-template-areas: none; }
  /* одиночный отброшенный вариант — во всю ширину, в своих пропорциях */
  .opts.opts--wide { grid-template-columns: minmax(0, 1fr); }
  .opts--wide img { aspect-ratio: auto; }
  /* отброшенные кадры парой, но в своих пропорциях (окно и баннер не режутся под 4:3) */
  .opts.opts--free { align-items: start; }
  .opts--free img { aspect-ratio: auto; }
  /* обложка из нескольких экранов телефона в ряд на той же подложке */
  .case-cover--row {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 28px);
    padding: clamp(16px, 4vw, 56px) clamp(16px, 6vw, 88px); border-radius: var(--radius); background: var(--cover-tint, var(--surface));
  }
  .case-cover .case-cover--row img { height: auto; aspect-ratio: auto; border-radius: clamp(8px, 1.4vw, 20px); box-shadow: 0 22px 44px -28px rgb(0 0 0 / .45); }
  /* экраны телефона в тексте: ряд кадров с подписями; отброшенные — тем же рядом, приглушённые */
  .phones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .case-flow .phones img { border-radius: 16px; }
  .phones.phones--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phones.phones--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66%; }
  .opts.opts--phones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .opts--phones img { aspect-ratio: auto; border-radius: 16px; }
  /* полная версия под паролем */
  .case-flow .locked { display: flex; gap: 10px; align-items: baseline; margin-top: 32px; padding: 16px 20px; max-width: 62ch;
    border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); }
  .locked i { flex: none; color: var(--accent); }
  /* «было / стало» таблицей */
  .ba { width: 100%; margin-top: 32px; border-collapse: collapse; }
  .ba th, .ba td { padding: 14px 20px 14px 0; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
  .ba thead th { padding-top: 0; border-top: 0; font: 400 13px/1.4 var(--mono); color: var(--muted); }
  .ba tbody th { width: 30%; font-weight: 500; }
  .ba td:nth-child(2) { width: 28%; color: var(--muted); }
  @media (prefers-reduced-motion: reduce) {
    .switch-frames > img { transition: none; }
  }
  @media (max-width: 899px) {
    .metrics { grid-template-columns: 1fr; gap: 20px; }
    .case-nav { grid-template-columns: 1fr; }
    .case-nav .next-case:not(.prev-case) { order: -1; }
    .case-cover--duo { grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr); }
    .compare, .grid-2 { grid-template-columns: 1fr; }
    .ui-board { grid-template-columns: 1fr; grid-template-areas: "a" "b" "c" "d"; }
    .ui-board.ui-board--pair { grid-template-areas: none; }
    .phones.phones--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .phones.phones--2 { max-width: none; }
    /* таблица «было / стало» на телефоне — строка за строкой, с подписями столбцов */
    .ba thead { display: none; }
    .ba, .ba tbody, .ba tr, .ba th, .ba td { display: block; }
    .ba tbody th, .ba td:nth-child(2) { width: auto; }
    .ba tr { padding: 14px 0; border-top: 1px solid var(--line); }
    .ba th, .ba td { padding: 0; border: 0; }
    .ba td { margin-top: 6px; }
    .ba td::before { content: attr(data-label); margin-right: 8px; font: 400 12px var(--mono); color: var(--muted); }
  }

  /* ---------- Телефон: картинки крупнее (20.10) ---------- */
  /* обзор страницы целиком (.overview-full) — на десктопе и планшете; на телефоне вместо него колонки лентой */
  .overview-cols { display: none; }
  @media (max-width: 599px) {
    /* лента со свайпом (.swipe): ряд картинок идёт по одной на ~3/4 ширины, следующая выглядывает из-за края;
       лента — от края до края экрана. На планшете и десктопе у ряда прежняя сетка */
    .swipe {
      display: flex; gap: 12px; align-items: start; overflow-x: auto; overscroll-behavior-x: contain;
      scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none;
      margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter);
    }
    .swipe::-webkit-scrollbar { display: none; }
    .swipe > * { flex: 0 0 78%; min-width: 0; scroll-snap-align: start; }
    .opts.swipe figcaption { font-size: 14px; }
    /* ряд кадров разной формы — лентой одной высоты; широкий кадр не шире экрана */
    .fit-row.swipe > figure { flex: none; width: min(calc(220px * var(--r)), 88%); }

    .shot.overview { box-shadow: none; }
    .overview-full { display: none; }
    .overview-cols > img { border-radius: 10px; box-shadow: 0 0 0 1px var(--line); }

    /* обложка (.case-cover--crop вместе с .swipe): каждый кадр — своя карточка в ленте (.duo-part), кадры и ролики
       не наезжают друг на друга, следующая карточка выглядывает из-за края. Высота карточек — --ratio от их ширины;
       экран телефона (.phone) — во всю высоту карточки, остальные кадры — во всю ширину. Срез кадра: --crop (пропорция)
       и --pos (какая часть видна); у телефона — --crop-phone (например, только первый экран). Один кадр — во всю ширину */
    .case-cover--crop.swipe { --card: calc((100vw - 2 * var(--gutter)) * .88); --h: calc(var(--card) * var(--ratio, 1.1));
      background: none; border-radius: 0; }
    .case-cover--crop > .duo-part { flex: none; width: var(--card); height: var(--h); display: grid; place-items: center;
      padding: 14px; border-radius: var(--radius); background: var(--cover-tint, var(--surface)); }
    .case-cover--crop > .duo-part:has(> .phone) { width: auto; }
    .case-cover--crop > .duo-part:only-child { width: 100%; height: auto; }
    .case-cover .case-cover--crop .duo-part > :not(.phone) { width: 100%; height: auto; max-height: 100%;
      aspect-ratio: var(--crop, auto); object-fit: cover; object-position: var(--pos, 50% 50%); }
    .case-cover .case-cover--crop .phone { width: auto; height: calc(var(--h) - 28px); aspect-ratio: var(--crop-phone, auto);
      object-fit: cover; object-position: top; }

    /* ряды экранов телефона (.swipe--tall) — уже, чтобы высокий экран не занимал весь экран */
    .swipe--tall > * { flex-basis: 66%; }
  }

  /* картинка кейса на весь экран — на телефоне и планшете (см. case.js):
     сначала целиком, нажатие — крупно, с прокруткой пальцем, ещё нажатие — снова целиком */
  .zoom { width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden;
    background: #0e100e; color: #fff; }
  .zoom:focus { outline: none; }
  .zoom::backdrop { background: transparent; }
  .zoom-pan { width: 100%; height: 100%; overflow: auto; overscroll-behavior: contain; display: grid; place-items: center; }
  .zoom-pan img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; cursor: zoom-in; }
  /* крупно: картинка шире экрана — прокрутка с левого верхнего угла; ниже экрана — по центру высоты */
  .zoom.is-big .zoom-pan { place-items: start; }
  .zoom.is-big .zoom-pan img { width: var(--big); max-width: none; max-height: none; margin: auto; cursor: zoom-out; }
  .zoom-close { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: rgb(255 255 255 / .16); color: #fff; font-size: 22px; }
  .zoom-hint { position: fixed; left: 50%; bottom: 18px; translate: -50% 0; padding: 7px 14px; border-radius: 999px;
    background: rgb(0 0 0 / .62); font-size: 13px; color: #fff; white-space: nowrap; pointer-events: none; }
  .zoom.is-big .zoom-hint { display: none; }
  html.zoom-open { overflow: hidden; }
  @media (max-width: 899px) { .case-flow img { cursor: zoom-in; } }