/* Прототип раскладки сайта А. Люблинского. Один CSS для трёх вариантов.
   Вариант задаётся классом на <body>: v-1 «Строгий», v-2 «Галерея», v-3 «Экспозиция».
   Шрифты: Onest (OFL) и IBM Plex Mono (OFL), лежат в assets/fonts/. */

/* ---------- Шрифты ---------- */
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/onest-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/onest-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/onest-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-style: normal; font-display: swap;
  src: url("fonts/onest-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-mono-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Переменные ---------- */
:root {
  --bg: #fff;
  --ink: #111;
  --muted: #727272;
  --line: #e7e7e7;

  --font: "Onest", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs: 16px;            /* основной текст */
  --lh: 1.6;
  --fs-lead: 21px;       /* первый абзац проекта */
  --fs-nav: 13px;
  --fs-meta: 11px;       /* моно-мелочь: годы, номера, подписи */
  --track-meta: 0.09em;
  --track-nav: 0.09em;
  --fs-title: clamp(40px, 6.2vw, 76px);   /* заголовок проекта */

  --gutter: clamp(24px, 5vw, 104px);      /* внешние поля */
  --col-gap: clamp(12px, 1.8vw, 28px);    /* зазор между колонками 12-колоночной сетки */
  --u: clamp(16px, 3.6vw, 64px);          /* единица вертикального смещения */
  --block-gap: clamp(56px, 8vw, 136px);   /* воздух между блоками */
  --section: clamp(96px, 12vw, 200px);    /* воздух между разделами страницы */

  --sidebar: clamp(230px, 21vw, 330px);   /* левая колонка, вариант A */
  --bar-h: 56px;                          /* верхняя строка на телефоне */
  --top-pad: 48px;
  --name-h: 26px;
  --menu-gap: 72px;
  --content-top: calc(var(--top-pad) + var(--name-h) + var(--menu-gap));
}

@media (max-width: 1023.98px) { :root { --gutter: max(24px, 4vw); --fs-lead: 19px; } }
@media (max-width: 767.98px)  {
  :root { --gutter: 16px; --fs: 15px; --fs-lead: 18px; --col-gap: 10px; --block-gap: 48px; --section: 88px; --u: 16px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lb-open { overflow: hidden; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font); font-size: var(--fs); line-height: var(--lh);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }

:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -100px; z-index: 100;
  background: var(--ink); color: #fff; padding: 10px 14px; font: var(--fs-meta)/1.4 var(--mono);
  letter-spacing: var(--track-meta); text-transform: uppercase;
}
.skip-link:focus { top: 8px; }

/* Моно-мелочь */
.meta, .card-meta, .lang, .site-footer, .lb-count, .chron-block :is(h2, h3), .chron .year, .series-label {
  font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.6;
  letter-spacing: var(--track-meta); text-transform: uppercase;
}
.meta { color: var(--muted); }

/* ---------- Шапка / навигация (общее) ---------- */

.site-name { font-size: 17px; font-weight: 500; line-height: var(--name-h); letter-spacing: -0.005em; display: inline-block; }
.site-nav a, .menu-toggle {
  font-size: var(--fs-nav); font-weight: 500; text-transform: uppercase; letter-spacing: var(--track-nav);
}
.site-nav a { position: relative; display: inline-block; padding: 6px 0; line-height: 1.3; transition: opacity .18s ease; }
.site-nav a:hover { opacity: .55; }
/* активный пункт: короткая черта слева */
.site-nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: -22px; top: 50%; width: 12px; height: 1px; background: currentColor;
}
.lang { color: var(--muted); }
.lang a { display: inline-block; padding: 5px 2px; transition: color .18s ease; }
.lang a:first-child { padding-left: 0; }
.lang a:hover, .lang a[aria-current="true"] { color: var(--ink); }

.menu-toggle {
  display: none; font-family: inherit; color: inherit; background: none; border: 0;
  min-height: 44px; min-width: 44px; padding: 0 0 0 12px; cursor: pointer;
}

main { min-width: 0; }

.site-footer { color: var(--muted); padding: 0 var(--gutter) 40px; }
.site-footer p { max-width: 90ch; }
.site-footer a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .18s ease; }
.site-footer a:hover { color: var(--ink); text-decoration-color: currentColor; }
.site-footer [aria-current="true"] { color: var(--ink); }

/* ---------- Общие куски страницы проекта ---------- */

.project-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); }
.crumb { grid-column: 1 / -1; }
.crumb a { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; transition: color .18s ease; }
.crumb a:hover { color: var(--ink); text-decoration-color: currentColor; }
.project-title {
  grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 56px);
  font-size: var(--fs-title); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: anywhere;
}
.project-sub { grid-column: 1 / 5; margin-top: clamp(40px, 6vw, 88px); padding-top: .55em; }
.project-text { grid-column: 6 / 13; margin-top: clamp(40px, 6vw, 88px); max-width: 60ch; }
.project-text p + p { margin-top: 1.1em; }
.project-text p:first-child { font-size: var(--fs-lead); line-height: 1.45; letter-spacing: -0.01em; margin-bottom: 1.4em; }

/* Серия «фигуры и автомобили» */
.series {
  margin-top: var(--section); padding-top: 28px; border-top: 1px solid var(--line);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 28px;
}
.series-label { grid-column: 1 / 4; color: var(--muted); font-weight: 400; }
.series-grid { grid-column: 4 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.series-grid a { display: block; cursor: zoom-in; background: #f3f3f3; }
.series-grid img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; transition: opacity .18s ease; }
.series-grid a:hover img { opacity: .92; }

/* Хронология */
.chron { margin-top: var(--section); }
.chron-title { font-size: clamp(26px, 3vw, 38px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.1; }
.chron-block {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap);
  margin-top: clamp(40px, 5vw, 72px); padding-top: 28px; border-top: 1px solid var(--line);
}
.chron-block :is(h2, h3) { grid-column: 1 / 5; font-weight: 400; color: var(--muted); padding-top: .35em; }
.chron-block ul { grid-column: 6 / 13; max-width: 70ch; }
.chron-block li { display: grid; grid-template-columns: 5em minmax(0, 1fr); margin-bottom: 14px; line-height: 1.5; }
.chron .year { color: var(--muted); padding-top: .3em; }

.note { color: var(--muted); font-size: 13px; line-height: 1.6; max-width: 62ch; margin-top: var(--section); }
.empty-page { min-height: 55vh; }

@media (max-width: 1023.98px) {
  .project-sub { grid-column: 1 / -1; margin-top: 40px; padding-top: 0; }
  .project-text { grid-column: 3 / -1; margin-top: 24px; }
  .series-label, .series-grid { grid-column: 1 / -1; }
  .chron-block :is(h2, h3) { grid-column: 1 / -1; padding-top: 0; margin-bottom: 20px; }
  .chron-block ul { grid-column: 3 / -1; }
}
@media (max-width: 767.98px) {
  .project-title { margin-top: 24px; }
  .project-sub { margin-top: 28px; }
  .project-text { grid-column: 1 / -1; margin-top: 20px; }
  .series-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .chron-block { padding-top: 20px; margin-top: 36px; }
  .chron-block ul { grid-column: 1 / -1; }
  .chron-block li { grid-template-columns: 4.2em minmax(0, 1fr); }
}

/* Мобильная шапка: верхняя строка + «Меню». Варианты 1 и 3 — ниже 768px, вариант 2 — ниже 1024px
   (два одинаковых блока: пороги разные). */
@media (max-width: 767.98px) {
  :is(.v-1, .v-3) .site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); height: var(--bar-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  :is(.v-1, .v-3) .menu-toggle { display: inline-flex; align-items: center; }
  :is(.v-1, .v-3) .site-menu { display: none; position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; z-index: 29; background: var(--bg); padding: 28px var(--gutter) 40px; overflow-y: auto; flex-direction: column; gap: 36px; }
  :is(.v-1, .v-3) .site-header.is-open .site-menu { display: flex; }
  :is(.v-1, .v-3) .site-nav ul { display: block; }
  :is(.v-1, .v-3) .site-nav a { font: 500 16px/1.3 var(--font); letter-spacing: var(--track-nav); text-transform: uppercase; min-height: 48px; display: flex; align-items: center; padding: 0; }
  :is(.v-1, .v-3) .site-nav a[aria-current="page"]::before { left: -12px; width: 8px; }
  :is(.v-1, .v-3) .lang a { min-height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; font-size: 13px; }
  :is(.v-1, .v-3) .lang a:first-child { padding-left: 0; }
  html:has(:is(.v-1, .v-3) .site-header.is-open) { overflow: hidden; }
}
@media (max-width: 1023.98px) {
  /* Keep the sticky header attached to the viewport when the menu locks html scrolling. */
  body.v-2 { overflow-x: clip; }
  .v-2 .site-header { position: sticky; top: 0; z-index: 30; background: var(--bg); height: var(--bar-h); padding: 0 var(--gutter); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
  .v-2 .menu-toggle { display: inline-flex; align-items: center; }
  .v-2 .site-menu { display: none; position: fixed; top: var(--bar-h); left: 0; right: 0; bottom: 0; z-index: 29; background: var(--bg); padding: 28px var(--gutter) 40px; overflow-y: auto; flex-direction: column; gap: 36px; }
  .v-2 .site-header.is-open .site-menu { display: flex; }
  .v-2 .site-nav a { font-size: 16px; min-height: 48px; display: flex; align-items: center; padding: 0; }
  .v-2 .site-nav a[aria-current="page"]::before { left: -12px; width: 8px; }
  .v-2 .lang a { min-height: 44px; min-width: 44px; padding: 0 8px; display: inline-flex; align-items: center; font-size: 13px; }
  .v-2 .lang a:first-child { padding-left: 0; }
  html:has(.v-2 .site-header.is-open) { overflow: hidden; }
}

/* ======================================================================
   ВАРИАНТ 1 — «Строгий»: верхняя строка, ровная сетка 3×N, каталожные «планшеты»
   ====================================================================== */

.v-1 { --wrap: 1320px; }
.v-1 .site-header, .v-1 main, .v-1 .site-footer { padding-inline: max(var(--gutter), calc((100% - var(--wrap)) / 2)); }
.v-1 main { padding-top: clamp(56px, 7vw, 104px); padding-bottom: var(--section); }

@media (min-width: 768px) {
  .v-1 .site-header {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
    column-gap: clamp(40px, 7vw, 120px); padding-top: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--line);
  }
  .v-1 .site-menu { display: contents; }
  .v-1 .site-nav ul { display: flex; flex-wrap: wrap; gap: 6px clamp(24px, 3vw, 44px); }
  .v-1 .site-nav a { padding: 8px 0; }
  .v-1 .lang { justify-self: end; }
}
@media (max-width: 767.98px) {
  .v-1 .site-header { padding-inline: var(--gutter); }
  .v-1 main { padding-top: 40px; }
}

/* Сетка 3 колонки, одинаковые пропорции */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(48px, 6vw, 96px) clamp(24px, 3vw, 48px); }
.card { display: block; }
.card-media { display: block; background: #f3f3f3; overflow: hidden; }
.card-media img { width: 100%; height: auto; transition: opacity .18s ease; }
.grid .card-media { aspect-ratio: 4 / 3; }
.grid .card-media img { height: 100%; object-fit: cover; }
.card-line { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 16px; }
.card-title {
  display: block; font-size: var(--fs-nav); font-weight: 500; line-height: 1.35;
  text-transform: uppercase; letter-spacing: var(--track-nav); transition: transform .18s ease;
}
.card-meta { display: block; color: var(--muted); white-space: nowrap; }
.card:hover .card-media img { opacity: .92; }
.card:hover .card-title { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; }
.card.is-placeholder .card-title { color: var(--muted); }

@media (max-width: 1023.98px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } }

/* Страница проекта: заголовок и текст в одной колонке, планшеты 2×N */
.v-1 .project-title { font-size: clamp(34px, 4.6vw, 60px); margin-top: 28px; }
.v-1 .project-sub { grid-column: 1 / -1; margin-top: 18px; padding-top: 0; }
.v-1 .project-text { grid-column: 1 / -1; margin-top: clamp(40px, 5vw, 64px); max-width: 62ch; }
.v-1 .project-text p:first-child { font-size: inherit; line-height: inherit; letter-spacing: 0; margin-bottom: 0; }
.v-1 .series-label { grid-column: 1 / -1; }
.v-1 .series-grid { grid-column: 1 / -1; }
.v-1 .chron-block ul { grid-column: 5 / 13; }

.plates { margin-top: clamp(56px, 7vw, 104px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 28px); }
.plate { display: block; position: relative; aspect-ratio: 1 / 1; background: #f6f6f6; cursor: zoom-in; }
.plate img {
  position: absolute; inset: 0; margin: auto; width: auto; height: auto;
  max-width: 100%; max-height: 100%; transition: opacity .18s ease;
}
.plate:hover img { opacity: .92; }
@media (max-width: 1023.98px) { .v-1 .chron-block ul { grid-column: 3 / -1; } }
@media (max-width: 767.98px) {
  .plates { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .v-1 .chron-block ul { grid-column: 1 / -1; }
}

/* ======================================================================
   ВАРИАНТ 2 — «Галерея»: колонка слева, проекты масонри по три в ряд,
   галерея проекта в две колонки
   ====================================================================== */

.v-2 main { padding-top: 56px; }

/* Масонри: без JS — обычная сетка; с JS каждый пункт тянется на столько
   4px-рядов, сколько нужно его содержимому. Порядок в DOM не меняется. */
.masonry {
  --cols: 2; --m-col-gap: 16px; --m-row-gap: 40px;
  display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  gap: var(--m-row-gap) var(--m-col-gap);
  align-items: start;
}
.masonry.is-masonry { grid-auto-rows: 4px; row-gap: 0; margin-bottom: calc(-1 * var(--m-row-gap)); } /* последний пункт несёт зазор в своём span */
.masonry img { width: 100%; height: auto; }

/* Проекты: три колонки, обложки в натуральных пропорциях */
.masonry.projects {
  --cols: 3;
  --m-col-gap: clamp(16px, 2vw, 32px);
  --m-row-gap: clamp(40px, 4.5vw, 64px);
}
.v-2 .card-media { background: none; }
.v-2 .card-line { margin-top: 12px; }

/* Галерея проекта: две колонки, равные широкие зазоры (в 4,5 раза шире колоночного), без обрезки */
.masonry.gallery {
  --cols: 2;
  --m-col-gap: calc(var(--col-gap) * 4.5);
  --m-row-gap: calc(var(--col-gap) * 4.5);
  margin-top: var(--section);
}
/* Много однотипных небольших снимков (как в «Равновесии»): три колонки на широком экране */
.masonry.gallery.is-dense { --cols: 3; }
.masonry.gallery > a { display: block; cursor: zoom-in; }
.masonry.gallery img { transition: opacity .18s ease; }
.masonry.gallery > a:hover img { opacity: .92; }

/* Вторая версия страницы проекта: фото в одну колонку друг под другом, одной ширины */
.v-2 .gallery-column {
  display: flex; flex-direction: column; align-items: flex-start; gap: calc(var(--col-gap) / 2);
  margin-top: clamp(48px, 5vw, 72px);
}
.v-2 .gallery-column > a { display: block; width: min(100%, 604px); cursor: zoom-in; }
.v-2 .gallery-column img { width: 100%; height: auto; transition: opacity .18s ease; }
.v-2 .gallery-column > a:hover img { opacity: .92; }

/* Подменю проекта в сайдбаре */
.v-2 .sub-nav { margin: 4px 0 6px; padding-left: 14px; border-left: 1px solid var(--line); }
.v-2 .site-nav .sub-nav a { display: block; padding: 5px 0; transition: color .18s ease, opacity .18s ease; }
.v-2 .sub-nav a { font-size: 13px; font-weight: 500; color: var(--ink); }

/* Плашка проекта под шапкой — только на узком экране (ниже 1024px) */
.v-2 .project-bar { display: none; }

/* Строки хронологии и списков событий, ведущие на страницу события */
.chron-link {
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.chron-link:hover { text-decoration-color: currentColor; }
.chron-arrow { font-family: var(--mono); margin-left: .4em; color: var(--muted); }

/* Список событий: прежний вид по годам, две группы (текущие и будущие / прошедшие).
   Строка — превью (если есть фото), текст-ссылка, тип справа, строка «Проект: …» под текстом */
.v-2 .events-group + .events-group { margin-top: clamp(72px, 8vw, 120px); }
@media (min-width: 1024px) { .v-2 .events-group .chron-block ul { grid-column: 4 / 13; max-width: none; } }
.v-2 .events-group > .chron-title { margin-top: clamp(48px, 5vw, 72px); }
.v-2 .event-row {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  column-gap: var(--col-gap); align-items: start; margin-bottom: 28px;
}
.v-2 .event-thumb { grid-column: 1; display: block; }
.v-2 .event-thumb img { width: 200px; height: 150px; object-fit: cover; transition: opacity .18s ease; }
.v-2 .event-thumb:hover img { opacity: .92; }
.v-2 .event-main { grid-column: 2; min-width: 0; }
.v-2 .event-type { grid-column: 3; }
.v-2 .event-projects { display: block; margin-top: 6px; }
.v-2 .event-projects a {
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.v-2 .event-projects a:hover { color: var(--ink); text-decoration-color: currentColor; }
@media (max-width: 767.98px) {
  .v-2 .event-row { grid-template-columns: 120px minmax(0, 1fr); }
  .v-2 .event-thumb img { width: 120px; height: 90px; }
  .v-2 .event-type { grid-column: 2; margin-top: 4px; }
  .v-2 .event-row:not(:has(.event-thumb)) > * { grid-column: 1 / -1; }
}

/* Страница события устроена как страница проекта: заголовок и описание, ниже фото, под ними логотипы */
.v-2 .event-place { color: var(--muted); }
.v-2 .project-text .event-place { margin-top: 24px; }
.v-2 .project-text .event-project { margin-top: 28px; }
.v-2 .event-project a {
  display: flex; align-items: baseline; gap: 14px; padding: 14px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: border-color .18s ease;
}
.v-2 .event-project .meta { color: var(--muted); }
.v-2 .event-project a > span:last-child { margin-left: auto; transition: transform .18s ease; }
.v-2 .event-project a:hover { border-color: var(--ink); }
.v-2 .event-project a:hover > span:last-child { transform: translateX(4px); }
.v-2 .event-logos {
  display: flex; flex-wrap: wrap; align-items: center; gap: 32px 56px;
  margin-top: clamp(56px, 6vw, 96px); padding-top: 32px; border-top: 1px solid var(--line);
}
.v-2 .event-logos img { height: 72px; width: auto; }
.v-2 .project-head + .note, .v-2 .events-group + .note { margin-top: clamp(48px, 5vw, 72px); }
.v-2 .event-logos + .back-link, .v-2 .masonry + .back-link { margin-top: clamp(56px, 6vw, 96px); }
@media (max-width: 767.98px) {
  .v-2 .event-logos { --logo-height: clamp(40px, 12vw, 52px); flex-wrap: nowrap; gap: 32px; }
  .v-2 .event-logos img { height: var(--logo-height); max-width: none; }
  /* Compensate for white margins in the supplied logos, preserving their proportions. */
  .v-2 .event-logos img[src*="/artel-1752."] {
    height: calc(var(--logo-height) * 240 / 199);
    margin-right: calc(var(--logo-height) * -37 / 199);
    margin-bottom: calc(var(--logo-height) * -41 / 199);
  }
  .v-2 .event-logos img[src*="/lblnsk."] {
    height: calc(var(--logo-height) * 240 / 181);
    margin-left: calc(var(--logo-height) * -73 / 181);
    margin-right: calc(var(--logo-height) * -71 / 181);
    margin-bottom: calc(var(--logo-height) * -59 / 181);
  }
}

.v-2 .back-link { margin-top: var(--section); }
.v-2 .back-link a {
  font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.6;
  letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.v-2 .back-link a:hover { color: var(--ink); text-decoration-color: currentColor; }

/* Шапка проекта: заголовок, год под ним и один общий текст;
   ссылка «↓ Хронология» стоит сразу под текстом */
.v-2 .project-head .project-title { font-size: clamp(40px, 4.4vw, 64px); margin-top: 20px; }
.v-2 .project-head .project-sub { grid-column: 1 / -1; margin-top: 14px; padding-top: 0; }
.v-2 .project-head .project-text { grid-column: 1 / -1; max-width: 66ch; margin-top: 40px; font-size: 17px; line-height: 1.65; }
.v-2.project-page .project-head .project-text { max-width: 604px; font-size: 16px; }
.v-2 .project-text p:first-child { font-size: inherit; line-height: inherit; letter-spacing: normal; margin-bottom: 0; }
.v-2 .project-text p + p { margin-top: 1em; }
.v-2 .project-text .chron-jump { margin-top: 28px; }
.v-2 .chron-jump a {
  font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase;
  color: var(--muted); text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px;
  transition: color .18s ease, text-decoration-color .18s ease;
}
.v-2 .chron-jump a:hover { color: var(--ink); text-decoration-color: currentColor; }
.v-2 .project-head + .masonry.gallery { margin-top: clamp(48px, 5vw, 72px); }
@media (max-width: 767.98px) {
  .v-2 .project-head .project-text { margin-top: 28px; font-size: var(--fs); }
  .v-2.project-page .project-head .project-text { max-width: 604px; font-size: var(--fs); }
}

.v-2 .series-grid { grid-column: 1 / -1; }
.v-2 .project-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--col-gap) / 2);
  margin-top: calc(var(--col-gap) / 2);
}
.v-2 .project-grid > a { display: block; cursor: zoom-in; }
.v-2 .project-grid img { width: 100%; height: auto; transition: opacity .18s ease; }
.v-2 .project-grid > a:hover img { opacity: .92; }
.v-2 .chron .note { margin-top: 40px; }

/* Плавная прокрутка к якорям проекта */
html:has(.v-2) { scroll-behavior: smooth; }
.v-2 #chronology { scroll-margin-top: 32px; }

@media (min-width: 1024px) {
  body.v-2 { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; }
  .v-2 .site-header {
    grid-row: 1 / span 2; grid-column: 1; align-self: start; position: sticky; top: 0;
    min-height: 100vh; padding: var(--top-pad) 16px var(--top-pad) var(--gutter);
    display: flex; flex-direction: column;
  }
  .v-2 .site-menu { margin-top: var(--menu-gap); }
  .v-2 .site-nav a { padding: 7px 0; }
  .v-2 .lang { margin-top: 44px; }
  .v-2 main { grid-column: 2; padding: var(--content-top) var(--gutter) var(--section) 0; }
  .v-2 .site-footer { grid-column: 2; padding-left: 0; }
}
@media (max-width: 1023.98px) {
  .v-2 main { padding: 56px var(--gutter) var(--section); }
  /* в мобильном меню подменю проекта заменяет плашка сразу под шапкой */
  .v-2 .sub-nav { display: none; }
  .v-2 .project-bar {
    position: sticky; top: var(--bar-h); z-index: 28; height: 40px;
    padding: 0 var(--gutter); background: var(--bg); border-bottom: 1px solid var(--line);
    display: flex; justify-content: space-between; align-items: center;
  }
  .v-2 .project-bar a {
    display: flex; align-items: center; min-height: 40px;
    font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); text-transform: uppercase;
  }
  .v-2 .project-bar a { color: var(--ink); }
  .v-2 #chronology { scroll-margin-top: calc(var(--bar-h) + 40px + 24px); }
}
@media (max-width: 767.98px) {
  .masonry.projects { --cols: 2; --m-col-gap: 12px; --m-row-gap: 32px; }
  .masonry.gallery.is-dense { --cols: 2; }
  .v-2 .card-line { flex-direction: column-reverse; align-items: flex-start; gap: 2px; }
  .masonry.gallery { margin-top: 40px; }
}

/* ======================================================================
   ВАРИАНТ 3 — «Разворот»: экран пополам, как разворот книги.
   Слева панель (индекс или текст проекта), справа крупные фото друг за другом.
   Весь текст мелкий: самый крупный — заголовок проекта 26px.
   ====================================================================== */

.v-3 .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 30; background: var(--bg); }
.v-3 main { padding-top: var(--bar-h); }
.v-3 .site-name { font-size: 15px; }
html:has(.v-3) { scroll-behavior: smooth; }

@media (min-width: 768px) {
  .v-3 .site-header {
    height: var(--bar-h); padding: 0 var(--gutter);
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  }
  .v-3 .site-name { justify-self: start; }
  .v-3 .site-menu { display: contents; }
  .v-3 .site-nav { justify-self: center; }
  .v-3 .site-nav ul { display: flex; gap: clamp(18px, 2.4vw, 36px); }
  .v-3 .site-nav a { font: 400 var(--fs-meta)/1 var(--mono); letter-spacing: var(--track-meta); padding: 10px 0; }
  .v-3 .site-nav a[aria-current="page"]::before { left: -16px; width: 8px; }
  .v-3 .lang { justify-self: end; }
}

/* Подписи и счётчики */
.cap { font-family: var(--mono); font-size: var(--fs-meta); line-height: 1.5; letter-spacing: var(--track-meta); text-transform: uppercase; color: var(--muted); }

/* Левая панель: индекс проектов / заголовок, текст и хронология */
.panel-label { font-weight: 400; margin-bottom: 16px; }
.idx { border-bottom: 1px solid var(--line); }
.idx li { border-top: 1px solid var(--line); }
.idx-row {
  position: relative; display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: center; column-gap: 12px;
  min-height: 44px; padding: 9px 0; transition: color .18s ease;
}
.idx-n, .idx-year { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); color: var(--muted); }
.idx-year { text-align: right; }
.idx-title { font-size: var(--fs); font-weight: 500; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; }
.idx-row.is-placeholder .idx-title { color: var(--muted); font-weight: 400; }
.idx-row:hover .idx-title { text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.idx-row[aria-current="true"]::before { content: ""; position: absolute; left: -18px; top: 50%; width: 10px; height: 1px; background: var(--ink); }
.idx-thumb { display: none; }
.panel-note { margin-top: 28px; font-size: 12px; line-height: 1.55; color: var(--muted); max-width: 46ch; }

.p3-title { margin-top: 20px; font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.p3-sub { margin-top: 10px; color: var(--muted); }
.p3-text { margin-top: 28px; font-size: 15px; line-height: 1.6; max-width: 62ch; }
.p3-text p + p { margin-top: 1em; }

.chron3 { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }
.chron3 > h2 { font-weight: 400; color: var(--muted); }
.c3-block { margin-top: 24px; padding-top: 14px; border-top: 1px solid var(--line); }
.c3-block h3 { font-weight: 400; color: var(--muted); margin-bottom: 12px; }
.c3-block li { display: grid; grid-template-columns: 3.4em minmax(0, 1fr); margin-bottom: 9px; font-size: 13.5px; line-height: 1.5; }
.c3-block .year { font-family: var(--mono); font-size: var(--fs-meta); letter-spacing: var(--track-meta); color: var(--muted); padding-top: .25em; }

/* Правая сторона: крупные фото друг за другом, настоящие пропорции */
.covers, .shots { display: flex; flex-direction: column; gap: clamp(64px, 8vw, 120px); list-style: none; margin: 0; padding: 0; }
.cover, .shot { display: block; margin: 0; }
.cover a, .shot a { display: block; transition: opacity .18s ease; }
.shot a { cursor: zoom-in; }
.cover a:hover, .shot a:hover { opacity: .92; }
.cover img, .shot img, .set-grid img {
  display: block; width: min(100%, calc((100vh - var(--bar-h) - 96px) * var(--ar))); height: auto; aspect-ratio: var(--ar);
}
.cover-cap, .shot-cap { display: block; margin-top: 12px; }
.cover { scroll-margin-top: calc(var(--bar-h) + 40px); }
.cover-cap a { display: inline; width: auto; background: none; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.cover-cap a:hover { color: var(--ink); text-decoration-color: currentColor; opacity: 1; }
.is-placeholder-cover .cover-cap { color: var(--muted); }

.set { margin-top: clamp(80px, 9vw, 136px); padding-top: 20px; border-top: 1px solid var(--line); }
.set-label { font-weight: 400; margin-bottom: 24px; }
.set-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--col-gap); }
.set-grid img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.v-3 .site-footer { margin-top: var(--section); }
.v-3 .empty-text { padding: 56px var(--gutter) 0; }
.v-3 .empty-text h1 { font-size: 26px; font-weight: 500; letter-spacing: -0.02em; line-height: 1.1; }

/* Планшет и десктоп: две стороны разворота */
@media (min-width: 768px) {
  .split { display: grid; grid-template-columns: 40% minmax(0, 1fr); align-items: start; }
  .panel {
    position: sticky; top: var(--bar-h); height: calc(100vh - var(--bar-h)); overflow-y: auto; overscroll-behavior: contain;
    padding: 40px 24px 48px var(--gutter); border-right: 1px solid var(--line);
    scrollbar-width: thin; scrollbar-color: #cfcfcf transparent;
  }
  .spread { padding: 40px var(--gutter) 0 clamp(24px, 3vw, 56px); min-width: 0; }
  .v-3 .empty-page { min-height: 60vh; }
}
@media (min-width: 1024px) {
  .split { grid-template-columns: clamp(340px, 33%, 520px) minmax(0, 1fr); }
  .panel { padding-right: 32px; }
}

/* Телефон: одна колонка */
@media (max-width: 767.98px) {
  .split { display: flex; flex-direction: column; padding: 40px var(--gutter) 0; }
  .panel { display: contents; }
  .spread { order: 2; margin-top: 44px; }
  .chron3 { order: 3; }
  .covers { display: none; }
  .idx-row { grid-template-columns: 2em 56px minmax(0, 1fr) auto; column-gap: 12px; padding: 10px 0; }
  .idx-n { grid-column: 1; }
  .idx-thumb { display: block; grid-column: 2; grid-row: 1; width: 56px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .idx-title { grid-column: 3; }
  .idx-year { grid-column: 4; }
  .idx-row[aria-current="true"]::before { display: none; }
  .p3-title { margin-top: 24px; }
  .shots { gap: 36px; }
  .shot img { width: 100%; }
  .set-grid { gap: 28px 10px; }
}

/* ---------- Страница-презентация ---------- */

.pres { max-width: 820px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) var(--gutter) 32px; min-height: 100vh; display: flex; flex-direction: column; }
.pres h1 { font-size: clamp(26px, 3.2vw, 36px); font-weight: 500; line-height: 1.1; letter-spacing: -0.03em; }
.pres .lead { color: var(--muted); margin-top: 14px; max-width: 54ch; }
.pres-group { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); }
.pres-group h2 { font-size: var(--fs-nav); text-transform: uppercase; letter-spacing: var(--track-nav); font-weight: 500; }
.pres-group .idea { color: var(--muted); margin-top: 6px; max-width: 62ch; font-size: 15px; }
.pres-group ul { margin-top: 2px; display: flex; flex-wrap: wrap; gap: 0 28px; }
.pres-group a { display: inline-block; min-height: 44px; line-height: 44px; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 5px; transition: text-decoration-color .18s ease; }
.pres-group a:hover { text-decoration-color: currentColor; }
.pres .note { margin-top: auto; padding-top: 28px; }

/* ---------- Лайтбокс ---------- */

.lightbox {
  position: fixed; inset: 0; width: 100vw; height: 100vh; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--ink);
}
.lightbox:not([open]) { display: none; }
.lb-stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 72px 88px; }
.lb-stage img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.lb-btn {
  position: absolute; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  background: none; border: 0; color: inherit; font: inherit; font-size: 22px; cursor: pointer; line-height: 1;
  transition: opacity .18s ease;
}
.lb-btn:hover { opacity: .55; }
.lb-close { top: 12px; right: 12px; font-size: 30px; }
.lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.lb-count { position: absolute; left: var(--gutter); bottom: 24px; color: var(--muted); }
@media (max-width: 767.98px) {
  .lb-stage { padding: 56px 8px 64px; }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
  .lb-prev { left: auto; right: 64px; }
  .lb-next { right: 12px; }
  .lb-count { left: 16px; bottom: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  html:has(.v-3) { scroll-behavior: auto; }
  .card:hover .card-title { transform: none; }
}