/* Внутренние разделы: Work, кейс, Lab.

   Общий материал с главной — те же токены, та же колонка 912, те же
   волосяные линии и тот же дисплейный кегль. Ничего нового здесь не
   вводится: если на внутренней странице появляется свой кегль или свой
   отступ, сайт начинает выглядеть как два сайта.

   Заголовок раздела набран кеглем 96 (--fs-big) — тем же, что лента слов
   и слово Lab на главной. Имя в герое крупнее (128), и это единственное
   место с таким кеглем: первый экран обязан оставаться самым крупным
   событием страницы. */

/* --- Шапка раздела --------------------------------------------------------
   Верхний отступ тот же, что у первого экрана главной: перелистывая
   разделы, человек не должен видеть, как прыгает верх страницы. */

.page-head {
  padding-block: calc(185 * var(--u)) 0;
}

.page-title {
  margin-block-start: calc(28 * var(--u));
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-big);
  line-height: calc(96 * var(--u));
  letter-spacing: var(--track);
}

.page-sub {
  max-width: calc(var(--col) * 2);
  margin-block-start: calc(24 * var(--u));
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: calc(22 * var(--u));
  color: color-mix(in srgb, var(--fg) 62%, var(--bg));
}

/* Фильтр веток слева, вид справа. Пилюли те же, что в шапке, — другого
   вида кнопок на сайте нет и не нужно. */
.work-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: calc(16 * var(--u));
  margin-block-start: calc(40 * var(--u));
}
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: calc(5 * var(--u));
  color: var(--accent);
}
.filters .pill {
  background: none;
  color: inherit;
  font: inherit;
  font-family: var(--mono);
  font-size: var(--fs-pill);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.pill.is-current,
.filters .pill.is-current {
  background: var(--accent);
  color: var(--bg);
}

/* --- Список проектов -------------------------------------------------------
   Два вида. Сетка — те же квадраты, что на главной (.work в home.css).
   Список — строки: линия рисуется верхним краем строки, последняя
   добавляет нижнюю — на стыках иначе получилась бы двойная толщина. */

#main .work { margin-block-start: calc(40 * var(--u)); }

.rows {
  margin-block-start: calc(40 * var(--u));
  border-block-end: var(--line) solid var(--hair);
}
.row {
  border-block-start: var(--line) solid var(--hair);
}
.row__link {
  display: grid;
  grid-template-columns: calc(48 * var(--u)) minmax(0, 1.7fr) minmax(0, 1.1fr) auto calc(40 * var(--u));
  align-items: baseline;
  gap: calc(16 * var(--u));
  padding-block: calc(26 * var(--u));
  transition: background-color var(--dur-ui) var(--ease);
}
.row__link:hover,
.row__link:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}

.row__num,
.row__kicker,
.row__branch {
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: calc(18 * var(--u));
}
.row__num { color: color-mix(in srgb, var(--fg) 45%, var(--bg)); }
.row__kicker { color: color-mix(in srgb, var(--fg) 62%, var(--bg)); }
.row__branch {
  justify-self: end;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Название проекта мельче дисплейного кегля секций: в строке оно стоит
   рядом с тремя другими колонками, и на 48 двухсловные названия рвутся
   на две строки, а строка списка обязана быть одной строкой. Кегль тот
   же, что у цифр в About, — нового в систему не заводится. */
.row__title {
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(34 * var(--u));
  line-height: calc(38 * var(--u));
  letter-spacing: var(--track);
}
.row__title sup {
  font-family: var(--mono);
  font-size: calc(13 * var(--u));
  letter-spacing: 0;
  vertical-align: super;
  line-height: 0;
  margin-inline-start: calc(6 * var(--u));
  color: color-mix(in srgb, var(--fg) 45%, var(--bg));
}

/* Стрелка появляется на ховере и место под себя занимает всегда —
   иначе строка дёргалась бы по ширине. */
.row__arrow {
  justify-self: end;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  color: var(--accent);
  opacity: 0;
  transform: translateX(calc(-8 * var(--u)));
  transition:
    opacity var(--dur-ui) var(--ease),
    transform var(--dur-ui) var(--ease);
}
.row__link:hover .row__arrow,
.row__link:focus-visible .row__arrow {
  opacity: 1;
  transform: none;
}

.rows__note,
.empty {
  margin-block-start: calc(24 * var(--u));
  padding-block-end: calc(120 * var(--u));
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: calc(18 * var(--u));
  color: color-mix(in srgb, var(--fg) 45%, var(--bg));
}

/* --- Кейс ------------------------------------------------------------------ */

.case { padding-block: calc(64 * var(--u)) calc(140 * var(--u)); }

.meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(calc(180 * var(--u)), 1fr));
  gap: calc(24 * var(--u));
  margin: 0 0 calc(56 * var(--u));
  padding-block-end: calc(40 * var(--u));
  border-block-end: var(--line) solid var(--hair);
}
.meta__term {
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: calc(18 * var(--u));
  color: color-mix(in srgb, var(--fg) 45%, var(--bg));
}
.meta__value {
  margin: calc(6 * var(--u)) 0 0;
  font-family: var(--mono);
  font-size: var(--fs-caption);
  line-height: calc(20 * var(--u));
}

.case__p {
  max-width: calc(var(--col) * 2);
  font-family: var(--text);
  font-size: calc(18 * var(--u));
  line-height: calc(28 * var(--u));
}
.case__p + .case__p { margin-block-start: calc(20 * var(--u)); }
.case__p--empty { color: color-mix(in srgb, var(--fg) 62%, var(--bg)); }

.case__link { margin-block-end: calc(48 * var(--u)); color: var(--accent); }

/* Галерея кейса (js/case.js). Сетка на шесть долей: full — вся строка,
   half — половина, third — треть; раскладку задаёт конструктор в админке.
   Кадры разной пропорции не режутся: высота у каждого своя. */
.case-media {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: calc(16 * var(--u));
  align-items: start;
  padding-block-end: calc(120 * var(--u));
}
.case-media__item { margin: 0; }
.case-media__item--full { grid-column: span 6; }
.case-media__item--half { grid-column: span 3; }
.case-media__item--third { grid-column: span 2; }
.case-media__file {
  display: block;
  width: 100%;
  height: auto;
  background: var(--thumb);
}
.case-media__cap {
  margin-block-start: calc(8 * var(--u));
  font-family: var(--mono);
  font-size: var(--fs-label);
  line-height: calc(18 * var(--u));
  color: color-mix(in srgb, var(--fg) 55%, var(--bg));
}

.case-next {
  padding-block: calc(56 * var(--u)) calc(120 * var(--u));
  border-block-start: var(--line) solid var(--hair);
}
.case-next__link {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(24 * var(--u));
  margin-block-start: calc(16 * var(--u));
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track);
  transition: color var(--dur-ui) var(--ease);
}
.case-next__link:hover { color: var(--accent); }
.case-next__arrow { color: var(--accent); }

/* --- Мобильная раскладка --------------------------------------------------- */

@media (max-width: 760px) {
  .page-head { padding-block-start: calc(180 * var(--u)); }
  .page-title { font-size: calc(40 * var(--u)); line-height: calc(42 * var(--u)); }
  .page-sub { max-width: none; }

  .row__link {
    grid-template-columns: calc(40 * var(--u)) 1fr auto;
    row-gap: calc(6 * var(--u));
  }
  .row__kicker { grid-column: 2 / -1; }
  .row__branch { grid-column: 2 / -1; justify-self: start; }
  .row__arrow { display: none; }

  .case__p { max-width: none; }
  .case-media { grid-template-columns: 1fr; }
  .case-media__item[class] { grid-column: auto; }
}

/* --- Шоурил (/work, ветка Motion) -------------------------------------------
   Кнопка стоит в строке фильтров, ролик открывается поверх страницы.
   Шоурил вертикальный, поэтому окно — по высоте экрана. */

.work-bar .reel-open[hidden] { display: none; }
/* Шоурил стоит сразу за фильтрами, а не посередине строки. */
.work-bar .reel-open { margin-inline-end: auto; }


/* --- 404 (404.html, js/lost.js) -----------------------------------------------
   Один экран без прокрутки: шапка текста и граф на всю оставшуюся высоту
   (граф сам масштабируется, чтобы влезть). Входы → Switch → выход. Без
   сигнала выход в рамке алертного цвета и с крупным «404». */
body:has(> main.lost) { height: 100svh; overflow: hidden; }
.lost {
  --alert: #FF6B5E;
  box-sizing: border-box;
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: calc(118 * var(--u)) calc(24 * var(--u));
}
.lost__head { flex: none; }
.lost__title { margin-block: calc(12 * var(--u)) 0; }
.lost__text {
  margin-block: calc(10 * var(--u)) 0;
  color: color-mix(in srgb, var(--fg) 60%, var(--bg));
}
.lost-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  margin-block-start: calc(28 * var(--u));
  touch-action: none;
}
.lost-probe { position: absolute; width: calc(100 * var(--u)); height: 0; visibility: hidden; }
.lost-canvas { position: absolute; inset-block-start: 0; transform-origin: 0 0; }
.lost-canvas .node { user-select: none; }
.lost-canvas .node__body { background: var(--bg); }
.lost-canvas .node__tool { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lost-canvas .node:focus-visible { outline: none; }
.lost-canvas .node:focus-visible .node__body { box-shadow: 0 0 0 var(--line) var(--accent-2); }
.lost-canvas .node.is-hot .node__body { box-shadow: 0 0 0 var(--line) var(--accent); }
.lost-canvas .wire.is-hot .wire__flow { opacity: 0.9; animation: wire-flow 1.4s linear infinite; }
.lost-canvas .wire.is-alert .wire__line { stroke: var(--alert); stroke-dasharray: 3 6; }
.lost-node.is-off .node__port { background: var(--bg); border-style: dashed; }

/* Вход 0 — этот адрес: пунктир, страницы нет. */
.lost-node.is-broken .node__body { border-style: dashed; }
.lost-node.is-broken .node__text { color: var(--accent-2); }
.lost-node.is-nope { animation: lost-nope 420ms var(--ease-out); }
@keyframes lost-nope {
  20%, 60% { translate: calc(-5 * var(--u)) 0; }
  40%, 80% { translate: calc(5 * var(--u)) 0; }
}
.lost-stub { fill: none; stroke: var(--hair); stroke-width: var(--line-px); stroke-dasharray: 3 6; }
.lost-plug { fill: var(--bg); stroke: var(--hair); stroke-width: var(--line-px); }
.lost-stub.is-alert, .lost-plug.is-alert { stroke: var(--alert); }

/* Картинка: превью во всю ноду. */
.lost-img .node__body { border: var(--line) solid var(--hair); }
.lost-img__pic {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: calc(7 * var(--u));
  pointer-events: none;
}

/* Switch: номер входа — ячейки. */
.lost-sw .node__body {
  display: grid;
  gap: calc(8 * var(--u));
  padding: calc(10 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  border: var(--line) solid var(--hair);
}
.lost-sw.is-target .node__body { border-color: var(--accent); }
.lost-stage.is-wiring .lost-sw .node__body { border-style: dashed; }
.lost-stage.is-wiring .lost-sw.is-target .node__body { border-style: solid; }
.lost-sw__label {
  font-family: var(--mono);
  font-size: calc(10 * var(--u));
  line-height: calc(14 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fg) 55%, var(--bg));
}
.lost-sw__cells { display: flex; gap: calc(6 * var(--u)); }
.lost-sw__cell {
  flex: 1;
  height: calc(26 * var(--u));
  padding: 0;
  border: var(--line) solid var(--hair);
  border-radius: calc(5 * var(--u));
  background: transparent;
  color: var(--fg);
  font: inherit;
  font-family: var(--mono);
  font-size: calc(11 * var(--u));
  cursor: pointer;
  transition: background-color var(--dur-ui) var(--ease), border-color var(--dur-ui) var(--ease), color var(--dur-ui) var(--ease);
}
.lost-sw__cell:hover { border-color: var(--accent); }
.lost-sw__cell.is-empty { border-style: dashed; color: color-mix(in srgb, var(--fg) 45%, var(--bg)); }
.lost-sw__cell.is-on { border-color: var(--accent); background: var(--accent); color: var(--bg); }
.lost-sw__cell.is-on.is-empty { border-color: var(--alert); background: transparent; color: var(--alert); }
.lost-sw__cell:focus-visible { outline: var(--line) solid var(--accent-2); outline-offset: calc(2 * var(--u)); }

/* Выход. Без сигнала — рамка алертным цветом. */
.lost-out .node__body {
  border: var(--line) solid var(--hair);
  transition: border-color var(--dur-ui) var(--ease);
}
.lost-out.is-live { cursor: pointer; }
.lost-out.is-live .node__body { border-color: var(--accent); }
.lost-out.is-alert .node__body { border-color: var(--alert); }
.lost-out__view {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: calc(7 * var(--u)) calc(7 * var(--u)) 0 0;
  background-color: var(--bg);
}
.lost-out__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.lost-out__img[hidden] { display: none; }
.lost-out__big {
  position: relative;
  font-family: var(--display);
  font-weight: 700;
  font-size: calc(96 * var(--u));
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.lost-out.is-live .lost-out__big { color: var(--accent); }
.lost-out__foot {
  display: flex;
  align-items: center;
  min-height: calc(46 * var(--u));
  padding-inline: calc(12 * var(--u));
  border-block-start: var(--line) solid var(--hair);
}
.lost-out__hint {
  font-family: var(--mono);
  font-size: calc(10 * var(--u));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--alert);
}
.lost-out__go[hidden], .lost-out__hint[hidden] { display: none; }

/* Узкий экран: поток сверху вниз — выходы снизу, входы сверху. */
.lost-canvas.is-vertical .lost-node .node__port--out,
.lost-canvas.is-vertical .lost-sw .node__port--out { inset-block-start: 100%; inset-inline-start: 50%; }
.lost-canvas.is-vertical .lost-sw .node__port--in,
.lost-canvas.is-vertical .lost-out .node__port--in { inset-block-start: 0; inset-inline-start: 50%; }

@media (max-width: 760px) {
  .lost { padding-block: calc(96 * var(--u)) calc(16 * var(--u)); }
  .lost-stage { margin-block-start: calc(20 * var(--u)); }
  .lost-out__big { font-size: calc(80 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .lost-node.is-nope { animation: none; }
}