.story-slider {
	/* --story-card-bg and --story-accent come from the chosen colour, see render.php. */
	--story-gap: 16px;
	--story-radius: 24px;
	--story-padding: 24px;

	/* Break out of the narrow article column to the page container, keeping clear of the 200px TOC. */
	--story-width: max(100%, min(1160px, 100vw - 448px));

	container-type: inline-size;
	/* The slick list bleeds into the gutter; clip only x so the fade-up can still overflow vertically. */
	overflow-x: clip;
	width: var(--story-width);
	margin-block: 60px;
	margin-left: calc((100% - var(--story-width)) / 2);
	color: #000;
}

/* Without the TOC beside the article, run to the screen edges; the padding keeps the header and first card
   aligned with the text column. */
@media (max-width: 991.98px) {
	.story-slider {
		--story-width: 100vw;

		padding-inline: calc((100vw - 100%) / 2);
	}

	.story-slider .slick-list,
	.story-slider .story-slider__track:not(.slick-initialized) {
		overflow: visible;
	}
}

@media (min-width: 768px) {
	.story-slider {
		--story-gap: 32px;
		--story-radius: 40px;
		--story-padding: 32px;

		margin-block: 90px;
	}
}

/* Header */

.story-slider__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}

@media (min-width: 768px) {
	.story-slider__header {
		margin-bottom: 32px;
	}
}

.story-slider__title {
	margin: 0;
	font-size: clamp(28px, 4cqi, 40px);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.story-slider__accent {
	color: var(--story-accent);
}

.story-slider__nav {
	display: flex;
	flex-shrink: 0;
	gap: 8px;
}

.story-slider__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 48px;
	padding: 0;
	border: 2px solid #000;
	border-radius: 999px;
	background: transparent;
	color: #000;
	cursor: pointer;
	transition: background-color .3s, border-color .3s, color .3s;
}

.story-slider__arrow svg {
	width: 24px;
	height: 24px;
}

@media (max-width: 767.98px) {
	.story-slider__arrow {
		width: 56px;
		height: 40px;
	}

	.story-slider__arrow svg {
		width: 20px;
		height: 20px;
	}
}

.story-slider__arrow--prev svg {
	transform: scaleX(-1);
}

.story-slider__arrow:hover:not(.slick-disabled),
.story-slider__arrow:focus-visible:not(.slick-disabled) {
	border-color: #3d3d3d;
	background-color: #3d3d3d;
	color: #fff;
}

/* The theme hides disabled .slick-arrows with !important from a stylesheet loaded after this one, so outrank it.
   Slick marks both arrows .slick-hidden when all slides fit. */
.story-slider .story-slider__arrow.slick-disabled,
.story-slider .story-slider__arrow.slick-hidden {
	display: inline-flex !important;
	border-color: #d0d0d0;
	color: #d0d0d0;
	cursor: default;
	pointer-events: none;
}

/* Track: flex fallback for the editor preview and before slick has initialised. Mirrors slick's slide widths
   (slidesToShow in view.js over the list, which is one gap wider), so the cards don't resize when slick takes
   over. No negative margin like the list: the theme's show-on-scroll transitions all properties, so slick would
   measure a margin that is still animating. */

.story-slider__track:not(.slick-initialized) {
	display: flex;
	overflow: hidden;
}

.story-slider__track:not(.slick-initialized) > .story-slider__slide {
	flex: 0 0 calc((100% + var(--story-gap)) / 1.2);
	padding-right: var(--story-gap);
}

@container (min-width: 560px) {
	.story-slider__track:not(.slick-initialized) > .story-slider__slide {
		flex-basis: calc((100% + var(--story-gap)) / 2.2);
	}
}

@container (min-width: 880px) {
	.story-slider__track:not(.slick-initialized) > .story-slider__slide {
		flex-basis: calc((100% + var(--story-gap)) / 3);
	}
}

/* Adds a fade to the theme's show-on-scroll slide-up; its transition does the fading. */
body.animations .story-slider__track.show-on-scroll:not(.come-in) {
	opacity: 0;
}

/* The theme transitions all properties on show-on-scroll; keep slick's layout changes (dot space) instant. */
body.animations .story-slider .story-slider__track.story-slider__track.show-on-scroll {
	transition-property: opacity, transform, visibility;
}

/* Slick adds the dots after init (and not at all when every slide fits), so keep their 32px free up front to
   stop the content below from shifting. Doubled class to beat the theme's .slick-slider.slick-dotted margin. */
.story-slider .story-slider__track.story-slider__track {
	margin-bottom: 32px;
}

.story-slider .story-slider__track.story-slider__track.slick-dotted {
	margin-bottom: 0;
}

.story-slider .slick-list {
	margin-right: calc(var(--story-gap) * -1);
}

/* Slick centres the track when all slides fit; keep them aligned with the header. */
.story-slider .slick-track {
	display: flex;
	margin-left: 0;
}

.story-slider .slick-slide {
	height: auto;
	padding-right: var(--story-gap);
}

/* Card */

.story-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--story-radius);
	background-color: var(--story-card-bg);
	container-type: inline-size;
}

.story-card__image {
	position: relative;
	flex-shrink: 0;
	aspect-ratio: 7 / 5;
	overflow: hidden;
	background-color: var(--story-card-bg);
}

.story-card__image::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: #000;
	opacity: 0;
	transition: opacity .6s ease;
	pointer-events: none;
}

.story-card:hover .story-card__image::after {
	opacity: .2;
}

.story-card__image img {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 0;
	object-fit: cover;
	transition: transform .6s ease;
}

.story-card:hover .story-card__image img {
	transform: scale(1.05);
}

.story-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--story-padding);
}

.story-card__label {
	margin-bottom: 24px;
	padding: 5px 12px;
	border-radius: 6px;
	background-color: var(--story-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}

.story-card__title {
	margin: 0 0 24px;
	font-size: clamp(22px, 8.2cqi, 32px);
	font-weight: 500;
	line-height: 1.25;
	letter-spacing: -.02em;
}

.story-card__text {
	margin-bottom: 32px;
	font-size: 16px;
	line-height: 1.6;
}

@media (min-width: 768px) {
	.story-card__label,
	.story-card__title {
		margin-bottom: 32px;
	}

	.story-card__text {
		margin-bottom: 48px;
		font-size: 17px;
	}
}

.story-card__button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;
	padding: 12px 24px;
	border-radius: 999px;
	background-color: #000;
	color: #fff;
	font-size: 16px;
	font-weight: 500;
	line-height: 24px;
	text-decoration: none;
	transition: background-color .3s ease-in-out;
}

.story-card__button:hover,
.story-card__button:focus {
	color: #fff;
	text-decoration: none;
}

/* Stretches the link over the whole card, so hovering anywhere triggers the button animation. */
.story-card__button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.story-card__button:focus-visible {
	outline: none;
}

.story-card__button:focus-visible::before {
	border-radius: var(--story-radius);
	outline: 2px solid var(--story-accent);
	outline-offset: -2px;
}

.story-card__arrow {
	display: inline-flex;
	overflow: hidden;
}

.story-card__arrow svg {
	width: 16px;
	height: 16px;
}

.story-card__button:hover .story-card__arrow svg,
.story-card__button:focus-visible .story-card__arrow svg {
	animation: story-arrow-through .5s ease-in-out;
}

/* Dots — doubled class to beat the theme's article ul/li styles. */

.story-slider .story-slider__dots.story-slider__dots {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
	line-height: 0;
}

.story-slider .story-slider__dots.story-slider__dots li {
	margin: 0;
	padding: 0;
}

.story-slider .story-slider__dots.story-slider__dots li::before {
	content: none;
}

.story-slider__dots button {
	display: block;
	width: 8px;
	height: 8px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background-color: #d0d0d0;
	color: transparent;
	font-size: 0;
	cursor: pointer;
	transition: width .3s, background-color .3s;
}

.story-slider__dots button:hover {
	background-color: #bbb;
}

.story-slider__dots .slick-active button {
	width: 24px;
	background-color: #000;
}

@keyframes story-arrow-through {
	0% {
		transform: translateX(0);
	}

	45% {
		transform: translateX(120%);
	}

	46% {
		transform: translateX(-120%);
	}

	100% {
		transform: translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.story-card__button .story-card__arrow svg {
		animation: none !important;
	}

	.story-slider__arrow,
	.story-slider__dots button,
	.story-card__image img,
	.story-card__image::after {
		transition: none;
	}

	.story-card:hover .story-card__image img {
		transform: none;
	}

	/* The theme's show-on-scroll transition outranks a plain selector. */
	body.animations .story-slider__track.show-on-scroll {
		transition: none !important;
	}
}