/*
 * Stories — [stories]
 * Three layouts measured from the original slider: desktop (1110-wide composition), tablet (≤777px,
 * 708-wide) and phone (≤480px, 324-wide). Everything is sized in units of those designs so it scales
 * with the column; the bio box is set in units of its original 965 (desktop) / 603 (phone) artwork.
 */

.stories {
	--ink: #3e3e3e;
	--blue: #5b6bff;
	--green: #41a13f;
	--icon: #f4eeea;
	--arrow: #fdbd14;

	container-type: inline-size;
	position: relative;
	color: var(--ink);
	letter-spacing: normal;
}

.stories .slides {
	position: relative;
	z-index: 1;
	display: grid;
}

/* The original slider ran full-bleed, so its background does too. */
.stories.bg-blue::before {
	content: "";
	position: absolute;
	inset: 0 calc(50% - 50vw);
	background: #d2e4f8;
}

.stories {
	/* The original scaled with the window: min(1, width / 1240, height / 900). */
	--u: calc(min(1110px, 89.516vw, 123.333vh) / 1110);
	--b: calc(var(--u) * 674 / 965);
	--arrow-offset: 595;
}

.stories .slide {
	display: flex;
	grid-area: 1 / 1;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}

.stories .slide.is-active {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.stories .composition {
	position: relative;
	width: calc(1110 * var(--u));
	height: calc(532 * var(--u));
}

.stories .composition > * {
	position: absolute;
	margin: 0;
}

/* Photo (the image carries its own frame) */

.stories .photo {
	top: 0;
	left: 0;
	width: calc(400 * var(--u));
}

.stories .photo img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

/* Green icon badges */

.stories .icon {
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--green);
	color: var(--icon);
}

.stories .icon svg {
	fill: currentColor;
}

/* The badges are tilted and drift slowly on opposite diagonals, as in the original. */
.stories .icon-tree svg {
	transform: rotate(-20deg);
}

.stories .icon-sign svg {
	transform: rotate(15deg);
}

.stories .icon-tree {
	--bob-x: calc(5 * var(--u));
	--bob-y: calc(-10 * var(--u));
}

.stories .icon-sign {
	--bob-x: calc(-5 * var(--u));
	--bob-y: calc(10 * var(--u));
}

@media (prefers-reduced-motion: no-preference) {
	.stories .icon {
		animation: story-icon-bob 3s ease-in-out infinite alternate;
	}
}

@keyframes story-icon-bob {
	from { translate: var(--bob-x) var(--bob-y); }
	to { translate: calc(-1 * var(--bob-x)) calc(-1 * var(--bob-y)); }
}

.stories .icon-tree {
	top: calc(-71 * var(--u));
	left: calc(-3 * var(--u));
	width: calc(100 * var(--u));
	height: calc(100 * var(--u));
}

.stories .icon-tree svg {
	height: calc(46 * var(--u));
}

.stories .icon-sign {
	top: calc(-70 * var(--u));
	left: calc(778 * var(--u));
	width: calc(72 * var(--u));
	height: calc(72 * var(--u));
}

.stories .icon-sign svg {
	height: calc(37 * var(--u));
}

/* Heading: laid out at its artwork size, then scaled to fit its box by stickers.js */

.stories .heading-fit {
	top: calc(24 * var(--u));
	left: calc(435 * var(--u));
	width: calc(675 * var(--u));
	height: calc(137 * var(--u));
}

.stories .heading {
	--tilt: -2deg;

	position: relative;
	flex: none;
	margin: 0;
	padding: 0;
	transform: scale(var(--scale, 0.69)) rotate(var(--tilt));
	color: #fff;
	font-family: "Mosvita Black Expanded", sans-serif;
	font-weight: normal;
	letter-spacing: 0;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
}

.stories .heading .line {
	display: block;
}

.stories .heading .small {
	font-size: 48.5px;
	line-height: 40px;
}

.stories .heading .large {
	font-size: 74.5px;
	line-height: 52px;
}

.stories .heading .small + .large {
	margin-top: -48px;
}

.stories .heading .pill {
	display: inline-block;
	background: var(--blue);
}

.stories .heading .small .pill {
	padding: 36px 46px 26px;
}

.stories .heading .large .pill {
	padding: 34px 28px 24px;
}

.stories .heading .shape {
	display: block;
	color: transparent;
	filter: url(#story-heading-shape);
}

.stories .heading .text {
	position: absolute;
	inset: 0;
}

.stories .heading .text .pill {
	background: none;
}

/* Phone-only "Joined Summer Search" sticker */

.stories .joined {
	display: none;
}

/* Bio box */

.stories .bio {
	top: calc(190 * var(--u));
	left: calc(436 * var(--u));
	width: calc(674 * var(--u));
	padding-top: calc(2.5 * var(--b));
	color: var(--ink);
	text-align: center;
}

.stories .tag {
	position: relative;
	z-index: 1;
	display: block;
	width: fit-content;
	box-sizing: border-box;
	margin: 0 auto calc(-22 * var(--b));
	padding: calc(7 * var(--b)) calc(30 * var(--b));
	border: calc(5 * var(--b)) solid var(--ink);
	border-radius: calc(14.5 * var(--b));
	background: var(--green);
	color: #fff;
	font: 500 calc(22 * var(--b)) / calc(26 * var(--b)) "Roboto Mono", monospace;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.stories .tag .community {
	display: inline;
}

.stories .box {
	box-sizing: border-box;
	padding: calc(46 * var(--b)) calc(34 * var(--b)) calc(28 * var(--b));
	border: calc(5 * var(--b)) solid var(--ink);
	border-radius: calc(22.5 * var(--b));
	background: #fff;
}

.stories .quote {
	margin: 0;
	padding: 0;
	border: 0;
	color: var(--ink);
	font: calc(25 * var(--b)) / calc(34 * var(--b)) "Mosvita Regular", sans-serif;
	letter-spacing: 0.012em;
	text-align: left;
}

.stories .quote::before,
.stories .quote::after {
	content: none;
}

.stories .quote p {
	margin: 0;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
}

.stories .facts {
	display: flex;
	justify-content: center;
	align-items: flex-end;
	gap: calc(44 * var(--b));
	margin: calc(24 * var(--b)) 0 0;
	padding: 0;
	list-style: none;
}

.stories .fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	padding: 0;
	color: var(--ink);
}

.stories .fact::before {
	content: none;
}

.stories .fact.size-number {
	flex: none;
}

.stories .fact .value {
	color: var(--blue);
	font: calc(25.5 * var(--b)) / 1.1 "Mosvita Bold", sans-serif;
	text-decoration: none;
	text-transform: capitalize;
}

.stories .fact a.value:hover,
.stories .fact a.value:focus-visible {
	text-decoration: underline;
}

.stories .facts:has(> .fact:nth-child(3)) .fact:not(.size-number) .value {
	font-size: calc(20.5 * var(--b));
}

.stories .fact.size-large .value {
	font-size: calc(36 * var(--b));
}

.stories .fact.size-number .value {
	font-size: calc(55 * var(--b));
	line-height: 1;
}

.stories .fact .label {
	margin-top: calc(10 * var(--b));
	font: calc(24 * var(--b)) / 1.08 "Mosvita SemiBold", sans-serif;
	text-transform: capitalize;
}

.stories .more {
	display: inline-flex;
	align-items: center;
	gap: calc(24 * var(--b));
	margin-top: calc(22 * var(--b));
	color: var(--ink);
	font: calc(33 * var(--b)) / 1.2 "Mosvita Bold", sans-serif;
	text-decoration: none;
	text-transform: capitalize;
}

.stories .more svg {
	flex: none;
	width: calc(34 * var(--b));
}

.stories .more:hover span,
.stories .more:focus-visible span {
	text-decoration: underline;
}

.stories a:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

/* Arrows: BeTheme styles every <button>, so reset what it adds. */

.stories .arrow {
	position: absolute;
	z-index: 2;
	top: 50%;
	display: grid;
	place-items: center;
	width: 50px;
	height: 50px;
	min-height: 0;
	margin: -25px 0 0;
	padding: 0;
	overflow: visible;
	border: 0;
	border-radius: 50%;
	background: var(--arrow);
	box-shadow: 0 0 0 3px var(--ink);
	color: var(--ink);
	line-height: 1;
	cursor: pointer;
}

.stories .arrow svg {
	width: 40px;
	height: 40px;
	fill: currentColor;
}

/* Arrows sit just outside the composition and move in with it as it scales. */
.stories .prev {
	left: calc(50% - var(--arrow-offset) * var(--u) - 25px);
}

.stories .next {
	right: calc(50% - var(--arrow-offset) * var(--u) - 25px);
}

.stories .arrow:focus-visible {
	outline: 2px solid var(--ink);
	outline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
	.stories .slide,
	.stories .slide.is-active {
		transition: none;
	}
}

/* Laptop (778–1023px): the original's own layout on a 1024 × 768 grid, scaled to fit the window. */
@media (max-width: 1023px) {
	.stories {
		--u: calc(min(100vw, 133.333vh) / 1024);
		--b: calc(var(--u) * 557 / 965);
		--arrow-offset: 470;
	}

	.stories .composition {
		width: calc(849 * var(--u));
		height: calc(371 * var(--u));
	}

	.stories .photo {
		width: calc(279 * var(--u));
	}

	.stories .heading-fit {
		top: calc(-4 * var(--u));
		left: calc(292 * var(--u));
		width: calc(557 * var(--u));
		height: calc(113 * var(--u));
	}

	.stories .bio {
		top: calc(122 * var(--u));
		left: calc(292 * var(--u));
		width: calc(557 * var(--u));
	}

	.stories .icon-tree {
		top: calc(-96.5 * var(--u));
		left: calc(-5.5 * var(--u));
		width: calc(83 * var(--u));
		height: calc(83 * var(--u));
	}

	.stories .icon-tree svg {
		height: calc(38 * var(--u));
	}

	.stories .icon-sign {
		top: calc(-85.5 * var(--u));
		left: calc(726.5 * var(--u));
		width: calc(60 * var(--u));
		height: calc(60 * var(--u));
	}

	.stories .icon-sign svg {
		height: calc(31 * var(--u));
	}
}

/* Tablet: stacked, 708-wide design */
@media (max-width: 777px) {
	/* The original's tablet layout is 1:1 at a 777px window and scales with its width. */
	.stories {
		--u: calc(100vw / 777);
		--b: calc(var(--u) * 399 / 603);
	}

	.stories .composition {
		width: calc(708 * var(--u));
		height: calc(786 * var(--u));
	}

	.stories .heading-fit {
		top: 0;
		left: calc(111 * var(--u));
		width: calc(487 * var(--u));
		height: calc(99 * var(--u));
	}

	.stories .photo {
		top: calc(99 * var(--u));
		left: calc(196 * var(--u));
		width: calc(317 * var(--u));
	}

	.stories .icon-tree {
		top: calc(156 * var(--u));
		left: calc(125 * var(--u));
		width: calc(81 * var(--u));
		height: calc(81 * var(--u));
	}

	.stories .icon-tree svg {
		height: calc(25 * var(--u));
	}

	.stories .icon-sign {
		top: calc(357 * var(--u));
		left: calc(508 * var(--u));
		width: calc(63 * var(--u));
		height: calc(63 * var(--u));
	}

	.stories .icon-sign svg {
		height: calc(22 * var(--u));
	}

	.stories .joined {
		display: block;
		top: calc(156 * var(--u));
		left: calc(439 * var(--u));
		width: calc(140 * var(--u));
	}

	.stories .bio {
		top: calc(480 * var(--u));
		left: calc(155 * var(--u));
		width: calc(399 * var(--u));
	}

	.stories .tag {
		max-width: calc(540 * var(--b));
		margin-bottom: calc(-28 * var(--b));
		padding: calc(9 * var(--b)) calc(34 * var(--b));
		border-radius: calc(15 * var(--b));
		font-size: calc(34.5 * var(--b));
		line-height: calc(35 * var(--b));
		letter-spacing: 0.12em;
	}

	.stories .tag:has(.community) {
		max-width: calc(560 * var(--b));
		font-size: calc(24.5 * var(--b));
	}

	.stories .tag .sep {
		display: none;
	}

	.stories .tag .community {
		display: block;
	}

	.stories .box {
		padding: calc(40 * var(--b)) calc(30 * var(--b)) calc(34 * var(--b));
		border-radius: calc(23.6 * var(--b));
	}

	.stories .quote {
		font-size: calc(32.5 * var(--b));
		line-height: calc(40 * var(--b));
	}

	.stories .facts {
		display: none;
	}

	.stories .more {
		gap: calc(28 * var(--b));
		margin-top: calc(26 * var(--b));
		font-size: calc(33 * var(--b));
		line-height: calc(40 * var(--b));
	}

	.stories .more span {
		max-width: calc(400 * var(--b));
	}

	.stories .prev {
		top: calc(50% - 26 * 100cqw / 708);
		left: 3.1%;
	}

	.stories .next {
		top: calc(50% - 26 * 100cqw / 708);
		right: 4.7%;
	}
}

/* Phone: 324-wide design, heading on three lines */
@media (max-width: 480px) {
	/* The original's phone layout is 1:1 at a 390px window and scales with its width. */
	.stories {
		--u: calc(100vw / 390);
		--b: calc(var(--u) * 269 / 603);
	}

	.stories .composition {
		width: calc(324 * var(--u));
		height: calc(597 * var(--u));
	}

	.stories .heading-fit {
		left: calc(30 * var(--u));
		width: calc(265 * var(--u));
		height: calc(113 * var(--u));
	}

	.stories .heading .large {
		line-height: 68px;
	}

	/* The wrapped phone heading keeps its tighter original spacing. */
	.stories .heading .small .pill {
		padding: 22px 46px 26px;
	}

	.stories .heading .large .pill {
		padding: 8px 28px 30px;
	}

	.stories .heading .small + .large {
		margin-top: -22px;
	}

	.stories .heading .large .pill {
		max-width: 600px;
		white-space: normal;
		overflow-wrap: normal;
		word-break: normal;
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;
	}

	.stories .photo {
		top: calc(98 * var(--u));
		left: calc(48 * var(--u));
		width: calc(228 * var(--u));
	}

	.stories .icon-tree {
		top: calc(133 * var(--u));
		left: calc(20 * var(--u));
		width: calc(61 * var(--u));
		height: calc(61 * var(--u));
	}

	.stories .icon-tree svg {
		height: calc(19 * var(--u));
	}

	.stories .icon-sign {
		top: calc(191 * var(--u));
		left: calc(246 * var(--u));
		width: calc(53 * var(--u));
		height: calc(53 * var(--u));
	}

	.stories .icon-sign svg {
		height: calc(16 * var(--u));
	}

	.stories .joined {
		top: calc(111 * var(--u));
		left: calc(201 * var(--u));
		width: calc(96 * var(--u));
	}

	.stories .bio {
		top: calc(391 * var(--u));
		left: calc(28 * var(--u));
		width: calc(269 * var(--u));
	}

	.stories .prev {
		top: calc(50% - 26 * 100cqw / 324);
		left: 3px;
	}

	.stories .next {
		top: calc(50% - 26 * 100cqw / 324);
		right: -3px;
	}

	.stories .arrow svg {
		width: 32px;
		height: 32px;
	}
}