/* sheet.css — единственная таблица стилей Maliton.
 *
 * Имена классов и переменных заведены в _tokens.js и проверены по дереву соседей; здесь они
 * стоят литералами, потому что css генератор не собирает, а копирует. Расхождение имени тут и
 * там молчаливо: страница соберётся, разметка будет верной, а оформления не будет вовсе —
 * поэтому сходимость сторожит отдельная проба в _verify.js, а не внимательность.
 *
 * Контраст на тёмных полосах чинится ПЕРЕМЕННОЙ, а не парным правилом вида .duskrow .topword.
 * Один и тот же кикер, цена и подпись живут и на светлом, и на тёмном; парное правило лечит
 * тот элемент, о котором вспомнили, и ничего не знает о следующем. Тёмная полоса и подвал
 * переопределяют --mal-fg / --mal-soft / --mal-kick / --mal-rule / --mal-link один раз для
 * всех потомков сразу, а элементы печатают color: inherit.
 *
 * ⚠ Звёздочка со слэшем внутри комментария закрывает его досрочно и молча съедает :root
 * целиком — кнопки становятся невидимыми. Поэтому в комментариях этого файла нет ни одного
 * пути с косой чертой.
 */

/* ---------- переменные и основа ---------- */
:root {
  --mal-ink: #2b3040;
  --mal-paper: #fbf9f6;
  --mal-tint: #eef2fa;
  --mal-blue: #4a70c2;
  --mal-bluesoft: #cfdcf3;
  --mal-bluedeep: #2e4f96;
  --mal-pink: #f2a1ab;
  --mal-pinkdeep: #a8465a;
  --mal-band: #23304e;
  --mal-bandtext: #f2f5fb;
  --mal-banddim: #b3c0d8;
  --mal-bandkick: #9fc0f0;
  --mal-line: #e5e1da;
  --mal-dim: #5d6273;
  --mal-photobg: #f3f0ec;

  /* Роли. Эти пять переопределяет тёмная полоса — и больше ничего переопределять не надо. */
  --mal-fg: var(--mal-ink);
  --mal-soft: var(--mal-dim);
  --mal-kick: var(--mal-bluedeep);
  --mal-rule: var(--mal-line);
  --mal-link: var(--mal-bluedeep);
  --mal-panel: #fff;

  --mal-head: Amaranth, Georgia, serif;
  --mal-body: Mukta, "Segoe UI", system-ui, sans-serif;
  --mal-round: 14px;
  --mal-gap: 22px;
  /* Ширину держит не обёртка, а боковой отступ самой полосы: полосы залиты во всю ширину
     окна, а wrapper внутри каждой из них потребовал бы лишнего div в разметке. Процент здесь
     считается от ширины родителя (у полос это main во всю ширину), а max() не даёт отступу
     уйти в минус на узком экране. */
  --mal-pad: max(1.25rem, (100% - 1140px) / 2);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--mal-paper);
  color: var(--mal-ink);
  font: 400 17px/1.62 var(--mal-body);
  /* Колонка на всю высоту окна ради коротких страниц: у 404 и пары сервисных текст кончается
     на половине экрана, и тёмный подвал без этого висит посреди окна с бумагой под собой. */
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

h1, h2, h3 {
  font-family: var(--mal-head);
  font-weight: 700;
  line-height: 1.18;
  margin: 0 0 .5em;
  color: inherit;
}
h1 { font-size: clamp(30px, 4.4vw, 44px); }
h2 { font-size: clamp(24px, 3.2vw, 33px); }
h3 { font-size: 20px; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--mal-link); }
a:hover { color: var(--mal-pinkdeep); }

img { max-width: 100%; }

ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
li { margin-bottom: .4em; }

b, strong { font-weight: 600; }

/* Тег <address> взят за смысл, а вид возвращается руками: браузер набирает его курсивом. */
address { font-style: normal; }

/* ⚠ Обязательно и обязательно с !important. Сужение списка в nook.js — это состояние
   элемента, и ставится оно родным hidden, а не своим классом. У пунктов списка сборов
   своя раскладка через flex, и без !important она перебивает браузерное правило: пункт
   «спрятан» и при этом виден. */
[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--mal-pinkdeep);
  outline-offset: 2px;
}

/* ---------- каркас: шапка, крошки, подвал ---------- */
/* Крошки и main вместе. Раскладку он не держит — полосы отбивают себя сами, — но забирает
   свободную высоту, чтобы подвал прижался к низу окна. */
.tuckwrap { flex: 1 0 auto; }

.jumptuck {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 9;
  background: var(--mal-band);
  color: var(--mal-bandtext);
  padding: 12px 18px;
  border-radius: 0 0 var(--mal-round) 0;
}
.jumptuck:focus {
  left: 0;
  color: var(--mal-bandtext);
}

.topfold {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 28px;
  padding: 15px var(--mal-pad);
  border-bottom: 1px solid var(--mal-line);
  background: var(--mal-paper);
}

.topfold-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}
/* Знак вырезан из фирменного баннера, габарит проставлен генератором из самого файла. */
.topfold-mark img {
  display: block;
  height: auto;
}
.topfold-mark span {
  font-family: var(--mal-head);
  font-size: 14px;
  color: var(--mal-pinkdeep);
  border-left: 1px solid var(--mal-line);
  padding-left: 12px;
}

.nooknav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 20px;
}
.nooknav-link {
  color: var(--mal-ink);
  text-decoration: none;
  font-weight: 500;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nooknav-link:hover,
.nooknav-link[aria-current] {
  color: var(--mal-bluedeep);
  border-bottom-color: var(--mal-pink);
}

/* Залитая пилюля призыва. Одна на группу: вторая рядом читалась бы как выбор из двух
   одинаково важных ходов, а он всегда один. */
.nooknav-cta {
  display: inline-block;
  background: var(--mal-bluedeep);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 999px;
}
.nooknav-cta:hover {
  background: var(--mal-band);
  color: #fff;
}

/* ⚠ Вторая ссылка рядом с пилюлей — отдельным именем и обязательно с подчёркиванием: без
   него она читается подписью к кнопке, а не вторым выходом. */
.nooknav-aside {
  display: inline-block;
  color: var(--mal-link);
  font-weight: 500;
  margin-left: 18px;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.nooknav-aside-row {
  margin-top: 26px;
  text-align: center;
}
.nooknav-aside-row .nooknav-aside { margin-left: 0; }

.walkback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 1140px;
  margin: 18px auto 0;
  padding: 0 1.25rem;
  font-size: 15px;
  color: var(--mal-dim);
}
.walkback a { color: var(--mal-dim); }
.walkback i { color: var(--mal-line); font-style: normal; }
.walkback span { color: var(--mal-ink); }

.footnook {
  --mal-fg: var(--mal-bandtext);
  --mal-soft: var(--mal-banddim);
  --mal-kick: var(--mal-bandkick);
  --mal-rule: rgba(255, 255, 255, .16);
  --mal-link: var(--mal-bandkick);
  background: var(--mal-band);
  color: var(--mal-fg);
  padding: 48px var(--mal-pad) 34px;
  display: grid;
  gap: 30px;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  align-items: start;
}
.footnook a { color: var(--mal-link); }
.footnook h3 {
  font-size: 15px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mal-soft);
}
.footnook-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.footnook-col li { margin-bottom: .55em; }
.footnook-col-lead img {
  display: block;
  height: auto;
  margin-bottom: 14px;
}
.footnook-col-lead p { font-size: 15px; }

/* Почтовый адрес и оговорка про него — вплотную, одним куском: адрес без оговорки читается
   как приглашение приехать. */
.deskaddr {
  color: var(--mal-soft);
  font-size: 15px;
}
.deskaddr span {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}

/* Растровая оговорка стоит на всю ширину подвала, отдельной строкой над копирайтом. */
.footnook-pic {
  grid-column: 1 / -1;
  border-top: 1px solid var(--mal-rule);
  padding-top: 22px;
}
.footnook-pic img {
  display: block;
  height: auto;
  max-width: min(380px, 100%);
}

.finetuck {
  grid-column: 1 / -1;
  font-size: 14px;
  color: var(--mal-soft);
}

/* ---------- полосы ----------
   Каждая секция страницы — полоса во всю ширину со своим фоном; ширину текста держит
   боковой отступ, а не обёртка. Три сорта: бумага, промывка, тёмная. */
.rowcase {
  padding: clamp(40px, 5vw, 68px) var(--mal-pad);
  color: var(--mal-fg);
}
.rowcase > * { margin-bottom: var(--mal-gap); }
.rowcase > *:last-child { margin-bottom: 0; }

.rowcase-milk { background: var(--mal-tint); }

/* ⚠ Тёмная полоса переопределяет РОЛИ, а не красит потомков поимённо. Кикер, цена и подписи
   живут и на светлом, и на тёмном, и второй сорт правил для них разъезжается на первой же
   новой секции. */
.duskrow {
  --mal-fg: var(--mal-bandtext);
  --mal-soft: var(--mal-banddim);
  --mal-kick: var(--mal-bandkick);
  --mal-rule: rgba(255, 255, 255, .18);
  --mal-link: var(--mal-bandkick);
  --mal-panel: rgba(255, 255, 255, .07);
  background: var(--mal-band);
}

.topword {
  font-family: var(--mal-head);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mal-kick);
  margin-bottom: 10px;
}

.rowtitle { margin-bottom: 14px; }

.rowtitle-lead {
  font-size: 19px;
  color: var(--mal-soft);
  max-width: 62ch;
  margin-bottom: 30px;
}

/* Замыкающая полоса призыва: то же тёмное поле, но текст по центру и шире воздух. */
.lastfold {
  text-align: center;
  padding-top: clamp(48px, 6vw, 78px);
  padding-bottom: clamp(48px, 6vw, 78px);
}
.lastfold .rowtitle-lead {
  margin-left: auto;
  margin-right: auto;
}
.lastfold .rowtitle { margin-bottom: 18px; }

/* ---------- карточки, цена, кнопка ---------- */
.tuckdeck {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Полный список раздела: то же поле, но плотнее — там ряд длинный и в нём цветовые ряды. */
.tuckdeck-all { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.tuckcard,
.makeplate-tile {
  display: flex;
  flex-direction: column;
  background: var(--mal-panel);
  border: 1px solid var(--mal-rule);
  border-radius: var(--mal-round);
  padding: 12px 12px 16px;
  text-decoration: none;
  color: var(--mal-fg);
}
.tuckcard:hover,
.makeplate-tile:hover {
  border-color: var(--mal-blue);
  color: var(--mal-fg);
}

/* ⚠ .tuckframe — это span. Без display:block ни aspect-ratio, ни position не работают, и
   крупный снимок схлопывается в нулевую высоту (в плитках это прячет блокификация
   grid-элемента, поэтому ловится только на развороте и в spotlight). */
.tuckframe {
  display: block;
  position: relative;
  background: var(--mal-photobg);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.tuckpic {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.tuckcard-name {
  display: block;
  font-family: var(--mal-head);
  font-size: 17px;
  line-height: 1.3;
  margin: 14px 0 8px;
}

/* Ярлык счёта: «6 в упаковке», «90 L», размер раздела. В рамке снимка он ложится на угол,
   в строке ярлыков карточки стоит обычной пилюлей. */
.countpill {
  display: inline-block;
  background: var(--mal-bluesoft);
  color: var(--mal-bluedeep);
  font-size: 13px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.tuckframe .countpill {
  position: absolute;
  left: 8px;
  top: 8px;
  background: rgba(255, 255, 255, .92);
}
.countpill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.starpair {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--mal-soft);
}
.starpair b {
  font-family: var(--mal-head);
  font-size: 17px;
  color: var(--mal-pinkdeep);
}
.duskrow .starpair b { color: var(--mal-pink); }

.moneyfold {
  display: block;
  margin: auto 0 0;
  color: inherit;
}
.moneyfold b {
  font-family: var(--mal-head);
  font-size: 21px;
  font-weight: 700;
}
/* Оговорка о возрасте цены. Печатается ОДИН раз на страницу — второй набор той же фразы
   через три экрана читается как недосмотр вёрстки. */
.moneyfold-note {
  display: block;
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.45;
  color: var(--mal-soft);
  max-width: 46ch;
}

/* Кнопка к партнёру. Клик ловит делегат по data-атрибуту, поэтому это button, а не ссылка:
   адрес шифрован и в разметке его нет. */
.grabbar {
  display: inline-block;
  font: 600 16px/1 var(--mal-body);
  background: var(--mal-pinkdeep);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  cursor: pointer;
}
.grabbar:hover { background: #8d3a4c; }

/* ---------- главная ---------- */
/* Открывающая полоса. Тёмная, как и остальные тёмные полосы, поэтому роли переопределяются
   тем же набором переменных, а не своими цветами. */
.openarms {
  --mal-fg: var(--mal-bandtext);
  --mal-soft: var(--mal-banddim);
  --mal-kick: var(--mal-bandkick);
  --mal-rule: rgba(255, 255, 255, .18);
  --mal-link: var(--mal-bandkick);
  --mal-panel: rgba(255, 255, 255, .07);
  background: var(--mal-band);
  color: var(--mal-fg);
  padding: clamp(44px, 6vw, 76px) var(--mal-pad);
  display: grid;
  gap: 38px;
}
.openarms-text { max-width: 58ch; }
.openarms-text h1 { margin-bottom: 16px; }
.openarms-text .rowtitle-lead { margin-bottom: 26px; }

/* Рейл ходовых вещей. На узком экране уезжает в горизонтальный скролл, а не разворачивается
   в столбик на пять экранов: под обещанием должен остаться хотя бы один поворот страницы. */
.reachrail {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.reachrail .tuckcard-name { font-size: 15px; }
.reachrail .moneyfold b { font-size: 18px; }

/* Чипы-вопросы. Это не разделы: с вопроса в нишу и приходят. */
.wantrow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.wantrow-chip {
  display: inline-block;
  background: var(--mal-panel);
  border: 1px solid var(--mal-rule);
  border-radius: 999px;
  padding: 9px 18px;
  text-decoration: none;
  color: var(--mal-link);
  font-weight: 500;
}
.wantrow-chip:hover {
  background: var(--mal-bluesoft);
  border-color: var(--mal-blue);
  color: var(--mal-bluedeep);
}

/* Четыре коротких обещания. Второго такого ряда на странице нет намеренно. */
.fourhands {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.fourhands-cell {
  border-top: 3px solid var(--mal-pink);
  padding-top: 16px;
}
.fourhands-cell h3 { margin-bottom: 8px; }
.fourhands-cell p {
  color: var(--mal-soft);
  font-size: 16px;
}

/* Разделы. */
.makeplate {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.makeplate-tile .tuckcard-name { margin-bottom: 10px; }
.makeplate-tile .countpill { align-self: flex-start; }

/* Промо-дуэт: два счётчика крупно. */
.twobig {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.twobig-tile {
  display: block;
  background: var(--mal-panel);
  border: 1px solid var(--mal-rule);
  border-radius: var(--mal-round);
  padding: 28px;
  text-decoration: none;
  color: var(--mal-fg);
}
.twobig-tile:hover {
  border-color: var(--mal-bandkick);
  color: var(--mal-fg);
}
.twobig-tile h3 { font-size: 24px; }
.twobig-tile p {
  color: var(--mal-soft);
  margin-bottom: 16px;
}
.twobig-tile span {
  display: inline-block;
  font-weight: 600;
  color: var(--mal-link);
  border-bottom: 2px solid var(--mal-pink);
  padding-bottom: 2px;
}

/* Три шага и справочная таблица рядом. */
.threefolds {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1.15fr;
  align-items: start;
}
.threefolds ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fold;
}
.threefolds li {
  counter-increment: fold;
  padding-left: 52px;
  position: relative;
  margin-bottom: 26px;
}
.threefolds li::before {
  content: counter(fold);
  position: absolute;
  left: 0;
  top: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mal-bluesoft);
  color: var(--mal-bluedeep);
  font-family: var(--mal-head);
  font-size: 19px;
}
.threefolds li p {
  color: var(--mal-soft);
  margin: 0;
}

.tucktable {
  width: 100%;
  border-collapse: collapse;
  font-size: 16px;
}
.tucktable caption {
  text-align: left;
  font-family: var(--mal-head);
  font-size: 18px;
  padding-bottom: 10px;
  color: var(--mal-fg);
}
.tucktable th,
.tucktable td {
  text-align: left;
  padding: 11px 14px;
  border-bottom: 1px solid var(--mal-rule);
  vertical-align: top;
}
.tucktable thead th {
  font-family: var(--mal-head);
  font-size: 15px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mal-soft);
  border-bottom-width: 2px;
}
.tucktable tbody th { font-weight: 500; }
/* ⚠ nowrap здесь обязателен. Ответ таблицы — диапазон из трёх слов («20 to 30»), и в узкой
   колонке на главной он переносился как «20 to» / «30»: единственное число на строке
   разрывалось пополам ровно там, ради чего таблицу и читают. */
.tucktable td b {
  font-family: var(--mal-head);
  font-size: 19px;
  color: var(--mal-pinkdeep);
  white-space: nowrap;
}

/* Полоса цифр. Все четыре считаются из каталога. */
.figurestrip {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  text-align: center;
}
.figurestrip-cell b {
  display: block;
  font-family: var(--mal-head);
  font-size: clamp(32px, 4.5vw, 46px);
  line-height: 1.1;
  color: var(--mal-bandkick);
}
.figurestrip-cell span {
  display: block;
  margin-top: 6px;
  color: var(--mal-soft);
}

.careline {
  display: grid;
  gap: 34px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.careline-cell {
  background: var(--mal-tint);
  border-radius: var(--mal-round);
  padding: 26px;
}
.careline-cell p {
  color: var(--mal-soft);
  margin: 0;
}

/* Один герой крупно. */
.onepicked {
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr 1.2fr;
  align-items: center;
}
.onepicked .tuckframe {
  background: var(--mal-panel);
  border-radius: var(--mal-round);
}
.onepicked h3 { font-size: clamp(24px, 3vw, 31px); }
.onepicked .starpair { margin-top: 14px; }
.onepicked .moneyfold { margin: 10px 0 20px; }
.onepicked .moneyfold b { font-size: 26px; }

/* Уход: что делать и чего не делать. Два столбца, и они спорят друг с другом намеренно. */
.washbar {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.washbar-yes,
.washbar-no {
  border-radius: var(--mal-round);
  padding: 26px 28px;
  border: 1px solid var(--mal-rule);
}
.washbar-yes { background: var(--mal-tint); border-color: var(--mal-bluesoft); }
.washbar-no { background: #fdf1f1; border-color: #f3d3d7; }
.washbar ul {
  margin: 0;
  padding-left: 1.1em;
}
.washbar li { color: var(--mal-soft); }
.washbar-yes h3 { color: var(--mal-bluedeep); }
.washbar-no h3 { color: var(--mal-pinkdeep); }

/* Заметки: три на главной, все шесть на хабе. */
.readslip-hub {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.readslip {
  display: block;
  background: var(--mal-panel);
  border: 1px solid var(--mal-rule);
  border-left: 4px solid var(--mal-pink);
  border-radius: 0 var(--mal-round) var(--mal-round) 0;
  padding: 24px 26px;
  text-decoration: none;
  color: var(--mal-fg);
}
.readslip:hover {
  border-left-color: var(--mal-bluedeep);
  color: var(--mal-fg);
}
.readslip h2,
.readslip h3 { font-size: 21px; }
.readslip p {
  color: var(--mal-soft);
  font-size: 16px;
  margin: 0;
}

/* Длинная заметка внизу и такие же текстовые блоки на счётчиках. */
.roomnote {
  max-width: 74ch;
  color: var(--mal-soft);
}
.roomnote ul { margin-bottom: 1.4em; }
.roomnote .tucktable { margin-top: 1.4em; }

/* ---------- разворот товара ----------
   Верх страницы — не полоса, а собственный блок в main, поэтому боковой отступ он держит сам. */
.foldout {
  padding: clamp(28px, 4vw, 48px) var(--mal-pad) clamp(34px, 4vw, 52px);
  display: grid;
  gap: clamp(28px, 4vw, 52px);
  grid-template-columns: 1fr 1fr;
  align-items: start;
}
.foldout-art {
  background: var(--mal-photobg);
  border-radius: var(--mal-round);
  overflow: hidden;
  aspect-ratio: 1 / 1;
}
.foldout-art .tuckpic {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.tuckfacts h1 { margin-bottom: 14px; }
.tuckfacts .rowtitle-lead {
  font-size: 18px;
  margin-bottom: 18px;
}
.tuckfacts .countpill-row { margin-bottom: 14px; }
.tuckfacts .moneyfold { margin: 12px 0 22px; }
.tuckfacts .moneyfold b { font-size: 28px; }

/* Микро-спека: габарит, объём, счёт в упаковке, материал. Печатается только то, что реально
   есть в каталоге, — пустая строка «Размер: —» хуже отсутствующей. */
.sizegrid {
  margin: 26px 0 0;
  border-top: 1px solid var(--mal-line);
}
.sizegrid > div {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--mal-line);
}
.sizegrid dt {
  color: var(--mal-soft);
  font-size: 15px;
  letter-spacing: .03em;
  text-transform: uppercase;
}
.sizegrid dd {
  margin: 0;
  font-weight: 500;
}

.foldpoints,
.foldcandor {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 92ch;
}
.foldpoints li,
.foldcandor li {
  margin: 0;
  padding-left: 30px;
  position: relative;
  color: var(--mal-soft);
}
.foldpoints li::before,
.foldcandor li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mal-pink);
}
/* Прямой разговор о том, кому вещь не подходит: другой знак, чтобы его не читали как
   ещё один список достоинств. */
.foldcandor li::before {
  background: none;
  border: 2px solid var(--mal-bluedeep);
  top: .5em;
}

.foldquick {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
}
.foldquick a {
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.foldrail {
  display: grid;
  gap: var(--mal-gap);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Замыкающая полоса: цена и кнопка на ТУ вещь, которую читают. Типовая дыра ветки в том, что
   разворот кончается четырьмя кнопками на чужие вещи, а за своей надо листать наверх. */
.foldfinish {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 30px;
}
.foldfinish h2 { margin-bottom: 8px; }
.foldfinish .moneyfold b { font-size: 26px; }

/* ---------- заметки и сервисные страницы ---------- */
.readslip-page {
  max-width: 72ch;
  font-size: 18px;
}
.readslip-page h1 { margin-bottom: 20px; }
.readslip-page h2 {
  font-size: 26px;
  margin-top: 1.6em;
}
.readslip-page .rowtitle-lead {
  font-size: 20px;
  color: var(--mal-ink);
  border-left: 3px solid var(--mal-pink);
  padding-left: 18px;
  max-width: none;
  margin-bottom: 1.6em;
}
.readslip-page li { margin-bottom: .6em; }
.readslip-page .tucktable { margin: 1.6em 0; }
.readslip-page .deskaddr { margin: 1.2em 0; }

/* ---------- два счётчика ----------
   Разметка обоих инструментов настоящая: радио, чекбоксы и полный список пунктов лежат в
   HTML и работают без js. Здесь только вид; ни одно правило ниже не должно быть условием
   работы формы. */
.pickpad {
  background: var(--mal-panel);
  border: 1px solid var(--mal-rule);
  border-radius: var(--mal-round);
  padding: clamp(20px, 3vw, 34px);
}

/* ⚠ min-width у fieldset не косметика. У него собственное правило min-inline-size:
   min-content, и в колонке сетки он отказывается сжиматься уже своего содержимого —
   ряд разъезжается шире экрана, а виноватым выглядит грид. */
.pickpad fieldset {
  border: 0;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.pickpad legend {
  padding: 0;
  font-family: var(--mal-head);
  font-size: 18px;
  margin-bottom: 12px;
}

.pickpad label {
  display: grid;
  grid-template-columns: 20px 1fr;
  gap: 3px 12px;
  align-items: start;
  border: 1px solid var(--mal-line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  cursor: pointer;
}
/* Выбранный вариант виден дважды: точкой в родном контроле и рамкой вокруг всего поля.
   Если :has() почему-то не отработает, точка остаётся — выбор не пропадает. */
.pickpad label:has(:checked) {
  border-color: var(--mal-blue);
  background: var(--mal-tint);
}
.pickpad input {
  width: 18px;
  height: 18px;
  margin: 0;
  align-self: center;
  accent-color: var(--mal-bluedeep);
}
.pickpad label span { font-weight: 500; }
.pickpad label i {
  grid-column: 2;
  font-style: normal;
  font-size: 15px;
  line-height: 1.45;
  color: var(--mal-soft);
}

.mathpad {
  display: grid;
  gap: 26px 24px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.packlist-form {
  display: grid;
  gap: 26px;
}
/* ⚠ У fieldset с display:grid браузер всё равно выносит legend наверх отдельной строкой,
   а не делает его элементом сетки. grid-column здесь на случай движка, который поступит
   иначе: без него подпись села бы в первую колонку, а первый чекбокс уехал во вторую. */
.packlist-form fieldset {
  display: grid;
  gap: 8px 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.packlist-form legend { grid-column: 1 / -1; }
.packlist-form label { margin-bottom: 0; }

/* Ответ. Тёмная плашка с переопределением ролей — тем же набором, что у полос: число тут
   крупное, и его цвет обязан читаться, а не подбираться заново под каждый фон. */
.mathpad-out {
  --mal-fg: var(--mal-bandtext);
  --mal-soft: var(--mal-banddim);
  --mal-kick: var(--mal-bandkick);
  display: block;
  grid-column: 1 / -1;
  background: var(--mal-band);
  color: var(--mal-fg);
  border-radius: var(--mal-round);
  padding: 24px 28px;
}
.mathpad-out b {
  font-family: var(--mal-head);
  font-size: clamp(38px, 6vw, 54px);
  line-height: 1;
  color: var(--mal-kick);
}
.mathpad-out span {
  margin-left: 12px;
  font-size: 19px;
}
/* Объяснение, откуда число. Оно не подпись к цифре, а вторая половина ответа. */
.mathpad-out i {
  display: block;
  margin-top: 12px;
  font-style: normal;
  font-size: 16px;
  color: var(--mal-soft);
  max-width: 62ch;
}

.packlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* ⚠ Вот ради этой строчки в основе стоит [hidden] с !important: у пункта своя раскладка
   через flex, и без !important она перебивает браузерное display:none. Сужение списка тогда
   «срабатывает», а пункты остаются на экране. */
.packlist-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: 0;
  padding: 14px 16px 14px 42px;
  position: relative;
  background: var(--mal-tint);
  border-radius: 10px;
}
/* ⚠ Маркер ЗАЛИТЫЙ, и это не вкусовщина. Пустой квадрат с рамкой — рисунок невыбранного
   чекбокса, а прямо над этим списком стоят шесть настоящих чекбоксов. Пункты списка не
   интерактивны, и обещать пальцу галочку, которой не будет, хуже, чем нарисовать точку. */
.packlist-item::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 1.3em;
  width: 8px;
  height: 8px;
  background: var(--mal-blue);
  border-radius: 2px;
}
.packlist-item span {
  font-size: 15px;
  color: var(--mal-soft);
}

/* ---------- узкий экран ----------
   Два порога и ни одного лишнего. Первый разбирает четырёх- и пятиколонники, второй — всё
   остальное в один столбец. Проверять на 500px: headless уже не умеет 390, и обрезанный
   справа кадр — артефакт снимка, а не поломка вёрстки. */
@media (max-width: 900px) {
  .footnook { grid-template-columns: 1fr 1fr; }

  .tuckdeck,
  .foldrail,
  .fourhands,
  .figurestrip,
  .makeplate { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Обещание и то, что мы шьём, — в один столбец; разворот и герой тоже. */
  .threefolds,
  .onepicked,
  .foldout { grid-template-columns: 1fr; gap: 30px; }

  /* Рейл под обещанием уходит в горизонтальный скролл: пять карточек столбиком — пять
     экранов между первым словом и любым следующим блоком. */
  .reachrail {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 46%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    padding-bottom: 10px;
  }
  .reachrail > * { scroll-snap-align: start; }

  .mathpad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .packlist-form fieldset { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .footnook {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .topfold { justify-content: flex-start; }

  .tuckdeck,
  .foldrail,
  .fourhands,
  .figurestrip,
  .makeplate,
  .twobig,
  .washbar,
  .careline,
  .readslip-hub,
  .foldpoints,
  .foldcandor,
  .packlist,
  .mathpad,
  .packlist-form fieldset { grid-template-columns: 1fr; }

  /* Подпись и значение в микро-спеке встают друг под друга: 150px под подпись на узком
     экране оставляют значению полтора слова в строку. */
  .sizegrid > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .tucktable { font-size: 15px; }
  .tucktable th,
  .tucktable td { padding: 9px 8px; }

  .mathpad-out { padding: 20px; }
  .mathpad-out span {
    display: block;
    margin-left: 0;
  }

  /* Вторая ссылка под пилюлей, а не сбоку: в строку они не помещаются и рвутся посередине. */
  .nooknav-aside {
    margin-left: 0;
    margin-top: 12px;
  }

  .readslip-page { font-size: 17px; }
}