/* YTONET — таблица стилей.
   ------------------------------------------------------------------------------
   Имена классов и переменных придуманы свои и проверены по 269 соседям
   (node _footprint.js, контроль `price` = 246). Ничего «очевидного» здесь нет
   намеренно: .price, .card, .wrap, .note, .num заняты десятками сайтов.

   ⚠ Шрифты лежат В ЭТОЙ ЖЕ папке и подключаются ГОЛЫМИ именами файлов.
   url(../fonts/…) отсюда даёт молчаливый 404 и системную гарнитуру, причём
   страница выглядит собранной.

   ⚠ Контраст на тёмных полосах чинится ПЕРЕМЕННОЙ, а не парным правилом
   `.nightdeck X`. Главная и карточка чередуют светлые и тёмные полосы, и один и
   тот же блок (кикер, приглушённый текст) со временем оказывается на обоих фонах.
   Парное правило лечит один элемент и ничего не знает о следующем. Поэтому
   .nightdeck переопределяет --ytn-ink, --ytn-kick и --ytn-shade ОДИН раз для всех
   потомков, а числа и подписи красятся inherit, а не константой.

   ⚠⚠ И ровно поэтому ЗАЛИВКУ полосы нельзя брать из переменной, которую эта же
   полоса переопределяет. `.nightdeck { background: var(--ytn-ink); --ytn-ink: свет }`
   читается как «тёмный фон», а красит БУМАГОЙ: var() на элементе разрешается по
   значению, объявленному на нём самом, порядок строк не важен. Все три тёмные
   полосы выходили бумага по бумаге — заголовок главной в 55px давал контраст
   1.00, то есть был невидим (нашёл _tmp/contrast.js, глазами по кадру это
   читается как «секции почему-то нет»). Отсюда разделение ролей:
     --ytn-deep  — тёмная ПОВЕРХНОСТЬ, не переопределяется никогда;
     --ytn-ink   — цвет ТЕКСТА, на тёмной полосе становится светлым;
     --ytn-onink — цвет надписи поверх заливки var(--ytn-ink), переворачивается
                   вместе с ним, чтобы кнопка не пропадала на тёмном фоне.

   ⚠ Не писать последовательность звёздочка-слэш внутри комментария: она закрывает
   комментарий досрочно и молча съедает весь :root, отчего кнопки становятся
   невидимыми.
*/

/* ── шрифты ─────────────────────────────────────────────────────────────── */
@font-face { font-family: 'Neuton'; font-weight: 400; font-style: normal; font-display: swap; src: url(neuton-400.woff2) format('woff2'); }
@font-face { font-family: 'Neuton'; font-weight: 700; font-style: normal; font-display: swap; src: url(neuton-700.woff2) format('woff2'); }
@font-face { font-family: 'Neuton'; font-weight: 800; font-style: normal; font-display: swap; src: url(neuton-800.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu Sans'; font-weight: 400; font-style: normal; font-display: swap; src: url(ubuntu-sans-400.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu Sans'; font-weight: 500; font-style: normal; font-display: swap; src: url(ubuntu-sans-500.woff2) format('woff2'); }
@font-face { font-family: 'Ubuntu Sans'; font-weight: 700; font-style: normal; font-display: swap; src: url(ubuntu-sans-700.woff2) format('woff2'); }

/* ── переменные ─────────────────────────────────────────────────────────────
   Палитра снята с баннера бренда: крыло на закате. Значения кикера и
   приглушённого текста подобраны ПО КОНТРАСТОМЕРУ, а не на глаз:
     --ytn-kick  #96452b по бумаге = 6.2:1
     --ytn-shade #56697a по бумаге = 5.4:1  (а вот --ytn-metal даёт 3.9:1,
        поэтому металл идёт только в рамки и крупный кегль, но не в текст)
     заливка кнопки #a04f34 с бумажной надписью = 5.4:1
*/
:root {
  --ytn-ink: #1d2a35;
  --ytn-deep: #1d2a35;
  --ytn-onink: #fbf8f5;
  --ytn-hull: #41586b;
  --ytn-glow: #a04f34;
  --ytn-paper: #fbf8f5;
  --ytn-mist: #f2e7e1;
  --ytn-metal: #6d8090;
  --ytn-rule: #dcd3cd;
  --ytn-kick: #96452b;
  --ytn-shade: #56697a;
  --ytn-serif: 'Neuton', Georgia, 'Times New Roman', serif;
  --ytn-sans: 'Ubuntu Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
}

/* ── основа ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ytn-paper);
  color: var(--ytn-ink);
  font-family: var(--ytn-sans);
  font-size: 17px;
  line-height: 1.65;
}

img { max-width: 100%; display: block; }

a { color: var(--ytn-kick); }
a:hover { color: var(--ytn-ink); }

h1, h2, h3, h4 {
  font-family: var(--ytn-serif);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -0.005em;
  margin: 0 0 0.55em;
  color: inherit;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem); }
h4 { font-size: 1.08rem; font-weight: 700; }
p { margin: 0 0 1.05em; }

:focus-visible {
  outline: 3px solid var(--ytn-kick);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Контейнер. Форма намеренно НЕ повторяет ходовую в сети
   min(1180px, 100% - 40px): такая запись сама по себе примета. */
.cabinbay {
  width: 92%;
  max-width: 1152px;
  margin-left: auto;
  margin-right: auto;
}

/* ── ссылка к содержимому ───────────────────────────────────────────────── */
.jumpstrap {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 60;
  background: var(--ytn-ink);
  color: var(--ytn-onink);
  padding: 12px 20px;
  font-weight: 700;
  text-decoration: none;
}
.jumpstrap:focus {
  left: 12px;
  top: 12px;
  color: var(--ytn-onink);
}

/* ── шапка ──────────────────────────────────────────────────────────────── */
.mastbar {
  background: var(--ytn-paper);
  border-bottom: 1px solid var(--ytn-rule);
  position: sticky;
  top: 0;
  z-index: 50;
}
.mastbar > .cabinbay {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 74px;
  flex-wrap: wrap;
}
.nametape {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 6px 0;
}
/* ⚠ 152x31 — это ровно пропорция выреза 477x98 из настоящего лого бренда.
   Свои числа здесь сплющивают засечки, и выглядит это не как баг, а как
   «шрифт такой». Менялся вырез — пересчитать и тут, и в generate.js. */
.nametape img { width: 152px; height: 31px; }

.gatelist {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.gatelist a {
  font-family: var(--ytn-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ytn-ink);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 2px solid transparent;
}
.gatelist a:hover { border-bottom-color: var(--ytn-glow); }

/* Раскрытие меню на узком экране — на чекбоксе, без js.
   ⚠ Прятать чекбокс через display:none НЕЛЬЗЯ: снятый с потока элемент не берёт
   фокус, и меню становится недоступным с клавиатуры — а выглядит при этом ровно
   как рабочее, потому что мышью открывается. Убираем его с глаз, оставляя в
   потоке. */
.flapkey {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.flapkey:focus-visible + label { outline: 3px solid var(--ytn-glow); outline-offset: 2px; }
.flapkey + label {
  display: none;
  font-family: var(--ytn-sans);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ytn-ink);
  border: 1px solid var(--ytn-rule);
  border-radius: 3px;
  padding: 9px 14px;
  cursor: pointer;
}

/* ── крошки ─────────────────────────────────────────────────────────────── */
.pathstrap {
  font-size: 0.86rem;
  color: var(--ytn-shade);
  padding: 16px 0 0;
}
.pathstrap ol {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin: 0;
  padding: 0;
}
.pathstrap li + li::before { content: '/'; margin-right: 10px; color: var(--ytn-metal); }
.pathstrap a { color: var(--ytn-shade); text-decoration: none; border-bottom: 1px solid var(--ytn-rule); }
.pathstrap a:hover { color: var(--ytn-kick); }

/* ── полосы ─────────────────────────────────────────────────────────────── */
.deckband { padding: 60px 0; }
.mistband { padding: 60px 0; background: var(--ytn-mist); }
.nightdeck {
  padding: 66px 0;
  background: var(--ytn-deep);
  /* ⚠ Один раз для ВСЕХ потомков. Парные правила `.nightdeck .flightkick`
     чинили бы по одному элементу за инцидент. */
  --ytn-ink: #fbf8f5;
  --ytn-onink: #1d2a35;
  --ytn-kick: #e8a184;
  --ytn-shade: #b8c6d1;
  --ytn-rule: #40525f;
  color: var(--ytn-paper);
}
.nightdeck a { color: var(--ytn-kick); }
.nightdeck a:hover { color: var(--ytn-paper); }

.bandcap { max-width: 44rem; margin-bottom: 34px; }
.bandcap p { color: var(--ytn-shade); margin-bottom: 0; }

.flightkick {
  font-family: var(--ytn-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ytn-kick);
  margin: 0 0 12px;
}
.openpara {
  font-family: var(--ytn-serif);
  font-size: clamp(1.15rem, 1.02rem + 0.5vw, 1.4rem);
  line-height: 1.55;
  color: var(--ytn-shade);
}

/* ── главная: сцена ─────────────────────────────────────────────────────── */
.frontstage {
  background: var(--ytn-deep);
  --ytn-ink: #fbf8f5;
  --ytn-onink: #1d2a35;
  --ytn-kick: #e8a184;
  --ytn-shade: #b8c6d1;
  color: var(--ytn-paper);
  padding: 64px 0 68px;
}
.stageframe {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 48px;
  align-items: center;
}
.stagetext h1 { margin-bottom: 0.4em; }
.stagetext .openpara { margin-bottom: 26px; }
.stageframe figure { margin: 0; }
.stageframe figure img {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #40525f;
}

/* ── чипы «подо что» ────────────────────────────────────────────────────── */
.usechips {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
}
.usechip {
  background: var(--ytn-paper);
  border: 1px solid var(--ytn-rule);
  border-left: 3px solid var(--ytn-glow);
  border-radius: 3px;
  padding: 20px 20px 22px;
}
.usechip a {
  font-family: var(--ytn-serif);
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--ytn-ink);
  text-decoration: none;
  display: block;
  margin-bottom: 6px;
}
.usechip a:hover { color: var(--ytn-kick); }
.usechip p { margin: 0; font-size: 0.94rem; color: var(--ytn-shade); }

/* ── плитки разделов ────────────────────────────────────────────────────── */
.raildeck {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(248px, 1fr));
  gap: 22px;
  margin: 0;
  padding: 0;
}
.railtile {
  position: relative;
  display: flex;
  flex-direction: column;
  /* ⚠ min-height: 0 обязателен: без него флекс-плитка с aspect-ratio внутри
     разъезжается по высоте, и сетка выглядит сломанной. */
  min-height: 0;
  background: var(--ytn-paper);
  border: 1px solid var(--ytn-rule);
  border-radius: 4px;
  overflow: hidden;
}
.railtile > a { text-decoration: none; color: inherit; display: block; }
.railtile .bagshot { border-bottom: 1px solid var(--ytn-rule); }
.railtile h3 { margin: 0 0 6px; font-size: 1.3rem; }
.railtile div { padding: 20px 20px 22px; }
.railtile p { margin: 0; font-size: 0.94rem; color: var(--ytn-shade); }
.tilecount {
  display: inline-block;
  font-family: var(--ytn-sans);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ytn-kick);
  margin-top: 12px;
}

/* ── полоса фактов ──────────────────────────────────────────────────────── */
.plainfacts {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
}
.factcell { border-top: 2px solid var(--ytn-glow); padding-top: 16px; }
.factcell h3 { font-size: 1.16rem; margin-bottom: 6px; }
.factcell p { margin: 0; font-size: 0.95rem; color: var(--ytn-shade); }

/* ── полоса роликов ─────────────────────────────────────────────────────── */
.reeldeck {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(262px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}
.movingtile { min-height: 0; }
/* ⚠ display:block обязателен: строчный <video> оставляет под кадром полоску
   базовой линии, и плитка выглядит съехавшей на пару пикселей.
   aspect-ratio держит место до загрузки постера, поэтому полоса не прыгает.
   Заливка — --ytn-deep, ПОВЕРХНОСТНАЯ переменная: --ytn-ink переопределяется
   на тёмных полосах и однажды покрасил бы кадр бумагой по бумаге. */
.reelpane {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 854 / 480;
  background: var(--ytn-deep);
  border: 1px solid var(--ytn-rule);
  border-radius: 4px;
}
.movingcap { margin: 12px 0 0; font-size: 0.94rem; color: var(--ytn-shade); }

/* ── редакционная полоса ────────────────────────────────────────────────── */
.longshot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: center;
}
.longshot figure { margin: 0; }
.longshot figure img { width: 100%; border-radius: 4px; }

.heartline { max-width: 46rem; }
.heartline p { font-size: 1.1rem; margin-bottom: 0; }

/* ── шаги ───────────────────────────────────────────────────────────────── */
.packsteps {
  list-style: none;
  counter-reset: ytnstep;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 26px;
  margin: 0;
  padding: 0;
}
.packstep { counter-increment: ytnstep; }
.packstep::before {
  content: counter(ytnstep);
  display: block;
  font-family: var(--ytn-serif);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
  color: var(--ytn-kick);
  margin-bottom: 10px;
}
.packstep h3 { font-size: 1.14rem; margin-bottom: 8px; }
.packstep p { margin: 0; font-size: 0.95rem; color: var(--ytn-shade); }

/* ── цифры ──────────────────────────────────────────────────────────────── */
.countrow {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 28px;
  margin: 0;
  padding: 0;
  text-align: center;
}
.countrow li p { margin: 0; font-size: 0.92rem; color: var(--ytn-shade); }
.figurenib {
  display: block;
  font-family: var(--ytn-serif);
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  /* ⚠ inherit, а не константа: полоса цифр стоит и на тёмном, и на светлом. */
  color: inherit;
  margin-bottom: 6px;
}

/* ── цитаты ─────────────────────────────────────────────────────────────── */
.wordsback {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}
.sayscard {
  background: var(--ytn-paper);
  border: 1px solid var(--ytn-rule);
  border-radius: 4px;
  padding: 26px 24px;
}
.sayscard blockquote {
  margin: 0 0 14px;
  font-family: var(--ytn-serif);
  font-size: 1.12rem;
  line-height: 1.5;
}
.sayscard cite {
  font-style: normal;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ytn-kick);
}

/* ── заметка внизу и закрытие ───────────────────────────────────────────── */
.afterword { max-width: 52rem; }
.afterword p { color: var(--ytn-shade); }

.finalboard { text-align: center; max-width: 40rem; margin: 0 auto; }
.finalboard p { color: var(--ytn-shade); margin-bottom: 24px; }

/* ── кнопки ─────────────────────────────────────────────────────────────── */
.buyhatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ytn-glow);
  color: var(--ytn-paper);
  border: 1px solid var(--ytn-glow);
  border-radius: 3px;
  padding: 13px 22px;
  font: inherit;
  cursor: pointer;
  text-decoration: none;
  /* ⚠ Внутри кнопки картинка-надпись. Обёртку button снимать нельзя: клик
     ловится делегатом closest, с голым img всё отваливается молча. */
}
.buyhatch img { width: 137px; height: 18px; }
.buyhatch:hover { background: #8a4229; border-color: #8a4229; }

.buyquiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 3px;
  padding: 12px 22px;
  font-family: var(--ytn-sans);
  font-size: 0.96rem;
  font-weight: 500;
  color: var(--ytn-ink);
  text-decoration: none;
  background: none;
  cursor: pointer;
}
/* Заливка --ytn-ink, надпись --ytn-onink: на тёмной полосе обе переворачиваются
   вместе, поэтому парное правило `.nightdeck .buyquiet:hover` тут не нужно. Оно
   стояло и лечило ровно этот случай по одному предку за инцидент. */
.buyquiet:hover { background: var(--ytn-ink); color: var(--ytn-onink); }

/* ── сетка товаров ──────────────────────────────────────────────────────── */
.baggrid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 26px 22px;
  margin: 0;
  padding: 0;
}
.bagtile {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ytn-paper);
  border: 1px solid var(--ytn-rule);
  border-radius: 4px;
  overflow: hidden;
}
.bagshot {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  overflow: hidden;
}
.bagshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
}
.bagtile > div { padding: 18px 18px 20px; display: flex; flex-direction: column; flex: 1 1 auto; }
.bagname {
  font-family: var(--ytn-serif);
  font-size: 1.14rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 8px;
}
.bagname a { color: var(--ytn-ink); text-decoration: none; }
.bagname a:hover { color: var(--ytn-kick); }
.bagline { margin: 0 0 14px; font-size: 0.9rem; color: var(--ytn-shade); flex: 1 1 auto; }

/* Блок цены. ⚠ Имя .price занято у 153 соседей из 216 — самый частый класс ветки. */
.fareplate {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  font-family: var(--ytn-serif);
  font-size: 1.32rem;
  font-weight: 800;
  color: inherit;
  margin-bottom: 14px;
}
/* Оговорка при цене. ⚠ Своё имя, а не .plateline: тем занят ряд спек-таблицы
   (dt/dd в две колонки с линейкой снизу), и абзац оговорки приезжал бы с чужой
   рамкой. Второй раз, в замыкающей полосе, оговорка НЕ печатается —
   priceBlock(p, true): одна и та же фраза в двадцать слов с разрывом в три
   экрана читается как недосмотр вёрстки. */
.farenote {
  margin: -6px 0 16px;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--ytn-shade);
  max-width: 34rem;
}
.starpip {
  font-family: var(--ytn-sans);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--ytn-shade);
  letter-spacing: 0.02em;
}
.bagtile .buyhatch { width: 100%; }

/* ── раздел-лонгрид ─────────────────────────────────────────────────────── */
.subtypes { display: grid; grid-template-columns: repeat(auto-fit, minmax(262px, 1fr)); gap: 30px; }
.subtypeone h3 { font-size: 1.2rem; margin-bottom: 8px; }
.subtypeone p { margin: 0; font-size: 0.96rem; color: var(--ytn-shade); }

.buildlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; }
.buildlist li { padding-left: 22px; border-left: 3px solid var(--ytn-glow); }
.buildlist h3 { font-size: 1.1rem; margin-bottom: 6px; }
.buildlist p { margin: 0; font-size: 0.96rem; color: var(--ytn-shade); }

.askedlist { display: grid; gap: 26px; max-width: 50rem; }
.askedone h3 { font-size: 1.16rem; margin-bottom: 8px; }
.askedone p { margin: 0 0 0.7em; }
.askedone p:last-child { margin-bottom: 0; color: var(--ytn-shade); }
.askedone strong { font-weight: 700; }

/* ── карточка товара ────────────────────────────────────────────────────── */
.bagstage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 46px;
  align-items: start;
  padding: 34px 0 56px;
}
.heroframe {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #fff;
  border: 1px solid var(--ytn-rule);
  border-radius: 4px;
  overflow: hidden;
}
.heroframe img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 22px;
}
.bagstage h1 { margin-bottom: 0.3em; }
.bagstage .fareplate { font-size: 1.9rem; margin: 18px 0 20px; }

.featgroup { margin-bottom: 30px; }
.featname { font-size: 1.12rem; margin-bottom: 8px; }
.featgroup p { margin: 0; color: var(--ytn-shade); }

.specplate { margin: 0; }
.plateline {
  display: grid;
  grid-template-columns: minmax(150px, 0.4fr) minmax(0, 1fr);
  gap: 10px 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--ytn-rule);
}
.plateline dt { font-weight: 700; font-size: 0.92rem; letter-spacing: 0.02em; }
.plateline dd { margin: 0; color: var(--ytn-shade); font-size: 0.96rem; }

.alsopacked { padding: 56px 0; }

/* Замыкающая полоса «цена и кнопка». Её ставят 8% соседей, то есть пользы
   много, а футпринта нет: типовая карточка ветки кончается рядом чужих вещей,
   и кнопка на читаемую остаётся где-то наверху.
   ⚠ Оговорку при цене второй раз НЕ печатать: та же фраза в двадцать слов
   с разрывом в три экрана читается как недосмотр вёрстки. */
.lastprice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  flex-wrap: wrap;
}
.lastprice .fareplate { margin-bottom: 0; font-size: 1.7rem; }

/* ── подборщик ──────────────────────────────────────────────────────────── */
.packpick { max-width: 54rem; }
.askstep { margin-bottom: 34px; }
.askstep h2 { font-size: 1.35rem; margin-bottom: 14px; }
.askchoice {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.askchoice button {
  font-family: var(--ytn-sans);
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ytn-ink);
  background: var(--ytn-paper);
  border: 1px solid var(--ytn-metal);
  border-radius: 3px;
  padding: 11px 18px;
  cursor: pointer;
}
.askchoice button:hover { border-color: var(--ytn-glow); color: var(--ytn-kick); }
.askchoice button[aria-pressed='true'] {
  background: var(--ytn-ink);
  border-color: var(--ytn-ink);
  color: var(--ytn-onink);
}
.pickresult { margin-top: 40px; }

/* ── заметки ────────────────────────────────────────────────────────────── */
.notesbay {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
}
.notesbay li {
  background: var(--ytn-paper);
  border: 1px solid var(--ytn-rule);
  border-radius: 4px;
  padding: 26px 24px 28px;
}
.notesbay h3 { font-size: 1.2rem; margin-bottom: 8px; }
.notesbay h3 a { color: var(--ytn-ink); text-decoration: none; }
.notesbay h3 a:hover { color: var(--ytn-kick); }
.notesbay p { margin: 0; font-size: 0.94rem; color: var(--ytn-shade); }

.flightnote { max-width: 46rem; }
.flightnote h2 { margin-top: 1.5em; }
.flightnote ul { padding-left: 20px; }
.flightnote li { margin-bottom: 10px; }

/* ── заголовочная плита служебных страниц ───────────────────────────────── */
.topslab { padding: 44px 0 8px; }
.topslab h1 { margin-bottom: 0.25em; }
.topslab .openpara { max-width: 44rem; margin-bottom: 0; }

/* ── 404 ────────────────────────────────────────────────────────────────── */
.gonepage { text-align: center; padding: 90px 0 100px; max-width: 40rem; margin: 0 auto; }

/* ── подвал ─────────────────────────────────────────────────────────────── */
.tailend {
  background: var(--ytn-deep);
  --ytn-ink: #fbf8f5;
  --ytn-onink: #1d2a35;
  --ytn-kick: #e8a184;
  --ytn-shade: #b8c6d1;
  --ytn-rule: #40525f;
  color: var(--ytn-paper);
  padding: 56px 0 40px;
  margin-top: 0;
}
.tailend a { color: var(--ytn-shade); text-decoration: none; }
.tailend a:hover { color: var(--ytn-paper); }
.tailcols {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 36px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--ytn-rule);
}
.tailcols img { width: 152px; height: 31px; margin-bottom: 16px; }
.tailcols h2 {
  font-family: var(--ytn-sans);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ytn-kick);
  margin-bottom: 14px;
}
.tailcols ul { list-style: none; margin: 0; padding: 0; }
.tailcols li { margin-bottom: 9px; font-size: 0.94rem; }
.tailcols p { font-size: 0.94rem; color: var(--ytn-shade); }

.finenote {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-top: 26px;
  font-size: 0.86rem;
  color: var(--ytn-shade);
}
/* ⚠ Потолок только в px: процент считался бы от родителя и растр поплыл бы. */
.finenote img { max-width: min(380px, 100%); height: auto; }

/* Почтовый адрес: подвал и страница контактов.
   ⚠ Цвет наследуется, а не задаётся. Приглушённый --ytn-shade верен в подвале,
   но на контактах абзац показывает пальцем — «Paper can go to our office
   instead:» — и следом идёт самый бледный текст на странице. Автоаудит контраста
   такое пропускает (5.4:1 законны), видно только глазами на кадре. Наследование
   даёт в каждой полосе тон её собственного текста.
   ⚠ font-style: normal обязателен: тег <address> взят за смысл, а браузер по
   умолчанию набирает его курсивом. */
.postslip {
  font-style: normal;
  font-size: 0.94rem;
  line-height: 1.6;
  color: inherit;
  margin: 16px 0 10px;
}
/* В подвале адрес — справка рядом с такой же справкой и держит тон колонки. */
.tailcols .postslip { color: var(--ytn-shade); }

/* ── узкие экраны ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .stageframe, .longshot, .bagstage { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .tailcols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
  .frontstage { padding: 48px 0 52px; }
  .deckband, .mistband, .nightdeck { padding: 46px 0; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .mastbar > .cabinbay { min-height: 64px; padding-top: 10px; padding-bottom: 10px; }
  .flapkey + label { display: inline-block; }
  .gatelist {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding-bottom: 12px;
  }
  /* ⚠ `~ .gatelist` НЕ РАБОТАЕТ: список лежит внутри <nav>, а `~` берёт только
     соседей. Селектор молча не совпадал ни разу — меню не раскрывалось ни на
     одной странице, и по кадру это неотличимо от свёрнутого меню (нашёл
     _tmp/menu.js нажатием, а не осмотром). Идём через сам <nav>. */
  .mastbar nav { width: 100%; }
  .flapkey:checked ~ nav .gatelist { display: flex; }
  .gatelist li { width: 100%; border-top: 1px solid var(--ytn-rule); }
  .gatelist a { display: block; padding: 12px 0; border-bottom: none; }
  .baggrid { grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 20px 14px; }
  .bagtile > div { padding: 14px 14px 16px; }
  .bagname { font-size: 1rem; }
  .lastprice { flex-direction: column; align-items: flex-start; gap: 16px; }
  .plateline { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 0; }
}

@media (max-width: 460px) {
  .tailcols { grid-template-columns: minmax(0, 1fr); }
  .baggrid { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}