@font-face {
	font-family: Overused Grotesk;
	font-weight: 400;
	font-display: block;
	src: url("/static/font/OverusedGrotesk-Roman.woff2");
}

@font-face {
	font-family: Overused Grotesk;
	font-weight: 600;
	font-display: block;
	src: url("/static/font/OverusedGrotesk-SemiBold.woff2");
}


:root {
	--color-bg-alternate:		#000;
	--color-bg-placeholder:		#f6f6f6;
	--color-bg-button:		#f3f3f3;
	--color-bg-error:		#fdeeec;
	--color-bg-header:		#f1f1f1;
	--color-bg-brand:		#efffeb; /* #f7fff5; */
	--color-brand:			#2cdd00;
	--color-error:			#ea2b1f;
	--color-copy-primary:		black;
	--color-copy-secondary:		#767676;
	--color-copy-alternate:		#eee;
	--color-disabled:		#ddd;
	--color-hr:			var(--color-disabled);

	--dim-pinstripe:		1ex;

	--dim-bleed-h:			clamp(1rem, 2vmin, 1.75rem);
	--dim-bleed-v:			1.25rem;
	--dim-gap-r-h:			7.5rem;
	--dim-gap-rv:			2.5rem;
	--dim-gap-lists:		1rem;
	--dim-gap-section:		5rem;

	--dim-button-padding-block:	1ex;
	--dim-button-padding-inline:	2ch;

	/* To match LaTeX */
	--dim-logo-clearing:		1.5ex;

	--dim-maxwidth-content-r:	90ch;
	--dim-maxwidth-content-s:	50ch;
	--dim-maxwidth-content-card:	30ch;
	--dim-minwidth-content-s:	40ch;
	--dim-minwidth-content-card:	20ch;

	--dim-font-copy:		125%;
	--dim-font-h1:			300%;
	--dim-font-h2:			175%;
	--dim-font-h3:			125%;
	--dim-font-h4:			100%;
	--dim-lh-body:			1.50;
	--dim-lh-headings:		1.20;

	--dim-svg:			1.25em;

	--dim-strokewidth-svg-r:	1.30;
	--dim-strokewidth-svg-b:	1.50;
	--dim-strokewidth-svg-xb:	2.00;
}


::selection {
	background: var(--color-copy-primary);
	color: var(--color-copy-alternate);
}


* {
	border: 0;
	box-sizing: border-box;
	font: inherit;
	font-size: 100%;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}


html {
	background-color: var(--color-brand);
	scroll-behavior: smooth;

	body {
		background-color: white;
		border-top: var(--dim-pinstripe) solid var(--color-brand);
		color: var(--color-copy-primary);
		display: grid;
		font-family: Overused Grotesk, -apple-system, sans-serif;
		font-size: var(--dim-font-copy);
		font-smooth: antialiased;
		font-synthesis: none;
		font-weight: 400;
		grid-auto-flow: row;
		grid-template-columns:
			[full-bleed-start] var(--dim-bleed-h)
				[content-r-start] 1fr
					[content-s-start]
						minmax(auto, 120ch)
					[content-s-end]
				1fr [content-r-end]
			var(--dim-bleed-h) [full-bleed-end];
		grid-template-rows: min-content 1fr min-content;
		line-height: var(--dim-lh-body);
		min-height: 100lvh;
		text-rendering: optimizeLegibility;
		text-size-adjust: none;

		header,
		footer {
			padding-block: var(--dim-bleed-v);
		}

		header {
			a:first-of-type { padding-left: 0; }
		}

		footer {
			.threeway-split-child:nth-of-type(2) { font-size: small; }

			button, a {
				background-color: unset !important;
			}

			.threeway-split-child:nth-of-type(3) menu {
				gap: 0;

				li:not(.e_mail) svg { fill: white; }
			}
		}
	}
}


section + section {
	margin-block: var(--dim-gap-section);
}


hgroup {
	span[role=doc-subheading] {
		display: flex;
		font-size: small;
		gap: var(--dim-logo-clearing);
		/* font-feature-settings: "c2sc", "smcp"; doesn't work */
		text-transform: uppercase;
		font-weight: 600;

		svg {
			stroke-width: var(--dim-strokewidth-svg-xb);
		}
	}

	h1 + p:first-of-type { font-weight: 600; }
}

hgroup + * { margin-top: 2.5rem; }


menu,
ol,
ul {
	display: flex;
	list-style: none;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--dim-gap-lists);

	li {
		align-items: center;
		display: inline-flex;
		text-align: left;
	}

	li:has(> svg) {
		gap: var(--dim-logo-clearing);
	}
}


details {
	summary {
		align-items: center;
		cursor: pointer;
		display: flex;
		gap: 1rem;
		padding-block: 1ch;
		user-select: none;

		::marker { display: none; }

		h4 {
			margin: 0;
			white-space: nowrap;
		}

		svg.chevron {
			cursor: pointer;
			stroke-width: var(--dim-strokewidth-svg-b);
		}
	}
}

details[open] > summary {
	svg.chevron {
		transform: rotate(180deg);
	}
}


.side-by-side {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/* Spacing on wrap */
	gap: 1rem;
}

div[role=region].side-by-side div[role=group],
div[role=group].side-by-side > div {
	flex: 1;
	min-width: var(--dim-minwidth-content-card);
}


div[role=region].side-by-side {
	gap: 1rem 10rem;
	justify-content: space-between;
}

div[role=group].side-by-side {
}


picture {
	background-color: var(--color-bg-placeholder);
	display: flex;
	overflow: hidden;
	width: 100%;

	img {
		object-fit: cover;
		pointer-events: none;
		user-select: none;
		width: 100%;
	}

}

picture.no-img {
	align-items: center;
	justify-content: center;
	min-height: 30dvh;

	svg {
		--dim-svg: 15ch;

		background-color: white;
		border-radius: 100lvh;
		padding: 5ch;
	}
}


figure figcaption {
	color: var(--color-copy-secondary);
	font-size: small;
	text-align: right;
}


svg {
	/* Assume SVG is inline by default */
	--i-size: var(--dim-svg);

	/* Default stroke width */
	--i-strokewidth: var(--dim-strokewidth-svg-r);

	/* See SO q. /64502869/ */
	height: var(--i-size);
	min-height: var(--i-size);
	min-width: var(--i-size);
	width: var(--i-size);

	fill: none;
	stroke: var(--color-copy-primary);
	stroke-width: var(--i-strokewidth);
	vector-effect: non-scaling-stroke;

	/* Specific to Heroicons */
	stroke-linecap: round;
	stroke-linejoin: round;
}


h1,
h2,
h3,
h4 {
	font-weight: 600;
	line-height: var(--dim-lh-headings);
	margin: 1em 0 0.50em;
}

h1 {
	font-size: var(--dim-font-h1);
	font-weight: 600;
}

h2 { font-size: var(--dim-font-h2); }

h3 { font-size: var(--dim-font-h3); }

h4 { font-size: var(--dim-font-h4); }

p,
li {
	max-width: var(--dim-maxwidth-content-s);
	text-overflow: ellipsis;
	/* Intentionally no "overflow: hidden" or "white-space: nowrap", as this
	 * would "activate" the effect */
}

p + p { margin-top: 1em; }

b { font-weight: 600; }


label {
	display: block;
	font-size: small;
	font-weight: 600;
}

label + p {
	color: #767676;
}

label + p.secondary { margin-top: 1ex; }

input:not([type=checkbox]) {
	border-bottom: 1px solid var(--color-copy-primary);
	padding: .5ex 1ch;
	padding-left: 0;
	outline: 0;
	width: 100%;

	&[disabled] { border-bottom-color: var(--color-disabled); }
}


.pills input[type=checkbox] {

}

.sliders label + input { margin-top: 1ex;  /* TODO standardize */ }

.sliders input[type=checkbox] {
	--dim-slider: 2rem;
	--dim-slider-p-gap: 0.1;  /* Percentage */

	--dim-slider-gap: calc(var(--dim-slider-p-gap) * var(--dim-slider));

	appearance: none;
	-webkit-appearance: none;
	border-radius: 100vh;
	cursor: pointer;
	height: var(--dim-slider);
	position: relative;
	width: calc(1.618 * var(--dim-slider));

	&::after {
		--dim-slider-knob:
			calc((1 - 2 * var(--dim-slider-p-gap)) * var(--dim-slider));

		background-color: white;
		border-radius: 100%;
		content: "";
		height: var(--dim-slider-knob);
		position: absolute;
		transform: translateY(-50%);
		top: 50%;
		width: var(--dim-slider-knob);
	}

	&:not(:checked) {
		background-color: black;

		&::after {
			left: var(--dim-slider-gap);
			right: unset;
		}
	}

	&:checked {
		background-color: #9bc53d;

		&::after {
			left: unset;
			right: var(--dim-slider-gap);
		}
	}
}


button,
a,
select {
	align-items: center;
	background: none;
	border-radius: .2em;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	gap: var(--dim-logo-clearing);
	text-decoration: underline;
	white-space: nowrap;

	div span { display: block; }

	&:hover { text-decoration: none; }

	:not(p, menu ul li) > & {
		background-color: var(--color-bg-button);
		padding: var(--dim-button-padding-block) var(--dim-button-padding-inline);

		&[disabled] {
			background: none !important;
			box-shadow: inset 0 0 0 1px var(--color-disabled);
			color: var(--color-disabled);
			pointer-events: none;
			text-decoration: none;

			svg { stroke: var(--color-disabled); }
		}

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


div.feedback {
	align-items: center;
	align-self: flex-start;
	border-radius: .2em;
	flex-wrap: nowrap;
	font-size: small;
	gap: var(--dim-logo-clearing);
	justify-self: flex-start;
	margin-block: 1rem;
	max-width: var(--dim-maxwidth-content-s);
	padding: 1ex var(--dim-logo-clearing);

	svg {
		stroke-width: var(--dim-strokewidth-svg-xb);
	}

}


div.feedback.busy {
	/*background-color: #FDE1AF;*/
	background-color: #FDEFD8; /* #FEF7EB; */
}


div.feedback.error {
	background-color: var(--color-bg-error);
	color: var(--color-error);
	font-weight: 600;

	svg { stroke: var(--color-error); }
}


div.feedback.neutral {
	background-color: #EBF1FF;
}


a.logo {
	align-items: center;
	background: none;
	text-decoration: none;

	svg.logomark {
		fill: var(--color-text-primary);
		stroke: none;
		transform: translateY(.2ex);
	}

	span.logotype {
		font-weight: 600;
	}

	&:hover { background: none; }
}


.color-invert {
	/* Indentical to ::selection */
	background: var(--color-copy-primary);
	color: var(--color-copy-alternate);

	svg { stroke: var(--color-copy-alternate); }

	a.logo {
		padding: 0;

		.logomark { fill: var(--color-copy-alternate); }
	}
}


.hidden { display: none; }


.overlay-notification {
	align-items: baseline;
	border-radius: 0.2em;
	/* See joshwcomeau.com/css/designing-shadows/ */
	box-shadow:	0 0px 0px 1px hsl(0deg 0% 0% / 0.1),
			0 1px 1px -0.5px hsl(0deg 0% 0% / 0.1),
			0 3px 3px -1.5px hsl(0deg 0% 0% / 0.1),
			0 6px 6px -3px hsl(0deg 0% 0% / 0.1),
			0 12px 12px -6px hsl(0deg 0% 0% / 0.1);
	cursor: pointer;
	left: 50%;
	margin: 1ex var(--dim-bleed-h);
	max-width: var(--dim-maxwidth-content-s);  /* SO q. /45459151/ */
	padding: 1rem;
	position: fixed;
	top: 0;
	transform: translate(calc(-50% - var(--dim-bleed-h)), 1ex);
	z-index: 3;  /* Must be topmost */
	width: calc(100% - calc(2 * var(--dim-bleed-h)));

	> svg {
		stroke-width: var(--dim-strokewidth-svg-xb);
		transform: translateY(.5ex);
	}

	main {
		span { display: block; }

		span.title {
			color: white;
			font-weight: 600;
			grid-area: title;
		}

		div.doc {
			font-size: small;
			margin-top: 2.5rem;

			button {
				background-color: unset;
				border: 1px solid var(--color-hr);
			}
		}
	}
}


.overlay-modal {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	height: 100dvh;
	overflow: hidden scroll;
	overscroll-behavior-block: contain;  /* See SO a. /70836917/ */
	position: fixed;
	top: 0;
	width: 100dvw;
	z-index: 2;

	div.content {
		/* See SO a. /48254578/ */
		touch-action: none;

		menu.widget button,
		div.docs {
			background-color: white;
			/* See joshwcomeau.com/css/designing-shadows/ */
			box-shadow:	0 0px 0px 1px hsl(0deg 0% 0% / 0.05),
					0 1px 1px -0.5px hsl(0deg 0% 0% / 0.05),
					0 3px 3px -1.5px hsl(0deg 0% 0% / 0.05),
					0 6px 6px -3px hsl(0deg 0% 0% / 0.05),
					0 12px 12px -6px hsl(0deg 0% 0% / 0.05);
		}

		menu.widget {
			font-size: small;

			button {
				border-radius: 100lvh;
				padding: 1rem;
			}
		}

		div.docs {
			overscroll-behavior: none;
			overflow-y: scroll;
		}
	}

	div.content.state-dragging {
		transition: none;

		nav.primary { cursor: grabbing; }
	}
}


.overlay-modal.modal-bottom-sheet,
.overlay-modal.modal-dialog {
	align-items: center;
	background-color: rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	justify-content: center;
	overscroll-behavior: none;

	div.content {
		max-width: var(--dim-maxwidth-content-r);
		width: 100%;

		menu.widget {
			margin-inline: var(--dim-bleed-h);
			margin-bottom: 1rem;
		}

		div.docs {
			margin: 0 var(--dim-bleed-h);
			overflow-y: scroll;
		}
	}
}


.overlay-modal.modal-bottom-sheet {

	div.content {
		--dim-margin-top: 10svh;

		margin-top: var(--dim-margin-top);
		padding-inline: var(--dim-gap-h-bleed);
		min-height: calc(100% - var(--dim-margin-top));

		div.docs {
			border-bottom: var(--dim-pinstripe) solid var(--color-brand);
			border-radius: 0.2em 0.2em 0 0;
			min-height: 100%;
			overflow: hidden scroll;
		}
	}

}

.overlay-modal.modal-dialog {

	div.content {
		padding: var(--dim-bleed-h);

		div.docs {
			border-radius: 0.2em;
			max-height: 80svh;
			overflow: hidden scroll;
		}
	}
}


.overlay-modal.modal-south-center {
	div.content {
		menu.widget { display: none; }

		div.docs {
			margin-top: 1rem;
		}
	}
}


.secondary {
	color: var(--color-copy-secondary);
	font-size: small;
}


.threeway-split {
	display: flex;
	gap: var(--dim-bleed-h);
	justify-content: space-between;

	.threeway-split-child {
		align-items: center;
		display: flex;
	}

	.threeway-split-child:nth-of-type(1),
	.threeway-split-child:nth-of-type(3) { flex: 1; }

	.threeway-split-child:nth-of-type(1) { justify-content: start; }

	.threeway-split-child:nth-of-type(3) {
		justify-content: end;
		width: 100%;
	}
}


.wrapper-content {
	display: inherit;
	grid-column: full-bleed;
	grid-template-columns: subgrid;
	justify-content: stretch;

	> * { grid-column: content-s; }
}


@media only screen and (max-width: 120ch) {

	.overlay-notification { max-width: unset; }

	header.wrapper-content {
		a.logo span.logotype,
		div.header_widget_left address {
			display: none;
		}
	}

	footer.wrapper-content .threeway-split {
		flex-direction: column;

		.threeway-split-child {
			justify-content: start;

			li:first-of-type a { padding-left: 0; }
		}
	}

}