/* основа: антидизайн. системные шрифты, голый чёрный на белом, подчёркнутые ссылки. */

:root {
  --bg: #fff;
  --fg: #000;
  --mut: #595959;
  --pad: clamp(16px, 4.5vw, 48px);
  /* ширина центральной колонки контента. меньше число = плотнее к центру, 9999px = на всю ширину */
  --wrap: 1100px;
  --gutter: max(var(--pad), calc((100% - var(--wrap)) / 2));
  --sans: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", sans-serif;
  --serif: "Times New Roman", Times, "Liberation Serif", serif;
  --mono: "Courier New", Courier, "Liberation Mono", monospace;
}

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

html {
  background: var(--bg);
  color: var(--fg);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 3.5rem;
}

body {
  margin: 0;
  font: 400 17px/1.4 var(--sans);
  text-transform: lowercase;
  overflow-x: clip;
  min-height: 100vh;
}

img, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; font-weight: 400; }
ul, ol { list-style: none; }

a { color: inherit; text-decoration: underline; text-underline-offset: 0.18em; }
a:hover, a:focus-visible { background: var(--fg); color: var(--bg); text-decoration: none; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
::selection { background: var(--fg); color: var(--bg); }

button { font: inherit; color: inherit; text-transform: inherit; }

.mono { font: 400 14px/1.35 var(--mono); }
.label { margin-bottom: 0.8rem; color: var(--mut); }
.dark .label { color: #b3b3b3; }

.skip { position: absolute; left: 0; top: -4rem; z-index: 100; padding: 0.6rem 1rem; background: var(--fg); color: var(--bg); }
.skip:focus { top: 0; }

.dark { --bg: #000; --fg: #fff; --mut: #b3b3b3; background: var(--bg); color: var(--fg); }

/* появление при скролле: только если есть js и не просили без анимации */
@media (prefers-reduced-motion: no-preference) {
  .js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
  .js .rv.in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}