/* SpecProekt — палитра и вёрстка раздела. v1, 27.08.2026
 *
 * ПОЧЕМУ УГОЛЬ, А НЕ БУМАГА. Замер контраста по WCAG: фирменные цвета
 * активов на бумажном фоне #F0EBDD дают от 1,26 до 3,10 при минимуме
 * 4,5; на угольном #141210 — от 5,06 до 12,50. То есть на светлом фоне
 * ни один из них не годится для подписи, и линию пришлось бы красить
 * не в цвет актива, а во что-то похожее. Тёмный фон снимает вопрос.
 *
 * ПЕРЕМЕННЫЕ ЖИВУТ ТОЛЬКО ЗДЕСЬ. Они объявлены в области .spec, а не в
 * :root, и это главное решение файла: угольный фон и оранжевый биткоина
 * не должны протекать на остальной сайт. Обнаружить такую протечку
 * можно только глазами и не сразу — а вернуть её обратно потом дороже,
 * чем не пустить.
 *
 * ЦВЕТ НИГДЕ НЕ ЕДИНСТВЕННЫЙ НОСИТЕЛЬ СМЫСЛА. У каждой линии своя форма
 * маркера и подпись на самой линии. Правило не про красоту: дальтонизм
 * у восьми процентов мужчин, и «синяя линия против зелёной» для них
 * просто две линии.
 *
 * ШРИФТЫ НЕ ПОДКЛЮЧАЮТСЯ. Oswald и Golos Text уже лежат в теме своим
 * хостингом; раздел берёт их через --font-display и --font-text.
 */

.spec {
  /* Фон и текст */
  --sp-bg:   #141210;
  --sp-text: #F0EBDD;

  /* Цвета активов на угольном фоне */
  --sp-btc:  #F7931A;
  --sp-eth:  #627EEA;
  --sp-sol:  #14F195;
  --sp-usdt: #7FA8C4;

  /* Цвет издания. В графиках данных НЕ используется: малиновый — это
     подпись «Крипто Среда», а не значение. Линия, покрашенная в цвет
     издания, читается как «наши данные», и это неправда. */
  --sp-brand: #D7262C;

  /* Затемнённые пары — ТОЛЬКО для подписей, вынесенных за пределы
     тёмной области, на бумажный фон. Внутри .spec они не нужны и
     применять их здесь значит терять контраст на ровном месте. */
  --sp-btc-ink:  #9A5600;
  --sp-eth-ink:  #4256B8;
  --sp-sol-ink:  #06714A;
  --sp-usdt-ink: #2E4A5F;

  background: var(--sp-bg);
  color: var(--sp-text);
}

/* Тёмная область идёт от края до края экрана, а не колонкой:
   полоса угля шириной с текст выглядит вставкой, а не разделом. */
.spec {
  padding-block: clamp(24px, 6vw, 64px);
}

.spec__zagolovok {
  font-family: var(--font-display);
  color: var(--sp-text);
  margin-block: 0 .4em;
}

.spec__lid {
  font-size: 1.15rem;
  color: var(--sp-text);
  opacity: .85;
  margin-block: 0 1.5em;
}

.spec__telo {
  max-width: 44rem;
}

.spec__telo a { color: var(--sp-btc); }
.spec__telo a:hover,
.spec__telo a:focus-visible { color: var(--sp-text); }

/* Заголовки внутри материала — тем же шрифтом, что и в остальной теме */
.spec__telo h2,
.spec__telo h3 {
  font-family: var(--font-display);
  color: var(--sp-text);
}

/* --- Витрина -------------------------------------------------------- */

.spec-vitrina__podzagolovok {
  margin-block: -.5em 1.5em;
  font-size: 1.1rem;
  color: var(--color-muted);
}

/* Низ витрины — как у рубрик. Замер 02.09.2026: на /istorii/ последняя карточка упиралась в подвал (0 px), у рубрики
   /novosti/ до подвала 118 px = поле карточки + пагинация + нижнее поле .layout (var(--space-8)). Здесь то же нижнее поле
   контейнера плюс отбивка сетки var(--space-7): 112 px, новых значений нет. */
.post-type-archive-special #main > .container { padding-bottom: var(--space-8); }
.post-type-archive-special .spec-vitrina { margin-bottom: var(--space-7); }

/* Описание раздела — лид, а не сноска (решение владельца 02.09.2026): кегль и цвет как у лида статьи (.article__lead:
   20px, var(--color-coal)), ширина строки var(--measure-article), отбивка до первой карточки var(--space-7). */
.post-type-archive-special .archive-intro { font-size: 20px; color: var(--color-coal); max-width: var(--measure-article); margin-bottom: var(--space-7); }

.spec-vitrina {
  display: grid;
  gap: clamp(16px, 4vw, 32px);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .spec-vitrina { grid-template-columns: repeat(2, 1fr); }
}

.spec-karta__oblozhka img {
  width: 100%;
  height: auto;
  display: block;
}

.spec-karta__zagolovok {
  font-family: var(--font-display);
  margin-block: .5em .3em;
}

.spec-karta__vyderzhka {
  color: var(--color-muted);
  margin: 0;
}

/* --- Модули --------------------------------------------------------- */

/*
 * Общее правило всех модулей раздела: ДО ИНИЦИАЛИЗАЦИИ ОНИ УЖЕ ЧИТАЕМЫ.
 * Модуль без скриптов показывает своё содержимое как обычную разметку —
 * список, таблицу, абзац. Класс .sp-modul--gotov скрипт ставит сам,
 * когда модуль попал в зону видимости и инициализировался.
 *
 * Здесь нет ни одного правила вида «спрятать до загрузки»: скрытый до
 * скрипта блок — это и есть материал, который без JavaScript не читается.
 */
.sp-modul {
  margin-block: clamp(24px, 6vw, 48px);
}

.sp-modul__istochnik {
  font-size: .85rem;
  color: var(--sp-usdt);
  margin-block: .5em 0;
}

/* Движения нет вовсе, если человек об этом попросил системой.
   Модули при этом показывают КОНЕЧНОЕ состояние, а не начальное:
   выключенная анимация не должна означать пустой экран. */
@media (prefers-reduced-motion: reduce) {
  .spec *,
  .spec *::before,
  .spec *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Модуль «Чья это цена» ------------------------------------------ */

.sp-cena__shkala {
  position: relative;
  height: 3rem;
  margin-block: 1.5rem 1rem;
  border-bottom: 2px solid var(--sp-usdt);
}

.sp-cena__tochka {
  /* Значение по умолчанию, которое перекрывается разметкой. Нужно по
     двум причинам сразу: браузер отбрасывает объявление с неизвестной
     переменной молча — точка просто не встала бы на место, — и проверка
     tools/check_css_vars.py требует, чтобы использованная переменная
     была объявлена. Ноль выбран сознательно: если PHP однажды перестанет
     её ставить, точки соберутся в кучу у левого края, и это видно
     сразу, а не «график выглядит немного не так». */
  --dolya: 0%;
  position: absolute;
  bottom: -.75rem;
  left: var(--dolya);
  transform: translateX(-50%);
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--sp-bg);
  border: 2px solid var(--sp-btc);
  color: var(--sp-btc);
  font-size: .8rem;
  line-height: 1.25rem;
  text-align: center;
}

.sp-cena__spisok {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .35rem;
}

.sp-cena__punkt {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  gap: .6rem;
  align-items: baseline;
}

.sp-cena__nomer {
  color: var(--sp-btc);
  font-variant-numeric: tabular-nums;
}

.sp-cena__imya { color: var(--sp-text); opacity: .8; }

.sp-cena__znachenie {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.sp-cena__vyvod {
  margin-block: 1rem 0;
  color: var(--sp-text);
}

/* --- Модуль «Три недели» -------------------------------------------- */

.sp-tri__ekran {
  border: 1px solid var(--sp-usdt);
  border-radius: 4px;
  padding: clamp(16px, 5vw, 28px);
  max-width: 22rem;
}

.sp-tri__podpis {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sp-usdt);
}

.sp-tri__ostatok {
  margin: .2em 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 8vw, 2.6rem);
  font-variant-numeric: tabular-nums;
  color: var(--sp-btc);
}

.sp-tri__data {
  margin: .2em 0 1.2em;
  color: var(--sp-text);
  opacity: .8;
  font-variant-numeric: tabular-nums;
}

/* Кнопка — размер под палец. 44 px это нижняя граница, ниже которой
   промахиваются: модуль обязан работать касанием, наведения нет вовсе. */
.sp-tri__knopka {
  min-height: 44px;
  width: 100%;
  padding: .6em 1.2em;
  background: transparent;
  border: 1px solid var(--sp-btc);
  color: var(--sp-btc);
  font: inherit;
  cursor: pointer;
}

.sp-tri__knopka:disabled {
  border-color: var(--color-muted);
  color: var(--color-muted);
  cursor: default;
}

.sp-tri__soobshchenie {
  margin: .8em 0 0;
  color: var(--sp-text);
  opacity: .8;
}

.sp-tri__hod,
.sp-tri__final {
  margin-block: 1em 0;
  color: var(--sp-text);
}

/* Скрытые даты — запас для скрипта. Они в разметке ради того, чтобы
   подписи считал PHP, а не JavaScript: сборка строки «7 февраля 2014»
   на клиенте означала бы месяцы прописью в двух местах сразу. */
.sp-tri__den { display: none; }

/* --- Модуль «Таймлайн с линией цены» -------------------------------- */

.sp-tl__grafik {
  width: 100%;
  height: clamp(160px, 40vw, 320px);
  display: block;
  overflow: visible;
}

/* Линия — приглушённый фон, а не главный герой: смысл в событиях,
   а цена показывает, на каком фоне они происходили. */
/* ЛИНИЯ БИТКОИНА КРАСИТСЯ ЦВЕТОМ БИТКОИНА.
   Замер 01.09.2026: здесь стояло --sp-usdt (#7FA8C4) — цвет стейблкоина.
   Дефект жил с 27.08 и был невидим, пока у графика не было легенды: линия
   просто «какая-то синяя». С легендой он стал противоречием — образец в
   легенде оранжевый, линия синяя, и читатель обязан решить, кому верить.
   Заодно цвет вернулся к своему смыслу: в разделе --sp-btc значит биткоин
   везде, и график был единственным местом, где это было не так. */
.sp-tl__liniya {
  fill: none;
  stroke: var(--sp-btc);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* Акцент — на событиях. */
.sp-tl__metka {
  fill: var(--sp-bg);
  stroke: var(--sp-btc);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.sp-tl__spisok {
  list-style: none;
  padding: 0;
  margin-block: 1.5rem 0;
}

.sp-tl__epoha h3 {
  font-family: var(--font-display);
  color: var(--sp-btc);
  margin-block: 1.6em .2em;
}

.sp-tl__gody {
  display: block;
  font-family: var(--font-text);
  font-size: .8rem;
  color: var(--sp-usdt);
}

.sp-tl__sobytie {
  margin-block: 0 1.4em;
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--sp-usdt);
}

.sp-tl__data {
  margin: 0;
  font-size: .85rem;
  color: var(--sp-usdt);
}

.sp-tl__zagolovok { margin: .15em 0 .3em; }
.sp-tl__note { margin: 0; opacity: .9; }

/* --- Модуль «Глубина обвалов: сколько падало и сколько восстанавливалось» ------------------------ */

.sp-pros__tablica {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.sp-pros__podpis {
  caption-side: top;
  text-align: start;
  margin-block: 0 1em;
  color: var(--sp-text);
  opacity: .9;
}

.sp-pros__tablica th,
.sp-pros__tablica td {
  text-align: start;
  padding: .45em .6em .45em 0;
  border-bottom: 1px solid rgba(127, 168, 196, .25);
}

.sp-pros__tablica thead th {
  font-size: .8rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--sp-usdt);
}

.sp-pros__glubina { color: var(--sp-btc); white-space: nowrap; }
.sp-pros__kogda   { color: var(--sp-text); opacity: .75; }

/* Кнопки выбора года появляются только вместе со скриптом: кнопка,
   которая ничего не делает, хуже отсутствующей. */
.sp-pros__gody { display: none; gap: .4rem; flex-wrap: wrap; margin-block: 0 1rem; }
.sp-modul--gotov .sp-pros__gody { display: flex; }

.sp-pros__god {
  min-height: 44px;
  min-width: 44px;
  padding: 0 .7em;
  background: transparent;
  border: 1px solid var(--sp-usdt);
  color: var(--sp-text);
  font: inherit;
  cursor: pointer;
}

.sp-pros__god[aria-pressed="true"] {
  border-color: var(--sp-btc);
  color: var(--sp-btc);
}

/* Узкий экран: таблица не сжимается в кашу, а прокручивается сама. */
@media (max-width: 560px) {
  .sp-pros { overflow-x: auto; }
  .sp-pros__tablica { min-width: 30rem; }
}

/* --- Модуль «Каскад ликвидаций» -------------------------------------- */

.sp-kask__data {
  margin: 0;
  font-size: .85rem;
  color: var(--sp-usdt);
}

.sp-kask__zagolovok { margin: .15em 0 1em; }

/* Лестница — картинка каскада: каждая ступень ниже и правее предыдущей.
   Чисел на ступенях нет, поэтому их количество ничего не утверждает. */
.sp-kask__lestnica {
  display: flex;
  align-items: flex-start;
  gap: .4rem;
  height: 7rem;
  margin-block: 0 1.2rem;
}

.sp-kask__stupen {
  /* Значение по умолчанию: задержку ставит разметка, а объявление с
     неизвестной переменной браузер отбрасывает молча — все ступени
     тронулись бы разом. Ноль виден сразу и означает «задержки нет». */
  --zaderzhka: 0s;
  flex: 1 1 0;
  background: var(--sp-btc);
  height: 1rem;
  align-self: flex-start;
  transform: translateY(0);
  opacity: .35;
}

.sp-kask__shagi {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .7rem;
}

.sp-kask__shag {
  --zaderzhka: 0s;
  padding-inline-start: .9rem;
  border-inline-start: 2px solid var(--sp-usdt);
  opacity: 1;
}

/*
 * ДВИЖЕНИЕ ВКЛЮЧАЕТ КЛАСС, КОТОРЫЙ СТАВИТ СКРИПТ. Без скрипта — и без
 * этого класса — все шаги видны и читаются: модуль остаётся схемой.
 * Прятать шаги в разметке нельзя, иначе без JavaScript материал неполон.
 */
.sp-modul--gotov .sp-kask__shag {
  opacity: .25;
  animation: sp-kask-shag .6s ease-out var(--zaderzhka) forwards;
}

.sp-modul--gotov .sp-kask__stupen {
  animation: sp-kask-padenie .6s ease-in var(--zaderzhka) forwards;
}

@keyframes sp-kask-shag {
  to { opacity: 1; }
}

@keyframes sp-kask-padenie {
  to { transform: translateY(5rem); opacity: 1; }
}

/* --- Модуль «Код — это закон?» --------------------------------------- */

.sp-razv__data {
  margin: 0;
  font-size: .85rem;
  color: var(--sp-usdt);
}

.sp-razv__zagolovok { margin: .15em 0 .4em; }
.sp-razv__note { margin: 0 0 1.2em; opacity: .9; }

/* Кнопки выбора показываются только вместе со скриптом: без него выбор
   некуда деть, а обе ветки и так стоят на странице целиком. */
.sp-razv__knopki { display: none; gap: .6rem; flex-wrap: wrap; margin-block: 0 1.2rem; }
.sp-modul--gotov .sp-razv__knopki { display: flex; }

.sp-razv__vybor {
  min-height: 44px;
  padding: .6em 1.1em;
  background: transparent;
  border: 1px solid var(--sp-usdt);
  color: var(--sp-text);
  font: inherit;
  cursor: pointer;
}

.sp-razv__vybor[aria-pressed="true"] {
  border-color: var(--sp-btc);
  color: var(--sp-btc);
}

.sp-razv__otvet,
.sp-razv__itog {
  padding-inline-start: 1rem;
  border-inline-start: 2px solid var(--sp-usdt);
  margin-block: 0 1.2em;
}

.sp-razv__podpis {
  margin: 0 0 .3em;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sp-usdt);
}

/* --- Модуль «Циклы в одном кадре» ----------------------------------- */

/*
 * График рисуется разметкой: polyline в SVG, без скрипта. Скрипт этому
 * модулю не нужен вовсе — в spec-moduli.js для него стоит пустая функция.
 */
.sp-cik__grafik {
	width: 100%;
	height: 18rem;
	display: block;
	overflow: visible;
}

.sp-cik__liniya {
	fill: none;
	stroke: var(--sp-btc);
	stroke-width: 2;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	opacity: 0.55;
}

/*
 * Незавершённый цикл — пунктиром. Разница видна и БЕЗ ЦВЕТА: пунктир
 * читается на чёрно-белой печати и при дальтонизме, а цвет — нет.
 *
 * Малиновым его красить нельзя, и это не вкусовщина: --sp-brand это
 * подпись издания, а не значение. Линия данных, покрашенная в него,
 * читается как «а вот это наше». Запрет стоит отдельным шагом линта
 * (tools/test_spec_palitra.php), и он же его здесь и поймал.
 */
.sp-cik__liniya--ne-zavershyon {
	stroke: var(--sp-btc);
	stroke-dasharray: 6 5;
	opacity: 1;
}

.sp-cik__tablica {
	width: 100%;
	margin-top: 1.25rem;
	border-collapse: collapse;
	font-size: 0.9rem;
	color: var(--sp-text);
}

.sp-cik__podpis {
	caption-side: bottom;
	margin-top: 0.75rem;
	color: var(--sp-text);
	opacity: .8;
	font-size: 0.85rem;
	text-align: left;
}

.sp-cik__tablica th,
.sp-cik__tablica td {
	padding: 0.45rem 0.6rem;
	border-bottom: 1px solid rgba(240, 235, 221, 0.14);
	text-align: left;
}

/*
 * Глубина падения — значение, а не акцент издания, поэтому цвет
 * обычный текстовый. Выделяется она моноширинными цифрами и знаком
 * минус, а не краской.
 */
.sp-cik__glubina {
	color: var(--sp-text);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sp-cik__primechanie {
	color: var(--sp-text);
	opacity: .8;
	font-size: 0.82rem;
}

@media (max-width: 40rem) {
	.sp-cik__grafik {
		height: 13rem;
	}

	.sp-cik__tablica {
		font-size: 0.82rem;
	}
}

/* ===== Оси, легенда и подписи графиков =====================================
   Заведено 01.09.2026. Замер того дня: во всех трёх модулях раздела ноль
   элементов <text> внутри SVG — ни осей, ни значений, ни годов. График без
   чисел читается как «биткоин планомерно растёт», потому что
   логарифмическая шкала сжимает падение вдвое в 20 px из 320.

   Подписи печатает СЕРВЕР: без JavaScript график остаётся графиком с осями.
   ------------------------------------------------------------------------ */

/* Сетка — заметно тише линии данных: она ориентир, а не содержание.
   Прозрачностью, а не своим цветом: цвет был бы третьим способом сказать
   «приглушённый», и он разошёлся бы с остальными двумя. */
.sp-os__setka,
.sp-os__zasechka {
  stroke: color-mix(in srgb, var(--sp-text) 22%, transparent);
  stroke-width: 1;
  /* vector-effect: линии сетки не должны толстеть от preserveAspectRatio="none",
     которое растягивает полотно по горизонтали в разы. Без этого сетка на
     широком экране выглядит жирнее самой линии цены. */
  vector-effect: non-scaling-stroke;
}

.sp-os__podpis {
  fill: var(--sp-text);
  opacity: .75;
  font-family: var(--font-text);
  /* Кегль в единицах ПОЛОТНА, а не экрана: SVG растягивается, и 11 px
     здесь — это 11 единиц viewBox. На 360 px они дают около 4 мм высоты,
     что и есть нижняя читаемая граница для служебной подписи. */
  font-size: 11px;
}
/* preserveAspectRatio="none" растягивает и текст. Отменяем растяжение
   ровно для подписей: цифры, растянутые втрое по горизонтали, не
   читаются вовсе. */
.sp-os__podpis { font-stretch: normal; }
.sp-tl__grafik, .sp-cik__grafik { overflow: visible; }

.sp-legenda {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}
.sp-legenda__punkt {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font: var(--text-small);
  color: var(--sp-text);
}
.sp-legenda__obrazec { width: 28px; height: 8px; flex: none; }

.sp-podpis {
  font: var(--text-small);
  color: var(--sp-text);
  opacity: .75;
  margin: var(--space-2) 0 var(--space-5);
}

/* Ближний график — второй кадр того же ряда, последние два года линейной
   шкалой. Отделён линией сверху: это не продолжение первого графика, а
   другой взгляд на те же данные. */
.sp-tl__blizhnij {
  margin: var(--space-6) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid color-mix(in srgb, var(--sp-text) 22%, transparent);
}
.sp-tl__blizhnij-titul {
  font: var(--text-h3);
  margin: 0 0 var(--space-3);
  color: var(--sp-text);
}
.sp-tl__liniya--lin { stroke: var(--sp-btc); fill: none; stroke-width: 2; }

/* Полосы глубины просадок. Полоса — добавка к числу, а не замена: число
   стоит текстом рядом и читается диктором. */
.sp-pros__para { display: flex; align-items: center; gap: var(--space-2); }
.sp-pros__polosa { width: 72px; height: 10px; flex: none; }
.sp-pros__polosa-fon { fill: color-mix(in srgb, var(--sp-text) 14%, transparent); }
.sp-pros__polosa-znachenie { fill: var(--sp-btc); }
.sp-pros__chislo { white-space: nowrap; }

@media (max-width: 480px) {
  /* На узком экране полоса уступает место числу: число обязательно,
     полоса — нет. */
  .sp-pros__polosa { width: 44px; }
}

/* ШИРОКАЯ ТАБЛИЦА ЦИКЛОВ ПРОКРУЧИВАЕТСЯ ВНУТРИ СЕБЯ, а не двигает страницу.

   Замер 01.09.2026, запись целиком на 360/375/390 px: горизонтальный
   пролив 144/129/114 px, и виновата одна .sp-cik__tablica — шесть колонок
   не ужимаются ниже 505 px. Пролив уводил за экран ВСЮ страницу, а не
   только таблицу: читатель на телефоне видел материал «зазумленным».

   Тот же приём, что у .sp-pros и у широких таблиц в статьях: прокрутка
   живёт в блоке. Ужать таблицу до 360 px без потери читаемости нельзя —
   в ней шесть столбцов, и один из них текстовое замечание. */
.sp-cik { overflow-x: auto; }
.sp-cik__tablica { min-width: 32rem; }

/* ФОН ВИТРИНЫ РАЗДЕЛА — всё, что не зависит от выбранной картинки.

   Правило приехало 19.09.2026 из «Дополнительных стилей» настройщика, где
   оно лежало с пометкой ks-arhiv-istorii. Там ему не место: стили в базе
   сайта не видно ни в репозитории, ни в диффе, ни в прогоне линта — их
   существование обнаруживается просмотром исходника живой страницы.

   Сам background-image (светлая вуаль первым слоем и адрес вложения
   вторым) печатается инлайном из inc/specproekt.php: адрес приходит из
   настройки, а файлу стилей неоткуда его взять. Здесь — цвет бумаги под
   картинкой, кадрирование и фиксация.

   background-color держит фон, пока картинка не загрузилась, и остаётся
   единственным фоном, когда картинка не выбрана вовсе: страница не должна
   на секунду оказаться белой при бумажной палитре сайта. */
body.post-type-archive-special {
  background-color: var(--color-paper);
  background-size: cover;
  background-position: top center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Фиксация фона — движение, которого читатель не заказывал: при прокрутке
   картинка стоит, а текст едет по ней. Кому это мешает физически, тот уже
   сказал об этом системе, и мы её слушаем. Картинка остаётся, едет вместе
   со страницей. */
@media (prefers-reduced-motion: reduce) {
  body.post-type-archive-special { background-attachment: scroll; }
}

/* НА ТЕЛЕФОНЕ ФИКСАЦИИ НЕТ НИКОГДА — и это не про вкус. В iOS Safari
   background-attachment: fixed не поддерживается по-настоящему: браузер
   перерисовывает фон рывками при прокрутке, а на части версий кадр
   вообще растягивается по высоте всей страницы. Правило приехало вместе
   с включением фона на телефоне (19.09.2026) из «Дополнительных стилей».

   Граница 768 — та же, что у самой картинки в inc/specproekt.php: одно
   решение редакции, одно число в двух местах не разъезжается, потому
   что второе место — соседняя строка того же правила. */
@media (max-width: 768px) {
  body.post-type-archive-special { background-attachment: scroll; }
}