/* ==========================================================================
   «ТИХОЕ МЕСТО» — база отдыха у озера, Тольятти
   Дизайн-система

   Палитра:
     --bg        #F7F4EC  тёплый кремовый — «воздух», простор
     --bg-alt    #EFEADD  чуть глубже кремовый, для чередования секций
     --ink       #262B26  графитово-тёмный (в цвет крыш и фасадов домов)
     --ink-soft  #5B6156  приглушённый графит, для второстепенного текста
     --forest    #445A3B  глубокий зелёный — трава, деревья, озеро
     --gold      #B98A4C  тёплая охра — акцент (свечи, огонь, дерево)
     --line      #DDD5C2  тонкая линия-разделитель

   Шрифты (подключаются ссылкой в <head> каждой страницы):
     Display — 'Playfair Display' (тонкий контрастный засечечный,
               в духе шрифта из инстаграм-обложек заказчика «ОБЗОР ДОМА»)
     Text    — 'Manrope' (нейтральный гуманистический гротеск, кириллица)
     Hand    — 'Caveat' (рукописные «пометки от хозяев», 1–2 на страницу)

   Сетка: сайт идёт на всю ширину экрана, по бокам только поля --gutter.
   Ограничивается не страница, а длина строки текста (.measure, .lede).

   Анимации: js/motion.js подключает эффекты по data-атрибутам
   (data-reveal, data-split, data-curtain…). Без JS и при «уменьшить
   движение» всё видно сразу — ничего не прячем в CSS, кроме интро
   первого экрана (его раскрывает main.js в любом случае).
   ========================================================================== */

:root{
  --bg: #F7F4EC;
  --bg-alt: #EFEADD;
  --ink: #262B26;
  --ink-soft: #5B6156;
  --forest: #445A3B;
  --forest-deep: #303F29;
  --gold: #B98A4C;
  --gold-soft: #DCC49A;
  --line: #DDD5C2;
  --white: #FFFFFF;

  --font-display: 'Playfair Display', 'PT Serif', Georgia, serif;
  --font-text: 'Manrope', 'Segoe UI', sans-serif;
  --font-hand: 'Caveat', 'Segoe Print', cursive;

  --gutter: clamp(1rem, 3.2vw, 3.5rem);
  --maxw: 2200px;               /* потолок только для сверхшироких мониторов */
  --container: var(--maxw);
  --radius: 2px;
  --radius-lg: clamp(14px, 1.6vw, 24px);
  --gap-air: clamp(4.5rem, 10vw, 10rem); /* дистанция между крупными секциями — тот самый "воздух" */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.7, 0, .2, 1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main{ overflow-x: clip; } /* clip, а не hidden: не ломает position: sticky */
::selection{ background: var(--gold-soft); color: var(--ink); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

img{ max-width: 100%; display: block; }
a{ color: inherit; text-decoration: none; }
ul{ margin: 0; padding: 0; list-style: none; }
button{ font-family: inherit; cursor: pointer; color: inherit; }
h1,h2,h3,h4,p{ margin: 0; }

.container{
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.measure{ max-width: 38em; }
.full-bleed{ width: 100%; }

:focus-visible{
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}
.visually-hidden{
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Плавная прокрутка (Lenis) и режимы анимаций ---------- */

/* При включённых эффектах плавность даёт Lenis. CSS-плавность прокрутки
   ломает пересчёт ScrollTrigger (refresh двигает страницу «анимированно»). */
html.has-motion{ scroll-behavior: auto !important; }
html.lenis, html.lenis body{ height: auto; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: clip; }

/* Интро первого экрана прячем только при включённом JS и только пока
   motion.js не решил, анимировать ли его (has-motion / no-motion). Если
   скрипты не загрузились вовсе, через 3 секунды текст проявится сам. */
html.js:not(.has-motion):not(.no-motion) [data-hero-intro]{
  visibility: hidden;
  animation: heroIntroFallback 0s linear 3s forwards;
}
@keyframes heroIntroFallback{ to{ visibility: visible; } }

/* Мягкий переход между страницами (браузеры без поддержки просто открывают страницу) */
@view-transition{ navigation: auto; }
::view-transition-old(root){ animation: vt-out .35s var(--ease-in-out) both; }
::view-transition-new(root){ animation: vt-in .55s var(--ease-out) both; }
@keyframes vt-out{ to{ opacity: 0; transform: translateY(-12px); } }
@keyframes vt-in{ from{ opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce){
  @view-transition{ navigation: none; }
}

/* ---------- Типографика ---------- */

.kicker{
  font-family: var(--font-text);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--forest);
}

h1, .h1{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.7rem, 6.4vw, 6.6rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2, .h2{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4.6vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
}

h3, .h3{
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  line-height: 1.25;
}

/* Гигантские слова во всю ширину экрана */
.display{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 11vw, 13rem);
  line-height: .9;
  letter-spacing: -0.03em;
}
.h-xl{
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.2vw, 4.4rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
}
h1 em, h2 em, .display em, .h-xl em{ font-style: italic; color: var(--gold); }

.lede{
  font-size: clamp(1.05rem, 1.25vw, 1.3rem);
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 38em;
}

.eyebrow-num{
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
}

/* Рукописная «пометка от хозяев» */
.hand{
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: clamp(1.45rem, 2.2vw, 2.1rem);
  line-height: 1.1;
  color: var(--gold);
}
.hand-note{ display: inline-flex; align-items: flex-end; gap: .4rem; }
.hand-note svg{ width: clamp(56px, 6vw, 84px); height: auto; color: var(--gold); flex-shrink: 0; }
.hand-note svg path{ fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Кнопки ---------- */

.btn{
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-hover-bg: var(--ink);
  --btn-hover-fg: var(--white);
  --btn-border: transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 1rem 2rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1.2;
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  transition: color .45s var(--ease-out), border-color .45s var(--ease-out);
  white-space: nowrap;
}
/* Заливка «поднимается» снизу при наведении */
.btn::before{
  content: "";
  position: absolute; inset: -1px;
  z-index: -1;
  background: var(--btn-hover-bg);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform .5s var(--ease-out);
}
.btn:hover::before, .btn:focus-visible::before{ transform: none; }
.btn:hover, .btn:focus-visible{ color: var(--btn-hover-fg); }

.btn-primary{ --btn-bg: var(--forest); --btn-fg: var(--white); --btn-hover-bg: var(--forest-deep); }
.btn-ghost{ --btn-border: currentColor; --btn-hover-bg: var(--ink); --btn-hover-fg: var(--white); }
.btn-light{ --btn-bg: var(--white); --btn-fg: var(--ink); --btn-hover-bg: var(--gold-soft); --btn-hover-fg: var(--ink); }
.btn-ghost-light{ --btn-fg: var(--white); --btn-border: rgba(255,255,255,.7); --btn-hover-bg: var(--white); --btn-hover-fg: var(--ink); }
.btn-sm{ padding: 0.7rem 1.3rem; font-size: 0.88rem; }
.btn-block{ width: 100%; }
.btn-arrow{ display: inline-block; transition: transform .45s var(--ease-out); }
.btn:hover .btn-arrow{ transform: translateX(4px); }

/* ---------- Шапка ----------
   is-over-dark — прозрачная шапка с белым текстом поверх тёмного фото-хиро,
   кремовая подложка проявляется после начала прокрутки (is-scrolled).
   is-solid — сразу кремовая (страница начинается со светлого фона).
   is-hidden — шапка уезжает вверх при прокрутке вниз и возвращается при
   прокрутке вверх (логика в js/main.js → initHeader).
*/

.skip-link{
  position: absolute; left: var(--gutter); top: -120px; z-index: 300;
  background: var(--ink); color: var(--white);
  padding: .65rem 1.1rem; border-radius: 999px; font-size: .9rem; font-weight: 600;
}
.skip-link:focus{ top: .75rem; }

.site-header{
  position: fixed;
  inset-inline: 0;
  top: 0;
  z-index: 100;
  padding-block: 1.15rem;
  color: var(--ink);
  transition: transform .6s var(--ease-out), padding .45s var(--ease-out), color .4s ease;
}
.site-header::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: rgba(247,244,236,.9);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  box-shadow: 0 1px 0 rgba(38,43,38,.08);
  transition: opacity .45s ease;
}
.site-header.is-scrolled{ padding-block: .7rem; }
.site-header.is-over-dark:not(.is-scrolled){ color: var(--white); }
.site-header.is-over-dark:not(.is-scrolled)::before{ opacity: 0; }
.site-header.is-hidden{ transform: translateY(-105%); }
/* открытое мобильное меню: шапка поверх тёмно-зелёного фона меню */
.site-header.is-menu-open{ color: var(--white); transform: none; }
.site-header.is-menu-open::before{ opacity: 0; }

.header-inner{
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo{
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.logo-icon{ width: 40px; height: 40px; flex-shrink: 0; display: block; }

.nav-desktop{
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.6vw, 2rem);
}
.nav-link{
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  padding-block: 0.35rem;
}
/* «Перекат» текста при наведении: слово уезжает вверх, снизу приезжает копия */
.nav-roll{ display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.35; }
.nav-roll > span{ display: block; position: relative; transition: transform .55s var(--ease-out); }
.nav-roll > span::after{ content: attr(data-text); position: absolute; left: 0; top: 100%; }
.nav-link:hover .nav-roll > span, .nav-link:focus-visible .nav-roll > span{ transform: translateY(-100%); }
.nav-link.is-active::after{
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor;
}

.header-actions{ display: flex; align-items: center; gap: 1rem; }
.header-phone{ font-size: 0.92rem; font-weight: 600; white-space: nowrap; }
.site-header.is-over-dark:not(.is-scrolled) .header-call{ --btn-bg: rgba(255,255,255,.14); --btn-border: rgba(255,255,255,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

.burger{
  display: none;
  position: relative;
  width: 46px; height: 46px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: none;
}
.burger span{
  position: absolute; left: 13px; right: 13px;
  height: 1.5px; background: currentColor;
  transition: transform .55s var(--ease-out), top .55s var(--ease-out);
}
.burger span:nth-child(1){ top: 18px; }
.burger span:nth-child(2){ top: 26px; }
.burger[aria-expanded="true"] span:nth-child(1){ top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ top: 22px; transform: rotate(-45deg); }

@media (max-width: 1360px){
  .header-phone{ display: none; } /* номер остаётся на кнопке «Позвонить» и в меню */
}
@media (max-width: 1080px){
  .nav-desktop{ display: none; }
  .burger{ display: block; }
}
@media (max-width: 420px){
  .logo-text{ font-size: 1.15rem; }
  .header-call{ padding: .6rem 1rem; }
}

/* ---------- Мобильное меню ----------
   Раскрывается кругом из бургера (центр круга — --cx/--cy, ставит main.js). */
.mobile-nav{
  position: fixed; inset: 0;
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(6rem + env(safe-area-inset-top)) var(--gutter) calc(2rem + env(safe-area-inset-bottom));
  overflow-y: auto;
  background: var(--forest-deep);
  color: var(--white);
  clip-path: circle(0px at var(--cx, calc(100% - 3rem)) var(--cy, 2.6rem));
  visibility: hidden;
  transition: clip-path .85s var(--ease-in-out), visibility 0s linear .85s;
}
.mobile-nav.is-open{
  clip-path: circle(150vmax at var(--cx, calc(100% - 3rem)) var(--cy, 2.6rem));
  visibility: visible;
  transition: clip-path .85s var(--ease-in-out), visibility 0s linear 0s;
}
.mobile-nav__links{ display: flex; flex-direction: column; }
.mobile-nav__links a{
  font-family: var(--font-display);
  font-size: clamp(2rem, 8.5vw, 3.2rem);
  line-height: 1.18;
  padding-block: .1rem;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .5s ease, transform .8s var(--ease-out);
}
.mobile-nav.is-open .mobile-nav__links a{
  opacity: 1;
  transform: none;
  transition-delay: calc(.25s + var(--i, 0) * .045s);
}
.mobile-nav__links a[aria-current="page"]{ font-style: italic; color: var(--gold-soft); }
.mobile-nav__foot{ display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.mobile-nav__phone{ font-size: 1.15rem; font-weight: 600; }
.mobile-nav__social{ display: flex; gap: .7rem; }
.mobile-nav__social a, .social-row a{
  width: 44px; height: 44px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .35s ease, color .35s ease, border-color .35s ease;
}
.mobile-nav__social a:hover, .social-row a:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
.mobile-nav__social svg, .social-icon{ width: 20px; height: 20px; display: block; }
@media (min-width: 1081px){ .mobile-nav{ display: none; } }

/* ---------- Первый экран (главная) и фото-хиро внутренних страниц ----------
   Слои: .hero-media (уходит медленнее при прокрутке — motion.js) →
   .hero-breathe (медленное «дыхание» кадра, CSS) → img (интро: отъезд 1.2→1).
*/
.hero, .page-hero{
  position: relative;
  display: flex;
  align-items: flex-end;
  color: var(--white);
  overflow: hidden;
  background: var(--ink);
  padding-block: 0;
}
.hero{ min-height: 100svh; }
.page-hero{ min-height: 72svh; }
.hero-media{ position: absolute; inset: 0; z-index: 0; }
.hero-breathe{ position: absolute; inset: 0; animation: heroBreathe 24s ease-in-out infinite alternate; }
.hero-media img{ width: 100%; height: 100%; object-fit: cover; }
.hero-media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,18,14,.55) 0%, rgba(15,18,14,.16) 30%, rgba(15,18,14,.24) 55%, rgba(15,18,14,.8) 100%);
}
@keyframes heroBreathe{ from{ transform: scale(1); } to{ transform: scale(1.06); } }

.hero-content{
  position: relative; z-index: 1;
  width: 100%;
  padding-top: 8.5rem;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
}
.hero-content .kicker{
  color: var(--white);
  display: inline-flex;
  background: rgba(20,24,18,.32);
  border: 1px solid rgba(255,255,255,.35);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.hero-content h1{ color: var(--white); margin-top: 1.2rem; text-shadow: 0 2px 30px rgba(0,0,0,.22); }
.hero-title{ font-size: clamp(3rem, 7.6vw, 9rem); line-height: .98; letter-spacing: -.025em; max-width: 12.5em; }
.hero-content .lede{ color: rgba(255,255,255,.93); text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.hero-bottom{
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 2rem 3rem;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
}
.hero-bottom .word-swap-line{ margin-top: .8rem; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero-bottom .hero-actions{ margin-top: 0; }
.btn-icon{ width: 1.15em; height: 1.15em; flex-shrink: 0; transition: transform .45s var(--ease-out); }
.btn:hover .btn-icon{ transform: translateX(4px); }

/* Светлые «призрачные» кнопки на тёмном фоне (старые страницы используют .btn-ghost) */
.hero .btn-ghost, .page-hero .btn-ghost, .cta-banner .btn-ghost, .section-dark .btn-ghost{
  --btn-fg: var(--white); --btn-border: rgba(255,255,255,.7); --btn-hover-bg: var(--white); --btn-hover-fg: var(--ink);
}

.hero-scroll{
  position: absolute; left: 50%; bottom: 1.3rem; z-index: 2;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: .55rem;
  font-size: .7rem; letter-spacing: .26em; text-transform: uppercase;
  color: rgba(255,255,255,.8);
}
.hero-scroll::after{
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(rgba(255,255,255,.95), rgba(255,255,255,0));
  transform-origin: top;
  animation: scrollCue 2.4s var(--ease-in-out) infinite;
}
@keyframes scrollCue{ 0%{ transform: scaleY(0); opacity: 1; } 60%{ transform: scaleY(1); opacity: 1; } 100%{ transform: scaleY(1); opacity: 0; } }

@media (max-width: 900px){
  .hero-bottom{ grid-template-columns: 1fr; }
  .hero-scroll{ display: none; }
}

.page-hero .hero-content{ padding-top: 8rem; padding-bottom: 3.5rem; }
.page-hero h1{ color: var(--white); }

/* ---------- Секции / отступы ---------- */

section{ padding-block: var(--gap-air); }
.section-alt{ background: var(--bg-alt); }
.section-dark{ background: var(--ink); color: var(--white); }
.section-dark .ink-soft{ color: rgba(255,255,255,.65); }

.section-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
  flex-wrap: wrap;
}
.section-head h2{ margin-top: 0.6rem; }

hr.rule{
  border: none; border-top: 1px solid var(--line);
  margin-block: clamp(3rem, 6vw, 5rem);
}

/* ---------- Лайтбокс (просмотр фото на весь экран) ---------- */

.lightbox{
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20,22,18,.96);
  display: flex;
  align-items: center; justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
  touch-action: pan-y;
}
.lightbox.is-open{ opacity: 1; visibility: visible; transition: opacity .45s ease, visibility 0s linear 0s; }
.lightbox img{
  max-width: min(1200px, 92vw); max-height: 84vh; object-fit: contain;
  transform: scale(.94);
  transition: transform .7s var(--ease-out), opacity .35s ease;
  user-select: none; -webkit-user-drag: none;
}
.lightbox.is-open img{ transform: none; }
.lightbox.is-switching img{ opacity: 0; transform: scale(.985); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position: absolute; background: none; border: 1px solid rgba(255,255,255,.4);
  color: var(--white); border-radius: 50%; width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background: var(--white); color: var(--ink); border-color: var(--white); }
.lightbox-close{ top: 1.5rem; right: 1.5rem; }
.lightbox-prev{ left: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-next{ right: 1.5rem; top: 50%; transform: translateY(-50%); }
.lightbox-counter{ position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: 0.85rem; letter-spacing: 0.08em; }

@media (max-width: 640px){
  .lightbox-prev{ left: 0.5rem; width: 42px; height: 42px; }
  .lightbox-next{ right: 0.5rem; width: 42px; height: 42px; }
  .lightbox-close{ top: 0.8rem; right: 0.8rem; width: 42px; height: 42px; }
}

/* ---------- Футер ----------
   Внизу — гигантская надпись «Тихое место» во всю ширину экрана: буквы
   поднимаются при появлении (data-split="chars", js/motion.js). */

.site-footer{
  background: var(--ink);
  color: rgba(255,255,255,.72);
  padding-top: clamp(4rem, 8vw, 7rem);
  overflow: hidden;
}
.footer-top{
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 4.5rem);
}
@media (max-width: 900px){ .footer-top{ grid-template-columns: 1fr 1fr; } .footer-brand{ grid-column: 1 / -1; } }
@media (max-width: 520px){ .footer-top{ grid-template-columns: 1fr; } }

.footer-logo{
  display: inline-flex; align-items: center; gap: .75rem;
  font-family: var(--font-display); font-size: 1.6rem;
  color: var(--white);
  margin-bottom: 1.2rem;
}
.footer-brand > p{ max-width: 30em; font-size: .95rem; }
.footer-col h4{
  color: var(--white);
  font-size: .78rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  margin-bottom: 1.2rem;
}
.footer-col li{ margin-bottom: .7rem; font-size: .95rem; }
.footer-col a{
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 2px;
  transition: background-size .45s var(--ease-out), color .3s ease;
}
.footer-col a:hover{ color: var(--white); background-size: 100% 1px; }
.social-row{ display: flex; gap: .7rem; margin-top: 1.5rem; }
.footer-note{ font-size: .72rem; color: rgba(255,255,255,.42); margin-top: 1rem; max-width: 28em; }

.footer-bottom{
  display: flex; justify-content: space-between; align-items: center;
  margin-top: clamp(3rem, 6vw, 5rem);
  gap: .8rem 1.5rem; flex-wrap: wrap;
  padding-block: 1.4rem;
  border-top: 1px solid rgba(255,255,255,.12);
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  position: relative;
}
.to-top{ font-weight: 600; color: rgba(255,255,255,.75); }
.to-top:hover{ color: var(--white); }

/* ---------- CTA-плашка перед футером (общая для всех страниц) ---------- */

.cta-banner{
  position: relative;
  overflow: hidden;
  background: var(--forest);
  color: var(--white);
  padding-block: clamp(5rem, 11vw, 10rem);
  text-align: center;
}
.cta-banner .kicker{ color: var(--gold-soft); }
.cta-banner h2{
  color: var(--white);
  max-width: 16em;
  margin-inline: auto;
  margin-top: .9rem;
  font-size: clamp(2.3rem, 5.4vw, 5.6rem);
}
.cta-banner .lede{ color: rgba(255,255,255,.82); margin: 1.4rem auto 0; }
.cta-banner .hero-actions{ justify-content: center; margin-top: 2.4rem; }

/* ---------- Слово с зачёркиванием (фирменный акцент) ----------
   Показывает "городское" слово, зачёркивает его и заменяет на следующее
   (js/main.js → initWordSwap). Линия — фон внутреннего .word-swap-text,
   поэтому она ровно по длине слова; при переносе фразы на две строки
   зачёркивается каждая строка (box-decoration-break: clone).
   Используется точечно, не более 1 раза на странице.
*/
.word-swap-line{
  font-family: var(--font-display); font-style: italic;
  display: inline-block;
  background: rgba(15,18,14,.34);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  padding: 0.5rem 1rem;
  border-radius: 4px;
}
.word-swap{
  display: block;
  margin: 0.35em 0;
  color: var(--gold);
}
.word-swap-text{
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 58%;
  background-size: 0% 2px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .55s var(--ease-out), opacity .3s ease;
}
.word-swap.is-crossed .word-swap-text{ background-size: 100% 2px; }
.word-swap.is-swapping .word-swap-text{ transition: none; }

/* ---------- Отзывы: колода карточек (js/reviews.js) ----------
   Все карточки одной высоты (по самому длинному отзыву) — при смене
   отзыва страница не прыгает. Верхняя карточка улетает, следующие
   поднимаются из стопки. */
.reviews-section .section-head h2 em{ font-size: .62em; }
.deck{ max-width: 900px; margin-inline: auto; }
.deck__stage{ position: relative; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.deck-card{
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 1.4rem;
  padding: clamp(1.6rem, 4vw, 3.2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 50px -38px rgba(38,43,38,.5);
  transform-origin: 50% 100%;
}
.deck-card.is-top{ cursor: grab; }
.deck-card.is-top:active{ cursor: grabbing; }
.deck-card__quote, .wall-card__quote{
  display: block; height: 1.7rem;
  font-family: var(--font-display); font-style: italic;
  font-size: 4.2rem; line-height: .9; color: var(--gold);
}
.deck-card__text{
  flex: 1;
  font-size: clamp(1rem, 1.6vw, 1.45rem);
  line-height: 1.6;
  color: var(--ink);
}
@media (min-width: 900px){ .deck-card__text{ font-family: var(--font-display); line-height: 1.5; } }
.deck-card__foot, .wall-card__foot{
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline;
  gap: .3rem 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.deck-card__name, .wall-card__name{ font-weight: 700; }
.deck-card__meta, .wall-card__meta{ color: var(--ink-soft); font-size: .85rem; }
.deck__controls{ display: flex; align-items: center; justify-content: center; gap: 1.1rem; margin-top: 2.2rem; }
.deck__btn{
  width: 54px; height: 54px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink); border-radius: 50%;
  background: none;
  transition: background-color .3s ease, color .3s ease;
}
.deck__btn:hover{ background: var(--ink); color: var(--white); }
.deck__btn svg{ width: 22px; height: 22px; }
.deck__prev svg{ transform: scaleX(-1); }
.deck__count{ min-width: 6ch; text-align: center; font-family: var(--font-display); font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.deck__progress{ width: 110px; height: 2px; overflow: hidden; border-radius: 2px; background: var(--line); }
.deck__progress span{ display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }
@media (max-width: 520px){ .deck__progress{ display: none; } }

/* ---------- Отзывы: «стена» на странице «Отзывы» ---------- */
.review-wall{ columns: 3 300px; column-gap: clamp(1rem, 2vw, 1.8rem); }
.wall-card{
  break-inside: avoid;
  display: flex; flex-direction: column; gap: 1rem;
  margin-bottom: clamp(1rem, 2vw, 1.8rem);
  padding: clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.wall-card__text{ font-size: 1rem; line-height: 1.7; }

/* Шапка страницы «Отзывы»: крупный рейтинг */
.reviews-hero{ padding-top: clamp(8rem, 14vw, 11rem); }
.reviews-hero h1{ margin-top: .8rem; }
.rating{ display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem); margin-top: clamp(2rem, 4vw, 3rem); flex-wrap: wrap; }
.rating__value{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(5rem, 14vw, 12rem); line-height: .85; letter-spacing: -.04em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.rating__stars{
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.4rem); letter-spacing: .12em;
  background: linear-gradient(90deg, var(--gold) var(--fill, 98%), var(--line) var(--fill, 98%));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.rating__note{ display: block; margin-top: .5rem; color: var(--ink-soft); }
.yandex-reviews{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.yandex-reviews > div:first-child{ position: sticky; top: 7rem; }
.yandex-reviews .lede{ margin-top: 1.2rem; }
.yandex-reviews .btn{ margin-top: 1.8rem; }
.yandex-frame{ height: 640px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--white); }
.yandex-frame iframe{ width: 100%; height: 100%; border: 0; }
@media (max-width: 900px){ .yandex-reviews{ grid-template-columns: 1fr; } .yandex-reviews > div:first-child{ position: static; } }

/* ---------- Утилиты ---------- */

.text-center{ text-align: center; }
.mx-auto{ margin-inline: auto; }
.mt-2{ margin-top: 2rem; }
.badge{
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--gold-soft); color: var(--forest-deep);
}

/* ==========================================================================
   ГЛАВНАЯ: бегущая строка, манифест, «окно», сцена, лента домов, занятия,
   карта. Эффекты подключает js/motion.js по data-атрибутам из разметки.
   ========================================================================== */

/* ---------- Бегущая строка ---------- */
.marquee{
  background: var(--forest);
  color: var(--bg);
  overflow: hidden;
  padding-block: clamp(1rem, 2vw, 1.6rem);
}
.marquee__track{ display: flex; align-items: center; width: max-content; white-space: nowrap; }
.marquee__track span{
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.6rem, 3.2vw, 3rem);
  line-height: 1.15;
  padding-inline: clamp(1rem, 2.2vw, 2.2rem);
}
.marquee__track i{ width: .55rem; height: .55rem; border-radius: 50%; background: var(--gold); flex-shrink: 0; }

/* ---------- Манифест ---------- */
.manifesto__head{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: 1rem 3rem;
  align-items: baseline;
}
.manifesto__text{
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.2vw, 3.3rem);
  line-height: 1.24;
  letter-spacing: -.01em;
  max-width: 30em;
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  color: var(--ink);
}
.manifesto__sign{
  display: flex;
  align-items: flex-end;
  gap: .4rem;
  margin-top: 1.4rem;
  padding-left: clamp(0rem, 22vw, 26rem);
}
.manifesto__sign svg{ transform: scaleX(-1) rotate(-8deg); }
.stats{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1rem, 3vw, 3rem);
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.stats li{ border-top: 1px solid var(--line); padding-top: 1.4rem; }
.stats b{
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 6.4vw, 6.4rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--forest);
  font-variant-numeric: tabular-nums;
}
.stats span{ display: block; margin-top: .7rem; color: var(--ink-soft); font-size: .95rem; max-width: 15em; }
@media (max-width: 900px){
  .manifesto__head{ grid-template-columns: 1fr; }
  .manifesto__sign{ padding-left: 0; }
  .stats{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.2rem; }
}

/* ---------- «Окно»: фото раскрывается на весь экран ---------- */
.window{
  position: relative;
  height: 100svh;
  min-height: 560px;
  padding-block: 0;
  overflow: hidden;
  background: var(--bg);
}
.window__media{ position: absolute; inset: 0; overflow: hidden; }
.window__media img{ width: 100%; height: 100%; object-fit: cover; }
.window__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,18,14,0) 40%, rgba(15,18,14,.62) 100%);
}
.window__caption{
  position: absolute; left: 0; right: 0;
  bottom: clamp(2rem, 8vh, 5.5rem);
  z-index: 1;
  color: var(--white);
}
.window__caption .kicker{ color: var(--gold-soft); }
.window__caption .h-xl{ max-width: 14em; margin-top: .7rem; text-shadow: 0 2px 26px rgba(0,0,0,.3); }
@media (max-width: 1079.98px){ .window{ height: 82svh; min-height: 460px; } }

/* ---------- Сцена «Почему у нас»: фото закреплено, пункты загораются ---------- */
.scene__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 7rem);
}
.scene__media{
  position: sticky;
  top: 12vh;
  align-self: start;
  height: 76vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}
.scene__photo{ position: absolute; inset: 0; margin: 0; overflow: hidden; }
.scene__photo:first-child{ z-index: 1; }
.scene__photo img{ width: 100%; height: 100%; object-fit: cover; }
.scene__head{ margin-bottom: clamp(1rem, 3vw, 2rem); }
.scene__head h2{ margin-top: .7rem; }
.scene__item{
  min-height: 46vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
  transition: opacity .7s ease;
}
.scene.is-live .scene__item{ opacity: .26; }
.scene.is-live .scene__item.is-active{ opacity: 1; }
.scene__num{ font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.3rem; }
.scene__item h3{ font-size: clamp(1.9rem, 3.2vw, 3.2rem); font-weight: 400; letter-spacing: -.01em; margin-top: .3rem; }
.scene__item p{ color: var(--ink-soft); font-size: clamp(1rem, 1.25vw, 1.2rem); max-width: 27em; margin-top: .8rem; }
.scene__thumb{ display: none; margin: 0 0 1.2rem; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; }
.scene__thumb img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 1079.98px){
  .scene__grid{ grid-template-columns: 1fr; }
  .scene__media{ display: none; }
  .scene__thumb{ display: block; }
  .scene__item{ min-height: 0; padding-block: 2rem 2.6rem; }
}

/* ---------- Лента домов ----------
   На компьютере секция закрепляется, лента едет вбок при прокрутке
   (motion.js ставит .is-pinned); на телефоне и без JS — листается свайпом. */
.ribbon__head{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.ribbon__head h2{ margin-top: .7rem; }
.ribbon__viewport{
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}
.ribbon__viewport::-webkit-scrollbar{ display: none; }
.ribbon__track{ display: flex; gap: clamp(1rem, 2.2vw, 2.2rem); padding-inline: var(--gutter); width: max-content; }
.ribbon-card{
  position: relative;
  flex: 0 0 auto;
  width: clamp(250px, 78vw, 440px);
  scroll-snap-align: start;
  scroll-margin-left: var(--gutter);
  display: flex;
  flex-direction: column;
}
.ribbon-card__media{
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--line);
}
.ribbon-card__media img{ width: 100%; height: 100%; object-fit: cover; scale: 1.12; transition: scale 1s var(--ease-out); }
.ribbon-card:hover .ribbon-card__media img{ scale: 1.18; }
.ribbon-card__body{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 1rem;
  align-items: baseline;
  padding-top: 1.1rem;
}
.ribbon-card__num{
  grid-row: 1 / span 3;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 3.4vw, 3.4rem);
  line-height: .9;
  color: var(--gold);
}
.ribbon-card__body h3{ font-size: clamp(1.4rem, 2vw, 1.9rem); font-weight: 400; }
.ribbon-card__meta{ color: var(--ink-soft); font-size: .92rem; }
.ribbon-card__price{ font-family: var(--font-display); font-size: 1.2rem; margin-top: .2rem; }
.ribbon-card__price span{ font-family: var(--font-text); font-size: .82rem; color: var(--ink-soft); }
.ribbon-card .status-chip{ grid-column: 2; margin-top: .6rem; }
.ribbon-card--banya{ align-self: flex-start; } /* высота = фото, а не самая высокая соседняя карточка */
.ribbon-card--banya .ribbon-card__media::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,24,18,.05) 30%, rgba(20,24,18,.78) 100%);
}
.ribbon-card__overlay{
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start;
  gap: .8rem;
  padding: clamp(1.2rem, 2.2vw, 2.2rem);
  color: var(--white);
}
.ribbon-card__overlay .kicker{ color: var(--gold-soft); }
.ribbon-card__overlay .h3{ font-size: clamp(1.7rem, 2.6vw, 2.6rem); font-weight: 400; color: var(--white); }
.ribbon__bar{ height: 2px; margin-top: clamp(1.6rem, 3vw, 2.4rem); background: var(--line); overflow: hidden; border-radius: 2px; }
.ribbon__bar span{ display: block; height: 100%; background: var(--forest); transform: scaleX(0); transform-origin: left; }
.ribbon:not(.is-pinned) .ribbon__bar{ display: none; }

.ribbon.is-pinned{
  height: 100svh;
  padding-block: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}
.ribbon.is-pinned .ribbon__viewport{ overflow: visible; }
.ribbon.is-pinned .ribbon-card{ width: auto; }
.ribbon.is-pinned .ribbon-card__media{ height: min(50vh, 540px); width: auto; }

/* Статус дома: «Свободен сегодня» / «Занят до …» (живые данные — js/calendar.js) */
.status-chip{
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--forest);
}
.status-chip::before{
  content: "";
  width: .5rem; height: .5rem; border-radius: 50%;
  background: currentColor;
  animation: chipPulse 2.4s ease-out infinite;
}
.status-chip.is-busy{ color: var(--ink-soft); }
.status-chip.is-busy::before{ animation: none; }
@keyframes chipPulse{ 0%{ box-shadow: 0 0 0 0 rgba(68,90,59,.45); } 100%{ box-shadow: 0 0 0 10px rgba(68,90,59,0); } }

/* ---------- Чем заняться (тёмная секция) ---------- */
.activities{ overflow: hidden; }
.activities__grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.activities__photo{ margin: 0; aspect-ratio: 4 / 5; border-radius: var(--radius-lg); overflow: hidden; }
.activities__photo img{ width: 100%; height: 100%; object-fit: cover; }
.activities .kicker{ color: var(--gold-soft); }
.activities h2{ color: var(--white); margin-top: .8rem; }
.activities .lede{ color: rgba(255,255,255,.74); margin-top: 1.4rem; }
.activity-cards{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(1rem, 2.2vw, 2rem);
  margin-top: clamp(4rem, 8vw, 7rem);
}
.activity-cards li{
  width: clamp(150px, 15vw, 220px);
  padding: .55rem .55rem .9rem;
  background: var(--bg);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 34px 50px -30px rgba(0,0,0,.65);
}
.activity-cards li:nth-child(even){ margin-top: 3rem; }
.activity-cards img{ width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: center bottom; border-radius: 3px; } /* низ кадра: вшитые подписи у фото обычно сверху */
.activity-cards span{ display: block; margin-top: .55rem; font-family: var(--font-hand); font-size: 1.45rem; line-height: 1.1; text-align: center; }
@media (max-width: 900px){
  .activities__grid{ grid-template-columns: 1fr; }
}
@media (max-width: 640px){
  .activity-cards li{ width: calc(50% - .75rem); }
  .activity-cards li:nth-child(even){ margin-top: 1.6rem; }
}

/* ---------- Карта во всю ширину ---------- */
.map-full{
  position: relative;
  min-height: min(82vh, 780px);
  padding-block: 0;
  display: flex;
  align-items: flex-end;
  background: var(--bg-alt);
}
.map-full__frame{ position: absolute; inset: 0; width: 100%; height: 100%; border: 0; filter: grayscale(.25); }
.map-full__inner{ position: relative; z-index: 2; padding-block: clamp(2rem, 5vw, 4rem); pointer-events: none; }
.map-card{
  pointer-events: auto;
  max-width: 31rem;
  padding: clamp(1.6rem, 3vw, 2.6rem);
  background: var(--bg);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -30px rgba(20,24,18,.45);
}
.map-card .h-xl{ margin-top: .6rem; }
.map-card p:not(.kicker){ color: var(--ink-soft); margin-top: .8rem; }
.map-card .btn{ margin-top: 1.4rem; }
/* Прозрачный щит над картой: колесо мыши листает страницу, а не масштабирует
   карту; клик — и карта становится активной (js/main.js → initMapShield). */
.map-shield{ position: absolute; inset: 0; z-index: 1; padding: 0; border: 0; background: transparent; cursor: pointer; }
.map-shield span{
  position: absolute; right: var(--gutter); top: 1rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: rgba(38,43,38,.82); color: var(--white); font-size: .8rem; font-weight: 600;
  opacity: 0; transition: opacity .3s ease;
}
.map-shield:hover span, .map-shield:focus-visible span{ opacity: 1; }
@media (max-width: 700px){
  .map-full{ flex-direction: column; align-items: stretch; min-height: 0; }
  .map-full__frame, .map-shield{ position: relative; inset: auto; height: 62vh; }
  .map-shield{ position: absolute; inset: 0 0 auto 0; }
}

/* ==========================================================================
   ВНУТРЕННИЕ СТРАНИЦЫ: «О месте», «Услуги», «Акции», «Правила»
   ========================================================================== */

.note-small{ font-size: .85rem; color: var(--ink-soft); margin-top: 2rem; max-width: 46em; }

/* ---------- Первый экран «текст + фото» (страницы без тёмного фото-хиро) ---------- */
.split-hero{ padding-top: clamp(7.5rem, 12vw, 10rem); padding-bottom: clamp(3rem, 6vw, 5rem); }
.split-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.split-hero__text h1{ margin-top: .9rem; }
.split-hero__text .lede{ margin-top: 1.6rem; }
.split-hero__media{
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 72vh;
  width: 100%;
  justify-self: end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}
.split-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px){
  .split-hero__grid{ grid-template-columns: 1fr; }
  .split-hero__media{ aspect-ratio: 4 / 3; }
}

/* ---------- «О месте» ---------- */
.about-where{
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.5rem 3rem;
  align-items: end;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.about-where .manifesto__sign{ padding-left: 0; margin-top: 0; }
@media (max-width: 900px){ .about-where{ grid-template-columns: 1fr; } }

.atmosphere__word{ margin-top: .6rem; }
.atmo-cards{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem) clamp(1.2rem, 2.5vw, 2.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.atmo-cards li{
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: .7rem .7rem 1.6rem;
  box-shadow: 0 30px 50px -40px rgba(38,43,38,.55);
}
.atmo-cards li:nth-child(3n+2){ margin-top: clamp(1.5rem, 4vw, 4rem); }
.atmo-cards figure{ margin: 0 0 1.2rem; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--radius-lg) - 6px); }
.atmo-cards img{ width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.atmo-cards__num, .atmo-cards h3, .atmo-cards p{ margin-inline: .8rem; display: block; }
.atmo-cards__num{ font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.1rem; }
.atmo-cards h3{ font-size: clamp(1.25rem, 1.7vw, 1.6rem); margin-top: .3rem; }
.atmo-cards p{ color: var(--ink-soft); font-size: .95rem; margin-top: .5rem; }
@media (max-width: 900px){ .atmo-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .atmo-cards li:nth-child(3n+2){ margin-top: 0; } .atmo-cards li:nth-child(even){ margin-top: 2rem; } }
@media (max-width: 560px){ .atmo-cards{ grid-template-columns: 1fr; } .atmo-cards li:nth-child(even){ margin-top: 0; } }

/* ---------- «Услуги»: крупные строки, фото за курсором ---------- */
.services-intro{ margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.service-list{ border-bottom: 1px solid var(--line); }
.service-line{
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  gap: 1rem 2rem;
  align-items: center;
  padding-block: clamp(1.4rem, 3vw, 2.4rem);
  border-top: 1px solid var(--line);
  transition: background-color .4s ease;
}
.service-line__thumb{ display: none; }
.service-line__num{ font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.2rem; }
.service-line h3{ font-size: clamp(1.6rem, 3.2vw, 3.2rem); font-weight: 400; letter-spacing: -.01em; transition: transform .6s var(--ease-out); }
.service-line p{ color: var(--ink-soft); max-width: 40em; margin-top: .4rem; }
.service-line__price{ font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.5rem); white-space: nowrap; text-align: right; }
.service-line__price.is-included{
  font-family: var(--font-text); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: .4rem .8rem; border-radius: 999px; background: var(--gold-soft); color: var(--forest-deep);
}
@media (hover: hover){ .service-line:hover h3{ transform: translateX(.6rem); } }
@media (max-width: 760px){
  .service-line{ grid-template-columns: minmax(0, 1fr) auto; }
  .service-line__num{ display: none; }
  .service-line__thumb{ display: block; grid-column: 1 / -1; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; }
  .service-line__thumb img{ width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
  .service-line__price{ align-self: start; }
}
.hover-photo{
  position: fixed; left: 0; top: 0; z-index: 60;
  width: clamp(200px, 18vw, 300px); aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg); overflow: hidden;
  pointer-events: none;
  box-shadow: 0 30px 60px -30px rgba(20,24,18,.6);
}
.hover-photo img{ width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }

/* ---------- «Акции»: купоны ---------- */
.coupons-section{ padding-top: 0; }
.coupons{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.2rem, 2.5vw, 2.4rem);
}
.coupon{
  --notch: 14px;
  position: relative;
  display: grid;
  grid-template-columns: 30% minmax(0, 1fr); /* линия отрыва ровно на 30% — там же вырезы */
  min-height: 11rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: 0 26px 50px -40px rgba(38,43,38,.6);
  /* вырезы-«надрывы» сверху и снизу на линии отрыва */
  -webkit-mask: radial-gradient(circle var(--notch) at 30% 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at 30% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at 30% 0, transparent 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at 30% 100%, transparent 98%, #000) bottom / 100% 51% no-repeat;
}
.coupon__value{
  display: flex; align-items: center; justify-content: center;
  padding: 1.4rem 1rem;
  background: var(--forest);
  color: var(--bg);
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1.9rem, 2.8vw, 2.9rem); line-height: 1;
  border-right: 2px dashed rgba(247,244,236,.5);
  text-align: center;
}
.coupon__value b{ font-weight: 400; }
.coupon__value--text{ font-size: clamp(1.5rem, 2.4vw, 2.2rem); }
.coupon__body{ padding: clamp(1.4rem, 2.5vw, 2rem); display: flex; flex-direction: column; justify-content: center; gap: .5rem; }
.coupon__body h3{ font-size: clamp(1.2rem, 1.6vw, 1.5rem); }
.coupon__body p{ color: var(--ink-soft); font-size: .95rem; }
@media (max-width: 900px){ .coupons{ grid-template-columns: 1fr; } }
@media (max-width: 480px){ .coupon{ grid-template-columns: 1fr; } .coupon__value{ border-right: 0; border-bottom: 2px dashed rgba(247,244,236,.5); } .coupon{ -webkit-mask: none; mask: none; } }

/* ---------- «Правила»: линия, которая растёт, и загорающиеся номера ---------- */
.rules-section{ padding-top: 0; }
.rules-timeline{ position: relative; max-width: 60rem; }
.rules-timeline__line{
  position: absolute; left: 1.7rem; top: .6rem; bottom: .6rem;
  width: 1px;
  background: var(--gold);
  transform-origin: top;
}
.rules{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(2rem, 4vw, 3.2rem); }
.rule{ display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.4rem); position: relative; }
.rule__num{
  position: relative; z-index: 1;
  width: 3.4rem; height: 3.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold);
  color: var(--white);
  font-family: var(--font-display); font-style: italic; font-size: 1.15rem;
  transition: background-color .5s ease, color .5s ease;
}
.rule h3{ font-size: clamp(1.4rem, 2.2vw, 2rem); margin-bottom: .6rem; }
.rule p{ color: var(--ink-soft); max-width: 44em; }
.rule > div{ transition: opacity .6s ease; }
html.has-motion .rule:not(.is-lit) .rule__num{ background: var(--bg); color: var(--gold); }
html.has-motion .rule:not(.is-lit) > div{ opacity: .45; }
.rules-outro{
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.6rem);
  line-height: 1.3;
  max-width: 28em;
  margin-top: clamp(3.5rem, 7vw, 6rem);
}
.underline-draw{ position: relative; display: inline-block; font-style: italic; color: var(--forest); white-space: nowrap; }
.underline-draw svg{ position: absolute; left: 0; right: 0; bottom: -.25em; width: 100%; height: .5em; overflow: visible; }
.underline-draw path{ fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }

/* ---------- Текст + фото в две колонки («Правила»: питомцы, «Услуги»: фотосессии) ---------- */
.duo{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.duo h2{ margin-top: .8rem; }
.duo .lede{ margin-top: 1.4rem; }
.duo__media{ margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--line); }
.duo__media img{ display: block; width: 100%; height: auto; }
.duo__media--photo{ aspect-ratio: 4 / 5; }
.duo__media--photo img{ height: 100%; object-fit: cover; }
.pets__list{ list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: pet; display: grid; gap: 1rem; }
.pets__list li{ counter-increment: pet; display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .9rem; align-items: start; color: var(--ink-soft); }
.pets__list li::before{
  content: counter(pet);
  width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--forest); color: var(--white);
  font-family: var(--font-display); font-style: italic;
}
.pets__list b{ color: var(--ink); font-weight: 600; }
/* «Отзывы»: призыв делиться фото */
.share-cta h2{ margin-top: .8rem; }
.share-cta .lede{ margin-top: 1.4rem; }
.share-cta .hero-actions{ justify-content: center; }
@media (max-width: 900px){
  .duo{ grid-template-columns: 1fr; }
  .pets__poster{ max-width: 30rem; }
  .duo__media--photo{ aspect-ratio: 4 / 3; }
}

/* ==========================================================================
   «ДОМА», «КОНТАКТЫ», «КАК ДОБРАТЬСЯ»
   ========================================================================== */

/* ---------- «Дома»: крупные чередующиеся ряды ---------- */
.house-rows{ padding-top: 0; }
.house-row{
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-top: 1px solid var(--line);
}
.house-row:nth-child(even){ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); }
.house-row:nth-child(even) .house-row__media{ order: 2; }
.house-row__media{
  display: block;
  position: relative;
  aspect-ratio: 4 / 5; /* обложки «ОБЗОР ДОМА» сняты 4:5 — показываем целиком */
  max-height: 82vh;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}
.house-row__media img{ width: 100%; height: 100%; object-fit: cover; }
.house-row__num{ font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: clamp(2.6rem, 5vw, 4.6rem); line-height: 1; }
.house-row__body h2{ margin-top: .4rem; }
.house-row__body h2 a{ background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.house-row__body h2 a:hover{ background-size: 100% 1px; }
.house-row__tag{ font-family: var(--font-display); font-style: italic; font-size: clamp(1.1rem, 1.6vw, 1.4rem); color: var(--ink-soft); margin-top: .6rem; }
.house-row__specs{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.4rem; }
.house-row__specs li{ padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; font-size: .88rem; }
.house-row__price{ font-family: var(--font-display); font-size: clamp(1.4rem, 2vw, 1.9rem); margin-top: 1.4rem; }
.house-row__price span{ font-family: var(--font-text); font-size: .9rem; color: var(--ink-soft); }
.house-row .status-chip{ display: flex; margin-top: .8rem; }
.house-row .btn{ margin-top: 1.6rem; }
@media (max-width: 900px){
  .house-row, .house-row:nth-child(even){ grid-template-columns: 1fr; }
  .house-row:nth-child(even) .house-row__media{ order: 0; }
  .house-row__media{ max-height: none; }
}
.window__text{ max-width: 34em; margin-top: 1rem; color: rgba(255,255,255,.88); }
.window__caption .btn{ margin-top: 1.6rem; }

/* ---------- «Контакты» ---------- */
.contacts-hero{ padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.contacts-hero h1{ margin-top: .8rem; }
.phone-giant{
  display: block;
  width: fit-content;
  margin-top: clamp(1.5rem, 4vw, 3rem);
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9.6vw, 11.5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--forest);
  white-space: nowrap;
  transition: color .4s ease;
}
.phone-giant:hover{ color: var(--gold); }
.contacts-hero .lede{ margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.contacts-body{ padding-top: 0; }
.contacts-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.contact-rows{ margin: 0; }
.contact-row{ display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding-block: 1.3rem; border-top: 1px solid var(--line); }
.contact-row dt{ font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); padding-top: .3rem; }
.contact-row dd{ margin: 0; font-family: var(--font-display); font-size: clamp(1.1rem, 1.6vw, 1.4rem); line-height: 1.4; }
.contact-row a{ background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .45s var(--ease-out); }
.contact-row a:hover{ background-size: 100% 1px; }
.owners .kicker{ margin-bottom: 1rem; }
.owner-row{
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1fr) auto;
  gap: .5rem 1rem;
  align-items: baseline;
  padding: 1.1rem .4rem;
  border-top: 1px solid var(--line);
  isolation: isolate;
}
.owner-row::before{
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--bg-alt);
  transform: scaleX(0); transform-origin: left;
  transition: transform .55s var(--ease-out);
}
.owner-row:hover::before{ transform: none; }
.owner-row__house{ font-family: var(--font-display); font-size: 1.3rem; }
.owner-row__name{ color: var(--ink-soft); }
.owner-row__phone{ font-weight: 700; white-space: nowrap; }
@media (max-width: 900px){ .contacts-grid{ grid-template-columns: 1fr; } }
@media (max-width: 520px){
  .contact-row{ grid-template-columns: 1fr; gap: .3rem; }
  .owner-row{ grid-template-columns: minmax(0, 1fr) auto; }
  .owner-row__name{ grid-column: 1; grid-row: 2; }
}

/* ---------- «Как добраться»: маршрут, который рисуется ---------- */
.route-hero{ padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.route-hero__grid{ display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: 2rem; align-items: end; }
.route-hero h1{ margin-top: .8rem; }
.route-hero .lede{ margin-top: 1.4rem; }
.route-time{ display: flex; align-items: flex-end; gap: 1rem; justify-self: end; }
.route-time b{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(6rem, 16vw, 15rem); line-height: .8; letter-spacing: -.05em;
  color: var(--forest); font-variant-numeric: tabular-nums;
}
.route-time span{ font-size: 1.05rem; color: var(--ink-soft); padding-bottom: .6rem; }
.route{ padding-top: 0; }
.route__grid{ display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.route__art{ margin: 0; background: var(--bg-alt); border-radius: var(--radius-lg); padding: clamp(1rem, 3vw, 2.5rem); }
.route__svg{ display: block; width: 100%; height: auto; overflow: visible; }
.route__path{ fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round; }
/* трасса, от которой уходит наш съезд: продолжается прямо, бледнее маршрута */
.route__road{ fill: none; stroke: var(--line); stroke-width: 10; stroke-linecap: round; }
.route__pt circle{ fill: var(--bg); stroke: var(--forest); stroke-width: 3; }
.route__pt.is-end circle{ fill: var(--forest); }
.route__pt text{ font-family: var(--font-text); font-size: 17px; font-weight: 600; fill: var(--ink); }
.route__pt.is-end text{ font-family: var(--font-display); font-size: 26px; font-weight: 400; font-style: italic; fill: var(--forest); }
.route__steps{ margin: 0; display: flex; flex-direction: column; gap: 1.6rem; }
.route__steps dt{ font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.route__steps dd{ margin: .4rem 0 0; font-size: 1.05rem; line-height: 1.6; }
@media (max-width: 900px){
  .route-hero__grid, .route__grid{ grid-template-columns: 1fr; }
  .route-time{ justify-self: start; }
}
@media (max-width: 600px){
  .route__pt text{ font-size: 24px; }
  .route__pt.is-end text{ font-size: 32px; }
}

/* ==========================================================================
   СТРАНИЦЫ ДОМОВ И БАНИ
   ========================================================================== */

/* ---------- Первый экран дома: текст + обложка «ОБЗОР ДОМА» ---------- */
.house-hero{ padding-top: clamp(7rem, 11vw, 9rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.house-hero__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: center;
}
.house-hero .kicker a{ color: var(--forest); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s var(--ease-out); }
.house-hero .kicker a:hover{ background-size: 100% 1px; }
.house-hero__title{ margin-top: .6rem; }
.house-hero__tag{ font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2.2vw, 2rem); line-height: 1.3; color: var(--ink-soft); margin-top: 1.2rem; max-width: 22em; }
.house-hero__chips{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.8rem; }
.house-hero__chips li{ padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: .9rem; background: var(--white); }
.house-hero__chips b{ font-weight: 700; }
.house-hero .hero-actions{ margin-top: 2rem; }
.house-hero__media{
  margin: 0;
  aspect-ratio: 4 / 5;
  max-height: 80vh;
  width: 100%;
  justify-self: end;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--line);
}
.house-hero__media img{ width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px){
  .house-hero__grid{ grid-template-columns: 1fr; }
  .house-hero__media{ max-height: none; }
}

/* ---------- Галерея-мозаика ---------- */
.house-gallery{ padding-top: clamp(1rem, 3vw, 2rem); }
.gallery-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: clamp(.5rem, 1vw, .9rem);
}
.gallery-grid button{
  position: relative;
  padding: 0; border: 0; background: var(--line);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) * .6);
}
/* Крупные плитки считаются только среди видимых фото (скрытые .is-hidden
   могут стоять где угодно — порядок в разметке = порядок в лайтбоксе). */
.gallery-grid button:nth-child(1 of :not(.is-hidden)){ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.gallery-grid button:nth-child(5 of :not(.is-hidden)){ grid-column: span 2; aspect-ratio: 8 / 5; }
/* На страницах домов обложка уже на первом экране — в сетке её не дублируем
   (при листании в лайтбоксе она по-прежнему первая). */
.house-hero ~ .house-gallery .gallery-grid button:first-child{ display: none; }
.house-hero ~ .house-gallery .gallery-grid button:nth-child(2 of :not(.is-hidden)){ grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
/* Фото не растягивают плитку своими пропорциями — размер задаёт сетка */
.gallery-grid img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.gallery-grid button:hover img{ transform: scale(1.06); }
.gallery-more-label{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(38,43,38,.62);
  color: var(--white);
  font-family: var(--font-display); font-style: italic; font-size: clamp(1.3rem, 2vw, 1.8rem);
  transition: background-color .4s ease;
}
.gallery-grid button:hover .gallery-more-label{ background: rgba(38,43,38,.45); }
/* Группы фото (data-group на кнопках): кнопки «Терраса · 5» под сеткой
   открывают лайтбокс с первого фото группы. Их строит main.js. */
.gallery-groups{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: clamp(1rem, 2vw, 1.4rem); }
.gallery-groups button{
  padding: .5rem 1rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--white); color: var(--ink); font: inherit; font-size: .9rem;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.gallery-groups button span{ color: var(--ink-soft); margin-left: .35em; transition: color .3s ease; }
.gallery-groups button:hover{ background: var(--forest); border-color: var(--forest); color: var(--white); }
.gallery-groups button:hover span{ color: inherit; }
@media (max-width: 700px){
  /* На телефоне фото крупнее: главное и широкое — во всю ширину */
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid button:nth-child(1 of :not(.is-hidden)),
  .house-hero ~ .house-gallery .gallery-grid button:nth-child(2 of :not(.is-hidden)){ grid-row: span 1; aspect-ratio: 4 / 5; }
  .gallery-grid button:nth-child(5 of :not(.is-hidden)){ aspect-ratio: 3 / 2; }
}

/* ---------- Видеообзор дома (вертикальное видео + текст сбоку) ---------- */
.house-video{ padding-top: clamp(3rem, 7vw, 6rem); }
.house-video__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.house-video__text p:not(.kicker){ color: var(--ink-soft); font-size: 1.05rem; max-width: 34rem; margin-top: 1.2rem; }
.house-video__media{
  justify-self: center;
  width: min(100%, 420px, calc(80vh * 464 / 848));
  aspect-ratio: 464 / 848;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--line);
}
.house-video__media video{ display: block; width: 100%; height: 100%; object-fit: cover; }
/* на весь экран cover обрезал бы вертикальное видео до узкой полосы — показываем целиком */
.house-video__media video:fullscreen{ object-fit: contain; background: #000; }
.house-video__media video:-webkit-full-screen{ object-fit: contain; background: #000; }
/* на «Как добраться» видео идёт сразу за схемой — без двойного отступа */
.route-video{ padding-top: 0; }
.house-video__media--9x16{ width: min(100%, 420px, calc(80vh * 9 / 16)); aspect-ratio: 9 / 16; }
@media (max-width: 900px){
  .house-video__grid{ grid-template-columns: 1fr; }
}

/* ---------- Описание, характеристики, хозяин ---------- */
.house-about{ padding-top: clamp(3rem, 7vw, 6rem); }
.house-intro{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.house-about__lead{ font-family: var(--font-display); font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1.12; margin-top: .9rem; }
.house-about__text{ font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.45; margin-top: 1.2rem; }
.spec-list{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 1.6rem; margin-top: clamp(2rem, 4vw, 3rem); }
.spec-item{ border-top: 1px solid var(--line); padding-top: .8rem; }
.spec-item b{ display: block; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 2rem); }
.spec-item span{ font-size: .88rem; color: var(--ink-soft); }
.amenities-title{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.amenities-grid{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem 1.5rem; margin-top: 1.4rem; }
.amenities-grid li{ position: relative; padding-left: 1.5rem; color: var(--ink-soft); }
.amenities-grid li::before{ content: "—"; position: absolute; left: 0; color: var(--gold); }
/* «Во всех домах — уже в стоимости»: одинаковый блок на страницах домов и на doma.html */
.house-included{
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.house-included h2,
.house-included h3{ font-size: clamp(1.3rem, 2vw, 1.6rem); }
.houses-included{ padding-top: 0; }
.houses-included .house-included{ margin-top: 0; }
.house-included .amenities-grid{ margin-top: 1rem; }
/* «Все цены одним листом» на doma.html: текст слева, картинка прайса справа */
.price-sheet{ padding-top: 0; }
.price-sheet__grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
}
.price-sheet__text p:not(.kicker){ color: var(--ink-soft); font-size: 1.05rem; max-width: 34rem; margin-top: 1.2rem; }
.price-sheet__text ul{ margin-top: 1.2rem; }
.price-sheet__img{ justify-self: center; width: min(100%, 520px); }
.price-sheet__img a{ display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.price-sheet__img img{ display: block; width: 100%; height: auto; }
.price-sheet__img figcaption{ margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); text-align: center; }
@media (max-width: 900px){
  .price-sheet__grid{ grid-template-columns: 1fr; }
}
.house-tip{ margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.house-tip p + p{ margin-top: .6em; }
.owner-card{
  position: sticky; top: 6.5rem;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.owner-card .owner-name{ font-family: var(--font-display); font-size: 1.5rem; margin-top: .6rem; }
.owner-card .owner-hours{ color: var(--ink-soft); font-size: .92rem; margin-top: .5rem; }
.owner-card .owner-phone{ display: block; margin-top: 1rem; font-size: 1.25rem; font-weight: 700; }
.owner-card .btn{ margin-top: 1.2rem; }
.owner-card .note{ font-size: .85rem; color: var(--ink-soft); margin-top: 1rem; }
@media (max-width: 900px){
  .house-intro{ grid-template-columns: 1fr; }
  .owner-card{ position: static; }
  .amenities-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px){ .amenities-grid, .spec-list{ grid-template-columns: 1fr; } }

/* ---------- Цены ---------- */
.house-prices h2{ margin-top: .7rem; }
.price-table{ width: 100%; border-collapse: collapse; margin-top: clamp(1.6rem, 3vw, 2.4rem); }
.price-table th, .price-table td{ text-align: left; padding: clamp(1rem, 2vw, 1.5rem) .4rem; border-bottom: 1px solid var(--line); }
.price-table th{ font-weight: 600; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.price-table td{ font-size: clamp(1rem, 1.5vw, 1.25rem); }
.price-table td b{ font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.6rem); }
.price-table td:last-child, .price-table th:last-child{ text-align: right; }
/* Две колонки цен: баня (без чана / с чаном), дом №2 (будни / выходные) */
.price-table--cols th:nth-child(2), .price-table--cols td:nth-child(2){ text-align: right; }
@media (max-width: 560px){
  .price-table--cols td:first-child{ font-size: .9rem; }
  .price-table--cols td b{ font-size: 1.3rem; white-space: nowrap; }
}

/* ---------- Календарь (раздел) ---------- */
.house-calendar h2{ margin-top: .7rem; }

/* ---------- Другие дома ---------- */
.other-houses h2{ margin-top: .7rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.other-houses__viewport{ overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.other-houses__viewport::-webkit-scrollbar{ display: none; }
.other-houses__track{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 2rem);
  padding-inline: var(--gutter);
  max-width: var(--maxw);
  margin-inline: auto;
}
.other-houses .ribbon-card{ width: auto; }
@media (max-width: 900px){
  .other-houses__track{ display: flex; width: max-content; max-width: none; }
  .other-houses .ribbon-card{ width: 70vw; }
}

/* ---------- Баня: лёгкий «пар» над первым экраном ---------- */
.steam{ position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.steam span{
  position: absolute; bottom: -30%;
  width: 46vw; height: 46vw;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.2), rgba(255,255,255,0) 62%);
  filter: blur(24px);
  opacity: 0;
  animation: steam 18s ease-in infinite;
}
.steam span:nth-child(1){ left: 4%; }
.steam span:nth-child(2){ left: 36%; animation-delay: 6s; }
.steam span:nth-child(3){ left: 64%; animation-delay: 12s; }
@keyframes steam{
  0%{ transform: translateY(0) scale(.6); opacity: 0; }
  25%{ opacity: .9; }
  100%{ transform: translateY(-130%) scale(1.5); opacity: 0; }
}

/* ==========================================================================
   БЛОГ И СТАТЬЯ
   ========================================================================== */
.blog-hero{ padding-top: clamp(8rem, 14vw, 11rem); padding-bottom: clamp(2rem, 5vw, 4rem); }
.blog-hero h1{ margin-top: .8rem; }
.blog-hero .lede{ margin-top: 1.4rem; }
.blog-hero .btn{ margin-top: 2rem; }
.blog-hero .hero-actions{ margin-top: 2rem; }
.blog-hero .hero-actions .btn{ margin-top: 0; }
.blog-list{ padding-top: 0; }
.blog-empty{
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  text-align: center;
  color: var(--ink-soft);
}
.blog-empty .hand{ font-size: clamp(1.8rem, 3vw, 2.6rem); margin-bottom: .6rem; }
.blog-empty .btn{ margin-top: 1.6rem; }
.post-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3.5rem) clamp(1.2rem, 2.5vw, 2.4rem);
}
.post-card--wide{ grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.post-card__media{ display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-lg); background: var(--line); }
.post-card__media img{ width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.post-card:hover .post-card__media img{ transform: scale(1.05); }
.post-card__body{ margin-top: 1.1rem; }
.post-card--wide .post-card__body{ margin-top: 0; }
.post-card__title{ font-size: clamp(1.4rem, 2vw, 1.9rem); margin-top: .5rem; line-height: 1.2; }
.post-card--wide .post-card__title{ font-size: clamp(1.9rem, 3.6vw, 3.4rem); }
.post-card__title a{ background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-out); }
.post-card__title a:hover{ background-size: 100% 1px; }
.post-card__excerpt{ color: var(--ink-soft); margin-top: .7rem; }
@media (max-width: 900px){
  .post-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .post-card--wide{ grid-template-columns: 1fr; }
  .post-card--wide .post-card__body{ margin-top: 1.1rem; }
}
@media (max-width: 560px){ .post-grid{ grid-template-columns: 1fr; } }

.post-narrow{ max-width: 52rem; }
.post .kicker a{ color: var(--forest); }
.post .blog-hero h1{ font-size: clamp(2.3rem, 4.8vw, 4.6rem); line-height: 1.06; } /* заголовки статей длинные */
.post__cover{ margin: 0 auto; max-width: 80rem; aspect-ratio: 16 / 9; max-height: 80vh; overflow: hidden; border-radius: var(--radius-lg); background: var(--line); }
.post__cover img{ width: 100%; height: 100%; object-fit: cover; }
.post__body{ padding-block: clamp(2.5rem, 6vw, 5rem) var(--gap-air); }
.post__content{ font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.85; }
.post__body .btn{ margin-top: 2.5rem; }

/* Полоска прогресса чтения (js/main.js → initReadProgress) */
.read-progress{ position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 150; pointer-events: none; }
.read-progress span{ display: block; height: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; }

/* ---------- Статьи (stati/*.html): длинный текст с разметкой ----------
   .prose — заголовки, списки, таблицы и ссылки внутри статьи;
   .toc — оглавление, .tip — совет-врезка, .faq — вопросы-ответы
   на <details>, .article-cta — звонок в конце, .related — «читайте также». */
.post-meta{ display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: 1.6rem; font-size: .9rem; color: var(--ink-soft); }
.prose > * + *{ margin-top: 1.1em; }
.prose section{ padding-block: 0; } /* без общих отступов секций сайта */
.prose h2{
  font-size: clamp(1.75rem, 2.8vw, 2.5rem);
  line-height: 1.15;
  margin-top: 2.1em;
  scroll-margin-top: 6rem;
}
.prose h3{ font-size: clamp(1.25rem, 1.8vw, 1.55rem); margin-top: 1.7em; scroll-margin-top: 6rem; }
.prose h2 + *, .prose h3 + *{ margin-top: .65em; }
.prose ul, .prose ol{ padding-left: 1.35em; margin-bottom: 0; }
.prose ul{ list-style: disc; }
.prose li + li{ margin-top: .4em; }
.prose li::marker{ color: var(--gold); }
.prose ol > li::marker{ font-weight: 600; }
.prose a{
  color: var(--forest);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .25s ease;
}
.prose a:hover{ color: var(--gold); }
.prose strong{ font-weight: 600; }
.prose blockquote{
  margin-inline: 0;
  padding-left: 1.2em;
  border-left: 2px solid var(--gold);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.12em;
  line-height: 1.6;
}
.table-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.prose table{ width: 100%; border-collapse: collapse; font-size: .9em; line-height: 1.5; }
.prose th, .prose td{ text-align: left; vertical-align: top; padding: .75em .9em; border-bottom: 1px solid var(--line); }
.prose th{ font-weight: 600; background: var(--bg-alt); }
.toc{
  padding: 1.3em 1.6em;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  font-size: .95em;
  line-height: 1.6;
}
.toc .kicker{ font-size: .72rem; }
.prose .toc ol{ margin-top: .7em; }
.prose .toc a{ text-decoration: none; color: var(--ink); }
.prose .toc a:hover{ color: var(--forest); text-decoration: underline; }
.tip{
  padding: 1.3em 1.6em;
  background: var(--bg-alt);
  border-radius: var(--radius-lg);
  font-size: .95em;
  line-height: 1.7;
}
.tip .hand{ display: block; font-size: 1.6em; color: var(--forest); margin-bottom: .2em; }
.faq details{ border-bottom: 1px solid var(--line); }
.faq details:first-of-type{ border-top: 1px solid var(--line); }
.faq summary{
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding-block: .95em;
  font-weight: 600;
  line-height: 1.45;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary::after{
  content: '+';
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 1.5em; line-height: 1;
  color: var(--gold);
  transition: transform .35s var(--ease-out);
}
.faq details[open] summary::after{ transform: rotate(45deg); }
.faq details p{ padding-bottom: 1.1em; color: var(--ink-soft); }
.article-cta{
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--forest);
  color: rgba(255,255,255,.85);
  border-radius: var(--radius-lg);
}
.article-cta h2{ color: var(--white); font-size: clamp(1.7rem, 3vw, 2.6rem); line-height: 1.12; }
.article-cta p{ margin-top: .9rem; max-width: 36em; }
.article-cta .hero-actions{ margin-top: 1.6rem; }
.post__body .article-cta .btn{ margin-top: 0; }
.related .section-head{ margin-bottom: clamp(1.8rem, 4vw, 3rem); }

/* ==========================================================================
   КАЛЕНДАРИ ЗАНЯТОСТИ (js/calendar.js)
   Занятая дата = занятая ночь. Половинки по диагонали: верхний левый угол —
   утро (у кого-то выезд), нижний правый — вечер (у кого-то заезд).
   ========================================================================== */
.tm-cal{ position: relative; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.tm-cal__top{ display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.tm-cal__legend{ display: flex; flex-wrap: wrap; gap: .6rem 1.4rem; font-size: .88rem; color: var(--ink-soft); }
.tm-cal__legend li{ display: inline-flex; align-items: center; gap: .5rem; }
.tm-swatch{ width: 18px; height: 18px; border-radius: 6px; border: 1px solid var(--line); background: var(--white); display: inline-block; }
.tm-swatch.is-busy{ background: var(--bg-alt); border-color: transparent; }
.tm-swatch.is-half{ background: linear-gradient(135deg, var(--bg-alt) 50%, var(--white) 50%); }
/* Стрелки — по краям строки с названиями месяцев: ‹ Октябрь … Ноябрь › */
.tm-cal__body{ position: relative; }
.tm-cal__nav{ position: absolute; top: 0; left: 0; right: 0; z-index: 1; display: flex; justify-content: space-between; pointer-events: none; }
.tm-cal__arrow{
  pointer-events: auto;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--ink); background: none;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .3s ease, color .3s ease, opacity .3s ease;
}
.tm-cal__arrow:hover:not(:disabled){ background: var(--ink); color: var(--white); }
.tm-cal__arrow:disabled{ opacity: .25; cursor: default; }
.tm-cal__arrow svg{ width: 20px; height: 20px; }
.tm-cal__months{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 4rem); }
@media (max-width: 899.98px){ .tm-cal__months{ grid-template-columns: 1fr; } }
.tm-month__title{
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 56px;
  font-family: var(--font-display); font-size: clamp(1.3rem, 2vw, 1.7rem); text-align: center; margin-bottom: .9rem;
}
.tm-month__grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: clamp(3px, .5vw, 6px); }
.tm-month__dow{ padding-bottom: .3rem; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; text-align: center; color: var(--ink-soft); }

.tm-day{
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 40px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--white);
  color: var(--ink);
  font: inherit; font-size: clamp(.9rem, 1.15vw, 1.05rem);
  overflow: hidden;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .3s var(--ease-out);
}
.tm-day > span{ position: relative; z-index: 1; }
.tm-day.is-free:hover, .tm-day.is-departure:hover{ border-color: var(--forest); transform: translateY(-2px); }
.tm-day.is-past{ background: transparent; border-color: transparent; color: rgba(91,97,86,.4); cursor: default; }
/* занятый день зачёркнут — фирменный мотив, как в «слове-перевёртыше» */
.tm-day.is-busy{ background: var(--bg-alt); border-color: transparent; color: var(--ink-soft); cursor: not-allowed; }
.tm-day.is-busy > span{ padding-inline: 3px; background: linear-gradient(currentColor, currentColor) 0 58% / 100% 1.5px no-repeat; }
.tm-day.is-departure::before, .tm-day.is-arrival::before{ content: ""; position: absolute; inset: 0; pointer-events: none; }
.tm-day.is-departure::before{ background: linear-gradient(135deg, var(--bg-alt) 50%, transparent 50%); }
.tm-day.is-arrival::before{ background: linear-gradient(135deg, transparent 50%, var(--bg-alt) 50%); }
.tm-day.is-arrival{ cursor: not-allowed; }
/* выбор заезда — выезда */
.tm-day.is-in{ background: rgba(68,90,59,.14); border-color: transparent; }
.tm-day.is-preview{ background: rgba(68,90,59,.08); border-color: var(--forest); border-style: dashed; }
.tm-day.is-start, .tm-day.is-end{ background: var(--forest); border-color: var(--forest); color: var(--white); }
.tm-day.is-start::before, .tm-day.is-end::before{ display: none; }
.tm-day.is-unreachable:not(.is-past){ opacity: .4; }
.tm-day.is-shake{ animation: tmShake .45s ease; }
@keyframes tmShake{ 20%{ transform: translateX(-5px); } 40%{ transform: translateX(5px); } 60%{ transform: translateX(-3px); } 80%{ transform: translateX(3px); } }

.tm-cal__hint{ min-height: 1.6em; margin-top: 1.2rem; color: var(--ink-soft); }
.tm-cal__hint.is-error{ color: #9A3B2E; }
.tm-cal__tip{
  position: absolute; z-index: 5;
  padding: .45rem .8rem;
  border-radius: 8px;
  background: var(--ink); color: var(--white);
  font-size: .82rem; white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 12px 30px -16px rgba(0,0,0,.6);
}
.tm-cal__summary{
  max-width: 640px;
  margin-top: 1.4rem;
  padding: clamp(1.2rem, 3vw, 2rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.tm-sum__row{ display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding-block: .6rem; border-bottom: 1px solid var(--line); }
.tm-sum__row span{ color: var(--ink-soft); }
.tm-sum__total b{ font-family: var(--font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); font-weight: 400; color: var(--forest); }
.tm-sum__note{ margin-top: .8rem; font-size: .85rem; color: var(--ink-soft); }
.tm-sum__actions{ display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }

/* ---------- Общий календарь всех домов ---------- */
.availability__head{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 3rem; align-items: end; }
.availability__head h2{ margin-top: .7rem; }
.availability__grid{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.tm-overview{ min-height: 460px; }
.tm-overview .tm-cal__top{ margin-top: 0; }
.tm-loading{ color: var(--ink-soft); padding-top: 2rem; }
.tm-day--ov{ flex-direction: column; gap: 5px; }
.tm-bars{ display: inline-flex; gap: 2px; width: 62%; }
.tm-bars i{ flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.tm-bars i.is-free{ background: var(--forest); }
.tm-cal__legend .tm-bars{ width: 28px; }
.tm-day--ov.is-past .tm-bars{ visibility: hidden; }
.tm-day--ov.is-full{ background: var(--bg-alt); border-color: transparent; color: var(--ink-soft); }
.tm-day--ov.is-start .tm-bars i, .tm-day--ov.is-end .tm-bars i{ background: rgba(255,255,255,.35); }
.tm-day--ov.is-start .tm-bars i.is-free, .tm-day--ov.is-end .tm-bars i.is-free{ background: var(--white); }
.tm-error{ padding: 2rem; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--ink-soft); text-align: center; }
.tm-error a{ color: var(--forest); font-weight: 700; }

.avail-list{ display: flex; flex-direction: column; gap: .7rem; position: sticky; top: 7rem; }
.avail-item a{
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: .6rem .9rem .6rem .6rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 16px;
  transition: border-color .3s ease, opacity .4s ease, transform .4s var(--ease-out);
}
.avail-item a:hover{ border-color: var(--forest); transform: translateX(4px); }
.avail-item img{ width: 64px; height: 64px; object-fit: cover; border-radius: 12px; transition: filter .4s ease; }
.avail-item__name{ font-family: var(--font-display); font-size: 1.25rem; line-height: 1.2; }
.avail-item__name small{ display: block; font-family: var(--font-text); font-size: .8rem; color: var(--ink-soft); }
.avail-item__status{ font-size: .78rem; font-weight: 700; letter-spacing: .03em; color: var(--forest); text-align: right; }
.avail-item.is-free a{ border-color: var(--forest); box-shadow: 0 14px 30px -24px rgba(68,90,59,.8); }
.avail-item.is-busy a{ opacity: .5; }
.avail-item.is-busy img{ filter: grayscale(1); }
.avail-item.is-busy .avail-item__status{ color: var(--ink-soft); }
@media (max-width: 1080px){
  .availability__grid, .availability__head{ grid-template-columns: 1fr; }
  .avail-list{ position: static; }
  .tm-overview{ min-height: 0; }
}

/* ---------- Эффекты (js/motion.js) ---------- */
/* Маска строки при подъёме заголовка: небольшой запас снизу, чтобы
   не обрезались хвосты «у», «р», «д» при плотном межстрочном интервале. */
.split-line-mask{ padding-bottom: .14em; margin-bottom: -.14em; padding-inline: .04em; margin-inline: -.04em; }
[data-curtain]{ overflow: hidden; }
[data-parallax]{ scale: 1.22; }
[data-fly] > *{ rotate: var(--tilt, 0deg); }