/* Мангария: токены. «Чернильная бумага × полутона × скоростные линии». Две темы: бумага (светлая) и ночь (OLED). */
:root {
  --paper: #F4EFE6;
  --paper-2: #ECE5D8;
  --paper-3: #DFD6C4;
  --ink: #111111;
  --ink-2: #3A362F;
  --muted: #655F54;
  --red: #D7263D;
  --red-ink: #B01E32;          /* красный для текста на бумаге (AA) */
  --on-red: #FFFFFF;
  --edge: #111111;             /* цвет туши для обводок */
  --shade: #111111;            /* жёсткая тень */
  --dot: rgba(17, 17, 17, .17);
  --dot-strong: rgba(17, 17, 17, .42);
  --focus: #D7263D;
  --ok: #1D7A3C;
  --warn: #8A5A00;

  --f-display: "Rubik Mono One", "Arial Black", Impact, sans-serif;
  --f-head: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --f-body: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-hand: "Marck Script", "Segoe Script", cursive;

  --bw: 3px;
  --cut: 14px;
  --r-pad: clamp(16px, 4vw, 40px);
  --wrap: 1320px;
  --header-h: 64px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  color-scheme: light;
}
:root[data-theme="dark"] {
  --paper: #09090A;
  --paper-2: #121213;
  --paper-3: #1D1D1F;
  --ink: #EFE9DC;
  --ink-2: #CFC8B8;
  --muted: #A09A8B;
  --red: #FF4660;
  --red-ink: #FF6E82;
  --on-red: #0A0A0B;
  --edge: #EFE9DC;
  --shade: #D7263D;
  --dot: rgba(239, 233, 220, .13);
  --dot-strong: rgba(239, 233, 220, .34);
  --focus: #FF6E82;
  --ok: #52C77A;
  --warn: #E0B04D;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word;
  -webkit-tap-highlight-color: transparent;
}
/* бумажное зерно: полутоновая сетка очень низкой плотности на всём фоне */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, var(--dot) 0.9px, transparent 1.3px) 0 0 / 7px 7px; opacity: .5;
}
img, svg { max-width: 100%; }
img { display: block; }
a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--red-ink); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-head); font-weight: 700; line-height: 1.08; letter-spacing: .01em; text-transform: uppercase; }
p { margin: 0 0 1em; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
::selection { background: var(--red); color: var(--on-red); }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--paper); font-weight: 700; transition: top .15s; }
.skip:focus { top: 12px; }
.wrap { width: min(100% - 2 * var(--r-pad), var(--wrap)); margin-inline: auto; }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}