/* «Книга о квартале» — композиция содержательных блоков.
   Акварель остаётся языком страницы, но каждый разворот получает собственную
   роль: соседство, термы, инфраструктура, двор и бытовой маршрут. */

:root {
  --book-section: clamp(64px, 7vw, 112px);
  --book-chapter: clamp(88px, 8.5vw, 132px);
  --book-gap: clamp(28px, 4vw, 68px);
  --book-copy: clamp(16px, 1.05vw, 18px);
}

/* Воздух между главами задаёт только нижний отступ. Раньше каждая секция
   имела и верхний, и нижний, поэтому на стыке складывалось 245 px пустоты
   вместо одного шага ритма. */
:where(.project-spread, .resort-story, .floors, .yard-spread, .comfort-story) {
  padding-block: 0 var(--book-chapter);
}

.route { padding-block: 0 var(--book-section); }

:where(.project-spread, .resort-story, .floors, .yard-spread, .comfort-story, .route) {
  position: relative;
  padding-inline: var(--gutter);
  scroll-margin-top: calc(var(--header-h) + 16px);
}

:where(.project-copy, .resort-copy, .floors-head, .yard-copy, .comfort-head, .route-head) h2 {
  margin: 0;
  /* 14ch было слишком узко: «Всё важное — на первых этажах» разваливалось
     на три строки с висячим тире в середине. */
  max-width: 16ch;
  color: var(--ink);
  font: 400 clamp(36px, 3.9vw, 64px)/1.05 "Tenor Sans", "Times New Roman", serif;
  letter-spacing: -.022em;
  text-wrap: balance;
}

:where(.project-copy, .resort-copy, .floors-head, .yard-copy, .comfort-head, .route-head) > p:not(.eyebrow) {
  max-width: 47ch;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: var(--book-copy);
  line-height: 1.7;
}

/* Иллюстрации — самостоятельные акварельные листы, поэтому общий овальный
   mask им не подходит: он срезает сюжет по углам. Но и совсем без маски
   нельзя — у кадра появляется жёсткая прямоугольная граница, а её на этой
   странице нет нигде.

   Растушёвка идёт полосой по краю: два линейных градиента, пересечённых
   между собой. Тот же приём, что у заставки в `.art`. Сюжет остаётся целым,
   а лист растворяется в бумаге на последних процентах своей ширины. */
:where(.visual--project, .visual--cut, .visual--yard, .resort-figure) .visual-image,
.comfort-figure .visual-image,
.route-figure .visual-image {
  --sheet-edge: 5.5%;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--sheet-edge), #000 calc(100% - var(--sheet-edge)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--sheet-edge), #000 calc(100% - var(--sheet-edge)), transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 var(--sheet-edge), #000 calc(100% - var(--sheet-edge)), transparent 100%),
    linear-gradient(to right, transparent 0, #000 var(--sheet-edge), #000 calc(100% - var(--sheet-edge)), transparent 100%);
  mask-composite: intersect;
}

/* Вуаль разреза гасится по той же полосе, что и сам лист: полосы этажей
   остаются прежними, а по бокам вуаль растворяется вместе с рисунком. */
.visual--cut .cut-veil {
  -webkit-mask-image:
    linear-gradient(to bottom,
      #000 0, #000 calc(var(--band-a) - 5%),
      transparent var(--band-a), transparent var(--band-b),
      #000 calc(var(--band-b) + 5%), #000 100%),
    linear-gradient(to right, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom,
      #000 0, #000 calc(var(--band-a) - 5%),
      transparent var(--band-a), transparent var(--band-b),
      #000 calc(var(--band-b) + 5%), #000 100%),
    linear-gradient(to right, transparent 0, #000 5.5%, #000 94.5%, transparent 100%);
  mask-composite: intersect;
}

/* ─── О проекте: текст 5 колонок, иллюстрация 7 ───────────────── */

.project-spread {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--book-gap);
  /* Разворот книги начинается с одной линии: текст и лист выровнены по
     верху. Раньше колонки центрировались и заканчивались вразнобой. */
  align-items: start;
  padding-top: calc(var(--header-h) + var(--book-section));
}

.project-copy { grid-column: span 5; }

.visual--project {
  grid-column: span 7;
  width: 100%;
  max-width: none;
  /* Видео пришло 16:9 (1280×720), а не 4:3, как остальные кадры страницы:
     кадрировать его под общую пропорцию значит гадать, что можно обрезать
     по краям живой сцены. Лист остаётся в своих настоящих пропорциях —
     разница с соседними 4:3 разворотами читается как сознательный акцент
     на первом, самом кинематографичном кадре, а не как ошибка вёрстки. */
  aspect-ratio: 16 / 9;
}

.visual--project .visual-image { width: 100%; }

/* Умножение на бумагу было решением для прежних контурной и графитной
   стадий: у них фон был почти белым, светлее кремовой страницы, и по
   краю вставал светлый прямоугольник. Видео цветное от первого кадра до
   последнего, вставать нечему — а multiply при этом гасил цвет по всему
   кадру (небо и светлый фасад против кремовой бумаги теряли 5-10%
   яркости на канал). Блендинг снят; маска сама сводит края в прозрачность,
   без затемнения середины кадра. */



/* Число и подпись — одна строка, а не два яруса: цифра слева, текст
   справа от неё на общей базовой линии. Раньше подпись стояла под
   числом в узкой половинной колонке (2 столбца сетки) и почти всегда
   переносилась на две неровные строки — правая и левая цифры
   заканчивались вразнобой. Теперь у каждой пары своя полная ширина
   колонки текста, переносить почти нечего. */
.project-facts {
  display: grid;
  gap: 16px;
  margin: clamp(30px, 3vw, 46px) 0 0;
}

.project-facts div {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(41, 39, 34, .18);
}

.project-facts dt {
  flex: 0 0 auto;
  font: 400 clamp(30px, 2.6vw, 44px)/1 "Tenor Sans", "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.025em;
}

.project-facts dd {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

/* ─── Городской курорт: один объект, один заголовок, один кадр ─
   Было: две подписи, два заголовка и два абзаца об одном и том же, без
   единой иллюстрации. Читатель не понимал, «городской курорт», «SPA» и
   «новые термы» — это одно и то же или три разных объекта, и что именно
   ему обещают. Стало: категория в подписи, имя объекта в заголовке,
   кадр слева и два факта о размещении и доступе.

   Разворот зеркален «О проекте»: там текст слева и лист справа. */

.resort-story {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--book-gap);
  align-items: start;
}

.resort-figure {
  position: relative;
  z-index: 0;
  grid-column: span 6;
  margin: 0;
  isolation: isolate;
  /* Видео пришло 16:9, как и у «О проекте» — та же причина не кадрировать
     его под чужую пропорцию: жаль гадать, что обрезать по краям сцены. */
  aspect-ratio: 16 / 9;
}

.resort-figure .visual-image { width: 100%; }

/* Размыв теперь ореол вокруг кадра, а не подложка под набором текста. */
.resort-figure::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -12% -12% -14%;
  background:
    radial-gradient(ellipse 55% 62% at 37% 45%, rgba(149, 103, 165, .31), transparent 71%),
    radial-gradient(ellipse 48% 52% at 72% 56%, rgba(67, 137, 169, .23), transparent 74%),
    radial-gradient(ellipse 72% 72% at 48% 52%, rgba(247, 243, 235, .88), transparent 86%);
  -webkit-mask-image: radial-gradient(ellipse 70% 67% at 50% 50%, #000 0 53%, rgba(0,0,0,.7) 73%, transparent 96%);
  mask-image: radial-gradient(ellipse 70% 67% at 50% 50%, #000 0 53%, rgba(0,0,0,.7) 73%, transparent 96%);
}

.resort-copy {
  grid-column: 8 / -1;
  align-self: center;
}

.resort-copy > p:not(.eyebrow) { margin-top: 14px; }

/* Два факта вместо второго заголовка: где это и кому доступно. */
.resort-facts {
  display: grid;
  gap: 12px;
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.resort-facts li {
  display: grid;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid rgba(41, 39, 34, .14);
}

.resort-facts strong {
  font: 400 18px/1.3 "Tenor Sans", "Times New Roman", serif;
}

.resort-facts span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

/* ─── Первые этажи: главный содержательный разворот ──────────── */

.floors {
  gap: clamp(36px, 4vw, 64px);
}

/* Одна мера для всех вводных блоков: раньше их колонки были 928, 784 и
   736 px, поэтому вводные абзацы обрывались в трёх разных местах. */
:where(.floors-head, .comfort-head, .route-head) { max-width: 50rem; }
:where(.floors-head, .comfort-head, .route-head) > p:not(.eyebrow) { max-width: 48ch; }

.floors-body {
  /* Те же 7 : 5, что и у бытового разворота, и тот же межколонник.
     Раньше было 1,5 : 0,5 — список этажей зажимался в 270 px и ломался. */
  grid-template-columns: minmax(0, 7fr) minmax(300px, 5fr);
  gap: var(--book-gap);
  align-items: start;
}

.visual--cut { width: 100%; }
.visual--cut .visual-image { width: 100%; }

.floors-list { gap: 6px; }

/* Список растянут на высоту разреза: четыре равные строки против четырёх
   этажей на рисунке. Раньше пункты жались к верху, а под ними оставалось
   пустое поле почти в половину кадра — список читался как подпись сбоку,
   а не как легенда к разрезу. Теперь строка и этаж стоят примерно на
   одной высоте, и подсветка (наведением или прокруткой) связывает их
   очевидно.

   Растягивается только список: у разреза есть своя пропорция, и
   `align-items: start` у самого разворота остаётся, чтобы кадр не
   тянуло. Строки объявлены как 1fr, то есть при длинном тексте они
   всё равно не сожмутся ниже содержимого.

   Только в двухколоночной раскладке: ниже 1180px кадр и список идут
   друг под другом, и растягивать не подо что. */
@media (min-width: 1181px) {
  .floors-body > .floors-list {
    align-self: stretch;
    grid-auto-rows: 1fr;
  }

  /* Кнопка тянется на всю строку, а её содержимое центрируется. Без
     height строка списка растягивалась, а кнопка внутри оставалась по
     высоте текста: у пунктов с описанием в одну строку подсветка была
     заметно ниже соседних, хотя строки одинаковые. */
  .floors-body > .floors-list .floor {
    height: 100%;
    align-content: center;
  }
}

.floor {
  position: relative;
  padding: 12px 0 13px 18px;
  border-radius: 0;
  border-inline-start: 1px solid rgba(41, 39, 34, .18);
  transition: border-color .24s var(--ease-out), color .24s var(--ease-out), transform .24s var(--ease-out);
}

.floor:hover,
.floor[aria-pressed="true"] {
  background: transparent;
  border-inline-start-color: var(--coral-ink);
  transform: translateX(5px);
}

.floor[aria-pressed="true"] .floor-name { color: var(--coral-ink); }

/* ─── Двор: боковое поле с рассказом, иллюстрация 8 колонок ──── */

.yard-spread {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--book-gap);
  align-items: start;
}

.yard-copy { grid-column: span 5; }
/* Заголовок здесь делит колонку с абзацем и списком из трёх сценариев —
   в отличие от «О проекте» и разреза этажей, где h2 соперничает только
   с широким кадром. Общий размер (до 64px) в этой узкой колонке съедал
   слишком много высоты сам по себе. */
.yard-copy h2 { max-width: none; font-size: clamp(30px, 3vw, 48px); }
.yard-copy > p:not(.eyebrow) { margin-top: 10px; }

.yard-scenarios {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.yard-scenarios li {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 12px;
  padding-top: 6px;
  border-top: 1px solid rgba(41, 39, 34, .14);
}

.yard-scenarios strong {
  font: 400 17px/1.3 "Tenor Sans", "Times New Roman", serif;
}

.yard-scenarios span {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.visual--yard {
  grid-column: span 7;
  width: 100%;
  max-width: none;
  /* Видео пришло 16:9, как и у остальных переведённых на видео кадров —
     не кадрируем, чтобы не гадать, что обрезать по краям сцены. */
  aspect-ratio: 16 / 9;
}

.visual--yard .visual-image { width: 100%; }

/* ─── Быт: шахматная вёрстка из трёх равноправных блоков ──────── */
/* Три сюжета одного веса, каждый — фигура и текст в двух колонках.
   Направление чередуется рядами: текст-анимация, анимация-текст,
   текст-анимация. DOM-порядок внутри строки всегда «фигура, текст»
   (так читает скринридер); визуальный порядок меняет только
   .comfort-row--text-first через grid order. */

.comfort-story {
  display: grid;
  gap: clamp(38px, 4.5vw, 74px);
}

.comfort-rows {
  display: grid;
  gap: clamp(38px, 4.5vw, 74px);
}

.comfort-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--book-gap);
  align-items: center;
}

.comfort-row-figure { order: 1; }
.comfort-row-copy { order: 2; }

.comfort-row--text-first .comfort-row-figure { order: 2; }
.comfort-row--text-first .comfort-row-copy { order: 1; }

/* Класс .visual (общий с ключевыми кадрами) добавляет aspect-ratio,
   изоляцию для блендинга и, главное, правило data-ready, которое
   открывает контур и графит. Но он же приносит max-width: 900px и
   justify-self: center — для карточки, занимающей всю свою колонку
   в сетке, это было бы шагом назад, поэтому оба свойства возвращены
   к прежним значениям здесь же. */
.comfort-figure {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: 0;
  max-width: none;
  justify-self: stretch;
}

.comfort-figure .visual-image { width: 100%; }

/* Все три сюжета раздела — видео 16:9, нативное соотношение не кадрируем. */
.comfort-figure--motion { aspect-ratio: 16 / 9; }

.comfort-row-copy h3 {
  margin: 0;
  font: 400 clamp(25px, 2.3vw, 38px)/1.12 "Tenor Sans", "Times New Roman", serif;
  letter-spacing: -.018em;
}

.comfort-row-copy p {
  max-width: 43ch;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: var(--book-copy);
  line-height: 1.68;
}

/* Акцентные акварельные пятна вынесены в отдельную версию страницы
   (вариант с акварельными акцентами) — здесь их нет намеренно. */

/* Эти четыре разворота — самые текстовые на странице (список фактов,
   разрез на четыре этажа, факты терм, три сценария двора). Измерено
   живьём: список/абзац рядом с картинкой перестаёт вылезать ниже неё
   только к ~1250-1350px — у́же они физически не помещаются в две
   колонки без урезания текста. Один общий порог для всех четырёх
   (не у каждого свой, как было раньше — 940 у одних, 1120 и 1360 у
   других: при изменении ширины окна разделы «ломались» вразнобой,
   это и читалось как внезапный скачок в другую вёрстку). Ниже порога
   вся четвёрка одинаково складывается в одну колонку. */
@media (max-width: 1180px) {
  .project-spread,
  .resort-story,
  .yard-spread,
  .floors-body { grid-template-columns: 1fr; }

  .project-copy,
  .visual--project,
  .resort-figure,
  .resort-copy,
  .yard-copy,
  .visual--yard { grid-column: auto; }

  .project-spread { padding-top: calc(var(--header-h) + var(--book-section)); }
  .resort-figure { max-width: 44rem; }
  .floors-list { max-width: 42rem; }
}

@media (max-width: 560px) {
  .comfort-row { grid-template-columns: 1fr; }
  .comfort-row-figure,
  .comfort-row-copy,
  .comfort-row--text-first .comfort-row-figure,
  .comfort-row--text-first .comfort-row-copy { order: initial; }
  .comfort-row-copy { max-width: 42rem; }
}

@media (max-width: 560px) {
  :root {
    --book-section: clamp(56px, 15vw, 76px);
    --book-chapter: clamp(72px, 18vw, 96px);
  }

  .project-spread,
  .resort-story,
  .floors,
  .yard-spread,
  .comfort-story,
  .route { padding-inline: var(--gutter); }

  /* Общий отступ секции (20px) одинаков для текста и картинок — на
     иллюстрациях это работает (акварельный лист и так растворяется
     в бумаге у самого края), а текст на его фоне читался прилепленным
     к границе экрана. Добавлен свой, чуть больший отступ только тексту;
     иллюстрации эта правка не трогает. */
  :where(.project-copy, .resort-copy, .floors-head, .yard-copy,
         .comfort-head, .route-head, .comfort-row-copy) {
    padding-inline: 14px;
  }

  .floors-list,
  .resort-facts,
  .yard-scenarios,
  .route-track h3,
  .route-track p,
  .contact-copy,
  .demo-form { padding-inline: 14px; }

  .project-spread { gap: 34px; }

  :where(.project-copy, .resort-copy, .floors-head, .yard-copy, .comfort-head, .route-head) h2 {
    max-width: none;
    font-size: clamp(32px, 9vw, 42px);
  }

  .project-facts { gap: 16px; }
  .project-facts dt { font-size: clamp(34px, 10vw, 44px); }
  .project-facts dd { font-size: 12px; }

  .resort-story { gap: 30px; }
  .resort-figure::before { inset: -10% -8%; }

  .floors { gap: 28px; }
  .floor { padding-block: 15px; }
  .floor:hover,
  .floor[aria-pressed="true"] { transform: translateX(3px); }

  .yard-spread { gap: 34px; }
  .yard-scenarios li { grid-template-columns: 1fr; gap: 4px; }
  .yard-scenarios strong { font-size: 18px; }

  .comfort-story { gap: 34px; }
  .comfort-rows { gap: 38px; }
  .comfort-row { gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .floor { transition: none; }
}