:root {
  --bg-0: #f3efe3;
  --bg-1: #ece5d3;
  --bg-2: #e3dcc6;
  --surface: rgba(255, 255, 255, 0.55);
  --surface-strong: rgba(255, 255, 255, 0.78);
  --line: rgba(31, 36, 20, 0.12);
  --line-strong: rgba(31, 36, 20, 0.22);
  --text-0: #1e2317;
  --text-1: #565b46;
  --text-2: #82866f;
  --accent: #56682f;
  --accent-soft: #7c9142;
  --accent-dim: rgba(86, 104, 47, 0.13);
  --hazard: #a85a1c;
  --graphite: #e7e0cd;
  --radius-s: 4px;
  --radius-m: 6px;
  --radius-l: 10px;
  --notch: 16px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --font-display: "Bahnschrift Condensed", "Arial Narrow", "Segoe UI", Arial, sans-serif;
  --font-body: "Segoe UI", Arial, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, monospace;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  overflow-x: hidden;
  position: relative;
}

::selection {
  background: var(--accent);
  color: #f7f5ec;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
  background: none;
  border: none;
  color: inherit;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: 100%;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bg-0);
}

::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 10px;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.8;
  background-image:
    radial-gradient(ellipse 260px 170px at 8% 15%, rgba(86, 104, 47, 0.06), transparent 62%),
    radial-gradient(ellipse 300px 200px at 85% 8%, rgba(150, 138, 105, 0.14), transparent 62%),
    radial-gradient(ellipse 220px 160px at 62% 68%, rgba(86, 104, 47, 0.05), transparent 60%),
    radial-gradient(ellipse 260px 180px at 22% 88%, rgba(150, 138, 105, 0.12), transparent 62%),
    radial-gradient(ellipse 240px 160px at 45% 35%, rgba(86, 104, 47, 0.04), transparent 58%);
}

.grid-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(31, 36, 20, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(31, 36, 20, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, black 30%, transparent 90%);
  animation: gridDrift 40s linear infinite;
}

@keyframes gridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 64px 128px; }
}

section, header, footer {
  position: relative;
  z-index: 2;
}


/* Yandex Metrika fallback for browsers with JavaScript disabled. */
.yandex-metrika-noscript {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.yandex-metrika-noscript img {
  display: block;
  width: 1px;
  height: 1px;
}