/* ТК «Ланской» — дизайн главной. Этап 1: первый экран.
   Подключается ПОСЛЕ style.css и перекрывает Ч/Б прототип.
   Значения — из брендбука ТК «Ланской», версия 1.0 / 2026.
   Расхождения внутри самого брендбука помечены в комментариях. */

/* ============ 1. КОНСТАНТЫ БРЕНДА ============ */
:root{
  /* Фирменные цвета, стр. 06 «Фирменные цвета» */
  /* тёмно-синий, основной цвет бренда, 60%. Один на весь сайт в обеих темах —
     как в макете сайта заказчика (брендбук стр. 42), замер по PDF: #011427.
     Близко к логотипу (#001930) и стр. 02 (#0F2339). #16263D из таблицы
     стр. 06 рядом с макетом выглядел серым и светлым — заменён 06.10. */
  --b-navy:#011427;
  --b-cream:#F6F4ED;         /* основной светлый фон, стр. 07 (в таблице стр. 06 — #F6F2ED) */
  --b-cream-2:#EAE7E1;       /* дополнительный фон, стр. 07 */
  --b-copper:#C49A6C;        /* акцент, стр. 07 и стр. 09 (в таблице стр. 06 — #C99A6C) */
  --b-choc:#443228;          /* шоколадный, 3% */
  --b-grey:#DAD7CE;          /* серый, 2% */

  /* Градиенты, стр. 06 */
  --g-navy:linear-gradient(135deg,#000C1A 0%,#0B2645 100%);   /* тот же синий с лёгким высветлением */
  --g-copper:linear-gradient(135deg,#B5834F 0%,#E2C39A 100%);

  /* Медный, затемнённый до контраста AA на кремовом (4.87:1).
     Брендбук ставит #C49A6C на кремовый — это 2.26:1 и не проходит.
     ТЗ п. 9.6 требует достаточный контраст, поэтому мелкий текст — этим. */
  --b-copper-ink:#8E6034;

  /* Шрифты — брендбук, стр. 35 и 36, блок «Типографика»:
     заголовки Playfair Display, текст Montserrat. Отдельной полосы про
     типографику нет, она в боковых колонках разделов применения. */
  --d-serif:"Playfair Display",Georgia,serif;
  --d-sans:"Montserrat","Segoe UI",system-ui,sans-serif;

  --d-wrap:1360px;
  --d-ease:cubic-bezier(.22,.61,.36,1);
  --d-skew:-12deg;           /* наклон параллелограмма — графический элемент, стр. 36 */

  /* ===== СРЕЗ — ПРАВИЛО НА ВСЮ ГЛАВНУЮ =====
     Диагональ ставится только в полноширинных баннерах, где крупный кадр
     уходит за край экрана и граничит с текстовой половиной макета. Там она
     работает границей двух половин, а не отделкой картинки. Срезается тот
     угол, что со стороны текста — кадр как будто уступает место словам.
     Три места на всю страницу: первый экран, «Аренда» и «Найти магазин»
     (последний — только пока колонки стоят рядом).

     Везде больше кадры прямые. Было иначе: срез стоял у каждого
     кадра-обложки, то есть правило было привязано к типу элемента. Типов с
     обложками много, и каждый идёт сеткой, поэтому на один прокрут выходило
     одиннадцать одинаковых диагоналей — приём переставал читаться как приём
     и читался как способ обрезки картинок. Попытка починить это «уникальностью»
     (оставить срез там, где элемент один) не выдержала проверки: у лида
     «Журнала» нет ни края экрана, ни текстовой половины рядом, то есть срез
     там нечем обосновать. Либо срез у всех обложек, либо ни у одной —
     выбрано второе.

     Фирменность без среза держат палитра, антиква в заголовках, разрядка
     в капсе, медные акценты и паттерн-монограмма.

     АДАПТИВ. На узком экране боковой диагонали нет вовсе: кадр становится
     полосой во всю ширину, текстовой половины рядом с ним не остаётся, и
     граница двух половин, которую диагональ рисовала, пропадает — пологий
     срез сверху читался случайной обрезкой фотографии. Исключение одно —
     «Аренда»: там кадр и текст по-прежнему стоят друг над другом одним
     блоком, и диагональ по нижней кромке их связывает. */
}

/* ============ 2. СЕМАНТИЧЕСКИЕ ТОКЕНЫ (ТЗ п. 9.2) ============ */
/* Светлая тема — по макету брендбука стр. 39 */
:root,
[data-theme="light"]{
  --s-bg:var(--b-cream);
  --s-bg-2:var(--b-cream-2);
  --s-fg:var(--b-navy);
  --s-fg-soft:rgba(1,20,39,.68);
  --s-accent:var(--b-copper);
  --s-accent-ink:var(--b-copper-ink);
  --s-line:rgba(1,20,39,.14);
  --s-line-faint:rgba(1,20,39,.055);
  --s-bg-soft:#F2EFE9;
  --s-line-strong:rgba(1,20,39,.26);
  --s-hero-bg:var(--b-cream);
  --s-util-bg:var(--b-cream-2);
  --s-nav-bg:rgba(246,244,237,.92);
  --s-field-bg:rgba(255,255,255,.72);
  --s-plate:rgba(1,20,39,.04);
  --s-btn-fill-fg:var(--b-navy);   /* навй на медном = 5.1:1; сочетание разрешено стр. 06 */
}
/* Тёмная тема — по макету брендбука стр. 38. ТЗ п. 9.7 «Тёмная тема — необходимо сделать» */
/* Тёмная тема — строго палитрой брендбука: один тёмно-синий --b-navy
   (тот же, что текст и подвал в светлой теме). Свои промежуточные
   синие (#0E1A2B, #0B1522, #13223A, #1E3352) сняты: соседние секции
   разделяет медная волосяная линия, как разделители в брендбуке. */
[data-theme="dark"]{
  --s-bg:var(--b-navy);
  --s-bg-2:var(--b-navy);
  --s-fg:var(--b-cream);
  --s-fg-soft:rgba(246,244,237,.72);
  --s-accent:var(--b-copper);
  --s-accent-ink:var(--b-copper);  /* медный на тёмно-синем = 6.04:1, проходит AA */
  --s-line:rgba(196,154,108,.22);
  --s-line-faint:rgba(196,154,108,.08);
  --s-bg-soft:var(--b-navy);
  --s-line-strong:rgba(196,154,108,.44);
  --s-hero-bg:var(--b-navy);
  --s-util-bg:var(--b-navy);
  --s-nav-bg:rgba(1,20,39,.92);
  --s-field-bg:rgba(246,244,237,.06);
  --s-plate:rgba(196,154,108,.07);
  --s-btn-fill-fg:var(--b-navy);
}

html{background:var(--s-bg)}
body{
  background:var(--s-bg);color:var(--s-fg);
  transition:background .35s var(--d-ease),color .35s var(--d-ease);
}

/* ============ 3. ШАПКА ============ */
/* без линии снизу: утилитарная строка и шапка разных тонов, граница
   читается самой сменой фона */
.utility{background:var(--s-util-bg);border-bottom:0;color:var(--s-fg-soft)}
.utility__in{height:34px;min-height:0}
.utility a{color:inherit}
.utility a:hover{color:var(--s-accent-ink)}
.utility__login{color:var(--s-accent-ink);text-decoration:none}
.utility__login:hover{text-decoration:underline;text-underline-offset:3px}
.utility__actions{display:flex;align-items:center;gap:18px}
/* «Аренда» — единственное действие для бизнеса, даём ему медную обводку */
.utility .btn--ghost{
  /* .btn--sm держит 38px и не давала строке стать ниже 44 */
  height:30px;padding:0 14px;
  border:1px solid var(--s-accent);color:var(--s-accent-ink);
  border-radius:2px;letter-spacing:.1em;text-transform:uppercase;font-size:11px;
}
.utility .btn--ghost:hover{background:var(--s-accent);color:var(--s-btn-fill-fg)}

/* серая граница под шапкой читалась жёсткой чертой поперёк экрана.
   В покое её нет вовсе — первый экран отделяет себя сам,
   в закреплённом состоянии остаётся медная волосяная линия. */
/* строка навигации встык с первым экраном сливалась с ним: шапка светлая
   и первый экран светлый, границы между ними не читалось. Медная
   волосяная линия в четверть силы — заметно, но не чертой поперёк
   экрана, как была серая. В закреплённом состоянии она усиливается. */
.nav{background:var(--s-nav-bg);backdrop-filter:saturate(140%) blur(10px);
  border-bottom:1px solid var(--s-hairline-soft)}
.nav__in{min-height:92px}
.logo__img{filter:none;height:58px;width:auto}
.menu__link{
  font-family:var(--d-sans);font-weight:500;font-size:13px;
  letter-spacing:.06em;text-transform:uppercase;color:var(--s-fg);
}
.menu__item.is-current>.menu__link,.menu__link:hover{color:var(--s-accent-ink)}

/* переключатель темы — служебный элемент, поэтому уведён в самый край
   утилитарной строки и отделён от «Аренды» разделителем */
.utility__actions .themetog-li{
  order:9;margin-left:2px;padding-left:18px;
  border-left:1px solid var(--s-line-strong);
}
/* тумблер: только значок, без подписи. Геометрия прямоугольная — как у кнопок
   и полей сайта, а не капсула */
/* Дорожка — две равные половины. Плашка раньше была 16px внутри 44px:
   она не добирала до своей половины, вокруг неё оставались неравные
   поля, и значок сидел в плашке не по центру. Теперь плашка ровно
   половина дорожки и встык к её краям, а значки центрируются каждый в
   своей ячейке сетки. */
.themetog{
  position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;
  width:48px;height:24px;padding:0;border:1px solid var(--s-line-strong);border-radius:2px;
  background:transparent;transition:border-color .2s,background-color .25s var(--d-ease);
}
.themetog:hover{border-color:var(--s-accent)}
.themetog__ic{
  position:absolute;left:0;top:0;width:50%;height:100%;
  background:var(--s-accent);box-shadow:none;
  transition:transform .28s var(--d-ease),background-color .25s;
}
/* солнце и луна нарисованы прямо в дорожке: без них было непонятно,
   что это переключатель темы, а не произвольный тумблер. Медная плашка
   стоит на действующей теме, её значок читается навй по медному. */
.themetog__sun,.themetog__moon{
  position:relative;z-index:1;justify-self:center;width:13px;height:13px;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
  transition:background-color .25s;
}
.themetog__sun{-webkit-mask-image:var(--i-sun);mask-image:var(--i-sun)}
.themetog__moon{-webkit-mask-image:var(--i-moon);mask-image:var(--i-moon)}
.themetog__sun{background-color:var(--s-btn-fill-fg)}
.themetog__moon{background-color:var(--s-fg-soft)}
[data-theme="dark"] .themetog{background:rgba(196,154,108,.12)}
[data-theme="dark"] .themetog__ic{transform:translateX(100%);box-shadow:none}
[data-theme="dark"] .themetog__sun{background-color:var(--s-fg-soft)}
[data-theme="dark"] .themetog__moon{background-color:var(--s-btn-fill-fg)}
:root{
  --i-sun:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.4'/%3E%3Cpath d='M12 1.6v2.8M12 19.6v2.8M1.6 12h2.8M19.6 12h2.8M4.7 4.7l2 2M17.3 17.3l2 2M19.3 4.7l-2 2M6.7 17.3l-2 2'/%3E%3C/svg%3E");
  --i-moon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20.8 15.2A9.3 9.3 0 0 1 8.8 3.2a9.3 9.3 0 1 0 12 12z'/%3E%3C/svg%3E");
}
/* подпись остаётся для доступности, но не видна */
.themetog__t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============ 4. ПЕРВЫЙ ЭКРАН ============ */
.dhero{
  position:relative;overflow:hidden;
  background:var(--s-hero-bg);color:var(--s-fg);
  transition:background .35s var(--d-ease),color .35s var(--d-ease);
}
/* первый экран — тёмно-синий градиент брендбука, стр. 09 */
[data-theme="dark"] .dhero{background:var(--g-navy)}

/* Паттерны с главной сняты: в вёрстке они были перерисованы по памяти,
   а не взяты из брендбука. Вернём, когда придут оригинальные файлы. */

/* сетка первого экрана шире контейнера: левая колонка по общей сетке сайта,
   правая — фотопанель — уходит в край страницы (макет брендбука, стр. 38) */
.dhero__in{
  position:relative;z-index:2;
  max-width:none;width:100%;margin:0;
  /* край текстовой колонки должен совпасть с контентом остальных блоков:
     .wrap прототипа имеет max-width 1360 ВМЕСТЕ с падингом --pad,
     поэтому к половине остатка добавляем --pad */
  padding-left:calc(max(0px, (100% - var(--d-wrap)) / 2) + var(--pad));padding-right:0;
  /* Доля текстовой колонки с потолком. Простая доля вела себя плохо на
     краях: на 1100px «ПРОСТРАНСТВО» упиралось в край колонки, а на
     1920px колонка разрасталась до 700px при нужных 591 — фотопанель
     начиналась только на 57% экрана. Теперь 48.7%, но не больше 660px
     (591 на самый длинный замер + 40 внутреннего отступа + запас):
     на широких экранах фото выходит к середине, на узких заголовок
     по-прежнему помещается в строку. */
  display:grid;grid-template-columns:minmax(0,min(48.7%,660px)) minmax(0,1fr);
  /* высота подобрана так, чтобы полоса услуг попадала в первый экран, а не за сгиб */
  align-items:center;min-height:clamp(560px,70vh,760px);
}
.dhero__text{padding:64px 40px 64px 0;max-width:700px}

.dhero__eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--s-accent-ink);margin:0 0 22px;
  display:flex;align-items:center;gap:14px;
}

.dhero__h1{
  font-family:var(--d-serif);font-weight:600;
  /* Playfair шире Cormorant: «ВДОХНОВЕНИЯ» в 72px упиралось в край колонки */
  font-size:clamp(42px,4.85vw,70px);line-height:1.06;letter-spacing:.01em;
  text-transform:uppercase;margin:0 0 22px;
}
.dhero__h1 em{display:block;font-style:normal;color:var(--s-accent)}

.dhero__sub{
  font-size:16px;line-height:1.6;color:var(--s-fg-soft);
  max-width:490px;margin:0 0 30px;
}

/* --- поиск: главный инструмент экрана, а не кнопка-плакат --- */
.dsearch{display:flex;max-width:560px;margin:0 0 18px;border:1px solid var(--s-line-strong);border-radius:2px;background:var(--s-field-bg);transition:border-color .2s}
.dsearch:focus-within{border-color:var(--s-accent)}
.dsearch__inp{
  flex:1;min-width:0;height:58px;padding:0 18px;border:0;background:none;
  font:inherit;font-size:15px;color:var(--s-fg);
}
.dsearch__inp::placeholder{color:var(--s-fg-soft)}
.dsearch__inp:focus{outline:none}
.dsearch__inp::-webkit-search-cancel-button{filter:grayscale(1) opacity(.5)}
.dsearch__go{
  /* было height:58px при margin:-1px: кнопка начиналась на пиксель выше
     рамки и на столько же не доходила до её низа — снизу оставалась
     светлая щель. Растягиваем по высоте поля вместо жёсткого размера. */
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  align-self:stretch;padding:0 26px;margin:-1px -1px -1px 0;
  background:var(--s-accent);color:var(--s-btn-fill-fg);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:filter .25s;
}
.dsearch__go:hover{filter:brightness(1.07)}

/* --- быстрые входы по направлениям --- */
.dchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;max-width:600px}
.dchip{
  display:inline-flex;align-items:center;gap:8px;
  height:36px;padding:0 15px;border:1px solid var(--s-line);border-radius:2px;
  font-size:12px;letter-spacing:.03em;color:var(--s-fg-soft);
  transition:border-color .2s,color .2s,background .2s;
}
.dchip:hover{border-color:var(--s-accent);color:var(--s-accent-ink);background:var(--s-plate)}

.dhero__cta{display:flex;flex-wrap:wrap;gap:22px;align-items:center}

.dbtn{
  display:inline-flex;align-items:center;gap:12px;
  height:56px;padding:0 32px;border-radius:2px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  transition:filter .25s var(--d-ease),transform .25s var(--d-ease);
}
.dbtn--fill{background:var(--s-accent);color:var(--s-btn-fill-fg)}
.dbtn--fill:hover{filter:brightness(1.07);transform:translateY(-2px)}
/* «Аренда площадей» — вторая по важности кнопка первого экрана. Была
   подчёркнутой ссылкой и терялась рядом с залитой; получила медную
   обводку: вес ниже залитой, но это уже кнопка той же высоты. */
.dbtn--ghost{background:transparent;border:1px solid var(--s-accent);color:var(--s-accent-ink)}
.dbtn--ghost:hover{background:var(--s-accent);color:var(--s-btn-fill-fg);transform:translateY(-2px)}
/* ссылка-стрелка осталась в «Аренде» и других блоках */
.dlink{
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s-accent-ink);padding-bottom:3px;border-bottom:1px solid transparent;
  transition:border-color .2s;
}
.dlink:hover{border-bottom-color:var(--s-accent)}

/* фотопанель с диагональным срезом — приём из макета брендбука, стр. 38 */
.dhero__media{
  position:relative;align-self:stretch;min-height:100%;
  /* Боковой срез крупных панелей — единый на всю страницу: 13% ширины
     панели. Столько же у «Аренды» (87% с правого края) и у блока
     «Найти магазин». Сюда я его временно ужал до 4%, когда вытаскивал
     фотографию влево, и наклон выбился из общего ряда. Вытаскивание
     при этом не потерялось: сама панель начинается на 51% экрана
     вместо прежних 58.6%, просто срез снова той же крутизны. */
  clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);
  background:var(--b-navy);
  overflow:hidden;
}
/* состояние «фото ещё нет»: подложка паттерном 03 «Монограмма», стр. 09 */
.dhero__media::after{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.2' opacity='.45'%3E%3Cpath d='M38 80V52l10-9 10 9v28M58 80V44l11-10 11 10v36'/%3E%3Cpath d='M34 86c10-7 22-7 32 0s22 7 32 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:120px 120px;
}
.dhero__media img{
  position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  /* кадр смещён вправо: слева на фото пустая стена, её же срезает диагональ */
  object-position:70% 50%;
  visibility:hidden;                 /* показываем после успешной загрузки, см. design.js */
}

/* ============ 5. УСЛУГИ КОМПЛЕКСА ============ */
/* состав — брендбук, стр. 36 (слайд «Услуги комплекса»).
   Пять пунктов, а не четыре: с четырьмя ячейки были вдвое шире подписей
   и полоса читалась пустой. */
/* подложка на полшага темнее страницы, а не на полный: полоса услуг —
   служебная, она не должна спорить с первым экраном над ней */
.dserv{position:relative;z-index:2;border-top:0;background:var(--s-bg-soft)}
/* тёмная тема: секции чередуют сплошной синий и градиент брендбука (стр. 09),
   соседние блоки отличаются цветом, без линий-разделителей.
   Порядок: первый экран Г · услуги С · направления Г · события С · акции Г ·
   аренда С · журнал Г · найти магазин С · подписка Г · подвал С */
[data-theme="dark"] .dserv{background:var(--b-navy)}
.dserv__in{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
/* разделители светлее общей линейки сайта: их четыре в ряд и на всю
   высоту полосы — в полную силу они читались таблицей */
.dserv__i{
  display:flex;align-items:center;justify-content:center;gap:16px;
  padding:32px 18px;border-left:1px solid var(--s-line-faint);
}
.dserv__i:first-child{border-left:0}
.dserv__ic{
  width:40px;height:40px;flex:none;background:var(--s-accent);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.dserv__ic--design{-webkit-mask-image:var(--i-design);mask-image:var(--i-design)}
.dserv__ic--swatch{-webkit-mask-image:var(--i-swatch);mask-image:var(--i-swatch)}
.dserv__ic--truck{-webkit-mask-image:var(--i-truck);mask-image:var(--i-truck)}
.dserv__ic--box{-webkit-mask-image:var(--i-box);mask-image:var(--i-box)}
.dserv__ic--park{-webkit-mask-image:var(--i-park);mask-image:var(--i-park)}
:root{
  --i-design:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 3h18v18H3z'/%3E%3Cpath d='M3 9h18M9 9v12'/%3E%3C/svg%3E");
  --i-swatch:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Crect x='3' y='4' width='7' height='16'/%3E%3Crect x='12' y='4' width='9' height='7'/%3E%3Crect x='12' y='13' width='9' height='7'/%3E%3C/svg%3E");
  --i-truck:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M1 6h13v10H1zM14 9h4l3 3v4h-7z'/%3E%3Ccircle cx='6' cy='18' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E");
  --i-box:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 7l9-4 9 4v10l-9 4-9-4z'/%3E%3Cpath d='M3 7l9 4 9-4M12 11v10'/%3E%3C/svg%3E");
  --i-park:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 3h18v18H3z'/%3E%3Cpath d='M9 17V8h3.5a2.5 2.5 0 0 1 0 5H9'/%3E%3C/svg%3E");
}
.dserv__t{font-size:13px;line-height:1.45;letter-spacing:.02em;color:var(--s-fg)}

/* ============ 6. ГРАНИЦА ЭТАПА ============ */
.dstage{background:var(--b-choc);color:var(--b-cream)}
.dstage__in{
  padding:15px 0;display:flex;gap:12px;align-items:center;justify-content:center;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;opacity:.92;
}
.dstage__dot{width:6px;height:6px;border-radius:50%;background:var(--b-copper);flex:none}
.dstage ~ .sect,.dstage ~ .rent,.dstage ~ .subs{filter:saturate(0) opacity(.8)}

/* ============ 7. МИКРО-АНИМАЦИИ (ТЗ п. 9.5) ============ */
@keyframes d-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes d-fade{from{opacity:0}to{opacity:1}}
.dhero__text>*{animation:d-rise .75s var(--d-ease) both}
.dhero__text>*:nth-child(1){animation-delay:.04s}
.dhero__text>*:nth-child(2){animation-delay:.10s}
.dhero__text>*:nth-child(3){animation-delay:.16s}
.dhero__text>*:nth-child(4){animation-delay:.22s}
.dhero__text>*:nth-child(5){animation-delay:.28s}
.dhero__text>*:nth-child(6){animation-delay:.34s}
.dhero__media{animation:d-fade 1.1s var(--d-ease) both}
.dserv__i{animation:d-rise .7s var(--d-ease) both .40s}

/* Появление снизу по скроллу. Первый экран и полоса услуг живут на
   своих анимациях загрузки выше — их не трогаем, иначе содержимое первого
   экрана выезжает снизу дважды.

   Скрытие задано селекторами, а не классом от JS: класс навешивался уже
   после отрисовки, и вместо появления получалось исчезновение. А класс js-rv
   ставит инлайн-скрипт в <head>, до первого кадра — и без JS сайт остаётся
   видимым целиком.

   Сдвиг маленький (18px): крупный выезд на спокойном сайте с антиквой
   читается как презентация, а не как сайт торгового центра. */
.js-rv .sect__head,
.js-rv .cgrid > *,
.js-rv .cmore,
.js-rv .eposter > *,
.js-rv .eempty,
.js-rv .pgrid > *,
.js-rv .rblock__media,
.js-rv .rblock__text,
.js-rv .jgrid > *,
.js-rv .fgrid > *,
.js-rv .sblock__in > *,
.js-rv .footer__lead > *,
.js-rv .footer__nav > *{
  opacity:0;transform:translateY(18px);
  transition:opacity .75s var(--d-ease),transform .75s var(--d-ease);
  transition-delay:var(--rv-d,0ms);
}
.js-rv .is-in{opacity:1;transform:none}

/* ============ 8. АДАПТИВ (ТЗ п. 9.4, 320–1920+) ============ */
@media (max-width:1100px){
  /* до 1100px контейнер уже ширины макета, поэтому поле одно — --pad.
     Было: справа отступ 20px, а поле слева --pad (24px), и кадр, выведенный
     за края на 20px, не доходил до левого края на 4px и вылезал справа */
  .dhero__in{grid-template-columns:minmax(0,1fr);min-height:0;padding-left:var(--pad);padding-right:var(--pad)}
  .dhero__text{padding:52px 0 36px;max-width:none}
  .dhero__media{
    margin:0 calc(var(--pad) * -1);
    height:50vw;min-height:300px;clip-path:none;
  }
  .dserv__in{grid-template-columns:repeat(2,1fr)}
  .dserv__i{padding:22px 16px;justify-content:flex-start}
  .dserv__i:nth-child(odd){border-left:0}
  .dserv__i:nth-child(n+3){border-top:1px solid var(--s-line)}
  .dserv__i:last-child{grid-column:span 2;border-left:0}
}

/* до 640 первый экран строится иначе: фотография становится фоном,
   иначе на телефоне торговый центр уезжает за сгиб и его не видно */
@media (max-width:640px){
  .utility__actions .themetog-li{padding-left:14px}
  /* действия были прижаты вправо (justify-content:flex-end из прототипа), и
     слева от «Аренды» оставалось пустое поле в треть строки — читалось
     отступом непонятно от чего. Раскладываем по ширине: «Аренда» встаёт на
     левую границу контента, под логотип, тумблер — на правую */
  .utility__in{justify-content:stretch}
  .utility__actions{flex:1;justify-content:space-between;gap:10px}
  .nav__in{min-height:72px}
  .logo__img{height:44px}

  /* Фотография уходит вниз, под текст, тем же порядком, что на планшете.
     Было: кадр фоном во всю высоту экрана, поверх него затемнение и белый
     текст. Это ломало две вещи. Первая — светлой темы на первом экране не
     существовало: телефон всегда показывал тёмный экран, а дальше шёл
     кремовый сайт. Вторая — нигде больше на главной текст не лежит на
     фотографии, и первый экран жил по своим правилам. Теперь порядок как
     на большом экране: сначала слово, следом кадр. */
  .dhero__text{padding:40px 0 32px}
  .dhero__h1{font-size:clamp(36px,10.5vw,50px)}
  .dhero__eyebrow{font-size:10px;letter-spacing:.18em}
  .dhero__media{height:64vw;min-height:250px}
  .dhero__media img{object-position:62% 50%}

  .dsearch{max-width:none}
  .dsearch__inp{height:52px}
  /* подпись была скрыта (font-size:0), кнопку обозначала одна стрелка —
     после её снятия осталась бы пустая плашка */
  .dsearch__go{padding:0 18px;font-size:11px;letter-spacing:.1em}
  .dchips{max-width:none;margin-bottom:26px}
  .dhero__cta{flex-direction:column;align-items:stretch;gap:16px}
  .dbtn{height:52px;padding:0 24px;width:100%;justify-content:center}

  /* полоса услуг держит свою тему, а не тёмный первый экран: на телефоне
     кадр затемнён в обеих темах, и полоса за ним оставалась тёмной даже на
     светлом сайте — дальше шёл кремовый фон, и полоса читалась чужой.
     Теперь она такая же, как на большом экране, и закрывает тёмный первый
     экран, а не продолжает его */
  /* по два в ряд (решение Ивана 06.10): в одну колонку пять пунктов
     занимали целый экран после первого. Иконка встаёт над подписью, иначе
     в колонке шириной ~150 px подпись ломалась на три строки. Пятый пункт —
     на всю строку, как на планшете */
  .dserv__in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dserv__i{
    flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:12px;
    padding:18px 12px 18px 0;border-left:0;border-top:0;
  }
  .dserv__i:nth-child(even){padding-left:16px;border-left:1px solid var(--s-line)}
  .dserv__i:nth-child(n+3){border-top:1px solid var(--s-line)}
  .dserv__i:last-child{grid-column:span 2;flex-direction:row;align-items:center;gap:14px}
  .dserv__ic{width:30px;height:30px}
}
/* на самых узких (320—360) — снова в одну колонку */
@media (max-width:360px){
  .dserv__in{grid-template-columns:1fr}
  .dserv__i,.dserv__i:nth-child(even){
    flex-direction:row;align-items:center;gap:14px;
    padding:16px 0;border-left:0;
  }
  .dserv__i:nth-child(n+2){border-top:1px solid var(--s-line)}
  .dserv__i:last-child{grid-column:auto}
}

/* ТЗ п. 9.5 — уважать prefers-reduced-motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important}
  .js-rv *{opacity:1 !important;transform:none !important}
}

/* ============ 9. НАПРАВЛЕНИЯ ============ */
/* Плитки-фотографии с тёмной подложкой — приём из макета брендбука, стр. 39
   («Категории материалов»). Бенто-сетка и состав из 12 направлений остались
   от согласованного прототипа, структуру главной не меняем. */
/* Вертикальный ритм. Было 96/104 у всех блоков подряд — страница шла
   ровным шагом без акцентов. Между однотипными карточными блоками шаг
   сокращён до 76, а перед «Арендой» и подпиской оставлен большой
   просвет: это две смысловые паузы страницы. */
/* один отступ у всех секций: раньше было 96/76, 76/76, 76/120, 112/76,
   и расстояния между блоками гуляли от 152 до 232px */
.sect{padding:88px 0}
.sect--cats{padding:88px 0;background:var(--s-bg)}
[data-theme="dark"] .sect--cats{background:var(--g-navy)}
/* линия под шапкой снята: она отбивала заголовок от ссылки справа,
   а ссылка ушла вниз кнопкой — под одиноким заголовком ей нечего
   разделять. В остальных секциях ссылка в шапке есть, там линия остаётся */
/* Шапка одинаковая во всех блоках: только заголовок, без линии и без
   ссылки справа. Линия отбивала заголовок от ссылки, а ссылки ушли
   вниз кнопками — разделять ей больше нечего */
.sect__head{margin-bottom:40px;padding-bottom:0;border-bottom:0}
.sect--cats .sect__h2{
  font-family:var(--d-serif);font-weight:600;color:var(--s-fg);
  font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;
}

/* Было 12 плиток сеткой 4×3 с шагом 16px, потом бенто из шести — крупная
   плитка, четыре малых и полоса во всю ширину. Бенто снято по двум причинам.
   Первая: разный вес плиток ничего не значил — «Декоративно-отделочные» и
   «Напольные покрытия» по 28 магазинов, а подача разная. Вторая: полоса 5,5:1
   видит 19% квадратного снимка — в кадре либо голый пол, либо срезанный товар.
   Стало: шесть равных плиток 3×2 с зазором 2px — они смыкаются в одно полотно,
   как стенд с образцами материала. Это буквально предмет комплекса, и такого
   приёма больше нигде на главной нет: «Акции» — карточки с зазором 24px,
   «Журнал» — лид и строки. Состав прежний — только категории с реальными
   счётчиками заказчика, выдуманных чисел в блоке нет. */
/* Три яруса 3—4—7 разобраны: деление на 3 и на 4 даёт разные вертикали,
   и внутри блока не совпадала ни одна из двенадцати колоночных линий —
   три сетки читались тремя независимыми блоками друг под другом. К тому же
   четырнадцать кадров в одной тёплой гамме читаются текстурой, а не набором
   разных направлений, и глазу не за что зацепиться.
   Стало: одна сетка 3×2 на шесть крупнейших направлений — несовпадающих
   вертикалей не остаётся вовсе — и перечень остальных строками под ней.
   Все четырнадцать по-прежнему на главной, но кадр остался там, где он
   работает — на крупном размере. В полоске 167×126 он всё равно не показывал
   товар, и навигацию вёла подпись. */
.cgrid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px;
}

/* «Все …» у каждого блока — контурной кнопкой по центру под содержимым.
   Была мелкая ссылка в шапке — её не видно тому, кто досмотрел блок
   до конца, а именно там она и нужна. Кнопка заодно закрывает блок
   нижней границей — раньше сетки просто обрывались. */
.cmore{display:flex;justify-content:center;margin-top:52px}

/* Подпись снята с фотографии и лежит на кремовой полке внутри плитки.
   Раньше читаемость держалась тем, что у всех двенадцати снимков светлая
   спокойная нижняя треть, и кадрирование приходилось подгонять под эту
   площадку. Теперь надпись не зависит от фотографии вообще: заказчик подставит
   любой кадр, а контраст нормирован: навй по кремовому ≈ 13:1, затемнённый
   медный #8E6034 по кремовому — 4,87:1, мелкий текст проходит AA. */
:root,[data-theme="light"]{
  --cat-fg:var(--b-navy);
  --cat-count:var(--b-copper-ink);
  --cat-bg:var(--b-cream-2);
}
[data-theme="dark"]{
  --cat-fg:var(--b-cream);
  --cat-count:var(--b-copper);
  --cat-bg:var(--b-navy);
}
.cat{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;justify-content:flex-start;
  border:0;padding:0;background:none;overflow:visible;
  /* в прототипе плитке ниже 1200px задано aspect-ratio:4/3 — здесь оно
     обрезало подпись: высоту задаёт кадр плюс подпись */
  aspect-ratio:auto;
}
/* обёртка держит пропорцию кадра и подложку-монограмму на случай отсутствия фото */
.cat__media{
  position:relative;z-index:1;display:block;overflow:hidden;
  aspect-ratio:16/9;background:var(--cat-bg);
}
/* подложка на случай, когда фотографии ещё нет — паттерн 03 «Монограмма», стр. 09 */
.cat__media::before{
  content:"";position:absolute;z-index:0;inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.2' opacity='.4'%3E%3Cpath d='M38 80V52l10-9 10 9v28M58 80V44l11-10 11 10v36'/%3E%3Cpath d='M34 86c10-7 22-7 32 0s22 7 32 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
.cat__img{
  position:absolute;z-index:1;inset:0;display:block;width:100%;height:100%;
  object-fit:cover;
  /* кадрируем по товару, а не под подпись: подпись теперь под кадром */
  object-position:50% 46%;
  visibility:hidden;                      /* показываем после загрузки, см. design.js */
  transition:transform .9s var(--d-ease);
}
/* Подпись без своей подложки — лежит на фоне страницы, как у «Акций»
   и «Журнала». Серая полка делала из плитки плашку, которой больше
   нигде на сайте нет. Читаемость не страдает: подпись всё равно не на
   фотографии, а на ровном фоне секции — навй по кремовому ≈ 13:1. */
.cat__body{
  position:relative;z-index:3;flex:1 0 auto;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  /* счётчик прижат к низу ячейки, а не к имени: в ряду из семи
     двухстрочные названия сдвигали свой счётчик на 14px вниз, и линия
     счётчиков ломалась. Теперь имя растёт вверх, счётчик стоит на месте */
  justify-content:space-between;
  padding:16px 0 0;
}
.cat__count{margin-top:auto}
/* наведение отмечается именем, как у строк афиши и статей журнала */
.cat:hover .cat__name{color:var(--s-accent-ink)}
.cat__name{transition:color .2s}
.cat__name{
  font-family:var(--d-sans);font-weight:600;font-size:13px;line-height:1.35;
  letter-spacing:.06em;text-transform:uppercase;color:var(--cat-fg);
  background:none;padding:0;max-width:none;
  /* в прототипе стоит overflow-wrap:anywhere — он рвал
     «ЛАКОКРАСОЧНЫЕ» посреди слова */
  overflow-wrap:break-word;hyphens:manual;
}
.cat__count{
  font-size:11px;letter-spacing:.06em;color:var(--cat-count);
  background:none;padding:0;margin:0;
}
/* плашка со стрелкой убрана: вся плитка и так ссылка, а в малой
   плитке она отъедала 54px у имени и ломала его на две строки */
.cat__go{display:none}

.cat:hover .cat__img{transform:scale(1.06)}
.cat:focus-visible{outline:2px solid var(--b-copper);outline-offset:-3px}

@media (max-width:900px){
  .cgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}
}
@media (max-width:640px){
  .sect--cats{padding:64px 0 72px}
  .cat__media{aspect-ratio:4/3}
  .cat__body{padding-top:12px}
  .cat__name{font-size:12px}
  .cmore{margin-top:40px}
}

/* ============ 10. БЛИЖАЙШИЕ СОБЫТИЯ ============ */
/* Карточка по макету брендбука стр. 38 («События») и стр. 39 («Актуальные
   события»): дата медным, заголовок антиквой, «Регистрация» ссылкой.
   Диагональ по нижней кромке обложки — тот же приём, что в первом экране. */
.sect--events{padding:88px 0;background:var(--s-bg-2)}
[data-theme="dark"] .sect--events{background:var(--b-navy)}

.sect--events .sect__h2{
  font-family:var(--d-serif);font-weight:600;color:var(--s-fg);
  font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;
}

.egrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}
/* обязательное состояние по п. 6.8 ТЗ: регистрация закрывается автоматически,
   значит афиша может оказаться пустой. Показывается по адресу ?events=0 */
.eempty[hidden]{display:none}
.eempty{
  display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;
  padding:72px 24px;border:1px solid var(--s-line-strong);
}
.eempty__t{font-family:var(--d-serif);font-size:28px;line-height:1.2;color:var(--s-fg);margin:0}
.eempty__d{font-size:15px;line-height:1.6;color:var(--s-fg-soft);margin:0}
.eempty__cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:center;margin-top:10px}

@media (max-width:640px){
  .sect--events{padding:64px 0 72px}
  .eempty{padding:48px 18px}
  .eempty__t{font-size:22px}
}

/* ============ 11. АКЦИИ МАГАЗИНОВ ============ */
/* Акция — коммерческая карточка, поэтому гротеск, а не антиква:
   антиква закреплена за вдохновением и афишей, гротеск — за навигацией
   и торговой частью. Срок действия вынесен на обложку: он и есть срочность. */
.sect--promos{padding:88px 0;background:var(--s-bg)}
[data-theme="dark"] .sect--promos{background:var(--g-navy)}

.sect--promos .sect__h2{
  font-family:var(--d-serif);font-weight:600;color:var(--s-fg);
  font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;
}

.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.pcard{display:flex;flex-direction:column}

.pcard__media{
  position:relative;display:block;overflow:hidden;
  aspect-ratio:4/3;background:var(--b-navy);
}
.pcard__media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.2' opacity='.4'%3E%3Cpath d='M38 80V52l10-9 10 9v28M58 80V44l11-10 11 10v36'/%3E%3Cpath d='M34 86c10-7 22-7 32 0s22 7 32 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
.pcard__img{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  visibility:hidden;                    /* показываем после загрузки, см. design.js */
  transition:transform .9s var(--d-ease);
}
.pcard:hover .pcard__img{transform:scale(1.05)}
/* срок действия — главное в акции после самой скидки */
/* Срок акции. Было: медный текст на полупрозрачном навй — 11 px капителью
   поверх фотографии, фактура снимка просвечивала и съедала и без того
   невысокий контраст. Стало: непрозрачный навй и кремовый текст (12.8:1),
   медная линия слева оставляет акцент бренда. */
.pcard__term{
  position:absolute;z-index:2;right:0;top:18px;
  padding:8px 14px;background:var(--b-navy);color:var(--b-cream);
  border-left:3px solid var(--b-copper);
  font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
}

.pcard__body{display:flex;flex-direction:column;gap:12px;padding:18px 0 0}
.pcard__title{
  font-family:var(--d-sans);font-weight:600;font-size:15px;line-height:1.4;
  letter-spacing:.01em;color:var(--s-fg);margin:0;
}
.pcard__title a{color:inherit}
.pcard:hover .pcard__title a{color:var(--s-accent-ink)}
.pcard__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:12px;color:var(--s-fg-soft);margin:0}
/* номер секции — по нему посетитель находит магазин в комплексе */
/* Номер секции был в рамке и перетягивал правый край строки на себя:
   в ряду карточек получалась цепочка одинаковых коробочек. Рамка снята,
   номер отделяется точкой и держится медным цветом и разрядкой. */
.pcard__sec{
  display:inline-flex;align-items:center;gap:9px;
  color:var(--s-accent-ink);font-size:11px;letter-spacing:.12em;
}
.pcard__sec::before{
  content:"";width:3px;height:3px;border-radius:50%;
  background:var(--s-line-strong);flex:none;
}

@media (max-width:1100px){
  .pgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:640px){
  .sect--promos{padding:64px 0 72px}
  /* четыре акции в одну колонку дают простыню — уводим в горизонтальную ленту */
  .pgrid{
    display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
    /* --pad — переменная контейнера прототипа, на 640 она 24px;
       фиксированные 20px уводили ленту из общей сетки */
    margin:0 calc(var(--pad) * -1);padding:0 var(--pad) 8px;
    /* без scroll-padding снап прилипал к краю экрана и сдвигал ленту
       на 24px из общей сетки */
    scroll-padding-left:var(--pad);
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pgrid::-webkit-scrollbar{display:none}
  .pcard{flex:0 0 74%;scroll-snap-align:start}
  .pcard__title{font-size:14px}
}

/* ============ 12. АРЕНДА ============ */
/* Единственный крупный блок под бизнес (п. 9.3 ТЗ). Тёмно-синяя полоса
   разбивает светлый ритм страницы и отделяет деловой сценарий от покупательского. */
.rblock{position:relative;overflow:hidden;background:var(--g-navy);color:var(--b-cream)}
/* Композиция зеркальна первому экрану: там фото справа, тут слева.
   Раньше правая треть блока оставалась пустой, а цифры висели в воздухе. */
.rblock__in{
  position:relative;z-index:2;
  max-width:none;width:100%;margin:0;
  padding-left:0;padding-right:calc(max(0px, (100% - var(--d-wrap)) / 2) + var(--pad));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.06fr);
  gap:0;align-items:stretch;min-height:clamp(520px,62vh,680px);
}
.rblock__media{
  position:relative;overflow:hidden;align-self:stretch;
  clip-path:polygon(0 0,100% 0,87% 100%,0 100%);
  background:var(--b-navy);
}
.rblock__media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.2' opacity='.4'%3E%3Cpath d='M38 80V52l10-9 10 9v28M58 80V44l11-10 11 10v36'/%3E%3Cpath d='M34 86c10-7 22-7 32 0s22 7 32 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
.rimg{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;visibility:hidden}
/* кадр светлый, блок тёмный: у среза растушёвка в тёмно-синий,
   медная линия по самой диагонали убрана: срез и так читается стыком
   фотографии с тёмной плашкой, а линия подчёркивала его лишний раз */
.rblock__media::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(100deg,rgba(14,26,43,0) 58%,rgba(14,26,43,.62) 100%);
}
/* в тёмной теме «Аренда» сплошная — между градиентными «Акциями» и «Журналом» */
[data-theme="dark"] .rblock{background:var(--b-navy)}
[data-theme="dark"] .rblock__media::after{background:linear-gradient(100deg,rgba(1,20,39,0) 58%,rgba(1,20,39,.62) 100%)}

.rblock__text{align-self:center;padding:72px 0 72px 64px;max-width:none}
/* волосяная линия перед надстрочником убрана — как и в первом экране:
   своя выдумка без опоры на брендбук */
.rblock__kicker{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--b-copper);
  margin:0 0 20px;
}
.rblock__h2{
  font-family:var(--d-serif);font-weight:600;text-transform:uppercase;
  font-size:clamp(28px,3.1vw,46px);line-height:1.08;letter-spacing:.01em;margin:0 0 20px;
}
.rblock__lead{font-size:16px;line-height:1.65;color:rgba(246,244,237,.75);max-width:460px;margin:0 0 30px}

/* цифры строкой, а не колонкой: так они держат ширину текста и не висят отдельно */
/* отступ до кнопок держала подпись под цифрами; её убрали, и ряд сел
   кнопкам на голову — отступ перенесён на сам ряд */
.rargs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 40px}
.rargs li{display:flex;flex-direction:column;gap:8px;padding-left:18px;border-left:1px solid rgba(196,154,108,.4)}
.rargs__n{
  font-family:var(--d-serif);font-weight:600;font-size:clamp(24px,2.1vw,32px);line-height:1;
  letter-spacing:-.01em;color:var(--b-cream);align-self:flex-start;
}
.rargs__c{font-size:12px;line-height:1.4;letter-spacing:.05em;color:rgba(246,244,237,.6)}
.rargs__note{font-size:11px;letter-spacing:.03em;color:rgba(246,244,237,.45);margin:0 0 30px}

.rblock__cta{display:flex;flex-wrap:wrap;gap:24px;align-items:center}
.dlink--inv{color:var(--b-copper)}
.dlink--inv:hover{border-bottom-color:var(--b-copper)}

/* ============ 13. ЖУРНАЛ ============ */
.sect--journal{padding:88px 0;background:var(--s-bg-2)}
[data-theme="dark"] .sect--journal{background:var(--g-navy)}

.sect--journal .sect__h2,.sect--find .sect__h2{
  font-family:var(--d-serif);font-weight:600;color:var(--s-fg);
  font-size:clamp(28px,3vw,42px);line-height:1.1;letter-spacing:.01em;text-transform:uppercase;
}

.jgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:start}
.jlead__media,.jrow__media{position:relative;display:block;overflow:hidden;background:var(--b-navy)}
.jlead__media{aspect-ratio:16/10;margin-bottom:22px}
.jrow__media{flex:0 0 132px;aspect-ratio:4/3}
.jlead__media::before,.jrow__media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.2' opacity='.4'%3E%3Cpath d='M38 80V52l10-9 10 9v28M58 80V44l11-10 11 10v36'/%3E%3Cpath d='M34 86c10-7 22-7 32 0s22 7 32 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
.jimg{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;
  visibility:hidden;transition:transform .9s var(--d-ease);
}
.jlead:hover .jimg,.jrow:hover .jimg{transform:scale(1.05)}
.jrubric{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--s-accent-ink);margin:0 0 10px}
/* Гротеск, а не антиква: лид журнала — такая же статья, как строки рядом,
   только крупнее. Антиква осталась на заголовках блоков и на числах. */
.jlead__title{font-family:var(--d-sans);font-weight:600;font-size:clamp(20px,1.9vw,26px);line-height:1.25;letter-spacing:0;margin:0 0 12px;color:var(--s-fg)}
.jlead__title a,.jrow__title a{color:inherit}
.jlead:hover .jlead__title a,.jrow:hover .jrow__title a{color:var(--s-accent-ink)}
.jmeta{font-size:12px;letter-spacing:.04em;color:var(--s-fg-soft);margin:0}
.jlist{display:flex;flex-direction:column}
.jrow{display:flex;gap:20px;align-items:flex-start;padding:22px 0;border-top:1px solid var(--s-line)}
.jlist .jrow:first-child{padding-top:0;border-top:0}
.jrow__body{flex:1;min-width:0}
.jrow__title{font-family:var(--d-sans);font-weight:600;font-size:15px;line-height:1.4;margin:0 0 8px;color:var(--s-fg)}
.jrow .jrubric{margin-bottom:8px}

/* ============ 14. НАЙТИ МАГАЗИН ============ */
.sect--find{padding:88px 0;background:var(--s-bg)}
[data-theme="dark"] .sect--find{background:var(--b-navy)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:64px;align-items:center}
.sect--find .sect__h2{margin:0 0 20px;display:block}
.fgrid__lead{font-size:16px;line-height:1.65;color:var(--s-fg-soft);max-width:440px;margin:0 0 30px}
.fgrid .dsearch{margin-bottom:18px;max-width:520px}
.fgrid .dchips{margin:0}
.fgrid__media{
  position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--b-navy);
  clip-path:polygon(13% 0,100% 0,100% 100%,0 100%);   /* тот же боковой срез, что в первом экране и «Аренде» */
}
.fgrid__media::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110' viewBox='0 0 120 120'%3E%3Cg fill='none' stroke='%23C49A6C' stroke-width='1.2' opacity='.4'%3E%3Cpath d='M38 80V52l10-9 10 9v28M58 80V44l11-10 11 10v36'/%3E%3Cpath d='M34 86c10-7 22-7 32 0s22 7 32 0'/%3E%3C/g%3E%3C/svg%3E");
  background-size:110px 110px;
}
.fimg{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;visibility:hidden}

/* ============ 15. ПОДПИСКА ============ */
/* Паттерн 02 «Линии движения» из брендбука (стр. 09) — единственное место,
   где он уместен: спокойная финальная полоса перед подвалом. */
.sblock{position:relative;overflow:hidden;background:var(--s-bg-2);padding:96px 0}
[data-theme="dark"] .sblock{background:var(--g-navy)}
/* поле ввода полупрозрачное — сквозь него просвечивали волны */
.sblock .sform__row{background:var(--s-bg)}
[data-theme="dark"] .sblock .sform__row{background:rgba(246,244,237,.06)}
.sblock__in{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.sblock__h2{
  font-family:var(--d-serif);font-weight:600;font-size:clamp(24px,2.4vw,34px);line-height:1.15;
  letter-spacing:.01em;margin:0 0 12px;color:var(--s-fg);
}
.sblock__h2 a{color:inherit}
.sblock__h2 a:hover{color:var(--s-accent-ink)}
.sblock__lead{font-size:15px;line-height:1.6;color:var(--s-fg-soft);margin:0}
.sform{display:flex;flex-direction:column;gap:14px}
.sform__row{display:flex;border:1px solid var(--s-line-strong);background:var(--s-field-bg);transition:border-color .2s}
.sform__row:focus-within{border-color:var(--s-accent)}
.sform__inp{flex:1;min-width:0;height:58px;padding:0 18px;border:0;background:none;font:inherit;font-size:15px;color:var(--s-fg)}
.sform__inp::placeholder{color:var(--s-fg-soft)}
.sform__inp:focus{outline:none}
.sform__go{
  /* та же щель снизу, что была у «Найти» в первом экране */
  display:inline-flex;align-items:center;justify-content:center;gap:10px;flex:none;
  align-self:stretch;padding:0 26px;margin:-1px -1px -1px 0;
  background:var(--s-accent);color:var(--s-btn-fill-fg);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;transition:filter .25s;
}
.sform__go:hover{filter:brightness(1.07)}
/* две галочки: персональные данные и согласие на рекламные рассылки —
   по закону «О рекламе» оно отдельное, в одну строку с ПДн его не сводят */
.sform__checks{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.scheck{display:flex;gap:12px;align-items:flex-start;font-size:12px;line-height:1.55;color:var(--s-fg-soft);cursor:pointer}
/* свой квадрат вместо системного: белый квадрат браузера выпадал из палитры */
.scheck input{
  -webkit-appearance:none;appearance:none;flex:none;
  width:16px;height:16px;margin:1px 0 0;border:1px solid var(--s-line-strong);border-radius:0;
  background:transparent no-repeat center/11px 11px;cursor:pointer;
  transition:background-color .18s,border-color .18s;
}
.scheck:hover input{border-color:var(--s-accent)}
.scheck input:checked{
  background-color:var(--s-accent);border-color:var(--s-accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.2l2.6 2.6L10 3.4' fill='none' stroke='%23011427' stroke-width='1.6'/%3E%3C/svg%3E");
}
.scheck input:focus-visible{outline:1px solid var(--s-accent);outline-offset:2px}
.scheck a{color:var(--s-accent-ink);border-bottom:1px solid var(--s-line-strong)}

/* ============ 16. ПОДВАЛ ============ */
.footer{background:var(--b-navy);color:rgba(246,244,237,.72);padding:64px 0 0}
[data-theme="dark"] .footer{background:var(--b-navy)}
.footer a{color:inherit}
.footer a:hover{color:var(--b-copper)}
.footer .logo__img--inv{filter:none;height:56px;width:auto}
.footer__addr{font-size:13px;line-height:1.6}
.footer__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-copper);margin-bottom:14px}
.footer__cols ul li{font-size:13px;line-height:2}
/* соцсети — фирменные логотипы заказчика вместо текстовых ссылок.
   Знаки собраны под тёмный фон: словесная часть белая, значок в фирменном
   цвете (#FF0033 и #0077FF). Цвет оставлен: перекрашивать чужие логотипы
   под палитру сайта запрещают их же гайдлайны. Приглушены непрозрачностью,
   чтобы не перебивать логотип комплекса выше */
.socials{gap:22px;align-items:center}
.socials a{display:block;border:0;padding:0;opacity:.82;transition:opacity .2s}
.socials a:hover{opacity:1}
.socials img{display:block;height:19px;width:auto}
.footer__legal{
  border-top:1px solid rgba(196,154,108,.2);margin-top:56px;padding-top:22px;padding-bottom:26px;
  font-size:12px;color:rgba(246,244,237,.55);
}

/* ============ 17. АДАПТИВ ОСТАЛЬНЫХ БЛОКОВ ============ */
@media (max-width:1100px){
  .rblock__in{grid-template-columns:1fr;min-height:0;padding:0}
  .rblock__media{
    height:46vw;min-height:280px;margin:0;
    clip-path:polygon(0 0,100% 0,100% 93%,0 100%);
  }
  .rblock__text{padding:48px calc(max(0px, (100% - var(--d-wrap)) / 2) + var(--pad)) 64px;align-self:start}
  .jgrid{grid-template-columns:1fr;gap:36px}
  /* minmax(0,1fr), а не 1fr: при 1fr колонка растягивается по min-content
     формы и блок вылезал за правый падинг на 28px на 375px */
  .fgrid,.sblock__in{grid-template-columns:minmax(0,1fr);gap:36px}
  /* колонки схлопнулись — текстовой половины рядом с кадром нет, границу
     рисовать нечему, и срез читался бы обрезкой фотографии */
  .fgrid__media{aspect-ratio:16/9;clip-path:none}
}
@media (max-width:640px){
  .rblock__media{height:60vw;min-height:230px}
  .rblock__text{padding:36px calc(max(0px, (100% - var(--d-wrap)) / 2) + var(--pad)) 56px}
  .rblock__cta{flex-direction:column;align-items:stretch;gap:18px}
  .rblock__cta .dbtn{width:100%;justify-content:center}
  .rblock__cta .dlink{justify-content:center}
  .rargs{grid-template-columns:1fr;gap:18px}
  .sect--journal,.sect--find{padding:64px 0 72px}
  .jlead__title{font-size:21px}
  .jrow__media{flex-basis:96px}
  .jrow__title{font-size:14px}
  .fgrid__media{aspect-ratio:4/3;margin:0 calc(var(--pad) * -1)}
  .sblock{padding:56px 0}
  .sform__go{padding:0 16px;font-size:11px;letter-spacing:.1em}
  .sform__inp{height:52px}   /* кнопка тянется по высоте строки, своя height ломала стык */
  .footer{padding-top:48px}
}

/* ============ 18. ШАПКА: ЛИПКАЯ, КОМПАКТНАЯ, ПОИСК В ОВЕРЛЕЕ ============ */
:root,[data-theme="light"]{--s-nav-solid:rgba(246,244,237,.97);--s-overlay:rgba(1,20,39,.45);
  --s-hairline:rgba(196,154,108,.3);--s-hairline-soft:rgba(196,154,108,.22)}
[data-theme="dark"]{--s-nav-solid:rgba(1,20,39,.97);--s-overlay:rgba(5,10,18,.6);
  --s-hairline:rgba(196,154,108,.24);--s-hairline-soft:rgba(196,154,108,.16)}

/* Шапка выведена из потока. При сжатии она теряет разом три высоты —
   утилитарную строку, 28 px строки навигации и 16 px логотипа, — и со
   sticky весь контент под ней скакал вверх на эти ~73 px (и обратно при
   возврате наверх). Fixed + отступ body на полную высоту шапки: поток
   не меняется вовсе, сжимается только сама шапка.
   --hdr-h измеряет design.js, значение здесь — на первый кадр. */
/* фон снят: в прототипе шапка красится белым, и в тёмной теме этот белый
   просвечивал сквозь полупрозрачную навигацию (8% от --s-nav-bg).
   Фон дают сами полосы: утилитарная непрозрачная, навигация с размытием */
.header{position:fixed;left:0;right:0;top:0;z-index:100;border-bottom:0;background:transparent}
body{padding-top:var(--hdr-h,138px)}
html{scroll-padding-top:76px}
/* на время замера высоты шапки гасим переходы, иначе она моргает */
.no-anim,.no-anim *{transition:none !important}

/* утилитарная строка сворачивается при прокрутке */
.utility{
  max-height:60px;overflow:hidden;
  transition:max-height .32s var(--d-ease),opacity .22s var(--d-ease),border-color .22s;
}
.is-sticky .utility{max-height:0;opacity:0;border-bottom-color:transparent}

.nav{transition:background .25s var(--d-ease),box-shadow .25s var(--d-ease)}
.nav__in{height:auto;min-height:92px;gap:32px;transition:min-height .32s var(--d-ease)}
.logo__img{transition:height .32s var(--d-ease)}
.menu__link{height:auto;min-height:56px;transition:min-height .32s var(--d-ease)}
.is-sticky .nav{background:var(--s-nav-solid);border-bottom-color:var(--s-hairline);box-shadow:0 12px 30px -22px rgba(0,0,0,.45)}
.is-sticky .nav__in{min-height:64px}
.is-sticky .logo__img{height:42px}

/* поиск в строке навигации убран: полноразмерное поле уже есть
   в первом экране и в блоке «Найти магазин». Здесь — иконка и оверлей. */
.hsearch{display:none !important}
.ic-search{
  display:block;flex:none;margin-left:auto;width:44px;height:44px;
  border:1px solid var(--s-line-strong);background-color:transparent;
  -webkit-mask:none;mask:none;
  position:relative;transition:border-color .2s,background-color .2s;
}
.ic-search::after{
  content:"";position:absolute;inset:0;background-color:var(--s-fg);
  -webkit-mask:url('icon-search.svg') no-repeat center/19px 19px;
          mask:url('icon-search.svg') no-repeat center/19px 19px;
  transition:background-color .2s;
}
.ic-search:hover{border-color:var(--s-accent)}
.ic-search:hover::after{background-color:var(--s-accent-ink)}
.is-search-open .ic-search{border-color:var(--s-accent);background-color:var(--s-accent)}
.is-search-open .ic-search::after{background-color:var(--s-btn-fill-fg)}

/* оверлей поиска */
.searchbar{
  position:absolute;left:0;right:0;top:100%;z-index:3;
  background:var(--s-nav-solid);backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.55);
  padding:30px 0 34px;
}
.searchbar .field--lg{
  border:1px solid var(--s-line-strong);background:var(--s-field-bg);
  border-radius:0;transition:border-color .2s;
}
.searchbar .field--lg:focus-within{border-color:var(--s-accent);box-shadow:none}
.searchbar .field--lg input{height:62px;padding:0 64px 0 20px;font-size:16px;color:var(--s-fg);background:none}
.searchbar .field--lg input::placeholder{color:var(--s-fg-soft)}
.searchbar .field__go{width:62px;border-left:1px solid var(--s-line);background-color:var(--s-accent-ink)}
.searchbar__hint{font-size:12px;letter-spacing:.04em;color:var(--s-fg-soft);margin-top:12px}

/* затемнение страницы под раскрытой шапкой */
.hscrim{
  position:fixed;inset:0;z-index:99;background:var(--s-overlay);
  opacity:0;visibility:hidden;transition:opacity .25s var(--d-ease),visibility .25s;
}
.is-search-open .hscrim,.is-mega-open .hscrim{opacity:1;visibility:visible}

/* ============ 19. МЕГАМЕНЮ ============ */
.mega{
  background:var(--s-nav-solid);backdrop-filter:saturate(140%) blur(10px);
  border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);
  box-shadow:0 26px 50px -34px rgba(0,0,0,.55);z-index:3;
}
.mega__in{padding-top:38px;padding-bottom:42px;gap:56px}
.mega__title{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-accent-ink);margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--s-line);
}
.mega__cats a,.mega__links a{
  font-size:14px;color:var(--s-fg);border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s;
}
.mega__cats a:hover,.mega__links a:hover{color:var(--s-accent-ink);border-color:var(--s-accent)}
.mega__cats li{margin-bottom:11px}
.mega__links li{margin-bottom:12px}
.mega__hint{font-size:12px;color:var(--s-fg-soft);margin-top:12px}
.mega .field--sm{border:1px solid var(--s-line-strong);background:var(--s-field-bg)}
.mega .field--sm:focus-within{border-color:var(--s-accent);box-shadow:none}
.mega .field--sm input{height:46px;padding:0 52px 0 16px;color:var(--s-fg);background:none}
.mega .field--sm input::placeholder{color:var(--s-fg-soft)}
.mega .field--sm .field__go{width:48px;border-left:1px solid var(--s-line);background-color:var(--s-accent-ink)}
.menu__item.is-open .menu__link{color:var(--s-accent-ink);border-bottom-color:var(--s-accent)}
.menu__link:hover{border-bottom-color:var(--s-accent)}

@media (max-width:1100px){
  .mega__in{gap:32px}
}
@media (max-width:760px){
  /* Утилитарная строка на телефоне спрятана в бургер (перенос — в design.js):
     ради трёх элементов она занимала целую полосу над шапкой. */
  .utility{display:none}
  .utility__actions--inmenu{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px;
    margin:18px 0 2px;padding-top:20px;border-top:1px solid var(--s-line);
  }
  /* «Аренда» — единственное действие для бизнеса, ему вся ширина строки */
  .utility__actions--inmenu>li:first-child{flex:0 0 100%}
  .utility__actions--inmenu .btn--ghost{
    display:flex;align-items:center;justify-content:center;width:100%;height:46px;
    border:1px solid var(--s-accent);color:var(--s-accent-ink);border-radius:2px;
    letter-spacing:.1em;text-transform:uppercase;font-size:11px;
  }
  .utility__actions--inmenu .utility__login{display:inline-block;padding:11px 0}
  .utility__actions--inmenu .themetog-li{margin-left:auto;padding-left:0;border-left:0}

  /* бургер рисовался цветом Ч/Б прототипа (--ink) — на тёмной шапке
     чёрных полосок не видно, в тёмной теме кнопка пропадала совсем */
  .burger span,.burger::before,.burger::after{background:var(--s-fg)}
  /* Панель меню вставала посреди экрана шириной по содержимому: у .nav
     есть backdrop-filter, он делает её containing block для панели, и
     пара left:0/right:0 из прототипа ширину не удержала. Задаём ширину
     явно. Заодно панель получает цвета темы — в прототипе она белая,
     и в тёмной теме меню открывалось белым листом поверх тёмной шапки. */
  .menu{
    left:0;width:100%;
    /* фон непрозрачный: с полупрозрачным сквозь панель просвечивал
       заголовок первого экрана */
    background:var(--s-bg);
    border-top:1px solid var(--s-hairline);border-bottom:1px solid var(--s-hairline-soft);
  }
  .menu__link{border-bottom:1px solid var(--s-line)}
  .menu__list>.menu__item:last-child .menu__link{border-bottom:0}
}

@media (max-width:640px){
  .is-sticky .nav__in{min-height:58px}
  .is-sticky .logo__img{height:36px}
  .ic-search{width:40px;height:40px}
  .searchbar{padding:20px 0 24px}
  .searchbar .field--lg input{height:54px;font-size:15px}
}

/* ============ 20. МЕНЮ ПО ЦЕНТРУ ============ */
/* Было «1fr — меню — 1fr»: меню вставало ровно по центру контейнера
   страницы. Геометрически верно, но логотип занимает 184px, а справа
   только иконка поиска 44px — просвет слева получался 64px, справа 204,
   и строка читалась сдвинутой влево. Теперь крайние колонки по ширине
   своего содержимого, а меню центрируется в остатке между ними:
   просветы равны. Вернуть прежнее — заменить auto на 1fr по краям. */
.nav__in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px}
.nav__in>.logo{justify-self:start}
.nav__in>.menu{justify-self:center}
.nav__side{display:flex;align-items:center;justify-content:flex-end;gap:10px}
.ic-search{margin-left:0}
.menu__list{gap:30px}

/* ============ 21. ВЫПАДАЮЩИЕ ПАНЕЛИ МЕНЮ ============ */
.mega{border-top:1px solid rgba(196,154,108,.35)}
.mega__in{grid-template-columns:minmax(0,1.9fr) minmax(0,1fr) minmax(0,1.05fr);gap:52px;padding-top:40px;padding-bottom:44px}
#mega-about .mega__in{grid-template-columns:repeat(3,minmax(0,1fr))}

.mega__title{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-accent-ink);margin-bottom:20px;
  padding-bottom:12px;border-bottom:1px solid var(--s-line);
}
.mega__cats a,.mega__links a{
  position:relative;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;line-height:1.4;color:var(--s-fg);border-bottom:1px solid transparent;
  transition:color .18s,border-color .18s,transform .18s var(--d-ease);
}
/* стрелка появляется на наведении и не двигает соседей */
.mega__cats a::after,.mega__links a::after{
  content:"";width:0;height:9px;background:var(--s-accent);opacity:0;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='9'%3E%3Cpath d='M0 4.5h14M10 1l4 3.5L10 8' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:width .18s var(--d-ease),opacity .18s;
}
.mega__cats a:hover,.mega__links a:hover{color:var(--s-accent-ink);border-color:transparent}
.mega__cats a:hover::after,.mega__links a:hover::after{width:15px;opacity:1}
.mega__cats{columns:2;column-gap:40px}
.mega__cats li{margin-bottom:12px;break-inside:avoid}
.mega__links li{margin-bottom:13px}

/* третья колонка «Магазинов» — плашка: единственное действие в панели */
#mega-shops .mega__col:last-child{
  border:1px solid var(--s-line);background:var(--s-plate);
  padding:22px 22px 24px;align-self:start;
}
#mega-shops .mega__col:last-child .mega__title{margin-bottom:16px}
.mega__hint{font-size:12px;line-height:1.5;color:var(--s-fg-soft);margin-top:12px}
.mega .field--sm{border:1px solid var(--s-line-strong);background:var(--s-bg);border-radius:0}
.mega .field--sm:focus-within{border-color:var(--s-accent);box-shadow:none}
.mega .field--sm input{height:46px;padding:0 52px 0 14px;font-size:14px;color:var(--s-fg);background:none}
.mega .field--sm input::placeholder{color:var(--s-fg-soft)}
.mega .field--sm .field__go{width:48px;border-left:1px solid var(--s-line);background-color:var(--s-accent-ink)}

@media (max-width:1100px){
  .menu__list{gap:22px}
  .mega__in{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:32px}
  #mega-shops .mega__col:last-child{grid-column:span 2}
}
@media (max-width:1000px){
  /* меню уходит в выдвижную панель только с 760px, а до неё строка
     должна помещаться: ужимаем логотип, кегль и шаг пунктов */
  .nav__in{display:flex;justify-content:space-between;gap:16px}
  .nav__side{gap:4px}
  .menu{min-width:0}
  .menu__list{gap:15px}
  .menu__link{font-size:12px;letter-spacing:.04em}
  .logo__img{height:46px}
}
@media (max-width:860px){
  .menu__list{gap:11px}
  .menu__link{font-size:11px;letter-spacing:.02em}
  .logo__img{height:42px}
}
@media (max-width:640px){
  .mega__in{grid-template-columns:1fr;gap:26px;padding-top:24px;padding-bottom:28px}
  #mega-about .mega__in{grid-template-columns:1fr}
  #mega-shops .mega__col:last-child{grid-column:auto}
  .mega__cats{columns:1}
  /* на телефоне 14 категорий с полями по 13px давали простыню на 800px —
     делаем строки списка с разделителями */
  .mega__cats li,.mega__links li{margin-bottom:0}
  .mega__cats a,.mega__links a{
    display:flex;width:100%;justify-content:space-between;
    padding:13px 0;border-bottom:1px solid var(--s-line);
  }
  .mega__cats a::after,.mega__links a::after{width:15px;opacity:.5}
  .mega__title{margin-bottom:8px}
}

/* ============ 22. МЕГАМЕНЮ: СПИСОК-ОГЛАВЛЕНИЕ И ЖИВАЯ ПРЕВЬЮШКА ============
   Было: три колонки одинаковых текстовых ссылок — панель читалась как
   список ссылок в подвале и ничем не отличалась от остальных выпадашек.
   Стало: категории превращены в оглавление «название — число магазинов»
   с медной линией-наведением, а правая колонка — панель-превью, которая
   показывает фотографию наведённой категории (снимки те же, что в блоке
   «Направления» ниже по странице). Разметку собирает design.js, чтобы
   partials.js и Ч/Б-прототип остались нетронутыми. */

.mega{position:relative;overflow:hidden}
.mega__in{position:relative;z-index:1}

/* ---- оглавление категорий ---- */
#mega-shops .mega__in{grid-template-columns:minmax(0,2.2fr) minmax(0,.9fr) minmax(0,1.1fr);gap:40px}
/* Было: CSS-колонки. Они раскладывают строки независимо, поэтому
   двухстрочные названия сдвигали свою колонку относительно соседней и
   ряды разъезжались. Стало: сетка в две колонки с заполнением сверху
   вниз — высота ряда общая для обеих колонок, строки стоят друг против
   друга. Порядок категорий при этом сохранён. */
.mcats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(7,auto);grid-auto-flow:column;
  column-gap:28px;margin:0;padding:0;list-style:none;
}
.mcats li{display:flex}
.mcats li>a{width:100%}
.mcats li{break-inside:avoid;margin:0}
/* Разделители у каждой строки были: четырнадцать линеек в двух колонках
   читались как таблица и спорили с линией под заголовком колонки.
   Ряды держит только ритм отступов, а наведение даёт плашку и медную
   засечку — линий в покое нет вовсе. */
/* Строка — сетка «значок · название · число»: названия начинаются от
   одной вертикали и в двухстрочных строках не разъезжаются, числа стоят
   собственной колонкой. Раньше это был flex, и при переносе названия
   число отрывалось от него к дальнему краю. */
.mcats a{
  position:relative;display:grid;
  grid-template-columns:20px minmax(0,1fr) 24px;
  align-items:center;gap:12px;
  padding:9px 10px;
  font-size:14px;line-height:1.35;color:var(--s-fg);
  transition:color .18s,background-color .18s;
}
.mcats a::after,.mcats a::before{content:none}
.mcats__ic{
  width:20px;height:20px;display:block;flex:none;
  color:var(--s-accent);opacity:.75;transition:opacity .18s;
}
.mcats__ic svg{width:100%;height:100%;display:block}
.mcats a:hover,.mcats a:focus-visible{color:var(--s-accent-ink);background:var(--s-plate)}
.mcats a:hover .mcats__ic,.mcats a:focus-visible .mcats__ic{opacity:1}
.mcats__n{flex:1;min-width:0}
.mcats__c{
  font-size:11px;letter-spacing:.06em;color:var(--s-fg-soft);
  font-variant-numeric:tabular-nums;text-align:right;
}
.mcats a:hover .mcats__c{color:var(--s-accent)}

/* ---- средняя колонка: навигация + номер помещения ---- */
.mroom{margin-top:30px;padding-top:24px;border-top:1px solid var(--s-line)}
.mroom__t{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-accent-ink);margin:0 0 14px;
}
#mega-shops .mega__col:last-child{border:0;background:none;padding:0}

/* ---- панель-превью ---- */
.mprev{
  display:block;position:relative;align-self:start;
  color:inherit;text-decoration:none;
  border:1px solid var(--s-line);background:var(--s-plate);
  transition:border-color .22s;
}
.mprev:hover{border-color:var(--s-accent)}
.mprev__media{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:16/10;background:var(--s-plate);
}
.mprev__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:opacity .25s var(--d-ease),transform .5s var(--d-ease);
}
.mprev:hover .mprev__media img{transform:scale(1.04)}
.mprev__body{display:block;padding:14px 18px 18px}
.mprev__kicker{
  display:block;font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--s-accent-ink);margin-bottom:7px;
}
.mprev__t{
  display:block;font-family:var(--d-serif);font-weight:600;font-size:18px;
  line-height:1.2;color:var(--s-fg);margin-bottom:6px;
}
.mprev__c{display:block;font-size:12px;line-height:1.5;color:var(--s-fg-soft)}
.mprev:hover .mprev__go{border-bottom-color:var(--s-accent)}
.mprev__go{
  display:inline-flex;align-items:center;gap:9px;margin-top:14px;
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--s-accent-ink);
}

/* ---- панель «О комплексе»: три колонки ссылок и та же превьюшка ---- */
#mega-about .mega__in{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr) minmax(0,1.3fr);
  gap:44px;
}

@media (max-width:1100px){
  #mega-shops .mega__in,#mega-about .mega__in{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:34px}
  #mega-shops .mega__col--prev,#mega-about .mega__col--prev{grid-column:span 2}
  .mprev{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);align-items:center}
  .mprev__media{aspect-ratio:16/9}
  .mprev__body{padding:16px 20px}
}
@media (max-width:640px){
  #mega-shops .mega__in,#mega-about .mega__in{grid-template-columns:1fr;gap:24px}
  #mega-shops .mega__col--prev,#mega-about .mega__col--prev{grid-column:auto}
  .mcats{columns:1}
  /* в одну колонку это уже не таблица, а длинный список для пальца —
     тонкая линия помогает отделить строки друг от друга */
  .mcats a{padding:13px 2px;border-bottom:1px solid var(--s-line)}
  .mcats li:last-child a{border-bottom:0}
  /* строки списка на телефоне уже с разделителями — своя линия у блока
     «номер помещения» давала двойную черту и пустую полосу между ними */
  .mroom{border-top:0;margin-top:16px;padding-top:0}
  .mroom{margin-top:22px;padding-top:20px}
  .mprev{grid-template-columns:minmax(0,108px) minmax(0,1fr)}
  .mprev__media{aspect-ratio:1/1;clip-path:none}
  .mprev__body{padding:12px 14px}
  .mprev__t{font-size:15px}
  .mprev:hover .mprev__go{border-bottom-color:var(--s-accent)}
.mprev__go{margin-top:10px}
}

/* Шапка фиксированная, а на телефоне выдвижное меню (.menu) и панели лежат
   внутри неё: без ограничения высоты длинный список категорий уходил за
   нижний край экрана и доскроллить до него было нечем. */
@media (max-width:760px){
  .menu,.searchbar,.mega{
    max-height:calc(100dvh - var(--hdr-h,138px));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  }
}

/* ============ 23. ПОДВАЛ: ВЕДУЩАЯ СТРОКА И ЛИНЕЙКА КОЛОНОК ============ */
/* Перебрали три схемы (визитка сбоку, полосы) и вернулись сюда:
   колонки ссылок короткие (3–4 пункта), и любая конструкция рядом с ними
   оказывалась выше или ниже, а разница превращалась в дыру. Здесь колонки
   равные и ничего с ними не соседствует, поэтому сравнивать нечего. */
.footer__in{display:block;padding-bottom:40px}

/* ведущая строка: знак и соцсети разведены по краям, под ними линия */
.footer__lead{
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:24px;padding-bottom:30px;
}
.footer__logo{display:block}
.footer .logo__img--inv{filter:none;height:64px;width:auto;display:block}
/* Знаки площадок в одноцветном начертании: цветные версии были самыми
   яркими пятнами подвала и перетягивали внимание с логотипа комплекса.
   Значок кремовый, внутренняя деталь цвета подвала — иначе при сплошной
   заливке пропадают буква ВК и треугольник YouTube.
   Перед сдачей заменить на официальные с бренд-страниц площадок. */
.footer__soc{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin:0;padding:0;list-style:none}
/* в покое одноцветные, по наведению — фирменные цвета площадок.
   Два файла друг над другом, а не фильтр: переход из серого фильтром
   даёт грязный оттенок, а здесь оба начертания настоящие */
.footer__soc a{
  position:relative;display:block;padding:0;border:0;
  opacity:.78;transition:opacity .2s;
}
.footer__soc a:hover{opacity:1}
.soc__mark{display:block;height:18px;width:auto;transition:opacity .22s var(--d-ease)}
.soc__mark--color{position:absolute;left:0;top:0;opacity:0}
.footer__soc a:hover .soc__mark--color,
.footer__soc a:focus-visible .soc__mark--color{opacity:1}
.footer__soc a:hover .soc__mark:not(.soc__mark--color),
.footer__soc a:focus-visible .soc__mark:not(.soc__mark--color){opacity:0}

/* одна линейка колонок: контакты встали такой же колонкой, как разделы,
   поэтому все заголовки сидят на общей строке */
.footer__nav{
  display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:36px 32px;
  padding-top:34px;border-top:1px solid rgba(196,154,108,.22);
}
.footer__title{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--b-copper);margin:0 0 14px}
.footer__col ul{margin:0;padding:0;list-style:none}
.footer__col li{font-size:13px;line-height:1.55;margin-bottom:11px}
.footer__col li:last-child{margin-bottom:0}
.footer__col a{border-bottom:1px solid transparent;transition:color .18s,border-color .18s}
.footer__col a:hover{color:var(--b-copper);border-bottom-color:rgba(196,154,108,.5)}
.footer__col span{color:rgba(246,244,237,.6)}

/* отступ до правовой строки сокращён с 56 до 32px: при колонках
   в 3–4 пункта большой разрыв читался пустотой, а не воздухом */
/* Линейка не во всю ширину, а по колонкам контента: .footer__legal сам
   является .wrap, и его border-top уходил в края страницы, тогда как
   линейка над колонками (.footer__nav) и над соцсетями нарисована внутри
   контейнера. Рисуем её псевдоэлементом с тем же отступом. */
.footer__legal{
  position:relative;
  display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;
  border-top:0;margin-top:32px;padding-top:22px;padding-bottom:26px;
  font-size:12px;color:rgba(246,244,237,.55);
}
.footer__legal::before{
  content:"";position:absolute;left:var(--pad);right:var(--pad);top:0;
  height:1px;background:rgba(196,154,108,.2);
}

@media (max-width:1100px){
  .footer__nav{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:760px){
  .footer__nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 24px;order:2}
  /* Ведущая строка разбирается: на телефоне знак и соцсети стояли рядом
     в одной строке у самого верха подвала — знак занимал треть ширины,
     соцсети прижимались к правому краю. Теперь .footer__lead раскрывается
     (display:contents), и её содержимое становится строками подвала:
     знак во всю ширину, следом колонки, соцсети — в самый низ,
     перед правовой строкой. */
  /* gap:64px приходил из style.css (сетка подвала Ч/Б) и в столбике вставал
     между знаком и колонками — до пунктов меню выходило ~100px пустоты */
  .footer__in{display:flex;flex-direction:column;gap:0}
  .footer__lead{display:contents}
  .footer__logo{order:1;padding-bottom:26px}
  .footer .logo__img--inv{height:52px}
  .footer__soc{order:3;gap:28px;margin-top:30px;padding-top:26px;border-top:1px solid rgba(196,154,108,.22)}
  /* под соцсетями складывались нижний отступ подвала (40px) и верхний
     отступ правовой строки (32px) — до линии получалось 72px пустоты */
  .footer__in{padding-bottom:0}
  .footer__legal{margin-top:26px}
}
/* на 375px две колонки ещё читаются, в одну подвал вытягивался на экран
   с лишним — одна колонка остаётся для совсем узких */
@media (max-width:760px){
  /* ссылки переносились по ширине, и расстояния между строками выходили
     разные: между © и первой ссылкой — зазор флекса, между самими
     ссылками — ноль. Ставим одну колонку с единым шагом.
     Порог тот же, что у бургера: на 700px строка тоже переносилась */
  .footer__legal{display:block;padding-bottom:30px}
  /* шаг держат не зазоры флекса, а тач-зоны ссылок: в прототипе каждой
     ссылке подвала добавлено по 12px сверху и снизу (п. 9.4), и строки
     расходились на 31px при семипиксельном зазоре. Зазор убран, тач-зона
     ужата до 10px — между строками ровно 20px, зона остаётся 38px */
  .footer__legal>p{margin:0 0 10px}
  .footer__legal ul{flex-direction:column;gap:0}
  .footer__legal a{padding:10px 0}
}
@media (max-width:359px){
  .footer__nav{grid-template-columns:1fr}
}

/* ============ 24. АФИША СТРОКАМИ ============
   Было: три карточки «фото сверху, текст снизу» — ровно то же построение,
   что у акций следом, и два одинаковых блока шли подряд. Стало: афишная
   строка — крупная дата антиквой, кадр, название с местом и временем,
   действие у правого края. Семантически вернее (афиша — это расписание,
   а не витрина) и снимает два тяжёлых приёма сразу: череду одинаковых
   сеток и плашку даты поверх фотографии — дата вышла из кадра. */
/* Две колонки, но не те, что были. Раньше между колонками стоял только
   зазор, и глаз вёл «заголовок → кадр → дата следующего» как одну ленту,
   а строки разной высоты расходились по базовым линиям. Теперь события
   разделены вертикальной линейкой, ячейки тянутся на всю высоту ряда, и
   всё содержание события — название, место со временем и действие — собрано
   в один столбик слева. Действие ушло из правой кромки под мету — строка
   стала вдвое уже, и в ряд встают два события. */
.eposter{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
/* display:grid бьёт [hidden], и состояние ?events=0 не срабатывало */
.eposter[hidden]{display:none}
/* линия под заголовком секции — верхняя кромка списка, своей границы
   .eposter не ставит, иначе две линии в 36px друг от друга */

.erow{
  display:grid;grid-template-columns:96px 200px minmax(0,1fr);
  align-items:start;gap:0 24px;padding:24px 0;
}
/* Разделитель между колонками и линия под рядом сняты — вместе с
   линией под заголовком секции получалась решётка из трёх линеек на два
   события. События делит разрыв в 88px и медная линейка даты — она же
   начало каждого события */
.erow:nth-child(even){padding-left:44px}
.erow:nth-child(odd){padding-right:44px}
/* нечётная последняя строка разворачивается на оба столбца —
   ряд не остаётся наполовину пустым */
.erow:last-child:nth-child(odd){grid-column:1 / -1;padding-right:0;grid-template-columns:96px 240px minmax(0,1fr)}
/* медная линейка во всю высоту строки — якорь по левому краю события */
.erow__date{
  display:flex;flex-direction:column;align-items:flex-start;gap:6px;
  align-self:stretch;
  padding-left:16px;border-left:2px solid var(--s-accent);
  white-space:nowrap;          /* «24—26» ломалось на две строки */
}
.erow__date b{
  font-family:var(--d-serif);font-weight:600;font-size:clamp(22px,1.7vw,26px);
  line-height:1;letter-spacing:-.01em;color:var(--s-fg);
}
/* подпись месяца серая, а не медная: медного в строке ровно два пятна —
   линейка даты (графика) и ссылка-действие (единственное действие) */
.erow__date i{
  font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--s-fg-soft);
}
.erow__media{
  display:block;position:relative;overflow:hidden;
  aspect-ratio:16/10;background:var(--s-plate);
}
/* срез брендбука здесь снят: на кадре в 125px высотой те же 22px съедали
   пятую часть снимка. Он остался на крупных обложках внутри события */
.erow__media .erow__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .7s var(--d-ease);
}
.erow:hover .erow__media .erow__img{transform:scale(1.05)}
/* 2px сверху — оптическая компенсация полуинтерлиньяжа заголовка, без неё
   верх названия не совпадает с верхом цифры даты */
/* колонка тянется на высоту строки — её задаёт кадр, — чтобы действие
   встало на нижнюю кромку снимка, а не сразу под подписью */
.erow__body{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:2px;align-self:stretch}
/* Гротеск: название события — строка перечня, а не заголовок блока.
   Кегль чуть ниже прежнего — гротеск в том же размере читается крупнее
   антиквы и начинал спорить с заголовком секции */
.erow__title{
  font-family:var(--d-sans);font-weight:600;font-size:clamp(16px,1.15vw,18px);
  line-height:1.35;letter-spacing:.01em;color:var(--s-fg);margin:0;
}
.erow__title a{color:inherit;transition:color .2s}
.erow:hover .erow__title a{color:var(--s-accent-ink)}
.erow__meta{display:flex;align-items:center;flex-wrap:wrap;gap:10px;font-size:13px;color:var(--s-fg-soft);margin:0}
.erow__dot{width:4px;height:4px;border-radius:50%;background:var(--s-accent);flex:none}
/* Было подчёркивание по наведению — в покое действие не отличалось от
   подписи под ним. Теперь медная обводка той же логики, что у .dbtn--ghost,
   только ростом под строку афиши; прижата к низу колонки, то есть к нижней
   кромке кадра. */
/* два действия в строке: «Регистрация» и «Подробнее». Нижний отступ
   держит обёртка, а не сами кнопки */
/* действия прижаты к низу колонки описания: их низ совпадает с нижней
   кромкой кадра */
.erow__acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:auto}
/* Шаг букв и поля ужаты против .dbtn: колонка описания в строке афиши
   вдвое уже контейнера, и пара кнопок в обычных метриках в неё не
   помещалась — «Подробнее» переносилось под «Регистрацию» и съезжало
   ниже кромки кадра. */
.erow__cta{
  display:inline-flex;align-items:center;justify-content:center;
  height:40px;padding:0 16px;border-radius:2px;
  font-size:11px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
  border:1px solid transparent;
  transition:background-color .2s,color .2s,border-color .2s,filter .2s;
}
/* «Регистрация» — главное действие строки, поэтому залита медным */
.erow__cta:not(.erow__cta--more):not(.erow__cta--off){
  background:var(--s-accent);color:var(--s-btn-fill-fg);border-color:var(--s-accent);
}
.erow__cta:not(.erow__cta--more):not(.erow__cta--off):hover{filter:brightness(1.07)}
/* состояние «мест нет» — п. 6.8 ТЗ. Меняются только статус и кадр: дата и
   её линейка остаются в цвете, иначе строка перестраивается структурно и
   читается как сбой вёрстки, а не как статус события */
/* «Мест нет» обводки не получает: это статус, а не действие, и рамка
   обещала бы нажатие. Высота и место в колонке те же, чтобы строки
   стояли на одной линии */
.erow__cta--off{color:var(--s-fg-soft);cursor:default;background:none;border-color:transparent;padding:0}
.erow__cta--off:hover{background:none;color:var(--s-fg-soft);border-color:transparent;filter:none}
/* «Подробнее» — второе действие и живёт ссылкой, без рамки: колонка
   описания в афише из двух столбцов — 252px на 1440, и две кнопки туда
   не помещаются. Заодно пара читается иерархией: залитая кнопка —
   главное действие, ссылка — вспомогательное */
.erow__cta--more{
  background:none;border-color:transparent;padding:0;color:var(--s-fg-soft);
  border-bottom:1px solid transparent;
}
.erow__cta--more:hover{background:none;color:var(--s-accent-ink);border-bottom-color:var(--s-accent)}
.erow--off .erow__media .erow__img{filter:grayscale(1) brightness(.85)}

/* Порог поднят с 1100 до 1340. Колонка описания в афише из двух столбцов
   равна половине контента минус 388px (дата, кадр и зазоры), а паре
   действий нужно 235px — значит два столбца держатся только от 1326px.
   Ниже «Подробнее» переносилось под «Регистрацию» и съезжало с нижней
   кромки кадра: на 1150px колонка описания — 140px. */
@media (max-width:1340px){
  /* в две колонки событие сжимается до нечитаемого — раскладываем стопкой */
  .eposter{grid-template-columns:1fr}
  .erow,.erow:last-child:nth-child(odd){grid-template-columns:110px 220px minmax(0,1fr);gap:0 28px}
  .erow:nth-child(odd),.erow:nth-child(even){padding-left:0;padding-right:0;border-left:0}
}
@media (max-width:760px){
  .erow,.erow:last-child:nth-child(odd){grid-template-columns:92px minmax(0,1fr);gap:16px 18px;padding:20px 0}
  .erow__date{order:1;align-self:start;padding-left:14px}
  .erow__body{order:2;padding-top:0}
  .erow__media{order:3;grid-column:1 / -1}
  .erow__acts{margin-top:4px}
}

/* ============ ШАПКА ТЁМНО-СИНЯЯ В ОБЕИХ ТЕМАХ ============ */
/* Строка навигации в светлой теме — тёмно-синяя плашка тем же градиентом,
   что блок «Аренда» (по просьбе заказчика, 06.10). Цвета темы переопределены
   только на самой строке (.nav__in): мегаменю и поиск лежат рядом с ней
   и остаются светлыми. Мобильная панель меню — внутри строки, тоже тёмная. */
html:not([data-theme="dark"]) .nav,
html:not([data-theme="dark"]) .is-sticky .nav{background:var(--g-navy);border-bottom-color:rgba(196,154,108,.28)}
/* выпадающие панели и поиск — тоже синие, продолжение шапки (06.10) */
html:not([data-theme="dark"]) .nav__in,
html:not([data-theme="dark"]) .mega,
html:not([data-theme="dark"]) .searchbar{
  --s-bg:var(--b-navy);
  --s-bg-soft:var(--b-navy);
  --s-field-bg:rgba(246,244,237,.06);
  --s-plate:rgba(196,154,108,.07);
  --s-line-faint:rgba(196,154,108,.08);
  --s-fg:var(--b-cream);
  --s-fg-soft:rgba(246,244,237,.72);
  --s-accent-ink:var(--b-copper);      /* медный на тёмно-синем = 6.04:1 */
  --s-line:rgba(196,154,108,.22);
  --s-line-strong:rgba(196,154,108,.44);
  --s-hairline:rgba(196,154,108,.24);
  --s-hairline-soft:rgba(196,154,108,.16);
  --s-nav-solid:var(--b-navy);
  color:var(--s-fg);
}
html:not([data-theme="dark"]) .mega,
html:not([data-theme="dark"]) .searchbar{border-top-color:rgba(196,154,108,.28);border-bottom-color:rgba(196,154,108,.22)}
html:not([data-theme="dark"]) .nav__in .themetog{background:rgba(196,154,108,.12)}

/* ============ МОБИЛЬНОЕ МЕНЮ ============ */
/* Панель бургера — на всю высоту экрана под шапкой, со своей прокруткой;
   страница под ней не прокручивается. «Магазины» и «О комплексе» раскрываются
   аккордеоном на месте: выпадающие панели десктопа на телефоне открывались
   под панелью меню, и пункты со стрелкой не делали ничего. Подменю собирает
   design.js из тех же панелей, ссылки одни и те же. */
.msub,.mcontacts{display:none}
@media (max-width:760px){
  html.is-menu-open{overflow:hidden}
  .menu{
    height:var(--mnav-h,calc(100vh - 72px));overflow-y:auto;overscroll-behavior:contain;
    padding:4px var(--pad) 28px;
  }
  .menu.is-open{display:flex;flex-direction:column}
  .menu__list{flex:none}
  /* у пунктов-кнопок был отступ браузера — они стояли на 12 px правее ссылок */
  .menu__link{padding:0;min-height:56px;font-size:13px;letter-spacing:.12em;text-align:left;background:none}
  .menu__link .caret{transition:transform .25s var(--d-ease)}
  .menu__item.is-sub-open>.menu__link{color:var(--s-accent-ink);border-bottom-color:transparent}
  .menu__item.is-sub-open>.menu__link .caret{transform:translateY(2px) rotate(-135deg)}

  .msub{display:block;padding:0 0 18px;border-bottom:1px solid var(--s-line)}
  .msub[hidden]{display:none}
  .msub__t{
    font-size:10px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--s-accent-ink);margin:16px 0 4px;
  }
  .msub__t:first-child{margin-top:0}
  .msub ul{border-left:1px solid var(--s-line)}
  .msub a{
    display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:9px 0 9px 16px;font-size:15px;line-height:1.35;color:var(--s-fg);
  }
  .msub a:hover,.msub a:active{color:var(--s-accent-ink)}
  .msub__c{flex:none;font-size:12px;color:var(--s-fg-soft)}

  .utility__actions--inmenu{flex:none}

  .mcontacts{
    display:block;flex:none;margin-top:auto;padding-top:22px;border-top:1px solid var(--s-line);
    font-size:13px;line-height:1.7;color:var(--s-fg-soft);
  }
  .mcontacts__tel{display:inline-block;font-family:var(--d-serif);font-size:22px;line-height:1.3;color:var(--s-fg);margin-bottom:6px}
  .mcontacts__way{color:var(--s-accent-ink);text-decoration:underline;text-underline-offset:3px}

  /* бургер превращается в крестик */
  .burger span,.burger::before,.burger::after{transition:transform .25s var(--d-ease),opacity .2s,top .25s var(--d-ease)}
  .burger.is-active span{opacity:0}
  .burger.is-active::before{top:21px;transform:rotate(45deg)}
  .burger.is-active::after{top:21px;transform:rotate(-45deg)}
}

/* ============ ПОДПИСКА: ЭКРАН «ПРОВЕРЬТЕ ПОЧТУ» ============ */
/* встаёт в ту же ячейку сетки, что и форма: отдельной страницы подписки нет */
.sblock .sform[hidden],.sblock .sdone[hidden]{display:none}
.sblock .sdone{grid-column:2;grid-row:1;display:flex;gap:20px;align-items:flex-start;padding:28px 30px;border:1px solid var(--s-accent);background:var(--s-field-bg)}
.sdone__ic{flex:none;width:40px;height:40px;background:var(--s-accent);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 5h18v14H3z'/%3E%3Cpath d='M3 5l9 8 9-8'/%3E%3C/svg%3E") no-repeat center/contain;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.1'%3E%3Cpath d='M3 5h18v14H3z'/%3E%3Cpath d='M3 5l9 8 9-8'/%3E%3C/svg%3E") no-repeat center/contain}
.sdone__h{font-family:var(--d-serif);font-weight:600;font-size:22px;text-transform:uppercase;letter-spacing:.01em;color:var(--s-fg);margin:0 0 8px}
.sdone__t{font-size:14px;line-height:1.6;color:var(--s-fg-soft);margin:0}
.sdone__t b{color:var(--s-fg)}
.sdone .dlink--btn{background:none;border:0;border-bottom:1px solid var(--s-accent);padding:0;font:inherit;color:var(--s-accent-ink);cursor:pointer}
.sform__row.is-invalid{border-color:#B5483A}
.scheck.is-invalid input{border-color:#B5483A}
@media (max-width:1000px){.sblock .sdone{grid-column:auto;grid-row:auto}}

/* ============ СОБЫТИЯ: «ПОДРОБНЕЕ» С КОНТУРОМ, КАРТОЧКА НА ТЕЛЕФОНЕ ============ */
/* «Подробнее» — второе действие, но кнопкой с медным контуром (10.10,
   решение Ивана): ссылка без рамки терялась рядом с залитой «Регистрацией» */
.erow__cta.erow__cta--more,.erow__cta.erow__cta--more:hover{height:40px;padding:0 18px;border:1px solid var(--s-accent);border-radius:2px}
.erow__cta.erow__cta--more{background:none;color:var(--s-accent-ink)}
.erow__cta.erow__cta--more:hover{background:var(--s-accent);color:var(--s-btn-fill-fg)}

/* телефон: событие карточкой во всю ширину — фото, дата строкой,
   название, место, кнопки рядом (как в афише) */
@media (max-width:760px){
  .erow,.erow:last-child:nth-child(odd){grid-template-columns:minmax(0,1fr);gap:14px;padding:24px 0}
  .erow__media{order:0;grid-column:1}
  .erow__date{order:1;flex-direction:row;align-items:baseline;gap:8px;padding-left:12px}
  .erow__date b{font-size:22px;font-variant-numeric:lining-nums}
  .erow__body{order:2;grid-column:1}
  .erow__acts{flex-wrap:nowrap;gap:16px;margin-top:6px}
}

/* в две колонки афиши на главной узкая колонка текста — кнопки компактнее, чтобы пара встала в строку */
@media (min-width:1341px){
  .eposter .erow__acts{gap:10px;flex-wrap:nowrap}
  .eposter .erow__cta{padding:0 12px;letter-spacing:.06em}
  .eposter .erow__cta.erow__cta--more,.eposter .erow__cta.erow__cta--more:hover{padding:0 12px}
}