/* Общее для всех страниц: цвета, шрифты, круг-меню, зерно. */
:root {
  --bg: #050505;
  --ink: #f2f0ec;
  --muted: #8b8881;
  --red: #e5281b;
  --sans: 'Geologica', system-ui, sans-serif;
  --wide: 'Unbounded', 'Geologica', sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
body { font: 400 16px/1.5 var(--sans); }
a { color: inherit; text-decoration: none; }
img, video { display: block; width: 100%; }

/* Пиксельный курсор: грубая стрелка, на ссылках и кнопках — рука (рисуются tools/cursors.py) */
html, body { cursor: url(/cursor.svg) 3 3, auto; }
a, button, .card, video { cursor: url(/cursor-link.svg) 10 3, pointer; }

/* Картинки и плитки не тащатся мышью — проводка зажатой мышью просто выделяет, как текст. Выделение белое. */
img, a { -webkit-user-drag: none; user-drag: none; }
::selection { background: var(--ink); color: var(--bg); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

/* Круг — единственная навигация */
.circle { position: fixed; top: 20px; right: 20px; z-index: 30; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--ink); background: none; display: grid; place-items: center; }
.circle i, .circle i::after { display: block; width: 14px; height: 1px; background: var(--ink); position: relative; transition: transform .3s; }
.circle i::after { content: ''; position: absolute; top: 5px; }
.circle i { top: -2.5px; }
.menu-open .circle i { transform: translateY(2.5px) rotate(45deg); }
.menu-open .circle i::after { transform: translateY(-5px) rotate(-90deg); }

.menu { position: fixed; inset: 0; z-index: 20; background: var(--bg); display: flex; flex-direction: column; justify-content: center;
  padding: 0 max(24px, 8vw); opacity: 0; pointer-events: none; transition: opacity .3s; }
.menu-open .menu { opacity: 1; pointer-events: auto; }
.menu a { font: 400 clamp(36px, 6vw, 72px)/1.15 var(--sans); letter-spacing: -.03em; width: fit-content; }
.menu a:hover { color: var(--red); }
.menu .small { display: flex; gap: 28px; margin-top: 48px; flex-wrap: wrap; }
.menu .small a { font-size: 16px; letter-spacing: 0; color: var(--muted); }
.menu .small a:hover { color: var(--ink); }

/* Плёночное зерно поверх страницы: на чёрном не видно, живёт на кадрах.
   Сдвиги — целыми пикселями и без сглаживания, иначе мелкий шум размывается. */
.grain { position: fixed; inset: -64px; z-index: 25; pointer-events: none; mix-blend-mode: soft-light; opacity: .3;
  image-rendering: pixelated; animation: grain .64s steps(1) infinite; }
@keyframes grain {
  0% { transform: translate(-37px, -23px); }
  25% { transform: translate(21px, -41px); }
  50% { transform: translate(-19px, 39px); }
  75% { transform: translate(43px, 17px); }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .grain { animation: none; } }