html {
	font-size: 20px;
}

@media (max-width: 1000px) {
	html {
		font-size: 18px;
	}
	main blockquote p {
		color: rgba(8,8,4,0.8);
		font-size: 1rem;
		line-height: 1.5;
	}
}

@media (min-width: 320px) and (max-width: 480px) {

	html {
		font-size: 16px;
	}

	body main { margin: 0vh 10vw;} 
}

body { 
	color: rgba(8,8,4,0.95);
	background-color: rgb(255,254,254);
	font: 400 1rem/1.5 "Graphik","Avenir Next", sans-serif; 
	font-variant: common-ligatures discretionary-ligatures oldstyle-nums;
}

h1, h2, h3, h4, h5, h6, p, blockquote, hr {
	margin: 0;
}

a:link {
	color: rgba(0,0,139,1);
}

a:visited {
	color: rgba(75,0,130,1);
}

a:link, a:visited { 
	text-decoration-color: rgba(8,8,4,0.1);
	text-decoration-style: dotted;
}

a:active, a:hover, a:focus { 	
	color: rgba(220,20,60,1);
	text-decoration-color: rgba(220,20,60,0.8);
	text-decoration-style: dotted;
}

article, hr {
	margin: 1.5rem 0 3rem;
	border: 0;
	background: inherit;
}
	
header { 
	margin: 10vh 10vw 10vh;
	border-top: 1px solid rgba(220,20,60,0.3);
	padding-top: 1vh;
	padding-bottom: 10vh;
	margin-bottom: -0.2rem;
}
	
header hgroup { 
	position: relative;
/*	max-width: 21rem;*/
}

header h1, header h2, header p {
	font-size: 1rem;
	line-height: 1;
}

header h1 {
	font-weight: 600;
	color: rgba(220,20,60,0.9);
	text-align: right;
	line-height: 0.5;
	position: absolute;
	top: -1.5rem;
	right: 0;
}

header h1 a:link, header h1 a:visited {
	color: rgba(0,0,0,0.9);
	text-decoration: none;
	margin-left: -0.5ex;
}

header h1 a:hover {
	text-decoration-color: rgba(220,20,60,0.8);
	text-decoration-style: wavy;
}

header h2, header p {
	font-weight: 100;
	font-style: italic;
}

header h2 {
	text-align: left;
	font-size: 2.1rem;
	word-spacing: 0.17rem;
}

header h3  {
	font-weight: 200;
	text-align: left;
	font-size: 1.1rem;
	word-spacing: 0.17rem;
}

header h4,
header p {
	max-width: 21rem;
	font-weight: 200;
	color: rgba(8,8,4,0.2);
	font-size: 0.75rem;
	margin-right: 0.5rem;
}

main {
	margin: 2vh 20vw;
	max-width: 36rem;
}

main h2 {
	margin-top: 0;
	font-weight: 600;
	line-height: 1.3;
	margin-left: -5vw;
}

main h4 { 
	font-weight: 100;
	font-size: 0.7em;
	line-height: 1.5;
	margin-left: -5vw;
}

main p+h4 {
	line-height: 2.1;
}

main h4 a:link, main h4 a:visited { 	
	color: rgba(8,8,4,0.5);
	text-decoration: none;
}

main h4 a:active, main h4 a:hover, main h4 a:focus { 	
	color: rgba(8,8,4,0.7);
	text-decoration-color: rgba(8,8,4,0.2);
	text-decoration: underline;
}

main p+p {
	text-indent: 1.5rem;
}

main p+p.first {
	margin-top: 2.1;
	text-indent: 0;
}

main p.note {
	font-style: italic;
	color: rgba(8,8,4,0.9);
}

main blockquote {
	border-left: 0.5rem solid rgba(200,200,150,0.1);
	padding-left: 1rem;
	font-size: 0.75rem;
	line-height: 2;
	margin: 0.75rem 1.5rem 0.75rem 0;
}

em.emphasis,
main p:focus {
	background-color: rgba(255,255,204,0.5);
}

.info {
	cursor: help;
	text-decoration: underline;
	text-decoration-style: dotted;
	text-decoration-color: rgba(0,0,0,0.2);
}

footer {
	font-size: 0.75rem;
	line-height: 1.1;
	border-top: 1px dotted rgba(0,0,0,0.2);
	margin-bottom: 10vh;
}

footer address,
#archive,
#copyright {
	text-align: left;
	padding-left: 20vw;
}

footer hr { 
	margin: 0.75rem 0;
}

footer>*:not(hr){
	padding-top: 1.5rem;
	font-weight: 100;
	text-transform: lowercase;
}

#copyright p:first-of-type a {
	text-transform: normal;
	font-variant-caps: small-caps;
}

footer a:link, 	footer a:visited { 
	color: inherit;
}

footer a:active, footer a:focus, footer a:hover { 
	color: rgba(220,20,60,0.8);
}

footer address a {
	font-style: normal;
}

footer address a:not(:first-child) {
	margin-left: -0.1rem;
}

#copyright {
	margin-top: -0.5rem;
	margin-left: 0.2rem;
	padding-bottom: 1rem;
	border-bottom: 1px dotted rgba(0,0,0,0.1);
}