.pk {
	--linnen: #f2ede6;
	--zand: #e6dccd;
	--espresso: #2f2823;
	--walnoot: #5a4636;
	--taupe: #857669;
	--klei: #b98c77;
	--lijn: #d8cdbf;
	--display: "Fraunces", Georgia, serif;
	--body: "Hanken Grotesk", system-ui, sans-serif;

	background: var(--linnen);
	color: var(--espresso);
	font-family: var(--body);
	-webkit-font-smoothing: antialiased;
	padding: clamp(56px, 8vw, 108px) clamp(20px, 5vw, 64px);
	box-sizing: border-box;
}
.pk *,
.pk *::before,
.pk *::after {
	box-sizing: border-box;
}

.pk-wrap {
	max-width: 1180px;
	margin: 0 auto;
}

.pk-head {
	max-width: 640px;
	margin: 0 auto clamp(30px, 4vw, 48px);
	text-align: center;
}
.pk-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-family: var(--display);
	font-style: italic;
	font-weight: 400;
	font-size: 1.02rem;
	color: var(--walnoot);
	margin-bottom: 1rem;
}
.pk-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--klei);
}
.pk-title {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.08;
	font-size: clamp(2rem, 4.6vw, 3rem);
	margin: 0.2rem 0 1rem;
}
.pk-intro {
	font-size: clamp(1rem, 1.4vw, 1.08rem);
	line-height: 1.65;
	color: var(--taupe);
	margin: 0;
}

/* STAGE */
.pk-stage {
	position: relative;
	border: 1px solid var(--lijn);
	border-radius: 3px;
	overflow: hidden;
	background: var(--zand);
	transition: background 1.1s cubic-bezier(0.4, 0, 0.2, 1);
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(24px, 4vw, 64px);
	padding: clamp(28px, 4vw, 56px);
	align-items: center;
	min-height: clamp(440px, 58vh, 600px);
	touch-action: pan-y;
}
.pk-photo {
	position: relative;
	height: clamp(380px, 52vh, 520px);
}
.pk-photo figure {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transform: scale(1.012);
	transition: opacity 0.8s ease, transform 0.8s ease;
	pointer-events: none;
}
.pk-photo figure.on {
	opacity: 1;
	transform: none;
}
.pk-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--lijn);
	border-radius: 2px;
	box-shadow: 0 18px 40px -24px rgba(47, 40, 35, 0.45);
	overflow: hidden;
}
.pk-card img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.pk-card-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: 96px;
	color: var(--walnoot);
	line-height: 1;
}
.pk-card-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.pk-info {
	align-self: center;
}
.pk-count {
	font-family: var(--display);
	font-style: italic;
	font-size: 0.98rem;
	color: var(--walnoot);
	opacity: 0.8;
	margin-bottom: 0.5rem;
}
.pk-name {
	font-family: var(--display);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
	font-size: clamp(2.1rem, 3.6vw, 3rem);
	margin: 0 0 0.7rem;
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.pk-note {
	font-size: clamp(1rem, 1.4vw, 1.1rem);
	line-height: 1.6;
	color: var(--taupe);
	margin: 0;
	max-width: 34ch;
	transition: opacity 0.45s ease, transform 0.45s ease;
}
.pk-fade {
	opacity: 0;
	transform: translateY(8px);
}
.pk-arrows {
	display: flex;
	gap: 0.6rem;
	margin-top: 1.8rem;
}
.pk-arrow {
	width: 46px;
	height: 46px;
	border: 1px solid var(--walnoot);
	background: transparent;
	color: var(--walnoot);
	border-radius: 50%;
	font-size: 1.1rem;
	line-height: 1;
	padding: 0;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.3s, color 0.3s;
}
.pk-arrow-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	transform: translateY(-1px);
	pointer-events: none;
}
.pk-arrow:hover {
	background: var(--walnoot);
	color: var(--linnen);
}
.pk-arrow:focus-visible {
	outline: 2px solid var(--espresso);
	outline-offset: 3px;
}

/* RAIL */
.pk-rail {
	display: flex;
	justify-content: center;
	gap: clamp(10px, 1.4vw, 20px);
	margin-top: clamp(26px, 3vw, 40px);
	padding-bottom: 4px;
	flex-wrap: wrap;
}
.pk-chip {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.55rem;
	flex: 0 0 auto;
	width: 46px;
}
.pk-stack {
	width: 100%;
	height: 74px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--lijn);
	border-radius: 2px;
	overflow: hidden;
	transition: transform 0.4s cubic-bezier(0.34, 1.3, 0.5, 1), box-shadow 0.4s, outline-color 0.3s;
	outline: 1.5px solid transparent;
	outline-offset: 2px;
}
.pk-stack span {
	flex: 1;
}
.pk-chip:hover .pk-stack {
	transform: translateY(-4px);
}
.pk-chip[aria-pressed="true"] .pk-stack {
	transform: translateY(-7px) scale(1.06);
	box-shadow: 0 14px 26px -16px rgba(47, 40, 35, 0.5);
	outline-color: var(--walnoot);
}
.pk-chip:focus-visible .pk-stack {
	outline-color: var(--espresso);
}
.pk-caption {
	font-size: 0.68rem;
	line-height: 1.15;
	color: var(--taupe);
	text-align: center;
	max-width: 8ch;
	transition: color 0.3s;
}
.pk-chip[aria-pressed="true"] .pk-caption {
	color: var(--espresso);
}

.pk [data-lpp-data] {
	display: none;
}

@media (max-width: 860px) {
	.pk-stage {
		grid-template-columns: 1fr;
		min-height: 0;
	}
	.pk-photo {
		height: clamp(360px, 64vw, 460px);
	}
	.pk-info {
		text-align: center;
	}
	.pk-note {
		margin-left: auto;
		margin-right: auto;
	}
	.pk-arrows {
		justify-content: center;
	}
	.pk-rail {
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		padding: 2px 2px 10px;
	}
	.pk-chip {
		scroll-snap-align: center;
	}
}
@media (prefers-reduced-motion: reduce) {
	.pk-stage,
	.pk-photo figure,
	.pk-name,
	.pk-note,
	.pk-stack {
		transition: none !important;
	}
}