/* The Order of Ontheon, ontheism.org/order/ (round-2 splash, D-20261011-02). */

@font-face {
	font-family: "Libertinus Serif";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("/order/fonts/LibertinusSerif-Regular.woff2") format("woff2");	/* Full face: true small caps */
}
@font-face {
	font-family: "Libertinus Serif";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url("/order/fonts/LibertinusSerif-Italic.woff2") format("woff2");
}

:root {
	--blue:		#1a237e;
	--gold:		#ffd700;
	--white:	#ffffff;
}

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

html, body {
	margin: 0;
	height: 100%;
}

body {
	background: var(--white);
	color: var(--blue);
	font-family: "Libertinus Serif", Georgia, serif;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	height: 100svh;
	overflow: hidden;
}

/* Logo half */
.mark {
	display: grid;
	place-items: center;
	background: var(--blue);
}
.logo {
	width: calc(min(50vw, 100svh) * 0.6);
	height: auto;
	transform: translateY(-3%);	/* optical centre */
}

/* Words half */
.words {
	display: grid;
	align-items: center;
	background: var(--white);
	padding: 0 clamp(48px, 7vw, 128px);
}
.words-inner { transform: translateY(-3%); }

h1 {
	margin: 0;
	font-weight: 400;
	font-size: clamp(2.5rem, 4.4vw, 4.25rem);
	line-height: 1.05;
	letter-spacing: 0.005em;
	font-variant-caps: small-caps;
	max-width: 10em;
}

.line {
	margin: 1.6rem 0 0;
	max-width: 30em;
	font-style: italic;
	font-size: clamp(1.15rem, 1.5vw, 1.45rem);
	line-height: 1.45;
	text-wrap: balance;
}
.line::before {	/* short gold rule */
	content: "";
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-bottom: 1.6rem;
	background: var(--gold);
}

.links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 2rem;
	margin-top: 2.8rem;
	font-size: 1.125rem;
}
.links a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-color: var(--gold);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}
.links a:hover { text-decoration-color: var(--blue); }

/* Phone: stacked */
@media (max-width: 899.98px) {
	.split {
		grid-template-columns: 1fr;
		grid-template-rows: 45svh 1fr;
	}
	.logo {
		width: calc(min(100vw, 45svh) * 0.6);
		transform: none;
	}
	.words {
		padding: 0 16px;
		justify-items: center;
		text-align: center;
	}
	.words-inner { transform: translateY(-4%); }
	h1 {
		font-size: clamp(2.1rem, 9.5vw, 2.75rem);
		max-width: none;
	}
	.line {
		margin: 1.1rem auto 0;
		font-size: 1.1rem;
	}
	.line::before { margin: 0 auto 1.1rem; }
	.links {
		justify-content: center;
		margin-top: 1.8rem;
	}
}