/* happ-key.rest — тема «гостиничная ключ-карта».

   Предметный мир: стойка гостиницы. Пробный ключ выдают как ключ-карту гостя:
   получить её можно заранее, а «проживание» — 72 часа — начинается с заезда,
   то есть с первого подключения. Отсюда и материал страницы: кремовый бланк,
   тёмно-синие чернила, латунь фурнитуры и тиснение фольгой на пластике карты.

   Цвет
     бумага   #F4EEE2  бланк #FFFBF4  чернила #15203B / #465069 / #676B7B
     линейки  #E2D7C2 (бумага) · #CDB88E (латунь)
     акцент   #8A5E1A  старая латунь: кнопки, ссылки, метки (белый текст 5.7:1)
     карта    #15203B пластик · #D9B56B фольга · #0B1020 магнитная полоса
     семантика: терракота #A2461F — предупреждение; зелёный #2F6B45 — отметка плана.
   Тёмная тема — ночной коридор: пол тёмно-синий, стены в тени, латунь светит
   ярче (#D7AA56), бумага превращается в сукно #152039. Карта остаётся картой.

   Типографика — две гарнитуры, три роли
     Spectral SC  — заголовки, метки, вордмарк; капитель как на гостиничном бланке;
                    она же данные — даты, часы, цены — с табличными цифрами;
     Gentium Book Plus — текст: книжная антиква, спокойная для длинного чтения.

   Размеры (шаг 1.25): 12 · 13 · 15 · 17/18 · 20 · 24 · 30 · 38 · 52.
   Отступы: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96.
   Радиусы: 0 · 2 · 4; исключение — сама ключ-карта (14 px, как у пластика).
   Границы 1 px, акцентные 2 px, двойная линейка бланка между разделами.
   Теней нет, кроме карты: это единственный предмет на странице. */

@import url('/fonts/faces.css');

:root {
  color-scheme: light;

  /* стандартные переменные: по ним строится тема кассы */
  --bg: #F4EEE2;
  --card: #FFFBF4;
  --ink: #15203B;
  --ink2: #465069;
  --ink3: #676B7B;
  --line: #E2D7C2;
  --line2: #CDB88E;
  --acc: #8A5E1A;
  --acc-ink: #FFFFFF;
  --acc-s: #F2E4C4;
  --warn: #A2461F;
  --warn-s: #F7E4D9;

  /* свои */
  --acc-h: #6F4B12;     /* латунь под пальцем */
  --paper2: #EBE2D0;    /* углублённая бумага: полоса проживания */
  --brass: #B0823A;     /* латунь-декор: бирка знака, отточия, ромбы */
  --navy: #15203B;      /* пластик ключ-карты */
  --navy2: #1F2D52;
  --foil: #D9B56B;      /* тиснение фольгой */
  --cream: #F3EBD9;     /* текст на пластике */
  --stripe: #0B1020;    /* магнитная полоса */
  --ok: #2F6B45;
  --ok-s: #E3EEDF;

  --f-disp: 'SpectralSC', 'Spectral SC', Georgia, 'Times New Roman', serif;
  --f-body: 'Gentium', 'Gentium Book Plus', Georgia, 'Times New Roman', serif;

  --w: 1180px;
  --gut: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;

    --bg: #0D1426;
    --card: #152039;
    --ink: #EFE7D6;
    --ink2: #B8B3A5;
    --ink3: #938F86;
    --line: #26324F;
    --line2: #5A4D31;
    --acc: #D7AA56;
    --acc-ink: #0D1426;
    --acc-s: #2A2416;
    --warn: #E48A5C;
    --warn-s: #2E1D17;

    --acc-h: #E8C27A;
    --paper2: #111A30;
    --brass: #C99A48;
    --navy: #1B2848;
    --navy2: #22325A;
    --foil: #E2C07A;
    --cream: #F3EBD9;
    --stripe: #070B16;
    --ok: #7FC096;
    --ok-s: #16271E;
  }
}

/* --- основа --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.6 var(--f-body);
  font-kerning: normal;
  overflow-wrap: break-word;
}
@media (min-width: 900px) { body { font-size: 18px; } }
img { max-width: 100%; height: auto; }
a { color: var(--acc); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--acc-h); }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
b, strong { font-weight: 700; }
code { font-family: var(--f-disp); font-size: .95em; background: var(--acc-s); padding: 0 4px; border-radius: 2px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; }
.skip:focus { left: 16px; z-index: 60; background: var(--ink); color: var(--bg); padding: 8px 16px; }

.wrap { max-width: var(--w); margin: 0 auto; padding: 0 var(--gut); }
@media (min-width: 600px) { :root { --gut: 24px; } }
@media (min-width: 1000px) { :root { --gut: 32px; } }

.eyebrow {
  display: inline-block;
  font: 700 12px/1.3 var(--f-disp);
  letter-spacing: .16em;
  color: var(--acc);
}

/* --- кнопки ------------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: 700 16px/1.2 var(--f-disp);
  letter-spacing: .04em;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn--brass { background: var(--acc); color: var(--acc-ink); }
.btn--brass:hover { background: var(--acc-h); color: var(--acc-ink); }
.btn--key { background: var(--navy); color: var(--foil); border-color: var(--navy); }
.btn--key:hover { background: var(--navy2); color: var(--cream); }
.btn--line { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--bg); }
.btn--sm { padding: 8px 14px; font-size: 14px; }
.btn[disabled] { opacity: .5; cursor: default; }
@media (prefers-color-scheme: dark) {
  .btn--key { background: var(--navy2); border-color: var(--brass); }
}

/* --- шапка ------------------------------------------------------------------------ */
.hdr { background: var(--bg); border-bottom: 3px double var(--line2); }
.hdr__in {
  max-width: var(--w); margin: 0 auto; padding: 12px var(--gut);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; min-width: 0; }
.brand:hover { color: var(--ink); }
.mk { display: block; flex: none; }
.mk__key { fill: var(--ink); }
.mk__fob { fill: var(--brass); }
.brand__mk { width: 40px; height: 40px; }
.brand__txt { display: grid; gap: 2px; min-width: 0; }
.brand__w {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 20px/1 var(--f-disp); letter-spacing: .1em;
}
.brand__w b { font-weight: 700; }
.brand__w i { width: 6px; height: 6px; background: var(--brass); transform: rotate(45deg); flex: none; }
.brand__w em { font-style: normal; font-weight: 500; color: var(--acc); }
.brand__tag { font: 500 11px/1.2 var(--f-disp); letter-spacing: .14em; color: var(--ink3); white-space: nowrap; }
.hdr__go { flex: none; }
.hdr__go-s { display: none; }
@media (max-width: 520px) {
  .brand__tag { display: none; }
  .brand__mk { width: 34px; height: 34px; }
  .brand__w { font-size: 18px; gap: 8px; }
  .hdr__go { padding: 9px 12px; font-size: 14px; }
  .hdr__go-l { display: none; }
  .hdr__go-s { display: inline; }
}

/* --- SIGNATURE: полоса проживания ------------------------------------------------
   Пять остановок = пять страниц. Отрезок после остановки: пунктир — до первого
   подключения время стоит; латунь — идут 72 часа; тонкая линия — дальше по желанию. */
.stay { background: var(--paper2); border-top: 1px solid var(--line); }
.stay__l {
  list-style: none; margin: 0 auto; padding: 0 var(--gut);
  max-width: var(--w);
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
}
.stay__s { position: relative; }
.stay__s[data-seg]::after {
  content: ''; position: absolute; top: 20px; left: calc(50% + 11px); right: calc(-50% + 11px);
  border-top: 2px dotted var(--ink3);
}
.stay__s[data-seg="run"]::after { border-top: 4px solid var(--brass); top: 19px; }
.stay__s[data-seg="after"]::after { border-top: 1px solid var(--line2); top: 21px; }
.stay__s a {
  display: grid; justify-items: center; gap: 2px;
  padding: 10px 2px 10px; text-align: center; text-decoration: none; color: var(--ink2);
}
.stay__dot {
  width: 12px; height: 12px; margin: 5px 0 6px;
  transform: rotate(45deg);
  border: 2px solid var(--brass); background: var(--bg);
}
.stay__n { font: 700 15px/1.15 var(--f-disp); letter-spacing: .03em; }
.stay__h { font: 500 12px/1.2 var(--f-disp); letter-spacing: .06em; color: var(--ink2); font-variant-numeric: lining-nums tabular-nums; }
.stay__s a:hover .stay__n { color: var(--acc); }
.stay__s.is-here .stay__dot { background: var(--brass); box-shadow: 0 0 0 3px var(--paper2), 0 0 0 4px var(--brass); }
.stay__s.is-here .stay__n { color: var(--ink); }
.stay__s.is-here .stay__h { color: var(--ink); font-weight: 700; }
@media (max-width: 480px) {
  .stay__l { padding: 0 8px; }
  .stay__n { font-size: 13px; letter-spacing: 0; }
  .stay__h { font-size: 10px; letter-spacing: .02em; }
}

/* --- хлебные крошки ------------------------------------------------------------ */
.crumbs {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline;
  padding: 16px 0 8px; font: 500 13px/1.4 var(--f-disp); letter-spacing: .04em; color: var(--ink3);
}
.crumbs a { color: var(--ink2); text-decoration: none; }
.crumbs a:hover { color: var(--acc); text-decoration: underline; }
.crumbs i { font-style: normal; color: var(--line2); }

/* --- ГЛАВНАЯ: первый экран --------------------------------------------------------
   Телефон: заголовок → форма → факты. Широкий экран: слева заголовок и факты,
   справа форма во всю высоту — стойка выдачи ключа. */
.hero {
  display: grid; gap: 24px;
  grid-template-areas: "head" "form" "facts";
  padding: 24px 0 48px;
}
.hero__head { grid-area: head; }
.hero__form { grid-area: form; min-width: 0; }
.facts { grid-area: facts; }
.hero h1 {
  font: 500 clamp(32px, 5.4vw, 54px)/1.05 var(--f-disp);
  letter-spacing: -.005em;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.hero__lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink2); max-width: 34em; }
@media (min-width: 960px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 470px);
    grid-template-areas: "head form" "facts form";
    grid-template-rows: auto 1fr;
    column-gap: 56px; row-gap: 32px;
    padding: 48px 0 64px;
    align-items: start;
  }
  .hero__lead { font-size: 20px; }
}

/* три факта: строки регистрационной карточки гостя */
.facts { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--ink); }
.fact {
  display: grid; gap: 4px 24px;
  padding: 14px 0 16px; border-bottom: 1px solid var(--line);
}
.fact__t { font: 700 18px/1.3 var(--f-disp); letter-spacing: .02em; }
.fact__t::before {
  content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 10px 2px 1px;
  background: var(--brass); transform: rotate(45deg);
}
.fact__x { color: var(--ink2); font-size: 16px; line-height: 1.55; }
@media (min-width: 600px) { .fact { grid-template-columns: 12rem 1fr; } }

/* --- СТОЙКА ВЫДАЧИ: рамка кассы ---------------------------------------------------
   Бланк с двойной латунной рамкой: снаружи линейка латуни, внутри — бумаги. */
.desk {
  position: relative;
  background: var(--card);
  border: 1px solid var(--line2);
  padding: 14px 14px 16px;
}
.desk::before {
  content: ''; position: absolute; inset: 4px; border: 1px solid var(--line); pointer-events: none;
}
.desk__hd {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
  padding: 6px 6px 12px; margin-bottom: 8px; border-bottom: 1px solid var(--line);
}
.desk__cap { font: 700 13px/1.2 var(--f-disp); letter-spacing: .16em; }
.desk__tag {
  font: 700 11px/1 var(--f-disp); letter-spacing: .12em; color: var(--acc);
  border: 1px solid var(--acc); padding: 5px 8px 4px; border-radius: 2px;
}
.desk__t { position: relative; margin: 4px 6px 4px; font: 700 20px/1.3 var(--f-disp); }
.desk__x { position: relative; margin: 0 6px 8px; color: var(--ink2); font-size: 16px; }
.desk__frame { position: relative; min-height: 320px; }
.desk__frame iframe { display: block; width: 100%; border: 0; }
.desk__fb { margin: 0; padding: 12px 6px; font-size: 15px; color: var(--ink2); }
.desk__fine { position: relative; margin: 8px 6px 0; font-size: 14px; line-height: 1.5; color: var(--ink3); }
.art .desk { margin: 40px 0 24px; }

/* --- SIGNATURE: карта гостя ----------------------------------------------------- */
.guest {
  display: grid; gap: 20px 56px;
  grid-template-areas: "intro" "ctl" "card" "left" "plan" "act";
  padding: 48px 0 56px;
  border-top: 3px double var(--line2);
}
.guest__intro { grid-area: intro; }
.guest__ctl { grid-area: ctl; }
.kc { grid-area: card; }
.guest__left { grid-area: left; }
.guest__plan { grid-area: plan; min-width: 0; }
.guest__act { grid-area: act; }
@media (min-width: 960px) {
  .guest {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "intro plan" "ctl plan" "card plan" "left plan" "act plan";
    grid-template-rows: auto auto auto auto 1fr;
    align-items: start;
  }
}
.guest h2, .route h2, .stay-on h2, .qa h2 {
  font: 700 clamp(26px, 3.4vw, 36px)/1.12 var(--f-disp);
  margin: 8px 0 12px;
}
.guest__intro p { margin: 0; color: var(--ink2); max-width: 34em; }
.guest:not(.is-live) .guest__ctl, .guest:not(.is-live) .guest__act { display: none; }

.chips { border: 0; margin: 0 0 12px; padding: 0; min-width: 0; }
.chips legend { padding: 0; margin: 0 0 8px; font: 700 12px/1.3 var(--f-disp); letter-spacing: .14em; color: var(--ink3); }
.chip { display: inline-block; margin: 0 6px 8px 0; position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.chip span {
  display: inline-block; padding: 8px 14px 7px;
  border: 1px solid var(--line2); border-radius: 2px; background: var(--card); color: var(--ink);
  font: 700 15px/1.2 var(--f-disp); letter-spacing: .03em; font-variant-numeric: lining-nums tabular-nums;
  cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.chip:hover span { border-color: var(--acc); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--foil); }
.chip input:focus-visible + span { outline: 2px solid var(--acc); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  .chip input:checked + span { background: var(--acc); border-color: var(--acc); color: var(--acc-ink); }
}
.guest__date, .guest__time {
  display: none; vertical-align: top;
  font: 700 15px/1.2 var(--f-disp); color: var(--ink); background: var(--card);
  border: 1px solid var(--line2); border-radius: 2px; padding: 7px 10px; margin: 0 0 8px;
}
.guest.is-date .guest__date, .guest.is-time .guest__time { display: inline-block; }

/* сама ключ-карта: пластик, фольга, магнитная полоса */
.kc {
  width: 100%; max-width: 460px;
  aspect-ratio: 85.6 / 54;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(135deg, #22325C 0%, #15203B 52%, #101830 100%);
  box-shadow: inset 0 0 0 1px rgba(217, 181, 107, .35), 0 18px 32px -24px rgba(21, 32, 59, .6);
  color: var(--foil);
}
@media (prefers-color-scheme: dark) {
  .kc { box-shadow: inset 0 0 0 1px rgba(226, 192, 122, .6), 0 18px 32px -24px rgba(0, 0, 0, .8); }
}
.kc__face { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 14px 20px 14px; }
.kc__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kc__brand { display: flex; align-items: center; gap: 8px; font: 700 13px/1 var(--f-disp); letter-spacing: .14em; color: var(--foil); }
.kc__mk { width: 26px; height: 26px; }
.kc__mk .mk__key { fill: var(--cream); }
.kc__mk .mk__fob { fill: #D9B56B; }
.kc__room {
  font: 700 11px/1 var(--f-disp); letter-spacing: .16em; color: #D9B56B;
  border: 1px solid rgba(217, 181, 107, .6); border-radius: 2px; padding: 5px 8px 4px;
}
.kc__stripe { flex: none; height: 30px; margin: 0 -20px; background: var(--stripe); }
.kc__io { flex: 1; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }
.kc__row dt { font: 700 11px/1.2 var(--f-disp); letter-spacing: .18em; color: rgba(217, 181, 107, .85); }
.kc__row dd { margin: 4px 0 0; display: grid; gap: 2px; }
.kc__row b { font: 700 16px/1.2 var(--f-disp); color: var(--cream); }
.kc__row span { font: 500 24px/1.1 var(--f-disp); color: #D9B56B; font-variant-numeric: lining-nums tabular-nums; }
.kc__row span:empty { display: none; }
.kc__foot { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 700 10px/1.2 var(--f-disp); letter-spacing: .16em; color: rgba(217, 181, 107, .85); }
.kc__foot span + span::before {
  content: ''; display: inline-block; width: 4px; height: 4px; margin: 0 10px 2px -8px;
  background: currentColor; transform: rotate(45deg);
}
.kc.is-new .kc__io { animation: kc-in .45s ease-out; }
@keyframes kc-in { from { opacity: .25; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@media (max-width: 380px) {
  .kc__face { padding: 12px 14px; gap: 8px; }
  .kc__stripe { margin: 0 -14px; height: 24px; }
  .kc__row b { font-size: 14px; }
  .kc__row span { font-size: 20px; }
}

.guest__left {
  margin: 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--brass);
  font-size: 16px; color: var(--ink2); max-width: 34em;
}
.guest__act { display: grid; gap: 8px; justify-items: start; }
.guest__act-x { font-size: 14px; color: var(--ink3); max-width: 30em; }

/* --- SIGNATURE: план трёх суток --------------------------------------------------- */
.plan { background: var(--card); border: 1px solid var(--line2); }
.art .plan { margin: 24px 0; }
.plan__hd {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 16px 10px; border-bottom: 2px solid var(--ink);
}
.plan__cap { font: 700 13px/1.2 var(--f-disp); letter-spacing: .16em; }
.plan__cnt { font: 700 13px/1.2 var(--f-disp); letter-spacing: .06em; color: var(--acc); font-variant-numeric: lining-nums tabular-nums; }
.plan__days { list-style: none; margin: 0; padding: 0; }
.plan__day + .plan__day { border-top: 1px solid var(--line); }
.plan__dh { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 12px 16px 4px; }
.plan__dh b { font: 700 16px/1.3 var(--f-disp); letter-spacing: .04em; }
.plan__dh span { font: 500 14px/1.3 var(--f-disp); color: var(--acc); font-variant-numeric: lining-nums tabular-nums; }
.plan__items { list-style: none; margin: 0; padding: 0 16px 10px; }
.tick { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 6px 0; cursor: pointer; line-height: 1.45; }
.tick input {
  appearance: none; -webkit-appearance: none;
  width: 20px; height: 20px; margin: 2px 0 0;
  border: 1.5px solid var(--ink3); border-radius: 2px; background: var(--bg);
  display: grid; place-content: center; cursor: pointer;
}
.tick input::before {
  content: ''; width: 10px; height: 5px; margin-top: -3px;
  border-left: 2px solid var(--acc-ink); border-bottom: 2px solid var(--acc-ink);
  transform: rotate(-45deg); opacity: 0;
}
.tick input:checked { background: var(--acc); border-color: var(--acc); }
.tick input:checked::before { opacity: 1; }
.tick input:checked + span { color: var(--ink3); text-decoration: line-through; text-decoration-color: var(--line2); }
.tick:hover input { border-color: var(--acc); }
.plan__fine { margin: 0; padding: 10px 16px 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink3); }
.plan__reset {
  font: 700 13px/1.2 var(--f-disp); letter-spacing: .04em; color: var(--acc);
  background: none; border: 0; padding: 0; margin-left: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* --- ГЛАВНАЯ: маршрут трёх дней ------------------------------------------------------
   Та же логика линий, что в полосе проживания: пунктир — время стоит, латунь — идёт. */
.route { padding: 48px 0 56px; border-top: 3px double var(--line2); }
.route__l { list-style: none; margin: 24px 0 0; padding: 0; display: grid; }
.route__i { position: relative; padding: 0 0 24px 28px; border-left: 3px solid var(--brass); }
.route__i:first-child { border-left: 2px dotted var(--ink3); padding-left: 29px; }
.route__i:last-child { border-left: 1px solid var(--line2); padding-left: 30px; padding-bottom: 0; }
.route__i::before {
  content: ''; position: absolute; left: -8px; top: 3px; width: 11px; height: 11px;
  background: var(--brass); transform: rotate(45deg);
}
.route__i:first-child::before { left: -7px; background: var(--bg); border: 2px solid var(--brass); }
.route__i:last-child::before { left: -7px; }
.route__at { display: block; font: 700 13px/1.3 var(--f-disp); letter-spacing: .12em; color: var(--acc); font-variant-numeric: lining-nums tabular-nums; }
.route__t { display: block; margin: 4px 0 6px; font: 700 20px/1.25 var(--f-disp); }
.route__x { display: block; color: var(--ink2); font-size: 16px; line-height: 1.55; }
@media (min-width: 900px) {
  .route__l { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
  .route__i, .route__i:first-child, .route__i:last-child {
    border-left: 0; padding: 20px 0 0; border-top: 3px solid var(--brass);
  }
  .route__i:first-child { border-top: 2px dotted var(--ink3); }
  .route__i:last-child { border-top: 1px solid var(--line2); }
  .route__i::before, .route__i:first-child::before, .route__i:last-child::before { left: 0; top: -8px; }
}

/* --- ГЛАВНАЯ: цена после пробного ---------------------------------------------------- */
.stay-on { display: grid; gap: 24px 56px; padding: 48px 0 56px; border-top: 3px double var(--line2); align-items: start; }
.stay-on__txt p { margin: 0; color: var(--ink2); max-width: 32em; }
@media (min-width: 960px) { .stay-on { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

/* --- фолио цен: счёт гостиницы ---------------------------------------------------- */
.folio { position: relative; background: var(--card); border: 1px solid var(--line2); padding: 18px 20px 20px; }
.folio::before { content: ''; position: absolute; inset: 4px; border: 1px solid var(--line); pointer-events: none; }
.folio > * { position: relative; }
.folio__hd {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px;
  padding-bottom: 10px; border-bottom: 2px solid var(--ink);
}
.folio__cap { font: 700 13px/1.2 var(--f-disp); letter-spacing: .16em; }
.folio__sub { font-size: 14px; color: var(--ink3); }
.folio__l { list-style: none; margin: 0; padding: 0; }
.folio__i {
  display: grid; grid-template-columns: auto minmax(16px, 1fr) auto;
  grid-template-areas: "n dots p" "u u u";
  align-items: baseline; gap: 2px 8px;
  padding: 12px 0 12px; border-bottom: 1px solid var(--line);
}
.folio__n { grid-area: n; font: 700 19px/1.2 var(--f-disp); }
.folio__dots { grid-area: dots; border-bottom: 2px dotted var(--line2); align-self: end; margin-bottom: 6px; }
.folio__p { grid-area: p; font: 700 26px/1.1 var(--f-disp); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.folio__u { grid-area: u; font-size: 14px; color: var(--ink3); }
.folio__fine { margin: 12px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.folio__go { margin-top: 16px; }
.art .folio { margin: 24px 0; }

/* --- ГЛАВНАЯ: вопросы ------------------------------------------------------------ */
.qa { padding: 48px 0 64px; border-top: 3px double var(--line2); }
.qa .faq { margin-top: 24px; }
@media (min-width: 900px) { .qa .faq__i { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px; } }
.qa__back { margin: 32px 0 0; }

/* --- СТАТЬЯ -------------------------------------------------------------------------
   Слева фолио страницы: момент проживания, дата, оглавление. Справа текст. */
.doc { display: grid; gap: 16px; padding: 0 0 64px; }
@media (min-width: 1000px) {
  .doc { grid-template-columns: 15rem minmax(0, 44rem); gap: 64px; align-items: start; }
  .doc__rail { position: sticky; top: 24px; padding-top: 12px; }
}
.doc__rail { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 14px; color: var(--ink3); }
@media (min-width: 1000px) { .doc__rail { display: grid; gap: 12px; align-items: start; } }
.doc__stage {
  display: inline-flex; align-items: baseline; gap: 10px;
  padding: 6px 10px 5px; border: 1px solid var(--line2); background: var(--card);
  font-family: var(--f-disp); letter-spacing: .06em;
}
.doc__stage b { font-size: 15px; color: var(--ink); }
.doc__stage i { font-style: normal; font-size: 13px; color: var(--acc); font-variant-numeric: lining-nums tabular-nums; }
.doc__note { margin: 0; color: var(--ink2); }
.doc__upd { font-family: var(--f-disp); font-size: 13px; letter-spacing: .04em; }
.doc__upd br { display: none; }
@media (min-width: 1000px) { .doc__upd br { display: inline; } }
.doc__toc { display: none; }
@media (min-width: 1000px) {
  .doc__toc { display: block; padding-top: 12px; border-top: 1px solid var(--line); }
  .doc__toc-t { font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: var(--ink3); }
  .doc__toc ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
  .doc__toc a { color: var(--ink2); text-decoration: none; font-size: 15px; line-height: 1.35; }
  .doc__toc a:hover { color: var(--acc); }
}

.art { min-width: 0; }
.art h1 {
  font: 500 clamp(30px, 4.4vw, 46px)/1.08 var(--f-disp);
  margin: 8px 0 16px; text-wrap: balance;
}
.art__lead { font-size: 19px; line-height: 1.55; color: var(--ink2); margin: 0 0 24px; }
@media (min-width: 900px) { .art__lead { font-size: 21px; } }
.art h2 { font: 700 clamp(22px, 2.6vw, 28px)/1.2 var(--f-disp); margin: 48px 0 12px; scroll-margin-top: 16px; }
.art h2::before { content: ''; display: block; width: 32px; height: 2px; background: var(--brass); margin-bottom: 14px; }
.art h3 { font: 700 20px/1.3 var(--f-disp); margin: 32px 0 8px; }
.art p { margin: 0 0 16px; }

.lst { list-style: none; margin: 0 0 20px; padding: 0; }
.lst > li { position: relative; padding-left: 26px; margin: 0 0 8px; }
.lst > li::before {
  content: ''; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px;
  background: var(--brass); transform: rotate(45deg);
}
.lst--n { counter-reset: n; }
.lst--n > li { counter-increment: n; }
.lst--n > li::before {
  content: counter(n); width: auto; height: auto; background: none; transform: none;
  left: 0; top: 0; font: 700 16px/1.6 var(--f-disp); color: var(--acc);
}

/* КОРОТКО */
.ans { margin: 0 0 24px; padding: 16px 20px; background: var(--acc-s); border-left: 4px solid var(--brass); }
.ans__cap { font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: var(--acc); }
.ans__take { margin-left: 10px; font: 700 12px/1.3 var(--f-disp); letter-spacing: .12em; color: var(--ink); }
.ans__txt { margin: 8px 0 0; font-size: 18px; line-height: 1.55; }

/* плашка под лидом */
.nudge {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px;
  margin: 0 0 32px; padding: 12px 16px; background: var(--card); border: 1px solid var(--line2);
}
.nudge__x { margin: 0; font-size: 16px; line-height: 1.45; }

/* журнал проживания по часам */
.sl { margin: 24px 0; padding: 16px 20px 12px; background: var(--card); border: 1px solid var(--line2); }
.sl__cap { font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: var(--acc); }
.sl__list { list-style: none; margin: 12px 0 0; padding: 0; }
.sl__i { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; }
.sl__when { font: 700 16px/1.5 var(--f-disp); font-variant-numeric: lining-nums tabular-nums; padding: 8px 0; }
.sl__what { position: relative; padding: 8px 0 12px 22px; color: var(--ink2); border-left: 3px solid var(--brass); }
.sl__what::before {
  content: ''; position: absolute; left: -8px; top: 14px; width: 11px; height: 11px;
  background: var(--brass); transform: rotate(45deg);
}
.sl__i--wait .sl__what { border-left: 2px dotted var(--ink3); padding-left: 23px; }
.sl__i--wait .sl__what::before { left: -7px; background: var(--card); border: 2px solid var(--brass); }
.sl__i--end .sl__what, .sl__i--pay .sl__what { border-left: 1px solid transparent; padding-left: 24px; }
.sl__i--end .sl__what::before { left: -6px; }
.sl__i--pay .sl__what { border-left-color: var(--line2); }

/* заметка */
.note { margin: 24px 0; padding: 16px 20px; background: var(--card); border: 1px solid var(--line2); }
.note p { margin: 0 0 8px; }
.note p:last-child { margin: 0; }
.note__t { display: block; margin-bottom: 6px; font: 700 17px/1.3 var(--f-disp); }
.note--ok { border-left: 4px solid var(--ok); }
.note--warn { background: var(--warn-s); border-color: var(--warn); }
.note--warn .note__t { color: var(--warn); }

/* ведомость */
.tw { margin: 24px 0; overflow-x: auto; }
.led { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.led caption { text-align: left; padding: 0 0 8px; font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: var(--acc); }
.led thead th {
  text-align: left; padding: 8px 12px 8px 0; border-bottom: 2px solid var(--ink);
  font: 700 13px/1.3 var(--f-disp); letter-spacing: .06em; color: var(--ink2);
}
.led tbody th { text-align: left; padding: 10px 12px 10px 0; font: 700 16px/1.35 var(--f-disp); vertical-align: top; border-bottom: 1px solid var(--line); }
.led td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
@media (max-width: 480px) { .led { font-size: 15px; } }

/* шаги: номер — латунная табличка, как на двери номера */
.steps { list-style: none; counter-reset: st; margin: 24px 0; padding: 0; }
.step { counter-increment: st; position: relative; padding: 0 0 20px 56px; }
.step::before {
  content: counter(st); position: absolute; left: 0; top: -2px;
  width: 38px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brass); color: var(--navy);
  font: 700 17px/1 var(--f-disp); font-variant-numeric: lining-nums;
}
.step::after { content: ''; position: absolute; left: 18px; top: 34px; bottom: 6px; border-left: 1px solid var(--line2); }
.step:last-child::after { display: none; }
.step__t { display: block; margin: 0 0 4px; font: 700 19px/1.35 var(--f-disp); }
.step p { margin: 0 0 8px; }
@media (prefers-color-scheme: dark) { .step::before { color: var(--acc-ink); } }

/* если что-то пошло не так */
.fix { margin: 32px 0; border-top: 2px solid var(--ink); }
.fix__cap { display: block; padding: 10px 0 4px; font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: var(--acc); }
.fix__list { margin: 0; }
.fix__i { display: grid; gap: 4px 24px; padding: 12px 0 14px; border-bottom: 1px solid var(--line); }
@media (min-width: 700px) { .fix__i { grid-template-columns: 13rem 1fr; } }
.fix__i dt { font: 700 17px/1.35 var(--f-disp); }
.fix__i dd { margin: 0; display: grid; gap: 4px; }
.fix__why { color: var(--ink3); font-size: 15px; line-height: 1.5; }
.fix__do { color: var(--ink); }
.fix__do::before { content: '→ '; color: var(--acc); }

/* вопросы */
.faq { border-top: 2px solid var(--ink); margin: 24px 0; }
.faq__i { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.faq__q { margin: 0; font: 700 18px/1.35 var(--f-disp); }
.faq__a p { margin: 0 0 8px; color: var(--ink2); }
.faq__a p:last-child { margin: 0; }

/* призыв: тот же пластик, что у ключ-карты */
.cta {
  margin: 40px 0; padding: 24px;
  background: var(--navy); color: var(--cream);
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(217, 181, 107, .3);
}
.cta__tag { font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: #D9B56B; }
.cta__t { margin: 8px 0; font: 700 24px/1.25 var(--f-disp); color: #FFF8EA; }
.cta__x { margin: 0 0 16px; color: #D6D0C2; }
.cta a:not(.btn) { color: #E6C47C; }
.cta .btn--brass { background: #D9B56B; color: #15203B; }
.cta .btn--brass:hover { background: #E8C98A; color: #15203B; }
@media (prefers-color-scheme: dark) { .cta { background: var(--navy2); box-shadow: inset 0 0 0 1px rgba(226, 192, 122, .5); } }

/* ссылки-строки */
.rows { list-style: none; margin: 24px 0; padding: 0; border-top: 1px solid var(--line2); }
.row {
  display: grid; grid-template-columns: 5.5rem 1fr; grid-template-areas: "idx t" "idx s";
  gap: 2px 16px; padding: 12px 0; border-bottom: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
}
.rows--plain .row { grid-template-columns: 1fr; grid-template-areas: "t" "s"; }
.row__idx { grid-area: idx; padding-top: 3px; font: 700 13px/1.3 var(--f-disp); letter-spacing: .08em; color: var(--acc); }
.row__t { grid-area: t; font: 700 18px/1.3 var(--f-disp); }
.row__s { grid-area: s; font-size: 15px; color: var(--ink3); }
.row:hover .row__t { color: var(--acc); }

/* читать дальше и оценка */
.also { margin: 48px 0 16px; padding-top: 10px; border-top: 2px solid var(--ink); }
.also__cap { font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: var(--ink3); }
.also__l { list-style: none; margin: 8px 0 0; padding: 0; }
.also__l a {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 16px; padding: 10px 0;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
}
.also__l i { font: normal 700 13px/1.6 var(--f-disp); letter-spacing: .08em; color: var(--acc); }
.also__l span { font: 700 17px/1.4 var(--f-disp); }
.also__l a:hover span { color: var(--acc); }
.helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 16px 0 0; color: var(--ink2); font-size: 16px; }
.helpful__q { font-family: var(--f-disp); font-weight: 700; }
.helpful__btns { display: inline-flex; gap: 8px; }
.helpful button {
  font: 700 14px/1 var(--f-disp); letter-spacing: .06em; color: var(--ink);
  background: var(--card); border: 1px solid var(--line2); border-radius: 2px; padding: 8px 16px; cursor: pointer;
}
.helpful button:hover { border-color: var(--acc); color: var(--acc); }
.helpful[data-done] .helpful__btns { display: none; }

/* кадры */
.shot { margin: 24px 0; }
.shot__frame {
  display: grid; place-items: center; min-height: 200px;
  background: var(--paper2); border: 1px dashed var(--line2);
}
.shot__code { font: 700 13px/1 var(--f-disp); letter-spacing: .12em; color: var(--ink3); }
.shot__cap { margin-top: 8px; font-size: 14px; color: var(--ink3); }

/* --- ОПЛАТА ------------------------------------------------------------------------ */
.payp { display: grid; gap: 24px 56px; padding: 0 0 64px; grid-template-areas: "head" "form" "side" "art"; }
.payp__head { grid-area: head; }
.payp__form { grid-area: form; min-width: 0; max-width: 620px; }
.payp__side { grid-area: side; min-width: 0; }
.payp__art { grid-area: art; max-width: 44rem; }
.payp h1 { font: 500 clamp(30px, 4.4vw, 46px)/1.08 var(--f-disp); margin: 8px 0 16px; text-wrap: balance; }
.payp__lead { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink2); max-width: 36em; }
@media (min-width: 1000px) {
  .payp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
    grid-template-areas: "head side" "form side" "art side";
    grid-template-rows: auto auto 1fr;
    align-items: start;
  }
  .payp__side { position: sticky; top: 24px; }
  .payp__lead { font-size: 20px; }
}

/* --- 404 ------------------------------------------------------------------------------ */
.lost { max-width: 44rem; padding: 32px 0 64px; }
.lost__num { display: block; font: 500 96px/1 var(--f-disp); color: var(--brass); font-variant-numeric: lining-nums; }
.lost h1 { font: 500 clamp(30px, 4.4vw, 46px)/1.08 var(--f-disp); margin: 8px 0 16px; }

/* --- ПОДВАЛ: ночной коридор ------------------------------------------------------------ */
.ftr { background: var(--navy); color: #D6D0C2; margin-top: 16px; }
@media (prefers-color-scheme: dark) { .ftr { background: #080D1A; border-top: 1px solid var(--line); } }
.ftr__in {
  max-width: var(--w); margin: 0 auto; padding: 48px var(--gut) 24px;
  display: grid; gap: 32px;
}
@media (min-width: 900px) {
  .ftr__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); column-gap: 56px; }
  .ftr__disc, .ftr__bar { grid-column: 1 / -1; }
}
.ftr__brand { display: grid; gap: 12px; justify-items: start; }
.ftr__mk { width: 44px; height: 44px; }
.ftr__mk .mk__key { fill: var(--cream); }
.ftr__mk .mk__fob { fill: #D9B56B; }
.ftr__name { margin: 0; color: var(--cream); }
.ftr__name .brand__w em { color: #D9B56B; }
.ftr__name .brand__w i { background: #D9B56B; }
.ftr__about { margin: 0; font-size: 15px; color: #B9B3A4; max-width: 26em; }
.ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 24px; }
.ftr__t { font: 700 12px/1.3 var(--f-disp); letter-spacing: .16em; color: #D9B56B; }
.ftr__col ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.ftr a { color: var(--cream); text-decoration: none; }
.ftr a:hover { color: #E6C47C; text-decoration: underline; }
.ftr__disc { margin: 0; padding-top: 20px; border-top: 1px solid rgba(217, 181, 107, .25); font-size: 14px; line-height: 1.6; color: #B9B3A4; }
.ftr__bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  font: 500 13px/1.4 var(--f-disp); letter-spacing: .06em; color: #9C978C; overflow-wrap: anywhere;
}

/* --- нижняя панель для телефона ------------------------------------------------------ */
.gobar[hidden] { display: none; }
.gobar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--navy); color: var(--cream); border-top: 2px solid var(--brass);
  transform: translateY(110%); transition: transform .25s ease-out;
}
.gobar.is-on { transform: none; }
.gobar__in { display: flex; align-items: center; gap: 12px; padding: 10px var(--gut); }
.gobar__x { display: grid; flex: 1; min-width: 0; font-size: 14px; line-height: 1.3; }
.gobar__x b { font-family: var(--f-disp); font-size: 16px; color: #FFF8EA; }
.gobar__x span { color: #B9B3A4; }
.gobar .btn--brass { background: #D9B56B; color: #15203B; padding: 10px 14px; }
.gobar__close { background: none; border: 0; color: #B9B3A4; font-size: 24px; line-height: 1; padding: 4px 6px; cursor: pointer; }
body.has-gobar { padding-bottom: 72px; }
@media (min-width: 861px) { .gobar { display: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}