:root {
	--vj-maintenance-navy: #042A37;
	--vj-maintenance-navy-deep: #06212A;
	--vj-maintenance-copper: #CBA47F;
	--vj-maintenance-amber: #E7AF77;
	--vj-maintenance-paper: #F7F5F1;
	--vj-maintenance-serif: "Iowan Old Style", "Baskerville", "Georgia", serif;
}

*, *::before, *::after {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
}

body {
	margin: 0;
	background: var(--vj-maintenance-navy);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.vj-maintenance-page {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 100svh;
	padding: 32px;
	overflow: hidden;
	background:
		radial-gradient(circle at 72% 18%, rgba(11, 59, 74, .72), transparent 35%),
		radial-gradient(circle at 18% 82%, rgba(203, 164, 127, .08), transparent 30%),
		var(--vj-maintenance-navy);
}

.vj-maintenance-page::before,
.vj-maintenance-page::after {
	position: absolute;
	content: "";
	border: 1px solid rgba(231, 175, 119, .16);
	border-radius: 50%;
	pointer-events: none;
}

.vj-maintenance-page::before {
	width: min(88vw, 920px);
	aspect-ratio: 1;
	right: -25vw;
	bottom: -44vw;
	box-shadow:
		0 0 0 44px rgba(203, 164, 127, .05),
		0 0 0 88px rgba(203, 164, 127, .035),
		0 0 0 132px rgba(203, 164, 127, .02);
}

.vj-maintenance-page::after {
	width: min(58vw, 620px);
	aspect-ratio: 1;
	left: -30vw;
	top: -32vw;
	opacity: .55;
}

.maintenance-frame {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: min(100%, 440px);
	padding: clamp(34px, 7vw, 56px) clamp(24px, 6vw, 48px) clamp(38px, 8vw, 62px);
	border: 1px solid rgba(231, 175, 119, .36);
	background: linear-gradient(145deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025));
	box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
}

.maintenance-frame::before {
	position: absolute;
	inset: 12px;
	border: 1px solid rgba(255, 255, 255, .09);
	content: "";
	pointer-events: none;
}

.maintenance-logo {
	position: relative;
	display: grid;
	place-items: center;
	width: clamp(178px, 42vw, 244px);
	height: clamp(178px, 42vw, 244px);
	margin-bottom: clamp(28px, 5vw, 38px);
	padding: 13px;
	border: 1px solid rgba(231, 175, 119, .48);
	border-radius: 50%;
	background: rgba(247, 245, 241, .97);
	box-shadow: 0 18px 48px rgba(0, 0, 0, .22), 0 0 0 11px rgba(203, 164, 127, .06);
}

.maintenance-logo::after {
	position: absolute;
	inset: 10px;
	border: 1px dashed rgba(203, 164, 127, .56);
	border-radius: 50%;
	content: "";
	pointer-events: none;
}

.maintenance-logo picture,
.maintenance-logo img {
	position: relative;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
}

.maintenance-logo img {
	border-radius: 50%;
	object-fit: cover;
}

.maintenance-name {
	position: relative;
	margin: 0;
	color: #FFFFFF;
	font-family: var(--vj-maintenance-serif);
	font-size: clamp(2rem, 6vw, 3.2rem);
	font-weight: 500;
	letter-spacing: -.045em;
	line-height: .95;
	text-align: center;
	text-wrap: balance;
}

.maintenance-name::before {
	display: block;
	width: 38px;
	height: 1px;
	margin: 0 auto 22px;
	background: var(--vj-maintenance-amber);
	content: "";
}

@media (max-width: 560px) {
	.vj-maintenance-page {
		padding: 18px;
	}

	.maintenance-frame {
		width: min(100%, 390px);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.maintenance-frame {
		animation: maintenance-arrive 700ms cubic-bezier(.16, 1, .3, 1) both;
	}

	.maintenance-logo {
		animation: maintenance-logo-arrive 850ms cubic-bezier(.16, 1, .3, 1) 100ms both;
	}
}

@keyframes maintenance-arrive {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes maintenance-logo-arrive {
	from {
		opacity: 0;
		transform: scale(.96);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}