@charset "UTF-8";
/* ==========================================================================
   ПАЯЦ — серия картин LUKA
   Палитра снята пипеткой с самих холстов: чёрный грунт, охристое золото,
   красный круг. Янтарь — цвет канонического логотипа, он появляется
   ровно один раз, в финале, когда в зале зажигается свет.
   Радиус скругления по всему сайту: 0.
   ========================================================================== */

@font-face {
  font-family: "Lora";
  src: url("../fonts/lora-var.woff2") format("woff2-variations"),
       url("../fonts/lora-var.woff")  format("woff-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;

  --ink:      #0C0B0A;
  --ink-2:    #121110;
  --ink-3:    #191816;
  --bone:     #E9E3D8;
  --dim:      #B3AA9C;
  --gold:     #C3A558;
  --gold-dim: #6E5E33;
  --red:      #C6302F;
  --amber:    #FFB00F;

  --nav-h:    68px;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.375rem, 5vw, 4.5rem);
  --bay: clamp(5.5rem, 13vw, 11.5rem);   /* воздух между разделами */
  --max: 1360px;

  --ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- сброс ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, .55vw + .95rem, 1.1875rem);
  line-height: 1.72;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3 { margin: 0; font-weight: 500; line-height: 1.04; }
p { margin: 0; }
ul, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; }

::selection { background: var(--gold); color: var(--ink); }

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

.sr-only {
  position: absolute; 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: -9999px; top: 0; z-index: 200;
  background: var(--amber); color: var(--ink); padding: .8rem 1.2rem;
  font-family: var(--sans); font-size: .85rem; letter-spacing: .04em;
}
.skip:focus { left: 0; }

/* якоря не должны уезжать под липкую шапку */
section[id] { scroll-margin-top: calc(var(--nav-h) + 1.5rem); }
/* цветной блок подходит к шапке вплотную, без тёмной щели между ними */
#contact { scroll-margin-top: var(--nav-h); }

/* ---------- общие типографские детали ---------- */
.eyebrow {
  font-family: var(--sans);
  font-size: .78rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}

/* линия, закрытая красным кругом. Тот же знак, что на самих холстах */
.hero__rule, .teaser__line {
  display: flex; align-items: center; gap: .85rem;
  margin: 0;
}
.hero__rule i, .teaser__line i {
  display: block; height: 1px; background: var(--gold-dim); flex: 0 1 190px;
}
.hero__rule b, .teaser__line b {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--red); flex: none;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1.0625rem 1.75rem;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .2s var(--ease);
}
.btn--solid { background: var(--bone); color: var(--ink); }
.btn--solid:hover { background: var(--amber); }
.btn--ghost { border-color: rgba(195,165,88,.5); color: var(--bone); }
.btn--ghost:hover { border-color: var(--gold); background: rgba(195,165,88,.1); }
.btn:active { transform: translateY(1px); }
.btn--sm { padding: .8125rem 1.3125rem; font-size: .78rem; }

/* ==========================================================================
   Навигация
   ========================================================================== */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  height: var(--nav-h);
  padding: 0 var(--gut);
  background: rgba(12, 11, 10, .82);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(195,165,88,.14);
  transition: background-color .8s var(--ease), border-color .8s var(--ease);
}
.nav__seal img {
  width: 76px; height: auto; opacity: .95;
  transition: filter .8s var(--ease);
}
.nav__links { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); }
.nav__links a {
  font-family: var(--sans);
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--dim);
  padding: .35rem 0;
  border-bottom: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.nav__links a:hover { color: var(--bone); border-color: var(--gold); }

/* когда в зале зажёгся свет, шапка уходит в тот же янтарь,
   а не висит тёмной полосой поверх него */
.nav.on-amber {
  background: var(--amber);
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.nav.on-amber .nav__seal img { filter: brightness(0); }
.nav.on-amber .nav__links a { color: rgba(12, 11, 10, .76); }
.nav.on-amber .nav__links a:hover { color: var(--ink); border-color: rgba(12,11,10,.5); }

@media (max-width: 560px) {
  :root { --nav-h: 60px; }
  .nav__links { gap: 1.05rem; }
  .nav__links a { font-size: .75rem; letter-spacing: .08em; }
  .nav__links a[href="#series"] { display: none; }
  .nav__seal img { width: 66px; }
}
@media (prefers-reduced-transparency: reduce) {
  .nav { background: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ==========================================================================
   Герой
   ========================================================================== */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 38vw, 560px);
  align-items: end;
  min-height: calc(100dvh - var(--nav-h));
  padding: 0 0 clamp(3rem, 8vh, 6.5rem) var(--gut);
  overflow: hidden;
}
.hero__type { position: relative; z-index: 2; max-width: 33rem; padding-right: 1rem; }
.hero__title {
  font-size: clamp(4.25rem, 16vw, 13.5rem);
  font-weight: 560;
  letter-spacing: .06em;
  margin: clamp(.9rem, 2vh, 1.6rem) 0 clamp(1.1rem, 2.4vh, 1.9rem);
  display: flex;
  margin-right: -.06em;   /* компенсируем трекинг после последней буквы */
}
.hero__title span { display: block; }
.hero__lede {
  font-size: clamp(1.0625rem, 1.1vw + .8rem, 1.4375rem);
  line-height: 1.45;
  color: var(--dim);
  margin: 1.15rem 0 clamp(1.6rem, 4vh, 2.6rem);
  max-width: 22ch;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__art {
  position: relative;
  align-self: stretch;
  min-height: 0;
}
.hero__art picture, .hero__art img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
.hero__art img { object-fit: cover; object-position: 50% 22%; }
/* полотно выступает из темноты, а не лежит на ней прямоугольником */
.hero__art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right,  var(--ink) 0%, rgba(12,11,10,.72) 22%, rgba(12,11,10,0) 62%),
    linear-gradient(to bottom, var(--ink) 0%, rgba(12,11,10,0) 26%),
    linear-gradient(to top,    var(--ink) 0%, rgba(12,11,10,0) 30%);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    align-items: end;
    padding-right: var(--gut);
    min-height: calc(100dvh - var(--nav-h));
  }
  .hero__type { max-width: none; padding-right: 0; }
  .hero__art { position: absolute; inset: 0; z-index: 1; }
  .hero__art img { object-position: 56% 8%; }
  /* на телефоне лицо уходит вверх, а низ кадра гасится почти в чёрный,
     чтобы заголовок и кнопки читались без напряжения */
  .hero__art::after {
    background:
      linear-gradient(to bottom,
        rgba(12,11,10,.30) 0%,
        rgba(12,11,10,.52) 26%,
        rgba(12,11,10,.86) 50%,
        rgba(12,11,10,.97) 66%,
        var(--ink) 78%),
      linear-gradient(to right, rgba(12,11,10,.5), rgba(12,11,10,.05) 78%);
  }
  .hero__title { font-size: clamp(4rem, 21vw, 8rem); }
  .hero__lede { max-width: 22ch; }
}
@media (max-width: 400px) {
  .hero__cta { flex-direction: column; align-items: flex-start; }
  .hero__cta .btn { width: 100%; }
}

/* ==========================================================================
   Манифест
   ========================================================================== */
.series {
  max-width: 46rem;
  margin: 0 auto;
  padding: var(--bay) var(--gut);
  text-align: center;
}
.series__open, .series__close {
  font-size: clamp(1.75rem, 4.4vw, 3.1rem);
  line-height: 1.22;
  font-weight: 500;
  letter-spacing: .005em;
}
.series__open { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.series__close {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  color: var(--bone);
}
.seam {
  position: relative;
  white-space: nowrap;
}
/* шов: тонкая линия, которая всё ещё видна */
.seam::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .12em;
  height: 1px; background: var(--gold);
}

.prose { text-align: left; }
.prose p { margin-bottom: 1.6rem; color: var(--dim); }
.prose p:last-child { margin-bottom: 0; }
.prose + .quote, .quote + .prose { margin-top: clamp(2.75rem, 7vw, 4.5rem); }

.quote {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: clamp(1.25rem, 4vw, 3rem);
  margin: 0;
}
.quote__orn { color: var(--gold); opacity: .62; flex: none; }
.quote__orn:last-child { transform: scaleX(-1); }
.quote blockquote {
  margin: 0;
  font-size: clamp(1.125rem, 1.5vw + .8rem, 1.5rem);
  line-height: 1.5;
  color: var(--bone);
  text-wrap: balance;
}
@media (max-width: 640px) {
  .quote { grid-template-columns: 1fr; justify-items: center; gap: 1.5rem; }
  .quote__orn { width: 26px; height: 129px; }
  .quote__orn:last-child { display: none; }
}

/* ==========================================================================
   Работы — развеска со смещением
   ========================================================================== */
.works {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gut) var(--bay);
}
.works__head {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  gap: clamp(1.75rem, 4vw, 2.75rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  border-bottom: 1px solid rgba(195,165,88,.2);
  margin-bottom: clamp(3.5rem, 9vw, 7rem);
}
.works__head h2 {
  font-size: clamp(2.5rem, 6.5vw, 5rem);
  letter-spacing: .02em;
}
.facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 1rem;
}
.facts dt {
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .5rem;
}
.facts dd { font-size: 1.0625rem; color: var(--bone); }
@media (max-width: 620px) { .facts { grid-template-columns: repeat(2, 1fr); } }

/* подпись стоит у нижнего края холста, как этикетка на стене,
   а не висит в воздухе посередине */
.work {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: end;
  margin-bottom: clamp(4.5rem, 11vw, 9rem);
}

.work:last-child { margin-bottom: 0; }

/* развеска: разная высота и разный край, как на стене */
.work--a { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.work--b { grid-template-columns: minmax(0, 54fr) minmax(0, 46fr); }
.work--c { grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); }
.work--b .work__frame { order: 2; }
.work--b .work__meta  { order: 1; text-align: right; justify-items: end; }
.work--a { margin-left: 0;    margin-right: clamp(0rem, 6vw, 5rem); }
.work--b { margin-left: clamp(0rem, 6vw, 5rem); margin-right: 0; }
.work--c { margin-right: clamp(0rem, 3vw, 2.5rem); }

.work__frame {
  position: relative;
  display: block;
  width: 100%;
  cursor: zoom-in;
  background: var(--ink-2);
  overflow: hidden;
}
.work__frame img { width: 100%; height: auto; }
/* золотая рамка прорисовывается при наведении */
.work__frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(195,165,88,0);
  transition: box-shadow .45s var(--ease);
}
.work__frame:hover::after, .work__frame:focus-visible::after {
  box-shadow: inset 0 0 0 1px rgba(195,165,88,.85);
}
.work__zoom {
  position: absolute; left: 0; bottom: 0;
  background: var(--amber); color: var(--ink);
  font-family: var(--sans); font-size: .76rem;
  letter-spacing: .18em; text-transform: uppercase;
  padding: .7rem 1.1rem;
  transform: translateY(100%);
  transition: transform .4s var(--ease);
}
.work__frame:hover .work__zoom, .work__frame:focus-visible .work__zoom { transform: translateY(0); }

.work__meta {
  display: grid; gap: 1rem; justify-items: start;
  padding-bottom: clamp(.5rem, 3vw, 2.75rem);
}
.work__meta h3 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  letter-spacing: .01em;
}
.work__meta h3 span { color: var(--gold); }
.work__note {
  color: var(--dim);
  font-size: 1.0625rem;
  line-height: 1.6;
  max-width: 30ch;
}
.work__price {
  font-size: clamp(1.375rem, 2.2vw, 1.625rem);
  color: var(--gold);
  letter-spacing: .02em;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(195,165,88,.22);
  width: 100%;
  max-width: 22rem;
}
.work--b .work__price { margin-left: auto; }

@media (max-width: 860px) {
  .work,
  .work--a, .work--b, .work--c {
    grid-template-columns: 1fr;
    margin-left: 0; margin-right: 0;
    gap: 1.75rem;
  }
  .work--b .work__frame { order: 0; }
  .work--b .work__meta  { order: 0; text-align: left; justify-items: start; }
  .work--b .work__price { margin-left: 0; }
  .work__meta { padding-bottom: 0; }
  .work__frame { max-width: 34rem; }
  .work__note { max-width: 34ch; }
}

/* ==========================================================================
   Тизер — портал
   ========================================================================== */
.teaser {
  background: var(--ink-2);
  border-top: 1px solid rgba(195,165,88,.14);
  border-bottom: 1px solid rgba(195,165,88,.14);
  padding: var(--bay) var(--gut);
}
.teaser__inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(2.5rem, 7vw, 6rem);
  align-items: center;
}
.teaser__stage {
  display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem);
}
.teaser__orn { color: var(--gold); opacity: .5; flex: none; }
.teaser__orn:last-child { transform: scaleX(-1); }

.reel {
  position: relative;
  display: block;
  width: clamp(210px, 26vw, 330px);
  aspect-ratio: 464 / 848;
  background: var(--ink);
  cursor: pointer;
  box-shadow: 0 0 0 1px rgba(195,165,88,.45), 0 30px 80px rgba(0,0,0,.55);
  transition: box-shadow .45s var(--ease);
}
.reel:hover, .reel:focus-visible { box-shadow: 0 0 0 1px var(--gold), 0 30px 80px rgba(0,0,0,.65); }
.reel__v { width: 100%; height: 100%; object-fit: cover; }
.reel__cue {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .85rem 1rem;
  background: linear-gradient(to top, rgba(12,11,10,.94), rgba(12,11,10,0));
  font-family: var(--sans); font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--bone);
}
/* треугольник собран из примитива, без иконочного шрифта */
.reel__tri {
  width: 0; height: 0;
  border-left: 10px solid var(--amber);
  border-top: 6.5px solid transparent;
  border-bottom: 6.5px solid transparent;
}

.teaser__type { max-width: 32rem; }
.teaser__type h2 {
  font-size: clamp(2.25rem, 5.2vw, 4.25rem);
  letter-spacing: .01em;
  margin-bottom: 1.5rem;
}
.teaser__type p { color: var(--dim); }
.teaser__line { margin: 2rem 0 1.25rem; }
.teaser__cap {
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 900px) {
  .teaser__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .teaser__type { text-align: center; }
  .teaser__line { justify-content: center; }
  .reel { width: min(70vw, 300px); }
}
@media (max-width: 560px) {
  .teaser__orn { display: none; }
}

/* ==========================================================================
   Контакты — в зале зажигается свет.
   Единственная смена темы на странице, в самом конце и по делу.
   ========================================================================== */
.curtain {
  position: relative;
  background: var(--amber);
  color: var(--ink);
  padding: var(--bay) var(--gut);
  overflow: hidden;
}
.curtain__lights {
  position: absolute; inset: 0;
  background: var(--ink);
  transform-origin: bottom;
  transition: opacity 1.1s var(--ease);
}
.curtain.lit .curtain__lights { opacity: 0; }
.curtain__inner { position: relative; max-width: var(--max); margin: 0 auto; }
.curtain__eyebrow {
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(12,11,10,.78);
  margin-bottom: 1rem;
}
.curtain h2 {
  font-size: clamp(3.5rem, 12vw, 9rem);
  letter-spacing: .02em;
  margin-bottom: clamp(2.5rem, 6vw, 4rem);
}
/* пока свет не зажёгся, текст читается на чёрном */
.curtain:not(.lit) .curtain__eyebrow { color: var(--gold); }
.curtain:not(.lit) .curtain__inner { color: var(--bone); }
.curtain__inner { transition: color .9s var(--ease); }
.curtain__eyebrow { transition: color .9s var(--ease); }

.channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  border-top: 1px solid rgba(12,11,10,.28);
}
.curtain:not(.lit) .channels { border-color: rgba(195,165,88,.3); }
.channels li { border-bottom: 1px solid rgba(12,11,10,.28); }
.curtain:not(.lit) .channels li { border-color: rgba(195,165,88,.3); }
.channels a {
  display: grid; gap: .35rem;
  padding: 1.5rem 1.25rem 1.5rem 0;
  text-decoration: none;
  transition: padding-left .35s var(--ease), background-color .35s var(--ease);
}
.channels a:hover { padding-left: 1rem; background: rgba(12,11,10,.06); }
.channels__k {
  font-family: var(--sans);
  font-size: .78rem; letter-spacing: .24em; text-transform: uppercase;
  opacity: .78;
}
.channels__v {
  font-size: clamp(1.25rem, 2.6vw, 1.75rem);
  letter-spacing: .01em;
}

.colophon {
  margin-top: clamp(3.5rem, 9vw, 6rem);
  display: flex; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; gap: 2rem;
}
.colophon__wm { width: clamp(140px, 20vw, 240px); height: auto; }
.curtain:not(.lit) .colophon__wm { filter: invert(1) sepia(1) saturate(.2) brightness(1.5); }
.colophon__wm { transition: filter .9s var(--ease); }
.colophon__meta {
  font-family: var(--sans);
  font-size: .78rem; line-height: 1.7; letter-spacing: .04em;
  opacity: .78;
  text-align: right;
}
@media (max-width: 620px) {
  .colophon { flex-direction: column; align-items: flex-start; }
  .colophon__meta { text-align: left; }
}

/* ==========================================================================
   Лайтбокс и зал
   ========================================================================== */
.lb, .hall {
  position: fixed; inset: 0; z-index: 120;
  display: grid; place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 5, 5, .96);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .4s var(--ease);
}
.lb[hidden], .hall[hidden] { display: none !important; }
.lb.open, .hall.open { opacity: 1; }

.lb__fig { margin: 0; display: grid; gap: 1rem; justify-items: center; }
.lb__fig img {
  max-width: min(92vw, 760px);
  max-height: 78vh;
  width: auto; height: auto;
  box-shadow: 0 0 0 1px rgba(195,165,88,.35), 0 40px 120px rgba(0,0,0,.7);
  transform: scale(.97);
  transition: transform .45s var(--ease);
}
.lb.open .lb__fig img { transform: scale(1); }
.lb__fig figcaption {
  font-family: var(--sans);
  font-size: .8rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--dim);
  text-align: center;
}
.hall__v {
  max-width: min(94vw, 440px);
  max-height: 86vh;
  width: auto; height: auto;
  box-shadow: 0 0 0 1px rgba(195,165,88,.35), 0 40px 120px rgba(0,0,0,.7);
}

.lb__close {
  position: absolute; top: clamp(.75rem, 2.5vw, 1.75rem); right: clamp(.75rem, 2.5vw, 1.75rem);
  width: 46px; height: 46px; cursor: pointer;
  border: 1px solid rgba(195,165,88,.4);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.lb__close:hover { border-color: var(--gold); background: rgba(195,165,88,.12); }
.lb__close span {
  position: absolute; left: 50%; top: 50%; width: 18px; height: 1px;
  background: var(--bone);
}
.lb__close span:first-child { transform: translate(-50%,-50%) rotate(45deg); }
.lb__close span:last-child  { transform: translate(-50%,-50%) rotate(-45deg); }

.lb__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 58px; height: 58px; cursor: pointer;
  border: 1px solid rgba(195,165,88,.3);
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.lb__nav:hover { border-color: var(--gold); background: rgba(195,165,88,.12); }
.lb__nav::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  border-left: 1px solid var(--bone); border-bottom: 1px solid var(--bone);
}
.lb__nav--prev { left: clamp(.5rem, 2vw, 2rem); }
.lb__nav--next { right: clamp(.5rem, 2vw, 2rem); }
.lb__nav--prev::before { transform: translate(-40%,-50%) rotate(45deg); }
.lb__nav--next::before { transform: translate(-60%,-50%) rotate(-135deg); }
@media (max-width: 640px) {
  .lb__nav { width: 46px; height: 46px; top: auto; bottom: 1rem; transform: none; }
}

body.locked { overflow: hidden; }

/* ==========================================================================
   Появление при прокрутке.
   Задача движения: показать порядок чтения и «развеску» работ,
   а не украсить страницу.
   ========================================================================== */
.rv {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .85s var(--ease) var(--d, 0ms),
              transform .85s var(--ease) var(--d, 0ms);
  will-change: opacity, transform;
}
.rv.in { opacity: 1; transform: none; will-change: auto; }

.work.rv { transform: translateY(34px); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
  .curtain__lights { opacity: 0; }
  .curtain .curtain__eyebrow { color: rgba(12,11,10,.78); }
  .curtain .curtain__inner { color: var(--ink); }
  .curtain .colophon__wm { filter: none; }
  .curtain .channels { border-color: rgba(12,11,10,.28); }
  .curtain .channels li { border-color: rgba(12,11,10,.28); }
}

/* печать: каталожный лист */
@media print {
  .nav, .hero__art, .teaser__stage, .lb, .hall, .btn, .work__zoom { display: none !important; }
  body { background: #fff; color: #000; }
  .rv { opacity: 1; transform: none; }
  .curtain { background: #fff; color: #000; }
  .curtain__lights { display: none; }
}