/* ============================================================
   The 404 page (404.php): "404 page" design, desktop 1440 only
   (docs/notes/nav-and-pages.md 10). A centred block on flat Secondary
   Navy, 576px tall at 1440, then the shared CTA band.

   - "404": Koulen 64 White (56 on phones, --fs-error-code).
   - H1: Koulen 48 White (36 on phones, --fs-h2), "404"'s caps 59px
     above the H1's.
   - Text: Poppins 16/24 in Cream at about 90% (--color-text-on-hero-
     muted), 583px wide at most (two centred lines at 1440).
   - "Back To Home": the arrow link, SemiBold 16 White. Hover and
     keyboard focus slide its arrow and turn it Light Orange; the label
     stays White (Light Orange text on Secondary Navy is 4.42:1).
   - Phones and tablets (not designed): the same block, the type
     scaled down, the section padding.
   ============================================================ */

.error-404 {
	padding-block: var(--error-404-pad-top) var(--error-404-pad-bottom);
	background-color: var(--color-surface-hero);
	color: var(--color-heading-on-dark);
	text-align: center;
	--error-404-pad-top: calc(var(--section-pad-y) + 14px);    /* 126 at 1440: the block's top to the 404's caps 133, as drawn */
	--error-404-pad-bottom: calc(var(--section-pad-y) + 25px); /* 137 at 1440: the link's ink to the block's foot 145 (576px tall) */
}

.error-404__code,
.error-404__title {
	color: var(--color-heading-on-dark);
	font-family: var(--font-display);
	font-weight: var(--fw-display);
	font-synthesis: none;
	line-height: 1;
	text-transform: uppercase;
}

.error-404__code {
	font-size: var(--fs-error-code);
}

.error-404__title {
	margin-top: 42px; /* the 404's caps 59px above the H1's */
	font-size: var(--fs-h2);
	text-wrap: balance;
}

.error-404__text {
	max-width: 36.5rem;
	margin: 39px auto 0; /* the H1's caps 53px above the text's ink */
	color: var(--color-text-on-hero-muted);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
}

.error-404__link {
	margin-top: 48px; /* the text's last line 61px above the link's ink */
	color: var(--color-heading-on-dark);
}

.error-404__link:focus-visible {
	outline-color: var(--color-focus);
}

.error-404__link:focus-visible .icon {
	color: var(--color-link-hover-on-dark);
}

@media (hover: hover) {
	.error-404__link:hover .icon {
		color: var(--color-link-hover-on-dark);
	}
}