* {
	font-family: inherit;
	font-stretch: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-kerning: normal;
	font-size: inherit;
	line-height: inherit;
	text-align: inherit;
	color: inherit;
	text-decoration: none;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;
	/* outline: 1px dashed rgba(255,0,0, 0.5); */
}

html {
	--text-color: #000;
	--text-color-pale: #D9D9D9;
	--text-color-pale: #aaaaaa;
	--bg-color: #FFF;
	--reverse-text-color: var(--bg-color);
	--reverse-bg-color: var(--text-color);
	--link-color: inherit;
	--link-hover-color: #F00;
	--use-hover-bg: rgba(0,0,0,0.8);
	--body-pad: 2vw;
	
	
	font-family: 'Konsole Variable', 'Verdana', sans-serif;
	font-stretch: 85%;
	font-weight: 400;
	font-size: 1em;
	line-height: 1.25;
	text-align: left;
	color: var(--text-color);
	background-color: var(--bg-color);
	-webkit-text-size-adjust: 100%;
}
@media (prefers-color-scheme: dark) {
	html {
		--text-color: #FFF;
		--text-color-pale: #545454;
		--bg-color: #000;
		--use-hover-bg: rgba(255,255,255,0.85);
		--reverse-text-color: #000;
		--reverse-bg-color: #FFF;
	}
	.branding img,
	.typeface img {
		filter: invert(100%);
	}
}
body {
	margin: 0 auto;
	display: grid;
	--column-width: calc(8rem + 5vw);
	--column-width: minmax(calc(8rem + 5vw), 1fr);
	--column-width: minmax(calc(7rem + 5vw), 1fr);
	--body-grid: [start] var(--column-width) [header-2] repeat(auto-fill, var(--column-width)) [end];
	grid-template-columns: var(--body-grid);
	--gap: 1rem;
	
	--gap-local: 0.5rem;
}


header {
	display: grid;
	grid-column-start: 1;
	grid-column-end: -1;
}
body > header,
body > main,
main > section,
.uses,
body > footer {
	display: grid;
	grid-template-columns: var(--body-grid);
	grid-column-start: start;
	grid-column-end: end;
	gap: var(--gap);
}
body > header,
section,
body > footer {
	padding-inline: var(--body-pad);
}
body > header {
	padding-block: var(--gap);
	grid-template-rows: auto auto;
	border-bottom: 0.25rem solid var(--text-color);
}
nav,
nav ul {
	display: grid;
	grid-template-columns: subgrid;
	grid-column-start: header-2;
	grid-column-end: end;
}
body > main {
	row-gap: 0;
}
main > section {
	padding-block: var(--gap); 
}
section + section {
	border-top: 1px solid var(--text-color);
	padding-top: var(--gap);
}
h1, h2, h3, h4 {
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
}
h1 {
	font-stretch: 30%;
	font-size: 2.5rem;
}
h2 {
	font-stretch: 60%;
	font-size: 1.75rem;
}
h2 a {
	text-decoration: none;
}
h2 + p {
	margin-top: var(--gap-local);
}
h3 {
	font-stretch: 70%;
	font-size: 1.5rem;
}
h4{font-size: 1.375rem;}
h5 {font-size: 1.125rem;}

small, caption, .supporter {
	font-size: 0.75rem;
}

img {
	display: block;
	width: 100%;
	height: auto;
}
a {
	color: var(--link-color);
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
a:hover,
a:active {
	color: var(--link-hover-color);
}

.user {
	grid-column-end: end;
}
.branding {
	grid-row-start: 1;
	grid-row-end: -1;
}
.logo {
	width: 10rem;
}
.nav-list {
	display: none;
}

.uses {
	grid-template-rows: 1fr;
	grid-auto-columns: var(--column-width);
	/* grid-auto-flow: column; */
	width: auto;
	overflow-x: auto;
}
.use {
	display: flex;
	flex-direction: column;
	/* display: grid;
	grid-template-rows: auto auto; */
	gap: var(--gap-local);
	/* align-items: start; */
	container-type: inline-size;
}
.use  {
}
.use-box {
	height: 100cqi;
	position: relative;
}
.use-box a {
	width: 100%;
	justify-content: center;
	align-items: center;
}

.reverse,
.use-box .info {
	color: var(--reverse-text-color);
	background-color: var(--use-hover-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.use-box .info {
	font-size: 0.875em;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 0.5em;
	display: none;
}
.use-box:hover .info {
	display: block;
}
.typeface + .typeface {
	border-top: 1px solid var(--text-color-pale);
}

.wide-2,
.wide-3 {
	grid-column: span var(--column-count);
}
.wide-2 {
	--column-count: 2;
}
.wide-3 {
	--column-count: 3;
}
.wide-2 .use-box,
.wide-3 .use-box {
	/* height: unset; */
	height: calc((100cqi - (var(--column-count) - 1) * var(--gap)) / var(--column-count));
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}
.wide-2 img,
.wide-3 img {
	object-fit: cover;
	object-position: center bottom;
}
.identifier {
	color: var(--text-color-pale);
}
.more {
	display: none;
}