/* KKJ Tops — палитра снята с двух исходников бренда, без отсебятины:
   логотип — тан-золотая скоропись и корона НА БЕЛОМ; баннер — светлый дневной
   кадр с тюлем, чёрный высококонтрастный сериф «KKJ STORE» и чёрная пилюля.
   ⚠ Поле именно белое. Раньше здесь стоял кремовый --paper:#faf6f0, которого
   в исходниках нет: золото было растянуто в заливку, контраст баннера пропадал,
   и сайт выглядел как типовой бежевый affiliate. Золото вернулось в роль
   волосяной линии и микро-подписей, чёрное держит текст.
   Мотив вёрстки: острые углы, волосяные линейки, разрядка в микро-подписях,
   корона из логотипа как знак, и цветные плашки-свотчи — каталог устроен
   по цветовым наборам. */

@font-face { font-family: 'Playfair'; src: url('/fonts/playfair.woff2') format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Playfair'; src: url('/fonts/playfair-italic.woff2') format('woff2'); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('/fonts/jost.woff2') format('woff2'); font-weight: 300 600; font-display: swap; }

:root {
  --paper: #ffffff;
  --card: #ffffff;
  --wash: #f5f3ef;
  --ink: #100e0c;
  --soft: #5d564f;
  --faint: #928a81;
  --gold: #b0906a;
  --gold-deep: #91724b;
  --rule: #e6e2db;
  --rule-hard: #c9c2b7;
  --wrap: 1240px;
  --gut: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 300 17px/1.66 'Jost', 'Segoe UI', system-ui, sans-serif;
  letter-spacing: .005em;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: 'Playfair', Georgia, serif; font-weight: 500; letter-spacing: -.012em; margin: 0; }
p { margin: 0 0 1em; }
button { font: inherit; color: inherit; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* микро-подпись над заголовком секции */
.microcap {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 14px;
}
.sect-head { max-width: 660px; margin-bottom: 44px; }
.sect-head h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.14; }
.sect-head p { margin-top: 16px; color: var(--soft); }

section { padding: 84px 0; border-top: 1px solid var(--rule); }
section:first-of-type { border-top: 0; }

/* ── шапка: три яруса по центру, как шапка журнала ──
   Ярус 1 — служебная строка, ярус 2 — корона и марка, ярус 3 — навигация.
   При скролле main.js вешает .tight на .mast: служебный ярус и подпись
   уезжают, корона и марка мельчают, шапка становится одной строкой. */
.mast {
  background: var(--paper);
  border-bottom: 1px solid var(--ink);
  position: sticky; top: 0; z-index: 40;
}

.utility { border-bottom: 1px solid var(--rule); }
.utility-in {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-top: 9px; padding-bottom: 9px;
}
.utility-say {
  margin: 0; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint);
}
.utility-mid { color: var(--gold-deep); }
.utility-acts { display: flex; gap: 22px; }
.finder-btn, .drawer-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink);
  border-bottom: 1px solid transparent;
}
.finder-btn:hover, .drawer-btn:hover { border-bottom-color: var(--gold); }
.drawer-btn { display: none; }

.crest { text-align: center; padding-top: 26px; padding-bottom: 20px; }
.crest-link { text-decoration: none; display: inline-block; }
.crown { width: 40px; height: 25px; color: var(--gold); margin: 0 auto 10px; display: block; }
.crest-word {
  display: block;
  font-family: 'Playfair', serif;
  font-size: 40px; line-height: 1;
  letter-spacing: .1em; text-transform: uppercase;
}
.crest-sub {
  display: block; margin-top: 10px;
  font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--faint);
}

.deck { border-top: 1px solid var(--rule); }
.deck-in { display: flex; justify-content: center; flex-wrap: wrap; gap: 34px; padding: 13px 32px; }
.deck a {
  text-decoration: none;
  font-size: 12px; letter-spacing: .17em; text-transform: uppercase;
  padding: 3px 0; border-bottom: 1px solid transparent; white-space: nowrap;
}
.deck a:hover { border-bottom-color: var(--gold); }
.deck a.here { border-bottom-color: var(--ink); }

/* сжатое состояние при скролле */
.mast.tight .utility { display: none; }
.mast.tight .crest { padding-top: 10px; padding-bottom: 6px; }
.mast.tight .crown { width: 24px; height: 15px; margin-bottom: 4px; }
.mast.tight .crest-word { font-size: 22px; }
.mast.tight .crest-sub { display: none; }
.mast.tight .deck-in { padding-top: 9px; padding-bottom: 9px; }

/* ── поиск ── */
.finder { display: none; border-top: 1px solid var(--rule); background: var(--card); padding: 24px 0 30px; }
body.finder-on .finder { display: block; }
.finder-field {
  width: 100%; padding: 13px 0; font: 300 20px 'Jost', sans-serif;
  background: none; border: 0; border-bottom: 1px solid var(--rule-hard); color: var(--ink);
}
.finder-field:focus { outline: none; border-bottom-color: var(--gold); }
.finder-list { margin-top: 18px; display: grid; gap: 2px; }
.finder-row { display: flex; align-items: center; gap: 14px; padding: 9px 10px; text-decoration: none; }
.finder-row:hover { background: var(--wash); }
.finder-thumb { width: 46px; height: 46px; object-fit: cover; flex: none; border: 1px solid var(--rule); }
.finder-name { display: block; font-size: 15px; }
.finder-meta { display: block; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); margin-top: 2px; }
.finder-none { color: var(--faint); font-size: 15px; padding: 10px; margin: 0; }

/* ── хлебные крошки ── */
.crumbs { padding-top: 22px; font-size: 12.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--gold-deep); }
.crumbs span { margin: 0 9px; }

/* ── кнопки ── */
.btn-solid, .btn-line {
  display: inline-block;
  font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase;
  padding: 15px 30px; text-decoration: none; cursor: pointer; border: 1px solid var(--ink);
  background: none; text-align: center;
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--gold-deep); border-color: var(--gold-deep); }
.btn-line:hover { background: var(--ink); color: var(--paper); }

/* ── свотч-плашки: цвет из названия набора ── */
.dot { display: block; width: 100%; height: 100%; }
.swatch-dots, .piece-dots {
  display: flex; height: 8px; overflow: hidden;
  border: 1px solid rgba(26, 22, 19, .14);
}
.swatch-dots > span, .piece-dots > span { flex: 1 1 0; }
/* Волосок между плашками: два бледных оттенка рядом (White / Light Grey)
   иначе сливаются в одну полосу и набор читается как одноцветный. */
.swatch-dots > span + span, .piece-dots > span + span,
.hue-strip > span + span {
  border-left: 1px solid rgba(26, 22, 19, .16);
}

/* ── первый экран: заголовок по центру, под ним лента кадров во всю ширину ──
   Подача с баннера бренда: белое поле, воздух, крупный сериф.
   Лента намеренно вне .wrap — она идёт от края до края экрана. */
.opener { padding: 60px 0 0; border-top: 0; }
.opener-top { text-align: center; max-width: 860px; }
.opener-kick {
  display: block; font-size: 11px; font-weight: 500;
  letter-spacing: .3em; text-transform: uppercase; color: var(--gold-deep);
}
.opener-h1 {
  margin-top: 20px;
  font-size: clamp(38px, 5.6vw, 72px); line-height: 1.02; letter-spacing: -.02em;
}
.opener-lede { margin: 22px auto 0; font-size: 18px; color: var(--soft); max-width: 40em; }
.opener-acts { display: flex; gap: 12px; margin-top: 32px; justify-content: center; flex-wrap: wrap; }

.reel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; margin-top: 56px; }
.reel-item { text-decoration: none; display: block; }
.reel-shot { display: block; overflow: hidden; background: var(--wash); }
.reel-shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; transition: transform .5s ease; }
.reel-item:hover .reel-shot img { transform: scale(1.04); }
/* ⚠ Рамка обязательна: поле белое, и белый оттенок без неё исчезает целиком —
   набор «White» выглядел бы как пропущенная полоса, а не как белый. */
.reel-hues { display: flex; height: 10px; border: 1px solid rgba(26, 22, 19, .16); }
.reel-hues > span { flex: 1 1 0; }
.reel-hues > span + span { border-left: 1px solid rgba(26, 22, 19, .16); }
.reel-name {
  display: block; padding: 14px 16px 0;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase;
}
.reel-cut { display: block; padding: 4px 16px 0; font-size: 12.5px; color: var(--faint); }

.opener-facts {
  display: flex; flex-wrap: wrap; gap: 12px 46px; justify-content: center;
  padding-top: 34px; padding-bottom: 34px;
}
.fact { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
.fact b { font-family: 'Playfair', serif; font-size: 19px; font-weight: 500; letter-spacing: 0; color: var(--ink); margin-right: 7px; }

/* ── лента всех цветовых наборов ── */
/* ⚠ Сетка заполняется не нацело: 31 набор на 4-5 колонок оставляет хвост.
   Поэтому разделители рисует не фон контейнера, а outline самих плиток —
   пустые ячейки последнего ряда остаются фоном страницы, а не бежевым блоком. */
.swatchrail { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1px; }
.swatch { background: var(--card); outline: 1px solid var(--rule); padding: 18px 18px 20px; text-decoration: none; display: block; }
.swatch:hover { background: #fffdfa; }
.swatch:hover .swatch-name { color: var(--gold-deep); }
.swatch-dots { height: 26px; }
.swatch-name { display: block; margin-top: 13px; font-size: 14.5px; line-height: 1.4; }
.swatch-cut { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }

/* ── категории нумерованным списком, не сеткой карточек ── */
.cut-row {
  display: grid; grid-template-columns: 68px 150px 1fr auto;
  gap: 30px; align-items: center;
  padding: 26px 0; border-top: 1px solid var(--rule); text-decoration: none;
}
.cut-row:last-child { border-bottom: 1px solid var(--rule); }
.cut-row:hover { background: #fffdfa; }
.cut-num { font-family: 'Playfair', serif; font-size: 30px; color: var(--gold); font-style: italic; }
.cut-shot { width: 150px; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); }
.cut-body h3 { font-size: 24px; }
.cut-body p { margin: 9px 0 0; color: var(--soft); font-size: 15.5px; max-width: 46em; }
.cut-go { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); white-space: nowrap; }

/* ── сетка товаров ── */
.rack { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 34px 26px; }
.piece { text-decoration: none; display: flex; flex-direction: column; }
.piece-shot { position: relative; border: 1px solid var(--rule); background: var(--card); overflow: hidden; }
.piece-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .5s ease; }
.piece:hover .piece-shot img { transform: scale(1.035); }
.piece:hover .piece-shot { border-color: var(--rule-hard); }
.piece-pack {
  position: absolute; top: 0; left: 0;
  background: var(--ink); color: var(--paper);
  font-size: 10.5px; letter-spacing: .15em; text-transform: uppercase; padding: 6px 11px;
}
.piece-dots { margin-top: 12px; height: 10px; border-left: 0; border-right: 0; }
.piece-name { display: block; margin-top: 12px; font-family: 'Playfair', serif; font-size: 18px; line-height: 1.3; }
.piece-hue { display: block; margin-top: 5px; font-size: 12.5px; letter-spacing: .05em; color: var(--gold-deep); }
.piece-teaser { display: block; margin-top: 9px; font-size: 14px; line-height: 1.55; color: var(--soft); }
.piece-line { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; }
.piece-cost { font-family: 'Playfair', serif; font-size: 20px; }

/* рейтинг */
.stars { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--soft); }
.star { color: var(--rule-hard); letter-spacing: 1px; }
.star.on { color: var(--gold); }

/* ── цитатная полоса ── */
.stripe { background: var(--ink); color: var(--paper); border-top: 0; }
.stripe-line { font-family: 'Playfair', serif; font-size: clamp(22px, 2.9vw, 32px); line-height: 1.32; max-width: 24em; font-style: italic; margin: 0; }
.stripe-who { margin: 22px 0 0; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }

/* ── нумерованные пункты «как устроен набор» ── */
.bench { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.bench-item { background: var(--wash); padding: 32px 30px 34px; }
.bench-num { font-family: 'Playfair', serif; font-style: italic; font-size: 26px; color: var(--gold); display: block; margin-bottom: 12px; }
.bench-item h3 { font-size: 21px; }
.bench-item p { margin: 11px 0 0; color: var(--soft); font-size: 15.5px; }

/* ── размерная таблица ── */
.gauge-wrap { overflow-x: auto; border: 1px solid var(--rule-hard); background: var(--card); }
.gauge-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 480px; }
.gauge-table th, .gauge-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.gauge-table thead th {
  background: var(--ink); color: var(--paper);
  font-weight: 400; font-size: 11px; letter-spacing: .15em; text-transform: uppercase;
}
.gauge-table tbody tr:last-child td { border-bottom: 0; }
.gauge-table tbody th { font-family: 'Playfair', serif; font-size: 17px; font-weight: 500; }
.gauge-table tbody tr:hover { background: var(--wash); }
.gauge-note { margin: 20px 0 0; color: var(--soft); font-size: 15.5px; max-width: 52em; }

/* ── состав ткани полосами ── */
.weave-row { display: grid; grid-template-columns: 300px 1fr; gap: 34px; padding: 26px 0; border-top: 1px solid var(--rule); align-items: start; }
.weave-row:last-child { border-bottom: 1px solid var(--rule); }
.weave-head { font-family: 'Playfair', serif; font-size: 18px; line-height: 1.35; margin: 0 0 12px; }
.weave-bar { display: flex; height: 12px; border: 1px solid rgba(26, 22, 19, .16); }
.weave-bar > span { display: block; }
.weave-key { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.weave-key i { display: inline-block; width: 9px; height: 9px; margin-right: 6px; }
.weave-row p { margin: 0; color: var(--soft); font-size: 15.5px; }

/* ── цифры каталога ── */
.tally { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.tally-cell { background: var(--wash); padding: 30px 26px 32px; }
.tally-big { display: block; font-family: 'Playfair', serif; font-size: 46px; line-height: 1; color: var(--gold-deep); }
.tally-cell strong { display: block; margin-top: 12px; font-weight: 400; font-size: 15px; }
.tally-note { display: block; margin-top: 5px; color: var(--faint); font-size: 13.5px; line-height: 1.5; }

/* ── FAQ в две колонки ── */
.queries { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 46px; }
.query { padding: 24px 0; border-top: 1px solid var(--rule); }
.query h3 { font-size: 19px; line-height: 1.35; }
.query p { margin: 10px 0 0; color: var(--soft); font-size: 15.5px; }

/* ── карточки ухода ── */
.notecards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.note { border: 1px solid var(--rule-hard); padding: 28px 26px 30px; background: var(--card); }
.note h3 { font-size: 19px; line-height: 1.35; }
.note p { margin: 12px 0 0; color: var(--soft); font-size: 15px; }

/* ── анонсы гайдов ── */
.folio { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1px; }
.folio-item { background: var(--card); outline: 1px solid var(--rule); padding: 28px 26px 30px; text-decoration: none; display: block; }
.folio-item:hover { background: #fffdfa; }
.folio-item h3 { font-size: 20px; line-height: 1.3; margin-top: 10px; }
.folio-item p { margin: 11px 0 0; color: var(--soft); font-size: 14.5px; }

/* ── финальный текст ── */
.epilogue h2 { font-size: clamp(26px, 3.2vw, 36px); max-width: 20em; }
.epilogue-body { columns: 2; column-gap: 46px; margin-top: 30px; color: var(--soft); font-size: 15.5px; }
.epilogue-body p { break-inside: avoid; }

/* ── шапка категории ── */
.marquee { padding-top: 46px; padding-bottom: 40px; border-bottom: 1px solid var(--rule); }
.marquee h1 { font-size: clamp(30px, 4vw, 46px); line-height: 1.08; max-width: 16em; }
.marquee .lede { margin-top: 18px; color: var(--soft); max-width: 46em; }
.marquee-stat { margin-top: 22px; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }

/* ── страница товара ──
   Заголовок вынесен над фотографией во всю ширину и центрован, как шапка
   статьи; ниже фото и узкая колонка с фактами; под ними полоса цифр.
   Так страница читается сверху вниз, а не двумя параллельными столбцами. */
.plate-top { text-align: center; max-width: 900px; padding-top: 34px; }
.plate-h1 { margin-top: 14px; font-size: clamp(28px, 4vw, 50px); line-height: 1.06; letter-spacing: -.015em; }
.plate-hue {
  margin: 14px 0 0; font-family: 'Playfair', serif; font-style: italic;
  font-size: 25px; color: var(--gold-deep);
}
.plate-rate { margin-top: 16px; display: flex; justify-content: center; }
.plate-lede { margin: 20px auto 0; color: var(--soft); max-width: 44em; }

/* ⚠ Только padding-top: у элемента есть и класс .wrap, а сокращённое
   `padding: 40px 0 0` обнуляло его боковые поля — на узком экране витрина
   уезжала за края экрана вместе с ценой и дисклеймером. */
.plate { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 40px; align-items: start; }
.plate-shot { border: 1px solid var(--rule-hard); background: var(--wash); }
/* ⚠ Квадрат, а не 4/5: исходники с площадки квадратные, и вертикальная рамка
   срезала бы им бока — на снимке набора это отрезанная рубашка. Заодно колонка
   фактов справа не повисает над пустотой в четверть экрана. */
.plate-shot img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.plate-side { padding-top: 4px; }
.plate-lab { margin: 0 0 14px; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--faint); }

/* Крупные плитки оттенков вместо восьмипиксельной полоски: набор цветов —
   предмет этой страницы, а не мелкая подпись под фотографией. */
.chips { display: flex; flex-wrap: wrap; gap: 1px; }
/* max-width нужен ради наборов из одного цвета: без него единственная плитка
   растягивалась во всю колонку и читалась как пустая полоса, а не как образец. */
.chip { flex: 1 1 96px; max-width: 190px; outline: 1px solid var(--rule); }
.chip-fill { display: block; height: 78px; }
.chip-name {
  display: block; padding: 9px 10px 10px; font-size: 11px;
  letter-spacing: .13em; text-transform: uppercase; text-align: center;
}
.pricebar {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
  margin-top: 28px; padding-top: 22px; border-top: 2px solid var(--ink);
}
.pricebar b { font-family: 'Playfair', serif; font-size: 44px; font-weight: 500; line-height: 1; }
.pricebar span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.plate-act { margin-top: 22px; display: flex; gap: 12px; flex-wrap: wrap; }
.plate-act .btn-solid { flex: 1 1 auto; text-align: center; }
.plate-fine { margin: 16px 0 0; font-size: 13px; color: var(--faint); line-height: 1.55; }

/* полоса цифр под витриной */
.figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  margin-top: 60px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
}
.figure {
  padding: 24px 22px 26px; text-align: center;
  font-size: 11.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--faint);
}
.figure + .figure { border-left: 1px solid var(--rule); }
.figure b {
  display: block; margin-bottom: 8px; font-family: 'Playfair', serif;
  font-size: 30px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* тезисы «что выделяет этот набор» */
.standout { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.standout-item { background: var(--card); padding: 26px 26px 28px; }
.standout-item h3 { font-size: 18px; line-height: 1.35; }
.standout-item p { margin: 10px 0 0; color: var(--soft); font-size: 15px; }

/* таблица характеристик */
.sheet { border: 1px solid var(--rule-hard); background: var(--card); }
.sheet-row { display: grid; grid-template-columns: 210px 1fr; gap: 22px; padding: 13px 20px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.sheet-row:last-child { border-bottom: 0; }
.sheet-row dt { color: var(--faint); font-size: 12px; letter-spacing: .13em; text-transform: uppercase; padding-top: 3px; }
.sheet-row dd { margin: 0; }
.sheet { margin: 0; }

/* этот же крой в других цветах */
.huerow { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.hue { text-decoration: none; display: block; }
.hue img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--rule); }
.hue:hover img { border-color: var(--ink); }
.hue-strip { display: flex; height: 8px; margin-top: 7px; border: 1px solid rgba(26, 22, 19, .16); }
.hue-strip > span { flex: 1 1 0; }
.hue-name { display: block; margin-top: 8px; font-size: 13.5px; line-height: 1.4; }
.hue-cost { display: block; margin-top: 3px; font-size: 13px; color: var(--faint); }
.hue.on img { border-color: var(--gold); border-width: 2px; }
.hue.on .hue-name { color: var(--gold-deep); }

/* ── гайды и служебные страницы ── */
.essay { max-width: 780px; padding-top: 40px; padding-bottom: 80px; }
.essay h1 { font-size: clamp(30px, 3.8vw, 44px); line-height: 1.1; }
.essay .lede { margin-top: 18px; font-size: 18.5px; color: var(--soft); }
.essay-body { margin-top: 40px; }
.essay-body h2 { font-size: 26px; margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--rule); }
.essay-body h3 { font-size: 20px; margin: 30px 0 10px; }
.essay-body p { color: var(--soft); }
.essay-body ul, .essay-body ol { color: var(--soft); padding-left: 22px; margin: 0 0 1.2em; }
.essay-body li { margin-bottom: 9px; }
.essay-body ol li::marker { font-family: 'Playfair', serif; color: var(--gold-deep); }

/* ── 404 ── */
.astray { padding-top: 110px; padding-bottom: 130px; text-align: center; }
.astray-code { font-family: 'Playfair', serif; font-style: italic; font-size: 84px; line-height: 1; color: var(--gold); }
.astray h1 { font-size: 34px; margin-top: 12px; }
.astray p { margin: 16px auto 30px; color: var(--soft); max-width: 34em; }

/* ── подвал ── */
.colophon { background: var(--ink); color: #d9cfc0; padding: 68px 0 30px; margin-top: 0; }
.colophon h4 { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: 0 0 16px; }
.colophon-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 46px; }
.colophon-mark { display: flex; align-items: center; gap: 13px; margin-bottom: 18px; }
.colophon-mark .crown { width: 30px; height: 19px; margin: 0; }
.colophon-word {
  font-family: 'Playfair', serif; font-size: 22px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--paper);
}
.colophon-blurb { font-size: 14.5px; line-height: 1.7; color: #a99e90; margin: 0 0 14px; }
.colophon-list { list-style: none; margin: 0; padding: 0; }
.colophon-list li { margin-bottom: 9px; }
.colophon-list a { text-decoration: none; font-size: 14.5px; }
.colophon-list a:hover { color: var(--gold); }
.colophon-rule {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 52px; padding-top: 22px; border-top: 1px solid #332d27; font-size: 13px; color: #8c8175;
}
.topper { background: none; border: 1px solid #443c34; color: #d9cfc0; padding: 10px 20px; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.topper:hover { border-color: var(--gold); color: var(--gold); }

/* ── адаптив: 1080 / 860 / 540 ── */
@media (max-width: 1080px) {
  :root { --gut: 24px; }
  .deck-in { gap: 22px; }
  .deck a { font-size: 11px; letter-spacing: .12em; }
  .tally { grid-template-columns: repeat(2, 1fr); }
  .colophon-grid { grid-template-columns: 1fr 1fr 1fr; }
  .colophon-grid > div:first-child { grid-column: 1 / -1; }
  .cut-row { grid-template-columns: 48px 110px 1fr auto; gap: 22px; }
  .cut-shot { width: 110px; }
}
@media (max-width: 860px) {
  section { padding: 60px 0; }
  .plate { grid-template-columns: 1fr; gap: 34px; }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .figure:nth-child(3) { border-left: 0; border-top: 1px solid var(--rule); }
  .figure:nth-child(4) { border-top: 1px solid var(--rule); }
  .bench, .standout, .queries, .notecards { grid-template-columns: 1fr; }
  .queries { gap: 0; }
  .weave-row { grid-template-columns: 1fr; gap: 16px; }
  .epilogue-body { columns: 1; }
  .sect-head { margin-bottom: 32px; }

  /* Лента из пяти кадров на узком экране режется пополам: пять колонок дают
     полоски по 90px, на которых не видно ни кроя, ни цвета. */
  .reel { grid-template-columns: repeat(2, 1fr); }
  .reel-item:nth-child(5) { display: none; }
  .opener-h1 { font-size: clamp(32px, 8vw, 46px); }

  .drawer-btn { display: block; }
  .utility-mid { display: none; }
  .deck {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    background: var(--paper); border-bottom: 1px solid var(--ink);
  }
  body.drawer-open .deck { display: block; }
  .deck-in { flex-direction: column; gap: 0; padding: 6px 24px 16px; }
  .deck a { padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .deck a:last-child { border-bottom: 0; }
  .crest { padding-top: 18px; padding-bottom: 16px; }
  .crest-word { font-size: 30px; }
}
@media (max-width: 540px) {
  body { font-size: 16px; }
  .rack { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 16px; }
  .piece-name { font-size: 16px; }
  .piece-teaser { display: none; }
  .swatchrail { grid-template-columns: 1fr 1fr; }
  .cut-row { grid-template-columns: 40px 1fr; gap: 14px; padding: 20px 0; }
  .cut-shot, .cut-go { display: none; }
  .colophon-grid { grid-template-columns: 1fr 1fr; }
  .huerow { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 12px; }
  .sheet-row { grid-template-columns: 1fr; gap: 4px; }
  .opener-acts .btn-solid, .opener-acts .btn-line,
  .plate-act .btn-solid, .plate-act .btn-line { flex: 1 1 100%; }
  .plate-act .btn-line { text-align: center; }
  .tally-big { font-size: 36px; }
  .astray-code { font-size: 60px; }
}