/* ============================================================================
   CERAMICADECOR — ДИЗАЙН-СИСТЕМА ПОСАДОЧНЫХ
   ----------------------------------------------------------------------------
   Визуальная дирекция «Шамот»: страница выложена так же, как выкладывают
   печь. Модули лежат на основе и разделены швом в 2 px — шов и есть сетка.
   Границ, теней и скруглений в системе нет вообще, радиус везде 0.

   Доверие строится не воздухом, а материальной плотностью: сантиметры,
   килограммы, дни, штуки. Прилагательных вроде «эксклюзивный» на странице
   быть не должно.

   Один источник правды для всех семи направлений: правится здесь —
   меняется везде.
   ========================================================================== */

/* Oswald — узкий гротеск для заголовков, набирается прописными: это клеймо
   на изделии. Golos Text — весь читаемый текст и цифры, он сделан под
   русский. Обе гарнитуры с кириллицей и свободной лицензией. */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600&family=Golos+Text:wght@400;500;600;700&display=swap');

:root {
  /* Поверхности. Модули лежат на основе и разделены швом — это и есть
     вся система разделения. Рамок нет. */
  --bg:            #14100D;   /* основа — сырая глина */
  --bg-lighter:    #1E1813;   /* модуль — изразец */
  --bg-card:       #1E1813;
  --seam:          #0A0806;   /* шов 2 px между модулями */
  --bg-accent:     #2A211A;   /* модуль на ступень светлее */

  /* Акцент — обожжённая медь. Разрешена в четырёх местах: верхняя кромка
     активного модуля, цена «под ключ», один залитый CTA и ровно одна
     медная плитка в сетке каталога. Тонкой медью текст не набираем:
     на основе она даёт 3,9:1 и проваливается. */
  --primary:       #C2673A;
  --primary-hover: #D4784B;
  --orange:        #C2673A;
  --amber:         #C2673A;
  --green:         #7A8F3C;   /* статус «готово», не акцент */

  /* Текст */
  --white:         #F0E7DA;   /* основной — 15,1:1 на основе */
  --text-muted:    #AFA294;   /* вторичный — 7,1:1 на модуле */
  --text-dim:      #8C8073;

  /* «Линии» — это швы, а не бордеры */
  --border:        #0A0806;
  --border-light:  #2A211A;

  /* Типографика. Oswald на тёмном — не легче 400 и не мельче 24 px,
     иначе узкий гротеск рассыпается. */
  --font-heading: 'Oswald', 'Golos Text', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    'Golos Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Ритм */
  --container: 1360px;
  --pad-x:     clamp(1rem, .6rem + 2vw, 2.5rem);
  --section-y: clamp(3rem, 2rem + 4vw, 6rem);
  --seam-w:    2px;
  --transition: .3s ease;
}

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

/* Заголовки — Oswald прописными: это клеймо на изделии, а не подпись.
   Начертание не легче 400 и кегль не мельче 24 px, иначе узкий гротеск
   на тёмном рассыпается. */
h1, h2, h3 {
  margin: 0; font-family: var(--font-heading); font-weight: 500;
  text-transform: uppercase; line-height: 1.18; letter-spacing: .01em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 1.4rem + 2.6vw, 3.7rem); line-height: 1.14; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.15rem); font-weight: 400; line-height: 1.2; letter-spacing: .04em; }
h3 { font-size: 1.15rem; font-weight: 500; line-height: 1.15; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 1.05em 1.9em; border: 1px solid transparent; border-radius: 0;
  background: transparent; color: var(--white); font-family: inherit;
  font-size: .95rem; font-weight: 500; letter-spacing: .02em; cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn--primary { background: var(--primary); color: #fff; box-shadow: none; }
.btn--primary:hover { background: var(--primary-hover); }
/* Контурная кнопка — модуль на ступень светлее основы, а не пустая рамка:
   в системе без рамок пустой контур читается как незагрузившийся блок. */
.btn--ghost { background: var(--bg-accent); border-color: transparent; color: var(--white); }
.btn--ghost:hover { background: var(--bg-lighter); color: var(--primary); }

/* Служебная строка: Golos 600 в разрядку. Моноширинного в системе нет —
   его роль играет разрядка. */
.kicker {
  font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--primary);
}

/* Статусы готовности лендинга */
.status { display: inline-flex; align-items: center; gap: .45em; font-size: .8rem; white-space: nowrap; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status--live    { color: var(--green); }
.status--review  { color: #6ea8ff; }
.status--work    { color: var(--amber); }
.status--planned { color: var(--text-dim); }