@charset "UTF-8";

/* Import ET Book styles
   adapted from https://github.com/edwardtufte/et-book/blob/gh-pages/et-book.css */

@font-face {
	font-family: "et-book";
	src: url("fonts/et-book-roman-line-figures.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "et-book";
	src: url("fonts/et-book-display-italic-old-style-figures.woff2") format("woff2");
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "et-book";
	src: url("fonts/et-book-bold-line-figures.woff2") format("woff2");
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "et-book-roman-old-style";
	src: url("fonts/et-book-roman-old-style-figures.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

/* Tufte CSS styles */

html {
	font-size: 15px;
}

body {
	width: 87.5%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 3rem;
	padding-left: 12.5%;
	font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	background-color: #fffff8;
	color: #111;
	max-width: 1400px;
	counter-reset: sidenote-counter;
	-webkit-text-size-adjust: 100%;
}

#header-inner a.logo-text {
	font-size: 3.5rem;
	font-weight: bold;
	background: none !important;
	margin-bottom: 1.2rem;
	margin-top: 3rem;
}
	
p.subtitle {
	font-style: italic;
	margin-top: 1rem;
	margin-bottom: 1rem;
	font-size: 1.8rem;
	display: block;
	line-height: 1;
	color: gray;
}

/* Navigation */

#main-nav {
	max-width: 87.5%;
	margin-top: 2em;
}

#main-nav a.main-nav-link {
	font-size: 1.1rem;
	margin-right: .5rem;
}

nav#page-nav a, span {
  	font-size: 1.3rem;
}

span.prev {
	margin-right: 1rem;
}

/* search styling */

#list_results {
	max-width: 87.5%;
}

/* Heading and horizontal rule styles
	- h1 for titles, and two levels of subheadings */

h1 {
	font-weight: 400;
	margin-top: 5rem;
	margin-bottom: 1.5rem;
	font-size: 3.2rem;
	line-height: 1;
	width: 55%;
}

h2 {
	font-style: italic;
	font-weight: 400;
	margin-top: 2.1rem;
	margin-bottom: 1.4rem;
	font-size: 2.2rem;
	line-height: 1;
}

h3 {
	font-style: italic;
	font-weight: 400;
	font-size: 1.7rem;
	margin-top: 2rem;
	margin-bottom: 1.4rem;
	line-height: 1;
}

hr {
	height: 1px solid lightgray;
	width: 87.5%;
	margin: 1em 0;
	padding: 0;
}

/* Summary field styling
	- this is a synopsis of a post that can be applied using a shortcode
	- will populate by itself (if present) on the index page with a read-more link */

p.p-summary {
	font-style: italic;
	margin-top: 0;
	margin-bottom: 1rem;
	font-size: 1.8rem;
	display: block;
	line-height: 2rem;
}

span.p-summary {
	font-size: 15px;
	font-style: italic;
	display: block;
}

/* Article meta styling */

div.article-meta  span.pubdate, span.permalink, span.read-time, span.catlist, a.article-category-link {
	font-size: 1.1rem !important;
}

.article-meta {
	line-height: 1.5rem;
}

/* General element styling */
.numeral {
	font-family: et-book-roman-old-style;
}

.danger {
	color: red;
}

article {
	padding: 2rem 0rem;
}

.archive-category {
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
	padding-bottom: 1rem;
}

.archive_categories {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 2em;
}

.archive_categories a {
	margin: 0 1em 0 0;
}

.layout-title span {
	display: block;
	font-size: 1.5rem;
	font-weight: 400;
	padding-bottom: 1rem;
}

section {
	padding-top: 1rem;
	padding-bottom: 1rem;
}

p,
dl,
ol,
ul {
	font-size: 1.4rem;
	line-height: 2rem;
}

p {
	margin-top: 1.4rem;
	margin-bottom: 1.4rem;
	padding-right: 0;
	vertical-align: baseline;
}

div#footer-info {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

dt:not(:first-child),
li:not(:first-child) {
	margin-top: 0.25rem;
}

.sans {
	font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
	letter-spacing: .03em;
}

.photos-grid-container a:link, .tufte-underline, .hover-tufte-underline:hover img.photos-grid-item {
	background: none;
}

img {
	max-width: 100%;
	display: flex;
	height: auto;
	margin: 2em 0;
	border-radius: 5px;
	box-shadow: 0 0 10px 0 darkgray;
}

video, audio {
	display: flex;
	height: auto;
	max-width: 55%;
} 


/* Newthought element styling
	- shortcode to start highlight the first few words of a new section or thought */
span.newthought {
	font-variant: small-caps;
	font-size: 1.2em;
}

.fullwidth {
	max-width: 90%;
	clear:both;
}

input.margin-toggle {
	display: none;
}

.iframe-wrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}

.iframe-wrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.email-reply p, .conversation-reply p {
  	font-size: 1.2rem;
}

/* Chapter Epigraphs */

div.epigraph {
	margin: 5em 0;
}

div.epigraph > blockquote {
	margin-top: 3em;
	margin-bottom: 3em;
}

div.epigraph > blockquote,
div.epigraph > blockquote > p {
	font-style: italic;
}

div.epigraph > blockquote > footer {
	font-style: normal;
}

div.epigraph > blockquote > footer > cite {
	font-style: italic;
}

/* Blockquotes */

blockquote {
	font-size: 1.4rem;
}

blockquote p {
	width: 55%;
	margin-right: 40px;
}

blockquote footer {
	width: 55%;
	font-size: 1.1rem;
	text-align: right;
}

/* Section spacing for left-side content */

section > p,
section > footer,
section > table {
	width: 55%;
}

/* 50 + 5 == 55, to be the same width as paragraph */
section > dl,
section > ol,
section > ul {
	width: 50%;
	-webkit-padding-start: 5%;
}


/* Links: replicate underline that clears descenders */
a:link,
a:visited {
	color: inherit;
}

.no-tufte-underline:link {
	background: unset;
	text-shadow: unset;
}

a:link, .tufte-underline, .hover-tufte-underline:hover {
    text-decoration: none;
    background: -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(#fffff8, #fffff8), -webkit-linear-gradient(currentColor, currentColor);
    background: linear-gradient(#fffff8, #fffff8), linear-gradient(#fffff8, #fffff8), linear-gradient(currentColor, currentColor);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #fffff8, -0.03em 0 #fffff8, 0 0.03em #fffff8, 0 -0.03em #fffff8, 0.06em 0 #fffff8, -0.06em 0 #fffff8, 0.09em 0 #fffff8, -0.09em 0 #fffff8, 0.12em 0 #fffff8, -0.12em 0 #fffff8, 0.15em 0 #fffff8, -0.15em 0 #fffff8;
    background-position: 0% 93%, 100% 93%, 0% 93%;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	a:link, .tufte-underline, .hover-tufte-underline:hover {
		background-position-y: 87%, 87%, 87%;
	}
}

a:link::selection,
a:link::-moz-selection {
	text-shadow: 0.03em 0 #b4d5fe, -0.03em 0 #b4d5fe, 0 0.03em #b4d5fe, 0 -0.03em #b4d5fe, 0.06em 0 #b4d5fe, -0.06em 0 #b4d5fe, 0.09em 0 #b4d5fe, -0.09em 0 #b4d5fe, 0.12em 0 #b4d5fe, -0.12em 0 #b4d5fe, 0.15em 0 #b4d5fe, -0.15em 0 #b4d5fe;
	background: #b4d5fe;
}

/* Adds dark mode */

@media (prefers-color-scheme: dark) {
	body {
		background-color: #2E3440 !important;
		color: #D8DEE9;
	}
  	p.subtitle {
      	color: #5E81AC;
  	}
	.microblog_post {
      	background: #D8DEE9 !important;
		color: #111;
      	box-shadow: 0 0 10px 0 black !important;
	}
  	.microblog_post a:link, .tufte-underline, .hover-tufte-underline:hover {
        text-shadow: 0.03em 0 #D8DEE9, -0.03em 0 #D8DEE9, 0 0.03em #D8DEE9, 0 -0.03em #D8DEE9, 0.06em 0 #D8DEE9, -0.06em 0 #D8DEE9, 0.09em 0 #D8DEE9, -0.09em 0 #D8DEE9, 0.12em 0 #D8DEE9, -0.12em 0 #D8DEE9, 0.15em 0 #D8DEE9, -0.15em 0 #D8DEE9 !important;
    }
	.microblog_fullname {
		color: #111;
	}
  	img.microblog_avatar {
      	box-shadow: 0 0 10px 0 darkgray !important;
  	}
	img {
		box-shadow: 0 0 10px 0 black;
	}
	.post-stats-tbl td, .post-stats-tbl th {
		border-bottom: 1px solid #D8DEE9 !important;
	}
	table.post-stats-tbl {
		color: #D8DEE9 !important;
	}
}

@media (prefers-color-scheme: dark) {
	a:link, .tufte-underline, .hover-tufte-underline:hover {
        text-shadow: 0.03em 0 #2E3440, -0.03em 0 #2E3440, 0 0.03em #2E3440, 0 -0.03em #2E3440, 0.06em 0 #2E3440, -0.06em 0 #2E3440, 0.09em 0 #2E3440, -0.09em 0 #2E3440, 0.12em 0 #2E3440, -0.12em 0 #2E3440, 0.15em 0 #2E3440, -0.15em 0 #2E3440;
    }
}

/* Sidenotes, margin notes, figures, captions */

figure {
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	max-width: 55%;
	-webkit-margin-start: 0;
	-webkit-margin-end: 0;
	margin: 0 0 3em 0;
}

figcaption {
	float: right;
	clear: right;
	margin-top: 0;
	margin-bottom: 1.5rem;
	font-size: 1.1rem;
	line-height: 1.6;
	vertical-align: baseline;
	position: relative;
	max-width: 30%;
}

figure.fullwidth figcaption {
	margin-right: 0%;
}
	

.sidenote,
.marginnote {
	float: right;
	clear: right;
	margin-right: -60%;
	width: 50%;
	margin-top: 0.3rem;
	margin-bottom: 0;
	font-size: 1.1rem;
	line-height: 1.3;
	vertical-align: baseline;
	position: relative;
}

.sidenote-number {
	counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
	font-family: et-book-roman-old-style;
	position: relative;
	vertical-align: baseline;
}

.sidenote-number:after {
	content: counter(sidenote-counter);
	font-size: 1rem;
	top: -0.5rem;
	left: -0.2rem;
}

.sidenote:before {
	content: counter(sidenote-counter) " ";
	font-size: 1rem;
	top: -0.5rem;
}

blockquote .sidenote,
blockquote .marginnote {
	margin-right: -82%;
	min-width: 59%;
	text-align: left;
}

label.sidenote-number {
	display: inline-block;
	max-height: 2rem; /* should be less than or equal to paragraph line-height */
}

label.margin-toggle:not(.sidenote-number) {
	display: none;
}

/* Tables */

div.fullwidth,
table.fullwidth {
	width: 100%;
}

div.table-wrapper {
	overflow-x: auto;
	font-family: "Trebuchet MS", "Gill Sans", "Gill Sans MT", sans-serif;
}

/* Post Stats plugin styling */

table.post-stats-tbl {
	font-size: 1.3em;
	color: #111;
}

table.post-stats-tbl {
	margin-bottom: 3em;
}

table.post-stats-tbl:last-of-type {
	margin-bottom: 3em;
}

.post-stats-tbl td, .post-stats-tbl th {
	border-bottom: 1px solid #111;
}

.post-stats-hd {
	text-decoration: none !important;
}

#yearchart {
	max-width: 87.5% !important;
}

.categorycloud-item sup {
	padding: 0 .3em;
	font-weight: bold;
}

a.categorycloud-item {
	margin-right: 1em;
	background: none;
} 

/* Code sections */

code, pre > code {
	font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
	font-size: 1.0rem;
	line-height: 1.42;
	-webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS. See https://github.com/edwardtufte/tufte-css/issues/81#issuecomment-261953409 */
}

.sans > code {
	font-size: 1.2rem;
}

h1 > code,
h2 > code,
h3 > code {
	font-size: 0.80em;
}

.marginnote > code,
.sidenote > code {
	font-size: 1rem;
}

pre > code {
	font-size: 0.9rem;
	width: 52.5%;
	margin-left: 2.5%;
	overflow-x: auto;
	display: block;
}

pre.fullwidth > code {
	width: 90%;
}

/* Poetry styling
	- used in conjunction with poetry shortcode
	- poetry class added to <pre> block
	- treats the code block as normal wrapped lines between words with regular et-book font
	- allows for maintaining indent and line return*/

pre.poetry {
	width: 100% !important;
	white-space: pre-wrap;
	padding-bottom: 1rem;
}

pre.poetry > code {
	width: 70% !important;
	margin-left: 0;
	overflow-x: auto;
	display: block;
	font-family: et-book, Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	font-size: 1.4rem !important;
	line-height: 2rem;
	-webkit-text-size-adjust: 100%;
}

pre.poetry > code p {
	margin-top: 0;
	margin-bottom: 0;
}

/* Bookshelf styling */

p.bookshelf_book {
	clear: both;
	margin: 2em 0;
}

p.bookshelf_book a img {
	margin: 1em 1em 1em 0;
	position: relative;
	top: -15px;
	padding-right: 0 !important;
} 

/* Microblog conversation styling */

.microblog_conversation {
	margin-top: 50px;
	padding-top: 20px;
	border-top: 1px solid lightgray;
	width: 87.5%;
}

.microblog_post {
	background: white;
	padding: 20px;
	margin-bottom: 1rem;
	border-style: solid;
	border-radius: 10px;
	border-width: 2px;
	border-color: #111;
	box-shadow: 0 0 10px 0 lightgray;
}

.microblog_user {
	display: inline-block;
} 

img.microblog_avatar {
	max-height: 60px !important;
	max-width: 60px !important;
	height: auto;
	width: auto;
	border-radius: 10px !important;
	vertical-align: top;
	box-shadow: 0 0 10px 0 darkgray;
	display: flex;
	float: left;
	margin: 0;
}

.microblog_fullname {
	padding-left: 1em;
	display: inline-block;
	margin-top: 16px;
}

.microblog_text {
	display: block;
}

.microblog_time {
	font-size: 13px;
	/*padding-top: 10px;*/
	color: gray;
	margin-top: 2em;
	text-align: left;
}

.microblog_time a {
	color: #111;
	text-decoration: none;
}

.microblog_post a:link, .tufte-underline, .hover-tufte-underline:hover {
    text-decoration: none;
    background: -webkit-linear-gradient(#ffffff, #ffffff), -webkit-linear-gradient(#ffffff, #ffffff), -webkit-linear-gradient(currentColor, currentColor);
    background: linear-gradient(#ffffff, #ffffff), linear-gradient(#ffffff, #ffffff), linear-gradient(currentColor, currentColor);
    -webkit-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    -moz-background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-size: 0.05em 1px, 0.05em 1px, 1px 1px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    text-shadow: 0.03em 0 #ffffff, -0.03em 0 #ffffff, 0 0.03em #ffffff, 0 -0.03em #ffffff, 0.06em 0 #ffffff, -0.06em 0 #ffffff, 0.09em 0 #ffffff, -0.09em 0 #ffffff, 0.12em 0 #ffffff, -0.12em 0 #ffffff, 0.15em 0 #ffffff, -0.15em 0 #ffffff;
    background-position: 0% 93%, 100% 93%, 0% 93%;
}

/* Media queries */

@media (max-width: 760px) {
	body {
		width: 84%;
		padding-left: 8%;
		padding-right: 8%;
	}
	
	#main-nav {
		max-width: 100%;
	}
	
	h1, h2, h3, hr,
	section > p,
	section > footer,
	section > table {
		width: 100%;
	}

	pre > code {
		width: 97%;
	}

	section > dl,
	section > ol,
	section > ul {
		width: 90%;
	}

	figure {
		max-width: 90%;
	}

	figcaption,
	figure.fullwidth figcaption {
		margin-right: 0%;
		max-width: none;
	}

	blockquote {
		margin-left: 1.5em;
		margin-right: 0em;
	}

	blockquote p,
	blockquote footer {
		width: 100%;
	}

	label.margin-toggle:not(.sidenote-number) {
		display: inline;
	}

	.sidenote,
	.marginnote {
		display: none;
	}

	.margin-toggle:checked + .sidenote,
	.margin-toggle:checked + .marginnote {
		display: block;
		float: left;
		left: 1rem;
		clear: both;
		width: 95%;
		margin: 1rem 2.5%;
		vertical-align: baseline;
		position: relative;
	}

	label {
		cursor: pointer;
	}

	div.table-wrapper,
	table {
		width: 85%;
	}
	
	.content.page img {
		max-width: 100%;
	}
}

@media screen and (max-width: 800px) { 
	html { 
		font-size: 13px;
	}
}

@media screen and (max-width: 428px) {
	.microblog_conversation {
		width: 100%;
	}
	pre.poetry, pre.poetry > code {
		width: 100% !important;
	}
	#list_results {
		max-width: 100%;
	}
	video, audio {
	display: flex;
	height: auto;
	max-width: 100%;
	} 
}