/* flexform-sofa.com - вёрстка. Система 8 из 10, спека в DESIGN.md.
   Приём раскладки: лист-документ лежит в шафрановом поле, выноски идут по краям листа.
   Радиус ровно один, у внешнего листа; внутри листа всё прямоугольное.
   Работа mobile-first: сначала 360, потом расширение. */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* липкая шапка + шафрановая кромка не должны накрывать якорь, на который прыгнули */
  scroll-padding-top: calc(var(--fm) + var(--head) + 16px);
}

body {
  position: relative;
  margin: 0;
  background: var(--field);
  color: var(--ink);
  font: 400 var(--t-body)/1.65 var(--sans);
  font-synthesis-weight: none;
  overflow-x: clip;               /* лист уезжает влево за меню и не тянет страницу */
}

img, svg, picture, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, dl, dd, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 90;
  background: var(--ink); color: var(--on-ink); padding: 14px 20px; font-weight: 600;
}
.skip:focus { left: var(--fm); top: var(--fm); }

/* ─── Поле вокруг листа ──────────────────────────────────────────────────────
   `.wash` - единственный элемент, которому colourWash меняет background-color.
   Дети наследуют значение, поэтому кромка над липкой шапкой всегда того же цвета,
   что и поле. Сам `.wash` абсолютный на всю высоту документа: onScroll считает
   диапазон по его размерам. */
/* Полоска-курок. colourShift из каталога сети живёт на onScroll с порогами
   «низо м к низу окна» и «верхом к верху окна»: такой диапазон получается
   положительным только у элемента НИЖЕ первого экрана и НИЖЕ его по высоте.
   Поэтому сам `.wash` - тонкая полоса в середине документа: пока она проходит
   через окно, заливка едет из шафрана в navy. Видимого куска у неё нет,
   виден только её фиксированный потомок, который наследует цвет. */
.wash {
  position: absolute; left: 0; right: 0; top: 46%; height: 8px; z-index: auto;
  background-color: var(--field);
  pointer-events: none;
}
.wash__field { position: fixed; inset: 0; z-index: 0; background-color: inherit; }
.wash__rim {
  position: fixed; top: 0; left: 0; right: 0; height: var(--fm); z-index: 45;
  background-color: inherit; pointer-events: none;
}

/* ─── Лист ───────────────────────────────────────────────────────────────── */
.page {
  position: relative; z-index: 2;
  padding: var(--fm);
  transition: transform var(--slow) var(--ease-in);
}
.sheet {
  background: var(--sheet);
  border-radius: var(--sheet-radius);
  box-shadow: var(--shadow-sheet);
}
.wrap { max-width: var(--measure); margin: 0 auto; padding-inline: var(--pad); }

/* ─── Типографика ────────────────────────────────────────────────────────── */
.h1, .h2, .h3, h1, h2, h3 {
  font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--t-display); line-height: 1.0; }
h2, .h2 { font-size: var(--t-h2); line-height: 1.08; }
h3, .h3 { font-size: var(--t-h3); line-height: 1.2; }
.lead { font-size: var(--t-lead); line-height: 1.6; max-width: var(--text-measure); }
.prose p { max-width: var(--text-measure); margin-bottom: var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-muted); }
.small { font-size: var(--t-small); line-height: 1.5; color: var(--ink-muted); }
.label {
  font-family: var(--sans); font-size: var(--t-label); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.4;
}

.sec { padding-block: var(--section); }
.sec + .sec { padding-top: 0; }
.sec__head { margin-bottom: var(--sp-6); }
.sec__head .lead { margin-top: var(--sp-3); }

/* ─── Кнопки: печатный оттиск-двойник ────────────────────────────────────── */
/* Оттиск-двойник рисуется тенью без размытия, а не псевдоэлементом: потомок с
   отрицательным z-index по правилам отрисовки ложится ПОВЕРХ фона своего же
   контейнера, и кнопка уходила в шафран целиком. В покое двойник смещён на 4px,
   при наведении уезжает на 8. Двигается только тень, сама кнопка стоит. */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 22px;
  font-family: var(--sans); font-size: var(--t-body); font-weight: 600; line-height: 1.2;
  text-decoration: none; border: 1px solid var(--ink); border-radius: 0;
  background: var(--ink); color: var(--on-ink); cursor: pointer;
  box-shadow: var(--stamp) var(--stamp) 0 var(--field);
  transition: box-shadow var(--mid) var(--ease-in);
}
.btn:hover, .btn:focus-visible { box-shadow: calc(var(--stamp) * 2) calc(var(--stamp) * 2) 0 var(--field); }
.btn:active { box-shadow: 0 0 0 var(--field); }
.btn--primary { background: var(--ink); color: var(--on-ink); }
.btn--ghost { background: var(--sheet); color: var(--ink); }
.btn--light { background: var(--sheet); color: var(--ink); box-shadow: var(--stamp) var(--stamp) 0 var(--ink); }
.btn--light:hover, .btn--light:focus-visible { box-shadow: calc(var(--stamp) * 2) calc(var(--stamp) * 2) 0 var(--ink); }
.btn--wide { width: 100%; }

/* ─── Ссылки: рамка-бокс, как поле бланка ────────────────────────────────── */
.lnk { position: relative; text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.lnk::after {
  content: ''; position: absolute; inset: -6px -8px; border: 1px solid var(--ink);
  opacity: 0; transform: scale(.94);
  transition: opacity var(--fast) var(--ease-out), transform var(--fast) var(--ease-out);
}
.lnk:hover::after, .lnk:focus-visible::after {
  opacity: 1; transform: scale(1);
  transition-duration: 220ms; transition-timing-function: var(--ease-in);
}

/* ─── Шапка внутри листа ─────────────────────────────────────────────────── */
.hd {
  position: sticky; top: var(--fm); z-index: 30;
  background: var(--sheet);
  border-radius: var(--sheet-radius) var(--sheet-radius) 0 0;
}
.hd__row {
  display: flex; align-items: center; gap: var(--sp-4);
  min-height: var(--head);
  max-width: var(--measure); margin: 0 auto; padding-inline: var(--pad);
  border-bottom: 1px solid transparent;
}
.hd.is-stuck .hd__row { border-bottom-color: var(--line); }
.hd__logo { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; color: var(--ink); }
.hd__mark { width: 17px; height: 22px; }
.hd__word { font-family: var(--serif); font-size: 25px; line-height: 1; white-space: nowrap; }
.hd__word i { font-style: normal; color: var(--ink-muted); margin-left: .2em; }
.hd__nav { display: none; margin-inline: auto; gap: var(--sp-5); }
.hd__link {
  position: relative; background: none; border: 0; padding: 12px 2px; cursor: pointer;
  font-size: var(--t-small); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.hd__link::after {
  content: ''; position: absolute; inset: 2px -8px; border: 1px solid var(--ink);
  opacity: 0; transform: scale(.94); transition: opacity var(--fast), transform var(--fast);
}
.hd__link:hover::after, .hd__link:focus-visible::after { opacity: 1; transform: scale(1); }
.hd__trigger { font-family: var(--sans); }
.hd__link[aria-current="page"] { color: var(--ink); }
.hd__link[aria-current="page"]::before {
  content: ''; position: absolute; left: 2px; right: 2px; bottom: 6px; height: 2px; background: var(--field);
}
.hd__ask { display: none; margin-left: auto; min-height: 44px; padding: 10px 18px; font-size: var(--t-small); --stamp: 3px; }
.hd__menu {
  margin-left: auto; min-height: 44px; min-width: 64px; padding: 10px 6px;
  background: none; border: 0; cursor: pointer;
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}

/* Подменю: прямоугольная панель на подложке внутри листа */
.mega { display: none; }
.mega[hidden] { display: none; }

/* ─── Мобильное меню: лист перелистывается влево ─────────────────────────── */
.leaf {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1;
  width: min(78vw, 360px);
  /* своя заливка, а не просвет поля: поле по скроллу уходит в navy, и меню на нём
     стало бы navy по navy */
  background: var(--field);
  color: var(--on-field);
  overflow-y: auto;
}
.leaf__in { padding: calc(var(--fm) + 20px) 22px 32px; }
.leaf__close {
  min-height: 44px; padding: 10px 14px; margin-bottom: var(--sp-5);
  background: none; border: 1px solid var(--on-field); cursor: pointer;
  font-size: var(--t-small); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.leaf__list { display: grid; gap: 2px; margin-bottom: var(--sp-5); }
.leaf__list a {
  display: block; padding: 8px 0; text-decoration: none;
  font-family: var(--serif); font-size: 29px; line-height: 1.22;
}
.leaf__contact { font-size: var(--t-small); line-height: 1.7; margin-bottom: var(--sp-4); }
.leaf__ask { width: 100%; }
.page.is-open { transform: translateX(calc(-1 * min(78vw, 360px))); }

/* ─── Выноски по краям листа ─────────────────────────────────────────────── */
.callout {
  position: relative;
  border: 1px solid var(--line-strong); padding: 12px 14px; background: var(--sheet);
  display: grid; gap: 4px;
}
.callout__label {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.callout__value { font-size: var(--t-small); line-height: 1.45; }
/* Левая и правая выноски отличаются стороной, с которой к предмету идёт линия.
   Подписи горизонтальные: повёрнутые на 90 заняты Roda (DESIGN-MATRIX). */
.callout--left { text-align: left; }
.callout--right { text-align: left; }

/* ─── Кадры ──────────────────────────────────────────────────────────────── */
.pic { display: block; max-width: var(--maxw, none); margin-inline: auto; }
.pic img { width: 100%; height: auto; }
/* Рамка берёт пропорцию самого кадра (--ar считается из файла), а не наоборот:
   стоячий каталожный снимок не режется в горизонтальную полосу. */
.shot .pic img { aspect-ratio: var(--ar); object-fit: cover; }
/* студийная вырезка обрезана по предмету и бывает очень широкой:
   зажимать её пропорцию рамки значит резать диван по краям */
.pic--cutout img { aspect-ratio: auto; object-fit: contain; }
.card__pic .pic--cutout img { aspect-ratio: 4 / 3; }

.shot { display: block; position: relative; overflow: hidden; background: var(--field); }
.shot .pic { transition: transform var(--slow) var(--ease-in); }
.shot__no {
  position: absolute; left: 10px; top: 12px; z-index: 0;
  font-family: var(--serif); font-size: var(--t-counter); color: var(--on-field);
}
a:hover .shot .pic, a:focus-visible .shot .pic { transform: translateX(16px); }
.shot--static .pic { transition: none; }

/* ─── Первый экран: предмет на листе, выноски по краям ───────────────────── */
.hero { padding-top: var(--sp-6); }
.hero__kicker { color: var(--ink-muted); margin-bottom: var(--sp-3); }
.hero h1 { margin-bottom: var(--sp-4); }
.hero__lead { margin-bottom: var(--sp-5); }
.hero__stage { display: grid; gap: var(--sp-4); align-items: center; }
.hero__object { position: relative; }
.hero__object .pic img { width: 100%; height: auto; }
.hero__img { width: 100%; }
.hero__side { display: grid; gap: var(--sp-3); align-content: start; }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }

/* ─── Инфографика: шкала-паспорт изделия ─────────────────────────────────── */
.passport { border: 1px solid var(--line-strong); padding: var(--sp-4); background: var(--tint); }
.passport__cap {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: var(--sp-4);
}
.passport__list { display: grid; gap: var(--sp-4); }
.passport__row { display: grid; gap: 6px; }
.passport__label { font-size: var(--t-small); font-weight: 600; }
.passport__bar { position: relative; margin: 0; padding-bottom: 20px; }
.passport__scale {
  display: block; height: 14px; background: var(--field);
  background-image: repeating-linear-gradient(90deg, var(--ink) 0 1px, transparent 1px 10%);
}
.passport__mark {
  position: absolute; top: -5px; width: 3px; height: 24px; background: var(--ink);
  transform: translateX(-1px);
}
.passport__mark::after {
  content: ''; position: absolute; left: -4px; top: -5px; width: 11px; height: 5px; background: var(--ink);
}
.passport__ends {
  display: flex; justify-content: space-between; margin-top: 4px;
  font-size: var(--t-small); color: var(--ink-muted); font-variant-numeric: tabular-nums;
}
.passport__value { margin: 0; font-size: var(--t-small); color: var(--ink-muted); }
.passport__note { margin-top: var(--sp-4); font-size: var(--t-small); color: var(--ink-muted); }

/* ─── Таблицы ────────────────────────────────────────────────────────────── */
.tablewrap { overflow-x: auto; min-width: 0; border: 1px solid var(--line-strong); }
.tablewrap:focus-visible { outline-offset: 0; }
.tbl { width: 100%; border-collapse: collapse; font-size: var(--t-small); background: var(--tint); }
.tbl__cap {
  text-align: left; padding: 14px 16px; background: var(--sheet);
  border-bottom: 1px solid var(--line-strong);
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.tbl th, .tbl td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.tbl thead th {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  white-space: nowrap; color: var(--ink-muted);
}
.tbl tbody th { font-weight: 600; white-space: nowrap; }
.tbl tbody tr:last-child th, .tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { font-variant-numeric: tabular-nums; }

/* ─── Карточка коллекции: шафрановый корешок слева ───────────────────────── */
.grid-cards { display: grid; gap: var(--sp-5); }
.card {
  position: relative; display: block; text-decoration: none;
  border: 1px solid var(--line); padding: 10px 10px 16px 10px; background: var(--sheet);
}
.card__spine {
  position: absolute; left: 0; top: 0; bottom: 0; width: 8px; background: var(--field);
  transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease-in);
}
.card__pic, .card__body { display: block; transition: transform var(--mid) var(--ease-in); }
.card:hover .card__spine, .card:focus-visible .card__spine { transform: scaleX(1); }
.card:hover .card__pic, .card:hover .card__body,
.card:focus-visible .card__pic, .card:focus-visible .card__body { transform: translateX(8px); }
.card__pic { background: var(--tint); }
.card__img img { aspect-ratio: 4 / 3; object-fit: cover; }
.card__body { padding-top: 12px; display: grid; gap: 2px; }
.card__name { font-family: var(--serif); font-size: 26px; line-height: 1.1; }
.card__meta { font-size: var(--t-small); color: var(--ink-muted); }
.card__by { font-size: var(--t-small); }

/* ─── Развороты коллекций со счётчиком ───────────────────────────────────── */
.spreads { position: relative; }
.spreads__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  gap: var(--sp-5);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
}
.spreads__track::-webkit-scrollbar { display: none; }
.spread { scroll-snap-align: start; display: grid; gap: var(--sp-5); min-width: 0; }
.spread__frame { min-width: 0; }
.spread__say { min-width: 0; display: grid; gap: var(--sp-3); align-content: start; }
.spread__name { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.05; }
.spread__facts { display: grid; gap: 8px; margin: 0; }
.spread__facts div { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.spread__facts dt { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); padding-top: 2px; }
.spread__facts dd { margin: 0; font-size: var(--t-small); }
.spread__cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-2); }
.spreads__bar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--line);
}
.spreads__btn {
  min-width: 48px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 1px solid var(--ink); cursor: pointer; font-size: 19px; line-height: 1;
}
.spreads__btn[disabled] { opacity: .35; cursor: default; }
.spreads__count {
  margin-left: auto; font-family: var(--serif); font-size: var(--t-counter);
  font-variant-numeric: tabular-nums; letter-spacing: 0.04em;
}

/* ─── Форма: ячейки бланка ───────────────────────────────────────────────── */
.ask { padding-block: var(--section); }
.ask__grid { display: grid; gap: var(--sp-6); }
.ask__say { min-width: 0; }
.ask__after { display: grid; gap: 10px; margin-top: var(--sp-5); }
.ask__after dt { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ask__after dd { margin: 0 0 6px; font-size: var(--t-small); line-height: 1.55; }
.ask__form { display: grid; gap: var(--sp-3); align-content: start; }
.ask__alert { border: 2px solid var(--error); color: var(--error); padding: 12px 14px; font-size: var(--t-small); }
.ask__alert[hidden] { display: none; }
.ask__small { font-size: var(--t-small); color: var(--ink-muted); }
.ask__send { min-height: 52px; }
.pot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cell { position: relative; display: grid; border: 1px solid var(--line-strong); background: var(--tint); }
.cell:focus-within { outline: 3px solid var(--field); outline-offset: 0; border-color: var(--ink); }
.cell__label {
  font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-muted); padding: 10px 14px 0;
}
.cell--req .cell__label::after { content: ' *'; color: var(--error); }
.cell__in {
  border: 0; background: none; padding: 4px 14px 12px; font-size: var(--t-field); line-height: 1.5;
  min-height: 44px; width: 100%; resize: vertical;
}
.cell__in:focus { outline: none; }
.cell__hint { padding: 0 14px 10px; font-size: var(--t-small); color: var(--ink-muted); }
.cell.is-bad { border-color: var(--error); border-width: 2px; }
.cell__err { padding: 0 14px 10px; font-size: var(--t-small); color: var(--error); }

/* ─── Списки-факты ───────────────────────────────────────────────────────── */
.facts { display: grid; gap: var(--sp-5); }
.fact { border-top: 2px solid var(--ink); padding-top: var(--sp-3); }
.fact h3 { font-size: var(--t-h3); margin-bottom: 8px; }
.fact p { font-size: var(--t-small); line-height: 1.6; color: var(--ink-muted); }

/* Цель нажатия от 44 там, где ссылка сама по себе пункт списка, а не слово
   внутри предложения: для ссылок в тексте правило 2.5.8 делает исключение. */
.ruled { display: grid; }
.ruled > li { display: grid; gap: 4px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.ruled > li > a, .ft__nav .lnk, .ft__facts a {
  display: inline-flex; align-items: center; min-height: 44px;
}
.ruled > li:first-child { border-top: 1px solid var(--line); }

/* ─── Подвал: нижний край листа с вырубкой-уголком ───────────────────────── */
.ft { padding-top: var(--section); }
.ft__top, .ft__nav, .ft__facts, .ft__legal { max-width: var(--measure); margin: 0 auto; padding-inline: var(--pad); }
.ft__top { display: grid; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.ft__phrase { font-family: var(--serif); font-size: var(--t-h2); line-height: 1.06; max-width: 20ch; }
.ft__nav { display: flex; flex-wrap: wrap; gap: var(--sp-4); padding-bottom: var(--sp-5); }
.ft__facts { display: grid; gap: 10px; padding-bottom: var(--sp-5); font-size: var(--t-small); }
.ft__facts dt { font-size: var(--t-label); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted); }
.ft__facts dd { margin: 0 0 8px; }
.ft__legal {
  display: flex; flex-wrap: wrap; gap: 14px; padding-top: var(--sp-4); padding-bottom: var(--sp-5);
  border-top: 1px solid var(--line); font-size: var(--t-small); color: var(--ink-muted);
}
.ft__legal a { text-decoration: underline; text-underline-offset: 3px; }
.ft__edge {
  /* кромка читается и когда поле ушло в navy, и когда осталось шафрановым */
  height: 14px; background: var(--field); border-top: 1px solid var(--ink);
  border-radius: 0 0 var(--sheet-radius) var(--sheet-radius);
  clip-path: polygon(0 0, 100% 0, 100% 0%, calc(100% - 44px) 100%, 0 100%);
}

/* ─── Страницы прозы ─────────────────────────────────────────────────────── */
.doc { padding-block: var(--sp-7) var(--section); }
.doc h2 { margin-top: var(--sp-6); margin-bottom: var(--sp-3); }
.doc h3 { margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.doc .lead { margin-top: var(--sp-4); }
.crumbs { font-size: var(--t-small); color: var(--ink-muted); margin-bottom: var(--sp-4); }
.crumbs a { text-decoration: underline; text-underline-offset: 3px; }

.split { display: grid; gap: var(--sp-6); }
.stack-4 { display: grid; gap: var(--sp-4); }
.stack-5 { display: grid; gap: var(--sp-5); }

/* ─── Начальные состояния движения (в CSS, не в JS) ──────────────────────── */
.mo [data-rise] { opacity: 0; transform: translateY(14px); }
.mo-off [data-rise], .mo-go [data-rise].is-in { opacity: 1; transform: none; transition: opacity 520ms var(--ease-in), transform 520ms var(--ease-in); }

/* ─── Расширение ─────────────────────────────────────────────────────────── */
@media (min-width: 560px) {
  .cell { grid-template-columns: 140px 1fr; align-items: start; }
  .cell__label { padding: 14px 0 14px 14px; }
  .cell__in { padding: 10px 14px; }
  .cell__hint { grid-column: 2; padding-top: 0; }
  .cell__err { grid-column: 2; }
  .grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 760px) {
  .hero__stage { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr) minmax(0, 2fr); gap: var(--gutter); }
  /* предмет шире 2:1 занимает больше листа: иначе диван ужимается в полоску,
     а выноски висят в пустоте по краям */
  .hero__stage--wide { grid-template-columns: minmax(0, 3fr) minmax(0, 12fr) minmax(0, 3fr); }
  /* тонкая линия от выноски к предмету: слева вправо, справа влево */
  .hero__side--left .callout::after,
  .hero__side--right .callout::after {
    content: ''; position: absolute; top: 50%; width: calc(var(--gutter) + 4px); height: 1px; background: var(--line-strong);
  }
  .hero__side--left .callout::after { left: 100%; }
  .hero__side--right .callout::after { right: 100%; }
  .spread { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); gap: var(--gutter); align-items: start; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-6); }
  .split { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); }
  .ask__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); }
  .ft__top { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
  .ft__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-5); }
  .grid-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
  .hd__nav, .hd__ask { display: flex; }
  .hd__menu { display: none; }
  .hd__ask { margin-left: 0; }
  .leaf { display: none; }

  .mega {
    display: block; position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
    background: var(--tint); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity var(--mid) var(--ease-in), transform var(--mid) var(--ease-in), visibility var(--mid);
  }
  .mega.is-open { opacity: 1; visibility: visible; transform: none; }
  .mega__in {
    max-width: var(--measure); margin: 0 auto; padding: var(--sp-5) var(--pad);
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5) var(--gutter);
  }
  .mega__h { font-size: 21px; margin-bottom: 10px; }
  .mega__h a { text-decoration: none; border-bottom: 1px solid var(--line-strong); }
  .mega__col ul { display: grid; gap: 2px; }
  .mega__col li a { display: block; padding: 5px 0; font-size: var(--t-small); text-decoration: none; }
  .mega__col li a:hover { text-decoration: underline; text-underline-offset: 3px; }
  .mega__pic { display: none; }
  .mega__all { grid-column: 1 / -1; }
  .ft__facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .doc__body { max-width: var(--text-measure); }
  /* панель подменю: три колонки по типу мебели и кадр справа */
  .mega__in { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.1fr); }
  .mega__pic { display: block; margin: 0; }
  .mega__pic .pic img { aspect-ratio: 4 / 3; object-fit: cover; }
  .mega__cap {
    margin-top: 8px; font-size: var(--t-label); font-weight: 600;
    letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-muted);
  }
  .mega__all { grid-column: 1 / 4; }
}

/* ─── Тихий режим ────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .spreads__track { scroll-snap-type: none; }
}