/* Редакционная тема: тёплая бумага / глубокий красный и синий, волосяные линии.
   Один файл на две темы: цвета живут только в переменных, переключение — атрибут
   data-theme на <html>. Структура, размеры и типографика общие. */

html {
  --paper: #fdfcfb;
  --ink: #17130f;
  --ink-2: #4f4a46;
  --ink-3: #8a837e;
  --rule: #e6e1dd;

  --red: #a91b14;
  --blue: #1c2f9e;
  --cream: #f8f1ee;

  --band-top: #a81c14;
  --band-bottom: #1e307e;

  --sep: #d8d1cc;
  --row-hover: #f7f4f1;
  --link-hover: var(--red);

  --mark-ink: var(--cream);

  --ring: #a5251d;
  --cross: #25387f;
  --node-fill: #fff;
  --node-stroke: #e4ded9;
  --node-hover: rgba(169, 27, 20, .05);
  --tldr-bg: rgba(28, 47, 158, .045);
}

html[data-theme="dark"] {
  /* не чёрный, а тёплый уголь: на глубоком чёрном глаз быстрее устаёт,
     а тёплый оттенок держит ту же бумажную логику, что и светлая тема */
  --paper: #15130f;
  --ink: #e8e0d8;
  --ink-2: #a9a29b;
  --ink-3: #8b837d;
  --rule: #2a2724;

  --red: #b32218;
  --blue: #2a3c9c;
  --cream: #f8f1ee;

  --band-top: #b32218;
  --band-bottom: #26358a;

  /* надпись одна на обе плашки — как в светлой теме, симметрия по построению;
     тёплый старый крем вместо белого: 4.6:1 на красном, 7.4:1 на синем */
  --mark-ink: #e0d4cd;

  --sep: #322e2a;
  --row-hover: #1c1916;
  --link-hover: #d97a6c;

  --ring: #b5463b;
  --cross: #5b6fca;
  --node-fill: #15130f;
  --node-stroke: #332e2a;
  --node-hover: rgba(206, 96, 74, .12);
  --tldr-bg: rgba(42, 60, 156, .18);

  --text: var(--ink-2);
  --text-hi: var(--ink);
  --dim: var(--ink-3);
}

body { background: var(--paper); color: var(--ink-2); }
.shell { background: var(--paper); }

a { color: var(--ink); }
a:hover { color: var(--link-hover); }
::selection { background: var(--red); color: var(--cream); }

/* ---------- плашки: цвет — фон блока, бумага — слоем сверху ----------
   так дробная высота полосы не даёт светлой щели на краю страницы */
.top .line.l2, .bottom .line.l2 { display: none; }

.top {
  background-color: var(--band-top);
  background-image: linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% calc(var(--edge) + var(--stripe-h));
}
.bottom {
  background-color: var(--band-bottom);
  background-image: linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% calc(var(--edge) + var(--stripe-h));
}

.top .stripe, .bottom .stripe { background: transparent; }

/* ---------- надпись ---------- */
.mark {
  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
  font-weight: 400;
  letter-spacing: .26em;
  color: var(--mark-ink);
}
.top .mark { left: calc(max(0px, (100% - var(--content)) / 2) + var(--pad)); right: auto; }
.bottom .mark { right: calc(max(0px, (100% - var(--content)) / 2) + var(--pad)); left: auto; }
.mark, .mark:hover, .mark:focus,
.top .mark, .bottom .mark,
.top .mark:hover, .bottom .mark:hover,
.top .mark:focus, .bottom .mark:focus { color: var(--mark-ink); }

/* ---------- кнопка темы ---------- */
.top .theme {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: calc(var(--edge) + var(--stripe-h));
  right: calc(max(0px, (100% - var(--content)) / 2) + var(--pad) - 6px);
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(248, 241, 238, .5);
  cursor: pointer;
  transition: color .15s ease;
}
.top .theme:hover { color: var(--cream); }
.top .theme svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
/* светлая тема — луна (включить тёмную), тёмная — солнце */
.top .theme .ic-sun { display: none; }
html[data-theme="dark"] .top .theme .ic-moon { display: none; }
html[data-theme="dark"] .top .theme .ic-sun { display: block; }

/* ---------- меню и служебные ссылки ---------- */
.menu a {
  color: var(--ink-2);
  font-weight: 500;
  letter-spacing: .17em;
  text-underline-offset: 7px;
  text-decoration-thickness: 1px;
  text-decoration-color: transparent;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.menu a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
.menu a.on { color: var(--ink); text-decoration: underline; text-decoration-color: var(--red); }
.sep { background: var(--sep); height: 10px; }

.subnav a {
  color: var(--ink-3);
  font-weight: 500;
  letter-spacing: .16em;
  text-underline-offset: 7px;
  text-decoration-color: transparent;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.subnav a:hover, .subnav a.on {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--blue);
}

/* ---------- свечений нет: на бумаге это грязь, на тёмном — по вкусу владельца ---------- */
.shell::before, .shell::after { background: none; }

/* ---------- типографика ---------- */
h1, h2 {
  font-family: Georgia, "Times New Roman", "DejaVu Serif", serif;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink);
}
h1 { font-size: clamp(29px, 2.55vw, 38px); line-height: 1.18; margin-bottom: 14px; text-wrap: balance; }
h2 { font-size: 23px; line-height: 1.25; margin: 40px 0 12px; }
h3 { font: 600 15px/1.5 var(--ui); letter-spacing: .005em; color: var(--ink); }

/* текст идёт во всю колонку: ширина задаётся только .content */
p, p.intro, .pubnote, .prose blockquote { max-width: none; }
p.intro { color: var(--ink-2); font-size: 16.5px; line-height: 1.7; }
li::marker { color: var(--red); }
hr { border-top-color: var(--rule); }

/* ---------- таблицы и списки ---------- */
.rows tr { border-bottom-color: var(--rule); }
.rows tr:hover td { background: var(--row-hover); }
.rows a { color: var(--ink); }
.rows a:hover { color: var(--link-hover); }
.rows td.d { color: var(--ink-2); }
.rows.m8 td.h {
  color: var(--ink-3);
  font-size: 10.5px;
  letter-spacing: .16em;
  border-bottom: 1px solid var(--ink-3);
  padding-bottom: 9px;
}
.rows.m8 td { padding-top: 14px; padding-bottom: 14px; }
.rows.m8 td:first-child b {
  font: 600 11.5px/1.5 var(--ui);
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ink);
}

.note, .file { border-bottom-color: var(--rule); }
.note b, .file b { color: var(--ink); }
.note:hover b, .file:hover b { color: var(--link-hover); }
.file em { color: var(--ink-3); letter-spacing: .16em; }

.prose blockquote { border-left-color: var(--rule); color: var(--ink-2); }
.prose strong { color: var(--ink); }
.prose kbd { border-color: var(--rule); color: var(--ink); }

.tldr {
  border-left: 1px solid var(--blue);
  background: linear-gradient(90deg, var(--tldr-bg), transparent 70%);
}
.tldr b { color: var(--ink-3); }
.tldr li { color: var(--ink-2); }

ol.steps li { border-bottom-color: var(--rule); }
ol.steps li::before { color: var(--ink-3); }

/* ---------- схема ---------- */
.diagram { max-width: 800px; }
.diagram .ring line { stroke: var(--ring); }
.diagram .cross line { stroke: var(--cross); }
.diagram .hub { fill: var(--node-fill); stroke: var(--node-stroke); }
.diagram .node circle { fill: var(--node-fill); stroke: var(--node-stroke); }
.diagram text {
  fill: var(--ink);
  font-family: var(--ui);
  font-weight: 500;
}
.diagram .node:hover circle { stroke: var(--red); fill: var(--node-hover); }
.diagram .node:hover text { fill: var(--red); }

.legend { color: var(--ink-3); letter-spacing: .14em; }
.legend .r i { background: var(--ring); }
.legend .b i { background: var(--cross); }

/* ---------- колофон ---------- */
.pubnote {
  border-top: 1px solid var(--rule);
  color: var(--ink-3);
  font-size: 11px;
  letter-spacing: .04em;
  line-height: 1.85;
}
.pubnote span { color: var(--ink-2); letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
.pubnote time { color: var(--ink-2); }

@media (max-width: 820px) {
  .top, .bottom { background-image: none; }
  .mark { color: var(--mark-ink); }
  .top .theme { top: 0; bottom: 0; right: calc(var(--pad) - 6px); }
}