/* ============================================================
   s2-koncepty · shared foundation
   Токены-слоты переопределяет каждая страница под свой характер.
   ============================================================ */

:root {
  /* слоты цветов — страница переопределяет */
  --bg: #f4f1ea;
  --ink: #1b1813;
  --muted: #6f6a60;
  --accent: #0a4fd6;
  --line: color-mix(in srgb, var(--ink) 18%, transparent);

  /* Utopia 320->1240, 16->18 */
  --step--1: clamp(0.875rem, 0.8478rem + 0.1359vw, 0.9531rem);
  --step-0: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --step-1: clamp(1.2rem, 1.0958rem + 0.5211vw, 1.4996rem);
  --step-2: clamp(1.44rem, 1.2456rem + 0.9721vw, 1.9989rem);
  --step-3: clamp(1.7281rem, 1.4024rem + 1.6285vw, 2.6645rem);
  --step-4: clamp(2.0737rem, 1.5596rem + 2.5707vw, 3.5521rem);
  --step-5: clamp(2.4884rem, 1.7066rem + 3.9076vw, 4.7349rem);
  --step-6: clamp(2.986rem, 1.8296rem + 5.783vw, 6.3115rem);
  --step-7: clamp(3.5832rem, 1.9031rem + 8.4vw, 8.4131rem);

  --space-xs: clamp(0.75rem, 0.7065rem + 0.2174vw, 0.875rem);
  --space-s: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.435rem + 0.3261vw, 1.6875rem);
  --space-l: clamp(2rem, 1.913rem + 0.4348vw, 2.25rem);
  --space-xl: clamp(3rem, 2.8696rem + 0.6522vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8261rem + 0.8696vw, 4.5rem);
  --space-section: clamp(4rem, 1.8696rem + 10.652vw, 10.125rem);
  --pad: clamp(1.25rem, 0.5rem + 4vw, 4rem);

  --font-display: 'Piazzolla', Georgia, serif;
  --font-body: 'Golos Text', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(.19, 1, .22, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: var(--step-0); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-optical-sizing: auto;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--accent); color: var(--bg); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.micro {
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .18em; color: var(--muted);
}
.wrap { padding-inline: var(--pad); max-width: 84rem; margin-inline: auto; }

/* фактура-зерно */
.grain { position: relative; }
.grain::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: .05; mix-blend-mode: overlay;
}

/* появления */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* панель выбора на страницах-концептах */
.choice-bar {
  position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  z-index: 80; display: flex; align-items: stretch; gap: 1px;
  border: 1px solid var(--line); background: var(--bg);
  box-shadow: 0 12px 40px -12px rgb(0 0 0 / .35);
}
.choice-bar a {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .95rem 1.1rem; text-decoration: none;
  font-family: var(--font-mono); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.choice-bar a:hover { background: var(--ink); color: var(--bg); }
.choice-bar .pick { background: var(--accent); color: #fff; }
.choice-bar .pick:hover { background: var(--ink); color: var(--bg); }
@media (max-width: 480px) {
  .choice-bar { width: calc(100% - 20px); }
  .choice-bar a { flex: 1; justify-content: center; padding: .8rem .5rem; font-size: 10px; }
}