/* ============================================================
   askolika.com — main.css
   Один файл стилей на весь сайт.
   Структура: токены → шрифты → база → навигация → главная →
   страницы проектов → quiet watching → журнал → about/contact →
   анимации → reduced motion → мобильная версия.
   ============================================================ */

/* ---- ТОКЕНЫ ----------------------------------------------------
   Все цвета и базовые настройки сайта. Менять только здесь. */
:root {
  --ground: #FAF8F5;        /* фон: светлая тёплая бумага */
  --ink: #1A1815;           /* текст: очень тёмный тёплый серый */
  --ink-soft: #5C5751;      /* вторичный текст (тёмный — для читаемости) */
  --amber: #B4761F;         /* единственный акцент — только ссылки и hover */
  --placeholder: #EDEAE4;   /* нейтральная заглушка вместо изображений */
  --line: rgba(26, 24, 21, 0.12);

  --font-grotesk: "Space Grotesk", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --measure: 1200px;        /* ширина контентной колонки */
  --pad: 5vw;               /* боковые поля */

  /* движение: всё медленное, без пружин */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.9s;
}

/* ---- ШРИФТЫ (self-hosted, латиница) ---- */
@font-face {
  font-family: "Space Grotesk";
  src: url("/fonts/space-grotesk-300-700.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}

/* ---- БАЗА ---- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-grotesk);
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }

a { color: inherit; }

::selection { background: var(--amber); color: var(--ground); }

.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--pad); }

/* Плавный кросс-фейд между страницами (View Transitions API). */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation-duration: 0.35s; }
::view-transition-new(root) { animation-duration: 0.35s; }

/* ---- ДВА РЕГИСТРА ТЕКСТА ----------------------------------------
   .voice — её голос: строчные буквы, крупно. НИКОГДА не применять
            text-transform к тексту голоса.
   .mono  — «рамка»: подписи, роли, годы, даты. Всегда капс. */
.mono {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1.9;
}

.mono a {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s var(--ease);
}
.mono a:hover, .mono a:focus-visible { color: var(--amber); }

.mono .accent { color: var(--amber); }

/* Строки про принты — обычный моно-капс, как все подписи */
.prints a, .prints-line a { color: var(--amber); }

/* Голос — большие высказывания */
.voice {
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  font-weight: 400;
  line-height: 1.42;
  letter-spacing: -0.005em;
  max-width: 36ch;
}

/* ---- НАВИГАЦИЯ ---- */
.site-nav {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.6rem var(--pad);
}
.site-nav .nav-links { display: flex; gap: 2.2rem; list-style: none; }

/* Кнопка «menu» — только на телефоне */
.nav-toggle {
  display: none;
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.4rem 0;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}

/* На внутренних страницах навигация в потоке, не поверх видео */
.site-nav--static { position: static; }

/* ---- ГЛАВНАЯ: ЭКРАН 1 — ХИРО-ФИЛЬМ ---- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
}

.hero-media {
  position: absolute;
  inset: 0;
  background: var(--placeholder);
  overflow: hidden;
}
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* тёмная вуаль сверху и снизу — белый текст читается поверх любого кадра */
.hero-media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(to bottom, rgba(16, 14, 12, 0.35) 0%, rgba(16, 14, 12, 0) 22%),
    linear-gradient(to top, rgba(16, 14, 12, 0.55) 0%, rgba(16, 14, 12, 0.18) 36%, rgba(16, 14, 12, 0) 58%);
}

/* На главной навигация и текст хиро — белые */
.site-nav--overlay { color: #FAF8F5; }
.hero-content { color: #FAF8F5; }
.hero-signature.mono { color: rgba(250, 248, 245, 0.78); }
.hero .scroll-hint { background: #FAF8F5; opacity: 0.7; }

.hero-content {
  position: relative;
  z-index: 2;
  padding: 0 var(--pad) 6.5rem;
  max-width: var(--measure);
}

.hero-line {
  font-size: clamp(1.4rem, 3.1vw, 2.7rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 30ch;
}

.hero-signature { margin-top: 2.4rem; color: var(--ink-soft); }

/* минимальный индикатор скролла: тонкая вертикальная линия */
.scroll-hint {
  position: absolute;
  bottom: 2rem; right: var(--pad);
  z-index: 2;
  width: 1px; height: 44px;
  background: var(--ink);
  opacity: 0.5;
  transform-origin: top;
  animation: scroll-hint 2.6s var(--ease) infinite;
}
@keyframes scroll-hint {
  0% { transform: scaleY(0); }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---- ЭКРАН 2 — СТРОКА ДОВЕРИЯ ---- */
.trust {
  padding: 13rem var(--pad) 0;
  text-align: center;
}

/* ---- ЭКРАН 4 — ИНДЕКС РАБОТ (пазл + мозаика) ---- */
.works { padding: 11rem var(--pad) 2rem; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }

.works-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 5rem;
  row-gap: 8rem;
}

.work-card { text-decoration: none; }

.work-card .frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--placeholder);
  overflow: hidden;
}
.work-card .frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.work-card:hover .frame img { transform: scale(1.025); }

/* холст мозаики поверх обложки (создаёт скрипт) */
.frame canvas.mosaic {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
  transition: opacity 0.5s var(--ease);
}

.work-card h3 {
  font-size: clamp(1.25rem, 1.7vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-top: 1.1rem;
  transition: color 0.3s var(--ease);
}
.work-card:hover h3 { color: var(--amber); }

.work-card .meta { color: var(--ink-soft); margin-top: 0.3rem; }

/* ---- ЭКРАН 5 — ИНТЕРСТИШЛ (полноэкранное фото) ---- */
.interstitial {
  height: 92vh;
  margin: 14rem 0;
  overflow: hidden;
}
.interstitial .zoom {
  width: 100%; height: 100%;
  background: var(--placeholder) center / cover no-repeat;
  animation: slow-zoom 42s linear infinite alternate;
  animation-play-state: paused;
}
.interstitial.in-view .zoom { animation-play-state: running; }
@keyframes slow-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.07); }
}

/* ---- ЭКРАН 6 — QUIET WATCHING ПРЕВЬЮ ---- */
.quiet-preview { padding: 2rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }

.quiet-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  margin-top: 4.5rem;
}
.quiet-grid .frame { aspect-ratio: 3 / 4; background: var(--placeholder); overflow: hidden; }
.quiet-grid .frame img { width: 100%; height: 100%; object-fit: cover; }

.quiet-preview .more { margin-top: 2.5rem; }

/* ---- ЭКРАН 7 — ЖУРНАЛ ПРЕВЬЮ / ИНДЕКС ЖУРНАЛА ---- */
.journal-preview { padding: 14rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }

.journal-list { list-style: none; margin-top: 3rem; }
.journal-item { border-top: 1px solid var(--line); }
.journal-item a {
  display: grid;
  grid-template-columns: 11rem 1fr;
  column-gap: 4.5rem;
  padding: 2.1rem 0;
  text-decoration: none;
}
.journal-item .date { color: var(--ink-soft); }
.journal-item h3 {
  font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em;
  transition: color 0.3s var(--ease);
}
.journal-item a:hover h3 { color: var(--amber); }
.journal-item .opening {
  color: var(--ink-soft);
  margin-top: 0.3rem;
  font-size: 1rem;
  max-width: 52ch;
}

/* ---- БЛОК «ЧТО МЫ МОЖЕМ СДЕЛАТЬ ВМЕСТЕ» (перед письмами) ---- */
.about-block { padding: 14rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.about-block .intro { margin-top: 3rem; }

.services { list-style: none; margin-top: 4.5rem; }
.services li {
  border-top: 1px solid var(--line);
  padding: 1.5rem 0;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 4rem;
}
.services li:last-child { border-bottom: 1px solid var(--line); }
.services .what {
  font-size: clamp(1.2rem, 1.9vw, 1.6rem);
  font-weight: 500;
  letter-spacing: -0.01em;
}
.services .how { color: var(--ink-soft); align-self: center; font-size: 0.98rem; line-height: 1.5; }

.about-block .proof { margin-top: 4.5rem; color: var(--ink-soft); }
.about-block .proof p + p { margin-top: 1.2rem; }
.about-block .more { margin-top: 3rem; }

/* ---- ЭКРАН 8 — ПИСЬМА (подвал каждой страницы) ---- */
.letters { padding: 16rem var(--pad) 5rem; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }

.letters .mailto {
  display: inline-block;
  font-size: clamp(1.7rem, 4.4vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  text-decoration: none;
  margin-top: 2.2rem;
  transition: color 0.4s var(--ease);
}
.letters .mailto:hover, .letters .mailto:focus-visible { color: var(--amber); }

.letters .small-links {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2rem;
  margin-top: 3.5rem;
  color: var(--ink-soft);
  list-style: none;
}

.letters .prints-line { margin-top: 4rem; color: var(--ink-soft); }

/* ============================================================
   СТРАНИЦЫ ПРОЕКТОВ
   ============================================================ */

/* Обложка: горизонтальное видео — на всю ширину,
   вертикальное (--portrait) — колонной по центру */
.project-cover { margin-top: 4.5rem; }
.project-cover video, .project-cover img { width: 100%; }
.project-cover--portrait { display: flex; justify-content: center; padding-inline: var(--pad); }
.project-cover--portrait video { max-width: min(520px, 100%); }

.project-head { padding: 3.5rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.project-head h1 {
  font-size: clamp(2.2rem, 5vw, 4.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.project-head .year { color: var(--ink-soft); margin-top: 0.8rem; }

/* Кредитсы: две колонки с широким зазором */
.project-credits { padding: 4.5rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.credits {
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: 4.5rem;
  row-gap: 0.35rem;
  max-width: 620px;
}
.credits dt { color: var(--ink-soft); }
.credits dd { margin: 0; }

/* Голос — единственное место на странице, где она говорит */
.project-voice {
  padding: 12rem var(--pad);
  display: flex;
  justify-content: center;
}

/* Сам фильм */
.film-embed { padding-inline: var(--pad); max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.film-embed + .film-embed { margin-top: 4rem; }
.film-embed .player {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--placeholder);
}
.film-embed iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
.film-embed .embed-caption { margin-top: 1rem; color: var(--ink-soft); }

/* Фильм на всю ширину экрана */
.film-embed--full { max-width: none; padding-inline: 0; }
.film-embed--full .embed-caption { padding-inline: var(--pad); max-width: var(--measure); margin-inline: auto; }

/* Развёрнутая подпись под кадром — тот же моно-капс,
   что и все подписи на сайте (как в Sound of Life) */
.caption-note {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.85;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  max-width: 72ch;
  margin-top: 0.8rem;
}

/* Варианты кадров внутри процесса */
.figure--contained { max-width: min(620px, 88vw); margin-inline: auto; padding-inline: var(--pad); }
.figure--full { width: 100%; }
.figure--full img { width: 100%; }
.process--c figure.figure--wide { display: block; }
.process--c figure.figure--wide img { width: 100%; }
.process--c figure.figure--wide figcaption { margin-top: 1rem; }

/* ---- ПРОЦЕСС: три вёрстки ---- */
.process { margin-top: 14rem; }
.process figure img, .process figure video { width: 100%; height: auto; background: var(--placeholder); }
.process figcaption { color: var(--ink-soft); }

/* Вёрстка A — кадры на всю ширину, много воздуха между ними */
.process--a figure { margin-bottom: 25vh; }
.process--a figure:last-child { margin-bottom: 0; }
.process--a figcaption {
  max-width: var(--measure);
  margin: 1.1rem auto 0;
  padding-inline: var(--pad);
}

/* Вёрстка B — пары со смещением: большой кадр ~62%, малый ~28%,
   сторона большого кадра чередуется */
.process--b { padding-inline: var(--pad); max-width: calc(var(--measure) + 2 * var(--pad)); margin-inline: auto; }
.process--b .pair {
  display: grid;
  grid-template-columns: 62fr 10fr 28fr;
  align-items: start;
  margin-bottom: 18vh;
}
.process--b .pair:last-child { margin-bottom: 0; }
.process--b .pair > figure:first-child { grid-column: 1; }
.process--b .pair > figure:last-child { grid-column: 3; }
.process--b .pair--flip > figure:first-child { grid-column: 3; grid-row: 1; }
.process--b .pair--flip > figure:last-child { grid-column: 1; grid-row: 1; }
.process--b figcaption { margin-top: 1rem; }
.process--b .pair--single > figure { grid-column: 1 / -1; }

/* Вёрстка C — колонна-документ с рейкой подписей слева */
.process--c { padding-inline: var(--pad); max-width: calc(var(--measure) + 2 * var(--pad)); margin-inline: auto; }
.process--c figure {
  display: grid;
  grid-template-columns: 1fr 55%;
  column-gap: 4.5rem;
  justify-content: center;
  margin-bottom: 16vh;
}
.process--c figure:last-child { margin-bottom: 0; }
.process--c figcaption { grid-column: 1; grid-row: 1; align-self: start; text-align: left; }
.process--c figure img, .process--c figure video { grid-column: 2; grid-row: 1; }

/* Показы */
.screenings { padding: 12rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; color: var(--ink-soft); }

/* Следующая работа */
.next-work { padding: 12rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.next-work a {
  text-decoration: none;
  font-size: clamp(1.7rem, 3.6vw, 3rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  transition: color 0.4s var(--ease);
}
.next-work a:hover { color: var(--amber); }
.next-work .label { color: var(--ink-soft); }

/* SPASM: типографская страница, пустота — часть дизайна */
.spasm-composition { padding: 16rem var(--pad) 6rem; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.spasm-composition .voice { margin-top: 10rem; }
.spasm-composition .premiere {
  margin-top: 6rem;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.3rem);
}
.spasm-composition h1 {
  font-size: clamp(2.6rem, 7vw, 6.5rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

/* ============================================================
   QUIET WATCHING
   ============================================================ */
.quiet-intro { padding: 10rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.quiet-intro .voice + .voice { margin-top: 1.6rem; }
.quiet-intro .prints { margin-top: 3rem; color: var(--ink-soft); }

/* Плитка: колонки, родные пропорции картинок */
.quiet-masonry {
  columns: 3;
  column-gap: 2rem;
  padding: 6rem var(--pad) 0;
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin: 0 auto;
}
.quiet-masonry img {
  width: 100%;
  height: auto; /* атрибуты width/height резервируют место, не растягивая */
  margin-bottom: 2rem;
  break-inside: avoid;
  cursor: zoom-in;
}
.quiet-masonry .mosaic-wrap { margin-bottom: 2rem; }
.quiet-masonry .mosaic-wrap img { margin-bottom: 0; }

/* Лайтбокс */
.lightbox {
  position: fixed; inset: 0;
  z-index: 50;
  background: rgba(250, 248, 245, 0.97);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4vh 4vw;
  cursor: zoom-out;
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 78vh; max-width: 92vw; object-fit: contain; }
.lightbox .num { margin-top: 1.4rem; color: var(--ink); }
.lightbox .prints { margin-top: 0.4rem; color: var(--ink-soft); cursor: auto; }

/* ============================================================
   ЖУРНАЛ
   ============================================================ */
.page-head { padding: 10rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.page-head h1 {
  font-size: clamp(2rem, 4.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -0.015em;
}

.journal-index { padding: 5rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }

/* Одна запись */
.entry { padding: 10rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.entry .date { color: var(--ink-soft); }
.entry h1 {
  font-size: clamp(1.9rem, 4vw, 3.2rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  margin-top: 1rem;
}
.entry .voice { margin-top: 4rem; }
.entry .back { margin-top: 6rem; }

/* ============================================================
   ABOUT / CONTACT
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: 6rem;
  align-items: start;
  padding: 6rem var(--pad) 0;
  max-width: calc(var(--measure) + 2 * var(--pad));
  margin: 0 auto;
}
.about-grid .portrait { background: var(--placeholder); width: 100%; height: auto; }
.bio p { font-size: 1.06rem; line-height: 1.65; max-width: 58ch; }
.bio p + p { margin-top: 1.4rem; }
.bio a { color: var(--amber); text-decoration: none; }
.bio a:hover { text-decoration: underline; }
.about-facts { padding: 7rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; color: var(--ink-soft); }
.about-facts p + p { margin-top: 2rem; }

.contact-page { padding: 12rem var(--pad) 0; max-width: calc(var(--measure) + 2 * var(--pad)); margin: 0 auto; }
.contact-page .voice.lead { font-size: clamp(1.9rem, 4vw, 3.2rem); }
.contact-page .voice + .voice { margin-top: 2.5rem; }

/* ============================================================
   АНИМАЦИИ ПОЯВЛЕНИЯ
   ============================================================ */

/* мягкое появление: лёгкий сдвиг вверх + фейд */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.js [data-reveal].revealed { opacity: 1; transform: none; }

/* мозаика: пиксельный эффект — ЧИСТО поверх картинки.
   Сами картинки всегда видимы и никуда не двигаются: холст с
   крупными пикселями абсолютно позиционирован и не влияет на
   вёрстку, поэтому прыжков быть не может. Полная анимация
   с движением осталась только у карточек работ на главной. */
.mosaic-wrap { position: relative; display: block; }
.quiet-masonry .mosaic-wrap { break-inside: avoid; }
.mosaic-anim { position: relative; }

/* пазл: карточки съезжаются из небольших случайных смещений,
   каждая — когда доскроллили именно до неё */
.js .work-card {
  opacity: 0;
  transform: translate(var(--dx, 0), var(--dy, 0));
  transition: opacity 1.15s var(--ease), transform 1.15s var(--ease);
}
.js .work-card.assembled { opacity: 1; transform: none; }

/* ============================================================
   REDUCED MOTION — всё отключается, кроме зацикленного хиро-видео
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js .work-card { opacity: 1; transform: none; filter: none; transition: none; }
  .interstitial .zoom, .scroll-hint { animation: none; }
  .work-card .frame img { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}

/* ============================================================
   МОБИЛЬНАЯ ВЕРСИЯ
   ============================================================ */
@media (max-width: 760px) {
  .mono { font-size: 0.74rem; }
  .services li { grid-template-columns: 1fr; row-gap: 0.5rem; padding: 1.2rem 0; }
  .about-block { padding-top: 8rem; }

  /* ---- МЕНЮ НА ТЕЛЕФОНЕ ----
     Ссылки прячутся за кнопкой «menu» и открываются на весь экран. */
  .nav-toggle { display: block; }

  .site-nav { align-items: center; }

  .site-nav .nav-links {
    position: fixed;
    inset: 0;
    z-index: 45;
    background: var(--ground);
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0 var(--pad);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s var(--ease), visibility 0.35s;
  }
  .site-nav .nav-links a {
    display: block;
    padding: 1.1rem 0;              /* крупная область для пальца */
    font-size: 1.3rem;
    letter-spacing: 0.09em;
    color: var(--ink);
  }

  body.nav-open .site-nav .nav-links { opacity: 1; visibility: visible; }

  /* при открытом меню шапка держится поверх и всегда тёмная */
  body.nav-open { overflow: hidden; }
  body.nav-open .site-nav {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 50;
    color: var(--ink);
  }
  body.nav-open .site-nav .nav-toggle { color: var(--ink); }
  /* имя и «close» должны быть поверх открытого меню */
  body.nav-open .site-nav > a,
  body.nav-open .site-nav .nav-toggle { position: relative; z-index: 46; }

  .hero-content { padding-bottom: 4.5rem; }

  .trust { padding-top: 8rem; }

  .works { padding-top: 7rem; }
  .works-grid { grid-template-columns: 1fr; row-gap: 4.5rem; }

  /* Полноэкранные фото остаются горизонтальными, а не режутся в столб */
  .interstitial { height: auto; aspect-ratio: 16 / 9; margin: 8rem 0; }

  .quiet-grid { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; }

  .journal-preview { padding-top: 8rem; }
  .journal-item a { grid-template-columns: 1fr; row-gap: 0.2rem; padding: 1.6rem 0; }

  .letters { padding: 10rem var(--pad) 3.5rem; }
  .letters .small-links { gap: 1.4rem; }

  .credits { grid-template-columns: 1fr; row-gap: 0.15rem; }
  .credits dt { margin-top: 0.8rem; }

  .project-voice { padding: 7rem var(--pad); }
  .process { margin-top: 8rem; }
  .process--a figure { margin-bottom: 12vh; }
  .process--b .pair { grid-template-columns: 1fr; margin-bottom: 10vh; }
  .process--b .pair > figure { grid-column: 1 !important; grid-row: auto !important; }
  .process--b .pair > figure + figure { margin-top: 3rem; }
  .process--c figure { grid-template-columns: 1fr; margin-bottom: 10vh; }
  .process--c figcaption { grid-column: 1; grid-row: 2; margin-top: 1rem; }
  .process--c figure img, .process--c figure video { grid-column: 1; grid-row: 1; }
  .screenings, .next-work { padding-top: 7rem; }
  .spasm-composition { padding-top: 10rem; }
  .spasm-composition .voice { margin-top: 6rem; }

  .quiet-masonry { columns: 2; column-gap: 1.2rem; padding-top: 4rem; }
  .quiet-masonry img { margin-bottom: 1.2rem; }

  .about-grid { grid-template-columns: 1fr; row-gap: 3rem; }

  .page-head, .quiet-intro, .entry { padding-top: 7rem; }
  .contact-page { padding-top: 8rem; }
}