/* ==========================================================================
   Kosher Kingdom — "Watch it rise" build timeline (template-parts/build-timeline.php)

   Sits under the coming-back scene on the same ink ground. The film is a
   16:9 reel with a slow drift on photos; the axis beneath it is the calendar
   of the build, filling gold as the reel advances. Below, a vertical gold
   line draws itself as you scroll past each stage. Honours reduced motion.
   ========================================================================== */

.kk-bt {
	--bt-ink: #1A120B;
	--bt-ink-2: #241a10;
	--bt-cream: #F6EFE2;
	--bt-cream-2: rgba(246, 239, 226, 0.68);
	--bt-gold: #C9A75A;
	--bt-gold-bright: #E6C784;
	--bt-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--bt-pad: clamp(20px, 4vw, 64px);
	position: relative;
	background: transparent; /* the pinned part shows the sticky hero scene through; the film part below is dark */
	color: var(--bt-cream);
	position: relative;
	z-index: 2;
	font-family: "Poppins", system-ui, sans-serif;
	padding: 0;
	overflow: visible; /* overflow:hidden here would stop .kk-bt__sticky from sticking */
}
.kk-bt__inner { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) var(--bt-pad) clamp(48px, 6vw, 88px); }
.kk-bt__film-wrap { background: linear-gradient(180deg, var(--bt-ink) 0%, var(--bt-ink-2) 40%, var(--bt-ink) 100%); }

/* ---- head ---- */
.kk-bt__head { max-width: 720px; margin-bottom: clamp(24px, 4vw, 44px); }
.kk-bt__kicker {
	margin: 0 0 10px;
	font-size: 12px;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--bt-gold);
}
.kk-bt__title {
	margin: 0 0 14px;
	font-weight: 600;
	font-size: clamp(38px, 6vw, 72px);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--bt-cream);
}
.kk-bt__lede { margin: 0; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: var(--bt-cream-2); }

/* ---- the film ---- */
.kk-bt__film { position: relative; }
.kk-bt__screen {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 18px;
	overflow: hidden;
	background: #000;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(246, 239, 226, 0.08);
	isolation: isolate;
}
.kk-bt__frame {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	transition: opacity 0.9s var(--bt-ease);
	pointer-events: none;
}
.kk-bt__frame img,
.kk-bt__frame video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.kk-bt__frame.is-on { opacity: 1; z-index: 1; }
.kk-bt__frame.is-leaving { opacity: 0; z-index: 2; }
/* Ken Burns: each photo drifts from one corner to the other; direction alternates */
.kk-bt__frame:not(.is-video) img { transform: scale(1.06); transform-origin: 30% 40%; }
.kk-bt__frame:not(.is-video).is-on img { animation: kk-bt-drift 6.5s linear forwards; }
.kk-bt__frame:not(.is-video).is-on:nth-child(even) img { animation-name: kk-bt-drift-b; transform-origin: 70% 60%; }
@keyframes kk-bt-drift   { from { transform: scale(1.06) translate3d(0, 0, 0); }      to { transform: scale(1.16) translate3d(-2.5%, -1.5%, 0); } }
@keyframes kk-bt-drift-b { from { transform: scale(1.16) translate3d(2%, 1.5%, 0); } to { transform: scale(1.06) translate3d(0, 0, 0); } }

.kk-bt__shade {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background:
		linear-gradient(0deg, rgba(26, 18, 11, 0.9) 0%, rgba(26, 18, 11, 0.45) 28%, rgba(26, 18, 11, 0) 55%),
		linear-gradient(180deg, rgba(26, 18, 11, 0.35) 0%, rgba(26, 18, 11, 0) 25%);
}

/* stamp (date / stage / caption) */
.kk-bt__stamp {
	position: absolute;
	left: clamp(16px, 3vw, 36px);
	right: clamp(16px, 3vw, 36px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 4;
	display: grid;
	gap: 4px;
	pointer-events: none;
}
.kk-bt__stamp-date {
	font-size: clamp(22px, 3.2vw, 40px);
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--bt-gold-bright);
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
.kk-bt__stamp-stage {
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bt-gold);
}
.kk-bt__stamp-title {
	font-size: clamp(14px, 1.5vw, 19px);
	color: var(--bt-cream);
	max-width: 32em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.7);
}
.kk-bt__stamp > span { opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--bt-ease), transform 0.5s var(--bt-ease); }
.kk-bt__stamp.is-in > span { opacity: 1; transform: none; }
.kk-bt__stamp.is-in > span:nth-child(2) { transition-delay: 0.08s; }
.kk-bt__stamp.is-in > span:nth-child(3) { transition-delay: 0.16s; }

/* controls */
.kk-bt__play,
.kk-bt__arrow {
	position: absolute;
	z-index: 5;
	display: grid;
	place-items: center;
	border: 1px solid rgba(246, 239, 226, 0.25);
	background: rgba(26, 18, 11, 0.55);
	color: var(--bt-cream);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background 0.2s, transform 0.2s, opacity 0.3s;
}
.kk-bt__play { top: clamp(12px, 2vw, 20px); right: clamp(12px, 2vw, 20px); width: 44px; height: 44px; border-radius: 50%; }
.kk-bt__play svg { fill: currentColor; }
.kk-bt__play[data-state="playing"] .kk-bt__ico-play,
.kk-bt__play[data-state="paused"] .kk-bt__ico-pause { display: none; }
.kk-bt__arrow {
	top: 50%;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	font-size: 34px;
	line-height: 1;
	padding-bottom: 4px;
	transform: translateY(-50%);
	opacity: 0;
}
.kk-bt__arrow--prev { left: clamp(10px, 2vw, 18px); }
.kk-bt__arrow--next { right: clamp(10px, 2vw, 18px); }
.kk-bt__screen:hover .kk-bt__arrow,
.kk-bt__screen:focus-within .kk-bt__arrow { opacity: 1; }
.kk-bt__play:hover, .kk-bt__arrow:hover { background: rgba(201, 167, 90, 0.35); }
.kk-bt__play:focus-visible, .kk-bt__arrow:focus-visible, .kk-bt__tick:focus-visible, .kk-bt__thumb:focus-visible { outline: 2px solid var(--bt-gold-bright); outline-offset: 2px; }

/* date axis */
.kk-bt__axis {
	position: relative;
	display: flex;
	margin: 22px 6px 0;
	height: 44px;
	border-top: 1px solid rgba(246, 239, 226, 0.16);
}
.kk-bt__axis-fill {
	position: absolute;
	top: -1px;
	left: 0;
	height: 2px;
	width: calc(var(--p, 0) * 100%);
	background: linear-gradient(90deg, var(--bt-gold), var(--bt-gold-bright));
	box-shadow: 0 0 12px rgba(230, 199, 132, 0.6);
	transition: width 0.6s var(--bt-ease);
}
.kk-bt__tick {
	position: relative;
	flex: var(--n, 1) 1 0;
	min-width: 0;
	background: none;
	border: 0;
	padding: 10px 2px 0 0;
	text-align: left;
	color: var(--bt-cream-2);
	cursor: pointer;
	font: inherit;
}
.kk-bt__tick-dot {
	position: absolute;
	top: -5px;
	left: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--bt-ink);
	border: 2px solid rgba(246, 239, 226, 0.35);
	transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.kk-bt__tick-label {
	display: block;
	font-size: 11px;
	letter-spacing: 0.04em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.3s;
}
.kk-bt__tick.is-done .kk-bt__tick-dot { background: var(--bt-gold); border-color: var(--bt-gold); }
.kk-bt__tick.is-on .kk-bt__tick-dot { background: var(--bt-gold-bright); border-color: var(--bt-gold-bright); transform: scale(1.35); box-shadow: 0 0 0 5px rgba(230, 199, 132, 0.18); }
.kk-bt__tick.is-on .kk-bt__tick-label { color: var(--bt-gold-bright); }
.kk-bt__tick:hover .kk-bt__tick-label { color: var(--bt-cream); }
@media (max-width: 760px) {
	.kk-bt__tick-label { font-size: 0; }
	.kk-bt__tick:nth-child(3n+2) .kk-bt__tick-label { font-size: 10px; }
	.kk-bt__axis { height: 30px; }
}

/* ---- the pinned strip over the hero scene ----
   .kk-bt__pin is as tall as the strip is wide (JS sets --pin-len), so the sticky
   viewport-high box inside it holds while the page scroll moves the track. The
   section itself is transparent: the sticky hero scene shows through behind. */
.kk-bt__pin {
	position: relative;
	height: calc(100vh + var(--pin-len, 2400px));
	background: transparent;
	/* light tokens for the pinned strip (it sits over the cream hero scene); body.is-dark restores the dusk ones */
	--bt-cream: #2B1E12;
	--bt-cream-2: rgba(43, 30, 18, 0.66);
	--bt-ink: #F7F3EC;
	--bt-gold-bright: #B8923D;
	--bt-rail: rgba(43, 30, 18, 0.14);
}
body.is-dark .kk-bt__pin { --bt-cream: #F6EFE2; --bt-cream-2: rgba(246, 239, 226, 0.68); --bt-ink: #1A120B; --bt-gold-bright: #E6C784; --bt-rail: rgba(246, 239, 226, 0.12); }
.kk-bt__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;
	background: linear-gradient(180deg, rgba(247, 243, 236, 0.85) 0%, rgba(247, 243, 236, 0.35) 35%, rgba(247, 243, 236, 0.4) 60%, rgba(247, 243, 236, 0.96) 100%);
}
body.is-dark .kk-bt__sticky { background: linear-gradient(180deg, rgba(26, 18, 11, 0.72) 0%, rgba(26, 18, 11, 0.2) 35%, rgba(26, 18, 11, 0.25) 60%, rgba(26, 18, 11, 0.9) 100%); }
.kk-bt__sticky .kk-bt__head { padding: calc(var(--bt-pad) * 0.9) var(--bt-pad) 0; margin: 0; }
/* fades in as the pin arrives (JS sets --bt-in 0→1), so it never sits on top of the hero copy */
.kk-bt__sticky > * { opacity: var(--bt-in, 1); }
.kk-bt__strip {
	position: relative;
	margin: 0;
	padding: 34px 0 10px;
	overflow: hidden;
	cursor: default;
}
.kk-bt__strip:focus-visible { outline: 2px solid var(--bt-gold-bright); outline-offset: -2px; }
.kk-bt__sticky .kk-bt__hint { padding-bottom: 14px; }

/* the rail: faint line the full width of the track, gold fill drawn as you move along */
.kk-bt__rail {
	position: absolute;
	top: 34px;
	left: 0;
	width: var(--track-w, 100%);
	height: 2px;
	background: var(--bt-rail, rgba(246, 239, 226, 0.12));
}
.kk-bt__rail i {
	display: block;
	height: 100%;
	width: calc(var(--drawn, 0) * 100%);
	background: linear-gradient(90deg, var(--bt-gold), var(--bt-gold-bright));
	box-shadow: 0 0 14px rgba(230, 199, 132, 0.45);
	transition: width 0.2s linear;
}

.kk-bt__track {
	display: flex;
	align-items: flex-start;
	gap: clamp(36px, 5vw, 80px);
	width: max-content;
	list-style: none;
	margin: 0;
	padding: 0 var(--bt-pad) 24px;
}
.kk-bt__stage {
	position: relative;
	flex: 0 0 auto;
	scroll-snap-align: start;
	scroll-margin-left: var(--bt-pad);
	padding-top: 26px;
}
.kk-bt__stage-head { position: relative; margin-bottom: 22px; }
.kk-bt__node {
	position: absolute;
	top: -33px;
	left: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--bt-ink);
	border: 2px solid rgba(246, 239, 226, 0.3);
	transition: background 0.4s, border-color 0.4s, box-shadow 0.4s;
}
.kk-bt__stage.is-in .kk-bt__node { background: var(--bt-gold-bright); border-color: var(--bt-gold-bright); box-shadow: 0 0 0 6px rgba(230, 199, 132, 0.16); }
.kk-bt__node--crown {
	width: 22px;
	height: 22px;
	top: -37px;
	background: var(--bt-gold) !important;
	border-color: var(--bt-gold-bright) !important;
}
.kk-bt__hint {
	margin: 14px 0 0;
	text-align: center;
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--bt-cream-2);
}
.kk-bt__date {
	display: inline-block;
	margin-bottom: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	border: 1px solid rgba(201, 167, 90, 0.45);
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--bt-gold-bright);
}
.kk-bt__stage-name { margin: 0; font-size: clamp(22px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.01em; line-height: 1.1; color: var(--bt-cream); /* kk-base's h3 colour would make it ink */ }
.kk-bt__stage-head > time,
.kk-bt__stage-head > h3 { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--bt-ease), transform 0.6s var(--bt-ease); }
.kk-bt__stage.is-in .kk-bt__stage-head > time,
.kk-bt__stage.is-in .kk-bt__stage-head > h3 { opacity: 1; transform: none; }
.kk-bt__stage.is-in .kk-bt__stage-head > h3 { transition-delay: 0.08s; }

/* the pile: photos side by side, each at its own slight tilt, floating gently */
.kk-bt__pile {
	list-style: none;
	margin: 0;
	padding: 10px 6px 18px;
	display: flex;
	gap: 14px;
}
.kk-bt__cell {
	flex: 0 0 auto;
	width: clamp(150px, 15vw, 210px);
	opacity: 0;
	transform: translateY(18px) rotate(var(--rot, 0deg)) scale(0.96);
	transition: opacity 0.6s var(--bt-ease), transform 0.6s var(--bt-ease);
	transition-delay: calc(var(--d, 0) * 70ms);
}
.kk-bt__stage.is-in .kk-bt__cell {
	opacity: 1;
	transform: translateY(0) rotate(var(--rot, 0deg));
	animation: bt-float var(--dur, 8s) ease-in-out var(--delay, 0s) infinite alternate;
}
.kk-bt__strip:hover .kk-bt__cell { animation-play-state: paused; }
/* in the pinned strip every stage is "in" from the start; the scroll does the revealing */
.kk-bt__sticky .kk-bt__stage-head > time, .kk-bt__sticky .kk-bt__stage-head > h3 { opacity: 1; transform: none; }
@keyframes bt-float {
	0%   { transform: translateY(0) rotate(var(--rot, 0deg)); }
	100% { transform: translateY(var(--dy, -8px)) rotate(calc(var(--rot, 0deg) * -0.6)); }
}
.kk-bt__thumb {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	border: 0;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.45), 0 0 0 4px rgba(246, 239, 226, 0.92);
	transition: transform 0.35s var(--bt-ease), box-shadow 0.35s;
}
.kk-bt__thumb img, .kk-bt__thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--bt-ease); }
.kk-bt__thumb:hover { transform: translateY(-4px) scale(1.04); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), 0 0 0 4px var(--bt-gold-bright); z-index: 2; }
.kk-bt__thumb:hover img, .kk-bt__thumb:hover video { transform: scale(1.05); }
.kk-bt__thumb.is-current { box-shadow: 0 0 0 4px var(--bt-gold-bright), 0 16px 34px rgba(0, 0, 0, 0.5); }
.kk-bt__thumb-date {
	position: absolute;
	left: 8px;
	bottom: 8px;
	padding: 3px 8px;
	border-radius: 999px;
	background: rgba(26, 18, 11, 0.78);
	color: var(--bt-cream);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	pointer-events: none;
}
.kk-bt__thumb-play {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(26, 18, 11, 0.7);
	border: 1px solid rgba(246, 239, 226, 0.3);
}
.kk-bt__thumb-play::after { content: ""; position: absolute; left: 11px; top: 8px; border-style: solid; border-width: 6px 0 6px 9px; border-color: transparent transparent transparent var(--bt-cream); }
.kk-bt__thumb-cap {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 22px 10px 9px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--bt-cream);
	text-align: left;
	background: linear-gradient(0deg, rgba(26, 18, 11, 0.92), rgba(26, 18, 11, 0));
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.3s, transform 0.3s;
}
.kk-bt__thumb:hover .kk-bt__thumb-cap, .kk-bt__thumb:focus-visible .kk-bt__thumb-cap { opacity: 1; transform: none; }
@media (hover: none) { .kk-bt__thumb-cap { opacity: 1; transform: none; } }

.kk-bt__stage--end { margin-bottom: 0; }
.kk-bt__stage--end .kk-bt__stage-name { color: var(--bt-gold-bright); }

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
	.kk-bt__frame:not(.is-video).is-on img { animation: none; transform: none; }
	.kk-bt__frame, .kk-bt__stamp > span, .kk-bt__cell, .kk-bt__stage-head > time, .kk-bt__stage-head > h3, .kk-bt__axis-fill, .kk-bt__rail i { transition: none; }
	.kk-bt__cell, .kk-bt__stage-head > time, .kk-bt__stage-head > h3 { opacity: 1; transform: none; animation: none !important; }
}

@media (max-width: 760px) {
	/* no sticky hero behind it on phones: give the pinned strip its own dark ground */
	.kk-bt__sticky { background: var(--bt-ink); }
	body.is-dark .kk-bt__sticky { background: #1A120B; }
	.kk-bt__sticky > * { opacity: 1; }
}

/* ==========================================================================
   Film behind the pinned strip ("hand in hand"): the current photo fills the
   box, the heading sits over its top, the thumbnails overlay its bottom, and
   the page scroll moves the strip while the film follows the nearest card.
   ========================================================================== */
.kk-bt__film--bg { position: absolute; inset: 0; z-index: 0; margin: 0; }
.kk-bt__film--bg .kk-bt__screen {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	aspect-ratio: auto; border-radius: 0; box-shadow: none;
	/* the picture fades out at the top and bottom edges */
	-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 22%, #000 46%, #000 64%, rgba(0, 0, 0, 0) 100%);
	mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.35) 22%, #000 46%, #000 64%, rgba(0, 0, 0, 0) 100%);
}
.kk-bt__film--bg .kk-bt__axis, .kk-bt__film--bg .kk-bt__play, .kk-bt__film--bg .kk-bt__arrow, .kk-bt__film--bg .kk-bt__stamp { display: none; } /* the stage head on the strip already names the date */
.kk-bt__film--bg .kk-bt__stamp { left: var(--bt-pad); bottom: clamp(240px, 34vh, 320px); }
.kk-bt__sticky > .kk-bt__head, .kk-bt__sticky > .kk-bt__strip, .kk-bt__sticky > .kk-bt__hint { position: relative; z-index: 1; }
.kk-bt__sticky {
	/* the film is ghosted well back; the top carries the heading, the bottom carries the strip */
	background:
		linear-gradient(180deg, rgba(247, 243, 236, 0.6) 0%, rgba(247, 243, 236, 0.45) 30%, rgba(247, 243, 236, 0.45) 50%, rgba(247, 243, 236, 0.8) 100%),
		#F7F3EC;
}
body.is-dark .kk-bt__sticky {
	background:
		linear-gradient(180deg, rgba(26, 18, 11, 0.55) 0%, rgba(26, 18, 11, 0.4) 30%, rgba(26, 18, 11, 0.4) 50%, rgba(26, 18, 11, 0.75) 100%),
		#1A120B;
}
/* the strip sits low, on its own faded ground so it reads apart from the picture behind */
.kk-bt__sticky .kk-bt__strip {
	position: relative;
	margin-top: 0;
	padding-top: 44px;
	padding-bottom: 0;
}
/* the strip sits right at the bottom edge; the hint floats just above it as a small pill */
.kk-bt__sticky .kk-bt__hint {
	position: relative;
	z-index: 2;
	align-self: center;
	margin: auto 0 0;
	padding: 6px 14px 6px 12px;
	border-radius: 999px;
	border: 1px solid var(--bt-sheet-line);
	background: var(--bt-sheet);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	font-size: 11.5px;
	letter-spacing: 0.04em;
	color: var(--bt-cream-2);
	display: inline-flex; align-items: center; gap: 8px;
	animation: bt-hint-float 3.2s ease-in-out infinite;
}
.kk-bt__sticky .kk-bt__hint::before { content: ""; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
@keyframes bt-hint-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.kk-bt__sticky .kk-bt__rail { top: 44px; }
/* light mode: cream sheet, ink text; dark mode (body.is-dark) restores the dusk set */
.kk-bt__pin { --bt-cream: #2B1E12; --bt-cream-2: rgba(43, 30, 18, 0.66); --bt-ink: #F7F3EC; --bt-gold-bright: #B8923D; --bt-rail: rgba(43, 30, 18, 0.14); --bt-sheet: rgba(247, 243, 236, 0.6); --bt-sheet-line: rgba(43, 30, 18, 0.14); }
body.is-dark .kk-bt__pin { --bt-cream: #F6EFE2; --bt-cream-2: rgba(246, 239, 226, 0.68); --bt-ink: #1A120B; --bt-gold-bright: #E6C784; --bt-rail: rgba(246, 239, 226, 0.14); --bt-sheet: rgba(26, 18, 11, 0.55); --bt-sheet-line: rgba(246, 239, 226, 0.18); }
.kk-bt__sticky .kk-bt__track { padding-bottom: 8px; }
.kk-bt__thumb.is-current { box-shadow: 0 0 0 4px var(--bt-gold-bright), 0 18px 36px rgba(0, 0, 0, 0.55); transform: translateY(-6px) scale(1.04); z-index: 2; }
@media (max-width: 760px) {
	.kk-bt__film--bg .kk-bt__stamp { bottom: clamp(230px, 36vh, 300px); }
	.kk-bt__sticky .kk-bt__hint { padding: 5px 12px; font-size: 11px; }
	/* phones: the picture stays clear of the heading (fully faded under the head text) */
	.kk-bt__film--bg .kk-bt__screen {
		-webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0.5) 36%, #000 48%, #000 64%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 24%, rgba(0, 0, 0, 0.5) 36%, #000 48%, #000 64%, rgba(0, 0, 0, 0) 100%);
	}
	/* phones: a compact head so the picture and the strip get the screen */
	.kk-bt__sticky .kk-bt__head { padding-top: 18px; }
	.kk-bt__kicker { font-size: 10.5px; margin-bottom: 6px; }
	.kk-bt__title { font-size: clamp(30px, 9vw, 38px); margin-bottom: 8px; }
	.kk-bt__lede { font-size: 13.5px; line-height: 1.45; max-width: 34ch; }
	.kk-bt__stage-name { font-size: 19px; }
	.kk-bt__date { font-size: 11px; padding: 3px 8px; }
	.kk-bt__cell { width: clamp(132px, 40vw, 170px); }
	.kk-bt__sticky .kk-bt__strip { padding-top: 34px; }
	.kk-bt__sticky .kk-bt__rail { top: 34px; }
}