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

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

a:not(.ghost) {
	color: inherit;
	text-decoration: none;
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='1'%3E%3Crect x='0' y='0.5' width='1' height='0.5' fill='rgba(255, 255, 255, 1)'/%3E%3C/svg%3E")
		left bottom repeat-x;
}

a:not(.ghost):hover {
	background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1' height='2'%3E%3Crect x='0' y='0.5' width='1' height='2' fill='rgba(140, 198, 56, 1)'/%3E%3C/svg%3E")
		left bottom repeat-x;
}

html {
	/* --darkest: #1f242c; */
	--darkest: #111;
	--brand: #8cc638;
	font-family: Inter, system-ui, sans-serif;
	font-feature-settings:
		'cv01' 1,
		'ss03' 1,
		'cv10' 1,
		'calt' 1,
		'ccmp' 1,
		'locl' 1,
		'kern' 1;
	font-variation-settings: 'opsz' 16;

	min-height: 100%;
	display: flex;
	flex-direction: column;
	background-color: var(--darkest);
	color: #fff;
	font-size: 16px;
	--unit: 1.5rem; /* 24px / 16px = 1.5rem */
	--half: calc(var(--unit) / 2);
	--dble: calc(var(--unit) * 2);
	line-height: var(--unit);
	padding: var(--unit) var(--half);
	touch-action: manipulation;
}

html.debug {
	background-image: url("data:image/svg+xml;utf8,<svg width='100' height='28' xmlns='http://www.w3.org/2000/svg'><line x1='0' y1='28' x2='100' y2='28' stroke='%23ffffff55' stroke-width='1'/></svg>");
	background-repeat: repeat;
	background-size: 100% 24px;

	* {
		background-color: #fff2 !important;
	}
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	flex-grow: 2;

	width: 100%;
	max-width: 800px;
	margin: 0 auto;

	justify-content: center;
}

h1 {
	padding: 0;
	margin: 0;
	line-height: calc(var(--unit) * 3);
	font-size: 2rem;
	font-variation-settings: 'opsz' 32;
}

h2 {
	padding: 0;
	margin: 0;
	font-size: 1.5rem;
	font-variation-settings: 'opsz' 24;
	line-height: var(--dble);
}

h3,
h4,
h5,
h6 {
	padding: 0;
	margin: 0;
	font-size: 16px;
	line-height: var(--unit);
}

p {
	padding: 0;
	margin: var(--unit) 0 var(--unit);
}

p + p {
	margin-top: 0;
}

.loose {
	line-height: 2rem;
}

:is(h1, h2, h3, h4, h5, h6) + p {
	margin-top: var(--unit);
}

ul,
ol {
	margin: var(--unit) 0 var(--unit);
	padding-left: var(--half);
}