/*
 * "Page not found" (templates/404.html). Redesign POC (soft editorial): on paper, a "(page not found)"
 * kicker and display title, then the message in light Inter beside a thin crimson rule, set in from the
 * left like a caption. The words are unchanged.
 */

.sr-404 {
	padding: 0 0 8vw;
}

.sr-404 > .sr-404__head {
	padding-bottom: 4vw !important;
}

/* The message: a narrow column with a crimson rule, starting a quarter of the way in on desktop. */
.sr-404 > .sr-404__body {
	max-width: 38em;
	margin: 0 0 0 calc(var(--sr-gutter) + 25vw);
	font-family: var(--wp--preset--font-family--label);
	font-size: clamp(1.05rem, 1.25vw, 1.25rem);
	font-weight: 300;
	line-height: 1.6;
}

.sr-404__body > * {
	margin-block: 0;
}

.sr-404__body > * + * {
	margin-top: 1.2em;
}

.sr-404__body > ul {
	padding-inline-start: 1.2em;
}

.sr-404__body > ul > li + li {
	margin-top: 0.4em;
}

.sr-404__body li::marker {
	color: var(--wp--preset--color--accent-1);
}

.sr-404__body a {
	color: var(--wp--preset--color--accent-1);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.sr-404__body a:hover,
.sr-404__body a:focus-visible {
	text-decoration: none;
}

@media (max-width: 781px) {
	.sr-404 {
		padding-bottom: 64px;
	}

	.sr-404 > .sr-404__head {
		padding-bottom: 36px !important;
	}

	.sr-404 > .sr-404__body {
		margin: 0 var(--sr-gutter);
	}
}