/*
 * octaviasoftware.com: one static "closed" page (and its 404 page), in the ArxArma portal's look:
 * near-black, Inter and JetBrains Mono, soft glows, a starfield, Octavia's chevrons as the graphic.
 * The Content-Security-Policy allows no inline styles or scripts and nothing from other sites,
 * so all styling is here, the fonts are self-hosted and the starfield is a static SVG.
 */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("/assets/fonts/inter-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); }

:root {
	color-scheme: dark;
	--bg: #0d0d12;
	--border: rgba(255, 255, 255, 0.08);
	--text: #f0f0f5;
	--text-note: #b9b9ca;   /* stays above 4.5:1 where the orange glow sits behind it */
	--text-sub: #9090a8;
	--violet: #a78bfa;
	--cyan: #22d3ee;
	--cyan-line: rgba(6, 182, 212, 0.3);
	--radius-sm: 10px;
}

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

body {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--text);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* The portal's two soft glows: violet from the top left, Octavia's orange behind the chevrons. */
body::before,
body::after {
	content: "";
	position: fixed;
	z-index: 0;
	border-radius: 50%;
	filter: blur(100px);
	pointer-events: none;
}

body::before {
	top: -150px;
	left: -150px;
	width: 600px;
	height: 600px;
	background: #8b5cf6;
	opacity: 0.14;
}

body::after {
	top: 50%;
	right: -120px;
	width: 760px;
	height: 760px;
	margin-top: -380px;
	background: #f7931e;
	opacity: 0.2;
}

.stars {
	position: fixed;
	inset: 0;
	z-index: 0;
	background: url("/assets/img/stars.svg") center / cover no-repeat;
	opacity: 0.35;
	pointer-events: none;
}

.chevrons {
	position: fixed;
	top: 50%;
	right: -7vw;
	z-index: 0;
	width: auto;
	height: min(96vh, 62vw);
	transform: translateY(-50%);
	pointer-events: none;
}

main,
footer {
	position: relative;
	z-index: 1;
}

main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 26px;
	max-width: 760px;
	padding: 56px 7vw;
}

/* The logo is the page's heading. */
.brand {
	line-height: 0;
}

.home {
	display: inline-block;
	line-height: 0;
}

.logo {
	display: block;
	width: 210px;
	max-width: 100%;
	height: auto;
}

.label {
	color: var(--violet);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
}

.status {
	margin-left: -0.04em;
	font-size: clamp(4.6rem, 12vw, 10rem);
	font-weight: 800;
	letter-spacing: -0.05em;
	line-height: 0.95;
}

.status--small {
	font-size: clamp(2.8rem, 7vw, 5.5rem);
	letter-spacing: -0.04em;
	line-height: 1;
}

.note {
	max-width: 430px;
	color: var(--text-note);
	font-size: 1.15rem;
	line-height: 1.6;
	text-wrap: balance;
}

.mail {
	display: flex;
	align-items: center;
	gap: 12px;
	width: fit-content;
	min-height: 44px;
	margin-top: 26px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--cyan-line);
	color: var(--cyan);
	font-family: "JetBrains Mono", ui-monospace, Consolas, monospace;
	font-size: clamp(1rem, 2vw, 1.35rem);
	font-weight: 700;
	text-decoration: none;
}

.mail svg {
	flex-shrink: 0;
}

.back {
	color: var(--cyan);
	text-underline-offset: 0.15em;
}

footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 32px;
	border-top: 1px solid var(--border);
}

.copy {
	color: var(--text-sub);
	font-size: 12px;
}

.foot-btn {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	min-height: 32px;
	padding: 5px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-sub);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-decoration: none;
}

a:focus-visible {
	outline: 2px solid var(--cyan);
	outline-offset: 3px;
}

@media (max-width: 900px) {
	.chevrons {
		top: -3vw;
		right: -16vw;
		height: 62vw;
		transform: none;
	}

	main {
		justify-content: flex-end;
		padding: 56px 40px 72px;
	}
}

@media (max-width: 540px) {
	.chevrons {
		top: -6vw;
		right: -22vw;
		height: 88vw;
	}

	main {
		gap: 20px;
		padding: 40px 22px 48px;
	}

	.logo {
		width: 170px;
	}

	.note {
		font-size: 1.05rem;
	}

	.mail {
		margin-top: 20px;
	}

	footer {
		padding: 16px 20px;
	}
}