/* ============ Шрифт ============ */
@font-face {
  font-family: "Retry Sans Mono";
  src: url("../fonts/retry-sans-mono-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ============ Токены (SPEC 6.3) ============ */
:root {
  --c-bg: #003B8F;
  --c-fg: #FFFFFF;
  --font: "Retry Sans Mono", ui-monospace, "Courier New", monospace;
  --fs-body: 16px;
  --lh-body: 1.6;
  --measure: 42ch;
  --measure-long: 60ch;
  --fs-label: 0.8em;
  --fs-name: 1.6em;
  --fs-title: 1.25em;
  --gutter: 24px;
  --rule: 3px;
  --dash: 4px;            /* длина штриха и пробела пунктира */
  --dash-line: 1px;
  --tap: 44px;
}
@media (min-width: 600px) {
  :root { --fs-body: 17px; --gutter: 32px; }
}
@media (min-width: 1200px) {
  :root { --fs-body: 18px; }
}

/* ============ База ============ */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body { margin: 0; min-height: 100vh; min-height: 100svh; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
p + p { margin-top: 1em; }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* У <video> браузеры не всегда считают фокус «видимым» — подсвечиваем любой. */
/* Tab попадает на кнопки встроенных контролов плеера (внутри video), поэтому ещё и :focus-within. */
video:focus,
video:focus-within { outline: 2px solid #fff; outline-offset: 3px; }
::selection { background: var(--c-fg); color: var(--c-bg); }

.text-flow {
  text-align: left;
  hyphens: manual;
  overflow-wrap: break-word;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Фамилия в капсе хранится в обычном регистре (SPEC 4). */
.surname { text-transform: uppercase; }

/* Подписи, номера в оглавлении, техданные. */
.label {
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Тап-зона ≥ 44 px без изменения визуального размера текста.
   Не flex: во flex-контейнере пробел между «ФАМИЛИЯ» и «Имя» схлопывается. */
.tap {
  display: inline-block;
  padding-block: 0.6em;   /* 1.6 строки + 2 × 0.6em ≈ 44.8 px при 16 px */
  min-width: var(--tap);
}

/* ============ Пунктир (рамки фото и линии сгиба) ============ */
/* Штрих 4 px / пробел 4 px — через градиенты: border-style: dashed этого не гарантирует. */
.dashed-frame {
  --g: var(--c-fg) 50%, transparent 0;
  background:
    linear-gradient(90deg, var(--g)) top    / calc(var(--dash) * 2) var(--dash-line) repeat-x,
    linear-gradient(90deg, var(--g)) bottom / calc(var(--dash) * 2) var(--dash-line) repeat-x,
    linear-gradient(180deg, var(--g)) left  / var(--dash-line) calc(var(--dash) * 2) repeat-y,
    linear-gradient(180deg, var(--g)) right / var(--dash-line) calc(var(--dash) * 2) repeat-y;
  aspect-ratio: 2 / 1;
  width: 100%;
}

.fold-h {
  height: var(--dash-line);
  background: linear-gradient(90deg, var(--c-fg) 50%, transparent 0) 0 0 / calc(var(--dash) * 2) 100% repeat-x;
}
.fold-v {
  width: var(--dash-line);
  background: linear-gradient(180deg, var(--c-fg) 50%, transparent 0) 0 0 / 100% calc(var(--dash) * 2) repeat-y;
}

/* ============ Panel — полоса буклета ============ */
.panel {
  position: relative;
  padding: var(--gutter);
}
/* Сетки полос: каждая полоса рисует линию сгиба сверху и слева.
   Линии у верхнего и левого края сетки срезает clip-path, поэтому пунктир остаётся только между полосами —
   при любом числе колонок. */
.panels {
  display: grid;
  grid-template-columns: 1fr;
  clip-path: inset(var(--dash-line) 0 0 var(--dash-line));
}
.panels > .panel::before,
.panels > .panel::after {
  content: "";
  position: absolute;
  pointer-events: none;
}
.panels > .panel::before {
  top: 0; left: 0; right: 0;
  height: var(--dash-line);
  background: linear-gradient(90deg, var(--c-fg) 50%, transparent 0) 0 0 / calc(var(--dash) * 2) 100% repeat-x;
}
.panels > .panel::after {
  top: 0; bottom: 0; left: 0;
  width: var(--dash-line);
  background: linear-gradient(180deg, var(--c-fg) 50%, transparent 0) 0 0 / 100% calc(var(--dash) * 2) repeat-y;
}

/* ============ StencilNumber ============ */
.stencil-number { display: block; width: 45%; }
.stencil-number svg { width: 100%; height: auto; fill: currentColor; }

/* ============ VerticalName ============ */
/* Читается снизу вверх, прижато к правому нижнему краю полосы. */
.vertical-name {
  position: absolute;
  right: calc(var(--gutter) * 0.5);
  bottom: var(--gutter);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-size: var(--fs-name);
  font-weight: 400;
  line-height: 1.1;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

/* ============ RuleLabel ============ */
.rule-label {
  display: flex;
  align-items: center;
  gap: 0.75em;
  font-size: var(--fs-label);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}
.rule-label::before {
  content: "";
  flex: 1 1 auto;
  height: var(--rule);
  background: var(--c-fg);
}

/* ============ Photo ============ */
/* Работы не кадрируем: естественная пропорция, без object-fit: cover. */
.photo img { width: 100%; height: auto; }
.photo figcaption { margin-top: 0.5em; }

/* ============ Arrow ============ */
.arrow {
  display: inline-block;
  width: 3.5em;
  height: auto;
  flex: none;
  fill: currentColor;
}
.arrow--forward { transform: scaleX(-1); }
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  min-height: var(--tap);
  text-decoration: none;
}
.arrow-link:hover .arrow-link__text,
.arrow-link:focus-visible .arrow-link__text { text-decoration: underline; }

/* ============ Главная: обложка ============ */
/* Высота фиксирована экраном: от неё считается высота вертикального заголовка. */
.cover {
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--gutter);
}
/* Фоновое видео: тонировано в синий айдентики (luminosity берёт яркость кадра, цвет — от фона),
   приглушено, чтобы белый заголовок читался. Видео — фактура, не работа, поэтому cover допустим. */
.cover { isolation: isolate; overflow: hidden; }
.cover__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: luminosity;
  opacity: 0.45;
  pointer-events: none;
}
.cover__logos {
  display: flex;
  align-items: center;
  gap: 20px;
}
.cover__logo { width: 63px; height: auto; }
/* Заголовок вписывается в свою ячейку целиком (contain, прижат влево-вниз):
   упирается то в высоту, то в ширину, но не выталкивает колонку с датой. */
.cover__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--gutter) * 0.75);
  min-height: 0;
}
.cover__title {
  position: relative;
  min-height: 0;
}
.cover__title img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: left bottom;
}
/* Дата сверху, подзаголовок снизу; обе строки читаются снизу вверх, как на обложке буклета. */
.cover__side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}
.cover__side p {
  margin: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  line-height: 1.2;
}
.cover__date { font-size: 1.25em; }

/* ============ Блоки, отбитые линией с подписью ============ */
/* Между блоками — воздух: перед каждой следующей линией два отступа полосы. */
.rule-label { margin-bottom: 1em; }
.toc > * + .rule-label,
.toc__museum { margin-top: calc(var(--gutter) * 2); }

/* ============ Полосы художников на главной ============ */
.artist-card {
  display: flex;
  flex-direction: column;
  gap: var(--gutter);
  min-height: 70vw;
  /* справа место под вертикальное имя */
  padding-right: calc(var(--gutter) + 2.4em);
  color: inherit;
  text-decoration: none;
}
.artist-card:focus-visible { outline-offset: -6px; }
/* Номер и портрет — в одну строку: портрет прижат к низу номера. */
.artist-card__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
}
.artist-card .stencil-number { width: 52%; }
.artist-card__portrait { width: 34%; }
.artist-card__excerpt { line-height: 1.5; }
.artist-card--odd .dashed-frame { margin-top: auto; }
.portrait { width: 100%; height: auto; }

/* ============ Портреты участников из колофона ============ */
.people {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter) calc(var(--gutter) * 0.75);
  margin-top: calc(var(--gutter) * 2);
}
@media (min-width: 600px) {
  .people { grid-template-columns: repeat(auto-fill, minmax(140px, 160px)); }
}
.people__name { margin-top: 0.5em; line-height: 1.3; }

/* ============ Страница художника ============ */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1em;
  padding: 0 var(--gutter);
  border-bottom: var(--dash-line) solid transparent;
}
/* Тонкая строка: на 375 px название выставки помещается в одну строку. */
.topbar.label { font-size: 0.72em; }
.topbar .arrow { width: 3em; }
.topbar__count { white-space: nowrap; }

/* Первая полоса: содержимое слева, вертикальное имя — своей колонкой справа.
   Колонка задаёт минимальную высоту полосы, поэтому длинное имя не обрезается. */
.artist__first-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: calc(var(--gutter) * 0.5);
}
.artist__first .vertical-name {
  position: static;
  align-self: end;
  margin-right: calc(var(--gutter) * -0.5);
}
.artist__first-body {
  display: flex;
  flex-direction: column;
  gap: 0.75em;
}
.artist__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: var(--gutter);
}
.artist__head .stencil-number { width: 55%; }
.artist__portrait { width: 34%; }
.artist__title { font-size: var(--fs-title); line-height: 1.35; }
.artist__tech { line-height: 1.5; }

.artist__text { max-width: calc(var(--measure) + var(--gutter) * 2); }

.artist__works { display: grid; gap: var(--gutter); }

/* Навигация внизу: назад, вперёд, все художники. */
.artist-nav { display: grid; gap: 0.25em; }
.artist-nav__next { text-align: right; }
.artist-nav__next .arrow-link { justify-content: flex-end; }
.artist-nav__all { margin-top: 0.5em; }

/* Полосы страницы художника — сетка .panels; навигация отбита своей линией. */
.artist + .artist-nav::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--dash-line);
  background: linear-gradient(90deg, var(--c-fg) 50%, transparent 0) 0 0 / calc(var(--dash) * 2) 100% repeat-x;
}

/* ============ Страница текста ============ */
.text-page__title {
  font-size: var(--fs-title);
  font-weight: 400;
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.text-page__author {
  display: flex;
  align-items: flex-end;
  gap: var(--gutter);
  margin-top: var(--gutter);
}
.text-page__photo { width: 34%; flex: none; }
.text-page__role { margin-top: 0.25em; }
/* Одна колонка до 60ch; CSS-колонки не используем (SPEC 6.5). */
.text-page__body { max-width: calc(var(--measure-long) + var(--gutter) * 2); }
.text-page__body::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--dash-line);
  background: linear-gradient(90deg, var(--c-fg) 50%, transparent 0) 0 0 / calc(var(--dash) * 2) 100% repeat-x;
}
@media (min-width: 1024px) {
  .text-page {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
    align-items: start;
  }
  .text-page__head { position: sticky; top: 0; }
  .text-page__body::before {
    top: 0; bottom: 0; left: 0; right: auto;
    width: var(--dash-line); height: auto;
    background: linear-gradient(180deg, var(--c-fg) 50%, transparent 0) 0 0 / 100% calc(var(--dash) * 2) repeat-y;
  }
  .text-page__author { flex-direction: column; align-items: flex-start; }
  .text-page__photo { width: 160px; }
}

/* ============ Оглавление ============ */
/* Номер мелко надстрочно перед именем, как в буклете. */
.toc__artists sup {
  margin-right: 0.35em;
  font-size: 0.7em;
  vertical-align: 0.6em;
  line-height: 0;
}
.toc__artists a,
.toc__texts a { text-decoration: none; }
.toc__artists a:hover .surname,
.toc__texts a:hover { text-decoration: underline; }
.toc__curators {
  margin-top: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gutter) 12px;
}
.toc__curators .people__name { font-size: 0.8em; }
/* Вместо QR буклета: стрелка и адрес музея между двумя линиями. */
.toc__museum {
  padding-block: 0.5em;
  border-top: var(--rule) solid var(--c-fg);
  border-bottom: var(--rule) solid var(--c-fg);
}

/* ============ Колофон ============ */
.kolofon__body p + p { margin-top: 1.1em; }
.kolofon__body strong {
  display: block;
  margin-bottom: 0.15em;
  font-weight: 400;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ============ Промо-видео ============ */
.promo { display: flex; align-items: center; }
.promo__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--c-bg);
}

/* ============ Подвал ============ */
.footer::before {
  content: "";
  display: block;
  height: var(--rule);
  margin-bottom: var(--gutter);
  background: var(--c-fg);
}
/* Четыре логотипа в одну строку, в одном масштабе: ширина = исходная ширина SVG × --logo-k.
   При 320 px сумма ширин (266 × 0.8 + 3 × 16 = 261) помещается в колонку 272 px. */
.footer__logos {
  --logo-k: 0.8;
  display: flex;
  align-items: flex-end;
  gap: 16px;
}
@media (min-width: 375px) { .footer__logos { --logo-k: 1; } }
@media (min-width: 600px) { .footer__logos { --logo-k: 1.25; gap: 28px; } }
.footer__logo { width: calc(var(--w) * var(--logo-k) * 1px); height: auto; }
.footer__grant {
  margin-top: var(--gutter);
  max-width: var(--measure-long);
  line-height: 1.5;
}
.footer__links { margin-top: 0.5em; }

/* ============ Широкие экраны (SPEC 6.5): разложенный лист ============ */
/* Главная: 2 колонки с 600, 3 с 1024, 4 с 1440. Оглавление занимает две полосы,
   dense заполняет освободившиеся ячейки следующими полосами. */
@media (min-width: 600px) {
  .home {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: dense;
  }
  /* Обложка тянется на высоту ряда (рядом — оглавление или выжимка), но не ниже пропорции буклета. */
  .cover {
    height: auto;
    min-height: calc((100vw / 2) * 1.414);
  }
  .toc,
  .promo { grid-column: span 2; }
  .toc__artists {
    display: grid;
    grid-template-rows: repeat(6, auto);
    grid-auto-flow: column;
    column-gap: calc(var(--gutter) * 1.5);
  }
  /* Пропорция полосы буклета — минимальная высота: длинный текст полосу удлиняет, а не вылезает. */
  .artist-card {
    aspect-ratio: 1 / 1.414;
    min-height: auto;
  }
  .artist-card__excerpt { font-size: 0.85em; }
  .kolofon { grid-column: 1 / -1; }
  /* Колофон — список выходных данных, не сплошной текст: колонки здесь допустимы. */
  .kolofon__body { columns: 2; column-gap: calc(var(--gutter) * 2); }
  .kolofon__body p { break-inside: avoid; }
}
@media (min-width: 1024px) {
  .home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cover { min-height: calc((100vw / 3) * 1.414); }
}
@media (min-width: 1440px) {
  .home { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cover { min-height: calc((100vw / 4) * 1.414); }
  .kolofon__body { columns: 3; }
}

/* Художник: одна колонка до 768; 768–1199 — первая полоса | текст, фото под текстом;
   от 1200 — первая полоса | текст | фото. Первая полоса держится на экране при прокрутке. */
@media (min-width: 768px) {
  .artist {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .artist__first { grid-row: span 2; }
  .artist__first-inner {
    position: sticky;
    top: var(--gutter);
    min-height: calc(100vh - var(--gutter) * 2);
    min-height: calc(100svh - var(--gutter) * 2);
  }
  .artist__text { max-width: none; }
  .artist__text > * { max-width: var(--measure); }
  .artist__works { align-content: start; }
}
@media (min-width: 1200px) {
  .artist { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr); }
  .artist__first { grid-row: auto; }
}

/* Текст: лишняя ширина уходит в липкую полосу слева, колонка текста не шире 60ch. */
@media (min-width: 1024px) {
  .text-page {
    grid-template-columns: minmax(280px, 1fr) minmax(0, calc(var(--measure-long) + var(--gutter) * 2));
  }
}

/* ============ Служебное ============ */
.draft-banner {
  padding: 4px var(--gutter);
  background: var(--c-fg);
  color: var(--c-bg);
  font-size: var(--fs-label);
  text-transform: uppercase;
}
mark { background: var(--c-fg); color: var(--c-bg); padding: 0 0.25em; }