/* Overlia Headlines: photo reports (Fotorelacje), twelve styles.
 *
 * Markup: .ovf (size container `ovf`, colours as custom properties,
 * --ovf-n reports, --ovf-cols per row) > .ovf-in > cards (a[data-card]) with
 * their photos stacked (.ovf-ph, the shown one .is-on), then .ovf-more (the
 * gallery button). ovh-foto.js flips the photos on hover, or on touch
 * screens while a card is on screen (it then gets .is-live).
 *
 * Every rule starts with .ovf so theme rules for links and images do not
 * win; text colours sit on the text, not on the link, because some themes
 * colour links on hover. */

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

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

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

.ovf a[data-card] {
	display: block;
	outline-offset: 4px;
}

.ovf img {
	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. */
.ovf img:not(.ovf-ph) {
	opacity: 1 !important;
}

.ovf .ovf-ph {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0 !important;
	transition: opacity .35s;
}

.ovf .ovf-ph.is-on {
	opacity: 1 !important;
}

.ovf .ovf-t {
	display: block;
	color: #fff;
	font-size: calc(14px * var(--ovf-ts));
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.15;
	text-transform: uppercase;
}

.ovf.is-case .ovf-t {
	text-transform: none;
}

.ovf .ovf-s {
	display: block;
	margin-top: 6px;
	color: rgba(255, 255, 255, .62);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ovf .ovf-s i {
	font-style: normal;
}

.ovf .ovf-grid {
	display: grid;
	grid-template-columns: repeat(var(--ovf-cols, 4), minmax(0, 1fr));
	gap: 28px;
}

.ovf .ovf-more {
	display: flex;
	justify-content: center;
	margin-top: 46px;
}

.ovf .ovf-more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-width: min(340px, 100%);
	height: 52px;
	padding: 0 30px;
	border-radius: 100px;
	background: var(--ovf-accent);
	color: var(--ovf-on-accent);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1;
	text-transform: uppercase;
	transition: background .25s, color .25s;
}

.ovf .ovf-more a:is(:hover, :focus-visible) {
	background: #fff;
	color: var(--ovf-accent);
}

.ovf .ovf-more svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform .25s;
}

.ovf .ovf-more a:hover svg {
	transform: translateX(4px);
}

/* Phones: rows of cards scroll sideways. */
@container ovf (max-width: 640px) {
	.ovf .ovf-grid {
		display: flex;
		gap: 16px;
		margin: 0 -16px;
		padding: 10px 16px 14px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ovf .ovf-grid::-webkit-scrollbar {
		display: none;
	}

	.ovf .ovf-grid > * {
		flex: none;
		width: 76%;
		scroll-snap-align: center;
	}

	.ovf .ovf-more {
		margin-top: 30px;
	}
}

/* ==========================================================================
   Taśma: a tilted film strip that slides along
   ======================================================================= */

.ovf .ovf-ta {
	padding: 20px 0;
	overflow: hidden;
}

.ovf .ovf-ta__strip {
	margin: 0 -40px;
	transform: rotate(-2deg);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.ovf .ovf-ta__run {
	display: flex;
	width: max-content;
	animation: ovf-run calc(var(--ovf-n) * 9s + 30s) linear infinite;
}

.ovf .ovf-ta:hover .ovf-ta__run,
.ovf .ovf-ta:focus-within .ovf-ta__run {
	animation-play-state: paused;
}

@keyframes ovf-run {
	to { transform: translateX(-50%); }
}

.ovf .ovf-ta__fr {
	position: relative;
	flex: none;
	width: 310px;
	padding: 30px 9px;
	background: #0b0b0c;
}

.ovf .ovf-ta__fr::before,
.ovf .ovf-ta__fr::after {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	height: 12px;
	background: linear-gradient(90deg, transparent 7px, #3a3a3d 7px, #3a3a3d 19px, transparent 19px) 0 0 / 26px 12px repeat-x;
}

.ovf .ovf-ta__fr::before { top: 9px; }
.ovf .ovf-ta__fr::after { bottom: 9px; }

.ovf .ovf-ta__pic {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 3px;
	background: #222;
	transition: transform .35s var(--ovf-out), box-shadow .35s;
}

.ovf .ovf-ta__fr:is(:hover, :focus-visible, .is-live) .ovf-ta__pic {
	z-index: 2;
	box-shadow: 0 0 0 3px var(--ovf-accent), 0 18px 30px rgba(0, 0, 0, .6);
	transform: scale(1.04);
}

.ovf .ovf-ta__cap {
	display: block;
	min-height: 66px;
	padding: 12px 4px 0;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-ta__fr {
		width: 230px;
	}

	.ovf .ovf-ta__strip {
		margin: 0 -20px;
	}
}

/* ==========================================================================
   Stykówka: a contact sheet, a green marker circles the frames
   ======================================================================= */

.ovf .ovf-sy {
	gap: 26px;
	padding: 10px 6px;
}

.ovf .ovf-sy__sheet {
	position: relative;
	padding: 14px 14px 16px;
	border-radius: 4px;
	background: #f1efe8;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
	transform: rotate(var(--rot, 0deg));
	transition: transform .4s var(--ovf-out), box-shadow .4s;
}

.ovf .ovf-sy__sheet:nth-child(4n + 1) { --rot: -1.6deg; }
.ovf .ovf-sy__sheet:nth-child(4n + 2) { --rot: 1.2deg; }
.ovf .ovf-sy__sheet:nth-child(4n + 3) { --rot: -.6deg; }
.ovf .ovf-sy__sheet:nth-child(4n + 4) { --rot: 1.8deg; }

.ovf .ovf-sy__sheet:is(:hover, :focus-visible, .is-live) {
	box-shadow: 0 24px 40px rgba(0, 0, 0, .55);
	transform: rotate(0deg) translateY(-6px);
}

.ovf .ovf-sy__label {
	display: block;
	margin-bottom: 12px;
	padding-bottom: 10px;
	border-bottom: 2px solid #161617;
}

.ovf .ovf-sy__label .ovf-t {
	color: #161617;
}

.ovf .ovf-sy__label .ovf-s {
	margin-top: 4px;
	color: #6c6c6c;
	font-size: 10px;
}

.ovf .ovf-sy__grid {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 5px;
	padding: 6px;
	border-radius: 2px;
	background: #111;
}

.ovf .ovf-sy__f {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #222;
	transition: transform .3s var(--ovf-out), filter .3s;
}

.ovf .ovf-sy__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ovf[data-flip="1"] .ovf-sy__sheet:is(:hover, .is-live) .ovf-sy__f {
	filter: brightness(.55) grayscale(.4);
}

.ovf[data-flip="1"] .ovf-sy__sheet:is(:hover, .is-live) .ovf-sy__f.is-on {
	z-index: 2;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .6);
	filter: none;
	transform: scale(1.12);
}

.ovf .ovf-sy__mark {
	position: absolute;
	z-index: 3;
	top: calc(6px + var(--r, 0) * (100% - 12px) / 3 - 4%);
	left: calc(6px + var(--c, 0) * (50% - 3px) - 6%);
	width: 56%;
	aspect-ratio: 3 / 2.25;
	overflow: visible;
	pointer-events: none;
	transition: left .35s var(--ovf-out), top .35s var(--ovf-out);
}

.ovf .ovf-sy__mark path {
	fill: none;
	stroke: var(--ovf-accent);
	stroke-width: 3.5;
	stroke-linecap: round;
	stroke-dasharray: 330;
	filter: drop-shadow(0 0 1px rgba(255, 255, 255, .6));
}

.ovf .ovf-sy__sheet:is(:hover, .is-live) .ovf-sy__mark path {
	animation: ovf-draw .5s ease-out;
}

@keyframes ovf-draw {
	from { stroke-dashoffset: 330; }
}

/* ==========================================================================
   Odbitki: prints on a table
   ======================================================================= */

.ovf .ovf-od {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 36px;
	padding: 30px 10px 10px;
}

.ovf .ovf-od__p {
	position: relative;
	flex: none;
	width: calc(96% / var(--ovf-cols, 4));
	margin: 0 .5%;
	padding: 10px 10px 0;
	background: #fbfaf6;
	box-shadow: 0 12px 28px rgba(0, 0, 0, .55);
	transform: translateY(var(--dy, 0)) rotate(var(--rot, 0deg));
	transition: transform .45s var(--ovf-out), box-shadow .45s;
}

.ovf .ovf-od__p:nth-child(4n + 1) { --rot: -5deg; --dy: 8px; }
.ovf .ovf-od__p:nth-child(4n + 2) { --rot: 3deg; --dy: -10px; z-index: 1; }
.ovf .ovf-od__p:nth-child(4n + 3) { --rot: -2deg; --dy: 12px; }
.ovf .ovf-od__p:nth-child(4n + 4) { --rot: 4.5deg; --dy: -4px; }

.ovf .ovf-od__p:is(:hover, :focus-visible, .is-live) {
	z-index: 5;
	box-shadow: 0 30px 50px rgba(0, 0, 0, .65);
	transform: translateY(-16px) rotate(0deg) scale(1.07);
}

.ovf .ovf-od__pic {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #ddd;
}

.ovf .ovf-od__cap {
	display: block;
	padding: 14px 4px 18px;
}

.ovf .ovf-od__cap .ovf-t {
	color: var(--ovf-panel);
}

.ovf .ovf-od__cap .ovf-s {
	color: #77756f;
	font-size: 10px;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-od {
		flex-wrap: nowrap;
		justify-content: flex-start;
		margin: 0 -16px;
		padding: 26px 20px 30px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ovf .ovf-od__p {
		width: 72%;
		margin: 0 -4% 0 0;
		scroll-snap-align: center;
	}
}

/* ==========================================================================
   Wachlarz: a fan of photos that opens
   ======================================================================= */

.ovf .ovf-wa__fan {
	position: relative;
	display: block;
	height: 230px;
}

.ovf .ovf-wa__ph {
	position: absolute;
	z-index: 1;
	right: 9%;
	bottom: 40px;
	left: 9%;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border: 4px solid #fff;
	border-radius: 10px;
	background: #222;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
	opacity: 0;
	transform: rotate(0) scale(.9);
	transform-origin: 50% 115%;
	transition: transform .5s var(--ovf-out), opacity .35s;
}

.ovf .ovf-wa__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ovf .ovf-wa__ph[data-pos="0"] { z-index: 5; opacity: 1; transform: rotate(0) scale(1); }
.ovf .ovf-wa__ph[data-pos="1"] { z-index: 4; opacity: 1; transform: rotate(-8deg) scale(.96); }
.ovf .ovf-wa__ph[data-last] { z-index: 3; opacity: 1; transform: rotate(8deg) scale(.96); }

.ovf .ovf-wa__card:is(:hover, :focus-visible, .is-live) .ovf-wa__ph[data-pos="1"] { transform: rotate(-14deg) scale(.94); }
.ovf .ovf-wa__card:is(:hover, :focus-visible, .is-live) .ovf-wa__ph[data-last] { transform: rotate(14deg) scale(.94); }
.ovf .ovf-wa__card:is(:hover, :focus-visible, .is-live) .ovf-wa__ph[data-pos="2"] { z-index: 2; opacity: 1; transform: rotate(-26deg) scale(.86); }
.ovf .ovf-wa__card:is(:hover, :focus-visible, .is-live) .ovf-wa__ph[data-second] { z-index: 2; opacity: 1; transform: rotate(26deg) scale(.86); }

.ovf .ovf-wa__cap {
	position: relative;
	z-index: 6;
	display: block;
	padding-top: 4px;
	text-align: center;
}

/* ==========================================================================
   Ściana: a live wall, every tile plays its photos
   ======================================================================= */

.ovf .ovf-sc {
	display: grid;
	grid-template-columns: 1.35fr 1fr 1fr;
	grid-auto-rows: calc(23cqi - 6px);
	gap: 12px;
}

.ovf .ovf-sc__t {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: #111;
	isolation: isolate;
}

.ovf .ovf-sc__t:first-child { grid-row: span 2; }
.ovf .ovf-sc[data-n="2"] .ovf-sc__t:nth-child(2) { grid-row: span 2; grid-column: span 2; }
.ovf .ovf-sc[data-n="3"] .ovf-sc__t:nth-child(n + 2) { grid-column: span 2; }
.ovf .ovf-sc[data-n="4"] .ovf-sc__t:nth-child(2) { grid-column: span 2; }
.ovf .ovf-sc[data-n="1"] { grid-template-columns: 1fr; }

.ovf .ovf-sc__t .ovf-ph {
	transform: scale(1.12);
	transition: opacity 1.1s ease, transform 0s 1.1s;
}

.ovf .ovf-sc__t .ovf-ph.is-on {
	transform: scale(1);
	transition: opacity 1.1s ease, transform 6s cubic-bezier(.2, .5, .4, 1);
}

.ovf .ovf-sc__t::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(0deg, rgba(5, 10, 7, .9) 0%, rgba(5, 10, 7, .25) 45%, rgba(5, 10, 7, 0) 65%);
}

.ovf .ovf-sc__cap {
	position: absolute;
	z-index: 2;
	right: 22px;
	bottom: 20px;
	left: 22px;
}

.ovf .ovf-sc__t .ovf-t {
	font-size: calc(17px * var(--ovf-ts));
}

.ovf .ovf-sc__t:first-child .ovf-t {
	font-size: calc(3cqi * var(--ovf-ts));
	line-height: 1;
}

.ovf .ovf-sc__go {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 0;
	overflow: hidden;
	color: var(--ovf-hl);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	opacity: 0;
	transition: height .3s var(--ovf-out), margin .3s var(--ovf-out), opacity .3s;
}

.ovf .ovf-sc__go svg {
	width: 14px;
	height: 14px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2.4;
}

.ovf .ovf-sc__t:is(:hover, :focus-visible) .ovf-sc__go {
	height: 18px;
	margin-top: 10px;
	opacity: 1;
}

.ovf .ovf-sc__live {
	position: absolute;
	z-index: 2;
	top: 18px;
	left: 20px;
	display: flex;
	gap: 4px;
}

.ovf .ovf-sc__live i {
	width: 18px;
	height: 3px;
	border-radius: 3px;
	background: rgba(255, 255, 255, .3);
	transition: background .3s;
}

.ovf .ovf-sc__live i.is-on {
	background: #fff;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-sc {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 64cqi;
		grid-auto-rows: 44cqi;
		gap: 10px;
	}

	.ovf .ovf-sc .ovf-sc__t:first-child {
		grid-row: span 1;
		grid-column: span 2;
	}

	.ovf .ovf-sc[data-n="2"] .ovf-sc__t:nth-child(2),
	.ovf .ovf-sc[data-n="3"] .ovf-sc__t:nth-child(n + 2),
	.ovf .ovf-sc[data-n="4"] .ovf-sc__t:nth-child(2) {
		grid-row: span 1;
		grid-column: span 2;
	}

	.ovf .ovf-sc__t {
		border-radius: 16px;
	}

	.ovf .ovf-sc__t:first-child .ovf-t {
		font-size: calc(6.4cqi * var(--ovf-ts));
	}

	.ovf .ovf-sc__cap {
		right: 14px;
		bottom: 14px;
		left: 14px;
	}

	.ovf .ovf-sc__t .ovf-t {
		font-size: calc(13px * var(--ovf-ts));
	}
}

/* ==========================================================================
   Wizjer: a camera viewfinder with a date imprint and a shutter
   ======================================================================= */

.ovf .ovf-wz {
	gap: 22px;
}

.ovf .ovf-wz__vf {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 14px;
	background: #000;
}

.ovf .ovf-wz__vf::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 10px;
	background:
		linear-gradient(#fff, #fff) 0 0 / 18px 2px, linear-gradient(#fff, #fff) 0 0 / 2px 18px,
		linear-gradient(#fff, #fff) 100% 0 / 18px 2px, linear-gradient(#fff, #fff) 100% 0 / 2px 18px,
		linear-gradient(#fff, #fff) 0 100% / 18px 2px, linear-gradient(#fff, #fff) 0 100% / 2px 18px,
		linear-gradient(#fff, #fff) 100% 100% / 18px 2px, linear-gradient(#fff, #fff) 100% 100% / 2px 18px;
	background-repeat: no-repeat;
	opacity: .85;
	pointer-events: none;
}

.ovf .ovf-wz__focus {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 34px;
	height: 24px;
	margin: -12px 0 0 -17px;
	border: 1.5px solid rgba(255, 255, 255, .8);
	border-radius: 2px;
	transition: border-color .15s, transform .2s;
}

.ovf .ovf-wz__card:is(:hover, :focus-visible, .is-live) .ovf-wz__focus {
	border-color: #39e27a;
	transform: scale(.82);
}

.ovf .ovf-wz__stamp {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 13px;
	color: #ff9a2e;
	font-family: ui-monospace, Menlo, Consolas, monospace;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
	text-shadow: 0 0 6px rgba(255, 120, 20, .85), 0 0 1px #ff6a00;
}

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

.ovf .ovf-wz__shut.is-snap {
	animation: ovf-snap .22s ease-out;
}

@keyframes ovf-snap {
	30% { opacity: 1; }
}

.ovf .ovf-wz__bar {
	display: block;
	margin-top: 12px;
	padding: 0 2px;
}

.ovf .ovf-wz__bar .ovf-s::before {
	content: "\25CF  ";
	color: #e0322b;
}

/* ==========================================================================
   Album: the cover opens in 3D
   ======================================================================= */

.ovf .ovf-al {
	gap: 34px;
	padding: 10px 0;
}

.ovf .ovf-al__card {
	position: relative;
}

.ovf .ovf-al__card:is(:hover, :focus-visible, .is-live) {
	z-index: 5;
}

.ovf .ovf-al__book {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	perspective: 1400px;
}

.ovf .ovf-al__inside {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 3px 10px 10px 3px;
	background: #ecebe5;
	box-shadow: 0 14px 30px rgba(0, 0, 0, .5), 3px 1px 0 #d6d4cc, 6px 2px 0 #c4c2ba;
}

.ovf .ovf-al__inside .ovf-ph {
	inset: 7%;
	width: 86%;
	height: 86%;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.ovf .ovf-al__cover {
	position: absolute;
	z-index: 3;
	inset: 0;
	transform-origin: 0 50%;
	transform-style: preserve-3d;
	transition: transform .9s var(--ovf-ease);
}

.ovf .ovf-al__card:is(:hover, :focus-visible, .is-live) .ovf-al__cover {
	transform: rotateY(-158deg);
}

.ovf .ovf-al__front,
.ovf .ovf-al__back {
	position: absolute;
	inset: 0;
	overflow: hidden;
	border-radius: 3px 10px 10px 3px;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ovf .ovf-al__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ovf .ovf-al__front::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, .1) 7%, rgba(255, 255, 255, .18) 8%, rgba(0, 0, 0, 0) 12%),
		linear-gradient(0deg, rgba(0, 30, 15, .75), rgba(0, 30, 15, 0) 45%);
}

.ovf .ovf-al__stamp {
	position: absolute;
	z-index: 2;
	bottom: 12px;
	left: 14%;
	padding: 5px 10px;
	border: 1.5px solid rgba(255, 255, 255, .8);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2em;
	text-transform: uppercase;
}

.ovf .ovf-al__back {
	background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .03) 0 6px, rgba(0, 0, 0, 0) 6px 12px), var(--ovf-panel);
	transform: rotateY(180deg);
}

.ovf .ovf-al__cap {
	display: block;
	padding-top: 18px;
}

/* ==========================================================================
   Wystawa: framed photos on a gallery wall
   ======================================================================= */

.ovf .ovf-wy {
	gap: 38px;
	padding: 76px 34px 40px;
	overflow: hidden;
	border-radius: 26px;
	background: linear-gradient(#202122, #18191a);
}

.ovf .ovf-wy__item {
	position: relative;
}

.ovf .ovf-wy__item:nth-child(even) {
	margin-top: 34px;
}

.ovf .ovf-wy__item::before {
	content: "";
	position: absolute;
	z-index: 0;
	top: -110px;
	right: -40%;
	left: -40%;
	height: 150%;
	background: radial-gradient(50% 55% at 50% 0%, rgba(255, 238, 205, .2), rgba(255, 238, 205, 0) 72%);
	opacity: .55;
	pointer-events: none;
	transition: opacity .5s;
}

.ovf .ovf-wy__item:is(:hover, :focus-visible, .is-live)::before {
	opacity: 1;
}

.ovf .ovf-wy__wire {
	position: absolute;
	z-index: 1;
	top: -34px;
	left: 22%;
	width: 56%;
	height: 36px;
	overflow: visible;
}

.ovf .ovf-wy__wire path {
	fill: none;
	stroke: #77787a;
	stroke-width: 1;
}

.ovf .ovf-wy__wire circle {
	fill: #9a9b9d;
}

.ovf .ovf-wy__frame {
	position: relative;
	z-index: 1;
	display: block;
	padding: 11px;
	background: #0a0a0a;
	box-shadow: 0 20px 34px rgba(0, 0, 0, .6), inset 0 0 0 1px #2c2c2c;
	transition: transform .45s var(--ovf-out), box-shadow .45s;
}

.ovf .ovf-wy__item:is(:hover, :focus-visible, .is-live) .ovf-wy__frame {
	box-shadow: 0 30px 46px rgba(0, 0, 0, .7), inset 0 0 0 1px #2c2c2c;
	transform: translateY(-4px) scale(1.03);
}

.ovf .ovf-wy__mat {
	display: block;
	padding: 10px;
	background: #f3f1eb;
}

.ovf .ovf-wy__pic {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #ccc;
}

.ovf .ovf-wy__plate {
	position: relative;
	z-index: 1;
	display: block;
	width: 84%;
	margin: 20px auto 0;
	padding: 10px 12px 11px;
	border-radius: 2px;
	background: #f3f1eb;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .45);
}

.ovf .ovf-wy__plate .ovf-t {
	color: #161617;
	font-size: calc(12.5px * var(--ovf-ts));
}

.ovf .ovf-wy__plate .ovf-s {
	margin-top: 5px;
	color: #6c6c6c;
	font-size: 9.5px;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-wy.ovf-grid {
		margin: 0;
		padding: 70px 22px 34px;
		border-radius: 18px;
	}

	.ovf .ovf-wy__item:nth-child(even) {
		margin-top: 0;
	}
}

/* ==========================================================================
   Kafle: green-band cards, the photo turns over in nine tiles
   ======================================================================= */

.ovf .ovf-ka__card {
	overflow: hidden;
	border-radius: 26px;
	background: var(--ovf-accent);
	transition: transform .3s var(--ovf-out);
}

.ovf .ovf-ka__card:is(:hover, :focus-visible) {
	transform: translateY(-5px);
}

/* The Kafle family's tiles: a grid of tiles, each turning over around
   (--ax, --ay); the faces show their part of --img-a / --img-b. */
.ovf .ovf-tiles {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--cols, 3), 1fr);
	grid-template-rows: repeat(var(--rows, 3), 1fr);
	background: #0b0b0c;
	perspective: 900px;
}

.ovf .ovf-tile {
	position: relative;
	transform: rotate3d(var(--ax, 0), var(--ay, 1), 0, calc(var(--turn, 0) * 180deg));
	transform-style: preserve-3d;
	transition: transform var(--speed, .6s) var(--ovf-ease) calc(var(--d) * var(--step, 55ms));
}

/* Each face holds the whole photo, cropped like object-fit: cover to the
   size of the full tile grid, and shifted so it shows its own slice: no
   stretching, whatever the card's shape. */
.ovf .ovf-tile__f {
	position: absolute;
	inset: -.5px;
	overflow: hidden;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}

.ovf .ovf-tile__f::before {
	content: "";
	position: absolute;
	top: calc(var(--y) * -100%);
	left: calc(var(--x) * -100%);
	width: calc(var(--cols, 3) * 100%);
	height: calc(var(--rows, 3) * 100%);
	background: var(--img-a) center / cover no-repeat;
}

.ovf .ovf-tile__f--b {
	transform: rotate3d(var(--ax, 0), var(--ay, 1), 0, 180deg);
}

.ovf .ovf-tile__f--b::before {
	background-image: var(--img-b);
}

.ovf .ovf-ka__card .ovf-tiles {
	aspect-ratio: 16 / 10;
}

.ovf .ovf-ka__band {
	display: block;
	padding: 16px 16px 18px;
	text-align: center;
}

.ovf .ovf-ka__band .ovf-t {
	color: var(--ovf-on-accent);
	font-size: calc(15px * var(--ovf-ts));
	font-weight: 600;
}

.ovf .ovf-ka__band .ovf-s {
	color: color-mix(in srgb, var(--ovf-on-accent) 78%, transparent);
	font-size: 10px;
}

/* ==========================================================================
   Relacje: upright story cards
   ======================================================================= */

.ovf .ovf-re {
	gap: 16px;
}

.ovf .ovf-re__s {
	position: relative;
	aspect-ratio: 9 / 15;
	overflow: hidden;
	border-radius: 18px;
	background: #111;
	isolation: isolate;
	transition: transform .35s var(--ovf-out);
}

.ovf .ovf-re__s:is(:hover, :focus-visible) {
	transform: scale(1.035);
}

.ovf .ovf-re__s::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 22%), linear-gradient(0deg, rgba(0, 20, 10, .9), rgba(0, 20, 10, 0) 48%);
}

.ovf .ovf-re__bars {
	position: absolute;
	z-index: 2;
	top: 9px;
	right: 9px;
	left: 9px;
	display: flex;
	gap: 3px;
}

.ovf[data-flip="0"] .ovf-re__bars {
	display: none;
}

.ovf .ovf-re__bars i {
	position: relative;
	flex: 1;
	height: 2.5px;
	overflow: hidden;
	border-radius: 3px;
	background: rgba(255, 255, 255, .35);
}

.ovf .ovf-re__bars i::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #fff;
	transform: scaleX(0);
	transform-origin: 0 50%;
}

.ovf .ovf-re__bars i.is-past::after {
	transform: scaleX(1);
}

.ovf .ovf-re__bars i.is-on::after {
	animation: ovf-fill var(--every, 1.2s) linear forwards;
}

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

.ovf .ovf-re__who {
	position: absolute;
	z-index: 2;
	top: 20px;
	right: 9px;
	left: 9px;
	display: flex;
	align-items: center;
	gap: 7px;
}

.ovf .ovf-re__icon {
	display: grid;
	flex: none;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 2px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--ovf-accent), 0 0 0 3.5px var(--ovf-hl);
	color: var(--ovf-accent);
	font-size: 12px;
	font-weight: 800;
	object-fit: contain;
}

.ovf .ovf-re__name {
	display: block;
	min-width: 0;
	overflow: hidden;
	color: #fff;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .03em;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ovf .ovf-re__name small {
	display: block;
	color: rgba(255, 255, 255, .7);
	font-size: 9.5px;
	font-weight: 600;
}

.ovf .ovf-re__cap {
	position: absolute;
	z-index: 2;
	right: 12px;
	bottom: 14px;
	left: 12px;
}

.ovf .ovf-re__cap .ovf-t {
	line-height: 1.1;
}

.ovf .ovf-re__cap .ovf-s {
	font-size: 9.5px;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-re.ovf-grid > * {
		width: 47%;
		scroll-snap-align: start;
	}
}

/* ==========================================================================
   Ciemnia: prints drying on a line in red safelight
   ======================================================================= */

.ovf .ovf-ci {
	position: relative;
	display: grid;
	gap: 34px;
	padding: 36px 26px 44px;
	overflow: hidden;
	border-radius: 26px;
	background: radial-gradient(70% 90% at 50% -20%, rgba(220, 30, 20, .45), rgba(220, 30, 20, 0) 70%), #120505;
}

.ovf .ovf-ci__line {
	position: relative;
	padding-top: 34px;
}

.ovf .ovf-ci__string {
	position: absolute;
	top: 0;
	left: -26px;
	width: calc(100% + 52px);
	height: 60px;
	overflow: visible;
}

.ovf .ovf-ci__string path {
	fill: none;
	stroke: #4a3030;
	stroke-width: 2;
}

.ovf .ovf-ci__row {
	position: relative;
	display: flex;
	justify-content: space-around;
	gap: 16px;
}

.ovf .ovf-ci__p {
	position: relative;
	flex: none;
	width: 22%;
	margin-top: var(--sag, 0);
	padding: 9px 9px 0;
	background: #efe6dc;
	box-shadow: 0 16px 26px rgba(0, 0, 0, .6);
	transform-origin: 50% -16px;
	animation: ovf-sway 4.6s ease-in-out infinite alternate;
	animation-delay: var(--dl, 0s);
}

.ovf .ovf-ci__p::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: -20px;
	left: 50%;
	width: 11px;
	height: 32px;
	margin-left: -5px;
	border-radius: 3px;
	background: linear-gradient(90deg, #8f6738, #c79a63 45%, #8f6738);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .5);
}

.ovf .ovf-ci__p::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: rgba(255, 25, 15, .32);
	mix-blend-mode: multiply;
	pointer-events: none;
	transition: opacity 1.2s;
}

.ovf .ovf-ci__p:is(:hover, :focus-visible, .is-live) {
	z-index: 3;
	animation-play-state: paused;
}

.ovf .ovf-ci__p:is(:hover, :focus-visible, .is-live)::after {
	opacity: 0;
}

@keyframes ovf-sway {
	from { transform: rotate(-1.6deg); }
	to { transform: rotate(1.6deg); }
}

.ovf .ovf-ci__pic {
	position: relative;
	display: block;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: #2a1010;
}

.ovf .ovf-ci__pic .ovf-ph {
	filter: sepia(1) saturate(2.4) hue-rotate(-28deg) brightness(.42) contrast(.75);
	transition: opacity .35s, filter 1.4s ease;
}

.ovf .ovf-ci__p:is(:hover, :focus-visible, .is-live) .ovf-ci__pic .ovf-ph {
	filter: none;
}

.ovf .ovf-ci__cap {
	display: block;
	padding: 11px 3px 14px;
}

.ovf .ovf-ci__cap .ovf-t {
	color: #2c1414;
	font-size: calc(12.5px * var(--ovf-ts));
}

.ovf .ovf-ci__cap .ovf-s {
	margin-top: 5px;
	color: #7b5c55;
	font-size: 9.5px;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-ci {
		padding: 30px 0 34px;
		border-radius: 18px;
	}

	.ovf .ovf-ci__string {
		left: 0;
		width: 100%;
	}

	.ovf .ovf-ci__row {
		justify-content: flex-start;
		gap: 22px;
		margin-top: -24px;
		padding: 24px 20px 10px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.ovf .ovf-ci__p {
		width: 62%;
		margin-top: 0;
		scroll-snap-align: center;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ovf .ovf-ci__p {
		animation: none;
	}

	.ovf .ovf-ta__run {
		animation-duration: 240s;
	}
}

/* ==========================================================================
   Skosy: slanted panels, the one under the mouse widens
   ======================================================================= */

.ovf .ovf-sk {
	display: flex;
	height: 40cqi;
	overflow: hidden;
	border-radius: 26px;
	background: #0b0b0c;
}

.ovf .ovf-sk__p {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	margin-left: calc(-5cqi + 7px);
	overflow: hidden;
	clip-path: polygon(5cqi 0, 100% 0, calc(100% - 5cqi) 100%, 0 100%);
	transition: flex-grow .7s var(--ovf-ease);
}

.ovf .ovf-sk__p:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - 5cqi) 100%, 0 100%);
}

.ovf .ovf-sk__p:last-child {
	clip-path: polygon(5cqi 0, 100% 0, 100% 100%, 0 100%);
}

.ovf .ovf-sk__p:only-child {
	clip-path: none;
}

.ovf .ovf-sk__p:is(:hover, :focus-visible) {
	flex-grow: 2.4;
}

.ovf .ovf-sk__p .ovf-ph {
	transition: opacity .35s, filter .6s;
}

.ovf .ovf-sk:hover .ovf-sk__p:not(:hover) .ovf-ph {
	filter: grayscale(.85) brightness(.5);
}

.ovf .ovf-sk__p::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, 0) 50%);
}

.ovf .ovf-sk__cap {
	position: absolute;
	z-index: 2;
	right: 6cqi;
	bottom: 20px;
	left: 5cqi;
}

.ovf .ovf-sk__p:first-child .ovf-sk__cap {
	left: 22px;
}

.ovf .ovf-sk__cap .ovf-t {
	font-size: calc(16px * var(--ovf-ts));
}

.ovf .ovf-sk__cap .ovf-s {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-sk {
		flex-direction: column;
		height: calc(30cqi * var(--ovf-n) + 20cqi);
		border-radius: 18px;
	}

	.ovf .ovf-sk__p,
	.ovf .ovf-sk__p:first-child,
	.ovf .ovf-sk__p:last-child {
		margin: calc(-6cqi + 6px) 0 0;
		clip-path: polygon(0 6cqi, 100% 0, 100% calc(100% - 6cqi), 0 100%);
	}

	.ovf .ovf-sk__p:first-child {
		margin-top: 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6cqi), 0 100%);
	}

	.ovf .ovf-sk__p:last-child {
		clip-path: polygon(0 6cqi, 100% 0, 100% 100%, 0 100%);
	}

	.ovf .ovf-sk__p::after {
		background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, .2) 70%);
	}

	.ovf .ovf-sk__cap,
	.ovf .ovf-sk__p:first-child .ovf-sk__cap {
		left: 18px;
		bottom: calc(6cqi + 12px);
	}
}

/* ==========================================================================
   Slajdy: 35 mm slides on a light table
   ======================================================================= */

.ovf .ovf-sl {
	position: relative;
	padding: 36px 30px 40px;
	overflow: hidden;
	border-radius: 26px;
	background: radial-gradient(120% 140% at 50% 0%, #fff 0%, #eef5f8 45%, #d3e2ea 100%);
	box-shadow: inset 0 0 60px rgba(150, 190, 210, .35);
}

.ovf .ovf-sl::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(0, 60, 90, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 60, 90, .06) 1px, transparent 1px);
	background-size: 40px 40px;
	pointer-events: none;
}

.ovf .ovf-sl__table {
	position: relative;
	gap: 30px;
}

.ovf .ovf-sl__mount {
	position: relative;
	padding: 11% 11% 9%;
	border-radius: 7px;
	background: linear-gradient(#f8f5ed, #ebe6d8);
	box-shadow: 0 10px 18px rgba(20, 50, 70, .25), inset 0 0 0 1px rgba(0, 0, 0, .05);
	transform: rotate(var(--rot, 0deg));
	transition: transform .45s var(--ovf-out), box-shadow .45s;
}

.ovf .ovf-sl__mount:nth-child(4n + 1) { --rot: -2deg; }
.ovf .ovf-sl__mount:nth-child(4n + 2) { --rot: 1.5deg; }
.ovf .ovf-sl__mount:nth-child(4n + 3) { --rot: -.8deg; }
.ovf .ovf-sl__mount:nth-child(4n + 4) { --rot: 2.2deg; }

.ovf .ovf-sl__mount:is(:hover, :focus-visible, .is-live) {
	box-shadow: 0 24px 34px rgba(20, 50, 70, .35), inset 0 0 0 1px rgba(0, 0, 0, .05);
	transform: rotate(0deg) translateY(-8px) scale(1.05);
}

.ovf .ovf-sl__win {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: 2px;
	background: #222;
	box-shadow: 0 0 0 2px rgba(0, 0, 0, .18);
}

.ovf .ovf-sl__cap {
	display: block;
	padding-top: 12%;
	text-align: center;
}

.ovf .ovf-sl__cap .ovf-t {
	color: #1e2a24;
	font-size: calc(12.5px * var(--ovf-ts));
}

.ovf .ovf-sl__cap .ovf-s {
	color: #6f7a74;
	font-size: 9.5px;
}

@container ovf (max-width: 640px) {
	.ovf .ovf-sl {
		padding: 26px 0;
		border-radius: 18px;
	}
}

/* ==========================================================================
   Magazyn: magazine covers
   ======================================================================= */

.ovf .ovf-mg {
	gap: 26px;
}

.ovf .ovf-mg__cover {
	position: relative;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	border-radius: 6px;
	background: #111;
	box-shadow: 0 16px 30px rgba(0, 0, 0, .5);
	transform-origin: 0 50%;
	transition: transform .5s var(--ovf-out), box-shadow .5s;
}

.ovf .ovf-mg__cover:is(:hover, :focus-visible, .is-live) {
	box-shadow: 14px 24px 40px rgba(0, 0, 0, .6);
	transform: perspective(900px) rotateY(-9deg) translateX(4px);
}

.ovf .ovf-mg__pic {
	position: absolute;
	inset: 0;
}

.ovf .ovf-mg__cover::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .8) 100%);
}

.ovf .ovf-mg__head {
	position: absolute;
	z-index: 2;
	top: 4%;
	right: 6%;
	left: 6%;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.ovf .ovf-mg__mast {
	color: #fff;
	font-size: calc(100cqi / var(--ovf-cols, 4) * .28);
	font-weight: 900;
	letter-spacing: -.02em;
	line-height: .8;
	text-transform: uppercase;
}

.ovf .ovf-mg__issue {
	padding-left: 2px;
	color: #fff;
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .18em;
	line-height: 1.3;
	text-transform: uppercase;
}

.ovf .ovf-mg__lines {
	position: absolute;
	z-index: 2;
	right: 30%;
	bottom: 6%;
	left: 6%;
}

.ovf .ovf-mg__kick {
	display: inline-block;
	padding: 3px 7px;
	background: var(--ovf-hl);
	color: #111;
	font-size: 9.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}

.ovf .ovf-mg__lines .ovf-t {
	display: -webkit-box;
	margin-top: 8px;
	overflow: hidden;
	font-size: calc(clamp(13px, 100cqi / var(--ovf-cols, 4) * .072, 22px) * var(--ovf-ts));
	line-height: 1.05;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
}

.ovf .ovf-mg__by {
	display: block;
	margin-top: 7px;
	color: rgba(255, 255, 255, .8);
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.ovf .ovf-mg__code {
	position: absolute;
	z-index: 2;
	right: 6%;
	bottom: 6%;
	width: 18%;
	aspect-ratio: 2 / 1.2;
	border: 3px solid #fff;
	background: #fff repeating-linear-gradient(90deg, #111 0 2px, #fff 2px 3px, #111 3px 4px, #fff 4px 6px, #111 6px 9px, #fff 9px 10px);
}

@container ovf (max-width: 640px) {
	.ovf .ovf-mg__mast {
		font-size: 21cqi;
	}
}

/* ==========================================================================
   Pocztówki: postcards with a stamp and a postmark
   ======================================================================= */

.ovf .ovf-pc {
	gap: 30px;
	padding: 6px;
}

.ovf .ovf-pc__card {
	position: relative;
	transform: rotate(var(--rot, 0deg));
	transition: transform .45s var(--ovf-out);
}

.ovf .ovf-pc__card:nth-child(4n + 1) { --rot: -2deg; }
.ovf .ovf-pc__card:nth-child(4n + 2) { --rot: 1.5deg; }
.ovf .ovf-pc__card:nth-child(4n + 3) { --rot: -1deg; }
.ovf .ovf-pc__card:nth-child(4n + 4) { --rot: 2deg; }

.ovf .ovf-pc__card:is(:hover, :focus-visible, .is-live) {
	z-index: 3;
	transform: rotate(0deg) translateY(-6px) scale(1.04);
}

.ovf .ovf-pc__front {
	position: relative;
	display: block;
	padding: 8px;
	background: #fdfcf8;
	box-shadow: 0 12px 24px rgba(0, 0, 0, .45);
}

.ovf .ovf-pc__pic {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: #ddd;
}

.ovf .ovf-pc__stamp {
	position: absolute;
	z-index: 2;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 54px;
	padding: 6px;
	background: #fdfcf8;
	-webkit-mask: radial-gradient(circle at 3px 3px, transparent 2.2px, #000 2.6px) -3px -3px / 6px 6px;
	mask: radial-gradient(circle at 3px 3px, transparent 2.2px, #000 2.6px) -3px -3px / 6px 6px;
}

.ovf .ovf-pc__stamp img,
.ovf .ovf-pc__mark {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--ovf-accent);
	object-fit: contain;
}

.ovf .ovf-pc__post {
	position: absolute;
	z-index: 3;
	top: 34px;
	right: 34px;
	width: 96px;
	height: 48px;
	overflow: visible;
	filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, .9));
	opacity: .85;
	transform: rotate(-12deg);
}

.ovf .ovf-pc__post circle,
.ovf .ovf-pc__post path {
	fill: none;
	stroke: #1b1b1b;
	stroke-width: 1.6;
}

.ovf .ovf-pc__post text {
	fill: #1b1b1b;
	font-family: var(--ovf-font);
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .04em;
}

.ovf .ovf-pc__cap {
	display: block;
	padding: 14px 4px 0;
}

/* ==========================================================================
   Żaluzje: photos behind blinds that open
   ======================================================================= */

.ovf .ovf-zl {
	gap: 28px;
}

.ovf .ovf-zl__pic {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 14px;
	background: #111;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .45);
}

.ovf .ovf-zl__pic::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 0;
	right: 0;
	left: 0;
	height: 7px;
	background: linear-gradient(#f2f4f2, #c9d0cb);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .35);
}

.ovf .ovf-zl__slats {
	position: absolute;
	z-index: 2;
	inset: 0;
	display: flex;
	flex-direction: column;
}

.ovf .ovf-zl__slats i {
	flex: 1;
	background: linear-gradient(#f0f2f0, #c7cfca 60%, #a9b3ad);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	transform: scaleY(.84);
	transition: transform .55s var(--ovf-ease) calc(var(--k) * 35ms);
}

.ovf .ovf-zl__card:is(:hover, :focus-visible, .is-live) .ovf-zl__slats i {
	transform: scaleY(.04);
}

.ovf .ovf-zl__cap {
	display: block;
	padding-top: 14px;
}

/* ==========================================================================
   Ekrany: old TV sets, a channel switch between photos
   ======================================================================= */

.ovf .ovf-ek {
	gap: 26px;
}

.ovf .ovf-ek__body {
	display: block;
	padding: 12px 12px 10px;
	border-radius: 22px;
	background: linear-gradient(160deg, #3a3c3e, #1b1c1d 60%);
	box-shadow: 0 16px 30px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .12);
	transition: transform .4s var(--ovf-out);
}

.ovf .ovf-ek__tv:is(:hover, :focus-visible, .is-live) .ovf-ek__body {
	transform: translateY(-5px);
}

.ovf .ovf-ek__screen {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 16% / 20%;
	background: #050505;
	box-shadow: 0 0 0 3px #0c0c0c;
}

.ovf .ovf-ek__screen .ovf-ph {
	filter: saturate(1.15) contrast(1.05) brightness(.8);
	transition: opacity .15s, filter .4s;
}

.ovf .ovf-ek__tv:is(:hover, :focus-visible, .is-live) .ovf-ek__screen .ovf-ph {
	filter: saturate(1.2) contrast(1.08) brightness(1);
}

.ovf .ovf-ek__screen::before {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
	background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .22) 0 1px, rgba(0, 0, 0, 0) 1px 3px);
	pointer-events: none;
}

.ovf .ovf-ek__screen::after {
	content: "";
	position: absolute;
	z-index: 3;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 80% at 30% 0%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 50%);
	box-shadow: inset 0 0 40px rgba(0, 0, 0, .75);
	pointer-events: none;
}

.ovf .ovf-ek__noise {
	position: absolute;
	z-index: 4;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	background-size: 160px;
	opacity: 0;
	pointer-events: none;
}

.ovf .ovf-ek__noise.is-snap {
	animation: ovf-noise .32s steps(4);
}

@keyframes ovf-noise {
	0% { opacity: .95; background-position: 0 0; }
	25% { background-position: -40px 20px; }
	50% { opacity: .9; background-position: 30px -30px; }
	75% { background-position: -20px 40px; }
	100% { opacity: 0; }
}

.ovf .ovf-ek__panel {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 9px 4px 0;
}

.ovf .ovf-ek__panel i {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 35%, #8a8d90, #2a2b2c);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}

.ovf .ovf-ek__panel b {
	flex: 1;
	height: 8px;
	margin-left: 6px;
	border-radius: 3px;
	background: repeating-linear-gradient(90deg, #0f0f10 0 2px, #2c2d2f 2px 4px);
}

.ovf .ovf-ek__cap {
	display: block;
	padding-top: 14px;
}

/* ==========================================================================
   Winyle: record sleeves, the record slides out and spins
   ======================================================================= */

.ovf .ovf-wn {
	gap: 26px;
}

.ovf .ovf-wn__set {
	position: relative;
	display: block;
	width: 72%;
	aspect-ratio: 1 / 1;
}

.ovf .ovf-wn__sleeve {
	position: relative;
	z-index: 2;
	display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 4px;
	background: #111;
	box-shadow: 0 14px 26px rgba(0, 0, 0, .55);
}

.ovf .ovf-wn__sleeve::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 12%, rgba(0, 0, 0, 0) 88%, rgba(0, 0, 0, .3));
	pointer-events: none;
}

.ovf .ovf-wn__disc {
	position: absolute;
	z-index: 1;
	top: 3%;
	left: 3%;
	width: 94%;
	height: 94%;
	border-radius: 50%;
	background: repeating-radial-gradient(circle at 50% 50%, #0d0d0d 0 1px, #1f1f1f 1px 2.5px);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .6);
	/* translate and rotate stay apart: slide out, spin on its own centre. */
	translate: 16% 0;
	transition: translate .7s var(--ovf-out);
}

.ovf .ovf-wn__disc::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 30deg, rgba(255, 255, 255, 0) 0 12%, rgba(255, 255, 255, .13) 18%, rgba(255, 255, 255, 0) 24% 62%, rgba(255, 255, 255, .1) 68%, rgba(255, 255, 255, 0) 74%);
}

.ovf .ovf-wn__label {
	position: absolute;
	top: 33%;
	left: 33%;
	display: grid;
	place-items: center;
	width: 34%;
	height: 34%;
	border-radius: 50%;
	background: var(--ovf-accent);
	box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .15);
}

.ovf .ovf-wn__label img {
	width: 58%;
	height: 58%;
	object-fit: contain;
}

.ovf .ovf-wn__label::after {
	content: "";
	position: absolute;
	top: 46%;
	left: 46%;
	width: 8%;
	height: 8%;
	border-radius: 50%;
	background: #0b0b0b;
}

.ovf .ovf-wn__card:is(:hover, :focus-visible, .is-live) .ovf-wn__disc {
	translate: 44% 0;
	animation: ovf-spin 2.4s linear infinite;
}

@keyframes ovf-spin {
	to { rotate: 360deg; }
}

.ovf .ovf-wn__cap {
	display: block;
	width: 72%;
	padding-top: 14px;
}

@media (prefers-reduced-motion: reduce) {
	.ovf .ovf-wn__card .ovf-wn__disc {
		animation: none;
	}
}

/* ==========================================================================
   The Skosy family: Pasy, Strzały, Zygzak, Ostrza, Linie, Parawan.
   Panels share a box, a dark fade for the caption and the widening.
   ======================================================================= */

.ovf :is(.ovf-ps, .ovf-sr, .ovf-zz, .ovf-os, .ovf-ln) {
	display: flex;
	height: 40cqi;
	overflow: hidden;
	border-radius: 26px;
	background: #0b0b0c;
}

.ovf :is(.ovf-ps__p, .ovf-sr__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p, .ovf-pw__p) {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	min-height: 0;
	overflow: hidden;
	transition: flex-grow .7s var(--ovf-ease);
}

.ovf :is(.ovf-ps__p, .ovf-sr__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p, .ovf-pw__p) .ovf-ph {
	transition: opacity .35s, filter .6s;
}

.ovf :is(.ovf-ps__p, .ovf-sr__p, .ovf-zz__p, .ovf-os__p, .ovf-pw__p)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, 0) 50%);
	pointer-events: none;
}

.ovf :is(.ovf-ps__p, .ovf-sr__p, .ovf-zz__p, .ovf-ln__p):is(:hover, :focus-visible) {
	flex-grow: 2.4;
}

.ovf :is(.ovf-ps, .ovf-sr, .ovf-zz):hover > :not(:hover) .ovf-ph {
	filter: grayscale(.85) brightness(.5);
}

.ovf :is(.ovf-ps__cap, .ovf-sr__cap, .ovf-zz__cap, .ovf-os__cap, .ovf-pw__cap) {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 20px;
	left: 22px;
}

.ovf :is(.ovf-ps__cap, .ovf-sr__cap, .ovf-zz__cap, .ovf-os__cap, .ovf-ln__cap, .ovf-pw__cap) .ovf-t {
	font-size: calc(16px * var(--ovf-ts));
}

.ovf :is(.ovf-ps__cap, .ovf-sr__cap, .ovf-zz__cap, .ovf-os__cap, .ovf-ln__cap, .ovf-pw__cap) .ovf-s {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Pasy: slanted bands one under another --- */

.ovf .ovf-ps {
	--a: 3.2cqi;
	flex-direction: column;
	height: min(calc(11cqi * var(--ovf-n) + 6cqi), 72cqi);
}

.ovf .ovf-ps__p {
	margin-top: calc(-1 * var(--a) + 6px);
	clip-path: polygon(0 var(--a), 100% 0, 100% calc(100% - var(--a)), 0 100%);
}

.ovf .ovf-ps__p:first-child {
	margin-top: 0;
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--a)), 0 100%);
}

.ovf .ovf-ps__p:last-child {
	clip-path: polygon(0 var(--a), 100% 0, 100% 100%, 0 100%);
}

.ovf .ovf-ps__p:only-child {
	clip-path: none;
}

.ovf .ovf-ps__p::after {
	background: linear-gradient(90deg, rgba(0, 25, 12, .85), rgba(0, 25, 12, 0) 55%);
}

.ovf .ovf-ps__cap {
	right: 30%;
	bottom: 14px;
	left: 4cqi;
}

.ovf .ovf-ps__cap .ovf-t {
	font-size: calc(clamp(14px, 1.8cqi, 20px) * var(--ovf-ts));
}

/* --- Strzały: chevrons pointing on --- */

.ovf .ovf-sr {
	--a: 4cqi;
}

.ovf .ovf-sr__p {
	margin-left: calc(-1 * var(--a) + 6px);
	clip-path: polygon(0 0, calc(100% - var(--a)) 0, 100% 50%, calc(100% - var(--a)) 100%, 0 100%, var(--a) 50%);
}

.ovf .ovf-sr__p:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, calc(100% - var(--a)) 0, 100% 50%, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-sr__p:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--a) 50%);
}

.ovf .ovf-sr__p:only-child {
	clip-path: none;
}

.ovf .ovf-sr__cap {
	right: calc(var(--a) + 8px);
	left: calc(var(--a) + 14px);
}

.ovf .ovf-sr__p:first-child .ovf-sr__cap {
	left: 22px;
}

/* --- Zygzak: slants take turns --- */

.ovf .ovf-zz {
	--a: 5cqi;
}

.ovf .ovf-zz__p {
	margin-left: calc(-1 * var(--a) + 6px);
}

.ovf .ovf-zz__p:nth-child(odd) { clip-path: polygon(0 0, 100% 0, calc(100% - var(--a)) 100%, var(--a) 100%); }
.ovf .ovf-zz__p:nth-child(even) { clip-path: polygon(var(--a) 0, calc(100% - var(--a)) 0, 100% 100%, 0 100%); }
.ovf .ovf-zz__p:first-child { margin-left: 0; clip-path: polygon(0 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%); }
.ovf .ovf-zz__p:last-child:nth-child(odd) { clip-path: polygon(0 0, 100% 0, 100% 100%, var(--a) 100%); }
.ovf .ovf-zz__p:last-child:nth-child(even) { clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, 0 100%); }
.ovf .ovf-zz__p:only-child { clip-path: none; }

.ovf .ovf-zz__p:nth-child(odd):not(:first-child) .ovf-zz__cap {
	left: calc(var(--a) + 14px);
}

.ovf .ovf-zz__p:nth-child(odd) .ovf-zz__cap {
	right: calc(var(--a) + 8px);
}

/* --- Ostrza: steep blades, titles along them --- */

.ovf .ovf-os {
	--a: 8cqi;
	height: 44cqi;
}

.ovf .ovf-os__p {
	margin-left: calc(-1 * var(--a) + 6px);
	clip-path: polygon(var(--a) 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-os__p:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-os__p:last-child {
	clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, 0 100%);
}

.ovf .ovf-os__p:only-child {
	clip-path: none;
}

.ovf .ovf-os__p .ovf-ph {
	filter: grayscale(.6) brightness(.7);
}

.ovf .ovf-os__p:is(:hover, :focus-visible, .is-live) {
	flex-grow: 4;
}

.ovf .ovf-os__p:is(:hover, :focus-visible, .is-live) .ovf-ph {
	filter: none;
}

.ovf .ovf-os__vt {
	position: absolute;
	z-index: 2;
	bottom: 20px;
	left: calc(var(--a) * .35 + 10px);
	max-height: 70%;
	overflow: hidden;
	color: #fff;
	font-size: calc(13px * var(--ovf-ts));
	font-weight: 800;
	letter-spacing: .08em;
	line-height: 1.15;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	transition: opacity .4s .3s;
}

.ovf.is-case .ovf-os__vt {
	text-transform: none;
}

.ovf .ovf-os__p:first-child .ovf-os__vt {
	left: 16px;
}

.ovf .ovf-os__cap {
	right: auto;
	width: 30cqi;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity .25s, transform .25s;
}

.ovf .ovf-os__p:is(:hover, :focus-visible, .is-live) .ovf-os__vt {
	opacity: 0;
	transition: opacity .15s;
}

.ovf .ovf-os__p:is(:hover, :focus-visible, .is-live) .ovf-os__cap {
	opacity: 1;
	transform: none;
	transition: opacity .5s .4s, transform .6s .4s var(--ovf-out);
}

/* --- Linie: club colours, yellow cut lines, a green title flag --- */

.ovf .ovf-ln {
	--a: 5cqi;
}

.ovf .ovf-ln__p {
	margin-left: calc(-1 * var(--a) + 6px);
	clip-path: polygon(var(--a) 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-ln__p:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-ln__p:last-child {
	clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, 0 100%);
}

.ovf .ovf-ln__p:only-child {
	clip-path: none;
}

.ovf .ovf-ln__p .ovf-ph {
	filter: grayscale(1) contrast(1.1) brightness(.9);
}

.ovf .ovf-ln__p::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ovf-accent);
	mix-blend-mode: color;
	opacity: .9;
	pointer-events: none;
	transition: opacity .6s;
}

.ovf .ovf-ln__p:is(:hover, :focus-visible, .is-live) .ovf-ph {
	filter: none;
}

.ovf .ovf-ln__p:is(:hover, :focus-visible, .is-live)::after {
	opacity: 0;
}

.ovf .ovf-ln__p:not(:first-child)::before {
	content: "";
	position: absolute;
	z-index: 3;
	top: 0;
	bottom: 0;
	left: 0;
	width: calc(var(--a) + 6px);
	background: var(--ovf-hl);
	clip-path: polygon(var(--a) 0, calc(var(--a) + 5px) 0, 5px 100%, 0 100%);
	pointer-events: none;
}

.ovf .ovf-ln__cap {
	position: absolute;
	z-index: 2;
	right: 0;
	bottom: 0;
	left: 0;
	padding: 60px calc(var(--a) + 10px) 20px 22px;
	background: linear-gradient(0deg, rgba(0, 20, 10, .9), rgba(0, 20, 10, 0));
}

.ovf .ovf-ln__p:not(:first-child) .ovf-ln__cap {
	padding-left: calc(var(--a) * .4 + 18px);
}

.ovf .ovf-ln__flag {
	display: inline-block;
	max-width: 100%;
	padding: 7px 14px 8px;
	background: var(--ovf-accent);
	transform: skewX(-14deg);
}

.ovf .ovf-ln__flag .ovf-t {
	color: var(--ovf-on-accent);
	transform: skewX(14deg);
}

/* --- Parawan: a folding screen in 3D --- */

.ovf .ovf-pw__stage {
	padding: 20px 6px;
	perspective: 900px;
}

.ovf .ovf-pw {
	display: flex;
	gap: 4px;
	height: 38cqi;
	transform-style: preserve-3d;
}

.ovf .ovf-pw__p {
	--ry: 30deg;
	--rx: 0deg;
	border-radius: 14px;
	box-shadow: 0 20px 30px rgba(0, 0, 0, .5);
	transform: rotateX(var(--rx)) rotateY(var(--ry));
	transition: transform .6s var(--ovf-out), flex-grow .6s var(--ovf-ease), box-shadow .6s;
}

.ovf .ovf-pw__p:nth-child(even) {
	--ry: -30deg;
}

.ovf .ovf-pw__p::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%);
	pointer-events: none;
	transition: opacity .6s;
}

.ovf .ovf-pw__p:nth-child(even)::before {
	background: linear-gradient(270deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%);
}

.ovf .ovf-pw__p:is(:hover, :focus-visible, .is-live) {
	--ry: 0deg;
	--rx: 0deg;
	z-index: 2;
	flex-grow: 1.9;
	box-shadow: 0 30px 50px rgba(0, 0, 0, .65);
	transform: translateZ(40px);
}

.ovf .ovf-pw__p:is(:hover, :focus-visible, .is-live)::before {
	opacity: 0;
}

/* --- phones: the family stands up --- */

@container ovf (max-width: 640px) {
	.ovf :is(.ovf-ps, .ovf-sr, .ovf-zz, .ovf-os, .ovf-ln) {
		--a: 6cqi;
		flex-direction: column;
		height: calc(30cqi * var(--ovf-n) + 20cqi);
		border-radius: 18px;
	}

	.ovf :is(.ovf-ps__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p),
	.ovf :is(.ovf-ps__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p):is(:first-child, :last-child, :nth-child(odd), :nth-child(even)) {
		margin: calc(-1 * var(--a) + 6px) 0 0;
		clip-path: polygon(0 var(--a), 100% 0, 100% calc(100% - var(--a)), 0 100%);
	}

	.ovf :is(.ovf-ps__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p):first-child {
		margin-top: 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--a)), 0 100%);
	}

	.ovf :is(.ovf-ps__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p):last-child:not(:first-child) {
		clip-path: polygon(0 var(--a), 100% 0, 100% 100%, 0 100%);
	}

	.ovf .ovf-sr__p,
	.ovf .ovf-sr__p:is(:first-child, :last-child) {
		margin: calc(-1 * var(--a) + 6px) 0 0;
		clip-path: polygon(0 0, 50% var(--a), 100% 0, 100% calc(100% - var(--a)), 50% 100%, 0 calc(100% - var(--a)));
	}

	.ovf .ovf-sr__p:first-child {
		margin-top: 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--a)), 50% 100%, 0 calc(100% - var(--a)));
	}

	.ovf .ovf-sr__p:last-child:not(:first-child) {
		clip-path: polygon(0 0, 50% var(--a), 100% 0, 100% 100%, 0 100%);
	}

	.ovf :is(.ovf-ps__p, .ovf-sr__p, .ovf-zz__p, .ovf-os__p, .ovf-ln__p):only-child {
		clip-path: none;
	}

	.ovf :is(.ovf-ps__p, .ovf-sr__p, .ovf-zz__p, .ovf-os__p)::after {
		background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, .2) 70%);
	}

	.ovf :is(.ovf-ps__cap, .ovf-sr__cap, .ovf-zz__cap, .ovf-os__cap),
	.ovf :is(.ovf-sr__p, .ovf-zz__p):is(:first-child, :nth-child(odd)) :is(.ovf-sr__cap, .ovf-zz__cap) {
		right: 18px;
		bottom: calc(var(--a) + 12px);
		left: 18px;
	}

	.ovf .ovf-ps__cap .ovf-t {
		font-size: calc(16px * var(--ovf-ts));
	}

	.ovf .ovf-os__vt {
		display: none;
	}

	.ovf .ovf-os__cap {
		width: auto;
		opacity: 1;
		transform: none;
	}

	.ovf .ovf-os__p .ovf-ph {
		filter: none;
	}

	.ovf .ovf-ln__p:not(:first-child)::before {
		right: 0;
		bottom: auto;
		width: auto;
		height: calc(var(--a) + 6px);
		clip-path: polygon(0 var(--a), 100% 0, 100% 5px, 0 calc(var(--a) + 5px));
	}

	.ovf .ovf-ln__cap,
	.ovf .ovf-ln__p:not(:first-child) .ovf-ln__cap {
		padding: 40px 18px calc(var(--a) + 12px);
	}

	.ovf .ovf-pw {
		flex-direction: column;
		height: calc(26cqi * var(--ovf-n) + 10cqi);
	}

	.ovf .ovf-pw__p,
	.ovf .ovf-pw__p:nth-child(even) {
		--ry: 0deg;
		--rx: 16deg;
	}

	.ovf .ovf-pw__p:nth-child(even) {
		--rx: -16deg;
	}

	.ovf .ovf-pw__p::before,
	.ovf .ovf-pw__p:nth-child(even)::before {
		background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0) 70%);
	}

	.ovf .ovf-pw__cap {
		left: 18px;
	}

	/* Phones have no hover and every panel is on screen at once: keep the
	   folds, only the photos change. */
	.ovf .ovf-pw__p.is-live {
		--rx: 16deg;
		flex-grow: 1;
		box-shadow: 0 20px 30px rgba(0, 0, 0, .5);
		transform: rotateX(var(--rx));
	}

	.ovf .ovf-pw__p.is-live:nth-child(even) {
		--rx: -16deg;
	}

	.ovf .ovf-pw__p.is-live::before {
		opacity: 1;
	}
}

/* ==========================================================================
   More of the Kafle family: Paski, Domino, Piksele, Kafle skośne
   ======================================================================= */

.ovf :is(.ovf-pa__card, .ovf-ks__card) {
	overflow: hidden;
	border-radius: 26px;
	background: var(--ovf-accent);
	transition: transform .3s var(--ovf-out);
}

.ovf :is(.ovf-pa__card, .ovf-do__card, .ovf-px__card, .ovf-ks__card):is(:hover, :focus-visible) {
	transform: translateY(-5px);
}

.ovf :is(.ovf-pa__band, .ovf-ks__band) {
	display: block;
	padding: 16px 16px 18px;
}

.ovf .ovf-pa__band {
	text-align: center;
}

.ovf :is(.ovf-pa__band, .ovf-ks__band) .ovf-t {
	color: var(--ovf-on-accent);
	font-size: calc(15px * var(--ovf-ts));
	font-weight: 600;
}

.ovf :is(.ovf-pa__band, .ovf-ks__band) .ovf-s {
	color: color-mix(in srgb, var(--ovf-on-accent) 78%, transparent);
	font-size: 10px;
}

/* Paski: tall cards, six strips */
.ovf .ovf-pa__card .ovf-tiles {
	--step: 70ms;
	aspect-ratio: 3 / 4;
}

/* Domino: tiles tip over row by row */
.ovf .ovf-do__card {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background: #141516;
	box-shadow: 0 14px 28px rgba(0, 0, 0, .4);
	transition: transform .3s var(--ovf-out);
}

.ovf .ovf-do__card::before {
	content: "";
	position: absolute;
	z-index: 2;
	top: 0;
	right: 0;
	left: 0;
	height: 6px;
	background: var(--ovf-accent);
}

.ovf .ovf-do__card .ovf-tiles {
	--ax: 1;
	--ay: 0;
	--step: 35ms;
	--speed: .5s;
	aspect-ratio: 4 / 3;
}

.ovf .ovf-do__band {
	display: block;
	padding: 14px 16px 18px;
	border-left: 4px solid var(--ovf-hl);
	margin: 14px 0 0 14px;
}

/* Piksele: many small tiles in random order */
.ovf .ovf-px__card {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: #0b0b0c;
	transition: transform .3s var(--ovf-out);
}

.ovf .ovf-px__card .ovf-tiles {
	--step: 22ms;
	--speed: .45s;
	aspect-ratio: 1 / 1;
}

.ovf .ovf-px__card::after {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, 0) 50%);
	pointer-events: none;
}

.ovf .ovf-px__cap {
	position: absolute;
	z-index: 2;
	right: 16px;
	bottom: 16px;
	left: 16px;
}

/* Kafle skośne: slanted green band, tiles turn on a diagonal */
.ovf .ovf-ks__card .ovf-tiles {
	--ax: 1;
	--ay: 1;
	--step: 60ms;
	aspect-ratio: 16 / 10;
	clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);
}

.ovf .ovf-ks__band {
	margin-top: -4px;
}

.ovf .ovf-ks__band .ovf-t::after {
	content: "";
	display: block;
	width: 38px;
	height: 3px;
	margin-top: 9px;
	background: var(--ovf-hl);
	transform: skewX(-24deg);
}

/* ==========================================================================
   More of the Skosy family: Jodełka, Schody, Przekątna, Promienie
   ======================================================================= */

.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p) {
	position: relative;
	overflow: hidden;
}

.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p) .ovf-ph {
	transition: opacity .35s, filter .6s, transform .8s var(--ovf-out);
}

.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, 0) 50%);
	pointer-events: none;
}

.ovf :is(.ovf-jo__row, .ovf-sd, .ovf-pk, .ovf-pr):hover :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p):not(:hover) .ovf-ph {
	filter: grayscale(.85) brightness(.5);
}

.ovf :is(.ovf-jo__cap, .ovf-sd__cap, .ovf-pk__cap, .ovf-pr__cap) {
	position: absolute;
	z-index: 2;
	bottom: 18px;
}

.ovf :is(.ovf-jo__cap, .ovf-sd__cap, .ovf-pk__cap, .ovf-pr__cap) .ovf-t {
	font-size: calc(15px * var(--ovf-ts));
}

.ovf :is(.ovf-jo__cap, .ovf-sd__cap, .ovf-pk__cap, .ovf-pr__cap) .ovf-s {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Jodełka --- */

.ovf .ovf-jo {
	--a: 4cqi;
	display: flex;
	flex-direction: column;
	gap: 8px;
	height: 40cqi;
	overflow: hidden;
	border-radius: 26px;
}

.ovf .ovf-jo__row {
	display: flex;
	flex: 1;
	min-height: 0;
}

.ovf .ovf-jo__p {
	flex: 1 1 0;
	min-width: 0;
	margin-left: calc(-1 * var(--a) + 6px);
	clip-path: polygon(var(--a) 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
	transition: flex-grow .7s var(--ovf-ease);
}

.ovf .ovf-jo__p:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-jo__p:last-child {
	clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, 0 100%);
}

.ovf .ovf-jo__row--b .ovf-jo__p {
	clip-path: polygon(0 0, calc(100% - var(--a)) 0, 100% 100%, var(--a) 100%);
}

.ovf .ovf-jo__row--b .ovf-jo__p:first-child {
	clip-path: polygon(0 0, calc(100% - var(--a)) 0, 100% 100%, 0 100%);
}

.ovf .ovf-jo__row--b .ovf-jo__p:last-child {
	clip-path: polygon(0 0, 100% 0, 100% 100%, var(--a) 100%);
}

.ovf .ovf-jo__p:only-child {
	clip-path: none;
}

.ovf .ovf-jo__p:is(:hover, :focus-visible) {
	flex-grow: 2.4;
}

.ovf .ovf-jo__cap {
	right: calc(var(--a) + 8px);
	left: calc(var(--a) + 12px);
}

.ovf .ovf-jo__p:first-child .ovf-jo__cap {
	left: 20px;
}

.ovf .ovf-jo.is-two .ovf-jo__cap {
	bottom: 12px;
}

.ovf .ovf-jo.is-two .ovf-jo__cap .ovf-t {
	font-size: calc(13px * var(--ovf-ts));
}

/* --- Schody --- */

.ovf .ovf-sd {
	--a: 4cqi;
	display: flex;
	align-items: flex-end;
	height: 42cqi;
}

.ovf .ovf-sd__p {
	flex: 1 1 0;
	min-width: 0;
	height: var(--h, 100%);
	margin-left: calc(-1 * var(--a) + 6px);
	clip-path: polygon(var(--a) 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
	transition: height .7s var(--ovf-ease), flex-grow .7s var(--ovf-ease);
}

.ovf .ovf-sd__p:first-child {
	margin-left: 0;
	clip-path: polygon(0 0, 100% 0, calc(100% - var(--a)) 100%, 0 100%);
}

.ovf .ovf-sd__p:last-child {
	clip-path: polygon(var(--a) 0, 100% 0, 100% 100%, 0 100%);
}

.ovf .ovf-sd__p:only-child {
	clip-path: none;
}

.ovf .ovf-sd__p:is(:hover, :focus-visible) {
	height: 100%;
	flex-grow: 1.8;
}

.ovf .ovf-sd__cap {
	right: calc(var(--a) + 8px);
	left: calc(var(--a) + 12px);
}

.ovf .ovf-sd__p:first-child .ovf-sd__cap {
	left: 20px;
}

/* --- Przekątna --- */

.ovf .ovf-pk {
	position: relative;
	height: 44cqi;
	overflow: hidden;
	border-radius: 26px;
	background: #0b0b0c;
}

.ovf .ovf-pk__p {
	position: absolute;
	inset: 0;
	clip-path: polygon(calc(var(--x0) + 3px) 0, calc(var(--x1) - 3px) 0, calc(var(--x1) - 12% - 3px) 100%, calc(var(--x0) - 12% + 3px) 100%);
}

.ovf .ovf-pk__p.is-hero {
	clip-path: polygon(0 0, calc(58% - 3px) 0, calc(46% - 3px) 100%, 0 100%);
}

.ovf .ovf-pk.is-one .ovf-pk__p {
	clip-path: none;
}

.ovf .ovf-pk__p:is(:hover, :focus-visible) .ovf-ph {
	transform: scale(1.04);
}

/* Stripes lean: the caption starts where the edge is over its height, and
   shows the title only (date and photographer on hover). */
.ovf .ovf-pk__cap {
	left: calc(var(--x0) - 7% + 10px);
	width: calc(var(--x1) - var(--x0) - 5% - 20px);
}

.ovf .ovf-pk__p:last-child:not(.is-hero) .ovf-pk__cap {
	width: calc(var(--x1) - var(--x0) - 5% - 44px);
}

.ovf .ovf-pk__p:not(.is-hero) .ovf-t {
	display: -webkit-box;
	overflow: hidden;
	font-size: calc(13px * var(--ovf-ts));
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
}

.ovf .ovf-pk__p:not(.is-hero):not(:hover):not(:focus-visible) .ovf-s {
	display: none;
}

.ovf .ovf-pk__p.is-hero .ovf-pk__cap {
	bottom: 4cqi;
	left: 4cqi;
	width: 33%;
}

.ovf .ovf-pk__p.is-hero .ovf-t {
	font-size: calc(clamp(18px, 3cqi, 34px) * var(--ovf-ts));
	line-height: 1;
}

/* --- Promienie --- */

.ovf .ovf-pr {
	position: relative;
	height: 44cqi;
	overflow: hidden;
	border-radius: 26px;
	background: #0b0b0c;
}

.ovf .ovf-pr__p {
	position: absolute;
	inset: 0;
	clip-path: polygon(calc(var(--x0) + 3px) 0, calc(var(--x1) - 3px) 0, calc(var(--b1) - 1px) 100%, calc(var(--b0) + 1px) 100%);
}

.ovf .ovf-pr__p::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 25, 12, .88), rgba(0, 25, 12, 0) 45%);
	pointer-events: none;
}

.ovf .ovf-pr__p:first-child {
	clip-path: polygon(0 0, calc(var(--x1) - 3px) 0, calc(var(--b1) - 1px) 100%, 0 100%);
}

.ovf .ovf-pr__p:last-child {
	clip-path: polygon(calc(var(--x0) + 3px) 0, 100% 0, 100% 100%, calc(var(--b0) + 1px) 100%);
}

.ovf .ovf-pr__p:only-child {
	clip-path: none;
}

.ovf .ovf-pr__p:is(:hover, :focus-visible) .ovf-ph {
	transform: scale(1.06);
}

.ovf .ovf-pr__cap {
	top: 22px;
	bottom: auto;
	left: calc(var(--cl) + 18px);
	width: calc(var(--cr) - var(--cl) - 36px);
}

/* --- phones: stand up like Pasy --- */

@container ovf (max-width: 640px) {
	.ovf :is(.ovf-sd, .ovf-pk, .ovf-pr),
	.ovf .ovf-jo__row {
		--a: 6cqi;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		height: calc(30cqi * var(--ovf-n) + 20cqi);
		overflow: hidden;
		border-radius: 18px;
	}

	.ovf .ovf-jo {
		height: auto;
		gap: 10px;
		overflow: visible;
		border-radius: 0;
	}

	.ovf .ovf-jo__row {
		flex: none;
		height: calc(30cqi * var(--m, 2) + 14cqi);
	}

	.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p),
	.ovf :is(.ovf-jo__row--b .ovf-jo__p, .ovf-pk__p.is-hero, .ovf-jo__p:is(:first-child, :last-child), .ovf-sd__p:is(:first-child, :last-child)) {
		position: relative;
		inset: auto;
		flex: 1 1 0;
		height: auto;
		min-height: 0;
		margin: calc(-1 * var(--a) + 6px) 0 0;
		clip-path: polygon(0 var(--a), 100% 0, 100% calc(100% - var(--a)), 0 100%);
	}

	.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p):first-child,
	.ovf .ovf-jo__row--b .ovf-jo__p:first-child {
		margin-top: 0;
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--a)), 0 100%);
	}

	.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p):last-child:not(:first-child),
	.ovf .ovf-jo__row--b .ovf-jo__p:last-child:not(:first-child) {
		clip-path: polygon(0 var(--a), 100% 0, 100% 100%, 0 100%);
	}

	.ovf :is(.ovf-jo__p, .ovf-sd__p, .ovf-pk__p, .ovf-pr__p):only-child {
		clip-path: none;
	}

	.ovf .ovf-pk__p.is-hero {
		flex-grow: 2;
	}

	.ovf .ovf-pr__p::after {
		background: linear-gradient(0deg, rgba(0, 25, 12, .9), rgba(0, 25, 12, .2) 70%);
	}

	.ovf :is(.ovf-jo__cap, .ovf-sd__cap, .ovf-pk__cap, .ovf-pr__cap),
	.ovf :is(.ovf-jo__p, .ovf-sd__p):first-child :is(.ovf-jo__cap, .ovf-sd__cap),
	.ovf .ovf-pk__p.is-hero .ovf-pk__cap,
	.ovf .ovf-pk__p:last-child:not(.is-hero) .ovf-pk__cap {
		top: auto;
		right: 18px;
		bottom: calc(var(--a) + 12px);
		left: 18px;
		width: auto;
	}

	/* Stripes lie flat here: room for the date and photographer again. */
	.ovf .ovf-pk__p:not(.is-hero) .ovf-t {
		font-size: calc(15px * var(--ovf-ts));
	}

	.ovf .ovf-pk__p:not(.is-hero):not(:hover):not(:focus-visible) .ovf-s {
		display: block;
	}

	.ovf .ovf-pk__p.is-hero .ovf-t {
		font-size: calc(22px * var(--ovf-ts));
	}
}