/*
 * octaviasoftware.com: one static "closed" page (and its 404 page). The logo centred on white,
 * the text in the system's sans-serif, the orange of the logo's chevrons for links. No web fonts;
 * the Content-Security-Policy allows no inline styles, so all styling is here.
 */

:root {
	color-scheme: light;
	--text: #222222;
	--muted: #555555;
	--orange: #b35300; /* the chevrons' orange (#f7931e), darkened to about 5.1:1 on white for text (WCAG AA) */
}

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

html {
	height: 100%;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100%;
	margin: 0;
	padding: 2.5rem 1rem;
	background: #ffffff;
	color: var(--text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 1.125rem;
	line-height: 1.5;
	text-align: center;
}

main {
	width: 100%;
	max-width: 36rem;
}

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

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

.logo--small {
	width: 16rem;
}

.status {
	margin: 2rem 0 0.75rem;
	font-size: 2rem;
	font-weight: 300;
	letter-spacing: 0.02em;
}

.note {
	margin: 0;
	color: var(--muted);
}

a {
	color: var(--orange);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover {
	text-decoration-thickness: 2px;
}

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

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