@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('ibm-plex-sans-condensed-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('ibm-plex-sans-condensed-700.woff2') format('woff2')}
@font-face{font-family:'Roboto Serif';font-style:normal;font-weight:400;font-display:swap;src:url('roboto-serif-400.woff2') format('woff2')}
@font-face{font-family:'Roboto Serif';font-style:normal;font-weight:700;font-display:swap;src:url('roboto-serif-700.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url('spline-sans-mono-500.woff2') format('woff2')}

/* sheet.css — единственная таблица стилей сайта.
   Имена классов заявлены в _tokens.js CLASSES и померены по 224 соседям; незаявленное имя
   роняет сборку через Proxy в generate.js.

   ⚠ Внутри комментариев не должно быть последовательности «звёздочка-слэш» даже в примерах:
   она закрывает комментарий досрочно, и :root молча пропадает целиком вместе с палитрой.

   Контраст на тёмных полосах чиним ПЕРЕМЕННОЙ, а не парным правилом .coursedark X: одна и та же
   деталь (кикер, цена, подпись) со временем оказывается и на светлом фоне, и на тёмном, а парное
   правило знает только про один случай.
*/

/* ---- палитра. Копия живёт в _tokens.js VARS, generate.js сверяет их на старте ---- */
:root {
  --bgn-graphite: #17181b;
  --bgn-graphite-soft: #282a30;
  --bgn-paper: #ffffff;
  --bgn-paper-warm: #f6f4f0;
  --bgn-bone: #eae5db;
  --bgn-slate: #5a5e6b;
  --bgn-amber: #f2ae0c;
  --bgn-amber-lit: #ffc63d;
  --bgn-amber-ink: #8a5c00;
  --bgn-jade: #1d7a68;
  --bgn-jade-lit: #5ab1a1;
  --bgn-brass: #8e8772;
  --bgn-rule: rgba(23, 24, 27, .14);
  --bgn-rule-dark: rgba(255, 255, 255, .18);
  --bgn-display: 'IBM Plex Sans Condensed', 'Arial Narrow', sans-serif;
  --bgn-text: 'Roboto Serif', Georgia, serif;
  --bgn-mono: 'Spline Sans Mono', ui-monospace, monospace;

  /* Роли, которые переопределяет тёмная полоса. Всё, что на ней меняет цвет, ходит СЮДА. */
  --bgn-ink: var(--bgn-graphite);
  --bgn-ink-soft: var(--bgn-slate);
  --bgn-kick: var(--bgn-amber-ink);
  --bgn-hair: var(--bgn-rule);
  --bgn-link: var(--bgn-jade);
}

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

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

body {
  margin: 0;
  background: var(--bgn-paper);
  color: var(--bgn-ink);
  font-family: var(--bgn-text);
  font-size: clamp(1rem, .955rem + .21vw, 1.115rem);
  line-height: 1.62;
}

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

a { color: var(--bgn-link); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--bgn-amber-ink);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  font-family: var(--bgn-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.005em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.7rem); }
h2 { font-size: clamp(1.6rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.15rem, 1.02rem + .55vw, 1.45rem); }
p { margin: 0 0 1em; }

/* ---- каркас ------------------------------------------------------------------------------ */
/* ⚠ Ширина контейнера — произвольный выбор образца, то есть настоящий футпринт: пара
   min(1180px, 100% - 40px) стоит у evve, swurfer и lomon. Своя. */
.etabliwrap { width: min(1216px, 100% - 3rem); margin-inline: auto; }
.etablimain { display: block; }
.etablirow { display: grid; gap: 1.4rem; }

.crownskip {
  position: absolute; left: -9999px; top: 0;
  background: var(--bgn-graphite); color: var(--bgn-bone);
  padding: .7rem 1.1rem; z-index: 40;
}
.crownskip:focus { left: .6rem; top: .6rem; }

/* ---- шапка ------------------------------------------------------------------------------- */
.etablihead {
  position: sticky; top: 0; z-index: 30;
  background: var(--bgn-paper);
  border-bottom: 1px solid var(--bgn-rule);
}
.crownledge {
  display: flex; align-items: center; gap: 1.4rem;
  min-height: 4.4rem; padding-block: .5rem;
}
.crownmark {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--bgn-display); font-weight: 700;
  font-size: 1.42rem; letter-spacing: .085em;
  color: var(--bgn-graphite); text-decoration: none; flex: none;
}
.crownnav {
  display: flex; flex-wrap: wrap; gap: .2rem 1.15rem;
  margin-left: auto; font-family: var(--bgn-display); font-size: .96rem;
}
.crownnav a {
  color: var(--bgn-graphite); text-decoration: none;
  padding: .35rem 0; border-bottom: 2px solid transparent;
}
.crownnav a:hover { border-bottom-color: var(--bgn-amber); }
.crowncta { flex: none; }

/* ---- полосы-секции ----------------------------------------------------------------------- */
.courseband { padding-block: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); }
.courseplain { background: var(--bgn-paper); }
.coursetint { background: var(--bgn-paper-warm); }
.coursedark {
  background: var(--bgn-graphite);
  /* Одно переопределение ролей на всю полосу — потомки красятся сами, включая те, которых
     на момент правки ещё не существовало. */
  --bgn-ink: var(--bgn-bone);
  --bgn-ink-soft: #b9b3a7;
  --bgn-kick: var(--bgn-amber-lit);
  --bgn-hair: var(--bgn-rule-dark);
  --bgn-link: var(--bgn-amber-lit);
  color: var(--bgn-ink);
}
/* Обратная сторона того же приёма, и ровно на ней ловится баг. Полоса переопределяет роли под
   свой графитовый фон — а плитка внутри полосы стелет СВОЙ бумажный фон и роли при этом
   наследует. Костяной текст ложится на белое: рейл на главной (.drawerslat в тёмном герое)
   читался 1.2:1, подпись под ним 2.2:1. Правило симметрично .coursedark: кто завёл светлую
   заливку — тот возвращает светлый набор ролей ОДИН раз на всё поддерево, а не красит каждую
   свою строчку отдельно. Новый потомок плитки покрасится сам.
   ⚠ Сюда дописывается каждый блок со своей светлой заливкой И текстом внутри. Рамки под
   картинку (.toolsnap, .sightframe, .deskshot) не в счёт — в них текста нет.
   Глазами это не ловится: костяной по белому выглядит не поломкой, а «деликатным серым», —
   потому и стоит счётчик _tmp/contrast.js. */
.toolplate, .drawerslat, .benchquote {
  --bgn-ink: var(--bgn-graphite);
  --bgn-ink-soft: var(--bgn-slate);
  --bgn-kick: var(--bgn-amber-ink);
  --bgn-hair: var(--bgn-rule);
  --bgn-link: var(--bgn-jade);
  color: var(--bgn-ink);
}

.coursekick {
  font-family: var(--bgn-mono); font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--bgn-kick); margin: 0 0 .8rem;
}
.coursetitle { margin-bottom: .35rem; }
.coursesub { color: var(--bgn-ink-soft); max-width: 62ch; margin-bottom: 2rem; }
.coursemid { display: flex; align-items: baseline; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* ---- кнопки ------------------------------------------------------------------------------ */
.etablibtn, .etablighost, .etablibuy {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--bgn-display); font-weight: 700; font-size: 1rem;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .82rem 1.5rem; border-radius: 2px; border: 2px solid transparent;
  text-decoration: none; cursor: pointer; line-height: 1.2;
}
/* Янтарь как ТЕКСТ не годится (1.8:1 по белому) — только заливка под графитовой надписью. */
.etablibtn { background: var(--bgn-amber); color: var(--bgn-graphite); }
.etablibtn:hover { background: var(--bgn-amber-lit); }
.etablighost { background: transparent; color: var(--bgn-ink); border-color: var(--bgn-hair); }
.etablighost:hover { border-color: var(--bgn-kick); }
.etablibuy {
  background: var(--bgn-graphite); color: var(--bgn-bone);
  width: 100%; font-size: .96rem;
}
.etablibuy:hover { background: var(--bgn-graphite-soft); }

/* ---- первый экран ------------------------------------------------------------------------ */
.benchsplit { display: grid; gap: 2.6rem; align-items: center; }
/* ⚠ min-width: 0 — не украшение. У ячейки сетки минимальная ширина по умолчанию равна
   min-content её содержимого, а внутри лежит рейл из пяти карточек. Пока стояло minmax(9.5rem,…),
   рейл требовал 5×9.5rem и ЭТИМ задавал ширину всей полосе: документ раздувало до 648px на
   телефоне и 842px на планшете, заголовок героя уезжал за правый край. На кадре это читалось
   как обрезка съёмки — ровно тот артефакт, про который у нас записано «ширина <500 обрезается
   справа», — поэтому и считаем ширину документа, а не смотрим глазами (_tmp/overflow.js). */
.benchsplit > * { min-width: 0; }
/* Рейл лежит ПОД текстом на всю ширину, а не сбоку от него. Сбоку ему доставалось около 560px
   на пятерых, то есть по 100px на карточку, — а в карточке название вещи, и «Professional»
   в сто пикселей не влезает ни при каком кегле: слово обрезалось прямо посередине. Полная
   ширина даёт по 215px, и название разбивается на нормальные строки. Поэтому у .benchsplit
   и нет второй колонки на широком экране — это не забытое правило. */
.benchcopy { max-width: 46rem; }
.benchcopy p { color: var(--bgn-ink-soft); max-width: 54ch; font-size: 1.1em; }
.benchlink { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; }
.benchview { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .9rem; }

/* ---- usp-полоса и списки ----------------------------------------------------------------- */
.gaugebar { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.gaugeitem h3 { margin-bottom: .3rem; }
.gaugeitem p { color: var(--bgn-ink-soft); margin: 0; font-size: .96em; }
.filelist { margin: 0 0 1em; padding-left: 1.15rem; }
.filelist li { margin-bottom: .4em; }

/* ---- пиллы-запросы ----------------------------------------------------------------------- */
.pegrow { display: flex; flex-wrap: wrap; gap: .6rem; }
.pegpill {
  display: inline-block; padding: .5rem 1rem; border: 1px solid var(--bgn-hair);
  border-radius: 999px; text-decoration: none; color: var(--bgn-ink);
  font-family: var(--bgn-display); font-size: .95rem;
}
.pegpill:hover { border-color: var(--bgn-kick); background: var(--bgn-paper-warm); }

/* ---- плитка товара ----------------------------------------------------------------------- */
.toolspread { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.toolplate {
  display: flex; flex-direction: column;
  background: var(--bgn-paper); border: 1px solid var(--bgn-rule);
}
.coursedark .toolplate, .coursetint .toolplate { border-color: transparent; }
.toolsnap {
  /* ⚠ min-height:0 обязателен: без него флекс-потомок с aspect-ratio раздувает плитку и
     сетка разъезжается. Картинка абсолютная — иначе узкий инструмент растянет коробку. */
  position: relative; min-height: 0; aspect-ratio: 4 / 3;
  background: var(--bgn-paper); overflow: hidden;
}
.toolsnap img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: .9rem;
}
.toolname {
  font-family: var(--bgn-display); font-weight: 600; font-size: 1.02rem;
  line-height: 1.25; margin: 0 0 .45rem;
}
.toolname a { color: var(--bgn-graphite); text-decoration: none; }
.toolname a:hover { text-decoration: underline; text-underline-offset: 2px; }
.toolbadge {
  display: inline-block; font-family: var(--bgn-mono); font-size: .78rem;
  letter-spacing: .05em; color: var(--bgn-amber-ink);
  background: var(--bgn-bone); padding: .12rem .45rem; margin-bottom: .5rem;
}
.tooltrait { padding: 1rem 1.05rem 0; flex: 1 1 auto; }
.toolact { padding: .3rem 1.05rem 1.05rem; }
.toolworth {
  font-family: var(--bgn-display); font-weight: 700; font-size: 1.24rem;
  color: inherit; margin: 0 0 .7rem;
}
.worthline { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }

/* ---- рейтинг полосой, а не звёздами (строка со звёздами стоит в разметке 48 соседей) ------ */
.wearstrip { display: flex; align-items: center; gap: .5rem; font-size: .82rem; color: var(--bgn-ink-soft); }
.beatline {
  position: relative; width: 4.2rem; height: .3rem; flex: none;
  background: var(--bgn-hair); border-radius: 2px; overflow: hidden;
}
.beatline span { position: absolute; inset: 0 auto 0 0; background: var(--bgn-amber); }

/* ---- плитки разделов --------------------------------------------------------------------- */
.drawerbay { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); }
.drawerslat {
  display: flex; flex-direction: column; min-height: 0;
  text-decoration: none; color: var(--bgn-ink);
  border: 1px solid var(--bgn-hair); background: var(--bgn-paper);
}
.drawerslat:hover { border-color: var(--bgn-kick); }
.drawerslat figure { margin: 0; position: relative; aspect-ratio: 5 / 4; overflow: hidden; min-height: 0; }
.drawerslat img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: .8rem; }
.drawerslat b {
  font-family: var(--bgn-display); font-size: 1.06rem; font-weight: 700;
  padding: .85rem .9rem .15rem; display: block;
}
.drawerslat small { font-family: var(--bgn-mono); font-size: .76rem; color: var(--bgn-ink-soft); padding: 0 .9rem .9rem; }

/* ---- полоса статистики ------------------------------------------------------------------- */
.hallband { display: grid; gap: 1.6rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.hallnum { font-family: var(--bgn-display); font-weight: 700; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3.1rem); line-height: 1; color: var(--bgn-kick); }
.halllabel { color: var(--bgn-ink-soft); font-size: .95em; margin-top: .4rem; }

/* ---- шаги и справочная таблица ----------------------------------------------------------- */
.routecols { display: grid; gap: 2.6rem; }
.routeflow { counter-reset: rung; list-style: none; margin: 0; padding: 0; }
.routerung { counter-increment: rung; position: relative; padding-left: 3.1rem; margin-bottom: 1.5rem; }
.routerung::before {
  content: counter(rung); position: absolute; left: 0; top: -.1rem;
  font-family: var(--bgn-mono); font-size: 1.15rem; color: var(--bgn-graphite);
  background: var(--bgn-amber); width: 2.2rem; height: 2.2rem;
  display: grid; place-items: center;
}
.refrows { width: 100%; border-collapse: collapse; font-size: .95em; }
.refrows th, .refrows td { text-align: left; padding: .55rem .7rem; border-bottom: 1px solid var(--bgn-hair); }
.refrows th { font-family: var(--bgn-display); font-size: .88rem; letter-spacing: .05em; text-transform: uppercase; }
.refrows td:first-child, .refrows td:nth-child(2) { font-family: var(--bgn-mono); font-size: .9em; white-space: nowrap; }

/* ---- spotlight --------------------------------------------------------------------------- */
.sightwrap { display: grid; gap: 2.4rem; align-items: center; }
.sightframe { position: relative; aspect-ratio: 4 / 3; background: var(--bgn-paper); overflow: hidden; min-height: 0; }
.sightframe img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.2rem; }
.sightbody p { color: var(--bgn-ink-soft); }

/* ---- уход, миссия, промо-дуэт ------------------------------------------------------------ */
.handleduo { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }
.handlelist { border: 1px solid var(--bgn-hair); padding: 1.4rem 1.5rem; }
.handlelist h3 { margin-bottom: .6rem; }
.handlelist ul { margin: 0; padding-left: 1.1rem; }
.handlelist li { margin-bottom: .45em; }
.oathpanel { max-width: 68ch; }
.yokeshelf { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.yokepanel {
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  border: 1px solid var(--bgn-hair); display: flex; flex-direction: column;
}
.yokepanel p { color: var(--bgn-ink-soft); flex: 1 1 auto; }

/* ---- SEO-заметка и цитаты ---------------------------------------------------------------- */
.filenote { max-width: 76ch; }
.filelede { font-size: 1.1em; }
.filebody h3 { margin-top: 1.8rem; }
/* ⚠ Здесь стоял потолок .filenotepic — размер растровой формулировки на странице «How this
   catalogue is paid» (560px широкая отрисовка, 330px узкая, граница 736px в пару к media у
   <source>). Страницу удалили, обеих отрисовок больше нет; правило было бы мёртвым. Картинка
   подвала своего потолка не просит: у неё одна мера и обычные width/height на <img>. */
/* Цитат шесть, и колонок должно быть три, а не четыре: при minmax(17rem) в контейнер 1216px
   встаёт четвёрка, и второй ряд остаётся вдвоём — шестёрка читается как ряд из четырёх плюс
   обрывок. 23rem даёт ровно три колонки, то есть два полных ряда.
   min(100%,…) — иначе на узком экране колонка окажется шире самого экрана. */
.benchtalk { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); }
.benchquote { margin: 0; padding: 1.4rem 1.5rem; background: var(--bgn-paper); border-left: 3px solid var(--bgn-amber); }
.benchquote p { font-style: italic; }
.benchname { font-family: var(--bgn-mono); font-size: .82rem; color: var(--bgn-ink-soft); font-style: normal; }
.signoffband { text-align: center; }
.signoffband p { color: var(--bgn-ink-soft); max-width: 56ch; margin-inline: auto; }

/* ---- крошки и рейл заметок --------------------------------------------------------------- */
.chaincrumb { font-family: var(--bgn-mono); font-size: .8rem; padding-block: 1rem; color: var(--bgn-ink-soft); }
.chaincrumb a { color: var(--bgn-ink-soft); }
.chaincrumb span { margin-inline: .45rem; opacity: .5; }
.notereel { display: grid; gap: 1.3rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); }

/* ---- карточка вещи ----------------------------------------------------------------------- */
.deskmain { display: grid; gap: 2.4rem; align-items: start; }
.deskshot { position: relative; aspect-ratio: 1 / 1; background: var(--bgn-paper); border: 1px solid var(--bgn-rule); overflow: hidden; min-height: 0; }
.deskshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 1.4rem; }
.deskside > p { color: var(--bgn-ink-soft); }
.deskworth { font-family: var(--bgn-display); font-weight: 700; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.3rem); color: inherit; margin: 0; }
.deskspec { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95em; }
.deskspec th, .deskspec td { text-align: left; padding: .5rem .1rem; border-bottom: 1px solid var(--bgn-hair); vertical-align: top; }
.deskspec th { font-family: var(--bgn-display); font-weight: 600; width: 40%; }
.deskspec td { font-family: var(--bgn-mono); font-size: .88em; }
.deskword h2 { margin-top: 1.6rem; }
.desktrail { margin-top: 1.2rem; }
/* Замыкающая полоса «цена и своя кнопка»: у соседей типовая дыра — страница кончается рядом
   ЧУЖИХ вещей, и за кнопкой на читаемую надо листать вверх. Ставят её лишь 8% ветки. */
.deskclose { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }
.deskclose .etablibuy { width: auto; min-width: 16rem; }
/* ⚠ Заливка кнопки — графит, и полоса эта тоже графитовая: кнопка сливается с фоном начисто.
   На кадре это выглядит не поломкой, а надписью, висящей в пустоте справа, —
   нажать её в голову не приходит. Записанное правило «элементам со своей заливкой правка на
   тёмном не нужна» здесь врёт ровно потому, что своя заливка СОВПАЛА с фоном полосы.
   Перекрашивать нельзя: надпись — растр цвета кости, и по янтарю или кости она пропадёт сама.
   Поэтому возвращаем кнопке границу: заливка та же, а край делает её кнопкой. */
.deskclose .etablibuy { border-color: var(--bgn-bone); }
.deskclose .etablibuy:hover { border-color: var(--bgn-amber); }

/* ---- указатель по номерам ---------------------------------------------------------------- */
/* ⚠ Не grid, а колонки. Раньше стоял grid с align-items:start — он лечил РАСТЯНУТУЮ ячейку
   (короткая линейка переставала быть пустой коробкой в полтора экрана), но не лечил дыру:
   высоту РЯДА всё равно задаёт самая длинная линейка, и рядом с ней остаётся пустое место.
   У 6767 одиннадцать номеров, у соседей по ряду — один-два, и на живом кадре это выглядело
   провалом почти в тысячу пикселей: страница будто кончилась и началась заново.
   Дыра пряталась ровно потому, что старая съёмка резала указатель на 5000px из 17293 — до неё
   кадр не доезжал ни разу.
   Колонки высоту не равняют по рядам, а разливают линейки подряд и балансируют столбцы, так
   что пустого места не остаётся вовсе. Номера при этом читаются сверху вниз по столбцу — для
   указателя это нормальный порядок, печатные указатели набирают так же.
   break-inside: avoid держит линейку целой: без него список одного номера разорвёт между
   столбцами, и половина номеров окажется под чужим заголовком. */
.indexgrid { columns: 13rem 5; column-gap: 1rem; }
.indexcell { border: 1px solid var(--bgn-hair); padding: .85rem 1rem; break-inside: avoid; margin-bottom: 1rem; }
.indexcell ul { margin: .4rem 0 0; padding-left: 1rem; font-size: .9em; }
.indexcell li { margin-bottom: .2em; }
.indexref { font-family: var(--bgn-mono); font-weight: 500; font-size: 1.05rem; color: var(--bgn-amber-ink); }

/* ---- подборщик --------------------------------------------------------------------------- */
.jobslate { display: grid; gap: 1.8rem; }
.jobrung fieldset { border: 1px solid var(--bgn-hair); padding: 1.1rem 1.3rem; margin: 0 0 1.2rem; }
.jobrung legend { font-family: var(--bgn-display); font-weight: 700; font-size: 1.05rem; padding-inline: .4rem; }
.jobbank { display: flex; flex-wrap: wrap; gap: .55rem; }
.jobchoice {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  border: 1px solid var(--bgn-hair); padding: .45rem .85rem; border-radius: 999px;
  font-family: var(--bgn-display); font-size: .95rem;
}
.jobchoice input { accent-color: var(--bgn-amber-ink); }
.jobchoice:hover { border-color: var(--bgn-kick); }
.jobyield { min-height: 12rem; }

/* ---- подвал ------------------------------------------------------------------------------ */
.soclefoot {
  background: var(--bgn-graphite); color: var(--bgn-bone);
  --bgn-ink: var(--bgn-bone);
  --bgn-ink-soft: #b9b3a7;
  --bgn-hair: var(--bgn-rule-dark);
  --bgn-link: var(--bgn-amber-lit);
  padding-block: 3.2rem 2.2rem; margin-top: 0;
}
.soclecols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.soclecols h4 { font-size: .92rem; letter-spacing: .12em; text-transform: uppercase; color: var(--bgn-ink-soft); }
.soclecols ul { list-style: none; margin: 0; padding: 0; }
.soclecols li { margin-bottom: .4em; }
.soclecols a { color: var(--bgn-bone); text-decoration: none; }
.soclecols a:hover { text-decoration: underline; text-underline-offset: 2px; }
/* ⚠ Браузер набирает <address> курсивом; тег взят за смысл, вид возвращаем руками. */
.soclefine {
  font-style: normal; margin-top: 2.4rem; padding-top: 1.4rem;
  border-top: 1px solid var(--bgn-hair); color: var(--bgn-ink-soft); font-size: .88rem;
}
.soclefine p { max-width: 78ch; }
/* Сам адрес набран моноширинным и полным костяным: он единственная строка в подвале, которую
   переписывают на конверт, и приглушённый серый для этого не годится. Соседний абзац про то,
   что это не магазин, остаётся приглушённым — иначе оговорка спорит с адресом за внимание. */
.socleplace {
  font-family: var(--bgn-mono); font-size: .92rem; color: var(--bgn-bone);
  margin-top: 1rem; margin-bottom: .3rem;
}

/* ---- раскладки пошире -------------------------------------------------------------------- */
@media (min-width: 60rem) {
  .routecols { grid-template-columns: 1fr 1fr; }
  .sightwrap { grid-template-columns: .9fr 1.1fr; }
  .deskmain { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

@media (max-width: 46rem) {
  /* На узком экране рейл первого экрана листается вбок, а не рушится в столбец из пяти плиток. */
  .benchview {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: -1.5rem; padding-inline: 1.5rem; gap: .8rem;
  }
  .benchview > * { flex: 0 0 62%; scroll-snap-align: start; }
  /* ⚠ Справочная таблица не ужимается: два первых столбца — номера Bergeon, у них nowrap, иначе
     «6767-F» переносится посередине артикула. На 390px ей нужно 415px, и лишние 25 раздували
     ВЕСЬ документ: страница уезжала вбок целиком, а виноватой выглядела вёрстка героя.
     display:block отдаёт прокрутку самой таблице; thead и tbody браузер заворачивает в одну
     анонимную таблицу, поэтому столбцы остаются сведёнными. */
  .refrows { display: block; overflow-x: auto; }
  .crownnav { font-size: .9rem; gap: .2rem .8rem; }
  .crowncta { display: none; }
}