/* === SECTIONS.CSS === */
/* assets/css/sections.css */
/* НАЗНАЧЕНИЕ: Оформление всех смысловых блоков страницы */
/* СВЯЗИ: tokens.css, layout.css, views/sections/*.php */
/* РАЗМЕР: ~900 строк */

/* ==========================================================
   ОБЩИЕ ЭЛЕМЕНТЫ
   ========================================================== */

/* Стеклянная поверхность. Один рецепт на весь сайт, чтобы
   карточки не расходились по прозрачности и радиусу.
   brightness() в фильтре притемняет фотографию под стеклом -
   это позволяет держать фон ровно тем, что задан в ТЗ,
   и всё равно получать читаемый белый текст поверх любого кадра. */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-line);
  border-radius: var(--r-lg);
  backdrop-filter: blur(22px) saturate(140%) brightness(.72);
  -webkit-backdrop-filter: blur(22px) saturate(140%) brightness(.72);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(10, 9, 6, .78); }
}

/* Фотография в рамке. Радиус и обрезка в одном месте. */
.shot {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--void-3);
}

.shot picture,
.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.shot-sm { border-radius: var(--r-md); }

.r-1x1  { aspect-ratio: 1 / 1; }
.r-4x3  { aspect-ratio: 4 / 3; }
.r-3x4  { aspect-ratio: 3 / 4; }
.r-3x2  { aspect-ratio: 3 / 2; }
.r-16x9 { aspect-ratio: 16 / 9; }

/* Видеооблет объекта. Пропорции блока равны пропорциям самого файла
   (848x560): кадр виден целиком, без срезанных краев и без черных полей. */
.flyover {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--void-3);
}

.flyover-media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 848 / 560;
}

.flyover-tag {
  position: absolute;
  left: clamp(16px, 2.2vw, 26px);
  bottom: clamp(16px, 2.2vw, 26px);
  display: flex;
  gap: var(--s3);
  padding: 8px var(--s4);
  border-radius: var(--r-pill);
  background: rgba(10, 9, 6, .62);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--ivory);
}

.flyover-tag span + span { color: var(--on-void-soft); }

/* Медленное приближение кадра при наведении - единственный
   разрешенный эффект для фотографий. */
.zoomable img { transition: transform 1.2s var(--out-quart); }
.zoomable:hover img { transform: scale(1.04); }

.cap {
  margin-top: var(--s3);
  font-size: var(--t-cap);
  line-height: 1.6;
  color: var(--on-void-soft);
}

.on-light .cap { color: var(--ink-60); }

/* Подсказка под лентой, которую листают пальцем. Показывается только
   там, где лента действительно листается - в мобильном блоке
   responsive.css.

   Базовое правило живет здесь, а не рядом с тем включением: в конце
   responsive.css оно шло ПОСЛЕ медиазапроса и при равной специфичности
   перекрывало его собственным display: none. Подсказка не появлялась
   нигде и никогда. */
.swipe-hint {
  display: none;
  margin-top: var(--s4);
  font-size: 12.5px;
  letter-spacing: .06em;
  color: var(--stone);
}

/* ==========================================================
   ГЕРОЙ
   ========================================================== */

/* Первый экран - это кадр, а не блок с кадром сбоку. Высота от вида,
   но с потолком: на большом мониторе экран во всю высоту растягивает
   текстовый блок и разводит заголовок с кнопками на расстояние, где
   они перестают читаться как одно целое. */
/* Экран выше прежнего: cover обрезает кадр тем сильнее, чем сильнее
   пропорция экрана расходится с пропорцией снимка. У снимка 1.34,
   у прежних 820px на широком мониторе выходило 1.77 - четверть кадра
   уходила за верхний и нижний край. На 940px расхождение вдвое
   меньше, и в кадре остается почти все. */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(94svh, 940px);
  padding-top: clamp(104px, 11vw, 152px);
  padding-bottom: clamp(48px, 5vw, 84px);
  overflow: hidden;
  isolation: isolate;
}

.hero-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

/* По вертикали кадр держится за здание: оно занимает середину снимка,
   а над ним остается небо с солнцем у горизонта. Сдвиг выше срезал бы
   двор, ниже - закат, ради которого кадр и вечерний. */
.hero-media picture,
.hero-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Кадр показан почти как есть. Прежнее затемнение слева гасило лес
   на .96 и превращало его в плоское пятно; здесь оно ослаблено втрое
   и держится ровно на той границе, где текст еще читается.

   Плотность подобрана замером, а не на глаз. На чистом снимке под
   заголовком попадаются подсвеченные закатом кроны яркостью до 255:
   белая буква давала на них 2.6:1 - вдвое ниже нормы даже для
   крупного кегля. Слои .48 и .40 опускают эти пики до 133 и 76,
   и контраст выходит 3.4:1 у заголовка и 4.9:1 у лида. Текстура крон
   остается видна: гасится блик, а не лес.

   Гаснет слой к середине экрана: справа стоит здание, там на кадре
   ничего не лежит и гасить нечего. Верхняя полоска отдельная -
   шапка лежит прямо на кронах. */
.hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 9, 6, .5) 0%, rgba(10, 9, 6, 0) 18%),
    linear-gradient(to right,
      rgba(10, 9, 6, .55) 0%,
      rgba(10, 9, 6, .47) 28%,
      rgba(10, 9, 6, .2) 48%,
      rgba(10, 9, 6, 0) 66%);
}

/* Текст занимает левую часть вида. Правая половина намеренно пуста:
   там стоит здание, и любой элемент поверх него спорил бы с кадром. */
.hero-inner {
  width: 100%;
}

/* Ширину держат сами абзацы, а не общая обертка: под общим потолком
   пара кнопок не помещалась в строку и вставала в столбик, хотя места
   в затемненной зоне хватало с запасом. Кнопка - не текст, и мерить
   ее знаками строки незачем, поэтому у ряда кнопок потолок свой
   и шире. Заходить правым краем на здание ему не мешает: заливка
   непрозрачная, и кнопка читается на любом фоне. */
.hero-copy { max-width: none; }

.hero-copy .kicker,
.hero-copy h1,
.hero-copy .lede,
.hero-copy .note,
.hero-price { max-width: min(58ch, 62%); }

.hero-actions { max-width: 72%; }

/* Черта под заголовком. Весь блок лежит на фотографии, и пустая
   строка там читается как часть кадра, а не как отбивка. */
.hero-rule {
  display: block;
  width: 64px;
  height: 1px;
  margin-top: var(--s6);
  background: var(--gold);
}

/* Потолок кегля ниже общего для h1: заголовок занимает левую часть
   вида, а не всю ширину страницы. На общих 82px "у озера Балатон"
   выходило за затемненную зону, и вторая строка ложилась на кроны. */
.hero-copy h1 {
  margin-block: var(--s5) 0;
  font-size: clamp(34px, 4.1vw, 60px);
}

.hero-copy .lede {
  margin-top: var(--s5);
  max-width: 38ch;
}

/* Сноска светлее общей: она лежит на фотографии, а не на ровном фоне.
   На обычных .60 самые светлые кроны под ней давали 4.4:1 - чуть ниже
   нормы. Поднято здесь, а не затемнением кадра: гасить снимок ради
   одной строки дороже, чем добавить строке яркости. */
.hero-copy .note {
  margin-top: var(--s3);
  max-width: 40ch;
  color: rgba(254, 252, 250, .72);
}

/* -- Цена входа --
   Единственное число первого экрана. Внутри лида оно было рядовым
   фактом в ряду прочих, хотя страницу открывают ради него: здесь
   подводка набрана текстом, а сама цена - дисплейным шрифтом
   в размер подзаголовка. */
.hero-price {
  margin-top: var(--s6);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-price-label {
  font-size: var(--t-md);
  line-height: 1.5;
  color: var(--on-void);
}

/* Переносится, а не держится одной строкой. В русской версии здесь
   стояло "от 1 950 €/м²" - четыре слова, которые разрывать нельзя,
   отсюда и был nowrap. Английская подводка длиннее втрое, и запрет
   переноса на узком экране выталкивал её за край вместо того,
   чтобы уронить на вторую строку. */
.hero-price-value {
  font-family: var(--display);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  text-wrap: balance;
  color: var(--gold);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  margin-top: var(--s7);
}

/* Стрелка на главной кнопке отделена чертой во всю высоту подписи.
   Только здесь: это единственная кнопка страницы, у которой есть
   и длинная подпись, и знак направления - без черты они читаются
   как одна строка, где стрелка притворяется словом. */
.hero-actions .btn:not(.btn-line) {
  position: relative;
  padding-right: calc(var(--s7) + 30px);
}

.hero-actions .btn:not(.btn-line) svg {
  position: absolute;
  right: var(--s5);
}

.hero-actions .btn:not(.btn-line)::after {
  content: '';
  position: absolute;
  right: calc(var(--s5) + 28px);
  top: 14px;
  bottom: 14px;
  width: 1px;
  background: rgba(10, 9, 6, .26);
}

/* -- Полоса отличий --
   Пять пунктов строкой с разделителями, а не карточками: карточка
   обещает содержание, которого в двух строках нет, а пять одинаковых
   карточек подряд читаются как шаблон. Разделитель в один пиксель
   делает ту же работу - разводит пункты - и ничего не обещает. */
.hero-features {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--rule-void2);
  border-bottom: 1px solid var(--rule-void2);
}

.hero-feature {
  padding: clamp(24px, 2.6vw, 36px) clamp(14px, 1.5vw, 26px);
  border-left: 1px solid var(--rule-void2);
}

/* Крайние пункты выравниваются по полю страницы, а не по своему
   внутреннему отступу: иначе полоса кажется вставленной криво. */
.hero-feature:first-child { border-left: none; padding-left: 0; }
.hero-feature:last-child { padding-right: 0; }

.hero-feature svg {
  width: 26px;
  height: 26px;
  margin-bottom: var(--s4);
  color: var(--gold);
}

.hero-feature h3 {
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.008em;
  color: var(--ivory);
}

.hero-feature p {
  margin-top: var(--s2);
  font-size: var(--t-note);
  line-height: 1.55;
  color: var(--on-void-soft);
}

/* ==========================================================
   О ПРОЕКТЕ - разворот сразу за первым экраном
   ========================================================== */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
}

.about-media .shot {
  aspect-ratio: 5 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
}

.about-media .shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy .kicker { margin-bottom: var(--s4); }

/* Кегль ниже общего для h2: заголовок делит строку с кадром, и на общих
   58px фраза рассыпалась на четыре строки - столбик слов вместо
   заголовка. */
.about-copy h2 {
  max-width: 20ch;
  font-size: clamp(28px, 3.3vw, 46px);
}
.about-copy .lede { margin-top: var(--s5); max-width: 44ch; }
.about-copy .note { margin-top: var(--s4); }


/* -- Метрики --
   Полоса цифр под блоком о проекте. Разделители те же, что у полосы
   отличий: обе полосы - один прием, и разная их отбивка читалась бы
   как разные по смыслу элементы. */
.hero-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-block: clamp(28px, 3vw, 44px);
  border-top: 1px solid var(--rule-void2);
}

.hero-metrics .metric {
  padding-inline: clamp(14px, 1.5vw, 26px);
  border-left: 1px solid var(--rule-void2);
}

.hero-metrics .metric:first-child { border-left: none; padding-left: 0; }
.hero-metrics .metric:last-child { padding-right: 0; }

.metric .figure { display: block; }

/* Цифры полосы набраны золотом и заметно мельче общей шкалы .figure.
   Белым и в полный кегль они спорили с заголовками секций вокруг,
   хотя полоса - это сводка, а не раздел: ее читают одним движением
   глаз и идут дальше. Золото при этом связывает четыре числа в один
   ряд крепче любой рамки. */
.hero-metrics .figure {
  font-size: clamp(25px, 2.5vw, 34px);
  letter-spacing: -.02em;
  color: var(--gold);
}

/* Единица не переносится: "€/м²" разрывалось на "€/" и "м²",
   и вторая половина уезжала на свою строку под цифрой. */
.metric .figure small {
  font-family: var(--sans);
  font-size: .42em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: .25em;
  white-space: nowrap;
  color: var(--on-void-soft);
}

.hero-metrics .figure small { color: var(--gold); opacity: .78; }

.metric-label {
  margin-top: var(--s2);
  font-size: var(--t-cap);
  line-height: 1.5;
  color: var(--on-void-soft);
}

/* Подпись под цифрой - заглавными с трекингом: в один ряд с крупным
   числом строчной набор читается как оборванное предложение, а капсом
   он становится ярлыком к числу. Кегль ниже общей мелкой шкалы -
   подпись объясняет цифру, а не соперничает с ней.

   Цвет не уходит в stone, хотя визуально просится: на 10 пикселях
   он дает 3.4:1, и подпись перестает читаться при боковом свете.
   Отступает она за счет кегля и трекинга, а не за счет контраста. */
.hero-metrics .metric-label {
  margin-top: var(--s3);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-void-soft);
}

/* ==========================================================
   ДОВЕРИЕ
   ========================================================== */

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.trust-item { padding-top: var(--s5); border-top: 1px solid var(--rule); }

.trust-num {
  display: block;
  font-family: var(--display);
  font-size: 15px;
  color: var(--gold-deep);
  margin-bottom: var(--s4);
}

.trust-item h3 { margin-bottom: var(--s3); }

.trust-item p { font-size: var(--t-md); color: var(--ink-60); }

/* ==========================================================
   ВОЗМОЖНОСТЬ ВХОДА
   ========================================================== */

.opp-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: center;
}

.opp-copy h2 { margin-bottom: var(--s5); }
.opp-copy p + p { margin-top: var(--s4); }

/* Короткая вертикальная лестница цены: старт - развитие - ориентир */
.step-line {
  margin-top: var(--s7);
  padding: var(--pad-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--ivory);
}

.step-line li { display: grid; gap: 2px; }

.step-line .figure {
  font-size: clamp(28px, 3vw, 38px);
  color: var(--umber);
}

.step-line li span {
  font-size: var(--t-cap);
  letter-spacing: .04em;
  color: var(--ink-60);
}

.step-arrow {
  display: block;
  width: 1px;
  height: 26px;
  margin: var(--s4) 0 var(--s4) 6px;
  background: linear-gradient(to bottom, var(--gold-deep), rgba(71, 80, 42, .15));
}

.step-mid {
  font-size: var(--t-note);
  font-weight: 500;
  color: var(--gold-deep);
}

.step-line + .disclaim { margin-top: var(--s5); }
.step-line + .disclaim strong { color: var(--umber); font-weight: 600; }

/* ==========================================================
   КАК ЭТО РАБОТАЕТ
   ========================================================== */

.how-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  counter-reset: how;
}

.how-step {
  position: relative;
  padding-top: var(--s6);
  border-top: 1px solid var(--rule-void2);
  counter-increment: how;
}

.on-light .how-step { border-top-color: var(--rule); }

.how-step::before {
  content: counter(how, decimal-leading-zero);
  display: block;
  margin-bottom: var(--s5);
  font-family: var(--display);
  font-size: 14px;
  color: var(--gold);
}

.on-light .how-step::before { color: var(--gold-deep); }

.how-step h3 { margin-bottom: var(--s3); }
.how-step p { font-size: var(--t-md); }

/* ==========================================================
   ПРОЕКТ - редакционная сетка
   ========================================================== */

.proj-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 32px);
}

/* Кадр тянется по высоте текстовой колонки и лежит абсолютом внутри
   своей. Тот же прием, что в блоке региона, и по той же причине:
   в собственной пропорции 3:4 он выступал и выше, и ниже текста,
   а высота текста зависит от его длины - фиксированная пропорция
   совпала бы с ней только на одной ширине экрана.

   Абсолют обязателен. Пока кадр в потоке, он сам задает высоту строки
   сетки, а потом тянется по ней же: высоту определяет он, а не текст,
   и выравнивание не наступает никогда.

   align-self у текста снят: он центрировал колонку внутри строки,
   которую сам же и задавал, - при выровненных краях это лишнее. */
.proj-main {
  grid-column: 1 / 7;
  position: relative;
  min-height: 420px;
}

.proj-main > .shot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* Обрезка снизу: вверху кадра корпус и кроны, внизу - мощение,
   которое ничего не добавляет. */
.proj-main > .shot img { object-position: 50% 38%; }

.proj-side { grid-column: 8 / 13; }

.proj-side h2 { margin-bottom: var(--s5); }
.proj-side p + p { margin-top: var(--s4); }

.proj-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
  margin-top: var(--s7);
  padding-top: var(--s6);
  border-top: 1px solid var(--rule-void2);
}

.proj-facts dt {
  font-size: var(--t-meta);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 6px;
}

.proj-facts dd {
  font-family: var(--display);
  font-size: 19px;
  color: var(--ivory);
}

/* Лента визуализаций - тот же прием, что у интерьеров в блоке
   апартаментов. Сеткой из шести кадров она была на широком экране,
   и это была другая механика на том же материале: часть кадров
   показывалась молча, а на телефоне те же кадры ехали лентой.
   Один прием на весь сайт - и кадров видно больше, чем помещается
   в ряд, без второго ряда высотой в экран.

   Лента выходит за поля страницы: движение не должно начинаться
   и кончаться внутри колонки текста. Края растворяются маской -
   без нее кадры обрубаются ровной линией и лента читается подрезанной
   сеткой, а не движением. */
.proj-strip {
  position: relative;
  margin-top: clamp(32px, 4vw, 64px);
  margin-inline: calc(var(--pad) * -1);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* Сдвиг ровно на треть - длину одной копии набора. Отступ висит
   на самих кадрах, а не в gap: с gap последний отступ в копии
   выпадает, длина перестает быть точной третью, и на перезапуске
   лента дергается. */
.proj-track {
  display: flex;
  width: max-content;
  animation: proj-run 46s linear infinite;
  will-change: transform;
}

/* Кадры крупнее, чем у интерьеров: это общие планы, и на 300 пикселях
   от корпуса остается силуэт. Скорость подобрана под их ширину -
   лента идет примерно те же 50 пикселей в секунду. */
.proj-track > .shot {
  flex: 0 0 clamp(280px, 26vw, 420px);
  margin-right: clamp(16px, 2vw, 32px);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
}

/* Планировки - на светлой подложке, иначе чертеж не читается */
.plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 44px);
  margin-top: clamp(48px, 5vw, 88px);
}

.plan-card {
  padding: var(--pad-card);
  border-radius: var(--r-lg);
  background: var(--ivory);
}

.plan-card img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
}

.plan-floor-img {
  max-width: 480px;
  margin-inline: auto;
}

.plan-card h3 { margin-bottom: var(--s5); color: var(--ink); }
.plan-card .cap { color: var(--ink-60); }

/* Чертежи стоят в светлой полосе апартаментов, где заливка ivory
   совпадает с фоном секции: карточке нужна вторая подложка и рамка,
   иначе она растворяется, а чертеж повисает в воздухе. */
.on-light .plan-card {
  background: var(--ivory-2);
  box-shadow: inset 0 0 0 1px var(--rule-soft);
}

/* Над карточками, а не под ними: сначала устройство этажа, потом цены. */
.plans-lead {
  margin-top: 0;
  margin-bottom: clamp(40px, 4.5vw, 72px);
}

/* ==========================================================
   АПАРТАМЕНТЫ
   ========================================================== */

.units {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

/* Семь карточек не делятся ни на два, ни на три - последняя в любой
   раскладке остается одна в ряду. Пентхаус разворачивается во всю ширину
   и ложится горизонтально: это убирает дыру в сетке и заодно читается
   как выделение верхнего типа, а не как остаток. */
.units > .unit-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: stretch;
}

/* aspect-ratio у кадра снимается: в горизонтальной карточке высоту
   задает текстовая колонка, и своя пропорция кадру только мешает. */
.units > .unit-card:last-child:nth-child(odd) > .shot {
  flex: 0 0 44%;
  aspect-ratio: auto;
  min-height: 300px;
}

.units > .unit-card:last-child:nth-child(odd) > .unit-body {
  flex: 1 1 auto;
  align-self: center;
}

.unit-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--ivory);
  transition: box-shadow .5s var(--out-quart), transform .5s var(--out-quart);
}

.unit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 60px rgba(10, 9, 6, .1);
}

.unit-card .shot { border-radius: 0; }

.unit-body { padding: var(--pad-card); }

/* Заголовок и площадь стояли в строку через space-between. С двумя
   типами это работало: "Студия" и "26,95 м²" помещались рядом. С семью
   не работает - "Квартиры с террасой на втором этаже" рядом с подписью
   сжимается до колонки в одно слово, а сама подпись с nowrap уезжает
   за карточку. Заголовок забирает всю строку, площадь встает под ним. */
.unit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--rule);
}

.unit-head h3 { flex: 1 1 100%; }

.unit-head h3 { color: var(--ink); }

.unit-area {
  font-family: var(--display);
  font-size: 22px;
  color: var(--umber);
  white-space: nowrap;
}

/* Поле, которое ждет площадей от застройщика. Набрано как метка, а не
   как цифра: "Площадь уточняется" крупным золотым шрифтом на месте
   числа читается как значение, которого нет. Та же система, что
   у .loc-list dd.tbd. */
.unit-area.is-tbd {
  font-family: var(--sans);
  font-size: var(--t-meta);
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-60);
  white-space: normal;
}

.unit-specs { margin-top: var(--s5); }

.unit-specs div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  padding-block: 9px;
  font-size: var(--t-sm);
}

.unit-specs div + div { border-top: 1px solid var(--rule-soft); }

.unit-specs dt { color: var(--ink-60); }
.unit-specs dd { text-align: right; color: var(--ink); font-weight: 500; }

.unit-price {
  margin-top: var(--s5);
  padding-top: var(--s5);
  border-top: 1px solid var(--rule);
}

.unit-price .figure {
  font-size: clamp(26px, 2.6vw, 34px);
  color: var(--umber);
}

/* Пояснение, откуда взялась сумма. Без него цифра выглядит
   как утвержденный прайс, которого у нас нет. */
.unit-price .note { margin-top: 6px; font-size: var(--t-cap); }

.unit-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: rgba(71, 80, 42, .1);
  font-size: var(--t-meta);
  letter-spacing: .05em;
  color: var(--umber);
}

/* Примечание отделено заливкой и рамкой по всему контуру, а не цветной
   полосой слева: полоса-акцент у края карточки - прием, который на
   странице больше нигде не работает, и одиночным появлением он читается
   как чужая деталь, а не как система. */
.units-note {
  margin-top: var(--s7);
  padding: var(--pad-card);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--ivory-2);
  font-size: var(--t-sm);
  line-height: 1.7;
  color: var(--ink-60);
  max-width: 74ch;
}

/* Интерьеры - лента под карточками, которая едет сама.
   Кадров всего четыре, поэтому в разметке они повторены трижды:
   лента должна быть шире экрана, иначе на перезапуске виден стык. */
.int-strip {
  position: relative;
  margin-top: clamp(32px, 4vw, 56px);
  overflow: hidden;

  /* Края растворяются. Без этого кадры обрубаются ровной линией
     и лента читается как подрезанная сетка, а не как движение. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

/* Скорость подобрана по пути кадра, а не по числу секунд: за 26s одна
   копия набора проходит примерно 50px в секунду. На узком экране кадры
   уже, копия короче, поэтому там длительность своя (см. responsive.css) -
   при общей на обоих экранах лента шла бы с разной скоростью. */
.int-track {
  display: flex;
  width: max-content;
  animation: int-run 26s linear infinite;
  will-change: transform;
}

/* Отступ держим на самих кадрах, а не через gap: сдвиг анимации
   считается в процентах от ширины ленты, и он совпадет с длиной
   одной копии только если каждый кадр занимает ровно "кадр + отступ".
   С gap последний отступ в копии выпадает, и лента дергается. */
.int-track > .shot {
  flex: 0 0 clamp(210px, 22vw, 300px);
  margin: 0 clamp(14px, 1.6vw, 24px) 0 0;
}

/* Под курсором лента останавливается: рассмотреть кадр важнее,
   чем не прерывать движение. */
.int-strip:hover .int-track,
.int-strip:focus-within .int-track { animation-play-state: paused; }

/* Кадр открывается во весь экран, и это должно быть видно до нажатия.
   У планировок курсор стоит на самой картинке, здесь - на фигуре:
   нажатие обрабатывает она. */
.int-track > .shot { cursor: zoom-in; }

@keyframes int-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* Та же механика у ленты визуализаций проекта - она включается только
   на телефоне, см. responsive.css. Кадр там сдвигается на треть ленты,
   то есть ровно на длину одной копии набора. */
@keyframes proj-run {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-33.3333%, 0, 0); }
}

/* Движение выключено настройкой системы - лента становится обычной
   полосой, которую листают рукой. Иначе видны только первые кадры. */
@media (prefers-reduced-motion: reduce) {
  .int-strip,
  .proj-strip {
    overflow-x: auto;
    -webkit-mask-image: none;
    mask-image: none;
    scrollbar-width: none;
  }

  .int-strip::-webkit-scrollbar,
  .proj-strip::-webkit-scrollbar { display: none; }

  .int-track,
  .proj-track { animation: none; }
}

/* ==========================================================
   ЛОКАЦИЯ
   ========================================================== */

.loc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .78fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: start;
}

.loc-copy h2 { margin-bottom: var(--s5); }

.loc-list { margin-top: var(--s7); }

.loc-list div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: var(--s4);
  border-top: 1px solid var(--rule-void2);
}

.loc-list dt { font-size: var(--t-md); color: var(--on-void); }

.loc-list dd {
  font-family: var(--display);
  font-size: 17px;
  color: var(--gold);
  text-align: right;
  white-space: nowrap;
}

/* Поле, которое ждет данных от застройщика. Показываем это
   явно, а не подставляем правдоподобное число. */
.loc-list dd.tbd {
  font-family: var(--sans);
  font-size: var(--t-note);
  letter-spacing: .04em;
  color: var(--stone);
  white-space: normal;
}

.loc-media { display: grid; gap: clamp(14px, 1.6vw, 24px); }

/* Подзаголовок на странице локации: над блоком уже стоит h1 раздела,
   и второй крупный заголовок о том же читался бы как сбой верстки. */
.loc-sub {
  font-size: clamp(24px, 2.4vw, 34px);
  margin-bottom: var(--s4);
}

/* В коротком блоке кадр один и тянется по высоте текста - иначе справа
   от трех аргументов и кнопки остается пустая половина колонки.
   Абсолют по той же причине, что и в блоке проекта: в потоке кадр сам
   задает высоту строки, а потом тянется по ней же.

   align-items у сетки переключается на stretch: со start колонка
   с кадром не растягивается по строке, и тянуться внутри нее нечему. */
.band-tight .loc-grid { align-items: stretch; }

.band-tight .loc-media {
  position: relative;
  min-height: 380px;
}

.band-tight .loc-media > .shot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

/* -- Три аргумента в коротком блоке --
   Списком, а не таблицей "признак - значение": таблица читается как
   справка, которую можно пролистать, а здесь три причины выбрать место.
   Линия сверху у каждого пункта - та же система, что у полосы отличий
   на первом экране. */
.loc-points {
  display: grid;
  gap: var(--s2);
  margin-top: var(--s6);
}

.loc-points li {
  display: grid;
  gap: 2px;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-void2);
}

.loc-points b {
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ivory);
}

.loc-points span {
  font-size: var(--t-note);
  line-height: 1.55;
  color: var(--on-void-soft);
}

.loc-cta { margin-top: var(--s6); }

/* Время в пути. Единственные измеримые числа секции стоят карточками
   над списком фактов: в общем ряду с качественными формулировками
   ("через дорогу", "раз в час") они бы потеряли вес. */
.times {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: var(--s6);
}

.time-card {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--pad-card-sm);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-md);
  background: var(--void-2);
}

/* flex: none обязателен - иначе длинная подпись сжимает кружок с иконкой
   в овал, и два соседних кружка получаются разной ширины. */
.time-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--r-pill);
  background: rgba(212, 182, 120, .1);
  color: var(--gold);
}

.time-icon svg { width: 22px; height: 22px; }

.time-body { display: grid; gap: 2px; }

.time-body b {
  font-family: var(--display);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.15;
  color: var(--ivory);
}

.time-body span { font-size: var(--t-note); line-height: 1.4; color: var(--on-void-soft); }

/* ---- Состав экопарка ----
   Иконки, а не фотокарточки: рендеров территории нет, и подставлять
   под бассейн или дорожки чужой кадр было бы враньем в картинке. */

.amen-head {
  margin-top: clamp(48px, 5vw, 88px);
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--rule-void2);
}

.amen-head .lede { margin-top: var(--s4); }

/* auto-fit, а не фиксированное число колонок: пунктов пятнадцать,
   и любой добавленный или убранный пункт не должен ломать сетку.
   206px дал бы четыре колонки и висящий хвост из трех карточек. */
.amenities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(20px, 2.4vw, 36px);
  margin-top: clamp(28px, 3vw, 44px);
}

.amenity {
  display: grid;
  gap: var(--s2);
  align-content: start;
  padding-top: var(--s4);
  border-top: 1px solid var(--rule-void2);
}

.amenity-icon { color: var(--gold); margin-bottom: var(--s2); }
.amenity-icon svg { width: 26px; height: 26px; }

.amenity-title { font-size: var(--t-md); font-weight: 600; color: var(--ivory); }
.amenity-note { font-size: var(--t-note); line-height: 1.55; color: var(--on-void-soft); }

.amen-notes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: clamp(32px, 3.5vw, 56px);
}

.amen-note {
  padding: var(--pad-card);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-md);
  background: var(--void-2);
}

.amen-note h4 { margin-bottom: var(--s3); color: var(--ivory); }
.amen-note p { font-size: var(--t-sm); color: var(--on-void-soft); }

.infra-head {
  margin-top: clamp(48px, 5vw, 88px);
  padding-top: clamp(40px, 4vw, 64px);
  border-top: 1px solid var(--rule-void2);
}

.infra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
  margin-top: clamp(28px, 3vw, 44px);
}

.infra-item { display: grid; gap: var(--s4); align-content: start; }
.infra-item h3 { font-size: 19px; }
.infra-item p { font-size: var(--t-sm); }
.infra-item .shot { margin-bottom: var(--s2); }

/* ==========================================================
   ПОЧЕМУ БАЛАТОН
   ========================================================== */

.bal-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: stretch;
}

/* Крупный кадр тянется по высоте соседней колонки, а не стоит в своей
   пропорции. В пропорции 3:4 он выступал заметно ниже пары миниатюр
   справа, и низ секции получал ступеньку в треть кадра.

   Тянуть, а не задавать пропорцию, - потому что высота правой колонки
   зависит от длины текста: любая фиксированная пропорция совпала бы
   с ней только на одной ширине экрана.

   Обрезка идет сверху: внизу кадра газон и люди, ради которых он
   и выбран, а вверху - небо и верх корпуса, который на этой странице
   показан уже трижды. */
/* Кадр лежит абсолютом внутри своей колонки. Простого height: 100%
   не хватает: пока кадр остается в потоке, он сам задает высоту строки
   сетки, а потом тянется по ней же - высота определяется им, а не
   соседней колонкой, и выравнивание не наступает никогда.
   Вынутый из потока, он высоту строки не задает, и ее задает текст. */
.bal-hero > .reveal:first-child {
  position: relative;
  min-height: 380px;
}

.bal-hero > .reveal:first-child > .shot {
  position: absolute;
  inset: 0;
  aspect-ratio: auto;
}

.bal-hero > .reveal:first-child > .shot img { object-position: 50% 62%; }

.bal-copy h2 { margin-bottom: var(--s5); }
.bal-copy p + p { margin-top: var(--s4); }

.bal-args {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
  margin-top: clamp(48px, 5vw, 88px);
}

.bal-thumbs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 24px);
  margin-top: var(--s6);
}

.bal-arg {
  display: grid;
  gap: var(--s4);
  align-content: start;
  padding-top: var(--s5);
  border-top: 1px solid var(--rule-void2);
}

.on-light .bal-arg { border-top-color: var(--rule); }

.bal-arg h3 { font-size: 19px; }
.bal-arg p { font-size: var(--t-md); }

/* ==========================================================
   ИНВЕСТИЦИОННЫЙ СЦЕНАРИЙ
   ========================================================== */

/* ==========================================================
   ГОТОВНОСТЬ ОБЪЕКТА
   Две колонки: слева процент словами, справа сама шкала. Друг под
   другом число и его изображение читаются как два разных сообщения,
   рядом - как одно.
   ========================================================== */

.ready-inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 72px);
  align-items: center;
}

.ready-head h2 { margin-top: var(--s3); }

.ready-body { display: grid; gap: var(--s5); }

.ready-track {
  position: relative;
  height: 10px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .07);
  overflow: hidden;
}

.ready-fill {
  display: block;
  height: 100%;
  width: var(--p, 0%);
  border-radius: inherit;
  background-image: var(--gold-plate);
}

.ready-meta { display: grid; gap: 5px; }

.ready-meta strong {
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 24px);
  color: var(--gold);
}

.ready-meta span { font-size: var(--t-meta); color: var(--on-void-soft); }

/* Заполнение едет от нуля, когда блок попадает в вид: шкала, которая
   уже отрисована полной, не читается как измерение. Задержка небольшая -
   счетчик в заголовке стартует одновременно, и они идут вместе. */
@media (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  .ready-inner .ready-fill { width: 0; transition: width 1.4s var(--out-expo) .15s; }
  .ready-inner.in .ready-fill { width: var(--p, 0%); }
}


/* ==========================================================
   ОТЗЫВЫ
   ========================================================== */

.rev-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.4vw, 40px);
}

.rev-card {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--pad-card);
}

.rev-card blockquote {
  font-size: 17px;
  line-height: 1.7;
  color: var(--on-void);
}

.rev-who {
  margin-top: auto;
  padding-top: var(--s5);
  border-top: 1px solid var(--glass-line);
}

.rev-who b {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 17px;
  color: var(--ivory);
}

.rev-who span { font-size: var(--t-cap); color: var(--on-void-soft); }

/* ==========================================================
   ЖУРНАЛ
   ========================================================== */

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

.post-card {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
}

.post-card .shot { flex: none; }

.post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
}

/* Карточка живет и на светлой, и на темной полосе, поэтому базовые
   цвета взяты для темного фона, а светлый вариант переопределяется. */
.post-meta b { font-weight: 500; color: var(--gold); }
.post-meta i { font-style: normal; opacity: .5; }

.on-light .post-meta { color: var(--stone); }
.on-light .post-meta b { color: var(--gold-deep); }

.post-card h3 {
  font-size: 21px;
  line-height: 1.28;
  transition: color .3s ease;
}

.post-card:hover h3 { color: var(--gold); }
.on-light .post-card:hover h3 { color: var(--gold-deep); }

.post-card p { font-size: var(--t-md); color: var(--on-void-soft); }
.on-light .post-card p { color: var(--ink-60); }

.post-card .link { margin-top: auto; }

/* Скрытые статьи раскрываются кнопкой - на первом экране
   журнала показываем три, остальное по запросу. */
.posts-more { display: none; margin-top: clamp(20px, 2.6vw, 40px); }
.posts-more.open { display: grid; }

/* Без скриптов кнопка не сработает, поэтому там показываем все статьи
   сразу, а саму кнопку убираем - иначе она обманывает. */
@media (scripting: none) {
  .posts-more { display: grid; }
  .more-row { display: none; }
}

.more-row { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }

/* ==========================================================
   ВОПРОСЫ
   ========================================================== */

.faq { border-top: 1px solid var(--rule-void2); }

/* Остаток вопросов. Своей верхней границы у него нет: ее рисует нижняя
   граница последнего видимого вопроса, а вторая линия рядом читалась бы
   как шов между двумя разными списками. */
.faq-more {
  display: none;
  border-top: none;
}

.faq-more.open { display: block; }

/* Без скриптов кнопка не сработает, поэтому там показываем все вопросы
   сразу, а саму кнопку убираем - иначе она обманывает. */
@media (scripting: none) {
  .faq-more { display: block; }
  .faq + .more-row { display: none; }
}

.faq-item { border-bottom: 1px solid var(--rule-void2); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: clamp(22px, 2.4vw, 32px);
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.35;
  color: var(--ivory);
  transition: color .3s ease;
}

.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--gold); }

.faq-sign {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 4px;
}

.faq-sign::before,
.faq-sign::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transition: transform .45s var(--out-quart);
}

.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0); }

.faq-answer { padding-bottom: clamp(22px, 2.4vw, 32px); }

.faq-answer p {
  max-width: 72ch;
  font-size: 16px;
  color: var(--on-void);
}

.faq-answer p + p { margin-top: var(--s4); }

@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer { animation: faq-in .5s var(--out-quart); }
}

@keyframes faq-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

/* ==========================================================
   ДОКУМЕНТЫ
   ========================================================== */

.docs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 32px);
}

.doc {
  display: grid;
  gap: var(--s3);
  padding: var(--pad-card-sm);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-md);
  background: var(--void-2);
}

.doc h3 { font-size: 17px; }
.doc p { font-size: var(--t-note); }

.doc-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: var(--s2);
  font-size: var(--t-meta);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--on-void-soft);
}

.doc-state::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--stone);
}

/* Единственное применение зеленого на сайте: документ готов. */
.doc-ready .doc-state { color: var(--moss); }
.doc-ready .doc-state::before { background: var(--moss); }

.docs-foot {
  display: grid;
  justify-items: start;
  gap: var(--s5);
  margin-top: clamp(32px, 3.4vw, 48px);
}

/* ==========================================================
   ШКАЛА ВХОДА

   Заменила собой и лестницу цен, и калькулятор: обе секции считали
   в евро, а на этом сайте цен нет вовсе.

   Собрана одной карточкой с обводкой, а не полосой во всю ширину:
   внутри нее принимают решение, и она должна читаться как инструмент,
   к которому можно вернуться, а не как очередной раздел текста.
   ========================================================== */

.escale-box {
  margin-top: clamp(28px, 3.4vw, 48px);
  padding: clamp(24px, 3vw, 44px);
  border: 1px solid var(--rule-void);
  border-radius: var(--r-lg);
  background: var(--void);
}

/* -- Три числа --
   Порядок читается как предложение: вкладываете столько, сверху
   примерно столько, обратно примерно столько. Сетка на три равные
   колонки, а не flex: числа разной длины ("100%" и "+100%"), и при
   flex они разъезжались бы по ширине вслед за содержимым. */
.escale-figs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.5vw, 40px);
  margin: 0 0 clamp(28px, 3.4vw, 48px);
}

.escale-figs > div { min-width: 0; }

.escale-figs dt {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-void-soft);
}

.escale-figs dd { margin: var(--s3) 0 0; }

.escale-figs .figure {
  display: block;
  font-family: var(--display);
  font-size: clamp(30px, 5vw, 52px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ivory);
}

/* Средняя цифра золотом: она единственная, которую двигает ползунок,
   и ради нее блок открывают. Две соседние держат контекст, но спорить
   с ней за внимание не должны. */
.escale-fig-hi .figure { color: var(--gold); }

/* Знак приблизительности набран мельче самого числа и приглушен:
   он обязателен по смыслу, но читаться должен как оговорка, а не
   как часть значения. */
.escale-approx {
  font-size: .5em;
  vertical-align: .32em;
  margin-right: .1em;
  color: var(--stone);
}

/* -- Ползунок -- */

.escale-control { margin-bottom: clamp(24px, 3vw, 40px); }

.escale-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s4);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--on-void-soft);
  cursor: pointer;
}

/* Выбранная дата подписана у самой метки, а не под ползунком: глаз
   уже там, когда читает, чем управляет. */
.escale-label b {
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gold);
  white-space: nowrap;
}

/* Нативный range, а не сборка из div: он умеет клавиатуру, шаг,
   и его знает любая программа чтения с экрана. Красим только дорожку
   и бегунок. */
.escale-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 34px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.escale-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--rule-void);
}

.escale-range::-moz-range-track {
  height: 3px;
  border-radius: var(--r-pill);
  background: var(--rule-void);
}

.escale-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9.5px;
  border: none;
  border-radius: var(--r-pill);
  background-color: var(--gold);
  background-image: var(--gold-plate);
  background-size: 220% 100%;
  background-position: 26% 50%;
  box-shadow: 0 0 0 4px rgba(10, 9, 6, .6), 0 6px 16px rgba(10, 9, 6, .5);
  transition: transform .3s var(--out-quart);
}

.escale-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--r-pill);
  background-color: var(--gold);
  background-image: var(--gold-plate);
  background-size: 220% 100%;
  background-position: 26% 50%;
  box-shadow: 0 0 0 4px rgba(10, 9, 6, .6), 0 6px 16px rgba(10, 9, 6, .5);
}

.escale-range:active::-webkit-slider-thumb { transform: scale(1.12); }

.escale-range:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 4px;
  border-radius: var(--r-sm);
}

/* -- Деления --
   Подписаны месяцем входа: это то, ради чего ползунок и двигают. */
.escale-ticks {
  display: flex;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: 2px;
  font-size: var(--t-meta);
  font-variant-numeric: tabular-nums;
  color: var(--stone);
}

.escale-ticks li {
  flex: 1 1 0;
  text-align: center;
  transition: color .3s ease;
}

.escale-ticks li:first-child { text-align: left; }
.escale-ticks li:last-child { text-align: right; }
.escale-ticks li.is-on { color: var(--gold); }

.escale-wait {
  margin-top: var(--s4);
  font-size: var(--t-note);
  line-height: 1.5;
  color: var(--on-void-soft);
}

.escale-wait b {
  color: var(--ivory);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* -- Низ блока --
   Кнопка и оговорка стоят рядом, а не одна под другой во всю ширину:
   оговорка должна попадать в один взгляд с цифрами выше, а не уезжать
   отдельным экраном. */
.escale-foot {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(20px, 2.6vw, 40px);
  align-items: start;
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--rule-void);
}

.escale-foot .btn { justify-self: start; }
/* ==========================================================
   СХЕМА ТЕРРИТОРИИ

   Точки стоят на самом кадре, а не на нарисованном плане: рисованный
   план пришлось бы придумывать, а снимок показывает то, что построено,
   и каждую подпись на нем можно проверить глазами.
   ========================================================== */

.plot { margin-top: clamp(56px, 6vw, 96px); }

.plot-head h3 { max-width: 20ch; }
.plot-head .lede { margin-top: var(--s4); max-width: 62ch; }

.plot-body {
  display: grid;
  grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
  margin-top: clamp(28px, 3.4vw, 48px);
}

.plot-map {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
}

.plot-map img { display: block; width: 100%; height: auto; }

/* -- Точка --
   Координаты приходят из разметки переменными: они привязаны к кадру,
   а не к макету, и живут рядом с самой подписью в content.php. */
.plot-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.plot-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--r-pill);
  background-color: var(--gold);
  background-image: var(--gold-plate);
  background-size: 220% 100%;
  background-position: 26% 50%;
  color: var(--void);
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 4px rgba(10, 9, 6, .42), 0 6px 18px rgba(10, 9, 6, .5);
  transition: transform .35s var(--out-quart);
}

.plot-pin:hover .plot-num,
.plot-pin:focus-visible .plot-num,
.plot-pin.is-active .plot-num { transform: scale(1.22); }

/* -- Подпись у точки --
   Появляется только на устройстве с указателем: на телефоне она
   перекрыла бы половину кадра, и там работает легенда под ним. */
.plot-tip {
  position: absolute;
  left: 50%;
  bottom: calc(100% - 4px);
  z-index: 3;
  display: none;
  width: max-content;
  max-width: 240px;
  transform: translateX(-50%);
  padding: var(--s3) var(--s4);
  border-radius: var(--r-sm);
  background: rgba(10, 9, 6, .92);
  box-shadow: inset 0 0 0 1px var(--rule-void), 0 14px 34px rgba(10, 9, 6, .5);
  text-align: left;
  pointer-events: none;
}

.plot-tip b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-sm);
  font-weight: 600;
  color: var(--ivory);
}

.plot-tip > span {
  display: block;
  margin-top: 2px;
  font-size: var(--t-note);
  line-height: 1.45;
  color: var(--on-void-soft);
}

@media (hover: hover) {
  .plot-pin:hover .plot-tip,
  .plot-pin:focus-visible .plot-tip { display: block; }
}

/* -- Легенда --
   Не дубль ради дубля: без нее схема не работает ни с клавиатуры,
   ни на телефоне, где наведения нет вовсе. Миниатюра показывает,
   что откроется, до нажатия. */
.plot-legend { display: grid; gap: var(--s2); }

.plot-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr);
  align-items: center;
  gap: var(--s4);
  width: 100%;
  padding: var(--s2);
  border-radius: var(--r-sm);
  text-align: left;
  cursor: zoom-in;
  transition: background-color .3s ease;
}

.plot-row:hover,
.plot-row.is-active { background: var(--glass); }

/* Номер лежит на миниатюре, а не отдельной колонкой: так строка
   короче, а связь "номер - кадр - точка на схеме" остается видимой. */
.plot-thumb {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
}

.plot-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.plot-thumb .plot-num {
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 20px;
  height: 20px;
  font-size: 11px;
  box-shadow: 0 0 0 2px rgba(10, 9, 6, .55);
}

.plot-legend-body b {
  display: block;
  font-family: var(--sans);
  font-size: var(--t-md);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ivory);
}

.plot-legend-body > span {
  display: block;
  margin-top: 2px;
  font-size: var(--t-note);
  line-height: 1.5;
  color: var(--on-void-soft);
}

.plot .cap { margin-top: var(--s5); }

/* ==========================================================
   СТАРТОВЫЙ ПУЛ

   Единственный блок страницы, который говорит о сроке. Поэтому он
   собран как карточка с обводкой, а не как очередная полоса: полоса
   читается как раздел, который можно прокрутить, карточка - как
   сообщение, которое обращено к тебе.
   ========================================================== */

.offer-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .58fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 3.4vw, 52px);
  border: 1px solid rgba(212, 182, 120, .3);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(212, 182, 120, .09), transparent 58%),
    var(--void-2);
}

.offer-copy h2 {
  margin-top: var(--s4);
  font-size: clamp(26px, 3.2vw, 42px);
  max-width: 20ch;
}

.offer-copy .lede { margin-top: var(--s5); max-width: 52ch; }

/* -- Шкала пула --
   Квадраты, а не проценты: их пять, и посетитель пересчитывает их
   глазами. Процент на таком малом числе округляется до неправды. */
.offer-track {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s6);
}

.offer-cell {
  flex: 1 1 0;
  min-width: 34px;
  max-width: 72px;
  height: 10px;
  border-radius: var(--r-pill);
  background-color: var(--gold);
  background-image: var(--gold-plate);
  background-size: 220% 100%;
  background-position: 26% 50%;
}

/* Забронированный не убирается со шкалы и не гаснет до невидимости:
   он и есть доказательство, что пул расходуется. Гасим до контура. */
.offer-cell.is-taken {
  background: none;
  box-shadow: inset 0 0 0 1px var(--rule-void);
}

.offer-count {
  margin-top: var(--s4);
  font-size: var(--t-sm);
  color: var(--on-void-soft);
}

.offer-count strong { color: var(--ivory); font-weight: 600; }

.offer-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  margin-top: var(--s6);
}

.offer-note { margin-top: var(--s4); max-width: 46ch; }

.offer-media .shot {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-md);
  overflow: hidden;
}

.offer-media .shot img { width: 100%; height: 100%; object-fit: cover; }

/* Пул разобран - обводка и подсветка снимаются: держать акцент
   на предложении, которого больше нет, значит обманывать. */
.offer-done .offer-box {
  border-color: var(--rule-void2);
  background: var(--void-2);
}

/* ==========================================================
   ИНВЕСТОРУ: короткий блок на главной
   ========================================================== */

.invest-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}

.invest-copy h2 { margin-top: var(--s4); max-width: 14ch; }
.invest-copy .lede { margin-top: var(--s5); }
.invest-copy .note { margin-top: var(--s4); }
.invest-cta { margin-top: var(--s6); }

/* Три числа столбиком, а не полосой: полоса цифр на странице уже есть
   под первым экраном, и вторая такая же читалась бы как ее повтор. */
.invest-facts { display: grid; }

.invest-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s5);
  padding-block: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid var(--rule-void2);
}

.invest-facts > div:last-child { border-bottom: 1px solid var(--rule-void2); }

.invest-facts dt {
  font-size: var(--t-sm);
  line-height: 1.4;
  color: var(--on-void-soft);
  max-width: 18ch;
}

.invest-facts .figure {
  font-size: clamp(24px, 2.4vw, 34px);
  white-space: nowrap;
  color: var(--gold);
}

.invest-facts .figure small {
  font-family: var(--sans);
  font-size: .38em;
  font-weight: 500;
  letter-spacing: 0;
  margin-left: .3em;
  color: var(--on-void-soft);
}

/* ==========================================================
   ФИНАЛЬНЫЙ ПРИЗЫВ
   ========================================================== */

.final {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.final-bg { position: absolute; inset: 0; z-index: -2; }

.final-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .42;
}

.final-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 50%, rgba(10, 9, 6, .5), rgba(10, 9, 6, .93) 72%);
}

.final h2 { margin: 0 auto; max-width: 17ch; }

/* --- Мост локация → инвесторы --- */

.loc-bridge { border-top: 1px solid var(--border); }

.loc-bridge-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s7);
  flex-wrap: wrap;
}

.loc-bridge-inner h2 {
  margin: var(--s3) 0 0;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  max-width: 42ch;
}

/* --- CTA счётчик --- */

.cta-pool-count {
  margin: var(--s5) auto 0;
  font-size: var(--text-sm);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.cta-pool-count strong {
  color: var(--gold);
  font-size: var(--text-lg);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
  text-transform: none;
}

.final .lede {
  margin: var(--s6) auto 0;
  max-width: 56ch;
}

.final-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s4);
  margin-top: var(--s7);
}

/* ==========================================================
   ФОРМА
   ========================================================== */

.form-grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 88px);
  align-items: start;
}

.form-aside h2 { margin-bottom: var(--s5); }

.form-points { margin-top: var(--s7); display: grid; gap: var(--s4); }

.form-points li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s4);
  font-size: var(--t-md);
  color: var(--on-void);
}

.form-points svg { width: 18px; height: 18px; color: var(--gold); margin-top: 2px; }

.form-card {
  padding: var(--pad-card);
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-lg);
  background: var(--void-2);
}

.field { display: grid; gap: 7px; margin-bottom: var(--s5); }

.field-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

.field label {
  font-size: var(--t-cap);
  letter-spacing: .04em;
  color: var(--on-void-soft);
}

.field label .req { color: var(--alarm-lift); }

.field input,
.field textarea {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  color: var(--ivory);
  font: inherit;
  font-size: 15.5px;
  transition: border-color .3s ease, background-color .3s ease;
}

.field textarea { min-height: 104px; resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--stone); }

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(255, 255, 255, .06);
}

.field input[aria-invalid="true"] { border-color: var(--alarm-lift); }

.err {
  font-size: var(--t-cap);
  color: var(--alarm-lift);
  min-height: 0;
}

.err:empty { display: none; }

/* -- Интерес: набор переключателей -- */

.form-points-note { margin-top: var(--s6); }

.form-body fieldset {
  border: none;
  margin-bottom: var(--s5);
}

.form-body legend {
  margin-bottom: var(--s4);
  padding: 0;
  font-size: var(--t-cap);
  letter-spacing: .04em;
  color: var(--on-void-soft);
}

.interests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
}

.chip {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--rule-void2);
  border-radius: var(--r-sm);
  font-size: var(--t-sm);
  color: var(--on-void);
  cursor: pointer;
  transition: border-color .3s ease, background-color .3s ease, color .3s ease;
}

.chip input {
  appearance: none;
  width: 15px;
  height: 15px;
  flex: none;
  border: 1px solid var(--stone);
  border-radius: 50%;
  transition: border-color .3s ease, box-shadow .3s ease;
}

.chip:hover { border-color: var(--glass-line); }

.chip:has(input:checked) {
  border-color: var(--gold);
  background: rgba(212, 182, 120, .08);
  color: var(--ivory);
}

.chip input:checked {
  border-color: var(--gold);
  box-shadow: inset 0 0 0 4px var(--gold);
}

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

/* -- Согласие -- */

.consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
  margin-bottom: var(--s6);
  font-size: var(--t-note);
  line-height: 1.6;
  color: var(--on-void-soft);
  cursor: pointer;
}

.consent input {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1px solid var(--stone);
  border-radius: 4px;
  transition: background-color .25s ease, border-color .25s ease;
}

.consent input:checked {
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2 4.7 9 10 3.2' fill='none' stroke='%230A0906' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--gold);
}

.consent input:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.consent a { color: var(--on-void); text-decoration: underline; text-underline-offset: 3px; }

.form-card .btn { width: 100%; }

.form-note { margin-top: var(--s4); text-align: center; font-size: var(--t-cap); }

/* Ловушка для ботов: поле не видно и не попадает в табуляцию. */
.trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* -- Состояния отправки -- */

.form-card.sending { opacity: .6; pointer-events: none; }

.form-done {
  display: none;
  padding: clamp(32px, 4vw, 56px);
  text-align: center;
}

.form-card.done .form-body { display: none; }
.form-card.done .form-done { display: block; }

.form-done svg { width: 46px; height: 46px; color: var(--gold); margin-bottom: var(--s5); }
.form-done h3 { font-size: 24px; margin-bottom: var(--s3); }
.form-done p { font-size: var(--t-md); }

.form-alert {
  margin-bottom: var(--s5);
  padding: 14px 16px;
  border: 1px solid rgba(180, 81, 44, .5);
  border-radius: var(--r-sm);
  background: rgba(180, 81, 44, .12);
  font-size: var(--t-note);
  color: var(--alarm-lift);
}

.form-alert:empty { display: none; }

/* ==========================================================
   СТРАНИЦА СТАТЬИ
   ========================================================== */

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: var(--t-cap);
  color: var(--on-void-soft);
}

.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .45; }

/* ==========================================================
   ШАПКА РАЗДЕЛА ДЛЯ ИНВЕСТОРОВ

   Кадр с высоты на весь экран, как на главной, но ниже: это не первый
   экран сайта, а вход в раздел, и он не должен занимать столько же
   места, сколько само предложение.
   ========================================================== */

.inv-head {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(70svh, 640px);
  padding-top: clamp(132px, 13vw, 180px);
  padding-bottom: clamp(40px, 4.5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

.inv-head-media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.inv-head-media picture,
.inv-head-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* Затемнение снизу, а не слева: текст лежит по всей ширине колонки,
   и боковой градиент оставил бы правый край строки на светлом. */
.inv-head-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(10, 9, 6, .62) 0%, rgba(10, 9, 6, 0) 26%),
    linear-gradient(to top, rgba(10, 9, 6, .96) 0%, rgba(10, 9, 6, .72) 34%, rgba(10, 9, 6, .3) 70%, rgba(10, 9, 6, .12) 100%);
}

.inv-head-inner { width: 100%; }

.inv-head h1 {
  margin-block: var(--s4) 0;
  font-size: clamp(30px, 4vw, 58px);
  max-width: 18ch;
}

.inv-head .lede { margin-top: var(--s5); max-width: 58ch; }
.inv-head .note { margin-top: var(--s4); max-width: 62ch; }

/* Хлебные крошки. Нужны именно здесь: на эту страницу приходят с
   главной по кнопке, и обратный путь должен быть виден сразу. */
.crumbs {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-label);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-void-soft);
}

.crumbs a {
  color: var(--gold);
  padding-block: 4px;
  transition: color .3s ease;
}

.crumbs a:hover { color: var(--gold-lift); }

.art-head { padding-top: 148px; }
.art-head h1 { margin-block: var(--s5) var(--s5); max-width: 22ch; }
.art-head .post-meta b { color: var(--gold); }
.art-head .post-meta { color: var(--on-void-soft); }

.art-cover {
  margin-top: clamp(40px, 5vw, 72px);
  margin-bottom: clamp(36px, 4vw, 60px);
  /* max-height + aspect-ratio вместе уменьшают и ширину (браузер держит
     пропорцию). Вместо этого ограничиваем через max-width и центрируем:
     16:9 от 880px → высота ~495px, что ощутимо компактнее полной ширины. */
  max-width: clamp(560px, 66%, 880px);
  margin-inline: auto;
}

.prose { max-width: 68ch; }

.prose h2 {
  margin-top: clamp(44px, 4.6vw, 72px);
  margin-bottom: var(--s5);
  font-size: clamp(25px, 2.8vw, 34px);
}

.prose h3 {
  margin-top: clamp(32px, 3.4vw, 48px);
  margin-bottom: var(--s4);
}

.prose p { margin-bottom: var(--s5); font-size: 17px; line-height: 1.78; }

.prose ul,
.prose ol { margin: 0 0 var(--s5) var(--s5); display: grid; gap: 10px; }

.prose li {
  position: relative;
  padding-left: var(--s5);
  font-size: 17px;
  line-height: 1.7;
}

.prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12px;
  width: 6px;
  height: 1px;
  background: var(--gold-deep);
}

.prose ol { counter-reset: p; }
.prose ol li { counter-increment: p; }

.prose ol li::before {
  content: counter(p) '.';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--display);
  color: var(--gold-deep);
}

.prose blockquote {
  margin: clamp(32px, 3.4vw, 48px) 0;
  padding-left: var(--s6);
  border-left: 1px solid var(--gold-deep);
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.55;
  color: var(--ink);
}

.prose strong { font-weight: 600; color: var(--ink); }

.art-cta {
  margin-top: clamp(48px, 5vw, 80px);
  padding: var(--pad-card);
  border-radius: var(--r-lg);
  background: var(--void);
  color: var(--on-void);
}

.art-cta h3 { color: var(--ivory); margin-bottom: var(--s3); }
.art-cta p { margin-bottom: var(--s5); max-width: 58ch; }

/* Карточка темная, хотя лежит в светлой полосе, поэтому кнопка внутри
   берет темный вариант - а не светлый от .on-light. Обводку от того же
   правила снимаем: темное золото по краю золотой заливки нужно только
   на фоне ivory, здесь оно просто пачкает край. */
.on-light .art-cta .btn {
  background-color: var(--gold);
  color: var(--void);
  box-shadow: none;
}

.on-light .art-cta .btn:hover {
  background-position: 88% 50%;
  color: var(--void);
  box-shadow: none;
}

.art-more {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 40px);
}

/* ==========================================================
   СТРАНИЦА ОШИБКИ
   ========================================================== */

.oops {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 148px;
}

.oops .figure { color: var(--gold); }
.oops h1 { margin-block: var(--s4) var(--s5); }