/* UEU — ueuclothing.com
   Палитра снята с баннера бренда: marigold-вордмарк на осеннем лесу.

   Имена намеренно свои и проверены на пересечение с соседями по сети (было
   два прохода, второй — после _rename.js). Каркас: .bound .yoke .drape .spread
   .ledge .abide; карточка: .tillrow (блок покупки), .asking /
   .nowask (цены), .dyechip (свотч), .nick / .nick.struck (звёзды), .yardage
   (лонгрид), .preline (кикер), .overcap (надпись над блоком), .pinned (метка),
   .parting (финальный блок), .hinge / .hinged (бургер).
   Переменные: --marigold --soot --oat --bleach --seamline --dune --raise --curve.

   ⚠ Перед вводом НОВОГО имени класса гнать grep по соседям: короткие слова
   (.note, .num, .swatch) сидят у половины сети. */

@font-face { font-family: 'Unbounded'; src: url(unbounded-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Unbounded'; src: url(unbounded-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Epilogue'; src: url(epilogue-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Epilogue'; src: url(epilogue-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Epilogue'; src: url(epilogue-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }

:root {
  --marigold: #e08607;
  --marigold-deep: #b56805;
  --soot: #2c211a;
  --soot-soft: #5b4a3c;
  --oat: #faf4ea;
  --oat-deep: #f0e5d4;
  --bleach: #fffdf9;
  --seamline: #e3d5c0;
  --dune: #8a7a63;
  --raise: 0 1px 2px rgba(44, 33, 26, .05), 0 8px 24px rgba(44, 33, 26, .06);
  --curve: 14px;
}

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

body {
  margin: 0;
  font-family: 'Epilogue', 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--soot);
  background: var(--oat);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: 'Unbounded', 'Epilogue', sans-serif; font-weight: 800; line-height: 1.12; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.3rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }

.bound { width: min(1240px, 100% - 2.6rem); margin-inline: auto; }

/* ---------- шапка ---------- */
.selvedge {
  background: var(--soot);
  color: #f6e9d6;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding-block: .5rem;
}
.selvedge-in { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.selvedge-in nav { display: flex; gap: 1.4rem; }
.selvedge-in a:hover { color: var(--marigold); }

.yoke { position: sticky; top: 0; z-index: 40; background: var(--bleach); border-bottom: 1px solid var(--seamline); }
.yoke-in { display: flex; align-items: center; gap: 1.5rem; padding-block: .95rem; }
/* Знак — картинка, а не набор шрифтом: у логотипа UEU разомкнутое дно у U и
   отдельный ствол у E, шрифтом это не воспроизводится. Высоту задаём при
   width:auto — обратный порядок сплющивал знак в узкой шапке. */
.signboard { display: flex; flex-direction: column; line-height: 1; margin-right: auto; }
.signmark { height: 32px; width: auto; display: block; }
.signboard span { font-size: .62rem; letter-spacing: .3em; text-transform: uppercase; color: var(--dune); margin-top: .5rem; }

.placket { display: flex; gap: 1.55rem; font-size: .88rem; font-weight: 500; }
.placket a { padding-block: .3rem; border-bottom: 2px solid transparent; white-space: nowrap; }
.placket a:hover { border-color: var(--marigold); }
.placket a.abide { border-color: var(--soot); }

.rummage, .hinge { border: 1px solid var(--seamline); background: var(--bleach); border-radius: 999px; cursor: pointer; color: var(--soot); display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .9rem; font: inherit; font-size: .85rem; }
.rummage:hover, .hinge:hover { border-color: var(--marigold); }
.hinge { display: none; padding: .5rem .65rem; }
.hinge i { display: block; width: 18px; height: 2px; background: var(--soot); position: relative; }
.hinge i::before, .hinge i::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--soot); }
.hinge i::before { top: -6px; }
.hinge i::after { top: 6px; }

.satchel { display: none; border-bottom: 1px solid var(--seamline); background: var(--bleach); padding-block: 1rem; }
body.rummaging .satchel { display: block; }
.satchel input { width: 100%; font: inherit; padding: .8rem 1rem; border: 1px solid var(--seamline); border-radius: 10px; background: var(--oat); }
.satchel input:focus { outline: 2px solid var(--marigold); outline-offset: 1px; }
.finds { margin-top: .6rem; display: grid; gap: .25rem; }
.finds a { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem .75rem; border-radius: 8px; font-size: .92rem; }
.finds a:hover { background: var(--oat-deep); }
.finds .asking { color: var(--marigold-deep); font-weight: 600; }
.nothing { padding: .55rem .75rem; color: var(--dune); font-size: .92rem; }

/* ---------- кнопки ---------- */
/* ⚠ .cuff-hollow обязана быть в этом же селекторе. В разметке она стоит ОДНА, без
   .cuff, а сама задавала только цвета: border-color без border-style рамки не даёт,
   padding и display не наследуются. Обводка не рисовалась вовсе, ссылка выглядела
   обычным тёмным текстом, а её :hover красил фон впритык к буквам. */
.cuff, .cuff-hollow {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: var(--marigold); color: #fff; font-weight: 600; font-size: .95rem;
  padding: .8rem 1.6rem; border-radius: 999px; border: 2px solid var(--marigold);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.cuff:hover { background: var(--marigold-deep); border-color: var(--marigold-deep); }
.cuff-hollow { background: transparent; color: var(--soot); border-color: var(--soot); }
.cuff-hollow:hover { background: var(--soot); border-color: var(--soot); color: #fff; }

/* Кнопка покупки — картинка (см. _make-button.js). Своих рамки, фона и полей у
   .grip быть не должно: они уже нарисованы внутри png, иначе вокруг пилюли
   появляется вторая. line-height:0 убирает базовый зазор под inline-картинкой.
   ⚠ Наведение — filter, а не вторая картинка: файл под :hover грузится только в
   момент наведения и первый раз мигает пустотой. */
.grip {
  display: inline-block; padding: 0; border: 0; background: none;
  line-height: 0; border-radius: 999px; cursor: pointer;
  transition: filter .15s, transform .15s;
}
.grip img { display: block; width: 187px; height: auto; }
.grip:hover { filter: brightness(.88); }
.grip:active { transform: translateY(1px); }
.grip:focus-visible { outline: 2px solid var(--soot); outline-offset: 3px; }
/* в карточке места меньше — ужимаем картинку целиком, пропорции держит height:auto */
.grip-slim img { width: 152px; }

/* ---------- герой ---------- */
.roam {
  background:
    repeating-linear-gradient(115deg, transparent 0 22px, rgba(224, 134, 7, .05) 22px 23px),
    var(--oat);
  border-bottom: 1px solid var(--seamline);
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.roam-in { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.preline { font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--marigold-deep); font-weight: 600; margin: 0 0 1rem; }
.roam h1 em { font-style: normal; color: var(--marigold); }
.roam-sub { font-size: 1.08rem; color: var(--soot-soft); max-width: 34rem; }
.roam-acts { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.6rem; }

.shingle { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.shingle a { position: relative; display: block; border-radius: var(--curve); overflow: hidden; background: var(--bleach); box-shadow: var(--raise); }
.shingle a:nth-child(2), .shingle a:nth-child(4) { transform: translateY(1.7rem); }
.shingle img { aspect-ratio: 1 / 1.12; object-fit: cover; width: 100%; }
.shingle span { position: absolute; left: .6rem; bottom: .6rem; background: rgba(255, 253, 249, .93); border-radius: 999px; padding: .25rem .7rem; font-size: .78rem; font-weight: 600; }

/* ---------- полоса «под какой день» ---------- */
.gusset { background: var(--bleach); border-bottom: 1px solid var(--seamline); padding-block: 1.6rem; }
.gusset-lead { font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--dune); margin: 0 0 .9rem; }
.gusset-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.gusset-row a { border: 1px solid var(--seamline); border-radius: 999px; padding: .5rem 1.1rem; font-size: .9rem; font-weight: 500; }
.gusset-row a:hover { border-color: var(--marigold); background: var(--oat); }

/* ---------- секции ---------- */
.course { padding-block: clamp(2.6rem, 5vw, 4rem); }
.course-dark { background: var(--soot); color: #f2e7d8; }
.course-dark h2, .course-dark h3 { color: #fff; }
.course-paper { background: var(--bleach); }
.heading { max-width: 46rem; margin-bottom: 1.9rem; }
.heading p { color: var(--soot-soft); margin: 0; }
.course-dark .heading p { color: #d9c9b4; }

/* ---------- плитки разделов ---------- */
.grove { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1.2rem; }
.grove a { display: block; }
.grove-shot { border-radius: var(--curve); overflow: hidden; background: var(--bleach); box-shadow: var(--raise); }
.grove-shot img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; transition: transform .35s; }
.grove a:hover .grove-shot img { transform: scale(1.04); }
.grove h3 { margin: .85rem 0 .2rem; font-size: 1rem; }
.grove p { margin: 0; color: var(--dune); font-size: .86rem; }

/* ---------- карточка товара ---------- */
.spread { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.4rem; }
.drape { background: var(--bleach); border: 1px solid var(--seamline); border-radius: var(--curve); overflow: hidden; display: flex; flex-direction: column; transition: box-shadow .2s, transform .2s; }
.drape:hover { box-shadow: var(--raise); transform: translateY(-3px); }
.drape-shot { position: relative; background: var(--oat); }
.drape-shot img { aspect-ratio: 1 / 1.08; object-fit: cover; width: 100%; }
.pinned { position: absolute; top: .65rem; left: .65rem; background: rgba(44, 33, 26, .82); color: #fff; font-size: .74rem; font-weight: 600; border-radius: 999px; padding: .2rem .6rem; }
.dyechip { position: absolute; right: .65rem; bottom: .65rem; background: rgba(255, 253, 249, .94); font-size: .72rem; font-weight: 600; border-radius: 999px; padding: .2rem .6rem; text-transform: capitalize; }
.drape-body { padding: .95rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.overcap { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--dune); }
.drape-body h3 { margin: .4rem 0 .35rem; font-size: .98rem; font-family: 'Epilogue', sans-serif; font-weight: 600; line-height: 1.35; }
.drape-line { color: var(--soot-soft); font-size: .87rem; margin: 0 0 .8rem; }
.drape-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.asking { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 1.05rem; }
.runs { font-size: .78rem; color: var(--dune); margin: .45rem 0 .7rem; }
/* Две кнопки в карточке: купить и уйти к таблице. На узкой колонке (240px) в строку
   они не влезают и переносятся сами. */
.drape-acts { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: .75rem; }
.drape-acts .cuff-hollow { padding: .5rem 1.05rem; font-size: .82rem; }

/* ---------- полка-прокрутка ---------- */
.sway { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 1fr); gap: 1rem; overflow-x: auto; padding-bottom: .6rem; scrollbar-width: thin; }
.sway a { background: var(--bleach); border-radius: var(--curve); overflow: hidden; border: 1px solid var(--seamline); }
.sway img { aspect-ratio: 1 / 1; object-fit: cover; }
.sway b { display: block; padding: .6rem .75rem .1rem; font-size: .86rem; font-weight: 600; }
.sway span { display: block; padding: 0 .75rem .7rem; font-size: .82rem; color: var(--marigold-deep); font-weight: 600; }

/* ---------- цифры ---------- */
.birch { background: var(--marigold); color: #fff; padding-block: 2.2rem; }
.birch-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.4rem; text-align: center; }
.birch b { display: block; font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 2rem; }
.birch span { font-size: .86rem; opacity: .92; }

/* ---------- редакционный блок ---------- */
/* Колонка под снимок узкая и с потолком по высоте не из вкуса, а из данных:
   мастер у Amazon ровно 500px по длинной стороне (у самых узких 261x500), выше
   идёт интерполяция и мыло. Было .85fr без ограничений — картинка растягивалась
   до 950px и оставляла рядом с текстом пустое поле в пол-экрана.
   object-fit: contain досыпает поля фоном, а не тянет пиксели. */
.loft { display: grid; grid-template-columns: minmax(0, .58fr) minmax(0, 1.42fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
.loft img { width: 100%; height: auto; max-height: 500px; object-fit: contain; display: block; background: var(--bleach); border-radius: var(--curve); }
/* Пять <i class="nick"> — это звёзды, и рисует их именно эта строка: в разметке
   элементы пустые. Без ::before они занимали место молча, флексовый зазор давал
   пустой отступ перед «4.3 from 12 840 ratings», и выглядело это опечаткой. */
.loft-rate { display: flex; align-items: center; gap: .08rem; font-size: .9rem; color: var(--dune); margin-bottom: .8rem; }
.loft-rate span { margin-left: .45rem; }
.nick { color: var(--seamline); font-size: 1.05rem; font-style: normal; line-height: 1; }
.nick::before { content: '\2605'; }
.nick.struck { color: var(--marigold); }
.loft-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.loft-row .asking { font-size: 1.4rem; }

/* ---------- таблицы, длинный текст ---------- */
.yardage { max-width: 74ch; }
.yardage h3 { margin-top: 2rem; font-family: 'Unbounded', sans-serif; font-weight: 600; }
.yardage ul, .yardage ol { padding-left: 1.2rem; }
.yardage li { margin-bottom: .5rem; }
/* приписка на полях: чем на этом листинге является колонка Hip */
.basting { border-left: 3px solid var(--marigold); padding: .1rem 0 .1rem 1rem; color: var(--soot-soft); font-size: .92rem; }
table { width: 100%; border-collapse: collapse; margin: 1.2rem 0 1.8rem; font-size: .92rem; background: var(--bleach); }
th, td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--seamline); vertical-align: top; }
th { background: var(--oat-deep); font-weight: 600; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }

/* ---------- разбор рейтингов ---------- */
.nomad { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.3rem; }
/* Цвет текста тут обязателен. Карточка светлая, а лежит она внутри .course-dark,
   который раздаёт наследникам #f2e7d8 — и три абзаца печатались светлым по
   почти белому: на экране читались только рубрика и ссылка, остальное пропадало. */
.nomad-note { background: var(--bleach); color: var(--soot); border: 1px solid var(--seamline); border-left: 4px solid var(--marigold); border-radius: var(--curve); padding: 1.3rem 1.4rem; }
.nomad-figure { font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: .95rem; margin: .5rem 0 .7rem; }
.nomad-note p { color: var(--soot-soft); }
.nomad-note .nomad-figure { color: var(--soot); }
.nomad-note p:last-child { margin: 0; }
.nomad-note a { color: var(--marigold-deep); font-weight: 600; }

/* ---------- две таблицы на главной ---------- */
/* Обёртка, а не сама таблица: на узком экране прокручиваться должна коробка,
   иначе overflow-x на <table> ломает border-collapse и рамки разъезжаются. */
.reckon { overflow-x: auto; border-radius: var(--curve); border: 1px solid var(--seamline); }
.reckon table { margin: 0; font-size: .95rem; }
.reckon th, .reckon td { white-space: nowrap; }
.reckon tbody tr:last-child td { border-bottom: 0; }
.reckon-key { font-family: 'Unbounded', sans-serif; font-weight: 600; color: var(--soot); }
/* Разброс — то, ради чего таблица и стоит на главной, поэтому колонка выделена. */
.reckon-gap { font-weight: 600; color: var(--marigold-deep); }
.reckon-note { max-width: 68ch; margin: 1.2rem 0 1.6rem; color: var(--soot-soft); border-left: 3px solid var(--marigold); padding-left: 1rem; }
/* Название раздела — единственная ячейка, которой перенос разрешён: числовые
   вилки рвать нельзя, а «Sweatshirts & knit pullovers» в две строки экономит
   на телефоне полсотни пикселей ширины. */
.tallyboard td:first-child { white-space: normal; min-width: 9rem; }
.tallyboard td a { font-weight: 600; }
.tallyboard td a:hover { color: var(--marigold-deep); }
.board-none { color: var(--dune); font-style: italic; }

/* ---------- страница товара ---------- */
.inseam { font-size: .85rem; color: var(--dune); padding-block: 1.1rem; }
.inseam a:hover { color: var(--marigold-deep); }
.piecework { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.6rem, 4vw, 3.2rem); padding-block: 1rem 2.5rem; align-items: start; }
/* Тот же потолок, что и у .loft: мастер Amazon 500px по высоте, выше идёт
   интерполяция. Колонка 1fr тянула снимок до 1140px — вещь на карточке товара
   выглядела мыльнее, чем та же вещь в сетке раздела. width: auto оставляет
   картинку в натуральную величину и просто центрует её в рамке. */
.piecework-shot { border-radius: var(--curve); overflow: hidden; background: var(--bleach); border: 1px solid var(--seamline); display: flex; justify-content: center; }
.piecework-shot img { width: auto; max-width: 100%; height: auto; max-height: 500px; display: block; }
.piecework h1 { font-size: clamp(1.35rem, 2.6vw, 1.9rem); }
.tillrow { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin: 1.2rem 0; padding-block: 1.2rem; border-block: 1px solid var(--seamline); }
.tillrow .asking { font-size: 1.6rem; }
.swatchrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0 0; }
.swatchrow a, .swatchrow span { border: 1px solid var(--seamline); border-radius: 999px; padding: .32rem .8rem; font-size: .82rem; text-transform: capitalize; }
.swatchrow a:hover { border-color: var(--marigold); }
.swatchrow .nowask { background: var(--soot); color: #fff; border-color: var(--soot); }
.plainlist { list-style: none; padding: 0; margin: 1.2rem 0 0; font-size: .92rem; }
.plainlist li { padding: .45rem 0; border-bottom: 1px solid var(--seamline); display: flex; justify-content: space-between; gap: 1rem; }
.plainlist li b { font-weight: 600; color: var(--dune); font-size: .82rem; letter-spacing: .05em; text-transform: uppercase; }

.parting { display: grid; gap: 1.2rem; }
.parting-row { display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.2rem; align-items: start; background: var(--bleach); border: 1px solid var(--seamline); border-radius: var(--curve); padding: 1.3rem 1.4rem; }
.parting-no { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.4rem; color: var(--oat-deep); }
.parting-row h3 { grid-column: 2; margin: 0 0 .35rem; }
.parting-row p { grid-column: 2; margin: 0; color: var(--soot-soft); }

/* ---------- журнал ---------- */
.voyage { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.3rem; }
.voyage-card { background: var(--bleach); border: 1px solid var(--seamline); border-radius: var(--curve); padding: 1.5rem; display: flex; flex-direction: column; }
.voyage-card h2 { font-size: 1.2rem; margin: .6rem 0 .5rem; }
.voyage-card p { color: var(--soot-soft); font-size: .93rem; }
.voyage-tag { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--marigold-deep); font-weight: 600; }
.voyage-more { margin-top: auto; color: var(--marigold-deep); font-weight: 600; font-size: .9rem; }
.voyage-card:hover { border-color: var(--marigold); }

/* ---------- шапка внутренних страниц ---------- */
.lintel { background: var(--bleach); border-bottom: 1px solid var(--seamline); padding-block: clamp(1.8rem, 4vw, 3rem); }
.lintel p.sub { color: var(--soot-soft); max-width: 52rem; margin: 0; }

/* ---------- подвал ---------- */
.ledge { background: var(--soot); color: #d9c9b4; margin-top: 3rem; }
.ledge a { color: #d9c9b4; }
.ledge a:hover { color: var(--marigold); }
.ledge-tags { border-bottom: 1px solid rgba(255, 255, 255, .1); padding-block: 1.4rem; }
.ledge-tags .bound { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.ledge-tags span { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: #e9dcc9; }
.ledge-top { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 2rem; padding-block: 2.4rem; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ledge-top p { font-size: .95rem; }
/* В подвале раньше стояло просто слово UEU, набранное шрифтом, — оно не совпадало
   ни с оригиналом, ни со знаком в шапке. Теперь та же картинка. Краска оранжевая,
   на тёмном soot читается без отдельной светлой версии. */
.ledge-mark { height: 28px; width: auto; display: block; margin-bottom: .9rem; }
.packing { background: rgba(255, 255, 255, .04); border-radius: var(--curve); padding: 1.2rem 1.4rem; }
.packing ul { list-style: none; padding: 0; margin: .6rem 0 0; font-size: .88rem; }
.packing li { padding: .3rem 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.packing li:last-child { border: 0; }
.pinned-label { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--marigold); font-weight: 600; }
.ledge-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1.6rem; padding-block: 2.2rem; }
.ledge-cols nav, .ledge-cols div { display: flex; flex-direction: column; gap: .45rem; font-size: .9rem; }
.ledge-cols .pinned-label { margin-bottom: .35rem; }
.ledge-base { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center; padding-block: 1.4rem; border-top: 1px solid rgba(255, 255, 255, .1); font-size: .82rem; }
.ledge-base p { margin: 0 0 .3rem; }
.upstairs { background: transparent; border: 1px solid rgba(255, 255, 255, .25); color: #d9c9b4; border-radius: 999px; padding: .5rem 1.1rem; font: inherit; font-size: .82rem; cursor: pointer; }
.upstairs:hover { border-color: var(--marigold); color: var(--marigold); }

/* ---------- подборщик посадки ---------- */
.tape { background: var(--bleach); border: 1px solid var(--seamline); border-radius: var(--curve); padding: clamp(1.4rem, 3vw, 2.2rem); box-shadow: var(--raise); }
.tape-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.6rem 2.4rem; }
.tape label { display: block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: var(--dune); font-weight: 600; margin-bottom: .5rem; }
.tape output { font-family: 'Unbounded', sans-serif; font-weight: 600; color: var(--marigold-deep); }
.tape input[type=range] { width: 100%; accent-color: var(--marigold); }
.tape-scale { display: flex; justify-content: space-between; font-size: .74rem; color: var(--dune); margin-top: .3rem; }
.tape-tally { margin: 1.4rem 0 0; font-size: .95rem; color: var(--soot-soft); border-top: 1px solid var(--seamline); padding-top: 1.2rem; }
.tape-size { display: inline-block; background: var(--oat-deep); border-radius: 999px; padding: .2rem .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.tape-inline { background: var(--oat-deep); border-radius: var(--curve); padding: 1.1rem 1.3rem; margin: 1.2rem 0 0; }
.tape-inline input[type=range] { width: 100%; accent-color: var(--marigold); }
.tape-say { margin: .6rem 0 0; font-size: .9rem; color: var(--soot-soft); }
.tapeline tbody tr.struck { background: #fdf1dc; }
.tapeline tbody tr.struck td:first-child { font-weight: 700; color: var(--marigold-deep); }

/* ---------- мобильные ---------- */
@media (max-width: 900px) {
  .roam-in, .loft, .piecework, .ledge-top { grid-template-columns: 1fr; }
  .shingle a:nth-child(2), .shingle a:nth-child(4) { transform: none; }
  .selvedge-in nav { display: none; }
}
@media (max-width: 780px) {
  body { font-size: 16px; }
  .bound { width: min(1240px, 100% - 1.8rem); }
  .hinge { display: inline-flex; }
  .placket { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--bleach); border-bottom: 1px solid var(--seamline); flex-direction: column; gap: 0; padding: .5rem 1.2rem 1rem; }
  body.hinged .placket { display: flex; }
  .placket a { padding-block: .7rem; border-bottom: 1px solid var(--seamline); }
  .yoke { position: relative; }
  .yoke-in { position: relative; gap: .7rem; }
  .signmark { height: 26px; }
  .rummage span { display: none; }
  .parting-row { grid-template-columns: 1fr; }
  .parting-row h3, .parting-row p { grid-column: 1; }
}
/* Таблица мерок на телефоне. Шесть колонок в 500px не влезают, и браузер рвал
   вилки пополам: «22.5–» на одной строке, «23.3» на следующей — два числа вместо
   одного. Запрещаем перенос внутри ячейки и отдаём таблице собственную
   горизонтальную прокрутку, чтобы вместо разорванных цифр был сдвиг вбок. */
@media (max-width: 560px) {
  .tapeline { display: block; overflow-x: auto; }
  .tapeline th, .tapeline td { padding: .55rem .32rem; font-size: .78rem; white-space: nowrap; }
  .reckon th, .reckon td { padding: .55rem .4rem; font-size: .78rem; }
  .tallyboard td:first-child { min-width: 8rem; }
}