/* Оформление лонгрида «Доказательство романтической любви…»
   Цифры — из styles.md (мастерская). Общий файл для всех четырёх страниц. */

/* ---------- 1. Цвета тем ---------- */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --page: #1b2039;   /* чуть темнее прежнего #1e233f (Irka, 2026-10-29) */
  --text: #ffffff;
  --link: #6aa5ff;   /* светлее прежнего #4385f7 */
  --h1: #ffffff;
  --author: #ffffff;
  --h2: #ffffff;
  --h3: #ffffff;
  --h2-track: .02em;  /* H2 в тёмной теме разреженнее */
  --quote: #dddee2;
  --tr: #a5a7b3;
  --select: rgba(67, 133, 247, .55);
  /* кнопки при боковом сайдбаре */
  --btn: #40445d;
  --btn-fg: #b0b3c4;
  --btn-on: #191d35;
  --btn-on-line: #40445d;
  --btn-on-fg: #ffffff;
  --btn-shadow: rgba(0, 0, 0, .75);
  /* содержание */
  --side: #191d35;
  --side-shadow: rgba(0, 0, 0, .7);
  --toc-head: #ffffff;
  --toc-cur: #ffffff;
  --toc-item: #a5a7b3;   /* светлее (Irka, 2026-11-02; было #8f919e) */
  --toc-bar: #4a4f65;
  --menu: #13162c;
  --menu-head: #ffffff;
  --menu-cur: #ffffff;
  --menu-item: #a5a7b3;   /* как в сайдбаре */
  --menu-bar: #4a4f65;
  --menu-dim: rgba(27, 32, 57, .8);
  /* карточка «Обо мне» */
  --card: #d3d7ea;
  --card-fg: #07080f;
  /* начертания: в тёмной теме светлое на тёмном выглядит жирнее */
  --w-h1: 500;
  --w-author: 300;
  --w-text: 300;   /* обычные экраны (компьютер): светлое на тёмном и так выглядит жирнее */
  --w-bold: 500;
  --w-toc: 400;
  /* руна в шапке */
  --rune-w: 340px;
  --rune-top: -70px;
  --info-bg: #ffffff;
  --info-fg: #1b2039;
}

[data-theme="light"] {
  color-scheme: light;
  --page: #d9eafa;
  --text: #07080f;
  --link: #004ee6;   /* насыщенный экранный синий (Irka, 2026-10-31: «как в CMYK»); контраст 5,3 */
  --h1: #1e233f;
  --author: #07080f;
  --h2: #17558c;
  --h3: #17558c;
  --h2-track: 0;
  --quote: #1f2754;
  --tr: #5e5f63;
  --select: rgba(67, 133, 247, .35);
  --btn: #d9eafa;
  --btn-fg: #3a6893;   /* контраст 4,8 (было #4778a3 — 3,8) */
  --btn-on: #17558c;
  --btn-on-line: #d9eafa;
  --btn-on-fg: #ffffff;
  --btn-shadow: rgba(0, 0, 0, .4);
  --side: #d9eafa;
  --side-shadow: rgba(0, 0, 0, .3);
  --toc-head: #17558c;
  --toc-cur: #17558c;
  --toc-item: #3a6893;   /* контраст 4,8 (было #5d89b0 — 3,0) */
  --toc-bar: #a2bbd1;
  --menu: #17558c;
  --menu-head: #ffffff;
  --menu-cur: #ffffff;
  --menu-item: #b3d6f4;   /* контраст 5,1 (было #a2bbd1 — 3,9) */
  --menu-bar: #4778a3;
  --menu-dim: rgba(23, 85, 140, .5);
  --card: #b3d6f4;
  --card-fg: #07080f;
  --w-h1: 600;
  --w-author: 400;
  --w-text: 400;
  --w-bold: 700;
  --w-toc: 500;
  --rune-w: 250px;
  --rune-top: 0px;
  --info-bg: #17558c;
  --info-fg: #ffffff;
}

/* узкие экраны, тёмная тема: кнопки в тон верхнему меню */
@media (max-width: 1023px) {
  [data-theme="dark"] {
    --btn: #36394c;
    --btn-fg: #a5abd1;
    --btn-on: #13162c;
    --btn-on-line: #727589;
  }
}

/* ---------- 2. Кегли и сетка ---------- */
:root {
  --fonts: 'OY Deco', 'OY Arrows', 'Fira Sans', 'Apple Color Emoji', 'OY Emoji', 'Noto Sans CJK SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  --fs-h1: 46px;
  --fs-sub: 26.5px;
  --fs-author: 21px;
  --fs-btn: 15.5px;
  --fs-card: 17px;
  --fs-h2: 36.5px;
  --fs-h3: 26.5px;
  --fs-text: 20px;     /* было 21 (Irka, 2026-10-31) */
  --fs-qmark: 30.5px;
  --fs-quote: 20px;    /* цитата — как основной текст (Irka, 2026-11-02; было 19) */
  --fs-tr: 17px;
  --fs-c2: 22px;
  --fs-c3: 19px;
  --lh: 1.35;                           /* интерлиньяж основного текста (Irka, 2026-11-02; было 1.3) */
  --line: calc(var(--fs-text) * var(--lh));   /* единица воздуха — строка основного текста */
  --col: 720px;                         /* текстовая колонка */
  --head: 990px;                        /* блок заголовка */
  --side-w: 320px;
  --pad: 40px;                          /* поле текстовой поверхности вокруг колонки */
  --qi: clamp(16px, 7%, 50px);          /* общий левый край цитаты, кавычки и черты перевода */
  --tr-gap: 18px;                       /* от черты до текста перевода (было 25) */
  --half: 44px;                         /* половинка переключателя темы и языка */
  --media-gap: 10px;                    /* между медиа подряд (было: строка) */
  --toc-gap: 20px;                      /* между любыми пунктами бокового содержания */
  --bar-h: 0px;                         /* высота верхней полосы меню (есть только на узких) */
}

@media (max-width: 767px) {
  :root {
    /* телефон: всё, кроме содержания, на 1 пункт (1,5 px) крупнее макета ÷ 3 (Irka, 2026-10-29) */
    --fs-h1: 27px;
    --fs-sub: 19.5px;
    --fs-author: 15px;
    --fs-btn: 13.5px;
    --fs-card: 16.5px;
    --fs-h2: 28.5px;   /* +1 пункт (Irka, 2026-10-31) */
    --fs-h3: 21px;
    --fs-text: 16.5px;
    --fs-qmark: 24.5px;
    --fs-quote: 16.5px;
    --fs-tr: 15.5px;
    --fs-c2: 20.5px;   /* содержание — без прибавки (Irka, 2026-10-29) */
    --fs-c3: 17.5px;
    --lh: 1.3;         /* телефон: короткая строка, интерлиньяж прежний */
    --pad: 24px;
    --tr-gap: 7px;
    --half: 34px;
  }
}

@media (max-width: 479px) {
  :root { --pad: 16px; }
}

@media (max-width: 1023px) {
  :root { --bar-h: 52px; }
}

/* ---------- 3. Основа ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  background: var(--page);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* светлая тема: корень страницы на тон темнее, чем фон текста. Chrome на Android красит полосу
   системных кнопок по корню — так она еле-еле отличается от страницы (опыт, Irka 2026-10-30) */
[data-theme="light"] { background: #cfe0f3; }
[data-theme="dark"] { background: #171b32; }   /* то же для тёмной: на тон темнее #1b2039 (Irka, 2026-10-31) */
body {
  min-height: 100vh;
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: var(--fonts);
  font-size: var(--fs-text);
  font-weight: var(--w-text);
  line-height: var(--lh);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--select); }

a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: .15em; }
a:hover { text-decoration-thickness: 2px; }

b, strong { font-weight: var(--w-bold); }

button { font: inherit; color: inherit; }

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

/* ---------- 4. Раскладка: страница + сайдбар ---------- */
.page { position: relative; overflow-x: clip; }

@media (min-width: 1024px) {
  .page { margin-right: var(--side-w); }
}

/* ---------- 5. Шапка ---------- */
.hero {
  position: relative;
  isolation: isolate;   /* фон шапки и руна — внутри шапки, над цветом страницы */
  padding: calc(var(--bar-h) + 72px) var(--pad) 0;
}

.hero-bg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 1080px;
  z-index: -1;
  background: no-repeat center top;
  /* уход в цвет страницы: к абзацу «В 2024 году…» шапка уже наполовину прозрачна */
  /* в пикселях, а не в процентах: к ~780 px от верха страницы шапка полностью уходит в фон (Irka, 2026-10-29) */
  -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 260px, rgba(0, 0, 0, .78) 390px, rgba(0, 0, 0, .5) 510px, rgba(0, 0, 0, .22) 630px, rgba(0, 0, 0, .06) 715px, transparent 780px);
  mask-image: linear-gradient(to bottom, #000 0, #000 260px, rgba(0, 0, 0, .78) 390px, rgba(0, 0, 0, .5) 510px, rgba(0, 0, 0, .22) 630px, rgba(0, 0, 0, .06) 715px, transparent 780px);
  pointer-events: none;
}

[data-theme="dark"] .hero-bg { background-image: url(header/only-you-header-dark-2560.webp); }
[data-theme="light"] .hero-bg { background-image: url(header/only-you-header-light-2560.webp); }
@media (max-width: 2240px) {
  [data-theme="dark"] .hero-bg { background-image: url(header/only-you-header-dark-1920.webp); }
  [data-theme="light"] .hero-bg { background-image: url(header/only-you-header-light-1920.webp); }
}
@media (max-width: 1632px) {
  [data-theme="dark"] .hero-bg { background-image: url(header/only-you-header-dark-1312.webp); }
  [data-theme="light"] .hero-bg { background-image: url(header/only-you-header-light-1312.webp); }
}
@media (max-width: 767px) {
  .hero-bg {
    height: auto;
    aspect-ratio: 1080 / 1500;
    background-size: 100% auto;
    top: var(--bar-h);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .1) 87%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 40%, rgba(0, 0, 0, .7) 55%, rgba(0, 0, 0, .35) 72%, rgba(0, 0, 0, .1) 87%, transparent 100%);
  }
  [data-theme="dark"] .hero-bg { background-image: url(header/only-you-header-dark-1080.webp); }
  [data-theme="light"] .hero-bg { background-image: url(header/only-you-header-light-1080.webp); }
}

/* подложка цвета страницы под фоном шапки: без неё руна в режиме Screen
   смешивается с пустотой и даёт тёмный прямоугольник */
.hero::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1080px;
  z-index: -2;
  background: var(--page);
}
@media (max-width: 767px) {
  .hero::before { height: calc(var(--bar-h) + 100vw * 1500 / 1080); }
}

/* руна (тёмная тема) и кристалл (светлая) — отдельным слоем; может уходить за верх окна */
.rune {
  position: absolute;
  z-index: -1;
  width: var(--rune-w);
  aspect-ratio: 515 / 1002;
  top: var(--rune-top);
  /* посередине между краем окна и левым краем блока заголовка */
  left: calc((100% - var(--head)) / 4 - var(--rune-w) / 2);
  background: no-repeat center / contain;
  pointer-events: none;
}
[data-theme="dark"] .rune { background-image: url(header/only-you-rune-dark.webp); mix-blend-mode: screen; }
[data-theme="light"] .rune { background-image: url(header/only-you-rune-light.webp); }

/* поля слева уже не хватает — руна уходит вправо */
@media (max-width: 1750px) and (min-width: 1024px) {
  .rune { left: auto; right: 24px; }
}
@media (max-width: 1023px) {
  .rune { left: auto; right: 16px; top: calc(var(--bar-h) + var(--rune-top)); width: calc(var(--rune-w) * .7); }
}
@media (max-width: 767px) {
  /* по макету Irka 2026-10-30 */
  /* по макету Irka 2026-10-30; размеры посчитаны по видимой части знака (у файлов прозрачные поля) */
  [data-theme="dark"] { --rune-w: 165px; --rune-top: -34px; --rune-right: -26px; }   /* выше и крупнее (2026-10-31) */
  [data-theme="light"] { --rune-w: 140px; --rune-top: -21px; --rune-right: -22px; }  /* правее, чуть обрезается */
  .rune { right: var(--rune-right); width: var(--rune-w); }
}

.head {
  position: relative;
  max-width: var(--head);
  margin: 0 auto;
}

.head h1 {
  margin: 0;
  max-width: 860px;
  color: var(--h1);
  font-size: var(--fs-h1);
  font-weight: var(--w-h1);
  line-height: 1.05;
  text-wrap: balance;
}

.subhead {
  margin: calc(.55em + var(--line) * .5) 0 0;   /* +полстроки (Irka, 2026-10-29) */
  color: var(--h1);
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: 1.15;
  text-wrap: balance;
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  margin-top: 48px;
}

.author {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--author);
  font: inherit;
  font-size: var(--fs-author);
  font-weight: var(--w-author);
  text-align: left;
  cursor: pointer;
}
.author .info { display: none; }

/* Когда автор и кнопки уже не помещаются в одну строку:
   «Обо мне» превращается в значок ⓘ у имени (карточку открывает имя со значком),
   переключатели — слева рядом, «Для спидраннеров» — к правому краю. Макет Irka 2026-10-30. */
.head { container-type: inline-size; }
@container (max-width: 860px) {
  .byline { flex-direction: column; align-items: stretch; gap: 20px; }
  .buttons .about-btn { display: none; }
  .author { align-self: flex-start; min-height: 44px; padding-right: 14px; }   /* зона нажатия не ниже 44 px */
  .author .name { position: relative; }
  .author .info {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin: -1em 0 0 -7px;     /* как надстрочный значок у конца имени (на 1 px правее, Irka 2026-11-02) */
    border-radius: 50%;
    background: var(--info-bg);
    color: var(--info-fg);
  }
  .author .info svg { width: 11px; height: 11px; fill: currentColor; }
  .buttons { gap: 12px; }
  .buttons .speed { margin-left: auto; }
}

.author img { width: 64px; height: 64px; border-radius: 50%; display: block; }

@media (max-width: 767px) {
  .hero { padding-top: calc(var(--bar-h) + 24px); }
  .head h1 { max-width: none; }
  /* светлая тема: подзаголовок не заходит на кристалл */
  [data-theme="light"] .subhead { padding-right: 104px; }   /* видимый кристалл после сдвига вправо */
  /* от подзаголовка до автора — столько же, сколько от автора до кнопок */
  .byline { margin-top: 20px; gap: 20px 16px; }
  .author img { width: 40px; height: 40px; }
  .author { gap: 10px; }
}

/* ---------- 6. Кнопки ---------- */
.buttons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 24px;
}

.btn,
.switch {
  border-radius: 7px;
  box-shadow: 0 0 15px var(--btn-shadow);
}

.btn,
.half {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 2px 14px 0;   /* +2 px сверху: у Fira буквы сидят выше середины */
  border: 1px solid transparent;
  background: var(--btn);
  color: var(--btn-fg);
  font-size: var(--fs-btn);
  font-weight: 400;   /* на шаг тоньше (было 500; Irka, 2026-10-31) */
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.btn { cursor: pointer; }
.btn:hover, .switch:hover .half { filter: brightness(1.12); text-decoration: none; }

/* абрис тоньше: на плотных экранах — полпикселя (на обычных тоньше 1 px не бывает) */
@media (min-resolution: 2dppx) {
  .btn, .half { border-width: .5px; }
}

/* «Обо мне» и «Для спидраннеров» — синие, белые буквы (в тон сайдбару) */
.btn.act {
  background: var(--btn-on);
  border-color: var(--btn-on-line);
  color: var(--btn-on-fg);
}

/* переключатели темы и языка: одна кнопка целиком, половинки одинаковой ширины */
.switch {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  text-decoration: none;
  cursor: pointer;
}
.switch .half { width: var(--half); padding-left: 0; padding-right: 0; }
.switch .half:first-child { border-radius: 7px 0 0 7px; }
.switch .half:last-child { border-radius: 0 7px 7px 0; }
.switch .half.on,
[data-theme="light"] .theme-switch [data-half="light"],
[data-theme="dark"] .theme-switch [data-half="dark"] {
  background: var(--btn-on);
  border-color: var(--btn-on-line);
  color: var(--btn-on-fg);
  filter: none;
}
.theme-switch .half { padding-top: 0; }

.btn svg, .half svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
.btn.speed { padding-left: 9px; gap: 6px; }
.btn.speed svg { margin-top: -2px; }

@media (max-width: 767px) {
  .buttons { gap: 8px; }
  .btn, .half { height: 32px; padding: 2px 8px 0; gap: 5px; }
  .btn, .switch { border-radius: 6px; }
  .switch .half:first-child { border-radius: 6px 0 0 6px; }
  .switch .half:last-child { border-radius: 0 6px 6px 0; }
  .btn svg, .half svg { width: 17px; height: 17px; }
  .btn.speed { padding-left: 5px; gap: 4px; }
}

/* плавающий переключатель темы: десктоп — левый нижний угол;
   узкие экраны — только при раскрытом меню, по центру внизу */
.theme-float {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 41;
}

@media (min-width: 1024px) {
  .theme-float .half { width: 34px; height: 32px; }
  .theme-float .half svg { width: 17px; height: 17px; }
  .theme-float .switch, .theme-float .half:first-child { border-radius: 6px 0 0 6px; }
  .theme-float .half:last-child { border-radius: 0 6px 6px 0; }
  .theme-float .switch { border-radius: 6px; }
}
@media (min-width: 1024px) and (max-width: 1135px) {
  .theme-float { display: none; }
}
@media (max-width: 1023px) {
  .theme-float { display: none; left: 50%; bottom: 24px; transform: translateX(-50%); }
  .menu-open .theme-float { display: block; }
}

/* ---------- 7. Попап «Обо мне» ---------- */
.about {
  position: absolute;
  inset: auto;
  margin: 0;
  width: 340px;
  max-width: calc(100vw - 32px);
  padding: 20px 22px;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  color: var(--card-fg);
  box-shadow: 0 0 15px var(--btn-shadow);
  font-size: var(--fs-card);
  font-weight: 400;
  line-height: 1.3;
}

.about p { margin: 0 28px 0 0; }

.about ul { list-style: none; margin: 14px 0 0; padding: 0; }
.about li a {
  display: grid;
  grid-template-columns: 19px auto;
  justify-content: start;
  align-items: center;
  column-gap: 9px;
  min-height: 30px;
  color: inherit;
  overflow-wrap: anywhere;
}
.about li svg { display: block; width: 19px; height: 19px; fill: currentColor; }

.about-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  color: var(--card-fg);
  opacity: .55;
  cursor: pointer;
}
.about-close:hover { opacity: 1; }
.about-close svg { width: 15px; height: 15px; }

@media (max-width: 767px) {
  .about { padding: 18px 20px 12px; }
  .about li a { min-height: 36px; }
  .about-close { width: 44px; height: 44px; top: 2px; right: 2px; }
}

/* ---------- 8. Текстовая поверхность ---------- */
.article {
  position: relative;
  z-index: 1;           /* поверхность с текстом — над фоном шапки */
  max-width: calc(var(--col) + 2 * var(--pad));
  margin: 72px auto 0;
  padding: 30px var(--pad) calc(var(--line) * 4);
  background: var(--page);
}

/* 1024–1135: колонка сужается 720 → 624 */
@media (min-width: 1024px) and (max-width: 1135px) {
  .article { max-width: none; margin-inline: 0; }
}

@media (max-width: 767px) {
  .article { margin-top: 36px; padding-top: 12px; background: none; }
}

.prose {
  max-width: var(--col);
  margin: 0 auto;
  hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: 7 3 3;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  overflow-wrap: break-word;
}

:where(.prose) p { margin: 0; }
.prose :is(p, li) { word-spacing: .04em; }   /* пробел между словами на ~1 px шире: у Fira буквы стоят свободно, слова слипаются (Irka, 2026-11-02) */
[data-theme="light"] .prose :is(p, li) { letter-spacing: -.006em; }   /* чуть плотнее в светлой (Irka, 2026-10-31) */   /* сброс без веса: воздух задают правила раздела 9 */

:where(.prose) :is(h2, h3) { margin: 0; }
:where(.prose) :is(figure, blockquote) { margin-block: 0; }   /* у браузера свои отступы — убираем */
.prose h2,
.prose h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
  text-wrap: balance;
  /* переход по содержанию: заголовок встаёт на четверть экрана — чуть выше линии 30%,
     где раздел становится текущим, поэтому он подсвечивается сразу */
  scroll-margin-top: calc(var(--bar-h) + (100vh - var(--bar-h)) * .25);
}

.prose h2 {
  color: var(--h2);
  font-size: var(--fs-h2);
  font-weight: 700;
  font-style: italic;
  line-height: 1.08;
  letter-spacing: var(--h2-track);
}

.prose h3 {
  color: var(--h3);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.1;
}

.prose h3.center { color: var(--text); text-align: center; }
/* «Что установлено» — кульминация: цветом основного текста, а не синим (Irka, 2026-10-31) */
.prose h2:is(#chto-ustanovleno, #what-was-established) { color: var(--text); }
/* плашка «Вывод не может быть сделан без фактов» — размер и начертание H3-Center, в содержание не входит */
.prose .plaque.diamond > .c { font-size: var(--fs-h3); font-weight: 500; line-height: 1.1; text-wrap: balance; }

.prose .b { font-weight: var(--w-bold); }
.nobr { white-space: nowrap; }   /* «куда-то», «из-за» — без разрыва на дефисе */
/* .arr — строка из стрелок; крупнее теперь все стрелки сразу (size-adjust в fonts.css) */
.prose .c,
.prose .el,
.prose .orn,
.prose .sep { text-align: center; hyphens: manual; -webkit-hyphens: manual; }

/* ---------- 9. Вертикальный воздух (styles.md, раздел 4) ---------- */
.prose > * + * { margin-top: var(--line); }

/* абзацы одного стиля — вплотную */
.prose > p:not([class]) + p:not([class]),
.prose > p:not([class]) + p.b,
.prose > p.b + p:not([class]),
.prose > p.b + p.b,
.prose > p.c + p.c { margin-top: 0; }

/* заголовок → текст под ним вплотную; заголовок → заголовок — строка */
.prose > :is(h2, h3) + * { margin-top: 0; }
.prose > :is(h2, h3) + :is(h2, h3, .plaque) { margin-top: var(--line); }

/* над H2 — две строки (Irka, 2026-10-29) */
.prose > * + h2 { margin-top: calc(var(--line) * 2); }

/* медиа подряд — несколько пикселей, а не строка */
.prose > .m + .m { margin-top: var(--media-gap); }

/* стрелка Element-Center: сверху чуть меньше строки (Irka, 2026-10-31) */
.prose > * + .el.arr { margin-top: calc(var(--line) * .7); }

/* знак по центру (❄ ↓ 💧) → полстроки до своего абзаца */
.prose > .el + * { margin-top: calc(var(--line) * .5); }

/* перевод — полстроки после своего блока, строка после перевода (по умолчанию) */
.prose > * + .tr { margin-top: calc(var(--line) * .5); }

/* пауза — пустой абзац из документа */
.pause { height: var(--line); }
.prose > .pause,
.prose > .pause + *,
.quote > .pause + *,
.tr > .pause + * { margin-top: 0; }

/* ---------- 10. Цитата, кавычка, перевод ---------- */
.quote {
  margin-inline: var(--qi);
  color: var(--quote);
  font-size: var(--fs-quote);
}

.qmark {
  font-size: var(--fs-qmark);
  line-height: 1;
  height: .72em;          /* знак ❝ сидит в верхней части строки — срезаем часть пустого низа */
  color: var(--quote);
  user-select: none;
}

.tr {
  position: relative;
  margin-left: var(--qi);
  padding-left: var(--tr-gap);
  color: var(--tr);
  font-size: var(--fs-tr);
  line-height: 1.2;
}
/* черта на пару пикселей длиннее текста */
.tr::before {
  content: '';
  position: absolute;
  left: 0;
  top: -2px;
  bottom: -2px;
  width: 1px;
  background: var(--tr);
}
@media (max-width: 767px) {
  .tr::before { width: .75px; top: -1px; bottom: -1px; }
}

/* ---------- 11. Плашки и знаки ---------- */
.plaque > * { margin: 0; }
.plaque > * + * { margin-top: calc(var(--line) * .5); }
.plaque h3 { scroll-margin-top: calc(var(--bar-h) + (100vh - var(--bar-h)) * .25 + 20px); }
.plaque > h3 + .orn { margin-top: calc(var(--line) * .15); }
.orn { white-space: nowrap; letter-spacing: 0; user-select: none; }
.el, .sep { user-select: none; }
/* снежинка-эмодзи почти белая — в светлой теме тонкая синяя обводка */
[data-theme="light"] .el.snow { filter: drop-shadow(0 0 .6px #5d89b0) drop-shadow(0 0 .6px #5d89b0) drop-shadow(0 0 .4px #5d89b0); }   /* обводка посветлее */
s { text-decoration-thickness: 1.5px; }

/* ---------- 12. Картинки и видео ---------- */
.m {
  --w: 100%;
  width: min(var(--w), calc(85svh * var(--ar)));
  margin-left: auto;
  margin-right: auto;
}
.m.w75 { --w: 75%; }
.m.w50 { --w: 50%; }
.m img,
.m video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--ar);
  background: rgba(127, 127, 127, .12);
}
@media (max-width: 767px) {
  .m.w75, .m.w50 { --w: 100%; }
}

/* ---------- 13. Содержание: боковой сайдбар (от 1024) ---------- */
.toc {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--side-w);
  z-index: 20;
  display: flex;
  flex-direction: column;
  background: var(--side);
  box-shadow: -4px 0 20px var(--side-shadow);
  letter-spacing: .01em;
}

.toc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 12px 28px;
  color: var(--toc-head);
  font-size: var(--fs-c2);
  font-weight: 500;
  line-height: 1.05;
}
.toc-head svg { width: 20px; height: 20px; fill: currentColor; }

.toc-list {
  position: relative;
  flex: 1;
  margin: 0;
  padding: 45vh 22px 45vh 28px;
  list-style: none;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--toc-bar) transparent;
  overscroll-behavior: contain;
}

.toc-list li { position: relative; }
.toc-list a {
  display: block;
  color: var(--toc-item);
  font-weight: var(--w-toc);
  line-height: 1.05;
  text-decoration: none;
  text-wrap: balance;
}
.toc-list a:hover { color: var(--toc-cur); }
.toc-list .l2 a { font-size: var(--fs-c2); }
.toc-list .l3 a { font-size: var(--fs-c3); padding-left: 35px; }
.toc-list li + li { margin-top: var(--toc-gap); }   /* все отступы одинаковые */

.toc-list .is-current a { color: var(--toc-cur); }
/* маркер «ты здесь» (десктоп) — «нашлёпка» на левой границе сайдбара, наполовину снаружи.
   Лежит вне прокручиваемого списка, чтобы не обрезался; скрипт ставит его на высоту текущего пункта. */
.toc-marker {
  position: absolute;
  left: 0;
  top: 0;
  width: 11px;   /* как в мобильном меню; внутри сайдбара (Irka, 2026-10-31) */
  height: 44px;
  border-radius: 0 6px 6px 0;
  background: var(--toc-cur);
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}
.toc-marker.on { opacity: 1; }

.toc-close,
.menubar,
.menu-dim,
.toc-list .top { display: none; }

/* ---------- 14. Узкие экраны: верхнее меню ---------- */
@media (max-width: 1023px) {
  .menubar {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 40;
    display: flex;
    align-items: center;
    gap: 14px;
    height: var(--bar-h);
    padding: 0 var(--pad);
    border: 0;
    background: var(--menu);
    color: var(--menu-head);
    font-size: var(--fs-c2);
    font-weight: 500;
    text-align: left;
    cursor: pointer;
  }
  .menubar svg { width: 18px; height: 18px; fill: currentColor; flex: none; }
  .menubar span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

  .toc {
    top: var(--bar-h);
    bottom: auto;
    left: 0;
    width: auto;
    height: 64svh;   /* было 78 — слишком огромное (Irka, 2026-10-29) */
    z-index: 39;
    background: var(--menu);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
    transform: translateY(-110%);
    visibility: hidden;
    transition: transform .2s ease, visibility 0s linear .2s;
  }
  .toc-head { display: none; }
  .toc-list { padding: 26svh var(--pad) 26svh calc(var(--pad) + 16px); scrollbar-color: var(--menu-bar) transparent; }
  .toc-marker { display: none; }
  .toc-list a { color: var(--menu-item); min-height: 44px; display: flex; align-items: center; }
  .toc-list li + li { margin-top: 14px; }
  .toc-list .top { display: block; }
  .toc-list .l3 a { padding-left: 29px; }
  .toc-list .is-current a { color: var(--menu-cur); }
  .toc-list .l2.is-current a { font-size: calc(var(--fs-c2) + 5px); }
  .toc-list .l3.is-current a { font-size: calc(var(--fs-c3) + 5px); }
  /* маркер в мобильном меню — часть строки текущего пункта, едет вместе с ним */
  .toc-list .is-current::before {
    content: '';
    position: absolute;
    left: calc(-1 * (var(--pad) + 16px));
    top: 50%;
    width: 11px;
    height: 44px;
    margin-top: -22px;
    border-radius: 0 6px 6px 0;
    background: var(--menu-cur);
  }

  .toc-close {
    display: grid;
    place-items: center;
    height: 44px;
    border: 0;
    background: var(--menu);
    color: var(--menu-head);
    cursor: pointer;
  }
  .toc-close svg { width: 22px; height: 22px; }

  .menu-open .toc { transform: none; visibility: visible; transition: transform .2s ease; }
  .menu-dim {
    position: fixed;
    inset: 0;
    z-index: 38;
    background: var(--menu-dim);
  }
  .menu-open .menu-dim { display: block; }
}

@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  .toc, .menu-open .toc { transition: none; }
}

/* ---------- 15. Страница «Для спидраннеров» (styles.md, раздел 2): без сайдбара, меню и кнопок ---------- */
.speed {
  --bar-h: 0px;
  --head: calc(var(--col) + 2 * var(--pad));   /* руна встаёт между краем окна и текстовой поверхностью */
}
.speed .page { margin-right: 0; }
/* без сайдбара шапка во всю ширину окна: пороги файлов сдвинуты на ширину сайдбара */
@media (min-width: 1313px) and (max-width: 1920px) {
  [data-theme="dark"] .speed .hero-bg { background-image: url(header/only-you-header-dark-1920.webp); }
  [data-theme="light"] .speed .hero-bg { background-image: url(header/only-you-header-light-1920.webp); }
}
@media (min-width: 1921px) {
  [data-theme="dark"] .speed .hero-bg { background-image: url(header/only-you-header-dark-2560.webp); }
  [data-theme="light"] .speed .hero-bg { background-image: url(header/only-you-header-light-2560.webp); }
}
.speed .hero { padding-top: 56px; }
.back-to {
  position: relative;
  display: block;
  max-width: calc(var(--col) + 2 * var(--pad));
  margin: 0 auto;
  padding: 0 var(--pad);
  color: var(--back);
  font-size: var(--fs-back);
  font-weight: var(--w-back);
  line-height: 1.2;
  text-decoration: none;
}
.back-to:hover { text-decoration: underline; }
/* не больше двух строк, лишнее — многоточием по целому слову */
.back-to { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.back-to .arrow {
  position: absolute;
  top: 50%;
  left: calc(var(--pad) - 1.15em);
  transform: translateY(-52%);
  font-size: 1.75em;     /* крупнее и по середине между строками (Irka, 2026-10-31) */
  line-height: 1;
}
.speed .article { margin-top: 24px; }
.speed .prose h1 {
  margin: 0;
  color: var(--speed-h1);
  font-size: var(--fs-speed-h1);
  font-weight: var(--w-h1);
  line-height: 1.08;
  text-wrap: balance;
  hyphens: manual;
  overflow-wrap: normal;   /* слово в заголовке не рвём посередине */
}
.speed .prose .read-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: var(--line);   /* от H1 — строка (Irka, 2026-10-31) */
}
.speed .prose .read {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--read);
}
.speed .read-theme { display: none; }
.speed .prose .read svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.speed .prose > .read-row + * { margin-top: var(--line); }
.prose .to-full { text-align: center; margin-top: calc(var(--line) * 1.5); }
.prose .to-full .btn { height: auto; min-height: 44px; padding: 7px 18px 10px; white-space: normal; font-size: var(--fs-text); line-height: 1.2; }
[data-theme="dark"] .prose .to-full .btn { font-weight: var(--w-text); }   /* как основной текст */

/* экраны высокой плотности (телефоны, ретина): штрих тоньше — в тёмной теме текст на шаг толще (Irka, 2026-11-02) */
@media (min-resolution: 2dppx) {
  [data-theme="dark"] { --w-text: 400; --w-bold: 600; }
}
.prose .sep { font-size: 1em; }
.speed .theme-float { display: block; left: 20px; bottom: 20px; transform: none; }
/* без сайдбара на узких экранах плавающая кнопка ложилась на текст — переезжает в строку «10 минут» */
@media (max-width: 1023px) {
  .speed .theme-float { display: none; }
  .speed .read-theme { display: block; }
}
@media (max-width: 767px) {
  .speed .hero { padding-top: 28px; }
  .back-to { padding-left: calc(var(--pad) + 2em); }
  .back-to .arrow { left: var(--pad); }
  .speed .article { margin-top: 16px; }
  /* светлая тема: название и ссылка назад не заходят на кристалл */
  [data-theme="light"] .speed .back-to { padding-right: 104px; }
  [data-theme="light"] .speed .prose h1 { padding-right: 56px; }   /* длинное «доказательств,» должно влезать целиком */
}
:root, [data-theme="dark"] { --back: #ffffff; --read: #a5abd1; --speed-h1: #ffffff; --w-back: 400; }
[data-theme="light"] { --back: #17558c; --read: #17558c; --speed-h1: #17558c; --w-back: 500; }
:root { --fs-back: 17px; --fs-speed-h1: 36.5px; }
@media (max-width: 767px) { :root { --fs-back: 15px; --fs-speed-h1: 29.5px; } }

/* картинки на белом фоне в тёмной теме — приглушены, чтобы не слепили (признак ставит сборка, Irka 2026-11-02) */
[data-theme="dark"] .m.light img { filter: brightness(.8); }

/* ---------- 16. Печать — светлая ---------- */
@media print {
  :root, [data-theme] {
    --page: #fff; --text: #000; --h1: #000; --h2: #17558c; --h3: #17558c; --quote: #1f2754; --tr: #444; --link: #0054b3;
    --w-text: 400; --w-bold: 700; --w-h1: 600;
  }
  .toc, .menubar, .theme-float, .buttons, .hero-bg, .rune, .about { display: none !important; }
  .page { margin: 0; }
  .hero { padding-top: 0; }
  .m video { display: none; }
}