/* Overlia Headlines: featured posts, twelve styles.
 *
 * Markup: .ovh (the size container, colours as custom properties) holds one
 * .ovh-in deck. Every slide part carries data-k (its post) and gets
 * is-active / was / is-past and data-off (places after the active one) from
 * ovh.js; PHP prints the first state, so the page looks right before the
 * script runs. The running .ovh-fill animation is the autoplay clock.
 *
 * Every rule starts with .ovh so theme rules for headings, links and
 * buttons (e.g. ".content-wrapper h3") do not win. */

@font-face {
	font-family: "OVH Industry";
	src: url("../../assets/fonts/industry.otf") format("opentype");
	font-weight: 100 900;
	font-display: swap;
}

.ovh {
	--ovh-accent: #007141;
	--ovh-on-accent: #fff;
	--ovh-hl: #fff100;
	--ovh-on-hl: #00331b;
	--ovh-panel: #00331b;
	--ovh-r: 30px;
	--ovh-rs: min(var(--ovh-r), 22px);
	--ovh-h: 1;
	--ovh-ts: 1;
	--ovh-dur: 6000ms;
	--ovh-font: industry, "OVH Industry", "Helvetica Neue", Arial, sans-serif;
	--ovh-ease: cubic-bezier(.7, 0, .2, 1);
	--ovh-out: cubic-bezier(.2, .7, .2, 1);
	position: relative;
	container: ovh / inline-size;
	width: 100%;
	margin: 0;
	padding: 0;
	color: #fff;
	font-family: var(--ovh-font);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.4;
	text-align: left;
	-webkit-font-smoothing: antialiased;
}

.ovh *,
.ovh *::before,
.ovh *::after {
	box-sizing: border-box;
}

.ovh :where(h3, h4, p) {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-family: inherit;
	letter-spacing: normal;
}

.ovh .ovh-in a:is(:link, :visited, :hover, :focus, :active) {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
	border: 0;
}

.ovh img,
.ovh video {
	display: block;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	/* The club's theme sets an inline opacity: 0 on images below the fold. */
	opacity: 1 !important;
}

.ovh button {
	appearance: none;
	-webkit-appearance: none;
	min-width: 0;
	min-height: 0;
	margin: 0;
	box-shadow: none;
	font: inherit;
	line-height: 1;
	letter-spacing: normal;
	text-shadow: none;
	text-transform: none;
	color: inherit;
}

.ovh .ovh-in {
	position: relative;
	outline: none;
	user-select: none;
	-webkit-user-select: none;
	touch-action: pan-y;
}

.ovh .ovh-in:focus-visible {
	outline: 2px solid var(--ovh-hl);
	outline-offset: 4px;
}

/* --- shared pieces -------------------------------------------------------- */

.ovh .ovh-media {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ovh .ovh-noimg {
	width: 100%;
	height: 100%;
	background: radial-gradient(120% 120% at 20% 100%, var(--ovh-accent) 0%, var(--ovh-panel) 60%, #0b0f0d 100%);
}

.ovh .ovh-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}

.ovh .ovh-pill {
	display: inline-flex;
	align-items: center;
	height: 2.4em;
	padding: 0 1.15em;
	border-radius: 100px;
	background: var(--ovh-accent);
	color: var(--ovh-on-accent);
	font-size: clamp(10px, 1.05cqi, 12px);
	font-weight: 700;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}

.ovh .ovh-date {
	color: rgba(255, 255, 255, .74);
	font-size: clamp(11px, 1.1cqi, 13px);
	font-weight: 600;
	letter-spacing: .12em;
	white-space: nowrap;
}

.ovh .ovh-ttl {
	color: #fff;
	font-weight: 800;
	line-height: 1;
	text-transform: uppercase;
	text-wrap: balance;
}

.ovh.is-case .ovh-ttl {
	text-transform: none;
}

/* Long titles a size smaller, very long ones two (set in PHP by length). */
.ovh .ovh-ttl.is-long {
	--ovh-tl: .84;
}

.ovh .ovh-ttl.is-xlong {
	--ovh-tl: .7;
}

.ovh .ovh-ttl a:hover {
	text-decoration: underline;
	text-decoration-thickness: .06em;
	text-underline-offset: .12em;
	text-decoration-color: var(--ovh-hl);
}

.ovh .ovh-ex {
	display: -webkit-box;
	overflow: hidden;
	color: rgba(255, 255, 255, .78);
	font-size: clamp(13px, 1.3cqi, 15px);
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ovh .ovh-arw {
	display: grid;
	flex: none;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1.5px solid rgba(255, 255, 255, .45);
	border-radius: 50%;
	background: rgba(0, 0, 0, .2);
	color: #fff;
	cursor: pointer;
	transition: background .25s, border-color .25s, color .25s, transform .2s;
}

.ovh .ovh-arw svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.ovh .ovh-arw:hover,
.ovh .ovh-arw:focus-visible {
	border-color: var(--ovh-accent);
	background: var(--ovh-accent);
	color: var(--ovh-on-accent);
}

.ovh .ovh-arw:active {
	transform: scale(.92);
}

.ovh .ovh-cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 44px;
	padding: 0 22px;
	border-radius: 100px;
	background: #fff;
	color: var(--ovh-accent);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background .25s, color .25s;
}

.ovh .ovh-in a.ovh-cta:is(:link, :visited) {
	color: var(--ovh-accent);
}

.ovh .ovh-in a.ovh-cta:is(:hover, :focus-visible) {
	background: var(--ovh-hl);
	color: var(--ovh-on-hl);
}

.ovh .ovh-cta svg {
	width: 16px;
	height: 16px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Text that rises in, part by part, when its post becomes the active one. */
.ovh .ovh-txt > * {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .35s, transform .35s;
}

.ovh .ovh-txt.is-active > * {
	opacity: 1;
	transform: none;
	transition: opacity .8s var(--ovh-out), transform 1s var(--ovh-out);
}

.ovh .ovh-txt.is-active > :nth-child(1) { transition-delay: .3s; }
.ovh .ovh-txt.is-active > :nth-child(2) { transition-delay: .42s; }
.ovh .ovh-txt.is-active > :nth-child(3) { transition-delay: .54s; }
.ovh .ovh-txt.is-active > :nth-child(4) { transition-delay: .66s; }

.ovh .ovh-txt:not(.is-active) {
	pointer-events: none;
}

/* The autoplay timer. */
.ovh .ovh-fill {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ovh-hl);
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.ovh .is-active > .ovh-fill,
.ovh .is-active .ovh-fill,
.ovh .ovh-tick.run {
	animation: ovh-fill var(--ovh-dur) linear forwards;
}

.ovh .is-past .ovh-fill {
	transform: scaleX(1);
}

.ovh .ovh-in:is(.is-paused, .is-held, .is-off) :is(.ovh-fill, .ovh-tick) {
	animation-play-state: paused;
}

.ovh .ovh-in[data-autoplay="0"] :is(.ovh-fill, .ovh-tick) {
	animation: none;
}

.ovh:is(.no-prog, .no-auto) .ovh-prog {
	visibility: hidden;
}

@keyframes ovh-fill {
	to { transform: scaleX(1); }
}

@keyframes ovh-fill-ring {
	to { stroke-dashoffset: 0; }
}

.ovh .ovh-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ==========================================================================
   Okładka: full photo, huge title, headline list with timers
   ======================================================================= */

.ovh .ovh-ok {
	height: calc(50cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: #0b0b0c;
	isolation: isolate;
}

.ovh .ovh-ok__s {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1s ease, visibility 0s linear 1s;
}

.ovh .ovh-ok__s.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1s ease;
}

.ovh .ovh-ok__s .ovh-media {
	transform: scale(1.14);
	transition: transform 0s linear 1s;
}

.ovh .ovh-ok__s.is-active .ovh-media {
	transform: scale(1);
	transition: transform 9s cubic-bezier(.2, .5, .4, 1);
}

.ovh .ovh-ok__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(8, 9, 9, .9) 0%, rgba(8, 9, 9, .62) 36%, rgba(8, 9, 9, .12) 58%, rgba(8, 9, 9, .55) 74%, rgba(8, 9, 9, .9) 100%),
		linear-gradient(0deg, rgba(8, 9, 9, .6), rgba(8, 9, 9, 0) 45%);
}

.ovh .ovh-ok__copy {
	position: absolute;
	left: 4.5cqi;
	bottom: 4.2cqi;
	display: grid;
	width: 54%;
}

.ovh .ovh-ok__txt {
	grid-area: 1 / 1;
	align-self: end;
}

.ovh .ovh-ok__ttl {
	margin: .45em 0 .4em;
	font-size: calc(4.5cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: .98;
}

.ovh .ovh-ok__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-ok__list {
	position: absolute;
	top: 3.6cqi;
	right: 3.6cqi;
	bottom: calc(3.6cqi + 64px);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: .3cqi;
	width: 26%;
}

.ovh.no-arrows .ovh-ok__list {
	bottom: 3.6cqi;
}

.ovh .ovh-ok__item {
	display: grid;
	row-gap: .8cqi;
	width: 100%;
	padding: .9cqi 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: rgba(255, 255, 255, .48);
	text-align: left;
	cursor: pointer;
	transition: color .3s;
}

.ovh .ovh-ok__item:hover {
	color: rgba(255, 255, 255, .85);
}

.ovh .ovh-ok__item.is-active {
	color: #fff;
}

.ovh .ovh-ok__t {
	display: -webkit-box;
	overflow: hidden;
	font-size: clamp(11px, 1.1cqi, 13px);
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.3;
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.ovh.is-case .ovh-ok__t {
	text-transform: none;
}

.ovh .ovh-ok.is-many .ovh-ok__t {
	-webkit-line-clamp: 1;
}

.ovh .ovh-ok.is-lots .ovh-ok__t {
	display: none;
}

.ovh .ovh-ok.is-lots .ovh-ok__list {
	gap: 0;
}

.ovh .ovh-ok.is-lots .ovh-ok__item {
	row-gap: 0;
	padding: .55cqi 0;
}

.ovh .ovh-ok__bar {
	height: 2px;
	overflow: hidden;
	border-radius: 2px;
	background: rgba(255, 255, 255, .18);
}

.ovh .ovh-ok__nav {
	position: absolute;
	right: 3.6cqi;
	bottom: 3.6cqi;
	display: flex;
	gap: 10px;
}

@container ovh (max-width: 640px) {
	.ovh .ovh-ok {
		height: calc(125cqi * var(--ovh-h));
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-ok__shade {
		background: linear-gradient(0deg, rgba(8, 9, 9, .95) 0%, rgba(8, 9, 9, .62) 45%, rgba(8, 9, 9, .1) 70%, rgba(8, 9, 9, .5) 100%);
	}

	.ovh .ovh-ok__copy {
		right: 5cqi;
		bottom: calc(5cqi + 62px);
		left: 5cqi;
		width: auto;
	}

	.ovh.no-arrows .ovh-ok__copy {
		bottom: 6cqi;
	}

	.ovh .ovh-ok__ttl {
		font-size: calc(7.6cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-ok__list {
		top: 5cqi;
		right: 5cqi;
		bottom: auto;
		left: 5cqi;
		flex-direction: row;
		gap: 6px;
		width: auto;
	}

	.ovh .ovh-ok__item {
		flex: 1;
		padding: 6px 0;
	}

	.ovh .ovh-ok.is-lots .ovh-ok__list {
		gap: 3px;
	}

	.ovh .ovh-ok__t {
		display: none;
	}

	.ovh .ovh-ok__nav {
		right: auto;
		bottom: 5cqi;
		left: 5cqi;
	}
}

/* ==========================================================================
   Panele: strips side by side, the active one opens
   ======================================================================= */

.ovh .ovh-pa__row {
	display: flex;
	gap: max(6px, .8cqi);
	height: calc(46cqi * var(--ovh-h));
}

.ovh .ovh-pa__p {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	overflow: hidden;
	border-radius: var(--ovh-rs);
	background: #0b0b0c;
	cursor: pointer;
	transition: flex-grow .95s var(--ovh-ease);
}

/* The open panel keeps about 60% of the row however many posts there are. */
.ovh .ovh-pa__p.is-active {
	flex-grow: max(7, (var(--ovh-n, 5) - 1) * 1.6);
	cursor: default;
}

/* Ten posts or more: the strips are too narrow for a title. */
.ovh .ovh-pa.is-many .ovh-pa__vt {
	display: none;
}

.ovh .ovh-pa__p .ovh-media,
.ovh .ovh-pa__p .ovh-noimg {
	position: absolute;
	inset: 0;
	filter: grayscale(1) brightness(.5);
	transform: scale(1.2);
	transition: filter .8s, transform 1.4s var(--ovh-out);
}

.ovh .ovh-pa__p:not(.is-active):hover .ovh-media {
	filter: grayscale(.2) brightness(.72);
}

.ovh .ovh-pa__p.is-active :is(.ovh-media, .ovh-noimg) {
	filter: grayscale(0) brightness(1);
	transform: scale(1);
}

.ovh .ovh-pa__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, color-mix(in srgb, var(--ovh-panel) 95%, transparent) 0%, color-mix(in srgb, var(--ovh-panel) 55%, transparent) 35%, transparent 65%);
}

.ovh .ovh-pa__vt {
	position: absolute;
	bottom: 2.2cqi;
	left: 50%;
	max-height: calc(100% - 4.4cqi);
	overflow: hidden;
	color: rgba(255, 255, 255, .9);
	font-size: clamp(12px, 1.2cqi, 15px);
	font-weight: 700;
	letter-spacing: .1em;
	line-height: 1.2;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: translateX(-50%) rotate(180deg);
	transition: opacity .4s .55s;
}

.ovh.is-case .ovh-pa__vt {
	text-transform: none;
}

.ovh .ovh-pa__p.is-active .ovh-pa__vt {
	opacity: 0;
	transition: opacity .2s;
}

/* Fixed width (no reflow while the panel opens), as wide as the open panel
   will be: about 60% of the row less the gaps between the strips. */
.ovh .ovh-pa__txt {
	position: absolute;
	bottom: 2.8cqi;
	left: 2.6cqi;
	width: calc((100cqi - (var(--ovh-n, 5) - 1) * max(6px, .8cqi)) * .6 - 5.2cqi);
	opacity: 0;
	translate: 0 18px;
	pointer-events: none;
	transition: opacity .25s, translate .25s;
}

.ovh .ovh-pa__p.is-active .ovh-pa__txt {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
	transition: opacity .6s .6s, translate .9s .6s var(--ovh-out);
}

.ovh .ovh-pa__ttl {
	margin: .5em 0 .4em;
	font-size: calc(3.5cqi * var(--ovh-ts) * var(--ovh-tl, 1));
}

.ovh .ovh-pa__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-pa__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: rgba(255, 255, 255, .14);
	opacity: 0;
	transition: opacity .3s;
}

.ovh .ovh-pa__p.is-active .ovh-pa__bar {
	opacity: 1;
}

.ovh .ovh-pa__foot {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 16px;
}

@container ovh (max-width: 640px) {
	.ovh .ovh-pa__row {
		flex-direction: column;
		height: calc(min(60cqi + var(--ovh-n, 5) * 12cqi, 180cqi) * var(--ovh-h));
	}

	.ovh .ovh-pa__vt {
		top: 50%;
		right: 5cqi;
		bottom: auto;
		left: 5cqi;
		max-height: none;
		font-size: 3.3cqi;
		writing-mode: horizontal-tb;
		transform: translateY(-50%);
	}

	.ovh .ovh-pa__txt {
		bottom: 5cqi;
		left: 5cqi;
		width: 82cqi;
	}

	.ovh .ovh-pa__ttl {
		font-size: calc(6.6cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}
}

/* ==========================================================================
   Skos: green text panel, photo cut on a slant, yellow line along the cut
   ======================================================================= */

.ovh .ovh-sk {
	height: calc(48cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: radial-gradient(130% 150% at 0% 100%, color-mix(in srgb, var(--ovh-accent) 88%, #fff) 0%, var(--ovh-panel) 55%, color-mix(in srgb, var(--ovh-panel) 55%, #000) 100%);
	isolation: isolate;
}

.ovh .ovh-sk__stripe {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--ovh-hl);
	clip-path: polygon(calc(52% - 1.7cqi) 0, calc(52% - 1.1cqi) 0, calc(40% - 1.1cqi) 100%, calc(40% - 1.7cqi) 100%);
	pointer-events: none;
}

.ovh .ovh-sk__photo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 40%;
	width: 60%;
	clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.ovh .ovh-sk__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(90deg, rgba(0, 30, 15, .5), rgba(0, 30, 15, 0) 40%);
	pointer-events: none;
}

.ovh .ovh-sk__img {
	position: absolute;
	inset: 0;
	z-index: 0;
	clip-path: polygon(120% 0, 120% 0, 120% 100%, 100% 100%);
}

.ovh .ovh-sk__img.was {
	z-index: 1;
	clip-path: polygon(20% 0, 120% 0, 120% 100%, 0 100%);
}

.ovh .ovh-sk__img.is-active {
	z-index: 2;
	clip-path: polygon(20% 0, 120% 0, 120% 100%, 0 100%);
	transition: clip-path 1.1s var(--ovh-ease);
}

.ovh .ovh-sk__img :is(.ovh-media, .ovh-noimg) {
	transform: scale(1.18);
}

.ovh .ovh-sk__img.was :is(.ovh-media, .ovh-noimg) {
	transform: scale(1);
}

.ovh .ovh-sk__img.is-active :is(.ovh-media, .ovh-noimg) {
	transform: scale(1);
	transition: transform 1.7s var(--ovh-out);
}

.ovh .ovh-sk__copy {
	position: absolute;
	z-index: 4;
	top: 0;
	bottom: 0;
	left: 4.5cqi;
	display: flex;
	flex-direction: column;
	gap: 2cqi;
	width: 32cqi;
	padding: 3.6cqi 0 3.4cqi;
}

.ovh .ovh-sk__stack {
	display: grid;
	flex: 1;
	align-content: center;
	min-height: 0;
}

.ovh .ovh-sk__txt {
	grid-area: 1 / 1;
	align-self: center;
}

.ovh .ovh-sk__ttl {
	margin: .55em 0 .45em;
	font-size: calc(3cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: 1.02;
}

.ovh .ovh-sk__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-sk__txt .ovh-cta {
	margin-top: 1.6cqi;
}

.ovh .ovh-sk__nav,
.ovh .ovh-st__nav,
.ovh .ovh-ko__nav,
.ovh .ovh-wi__nav {
	display: flex;
	align-items: center;
	gap: 14px;
}

.ovh .ovh-sk__bar,
.ovh .ovh-st__bar,
.ovh .ovh-ko__bar,
.ovh .ovh-wi__bar {
	flex: 1;
	height: 2px;
	overflow: hidden;
	background: rgba(255, 255, 255, .2);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-sk {
		display: flex;
		flex-direction: column;
		height: auto;
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-sk__stripe {
		display: none;
	}

	.ovh .ovh-sk__photo {
		position: relative;
		left: auto;
		width: 100%;
		height: calc(75cqi * var(--ovh-h));
		clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
	}

	.ovh .ovh-sk__img:is(.was, .is-active) {
		clip-path: polygon(0 0, 120% 0, 120% 100%, -20% 100%);
	}

	.ovh .ovh-sk__copy {
		position: relative;
		left: auto;
		gap: 5cqi;
		width: auto;
		padding: 2cqi 6cqi 6cqi;
	}

	.ovh .ovh-sk__ttl {
		font-size: calc(7.4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-sk__txt .ovh-cta {
		margin-top: 5cqi;
	}
}

/* ==========================================================================
   Mozaika: every post at once, the active one on the big tile
   ======================================================================= */

.ovh .ovh-mo {
	--gap: max(8px, .9cqi);
	--bw: 55%;
	--sw: calc((100% - var(--bw) - var(--gap) * 2) / 2);
	--sh: calc((100% - var(--gap)) / 2);
	--rx: calc(var(--bw) + var(--gap));
	--rw: calc(100% - var(--bw) - var(--gap));
	height: calc(46cqi * var(--ovh-h));
}

.ovh .ovh-mo__c {
	position: absolute;
	z-index: 1;
	top: calc(100% - var(--sh));
	left: calc(100% - var(--sw));
	width: var(--sw);
	height: var(--sh);
	overflow: hidden;
	border-radius: var(--ovh-rs);
	background: #0b0b0c;
	opacity: 0;
	cursor: pointer;
	transition: left .9s var(--ovh-ease), top .9s var(--ovh-ease), width .9s var(--ovh-ease), height .9s var(--ovh-ease), opacity .6s;
}

.ovh .ovh-mo__c:is([data-off="0"], [data-off="1"], [data-off="2"], [data-off="3"], [data-off="4"]) {
	opacity: 1;
}

.ovh .ovh-mo__c[data-off="0"] {
	z-index: 3;
	top: 0;
	left: 0;
	width: var(--bw);
	height: 100%;
	cursor: default;
}

.ovh .ovh-mo__c[data-off="1"] { top: 0; left: var(--rx); }
.ovh .ovh-mo__c[data-off="2"] { top: 0; left: calc(100% - var(--sw)); }
.ovh .ovh-mo__c[data-off="3"] { top: calc(100% - var(--sh)); left: var(--rx); }
.ovh .ovh-mo__c[data-off="4"] { top: calc(100% - var(--sh)); left: calc(100% - var(--sw)); }

/* Fewer than five posts: the right side splits into what there is
   (computers and tablets; phones keep the row of small tiles). */
@container ovh (min-width: 641px) {
	.ovh .ovh-mo[data-n="1"] .ovh-mo__c[data-off="0"] { width: 100%; }
	.ovh .ovh-mo[data-n="2"] .ovh-mo__c[data-off="1"] { width: var(--rw); height: 100%; }
	.ovh .ovh-mo[data-n="3"] .ovh-mo__c:is([data-off="1"], [data-off="2"]) { left: var(--rx); width: var(--rw); }
	.ovh .ovh-mo[data-n="3"] .ovh-mo__c[data-off="2"] { top: calc(100% - var(--sh)); }
	.ovh .ovh-mo[data-n="4"] .ovh-mo__c[data-off="1"] { width: var(--rw); }
	.ovh .ovh-mo[data-n="4"] .ovh-mo__c[data-off="2"] { top: calc(100% - var(--sh)); left: var(--rx); }
	.ovh .ovh-mo[data-n="4"] .ovh-mo__c[data-off="3"] { left: calc(100% - var(--sw)); }
}

.ovh .ovh-mo__c :is(.ovh-media, .ovh-noimg) {
	position: absolute;
	inset: 0;
	transition: transform .8s var(--ovh-out);
}

.ovh .ovh-mo__c:not(.is-active):hover .ovh-media {
	transform: scale(1.07);
}

.ovh .ovh-mo__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(5, 12, 8, .92) 0%, rgba(5, 12, 8, .45) 40%, rgba(5, 12, 8, 0) 70%);
}

.ovh .ovh-mo__big {
	position: absolute;
	bottom: 3cqi;
	left: 3cqi;
	width: 47cqi;
	opacity: 0;
	translate: 0 16px;
	pointer-events: none;
	transition: opacity .2s, translate .2s;
}

.ovh .ovh-mo__c.is-active .ovh-mo__big {
	opacity: 1;
	translate: 0 0;
	pointer-events: auto;
	transition: opacity .6s .6s, translate .9s .6s var(--ovh-out);
}

.ovh .ovh-mo[data-n="1"] .ovh-mo__big {
	width: 70cqi;
}

.ovh .ovh-mo__ttl {
	margin: .5em 0 .4em;
	font-size: calc(3.2cqi * var(--ovh-ts) * var(--ovh-tl, 1));
}

.ovh .ovh-mo__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-mo__small {
	position: absolute;
	right: 1.6cqi;
	bottom: 1.6cqi;
	left: 1.6cqi;
	transition: opacity .5s .7s;
}

.ovh .ovh-mo__c.is-active .ovh-mo__small {
	opacity: 0;
	transition: opacity .15s;
}

.ovh .ovh-mo__small .ovh-pill {
	height: 2.1em;
	padding: 0 .9em;
	font-size: clamp(9px, .9cqi, 11px);
}

.ovh .ovh-mo__h {
	display: -webkit-box;
	margin: .8em 0 0;
	overflow: hidden;
	font-size: clamp(12px, 1.2cqi, 15px);
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.2;
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ovh.is-case .ovh-mo__h {
	text-transform: none;
}

.ovh .ovh-mo__h:first-child {
	margin-top: 0;
}

.ovh .ovh-mo__bar {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: rgba(255, 255, 255, .15);
	opacity: 0;
}

.ovh .ovh-mo__c.is-active .ovh-mo__bar {
	opacity: 1;
	transition: opacity .3s .6s;
}

.ovh .ovh-mo__nav {
	position: absolute;
	z-index: 5;
	top: 2cqi;
	left: calc(var(--bw) - 2cqi - 106px);
	display: flex;
	gap: 10px;
}

.ovh .ovh-mo[data-n="1"] .ovh-mo__nav {
	left: calc(100% - 2cqi - 106px);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-mo {
		--sh2: calc(24% - var(--gap) / 2);
		--sw2: calc((100% - var(--gap) * 3) / 4);
		height: calc(150cqi * var(--ovh-h));
	}

	.ovh .ovh-mo__c,
	.ovh .ovh-mo .ovh-mo__c[data-off] {
		top: calc(100% - var(--sh2));
		left: calc((var(--sw2) + var(--gap)) * 3);
		width: var(--sw2);
		height: var(--sh2);
	}

	.ovh .ovh-mo .ovh-mo__c[data-off="0"] {
		top: 0;
		left: 0;
		width: 100%;
		height: calc(76% - var(--gap) / 2);
	}

	.ovh .ovh-mo[data-n="1"] .ovh-mo__c[data-off="0"] {
		height: 100%;
	}

	.ovh .ovh-mo .ovh-mo__c[data-off="1"] { left: 0; }
	.ovh .ovh-mo .ovh-mo__c[data-off="2"] { left: calc(var(--sw2) + var(--gap)); }
	.ovh .ovh-mo .ovh-mo__c[data-off="3"] { left: calc((var(--sw2) + var(--gap)) * 2); }

	.ovh .ovh-mo__small {
		display: none;
	}

	.ovh .ovh-mo__big,
	.ovh .ovh-mo[data-n="1"] .ovh-mo__big {
		bottom: 5cqi;
		left: 5cqi;
		width: 84cqi;
	}

	.ovh .ovh-mo__ttl {
		font-size: calc(7cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-mo__nav,
	.ovh .ovh-mo[data-n="1"] .ovh-mo__nav {
		top: 4cqi;
		right: 4cqi;
		left: auto;
	}
}

/* ==========================================================================
   Kino: wide frame, story bars, the photo comes into focus
   ======================================================================= */

.ovh .ovh-ki {
	height: calc(42.86cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: #000;
	isolation: isolate;
}

.ovh .ovh-ki__s {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 1.2s ease, visibility 0s 1.2s;
}

.ovh .ovh-ki__s.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 1.2s ease;
}

.ovh .ovh-ki__s :is(.ovh-media, .ovh-noimg) {
	filter: blur(16px) brightness(.8);
	transform: scale(1.2);
	transition: filter 0s 1.2s, transform 0s 1.2s;
}

.ovh .ovh-ki__s.is-active :is(.ovh-media, .ovh-noimg) {
	filter: blur(0) brightness(1);
	transform: scale(1.03);
	transition: filter 1.4s var(--ovh-out), transform 10s cubic-bezier(.15, .6, .35, 1);
}

.ovh .ovh-ki__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .35) 42%, rgba(0, 0, 0, 0) 65%),
		linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 24%);
}

.ovh .ovh-ki__bars {
	position: absolute;
	z-index: 3;
	top: 2.2cqi;
	right: 3cqi;
	left: 3cqi;
	display: flex;
	gap: 6px;
}

.ovh .ovh-ki__bar {
	flex: 1;
	height: 5px;
	padding: 0;
	overflow: hidden;
	border: 0;
	border-radius: 5px;
	background: rgba(255, 255, 255, .28);
	cursor: pointer;
}

.ovh .ovh-ki__bar .ovh-fill {
	background: #fff;
}

.ovh .ovh-ki__copy {
	position: absolute;
	z-index: 3;
	bottom: 3.6cqi;
	left: 50%;
	display: grid;
	width: 56%;
	text-align: center;
	translate: -50% 0;
}

.ovh .ovh-ki__txt {
	grid-area: 1 / 1;
	align-self: end;
}

.ovh .ovh-ki__txt:not(.is-active) {
	pointer-events: none;
}

.ovh .ovh-ki__txt .ovh-meta {
	justify-content: center;
}

.ovh .ovh-ki__txt > * {
	opacity: 0;
	filter: blur(10px);
	transform: scale(1.05);
	transition: opacity .4s, filter .4s, transform .4s;
}

.ovh .ovh-ki__txt.is-active > * {
	opacity: 1;
	filter: blur(0);
	transform: none;
	transition: opacity 1s var(--ovh-out), filter 1s var(--ovh-out), transform 1.2s var(--ovh-out);
}

.ovh .ovh-ki__txt.is-active > :nth-child(1) { transition-delay: .35s; }
.ovh .ovh-ki__txt.is-active > :nth-child(2) { transition-delay: .5s; }
.ovh .ovh-ki__txt.is-active > :nth-child(3) { transition-delay: .65s; }

.ovh .ovh-ki__ttl {
	margin: .45em 0 .4em;
	font-size: calc(4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
}

.ovh .ovh-ki__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-ki__txt .ovh-ex {
	max-width: 60ch;
	margin: 0 auto;
}

.ovh .ovh-ki__next {
	position: absolute;
	z-index: 3;
	right: 3cqi;
	bottom: 3.6cqi;
	display: grid;
	width: 18cqi;
}

.ovh .ovh-ki__nx {
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	gap: 12px;
	padding: 8px 14px 8px 8px;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 16px;
	background: rgba(255, 255, 255, .1);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	text-align: left;
	opacity: 0;
	pointer-events: none;
	cursor: pointer;
	transition: opacity .3s, background .25s;
}

.ovh .ovh-ki__nx.is-active {
	opacity: 1;
	pointer-events: auto;
	transition: opacity .6s .8s, background .25s;
}

.ovh .ovh-ki__nx:hover {
	background: rgba(255, 255, 255, .2);
}

.ovh .ovh-ki__nx .ovh-media,
.ovh .ovh-ki__nx .ovh-noimg {
	flex: none;
	width: 64px;
	height: 46px;
	border-radius: 10px;
}

.ovh .ovh-ki__nt {
	display: -webkit-box;
	min-width: 0;
	overflow: hidden;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.25;
	text-transform: uppercase;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ovh.is-case .ovh-ki__nt {
	text-transform: none;
}

.ovh .ovh-ki__nl {
	display: block;
	color: var(--ovh-hl);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ovh .ovh-ki > .ovh-arw {
	position: absolute;
	z-index: 3;
	top: 50%;
	border-color: rgba(255, 255, 255, .25);
	background: rgba(255, 255, 255, .12);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	translate: 0 -50%;
}

.ovh .ovh-ki > .ovh-arw:hover {
	border-color: var(--ovh-accent);
	background: var(--ovh-accent);
}

.ovh .ovh-ki > .ovh-arw[data-go="-1"] { left: 2.4cqi; }
.ovh .ovh-ki > .ovh-arw[data-go="1"] { right: 2.4cqi; }

@container ovh (max-width: 900px) {
	.ovh .ovh-ki__next {
		display: none;
	}

	.ovh .ovh-ki__copy {
		width: 74%;
	}

	.ovh .ovh-ki__ttl {
		font-size: calc(5cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}
}

@container ovh (max-width: 640px) {
	.ovh .ovh-ki {
		height: calc(125cqi * var(--ovh-h));
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-ki__bars {
		top: 5cqi;
		right: 5cqi;
		left: 5cqi;
	}

	.ovh .ovh-ki__copy {
		right: 5cqi;
		bottom: 6cqi;
		left: 5cqi;
		width: auto;
		text-align: left;
		translate: 0 0;
	}

	.ovh .ovh-ki__txt .ovh-meta {
		justify-content: flex-start;
	}

	.ovh .ovh-ki__txt .ovh-ex {
		margin: 0;
	}

	.ovh .ovh-ki__ttl {
		font-size: calc(7.8cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-ki > .ovh-arw {
		top: 42%;
		width: 42px;
		height: 42px;
	}

	.ovh .ovh-ki > .ovh-arw[data-go="-1"] { left: 4cqi; }
	.ovh .ovh-ki > .ovh-arw[data-go="1"] { right: 4cqi; }
}

/* ==========================================================================
   Plakat: club-green duotone, huge title word by word, blinds
   ======================================================================= */

.ovh .ovh-pl {
	height: calc(48cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: var(--ovh-panel);
	isolation: isolate;
}

.ovh .ovh-pl__photo {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 58%;
}

.ovh .ovh-pl__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(90deg, var(--ovh-panel) 0%, color-mix(in srgb, var(--ovh-panel) 0%, transparent) 28%);
	pointer-events: none;
}

.ovh .ovh-pl__img {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ovh .ovh-pl__img.was { z-index: 1; }
.ovh .ovh-pl__img.is-active { z-index: 2; }

/* Five copies of the photo, each showing one fifth: the blinds. A video has
   one copy (--s: 0, class is-one) that covers everything. */
.ovh .ovh-pl__img > span {
	--l: calc(var(--s) * 20% - 1px);
	--r: calc(100% - (var(--s) + 1) * 20% - 1px);
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--ovh-accent) 82%, #fff);
	clip-path: inset(0 var(--r) 100% var(--l));
	transition: background .7s;
}

.ovh .ovh-pl__img > span.is-one {
	--l: 0px;
	--r: 0px;
}

.ovh .ovh-pl__img.was > span {
	clip-path: inset(0 var(--r) 0 var(--l));
}

.ovh .ovh-pl__img.is-active > span {
	clip-path: inset(0 var(--r) 0 var(--l));
	transition: clip-path .85s var(--ovh-ease) calc(var(--s) * 70ms), background .7s;
}

.ovh .ovh-pl__img > span::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ovh-panel);
	mix-blend-mode: lighten;
	transition: opacity .7s;
}

.ovh .ovh-pl__img :is(.ovh-media, .ovh-noimg) {
	position: absolute;
	inset: 0;
	filter: grayscale(1) contrast(1.1) brightness(1.45);
	mix-blend-mode: multiply;
	transition: filter .7s;
}

.ovh .ovh-pl__photo:hover .ovh-pl__img > span {
	background: #fff;
}

.ovh .ovh-pl__photo:hover .ovh-pl__img > span::after {
	opacity: 0;
}

.ovh .ovh-pl__photo:hover .ovh-pl__img .ovh-media {
	filter: grayscale(0) contrast(1) brightness(1);
}

.ovh .ovh-pl__copy {
	position: absolute;
	z-index: 4;
	top: 4cqi;
	bottom: 4cqi;
	left: 4.5cqi;
	display: grid;
	width: 58%;
	pointer-events: none;
}

.ovh .ovh-pl__txt {
	display: flex;
	flex-direction: column;
	grid-area: 1 / 1;
	align-items: flex-start;
}

.ovh .ovh-pl__txt.is-active {
	pointer-events: auto;
}

.ovh .ovh-pl .ovh-pill {
	background: var(--ovh-hl);
	color: var(--ovh-on-hl);
}

.ovh .ovh-pl__txt .ovh-pill {
	opacity: 0;
	transition: opacity .3s;
}

.ovh .ovh-pl__txt.is-active .ovh-pill {
	opacity: 1;
	transition: opacity .6s .2s;
}

.ovh .ovh-pl__ttl {
	margin: 1.6cqi 0 0;
	font-size: calc(5.4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	font-weight: 900;
	line-height: .94;
	text-shadow: 0 .08em .5em rgba(0, 20, 10, .4);
}

.ovh .ovh-pl__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-pl__w {
	display: inline-block;
	opacity: 0;
	transform: translateY(.45em);
	transition: opacity .25s, transform .25s;
}

.ovh .ovh-pl__txt.is-active .ovh-pl__w {
	opacity: 1;
	transform: none;
	transition: opacity .6s var(--ovh-out) calc(.3s + var(--w) * 60ms), transform .8s var(--ovh-out) calc(.3s + var(--w) * 60ms);
}

.ovh .ovh-pl__foot {
	display: flex;
	align-items: baseline;
	gap: 2cqi;
	max-width: 36cqi;
	margin-top: auto;
	padding-top: 2cqi;
	opacity: 0;
	transition: opacity .3s;
}

.ovh .ovh-pl__txt.is-active .ovh-pl__foot {
	opacity: 1;
	transition: opacity .8s .8s;
}

.ovh .ovh-pl__foot .ovh-date {
	flex: none;
	color: var(--ovh-hl);
}

.ovh .ovh-pl__nav {
	position: absolute;
	z-index: 5;
	right: 3cqi;
	bottom: 3cqi;
	display: flex;
	gap: 10px;
}

.ovh .ovh-pl__nav .ovh-arw {
	border-color: #fff;
	background: #fff;
	color: var(--ovh-accent);
}

.ovh .ovh-pl__nav .ovh-arw:hover {
	border-color: var(--ovh-hl);
	background: var(--ovh-hl);
	color: var(--ovh-on-hl);
}

.ovh .ovh-pl__bar {
	position: absolute;
	z-index: 5;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: rgba(255, 255, 255, .12);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-pl {
		display: flex;
		flex-direction: column;
		height: auto;
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-pl__photo {
		position: relative;
		width: 100%;
		height: calc(100cqi * var(--ovh-h));
	}

	.ovh .ovh-pl__photo::after {
		background: linear-gradient(0deg, var(--ovh-panel) 0%, color-mix(in srgb, var(--ovh-panel) 0%, transparent) 45%);
	}

	.ovh .ovh-pl__copy {
		position: relative;
		top: auto;
		bottom: auto;
		left: auto;
		width: auto;
		margin-top: -28cqi;
		padding: 0 5cqi;
	}

	.ovh .ovh-pl__ttl {
		margin-top: 3cqi;
		font-size: calc(9.4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-pl__foot {
		flex-direction: column;
		gap: 8px;
		max-width: none;
		margin-top: 0;
		padding-top: 5cqi;
	}

	.ovh .ovh-pl__nav {
		position: relative;
		right: auto;
		bottom: auto;
		padding: 5cqi 5cqi 7cqi;
	}

	.ovh.no-arrows .ovh-pl__copy {
		padding-bottom: 7cqi;
	}
}

/* ==========================================================================
   Telewizja: TV caption over the photo, news ticker underneath
   ======================================================================= */

.ovh .ovh-tv {
	display: flex;
	flex-direction: column;
	height: calc(50cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: #050606;
	isolation: isolate;
}

.ovh .ovh-tv__screen {
	position: relative;
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

.ovh .ovh-tv__s {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease, visibility 0s .7s;
}

.ovh .ovh-tv__s.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .7s ease;
}

.ovh .ovh-tv__s :is(.ovh-media, .ovh-noimg) {
	transform: scale(1.1);
	transition: transform 0s .8s;
}

.ovh .ovh-tv__s.is-active :is(.ovh-media, .ovh-noimg) {
	transform: scale(1);
	transition: transform 9s cubic-bezier(.2, .5, .4, 1);
}

.ovh .ovh-tv__screen::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .18) 45%, rgba(0, 0, 0, 0) 65%),
		repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
	pointer-events: none;
}

.ovh .ovh-tv__lower {
	position: absolute;
	z-index: 2;
	bottom: 3cqi;
	left: 4cqi;
	display: grid;
	width: 62%;
}

.ovh .ovh-tv__txt {
	grid-area: 1 / 1;
	align-self: end;
}

.ovh .ovh-tv__txt:not(.is-active) {
	pointer-events: none;
}

.ovh .ovh-tv__tag {
	display: flex;
	align-items: stretch;
	margin-bottom: 1cqi;
	opacity: 0;
	transform: translateX(-24px);
	transition: opacity .3s, transform .3s;
}

.ovh .ovh-tv .ovh-pill {
	height: auto;
	min-height: 2.3em;
	border-radius: 0;
}

.ovh .ovh-tv__tag .ovh-date {
	display: inline-flex;
	align-items: center;
	padding: 0 1em;
	background: rgba(0, 0, 0, .62);
	color: #fff;
}

.ovh .ovh-tv__ttl {
	font-size: calc(3cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: 1.42;
	clip-path: inset(0 100% 0 0);
	transition: clip-path .3s;
}

.ovh .ovh-tv__ttl a {
	padding: .1em .4em;
	background: #fff;
	color: var(--ovh-panel);
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.ovh .ovh-in .ovh-tv__ttl a:is(:link, :visited, :hover) {
	color: var(--ovh-panel);
}

.ovh .ovh-tv__txt .ovh-ex {
	max-width: 54ch;
	margin-top: 1.2cqi;
	color: #fff;
	text-shadow: 0 1px 10px rgba(0, 0, 0, .7);
	opacity: 0;
	transition: opacity .3s;
}

.ovh .ovh-tv__txt.is-active .ovh-tv__tag {
	opacity: 1;
	transform: none;
	transition: opacity .5s .15s, transform .7s .15s var(--ovh-out);
}

.ovh .ovh-tv__txt.is-active .ovh-tv__ttl {
	clip-path: inset(-.2em -.2em -.2em -.2em);
	transition: clip-path .8s .3s var(--ovh-ease);
}

.ovh .ovh-tv__txt.is-active .ovh-ex {
	opacity: 1;
	transition: opacity .8s .9s;
}

.ovh .ovh-tv__ticker {
	position: relative;
	z-index: 3;
	display: flex;
	flex: none;
	align-items: stretch;
	height: max(40px, 3.8cqi);
	background: var(--ovh-accent);
	color: var(--ovh-on-accent);
}

.ovh .ovh-tv__live {
	display: flex;
	flex: none;
	align-items: center;
	gap: 10px;
	padding: 0 32px 0 2cqi;
	background: var(--ovh-hl);
	color: var(--ovh-on-hl);
	font-size: clamp(11px, 1.15cqi, 14px);
	font-weight: 800;
	letter-spacing: .14em;
	text-transform: uppercase;
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%);
}

.ovh .ovh-tv__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: currentColor;
	animation: ovh-blink 1.4s steps(2, jump-none) infinite;
}

@keyframes ovh-blink {
	50% { opacity: .15; }
}

.ovh .ovh-tv__track {
	display: flex;
	flex: 1;
	align-items: center;
	min-width: 0;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}

.ovh .ovh-tv__run {
	display: flex;
	flex: none;
	align-items: center;
	white-space: nowrap;
	animation: ovh-ticker var(--ovh-tick, 40s) linear infinite;
}

.ovh .ovh-in:is(.is-paused, .is-held, .is-off) .ovh-tv__run {
	animation-play-state: paused;
}

@keyframes ovh-ticker {
	to { transform: translateX(-50%); }
}

.ovh .ovh-tv__item {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 1.6cqi;
	padding: 0 0 0 1.6cqi;
	border: 0;
	border-radius: 0;
	background: none;
	color: inherit;
	font-size: clamp(11px, 1.15cqi, 14px);
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
}

.ovh.is-case .ovh-tv__item {
	text-transform: none;
}

.ovh .ovh-tv__item::after {
	content: "";
	width: 7px;
	height: 7px;
	background: var(--ovh-hl);
	transform: rotate(45deg);
}

.ovh .ovh-tv__item.is-active {
	color: var(--ovh-hl);
}

.ovh .ovh-tv__prog {
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: rgba(255, 255, 255, .15);
}

.ovh .ovh-tv__nav {
	position: absolute;
	z-index: 3;
	top: 3cqi;
	right: 3cqi;
	display: flex;
	gap: 10px;
}

.ovh .ovh-tv__nav .ovh-arw {
	border-color: rgba(255, 255, 255, .25);
	background: rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-tv {
		height: calc(130cqi * var(--ovh-h));
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-tv__lower {
		right: 5cqi;
		bottom: 5cqi;
		left: 5cqi;
		width: auto;
	}

	.ovh .ovh-tv__ttl {
		font-size: calc(5.8cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-tv__nav {
		top: 5cqi;
		right: 5cqi;
	}

	.ovh .ovh-tv__live {
		padding-left: 4cqi;
		letter-spacing: .1em;
	}
}

/* ==========================================================================
   Stos: a stack of photos, the top one is thrown aside
   ======================================================================= */

.ovh .ovh-st {
	height: calc(48cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: radial-gradient(90% 120% at 25% 50%, color-mix(in srgb, var(--ovh-accent) 55%, var(--ovh-panel)) 0%, var(--ovh-panel) 55%, color-mix(in srgb, var(--ovh-panel) 55%, #000) 100%);
	isolation: isolate;
}

.ovh .ovh-st__deck {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 54%;
}

.ovh .ovh-st__card {
	--st-t: translate(0, -14%) scale(.8);
	--st-o: 0;
	--st-f: brightness(.4);
	position: absolute;
	z-index: 1;
	top: 18%;
	left: 9%;
	width: 82%;
	height: 66%;
	overflow: hidden;
	border-radius: var(--ovh-rs);
	background: #0b0b0c;
	box-shadow: 0 2cqi 4cqi rgba(0, 0, 0, .45);
	opacity: var(--st-o);
	filter: var(--st-f);
	transform: var(--st-t);
	cursor: pointer;
	transition: transform .8s var(--ovh-ease), opacity .6s, filter .6s;
}

.ovh .ovh-st__card[data-off="0"] {
	--st-t: translate(0, 0) rotate(0deg) scale(1);
	--st-o: 1;
	--st-f: brightness(1);
	z-index: 5;
	cursor: default;
}

.ovh .ovh-st__card[data-off="1"] {
	--st-t: translate(9%, -10%) rotate(5deg) scale(.92);
	--st-o: 1;
	--st-f: brightness(.7);
	z-index: 4;
}

.ovh .ovh-st__card[data-off="2"] {
	--st-t: translate(-8%, -17%) rotate(-6deg) scale(.85);
	--st-o: 1;
	--st-f: brightness(.5);
	z-index: 3;
}

.ovh .ovh-st__card:not([data-off="0"]):hover {
	--st-f: brightness(.85);
}

.ovh .ovh-in.is-ready[data-dir="next"] .ovh-st__card.was {
	animation: ovh-st-out .95s var(--ovh-ease) both;
}

.ovh .ovh-in.is-ready[data-dir="prev"] .ovh-st__card.is-active {
	animation: ovh-st-in .95s var(--ovh-ease) both;
}

@keyframes ovh-st-out {
	0% { z-index: 6; opacity: 1; filter: brightness(1); transform: translate(0, 0) rotate(0deg) scale(1); }
	45% { z-index: 6; opacity: 1; transform: translate(-72%, 7%) rotate(-13deg) scale(.95); }
	55% { z-index: 0; }
	100% { z-index: 0; opacity: var(--st-o); filter: var(--st-f); transform: var(--st-t); }
}

@keyframes ovh-st-in {
	0% { z-index: 0; opacity: 0; transform: translate(0, -14%) scale(.8); }
	45% { z-index: 0; }
	50% { z-index: 6; opacity: 1; transform: translate(-72%, 7%) rotate(-13deg) scale(.95); }
	100% { z-index: 6; opacity: 1; filter: brightness(1); transform: translate(0, 0) rotate(0deg) scale(1); }
}

.ovh .ovh-st__copy {
	position: absolute;
	z-index: 7;
	top: 0;
	right: 5cqi;
	bottom: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2.4cqi;
	width: 38%;
}

.ovh .ovh-st__stack {
	display: grid;
}

.ovh .ovh-st__txt {
	grid-area: 1 / 1;
	align-self: center;
}

.ovh .ovh-st__ttl {
	margin: .5em 0 .45em;
	font-size: calc(3.2cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: 1.02;
}

.ovh .ovh-st__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-st__txt .ovh-cta {
	margin-top: 1.6cqi;
}

@container ovh (max-width: 640px) {
	.ovh .ovh-st {
		display: flex;
		flex-direction: column;
		height: auto;
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-st__deck {
		position: relative;
		width: 100%;
		height: calc(78cqi * var(--ovh-h));
	}

	.ovh .ovh-st__card {
		top: 16%;
		left: 8%;
		width: 84%;
		height: 72%;
	}

	.ovh .ovh-st__copy {
		position: relative;
		right: auto;
		gap: 5cqi;
		width: auto;
		padding: 0 6cqi 6cqi;
	}

	.ovh .ovh-st__ttl {
		font-size: calc(7.2cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}
}

/* ==========================================================================
   Lista: big headlines in a column, the photo of the active one beside
   ======================================================================= */

.ovh .ovh-li {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40%;
	gap: 4cqi;
	min-height: calc(48cqi * var(--ovh-h));
	padding: 3.6cqi;
	overflow: hidden;
	border-radius: var(--ovh-r);
	background:
		radial-gradient(120% 120% at 100% 0%, color-mix(in srgb, var(--ovh-accent) 35%, transparent) 0%, transparent 55%),
		color-mix(in srgb, var(--ovh-panel) 30%, #0c0e0d);
}

.ovh .ovh-li__list {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.1cqi;
	min-width: 0;
}

.ovh .ovh-li__item {
	display: grid;
	grid-template-rows: auto 0fr auto;
	padding-bottom: 1cqi;
	cursor: pointer;
	transition: grid-template-rows .6s var(--ovh-ease);
}

.ovh .ovh-li__item.is-active {
	grid-template-rows: auto 1fr auto;
	cursor: default;
}

.ovh .ovh-li__ttl {
	overflow: hidden;
	color: transparent;
	font-size: calc(2.5cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: 1.12;
	text-overflow: ellipsis;
	white-space: nowrap;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .55);
	transition: color .4s, -webkit-text-stroke-color .4s;
}

.ovh .ovh-li__item:not(.is-active):hover .ovh-li__ttl {
	-webkit-text-stroke-color: #fff;
}

.ovh .ovh-li__item.is-active .ovh-li__ttl {
	display: -webkit-box;
	color: #fff;
	white-space: normal;
	-webkit-text-stroke-color: transparent;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

/* Long lists (7 or more): tighter and smaller. More than 10: only the open
   post and the next seven, in the order they come (the list rolls on). */
.ovh .ovh-li:is(.is-many, .is-lots) .ovh-li__list {
	gap: .4cqi;
}

.ovh .ovh-li:is(.is-many, .is-lots) .ovh-li__item {
	padding-bottom: .5cqi;
}

.ovh .ovh-li:is(.is-many, .is-lots) .ovh-li__bar {
	margin-top: .5cqi;
}

.ovh .ovh-li:is(.is-many, .is-lots) .ovh-li__ttl {
	font-size: calc(2cqi * var(--ovh-ts) * var(--ovh-tl, 1));
}

.ovh .ovh-li.is-lots .ovh-li__item {
	order: var(--ovh-off, 0);
}

.ovh .ovh-li.is-lots .ovh-li__item:not([data-off="0"], [data-off="1"], [data-off="2"], [data-off="3"], [data-off="4"], [data-off="5"], [data-off="6"], [data-off="7"]) {
	display: none;
}

.ovh .ovh-li__more {
	min-height: 0;
	overflow: hidden;
}

.ovh .ovh-li__more .ovh-ex {
	padding-top: .9cqi;
	opacity: 0;
	transition: opacity .3s;
}

.ovh .ovh-li__item.is-active .ovh-ex {
	opacity: 1;
	transition: opacity .6s .35s;
}

.ovh .ovh-li__bar {
	height: 2px;
	margin-top: 1cqi;
	overflow: hidden;
	background: rgba(255, 255, 255, .12);
}

.ovh .ovh-li__photo {
	position: relative;
	min-height: 100%;
	overflow: hidden;
	border-radius: var(--ovh-rs);
	background: #0b0b0c;
}

.ovh .ovh-li__s {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .8s ease, visibility 0s .8s;
}

.ovh .ovh-li__s.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity .8s ease;
}

.ovh .ovh-li__s :is(.ovh-media, .ovh-noimg) {
	transform: scale(1.12);
	transition: transform 0s .8s;
}

.ovh .ovh-li__s.is-active :is(.ovh-media, .ovh-noimg) {
	transform: scale(1);
	transition: transform 1.6s var(--ovh-out);
}

.ovh .ovh-li__s::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 40%);
}

.ovh .ovh-li__meta {
	position: absolute;
	z-index: 2;
	right: 2cqi;
	bottom: 2cqi;
	left: 2cqi;
}

.ovh .ovh-li__nav {
	position: absolute;
	z-index: 3;
	top: 2cqi;
	right: 2cqi;
	display: flex;
	gap: 10px;
}

.ovh .ovh-li__nav .ovh-arw {
	border-color: rgba(255, 255, 255, .25);
	background: rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-li {
		grid-template-columns: minmax(0, 1fr);
		gap: 5cqi;
		padding: 4cqi 4cqi 6cqi;
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-li__photo {
		order: -1;
		height: calc(70cqi * var(--ovh-h));
		min-height: 0;
	}

	.ovh .ovh-li__list {
		gap: 3cqi;
		padding: 0 2cqi;
	}

	.ovh .ovh-li__ttl {
		font-size: calc(5.4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-li:is(.is-many, .is-lots) .ovh-li__list {
		gap: 1.6cqi;
	}

	.ovh .ovh-li:is(.is-many, .is-lots) .ovh-li__ttl {
		font-size: calc(4.4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}


	.ovh .ovh-li__meta {
		right: 4cqi;
		bottom: 4cqi;
		left: 4cqi;
	}

	.ovh .ovh-li__nav {
		top: 4cqi;
		right: 4cqi;
	}
}

/* ==========================================================================
   Kostka: the slides are faces of a turning cube
   ======================================================================= */

/* The box clips the turn: a face's near edge would otherwise widen the page
   for a moment. */
.ovh .ovh-ko {
	height: calc(50cqi * var(--ovh-h));
	overflow: clip;
	perspective: 200cqi;
}

.ovh .ovh-ko__cube {
	position: absolute;
	inset: 0;
	transform-style: preserve-3d;
}

.ovh .ovh-ko__f {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: #0b0b0c;
	visibility: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transform: translateZ(-50cqi) rotateY(90deg) translateZ(50cqi);
}

.ovh .ovh-ko__f.is-active {
	visibility: visible;
	transform: none;
}

.ovh .ovh-ko__f.was {
	visibility: visible;
}

.ovh .ovh-in.is-ready[data-dir="next"] .ovh-ko__f.is-active { animation: ovh-ko-in-next 1.05s var(--ovh-ease) both; }
.ovh .ovh-in.is-ready[data-dir="next"] .ovh-ko__f.was { animation: ovh-ko-out-next 1.05s var(--ovh-ease) both; }
.ovh .ovh-in.is-ready[data-dir="prev"] .ovh-ko__f.is-active { animation: ovh-ko-in-prev 1.05s var(--ovh-ease) both; }
.ovh .ovh-in.is-ready[data-dir="prev"] .ovh-ko__f.was { animation: ovh-ko-out-prev 1.05s var(--ovh-ease) both; }

@keyframes ovh-ko-in-next {
	0% { transform: translateZ(-50cqi) rotateY(90deg) translateZ(50cqi); }
	50% { transform: translateZ(-80cqi) rotateY(45deg) translateZ(50cqi); }
	100% { transform: translateZ(-50cqi) rotateY(0deg) translateZ(50cqi); }
}

@keyframes ovh-ko-out-next {
	0% { transform: translateZ(-50cqi) rotateY(0deg) translateZ(50cqi); }
	50% { transform: translateZ(-80cqi) rotateY(-45deg) translateZ(50cqi); }
	100% { transform: translateZ(-50cqi) rotateY(-90deg) translateZ(50cqi); }
}

@keyframes ovh-ko-in-prev {
	0% { transform: translateZ(-50cqi) rotateY(-90deg) translateZ(50cqi); }
	50% { transform: translateZ(-80cqi) rotateY(-45deg) translateZ(50cqi); }
	100% { transform: translateZ(-50cqi) rotateY(0deg) translateZ(50cqi); }
}

@keyframes ovh-ko-out-prev {
	0% { transform: translateZ(-50cqi) rotateY(0deg) translateZ(50cqi); }
	50% { transform: translateZ(-80cqi) rotateY(45deg) translateZ(50cqi); }
	100% { transform: translateZ(-50cqi) rotateY(90deg) translateZ(50cqi); }
}

.ovh .ovh-ko__dim {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: #000;
	opacity: 0;
	pointer-events: none;
}

.ovh .ovh-in.is-ready .ovh-ko__f.is-active .ovh-ko__dim { animation: ovh-ko-light 1.05s var(--ovh-ease) both; }
.ovh .ovh-in.is-ready .ovh-ko__f.was .ovh-ko__dim { animation: ovh-ko-dark 1.05s var(--ovh-ease) both; }

@keyframes ovh-ko-light {
	from { opacity: .7; }
	to { opacity: 0; }
}

@keyframes ovh-ko-dark {
	from { opacity: 0; }
	to { opacity: .7; }
}

.ovh .ovh-ko__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(5, 8, 7, .78) 0%, rgba(5, 8, 7, .3) 50%, rgba(5, 8, 7, 0) 70%),
		linear-gradient(0deg, rgba(5, 8, 7, .7) 0%, rgba(5, 8, 7, 0) 50%);
}

.ovh .ovh-ko__txt {
	position: absolute;
	z-index: 2;
	bottom: 4.2cqi;
	left: 4.5cqi;
	width: 52%;
}

.ovh .ovh-ko__ttl {
	margin: .45em 0 .4em;
	font-size: calc(4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
}

.ovh .ovh-ko__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-ko__nav {
	position: absolute;
	z-index: 5;
	right: 3.6cqi;
	bottom: 3.6cqi;
	width: min(300px, 30%);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-ko {
		height: calc(125cqi * var(--ovh-h));
	}

	.ovh .ovh-ko__f {
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-ko__shade {
		background: linear-gradient(0deg, rgba(5, 8, 7, .92) 0%, rgba(5, 8, 7, .45) 50%, rgba(5, 8, 7, .1) 75%);
	}

	.ovh .ovh-ko__txt {
		right: 5cqi;
		bottom: calc(5cqi + 64px);
		left: 5cqi;
		width: auto;
	}

	.ovh.no-arrows .ovh-ko__txt {
		bottom: 8cqi;
	}

	.ovh .ovh-ko__ttl {
		font-size: calc(7.6cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-ko__nav {
		right: 5cqi;
		bottom: 5cqi;
		left: 5cqi;
		width: auto;
	}
}

/* ==========================================================================
   Portal: a green disc with the text, the photo opens out from behind it
   ======================================================================= */

.ovh .ovh-po {
	--po-x: 24cqi;
	--po-y: 50%;
	--po-d: 38cqi;
	height: calc(50cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: #0b0b0c;
	isolation: isolate;
}

.ovh .ovh-po__s {
	position: absolute;
	inset: 0;
	z-index: 0;
	clip-path: circle(0% at var(--po-x) var(--po-y));
}

.ovh .ovh-po__s.was {
	z-index: 1;
	clip-path: circle(150% at var(--po-x) var(--po-y));
}

.ovh .ovh-po__s.is-active {
	z-index: 2;
	clip-path: circle(150% at var(--po-x) var(--po-y));
	transition: clip-path 1.3s var(--ovh-ease);
}

.ovh .ovh-po__s :is(.ovh-media, .ovh-noimg) {
	transform: scale(1.15);
}

.ovh .ovh-po__s.was :is(.ovh-media, .ovh-noimg) {
	transform: scale(1);
}

.ovh .ovh-po__s.is-active :is(.ovh-media, .ovh-noimg) {
	transform: scale(1);
	transition: transform 1.8s var(--ovh-out);
}

.ovh .ovh-po__shade {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

.ovh .ovh-po__disc {
	position: absolute;
	z-index: 4;
	top: calc(var(--po-y) - var(--po-d) / 2);
	left: calc(var(--po-x) - var(--po-d) / 2);
	display: grid;
	place-items: center;
	width: var(--po-d);
	height: var(--po-d);
	border-radius: 50%;
	background: var(--ovh-accent);
	color: var(--ovh-on-accent);
	box-shadow: 0 2cqi 5cqi rgba(0, 0, 0, .4);
}

.ovh .ovh-po__ring {
	position: absolute;
	inset: -1.3cqi;
	width: calc(100% + 2.6cqi);
	height: calc(100% + 2.6cqi);
	overflow: visible;
	transform: rotate(-90deg);
	pointer-events: none;
}

.ovh .ovh-po__ring circle {
	fill: none;
	stroke: rgba(255, 255, 255, .18);
	stroke-width: .8;
}

.ovh .ovh-po__ring .ovh-tick {
	stroke: var(--ovh-hl);
	stroke-width: 1.2;
	stroke-dasharray: 100;
	stroke-dashoffset: 100;
	stroke-linecap: round;
}

.ovh .ovh-po__ring .ovh-tick.run {
	animation-name: ovh-fill-ring;
}

.ovh .ovh-po__stack {
	display: grid;
	width: 76%;
	text-align: center;
}

.ovh .ovh-po__txt {
	grid-area: 1 / 1;
	align-self: center;
}

.ovh .ovh-po__txt .ovh-meta {
	justify-content: center;
}

.ovh .ovh-po .ovh-pill {
	background: var(--ovh-panel);
	color: #fff;
}

.ovh .ovh-po .ovh-date {
	color: color-mix(in srgb, var(--ovh-on-accent) 80%, transparent);
}

.ovh .ovh-po__ttl {
	margin: .5em 0 .45em;
	color: var(--ovh-on-accent);
	font-size: calc(2.4cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: 1.04;
}

.ovh .ovh-po__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-po .ovh-ex {
	color: color-mix(in srgb, var(--ovh-on-accent) 85%, transparent);
	font-size: clamp(12px, 1.2cqi, 14px);
	-webkit-line-clamp: 3;
}

.ovh .ovh-po__nav {
	position: absolute;
	z-index: 5;
	right: 3.6cqi;
	bottom: 3.6cqi;
	display: flex;
	gap: 10px;
}

.ovh .ovh-po__nav .ovh-arw {
	border-color: rgba(255, 255, 255, .3);
	background: rgba(0, 0, 0, .35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-po {
		--po-x: 50cqi;
		--po-y: calc(100% - 47cqi);
		--po-d: 84cqi;
		height: calc(150cqi * var(--ovh-h));
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-po__shade {
		background: linear-gradient(0deg, rgba(0, 0, 0, .7), rgba(0, 0, 0, 0) 55%);
	}

	.ovh .ovh-po__ttl {
		font-size: calc(5.6cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-po .ovh-ex {
		font-size: 3.4cqi;
		-webkit-line-clamp: 2;
	}

	.ovh .ovh-po__nav {
		top: 4cqi;
		right: 4cqi;
		bottom: auto;
	}
}

/* ==========================================================================
   Winda: text and photo columns run in opposite directions
   ======================================================================= */

.ovh .ovh-wi {
	display: grid;
	grid-template-columns: 44% minmax(0, 1fr);
	height: calc(48cqi * var(--ovh-h));
	overflow: hidden;
	border-radius: var(--ovh-r);
	background: var(--ovh-panel);
	isolation: isolate;
}

.ovh .ovh-wi__col {
	position: relative;
	min-height: 0;
	overflow: hidden;
}

.ovh .ovh-wi__text {
	background: radial-gradient(130% 120% at 0% 100%, color-mix(in srgb, var(--ovh-accent) 75%, transparent) 0%, transparent 60%);
}

.ovh .ovh-wi__reel {
	position: absolute;
	inset: 0;
	transition: transform 1.1s var(--ovh-ease);
}

.ovh .ovh-wi__photo .ovh-wi__reel {
	transform: translateY(calc(var(--ovh-i, 0) * -100%));
}

.ovh .ovh-wi__text .ovh-wi__reel {
	transform: translateY(calc((var(--ovh-n, 1) - 1 - var(--ovh-i, 0)) * -100%));
}

.ovh .ovh-wi__cell {
	position: absolute;
	top: calc(var(--c) * 100%);
	right: 0;
	left: 0;
	height: 100%;
}

.ovh .ovh-wi__text .ovh-wi__cell {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 4cqi 4.5cqi 10cqi;
}

.ovh.no-arrows .ovh-wi__text .ovh-wi__cell {
	padding-bottom: 4cqi;
}

.ovh .ovh-wi__photo::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	background: var(--ovh-hl);
}

.ovh .ovh-wi__ttl {
	margin: .5em 0 .45em;
	font-size: calc(3.2cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	line-height: 1.02;
}

.ovh .ovh-wi__ttl:first-child {
	margin-top: 0;
}

.ovh .ovh-wi__cell .ovh-ex {
	-webkit-line-clamp: 3;
}

.ovh .ovh-wi__cell .ovh-cta {
	align-self: flex-start;
	margin-top: 1.8cqi;
}

.ovh .ovh-wi__nav {
	position: absolute;
	z-index: 3;
	bottom: 3.4cqi;
	left: 4.5cqi;
	width: calc(44% - 9cqi);
}

@container ovh (max-width: 640px) {
	.ovh .ovh-wi {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: calc(72cqi * var(--ovh-h)) calc(100cqi * var(--ovh-h));
		height: auto;
		border-radius: var(--ovh-rs);
	}

	.ovh .ovh-wi__photo {
		order: -1;
	}

	.ovh .ovh-wi__photo::before {
		top: auto;
		right: 0;
		bottom: 0;
		width: auto;
		height: 5px;
	}

	.ovh .ovh-wi__text .ovh-wi__cell {
		justify-content: flex-start;
		padding: 7cqi 6cqi 22cqi;
	}

	.ovh .ovh-wi__ttl {
		font-size: calc(6.6cqi * var(--ovh-ts) * var(--ovh-tl, 1));
	}

	.ovh .ovh-wi__nav {
		right: 6cqi;
		bottom: 6cqi;
		left: 6cqi;
		width: auto;
	}
}

/* --- quieter motion when the visitor asks for it -------------------------- */

@media (prefers-reduced-motion: reduce) {
	.ovh .ovh-in :is(.ovh-media, .ovh-noimg) {
		transform: none !important;
	}

	.ovh .ovh-tv__run {
		animation-duration: 120s;
	}
}