/* ОПЛОТ — общая основа для экранной и печатной версии каталога.
   Здесь только шрифты, цвета и типографическая шкала. Раскладка полос — в print.css,
   экранная — в screen.css. */

@font-face{font-family:'Geist';src:url('../assets/fonts/Geist-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Geist';src:url('../assets/fonts/Geist-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Geist';src:url('../assets/fonts/Geist-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:block}
@font-face{font-family:'Oswald';src:url('../assets/fonts/Oswald-SemiBold.woff2') format('woff2');font-weight:600;font-style:normal;font-display:block}

:root{
  /* --- цвет ---
     Замерено по нашим же рендерам: полотна лежат в диапазоне #a8afbd…#e0e0e0
     и все холодные (синий канал выше красного на 12–19). Отсюда нейтрально-холодная
     гамма: тёплый тауп с такими дверями спорит. */
  --ink:        #16181c;   /* основной текст и графит-плашка */
  --ink-2:      #4a4f57;   /* второстепенный текст */
  --ink-3:      #82878f;   /* подписи, колонцифры */
  --paper:      #eff0f2;   /* фон полосы с моделями */
  --paper-2:    #e3e5e8;   /* фон карточки/подложки */
  --grey:       #9a9b9f;   /* средний серый, замер с референса «Двери 2025» */
  --line:       #ccced3;
  --line-soft:  #dfe1e4;
  --white:      #ffffff;
  /* На тёмном фоне ровно две ступени серого: читаемый текст и служебный.
     Больше не заводим — лишний оттенок ради одной строки заметен сразу. */
  --on-dark:    #b9bec6;   /* лид, описание на графите */
  --on-dark-2:  #8b9099;   /* колонцифра, служебные подписи */

  /* --- типографика ---
     Две гарнитуры и три начертания на всё: Geist 400/500/600 в тексте,
     Oswald 600 в заголовках. Один и тот же набор в PDF и на сайте — оба
     подключают этот файл, других @font-face в проекте нет.
     Было 15 кеглей на сайте и 11 в печати: разница в полпункта между соседними
     ступенями не читается как решение, зато сразу видна как разнобой. */
  --font:       'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-alt:   'Oswald', 'Geist', sans-serif;

  /* печать (pt) */
  --pt-xs:  8pt;    /* колонцифра, служебные подписи, факты */
  --pt-sm:  9pt;    /* подписи дверей, перечни */
  --pt-md:  10pt;   /* основной текст */
  --pt-lg:  19pt;   /* имя модели на полосе */
  --pt-xl:  22pt;   /* заголовок полосы */
  --pt-2xl: 40pt;   /* обложка */
  --pt-3xl: 58pt;   /* шмуцтитул раздела */

  /* экран (px) */
  --fs-xs:  13px;   /* второстепенное: «глухая», счётчик, подвал */
  --fs-sm:  14px;   /* навигация, чипы, подписи дверей */
  --fs-md:  15px;   /* описание модели и раздела */
  --fs-lg:  16px;   /* лид, основной текст */
  --fs-xl:  clamp(19px, 2.2vw, 26px);   /* имя модели */
  --fs-2xl: clamp(26px, 3.6vw, 44px);   /* раздел */
  --fs-3xl: clamp(34px, 6.4vw, 72px);   /* заголовок страницы */
}

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

html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

body{
  margin:0;
  font-family:var(--font);
  font-weight:400;
  color:var(--ink);
  background:var(--paper);
  letter-spacing:normal;
}

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

/* Роли текста. Разрядку не используем нигде — узкий гротеск и так широк по апрошу. */
.t-display{font-family:var(--font-alt);font-weight:600;line-height:.92;letter-spacing:normal}
.t-model  {font-weight:600;line-height:1.05}
.t-lead   {font-weight:400;line-height:1.5;color:var(--ink-2)}
.t-cap    {font-weight:500;line-height:1.25}
.t-meta   {font-weight:400;color:var(--ink-3)}

/* Дверь. Полотно всех моделей приведено к одной физической высоте, поэтому
   выравниваем по НИЗУ КОРОБКИ, а не по низу картинки: под коробкой в рендере
   лежит мягкая тень, и она у серий разной величины.

   Снаружи задаётся только --body-h (высота коробки). Всё остальное — размеры
   кадра и его сдвиги — CSS выводит из долей, снятых с самих рендеров:
   --live, --bot, --centre, --frame их ставит LAYOUT.vars(). */
.door{
  display:block;
  position:relative;
  height:var(--body-h);
  width:calc(var(--body-h) * var(--body-ratio));
  margin:0 auto;

  --img-h:calc(var(--body-h) / var(--live));            /* высота всего кадра */
  --img-w:calc(var(--img-h) * var(--frame));            /* его ширина */
  --shift:calc((0.5 - var(--centre)) * var(--img-w));   /* поправка на несимметричную тень */
}
.door img{
  position:absolute;
  left:50%;
  bottom:calc(-1 * var(--bot) * var(--img-h));
  height:var(--img-h);
  width:auto;
  /* Сдвигаем кадр так, чтобы посередине оказалось само полотно, а не кадр.
     У большинства рендеров поправка нулевая, у «Соляриса» — 14.7 % ширины. */
  transform:translateX(calc(-50% + var(--shift)));
  max-width:none;
}