:root {
	--content-width: 640px;

	--font-size-sm: 0.875rem;
	--font-size-base: 1.125rem;
	--font-size-h3: 1.5rem;
	--font-size-h2: 2rem;
	--font-size-h1: 2.667rem;

	--color-gunmetal-a12: #f2f3f4;
	--color-gunmetal-a11: #e5e7e9;
	--color-gunmetal-a10: #d9dcdd;
	--color-gunmetal-a9: #ccd0d3;
	--color-gunmetal-a8: #c0c5c8;
	--color-gunmetal-a7: #b3babd;
	--color-gunmetal-a6: #a7aeb2;
	--color-gunmetal-a5: #9ba3a8;
	--color-gunmetal-a4: #90999d;
	--color-gunmetal-a3: #848e93;
	--color-gunmetal-a2: #788389;
	--color-gunmetal-a1: #6d797f;
	--color-gunmetal-b1: #626e75;
	--color-gunmetal-b2: #57646b;
	--color-gunmetal-b3: #4c5a62;
	--color-gunmetal-b4: #415158;
	--color-gunmetal-b5: #37474f;
	--color-gunmetal-b6: #313e45;
	--color-gunmetal-b7: #2b363c;
	--color-gunmetal-b8: #252e32;
	--color-gunmetal-b9: #1f2629;
	--color-gunmetal-b10: #191e21;
	--color-gunmetal-b11: #131718;
	--color-gunmetal-b12: #0b0d0f;

	--color-orange-a4: #ffd6c5;
	--color-orange-a3: #ffac8d;
	--color-orange-a2: #ff8156;
	--color-orange-a1: #f4511e;
	--color-orange-b1: #bf431b;
	--color-orange-b2: #8d3418;
	--color-orange-b3: #5d2614;
	--color-orange-b4: #32170d;

	--brand: var(--color-gunmetal-b5);
	--accent: var(--color-orange-a1);

	--ui-color-background: var(--color-gunmetal-a12);
	--ui-color-divider: var(--color-gunmetal-a8);
	--ui-color-heading: var(--color-gunmetal-b3);
	--ui-color-text: var(--color-gunmetal-b6);
	--ui-color-caption: var(--color-gunmetal-b3);
	--ui-color-legal: var(--color-gunmetal-b2);
	--ui-color-dt: var(--color-gunmetal-b4);
	--ui-color-dd: var(--color-gunmetal-b6);
	--ui-color-tile-border: var(--color-gunmetal-a10);
	--ui-color-tile-bg: #fff;
	--ui-color-logo-fg: #fff;
	--ui-color-logo-bg: var(--color-gunmetal-b5);
	--ui-color-link: var(--color-orange-b1);
	--ui-color-link-visited: var(--color-orange-b1);
	--ui-color-link-hover: var(--color-orange-b1);
	--ui-color-redacted: var(--color-gunmetal-a8);

  --ui-color-alert-text: #fff;
  --ui-color-alert-bg: var(--color-orange-b2);

  --ui-color-locked-text: var(--color-gunmetal-b6);
  --ui-color-locked-bg: var(--color-gunmetal-a10);
}

body {
	background-color: var(--ui-color-background);
	color: var(--ui-color-text);
	margin: 0;
	font-family: system-ui, -apple-system, sans-serif;
	font-size: 16px;
}

header {
	border-bottom: 1px solid var(--ui-color-divider);
	padding: 32px 0;
}

header a {
	display: block;
	max-width: var(--content-width);
	margin: 0 auto;
	text-decoration: none;
	color: var(--ui-color-heading);
}

header svg {
	display: block;
	width: 128px;
	height: 128px;
}

header svg .c { fill: var(--ui-color-logo-bg); }
header svg .d { fill: var(--ui-color-logo-fg); }

header h1 {
	font-size: var(--font-size-h1);
	font-weight: bold;
	line-height: 1.1em;
	margin: 0;
}

header p {
	font-size: var(--font-size-base);
	margin: 0;
	line-height: 1.4em;
	text-wrap: balance;
}

footer {
	border-top: 1px solid var(--ui-color-divider);
	padding: 32px 0;
}

footer > p {
	color: var(--ui-color-legal);
	font-size: var(--font-size-sm);
}

main {
	border-bottom: 32px solid var(--accent);
	border-top: 16px solid var(--accent);
	max-width: var(--content-width);
	margin-inline: auto;
	padding: 16px 32px;
}

h1 {
	font-size: var(--font-size-h1);
	line-height: 1.1em;
	margin: 0;
	text-wrap: balance;
}

h2 {
	font-size: var(--font-size-h2);
	line-height: 1.1em;
	margin: 0;
	text-wrap: balance;
}

h3 {
	font-size: var(--font-size-h3);
	line-height: 1.1em;
	margin: 0;
	text-wrap: balance;
}

aside {
  background-color: var(--ui-color-alert-bg);
  border-radius: 8px;
  color: var(--ui-color-alert-text);
  margin: 16px 0 32px;
  padding: 16px;
  text-align: center;
  text-wrap: balance;
}

aside.locked {
  background-color: var(--ui-color-locked-bg);
  color: var(--ui-color-locked-text);
}

p {
	font-size: var(--font-size-base);
	line-height: 1.5em;
	margin: 0;
}

h2, h3 { color: var(--ui-color-heading); }

ul {
	padding-left: var(--font-size-base);
	margin: 0;
}

li {
	font-size: var(--font-size-base);
	line-height: 1.5rem;
}

ul.tldr {
	border-bottom: 1px dashed var(--ui-color-divider);
	padding-bottom: 32px;
}

figure { margin: 0; }
figure img {
	display: block;
	width: 100%;
	height: auto;
}

figure.fullWidth {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
}

figure.fullWidth figcaption {
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: 1rem;
}

figcaption {
	color: var(--ui-color-caption);
	font-size: var(--font-size-sm);
	margin-top: 8px;
}

header + h2, header + article, figure + h3, p + h3, p + figure, figure + figure, figure + p, ul + h3, ul + footer, article + footer, dl + figure { margin-top: 32px; }
h3 + p, h3 + figure, p + p, h3 + ul, h2 + ul { margin-top: 16px; }

hr {
	border: 0;
	border-top: 1px solid #ddd;
	margin: 32px 0;
}

.redacted {
	background-color: var(--ui-color-redacted);
	color: var(--ui-color-redacted);
}

dl {
	font-size: var(--font-size-sm);
	margin: 16px 0;
	display: grid;
	gap: 0.25rem 0;
}

dt { color: var(--ui-color-dt); }
dd {
	color: var(--ui-color-dd);
	font-weight: bold;
	margin-left: 1.5rem;
}

.projectList {
	list-style: none;
	padding: 0;
	margin: 16px 0;
}

.projectList > li { width: 100%; }

.projectList article {
	border: 1px solid var(--ui-color-tile-border);
	border-radius: 8px;
	overflow: hidden;
	background-color: var(--ui-color-tile-bg);
	max-width: 314px;
	margin: 8px auto;
	display: block;
}

.projectList a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.projectList figure { margin: 0; }
.projectList img {
	display: block;
	width: 100%;
	height: auto;
}

.projectList figcaption {
	margin: 0;
	padding: 16px;
}

.projectList figcaption p { margin: 0; }
.projectList figcaption h3 {
	margin: 0;
	line-height: 1.2;
	font-size: var(--font-size-base);
}

.projectList figcaption h3 + p { margin-top: 4px; }
.redactedImg { opacity: 0.33; }
a { text-decoration: none; }
article a:link, footer a:link { color: var(--ui-color-link); }
article a:visited, footer a:visited { color: var(--ui-color-link-visited); }
article a:hover, footer a:hover { color: var(--ui-color-link-hover); }

aside a { text-decoration: underline; }
aside a:link, aside a:visited, aside a:hover { color: var(--ui-color-alert-text); }
aside.locked a:link, aside.locked a:visited, aside.locked a:hover { color: var(--ui-color-link); }

@media (min-width: 640px) {
	header > a {
		display: grid;
		grid-template-columns: auto 16px 1fr;
		grid-template-rows: auto auto;
		align-items: center;
	}
	
	header svg {
		grid-column: 1;
		grid-row: 1 / span 2;
	}
	
	header h1 {
		grid-column: 3;
		grid-row: 1;
		margin: 0 0 4px;
	}
	
	header p {
		grid-column: 3;
		grid-row: 2;
	}
	
	dl {
		margin: 16px 0;
		display: grid;
		grid-template-columns: max-content 1fr;
		gap: 4px 16px;
		align-items: start;
	}
	
	dt { }
	dd { margin: 0; }
	
	.projectList {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
	
	.projectList > li { width: auto; }
	.projectList article { margin: 0; }
}

@media (prefers-color-scheme: dark) {
	:root {
		--ui-color-background: var(--color-gunmetal-b11);
		--ui-color-divider: var(--color-gunmetal-b6);
		--ui-color-heading: var(--color-gunmetal-a6);
		--ui-color-text: var(--color-gunmetal-a9);
		--ui-color-caption: var(--color-gunmetal-a5);
		--ui-color-legal: var(--color-gunmetal-a2);
		--ui-color-dt: var(--color-gunmetal-a4);
		--ui-color-dd: var(--color-gunmetal-a6);
		--ui-color-tile-border: var(--color-gunmetal-b10);
		--ui-color-tile-bg: var(--color-gunmetal-b9);
		--ui-color-logo-fg: var(--color-gunmetal-a8);
		--ui-color-logo-bg: var(--color-gunmetal-b8);
		--ui-color-link: var(--color-orange-a2);
		--ui-color-link-visited: var(--color-orange-b1);
		--ui-color-link-hover: var(--color-orange-a2);
		--ui-color-redacted: var(--color-gunmetal-a3);

    --ui-color-alert-text: #000;
    --ui-color-alert-bg: var(--color-orange-a3);
    --ui-color-locked-text: var(--color-gunmetal-a6);
    --ui-color-locked-bg: var(--color-gunmetal-b8);
	}
}