:focus-visible {
	outline: 3px solid var(--color-brand);
	outline-offset: 0.2rem;
}

@media (prefers-reduced-motion: reduce) {
	* {
		animation: none;
	}
}

:target {
	scroll-margin-top: 1rlh;
}

* {
	box-sizing: border-box;
	font-size-adjust: ex-height 0.53;
	margin: 0;
}

html {
	font: 1.125rem/1.6 system-ui, sans-serif;
	font-size: clamp(1rem, 0.75rem + 1vw, 1.25rem);
	scroll-behavior: smooth;
	-webkit-text-size-adjust: none;
}

body {
	margin: 7.5vh auto;
	max-width: min(88vw, 1200px);
	overflow-wrap: break-word;
	text-rendering: optimizeSpeed;
}

main {
	margin-top: 3rem;
}

section {
	background-color: oklch(98% 0.046 305.24);
	border: 2px solid oklch(80% 0.046 305.24);
	border-radius: 2rem;

	@media (min-width: 700px) {
		padding: 2rem;
	}
}

h1, h2, h3 {
	line-height: 1.2;
	text-wrap: balance;

	& .subtitle {
		font-size: 0.75em;
		margin-top: 0.5rem;
	}
}

h2, label, th {
	color: oklch(39.46% 0.164 298.29);
}

div:has(> table) {
	overflow: scroll;
}

table {
	border-collapse: collapse;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	width: 100%;

	thead {
		border-bottom: 2px solid #0003;
	}

	tr + tr {
		border-top: 1px solid #0003;
	}

	th, td {
		padding: 0.5rem;
		text-align: left;
	}
}

ul[role='list'] {
	list-style: none;
	padding: 0;

	a:not(:hover) {
		text-decoration-line: none;
	}
}

img,
video,
svg {
	display: block;
	height: auto;
	max-width: 100%;
}

.forms-default {
	form {
		gap: 1.5rem;
		margin-inline: auto;

		div {
			display: grid;
			grid-template-columns: auto minmax(0, 1fr);
		}
	}

	input,
	select,
	textarea {
		background-color: #fff;
		border-radius: 0.25rem;
		font-family: inherit;
		font-size: inherit;
		border: 2px solid #0002;
		width: 100%;
		padding: 1rem 0.5rem;

		&:focus {
			outline: 2px solid #04c;
		}
	}

	.button {
		background-color: #04c;
		border: 0;
		border-radius: 0.25rem;
		color: #fff;
		font-size: 2rem;
		padding: 1rem 2rem;
		transition: 0.15s;

		&:hover {
			background-color: #000;
		}
	}
}

.grid {
	display: grid;
	gap: 1rem;
	@media (width >= 740px) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.honeypot,
.visually-hidden:not(:focus-visible, :active) {
	clip-path: inset(50%);
	clip: rect(0 0 0 0);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.info {
	color: #c00;
}

.logo {
	max-width: 150px;
}

.site-footer {
	display: grid;
	font-size: 0.85rem;
	gap: 1.5rem;
	margin-top: 6rem;

	@media (min-width: 700px) {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.stack {
	> * + * {
		margin-top: 2.5em;
	}

	> :is(h2, h3) + *,
	> :is(ul, ol, dl, p, li) + :is(ul, ol, dl, p, li) {
		margin-top: 1.25em;
	}
}

.stack-small > * + * {
	margin-top: 1.25rem;
}

.subtitle {
	display: block;
}