/*
 * Page not found (ADR 0097): the 404 page's section. Centered; Text + icon (an icon picture at the end side on a
 * soft light glow, so it also reads on dark backgrounds); Text + picture (the picture fills the section's end half
 * to the screen's edge and its whole height; under the text on phones).
 */
.sv-not-found {
	--sv-not-found-justify: center;
	display: grid;
	gap: var(--sv-space-lg);
	align-items: center;
}

.sv-not-found__content {
	display: grid;
	gap: var(--sv-space-sm);
	justify-items: var(--sv-not-found-justify);
	min-inline-size: 0;
	text-align: center;
}

.sv-not-found--layout-centered .sv-not-found__content {
	inline-size: min(100%, 44rem);
	margin-inline: auto;
}

.sv-not-found--layout-icon,
.sv-not-found--layout-picture {
	--sv-not-found-justify: start;
}

:is(.sv-not-found--layout-icon, .sv-not-found--layout-picture) .sv-not-found__content {
	text-align: start;
}

.sv-not-found__code {
	margin: 0;
	color: var(--sv-accent, var(--sv-color-link));
	font-family: var(--sv-font-number, var(--sv-font-heading));
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	font-size: clamp(6rem, 16vw, 10rem);
	line-height: calc(1 * var(--sv-leading, 1));
	letter-spacing: calc(-0.02em * var(--sv-tracking, 1));
}

.sv-not-found--layout-picture .sv-not-found__code {
	font-size: clamp(5rem, 10vw, 7rem);
}

.sv-not-found__title {
	margin: 0;
	font-family: var(--sv-font-heading);
	font-weight: var(--sv-font-heading-weight, 700);
	font-synthesis-weight: none;
	font-size: var(--sv-size-h2);
	line-height: calc(1.15 * var(--sv-leading, 1));
	letter-spacing: calc(var(--sv-font-heading-tracking, 0em) * var(--sv-tracking, 1));
	overflow-wrap: break-word;
}

.sv-not-found__message {
	max-inline-size: 36rem;
	margin: 0;
	color: var(--sv-color-muted);
	font-size: calc(var(--sv-size-body) * 1.1);
}

.sv-not-found__search {
	margin-block-start: 0.5rem;
}

.sv-not-found__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: var(--sv-not-found-justify);
}

.sv-not-found__actions:empty {
	display: none;
}

/* The links: a thin line above, then the lines side by side, wrapping. */
.sv-not-found__links {
	display: grid;
	gap: 0.6rem;
	justify-items: var(--sv-not-found-justify);
	inline-size: min(100%, 36rem);
	margin-block-start: var(--sv-space-sm);
	padding-block-start: var(--sv-space-sm);
	border-block-start: 1px solid var(--sv-color-border);
}

.sv-not-found__links-title {
	margin: 0;
	color: var(--sv-color-muted);
	font-size: var(--sv-size-small);
}

.sv-not-found .sv-not-found__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	justify-content: var(--sv-not-found-justify);
}

/* Text + icon: the icon picture on a soft light glow. */
.sv-not-found__art {
	position: relative;
	display: grid;
	place-items: center;
}

.sv-not-found__art::before {
	position: absolute;
	inset: 5% 0;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgb(255 255 255 / 88%) 45%, rgb(255 255 255 / 0%));
	content: "";
	pointer-events: none;
}

.sv-not-found__art-img {
	display: block;
	inline-size: min(100%, 34rem);
	max-inline-size: none;
	block-size: auto;
}

.sv-not-found__img {
	display: block;
	inline-size: 100%;
	max-inline-size: none;
	block-size: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.sv-not-found--layout-icon,
	.sv-not-found--layout-picture {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.sv-not-found--layout-picture {
		min-block-size: 30rem;
	}

	.sv-not-found--layout-picture .sv-not-found__content {
		padding-inline-end: var(--sv-space-md);
	}

	/* The picture fills the section's end half (the section is the box it is placed in). */
	.sv-not-found__media {
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: 50%;
		overflow: hidden;
	}
}

@media (max-width: 767px) {
	.sv-not-found__media {
		block-size: 16rem;
		overflow: hidden;
		border-radius: var(--sv-radius-lg);
	}

	/* Text + icon: the icon picture above the text, smaller. */
	.sv-not-found__art {
		order: -1;
		justify-self: start;
	}

	.sv-not-found__art-img {
		inline-size: min(100%, 16rem);
	}
}