/* Just Love. Palette read off the brand banner: hue 338, ink measured off the wordmark.
   Fonts sit in this same folder and are referenced by bare filename, because a url() in a
   stylesheet resolves against the stylesheet. A path like ../fonts/Petrona.woff2 would 404
   in silence and the page would just quietly render in a system face. */

@font-face{font-family:'Petrona';font-style:normal;font-weight:600 700;font-display:swap;src:url(Petrona.woff2) format("woff2")}
@font-face{font-family:'BeVietnamPro';font-style:normal;font-weight:400;font-display:swap;src:url(BeVietnamPro-400.woff2) format("woff2")}
@font-face{font-family:'BeVietnamPro';font-style:normal;font-weight:500;font-display:swap;src:url(BeVietnamPro-500.woff2) format("woff2")}
@font-face{font-family:'BeVietnamPro';font-style:normal;font-weight:600;font-display:swap;src:url(BeVietnamPro-600.woff2) format("woff2")}

:root{
  --inkline:#1a181b;
  --inkhush:#55494f;
  --murmur:#8d8189;
  --damask:#b94670;
  --damaskdeep:#94385a;
  --damaskink:#772d48;
  /* Тёмная слива осталась ровно для подвала. На баннере бренда крупных тёмных плоскостей
     нет вовсе, и раньше их было пять: герой, три полосы и промо-плитка. Это была не палитра
     бренда, а наследство шаблона. --nightfallup держал карточки рейла на тёмном герое и
     теперь не нужен: карточки стали белыми. */
  --nightfall:#2b1721;
  /* Полосы вместо тёмных — блаш. Он заметно гуще, чем --pillowlit2 у соседней светлой
     секции (#f9f0f4): иначе полоса перестаёт читаться полосой и страница слипается в одно
     розовое пятно. Кромка — чтобы у полосы был край, а не размытая граница. */
  --blushband:#f6dde6;
  --blushedge:#eac6d5;
  --blushtop:#fdf8fa;
  --sheeting:#fff;
  --pillowlit:#fcf8f9;
  --pillowlit2:#f9f0f4;
  --pillowlit3:#f4e1e8;
  --seamrun:#ead8e0;
  --seamdark:#5a3a49;
  --titleface:'Petrona',Georgia,serif;
  --bodyface:'BeVietnamPro',system-ui,-apple-system,Segoe UI,sans-serif;
  --gully:20px;
  --curl:14px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sheeting);color:var(--inkline);
  font:400 16px/1.6 var(--bodyface);overflow-wrap:break-word}
img{max-width:100%;height:auto;display:block}
a{color:var(--damaskink)}
h1,h2,h3{font-family:var(--titleface);font-weight:600;line-height:1.15;margin:0 0 .5em;
  letter-spacing:-.01em}
h1{font-size:clamp(1.85rem,1.2rem + 2vw,2.85rem)}
h2{font-size:clamp(1.35rem,1.1rem + .9vw,1.9rem)}
h3{font-size:1.15rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.2em}
table{border-collapse:collapse;width:100%}
button{font:inherit}

.skipover{position:absolute;left:-9999px;top:0;background:var(--damask);color:#fff;
  padding:10px 16px;z-index:60;border-radius:0 0 8px 0}
.skipover:focus{left:0}
:focus-visible{outline:3px solid var(--damask);outline-offset:2px}

.coverlet{max-width:1180px;margin:0 auto;padding:0 var(--gully)}
.coverlet-narrow{max-width:760px}

/* Sections alternate: percale plain, sateen tinted, duvet blush.
   The duvet band used to be near-black plum. Nothing on the brand banner is dark, so the
   band now carries the brand pink instead, held apart from the sateen section next to it by
   a deeper tint and by an actual edge. Everything that used to be white or near-white type
   in here has to come back down to ink — a rule that only sets the background leaves pale
   text on a pale ground, which is invisible rather than merely ugly. */
.eiderdown{padding:60px 0}
.percale{background:var(--sheeting)}
.sateen{background:var(--pillowlit2)}
.duvet{background:var(--blushband);color:var(--inkline);
  border-top:1px solid var(--blushedge);border-bottom:1px solid var(--blushedge)}
.duvet h2{color:var(--inkline)}
/* ⚠ No `.duvet a` rule here, and that is deliberate. None of the three bands holds a plain
   link — the only anchors inside them are the two buttons of the closing pair. `.duvet a` is
   (0,1,1) and beats `.latchkey-lead` at (0,1,0), so it repainted the filled button's white
   label to ink: dark type on the damask fill. Style the buttons, never the anchor. */
/* .latchkey-pale is a white outline drawn for a dark ground. It still has one on the promo
   tile, but in this band it would be white on blush, i.e. a button you cannot see. */
.duvet .latchkey-pale{background:var(--sheeting);border-color:var(--seamrun);
  color:var(--damaskink)}
.duvet .latchkey-pale:hover{background:var(--sheeting);border-color:var(--damask);
  color:var(--damaskink)}

/* ── head ─────────────────────────────────────────────────────────── */
/* Полоска над шапкой. Она НЕ липкая и уезжает при скролле: липкой полосе пришлось бы
   уступить место шапке, а две липкие плоскости съедают треть телефонного экрана. */
.nightbar{background:var(--damask);color:#fff;font-size:.85rem}
.nightbar-in{margin:0;padding:9px 0;text-align:center;line-height:1.4}
.nightbar-in a{color:#fff;text-decoration:underline;text-underline-offset:3px}
/* ⚠ Панель тянется во всю ширину шапки, а не висит под своим пунктом, поэтому опорой ей
   служит сама .headboard (sticky — это позиционированный элемент, containing block она
   создаёт). Ставить position:relative на .valance-leaf нельзя: панель схлопнется в ширину
   слова «The dresser». */
.headboard{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--seamrun)}
.headboard-in{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:70px}
.markword{display:block;line-height:0}
.markword img{height:34px;width:auto}
/* ⚠ `align-self:stretch` тут не украшение, а единственное, что смыкает пункт с панелью.
   Замер `_menugap.js`: шапка 71px, а пункт «The dresser» — 38.3px и стоит по центру, значит
   под ним оставалось 15.8px, где указатель уже не на .valance-leaf, но ещё не на .dropleaf,
   и меню захлопывалось на полпути. `.headboard-in` держит `align-items:center`, поэтому
   растянуть надо ОБА: сперва .valance (иначе тянуться не к чему — сам ряд высотой 38px),
   потом .valance-leaf внутри него. Ссылки остаются по центру, вид не меняется. */
.valance{display:flex;align-items:center;gap:26px;align-self:stretch}
.valance a{color:var(--inkline);text-decoration:none;font-weight:500;font-size:.95rem;
  padding:6px 0;border-bottom:2px solid transparent}
.valance a:hover{color:var(--damaskink);border-bottom-color:var(--damask)}
.valance a[aria-current="page"]{color:var(--damaskink);border-bottom-color:var(--damask)}
.pullcord{display:none;width:44px;height:40px;background:none;border:1px solid var(--seamrun);
  border-radius:10px;padding:9px 10px;cursor:pointer}
.pullcord span{display:block;height:2px;background:var(--inkline);border-radius:2px}
.pullcord span + span{margin-top:5px}

/* Панель под «The dresser». Открывается CSS-ом, а не скриптом: клавиатуре хватает
   :focus-within, а если js не доехал — меню всё равно работает. */
.valance-leaf{display:flex;align-items:center;align-self:stretch}
.leafcue{display:inline-block;margin-left:7px;border:4px solid transparent;
  border-top-color:currentColor;border-bottom:0;transform:translateY(2px)}
.dropleaf{display:none;position:absolute;left:0;right:0;top:100%;background:var(--sheeting);
  border-top:1px solid var(--seamrun);border-bottom:1px solid var(--seamrun);
  box-shadow:0 16px 30px rgba(43,23,33,.10)}
/* ⚠ Смыкания мало. Пункт шириной 102px, панель — 1249px (тот же замер), поэтому указатель,
   идущий по диагонали к правой колонке, выходит из пункта вбок ЕЩЁ В ПОЛОСЕ ШАПКИ и меню
   гаснет, хотя человек шёл ровно в него. Наведением это не лечится ни за какую специфичность:
   нужна задержка, а её в css нет. `.leaf-hold` вешает скрипт на mouseleave и снимает через
   четверть секунды; вернулся указатель — mouseenter отменяет. Css-открытие остаётся базой,
   так что без js меню работает по-прежнему, просто без форы. */
.valance-leaf:hover .dropleaf,.valance-leaf:focus-within .dropleaf,
.valance-leaf.leaf-hold .dropleaf{display:block}
.dropleaf-in{display:grid;grid-template-columns:1fr 1fr 1fr 1.55fr;gap:30px;padding:26px 0 30px}
.dropleaf-list b{display:block;font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--murmur);margin-bottom:11px}
.dropleaf-list ul{list-style:none;margin:0;padding:0}
.dropleaf-list a{display:flex;justify-content:space-between;gap:12px;padding:4px 0;
  color:var(--inkline);text-decoration:none;font-size:.93rem}
.dropleaf-list a:hover{color:var(--damaskink)}
.dropleaf-list i{font-style:normal;color:var(--murmur);font-size:.8rem}
.dropleaf-pics{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.dropleaf-pic{display:block;text-decoration:none;color:var(--inkline)}
/* ⚠ 3/4, а не 4/3 и не квадрат. Сперва тут стояло 4/3 и срезало модели голову; я поправил
   на 1/1, объяснив это тем, что «исходники квадратные» — выдумка, померить было лень.
   `_imgdim.js` показал 2/3 у 138 файлов из 289 и квадрат у 12, то есть квадратная рамка
   тоже резала треть высоты, просто спасал случай: обе картинки панели брались из тех редких,
   что и правда 500×500. Смена полки или принта в шапке снова обезглавила бы модель. */
.dropleaf-pic img{width:100%;height:auto;aspect-ratio:3/4;object-fit:contain;
  border-radius:var(--curl);background:var(--sheeting)}
.dropleaf-pic span{display:block;margin-top:9px;font-size:.92rem;font-weight:500}
.dropleaf-pic:hover span{color:var(--damaskink)}

/* ── foot ─────────────────────────────────────────────────────────── */
.footboard{background:var(--nightfall);color:#d9c6d0;font-size:.92rem}
.hemstitch{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:30px;padding:52px 0 34px}
.hemstitch-lead img{height:34px;width:auto;margin-bottom:14px}
.hemstitch-lead p{margin:0 0 .7em;max-width:34ch}
.hemstitch-col h2{font-size:.82rem;text-transform:uppercase;letter-spacing:.09em;
  font-family:var(--bodyface);font-weight:600;color:#fff;margin-bottom:.9em}
.hemstitch-col ul{list-style:none;margin:0;padding:0}
.hemstitch-col li{margin-bottom:.5em}
.footboard a{color:#d9c6d0;text-decoration:none}
.footboard a:hover{color:#fff;text-decoration:underline}
.penned a{color:#f2c6d6}
/* The tag is <address> for what it means, and the browser sets it in italics for that, which
   in a footer reads as a mistake rather than as a postal address. The style comes back by
   hand. The note under it is quieter on purpose but must stay legible: it is the line that
   stops someone driving to an office expecting a rail of robes. */
.deskslip{font-style:normal;margin:1.1em 0 0;line-height:1.55;max-width:32ch}
.deskslip-note{display:block;margin-top:.55em;font-size:.82rem;color:#a8919e}
.bedskirt{border-top:1px solid var(--seamdark);padding:20px 0 34px;
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:.83rem;color:#a8919e}
.bedskirt p{margin:0}
.finesse{max-width:62ch}
.finesse-solo{margin-top:2em;padding-top:1em;border-top:1px solid var(--seamrun);
  font-size:.85rem;color:var(--murmur)}

/* ── shared bits ──────────────────────────────────────────────────── */
.preamble{font-size:.78rem;text-transform:uppercase;letter-spacing:.13em;font-weight:600;
  color:var(--damask);margin:0 0 .8em}
.openline{font-size:1.13rem;line-height:1.55;color:var(--inkhush);max-width:62ch}
.bedhead{text-align:center;margin-bottom:.3em}
.bandsub{text-align:center;color:var(--inkhush);max-width:60ch;margin:0 auto 2em}
.asidenote{font-size:.9rem;color:var(--inkhush);background:var(--pillowlit2);
  border-left:3px solid var(--damask);padding:12px 16px;border-radius:0 8px 8px 0;
  max-width:70ch}
.markicon{width:30px;height:30px;color:var(--damask);margin-bottom:12px}

.latchkeys{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:1.4em 0 0}
.latchkeys-end{margin-top:2.6em}
.latchkey{display:inline-block;text-decoration:none;font-weight:500;font-size:.95rem;
  padding:12px 22px;border-radius:999px;border:1px solid var(--seamrun);color:var(--inkline);
  background:var(--sheeting);transition:transform .12s ease}
.latchkey:hover{transform:translateY(-1px);border-color:var(--damask);color:var(--damaskink)}
.latchkey-lead{background:var(--damask);border-color:var(--damask);color:#fff}
.latchkey-lead:hover{background:var(--damaskdeep);border-color:var(--damaskdeep);color:#fff}
.latchkey-pale{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.latchkey-pale:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}

/* The store button. It has to stay a button element: the click is caught by a delegate on
   closest([data-fold]), so swapping it for a bare image breaks the link with no visible sign. */
.turnback{display:inline-block;background:var(--damask);color:#fff;border:0;border-radius:999px;
  padding:13px 26px;font-weight:600;font-size:.97rem;cursor:pointer}
.turnback:hover{background:var(--damaskdeep)}
/* The tile version. Full width of the tile, quieter than the one on a product page: on a
   grid of eight it would otherwise be eight solid pills shouting at once. */
.turnback-mini{margin:0 15px 15px;padding:10px 12px;font-size:.85rem;line-height:1.2;
  background:var(--pillowlit3);color:var(--damaskink)}
.turnback-mini:hover{background:var(--damask);color:#fff}

.creaseline{margin:0 0 22px;font-size:.86rem;color:var(--murmur)}
.creaseline ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.creaseline li + li::before{content:"/";margin-right:6px;color:var(--seamrun)}
.creaseline a{color:var(--murmur);text-decoration:none}
.creaseline a:hover{color:var(--damaskink);text-decoration:underline}

/* Rung chips. Colour carries the same order as the ladder: deep for the top rung,
   pale for the bottom one, so the tag reads before the word does. */
.rungchip{display:inline-block;font-size:.68rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.08em;padding:4px 10px;border-radius:999px;margin-bottom:8px;
  border:1px solid transparent}
.rungchip-warmest{background:var(--damaskink);color:#fff}
.rungchip-warm{background:var(--damask);color:#fff}
.rungchip-midweight{background:var(--pillowlit3);color:var(--damaskink);border-color:#e5bfcd}
.rungchip-light{background:var(--pillowlit);color:var(--damaskink);border-color:var(--seamrun)}

/* Stars. Ratings are real, the mark-up around them is not Review schema. */
.counterpane{display:inline-flex;align-items:center;gap:6px}
.flicker{width:13px;height:13px;background:var(--seamrun);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.flicker-on{background:var(--damask)}
.flicker-half{background:linear-gradient(90deg,var(--damask) 50%,var(--seamrun) 50%)}
.counterpane-n{font-size:.8rem;color:var(--murmur)}

/* ── product grid ─────────────────────────────────────────────────── */
/* 212px gave six tiles across a wide screen, each one small enough that the photograph read
   as an icon. The shops this trade is measured against put three or four across and let the
   garment be seen. Fewer, larger tiles is the whole point of taking the description out. */
.folded{list-style:none;margin:0;padding:0;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fill,minmax(252px,1fr))}
/* The tile frame lives on the li, not on the link inside it. The store button cannot sit
   inside the <a>: interactive content nested in interactive content is invalid, and the
   browser repairs it by hoisting the button out of the link, which can carry it beyond the
   reach of the click delegate. So the link stays plain and the button is its sibling. */
.pressed{display:flex;flex-direction:column;min-height:0;background:var(--sheeting);
  border:1px solid var(--seamrun);border-radius:var(--curl);overflow:hidden;
  transition:box-shadow .15s ease,transform .15s ease}
.pressed:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(43,23,33,.1)}
.pressed-hit{display:flex;flex-direction:column;flex:1;width:100%;text-decoration:none;
  color:var(--inkline);min-height:0}
/* aspect-ratio inside a flex child needs min-height:0 on the child, and the image has to be
   taken out of flow, or the tiles pull each other out of shape. */
/* Portrait, not square. Every shop in this trade shows sleepwear tall, because the thing
   being sold is a garment on a body and a square crops it to a swatch.
   ⚠ Здесь стояло «the source photographs are square with a little padding» — ЭТО БЫЛО НЕВЕРНО,
   и на этой выдумке потом строились все остальные кадрирования. Измерено (`_imgdim.js`,
   289 файлов `static/pillowcase`): 333×500, то есть 2/3 — 138 штук, 375×500 (3/4) — 24,
   квадратов 500×500 всего 12. Снимки ВЫСОКИЕ. Отсюда правило для всех рамок ниже: чем рамка
   шире 2/3, тем больше `object-fit:cover` срезает по высоте, а срезает он сверху и снизу
   поровну — то есть первой уходит голова модели. 4/5 (0.80) от 0.67 забирает ~16% высоты,
   макушка ещё в кадре; 4/3 (1.33) забирал половину и обезглавливал (жило в `.tickings`).
   ⚠ Но одной пропорции мало, потому что РАЗБРОС исходников огромен, а не сводится к 2/3.
   `_outlier.js`: у 79 снимков из 287 рамка 4/5 съедала больше 20% высоты, у худших — 60%
   (`girls-bras.jpg` 157×500, `adult-onesie-pajamas-ghost.jpg` 161×500). Никакая единая
   пропорция это не лечит: то, что село бы на узкие, обрежет квадратные.
   Поэтому здесь `contain`, а не `cover`. Витрина одежды обязана показывать вещь целиком —
   обезглавленный халат не продаёт и вводит в заблуждение. Плата за это — поля по краям
   у нетипичных снимков; фон поэтому БЕЛЫЙ, а не `--pillowlit2`: съёмка каталога сделана на
   белом, и на белом поля не читаются как поля. Розовая подложка была видна только как
   placeholder до загрузки, а с `contain` она стала бы рамкой вокруг каждого второго товара. */
.airing{position:relative;display:block;aspect-ratio:4/5;min-height:0;background:var(--sheeting);
  overflow:hidden}
.airing img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
/* The rung label sits on the photograph, the way a shop puts "new" or "back in stock" there.
   In the caption it was the first line and pushed the name of the piece down a row. */
/* The two pale chips have to change ground here. In the caption they sat on the card's own
   white and read fine; on a photograph, which for sleepwear is nearly always pale, a chip
   the colour of --pillowlit stops being visible at all. The dark two need nothing. */
.airing .rungchip{position:absolute;left:9px;top:9px;z-index:1;margin:0;
  box-shadow:0 1px 4px rgba(43,23,33,.16)}
.airing .rungchip-light,.airing .rungchip-midweight{background:#fff;border-color:var(--blushedge)}
.turndown{display:flex;flex-direction:column;flex:1;padding:14px 15px 15px;min-height:0}
.pressed-name{font-weight:500;font-size:.94rem;line-height:1.35;margin-bottom:6px}
.tuckin{display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;flex-wrap:wrap}
.tuckin b{font-family:var(--titleface);font-size:1.18rem;color:var(--damaskink)}
/* Счёт в упаковке. margin-right:auto — чтобы при space-between он остался ПРИ цене, а не
   уплыл на середину строки: это поправка к цене, и порознь с ней она ничего не значит. */
.counted{margin-right:auto;font-size:.74rem;letter-spacing:.02em;color:var(--damaskink);
  background:var(--pillowlit3);border-radius:999px;padding:3px 9px;white-space:nowrap}
.tuckin-big .counted{margin-right:0;font-size:.82rem;padding:4px 11px}

/* ── hero ─────────────────────────────────────────────────────────── */
/* The hero was a single near-black plum plane, the largest dark surface on the site and the
   one that speaks loudest for the brand. The banner has nothing like it. It now washes from
   almost-white down into the same blush the bands use, so the top of the page and the bands
   below it belong to one palette instead of two.
   The rail cards were tinted a shade lighter than the dark ground to lift off it. On a light
   ground that trick inverts: they have to be white with a seam, or they sink into the wash. */
.bolster{background:linear-gradient(180deg,var(--blushtop) 0%,var(--blushband) 100%);
  color:var(--inkline);padding:62px 0 66px;border-bottom:1px solid var(--blushedge)}
/* ⚠ Было 1.15fr .85fr — доли от той поры, когда справа стоял список строчек 64×64 и ему
   полагалось место поменьше. Со снимками пропорция обязана перевернуться: раздел называется
   image-led, а узкая колонка делала кадры в полтора раза ниже текста рядом. */
.bolster-in{display:grid;grid-template-columns:.92fr 1.08fr;gap:48px;align-items:center}
.bolster-say h1{color:var(--inkline);margin-bottom:.35em}
.bolster-say .openline{color:var(--inkhush);font-size:1.18rem}
/* Два кадра в один ряд, а НЕ «высокий слева + два квадрата справа», как было сперва.
   ⚠ Ту сборку арифметика запрещает, и это не вопрос вкуса. Снимки у нас 2/3 (см. замер
   у `.airing`). Пусть правая колонка шириной u, левая 1.2u. Высота высокого кадра без
   обрезки = 1.2u × 3/2 = 1.8u, значит каждая из двух правых ячеек получает (1.8u − зазор)/2
   ≈ 0.89u при ширине u — то есть ГОРИЗОНТАЛЬНУЮ рамку 1.12 под вертикальный снимок, минус
   ~40% высоты. Считать наоборот (вести высоту от правых кадров) ещё хуже: высокому достаётся
   пропорция 0.45, и `cover` режет уже по бокам, унося рукава. Третьего кадра тут поместить
   некуда — правая половина героя это ~460px, на троих вышло бы по 144px.
   Равные колонки с общей пропорцией дают одинаковую высоту и ноль обрезки по краю.
   Пропорция тут 2/3, а не 3/4 как у плиток: это РОДНОЙ формат снимков, то есть обрезки нет
   вовсе, и при той же ширине колонки кадр выходит выше — герою это и нужно, он остался
   заметно ниже текстового столбца. Плиткам 3/4 оставлено сознательно: там девять штук в три
   ряда, и лишние 10% высоты у каждой уводят полки за нижний край экрана. */
.bolster-show{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.bolster-show a{display:block;overflow:hidden;border-radius:var(--curl);
  background:var(--sheeting);border:1px solid var(--blushedge)}
/* `contain` по той же причине, что у `.airing`: какая вещь попадёт в герой, решают отзывы,
   а не я, и однажды это будет снимок 157×500. Сегодня оба кадра ровно 2/3 и заполняют рамку
   без полей — но держаться это должно на правиле, а не на удаче. */
.bolster-show img{width:100%;height:auto;aspect-ratio:2/3;object-fit:contain}
/* Строка доказательства. Говорит о ТОЙ ЖЕ вещи, что на первом кадре: число отзывов рядом
   с чужим снимком — уже не доказательство, а украшение.
   ⚠ Стояла `position:absolute` поверх первого кадра — и закрывала модели ноги, то есть ровно
   тот товар, который и продаёт. Починено это было СНАЧАЛА ТОЛЬКО В МОБИЛЬНОЙ МЕДИА-ЗАПРОСЕ
   («на 500px закрывала ноги»), а на 1280 осталось как было: лечился симптом на одной ширине,
   хотя причина от ширины не зависела вовсе. Теперь строка стоит под кадрами на всех ширинах,
   и переопределения в @media ей больше не нужно.
   ⚠ Плашка поверх фотографии товара — почти всегда ошибка: снимок здесь не фон. */
.bolster-proof{grid-column:1/3;margin:2px 0 0;display:flex;align-items:baseline;
  flex-wrap:wrap;gap:4px 9px;background:var(--sheeting);border:1px solid var(--blushedge);
  border-radius:12px;padding:9px 14px}
.bolster-proof b{font-family:var(--titleface);font-size:1.2rem;line-height:1.1}
.bolster-proof span{font-size:.76rem;color:var(--murmur)}

/* ── usp row, pills, tiles ────────────────────────────────────────── */
.tuckrow{list-style:none;margin:0;padding:0;display:grid;gap:24px;
  grid-template-columns:repeat(4,1fr)}
.tuckrow li{border-top:3px solid var(--damask);padding-top:16px}
.tuckrow h2{font-size:1.05rem;font-family:var(--bodyface);font-weight:600;margin-bottom:.4em}
.tuckrow p{font-size:.9rem;color:var(--inkhush);margin:0}

.nightrail{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;
  margin:0}
.nightrail a{text-decoration:none;font-size:.9rem;padding:9px 17px;border-radius:999px;
  background:var(--sheeting);border:1px solid var(--seamrun);color:var(--inkline)}
.nightrail a:hover{border-color:var(--damask);color:var(--damaskink)}
.nightrail-rung{background:var(--pillowlit3)!important;border-color:#e5bfcd!important;
  color:var(--damaskink)!important;font-weight:500}
.nightrail-lab{font-size:.82rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--murmur);font-weight:600;margin-right:4px}

.tickings{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(3,1fr)}
.tickings a{display:block;text-decoration:none;color:var(--inkline);border:1px solid var(--seamrun);
  border-radius:var(--curl);overflow:hidden;background:var(--sheeting);height:100%}
.tickings a:hover{border-color:var(--damask)}
/* ⚠ Было 4/3 — единственная широкая рамка на сайте среди высоких снимков, и она срезала
   ровно половину высоты: на главной все девять полок стояли обезглавленными («Nightgowns» —
   торс без головы, «Leggings» — одни ноги). Категорийная плитка обязана показывать вещь
   ЦЕЛИКОМ: по ней выбирают тип одежды, а не расцветку. 3/4 — родной формат 24 снимков и
   ближайший к массовым 2/3, срезает ~10% вместо 50%. */
.tickings .airing{aspect-ratio:3/4}
.tickings-cap{display:block;padding:14px 16px 18px}
.tickings-cap b{display:block;font-family:var(--titleface);font-size:1.2rem}
.tickings-cap i{display:block;font-style:normal;font-size:.82rem;color:var(--damask);
  font-weight:600;margin-top:2px}
.tickings-cap em{display:block;font-style:normal;font-size:.88rem;color:var(--inkhush);
  margin-top:9px;line-height:1.5}

/* ── promo pair ───────────────────────────────────────────────────── */
.nightfold{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}
.nightfold article{border-radius:var(--curl);padding:36px 34px}
/* The pair needs one loud tile and one quiet one, and the loud one used to be dark plum.
   Damask is the brand's own pink and carries white type just as well, so the contrast in the
   pair survives without a dark plane. .latchkey-pale still works here, and only here. */
.nightfold-deep{background:var(--damask);color:#fff;position:relative;overflow:hidden;
  min-height:270px}
.nightfold-deep h2{color:#fff;max-width:16ch}
.nightfold-deep p{max-width:38ch;color:#ffe4ed}
.nightfold-deep img{position:absolute;right:-22px;bottom:-22px;width:210px;height:210px;
  object-fit:cover;border-radius:12px;opacity:.92}
.nightfold-warm{background:var(--pillowlit3)}
.nightfold-warm p{color:var(--inkhush);max-width:42ch}

/* ── stats band, values ───────────────────────────────────────────── */
.bedtime{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);
  gap:24px;text-align:center}
/* The four figures were white on plum. On blush they need the deep end of the brand pink:
   ink would read as body copy at that size, and the band would stop being a headline. */
.bedtime b{display:block;font-family:var(--titleface);font-size:clamp(1.9rem,1.2rem + 2vw,2.7rem);
  color:var(--damaskink);line-height:1.05}
.bedtime span{display:block;font-size:.87rem;color:var(--inkhush);margin-top:6px}

.nightvalue{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:30px}
.nightvalue h2{font-size:1.1rem;font-family:var(--bodyface);font-weight:600}
.nightvalue p{color:var(--inkhush);font-size:.93rem;margin:0}

/* ── steps and tables ─────────────────────────────────────────────── */
.stepdesk{display:grid;grid-template-columns:1fr 1.25fr;gap:44px;align-items:start}
.stepdesk-list{list-style:none;margin:0;padding:0;counter-reset:rungstep}
.stepdesk-list li{counter-increment:rungstep;position:relative;padding-left:52px;
  margin-bottom:24px}
.stepdesk-list li::before{content:counter(rungstep);position:absolute;left:0;top:-2px;
  width:36px;height:36px;border-radius:50%;background:var(--pillowlit3);color:var(--damaskink);
  font-family:var(--titleface);font-size:1.1rem;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.stepdesk-list b{display:block;margin-bottom:3px}
.stepdesk-list span{color:var(--inkhush);font-size:.92rem}

.sheettable{overflow-x:auto;margin:0 0 1.6em;border:1px solid var(--seamrun);
  border-radius:var(--curl)}
.sheettable table{font-size:.92rem;min-width:420px}
.sheettable caption{text-align:left;padding:14px 16px 0;font-size:.85rem;color:var(--murmur)}
.sheettable th,.sheettable td{padding:11px 16px;text-align:left;
  border-bottom:1px solid var(--seamrun)}
/* ⚠ Заголовки колонок переносятся. Пока на них стоял white-space:nowrap, ширину таблицы
   задавала строка «RUNG WE START FROM», а не содержимое: на 500px «How we read the room»
   вылезала за экран и шапка обрывалась на «PIECES THER». Прокрутка вбок у обёртки есть, то
   есть данные не терялись, — но обрезанный заголовок без всякого намёка на прокрутку
   читается как поломанная страница. Перенос случается ровно тогда, когда места нет, а на
   широком экране заголовок и так стоит в строку. */
.sheettable thead th{background:var(--pillowlit2);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.07em;color:var(--damaskink)}
.sheettable tbody th{font-weight:500}
.sheettable tr:last-child th,.sheettable tr:last-child td{border-bottom:0}
.sheettable-spec{margin-top:1.4em}
.sheettable-spec tbody th{width:36%;color:var(--murmur);font-weight:500;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.05em}

/* ── how the rungs fall across the shelves ────────────────────────────
   The bar is the argument the whole site rests on, so an empty share has to look empty.
   A minimum width is set on drawn segments only: give one to a zero and a shelf with
   nothing on a rung looks the same as a shelf with a little, which is the opposite of
   what the chart is for. Segments with a count of nought are not drawn at all. */
.loftline{list-style:none;margin:0 0 18px;padding:0}
.loftline li{display:grid;grid-template-columns:150px 1fr 46px;gap:14px;align-items:center;
  padding:9px 0;border-bottom:1px solid var(--seamrun)}
.loftline-name{font-size:.92rem;font-weight:500}
.loftline-bar{display:flex;height:30px;border-radius:6px;overflow:hidden;background:var(--pillowlit2)}
.loftline-seg{display:flex;align-items:center;justify-content:center;min-width:0;
  font-size:.74rem;font-weight:600}
.loftline-seg i{font-style:normal;overflow:hidden}
.loftline-warmest{background:var(--damaskink);color:#fff}
.loftline-warm{background:var(--damask);color:#fff}
.loftline-midweight{background:#e5bfcd;color:var(--damaskink)}
.loftline-light{background:var(--pillowlit3);color:var(--damaskink)}
.loftline-none{background:#ded7da;color:var(--inkhush)}
.loftline-tot{text-align:right;font-size:.9rem;color:var(--murmur)}
.loftkey{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;font-size:.82rem;
  color:var(--inkhush);margin:0}
.loftkey span{display:flex;align-items:center;gap:7px}
/* ⚠ Пять цветных правил ниже обязаны идти с `.loftkey` впереди. Без него у них вес
   (0,1,1), а у общего правила формы `.loftkey span::before` — (0,1,2), и общее побеждает
   независимо от порядка строк: все пять квадратиков красятся в --seamrun. Легенда при этом
   выглядит целой — квадратики на месте, подписи на месте, — но называет пять цветов и
   показывает один, то есть график над ней читать нечем. Ни _verify.js, ни _selectors.js
   этого не видят (разметка цела, все классы на месте); поймано глазами и подтверждено
   getComputedStyle в headless. */
.loftkey span::before{content:"";width:13px;height:13px;border-radius:3px;background:var(--seamrun)}
.loftkey .loftkey-warmest::before{background:var(--damaskink)}
.loftkey .loftkey-warm::before{background:var(--damask)}
.loftkey .loftkey-midweight::before{background:#e5bfcd}
.loftkey .loftkey-light::before{background:var(--pillowlit3);border:1px solid var(--seamrun)}
.loftkey .loftkey-none::before{background:#ded7da}

/* ── spotlight, care, dark bands ──────────────────────────────────── */
.lampglow{display:grid;grid-template-columns:1fr 1fr;gap:30px}
.lampglow article{display:grid;grid-template-columns:190px 1fr;gap:20px;align-items:start;
  background:var(--sheeting);border:1px solid var(--seamrun);border-radius:var(--curl);padding:18px}
.lampglow .airing{border-radius:10px}
.lampglow h3{margin:.2em 0 .4em;font-size:1.12rem}
.lampglow h3 a{color:var(--inkline);text-decoration:none}
.lampglow h3 a:hover{color:var(--damaskink)}
.lampglow p{font-size:.9rem;color:var(--inkhush)}
.lampglow .latchkeys{margin-top:1em;gap:10px}

.drowse{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.drowse > div{border-radius:var(--curl);padding:26px 28px;border:1px solid var(--seamrun)}
.drowse h3{font-family:var(--bodyface);font-size:1rem;font-weight:600;letter-spacing:.02em}
.drowse ul{margin:0;padding-left:1.15em}
.drowse li{margin-bottom:.55em;font-size:.92rem;color:var(--inkhush)}
.drowse-do{background:var(--pillowlit)}
.drowse-do h3{color:var(--damaskink)}
.drowse-dont{background:#faf7f8}
.drowse-dont h3{color:var(--inkhush)}

/* .braid sits inside .duvet and nowhere else, so its type follows that band. The paragraph was
   a pale plum picked for the near-black ground; on blush it was near-white on near-white — the
   band still looked painted and the only sentence in it simply disappeared. Caught by eye, not
   by any probe: the markup was intact the whole time.
   ⚠ The band's paragraphs are plain <p>, NOT .openline. A rule written against .openline lands
   on nothing here and looks like it was applied. */
.braid{max-width:760px;text-align:center}
.braid h2{margin-bottom:.5em}
.braid p{color:var(--inkhush);margin:0 auto;max-width:66ch}
.slumberbar .latchkeys{justify-content:center;margin-top:1.8em}

/* ── the long note at the foot of the home page ───────────────────── */
.sleepnote{max-width:900px}
.sleepnote h3{margin-top:1.8em}
.sleepnote p{color:var(--inkhush)}
.sleepnote-facts{list-style:none;margin:1.4em 0;padding:0;display:grid;gap:10px}
.sleepnote-facts li{position:relative;padding-left:28px;font-size:.93rem;color:var(--inkhush)}
.sleepnote-facts li::before{content:"";position:absolute;left:6px;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--damask)}

/* ── quotes. Real ones, carried without Review schema. ───────────── */
.pillowtalk{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(3,1fr)}
.pillowtalk figure{margin:0;height:100%;background:var(--sheeting);border:1px solid var(--seamrun);
  border-radius:var(--curl);padding:24px 26px}
.pillowtalk blockquote{margin:0}
.pillowtalk blockquote p{font-family:var(--titleface);font-size:1.02rem;line-height:1.55;margin:0}
.pillowtalk blockquote p::before{content:"\201C"}
.pillowtalk blockquote p::after{content:"\201D"}
.pillowtalk figcaption{margin-top:14px;font-size:.84rem;font-weight:600;color:var(--damaskink)}
.pillowtalk figcaption span{font-weight:400;color:var(--murmur)}
.pillowtalk-solo{margin:2.6em 0}
.pillowtalk-solo .pillowtalk{grid-template-columns:repeat(3,1fr)}

/* ── shelf and rung pages ─────────────────────────────────────────── */
.countline{list-style:none;margin:1.6em 0;padding:0;display:grid;gap:16px;
  grid-template-columns:repeat(4,1fr);border-top:1px solid var(--seamrun);
  border-bottom:1px solid var(--seamrun);padding:18px 0}
.countline b{display:block;font-family:var(--titleface);font-size:1.5rem;color:var(--damaskink)}
.countline span{display:block;font-size:.82rem;color:var(--murmur)}
.countline + .nightrail{justify-content:flex-start;margin-bottom:2em}
.folded{margin-top:2em}

.rungdeck{list-style:none;margin:0 0 2em;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(2,1fr)}
.rungdeck a{display:grid;grid-template-columns:180px 1fr;gap:20px;text-decoration:none;
  color:var(--inkline);border:1px solid var(--seamrun);border-radius:var(--curl);overflow:hidden;
  background:var(--sheeting);height:100%}
.rungdeck a:hover{border-color:var(--damask)}
.rungdeck .airing{aspect-ratio:auto;height:100%;min-height:150px}
.rungdeck-cap{display:block;padding:20px 22px 20px 0}
.rungdeck-cap b{display:block;font-family:var(--titleface);font-size:1.35rem}
.rungdeck-cap i{display:block;font-style:normal;font-size:.83rem;color:var(--damask);
  font-weight:600;margin:2px 0 9px}
.rungdeck-cap em{display:block;font-style:normal;font-size:.89rem;color:var(--inkhush);
  line-height:1.5}
.rungdeck-warmest{border-top:0}
.rungdeck-warmest a{border-left:4px solid var(--damaskink)}
.rungdeck-warm a{border-left:4px solid var(--damask)}
.rungdeck-midweight a{border-left:4px solid #e5bfcd}
.rungdeck-light a{border-left:4px solid var(--pillowlit3)}

/* ── the piece itself ─────────────────────────────────────────────── */
.turnsheet{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;
  margin-bottom:2.4em}
/* Square here, portrait everywhere else, and on purpose. A tile crops to sell a shape; this
   is the one photograph of the piece there is, and cropping a fifth off it is cropping the
   thing the visitor came to look at. */
.airing-big{aspect-ratio:1/1;border-radius:var(--curl);border:1px solid var(--seamrun)}
.turnsheet-say h1{margin-bottom:.35em}
.tuckin-big{justify-content:flex-start;gap:20px;margin:0 0 1em}
.tuckin-big b{font-size:1.85rem}
.shadefrom{font-size:.84rem;color:var(--murmur)}
.turnsheet-lede{font-size:1.05rem;color:var(--inkhush)}
.warmline{background:var(--pillowlit2);border-radius:10px;padding:14px 18px;font-size:.92rem;
  color:var(--inkhush)}
.warmline a{color:var(--damaskink)}

.creases{margin:2.6em 0}
.creases dl{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 34px;margin:0}
.creases dt{font-weight:600;font-size:.98rem;margin-bottom:4px}
.creases dd{margin:0;font-size:.92rem;color:var(--inkhush);line-height:1.55}
.sizerail{margin:2.6em 0}
.sizerail .asidenote{margin-bottom:1.4em}
.samecut{margin:2.8em 0}
.samecut h2{margin-bottom:1em}

/* ── the picker ───────────────────────────────────────────────────── */
.warmthdial{margin:2em 0;background:var(--pillowlit);border:1px solid var(--seamrun);
  border-radius:var(--curl);padding:28px 30px}
.warmthdial fieldset{border:0;padding:0;margin:0 0 26px}
.warmthdial legend{font-weight:600;font-size:1rem;padding:0;margin-bottom:12px}
.warmthdial-opts{display:grid;gap:10px}
.warmthdial-opts-row{grid-template-columns:repeat(3,1fr)}
.warmthdial-opts label{display:flex;align-items:center;gap:11px;background:var(--sheeting);
  border:1px solid var(--seamrun);border-radius:10px;padding:13px 16px;cursor:pointer;
  font-size:.93rem}
.warmthdial-opts label:hover{border-color:var(--damask)}
.warmthdial-opts input{accent-color:var(--damask);flex:none;width:17px;height:17px}
.warmthdial-opts input:checked + span{font-weight:600;color:var(--damaskink)}
.warmthdial .latchkeys{margin:0}
.dialout{margin:2.4em 0}
.dialout-said{background:var(--pillowlit3);border-radius:var(--curl);padding:24px 28px;
  margin-bottom:1.8em}
.dialout-said h2{margin-bottom:.35em}
.dialout-said p{margin:0;color:var(--inkhush)}
.dialout-why{font-size:.9rem;color:var(--inkhush);margin-top:.7em}

/* ── bedside notes ────────────────────────────────────────────────── */
.notestack{list-style:none;margin:0;padding:0;display:grid;gap:22px;
  grid-template-columns:repeat(3,1fr)}
.notestack a{display:flex;flex-direction:column;height:100%;text-decoration:none;
  color:var(--inkline);background:var(--sheeting);border:1px solid var(--seamrun);
  border-radius:var(--curl);overflow:hidden}
.notestack a:hover{border-color:var(--damask)}
.notestack .airing{aspect-ratio:16/9;min-height:0}
.notestack-cap{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px;min-height:0}
.notestack-cap i{font-style:normal;font-size:.73rem;text-transform:uppercase;
  letter-spacing:.11em;font-weight:600;color:var(--damask)}
.notestack-cap b{display:block;font-family:var(--titleface);font-size:1.2rem;line-height:1.25;
  margin:8px 0 8px}
.notestack-cap em{font-style:normal;font-size:.88rem;color:var(--inkhush);line-height:1.5}
.notestack-go{margin-top:auto;padding-top:14px;font-size:.85rem;font-weight:600;
  color:var(--damaskink)}

.nightnote{max-width:70ch}
.nightnote-kick{font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;
  font-weight:600;color:var(--damask);margin:0 0 .8em}
.nightnote h2{margin-top:1.9em}
.nightnote p{color:var(--inkhush)}
.nightnote .openline{color:var(--inkline)}
.notepicks{margin:3em 0 0}
.notepicks .asidenote{margin-bottom:1.6em}
/* ⚠ Четыре снимка в узкой колонке заметки должны встать в ОДИН ряд. Общий минимум 212px в
   колонке на 720px пускает только три, и четвёртая карточка уезжала на свою строку слева —
   а заметка про лестницу обещает ровно обратное: «так видно, как четыре ступени выглядят
   рядом друг с другом». Ступень, стоящая под первой, рядом с четвёртой не стоит: текст
   обещал сравнение, вёрстка его отменяла. Все шесть заметок берут по четыре снимка, так что
   правило общее, а не подпорка под одну страницу.
   ⚠ Только на широком экране. Правило адресное (`.notepicks .folded`), то есть весомее общего
   мобильного, и без рамки по ширине оно перебило бы его и на телефоне: четыре колонки по сотне
   пикселей вместо двух нормальных. Мобильную сетку правит блок ниже — здесь верхняя граница
   должна совпадать с его нижней (1000px). */
@media (min-width:1001px){ .notepicks .folded{grid-template-columns:repeat(4,1fr);gap:16px} }
.notenext{margin-top:3em;border-top:1px solid var(--seamrun);padding-top:1.6em}
.notenext h2{font-size:1rem;font-family:var(--bodyface);text-transform:uppercase;
  letter-spacing:.09em;color:var(--murmur)}
.notenext ul{list-style:none;margin:0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(3,1fr)}
.notenext a{display:block;text-decoration:none;background:var(--pillowlit2);border-radius:10px;
  padding:14px 16px;height:100%}
.notenext a:hover{background:var(--pillowlit3)}
.notenext i{font-style:normal;font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;
  font-weight:600;color:var(--damask)}
.notenext b{display:block;font-family:var(--titleface);font-size:1rem;color:var(--inkline);
  margin-top:5px;line-height:1.3}

/* ── house pages ──────────────────────────────────────────────────── */
.asklist dl{margin:1.6em 0 0}
.asklist dt{font-family:var(--titleface);font-size:1.12rem;font-weight:600;margin-top:1.7em}
.asklist dd{margin:.5em 0 0;color:var(--inkhush)}

/* ── narrow screens. Checked at 500px: below that the headless shot clips on the right,
      which reads like a layout bug and is not one. ─────────────────── */
@media (max-width:1000px){
  /* Между 760 и 1000 панель ещё открывается, но четыре колонки в неё уже не влезают:
     рисунки уходят, остаются три списка. */
  .dropleaf-in{grid-template-columns:1fr 1fr 1fr;gap:22px}
  .dropleaf-pics{display:none}
  .bolster-in,.stepdesk,.turnsheet{grid-template-columns:1fr;gap:30px}
  .hemstitch{grid-template-columns:1fr 1fr;gap:26px}
  .tuckrow,.bedtime{grid-template-columns:repeat(2,1fr)}
  .tickings,.notestack,.pillowtalk,.notenext ul{grid-template-columns:repeat(2,1fr)}
  .nightvalue,.lampglow,.nightfold,.rungdeck{grid-template-columns:1fr}
  .creases dl{grid-template-columns:1fr}
  .eiderdown{padding:44px 0}
}
@media (max-width:760px){
  .pullcord{display:block}
  /* The menu is closed by default and opened by the js. If the script does not run the nav
     stays reachable, because the pull cord is the only thing that hides it. */
  .valance{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;
    align-items:stretch;gap:0;background:var(--sheeting);border-bottom:1px solid var(--seamrun);
    padding:8px 0;box-shadow:0 14px 24px rgba(43,23,33,.12)}
  .valance-out{display:flex}
  .valance a{padding:13px var(--gully);border-bottom:0}
  .headboard-in{position:relative}
  /* ⚠ На телефоне панель убрана совсем, а не «раскрыта в аккордеон»: наведения тут нет,
     а развёрнутый список из девяти полок, четырёх ступеней и шести принтов превращает меню
     из четырёх строк в двадцать три. «The dresser» остаётся обычной ссылкой на /shelves,
     весь разбор по полкам и принтам лежит в подвале. Правило перебивает
     `.valance-leaf:hover .dropleaf` (0,2,0) собственной специфичностью, а не !important. */
  .valance-leaf{display:block}
  /* ⚠ Третий селектор — не копипаста: `.leaf-hold` того же веса (0,3,0), и без него скрипт
     форы раскрыл бы на телефоне ровно ту панель, которую тут убирают. */
  .valance-leaf:hover .dropleaf,.valance-leaf:focus-within .dropleaf,
  .valance-leaf.leaf-hold .dropleaf{display:none}
  .leafcue{display:none}
  .tuckrow,.bedtime,.countline,.drowse,.warmthdial-opts-row{grid-template-columns:1fr}
  .notestack,.pillowtalk,.notenext ul,.pillowtalk-solo .pillowtalk{
    grid-template-columns:1fr}
  /* ⚠ `.tickings` вынуты из строки выше и остаются в ДВА столбца. В один столбец плитка полки
     разворачивается на всю ширину экрана, а внутри неё снимок 3/4 — это ~610px высоты на одну
     категорию и больше пяти экранов на девять полок, то есть витрину нельзя пролистать глазом.
     Содержимого в плитке на всю ширину нет: снимок, имя полки и счётчик. */
  .tickings{grid-template-columns:1fr 1fr;gap:14px}
  .tickings-cap{padding:11px 12px 14px}
  .tickings-cap b{font-size:1.02rem}
  .folded{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
  .lampglow article{grid-template-columns:1fr}
  .rungdeck a{grid-template-columns:1fr}
  .rungdeck .airing{aspect-ratio:16/9;min-height:0}
  .rungdeck-cap{padding:16px 20px 20px}
  .countline{gap:12px}
  .loftline li{grid-template-columns:110px 1fr 34px;gap:9px}
  .loftline-name{font-size:.82rem}
  .nightfold-deep img{position:static;width:100%;height:200px;margin-top:20px}
  .warmthdial{padding:20px 18px}
  .eiderdown{padding:36px 0}
  .bolster{padding:40px 0 44px}
}