/* ============================================================
   ЭХ! Студия — одностраничник
   Правится в первую очередь:
   1) Тексты — прямо в HTML ниже.
   2) Баннер — блок .hero-bg (см. комментарий там).
   3) Кадры проектов — <img> внутри .pstill (пример в 1-й карточке).
   4) Контакты — секция #contacts.
   ============================================================ */

/* ---------- шрифты (локальные копии Google Fonts, см. assets/fonts) ---------- */
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family:'Inter'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('assets/fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family:'Oswald'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url('assets/fonts/oswald-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2191, U+2193, U+2212, U+2215;
}
@font-face {
  font-family:'Oswald'; font-style:normal; font-weight:600 700; font-display:swap;
  src:url('assets/fonts/oswald-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* ---------- токены ---------- */
:root {
  --font-disp:'Oswald',sans-serif;          /* заголовки */
  --font-body:'Inter',system-ui,sans-serif; /* текст */

  --bg:#0E0B09;                 /* фон страницы */
  --card:#13100b;               /* фон карточек */
  --fg:#ECE5D6;                 /* основной текст */
  --fg-dim:#968d7d;             /* вторичный текст */
  --gold:#d7b877;               /* акцент (стикеры, категории) */
  --line:rgba(236,229,214,.13); /* тонкие линии */
  --line-2:rgba(236,229,214,.22);/* линии заметнее */
  --hatch:rgba(236,229,214,.05);/* штриховка плейсхолдеров */

  --header-h:76px;
  --pad-x:44px;                 /* боковые поля контента */
}
html.light {
  --bg:#F0EBDF; --card:#EDE7D9;
  --fg:#161209; --fg-dim:#6a6151; --gold:#9a7b2e;
  --line:rgba(22,18,9,.16); --line-2:rgba(22,18,9,.28); --hatch:rgba(22,18,9,.05);
}

/* ---------- база ---------- */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--fg);
  font-family:var(--font-body); line-height:1.55;
  -webkit-font-smoothing:antialiased;
  transition:background .4s, color .4s;
}
a { color:inherit; text-decoration:none; }
img { display:block; }
.wrap { max-width:1360px; margin-inline:auto; padding-inline:var(--pad-x); }
.divider { border-top:1px solid var(--line); }

/* переключение логотипов темой (единственный источник правды) */
.logo-dark { display:block; }
.logo-light { display:none; }
html.light .logo-dark { display:none; }
html.light .logo-light { display:block; }
.brand img { height:44px; width:auto; }

/* ---------- шапка ---------- */
header {
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(12px);
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  border-bottom:1px solid var(--line);
}
.bar { display:flex; align-items:center; justify-content:space-between; height:var(--header-h); }
nav { display:flex; align-items:center; gap:36px; }
nav a {
  font-size:12.5px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--fg-dim); transition:color .2s;
}
nav a:hover { color:var(--fg); }
.toggle {
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; border:1px solid var(--line-2); border-radius:50%;
  background:transparent; color:var(--fg); cursor:pointer; font-size:15px; transition:.2s;
}
.toggle:hover { border-color:var(--fg); }

/* ---------- баннер ---------- */
.hero {
  position:relative; min-height:min(86vh, 780px);
  display:flex; align-items:flex-end; overflow:hidden;
  margin-top:calc(var(--header-h) * -1); padding-top:var(--header-h);
}
.hero-bg {
  position:absolute; inset:0; z-index:0;
  background:radial-gradient(120% 100% at 72% 22%, #2a2118 0%, #14100b 55%, #070504 100%);
}
.hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }
/* подложка: затемнение слева под текст + штриховка на пустом слоте */
.hero-bg::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(6,4,3,.82) 0%, rgba(6,4,3,.42) 46%, rgba(6,4,3,.08) 100%),
    repeating-linear-gradient(-45deg, transparent 0 15px, rgba(236,229,214,.04) 15px 16px);
}
/* с реальным баннером штриховку убираем, затемнение оставляем */
.hero-bg:has(.hero-img)::after {
  background:linear-gradient(90deg, rgba(6,4,3,.82) 0%, rgba(6,4,3,.42) 46%, rgba(6,4,3,.08) 100%);
}
.hero-ph {
  position:absolute; inset:0; z-index:0;
  display:flex; align-items:center; justify-content:center;
  font-size:12px; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(236,229,214,.32);
}
.hero-bg:has(.hero-img) ~ .hero-ph { display:none; }
.hero-vlabel {
  position:absolute; top:calc(var(--header-h) + 24px); right:var(--pad-x); z-index:2;
  writing-mode:vertical-rl;
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(236,229,214,.55);
}
.hero-content { position:relative; z-index:2; width:100%; padding-bottom:75px; }
.hero h1 {
  font-family:var(--font-disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(40px, 6vw, 80px); line-height:1.1; letter-spacing:-.005em; color:#F3EDDF;
}
.hero p { font-size:16px; max-width:720px; color:rgba(243,237,223,.86); margin-top:24px; }
.hero p + p { margin-top:12px; }

/* ---------- секции ---------- */
section { scroll-margin-top:calc(var(--header-h) + 20px); }
.stitle {
  font-family:var(--font-disp); font-weight:600; text-transform:uppercase;
  font-size:clamp(26px, 3.4vw, 40px); line-height:1.1; letter-spacing:.01em;
  display:flex; align-items:center; gap:18px; margin-bottom:36px;
}
.stitle::after { content:""; height:1px; flex:1; background:var(--line); }

/* ---------- проекты ---------- */
.projects { padding:76px 0 34px; }
.projects.plist { padding-top:10px; }
.pgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:22px; }

/* подзаголовок под «Проекты» на странице /projects/ */
.stitle + .ssub { max-width:640px; margin:-24px 0 20px; font-size:15px; line-height:1.5; color:color-mix(in srgb, var(--fg) 72%, transparent); }

/* фильтр по типу (раздел «Проекты») */
.pfilter { display:flex; flex-wrap:wrap; gap:10px; margin:-14px 0 32px; }
.ssub + .pfilter { margin-top:0; }
.pfilter button {
  font:inherit; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 18px; border:1px solid var(--line-2); border-radius:0;
  background:transparent; color:var(--fg-dim); cursor:pointer; transition:.2s;
}
.pfilter button:hover { color:var(--fg); border-color:var(--fg); }
.pfilter button[aria-pressed="true"] { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.pcard[hidden] { display:none; }

/* «Все проекты» под сеткой на главной */
.pall {
  display:flex; align-items:center; justify-content:center; width:100%;
  margin-top:34px; padding:20px; box-sizing:border-box;
  font-family:var(--font-disp); font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--line-2);
  background:color-mix(in srgb, var(--fg) 4%, transparent); transition:.2s;
}
.pall:hover { background:color-mix(in srgb, var(--fg) 9%, transparent); border-color:var(--fg); }
.pcard {
  position:relative; cursor:pointer;
  display:flex; flex-direction:column;
  border:1px solid var(--line); background:var(--card);
  transition:border-color .28s, transform .28s;
}
.pcard:hover { border-color:var(--line-2); transform:translateY(-5px); }

/* слот кадра: слои снизу вверх — фото (1) → штриховка/плейсхолдер (2) → награды (3) → стикер (4) */
.pstill {
  position:relative; isolation:isolate; aspect-ratio:2/3; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 60% 25%, #241c14, var(--card) 70%);
}
html.light .pstill { background:radial-gradient(120% 90% at 60% 25%, #ded4c0, var(--card) 70%); }
.pstill img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1; }
.pstill::after {
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image:repeating-linear-gradient(-45deg, transparent 0 12px, var(--hatch) 12px 13px);
}
.pstill .ph {
  position:relative; z-index:2;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim);
}
/* с реальным фото штриховка и подпись-плейсхолдер гаснут */
.pstill:has(img)::after { display:none; }
.pstill:has(img) .ph { display:none; }

/* стикеры («Скоро», «Награды») — можно показать оба сразу, встают в ряд */
.stickers {
  position:absolute; top:12px; left:12px; right:12px; z-index:4;
  display:flex; flex-wrap:wrap; gap:8px;
}
.sticker {
  display:inline-flex; align-items:center; gap:6px;
  font-size:9.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:#F3EDDF; padding:6px 10px;
  border:1px solid rgba(215,184,119,.55);
  background:rgba(6,4,3,.5); backdrop-filter:blur(3px);
  transition:opacity .3s, transform .3s;
}
.sticker .st { color:var(--gold); }
/* при наведении любой стикер прячется (у «Наград» — уступая место списку) */
.pcard:hover .sticker { opacity:0; transform:translateY(-6px); }

/* выезжающий список наград */
.awards {
  position:absolute; inset:auto 0 0 0; z-index:3;
  display:flex; flex-direction:column; gap:9px;
  padding:44px 15px 15px;
  background:linear-gradient(to top, rgba(6,4,3,.94) 30%, rgba(6,4,3,.55) 75%, transparent);
  opacity:0; transform:translateY(16px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.pcard:hover .awards { opacity:1; transform:translateY(0); }
/* на тач-устройствах наведения нет, а тап по карточке теперь ведёт на страницу проекта —
   поэтому награды показываем сразу, без промежуточного шага */
@media (hover:none) {
  /* тизер прячем только на карточках, где его реально заменяет раскрытый
     список наград, — иначе под правило попадут и стикеры других типов,
     которым на тач-устройствах нечем заместиться */
  .pstill:has(.awards) .sticker:not(.sticker--soon) { display:none; }
  .awards { opacity:1; transform:none; }
}
.award { display:flex; gap:9px; align-items:flex-start; }
.award .st { color:var(--gold); font-size:12px; line-height:1.2; }
.award .txt { font-size:11px; line-height:1.25; letter-spacing:.02em; color:#F3EDDF; }
.award .txt b { display:block; font-weight:600; }
.award .txt small { font-size:10px; color:rgba(243,237,223,.62); }
/* статичный блок наград на странице проекта — над тематическим фоном, а не тёмным градиентом карточки */
.awards-static .award .txt { color:var(--fg); }
.awards-static .award .txt small { color:var(--fg-dim); }

/* текст карточки */
.pbody { display:flex; flex-direction:column; flex:1; padding:20px 20px 24px; }
.pcat { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.pcard h3 {
  font-family:var(--font-disp); font-weight:700; text-transform:uppercase;
  font-size:23px; line-height:1; margin-top:9px; color:var(--fg);
}
.pdesc { flex:1; font-size:13px; margin-top:12px; color:color-mix(in srgb, var(--fg) 74%, transparent); }
/* сводка: формат — своя строка; хрон слева, дата справа */
.pmeta {
  display:flex; flex-direction:column; gap:8px;
  margin-top:18px; padding-top:14px; border-top:1px solid var(--line);
  font-family:var(--font-disp); font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.pfmt { color:var(--fg); }
.prow { display:flex; justify-content:space-between; gap:12px; color:var(--fg-dim); }

/* ---------- о студии ---------- */
.about { padding:60px 0 48px; }
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:stretch; }
.about-text p { font-size:16px; color:color-mix(in srgb, var(--fg) 88%, transparent); }
.about-text p + p { margin-top:16px; }
.nda { background:color-mix(in srgb, var(--fg) 5%, transparent); padding:30px 32px; }
.nda .eyebrow {
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); margin-bottom:16px;
}
.nda ul { list-style:none; display:grid; gap:12px; }
.nda li {
  position:relative; padding-left:22px;
  font-size:14px; color:color-mix(in srgb, var(--fg) 84%, transparent);
}
.nda li::before { content:"—"; position:absolute; left:0; color:var(--fg-dim); }

/* ---------- контакты ---------- */
.contacts { padding-top:60px; }
/* почта — первой строкой, одна и обычной ширины; соцсети переносятся на строку ниже */
.socials .s-mail + a { grid-column:1; }
.socials {
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:56px; max-width:680px; margin-top:34px;
}
.socials a {
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:16px 2px; border-bottom:1px solid var(--line); transition:color .2s;
}
.socials a:hover { color:var(--fg-dim); }
.socials a:hover .s-name { text-decoration:underline; text-underline-offset:4px; }
.s-name { font-size:14px; letter-spacing:.1em; text-transform:uppercase; }
.s-h { font-size:11px; color:var(--fg-dim); white-space:nowrap; }

/* ---------- подвал ---------- */
footer { margin-top:70px; }
.foot-bar {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:30px 0 40px; flex-wrap:wrap;
}
.foot-right { text-align:right; }
.foot-right .copy { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg); }
.foot-right .meta { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); margin-top:6px; }

/* ---------- «Подробнее» на карточке ---------- */
.pmore { display:inline-flex; align-items:center; gap:7px; margin-top:16px;
  font-family:var(--font-disp); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); transition:gap .2s; }
.pmore:hover { gap:12px; }
/* растягиваем клик по всей карточке — «Подробнее» остаётся единственной настоящей ссылкой */
.pmore::after { content:""; position:absolute; inset:0; }

/* ---------- карточка проекта: постер + информация ---------- */
.modal-top { display:grid; grid-template-columns:300px 1fr; gap:36px; align-items:start; }

/* Раскладка со ссылками на агрегаторы: заголовок вынесен в свой блок,
   постер и кнопки живут в левой колонке. Правила включаются только на
   страницах, где есть .modal-head — остальные рендерятся по-старому.
   Ниже 680px сетка схлопывается в одну колонку, и порядок в разметке
   (заголовок → постер+ссылки → остальное) сам даёт нужную мобильную
   последовательность, поэтому раскладку привязываем к десктопу. */
@media (min-width:681px) {
  /* Левая колонка растянута на оба ряда и может оказаться выше правой
     (постер + кнопки + награды). Без явных размеров рядов её лишняя высота
     раскидывается по обоим, и под названием вырастает пустота. `1fr` во
     втором ряду забирает весь избыток туда, где он не виден: блок
     информации прижат к верху ряда, а растёт только сам ряд. */
  .modal-top:has(.modal-head) { row-gap:0; grid-template-rows:auto 1fr; }
  .modal-top:has(.modal-head) .modal-head { grid-column:2; grid-row:1; }
  .modal-top:has(.modal-head) .modal-left { grid-column:1; grid-row:1 / span 2; }
  .modal-top:has(.modal-head) .modal-info { grid-column:2; grid-row:2; }
}
.filmrefs { display:grid; grid-template-columns:repeat(auto-fit, minmax(0,1fr)); gap:10px; margin-top:12px; }
.filmrefs a {
  display:flex; align-items:center; justify-content:center; padding:13px 10px;
  border:1px solid var(--line-2); background:color-mix(in srgb, var(--fg) 4%, transparent);
  color:var(--fg); transition:.2s;
}
/* Оба логотипа — чистые начертания названий без рамок и подложек, у обоих
   viewBox обрезан по буквам. Поэтому одна общая высота выравнивает их по
   высоте букв, независимо от разной ширины слов.
   Высота в CSS обязательна: у инлайнового svg с одним лишь viewBox нет
   своих размеров, и без неё он раздувается на всю кнопку — это вылезает,
   если html и css разъедутся по версиям (кэш). */
.filmrefs svg { width:auto; height:15px; max-width:100%; fill:currentColor; display:block; }
.filmrefs a:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.poster { position:relative; aspect-ratio:2/3; overflow:hidden; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 60% 25%, #241c14, var(--card) 70%); }
html.light .poster { background:radial-gradient(120% 90% at 60% 25%, #ded4c0, var(--card) 70%); }
.poster img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* заглушка, пока постер не готов */
.poster .ph { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--fg-dim); }
.modal-title { font-family:var(--font-disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(30px,4vw,44px); line-height:1; margin:8px 0 0; }
.modal-meta { display:flex; flex-wrap:wrap; gap:8px 18px; margin-top:16px;
  font-family:var(--font-disp); font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-dim); }
.modal-creators { display:flex; flex-direction:column; gap:9px; margin-top:20px; padding-top:18px;
  border-top:1px solid var(--line); }
.mc-row { display:flex; align-items:baseline; gap:14px; font-size:13px; }
.mc-label { flex:0 0 118px; font-family:var(--font-disp); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-dim); }
.mc-value { color:var(--fg); }
.mc-cast-toggle { display:inline; font:inherit; font-size:11px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  background:none; border:0; padding:0; cursor:pointer; }
.mc-cast-toggle:hover { text-decoration:underline; }
.awards-static { display:flex; flex-direction:column; gap:9px; margin-top:20px; padding:16px 18px;
  background:color-mix(in srgb, var(--fg) 5%, transparent); }
.modal-desc { font-size:15px; line-height:1.65; margin-top:20px; color:color-mix(in srgb, var(--fg) 88%, transparent); }
.modal-premiere { font-size:13px; margin-top:14px; color:var(--fg-dim); }
.modal-premiere + .modal-premiere { margin-top:4px; }
.watch { margin-top:24px; }
.watch .eyebrow { font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:12px; }
.watch-links { display:flex; flex-wrap:wrap; gap:10px; }
.watch-links a, .watch-links button {
  display:inline-flex; align-items:center; gap:7px;
  font:inherit; font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 15px; border:1px solid var(--line-2); border-radius:0;
  background:transparent; color:var(--fg); cursor:pointer; transition:.2s; }
.watch-links a:hover, .watch-links button:hover { background:var(--fg); color:var(--bg); border-color:var(--fg); }
.watch-links button .play { color:var(--gold); font-size:9px; }
/* пока нет ни одной ссылки — «Скоро» вместо ряда пустышек, в стиле стикера на карточке */
.watch-soon { display:inline-flex; align-items:center; gap:7px;
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  padding:9px 15px; border:1px solid rgba(215,184,119,.55); color:var(--gold); }
.watch-soon .st { color:var(--gold); }
/* плеер (трейлер/полный эпизод) — общий слот под .modal-top, наполняется по клику любой кнопки с data-embed */
.player-slot:empty { display:none; }
.trailer-frame { position:relative; aspect-ratio:16/9; margin-top:32px; background:#000; }
.trailer-frame iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.trailer-close { position:absolute; top:10px; right:10px; z-index:2;
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  font-size:22px; line-height:1; border:1px solid rgba(236,229,214,.3); border-radius:50%;
  background:rgba(6,4,3,.55); backdrop-filter:blur(3px); color:#F3EDDF; cursor:pointer; transition:.2s; }
.trailer-close:hover { background:rgba(6,4,3,.85); border-color:#F3EDDF; }
.modal-sub { margin:34px 0 16px; font-family:var(--font-disp); font-size:13px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); }
.stills { display:grid; grid-template-columns:repeat(2, 1fr); gap:14px; }
.still { position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 90% at 60% 25%, #241c14, var(--card) 70%); }
html.light .still { background:radial-gradient(120% 90% at 60% 25%, #ded4c0, var(--card) 70%); }
.still img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
@media (max-width:680px) {
  .modal-top { grid-template-columns:1fr; gap:22px; }
  /* Порядок на узких экранах: постер → кнопки → название → награды → крю.
     Награды лежат внутри .modal-left, а `order` работает только для прямых
     детей сетки, поэтому на мобильном обёртка убирается через
     display:contents — постер, кнопки и награды становятся собственными
     элементами сетки, и их можно расставить независимо.
     Межрядный отступ обнулён: интервалы задают собственные margin-top
     блоков, иначе общий row-gap лёг бы поверх них третьим слоем. */
  .modal-top:has(.modal-head) { row-gap:0; }
  .modal-top:has(.modal-head) .modal-left { display:contents; }
  .modal-top:has(.modal-head) .poster { order:1; }
  .modal-top:has(.modal-head) .filmrefs { order:2; }
  .modal-top:has(.modal-head) .modal-head { order:3; margin-top:22px; }
  .modal-top:has(.modal-head) .awards-static { order:4; }
  .modal-top:has(.modal-head) .modal-info { order:5; }
  .stills { grid-template-columns:1fr; }
  .modal-creators { margin-top:14px; padding-top:14px; gap:6px; }
  .mc-row { gap:10px; }
  .mc-label { flex:0 0 114px; }
}

/* ---------- адаптив ---------- */
@media (max-width:1000px) {
  .pgrid { grid-template-columns:repeat(2, 1fr); }
  .about-grid { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:820px) {
  :root { --pad-x:26px; }
  header nav { gap:18px; }
  header nav a:not(.keep) { display:none; }
  .hero-vlabel { display:none; }
}
@media (max-width:560px) {
  .pgrid { grid-template-columns:1fr; }
  .socials { grid-template-columns:1fr; }
  /* логотип и подпись держим в одну строку даже на узких экранах */
  .foot-bar { flex-wrap:nowrap; gap:16px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { transition:none !important; }
}

/* ---------- страница проекта ---------- */
.crumbs { padding:28px var(--pad-x) 4px; }
.crumbs a { font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-dim); transition:color .2s; }
.crumbs a:hover { color:var(--fg); }
.detail { padding-top:14px; }
.detail .modal-top { grid-template-columns:360px 1fr; }
.detail .modal-title { font-size:clamp(34px,5vw,60px); }
.project-nav { display:flex; justify-content:space-between; gap:16px;
  margin-top:44px; padding:28px var(--pad-x) 64px; border-top:1px solid var(--line); }
.project-nav a { font-family:var(--font-disp); font-size:13px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fg-dim); transition:color .2s; }
.project-nav a:hover { color:var(--fg); }
.project-nav .nx { margin-left:auto; text-align:right; }
@media (max-width:680px) { .detail .modal-top { grid-template-columns:1fr; } }

/* ---------- страница 404 ---------- */
.error-page { padding:100px 0 120px; text-align:center; }
.error-code { font-family:var(--font-disp); font-weight:700; text-transform:uppercase;
  font-size:clamp(70px,12vw,150px); line-height:1; color:var(--gold); }
.error-title { font-family:var(--font-disp); font-weight:600; text-transform:uppercase;
  font-size:clamp(22px,3vw,32px); margin-top:12px; }
.error-text { color:var(--fg-dim); margin-top:14px; font-size:15px; max-width:480px; margin-inline:auto; }
.error-link { display:inline-flex; align-items:center; gap:7px; margin-top:32px;
  font-family:var(--font-disp); font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold); transition:gap .2s; }
.error-link:hover { gap:12px; }