/* =========================================================================
   Inna Shtol — стили сайта «Ночь и свет»
   Итоговые стили для шаблонов из templates/. Токены — в tokens.css,
   шрифты — в fonts.css. Классы описаны в docs/DESIGN.md.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: 1.7;
  background: var(--night-900);
  color: var(--on-night);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* Свечение выходит за рамку картины, но не расширяет мобильную страницу. */
main { overflow-x: clip; }
a { color: inherit; }

::selection { background: var(--ultramarine); color: var(--bone); }

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

/* --- Режимы поверхности -------------------------------------------------
   .night — разделы с живописью; .paper — текстовые разделы.
   Переключается на уровне <section> или <body>.
   ---------------------------------------------------------------------- */
.night { background: var(--night-900); color: var(--on-night); }
.paper { background: var(--bone); color: var(--ink); }
.paper a { color: var(--ink); }
/* Подвал всегда ночной, даже на светлой странице */
.paper .foot, .paper .foot a { color: var(--on-night); }
.paper .brand__lat { color: var(--ink-muted); }

/* --- Сетка --------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--page-max);
  margin-inline: auto;
  padding-inline: var(--page-x);
}
.section { padding-block: var(--section-y); }

/* --- Типографика --------------------------------------------------------- */
.display-xl, .display-l, .display-m {
  font-family: var(--font-display);
  font-weight: 400;
  margin: 0;
  letter-spacing: -0.005em;
}
.display-xl { font-size: var(--step-display-xl); line-height: 1.02; }
.display-l  { font-size: var(--step-display-l);  line-height: 1.12; }
.display-m  { font-size: var(--step-display-m);  line-height: 1.22; }

.lead { font-size: var(--step-body-l); line-height: 1.62; max-width: 34rem; }
.prose { max-width: var(--text-max); }
.prose p { margin: 0 0 1.15em; }
.prose p:last-child { margin-bottom: 0; }

/* Надзаголовок раздела: моноширинный, разрядка, охра */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: var(--hairline);
  background: currentColor;
  opacity: 0.28;
}
.paper .eyebrow { color: var(--ink-muted); }

/* --- «Последний луч»: горизонталь-порог ---------------------------------
   Единственный яркий элемент интерфейса. Отмечает границу между ночным и
   светлым разделом и активный пункт меню. Больше нигде не используется.
   ---------------------------------------------------------------------- */
.ray {
  height: var(--hairline);
  border: 0;
  margin: 0;
  background: linear-gradient(90deg, var(--ray) 0%, rgba(228, 102, 42, 0.55) 22%, rgba(228, 102, 42, 0) 62%);
}

/* --- Шапка --------------------------------------------------------------- */
.head {
  position: sticky;
  top: 0;
  z-index: 20;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--night-900) 82%, transparent);
  border-bottom: var(--hairline) solid rgba(231, 228, 214, 0.1);
}
.paper .head, .head.on-paper {
  background: color-mix(in srgb, var(--bone) 86%, transparent);
  border-bottom-color: rgba(11, 23, 48, 0.14);
}
.head__in {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 1.15rem;
}
.brand { text-decoration: none; line-height: 1.15; }
.brand__ru {
  font-family: var(--font-display);
  font-size: 1.22rem;
  letter-spacing: 0.02em;
  display: block;
}
.brand__lat {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  display: block;
  margin-top: 0.28rem;
}
.nav { display: flex; gap: clamp(0.9rem, 1.9vw, 2rem); align-items: center; }
.nav a {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 0.4rem;
  border-bottom: var(--hairline) solid transparent;
  color: inherit;
  opacity: 0.78;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav a:hover { opacity: 1; }
.nav a[aria-current] { opacity: 1; border-bottom-color: var(--ray); }
.nav__lang { color: var(--gold); opacity: 1; letter-spacing: 0.1em; }

/* --- Подпись под работой («этикетка») ------------------------------------
   Единый объект на всём сайте: под миниатюрой, на странице картины, в серии.
   Порядок полей всегда один и тот же и повторяет поля карточки в базе.
   ---------------------------------------------------------------------- */
.label { display: block; text-decoration: none; color: inherit; }
.label__inv, .label__title, .label__meta { display: block; }
.label__inv {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.14em;
  color: var(--gold);
}
.label__title {
  font-family: var(--font-display);
  font-size: 1.16rem;
  line-height: 1.25;
  margin: 0.42rem 0 0.34rem;
}
.label__meta {
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  line-height: 1.55;
  color: var(--on-night-muted);
  margin: 0;
}
.paper .label__meta { color: var(--ink-muted); }
.label__price {
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  margin-top: 0.45rem;
  display: inline-block;
  letter-spacing: 0.04em;
}
.label__price--sold {
  color: var(--gold);
  border: var(--hairline) solid currentColor;
  padding: 0.14rem 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: var(--step-label);
}

/* --- «Окно»: работа как освещённый прямоугольник на тёмной стене ---------
   Подпись компонента: изображение никогда не обрезается, вокруг него —
   мягкий тёплый свет, как от окна или лампы в её картинах.
   ---------------------------------------------------------------------- */
.lit { position: relative; display: inline-block; isolation: isolate; }
.lit::before {
  content: "";
  position: absolute;
  inset: -14% -16% -22%;
  background: radial-gradient(58% 52% at 50% 56%, rgba(194, 167, 104, 0.19), rgba(194, 167, 104, 0) 72%);
  filter: blur(22px);
  z-index: -1;
  opacity: 0.85;
  transition: opacity var(--dur) var(--ease);
  pointer-events: none;
}
.lit img {
  box-shadow:
    0 0 0 var(--hairline) rgba(231, 228, 214, 0.16),
    0 2.5rem 5rem -2rem rgba(0, 0, 0, 0.8);
  transition: transform var(--dur) var(--ease);
}
.paper .lit::before { background: radial-gradient(58% 52% at 50% 56%, rgba(11, 23, 48, 0.14), rgba(11, 23, 48, 0) 72%); }
.paper .lit img { box-shadow: 0 0 0 var(--hairline) rgba(11, 23, 48, 0.18), 0 1.5rem 3rem -1.5rem rgba(11, 23, 48, 0.35); }
a.label:hover .lit::before { opacity: 1; }
a.label:hover .lit img { transform: translateY(-3px); }

/* --- Развеска: работы стоят на общей нижней линии -------------------------
   Решает требование «разные пропорции без обрезки»: высота свободная,
   низ выровнен по одной линии, как в реальной развеске.
   ---------------------------------------------------------------------- */
.hang {
  display: grid;
  gap: clamp(1.75rem, 3.4vw, 3.25rem) var(--gutter);
  grid-template-columns: repeat(3, 1fr);
  align-items: end;
  border-bottom: var(--hairline) solid rgba(231, 228, 214, 0.14);
  padding-bottom: 1.15rem;
  margin-bottom: 2.4rem;
}
.paper .hang { border-bottom-color: rgba(11, 23, 48, 0.16); }
.hang--2 { grid-template-columns: repeat(2, 1fr); }
.hang--4 { grid-template-columns: repeat(4, 1fr); }
.hang__item { display: flex; flex-direction: column; justify-content: flex-end; }
/* Полотно стоит на линии развески: высота ограничена, ширина свободная,
   рамка обнимает изображение, а не ячейку сетки. */
.hang__art { display: flex; align-items: flex-end; height: var(--hang-h, 22rem); margin-bottom: 1.05rem; }
.hang__art .lit { max-width: 100%; }
.hang__art img { max-height: var(--hang-h, 22rem); width: auto; max-width: 100%; height: auto; }

/* Ряд каталога: подписи под общей линией */
.hang-row { margin-bottom: clamp(3rem, 6vw, 5rem); }
.hang-row .hang { margin-bottom: 1.15rem; }

/* --- Кнопки и ссылки ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border: var(--hairline) solid currentColor;
  color: var(--on-night);
  background: transparent;
  transition: background 0.3s var(--ease), color 0.3s var(--ease);
  cursor: pointer;
}
.btn:hover { background: var(--on-night); color: var(--night-900); }
.paper .btn { color: var(--ink); }
.paper .btn:hover { background: var(--ink); color: var(--bone); }
.btn--solid { background: var(--ultramarine); border-color: var(--ultramarine); color: var(--bone); }
.btn--solid:hover { background: var(--ray); border-color: var(--ray); color: var(--night-900); }

.link-arrow {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.32rem;
  border-bottom: var(--hairline) solid currentColor;
  transition: gap 0.3s var(--ease);
}
.link-arrow:hover { gap: 1rem; }
.night .link-arrow { color: var(--teal); }

/* --- Первый экран --------------------------------------------------------- */
.hero { position: relative; overflow: hidden; }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  min-height: min(78vh, 46rem);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2rem, 4vw, 3.5rem);
}
.hero__name { margin-bottom: 1.6rem; }
.hero__lat {
  font-family: var(--font-mono);
  font-size: var(--step-label);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.4rem;
}
.hero__art { justify-self: center; }
.hero__art img { max-height: min(52vh, 28rem); width: auto; }
/* Полоса избранного стоит на том же пороге, что и «последний луч»:
   работы не обрезаны, выровнены по нижней линии, подпись — рядом. */
.hero__strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gutter); align-items: end; }
.hero__strip .hang__art { height: 14rem; margin-bottom: 0.9rem; }
.hero__strip img { max-height: 14rem; width: auto; max-width: 100%; }

/* --- Карточка серии ------------------------------------------------------
   Карточка не знает, сколько всего серий и сколько в ней работ. Ширину ей
   задаёт сетка, а число видимых работ на обложке — контейнерный запрос.
   ---------------------------------------------------------------------- */
.series-grid {
  display: grid;
  gap: clamp(2rem, 4vw, 3.5rem) var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(21rem, 100%), 1fr));
  align-items: start;
}
/* Одна серия не превращается в одинокую узкую карточку */
.series-grid:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

.series-card { display: block; text-decoration: none; color: inherit; container-type: inline-size; }
.series-card__imgs {
  display: flex;
  gap: 0.75rem;
  align-items: flex-end;
  height: 11rem;
  border-bottom: var(--hairline) solid rgba(231, 228, 214, 0.14);
  padding-bottom: 0.9rem;
}
.series-card__imgs img {
  max-height: 11rem;
  width: auto;
  max-width: 32%;
  box-shadow: 0 0 0 var(--hairline) rgba(231, 228, 214, 0.14);
}
.paper .series-card__imgs { border-bottom-color: rgba(11, 23, 48, 0.16); }
.series-card__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: 1.1rem 0 0.5rem; flex-wrap: wrap; }
.series-card__count { font-family: var(--font-mono); font-size: var(--step-meta); color: var(--gold); white-space: nowrap; }

/* Чем уже колонка, тем меньше работ на обложке: три → две → одна */
@container (max-width: 30rem) {
  .series-card__imgs img:nth-child(n + 3) { display: none; }
  .series-card__imgs img { max-width: 48%; }
}
@container (max-width: 19rem) {
  .series-card__imgs img:nth-child(n + 2) { display: none; }
  .series-card__imgs img { max-width: 100%; }
}

/* Указатель серий: появляется, когда серий становится много */
.series-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  gap: 0.6rem var(--gutter);
  border-top: var(--hairline) solid rgba(231, 228, 214, 0.14);
  padding-top: 1.2rem;
}
.paper .series-index { border-top-color: rgba(11, 23, 48, 0.16); }
.series-index a {
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  text-decoration: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  border-bottom: var(--hairline) solid transparent;
}
.series-index a:hover { border-bottom-color: currentColor; }
.series-index span { color: var(--gold); }

/* Переход между сериями внизу страницы серии */
.series-nav { display: flex; justify-content: space-between; gap: var(--gutter); flex-wrap: wrap; border-top: var(--hairline) solid rgba(231, 228, 214, 0.14); padding-top: 1.4rem; }
.series-nav a { text-decoration: none; max-width: 22rem; }
.series-nav__dir { font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 0.4rem; }
.series-nav__t { font-family: var(--font-display); font-size: 1.3rem; }
.series-nav > :last-child { text-align: right; }

/* Ряд фильтров каталога: растёт вместе с числом серий ---------------------
   До пяти кнопок — обычный ряд. Дальше переносится на вторую строку,
   а на телефоне прокручивается по горизонтали.
   ---------------------------------------------------------------------- */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.filters .btn { white-space: nowrap; }
.filters__end { margin-left: auto; }
@media (max-width: 46rem) {
  .filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-bottom: 0.4rem;
    margin-inline: calc(var(--page-x) * -1);
    padding-inline: var(--page-x);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters__end { margin-left: 0; }
}

/* --- Таблица данных (страница картины, доставка) -------------------------- */
.specs { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: var(--step-meta); }
.specs th, .specs td { text-align: left; padding: 0.72rem 0; border-bottom: var(--hairline) solid rgba(231, 228, 214, 0.12); vertical-align: top; }
.paper .specs th, .paper .specs td { border-bottom-color: rgba(11, 23, 48, 0.14); }
.specs th { font-weight: 400; color: var(--gold); width: 11rem; letter-spacing: 0.1em; text-transform: uppercase; font-size: var(--step-label); }
.paper .specs th { color: var(--ink-muted); }

/* --- Место под контент, которого пока нет -------------------------------- */
.slot {
  border: var(--hairline) dashed rgba(194, 167, 104, 0.5);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  font-family: var(--font-mono);
  font-size: var(--step-meta);
  line-height: 1.65;
  color: var(--gold);
  background: rgba(194, 167, 104, 0.045);
}
.paper .slot { color: var(--ink-muted); border-color: rgba(11, 23, 48, 0.28); background: rgba(11, 23, 48, 0.035); }
.slot strong { display: block; letter-spacing: 0.14em; text-transform: uppercase; font-size: var(--step-label); margin-bottom: 0.6rem; }
.slot--img { display: grid; place-items: center; min-height: 16rem; text-align: center; }

/* --- Подвал --------------------------------------------------------------- */
.foot { background: var(--night-900); color: var(--on-night); padding-block: clamp(3rem, 6vw, 5rem) 2.5rem; }
.foot__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gutter); }
.foot h3 { font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); margin: 0 0 1rem; font-weight: 400; }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 0.55rem; }
.foot a { text-decoration: none; opacity: 0.82; }
.foot a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.25em; }
.foot__bottom { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin-top: 3rem; padding-top: 1.4rem; border-top: var(--hairline) solid rgba(231, 228, 214, 0.12); font-family: var(--font-mono); font-size: var(--step-meta); color: var(--on-night-muted); }

/* --- Адаптив -------------------------------------------------------------- */
@media (max-width: 60rem) {
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 2.5rem; }
  .hero__art img { max-height: 48vh; }
  .hang, .hang--4 { grid-template-columns: repeat(2, 1fr); }
  .foot__grid { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; }
}
@media (max-width: 40rem) {
  .hang, .hang--2, .hang--4 { grid-template-columns: 1fr; border-bottom: 0; padding-bottom: 0; gap: 3rem; }
  .hang__art { height: auto; }
  .hang__art img { max-height: 60vh; }
  .hero__strip { gap: 0.9rem; }
  .hero__strip .hang__art { height: 8rem; }
  .hero__strip img { max-height: 8rem; }
  .specs th { width: 8rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* =========================================================================
   Дополнения для рабочего сайта
   ========================================================================= */

[hidden] { display: none !important; }
.vh {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Переход к содержанию для клавиатуры */
.skip {
  position: absolute; left: var(--page-x); top: -3rem; z-index: 60;
  background: var(--bone); color: var(--night-900); padding: 0.6rem 1rem;
  font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.14em;
  text-transform: uppercase; text-decoration: none;
}
.skip:focus { top: 0.75rem; }

/* --- Раскладка разворотов ----------------------------------------------------
   .split — две колонки на 12-колоночной сетке. На узком экране складывается.
   a/b — левая и правая часть; модификатор задаёт пропорцию.
   ------------------------------------------------------------------------ */
.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 2.5rem var(--gutter);
  align-items: start;
}
.split > .a { grid-column: 1 / span 5; }
.split > .b { grid-column: 7 / span 6; }
.split--4-8 > .a { grid-column: 1 / span 4; }
.split--4-8 > .b { grid-column: 6 / span 6; }
.split--work > .a { grid-column: 1 / span 7; justify-self: center; }
.split--work > .b { grid-column: 9 / span 4; }
.split--end { align-items: end; }
@media (max-width: 52rem) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .split > .a, .split > .b { grid-column: 1 / -1; justify-self: stretch; }
}

/* Заголовок страницы: надзаголовок, заголовок и вводный абзац */
.page-head { padding-top: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.page-head h1 { margin: 0; }
.page-head .label__meta { margin: 0; }

.crumbs { font-family: var(--font-mono); font-size: var(--step-meta); color: var(--on-night-muted); margin: 0 0 2.5rem; }
.crumbs a { color: var(--gold); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.crumbs span[aria-hidden] { opacity: 0.4; margin: 0 0.35rem; }

/* --- Мобильное меню ---------------------------------------------------------- */
.menu-toggle {
  display: none;
  background: none; border: var(--hairline) solid currentColor; color: inherit;
  font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.18em;
  text-transform: uppercase; padding: 0.55rem 0.9rem; cursor: pointer;
}
@media (max-width: 60rem) {
  .head__in { align-items: center; }
  .head__in { flex-wrap: wrap; }
  .has-menu .head__in { flex-wrap: nowrap; gap: 1rem; }
  .nav { flex-wrap: wrap; }
  .has-menu .menu-toggle { display: inline-block; }
  .has-menu .nav {
    display: none;
    position: fixed; inset: 0; z-index: 50;
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1.4rem; padding: 5rem var(--page-x) 3rem;
    background: var(--night-900); color: var(--on-night);
  }
  .nav a { font-size: 0.95rem; opacity: 1; }
  .head[data-open] .nav { display: flex; }
  /* backdrop-filter у шапки делает её рамкой для position: fixed —
     на время открытого меню фильтр снимается, иначе панель не займёт экран */
  .head[data-open] { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--night-900); }
  .head[data-open] .menu-toggle { position: fixed; top: 1.1rem; right: var(--page-x); z-index: 55; color: var(--on-night); }
}
@media (max-width: 40rem) {
  .has-menu .brand__lat { display: none; }
}

/* --- Переключатель языка ----------------------------------------------------- */
.lang { display: flex; gap: 0.6rem; }
.lang a { color: var(--gold); opacity: 0.7; }
.lang a[aria-current] { opacity: 1; border-bottom-color: var(--ray); }

/* --- Фильтры каталога -------------------------------------------------------- */
.filters { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.filters .btn { white-space: nowrap; }
.filters .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.filters__end { margin-left: auto; }
@media (max-width: 46rem) {
  .filters {
    flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 0.4rem;
    margin-inline: calc(var(--page-x) * -1); padding-inline: var(--page-x);
  }
  .filters::-webkit-scrollbar { display: none; }
  .filters__end { margin-left: 0; }
}
.hang__item[data-hidden] { display: none; }
.hang--3 { grid-template-columns: repeat(3, 1fr); }

/* --- Блок покупки на странице работы ----------------------------------------- */
.buy { border: var(--hairline) solid rgba(231, 228, 214, 0.2); padding: 1.6rem 1.75rem; }
.buy__price { font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.06em; margin: 0 0 1.1rem; }
.buy__state {
  display: inline-block; margin: 0 0 0.9rem; font-family: var(--font-mono);
  font-size: var(--step-label); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--gold); border: var(--hairline) solid currentColor; padding: 0.14rem 0.5rem;
}
.buy__badge { display: block; font-family: var(--font-mono); font-size: var(--step-meta); color: var(--teal); margin: 0 0 1rem; }
.buy .label__meta { margin-top: 1.1rem; }

/* --- Главное изображение и увеличение --------------------------------------- */
.zoom-trigger { display: inline-block; border: 0; padding: 0; background: none; cursor: zoom-in; }
.work-main img { max-height: 74vh; width: auto; }
.zoom {
  border: 0; padding: 0; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh;
  background: rgba(4, 13, 34, 0.96); color: var(--on-night);
}
.zoom::backdrop { background: rgba(4, 13, 34, 0.96); }
.zoom img { width: 100%; height: 100%; object-fit: contain; padding: clamp(1rem, 4vw, 3rem); }
.zoom__close {
  position: fixed; top: 1rem; right: 1rem; z-index: 2;
  background: none; color: var(--on-night); border: var(--hairline) solid currentColor;
  font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.16em;
  text-transform: uppercase; padding: 0.55rem 0.9rem; cursor: pointer;
}

/* --- Дополнительные снимки работы ------------------------------------------- */
.extras { --hang-h: 16rem; }
.extras .hang__art { height: var(--hang-h); }
@media (max-width: 40rem) {
  .extras .hang__art { height: auto; }
}
.extras figcaption { font-family: var(--font-mono); font-size: var(--step-label); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }

/* --- Список площадок и выставок ---------------------------------------------- */
.entry { border-top: var(--hairline) solid rgba(11, 23, 48, 0.16); padding: 1.3rem 0; }
.night .entry { border-top-color: rgba(231, 228, 214, 0.14); }
.entry h3 { margin: 0.35rem 0 0.5rem; }
.entry .label__meta { margin: 0; }

/* --- Записки ------------------------------------------------------------------- */
.note-body { max-width: var(--text-max); }
.note-body p { margin: 0 0 1.15em; }
.note-body figure { margin: 2.5rem 0; }

/* --- Подвал на светлой странице остаётся ночным ------------------------------ */
.paper .foot .brand__lat { color: var(--gold); }

@media (max-width: 40rem) {
  .hang--3 { grid-template-columns: 1fr; }
}

/* Каталог одной сеткой: работы можно фильтровать, не ломая ряды.
   Линия развески рисуется под каждой работой и собирается в строку. */
.hang--flow { border-bottom: 0; padding-bottom: 0; }
.hang--flow .hang__item {
  border-bottom: var(--hairline) solid rgba(231, 228, 214, 0.14);
  padding-bottom: 1.15rem;
}

/* Авторское название работы — второй строкой под русским */
.label__orig {
  display: block; font-family: var(--font-mono); font-size: var(--step-meta);
  color: var(--on-night-muted); margin: -0.1rem 0 0.3rem; opacity: 0.8;
}
.paper .label__orig { color: var(--ink-muted); }

/* Полоса «Избранное» стоит на пороге — под подписями нужен воздух до линии */
.hero > .wrap { padding-bottom: clamp(2.5rem, 5vw, 3.5rem); }

/* Портрет художницы: исходные пропорции, без обрезки и тонирования. */
.artist-portrait { display: block; }
.artist-portrait img { width: 100%; height: auto; }