/* Castalia — база. Сброс, типографика, общие примитивы.
   Подключается ПОСЛЕ tokens.css и ДО стилей конкретной страницы. */

/* Математический шрифт возим своим: STIX Two Math нет в Google Fonts, а без
   шрифта с таблицей MATH браузер берёт обычную антикву — и растяжимые скобки,
   суммы и дроби плывут. Три места в коде обещали читателю этот шрифт, и ни
   одно его не доставляло. Лицензия OFL лежит рядом, в site/fonts/OFL.txt.
   swap, а не block: формула, набранная не тем шрифтом, всё же лучше пустоты. */
@font-face {
  font-family: "STIX Two Math";
  src: url("../fonts/STIXTwoMath.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--size-body);
  /* Мера строки объявляется здесь, а не в :root: `ch` считается в шрифте и
     кегле того элемента, где стоит объявление, а колонка набирается именно
     этим. Благодаря регистрации в tokens.css значение вычисляется один раз
     и наследуется готовой длиной — в боковой сноске с её мелким кеглем оно
     уже не пересчитается и геометрия не отъедет. */
  --measure: min(42rem, 66ch);
  line-height: var(--leading-body);
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

::selection { background: var(--gold); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Подсказка в поле — такой же текст, и порог у неё те же 4.5:1. Без общего
   примитива каждая страница красила её сама, а забывшая получала браузерный
   серый 3.71:1. */
::placeholder { color: var(--mute); opacity: 1; }

/* ── тёмная зона: обложки, заставки, подвал ───────────────────────────── */
.on-ink {
  background: var(--ink);
  color: var(--paper);
  --text: var(--paper);
  --rule: var(--rule-dark);
  --rule-strong: var(--rule-strong-ink);
  --mute: var(--mute-ink);  /* тёмный вариант на чернилах нечитаем */
  --gold-text: var(--gold); /* по тёмному фирменное золото даёт 8.2:1 и годится для текста */
  --focus: var(--focus-ink);
}

/* ── служебные элементы, одинаковые на всех страницах ─────────────────────
   Скип-ссылка и марка издания были написаны по четыре раза, под разными
   именами, в двух противоположных цветовых схемах и с разным начертанием.
   Логотип — то единственное, что обязано совпадать попиксельно, а он менял
   кегль, жир и трекинг при каждом переходе. Место таким вещам здесь. */

.skip-link {
  position: absolute;
  left: var(--s4);
  top: -100%;
  z-index: var(--z-modal);
  padding: var(--s2) var(--s4);
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-meta);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease);
}
/* Именно :focus-visible, а не :focus: клик мышью по области, где ссылка
   лежит скрытой, не должен её выдёргивать. */
.skip-link:focus-visible { top: var(--s4); }

.wordmark {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: .04em;
  line-height: 1;
  text-decoration: none;
  color: inherit;
  font-optical-sizing: none;
  font-variation-settings: "opsz" var(--opsz-display);
}
.wordmark:hover { color: inherit; }

/* ── сетка чтения ─────────────────────────────────────────────────────── */
.measure { max-width: var(--measure); margin-inline: auto; }
.wide    { max-width: 68rem;          margin-inline: auto; }
.pad     { padding-inline: var(--s5); }
.missing-page { padding-block: var(--s7); }

/* ── заголовки ────────────────────────────────────────────────────────────
   Дисплейная антиква не тяжелее 500 и без разрядки: акцент делает кегль. */
h1, h2, h3, h4, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-tight);
  letter-spacing: -.015em;
  text-wrap: balance;
  font-optical-sizing: none;
  font-variation-settings: "opsz" var(--opsz-display);
}

/* Гигантский текст — обложки и геройские секции: там кегль сам держит толщину линий,
   и высокая ось возвращает дидоне её характер. */
.display--hero { font-variation-settings: "opsz" var(--opsz-hero); }
h1 { font-size: clamp(2.5rem, 6vw, 4.5rem); }
h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); margin-top: var(--s8); margin-bottom: var(--s4); }
h3 { font-size: clamp(1.25rem, 2.2vw, 1.5rem); margin-top: var(--s6); margin-bottom: var(--s3); }
h4 { font-size: 1.125rem; margin-top: var(--s5); margin-bottom: var(--s2); }

p { margin-bottom: 1.4em; }          /* отбивка, абзацного отступа нет */
p + p { margin-top: -.4em; }

a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: .18em;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease);
}
a:hover { color: var(--vermilion); }

ul, ol { padding-left: 1.4em; margin-bottom: 1.4em; }
li { margin-bottom: .4em; }

blockquote {
  border-left: 2px solid var(--gold);
  padding-left: var(--s5);
  font-style: italic;
  color: var(--mute);
  margin: var(--s6) 0;
}

code, kbd, samp { font-family: var(--font-mono); font-size: .875em; }   /* ступень, а не число по месту */
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  line-height: 1.6;
  background: var(--ink);
  color: var(--paper);
  padding: var(--s5);
  overflow-x: auto;              /* широкий код скроллится внутри себя */
  margin: var(--s6) 0;
}

table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
th, td { text-align: left; padding: var(--s2) var(--s4); border-bottom: 1px solid var(--rule); }
th { font-family: var(--font-meta); text-transform: uppercase; font-size: var(--fs-meta); letter-spacing: .12em; }

/* Числа в выкладках — табличные, иначе колонки пляшут */
.num, td, .stat { font-variant-numeric: tabular-nums; }

/* ── служебная типографика ────────────────────────────────────────────── */
.meta {
  font-family: var(--font-meta);
  text-transform: uppercase;
  letter-spacing: var(--track-meta);
  font-size: var(--fs-meta);
  color: var(--mute);
}
.rubric { font-family: var(--font-meta); text-transform: uppercase; letter-spacing: .2em;
          font-size: var(--fs-small); color: var(--gold-text); }
.micro  { font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .22em;
          text-transform: uppercase; color: var(--mute); }

/* ── аппарат статьи ───────────────────────────────────────────────────── */
.claim {                                    /* теорема, лемма, определение */
  border-top: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  padding: var(--s5) 0;
  margin: var(--s7) 0;
}
.claim__label { font-family: var(--font-meta); text-transform: uppercase;
                letter-spacing: .18em; font-size: var(--fs-small); color: var(--gold-text);
                display: block; margin-bottom: var(--s2); }
.claim--proof { border-color: var(--rule); }
.claim--proof .claim__label { color: var(--mute); }

.sidenote {                                  /* боковая сноска, не подвальная */
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--mute);
}
@media (min-width: 78rem) {
  .sidenote {
    position: absolute;
    left: calc(50% + var(--measure) / 2 + var(--s5));
    width: 14rem;
    margin-top: -.4em;
  }
}

.figure { margin: var(--s7) 0; }
.figure figcaption { font-family: var(--font-meta); font-size: var(--fs-meta);
                     color: var(--mute); margin-top: var(--s3);
                     padding-top: var(--s2); border-top: 1px solid var(--rule); }

/* ── линейки и разделители ────────────────────────────────────────────── */
.rule { border: 0; border-top: 1px solid var(--rule); margin: var(--s7) 0; }
.rule--gold { border-color: var(--gold); }

.divider { display: block; width: 100%; height: 5.5rem; margin: var(--s8) auto; overflow: visible; }
.divider path { fill: none; stroke: var(--gold); stroke-width: 1.2;
                stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.divider.is-drawn path { transition: stroke-dashoffset 2.2s var(--ease); stroke-dashoffset: 0; }

/* ── интенсивность ────────────────────────────────────────────────────────
   Шкала из STYLE.md. Уровень 5 — обложка, 1 — формулы. Гранж, зерно и
   halftone НИЖЕ третьего уровня запрещены; классы ниже это и оформляют. */
.lvl-5 { --allow-texture: 1; }
.lvl-4 { --allow-texture: 1; }
.lvl-3 { --allow-texture: 0; }
.lvl-2 { --allow-texture: 0; }
.lvl-1 { --allow-texture: 0; }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: calc(.13 * var(--allow-texture, 0));
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.halftone::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: calc(.55 * var(--allow-texture, 0));
  background-image: radial-gradient(#0000 34%, #000 36%);
  background-size: 4px 4px;
  mix-blend-mode: soft-light;
}

/* ── утилиты ──────────────────────────────────────────────────────────── */
.stack > * + * { margin-top: var(--s4); }
.row { display: flex; gap: var(--s4); align-items: center; }
.between { display: flex; justify-content: space-between; align-items: center; gap: var(--s4); }
.scroll-x { overflow-x: auto; }             /* широкое скроллится внутри себя */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

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

/* Shared reader controls; opt-in to avoid changing the editor and article. */
.reader-shell button { min-height: var(--control-min); }
.reader-shell [hidden] { display: none !important; }
.reader-shell :is(button, input, a):focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.reader-footer-nav { display: flex; flex-wrap: wrap; gap: var(--s5); margin-top: var(--s5); }
.reader-footer-nav a { display: inline-flex; align-items: center; min-height: var(--control-min); font-size: var(--control-font); }