@font-face {
	font-family: 'Pensum Sans';
	src:
		url(../fonts/PensumSans.woff2) format('woff2-variations'),
		url(../fonts/PensumSans.woff) format('woff-variations');
	font-weight: 100 900;
	font-style: normal;
}

@font-face {
	font-family: 'Pensum Sans';
	src:
		url(../fonts/PensumSans-Italic.woff2) format('woff2-variations'),
		url(../fonts/PensumSans-Italic.woff) format('woff-variations');
	font-weight: 100 900;
	font-style: italic;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

:root {
	--ff-sans-serif: 'Pensum Sans', ui-sans-serif, sans-serif;
	--ff-monospace: 'Taangente Sans Mono', 'Quadraat Sans Mono', ui-monospace, monospace;
	--cc-f0: hsl(0 0% 2%);
	--cc-f1: hsl(0 0% 39%);
	--cc-l1: hsl(0 0% 58%);
	--cc-b0: hsl(0 0% 95%);
	--cc-a0: hsl(245 61% 57%);
	--cc-a1: hsl(245 85% 78%);
}

@media (prefers-color-scheme: dark) {
	:root {
		--cc-f0: hsl(0 0% 97%);
		--cc-f1: hsl(0 0% 60%);
		--cc-l1: hsl(0 0% 36%);
		--cc-b0: hsl(0 0% 11%);
		--cc-a0: hsl(245 90% 70%);
		--cc-a1: hsl(245 50% 56%);
	}
}

html {
	color-scheme: light dark;
	font: 120%/1.2 var(--ff-sans-serif);
	-webkit-font-smoothing: antialiased;
}

body {
	--sz-info: 18rem;
	color: var(--cc-f0);
	background-color: var(--cc-b0);
	margin-inline: 3rem;
}

@media all and (max-width: 1020px) {
	body {
		--sz-info: 14rem;
		margin-inline: 1.5rem;
	}
}

@media all and (max-width: 660px) {
	html {
		font-size: 110%;
	}
	
	body {
		--sz-info: auto;
		margin-inline: 1rem;
	}
}

header,
main {
	max-width: calc(var(--sz-info) + 1536px);
	margin: 3rem auto;
}

.site-header {
	display: flex;
	flex-direction: column;
	gap: 0.5lh;
}

.site-title {
	font-size: 1.618rem;
	font-weight: 460;
	font-style: italic;
	text-wrap: pretty;
}

.site-title a {
	color: inherit;
	text-decoration: none;
}
.site-title a:is(:hover, :focus, :active) {
	text-decoration: underline;
}

@media all and (max-width: 660px) {
	.site-title {
		font-size: 1.4rem;
	}
}

.site-description {
	color: var(--cc-f1);
	line-height: 1.4;
	text-wrap: pretty;
	max-width: 33rem;
}

.site-description a[href] {
	color: var(--cc-a0);
	text-decoration: underline;
	text-decoration-color: var(--cc-a1);
}

@media all and (max-width: 520px) {
	.site-description br {
		display: none;
	}
}

.display-image-list {
	list-style-type: none;
}

.display-image-list .item {
	display: flex;
	flex-direction: row;
	gap: 0.5lh;
	margin-block: 3rem;
}

@media all and (max-width: 660px) {
	.display-image-list .item {
		flex-direction: column-reverse;
	}
}

.display-image-list picture {
	flex: 1;
	min-width: 0;
}

.display-image-list .image {
	display: block;
	width: 100%;
	height: auto;
	background-color: hsl(0 0 50% / 0.2);
}

.display-image-list .info {
	display: flex;
	flex-direction: column;
	gap: 0.5lh;
	flex-shrink: 0;
	width: var(--sz-info);
}

@media all and (max-width: 660px) {
	.display-image-list .info {
		gap: 0.125lh;
	}
}

.display-image-list .info .title {
	font-weight: inherit;
	font-size: 1em;
}

.display-image-list .details {
	display: flex;
	flex-direction: column;
	gap: 0.5lh;
	color: var(--cc-f1);
	list-style-type: none;
}

@media all and (max-width: 660px) {
	.display-image-list .details {
		display: block;
	}
	
	.display-image-list .details li {
		display: inline;
	}
	
	.display-image-list .details li + li::before {
		content: ' · ';
		color: var(--cc-f1);
		opacity: 0.5;
	}
}

.display-image-list .info .time sup {
	position: relative;
	font-weight: 450;
	font-size: 0.8em;
	vertical-align: baseline;
	top: -0.2em;
}

.display-image-list .info a[href] {
	color: var(--cc-f1);
	text-decoration: underline;
	text-decoration-color: var(--cc-l1);
}
.display-image-list .info a[href].deemphasized {
	text-decoration: none;
}
.display-image-list .info a[href]:is(:hover, :focus, :active) {
	color: var(--cc-a0);
	text-decoration: underline;
	text-decoration-color: var(--cc-a1);
}