/* ===== Page: Gallery ===== */

/* Глобально закрепим ширину картинок по требованию проекта */
.gal-hero img,
.grid-lab img,
.series-rail img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

/* ---- Section 1: Curated Series (hero mosaic) ---- */
.gal-hero {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #0f0f12 85%, transparent);
}
.gh-head {
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: center;
}
.gh-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.gh-lede {
	color: var(--muted);
}

.gh-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}
.gh-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.gh-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.gh-card.tall {
	grid-row: span 2;
}

.gh-copy {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 14px;
}
.gh-sub {
	font-size: 1.06rem;
	margin: 4px 0 8px;
}
.gh-bullets {
	list-style: none;
	padding: 0;
	margin: 10px 0 0;
	display: grid;
	gap: 6px;
	color: var(--muted);
}

/* ---- Section 2: Grid Lab ---- */
.grid-lab {
	padding: clamp(44px, 7vw, 88px) 0;
}
.gl-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.gl-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.gl-lede {
	color: var(--muted);
}

.gl-rail {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.gl-tile {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.gl-tile figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.gl-notes {
	margin-top: 14px;
	display: grid;
	gap: 8px;
	list-style: none;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gl-notes li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ---- Section 3: Series Rail (horizontal scroll) ---- */
.series-rail {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #101014 85%, transparent);
}
.sr-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.sr-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.sr-lede {
	color: var(--muted);
}

.sr-lane {
	margin-top: 18px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	overflow-x: auto;
	gap: 34px;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
}
.sr-lane::-webkit-scrollbar {
	height: 8px;
}
.sr-lane::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}

.sr-card {
	scroll-snap-align: start;
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	min-width: 240px;
}
.sr-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.sr-ghost {
	min-height: 120px;
	background: transparent;
	border: 1px dashed rgba(255, 255, 255, 0.06);
	border-radius: var(--radius);
}

.sr-tip {
	color: var(--muted);
	text-align: center;
	margin-top: 10px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.gh-grid {
		grid-template-columns: 1fr;
	}
	.gl-rail {
		grid-template-columns: 1fr 1fr;
	}
	.gl-notes {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 720px) {
	.gl-rail {
		grid-template-columns: 1fr;
	}
	.gl-notes {
		grid-template-columns: 1fr;
	}
}
.sr-card {
	min-width: 220px;
} /* было 240px — чуть плотнее */
@media (max-width: 420px) {
	.sr-card {
		min-width: 200px;
	}
}
/* ===== Section 4: Material Pairs ===== */
.material-pairs {
	padding: clamp(44px, 7vw, 88px) 0;
}
.mp-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.mp-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.mp-lede {
	color: var(--muted);
}
.mp-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.mp-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.mp-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mp-notes {
	margin-top: 14px;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mp-notes li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ===== Section 5: City Light Tests ===== */
.city-light {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #0f0f12 85%, transparent);
}
.cl-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.cl-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.cl-lede {
	color: var(--muted);
}

.cl-wrap {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 18px;
	align-items: start;
}
.cl-scene {
	position: relative;
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.cl-scene img {
	width: 100%;
	max-width: 350px;
	margin-inline: auto;
	display: block;
}
.cl-scene figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* световой слой (управляется через CSS-переменную) */
.cl-scene {
	--cl-intensity: 0.6;
}
.cl-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
			60% 60% at 30% 25%,
			rgba(255, 255, 255, calc(0.25 * var(--cl-intensity))) 0%,
			transparent 60%
		),
		radial-gradient(
			60% 60% at 80% 20%,
			rgba(255, 255, 255, calc(0.18 * var(--cl-intensity))) 0%,
			transparent 60%
		);
	mix-blend-mode: screen;
	transition: opacity 200ms ease;
	opacity: 0.9;
}

.cl-control {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 12px;
}
.cl-label {
	display: block;
	margin-bottom: 6px;
	color: var(--muted);
}
.cl-hint {
	color: var(--muted);
	font-size: 0.9rem;
	margin-top: 6px;
}

/* Слайдер (стили как на home для консистентности) */
.cl-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 10px;
	background: linear-gradient(currentColor 0 0) 0 / var(--p, 60%) 100% no-repeat,
		linear-gradient(#3a3a40, #3a3a40);
	color: #8a40ff;
	border-radius: 999px;
	cursor: pointer;
	outline: none;
}
.cl-range::-webkit-slider-runnable-track {
	height: 10px;
	background: transparent;
	border-radius: 999px;
}
.cl-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: currentColor;
	border: 0;
	box-shadow: 0 0 0 3px rgba(138, 64, 255, 0.22);
	margin-top: -3px;
}
.cl-range::-moz-range-track {
	height: 10px;
	background: #3a3a40;
	border-radius: 999px;
}
.cl-range::-moz-range-progress {
	height: 10px;
	background: currentColor;
	border-radius: 999px;
}
.cl-range::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 0;
	border-radius: 50%;
	background: currentColor;
	box-shadow: 0 0 0 3px rgba(138, 64, 255, 0.22);
}

/* ===== Section 6: Curator Picks Rail ===== */
.curator-picks {
	padding: clamp(44px, 7vw, 88px) 0;
}
.cp-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.cp-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.cp-lede {
	color: var(--muted);
}

.cp-lane {
	margin-top: 18px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	overflow-x: auto;
	gap: 14px;
	padding-bottom: 6px;
	scroll-snap-type: x mandatory;
}
.cp-lane::-webkit-scrollbar {
	height: 8px;
}
.cp-lane::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}

.cp-card {
	scroll-snap-align: start;
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	min-width: 240px;
}
.cp-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cp-ghost {
	min-height: 120px;
	background: transparent;
	border: 1px dashed rgba(255, 255, 255, 0.06);
	border-radius: var(--radius);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.mp-grid {
		grid-template-columns: 1fr 1fr;
	}
	.mp-notes {
		grid-template-columns: 1fr 1fr;
	}
	.cl-wrap {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 720px) {
	.mp-grid {
		grid-template-columns: 1fr;
	}
	.mp-notes {
		grid-template-columns: 1fr;
	}
}
.cp-card {
	min-width: 220px;
} /* было 240px */
@media (max-width: 420px) {
	.cp-card {
		min-width: 200px;
	}
}
/* Гарантируем лимит ширины изображений */
.room-corners img,
.shape-library img,
.hanging-heights img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

/* ===== Section 7: Room Corners ===== */
.room-corners {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #0f0f12 85%, transparent);
}
.rc-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.rc-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.rc-lede {
	color: var(--muted);
}

.rc-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.rc-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	position: relative;
}
.rc-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* диагональные смещения — ощущение «ступенек» */
.offset-a {
	transform: translateY(0);
}
.offset-b {
	transform: translateY(14px);
}
.offset-c {
	transform: translateY(28px);
}
[data-rcgrid] .rc-card {
	transition: transform 300ms ease, box-shadow var(--speed);
}
[data-rcgrid] .rc-card:hover {
	transform: translateY(-4px);
}

.rc-tips {
	margin-top: 14px;
	display: grid;
	gap: 8px;
	list-style: none;
	padding: 0;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.rc-tips li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ===== Section 8: Shape Library ===== */
.shape-library {
	padding: clamp(44px, 7vw, 88px) 0;
}
.sl-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.sl-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.sl-lede {
	color: var(--muted);
}

.sl-chips {
	margin-top: 8px;
	list-style: none;
	padding: 0;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: max-content;
	gap: 10px;
	justify-content: center;
}
.sl-chip {
	padding: 8px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	cursor: pointer;
	user-select: none;
	transition: background var(--speed), transform var(--speed),
		color var(--speed);
}
.sl-chip:hover {
	transform: translateY(-2px);
}
.sl-chip.is-active {
	background: var(--accent);
	color: #111;
	border-color: transparent;
}

.sl-figs {
	margin-top: 16px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.sl-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.sl-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== Section 9: Hanging Heights ===== */
.hanging-heights {
	padding: clamp(44px, 7vw, 88px) 0;
}
.hh-head {
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: center;
}
.hh-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.hh-lede {
	color: var(--muted);
}

.hh-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 16px;
	align-items: start;
}
.hh-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.hh-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.hh-copy {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 14px;
}
.hh-sub {
	font-size: 1.04rem;
	margin-bottom: 6px;
}
.hh-list {
	margin: 0;
	padding-left: 18px;
	color: var(--muted);
}
.hh-mini {
	margin-top: 10px;
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.hh-mini figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.rc-grid {
		grid-template-columns: 1fr 1fr;
	}
	.rc-tips {
		grid-template-columns: 1fr 1fr;
	}
	.sl-figs {
		grid-template-columns: 1fr;
	}
	.hh-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 720px) {
	.rc-grid {
		grid-template-columns: 1fr;
	}
	.rc-tips {
		grid-template-columns: 1fr;
	}
}
/* Гарантия лимита ширины */
.mono-duo img,
.paper-bench img,
.rooms-words img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

/* ===== Section 10: Mono vs Duo (drag split) ===== */
.mono-duo {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #101014 85%, transparent);
}
.md-head {
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: center;
}
.md-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.md-lede {
	color: var(--muted);
}

.md-stage {
	position: relative;
	margin-top: 18px;
	background: #0f0f12;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	max-width: 350px;
}
.md-frame {
	margin: 0;
	max-width: 350px;
}
.md-frame img {
	display: block;
	margin-inline: auto;
}
.md-frame.md-top {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.md-frame.md-top img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.md-range {
	position: absolute;
	inset: 0;
	max-width: 350px;
	height: 100%;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
	text-align: center;
}
.md-range::-webkit-slider-thumb {
	-webkit-appearance: none;
}
.md-range::-moz-range-thumb {
	border: 0;
}
.md-handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--accent);
	box-shadow: 0 0 0 3px rgba(202, 165, 116, 0.18);
	pointer-events: none;
}

.md-notes {
	margin-top: 12px;
	display: grid;
	gap: 8px;
	list-style: none;
	padding: 0;
	grid-template-columns: 1fr 1fr;
}
.md-notes li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ===== Section 11: Paper Bench ===== */
.paper-bench {
	padding: clamp(44px, 7vw, 88px) 0;
}
.pb-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.pb-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.pb-lede {
	color: var(--muted);
}

.pb-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
.pb-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.pb-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ===== Section 12: Rooms & Words ===== */
.rooms-words {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #0f0f12 85%, transparent);
}
.rw-head {
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: center;
}
.rw-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.rw-lede {
	color: var(--muted);
}

.rw-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	align-items: start;
}
.rw-note {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 14px;
	padding: 14px;
	color: var(--muted);
}
.rw-note blockquote {
	margin: 0 0 8px 0;
	color: var(--ink);
	font-style: italic;
}
.rw-meta {
	margin: 0;
	font-size: 0.95rem;
	color: var(--muted);
}

.rw-fig {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.rw-fig figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ---- Responsive (10–12) ---- */
@media (max-width: 1024px) {
	.md-notes {
		grid-template-columns: 1fr;
	}
	.pb-grid {
		grid-template-columns: 1fr 1fr;
	}
	.rw-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 720px) {
	.pb-grid {
		grid-template-columns: 1fr;
	}
}
/* Улучшаем UX drag */
.md-stage {
	cursor: ew-resize;
}
.md-stage.is-dragging {
	user-select: none;
}
/* чтобы наши pointer-события ловили весь блок, а не только «ползунок» */
.md-range {
	pointer-events: none;
} /* клавиатура по tab по-прежнему работает */
/* центрируем окно сравнения и задаём явную ширину */
.md-stage {
	position: relative;
	width: clamp(260px, 60vw, 350px); /* или просто 350px */
	margin: 18px auto 0; /* <-- центрирование */
	background: #0f0f12;
	border-radius: var(--radius);
	border: 1px solid rgba(255, 255, 255, 0.08);
	overflow: hidden;
	cursor: ew-resize;
}

/* внутренние элементы на всю ширину родителя */
.md-frame {
	margin: 0;
	width: 100%;
} /* убери max-width */
.md-range {
	position: absolute;
	inset: 0;
	width: 100%; /* вместо max-width */
	height: 100%;
	appearance: none;
	background: transparent;
	cursor: ew-resize;
	text-align: center;
	pointer-events: none; /* как мы делали ранее */
}
/* лимит ширины картинок */
.wall-sets img,
.frame-reel img,
.care-quickies img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

/* ===== Section 13: Limited Wall Sets ===== */
.wall-sets {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #101014 85%, transparent);
}
.ws-head {
	max-width: 900px;
	margin: 0 auto 18px;
	text-align: center;
}
.ws-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.ws-lede {
	color: var(--muted);
}

.ws-grid {
	margin-top: 18px;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}
.ws-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.ws-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.ws-tips {
	margin-top: 14px;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ws-tips li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ===== Section 14: Frame Workshop Reel ===== */
.frame-reel {
	padding: clamp(44px, 7vw, 88px) 0;
}
.fr-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.fr-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.fr-lede {
	color: var(--muted);
}

.fr-stage {
	margin-top: 18px;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
	align-items: start;
}
.fr-shot {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	opacity: 0.6;
	transform: translateY(6px);
	transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.fr-shot figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fr-shot.is-active {
	opacity: 1;
	transform: translateY(0);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

.fr-progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	display: flex;
	gap: 6px;
	justify-content: center;
}
.fr-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	transition: background var(--speed), transform var(--speed);
}
.fr-dot.is-on {
	background: var(--accent);
	transform: scale(1.15);
}

/* ===== Section 15: Care Quickies ===== */
.care-quickies {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #0f0f12 85%, transparent);
}
.cq-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.cq-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.cq-lede {
	color: var(--muted);
}

.cq-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.cq-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.cq-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cq-list {
	margin-top: 14px;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cq-list li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ---- Responsive (13–15) ---- */
@media (max-width: 1024px) {
	.ws-grid {
		grid-template-columns: 1fr 1fr;
	}
	.ws-tips {
		grid-template-columns: 1fr 1fr;
	}
	.fr-stage {
		grid-template-columns: 1fr;
	}
	.cq-grid {
		grid-template-columns: 1fr;
	}
	.cq-list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 720px) {
	.ws-grid {
		grid-template-columns: 1fr;
	}
	.ws-tips,
	.cq-list {
		grid-template-columns: 1fr;
	}
}
/* лимит ширины */
.color-notes img,
.loft-homes img,
.ship-cta img {
	max-width: 350px;
	width: 100%;
	height: auto;
}

/* ===== Section 16: Color Notes ===== */
.color-notes {
	padding: clamp(44px, 7vw, 88px) 0;
}
.cn-head {
	max-width: 880px;
	margin: 0 auto 18px;
	text-align: center;
}
.cn-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.cn-lede {
	color: var(--muted);
}

.cn-grid {
	margin-top: 18px;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, 1fr);
}
.cn-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.cn-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.cn-tips {
	margin-top: 14px;
	list-style: none;
	padding: 0;
	display: grid;
	gap: 8px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cn-tips li {
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px;
	color: var(--muted);
}

/* ===== Section 17: Loft Homes Reel ===== */
.loft-homes {
	padding: clamp(44px, 7vw, 88px) 0;
	background: linear-gradient(180deg, transparent, #101014 85%, transparent);
}
.lh-head {
	max-width: 860px;
	margin: 0 auto 18px;
	text-align: center;
}
.lh-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.lh-lede {
	color: var(--muted);
}

.lh-stage {
	margin-top: 18px;
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 16px;
}
.lh-shot {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
	opacity: 0.6;
	transform: translateY(6px);
	transition: opacity 300ms ease, transform 300ms ease, box-shadow 300ms ease;
}
.lh-shot figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.lh-shot.is-active {
	opacity: 1;
	transform: translateY(0);
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.35);
}

.lh-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10px;
	display: flex;
	gap: 6px;
	justify-content: center;
}
.lh-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.25);
	transition: background var(--speed), transform var(--speed);
}
.lh-dot.is-on {
	background: var(--accent);
	transform: scale(1.15);
}

/* ===== Section 18: Shipping Map + CTA ===== */
.ship-cta {
	padding: clamp(44px, 7vw, 88px) 0;
}
.sca-head {
	max-width: 880px;
	margin: 0 auto 18px;
	text-align: center;
}
.sca-title {
	font-family: Prata, serif;
	font-size: clamp(1.4rem, 3.2vw, 2.4rem);
	margin: 6px 0 8px;
}
.sca-lede {
	color: var(--muted);
}

.sca-grid {
	margin-top: 18px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.sca-card {
	background: linear-gradient(#17171b, #121216);
	border: 1px solid rgba(255, 255, 255, 0.07);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow);
}
.sca-card figcaption {
	padding: 10px 12px;
	color: var(--muted);
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.sca-cta {
	margin-top: 16px;
	display: flex;
	gap: 12px;
	justify-content: center;
}

/* ---- Responsive (16–18) ---- */
@media (max-width: 1024px) {
	.cn-grid {
		grid-template-columns: 1fr 1fr;
	}
	.cn-tips {
		grid-template-columns: 1fr 1fr;
	}
	.lh-stage {
		grid-template-columns: 1fr;
	}
	.sca-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 720px) {
	.cn-grid {
		grid-template-columns: 1fr;
	}
	.cn-tips {
		grid-template-columns: 1fr;
	}
}