/*
 * The home page.
 *
 * Ported from `html pages/01-home_1.html`, which is the drawn source for
 * this page. That file is its own generation: the ten other design files
 * share one vocabulary and the home page has another, so its sections keep
 * their own `k-` names here rather than being bent onto the components the
 * episode and season pages were measured against. Nothing below is used by
 * another screen, and this stylesheet is only loaded where the page is.
 *
 * Two notes on the port:
 *   - the design file names a second family, `--k-font-ui`, for buttons and
 *     meta lines. That was Assistant standing in for Ploni in a mockup that
 *     had no licensed font, not a second brand face. Everything here is
 *     Ploni, which is what the brand book asks for and what the rest of the
 *     site already paints.
 *   - every colour resolves through tokens.css. The design file's own
 *     `--k-orange` is this theme's `--accent`, and its `--k-orange-border`
 *     is `--accent-edge`: a fill and an outline, two roles, one hue family.
 */

/* =========================================================
   The column
   =========================================================
   The side margins scale with the screen the way the hero's do (209 of
   1903 is 11%), so every section below the hero lines up with the hero's
   own text at any desktop width, inside a measured 1462px cap.
   ========================================================= */

.k-container {
	width: min(var(--container), 100% - 2 * max(var(--gutter), 11vw));
	margin-inline: auto;
}

/* =========================================================
   Type
   ========================================================= */

.k-h2 {
	margin: 0;
	font-family: var(--font);
	font-weight: var(--w-black);
	font-size: clamp(32px, 2.6vw, 50px);
	line-height: 1.5;
	color: var(--c-blue);
}

/*
 * The two section titles that carry the orange //, at the one size every
 * // title on the site uses. The slashes are decoration: no screen reader
 * announces them.
 */
.k-h2.k-episodes__title,
.k-h2.k-about__title { font-size: var(--fs-h2); font-weight: var(--w-ultrabold); line-height: 1.2; }

/*
 * Real markup, not a ::before. SplitText wraps the heading's words in
 * block-level line divs, and a pseudo-element is not one of those words, so
 * it was laid out on a line of its own above the heading until the split
 * reverted and it snapped back. As a span it is simply another word and
 * rides the same animation.
 */
.k-h2__slashes { color: var(--accent); }

/*
 * Running text on this page is set tighter than the rest of the site: 1.42
 * against the theme's 1.7. The design draws it that way, and the paragraph
 * gap is one of those lines, so the two are written from one number.
 */
.k-text { --k-lh: 1.42; line-height: var(--k-lh); }
.k-text p { margin: 0; line-height: var(--k-lh); }
.k-text p + p { margin-top: calc(var(--k-lh) * 1em); }
.k-text a { color: var(--accent); }

.k-kicker { margin: 0; font-weight: var(--w-ultrabold); font-size: var(--fs-h2); line-height: 1.2; color: var(--c-blue); }
.k-kicker__slashes { color: var(--accent); }

/* =========================================================
   Buttons
   =========================================================
   Two fills, and the hover is a panel of the other colour sweeping in from
   the right, the direction the language reads. The panel is a pseudo
   element that scales, so the paint stays on the compositor rather than
   animating a background colour.
   ========================================================= */

a.k-btn,
.k-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 217px;
	height: 42px;
	padding: 0 20px;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid transparent;
	font-family: var(--font);
	font-weight: var(--w-bold);
	font-size: var(--fs-body);
	line-height: 1;
	color: var(--text-invert);
	cursor: pointer;
	transition: background-color .3s, color .3s, border-color .3s;
}

.k-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	transform: scaleX(0);
	transform-origin: 100% 50%;
	transition: transform .5s var(--ease);
}

.k-btn:hover::before,
.k-btn:focus-visible::before { transform: scaleX(1); }

.k-btn--orange { background: var(--accent); border-color: var(--accent-edge); }
.k-btn--orange::before { background: var(--c-blue); }
.k-btn--orange:hover { border-color: var(--c-blue); }

.k-btn--navy { background: var(--c-blue); border-color: var(--c-blue); }
.k-btn--navy::before { background: var(--accent); }
.k-btn--navy:hover { border-color: var(--accent-edge); }

/* =========================================================
   Chips
   ========================================================= */

.k-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }

.k-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 77px;
	height: 28px;
	padding: 0 8px;
	background: var(--surface);
	border: 0;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1;
	color: var(--c-blue);
	white-space: nowrap;
}

button.k-chip { cursor: pointer; transition: background-color .2s, color .2s; }
button.k-chip:hover { background: #e3e3e3; }
button.k-chip[aria-pressed="true"] { background: var(--c-blue); color: var(--text-invert); }

/* A tag under a card is narrower and smaller: it labels, it does not offer. */
.k-chip--tag { min-width: 0; padding: 0 10px; font-size: var(--fs-meta); }

/*
 * A chip for a stage this season has nothing in is marked hidden by the
 * script. The display above would otherwise beat the browser's own rule
 * for [hidden] and leave a row of chips that all say (0).
 */
.k-chip[hidden] { display: none; }

/* =========================================================
   Episodes
   ========================================================= */

.k-episodes { padding-top: clamp(40px, 4.6vw, 88px); padding-bottom: clamp(56px, 5.8vw, 112px); }

/*
 * The season bar sits inside the hero, flush with its bottom edge. Measured
 * in Figma: desktop (854:4) the bar is 84 tall and ends exactly at the
 * frame's bottom (frame 1903 x 851, bar top at 767); mobile (843-634) it is
 * 53 tall and ends at the frame's bottom (390 x 844, bar top at 791).
 *
 * The section's own top padding is cancelled first, then the bar's height,
 * so the bar's bottom edge lands on the hero's bottom edge. The hero is
 * painted first and this section is z-index 1 (.k-hero + *), so the bar
 * covers the bottom of the stage.
 *
 * 84 / 1903 is 4.4vw, the same ratio the bar already uses on a wide screen.
 */
.k-hero + .k-episodes {
	--bar-h: clamp(53px, 4.4vw, 84px);
	margin-top: calc(-1 * (clamp(40px, 4.6vw, 88px) + var(--bar-h)));
}

.k-hero + .k-episodes .k-seasonbar { min-height: var(--bar-h); }

/* Mobile frame: bar is 54 tall (390 wide comp), so it tracks the width up to the desktop cap. */
@media (max-width: 1023px) {
	.k-hero + .k-episodes { --bar-h: calc(54 * var(--hm)); }
	/* In the 390 comp the bar runs x 10 to 380, y 790 to 844: 10 in from each edge and flush with the bottom of the screen. */
	.k-hero + .k-episodes .k-seasonbar { margin-inline: calc((100vw - 390 * var(--hm)) / 2 + 10 * var(--hm) - var(--gutter)); }
}

/* ---- The navy season bar -------------------------------------------- */

.k-seasonbar {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: clamp(60px, 4.4vw, 84px);
	padding-inline-start: clamp(16px, 1.56vw, 30px);
	padding-inline-end: clamp(16px, 3.9vw, 75px);
	background: var(--c-blue);
	color: var(--text-invert);
}

.k-seasonbar__select { position: relative; }

.k-seasonbar__toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	background: none;
	border: 0;
	font-family: var(--font);
	font-weight: var(--w-bold);
	font-size: clamp(20px, 1.56vw, 30px);
	line-height: 1.37;
	color: var(--text-invert);
	cursor: pointer;
}

/* One season is not a choice, so the control says so instead of opening. */
.k-seasonbar__toggle:disabled { cursor: default; }

.k-seasonbar__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); flex: none; }

.k-seasonbar__caret {
	width: 13px;
	height: 6.5px;
	margin-inline-start: 8px;
	flex: none;
	color: var(--accent);
	transition: transform .2s;
}

.k-seasonbar__toggle[aria-expanded="true"] .k-seasonbar__caret { transform: rotate(180deg); }

.k-seasonbar__all {
	font-weight: var(--w-bold);
	font-size: var(--fs-body);
	color: var(--text-invert);
	white-space: nowrap;
}

.k-seasonbar__all:hover { color: var(--accent); }

/* ---- The season picker ----------------------------------------------
   A highlight that glides between rows on hover, arrow keys or a press and
   drag. Driven by assets/js/glide-select.js; with the script off, the
   trigger is a link to the season archive instead.
   ------------------------------------------------------------------- */

.glide-select {
	--gs-row: 46px;
	--gs-glide: 220ms;
	--gs-pop: 180ms;
	--gs-pop-out: 120ms;
	--gs-surface: var(--c-blue);
	--gs-highlight: rgba(255, 255, 255, .1);
	--gs-text: var(--text-invert);
	--gs-accent: var(--accent);
}

.glide-select__menu {
	position: absolute;
	z-index: 30;
	/* Just below the navy bar, flush with its right edge. */
	top: calc(100% + (clamp(60px, 4.4vw, 84px) - 41px) / 2);
	right: calc(-1 * clamp(16px, 1.56vw, 30px));
	min-width: 280px;
	background: var(--gs-surface);
	box-shadow: 0 18px 40px rgba(15, 37, 70, .28);
	transform-origin: top right;
}

.glide-select__menu[data-side="top"] {
	top: auto;
	bottom: calc(100% + (clamp(60px, 4.4vw, 84px) - 41px) / 2);
	transform-origin: bottom right;
}

.glide-select__menu[data-state="open"]   { animation: gs-pop-in var(--gs-pop) cubic-bezier(.2, .9, .3, 1.15) both; }
.glide-select__menu[data-state="closed"] { animation: gs-pop-out var(--gs-pop-out) cubic-bezier(.4, 0, 1, 1) both; pointer-events: none; }
.glide-select__menu[data-side="top"][data-state="open"] { animation-name: gs-pop-in-up; }

@keyframes gs-pop-in    { from { opacity: 0; transform: translateY(-6px) scale(.96); } }
@keyframes gs-pop-in-up { from { opacity: 0; transform: translateY(6px) scale(.96); } }
@keyframes gs-pop-out   { to   { opacity: 0; transform: translateY(-4px) scale(.97); } }

.glide-select__list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin: 0;
	padding: 4px;
	/* Lets a finger press and drag down the list to scrub through it. */
	touch-action: none;
	user-select: none;
}

.glide-select__pill {
	position: absolute;
	top: 4px;
	inset-inline: 4px;
	height: var(--gs-row);
	background: var(--gs-highlight);
	/* The orange edge sits on the right, which is where the row starts. */
	box-shadow: inset -3px 0 0 var(--gs-accent);
	opacity: 0;
	pointer-events: none;
	transition: transform var(--gs-glide) cubic-bezier(.3, .7, .2, 1), opacity 150ms;
}

.glide-select__option {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--gs-row);
	padding: 0 22px;
	font-family: var(--font);
	font-weight: var(--w-bold);
	font-size: 20px;
	color: var(--gs-text);
	cursor: pointer;
	transition: color .2s;
}

.glide-select[data-pointer] .glide-select__trigger:focus-visible { outline: none; }

.glide-select__name { flex: 1; white-space: nowrap; }
.glide-select__tag { font-weight: var(--w-regular); font-size: 14px; opacity: .6; white-space: nowrap; }

.glide-select__check {
	display: grid;
	place-items: center;
	width: 16px;
	color: var(--gs-accent);
	opacity: 0;
	transform: scale(.4);
	transition: opacity .2s, transform .25s cubic-bezier(.3, 1.5, .5, 1);
}

.glide-select__check[data-on] { opacity: 1; transform: none; }
.glide-select__check svg { width: 14px; height: 14px; }

.glide-select__option[aria-selected="true"] { color: var(--gs-accent); }
.glide-select__option[aria-selected="true"] .glide-select__tag { color: var(--text-invert); }

/* The chosen name slides in when it was picked with the pointer. */
.glide-select[data-swap] .glide-select__label { display: inline-block; animation: gs-swap 360ms cubic-bezier(.2, .8, .2, 1); }

@keyframes gs-swap { from { opacity: 0; transform: translateY(-45%); filter: blur(3px); } }

/* ---- Heading, intro, filters ---------------------------------------- */

.k-episodes__title   { margin-top: clamp(24px, 1.8vw, 35px); }
.k-episodes__intro   { max-width: 767px; margin-top: 2px; }
.k-episodes__filters { margin-top: var(--space-md); }

/* ---- The grid -------------------------------------------------------- */

.k-ep-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 30px;
	margin-top: clamp(28px, 2.24vw, 43px);
}

.k-ep-card[hidden] { display: none; }

.k-ep-card__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio-episode);
	overflow: hidden;
	background: var(--c-blue);
}

/* A slow zoom on hover, on the thumbnail and on the stand-in alike. */
.k-ep-card__img { width: 100%; height: 100%; object-fit: cover; }

.k-ep-card__img,
.k-ep-card__placeholder { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }

.k-ep-card:hover .k-ep-card__img,
.k-ep-card:hover .k-ep-card__placeholder,
.k-ep-card:focus-within .k-ep-card__img,
.k-ep-card:focus-within .k-ep-card__placeholder { transform: scale(1.04); }

.k-ep-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }

/* The microphone, knocked back to a watermark on the navy. */
.k-ep-card__placeholder svg { width: 42px; height: 72px; filter: brightness(0) invert(1); opacity: .35; }

.k-ep-card__meta {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: clamp(16px, 1.72vw, 33px);
	font-size: var(--fs-body);
	line-height: 1.31;
}

.k-ep-card__num  { color: var(--accent); }
.k-ep-card__time { color: var(--c-blue); }

.k-ep-card__title {
	margin: 0;
	font-weight: var(--w-bold);
	font-size: 22px;
	line-height: 1.41;
	color: var(--c-blue);
}

.k-ep-card__title a { transition: color .2s; }
.k-ep-card__title a:hover,
.k-ep-card:hover .k-ep-card__title a { color: var(--accent); }

.k-ep-card__desc { margin: 1px 0 0; font-size: var(--fs-body); line-height: 1.36; color: var(--c-blue); }
.k-ep-card__tags { margin-top: 17px; }

/* =========================================================
   Toolbox, and the articles carousel
   ========================================================= */

.k-toolbox {
	padding-top: clamp(56px, 7.3vw, 140px);
	padding-bottom: clamp(56px, 6.3vw, 121px);
	background: var(--surface);
	overflow: hidden;
}

.k-toolbox__top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-lg); }

.k-toolbox__intro { flex: 0 1 643px; margin-top: 22px; }
.k-toolbox__title { margin-top: 9px; line-height: 1; }
.k-toolbox__text  { margin-top: 21px; color: var(--text-soft); }
.k-toolbox__btn   { margin-top: 39px; }

/* ---- The white card beside it ---------------------------------------- */

.k-card { flex: 0 0 566px; max-width: 100%; padding: 47px 35px 37px; background: var(--page); }

.k-card__kicker { margin: 0; font-weight: var(--w-bold); font-size: 20px; line-height: 1.37; color: var(--accent); }
.k-card__title  { margin: 2px 0 0; font-weight: var(--w-black); font-size: clamp(32px, 2.6vw, 50px); line-height: 1; color: var(--c-blue); }
.k-card__text   { max-width: 423px; margin-top: 5px; color: var(--c-blue); }
.k-card__btn    { margin-top: 15px; }

/* ---- The carousel ---------------------------------------------------
   The slides are absolute and placed around the centre by their own
   --k-offset, which assets/js/home.js writes once it has laid them out and
   marked the slider ready.
   ------------------------------------------------------------------- */

.k-slider {
	--k-sw: clamp(260px, 26.6vw, 511px);
	--k-gap: clamp(16px, 1.56vw, 30px);
	--k-lift: calc(var(--k-sw) * 0.127);
	margin-top: clamp(40px, 4.5vw, 87px);
}

.k-slider__track { position: relative; height: calc(var(--k-sw) * 0.667 + max(106px, var(--k-lift) + 40px)); }

.k-slide {
	--k-offset: 0;
	position: absolute;
	top: 0;
	left: 50%;
	width: var(--k-sw);
	transform: translate(calc(-50% - var(--k-offset) * var(--k-spread, 1) * (var(--k-sw) + var(--k-gap))), var(--k-lift));
	transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .3s;
}

/* A slide that wrapped around the set jumps rather than flying across. */
.k-slide.is-jump { transition: none; }
.k-slide.is-far  { opacity: 0; pointer-events: none; }

.k-slide__media {
	position: relative;
	display: block;
	aspect-ratio: var(--ratio-article);
	overflow: hidden;
	background: #d9d9d9;
}

/* A veil over everything but the centre slide. */
.k-slide__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(217, 217, 217, .6);
	transition: opacity .6s;
}

.k-slide__img { width: 100%; height: 100%; object-fit: cover; }
.k-slide__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, #e7ebee, #c9d3d9); }

.k-slide__body  { margin-top: 11px; text-align: right; transition: margin .4s; }
.k-slide__title { margin: 0; font-weight: var(--w-bold); font-size: 20px; line-height: 1.45; color: rgb(15 37 70 / .6); }
.k-slide__title a { transition: color .2s; }
.k-slide__title a:hover { color: var(--accent); }

/* Only the centre slide carries its description. */
.k-slide__desc { display: none; margin: 5px 0 0; max-width: 466px; font-size: var(--fs-body); line-height: 1.36; color: var(--c-blue); }

.k-slide.is-active { transform: translate(-50%, 0); z-index: 2; }
.k-slide.is-active .k-slide__media::after { opacity: 0; }
.k-slide.is-active .k-slide__body { margin-top: 23px; }
.k-slide.is-active .k-slide__title { color: var(--c-blue); }
.k-slide.is-active .k-slide__desc { display: block; }

.k-slider__nav { display: flex; justify-content: center; gap: 20px; margin-top: clamp(32px, 4.4vw, 84px); }

.k-slider__arrow {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	color: var(--c-blue);
	cursor: pointer;
	line-height: 0;
	transition: color .2s;
}

.k-slider__arrow svg { width: clamp(52px, 3.6vw, 69px); height: auto; }
.k-slider__arrow:hover { color: var(--accent); }

/*
 * Before the script has laid them out, the slides are a plain row that
 * scrolls with a finger or a trackpad. Left absolute they would all sit on
 * the centre with their titles printed over each other, which is what the
 * block editor shows and what a visitor with no scripting would get.
 * The arrows go with them: an arrow that moves nothing is worse than none.
 */
.k-slider:not(.is-ready) .k-slider__track {
	display: flex;
	gap: var(--k-gap);
	height: auto;
	overflow-x: auto;
	padding-bottom: 4px;
	scrollbar-width: none;
}

.k-slider:not(.is-ready) .k-slider__track::-webkit-scrollbar { display: none; }

.k-slider:not(.is-ready) .k-slide {
	position: static;
	flex: 0 0 var(--k-sw);
	transform: none;
}

.k-slider:not(.is-ready) .k-slide__media::after { opacity: 0; }
.k-slider:not(.is-ready) .k-slide__body { margin-top: 23px; }
.k-slider:not(.is-ready) .k-slide__title { color: var(--c-blue); }
.k-slider:not(.is-ready) .k-slide__desc { display: block; }
.k-slider:not(.is-ready) .k-slider__nav { display: none; }

/* =========================================================
   About teaser
   ========================================================= */

.k-about { padding-top: clamp(56px, 7.1vw, 136px); padding-bottom: clamp(56px, 7.9vw, 152px); }

.k-about__icon { display: block; width: 42px; height: 72px; color: var(--c-blue); }
.k-about__icon svg { width: 42px; height: 72px; }
.k-about__title { margin-top: 9px; }
.k-about__text  { max-width: 767px; margin-top: 2px; }
.k-about__btn   { margin-top: 48px; }

/* The picture the client supplies: beside the text on desktop (left in RTL), below it on mobile. */
.k-about--media .k-about__in { display: grid; gap: 40px; }
.k-about__media img { display: block; width: 100%; height: auto; }

@media (min-width: 1024px) {
	.k-about--media .k-about__in {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
		gap: clamp(40px, 5vw, 96px);
	}
}

/* =========================================================
   Motion layer
   =========================================================
   Everything here is scoped to html.k-motion, which is set in the document
   head unless the visitor has asked their system for less motion, and is
   never set in the editor. assets/js/motion.js owns the timelines.
   ========================================================= */

/* Hidden before the first paint; the intro reveals them.
 *
 * The reveal is .k-motion-shown, set by motion.js the moment the intro has
 * been built, and never a GSAP inline style. An inline `visibility` would be
 * the hero's single point of failure: anything that clears or reverts a GSAP
 * property later (a clearProps, a matchMedia context being torn down) would
 * drop it, and the rule below would hide the text again for good. */
.k-motion:not( .k-motion-shown ) .site-header,
.k-motion:not( .k-motion-shown ) .k-hero__deco,
.k-motion:not( .k-motion-shown ) .k-hero__content,
.k-motion:not( .k-motion-shown ) .k-hero + .k-episodes .k-seasonbar { visibility: hidden; }

/*
 * If the motion script never arrives, nothing would ever reveal them. The
 * head script removes .k-motion after a beat unless motion.js has claimed
 * it, so a failed download is a still hero rather than an empty one.
 */

/* ---- Stroke text ----------------------------------------------------
   The title words, redrawn as SVG so each letter's outline can be written
   on. The HTML word stays in place for layout and for screen readers, and
   stops being painted.
   ------------------------------------------------------------------- */

.stroke-text { display: block; width: 100%; line-height: 0; }
.stroke-text__svg { display: block; width: 100%; height: var(--stroke-text-height, 160px); }
.stroke-text__stroke,
.stroke-text__fill { user-select: none; }

.k-hero__outline .stroke-text__fill { fill: var(--text-invert); stroke: none; }
.k-hero__outline .stroke-text__stroke { fill: none; stroke: var(--c-blue); stroke-linejoin: round; }

.k-hero__outline.has-svg {
	position: relative;
	color: transparent;
	-webkit-text-stroke: 0 transparent;
}

.k-hero__accent.has-svg { position: relative; color: transparent; }

.k-hero__outline.has-svg .stroke-text,
.k-hero__accent.has-svg .stroke-text { position: absolute; inset: 0; }

.k-hero__outline.has-svg .stroke-text__svg,
.k-hero__accent.has-svg .stroke-text__svg { overflow: visible; }

/* ---- Jelly radio on the topic chips ---------------------------------
   One navy blob marks the chosen topic and stretches across to the next
   one. It carries a white copy of every label ("ink"), so a label the blob
   passes over turns white instead of disappearing under it.
   ------------------------------------------------------------------- */

.k-chips.has-jelly { position: relative; }

.k-chips__jelly {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	overflow: hidden;
	background: var(--c-blue);
	pointer-events: none;
	will-change: transform, width;
}

.k-chips__ink { position: absolute; top: 0; left: 0; }

.k-chips__ink-chip {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1;
	color: var(--text-invert);
	white-space: nowrap;
}

/* The blob is the mark now, so the chip under it keeps its resting look. */
.has-jelly button.k-chip[aria-pressed="true"] { background: var(--surface); color: var(--c-blue); }

/* ---- Carousel drift -------------------------------------------------- */
/* The centre image drifts with the scroll. --k-par runs from -1 to 1. */
.k-motion .k-slide__img { transform: translateY(calc(var(--k-par, 0) * 3%)) scale(1.08); }

/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 1199px) {
	.k-ep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.k-card { flex-basis: 480px; }
}

@media (max-width: 1023px) {
	.k-toolbox__top { flex-direction: column; align-items: stretch; }
	.k-toolbox__intro { flex: none; margin-top: 0; }
	.k-card { flex: none; width: 100%; }
	.k-container { width: min(var(--container), 100% - 2 * var(--gutter)); }
}

@media (max-width: 767px) {
	.k-ep-grid { grid-template-columns: minmax(0, 1fr); }
	.k-seasonbar { flex-wrap: wrap; padding-block: 12px; }
	.k-card { padding: 32px 24px; }
	.k-card__title,
	.k-toolbox__title { line-height: 1.1; }
	.k-slider { --k-sw: 78vw; --k-gap: 14px; }
	.k-slide__desc { max-width: none; }
}

/*
 * Anyone who asked their system to calm down gets a still page. The motion
 * layer never runs for them, and the CSS transitions stop too.
 */
@media (prefers-reduced-motion: reduce) {
	.k-slide,
	.k-slide__body,
	.k-slide__media::after,
	.k-btn::before,
	.glide-select__pill,
	.glide-select__check,
	.k-seasonbar__caret { transition: none; }

	.glide-select__menu[data-state="open"],
	.glide-select__menu[data-state="closed"],
	.glide-select[data-swap] .glide-select__label { animation: none; }
}


/* Tablet frame (744 comp): the bar is 72 tall and 20 in from each edge. */
@media (min-width: 600px) and (max-width: 1023px) {
	.k-hero + .k-episodes { --bar-h: calc(72 * var(--t)); }
	.k-hero + .k-episodes .k-seasonbar { margin-inline: calc((100vw - 744 * var(--t)) / 2 + 20 * var(--t) - var(--gutter)); }
}

/*
 * Tablet: the season bar and the hero's type share the page's own side margin, so they line up with the
 * sections below instead of the comp's 20 and 22.
 */
@media (min-width: 600px) and (max-width: 1023px) {
	.k-hero + .k-episodes { --bar-h: calc(72 * var(--t)); }
	.k-hero + .k-episodes .k-seasonbar { margin-inline: 0; }
}