fix: space Starlight's previous and next links

The word and the page title were split by a <br> only, which a copy,
textContent and an assistant read as "PreviousWhat the packs do not
hold". The override keeps Starlight's look, spaces them, names each link
by direction and page, and makes the pair a navigation landmark.

website/src/components/Pagination.astro

@@ -0,0 +1,87 @@
+---
+// Starlight's previous and next links (its Pagination.astro, 0.42), with a
+// space after the word: the line break alone left "PreviousWhat the packs
+// do not hold" in the page text a copy, a crawler or an assistant reads.
+// Each link is named by its direction and its page, and the pair is a
+// navigation landmark.
+import { Icon } from '@astrojs/starlight/components';
+
+const { dir, pagination } = Astro.locals.starlightRoute;
+const { prev, next } = pagination;
+const isRtl = dir === 'rtl';
+const previousWord = Astro.locals.t('page.previousLink');
+const nextWord = Astro.locals.t('page.nextLink');
+---
+
+<nav class="pagination-links print:hidden" dir={dir} aria-label={`${previousWord} and ${nextWord.toLowerCase()} page`}>
+	{
+		prev && (
+			<a href={prev.href} rel="prev" aria-label={`${previousWord}: ${prev.label}`}>
+				<Icon name={isRtl ? 'right-arrow' : 'left-arrow'} size="1.5rem" />
+				<span>
+					{previousWord}{' '}
+					<br />
+					<span class="link-title">{prev.label}</span>
+				</span>
+			</a>
+		)
+	}
+	{' '}
+	{
+		next && (
+			<a href={next.href} rel="next" aria-label={`${nextWord}: ${next.label}`}>
+				<Icon name={isRtl ? 'left-arrow' : 'right-arrow'} size="1.5rem" />
+				<span>
+					{nextWord}{' '}
+					<br />
+					<span class="link-title">{next.label}</span>
+				</span>
+			</a>
+		)
+	}
+</nav>
+
+<style>
+	@layer starlight.core {
+		.pagination-links {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+			gap: 1rem;
+		}
+
+		a {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			gap: 0.5rem;
+			width: 100%;
+			flex-basis: calc(50% - 0.5rem);
+			flex-grow: 1;
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+			padding: 1rem;
+			text-decoration: none;
+			color: var(--sl-color-gray-2);
+			box-shadow: var(--sl-shadow-md);
+			overflow-wrap: anywhere;
+		}
+		[rel='next'] {
+			justify-content: end;
+			text-align: end;
+			flex-direction: row-reverse;
+		}
+		a:hover {
+			border-color: var(--sl-color-gray-2);
+		}
+
+		.link-title {
+			color: var(--sl-color-white);
+			font-size: var(--sl-text-2xl);
+			line-height: var(--sl-line-height-headings);
+		}
+
+		svg {
+			flex-shrink: 0;
+		}
+	}
+</style>