/* One Six — Runway hero: centred headline over an endless strip of model photos. */

.os.os-run {
	--os-run-h: clamp(300px, 34vw, 480px);
	padding: clamp(40px, 5vw, 80px) 0 clamp(40px, 5vw, 72px);
	background: var(--os-stone);
	color: var(--os-ink);
	overflow: hidden;
}

.os.os-run .os-run__head {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.os.os-run .os-run__kicker {
	margin: 0 0 18px;
	font: 500 11px/1.4 var(--os-font-sans);
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--os-mute);
}

.os.os-run .os-run__h {
	margin: 0;
	font-family: var(--os-font-serif);
	font-weight: 300;
	font-size: clamp(48px, 8.4vw, 140px);
	line-height: .92;
	letter-spacing: -.025em;
	padding: .04em 0;
	animation: os-run-rise 1s var(--os-ease) both;
}

.os.os-run .os-run__intro {
	margin: 20px 0 0;
	font: 400 clamp(15px, 1.3vw, 18px)/1.5 var(--os-font-sans);
	letter-spacing: .02em;
	animation: os-run-rise 1s .12s var(--os-ease) both;
}

.os.os-run .os-run__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin-top: 28px;
	animation: os-run-rise 1s .22s var(--os-ease) both;
}

/* The strip */
.os.os-run .os-run__stage {
	margin-top: clamp(36px, 4.6vw, 64px);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.os.os-run .os-run__belt {
	display: flex;
	width: max-content;
	animation: os-run-belt var(--os-run-t, 70s) linear infinite;
}

.os.os-run .os-run__stage:hover .os-run__belt,
.os.os-run .os-run__stage:focus-within .os-run__belt {
	animation-play-state: paused;
}

.os.os-run .os-run__set {
	display: flex;
	gap: 14px;
	margin: 0;
	padding: 0 14px 0 0;
	list-style: none;
}

.os.os-run .os-run__card {
	display: block;
	width: calc(var(--os-run-h) * 2 / 3);
	color: var(--os-ink);
	text-decoration: none;
}

.os.os-run .os-run__img {
	position: relative;
	display: block;
	height: var(--os-run-h);
	overflow: hidden;
	background: #e6e5e2;
}

.os.os-run .os-run__img img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--os-ease);
}

.os.os-run .os-run__card:hover .os-run__img img {
	transform: scale(1.04);
}

.os.os-run .os-run__cap {
	display: grid;
	gap: 3px;
	padding-top: 10px;
	font-size: 13px;
	line-height: 1.3;
}

.os.os-run .os-run__cap b {
	overflow: hidden;
	font-weight: 500;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.os.os-run .os-run__cap > span {
	color: var(--os-mute);
	white-space: nowrap;
}

.os.os-run .os-run__cap del {
	display: none;
}

.os.os-run .os-run__cap ins {
	text-decoration: none;
}

@keyframes os-run-belt { to { transform: translateX(-50%); } }
@keyframes os-run-rise { from { opacity: 0; transform: translateY(18px); } }

@media (max-width: 640px) {
	.os.os-run {
		--os-run-h: 300px;
		padding-top: 32px;
	}

	.os.os-run .os-run__h {
		font-size: clamp(44px, 13vw, 60px);
	}

	.os.os-run .os-run__actions .os-btn {
		flex: 1 1 0;
	}

	.os.os-run .os-run__set {
		gap: 10px;
		padding-right: 10px;
	}
}

/* Reduced motion: no belt, just a row you can swipe. */
@media (prefers-reduced-motion: reduce) {
	.os.os-run .os-run__h, .os.os-run .os-run__intro, .os.os-run .os-run__actions { animation: none; }
	.os.os-run .os-run__stage { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
	.os.os-run .os-run__belt { animation: none; }
	.os.os-run .os-run__set[aria-hidden="true"] { display: none; }
}