@font-face {
	font-family: "Literata";
	src: url("../fonts/literata-cyrillic-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Literata";
	src: url("../fonts/literata-latin-wght-normal.woff2") format("woff2");
	font-weight: 200 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: "Golos Text";
	src: url("../fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
	font-family: "Golos Text";
	src: url("../fonts/golos-text-latin-wght-normal.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+0000-00FF, U+2000-206F, U+2122;
}
@font-face {
	font-family: "Golos Text";
	src: url("../fonts/golos-text-latin-ext-wght-normal.woff2") format("woff2");
	font-weight: 400 900;
	font-display: swap;
	unicode-range: U+20BD;
}

:root {
	--paper: #f6f1e7;
	--paper-deep: #ece3d3;
	--ink: #23291f;
	--ink-soft: #565c50;
	--forest: #2f4a3a;
	--forest-deep: #1f3329;
	--ochre: #c98a35;
	--ochre-text: #8a5714;
	--cream: #f6f1e7;
	--line: rgba(35, 41, 31, .18);
	--line-light: rgba(246, 241, 231, .22);
	--serif: "Literata", Georgia, serif;
	--sans: "Golos Text", -apple-system, "Segoe UI", Arial, sans-serif;
	--gutter: clamp(16px, 4vw, 40px);
	--section: clamp(56px, 8vw, 112px);
	--radius: 6px;
	--ease: cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 17px/1.6 var(--sans);
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3 {
	margin: 0;
	font-family: var(--serif);
	font-weight: 500;
	line-height: 1.12;
	letter-spacing: -.012em;
	text-wrap: balance;
}
h1 { font-size: clamp(38px, 5.6vw, 68px); }
h2 { font-size: clamp(30px, 3.8vw, 46px); }
h3 { font-size: 24px; line-height: 1.2; }

:focus-visible { outline: 2px solid var(--ochre); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }

.skip {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 30;
	padding: 8px 16px;
	background: var(--forest);
	color: var(--cream);
}
.skip:focus { top: 8px; }

.eyebrow {
	margin: 0 0 16px;
	color: var(--ochre-text);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .02em;
}

/* кнопки */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 10px 22px;
	border: 1px solid var(--forest);
	border-radius: var(--radius);
	background: transparent;
	color: var(--forest);
	font: 500 16px/1.2 var(--sans);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--forest); color: var(--cream); }
.btn-solid { background: var(--forest); color: var(--cream); }
.btn-solid:hover { background: var(--forest-deep); border-color: var(--forest-deep); }
.btn-light { border-color: var(--line-light); color: var(--cream); }
.btn-light:hover { background: var(--cream); border-color: var(--cream); color: var(--forest-deep); }
.btn-ochre { border-color: var(--ochre); background: var(--ochre); color: var(--forest-deep); }
.btn-ochre:hover { border-color: var(--cream); background: var(--cream); color: var(--forest-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* шапка */
.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	border-bottom: 1px solid var(--line);
	background: var(--paper);
}
.site-header .wrap {
	display: flex;
	align-items: center;
	gap: 40px;
	min-height: 76px;
}
.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--forest);
	font: 500 22px/1 var(--serif);
	text-decoration: none;
	white-space: nowrap;
}
.brand svg { width: 38px; height: 38px; }
.mark { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

.main-nav { flex: 1; }
.main-nav ul { display: flex; gap: 28px; }
.main-nav a {
	position: relative;
	display: block;
	padding: 6px 0;
	font-size: 16px;
	text-decoration: none;
}
.main-nav a::after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 2px;
	background: var(--ochre);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.main-nav a:not(.btn):hover { color: var(--forest); }
.main-nav a:hover::after, .main-nav a[aria-current]::after { transform: scaleX(1); }

.header-phone { color: var(--forest); font-weight: 500; text-decoration: none; white-space: nowrap; }
.header-phone:hover { text-decoration: underline; }

/* бургер: виден только на телефоне */
.menu-toggle, .main-nav .menu-phone { display: none; }

/* первый экран */
.hero { padding: clamp(40px, 6vw, 80px) 0 var(--section); }
.hero .wrap {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.hero .lead { max-width: 30em; margin: 24px 0 32px; color: var(--ink-soft); font-size: 19px; }
.hero-media {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
	aspect-ratio: 5 / 4;
}
.hero-media img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
.hero-media > :first-child { grid-row: span 2; }

/* факты */
.facts { border-block: 1px solid var(--line); }
.facts ul { display: grid; grid-template-columns: repeat(4, 1fr); }
.facts li { padding: 24px 24px 24px 0; }
.facts li + li { padding-left: 24px; border-left: 1px solid var(--line); }
.facts b { display: block; font: 500 20px/1.25 var(--serif); }
.facts span { color: var(--ink-soft); font-size: 15px; }

/* секции */
.section { padding: var(--section) 0; }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head p { margin-top: 16px; color: var(--ink-soft); }

/* карточки номеров */
.rooms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.room-card { display: flex; flex-direction: column; }
.room-card .photo { display: block; overflow: hidden; border-radius: var(--radius); }
.room-card img { width: 100%; aspect-ratio: 565 / 446; object-fit: cover; transition: transform .5s ease; }
.room-card a.photo:hover img { transform: scale(1.03); }
.room-card .for { margin: 20px 0 4px; color: var(--ochre-text); font-size: 14px; font-weight: 500; }
.room-card h3 a { text-decoration: none; }
.room-card h3 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.room-card .text { margin: 12px 0 20px; color: var(--ink-soft); }
.room-card .row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--line);
}
.price { font-weight: 600; font-size: 19px; white-space: nowrap; }
.more { color: var(--forest); font-weight: 500; text-underline-offset: 4px; }

/* о гостинице */
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
	gap: clamp(32px, 6vw, 88px);
}
.about-grid figure { max-width: 228px; margin: 32px 0 0; }
.about-grid figure img { border-radius: var(--radius); }
figcaption { margin-top: 8px; color: var(--ink-soft); font-size: 14px; }

/* удобства: строки как венцы сруба */
.band { background: var(--forest-deep); color: var(--cream); }
.band .eyebrow { color: var(--ochre); }
.logs { columns: 2; column-gap: 56px; }
.logs li {
	padding: 16px 0;
	border-top: 1px solid var(--line-light);
	font: 400 20px/1.3 var(--serif);
	break-inside: avoid;
}

/* парк Лога */
.split {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: center;
}
.split img { width: 100%; border-radius: var(--radius); }
.split h2 { margin-bottom: 20px; }

/* контакты внизу главной */
.cta { background: var(--forest); color: var(--cream); }
.cta .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 32px; }
.cta .eyebrow { color: var(--ochre); }
.cta h2 a { text-decoration: none; }
.cta h2 a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.cta address { margin-top: 12px; font-style: normal; opacity: .85; }

/* страницы */
.page-head { padding: clamp(32px, 5vw, 64px) 0 clamp(24px, 3vw, 40px); }
.page-head h1 { font-size: clamp(34px, 4.4vw, 54px); }
.page-head p:not(.eyebrow) { max-width: 38em; margin-top: 16px; color: var(--ink-soft); }

.room-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.room-tabs a {
	padding: 8px 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 15px;
	text-decoration: none;
}
.room-tabs a:hover { border-color: var(--forest); }
.room-tabs a[aria-current] { border-color: var(--forest); background: var(--forest); color: var(--cream); }

.room-layout {
	display: grid;
	grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: start;
	padding-bottom: var(--section);
}

.gallery-main {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--paper-deep);
	cursor: zoom-in;
}
.gallery-main img { width: 100%; aspect-ratio: 565 / 446; object-fit: cover; }
.gallery-caption { min-height: 1.6em; margin: 10px 0 14px; color: var(--ink-soft); font-size: 15px; }
.thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.thumb {
	padding: 0;
	border: 0;
	border-radius: 4px;
	overflow: hidden;
	background: none;
	cursor: pointer;
	opacity: .7;
	outline-offset: 2px;
	transition: opacity .2s;
}
.thumb img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.thumb:hover { opacity: 1; }
.thumb[aria-current] { opacity: 1; outline: 2px solid var(--ochre); }

.room-side { position: sticky; top: 100px; }
.room-side .price { display: block; font-size: 30px; line-height: 1.2; }
.room-side .note { margin: 2px 0 22px; color: var(--ink-soft); }
.room-side h2 { margin-bottom: 10px; font-size: 22px; }
.equip { margin-bottom: 24px; }
.equip li { padding: 8px 0; border-top: 1px solid var(--line); }
.room-side .btn { flex: 1 1 auto; }
.room-side .btn-solid { flex-basis: 100%; }

/* просмотр фото */
.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(20, 28, 22, .94);
	color: var(--cream);
}
.lightbox[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; padding: 0 16px; }
.lightbox img { width: min(92vw, 850px, 118vh); max-height: 80vh; object-fit: contain; }
.lightbox figcaption { color: var(--cream); font-size: 16px; text-align: center; }
.lb-btn {
	position: absolute;
	width: 48px;
	height: 48px;
	border: 1px solid var(--line-light);
	border-radius: 50%;
	background: rgba(20, 28, 22, .6);
	color: var(--cream);
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.lb-btn:hover { background: var(--cream); color: var(--forest-deep); }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; translate: 0 -50%; }
.lb-next { right: 16px; top: 50%; translate: 0 -50%; }

/* о нас */
.prose-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
	padding-bottom: var(--section);
}
.prose-grid img { width: 100%; border-radius: var(--radius); }

/* контакты */
.contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
	padding-bottom: var(--section);
}
.contact-list > div { padding: 16px 0; border-top: 1px solid var(--line); }
.contact-list dt { color: var(--ink-soft); font-size: 15px; }
.contact-list dd { margin: 2px 0 0; font: 500 21px/1.3 var(--serif); }
.contact-list dd a { text-decoration: none; }
.contact-list dd a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.contact-list { margin: 0 0 24px; }
.map { min-height: 420px; overflow: hidden; border-radius: var(--radius); background: var(--paper-deep); }
.map iframe { display: block; width: 100%; height: 420px; border: 0; }

/* подвал */
.site-footer { padding: 40px 0; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: 15px; }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 32px; }
.site-footer ul { display: flex; gap: 24px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--forest); text-decoration: underline; }
.site-footer p { margin: 0; }

/* нижняя панель на телефоне */
.call-bar { display: none; }

@media (max-width: 1020px) {
	.header-phone { display: none; }
	.main-nav ul { justify-content: flex-end; }
	.rooms { gap: 24px; }
	.hero .wrap, .about-grid, .split, .prose-grid, .contact-grid, .room-layout { grid-template-columns: minmax(0, 1fr); }
	.room-side { position: static; }
	.hero-media { aspect-ratio: 3 / 2; }
	.facts ul { grid-template-columns: repeat(2, 1fr); }
	.facts li { padding: 18px 16px 18px 0; }
	.facts li + li { padding-left: 0; border-left: 0; }
	.facts li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
	.facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
}

@media (max-width: 760px) {
	body { padding-bottom: 72px; font-size: 16px; }
	html { scroll-padding-top: 80px; }

	/* без JS меню остаётся обычной строкой ссылок */
	html:not(.js) .site-header { position: static; }
	html:not(.js) .site-header .wrap { flex-wrap: wrap; gap: 4px 16px; padding-block: 12px; }
	html:not(.js) .main-nav { flex-basis: 100%; }
	html:not(.js) .main-nav ul { justify-content: flex-start; gap: 20px; }

	.js .site-header .wrap { min-height: 64px; gap: 16px; }
	.brand { font-size: 20px; }
	.brand svg { width: 34px; height: 34px; }

	.js .menu-toggle {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 6px;
		width: 44px;
		height: 44px;
		margin: 0 -10px 0 auto;
		padding: 0;
		border: 0;
		background: none;
		color: var(--forest);
		cursor: pointer;
	}
	.menu-toggle span {
		display: block;
		width: 24px;
		height: 2px;
		border-radius: 2px;
		background: currentColor;
		transition: transform .25s ease, opacity .2s ease;
	}
	.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

	/* панель открывается под шапкой высотой 64px + линия */
	.js .main-nav {
		position: fixed;
		inset: 65px 0 0;
		display: flex;
		flex-direction: column;
		padding: 16px var(--gutter) calc(24px + env(safe-area-inset-bottom));
		overflow-y: auto;
		background: var(--paper);
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity .25s ease, transform .25s ease, visibility .25s;
	}
	.js .main-nav.is-open { visibility: visible; opacity: 1; transform: none; }
	.js .main-nav ul { display: block; margin-bottom: 24px; }
	.js .main-nav li { border-bottom: 1px solid var(--line); }
	.js .main-nav a:not(.btn) { padding: 16px 0; font: 500 26px/1.2 var(--serif); }
	.js .main-nav a::after { display: none; }
	.js .main-nav a[aria-current] { color: var(--ochre-text); }
	.js .main-nav .menu-phone { display: flex; flex: none; margin-top: auto; }
	html.menu-open { overflow: hidden; }

	.btn-row .btn { flex: 1 1 auto; padding-inline: 14px; }
	.hero .btn-row .btn { flex-basis: 100%; }
	.room-tabs { gap: 4px; }
	.room-tabs a { flex: 1 1 auto; padding: 7px 6px; font-size: 13px; text-align: center; }
	.rooms { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.logs { columns: 1; }
	.logs li { font-size: 18px; padding: 13px 0; }
	.hero .lead { font-size: 17px; }
	.hero-media { aspect-ratio: 1 / 1; }
	.lb-prev, .lb-next { top: auto; bottom: 20px; translate: none; }
	.lb-prev { left: calc(50% - 60px); }
	.lb-next { right: calc(50% - 60px); }
	.call-bar {
		position: fixed;
		inset: auto 0 0;
		z-index: 15;
		display: grid;
		grid-template-columns: 1.4fr 1fr 1fr;
		gap: 8px;
		padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--line);
		background: var(--paper);
	}
	.call-bar .btn { min-height: 46px; padding-inline: 8px; font-size: 15px; }
}

/* анимации: только если посетитель не отключил их в системе */
@media (prefers-reduced-motion: no-preference) {
	.site-header { transition: box-shadow .3s ease; }
	.site-header.is-scrolled { box-shadow: 0 6px 20px rgba(35, 41, 31, .07); }

	.btn:active { transform: scale(.98); }

	/* логотип рисуется линиями на главной */
	body:has(.hero) .brand .mark path {
		stroke-dasharray: 1;
		animation: draw 1.1s ease both;
	}
	body:has(.hero) .brand .mark path:nth-child(2) { animation-delay: .25s; }
	body:has(.hero) .brand .mark path:nth-child(3) { animation-delay: .5s; }

	/* первый экран */
	.hero .wrap > div:first-child > * { animation: rise .8s var(--ease) both; }
	.hero .wrap > div:first-child > :nth-child(2) { animation-delay: .08s; }
	.hero .wrap > div:first-child > :nth-child(3) { animation-delay: .16s; }
	.hero .wrap > div:first-child > :nth-child(4) { animation-delay: .24s; }
	.hero-media img { animation: unveil 1.1s var(--ease) both; }
	.hero-media img:nth-child(2) { animation-delay: .15s; }
	.hero-media img:nth-child(3) { animation-delay: .3s; }

	/* появление при прокрутке */
	.js :is(.section-head, .room-card, .facts li, .about-grid > *, .split > *, .cta .wrap > *, .page-head, .room-layout > *, .prose-grid > *, .contact-grid > *) {
		transition: opacity .7s var(--ease), transform .7s var(--ease);
		transition-delay: calc(var(--i, 0) * 90ms);
	}
	.js :is(.section-head, .room-card, .facts li, .about-grid > *, .split > *, .cta .wrap > *, .page-head, .room-layout > *, .prose-grid > *, .contact-grid > *):not(.is-in) {
		opacity: 0;
		transform: translateY(18px);
	}

	/* удобства: линии-венцы прорисовываются слева направо */
	.js .logs li {
		position: relative;
		border-top-color: transparent;
		transition: opacity .6s ease;
		transition-delay: calc(var(--i, 0) * 60ms);
	}
	.js .logs li::before {
		content: "";
		position: absolute;
		inset: -1px 0 auto;
		height: 1px;
		background: var(--line-light);
		transform-origin: left;
		transition: transform .9s var(--ease);
		transition-delay: calc(var(--i, 0) * 60ms);
	}
	.js .logs:not(.is-in) li { opacity: 0; }
	.js .logs:not(.is-in) li::before { transform: scaleX(0); }

	/* смена фото в галерее */
	.gallery-main img { transition: opacity .25s ease; }
	.gallery-main.is-changing img { opacity: 0; }
	.gallery-main:hover img { filter: brightness(1.04); }
	.lightbox[open] { animation: fade .25s ease both; }
	.lightbox[open] img { animation: zoom .3s var(--ease) both; }

	@media (max-width: 760px) {
		.js :is(.room-card, .about-grid > *, .split > *, .cta .wrap > *, .room-layout > *, .prose-grid > *, .contact-grid > *) { transition-delay: 0s; }
	}
}

@keyframes draw {
	from { stroke-dashoffset: 1; opacity: 0; }
	15% { opacity: 1; }
	to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes rise {
	from { opacity: 0; transform: translateY(16px); }
	to { opacity: 1; transform: none; }
}
@keyframes unveil {
	from { clip-path: inset(0 0 100% 0); transform: scale(1.05); }
	to { clip-path: inset(0); transform: none; }
}
@keyframes fade {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes zoom {
	from { transform: scale(.98); }
	to { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { transition: none !important; }
}

.nowrap { white-space: nowrap; }