body {
  overflow-x: hidden;
  background:
    radial-gradient(circle at 20% 10%, rgba(70, 59, 51, 0.12), transparent 38vw),
    radial-gradient(circle at 80% 35%, rgba(68, 55, 48, 0.10), transparent 42vw),
    linear-gradient(180deg, #020202 0%, #060504 45%, #010101 100%);
  color: var(--color-ash);
  font-family: var(--font-sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body.menu-open {
  overflow: hidden;
}

.site-texture {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 12%, rgba(95, 76, 62, 0.20), transparent 34vw),
    radial-gradient(circle at 82% 40%, rgba(60, 48, 42, 0.18), transparent 38vw),
    radial-gradient(circle at 45% 82%, rgba(75, 61, 52, 0.13), transparent 42vw);
}

.site-texture::before,
.site-texture::after {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
}

.site-texture::before {
  opacity: 0.32;
  background:
    repeating-radial-gradient(circle at 19% 23%, rgba(255,255,255,0.04) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(112deg, rgba(255,255,255,0.02) 0 1px, transparent 1px 7px);
  mix-blend-mode: screen;
  animation: materialGrain 18s steps(8, end) infinite;
}

.site-texture::after {
  opacity: 0.42;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(96, 73, 58, 0.22), transparent 28%),
    radial-gradient(ellipse at 72% 46%, rgba(45, 34, 29, 0.34), transparent 32%),
    radial-gradient(ellipse at 48% 78%, rgba(102, 82, 65, 0.16), transparent 30%);
  filter: blur(46px);
  mix-blend-mode: screen;
  animation: slowMatter 32s var(--ease-organic) infinite alternate;
}

::selection {
  background: rgba(200, 193, 184, 0.22);
  color: #fff;
}