.dlh-portrait-carousel {
	--dlh-gold: #c5a059;
	--dlh-black: #050505;
	--dlh-white: #fff;
	--dlh-transition-speed: 1100ms;
	--dlh-carousel-interval: 5500ms;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: clamp(2rem, 6vw, 6rem) auto;
	margin-right: auto !important;
	margin-left: auto !important;
	color: var(--dlh-white);
	font-family: Montserrat, Arial, sans-serif;
}

.dlh-portrait-carousel *,
.dlh-portrait-carousel *::before,
.dlh-portrait-carousel *::after {
	box-sizing: border-box;
}

.dlh-portrait-carousel.alignfull {
	max-width: none;
}

.dlh-carousel-stage {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(circle at 15% 5%, rgba(197, 160, 89, 0.08), transparent 27%),
		var(--dlh-black);
	box-shadow: 0 34px 100px rgba(0, 0, 0, 0.48);
	isolation: isolate;
}

.dlh-carousel-stage::before,
.dlh-carousel-stage::after {
	position: absolute;
	z-index: 5;
	right: 0;
	left: 0;
	height: clamp(16px, 2.4vw, 34px);
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.82), transparent);
	content: "";
	pointer-events: none;
}

.dlh-carousel-stage::before { top: 0; border-top: 1px solid rgba(197, 160, 89, 0.7); }
.dlh-carousel-stage::after { bottom: 0; transform: rotate(180deg); }

.dlh-carousel-track {
	position: relative;
	aspect-ratio: 4 / 5;
	max-height: min(82vh, 980px);
	min-height: 440px;
	overflow: hidden;
	touch-action: pan-y;
}

.dlh-ratio-tall .dlh-carousel-track { aspect-ratio: 2 / 3; }
.dlh-ratio-landscape .dlh-carousel-track { aspect-ratio: 16 / 10; }

.dlh-carousel-slide {
	position: absolute;
	inset: 0;
	display: grid;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition:
		opacity var(--dlh-transition-speed) cubic-bezier(0.22, 1, 0.36, 1),
		visibility 0s linear var(--dlh-transition-speed);
	pointer-events: none;
}

.dlh-carousel-slide.is-active {
	z-index: 1;
	opacity: 1;
	visibility: visible;
	transition-delay: 0s;
	pointer-events: auto;
}

.dlh-carousel-image-wrap {
	position: relative;
	display: grid;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: #020202;
	isolation: isolate;
	place-items: center;
}

.dlh-carousel-image-wrap::before {
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(115deg, rgba(197, 160, 89, 0.06), transparent 28%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0.08), transparent 34%, rgba(0, 0, 0, 0.2));
	content: "";
	pointer-events: none;
}

.dlh-carousel-image-wrap::after {
	position: absolute;
	z-index: 3;
	inset: 0;
	background:
		radial-gradient(ellipse at center, transparent 42%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.62) 115%),
		linear-gradient(to right, rgba(0, 0, 0, 0.14), transparent 14%, transparent 86%, rgba(0, 0, 0, 0.14));
	content: "";
	pointer-events: none;
}

.dlh-portrait-carousel .dlh-carousel-ambient {
	position: absolute;
	z-index: 0;
	inset: -8%;
	display: block;
	width: 116% !important;
	max-width: none !important;
	height: 116% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 0;
	object-fit: cover !important;
	object-position: 50% 50% !important;
	filter: blur(34px) brightness(0.32) saturate(0.78);
	transform: scale(1.1);
	transition: opacity var(--dlh-transition-speed) ease;
}

.dlh-portrait-carousel.has-ambient-backdrop .dlh-carousel-slide.is-active .dlh-carousel-ambient {
	opacity: 0.62;
	animation: dlh-ambient-breathe var(--dlh-carousel-interval) ease-out forwards;
}

.dlh-portrait-carousel .dlh-carousel-image {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: block;
	width: 100% !important;
	max-width: none !important;
	height: 100% !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	opacity: 1;
	object-fit: contain !important;
	object-position: 50% 50% !important;
	transform: scale(1);
	transform-origin: 50% 50%;
	will-change: transform, opacity, filter;
}

.dlh-portrait-carousel.dlh-fit-cover .dlh-carousel-image { object-fit: cover !important; }

.dlh-portrait-carousel.has-cinematic-motion .dlh-carousel-slide.is-active .dlh-carousel-image {
	animation: dlh-cinematic-settle var(--dlh-carousel-interval) cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes dlh-cinematic-settle {
	0% {
		opacity: 0.08;
		filter: brightness(0.72) contrast(0.96) blur(2px);
		transform: scale(1.045);
	}
	18% {
		opacity: 1;
		filter: brightness(1) contrast(1) blur(0);
	}
	100% {
		opacity: 1;
		filter: brightness(1) contrast(1) blur(0);
		transform: scale(1);
	}
}

@keyframes dlh-ambient-breathe {
	from {
		opacity: 0.34;
		transform: scale(1.14);
	}
	to {
		opacity: 0.62;
		transform: scale(1.1);
	}
}

.dlh-carousel-caption {
	position: absolute;
	z-index: 4;
	right: clamp(1rem, 4vw, 3.5rem);
	bottom: clamp(5.2rem, 9vw, 7rem);
	left: clamp(1rem, 4vw, 3.5rem);
	max-width: 42rem;
	padding: 0.85rem 1.1rem;
	border-left: 1px solid var(--dlh-gold);
	background: rgba(5, 5, 5, 0.68);
	color: rgba(255, 255, 255, 0.92);
	font-family: "Playfair Display", Georgia, serif;
	font-size: clamp(0.9rem, 1.4vw, 1.12rem);
	line-height: 1.45;
	backdrop-filter: blur(10px);
}

.dlh-carousel-controls {
	position: absolute;
	z-index: 7;
	right: clamp(0.8rem, 3vw, 2.5rem);
	bottom: clamp(0.8rem, 3vw, 2.5rem);
	left: clamp(0.8rem, 3vw, 2.5rem);
	display: grid;
	grid-template-columns: 3.1rem minmax(7rem, 1fr) 3.1rem 3.1rem;
	gap: 0.45rem;
	align-items: center;
}

.dlh-carousel-arrow,
.dlh-carousel-play {
	display: grid;
	width: 3.1rem;
	height: 3.1rem;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 0;
	background: rgba(5, 5, 5, 0.72);
	color: var(--dlh-white);
	font: inherit;
	cursor: pointer;
	place-items: center;
	backdrop-filter: blur(10px);
	transition: border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.dlh-carousel-arrow:hover,
.dlh-carousel-arrow:focus-visible,
.dlh-carousel-play:hover,
.dlh-carousel-play:focus-visible {
	border-color: var(--dlh-gold);
	background: var(--dlh-gold);
	color: var(--dlh-black);
	outline: none;
}

.dlh-carousel-arrow span { font-size: 1.2rem; line-height: 1; }

.dlh-carousel-position {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	height: 3.1rem;
	padding: 0 1rem;
	background: rgba(5, 5, 5, 0.72);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	backdrop-filter: blur(10px);
}

.dlh-carousel-divider { width: min(8vw, 5rem); height: 1px; background: rgba(255, 255, 255, 0.3); }
.dlh-carousel-current { color: var(--dlh-gold); }

.dlh-play-icon {
	width: 0;
	height: 0;
	margin-left: 2px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 8px solid currentColor;
}

.dlh-carousel-play[aria-pressed="true"] .dlh-play-icon {
	width: 8px;
	height: 11px;
	margin-left: 0;
	border: 0;
	border-right: 3px solid currentColor;
	border-left: 3px solid currentColor;
}

.dlh-carousel-thumbnails {
	position: relative;
	display: flex;
	gap: clamp(0.4rem, 1vw, 0.75rem);
	margin-top: clamp(0.7rem, 1.5vw, 1rem);
	padding: 0.35rem 0 0.7rem;
	overflow-x: auto;
	scrollbar-color: var(--dlh-gold) transparent;
	scrollbar-width: thin;
	scroll-snap-type: x proximity;
	justify-content: safe center;
}

.dlh-carousel-thumbnail {
	position: relative;
	flex: 0 0 clamp(62px, 8vw, 96px);
	aspect-ratio: 4 / 5;
	padding: 0;
	overflow: hidden;
	border: 0;
	background: var(--dlh-black);
	opacity: 0.42;
	cursor: pointer;
	scroll-snap-align: start;
	transition: opacity 200ms ease, transform 200ms ease;
}

.dlh-carousel-thumbnail:hover,
.dlh-carousel-thumbnail:focus-visible,
.dlh-carousel-thumbnail.is-active {
	opacity: 1;
	transform: translateY(-3px);
	outline: none;
}

.dlh-carousel-thumbnail img {
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
	filter: saturate(0.65);
	transition: filter 200ms ease;
}

.dlh-carousel-thumbnail.is-active img,
.dlh-carousel-thumbnail:hover img { filter: saturate(1); }

.dlh-thumbnail-number {
	position: absolute;
	top: 0.35rem;
	left: 0.4rem;
	color: #fff;
	font-size: 0.55rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-shadow: 0 1px 5px #000;
}

.dlh-thumbnail-progress {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 2px;
	background: var(--dlh-gold);
	transform: scaleX(0);
	transform-origin: left;
}

.dlh-portrait-carousel.is-playing .dlh-carousel-thumbnail.is-active .dlh-thumbnail-progress {
	animation: dlh-carousel-progress var(--dlh-carousel-interval) linear forwards;
}

.dlh-portrait-carousel.is-playing:hover .dlh-carousel-thumbnail.is-active .dlh-thumbnail-progress,
.dlh-portrait-carousel.is-playing:focus-within .dlh-carousel-thumbnail.is-active .dlh-thumbnail-progress {
	animation-play-state: paused;
}

@keyframes dlh-carousel-progress { to { transform: scaleX(1); } }

@media (min-width: 900px) {
	.dlh-ratio-portrait,
	.dlh-ratio-tall { max-width: 920px; }
}

@media (max-width: 600px) {
	.dlh-portrait-carousel { margin: 1.5rem auto 3rem; }
	.dlh-carousel-track { min-height: 370px; max-height: 76vh; }
	.dlh-carousel-controls { grid-template-columns: 2.75rem minmax(4.5rem, 1fr) 2.75rem 2.75rem; }
	.dlh-carousel-arrow,
	.dlh-carousel-play { width: 2.75rem; height: 2.75rem; }
	.dlh-carousel-position { height: 2.75rem; padding: 0 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
	.dlh-carousel-slide,
	.dlh-carousel-thumbnail { transition-duration: 1ms; }
	.dlh-carousel-image,
	.dlh-carousel-ambient,
	.dlh-thumbnail-progress { animation: none !important; }
}