/* ============================================================
   ДИЗАЙН-СИСТЕМА — токены, сброс, типографика
   Палитра: тёплый off-black + off-white, акцент янтарь (НЕ purple/blue)
   Шрифты: Playfair Display (display) + Golos Text (body) + JetBrains Mono (метки)
   ============================================================ */

:root {
  /* --- Палитра (тёплая, off-neutrals, без чистых #000/#fff) --- */
  --ink:        #16130f;   /* почти-чёрный, тёплый */
  --ink-soft:   #2a251d;
  --paper:      #f4f0e8;   /* тёплый off-white (Cloud-Dancer-ish) */
  --paper-pure: #faf7f0;
  --muted:      #6b6357;   /* приглушённый текст */
  --muted-soft: #8c8475;
  --line:       #d8d0c2;   /* границы на светлом */
  --accent:     #b8521e;   /* янтарь/охра — тёплый, дорогой, НЕ кликбейтный */
  --accent-deep:#8f3d13;
  --accent-tint:#f0e3d6;

  /* тёмная секция */
  --dark-bg:    #16130f;
  --dark-bg-2:  #211c15;
  --dark-paper: #f4f0e8;
  --dark-muted: #a89e8c;
  --dark-line:  #36302600;

  /* --- Шрифты --- */
  --font-display: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-body:    "Golos Text", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", "SF Mono", ui-monospace, monospace;

  /* --- Fluid-типографика (clamp, rem) --- */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.94rem + 0.30vw, 1.18rem);
  --step-1:  clamp(1.20rem, 1.08rem + 0.55vw, 1.55rem);
  --step-2:  clamp(1.50rem, 1.28rem + 1.05vw, 2.20rem);
  --step-3:  clamp(1.95rem, 1.55rem + 1.95vw, 3.30rem);
  --step-4:  clamp(2.55rem, 1.85rem + 3.40vw, 5.20rem);
  --step-5:  clamp(3.10rem, 1.95rem + 5.60vw, 7.40rem);

  /* --- Отступы (8px-сетка) --- */
  --sp-1: 0.5rem;  --sp-2: 1rem;    --sp-3: 1.5rem;  --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4rem;    --sp-7: 6rem;    --sp-8: 8rem;
  --section-y: clamp(4rem, 2.5rem + 7vw, 10rem);

  --maxw: 1240px;
  --maxw-text: 64ch;
  --radius: 2px;          /* осознанно маленький — НЕ дефолтные 16px */
  --radius-lg: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.7s;
}

/* --- Метрический fallback против CLS при swap --- */
@font-face {
  font-family: "Golos-fallback";
  src: local("Arial");
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 24%;
}
@font-face {
  font-family: "Playfair-fallback";
  src: local("Georgia");
  size-adjust: 105%;
}

/* ============================================================ RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body), "Golos-fallback", sans-serif;
  font-size: var(--step-0);
  line-height: 1.62;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display), "Playfair-fallback", serif;
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 600; }

p { max-width: var(--maxw-text); }
a { color: inherit; text-decoration: none; }
img, video, svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

::selection { background: var(--accent); color: var(--paper-pure); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius); }

/* зерно/grain — тонкий слой «человеческой руки» поверх всего */
body::after {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================ УТИЛИТЫ */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.2rem, 5vw, 3.5rem); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex; align-items: center; gap: 0.6em;
}
.eyebrow::before { content: ""; width: 1.8em; height: 1px; background: var(--accent); display: inline-block; }
.mono { font-family: var(--font-mono); font-size: var(--step--1); letter-spacing: 0.02em; }
.serif-em { font-family: var(--font-display); font-style: italic; font-weight: 500; }
.lang-hide { display: none !important; }