@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:block;src:url(fonts/manrope-latin.woff2) format('woff2');unicode-range:U+0020-007E, U+00A0-00FF, U+0100-017F, U+2010-2011, U+2018-201E, U+2022, U+2026, U+2030, U+20AC, U+2190-2193, U+2212, U+2713}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:block;src:url(fonts/manrope-cyrillic.woff2) format('woff2');unicode-range:U+0400-045F, U+0490-0491, U+2116}
/* The language of every section page. Colours come from the world of the page: --paper, --ink, --accent. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body.page {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.55 'Manrope', 'Segoe UI', Arial, sans-serif;
  font-synthesis: none;
}
/* resets carry no weight of their own (:where), so any class of a page overrides them */
:where(.page) :where(h1, h2, h3, p, ul, ol, dl, dd, figure) { margin: 0; padding: 0; }
:where(.page) :where(h1, h2, h3) { font-weight: 700; line-height: 1.15; }
:where(.page) :where(ul, ol)[role="list"] { list-style: none; }
:where(.page) img { max-width: 100%; height: auto; display: block; }
:where(.page) a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.page :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }
.num { font-variant-numeric: tabular-nums; }

/* The top line stands where the captions of the main page stand: the name does not move when a page opens. */
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: max(12px, 2.5vh) max(16px, 3vw) 0;
  font-size: max(12px, calc(0.012 * var(--W)));
  line-height: 1;
  font-weight: 600;
}
.top a { text-decoration: none; }
.top a:hover, .top a:focus-visible { text-decoration: underline; }

.page main { display: block; padding: clamp(28px, 6vh, 64px) max(16px, 3vw) clamp(56px, 10vh, 120px); }

/* The sign of the page: the drawing of its world. */
.mark { display: block; width: 56px; height: 56px; overflow: visible; }

/* The grid at the bottom of a page keeps the weight of the words of the main page. */
.stage .word { font-weight: 600; }
.stage .word[aria-current="page"] { cursor: default; }

/* A small window on its side has no room for a grid: the block is a plain list of the eight sections.
   (A phone held upright gets the grid turned by a quarter, as the main page does.) */
@media (max-height: 399px), (max-width: 699px) and (orientation: landscape) {
  .stage { height: auto; padding: 40px 20px 56px; border-top: 2px solid var(--ink); }
  .stage #bg, .stage #grid { display: none; }
  /* two columns of four, read down: the same places the words have on the main page of a phone */
  .stage #words { position: static; width: auto; height: auto; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 18px 24px; }
  .stage .word, .stage .word[data-row], .stage .word[data-col] { position: static; transform: none; font-size: 20px; color: var(--ink); }
  .stage .word[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
}