:root {
	--pagebg: hsl(42,100%,97%);
	background:
		linear-gradient(-3deg, hsla(33,100%,60%,0.1), transparent 33%) no-repeat,
		linear-gradient(147deg, hsla(33,100%,60%,0.1), transparent 25%) no-repeat,
		hsl(42,100%,97%);
	color: black;
	min-height: 100vh;
	font: 1em Open Sans, Helvetica, sans-serif;}
* {box-sizing: border-box;}

body {display: grid;
	grid-template-columns: 1fr minmax(30ch,90ch) 1fr;
	grid-template-rows: repeat(2,min-content) auto minmax(3ch,10vh) min-content;
	margin: 0; padding: 1ch 0;
	background: transparent;}
body > * {padding: 0 1ch;
	grid-column: 2;}

header {display: flex; flex-direction: column-reverse;
	margin: 3ch 0;}
header > * {margin: 0;}
header h1 {align-self: flex-start;
	opacity: 0.85;
	border-bottom: 1px solid;
	font-size: 300%; line-height: 1;
	letter-spacing: -0.0667ch;
	text-shadow:
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg),
		0 0 2px var(--pagebg)
		;}
header h2 {opacity: 0.5;
	text-transform: uppercase; font-size: 1.23em; font-weight: 300;
	margin-top: 1ch;
	word-spacing: 0.25ch;}

main {font-family: Georgia, serif;}
main h3 {display: inline-block;
	font-family: Open Sans, Helvetica, sans-serif;
	margin: 1ch 0 1.5ch; padding-bottom: 1.5ch;
	background: linear-gradient(rgba(0,0,0,0.67),rgba(0,0,0,0.67)) no-repeat bottom left / 50% 0.5ch;}
main p {font-size: 1.1em;}
main p.note {border: 2px solid hsl(0,70%,60%); background: hsl(0,10%,90%); mix-blend-mode: luminosity;
	padding: 1em 0.5em; border-radius: 1ch;}
ol {list-style: decimal; margin: 0; padding-left: 2.5ch;}

@supports (counter-reset: example) {
	ol {counter-reset: figs; list-style: none;}
	ol li:not(.xmp)::before {content: counter(figs) ". ";
		display: inline-block; width: 6ch; text-align: right; margin: 0 0.67ch 0 -6.67ch;}
	ol li:not(.xmp) {counter-increment: figs;}

	@supports (--chno: 0) {
		ol {margin-left: 2ch;}
		ol li:not(.xmp)::before {content: var(--chno) "-" counter(figs) ". ";}
	}
}

ol li {margin-bottom: 0.33ch; padding-left: 0.5ch;}
li.fig + li.xmp, li.xmp + li.fig {margin-top: 1.5ch;}
li.xmp {font-style: italic;
	padding-left: 1.25em; background: url(../styles/play-icon-round.svg) 0.25em 50% / 0.8em no-repeat;}

ol li a[href]::after {color: black; font-style: italic;}
ol li a[href$="ppt"]::after {content: " (MS Powerpoint document)";}
ol li a[href$="doc"]::after, ol li a[href$="docx"]::after {content: " (MS Word document)";}
ol li a[href$="png"]::after {content: " (PNG)";}
ol li a[href$="jpg"]::after {content: " (JPG)";}
ol li a[href$="gif"]::after {content: " (GIF)";}
ol li a[href$="svg"]::after {content: " (SVG)";}

nav {grid-row: 1;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid rgba(0,0,0,0.25);
	padding: 0;}
nav > * {
	border: 1px;
	padding: 1ch 0;
	opacity: 0.67;}
nav > a:hover {opacity: 1;}
nav > *:nth-child(1) {text-align: left; flex: 0 1 50%;}
nav > *:nth-child(2) {text-align: center; flex: none; padding: 1ch 2ch; margin: 0 1ch;}
nav > *:nth-child(3) {text-align: right; flex: 0 1 50%;}

footer {font-size: smaller; font-style: italic;
	border-top: 1px solid; padding: 0.5ch 0 5ch;
	grid-row: 5;
	display: flex;
	justify-content: space-between;}
footer > * {opacity: 0.5;}
footer > *:nth-child(2) {text-align: right;}

@media (max-width: 60ch) {
	nav > *:nth-child(2) {border: 1px solid rgba(0,0,0,0.5); border-width: 0 1px;}
	footer {display: grid;}
	footer > *:nth-child(2) {text-align: left;}
}
@media (max-width: 90ch) {
	nav, footer {grid-column: 1 / 3;}
	nav > a[href] {flex: 0 1 auto; padding: 1ch;}
	footer > * {padding: 0 1ch;}
}

@supports (writing-mode: sideways-lr) or (writing-mode: vertical-rl) {
	@media (min-width: 60ch) {

		nav {margin-bottom: 3em;}

		header {grid-column: 1 / 2; grid-row: 2 / 3;
			display: grid;
			grid-template-columns: repeat(2,min-content);
			justify-content: flex-end;
			padding-top: 1.25rem; margin-top: 0;}
		header > * {writing-mode: vertical-rl; transform: rotate(180deg);
			writing-mode: sideways-lr; grid-row: 1; align-self: flex-start;}
		header h1 {grid-column: 2; margin-right: 1.75rem;
			max-height: 75vh; text-align: right; word-spacing: 0.13ch;
			border-bottom: 0;}
		header h2 {grid-column: 1; margin: 0 -0.5ch 0 0;}
		@supports (writing-mode: sideways-lr) {
			header > * {writing-mode: sideways-lr; transform: none;}
		}

		main h3 {margin-top: 0.75rem;}

	}
}