*,
::before,
::after
{
	box-sizing: border-box ;
	margin: 0 ;
	padding: 0 ;
	font: inherit ;
	color: inherit ;
	font-size: 1em ;
}

html
{
	--color--background: #141414 ;
	--color--foreground: #fbedd8 ;
	--base-font-size: 16 ;
	font-size: calc((100vw / 320) * var(--base-font-size)) ;
	font-family: system-ui, sans-serif ;
	background: var(--color--background) ;
	color: var(--color--foreground) ;
}

@media (prefers-color-scheme: light)
	{

html
{
		--color--background: #fbedd8 ;
		--color--foreground: #141414 
}
	}

@media (min-width: 375px)
	{

html
{
		font-size: calc((100vw / 375) * var(--base-font-size)) 
}
	}

@media (min-width: 425px)
	{

html
{
		font-size: calc((100vw / 425) * var(--base-font-size)) 
}
	}

@media (min-width: 768px)
	{

html
{
		font-size: calc((100vw / 768) * var(--base-font-size)) 
}
	}

@media (min-width: 1080px)
	{

html
{
		font-size: calc((100vw / 1080) * var(--base-font-size)) 
}
	}

@media (min-width: 1440px)
	{

html
{
		font-size: calc((100vw / 1440) * var(--base-font-size)) 
}
	}

@media (min-width: 1920px)
	{

html
{
		font-size: calc(1px * var(--base-font-size)) 
}
	}

summary[title]:has(:first-child:last-child[role="presentation"])
{
	display: block ;
	cursor: pointer ;
	font-size: 2rem ;
}

body > header
{
	flex-direction: row ;
	position: sticky ;
	top: 0 ;
	background: var(--color--background) ;
	border-bottom: 1px solid var(--color--foreground) ;
	padding: 1rem 0 ;
	z-index: 100 ;
	display: flex ;
	align-items: center ;
}

body > header > section
	{
		display: flex ;
		align-items: baseline ;
	}

@media(max-width:1080px)
	{
		body > header h1
		{
			font-size: 1rem ;
		}
	}

body > header > section
	{
		flex-direction: column ;
		align-items: end ;
	}

@media (max-width:1080px)
		{

body > header > section
	{
			align-items: start 
	}
		}

body > header > nav
	{
		margin-left: auto ;
	}

body > header > nav a
		{
			display: block ;
		}

body > header > nav summary,
		body > header > nav details[open] > div
		{
			margin: 0 .5rem ;
		}

body > header > nav details[open] > div
		{
			position: absolute ;
			right: 0 ;
			left: 0 ;
			background: var(--color--background) ;
			padding: .5rem ;
			border: 1px solid var(--color--foreground) ;
		}

@media (min-width: 768px)
			{

body > header > nav details[open] > div
		{
				left: auto 
		}
			}

body > header > section,
main,
body > footer
{
	margin: 0 1rem ;
}

h1,
h2,
h3,
h4,
h5,
h6
{
	font-weight: bolder ;
}

h1:not(:first-child),
	h2:not(:first-child),
	h3:not(:first-child),
	h4:not(:first-child),
	h5:not(:first-child),
	h6:not(:first-child)
	{
		margin-top: .25em ;
	}

h1
{
	font-size: 2.5em ;
}

section > section > header > h1,
h2
{
	font-size: 2em ;
}

section > section > section > header > h1,
h3
{
	font-size: 1.6em ;
}

section > section > section > section > header > h1,
h4
{
	font-size: 1.2em ;
}

section > section > section > section > section > header > h1,
h5
{
	font-size: 1em ;
	text-transform: uppercase ;
}

section > section section > section > section > section > header > h1,
h6
{
	font-size: 1em ;
	font-variant: small-caps ;
}

ul,
ol
{
	list-style-position: inside ;
}

.thumbnails
{
	display: flex ;
	flex-wrap: wrap ;
	padding: 1px ;
}

.thumbnails > li
	{
		display: inline-block ;
		max-width: 100% ;
		padding: 1px ;
	}

.thumbnails > li > a
		{
			display: block ;
			width: 100% ;
		}

.thumbnails > li > a picture
			{
				display: block ;
				width: 100% ;
			}

.thumbnails > li > a img
			{
				display: block ;
				max-width: 100% ;
				height: auto ;
			}

.thumbnails ~ ol li:target
	{
		outline: 1px dashed ;
	}

article section > ol > li .description + ol > li
					{
						display: inline ;
						vertical-align: super ;
						font-size: max(16px, .5em) ;
					}

.frequently-featured > section
{
	display: flex ;
	flex-wrap: wrap ;
	align-items: baseline ;
	justify-content: space-between ;
}

.frequently-featured > section > header
	{
		width: 100% ;
	}

.authors a,
body > footer a,
header > nav a,
a[href^="/dated/"][href$="/"]
{
	color: hsl(36, 81%, 60%) ;
}

@media (prefers-color-scheme: light)
	{

.authors a,
body > footer a,
header > nav a,
a[href^="/dated/"][href$="/"]
{
		color: hsl(0, 80%, 40%) 
}
	}