/* =========================================================
   SVITA · RUST design system
   единый источник истины: палитра, шрифты, базовые компоненты
   подключай первым — переопределит токены любой страницы
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root {
  /* ── палитра RUST ── */
  --groen: #2F4438;
  --grijs: #5F6870;
  --oak:   #C9A97A;
  --creme: #F0EADF;
  --okra:  #7A6B3D;
  --paper: #EFEAE0;

  /* ── семантические псевдонимы ── */
  --ink: var(--groen);
  --bg: var(--paper);
  --bg-2: var(--creme);
  --line: rgba(47, 68, 56, .15);
  --line-strong: rgba(47, 68, 56, .25);
  --rule: var(--ink);
  --accent: var(--okra);
  --accent-2: var(--oak);
  --text-3: var(--grijs);
  --text-2: rgba(47, 68, 56, .75);

  /* legacy aliases — old pages still reference these */
  --bg-1: var(--paper);
  --paper-2: var(--creme);

  /* ── типографика ── */
  --serif: 'Cormorant Garamond', Georgia, serif;
  --sans:  'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono:  'Inter Tight', system-ui, monospace;

  /* ── вертикальный ритм ── */
  --r-1: .25rem;
  --r-2: .5rem;
  --r-3: 1rem;
  --r-4: 1.5rem;
  --r-5: 2rem;
  --r-6: 3rem;

  color-scheme: light;
}

/* отменяем dark-theme на любой странице, где он остался */
html[data-theme="dark"] { color-scheme: light; }
html[data-theme="dark"] body { background: var(--paper); color: var(--ink); }

* { box-sizing: border-box; }
html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--groen); color: var(--creme); }

/* ── displays ── */
.font-display, .display, h1.display { font-family: var(--serif); font-weight: 400; letter-spacing: -.005em; }
.font-italic, em, i { font-style: italic; }
.font-mono, code, pre { font-family: var(--mono); }

a { color: inherit; }
a:hover { color: var(--okra); }

/* ── базовые компоненты ── */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--grijs);
  font-weight: 500;
}
.btn,
button.btn,
a.btn {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background .25s, color .25s, transform .15s;
}
.btn:hover { background: var(--ink); color: var(--creme); }
.btn-primary { background: var(--ink); color: var(--creme); }
.btn-primary:hover { background: var(--okra); color: var(--creme); }
.btn-ghost { border-color: var(--line-strong); color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--creme); }

.pill {
  display: inline-block;
  padding: 7px 14px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition: background .2s, color .2s;
}
.pill:hover { background: var(--ink); color: var(--creme); }

input, textarea, select {
  font-family: var(--sans);
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line);
  padding: 12px 14px;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ink);
}

/* ── topbar (общий навбар сайта) ── */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(10px);
}
.topbar .brand {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: .005em;
  color: var(--ink);
  text-decoration: none;
}
.topbar .brand b, .topbar .brand i { font-weight: 500; }
.topbar-actions { display: flex; gap: 18px; align-items: center; font-size: 13px; letter-spacing: .04em; }
.topbar-actions a { text-decoration: none; color: var(--ink); opacity: .75; transition: opacity .2s; }
.topbar-actions a:hover { opacity: 1; color: var(--okra); }

/* ── анимации ── */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s, transform .9s; transition-timing-function: cubic-bezier(.22,.61,.36,1); }
.reveal.is-in { opacity: 1; transform: none; }

/* ── зернистость ── */
.grain { position: relative; }
.grain::after {
  content:''; pointer-events:none; position:absolute; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.045 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  opacity:.5; mix-blend-mode:multiply;
}

/* ── сетка-секция ── */
.section { padding: 96px 28px; }
.section-dark { background: var(--ink); color: var(--creme); }
.section-dark .eyebrow { color: rgba(240,234,223,.6); }

/* ── footer ── */
.footer {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
  padding: 48px 28px;
}

/* ── скрыть вертикальный скроллбар у горизонтальных ленточек ── */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ── helpers ── */
.italic { font-style: italic; }
.uppercase { text-transform: uppercase; }
.text-center { text-align: center; }
.text-grijs { color: var(--grijs); }
.text-okra  { color: var(--okra);  }
.text-oak   { color: var(--oak);   }
.text-creme { color: var(--creme); }
.bg-paper { background: var(--paper); }
.bg-creme { background: var(--creme); }
.bg-groen { background: var(--groen); color: var(--creme); }

/* ── responsive ── */
@media (max-width: 760px) {
  .section { padding: 64px 20px; }
}