:root {
	--space-3xs: clamp(0.25rem, 0.1989rem + 0.2273vw, 0.375rem);
	--space-2xs: clamp(0.5rem, 0.3977rem + 0.4545vw, 0.75rem);
	--space-xs: clamp(0.75rem, 0.5966rem + 0.6818vw, 1.125rem);
	--space-s: clamp(1rem, 0.7955rem + 0.9091vw, 1.5rem);
	--space-m: clamp(1.5rem, 1.1932rem + 1.3636vw, 2.25rem);
	--step--2: clamp(0.6944rem, 0.5858rem + 0.4828cqi, 0.96rem);
	--step--1: clamp(0.8333rem, 0.6905rem + 0.6349cqi, 1.2rem);
	--step-0: clamp(1rem, 0.7955rem + 0.9091cqi, 1.5rem);
	--step-4: clamp(2.0736rem, 1.4238rem + 2.8882cqi, 3.6621rem);
}
* {
	box-sizing: border-box;
	font-family:
		system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}
body {
	font-size: var(--step-0);
	margin: 0;
}
a {
	color: #968c82;
}
a:hover {
	text-decoration: underline;
}
button {
	background: radial-gradient(
		ellipse 100% 400% at 100% 100%,
		#ff9913,
		#f25375,
		#98509d,
		#2b4b7d,
		#07374e,
		#0e2635,
		#0c171e,
		#000000
	);
	border: none;
	border-radius: var(--space-3xs);
	color: #ffffff;
	cursor: pointer;
	font-size: var(--step-0);
	font-weight: 500;
	padding: var(--space-2xs) var(--space-s);
	transition:
		filter 120ms ease,
		transform 120ms ease,
		opacity 120ms ease;
}
button:hover {
	filter: brightness(1.1);
}
button:active {
	transform: translateY(1px) scale(0.99);
}
button:disabled {
	cursor: default;
	opacity: 0.65;
}
button:disabled:active {
	transform: none;
}
/* Submit spinner: hidden until htmx marks the form as in-flight. */
.spinner {
	display: none;
}
.htmx-request .spinner {
	animation: spin 0.6s linear infinite;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	border-top-color: #ffffff;
	display: inline-block;
	height: 0.85em;
	margin: 0 0 0 var(--space-3xs);
	vertical-align: -0.12em;
	width: 0.85em;
}
@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}
form {
	padding-bottom: var(--space-s);
}
form * {
	display: block;
	margin: var(--space-2xs) 0;
}
/* Honeypot field: kept in the DOM for bots but off-screen for humans. */
.hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
h1 {
	font-size: var(--step-4);
	font-weight: 800;
	text-wrap: balance;
}
input {
	border: 1px solid #cbc6c0;
	border-radius: var(--space-3xs);
	font-size: var(--step-0);
	padding: var(--space-2xs) var(--space-xs);
	width: 75%;
}
label {
	font-weight: 700;
}
main {
	padding-top: var(--space-m);
	background: white;
}
main > * {
	margin: 10vmin;
	max-width: 30em;
}
main > small {
	color: #968c82;
	padding-bottom: var(--space-s);
}
main div small {
	background: #fae6d1;
	color: #73410c;
	padding: var(--space-3xs) var(--space-2xs);
}
p {
	color: #968c82;
}
small {
	font-size: var(--step--2);
}
#mast {
	align-items: center;
	background: radial-gradient(
		ellipse 400% 100% at 100% 100%,
		#ff9913,
		#f25375,
		#98509d,
		#2b4b7d,
		#07374e,
		#0e2635,
		#0c171e,
		#000000
	);
	display: flex;
	justify-content: center;
	height: 66.667vw;
}
#mast a {
	display: block;
	width: 50%;
	/* The logo is a link, not text — stop Safari selecting/long-pressing it. */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}
#mast a:hover {
	text-decoration: none;
}
#mast img {
	-webkit-user-drag: none;
	user-select: none;
	display: block;
	width: 100%;
}

/* Long-form pages (e.g. privacy) reuse the same shell but read as an article. */
.prose h1 {
	font-size: var(--step-4);
}
.prose h2 {
	margin-top: var(--space-m);
}
.prose p,
.prose li {
	color: #968c82;
	line-height: 1.6;
}
.prose a {
	color: #73410c;
}
.prose h3 {
	font-size: var(--step-0);
	font-weight: 700;
	margin-top: var(--space-s);
}
.prose .meta {
	color: #968c82;
	line-height: 1.5;
}
.prose ol {
	margin-top: var(--space-2xs);
}
.prose ol[type="i"] {
	list-style-type: lower-roman;
}
.prose .back {
	margin-top: var(--space-m);
}
/* Long-form articles want a slightly wider, more readable measure than the
   landing page's 30em column. */
.prose article {
	max-width: 42em;
}
.table-wrap {
	overflow-x: auto;
}
.prose table {
	border-collapse: collapse;
	font-size: var(--step--1);
	width: 100%;
}
.prose th,
.prose td {
	border: 1px solid #cbc6c0;
	padding: var(--space-2xs);
	text-align: left;
	vertical-align: top;
}
.prose th {
	color: #73410c;
}
.prose td {
	color: #968c82;
}

@media screen and (min-width: 50em) {
	body {
		display: flex;
	}
	body > * {
		width: 50%;
	}
	form {
		padding-bottom: 0;
	}
	input {
		width: 61.803399%;
	}
	main {
		display: flex;
		flex-direction: column;
		gap: var(--space-s);
		justify-content: center;
		min-height: 100dvh;
		padding-top: var(--space-2xs);
	}
	main > * {
		margin: 0 10vmin;
	}
	#mast {
		height: 100dvh;
		left: 0;
		position: sticky;
		top: 0;
	}
	main > small {
		bottom: 0;
		position: absolute;
	}
	/* Privacy reuses the home split layout; just top-align the long article
       (home centres its short content; the policy is taller than the viewport). */
	main.prose {
		justify-content: flex-start;
	}
}