/* Архив Рудольфа Хачатряна — общие стили (новая Flask-версия).
   Старые стили (selection.css, typography.css, zoom.css, preview-modal.css,
   site-nav.css, highlight.css) подгружаются отдельно. */
:root {
  --ink: #222;
  --mute: #666;
  --rule: #dcd6cc;
  --bg: #fbf9f4;
  --card: #fff;
  --accent: #7a3b28;
  --accent-dark: #5d2c1e;
  --soft: #f9f5ee;
  --imgwrap: #f3ede6;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* Резервируем место под вертикальную полосу прокрутки на уровне страницы, чтобы
   верхняя шапка (по всему окну) и контент (.wrap, без полосы) считали ширину
   одинаково — тогда правые края HY / Избранное / Всего совпадают. (07.2026) */
html { scrollbar-gutter: stable; }
body {
  font-family: Georgia, 'Times New Roman', serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  /* Обрезаем горизонтальный вылет полноширинного фона строки раздела
     (.section-header::before, 100vw), чтобы не появлялась горизонтальная
     прокрутка. `clip` (а не `hidden`) не превращает body в контейнер прокрутки,
     поэтому не ломает position: sticky у шапок. (07.2026) */
  overflow-x: clip;
}

.wrap { max-width: 1000px; margin: 0 auto; padding: 24px 32px; }

a { color: var(--accent); }
a:hover { text-decoration: underline; }

/* ─── Шапка ─── */
header.site-header {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 12px;
  /* Реорганизация 07.2026: фон шапки — во всю ширину экрана (шапка вынесена
     из .wrap), контент выравнивается внутренним контейнером .site-header-in. */
  padding: 0;
  position: sticky; top: 0; z-index: 60;
  background: var(--bg);
}
/* Компактный верхний блок (07.2026): меньше воздуха сверху/снизу, чтобы линия
   под логотипом и разделы поднялись, освободив место под полосу подразделов. */
.site-header-in { max-width: 1000px; margin: 0 auto; padding: 7px 32px 0; }
/* ── NAV 07.2026: капс мон-гротеск (IBM Plex Mono), выпадающие «Рудольф»/«Выставки»/«Литература» ── */
nav.sn2 { position: relative; display: flex; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--rule); margin-top: 7px; padding: 6px 0; }
nav.sn2 > a, nav.sn2 .sn2-item {
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em;
  font-size: 13px; color: var(--mute); text-decoration: none; white-space: nowrap;
  padding: 5px 15px; border-radius: 4px; display: inline-flex; align-items: center; gap: 6px;
  transition: color .12s; cursor: pointer; }
nav.sn2 > .sn2-item:first-child, nav.sn2 > a:first-child { padding-left: 0; }
nav.sn2 > a:hover, nav.sn2 .sn2-item:hover { color: var(--ink); background: none; }
/* Единый стиль выбора (07.2026): активный раздел — коричневый акцент. */
nav.sn2 > a.active, nav.sn2 .sn2-drop.on { color: var(--accent); }
.sn2-arw { font-size: 9px; opacity: .65; transition: transform .12s; }
.sn2-spacer { flex: 1 1 auto; }
.sn2-selected { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .08em;
  font-size: 12.5px; color: var(--accent); text-decoration: none; white-space: nowrap; padding: 5px 0 5px 12px; }
.sn2-selected:hover { color: var(--accent-dark, #5a2a1c); }
/* Приоритетнее, чем nav.sn2 > a { padding: 5px 15px } — иначе правый отступ 15px
   не давал «Избранному» встать вплотную к правому краю. (07.2026) */
nav.sn2 > a.sn2-selected { padding: 5px 0 5px 12px; }
/* «Избранное» — flex с gap:6px. Пустой span счётчика создаёт лишний отступ 6px
   справа, из-за чего слово не доходит до правого края. Пока счётчик пуст —
   убираем его совсем; при появлении «(N)» число само встанет вплотную к краю,
   а слово сдвинется влево. (07.2026) */
.rkh-nav-cnt:empty { display: none; }
/* Полоса подразделов — отдельной строкой в шапке. Видна только у открытой группы
   (data-open на nav). Активная группа открыта по умолчанию → полоса не пропадает
   при переходе на подраздел. */
.sn2-strip { display: none; align-items: center; flex-wrap: wrap;
  padding: 7px 0 3px; border-top: 1px dotted var(--rule); }
nav.sn2[data-open="rudolf"] ~ .sn2-strip[data-strip="rudolf"],
nav.sn2[data-open="exh"]    ~ .sn2-strip[data-strip="exh"],
nav.sn2[data-open="lit"]    ~ .sn2-strip[data-strip="lit"] { display: flex; }
nav.sn2[data-open="rudolf"] .sn2-drop[data-drop="rudolf"] .sn2-arw,
nav.sn2[data-open="exh"]    .sn2-drop[data-drop="exh"] .sn2-arw,
nav.sn2[data-open="lit"]    .sn2-drop[data-drop="lit"] .sn2-arw { transform: rotate(180deg); }
.sn2-strip a { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .07em;
  font-size: 11.5px; color: var(--mute); text-decoration: none; padding: 2px 3px; transition: color .12s; }
.sn2-strip a:first-child { padding-left: 0; }
.sn2-strip a:hover { color: var(--ink); }
.sn2-strip a.active { color: var(--accent); font-weight: 500; }
.sn2-dot { color: var(--rule); padding: 0 10px; }
/* поиск в новой nav — компактный, мон */
.sn2-search { flex: 0 0 auto; display: inline-flex; align-items: center; margin: 0 4px 0 0; }
.sn2-search input { font-family: 'IBM Plex Mono', monospace; font-size: 11px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mute); background: transparent; border: none;
  border-bottom: 1px solid var(--rule); padding: 4px 4px; width: 128px; }
/* Спецификой ниже перебиваем .inline-search input[type=search] (сериф-италик):
   поле поиска — мон-капс, как «ВСЕГО» (07.2026). */
.sn2-search.archive-search input[type=search] {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
  font-size: 10.5px;          /* как слово «ВСЕГО» (шрифт и размер) */
  letter-spacing: .05em;
  color: var(--ink);
  text-align: right;          /* подсказка прижата вправо, к лупе */
}
.sn2-search.archive-search input[type=search]::placeholder {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--mute);
  opacity: .8;
}
.sn2-search input:focus { outline: none; border-bottom-color: var(--accent); }
/* Поле поиска в шапке НЕ расширяется по фокусу — иначе «Избранное» съезжает
   на вторую строку. Держим фиксированную ширину (перебиваем .inline-search
   input:focus{width:240px}). (07.2026) */
.sn2-search.archive-search input[type=search],
.sn2-search.archive-search input[type=search]:focus { width: 128px; }
/* Лупа поиска по сайту — на 40% крупнее (15px → 21px). */
.sn2-search .inline-search-icon { background: none; border: none; color: var(--mute); cursor: pointer; font-size: 21px; padding: 0 4px; }
header.site-header .top {
  display: flex; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
header.site-header .brand {
  font-size: 30px; text-decoration: none; color: var(--ink);
}
/* .header-controls — у правого края верхней шапки. flex-grow=0,
   margin-left: auto толкает блок к правому краю. */
.header-controls { margin-left: auto; }

/* ─── Телефон: компактная шапка (07.2026) ───────────────────────────────
   На узком экране шапка занимала 340px из 844 (треть экрана): заголовок в
   30px переносился на две строки, меню — на четыре. Здесь она сжата до
   ~250px, а кнопки («Музыка», «Войти», RU/EN/HY) увеличены с 21px до 27–30px,
   чтобы удобнее попадать пальцем.
   ВАЖНО: всё внутри @media (max-width: 600px) — на компьютере ни одно правило
   не применяется (проверено на rudolfart.com: 12 из 12 замеров шапки при
   1400px не изменились). Боковые отступы .site-header-in намеренно НЕ трогаем:
   иначе левый край шапки (14px) разъезжается с текстом страницы .wrap (32px). */
@media (max-width: 600px) {
  header.site-header .brand { font-size: 19px; line-height: 1.25; }
  header.site-header .top { gap: 10px; }
  nav.sn2 { padding: 2px 0; }
  nav.sn2 > a, nav.sn2 .sn2-item { padding: 7px 9px; font-size: 12px; letter-spacing: .05em; }
  nav.sn2 > .sn2-item:first-child, nav.sn2 > a:first-child { padding-left: 0; }
  .sn2-strip a { padding: 6px 0; }
  .view-toggle { padding: 7px 9px; }
  .lang-switch button { padding: 7px 7px; }
  .sn2-search input[type=search] { width: 92px; }
}
/* Навигационная полоса (17.06.2026 редизайн): 12 пунктов меню перестали
   сливаться. Решение — реальные «пилюли»-кнопки: каждая ссылка получает
   padding и border-radius, при hover — лёгкая paper-заливка с акцентным
   цветом. Активный раздел — заполненная акцентная пилюля. «Избранное»
   уходит вправо через margin-left: auto. Шрифт чуть мельче, межстрочный
   убран — экран используется эффективнее. */
header.site-header nav.site-nav {
  margin-top: 6px;
  font-size: 13px;
  color: var(--mute);
  display: block;
}
/* Меню в две строки по 5 разделов. Поиск (1-я строка) и «Избранное» (2-я) —
   к правому краю своей строки. */
.site-nav-grid {
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  column-gap: 14px;
  row-gap: 4px;
}
/* Средний блок разделов: первый пункт — к левому краю колонки, последний — к
   правому (space-between). Колонка одной ширины для обеих строк, поэтому
   «Выставки/Биография» совпадают слева, «Фотоархив/Источники» — справа.
   «Произведения» стоят в 1-й колонке, под ними во 2-й строке — пустота. */
.nav-mid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
/* Поиск и «Избранное» — к правому краю (последняя колонка). */
.site-nav-grid .nav-search,
.site-nav-grid .nav-selected { justify-self: end; }
/* «Произведения» — главная часть архива: выделяем жирным акцентным. */
.site-nav-grid > a:not(.nav-selected) {
  font-weight: bold;
  color: var(--accent);
  font-size: 14px;
}
header.site-header nav.site-nav a {
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 4px;
  transition: background .12s, color .12s;
}
header.site-header nav.site-nav a:hover {
  background: var(--paper-hover, #efeada);
  color: var(--accent);
}
/* Активный раздел выделяем только шрифтом (полужирным акцентным),
   без тёмной заливки (правка 24.06.2026). */
header.site-header nav.site-nav a.active {
  background: transparent;
  color: var(--accent);
  font-weight: 700;
}
/* «Избранное» — последняя ссылка, всегда у правого края (margin-left: auto). */
header.site-header nav.site-nav .nav-selected {
  margin-left: auto;
  color: var(--accent);
}
header.site-header nav.site-nav .nav-selected[data-active] {
  font-weight: bold;
}

/* ─── Управление в шапке (переключатели вида и языка) ─── */
.header-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Глобальный поиск по архиву — тот же стиль .inline-search, что и локальный */
.archive-search input[type=search] {
  width: 110px;
  font-size: 11.5px;
  text-align: right;        /* подсказка/текст прижаты вправо, к лупе */
}
.archive-search input[type=search]:focus { width: 225px; }  /* поле растёт влево, к «Фотоархиву» */
/* Поле вплотную к лупе: минимальный зазор и левый отступ иконки. */
.nav-search { gap: 1px; }
.nav-search .inline-search-icon { padding-left: 1px; }
@media (max-width: 600px) {
  .archive-search input[type=search] { width: 110px; }
  .archive-search input[type=search]:focus { width: 100%; }
}

/* ─── Кнопка переключения «Чистый ↔ Архивный вид» ─── */
.view-toggle {
  /* 07.2026: мон-капс, как «ВСЕГО». Один класс на кнопке «Музыка» и «Вид». */
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  font-size: 11px;
  padding: 4px 9px;
  background: transparent;
  color: var(--mute);
  border: 1px solid var(--rule);
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: .06em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  /* 07.2026: фикс. line-height — иначе <a> «Выход/Войти» наследует высоту строки
     от body, а <button> «Музыка» сбрасывает её в normal → рамки разной высоты. */
  line-height: 1;
}
.view-toggle:hover { color: var(--accent); border-color: var(--accent); }
/* В чистом виде — показываем «Архивный вид» (приглашение включить).
   В архивном виде — показываем «Чистый вид» (приглашение выключить).
   Кнопка всегда прозрачная, активное состояние видно только по галочке
   в тексте «✓ Чистый вид» (правка 24.06.2026 — без тёмной заливки). */
.view-toggle .view-toggle-archive { display: none; }
body[data-view="archive"] .view-toggle .view-toggle-clean { display: none; }
body[data-view="archive"] .view-toggle .view-toggle-archive { display: inline; }

/* ─── Скрытие/показ архивных элементов ─── */
body[data-view="clean"] .archival-only { display: none !important; }
/* В архивном виде архивные строки чуть подсвечиваем, чтобы их видеть */
body[data-view="archive"] .archival-only {
  background: rgba(122, 59, 40, 0.04);
}
/* ...но вкладки-подразделы (Персональные выставки / Художественная хроника)
   не подсвечиваем — это навигация, а не данные. (07.2026) */
body[data-view="archive"] .section-tab.archival-only { background: none; }

/* ─── Переключатель языка ─── */
.lang-switch {
  display: inline-flex;
  gap: 1px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
}
.lang-switch button {
  background: transparent;
  color: var(--mute);
  border: none;
  padding: 2px 6px;
  cursor: pointer;
  font: inherit;
  letter-spacing: inherit;
  border-bottom: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.lang-switch button:last-child { padding-right: 0; }   /* HY вплотную к правому краю — общая вертикаль */
.lang-switch button:hover { color: var(--ink); }
.lang-switch button.active {
  /* Единый стиль выбора (07.2026): коричневый акцент, как у разделов. */
  color: var(--accent);
  border-bottom-color: var(--accent);
}

body[data-lang="ru"] .lang-en,
body[data-lang="ru"] .lang-hy { display: none; }
body[data-lang="en"] .lang-ru,
body[data-lang="en"] .lang-hy { display: none; }
body[data-lang="hy"] .lang-ru,
body[data-lang="hy"] .lang-en { display: none; }

/* Тело текста: внутри одного HTML-файла лежат блоки разных языков
   (lang-body-ru / lang-body-en / lang-body-hy). Переключатель языка
   должен скрывать неактуальные так же, как обычные .lang-* спаны. */
body[data-lang="ru"] .lang-body-en,
body[data-lang="ru"] .lang-body-hy { display: none; }
body[data-lang="en"] .lang-body-ru,
body[data-lang="en"] .lang-body-hy { display: none; }
body[data-lang="hy"] .lang-body-ru,
body[data-lang="hy"] .lang-body-en { display: none; }

/* ─── Хлебные крошки ─── */
.bcrumb { font-size: 13px; color: var(--mute); margin-bottom: 14px; }
.bcrumb a { color: var(--mute); text-decoration: none; }
.bcrumb a:hover { color: var(--accent); }

/* ─── Пагинация наверху (← Предыдущий | Раздел | Следующий →) ─── */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  /* margin-top -36 = стартовая позиция совпадает с точкой прилипания (нет зазора
     и «прыжка» при прокрутке). Работает и на «голом» .pager (тексты/альбомы/
     фото/видео), и одинаково во всех шаблонах. (07.2026) */
  margin: -36px 0 18px;
  padding: 8px 0;
  /* Пейджер прилипает вплотную под основной шапкой (её реальная высота —
     --site-header-h, включая подполосу раздела). z-index НИЖЕ шапки (60),
     чтобы при скролле уезжать ПОД неё, а не наезжать сверху. (07.2026) */
  position: sticky;
  top: var(--site-header-h, 80px);
  z-index: 50;
  background: var(--bg, #fbf9f4);
  border-bottom: 1px solid var(--rule, #e6e2d6);
}
/* Пейджер сразу под шапкой: стартовая позиция = точке прилипания (--site-header-h),
   поэтому при прокрутке блок НЕ дёргается. Верх/низ симметричны. */
.detail-stickybar { margin-top: -36px; padding-top: 0; }
/* Pager без центральной секции (страница текста) — две колонки.
   «Предыдущий» прижат к левому краю, «Следующий» — к правому. */
.pager.pager-2col {
  grid-template-columns: 1fr 1fr;
}
.pager.pager-2col .pager-next > a { float: right; text-align: right; }
.pager-stub-only {
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  color: var(--mute);
}
/* Ссылки в строке раздела: сам раздел — приглушённый, подгруппа — акцентом,
   чтобы к ней можно было вернуться одним кликом. (07.2026) */
.pager-section a { color: inherit; text-decoration: none; }
.pager-section a:hover { color: var(--accent); }
.pager-section .pager-section-group { color: var(--accent); }
.pager-section .pager-section-group:hover { border-bottom: 1px solid currentColor; }
.pager-section {
  text-align: center;
  color: var(--mute);
  /* Тот же шрифт, что у центра в «Произведениях» («N из M · к списку»):
     моноширинный капс, 9px, обычный вес. (07.2026) */
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
  font-weight: 400;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .pager { grid-template-columns: 1fr 1fr; }
  .pager-section { grid-column: 1 / -1; order: -1; padding-bottom: 4px; border-bottom: 1px dashed var(--rule); margin-bottom: 4px; }
}

/* ─── Полоса контекста активного фильтра ──────────────────────────────────
   Над пейджером на детальной странице работы. Видна только если пришли
   из отфильтрованного списка. Стиль — той же типографики, что и .pager. */
.filter-ctx {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 8px 0;
  margin-bottom: 4px;
  border-bottom: 1px dotted var(--rule);
  font-family: 'RKhNums', Georgia, 'Times New Roman', serif;
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: lining-nums tabular-nums;
}
.filter-ctx-back {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  font-style: italic;
}
.filter-ctx-back:hover { border-bottom-style: solid; }
.filter-ctx-count {
  font-style: normal;
  font-variant-numeric: tabular-nums;
  margin-left: 1px;
}
.filter-ctx-item {
  white-space: nowrap;
}
.filter-ctx-group {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
  margin-right: 3px;
}
.filter-ctx-value {
  color: var(--ink);
  font-style: italic;
}

/* ─── Плавающие стрелки по краям экрана — деликатные ─── */
.float-nav-prev, .float-nav-next {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
  width: 36px;
  height: 36px;
  background: transparent;
  transition: opacity .15s;
  opacity: 0.35;
}
.float-nav-prev { left: 14px; }
.float-nav-next { right: 14px; }
.float-nav-prev a, .float-nav-next a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--mute);
  text-decoration: none;
  font-size: 26px;
  font-family: Arial, sans-serif;
  font-weight: normal;
}
.float-nav-prev:hover, .float-nav-next:hover { opacity: 1; }
.float-nav-prev:hover a, .float-nav-next:hover a { color: var(--accent); }
@media (max-width: 600px) {
  .float-nav-prev { left: 4px; }
  .float-nav-next { right: 4px; }
}
.pager a {
  color: var(--mute);
  text-decoration: none;
  display: inline-block;
  /* «Предыдущий» / «Следующий» — техническое поле: моноширинный капс, мелко. */
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 9px;
  line-height: 1.3;
}
.pager a:hover { color: var(--accent); }
.pager-prev { text-align: left; }
.pager-next { text-align: right; }
.pager-name {
  display: block;
  /* Название работы — антиква (как в карточках), без италика, серым (как метки). */
  font-family: Georgia, 'Times New Roman', serif;
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  color: var(--mute);
  font-style: normal;
  margin-top: 3px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pager-prev .pager-name { text-align: left; }
.pager-next .pager-name { text-align: right; margin-left: auto; }
@media (max-width: 600px) {
  .pager-name { display: none; }
  .pager { font-size: 12px; }
}

/* ─── Заголовки ─── */
h1 { font-size: 28px; font-weight: bold; color: var(--accent); margin: 0 0 6px; line-height: 1.2; }
h2 { font-size: 19px; font-weight: normal; margin: 32px 0 14px;
     border-bottom: 1px solid var(--rule); padding-bottom: 6px; color: var(--ink); }
h3 { font-size: 16px; font-weight: bold; margin: 18px 0 8px; color: var(--ink); }

.lead { font-size: 16px; color: var(--mute); margin-bottom: 18px; }

/* ─── Карточки и сетки ─── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px;
}
.card {
  background: var(--card); border: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden; transition: border-color .15s;
}
.card:hover { border-color: var(--accent); }
.card a { text-decoration: none; color: var(--ink); display: block; }
.card .thumb {
  width: 100%; aspect-ratio: 3/4; background: var(--imgwrap);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.card .thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Видео-карточки: горизонтальный кадр 16:9, заполнен без полей. */
.card.card-video .thumb { aspect-ratio: 16/9; }
.card.card-video .thumb img { width: 100%; height: 100%; object-fit: cover; }
.card .info { padding: 10px 12px; font-size: 13px; }
.card .info .title { color: var(--ink); margin: 0 0 4px; font-weight: normal; line-height: 1.3; }
.card .info .meta { color: var(--mute); font-size: 12px; }

/* ─── Стиль «мат + тень» для миниатюр на /works ────────────────────────
   Только в .works-grid, чтобы не задеть карточки видео/фото/документов
   и сетки на других страницах. По образцу пользователя (15.06.2026):
   небольшая белая рамка-«мат» вокруг изображения + лёгкая drop-shadow. */
/* Правка 07.2026: фон-паспарту заливает ВСЮ карточку (работа + этикетка) —
   единое «окно». Рамка и тень тоже на всей карточке. Избранное/галочку не трогаем. */
.works-grid .card {
  background: var(--imgwrap);
  border: 1px solid rgba(0,0,0,.16);
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 2px 7px rgba(0,0,0,.14), 0 5px 16px rgba(0,0,0,.08);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  /* карточка-колонка на всю высоту ряда (сетка растягивает) — чтобы подпись
     можно было прижать к низу */
  display: flex;
  flex-direction: column;
}
.works-grid .card > a {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
/* подпись ВСЕГДА внизу карточки — строки этикетки у всех работ на одной линии,
   независимо от того, в сколько строк название у соседа */
.works-grid .card .info { margin-top: auto; }
/* квадратик галочки: поднимаем так, чтобы его НИЖНЯЯ линия совпала с ВИДИМЫМ
   низом последней строки (ID) — иначе он свисает на ~4px из-за межстрочного поля */
.works-grid .card .rkh-cb { bottom: 9px; }
.works-grid .card .thumb {
  /* Тёплый бумажный тон — тот же, что у всей карточки (поля работ с иной
     пропорцией сливаются с паспарту и не бросаются в глаза). */
  background: var(--imgwrap);
  padding: 0;
}
.works-grid .card:hover {
  border-color: rgba(0,0,0,.26);
  box-shadow: 0 4px 11px rgba(0,0,0,.18), 0 9px 24px rgba(0,0,0,.12);
  transform: translateY(-1px);
}
/* Правка 07.2026: подписи компактнее — название 12px, техника/ID 10px,
   постоянные межстрочки 2px; последняя строка опущена к нижней линии
   квадратика «в избранное». Только works-grid. */
.works-grid .card .info { padding: 10px 12px 9px; }
.works-grid .card .info .title { font-size: 12px; margin: 0 0 2px; line-height: 1.2; }
.works-grid .card .info .meta  { font-size: 10px; line-height: 1.2; }
.works-grid .card-id { font-size: 8px; margin-top: 2px; line-height: 1.2; }

/* ─── Списки строк ─── */
.row-list { list-style: none; padding: 0; margin: 0; }
.row-list > li {
  display: flex; gap: 16px; padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.row-list .thumb-sm {
  flex: 0 0 80px; height: 100px; background: var(--imgwrap);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.row-list .thumb-sm img { max-width: 100%; max-height: 100%; object-fit: contain; }
.row-list .row-info { flex: 1 1 auto; min-width: 0; }
.row-list .row-info .row-title { font-size: 15px; color: var(--ink); margin: 0 0 4px; }
.row-list .row-info .row-meta { font-size: 12px; color: var(--mute); }

/* ─── Общая шапка раздела (заголовок + вкладки), приклеена к верху ─── */
.section-header {
  margin-bottom: 22px;
  /* 8 px сверху и снизу от букв до рамок (запрос 17.06.2026). */
  padding: 8px 0 8px;
  position: sticky;
  /* top рассчитывается JS = высота site-header. См. base.html. */
  top: var(--site-header-h, 0);
  z-index: 50;
  /* Фон/линия/тень тянутся во всю ширину экрана через псевдоэлемент — слова
     остаются на месте, боковых теней нет. Горизонтальный вылет обрезается
     `body { overflow-x: clip }` (см. выше), поэтому нет горизонтальной прокрутки. */
  background: transparent;
}
.section-header::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  z-index: -1;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 6px 8px -6px rgba(0, 0, 0, 0.1);
}
/* Без «прыжка» при первой загрузке: в покое (скролл=0) над шапкой раздела
   36px пустого места — 12px margin-bottom у шапки сайта + 24px верхний padding
   у .wrap. В залипшем состоянии (top: --site-header-h, без margin) — 0.
   Компенсируем ровно эти 36px, когда шапка раздела — первый элемент страницы,
   чтобы при загрузке она сразу стояла вплотную под шапкой сайта. (07.2026) */
@media (min-width: 601px) {
  .wrap > .section-header:first-child { margin-top: -36px; }
}
.section-header-title {
  margin: 0;
  /* Реорганизация 07.2026: «вторая часть шапки» — тот же мон-капс гротеск,
     что и в навигации (по запросу пользователя). */
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 15px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.2;
}
/* Заголовок раздела + счётчик «всего N» — в одной строке, разнесены по краям.
   Запрос 17.06.2026: количество ставится по правому краю строки названия раздела. */
.section-header-titlerow {
  display: flex; align-items: baseline; gap: 16px;
  /* нулевой margin: 6 px воздуха снизу даёт padding .section-header */
  margin: 0;
}
.section-header-count {
  margin-left: auto;
  /* «Всё с цифрой» — тот же мон-капс, что и навигация (07.2026). */
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .07em;
  color: var(--mute);
  font-style: normal;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Узкая полоса под шапкой (07.2026): без названия раздела, слева — чипы активных
   фильтров, справа — счётчик. Компактнее по высоте. */
.section-header--slim { padding: 5px 0; margin-bottom: 14px; }

/* ОДИН ПРИНЦИП ДЛЯ ВСЕЙ ПОЛОСЫ: всё стоит на ПЕРВОЙ СТРОКЕ.
   Было `align-items: center`. Пока чипы влезали в одну строку, разницы не
   видно. Стоило им перенестись на вторую — левый блок становился вдвое выше, и
   «Смотреть выставкой» с «Найдено» всплывали в середину этой высоты: полоса
   расползалась. Владелец 17.07.2026: «слева фильтры поднимаются наверх, а
   справа остаются посередине — какой-то общий принцип им надо».

   Принцип — baseline, и он уже есть в общем .section-header-titlerow; тут его
   зачем-то перебили на center. Возвращаем. Не flex-start: тот ровняет ВЕРХ
   коробок, а слева коробка — кнопка с рамкой и отступами, справа — голый
   текст; их верх на разной высоте, а строка читается по буквам. baseline
   ставит первую строку слева и текст справа на одну линию — сколько бы строк
   фильтров ни набралось ниже. */
.section-header--slim .section-header-titlerow { align-items: baseline; min-height: 20px; }
/* Кнопка «Фильтры» (или метка «Активно:») слева не переносится; чипы — в своей
   колонке (.section-header-chiplist), которая переносится ВНУТРИ себя. Поэтому
   вторая строка чипов начинается после «Фильтры», а под словом — пусто. */
.section-header-chips { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 7px 10px; }
.section-header-chips > .works-fbtn,
.section-header-chips > .wf-active-label { flex: 0 0 auto; }
.section-header-chiplist { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px 6px; min-width: 0; }
/* Пока открыта панель фильтров — прячем строку активных пилюль-фильтров вверху.
   Пока человек ставит/снимает галки, применённое состояние (из URL) не мешает и
   не «застревает»; пилюли снова появляются после «Показать работы». Класс
   fpop-open вешает works_list.html при открытии панели. (07.2026) */
body.fpop-open .section-header-chiplist { display: none; }
.section-header-chips .wf-active-label { margin-right: 4px; color: var(--mute); }
/* Правый блок: [кнопка «Смотреть выставкой»] [счётчик] — прижат вправо. */
.section-header-countwrap { margin-left: auto; display: flex; align-items: baseline; gap: 16px; }
.sh-exhibtn { white-space: nowrap; }
/* Вкладки фильтра в строке с заголовком — толкаем к правому краю.
   Размещены в одной строке с h1 → border-bottom активной вкладки убираем
   (висел бы далеко от низа шапки). Активная — акцентный цвет + жирный.
   ВАЖНО: .section-tabs ниже в CSS перебивает margin: 0 — повышаем
   специфичность через `.section-tabs.section-tabs-inline`, чтобы margin-left:
   auto точно сработал. (баг 17.06.2026) */
/* 07.2026: без названия раздела слева вкладки-подразделы прижаты ВЛЕВО и
   повторяют стиль полосы подразделов в шапке (.sn2-strip): мон-капс 11.5px,
   разделитель «·», акцентный активный, узкий фиксированный блок. Левый край
   совпадает с полосой подразделов над ним и не «съезжает» при переключении. */
.section-tabs.section-tabs-inline {
  margin: 0;
  align-items: baseline;
}
.section-tabs.section-tabs-inline .section-tab {
  padding: 2px 0;
  margin: 0;
  border-bottom: 0;
  font-size: 11.5px;
  letter-spacing: .07em;
}
.section-tabs.section-tabs-inline .section-tab:first-child { padding-left: 0; }
.section-tabs.section-tabs-inline .section-tab.active { border-bottom: 0; }
/* Точка-разделитель между вкладками — как «·» в sn2-strip. Не ставим её перед
   «частью раздела» (Филателия): там уже есть вертикальный разделитель |. */
.section-tabs.section-tabs-inline .section-tab:not(:first-child):not(.section-tab-part)::before {
  content: '·';
  color: var(--rule);
  padding: 0 10px;
}
/* Счётчик у вкладки чуть мельче — как в полосе подразделов. */
.section-tabs.section-tabs-inline .section-tab-n { font-size: 10.5px; }
/* Строка под заголовком: слева «Найдено: N», справа — деликатный поиск.
   Поиск выровнен в один ряд с подписью, занимает свою часть строки. */
.section-header-subtitle-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 10px;
}
.section-header-subtitle-row .section-header-subtitle { margin: 0; }
.section-header-right { margin-left: auto; flex: 0 1 auto; }

/* Деликатный inline-поиск: справа лупа, слева полосочка с подсказкой
   прямо на ней. По фокусу подсказка исчезает (стандартное поведение
   placeholder), полосочка становится акцентной, можно печатать. */
.inline-search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  color: var(--mute);
  font-family: 'RKhNums', Georgia, 'Times New Roman', serif;
}
.inline-search input[type=search] {
  width: 180px;
  font-family: inherit;
  font-size: 12px;
  font-style: italic;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--rule);
  padding: 3px 0;
  transition: border-bottom-color 0.12s, width 0.18s;
}
.inline-search input[type=search]::placeholder {
  color: var(--mute);
  opacity: 0.7;
  font-style: italic;
  /* placeholder сам исчезает при печати — стандартное поведение браузера */
}
.inline-search input[type=search]:focus { outline: none; width: 240px; }
.inline-search:hover input[type=search],
.inline-search:focus-within input[type=search] { border-bottom-color: var(--accent); }
.inline-search-icon {
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 21px;
  line-height: 1;
  padding: 1px 5px 2px;
  cursor: pointer;
  font-family: Georgia, 'Times New Roman', serif;
  transition: color 0.12s;
}
.inline-search:hover .inline-search-icon,
.inline-search:focus-within .inline-search-icon { color: var(--accent); }

@media (max-width: 600px) {
  .section-header-subtitle-row { flex-wrap: wrap; }
  .section-header-right { margin-left: 0; width: 100%; }
  .inline-search input[type=search],
  .inline-search:focus-within input[type=search] { width: 100%; }
  /* На телефоне шапка раздела НЕ прилипает к верху: иначе «плашка»
     с названием раздела наезжает на изображения работ при прокрутке.
     Делаем её обычной — прокручивается вместе со страницей. */
  .section-header {
    position: static;
    top: auto;
    box-shadow: none;
  }
}
.section-header-subtitle {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--mute);
  /* 'RKhNums' первый — @font-face подставит sans-serif для цифр.
     Для русских букв используется Georgia. */
  font-family: 'RKhNums', Georgia, 'Times New Roman', serif;
}
/* Стиль «НАЙДЕНО 5 из 234» — точно как метки фильтра ниже (ЭТАП, ПЕРИОД) */
.subtitle-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  color: var(--mute);
  margin-right: 6px;
}
.subtitle-value {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: 12px;
  color: var(--ink);
  letter-spacing: .04em;
  font-variant-numeric: lining-nums tabular-nums;
}
.search-found { margin: 0 0 18px; }

/* Ссылка «в Фотоархив» под галереей фото выставки (07.2026). */
.exh-photo-archive-link {
  display: inline-block;
  margin-top: 12px;
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .05em;
  font-size: 11px;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.exh-photo-archive-link:hover { border-bottom-color: var(--accent); }
.section-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  /* линия снизу у каждой вкладки сольётся с border-bottom самой шапки */
}
.section-tab {
  padding: 6px 18px 10px 0;       /* отступы только справа и снизу, никакой «коробки» */
  margin-right: 8px;
  /* Мон-капс гротеск заодно с заголовком раздела (07.2026). */
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 12px;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.section-tab:first-child { padding-left: 0; }
.section-tab:hover { color: var(--accent); text-decoration: none; }
.section-tab.active {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 500;
}
.section-tab-n {
  color: var(--mute);
  font-size: 11px;
  margin-left: 4px;
  font-weight: normal;
  font-family: 'IBM Plex Mono', monospace;
}
.section-tab.active .section-tab-n { color: var(--accent); }

/* ─── Фильтры (универсальные, если где-то ещё нужны) ─── */
.filters {
  display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 24px;
  padding: 10px 14px; background: var(--soft);
  border: 1px solid var(--rule); border-radius: 4px;
}
.filters form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; }
.filters select, .filters input[type="text"], .filters input[type="search"] {
  font: inherit; padding: 6px 10px; border: 1px solid var(--rule);
  background: #fff; border-radius: 3px;
}
.filters .reset {
  font: inherit; padding: 6px 14px; background: transparent;
  color: var(--ink); border: 1px solid var(--mute); border-radius: 3px; cursor: pointer; text-decoration: none;
}
.filters .reset:hover { border-color: var(--accent); color: var(--accent); }

/* ─── Минималистичный фильтр работ ───────────────────────────────────────
   Одна тонкая строка из dropdown'ов, активные фильтры — текстом через точку.
   Типографика — той же эстетики, что и .filter-ctx на детальной странице:
   Georgia serif, italic значения, uppercase небольшие метки. */
.works-filter {
  margin: 12px 0 18px;
  /* 'RKhNums' первый — @font-face подменит цифры sans-serif автоматически */
  font-family: 'RKhNums', Georgia, 'Times New Roman', serif;
  font-size: 12px;
  color: var(--mute);
  font-variant-numeric: lining-nums tabular-nums;
}
.works-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 22px;
  padding-bottom: 8px;
  border-bottom: 1px dotted var(--rule);
}
.wf-select {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--mute);
  white-space: nowrap;
}
.wf-select-label {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
}
.wf-select select {
  font-family: inherit;
  font-size: 13px;
  font-style: italic;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  padding: 1px 16px 1px 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'><path fill='%23999' d='M0 0l4 5 4-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  min-width: 60px;
}
.wf-select select:hover,
.wf-select select:focus {
  outline: none;
  border-bottom-color: var(--rule);
  border-bottom-style: dotted;
}
.wf-search {
  flex: 1 1 200px;
  min-width: 180px;
}
.wf-search input[type=search] {
  width: 100%;
  font: inherit;
  font-size: 12px;
  border: none;
  border-bottom: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  padding: 3px 0;
}
.wf-search input[type=search]:focus {
  outline: none;
  border-bottom-color: var(--ink);
}

.works-filter-active {
  margin-top: 8px;
  font-family: 'RKhNums', Georgia, 'Times New Roman', serif;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.8;
  font-variant-numeric: lining-nums tabular-nums;
}
.wf-active-label {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 10.5px;
  margin-right: 8px;
}
.wf-active-item {
  color: var(--ink);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px dotted var(--mute);
}
.wf-active-item:hover { border-bottom-style: solid; color: var(--accent); }
.wf-active-x {
  display: inline-block;
  margin-left: 3px;
  font-size: 11px;
  font-style: normal;
  color: var(--mute);
}
.wf-active-item:hover .wf-active-x { color: var(--accent); }
.wf-clear {
  margin-left: 14px;
  color: var(--accent);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
  font-size: 12px;
}
.wf-clear:hover { border-bottom-style: solid; }

/* ─── Разночтения (errata) — на странице работы и каталога ─── */
.discrepancies {
  font-family: 'RKhNums', Georgia, 'Times New Roman', serif;
  font-size: 12px;
  color: var(--ink);
  border-left: 2px solid var(--rule);
  padding-left: 12px;
}
.discrepancies-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--mute);
  margin-bottom: 6px;
}
.discrepancies-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.discrepancies-list li {
  margin: 0 0 8px;
  line-height: 1.5;
}
.discrepancies-list li:last-child { margin-bottom: 0; }
.disc-where { color: var(--mute); margin-right: 8px; }
.disc-where a { color: var(--accent); text-decoration: none; border-bottom: 1px dotted currentColor; }
.disc-where a:hover { border-bottom-style: solid; }
.disc-field {
  text-transform: lowercase;
  font-style: italic;
  color: var(--mute);
  margin-right: 4px;
}
.disc-wrong {
  color: var(--mute);
  text-decoration: line-through;
  text-decoration-color: var(--mute);
}
.disc-arrow { color: var(--mute); margin: 0 4px; }
.disc-right { color: var(--ink); font-weight: 500; }
.disc-note {
  font-size: 11px;
  color: var(--mute);
  font-style: italic;
  margin-top: 3px;
}

/* ─── Тэги/метки ─── */
.tag {
  display: inline-block; padding: 3px 10px; background: var(--soft);
  color: var(--mute); border: 1px solid var(--rule); border-radius: 12px;
  font-size: 11px; font-family: 'Helvetica Neue', Arial, sans-serif;
}

/* ─── Блоки связанных объектов на детальных страницах ─── */
.rel-section {
  margin: 22px 0;
}
.rel-section h3 {
  margin: 0 0 10px;
  font-size: 11px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: bold;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
}
/* Ссылка «Смотреть выставкой» рядом с заголовком блока связанных работ:
   открывает эти работы вместе в зале виртуальной выставки. Ненавязчивая,
   в стиле подписи-заголовка (07.2026). */
.rel-exhib-btn {
  margin-left: 10px;
  font-size: 11px;
  font-weight: normal;
  text-transform: none;
  letter-spacing: 0;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.rel-exhib-btn:hover { border-bottom-color: var(--accent); }
.rel-section ul { margin: 0; padding-left: 18px; font-size: 14px; }
.rel-section li { margin: 3px 0; }
.rel-section li a { color: var(--accent); text-decoration: none;
                    border-bottom: 1px dotted var(--accent); }
.rel-section li a:hover { border-bottom-style: solid; }

/* Список со связанными объектами: если у элемента есть thumb — рядом
   с названием показываем маленькую миниатюру (по правилу «есть картинка → икона»). */
.rel-list { list-style: none; padding-left: 0; }
.rel-list-item-with-thumb { list-style: none; margin-left: -18px; padding: 2px 0; }
.rel-list-item-with-thumb > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom-color: transparent !important;
}
.rel-list-item-with-thumb > a:hover .rel-list-thumb {
  border-color: var(--accent);
}
.rel-list-thumb {
  flex: 0 0 28px;
  width: 28px;
  height: 36px;
  background: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.12s;
}
.rel-list-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}
.rel-list-text {
  border-bottom: 1px dotted var(--accent);
}
.rel-list-item-with-thumb > a:hover .rel-list-text { border-bottom-style: solid; }
.rel-empty { font-size: 13px; color: var(--mute); font-style: italic; }

/* ─── Карточки связанных объектов (каталоги/выставки на стр. друг друга) ─── */
.rel-cards {
  /* Карточки теперь не в сетке колонок, а в один столбец на всю ширину —
     это позволяет «год — название — характеристика» поместиться в одну строку. */
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.rel-card {
  display: flex;
  gap: 10px;
  padding: 4px 0;
  background: transparent;
  border: none;
  text-decoration: none;
  color: var(--ink);
  transition: color .12s;
}
.rel-card:hover {
  color: var(--accent);
  text-decoration: none;
  background: transparent;
}
.rel-card:hover .rel-card-title { color: var(--accent); }
.rel-card:hover .rel-card-thumb {
  border-color: var(--accent);
}
.rel-card-thumb {
  border: 1px solid var(--rule);
  transition: border-color .12s;
}
.rel-card-thumb {
  flex: 0 0 56px;
  width: 56px;
  height: 72px;
  background: var(--imgwrap);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 2px;
}
.rel-card-thumb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.rel-card-body { flex: 1 1 auto; min-width: 0; }
.rel-card-year {
  /* Год теперь стоит INLINE с названием — «1960 — 40-летие Арм ССР Ереван».
     Акцентный цвет сохраняем, делаем bold для контраста. */
  color: var(--accent);
  font-weight: bold;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  margin-right: 1px;
}
.rel-card-title {
  font-size: 13px;
  line-height: 1.35;
  color: var(--ink);
  margin-bottom: 3px;
}
.rel-card-meta {
  /* Характеристика идёт INLINE с названием: «1960 — Название — групповая · Москва».
     Курсив, чтобы было понятно, что это описание, а не часть названия. */
  color: var(--mute);
  font-style: italic;
}

/* ─── Галерея: главное изображение со стрелками СНАРУЖИ и полосой миниатюр ─── */
.rkh-gallery { position: relative; }

/* (Все .art-img-wrap получают фиксированный размер выше — здесь ничего отдельно для galery-multi.) */

/* Главная строка: [стрелка ‹] [картинка] [стрелка ›] — flex, стрелки не лезут на изображение */
.rkh-gallery-main {
  display: flex;
  align-items: center;
  gap: 4px;
}
.rkh-gallery-main .art-img-wrap {
  flex: 1 1 auto;
  min-width: 0;
  /* Раньше мат+тень был на этом контейнере — но контейнер растягивается
     на всю ширину родителя, и при вертикальной работе слева/справа возникали
     широкие пустые поля. Переносим стиль на сам <img>, чтобы паспарту
     обнимал именно изображение и был равномерным со всех сторон.
     (Правка 15.06.2026 по запросу пользователя.) */
  display: flex;
  justify-content: center;
  align-items: flex-start;   /* по верху окна — горизонтальные работы поднимаются
                                на уровень заголовка, а не «висят» посередине */
}
.rkh-gallery-main img {
  cursor: zoom-in;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  /* Тонкая тёмная окантовка (как картина в галерее с минимальной рамой):
     1 px полупрозрачного чёрного (60 %) — сразу за ним идёт галерейная тень. */
  border: 1px solid rgba(0,0,0,.42);
  box-shadow:
    /* контакт со стеной — узкая тёмная полоса под нижним краем */
    2px 6px 10px rgba(0,0,0,.40),
    /* средний слой — даёт ощущение выпуклости */
    5px 20px 36px rgba(0,0,0,.30),
    /* дальняя мягкая «лужа» света на стене */
    10px 40px 70px rgba(0,0,0,.20);
}

/* Стрелки — деликатные шевроны, без фона, на полях рядом с картинкой */
.rkh-gallery-prev, .rkh-gallery-next {
  flex: 0 0 auto;
  background: transparent;
  border: none;
  color: var(--mute);
  font-size: 30px;
  line-height: 1;
  font-family: Arial, sans-serif;
  padding: 6px 4px;
  cursor: pointer;
  opacity: 0.35;
  transition: opacity .15s, color .15s;
}
.rkh-gallery-prev:hover, .rkh-gallery-next:hover {
  color: var(--accent);
  opacity: 1;
}

/* Полоса миниатюр — в ОДИН ряд с горизонтальной прокруткой */
.detail-strip {
  display: flex;
  flex-wrap: nowrap;            /* один ряд, без переноса */
  gap: 6px;
  margin: 14px 0 4px;
  padding: 8px 0;
  border-top: 1px dashed var(--rule);
  overflow-x: auto;             /* скроллим если не влезает */
  overflow-y: hidden;
  scroll-behavior: smooth;
}
.detail-strip-item {
  flex: 0 0 auto;               /* не сжимаемся */
  display: inline-block;
  width: 70px;
  height: 90px;
  background: var(--imgwrap);
  border: 1px solid var(--rule);
  border-radius: 2px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color .15s, opacity .15s;
}
.detail-strip-item:hover {
  border-color: var(--accent);
  opacity: 0.95;
  text-decoration: none;
}
.detail-strip-item.active {
  border-color: var(--accent);
  border-width: 2px;
  box-shadow: 0 0 0 1px var(--accent);
}
/* Когда активна обёртка с подписью — выделяем рамкой весь блок,
   а не только картинку, чтобы было сразу видно, какая миниатюра выбрана. */
.detail-strip-item.detail-strip-labeled.active {
  border-color: var(--accent);
}
.detail-strip-item.detail-strip-labeled.active .detail-strip-label {
  background: var(--accent);
  color: #fff;
}
.detail-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
/* Метаданные документа: серый «—» для пустых связей и моноширинный ID */
.meta-empty {
  color: var(--mute, #999);
  font-style: italic;
}
.meta-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85em;
  color: var(--mute, #888);
  letter-spacing: -0.02em;
}
/* Несколько связей в одной строке-поле — каждая позиция отдельной строкой,
   без точек-разделителей. (07.2026) */
.rel-multi-item { display: block; }
.rel-multi-item + .rel-multi-item { margin-top: 2px; }

/* Миниатюры с видимой подписью (RKh-Doc-NNNN) под изображением.
   Состоят из двух кликабельных частей:
   - .detail-strip-thumb (картинка) — управляет слайдером главного окна.
   - .detail-strip-label (подпись)  — ссылка на страницу карточки документа. */
.detail-strip-item.detail-strip-labeled {
  width: 86px;
  height: 110px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow: hidden;
}
.detail-strip-item.detail-strip-labeled .detail-strip-thumb {
  flex: 1 1 auto;
  min-height: 0;
  display: block;
  background: var(--imgwrap);
}
.detail-strip-item.detail-strip-labeled .detail-strip-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
}
/* Для не-аннотированных миниатюр (структура без .detail-strip-thumb):
   <a class="detail-strip-item detail-strip-labeled"><img><span class="detail-strip-label"></span></a>
   img должна занять только верхнюю часть, оставив место подписи. */
.detail-strip-item.detail-strip-labeled > img {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  object-fit: contain;
  cursor: pointer;
}
.detail-strip-label {
  flex: 0 0 auto;
  display: block;
  font-size: 9.5px;
  line-height: 1.1;
  text-align: center;
  padding: 3px 1px;
  background: var(--imgwrap);
  border-top: 1px solid var(--rule);
  color: var(--text-meta, #666);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: none;
  cursor: pointer;
}
a.detail-strip-label:hover {
  color: #fff;
  background: var(--accent);
  text-decoration: none;
}
/* Чтобы подпись под миниатюрой воспринималась как «кнопка открыть в окошке» —
   при наведении она подсвечивается акцентным фоном (отдельное действие от
   клика по самой картинке миниатюры, который листает слайдер). */
a.detail-strip-label {
  transition: background 0.12s, color 0.12s;
}
/* Блок прямых ссылок под изображением (выставка/работа/карточка).
   Каждая ссылка — отдельная строка с минимальным вертикальным интервалом.
   Выравнивание по левому краю — как у блока «Связано с выставками» под ним. */
.image-related {
  margin-top: 4px;
  text-align: left;
  font-size: 13px;
  line-height: 1.2;
}
/* Перебиваем .rel-card (flex+padding) — здесь нужен block на отдельной строке */
.image-related a.rel-card.image-related-link {
  display: block;
  padding: 0;
  margin: 0;
  gap: 0;
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.image-related a.rel-card.image-related-link:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* ─── Деликатная ссылка-PDF ─── */
/* ─── Тексты: шапка ─────────────────────────────────────────────────────── */
/* Название текста: уменьшено на ~1/3 от стандартного H1. Год и характеристика
   идут inline в конце названия — мелким курсивом, серым. */
/* Шапка страницы текста: название слева, «Скачать» — в правом краю той же строки.
   Унифицировано со страницами объектов, где служебные ссылки уходят вправо. */
.tx-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 8px;
}
.tx-title-row h1.tx-title { margin: 0; flex: 1 1 auto; }
.tx-title-row .tx-downloads-inline {
  flex: 0 0 auto;
  margin: 0;
  white-space: nowrap;
}
h1.tx-title {
  font-size: 22px;
  line-height: 1.25;
  color: var(--accent);
  margin: 0 0 8px;
  font-weight: bold;
}
h1.tx-title .tx-title-meta {
  display: inline;
  font-size: 12px;
  font-style: italic;
  font-weight: normal;
  color: var(--mute);
  margin-left: 8px;
  letter-spacing: 0;
}
/* Автор — отдельная строка. Если имя совпало с персоной — становится ссылкой
   с пунктирным подчёркиванием. Клик → плавающее окошко превью персоны. */
.tx-author {
  font-size: 14px;
  color: var(--accent);
  margin: 0 0 6px;
  font-style: italic;
}
.tx-author a {
  color: inherit;
  text-decoration: none;
  /* 07.2026: убрана постоянная пунктирная линия под именем автора;
     подчёркивание появляется только при наведении. */
}
.tx-author a:hover {
  border-bottom: 1px solid currentColor;
}
/* 07.2026: автор и название на странице текста поменяны местами.
   Автор — крупной строкой (в .tx-title-row, размер как у прежнего названия);
   название — мельче, под ним. Шрифты/цвета/начертания сохранены: автор остаётся
   курсивным акцентным, название — жирным акцентным. */
.tx-title-row .tx-author-lead {
  flex: 1 1 auto;
  margin: 0;
  font-size: 22px;
  line-height: 1.25;
  font-style: normal;   /* автор — ровным (не курсивным) шрифтом */
}
/* Название — шрифтом навигации («Произведения», «Выставки» …): IBM Plex Mono,
   капитель, разрядка. Тот же размер, что был, цвет — коричневый акцент. */
h1.tx-title.tx-title-sub {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 14px;
  font-weight: normal;
  color: var(--accent);
  margin: 2px 0 6px;
}

/* «Опубликовано в …» — отдельная строка под автором.
   Каждая ссылка открывает превью (через .rel-card). */
/* Блок «Опубликовано в:» на странице текста.
   Метка-заголовок — мелкими капителями над списком.
   Каждое издание — отдельной строкой:
     ТИП (мелкими капителями)   Название издания, дата
   Название курсивом и подчёркнуто — кликабельно, открывает превью. */
/* Единый заголовок внутри тела текста: автор (шрифт как у автора карточки) ·
   линия · название (шрифт как у названия карточки: IBM Plex Mono, капитель). */
.tx-body-head { margin: 0 0 16px; }
.tx-body-head .tbh-author {
  font-family: Georgia, serif;
  font-size: 17px;
  color: var(--accent);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 10px;
}
.tx-body-head .tbh-title {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 13px;
  color: var(--accent);
}
/* Характеристика самого текста (интервью/эссе), если не выводится строкой издания. */
.tx-selfkind {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
}
.tx-selfkind-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  color: var(--mute);
}
.tx-selfkind .tx-arch-id {
  flex: 0 0 auto;
  font-family: Menlo, monospace;
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
}
.tx-published-in {
  font-size: 13px;
  color: var(--mute);
  margin: 0 0 18px;
  line-height: 1.55;
  /* 07.2026: архивный номер (.tx-arch-id) уходит в правый край этой строки. */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.tx-published-in .tx-arch-id {
  flex: 0 0 auto;
  font-family: Menlo, monospace;
  font-size: 11px;
  color: var(--mute);
  white-space: nowrap;
}
.tx-published-in-label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  margin-bottom: 4px;
}
.tx-published-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tx-published-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 2px 0;
}
.tx-pub-kind {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  color: var(--mute);
  font-style: normal;
  flex: 0 0 auto;
  min-width: 12em;     /* выровнять колонку названия — мягкая «таблица» */
}
.tx-pub-link {
  color: var(--accent);
  text-decoration: none;
  font-style: italic;
  /* 07.2026: постоянная пунктирная линия убрана; подчёркивание — при наведении. */
}
.tx-pub-link:hover { border-bottom: 1px solid currentColor; }
.tx-pub-date {
  font-style: normal;
  color: var(--mute);
}
/* Пометка в конце строки издания: сам текст там не напечатан. (07.2026) */
.tx-pub-note {
  font-style: normal;
  color: var(--mute);
  white-space: nowrap;
}

/* Ссылки скачивания Word — простой текст, без рамок и плашек.
   Как обычные ссылки сайта: пунктирное подчёркивание, hover-эффект. */
.tx-downloads {
  font-size: 12px;
  color: var(--mute);
  margin: 0 0 18px;
  font-style: italic;
}
.tx-downloads-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  font-style: normal;
  margin-right: 6px;
}
.tx-download-link {
  color: var(--accent);
  text-decoration: none;
  margin: 0 2px;
}
.tx-download-link + .tx-download-link { margin-left: 8px; }
.tx-download-link:hover { border-bottom: 1px solid currentColor; }

/* ─── Компактные значки действий справа от названия текста ─── */
.tx-title-row .tx-actions {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: center;
  white-space: nowrap;
}
.tx-act-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Высота как у кнопок «Музыка» / «Архивный вид» в шапке (25px). 07.2026 */
  width: 26px; height: 25px;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--mute);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.tx-act-btn svg { width: 16px; height: 16px; }
.tx-act-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--bg); }
/* Перебиваем flex:1 1 0 из .work-action-share — значок не растягиваем. */
.tx-actions .tx-act-share { position: relative; display: inline-flex; flex: 0 0 auto; min-width: 0; }

/* Всплывающая подсказка (CSS — появляется сразу, в отличие от нативного title). */
.tx-act-btn { position: relative; }
.tx-act-btn::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: transparent; color: var(--mute);
  font-family: -apple-system, Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1;
  padding: 2px 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease;
  z-index: 60;
}
/* Стрелка-указатель больше не нужна (пузырёк убрали, фон прозрачный). */
.tx-act-btn::before { content: none; }
.tx-act-btn:hover::after { opacity: 1; }

/* ─── Кнопка фоновой музыки в шапке (вид как у «Архивный вид» = .view-toggle) ─── */
.rkh-amb { position: relative; display: inline-flex; }
.rkh-amb-btn { padding-left: 7px; padding-right: 7px; }
.rkh-amb-btn .rkh-amb-ic { margin-right: 2px; }
.rkh-amb[data-state="off"] .rkh-amb-ic { opacity: .55; }
.rkh-amb[data-state="on"] .rkh-amb-btn { color: var(--accent); border-color: var(--accent); }
.rkh-amb[data-state="on"] .rkh-amb-ic { display: inline-block; animation: rkh-amb-pulse 1.5s ease-in-out infinite; }
@keyframes rkh-amb-pulse { 0%,100% { opacity:.5; } 50% { opacity:1; } }
/* Меню выбора жанра */
.rkh-amb-menu {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 90;
  min-width: 168px; background: #fff; border: 1px solid var(--rule);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.14); padding: 4px;
}
.rkh-amb[data-open="1"] .rkh-amb-menu { display: block; }
.rkh-amb-opt {
  display: flex; align-items: center; gap: 8px; width: 100%; box-sizing: border-box;
  padding: 7px 10px; border: 0; background: transparent; border-radius: 6px;
  font-family: Georgia, serif; font-size: 13px; color: var(--ink);
  text-align: left; cursor: pointer; white-space: nowrap;
}
.rkh-amb-opt:hover { background: var(--bg); color: var(--accent); }
.rkh-amb-dot { color: var(--accent); font-size: 12px; line-height: 1; }
.rkh-amb-off { color: var(--mute); border-top: 1px solid var(--rule); border-radius: 0 0 6px 6px; margin-top: 3px; padding-top: 8px; }
.rkh-amb-off:hover { color: var(--accent); }
@media print { .rkh-amb { display: none !important; } }

/* Блок «Другие тексты этого автора» — над окном с текстом.
   Собирается на сервере из texts.csv по полю author. Ссылки открываются
   в новой вкладке, чтобы читатель не терял место в текущем тексте. */
.tx-other-by-author {
  margin: 0 0 14px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  line-height: 1.55;
}
.tx-other-by-author-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  color: var(--mute);
  margin-bottom: 6px;
}
.tx-other-by-author-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.tx-other-by-author-list li {
  margin: 2px 0;
}
.tx-other-year {
  color: var(--ink);
}
/* Характеристика (тип издания) — тем же шрифтом, что основное описание
   текста (.tx-pub-kind): капитель, разрядка, мелкий кегль. */
.tx-other-kind {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10.5px;
  color: var(--mute);
  font-style: normal;
}
.tx-other-link {
  color: var(--accent);
  text-decoration: none;
  font-style: italic;
}
.tx-other-link:hover { border-bottom: 1px solid currentColor; }
/* Издание, где напечатан текст — ссылка на страницу издания, подсвечена акцентом. */
a.tx-other-edition {
  display: inline;   /* перебивает .rel-card display:flex, чтобы шло в строку */
  color: var(--accent);
  font-style: normal;
  text-decoration: none;
}
.tx-other-edition { color: var(--accent); font-style: normal; }
a.tx-other-edition:hover { border-bottom: 1px solid currentColor; }

/* ─── Тексты: окно с прокруткой + кнопка «развернуть» ──────────────────────
   Длинные тексты (эссе, статьи) показываются в фиксированном окне 15 строк
   с внутренней прокруткой. Кнопка ниже раскрывает текст на всю страницу. */
.tx-body-wrap {
  position: relative;
  max-width: none;     /* во всю ширину контента страницы */
  margin-top: 8px;
}
.tx-body {
  font-size: 16px;
  line-height: 1.7;
  max-height: calc(16px * 1.7 * 12);   /* ~12 строк (на 20% меньше прежних 15) */
  overflow-y: auto;
  padding: 18px 24px 18px 22px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--bg);
  /* мягкий скролл */
  scroll-behavior: smooth;
}
.tx-body p:first-child { margin-top: 0; }
.tx-body p:last-child { margin-bottom: 0; }
.tx-body::-webkit-scrollbar { width: 8px; }
.tx-body::-webkit-scrollbar-thumb {
  background: var(--rule);
  border-radius: 4px;
}
.tx-body::-webkit-scrollbar-thumb:hover { background: var(--mute); }
.tx-body::-webkit-scrollbar-track { background: transparent; }

/* Лёгкий градиент у нижнего края окна — намёк, что есть продолжение текста. */
.tx-body-fade {
  position: absolute;
  left: 1px; right: 1px; bottom: 1px;
  height: 36px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--bg) 80%);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}
.tx-body-wrap.tx-body-expanded .tx-body {
  max-height: none;
  overflow: visible;
  border: none;
  padding: 0;
  background: transparent;
}
.tx-body-wrap.tx-body-expanded .tx-body-fade { display: none; }

.tx-body-actions {
  margin-top: 10px;
  text-align: center;
}
.tx-expand-btn {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--mute);
  font: inherit;
  font-size: 12px;
  font-style: italic;
  padding: 5px 14px;
  border-radius: 16px;
  cursor: pointer;
  transition: color 0.12s, border-color 0.12s;
}
.tx-expand-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* Подпись под картиной и ссылка на PDF — одной строкой, маленький шрифт.
   Явно Georgia (без RKhNums-подмены), чтобы цифры в «(372 стр.)» рендерились
   в том же italic-Georgia, что и сама подпись — иначе разные шрифты. */
.image-actions {
  margin-top: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--mute);
  line-height: 1.4;
  font-family: Georgia, 'Times New Roman', serif;
}
.image-caption {
  font-style: italic;
}
.image-actions-sep { color: var(--rule); }

.pdf-link {
  color: var(--mute);
  text-decoration: none;
  border-bottom: 1px dotted var(--mute);
  font-style: italic;
  transition: color .12s, border-bottom-color .12s;
}
.pdf-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
  border-bottom-style: solid;
  text-decoration: none;
}

/* ─── Кнопки ─── */
.btn {
  padding: 8px 14px; background: var(--soft); color: var(--accent);
  border: 1px solid var(--rule); border-radius: 3px; font-size: 13px;
  font-family: Georgia, serif; cursor: pointer; text-decoration: none;
  display: inline-block;
}
.btn:hover { border-color: var(--accent); text-decoration: none; }
.btn.primary {
  background: var(--accent); color: #fff;
  border-color: var(--accent); font-weight: bold;
}
.btn.primary:hover { background: var(--accent-dark); }

/* ─── Подвал ─── */
footer.site-footer {
  margin: 64px 0 0; padding: 16px 0; border-top: 1px solid var(--rule);
  font-size: 12px; color: var(--mute); text-align: center;
}

/* ─── Главная: hero, CTA ─── */
.cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin: 24px 0 32px; }
.cta {
  display: inline-block; padding: 14px 22px; background: var(--accent);
  color: #fff; text-decoration: none; font-size: 16px;
  border-radius: 4px; border: 1px solid var(--accent);
}
.cta:hover { background: var(--accent-dark); text-decoration: none; }
.cta.secondary { background: #fff; color: var(--accent); }
.cta .sub { display: block; font-size: 12px; font-weight: normal; opacity: .8; margin-top: 4px; }

.stats-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin: 24px 0;
}
.stat {
  padding: 14px; background: var(--card); border: 1px solid var(--rule);
  border-radius: 3px; text-align: center;
}
.stat .n { font-size: 24px; font-weight: bold; color: var(--accent); display: block; }
.stat .lbl { font-size: 12px; color: var(--mute); margin-top: 4px; }

/* ─── Деталь работы: 2 колонки ─── */
.detail-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px; margin-top: 18px; align-items: start;
}
@media (max-width: 780px) { .detail-grid { grid-template-columns: 1fr; } }

/* Окно с картиной — единый фиксированный размер на все работы, чтобы при
   листании страниц не «прыгало», и крайне высокие сканы не вылезали за экран. */
.art-img-wrap {
  background: transparent;
  border: none;
  padding: 0;
  height: 65vh;
  min-height: 480px;
  display: flex;
  align-items: flex-start;  /* по верху окна — горизонтальные работы поднимаются
                               на уровень заголовка, а не «висят» посередине */
  justify-content: center;
}
.art-img-wrap img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  cursor: zoom-in;
  /* border и box-shadow перенесены в .rkh-gallery-main img выше:
     там мат-рамка + галерейная тень (правка 15.06.2026 — после того
     как обнаружилось что этот блок перебивал по каскаду). */
}
@media (max-width: 780px) {
  .art-img-wrap { height: 55vh; min-height: 360px; }
}

/* ─── Шапка страницы работы — повторяет колоночную сетку detail-grid,
       чтобы содержимое (этап + стрелки) располагалось строго над картиной,
       а название в правой колонке стартовало с уровня верха картины ─── */
.work-pager-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 32px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
@media (max-width: 780px) {
  .work-pager-wrap { grid-template-columns: 1fr; }
}
.work-pager {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  font-size: 12px;
  color: var(--mute);
  min-height: 30px;
}
/* Стрелки в правой колонке сетки — прижаты к правому краю страницы */
.work-pager-wrap .work-pager-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  padding: 8px 0;
  font-size: 12px;
  color: var(--mute);
}
.work-pager-wrap .work-pager-nav a {
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
}
.work-pager-wrap .work-pager-nav a:hover { color: var(--accent); }
.work-pager-stage {
  text-align: center;
  color: var(--mute);
  font-weight: bold;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-style: normal;
}
.work-pager-stage-name { color: var(--mute); }
.work-pager-stage-period { color: var(--mute); }
.work-pager-nav { display: flex; gap: 12px; align-items: center; }
.work-pager-nav a {
  color: var(--mute);
  text-decoration: none;
  white-space: nowrap;
}
.work-pager-nav a:hover { color: var(--accent); }
@media (max-width: 540px) {
  .work-pager-stage { position: static; transform: none; max-width: none; flex: 1; }
}

/* ─── Название работы в правой колонке (вместо большого H1 над изображением) ─── */
.work-title-aside {
  font-size: 22px;
  line-height: 1.25;
  color: var(--accent);
  font-weight: bold;
  margin: 0 0 6px;
  letter-spacing: 0;
  font-family: Georgia, 'Times New Roman', serif;
  text-align: center;       /* по центру правого блока */
  /* 07.2026: название выровнено по новому левому краю меток (сдвиг +18px) и по
     ширине таблицы (300px), чтобы правый край подчёркивания совпадал с мета-строками. */
  padding-left: 18px;
  width: 300px;
  box-sizing: border-box;
  overflow-wrap: break-word;   /* страховка: очень длинное слово ломается, не вылезает за колонку */
}
/* Заголовок пригласительного: «прочая информация» на 30% мельче, а само
   ключевое слово («Пригласительный билет») — обычным кеглем. (08.2026) */
.pub-title-aux { font-size: 0.7em; }
.pub-title-aux .pub-title-key { font-size: 1.4286em; }   /* 0.7 × 1.4286 ≈ 1.0 */
.aside-subtitle {
  font-size: 13px;
  color: var(--mute);
  font-style: italic;
  /* Блок «название + подзаголовок» центрируется между верхней линией (низ
     панели) и своей нижней линией: сверху структурный зазор ~18px, поэтому
     нижний padding увеличен, чтобы буквы встали по центру band. */
  margin: 0 0 12px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--rule);
  text-align: center;       /* подпись (автор и т.п.) тоже по центру */
}
/* ОПТИЧЕСКОЕ центрирование текста между линиями (07.2026): у засечного
   шрифта воздуха над буквами больше, чем под ними, поэтому равный padding
   визуально «роняет» строку вниз. Компенсируем: верхний padding меньше
   нижнего на величину смещения — БУКВЫ встают ровно по центру между линиями.
   Итоговая высота блока сохраняется (сумма padding не меняется). */
.work-title-aside:has(+ .aside-subtitle) { margin-bottom: 8px; padding-top: 2px; }
/* Если подзаголовка нет, подчёркивание выводим у самого заголовка */
.work-title-aside:not(:has(+ .aside-subtitle)) {
  /* Центрируем название между ВЕРХНЕЙ линией (низ панели-пейджера) и СВОЕЙ
     нижней линией. Между панелью и колонкой есть структурный зазор ~18px —
     компенсируем его нижним padding, чтобы буквы встали ровно по центру
     между двумя видимыми линиями. margin-bottom = 0 → строки меты идут
     вплотную, каждая центрируется между своими линиями. */
  /* Зазоры над и под названием уменьшены на 30% (по запросу 07.2026). */
  padding-top: 0;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}

/* ─── Таблица мета-данных в правой колонке ─── */
/* Колонки 1fr 1fr → одинаковая ширина → вертикальная ось между лейблом и
   значением совпадает с горизонтальным центром таблицы. Название aside-block
   тоже центрировано → их оси совпадают. */
/* Раскладка колонок карточки — ОДНИ ЧИСЛА НА ВСЕХ.
   Их знают двое: сама таблица характеристик и строка значков с номером под ней
   (.work-actions) — номер обязан стоять по левому краю колонки значений.
   17.07.2026: они разошлись. 16.07 колонки в таблице поменяли местами
   (152/132 → 132/152), а строку с номером не тронули — и номер уехал на 20 px
   правее значений. Комментарий над ней при этом уверял, что всё выровнено:
   он остался от прежних чисел. Владелец увидел это сегодня.
   Теперь число одно, и разойтись им нечем. Правишь — правишь здесь. */
:root {
  --meta-lbl: 132px;   /* колонка меток: ЭТАП, ГОД, ГОРОД… */
  --meta-gap: 10px;    /* просвет между колонками */
  --meta-val: 158px;   /* колонка значений; 132 + 10 + 158 = 300 = ширина таблицы */
}

.meta-table {
  font-size: 14px;
  line-height: 1.5;
  /* 07.2026: таблицу ужали справа до 300px — линейки-разделители между строками
     идут по этой ширине, поэтому 300px здесь трогать не надо. Если понадобится
     больше места под значения — брать его перераспределением колонок в .row
     выше, а не расширением таблицы (в боковой колонке 320px есть 20px запаса,
     но их трата удлинит все линейки во всех карточках). */
  width: 300px;
  max-width: 100%;
}
.meta-table .row {
  display: grid;
  /* Метки дополнительно сдвинуты вправо на ширину «ЭТА» (~18px) через
     padding-left у .lbl.
     16.07.2026: было `152px 132px`. Английское «Open Forms 1989–90» (153px) не
     влезало в колонку значений 132px и рвалось по тире — «90» падало на вторую
     строку сиротой. Ось значений сдвинута на 20px ВЛЕВО: колонки поменялись
     местами по ширине (132 + 16 + 152 = те же 300px). Почему именно так:
       • таблица остаётся 300px — линейки-разделители не удлиняются
         (их ширину специально ужимали, см. .meta-table ниже);
       • левый край таблицы и меток не двигается — к нему привязаны заголовок
         карточки и строка значков под характеристиками;
       • меткам 132px хватает с запасом: самая длинная — «МЕСТОНАХОЖДЕНИЕ».
     Проверено на живом сайте: ни одна метка нигде не переносится и не вылезает
     (произведения, выставки, тексты; RU и EN; 1400/900/390px). Из всей карточки
     сдвинулась только ось значений — заголовок, значки, края таблицы и её
     высота совпали до пикселя. */
  /* 17.07.2026. «Ереван, Армянская ССР» рвалось, и «ССР» падало на вторую
     строку сиротой — та же беда, что с «Open Forms 1989–90» днём раньше.
     Значению не хватало 5 px: нужно 157, было 152.

     ГДЕ ВЗЯТЬ 6 px — ЭТО И БЫЛ ВЕСЬ ВОПРОС. Замерено в браузере:
       • у меток НЕЛЬЗЯ: под текст у них 114 px, и при 108 тут же рвутся три —
         «Связь с выставкой», «Связь с каталогом», «Related catalogue» (по 109);
       • таблицу расширять НЕЛЬЗЯ: удлинятся линейки во всех карточках
         (см. записку у .meta-table);
       • `white-space: nowrap` на городе НЕЛЬЗЯ: города бывают длинные —
         «Прага, Улан-Батор, Варшава, Берлин (4 страны)», такое вылезет за край.
     Осталось единственное ничьё место — ЗАЗОР между колонками: 16 → 10.
     Метки не тронуты (те же 132 px, ни одна не переносится), таблица те же
     300 px, левый край на месте. Проверено замером: город встал в одну строку.

     Одного зазора мало: колонки заданы жёстко, и отнятые 6 px просто пропали бы
     впустую — их надо ОТДАТЬ значению. 132 + 10 + 158 = те же 300 px. */
  grid-template-columns: var(--meta-lbl) var(--meta-val);
  gap: var(--meta-gap);
  /* По запросу (рис. пользователя): верхний зазор = высота метки = нижний зазор.
     Строка = 3× высоты заглавной буквы. Значение (line-height 21px) как раз даёт
     тройную высоту капса метки (~7px), поэтому padding 0 + вертикальный центр
     дают ровно три равных отрезка вокруг слова «ЭТАП».
     07.2026: зазоры над и под словами увеличены в 1,5 раза (padding 4px). */
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
/* row--wide: label остаётся на той же вертикальной оси, что у остальных строк
   (правый край левой колонки grid 1fr 1fr), а value переезжает на следующую
   строку и растягивается на всю ширину — чтобы длинный текст не сжимался в
   узкую правую полоску.
   Текст в значении — приглушённый: мельче (12,5px), italic, цвет mute.
   Это применяется к «Дополнение», «Провенанс», «Замечания» — все «длинные»
   текстовые поля карточки произведения. Структурные элементы внутри
   (.disc-field, .disc-wrong, .disc-right, .disc-note) сохраняют собственные
   стили благодаря специфичности селекторов. */
.meta-table .row.row--wide {
  grid-template-columns: 1fr 1fr;
  gap: 4px 16px;
}
.meta-table .row.row--wide .lbl {
  text-align: right;
  align-self: start;
}
.meta-table .row.row--wide .val {
  grid-column: 1 / -1;
  text-align: left;
  margin-top: 4px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--mute, #7a7065);
  line-height: 1.55;
}
/* «Фондовый номер»: значение выравниваем по ПОСЛЕДНЕЙ базовой линии метки.
   EN метка в 2 строки (Foundation / Accession No.) — число встаёт на строку
   «Accession No.»; RU метка в 1 строку — число ровно по ней. */
.meta-table .row.row--accession { align-items: last baseline; }
.meta-table .row:last-child { border-bottom: none; }
.meta-table .lbl {
  color: var(--mute);
  /* Технические подписи — моноширинный капс. (07.2026) */
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
  font-weight: 500;
  text-align: right;          /* подписи «причаливают» к оси справа */
  padding-top: 0;             /* центрирование по вертикали делает .row (align-items:center) */
  padding-left: 18px;         /* сдвиг меток вправо на ширину «ЭТА» (по запросу) */
}
.meta-table .val {
  color: var(--ink);
  text-align: left;           /* значения уходят от оси влево */
}
.meta-table .val.mono { font-family: Menlo, Consolas, monospace; font-size: 13px; }
.meta-table .val .meta-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.meta-table .val .meta-list li {
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule);
}
.meta-table .val .meta-list li:last-child { border-bottom: none; padding-bottom: 0; }
.meta-table .val .meta-list li:first-child { padding-top: 0; }

/* ─── Плавающие окошки превью (можно перетаскивать, открывать несколько) ─── */
.rkh-pv-window {
  position: fixed;
  background: var(--bg);
  width: 720px;
  max-width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 6px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
  animation: rkh-pv-pop .15s ease-out;
  /* Окно можно уменьшать/увеличивать мышью за правый-нижний угол — тогда
     несколько окон удобно поставить рядом и сравнить работы, не закрывая
     страницу. resize требует overflow не visible; содержимое всё равно
     скроллится в .rkh-pv-content. (07.2026) */
  resize: both;
  overflow: hidden;
  min-width: 260px;
  min-height: 200px;
}
/* Заметный уголок-хват, чтобы было понятно, что окно тянется. */
.rkh-pv-window::after {
  content: "";
  position: absolute;
  right: 2px; bottom: 2px;
  width: 12px; height: 12px;
  border-right: 2px solid var(--mute);
  border-bottom: 2px solid var(--mute);
  opacity: .5;
  pointer-events: none;
}
@keyframes rkh-pv-pop {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.rkh-pv-handle {
  cursor: move;
  user-select: none;
  background: var(--soft);
  border-bottom: 1px solid var(--rule);
  padding: 6px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;  /* ID слева · «×» справа (07.2026) */
  border-radius: 6px 6px 0 0;
}
/* Номер ID в шапке окна — мелким мон-шрифтом слева, как «подпись окна». */
.rkh-pv-id {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--mute);
  opacity: .85;
  white-space: nowrap;
}
.rkh-pv-handle.dragging { background: var(--imgwrap); }
.rkh-pv-handle-grip {
  color: var(--mute);
  font-size: 18px;
  font-family: Arial, sans-serif;
  letter-spacing: -2px;
  line-height: 1;
}
.rkh-pv-close-x {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--mute);
  font-size: 22px;
  line-height: 1;
  padding: 0 6px;
  font-family: Georgia, serif;
}
.rkh-pv-close-x:hover { color: var(--accent); }
.rkh-pv-content {
  padding: 18px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}
.rkh-pv-footer {
  /* Тонкая полоска — по высоте как верхняя «ручка» окна (07.2026). */
  padding: 5px 18px;
  border-top: 1px solid var(--rule);
  background: var(--soft);
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
/* Нижние кнопки окна превью — единообразно с верхними («Архивный вид»/«Music»
   = .view-toggle): прозрачный фон, светлая рамка, тот же шрифт/размер/цвет.
   Коричневая заливка «Перейти» убрана. */
.rkh-pv-btn {
  font: inherit;
  font-size: 12px;
  /* Высота как у кнопки «Музыка» / «Архивный вид» (25px). */
  height: 25px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: transparent;
  color: var(--mute);
  letter-spacing: .04em;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  transition: border-color .15s, color .15s, background .15s;
}
/* Скрытая кнопка (нет PDF) не должна оставлять пустой «огрызок». */
.rkh-pv-btn[hidden] { display: none; }
/* «Закрыть» — квадратная пиктограмма с крестиком. */
.rkh-pv-btn-close { width: 30px; padding: 0; justify-content: center; position: relative; }
.rkh-pv-btn-close svg { width: 14px; height: 14px; }
/* Подсказка — прозрачная, серая, СЛЕВА от значка (без чёрного нативного title). */
.rkh-pv-btn-close::after {
  content: attr(data-tip);
  position: absolute; top: 50%; right: calc(100% + 6px); transform: translateY(-50%);
  background: transparent; color: var(--mute);
  font-family: -apple-system, Helvetica, Arial, sans-serif; font-size: 11px; line-height: 1;
  padding: 2px 4px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .12s ease; z-index: 60;
}
.rkh-pv-btn-close:hover::after { opacity: 1; }
.rkh-pv-btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.rkh-pv-btn-close { color: var(--mute); }
.rkh-pv-btn-pdf { color: var(--mute); }
.rkh-pv-btn-go {
  margin-left: auto;   /* остаётся у правого края */
  background: transparent;
  color: var(--mute);
  border-color: var(--rule);
}
.rkh-pv-btn-go:hover {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent);
}
/* «В избранное» в нижней панели превью — тот же значок-флажок, что в архиве. */
.rkh-pv-footer .rkh-pv-fav { display: inline-flex; align-items: center; }
.rkh-pv-footer .rkh-fav-btn {
  width: 30px; height: 25px; box-sizing: border-box; padding: 0; border: 1px solid var(--rule);
  background: transparent; border-radius: 4px; color: var(--mute);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  position: relative;
}
.rkh-pv-footer .rkh-fav-btn svg { width: 16px; height: 16px; }
.rkh-pv-footer .rkh-fav-btn:hover,
.rkh-pv-footer .rkh-fav-btn.on { color: var(--accent); border-color: var(--accent); }
/* Подсказка «Избранное» — СПРАВА от значка (перебиваем позицию .tx-act-btn::after). */
.rkh-pv-footer .rkh-fav-btn::after {
  top: 50%; left: calc(100% + 6px); right: auto; bottom: auto;
  transform: translateY(-50%);
}
@media (max-width: 480px) {
  .rkh-pv-btn-go { margin-left: 0; width: 100%; text-align: center; }
}
.rkh-pv-loading {
  padding: 40px;
  text-align: center;
  color: var(--mute);
  font-style: italic;
}
/* Компактные размеры внутри модалки (тот же object_detail.html, но другие размеры) */
.rkh-pv-window h1 { font-size: 22px; }
/* Превью: вертикальная раскладка — крупная картинка сверху по центру,
   название и описание снизу под ней. Окно подтягивается к низу контента. */
.rkh-pv-window .detail-grid {
  grid-template-columns: minmax(0, 1fr);   /* minmax(0,…) — иначе колонка не сжимается и окно распирает */
  gap: 16px;
  margin-top: 0;        /* убираем margin-top: 18px от полной страницы */
  align-items: start;
  justify-items: center;
}
/* Сбрасываем min-height колонок с полной страницы — иначе снизу зияет пустота. */
.rkh-pv-window .detail-grid > aside,
.rkh-pv-window .detail-grid:has(.art-img-wrap) > aside { min-height: 0; }
.rkh-pv-window .detail-grid > div:first-child { padding-left: 0; width: 100%; }
.rkh-pv-window .art-img-wrap {
  height: auto;         /* СБРАСЫВАЕМ 65vh от полной страницы */
  min-height: auto;     /* СБРАСЫВАЕМ 480px от полной страницы */
  padding: 0;
  align-items: center;  /* центрируем картину в её естественной высоте */
}
.rkh-pv-window .art-img-wrap img { max-height: 30vh; max-width: 100%; }
/* Aside в превью — название и таблица оба на одной вертикальной оси,
   центрированы по горизонтали в правой части окошка. */
.rkh-pv-window aside {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;     /* центрирует БЛОКИ — название и таблицу */
  text-align: center;
}
.rkh-pv-window aside h1.work-title-aside {
  /* margin-bottom 0 — таблица примыкает к линии под названием так же,
     как в эталоне (иначе над «ЭТАП» появлялся двойной зазор). (07.2026) */
  margin: 0; font-size: 18px;
  /* Сброс сдвига/ширины с полной страницы — название по центральной оси. */
  padding-left: 0; width: 100%; text-align: center;
  /* Не более двух строк. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rkh-pv-window .meta-table { margin-top: 0; }
/* «Замечания», «Заметка» — без больших отступов */
.rkh-pv-window .notice,
.rkh-pv-window .discrepancies { margin-top: 12px !important; }

.rkh-pv-window .art-img-wrap a { display: inline-block; cursor: zoom-in; }
.rkh-pv-window .art-img-wrap a:hover { opacity: 0.85; }
/* Таблица метаданных в окошке превью.
   • Сама таблица — единая grid-сетка с двумя колонками 1fr 1fr (одинаковая
     ширина). Это значит, что вертикальная ось между колонками совпадает с
     горизонтальным центром таблицы → название (центрированное во flex) тоже
     ложится на эту ось.
   • .row делается прозрачным (display: contents), .lbl и .val идут прямыми
     детьми grid и делят общие колонки → одна ось для всех строк.
   • Лейблы справа от оси, значения слева. */
.rkh-pv-window .meta-table {
  /* ЭТАЛОН описательной части (как на странице произведения): каждая строка —
     самостоятельная сетка, метки слева, разделительные линии, единые отступы.
     Метка фикс. ширины (152px, как в эталоне) — оси совпадают; значению отдаём
     всю остальную ширину окна (в превью оно шире, поэтому длинные значения
     переносятся меньше). (07.2026) */
  display: block;
  font-size: 14px;
  line-height: 1.5;
  width: min(600px, 100%);
}
.rkh-pv-window .meta-table .row {
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  column-gap: 16px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
  align-items: center;
}
.rkh-pv-window .meta-table .row:last-child { border-bottom: none; }
.rkh-pv-window .meta-table .lbl {
  text-align: right;         /* во всплывающих окнах метки причаливают к оси справа */
  text-transform: uppercase;
  letter-spacing: .04em;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 10px;
  color: var(--mute);
}
.rkh-pv-window .meta-table .val {
  font-style: normal;        /* без курсива — ровный шрифт */
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.rkh-pv-window .meta-table .val.mono { font-style: normal; font-size: 13px; }
/* Стопка связей в превью — обычные строчные ссылки (у .rel-card свой padding
   4px делает строки высокими). Так «воздух» между строчками ≈ 6px. (07.2026) */
.rkh-pv-window .meta-table .rel-multi-item .rel-card {
  display: inline;
  padding: 0;
  gap: 0;
}
/* В превью НЕ показываем «Описание» (оно есть на самой карточке) и ID-номера
   (RKh-…) — они видны при переходе на страницу объекта. (07.2026) */
.rkh-pv-window .notice { display: none; }
.rkh-pv-window .meta-mono { display: none; }

/* Превью: если есть доп. изображения (rkh-gallery-multi) — миниатюры идут
   ВЕРТИКАЛЬНОЙ колонкой СПРАВА от основного изображения, прокручиваются в
   пределах высоты картинки; весь блок «картинка + миниатюры» центрируется. */
.rkh-pv-window .rkh-gallery-multi {
  display: flex;
  flex-direction: row;
  align-items: stretch;          /* колонка миниатюр = высоте картинки */
  justify-content: center;       /* блок по центру оси окна */
  gap: 10px;
}
.rkh-pv-window .rkh-gallery-multi .rkh-gallery-main { flex: 0 1 auto; min-width: 0; }
.rkh-pv-window .rkh-gallery-multi .rkh-gallery-strip {
  flex: 0 0 auto;
  flex-direction: column;        /* миниатюры по вертикали */
  flex-wrap: nowrap;
  gap: 6px;
  margin: 0;
  min-height: 0;
  max-height: 30vh;              /* не выше основного изображения */
  overflow-y: auto;
  align-content: flex-start;
  justify-content: flex-start;
}
/* Одиночное изображение (без доп.) — как было, миниатюр нет. */
.rkh-pv-window .rkh-gallery-strip {
  margin-top: 8px;
  gap: 4px;
  justify-content: center;
}
.rkh-pv-window .rkh-gallery-thumb {
  width: 38px;
  height: 50px;
  flex: 0 0 auto;
}
/* Единый компактный размер ВСЕХ миниатюр в вертикальной колонке превью —
   и обычных (.rkh-gallery-thumb), и с подписью «стр. N» (.detail-strip-item),
   чтобы они не различались по размеру. Подпись под миниатюрой — мельче. */
.rkh-pv-window .rkh-gallery-multi .rkh-gallery-strip .rkh-gallery-thumb,
.rkh-pv-window .rkh-gallery-multi .rkh-gallery-strip .detail-strip-item {
  width: 58px;
  height: 78px;
  flex: 0 0 auto;
}
.rkh-pv-window .rkh-gallery-multi .rkh-gallery-strip .detail-strip-label {
  font-size: 8px;
  line-height: 1;
  padding: 2px 1px;
}
.rkh-pv-window .rkh-gallery-prev,
.rkh-pv-window .rkh-gallery-next {
  font-size: 22px;
  padding: 0 6px;
}

/* ─── Блок «Период творчества» — мягкая подложка, чуть отдельно от основного ─── */
.aside-period {
  margin: 16px 0;
  padding: 10px 14px;
  background: var(--soft);
  border-left: 2px solid var(--rule);
  border-radius: 0 3px 3px 0;
}
.aside-period-lbl {
  font-size: 10px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}
.aside-period-val {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.4;
}
.aside-period-sub {
  color: var(--mute);
  font-style: italic;
}

/* ─── Категория-фильтр — маленькая кликабельная плашка ─── */
.aside-category {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  margin: 8px 0 0;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 16px;
  font-size: 13px;
  color: var(--ink);
  text-decoration: none;
  transition: border-color .15s, color .15s;
  flex-wrap: wrap;
}
.aside-category:hover {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: none;
}
.aside-category-lbl {
  color: var(--mute);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .05em;
}
.aside-category-val { color: var(--ink); font-weight: bold; }
.aside-category:hover .aside-category-val { color: var(--accent); }
.aside-category-cta { color: var(--mute); font-size: 12px; }

/* ─── Заметка-конфайнс ─── */
.notice {
  padding: 10px 14px; background: var(--soft); border-left: 3px solid var(--accent);
  font-size: 13px; color: var(--mute); margin: 14px 0;
}
.notice b { color: var(--ink); }

/* ─── Дополнения к zoom-просмотрщику: prev/next и счётчик ─── */
#rkh-zoom .rz-prev, #rkh-zoom .rz-next {
  font-size: 22px;
  line-height: 1;
  padding: 0 12px;
  min-width: 38px;
  font-family: Arial, sans-serif;
}
#rkh-zoom .rz-counter {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-size: 12px;
  color: #ddd;
  padding: 0 6px;
  min-width: 60px;
  text-align: center;
}

/* ─── Выставочная биография ─── */
.bio-year { margin-top: 18px; margin-bottom: 6px; font-size: 18px; color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.bio-exh-list { list-style: none; padding: 0; margin: 0 0 12px; }
.bio-exh-item { padding: 6px 0; border-bottom: 1px dotted #eee; line-height: 1.4; }
.bio-exh-item:last-child { border-bottom: none; }
.bio-exh-item .rel-card { padding: 0; }
.bio-exh-type {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  margin-left: 8px; vertical-align: middle; text-transform: lowercase;
}
.bio-exh-type-solo { background: #fef3e0; color: #a06400; }
.bio-exh-type-group { background: #eef3f9; color: #4a6480; }
.bio-exh-place { color: var(--mute); font-size: 13px; margin-left: 8px; }

/* ─── Ссылки внутри биографии (на выставки, работы, тексты) ─── */
.bio-ref {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted var(--accent);
  cursor: pointer;
}
/* Под мышкой — ОДНА линия, как у города и страны (просьба владельца 17.07.2026:
   «а то очень какая-то там вторая появляется»).

   Откуда бралась вторая. Есть общее правило `a:hover { text-decoration:
   underline }`. Гасит его тот, кто окажется сильнее:
     • у города — `.meta-table .wikiref { text-decoration: none }`, два класса,
       и он общее правило перебивает;
     • у автора — `.bio-ref { text-decoration: none }`, ОДИН класс, и `a:hover`
       (класс + псевдокласс) оказывается сильнее. Подчёркивание включалось
       поверх пунктира — и под мышкой появлялись две линии сразу.
   В покое обе ссылки выглядели одинаково, поэтому в CSS разницы не видно:
   она только в наведении. Найдено разбором каскада в браузере.

   Гасим здесь, а не усложняем селектор: `.bio-ref:hover` — те же класс +
   псевдокласс, что у `a:hover`, но правило стоит НИЖЕ и потому побеждает
   (правило про порядок — №61). */
.bio-ref:hover { border-bottom-style: solid; text-decoration: none; }
.bio-ref:focus { outline: none; }

/* ─── Биография — «гроссбух» (07.2026) ───────────────────────────────
   Слева год (моноширинно), справа текст (антиква). Годы на одном уровне
   со строкой текста. Плотный интерлиньяж. Источники — деликатные инлайн-
   ссылки, открывают поп-ап (rkh-preview) для выставок/публикаций/документов. */
.timeline { margin-top: 4px; max-width: 600px; }
.tl-decade {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--accent);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 6px;
  /* Отступ над десятилетием = отступу под ним до полосочки (6px). (07.2026) */
  margin: 6px 0 10px;
}
.tl-decade:first-child { margin-top: 6px; }
.tl-decade .lang-en { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--knob, #aea89e); font-weight: 400; }
.tl-event {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 6px 0;
  border-bottom: 1px solid var(--soft);
}
.tl-date {
  flex: 0 0 68px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--mute);
  letter-spacing: 0;
  white-space: nowrap;
}
/* Весь текст биографии — моноширинный, кегль меньше, короткая строка (07.2026). */
.tl-text {
  flex: 1 1 auto;
  min-width: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  line-height: 1.5;
}
.tl-text .tl-title { display: inline; }
/* Инлайн-числа внутри прозы (годы, размеры) — тоже моноширинно. */
.tl-text .num { font-family: 'IBM Plex Mono', monospace; font-size: .86em; }
.tl-refs { display: inline; margin-left: 7px; white-space: nowrap; }
.tl-refs .bio-ref {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  border-bottom: 1px solid #d8b9ae;
  white-space: nowrap;
}
.tl-refs .bio-ref + .bio-ref { margin-left: 7px; }
/* Квадратики-связи справа (выставки → поп-ап через rkh-preview). 07.2026 */
.tl-marks { flex: 0 0 auto; align-self: center; display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; }
/* Цвет — как у квадратика ползунка микшера в виртуальной выставке (--knob). */
.tl-mark { display: inline-block; width: 12px; height: 12px; border-radius: 3px; background: var(--knob, #aea89e); cursor: pointer; text-decoration: none; }
.tl-mark.tl-mark-solo { background: var(--knob, #aea89e); }
.tl-marks .bio-ref { border-bottom: 0; }        /* перебить точечное подчёркивание */
.tl-mark:hover { box-shadow: 0 0 0 3px rgba(174, 168, 158, .45); }
/* Подсвеченное имя человека → карточка персоны (уже .bio-ref: акцент + пунктир). */
.tl-text .bioname { white-space: nowrap; }
/* Внешняя вики-ссылка (напр. город, регион) — тот же вид, но ведёт в интернет,
   не в архив (открывается в новой вкладке). */
.tl-text .wikiref { color: var(--accent); border-bottom: 1px dotted var(--accent); text-decoration: none; cursor: pointer; }
.tl-text .wikiref:hover { border-bottom-style: solid; }
/* Вики-ссылки в мета-таблице карточек (город/страна в «Место проведения»,
   «Город») — тот же вид, что в биографии. (07.2026) */
.meta-table .wikiref,
.rkh-pv-window .meta-table .wikiref {
  color: var(--accent);
  border-bottom: 1px dotted var(--accent);
  text-decoration: none;
  cursor: pointer;
}
.meta-table .wikiref:hover,
.rkh-pv-window .meta-table .wikiref:hover { border-bottom-style: solid; }
/* Ссылка на текст автора в каталоге («название текста» → страница текста). */
.meta-table .txt-ref, .rkh-pv-window .meta-table .txt-ref {
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.meta-table .txt-ref:hover, .rkh-pv-window .meta-table .txt-ref:hover { border-bottom-color: var(--accent); }
/* Биография: слева текст (600px), справа колонка автопортретов. 07.2026 */
.static-page-body--bio { position: relative; display: flex; gap: 30px; align-items: flex-start; }
.static-page-body--bio > .timeline { flex: 0 0 auto; width: 600px; max-width: 600px; }
.bio-portraits {
  flex: 1 1 auto; min-width: 0; position: sticky;
  top: calc(var(--site-header-h, 60px) + 60px);
  align-self: flex-start; padding-top: 40px;
}
/* Подпись «Автопортреты» — в одном блоке с кнопками (слева от них); уезжает
   вместе с кнопками при прокрутке. 07.2026 */
.bio-tools .bp-cap {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--mute); white-space: nowrap; margin-right: 10px;
}
.bp-strip {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  max-height: calc(100vh - var(--site-header-h, 60px) - 110px);
  overflow-y: auto; padding: 2px 6px 8px; scrollbar-width: thin;
}
.bp-item {
  display: block; width: 150px; text-decoration: none;
  border: 1px solid transparent; border-radius: 6px; padding: 5px; opacity: .72;
  transition: opacity .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.bp-item img { display: block; width: 100%; height: auto; border-radius: 3px; background: var(--soft); }
.bp-year { display: block; text-align: center; margin-top: 4px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--mute); }
.bp-item:hover { opacity: 1; }
.bp-item.active { opacity: 1; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); transform: scale(1.03); }
.bp-item.active .bp-year { color: var(--accent); }
@media print { .bio-portraits { display: none !important; } }
@media (max-width: 900px) { .static-page-body--bio { display: block; } .bio-portraits { display: none; } }
/* Панель действий биографии — прижата к правому краю. */
.bio-tools.tx-actions { display: inline-flex; align-items: center; gap: 4px; }
.static-page-body--bio .bio-tools.tx-actions { position: absolute; top: 0; right: 0; margin: 0; z-index: 5; }
/* Старая одиночная кнопка (не используется, оставлена на всякий случай). */
.bio-tools { max-width: 600px; margin: 0 0 12px; }
.bio-print-btn {
  font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mute); background: none;
  border: 1px solid var(--rule); border-radius: 4px; padding: 5px 10px; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.bio-print-btn:hover { color: var(--accent); border-color: var(--accent); }
/* Печать / PDF: чистый документ — без шапки, вкладок, квадратиков; имена как текст. */
@media print {
  .site-header, .sn2-strip, .section-header, footer, .bio-tools, .tl-marks,
  .ambient-player, .view-toggle { display: none !important; }
  html, body { background: #fff !important; }
  .wrap { max-width: 100%; padding: 0; }
  .timeline { max-width: 100%; }
  .tl-event { break-inside: avoid; }
  .tl-text, .tl-text .bioname, .tl-text a.bio-ref, .tl-text .wikiref {
    color: #000 !important; border: 0 !important; text-decoration: none !important;
    font-family: Georgia, serif !important;
  }
  .tl-date { color: #000 !important; }
  .tl-decade { color: #000 !important; }
}
@media (max-width: 600px) {
  .tl-event { gap: 12px; }
  .tl-date { flex-basis: 46px; font-size: 12px; }
}

/* ─── Биография: автоматический раздел персональных выставок ─── */
.bio-auto-heading {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 22px;
  color: var(--accent);
}
.bio-personal-list { list-style: none; padding: 0; margin: 0; }
.bio-personal-list li { padding: 6px 0; line-height: 1.5; border-bottom: 1px dotted #eee; }
.bio-personal-list li:last-child { border-bottom: none; }
.bio-personal-list b { color: var(--accent); margin-right: 6px; }
.bio-place { color: var(--mute); font-size: 13px; margin-left: 6px; }

/* ─── Художественная хроника ─── */
.bio-auto-note {
  color: var(--mute); font-size: 13px; font-style: italic;
  margin-bottom: 16px;
}
.ac-list { list-style: none; padding: 0; margin: 0 0 16px; }
.ac-item { padding: 4px 0; line-height: 1.45; border-bottom: 1px dotted #eee; }
.ac-item:last-child { border-bottom: none; }
.ac-badge {
  display: inline-block; font-size: 10px; padding: 1px 6px; border-radius: 3px;
  margin-right: 6px; text-transform: lowercase; vertical-align: middle;
}
.ac-exh-solo  { background: #fef3e0; color: #a06400; }
.ac-exh-group { background: #eef3f9; color: #4a6480; }
.ac-vid       { background: #f0f4ec; color: #4d6a3e; }
.ac-doc       { background: #f8f0f0; color: #884444; }
.ac-place     { color: var(--mute); font-size: 13px; }

/* ─── Филателия: сетка карточек ─── */
.static-page-body .stamp-display {
  display: inline-block;
  vertical-align: top;
  width: 320px;
  margin: 0 16px 24px 0;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.static-page-body .stamp-display .st-img {
  text-align: center;
  margin-bottom: 10px;
  background: #fafafa;
  padding: 8px;
  border-radius: 3px;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
}
.static-page-body .stamp-display .st-img img {
  max-width: 100%;
  max-height: 280px;
  height: auto;
  object-fit: contain;
  display: block;
}
.static-page-body .stamp-display dl {
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
}
.static-page-body .stamp-display dt {
  font-weight: 600;
  color: var(--mute);
  margin-top: 6px;
}
.static-page-body .stamp-display dd {
  margin: 0 0 0 0;
  color: var(--ink);
}

/* ─── Фото-карточки в списке ─── */
.card.card-photo .thumb { aspect-ratio: 4/3; }
.card.card-photo .thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Preview-режим фото — одноколоночный компактный лэйаут */
.photo-preview-layout { max-width: 800px; margin: 0 auto; }

/* ─── Альбомы фотографий ─── */
.card.card-album .thumb { aspect-ratio: 4/3; }
.card.card-album .thumb img { width: 100%; height: 100%; object-fit: cover; }

.album-hero {
  position: relative; width: 100%;
  aspect-ratio: 16/7; max-height: 480px;
  overflow: hidden; border-radius: 6px; margin-bottom: 24px;
  background: #222;
}
.album-hero-img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.78);
}
.album-hero-overlay {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 28px;
  background: linear-gradient(transparent, rgba(0,0,0,0.65));
  color: #fff;
}
.album-hero-overlay h1 {
  margin: 0; font-size: 28px; color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.album-hero-meta {
  margin-top: 6px; font-size: 14px; opacity: 0.92;
}
.album-body { max-width: 1200px; margin: 0 auto; }
.album-description { font-size: 15px; line-height: 1.55; margin-bottom: 20px; max-width: 800px; }
.album-relations { margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--rule); }
.album-photos-heading { margin: 24px 0 12px; font-size: 18px; color: var(--accent); }

.album-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px;
}
.album-tile {
  display: block; aspect-ratio: 4/3;
  background: #f0f0f0; border-radius: 3px; overflow: hidden;
  cursor: zoom-in; transition: transform .12s;
}
.album-tile:hover { transform: scale(1.02); }
.album-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Плитка-обёртка: фото + ряд значков связей под ним.
   Значки = маленькие кружки с буквой-меткой (Р/П/В/К/Пу/Д/Вд).
   При наведении мыши title=… показывает название связанной сущности.
   Клик → ссылка ловится rkh-preview.js (.rel-card) → всплывающее окно. */
.album-tile-wrap { display: flex; flex-direction: column; gap: 4px; position: relative; }
.photo-chips { display: flex; flex-wrap: wrap; gap: 3px; padding: 0 2px; }
.photo-chip {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 10px;
  border: 1px solid var(--accent);
  background: #fff; color: var(--accent);
  font-size: 10px; font-weight: 600; line-height: 1;
  text-decoration: none;
  transition: background .12s, color .12s;
}
.photo-chip:hover { background: var(--accent); color: #fff; }

/* ─── Список персон: 3 колонки, компактные строки, алфавитный навигатор ─── */
.alpha-nav {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 12px 0;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0;
  background: var(--bg); z-index: 5;
}
.alpha-nav-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 26px; height: 26px; padding: 0 6px;
  border-radius: 4px;
  font-weight: 600; font-size: 14px;
  color: var(--accent); text-decoration: none;
  transition: background .12s, color .12s;
}
.alpha-nav-letter:hover { background: var(--accent); color: #fff; }

.persons-columns {
  column-count: 4;
  column-gap: 18px;
  column-fill: balance;
}
/* Контент-зона .wrap = max-width: 980px → 4 колонки по ~225px помещаются.
   Промежуточный брейкпоинт 1100px убран 17.06.2026: он съедал 4-ю колонку
   на ширинах, где она нормально влезает (980px ≤ 1100px). */
@media (max-width: 800px)  { .persons-columns { column-count: 2; column-gap: 16px; } }
@media (max-width: 520px)  { .persons-columns { column-count: 1; } }

.persons-section { break-inside: avoid-column; margin-bottom: 6px; }
.persons-letter-heading {
  font-size: 13px;
  color: var(--accent);
  margin: 0;
  padding: 0;
  border: 0;
  font-weight: 700;
  line-height: 1.2;
}
.persons-list { list-style: none; padding: 0; margin: 0 0 2px; }
.persons-list li { padding: 0; }
.persons-list a {
  display: block;
  padding: 0;
  color: inherit;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.25;
}
.persons-list a:hover { color: var(--accent); }

/* ─── Тексты о художнике: группировка по автору, 3 колонки ─── */
.texts-columns {
  column-count: 3;
  column-gap: 20px;
  column-fill: balance;
}
@media (max-width: 1000px) { .texts-columns { column-count: 2; } }
@media (max-width: 600px)  { .texts-columns { column-count: 1; } }

.texts-author { break-inside: avoid-column; margin-bottom: 12px; }
.texts-author-name {
  font-size: 14px; font-weight: 700;
  color: var(--accent);
  margin: 0 0 3px;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--rule);
}
.texts-author-name a {
  color: var(--accent); text-decoration: none;
}
.texts-author-name a:hover { text-decoration: underline; }
.texts-author-count { font-weight: 400; color: var(--mute); font-size: 12px; margin-left: 4px; }

.texts-list { list-style: none; padding: 0; margin: 0; }
.texts-list li { padding: 0; }
.texts-list a {
  display: flex; gap: 6px; align-items: baseline;
  padding: 0;
  color: inherit; text-decoration: none;
  font-size: 13px; line-height: 1.3;
}
.texts-list a:hover { color: var(--accent); }
.texts-year {
  flex: 0 0 auto; min-width: 30px;
  font-variant-numeric: tabular-nums;
  color: var(--mute); font-size: 12px;
}

/* ─── Публикации: десятилетия + 2 колонки с мини-обложками ─── */
.decade-nav {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 4px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  position: sticky; top: 0;
  background: var(--bg); z-index: 5;
}
/* Когда decade-nav идёт сразу после section-header — поджимаем шапку.
   У section-header глобальный margin-bottom: 22px, и это давало
   «много воздуха» только над навигатором десятилетий. Запрос 17.06.2026. */
.section-header:has(+ .decade-nav) { margin-bottom: 4px; }
.decade-nav-item {
  display: inline-flex; align-items: center;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 600; font-size: 13px;
  color: var(--accent); text-decoration: none;
  transition: background .12s, color .12s;
}
.decade-nav-item:hover { background: var(--accent); color: #fff; }
.decade-nav-item.active { background: var(--accent); color: #fff; }

/* «Назад» — первая кнопка в навигаторе, когда выбрано десятилетие.
   Отделяем тонкой вертикальной чертой справа, чтобы визуально отличить
   от пунктов-десятилетий. */
.decade-nav-back {
  margin-right: 6px;
  padding-right: 14px;
  border-right: 1px solid var(--rule);
  border-radius: 4px 0 0 4px;
}

.pubs-decade { margin-bottom: 4px; }
.pubs-decade-heading {
  font-size: 20px; font-weight: 700;
  color: var(--accent);
  margin: 4px 0 4px;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--accent);
  letter-spacing: 0.02em;
}
.pubs-decade-count {
  font-weight: 400; color: var(--mute);
  font-size: 14px; margin-left: 6px;
  vertical-align: baseline;
}

/* Трёхколоночная сетка карточек.
   Используем CSS multi-columns: карточки укладываются плотно, без выравнивания
   по высоте (как было бы в grid). #17.06.2026: сжато до 3 колонок, мета — до
   2 строк с раскрытием через "больше". */
.pubs-grid {
  column-count: 3;
  column-gap: 12px;
}
.pubs-grid.pubs-grid-2 { column-count: 2; }   /* для каталогов и подобных */
/* Обложка сама подстраивается под форму: высота 70px, ширина — по картинке.
   Портретные ≈ 50px (ряд ровный), горизонтальные (Новый Эрмитаж и др.) шире и
   видны ЦЕЛИКОМ, без обрезки. Чистый CSS, без кода — появляется сразу при
   обновлении стиля. (19.07.2026: заменил прежний cover+класс, который зависел
   от перезапуска сервера и потому у владельца не показывался.) */
.pubs-grid.pubs-grid-2 .pubs-card-thumb { flex: 0 0 auto; width: auto; min-width: 50px; max-width: 130px; height: 70px; background: transparent; }
.pubs-grid.pubs-grid-2 .pubs-card-thumb img { object-fit: contain; height: 70px; width: auto; max-width: 130px; display: block; }

/* Многотомник в списке каталогов: общая шапка + строки-тома внутри.
   Каждый том кликабелен отдельно (rel-card), но визуально склеены в один
   блок, чтобы было видно — это одно издание в нескольких книгах. */
/* Обёртка двухтомника: держит оба тома в одной колонке (том 2 под томом 1).
   Каждый том внутри — обычная карточка .pubs-card. (19.07.2026) */
.cat-set {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.cat-set-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 4px 0;
}
.cat-set-badge {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  color: #fff; background: var(--accent);
  padding: 1px 6px; border-radius: 3px;
  text-transform: lowercase;
}
.cat-set-meta {
  font-size: 10.5px; color: var(--mute);
  line-height: 1.2;
}
/* Тома набора — рядом, в две колонки (19.07.2026: убран заголовок «N-томник»
   и полоска слева; год·город·место — строкой снизу под томами). */
.cat-set-vols {
  display: flex; gap: 14px;
}
.cat-set-volume {
  flex: 1 1 0; min-width: 0;
  display: flex; gap: 7px;
  padding: 4px 4px 4px 0;
  margin: 0;
  text-decoration: none; color: inherit;
  transition: background .1s;
  position: relative;
}
.cat-set-foot {
  font-size: 12px; color: var(--mute); line-height: 1.25;
  padding: 2px 4px 4px 0;
}
.cat-set-volume:hover { background: rgba(0,0,0,.02); }
.cat-set-volume:hover .pubs-card-title { color: var(--accent); }
.cat-volume-num {
  display: inline-block;
  font-size: 10.5px; font-weight: 700;
  color: var(--accent);
  margin-right: 4px;
}
@media (max-width: 1000px) { .pubs-grid { column-count: 2; } }
@media (max-width: 700px)  { .pubs-grid, .pubs-grid.pubs-grid-2 { column-count: 1; } }

.pubs-card {
  display: flex; gap: 7px;
  padding: 4px 4px 4px 0;
  border-bottom: 1px solid #eee;
  text-decoration: none;
  color: inherit;
  transition: background .1s;
  position: relative;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}
.pubs-card:hover { background: rgba(0,0,0,.02); }
.pubs-card-thumb {
  flex: 0 0 40px; width: 40px; height: 56px;
  background: #f0f0f0;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.pubs-card-thumb img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  display: block;
}
/* Короткий ID — как «RKh-Art-…» у произведений. По нему можно искать (поиск по
   сайту берёт id каталогов и публикаций) и ссылаться. СПРАВА ОТ ПРЕВЬЮ, в
   правом нижнем углу карточки (не поверх картинки). Мелкий, приглушённый, на
   светлой подложке — читаемо над любым текстом. (19.07.2026, запрос владельца.) */
.pubs-card-id {
  position: absolute; right: 10px; bottom: 7px;
  font-size: 9.5px; line-height: 1; letter-spacing: .02em;
  color: #9a8f81;
  background: rgba(247,244,239,.85); padding: 0 3px; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
}
.pubs-card-body { flex: 1 1 0; min-width: 0; }
.pubs-card-title {
  font-size: 12px; line-height: 1.2;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pubs-card:hover .pubs-card-title { color: var(--accent); }
.pubs-card-meta {
  margin-top: 1px;
  font-size: 10.5px;
  color: var(--mute);
  line-height: 1.25;
  /* 2 строки с многоточием. Перенос по словам разрешён.
     При .expanded — снимаем ограничение и показываем целиком. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}
.pubs-card-meta.expanded {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.pubs-card-more {
  display: inline-block;
  margin-top: 1px;
  padding: 0;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  user-select: none;
  background: none; border: 0;
}
.pubs-card-more:hover { text-decoration: underline; }

/* ─── Preview-окно альбома: одно большое фото с листателем ─── */
.album-pv {
  width: 100%; max-width: 700px; margin: 0 auto;
}
.album-pv-title {
  font-size: 17px; font-weight: 600; margin-bottom: 4px;
}
.album-pv-meta { color: var(--mute); font-size: 13px; font-weight: normal; }
.album-pv-viewer {
  position: relative; display: flex; align-items: center; gap: 4px;
  background: #fafafa; padding: 6px; border-radius: 4px;
}
.album-pv-stage {
  position: relative; flex: 1 1 auto;
  display: flex; align-items: center; justify-content: center;
  min-height: 360px;
}
.album-pv-img {
  max-width: 100%; max-height: 56vh; height: auto; display: block;
  background: #f0f0f0;
}
.album-pv-counter {
  position: absolute; top: 8px; right: 8px;
  background: rgba(0,0,0,0.55); color: #fff;
  padding: 2px 8px; border-radius: 3px;
  font-size: 11px; font-family: Menlo, monospace;
}
.album-pv-arrow {
  flex: 0 0 auto;
  background: var(--card); border: 1px solid var(--rule);
  width: 36px; height: 56px; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--ink);
  border-radius: 4px;
}
.album-pv-arrow:hover { border-color: var(--accent); color: var(--accent); }
.album-pv-caption {
  margin-top: 10px; padding: 8px 12px;
  background: #f5f5f5; border-radius: 3px;
  font-size: 13px; line-height: 1.4; text-align: center;
}
.album-pv-caption a {
  color: var(--accent); text-decoration: none;
  border-bottom: 1px dotted var(--accent);
}
.album-pv-caption a:hover { border-bottom-style: solid; }
.album-pv-data { display: none; }

/* Имена в подписи preview-альбома — inline через запятую, без блоков */
.album-pv-caption a.rel-card {
  display: inline;
  padding: 0;
  background: transparent;
  border: none;
  color: var(--accent);
}
.album-pv-caption a.rel-card:hover {
  color: var(--accent);
  background: transparent;
  text-decoration: underline;
}

/* ─── Подальбомы (иерархия альбомов) ──────────────────────────────────── */
.album-parent-ref{
  margin: 12px 0 18px;
  font-size: 14px;
}
.album-parent-ref a.rel-card{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper, #f7f5ef);
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink, #2a2a2a);
}
.album-parent-ref a.rel-card:hover{ background: var(--paper-hover, #efeada); }

.album-children{
  margin: 24px 0 28px;
}
.album-children-heading{
  font-size: 18px;
  margin: 0 0 12px;
}
.album-children-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.album-child-card{
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 4px;
  background: var(--paper, #fff);
  text-decoration: none;
  color: inherit;
}
.album-child-card:hover{ background: var(--paper-hover, #f5f2ea); }
.album-child-thumb{
  width: 80px; height: 80px;
  object-fit: cover;
  border-radius: 3px;
  flex: 0 0 auto;
}
.album-child-meta{ min-width: 0; flex: 1; }
.album-child-title{
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
  margin-bottom: 4px;
}
.album-child-count{
  font-size: 12px;
  color: var(--mute, #777);
}

/* ─── Крупная сетка подальбомов (для альбома-раздела) ─────────────────── */
.album-children-large .album-children-grid{
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}
.album-children-large .album-child-card{
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  overflow: hidden;
}
.album-children-large .album-child-thumb{
  width: 100%;
  height: 210px;
  border-radius: 0;
}
.album-children-large .album-child-meta{
  padding: 12px 14px 14px;
}
.album-children-large .album-child-title{
  font-size: 16px;
  margin-bottom: 6px;
}
.album-children-large .album-child-count{
  font-size: 13px;
}

/* Год выставки в карточке подальбома (раздел «Выставки» и любая иерархия). */
.album-child-year{
  font-size: 12px;
  color: var(--accent, #8b6f3d);
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.album-children-large .album-child-year{
  font-size: 14px;
}

/* Хлебная крошка ↑ Назад над заголовком списка (Тексты → Публикации и т.п.) */
.list-breadcrumb{
  margin: 12px 0 8px;
  font-size: 14px;
}
.list-breadcrumb a.rel-card{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--paper, #f7f5ef);
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink, #2a2a2a);
}
.list-breadcrumb a.rel-card:hover{ background: var(--paper-hover, #efeada); }
.list-breadcrumb a.back-link{
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--paper, #f7f5ef);
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 4px;
  text-decoration: none;
  color: var(--ink, #2a2a2a);
}
.list-breadcrumb a.back-link:hover{ background: var(--paper-hover, #efeada); }


/* ─── Сворачивание длинных описаний до 5 строк ─────────────────────────── */
.rkh-collapsible{ display: inline; }
.rkh-collapsible--clamped{
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Сохраняем переносы строк, заданные в тексте */
  white-space: pre-line;
}
.rkh-collapsible--expanded{
  display: block;
  white-space: pre-line;
}
.rkh-collapsible-toggle{
  display: inline-block;
  margin-top: 6px;
  padding: 2px 10px 3px;
  font-size: 13px;
  background: transparent;
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 3px;
  color: var(--accent, #8b6f3d);
  cursor: pointer;
  font-family: inherit;
}
.rkh-collapsible-toggle:hover{
  background: var(--paper, #f7f5ef);
  color: var(--accent-strong, #6e552d);
}

/* ─── Внешние ссылки (Госкаталог.рф и др.) под метаданными работы ───────── */
.external-links{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.external-link-btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-size: 14px;
  background: var(--paper, #f7f5ef);
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 4px;
  color: var(--accent, #8b6f3d);
  text-decoration: none;
  font-weight: 500;
}
.external-link-btn:hover{
  background: var(--paper-hover, #efeada);
  color: var(--accent-strong, #6e552d);
  border-color: var(--accent, #8b6f3d);
}

/* Ссылка-счётчик «N из M · к списку» в навигационной строке (образец — Сезанн). */
.pager-all{
  text-transform: none;
  letter-spacing: 0;
  font-weight: normal;
  font-size: 12px;
  color: var(--mute, #777);
  text-decoration: none;
}
.pager-all:hover{ color: var(--accent, #8b6f3d); }

/* Кнопка «PDF этой работы» — в правой колонке под кнопкой «В Избранное». */
.rkh-self-pdf{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 7px 14px;
  font-size: 13px;
  background: var(--paper, #f7f5ef);
  border: 1px solid var(--border, #d8d3c7);
  border-radius: 4px;
  color: var(--accent, #8b6f3d);
  text-decoration: none;
  font-weight: 500;
}
.rkh-self-pdf:hover{
  background: var(--paper-hover, #efeada);
  color: var(--accent-strong, #6e552d);
  border-color: var(--accent, #8b6f3d);
}
.rkh-self-pdf-ic{ font-weight: bold; }
@media print{ .rkh-self-pdf{ display: none; } }

/* ═══════════════════════════════════════════════════════════════════════════
   Раздел «Работы» — двухколоночный layout с sticky-сайдбаром фильтров.
   Применяется ТОЛЬКО на /works (шаблон works_list.html). Остальные разделы
   архива продолжают использовать универсальный list.html без этих стилей.
   ═══════════════════════════════════════════════════════════════════════════ */
.works-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 24px;
  align-items: start;
  margin-top: 12px;
}

/* Сайдбар прилипает под верхней шапкой сайта. Переменная --site-header-h
   считается из base.html и описывает реальную высоту site-header (бренд +
   nav-меню). При скролле сайдбар остаётся на экране, кнопки «Найти» и
   «Сброс» всегда доступны. max-height + overflow — внутренний скролл,
   если фильтров много. (17.06.2026: была var(--rkh-header-h), которая
   больше не устанавливается JS — sticky привязка плыла.) */
.works-sidebar {
  position: sticky;
  /* top = site-header + section-header + 8 px.
     --sticky-top-h устанавливает JS (см. base.html). Если переменная не
     посчиталась — fallback 130 px (приблизительная сумма двух шапок). */
  top: calc(var(--sticky-top-h, 130px) + 8px);
  /* Низ симметричен верху: под блоком остаётся зазор (~64px), чтобы его нижняя
     граница и пустое пространство были видны в экране; внутри — крупный
     padding снизу, чтобы после последнего фильтра было пустое место до границы. */
  max-height: calc(100vh - var(--sticky-top-h, 130px) - 64px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #fffdf7;
  border: 0.5px solid var(--rule, #e6e2d6);
  border-radius: 8px;
  padding: 14px 14px 48px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 12.5px;
  color: var(--ink, #2d2620);
}
.works-sidebar-form { display: block; }

/* Колонка фильтров уплотнена 17.06.2026: убраны разделительные линии под
   метками, минимизированы вертикальные отступы, высота select/input уменьшена.
   Цель — больше фильтров на экран без скролла. */
.wfs-section { margin-bottom: 4px; }
.wfs-label {
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--mute, #7a7065);
  text-transform: uppercase;
  padding: 0;
  border: 0;
  margin: 0 0 2px;
  line-height: 1.2;
}
.wfs-sublabel {
  font-size: 11px;
  color: var(--mute, #7a7065);
  margin: 0 0 2px;
  line-height: 1.2;
}

.wfs-input, .wfs-select {
  width: 100%;
  box-sizing: border-box;
  border: 0.5px solid #d5cfbf;
  background: #fff;
  padding: 3px 6px;
  height: 24px;
  border-radius: 3px;
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
  color: var(--mute);
}
.wfs-input::placeholder { color: var(--mute); }
.wfs-select { padding-right: 22px; }   /* место под стрелочку */
.wfs-input:focus, .wfs-select:focus {
  outline: none;
  border-color: var(--accent, #8b6f3d);
}
/* Убираем голубой фон автозаполнения браузера — держим белый фон и обычный текст. */
.wfs-input:-webkit-autofill,
.wfs-input:-webkit-autofill:hover,
.wfs-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
  box-shadow: 0 0 0 1000px #fff inset;
  -webkit-text-fill-color: var(--ink);
}
/* Подсветка заполненного поля фильтра (17.06.2026): акцентная рамка,
   акцентный цвет текста, легкая paper-заливка и жирный шрифт. Сразу видно
   какие фильтры применены, какие пустые. JS добавляет класс при value != "". */
.wfs-select--on, .wfs-input--on {
  border-color: var(--accent, #8b6f3d);
  color: var(--accent-strong, #6e552d);
  background: #fbf5e8;
  font-weight: 600;
}

/* Этап (details/summary) */
.wfs-stage {
  margin: 0 -4px 4px;
  padding: 0;
  border-radius: 4px;
}
.wfs-stage > summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 4px;
  user-select: none;
}
.wfs-stage > summary::-webkit-details-marker { display: none; }
.wfs-stage > summary::before {
  content: "▸";
  display: inline-block;
  width: 12px;
  margin-right: 2px;
  color: var(--mute, #7a7065);
  font-size: 10px;
  transition: transform .1s;
}
.wfs-stage[open] > summary::before { transform: rotate(90deg); }
.wfs-stage > summary:hover { background: var(--paper-hover, #efeada); }
.wfs-stage > summary.is-on { background: #f4ede0; color: var(--accent-strong, #6e552d); }
.wfs-stage-check { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.wfs-stage-check input { margin: 0 4px 0 0; }

.wfs-period-list {
  padding: 4px 4px 6px 22px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wfs-period {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  margin: 0 -6px;
}
.wfs-period:hover { background: var(--paper-hover, #efeada); }
.wfs-period.is-on {
  background: #f4ede0;
  color: var(--accent-strong, #6e552d);
  font-weight: 500;
}
.wfs-period.is-empty {
  color: #b8b0a2;
  cursor: default;
}
.wfs-period.is-empty:hover { background: transparent; }
.wfs-period-name input { margin: 0 6px 0 0; vertical-align: -1px; }
.wfs-count {
  font-size: 11px;
  color: var(--mute, #7a7065);
  white-space: nowrap;
  padding-left: 6px;
}
.wfs-period.is-on .wfs-count { color: var(--accent-strong, #6e552d); }

/* Жанр — чипы */
.wfs-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.wfs-chip {
  display: inline-block;
  padding: 3px 9px;
  background: #fff;
  border: 0.5px solid #d5cfbf;
  border-radius: 11px;
  font-size: 11px;
  cursor: pointer;
  color: var(--ink, #5a5048);
  user-select: none;
}
.wfs-chip:hover { background: var(--paper-hover, #efeada); }
.wfs-chip.is-on {
  background: #f4ede0;
  color: var(--accent-strong, #6e552d);
  border-color: var(--accent, #8b6f3d);
}
.wfs-chip input { display: none; }

/* «Сбросить все фильтры» — ссылка */
.wfs-clear-all {
  display: block;
  text-align: center;
  margin-top: 14px;
  padding: 7px 0;
  border: 0.5px solid var(--accent, #8b6f3d);
  background: #fff;
  color: var(--accent-strong, #6e552d);
  border-radius: 4px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
}
.wfs-clear-all:hover { background: var(--paper-hover, #efeada); text-decoration: none; }
.wfs-clear-all.is-disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* Кнопки «Найти / Сброс» в одной строке сверху колонки фильтров (17.06.2026).
   Заменили старую метку «НАЙТИ СРЕДИ ПРОИЗВЕДЕНИЙ». «Найти» — submit формы,
   «Сброс» — ссылка на /works. */
.wfs-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 5px;
}
/* ═══ /works: фильтры в полноэкранном полупрозрачном поп-апе (проба 07.2026) ═══ */
/* Кнопка «Фильтры» — в строке активных фильтров, без рамки; число в скобках
   (как «(26)» в «Избранное»), без коричневой подложки. */
.works-fbtn { display: inline-flex; align-items: baseline; gap: 5px; font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--ink);
  background: none; border: none; padding: 0; margin-right: 4px; cursor: pointer; transition: color .12s; }
.works-fbtn:hover { color: var(--accent); }
.works-fbtn-n { color: var(--accent); }
.works-fbtn-car { font-size: 9px; opacity: .7; }

/* «Фильтры» — с рамкой, как «Архивный вид» и «Музыка» в шапке: это ЕДИНСТВЕННАЯ
   дорога обратно к отбору, и она должна читаться как кнопка. Владелец
   17.07.2026: «я-то знаю, что можно нажать фильтры, но для нового пользователя
   это не очевидно». Рамку даём только этой кнопке, не всему .works-fbtn:
   «Смотреть выставкой» носит тот же класс, и две рамки в узкой полосе — шумно.
   Отбор набран (.on) — рамка и текст акцентные: видно, что фильтры не пусты. */
.works-fbtn--main { padding: 4px 9px; border: 1px solid var(--rule); border-radius: 5px;
  color: var(--mute); margin-right: 8px; }
.works-fbtn--main:hover { border-color: var(--accent); color: var(--accent); }
.works-fbtn--main.on { border-color: var(--accent); color: var(--accent); }

/* Второй «сбросить всё» — внутри поп-апа, и он <button>, а не <a>. Здесь ТОЛЬКО
   то, чем кнопка отличается от ссылки; вид берётся из .wf-clear-all НИЖЕ.
   ПОРЯДОК ЗДЕСЬ — ЧАСТЬ ПРАВИЛА, А НЕ ОФОРМЛЕНИЕ. Сброс кнопочного вида обязан
   идти ДО общего вида. Стоит он после — и молча его стирает: специфичность
   равная, побеждает тот, кто ниже.
   Наступил на это ТРИЖДЫ за вечер: `font: inherit` сделал шрифт 16 px вместо
   10; `border: none` съел линию (в поп-апе её не было вовсе); а в третий раз
   написал верный комментарий «сброс должен идти ДО» — и поставил правило ПОСЛЕ.
   Не переноси его вниз. */
.fpop-reset { background: none; border: 0; cursor: pointer; padding: 0; }

/* «Сбросить всё» — рядом с чипами, чтобы начать новый поиск, не заходя внутрь
   фильтров. Нарочно НЕ кнопка и не чип: чипы снимают по одному, а это — выход
   на чистую страницу. Отсюда и вид ссылки, и акцентный цвет.
   Их на странице два: здесь и в поп-апе фильтров. Действие одно — значит и вид
   один, описанный ОДИН раз (просьба владельца 17.07.2026).

   ЛИНИЯ ОДНА И ТОНКАЯ, оживает под мышкой (просьба владельца). Был пунктир,
   сплошной при наведении: пунктир — это не «одна линия», а россыпь точек, и
   разница «пунктир/сплошная» под мышкой почти не читается. Теперь линия одна,
   спокойная, а при наведении набирает цвет — видно, что на неё можно нажать. */
.wf-clear-all { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .05em; font-size: 10px; color: var(--accent); text-decoration: none;
  border-bottom: 1px solid rgba(122, 59, 40, .3); white-space: nowrap; margin-left: 6px;
  transition: border-bottom-color .12s; }
.wf-clear-all:hover { border-bottom-color: var(--accent); }

/* Открывается ПОД липкой шапкой сайта (не перекрывает её). Высота — по содержимому
   (заканчивается сразу под столбцами), но не выше остатка экрана — тогда внутренний
   скролл. Полупрозрачно — работы просвечивают. */
.works-fpop { position: fixed; top: var(--sticky-top-h, 130px); left: 0; right: 0; bottom: auto;
  max-height: calc(100vh - var(--sticky-top-h, 130px)); z-index: 40; display: none; overflow: auto;
  background: rgba(251, 249, 244, .85); }
.works-fpop.open { display: block; }
.works-fpop-in { max-width: 1000px; margin: 0 auto; padding: 12px 32px 36px; }
.works-fpop-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-bottom: 1px solid #b6a88e;
  padding-bottom: 10px; margin-bottom: 10px; }
.works-fpop-head h2 { margin: 0 auto 0 0; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .06em; font-size: 14px; font-weight: 500; color: var(--ink); }
.works-fpop-close { font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .05em; font-size: 12px; color: var(--accent); background: none; border: none; cursor: pointer; }
.works-fpop-close:hover { color: var(--accent-dark, #5d2c1e); }

/* Сайдбар в режиме поп-апа: не липкий, во всю ширину, фасеты — газетными колонками. */
.works-sidebar--pop { position: static; max-height: none; overflow: visible; border: none; background: none;
  border-radius: 0; padding: 0; width: auto; }
.works-sidebar--pop .wfs-facets { column-width: 210px; column-gap: 34px; margin-top: 14px; }
.works-sidebar--pop .wfs-group, .works-sidebar--pop .wfs-drop { break-inside: avoid; }
.works-sidebar--pop .works-sidebar-form { max-width: 420px; }
.works-fpop .wfs-tags { max-height: none; overflow: visible; }

/* Сетка работ — во всю ширину, ровно 4 колонки. */
.works-main--full { display: block; }
.works-grid--4 { grid-template-columns: repeat(4, 1fr) !important; }
@media (max-width: 760px) { .works-grid--4 { grid-template-columns: repeat(2, 1fr) !important; } }

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

   Ширина считается из тех же --fcol-n / --fcol-gap, что и сетка ниже: одна
   колонка — это (вся ширина минус все промежутки) / число колонок. Поэтому
   поле остаётся вровень с «Этапом» и на узком экране, где колонок 3 или 2.
   Числом 340px, как было, этого не добиться: оно верно ровно для одной ширины
   окна и врёт на всех остальных.

   Правим ТОЛЬКО внутри .fpop-search: класс .wfs-input общий, он живёт и в
   других фильтрах архива, и белый фон там на месте. */
.fpop-search { margin: 2px 0 12px; display: flex; align-items: center; gap: 8px;
  width: calc((100% - (var(--fcol-n) - 1) * var(--fcol-gap)) / var(--fcol-n)); }
.fpop-search .wfs-input { flex: 1 1 auto; min-width: 0;
  font-family: 'IBM Plex Mono', monospace;
  background: transparent; border-color: #cfc7b4; }
.fpop-search .wfs-input:focus { background: transparent; border-color: var(--accent); }
/* Автозаполнение браузера норовит залить поле белым — здесь фон прозрачный. */
.fpop-search .wfs-input:-webkit-autofill,
.fpop-search .wfs-input:-webkit-autofill:hover,
.fpop-search .wfs-input:-webkit-autofill:focus {
  -webkit-box-shadow: none; box-shadow: none; }
.fpop-search .wfs-input::placeholder { font-family: 'IBM Plex Mono', monospace; text-transform: none; letter-spacing: .02em; }
/* Значок. Пусто — бледный; ввели текст — загорается акцентом: по строке должно
   быть видно, что искать можно нажатием, а не только через Enter. */
.fpop-search-go { flex: 0 0 auto; display: inline-flex; align-items: center;
  justify-content: center; width: 24px; height: 24px; padding: 0;
  background: none; border: 0; border-radius: 3px; cursor: pointer;
  color: var(--mute); opacity: .45; transition: opacity .12s, color .12s; }
.fpop-search-go:hover { opacity: 1; color: var(--accent); }
.fpop-search-go.on { opacity: 1; color: var(--accent); }
/* Колонок ЧЕТЫРЕ, а не пять: «Техника» и «Жанр» уехали под «высокое
   разрешение» в первую колонку (просьба владельца 17.07.2026), пятая опустела.
   Оставить repeat(5) значило бы держать пустой столбец и зря жать остальные.

   ЧИСЛО КОЛОНОК — ПЕРЕМЕННОЙ, и это не красота ради красоты. Оно нужно в двух
   местах: сетке и ширине строки поиска (владелец попросил поле «шириной первой
   колонки»). Впиши число дважды — и однажды поправят одно, а второе соврёт.
   Здесь оно одно на обоих, и в медиа-запросах меняется тоже одно.

   position: relative — чтобы панели «Техника» и «Жанр» вставали по своим
   колонкам (см. .fdrop). */
.fpop-form { --fcol-n: 4; --fcol-gap: 26px; }
.fcols { display: grid; grid-template-columns: repeat(var(--fcol-n), 1fr);
  gap: 18px var(--fcol-gap); position: relative; }
@media (max-width: 1100px) { .fpop-form { --fcol-n: 3; } }
@media (max-width: 640px)  { .fpop-form { --fcol-n: 2; } }

/* ─── «Техника» и «Жанр»: квадратик слева, список — в своей колонке ───
   Квадратик — обычный чекбокс в обычной строке .fchk, поэтому и выглядит как
   все. Отличие одно: у него нет `name`, значит в запрос он не уходит. */
.fcat-drop .fdrop-btn { cursor: pointer; }
.fcat-drop .fdrop-btn.has { color: var(--ink); font-weight: 500; }

/* Блоки в одну строку («Изображение», «Техника», «Жанр») описаны НИЖЕ — сразу
   после общих .fcat и .fcat h3. Иначе общее правило их перебивает: см. там. */

/* Панель. Из потока вынута, а место ей задаёт САМА СЕТКА: grid-area — это
   «строка 1, такая-то колонка». Так она не разъедется, если колонки станут
   шире или уже: не координаты в пикселях, а номер колонки.
   Фон непрозрачный — панель ложится поверх колонки и та не просвечивает. */
.fdrop {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: none;
  z-index: 6;
  background: var(--bg);
  border: 1px solid #b6a88e;
  border-radius: 5px;
  padding: 12px 14px 8px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .12);
}
.fdrop--col2 { grid-area: 1 / 2 / 2 / 3; }   /* «Техника» → по «Периоду» */
.fdrop--col3 { grid-area: 1 / 3 / 2 / 4; }   /* «Жанр»    → по «Серии»   */
/* Показ — КЛАССОМ. Не style.display: пустая строка не показывает элемент, а
   лишь снимает inline-стиль, и снова действует `display: none` отсюда. На этом
   список музеев не открывался никогда (правило №48). */
.fdrop.on { display: block; }
.fdrop .fcat { margin-bottom: 0; }

/* ПРОКРУТКА ВМЕСТО ПОРОГА (решение владельца 17.07.2026: «пусть выпадает окном
   на колонке, но с прокруткой»). Список любой длины остаётся в своей колонке, а
   полоса появляется сама — только когда нужна. Ничего не загадываем наперёд:
   добавится техника — считать и править нечего.
   55vh, а не пиксели: окно фильтров тянется по высоте экрана, и панель должна
   тянуться вместе с ним, а не упираться в число, верное для одного ноутбука. */
.fdrop-list { max-height: 55vh; overflow-y: auto; overscroll-behavior: contain;
  padding-right: 6px; }
.fdrop-x { position: absolute; top: 6px; right: 8px; z-index: 1;
  background: none; border: 0; cursor: pointer; color: var(--mute);
  font-size: 15px; line-height: 1; padding: 2px 4px; }
.fdrop-x:hover { color: var(--accent); }
/* Узкий экран: колонок 3 или 2, вставать «по Периоду» смысла нет — панель
   ложится на всю ширину сетки. */
@media (max-width: 1100px) {
  .fdrop--col2, .fdrop--col3 { grid-area: 1 / 1 / 2 / -1; }
}
.fcat { margin-bottom: 14px; break-inside: avoid; }
.fchk.hl { background: rgba(122, 59, 40, .10); border-radius: 3px; }
.fchk.hl .fname { color: var(--ink); }
.fchk.dim { opacity: .3; }   /* недоступные при текущем выборе — приглушены */
/* «Точное место» — список точных названий (31 музей). Показывается при отметке
   своей коллекции; показывать надо ЯВНЫМ display:block, а не пустой строкой
   (правило №48: пустая строка снимает inline-стиль, и снова действует это
   правило — элемент так и остаётся скрытым).

   17.07.2026: список вырастал на 1870 px (31 строка × 53 px — длинные названия
   переносятся) и тянул поп-ап вниз за край экрана. Поп-ап при этом всего 765 px
   (от 135 до низа окна 900). Ограничиваем высоту и прокручиваем внутри списка:
   окно фильтров остаётся на месте, а музеи листаются. */
.fcat[data-oclass] { display: none; }
.fcat[data-oclass] .fchk-scroll {
  max-height: 260px;            /* ≈ 5 строк по 53 px — влезает в колонку */
  overflow-y: auto;
  overscroll-behavior: contain; /* докрутил до конца — страница под ним не едет */
  padding-right: 6px;           /* чтобы полоса прокрутки не липла к тексту */
}
/* Полоса прокрутки в цвет архива, а не системная синева.
   Тот же вид — и у списков «Техника»/«Жанр» (.fdrop-list): полос прокрутки в
   архиве две, выглядеть они должны одинаково. */
.fcat[data-oclass] .fchk-scroll::-webkit-scrollbar,
.fdrop-list::-webkit-scrollbar { width: 6px; }
.fcat[data-oclass] .fchk-scroll::-webkit-scrollbar-thumb,
.fdrop-list::-webkit-scrollbar-thumb {
  background: #b6a88e; border-radius: 3px; }
.fcat[data-oclass] .fchk-scroll::-webkit-scrollbar-track,
.fdrop-list::-webkit-scrollbar-track { background: transparent; }
.fcat h3 { margin: 0 0 8px; font-family: 'IBM Plex Mono', monospace; text-transform: uppercase;
  letter-spacing: .08em; font-size: 10px; color: var(--mute); border-bottom: 1px solid #b6a88e;
  padding-bottom: 5px; display: flex; align-items: center; gap: 8px; }

/* ─── Блоки в одну строку: «Изображение», «Техника», «Жанр» ───
   У них под названием ровно одна строка, а полоска подводила черту под пустотой
   и делила колонку на три тяжёлых куска (просьба владельца 17.07.2026 —
   «убери полосочки»). У «Этапа» и «Периода» полоска остаётся: там она отделяет
   название от длинного списка, ей есть что отделять.

   СТОИТ ЗДЕСЬ, А НЕ ВЫШЕ, И ЭТО ЧАСТЬ ПРАВИЛА. `.fcat-solo h3` и `.fcat h3` —
   одной специфичности, значит побеждает тот, кто ниже. Я сперва вписал это
   в раздел «Техника/Жанр» (строкой 3718), то есть ВЫШЕ общего `.fcat` (3761) —
   и не подействовало вовсе: полоски остались, между блоками осталось 14 px
   вместо 40. Четвёртый раз за вечер на одном и том же (см. .fpop-reset).
   Правило: ЧАСТНОЕ — ПОСЛЕ ОБЩЕГО. Не переноси наверх.

   МЕРКА — РАССТОЯНИЕ МЕЖДУ НАЗВАНИЯМИ ЭТАПОВ («Начало» → «Открытые формы»),
   от базовой линии до базовой линии: 20 px. Владелец задал её так, и мерить
   надо по буквам, а не по коробкам: коробки у названия и у строки разной
   высоты, и «одинаковый margin» дал бы РАЗНОЕ расстояние на глаз.
     • название → кнопка = 20 px, ровно одна мерка. Отсюда margin-bottom: 0 —
       нужные 20 px уже дают строчные боксы, любой добавочный отступ их
       растягивает. Сперва я поставил 14 px и получил 34 — почти вдвое больше;
     • между блоками = 40 px, две мерки (владелец: «как двойное»). Блоку
       достаётся 24 px, а не 40: остальные 16 приносят сами боксы названия и
       строки. Подобрано замером в браузере, не вычислено на бумаге.
   Правишь шрифт или высоту строки — эти два числа надо перемерить. */
.fcat-solo h3 { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.fcat-solo { margin-bottom: 24px; }
.fchk { display: flex; align-items: baseline; gap: 7px; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; color: var(--mute); padding: 2px 0; cursor: pointer; line-height: 1.35; }
.fchk:hover { color: var(--ink); }
.fchk.on { color: var(--ink); font-weight: 500; }
.fchk.off { color: #bcb4a6; cursor: default; }
.fchk input[type=checkbox] { appearance: none; -webkit-appearance: none; width: 12px; height: 12px;
  flex: 0 0 auto; border: 1px solid #b6a88e; border-radius: 2px; background: #fff; cursor: pointer;
  position: relative; top: 1px; margin: 0; }
.fchk input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.fchk input[type=checkbox]:checked::after { content: ''; position: absolute; left: 3px; top: 1px;
  width: 4px; height: 7px; border: solid #fff; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); }
.fchk input[type=checkbox]:disabled { opacity: .5; cursor: default; }
.fchk .fname { overflow-wrap: anywhere; }
.fchk .fn { margin-left: auto; padding-left: 8px; opacity: .55; font-size: .85em; font-variant-numeric: tabular-nums; }
.fcat.wfs-year h3 { justify-content: space-between; }
.fcat.wfs-year .yr-slider { margin-top: 10px; }

/* Нижняя липкая панель поп-апа: «Показать работы», «сбросить», счётчик выбранного. */
.fpop-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; display: flex; align-items: center;
  gap: 16px; padding: 12px 32px; background: var(--bg); border-top: 1px solid #b6a88e; }
/* «Показать работы» и «Смотреть выставкой» — ростом и шрифтом РОВНО как
   «Фильтры» (просьба владельца 17.07.2026). Были 12 px и padding 8px 18px —
   заметно крупнее и выше всего остального в полосе.
   Размеры повторены не на глаз: 11 px и 4px 9px взяты из .works-fbtn--main
   строкой выше. Разъедутся — значит кто-то правил одно и забыл другое; чтобы
   этого не случилось, они и стоят рядом. */
.fpop-apply, .fpop-exhib {
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: .06em;
  font-size: 11px; background: none; color: var(--accent);
  border: 1px solid var(--accent); border-radius: 5px;
  padding: 4px 9px; cursor: pointer;
}
.fpop-apply:hover, .fpop-exhib:hover { background: rgba(122, 59, 40, .08); }
/* .fpop-reset переехал наверх, к .wf-clear-all: он должен идти ДО общего вида,
   иначе стирает его (см. комментарий там). Здесь его нет намеренно. */
.fpop-sel { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--mute); letter-spacing: .04em; }

/* Поиск + «Сброс» в одну строку: поле тянется, «Сброс» компактный. */
.wfs-searchrow { display: flex; gap: 6px; align-items: center; margin-bottom: 6px; }
.wfs-searchrow .wfs-input { flex: 1 1 auto; min-width: 0; }
.wfs-searchrow .wfs-btn { flex: 0 0 auto; padding: 2px 8px; }
.wfs-submit-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }
/* Тонкие кнопки «Найти»/«Сброс» — высотой примерно как строка поиска (по просьбе). */
.wfs-btn {
  flex: 1 1 0;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 2px 8px;
  border: 1px solid var(--rule);
  border-radius: 3px;
  font: inherit;
  font-size: 10px;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
  transition: background .12s, color .12s, border-color .12s;
}
.wfs-btn:hover { border-color: var(--accent); }
.wfs-btn-apply {
  /* Без коричневой заливки — была слишком активной (17.06.2026).
     Отличается от «Сброс» только акцентным цветом текста и жирностью. */
  background: #fff;
  color: var(--accent-strong, #6e552d);
  font-weight: 700;
}
.wfs-btn-apply:hover { background: var(--paper-hover, #efeada); }
.wfs-btn-reset {
  background: #fff;
  color: var(--accent-strong, #6e552d);
}
.wfs-btn-reset:hover { background: var(--paper-hover, #efeada); }
.wfs-btn-reset.is-disabled {
  opacity: .4;
  cursor: default;
  pointer-events: none;
}

/* Ссылка на официальный сайт музея в строке «Местонахождение».
   Маркер ↗ показывает что сайт открывается в новой вкладке.
   Подчёркивание точечное — деликатная подсказка о ссылке. */
.museum-link {
  color: var(--ink, #2d2620);
  text-decoration: none;
  border-bottom: 1px dotted var(--mute, #7a7065);
  transition: color .15s, border-bottom-color .15s;
}
.museum-link:hover {
  color: var(--accent, #8b6f3d);
  border-bottom-color: var(--accent, #8b6f3d);
}
.museum-link-icon {
  display: inline-block;
  margin-left: 2px;
  font-size: .85em;
  color: var(--mute, #7a7065);
  text-decoration: none;
  border-bottom: none;
  vertical-align: 1px;
}
.museum-link:hover .museum-link-icon {
  color: var(--accent, #8b6f3d);
}

/* Блок связи, который НЕ является подтверждённым фактом — приглушённый.
   Используется для транзитивных выставок через каталоги. См. правка #19 из
   ChatGPT-ревью v4: не превращать предположение из каталога в факт
   экспонирования. */
.rel-section--needs-verification {
  opacity: .85;
  border-left: 2px solid var(--rule, #e6e2d6);
  padding-left: 12px;
  margin-left: -14px;
}
.rel-section--needs-verification h3 {
  color: var(--mute, #7a7065);
  font-style: normal;          /* заголовок прямой, как «В каталогах» */
  font-weight: 500;
}
/* Наклонным остаётся только приписка «— требует проверки». */
.rel-needs-note { font-style: italic; }
.rel-section--needs-verification .rel-card,
.rel-section--needs-verification .rel-card-title {
  color: var(--mute, #7a7065);
}
.rel-section--needs-verification .rel-card:hover {
  color: var(--ink, #2d2620);
}
.rel-needs-check-icon {
  display: inline-block;
  margin-right: 4px;
  color: var(--mute, #7a7065);
  font-size: 12px;
}
/* Правая колонка: чипы активных + сетка */
.works-main { min-width: 0; /* для grid-overflow */ }
.works-active-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding: 8px 10px;
  background: #fffdf7;
  border: 0.5px solid var(--rule, #e6e2d6);
  border-radius: 6px;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-size: 11.5px;
}
.works-active-row .wf-active-label { color: var(--mute, #7a7065); }
.works-active-row .wf-active-item {
  padding: 2px 8px;
  background: #f4ede0;
  color: var(--accent-strong, #6e552d);
  border-radius: 10px;
  text-decoration: none;
}
.works-active-row .wf-active-item:hover { background: var(--paper-hover, #efeada); }

/* Mobile: одна колонка, сайдбар сверху, не sticky */
@media (max-width: 900px) {
  .works-layout {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .works-sidebar {
    position: static;
    max-height: none;
    overflow: visible;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ПРОТОТИП: полупрозрачная плавающая панель поиска на /works?searchui=panel.
   Включается только при наличии параметра searchui=panel. Обычная страница
   «Произведения» (без параметра) не затрагивается. Образец — каталог Сезанна:
   поиск не занимает постоянное место, а всплывает поверх содержимого.
   ═══════════════════════════════════════════════════════════════════════════ */

/* В режиме панели сетка карточек занимает всю ширину (без боковой колонки). */
.works-layout--panel { display: block; }

/* Компактная строка над сеткой: кнопка «Фильтры» + активные фильтры в одну
   строку (экономим вертикальное место). Отступы сверху/снизу — по 4px. */
.works-panel-bar {
  position: sticky;
  top: calc(var(--sticky-top-h, 130px) + 8px);
  z-index: 70;
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 4px 0;
  padding: 2px 0;
  background: var(--bg, #fbf9f4);
}
/* Кнопка-триггер «Фильтры» — маленькая, по высоте как чипы активных фильтров. */
.works-panel-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  margin: 0;
  padding: 3px 12px;
  font-size: 13px;
  line-height: 1.4;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--soft, #f9f5ee);
  border: 1px solid var(--rule, #dcd6cc);
  border-radius: 999px;
  color: var(--accent, #7a3b28);
  cursor: pointer;
}
.works-panel-trigger:hover { border-color: var(--accent, #7a3b28); }
.works-panel-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px;
  background: var(--accent, #7a3b28); color: #fff;
  font-size: 10px; font-weight: bold;
}
/* Активные фильтры в той же строке, что и кнопка. */
.works-panel-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.works-panel-chips .wf-active-item {
  padding: 2px 9px;
  background: #f4ede0;
  color: var(--accent-strong, #6e552d);
  border: none;
  border-radius: 10px;
  font-size: 12px;
  font-style: italic;
  text-decoration: none;
}
.works-panel-chips .wf-active-item:hover { background: var(--paper-hover, #efeada); }
.works-panel-chips .wf-active-x { font-style: normal; color: var(--mute, #999); }

/* Затемняющая подложка под панелью (полупрозрачная, кликом закрывает). */
.works-panel-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(40, 32, 24, 0.06);
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease;
}
body.works-panel-open .works-panel-backdrop { opacity: 1; pointer-events: auto; }

/* Сама панель — полупрозрачное плавающее окно по центру экрана. */
.works-sidebar--panel {
  position: fixed; z-index: 210;
  top: 50%; left: 50%;
  transform: translate(-50%, -48%) scale(0.98);
  width: min(420px, 92vw);
  max-height: 82vh;
  overflow-y: auto;
  background: rgba(252, 249, 242, 0.30);
  -webkit-backdrop-filter: blur(2px) saturate(1.05); backdrop-filter: blur(2px) saturate(1.05);
  border: 1px solid var(--rule, #dcd6cc);
  border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.22);
  padding: 16px 18px 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
body.works-panel-open .works-sidebar--panel {
  opacity: 1; pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

/* Шапка панели: заголовок + крестик закрытия. */
.works-panel-head {
  display: flex; align-items: center; justify-content: space-between;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: bold; color: var(--accent, #7a3b28); font-size: 15px;
  margin: 0 0 10px; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule, #dcd6cc);
}
.works-panel-close {
  border: none; background: transparent;
  font-size: 22px; line-height: 1; padding: 0 2px;
  color: var(--mute, #888); cursor: pointer;
}
.works-panel-close:hover { color: var(--accent, #7a3b28); }

/* В режиме панели (?searchui=panel) выравниваем вертикальные отступы вокруг
   строки с кнопкой «Фильтры»: расстояние от полоски (нижняя граница шапки
   раздела) до кнопки = расстоянию от кнопки до сетки превью. Нейтрализуем
   составные margin'ы, оставляя симметричные 4px от .works-panel-bar. */
.section-header:has(+ .works-panel-bar) { margin-bottom: 0; }
.works-layout--panel { margin-top: 0; }

/* Разделение «частей раздела» (Тексты, Филателия) от фильтров в ряду вкладок:
   вертикальная черта-разделитель + стрелка «→» на вкладках-частях. */
.section-tab-sep {
  display: inline-block;
  width: 1px; height: 13px;
  margin: 0 4px 0 12px;
  background: var(--rule, #dcd6cc);
  vertical-align: middle;
}
.section-tab-arrow {
  margin-left: 3px;
  color: var(--mute, #999);
  font-size: 0.85em;
}
.section-tabs.section-tabs-inline .section-tab.section-tab-part { color: var(--mute, #6b6358); }
.section-tabs.section-tabs-inline .section-tab.section-tab-part:hover { color: var(--accent, #7a3b28); }

/* Иконочная панель действий у названия карточки: избранное(флажок)/PDF/печать/
   отправить + ID мелким моно. Значки — .tx-act-btn. Справа сверху у названия. (07.2026) */
/* Правая колонка — флекс-колонка. Когда есть изображение — задаём min-height
   = высоте картинки, чтобы блок кнопок ушёл к её НИЖНЕЙ границе (align-self:start,
   не растягиваемся под прочий контент слева). Без картинки — обычная высота,
   кнопки сразу под характеристиками (минимальный отступ 2px). (07.2026) */
.detail-grid > aside { display: flex; flex-direction: column; align-self: start; }
/* min-height 65vh — ТОЛЬКО на странице работы: там изображение высокое, и
   мета-колонка тянется под него, чтобы блок «Связи в архиве» сел вплотную.
   На остальных разделах (выставки, каталоги, публикации, документы) картинка
   низкая — раздутая на 65vh колонка создавала огромный пустой разрыв до связей.
   Ограничили правило страницей работы: у прочих связи подтягиваются к контенту.
   (29.07.2026) */
body[data-page="work_detail"] .detail-grid:has(.art-img-wrap) > aside { min-height: 65vh; }
/* Страница работы: окно картины — ПО РАЗМЕРУ картины, а не фикс. 65vh, чтобы
   нижние блоки (связи) подтягивались к низу изображения. У горизонтальных и
   мелких работ раньше между картиной и блоками зиял большой пустой зазор.
   Высоту картины всё же ограничиваем 65vh (очень высокие сканы не вылезают),
   правую колонку — по содержимому. (24.07.2026, по просьбе владельца.) */
body[data-page="work_detail"] .art-img-wrap { height: auto; min-height: 0; }
body[data-page="work_detail"] .art-img-wrap img,
body[data-page="work_detail"] .rkh-gallery-main img { max-height: 65vh; }
body[data-page="work_detail"] .detail-grid:has(.art-img-wrap) > aside { min-height: 0; }
/* Литература (публикации/каталоги): изображение на 30% ниже (65vh → 45.5vh). */
body[data-page="publication_detail"] .art-img-wrap,
body[data-page="catalogue_detail"] .art-img-wrap { height: 45.5vh; }
body[data-page="publication_detail"] .detail-grid:has(.art-img-wrap) > aside,
body[data-page="catalogue_detail"] .detail-grid:has(.art-img-wrap) > aside { min-height: 45.5vh; }
/* Само изображение тоже ограничиваем 45.5vh — иначе правило ниже по каскаду
   (.art-img-wrap img { max-height: 70vh }) держит скан выше рамки и он вылезает. */
body[data-page="publication_detail"] .art-img-wrap img,
body[data-page="catalogue_detail"] .art-img-wrap img,
body[data-page="publication_detail"] .rkh-gallery-main img,
body[data-page="catalogue_detail"] .rkh-gallery-main img { max-height: 45.5vh; }
.work-actions.tx-actions {
  /* Строка действий — сразу под блоком характеристик (07.2026). Та же сетка,
     что у мета-таблицы: слева значки по левому краю МЕТОК (ЭТАП…), справа ID
     антиквой по левому краю ЗНАЧЕНИЙ (Начало…).
     Числа берём из :root, а не повторяем: раньше здесь стояло `152px 132px` —
     порядок колонок ДО правки 16.07, и номер стоял на 20 px правее значений,
     хотя записка обещала обратное (владелец заметил 17.07.2026). */
  display: grid;
  grid-template-columns: var(--meta-lbl) var(--meta-val);
  gap: var(--meta-gap);
  align-items: center;
  margin: 14px 0 0;
  box-sizing: border-box; width: 300px;
}
.work-actions.tx-actions .wa-icons {
  display: flex; align-items: center; gap: 6px;
  padding-left: 18px;          /* как отступ меток (ЭТАП…) */
}
.work-actions .rkh-detail-fav { display: inline-flex; margin: 0; }
/* Кнопка «В избранное» — такой же квадрат, как остальные значки (перебиваем pill). */
.work-actions .rkh-fav-btn {
  width: 26px; height: 25px; padding: 0; gap: 0; border-radius: 6px;
  border: 1px solid var(--rule); background: transparent; color: var(--mute);
  justify-content: center;
}
.work-actions .rkh-fav-btn svg { width: 16px; height: 16px; }
.work-actions .rkh-fav-btn:hover { color: var(--accent); border-color: var(--accent); }
.work-actions .rkh-fav-btn.on { color: var(--accent); border-color: var(--accent); background: transparent; }
.wa-id {
  /* ID антиквой (серифом), по левому краю колонки значений (Начало…). */
  font-family: Georgia, 'Times New Roman', serif; font-size: 13px; letter-spacing: 0;
  color: var(--mute); text-align: left; white-space: nowrap;
}
@media print { .work-actions { display: none !important; } }

/* Меню «Отправить» (WhatsApp / Telegram / Скопировать ссылку). */
.work-action-share { position: relative; flex: 0 0 auto; min-width: 0; display: inline-flex; }
.work-share-menu {
  display: none;
  position: absolute; top: calc(100% + 6px); right: 0;
  min-width: 188px;
  background: #fff;
  border: 1px solid var(--rule, #dcd6cc);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  padding: 4px;
  z-index: 50;
}
.work-action-share.open .work-share-menu { display: block; }
.work-share-item {
  display: flex; align-items: center; gap: 9px;
  width: 100%; box-sizing: border-box;
  text-align: left;
  padding: 8px 12px;
  border: none; background: none;
  font-family: Georgia, serif; font-size: 13px;
  color: var(--ink, #222);
  text-decoration: none; cursor: pointer;
  border-radius: 5px;
}
.work-share-ic { display: inline-flex; flex: 0 0 18px; justify-content: center; align-items: center; }
.work-share-ic svg { display: block; }
.work-share-item:hover { background: var(--soft, #f4efe6); color: var(--accent, #7a3b28); }
@media print { .work-share-menu { display: none !important; } }

/* Имя автора над названием работы (музейная подпись) — на странице произведения. */
.work-author {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 23px;
  font-weight: bold;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.01em;
  margin: 0 0 4px;
}

/* Чуть скруглённые углы тонкой рамки — только «Классический рисунок / Рисунок на левкасе». */
.rkh-levkas-frame .rkh-gallery-main img { border-radius: 6px; }

/* Номер ID под превью работы — только в «Архивном виде». */
.works-grid .card-id { display: none; font-family: -apple-system, Helvetica, Arial, sans-serif;
  font-size: 8px; color: var(--mute, #999); letter-spacing: .02em; margin-top: 2px; line-height: 1.2; }
body[data-view="archive"] .works-grid .card-id { display: block; }

/* ═══════════════════════════════════════════════════════════════════════════
   РЕДИЗАЙН 2026-06 — приоритетный блок по дизайн-ревью.
   Всё ниже — добавочные правила (overrides), идут последними в каскаде и
   выигрывают у соответствующих правил выше. Чтобы откатить редизайн —
   достаточно удалить этот блок (от этой линии до конца файла) либо вернуть
   base.css из папки _РЕДИЗАЙН_бэкап_*.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. Палитра: теплее и благороднее (по ревью) ───────────────────────────── */
:root {
  --ink:        #26211b;   /* «чернила», не чистый чёрный */
  --mute:       #6b6253;   /* подписи теплее и читаемее */
  --bg:         #fbf9f4;   /* фон страницы — оставляем исходный (как было до редизайна), по просьбе */
  --card:       #fbf9f3;
  --soft:       #efe9dc;   /* тёплые подложки секций */
  --imgwrap:    #efe8de;   /* паспарту под работами */
}

/* ── 2. Типографика: Spectral в заголовках, IBM Plex Mono в подписях ──────── */
h1, h2, h3,
.section-header-title,
.work-title-aside,
.section-display-title,
.hero-caption-title,
.conn-example-title {
  font-family: 'Spectral', Georgia, 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: .002em;
}
/* Архивные подписи и номера — моноширинный */
.meta-mono,
.archive-label,
.section-tab-n {
  font-family: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

/* Размеры: не мельчить (по ревью) */
header.site-header nav.site-nav { font-size: 14px; }   /* было 13px */

/* ── 3. Герой главной: работа на первом экране ─────────────────────────────── */
.home-hero {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: 48px;
  align-items: center;
  margin: 8px 0 12px;
  padding-bottom: 36px;
  border-bottom: 1px solid var(--rule);
}
.home-hero--noart { grid-template-columns: 1fr; }
.home-hero-art {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.home-hero-art img {
  max-width: 100%;
  height: auto;
  background: var(--imgwrap);
  /* паспарту + галерейная тень, как на странице работы */
  border: 1px solid rgba(0,0,0,.42);
  box-shadow:
    2px 6px 10px rgba(0,0,0,.34),
    5px 18px 34px rgba(0,0,0,.24),
    10px 36px 64px rgba(0,0,0,.16);
  transition: box-shadow .2s ease, transform .2s ease;
}
.home-hero-art:hover img {
  transform: translateY(-2px);
  box-shadow:
    2px 8px 12px rgba(0,0,0,.40),
    6px 22px 40px rgba(0,0,0,.28),
    12px 44px 76px rgba(0,0,0,.18);
}
.home-hero-text h1 {
  font-size: 34px;
  line-height: 1.16;
  margin: 0 0 12px;
}
.home-hero-text .hero-tagline {
  font-family: 'Spectral', Georgia, serif;
  font-size: 21px;
  font-style: italic;
  color: var(--accent);
  line-height: 1.35;
  margin: 0 0 14px;
}
.home-hero-text .lead { font-size: 18px; line-height: 1.55; margin-bottom: 20px; }
.home-hero-text .cta-row { margin: 0 0 18px; }
.hero-caption { margin: 0; font-size: 13px; color: var(--mute); }
.hero-caption a { color: var(--mute); text-decoration: none; }
.hero-caption a:hover { color: var(--accent); }
.hero-caption .meta-mono { font-size: 12px; letter-spacing: .02em; }
.hero-caption-title { font-style: italic; color: var(--ink); margin-left: 6px; }

@media (max-width: 760px) {
  .home-hero { grid-template-columns: 1fr; gap: 24px; }
  .home-hero-art { order: -1; max-width: 340px; margin: 0 auto; }
  .home-hero-text h1 { font-size: 27px; }
  .home-hero-text .hero-tagline { font-size: 18px; }
}

/* ── 4. Блок «одна работа — десятки связей» ────────────────────────────────── */
.home-connections {
  background: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 32px 36px 36px;
  margin: 36px 0;
}
.section-display-title {
  font-size: 24px;
  color: var(--accent);
  margin: 0 0 8px;
  border: none;
  padding: 0;
}
.section-display-sub {
  font-size: 16px;
  color: var(--mute);
  max-width: 58ch;
  margin: 0 0 24px;
  line-height: 1.5;
}
.conn-example {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 26px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 20px 24px;
  text-decoration: none;
  color: var(--ink);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.conn-example:hover {
  text-decoration: none;
  border-color: rgba(122,59,40,.45);
  box-shadow: 0 4px 14px rgba(0,0,0,.10), 0 10px 28px rgba(0,0,0,.07);
  transform: translateY(-1px);
}
.conn-example-art {
  background: var(--imgwrap);
  border: 1px solid rgba(0,0,0,.18);
  box-shadow: 0 2px 7px rgba(0,0,0,.14);
  display: flex; justify-content: center; align-items: center;
  aspect-ratio: 3/4; overflow: hidden;
}
.conn-example-art img { max-width: 100%; max-height: 100%; object-fit: contain; }
.conn-example-body { display: flex; flex-direction: column; }
.conn-example-id { font-size: 12px; color: var(--mute); letter-spacing: .03em; }
.conn-example-title { font-size: 20px; color: var(--ink); margin: 2px 0 2px; }
.conn-example-tech { font-size: 13px; color: var(--mute); margin-bottom: 12px; }
.conn-rows {
  display: flex; flex-wrap: wrap; gap: 8px 10px;
  margin: 6px 0 16px;
}
.conn-row {
  display: inline-flex; align-items: baseline; gap: 7px;
  background: var(--soft);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 5px 11px;
}
.conn-row-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--accent);
}
.conn-row-dot { color: var(--mute); }
.conn-row-n { font-size: 15px; font-weight: 600; color: var(--ink); }
.conn-example-go {
  font-style: italic; color: var(--accent); font-size: 15px; margin-top: auto;
}
.conn-example:hover .conn-example-go { text-decoration: underline; }

@media (max-width: 620px) {
  .home-connections { padding: 24px 20px 28px; }
  .conn-example { grid-template-columns: 96px 1fr; gap: 16px; padding: 16px; }
  .conn-example-title { font-size: 17px; }
}
/* ═══ конец блока РЕДИЗАЙН 2026-06 ════════════════════════════════════════════ */

/* ── 5. Секция «Связи в архиве» на странице работы (РЕДИЗАЙН 2026-06) ───────
   Блоки связей вынесены из узкой левой колонки в крупную секцию на всю ширину
   контента. Тёплая подложка-band отделяет её от карточки работы. Сами карточки
   связей (.rel-section / .rel-card) — существующие, не трогаем. */
.work-connections {
  /* Заливка светлее на 30% (смешиваем тёплую подложку с 30% белого). 07.2026 */
  background: color-mix(in srgb, var(--soft) 70%, #fff 30%);
  border: 1px solid var(--rule);
  border-radius: 4px;
  margin: 40px 0 8px;
  padding: 32px 30px 26px;
}
/* Заголовки блоков связей («В каталогах», «Упомянута…») — моноширинный капс. */
.work-connections .rel-section h3 {
  font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}
.work-connections .conn-head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule);
}
.work-connections .conn-head h2 {
  font-family: 'Spectral', Georgia, serif;
  font-weight: 500;
  font-size: 25px;
  color: var(--ink);
  margin: 0;
  border: none;
  padding: 0;
}
.work-connections .conn-sub {
  font-size: 15px;
  font-style: italic;
  color: var(--mute);
}
/* Первый .rel-section внутри секции не нуждается в верхнем отступе/линии —
   заголовок секции уже задаёт ритм. */
.work-connections .rel-section:first-of-type { margin-top: 0; }
.work-connections .rel-section { background: transparent; }
@media (max-width: 620px) {
  .work-connections { padding: 22px 18px 20px; }
  .work-connections .conn-head h2 { font-size: 21px; }
}
/* ═══ конец секции «Связи в архиве» ═══════════════════════════════════════════ */

/* ── 6. Тень изображения работы: −20% контраста + тёплый чёрный (РЕДИЗАЙН 2026-06)
   По просьбе: тени мягче примерно на 20% (прозрачности ×0.8) и чёрный теплее —
   вместо чистого rgb(0,0,0) тёплый сепийно-коричневый rgb(43,31,21). Переопределяет
   .rkh-gallery-main img выше по каскаду. */
.rkh-gallery-main img {
  border: 1px solid rgba(43,31,21,.34);
  box-shadow:
    2px 6px 10px rgba(43,31,21,.32),
    5px 20px 36px rgba(43,31,21,.24),
    10px 40px 70px rgba(43,31,21,.16);
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 7. «Связи в архиве» в две колонки (РЕДИЗАЙН 2026-06) ───────────────────
   По просьбе: блок связей — в две колонки. Заголовок секции тянется на всю
   ширину, группы (.rel-section) распределяются по двум колонкам и не рвутся
   между ними. В узких колонках длинные названия каталогов/выставок/публикаций
   переносятся на несколько строк (место для этого есть). */
.work-connections {
  columns: 2;
  column-gap: 52px;
}
.work-connections .conn-head {
  column-span: all;
}
.work-connections .rel-section {
  margin: 0 0 24px;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  break-inside: avoid;
}
/* Длинные названия — перенос по строкам, без обрезки. */
.work-connections .rel-card-title,
.work-connections .rel-list-text {
  overflow-wrap: anywhere;
  word-break: break-word;
}
/* На узких экранах — одна колонка. */
@media (max-width: 700px) {
  .work-connections { columns: 1; }
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 8. Липкая панель «фильтр-контекст + пейджер» и выравнивание названий
   (РЕДИЗАЙН 2026-06) ───────────────────────────────────────────────────────
   #2: строка «в список · этап · период» теперь закреплена вместе с пейджером
   и не уезжает при скролле. #3: название работы под «Предыдущий» прижато к
   левому краю, под «Следующий» — к правому. */
.detail-stickybar {
  position: sticky;
  /* Реальная высота шапки (с подполосой раздела) — вплотную под ней. z-index
     НИЖЕ шапки (60), чтобы уезжать ПОД неё, а не наезжать сверху. (07.2026) */
  top: var(--site-header-h, 80px);
  z-index: 50;
  background: var(--bg, #fbf9f4);
  margin-bottom: 18px;
}
/* внутри липкой панели пейджер сам не липнет (липнет вся панель) */
.detail-stickybar .pager {
  position: static;
  top: auto;
  z-index: auto;
  margin: 0;              /* панель сама даёт -36; внутренний margin сбрасываем */
}

/* #3: ссылка-пейджер занимает всю колонку, обе строки выровнены к краю. */
.pager-prev > a,
.pager-next > a { display: block; }
.pager-prev > a { text-align: left; }
.pager-next > a { text-align: right; }
/* ═══════════════════════════════════════════════════════════════════════════ */


/* ── 9. Стрелки пейджера: в «жёлобе» у края, ВНУТРИ границ страницы (РЕДИЗАЙН)
   Слова «Предыдущий»/«Следующий» и название под ними выровнены по краю блока,
   стрелка стоит в небольшом отступе у самого края страницы и НЕ вылезает за
   её вертикали. Реализация: ссылке даём боковой padding под стрелку, саму
   стрелку рисуем псевдоэлементом внутри этого padding (left:0 / right:0). */
.pager-prev > a,
.pager-next > a { position: relative; }
.pager-prev > a { padding-left: 1.4em; }
.pager-next > a { padding-right: 1.4em; }
.pager-prev > a::before {
  content: "←";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mute);
  font-style: normal;
}
.pager-next > a::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--mute);
  font-style: normal;
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 10. «Все работы в этом музее (N) →» в строке местонахождения (РЕДИЗАЙН) ──
   Быстрый переход с карточки работы во все работы Хачатряна в этом музее. */
.museum-collection-link {
  display: inline-block;
  margin-top: 7px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dotted rgba(122,59,40,.5);
  line-height: 1.3;
}
.museum-collection-link:hover {
  border-bottom-style: solid;
  text-decoration: none;
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 11. Тень из-под верхней липкой панели при прокрутке (РЕДИЗАЙН 2026-06) ──
   Причина: дальняя мягкая тень изображения выносилась вверх за верхний край
   картины (offset 40 / blur 70 → ~30px тени выше) и выглядывала из-под липкой
   шапки/панели при скролле. Уменьшаем верхний вынос: размытие ближе к offset,
   тень остаётся мягкой и тёплой, но почти не уходит выше картины. */
.rkh-gallery-main img {
  box-shadow:
    2px 5px 8px rgba(43,31,21,.30),
    4px 16px 22px rgba(43,31,21,.20),
    8px 30px 40px rgba(43,31,21,.13);
}
/* По просьбе: картину и блок «Связи в архиве» сдвигаем чуть вправо и выравниваем,
   чтобы край картины не шёл по самому левому краю панели. 44px = левый отступ
   панели «Связи», поэтому картина и связи встают по одной вертикали. */
.detail-grid > div:first-child { padding-left: 44px; }
@media (max-width: 780px) {
  .detail-grid > div:first-child { padding-left: 0; }
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 12. Высота окна картины — по изображению (РЕДИЗАЙН 2026-06) ────────────
   Было: фиксированная высота окна (65vh / min 480px), из-за чего у горизонтальных
   и квадратных работ снизу зияла пустота до блока «Связи в архиве». Теперь окно
   обнимает само изображение, а очень высокие вертикальные сканы ограничиваем по
   высоте экрана. Отступ до «Связей» становится одинаковым и зависит от картины.
   (Платой идёт лёгкий «скачок» высоты при листании работ разной пропорции —
   это осознанный компромисс по просьбе.) */
.art-img-wrap { height: auto; min-height: 0; }
.art-img-wrap img,
.rkh-gallery-main img { max-height: 70vh; }
@media (max-width: 780px) {
  .art-img-wrap { height: auto; min-height: 0; }
  .art-img-wrap img,
  .rkh-gallery-main img { max-height: 60vh; }
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 13. Подписи мета-таблицы и название работы — по левому краю (по просьбе) ─
   Возврат к «первичному» выравниванию: метки полей (ЭТАП, ПЕРИОД, ГОД, ТЕХНИКА,
   РАЗМЕР, МЕСТОНАХОЖДЕНИЕ, провенанс) и заголовок работы прижаты влево. Значения
   (правая колонка) не трогаем — они уже стоят по своему левому краю. */
.work-title-aside { text-align: left; }
.meta-table .lbl { text-align: left; }
.meta-table .row.row--wide .lbl { text-align: left; }
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 14. «Связи в архиве»: серый цвет заголовка + равные отступы (по просьбе) ─
   Меняем ТОЛЬКО цвет заголовка на серый (как продолжение строки «эта работа
   связана с N объектами»). Жирность и размер не трогаем. Верхний отступ блока
   делаем равным нижнему (заголовок → полосочка = 14px). */
.work-connections .conn-head h2 { color: var(--mute); }
.work-connections { padding-top: 14px; }
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ── 15. «Дополнение»: метка слева, текст обтекает (по просьбе) ──────────────
   Первая строка значения начинается у колонки значений (на одной строке с
   меткой «ДОПОЛНЕНИЕ»), а перенос идёт уже на всю ширину блока. */
.meta-table .row.row--note { display: block; position: relative; }
.meta-table .row.row--note .lbl {
  position: absolute;
  left: 0;
  top: 8px;
  width: calc(50% - 8px);
}
.meta-table .row.row--note .val {
  display: block;
  /* 1-я строка начинается у колонки значений (как у остальных строк),
     перенос — на всю ширину блока. */
  text-indent: calc(50% + 8px);
}
/* ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Кликабельные зоны на фотографиях (работы/персоны) ─────────────────────
   Зоны деликатны: невидимы, пока курсор не над снимком; при наведении на снимок
   тонко проступают, при наведении на конкретную зону — подсвечиваются и
   показывают подпись. Клик открывает всплывающее окно работы/персоны через
   rkh-preview.js (класс bio-ref). Между зонами клики проходят к самому снимку
   (открывается зум) — за счёт pointer-events. (07.2026) */
.photo-hotspot-stage { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
.photo-hotspots { position: absolute; inset: 0; pointer-events: none; }
.photo-hotspot-stage .photo-hotspot {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1.5px solid transparent;
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  text-decoration: none;
  transition: border-color .15s, background-color .15s, box-shadow .15s;
}
/* Пока курсор над снимком — деликатно проступают все зоны. */
.photo-hotspot-stage.has-hotspots:hover .photo-hotspot { border-color: rgba(122, 59, 40, .35); }
/* Наведение на конкретную зону — ярче и с подписью. */
.photo-hotspot-stage .photo-hotspot:hover {
  border-color: var(--accent);
  background: rgba(122, 59, 40, .10);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset;
}
.photo-hotspot-stage .photo-hotspot.hs-person:hover {
  border-color: #4a6b8a;
  background: rgba(74, 107, 138, .12);
}
.photo-hotspot-tag {
  position: absolute; left: 0; bottom: 100%;
  margin-bottom: 4px;
  padding: 3px 7px;
  background: rgba(30, 26, 22, .92);
  color: #fff;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; line-height: 1.25; letter-spacing: .02em;
  white-space: nowrap;
  border-radius: 3px;
  opacity: 0; visibility: hidden;
  transition: opacity .12s;
  pointer-events: none;
}
.photo-hotspot:hover .photo-hotspot-tag { opacity: 1; visibility: visible; }
/* На телефоне наведения нет — оставляем еле заметную постоянную рамку, чтобы
   зоны были заметны и по ним можно было тапнуть. */
@media (max-width: 600px) {
  .photo-hotspot-stage.has-hotspots .photo-hotspot { border-color: rgba(122, 59, 40, .30); }
}

/* ═══ Фильтры /works «вариант 3»: плоские теги-фасеты + ползунок года (07.2026) ═══ */
.wfs-facets { font-family: 'IBM Plex Mono', monospace; margin-top: 4px; }
.wfs-group { padding: 7px 0; border-top: 1px solid #b6a88e; }
.wfs-group:first-child { border-top: none; padding-top: 2px; }
.wfs-glabel { font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); margin: 0 0 5px; }
.wfs-tags { display: flex; flex-wrap: wrap; gap: 1px 12px; line-height: 1.4; max-height: 58px; overflow: hidden; }
.wfs-tags.js { max-height: none; overflow: visible; }
/* Вертикальная раскладка (Период): каждый пункт на своей строке. Сворачивание
   в 3 строки работает как обычно (max-height из .wfs-tags + JS). */
.wfs-tags--rows { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 2px 0; }
.wfs-tags--rows .wf-tag { display: block; }
/* Лишние теги (сверх лимита) скрыты по количеству — чистый разрез по целым
   тегам, без прыжков и без обрезки длинных названий. «показать все» их раскрывает. */
.wf-extra { display: none; }
.wfs-tags.show-all .wf-extra { display: inline-block; }
.wf-tag {
  display: inline-block; max-width: 100%;
  font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.4;
  color: var(--mute); text-decoration: none;
  white-space: normal; overflow-wrap: anywhere; cursor: pointer; transition: color .12s;
}
.wf-tag:hover { color: var(--ink); }
.wf-tag.on { color: var(--ink); font-weight: 500; }
.wf-tag.off { color: #bcb4a6; cursor: default; pointer-events: none; }
.wf-tag-n { margin-left: 3px; font-size: .82em; opacity: .55; font-variant-numeric: tabular-nums; }
.wf-more { display: inline-block; margin-top: 4px; border: none; background: none; color: var(--mute);
  text-decoration: underline; text-underline-offset: 2px; padding: 2px 0; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; letter-spacing: .03em; cursor: pointer; }
.wf-more:hover { color: var(--accent); }

/* Год: заголовок (слева «Год», справа ввод + список доступных годов). */
.wfs-year-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.yr-pick { position: relative; display: inline-flex; align-items: center; }
.yr-clear { display: none; border: none; background: none; color: var(--mute); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 2px; margin-left: 3px; }
.yr-clear.show { display: inline-block; }
.yr-clear:hover { color: var(--accent); }
/* Кастомный список годов (родной datalist не поддаётся стилю): моно, плотные строки. */
.yr-pick-list { position: absolute; top: calc(100% + 3px); left: 0; z-index: 6; display: none;
  min-width: 70px; max-height: 220px; overflow-y: auto; background: #fff; border: 1px solid var(--rule);
  border-radius: 3px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .25); }
.yr-pick-list.open { display: block; }
.yr-pick-opt { font-family: 'IBM Plex Mono', monospace; font-size: 11.5px; line-height: 1.15;
  padding: 3px 9px; cursor: pointer; color: var(--ink); white-space: nowrap; }
.yr-pick-opt:hover { background: var(--soft); color: var(--accent); }
.yr-pick input { width: 62px; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  padding: 3px 6px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink);
  text-transform: none; }
.yr-pick input::placeholder { color: var(--mute); text-transform: uppercase; letter-spacing: .04em; }
.yr-pick input:focus { outline: none; border-color: #8f887c; }
/* Ползунок «микшер» в стиле зума виртуальной выставки: тонкая линия + квадратные
   ручки нейтрального цвета (без коричневого). */
.yr-slider { position: relative; height: 20px; margin-top: 8px; }
.yr-track { position: absolute; top: 8px; left: 0; right: 0; height: 3px; background: var(--rule); border-radius: 2px; }
.yr-fill { position: absolute; top: 8px; height: 3px; background: #aea89e; border-radius: 2px; }
.yr-slider input[type=range] { position: absolute; top: 0; left: 0; width: 100%; margin: 0; height: 20px;
  background: none; pointer-events: none; -webkit-appearance: none; appearance: none; }
.yr-slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none;
  width: 15px; height: 15px; border-radius: 4px; background: #aea89e; border: 2px solid var(--bg);
  cursor: pointer; pointer-events: auto; }
.yr-slider input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border-radius: 4px;
  background: #aea89e; border: 2px solid var(--bg); cursor: pointer; pointer-events: auto; }
.yr-slider input[type=range]::-moz-range-track { background: none; border: none; }
.yr-ends { display: flex; justify-content: space-between; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: var(--ink); margin-top: 1px; font-variant-numeric: tabular-nums; }

/* Выпадающие фасеты (Жанр, Техника). */
.wfs-drop > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; margin: 0; }
.wfs-drop > summary::-webkit-details-marker { display: none; }
.wfs-drop-sel { text-transform: none; letter-spacing: 0; color: var(--ink); font-size: 11px; font-weight: 500; }
.wfs-drop-arw { margin-left: auto; font-size: 9px; opacity: .6; transition: transform .12s; }
.wfs-drop[open] > summary .wfs-drop-arw { transform: rotate(180deg); }
.wfs-drop > .wfs-tags { margin-top: 6px; max-height: none; overflow: visible; }

/* «Точное место» — обычный выпадающий список (длинные названия — по строке). */
.wfs-place-select { width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 11.5px;
  padding: 4px 6px; border: 1px solid var(--rule); border-radius: 3px; background: #fff; color: var(--ink); }
.wfs-place-select:focus { outline: none; border-color: var(--accent); }

/* «АКТИВНО …» под шапкой — в моноширинном шрифте (07.2026, по просьбе). */
.section-header-chips { font-family: 'IBM Plex Mono', monospace; }
.section-header-chips .wf-active-label { font-family: 'IBM Plex Mono', monospace;
  text-transform: uppercase; letter-spacing: .07em; font-size: 10.5px; color: var(--mute); }
.section-header-chips .wf-active-item { font-family: 'IBM Plex Mono', monospace; font-style: normal;
  font-size: 11.5px; letter-spacing: .02em; color: var(--accent); border-bottom: none; }
.section-header-chips .wf-active-item:hover { color: var(--accent-dark, #5d2c1e); }
.section-header-chips .wf-active-x { color: inherit; opacity: .5; }