/* «Дорога к заливу» — версия 05. Токены: notes/BRIEF.md */

:root {
	/* время суток: грунты */
	--g-morning: #E5EAE2;
	--g-day: #E5EAE2;
	--g-noon: #D8DCC9;
	--g-dusk: #2A2E25;
	--g-ember: #17130F;
	--g-bluehour: #0B1422;
	--g-night: #0E1512;
	--g-deep: #0A0F0D;

	/* чернила */
	--ink-day: #15211B;
	--ink-day-soft: #46544B;
	--ink-night: #ECE7DC;
	--ink-night-soft: #A9B1A6;
	--ink-sky: #0B1422;

	/* акцент: янтарь фонарей, один тон, две светлоты */
	--amber: #E3A04A;
	--amber-ink: #1A1209;
	--amber-deep: #8A4B12;

	--line-day: rgba(21, 33, 27, .18);
	--line-night: rgba(236, 231, 220, .2);

	/* шрифты */
	--f-display: "Old Standard TT", "Times New Roman", Georgia, serif;
	--f-text: "PT Sans", "Segoe UI", Roboto, Arial, sans-serif;
	--f-label: "PT Sans Narrow", "Arial Narrow", "PT Sans", sans-serif;

	/* шкала 4px */
	--s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
	--s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px; --s11: 160px;
	--gutter: clamp(16px, 4vw, 64px);
	--section: clamp(72px, 11vw, 168px);
	--measure: 60ch;

	/* типографика */
	--t-xs: 13px;
	--t-sm: 15px;
	--t-base: 17px;
	--t-lg: clamp(18px, 1.35vw, 21px);
	--t-h3: clamp(21px, 1.7vw, 26px);
	--t-h2: clamp(34px, 4.2vw, 64px);
	--t-h1: clamp(42px, 6.4vw, 104px);
	--t-peak: clamp(44px, 6.6vw, 108px);

	--r: 2px;
	--ease-out: cubic-bezier(.23, 1, .32, 1);
	--ease-io: cubic-bezier(.77, 0, .175, 1);
	--d-press: 160ms;
	--d-ui: 240ms;
	--d-reveal: 700ms;
	--shadow-inset: 0 18px 40px -12px rgba(10, 15, 13, .45);

	--top-h: 92px;
	--bar-h: 0px; /* полоса модуля бронирования под шапкой (компьютер) */
	--head-h: calc(var(--top-h) + var(--bar-h));
	--rail-pad: var(--gutter);
}
@media (min-width: 1100px) { :root { --rail-pad: calc(var(--gutter) + 124px); } }

*, *::before, *::after { box-sizing: border-box; }
html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
	scroll-behavior: smooth;
	background: var(--g-deep);
}
html.motion { scroll-behavior: auto; } /* см. main.js: плавность мешает ScrollTrigger.refresh */
body {
	margin: 0;
	background: var(--g-morning);
	color: var(--ink-day);
	font: 400 var(--t-base)/1.6 var(--f-text);
	font-kerning: normal;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; }
b { font-weight: 700; }

.skip {
	position: absolute; left: var(--s4); top: -60px; z-index: 100;
	background: var(--amber); color: var(--amber-ink); padding: var(--s2) var(--s4);
	border-radius: var(--r); text-decoration: none;
}
.skip:focus { top: var(--s4); }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
[data-tone="light"] :focus-visible { outline-color: var(--ink-day); }

.wrap { padding-inline: var(--gutter); max-width: 1520px; margin-inline: auto; }

.kicker {
	font: 700 var(--t-xs)/1.3 var(--f-label);
	letter-spacing: .12em; text-transform: uppercase;
}
.h2 {
	font: 400 var(--t-h2)/1.04 var(--f-display);
	letter-spacing: -.015em;
	text-wrap: balance;
	hyphens: none;
}
.lede { font-size: var(--t-lg); line-height: 1.55; max-width: 44ch; text-wrap: pretty; }
p { text-wrap: pretty; }

/* ---------- кнопки и ссылки ---------- */
.btn {
	--btn-bg: var(--amber); --btn-ink: var(--amber-ink); --btn-line: var(--amber);
	display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
	min-height: 48px; padding: 0 var(--s5);
	font: 700 var(--t-sm)/1 var(--f-text); letter-spacing: .01em;
	text-decoration: none; white-space: nowrap;
	background: var(--btn-bg); color: var(--btn-ink);
	border: 1px solid var(--btn-line); border-radius: var(--r);
	transition: transform var(--d-press) var(--ease-out), background-color var(--d-ui) var(--ease-out), color var(--d-ui) var(--ease-out), border-color var(--d-ui) var(--ease-out);
	touch-action: manipulation; user-select: none; -webkit-user-select: none;
}
.btn:active { transform: scale(.97); }
.btn--ghost { --btn-bg: transparent; --btn-ink: currentColor; --btn-line: currentColor; color: inherit; }
.btn--sm { min-height: 40px; padding: 0 var(--s4); font-size: 14px; }
.btn--lg { min-height: 56px; padding: 0 var(--s6); font-size: var(--t-base); }
[data-tone="light"] .btn--primary { --btn-bg: var(--ink-day); --btn-ink: var(--g-day); --btn-line: var(--ink-day); }

.link {
	display: inline-block; font-weight: 700; text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
	padding-bottom: 3px; touch-action: manipulation;
}
[data-tone="light"] .link { color: var(--amber-deep); }
[data-tone="dark"] .link { color: var(--amber); }

@media (hover: hover) and (pointer: fine) {
	.btn--primary:hover { --btn-bg: #F0B562; --btn-line: #F0B562; }
	[data-tone="light"] .btn--primary:hover { --btn-bg: #24342B; --btn-line: #24342B; }
	.btn--ghost:hover { --btn-bg: rgba(236, 231, 220, .12); }
	[data-tone="light"] .btn--ghost:hover { --btn-bg: rgba(21, 33, 27, .06); }
	.link { transition: background-size var(--d-ui) var(--ease-out); }
	.link:hover { background-size: 40% 1px; }
}

/* ---------- шапка ---------- */
.top {
	position: fixed; z-index: 50; inset: 0 0 auto 0;
	height: var(--top-h);
	padding: env(safe-area-inset-top, 0) var(--gutter) 0;
	display: flex; align-items: center; gap: var(--s5);
	color: var(--ink-night);
	transition: color var(--d-ui) var(--ease-out), background-color var(--d-ui) var(--ease-out);
}
.top::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(rgba(10, 15, 13, .55), rgba(10, 15, 13, 0));
	transition: opacity var(--d-ui) var(--ease-out);
}
.top[data-tone="light"] { color: var(--ink-day); }
.top[data-tone="light"]::before { background: linear-gradient(rgba(229, 234, 226, .92), rgba(229, 234, 226, 0)); }
.top[data-tone="dark"]::before { background: linear-gradient(rgba(10, 15, 13, .8), rgba(10, 15, 13, 0)); }
.top__mark { display: block; line-height: 0; text-decoration: none; }
/* настоящий логотип: белый над фото и на тёмном, тёмный на светлых разделах */
.logo img { display: block; width: auto; height: 72px; }
.logo--dark { display: none; }
.top[data-tone="light"] .top__mark .logo--white { display: none; }
.top[data-tone="light"] .top__mark .logo--dark { display: block; }
.foot__mark { display: inline-block; line-height: 0; }
.foot__mark .logo img { height: 125px; }
@media (max-width: 899px) { .logo img { height: 52px; } .foot__mark .logo img { height: 100px; } }
.top__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s5); }
.top__social { display: flex; align-items: center; gap: 2px; }
.top__social a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; touch-action: manipulation; transition: background-color var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out); }
.top__social a:active { transform: scale(.94); }
.top__social svg { width: 20px; height: 20px; }
.top__social a[aria-label="ВКонтакте"] svg { width: 26px; height: 26px; } /* у знака VK поля в рисунке шире */
.top__social--menu { margin-top: var(--s4); margin-left: -10px; }
.top__social--menu a { width: 44px; height: 44px; }
@media (hover: hover) and (pointer: fine) { .top__social a:hover { background-color: rgba(255, 255, 255, .12); } }
@media (max-width: 1199px) { .top__social--bar { display: none; } }
@media (min-width: 1200px) { .top__social--menu { display: none; } }
.top__phone { font-weight: 700; font-size: var(--t-sm); text-decoration: none; white-space: nowrap; padding-block: 12px; touch-action: manipulation; }
.top[data-tone="light"] .btn--primary { --btn-bg: var(--ink-day); --btn-ink: var(--g-day); --btn-line: var(--ink-day); }

/* ---------- маршрут ---------- */
.route { display: none; }
@media (min-width: 1100px) {
	.route {
		display: block; position: fixed; z-index: 40;
		right: var(--s6); top: 50%; transform: translateY(-50%);
		color: var(--ink-night);
		transition: color var(--d-ui) var(--ease-out);
	}
	.route[data-tone="light"] { color: var(--ink-day); }
	.route[data-tone="photo"] { text-shadow: 0 1px 8px rgba(0, 0, 0, .45); }
	.route__list {
		position: relative; display: grid; gap: var(--s4);
		padding-right: var(--s5);
		border-right: 1px solid currentColor;
		border-image: linear-gradient(transparent, currentColor 12%, currentColor 88%, transparent) 1;
	}
	.route__list a {
		display: block; text-align: right; text-decoration: none;
		font: 700 12px/1 var(--f-label); letter-spacing: .14em; text-transform: uppercase;
		opacity: .55; padding: var(--s1) 0;
		transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out);
	}
	.route__list a[aria-current="step"] { opacity: 1; transform: translateX(-4px); }
	.route__dot {
		position: absolute; right: -4px; top: 0;
		width: 9px; height: 9px; border-radius: 50%;
		background: var(--amber);
		box-shadow: 0 0 0 3px rgba(10, 15, 13, .35);
		transform: translateY(var(--dot-y, 0px));
		transition: transform 420ms var(--ease-out);
	}
}
@media (hover: hover) and (pointer: fine) {
	.route__list a:hover { opacity: 1; }
}

/* ---------- грунты и дрейф времени суток ---------- */
.ground { position: relative; }
.ground--day { background: var(--g-day); color: var(--ink-day); }
.ground--noon {
	background: linear-gradient(var(--g-day), var(--g-noon) 22%);
	color: var(--ink-day);
}
.ground--ember {
	background: linear-gradient(var(--g-night), var(--g-ember) 30%);
	color: var(--ink-night);
}
.ground--night {
	background: linear-gradient(var(--g-bluehour), var(--g-night) 26%);
	color: var(--ink-night);
}
.ground--deep { background: linear-gradient(var(--g-night), var(--g-deep)); color: var(--ink-night); }

/* =========================================================
   ВЪЕЗД — по умолчанию (телефон, без JS, reduced motion)
   ========================================================= */
.entry { position: relative; background: var(--g-morning); color: var(--ink-night); }
.entry__stage { position: relative; padding-top: 100svh; }
.plate { position: absolute; inset: 0 0 auto 0; height: 100svh; overflow: hidden; }
.plate__photo { width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; }
.plate__sign, .plate__window, .plate__shade { display: none; }
/* тот же клуб ночью поверх дневного кадра; без сцены прокрутки проявляется сам, один раз (класс .dusk ставит main.js) */
.plate__night { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 0% 50%; opacity: 0; }
@keyframes plate-dusk { to { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
	.dusk .plate__night { animation: plate-dusk 2400ms cubic-bezier(.45, 0, .55, 1) forwards; }
}
.entry__haze, .entry__scrim { position: absolute; inset: 0 0 auto 0; height: 100svh; pointer-events: none; }
.entry__haze {
	background: linear-gradient(180deg, rgba(12, 20, 15, .62) 0%, rgba(12, 20, 15, .3) 26%, rgba(12, 20, 15, 0) 44%);
}
.entry__scrim {
	background:
		radial-gradient(120% 90% at 0% 100%, rgba(12, 18, 14, .82) 0%, rgba(12, 18, 14, .55) 34%, rgba(12, 18, 14, 0) 64%),
		linear-gradient(rgba(12, 18, 14, .35), rgba(12, 18, 14, 0) 22%);
}
.entry__copy {
	position: absolute; left: 0; top: 0; height: 100svh; width: 100%;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: var(--head-h) var(--gutter) clamp(40px, 8vh, 96px);
	max-width: 980px;
}
.entry__copy .kicker { opacity: .85; margin-bottom: var(--s4); }
.entry__title {
	font: 400 var(--t-h1)/.98 var(--f-display);
	letter-spacing: -.02em; text-wrap: balance; max-width: 13ch;
}
.entry__lead { margin-top: var(--s5); font-size: var(--t-lg); max-width: 40ch; line-height: 1.55; }
.entry__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }

.lane { position: relative; background: var(--g-morning); color: var(--ink-day); }
.lane__scrim { display: none; }
.lane__copy { padding: var(--s8) var(--gutter) var(--s4); max-width: 1520px; margin-inline: auto; }
.lane__title { font: 400 var(--t-h2)/1.06 var(--f-display); letter-spacing: -.015em; text-wrap: balance; max-width: 20ch; }
.signposts { display: grid; gap: var(--s5); margin-top: var(--s7); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.signposts li { border-top: 1px solid var(--line-day); padding-top: var(--s4); }
.signposts b { display: block; font: 400 clamp(40px, 4.6vw, 72px)/1 var(--f-display); letter-spacing: -.02em; }
.signposts span { display: block; margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-day-soft); max-width: 22ch; }

/* =========================================================
   ДОМА
   ========================================================= */
.houses { padding-block: var(--section) var(--section); }
.houses__head { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 900px) { .houses__head { grid-template-columns: 7fr 5fr; } }
.houses__head .lede { color: var(--ink-day-soft); }
.houses__body { margin-top: var(--s8); }
.house-list { display: grid; gap: var(--s7); }
.house__link { display: grid; gap: var(--s1); text-decoration: none; padding-block: var(--s4); border-top: 1px solid var(--line-day); touch-action: manipulation; }
.house__name { font: 400 clamp(30px, 3.4vw, 52px)/1.05 var(--f-display); letter-spacing: -.015em; }
.house__spec { font: 700 var(--t-xs)/1.4 var(--f-label); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-day-soft); }
.house__note { margin-top: var(--s2); max-width: 40ch; }
.house__price { margin-top: var(--s2); font-weight: 700; color: var(--amber-deep); }
.house__pics { position: relative; margin-top: var(--s4); padding-bottom: 18%; }
.house__pics img:first-child { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.house__pics img:last-child {
	position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 4 / 3; object-fit: cover;
	box-shadow: var(--shadow-inset); outline: 6px solid var(--g-day);
}
.house-frame { display: none; }
@media (min-width: 900px) {
	.house { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--s8); align-items: start; }
	.house__pics { margin-top: var(--s4); padding-bottom: 10%; }
	.house__pics img:first-child { width: 86%; aspect-ratio: 16 / 10; }
	.house__pics img:last-child { width: 36%; }
}
.houses__foot { margin-top: var(--s8); display: grid; gap: var(--s3); max-width: calc(var(--measure) + 2 * var(--gutter)); margin-inline: 0; }
.houses__foot p { color: var(--ink-day-soft); }
.houses__small { font-size: var(--t-sm); }
.houses__foot .link { justify-self: start; margin-top: var(--s2); }

/* =========================================================
   ДЕНЬ
   ========================================================= */
.day { padding-block: var(--section) calc(var(--section) * .8); }
.day__head { display: grid; gap: var(--s5); align-items: end; }
@media (min-width: 900px) { .day__head { grid-template-columns: 6fr 6fr; } }
.day__head .lede { color: var(--ink-day-soft); }
.walk {
	margin-top: var(--s7);
	overflow-x: auto; overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
}
.walk::-webkit-scrollbar { display: none; }
.walk:focus-visible { outline-offset: -3px; }
main > section[tabindex="-1"]:focus { outline: none; } /* фокус после перехода по маршруту, см. main.js */
.walk__track { display: flex; align-items: flex-start; gap: clamp(16px, 2.4vw, 40px); padding-inline: var(--gutter); width: max-content; }
.spot { width: clamp(240px, 27vw, 420px); scroll-snap-align: start; }
.spot img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spot--wide { width: clamp(280px, 38vw, 600px); }
.spot--wide img { aspect-ratio: 16 / 10; }
.spot--tall { width: clamp(220px, 22vw, 340px); margin-top: clamp(24px, 6vh, 72px); }
.spot--tall img { aspect-ratio: 3 / 4; }
.spot h3 { margin-top: var(--s4); font: 400 var(--t-h3)/1.15 var(--f-display); }
.spot p { margin-top: var(--s1); font-size: var(--t-sm); color: var(--ink-day-soft); max-width: 32ch; }
.spot--note { width: clamp(220px, 20vw, 300px); align-self: center; }
.spot--note p { font: 400 var(--t-h3)/1.3 var(--f-display); color: var(--ink-day); }

/* =========================================================
   БАНЯ И ЧАН
   ========================================================= */
.bath { background: linear-gradient(var(--g-noon), var(--g-dusk) 14%, var(--g-night) 40%); color: var(--ink-night); padding-block: var(--section); }
.bath__media { display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory; padding-inline: var(--gutter); scrollbar-width: none; }
.bath__media::-webkit-scrollbar { display: none; }
.bath__img { width: min(82vw, 720px); flex: none; aspect-ratio: 3 / 2; object-fit: cover; scroll-snap-align: center; }
.bath__copy { padding: var(--s7) var(--gutter) 0; display: grid; gap: var(--s6); max-width: 1520px; margin-inline: auto; }
.bath__title { margin-bottom: var(--s2); }
.bath__beat h3 { font: 400 var(--t-h3)/1.2 var(--f-display); }
.bath__beat p { margin-top: var(--s2); color: var(--ink-night-soft); max-width: 42ch; }
@media (min-width: 900px) {
	.bath__media { display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; }
	.bath__img { width: 100%; }
	.bath__copy { grid-template-columns: repeat(3, 1fr); align-items: start; }
	.bath__title { grid-column: 1 / -1; }
}

/* =========================================================
   УЖИН
   ========================================================= */
.dinner { padding-block: var(--section); }
.dinner__grid { display: grid; gap: var(--s6); }
.dinner figure { position: relative; overflow: hidden; }
.dinner__main img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dinner__copy p { margin-top: var(--s4); color: var(--ink-night-soft); max-width: 46ch; }
.dinner__copy .link { margin-top: var(--s5); }
.dinner__food img, .dinner__fish img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dinner__fish { display: none; }
@media (min-width: 900px) {
	.dinner__grid { grid-template-columns: repeat(12, 1fr); grid-template-rows: auto auto; column-gap: var(--s6); row-gap: 0; align-items: start; }
	.dinner__main { grid-column: 1 / 8; grid-row: 1 / 3; }
	.dinner__copy { grid-column: 9 / 13; grid-row: 1; padding-top: var(--s8); }
	.dinner__food { grid-column: 6 / 10; grid-row: 2; margin-top: calc(-1 * var(--s9)); z-index: 2; box-shadow: var(--shadow-inset); outline: 8px solid var(--g-ember); }
	.dinner__fish { display: block; grid-column: 10 / 13; grid-row: 2; margin-top: var(--s7); }
}
.reveal__curtain { display: none; }

/* =========================================================
   БЕРЕГ (пик)
   ========================================================= */
.shore { position: relative; background: var(--g-bluehour); color: var(--ink-night); }
.shore__forest { position: relative; height: 70svh; overflow: hidden; }
.shore__forest img { width: 100%; height: 100%; object-fit: cover; }
.shore__whisper {
	position: absolute; left: var(--gutter); bottom: var(--s7);
	font: 400 italic var(--t-h3)/1.3 var(--f-display); max-width: 22ch;
	color: var(--ink-night);
}
.shore__forest::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; background: linear-gradient(rgba(5, 10, 9, 0), rgba(5, 10, 9, .7)); pointer-events: none; }
.shore__whisper { z-index: 1; }
.shore__slit { position: relative; height: 100svh; overflow: hidden; }
.shore__open, .shore__open img { width: 100%; height: 100%; }
.shore__open img { object-fit: cover; object-position: 50% 60%; }
.shore__copy {
	position: absolute; left: 0; right: 0; top: calc(70svh + var(--s9));
	padding: 0 var(--gutter); color: var(--ink-sky);
}
.shore__title { font: 400 var(--t-peak)/.98 var(--f-display); letter-spacing: -.025em; max-width: 15ch; text-wrap: balance; }
.shore__lead { margin-top: var(--s4); font-size: var(--t-lg); max-width: 38ch; font-weight: 700; }

/* =========================================================
   ДАТЫ
   ========================================================= */
.book { padding-block: var(--section); }
.book__grid { display: grid; gap: var(--s8); }
.book__title { font: 400 var(--t-h2)/1.02 var(--f-display); letter-spacing: -.015em; max-width: 14ch; text-wrap: balance; }
.book__copy .lede { margin-top: var(--s5); color: var(--ink-night-soft); }
.book__cta { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.rating { display: inline-flex; align-items: center; gap: var(--s4); margin-top: var(--s7); text-decoration: none; }
.rating b { font: 400 56px/1 var(--f-display); color: var(--amber); }
.rating span { font-size: var(--t-sm); color: var(--ink-night-soft); line-height: 1.4; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s5) var(--s6); align-content: start; }
.facts div { border-top: 1px solid var(--line-night); padding-top: var(--s3); }
.facts dt { font: 700 var(--t-xs)/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-night-soft); }
.facts dd { margin-top: var(--s1); font-size: var(--t-base); }
.facts a { text-decoration: none; border-bottom: 1px solid var(--line-night); }
.book__photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@media (min-width: 900px) {
	.book__grid { grid-template-columns: 7fr 5fr; column-gap: var(--s9); }
	.book__photo { grid-column: 1 / -1; }
}
@media (min-width: 1200px) {
	.book__grid { grid-template-columns: 6fr 3fr 3fr; }
	.book__photo { grid-column: 2 / 4; grid-row: 1; }
	.facts { grid-column: 1; grid-template-columns: repeat(3, 1fr); }
	.book__photo img { aspect-ratio: 4 / 5; }
}

/* =========================================================
   ДОРОГА И ПОДВАЛ
   ========================================================= */
.road { padding-block: var(--section) var(--s9); }
.road__grid { display: grid; gap: var(--s7); align-items: center; }
@media (min-width: 900px) { .road__grid { grid-template-columns: 5fr 7fr; } }
.road__copy p { margin-top: var(--s4); color: var(--ink-night-soft); max-width: 40ch; }
.road__coords { font: 700 var(--t-sm)/1.4 var(--f-label); letter-spacing: .08em; }
.road__cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s5); margin-top: var(--s6); }
.road__map svg { width: 100%; height: auto; overflow: visible; }
.road__coast path { fill: none; stroke: var(--ink-night-soft); stroke-width: 1.4; stroke-linejoin: round; opacity: .55; }
.road__town { fill: var(--ink-night-soft); font: 400 14px var(--f-label); letter-spacing: .04em; }
.road__water { fill: var(--ink-night-soft); font: italic 400 22px var(--f-display); opacity: .8; }
.road__north path { fill: var(--ink-night-soft); }
.road__north text { fill: var(--ink-night-soft); font: 700 13px var(--f-label); }
.road__map figcaption a { color: inherit; }
.road__line { fill: none; stroke: var(--amber); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.road__pt { fill: var(--g-night); stroke: var(--ink-night); stroke-width: 2; }
.road__pt--end { fill: var(--amber); stroke: var(--amber); }
.road__lbl { fill: var(--ink-night); font: 700 15px var(--f-label); letter-spacing: .1em; text-transform: uppercase; }
.road__lbl--soft { fill: var(--ink-night-soft); font-weight: 400; }
/* подписи в единицах viewBox (1000): карта сжимается вместе с ними, поэтому шрифт крупный */
.road__lbl, .road__town, .road__water { paint-order: stroke; stroke: var(--g-night); stroke-width: 6px; stroke-linejoin: round; }
.road__lbl { font-size: 24px; }
.road__lbl--here { fill: var(--amber); font-size: 28px; }
.road__town { font-size: 20px; }
.road__water { font-size: 30px; }
.road__north text { font-size: 18px; }
@media (max-width: 899px) {
	.road__lbl { font-size: 34px; stroke-width: 8px; }
	.road__lbl--here { font-size: 38px; }
	.road__town { font-size: 28px; }
	.road__water { font-size: 38px; }
	.road__north text { font-size: 26px; }
}
.road__map figcaption { margin-top: var(--s3); font-size: var(--t-xs); color: var(--ink-night-soft); }

.foot { padding-block: var(--s8) calc(var(--s8) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line-night); }
.foot__grid { display: grid; gap: var(--s6); }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 5fr 3fr 4fr; } }
.foot__mark { font: 400 40px/1 var(--f-display); }
.foot__slogan { margin-top: var(--s2); font: 400 italic var(--t-lg)/1.3 var(--f-display); color: var(--ink-night-soft); }
.foot__contacts, .foot__legal { display: grid; gap: var(--s2); font-size: var(--t-sm); }
.foot__legal { color: var(--ink-night-soft); }
.foot a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
	.foot a:hover, .facts a:hover { color: var(--amber); }
	.top__phone:hover { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
}

/* ---------- шапка телефона ---------- */
@media (max-width: 899px) {
	/* вверху страницы — номер, модуль ушёл за край — вместо номера кнопка брони */
	.book-away .top__phone { display: none; }
}

/* =========================================================
   ТЕЛЕФОН: своя композиция
   ========================================================= */
@media (max-width: 899px) {
	:root { --top-h: 72px; --t-base: 16px; }
	.entry { background: var(--g-morning); }
	.entry__stage { padding-top: 0; }
	.plate {
		position: relative; height: 118vw; inset: auto;
		background: #3a4a3a;
	}
	.plate__photo {
		position: absolute; max-width: none;
		width: 240vw; height: 134.8vw;
		left: -70vw; top: -6vw;
	}
	.plate::before {
		content: ""; position: absolute; inset: 0 0 auto 0; height: 46%; z-index: 1;
		background: linear-gradient(rgba(12, 20, 15, .66), rgba(12, 20, 15, 0));
	}
	.plate::after {
		content: ""; position: absolute; inset: auto 0 0 0; height: 30%;
		background: linear-gradient(rgba(229, 234, 226, 0), var(--g-morning));
	}
	.entry__haze, .entry__scrim { display: none; }
	.top[data-tone="photo"]::before { background: linear-gradient(rgba(10, 15, 13, .6), rgba(10, 15, 13, 0)); }
	.entry__copy {
		position: relative; height: auto; color: var(--ink-day);
		padding: 0 var(--gutter) var(--s7); margin-top: calc(-1 * var(--s5));
	}
	.entry__copy .kicker { color: var(--ink-day-soft); opacity: 1; }
	.entry__title { font-size: clamp(38px, 11vw, 52px); max-width: 12ch; }
	.entry__lead { font-size: 17px; color: var(--ink-day-soft); }
	.entry__copy .btn--primary { --btn-bg: var(--ink-day); --btn-ink: var(--g-day); --btn-line: var(--ink-day); }
	.entry__copy .btn--ghost { color: var(--ink-day); }
	.entry__cta .btn { flex: 1 1 auto; }
	.lane__copy { padding-top: var(--s7); }
	.lane__title { font-size: clamp(30px, 8.4vw, 40px); }
	.signposts { grid-template-columns: 1fr 1fr; gap: var(--s4); }
	.signposts li:last-child { grid-column: 1 / -1; }

	.house-list {
		display: flex; gap: var(--s4); overflow-x: auto; scroll-snap-type: x mandatory;
		margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
		scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain;
	}
	.house-list::-webkit-scrollbar { display: none; }
	.house { flex: none; width: 84vw; scroll-snap-align: start; display: flex; flex-direction: column-reverse; justify-content: flex-end; }
	.house__pics { margin-top: 0; margin-bottom: var(--s3); }
	.house__link { border-top: 0; padding-top: 0; }
	.house__name { font-size: 30px; }

	.walk { margin-inline: 0; }
	.spot { width: 74vw; }
	.spot--wide { width: 84vw; }
	.spot--tall { width: 62vw; margin-top: 0; }
	.spot--note { width: 62vw; }

	.shore__forest { height: 56svh; }
	.shore__slit { height: 92svh; }
	.shore__open img { object-position: 38% 50%; }
	.shore__copy { top: calc(56svh + var(--s8)); }
	.shore__title { font-size: clamp(40px, 12vw, 56px); }
	.shore__lead { font-size: 16px; max-width: 30ch; }

	.dinner__copy { order: -1; }
}

/* =========================================================
   ШИРОКИЙ ЭКРАН С ДВИЖЕНИЕМ (html.motion ставит JS)
   ========================================================= */
@media (min-width: 900px) {
	/* въезд: одна закреплённая сцена */
	.motion .entry__stage { padding-top: 0; height: 100vh; overflow: hidden; container-type: size; }
	.motion .plate {
		inset: auto; left: 50%; top: 50%;
		width: max(112cqw, 178.01cqh); height: max(100cqh, 62.917cqw);
		translate: calc(-50% + 6cqw) -50%;
	}
	.motion .plate__photo, .motion .plate__night { object-fit: fill; transform-origin: 57.1% 36.8%; }
	.motion .plate__sign, .motion .plate__window, .motion .plate__shade { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
	.motion .plate__sign { transform-origin: 57.1% 36.8%; }
	.motion .plate__shade { background: #0B120E; opacity: 0; }
	.motion .plate__window {
		/* буквы «МЫЗДЕСЬ» — окна в ночной кадр */
		-webkit-clip-path: url(#mz-letters); clip-path: url(#mz-letters);
		transform-origin: 57.1% 36.8%; opacity: 0;
	}
	.motion .plate__window img { width: 100%; height: 100%; transform-origin: 57.1% 36.8%; }
	.motion .entry__haze, .motion .entry__scrim, .motion .entry__copy { height: 100%; }
	.motion .entry__scrim {
		background:
			linear-gradient(90deg, rgba(12, 18, 14, .86) 0%, rgba(12, 18, 14, .62) 26%, rgba(12, 18, 14, 0) 46%),
			linear-gradient(rgba(12, 18, 14, .35), rgba(12, 18, 14, 0) 22%);
	}
	.motion .lane { position: absolute; inset: 0; background: none; color: var(--ink-night); pointer-events: none; }
	/* затемнение справа под текст про дорожки, поверх ночного кадра */
	.motion .lane__scrim {
		display: block; position: absolute; inset: 0; opacity: 0;
		background: linear-gradient(270deg, rgba(8, 12, 9, .82) 0%, rgba(8, 12, 9, .55) 34%, rgba(8, 12, 9, 0) 62%);
	}
	.motion .lane__copy {
		position: absolute; right: 0; top: 0; bottom: 0; width: min(46%, 640px); margin: 0;
		display: flex; flex-direction: column; justify-content: center;
		padding: var(--head-h) var(--rail-pad) var(--s8) var(--gutter);
		pointer-events: auto;
	}
	.motion .lane__title { font-size: clamp(34px, 3.4vw, 54px); opacity: 0; }
	.motion .signposts { grid-template-columns: 1fr; gap: var(--s4); margin-top: var(--s6); }
	.motion .signposts li { border-top-color: var(--line-night); opacity: 0; }
	.motion .signposts span { color: var(--ink-night-soft); }
	.motion .signposts b { font-size: clamp(36px, 3.4vw, 56px); }

	/* дома: кадр рядом со списком */
	.motion .houses__body { display: grid; grid-template-columns: 5fr 7fr; column-gap: var(--s9); align-items: start; }
	.motion .house-list { gap: 0; padding-block: 8vh 24vh; }
	.motion .house { min-height: 30vh; display: flex; align-items: center; }
	.motion .house__link { width: 100%; padding-block: var(--s5); opacity: .42; transition: opacity var(--d-ui) var(--ease-out); }
	.motion .house.is-active .house__link { opacity: 1; }
	.motion .house__pics { display: none; }
	.motion .house-frame {
		/* высота — от свободной под шапкой и полосой части окна, иначе рамка уходит за низ */
		display: block; position: sticky; top: calc(var(--head-h) + 4vh); height: calc(100vh - var(--head-h) - 10vh);
	}
	.motion .house-frame__out { position: absolute; inset: 0 0 14% 8%; overflow: hidden; }
	.motion .house-frame__in { position: absolute; left: 0; bottom: 0; width: 42%; aspect-ratio: 4 / 3; box-shadow: var(--shadow-inset); outline: 8px solid var(--g-day); overflow: hidden; }
	.motion .house-frame img {
		position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
		opacity: 0; transform: scale(1.04);
		transition: opacity 520ms var(--ease-out), transform 900ms var(--ease-out);
	}
	.motion .house-frame img.on { opacity: 1; transform: scale(1); }

	/* день: горизонтальная прогулка */
	.motion .day { padding-block: 0; }
	.motion .day__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: var(--head-h); overflow: hidden; }
	.motion .walk { overflow: visible; scroll-snap-type: none; margin-top: var(--s7); }
	.motion .walk__track { padding-right: 24vw; }
	/* фото ленты — от высоты под шапкой и полосой: заголовок дня не уезжает под них */
	.motion .spot img { max-height: calc((100vh - var(--head-h)) * .5); }
	.motion .spot--tall img { max-height: calc((100vh - var(--head-h)) * .55); }

	/* баня: таймлапс в закреплённой сцене */
	.motion .bath { padding: 0; background: var(--g-noon); }
	.motion .bath__stage { position: relative; height: 100vh; display: grid; grid-template-columns: 7fr 5fr; }
	.motion .bath__media { display: block; position: relative; overflow: hidden; padding: 0; height: 100%; }
	.motion .bath__img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
	.motion .bath__img:not(:first-child) { opacity: 0; }
	.motion .bath__copy { position: relative; display: block; padding: 0 var(--rail-pad) 0 var(--s8); max-width: none; margin: 0; }
	.motion .bath__title { position: absolute; top: calc(var(--head-h) + 10vh); left: var(--s8); right: var(--rail-pad); color: var(--ink-day); }
	.motion .bath__beat { position: absolute; left: var(--s8); right: var(--rail-pad); top: 50vh; opacity: 0; }
	.motion .bath__beat:first-of-type { opacity: 1; color: var(--ink-day); }
	.motion .bath__beat:first-of-type p { color: var(--ink-day-soft); }

	/* ужин: шторки */
	.motion .reveal__curtain { display: block; position: absolute; inset: 0; background: var(--g-ember); transform-origin: 50% 0; transform: scaleY(1); transition: transform 900ms var(--ease-io); }
	.motion .reveal.in .reveal__curtain { transform: scaleY(0); }
	.motion .reveal img { transform: scale(1.08); transition: transform 1400ms var(--ease-out); }
	.motion .reveal.in img { transform: scale(1); }

	/* берег: щель между соснами раскрывается в залив */
	.motion .shore__stage { position: relative; height: 100vh; overflow: hidden; }
	.motion .shore__forest { position: absolute; inset: 0; height: auto; }
	.motion .shore__forest img { transform-origin: 50% 70%; }
	.motion .shore__slit { position: absolute; inset: 0; height: auto; transform: scaleX(.012); }
	.motion .shore__open { transform-origin: 50% 50%; }
	.motion .shore__copy { top: calc(var(--head-h) + 3vh); bottom: auto; padding-right: var(--rail-pad); }
	.motion .shore__title, .motion .shore__lead { opacity: 0; }
}

@media (min-width: 900px) {
	/* слои, которые скраб двигает каждый кадр: заранее отдельные слои, без перерисовки маски */
	.motion .plate__photo, .motion .plate__night, .motion .plate__sign, .motion .plate__window, .motion .plate__window img,
	.motion .shore__slit, .motion .shore__open, .motion .shore__forest img,
	.motion .walk__track { will-change: transform; }
}

@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
	.house__link:hover .house__name { color: var(--amber-deep); }
	.spot img { transition: transform var(--d-ui) var(--ease-out); }
	.walk:not(.is-pinned) .spot:hover img { transform: scale(1.02); }
}

/* мобильные появления */
.lite .fade { opacity: 0; transform: translateY(16px); transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
.lite .fade.in { opacity: 1; transform: none; }

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

@media (min-width: 900px) {
	.entry__copy { max-width: min(38vw, 560px); }
	.entry__title { font-size: clamp(44px, 5vw, 84px); }
	.entry__lead { font-size: var(--t-base); }
	.entry__scrim {
		background:
			linear-gradient(90deg, rgba(12, 18, 14, .86) 0%, rgba(12, 18, 14, .62) 26%, rgba(12, 18, 14, 0) 46%),
			linear-gradient(rgba(12, 18, 14, .35), rgba(12, 18, 14, 0) 22%);
	}
}

/* место под схему маршрута справа */
@media (min-width: 1100px) {
	.wrap { padding-right: calc(var(--gutter) + 112px); }
	.motion .walk__track { padding-left: var(--gutter); }
}

/* =========================================================
   ШИРОКИЕ МОНИТОРЫ (> 1600 px): всё по рамке --frame.
   Фото и сцены — кадр шириной рамки по центру, вокруг фон страницы.
   До 1600 px ничего из этого не действует.
   ========================================================= */
:root { --frame: 1600px; }
@media (min-width: 1601px) {
	:root {
		/* высота сцены-кадра: не выше окна и не гигантская на 4K */
		--scene-h: min(100vh, 1000px);
		--scene-gap: calc((100vh - var(--scene-h)) / 2);
	}
	.wrap { max-width: var(--frame); }
	.houses__foot { margin-left: max(0px, calc((100% - var(--frame)) / 2)); }

	/* шапка: фон во всю ширину, лого и кнопки у краёв рамки */
	.top { padding-inline: max(var(--gutter), calc((100% - var(--frame)) / 2 + var(--gutter))); }
	/* маршрут у правого края рамки */
	.route { right: max(var(--s6), calc((100% - var(--frame)) / 2 + var(--s6))); }

	/* въезд: кадр рамки по центру первого экрана, вокруг — тёмный фон */
	.entry { background: var(--g-deep); padding-top: var(--scene-gap); }
	.motion .entry { padding-bottom: var(--scene-gap); }
	.entry__stage { max-width: var(--frame); margin-inline: auto; padding-top: var(--scene-h); overflow: hidden; }
	.motion .entry__stage { height: var(--scene-h); }
	.plate, .entry__haze, .entry__scrim, .entry__copy { height: var(--scene-h); }
	.lane { background: var(--g-morning); }

	/* дома: кадр не выше разумного */
	.motion .house-frame { height: min(calc(100vh - var(--head-h) - 10vh), 820px); }

	/* день: лента ездит внутри рамки */
	.walk { max-width: var(--frame); margin-inline: auto; }
	.motion .day__pin { max-width: var(--frame); margin-inline: auto; }
	.motion .walk { max-width: none; }
	.motion .walk__track { padding-right: min(24vw, 384px); }
	.motion .spot img { max-height: min(calc((100vh - var(--head-h)) * .5), 540px); }
	.motion .spot--tall img { max-height: min(calc((100vh - var(--head-h)) * .55), 580px); }

	/* баня */
	.bath__media, .bath__copy { max-width: var(--frame); margin-inline: auto; }
	.motion .bath { padding-block: var(--scene-gap); transition: background-color 400ms var(--ease-out); }
	.motion .bath[data-tone="dark"] { background: #121915; } /* тон ночной подложки сцены (main.js) */
	.motion .bath__stage { max-width: var(--frame); margin-inline: auto; height: var(--scene-h); overflow: hidden; }
	.motion .bath__media { max-width: none; margin: 0; }
	.motion .bath__copy { max-width: none; }
	.motion .bath__title { top: calc(var(--s8) + 10%); }
	.motion .bath__beat { top: 50%; }

	/* берег */
	.shore__stage { max-width: var(--frame); margin-inline: auto; position: relative; }
	.shore__forest { height: calc(var(--scene-h) * .7); }
	.shore__slit { height: var(--scene-h); }
	.shore__copy { top: calc(var(--scene-h) * .7 + var(--s9)); }
	.motion .shore { padding-block: var(--scene-gap); }
	.motion .shore__stage { height: var(--scene-h); }
	.motion .shore__forest, .motion .shore__slit { height: auto; }
	.motion .shore__copy { top: calc(var(--s8) + 3%); }
}

/* =========================================================
   МЕНЮ В ШАПКЕ (разделы как в прототипе)
   ========================================================= */
.top__menu { display: none; }
.top__links { list-style: none; margin: 0; padding: 0; }
.top__links a, .top__menu-phone { text-decoration: none; color: inherit; }
.top__burger {
	display: none; flex: none; width: 44px; height: 44px; margin-right: calc(-1 * var(--s2));
	place-content: center; gap: 7px; background: none; border: 0; color: inherit; cursor: pointer;
	touch-action: manipulation; transition: transform var(--d-press) var(--ease-out);
}
.top__burger { order: 10; }
.top__burger:active { transform: scale(.94); }
.top__burger span { display: block; width: 24px; height: 2px; background: currentColor; transition: transform var(--d-ui) var(--ease-out); }
.top.is-open .top__burger span:first-child { transform: translateY(4.5px) rotate(45deg); }
.top.is-open .top__burger span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

@media (min-width: 1200px) {
	.top__menu { display: block; margin-left: var(--s7); }
	.top__links { display: flex; gap: var(--s5); }
	.top__links a {
		font: 700 var(--t-sm)/1 var(--f-label); letter-spacing: .08em; text-transform: uppercase;
		padding-block: var(--s2); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	}
	.top__menu-phone { display: none; }
}
@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
	.top__links a { transition: background-size var(--d-ui) var(--ease-out); }
	.top__links a:hover { background-size: 100% 1px; }
}
@media (max-width: 1199px) {
	.top__burger { display: grid; }
	.top__menu {
		display: block; position: absolute; top: 100%; left: 0; right: 0;
		padding: var(--s2) var(--gutter) var(--s6);
		background: var(--g-night); color: var(--ink-night);
		border-top: 1px solid var(--line-night);
		max-height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
		opacity: 0; visibility: hidden; transform: translateY(-8px);
		transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out), visibility 0s linear var(--d-ui);
	}
	.top.is-open .top__menu { opacity: 1; visibility: visible; transform: none; transition: opacity var(--d-ui) var(--ease-out), transform var(--d-ui) var(--ease-out); }
	.top.is-open::before { background: var(--g-night); }
	.top.is-open { color: var(--ink-night); }
	.top.is-open .top__mark .logo--white { display: block; }
	.top.is-open .top__mark .logo--dark { display: none; }
	.top__links a { display: block; padding: var(--s4) 0; font: 400 24px/1.1 var(--f-display); border-bottom: 1px solid var(--line-night); }
	.top__menu-phone { display: inline-block; margin-top: var(--s5); font-weight: 700; font-size: var(--t-base); }
}
@media (max-width: 1199px) and (min-width: 900px) {
	.top__menu { left: auto; width: 380px; right: max(0px, calc((100% - var(--frame, 100%)) / 2)); }
}

/* =========================================================
   МОДУЛЬ БРОНИРОВАНИЯ TRAVELLINE ПОД ШАПКОЙ
   Виджет живёт в iframe и рисует себя сам; подписи у него белые,
   поэтому полоса тёмная. Компьютер: шапка и полоса закреплены сверху
   одним тёмным блоком. Телефон: полоса над первым экраном, при прокрутке
   её заменяет кнопка в шапке (main.js), по ней полоса раскрывается под шапкой.
   ========================================================= */
.bookbar { position: relative; z-index: 45; background: var(--g-deep); color-scheme: light; }
.bookbar__in { margin-inline: auto; max-width: calc(1040px + 2 * var(--gutter)); padding: var(--s2) var(--gutter); }
.tlbar #tl-search-form { min-height: 64px; }
/* переход по якорю без сцен: раздел встаёт под шапку и полосу, а не под них */
main > section { scroll-margin-top: var(--head-h); }
.tlbar__fallback { display: inline-flex; align-self: flex-start; margin: var(--s2) 0; }
/* виджет не встал — пустое место под него не держим */
.tlbar:has(.tlbar__fallback:not([hidden])) #tl-search-form { min-height: 0; }
.tlbar__fallback[hidden] { display: none; }
/* «Выбрать даты» в блоке дат на компьютере: полоса и так на месте — короткая подсветка рамкой */
.bookbar__in.is-ping { animation: bar-ping 1.2s var(--ease-out); }
@keyframes bar-ping { 0%, 40% { box-shadow: inset 0 0 0 2px var(--amber); } 100% { box-shadow: inset 0 0 0 2px transparent; } }
@media (prefers-reduced-motion: reduce) { .bookbar__in.is-ping { animation-duration: 2.4s; } }
.top__book { display: none; }

/* шапка — сплошной тёмный блок на всех ширинах, тон по разделам больше не меняется:
   под ней полоса модуля, а на телефоне в ней кнопка поверх любого раздела */
.top, .top[data-tone] { color: var(--ink-night); background: var(--g-deep); }
.top::before, .top[data-tone]::before { display: none; }
.top[data-tone] .top__mark .logo--white { display: block; }
.top[data-tone] .top__mark .logo--dark { display: none; }
.top[data-tone="light"] .btn--primary { --btn-bg: var(--amber); --btn-ink: var(--ink-day); --btn-line: var(--amber); }
/* компьютер: виджет в одну строку — полоса закреплена под шапкой всегда */
@media (min-width: 1200px) {
	:root { --bar-h: 112px; } /* до загрузки виджета; дальше main.js ставит точную высоту полосы */
	.bookbar {
		position: fixed; inset: var(--top-h) 0 auto 0; z-index: 49; min-height: 82px;
		border-top: 1px solid var(--line-night); border-bottom: 1px solid var(--line-night);
	}
	.bookbar__in { max-width: var(--frame); height: 100%; display: flex; flex-direction: column; justify-content: center; }
}

/* текст въезда поверх невидимого пока блока дорожек, иначе тот перехватывает клики */
.motion .entry__copy { z-index: 2; }

/* широкий монитор: кадр въезда сразу под шапкой и полосой, без пустой полосы сверху */
@media (min-width: 1601px) {
	.entry { --scene-h: min(calc(100vh - var(--head-h)), 1400px); padding-top: var(--head-h); }
	.motion .entry { padding-bottom: calc(100vh - var(--head-h) - var(--scene-h)); }
}

/* планшет и телефон: виджет в несколько строк — полоса над первым экраном,
   при прокрутке её заменяет кнопка в шапке */
@media (max-width: 1199px) {
	.bookbar { padding-top: var(--top-h); }
	.bookbar__in { padding: var(--s3) var(--gutter) var(--s4); }
	/* модуль ушёл за край: в шапке кнопка «Забронировать» */
	.book-away .top__book { display: inline-flex; }
	.top__actions { margin-left: auto; }
	/* раскрытый модуль: тот же узел, закреплён под шапкой (место в потоке держит высота обёртки) */
	.book-open .bookbar__in {
		position: fixed; z-index: 49; inset: var(--top-h) 0 auto 0;
		max-height: calc(100dvh - var(--top-h)); overflow-y: auto; overscroll-behavior: contain;
		background: var(--g-deep); border-top: 1px solid var(--line-night);
		box-shadow: 0 24px 48px rgba(0, 0, 0, .45);
	}
}

/* телефон: модуль над первым экраном, поэтому кадр ниже — заголовок ближе к верху;
   шапка над фото больше не стоит, тёмный край сверху не нужен */
@media (max-width: 899px) {
	.plate { height: 58vw; }
	/* полоса 58vw, нижняя треть уходит в фон: днём в ней дом с террасой целиком,
	   ночью — крыша и светящаяся терраса (кадры 16:9, низ полосы закрыт) */
	.plate__photo { width: 140vw; height: 78.7vw; left: -20vw; top: -20.7vw; }
	.plate__night { max-width: none; inset: auto; width: 150vw; height: 84.3vw; left: -40vw; top: -24.4vw; }
	/* вывеска «МЫ ЗДЕСЬ» и на телефоне: сетка 1700×955 как у дневного кадра, чуть ниже него, чтобы буквы не упирались в край полосы */
	.plate__sign { display: block; position: absolute; width: 140vw; height: 78.7vw; left: -20vw; top: -15.7vw; z-index: 1; }
	.plate::before { display: none; }
}

/* =========================================================
   ПОДВАЛ: разделы, связь, документы (общий для всех страниц, tools/v05.py)
   ========================================================= */
.foot__grid { row-gap: var(--s7); }
.foot__addr { margin-top: var(--s5); font-size: var(--t-sm); color: var(--ink-night-soft); max-width: 34ch; }
.foot__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); font-size: var(--t-sm); }
.foot__nav ul { display: grid; gap: var(--s2); align-content: start; }
.foot__lbl { font: 700 var(--t-xs)/1.3 var(--f-label); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-night-soft); }
.foot__tel { font: 400 var(--t-h3)/1.2 var(--f-display); }
.foot__social { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s4); }
.foot a { text-underline-offset: 3px; }
@media (min-width: 900px) { .foot__grid { grid-template-columns: 4fr 4fr 3fr; } .foot__legal { grid-column: 2 / -1; } }
@media (min-width: 1200px) { .foot__grid { grid-template-columns: 4fr 4fr 3fr 3fr; } .foot__legal { grid-column: auto; } }
@media (max-width: 899px) { .foot__legal, .foot__contacts { font-size: var(--t-sm); } }

/* =========================================================
   Шапка и модуль бронирования: один сплошной тёплый графит, без разделительных линий.
   Плавающая кнопка TravelLine «Узнать цены» (их контейнер на нашей странице) — в правый нижний
   угол, где не закрывает заголовки и цены.
   ========================================================= */
:root { --chrome: #15130F; }
.top, .top[data-tone] { background: var(--chrome); }
.bookbar { background: var(--chrome); }
@media (min-width: 1200px) { .bookbar { border-top: 0; border-bottom: 0; } }
@media (max-width: 1199px) { .book-open .bookbar__in { background: var(--chrome); border-top: 0; } }
@media (min-width: 1601px) { .entry { background: var(--chrome); } }
.x-tl-booking-widget-container { top: auto !important; left: auto !important; right: 12px !important; bottom: calc(16px + env(safe-area-inset-bottom, 0px)) !important; }

/* =========================================================
   Телефон: меню одного цвета с шапкой, ссылки с удобной зоной нажатия,
   длинная почта не раздвигает страницу
   ========================================================= */
@media (max-width: 1199px) { .top__menu { background: var(--chrome); border-top: 0; } .top.is-open::before { background: var(--chrome); } }
.foot__grid > *, .foot__contacts, .foot__contacts li { min-width: 0; }
.foot__contacts a { overflow-wrap: anywhere; }
@media (pointer: coarse) {
	.link { position: relative; }
	.link::after { content: ""; position: absolute; inset: -8px 0; }
	.foot__nav ul { gap: 0; }
	.foot__nav a, .foot__contacts a, .foot__legal a, .foot__social a { display: inline-block; padding-block: 6px; }
}

/* держим место под виджет брони, иначе страница прыгает, когда он встаёт. Высоты сняты с виджета 02.11.2026;
   от 1280 px полоса закреплена поверх страницы и ничего не сдвигает.
   На узком телефоне поля меньше: при ширине виджета около 358 px он случайно выбирает то две колонки, то одну (288 или 408 px) */
@media (max-width: 420px) { .bookbar__in { padding-inline: 6px; } }
@media (max-width: 374px) { .tlbar #tl-search-form { min-height: 420px; } }
@media (min-width: 375px) and (max-width: 640px) { .tlbar #tl-search-form { min-height: 285px; } }
@media (min-width: 641px) and (max-width: 1099px) { .tlbar #tl-search-form { min-height: 273px; } }
@media (min-width: 1100px) and (max-width: 1279px) { .tlbar #tl-search-form { min-height: 153px; } }