/* shelf.css — Ingenuity nursery shelf.
   Имена классов и переменных заявлены в _tokens.js и проверены _fpnew.js по 253 соседям.
   Шрифты лежат в ОДНОЙ папке с этим файлом и подключаются голыми именами: url(..)
   с подъёмом на уровень выше даёт молчаливый 404 и системный шрифт.

   Контраст чиним ПЕРЕМЕННОЙ, а не парным правилом. Кикер, приглушённый текст и линии
   живут и на кремовом, и на тёмном фоне; тёмная полоса переопределяет переменные один
   раз для всех потомков, а не по элементу. Числа и подписи внутри красятся inherit. */

@font-face {
  font-family: 'Esteban';
  src: url('esteban-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cambay';
  src: url('cambay-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cambay';
  src: url('cambay-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --ing-ink: #2e2620;
  --ing-paper: #fbfaf8;
  --ing-tint: #eef6f0;
  --ing-mint: #77dca3;
  --ing-mintsoft: #c9eeda;
  --ing-mintdeep: #1f7a4d;
  --ing-gold: #d7a84c;
  --ing-golddeep: #7d5a10;
  --ing-band: #2b3a33;
  --ing-photobg: #f2eee9;

  /* переопределяемые тёмной полосой */
  --ing-fg: #2e2620;
  --ing-bg: #fbfaf8;
  --ing-dim: #5f574d;
  --ing-kick: #1f7a4d;
  --ing-line: #e3ded5;
  --ing-star: #7d5a10;
  --ing-link: #1f7a4d;
  --ing-linkon: #2e2620;

  --ing-display: 'Esteban', Georgia, 'Times New Roman', serif;
  --ing-text: 'Cambay', 'Segoe UI', Arial, sans-serif;
  --ing-hold: min(69rem, 100% - 3rem);
  --ing-gap: 1.6rem;
  --ing-round: 14px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--ing-paper);
  color: var(--ing-ink);
  font-family: var(--ing-text);
  font-size: 1.0625rem;
  line-height: 1.68;
}

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

/* ⚠ Цвет ссылки — ПЕРЕМЕННАЯ, а не парное правило `.nightbay a`. Парное правило чинит те
   элементы, о которых знало в день написания, и ничего не знает о следующем: `.nightbay a`
   (0,1,1) перебивал `.navline-cta` (0,1,0) и красил надпись кнопки светлым акцентом полосы —
   а кнопка рисует СВОЮ бледно-мятную заливку и цвет полосы ей не нужен. Выходило 1.24:1,
   мятное по мятному, на одиннадцати страницах из четырнадцати; глазами это выглядит просто
   «приглушённой» кнопкой. Теперь тёмная полоса подменяет `--ing-link` один раз для всех
   потомков, а любой элемент со своей заливкой перебивает базовое `a` (0,0,1) специфичностью
   и остаётся при своём цвете сам собой — правка не понадобится и следующему. */
a { color: var(--ing-link); }
a:hover { color: var(--ing-linkon); }

h1, h2, h3, h4 {
  font-family: var(--ing-display);
  font-weight: 400;
  line-height: 1.18;
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
}
h1 { font-size: clamp(2.05rem, 1.4rem + 2.6vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); }
h3 { font-size: 1.24rem; }
p { margin: 0 0 1rem; }

:focus-visible {
  outline: 3px solid var(--ing-mintdeep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- каркас ---------- */
.shelfwrap { width: var(--ing-hold); margin-inline: auto; }

.jumpshelf {
  position: absolute;
  left: -9999px;
  background: var(--ing-band);
  color: #f3f7f2;
  padding: 0.7rem 1.1rem;
  border-radius: 0 0 var(--ing-round) 0;
  z-index: 60;
}
.jumpshelf:focus { left: 0; top: 0; }

.toprail {
  border-bottom: 1px solid var(--ing-line);
  background: var(--ing-paper);
  position: sticky;
  top: 0;
  z-index: 40;
}
.toprail > .shelfwrap {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 0.7rem 0;
  flex-wrap: wrap;
}
.toprailmark { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: inherit; }
.toprailmark img { width: 42px; height: 42px; border-radius: 10px; }
.toprailmark b { font-family: var(--ing-display); font-size: 1.3rem; font-weight: 400; letter-spacing: 0.01em; }
.toprailmark span { display: block; font-size: 0.72rem; color: var(--ing-dim); line-height: 1.2; }

.navline { margin-left: auto; display: flex; align-items: center; gap: 1.15rem; flex-wrap: wrap; }
/* ⚠ `--ing-fg`, а не `--ing-ink`: у этой ссылки нет своей заливки, она сидит прямо на полосе,
   а полоса бывает и светлой, и тёмной. На корне обе переменные равны `#2e2620`, поэтому разницы
   на светлом фоне нет никакой — и ровно поэтому ошибку не видно, пока полоса не потемнеет.
   Прежнюю правку прятало парное правило `.nightbay a`: пока оно красило все ссылки подряд, эта
   держалась на нём, а не на своём цвете. Убрали правило — вылезло 1.24:1, ink по ink. */
.navline-link {
  text-decoration: none;
  color: var(--ing-fg);
  font-size: 0.95rem;
  padding: 0.25rem 0;
  border-bottom: 2px solid transparent;
}
.navline-link:hover { border-bottom-color: var(--ing-mint); color: var(--ing-fg); }
/* ⚠ Вторая ссылка полосы призыва подчёркнута ВСЕГДА, и цвет ей не назначается. Раньше здесь
   стоял `.navline-link`, у которого подчёркивание появляется только под курсором, а цвет —
   ink абзаца: рядом с залитой пилюлей «Open the picker» читалось подписью к кнопке, а не
   вторым выходом, и на телефоне тем более (наводить там нечем). Цвет не пишем, чтобы
   работало базовое `a { color: var(--ing-link) }` — тогда тёмная полоса подменит переменную
   один раз для всех потомков, как заведено выше, и парное правило не понадобится. */
.navline-aside {
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1px;
  font-size: 0.95rem;
}
.navline-cta {
  text-decoration: none;
  background: var(--ing-mintsoft);
  color: var(--ing-ink);
  border: 1px solid var(--ing-mint);
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  font-size: 0.92rem;
}
.navline-cta:hover { background: var(--ing-mint); color: var(--ing-ink); }

/* ---------- полосы ---------- */
.playpen { padding: 3.1rem 0; }
.playpen-mint { background: var(--ing-tint); }
/* ⚠ Две полосы ОДНОГО цвета подряд складывали отступы: 3.1rem снизу плюс 3.1rem сверху дают
   99px пустоты, и без смены заливки это читается не воздухом, а недогрузившимся блоком. На
   снимке гайда дыра между лидом и первым заголовком выглядела ровно так. Замер `_probe/bandgap.js`
   показал, что порок системный: 11 страниц из 14, и все пары — голая `playpen` за голой.
   ⚠ Писать это как `.playpen + .playpen` НЕЛЬЗЯ: `playpen-mint` и `nightbay` — модификаторы на
   том же классе (сочетаний ровно три, считано грепом по static/), и такое правило схлопнуло бы
   заодно честную границу между полосами РАЗНОГО цвета, где отступ и должен быть двойным.
   Отсюда цепочка `:not()` — она сужает правило ровно до пары «бумага за бумагой». */
.playpen:not(.playpen-mint):not(.nightbay) + .playpen:not(.playpen-mint):not(.nightbay) { padding-top: 0; }
.nightbay {
  background: var(--ing-band);
  --ing-fg: #f3f7f2;
  --ing-bg: #2b3a33;
  --ing-dim: #b7c8bd;
  --ing-kick: #8fe0b4;
  --ing-line: #46584f;
  --ing-star: #e6c579;
  --ing-link: #8fe0b4;
  --ing-linkon: #ffffff;
  color: var(--ing-fg);
}
.nightbay h1, .nightbay h2, .nightbay h3 { color: var(--ing-fg); }

.overword {
  display: block;
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ing-kick);
  margin-bottom: 0.5rem;
}
.baytitle { margin-bottom: 0.4rem; }
.baytitle-lead { color: var(--ing-dim); max-width: 46rem; margin-bottom: 1.6rem; }
/* Заголовки h1–h4 идут без верхнего отступа, и на страницах этапа и сценария, составленных
   блоками по разделам, повторный заголовок вставал ВПЛОТНУЮ к ряду карточек предыдущего блока,
   а от своей сетки его отделяло 0.4rem — при гаттере сетки 1.6rem. Близость читалась наоборот:
   подпись выглядела хвостом верхнего ряда, а не шапкой нижнего.
   ⚠ Правим соседним селектором, а не самим `.baytitle`: на странице раздела заголовок один и
   стоит после вводного абзаца, там верхний отступ не нужен и всё уже правильно. Отступ достаётся
   только тем заголовкам, которые ДЕЙСТВИТЕЛЬНО прерывают сетку. */
.cotdeck + .baytitle { margin-top: 2.6rem; }

/* ---------- главная: открывающая полоса ---------- */
/* Открывающая полоса: текст, а под ним рейл из пяти снимков каталога. Картинки у самого
   блока нет — почему именно, расписано в generate.js над этой секцией. */
.openbay { display: grid; gap: 1.7rem; }
.openbay-text { max-width: 46rem; }
.openbay-text h1 { margin-bottom: 0.9rem; }
.openbay-text p { color: var(--ing-dim); font-size: 1.1rem; }
.openbay-text .navline-cta { display: inline-block; margin-right: 0.6rem; }

/* ⚠ Число колонок НЕ ЗАПИСАНО, а берётся из числа карточек: рейл собирается по одной вещи на
   этап (`T.STAGE_KEYS` в generate.js), и стоявшее здесь `repeat(5, 1fr)` было копией этого
   числа, живущей в другом файле. Этапов четыре — пятая колонка осталась бы пустой, а карточки
   уже, чем надо, и заметить это можно только глазом на кадре. Добавят этап — сетка поедет сама. */
.pickrail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 0.9rem;
  margin-top: 2.4rem;
}

/* ---------- четыре довода ---------- */
.fourgood { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ing-gap); }
.fourgood-cell {
  background: var(--ing-paper);
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.2rem 1.15rem;
}
.fourgood-cell h3 { font-size: 1.08rem; margin-bottom: 0.35rem; }
.fourgood-cell p { margin: 0; font-size: 0.95rem; color: var(--ing-dim); }

/* ---------- этапы ---------- */
.stagecard {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ing-gap);
}
.stagecard > a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ing-bg);
  border: 1px solid var(--ing-line);
  border-left: 5px solid var(--ing-mint);
  border-radius: var(--ing-round);
  padding: 1.15rem 1.1rem;
}
.stagecard > a:hover { border-left-color: var(--ing-mintdeep); background: var(--ing-tint); }
.stagecard h3 { margin-bottom: 0.3rem; font-size: 1.15rem; }
.stagecard p { margin: 0 0 0.6rem; font-size: 0.92rem; color: var(--ing-dim); }
.stagecard em { font-style: normal; font-size: 0.82rem; color: var(--ing-kick); letter-spacing: 0.04em; }

/* ---------- чипы вопросов ---------- */
.askchips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.askchips-chip {
  text-decoration: none;
  color: var(--ing-ink);
  background: var(--ing-paper);
  border: 1px solid var(--ing-mintsoft);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-size: 0.94rem;
}
.askchips-chip:hover { background: var(--ing-mintsoft); color: var(--ing-ink); }

/* ---------- плитки разделов ---------- */
.catplate { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ing-gap); }
.catplate-tile {
  display: flex;
  flex-direction: column;
  min-height: 0;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  overflow: hidden;
  background: var(--ing-paper);
}
.catplate-tile:hover { border-color: var(--ing-mint); }
.catplate-tile > span {
  display: block;
  position: relative;
  aspect-ratio: 4 / 3;
  min-height: 0;
  background: var(--ing-photobg);
}
.catplate-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.7rem; }
.catplate-tile b { display: block; padding: 0.8rem 0.9rem 0.15rem; font-family: var(--ing-display); font-weight: 400; font-size: 1.08rem; }
.catplate-tile i { display: block; padding: 0 0.9rem 0.9rem; font-style: normal; font-size: 0.85rem; color: var(--ing-dim); }

/* ---------- обстоятельства ---------- */
.sceneplate { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.sceneplate > a {
  display: block;
  text-decoration: none;
  color: inherit;
  background: var(--ing-bg);
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.05rem 1rem;
}
.sceneplate > a:hover { background: var(--ing-tint); border-color: var(--ing-mint); }
.sceneplate b { display: block; font-family: var(--ing-display); font-weight: 400; font-size: 1.06rem; margin-bottom: 0.3rem; }
.sceneplate span { font-size: 0.86rem; color: var(--ing-dim); }

/* ---------- карточки товара ---------- */
.cotrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ing-gap); }
.cotdeck { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ing-gap); }

.cotcard,
.cotcard-buy {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--ing-paper);
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  overflow: hidden;
}
.cotcard { text-decoration: none; color: inherit; }
.cotcard:hover { border-color: var(--ing-mint); }
.cotcard:hover .cotcard-name { color: var(--ing-mintdeep); }

.cotframe {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: var(--ing-photobg);
}
.cotpic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 0.8rem; }

.cotcard-name {
  font-family: var(--ing-display);
  font-size: 1.02rem;
  line-height: 1.3;
  margin: 0.85rem 0.9rem 0.4rem;
  color: var(--ing-ink);
}
.cotcard-buy .cotcard-name { text-decoration: none; }
.cotcard-buy .cotcard-name a { color: inherit; text-decoration: none; }
.cotcard-buy .cotcard-name a:hover { color: var(--ing-mintdeep); }
.cotcard p { margin: 0 0.9rem 0.6rem; font-size: 0.88rem; color: var(--ing-dim); }
.cotcard-buy > p { margin: 0 0.9rem 0.6rem; font-size: 0.88rem; color: var(--ing-dim); }

.stageband { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0 0.9rem 0.6rem; }
.stagechip {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  border: 1px solid var(--ing-mintsoft);
  color: var(--ing-mintdeep);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
  background: transparent;
}

.moneyrow {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: auto 0.9rem 0.55rem;
  padding-top: 0.5rem;
}
.moneyrow b { font-size: 1.2rem; font-family: var(--ing-display); font-weight: 400; color: inherit; }
/* ⚠ Боковой отступ 0.9rem стоял здесь по умолчанию — он повторяет поле карточки и под ценой
   уместен. Но эта же оговорка 24 раза стои́т САМОСТОЯТЕЛЬНЫМ абзацем в разделах, на этапах, в
   сценариях и на 404, и там она оказывалась сдвинутой относительно всех соседних абзацев: не
   заголовок, не цитата, просто строка невпопад. Лечили это парным правилом `.cribsheet
   .moneyrow-note { margin-left: 0 }` — то есть чинили ОДНО место из четырёх, а остальные
   продолжали ехать. Отступ теперь достаётся только тем, кто и правда живёт под ценой. */
.moneyrow-note { display: block; font-size: 0.76rem; color: var(--ing-dim); margin: 0 0 0.7rem; }
.moneyrow ~ .moneyrow-note { margin-inline: 0.9rem; }

.ratepair { font-size: 0.83rem; color: var(--ing-star); letter-spacing: 0.02em; }
.ratepair span { color: var(--ing-dim); }

.getbar {
  display: block;
  width: calc(100% - 1.8rem);
  margin: 0 0.9rem 0.9rem;
  border: 1px solid var(--ing-mintdeep);
  background: var(--ing-mintdeep);
  color: #ffffff;
  font-size: 0.94rem;
  font-family: var(--ing-text);
  padding: 0.6rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
}
.getbar:hover { background: #175c3a; border-color: #175c3a; }

/* ---------- сравнительная таблица ---------- */
.shelftable { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.shelftable caption { text-align: left; color: var(--ing-dim); font-size: 0.88rem; padding-bottom: 0.6rem; }
.shelftable th, .shelftable td {
  border: 1px solid var(--ing-line);
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
}
.shelftable thead th { background: var(--ing-tint); font-family: var(--ing-display); font-weight: 400; font-size: 1.02rem; }
.shelftable tbody th { font-weight: 700; width: 12rem; background: transparent; }

/* ---------- цифры ---------- */
.figband { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ing-gap); }
.figband-cell { text-align: center; }
.figband-cell b {
  display: block;
  font-family: var(--ing-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.7rem);
  color: inherit;
  line-height: 1.1;
}
.figband-cell span { font-size: 0.9rem; color: var(--ing-dim); }

/* ---------- спотлайт ---------- */
.onepick { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 2.2rem; align-items: center; }
.onepick > a { display: block; border-radius: var(--ing-round); overflow: hidden; background: var(--ing-photobg); border: 1px solid var(--ing-line); }
.onepick img { width: 100%; height: auto; }
.onepick h3 { font-size: 1.6rem; }
.onepick .moneyrow { margin-left: 0; margin-right: 0; }
.onepick .getbar { width: auto; display: inline-block; margin: 0.4rem 0 0; padding-inline: 1.6rem; }

/* ---------- безопасность: делать и не делать ---------- */
.safetybar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ing-gap); }
.safetybar > div {
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.3rem 1.4rem;
  background: var(--ing-bg);
}
.safetybar h3 { font-size: 1.15rem; }
.safetybar ul { margin: 0; padding-left: 1.1rem; }
.safetybar li { margin-bottom: 0.5rem; font-size: 0.95rem; }
.safetybar li:last-child { margin-bottom: 0; }

/* ---------- миссия, заметка, цитаты, закрытие ---------- */
.missionband p { max-width: 48rem; font-size: 1.08rem; color: var(--ing-fg); margin-bottom: 0; }

.baynote { font-size: 0.98rem; }
.baynote h3 { margin-top: 1.6rem; }
.baynote ul { padding-left: 1.15rem; }
.baynote li { margin-bottom: 0.4rem; }
.baynote .shelftable { margin: 1.4rem 0; }

.quotebox { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ing-gap); }
.quotebox-card {
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.2rem 1.25rem;
  background: var(--ing-bg);
  margin: 0;
}
.quotebox-card p { font-size: 0.96rem; margin-bottom: 0.7rem; }
.quotebox-card footer { font-size: 0.85rem; color: var(--ing-dim); }

.lastbay { text-align: center; }
.lastbay p { max-width: 40rem; margin-inline: auto; color: var(--ing-dim); }

/* ---------- крошки ---------- */
.backpath { font-size: 0.86rem; color: var(--ing-dim); padding: 1rem 0 0; }
.backpath a { color: var(--ing-mintdeep); text-decoration: none; }
.backpath a:hover { text-decoration: underline; }

/* ---------- фасетная полоса ---------- */
.facetbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 1.8rem; }
/* ⚠ Метке нужна КОЛОНКА, иначе ширину ей задаёт собственный текст и каждый ряд начинается со
   своего отступа. На карточке товара рядов три подряд («Section», «Stages it covers», «Answers
   to»), и чипы уезжали на 151 / 214 / 180 — стопка с рваным левым краем. Замер `_probe/facetline.js`:
   116 страниц из 138, ровных не было ни одной, то есть порок системный, а не причуда хаба.
   ⚠ Считать пороком РАЗНОБОЙ КАК ТАКОВОЙ было бы преувеличением: сперва проба дала 133 страницы,
   но в это число попали и категории, где два ряда стоят через пол-экрана и в одном взгляде не
   сравниваются. После добавления вертикали 17 таких отделились — там правка не нужна, и длинная
   вводная фраза «Or start from what the child does now:» законно остаётся шире колонки.
   8rem берётся из замера: самая широкая короткая метка занимала 120px, это её потолок с запасом. */
.facetbar > span { min-width: 8rem; }
.facetbar a {
  text-decoration: none;
  font-size: 0.9rem;
  color: var(--ing-ink);
  border: 1px solid var(--ing-line);
  background: var(--ing-paper);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
}
.facetbar a:hover { border-color: var(--ing-mint); background: var(--ing-tint); }
.facetbar a[aria-current] { background: var(--ing-mintsoft); border-color: var(--ing-mint); }

/* ---------- разворот товара ---------- */
.cribsheet { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 2.4rem; align-items: start; padding-top: 1.4rem; }
.cribsheet-art { border: 1px solid var(--ing-line); border-radius: var(--ing-round); background: var(--ing-photobg); overflow: hidden; }
.cribsheet-art img { width: 100%; height: auto; }
.cribsheet h1 { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.5rem); }
.cribsheet .moneyrow { margin-left: 0; margin-right: 0; }
/* Разворот товара — не карточка: поля тут нет, и цена с оговоркой встают вровень с текстом.
   ⚠ Было `margin-left: 0` — правое поле в 0.9rem оставалось, и оговорка обрывалась на 14px
   раньше абзаца над собой. Односторонняя правка односторонне и вылечила. */
.cribsheet .moneyrow-note { margin-inline: 0; }
.cribsheet .getbar { width: auto; display: inline-block; margin: 0.5rem 0 0; padding-inline: 1.8rem; }
.cribsheet .stageband { margin-left: 0; margin-right: 0; }

/* Микро-спека карточки: что напечатал производитель.
   ⚠ Правила тут стояли для ТАБЛИЦЫ — `border-collapse`, `.specgrid th`, `.specgrid td`, — а
   разметка это `<dl>` с парами `<div><dt>/<dd>`. Ни один селектор не совпадал, и спека шла
   БЕЗ ОФОРМЛЕНИЯ вообще: браузерный отступ `dd` слева и никаких линеек. На широком кадре это
   выглядело просто как «подписи чуть сдвинуты», на 500px — как сломанная вёрстка.
   ⚠ Проба на стык html/css (раздел 12 _verify.js) такое не ловит и поймать не могла: имя класса
   и в разметке, и в таблице стилей — на месте. Расходятся не имена, а ТЕГИ внутри них, а это
   видно только глазом на кадре либо замером отрисованных габаритов. */
.specgrid { font-size: 0.94rem; margin: 1.4rem 0 2rem; }
.specgrid > div {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 0 0.8rem;
  border-bottom: 1px solid var(--ing-line);
  padding: 0.5rem 0.2rem;
}
.specgrid dt { font-weight: 700; color: var(--ing-dim); }
.specgrid dd { margin: 0; }

.cribpoints { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }

/* ⚠ `.cribfacts` — шапка разворота (кикер, название, чипы этапов, вводка), а НЕ список: здесь
   стояло `padding-left: 1.15rem`, отступ маркированного списка, и вся правая колонка разворота
   ехала вправо на 18px без всякой причины. Имя класса осталось от прежней разметки. */
.cribfacts { margin: 0; }

.cribcandor {
  border: 1px solid var(--ing-line);
  border-left: 5px solid var(--ing-gold);
  border-radius: var(--ing-round);
  padding: 1.15rem 1.3rem;
  background: var(--ing-bg);
}

.shelfguard {
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.2rem 1.35rem;
  background: var(--ing-tint);
  font-size: 0.94rem;
}
/* ⚠ Было `h3`, а в разметке `h2`: подпись «Before the first use» набиралась полным кеглем
   заголовка полосы внутри коробочки на 1.2rem поля — на всех 114 разворотах. */
.shelfguard h2 { font-size: 1.08rem; }
.shelfguard p:last-child { margin-bottom: 0; }

/* ⚠ Ряду «Others in …» сетка не досталась вовсе: класс получил одну строку `margin-top: 0`, и
   четыре карточки встали столбиком во всю ширину — каждая с фотографией в 1100px. Сломанная
   сетка на снимке не выглядит сломанной: это просто очень крупные карточки, одна под другой,
   и на четырёх экранах прокрутки. Пережило сборку, 104 пробы `_verify.js` и первый отсмотр.
   Замер `_probe/lostgrid.js` (контейнер, где ВСЕ дети с картинкой шире 70% родителя): один класс,
   114 страниц — то есть каждая карточка товара на сайте; остальные 190 контейнеров целы. */
.cribrail { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ing-gap); margin-top: 0; }

.cribclose { display: flex; align-items: center; justify-content: space-between; gap: 1.4rem; flex-wrap: wrap; }
.cribclose .moneyrow { margin: 0; padding: 0; }
.cribclose .getbar { width: auto; margin: 0; padding-inline: 1.8rem; }
.cribclose > div:first-child { max-width: 34rem; }

/* ---------- заметки ---------- */
.readcard-hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ing-gap); }
.readcard {
  display: block;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.3rem 1.35rem;
  background: var(--ing-paper);
}
.readcard:hover { border-color: var(--ing-mint); background: var(--ing-tint); }
/* ⚠ Было `h3`, а в плитке `h2`: заголовки хаба заметок шли кеглем заголовка полосы, плитки от
   этого раздувались вдвое и читались как отдельные страницы, а не как список пяти заметок. */
.readcard h2 { font-size: 1.18rem; }
.readcard p { margin: 0; font-size: 0.93rem; color: var(--ing-dim); }

.readcard-page { max-width: 44rem; }
.readcard-page h2 { margin-top: 2rem; }
/* Верхний отступ у заголовка нужен, чтобы оторвать его от ПРЕДЫДУЩЕГО абзаца. У первого
   заголовка статьи предыдущего абзаца нет — он открывает полосу, и 2rem просто прибавляются
   к её собственному отступу. Замер «от текста до текста» (`_probe/bandgap.js`) дал 107px пустоты
   между лидом и первым заголовком на четырёх страницах: лид и статья лежат на одной заливке,
   и такая дыра читается недогрузившимся блоком, а не воздухом. */
.readcard-page > :first-child { margin-top: 0; }
.readcard-page ul { padding-left: 1.15rem; }
.readcard-page li { margin-bottom: 0.45rem; }
.readcard-page .cotrow { grid-template-columns: repeat(2, 1fr); margin: 1.6rem 0; }

/* ---------- подборщик ---------- */
.picklist { display: grid; gap: 1.4rem; }
.picklist fieldset { border: 1px solid var(--ing-line); border-radius: var(--ing-round); padding: 1.1rem 1.2rem; margin: 0; }
.picklist legend { font-family: var(--ing-display); font-size: 1.1rem; padding-inline: 0.4rem; }
.picklist-opt { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.picklist-opt button {
  font-family: var(--ing-text);
  font-size: 0.92rem;
  border: 1px solid var(--ing-line);
  background: var(--ing-paper);
  color: var(--ing-ink);
  border-radius: 999px;
  padding: 0.4rem 1rem;
  cursor: pointer;
}
.picklist-opt button:hover { border-color: var(--ing-mint); background: var(--ing-tint); }
.picklist-opt button[aria-pressed="true"] { background: var(--ing-mintsoft); border-color: var(--ing-mintdeep); }
/* Сноска про цветовые варианты: живёт вплотную к счётчику, потому что объясняет именно
   его число. Отступ снизу отдан ряду карточек, сверху — почти нулевой. */
.picklist-note { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--ing-dim); }
.picklist-out { margin-top: 1.8rem; }
/* ⚠ Этого `<p>` НЕТ ни в одном собранном html: выдачу подборщика верстает браузер, и пустой
   ответ («ничего не подошло под все три сразу») печатает src/desk.js. Любая проверка, читающая
   только static/*.html, объявит правило мёртвым и будет неправа — поэтому проба на мёртвые
   правила отдельно читает исходник клиентского js и исключает такие классы из приговора. */
.picklist-out > p { color: var(--ing-dim); }

/* ---------- почтовый адрес ---------- */
.shelfaddr {
  border: 1px solid var(--ing-line);
  border-radius: var(--ing-round);
  padding: 1.15rem 1.3rem;
  background: var(--ing-bg);
}
.shelfaddr address { font-style: normal; line-height: 1.5; margin-bottom: 0.8rem; }
.shelfaddr p:last-child { margin-bottom: 0; font-size: 0.93rem; color: var(--ing-dim); }

/* ---------- подвал ---------- */
.footshelf {
  background: var(--ing-band);
  color: #f3f7f2;
  --ing-dim: #b7c8bd;
  --ing-line: #46584f;
  margin-top: 0;
  padding: 2.6rem 0 1.8rem;
}
/* ⚠ `margin-top: 0` — не забытый ноль, а решение, и здесь его история, чтобы отступ не вернули.
   Изначально стояло 3.4rem. Подвал залит тем же `--ing-band`, что и `.nightbay`, поэтому там,
   где страница закрывалась тёмной полосой, отступ прорезал между двумя одинаковыми тёмными
   блоками светлую перемычку — читается недоехавшим css, а не воздухом.
   Правку делали дважды, и оба раза она была уже́ и правды:
     1) `.nightbay + .footshelf` — селектор МЁРТВЫЙ: полосы лежат внутри `<main>`, подвал — сосед
        самого `<main>`, соседним селектором они не связаны никогда. Перемычка осталась на месте,
        а в таблице появилась строка, которая её якобы чинит;
     2) `#shelfmain:has(> section:last-of-type.nightbay)` — селектор живой, но гасил отступ только
        за ТЁМНОЙ полосой. За мятной светлая щель уцелела и нашлась глазами на снимке хаба гайдов,
        уже после того как проба отрапортовала успех: проба спрашивала ровно то, что чинили.
   Тогда посчитали, чем страницы закрываются на самом деле (`_probe/lastband.js`, все 147 файлов):
   146 тёмных, 1 мятная, бумажных НОЛЬ. То есть случай, ради которого отступ и был нужен —
   воздух того же цвета за бумажной полосой, — на этом сайте не встречается вовсе, и условное
   правило под него было бы третьим мёртвым селектором подряд. Отступа нет ни за какой полосой:
   цветная полоса стыкуется с подвалом встык, и это единственный вид стыка, который тут бывает. */
.footshelf a { color: #d8ece0; text-decoration: none; }
.footshelf a:hover { color: #ffffff; text-decoration: underline; }
.footshelf > .shelfwrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1.2fr; gap: 2rem; }
.footshelf-col h4 { font-size: 1rem; margin-bottom: 0.6rem; color: #f3f7f2; }
.footshelf-col ul { list-style: none; margin: 0; padding: 0; }
.footshelf-col li { margin-bottom: 0.35rem; font-size: 0.92rem; }
.footshelf-col address { font-style: normal; font-size: 0.9rem; color: var(--ing-dim); line-height: 1.5; }
.footshelf-col p { font-size: 0.9rem; color: var(--ing-dim); }
.noteslip {
  /* ⚠ Полоса лежит в СЕТКЕ подвала (.shelfwrap — четыре колонки), а не под ней, и без этой
     строки занимала первую колонку: 1.3fr от 1008px = 291px. Черта border-top тянулась на
     треть подвала, а растр оговорки ужимался до ×0.766 вместе с текстом внутри себя.
     Выглядело это не как поломка вёрстки, а как «мелкий шрифт» — потому и жило. */
  grid-column: 1 / -1;
  border-top: 1px solid var(--ing-line);
  margin-top: 2rem;
  padding-top: 1.2rem;
  font-size: 0.85rem;
  color: var(--ing-dim);
  display: flex;
  justify-content: space-between;
  gap: 1.4rem;
  flex-wrap: wrap;
  align-items: flex-start;
}
/* ⚠ Без opacity намеренно. Оговорка — растр, и лежит он рядом с абзацем того же кегля и того
   же цвета (--ing-dim подвала = NOTE_INK в _mk-art.js). Прозрачность делает картинку бледнее
   соседнего текста, и пара читается как сбой отрисовки: 0.85 давала 5.44:1 против 6.84:1 у
   соседа. Порог WCAG при этом проходил — то есть проба контраста молчала: она читает
   объявленные цвета и внутрь картинки не смотрит (замер — _probe/opacity.js). */
/* ⚠ flex-shrink: 0 — не украшение. .noteslip это флекс-ряд, и растр в нём ужимался соседним
   абзацем до 291px из 380 (×0.766): весь текст ВНУТРИ картинки уезжал до 11px против 13.6 у
   соседа. Ужимать здесь надо текст — он перетекает даром, — а не картинку, которую браузер
   пересэмплит. max-width всё ещё держит её в берегах на узком экране. */
.footshelf-pic { flex-shrink: 0; max-width: min(380px, 100%); height: auto; }

/* ---------- узкие экраны ---------- */
@media (max-width: 900px) {
  .openbay, .onepick, .cribsheet, .safetybar { grid-template-columns: 1fr; }
  .fourgood, .catplate, .cotrow, .cribrail, .stagecard { grid-template-columns: repeat(2, 1fr); }
  .cotdeck, .quotebox, .readcard-hub { grid-template-columns: repeat(2, 1fr); }
  .sceneplate { grid-template-columns: repeat(2, 1fr); }
  .figband { grid-template-columns: repeat(2, 1fr); }
  .footshelf > .shelfwrap { grid-template-columns: 1fr 1fr; }
  /* На узком рейл едет горизонтальной прокруткой; число колонок здесь тоже не записано —
     `grid-auto-columns` наследуется от правила выше, тут задаётся только минимум ширины. */
  /* ⚠ Минимум был 9rem, и на 500px все четыре карточки влезали в экран целиком — то есть рейл
     переставал быть рейлом, а превращался в четыре колонки по 144px. В такой ширине «4.8 out of 5 ·
     27,831 ratings» ломается на четыре строки, а название на пять. 13rem режет по живому: две
     карточки читаются, третья видна краем и говорит, что список продолжается вбок. */
  .pickrail { grid-auto-columns: minmax(13rem, 1fr); overflow-x: auto; padding-bottom: 0.6rem; }
  .cribsheet-art { max-width: 26rem; }
  .onepick > a { max-width: 22rem; }
}

@media (max-width: 560px) {
  body { font-size: 1rem; }
  .playpen { padding: 2.3rem 0; }
  .fourgood, .catplate, .cotrow, .cribrail, .cotdeck, .quotebox, .readcard-hub,
  .stagecard, .sceneplate, .figband { grid-template-columns: 1fr; }
  .footshelf > .shelfwrap { grid-template-columns: 1fr; }
  .navline { gap: 0.8rem; font-size: 0.9rem; }
  .shelftable tbody th { width: auto; }
  /* ⚠ caption в этот список входит обязательно. Стоит таблице стать display:block, как
     подпись со своим display:table-caption остаётся единственной табличной частью, браузер
     заворачивает её в анонимную таблицу, а та жмётся по содержимому — подпись выходит
     столбиком по одному слову в строке. Поймано глазами на index-500-p11. */
  .shelftable, .shelftable caption, .shelftable tbody, .shelftable tr,
  .shelftable td, .shelftable th { display: block; }
  .shelftable thead { display: none; }
  .shelftable tbody th { background: var(--ing-tint); }
  .shelftable td::before { content: attr(data-col) ': '; font-weight: 700; color: var(--ing-dim); }
  .cribpoints { grid-template-columns: 1fr; }
  .readcard-page .cotrow { grid-template-columns: 1fr; }
}