/* Сайт FALZ. Единица --u = 1 px макета (ширина макета 1920). */

@font-face { font-family: "Source Serif 4"; src: url(../fonts/SourceSerif4-Var.woff2) format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url(../fonts/SourceSerif4-Italic-Var.woff2) format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url(../fonts/BebasNeue-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "LT Superior"; src: url(../fonts/LTSuperior-Regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "LT Superior"; src: url(../fonts/LTSuperior-Medium.woff2) format("woff2"); font-weight: 450; font-display: swap; }
@font-face { font-family: "LT Superior"; src: url(../fonts/LTSuperior-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --u: calc(100vw / 1920);
  --bg: #252525;
  --fg: #e8e4cc;
  --serif: "Source Serif 4", Georgia, serif;
  --sans: "LT Superior", Helvetica, Arial, sans-serif;
  --display: "Bebas Neue", "Arial Narrow", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--fg); scroll-behavior: smooth; }
body {
  font-family: var(--serif);
  font-variation-settings: "opsz" 20;
  font-size: calc(20 * var(--u));
  line-height: calc(25 * var(--u));
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
img { display: block; }
.for-phone, .for-phone-b { display: none; }
p, li { text-wrap: pretty; }   /* правка № 28: последняя строка абзаца — не из одного слова */
.rule { border: 0; height: 1px; background: var(--fg); }

/* Оптический размер Source Serif 4 подобран по ширине строк в Figma: обычные тексты Figma рисует как opsz 14,
   кнопки-компоненты — по кеглю, капитель и Source Serif Pro — как opsz 20.
   В макете у большинства текстов включена обрезка по высоте букв (рамка начинается от верха прописной).
   Поправка = половина интерлиньяжа + (asc − desc)/2 − высота прописной; считается по метрикам шрифта. */

/* Кнопки: обычное начертание, при наведении — курсив (компонент «кнопки»). */
.btn:hover, .btn:focus-visible, .btn.is-current { font-style: italic; }
.btn:focus-visible { outline: none; }

/* ---------- Шапка ---------- */
/* правка № 6 (16.10): шапка 105.3 вместо 139 — знак −30 %, отступы над и под знаком по 32 */
.top {
  position: fixed; inset: 0 0 auto 0; z-index: 10;
  height: calc(105.3 * var(--u));
  background: var(--bg);
}
.top::after { /* линия под шапкой */
  content: ""; position: absolute; left: calc(30 * var(--u)); right: calc(30 * var(--u)); bottom: 0;
  height: 1px; background: var(--fg);
}
.top__pages, .top__manifest, .top__about {
  position: absolute; top: calc((88 - 33.7) * var(--u));
  font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u));
}
.top__pages {
  left: calc(30 * var(--u)); font-variation-settings: "opsz" 14;
  opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s;
}
.top.is-scrolled .top__pages { opacity: 1; visibility: visible; }
.top__manifest { left: calc(1555 * var(--u)); }
.top__about { right: calc(30 * var(--u)); }
.top__logo { position: absolute; left: calc((957.38 - 21.97) * var(--u)); top: calc(32 * var(--u)); width: calc(43.94 * var(--u)); }
.top__logo img { width: 100%; height: auto; }

/* ---------- Первый экран (координаты макета) ---------- */
.hero { position: relative; height: calc(2067 * var(--u)); margin-top: calc(-33.7 * var(--u)); }
.hero > * { position: absolute; }
.hero__l1 { left: calc(319 * var(--u)); top: calc(171 * var(--u)); width: calc(1280.72 * var(--u)); }
.hero__l2 { left: calc(95.72 * var(--u)); top: calc(402.44 * var(--u)); width: calc(1725.56 * var(--u)); }
.hero__l3 { left: calc(425.07 * var(--u)); top: calc(827.45 * var(--u)); width: calc(1069.77 * var(--u)); }

.hero__list {
  top: calc(866 * var(--u));
  font-size: calc(30 * var(--u)); line-height: calc(33 * var(--u));
  letter-spacing: calc(3.6 * var(--u));
  text-transform: uppercase; text-align: center; white-space: nowrap;
  font-variation-settings: "opsz" 14;
  padding-left: calc(3.6 * var(--u)); /* в макете разрядка после последней буквы не сдвигает центр */
}
.hero__list--l { left: calc(167 * var(--u)); width: calc(389 * var(--u)); }
.hero__list--r { left: calc(1209 * var(--u)); width: calc(676 * var(--u)); }

.hero__city {
  left: calc(29 * var(--u)); top: calc(1177 * var(--u));
  font-family: var(--sans); font-weight: 450;
  font-size: calc(14 * var(--u)); line-height: calc(15 * var(--u));
  letter-spacing: calc(-0.42 * var(--u));
}

.vert {
  top: calc(1319 * var(--u));
  display: flex; flex-direction: column; align-items: center;
  font-family: var(--sans); text-transform: uppercase; text-align: center;
}
.vert--tg { left: calc(143 * var(--u)); width: calc(213 * var(--u)); }
.vert--mail { left: calc(1567 * var(--u)); width: calc(206 * var(--u)); }
.vert__label { font-weight: 400; font-size: calc(15 * var(--u)); line-height: calc(35 * var(--u)); letter-spacing: calc(1.5 * var(--u)); padding-left: calc(1.5 * var(--u)); }
.vert__text {
  margin-top: calc(25 * var(--u));
  font-weight: 700; font-size: calc(20 * var(--u)); line-height: calc(22 * var(--u));
  letter-spacing: calc(2 * var(--u)); padding-left: calc(2 * var(--u));
}

.hero__intro {
  left: calc(345 * var(--u)); top: calc((1434 - 7.22) * var(--u)); width: calc(1234 * var(--u));
  font-variation-settings: "opsz" 14;
  font-size: calc(40 * var(--u)); line-height: calc(40 * var(--u)); text-align: center;
}
.hero__cta {
  left: 50%; transform: translateX(-50%); top: calc((1634 - 7.22) * var(--u));
  font-variation-settings: "opsz" 14;
  font-size: calc(40 * var(--u)); line-height: calc(40 * var(--u));
  letter-spacing: calc(8 * var(--u)); margin-left: calc(8 * var(--u)); text-transform: uppercase; white-space: nowrap;
}
.hero__cta:hover, .hero__cta:focus-visible { text-transform: none; letter-spacing: 0; margin-left: 0; }
.hero__cta:hover::first-letter, .hero__cta:focus-visible::first-letter { text-transform: uppercase; }
.hero__rule { left: calc(33 * var(--u)); top: calc(1751 * var(--u)); width: calc(1857 * var(--u)); }

.switch {
  left: calc(237 * var(--u)); top: calc((1897 - 5) * var(--u)); width: calc(1440 * var(--u));
  font-family: var(--display); font-weight: 700;
  font-size: calc(100 * var(--u)); line-height: calc(100 * var(--u));
  letter-spacing: calc(2 * var(--u)); text-transform: uppercase; text-align: center; white-space: nowrap;
}
/* правка № 3: переход к разделу ставит переключатель сразу под линией шапки (как на скриншоте Гриши) */
.switch { scroll-margin-top: calc((171 - 33.7) * var(--u)); }
.switch a.is-current {
  text-decoration: underline; text-decoration-thickness: calc(3 * var(--u));
  text-underline-offset: calc(6 * var(--u));
}
.switch a:not(.is-current):hover { text-decoration: underline; text-decoration-thickness: calc(3 * var(--u)); text-underline-offset: calc(6 * var(--u)); }

/* ---------- Кейсы ---------- */
.case__media { position: relative; overflow: hidden; }
.case__media img { position: absolute; top: 0; max-width: none; object-fit: cover; }
.case__video { position: absolute; top: 0; max-width: none; object-fit: cover; background: #000; cursor: pointer; }
/* правка № 7 (16.10): ползунок перемотки — тонкая линия цвета текста, время слева, звук справа */
.case__media.has-video::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: calc(160 * var(--u));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .35)); pointer-events: none;
}
.vbar {
  position: absolute; z-index: 1; left: calc(32 * var(--u)); right: calc(32 * var(--u)); bottom: calc(22 * var(--u));
  display: flex; align-items: center; gap: calc(24 * var(--u));
  color: var(--fg); opacity: .75; transition: opacity .25s;
}
.case__media:hover .vbar, .vbar:focus-within { opacity: 1; }
.vbar__time {
  flex: none; min-width: calc(110 * var(--u));
  font-family: var(--sans); font-weight: 400; font-size: calc(15 * var(--u)); line-height: calc(25 * var(--u));
  font-variant-numeric: tabular-nums;
}
.vbar__track { position: relative; flex: 1; height: calc(24 * var(--u)); cursor: pointer; outline: none; }
.vbar__track::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; opacity: .45;
}
.vbar__fill {
  position: absolute; left: 0; top: calc(50% - 1px); height: 2px; width: 0; background: currentColor;
}
.vbar__track:hover .vbar__fill, .vbar__track:focus-visible .vbar__fill { height: 3px; top: calc(50% - 1.5px); }
.case__sound {
  flex: none;
  font-variation-settings: "opsz" 14; font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u));
  color: var(--fg);
}
/* правка № 17: два видео «Палат» рядом */
.pair__v { position: absolute; top: 0; max-width: none; object-fit: cover; background: #000; }
/* правка № 14: живое видео внутри кадра ленты */
.strip__live { position: relative; flex: none; cursor: zoom-in; }
.strip__live > img { width: 100%; height: 100%; object-fit: cover; }
.strip__vid { position: absolute; object-fit: cover; background: #f0f0f2; pointer-events: none; }
.viewer__vid {
  position: absolute; inset: calc(80 * var(--u)) calc(30 * var(--u)) calc(60 * var(--u));
  width: calc(100% - 60 * var(--u)); height: calc(100% - 140 * var(--u)); object-fit: contain;
}

.strip {
  display: flex; align-items: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
  scrollbar-width: none; cursor: grab; padding-right: calc(30 * var(--u));
}
.strip::-webkit-scrollbar { display: none; }
.strip.is-dragging { cursor: grabbing; }
.strip img { flex: none; object-fit: cover; user-select: none; -webkit-user-drag: none; }

.case__caption { position: relative; padding: 0 calc(32 * var(--u)); display: flex; }
.case__title, .case__desc { position: relative; top: calc(-6.11 * var(--u)); }
.case__title { width: calc(443 * var(--u)); flex: none; }
.case__name { font-variant-caps: all-small-caps; letter-spacing: calc(2 * var(--u)); }
.case__meta {
  margin-top: calc(25 * var(--u));
  font-family: var(--sans); font-weight: 400;
  font-size: calc(15 * var(--u)); line-height: calc(25 * var(--u));
}
.case__desc { margin-left: calc(30 * var(--u)); width: calc(915 * var(--u)); flex: none; font-variation-settings: "opsz" 14; }
.case__desc.is-pro { font-variation-settings: "opsz" 20; } /* в макете набрано Source Serif Pro */
.case__credit { font-style: italic; text-indent: calc(30 * var(--u)); }
.case__more {
  position: absolute; right: calc(33 * var(--u)); top: calc(-6.11 * var(--u));
  display: flex; align-items: center; gap: calc(12 * var(--u)); font-style: italic;
  font-variation-settings: "opsz" 14;
}
.case__more svg { width: calc(8 * var(--u)); height: calc(14 * var(--u)); }

/* ---------- Подвал ---------- */
/* --gap: расстояние от последнего кейса до «Перейти в…» (в макете 269 на «Печатных», 246 на «Брендинге») */
.foot { position: relative; height: calc(1149 * var(--u)); --gap: 269; }
.foot > * { position: absolute; }
.foot__other {
  left: 50%; transform: translateX(-50%); top: calc((var(--gap) - 14.62) * var(--u));
  font-size: calc(40 * var(--u)); line-height: calc(54.8 * var(--u)); white-space: nowrap;
  font-variation-settings: "opsz" 40;
}
.foot__rule { left: calc(32 * var(--u)); width: calc(1857 * var(--u)); top: calc((var(--gap) + 250) * var(--u)); }
.foot__contacts {
  left: calc(30 * var(--u)); width: calc(1860 * var(--u)); top: calc((var(--gap) + 297) * var(--u));
  font-family: var(--sans); font-weight: 700; text-transform: uppercase;
  font-size: calc(40 * var(--u)); line-height: calc(22 * var(--u)); letter-spacing: calc(4 * var(--u));
  text-align: justify; text-align-last: justify;
}
.burroughs { left: 0; right: 0; top: calc((var(--gap) + 373) * var(--u)); height: calc(400 * var(--u)); overflow: hidden; }
.burroughs__word, .burroughs__src { position: absolute; text-align: center; }
.burroughs__word {
  top: calc(10 * var(--u));
  font-family: var(--display); font-weight: 700; text-transform: uppercase; white-space: nowrap;
  font-size: calc(200 * var(--u)); line-height: calc(160 * var(--u)); letter-spacing: calc(4 * var(--u));
}
.burroughs__src {
  font-family: var(--sans); font-weight: 450;
  font-size: calc(20 * var(--u)); line-height: calc(20 * var(--u)); letter-spacing: calc(-0.6 * var(--u));
}
.foot__disclaimer {
  left: calc(30 * var(--u)); width: calc(1859 * var(--u)); top: calc((var(--gap) + 766 - 3.63) * var(--u));
  font-family: var(--sans); font-weight: 400;
  font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u));
  text-align: justify; text-align-last: justify;
}

/* правка № 2: подсказка «Адрес скопирован» у почты */
.copied {
  position: fixed; z-index: 20; pointer-events: none;
  font-family: var(--serif); font-style: italic; font-variation-settings: "opsz" 14;
  font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u));
  color: var(--bg); background: var(--fg); padding: calc(6 * var(--u)) calc(12 * var(--u));
  opacity: 0; transition: opacity .2s;
}
.copied.is-on { opacity: 1; }

/* ---------- Панели «Манифест» и «О студии» (кадры 478 px в макете) ---------- */
.veil { position: fixed; inset: 0; z-index: 30; background: transparent; } /* в макете затемнения нет — слой только ловит клик мимо панели */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 31;
  width: calc(478 * var(--u)); overflow-y: auto; overscroll-behavior: contain;
  background: var(--fg); color: #000;
  padding: calc(18 * var(--u)) calc(18 * var(--u)) calc(60 * var(--u));
  font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u));
  font-variation-settings: "opsz" 14;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
.panel.is-open { transform: none; }
.panel a { text-decoration: none; }
.panel a:hover, .panel a:focus-visible { font-style: italic; outline: none; }
.panel__close {
  position: absolute; left: calc(449 * var(--u)); top: calc(24 * var(--u));
  width: calc(11 * var(--u)); height: calc(11 * var(--u)); padding: 0;
}
.panel__close::before { content: ""; position: absolute; inset: calc(-12 * var(--u)); } /* зона нажатия побольше */
.panel__close img { width: 100%; height: 100%; }
.panel__title { font: inherit; font-weight: 400; }
.sc { font-variant-caps: all-small-caps; letter-spacing: calc(2.25 * var(--u)); }

.manifest { list-style: none; margin-top: calc(30 * var(--u)); }
.manifest li { position: relative; padding-left: calc(32 * var(--u)); margin-bottom: calc(20 * var(--u)); }
.manifest__n { position: absolute; left: 0; top: 0; font-variant-caps: all-small-caps; }
.manifest p { width: calc(410 * var(--u)); text-align: center; font-variant-caps: all-small-caps; }

.studio-contacts { margin-left: calc(198 * var(--u)); margin-top: calc(1 * var(--u)); }
.person { margin-top: calc(47 * var(--u)); }
.person + .person { margin-top: calc(20 * var(--u)); }
.person__name { font: inherit; font-weight: 400; font-variant-caps: all-small-caps; letter-spacing: calc(1.5 * var(--u)); }
.person__bio { text-indent: calc(30 * var(--u)); }
.top__manifest.is-current, .top__about.is-current { font-style: italic; }

/* ---------- Просмотр фото на весь экран (комментарии Насти № 6 и 14) ---------- */
.strip img, .case__media img { cursor: zoom-in; }
.strip.is-dragging img { cursor: grabbing; }
/* правка № 15 (16.10): за фото — сама страница сайта, размытая, с лёгким затемнением для читаемости «Закрыть» и счётчика */
.viewer {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(37, 37, 37, .45);
  -webkit-backdrop-filter: blur(calc(40 * var(--u))) saturate(1.05); backdrop-filter: blur(calc(40 * var(--u))) saturate(1.05);
  animation: viewer-in .3s ease-out;
}
@keyframes viewer-in { from { opacity: 0; } to { opacity: 1; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .viewer { background: rgba(37, 37, 37, .94); } }
.viewer__img {
  position: absolute; inset: calc(80 * var(--u)) calc(30 * var(--u)) calc(60 * var(--u));
  width: calc(100% - 60 * var(--u)); height: calc(100% - 140 * var(--u)); object-fit: contain;
}
.viewer__prev, .viewer__next { position: absolute; top: 0; bottom: 0; width: 50%; }
.viewer__prev { left: 0; cursor: w-resize; }
.viewer__next { right: 0; cursor: e-resize; }
.viewer__close {
  position: absolute; z-index: 1; right: calc(30 * var(--u)); top: calc(30 * var(--u));
  font-size: calc(20 * var(--u)); line-height: calc(25 * var(--u)); font-variation-settings: "opsz" 14;
}
.viewer__count {
  position: absolute; left: 0; right: 0; bottom: calc(22 * var(--u)); text-align: center;
  font-family: var(--sans); font-size: calc(15 * var(--u)); line-height: calc(20 * var(--u));
}

/* ======================================================================
   Телефон. Основа — макет «iPhone 16» (393 px) + правки Гриши 19.10 (№ 24–39, по фото с iPhone и скриншотам
   обновлённого макета; размеры сняты со скриншотов — без плагина Figma, ±2 px).
   Единица --m = 1 px макета телефона. Строка состояния iPhone (≈50 px) на сайте не нужна — всё поднято на 50.
   ====================================================================== */
@media (max-width: 700px) {
  :root { --m: calc(100vw / 393); }
  /* № 44: на телефоне строки не выравниваем — слова не уезжают вниз раньше времени («Бюро UP, «Россети»»);
     от одиноких слов в последней строке защищает неразрывный пробел перед последним словом */
  p, li { text-wrap: wrap; }
  body { font-size: calc(12 * var(--m)); line-height: calc(15 * var(--m)); }

  /* шапка (№ 24): линия ближе к знаку и надписям — 61 вместо 72 */
  .top { height: calc(61 * var(--m)); }
  /* № 25: Safari рисует страницу и под своей полупрозрачной строкой адреса — над шапкой тот же тёмный фон */
  /* № 42: новый Safari на iPhone прокручивает страницу ПОД своей строкой адреса, а шапку ставит ниже неё —
     над шапкой просвечивал сайт. Поэтому на телефоне страница прокручивается внутри своего окна (.scroller),
     которое начинается под шапкой: под строку адреса ей заезжать некуда, там всегда цвет фона. */
  html, body { height: 100%; overflow: hidden; }
  html { scroll-behavior: auto; }
  .scroller {
    position: fixed; left: 0; right: 0; bottom: 0; top: calc(61 * var(--m));
    overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  .scroller > main { margin-top: calc(-61 * var(--m)); }  /* раскладка прежняя: координаты первого экрана — от верха экрана */
  .top::after { left: calc(15 * var(--m)); right: calc(15 * var(--m)); }
  .top__pages { display: none; }
  .top__manifest, .top__about {
    /* № 41: верх прописных — на уровне верха знака */
    top: calc(var(--nav-top, 13) * var(--m)); left: auto; right: auto;
    font-family: var(--sans); font-weight: 700; text-transform: uppercase;
    font-size: calc(10 * var(--m)); line-height: calc(11 * var(--m)); letter-spacing: calc(1 * var(--m));
    padding: calc(8 * var(--m)) 0; margin-top: calc(-8 * var(--m)); /* зона нажатия побольше */
  }
  .top__manifest { left: calc(14 * var(--m)); }
  .top__about { right: calc(14 * var(--m)); }
  .top__manifest:hover, .top__about:hover, .top__manifest.is-current, .top__about.is-current { font-style: normal; text-decoration: underline; text-underline-offset: calc(3 * var(--m)); }
  .top__logo { left: calc(178.8 * var(--m)); top: calc(14 * var(--m)); width: calc(35.4 * var(--m)); }  /* № 48: над знаком и под ним поровну */

  /* первый экран (№ 29) — по обновлённому макету: «ФАЛЬЦ» без кавычек во всю ширину */
  .for-desk-b { display: none; }
  .for-phone-b { display: block; }
  .hero { height: calc(var(--hero-h, 1076)  /* № 43: от низа переключателя до видео — 102.5, как от линии шапки до «Дизайн-студии» */ * var(--m)); margin-top: 0; overflow: hidden; }
  .hero__l1 { left: calc(17.1 * var(--m)); top: calc(153.5 * var(--m)); width: calc(359.8 * var(--m)); }
  .hero__l2m { left: calc(10.2 * var(--m)); top: calc(216.6 * var(--m)); width: calc(372.6 * var(--m)); }
  .hero__l3 { left: calc(42.4 * var(--m)); top: calc(348.3 * var(--m)); width: calc(309.1 * var(--m)); }
  .hero__list {
    top: calc(353 * var(--m));
    font-size: calc(8 * var(--m)); line-height: calc(10 * var(--m)); letter-spacing: calc(0.96 * var(--m));
    padding-left: calc(0.96 * var(--m)); font-variation-settings: "opsz" 8;
  }
  .hero__list--l { left: calc(15 * var(--m)); width: calc(128 * var(--m)); }
  .hero__list--r { left: calc(249 * var(--m)); width: calc(129 * var(--m)); }
  .hero__city {
    left: calc(17 * var(--m)); top: calc(471.9 * var(--m));
    font-size: calc(6 * var(--m)); line-height: calc(7 * var(--m)); letter-spacing: calc(-0.18 * var(--m));
  }
  .vert { top: calc(554 * var(--m)); }
  .vert--tg { left: 0; width: calc(79 * var(--m)); }
  .vert--mail { left: calc(317 * var(--m)); width: calc(76 * var(--m)); }
  .vert__label { font-size: calc(8 * var(--m)); line-height: calc(10 * var(--m)); letter-spacing: calc(0.8 * var(--m)); padding-left: calc(0.8 * var(--m)); }
  .vert__text {
    margin-top: calc(12 * var(--m));
    font-size: calc(10 * var(--m)); line-height: calc(12 * var(--m)); letter-spacing: calc(1 * var(--m)); padding-left: calc(1 * var(--m));
  }
  .hero__intro {
    left: calc(76.5 * var(--m)); top: calc(607 * var(--m)); width: calc(240 * var(--m));  /* 235 в макете + запас, чтобы строки не перескакивали */
    font-size: calc(12 * var(--m)); line-height: calc(14 * var(--m)); font-variation-settings: "opsz" 14;
  }
  .hero__cta {
    top: calc(691 * var(--m));
    font-size: calc(12 * var(--m)); line-height: calc(14 * var(--m));
    letter-spacing: calc(2.4 * var(--m)); margin-left: calc(2.4 * var(--m)); font-variation-settings: "opsz" 12;
  }
  .hero__rule { left: calc(15 * var(--m)); top: calc(754 * var(--m)); width: calc(363.2 * var(--m)); }
  /* № 30: переключатель крупнее — три строки, широкая ≈346 */
  .switch {
    left: calc(10 * var(--m)); top: calc(var(--sw-top, 857)  /* № 43: от линии до переключателя — 102.5 */ * var(--m)); width: calc(373 * var(--m));
    font-size: calc(var(--sw-fs, 43) * var(--m)); line-height: calc(var(--sw-lh, 41) * var(--m)); letter-spacing: calc(0.6 * var(--m));
    white-space: normal; scroll-margin-top: calc(29 * var(--m));  /* отступ от линии шапки (страница прокручивается под шапкой) */
  }
  .switch a.is-current, .switch a:not(.is-current):hover { text-decoration-thickness: calc(1.6 * var(--m)); text-underline-offset: calc(3.5 * var(--m)); }

  /* кейсы (№ 31, 32): видео → лента → «Листайте вправо» → подпись; между кейсами воздух */
  .cases { padding-top: 0 !important; }
  .case { display: flex; flex-direction: column; height: auto !important; margin-top: calc(112 * var(--m)) !important; }
  .case:first-child { margin-top: 0 !important; }
  .case__media { order: 1; }
  .strip { order: 2; }
  .case__caption { order: 3; }
  .case__gap { display: none; }

  /* видео — во всю ширину, 393×300, кадр немного обрезан по краям (как в макете) */
  .case__media { height: auto !important; aspect-ratio: 393 / 300; }
  .case__media > img, .case__video { left: 0 !important; width: 100% !important; height: 100% !important; }
  .pair__v { width: 50% !important; height: 100% !important; }
  .pair__v:first-child { left: 0 !important; }
  .pair__v:last-child { left: 50% !important; }
  .case__media.has-video::after { height: calc(60 * var(--m)); }
  .vbar { left: calc(12 * var(--m)); right: calc(12 * var(--m)); bottom: calc(6 * var(--m)); gap: calc(10 * var(--m)); opacity: 1; }
  .vbar__time { min-width: calc(58 * var(--m)); font-size: calc(9 * var(--m)); line-height: calc(15 * var(--m)); }
  .vbar__track { height: calc(24 * var(--m)); }
  .case__sound { font-size: calc(10 * var(--m)); line-height: calc(15 * var(--m)); font-variation-settings: "opsz" 10; padding: calc(6 * var(--m)) 0; }

  /* лента: кадры высотой 180 (под видео; развороты хорошо видны), на «Брендинге», где видео нет, — 260 */
  .strip {
    --su: calc(100vw / 393 * var(--k) * 180 / 385); --u: var(--su);
    margin-top: calc(18 * var(--m)) !important; padding-left: calc(14 * var(--m)) !important; padding-right: calc(14 * var(--m));
    -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity;
  }
  .page--branding .strip { --su: calc(100vw / 393 * var(--k) * 260 / 385); margin-top: 0 !important; }
  /* № 47, 49: самый широкий кадр ленты целиком помещается в экран (365 из 393); уменьшается вся лента разом —
     кадры одной высоты, одной линией, как на компьютере (без «ступенек») */
  .strip { --u: min(var(--su), calc(365 * var(--m) / var(--swmax, 1))); }
  .strip > * { scroll-snap-align: start; scroll-margin-left: calc(14 * var(--m)); }

  /* подпись кейса; «Листайте вправо» — сразу под лентой справа (решение DAVE к № 31) */
  .case__caption {
    display: flex; flex-direction: column; height: auto !important; padding: 0 calc(15 * var(--m)) !important;
  }
  .case__more {
    order: -1; position: relative; top: 0; right: auto !important; align-self: flex-end;
    margin: calc(8 * var(--m)) calc(-1 * var(--m)) calc(22 * var(--m)) 0;
    gap: calc(8 * var(--m)); font-size: calc(11 * var(--m)); line-height: calc(15 * var(--m));
  }
  .case__more svg { width: calc(5.5 * var(--m)); height: calc(10 * var(--m)); }
  .case__title, .case__desc { top: 0; width: auto; margin-left: 0; }
  .case__name {
    font-size: calc(var(--t-fs, 16) * var(--m)); line-height: calc(var(--t-lh, 18) * var(--m)); letter-spacing: calc(var(--t-ls, 1.6) * var(--m));
    font-variation-settings: "opsz" 16;
  }
  .case__name br { display: none; }
  .case__meta { margin-top: calc(10 * var(--m)); font-size: calc(9 * var(--m)); line-height: calc(11 * var(--m)); }
  .case__desc {
    margin-top: calc(2 * var(--m));
    font-size: calc(var(--d-fs, 10) * var(--m)); line-height: calc(var(--d-lh, 12.5) * var(--m)); font-variation-settings: "opsz" 20 !important;  /* как Source Serif Pro в макете — переносы совпадают */
  }
  .case__desc p { letter-spacing: 0 !important; }
  .case__desc br { display: none; }       /* переносы строк компьютерной вёрстки на узком экране не нужны */
  .case__credit { text-indent: calc(30 * var(--m)); letter-spacing: calc(-0.15 * var(--m)) !important; }
  .for-desk { display: none; }
  .for-phone { display: inline; }

  /* подвал (№ 39, 45, 46): «Перейти в…» ровно посередине между последним кейсом и контактами; от контактов до линии
     и от линии до «THE WORD IS» — по 14 (по буквам, замерено) */
  /* подвал (№ 39) — по макету: контакты в одну строку, линия, цитата во всю ширину, подпись и дисклеймер по центру */
  .foot { display: flex; flex-direction: column; height: auto !important; padding: calc(var(--f-top, 132) * var(--m)) calc(15 * var(--m)) calc(27 * var(--m)); }
  .foot > * { position: static; }
  .foot__other {
    order: 0; display: block; width: max-content; margin: 0 auto calc(var(--f-mid, 134.5) * var(--m)); transform: none;
    font-size: calc(20 * var(--m)); line-height: calc(27 * var(--m)); font-variation-settings: "opsz" 20;
  }
  .foot__contacts {
    order: 1; width: auto; display: flex; justify-content: space-between;
    font-size: calc(var(--c-fs, 10.5) * var(--m)); line-height: calc(13 * var(--m)); letter-spacing: calc(1.1 * var(--m));
    text-align: left; text-align-last: auto;
  }
  .foot__rule { order: 2; width: auto; margin-top: calc(var(--f-a, 11.5) * var(--m)); }
  .burroughs { order: 3; position: relative; top: 0; height: auto; margin: calc(var(--f-b, 9.5) * var(--m)) calc(-15 * var(--m)) 0; overflow: visible; }
  .burroughs__word:nth-of-type(2) { padding-top: calc(10 * var(--m)); } /* № 45: строка ниже высоты букв — запас сверху, чтобы «THE WORD IS» не обрезалось */
  .burroughs__word, .burroughs__src { display: none; }
  .burroughs__sp { display: none; }
  .burroughs__word:nth-of-type(2), .burroughs__src:nth-of-type(5) { display: block; position: static; width: auto !important; }
  .burroughs__word:nth-of-type(2) { font-size: calc(var(--w-fs, 95.7) * var(--m)); line-height: calc(76 * var(--m)); letter-spacing: calc(1.5 * var(--m)); }
  .burroughs__src:nth-of-type(5) { margin-top: calc(14 * var(--m)); font-size: calc(10.8 * var(--m)); line-height: calc(13 * var(--m)); letter-spacing: calc(-0.32 * var(--m)); }
  .foot__disclaimer {
    order: 4; width: auto; margin: calc(26 * var(--m)) calc(8 * var(--m)) 0;
    font-size: calc(7 * var(--m)); line-height: calc(8.5 * var(--m)); text-align: center; text-align-last: center;
  }

  /* панели (№ 26, 27): выезжают на ¾ экрана — «Манифест» слева, «О студии» справа; вёрстка под ширину 293 */
  .panel {
    --u: var(--m); width: calc(293 * var(--m));
    padding: calc(16 * var(--m)) calc(16 * var(--m)) calc(40 * var(--m));
    font-size: calc(11 * var(--m)); line-height: calc(15 * var(--m)); font-variation-settings: "opsz" 11;
  }
  #panel-manifest { right: auto; left: 0; transform: translateX(-100%); }
  #panel-manifest.is-open { transform: none; }
  .panel__close { left: auto; right: calc(16 * var(--m)); top: calc(20 * var(--m)); width: calc(10 * var(--m)); height: calc(10 * var(--m)); }
  .panel__title { padding-right: calc(24 * var(--m)); }
  .sc { letter-spacing: calc(1.6 * var(--m)); }
  .manifest { margin-top: calc(22 * var(--m)); }
  .manifest li { padding-left: calc(22 * var(--m)); margin-bottom: calc(14 * var(--m)); }
  .manifest p { width: auto; }
  .manifest .br-d { display: none; }  /* 02.11: переносы посреди фразы — только на компьютере */
  .studio-contacts { margin: calc(26 * var(--m)) 0 0 auto; width: fit-content; }  /* 02.11: как на компьютере — блок у правого края колонки, строки по левому краю */
  .person { margin-top: calc(30 * var(--m)); }
  .person + .person { margin-top: calc(18 * var(--m)); }
  .person__name { letter-spacing: calc(1.2 * var(--m)); }
  .person__bio { text-indent: calc(22 * var(--m)); }

  /* просмотр фото: «Закрыть» и счётчик читаемым кеглем, фото почти на весь экран */
  .viewer__img, .viewer__vid {
    inset: calc(56 * var(--m)) calc(8 * var(--m)) calc(40 * var(--m));
    width: calc(100% - 16 * var(--m)); height: calc(100% - 96 * var(--m));
  }
  .viewer__close { right: calc(15 * var(--m)); top: calc(18 * var(--m)); font-size: calc(14 * var(--m)); line-height: calc(20 * var(--m)); padding: calc(4 * var(--m)); }
  .viewer__count { bottom: calc(14 * var(--m)); font-size: calc(11 * var(--m)); line-height: calc(15 * var(--m)); }
  .copied { font-size: calc(13 * var(--m)); line-height: calc(18 * var(--m)); padding: calc(5 * var(--m)) calc(10 * var(--m)); }
}