/* ============================================================================
   ЗОНА ПОЛУНОЧИ — сброс, типографика, фокус, утилиты
   ============================================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Якорные переходы не должны прятать заголовок под шапкой */
  scroll-padding-top: calc(var(--h-header) + var(--s-4));
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  color: var(--c-ink);
  background: var(--c-abyssal);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 500;
  line-height: 1.04;
  margin: 0;
  letter-spacing: 0.005em;
  text-wrap: balance;
}

h1 { font-size: var(--t-h1); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); font-weight: 500; }

p { margin: 0 0 var(--s-4); max-width: var(--w-text); }
p:last-child { margin-bottom: 0; }

a {
  color: inherit;
  text-decoration-color: var(--c-line-2);
  text-underline-offset: 0.22em;
  transition: color var(--d-fast) var(--e-out), text-decoration-color var(--d-fast) var(--e-out);
}
a:hover { color: var(--c-glow); text-decoration-color: currentColor; }

ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-2); }
li::marker { color: var(--c-ink-dim); }

img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin: var(--s-7) 0;
}

::selection { background: var(--c-glow); color: var(--c-hadal); }

/* --- Фокус. Виден всегда, в том числе на чёрном фоне --------------------- */
:focus-visible {
  outline: 2px solid var(--c-glow);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}
.is-day :focus-visible { outline-color: var(--c-day-link); }

/* --- Приборные надписи: моноширинный, разрядка, верхний регистр ---------- */
.mono {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

.label {
  font-family: var(--f-mono);
  font-size: var(--t-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-ink-dim);
}

.lead {
  font-size: var(--t-lead);
  color: var(--c-ink-dim);
  max-width: 56ch;
}

/* --- Утилиты ------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: var(--s-2); left: var(--s-2);
  z-index: 200;
  padding: var(--s-2) var(--s-4);
  background: var(--c-glow);
  color: var(--c-hadal);
  font-weight: 600;
  border-radius: var(--r-md);
  transform: translateY(-200%);
  transition: transform var(--d-fast) var(--e-out);
}
.skip-link:focus { transform: translateY(0); color: var(--c-hadal); }

.stack > * + * { margin-top: var(--s-4); }
.text-alert { color: var(--c-alert-text); }
.is-day { --c-alert-text: #B83D0B; }
.text-glow { color: var(--c-glow); }
.nowrap { white-space: nowrap; }

/* --- Зерно поверх всего. Статичное: анимировать шум дорого и незачем ----- */
.grain {
  position: fixed;
  inset: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0.5;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.42'/%3E%3C/svg%3E");
}

/* ============================================================================
   Уважение к prefers-reduced-motion.
   Движение выключается полностью: остаются мгновенные смены состояний.
   Всё, что появлялось по скроллу, показывается сразу — иначе страница
   осталась бы пустой. Это требование, а не любезность.
   ============================================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal, .reveal-child > * { opacity: 1 !important; transform: none !important; }
  .grain { opacity: 0.3; }
}

/* --- Отступы сверху там, где ритм отличается от типового ---------------- */
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }

/* Заголовок размером h3 там, где по смыслу нужен другой уровень */
.h3 { font-size: var(--t-h3); }

/* Панель-ссылка: карточка целиком кликабельна */
a.panel {
  display: block;
  text-decoration: none;
  transition: border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out);
}
a.panel:hover { border-color: var(--c-line-2); transform: translateY(-2px); color: inherit; }
a.panel h2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.w-full { width: 100%; }

/* Блок для выключенного JavaScript: без скрипта тексты не подставятся,
   поэтому здесь лежит минимум — что, где, когда и почём. */
.noscript {
  position: relative;
  z-index: 100;
  margin: calc(var(--h-header) + var(--s-4)) auto var(--s-4);
  max-width: var(--w-page);
  padding: var(--s-5);
  border: 1px solid var(--c-alert);
  border-radius: var(--r-lg);
  background: rgba(2, 10, 18, 0.9);
  color: var(--c-ink);
}
.noscript h2 { margin-bottom: var(--s-3); font-size: var(--t-h3); }