:root {
	--whiteSpace: 4;
	--system-ui: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	--bodyfont: "Edge Sans 4", var(--system-ui);
	--color: hsl(120, 0%, 76%);
	--background: hsl(240, 1%, 18%);
	--darkBackground: hsl(0, 0%, 10%);
}
html {
	font-size: 1.414em;
	scroll-snap-type: block proximity;
}

body {
	margin: 0 0 0 2em;
	display: grid;
	background: var(--background);
	color: var(--color);
	font-family: var(--bodyfont);
	//font-size: 1.414em;
}

a {
	color: var(--color)
}

header {
	writing-mode: vertical-lr;
	position: fixed;
	top: 0;
	left: 0;
	padding: .2em;
	z-index: 1;
	mix-blend-mode: color-dodge;
}

main {
	margin: auto;
	max-width: calc( (100vw - (3 * var(--whiteSpace) * 1vw)) - 2em );
	scroll-snap-align: start;
}

section {
	display: grid;
	justify-content: center;
	justify-items: center;
	scroll-snap-align: bottom;
}

section > * {
	margin-top: 0;
	width: 20rem;
}
section > h1 {
	margin-top: 1em;
}
section > figure {
	width: auto;
}
section > figure + * {
	margin-top: 1rem;
}

figure,
ul,
li {
	margin: 0;
	list-style: none;
	padding: 0;
}
figure:has(img) {
	position: relative;
	background: var(--darkBackground);
	box-shadow: 
	0 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-10vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-20vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-30vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-40vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-50vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-60vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-70vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-80vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-90vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	-100vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	10vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	20vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	30vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	40vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	50vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	60vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	70vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	80vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	90vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground),
	100vw 0 0 calc( var(--whiteSpace) * 1vh ) var(--darkBackground);
	margin: calc(var(--whiteSpace) * 2vh) 0;
}
figure img {
	scroll-snap-align: center;
}
figure iframe {
	width: 100vw;
	max-height: calc( 100vh - (3 * var(--whiteSpace) * 1vh) );
	max-width: calc( (100vw - (3 * var(--whiteSpace) * 1vw)) - 2em );
	aspect-ratio: 16/9;
	border: 0;
	scroll-snap-align: center;
}
figcaption {
	background: var(--darkBackground);
	margin: 0;
	position: sticky;
	bottom: 0;
	width: 100%;
	font-size: .717em;
	font-style: italic;
	display: grid;
}
figcaption p {
	margin: 0;
	max-width: 20rem;
	
}


img {
	display: block;
	width: auto;
	height: auto;
	max-height: calc( 100vh - (3 * var(--whiteSpace) * 1vh) );
	max-width: calc( (100vw - (3 * var(--whiteSpace) * 1vw)) - 2em );
	margin: calc( var(--whiteSpace) * 1vh) auto;
}

p {
	width: 20rem;
}