/* ==========================================================================
   Knack Theme — Streaming Films
   Pairs with single-ks_film.php, archive-ks_film.php, and films.js.

   Two visual zones:
     1. HERO — cinematic, fixed dark gradient over backdrop image, white text.
        Always dark for guaranteed text contrast over user artwork. Limited
        to the hero block itself.
     2. EVERYTHING ELSE — site theme. Inherits --knack-bg / --knack-text so
        a light site stays light, dark mode darkens automatically.

   Component groups:
     • Hero (single film)             .knack-film-hero
     • Player                         .knack-film-player-section
     • Section sleeve (theme-bg)      .knack-film-section
     • Cast (IMDb horizontal row)     .knack-film-cast
     • Episodes                       .knack-film-episode
     • Similar films grid             .knack-film-similar
     • Archive hero carousel          .knack-film-archive-hero
     • Browse rows (horizontal scroll) .knack-film-row
     • Card                           .knack-film-card
     • Genre chips                    .knack-film-genre-chip
     • Buttons                        .knack-film-cta / -secondary-cta / -icon-btn
     • Trailer modal                  .knack-film-trailer-modal
   ========================================================================== */

/* ────────────────────────────────────────────────────────────────
   Body & main
   ──────────────────────────────────────────────────────────────── */
body.knack-film .knack-content-area { padding: 0; }
.knack-film-main {
	display: block;
	min-height: 60vh;
	background: var(--knack-bg);
	color: var(--knack-text);
}

/* ────────────────────────────────────────────────────────────────
   Buttons
   ──────────────────────────────────────────────────────────────── */
.knack-film-cta,
.knack-film-secondary-cta,
.knack-film-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	cursor: pointer;
	transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
	text-decoration: none;
	white-space: nowrap;
}
.knack-film-cta {
	background: #fff;
	color: #0c0c0e;
	padding: 12px 28px;
	border-radius: var(--knack-radius-pill);
	border: 0;
	box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.knack-film-cta:hover { background: rgba(255,255,255,0.92); transform: translateY(-1px); color: #0c0c0e; }
.knack-film-cta[data-knack-film-action="buy"],
.knack-film-cta[data-knack-film-action="upgrade"] {
	background: var(--knack-accent);
	color: #fff;
	box-shadow: 0 4px 14px rgba(124,58,237,0.4);
}
.knack-film-cta[data-knack-film-action="buy"]:hover,
.knack-film-cta[data-knack-film-action="upgrade"]:hover {
	background: var(--knack-accent-hover);
	color: #fff;
}

.knack-film-secondary-cta {
	background: rgba(255,255,255,0.16);
	color: #fff;
	padding: 12px 22px;
	border-radius: var(--knack-radius-pill);
	border: 1px solid rgba(255,255,255,0.22);
	backdrop-filter: blur(4px);
}
.knack-film-secondary-cta:hover { background: rgba(255,255,255,0.24); color: #fff; }

.knack-film-icon-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255,255,255,0.16);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.22);
	backdrop-filter: blur(4px);
}
.knack-film-icon-btn:hover { background: rgba(255,255,255,0.24); color: #fff; }
.knack-film-icon-btn.is-on {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
}

/* ────────────────────────────────────────────────────────────────
   HERO — cinematic full-bleed backdrop (single film)
   The backdrop fills the section. When a trailer URL exists, an autoplay
   muted video (or YouTube/Vimeo iframe) plays in the background. The
   gradient blends softly into the page below — no hard color edge.
   ──────────────────────────────────────────────────────────────── */
.knack-film-hero {
	position: relative;
	min-height: 720px;
	color: #fff;
	background: #0a0a0c var(--knack-film-backdrop, none) center / cover no-repeat;
	overflow: hidden;
	isolation: isolate;
	transition: min-height 0.4s ease;
}

/* When the player is activated in-place, the hero hosts it as an overlay
   layer instead of opening a new section below. */
.knack-film-hero.is-playing .knack-film-hero__overlay,
.knack-film-hero.is-playing .knack-film-hero__media {
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}
.knack-film-hero .knack-film-player-section {
	position: absolute;
	inset: 0;
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
	padding: 0;
	margin: 0;
}
.knack-film-hero .knack-film-player-section.is-active {
	opacity: 1;
	pointer-events: auto;
}
.knack-film-hero .knack-film-player-section .knack-container {
	max-width: none;
	padding: 0;
	height: 100%;
}
.knack-film-hero .knack-film-player-section .knack-film-player {
	height: 100%;
}
.knack-film-hero .knack-film-player-section .knack-player {
	width: 100%;
	height: 100%;
	border-radius: 0;
}
.knack-film-hero .knack-film-player-section .knack-player__video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

/* Autoplay trailer layer — sits between backdrop and content overlay. */
.knack-film-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
.knack-film-hero__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.knack-film-hero__iframe {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 177.78vh;
	min-width: 100%;
	height: 56.25vw;
	min-height: 100%;
	border: 0;
}

.knack-film-hero__overlay {
	position: relative;
	z-index: 1;
	min-height: 720px;
	background:
		/* Soft bottom blend into the page below (no hard edge in light mode) */
		linear-gradient(to top, var(--knack-bg) 0%, rgba(12,12,14,0.65) 12%, rgba(12,12,14,0) 30%),
		/* Diagonal darkening on the bottom-left where the title + metadata sit */
		linear-gradient(115deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 80%),
		/* Top vignette so the breadcrumb stays readable */
		linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 18%, rgba(0,0,0,0) 35%);
	padding: 28px 0 56px;
}

/* Pause the trailer if the user prefers reduced motion. */
@media (prefers-reduced-motion: reduce) {
	.knack-film-hero__video,
	.knack-film-hero__iframe { display: none; }
}
.knack-film-hero__inner {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	row-gap: 24px;
	min-height: calc(720px - 28px - 56px);
	position: relative;
}

/* TOP ROW — crumbs + type tag */
.knack-film-hero__top {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.knack-film-hero__crumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.85);
	background: rgba(0,0,0,0.45);
	border: 1px solid rgba(255,255,255,0.12);
	padding: 6px 14px;
	border-radius: var(--knack-radius-pill);
	backdrop-filter: blur(6px);
}
.knack-film-hero__crumbs a {
	color: rgba(255,255,255,0.72);
	text-decoration: none;
	transition: color 0.15s ease;
}
.knack-film-hero__crumbs a:hover { color: #fff; }
.knack-film-hero__crumbs-current {
	color: #fff;
	font-weight: 600;
	max-width: 280px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.knack-film-hero__crumbs .knack-icon--xs {
	width: 12px;
	height: 12px;
	opacity: 0.5;
	flex-shrink: 0;
}
.knack-film-hero__type-tag {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: rgba(0,0,0,0.45);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: var(--knack-radius-pill);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	backdrop-filter: blur(6px);
}
.knack-film-hero__type-tag--accent {
	background: var(--knack-accent);
	border-color: transparent;
}

/* LEAD — bottom-left stack (title, fact line, synopsis) over the scrim,
   where the hero's diagonal darkening is strongest for guaranteed contrast. */
.knack-film-hero__lead {
	grid-column: 1 / 2;
	grid-row: 2 / 3;
	align-self: end;
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-width: 640px;
}

/* TITLE — large, over the backdrop */
.knack-film-hero__title {
	font-size: clamp(2.5rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 0.95;
	letter-spacing: -0.03em;
	margin: 0;
	color: #fff;
	text-shadow: 0 4px 24px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.4);
	max-width: 14ch;
	word-break: break-word;
}

/* FACT LINE — at-a-glance details (year · runtime · maturity) + genre chips */
.knack-film-hero__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 14px;
}
.knack-film-hero__factline {
	color: #fff;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 8px rgba(0,0,0,0.65);
}
.knack-film-hero__genres {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}
.knack-film-hero__genre {
	display: inline-block;
	padding: 3px 12px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	color: #fff;
	background: rgba(255,255,255,0.16);
	border: 1px solid rgba(255,255,255,0.22);
	border-radius: var(--knack-radius-pill);
	backdrop-filter: blur(4px);
}

/* SYNOPSIS — flows in the lead (no floating box; relies on the hero scrim) */
.knack-film-hero__synopsis {
	max-width: 600px;
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255,255,255,0.92);
	margin: 0;
	text-shadow: 0 1px 6px rgba(0,0,0,0.7);
}
.knack-film-hero__synopsis-toggle {
	background: transparent;
	border: 0;
	color: #fff;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	margin-left: 6px;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* CENTER PLAY BUTTON — overlay icon, dominant CTA */
.knack-film-hero__play-wrap {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	pointer-events: none; /* let clicks pass through to elements below */
}
.knack-film-play-circle {
	pointer-events: auto;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	border: 2px solid rgba(255,255,255,0.6);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-decoration: none;
	backdrop-filter: blur(8px);
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.knack-film-play-circle:hover {
	transform: scale(1.06);
	background: rgba(255,255,255,0.28);
	color: #fff;
}
.knack-film-play-circle [data-lucide] {
	width: 48px;
	height: 48px;
	stroke-width: 1.5;
	margin-left: 4px; /* play icon optical centering */
}
.knack-film-play-circle__label {
	pointer-events: auto;
	font-size: 0.875rem;
	font-weight: 600;
	color: #fff;
	background: rgba(0,0,0,0.6);
	border: 1px solid rgba(255,255,255,0.18);
	padding: 6px 14px;
	border-radius: var(--knack-radius-pill);
	backdrop-filter: blur(6px);
	text-shadow: 0 1px 2px rgba(0,0,0,0.6);
	white-space: nowrap;
}

/* Resume / Start-over hint shown under the play button when the viewer
   has saved progress on this film. Surfaces an explicit "Start over"
   path alongside the implicit resume that the play button does. */
.knack-film-resume-row {
	margin-top: 14px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.85);
	background: rgba(0,0,0,0.55);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: var(--knack-radius-pill);
	backdrop-filter: blur(6px);
}
.knack-film-resume-row__copy strong { color: #fff; font-weight: 700; }
.knack-film-resume-row__sep { color: rgba(255,255,255,0.4); }
.knack-film-resume-row__restart {
	display: inline-flex; align-items: center; gap: 4px;
	background: transparent;
	border: 0;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	padding: 0;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.knack-film-resume-row__restart:hover { color: var(--knack-accent); }
.knack-film-resume-row__restart .knack-icon--xs { width: 12px; height: 12px; }
/* When access denied, the play icon turns into shopping/upgrade/lock */
.knack-film-play-circle[data-knack-film-action="buy"],
.knack-film-play-circle[data-knack-film-action="upgrade"] {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
	color: #fff;
}
.knack-film-play-circle[data-knack-film-action="buy"]:hover,
.knack-film-play-circle[data-knack-film-action="upgrade"]:hover {
	background: var(--knack-accent-hover);
}

/* RIGHT FLOATING ACTION COLUMN — stacked icon buttons */
.knack-film-hero__actions-column {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
	gap: 10px;
	z-index: 2;
}
.knack-film-action-btn {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(0,0,0,0.55);
	border: 1px solid rgba(255,255,255,0.15);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
	backdrop-filter: blur(8px);
}
.knack-film-action-btn:hover {
	background: rgba(0,0,0,0.75);
	color: #fff;
	transform: scale(1.05);
}
.knack-film-action-btn.is-on {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
}
.knack-film-action-btn [data-lucide] {
	width: 20px;
	height: 20px;
}

/* BOTTOM ROW — metadata table left, gate note right */
.knack-film-hero__bottom {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 16px;
	align-items: end;
	align-self: end;
}
.knack-film-hero__gate-note {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: #fff;
	font-size: 0.875rem;
	padding: 10px 16px;
	background: var(--knack-accent);
	border-radius: var(--knack-radius);
	white-space: nowrap;
}
.knack-film-hero__gate-note strong { font-weight: 700; }

/* ────────────────────────────────────────────────────────────────
   PLAYER section — site theme bg, player itself stays black
   ──────────────────────────────────────────────────────────────── */
.knack-film-player-section {
	background: var(--knack-bg);
	padding: 32px 0;
}
.knack-film-player {
	position: relative;
	width: 100%;
	max-width: none;            /* let the player fill its container — the
	                               .knack-film-player-section above is
	                               already 100vw via the films-main rule,
	                               so this lets it bleed edge-to-edge */
	margin: 0;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 0;           /* sharp edges when filling viewport — the
	                               rounded corners only made sense when the
	                               player sat in a 1280px column with a
	                               page-bg margin around it */
	overflow: hidden;
	box-shadow: var(--knack-shadow-lg);
}
/* ── Persistent mini-player (docked corner) ───────────────────── */
/* Added by initMiniPlayer() when the player scrolls out of view while
   playing. position: fixed overrides whatever the player's normal
   layout is (absolute inset:0 in the hero, or in-flow in the section). */
.knack-player--mini,
.knack-film-player.knack-player--mini {
	position: fixed !important;
	inset: auto 20px 20px auto;   /* bottom-right corner */
	width: min( 360px, 84vw );
	height: auto;
	aspect-ratio: 16 / 9;
	z-index: 400;                 /* above sticky header (240) + side panel (250) */
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 16px 48px rgba( 0, 0, 0, 0.55 );
	animation: knack-mini-in 0.28s ease-out;
}
@keyframes knack-mini-in {
	from { transform: translateY( 24px ) scale( 0.92 ); opacity: 0; }
	to   { transform: none; opacity: 1; }
}
/* Shrink the controls bar so it stays usable at mini size. */
.knack-player--mini .knack-player__controls { padding: 4px 6px; }
.knack-player--mini .knack-player__progress { display: none; }
.knack-player--mini .knack-player__time,
.knack-player--mini .knack-player__btn--episodes,
.knack-player--mini .knack-player__btn--cc,
.knack-player--mini .knack-player__btn--speed,
.knack-player--mini .knack-player__btn--audio { display: none; }

/* Mini-player chrome (close + expand buttons), injected by JS. */
.knack-player__mini-btn {
	position: absolute;
	top: 8px;
	width: 28px;
	height: 28px;
	display: none;               /* only shown in mini mode */
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.6 );
	color: #fff;
	cursor: pointer;
	z-index: 5;
	backdrop-filter: blur( 6px );
	transition: background 0.15s ease;
}
.knack-player__mini-btn:hover { background: rgba( 0, 0, 0, 0.85 ); }
.knack-player__mini-btn svg { width: 15px; height: 15px; }
.knack-player__mini-close  { right: 8px; }
.knack-player__mini-expand { right: 42px; }
.knack-player--mini .knack-player__mini-btn { display: inline-flex; }

@media (max-width: 600px) {
	.knack-player--mini { width: 64vw; inset: auto 12px 12px auto; }
}
@media (prefers-reduced-motion: reduce) {
	.knack-player--mini { animation: none; }
}

.knack-film-player video,
.knack-film-player iframe {
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
/* YouTube/Vimeo embed wrapper (data-knack-embed-player) — must fill the 16/9
   player box. Without this the wrapper has no height, so the API-controlled
   iframe collapses to a small box floating in a black player area. */
.knack-film-embed-wrap {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.knack-film-embed-wrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}
.knack-film-player__locked {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	color: rgba(255,255,255,0.85);
	background: linear-gradient(135deg, #1a1a1f, #0c0c0e);
	padding: 24px;
	text-align: center;
}
.knack-film-player__locked p { margin: 0; max-width: 360px; }
.knack-film-player__locked .knack-film-locked__title { margin: 2px 0 0; font-size: 1.1rem; font-weight: 700; color: #fff; max-width: 380px; }
.knack-film-player__locked .knack-film-locked__price { margin: 0; font-size: 0.95rem; color: rgba(255,255,255,0.6); }
.knack-film-player__locked .knack-film-cta { margin-top: 6px; }

/* ────────────────────────────────────────────────────────────────
   Custom Player — overlay controls on top of a native <video>
   ──────────────────────────────────────────────────────────────── */
.knack-player {
	position: relative;
	width: 100%;
	height: 100%;
	background: #000;
	color: #fff;
	overflow: hidden;
	border-radius: inherit;
	isolation: isolate;
	font-family: var(--knack-font-body);
}
.knack-player.is-fullscreen {
	border-radius: 0;
}
.knack-player__video {
	width: 100%;
	height: 100%;
	display: block;
	cursor: pointer;
}
.knack-player.is-fullscreen .knack-player__video {
	height: 100vh;
	width: 100vw;
	object-fit: contain;
}

/* Big initial Play button. */
.knack-player__big-play {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: rgba(255,255,255,0.18);
	border: 2px solid rgba(255,255,255,0.7);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 32px rgba(0,0,0,0.5);
	transition: transform 0.2s ease, background 0.2s ease;
	z-index: 4;
}
.knack-player__big-play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(255,255,255,0.28); }
.knack-player__big-play [data-lucide] { width: 40px; height: 40px; margin-left: 4px; }
.knack-player.is-playing .knack-player__big-play { display: none; }

/* ────────────────────────────────────────────────────────────────
   Content-protection layer
   • Selection/drag disabled on the player container.
   • Watermark overlay drifts across the frame for forensic ID.
   • DevTools-detected guard overlay locks playback when inspector opens.
   ──────────────────────────────────────────────────────────────── */
.knack-player {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}
.knack-player__video {
	-webkit-user-select: none;
	user-select: none;
	pointer-events: auto; /* keep clicks for play/pause */
}
.knack-player__video::-internal-media-controls-download-button { display: none; }
.knack-player__video::-webkit-media-controls-enclosure { overflow: hidden; }
.knack-player__video::-webkit-media-controls-panel { width: calc(100% + 30px); }

/* DevTools guard — full-cover lock that appears when inspector is detected. */
.knack-player__guard[hidden] { display: none; }
.knack-player__guard {
	position: absolute;
	inset: 0;
	z-index: 100;
	background: rgba(0, 0, 0, 0.92);
	backdrop-filter: blur(8px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
}
.knack-player__guard-inner {
	max-width: 360px;
	text-align: center;
	padding: 24px;
}
.knack-player__guard-inner svg {
	margin-bottom: 16px;
	color: rgba(255, 255, 255, 0.7);
}
.knack-player__guard-inner h3 {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0 0 8px;
	letter-spacing: -0.01em;
}
.knack-player__guard-inner p {
	margin: 0;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 0.7);
	line-height: 1.5;
}

/* Bonus blur while guard is active — even if the user dismisses the overlay
   somehow, the video frame underneath is unreadable. */
.knack-player.is-guard-active .knack-player__video { filter: blur(24px); }

/* Loading spinner. */
.knack-player__spinner {
	position: absolute;
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
	width: 56px; height: 56px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 3;
}
.knack-player__spinner.is-on { opacity: 1; }
.knack-player__spinner-ring {
	width: 100%; height: 100%;
	border-radius: 50%;
	border: 4px solid rgba(255,255,255,0.2);
	border-top-color: #fff;
	animation: knack-player-spin 0.9s linear infinite;
}
@keyframes knack-player-spin { to { transform: rotate(360deg); } }

/* Top gradient with film title — fades when idle. */
.knack-player__top {
	position: absolute;
	left: 0; right: 0; top: 0;
	padding: 18px 24px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%);
	z-index: 2;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.knack-player__top-meta {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.knack-player__series {
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}
.knack-player__title {
	font-size: 1.125rem;
	font-weight: 700;
}
.knack-player.is-idle .knack-player__top {
	opacity: 0;
	transform: translateY(-8px);
}

/* Controls bar (bottom). */
.knack-player__controls {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 16px 20px 14px;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.5) 60%, rgba(0,0,0,0) 100%);
	z-index: 3;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.knack-player.is-idle .knack-player__controls {
	opacity: 0;
	transform: translateY(12px);
}
.knack-player.is-idle .knack-player__video { cursor: none; }

/* Progress bar. */
.knack-player__progress {
	position: relative;
	height: 22px;
	display: flex;
	align-items: center;
	cursor: pointer;
	margin-bottom: 6px;
}
.knack-player__progress-track {
	position: relative;
	width: 100%;
	height: 4px;
	background: rgba(255,255,255,0.25);
	border-radius: 2px;
	transition: height 0.15s ease;
}
.knack-player__progress:hover .knack-player__progress-track { height: 6px; }
.knack-player__progress-buffer {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: rgba(255,255,255,0.4);
	border-radius: 2px;
	width: 0%;
}
.knack-player__progress-played {
	position: absolute;
	left: 0; top: 0; bottom: 0;
	background: var(--knack-accent);
	border-radius: 2px;
	width: 0%;
}
.knack-player__progress-thumb {
	position: absolute;
	left: 0;
	top: 50%;
	width: 14px; height: 14px;
	margin-left: -7px;
	transform: translateY(-50%) scale(0);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 6px rgba(0,0,0,0.4);
	transition: transform 0.15s ease;
}
.knack-player__progress:hover .knack-player__progress-thumb { transform: translateY(-50%) scale(1); }
/* Native range input sits invisible above the track for accessibility + drag. */
.knack-player__progress-input {
	position: absolute;
	inset: 0;
	width: 100%;
	opacity: 0;
	margin: 0;
	cursor: pointer;
}

/* Scrubber hover/drag frame preview (YouTube/Netflix style). */
.knack-player__preview {
	position: absolute;
	bottom: calc(100% + 8px);
	left: 0;
	width: 168px;
	pointer-events: none;
	opacity: 0;
	transform: translateY(4px);
	transition: opacity 0.12s ease, transform 0.12s ease;
	z-index: 6;
}
.knack-player__preview.is-visible { opacity: 1; transform: translateY(0); }
.knack-player__preview-frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	overflow: hidden;
	border: 2px solid rgba(255,255,255,0.9);
	box-shadow: 0 8px 24px rgba(0,0,0,0.55);
}
.knack-player__preview-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: #000;
	pointer-events: none;
}
.knack-player__preview-time {
	display: block;
	margin-top: 5px;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 600;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 1px 4px rgba(0,0,0,0.9);
}
/* Time-only fallback (HLS / iframe sources can't be frame-scrubbed). */
.knack-player__preview--time-only { width: auto; }
.knack-player__preview--time-only .knack-player__preview-frame { display: none; }
.knack-player__preview--time-only .knack-player__preview-time {
	margin-top: 0;
	padding: 4px 9px;
	background: rgba(0,0,0,0.85);
	border-radius: 6px;
	white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
	.knack-player__preview { transition: opacity 0.12s ease; transform: none; }
	.knack-player__preview.is-visible { transform: none; }
}

/* Buttons row. */
.knack-player__buttons {
	display: flex;
	align-items: center;
	gap: 6px;
}
.knack-player__btn {
	width: 40px;
	height: 40px;
	border: 0;
	background: transparent;
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background 0.15s ease, transform 0.15s ease;
}
.knack-player__btn:hover { background: rgba(255,255,255,0.15); }
.knack-player__btn:active { transform: scale(0.92); }
.knack-player__btn [data-lucide] { width: 22px; height: 22px; }

.knack-player__time {
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.85);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	padding: 0 8px;
}
.knack-player__spacer { flex: 1; }

/* Volume control with slider that expands on hover. */
.knack-player__volume {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border-radius: var(--knack-radius-pill);
	transition: background 0.15s ease;
}
.knack-player__volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 0;
	height: 4px;
	background: rgba(255,255,255,0.3);
	border-radius: 2px;
	overflow: hidden;
	cursor: pointer;
	transition: width 0.2s ease;
	margin-right: 4px;
}
.knack-player__volume:hover .knack-player__volume-slider,
.knack-player__volume:focus-within .knack-player__volume-slider {
	width: 80px;
}
.knack-player__volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	box-shadow: -100px 0 0 100px var(--knack-accent);
}
.knack-player__volume-slider::-moz-range-thumb {
	width: 12px; height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 0;
	cursor: pointer;
}

/* Floating menus (captions, speed). */
.knack-player__menu-wrap { position: relative; }
.knack-player__btn--text {
	width: auto;
	min-width: 40px;
	padding: 0 10px;
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.knack-player__btn.is-on { color: var(--knack-accent); }
.knack-player__menu {
	position: absolute;
	bottom: calc(100% + 8px);
	right: 0;
	min-width: 140px;
	background: rgba(0,0,0,0.92);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--knack-radius);
	padding: 4px;
	z-index: 5;
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.knack-player__menu button {
	display: block;
	width: 100%;
	padding: 8px 14px;
	background: transparent;
	border: 0;
	color: #fff;
	font: inherit;
	font-size: 0.875rem;
	text-align: left;
	cursor: pointer;
	border-radius: var(--knack-radius-sm);
}
.knack-player__menu button:hover { background: rgba(255,255,255,0.1); }
.knack-player__menu button[aria-current="true"] {
	background: var(--knack-accent);
	color: #fff;
}
.knack-player__menu button[aria-current="true"]::after {
	content: " ✓";
	margin-left: auto;
}

/* Caption track styling (the rendered captions). */
.knack-player__video::cue {
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-family: var(--knack-font-body);
	font-size: 0.9em;
	line-height: 1.4;
	padding: 2px 8px;
}

/* Skip intro / skip credits floating buttons. */
.knack-player__skip {
	position: absolute;
	right: 24px;
	bottom: 96px;
	z-index: 4;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: rgba(0,0,0,0.75);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: var(--knack-radius);
	cursor: pointer;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	backdrop-filter: blur(8px);
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.knack-player__skip:hover {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
	transform: translateY(-1px);
}
.knack-player__skip [data-lucide] { width: 16px; height: 16px; }

@media (max-width: 640px) {
	.knack-player__skip {
		right: 12px;
		bottom: 92px;
		padding: 8px 14px;
		font-size: 0.8125rem;
	}
	.knack-player__menu { min-width: 120px; }
}

/* Episode picker drawer (slides in from the right). */
.knack-player__episodes {
	position: absolute;
	right: 0; top: 0; bottom: 0;
	width: min(420px, 92%);
	background: rgba(0,0,0,0.94);
	backdrop-filter: blur(12px);
	border-left: 1px solid rgba(255,255,255,0.08);
	transform: translateX(100%);
	transition: transform 0.28s ease;
	z-index: 6;
	display: flex;
	flex-direction: column;
}
.knack-player__episodes.is-open { transform: translateX(0); }
.knack-player__episodes-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}
.knack-player__episodes-header h3 { margin: 0; font-size: 1rem; font-weight: 700; }

/* Season tabs — Netflix-style row above the episode list, only renders
   when the series has more than one season. Clicking a tab swaps the
   active season's <ul data-knack-season-panel> in. */
.knack-player__season-tabs {
	display: flex;
	gap: 4px;
	padding: 12px 20px 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.knack-player__season-tabs::-webkit-scrollbar { display: none; }
.knack-player__season-tab {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.1 );
	border-radius: 999px;
	color: rgba( 255, 255, 255, 0.75 );
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.knack-player__season-tab:hover {
	background: rgba( 255, 255, 255, 0.12 );
	color: #fff;
}
.knack-player__season-tab.is-active {
	background: #fff;
	color: #0a0a0a;
	border-color: #fff;
}
.knack-player__season-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: rgba( 0, 0, 0, 0.15 );
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
}
.knack-player__season-tab.is-active .knack-player__season-count {
	background: rgba( 0, 0, 0, 0.1 );
}

/* Play/pause icon — two static <i> elements toggled by .is-playing on the
   player. Replaces the previous setIcon() approach which got stuck after
   lucide.createIcons() replaced the original <i> with <svg>. */
.knack-player__play-icon--pause { display: none; }
.knack-player.is-playing .knack-player__play-icon--play  { display: none; }
.knack-player.is-playing .knack-player__play-icon--pause { display: inline-flex; }
.knack-player__episodes-close {
	width: 36px; height: 36px;
	background: rgba(255,255,255,0.1);
	border: 0;
	border-radius: 50%;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.knack-player__episodes-close [data-lucide] { width: 18px; height: 18px; }
.knack-player__episodes-list {
	list-style: none;
	margin: 0;
	padding: 8px;
	overflow-y: auto;
	flex: 1;
}
.knack-player__episode { margin-bottom: 6px; }
.knack-player__episode a {
	display: grid;
	grid-template-columns: 120px 1fr;
	gap: 12px;
	padding: 8px;
	border-radius: var(--knack-radius);
	text-decoration: none;
	color: inherit;
	transition: background 0.15s ease;
}
.knack-player__episode a:hover { background: rgba(255,255,255,0.08); }
.knack-player__episode.is-current a { background: var(--knack-accent); color: #fff; }
.knack-player__episode-thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #1a1a1f center / cover no-repeat;
	border-radius: var(--knack-radius);
	position: relative;
	overflow: hidden;
}
.knack-player__episode-play {
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	background: rgba(0,0,0,0.4);
	opacity: 0;
	transition: opacity 0.15s ease;
	color: #fff;
}
.knack-player__episode-play [data-lucide] { width: 28px; height: 28px; }
.knack-player__episode a:hover .knack-player__episode-play { opacity: 1; }
.knack-player__episode-now {
	position: absolute;
	left: 6px; bottom: 6px;
	background: var(--knack-accent);
	color: #fff;
	padding: 2px 8px;
	border-radius: var(--knack-radius-sm);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.knack-player__episode-info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 4px;
}
.knack-player__episode-num {
	font-size: 0.7rem;
	color: rgba(255,255,255,0.6);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 700;
}
.knack-player__episode-title { font-size: 0.875rem; font-weight: 600; }
.knack-player__episode-runtime { font-size: 0.75rem; color: rgba(255,255,255,0.55); }
.knack-player__episode.is-current .knack-player__episode-num,
.knack-player__episode.is-current .knack-player__episode-runtime { color: rgba(255,255,255,0.85); }

/* Up next overlay. */
.knack-player__upnext {
	position: absolute;
	right: 24px;
	bottom: 88px;
	z-index: 5;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.knack-player__upnext.is-on { opacity: 1; transform: translateY(0); }
.knack-player__upnext-card {
	display: grid;
	grid-template-columns: 110px 1fr;
	gap: 14px;
	width: min(440px, 90vw);
	padding: 14px;
	background: rgba(0,0,0,0.85);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--knack-radius-lg);
	backdrop-filter: blur(10px);
	box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.knack-player__upnext-art {
	position: relative;
	aspect-ratio: 2 / 3;
	background: #1a1a1f center / cover no-repeat;
	border-radius: var(--knack-radius);
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: 10px;
	color: rgba(255,255,255,0.92);
}
.knack-player__upnext-pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.65);
	mix-blend-mode: screen;
	pointer-events: none;
}
.knack-player__upnext-pattern svg { width: 100%; height: 100%; display: block; }
.knack-player__upnext-art-title {
	position: relative;
	z-index: 2;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: -0.005em;
	line-height: 1.05;
	text-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.knack-player__upnext-body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	justify-content: center;
	min-width: 0;
}
.knack-player__upnext-label {
	font-size: 0.7rem;
	color: rgba(255,255,255,0.7);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: 700;
}
.knack-player__upnext-title {
	font-size: 1rem;
	font-weight: 700;
	margin: 2px 0;
	color: #fff;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.knack-player__upnext-countdown {
	margin: 0 0 8px;
	font-size: 0.8125rem;
	color: rgba(255,255,255,0.75);
}
.knack-player__upnext-actions {
	display: flex;
	gap: 8px;
}
.knack-player__upnext-actions .knack-film-cta { padding: 8px 16px; font-size: 0.8125rem; }
.knack-player__upnext-actions .knack-film-secondary-cta { padding: 8px 14px; font-size: 0.8125rem; }

/* Mobile player tweaks. */
@media (max-width: 640px) {
	.knack-player__top { padding: 12px 16px; }
	.knack-player__title { font-size: 1rem; }
	.knack-player__controls { padding: 12px 12px 10px; }
	.knack-player__btn { width: 36px; height: 36px; }
	.knack-player__btn [data-lucide] { width: 20px; height: 20px; }
	.knack-player__time { display: none; }
	.knack-player__big-play { width: 72px; height: 72px; }
	.knack-player__big-play [data-lucide] { width: 30px; height: 30px; }
	.knack-player__upnext { right: 12px; bottom: 96px; }
	.knack-player__upnext-card { grid-template-columns: 70px 1fr; gap: 10px; padding: 10px; }
	.knack-player__episode a { grid-template-columns: 90px 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   Reactions row (below the player on single film page)
   ──────────────────────────────────────────────────────────────── */
.knack-film-section--reactions { padding-top: 28px; }

/* ────────────────────────────────────────────────────────────────
   People / Directors archive — alphabetical index of ks_person
   ──────────────────────────────────────────────────────────────── */
.knack-people-archive { padding-bottom: 64px; }
.knack-people-archive__header {
	padding: 36px 0 28px;
	border-bottom: 1px solid var(--knack-border-soft);
	margin-bottom: 24px;
}
.knack-people-archive__eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--knack-text-muted);
	margin-bottom: 10px;
}
.knack-people-archive__title {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 0 0 12px;
	color: var(--knack-text);
}
.knack-people-archive__lede {
	max-width: 600px;
	font-size: 0.9375rem;
	color: var(--knack-text-muted);
	margin: 0;
	line-height: 1.55;
}
.knack-people-archive__empty {
	padding: 60px 0;
	text-align: center;
	color: var(--knack-text-muted);
	font-size: 0.9375rem;
}

/* Cinematic ambiance header — borrowed film backdrop, matches the person hero. */
.knack-people-archive__header { position: relative; overflow: hidden; isolation: isolate; }
.knack-people-archive__header .knack-container { position: relative; z-index: 1; }
.knack-people-archive__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(34px) saturate(1.2);
	transform: scale(1.2);
	opacity: 0.45;
}
.knack-people-archive__header.has-ambiance {
	background: #0c0c10;
	border-bottom-color: rgba(255,255,255,0.08);
	padding: 56px 0 44px;
}
.knack-people-archive__header.has-ambiance::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, #0c0c10 0%, rgba(12,12,16,0.72) 55%, rgba(12,12,16,0.5) 100%);
}
.knack-people-archive__header.has-ambiance .knack-people-archive__eyebrow { color: rgba(255,255,255,0.62); }
.knack-people-archive__header.has-ambiance .knack-people-archive__title { color: #fff; }
.knack-people-archive__header.has-ambiance .knack-people-archive__lede { color: rgba(255,255,255,0.8); }

/* Avatar ring on people cards */
.knack-people-card__photo { box-shadow: 0 0 0 1px var(--knack-border-soft); }

/* A-Z jump nav — sticky horizontal letter row */
.knack-people-archive__az {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	margin-bottom: 32px;
	padding: 12px 14px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	position: sticky;
	top: 80px;
	z-index: 10;
	backdrop-filter: blur(8px);
	background-color: color-mix(in srgb, var(--knack-bg-secondary) 92%, transparent);
}
.knack-people-archive__az-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--knack-text);
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.12s ease, color 0.12s ease;
}
.knack-people-archive__az-link:hover {
	background: var(--knack-text);
	color: var(--knack-bg);
}
.knack-people-archive__az-link.is-empty {
	color: var(--knack-text-muted);
	opacity: 0.35;
	pointer-events: none;
}

/* Letter section */
.knack-people-letter {
	margin-bottom: 40px;
	scroll-margin-top: 100px;
}
.knack-people-letter__heading {
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 18px;
	color: var(--knack-text);
	border-bottom: 2px solid var(--knack-text);
	padding-bottom: 6px;
}
.knack-people-letter__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
}

.knack-people-card {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 12px;
	align-items: center;
	padding: 10px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-lg, 12px);
	color: var(--knack-text);
	text-decoration: none;
	transition: border-color 0.15s ease, transform 0.15s ease;
}
.knack-people-card:hover {
	border-color: var(--knack-accent);
	transform: translateY(-2px);
}
.knack-people-card__photo {
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	display: flex; align-items: center; justify-content: center;
	color: var(--knack-text-muted);
	overflow: hidden;
}
.knack-people-card__initial {
	font-size: 1.25rem;
	font-weight: 800;
	color: var(--knack-text);
}
.knack-people-card__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.knack-people-card__name {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	text-transform: capitalize;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.knack-people-card__count {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	font-weight: 600;
}

/* ────────────────────────────────────────────────────────────────
   Reactions — "How did this make you feel?" emoji pills
   ──────────────────────────────────────────────────────────────── */
.knack-film-reactions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.knack-film-reaction {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: var(--knack-bg-secondary);
	border: 1.5px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	color: var(--knack-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.knack-film-reaction:hover {
	border-color: var(--knack-accent);
	background: var(--knack-accent-muted);
	transform: translateY(-1px);
}
.knack-film-reaction.is-on {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
	color: #fff;
}
.knack-film-reaction [data-lucide] { width: 18px; height: 18px; }
.knack-film-reaction__count {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	font-weight: 700;
	min-width: 18px;
	text-align: center;
}
.knack-film-reaction.is-on .knack-film-reaction__count { color: rgba(255,255,255,0.9); }
.knack-film-reaction:hover .knack-film-reaction__count { color: var(--knack-accent); }
.knack-film-reaction.is-on:hover .knack-film-reaction__count { color: #fff; }

/* ────────────────────────────────────────────────────────────────
   Tip jar — between reactions and storyline
   ──────────────────────────────────────────────────────────────── */
.knack-film-section--tip { padding-top: 12px; }
.knack-film-tip {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	padding: 18px 22px;
	background: linear-gradient(135deg, var(--knack-accent-muted, rgba(96,51,94,0.08)) 0%, var(--knack-bg-secondary) 100%);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-xl, 18px);
}
.knack-film-tip__icon {
	width: 48px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	color: var(--knack-accent);
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0,0,0,0.06);
	flex-shrink: 0;
}
.knack-film-tip__title {
	font-size: 1.05rem;
	font-weight: 800;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}
.knack-film-tip__desc {
	margin: 0;
	font-size: 0.9375rem;
	color: var(--knack-text-muted);
	line-height: 1.5;
}
.knack-film-tip__desc strong { color: var(--knack-text); font-weight: 700; }
.knack-film-cta--accent {
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
	border-color: var(--knack-accent);
}
.knack-film-cta--accent:hover { filter: brightness(1.06); }

@media (max-width: 640px) {
	.knack-film-tip { grid-template-columns: 1fr; text-align: center; }
	.knack-film-tip__icon { margin: 0 auto; }
}

/* ────────────────────────────────────────────────────────────────
   Festivals & awards — laurel chips
   ──────────────────────────────────────────────────────────────── */
.knack-film-section--festivals { padding-top: 20px; }
.knack-film-fests {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.knack-film-fest {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 14px 8px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-lg, 14px);
	text-align: center;
}
.knack-film-fest__laurel {
	width: 22px; height: 52px;
	color: var(--knack-accent);
	opacity: 0.65;
	flex-shrink: 0;
}
.knack-film-fest__laurel svg { width: 100%; height: 100%; display: block; }
.knack-film-fest__copy { min-width: 0; }
.knack-film-fest__name {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--knack-text);
	line-height: 1.25;
	letter-spacing: -0.005em;
	margin-bottom: 2px;
}
.knack-film-fest__meta {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Trailer modal (rendered by films.js)
   Full-screen darkened backdrop with a blurred glass effect. The trailer
   sits in a contained box with rounded corners and a visible 44px close
   button on the top-right corner of the box itself (not floating above). */
.knack-film-trailer-modal {
	position: fixed;
	inset: 0;
	z-index: var(--knack-z-modal, 400);
	background: rgba(0,0,0,0.85);
	backdrop-filter: blur(8px) saturate(140%);
	-webkit-backdrop-filter: blur(8px) saturate(140%);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 32px;
	animation: knack-film-fade 0.25s ease;
}
@keyframes knack-film-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes knack-film-pop  { from { transform: scale(0.94); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.knack-film-trailer-modal__box {
	position: relative;
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: var(--knack-radius-xl);
	overflow: hidden;
	box-shadow: 0 24px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.05);
	animation: knack-film-pop 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.knack-film-trailer-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	line-height: 1;
	z-index: 2;
	backdrop-filter: blur(8px);
	transition: background 0.15s ease, transform 0.15s ease;
}
.knack-film-trailer-modal__close:hover {
	background: rgba(0,0,0,0.85);
	transform: scale(1.08);
}
.knack-film-trailer-modal__close:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

@media (max-width: 768px) {
	.knack-film-trailer-modal { padding: 16px; }
	.knack-film-trailer-modal__box { border-radius: var(--knack-radius-lg); }
	.knack-film-trailer-modal__close { width: 40px; height: 40px; top: 12px; right: 12px; }
}

/* ────────────────────────────────────────────────────────────────
   Body sections — theme-colored, stacked
   ──────────────────────────────────────────────────────────────── */
.knack-film-section {
	padding: 40px 0;
	background: var(--knack-bg);
	color: var(--knack-text);
}
.knack-film-section + .knack-film-section { padding-top: 0; }
.knack-film-section__title {
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--knack-text);
	margin: 0 0 20px;
	letter-spacing: -0.01em;
}

/* Storyline */
.knack-film-story__synopsis {
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--knack-text);
	margin: 0 0 16px;
	max-width: 72ch;
}
.knack-film-story__content {
	color: var(--knack-text-secondary);
	line-height: 1.65;
	font-size: 1rem;
	max-width: 72ch;
}
.knack-film-story__content p { margin: 0 0 1em; }

/* About layout — storyline body + a details key/value sidebar */
.knack-film-about {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
	gap: 28px 48px;
	align-items: start;
}
.knack-film-about__story { min-width: 0; }
.knack-film-about__details {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 10px 16px;
	padding: 18px 20px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius, 10px);
}
.knack-film-about__row { display: contents; }
.knack-film-about__details dt {
	color: var(--knack-text-muted);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	padding-top: 3px;
	white-space: nowrap;
}
.knack-film-about__details dd {
	margin: 0;
	color: var(--knack-text);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
}
@media (max-width: 768px) {
	.knack-film-about { grid-template-columns: 1fr; gap: 18px; }
}

/* ────────────────────────────────────────────────────────────────
   Cast — IMDb-style horizontal scroll row
   ──────────────────────────────────────────────────────────────── */
.knack-film-cast {
	list-style: none;
	margin: 0;
	padding: 0 0 8px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 120px;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
}
.knack-film-cast::-webkit-scrollbar { height: 6px; }
.knack-film-cast::-webkit-scrollbar-thumb { background: var(--knack-border); border-radius: 3px; }
.knack-film-cast__item {
	scroll-snap-align: start;
	text-align: center;
}
.knack-film-cast__card {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: transform 0.15s ease;
}
.knack-film-cast__card.is-linked {
	cursor: pointer;
}
.knack-film-cast__card.is-linked:hover {
	transform: translateY(-3px);
	color: inherit;
}
.knack-film-cast__card.is-linked:hover .knack-film-cast__name {
	color: var(--knack-accent);
}
.knack-film-cast__photo {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	margin: 0 auto 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-shadow: var(--knack-shadow-sm);
	border: 1px solid var(--knack-border-soft);
}
.knack-film-cast__initial {
	font-size: 2rem;
	font-weight: 700;
	color: var(--knack-text-muted);
}
.knack-film-cast__name {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
	line-height: 1.3;
	text-transform: capitalize;
	word-break: break-word;
}
.knack-film-cast__role {
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
	line-height: 1.3;
	margin-top: 2px;
}

/* ────────────────────────────────────────────────────────────────
   Section tab nav — sits below the player on series/episode pages.
   Anchor-style scrolls to the targeted section; active state syncs
   to whichever section is most-visible (intersection observer).
   ──────────────────────────────────────────────────────────────── */
.knack-film-tabs {
	position: sticky;
	top: 64px; /* under the site header */
	z-index: 20;
	background: var(--knack-bg);
	border-bottom: 1px solid var(--knack-border-soft);
	margin: 0 0 8px;
	backdrop-filter: blur(8px);
	background-color: color-mix(in srgb, var(--knack-bg) 92%, transparent);
}
.knack-film-tabs__list {
	display: flex;
	gap: 4px;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scrollbar-width: none;
}
.knack-film-tabs__list::-webkit-scrollbar { display: none; }
.knack-film-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 16px 4px;
	margin: 0 14px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: color 0.15s ease, border-color 0.15s ease;
}
.knack-film-tabs__link:first-child { margin-left: 0; }
.knack-film-tabs__link:hover { color: var(--knack-text); }
.knack-film-tabs__link.is-active {
	color: var(--knack-text);
	border-bottom-color: var(--knack-accent);
}
.knack-film-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
	border-radius: 999px;
}
.knack-film-tabs__link.is-active .knack-film-tabs__count {
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
}

/* Give sections enough scroll margin to land below the sticky tabs */
.knack-film-section { scroll-margin-top: 130px; }

/* ────────────────────────────────────────────────────────────────
   Season selector + episode controls row
   ──────────────────────────────────────────────────────────────── */
.knack-film-episodes__controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}
.knack-film-episodes__season {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 36px 8px 14px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text);
	cursor: pointer;
	transition: border-color 0.15s ease;
}
.knack-film-episodes__season:hover {
	border-color: var(--knack-border);
}
.knack-film-episodes__season select {
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	font: inherit;
	color: inherit;
	padding: 0;
	padding-right: 4px;
	cursor: pointer;
	outline: none;
}
.knack-film-episodes__season svg {
	position: absolute;
	right: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--knack-text-muted);
	pointer-events: none;
}

/* ────────────────────────────────────────────────────────────────
   Spoiler-safe mode — "redaction bar". Styled like a document censor
   strip: spoilers are blacked out, and clicking lifts the redaction.
   Thematic to film/TV spoiler culture — deliberately not a toggle card.
   `.is-lifted` is added by the page script when the viewer turns it off.
   ──────────────────────────────────────────────────────────────── */
.knack-film-redact {
	margin: 6px 0 24px;
	max-width: 560px;
}
.knack-film-redact__bar {
	display: block;
	cursor: pointer;
	user-select: none;
}
.knack-film-redact__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.knack-film-redact__strip {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 16px;
	background: #0e0e10;
	color: #fff;
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 4px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.18);
	transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.knack-film-redact__bar:hover .knack-film-redact__strip { border-color: rgba(255,255,255,0.32); }
.knack-film-redact__input:focus-visible ~ .knack-film-redact__strip {
	outline: 2px solid var(--knack-accent);
	outline-offset: 2px;
}
.knack-film-redact__stamp {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
	font-weight: 700;
	font-size: 0.78rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}
.knack-film-redact__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.knack-film-redact__icon { width: 16px; height: 16px; flex: none; }
.knack-film-redact__action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.55);
	white-space: nowrap;
}
.knack-film-redact__action::before {
	content: "";
	width: 20px;
	height: 1px;
	background: rgba(255,255,255,0.3);
	transition: background 0.22s ease;
}
.knack-film-redact__caption {
	margin: 9px 2px 0;
	font-size: 0.75rem;
	line-height: 1.5;
	color: var(--knack-text-muted);
}

/* Default render = ON (spoiler-safe). Hide the OFF variants. */
.knack-film-redact__icon--off,
.knack-film-redact__label--off,
.knack-film-redact__action--off,
.knack-film-redact__caption--off { display: none; }

/* Dark mode: make the bar read as "blacker than the page" + lift border. */
body.aoty-dark-mode .knack-film-redact__strip {
	background: #050506;
	border-color: rgba(255,255,255,0.22);
	box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 16px rgba(0,0,0,0.55);
}

/* ── OFF state (redaction lifted) — set by JS .is-lifted class. */
.knack-film-redact.is-lifted .knack-film-redact__strip {
	background: transparent;
	color: var(--knack-text);
	border: 1px dashed var(--knack-border);
	box-shadow: none;
}
.knack-film-redact.is-lifted .knack-film-redact__icon { color: var(--knack-text-muted); }
.knack-film-redact.is-lifted .knack-film-redact__action { color: var(--knack-accent); }
.knack-film-redact.is-lifted .knack-film-redact__action::before {
	background: color-mix(in srgb, var(--knack-accent) 55%, transparent);
}
.knack-film-redact.is-lifted .knack-film-redact__icon--on,
.knack-film-redact.is-lifted .knack-film-redact__label--on,
.knack-film-redact.is-lifted .knack-film-redact__action--on,
.knack-film-redact.is-lifted .knack-film-redact__caption--on { display: none; }
.knack-film-redact.is-lifted .knack-film-redact__icon--off { display: inline-flex; }
.knack-film-redact.is-lifted .knack-film-redact__label--off,
.knack-film-redact.is-lifted .knack-film-redact__action--off,
.knack-film-redact.is-lifted .knack-film-redact__caption--off { display: inline; }

@media (prefers-reduced-motion: reduce) {
	.knack-film-redact__strip,
	.knack-film-redact__action::before { transition: none; }
}

@media (max-width: 640px) {
	.knack-film-tabs { top: 56px; }
	.knack-film-redact { max-width: none; }
	.knack-film-redact__strip { flex-wrap: wrap; gap: 6px 12px; }
	.knack-film-redact__action::before { display: none; }
}

/* ────────────────────────────────────────────────────────────────
   Episode list — series + episode pages share this card grid.
   Card states: default, .is-watched (subdued), .is-current (accent ring + bar).
   ──────────────────────────────────────────────────────────────── */
.knack-film-section--episodes { padding-top: 32px; }

.knack-film-episodes__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: end;
	margin-bottom: 22px;
}
.knack-film-episodes__eyebrow {
	display: block;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--knack-text-muted);
	margin-bottom: 6px;
}
.knack-film-episodes__sub {
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
	margin: 6px 0 0;
}

/* Progress meter on the right side of the header */
.knack-film-episodes__progress {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 6px;
	min-width: 200px;
}
.knack-film-episodes__progress-bar {
	width: 200px;
	height: 4px;
	background: var(--knack-border-soft);
	border-radius: 999px;
	overflow: hidden;
}
.knack-film-episodes__progress-fill {
	display: block;
	height: 100%;
	background: var(--knack-accent);
	transition: width 0.4s ease;
}
.knack-film-episodes__progress-text {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	letter-spacing: 0.01em;
}

/* Episode grid */
.knack-film-episodes__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}
.knack-film-episode {
	background: var(--knack-bg);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-xl, 16px);
	overflow: hidden;
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.knack-film-episode:hover {
	border-color: var(--knack-border);
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.knack-film-episode.is-current {
	border-color: var(--knack-accent);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--knack-accent) 28%, transparent),
	            0 12px 32px color-mix(in srgb, var(--knack-accent) 16%, transparent);
}
.knack-film-episode.is-watched { opacity: 0.78; }
.knack-film-episode.is-watched:hover { opacity: 1; }

.knack-film-episode__link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.knack-film-episode__link:hover { color: inherit; }

.knack-film-episode__thumb {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	overflow: hidden;
}
.knack-film-episode__pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.6);
	mix-blend-mode: screen;
	pointer-events: none;
}
.knack-film-episode__pattern svg { width: 100%; height: 100%; display: block; }
/* Centered glyph on art-less (procedural) thumbs so they read as an episode
   awaiting artwork rather than a flat colour block. */
.knack-film-episode__glyph {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.55);
	pointer-events: none;
}
.knack-film-episode__glyph [data-lucide] { width: 34px; height: 34px; }

/* Badge — top-left of the thumbnail. Variants for now/watched/finale. */
.knack-film-episode__badge {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	padding: 4px 10px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	border-radius: 999px;
	background: rgba(0,0,0,0.6);
	color: #fff;
	backdrop-filter: blur(8px);
}
.knack-film-episode__badge--now {
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
}
.knack-film-episode__badge--watched {
	background: rgba(255,255,255,0.92);
	color: #111;
}
.knack-film-episode__badge--finale {
	background: linear-gradient(135deg, #f59e0b, #d97706);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
}

/* Runtime — top-right */
.knack-film-episode__runtime {
	position: absolute;
	top: 10px; right: 10px;
	z-index: 3;
	padding: 3px 8px;
	font-size: 0.6875rem;
	font-weight: 700;
	color: #fff;
	background: rgba(0,0,0,0.6);
	border-radius: 4px;
	backdrop-filter: blur(8px);
}

/* Play hover overlay */
.knack-film-episode__play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,0);
	transition: background 0.2s ease;
	z-index: 2;
}
.knack-film-episode__play [data-lucide] {
	width: 48px;
	height: 48px;
	padding: 14px;
	background: rgba(255,255,255,0.92);
	color: #111;
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.knack-film-episode:hover .knack-film-episode__play { background: rgba(0,0,0,0.3); }
.knack-film-episode:hover .knack-film-episode__play [data-lucide] {
	opacity: 1;
	transform: scale(1);
}

/* Progress bar at bottom of thumbnail — shown for current + in-progress eps */
.knack-film-episode__bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: rgba(0,0,0,0.3);
	z-index: 3;
}
.knack-film-episode__bar-fill {
	display: block;
	height: 100%;
	background: var(--knack-accent);
}

/* Card body */
.knack-film-episode__body {
	padding: 14px 16px 16px;
}
.knack-film-episode__num {
	display: block;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--knack-text-muted);
	margin-bottom: 4px;
}
.knack-film-episode__title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--knack-text);
	margin: 0 0 6px;
	letter-spacing: -0.005em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.knack-film-episode__synopsis {
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

@media (max-width: 960px) {
	.knack-film-episodes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.knack-film-episodes__header { grid-template-columns: 1fr; gap: 14px; }
	.knack-film-episodes__progress { align-items: flex-start; min-width: 0; }
	.knack-film-episodes__progress-bar { width: 100%; max-width: 280px; }
}
@media (max-width: 560px) {
	.knack-film-episodes__grid { grid-template-columns: 1fr; }
}

/* ────────────────────────────────────────────────────────────────
   Section header (shared by "More from creator" + "More like this" +
   any future section that needs a title on the left + link on the right)
   ──────────────────────────────────────────────────────────────── */
.knack-film-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.knack-film-section__header > div { min-width: 0; }
.knack-film-section__header .knack-film-section__title { margin: 0; }
.knack-film-section__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 16px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text);
	text-decoration: none;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: 999px;
	white-space: nowrap;
	transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.knack-film-section__more svg { width: 14px; height: 14px; }
.knack-film-section__more:hover {
	background: var(--knack-text);
	color: var(--knack-bg);
	border-color: var(--knack-text);
}

@media (max-width: 640px) {
	.knack-film-section__header { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* ────────────────────────────────────────────────────────────────
   Similar films grid — used by "More from creator" + "More like this".
   Procedural variant fills in the gradient + wireframe pattern for
   films without uploaded posters so blank gray cards never ship.
   ──────────────────────────────────────────────────────────────── */
.knack-film-similar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 20px;
}
.knack-film-similar__card {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform 0.18s ease;
}
.knack-film-similar__card:hover { transform: translateY(-4px); color: inherit; }
.knack-film-similar__art {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	border-radius: var(--knack-radius);
	margin-bottom: 10px;
	box-shadow: var(--knack-shadow-card, 0 4px 16px rgba(0,0,0,0.08));
	overflow: hidden;
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.knack-film-similar__card:hover .knack-film-similar__art {
	box-shadow: 0 16px 36px rgba(0,0,0,0.16);
}

/* Procedural fallback: gradient is on the .__art bg, wireframe pattern
   layered on top, the film title baked into the art as a label. */
.knack-film-similar__pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.65);
	mix-blend-mode: screen;
	pointer-events: none;
}
.knack-film-similar__pattern svg { width: 100%; height: 100%; display: block; }
.knack-film-similar__art-title {
	position: absolute;
	left: 14px; right: 14px; bottom: 14px;
	z-index: 2;
	font-family: var(--knack-font-heading, 'Inter', sans-serif);
	font-size: 1.0625rem;
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.05;
	color: #fff;
	text-shadow: 0 2px 6px rgba(0,0,0,0.35);
}
.knack-film-similar__card.is-procedural .knack-film-similar__art {
	box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

.knack-film-similar__title {
	display: block;
	color: var(--knack-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 2px;
	letter-spacing: -0.005em;
}
.knack-film-similar__year {
	display: block;
	color: var(--knack-text-muted);
	font-size: 0.75rem;
}

/* ────────────────────────────────────────────────────────────────
   Archive — Netflix-style featured film hero
   Full-width band with autoplaying trailer (muted, looped) as the
   background, dark gradient overlay so the title + synopsis stay
   readable, CTAs anchored bottom-left.

   Fallback chain:
     - direct video trailer  → <video autoplay muted loop>
     - youtube / vimeo       → iframe with autoplay+mute+loop params
     - no trailer URL        → backdrop image via CSS custom property
   ──────────────────────────────────────────────────────────────── */
.knack-film-featured {
	position: relative;
	width: 100%;
	height: clamp(420px, 62vh, 720px);
	background: #0a0a0c var(--knack-film-featured-bg, none) center / cover no-repeat;
	color: #fff;
	overflow: hidden;
	isolation: isolate; /* keep z-index local */
}

.knack-film-featured__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.knack-film-featured__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* iframe wrap — youtube/vimeo embeds maintain aspect ratio but need to
   over-fill the container so no letterbox bars show */
.knack-film-featured__iframe-wrap {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none; /* clicks should pass to the overlay */
}
.knack-film-featured__iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 177.78vh; /* 16:9 — wide enough to fill any container */
	min-width: 100%;
	height: 56.25vw; /* 16:9 — tall enough to fill any container */
	min-height: 100%;
	border: 0;
}
.knack-film-featured__gradient {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		/* Soft bottom fade into the next section — no dark band. */
		linear-gradient(to top, var(--knack-bg) 0%, rgba(0,0,0,0.0) 18%),
		/* Focused darkening on the bottom-left only, where the text sits.
		   The image stays clean on the right + top. */
		linear-gradient(115deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.45) 30%, rgba(0,0,0,0.1) 60%, rgba(0,0,0,0) 80%);
}

.knack-film-featured__overlay {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	align-items: flex-end;
	padding: 0 0 48px;
}
.knack-film-featured__content { max-width: 640px; }

.knack-film-featured__tag {
	display: inline-block;
	padding: 5px 12px;
	background: rgba(255,255,255,0.18);
	color: #fff;
	border-radius: var(--knack-radius-pill);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin: 0 0 14px;
	backdrop-filter: blur(6px);
}
.knack-film-featured__tag--accent { background: var(--knack-accent); }

.knack-film-featured__title {
	font-size: clamp(2rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.025em;
	color: #fff;
	margin: 0 0 14px;
	text-shadow:
		0 2px 4px rgba(0,0,0,0.65),
		0 6px 24px rgba(0,0,0,0.55);
}

.knack-film-featured__pills {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.88);
}
.knack-film-featured__pills li { display: inline-flex; align-items: center; }
.knack-film-featured__pills li + li::before {
	content: "·";
	margin-right: 12px;
	opacity: 0.55;
}
.knack-film-featured__pill--rating {
	border: 1px solid rgba(255,255,255,0.5);
	padding: 1px 8px;
	border-radius: 4px;
	font-weight: 700;
	font-size: 0.7rem;
}
.knack-film-featured__pill--genre {
	background: rgba(255,255,255,0.12);
	border-radius: var(--knack-radius-pill);
	padding: 3px 10px;
}
.knack-film-featured__pill--rating::before,
.knack-film-featured__pill--genre::before { display: none; }

.knack-film-featured__synopsis {
	font-size: 1rem;
	line-height: 1.55;
	color: #fff;
	margin: 0 0 24px;
	max-width: 58ch;
	text-shadow:
		0 1px 2px rgba(0,0,0,0.7),
		0 2px 10px rgba(0,0,0,0.55);
}
.knack-film-featured__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Pause/blur autoplaying trailer when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
	.knack-film-featured__video,
	.knack-film-featured__iframe {
		display: none;
	}
}

@media (max-width: 768px) {
	.knack-film-featured { height: clamp(360px, 56vh, 540px); }
	.knack-film-featured__overlay { padding: 0 0 28px; }
	.knack-film-featured__title { font-size: 2rem; }
	.knack-film-featured__synopsis { font-size: 0.9375rem; margin-bottom: 18px; }
}

/* ────────────────────────────────────────────────────────────────
   Archive — editorial poster strips hero (legacy)
   Kept for any code path that still wants the strip layout. Not
   rendered on the films archive anymore — Netflix-style featured
   above replaced it.
   ──────────────────────────────────────────────────────────────── */
.knack-film-archive-strips {
	position: relative;
	background: var(--knack-bg);
	color: var(--knack-text);
	overflow: hidden;
	padding: 56px 24px 40px;
}
.knack-film-archive-strips__crumbs {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--knack-text-secondary);
	margin: 0 0 8px;
}
.knack-film-archive-strips__crumbs a {
	color: var(--knack-text-muted);
	text-decoration: none;
	transition: color 0.15s ease;
}
.knack-film-archive-strips__crumbs a:hover { color: var(--knack-text); }
.knack-film-archive-strips__crumbs-current { color: var(--knack-text); font-weight: 600; }
.knack-film-archive-strips__crumbs .knack-icon--xs { width: 12px; height: 12px; opacity: 0.5; }
.knack-film-archive-strips__heading {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--knack-text);
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.knack-film-archive-strips__heading::before {
	content: "";
	width: 4px;
	height: 28px;
	background: var(--knack-accent);
	border-radius: 2px;
	display: inline-block;
}

.knack-film-archive-strips__row {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 8px;
	height: 440px;
}

/* Individual poster strip card */
.knack-film-strip {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	max-width: 220px;
	display: block;
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	color: #fff;
	transition: transform 0.35s ease, flex-grow 0.35s ease, max-width 0.35s ease, box-shadow 0.35s ease;
	box-shadow: 0 8px 28px rgba(0,0,0,0.4);
}
.knack-film-strip__poster {
	position: absolute;
	inset: 0;
	background-color: #1a1a1f;
	background-size: cover;
	background-position: center;
	transition: filter 0.35s ease, transform 0.6s ease;
	filter: grayscale(85%) brightness(0.65);
	transform: scale(1.02);
}
.knack-film-strip__poster::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 35%, rgba(0,0,0,0) 65%);
	transition: opacity 0.35s ease;
	opacity: 0.7;
}

/* Group hover state — when ANY strip is hovered, all others get extra fade */
.knack-film-archive-strips__row:hover .knack-film-strip__poster {
	filter: grayscale(95%) brightness(0.45);
}

/* The hovered strip itself wins back */
.knack-film-strip:hover {
	flex-grow: 2;
	max-width: 320px;
	z-index: 3;
	box-shadow: 0 18px 48px rgba(0,0,0,0.6);
}
.knack-film-strip:hover .knack-film-strip__poster {
	filter: none;
	transform: scale(1.05);
}
.knack-film-strip:hover .knack-film-strip__poster::after { opacity: 0.85; }

/* Meta — title + synopsis appears on the strip; expands richer on hover */
.knack-film-strip__meta {
	position: absolute;
	inset: auto 0 0 0;
	padding: 18px 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 2;
}
.knack-film-strip__type {
	display: inline-block;
	align-self: flex-start;
	padding: 3px 10px;
	background: rgba(0,0,0,0.55);
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--knack-radius-pill);
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 4px;
	backdrop-filter: blur(4px);
}
.knack-film-strip__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.knack-film-strip__pills {
	display: flex;
	gap: 6px;
	font-size: 0.7rem;
	color: rgba(255,255,255,0.78);
}
.knack-film-strip__pills span + span::before { content: "·"; margin-right: 6px; opacity: 0.55; }
.knack-film-strip__synopsis {
	margin: 6px 0 0;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: rgba(255,255,255,0.78);
	display: none;
}
.knack-film-strip__cta {
	display: none;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	align-self: flex-start;
	padding: 6px 14px;
	background: #fff;
	color: #0c0c0e;
	border-radius: var(--knack-radius-pill);
	font-size: 0.8125rem;
	font-weight: 700;
}
.knack-film-strip:hover .knack-film-strip__synopsis,
.knack-film-strip:hover .knack-film-strip__cta {
	display: flex;
}
.knack-film-strip:hover .knack-film-strip__title { font-size: 1.125rem; }

/* On smaller screens (768px and below), the strips become a tighter
   horizontal scroll so each one is still readable. */
@media (max-width: 1024px) {
	.knack-film-archive-strips { padding: 60px 16px 40px; min-height: 540px; }
	.knack-film-archive-strips__row { height: 400px; gap: 6px; }
	.knack-film-strip { max-width: 180px; }
	.knack-film-strip:hover { max-width: 260px; }
}
@media (max-width: 768px) {
	.knack-film-archive-strips { padding: 40px 12px 32px; min-height: 480px; }
	.knack-film-archive-strips__crumbs { margin-bottom: 20px; }
	.knack-film-archive-strips__row {
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		gap: 10px;
		height: 360px;
		padding-bottom: 8px;
	}
	.knack-film-strip {
		flex: 0 0 200px;
		max-width: 200px;
		scroll-snap-align: start;
	}
	.knack-film-strip__poster { filter: none; transform: none; }
	.knack-film-strip:hover { flex: 0 0 200px; max-width: 200px; }
	.knack-film-archive-strips__row:hover .knack-film-strip__poster { filter: none; }
	.knack-film-strip__synopsis,
	.knack-film-strip__cta { display: none !important; }
}

/* ────────────────────────────────────────────────────────────────
   Archive — legacy carousel hero (unused now, kept for safety)
   ──────────────────────────────────────────────────────────────── */
.knack-film-archive-hero {
	position: relative;
	height: 56vh;
	min-height: 380px;
	max-height: 520px;
	color: #fff;
	overflow: hidden;
	background: #0c0c0e;
}
.knack-film-archive-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 0.8s ease;
}
.knack-film-archive-hero__slide.is-active { opacity: 1; }
.knack-film-archive-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--knack-bg) 0%, rgba(12,12,14,0.95) 12%, rgba(12,12,14,0.55) 50%, rgba(12,12,14,0.15) 90%, rgba(12,12,14,0) 100%),
		linear-gradient(90deg, rgba(12,12,14,0.85) 0%, rgba(12,12,14,0.35) 55%, rgba(12,12,14,0) 100%);
}
.knack-film-archive-hero__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	height: 100%;
	padding: 0 0 32px;
}
.knack-film-archive-hero__copy {
	max-width: 640px;
}
.knack-film-archive-hero__type {
	display: inline-block;
	padding: 4px 10px;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	background: rgba(255,255,255,0.18);
	color: #fff;
	border-radius: var(--knack-radius-pill);
	margin: 0 0 12px;
	backdrop-filter: blur(4px);
}
.knack-film-archive-hero__type--featured {
	background: var(--knack-accent);
}
.knack-film-archive-hero__title {
	font-size: clamp(1.75rem, 4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: #fff;
	max-width: 720px;
	margin: 0 0 10px;
	text-shadow: 0 2px 16px rgba(0,0,0,0.55);
}
.knack-film-archive-hero__pills {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	font-size: 0.875rem;
	color: rgba(255,255,255,0.88);
}
.knack-film-archive-hero__pills li {
	display: inline-flex;
	align-items: center;
}
.knack-film-archive-hero__pills li + li::before {
	content: "·";
	margin-right: 14px;
	opacity: 0.5;
}
.knack-film-archive-hero__synopsis {
	max-width: 560px;
	color: rgba(255,255,255,0.88);
	line-height: 1.5;
	font-size: 0.9375rem;
	margin: 0 0 20px;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.knack-film-archive-hero__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.knack-film-archive-hero__dots {
	position: absolute;
	right: 24px;
	bottom: 24px;
	display: flex;
	gap: 8px;
	z-index: 3;
}
.knack-film-archive-hero__dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(255,255,255,0.45);
	border: 0;
	padding: 0;
	cursor: pointer;
	transition: width 0.2s ease, background 0.2s ease;
}
.knack-film-archive-hero__dot.is-active { background: #fff; width: 26px; border-radius: 4px; }

/* Browse rows */
.knack-film-row {
	padding: 28px 0 4px;
	background: var(--knack-bg);
	color: var(--knack-text);
}
.knack-film-row + .knack-film-row { padding-top: 16px; }
.knack-film-row__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
	gap: 12px;
}
.knack-film-row__title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--knack-text);
	margin: 0;
	letter-spacing: -0.01em;
	display: flex;
	align-items: center;
	gap: 8px;
}
.knack-film-row__title::before {
	content: "";
	width: 4px;
	height: 22px;
	background: var(--knack-accent);
	border-radius: 2px;
	display: inline-block;
	flex-shrink: 0;
}
.knack-film-row__see-all {
	color: var(--knack-accent);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 600;
}
.knack-film-row__see-all:hover { color: var(--knack-accent-hover); }
.knack-film-row__scroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 220px;
	gap: 18px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 12px;
}
.knack-film-row__scroll::-webkit-scrollbar { height: 6px; }
.knack-film-row__scroll::-webkit-scrollbar-thumb { background: var(--knack-border); border-radius: 3px; }

/* Card — article wrapper with separate art link, watchlist button, title link */
.knack-film-card {
	scroll-snap-align: start;
	position: relative;
	display: block;
	transition: transform 0.15s ease;
}
.knack-film-card:hover { transform: translateY(-3px); }
.knack-film-card__art-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border-radius: var(--knack-radius);
}
.knack-film-card__art {
	aspect-ratio: 2 / 3;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	border-radius: var(--knack-radius);
	margin-bottom: 10px;
	position: relative;
	overflow: hidden;
	box-shadow: var(--knack-shadow-card);
	transition: box-shadow 0.2s ease;
}
.knack-film-card:hover .knack-film-card__art {
	box-shadow: var(--knack-shadow-lg);
}
.knack-film-card__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(0,0,0,0.25);
	z-index: 3;
}
.knack-film-card__progress span {
	display: block;
	height: 100%;
	background: var(--knack-accent);
}
.knack-film-card__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: var(--knack-radius-sm);
	text-transform: uppercase;
	z-index: 3;
}

/* Hover overlay — dark gradient + center play icon over the poster */
.knack-film-card__hover {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%);
	opacity: 0;
	transition: opacity 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 2;
}
.knack-film-card:hover .knack-film-card__hover,
.knack-film-card:focus-within .knack-film-card__hover {
	opacity: 1;
}
.knack-film-card__hover-play {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: rgba(255,255,255,0.18);
	border: 2px solid rgba(255,255,255,0.7);
	color: #fff;
	border-radius: 50%;
	backdrop-filter: blur(6px);
	transition: transform 0.2s ease, background 0.2s ease;
	box-shadow: 0 6px 20px rgba(0,0,0,0.45);
}
.knack-film-card__hover-play [data-lucide] {
	width: 24px;
	height: 24px;
	stroke-width: 2;
	margin-left: 2px; /* optical centering of play icon */
}
.knack-film-card:hover .knack-film-card__hover-play {
	transform: scale(1.08);
	background: rgba(255,255,255,0.28);
}

/* Watchlist button (floating top-right of art) */
.knack-film-card__action {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 4;
	opacity: 0;
	transform: scale(0.85);
	transition: opacity 0.2s ease, transform 0.2s ease, background 0.15s ease;
	backdrop-filter: blur(6px);
	padding: 0;
}
.knack-film-card__action [data-lucide] { width: 18px; height: 18px; }
.knack-film-card:hover .knack-film-card__action,
.knack-film-card:focus-within .knack-film-card__action,
.knack-film-card__action.is-on { opacity: 1; transform: scale(1); }
.knack-film-card__action:hover { background: rgba(0,0,0,0.8); }
.knack-film-card__action.is-on {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
}

.knack-film-card__title-link {
	display: block;
	text-decoration: none;
	color: inherit;
}
.knack-film-card__title-link:hover .knack-film-card__title { color: var(--knack-accent); }
.knack-film-card__title {
	display: block;
	color: var(--knack-text);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	transition: color 0.15s ease;
}
.knack-film-card__meta {
	display: flex;
	gap: 8px;
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	margin-top: 2px;
}

/* Archive page header */
.knack-film-archive-header {
	background: var(--knack-bg-secondary);
	border-bottom: 1px solid var(--knack-border-soft);
	padding: 56px 0 40px;
	text-align: center;
	margin-bottom: 0;
}
.knack-film-archive-header__eyebrow {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--knack-accent);
	margin: 0 0 12px;
}
.knack-film-archive-header__title {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	color: var(--knack-text);
	margin: 0 0 14px;
	line-height: 1.05;
}
.knack-film-archive-header__lede {
	max-width: 560px;
	margin: 0 auto;
	color: var(--knack-text-secondary);
	font-size: 1rem;
	line-height: 1.55;
}

/* Archive controls — centered "browse panel" */
.knack-film-archive-controls {
	padding: 32px 0 8px;
}
.knack-film-archive-controls > * {
	margin-left: auto;
	margin-right: auto;
}
.knack-film-archive-controls .knack-film-search {
	max-width: 720px;
	margin: 0 auto 18px;
}
.knack-film-archive-controls .knack-film-filter-bar {
	justify-content: center;
	max-width: 720px;
	margin: 0 auto 20px;
}
.knack-film-archive-controls .knack-film-chip-groups {
	max-width: 980px;
	margin: 0 auto;
}
.knack-film-genres--years .knack-film-genre-chip { font-variant-numeric: tabular-nums; }

/* Filter bar — Type segmented control + Sort dropdown + Clear button */
.knack-film-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin: 0 0 16px;
}
.knack-film-segmented {
	display: inline-flex;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	padding: 4px;
	gap: 0;
}
.knack-film-segmented__btn {
	padding: 6px 16px;
	background: transparent;
	color: var(--knack-text-secondary);
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--knack-radius-pill);
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease;
}
.knack-film-segmented__btn:hover { color: var(--knack-text); }
.knack-film-segmented__btn.is-active {
	background: var(--knack-text);
	color: var(--knack-bg);
}
.knack-film-sort {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	padding: 4px 4px 4px 14px;
}
.knack-film-sort__label {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.knack-film-sort__select {
	background: transparent;
	border: 0;
	color: var(--knack-text);
	font: inherit;
	font-size: 0.875rem;
	font-weight: 600;
	padding: 6px 28px 6px 6px;
	cursor: pointer;
	border-radius: var(--knack-radius-pill);
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, var(--knack-text-muted) 50%), linear-gradient(135deg, var(--knack-text-muted) 50%, transparent 50%);
	background-position: calc(100% - 14px) center, calc(100% - 9px) center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}
.knack-film-sort__select:focus { outline: 2px solid var(--knack-accent); outline-offset: 2px; }
.knack-film-filter-bar__clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 14px;
	background: var(--knack-accent-muted);
	color: var(--knack-accent);
	border-radius: var(--knack-radius-pill);
	font-size: 0.8125rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease;
}
.knack-film-filter-bar__clear:hover {
	background: var(--knack-accent);
	color: #fff;
}

/* Filtered/Search result grid (replaces inline style block) */
.knack-film-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}
.knack-film-row__count {
	color: var(--knack-text-muted);
	font-weight: 500;
	margin-left: 6px;
	font-size: 0.875rem;
}

/* Chip groups (Genre / Year) — labeled chip rows under the filter bar.
   Centered to match the search + filter bar above. */
.knack-film-chip-groups {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0 0 8px;
	padding: 16px 0;
	border-top: 1px solid var(--knack-border-soft);
}
.knack-film-chip-group {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.knack-film-chip-group__label {
	flex-shrink: 0;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--knack-text-muted);
}
.knack-film-chip-group .knack-film-genres {
	margin: 0;
	justify-content: center;
}
.knack-film-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
}

@media (max-width: 640px) {
	.knack-film-chip-group {
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}
}

/* Search bar */
.knack-film-search {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 6px 6px 16px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	margin: 0 0 20px;
	max-width: 640px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.knack-film-search:focus-within {
	border-color: var(--knack-accent);
	box-shadow: 0 0 0 3px var(--knack-accent-muted);
}
.knack-film-search__icon {
	color: var(--knack-text-muted);
	flex-shrink: 0;
}
.knack-film-search__input {
	flex: 1;
	min-width: 0;
	background: transparent !important;
	border: 0 !important;
	padding: 12px 4px !important;
	font-size: 1rem;
	color: var(--knack-text);
	outline: none;
	box-shadow: none !important;
}
.knack-film-search__input::placeholder { color: var(--knack-text-muted); }
.knack-film-search__submit {
	flex-shrink: 0;
	padding: 10px 22px;
	border-radius: var(--knack-radius-pill);
	background: var(--knack-accent);
	color: #fff;
	border: 0;
	font: inherit;
	font-weight: 600;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background 0.15s ease;
}
.knack-film-search__submit:hover { background: var(--knack-accent-hover); }

/* Genre filter chips */
.knack-film-genres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}
.knack-film-genre-chip {
	padding: 8px 16px;
	border-radius: var(--knack-radius-pill);
	background: var(--knack-bg-secondary);
	color: var(--knack-text-secondary);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
	border: 1px solid var(--knack-border-soft);
	transition: background 0.15s ease, color 0.15s ease;
}
.knack-film-genre-chip:hover { background: var(--knack-bg-tertiary); color: var(--knack-text); }
.knack-film-genre-chip.is-active {
	background: var(--knack-accent);
	color: #fff;
	border-color: var(--knack-accent);
}

/* ────────────────────────────────────────────────────────────────
   Person profile (single ks_person)
   ──────────────────────────────────────────────────────────────── */
body.single-ks_person { background: var(--knack-bg); }
.knack-person-main { background: var(--knack-bg); min-height: 60vh; }

/* Wrapper for the shared films context sub-nav (template-parts/films-context-nav.php)
   when it sits above a cinematic person/people header — top breathing room
   from the site header. */
.knack-film-context-bar { padding-top: 20px; }

.knack-person-hero {
	background: var(--knack-bg-secondary);
	border-bottom: 1px solid var(--knack-border-soft);
	padding: 56px 0 40px;
}
.knack-person-hero__inner {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 40px;
	align-items: flex-start;
}
.knack-person-hero__photo {
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	box-shadow: var(--knack-shadow-lg);
	display: flex;
	align-items: center;
	justify-content: center;
}
.knack-person-hero__initial {
	font-size: 4rem;
	font-weight: 700;
	color: var(--knack-text-muted);
}
.knack-person-hero__meta { padding-top: 16px; }
.knack-person-hero__crumb {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.8125rem;
	color: var(--knack-text-secondary);
	margin: 0 0 14px;
}
.knack-person-hero__crumb a {
	color: var(--knack-text-muted);
	text-decoration: none;
}
.knack-person-hero__crumb a:hover { color: var(--knack-text); }
.knack-person-hero__crumb .knack-icon--xs { opacity: 0.5; }
.knack-person-hero__name {
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: var(--knack-text);
	margin: 0 0 14px;
}
.knack-person-hero__pills {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	color: var(--knack-text-secondary);
	font-size: 0.9375rem;
}
.knack-person-hero__pills li { display: inline-flex; align-items: center; }
.knack-person-hero__pills li + li::before {
	content: "·";
	margin-right: 14px;
	opacity: 0.55;
}
.knack-person-hero__bio {
	color: var(--knack-text);
	font-size: 1rem;
	line-height: 1.65;
	margin: 0 0 18px;
	max-width: 70ch;
}
.knack-person-hero__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.knack-person-hero__links a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--knack-bg);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	color: var(--knack-text);
	text-decoration: none;
	font-size: 0.875rem;
	font-weight: 500;
}
.knack-person-hero__links a:hover {
	border-color: var(--knack-accent);
	color: var(--knack-accent);
}

.knack-person-section {
	padding: 40px 0;
	background: var(--knack-bg);
}
.knack-person-section__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--knack-text);
	margin: 0 0 20px;
}
.knack-person-section__title::before {
	content: "";
	width: 4px;
	height: 24px;
	background: var(--knack-accent);
	border-radius: 2px;
	display: inline-block;
}
.knack-person-section__title .knack-icon--sm {
	color: var(--knack-accent);
}

.knack-person-filmography {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
	gap: 20px;
}
.knack-person-credit {
	text-decoration: none;
	color: inherit;
	display: block;
	transition: transform 0.15s ease;
}
.knack-person-credit:hover { transform: translateY(-3px); color: inherit; }
.knack-person-credit__art {
	aspect-ratio: 2 / 3;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	border-radius: var(--knack-radius);
	margin-bottom: 10px;
	position: relative;
	box-shadow: var(--knack-shadow-card);
}
.knack-person-credit__badge {
	position: absolute;
	top: 8px;
	left: 8px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	padding: 3px 8px;
	border-radius: var(--knack-radius-sm);
	text-transform: uppercase;
}
.knack-person-credit__title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--knack-text);
	margin: 0 0 2px;
	line-height: 1.3;
}
.knack-person-credit__role {
	display: block;
	font-size: 0.8125rem;
	color: var(--knack-text-secondary);
	font-style: italic;
}
.knack-person-credit__year {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
}

@media (max-width: 768px) {
	.knack-person-hero { padding: 32px 0 28px; }
	.knack-person-hero__inner {
		grid-template-columns: 1fr;
		gap: 20px;
		text-align: center;
	}
	.knack-person-hero__photo {
		width: 160px;
		height: 160px;
		margin: 0 auto;
	}
	.knack-person-hero__crumb { justify-content: center; }
	.knack-person-hero__pills { justify-content: center; }
	.knack-person-hero__links { justify-content: center; }
	.knack-person-hero__bio { text-align: left; }
}

/* ── Person hero — cinematic ambiance + polish ─────────────────────── */
.knack-person-hero { position: relative; overflow: hidden; isolation: isolate; }
.knack-person-hero__inner { position: relative; z-index: 1; }
.knack-person-hero__name { text-transform: capitalize; }
.knack-person-hero__photo {
	box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 0 4px rgba(255,255,255,0.1);
}

/* Blurred film backdrop behind the header (when the person has credits) */
.knack-person-hero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	background-position: center;
	background-size: cover;
	filter: blur(30px) saturate(1.2);
	transform: scale(1.18);
	opacity: 0.5;
}
.knack-person-hero.has-ambiance {
	background: #0c0c10;
	border-bottom-color: rgba(255,255,255,0.08);
}
.knack-person-hero.has-ambiance::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(to top, #0c0c10 0%, rgba(12,12,16,0.72) 50%, rgba(12,12,16,0.55) 100%);
}
/* Light text + chips over the dark ambiance */
.knack-person-hero.has-ambiance .knack-person-hero__name { color: #fff; }
.knack-person-hero.has-ambiance .knack-person-hero__pills { color: rgba(255,255,255,0.85); }
.knack-person-hero.has-ambiance .knack-person-hero__crumb { color: rgba(255,255,255,0.75); }
.knack-person-hero.has-ambiance .knack-person-hero__crumb a { color: rgba(255,255,255,0.65); }
.knack-person-hero.has-ambiance .knack-person-hero__crumb a:hover { color: #fff; }
.knack-person-hero.has-ambiance .knack-person-hero__bio { color: rgba(255,255,255,0.9); }
.knack-person-hero.has-ambiance .knack-person-hero__photo {
	background-color: rgba(255,255,255,0.1);
	box-shadow: 0 14px 44px rgba(0,0,0,0.6), 0 0 0 4px rgba(255,255,255,0.16);
}
.knack-person-hero.has-ambiance .knack-person-hero__initial { color: rgba(255,255,255,0.75); }
.knack-person-hero.has-ambiance .knack-person-hero__links a {
	background: rgba(255,255,255,0.12);
	border-color: rgba(255,255,255,0.2);
	color: #fff;
}
.knack-person-hero.has-ambiance .knack-person-hero__links a:hover {
	background: rgba(255,255,255,0.22);
	border-color: rgba(255,255,255,0.4);
	color: #fff;
}

/* "Known for" role chips */
.knack-person-hero__known {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 12px;
	margin: 0 0 18px;
}
.knack-person-hero__known-label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--knack-text-muted);
}
.knack-person-hero.has-ambiance .knack-person-hero__known-label { color: rgba(255,255,255,0.6); }
.knack-person-hero__roles { display: inline-flex; flex-wrap: wrap; gap: 8px; }
.knack-person-hero__role-chip {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: var(--knack-radius-pill);
	background: var(--knack-bg);
	border: 1px solid var(--knack-border-soft);
	color: var(--knack-text);
}
.knack-person-hero.has-ambiance .knack-person-hero__role-chip {
	background: rgba(255,255,255,0.14);
	border-color: rgba(255,255,255,0.22);
	color: #fff;
}

/* Credit card — procedural fallback art + play-on-hover */
.knack-person-credit__art { overflow: hidden; }
.knack-person-credit__pattern {
	position: absolute;
	inset: 0;
	color: rgba(255,255,255,0.5);
	mix-blend-mode: screen;
	pointer-events: none;
}
.knack-person-credit__pattern svg { width: 100%; height: 100%; display: block; }
.knack-person-credit__art-title {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 1;
	color: #fff;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}
.knack-person-credit__play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(0,0,0,0.55);
	backdrop-filter: blur(4px);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	opacity: 0;
	transition: opacity 0.18s ease, transform 0.18s ease;
	z-index: 2;
}
.knack-person-credit__play [data-lucide] { width: 22px; height: 22px; }
.knack-person-credit:hover .knack-person-credit__play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ────────────────────────────────────────────────────────────────
   Share toast
   ──────────────────────────────────────────────────────────────── */
.knack-film-toast {
	position: fixed;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--knack-text);
	color: var(--knack-bg);
	padding: 12px 20px;
	border-radius: var(--knack-radius-pill);
	font-size: 0.875rem;
	font-weight: 600;
	box-shadow: var(--knack-shadow-lg);
	z-index: var(--knack-z-overlay, 300);
	animation: knack-film-toast 2.5s ease forwards;
}
@keyframes knack-film-toast {
	0%   { opacity: 0; transform: translate(-50%, 8px); }
	10%  { opacity: 1; transform: translate(-50%, 0); }
	85%  { opacity: 1; transform: translate(-50%, 0); }
	100% { opacity: 0; transform: translate(-50%, -8px); }
}

/* ────────────────────────────────────────────────────────────────
   Responsive
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.knack-film-hero { min-height: 620px; }
	.knack-film-hero__overlay { min-height: 620px; }
	.knack-film-hero__inner {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto auto;
		min-height: calc(620px - 28px - 56px);
	}
	.knack-film-hero__lead {
		grid-column: 1 / -1;
		grid-row: 2 / 3;
		align-self: start;
		max-width: none;
	}
	.knack-film-hero__title { max-width: none; }
	.knack-film-hero__synopsis { max-width: none; }
	.knack-film-hero__bottom { grid-column: 1 / -1; grid-row: 3 / 4; }
	.knack-film-hero__actions-column { right: 16px; }
	.knack-film-episode__link { grid-template-columns: 180px 1fr; gap: 14px; }
}
@media (max-width: 768px) {
	.knack-film-hero { min-height: 540px; }
	.knack-film-hero__overlay { min-height: 540px; padding: 20px 0 32px; }
	.knack-film-hero__inner { min-height: calc(540px - 20px - 32px); row-gap: 16px; }
	.knack-film-hero__title { font-size: 2.25rem; }
	.knack-film-hero__crumbs { font-size: 0.75rem; padding: 5px 12px; }
	.knack-film-hero__crumbs-current { max-width: 140px; }

	/* Move floating action column to bottom-right as a horizontal strip */
	.knack-film-hero__actions-column {
		position: absolute;
		right: 16px;
		bottom: 12px;
		top: auto;
		transform: none;
		flex-direction: row;
	}
	.knack-film-action-btn { width: 44px; height: 44px; border-radius: 12px; }

	/* Shrink the play circle on small screens */
	.knack-film-play-circle { width: 88px; height: 88px; }
	.knack-film-play-circle [data-lucide] { width: 34px; height: 34px; }
	.knack-film-play-circle__label { font-size: 0.8125rem; padding: 5px 12px; }

	.knack-film-hero__synopsis {
		font-size: 0.875rem;
		padding: 12px 14px;
		margin-top: 0;
	}

	.knack-film-hero__bottom { grid-template-columns: 1fr; }

	.knack-film-section { padding: 28px 0; }
	.knack-film-section__title { font-size: 1.125rem; }
	.knack-film-cast { grid-auto-columns: 100px; gap: 12px; }
	.knack-film-cast__photo { width: 80px; height: 80px; }
	.knack-film-episode__link { grid-template-columns: 130px 1fr; gap: 12px; padding: 10px; }
	.knack-film-episode__title { font-size: 0.9375rem; }
	.knack-film-episode__synopsis { font-size: 0.8125rem; }
	.knack-film-row__scroll { grid-auto-columns: 160px; }
	.knack-film-archive-hero { height: 64vh; min-height: 360px; }
}
@media (max-width: 480px) {
	.knack-film-hero { min-height: 480px; }
	.knack-film-hero__overlay { min-height: 480px; }
	.knack-film-hero__inner { min-height: calc(480px - 20px - 32px); }
	.knack-film-hero__title { font-size: 1.875rem; }
	.knack-film-hero__top { gap: 8px; }
	.knack-film-hero__type-tag { padding: 5px 10px; font-size: 0.65rem; }
	.knack-film-episode__link { grid-template-columns: 110px 1fr; padding: 8px; }
	.knack-film-row__scroll { grid-auto-columns: 140px; }
	.knack-film-similar { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
}

/* ────────────────────────────────────────────────────────────────
   Tip jar page (/tip/?tip_creator=X)
   ──────────────────────────────────────────────────────────────── */
.knack-tip-page { padding: 32px 0 72px; }
.knack-tip__back {
	display: inline-flex; align-items: center; gap: 4px;
	color: var(--knack-text-muted); text-decoration: none;
	font-size: 0.875rem; margin-bottom: 18px;
}
.knack-tip__back:hover { color: var(--knack-text); }

.knack-tip__intro {
	text-align: center;
	margin-bottom: 28px;
}
.knack-tip__intro .knack-icon--xl {
	width: 56px; height: 56px;
	color: var(--knack-accent);
	margin: 0 auto 14px;
	display: inline-block;
}
.knack-tip__title {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 6px;
}
.knack-tip__sub {
	color: var(--knack-text-muted);
	max-width: 520px;
	margin: 0 auto;
	font-size: 0.9375rem;
}

.knack-tip__form {
	max-width: 520px;
	margin: 0 auto;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-xl, 18px);
	padding: 24px;
}
.knack-tip__amounts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 16px;
}
.knack-tip__amount-option { cursor: pointer; }
.knack-tip__amount-option input { position: absolute; opacity: 0; pointer-events: none; }
.knack-tip__amount-option span {
	display: block;
	padding: 14px;
	text-align: center;
	font-size: 1rem;
	font-weight: 800;
	color: var(--knack-text);
	background: var(--knack-bg);
	border: 2px solid var(--knack-border);
	border-radius: var(--knack-radius);
	transition: all 0.12s ease;
}
.knack-tip__amount-option input:checked + span {
	background: var(--knack-accent);
	border-color: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
}
.knack-tip__amount-option:hover span { border-color: var(--knack-accent); }

.knack-tip__custom { display: block; margin-bottom: 16px; }
.knack-tip__custom-label {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	margin-bottom: 6px;
}
.knack-tip__custom-input {
	display: flex; align-items: center;
	border: 1px solid var(--knack-border);
	border-radius: var(--knack-radius);
	overflow: hidden;
	background: var(--knack-bg);
}
.knack-tip__custom-input span {
	padding: 0 12px;
	font-weight: 800;
	font-size: 1rem;
	color: var(--knack-text-muted);
	background: var(--knack-bg-tertiary);
	align-self: stretch;
	display: inline-flex;
	align-items: center;
}
.knack-tip__custom-input input {
	flex: 1;
	min-width: 0;
	padding: 12px;
	border: 0;
	background: transparent;
	font: inherit;
	font-size: 1rem;
	color: var(--knack-text);
}
.knack-tip__custom-input input:focus { outline: none; }

.knack-tip__message { display: block; margin-bottom: 18px; }
.knack-tip__message span {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	margin-bottom: 6px;
}
.knack-tip__message textarea {
	width: 100%;
	padding: 10px 12px;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--knack-text);
	background: var(--knack-bg);
	border: 1px solid var(--knack-border);
	border-radius: var(--knack-radius);
	resize: vertical;
}

.knack-tip__submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 14px;
	font: inherit;
	font-weight: 800;
	font-size: 1rem;
	color: var(--knack-btn-text, #fff);
	background: var(--knack-accent);
	border: 0;
	border-radius: var(--knack-radius);
	cursor: pointer;
	transition: filter 0.15s ease, transform 0.15s ease;
}
.knack-tip__submit:hover { filter: brightness(1.06); transform: translateY(-1px); }

.knack-tip__note {
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
	padding: 20px;
	background: var(--knack-bg-secondary);
	border: 1px dashed var(--knack-border);
	border-radius: var(--knack-radius-lg, 14px);
	color: var(--knack-text-muted);
}

@media (max-width: 480px) {
	.knack-tip__amounts { grid-template-columns: repeat(2, 1fr); }
}

/* ────────────────────────────────────────────────────────────────
   Bundle contents (single page, when type=bundle)
   ──────────────────────────────────────────────────────────────── */
.knack-film-section--bundle { padding-top: 32px; }
.knack-film-bundle__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.knack-film-bundle__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--knack-accent);
	margin-bottom: 4px;
}
.knack-film-bundle__discount {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	border-radius: 999px;
}
.knack-film-bundle__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.knack-film-bundle__card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	color: var(--knack-text);
	text-decoration: none;
	transition: transform 0.2s ease;
}
.knack-film-bundle__card:hover { transform: translateY(-3px); }
.knack-film-bundle__art {
	aspect-ratio: 2 / 3;
	background: var(--knack-bg-secondary) center / cover no-repeat;
	border-radius: var(--knack-radius-lg, 14px);
	display: flex; align-items: center; justify-content: center;
	color: var(--knack-text-muted);
	overflow: hidden;
}
.knack-film-bundle__title {
	font-size: 0.9375rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.005em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.knack-film-bundle__meta {
	display: flex;
	gap: 10px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--knack-text-muted);
}
.knack-film-bundle__empty {
	color: var(--knack-text-muted);
	font-style: italic;
}

/* ────────────────────────────────────────────────────────────────
   Curated collection landing page
   ──────────────────────────────────────────────────────────────── */
.knack-collection-hero {
	position: relative;
	padding: 32px 0 36px;
	color: var(--knack-text);
	overflow: hidden;
}
.knack-collection-hero::before {
	content: '';
	position: absolute; inset: 0;
	background: var(--knack-coll-cover, none) center / cover no-repeat;
	opacity: 0.5;
	filter: blur(20px);
	transform: scale(1.08);
	z-index: 0;
}
.knack-collection-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--knack-bg) 100%);
	z-index: 1;
}
.knack-collection-hero > * { position: relative; z-index: 2; }
.knack-collection-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	text-decoration: none;
	margin-bottom: 12px;
}
.knack-collection-hero__back:hover { color: var(--knack-accent); }
.knack-collection-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--knack-accent);
	margin-bottom: 8px;
}
.knack-collection-hero__title {
	font-size: clamp(1.75rem, 4vw, 3rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0 0 12px;
}
.knack-collection-hero__desc {
	max-width: 720px;
	color: var(--knack-text-muted);
	font-size: 1rem;
	line-height: 1.55;
	margin-bottom: 12px;
}
.knack-collection-hero__count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	border-radius: var(--knack-radius-pill);
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--knack-text-muted);
}
.knack-film-collection__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 18px;
}
.knack-film-empty {
	padding: 60px 0;
	text-align: center;
	color: var(--knack-text-muted);
}

/* ────────────────────────────────────────────────────────────────
   Reviews & discussion (single film page)
   ──────────────────────────────────────────────────────────────── */
.knack-film-section--reviews { padding-top: 28px; }
.knack-film-reviews__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 18px;
	align-items: center;
	margin-bottom: 18px;
}
.knack-film-reviews__lede {
	margin: 6px 0 0;
	color: var(--knack-text-muted);
	font-size: 0.9375rem;
}
.knack-film-reviews__summary {
	display: grid;
	grid-template-columns: auto auto;
	grid-template-areas:
		'avg stars'
		'avg count';
	column-gap: 14px;
	align-items: center;
}
.knack-film-reviews__avg {
	grid-area: avg;
	font-size: 2.5rem;
	font-weight: 800;
	color: var(--knack-text);
	line-height: 1;
	letter-spacing: -0.03em;
}
.knack-film-reviews__stars { grid-area: stars; line-height: 1; }
.knack-film-reviews__count {
	grid-area: count;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	margin-top: 2px;
}

/* Shared star glyph styling */
.ks-star {
	display: inline-block;
	font-size: 1.1rem;
	color: var(--knack-border);
	line-height: 1;
}
.ks-star--on { color: #fbbf24; }
.ks-star--half {
	position: relative;
	color: var(--knack-border);
}
.ks-star--half::before {
	content: '★';
	position: absolute;
	left: 0; top: 0;
	width: 50%;
	overflow: hidden;
	color: #fbbf24;
}

/* Star picker on the comment form */
.ks-film-rating-input {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 12px 14px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius);
	margin-bottom: 12px;
}
.ks-film-rating-input__label {
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--knack-text);
}
.ks-film-rating-input__stars {
	display: inline-flex;
	flex-direction: row-reverse;
	gap: 4px;
}
.ks-film-rating-input__stars input { position: absolute; opacity: 0; pointer-events: none; }
.ks-film-rating-input__stars label {
	cursor: pointer;
	color: var(--knack-border);
	transition: color 0.1s ease, transform 0.1s ease;
	display: inline-flex;
}
.ks-film-rating-input__stars label svg { width: 28px; height: 28px; }
.ks-film-rating-input__stars label:hover,
.ks-film-rating-input__stars label:hover ~ label,
.ks-film-rating-input__stars input:checked ~ label { color: #fbbf24; }
.ks-film-rating-input__stars label:hover { transform: scale(1.08); }

/* Inline rating badge on individual comments */
.ks-film-review-rating {
	display: block;
	margin-bottom: 6px;
	line-height: 1;
}

.knack-comments { margin-top: 16px; }
.knack-comments-title {
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 12px;
	letter-spacing: -0.005em;
}
.knack-comment-list { list-style: none; padding: 0; margin: 0 0 24px; }
.knack-comment-list .comment-body {
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-lg, 14px);
	padding: 14px 16px;
	margin-bottom: 10px;
}
.knack-comment-list .comment-author {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 6px;
	font-weight: 700;
}
.knack-comment-list .comment-author .avatar {
	border-radius: 50%;
}
.knack-comment-list .comment-metadata {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	margin-bottom: 6px;
}
.knack-comment-list .comment-content p { margin: 0 0 6px; }
.no-comments, .knack-no-comments { color: var(--knack-text-muted); font-size: 0.875rem; }

#respond {
	background: var(--knack-bg);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-xl, 18px);
	padding: 18px;
}
#respond .comment-form-comment textarea {
	width: 100%;
	min-height: 120px;
	padding: 12px;
	font: inherit;
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border);
	border-radius: var(--knack-radius);
}
#respond .form-submit input[type="submit"] {
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
	border: 0;
	padding: 10px 20px;
	border-radius: var(--knack-radius-pill);
	font-weight: 700;
	cursor: pointer;
}
#respond .form-submit input[type="submit"]:hover { filter: brightness(1.06); }

@media (max-width: 640px) {
	.knack-film-reviews__header { grid-template-columns: 1fr; }
	.knack-film-reviews__summary { justify-self: start; }
}

/* ────────────────────────────────────────────────────────────────
   Continue watching strip (homepage, between hero and exhibitions)
   ──────────────────────────────────────────────────────────────── */
.kn-continue-watching { padding: 24px 0 8px; }
.kn-continue-watching__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.kn-continue-watching__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--knack-accent);
	margin-bottom: 4px;
}
.kn-continue-watching__title {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0;
}
.kn-continue-watching__view-all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	text-decoration: none;
}
.kn-continue-watching__view-all:hover { color: var(--knack-accent); }

.kn-continue-watching__strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(260px, 1fr);
	gap: 14px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding: 12px;
	padding-bottom: 8px;
	margin: 0 -4px;
	padding-left: 4px; padding-right: 4px;
}
.kn-continue-watching__strip::-webkit-scrollbar { height: 6px; }
.kn-continue-watching__strip::-webkit-scrollbar-thumb { background: var(--knack-border); border-radius: 999px; }

.kn-cw-card {
	display: block;
	scroll-snap-align: start;
	color: var(--knack-text);
	text-decoration: none;
	transition: transform 0.2s ease;
}
.kn-cw-card:hover { transform: translateY(-3px); }
.kn-cw-card__cover {
	position: relative;
	aspect-ratio: 16/9;
	background: var(--knack-bg-secondary) center / cover no-repeat;
	border-radius: var(--knack-radius-lg, 14px);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--knack-text-muted);
}
.kn-cw-card__cover::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%);
	pointer-events: none;
}
.kn-cw-card__play {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #111;
	display: flex; align-items: center; justify-content: center;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.2s ease, transform 0.2s ease;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	z-index: 2;
}
.kn-cw-card__play [data-lucide] { width: 22px; height: 22px; margin-left: 2px; }
.kn-cw-card:hover .kn-cw-card__play { opacity: 1; transform: translateY(0); }
.kn-cw-card__badge {
	position: absolute;
	top: 10px; left: 10px;
	z-index: 2;
	padding: 4px 8px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba(0,0,0,0.55);
	border-radius: 6px;
	backdrop-filter: blur(4px);
}
.kn-cw-card__bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: rgba(255,255,255,0.18);
	z-index: 2;
}
.kn-cw-card__bar-fill {
	display: block;
	height: 100%;
	background: var(--knack-accent);
}
.kn-cw-card__body {
	padding: 10px 4px 4px;
}
.kn-cw-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 4px;
	letter-spacing: -0.01em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.kn-cw-card__remaining {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--knack-text-muted);
}

@media (max-width: 640px) {
	.kn-continue-watching__strip { grid-auto-columns: 220px; }
}

/* ────────────────────────────────────────────────────────────────
   Recommended films (homepage)
   ──────────────────────────────────────────────────────────────── */
.kn-recommended { padding: 24px 0 8px; }
.kn-recommended__header {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
	margin-bottom: 16px;
}
.kn-recommended__eyebrow {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	color: var(--knack-accent); margin-bottom: 4px;
}
.kn-recommended__title {
	font-size: clamp(1.25rem, 2.2vw, 1.75rem);
	font-weight: 800; letter-spacing: -0.02em; margin: 0;
}
.kn-recommended__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 16px;
}
.kn-rec-card {
	color: var(--knack-text);
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 6px;
	transition: transform 0.2s ease;
}
.kn-rec-card:hover { transform: translateY(-3px); }
.kn-rec-card__art {
	position: relative;
	aspect-ratio: 2 / 3;
	background: var(--knack-bg-secondary) center / cover no-repeat;
	border-radius: var(--knack-radius-lg, 14px);
	overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	color: var(--knack-text-muted);
}
.kn-rec-card__badge {
	position: absolute;
	top: 8px; right: 8px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(0,0,0,0.6);
	color: #fbbf24;
	font-size: 0.75rem;
	font-weight: 700;
	backdrop-filter: blur(6px);
}
.kn-rec-card__title {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.kn-rec-card__year {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
	font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   EDITORIAL FILMS ARCHIVE — magazine-issue layout
   ════════════════════════════════════════════════════════════════════ */

.knack-film-archive-edit {
	padding-bottom: 64px;
}

/* ── Editorial header ─────────────────────────────────────────── */
.kf-edit-header {
	padding: 32px 0 28px;
	border-bottom: 1px solid var(--knack-border-soft);
}
.kf-edit-header__top {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 40px;
	align-items: end;
}
.kf-edit-header__lead { min-width: 0; }
.kf-edit-header__eyebrow {
	display: inline-block;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--knack-text-muted);
	margin-bottom: 10px;
}
.kf-edit-header__title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(2.5rem, 5.5vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 0.95;
	margin: 0 0 14px;
	color: var(--knack-text);
}
.kf-edit-header__amp {
	font-style: italic;
	font-weight: 400;
}
.kf-edit-header__lede {
	max-width: 560px;
	font-size: 0.875rem;
	color: var(--knack-text-muted);
	line-height: 1.55;
	margin: 0;
}

.kf-edit-header__stats {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
}
.kf-edit-header__stats-eyebrow {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	color: var(--knack-text-muted);
	margin-bottom: 10px;
}
.kf-edit-header__stats-row {
	display: grid;
	grid-template-columns: repeat(3, auto);
	gap: 28px;
}
.kf-stat {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.kf-stat__num {
	font-size: clamp(1.5rem, 3.5vw, 2.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--knack-text);
}
.kf-stat__label {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--knack-text-muted);
	margin-top: 4px;
}

@media (max-width: 768px) {
	.kf-edit-header__top { grid-template-columns: 1fr; gap: 20px; }
	.kf-edit-header__stats { align-items: flex-start; text-align: left; }
	.kf-stat { align-items: flex-start; }
	.kf-edit-header__stats-row { gap: 20px; }
}

/* ── Filter bar ───────────────────────────────────────────────── */
.kf-edit-filters {
	padding: 14px 0;
	border-bottom: 1px solid var(--knack-border-soft);
}
.kf-edit-filters__row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}
.kf-edit-filters__search {
	position: relative;
	flex: 1 1 280px;
	min-width: 240px;
}
.kf-edit-filters__search input {
	width: 100%;
	padding: 11px 14px 11px 38px;
	font: inherit;
	font-size: 0.875rem;
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	transition: border-color 0.12s ease, background 0.12s ease;
}
.kf-edit-filters__search input:focus {
	outline: none;
	border-color: var(--knack-accent);
	background: var(--knack-bg);
}
.kf-edit-filters__search input::placeholder { color: var(--knack-text-muted); }
.kf-edit-filters__search-icon {
	position: absolute;
	left: 14px; top: 50%;
	transform: translateY(-50%);
	color: var(--knack-text-muted);
}
.kf-edit-filters__search-clear {
	position: absolute;
	right: 12px; top: 50%;
	transform: translateY(-50%);
	width: 18px; height: 18px;
	border-radius: 50%;
	background: var(--knack-border);
	color: var(--knack-text);
	text-decoration: none;
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 0.875rem;
	line-height: 1;
}

.kf-edit-filters__type-group {
	display: inline-flex;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: var(--knack-radius-pill);
	padding: 3px;
}
.kf-pill {
	padding: 7px 16px;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	background: transparent;
	color: var(--knack-text-muted);
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease;
}
.kf-pill.is-active {
	background: var(--knack-text);
	color: var(--knack-bg);
}
.kf-pill:hover:not(.is-active) {
	color: var(--knack-text);
}
.kf-pill--submit {
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
}

.kf-edit-filters__select {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.75rem;
	color: var(--knack-text-muted);
}
.kf-edit-filters__select-label {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.kf-edit-filters__select select {
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	background: transparent;
	border: 0;
	border-bottom: 1px solid transparent;
	color: var(--knack-text);
	padding: 4px 18px 4px 4px;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 2px center;
}
.kf-edit-filters__select select:hover {
	border-bottom-color: var(--knack-border);
}
.kf-edit-filters__select select:focus {
	outline: none;
	border-bottom-color: var(--knack-accent);
}
.kf-edit-filters__select--right { margin-left: auto; }

@media (max-width: 768px) {
	.kf-edit-filters__row { gap: 8px; }
	.kf-edit-filters__search { flex: 1 1 100%; }
	.kf-edit-filters__select--right { margin-left: 0; }
}

/* ── Genre filter rail (icon chips) ───────────────────────────────
   One-click genre filtering below the filter bar. Base = light (theme
   vars); the dark Netflix-zone overrides live in the netflix section. */
.kf-genre-rail {
	display: flex;
	gap: 8px;
	margin-top: 14px;
	padding-bottom: 2px;
	overflow-x: auto;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.kf-genre-rail::-webkit-scrollbar { display: none; }
.kf-genre-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	flex: 0 0 auto;
	padding: 8px 14px;
	border-radius: var(--knack-radius-pill, 999px);
	font-size: 0.8125rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	color: var(--knack-text-muted);
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.kf-genre-chip:hover {
	color: var(--knack-text);
	border-color: var(--knack-border);
}
.kf-genre-chip.is-active {
	background: var(--knack-accent);
	color: var(--knack-btn-text, #fff);
	border-color: var(--knack-accent);
}
.kf-genre-chip__icon,
.kf-genre-chip svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ── Featured film ────────────────────────────────────────────── */
.kf-edit-featured {
	padding: 28px 0 8px;
}
.kf-edit-featured__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

.kf-edit-featured__hero {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px 28px;
	min-height: 440px;
	background: #0e0e10 center / cover no-repeat;
	border-radius: 4px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
}
.kf-edit-featured__hero::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.0) 30%, rgba(0,0,0,0.65) 100%);
	pointer-events: none;
	z-index: 1;
}
.kf-edit-featured__hero-pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.7);
	pointer-events: none;
}
.kf-edit-featured__hero-pattern svg { width: 100%; height: 100%; }
.kf-edit-featured__hero-meta,
.kf-edit-featured__hero-body { position: relative; z-index: 2; }
.kf-edit-featured__hero-tag {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px;
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: rgba(255,255,255,0.9);
	backdrop-filter: blur(8px);
}
.kf-edit-featured__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: #e94d4d;
	box-shadow: 0 0 0 4px rgba(233,77,77,0.18);
	animation: kf-edit-pulse 2s ease-in-out infinite;
}
@keyframes kf-edit-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.4; }
}
.kf-edit-featured__hero-title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 0.95;
	margin: 0 0 12px;
	color: #fff;
}
.kf-edit-featured__hero-pills {
	display: flex; flex-wrap: wrap; gap: 6px;
}
.kf-edit-featured__hero-pills span {
	padding: 3px 10px;
	background: rgba(255,255,255,0.1);
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 999px;
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255,255,255,0.92);
	backdrop-filter: blur(8px);
}

.kf-edit-featured__card {
	background: var(--knack-bg);
	border: 1px solid var(--knack-border-soft);
	border-radius: 4px;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}
.kf-edit-featured__card-badge {
	display: inline-block;
	width: max-content;
	padding: 4px 10px;
	background: var(--knack-text);
	color: var(--knack-bg);
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	border-radius: 2px;
}
.kf-edit-featured__card-quote {
	margin: 0;
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: 1.0625rem;
	font-style: italic;
	line-height: 1.4;
	color: var(--knack-text);
	letter-spacing: -0.005em;
}
.kf-edit-featured__card-cite {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	color: var(--knack-text-muted);
	font-style: normal;
	display: block;
}
.kf-edit-featured__card-body {
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
	line-height: 1.55;
	margin: 0;
}
.kf-edit-featured__card-table {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px 14px;
}
.kf-edit-featured__card-table > div {
	display: contents;
}
.kf-edit-featured__card-table dt {
	grid-column: 1;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--knack-text-muted);
	padding: 2px 0;
}
.kf-edit-featured__card-table dd {
	grid-column: 2;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text);
	padding: 2px 0;
	text-align: right;
}
.kf-edit-featured__card-actions {
	display: flex; gap: 8px; align-items: center;
	margin-top: 4px;
}
.kf-edit-btn {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 9px 18px;
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	border-radius: 999px;
	border: 1.5px solid transparent;
	background: transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.kf-edit-btn svg { width: 14px; height: 14px; }
.kf-edit-btn--primary {
	background: var(--knack-text);
	color: var(--knack-bg);
	border-color: var(--knack-text);
}
.kf-edit-btn--primary:hover { filter: brightness(1.1); }
.kf-edit-btn--ghost {
	color: var(--knack-text);
	border-color: var(--knack-border);
}
.kf-edit-btn--ghost:hover {
	background: var(--knack-bg-secondary);
}
.kf-edit-btn--icon {
	width: 36px; height: 36px; padding: 0;
	justify-content: center;
	border-color: var(--knack-border);
	color: var(--knack-text-muted);
}
.kf-edit-btn--icon:hover { color: var(--knack-text); }
.kf-edit-btn--inverse {
	color: #fff;
	border-color: rgba(255,255,255,0.3);
}
.kf-edit-btn--inverse:hover { background: rgba(255,255,255,0.08); }

@media (max-width: 900px) {
	.kf-edit-featured__grid { grid-template-columns: 1fr; }
	.kf-edit-featured__hero { min-height: 320px; }
}

/* ── Films archive: full-bleed dark "Netflix zone" ─────────────── */
/* The page header, filter bar, and featured hero all share a dark
   background so they read as a single cinematic intro section before
   the lighter content rows below. The .knack-film-archive-edit body
   gets a CSS hook for this. */

/* Header — full bleed, dark, sits above the hero. Content stretches
   edge-to-edge inside the visible content column, not constrained by
   the .knack-container max-width. */
.kf-film-archive-netflix-zone .kf-edit-header {
	position: relative;
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	margin-top: calc( -1 * var( --knack-space-xl, 32px ) );
	margin-bottom: 0;
	padding: 64px 0 36px;
	background: #0a0a0a;
	color: #fff;
	border-bottom: 0;
}
.kf-film-archive-netflix-zone .kf-edit-header > .knack-container {
	position: relative;
	z-index: 1;
	max-width: none;
	padding-left: clamp( 24px, 4vw, 56px );
	/* +18px extra right padding to compensate for the dropdown chevron in the
	   filter bar below, so the right edge of the stats ("Creators") visually
	   aligns with the right edge of "Newest first" (the sort dropdown's text
	   ends 18px before the select's box edge because of caret padding). */
	padding-right: calc( clamp( 24px, 4vw, 56px ) + 18px );
}
.kf-film-archive-netflix-zone .kf-edit-header__title { color: #fff; }
.kf-film-archive-netflix-zone .kf-edit-header__lede,
.kf-film-archive-netflix-zone .kf-edit-header__amp { color: rgba( 255, 255, 255, 0.6 ); }
.kf-film-archive-netflix-zone .kf-edit-header__stats-eyebrow { color: rgba( 255, 255, 255, 0.55 ); }
.kf-film-archive-netflix-zone .kf-edit-header .kf-stat__num { color: #fff; }
.kf-film-archive-netflix-zone .kf-edit-header .kf-stat__label { color: rgba( 255, 255, 255, 0.65 ); }

/* All content sections — break out of the outer .knack-container that the
   theme layout wraps around <main>. Each section gets 100vw width with a
   negative margin trick so it spans the full visible content column
   (clipped by .knack-site-inner { overflow-x: clip } to exclude the side
   panel). The inner .knack-container then fills that full width. */
.kf-film-archive-netflix-zone .kf-edit-section,
.kf-film-archive-netflix-zone .kf-edit-continue,
.kf-film-archive-netflix-zone .kf-edit-spotlight,
.kf-film-archive-netflix-zone .kf-edit-results {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

/* Inner .knack-container in every netflix-zone section drops the max-width
   clamp and gets matching side gutters, so the rail content stretches from
   the side-panel border on the left to the viewport edge on the right. */
.kf-film-archive-netflix-zone .kf-edit-header .knack-container,
.kf-film-archive-netflix-zone .kf-edit-filters .knack-container,
.kf-film-archive-netflix-zone .kf-edit-section .knack-container,
.kf-film-archive-netflix-zone .kf-edit-continue .knack-container,
.kf-film-archive-netflix-zone .kf-edit-spotlight .knack-container,
.kf-film-archive-netflix-zone .kf-edit-results .knack-container {
	max-width: none;
	padding-left: clamp( 24px, 4vw, 56px );
	padding-right: clamp( 24px, 4vw, 56px );
}
/* Header keeps the extra +18px right padding to align "Creators" with the
   "Newest first" dropdown's chevron — overrides the rule above. */
.kf-film-archive-netflix-zone .kf-edit-header .knack-container {
	padding-right: calc( clamp( 24px, 4vw, 56px ) + 18px );
}

/* Side-panel adjustment — when the side panel is open, the 100vw section
   extends past the visible content column on the left (clipped) and is
   short on the right. To keep content centered on the visible column,
   bump both side paddings by panel_width/2 so the section's content box
   sits entirely within the visible area.

   The dark HEADER and FILTER BAR are included here too: they are 100vw
   full-bleed like the rails, so without this their content (the search
   box on the left, the Sort dropdown on the right) slides under the open
   panel / off the right edge. */
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-header > .knack-container,
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-filters > .knack-container,
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-section > .knack-container,
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-continue > .knack-container,
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-spotlight > .knack-container,
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-results > .knack-container {
	padding-left: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-width, 260px ) / 2 );
	padding-right: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-width, 260px ) / 2 );
}
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-header > .knack-container,
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-filters > .knack-container,
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-section > .knack-container,
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-continue > .knack-container,
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-spotlight > .knack-container,
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-results > .knack-container {
	padding-left: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-collapsed-width, 60px ) / 2 );
	padding-right: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-collapsed-width, 60px ) / 2 );
}
/* Editorial header keeps its extra +18px right padding (aligns the "Creators"
   stat with the Sort dropdown caret) on top of the panel compensation. */
.has-side-panel .kf-film-archive-netflix-zone .kf-edit-header > .knack-container {
	padding-right: calc( clamp( 24px, 4vw, 56px ) + 18px + var( --knack-side-panel-width, 260px ) / 2 );
}
.knack-panel-collapsed.has-side-panel .kf-film-archive-netflix-zone .kf-edit-header > .knack-container {
	padding-right: calc( clamp( 24px, 4vw, 56px ) + 18px + var( --knack-side-panel-collapsed-width, 60px ) / 2 );
}

/* Keep the side panel + sticky header above any full-bleed film hero/section
   so the hamburger / collapse toggle is always accessible, even when a dark
   100vw hero or netflix-zone sits right under them. Without this, the
   stacking context of the 100vw sections can sometimes paint over the panel
   border in dark mode. */
.knack-side-panel { z-index: 250; }
.knack-header--sticky { z-index: 240; }

/* Hide the mobile bottom-nav on every film page. The PHP-level
   knack_should_render_bottom_nav() check already short-circuits the
   markup, but this is a belt-and-suspenders rule in case another plugin
   ever injects it via filter. The film pages have their own player
   controls and next-up overlays in the bottom screen corners. */
body.post-type-archive-ks_film .knack-bottom-nav,
body.single-ks_film .knack-bottom-nav {
	display: none !important;
}

/* ── Single film / series page — same full-width treatment ────── */
/* Apply the same 100vw break-out trick to every editorial section on
   the individual film and series pages so they match the archive's
   edge-to-edge feel. Targets .knack-film-main as the wrapper, then any
   .knack-film-section, hero, player, and tabs nav inside it. */
.knack-film-main .knack-film-section,
.knack-film-main .knack-film-hero,
.knack-film-main .knack-film-player-section,
.knack-film-main .knack-film-tabs {
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
}

/* The inner .knack-container in each single-film section drops its max-width
   and uses the same edge-padding as the archive sections. */
.knack-film-main .knack-film-section > .knack-container,
.knack-film-main .knack-film-hero > .knack-container,
.knack-film-main .knack-film-tabs > .knack-container {
	max-width: none;
	padding-left: clamp( 24px, 4vw, 56px );
	padding-right: clamp( 24px, 4vw, 56px );
}
/* Player section: no inner padding — the video element itself goes
   right to the viewport edges (cinema-style). The dark filter bar
   above + the tabs below still anchor the page so the player has
   visual anchors above and below it. */
.knack-film-main .knack-film-player-section > .knack-container {
	max-width: none;
	padding: 0;
}

/* …but when the side panel is present, the 100vw bleed shifts the
   player CSS box left of the visible content column. Content anchored
   to the section's left edge (the SERIES / The one overlay text and
   the player UI) ends up sitting behind the panel. Add symmetric
   padding equal to half the side-panel width so the player content
   re-centers on the actual visible viewport, not the raw 100vw box. */
.has-side-panel .knack-film-main .knack-film-player-section > .knack-container {
	padding-left:  calc( var( --knack-side-panel-width, 260px ) / 2 );
	padding-right: calc( var( --knack-side-panel-width, 260px ) / 2 );
}
.knack-panel-collapsed.has-side-panel .knack-film-main .knack-film-player-section > .knack-container {
	padding-left:  calc( var( --knack-side-panel-collapsed-width, 60px ) / 2 );
	padding-right: calc( var( --knack-side-panel-collapsed-width, 60px ) / 2 );
}

/* Side-panel adjustment for the single film page — same logic as the archive.
   Player section is excluded — it stays zero-padding so the video bleeds
   to the actual viewport edges even when the side panel is open. */
.has-side-panel .knack-film-main .knack-film-section > .knack-container,
.has-side-panel .knack-film-main .knack-film-hero > .knack-container,
.has-side-panel .knack-film-main .knack-film-tabs > .knack-container {
	padding-left: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-width, 260px ) / 2 );
	padding-right: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-width, 260px ) / 2 );
}
.knack-panel-collapsed.has-side-panel .knack-film-main .knack-film-section > .knack-container,
.knack-panel-collapsed.has-side-panel .knack-film-main .knack-film-hero > .knack-container,
.knack-panel-collapsed.has-side-panel .knack-film-main .knack-film-tabs > .knack-container {
	padding-left: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-collapsed-width, 60px ) / 2 );
	padding-right: calc( clamp( 24px, 4vw, 56px ) + var( --knack-side-panel-collapsed-width, 60px ) / 2 );
}

/* Filter bar — full bleed, dark, sits between header and hero. Content
   also stretches edge-to-edge inside the visible column. */
.kf-film-archive-netflix-zone .kf-edit-filters {
	position: relative;
	z-index: 4; /* lift above the featured trailer so the feather below overlays it */
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	background: #0a0a0a;
	padding: 12px 0 32px;
	border-top: 0;
	border-bottom: 0;
}
/* Feather the bar's bottom edge into the trailer below: a gradient strip that
   overlaps the top of the featured hero, fading the bar's dark to transparent
   so the two blend instead of meeting at a hard line. */
.kf-film-archive-netflix-zone .kf-edit-filters::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: 96px;
	background: linear-gradient( to bottom, #0a0a0a 0%, rgba( 10, 10, 10, 0.6 ) 45%, rgba( 10, 10, 10, 0 ) 100% );
	pointer-events: none;
}
.kf-film-archive-netflix-zone .kf-edit-filters > .knack-container {
	max-width: none;
	padding-left: clamp( 24px, 4vw, 56px );
	padding-right: clamp( 24px, 4vw, 56px );
}
.kf-film-archive-netflix-zone .kf-edit-filters input[type="search"] {
	background: rgba( 255, 255, 255, 0.08 );
	border-color: rgba( 255, 255, 255, 0.14 );
	color: #fff;
}
.kf-film-archive-netflix-zone .kf-edit-filters input[type="search"]::placeholder {
	color: rgba( 255, 255, 255, 0.5 );
}
.kf-film-archive-netflix-zone .kf-edit-filters__search-icon { color: rgba( 255, 255, 255, 0.6 ); }
.kf-film-archive-netflix-zone .kf-edit-filters__type-group {
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
}
.kf-film-archive-netflix-zone .kf-edit-filters .kf-pill { color: rgba( 255, 255, 255, 0.7 ); }
.kf-film-archive-netflix-zone .kf-edit-filters .kf-pill.is-active {
	background: #fff;
	color: #0a0a0a;
}
.kf-film-archive-netflix-zone .kf-edit-filters__select-label { color: rgba( 255, 255, 255, 0.55 ); }
.kf-film-archive-netflix-zone .kf-edit-filters__select select {
	background: transparent;
	color: #fff;
}
.kf-film-archive-netflix-zone .kf-edit-filters__select select option { color: #0a0a0a; }

/* Genre rail — dark Netflix-zone treatment (sits inside the dark filter bar). */
.kf-film-archive-netflix-zone .kf-genre-chip {
	background: rgba( 255, 255, 255, 0.06 );
	border-color: rgba( 255, 255, 255, 0.12 );
	color: rgba( 255, 255, 255, 0.75 );
}
.kf-film-archive-netflix-zone .kf-genre-chip:hover {
	color: #fff;
	border-color: rgba( 255, 255, 255, 0.32 );
}
.kf-film-archive-netflix-zone .kf-genre-chip.is-active {
	background: var( --knack-accent );
	color: var( --knack-btn-text, #fff );
	border-color: var( --knack-accent );
}

/* ── Featured film — Netflix-style full-bleed hero ────────────── */
/* Sits directly below the dark header + filter bar so the three
   stack as one continuous cinematic block. */
.kf-netflix-featured {
	position: relative;
	width: 100vw;
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	margin-top: 0;
	margin-bottom: 0;
	min-height: clamp( 520px, 82vh, 860px );
	color: #fff;
	background: #0a0a0a;
	overflow: hidden;
	isolation: isolate;
}

/* ── Featured carousel: crossfading slides + nav + dots ────────────── */
.kf-netflix-featured__slides { position: relative; }
.kf-netflix-featured__slide {
	position: absolute;
	inset: 0;
	min-height: clamp( 520px, 82vh, 860px );
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease;
	z-index: 0;
}
.kf-netflix-featured__slide.is-active {
	position: relative;
	opacity: 1;
	visibility: visible;
	z-index: 1;
}
.kf-netflix-featured__slide.has-video .kf-netflix-featured__image {
	opacity: 0;
	transition: opacity 800ms ease-out;
}
@media ( prefers-reduced-motion: reduce ) {
	.kf-netflix-featured__slide { transition: none; }
}
.kf-netflix-featured__nav {
	position: absolute;
	top: 50%;
	transform: translateY( -50% );
	z-index: 5;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.4 );
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s ease, background 0.2s ease;
	backdrop-filter: blur( 4px );
}
.kf-netflix-featured--carousel:hover .kf-netflix-featured__nav,
.kf-netflix-featured__nav:focus-visible { opacity: 1; }
.kf-netflix-featured__nav:hover { background: rgba( 0, 0, 0, 0.65 ); }
.kf-netflix-featured__nav svg { width: 24px; height: 24px; }
.kf-netflix-featured__nav--prev { left: 16px; }
.kf-netflix-featured__nav--next { right: 16px; }
.kf-netflix-featured__dots {
	position: absolute;
	bottom: 18px;
	left: 50%;
	transform: translateX( -50% );
	z-index: 5;
	display: flex;
	gap: 8px;
}
.kf-netflix-featured__dot {
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.4 );
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease;
}
.kf-netflix-featured__dot:hover { background: rgba( 255, 255, 255, 0.7 ); }
.kf-netflix-featured__dot.is-active {
	width: 22px;
	border-radius: 4px;
	background: #fff;
}

/* Refined "Featured · Format" badge (replaces the lightning rank mark) */
.kf-netflix-featured__badge {
	display: inline-flex;
	align-items: center;
	/* The parent .kf-netflix-featured__content is a flex column (align-items:
	   stretch by default), which would stretch this badge to the full 640px
	   content width — leaving an empty shadowed bar trailing after the format
	   label. Pin it to the start so it hugs its "FEATURED · FILM" content. */
	align-self: flex-start;
	margin-bottom: 16px;
	border-radius: 5px;
	overflow: hidden;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.35 );
}
.kf-netflix-featured__badge-tag {
	background: var( --knack-accent );
	color: #fff;
	padding: 5px 11px;
}
.kf-netflix-featured__badge-format {
	background: rgba( 255, 255, 255, 0.16 );
	color: #fff;
	padding: 5px 11px;
	backdrop-filter: blur( 4px );
}

/* Format chip in the meta row */
.kf-netflix-featured__meta-item--format {
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 3px;
	padding: 1px 7px;
	font-weight: 700;
}

/* People row: stacked cast avatars + director byline */
.kf-netflix-featured__people {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0 0 20px;
	flex-wrap: wrap;
}
.kf-netflix-featured__avatars { display: inline-flex; }
.kf-netflix-featured__avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba( 255, 255, 255, 0.16 ) center / cover no-repeat;
	border: 2px solid #0a0a0a;
	margin-left: -10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.85rem;
	font-weight: 700;
	color: rgba( 255, 255, 255, 0.85 );
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.4 );
}
.kf-netflix-featured__avatar:first-child { margin-left: 0; }
/* When the side panel is open, 100vw covers the panel too — but overflow:clip
   on .knack-site-inner crops the left bleed and the user sees the visible
   portion. The content inside the Netflix HERO is centered to viewport via
   .knack-container — adjust to nudge it right by half the panel width so it
   sits centered on the visible area, not the viewport. (The header + filter
   bar inside .kf-film-archive-netflix-zone use `max-width: none` and explicit
   padding — including the panel/2 compensation added above — so they align
   to the visible edges without this transform.) */
.has-side-panel .kf-netflix-featured__container {
	transform: translateX( calc( var( --knack-side-panel-width, 260px ) / 2 ) );
}
.knack-panel-collapsed.has-side-panel .kf-netflix-featured__container {
	transform: translateX( calc( var( --knack-side-panel-collapsed-width, 60px ) / 2 ) );
}

/* ── MOBILE: neutralise the side-panel full-bleed compensation ─────────
   Above 1024px the side panel pushes content right, so the 100vw film
   sections add panel_width/2 padding (or a translateX on the featured hero)
   to re-centre on the visible column. At <=1024px the panel becomes an
   OVERLAY and stops pushing content — so that compensation would squeeze
   content to a sliver. Reset every compensated container to a plain mobile
   edge padding. `#primary` (the <main> id) gives ID-level specificity so
   this beats the class-based compensation rules without !important. */
@media ( max-width: 1024px ) {
	#primary .kf-edit-header > .knack-container,
	#primary .kf-edit-filters > .knack-container,
	#primary .kf-edit-section > .knack-container,
	#primary .kf-edit-continue > .knack-container,
	#primary .kf-edit-spotlight > .knack-container,
	#primary .kf-edit-results > .knack-container,
	#primary .knack-film-section > .knack-container,
	#primary .knack-film-hero > .knack-container,
	#primary .knack-film-tabs > .knack-container {
		padding-left: clamp( 16px, 4vw, 28px );
		padding-right: clamp( 16px, 4vw, 28px );
	}
	/* Player stays edge-to-edge (cinema) on mobile too. */
	#primary .knack-film-player-section > .knack-container {
		padding-left: 0;
		padding-right: 0;
	}
	/* Featured hero re-centres to the real viewport (no panel offset). */
	#primary .kf-netflix-featured__container {
		transform: none;
	}
}

/* (Legacy rule: hero used to precede the editorial header — now the
   order is flipped, so no styling needed here. Kept blank for diff
   clarity.) */

.kf-netflix-featured__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 0;
}

.kf-netflix-featured__video,
.kf-netflix-featured__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 30%;
	display: block;
}

.kf-netflix-featured__image--procedural {
	background-size: cover;
	background-position: center;
}

.kf-netflix-featured__pattern {
	position: absolute;
	inset: 0;
	color: rgba( 255, 255, 255, 0.55 );
	pointer-events: none;
}
.kf-netflix-featured__pattern svg {
	width: 100%;
	height: 100%;
}

/* When trailer video is present, the still image acts as poster — it fades out
   once the video can play. We do that with the CSS class .has-video added by JS. */
.kf-netflix-featured.has-video .kf-netflix-featured__image {
	opacity: 0;
	transition: opacity 800ms ease-out;
}

/* Bottom darkening gradient — blends into the page below */
.kf-netflix-featured__gradient {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 1;
}
.kf-netflix-featured__gradient--bottom {
	background: linear-gradient(
		180deg,
		rgba( 10, 10, 10, 0 ) 0%,
		rgba( 10, 10, 10, 0 ) 32%,
		rgba( 10, 10, 10, 0.55 ) 62%,
		rgba( 10, 10, 10, 0.92 ) 100%
	);
}
/* A short fade strip at the very bottom that drops to the page bg so the
   transition into the editorial header underneath isn't a hard line. */
.kf-netflix-featured::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 40px;
	background: linear-gradient( 180deg, rgba( 10, 10, 10, 0 ) 0%, var( --knack-bg, #ffffff ) 100% );
	pointer-events: none;
	z-index: 3;
}
.kf-netflix-featured__gradient--left {
	background: linear-gradient(
		90deg,
		rgba( 10, 10, 10, 0.85 ) 0%,
		rgba( 10, 10, 10, 0.55 ) 35%,
		rgba( 10, 10, 10, 0 ) 65%
	);
}

/* Inner positioning — anchors content to bottom-left */
.kf-netflix-featured__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: flex-end;
	min-height: clamp( 480px, 78vh, 820px );
	padding: 24px 0 56px;
}

.kf-netflix-featured__container {
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
}

.kf-netflix-featured__content {
	max-width: min( 640px, 55%);
	display: flex;
	flex-direction: column;
	gap: 14px;
}

/* Top rank/eyebrow row */
/* Title — big, bold, dramatic */
.kf-netflix-featured__title {
	font-family: var( --knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif );
	font-size: clamp( 2.5rem, 6.5vw, 5.25rem );
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 0.95;
	margin: 6px 0 4px;
	color: #fff;
	text-shadow: 0 4px 24px rgba( 0, 0, 0, 0.45 );
}

/* Meta row — IMDB-style: score · year · runtime · genre */
.kf-netflix-featured__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 14px;
	font-size: 0.875rem;
	color: rgba( 255, 255, 255, 0.92 );
}
.kf-netflix-featured__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	color: rgba( 255, 255, 255, 0.85 );
}
.kf-netflix-featured__meta-item + .kf-netflix-featured__meta-item::before {
	content: '•';
	display: inline-block;
	margin-right: 10px;
	color: rgba( 255, 255, 255, 0.45 );
}
.kf-netflix-featured__meta-item--score {
	font-weight: 700;
	color: #fff;
}
.kf-netflix-featured__meta-item--score svg {
	width: 16px;
	height: 16px;
	color: #f5c518; /* IMDb yellow */
}
.kf-netflix-featured__meta-item--score small {
	font-weight: 500;
	color: rgba( 255, 255, 255, 0.6 );
	margin-left: 2px;
}
.kf-netflix-featured__meta-item--genre {
	padding: 2px 10px;
	background: rgba( 255, 255, 255, 0.12 );
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 999px;
	font-size: 0.75rem;
	letter-spacing: 0.02em;
	backdrop-filter: blur( 8px );
}
.kf-netflix-featured__meta-item--genre + .kf-netflix-featured__meta-item::before,
.kf-netflix-featured__meta-item:first-child::before { content: none; }

/* Synopsis */
.kf-netflix-featured__synopsis {
	font-size: clamp( 0.9375rem, 1.05vw, 1.0625rem );
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.92 );
	margin: 8px 0 0;
	text-shadow: 0 2px 12px rgba( 0, 0, 0, 0.5 );
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kf-netflix-featured__byline {
	font-size: 0.8125rem;
	color: rgba( 255, 255, 255, 0.78 );
	margin: 0;
}
.kf-netflix-featured__byline span {
	color: rgba( 255, 255, 255, 0.6 );
	margin-right: 4px;
}
.kf-netflix-featured__byline strong {
	color: #fff;
	font-weight: 700;
}

/* Action buttons */
.kf-netflix-featured__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 6px;
}

.kf-netflix-featured__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 26px;
	font: inherit;
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	border-radius: 4px;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}
.kf-netflix-featured__btn svg {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.kf-netflix-featured__btn--play {
	background: #fff;
	color: #0a0a0a;
}
.kf-netflix-featured__btn--play:hover {
	background: rgba( 255, 255, 255, 0.85 );
	transform: translateY( -1px );
	box-shadow: 0 6px 22px rgba( 0, 0, 0, 0.35 );
}
.kf-netflix-featured__btn--play:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.kf-netflix-featured__btn--info {
	background: rgba( 109, 109, 110, 0.7 );
	color: #fff;
	backdrop-filter: blur( 8px );
}
.kf-netflix-featured__btn--info:hover {
	background: rgba( 109, 109, 110, 0.85 );
	transform: translateY( -1px );
}
.kf-netflix-featured__btn--info:focus-visible {
	outline: 2px solid rgba( 255, 255, 255, 0.7 );
	outline-offset: 3px;
}
.kf-netflix-featured__btn--icon {
	width: 44px;
	height: 44px;
	padding: 0;
	justify-content: center;
	border: 2px solid rgba( 255, 255, 255, 0.55 );
	background: rgba( 0, 0, 0, 0.35 );
	color: #fff;
	border-radius: 50%;
	backdrop-filter: blur( 8px );
}
.kf-netflix-featured__btn--icon:hover {
	border-color: #fff;
	background: rgba( 0, 0, 0, 0.55 );
}
.kf-netflix-featured__btn--icon.is-on {
	background: #fff;
	color: #0a0a0a;
	border-color: #fff;
}
.kf-netflix-featured__btn--icon svg {
	width: 18px;
	height: 18px;
}

/* Right-side corner: mute toggle + maturity chip */
.kf-netflix-featured__corner {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	margin-bottom: 6px;
	padding-bottom: 4px;
}
.kf-netflix-featured__mute {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid rgba( 255, 255, 255, 0.6 );
	background: rgba( 0, 0, 0, 0.35 );
	color: #fff;
	border-radius: 50%;
	cursor: pointer;
	backdrop-filter: blur( 8px );
	padding: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
	margin-right: 14px;
}
.kf-netflix-featured__mute:hover {
	border-color: #fff;
	background: rgba( 0, 0, 0, 0.55 );
}
.kf-netflix-featured__mute:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
.kf-netflix-featured__mute svg {
	width: 16px;
	height: 16px;
}
.kf-netflix-featured__mute .kf-netflix-featured__mute-on { display: none; }
.kf-netflix-featured__mute.is-muted .kf-netflix-featured__mute-off { display: block; }
.kf-netflix-featured__mute.is-muted .kf-netflix-featured__mute-on { display: none; }
.kf-netflix-featured__mute:not(.is-muted) .kf-netflix-featured__mute-off { display: none; }
.kf-netflix-featured__mute:not(.is-muted) .kf-netflix-featured__mute-on { display: block; }

.kf-netflix-featured__maturity {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 12px 0 16px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: #fff;
	background: rgba( 0, 0, 0, 0.45 );
	border-left: 3px solid rgba( 255, 255, 255, 0.85 );
	backdrop-filter: blur( 8px );
}

/* Reduced motion — kill video autoplay UI feel, keep image */
@media (prefers-reduced-motion: reduce) {
	.kf-netflix-featured.has-video .kf-netflix-featured__image { opacity: 1; }
	.kf-netflix-featured__video { display: none; }
}

/* Make sure when section is followed by another section, the gradient
   blends smoothly. The bottom gradient already ends in near-opaque dark;
   we add a small spacer pull on the next section. */
.kf-netflix-featured + .kf-edit-section { padding-top: 16px; }

/* Responsive — mobile collapse */
@media (max-width: 900px) {
	.kf-netflix-featured {
		min-height: 64vh;
		margin-top: -16px;
	}
	.kf-netflix-featured__inner { min-height: 64vh; padding: 16px 0 36px; }
	.kf-netflix-featured__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 18px;
	}
	.kf-netflix-featured__content { max-width: 100%; gap: 12px; }
	.kf-netflix-featured__corner {
		align-self: flex-end;
		margin-bottom: 0;
	}
	.kf-netflix-featured__gradient--left {
		background: linear-gradient(
			180deg,
			rgba( 10, 10, 10, 0 ) 30%,
			rgba( 10, 10, 10, 0.4 ) 70%,
			rgba( 10, 10, 10, 0.92 ) 100%
		);
	}
}
@media (max-width: 600px) {
	.kf-netflix-featured__title { font-size: clamp( 2rem, 9vw, 3rem ); }
	.kf-netflix-featured__btn { padding: 10px 18px; font-size: 0.875rem; }
	.kf-netflix-featured__btn svg { width: 18px; height: 18px; }
	.kf-netflix-featured__btn--icon { width: 38px; height: 38px; }
	.kf-netflix-featured__synopsis { -webkit-line-clamp: 4; }
}

/* ── Section header (shared) ──────────────────────────────────── */
.kf-edit-section {
	padding: 32px 0 0;
}
.kf-edit-section__header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.kf-edit-section__eyebrow {
	display: block;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: var(--knack-text-muted);
	margin-bottom: 4px;
}
.kf-edit-section__eyebrow--inverse {
	color: rgba(255,255,255,0.55);
}
.kf-edit-section__title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.5rem, 2.8vw, 2.125rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.05;
	margin: 0;
	color: var(--knack-text);
}
.kf-edit-section__more {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	text-decoration: none;
	white-space: nowrap;
}
.kf-edit-section__more svg { width: 14px; height: 14px; }
.kf-edit-section__more:hover { color: var(--knack-text); }

/* ── Watchlist button icon swap ───────────────────────────────── */
/* Two static SVGs in the button — CSS shows the right one based on the
   .is-on class toggled by the JS handler. Avoids the same lucide stale-
   reference problem the play/pause button had. */
.kf-watchlist-toggle .kf-watchlist-icon--on  { display: none; }
.kf-watchlist-toggle.is-on .kf-watchlist-icon--add { display: none; }
.kf-watchlist-toggle.is-on .kf-watchlist-icon--on  { display: inline-flex; }
.kf-watchlist-toggle.is-loading { opacity: 0.6; cursor: progress; }

/* ── Film toast (used for watchlist confirmations, share success, etc.) */
.knack-film-toast {
	position: fixed;
	left: 50%;
	bottom: 32px;
	transform: translateX( -50% ) translateY( 16px );
	padding: 12px 22px;
	background: var( --knack-text, #111 );
	color: var( --knack-bg, #fff );
	border-radius: 999px;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.35 );
	opacity: 0;
	pointer-events: none;
	z-index: 100000;
	transition: opacity 0.24s ease, transform 0.24s ease;
}
.knack-film-toast.is-on {
	opacity: 1;
	transform: translateX( -50% ) translateY( 0 );
}
.knack-film-toast--error {
	background: #c43d3d;
	color: #fff;
}

/* ── Continue watching ────────────────────────────────────────── */
.kf-edit-continue__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.kf-edit-continue__card {
	display: grid;
	grid-template-columns: 110px minmax(0, 1fr);
	gap: 14px;
	padding: 12px;
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: 4px;
	color: var(--knack-text);
	text-decoration: none;
	transition: border-color 0.15s ease;
}
.kf-edit-continue__card:hover { border-color: var(--knack-accent); }
.kf-edit-continue__art {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--knack-bg-tertiary) center / cover no-repeat;
	border-radius: 2px;
	overflow: hidden;
	display: flex; align-items: flex-end; padding: 8px;
	color: rgba(255,255,255,0.85);
}
.kf-edit-continue__pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.7);
}
.kf-edit-continue__pattern svg { width: 100%; height: 100%; }
.kf-edit-continue__art-title {
	position: relative; z-index: 2;
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-style: italic;
	font-weight: 700;
	font-size: 0.875rem;
	line-height: 1.1;
	color: #fff;
	text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
.kf-edit-continue__body {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
	position: relative;
}
.kf-edit-continue__eyebrow {
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--knack-text-muted);
}
.kf-edit-continue__title {
	font-size: 0.9375rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kf-edit-continue__sub {
	font-size: 0.75rem;
	color: var(--knack-text-muted);
}
.kf-edit-continue__resume {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--knack-accent);
	margin-top: 4px;
}
.kf-edit-continue__resume svg { width: 11px; height: 11px; }
.kf-edit-continue__bar {
	position: absolute;
	left: 0; right: 0; bottom: -4px;
	height: 2px;
	background: var(--knack-border-soft);
	border-radius: 2px;
}
.kf-edit-continue__bar-fill {
	display: block;
	height: 100%;
	background: var(--knack-accent);
	border-radius: 2px;
}

@media (max-width: 900px) {
	.kf-edit-continue__grid { grid-template-columns: 1fr; }
}

/* ── Editorial card (procedural gradient + wireframe pattern) ── */
.kf-edit-grid {
	display: grid;
	gap: 16px;
}
.kf-edit-grid--four    { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.kf-edit-grid--five    { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.kf-edit-grid--results { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }

@media (max-width: 1100px) {
	.kf-edit-grid--five { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
	.kf-edit-grid--four,
	.kf-edit-grid--five { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.kf-edit-grid--four,
	.kf-edit-grid--five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kf-edit-card {
	display: block;
	color: var(--knack-text);
	text-decoration: none;
	transition: transform 0.2s ease;
}
.kf-edit-card:hover { transform: translateY(-3px); }
/* Live removal from the watchlist view — collapse + fade so the grid
   reflows smoothly instead of needing a refresh. */
.kf-edit-card.is-removing {
	opacity: 0;
	transform: scale( 0.9 );
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}
.kf-edit-card__art {
	position: relative;
	aspect-ratio: 2 / 3;
	background-color: #1f1230;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	overflow: hidden;
	color: rgba(255,255,255,0.85);
}
.kf-edit-card--large .kf-edit-card__art {
	aspect-ratio: 0.72;
}
.kf-edit-card--compact .kf-edit-card__art {
	aspect-ratio: 2 / 3;
}
.kf-edit-card__pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.75);
	pointer-events: none;
	mix-blend-mode: screen;
}
.kf-edit-card__pattern svg { width: 100%; height: 100%; display: block; }

/* ── Lazy poster image + shimmer skeleton ─────────────────────── */
/* The poster is a real <img loading="lazy"> with srcset (set in PHP via
   wp_get_attachment_image). Until it paints, the art shows an animated
   shimmer placeholder; on load JS adds .is-loaded which fades the image
   in and stops the shimmer. */
@keyframes knack-shimmer {
	0%   { background-position: -150% 0; }
	100% { background-position:  250% 0; }
}
.kf-edit-card__art--skeleton {
	background-image: linear-gradient( 100deg, #1c1530 28%, #2c2348 48%, #1c1530 68% );
	background-size: 220% 100%;
	background-repeat: no-repeat;
	animation: knack-shimmer 1.5s ease-in-out infinite;
}
.kf-edit-card__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.35s ease;
	z-index: 1;
}
.kf-edit-card__art.is-loaded .kf-edit-card__poster { opacity: 1; }
.kf-edit-card__art.is-loaded {
	animation: none;
	background-image: none;
}
@media (prefers-reduced-motion: reduce) {
	.kf-edit-card__art--skeleton { animation: none; }
	.kf-edit-card__poster { transition: none; }
}

/* ── Hover-preview trailer ────────────────────────────────────── */
/* The <video> is injected by JS only after the card has been hovered
   ~700ms (so nothing downloads on a casual mouse-over). It fades in
   over the poster and covers the art. */
.kf-edit-card__hover-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.4s ease;
	z-index: 2;
	background: #000;
	pointer-events: none;
}
.kf-edit-card.is-previewing .kf-edit-card__hover-video {
	opacity: 1;
}
/* While previewing, dim the static play overlay so it doesn't sit on
   top of the moving trailer. */
.kf-edit-card.is-previewing .kf-edit-card__hover { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
	/* Respect reduced-motion: never autoplay hover previews. */
	.kf-edit-card__hover-video { display: none !important; }
}

/* ── Resume progress bar + "X min left" pill ──────────────────── */
.kf-edit-card__progress {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: rgba( 0, 0, 0, 0.55 );
	z-index: 4;
}
.kf-edit-card__progress-fill {
	display: block;
	height: 100%;
	background: var( --knack-accent, #e50914 );
	border-radius: 0 2px 2px 0;
}
.kf-edit-card__resume-label {
	position: absolute;
	left: 8px;
	bottom: 10px;
	z-index: 4;
	padding: 2px 8px;
	background: rgba( 0, 0, 0, 0.72 );
	color: #fff;
	font-size: 0.625rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	border-radius: 3px;
	backdrop-filter: blur( 6px );
}
.kf-edit-card__procedural-body {
	position: absolute;
	left: 18px; right: 18px; bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: #fff;
	z-index: 2;
}
.kf-edit-card__type {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	opacity: 0.75;
}
.kf-edit-card__title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.25rem, 1.8vw, 1.5rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 0.95;
	color: #fff;
}
.kf-edit-card--large .kf-edit-card__title {
	font-size: clamp(1.5rem, 2.2vw, 2rem);
}
.kf-edit-card__badge {
	position: absolute;
	top: 12px; left: 12px;
	padding: 4px 10px;
	background: rgba(255,255,255,0.92);
	color: #111;
	border-radius: 2px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	z-index: 3;
}
/* Series-only auto-badge: tinted accent so viewers can tell at a glance
   that a card is multi-episode vs. a one-off film. */
.kf-edit-card__badge--series {
	background: color-mix(in srgb, var(--knack-accent) 92%, transparent);
	color: var(--knack-btn-text, #fff);
	letter-spacing: 0.12em;
}

/* Series-only: episode count chip sitting in the lower-right of the art,
   paired with a thin stacked-paper line indicating multi-episode content. */
.kf-edit-card__episode-count {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 3px 8px;
	background: rgba(0,0,0,0.62);
	color: #fff;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	border-radius: 4px;
	backdrop-filter: blur(6px);
}
.kf-edit-card__series-strip {
	position: absolute;
	right: 6px;
	top: 6px;
	bottom: 6px;
	width: 5px;
	z-index: 2;
	pointer-events: none;
	/* Three thin "edges of stacked papers" stripes hinting at a multi-card
	   pile. Subtle — only readable against the card art, not loud. */
	background:
		linear-gradient(180deg, rgba(255,255,255,0.32), rgba(255,255,255,0.32)) right 0 / 1px 100% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.22), rgba(255,255,255,0.22)) right 3px / 1px 92% no-repeat,
		linear-gradient(180deg, rgba(255,255,255,0.14), rgba(255,255,255,0.14)) right 6px / 1px 84% no-repeat;
}
.kf-edit-card--procedural .kf-edit-card__series-strip { opacity: 0.85; }
.kf-edit-card__hover {
	position: absolute; inset: 0;
	background: rgba(0,0,0,0.45);
	opacity: 0;
	display: flex; align-items: center; justify-content: center;
	transition: opacity 0.18s ease;
	z-index: 4;
}
.kf-edit-card__play {
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(255,255,255,0.92);
	color: #111;
	display: inline-flex; align-items: center; justify-content: center;
	box-shadow: 0 8px 24px rgba(0,0,0,0.3);
	transform: scale(0.9);
	transition: transform 0.18s ease;
}
.kf-edit-card__play svg { width: 22px; height: 22px; margin-left: 2px; }
.kf-edit-card:hover .kf-edit-card__hover { opacity: 1; }
.kf-edit-card:hover .kf-edit-card__play { transform: scale(1); }

/* Per-card watchlist toggle — sits in the top-right corner of the art,
   hidden until card hover (so the card stays clean at rest), and stays
   visible when toggled on so the user always sees "this is saved" state. */
.kf-edit-card__watchlist {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 5;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: 50%;
	border: 1.5px solid rgba( 255, 255, 255, 0.55 );
	background: rgba( 0, 0, 0, 0.55 );
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur( 8px );
	opacity: 0;
	transform: scale( 0.85 );
	transition: opacity 0.18s ease, transform 0.18s ease, background 0.15s ease, border-color 0.15s ease;
}
.kf-edit-card__watchlist svg { width: 14px; height: 14px; }
.kf-edit-card:hover .kf-edit-card__watchlist,
.kf-edit-card__watchlist:focus-visible,
.kf-edit-card__watchlist.is-on {
	opacity: 1;
	transform: scale( 1 );
}
.kf-edit-card__watchlist:hover {
	background: rgba( 0, 0, 0, 0.75 );
	border-color: #fff;
}
.kf-edit-card__watchlist.is-on {
	background: #fff;
	color: #0a0a0a;
	border-color: #fff;
}
.kf-edit-card__watchlist:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.kf-edit-card__meta {
	padding: 10px 2px 0;
	display: flex; flex-direction: column; gap: 2px;
}
.kf-edit-card__meta-title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--knack-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kf-edit-card__meta-sub {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	display: flex;
	gap: 8px;
}
.kf-edit-card__meta-sub span:not(:last-child)::after {
	content: '·';
	margin-left: 8px;
	color: var(--knack-border);
}

/* ── Browse by genre ──────────────────────────────────────────── */
.kf-edit-genres {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.kf-edit-genre {
	position: relative;
	aspect-ratio: 16 / 7;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	overflow: hidden;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #fff;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.kf-edit-genre:hover { transform: translateY(-2px); }
.kf-edit-genre__pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.65);
	mix-blend-mode: screen;
	pointer-events: none;
}
.kf-edit-genre__pattern svg { width: 100%; height: 100%; display: block; }
.kf-edit-genre__eyebrow {
	position: relative;
	z-index: 2;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	opacity: 0.8;
}
.kf-edit-genre__name {
	position: relative; z-index: 2;
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1;
	margin-top: auto;
	color: #fff;
}
.kf-edit-genre__count {
	position: relative; z-index: 2;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	opacity: 0.85;
	margin-top: 6px;
	color: rgba(255,255,255,0.9);
}

@media (max-width: 900px) {
	.kf-edit-genres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Director spotlight ───────────────────────────────────────── */
.kf-edit-spotlight {
	margin: 40px 0 8px;
	background: #0e0e10;
	color: #fff;
	padding: 48px 0;
	border-radius: 4px;
}
.kf-edit-spotlight * {
	/* Defensive: some themes set h2 color in dark mode rules. Force light
	   text inside the spotlight section so it stays legible regardless. */
	color: inherit;
}
.kf-edit-spotlight__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 32px;
	align-items: center;
}
.kf-edit-spotlight__copy { min-width: 0; color: #fff; }
.kf-edit-spotlight__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 6px 0 16px;
}
.kf-edit-spotlight__avatar {
	flex: none;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1) center / cover no-repeat;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.18), 0 8px 24px rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: center;
}
.kf-edit-spotlight__avatar-initial {
	font-size: 1.75rem;
	font-weight: 800;
	color: rgba(255,255,255,0.85) !important;
}
.kf-edit-spotlight__head-text { min-width: 0; }
.kf-edit-spotlight__name {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.75rem, 3.4vw, 2.6rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
	margin: 0 0 6px;
	text-transform: capitalize;
	color: #ffffff !important;
}
.kf-edit-spotlight__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: rgba(255,255,255,0.7) !important;
}
.kf-edit-spotlight__stats span { display: inline-flex; align-items: center; }
.kf-edit-spotlight__stats span + span::before {
	content: "·";
	margin-right: 14px;
	opacity: 0.5;
}
.kf-edit-spotlight__bio {
	font-size: 0.9375rem;
	color: rgba(255,255,255,0.78) !important;
	line-height: 1.55;
	margin: 0 0 18px;
	max-width: 440px;
}
.kf-edit-spotlight__films {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}
.kf-edit-spotlight__films .kf-edit-card__meta-title,
.kf-edit-spotlight__films .kf-edit-card__meta-sub {
	color: rgba(255,255,255,0.8);
}

@media (max-width: 900px) {
	.kf-edit-spotlight__grid { grid-template-columns: 1fr; }
}

/* ── Trending this week ───────────────────────────────────────── */
.kf-edit-trending {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 10px;
}
.kf-edit-trending__item {
	display: block;
	color: var(--knack-text);
	text-decoration: none;
	transition: transform 0.2s ease;
}
.kf-edit-trending__item:hover { transform: translateY(-3px); }
.kf-edit-trending__art {
	position: relative;
	aspect-ratio: 2 / 3;
	background-size: cover;
	background-position: center;
	border-radius: 4px;
	overflow: hidden;
	color: rgba(255,255,255,0.85);
}
.kf-edit-trending__pattern {
	position: absolute; inset: 0;
	color: rgba(255,255,255,0.7);
	mix-blend-mode: screen;
}
.kf-edit-trending__pattern svg { width: 100%; height: 100%; display: block; }
.kf-edit-trending__procedural {
	position: absolute;
	left: 12px; right: 12px; bottom: 14px;
	z-index: 2;
	color: #fff;
}
.kf-edit-trending__procedural-eye {
	display: block;
	font-size: 0.5625rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	opacity: 0.7;
	margin-bottom: 4px;
}
.kf-edit-trending__procedural-title {
	display: block;
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 0.95;
	color: #fff;
}
.kf-edit-trending__num {
	position: absolute;
	bottom: -22px; left: -8px;
	font-size: clamp(5rem, 9vw, 8rem);
	font-weight: 900;
	line-height: 0.85;
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	color: transparent;
	-webkit-text-stroke: 2px var(--knack-text);
	z-index: 3;
	pointer-events: none;
	letter-spacing: -0.05em;
}
.kf-edit-trending__meta {
	padding: 16px 4px 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kf-edit-trending__title {
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--knack-text);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.kf-edit-trending__sub {
	font-size: 0.6875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	display: flex;
	gap: 8px;
}
.kf-edit-trending__sub span:not(:last-child)::after {
	content: '·';
	margin-left: 8px;
	color: var(--knack-border);
}

@media (max-width: 1100px) {
	.kf-edit-trending { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.kf-edit-trending { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Collections ──────────────────────────────────────────────── */
.kf-edit-collections {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}
.kf-edit-collection {
	position: relative;
	background: #0e0e10;
	color: #fff;
	border-radius: 4px;
	padding: 22px 22px 0;
	min-height: 240px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	transition: transform 0.2s ease;
}
.kf-edit-collection:hover { transform: translateY(-3px); }
.kf-edit-collection__eyebrow {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.2em;
	color: rgba(255,255,255,0.45);
	margin-bottom: 8px;
}
.kf-edit-collection__title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.5rem, 2.2vw, 1.875rem);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.05;
	margin: 0 0 8px;
	color: #fff !important;
}
.kf-edit-collection__desc {
	font-size: 0.75rem;
	color: rgba(255,255,255,0.55);
	line-height: 1.45;
	margin: 0 0 8px;
}
.kf-edit-collection__count {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.5);
	margin-bottom: 12px;
}
.kf-edit-collection__stack {
	margin-top: auto;
	display: flex;
	align-items: flex-end;
	gap: 6px;
	transform: translateY(36px);
	padding-bottom: 0;
}
.kf-edit-collection__poster {
	width: 44px;
	aspect-ratio: 2 / 3;
	background-size: cover;
	background-position: center;
	border-radius: 2px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3);
	transform: rotate(calc(-6deg + var(--i) * 3deg));
}

@media (max-width: 900px) {
	.kf-edit-collections { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── Search / filter results ──────────────────────────────────── */
.kf-edit-results {
	padding: 24px 0 32px;
}
.kf-edit-results__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.kf-edit-results__title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--knack-text);
}
.kf-edit-results__sub {
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
	margin: 4px 0 0;
}
.kf-edit-results__empty {
	color: var(--knack-text-muted);
	font-size: 0.9375rem;
	padding: 60px 0;
	text-align: center;
}

/* Filter chips row */
.kf-edit-results__chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 14px 0;
	margin-bottom: 18px;
	border-top: 1px solid var(--knack-border-soft);
	border-bottom: 1px solid var(--knack-border-soft);
}
.kf-edit-results__chips-label {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--knack-text-muted);
	margin-right: 4px;
}
.kf-edit-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--knack-text);
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: 999px;
	text-decoration: none;
	transition: background 0.12s ease, border-color 0.12s ease;
}
.kf-edit-filter-chip:hover {
	background: var(--knack-bg-tertiary, var(--knack-bg-secondary));
	border-color: var(--knack-border);
}
.kf-edit-filter-chip span[aria-hidden] {
	font-size: 1rem;
	line-height: 1;
	color: var(--knack-text-muted);
	margin-left: 2px;
}

/* Pagination */
.kf-edit-results__pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 32px;
}
.kf-edit-results__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
	background: var(--knack-bg-secondary);
	border: 1px solid var(--knack-border-soft);
	border-radius: 8px;
	text-decoration: none;
	transition: background 0.12s ease, color 0.12s ease;
}
.kf-edit-results__pagination .page-numbers:hover {
	color: var(--knack-text);
	background: var(--knack-bg);
}
.kf-edit-results__pagination .page-numbers.current {
	background: var(--knack-text);
	color: var(--knack-bg);
	border-color: var(--knack-text);
}
.kf-edit-results__pagination .page-numbers.dots {
	background: transparent;
	border-color: transparent;
}

/* Share button visual feedback */
.kf-edit-btn--icon.is-copied {
	color: var(--knack-accent);
	border-color: var(--knack-accent);
}
.kf-edit-btn.is-on {
	background: var(--knack-text);
	color: var(--knack-bg);
	border-color: var(--knack-text);
}

@media (max-width: 640px) {
	.kf-edit-results__head { flex-direction: column; align-items: flex-start; }
}

/* ── Dark-mode tweaks ─────────────────────────────────────────── */
body.aoty-dark-mode .kf-edit-featured__card,
body.aoty-dark-mode .kf-edit-continue__card {
	background: var(--knack-bg-secondary, #1a1a1a);
}
body.aoty-dark-mode .kf-edit-trending__num {
	-webkit-text-stroke-color: rgba(255,255,255,0.85);
}
body.aoty-dark-mode .kf-edit-spotlight {
	background: #000;
}

/* ════════════════════════════════════════════════════════════════════
   THE REEL — homepage film-strip with sprocket-hole perforations
   ════════════════════════════════════════════════════════════════════ */

.kn-reel { padding: 56px 0 24px; }

.kn-reel__header {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: 32px;
	align-items: end;
	margin-bottom: 22px;
}
.kn-reel__title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 0.95;
	margin: 0;
	color: var(--knack-text);
}
.kn-reel__title em {
	display: block;
	font-style: italic;
	font-weight: 600;
}
.kn-reel__lede {
	max-width: 320px;
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.55;
	color: var(--knack-text-muted);
	text-align: right;
	align-self: flex-end;
	justify-self: end;
}

.kn-reel__index {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 0;
	border-top: 1px solid var(--knack-border-soft);
	border-bottom: 1px solid var(--knack-border-soft);
	margin-bottom: 0;
}
.kn-reel__index-num {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--knack-text-muted);
}
.kn-reel__index-sep {
	color: var(--knack-text-muted);
	opacity: 0.5;
}
.kn-reel__index-label {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--knack-text);
	letter-spacing: -0.005em;
}
.kn-reel__nav {
	margin-left: auto;
	display: inline-flex;
	gap: 4px;
}
.kn-reel__nav-btn {
	width: 36px; height: 36px;
	border-radius: 50%;
	background: transparent;
	border: 1px solid var(--knack-border);
	color: var(--knack-text);
	display: inline-flex;
	align-items: center; justify-content: center;
	cursor: pointer;
	transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.kn-reel__nav-btn svg { width: 16px; height: 16px; }
.kn-reel__nav-btn:hover {
	background: var(--knack-text);
	color: var(--knack-bg);
	border-color: var(--knack-text);
}

/* ── The film strip itself — dark band with perforations ────── */
/* 35mm-style film strip.
   Real Kodak Standard perforations are tall rectangles (~2.8mm × 1.98mm,
   so width/height ≈ 1.4) with subtle rounded corners, repeated every
   ~4.75mm. In CSS land we go with 22px-wide × 14px-tall holes spaced
   every 38px.

   The wrapper has a fixed WHITE background. The dark perforation rows
   on top use a mask to punch holes — the holes reveal this white
   wrapper, so sprocket holes always look white in both light and dark
   mode (real film stock has light/transparent perforations, so this
   matches the physical reference). The scroll area in the middle is
   opaque dark so the wrapper's white never bleeds into the card row. */
.kn-reel__strip {
	background: #ffffff;
	position: relative;
	margin: 0;
	border-radius: 3px;
	overflow: hidden; /* clip perf+scroll to the rounded corners */
	box-shadow: 0 14px 40px rgba( 0, 0, 0, 0.3 );
	--reel-bg: #16130c;
}

/* Edge-code stripe — thin warm-amber line just inside each perforation
   row, like the optical-track / edge markings on real film stock. */
.kn-reel__strip::before,
.kn-reel__strip::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba( 220, 170, 90, 0.18 ) 8%,
		rgba( 220, 170, 90, 0.28 ) 50%,
		rgba( 220, 170, 90, 0.18 ) 92%,
		transparent
	);
	pointer-events: none;
	z-index: 3;
}
.kn-reel__strip::before { top: 34px; }
.kn-reel__strip::after  { bottom: 34px; }

/* Sprocket-hole perforation rows — repeating rounded RECTANGLES (not
   ellipses) punched into the strip's top and bottom edges.

   The mask SVG uses a SINGLE `<path>` with fill-rule="evenodd" and a
   compound `d` of (outer rectangle + inner rounded rectangle). With
   the even-odd rule, the inner subpath becomes a real transparent
   hole inside the outer fill — so the mask works the same way in both
   `mask-mode: alpha` (browser default for image masks) and `mask-mode:
   luminance`. Earlier two-rect attempts failed because both rects were
   opaque, and in alpha mode the inner black rect counted as "visible"
   instead of cutting a hole. */
.kn-reel__perfs {
	position: relative;
	height: 32px;
	background: linear-gradient( 180deg, #0a0805, #110e08 );

	-webkit-mask-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='32'><path fill='%23000' fill-rule='evenodd' d='M0 0h38v32H0V0zm11 9a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3H11z'/></svg>");
	-webkit-mask-repeat: repeat-x;
	-webkit-mask-position: 0 50%;
	-webkit-mask-size: 38px 32px;
	mask-image:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='32'><path fill='%23000' fill-rule='evenodd' d='M0 0h38v32H0V0zm11 9a3 3 0 0 0-3 3v8a3 3 0 0 0 3 3h16a3 3 0 0 0 3-3v-8a3 3 0 0 0-3-3H11z'/></svg>");
	mask-repeat: repeat-x;
	mask-position: 0 50%;
	mask-size: 38px 32px;
}
.kn-reel__perfs--top    { box-shadow: inset 0 -1px 0 rgba( 255, 255, 255, 0.04 ); }
.kn-reel__perfs--bottom { box-shadow: inset 0  1px 0 rgba( 255, 255, 255, 0.04 ); }

/* Frame-line vertical separators between film cells — like the thin
   black bars that divide frames on actual film stock. Achieved by
   styling each cell's left border. */

/* Horizontal scrolling row of film cards. Owns the dark "between-perfs"
   background so the strip wrapper can stay transparent (see comment on
   .kn-reel__strip). The gradient continues seamlessly from the perf
   rows above and below for the brushed-emulsion effect. */
.kn-reel__scroll {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(220px, 1fr);
	gap: 0; /* No gap — frames touch, separators come from cell borders */
	padding: 18px 0 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	position: relative;
	z-index: 1;
	background: linear-gradient(
		180deg,
		#110e08 0%,
		#1a1611 30%,
		#1a1611 70%,
		#110e08 100%
	);
}
.kn-reel__scroll::-webkit-scrollbar { display: none; }

.kn-reel__cell {
	scroll-snap-align: start;
	padding: 0 12px;
	position: relative;
	/* Vertical frame divider — thin double-line between cells, similar
	   to the dark "frame line" between consecutive shots on real film. */
	border-left: 1px solid rgba( 0, 0, 0, 0.6 );
	box-shadow: inset 1px 0 0 rgba( 255, 255, 255, 0.04 );
}
.kn-reel__cell:first-child { border-left: 0; box-shadow: none; }

/* Tiny frame number in the corner — "01", "02"… — like edge codes
   on real film stock. */
.kn-reel__cell::before {
	counter-increment: reel-frame;
	content: counter( reel-frame, decimal-leading-zero );
	position: absolute;
	top: 6px;
	left: 18px;
	font-family: 'Courier New', monospace;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: rgba( 220, 170, 90, 0.45 );
	z-index: 2;
	pointer-events: none;
}
.kn-reel__scroll { counter-reset: reel-frame; }

.kn-reel__cell .kf-edit-card { display: block; }
.kn-reel__cell .kf-edit-card__art {
	aspect-ratio: 2 / 3;
	border-radius: 1px; /* sharper corners — film frames aren't rounded */
	box-shadow:
		0 6px 16px rgba( 0, 0, 0, 0.4 ),
		inset 0 0 0 1px rgba( 0, 0, 0, 0.6 ); /* dark frame border */
}
/* Inside the strip the cards don't need their own card-shadow lift. */
.kn-reel__cell .kf-edit-card:hover {
	transform: translateY(-2px);
	transition: transform 0.18s ease;
}

@media (min-width: 1100px) {
	.kn-reel__scroll {
		grid-auto-columns: minmax(0, 1fr);
	}
}
@media (max-width: 768px) {
	.kn-reel__header { grid-template-columns: 1fr; gap: 12px; }
	.kn-reel__lede { text-align: left; max-width: none; }
	.kn-reel__scroll { grid-auto-columns: 60vw; padding: 20px 18px 22px; }
}

/* ── This week's feature card under the strip ──────────────── */
.kn-reel__feature {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 28px;
	align-items: flex-start;
	padding: 24px 0 0;
}
.kn-reel__feature-left { min-width: 0; }
.kn-reel__feature-badge {
	display: inline-block;
	padding: 4px 12px;
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	color: var(--knack-text);
	background: transparent;
	border: 1px solid var(--knack-text);
	border-radius: 999px;
	margin-bottom: 12px;
}
.kn-reel__feature-meta {
	display: flex;
	gap: 14px;
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
	margin-bottom: 6px;
}
.kn-reel__feature-meta span:not(:last-child)::after {
	content: '·';
	margin-left: 14px;
	color: var(--knack-border);
}
.kn-reel__feature-title {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-size: clamp(1.875rem, 3.5vw, 2.625rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1;
	margin: 0 0 10px;
}
.kn-reel__feature-title a {
	color: var(--knack-text);
	text-decoration: none;
}
.kn-reel__feature-title a:hover { color: var(--knack-accent); }
.kn-reel__feature-synopsis {
	font-size: 0.9375rem;
	color: var(--knack-text-muted);
	line-height: 1.55;
	margin: 0;
	max-width: 560px;
}

.kn-reel__feature-right {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
	text-align: right;
}
.kn-reel__feature-credit {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.kn-reel__feature-credit-label {
	font-size: 0.625rem;
	font-weight: 800;
	letter-spacing: 0.18em;
	color: var(--knack-text-muted);
}
.kn-reel__feature-credit-name {
	font-family: var(--knack-font-heading, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
	font-style: italic;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--knack-text);
}
.kn-reel__feature-rating {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	font-size: 0.8125rem;
	color: var(--knack-text-muted);
}
.kn-reel__feature-rating .ks-star { font-size: 0.875rem; }
.kn-reel__feature-actions {
	display: inline-flex;
	gap: 8px;
	margin-top: 4px;
}
.kn-reel__feature-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 9px 18px;
	font-size: 0.8125rem;
	font-weight: 700;
	border-radius: 999px;
	text-decoration: none;
	border: 1.5px solid transparent;
	cursor: pointer;
	transition: filter 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.kn-reel__feature-btn svg { width: 14px; height: 14px; }
.kn-reel__feature-btn--primary {
	background: var(--knack-text);
	color: var(--knack-bg);
	border-color: var(--knack-text);
}
.kn-reel__feature-btn--primary:hover { filter: brightness(1.1); }
.kn-reel__feature-btn--ghost {
	background: transparent;
	color: var(--knack-text);
	border-color: var(--knack-border);
}
.kn-reel__feature-btn--ghost:hover {
	background: var(--knack-bg-secondary);
}

@media (max-width: 768px) {
	.kn-reel__feature {
		grid-template-columns: 1fr;
	}
	.kn-reel__feature-right {
		align-items: flex-start;
		text-align: left;
	}
}

/* ── Dark mode ─────────────────────────────────────────────── */
/* The strip wrapper keeps its white background in dark mode too — the
   sprocket holes (cut by the mask on .kn-reel__perfs) need to reveal a
   light layer underneath so they read as proper perforations against
   the dark surrounding page. Real film stock has light/clear perfs, so
   this matches the physical reference in both themes. */
body.aoty-dark-mode .kn-reel__strip {
	background: #ffffff;
}
body.aoty-dark-mode .kn-reel__feature-badge {
	color: var(--knack-text);
	border-color: rgba(255,255,255,0.5);
}
body.aoty-dark-mode .kn-reel__nav-btn:hover {
	background: rgba(255,255,255,0.1);
	color: var(--knack-text);
	border-color: var(--knack-text);
}