@font-face { font-family: 'Forum'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/forum-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Forum'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/forum-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/onest-400-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/onest-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/onest-500-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/onest-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/onest-600-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Onest'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/onest-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Островский — свой вариант claude__ 24.10.2026.
   Цвета сняты с фото номеров TravelLine: розово-бежевые стены, песочный текстиль, тёмный орех мебели.
   Шрифты: Forum (классические прописные, как на старых фасадах) + Onest (текст). Линейная графика — цветом ореха. */
:root {
  --paper: #fbf6f2;   /* тёплый белый */
  --blush: #f1e0d6;   /* стены номеров */
  --sand: #e3c7b4;    /* покрывала */
  --walnut: #3b2a22;  /* мебель, текст */
  --cognac: #7f4126;  /* кнопки и ссылки */
  --muted: #6b5549;
  --line: #e2d1c5;
  --light: #f6ebe3;
  --draft-bg: #fff1c2; --draft-fg: #4a3500;
  --display: 'Forum', Georgia, 'Times New Roman', serif;
  --text: 'Onest', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth; scroll-padding-top: 90px; -webkit-text-size-adjust: 100% }
body { margin: 0; background: var(--paper); color: var(--walnut); font: 16px/1.6 var(--text) }
img { display: block; max-width: 100%; height: auto }
a { color: var(--cognac); text-underline-offset: 3px }
a:hover { color: var(--walnut) }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; margin: 0 0 16px; text-wrap: balance }
h1 { font-size: clamp(34px, 4.6vw, 58px) }
h2 { font-size: clamp(28px, 3.4vw, 42px) }
.h3, h3 { font-size: 26px }
p { margin: 0 0 14px }
:focus-visible { outline: 3px solid var(--cognac); outline-offset: 3px }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto }
.narrow { width: min(820px, 100% - 40px) }
.skip { position: absolute; left: 12px; top: -60px; background: var(--walnut); color: #fff; padding: 10px 14px; z-index: 100 }
.skip:focus { top: 12px }
.ln { fill: none; stroke: var(--walnut); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round }
.ln .thin { stroke-width: 1 }
.tx text { fill: var(--walnut); font: 11px var(--display); text-anchor: middle }
.tx .sm { font: 11px var(--text) }
.ico { width: 22px; height: 22px; flex: 0 0 22px; vertical-align: -5px }
.draft { display: inline-block; background: var(--draft-bg); color: var(--draft-fg); font: 600 12px/1.4 var(--text); padding: 1px 6px; border-radius: 3px; margin-left: 4px }

.eyebrow { font: 600 13px/1.4 var(--text); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px }
.lead { font-size: 18px; color: var(--muted); max-width: 60ch }
.small { font-size: 14px; color: var(--muted) }
.center { text-align: center; margin-top: 28px }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; background: var(--cognac); color: #fff; border: 1px solid var(--cognac); border-radius: 2px; font: 600 15px/1.2 var(--text); text-decoration: none; cursor: pointer }
.btn:hover { background: var(--walnut); border-color: var(--walnut); color: #fff }
.btn-sm { min-height: 40px; padding: 8px 14px; font-size: 14px }
.btn-light { background: var(--paper); color: var(--walnut); border-color: var(--paper) }
.btn-light:hover { background: #fff; color: var(--walnut) }
.btn-ghost { background: transparent; color: #fff; border-color: #d9c3b4 }
.link { font-weight: 600 }

.topbar { background: var(--walnut); color: var(--light); font-size: 13px }
.topbar-in { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0 }
.topbar .ln { stroke: var(--light) }
.topbar a { color: var(--light); text-decoration: none; margin-left: 18px }
.topbar a:hover { text-decoration: underline; color: #fff }
.header { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line) }
.header-in { display: flex; align-items: center; gap: 24px; min-height: 76px }
.logo { display: flex; align-items: center; gap: 12px; color: var(--walnut); text-decoration: none }
.logo-mark { width: 30px; height: 36px }
.logo b { display: block; font: 400 26px/1 var(--display); letter-spacing: .06em; text-transform: uppercase }
.logo small { font-size: 12px; color: var(--muted); letter-spacing: .04em }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 15px }
.nav a { color: var(--walnut); text-decoration: none }
.nav a:hover, .nav a[aria-current] { color: var(--cognac); text-decoration: underline }
.nav-book { display: none }
.header-phone { color: var(--walnut); text-decoration: none; font-weight: 600; white-space: nowrap; line-height: 1.2 }
.header-phone small { display: block; font-weight: 400; font-size: 12px; color: var(--muted) }
.burger { display: none; background: none; border: 1px solid var(--line); width: 44px; height: 44px; padding: 10px; cursor: pointer }
.burger span { display: block; height: 2px; background: var(--walnut); margin: 6px 0 }

.hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 620px; background: var(--paper) }
.hero-text { display: flex; justify-content: flex-end; min-width: 0; padding: 56px 48px 56px max(16px, env(safe-area-inset-left, 0px)) }
.hero-in { max-width: 600px; width: 100% }
.hero-pic { position: relative; min-height: 420px }
.hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 45% 60% }
.search-card { background: #fff; border: 1px solid var(--line); padding: 20px; margin-top: 24px; box-shadow: 0 10px 30px rgb(59 42 34 / 8%) }
.search-h { font-weight: 600; margin-bottom: 12px }
.search { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 12px; align-items: end }
.search label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); min-width: 0 }
.search input, .search select { font: 16px var(--text); color: var(--walnut); background: var(--paper); border: 1px solid #cdb6a7; border-radius: 2px; padding: 10px; min-height: 48px; width: 100% }
.search-note { font-size: 14px; color: var(--muted); margin: 12px 0 0 }

.strip { background: var(--blush); padding: 22px 0 }
.strip-in { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 14px 32px; font-size: 15px }
.strip-in span { display: inline-flex; align-items: center; gap: 8px }

.section { padding: 72px 0 }
.section-blush { background: var(--blush) }
.section-walnut { background: var(--walnut); color: var(--light) }
.section-walnut h2 { color: #fff }
.section-walnut .ln { stroke: var(--sand) }
.eyebrow-light { color: var(--sand) }
.sec-head { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; margin-bottom: 32px }
.sec-head > p { color: var(--muted); margin: 0 }
.group-head { display: flex; align-items: center; gap: 24px; margin: 8px 0 20px }
.group-head p { color: var(--muted); max-width: 60ch; margin: 0 }
.group-head-2 { margin-top: 48px }
.art-sm { width: 150px; flex: 0 0 150px }
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px }
.cards-all { grid-template-columns: repeat(4, 1fr); margin-top: 40px }
.room-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; min-width: 0 }
.room-photo img { aspect-ratio: 3 / 2; object-fit: cover; width: 100% }
.room-body { padding: 16px; display: flex; flex-direction: column; gap: 8px; flex: 1 }
.room-body h3 { font-size: 22px; margin: 0 }
.room-body h3 a { color: var(--walnut); text-decoration: none }
.room-body h3 a:hover { color: var(--cognac); text-decoration: underline }
.room-meta { font-size: 14px; color: var(--muted); margin: 0 }
.room-act { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 8px; font-size: 14px }

.amen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px }
.amen li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-items: start }
.amen b { font-weight: 600 }
.amen span { grid-column: 2; color: var(--muted); font-size: 15px }

.dom { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center }
.dom-text { min-width: 0 }
.dom-pics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px }
.dom-pics img { aspect-ratio: 4 / 3; object-fit: cover }
.art { width: 100%; height: auto }

.doroga { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center }
.steps { list-style: none; padding: 0; margin: 20px 0 24px; display: grid; gap: 14px }
.steps li { display: grid; grid-template-columns: 26px 1fr; gap: 12px }
.btns { display: flex; flex-wrap: wrap; gap: 12px }
.doroga-pic { margin: 0 }
.doroga-pic img { border-radius: 4px; aspect-ratio: 4 / 3; object-fit: cover }

.faq { display: grid; grid-template-columns: .8fr 1.2fr; gap: 48px }
.faq-list details { border-top: 1px solid var(--line); padding: 16px 0 }
.faq-list details:last-child { border-bottom: 1px solid var(--line) }
.faq-list summary { cursor: pointer; font-weight: 600; font-size: 17px }
.faq-list details p { margin: 10px 0 0; color: var(--muted) }

.footer { background: var(--walnut); color: var(--light); padding: 48px 0 0; font-size: 15px }
.footer a { color: #fff }
.footer .ln { stroke: var(--sand) }
.footer-in { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px }
.f-brand .logo-mark { width: 34px; height: 42px; margin-bottom: 12px }
.f-h { font: 600 14px/1.4 var(--text); letter-spacing: .1em; text-transform: uppercase; color: var(--sand); margin-bottom: 10px }
.footer-low { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid #5a463b; margin-top: 36px; padding: 18px 0 24px; font-size: 13px; color: var(--sand) }
.mobile-bar { display: none }
.cookie { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 50; max-width: 560px; margin-left: auto; background: #fff; border: 1px solid var(--line); box-shadow: 0 10px 30px rgb(59 42 34 / 18%); padding: 14px 16px; display: flex; gap: 14px; align-items: center; font-size: 14px }
.cookie[hidden] { display: none }
.cookie p { margin: 0 }

.page-top { padding-top: 32px }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 20px }
.table-wrap { overflow-x: auto; margin-top: 28px; border: 1px solid var(--line); background: #fff }
.cmp { border-collapse: collapse; width: 100%; font-size: 15px; min-width: 640px }
.cmp th, .cmp td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top }
.cmp thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted) }
.room-top { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: start }
.room-main { min-width: 0 }
.g-item { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; width: 100% }
.g-main img { aspect-ratio: 3 / 2; object-fit: cover; width: 100% }
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px }
.gallery img { aspect-ratio: 3 / 2; object-fit: cover; width: 100% }
.room-side h1 { font-size: clamp(30px, 3.2vw, 42px) }
.dl { margin: 0 0 18px; display: grid; gap: 8px }
.dl div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px }
.dl dt { color: var(--muted) }
.dl dd { margin: 0 }
.book-box { background: var(--blush); padding: 18px; margin-top: 16px }
.book-box .btn { width: 100% }
.room-more { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; margin-top: 48px }
.amen-list { columns: 2; gap: 24px; padding-left: 18px; margin: 12px 0 0 }
.other { padding-left: 18px; margin: 0 }
.other li { margin-bottom: 6px }
.lightbox { border: 0; padding: 0; background: #000; max-width: 96vw; max-height: 92vh }
.lightbox::backdrop { background: rgb(20 12 8 / 88%) }
.lightbox img { max-height: 90vh; width: auto; margin: auto }
.lb-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; font-size: 28px; line-height: 1; border: 0; border-radius: 50%; background: var(--paper); color: var(--walnut); cursor: pointer }
.tl-box { background: #fff; border: 1px solid var(--line); padding: 24px; margin: 24px 0 }
#tl-booking-form:empty { display: none }
.tl-fallback .summary { font-weight: 600 }
.prose h2 { font-size: 26px; margin-top: 28px }

/* Программа лояльности: лестница уровней — ступени выше и темнее; с Платинового тёмный фон и белый текст (контраст) */
.loyal-steps { list-style: none; margin: 28px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; align-items: end }
.loyal-steps li { display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; min-height: calc(130px + var(--i) * 24px); padding: 16px 14px;
  border-radius: 6px; color: var(--walnut) }
.loyal-steps .ls-dark { color: #fff }
.ls-name { font-size: 14px; font-weight: 600 }
.ls-pct { font: 400 34px/1 var(--display) }
.ls-when { font-size: 13px }
.loyal-how { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin: 8px 0 24px }@media (max-width: 1100px) {
  .loyal-steps { grid-template-columns: repeat(4, 1fr) }
  .loyal-steps li { min-height: 120px }
  .header-phone { display: none }
  .cards, .cards-all { grid-template-columns: repeat(2, 1fr) }
  .footer-in { grid-template-columns: 1fr 1fr }
  .search { grid-template-columns: 1fr 1fr }
  .search label:nth-child(3) { grid-column: 1 / -1 }
  .search .btn { grid-column: 1 / -1 }
}
@media (max-width: 760px) {
  body { padding-bottom: 68px }
  .wrap { width: calc(100% - 32px) }
  .topbar-in > span:first-child { display: none }
  .topbar-in { justify-content: flex-end }
  .header-in { min-height: 64px; gap: 12px }
  .header-in > .btn { display: none }
  .burger { display: block; margin-left: auto }
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; gap: 0; padding: 8px 16px 16px; margin: 0 }
  .nav.open { display: flex }
  .nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 17px }
  .nav-book { display: block; color: var(--cognac) !important; font-weight: 600 }
  .hero { grid-template-columns: 1fr; min-height: 0 }
  .hero-pic { order: -1; min-height: 0; aspect-ratio: 4 / 3 }
  .hero-text { padding: 28px 16px }
  .sec-head, .dom, .doroga, .faq, .room-top, .room-more { grid-template-columns: 1fr; gap: 24px }
  .strip-in { grid-template-columns: 1fr }
  .loyal-steps { grid-template-columns: 1fr 1fr }
  .loyal-how { grid-template-columns: 1fr; gap: 8px }
  .search { grid-template-columns: 1fr 1fr }
  .search label:nth-child(3) { grid-column: 1 / -1 }
  .search .btn { grid-column: 1 / -1 }
  .lead { font-size: 17px }
  .section { padding: 48px 0 }
  .cards, .cards-all, .amen { grid-template-columns: 1fr }
  .group-head { flex-direction: column; align-items: flex-start; gap: 12px }
  .art-sm { width: 120px; flex-basis: auto }
  .dom-art { order: 2 }
  .footer-in { grid-template-columns: 1fr }
  .amen-list { columns: 1 }
  .gallery { grid-template-columns: repeat(3, 1fr) }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding: 10px 16px }
  .mobile-bar > a:first-child { display: flex; align-items: center; justify-content: center; border: 1px solid var(--cognac); font-weight: 600; text-decoration: none; min-height: 48px }
  .cookie { left: 0; right: 0; bottom: 68px; max-width: none; padding: 8px 16px; box-shadow: none; border-width: 1px 0 0 }
  .cookie .btn { min-height: 40px; flex: 0 0 auto }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } }