/* Set up charter font face */
@font-face {
	font-family: charter;
	font-style: normal;
	font-weight: normal;
	font-stretch: normal;
	src: url("charter_regular.woff2") format("woff2");
}

@font-face {
	font-family: charter;
	font-style: italic;
	font-weight: normal;
	font-stretch: normal;
	src: url("charter_italic.woff2") format("woff2");
}

@font-face {
	font-family: charter;
	font-style: normal;
	font-weight: bold;
	font-stretch: normal;
	src: url("charter_bold.woff2") format("woff2");
}

@font-face {
	font-family: charter;
	font-style: italic;
	font-weight: bold;
	font-stretch: normal;
	src: url("charter_bold_italic.woff2") format("woff2");
}

:root {
	/* Light Color Scheme by default */
	--color-fg: #111;
	--color-bg: #eee;
	--color-head: #222;
	--color-bold: #000;
	--color-anchor: #111;
	--color-aside: #424949;
	--color-shadow: #777;

	--font-head: charter, "Verdana", sans-serif;
	--font-body: charter, "Georgia", serif;
	--font-small: charter, "Georgia", serif;
	--font-head-size: 25px;
	--font-body-size: 20px;
	--font-small-size: 16px;
	text-rendering: optimizeLegibility;
	font-feature-settings: "kern";

	--block-radius: 8px;

	/* Layout variables
   *
   * At small screen sizes,
   * features and popouts collapse into the content,
   * leaving one content column with a side margin.
   *
   * Guide: https://www.viget.com/articles/fluid-breakout-layout-css-grid/
   */
	--gap: clamp(1rem, 4vw, 2rem); /* side margin size */
	--full: minmax(var(--gap), 1fr); /* min of gap, max fraction 1/1 */
	--feature: minmax(0, 12vw);
	--popout: minmax(0, 2rem);
	--content: min(clamp(30rem, 52vw, 60rem), 100% - var(--gap) * 2);
}

@media (prefers-color-scheme: dark) {
	/* Dark Color Scheme */
	:root {
		--color-fg: #ccc;
		--color-bg: #333;
		--color-head: #ddd;
		--color-bold: #fff;
		--color-anchor: #eee;
		--color-aside: #424949;
		--color-shadow: #000;
	}
}

@media print {
	:root {
		--font-body-size: 10pt;
		--font-head-size: 11pt;

		/* TODO: Optimize colors for printing */
		--color-fg: #fff;
		--color-bg: #000;
		--color-head: #fff;
		--color-bold: #fff;
		--color-anchor: #fff;
		--color-aside: #fff;
		--color-shadow: #fff;
	}
	@page {
		size: 8.5in 11in;
		margin: 1in;
	}
}

.numbers-lining {
	font-feature-settings: lining;
}
.numbers-oldstyle {
	font-feature-settings: oldstyle;
}
.numbers-tabular {
	font-feature-settings: tabular lining;
}

h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3 { font-weight: 700; }
h4 { font-weight: 600; }
h5 { font-weight: 500; }

h1,
h2,
h3,
h4,
h5 {
	color: var(--color-head);
	font-family: var(--font-head);
	font-size: var(--font-head-size);
	margin-bottom: 0;
}

header > * {
	margin-top: 0;
	margin-bottom: 0;
}

p {
	margin-top: 0;
	margin-bottom: 0;
	& + p {
		margin-top: 1lh;
	}
}

b,
strong {
	color: var(--color-bold);
}

:not(h1, h2, h3, h4, h5) a:not(:has(h1, h2, h3, h4, h5)) {
	/* anchor tag */
	/* display: inline-block; */
	padding: 0 0 0.75ch 0;
	color: var(--color-anchor);
	text-decoration: none;
	&:not([href^="#"]) {
		font-variant: small-caps;
		letter-spacing: 0.1em;
	}
	&:hover {
		background: var(--color-fg);
		color: var(--color-bg);
		transition-property: background;
		transition-duration: 0.2s;
		border-radius: 4px;
	}
}

html {
	color: var(--color-fg);
	font-family: var(--font-body);
	font-size: var(--font-body-size);
	line-height: 1.3;
	background-color: var(--color-bg);
}

.site-title {
	color: var(--color-head);
	font-family: var(--font-head);
	font-size: var(--font-head-size);
	font-weight: bold;
	margin-bottom: 0;
	margin-top: 0;
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: left;
	margin-bottom: 20px;
	&,
	& a {
		font-family: var(--font-small);
		font-size: var(--font-small-size);
	}
}

.dynamic-icon {
	fill: var(--color-bg);
	stroke: var(--color-fg);
}

.block {
	border-radius: var(--block-radius);
	border-left: 1px solid var(--color-shadow);
	box-shadow: 5px 5px 5px var(--color-shadow);
	padding-bottom: 0.75lh;
	margin: var(--gap);
	grid-column: feature;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;

	& h1 {
		box-sizing: border-box;
		font-size: 1em;
		text-align: center;
		margin: 0;
		padding-bottom: 0.5lh;
		padding-top: 0.125lh;
	}
}

.block.aside {
	& h1 {
		border-top-left-radius: var(--block-radius);
		border-top-right-radius: var(--block-radius);
		color: var(--color-bg);
		background-color: var(--color-aside);
	}
}

.small {
	font-size: 0.8em;
}

.wave {
	background: var(--color-bg);
	color: var(--color-bold);
	text-shadow:
		1px 1px 10px var(--color-bold),
		1px 1px 10px var(--color-fg);
}

footer {
	min-height: 25vh;
	display: grid;
	grid-template-columns: subgrid;
}

img {
	max-width: 100%;
}

.grid-breakout {
	width: 100vw;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns:
		[full-start] var(--full)
		[feature-start] var(--feature)
		[popout-start] var(--popout)
		[content-start] var(--content) [content-end]
		var(--popout) [popout-end]
		var(--feature) [feature-end]
		var(--full) [full-end];

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

.full {
	grid-column: full;
}
.feature {
	grid-column: feature;
}
.popout {
	grid-column: popout;
}
.content {
	grid-column: content;
}

.space-between {
	display: flex;
	width: 100%;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}