.marquee-ticker {
	border-block: 1px solid var(--mega-media-border);
	padding-block: 0;
	background-color: var(--bg);
}

.marquee-ticker__container {
	max-inline-size: none;
	padding-inline: 0;
	mask-image: none;
	-webkit-mask-image: none;
}

.marquee-ticker__track {
	animation-duration: 42s;
}

.marquee-ticker__group {
	gap: 0;
	padding-inline-end: 0;
}

.marquee-ticker__item {
	display: grid;
	grid-template-rows: auto auto;
	align-content: center;
	gap: var(--s-2);
	min-block-size: var(--s-11);
	padding-block: var(--s-4);
	padding-inline: var(--s-7);
	border-inline-end: 1px solid var(--mega-media-border);
	background-color: var(--bg);
}

.marquee-ticker__item:hover {
	background-color: var(--bg-tint);
}

.marquee-ticker__badge {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	color: var(--accent);
	font-size: var(--fs-micro);
	font-weight: var(--fw-subhead);
	line-height: var(--lh-small);
	letter-spacing: var(--tracking-micro);
	text-transform: uppercase;
}

.marquee-ticker__text {
	display: block;
	color: var(--ink-900);
	font-size: var(--fs-h4);
	font-weight: var(--fw-ui);
	line-height: var(--lh-heading);
}

/* MOBILE-FIRST (§8.13). Below --bp-md the ticker is a swipeable row rather
   than an animated marquee, so the scroll affordances are the base state and
   the 768px query hands the track back to the animation. Written the other
   way round originally, as a `max-width: 767px` override. */
.marquee-ticker__container {
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
	/* Native gesture arbitration must remain available in both axes. `pan-x`
	   alone made a touch that started on the ticker ineligible to become page
	   scroll, so a thumb crossing this band appeared to freeze vertical
	   scrolling. `auto` keeps the row horizontally swipeable while allowing a
	   predominantly vertical gesture to continue scrolling the page, and it
	   preserves browser pinch-zoom behaviour. */
	touch-action: auto;
	-webkit-overflow-scrolling: touch;
}

.marquee-ticker__container::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.marquee-ticker__container {
		/* Back to main.css's clipped marquee: the track runs continuously and
		   must not paint outside the masked container. NOT `visible` — that
		   would let the duplicated track spill and add a horizontal scrollbar. */
		overflow-x: hidden;
		overflow-y: hidden;
		overscroll-behavior-inline: auto;
		scrollbar-width: auto;
		touch-action: auto;
	}
}