/* PISOL stylesheet. The token block below is written by the site builder from _tokens.js:
   colours, fonts and class names have exactly one home and this file is not it.
   Contrast on the one dark band is handled by re-declaring variables, never by paired
   rules such as .dark h2 - a paired rule fixes one element and knows nothing about the next. */

:root { --psl-ink: #2c2d31; --psl-paper: #ffffff; --psl-cream: #faf5ec; --psl-flame: #e05c14; --psl-flame-deep: #b8450c; --psl-sage: #8ca47b; --psl-sage-deep: #4f6543; --psl-wood: #c9954f; --psl-stone: #6b6a66; --psl-star: #8a5d14; --psl-kick: var(--psl-flame-deep); --psl-rule: rgba(44,45,49,.14); --psl-rule-dark: rgba(255,255,255,.22); --psl-display: 'Podkova', Georgia, serif; --psl-text: 'Pathway Extreme', system-ui, sans-serif; }

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

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

body {
  margin: 0;
  background: var(--psl-paper);
  color: var(--psl-ink);
  font-family: var(--psl-text);
  font-size: 17px;
  line-height: 1.62;
  font-variation-settings: 'opsz' 16;
}

img { max-width: 100%; }

a { color: var(--psl-flame-deep); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--psl-flame);
  outline-offset: 2px;
}

h1, h2, h3, h4 {
  font-family: var(--psl-display);
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -0.005em;
  margin: 0 0 14px;
}

/* ⚠ address идёт здесь же, а не отдельным правилом: в браузерном сборнике у него НЕТ нижнего
   поля, и оговорка «это стол, а не магазин» прилипала к почтовому адресу вплотную — читалась
   четвёртой строкой самого адреса, как будто в индексе продолжение. Курсив тем же правилом
   снимаем: тег берут за смысл, а вид у него свой. */
p, address { margin: 0 0 16px; font-style: normal; }

/* ---- frame -------------------------------------------------------------------------- */

.boardleaf {
  max-width: 1214px;
  margin: 0 auto;
  padding-left: clamp(18px, 5vw, 44px);
  padding-right: clamp(18px, 5vw, 44px);
}

.jumpover {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 30;
  background: var(--psl-flame-deep);
  color: #fff;
  padding: 12px 18px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}

.jumpover:focus { left: 0; }

/* ---- header ------------------------------------------------------------------------- */

.hobhead {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--psl-paper);
  border-bottom: 1px solid var(--psl-rule);
}

.hobhead .boardleaf {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  flex-wrap: wrap;
}

.pisolmark {
  display: inline-flex;
  align-items: center;
  margin-right: auto;
  line-height: 0;
}

/* Никакого размера здесь нет намеренно: знак нарисован _mk-art.js ровно в 132x34 css-px, и
   эти два числа приезжают в атрибуты <img> из _art.json. Продублируй их правилом — и после
   перерисовки знака таблица стилей начнёт спорить с разметкой, растягивая картинку. */
.pisolmark img { display: block; max-width: 100%; }

.hobfold {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1.5px solid var(--psl-rule);
  border-radius: 9px;
  padding: 8px 13px;
  font: inherit;
  font-size: 15px;
  color: inherit;
  cursor: pointer;
}

.hobmenu {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.hobmenu a {
  display: inline-block;
  padding: 8px 11px;
  border-radius: 8px;
  color: var(--psl-ink);
  text-decoration: none;
  font-size: 15.5px;
}

.hobmenu a:hover { background: var(--psl-cream); color: var(--psl-flame-deep); }

.headpick { white-space: nowrap; }

/* ---- bands and section heads --------------------------------------------------------- */

.milkband, .crustband, .ironband { padding: clamp(38px, 6vw, 74px) 0; }

.milkband { background: var(--psl-paper); }
.crustband { background: var(--psl-cream); }

/* The only dark stripe on the site. Everything inside reads the same variables, so a kicker
   or a star that later moves onto this band keeps its contrast without a second rule. */
.ironband {
  background: var(--psl-sage-deep);
  --psl-ink: #ffffff;
  --psl-kick: #fbe0cb;
  --psl-stone: #e8ece4;
  --psl-star: #f0d089;
  --psl-rule: var(--psl-rule-dark);
  --psl-paper: transparent;
  color: #fff;
}

.stripkick {
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--psl-kick);
  margin: 0 0 9px;
}

.striphead {
  font-size: clamp(25px, 3.4vw, 37px);
  color: inherit;
}

.stripdeck {
  max-width: 63ch;
  color: var(--psl-stone);
  margin-bottom: 26px;
}

/* ---- buttons -------------------------------------------------------------------------- */

/* The buy label is a picture, so this button holds no words of its own. */
.spoutbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--psl-flame-deep);
  border: 0;
  border-radius: 9px;
  padding: 11px 20px;
  cursor: pointer;
  font: inherit;
  line-height: 0;
}

.spoutbtn:hover { background: var(--psl-flame); }

/* Подпись набрана картинкой в 110x17 css-px и ставится один в один — масштабировать её
   правилом нельзя: у растра нет запаса, и на дробном коэффициенте буквы замыливаются. */
.spoutbtn img { display: block; }

.rimedge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.6px solid var(--psl-flame-deep);
  border-radius: 9px;
  padding: 10px 19px;
  color: var(--psl-flame-deep);
  background: none;
  text-decoration: none;
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.rimedge:hover { background: var(--psl-flame-deep); color: #fff; }

.ironband .rimedge { border-color: #fff; color: #fff; }
.ironband .rimedge:hover { background: #fff; color: var(--psl-sage-deep); }

/* ---- hero ----------------------------------------------------------------------------- */

.openkitchen {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.opencopy h1 {
  font-size: clamp(31px, 5vw, 51px);
  margin-bottom: 16px;
}

.opencopy > p {
  font-size: 18.5px;
  color: var(--psl-stone);
  max-width: 46ch;
}

/* Две кнопки hero — обе .rimedge, но первая закрашена: одинаковые контурные кнопки рядом
   не говорят, какая главная, а заводить ради этого 64-е имя класса значит ещё раз мерить
   его по 245 соседям ради одного правила. .spoutbtn сюда не годится: внутри неё лежит
   растровая подпись «Check the price», и на ссылке в каталог она бы врала. */
.opencopy .rimedge { margin-right: 10px; }

.opencopy .rimedge:first-of-type { background: var(--psl-flame-deep); color: #fff; }

.opencopy .rimedge:first-of-type:hover { background: var(--psl-flame); border-color: var(--psl-flame); }

.openshelf {
  background: var(--psl-cream);
  border-radius: 16px;
  padding: 18px;
  display: grid;
  gap: 14px;
}

.openshelf .tileshot { border-radius: 12px; }

.openshelf p { margin: 0; font-size: 15px; color: var(--psl-stone); }

/* ---- shelf tiles, sorting pills, the pair ---------------------------------------------- */

.joblist {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
  gap: 18px;
}

/* Заливка лежит на КАРТОЧКЕ, а не на её половинах: половины разной высоты, и любая заливка
   на них оставляет полосу чужого цвета там, где текст короче соседского. */
.jobdoor {
  display: flex;
  flex-direction: column;
  background: var(--psl-cream);
  border: 1px solid var(--psl-rule);
  border-radius: 13px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.jobdoor:hover { border-color: var(--psl-flame); }

/* ⚠ flex: none обязателен обеим половинам плитки. Высота снимка задана через aspect-ratio, и
   без запрета на сжатие сетка меряет ряд по картинке, а подпись потом ужимает под остаток:
   ряд выходит 321px при содержимом 374px, текст режется на полуслове, а счётчик «N tools» не
   показывается вовсе. Обрезка молчаливая — overflow: hidden рисует ровный край, и плитка
   выглядит задуманной. Проверять замером (_tmp/box.js), а не глазами: разница в полстроки. */
/* ⚠ :first-child здесь обязателен. Подпись плитки — тоже <span>, и голый «.jobdoor > span»
   красил её в цвет подложки снимка и запрещал ей растягиваться: у короткой плитки под текстом
   оставалась белая полоса в четверть сотни пикселей, ровно на цвет карточки. Выглядит как
   небрежная вёрстка, а причина — селектор, попавший в два элемента вместо одного. */
.jobdoor > span:first-child {
  display: block;
  position: relative;
  aspect-ratio: 5 / 3;
  flex: none;
  background: var(--psl-cream);
}

.jobdoor > span:first-child img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Подпись — своя колонка, чтобы счётчику было куда прижаться. Растянуть саму подпись мало:
   она и так занимала всю высоту, а счётчик всплывал сразу под абзацем. */
.jobline {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  padding: 14px 16px 18px;
}

.jobline h3 { font-size: 20px; margin-bottom: 6px; }

.jobline p { font-size: 14.5px; color: var(--psl-stone); margin: 0; }

/* ⚠ margin-top: auto, а не фиксированный отступ. Описания полок разной длины, и у той, что на
   строку короче, счётчик вставал на 23px выше соседских — четыре плитки одного ряда с
   подписями на трёх разных высотах. На глаз это ловится только рядом; замер — _tmp/catfoot.js,
   он сверяет верхние координаты всех счётчиков и требует одного числа.
   Минимальный зазор держит padding-top: у margin-top: auto его нет, и на самой длинной плитке
   счётчик прилипал бы к последней строке абзаца. */
.jobline b {
  display: block;
  margin-top: auto;
  padding-top: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--psl-kick);
}

.jobpill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1.4px solid var(--psl-rule);
  border-radius: 999px;
  padding: 8px 16px;
  margin: 0 8px 9px 0;
  background: var(--psl-paper);
  text-decoration: none;
  color: inherit;
  font-size: 15.5px;
}

.jobpill:hover { border-color: var(--psl-flame); color: var(--psl-flame-deep); }

.jobpill i { font-style: normal; color: var(--psl-stone); font-size: 13.5px; }

.benchpair {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
}

.benchpair > div {
  border-radius: 15px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--psl-rule);
  display: flex;
  flex-direction: column;
}

.benchpair > div:first-child { background: var(--psl-cream); }

.benchpair > div:last-child {
  background: var(--psl-paper);
  border-left: 5px solid var(--psl-flame);
}

.benchpair h2 { font-size: clamp(22px, 2.6vw, 28px); }

.benchpair p { color: var(--psl-stone); }

.benchpair .rimedge, .benchpair .spoutbtn { align-self: flex-start; margin-top: auto; }

/* ---- product tile --------------------------------------------------------------------- */

.tilecase { display: flex; flex-direction: column; }

.tiletool {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 9px;
  background: var(--psl-paper);
  border: 1px solid var(--psl-rule);
  border-radius: 13px;
  padding: 12px 13px 15px;
  text-decoration: none;
  color: inherit;
}

.tiletool:hover { border-color: var(--psl-flame); }

/* min-height keeps the picture from stretching the flex item past its own box */
.tileshot {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border-radius: 9px;
  overflow: hidden;
}

.tileshot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
}

.tilelabel {
  font-family: var(--psl-display);
  font-weight: 600;
  font-size: 16.5px;
  line-height: 1.28;
}

/* margin-top: auto прижимает строку цены к низу карточки, чтобы у соседей по ряду она стояла
   на одной линии при названиях разной длины. Работает это, только пока цена — ПОСЛЕДНЯЯ вещь
   в колонке: плашка отделок печатается выше именно поэтому (см. tile() в generate.js). */
.tilemeta {
  margin-top: auto;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.tilemeta b { font-size: 17.5px; color: var(--psl-kick); }

.starnick {
  color: var(--psl-star);
  font-size: 14.5px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.starnick small {
  color: var(--psl-stone);
  font-size: 12.5px;
  letter-spacing: 0;
  margin-left: 5px;
}

.tonedots {
  align-self: flex-start;
  font-size: 12.5px;
  color: var(--psl-stone);
  background: var(--psl-cream);
  border-radius: 999px;
  padding: 2px 10px;
}

.tileact { margin-top: 9px; width: 100%; }

/* ---- the two homepage grids ------------------------------------------------------------ */

/* narrow screens scroll this row sideways instead of stacking seven cards down the page */
.mostused {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(224px, 78%);
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  padding-bottom: 8px;
}

.mostused > * { scroll-snap-align: start; }

.freshtools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 18px;
}

/* ---- guide teasers ---------------------------------------------------------------------- */

.notestrip {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(258px, 1fr));
  gap: 18px;
}

.notestrip a {
  display: block;
  padding: 20px 21px 22px;
  border: 1px solid var(--psl-rule);
  border-radius: 13px;
  background: var(--psl-paper);
  text-decoration: none;
  color: inherit;
}

.notestrip a:hover { border-color: var(--psl-flame); }

.notestrip h3 { font-size: 19px; margin-bottom: 8px; }

.notestrip p { font-size: 14.5px; color: var(--psl-stone); margin: 0; }

/* Полный список заметок на хабе: строки, а не плитки. Заголовок и описание рядом на широком
   экране, друг под другом на узком — без сетки, поэтому нечему оставаться недобранным. */
.benchroll { border-top: 1px solid var(--psl-rule); }

.benchroll a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px 28px;
  padding: 20px 2px 21px;
  border-bottom: 1px solid var(--psl-rule);
  text-decoration: none;
  color: inherit;
}

.benchroll a:hover h3 { color: var(--psl-flame); }

.benchroll h3 { font-size: 21px; margin: 0; }

.benchroll p { font-size: 15px; color: var(--psl-stone); margin: 0; }

@media (min-width: 800px) {
  .benchroll a { grid-template-columns: 5fr 6fr; align-items: baseline; }
}

/* ---- mission band and the closing paragraph ----------------------------------------------- */

.makecall { max-width: 66ch; }

.makecall p { color: var(--psl-stone); font-size: 18px; }

.sidenote {
  max-width: 74ch;
  border-left: 4px solid var(--psl-wood);
  padding-left: clamp(16px, 2.4vw, 26px);
}

.sidenote h2 { font-size: 23px; }

.sidenote p { color: var(--psl-stone); margin-bottom: 0; }

/* ---- quotes (used on product pages, where the words were actually written) ------------------ */

.sinkwall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(272px, 1fr));
  gap: 18px;
}

.sinkquote {
  margin: 0;
  background: var(--psl-cream);
  border-radius: 13px;
  padding: 20px 21px;
  font-size: 15.5px;
}

.sinkquote p { margin: 0 0 12px; }

.sinksigner {
  font-style: normal;
  font-size: 13.5px;
  color: var(--psl-stone);
  letter-spacing: 0.02em;
}

/* ---- breadcrumbs ---------------------------------------------------------------------------- */

.youarehere {
  font-size: 13.5px;
  color: var(--psl-stone);
  padding: 14px 0 0;
}

.youarehere a { color: var(--psl-stone); }

.youarehere span { padding: 0 6px; opacity: 0.6; }

/* ---- product page ----------------------------------------------------------------------------- */

.toolmain {
  display: grid;
  gap: clamp(22px, 3.5vw, 46px);
  align-items: start;
  padding: 22px 0 clamp(30px, 5vw, 56px);
}

.toolshot > span {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #fff;
  border: 1px solid var(--psl-rule);
  border-radius: 15px;
  overflow: hidden;
}

.toolshot > span img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 16px;
}

.toolside h1 { font-size: clamp(25px, 3.4vw, 35px); margin-bottom: 10px; }

.toolside > .starnick { display: inline-block; margin-bottom: 14px; }

.pricesill {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--psl-cream);
  border-radius: 13px;
  padding: 16px 18px;
  margin: 18px 0;
}

.pricesill b {
  font-family: var(--psl-display);
  font-size: 27px;
  color: var(--psl-kick);
}

.pricesill em {
  flex-basis: 100%;
  font-style: normal;
  font-size: 12.5px;
  color: var(--psl-stone);
  line-height: 1.45;
}

.tonepick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.tonepick button {
  border: 1.4px solid var(--psl-rule);
  background: var(--psl-paper);
  border-radius: 9px;
  padding: 7px 14px;
  font: inherit;
  font-size: 14.5px;
  color: inherit;
  cursor: pointer;
}

.tonepick button.onhob {
  border-color: var(--psl-flame-deep);
  background: var(--psl-cream);
  font-weight: 600;
}

.toolword h2 { font-size: 22px; margin-top: 30px; }

.toolword ul { padding-left: 20px; }

.toolword li { margin-bottom: 9px; }

.specstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
}

.specstrip li {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--psl-cream);
  border-radius: 11px;
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.3;
}

.specstrip svg { flex: 0 0 auto; width: 21px; height: 21px; color: var(--psl-sage-deep); }

.howsteps {
  counter-reset: hob;
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
}

.howsteps li {
  counter-increment: hob;
  position: relative;
  padding-left: 48px;
  margin-bottom: 16px;
}

.howsteps li::before {
  content: counter(hob);
  position: absolute;
  left: 0;
  top: 0;
  width: 33px;
  height: 33px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--psl-flame-deep);
  color: #fff;
  font-family: var(--psl-display);
  font-weight: 700;
  font-size: 16px;
}

.alsofits {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: 18px;
}

/* ---- long-form pages: guides, notes, service ------------------------------------------------- */

/* A narrow column pinned to the left, not centred. It is the reading idiom of the site and it
   is the same on guides and on service pages, so the two groups do not look like two sites.
   ⚠ On a guide this leaves 366px empty to the right of the text for the whole article, and on a
   screenshot that reads like a sidebar that failed to load. It is not one. Measured with
   _tmp/readrail.js: the column is 760px inside a 1126px container, and every long-form page on
   the site sits the same way. On the service pages nothing follows the column and it reads
   fine; on a guide the full-width tile band underneath is what makes the gap noticeable, which
   is an ordinary magazine shape. Centring the column here would split the idiom in two. */
.readpage {
  max-width: 760px;
  padding: clamp(24px, 4vw, 46px) 0 clamp(34px, 5vw, 64px);
}

.readhead h1 { font-size: clamp(28px, 4vw, 41px); }

.readhead p { font-size: 18.5px; color: var(--psl-stone); }

.readsec { margin-top: 34px; }

.readsec h2 { font-size: 24px; }

.readfacts {
  background: var(--psl-cream);
  border-radius: 13px;
  padding: 22px 24px;
  margin-top: 34px;
}

.readfacts h2 { font-size: 20px; }

.readfacts ul { margin: 0; padding-left: 20px; }

.readfacts li { margin-bottom: 9px; }

.readclose {
  margin-top: 30px;
  border-top: 2px solid var(--psl-rule);
  padding-top: 20px;
}

.readpage h2 { margin-top: 32px; }

.readpage h3 { font-size: 19px; margin-top: 24px; }

.readpage dl { margin: 0; }

.readpage dt { font-family: var(--psl-display); font-weight: 700; margin-top: 22px; }

.readpage dd { margin: 6px 0 0; }

/* ---- the picker --------------------------------------------------------------------------------- */

.jobstep {
  border-top: 1px solid var(--psl-rule);
  padding: 20px 0 8px;
}

.jobstep h2 { font-size: 20px; margin-bottom: 12px; }

.jobopt {
  display: inline-flex;
  align-items: center;
  border: 1.4px solid var(--psl-rule);
  border-radius: 999px;
  background: var(--psl-paper);
  padding: 8px 17px;
  margin: 0 8px 9px 0;
  font: inherit;
  font-size: 15.5px;
  color: inherit;
  cursor: pointer;
}

.jobopt:hover { border-color: var(--psl-flame); }

.jobopt.onhob {
  border-color: var(--psl-flame-deep);
  background: var(--psl-flame-deep);
  color: #fff;
  font-weight: 600;
}

.jobout { margin-top: 26px; }

.jobout > p { color: var(--psl-stone); }

.jobout .freshtools { margin-top: 16px; }

/* ---- footer ---------------------------------------------------------------------------------------- */

.larderfoot {
  background: var(--psl-cream);
  border-top: 2px solid var(--psl-rule);
  padding: clamp(32px, 4.5vw, 54px) 0 30px;
  font-size: 15px;
}

.lardercols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 24px;
}

.lardercols h2 {
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--psl-stone);
  font-family: var(--psl-text);
  font-weight: 600;
  margin-bottom: 10px;
}

.lardercols ul { list-style: none; margin: 0; padding: 0; }

.lardercols li { margin-bottom: 7px; }

.lardercols a { color: var(--psl-ink); text-decoration: none; }

.lardercols a:hover { color: var(--psl-flame-deep); text-decoration: underline; }

.larderfine {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid var(--psl-rule);
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--psl-stone);
}

.larderfine p { margin: 0; }

/* ⚠ Ширину читаемой строки нельзя вешать на голый «.larderfine p»: оговорка подвала — тоже <p>,
   и 52ch (520px) перебивали её потолок в 380px по весу селектора (0,1,1 против 0,1,0). Картинка
   растягивалась в 1.37 раза, а с ней и набранный внутри текст: оговорка выходила крупнее того
   самого мелкого текста подвала, под который её рисовали. Глазами это читается как «шрифт не
   тот», хотя шрифт ровно тот — растянут снимок. */
.larderfine p:not(.larderstamp) { max-width: 52ch; }

/* Потолок только в px: растр набран под 380px, шире он не становится точнее, только мылится. */
.larderstamp { max-width: min(380px, 100%); }

.larderstamp img { display: block; width: 100%; height: auto; }

/* ---- wider screens ------------------------------------------------------------------------------------ */

@media (min-width: 700px) {
  .mostused {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-columns: repeat(4, 1fr);
    overflow: visible;
  }
}

@media (min-width: 900px) {
  .openkitchen { grid-template-columns: 1.08fr 0.92fr; }
  .toolmain { grid-template-columns: 1.02fr 0.98fr; }
  .larderfine { flex-wrap: nowrap; }
}

/* ---- narrow screens --------------------------------------------------------------------------------------- */

/* ⚠ Порог 1120 не круглое число «на глаз», а замер (_tmp/headfit.js): ряду шапки нужно 1015px
   содержимого, а контейнер отдаёт ширину минус 88px полей — до 1120px вьюпорта кнопка
   подборщика срывается на вторую строку и повисает под знаком. Меняешь состав шапки или кегль
   меню — перемеряй порог, иначе разъедется тихо: перенос выглядит как задуманный. */
@media (max-width: 1119px) {
  .hobmenu {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding-bottom: 10px;
  }

  .hobmenu.hobopen { display: flex; }

  .hobmenu a { padding: 11px 4px; border-bottom: 1px solid var(--psl-rule); border-radius: 0; }

  /* The picker is the main thing a visitor can do here, so it stays in the header and only
     gets smaller. The drop-down holds shelves and notes, not this button. */
  .headpick { padding: 8px 13px; font-size: 14.5px; }
}

@media (min-width: 1120px) {
  .hobfold { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}