/*
 * LANDING V2 — ЧТО ВХОДИТ В ЗАПУСК, ЛИСТАМИ (вариант блока 4).
 * Макет: output/design/landing-v2/all-screens/04-scope-deliverables-v3-sheets.png.
 *
 * НАКЛОН — СВОЙСТВО rotate, А НЕ transform. Блок целиком живёт внутри
 * .lp-reveal, а появление секции двигает потомков через transform. Возьми
 * наклон оттуда же — и лист либо не появится, либо ляжет ровно. Отдельные
 * свойства rotate/scale независимы и не мешают анимации появления.
 *
 * ВЫДЕЛЕННЫЙ ЛИСТ поднимается над соседями масштабом и слоем, а не отдельной
 * вёрсткой: выделить можно любой из четырёх, и разметка от этого не меняется.
 */

.lp .lp-scope-v3 {
	--lp-sheet-bg: #151517;
	--lp-sheet-line: var(--lp-line-strong);

	position: relative;
	overflow-x: clip;
}

/* Чертёжный стол: сетка миллиметровки, гаснущая к низу. */
.lp .lp-scope-v3::before {
	position: absolute;
	inset: 0;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--lp-line) 1px, transparent 1px);
	background-size: 2.75rem 2.75rem;
	opacity: 0.12;
}

/* Насечка по нижнему краю стола — метка масштаба, не украшение. */
.lp .lp-scope-v3::after {
	position: absolute;
	right: 0;
	bottom: clamp(1rem, 2vw, 2rem);
	left: 0;
	height: 0.7rem;
	pointer-events: none;
	content: '';
	background-image: repeating-linear-gradient(90deg, var(--lp-line-strong) 0 1px, transparent 1px 2.75rem);
	opacity: 0.5;
}

/*
 * Подписи линейки масштаба. Стоят под насечкой, в тех же полях, что и
 * содержимое блока: линейка обязана совпасть с шириной стола, иначе она
 * измеряет не его.
 */
.lp .lp-scope-v3__scale {
	position: absolute;
	right: 0;
	bottom: clamp(0.35rem, 0.8vw, 0.85rem);
	left: 0;
	z-index: 1;
	display: none;
	justify-content: space-between;
	width: 100%;
	max-width: var(--lp-container);
	margin-inline: auto;
	padding-inline: var(--lp-gutter);
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-micro);
	letter-spacing: 0.12em;
	color: var(--lp-line-control);
	opacity: 0.5;
	pointer-events: none;
}

@media (min-width: 64em) {

	.lp .lp-scope-v3__scale {
		display: flex;
	}
}

/*
 * Обвязка канвы существует только вместе с канвой. Вне её этот слой стал бы
 * обычным элементом сетки блока и сдвинул бы колонки, а метки полей выпали
 * бы в поток простым текстом.
 */
.lp .lp-scope-v3__chrome {
	display: none;
}

.lp .lp-scope-v3__draft {
	--lp-draft-line-y: 8%;
	--lp-draft-line-x: 3%;
	--lp-draft-line-w: min(20%, 20rem);
	--lp-draft-cross-x: 96%;
	--lp-draft-cross-y: 10%;
}

.lp .lp-scope-v3__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
	gap: clamp(2rem, 1rem + 3.5vw, 5rem);
	align-items: center;
}

/* --- Левая колонка ----------------------------------------------------- */

.lp .lp-scope-v3__intro {
	display: grid;
	justify-items: start;
	gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
}

.lp .lp-scope-v3__eyebrow {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: var(--lp-text-label);
	font-weight: var(--lp-weight-medium);
	letter-spacing: var(--lp-tracking-label);
	text-transform: uppercase;
	color: var(--lp-ink-muted);
}

.lp .lp-scope-v3__eyebrow-num {
	font-family: var(--lp-font-num);
	color: var(--lp-crimson);
}

.lp .lp-scope-v3__title {
	max-width: none;
	margin: 0;
	font-size: clamp(2.25rem, 1.25rem + 3.4vw, 4rem);
	line-height: 0.94;
	text-wrap: initial;
}

.lp .lp-scope-v3__title-line {
	display: block;
}

.lp .lp-scope-v3__text {
	margin: 0;
	color: var(--lp-ink-muted);
}

.lp .lp-scope-v3__link {
	margin-top: clamp(0.5rem, 1.5vw, 1.5rem);
}

/* Компактное окно раскрывает детали, не уводя посетителя со страницы. */
.lp .lp-scope-v3__modal {
	width: min(calc(100% - (var(--lp-gutter) * 2)), 48rem);
	max-height: calc(100svh - (var(--lp-gutter) * 2));
	padding: clamp(1.25rem, 0.8rem + 1.6vw, 2.5rem);
	overflow: auto;
	color: var(--lp-ink);
	background: var(--lp-frame-surface);
	border: 1px solid var(--lp-line-control);
	box-shadow: var(--lp-frame-shadow);
}

.lp .lp-scope-v3__modal::backdrop {
	background: rgb(7 7 8 / 0.82);
	backdrop-filter: blur(8px);
}

.lp .lp-scope-v3__modal-close {
	position: absolute;
	top: var(--lp-space-sm);
	right: var(--lp-space-sm);
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	font-size: 2rem;
	line-height: 1;
	color: var(--lp-ink);
	background: transparent;
	border: 1px solid var(--lp-line-control);
	cursor: pointer;
}

.lp .lp-scope-v3__modal-title {
	margin: var(--lp-space-sm) 3rem 0 0;
}

.lp .lp-scope-v3__modal-lead {
	max-width: 38rem;
	margin-top: var(--lp-space-sm);
	color: var(--lp-ink-muted);
}

.lp .lp-scope-v3__modal-list {
	display: grid;
	gap: 0;
	margin: var(--lp-space-md) 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--lp-line-strong);
}

.lp .lp-scope-v3__modal-list li {
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: var(--lp-space-sm);
	padding-block: var(--lp-space-sm);
	border-bottom: 1px solid var(--lp-line-strong);
}

.lp .lp-scope-v3__modal-num {
	font-family: var(--lp-font-num);
	font-size: var(--lp-text-label);
	color: var(--lp-crimson);
}

.lp .lp-scope-v3__modal-list h3,
.lp .lp-scope-v3__modal-list p {
	margin: 0;
}

.lp .lp-scope-v3__modal-list h3 {
	font-size: var(--lp-text-body);
	text-transform: uppercase;
}

.lp .lp-scope-v3__modal-list p {
	margin-top: var(--lp-space-2xs);
	font-size: var(--lp-text-sm);
	line-height: 1.5;
	color: var(--lp-ink-muted);
}

/* --- Листы ------------------------------------------------------------- */

.lp .lp-scope-v3__sheets {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	/*
	 * Зазора у сетки нет: всё расстояние между листами задают их собственные
	 * поля. Иначе наезд пришлось бы считать как «поле минус зазор», а зазор
	 * плавающий — и число в правиле перестало бы значить то, что написано.
	 */
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.lp .lp-scope-v3__sheet {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-rows: auto 1fr;
	gap: clamp(0.9rem, 2vw, 1.5rem);
	padding: clamp(1rem, 0.5rem + 1.4vw, 1.9rem);
	background-color: var(--lp-sheet-bg);
	border: 1px solid var(--lp-sheet-line);
	rotate: var(--lp-tilt, 0deg);
	/*
	 * Тень матовая и прижатая: правило глубины дизайн-системы разрешает
	 * «массу, перекрытие и тонкую тень», но не парящие карточки. Без тени
	 * лист внахлёст читается не бумагой, а дыркой в соседе.
	 */
	box-shadow: 0 1.25rem 2.75rem -0.9rem rgb(0 0 0 / 0.62);
	transition: rotate var(--lp-duration) var(--lp-ease), scale var(--lp-duration) var(--lp-ease);
}

/*
 * СТОПКА, А НЕ ТАБЛИЦА. В макете листы лежат внахлёст: второй закрывает
 * край первого и четвёртого, четвёртый заходит на третий. Ровная сетка из
 * четырёх одинаковых ячеек читается таблицей — а блок про то, что работы
 * лежат на одном столе, а не расфасованы по клеткам.
 *
 * Наезд задан ОТРИЦАТЕЛЬНЫМИ ПОЛЯМИ, а не смещением: поле меняет и размер
 * листа, поэтому второй лист заодно становится крупнее остальных, как в
 * макете, — отдельной вёрстки под «большой лист» не нужно.
 *
 * Порядок слоёв позиционный и постоянный. Выделенный лист (класс
 * .is-featured) поднимается над всеми отдельно: выделить можно любой из
 * четырёх, и композиция от этого не должна перестраиваться.
 */
/*
 * Числа сняты с макета. По горизонтали листы почти только КАСАЮТСЯ — соседи
 * заходят друг на друга едва-едва. Главный нахлёст вертикальный: второй лист
 * поднят над рядом и свисает в нижний ряд, накрывая углы третьего и
 * четвёртого. Загони наезд по горизонтали глубже — и лист начнёт срезать
 * подпись соседа, а не лежать на нём.
 */
.lp .lp-scope-v3__sheet:nth-child(1) {
	--lp-tilt: -2.4deg;

	z-index: 1;
	margin: 0 0 1.5rem;
}

.lp .lp-scope-v3__sheet:nth-child(2) {
	--lp-tilt: 1.9deg;

	z-index: 4;
	/*
	 * Свес вниз ограничен НЕ на глаз: второй лист обязан накрыть верхний
	 * край четвёртого, но остановиться выше его номера и названия. Уйдёт
	 * глубже — и подпись соседа окажется под бумагой.
	 */
	margin: -3rem -1rem -1.5rem -0.75rem;
}

.lp .lp-scope-v3__sheet:nth-child(3) {
	--lp-tilt: -1.6deg;

	z-index: 2;
	margin: -0.5rem 1.5rem 0 0;
}

.lp .lp-scope-v3__sheet:nth-child(4) {
	--lp-tilt: 2.2deg;

	z-index: 3;
	margin: 2.25rem -1.5rem 0 -0.75rem;
}

/*
 * Уголки обреза одним псевдоэлементом: восемь несмасштабируемых полосок
 * фоном. Тот же приём, что у рамок этапов в блоке 3.
 */
.lp .lp-scope-v3__sheet::before {
	--lp-corner: 0.85rem;

	position: absolute;
	inset: 0.45rem;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line)),
		linear-gradient(var(--lp-sheet-line), var(--lp-sheet-line));
	background-repeat: no-repeat;
	background-position:
		0 0, 0 0,
		100% 0, 100% 0,
		0 100%, 0 100%,
		100% 100%, 100% 100%;
	background-size:
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px,
		1px var(--lp-corner), var(--lp-corner) 1px;
}

/*
 * Загнутый угол листа: верхний правый треугольник закрашивается цветом
 * стола, по диагонали идёт линия сгиба. Один градиент вместо картинки.
 */
.lp .lp-scope-v3__sheet::after {
	position: absolute;
	top: -1px;
	right: -1px;
	width: 1.6rem;
	height: 1.6rem;
	pointer-events: none;
	content: '';
	background-image:
		linear-gradient(
			45deg,
			transparent calc(50% - 0.5px),
			var(--lp-sheet-line) calc(50% - 0.5px),
			var(--lp-sheet-line) calc(50% + 0.5px),
			var(--lp-field) calc(50% + 0.5px)
		);
}

/* --- Готовый лист из файла --------------------------------------------- */

/*
 * Своя подложка заменяет лист целиком. Всё, что тема рисовала сама, здесь
 * снимается: заливка, рамка, уголки обреза и загнутый угол уже нарисованы
 * в файле, и вторая рамка поверх первой читалась бы браком, а не приёмом.
 *
 * Поле снимается с самой карточки и отдаётся подписи: лист обязан доходить
 * до края, иначе вокруг картинки повиснет пустая кайма.
 */
.lp .lp-scope-v3__sheet.has-own-sheet {
	padding: 0;
	background-color: transparent;
	border: 0;
	/*
	 * Тень уходит с карточки на сам лист. Карточка в ряду растягивается до
	 * высоты самого высокого соседа, а лист держит пропорции файла — тень,
	 * оставшись на карточке, обводила бы пустоту под листом.
	 */
	box-shadow: none;
}

.lp .lp-scope-v3__sheet.has-own-sheet::before,
.lp .lp-scope-v3__sheet.has-own-sheet::after {
	content: none;
}

/*
 * Поле над подписью урезано вдвое против обычного листа. У готового файла
 * своё пустое поле сверху, и оно НЕ резиновое: сложи два поля — и подпись
 * съедет на чертёж. Пустое поле самого файла и есть то место, ради которого
 * подпись поднимается выше.
 */
.lp .lp-scope-v3__sheet.has-own-sheet .lp-scope-v3__sheet-head {
	grid-row: 1;
	padding: clamp(0.6rem, 0.25rem + 0.7vw, 1rem) clamp(1rem, 0.5rem + 1.4vw, 1.9rem) 0;
}

/*
 * ДО 1200 px ПОДПИСЬ СТОИТ НАД ЛИСТОМ, А НЕ НА НЁМ. Пропорции листа заданы
 * файлом и не тянутся, а подпись на узкой карточке переносится в три строки:
 * положи её поверх — и она накроет чертёж, ради которого лист и нужен.
 * Наложение включается только там, где карточка заведомо шире подписи.
 */
.lp .lp-scope-v3__sheet-own {
	display: block;
	grid-row: 2;
	width: 100%;
	height: auto;
	aspect-ratio: var(--lp-sheet-ratio, auto);
	object-fit: cover;
	/*
	 * drop-shadow, а не box-shadow: у файла могут быть мягкие полупрозрачные
	 * края (у бордового листа они такие), и прямоугольная тень торчала бы
	 * из-под растворяющегося края. Фильтр повторяет форму по альфе.
	 */
	filter: drop-shadow(0 1.25rem 2.75rem rgb(0 0 0 / 0.55));
}

@media (min-width: 75em) {

	.lp .lp-scope-v3__sheet.has-own-sheet {
		aspect-ratio: var(--lp-sheet-ratio, auto);
	}

	.lp .lp-scope-v3__sheet.has-own-sheet .lp-scope-v3__sheet-head {
		position: relative;
		z-index: 1;
	}

	/*
	 * Лист лежит ПОД подписью и растянут по всей карточке. Пропорции карточки
	 * равны пропорциям файла, поэтому cover ничего не срезает — он здесь
	 * страховка на случай файла другой формы.
	 */
	.lp .lp-scope-v3__sheet-own {
		position: absolute;
		/*
		 * Привязка к ряду СНИМАЕТСЯ. Абсолютный потомок grid-контейнера, у
		 * которого задан grid-row, считает inset от своей ячейки, а не от
		 * карточки: лист лёг бы во вторую строку и не накрыл бы подпись.
		 */
		grid-row: auto;
		inset: 0;
		z-index: 0;
		height: 100%;
		aspect-ratio: auto;
	}
}

/* Выделенный лист: бордовая заливка, красный контур, слой поверх соседей. */
.lp .lp-scope-v3__sheet.is-featured {
	--lp-sheet-bg: var(--lp-burgundy-panel);
	--lp-sheet-line: var(--lp-crimson);

	z-index: 5;
	scale: 1.06;
	box-shadow: 0 1.75rem 3.5rem -0.9rem rgb(0 0 0 / 0.7);
}

.lp .lp-scope-v3__sheet.is-featured.has-own-sheet {
	box-shadow: none;
}

.lp .lp-scope-v3__sheet.is-featured .lp-scope-v3__sheet-own {
	filter: drop-shadow(0 1.75rem 3.5rem rgb(0 0 0 / 0.6));
}

.lp .lp-scope-v3__sheet-head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	gap: clamp(0.7rem, 1.5vw, 1.2rem);
}

.lp .lp-scope-v3__sheet-num {
	font-family: var(--lp-font-display);
	font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.8rem);
	font-weight: var(--lp-display-weight);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--lp-crimson);
}

.lp .lp-scope-v3__sheet.is-featured .lp-scope-v3__sheet-num {
	color: var(--lp-ink);
}

.lp .lp-scope-v3__sheet-caption {
	display: grid;
	min-width: 0;
	gap: 0.45rem;
}

.lp .lp-scope-v3__sheet-title {
	margin: 0;
	font-size: clamp(1.375rem, 1.1rem + 0.6vw, 1.75rem);
	line-height: 1.12;
	overflow-wrap: anywhere;
	text-wrap: balance;
	text-transform: uppercase;
}

.lp .lp-scope-v3__sheet-meta {
	margin: 0;
	font-size: var(--lp-text-sm);
	line-height: 1.35;
	color: var(--lp-ink-muted);
}

.lp .lp-scope-v3__sheet.is-featured .lp-scope-v3__sheet-meta {
	color: color-mix(in srgb, var(--lp-ink) 78%, transparent);
}

.lp .lp-scope-v3__sheet-art-box {
	display: grid;
	align-items: center;
	min-height: clamp(6rem, 12vw, 10rem);
	color: var(--lp-ink-muted);
}

.lp .lp-scope-v3__sheet.is-featured .lp-scope-v3__sheet-art-box {
	color: color-mix(in srgb, var(--lp-ink) 62%, transparent);
}

.lp .lp-scope-v3__art,
.lp .lp-scope-v3__sheet-image {
	display: block;
	width: 100%;
	height: auto;
}

.lp .lp-scope-v3__art .is-signal-fill {
	fill: var(--lp-crimson);
}

.lp .lp-scope-v3__sheet.is-featured .lp-scope-v3__art .is-signal-fill {
	fill: var(--lp-ink);
}

/* --- Узкие экраны ------------------------------------------------------ */

@media (max-width: 61.25em) {

	.lp .lp-scope-v3__inner {
		grid-template-columns: minmax(0, 1fr);
	}

	/*
	 * Стол сузился — стопка распадается на ровные листы. Наезд в двух
	 * тесных колонках съедает подписи соседа, а не создаёт глубину.
	 *
	 * Вместе с полями листов уходит и всё расстояние между ними, поэтому
	 * зазор здесь возвращается сетке: без него листы встают впритык и
	 * склеиваются в одно пятно.
	 */
	.lp .lp-scope-v3__sheets {
		gap: clamp(1rem, 0.4rem + 1.6vw, 2rem);
	}

	.lp .lp-scope-v3__sheet:nth-child(1),
	.lp .lp-scope-v3__sheet:nth-child(2),
	.lp .lp-scope-v3__sheet:nth-child(3),
	.lp .lp-scope-v3__sheet:nth-child(4) {
		margin: 0;
	}
}

/*
 * ТЕЛЕФОН. Макет: output/design/landing-v2/mobile/04-scope-mobile.png.
 *
 * Листы идут одной колонкой, но остаются СТОПКОЙ: каждый чуть развёрнут и
 * заходит нижним краем под следующий, бордовый второй лежит поверх соседей.
 * Ровная лента из четырёх одинаковых карточек читалась бы списком, а блок —
 * про комплект документов на одном столе. Наклон здесь втрое меньше, чем на
 * десктопе: на ширину телефона даже градус сдвигает угол листа на пять
 * пикселей, и больший наклон начал бы съедать поле страницы.
 *
 * Подпись лежит НА листе, в его пустом верхнем поле, как в макете. Выше
 * 640px (две колонки) она стоит над листом: там карточка вдвое уже, и
 * подпись в две-три строки накрыла бы чертёж.
 *
 * Кнопка «Полный состав работ» уходит под листы: сначала посетитель видит,
 * что входит, потом открывает подробности. Для этого колонка с заголовком
 * растворяется (display: contents), и её части встают в общую сетку блока
 * рядом с листами — перестановка без второй копии кнопки в разметке.
 */
@media (max-width: 40em) {

	.lp .lp-scope-v3__inner {
		row-gap: clamp(1rem, 0.6rem + 1.2vw, 1.75rem);
	}

	.lp .lp-scope-v3__intro {
		display: contents;
	}

	/*
	 * Уголок после пояснения — тот же знак, что закрывает заголовок блока 3.
	 * Пояснение прижато к своему тексту (justify-self), иначе уголок стоял бы
	 * у правого края экрана, далеко от строк, которые он замыкает.
	 */
	.lp .lp-scope-v3__text {
		position: relative;
		justify-self: start;
	}

	.lp .lp-scope-v3__text::after {
		position: absolute;
		right: -1.1rem;
		bottom: -0.55rem;
		width: 1.6rem;
		height: 1.6rem;
		content: '';
		border-right: 2px solid var(--lp-crimson);
		border-bottom: 2px solid var(--lp-crimson);
	}

	.lp .lp-scope-v3__sheets {
		order: 1;
		grid-template-columns: minmax(0, 1fr);
		gap: 0;
		width: 100%;
		max-width: 30rem;
		margin-block: 1.25rem 1rem;
	}

	.lp .lp-scope-v3__link {
		order: 2;
		justify-self: start;
		margin-top: 0;
	}

	/*
	 * Нахлёст — отрицательным полем сверху, как и на десктопе. Заходит лист
	 * только на пустое нижнее поле соседа: чертежи на файлах кончаются
	 * раньше, чем на седьмой части высоты от низа, так что чужой рисунок не
	 * закрывается. Слои остаются прежними: второй поверх всех, четвёртый
	 * поверх третьего.
	 */
	.lp .lp-scope-v3__sheet:nth-child(1) {
		--lp-tilt: -1.2deg;
	}

	.lp .lp-scope-v3__sheet:nth-child(2) {
		--lp-tilt: 1.3deg;

		margin: -0.65rem -0.3rem 0 0.3rem;
	}

	.lp .lp-scope-v3__sheet:nth-child(3) {
		--lp-tilt: -0.9deg;

		margin: -0.65rem 0.35rem 0 0;
	}

	.lp .lp-scope-v3__sheet:nth-child(4) {
		--lp-tilt: 1.1deg;

		margin: -0.65rem 0 0 0.35rem;
	}

	.lp .lp-scope-v3__sheet.is-featured {
		scale: 1.02;
	}

	/*
	 * Подпись поверх готового листа — те же правила, что на широком экране
	 * от 75em (см. выше): карточка берёт пропорции файла, файл ложится под
	 * подпись на всю карточку.
	 */
	.lp .lp-scope-v3__sheet.has-own-sheet {
		container-type: inline-size;
		aspect-ratio: var(--lp-sheet-ratio, auto);
	}

	.lp .lp-scope-v3__sheet-own {
		position: absolute;
		grid-row: auto;
		inset: 0;
		z-index: 0;
		height: 100%;
		aspect-ratio: auto;
	}

	/*
	 * ПОДПИСЬ МАСШТАБИРУЕТСЯ ВМЕСТЕ С ЛИСТОМ, А НЕ С ОКНОМ. Пустое поле над
	 * чертежом — доля картинки: у бордового листа окно начинается уже на 16%
	 * высоты, это 55px при ширине листа 350 и 45px при 280. Подпись в
	 * постоянных rem занимает ~53px — на iPhone она ложилась бы строкой на
	 * верхнюю кромку окна, а на узком Android накрывала бы её целиком.
	 *
	 * В единицах cqi (доля ширины самого листа) подпись занимает ~14.5%
	 * листа при любой его ширине — всегда меньше тех 16%. Пороги clamp
	 * держат читаемость: ниже 16/12px текст не опускается.
	 */
	.lp .lp-scope-v3__sheet.has-own-sheet .lp-scope-v3__sheet-head {
		position: relative;
		z-index: 1;
		padding: 2.4cqi 6.4cqi 0;
	}

	.lp .lp-scope-v3__sheet.has-own-sheet .lp-scope-v3__sheet-caption {
		gap: 0.6cqi;
	}

	.lp .lp-scope-v3__sheet.has-own-sheet .lp-scope-v3__sheet-title {
		font-size: clamp(1rem, 5.6cqi, 1.25rem);
		line-height: 1.1;
	}

	.lp .lp-scope-v3__sheet.has-own-sheet .lp-scope-v3__sheet-meta {
		font-size: clamp(0.75rem, 3.9cqi, 0.875rem);
		line-height: 1.3;
	}
}

/* ====================================================================== */
/* КАНВА МАКЕТА                                                           */
/* ====================================================================== */

/*
 * ВЁРСТКА ПО HANDOFF-МАКЕТУ «Реконструкция макета карточек».
 * Исходник: канва 1660×940, всё выставлено абсолютно в пикселях.
 *
 * КАК ПИКСЕЛИ МАКЕТА СТАНОВЯТСЯ РЕЗИНОВОЙ ВЁРСТКОЙ. Канва здесь — блок с
 * закреплённой пропорцией 1660/940, а все координаты переведены в проценты
 * от неё. Кегли заданы в cqw — долях ширины самой канвы, — поэтому вся
 * композиция масштабируется целиком и остаётся пропорцией макета при любой
 * ширине окна. Ни одного подобранного числа: каждое — это число из макета,
 * делённое на 1660 или на 940.
 *
 * ПОЧЕМУ НЕ ЖЁСТКИЕ 1660 px. Содержимое блока живёт в полях ACF, и владелец
 * вправе переписать заголовок. Жёсткая канва такой текст обрезала бы;
 * резиновая переносит строку.
 *
 * КАНВА ВКЛЮЧАЕТСЯ ТОЛЬКО ДЛЯ ЧЕТЫРЁХ ЛИСТОВ. Композиция макета собрана под
 * четыре карточки с ручной раскладкой: поставь владелец три — в канве
 * осталась бы дыра. Число листов приходит из PHP в data-lp-count, и при
 * любом другом значении блок остаётся на обычном потоке.
 */

@media (min-width: 75em) {

	.lp .lp-scope-v3__inner[data-lp-count="4"] {
		container-type: inline-size;
		display: block;
		/*
		 * Поля контейнера снимаются НАМЕРЕННО. Канва макета — самостоятельный
		 * чертёжный лист со своей рамкой в 14 px от края; общий отступ
		 * страницы дал бы вторую рамку вокруг первой. Проценты координат
		 * тогда же начинают считаться от полной ширины листа, как в макете.
		 */
		padding-inline: 0;
		aspect-ratio: 1660 / 940;
	}

	/* --- Чертёжная обвязка --------------------------------------------- */

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__chrome {
		position: absolute;
		inset: 0;
		display: block;
		pointer-events: none;
	}

	.lp .lp-scope-v3__frame,
	.lp .lp-scope-v3__rule,
	.lp .lp-scope-v3__notch,
	.lp .lp-scope-v3__cross,
	.lp .lp-scope-v3__mark {
		position: absolute;
	}

	/* Рамка листа: отступ 14 px от края канвы. */
	.lp .lp-scope-v3__frame {
		inset: 1.489% 0.843%;
		border: 1px solid rgb(255 255 255 / 0.1);
	}

	/* Вертикальная направляющая на 70 px и две горизонтали на 36 px. */
	.lp .lp-scope-v3__rule--v {
		top: 1.489%;
		bottom: 1.489%;
		left: 4.217%;
		width: 1px;
		background-color: rgb(255 255 255 / 0.1);
	}

	.lp .lp-scope-v3__rule--top,
	.lp .lp-scope-v3__rule--bottom {
		right: 0.843%;
		left: 0.843%;
		height: 1px;
	}

	.lp .lp-scope-v3__rule--top {
		top: 3.83%;
		background-color: rgb(255 255 255 / 0.055);
	}

	.lp .lp-scope-v3__rule--bottom {
		bottom: 3.83%;
		background-color: rgb(255 255 255 / 0.09);
	}

	/* Засечки верхней кромки: 275 и 1000 px от левого края канвы. */
	.lp .lp-scope-v3__notch {
		top: 1.489%;
		width: 1px;
		height: 2.34%;
		background-color: rgb(255 255 255 / 0.22);
	}

	.lp .lp-scope-v3__notch--a {
		left: 16.566%;
	}

	.lp .lp-scope-v3__notch--b {
		left: 60.241%;
	}

	/*
	 * Кресты привязки. Обе перекладины — фон одного элемента: заводить по
	 * два узла ради двух волосяных линий незачем.
	 */
	.lp .lp-scope-v3__cross {
		background-repeat: no-repeat;
		background-image:
			linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.18)),
			linear-gradient(rgb(255 255 255 / 0.18), rgb(255 255 255 / 0.18));
	}

	.lp .lp-scope-v3__cross--a {
		top: 20.426%;
		left: 89.036%;
		width: 1.084%;
		height: 1.809%;
		background-position: 0 47%, 44% 0;
		background-size: 100% 1px, 1px 100%;
	}

	.lp .lp-scope-v3__cross--b {
		top: 51.489%;
		left: 34.217%;
		width: 0.964%;
		height: 1.809%;
		background-position: 0 47%, 50% 0;
		background-size: 100% 1px, 1px 100%;
	}

	/* Метки по краям. Своя высота у каждой приходит из PHP. */
	.lp .lp-scope-v3__mark {
		top: var(--lp-t, 0);
		font-family: var(--lp-font-num);
		font-size: 0.663cqw;
		line-height: 1;
		letter-spacing: 0.04em;
		color: rgb(255 255 255 / 0.2);
	}

	.lp .lp-scope-v3__mark--left {
		left: 1.687%;
	}

	.lp .lp-scope-v3__mark--right {
		left: 97.711%;
	}

	.lp .lp-scope-v3__mark--left:first-of-type {
		color: rgb(255 255 255 / 0.3);
	}

	/* Линейка масштаба по нижней кромке. */
	/*
	 * Слой линейки раскрыт на всю канву, а не прижат к низу: проценты
	 * положения чисел считаются от ВЫСОТЫ слоя, и у прижатого к низу она
	 * была бы нулевой — все числа легли бы на самую кромку.
	 */
	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__scale {
		position: absolute;
		inset: 0;
		display: block;
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		opacity: 1;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__scale span {
		position: absolute;
		top: 98.298%;
		left: var(--lp-l, 0);
		font-size: 0.663cqw;
		line-height: 1;
		letter-spacing: 0;
		color: rgb(255 255 255 / 0.34);
	}

	/* --- Левая колонка -------------------------------------------------- */

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__intro {
		display: block;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__eyebrow {
		position: absolute;
		top: 12.021%;
		left: 7.108%;
		margin: 0;
		font-size: 0.843cqw;
		letter-spacing: 0.16em;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__title {
		position: absolute;
		top: 20.213%;
		left: 6.867%;
		width: 36.145%;
		max-width: none;
		margin: 0;
		font-size: 5.301cqw;
		line-height: 0.95;
		letter-spacing: 0.01em;
		/* Тень из макета: заголовок лежит поверх виньетки стола. */
		text-shadow: 0 2px 24px rgb(0 0 0 / 0.6);
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__text {
		position: absolute;
		top: 48.723%;
		left: 7.108%;
		width: 18.193%;
		max-width: none;
		margin: 0;
		font-size: 1.145cqw;
		line-height: 1.62;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__link {
		position: absolute;
		top: 70.745%;
		left: 7.108%;
		width: 21.205%;
		height: 5.957%;
		margin: 0;
		font-size: 0.843cqw;
		letter-spacing: 0.18em;
	}

	/* --- Стопка листов --------------------------------------------------- */

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheets {
		position: static;
		display: block;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet {
		position: absolute;
		top: var(--lp-y);
		left: var(--lp-x);
		width: var(--lp-w);
		height: var(--lp-h);
		min-height: 0;
		margin: 0;
		padding: 0;
		overflow: hidden;
		background: linear-gradient(150deg, #1e1e1e 0%, #181818 55%, #131313 100%);
		border: 1px solid rgb(255 255 255 / 0.14);
		box-shadow: 0 26px 60px rgb(0 0 0 / 0.6);
		rotate: var(--lp-tilt);
		scale: 1;
		aspect-ratio: auto;
	}

	/* Координаты и наклон каждого листа — из макета, один в один. */
	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet:nth-child(1) {
		--lp-x: 31.024%;
		--lp-y: 6.17%;
		--lp-w: 26.988%;
		--lp-h: 49.149%;
		--lp-tilt: -2.3deg;
		--lp-fill-h: 112%;
		--lp-head-x: 9.375%;
		--lp-head-y: 8%;

		z-index: 1;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet:nth-child(2) {
		--lp-x: 59.819%;
		--lp-y: 3.617%;
		--lp-w: 31.807%;
		--lp-h: 55%;
		--lp-tilt: 1.9deg;
		--lp-fill-h: 100%;
		--lp-head-x: 9.091%;
		/* У бордовой подложки чертёж начинается уже на 16% высоты. */
		--lp-head-y: 2%;

		z-index: 4;
		background: radial-gradient(120% 100% at 30% 20%, #6e2320 0%, #5c1b19 45%, #431311 100%);
		border-color: rgb(255 170 160 / 0.22);
		box-shadow: 0 34px 80px rgb(0 0 0 / 0.72);
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet:nth-child(3) {
		--lp-x: 32.53%;
		--lp-y: 53.83%;
		--lp-w: 28.434%;
		--lp-h: 40%;
		--lp-tilt: -2deg;
		--lp-fill-h: 116%;
		--lp-head-x: 9.322%;
		--lp-head-y: 7%;

		z-index: 2;
		background: linear-gradient(160deg, #1c1c1c 0%, #161616 60%, #111 100%);
		border-color: rgb(255 255 255 / 0.13);
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet:nth-child(4) {
		--lp-x: 60.964%;
		--lp-y: 59.787%;
		--lp-w: 36.867%;
		--lp-h: 35.106%;
		--lp-tilt: 1.7deg;
		--lp-fill-h: 118%;
		--lp-head-x: 9.15%;
		--lp-head-y: 10%;

		z-index: 3;
		background: linear-gradient(160deg, #1d1d1d 0%, #161616 55%, #101010 100%);
		border-color: rgb(255 255 255 / 0.13);
	}

	/*
	 * Готовый лист из файла растягивается по высоте на 112–118% и обрезается
	 * снизу — так в макете. Растяжение здесь не небрежность, а приём: оно
	 * освобождает сверху поле под номер и название, которого в самих файлах
	 * не хватает. У бордового листа поле своё, его растягивать не нужно.
	 */
	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet-own {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--lp-fill-h, 100%);
		object-fit: fill;
		aspect-ratio: auto;
		filter: none;
	}

	/* Подпись листа стоит там же, где в макете, и тем же кеглем. */
	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet-head {
		position: absolute;
		top: var(--lp-head-y);
		left: var(--lp-head-x);
		right: 7%;
		z-index: 1;
		gap: 0.9cqw;
		padding: 0;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet-num {
		font-size: clamp(2.75rem, 3.5cqw, 3.75rem);
		line-height: 1;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet-title {
		font-size: clamp(1.375rem, 1.7cqw, 1.75rem);
		line-height: 1.1;
		letter-spacing: 0.03em;
	}

	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet-meta {
		margin-top: 0;
		font-size: clamp(0.875rem, 1cqw, 1rem);
		line-height: 1.35;
	}

	/* Чертёж темы остаётся под подписью, если своего листа не загрузили. */
	.lp .lp-scope-v3__inner[data-lp-count="4"] .lp-scope-v3__sheet-art-box {
		position: absolute;
		inset: 34% 9% 8%;
	}
}

@media (prefers-reduced-motion: reduce) {

	.lp .lp-scope-v3__sheet {
		rotate: 0deg;
		transition: none;
	}

	.lp .lp-scope-v3__sheet.is-featured {
		scale: 1;
	}
}

/*
 * Анимация стопки: листы «ложатся» на стол по порядку. Начальная разметка
 * остаётся полностью видимой без JS, а класс .lp-js уже используется общим
 * наблюдателем появления секций.
 */
@media (prefers-reduced-motion: no-preference) {
	@keyframes lp-scope-sheet-in {
		from {
			opacity: 0;
			filter: blur(0.4rem);
		}
		to {
			opacity: 1;
			filter: blur(0);
		}
	}

	.lp-js .lp-scope-v3.is-visible .lp-scope-v3__sheet {
		animation: lp-scope-sheet-in 560ms var(--lp-ease-out) both;
		animation-delay: calc(var(--lp-i, 0) * 130ms);
		transition:
			translate 320ms var(--lp-ease-out),
			rotate var(--lp-duration) var(--lp-ease),
			scale var(--lp-duration) var(--lp-ease),
			box-shadow 320ms var(--lp-ease-out),
			border-color 220ms ease;
	}

	@media (hover: hover) and (pointer: fine) {
		.lp .lp-scope-v3__sheets .lp-scope-v3__sheet:hover {
			z-index: 5 !important;
			translate: 0 -0.45rem;
			border-color: var(--lp-crimson);
			box-shadow: 0 1.75rem 3.5rem -0.8rem rgb(0 0 0 / 0.78);
		}

		.lp .lp-scope-v3__sheet.has-own-sheet:hover {
			box-shadow: 0 0 0 1px var(--lp-crimson);
		}

		.lp .lp-scope-v3__sheet-own {
			transition: filter 320ms var(--lp-ease-out);
		}

		.lp .lp-scope-v3__sheet.has-own-sheet:hover .lp-scope-v3__sheet-own {
			filter: drop-shadow(0 1.25rem 2.75rem rgb(0 0 0 / 0.62)) brightness(1.07) saturate(1.04);
		}

		.lp .lp-scope-v3__sheet.is-featured:hover .lp-scope-v3__sheet-own {
			filter: drop-shadow(0 1.75rem 3.5rem rgb(0 0 0 / 0.68)) brightness(1.06) saturate(1.04);
		}
	}
}