/*
  Столица камня — базовые стили и токены бренда.
  Палитра и шрифты перенесены из прототипов (утверждены заказчиком).
*/

/* --- Шрифты (self-host) --- */
@font-face {
  font-family: 'Prata';
  src: url('/assets/fonts/Prata.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Manrope';
  src: url('/assets/fonts/Manrope.ttf') format('truetype');
  font-weight: 300 800;
  font-display: swap;
}

:root {
  /* Палитра бренда */
  --graphite: #2B2B2E;
  --marble: #F5F2EC;
  --brass: #B08D57;
  --brass-dark: #9A7846;
  --stone: #8A8578;

  /* Нейтрали */
  --bg: #FBFAF7;
  --card: #FFFFFF;
  --line: #E7E2D6;
  --line-soft: #F0ECE2;
  --ink: #2B2B2E;
  --muted: #6E6A5D;

  --serif: 'Prata', Georgia, serif;
  --sans: 'Manrope', "Segoe UI", system-ui, sans-serif;

  --wrap: 1180px;
  --shadow: 0 1px 2px rgba(43,43,46,.04), 0 10px 30px rgba(43,43,46,.06);
  --shadow-lift: 0 4px 8px rgba(43,43,46,.07), 0 20px 50px rgba(43,43,46,.10);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

/* Защита от горизонтального скролла на любом экране (мин. 375px):
   ничто не выходит за ширину вьюпорта. */
html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Медиа и таблицы не распирают контейнер. */
img, svg, video { max-width: 100%; display: block; }
/* Длинные слова переносятся, не расширяя блок. */
h1, h2, h3, p, a, span, li { overflow-wrap: break-word; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: .005em;
  text-wrap: balance;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* Видно только скринридерам (для корректного порядка заголовков) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.eyebrow {
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--brass);
}

/* --- Кнопки --- */
.btn {
  display: inline-block;
  background: var(--brass);
  color: #fff;
  font-weight: 600;
  font-size: .95rem;
  padding: 14px 30px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  font-family: var(--sans);
  transition: background .18s, transform .1s;
}
.btn:hover { background: var(--brass-dark); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.btn--ghost { background: none; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn--ghost:hover { background: #fff; box-shadow: inset 0 0 0 1.5px var(--brass); }