.pagination {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
	justify-content: center;
	/* The default markup sat flush against the cards above and the footer below. */
	padding-block: var(--spacing-40) var(--spacing-60);

	.page-numbers {
		align-items: center;
		border-radius: var(--btn-radius);
		color: var(--purple);
		display: inline-flex;
		font-size: var(--step-0);
		font-weight: 600;
		justify-content: center;
		/* A fixed height with a matching min-width makes single digits circles and
		lets longer labels grow into pills, echoing the button radius. */
		block-size: 38px;
		min-inline-size: 38px;
		padding-inline: var(--spacing-5);
		text-decoration: none;
		transition:
			background-color 0.2s ease-in-out,
			color 0.2s ease-in-out;
	}

	a.page-numbers {
		&:hover,
		&:focus-visible {
			background-color: var(--seafoam);
		}
	}

	/* Matches the filled red of .btn so the active page reads as the anchor. */
	.current {
		background: color-mix(in srgb, var(--red) 80%, #000);
		color: var(--white);
	}

	/* The gap is the separator here, so the ellipsis only needs its own width.
	Qualified with .page-numbers to outrank the sizing in the media query below,
	which would otherwise win on source order and pad this back out to a full cell. */
	.page-numbers.dots {
		block-size: auto;
		color: color-mix(in srgb, var(--purple) 55%, transparent);
		min-inline-size: 0;
		padding-inline: var(--spacing-5);
	}

	/* Qualified with a to match the specificity of the a.page-numbers hover above,
	so source order decides and these keep the red treatment rather than the
	seafoam one. */
	a.prev,
	a.next {
		color: var(--red);
		font-size: var(--step--1);
		letter-spacing: 0.02em;
		padding-inline: var(--spacing-20);
		text-transform: uppercase;

		&:hover,
		&:focus-visible {
			background-color: color-mix(in srgb, var(--red) 80%, #000);
			color: var(--white);
		}
	}

	@media (width > 480px) {
		gap: var(--spacing-5);

		.page-numbers {
			block-size: 44px;
			min-inline-size: 44px;
			padding-inline: var(--spacing-10);
		}
	}
}