/* Страница кейса — шаблон «воздушный скролл + лента». Макет Figma: кадр 2429:3 (МТС) и секция 2435:2.
   Цифры = пиксели макета, умножены на --u (1/1440 экрана, не больше 1.25px).
   Страницы собирает _scripts/build_cases.py, руками их не правим. */
:root {
  --bg: #ebebe9;
  --ink: #111;
  --col: rgba(17, 17, 17, .08);
  --rule: rgba(17, 17, 17, .2);
  --u: min(calc(100vw / 1440), 1.25px);
  --sans: "Geist", system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
p, h1, figure { margin: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
.mono { font-family: var(--mono); font-weight: 400; }

/* направляющие и шапка — как на главной */
.cols { position: fixed; top: 0; bottom: 0; left: 50%; width: calc(1440 * var(--u)); transform: translateX(-50%); pointer-events: none; z-index: 0; }
.cols i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--col); }
.cols i:nth-child(1) { left: calc(80 * var(--u)); } .cols i:nth-child(2) { left: calc(540 * var(--u)); }
.cols i:nth-child(3) { left: calc(1000 * var(--u)); } .cols i:nth-child(4) { left: calc(1360 * var(--u)); }
.top { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: calc(1440 * var(--u)); height: calc(84 * var(--u)); z-index: 30; background: var(--bg); }
.top__logo { position: absolute; left: calc(80 * var(--u)); top: calc(34 * var(--u)); font-weight: 500; font-size: calc(26 * var(--u)); letter-spacing: -.02em; line-height: 1; }
.top__nav { position: absolute; right: calc(80 * var(--u)); top: calc(42 * var(--u)); display: flex; gap: calc(32 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1; }
.top__back { position: absolute; left: calc(540 * var(--u)); top: calc(42 * var(--u)); font-size: calc(12 * var(--u)); line-height: 1; padding: 6px 0; margin-top: -6px; }
.top__back:hover { text-decoration: underline; text-underline-offset: 3px; }
.top__nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.top__nav .lang { display: flex; gap: calc(10 * var(--u)); }

/* ---- шапка: переключатель языка (бегунок едет к выбранному языку) ---- */
.top__nav { top: calc(35 * var(--u)); align-items: center; }
.top__nav .lang { position: relative; display: inline-flex; align-items: stretch; gap: 0; height: calc(26 * var(--u)); margin-left: calc(20 * var(--u)); padding: 2px; border: 1px solid var(--ink); isolation: isolate; }
.top__nav .lang::before { content: ""; position: absolute; z-index: -1; left: 2px; top: 2px; bottom: 2px; width: calc(50% - 2px); background: var(--ink); transition: transform .3s cubic-bezier(.3, .7, .2, 1); }
.top__nav .lang[data-cur="en"]::before { transform: translateX(100%); }
.top__nav .lang a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-width: calc(34 * var(--u)); padding: 0 calc(8 * var(--u)); transition: color .3s, opacity .15s; }
.top__nav .lang a.is-cur { color: var(--bg); }
.top__nav .lang a:hover { text-decoration: none; }
.top__nav .lang a:not(.is-cur):hover { opacity: .55; }

/* «все работы» — кнопка, как теги внизу страницы */
.top__back { top: calc(31 * var(--u)); margin-top: 0; display: inline-flex; align-items: center; height: calc(34 * var(--u)); padding: 0 calc(16 * var(--u)); border: 1px solid var(--ink); transition: background-color .15s, color .15s; }
.top__back:hover { background: var(--ink); color: var(--bg); text-decoration: none; }

/* страница: рамка 1440u, высота задана макетом (--h) */
.case { position: relative; width: calc(1440 * var(--u)); height: calc(var(--h) * var(--u)); margin: 0 auto; }
.case > * { position: absolute; }

/* шапка кейса */
.year, .tag-top { top: calc(140 * var(--u)); font-size: calc(16 * var(--u)); line-height: calc(22 / 16); }
.year { left: calc(80 * var(--u)); }
.tag-top { right: calc(80 * var(--u)); text-align: right; }
.title { left: calc(540 * var(--u)); top: calc(110 * var(--u)); font-weight: 500; font-size: calc(96 * var(--u)); line-height: calc(104 / 96); letter-spacing: -.026em; white-space: nowrap; }
.title--2 { line-height: calc(93 / 96); }

/* текст: подпись <...> и абзац */
.txt { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(min(var(--w, 380), 1360 - var(--x)) * var(--u)); }
.txt__l { display: block; font-size: calc(13 * var(--u)); line-height: calc(20 / 13); margin-bottom: calc(8 * var(--u)); }
.txt p { font-weight: 200; font-size: calc(18 * var(--u)); line-height: calc(24 / 18); }
.txt p + p { margin-top: calc(24 * var(--u)); }

/* фото с уголками (уголок 8px, на 4px снаружи кадра) */
.ph { position: relative; display: block; cursor: zoom-in; }
@media (hover: hover) { .ph { cursor: none; } }
.ph .im { position: absolute; inset: 0; overflow: hidden; }
.ph img, .ph video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); user-select: none; -webkit-user-drag: none; }
.ph video { background: #000; }
.ph .im--crop img { position: absolute; width: var(--cw); height: var(--ch); left: var(--cl); top: var(--ct); max-width: none; }
.ph i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); pointer-events: none; transition: transform .25s ease; }
.ph .c1 { left: -4px; top: -4px; border-width: 1px 0 0 1px; }
.ph .c2 { right: -4px; top: -4px; border-width: 1px 1px 0 0; }
.ph .c3 { left: -4px; bottom: -4px; border-width: 0 0 1px 1px; }
.ph .c4 { right: -4px; bottom: -4px; border-width: 0 1px 1px 0; }
@media (hover: hover) {
  .ph:hover .c1 { transform: translate(-8px, -8px); } .ph:hover .c2 { transform: translate(8px, -8px); }
  .ph:hover .c3 { transform: translate(-8px, 8px); } .ph:hover .c4 { transform: translate(8px, 8px); }
}
.hero { left: calc(540 * var(--u)); top: calc(var(--y) * var(--u)); width: calc(820 * var(--u)); height: calc(520 * var(--u)); }
.hero .patch { position: absolute; left: 0; top: 1px; width: calc(24 * var(--u)); height: calc(56 * var(--u)); background: #1b1d1c; pointer-events: none; }

/* горизонтальная лента: фото одной высоты, зазор 40, последнее торчит за край окна */
/* при наведении фото чуть приближается (5%), в покое показано целиком, без обрезки */
.strip .ph .im > img, .strip .ph .im > video { scale: 1; transition: scale .8s cubic-bezier(.2, .7, .2, 1); }
.hero .im > img, .hero .im > video { transition: scale .9s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) { .strip .ph:hover .im > img, .strip .ph:hover .im > video { scale: 1.05; } .hero:hover .im > img, .hero:hover .im > video { scale: 1.02; } }
.strip { left: calc(80 * var(--u) - 16px); top: calc(var(--y) * var(--u) - 16px); width: calc(50vw + 640 * var(--u) + 16px);
  padding: 16px 0 16px 16px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.strip::-webkit-scrollbar { display: none; }
.strip__track { display: flex; gap: calc(40 * var(--u)); width: max-content; padding-right: calc(80 * var(--u)); }
.strip .ph { flex: none; height: calc(450 * var(--u)); width: calc(var(--w) * var(--u)); }

/* колонка сканов друг над другом (зин «Без брифа»): без рамки-обрезки, без увеличения */
.stack { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); display: flex; flex-direction: column; gap: calc(var(--gap) * var(--u)); }
.stack .ph { width: 100%; aspect-ratio: var(--ar); }
/* ролик на белом фоне «вписывается» в цвет страницы: белое × фон страницы = фон страницы */
.ph video[data-multiply] { mix-blend-mode: multiply; background: none; }

/* нижняя мета: линия, год/роль, креативный директор/формат, теги */
.rule { left: calc(80 * var(--u)); top: calc(var(--y) * var(--u)); width: calc(1280 * var(--u)); height: 1px; background: var(--rule); }
.meta { left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); }
.meta__l { display: block; font-size: calc(13 * var(--u)); line-height: calc(20 / 13); margin-bottom: calc(4 * var(--u)); }
.meta__v { font-size: calc(16 * var(--u)); line-height: calc(22 / 16); }
.tags { display: flex; flex-wrap: wrap; gap: calc(10 * var(--u)); width: calc(360 * var(--u)); margin-top: calc(6 * var(--u)); }
.tags a { display: inline-flex; align-items: center; height: calc(42 * var(--u)); padding: 0 calc(20 * var(--u)); border: 1px solid var(--ink);
  font-size: calc(16 * var(--u)); line-height: 1; white-space: nowrap; transition: background-color .15s, color .15s; }
.tags a:hover { background: var(--ink); color: var(--bg); }

/* следующий проект: чёрный блок на всю ширину окна */
.next { left: 50%; transform: translateX(-50%); top: calc(var(--y) * var(--u)); width: 100vw; height: calc(340 * var(--u)); background: var(--ink); color: var(--bg); display: block; }
.next__in { position: absolute; left: 50%; top: 0; width: calc(1440 * var(--u)); height: 100%; transform: translateX(-50%); }
.next__l { position: absolute; left: calc(80 * var(--u)); top: calc(40 * var(--u)); font-size: calc(13 * var(--u)); line-height: calc(20 / 13); }
.next__t { position: absolute; left: calc(80 * var(--u)); top: calc(84 * var(--u)); font-weight: 500; font-size: calc(96 * var(--u)); line-height: calc(104 / 96); letter-spacing: -.026em; white-space: nowrap; }
.next--1 .next__t { top: calc(120 * var(--u)); }
.next__img { position: absolute; left: calc(1000 * var(--u)); top: calc(40 * var(--u)); width: calc(360 * var(--u)); height: calc(260 * var(--u)); }
.next__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.next__img .im { position: absolute; inset: 0; overflow: hidden; }
.next__img i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--bg); }
.next__img .c1 { left: -4px; top: -4px; border-width: 1px 0 0 1px; } .next__img .c2 { right: -4px; top: -4px; border-width: 1px 1px 0 0; }
.next__img .c3 { left: -4px; bottom: -4px; border-width: 0 0 1px 1px; } .next__img .c4 { right: -4px; bottom: -4px; border-width: 0 1px 1px 0; }
@media (hover: hover) { .next:hover .next__img img { transform: scale(1.04); } }

/* кружок вместо курсора над фото: показывает, что фото можно увеличить */
.zoomtip { position: fixed; left: 0; top: 0; z-index: 60; width: 18px; height: 18px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; opacity: 0; scale: .6; transition: opacity .15s, scale .25s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.zoomtip.is-on { opacity: 1; scale: 1; }
@media (hover: none) { .zoomtip { display: none; } }   /* на телефоне слой с mix-blend-mode тормозит прокрутку */

/* открытое фото: отдельный экран поверх страницы (макет 2431:50) */
.lb { position: fixed; inset: 0; z-index: 50; background: var(--bg); display: none; }
.lb.is-open { display: block; }
.lb .cols { z-index: 0; }
.lb__count, .lb__close, .lb__arrow, .lb__esc { position: absolute; z-index: 2; line-height: 1; }
.lb__count { left: calc(50% - 640 * var(--u)); top: calc(42 * var(--u)); font-size: calc(13 * var(--u)); }
.lb__close { right: calc(50% - 640 * var(--u)); top: calc(40 * var(--u)); font-size: calc(16 * var(--u)); }
.lb__arrow { top: 50%; width: max(44px, calc(56 * var(--u))); height: max(44px, calc(56 * var(--u))); margin-top: calc(max(44px, calc(56 * var(--u))) / -2); border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center; transition: background-color .15s, color .15s; }
.lb__arrow svg { width: 40%; height: auto; display: block; }
.lb__arrow:hover { background: var(--ink); color: var(--bg); }
.lb__prev { left: calc(50% - 640 * var(--u)); } .lb__next { right: calc(50% - 640 * var(--u)); }
.lb__esc { left: 50%; bottom: calc(36 * var(--u)); transform: translateX(-50%); font-size: calc(12 * var(--u)); }
.lb button:focus:not(:focus-visible) { outline: none; }
.lb__close:hover { text-decoration: underline; text-underline-offset: 4px; }
.lb__stage { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(1120 * var(--u)); height: calc(700 * var(--u)); display: flex; align-items: center; justify-content: center; }
.lb__fig { position: relative; display: block; max-width: 100%; max-height: 100%; }
.lb__fig img, .lb__fig video { display: block; max-width: calc(1120 * var(--u)); max-height: calc(700 * var(--u)); width: auto; height: auto; }
.lb__fig { cursor: pointer; }
.lb__fig [hidden] { display: none; }
.lb__fig i { position: absolute; width: 8px; height: 8px; border: 0 solid var(--ink); }
.lb__fig .c1 { left: -8px; top: -8px; border-width: 1px 0 0 1px; } .lb__fig .c2 { right: -8px; top: -8px; border-width: 1px 1px 0 0; }
.lb__fig .c3 { left: -8px; bottom: -8px; border-width: 0 0 1px 1px; } .lb__fig .c4 { right: -8px; bottom: -8px; border-width: 0 1px 1px 0; }
body.lb-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .strip .ph .im > img, .strip .ph .im > video { scale: 1; transition: none; } .ph i, .next__img img, .zoomtip { transition: none; } }

/* ---------- телефон: одна колонка, поля 20px, лента фото листается пальцем ---------- */
@media (max-width: 760px) {
  :root { --u: calc(100vw / 390); --m: 20px; }
  .cols { width: 100%; }
  .cols i:nth-child(n+3) { display: none; }
  .cols i:nth-child(1) { left: var(--m); } .cols i:nth-child(2) { left: calc(100% - var(--m)); }
  .top { left: 0; transform: none; width: 100%; height: 64px; }
  .top__logo { left: var(--m); top: 22px; font-size: 22px; }
  .top__nav { right: var(--m); top: 28px; gap: 14px; font-size: 11px; }
  .top__nav { top: 21px; align-items: center; }
  .top__nav .lang { height: 24px; margin-left: 6px; }
  .top__nav .lang a { min-width: 30px; padding: 0 6px; }
  /* «все работы» закреплена внизу слева: всегда под большим пальцем */
  .top__back { position: fixed; left: var(--m); top: auto; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; margin: 0; padding: 0 16px; height: 40px; display: inline-flex; align-items: center;
    font-size: 12px; background: rgba(235, 235, 233, .96); border: 1px solid var(--ink); }
  .top__back:hover { text-decoration: none; }

  .case { width: 100%; height: auto; padding: 96px var(--m) 0; display: flex; flex-direction: column; }
  .case > * { position: relative; left: auto; top: auto; right: auto; }
  .title { font-size: 13vw; line-height: 1; white-space: normal; }
  .title--2 { line-height: .95; }
  .txt { width: 100%; margin-top: 32px; }
  .txt__l { font-size: 12px; margin-bottom: 8px; }
  .txt p { font-size: 17px; line-height: 24px; }
  .hero { width: 100%; height: auto; aspect-ratio: 820 / 520; margin-top: 32px; flex: none; }
  .strip { width: 100vw; margin: 32px calc(var(--m) * -1) 0; padding: 12px 0 12px var(--m); overscroll-behavior-x: contain; flex: none; }
  .strip__track { gap: 16px; padding-right: var(--m); }
  .strip .ph { height: 300px; width: calc(var(--w) * 300px / 450); }
  .stack { width: 100%; margin-top: 32px; gap: calc(var(--gap) * 1px * .27); }
  .rule { width: 100%; height: 1px; margin: 48px 0 8px; flex: none; }
  .meta { margin-top: 20px; }
  .meta__l { font-size: 12px; } .meta__v { font-size: 16px; }
  .tags { width: 100%; gap: 8px; margin-top: 8px; }
  .tags a { height: 40px; padding: 0 16px; font-size: 15px; }
  .next { width: 100vw; margin: 56px calc(var(--m) * -1) 0; height: auto; padding-bottom: calc(88px + env(safe-area-inset-bottom)); transform: none; left: auto; flex: none; }
  .next__in { position: static; display: block; width: 100%; height: auto; transform: none; padding: 28px var(--m) 0; }
  .next__l { position: static; display: block; font-size: 12px; }
  .next__t, .next--1 .next__t { position: static; display: block; margin-top: 14px; font-size: 11vw; line-height: 1; white-space: normal; }
  .next__img { position: relative; left: auto; top: auto; display: block; width: 100%; height: 52vw; margin-top: 24px; }

  /* открытое фото на телефоне */
  .lb__count { left: var(--m); top: 24px; font-size: 12px; }
  .lb__close { right: var(--m); top: 12px; padding: 12px 0 12px 12px; font-size: 15px; }
  .lb__stage { left: 0; top: 64px; width: 100%; height: calc(100svh - 64px - 104px); transform: none; }
  .lb__fig img, .lb__fig video { max-width: calc(100vw - 2 * var(--m)); max-height: calc(100svh - 64px - 104px - 16px); }
  .lb__arrow { top: auto; bottom: calc(28px + env(safe-area-inset-bottom)); margin-top: 0; width: 48px; height: 48px; }
  .lb__prev { left: var(--m); } .lb__next { right: var(--m); }
  .lb__esc { display: none; }
}

/* касание: фото «раскрывает» уголки, как при наведении мыши, плашки и ссылки отвечают сразу */
@media (hover: none) {
  a, button { -webkit-tap-highlight-color: transparent; }
  .ph:active .c1 { transform: translate(-8px, -8px); } .ph:active .c2 { transform: translate(8px, -8px); }
  .ph:active .c3 { transform: translate(-8px, 8px); } .ph:active .c4 { transform: translate(8px, 8px); }
  .tags a:active, .top__back:active { background: var(--ink); color: var(--bg); transition-duration: .05s; }
  .next:active .next__img img { transform: scale(1.04); }
  .top__nav a:active { opacity: .45; }
}