body {
	--monospace: "Inconsolata", "Menlo", "Consolas", monospace;
	--serif: "Nimbus Roman No9 L", "Times New Roman", "Times", serif;
	--sans: "U001", "Univers", "Helvetica", sans-serif;
	
	--dark-text: #fefefe;
	--dark-background: #000;
	--dark-link: #84cb09;
	--light-text: #111;
	--light-link: #3d6600;
	--light-background: #fff;
	--dark-red: #ef0000;
	--light-red: #ca0000;

	--text: var(--dark-text);
	--background: var(--dark-background);
	--link: var(--dark-link);
	--red: var(--dark-red);
	--panel: #000;
	--panel-text: rgb(from var(--text) r g b / 70%);
	--lightbox-background: var(--background);
	
	--max-width: auto;
	--main-margin: 35px;
	--footer-margin: 20px;
	--lightbox-margin: 15px;
	--prose-text-size: 18px;
	--medium-text-size: 16.5px;
	--small-text-size: 15px;
	--tiny-text-size: 12.5px;
	--panel-height: 45px;
	--gutter: 140px;
	
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	box-sizing: border-box;
	
	font-family: var(--sans);
	letter-spacing: -0.01em;
	line-height: 1;
	margin: 0;
	background-color: var(--background);
	color: var(--text);
	font-size: var(--prose-text-size);
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

body.light {
	--text: var(--light-text);
	--background: var(--light-background);
	--link: var(--light-link);
	--red: var(--light-red);
}

main {
	max-width: var(--max-width);
	margin-left: var(--main-margin);
	margin-right: var(--main-margin);
	
	flex-grow: 1;
}

#panel {
	display: flex;
	align-items: flex-start; 
	flex-wrap: wrap;
	padding: 5px 10px;
	gap: 5px;
	margin: 8px 6px 22px;
	text-align: left;
	font-family: var(--sans);
	z-index: 1100;
	position: relative;
}

#panel .menu {
	background: var(--panel);
	position: relative;
}

#panel .logo {
	height: var(--panel-height);
	aspect-ratio: 410 / 185;
	transition: fill 0.1s ease-in-out;
	display: block;
	margin: 0 5px;
}

#panel a {
	display: block;
	color: var(--panel-text);
}

#panel a[aria-disabled=true] {
	pointer-events: none;
}

#panel nav {
	display: flex;
	flex-direction: column;
	position: absolute;
	background: transparent;
	width: 120px;
	height: 0;
	top: var(--panel-height);
	left: -1px;
	padding: 0 0 0 1px;
	overflow: hidden;
	gap: 4px 5px;
	transform: scale(0.9, 0.9);
	transition: 0.1s height ease-in-out, 0.1s transform ease-in-out;
	pointer-events: none;
	z-index: 200;
}

#panel nav[data-expanded] {
	height: 220px;
	transform: scale(1, 1);
	padding-top: 4px;
	pointer-events: all;
}

#panel nav a:first-child {
	padding-top: 4px;
}

#panel nav a {
	font-size: var(--medium-text-size);
	width: max-content;
	letter-spacing: 0.1px;
	background: var(--panel);
	padding: 3px 6px;
	transition: background 0.1s ease-in;
}

#panel .subsection {
	margin: 0;
	padding: 0 10px;
	color: var(--panel-text);
	font-size: var(--prose-text-size);
	font-weight: 700;
	height: var(--panel-height);
	background: var(--panel);
	line-height: var(--panel-height);
}

#panel.image .menu, #panel.image .subsection, #panel.image nav a {
	background-size: 340px;
}

#panel.image .subsection {
	background-position: -115px 0;
}

#panel.image nav a:nth-child(1) { background-position: 0 -49px; }
#panel.image nav a:nth-child(2) { background-position: 0 -75px; }
#panel.image nav a:nth-child(3) { background-position: 0 -101px; }
#panel.image nav a:nth-child(4) { background-position: 0 -127px; }
#panel.image nav a:nth-child(5) { background-position: 0 -153px; }
#panel.image nav a:nth-child(6) { background-position: 0 -179px; }
#panel.image nav a:nth-child(7) { background-position: 0 -205px; }
#panel.image nav a:nth-child(8) { background-position: 0 -231px; }

footer {
	position: relative;
	padding: 140px var(--footer-margin) 15px;
	font-family: var(--serif);
	font-size: var(--tiny-text-size);
	letter-spacing: 0;
	text-align: right;
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 15px;
}

footer .icon.small {
	vertical-align: top;
	height: 18px;
	width: 18px;
	margin: 0;
}

footer .fineprint {
	max-width: 400px;
	text-wrap: balance;
}

a {
	color: var(--link);
	text-decoration: none;
}

a:hover, a:active, .a:hover, .a:active { text-decoration: underline; }
svg.logo, svg.icon { fill: currentcolor; }

.icon {
	display: inline-block;
	height: 20px;
	width: 20px;
	vertical-align: middle;
	position: relative;
	top: -1px;
}

.icon.small {
	height: 15px;
	width: 15px;
	margin: 0 3px;
	top: -2px;
}

h1 {
	font-size: 4em;
	font-weight: 600;
	letter-spacing: -0.5pt;
	margin: 0 0 -10px;
	clear: both;
}

h2 {
	font-size: 1.8em;
	font-weight: 400;
	letter-spacing: -0.4pt;
	margin: 0 0 5px;
	clear: both;
}

h3 {
	font-size: 1.35em;
	font-weight: 400;
	margin: 5px 0 0;
}

p { 
	margin: 1em 0; 
}

ul, ol { 
	padding: 0 0 0 30px; 
}

li { 
	padding: 5px 0; 
}

.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, 230px);
	align-items: center;
	justify-content: space-between;
	gap: 50px 20px;
}

.gallery article img {
	cursor: pointer;
	display: block; 
	width: 230px;
	height: auto;
}

.gallery.lightboxGallery article[data-focused] {
	cursor: pointer;
	z-index: 1000;
	transition-duration: 0s !important;
}

.lightboxHovering .gallery.lightboxGallery article:not([data-focused]) {
	position: relative;
	z-index: 1;
}

.gallery article .lightboxData {
	display: none;
}

.lightboxHovering .gallery article[data-focused] .lightboxData {
	display: block;
}

.lightboxHovering footer .icon {
	visibility: hidden;
}

.lightboxData {
	position: fixed;
	bottom: 0;
	left: 0;
	padding: var(--lightbox-margin);
	width: fit-content;
	max-width: max(500px, 30vw);
	font-family: var(--serif);
	font-size: var(--prose-text-size);
	letter-spacing: 0;
	z-index: 800;
}

.lightboxData .name {
	font-size: inherit;
	font-weight: bold;
	letter-spacing: inherit;
}

.lightboxData .info {
	margin: 10px 0;
}

.lightboxData .credits {
	font-size: var(--tiny-text-size);
	margin-top: -5px;
}

.lightboxData .desc p:first-child {
	margin-top: 0;
}

.lightboxData .desc p:last-child {
	margin-bottom: 0;
}

#lightbox .lightboxData {
	position: static;
	padding-top: 0;
	margin: calc(var(--lightbox-margin) * -1) 0 0;
	padding: 0;
}

#lightbox {
	position: fixed;
	z-index: 1200;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	margin: auto;
	display: flex;
	flex-direction: column;
	background: var(--lightbox-background);
	max-height: 100%;
	padding: var(--lightbox-margin);
}

#lightbox[hidden] {
	display: none;
}

#lightbox .content {
	display: flex;
	margin: auto;
	padding: 0;
	justify-content: center;
	align-self: center;
	box-sizing: border-box;
	width: 100%;
	max-height: 700px;
	max-width: 1000px;
	height: 100px;
	z-index: 300;
	flex-grow: 1;
}

#lightbox #displayImage {
	height: 100%; 
	width: 100%; 
	object-fit: contain;
}

#lightbox #close {
	position: absolute;
	right: var(--lightbox-margin);
	bottom: var(--lightbox-margin);
	cursor: pointer;
	z-index: 1000;
}

#lightbox #close svg {
	color: var(--text);
	top: 0;
	margin: 0;
}

#lightbox.entering #displayImage, #lightbox.exiting #displayImage { animation: .2s steps(5, end) scale; }
#lightbox.entering, #lightbox.exiting { animation: .2s steps(5, end) fade; }
#lightbox.exiting #displayImage, #lightbox.exiting { animation-direction: reverse; }

@keyframes fade {
  0% { background: transparent; }
  100% { background: var(--background); }
}

@keyframes scale {
  0% { transform: scale(0.2, 0.2); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: scale(1, 1); }
}

.nowrap, footer .top { white-space: nowrap; }
.break { word-break: break-all; }
.pixelated img { image-rendering: pixelated; }

body.noscroll {
	overflow: auto;
	height: 100%;
	position: fixed;
	left: 0;
	right: 0;
}

.leftGutter {
	padding-left: calc(var(--gutter) - 20px);
}

.leftGutter h2 {
	position: relative;
	left: calc(var(--gutter) * -1 - 20px);
	top: 5px;
	font-size: var(--small-text-size);
	font-family: var(--sans);
	text-align: right;
	width: var(--gutter);
	line-height: 0;
	margin: 0;
	font-weight: 700;
	letter-spacing: -0.1px;
}

.ancillary {
	display: block;
	font-weight: 700;
	font-size: var(--small-text-size);
	position: absolute;
	top: 11px;
	right: 15px;
	color: var(--text);
}

html {
	scroll-behavior: smooth;
}

@media (pointer: coarse) and (max-width: 650px) {
	#panel nav {
		width: 200px;
	}
	
	#panel nav a {
		font-weight: 700;
		font-size: 28px;
	}
	
	#panel nav[data-expanded] {
		height: 300px;
	}
	
	#panel.image nav a {
		background-size: 320px 270px;
	}
}

@media (hover: none) {
	.lightboxHovering .gallery article[data-focused] .lightboxData, 
	.lightboxHovering .gallery article[data-focused]:after {
		display: none;
	}
}

@media (prefers-color-scheme: dark) {
	body.light {
		--text: var(--dark-text);
		--background: var(--dark-background);
		--link: var(--dark-link);
		--red: var(--dark-red);
	}
}

@media screen and (max-width: 900px) {
	body {
		--root-margin: 25px;
		--footer-margin: var(--root-margin);
	}
	
	main {
		margin-left: var(--root-margin);
		margin-right: var(--root-margin);
	}
	
	.gallery {
		gap: 20px 30px;
		grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	}
	
	.gallery article img {
		width: 100%;
	}
	
	#lightbox {
		padding-top: 50px;
		max-height: none;
		overflow: scroll;
		gap: 30px;
	}
	
	#lightbox .content {
		height: auto;
	}
	
	#lightbox #close {
		position: fixed;
		top: var(--lightbox-margin);
		bottom: auto;
	}
}

@media screen and (max-width: 650px) {
	body {
		--root-margin: 20px;
	}
	
	.gallery {
		column-gap: 4%;
		grid-template-columns: repeat(auto-fill, 46%);
	}
	
	.leftGutter {
		padding-left: 0;
	}
		
	.leftGutter h2 {
		position: static;
		line-height: 1em;
		text-align: left;
		margin: 0 0 15px;
	}
}

@font-face {
	font-family: "U001";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/u001/u001regular.woff2") format("woff2");
}

@font-face {
	font-family: "U001";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/u001/u001regular_b.woff2") format("woff2");
	unicode-range: U+0393-03D6;
}

@font-face {
	font-family: "U001";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/u001/u001italic.woff2") format("woff2");
}

@font-face {
	font-family: "U001";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/u001/u001italic_b.woff2") format("woff2");
	unicode-range: U+0393-03D6;
}

@font-face {
	font-family: "U001";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/u001/u001bold.woff2") format("woff2");
}

@font-face {
	font-family: "U001";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/u001/u001bold_b.woff2") format("woff2");
	unicode-range: U+0393-03D6;
}

@font-face {
	font-family: "U001";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/u001/u001bolditalic.woff2") format("woff2");
}

@font-face {
	font-family: "U001";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/u001/u001bolditalic_b.woff2") format("woff2");
	unicode-range: U+0393-03D6;
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/nimbus/nimbusromanregular.woff2") format("woff2");
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: normal;
	font-weight: 400;
	src: url("/fonts/nimbus/nimbusromanregular_b.woff2") format("woff2");
	unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE,
	U+0400-045F;
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/nimbus/nimbusromanitalic.woff2") format("woff2");
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: italic;
	font-weight: 400;
	src: url("/fonts/nimbus/nimbusromanitalic_b.woff2") format("woff2");
	unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE,
	U+0400-045F;
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/nimbus/nimbusromanmedium.woff2") format("woff2");
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: normal;
	font-weight: 700;
	src: url("/fonts/nimbus/nimbusromanmedium_b.woff2") format("woff2");
	unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE,
	U+0400-045F;
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/nimbus/nimbusromanmediumitalic.woff2") format("woff2");
}

@font-face {
	font-family: "Nimbus Roman No9 L";
	font-style: italic;
	font-weight: 700;
	src: url("/fonts/nimbus/nimbusromanmediumitalic_b.woff2") format("woff2");
	unicode-range: U+0384-038A, U+038C, U+038E-03A1, U+03A3-03CE,
	U+0400-045F;
}

@font-face {
	font-family: "Inconsolata";
	src: url("/fonts/inconsolata.woff2") format("woff2");
}