/* ==========================================================================
   Scrollytelling: липкий фон + шаги. Всё поведение — на CSS-переменных,
   которые JS переставляет при смене активного шага.
   ========================================================================== */

.gd-scrolly {
	--gd-tx: 0%;
	--gd-ty: 0%;
	--gd-z: 1;
	--gd-ease: cubic-bezier(.22, .61, .36, 1);

	position: relative;
}

/* Липкий слой. Отрицательный margin убирает его из потока, чтобы шаги
   ложились поверх, а не после него. */
.gd-scrolly .gd-stage {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100dvh;
	margin-bottom: -100vh;
	margin-bottom: -100dvh;
	overflow: hidden;
	z-index: 0;
}

/* Двигаем и приближаем именно этот слой, а не .gd-stage — иначе сломается sticky. */
.gd-scrolly .gd-stage__img {
	position: absolute;
	inset: -2px; /* съедает щели по краям при субпиксельном масштабе */
	/* Это Elementor-контейнер: гасим его собственные ширину и min-height. */
	width: auto;
	height: auto;
	max-width: none;
	min-height: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Точка опоры неподвижна. Менять transform-origin нельзя: он не
	   анимируется, и картинка скачком перепрыгивала на каждом шаге. */
	transform-origin: center;
	transform: scale(var(--gd-z)) translate(var(--gd-tx), var(--gd-ty));
	transition: transform var(--gd-move, 1.6s) var(--gd-ease);
	will-change: transform;
}

/* Затемнение: без него текст не читается на светлых участках. */
.gd-scrolly .gd-stage__veil {
	position: absolute;
	inset: 0;
	width: auto;
	height: auto;
	max-width: none;
	min-height: 0;
	pointer-events: none;
}

/* --- Шаги ---------------------------------------------------------------- */

.gd-scrolly .gd-step {
	position: relative;
	z-index: 1;
	min-height: 100vh;
	min-height: 100dvh; /* dvh Elementor задать не умеет, поэтому здесь */
	box-sizing: border-box;
}

.gd-scrolly .gd-step__box {
	transition: opacity .8s var(--gd-ease), transform .8s var(--gd-ease);
}

/* Проявление блоков вешаем на класс, который ставит скрипт: если он не
   отработал (редактор, ошибка, старый браузер) — текст просто виден сразу. */
.gd-scrolly.gd-ready .gd-step__box {
	opacity: 0;
	transform: translateY(24px);
}

.gd-scrolly.gd-ready .gd-step.is-active .gd-step__box,
.gd-scrolly.gd-ready .gd-step.is-seen .gd-step__box {
	opacity: 1;
	transform: none;
}

/* Первый экран не прячем — он виден до начала скролла. */
.gd-scrolly.gd-ready .gd-hero .gd-step__box {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.gd-scrolly .gd-stage__img,
	.gd-scrolly .gd-step__box {
		transition: none;
	}
}

/* ==========================================================================
   Сноски — шорткод [extra_info]…[/extra_info] (см. inc/shortcodes.php).
   Звёздочка прячется, пояснение встаёт на её место прямо в строке.
   Имена классов — как на gru.dossier.center, включая closeDecript.
   Цвета: переопределяются переменными --gd-note-* (Site Settings → Custom CSS).
   ========================================================================== */

.descript {
	display: inline;
	/* Пока сноска закрыта, звёздочка не должна отрываться от слова. */
	white-space: nowrap;
}

.descript.is-open {
	white-space: normal;
}

.openDescript {
	display: inline-block;
	position: relative;
	top: -3px;
	margin: 0 -2px 0 -4px;
	padding: 0;
	border: 0;
	background: none;
	line-height: 0;
	cursor: pointer;
	color: var(--gd-note-marker, inherit); /* цвет текста: у button он не наследуется сам */
}

.openDescript:hover,
.openDescript:focus-visible {
	opacity: .7;
}

.descriptInfo {
	display: none;
	padding: .1em .35em;
	background: var(--gd-note-bg, rgba(127, 127, 127, .18)); /* читается и на светлом, и на тёмном */
	color: var(--gd-note-color, inherit);
}

.descript.is-open .openDescript {
	display: none;
}

.descript.is-open .descriptInfo {
	display: inline;
}

.closeDecript {
	margin: 0 0 0 4px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.3em;
	line-height: 0;
	position: relative;
	top: 2px;
	opacity: .5;
	cursor: pointer;
	color: inherit;
}

.closeDecript:hover,
.closeDecript:focus-visible {
	opacity: 1;
}

/* ==========================================================================
   Консольный курсор: класс gd-cursor на заголовке (или на его контейнере).
   Цвет меняется переменной --gd-cursor-color.
   ========================================================================== */

.gd-cursor:where(h1, h2, h3, h4, h5, h6, p, span)::after,
.gd-cursor :where(h1, h2, h3, h4, h5, h6, p, span)::after {
	content: "";
	display: inline-block;
	/* Размер задан в em — курсор масштабируется вместе с кеглем заголовка. */
	width: var(--gd-cursor-width, .5em);
	height: var(--gd-cursor-height, 1em);
	margin-left: var(--gd-cursor-gap, .15em);
	vertical-align: -.14em;
	background: var(--gd-cursor-color, #3cff7a);
	animation: gd-cursor-blink var(--gd-cursor-speed, 1.05s) steps(1) infinite;
}

@keyframes gd-cursor-blink {
	50% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gd-cursor:where(h1, h2, h3, h4, h5, h6, p, span)::after,
	.gd-cursor :where(h1, h2, h3, h4, h5, h6, p, span)::after {
		animation: none;
	}
}

/* ==========================================================================
   Таймлайн: класс gd-timeline на контейнере, gd-timeline__item на каждой вехе.
   Линия слева заполняется по мере скролла, кружки загораются при достижении.
   Цвет — --gd-timeline-color, иначе Accent из глобальной палитры.
   ========================================================================== */

.gd-timeline {
	--gd-progress: 0%;
	--gd-line: 2px;
	--gd-dot: 15px;
	--gd-gutter: 44px;

	position: relative;
	padding-left: var(--gd-gutter);
}

/* Непройденная часть линии. */
.gd-timeline::before,
.gd-timeline::after {
	content: "";
	position: absolute;
	left: calc(var(--gd-dot) / 2 - var(--gd-line) / 2);
	top: 0;
	width: var(--gd-line);
	border-radius: var(--gd-line);
}

.gd-timeline::before {
	bottom: 0;
	background: var(--gd-timeline-track, rgba(127, 127, 127, .35));
}

/* Пройденная — её высоту ведёт скрипт. */
.gd-timeline::after {
	height: var(--gd-progress);
	background: var(--gd-timeline-color, var(--e-global-color-accent, currentColor));
	transition: height .12s linear;
}

.gd-timeline .gd-timeline__item {
	position: relative;
}

.gd-timeline .gd-timeline__item::before {
	content: "";
	position: absolute;
	left: calc(var(--gd-gutter) * -1);
	top: .45em;
	z-index: 1;
	width: var(--gd-dot);
	height: var(--gd-dot);
	box-sizing: border-box;
	border: var(--gd-line) solid var(--gd-timeline-track, rgba(127, 127, 127, .55));
	border-radius: 50%;
	background: var(--gd-timeline-bg, #0d0d0d);
	transition: border-color .35s ease, background .35s ease, transform .35s ease;
}

.gd-timeline .gd-timeline__item.is-reached::before {
	border-color: var(--gd-timeline-color, var(--e-global-color-accent, currentColor));
	background: var(--gd-timeline-color, var(--e-global-color-accent, currentColor));
	transform: scale(1.15);
}

@media (max-width: 767px) {
	.gd-timeline {
		--gd-dot: 12px;
		--gd-gutter: 28px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.gd-timeline::after,
	.gd-timeline .gd-timeline__item::before {
		transition: none;
	}
}

/* ==========================================================================
   Наезд с переворотом. Разметка — три контейнера и две картинки:

     .gd-flip            (высота ~300vh)
       .gd-flip__stage   (липкий экран)
         .gd-flip__card  (кадр)
           image .gd-flip__front   — фото целиком
           image .gd-flip__zoom    — отзеркаленный фрагмент

   Затемнение и рамка зоны — псевдоэлементы кадра, отдельных блоков не нужно.
   Скрипт ведёт --gd-flip-p от 0 до 1 по мере прохождения блока через экран.
   ========================================================================== */

.gd-flip {
	--gd-flip-p: 0;
	/* Где на фото лежит фрагмент: левый край, верх, ширина. */
	--gd-flip-left: 49%;
	--gd-flip-top: 0%;
	--gd-flip-width: 35%;
	/* Высота считается из пропорций фрагмента, иначе object-fit срежет верх,
	   а там как раз надпись. */
	--gd-flip-ratio: 2.125;

	/* Пропорция исходного фото (ширина / высота) и поля вокруг кадра —
	   из них считается, насколько крупно кадр можно вписать в экран. */
	--gd-flip-photo-ratio: 1.5;
	--gd-flip-pad: 5vh;
	/* Кадр держится по центру экрана — эффект начинается, когда он в середине. */
	--gd-flip-stage-min: 100dvh;
	/* Пустые поля вокруг кадра блок съедает отрицательными margin: соседний
	   текст подтягивается вплотную. Величину считает скрипт, доля — здесь. */
	--gd-flip-pull: 0px;
	--gd-flip-pull-ratio: 1;
	/* На сколько блок вылезает за колонку с каждой стороны. Колонку и текст
	   вокруг это не трогает: расширяется только сам блок.
	   На всю ширину экрана — calc(50vw - 50%). */
	--gd-flip-bleed: 0px;
	/* Доля прокрутки блока, за которую эффект отыгрывается целиком.
	   Меньше значение — быстрее финал. */
	--gd-flip-finish: 0.55;
	/* Доля прокрутки на разворот фрагмента. Почти ноль — переворот
	   проскакивает незаметно, видно только увеличение. Вернуть видимый
	   разворот: --gd-flip-turn-until: 0.45. */
	--gd-flip-turn-until: 0.02;

	--gd-flip-scale: 1;
	--gd-flip-turn: 180deg;
	--gd-flip-tx: 0%;
	--gd-flip-ty: 0%;

	position: relative;
	z-index: 1; /* кадр проходит поверх подтянувшегося текста */
	/* Блок наезжает на соседний текст отрицательными полями, поэтому его
	   пустые зоны не должны перехватывать клики: иначе ссылки и сноски
	   под блоком становятся ненажимаемыми. */
	pointer-events: none;
	width: calc(100% + var(--gd-flip-bleed) * 2);
	max-width: none;
	margin-left: calc(var(--gd-flip-bleed) * -1);
	margin-right: calc(var(--gd-flip-bleed) * -1);
	margin-top: calc(var(--gd-flip-pull) * -1);
	margin-bottom: calc(var(--gd-flip-pull) * -1);
}

.gd-flip .gd-flip__stage {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: var(--gd-flip-stage-min);
	box-sizing: border-box;
	overflow: hidden;
}

/* Кадр занимает столько, сколько влезает: ограничен и шириной контейнера,
   и высотой экрана — поэтому пустых полей остаётся минимум. */
.gd-flip .gd-flip__card {
	position: relative;
	pointer-events: auto;
	width: min(
		100%,
		calc((100dvh - var(--gd-flip-pad) * 2) * var(--gd-flip-photo-ratio))
	);
	max-height: calc(100dvh - var(--gd-flip-pad) * 2);
	overflow: hidden;
}

/* Затемнение исходного кадра — проявляется по мере роста фрагмента. */
.gd-flip .gd-flip__card::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: var(--gd-flip-veil, #000);
	opacity: calc(var(--gd-flip-p) * 0.72);
	pointer-events: none;
}

/* Рамка зоны — подсказка, откуда растёт фрагмент; гаснет сразу. */
.gd-flip .gd-flip__card::after {
	content: "";
	position: absolute;
	left: var(--gd-flip-left);
	top: var(--gd-flip-top);
	width: var(--gd-flip-width);
	aspect-ratio: var(--gd-flip-ratio);
	z-index: 3;
	border: 2px solid var(--gd-flip-frame, #c1121f);
	opacity: calc(1 - var(--gd-flip-p) * 6);
	pointer-events: none;
}

.gd-flip .gd-flip__front {
	position: relative;
	z-index: 0;
	width: 100%;
}

.gd-flip .gd-flip__front img {
	display: block;
	width: 100%;
	height: auto;
}

/* Фрагмент: стоит в своей зоне, растёт и едет к центру кадра. */
.gd-flip .gd-flip__zoom {
	position: absolute;
	left: var(--gd-flip-left);
	top: var(--gd-flip-top);
	width: var(--gd-flip-width);
	aspect-ratio: var(--gd-flip-ratio);
	z-index: 2;
	overflow: hidden;
	box-sizing: border-box;
	transform-origin: 50% 50%;
	/* Порядок важен: сдвиг считается во внешней системе координат, поэтому
	   фрагмент едет к центру ровно на столько, сколько посчитал скрипт. */
	transform: translate(var(--gd-flip-tx), var(--gd-flip-ty)) scale(var(--gd-flip-scale));
	will-change: transform;
	backface-visibility: hidden;
	/* Толщина рамки и тень делятся на масштаб — иначе растолстеют вместе с
	   картинкой. */
	border: calc(2px / var(--gd-flip-scale)) solid
		rgba(255, 255, 255, calc(var(--gd-flip-p) * 0.85));
	box-shadow:
		0 calc(10px / var(--gd-flip-scale)) calc(40px / var(--gd-flip-scale))
		rgba(0, 0, 0, calc(var(--gd-flip-p) * 0.6));
}

/* Обёртки виджета Elementor между блоком и картинкой нужно растянуть. */
.gd-flip .gd-flip__zoom > *,
.gd-flip .gd-flip__zoom .elementor-widget-container,
.gd-flip .gd-flip__zoom figure {
	height: 100%;
	margin: 0;
}

.gd-flip .gd-flip__zoom img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: rotateY(var(--gd-flip-turn));
	transform-origin: 50% 50%;
}

@media (prefers-reduced-motion: reduce) {
	/* Скрипт сразу выставляет итоговое состояние, поэтому transform нужен;
	   убираем только плавность. */
	.gd-flip .gd-flip__zoom,
	.gd-flip .gd-flip__zoom img {
		transition: none;
	}
}

/* ==========================================================================
   Типографика материала: подписи, цитаты, ссылки.
   Цвет акцента — --gd-accent, по умолчанию красный #d50000.
   ========================================================================== */

.gd-accent-scope,
:root {
	--gd-accent: #d50000;
}

/* --- Подписи к фото и галереям ------------------------------------------- */

/* Специфичность нарочно высокая: Elementor красит подпись правилом из двух
   классов и подключает свой CSS после темы — при равном весе выигрывает он. */
figcaption,
.wp-caption-text,
.gd-caption,
.elementor-widget.elementor-widget-image figcaption.widget-image-caption,
.elementor-widget.elementor-widget-image figcaption.wp-caption-text,
.elementor-widget.elementor-widget-image-gallery .gallery-caption,
.elementor-widget.elementor-widget-gallery .elementor-gallery-item__description,
.elementor-widget.elementor-widget-text-editor.gd-caption,
.elementor-widget.elementor-widget-text-editor.gd-caption p {
	font-style: normal;
	font-size: 13px;
	line-height: 1.4;
}

/* --- Цитата -------------------------------------------------------------- */

blockquote,
.elementor-widget-blockquote blockquote,
.elementor-blockquote {
	font-style: italic;
	font-size: 1.07em;
	font-weight: 500;
	border-left: 4px solid rgba(213, 0, 0, .5);
	padding-left: 1em;
	margin-left: 40px;
}

/* Внутренние абзацы не должны множить увеличение. */
blockquote p,
.elementor-blockquote p {
	font-size: inherit;
	font-style: inherit;
}

/* --- Ссылки в тексте ----------------------------------------------------- */

.elementor-widget-text-editor a,
.elementor-widget-theme-post-content a,
.gd-step__box a,
.gd-timeline__item a,
.descriptInfo a {
	color: var(--gd-accent, #d50000);
	/* Линия рисуется подчёркиванием, а не border: только оно умеет
	   разрываться под хвостами букв (р, у, д, ц). */
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-skip-ink: auto;
}

.elementor-widget-text-editor a:hover,
.elementor-widget-theme-post-content a:hover,
.gd-step__box a:hover,
.gd-timeline__item a:hover,
.descriptInfo a:hover {
	text-decoration-thickness: 2px;
}

/* ==========================================================================
   Оглавление статьи. В Elementor достаточно пустого контейнера .gd-nav —
   список строит скрипт по разделам страницы (.gd-chapter и .gd-section).
   ========================================================================== */

.gd-nav {
	--gd-nav-bg: #0d0d0d;
	--gd-nav-ink: #e8e3e3;
	--gd-nav-dim: rgba(232, 227, 227, .6);
	--gd-nav-active: var(--gd-accent, #d50000);
	/* Полоса примерно в пятую часть экрана, но в разумных пределах. */
	--gd-nav-width: clamp(240px, 20vw, 420px);

	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: var(--gd-nav-width);
	z-index: 60;
	background: var(--gd-nav-bg);
	color: var(--gd-nav-ink);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 56px 20px 24px;
	box-sizing: border-box;
	/* Стартовое положение — за краем экрана. Анимация включается только
	   после инициализации, иначе при загрузке видно, как панель уезжает. */
	transform: translateX(100%);
}

.gd-nav.is-ready {
	transition: transform .28s ease;
}

.gd-nav.is-in {
	transform: none;
}

.gd-nav[hidden] {
	display: none;
}

/* Пока панель убрана, клики сквозь неё проходят к тексту. */
.gd-nav:not(.is-in) {
	pointer-events: none;
}

.gd-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.gd-nav a {
	color: inherit;
	text-decoration: none;
	display: block;
	padding: 3px 0;
}

.gd-nav a:hover {
	color: var(--gd-nav-active);
}

/* Глава: строка с заголовком и кнопкой сворачивания. */
.gd-nav__head {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.gd-nav__head > a {
	flex: 1 1 auto;
	font-weight: 600;
}

.gd-nav__item + .gd-nav__item {
	margin-top: 10px;
}

/* Плюс-минус: две палочки, вертикальная прячется в раскрытом состоянии. */
.gd-nav__toggle {
	flex: 0 0 auto;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	color: inherit;
	opacity: .6;
}

.gd-nav__toggle:hover {
	opacity: 1;
}

.gd-nav__toggle::before,
.gd-nav__toggle::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	background: currentColor;
	transform: translate(-50%, -50%);
	transition: transform .2s ease;
}

.gd-nav__toggle::before {
	width: 11px;
	height: 1.5px;
}

.gd-nav__toggle::after {
	width: 1.5px;
	height: 11px;
}

.gd-nav__toggle[aria-expanded="true"]::after {
	transform: translate(-50%, -50%) scaleY(0);
}

/* Подглавы. */
.gd-nav__sub {
	margin: 4px 0 0;
	padding-left: 14px;
}

.gd-nav__sub a {
	font-size: .92em;
	color: var(--gd-nav-dim);
}

.gd-nav__sub[hidden] {
	display: none;
}

/* Активный пункт — тот раздел, вдоль которого читатель сейчас идёт. */
/* Куда встаёт заголовок при переходе по ссылке меню. */
.gd-anchor {
	scroll-margin-top: var(--gd-anchor-offset, 20px);
}

.gd-nav a.is-current {
	color: var(--gd-nav-active);
}

.gd-nav__sub a.is-current {
	color: var(--gd-nav-active);
}

/* Крестик и бургер. */
.gd-nav__close,
.gd-nav__burger {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: .7;
}

.gd-nav__close:hover,
.gd-nav__burger:hover {
	opacity: 1;
}

.gd-nav__close::before,
.gd-nav__close::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 16px;
	height: 1.5px;
	background: currentColor;
}

.gd-nav__close::before {
	transform: translate(-50%, -50%) rotate(45deg);
}

.gd-nav__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

.gd-nav__burger {
	position: fixed;
	top: 12px;
	right: 16px;
	z-index: 70;
	color: var(--gd-nav-ink);
	background: var(--gd-nav-bg);
	border-radius: 2px;
}

.gd-nav__burger[hidden] {
	display: none;
}

.gd-nav__burger span {
	position: absolute;
	left: 50%;
	height: 1.5px;
	background: currentColor;
	transform: translateX(-50%);
}

.gd-nav__burger span:nth-child(1) { width: 18px; top: 11px; }
.gd-nav__burger span:nth-child(2) { width: 13px; top: 16px; }
.gd-nav__burger span:nth-child(3) { width: 9px;  top: 21px; }

@media (max-width: 1024px) {
	.gd-nav {
		--gd-nav-width: min(320px, 86vw);
	}
}

@media (max-width: 767px) {
	.gd-nav {
		--gd-nav-width: 100%;
		padding: 56px 16px 24px;
	}
}

/* ==========================================================================
   Сброс кнопок-иконок.

   Родительская тема красит любые button: рамка и цвет #c36, свои состояния
   при наведении. Наши кнопки — звёздочка сноски, плюс-минус, крестик,
   бургер — не кнопки в этом смысле, а иконки. Селекторы намеренно
   продублированы (.foo.foo): это поднимает вес выше, чем у button:hover
   родителя, и позволяет обойтись без !important.
   ========================================================================== */

.openDescript.openDescript,
.closeDecript.closeDecript,
.gd-nav__toggle.gd-nav__toggle,
.gd-nav__close.gd-nav__close,
.gd-nav__burger.gd-nav__burger,
.openDescript.openDescript:hover,
.closeDecript.closeDecript:hover,
.gd-nav__toggle.gd-nav__toggle:hover,
.gd-nav__close.gd-nav__close:hover,
.gd-nav__burger.gd-nav__burger:hover,
.openDescript.openDescript:focus,
.closeDecript.closeDecript:focus,
.gd-nav__toggle.gd-nav__toggle:focus,
.gd-nav__close.gd-nav__close:focus,
.gd-nav__burger.gd-nav__burger:focus,
.openDescript.openDescript:active,
.closeDecript.closeDecript:active,
.gd-nav__toggle.gd-nav__toggle:active,
.gd-nav__close.gd-nav__close:active,
.gd-nav__burger.gd-nav__burger:active {
	background-color: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	font: inherit;
	line-height: 0;
	white-space: normal;
}

/* Бургер лежит поверх текста, ему подложка нужна. */
.gd-nav__burger.gd-nav__burger,
.gd-nav__burger.gd-nav__burger:hover,
.gd-nav__burger.gd-nav__burger:focus {
	background-color: var(--gd-nav-bg, #0d0d0d);
	border-radius: 2px;
}

/* Видимый фокус с клавиатуры не убираем — только его чужую окраску. */
.openDescript.openDescript:focus-visible,
.closeDecript.closeDecript:focus-visible,
.gd-nav__toggle.gd-nav__toggle:focus-visible,
.gd-nav__close.gd-nav__close:focus-visible,
.gd-nav__burger.gd-nav__burger:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ==========================================================================
   Фон глав на узких экранах.

   Attachment в Elementor не адаптивный — одно значение на все устройства,
   поэтому правим стилями. На телефоне и планшете контейнер главы в разы
   выше, и cover растягивает текстуру по высоте, превращая её в размытое
   пятно; fixed вдобавок ломается в мобильных браузерах. Текстуру правильнее
   замостить в исходном масштабе.

   Если фоном стоит фотография, а не текстура, задайте контейнеру
   --gd-bg-mobile: cover и --gd-bg-repeat-mobile: no-repeat.

   !important здесь необходим: Elementor выводит настройки фона инлайном.
   ========================================================================== */

@media (max-width: 1024px) {
	.gd-chapter,
	.gd-chapter-body {
		background-size: var(--gd-bg-mobile, auto) !important;
		background-repeat: var(--gd-bg-repeat-mobile, repeat) !important;
		background-attachment: scroll !important;
	}
}

/* ==========================================================================
   Видео вместо гифок: виджет Video, источник Self Hosted, с автозапуском,
   без контролов. Ведёт себя как анимация, но весит в разы меньше.
   ========================================================================== */

.elementor-widget-video video {
	display: block;
	width: 100%;
	height: auto;
}

/* Без контролов это картинка, а не плеер — курсор не должен обещать клик. */
.elementor-widget-video video:not([controls]) {
	cursor: default;
}