/*
 * "Page not found" (templates/404.html, #153). Measured on Squarespace's page (e.g. /no-such-page) at
 * 1440 and 390px wide: one crimson section under the header with the message in body text, 3vw from the
 * window's edges and the footer, and cream links without an underline.
 */

.sr-404 {
	/* No margin collapsing through the section: the first paragraph's margin stays inside the red. */
	display: flow-root;
	/*
	 * 3vw all round. Squarespace's header box is 6px taller than ours on desktop, so 6px more on top keeps
	 * the text at the same height. The bottom adds the last paragraph's 16px margin, which WordPress removes.
	 */
	padding: calc(3vw + 6px) 3vw calc(3vw + 16px);
	/* Squarespace body text: 19.456px at 1440px wide, 18.16px at 390px. */
	font-size: clamp(18.16px, 17.68px + 0.1234vw, 19.456px);
	line-height: 1.6;
}

.sr-404 > p {
	margin-block: 16px;
}

.sr-404 > ul {
	margin-block: 1em;
	padding-inline-start: 40px;
}

.sr-404 > ul > li {
	margin-block: 0;
}

.sr-404 a,
.sr-404 a:hover {
	color: var(--wp--preset--color--accent-3);
	text-decoration: none;
}

@media (max-width: 781px) {
	.sr-404 {
		padding-top: 3vw;
	}
}