/**
 * Точка подключения дизайн-системы Tribù (система №2 из 10).
 *
 *   <link rel="stylesheet" href="design-system-tribu/index.css">
 *
 * Рукописный акцент Caveat сюда НЕ входит: подключается отдельно
 * fonts-script.css и только на страницах, где он реально используется.
 */

/* ── tokens.css ── */
/* ГЕНЕРИРУЕТСЯ АВТОМАТИЧЕСКИ из tokens.json. Не редактировать вручную. */
/* Система: Tribu (№2 из 10) — тёмная база */

:root {

  /* Палитра — единственное, что меняется при клонировании под другой бренд */
  --c-ink: #23281E;
  --c-deep: #292F23;
  --c-panel: #FFFFFF;
  --c-bone: #F0EDE6;
  --c-sand: #E4DDD0;
  --c-stone: #A8A899;
  --c-warm-grey: #5F5C52;
  --c-olive: #8A9C6E;
  --c-olive-deep: #3F4A33;
  --c-clay: #C4834F;
  --c-danger: #D4705F;

  /* Семантика тёмной базы — вёрстка использует только её */
  --bg-page: var(--c-ink);
  --bg-raised: var(--c-deep);
  --bg-panel: var(--c-panel);
  --bg-sand: var(--c-sand);
  --text-primary: var(--c-bone);
  --text-secondary: var(--c-sand);
  --text-muted: var(--c-stone);
  --text-accent: var(--c-olive);
  --text-inverse: var(--c-ink);
  --accent: var(--c-olive);
  --detail: var(--c-clay);
  --error: var(--c-danger);
  --border-subtle: rgba(240, 237, 230, 0.18);
  --border-strong: rgba(240, 237, 230, 0.38);
  --scrim: rgba(35, 40, 30, 0.42);
  --scrim-deep: rgba(35, 40, 30, 0.72);
  --veil: rgba(240, 237, 230, 0.06);

  /* Шрифты */
  --font-display: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  --font-ui: 'Montserrat', 'Montserrat Fallback', ui-sans-serif, system-ui, 'Segoe UI', sans-serif;
  --font-script: 'Caveat', 'Caveat Fallback', 'Segoe Script', cursive;
  --font-mono: ui-monospace, 'Cascadia Code', 'SF Mono', Menlo, monospace;

  /* Типографическая шкала */
  --fs-display: clamp(3rem, 8vw, 7.5rem);
  --lh-display: 1.0;
  --ls-display: 0.02em;
  --fw-display: 300;
  --ff-display: var(--font-display);
  --fs-h1: clamp(2.25rem, 5vw, 4.5rem);
  --lh-h1: 1.08;
  --ls-h1: 0.01em;
  --fw-h1: 300;
  --ff-h1: var(--font-display);
  --fs-h2: clamp(1.75rem, 3.4vw, 3rem);
  --lh-h2: 1.12;
  --ls-h2: 0.01em;
  --fw-h2: 300;
  --ff-h2: var(--font-display);
  --fs-h3: clamp(1.0625rem, 0.5vw + 0.95rem, 1.1875rem);
  --lh-h3: 1.4;
  --ls-h3: 0.06em;
  --fw-h3: 600;
  --ff-h3: var(--font-ui);
  --fs-num: clamp(2.5rem, 5.5vw, 5rem);
  --lh-num: 1.0;
  --ls-num: 0;
  --fw-num: 300;
  --ff-num: var(--font-display);
  --fs-lead: clamp(1.1875rem, 0.7vw + 1rem, 1.375rem);
  --lh-lead: 1.7;
  --ls-lead: 0;
  --fw-lead: 400;
  --ff-lead: var(--font-ui);
  --fs-body: clamp(1.0625rem, 0.55vw + 0.9rem, 1.125rem);
  --lh-body: 1.7;
  --ls-body: 0;
  --fw-body: 400;
  --ff-body: var(--font-ui);
  --fs-small: clamp(0.9375rem, 0.25vw + 0.88rem, 1rem);
  --lh-small: 1.6;
  --ls-small: 0.01em;
  --fw-small: 400;
  --ff-small: var(--font-ui);
  --fs-label: 0.875rem;
  --lh-label: 1.35;
  --ls-label: 0.18em;
  --fw-label: 500;
  --ff-label: var(--font-ui);
  --fs-script: clamp(2rem, 4vw, 3.5rem);
  --lh-script: 1.1;
  --ls-script: 0;
  --fw-script: 500;
  --ff-script: var(--font-script);
  --measure-text: 60ch;
  --measure-prose: 66ch;
  --measure-display: 16ch;

  /* Спейсинг */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-56: 56px;
  --sp-72: 72px;
  --sp-96: 96px;
  --sp-128: 128px;
  --sp-176: 176px;
  --section-sm: 72px;
  --section-md: 96px;
  --section-lg: 128px;
  --panel-overlap: 96px;

  /* Форма — всё острое, скругление только у круглых контролов слайдера */
  --r-none: 0px;
  --r-round: 999px;

  /* Тени — работают на тёмном, поэтому глубокие */
  --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.38);
  --shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.24);

  /* Раскладка */
  --container: 1280px;
  --container-narrow: 1040px;
  --container-text: 680px;
  --header-h: 88px;
  --announce-h: 40px;
  --gutter: 16px;
  --gutter-lg: 24px;
  --columns: 8;
  --bp-xs: 480px;
  --bp-sm: 768px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1536px;

  /* Движение */
  --dur-fast: 200ms;
  --dur-base: 320ms;
  --dur-slow: 520ms;
  --dur-wipe: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-inout: cubic-bezier(0.76, 0, 0.24, 1);
  --stagger-line: 70ms;
  --stagger-card: 90ms;
  --slider-peek: 88px;
  --slider-friction: 0.92;
  --slider-snap-dur: 0.55;
  --slider-drag-scale: 0.985;
  --counter-dur: 1.6;
  --hover-photo-scale: 1.05;
  --hover-line-dur: 420ms;
}

/* Белая врезка-коллаж: те же имена, другие значения. */
.panel,
[data-panel] {
  --bg-page: var(--c-panel);
  --bg-raised: var(--c-sand);
  --text-primary: var(--c-ink);
  --text-secondary: var(--c-warm-grey);
  --text-muted: var(--c-warm-grey);
  --text-accent: var(--c-olive-deep);
  --text-inverse: var(--c-panel);
  --accent: var(--c-olive-deep);
  --border-subtle: rgba(19, 22, 17, 0.12);
  --border-strong: rgba(19, 22, 17, 0.32);
  color: var(--text-primary);
  background: var(--bg-page);
}

/* ── fonts.css ── */
/**
 * Шрифты — локальные вариативные woff2, без запросов к Google Fonts в рантайме.
 * Обе гарнитуры сняты с референсов в design-system-making/TRIBU/.
 *
 *   Cormorant Garamond (300-600, прямое и курсив) — заголовки, счётчики,
 *     курсивные акценты. Высококонтрастная антиква, как в «Create Your Dream
 *     Outdoor Escape» и «OUTDOOR LIVING».
 *   Montserrat (400-600) — интерфейс, текст, капс-лейблы с широким трекингом,
 *     как «САД И ТЕРРАСА» и «МАТЕРИАЛЫ И КАЧЕСТВО» у TERRAMEBEL.
 *
 * Вариативные версии намеренно: один файл на подмножество вместо файла
 * на каждое начертание. Ни одна не пересекается с системой №1 (Onest + Inter).
 *
 * Сайт англоязычный (рынок США): на боевой странице скачиваются только latin,
 * Montserrat 37 КБ и Cormorant 37 КБ, плюс курсив Cormorant 38 КБ там, где он
 * стоит. Кириллические подмножества объявлены, но браузером не запрашиваются —
 * unicode-range отдаёт лишь нужный кусок. Нужны для русских styleguide.html
 * и motion.html.
 *
 * Рукописный акцент Caveat вынесен в fonts-script.css и подключается только
 * на страницах, где он реально есть, — 90 КБ ради одного слова того не стоят.
 */

/* Cormorant Garamond italic — cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-italic-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Cormorant Garamond italic — cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-italic-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Cormorant Garamond italic — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond italic — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Cormorant Garamond — cyrillic-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Cormorant Garamond — cyrillic */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Cormorant Garamond — latin-ext */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Cormorant Garamond — latin */
@font-face {
  font-family: 'Cormorant Garamond';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(./fonts/CormorantGaramond-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Montserrat — cyrillic-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/Montserrat-cyrillic-ext.woff2) format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

/* Montserrat — cyrillic */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/Montserrat-cyrillic.woff2) format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

/* Montserrat — latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/Montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Montserrat — latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(./fonts/Montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ─── Подстановочные гарнитуры под метрики ──────────────────────────────────
   Пока woff2 едут, текст рисуется системным шрифтом. Без поправок Georgia
   и Segoe UI шире и выше, и в момент подмены строки переносятся заново:
   заголовки и кнопки «прыгают». Здесь системный шрифт подогнан под метрики
   веб-шрифта (ширина по частотам букв, высота строки по hhea/typo),
   значения посчитаны fontTools по нашим woff2 и Times New Roman / Arial.
   Liberation и Tinos/Arimo метрически совпадают с Times и Arial. */

@font-face {
  font-family: 'Cormorant Fallback';
  font-style: normal;
  font-weight: 300 600;
  src: local('Times New Roman'), local('TimesNewRomanPSMT'), local('Liberation Serif'), local('Tinos');
  size-adjust: 96.8%;
  ascent-override: 95.45%;
  descent-override: 29.65%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Cormorant Fallback';
  font-style: italic;
  font-weight: 300 600;
  src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'), local('Liberation Serif Italic'), local('Tinos Italic');
  size-adjust: 87.7%;
  ascent-override: 105.36%;
  descent-override: 32.73%;
  line-gap-override: 0%;
}

/* Строчной текст: абзацы, лиды, поля формы. */
@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 300 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 114.1%;
  ascent-override: 84.84%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Montserrat Fallback';
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 109%;
  ascent-override: 88.81%;
  descent-override: 23.03%;
  line-gap-override: 0%;
}

/* Капс: лейблы, меню, кнопки, h3. У заглавных Montserrat и Arial разница
   в ширине меньше, чем у строчных, поэтому отдельная поправка. */
@font-face {
  font-family: 'Montserrat Caps Fallback';
  font-weight: 300 549;
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Arimo');
  size-adjust: 104.8%;
  ascent-override: 92.37%;
  descent-override: 23.95%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Montserrat Caps Fallback';
  font-weight: 550 900;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Liberation Sans Bold'), local('Arimo Bold');
  size-adjust: 104.65%;
  ascent-override: 92.5%;
  descent-override: 23.98%;
  line-gap-override: 0%;
}

/* ── reset.css ── */
/* Reset. Тёмная база, поэтому color-scheme dark и светлые поля форм отменяются. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Система тёмная по умолчанию. Белые панели — это врезки, а не тема. */
  color-scheme: dark;
}

body,
h1, h2, h3, h4,
p, figure, blockquote, dl, dd,
ul, ol {
  margin: 0;
}

ul[role='list'],
ol[role='list'] {
  list-style: none;
  padding: 0;
}

body {
  min-height: 100svh;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
  background: none;
}

button {
  border: none;
  padding: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* Фокус виден всегда. На тёмном фоне ринг оливковый, на белой панели —
   тёмный: --accent переопределяется в .panel, ринг едет за ним. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

:focus:not(:focus-visible) {
  outline: none;
}

[hidden] {
  display: none !important;
}

::selection {
  background: var(--c-olive);
  color: var(--c-ink);
}

/* ── base.css ── */
/**
 * Базовая типографика.
 *
 * Правило системы: антиква — только для крупного (display, h1, h2, счётчики
 * и курсивные акценты). Всё, что мельче h3, — Montserrat. Смешение внутри
 * одной строки допускается ровно в одном приёме: курсивная антиква как
 * первая фраза заголовка (см. .t-mixed), как в референсах.
 */

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-body);
}

/* ─── Крупная типографика: антиква ───────────────────────────────────────── */

h1, h2,
.t-display, .t-h1, .t-h2, .t-num {
  font-family: var(--font-display);
  font-weight: 300;
  text-wrap: balance;
  color: var(--text-primary);
}

.t-display {
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-display);
  max-width: var(--measure-display);
}

/* Приём TERRAMEBEL: display в капсе с разрядкой. */
.t-display--caps {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  max-width: none;
}

h1, .t-h1 {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-h1);
}

h2, .t-h2 {
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  letter-spacing: var(--ls-h2);
  font-weight: var(--fw-h2);
}

.t-num {
  font-size: var(--fs-num);
  line-height: var(--lh-num);
  font-weight: var(--fw-num);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Курсивная антиква впереди гротескного заголовка — приём из референсов
   («Let's grow! Fill in the form», «What builders say»). */
.t-mixed {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
}

.t-mixed em,
.t-serif-i {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: 0;
}

/* ─── Мелкая типографика: гротеск ────────────────────────────────────────── */

h3, .t-h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-weight: var(--fw-h3);
  text-transform: uppercase;
  color: var(--text-primary);
}

/* Капс-лейбл с широким трекингом — главный опознавательный знак системы. */
.t-label {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  line-height: var(--lh-label);
  letter-spacing: var(--ls-label);
  font-weight: var(--fw-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.t-lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  color: var(--text-secondary);
  max-width: var(--measure-text);
}

.t-small {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
}

.t-muted { color: var(--text-muted); }
.t-accent { color: var(--text-accent); }
.t-num-tab { font-variant-numeric: tabular-nums; }

/* Рукописный акцент. Требует fonts-script.css.
   Ограничение системы: одно слово на страницу. */
.t-script {
  font-family: var(--font-script);
  font-size: var(--fs-script);
  line-height: var(--lh-script);
  font-weight: var(--fw-script);
  color: var(--text-accent);
}

p {
  max-width: var(--measure-text);
}

strong, b { font-weight: 600; }

/* ─── Ссылки ─────────────────────────────────────────────────────────────── */

a:where(:not([class])) {
  color: var(--text-accent);
  text-decoration: underline;
  text-underline-offset: 0.22em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-out);
}

a:where(:not([class])):hover { color: var(--text-primary); }

/* ─── prose: статьи раздела «Журнал» ─────────────────────────────────────── */

.prose {
  max-width: var(--measure-prose);
  color: var(--text-secondary);
}

.prose > * + * { margin-top: var(--sp-24); }

.prose h2 {
  margin-top: var(--sp-72);
  color: var(--text-primary);
}

.prose h3 {
  margin-top: var(--sp-56);
  color: var(--text-primary);
}

.prose p { max-width: none; }

.prose ul {
  list-style: none;
  padding-left: 0;
}

.prose ul > li {
  position: relative;
  padding-left: var(--sp-24);
}

/* Маркер — короткая черта, а не точка: рифмуется с линейной графикой. */
.prose ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 12px;
  height: 1px;
  background: var(--accent);
}

.prose ol { padding-left: var(--sp-24); }
.prose li + li { margin-top: var(--sp-8); }

.prose figure {
  margin-block: var(--sp-40);
}

.prose figcaption {
  margin-top: var(--sp-12);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.prose blockquote {
  margin-block: var(--sp-56);
  padding-left: var(--sp-32);
  border-left: 1px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-h2);
  font-weight: 300;
  font-style: italic;
  color: var(--text-primary);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin-block: var(--sp-72);
}

/* Фотографии не скругляются никогда — в этой системе не скругляется ничего. */
img { border-radius: var(--r-none); }

figure { margin: 0; }

/* ── layout.css ── */
/**
 * Раскладка: 8 колонок, контейнер 1280, и главный приём системы —
 * панельный коллаж: белые врезки, наезжающие друг на друга поверх
 * почти чёрного фона (референсы TERRAMEBEL, листы 2 и 3).
 */

/* ─── Контейнеры ─────────────────────────────────────────────────────────── */

.container,
.container-narrow,
.container-text {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container { max-width: calc(var(--container) + var(--gutter) * 2); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }
.container-text { max-width: calc(var(--container-text) + var(--gutter) * 2); }

@media (min-width: 768px) {
  .container,
  .container-narrow,
  .container-text {
    padding-inline: var(--gutter-lg);
  }
}

.full-bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ─── Вертикальный ритм ──────────────────────────────────────────────────── */

.section { padding-block: var(--section-sm); }

@media (min-width: 768px) {
  .section { padding-block: var(--section-md); }
}

@media (min-width: 1280px) {
  .section { padding-block: var(--section-lg); }
}

.section--tight { padding-block: var(--sp-56); }
/* Для секций, где фото должно упираться в края. */
.section--edge { padding-block: 0; }
.section--raised { background: var(--bg-raised); }
.section--sand {
  background: var(--bg-sand);
  color: var(--c-ink);
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--sp-24);
  margin-bottom: var(--sp-56);
}

.section-head__title > * + * { margin-top: var(--sp-16); }

/* ─── Сетка на 8 колонок ─────────────────────────────────────────────────── */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--gutter);
}

@media (min-width: 768px) {
  .grid { gap: var(--gutter-lg); }
}

/* Базовое правило и спаны одной специфичности — иначе спаны не перебьют его.
   Форма записи `auto / span N` обязательна: короткое `span N` кладёт спан
   в grid-column-START, и тогда смещение .off-N затирает его — блок схлопывается
   в одну колонку. С `auto / span N` спан живёт в END и переживает смещение. */
.grid > [class*='c-'] { grid-column: auto / span var(--columns); }

@media (min-width: 768px) {
  .grid > .c-1 { grid-column: auto / span 1; }
  .grid > .c-2 { grid-column: auto / span 2; }
  .grid > .c-3 { grid-column: auto / span 3; }
  .grid > .c-4 { grid-column: auto / span 4; }
  .grid > .c-5 { grid-column: auto / span 5; }
  .grid > .c-6 { grid-column: auto / span 6; }
  .grid > .c-7 { grid-column: auto / span 7; }
  .grid > .c-8 { grid-column: auto / span 8; }

  /* Асимметрия: сдвиг вправо на N колонок. Коллаж на этом и держится. */
  .grid > .off-1 { grid-column-start: 2; }
  .grid > .off-2 { grid-column-start: 3; }
  .grid > .off-3 { grid-column-start: 4; }
  .grid > .off-4 { grid-column-start: 5; }
}

.auto-grid {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr));
}

@media (min-width: 768px) {
  .auto-grid { gap: var(--gutter-lg); }
}

/* ─── Панельный коллаж ───────────────────────────────────────────────────── */

/* .panel красится в tokens.css: там же переопределяется семантика цвета,
   поэтому любой компонент внутри белой врезки читается сам собой. */
.panel {
  padding: var(--sp-32);
  box-shadow: var(--shadow-panel);
}

@media (min-width: 768px) {
  .panel { padding: var(--sp-56); }
}

.panel--flush { padding: 0; }
.panel--sand { background: var(--c-sand); }

/* Наезд на предыдущий блок. Без него коллаж превращается в обычную сетку. */
@media (min-width: 768px) {
  .panel--pull { margin-block-start: calc(var(--panel-overlap) * -1); }
  .panel--pull-lg { margin-block-start: calc(var(--panel-overlap) * -2); }
  .panel--raise { margin-block-end: calc(var(--panel-overlap) * -1); }
}

/* Панель из двух половин: текст и фото, без зазора. */
.split-panel {
  display: grid;
  grid-template-columns: 1fr;
}

/* 1024, а не 768: на планшете фотоколонка выходила 186 px шириной при
   625 px высоты текста, и пейзаж 1,5 рисовался в рамке 0,30 — четверть
   кадра. Ниже 1024 панель складывается, и фото идёт своей полосой. */
@media (min-width: 1024px) {
  .split-panel { grid-template-columns: 1fr 1.35fr; }
  .split-panel--reverse > :first-child { order: 2; }
}

.split-panel__text {
  padding: var(--sp-32);
  display: grid;
  align-content: center;
  gap: var(--sp-16);
}

@media (min-width: 768px) {
  .split-panel__text { padding: var(--sp-56); }
}

.split-panel__media {
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

.split-panel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Секция-коллаж: тёмный фон, панели наезжают. */
.collage {
  display: grid;
  gap: var(--gutter-lg);
}

/* ─── Утилиты раскладки ──────────────────────────────────────────────────── */

.stack > * + * { margin-top: var(--gap, var(--sp-16)); }

.cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, var(--sp-16));
}

.split {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
}

.center-text {
  max-width: var(--measure-text);
  margin-inline: auto;
  text-align: center;
}

.sticky-aside {
  position: sticky;
  top: calc(var(--header-h) + var(--sp-24));
  align-self: start;
}

/* ── components.css ── */
/**
 * Компоненты Tribù.
 *
 * Правило формы: в системе не скругляется НИЧЕГО. Единственное исключение —
 * круглые контролы слайдера и аватары: это круги, а не скруглённые
 * прямоугольники. Радиус как приём здесь не используется вообще.
 *
 * Правило цвета: компонент всегда обращается к семантике (--text-primary,
 * --bg-page, --accent). Внутри .panel та же семантика переопределена под
 * белую врезку, поэтому один и тот же компонент работает на обоих фонах.
 */

/* ═══ Кнопки ═════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-12);
  min-height: 48px;
  padding: var(--sp-16) var(--sp-32);
  border: 1px solid transparent;
  border-radius: var(--r-none);
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.btn--solid {
  background: var(--text-primary);
  color: var(--bg-page);
}

.btn--solid:hover {
  background: var(--accent);
  color: var(--c-ink);
}

.btn--outline {
  border-color: var(--border-strong);
  color: var(--text-primary);
}

.btn--outline:hover {
  background: var(--text-primary);
  color: var(--bg-page);
}

.btn--accent {
  background: var(--accent);
  color: var(--c-ink);
}

.btn--accent:hover { background: var(--text-primary); }

.btn[disabled],
.btn[aria-disabled='true'] {
  pointer-events: none;
  background: transparent;
  border-color: var(--border-subtle);
  color: var(--text-muted);
}

/* Текстовая ссылка с линией, которая дорисовывается на ховере. */
.link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  position: relative;
  padding-bottom: var(--sp-4);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-primary);
}

.link::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(var(--line, 1));
  transform-origin: left;
  transition: transform var(--hover-line-dur) var(--ease-out);
}

.link:hover::after { transform: scaleX(0); transform-origin: right; }
.link--reveal { --line: 0; }
.link--reveal:hover::after { transform: scaleX(1); transform-origin: left; }

/* Круглые контролы слайдера — единственное скругление в системе. */
.btn-round {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-round);
  color: var(--text-primary);
  transition:
    background-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.btn-round:hover {
  background: var(--text-primary);
  color: var(--bg-page);
}

.btn-round[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* ═══ Бейдж и разделитель ════════════════════════════════════════════════ */

.badge {
  display: inline-block;
  padding: var(--sp-4) var(--sp-12);
  background: var(--detail);
  color: var(--c-ink);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 500;
}

.badge--quiet {
  background: transparent;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* Орнамент-разделитель: линия с ромбом посередине (приём HOME VERANDA). */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  color: var(--text-muted);
}

.ornament::before,
.ornament::after {
  content: '';
  height: 1px;
  width: clamp(40px, 12vw, 140px);
  background: currentColor;
  opacity: 0.5;
}

.ornament__mark {
  width: 6px;
  height: 6px;
  transform: rotate(45deg);
  border: 1px solid currentColor;
}

/* ═══ Полоса-объявление и хедер ══════════════════════════════════════════ */

.announce {
  min-height: var(--announce-h);
  display: grid;
  place-items: center;
  padding-inline: var(--gutter);
  background: var(--c-olive-deep);
  color: var(--c-bone);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-align: center;
}

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--c-ink) 82%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.header.is-stuck {
  background: var(--c-ink);
  border-bottom-color: var(--border-subtle);
}

/* Сетка HOME VERANDA: двухстрочный логотип слева с орнаментом над ним,
   меню по центру, утилиты справа. Шапка выше обычной именно из-за
   двухстрочного логотипа. */
.header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-32);
  min-height: var(--header-h);
}

.header__logo {
  display: grid;
  justify-items: start;
  gap: 2px;
  line-height: 1;
}

/* Растительный орнамент над вордмарком — веточка из референса. */
.header__ornament {
  width: 17px;
  height: 17px;
  color: var(--accent);
  margin-bottom: 1px;
}

.header__mark {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-indent: 0.28em;
  white-space: nowrap;
}

.header__desc {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav {
  display: none;
  gap: var(--sp-32);
  align-items: center;
  justify-content: center;
}

/* Утилиты справа — иконками, не кнопкой. */
.header__utils {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  justify-self: end;
}

.icon-btn {
  width: 40px;
  height: 40px;
  display: inline-grid;
  place-items: center;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.icon-btn:hover { color: var(--text-primary); }
.icon-btn svg { width: 19px; height: 19px; }

@media (min-width: 1024px) {
  .nav { display: flex; }
}

.nav__link {
  position: relative;
  padding-block: var(--sp-8);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--dur-fast) var(--ease-out);
}

.nav__link:hover,
.nav__link[aria-current='page'] { color: var(--text-primary); }

.nav__link[aria-current='page']::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1px;
  background: var(--accent);
}

.burger {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  justify-self: end;
}

@media (min-width: 1024px) {
  .burger { display: none; }
}

.menu-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: var(--c-ink);
  padding: var(--sp-32);
  display: grid;
  align-content: start;
  gap: var(--sp-24);
  overflow-y: auto;
}

.menu-mobile__item {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ═══ Герой ══════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: min(94svh, 940px);
  display: grid;
  place-items: center;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Затемнение по всей площади: заголовок в центре, а не в углу.
   Ровная подложка обязательна поверх градиента — фото парсятся с чужих
   сайтов, и светлое пятно ровно под текстом может оказаться на любом из них. */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, var(--scrim-deep) 0%, transparent 42%, var(--scrim) 100%),
    linear-gradient(var(--scrim), var(--scrim));
}

.hero__content {
  display: grid;
  justify-items: center;
  gap: var(--sp-24);
  padding-block: var(--sp-96);
  color: var(--c-bone);
}

.hero__content .t-label { color: var(--c-sand); }

/* ═══ Полоса категорий ═══════════════════════════════════════════════════ */

.strip {
  display: grid;
  gap: var(--gutter);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .strip { grid-template-columns: repeat(5, 1fr); }
}

.strip__item {
  display: grid;
  gap: var(--sp-16);
  justify-items: center;
  text-align: center;
}

.strip__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--bg-raised);
}

.strip__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.strip__item:hover .strip__media img {
  transform: scale(var(--hover-photo-scale));
}

/* ═══ Карточки ═══════════════════════════════════════════════════════════ */

.card {
  display: grid;
  gap: var(--sp-16);
}

.card__media {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
  aspect-ratio: var(--ratio, 4 / 5);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.card:hover .card__media img { transform: scale(var(--hover-photo-scale)); }

.card__badge {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.card__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-16);
  border-top: 1px solid var(--border-subtle);
  padding-top: var(--sp-16);
}

.card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.75rem);
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* ═══ Список характеристик (приём «МАТЕРИАЛЫ И КАЧЕСТВО») ════════════════ */

.feature-list {
  display: grid;
  gap: var(--sp-32);
}

.feature-item {
  display: grid;
  gap: var(--sp-8);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--border-subtle);
}

.feature-item__title {
  font-family: var(--font-ui);
  font-size: clamp(1rem, 1.4vw, 1.25rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Нумерованный вариант: индекс капсом слева. */
.feature-item--numbered {
  grid-template-columns: auto 1fr;
  column-gap: var(--sp-24);
}

.feature-item--numbered .feature-item__index {
  grid-row: span 2;
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--text-muted);
}

/* ═══ Счётчики ═══════════════════════════════════════════════════════════ */

.counters {
  display: grid;
  gap: var(--sp-40);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .counters { grid-template-columns: repeat(4, 1fr); }
}

.counter__value {
  font-family: var(--font-display);
  font-size: var(--fs-num);
  line-height: 1;
  font-weight: 300;
  font-variant-numeric: tabular-nums lining-nums;
}

.counter__label { margin-top: var(--sp-12); }

/* ═══ Trust-строка ═══════════════════════════════════════════════════════ */

.trust {
  display: grid;
  gap: var(--sp-32);
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .trust { grid-template-columns: repeat(4, 1fr); }
}

.trust__item {
  display: grid;
  gap: var(--sp-12);
  justify-items: center;
  text-align: center;
  padding-inline: var(--sp-16);
}

@media (min-width: 768px) {
  .trust__item + .trust__item { border-left: 1px solid var(--border-subtle); }
}

.trust__icon {
  width: 32px;
  height: 32px;
  color: var(--text-accent);
}

/* ═══ Слайдер ════════════════════════════════════════════════════════════ */
/* Поведение — js/slider.js на GSAP Draggable. Здесь только структура. */

.slider {
  position: relative;
}

.slider__viewport {
  overflow: hidden;
  /* Подглядывание следующей карточки — из референса «слайдер дизайнеров». */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  cursor: grab;
}

.slider__viewport.is-dragging { cursor: grabbing; }

.slider__track {
  display: flex;
  gap: var(--gutter-lg);
  will-change: transform;
  touch-action: pan-y;
}

.slider__slide {
  flex: 0 0 auto;
  width: min(78vw, 380px);
}

@media (min-width: 1024px) {
  .slider__slide { width: 380px; }
}

.slider__controls {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-32);
}

/* Полоса прогресса вместо точек: точки при 12 карточках нечитаемы. */
.slider__progress {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
  position: relative;
}

.slider__progress::after {
  content: '';
  position: absolute;
  inset-block: 0;
  left: 0;
  width: var(--progress-w, 30%);
  background: var(--accent);
  transform: translateX(var(--progress-x, 0));
}

/* ═══ Отзыв и дизайнер ═══════════════════════════════════════════════════ */

.quote-card {
  display: grid;
  gap: var(--sp-24);
  padding: var(--sp-32);
  border: 1px solid var(--border-subtle);
  height: 100%;
  align-content: start;
}

.quote-card__mark {
  font-family: var(--font-display);
  font-size: 3rem;
  line-height: 0.6;
  color: var(--accent);
}

.quote-card__author {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
  margin-top: auto;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--r-round);
  object-fit: cover;
  flex: 0 0 auto;
}

.rating {
  display: inline-flex;
  gap: 2px;
  color: var(--detail);
}

.designer {
  display: grid;
  gap: var(--sp-16);
}

.designer__media {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--bg-raised);
}

.designer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-out);
}

.designer:hover .designer__media img { transform: scale(var(--hover-photo-scale)); }

/* ═══ Формы: инпуты-подчёркивания ════════════════════════════════════════ */
/* Приём из анимированного референса: рамок нет, есть линия под полем. */

.field {
  position: relative;
  display: grid;
  gap: var(--sp-8);
}

.field__label {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: var(--sp-12) 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-subtle);
  border-radius: var(--r-none);
  color: var(--text-primary);
  transition: border-color var(--dur-base) var(--ease-out);
}

.input::placeholder,
.textarea::placeholder { color: var(--text-muted); }

.input:hover,
.textarea:hover,
.select:hover { border-bottom-color: var(--border-strong); }

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* Фокус видим по линии, но для клавиатуры нужен и ринг. */
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.textarea {
  min-height: 96px;
  resize: vertical;
}

.select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) calc(50% + 2px), calc(100% - 5px) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--sp-32);
}

.field--error .input,
.field--error .textarea,
.field--error .select { border-bottom-color: var(--error); }

.field__error {
  font-size: var(--fs-small);
  color: var(--error);
}

.form {
  display: grid;
  gap: var(--sp-32);
  max-width: 560px;
}

.form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-24);
}

.cta-band {
  display: grid;
  gap: var(--sp-32);
  padding-block: var(--section-md);
  text-align: center;
  justify-items: center;
}

/* ═══ Служебное ══════════════════════════════════════════════════════════ */

.breadcrumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

.breadcrumbs ol { display: contents; }
.breadcrumbs li + li::before { content: '—'; margin-right: var(--sp-8); }

.toast {
  position: fixed;
  left: 50%;
  bottom: var(--sp-32);
  translate: -50% 0;
  z-index: 80;
  padding: var(--sp-16) var(--sp-32);
  background: var(--c-bone);
  color: var(--c-ink);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  box-shadow: var(--shadow-lift);
}

.skeleton {
  background: linear-gradient(90deg, var(--bg-raised) 0%, var(--veil) 50%, var(--bg-raised) 100%);
  background-size: 200% 100%;
  animation: tb-skeleton 1.4s linear infinite;
}

@keyframes tb-skeleton {
  to { background-position: -200% 0; }
}

.empty-state {
  display: grid;
  justify-items: center;
  gap: var(--sp-16);
  padding: var(--sp-96) var(--sp-24);
  text-align: center;
  border: 1px solid var(--border-subtle);
  color: var(--text-muted);
}

/* ═══ Футер ══════════════════════════════════════════════════════════════ */

.footer {
  background: var(--c-ink);
  color: var(--c-bone);
  padding-block: var(--section-md) var(--sp-40);
  border-top: 1px solid var(--border-subtle);
}

/* Ярус 1 — строка-девиз. Приём плашки из OUTDOOR LIVING: главное в подвале
   не ссылки, а фраза, поэтому она крупнее и стоит первой. */
.footer__motto {
  max-width: none;
  text-align: center;
  font-family: var(--font-ui);
  font-size: clamp(0.875rem, 1.4vw, 1rem);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-bone);
}

/* Ромб обводкой, повёрнутый на 45° — мелкий орнамент под девизом. */
.footer__mark {
  /* span строчный: без display:block ширина и margin:auto не работают,
     ромб схлопывается в палочку у левого края. */
  display: block;
  width: 6px;
  height: 6px;
  margin: var(--sp-24) auto 0;
  border: 1px solid var(--accent);
  transform: rotate(45deg);
}

.footer__divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin-top: var(--sp-56);
}

/* Ярус 3 — три колонки, заметно мельче девиза. */
.footer__grid {
  display: grid;
  gap: var(--sp-40);
  grid-template-columns: repeat(2, 1fr);
  margin-top: var(--sp-56);
}

@media (min-width: 768px) {
  .footer__grid { grid-template-columns: repeat(3, 1fr); }
}

.footer__col {
  display: grid;
  gap: var(--sp-12);
  align-content: start;
}

.footer__col a {
  font-size: var(--fs-small);
  color: var(--c-stone);
  transition: color var(--dur-fast) var(--ease-out);
}

.footer__col a:hover { color: var(--c-bone); }

.footer__bottom {
  /* Базовое p { max-width } обрезало бы и текст, и линию над ним. */
  max-width: none;
  margin-top: var(--sp-72);
  padding-top: var(--sp-24);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-stone);
  text-align: center;
}

/* ── motion.css ── */
/**
 * Слой движения Tribù. Всё исполняет GSAP + ScrollTrigger, здесь — только
 * стартовые состояния и предохранители.
 *
 * Приёмы (ни один не повторяет систему №1):
 *   .reveal-lines   строки/карточки выезжают по очереди       js/scroll.js
 *   .wipe           фото открывается маской слева направо     js/scroll.js
 *   [data-parallax] панели коллажа едут с разной скоростью    js/scroll.js
 *   .count          счётчик добегает до числа                 js/scroll.js
 *   .slider         перетаскивание с инерцией и снапом        js/slider.js
 *
 * ВАЖНО: стартовые состояния спрятаны под .js-motion. Класс ставит
 * однострочник в <head> ДО отрисовки. Если JS не выполнился, класса нет,
 * и контент виден сразу — страница не остаётся пустой.
 */

/* ─── Появление по очереди ───────────────────────────────────────────────── */

.js-motion .reveal-lines > * {
  opacity: 0;
  transform: translateY(24px);
}

.js-motion .reveal-up {
  opacity: 0;
  transform: translateY(32px);
}

/* ─── Маска-вайп ─────────────────────────────────────────────────────────── */
/* Слева направо — в системе №1 раскрытие шло снизу вверх. */

/* Маска — не clip-path, а шторка поверх кадра, которая уезжает transform'ом:
   анимируются только transform и opacity, всё остальное перерисовывает кадр
   на каждом шаге. Шторка красится фоном страницы и сжимается к правому краю,
   на глаз это тот же вайп слева направо. Стартовое состояние — здесь, в CSS. */
.wipe { position: relative; }

.js-motion .wipe::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--bg-page);
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform var(--dur-wipe) var(--ease-inout);
  pointer-events: none;
}

.js-motion .wipe.is-wiped::after { transform: scaleX(0); }

.wipe > img,
.wipe__inner {
  will-change: transform;
}

/* ─── Параллакс панелей ──────────────────────────────────────────────────── */

[data-parallax] { will-change: transform; }

/* ─── Счётчики ───────────────────────────────────────────────────────────── */

.count { font-variant-numeric: tabular-nums lining-nums; }

/* ─── Слайдер ────────────────────────────────────────────────────────────── */

.slider__track { transition: none; }

/* Карточка под курсором чуть подбирается — тактильный отклик при захвате. */
.slider__viewport.is-dragging .slider__slide {
  transform: scale(var(--slider-drag-scale));
  transition: transform var(--dur-base) var(--ease-out);
}

/* ─── Ховеры ─────────────────────────────────────────────────────────────── */

.hover-line {
  position: relative;
  display: inline-block;
}

.hover-line::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--hover-line-dur) var(--ease-out);
}

.hover-line:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ─── Предохранители ─────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  /* Всё стартовое состояние снимается: GSAP в этом режиме не запускается,
     иначе контент остался бы спрятанным навсегда. */
  .js-motion .reveal-lines > *,
  .js-motion .reveal-up {
    opacity: 1 !important;
    transform: none !important;
  }

  .js-motion .wipe::after { display: none; }

  .slider__viewport.is-dragging .slider__slide { transform: none; }

  .skeleton { animation: none; }

  /* Слайдер вырождается в обычную ленту с нативным снапом. */
  .slider__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .slider__slide { scroll-snap-align: start; }

  /* Тишина, а не «быстрее»: 200 мс всё равно движение. Ховеры с масштабом
     фото тоже снимаются — увеличение кадра под курсором это движение. */
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .card:hover .card__media img,
  .strip__item:hover .strip__media img,
  .designer:hover .designer__media img { transform: none; }
}

/* ── utilities.css ── */
/* Утилиты. Подключаются последними — перебивают компоненты. */

.mt-8   { margin-top: var(--sp-8); }
.mt-16  { margin-top: var(--sp-16); }
.mt-24  { margin-top: var(--sp-24); }
.mt-32  { margin-top: var(--sp-32); }
.mt-40  { margin-top: var(--sp-40); }
.mt-56  { margin-top: var(--sp-56); }
.mt-72  { margin-top: var(--sp-72); }
.mt-96  { margin-top: var(--sp-96); }

.mb-8   { margin-bottom: var(--sp-8); }
.mb-16  { margin-bottom: var(--sp-16); }
.mb-24  { margin-bottom: var(--sp-24); }
.mb-32  { margin-bottom: var(--sp-32); }
.mb-56  { margin-bottom: var(--sp-56); }

.p-24 { padding: var(--sp-24); }
.p-32 { padding: var(--sp-32); }
.p-56 { padding: var(--sp-56); }

/* ─── Поверхности ────────────────────────────────────────────────────────── */

.raised { background: var(--bg-raised); }
.bordered { border: 1px solid var(--border-subtle); }
.border-top { border-top: 1px solid var(--border-subtle); }
.divider {
  border: none;
  border-top: 1px solid var(--border-subtle);
  margin: 0;
}

.shadow-panel { box-shadow: var(--shadow-panel); }
.shadow-lift { box-shadow: var(--shadow-lift); }

/* ─── Изображения ────────────────────────────────────────────────────────── */

.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-4-5  { aspect-ratio: 4 / 5; }
.ratio-3-4  { aspect-ratio: 3 / 4; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

.cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.frame {
  position: relative;
  overflow: hidden;
  background: var(--bg-raised);
}

/* ─── Текст ──────────────────────────────────────────────────────────────── */

.text-center { text-align: center; }
.text-right  { text-align: right; }
.uppercase   { text-transform: uppercase; }
.nowrap      { white-space: nowrap; }
.balance     { text-wrap: balance; }

.measure      { max-width: var(--measure-text); }
.measure-none { max-width: none; }

/* ─── Доступность ────────────────────────────────────────────────────────── */

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--sp-8);
  left: var(--sp-8);
  z-index: 100;
  padding: var(--sp-12) var(--sp-24);
  background: var(--c-bone);
  color: var(--c-ink);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-out);
}

.skip-link:focus-visible { transform: none; }

/* ─── Видимость по брейкпоинтам ──────────────────────────────────────────── */

@media (max-width: 767px)  { .hide-sm { display: none !important; } }
@media (min-width: 768px)  { .show-sm-only { display: none !important; } }
@media (max-width: 1023px) { .hide-md { display: none !important; } }