/* ============================================================
   CRYSTAL — главная «в пяти сценах» (template-home.php).
   Палитра — канон заглушки (§1.1 карты дизайна), кривые .22/1/.36/1.

   Режимы:
   · по умолчанию (без JS, мобайл, prefers-reduced-motion) — «стопка
     sticky-листов» из макета v2: каждая сцена — полноэкранный лист,
     наезжающий на предыдущий; работает чистым CSS;
   · .cr-scenes.is-slider (ставит cr-scenes.js на десктопе) — один
     sticky-вьюпорт 560vh, переходы circle/wipe/frost ведёт JS.

   Капс кириллицы запрещён (Jost: Л≈П) — все лейблы строчными
   с трекингом; латиница (CRYSTAL) капсом в самих текстах.
   ============================================================ */

.cr-scenes,
.cr-bridge-dawn,
.cr-lsec,
.cr-dsec{
	--cz-ink:#16120E;
	--cz-umber:#2A231C;
	--cz-stone:#E7E1D6;
	--cz-linen:#F1EBE1;
	--cz-linen2:#EAE2D4;
	--cz-sand:#CFC4B2;
	--cz-wood:#8A6A4B;
	--cz-bordeaux:#6B2233;
	--cz-ember:#C2622E;
	--cz-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- keyframes ---------- */
/* кен-бёрнс подложки (имитация живого видео до съёмки) */
@keyframes czPan{
	0%{transform:scale(1)}
	100%{transform:scale(1.06) translate(-1.2%,-.8%)}
}
/* скролл-хинт: «капля» по линии */
@keyframes czHint{
	0%{transform:scaleY(.15);opacity:0}
	45%{opacity:.8}
	70%{transform:scaleY(1);opacity:.55}
	100%{transform:scaleY(1);opacity:0}
}
/* интро-каскад входа (тайминги заглушки; работает и без JS) */
@keyframes czIn{to{opacity:1;transform:none}}
@keyframes czRule{to{width:clamp(90px,12vmin,160px)}}

/* ============================================================
   Каркас: стопка листов (базовый режим) и слайдер (.is-slider)
   ============================================================ */
/* обложка во весь экран: шапка лежит НА сцене, а не над ней */
.cr-scenes{position:relative;margin-top:calc(-1 * var(--cr-hdr-full,88px));
	background:var(--cz-ink);color:var(--cz-stone)}
.cr-scenes__vp{position:relative}

.cr-scene{
	position:relative;
	height:100vh;height:100svh;
	overflow:hidden;
	background:var(--cz-ink);
}
.cr-scene__in{position:absolute;inset:0}

/* стопка: каждый лист липнет к верху и наезжает на предыдущий (v2) */
.cr-scenes:not(.is-slider) .cr-scene{position:-webkit-sticky;position:sticky;top:0}
.cr-scenes:not(.is-slider) .cr-scene + .cr-scene{
	border-radius:26px 26px 0 0;
	box-shadow:0 -34px 70px -30px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.16);
}

/* слайдер: сцены — абсолютные слои в sticky-вьюпорте */
.cr-scenes.is-slider{height:560vh}
.cr-scenes.is-slider .cr-scenes__vp{
	position:-webkit-sticky;position:sticky;top:0;
	height:100vh;height:100svh;
	overflow:hidden;
}
.cr-scenes.is-slider .cr-scene{
	position:absolute;inset:0;height:auto;
	border-radius:0;box-shadow:none;
}
/* стартовое состояние слоёв до первого кадра JS */
.cr-scenes.is-slider .cr-scene[data-fx]{visibility:hidden}

/* ---------- слои сцены ---------- */
.cr-scene__bg{
	position:absolute;inset:-4%;
	animation:czPan 26s ease-in-out infinite alternate;
}
.cr-scene:nth-child(even) .cr-scene__bg{animation-duration:28s}

.cr-scene__video{
	position:absolute;inset:0;width:100%;height:100%;
	object-fit:cover;display:block;
}
/* стопка/без JS: фрост-слой дорог — один лёгкий blur на самом видео,
   press-reveal (.is-press) приоткрывает окно */
.cr-scenes:not(.is-slider) .cr-scene__video{
	filter:blur(3px) saturate(.97);
	transition:filter .6s var(--cz-ease);
}
.cr-scenes.is-press:not(.is-slider) .cr-scene__video{filter:blur(1px) saturate(1)}
.cr-scenes.is-slider .cr-scene__video{filter:none}

/* зерно травлёного стекла — базовый .cr-grain уже в cr-ui.css
   (тот же data-URI feTurbulence, opacity .045, blend overlay) — не дублируем */

/* динамическая матовость входа: JS пишет blur (константная база, при
   зажатии ×.4); transition поверх лерпа — как у fb в макете */
.cr-frost{
	position:absolute;inset:0;pointer-events:none;
	-webkit-backdrop-filter:blur(9px) saturate(.97);
	backdrop-filter:blur(9px) saturate(.97);
	background:rgba(231,225,214,.04);
	transition:backdrop-filter .6s var(--cz-ease),-webkit-backdrop-filter .6s var(--cz-ease);
}
.cr-scenes:not(.is-slider) .cr-frost{display:none}

/* ============================================================
   Знак-линза «жидкое стекло» — тот же эффект, что на заглушке:
   логотип как толща стекла преломляет ИСХОДНЫЙ кадр видео, пока сам
   фон лежит под матовым слоем. Механика — assets/js/cr-lens.js,
   карта нормалей — assets/img/glassmap.png.

   Геометрия знака живёт в трёх переменных: их можно менять посекционно
   (или в @media), чтобы двигать знак по композиции — блок переносимый.
   ============================================================ */
/* Знак-окно одно на все сцены и лежит НАД ними (внутри sticky-вьюпорта):
   позицию и размер ведёт cr-scenes.js по точкам data-lens каждой сцены,
   внутри стекла — кадр текущей сцены. Стартовые значения — точка сцены 0. */
.cr-lens{
	/* знак лежит НАД кадром, но ПОД вуалью и текстом: иначе светлое стекло
	   съедает контраст заголовка (порядок: кадр → знак(3) → вуаль(4) → текст(5)) */
	position:absolute;inset:0;z-index:3;
	pointer-events:none;user-select:none;
	--cr-lens-h:300vh;
	--cr-lens-x:76%;
	--cr-lens-y:52%;
	--cr-lens-k:1;       /* общий множитель размера (мобайл — меньше) */
}
/* В стопке (мобайл/reduced-motion) знак липнет к верху вьюпорта и НЕ занимает
   места в потоке: отрицательный margin-bottom снимает его высоту, иначе первая
   сцена уезжала на экран вниз и гость видел пустоту. */
.cr-scenes:not(.is-slider) .cr-lens{
	position:-webkit-sticky;position:sticky;top:0;inset:auto;
	width:100%;height:100vh;height:100svh;margin-bottom:-100vh;margin-bottom:-100svh;
	opacity:.9;
}
.cr-lens__gl{
	position:absolute;inset:0;width:100%;height:100%;display:block;
	opacity:0;transition:opacity 1.3s ease;
	/* контактная тень стекла считается по альфе канваса */
	filter:drop-shadow(0 18px 44px rgba(0,0,0,.28)) drop-shadow(0 1px 3px rgba(0,0,0,.18));
}
.cr-lens.is-live .cr-lens__gl{opacity:1}
/* пустой блок задаёт прямоугольник знака; шейдер рисует ровно по нему,
   а cr-scenes.js двигает его при переходах сцен (дрейф) */
.cr-lens__box{
	position:absolute;left:var(--cr-lens-x);top:var(--cr-lens-y);
	width:calc(var(--cr-lens-h) * var(--cr-lens-k) * .6773);   /* пропорция знака */
	height:calc(var(--cr-lens-h) * var(--cr-lens-k));
	transform:translate(-50%,-50%);
	pointer-events:none;
}
/* Знак как CSS-стекло: работает там, где кадра нет (сцены без видео).
   Маска — логотип, толща — backdrop-blur: окно преломляет саму страницу. */
.cr-lens__glass{
	position:absolute;left:var(--cr-lens-x);top:var(--cr-lens-y);
	width:calc(var(--cr-lens-h) * var(--cr-lens-k) * .6773);
	height:calc(var(--cr-lens-h) * var(--cr-lens-k));
	transform:translate(-50%,-50%);
	opacity:0;transition:opacity .8s ease;
	-webkit-mask-image:var(--cr-lens-mask);mask-image:var(--cr-lens-mask);
	-webkit-mask-size:contain;mask-size:contain;
	-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
	-webkit-mask-position:center;mask-position:center;
	-webkit-backdrop-filter:blur(18px) saturate(1.18) brightness(1.08);
	backdrop-filter:blur(18px) saturate(1.18) brightness(1.08);
	background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 52%,rgba(255,255,255,.16));
	/* контактная тень идёт по альфе маски — знак читается и на ровном градиенте */
	filter:drop-shadow(0 24px 48px rgba(0,0,0,.4)) drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.cr-lens.is-css .cr-lens__glass{opacity:1}
.cr-lens.is-css .cr-lens__gl{opacity:0}

/* запасной вариант без WebGL: плоский знак вместо стекла */
.cr-lens__flat{
	position:absolute;left:var(--cr-lens-x);top:var(--cr-lens-y);
	width:calc(var(--cr-lens-h) * var(--cr-lens-k) * .6773);height:auto;
	transform:translate(-50%,-50%);
	opacity:0;transition:opacity .8s ease;
}
.cr-lens--off .cr-lens__flat{opacity:.14}
@media (max-width:899px){
	/* Множитель 1: у телефона своя раскладка знака (data-lens-m по заглушке —
	   знак за правым краем, в кадре его дуга), масштабировать нечего. */
	.cr-lens{--cr-lens-k:1;opacity:.95}
	.cr-lens__glass{
		-webkit-backdrop-filter:blur(12px) saturate(1.1) brightness(1.05);
		backdrop-filter:blur(12px) saturate(1.1) brightness(1.05);
	}
}

/* Логика кадра (редакция 17.08, уточнение по фидбеку):
   · входная сцена — настоящее видео клиента матовой толщей, резким остаётся
     только то, что видно сквозь стекло знака (рецепт заглушки);
   · сцены 1–5 — фоном ТОЛЬКО градиент-плейсхолдер сцены; их клипы не лежат
     на фоне, а видны исключительно ВНУТРИ знака-окна: кадр ресторана живёт
     в стекле, страница вокруг остаётся графикой до настоящей съёмки.
   Нажатие «приоткрывает» кадр (.is-press ведёт cr-scenes.js). */
.cr-scenes .cr-scene--s0 .cr-scene__video,
.cr-scenes.is-slider .cr-scene--s0 .cr-scene__video{
	filter:blur(var(--cz-hero-blur,10px)) saturate(.97) sepia(.03);
	transition:filter .9s var(--cz-ease);
}
.cr-scenes.is-press .cr-scene--s0 .cr-scene__video{--cz-hero-blur:7px}
/* кадр сцены декодируется (нужен как текстура стекла), но не виден на фоне */
.cr-scene:not(.cr-scene--s0) .cr-scene__video{opacity:0}
/* отдельный фрост-слой больше не нужен: размытие уехало на сами клипы */
.cr-frost{display:none}

/* гигантские буквы-глифы сцен */
.cr-glyph{
	position:absolute;right:-5vmax;bottom:-14vmax;
	font-weight:200;font-size:44vmax;line-height:1;
	pointer-events:none;user-select:none;
}
.cr-glyph--light{
	right:-6vmin;bottom:-12vmin;
	font-size:40vmin;color:rgba(107,34,51,.045);
}

/* матовая плита под текстом (стопка/без JS: своя в каждой сцене) */
.cr-matte{
	position:absolute;inset:0;z-index:4;pointer-events:none;
	background:linear-gradient(97deg,rgba(22,18,14,.6) 0%,rgba(22,18,14,.34) 44%,rgba(22,18,14,.07) 80%,rgba(22,18,14,0) 100%);
}
/* сцена «Семья» светлая — шторка темнее, текст остаётся читаемым
   (в макете этот градиент лежит внутри слоя l2 — живёт и в слайдере) */
.cr-matte--deep{
	background:linear-gradient(97deg,rgba(42,35,28,.85) 0%,rgba(42,35,28,.55) 44%,rgba(42,35,28,.12) 76%,rgba(42,35,28,0) 100%);
}
/* слайдер: вместо посценных плит — ОДНА матовая стена над всеми слоями
   (r_matte макета): левые 62%, blur ведёт JS через --cr-matte-b (b·14px),
   градиент 97° + mask-затухание с 52% ширины. Сцены под ней режутся
   clip-path'ами, а стекло слева остаётся неподвижным — переход «дорогой». */
.cr-scenes.is-slider .cr-matte:not(.cr-matte--deep){display:none}
.cr-scenes.is-slider .cr-scenes__vp::after{
	content:"";position:absolute;top:0;bottom:0;left:0;width:62%;z-index:4;
	-webkit-backdrop-filter:blur(var(--cr-matte-b,8.4px)) saturate(1.02);
	backdrop-filter:blur(var(--cr-matte-b,8.4px)) saturate(1.02);
	background:linear-gradient(97deg,rgba(22,18,14,.6) 0%,rgba(22,18,14,.34) 44%,rgba(22,18,14,.07) 80%,rgba(22,18,14,0) 100%);
	-webkit-mask-image:linear-gradient(90deg,#000 52%,transparent 100%);
	mask-image:linear-gradient(90deg,#000 52%,transparent 100%);
	pointer-events:none;
}
/* слой текстов и хинта над сценами (JS переносит их сюда в слайдере) */
.cr-scenes.is-slider .cr-stage{position:absolute;inset:0;z-index:5;pointer-events:none}

/* ============================================================
   Типографика сцен
   ============================================================ */
.cr-eyebrow{
	display:flex;align-items:center;gap:14px;margin:0;
	font-size:10px;letter-spacing:.32em;line-height:1.6;
	color:rgba(231,225,214,.6);
}
.cr-eyebrow__dash{width:34px;height:1px;background:currentColor;opacity:.5;flex:none}
.cr-eyebrow--center{justify-content:center}
.cr-eyebrow--wood{color:var(--cz-wood)}

/* Обложка собрана по действующей заглушке (мы от неё пляшем):
   леттеринг-картинка вместо набранного заголовка, растущая линия,
   тихая строка-тэглайн, строка УТП и текстовые действия. */
.cr-hero-word{
	display:block;margin:clamp(14px,2.4vh,26px) 0 0;line-height:0;
}
.cr-hero-word img{
	display:block;width:clamp(190px,22vw,320px);height:auto;
	opacity:.97;filter:drop-shadow(0 2px 22px rgba(0,0,0,.6));
}
.cr-hero-rule{
	width:0;height:1px;margin:clamp(16px,2.4vh,28px) 0 0;
	background:linear-gradient(90deg,rgba(241,235,225,.85),transparent);
	opacity:.6;
	animation:czRule 1.6s var(--cz-ease) .85s both;
}
.cr-hero-lead{
	margin:clamp(13px,2vh,24px) 0 0;font-weight:300;
	font-size:clamp(13px,1.5vw,17px);letter-spacing:.16em;line-height:1.75;
	color:rgba(241,235,225,.86);text-shadow:0 1px 16px rgba(0,0,0,.55);
}
.cr-hero-usp{
	margin:clamp(8px,1.2vh,14px) 0 0;
	font-size:clamp(9.5px,1.05vw,11px);letter-spacing:.18em;line-height:1.9;
	color:rgba(231,225,214,.55);
}
.cr-hero-cta{display:flex;gap:clamp(16px,2vw,30px);margin-top:clamp(18px,3vh,34px);flex-wrap:wrap}

/* интро-каскад: чистый CSS, тайминги и кривая заглушки */
.cr-in{opacity:0;transform:translateY(14px);animation:czIn 1.1s var(--cz-ease) both}
.cr-in--1{animation-delay:.5s}
.cr-in--2{animation-delay:.65s;animation-duration:1.2s;transform:translateY(16px)}
.cr-in--3{animation-delay:1s}
.cr-in--4{animation-delay:1.15s}
.cr-in--5{animation-delay:1.35s}

/* кнопка-линия «тихое действие»: линия дорастает 44→66px (рецепт Зайца) */
.cr-scbtn{
	display:inline-block;padding:0;border:0;background:none;font-family:inherit;
	color:var(--cz-stone);text-decoration:none;cursor:pointer;
	font-size:11px;letter-spacing:.24em;line-height:1.5;
	transition:color .3s ease;
}
.cr-scbtn__u{
	display:block;width:44px;height:1px;margin-top:9px;
	background:currentColor;opacity:.6;
	transition:width .45s var(--cz-ease);
}
.cr-scbtn:hover,.cr-scbtn:focus-visible{color:var(--cz-ember)}
.cr-scbtn:hover .cr-scbtn__u,.cr-scbtn:focus-visible .cr-scbtn__u{width:66px}
.cr-scbtn--dark{color:var(--cz-bordeaux)}
.cr-scbtn--dark:hover,.cr-scbtn--dark:focus-visible{color:var(--cz-ember)}

/* тексты сцен 1–5 */
.cr-stext{
	position:absolute;z-index:5;
	left:var(--cr-edge);bottom:clamp(64px,10vh,120px);
	max-width:min(560px,calc(100vw - var(--cr-gutter) * 2));
}
.cr-stext--0{bottom:clamp(108px,15vh,180px);max-width:min(640px,calc(100vw - var(--cr-gutter) * 2))}
.cr-stext--5{
	left:50%;top:50%;bottom:auto;
	transform:translate(-50%,-50%);
	width:min(560px,calc(100vw - var(--cr-gutter) * 2));max-width:none;
	text-align:center;box-sizing:border-box;
}
.cr-stext__h{
	margin:22px 0 0;font-weight:250;
	font-size:clamp(32px,4.4vw,58px);letter-spacing:.02em;line-height:1.1;
	color:var(--cz-linen);text-wrap:balance;
}
.cr-stext__p{
	margin:20px 0 0;font-weight:300;font-size:15.5px;line-height:1.85;
	color:rgba(231,225,214,.72);max-width:40ch;
}
.cr-stext__btn{margin-top:26px}

/* сцена 5 — бронь */
.cr-phone-xl{
	display:inline-block;margin-top:24px;padding:0;border:0;background:none;font-family:inherit;
	font-weight:200;font-size:clamp(34px,5.4vw,64px);letter-spacing:.06em;
	color:var(--cz-linen);text-decoration:none;cursor:pointer;
	transition:color .3s ease;
}
.cr-phone-xl:hover,.cr-phone-xl:focus-visible{color:var(--cz-ember)}
/* действия финала: настоящая кнопка формы + маршрут, обе заметно меньше
   телефона — телефон остаётся главным «живым» контактом */
.cr-stext__acts{
	display:flex;gap:clamp(10px,1.6vw,18px);justify-content:center;
	flex-wrap:wrap;margin-top:clamp(18px,2.6vh,28px);
}
.cr-stext__acts .cr-btn{font-size:.76rem;padding:12px 24px}
.cr-stext__hours{
	margin:18px 0 0;font-size:10.5px;letter-spacing:.24em;line-height:2.1;
	color:rgba(231,225,214,.55);
}
.cr-stext__note{
	margin:22px auto 0;font-weight:300;font-size:14.5px;line-height:1.85;
	color:rgba(231,225,214,.7);max-width:46ch;text-wrap:pretty;
}
.cr-stext__addr{
	margin:16px auto 0;font-weight:300;font-size:12px;letter-spacing:.06em;line-height:1.9;
	color:rgba(231,225,214,.45);max-width:52ch;
}

/* слайдер: тексты 1–4 по вертикальному центру, ведёт JS */
.cr-scenes.is-slider .cr-stext:not(.cr-stext--0):not(.cr-stext--5){
	top:50%;bottom:auto;
	transform:translateY(calc(-50% + 24px));
	max-width:min(500px,calc(100vw - clamp(60px,16vw,240px)));
	opacity:0;pointer-events:none;
}
.cr-scenes.is-slider .cr-stext--5{
	transform:translate(-50%,calc(-50% + 24px));
	opacity:0;pointer-events:none;
}
.cr-scenes.is-slider [data-cap]{opacity:0}

/* подпись кадра (шот-лист съёмки) */
.cr-cap{
	position:absolute;z-index:6;margin:0;
	right:var(--cr-edge);bottom:clamp(18px,4.5vh,44px);
	display:flex;align-items:center;gap:10px;
	font-size:10px;letter-spacing:.3em;white-space:nowrap;
	color:rgba(231,225,214,.6);pointer-events:none;
}
.cr-cap--light{color:rgba(74,55,36,.65)}
.cr-dia{width:5px;height:5px;background:var(--cz-ember);transform:rotate(45deg);flex:none}
.cr-cap--light .cr-dia{background:var(--cz-bordeaux)}

/* скролл-хинт */
.cr-hint{
	position:absolute;left:50%;bottom:22px;z-index:6;
	transform:translateX(-50%);
	display:flex;flex-direction:column;align-items:center;gap:12px;
	color:rgba(231,225,214,.55);pointer-events:none;
}
.cr-hint__t{font-size:9.5px;letter-spacing:.3em;white-space:nowrap}
.cr-hint__line{
	width:1px;height:40px;background:rgba(231,225,214,.45);
	transform-origin:top;
	animation:czHint 2.2s cubic-bezier(.4,0,.2,1) infinite;
}

/* колонка цифр 01–05 — только в слайдере */
.cr-snav{display:none}
.cr-scenes.is-slider .cr-snav{
	position:absolute;right:clamp(14px,3.4vw,52px);top:50%;z-index:7;
	transform:translateY(-50%);
	display:flex;flex-direction:column;align-items:center;gap:18px;
	color:var(--cz-stone);
}
.cr-snav__n{
	padding:0;border:0;background:none;font-family:inherit;color:inherit;
	font-size:11px;letter-spacing:.26em;cursor:pointer;
	opacity:.32;transition:opacity .4s;
}
.cr-snav__sep{width:1px;height:22px;background:rgba(231,225,214,.3)}

/* ============================================================
   Мост тьма→лён и светлые SEO-блоки (из v1, по §4 карты)
   ============================================================ */
.cr-bridge-dawn{
	height:34vh;min-height:220px;
	background-image:var(--cr-ramp-dawn);
}

.cr-lsec{
	position:relative;overflow:clip;
	background:var(--cz-linen);color:var(--cz-umber);
	padding:clamp(70px,10vh,120px) var(--cr-gutter);
}
.cr-lsec--alt{background:var(--cz-linen2)}
.cr-lsec__in{position:relative;max-width:var(--cr-content);margin:0 auto}
.cr-lsec__h{
	margin:22px 0 0;font-weight:250;
	font-size:clamp(28px,3.6vw,48px);letter-spacing:.02em;line-height:1.12;
	color:var(--cz-umber);max-width:24ch;text-wrap:balance;
}
.cr-lsec__lead{
	margin:18px 0 0;font-weight:300;font-size:15.5px;line-height:1.8;
	color:rgba(42,35,28,.7);max-width:56ch;
}
.cr-lsec__cta{display:flex;gap:36px;margin-top:30px;flex-wrap:wrap}

/* манифест-цитата */
.cr-manifest{
	margin:26px 0 0;font-weight:250;
	font-size:clamp(24px,3.2vw,42px);letter-spacing:.01em;line-height:1.32;
	color:var(--cz-umber);max-width:30ch;text-wrap:balance;
}

/* шеф: текст + фото с офсет-подложкой бордо («паспарту») */
.cr-chef{
	display:grid;grid-template-columns:1.15fr .85fr;
	gap:clamp(28px,5vw,72px);align-items:start;
}
.cr-chef__media{position:relative;margin:8px 0 16px 16px;max-width:440px}
.cr-chef__media::before{
	content:"";position:absolute;inset:0;
	transform:translate(-16px,16px);
	background:var(--cz-bordeaux);opacity:.92;
}
.cr-chef__media .cr-ph{position:relative;z-index:1}

.cr-dishes{margin-top:26px;border-top:1px solid rgba(42,35,28,.15)}
.cr-dish{padding:20px 0;border-bottom:1px solid rgba(42,35,28,.15)}
.cr-dish__top{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.cr-dish__t{
	margin:0;font-weight:250;
	font-size:clamp(19px,2.2vw,25px);letter-spacing:.01em;color:var(--cz-umber);
}
.cr-dish__badge{font-size:10px;letter-spacing:.26em;color:var(--cz-wood)}
.cr-dish__p{
	margin:8px 0 0;font-weight:300;font-size:14.5px;line-height:1.75;
	color:rgba(42,35,28,.65);max-width:52ch;
}
.cr-dishes + .cr-scbtn{margin-top:28px}

/* пространства: строки-hairline вместо карточек */
.cr-rows{margin-top:26px;border-top:1px solid rgba(42,35,28,.15)}
.cr-row{
	display:flex;align-items:baseline;justify-content:space-between;gap:18px;
	padding:19px 0;border-bottom:1px solid rgba(42,35,28,.15);
}
.cr-row__t{margin:0;font-weight:250;font-size:clamp(19px,2.2vw,25px);color:var(--cz-umber)}
.cr-row__cap{font-size:10px;letter-spacing:.26em;color:var(--cz-wood);text-align:right}

/* каскад reveal (классы .cr-reveal ведёт cr-ui.js) */
.cr-lsec .cr-reveal:nth-child(2),.cr-chef__media.cr-reveal{transition-delay:.12s}

/* ---------- тёмный финал: карточка КПП на стекле ---------- */
.cr-dsec{
	position:relative;overflow:clip;color:var(--cz-stone);
	background-color:#16120E;
	background-image:
		radial-gradient(70% 50% at 74% 34%,rgba(194,98,46,.16) 0%,rgba(194,98,46,0) 60%),
		radial-gradient(44% 38% at 12% 88%,rgba(107,34,51,.2) 0%,rgba(107,34,51,0) 60%),
		var(--cr-ramp-dusk-home);
	padding:clamp(120px,16vh,200px) var(--cr-gutter) clamp(70px,10vh,120px);
}
.cr-dsec .cr-grain{mix-blend-mode:overlay}
.cr-dsec__in{position:relative;z-index:1;max-width:var(--cr-content);margin:0 auto}
.cr-kpp{
	max-width:640px;border-radius:12px;
	padding:clamp(24px,4vw,44px);
	background:rgba(42,35,28,.4);
	-webkit-backdrop-filter:blur(20px) saturate(1.2);
	backdrop-filter:blur(20px) saturate(1.2);
	border:1px solid rgba(255,255,255,.14);
	box-shadow:inset 0 1.5px 0 rgba(255,255,255,.2),0 30px 60px -40px rgba(0,0,0,.6);
}
.cr-kpp__h{
	margin:18px 0 0;font-weight:250;
	font-size:clamp(26px,3.2vw,40px);line-height:1.15;color:var(--cz-linen);
}
.cr-kpp__p{
	margin:16px 0 0;font-weight:300;font-size:15px;line-height:1.85;
	color:rgba(231,225,214,.72);
}
.cr-kpp__cta{display:flex;gap:32px;margin-top:26px;flex-wrap:wrap;align-items:baseline}

/* ============================================================
   Адаптив и prefers-reduced-motion
   ============================================================ */
@media (max-width:879px){
	.cr-scenes .cr-grain{display:none}          /* зерно на мобиле дорого */
	.cr-hero-cta,.cr-lsec__cta,.cr-kpp__cta{gap:22px}

	/* СТОПКА НА ТЕЛЕФОНЕ (правка 17.08). Текст сцены раньше стоял у нижнего
	   края листа — и следующий лист наезжал ровно на него: гость видел пустые
	   градиенты. Теперь текст стоит в верхней трети листа, всегда в кадре. */
	.cr-scenes:not(.is-slider) .cr-stext{
		top:calc(var(--cr-hdr-full) + clamp(18px,4vh,40px));bottom:auto;
		max-width:calc(100vw - var(--cr-gutter) * 2);
	}
	.cr-scenes:not(.is-slider) .cr-stext--0{top:calc(var(--cr-hdr-full) + clamp(20px,5vh,54px));bottom:auto}
	.cr-scenes:not(.is-slider) .cr-stext--5{top:50%;bottom:auto}
	.cr-cap{bottom:14px}

	/* Вуаль на телефоне вертикальная: кадр дышит в середине, а сверху и снизу
	   уходит в тьму — там лежит текст, и он читается поверх любого кадра. */
	.cr-matte{
		background:linear-gradient(180deg,
			rgba(22,18,14,.78) 0%,rgba(22,18,14,.5) 26%,
			rgba(22,18,14,.3) 50%,rgba(22,18,14,.62) 78%,rgba(22,18,14,.88) 100%);
	}
	.cr-matte--deep{
		background:linear-gradient(180deg,
			rgba(42,35,28,.86) 0%,rgba(42,35,28,.6) 26%,
			rgba(42,35,28,.42) 50%,rgba(42,35,28,.7) 78%,rgba(42,35,28,.92) 100%);
	}

	/* типографика телефона: заголовок обложки и сцен ниже, строки плотнее */
	/* Колонка обложки — как в мобильной заглушке: леттеринг, растущая линия,
	   подпись под ней (не сбоку). */
	.cr-hero-word{margin:0}
	.cr-hero-word img{width:clamp(150px,42vw,190px)}
	.cr-hero-lead{
		margin:clamp(10px,1.6vh,16px) 0 0;
		font-size:clamp(11px,3vw,12.5px);letter-spacing:.14em;line-height:1.6;
	}
	.cr-hero-rule{margin-top:clamp(12px,2vh,18px)}
	.cr-hero-usp{font-size:9.5px;letter-spacing:.14em;line-height:1.9}
	.cr-hero-cta{gap:clamp(14px,4.4vw,22px);margin-top:clamp(14px,2.4vh,22px)}
	.cr-stext__h{font-size:clamp(26px,7.4vw,34px);margin-top:16px}
	.cr-stext__p{font-size:14.5px;line-height:1.7;margin-top:14px}
	.cr-stext__btn{margin-top:20px}
	.cr-eyebrow{font-size:9.5px;letter-spacing:.26em}
}
@media (max-width:899px){
	.cr-chef{grid-template-columns:1fr}
	.cr-chef__media{margin-left:16px}
	.cr-row{flex-direction:column;gap:6px}
	.cr-row__cap{text-align:left}
}

@media (prefers-reduced-motion: reduce){
	.cr-scene__bg{animation:none}
	.cr-hint__line{animation:none;opacity:.4}
	.cr-in{animation:none;opacity:1;transform:none}
	.cr-hero-rule{animation:none;width:90px}
	.cr-scbtn__u,.cr-scene__video{transition:none}
}

/* ============================================================
   Главная: шапка зафиксирована и НЕ прячется при скролле (в макете
   header всегда на месте) — основной гард в cr-ui.js (onScroll),
   это правило — страховка, если класс поставит кто-то ещё.
   ============================================================ */
body.page-template-template-home.cr-hdr-hidden .cr-header{
	transform:none;opacity:1;pointer-events:auto;
}

/* ============================================================
   Главная = только слайдер сцен (решение 16.08): футер-плита скрыта,
   финал несёт сцена 5. Модалка/скрипты из wp_footer остаются.
   ============================================================ */
body.page-template-template-home .cr-footer{display:none}

/* ---- Слайдер на телефоне (правка 17.08): хореография та же, тяжёлые слои
   заменены. Вместо матовой стены с backdrop-filter — вертикальная вуаль на
   всю ширину: тьма сверху и снизу, кадр дышит в середине. ---- */
@media (max-width:879px){
	/* Вуаль по рецепту заглушки: мягкая (.43 у неё), плотнее к низу — там текст */
	.cr-scenes.is-slider .cr-scenes__vp::after{
		width:100%;
		-webkit-backdrop-filter:none;backdrop-filter:none;
		background:linear-gradient(180deg,
			rgba(22,18,14,.42) 0%,rgba(22,18,14,.2) 30%,
			rgba(22,18,14,.26) 55%,rgba(22,18,14,.62) 80%,rgba(22,18,14,.86) 100%);
		-webkit-mask-image:none;mask-image:none;
	}
	/* кадр на телефоне у заглушки размыт слабо — 3px, а не 10px */
	.cr-scenes .cr-scene--s0 .cr-scene__video,
	.cr-scenes.is-slider .cr-scene--s0 .cr-scene__video{--cz-hero-blur:3px}
	.cr-scenes.is-press .cr-scene--s0 .cr-scene__video{--cz-hero-blur:1.5px}

	/* Текст — внизу слева, как в мобильной заглушке (не по центру экрана) */
	.cr-scenes.is-slider .cr-stext:not(.cr-stext--5){
		top:auto;bottom:clamp(64px,12vh,120px);transform:none;
		max-width:calc(100vw - var(--cr-gutter) * 2);
	}
	.cr-scenes.is-slider .cr-stext--5{max-width:calc(100vw - var(--cr-gutter) * 2)}
	/* колонка цифр 01–05 на телефоне не нужна — мешает и мельчит */
	.cr-scenes.is-slider .cr-snav{display:none}
	/* подпись кадра на телефоне не нужна — она перекрывает действия */
	.cr-scenes.is-slider .cr-cap{display:none}
}