/* ==========================================================================
   Резбайка — дизайн-система
   База:      Cosmos        (льняное полотно галереи, 16px радиус, без теней)
   Тёмный слой: ORYZO AI    (объект как музейный экспонат в тёплой темноте)
   Сказка:    Structured    (putty-холст, монументальная антиква, круглые виньетки)
   ========================================================================== */

/* --------------------------------------------------------- 1. Токены */
:root {
  /* Cosmos — светлая база */
  --linen:      #f7f5f3;   /* холст страницы, никогда не чистый белый */
  --paper:      #ffffff;   /* карточки, инпуты — единственная «поднятая» поверхность */
  --ink:        #0d0d0d;   /* текст, обводки. Не #000 — чёрный греется о кремовый */
  --stone:      #6e6a69;   /* основной текст-компаньон, метаданные */
  --pebble:     #9a9796;   /* подсказки, выключенные состояния */
  --hairline:   rgba(13, 13, 13, 0.12);
  --hairline-2: rgba(13, 13, 13, 0.06);

  /* ORYZO — тёмный слой */
  --walnut:    #100904;    /* тёплый почти-чёрный, пустота за объектом */
  --bark:      #382416;    /* одна поднятая поверхность */
  --cork:      #40372e;    /* пунктирные разделители */
  --driftwood: #6c5f51;
  --cream:     #ffedd7;    /* весь текст на тёмном — никогда не #fff */
  --ember:     #dc5000;    /* только подписи и одна ссылка. Редкость = сигнал */

  /* Structured — сказочный слой */
  --putty:    #c4c3b6;
  --bone:     #e7e5e4;
  --vellum:   #dfdcd5;
  --graphite: #595855;

  /* Шрифты. Обе гарнитуры несут кириллицу и сербскую латиницу в одном файле —
     на двуязычном сайте это не роскошь, а условие: иначе половина страницы
     переезжает на подменный шрифт. У Literata есть ось оптического размера,
     поэтому крупный кегль сам становится тоньше и острее, мелкий — плотнее. */
  --serif: "Literata", "Georgia", "Times New Roman", serif;
  --sans:  "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Форма — одна подпись системы */
  --r:      16px;  /* всё: карточки, кнопки, инпуты */
  --r-tile: 12px;  /* только плитки-изображения */
  --r-pill: 9999px;

  /* Ритм */
  --well:  1280px;
  --gap:   24px;
  --pad:   16px;
  --band:  clamp(72px, 9vw, 128px);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Пружины. Сгенерированы Motion и запечены в linear(): физика остаётся,
     библиотеки на странице нет — важно и для веса, и для артефакта, куда
     внешние скрипты не пускает CSP. Отскок держим маленьким: мастерская,
     а не игрушка. */
  --spring-ui:    0.55s linear(0, 0.0301, 0.1041, 0.2024, 0.3109, 0.42, 0.5234, 0.6172, 0.6996, 0.7699, 0.8284, 0.8761, 0.9139, 0.9433, 0.9656, 0.9819, 0.9936, 1.0015, 1.0065, 1.0095, 1.0108, 1.0111, 1.0106, 1.0098, 1.0086, 1.0074, 1.0062, 1.0051, 1.0041, 1.0032, 1.0024, 1.0018, 1.0013, 1.0009, 1.0006, 1.0003, 1.0002, 1, 1, 1);
  --spring-tile:  0.75s linear(0, 0.0137, 0.0502, 0.1032, 0.1675, 0.2389, 0.3137, 0.3893, 0.4634, 0.5345, 0.6014, 0.6633, 0.7197, 0.7704, 0.8154, 0.8549, 0.8891, 0.9182, 0.9428, 0.9632, 0.9798, 0.9931, 1.0035, 1.0115, 1.0172, 1.0212, 1.0237, 1.025, 1.0254, 1.025, 1.024, 1.0226, 1.021, 1.0192, 1.0173, 1.0153, 1.0135, 1.0117, 1.01, 1.0084, 1.007, 1.0057, 1.0046, 1.0036, 1.0027, 1.002, 1.0014, 1.0009, 1.0005, 1.0002, 0.9999, 0.9997, 1, 1, 1);
  --spring-enter: 0.45s linear(0, 0.0186, 0.0659, 0.1316, 0.2078, 0.2887, 0.3701, 0.4489, 0.5232, 0.5917, 0.6538, 0.7093, 0.7581, 0.8007, 0.8374, 0.8686, 0.8951, 0.9172, 0.9355, 0.9505, 0.9628, 0.9726, 0.9804, 0.9866, 0.9913, 0.9949, 0.9976, 0.9996, 1.001, 1.0019, 1.0025, 1.0028, 1);
}

/* --------------------------------------------------------- 2. Основа */
*, *::before, *::after { box-sizing: border-box; }

/* Три языка — на одной странице, без отдельных URL. Каждый переводимый
   узел несёт три соседних .lang-sr/.lang-ru/.lang-en — виден только тот,
   что совпадает с [lang] корня; переключатель (main.js) меняет только
   этот атрибут. Сербский — язык по умолчанию, поэтому его текст остаётся
   виден даже до того, как отработает скрипт. */
.lang-sr, .lang-ru, .lang-en { display: none; }
html[lang="sr-Latn"] .lang-sr,
html[lang="ru"] .lang-ru,
html[lang="en"] .lang-en { display: inline; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--linen);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

::selection { background: var(--ink); color: var(--linen); }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.void :focus-visible { outline-color: var(--cream); }

/* Плавающая пилюля не должна накрывать заголовок при переходе по якорю */
section[id], header[id] { scroll-margin-top: 96px; }

.well { width: 100%; max-width: var(--well); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------- 3. Типографика */
/* Подпись системы Cosmos: шёпот-вес антиквы на display-размерах.
   Ниже 400 не поднимаемся, отрицательный трекинг растёт вместе с кеглем. */
.display-xl, .display, .h-lg, .h, .h-sm {
  font-family: var(--serif);
  font-weight: 250;
  margin: 0;
  color: var(--ink);
}
.display-xl { font-size: clamp(40px, 6.4vw, 72px); line-height: 1.04; letter-spacing: -0.03em; }
.display    { font-size: clamp(33px, 4.7vw, 54px); line-height: 1.08; letter-spacing: -0.028em; }
.h-lg       { font-size: clamp(27px, 3.3vw, 37px); line-height: 1.12; letter-spacing: -0.026em; font-weight: 300; }
.h          { font-size: clamp(23px, 2.5vw, 30px); line-height: 1.16; letter-spacing: -0.024em; font-weight: 300; }
.h-sm       { font-size: clamp(19px, 1.7vw, 23px); line-height: 1.28; letter-spacing: -0.016em; font-weight: 400; }

.lede { font-size: clamp(17px, 1.35vw, 19px); line-height: 1.55; color: var(--stone); letter-spacing: -0.012em; margin: 0; }
.body { font-size: 16px; line-height: 1.55; color: var(--stone); margin: 0; }
.caption { font-size: 14px; line-height: 1.5; color: var(--pebble); letter-spacing: 0; margin: 0; }

/* Надзаголовок — маленький штамп, а не подпись */
.eyebrow {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stone);
  margin: 0;
}
.eyebrow--num { display: inline-flex; align-items: baseline; gap: 12px; }
.eyebrow--num b { font-weight: 500; color: var(--pebble); }

em.italic { font-style: italic; font-family: var(--serif); }

/* --------------------------------------------------------- 4. Кнопки */
/* Заливка и обводка всегда парой: одинаковые паддинги и радиус */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: var(--r);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.011em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform var(--spring-ui);
}
.btn--fill { background: var(--ink); color: var(--paper); position: relative; overflow: hidden; }
/* По краю главной кнопки при наведении проходит тот же рез */
.btn--fill::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--ember);
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity 0.2s var(--ease);
}
.btn--fill:hover::after { opacity: 1; animation: btn-cut 0.75s var(--ease) forwards; }
@keyframes btn-cut {
  0%        { clip-path: inset(0 100% 0 0); }
  60%       { clip-path: inset(0 0 0 0); }
  100%      { clip-path: inset(0 0 0 0); opacity: 0; }
}
.btn--fill:hover { background: #2a2726; transform: translateY(-1px); }
.btn--line { background: var(--paper); color: var(--ink); border-color: var(--hairline); }
.btn--line:hover { border-color: rgba(13, 13, 13, 0.3); transform: translateY(-1px); }
.btn--sm { padding: 10px 18px; font-size: 15px; }

.link-play { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; color: var(--ink); }
.link-play svg { transition: transform 0.3s var(--ease); }
.link-play:hover svg { transform: translateX(4px); }

/* --------------------------------------------------------- 5. Навигация-пилюля */
.nav-wrap { position: fixed; inset: 0 0 auto 0; z-index: 80; padding: 14px clamp(12px, 3vw, 24px); pointer-events: none; }
.nav {
  pointer-events: auto;
  max-width: var(--well);
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 9px 9px 18px;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--hairline-2);
  border-radius: var(--r-pill);
  transition: background-color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.nav.is-dark {
  background: rgba(16, 9, 4, 0.82);
  border-color: rgba(255, 237, 215, 0.16);
  color: var(--cream);
}
.nav.is-dark .nav__link { color: rgba(255, 237, 215, 0.72); }
.nav.is-dark .nav__link:hover { color: var(--cream); }
.nav.is-dark .btn--fill { background: var(--cream); color: var(--walnut); }

.mark { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mark__glyph { width: 19px; height: 19px; flex-shrink: 0; }
.mark__name { font-family: var(--serif); font-size: 19px; font-weight: 400; letter-spacing: -0.018em; }

.nav__links { display: flex; gap: 4px; margin-left: 18px; }
.nav__link { padding: 8px 12px; font-size: 15px; color: var(--stone); border-radius: var(--r-pill); transition: color 0.2s var(--ease), background-color 0.2s var(--ease); }
.nav__link:hover { color: var(--ink); background: rgba(13, 13, 13, 0.05); }
.nav__spacer { flex: 1; }

/* Переключатель языка — две буквы, активная темнеет. Тише, чем всё остальное
   в пилюле: язык нужен один раз, а не при каждом заходе. */
.lang { display: flex; align-items: center; gap: 1px; margin-right: 6px; flex-shrink: 0; }
.lang__btn {
  padding: 7px 7px;
  background: none;
  border: 0;
  border-radius: var(--r-pill);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--pebble);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.lang__btn:hover { color: var(--stone); }
.lang__btn[aria-pressed="true"] { color: var(--ink); }
.lang__sep { font-size: 13px; color: rgba(13, 13, 13, 0.18); }

.nav.is-dark .lang__btn { color: rgba(255, 237, 215, 0.5); }
.nav.is-dark .lang__btn:hover { color: rgba(255, 237, 215, 0.75); }
.nav.is-dark .lang__btn[aria-pressed="true"] { color: var(--cream); }
.nav.is-dark .lang__sep { color: rgba(255, 237, 215, 0.28); }

.nav__burger { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; background: none; border: 0; border-radius: var(--r-pill); cursor: pointer; }
.nav__burger span { display: block; width: 17px; height: 1.5px; background: currentColor; position: relative; transition: transform 0.3s var(--ease); }
.nav__burger span::before, .nav__burger span::after { content: ""; position: absolute; left: 0; width: 17px; height: 1.5px; background: currentColor; transition: transform 0.3s var(--ease); }
.nav__burger span::before { top: -5px; }
.nav__burger span::after { top: 5px; }
.nav.is-open .nav__burger span { background: transparent; }
.nav.is-open .nav__burger span::before { transform: translateY(5px) rotate(45deg); }
.nav.is-open .nav__burger span::after { transform: translateY(-5px) rotate(-45deg); }

/* Порог измерен, не угадан: полная пилюля с русскими подписями (самыми
   длинными из трёх языков) держится без переноса до 1070px, ломается на
   1060px — это плотный флекс без хайфенации, а не запас с большим полем.
   1080px даёт зазор в 20px на округления и рендер шрифта в разных браузерах. */
@media (max-width: 1080px) {
  .nav { flex-wrap: wrap; padding: 9px 9px 9px 16px; border-radius: 22px; }
  .nav__burger { display: inline-flex; }
  .nav__links { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; margin: 6px 0 4px; }
  .nav.is-open .nav__links { display: flex; }
  .nav__link { padding: 12px 8px; font-size: 17px; }
  .nav .btn { display: none; }
  .nav.is-open .btn { display: inline-flex; order: 4; width: 100%; justify-content: center; margin-bottom: 4px; }
}

/* --------------------------------------------------------- 6. Герой */
.hero { position: relative; padding: clamp(140px, 20vh, 200px) 0 clamp(60px, 8vw, 96px); overflow: hidden; }
.hero__inner { position: relative; z-index: 2; text-align: center; max-width: 1060px; margin-inline: auto; }
.hero .display-xl { margin: 22px 0 0; }
.hero .lede { max-width: 620px; margin: 26px auto 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 38px; }
.hero__note { margin-top: 22px; }

/* Разлетевшиеся плитки — «полароиды на стене галереи» */
.scatter { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scatter__tile {
  position: absolute;
  background: var(--paper);
  border-radius: var(--r-tile);
  border: 1px solid var(--hairline-2);
  padding: 10px;
  color: var(--ink);
  opacity: 0;
  transform: translate3d(var(--tx, 0), var(--ty, 0), 0);
  rotate: var(--rot, 0deg);
  animation: tile-in 1.1s var(--ease) forwards;
}
.scatter__tile svg { width: 100%; height: 100%; }
/* Плитка может держать не один снимок, а несколько внахлёст — переключает
   JS. Кадр обрезается по верхнему краю, не по центру: не срежет голову
   фигурке, если вся вещь в кадр не влезает. */
.scatter__tile img {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  opacity: 0;
  transition: opacity 1s var(--ease);
}
.scatter__tile img.is-active { opacity: 1; }
@keyframes tile-in { to { opacity: 1; } }

.scatter__tile:nth-child(1) { top: 13%;  left: 4%;   width: 176px; height: 234px; --rot: -6deg;  animation-delay: 0.35s; }

/* Живая плитка — тот же полароид, только внутри рамки идёт съёмка печати */
.scatter__tile--film .film {
  position: absolute;
  inset: 10px;
  width: calc(100% - 20px);
  height: calc(100% - 20px);
  object-fit: cover;
  border-radius: 8px;
}
.scatter__tile--film.has-film svg { opacity: 0; transition: opacity 0.9s var(--ease); }
/* Копия слоя должна лечь на content-box, а не на padding-box плитки */
.scatter__tile .layer-built { inset: 10px; width: auto; height: auto; }
.scatter__tile:nth-child(2) { top: 52%;  left: 11%;  width: 104px; height: 104px; --rot: 5deg;   animation-delay: 0.5s; }
.scatter__tile:nth-child(3) { top: 72%;  left: 20%;  width: 92px;  height: 92px;  --rot: -3deg;  animation-delay: 0.65s; }
.scatter__tile:nth-child(4) { top: 13%;  right: 6%;  width: 116px; height: 152px; --rot: 7deg;   animation-delay: 0.42s; }
.scatter__tile:nth-child(5) { top: 49%;  right: 10%; width: 100px; height: 100px; --rot: -5deg;  animation-delay: 0.57s; }
.scatter__tile:nth-child(6) { top: 74%;  right: 19%; width: 88px;  height: 88px;  --rot: 4deg;   animation-delay: 0.72s; }

/* Шесть плиток внахлёст держатся только при широком запасе по бокам:
   .hero__inner держит текст в колонке до 1060px, но сама колонка тянется
   почти во всю ширину, как только viewport становится у́же примерно 1330px —
   и плитки начинают садиться поверх заголовка. Мерила пересечения
   геометрией (getClientRects по строкам текста, не по блоку параграфа) на
   всём диапазоне 375–1440px: чисто только на ≥1320px. Ниже порога шести
   карточкам в ряд не хватает ширины без обрезки или прокрутки, а решёткой
   они рассеивают внимание от заголовка — поэтому вместо сетки одна плитка,
   и в ней кадры сменяют друг друга в случайном порядке (main.js). */
@media (max-width: 1360px) {
  .hero { display: flex; flex-direction: column; }
  .hero__inner { order: 1; }
  .scatter {
    order: 2;
    position: relative;
    inset: auto;
    width: 260px;
    height: 170px;
    margin: 40px auto 0;
  }
  .scatter .scatter__tile,
  .scatter .scatter__tile--film {
    position: absolute;
    inset: 0;
    top: 0; left: 0; right: auto;
    width: 100%; height: 100%;
    rotate: none;
    margin: 0;
    opacity: 0;
    animation: none;
    transition: opacity 1s var(--ease);
    z-index: 0;
  }
  .scatter .scatter__tile.is-active,
  .scatter .scatter__tile--film.is-active {
    opacity: 1;
    z-index: 1;
  }
}
@media (max-width: 560px) {
  .scatter { width: 232px; height: 152px; }
}

/* --------------------------------------------------------- 7. Тёмная полоса (ORYZO) */
.void {
  position: relative;
  background: var(--walnut);
  color: var(--cream);
  padding: var(--band) 0;
  overflow: hidden;
}
.void::before, .void::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--cork) 0 6px, transparent 6px 12px);
  animation: dash-run 5s linear infinite;
  animation-play-state: paused;
}
.void.is-running::before, .void.is-running::after { animation-play-state: running; }
@keyframes dash-run { to { background-position-x: 12px; } }
.void::before { top: 0; }
.void::after  { bottom: 0; }
.void .eyebrow { color: rgba(255, 237, 215, 0.6); }
.void .body, .void .lede { color: rgba(255, 237, 215, 0.72); }
.void .h-lg, .void .display, .void .h { color: var(--cream); }

/* Три колонки: текст / объект / текст */
.void__grid {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px) 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.void__stage { perspective: 1200px; }
.void__object {
  transform: rotateX(var(--rx, 46deg)) rotateZ(var(--rz, -8deg));
  transform-origin: 50% 60%;
  color: var(--cream);
}
.void__object svg { width: 100%; height: auto; }

/* Плёнка живёт в той же ячейке, что и чертёж, и разворачивается вместе с ним.
   Появляется, только когда браузер действительно может её играть. */
.void__object { position: relative; }
.film { opacity: 0; transition: opacity 0.9s var(--ease); pointer-events: none; }
.film.is-live { opacity: 1; }
/* На стыке петли короткий провал — рез не должен «дёргаться» раз в четыре секунды */
.film.at-seam { opacity: 0; transition: opacity 0.32s linear; }
.void__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--r);
}
.void__object.has-film svg { opacity: 0.28; transition: opacity 0.9s var(--ease); }
/* Подсказку компоновщику держим только пока секция в кадре: постоянный
   will-change стоит памяти и ничего не ускоряет, когда никто не смотрит */
.void__object.is-running { will-change: transform; }
.void__right { text-align: right; }
.void__left  { text-align: left; }

.spec { list-style: none; margin: 26px 0 0; padding: 0; }
.spec li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px dashed var(--cork);
  background-repeat: no-repeat;
  font-size: 14px;
  letter-spacing: 0.02em;
}
.spec li:first-child { border-top: 1px dashed var(--cork); }
.spec b { font-weight: 500; color: var(--cream); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; }
.spec span { color: var(--driftwood); text-align: right; }
.void__right .spec li { flex-direction: row-reverse; }
.void__right .spec span { text-align: left; }

.ember { color: var(--ember); }
a.ember { border-bottom: 1px solid rgba(220, 80, 0, 0.4); padding-bottom: 1px; }
a.ember:hover { border-bottom-color: var(--ember); }

.void__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: clamp(40px, 6vw, 72px); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--driftwood); }

@media (max-width: 900px) {
  .void__grid { grid-template-columns: 1fr; }
  .void__right, .void__left { text-align: left; }
  .void__right .spec li { flex-direction: row; }
  .void__right .spec span { text-align: right; }
  .void__stage { order: -1; max-width: 340px; margin-inline: auto; }
}

/* --------------------------------------------------------- 8. Секции и сетки */
.band { padding: var(--band) 0; }
.band--paper { background: var(--paper); }

.band__head { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: clamp(36px, 5vw, 56px); }
.band__head .lede { max-width: 560px; }
@media (min-width: 860px) {
  .band__head { grid-template-columns: 1.1fr 1fr; align-items: end; gap: 40px; }
  .band__head .lede { justify-self: end; }
}

/* Карточка-с-картинкой: изображение во всю карточку, подпись под ним */
/* Строгая трёхколоночная сетка — шесть карточек ложатся в два ровных ряда */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 900px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .cards { grid-template-columns: 1fr; } }
.card { display: flex; flex-direction: column; gap: var(--pad); }
.card__art {
  aspect-ratio: 4 / 3;
  border-radius: var(--r);
  background: var(--linen);
  border: 1px solid var(--hairline-2);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background-color 0.4s var(--ease);
}
.band--paper .card__art { background: var(--linen); }
.card__art svg { width: 100%; height: 100%; padding: 13%; color: var(--ink); transition: transform var(--spring-tile); }
.card:hover .card__art svg { transform: scale(1.05) rotate(-1.5deg); }
.card h3 { margin: 0; font-family: var(--serif); font-weight: 350; font-size: 20px; letter-spacing: -0.02em; }
.card p { margin: -6px 0 0; font-size: 15px; line-height: 1.5; color: var(--stone); }
.card__tag { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pebble); }

/* --------------------------------------------------------- 9. Стена работ */
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--gap); }
.chip {
  padding: 9px 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hairline);
  background: var(--paper);
  font-size: 14px;
  color: var(--stone);
  cursor: pointer;
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease), border-color 0.25s var(--ease), transform var(--spring-ui);
}
.chip:active { transform: scale(0.96); }
.chip:hover { border-color: rgba(13, 13, 13, 0.3); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.wall { columns: 3; column-gap: var(--gap); }
.work {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 var(--gap);
  transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.wall .work.is-leaving { opacity: 0; transform: scale(0.97); }
.wall .work.is-entering { opacity: 0; transform: scale(0.97); animation: work-in var(--spring-enter) 0.02s forwards; }
.work.is-hidden { display: none; }
@keyframes work-in { to { opacity: 1; transform: none; } }
.work__frame {
  position: relative;
  border-radius: var(--r-tile);
  background: var(--linen);
  border: 1px solid var(--hairline-2);
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
}
.band--paper .work__frame { background: var(--linen); }
.work--tall .work__frame { aspect-ratio: 3 / 4; }
.work--wide .work__frame { aspect-ratio: 4 / 3; }
/* Фотография работы. Пока её нет — в плитке стоит чертёж, и он же остаётся,
   если файл не подгрузился. Никаких битых картинок: плитка всегда чем-то занята. */
.work__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease), transform var(--spring-tile);
}
.work__frame.has-photo .work__photo { opacity: 1; }
.work__frame.has-photo svg { display: none; }
.work:hover .work__frame.has-photo .work__photo { transform: scale(1.04); }

.work__frame svg { width: 100%; height: 100%; padding: 17%; color: var(--ink); transition: transform var(--spring-tile); }
.work--wide .work__frame svg { padding: 13%; }
.work:hover .work__frame svg { transform: scale(1.06); }
.work__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 120% at 50% 0%, rgba(13, 13, 13, 0.035), transparent 60%);
  pointer-events: none;
}
.work__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; }
/* min-width:0 — иначе заголовок отказывается сжиматься ниже собственной
   ширины в узкой колонке масонри и подпись справа выезжает за карточку,
   скрытая под overflow-x:hidden на body: не прокрутка, а немая обрезка. */
.work__meta h3 { margin: 0; min-width: 0; font-family: var(--serif); font-weight: 350; font-size: 18px; letter-spacing: -0.02em; }
.work__meta span { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pebble); white-space: nowrap; }

@media (max-width: 980px) { .wall { columns: 2; } }
@media (max-width: 620px) {
  .wall { columns: 1; }
  .work__meta { flex-direction: column; gap: 4px; }
  .work__meta span { white-space: normal; }
}

/* --------------------------------------------------------- 10. Сказочная полоса (Structured) */
.tale {
  background: var(--putty);
  color: var(--ink);
  padding: var(--band) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.tale .lede, .tale .body { color: var(--graphite); }
.tale .eyebrow { color: var(--graphite); }

.tale__head { text-align: center; max-width: 720px; margin: 0 auto clamp(44px, 6vw, 72px); }
.tale__head .lede { margin-top: 20px; }

/* Круглые виньетки — процесс как четыре сцены */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(28px, 4vw, 48px); }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; } }
.step { text-align: center; }
.step__vig {
  width: clamp(120px, 15vw, 168px);
  height: clamp(120px, 15vw, 168px);
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--vellum);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.step__vig svg { width: 100%; height: 100%; padding: 24%; color: var(--ink); }
.step__no { font-size: 12px; letter-spacing: 0.16em; color: var(--graphite); }
.step h3 { margin: 10px 0 8px; font-family: var(--serif); font-weight: 350; font-size: 22px; letter-spacing: -0.02em; }
.step p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--graphite); }

/* Монументальный вордмарк, который держит нижнюю половину */
.tale__mark {
  margin-top: clamp(56px, 8vw, 104px);
  text-align: center;
  font-family: var(--serif);
  font-weight: 250;
  font-size: clamp(62px, 17.5vw, 250px);
  line-height: 0.86;
  letter-spacing: -0.042em;
  color: var(--ink);
  opacity: 0.9;
  user-select: none;
}
.tale__mark em { font-style: italic; }

/* --------------------------------------------------------- 11. Что вы получаете */
.deliver { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); }
@media (min-width: 900px) { .deliver { grid-template-columns: 0.9fr 1.1fr; } }

.ledger { border-top: 1px solid var(--hairline); }
.ledger__row { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--hairline); }
@media (min-width: 640px) { .ledger__row { grid-template-columns: 200px 1fr; gap: 24px; align-items: baseline; } }
.ledger__row dt { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pebble); margin: 0; }
.ledger__row dd { margin: 0; font-size: 16px; line-height: 1.55; color: var(--stone); }
.ledger__row dd b { font-weight: 500; color: var(--ink); }

/* --------------------------------------------------------- 12. Вопросы */
.faq { border-top: 1px solid var(--hairline); }
.faq__item { border-bottom: 1px solid var(--hairline); }
.faq__q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 26px 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--serif);
  font-weight: 350;
  font-size: clamp(18px, 1.85vw, 21px);
  letter-spacing: -0.016em;
  color: var(--ink);
}
.faq__sign { position: relative; width: 15px; height: 15px; flex-shrink: 0; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: var(--ink); transition: transform 0.35s var(--ease); }
.faq__sign::before { top: 7px; left: 0; width: 15px; height: 1.5px; }
.faq__sign::after  { left: 7px; top: 0; width: 1.5px; height: 15px; }
.faq__item.is-open .faq__sign::after { transform: scaleY(0); }
.faq__a { overflow: hidden; height: 0; transition: height 0.4s var(--ease); }
.faq__a > div { padding: 0 0 26px; max-width: 700px; font-size: 16px; line-height: 1.6; color: var(--stone); }

/* --------------------------------------------------------- 13. Заказ */
.order { display: grid; grid-template-columns: 1fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (min-width: 940px) { .order { grid-template-columns: 1fr 1fr; } }

.form__slot { display: grid; }
.form { display: grid; gap: 14px; }
.form__thanks { display: none; }
.form__slot.is-sent .form { display: none; }
.form__slot.is-sent .form__thanks { display: block; }
.field { display: grid; gap: 8px; }
.field label { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pebble); }
.field input, .field textarea, .field select {
  width: 100%;
  padding: 15px 16px;
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: var(--r);
  font-size: 16px;
  letter-spacing: -0.011em;
  transition: border-color 0.25s var(--ease);
}
.field textarea { min-height: 132px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: rgba(13, 13, 13, 0.45); }
.field ::placeholder { color: var(--pebble); }
.form__row { display: grid; gap: 14px; }
@media (min-width: 560px) { .form__row { grid-template-columns: 1fr 1fr; } }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 6px; }

/* Список контактов только на прямую переписку — пока в CONTACTS (main.js)
   пусто, пункт скрыт целиком: «укажите адрес» вместо настоящей почты
   выглядит как сломанный сайт, а не как приглашение написать. */
.contacts { display: none; list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--hairline); }
.contacts.is-visible { display: block; }
.contacts li { display: none; justify-content: space-between; gap: 18px; padding: 16px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; }
.contacts li.is-visible { display: flex; }
.contacts li span { color: var(--pebble); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; }
.contacts a:hover { border-bottom: 1px solid var(--hairline); }

/* --------------------------------------------------------- 14. Подвал */
.foot { padding: clamp(48px, 6vw, 72px) 0 40px; border-top: 1px solid var(--hairline); }
.foot__top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; align-items: flex-start; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot__nav a { font-size: 15px; color: var(--stone); }
.foot__nav a:hover { color: var(--ink); }
.foot__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 44px; font-size: 13px; color: var(--pebble); }

/* --------------------------------------------------------- 15. Появление при прокрутке */
.rise { opacity: 0; transform: translateY(12px); transition: opacity 0.55s var(--ease), transform 0.55s var(--ease); }
.rise.is-in { opacity: 1; transform: none; }
/* Две ступени, а не пять: заголовок и то, что при нём. Дальше — все разом */
.rise[data-d="1"], .rise[data-d="2"] { transition-delay: 0.07s; }
.rise[data-d="3"], .rise[data-d="4"], .rise[data-d="5"] { transition-delay: 0.14s; }

/* --------------------------------------------------- 15b. Знак движения
   «Рез» — короткий штрих идёт по контуру и не останавливается. Один жест
   на всём сайте, от глифа в шапке до панели в тёмной полосе. Пройденное
   гаснет, чтобы читалось направление: линия не мерцает, она прокладывается. */

.trace-run {
  fill: none;
  stroke: var(--ember);
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-dasharray: var(--dash, 26) var(--len, 1000);
  stroke-dashoffset: var(--len, 1000);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}
.is-running .trace-run {
  opacity: 1;
  animation: cut-run var(--dur, 6s) linear infinite;
}
@keyframes cut-run {
  from { stroke-dashoffset: calc(var(--len) + var(--dash) * 1px); }
  to   { stroke-dashoffset: 0; }
}

/* Контур под искрой не гаснет: чертёж должен читаться и на стоп-кадре.
   Единственное исключение — тёмная полоса, где рез и есть главное событие. */
.void .trace-run {
  stroke-width: 3.4;
  filter: drop-shadow(0 0 5px rgba(220, 80, 0, 0.55));
}
.void [data-trace] svg g > *:not(.trace-run) { transition: opacity 0.6s var(--ease); }
.void [data-trace].is-running svg g > *:not(.trace-run) { opacity: 0.6; }

/* --------------------------------------------------- 15b2. «Слой»
   Двойник «Реза» для печати. Поверх чертежа лежит его копия горячим цветом,
   но видна из неё только узкая полоса — она и есть сопло. Полоса идёт снизу
   вверх, за ней материал остывает обратно в чернила. Так вещь не «краснеет»
   целиком, а именно печатается.

   Мотивы разведены по материалу: по панелям под лазер идёт искра, по вещам
   под принтер — слой. Движение говорит, какой станок делает вещь, раньше,
   чем человек прочтёт подпись. */

[data-layer]:where(:not(.scatter__tile)) { position: relative; }

.layer-built {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 58%, transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 42%, #000 58%, transparent);
  -webkit-mask-size: 100% 24%;
          mask-size: 100% 24%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.layer-built * { stroke: var(--ember); }

[data-layer].is-running .layer-built {
  opacity: 1;
  animation: build var(--build-dur, 5.4s) linear infinite;
}
@keyframes build {
  from { -webkit-mask-position: 0 118%; mask-position: 0 118%; }
  to   { -webkit-mask-position: 0 -18%; mask-position: 0 -18%; }
}

/* --------------------------------------------------- 15c. «Раскрой»
   Плитки героя качаются, как детали, оставшиеся лежать на столе станка. */
.scatter__tile {
  animation: tile-in 1.1s var(--ease) forwards, tile-sway var(--sway, 15s) var(--ease) infinite;
  animation-delay: inherit;
}
@keyframes tile-sway {
  0%, 100% { rotate: 0deg; }
  50%      { rotate: 1.6deg; }
}

/* --------------------------------------------------- 15d. Знак в шапке
   По вырезу в знаке идёт тот же рез, что по орнаментам на плитках, — только
   в системе координат 24×24, поэтому и штрих тоньше. */
.mark__glyph .trace-run { stroke-width: 2; }

/* --------------------------------------------------------- 16. Без движения */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .rise { opacity: 1; transform: none; }
  .scatter__tile { opacity: 1; rotate: var(--rot, 0deg); }
  .trace-run { display: none; }
  .layer-built { display: none; }
}