/* Evershine — вся таблица стилей. Палитра снята по пикселям с фирменного знака
   (чернильная бабочка #1b2b2b, надпись navy #183651), металлы взяты у charger plates
   и отпущены дозированно. Имена классов и переменных живут в _tokens.js, generate.js
   сверяет каждое значение отсюда с ним и валит сборку на расхождении.

   Контраст на тёмных полосах держат семь переменных с хвостом var: inkvar, mistvar,
   linevar, goldvar, kickvar, linkvar, linkhov. Тёмная поверхность переопределяет их
   ОДНИМ правилом для всех потомков, а элементы внутри красятся наследованием. Парных
   правил вида «.тёмное .кикер» тут быть не должно: один и тот же блок стоит и на
   светлом, и на тёмном фоне, и парное правило чинит ровно один элемент, ничего не зная
   о следующем. Проверяется node _contrast.js — он читает не эту таблицу, а фактические
   цвета из браузера, потому что видно человеку то правило, которое победило.

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

:root {
  --evs-navy: #183651;
  --evs-navy-deep: #0f2438;
  --evs-navy-lift: #22496b;
  --evs-ink: #1b2b2b;
  --evs-mist: #5a6b74;
  --evs-linen: #f5f2ec;
  --evs-paper: #ffffff;
  --evs-line: #dde3e6;
  --evs-gold: #b08a3e;
  --evs-rosegold: #b4776b;
  --evs-teal: #1f4e4e;
  --evs-teal-light: #2d6b68;
  --evs-ink-on-dark: #eef3f6;
  --evs-mist-on-dark: #a6bbcb;
  --evs-line-on-dark: #2f4d68;
  --evs-link-on-dark: #cfe0ea;
  /* Золото — два разных цвета, а не один приглушённый. Фирменное #b08a3e годится в
     рамку и в заливку, но НЕ в текст: на льне оно даёт 2.87, на белом 3.21, а звёзды
     рейтинга набраны кеглем 13px и обязаны брать 4.5. Поэтому золото-как-текст живёт
     отдельной парой: тёмная бронза на светлом, бледное шампанское на тёмном. */
  --evs-goldink: #856526;
  --evs-gold-on-dark: #d8c185;
  --evs-inkvar: var(--evs-ink);
  --evs-mistvar: var(--evs-mist);
  --evs-linevar: var(--evs-line);
  --evs-goldvar: var(--evs-goldink);
  --evs-kickvar: var(--evs-teal);
  --evs-linkvar: var(--evs-navy);
  --evs-linkhov: var(--evs-teal);
  /* Шаг отступов сайта, ступень около 1.45. Числа поштучно (0.45 у одного зазора,
     0.5 у соседнего, 1.2 и 1.3 у двух одинаковых на глаз сеток) не только неряшливы:
     они приезжают из образца, по которому собран сайт, и связывают его с соседом
     одним грепом по css. Новые зазоры брать отсюда. */
  --evs-crumb: 0.4rem;
  --evs-sip: 0.6rem;
  --evs-fold: 0.95rem;
  --evs-seat: 1.3rem;
  --evs-aisle: 1.9rem;
  --evs-course: clamp(2.9rem, 6.4vw, 4.5rem);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Yantramanav', system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 400;
  line-height: 1.62;
  color: var(--evs-inkvar);
  background: var(--evs-paper);
}
h1, h2, h3, h4 { font-family: 'Radley', Georgia, serif; line-height: 1.18; color: var(--evs-inkvar); font-weight: 400; }
h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); margin: 0 0 0.5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0 0 0.48em; }
h3 { font-size: 1.18rem; margin: 0 0 0.38em; }
p { margin: 0 0 1em; }
a { color: var(--evs-linkvar); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--evs-linkhov); }
img { max-width: 100%; height: auto; display: block; }
/* тег address взят за смысл, курсив по умолчанию возвращаем */
address { font-style: normal; margin: 0 0 1em; }
table { border-collapse: collapse; width: 100%; }
:focus-visible { outline: 3px solid var(--evs-teal-light); outline-offset: 2px; }

.hallway { width: min(1240px, 100% - 3rem); margin-inline: auto; }
main > section { padding-block: var(--evs-course); }

/* полосы фона: светлый лён и тёмный navy */
.linenband { background: var(--evs-linen); border-block: 1px solid var(--evs-line); }

/* Всё, что тёмное, переключает набор переменных ОДНИМ правилом. Раздавать эти шесть
   строк каждой тёмной поверхности поштучно значит завести четыре копии одного решения:
   разъезжаться будут именно копии, и разъезд увидит не человек, а никто. Свой фон
   каждая поверхность держит сама — тёмные они разной глубины. */
.lightsdown, .goldtrim, .rimset, .lastdance {
  color: var(--evs-inkvar); /* без своего color потомки унаследуют вычисленный на body тёмный */
  --evs-inkvar: var(--evs-ink-on-dark);
  --evs-mistvar: var(--evs-mist-on-dark);
  --evs-linevar: var(--evs-line-on-dark);
  --evs-goldvar: var(--evs-gold-on-dark);
  --evs-kickvar: var(--evs-gold-on-dark);
  --evs-linkvar: var(--evs-link-on-dark);
  --evs-linkhov: var(--evs-paper);
}
.lightsdown { background: var(--evs-navy-deep); }

/* Лид под заголовком секции и вдох перед сеткой — одним правилом на все полосы:
   у каждой секции своё имя, и раздавать им одинаковый отступ поштучно значит
   заводить полтора десятка почти одинаковых объявлений. */
main > section > .hallway > h2 + p { max-width: 44rem; color: var(--evs-mistvar); }
.seatgrid, .spreadout, .tabledrop, .drapecheck, .eventline, .guestwords, .foamdeck, .tableform > div { margin-top: 1.6rem; }

/* полоса самых заслушанных: сетка карточек и подпись над ней */
.showtable .spreadout { margin-top: 1.75rem; }

/* кикер над заголовком секции */
.headband {
  display: block; font-size: 0.78rem; letter-spacing: 0.17em; text-transform: uppercase;
  color: var(--evs-kickvar); font-weight: 500; margin-bottom: 0.75rem;
}

/* ---------- кнопки ---------- */
.fareline, .gladhand a {
  display: inline-block; border: 0; cursor: pointer; text-decoration: none;
  font-family: 'Yantramanav', system-ui, sans-serif; font-weight: 500;
  border-radius: 4px; transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.fareline {
  background: var(--evs-teal); color: #fff;
  padding: 0.66rem 1.5rem; font-size: 0.95rem;
}
.fareline:hover { background: var(--evs-teal-light); color: #fff; }
.gladhand { display: flex; gap: var(--evs-fold); flex-wrap: wrap; margin-top: 1.5rem; }
.gladhand a {
  padding: 0.62rem 1.45rem; font-size: 0.95rem;
  background: var(--evs-teal); color: #fff;
}
.gladhand a:hover { background: var(--evs-teal-light); color: #fff; }
.gladhand a + a { background: transparent; color: var(--evs-inkvar); box-shadow: inset 0 0 0 1px var(--evs-inkvar); }
.gladhand a + a:hover { background: var(--evs-inkvar); color: var(--evs-navy-deep); box-shadow: inset 0 0 0 1px var(--evs-inkvar); }

/* ---------- шапка ---------- */
.headtable { position: sticky; top: 0; z-index: 40; background: var(--evs-paper); border-bottom: 1px solid var(--evs-line); }
.headtable .hallway { display: flex; align-items: center; gap: var(--evs-seat); min-height: 66px; }
/* Знак 276x138, то есть ровно вдвое шире высоты: при 34px надпись выходила 68px в ширину
   и не читалась вовсе — виден был силуэт бабочки и серая полоска под ним. */
.headtable > .hallway > a img { height: 46px; width: auto; }
/* Ряд задаём на UL, а не на NAV: пункты лежат в списке, и у флекса на nav был бы
   один потомок — сам список остался бы блоком и пункты встали столбиком. */
.headtable nav { display: flex; margin-left: auto; align-items: center; }
.headtable nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.05rem; flex-wrap: wrap; align-items: center; }
.headtable nav a { color: var(--evs-ink); text-decoration: none; font-size: 0.9rem; }
.headtable nav a:hover { color: var(--evs-teal); }
.sidedoor { position: absolute; left: -999px; top: 0; background: var(--evs-teal); color: #fff; padding: 0.5rem 1rem; z-index: 60; }
.sidedoor:focus { left: 10px; top: 10px; }

/* ---------- hero ---------- */
.ballroom { background: var(--evs-navy-deep); padding-block: clamp(2.9rem, 6.6vw, 4.6rem) clamp(2.2rem, 5vw, 3.4rem); }
.ballroom > .hallway > p { font-size: 1.1rem; max-width: 38rem; color: var(--evs-mistvar); }
.ballroom h1 { max-width: 20ch; }

/* рейл топ-товаров под текстом hero; на узком экране горизонтальный скролл */
.garlandrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--evs-fold); margin-top: 2.2rem; }
@media (max-width: 940px) {
  .garlandrow { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--evs-sip); }
  .garlandrow > * { flex: 0 0 215px; scroll-snap-align: start; }
}

/* ---------- полоса из четырёх коротких обещаний ---------- */
.setuprow { background: var(--evs-paper); border-bottom: 1px solid var(--evs-line); }
.setuprow .hallway { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--evs-seat); padding-block: 1.35rem; }
.setuprow b { display: block; font-family: 'Radley', Georgia, serif; font-size: 1.06rem; }
.setuprow span { font-size: 0.86rem; color: var(--evs-mistvar); }

/* ---------- чипы поводов ---------- */
.eventline { display: flex; flex-wrap: wrap; gap: var(--evs-sip); }
.eventline a {
  display: inline-block; font-size: 0.88rem; background: var(--evs-paper);
  border: 1px solid var(--evs-line); border-radius: 999px; padding: 0.34rem 1rem;
  color: var(--evs-navy); text-decoration: none;
}
.eventline a:hover { border-color: var(--evs-teal); color: var(--evs-teal); }

/* ---------- сетка категорий ---------- */
.seatgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--evs-seat); }
.seatgrid figure { margin: 0; }
.seatgrid a { display: block; border: 1px solid var(--evs-line); border-radius: 6px; overflow: hidden; text-decoration: none; background: var(--evs-paper); }
.seatgrid img { aspect-ratio: 4 / 3; object-fit: contain; width: 100%; padding: 1.3rem; background: #fff; }
.seatgrid figcaption { padding: 0.8rem 1.05rem 1rem; border-top: 1px solid var(--evs-line); }
.seatgrid figcaption b { display: block; font-family: 'Radley', Georgia, serif; font-size: 1.1rem; color: var(--evs-ink); font-weight: 400; }
.seatgrid figcaption span { font-size: 0.83rem; color: var(--evs-mist); }
.seatgrid a:hover figcaption b { color: var(--evs-teal); }

/* ---------- разрезы по форме и размеру ---------- */
.tabledrop { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--evs-seat); }
.tabledrop a {
  display: block; text-decoration: none; background: var(--evs-paper);
  border: 1px solid var(--evs-line); border-left: 3px solid var(--evs-teal);
  border-radius: 4px; padding: 1.15rem 1.25rem;
}
.tabledrop b { display: block; font-family: 'Radley', Georgia, serif; font-size: 1.16rem; color: var(--evs-ink); margin-bottom: 0.2rem; font-weight: 400; }
.tabledrop span { display: block; font-size: 0.87rem; color: var(--evs-mist); }
.tabledrop a:hover { border-left-color: var(--evs-gold); }
.tabledrop a:hover b { color: var(--evs-teal); }

/* ---------- палитра зала ---------- */
/* Колонки набираются по размеру кружка, а не делением полосы на шесть. При жёстких шести
   колонках ячейка на широком экране выходила 190px, и кружок цвета — тоже 190px: указатель
   размером с фотографию товара, семь оттенков на два экрана. Ширину кружка задаёт потолок
   ниже, а auto-fill сам решает, сколько их встанет в ряд. */
.drapecheck { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: var(--evs-fold); }
.drapecheck a { display: block; text-decoration: none; text-align: center; }
/* кружок цвета: заливку каждому даёт инлайновая переменная --evs-swatch из каталога */
.drapecheck i {
  display: block; width: 100%; max-width: 104px; margin-inline: auto;
  aspect-ratio: 1 / 1; border-radius: 50%;
  background: var(--evs-swatch, var(--evs-linen)); border: 1px solid var(--evs-line);
}
.drapecheck b { display: block; font-size: 0.86rem; color: var(--evs-ink); font-weight: 500; margin-top: 0.5rem; }
.drapecheck span { display: block; font-size: 0.78rem; color: var(--evs-mist); }
.drapecheck a:hover b { color: var(--evs-teal); }

/* ---------- ролик линейки ---------- */
/* Родные 854x480 и есть потолок ширины. Растянуть кадр на всю полосу в 1230 значит
   увеличить его в полтора раза: на месте накрытого стола будет мыло, и заметно это
   именно на видео, где мылит каждый кадр, а не одна картинка.
   Блок прижат влево, а не по центру: левый край совпадает с заголовком и абзацем секции.
   Центрированный ролик дал бы две разные оси на одном экране, и это читается хуже, чем
   короткий правый край у картинки.
   Пропорция задана атрибутами width/height на самом <video>, поэтому aspect-ratio здесь
   не дублируется; заливка нужна на те доли секунды, пока не пришёл постер. */
.playbill figure { margin: 1.6rem 0 0; max-width: 854px; }
.playbill video {
  display: block; width: 100%; height: auto;
  background: var(--evs-navy-deep);
  border: 1px solid var(--evs-linevar); border-radius: 6px;
}
.playbill figcaption { margin-top: var(--evs-fold); font-size: 0.88rem; color: var(--evs-mistvar); }
/* Меру и цвет вводному абзацу секции не задаём: общее правило
   «main > section > .hallway > h2 + p» уже даёт ему 44rem и mistvar. */

/* ---------- карточка товара ---------- */
.spreadout { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--evs-seat); }
.placecard { display: flex; flex-direction: column; background: var(--evs-paper); border: 1px solid var(--evs-linevar); border-radius: 6px; overflow: hidden; min-height: 0; }
.placecard > a { display: block; background: #fff; position: relative; }
/* только фото товара: общий img-селектор раздул бы картинку-надпись на кнопке */
.placecard > a img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; padding: 0.8rem; }
.caseof {
  position: absolute; left: 0.6rem; top: 0.6rem; z-index: 2;
  background: var(--evs-navy); color: #fff; border-radius: 3px;
  font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.16rem 0.5rem;
}
.placecard > div { padding: 0.75rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.32rem; flex: 1; }
.placecard > div > a { color: var(--evs-inkvar); text-decoration: none; font-weight: 500; font-size: 0.93rem; line-height: 1.38; }
.placecard > div > a:hover { color: var(--evs-linkhov); }
.placecard > div > span { font-size: 0.81rem; color: var(--evs-mistvar); }
/* Приподнятая панель светлее полосы вокруг — и это самая светлая тёмная поверхность
   сайта, то есть узкое место контраста: серо-голубой вторичный текст на ней даёт
   меньше, чем на navy-deep. Значение --evs-mist-on-dark подобрано по НЕЙ. */
.lightsdown .placecard { background: var(--evs-navy-lift); border-color: var(--evs-linevar); }
.lightsdown .placecard > a { background: #fff; }
.centerpin { margin-top: auto; display: flex; align-items: center; gap: var(--evs-sip); padding-top: var(--evs-crumb); flex-wrap: wrap; }
.centerpin b { font-size: 1.05rem; color: var(--evs-inkvar); font-weight: 500; }
.confettirow { color: var(--evs-goldvar); font-size: 0.84rem; letter-spacing: 0.05em; }
.confettirow small { color: var(--evs-mistvar); letter-spacing: 0; margin-left: 0.2rem; }
.placecard .fareline { margin: 0 var(--evs-fold) var(--evs-fold); text-align: center; padding: var(--evs-sip) var(--evs-fold); }
.placecard .fareline img { margin-inline: auto; }

/* ---------- промо-дуэт: металлы и арифметика зала ---------- */
/* Плитки тянутся до общей высоты (stretch — умолчание грида), а не обрезаются каждая по
   своему тексту. С align-items:start нижние края расходились ровно на разницу в длине
   абзацев, и читалось это не как решение, а как недосмотр вёрстки. */
.twinplate { display: grid; grid-template-columns: 1fr 1fr; gap: var(--evs-seat); }
.goldtrim, .aislemap { border-radius: 8px; padding: clamp(1.5rem, 3.6vw, 2.4rem); }
.goldtrim { background: var(--evs-navy); }
.aislemap { background: var(--evs-linen); border: 1px solid var(--evs-line); }
/* три кружка металлов в тёмной плитке; заливку каждому даёт --evs-swatch из генератора */
.goldtrim ul { list-style: none; margin: 1.3rem 0 0; padding: 0; display: flex; gap: var(--evs-seat); flex-wrap: wrap; }
.goldtrim li { display: flex; align-items: center; gap: var(--evs-sip); font-size: 0.9rem; }
.goldtrim li i { width: 26px; height: 26px; border-radius: 50%; background: var(--evs-swatch); display: block; }
.aislemap p:last-of-type { margin-bottom: 0; }

/* ---------- столы к упаковке: шаги и таблица ---------- */
.tableform > div { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.tableform ol { list-style: none; counter-reset: seating; margin: 0; padding: 0; display: grid; gap: var(--evs-seat); }
.tableform li { counter-increment: seating; padding-left: 2.9rem; position: relative; }
.tableform li::before {
  content: counter(seating, decimal-leading-zero);
  position: absolute; left: 0; top: 0.06rem;
  font-family: 'Radley', Georgia, serif; font-size: 1.45rem; color: var(--evs-goldvar);
}
.tableform li b { display: block; font-family: 'Radley', Georgia, serif; font-size: 1.1rem; font-weight: 400; }
.tableform li span { font-size: 0.93rem; color: var(--evs-mistvar); }
.tableform table { background: var(--evs-paper); border: 1px solid var(--evs-line); border-radius: 6px; overflow: hidden; }
.tableform th, .tableform td { text-align: left; padding: 0.62rem 0.9rem; border-bottom: 1px solid var(--evs-line); font-size: 0.9rem; }
.tableform th { font-family: 'Radley', Georgia, serif; font-weight: 400; background: var(--evs-navy); color: var(--evs-ink-on-dark); }
.tableform tr:last-child td { border-bottom: 0; }
.tableform td:first-child { font-weight: 500; white-space: nowrap; }

/* ---------- полоса цифр каталога ---------- */
.countdeck .hallway { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--evs-seat); padding-block: 2.2rem; }
.countdeck b { display: block; font-family: 'Radley', Georgia, serif; font-size: 2rem; color: var(--evs-goldvar); }
.countdeck span { font-size: 0.87rem; color: var(--evs-mistvar); }

/* ---------- мастерская: шары и банки ---------- */
.foamdeck { display: grid; grid-template-columns: 1fr 1fr; gap: var(--evs-seat); margin-top: 1.6rem; }
.foamdeck article { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--evs-seat); align-items: center; background: var(--evs-paper); border: 1px solid var(--evs-line); border-radius: 8px; padding: var(--evs-seat); }
.foamdeck figure { margin: 0; background: #fff; border: 1px solid var(--evs-line); border-radius: 6px; padding: var(--evs-fold); }
.foamdeck figure img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; }
.foamdeck h3 { margin-bottom: 0.3rem; }
.foamdeck p { font-size: 0.92rem; color: var(--evs-mist); margin-bottom: var(--evs-sip); }
.foamdeck .centerpin { margin-top: 0; }
.foamdeck .fareline { margin-top: var(--evs-sip); }

/* ---------- длинная заметка о зале ---------- */
/* Мера чтения — правило для СПЛОШНОГО текста, и на него она и надета: строка длиной во всю
   полосу сбивает возврат глаза к началу следующей. Таблице эта мера вредна: в 47rem каждая
   ячейка переносится в две строки («Charger plates and centerpieces», «Drop at the lowest
   point»), а справа стои́т пустая половина экрана. Поэтому меру носят абзацы, заголовки и
   списки, а таблица занимает полосу целиком. */
.hallfacts > h2, .hallfacts > p, .hallfacts > ul { max-width: 47rem; }
.hallfacts table { width: 100%; }
.hallfacts h2 { margin-top: 1.7em; }
/* Отступ выше отбивает заголовок от чужого текста над ним. У первого заголовка блока
   над ним ничего нет, а секции и без того разведены padding-block — отступы сложились
   бы, и между двумя заголовками зияла бы дыра вдвое шире обычного шага страницы. */
.hallfacts > h2:first-child { margin-top: 0; }
.hallfacts table { margin: 1rem 0 1.4rem; background: var(--evs-paper); border: 1px solid var(--evs-line); border-radius: 6px; overflow: hidden; }
.hallfacts th, .hallfacts td { text-align: left; padding: 0.62rem 0.9rem; border-bottom: 1px solid var(--evs-line); font-size: 0.91rem; }
.hallfacts th { font-family: 'Radley', Georgia, serif; font-weight: 400; background: var(--evs-navy); color: var(--evs-ink-on-dark); }
.hallfacts tr:last-child td { border-bottom: 0; }
.hallfacts td:first-child { font-weight: 500; }
.hallfacts ul { padding-left: 1.15rem; }
.hallfacts li { margin-bottom: var(--evs-crumb); }

/* ---------- голоса гостей ---------- */
/* Секция стоит и на главной, где цитат всегда три, и на карточке, где сито оставляет
   одну или две. Сетка на шесть долей плюс quantity query: разметка сама сообщает,
   сколько её, и класс-модификатор под каждый случай заводить не нужно. */
.guestwords { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--evs-seat); }
.guestwords blockquote { grid-column: span 2; margin: 0; background: var(--evs-linen); border-radius: 6px; padding: 1.2rem 1.3rem; }
.guestwords blockquote:first-child:nth-last-child(2),
.guestwords blockquote:first-child:nth-last-child(2) ~ blockquote { grid-column: span 3; }
.guestwords blockquote:only-child { grid-column: 1 / -1; max-width: 44rem; padding: 1.5rem 1.7rem; }
.guestwords blockquote:only-child p { font-size: 1.08rem; line-height: 1.66; }
.guestwords blockquote p { font-size: 0.94rem; margin-bottom: var(--evs-sip); }
.guestwords footer { font-size: 0.84rem; color: var(--evs-mist); }
.guestwords .confettirow { margin-right: var(--evs-crumb); }

/* ---------- замыкающая полоса главной ---------- */
.afterparty { text-align: center; }
.afterparty p { max-width: 38rem; margin-inline: auto; }
.afterparty .gladhand { justify-content: center; }

/* ---------- крошки ---------- */
.paperchain { font-size: 0.83rem; color: var(--evs-mistvar); padding-block: var(--evs-fold); }
.paperchain ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--evs-crumb); }
/* Разделитель наследует цвет крошек и своего не имеет. Раньше он брал цвет рамки —
   1.30 к белому, то есть знака на странице попросту не было и крошки читались одной
   строкой без границ. Рамка и печатаемый знак — разные вещи, хотя оба «неброские». */
.paperchain li + li::before { content: '\203A'; margin-right: 0.34rem; }
.paperchain a { color: var(--evs-mistvar); text-decoration: none; }
.paperchain a:hover { color: var(--evs-linkhov); }

/* ---------- карточка товара: верхний разворот ---------- */
.trestletop { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; padding-block: var(--evs-crumb) var(--evs-course); }
.trestletop figure { margin: 0; background: var(--evs-linen); border: 1px solid var(--evs-line); border-radius: 8px; padding: 1.5rem; position: sticky; top: 84px; }
.trestletop figure img { aspect-ratio: 1 / 1; object-fit: contain; width: 100%; background: #fff; border-radius: 6px; }
/* название набираем шкалой h2 сайта: своего кегля на один заголовок тут не нужно */
.trestletop h1 { font-size: clamp(1.5rem, 3vw, 2.15rem); margin-bottom: 0.3em; }
.trestletop > div > p { font-size: 0.98rem; color: var(--evs-mist); }
.trestletop .centerpin { padding: 0.75rem 0; border-block: 1px solid var(--evs-line); margin-block: var(--evs-fold); }
.trestletop .centerpin b { font-size: 1.5rem; }
.trestletop .centerpin a { color: var(--evs-mist); font-size: 0.84rem; }
.trestletop .fareline { margin-top: var(--evs-fold); }

/* строка «какой стол накроет и до пола ли» */
.tablefall { background: var(--evs-linen); border-left: 3px solid var(--evs-gold); border-radius: 0 4px 4px 0; padding: var(--evs-fold) 1.1rem; margin-bottom: var(--evs-seat); }
.tablefall b { display: block; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--evs-teal); margin-bottom: 0.2rem; font-weight: 500; }
.tablefall span { font-size: 0.95rem; }

/* соседи по семье: цвет и размер упаковки */
.favorrow { display: flex; flex-wrap: wrap; gap: var(--evs-crumb); margin-bottom: var(--evs-seat); }
.favorrow > b { flex: 0 0 100%; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--evs-mist); font-weight: 500; }
.favorrow a, .favorrow em {
  display: inline-block; font-size: 0.85rem; font-style: normal; text-decoration: none;
  border: 1px solid var(--evs-line); border-radius: 4px; padding: 0.22rem 0.7rem; color: var(--evs-navy);
}
.favorrow a:hover { border-color: var(--evs-teal); color: var(--evs-teal); }
.favorrow em { background: var(--evs-navy); border-color: var(--evs-navy); color: #fff; }

/* спецификации списком */
.wipeclean { list-style: none; margin: 0 0 var(--evs-seat); padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); border: 1px solid var(--evs-line); border-radius: 6px; overflow: hidden; }
.wipeclean li { padding: 0.55rem 0.9rem; border-bottom: 1px solid var(--evs-line); font-size: 0.9rem; }
.wipeclean li b { display: block; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--evs-mist); font-weight: 500; }
.wipeclean li:nth-child(odd) { border-right: 1px solid var(--evs-line); }

/* Замыкающая полоса карточки: цена и кнопка там, где человек решает. Своя заливка,
   а не .lightsdown: полоса стоит вплотную к футеру того же семейства, и navy против
   navy-deep разводит их без белого шва. Вертикальный вдох задаёт .hallway внутри,
   поэтому общий padding секции здесь снят — иначе он сложился бы с ним. */
.rimset { background: var(--evs-navy); padding-block: 0; }
.rimset .hallway { display: flex; align-items: center; gap: var(--evs-seat); flex-wrap: wrap; padding-block: var(--evs-aisle); }
.rimset > .hallway > b { font-family: 'Radley', Georgia, serif; font-size: 1.5rem; font-weight: 400; }
/* .centerpin по умолчанию прижат margin-top:auto (это нужно в карточке сетки);
   в полосе-флексе прижим выбил бы цену вниз, поэтому здесь снимаем */
.rimset .centerpin { margin-top: 0; padding-top: 0; }
.rimset .fareline { margin-left: auto; }

/* ---------- подборщик упаковки ---------- */
/* Меры чтения на форме нет — та же ошибка, что была на таблицах .hallfacts: 47rem это правило
   для сплошного текста, а тут переключатели. Форма обрывалась на 775px, а вердикт под ней и
   полка выдачи (.spreadout, сетка в четыре колонки) шли до края в 1230 — три разных правых
   края подряд читаются как недосмотр. Без меры шесть столов и шесть цветов встают по одному
   ряду каждый, и все три блока страницы кончаются на одной линии. */
.hallmap fieldset { border: 1px solid var(--evs-line); border-radius: 6px; padding: 1rem 1.25rem 1.2rem; margin: 0 0 var(--evs-seat); }
.hallmap legend { font-family: 'Radley', Georgia, serif; padding-inline: var(--evs-crumb); }
.hallmap label { display: inline-flex; align-items: center; gap: var(--evs-crumb); margin: 0.3rem var(--evs-seat) 0.3rem 0; font-size: 0.94rem; cursor: pointer; }
.hallmap input[type="number"] { width: 5rem; font: inherit; font-size: 0.94rem; padding: 0.3rem 0.5rem; border: 1px solid var(--evs-line); border-radius: 4px; }
.yieldrow { margin-block: var(--evs-seat); background: var(--evs-linen); border-left: 3px solid var(--evs-teal); border-radius: 0 4px 4px 0; padding: var(--evs-fold) 1.15rem; font-size: 0.97rem; }
.yieldrow b { font-family: 'Radley', Georgia, serif; font-size: 1.15rem; display: block; font-weight: 400; }
.yieldrow p:last-child { margin-bottom: 0; }

/* ---------- сервисные страницы и гайды ---------- */
.notesrack { max-width: 46rem; }
.notesrack h2 { margin-top: 1.7em; }
.notesrack ul { padding-left: 1.15rem; }
.notesrack li { margin-bottom: var(--evs-crumb); }
/* ⚠ Мера держится на текстовых детях, а не на самом .vowsband. Раньше 47rem стояли на
   контейнере, и ряд карточек внутри был заперт в ширину абзаца: четыре колонки в 752px
   дают карточку 170px — вдвое мельче той же карточки на главной и на карточке товара,
   а справа от ряда оставалось полполосы пустоты. Правило «.vowsband .spreadout
   { max-width: none }» это чинить не могло в принципе: потомок не бывает шире родителя,
   так что оно молча не делало ничего и при этом выглядело как решённая задача.
   Текст читается по мере, широкие блоки идут во всю полосу — обычная схема статьи. */
.vowsband { max-width: none; }
.vowsband > :is(h1, h2, h3, p, ul, ol, blockquote, table) { max-width: 47rem; }
.vowsband h2 { margin-top: 1.7em; }
.vowsband > h2:first-child { margin-top: 0; }
.vowsband ul { padding-left: 1.15rem; }
.vowsband li { margin-bottom: var(--evs-crumb); }
.vowsband table { margin: 1rem 0 1.4rem; background: var(--evs-paper); border: 1px solid var(--evs-line); border-radius: 6px; overflow: hidden; }
.vowsband th, .vowsband td { text-align: left; padding: 0.62rem 0.9rem; border-bottom: 1px solid var(--evs-line); font-size: 0.91rem; }
.vowsband th { font-family: 'Radley', Georgia, serif; font-weight: 400; background: var(--evs-navy); color: var(--evs-ink-on-dark); }
.vowsband tr:last-child td { border-bottom: 0; }
/* max-width тут больше не пишем: ряд и так во всю полосу, а мёртвое правило хуже, чем
   его отсутствие — оно читается как сделанная работа. */
.vowsband .spreadout { margin-block: 1.4rem; }

/* ---------- футер ---------- */
.lastdance { background: var(--evs-navy-deep); margin-top: var(--evs-course); }
/* Отступ выше отбивает футер от светлой страницы, но главная и карточка закрываются
   ТЁМНОЙ полосой того же цвета — вдох читался бы белым швом поперёк двух тёмных
   блоков. Снимаем ровно там, где последняя секция тёмная; браузер без :has() просто
   не применит правило и вернётся к прежнему шву, а не сломается. */
main:has(> section:last-child.lightsdown) + .lastdance,
main:has(> section:last-child.rimset) + .lastdance { margin-top: 0; }
.lastdance .hallway { padding-block: 2.6rem 1.5rem; }
.lastdance .hallway > div { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--evs-aisle); margin-bottom: var(--evs-seat); }
.lastdance img { height: 30px; width: auto; margin-bottom: 0.75rem; }
.lastdance b { display: block; font-family: 'Radley', Georgia, serif; font-size: 1rem; margin-bottom: var(--evs-sip); font-weight: 400; }
.lastdance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--evs-crumb); }
.lastdance a { text-decoration: none; font-size: 0.88rem; }
.lastdance address { font-size: 0.85rem; color: var(--evs-mistvar); margin: 0; }
.longtoast { border-top: 1px solid var(--evs-linevar); padding-block: 1.05rem; font-size: 0.81rem; color: var(--evs-mistvar); }
.longtoast p { margin: 0 0 0.28rem; }

/* ---------- узкие экраны ---------- */
@media (max-width: 940px) {
  .spreadout { grid-template-columns: repeat(2, 1fr); }
  .seatgrid { grid-template-columns: repeat(2, 1fr); }
  .tabledrop { grid-template-columns: repeat(2, 1fr); }
  /* .drapecheck здесь больше не переопределяется: auto-fill сам ужимает ряд по ширине полосы */
  .guestwords blockquote { grid-column: span 3; }
  .tableform > div { grid-template-columns: 1fr; }
  .foamdeck { grid-template-columns: 1fr; }
  .twinplate { grid-template-columns: 1fr; }
  .trestletop { grid-template-columns: 1fr; }
  .trestletop figure { position: static; }
  .lastdance .hallway > div { grid-template-columns: 1fr 1fr; }
  .setuprow .hallway, .countdeck .hallway { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .spreadout, .seatgrid, .tabledrop { grid-template-columns: 1fr; }
  .guestwords blockquote { grid-column: 1 / -1; }
  .foamdeck article { grid-template-columns: 1fr; }
  .wipeclean { grid-template-columns: 1fr; }
  .wipeclean li:nth-child(odd) { border-right: 0; }
  .headtable .hallway { flex-wrap: wrap; padding-block: var(--evs-sip); }
  .headtable nav { margin-left: 0; }
  .headtable nav ul { gap: 0.8rem; }
  .rimset .fareline { margin-left: 0; }
}