@charset "UTF-8";

/********************/
/* SOURCE SERIF PRO */
/********************/
/* workhorse font for the body; Baskerville-like */

@font-face {
	font-family: "Source Serif Pro";
	font-weight: 200;
	font-style: normal;
	src: url('/static/font/SourceSerifPro-BASIC-ExtraLight.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	/*	for body text, display as soon as possible (presumably as system font Baskerville)
		and re-render with Source Serif Pro whenever it downloads:
		https://developers.google.com/web/updates/2016/02/font-display
		https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display
		https://caniuse.com/#search=font-display
		*/
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 200;
	font-style: italic;
	src: url('/static/font/SourceSerifPro-BASIC-ExtraLightItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 300;
	font-style: normal;
	src: url('/static/font/SourceSerifPro-BASIC-Light.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 300;
	font-style: italic;
	src: url('/static/font/SourceSerifPro-BASIC-LightItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 400;
	font-style: normal;
	src: url('/static/font/SourceSerifPro-BASIC-Regular.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 400;
	font-style: italic;
	src: url('/static/font/SourceSerifPro-BASIC-RegularItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 600;
	font-style: normal;
	src: url('/static/font/SourceSerifPro-BASIC-Semibold.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 600;
	font-style: italic;
	src: url('/static/font/SourceSerifPro-BASIC-SemiboldItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 700;
	font-style: normal;
	src: url('/static/font/SourceSerifPro-BASIC-Bold.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 700;
	font-style: italic;
	src: url('/static/font/SourceSerifPro-BASIC-BoldItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 900;
	font-style: normal;
	src: url('/static/font/SourceSerifPro-BASIC-Black.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif Pro";
	font-weight: 900;
	font-style: italic;
	src: url('/static/font/SourceSerifPro-BASIC-BlackItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}

/*******************/
/* SOURCE SANS PRO */
/*******************/
/* used in Table of Contents as a better sans font; primarily intended for Mac/iOS users */

@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 200;
	font-style: normal;
	src: url('/static/font/SourceSansPro-BASIC-ExtraLight.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 200;
	font-style: italic;
	src: url('/static/font/SourceSansPro-BASIC-ExtraLightItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 300;
	font-style: normal;
	src: url('/static/font/SourceSansPro-BASIC-Light.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 300;
	font-style: italic;
	src: url('/static/font/SourceSansPro-BASIC-LightItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 400;
	font-style: normal;
	src: url('/static/font/SourceSansPro-BASIC-Regular.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 400;
	font-style: italic;
	src: url('/static/font/SourceSansPro-BASIC-RegularItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 600;
	font-style: normal;
	src: url('/static/font/SourceSansPro-BASIC-Semibold.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 600;
	font-style: italic;
	src: url('/static/font/SourceSansPro-BASIC-SemiboldItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 700;
	font-style: normal;
	src: url('/static/font/SourceSansPro-BASIC-Bold.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 700;
	font-style: italic;
	src: url('/static/font/SourceSansPro-BASIC-BoldItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 900;
	font-style: normal;
	src: url('/static/font/SourceSansPro-BASIC-Black.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}
@font-face {
	font-family: 'Source Sans Pro';
	font-weight: 900;
	font-style: italic;
	src: url('/static/font/SourceSansPro-BASIC-BlackItalic.ttf') format('truetype');
	unicode-range: U+0020-007E, U+2010, U+2013-2014, U+2018-2019, U+201C-201D;
	font-display: swap;
}

/***********/
/* GENERAL */
/***********/

html {
	padding: 0;
	margin: 0;

	background-color: #fff;
	color: #000;

	font-weight: 400;
	font-family: "Source Serif Pro", Baskerville, "Libre Baskerville", serif;
}
@media only screen and (max-width: 649px) {
	html {
		font-size: 18px;
	}
}

@media only screen and (min-width: 650px) {
	body {
		max-width: 1120px;
		padding: 0 15px 0 5px;
		margin: 0 auto;
	}
	@media only screen and (min-width: 1185px) {
		body {
			padding: 0 60px 0 5px;
		}
	}
	main {
		min-height: 100vh;
		display: flex;
		flex-flow: column;
	}
	article {
		flex: 1 1 auto;
	}
	#sidebar {
		position: absolute;
	}
	header,
	article {
		margin-left: 150px;
	}
}
@media only screen and (max-width: 649px) {
	body {
		margin: 0 10px;
	}
}

/***********/
/* SIDEBAR */
/***********/

#sidebar code {
	border: none;
	background-color: transparent;
	padding: 0;
}

#sidebar a {
	display: block;
}

@media only screen and (min-width: 650px) {
	#sidebar {
		font-variant: small-caps;
		padding: 0 40px 0 10px;
		width: 100px;
	}
	#sidebar a:hover {
		background-color: #eee;
	}

	#sidebar a#logo {
		margin: 1em 0 2em 0;
	}
	#sidebar a#logo:hover {
		background-color: transparent;
		opacity: 0.6;
	}
	#sidebar a#logo img {
		width: 64px;
	}

	#sidebar a.new,
	#sidebar a.patreon {
		border-top: 1px dotted #aaa;
	}
	#sidebar a.new {
		margin: 1.25em 0 0.5em 0;
		padding-top: 1.125em;
		box-shadow: 0 1.125em 0 0 #fff inset;
	}
	#sidebar a.patreon {
		font-size: 0.9em;
		margin-top: 1.375em;
		padding-top: 1.25em;
		box-shadow: 0 1.25em 0 0 #fff inset;
	}

	#sidebar a.mail,
	#sidebar a.rss,
	#sidebar a.r_gwern {
		line-height: 1;
		padding-left: 0.25em;
		font-size: 1.05em;
	}
	#sidebar a.mail::before,
	#sidebar a.rss::before,
	#sidebar a.r_gwern::before {
		content: "°\2007";
		text-shadow: 0 0 0 #000;
		position: relative;
		top: 0.25em;
	}

	#sidebar code {
		font-variant: none;
		text-transform: uppercase;
		font-size: 0.7em;
	}
}
@media only screen and (max-width: 649px) {
	#sidebar {
		justify-content: center;
		margin: 0 0 0.5em 0;
	}
	#sidebar a {
		border: 1px dotted #000;
		padding: 3px 10px;
		text-align: center;
		margin: 1px;
	}
	#sidebar a#logo {
		padding: 8px 5px 3px 5px;
	}

	#sidebar,
	#sidebar-links {
		display: flex;
	}
	#sidebar-links {
		flex-flow: row wrap;
		margin: 0.5em 0 0 0;
	}

	#sidebar a.home,
	#sidebar a.site,
	#sidebar a.links {
		flex: 1 1 20%;
	}
	#sidebar a.new,
	#sidebar a.mail,
	#sidebar a.rss,
	#sidebar a.r_gwern {
		padding: 3px 10px;
		flex: 1 1 auto;
	}
	#sidebar a.patreon {
		display: none;
	}

	#sidebar #logo {
		margin: calc(0.5em + 1px) 1px 1px 0;
	}
	#sidebar #logo img {
		width: 2.5rem;
	}
}

/***************/
/* PAGE HEADER */
/***************/

header {
	overflow: auto;
}
header h1 {
	margin: 0.75em 0;
	text-align: center;
	text-transform: none;
	font-variant: small-caps;
	font-size: 2.5em;
	line-height: 1.15;
	font-weight: 600;
	letter-spacing: -1px;
}

@media only screen and (max-width: 649px) {
	header h1 {
		font-size: 2em;
	}
}

/*********************/
/* ARTICLE CONTAINER */
/*********************/

/*  (i.e., article) */
/*  Nothing!
	*/

/***********************/
/* PAGE METADATA BLOCK */
/***********************/

#page-metadata hr {
	display: none;
}
#page-metadata {
	margin: 0 0 40px 0;
	overflow: auto;
	font-size: 0.95em;
	line-height: 1.5;
}

#page-metadata #abstract {
	display: block;
	margin: 0 auto 0.5em auto;
}
#page-metadata #abstract + br {
	display: none;
}

#page-metadata span:nth-of-type(n+3) {
	white-space: nowrap;
}

/*********************/
/* TABLE OF CONTENTS */
/*********************/

#TOC {
	border: 1px solid #ccc;
	background-color: #f9f9f9;
	font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif;
	margin: 0 40px 40px 0;
	line-height: 1.25;
	padding: 10px 10px 2px 14px;
}

#TOC:empty {
	display: none;
}

/*  On mobile, we want the TOC to be inline, but for desktop, we want it side by side with the content.
	*/
@media only screen and (min-width: 650px) {
	#TOC {
		float: left;
		max-width: 25%;
	}
}
@media only screen and (max-width: 649px) {
	#TOC {
		float: none;
		margin: 2em auto;
	}
}

/*=-------------------------------------------------------=*/
/*= Adjusting TOC font size for different viewport widths =*/
/*=-------------------------------------------------------=*/

@media only screen and (max-width: 1280px) {
	#TOC {
		font-size: 0.95rem;
	}
}
@media only screen and (max-width: 1200px) {
	#TOC {
		font-size: 0.90rem;
	}
}
@media only screen and (max-width: 1120px) {
	#TOC {
		font-size: 0.85rem;
	}
}
@media only screen and (max-width: 1040px) {
	#TOC {
		font-size: 0.80rem;
	}
}
@media only screen and (max-width: 649px) {
	#TOC {
		font-size: 1rem;
	}
	#TOC a {
		display: inline-block;
	}
	#TOC li li a {
		padding: 0 0 1px 0;
	}
	#TOC li li li a {
		padding: 0 0 2px 0;
	}
	#TOC li li li li a {
		padding: 0 0 3px 0;
	}
	#TOC li li li li a {
		padding: 0 0 4px 0;
	}
}

/*=-----------------=*/
/*= TOC list layout =*/
/*=-----------------=*/

#TOC ul {
	list-style-type: none;
	padding-left: 0em;
	margin-bottom: 0;
	margin-top: 4px;
	padding-left: 1.4em;
	text-indent: 0;
	padding: 0;
}
#TOC ul ul {
	list-style-type: none;
	padding-left: 0.7em;
	margin-top: 2px;
}

#TOC li {
	font-weight: bold;
	margin: 5px 2px 10px 0;
	padding-left: 1.125em;
	position: relative;
	overflow-wrap: break-word;
	hyphens: auto;
}
#TOC li li {
	margin-bottom: 0;
	font-weight: normal;
	font-size: 0.9em;
}

#TOC p {
	margin-top: 9px;
	margin-bottom: 3px;
}

/*=------------------=*/
/*= TOC link styling =*/
/*=------------------=*/

#TOC a {
	border: 0;
}
#TOC a:hover {
	text-shadow: 1px 1px 3px #777;
}

/*=-------------------------------=*/
/*= Wikipedia-style TOC numbering =*/
/*=-------------------------------=*/

#TOC > ul {
	counter-reset: htoc_1;
}
#TOC > ul > li::before {
	counter-increment: htoc_1;
	content: counter(htoc_1) "\2006  ";
}
#TOC > ul ul {
	counter-reset: htoc_2;
}
#TOC > ul ul li::before {
	counter-increment: htoc_2;
	content: counter(htoc_1) "." counter(htoc_2) "\2006  ";
}
#TOC > ul ul ul {
	counter-reset: htoc_3;
}
#TOC > ul ul ul li::before {
	counter-increment: htoc_3;
	content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "\2006  ";
}
#TOC > ul ul ul ul {
	counter-reset: htoc_4;
}
#TOC > ul ul ul ul li::before {
	counter-increment: htoc_4;
	content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "." counter(htoc_4) "\2006  ";
}
#TOC > ul ul ul ul ul {
	counter-reset: htoc_5;
}
#TOC > ul ul ul ul ul li::before {
	counter-increment: htoc_5;
	content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "." counter(htoc_4) "." counter(htoc_5) "\2006  ";
}
#TOC > ul ul ul ul ul ul {
	counter-reset: htoc_6;
}
#TOC > ul ul ul ul ul ul li::before {
	counter-increment: htoc_6;
	content: counter(htoc_1) "." counter(htoc_2) "." counter(htoc_3) "." counter(htoc_4) "." counter(htoc_5) "." counter(htoc_6) "\2006  ";
}
#TOC ul li::before {
	position: absolute;
	left: -3em;
	width: 4em;
	text-align: right;
	font-weight: normal;
	opacity: 0.4;
}

/****************/
/* MAIN CONTENT */
/****************/

#markdownBody {
/* 	overflow: auto; */

	/*	Try to avoid scrollbars on paragraphs: prevents long unbroken
		un-hyphenatable lines from causing H-scrolling
		*/
	overflow-wrap: break-word;
}

@media only screen and (min-width: 650px) {
	/*	Replaces A/B-test-set average value; the wider the screen, the more
		line-height is necessary, and no one size suits all, so set 3 brackets
		of increasing height.
		*/
	@media only screen and (max-width: 1000px) {
		#markdownBody {
			line-height: 1.45;
		}
	}
	@media only screen and (min-width: 1001px) and (max-width: 1200px) {
		#markdownBody {
			line-height: 1.5;
		}
	}
	@media only screen and (min-width: 1201px) {
		#markdownBody {
			line-height: 1.55;
		}
	}
}

/*	Use justified text (words get broken/hyphenated as necessary to avoid a
	'ragged margin'), undoing the default of 'flush left, ragged' right (see
	https://en.wikipedia.org/wiki/Typographic_alignment#Flush_left )
	*/
@supports (-webkit-hyphens: auto) or (-ms-hyphens: auto) or (hyphens: auto) {
	#markdownBody p {
		text-align: justify;
		-webkit-hyphens: auto;
		-ms-hyphens: auto;
		hyphens: auto;
	}
}

/*  Cute 'old-style' numerals, look a little nicer inline in text:
	https://practicaltypography.com/alternate-figures.html#oldstyle-figures
	*/
#markdownBody p {
	font-variant-numeric: oldstyle-nums;
}

#markdownBody > blockquote:first-child,
.collapseSummary blockquote {
	margin: 0 0 1.5em 0;
	box-shadow:
		0 0 0 5px #fff inset,
		0 0 0 6px #ccc inset;
	border-color: #bbb;
	padding: 0.9rem 1.25rem 0.95rem 1.25rem;
}

/************/
/* SECTIONS */
/************/
/*  Use: annotate collapsible section headers with '{.collapse}' (in the Markdown);
	for sections where I want a summary/abstract (eg in Notes.page/Statistical-notes.page),
	one annotate summaries to keep uncollapsed with '<div class="collapseSummary">summary</div>'.
	(Pandoc Markdown does support a native div syntax, but it's long and ugly.)
	*/

.collapse {
	position: relative;
}
.collapse > :first-child {
	padding-right: 1em;
}
.collapse:not(:target) .disclosure-button:not(:checked) ~ :not(.collapseSummary) {
	max-height: 0;
	overflow: hidden;
	padding: 0;
	margin: 0;
	border: none;
}
.disclosure-button {
	position: absolute;
	top: -2px;
	right: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	height: 2em;
	width: 2em;
	margin: 0;
	overflow: visible;
	cursor: pointer;
	border: 1px solid transparent;
}
.disclosure-button:not(:checked) {
	height: 100%;
	width: 100%;
}
.disclosure-button::before {
	content: "\25C0";
	font-size: 1.5em;
	line-height: 1;
	position: absolute;
	right: 0;
	top: 0;
	width: 1em;
	height: 1em;
	color: #999;
	padding: 4px 0 4px 8px;
}
.disclosure-button:checked::before {
	transform: rotate(-90deg);
}
.disclosure-button:not(:checked)::after {
	width: 100%;
	position: absolute;
	text-align: center;
	color: #777;
	text-shadow: none;
	pointer-events: none;
}
.disclosure-button:not(:checked)::after {
	content: "…";
	font-size: 3em;
	line-height: 0;
	top: calc(100% - 16px);
}
.disclosure-button:not(:checked):hover::after {
	content: "Click to expand";
	font-size: 1em;
	top: calc(100% - 8px);
}
.disclosure-button:not(:checked):hover {
	border: 1px dotted #777;
}
.disclosure-button:not(:checked) ~ .collapseSummary > :first-child {
	margin-top: 0;
}
.disclosure-button:not(:checked) ~ .collapseSummary > :last-child {
	margin-bottom: 20px;
}
.disclosure-button:focus {
	outline: none;
	text-shadow:
		0 0 1px red,
		0 0 3px red,
		0 0 5px red;
}

/************/
/* HEADINGS */
/************/

/* HEADER H1-6 HIERARCHY */
h1, h2, h3, h4, h5, h6 {
	margin: 1.5em 0 0.75em 0;
	font-weight: bold;
}

/* uppercase top-lvel section headers; see A/B tests */
h1 {
	text-transform: uppercase;
	line-height: 1.25;
	font-size: 1.375em;
}

article section > h1 {
	overflow: visible;
}

/* make a hierarchy of emphasis for h2-6, to avoid all being the same (all-uppercased) */
h2 {
	text-transform: uppercase;
	font-size: 1.1em;
}
h3 {
	text-transform: capitalize;
	font-size: 1.1em;
}
h4 {
	text-transform: capitalize;
}
h5 {
	font-size: 1em;
}
h6 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
}

/*=----------------------------=*/
/*= Section heading self-links =*/
/*=----------------------------=*/

article #markdownBody section > :first-child a {
	display: block;
	background: none;
}
#markdownBody section > :first-child a:hover {
	color: #485555;
}
#markdownBody section > :first-child a::after {
	content: "\00B6";
	font-size: 0.75em;
	position: relative;
	top: -3px;
	left: 5px;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0s ease 0.1s;
}
#markdownBody section > :first-child a:hover::after,
#markdownBody section > :first-child a:active::after,
#markdownBody section > :first-child a:focus::after,
#markdownBody section:target > :first-child a::after {
	visibility: visible;
	opacity: 1;
}
#markdownBody section:target > :first-child a::after {
	opacity: 0.5;
}

/**********/
/* FOOTER */
/**********/

#footer {
	padding-top: 30px;
	font-size: 0.9em;
	text-align: center;
}

/**********/
/* DISQUS */
/**********/

#disqus_thread {
	padding-left: 0.5em;
}

/*********/
/* LINKS */
/*********/

a {
	color: #303C3C; /* off-black */
	text-decoration: none;
}
article > :not(#TOC) a:hover {
	color: #999;
}

#markdownBody a {
	word-wrap: break-word; /* force the occasional inline URL or other long word to break at max-width */
}

/*=------------------------=*/
/*= Fancy link underlining =*/
/*=------------------------=*/

/* Tufte CSS for underlining (https://github.com/edwardtufte/tufte-css)
   The advantage of all this CSS linenoise compared to the previous 'text-decoration: none; border-bottom: 1px Solid grey;' solution from http://devhints.wordpress.com/2006/10/24/css-links-with-different-color-underlines/
   is that when dealing with characters with 'descenders', like 'y', 'g', 'p', 'q' etc, with regular underlining the bottom stroke overlaps with the line and it's harder to read;
   by adding this text-shadow stuff and backgrounding, a little break is made in the underline to add contrast and keep the descender fully visible and outlined.
   Unfortunately, we don't want to add underlines to the TOC because it clutters it (all the lines are links and are in small font), so we have to avoid styling the TOC, which is difficult.
   I got around this by adding in the Hakyll template an additional <div> just for the body of the Markdown content, excluding the TOC, and changing the Tufte CSS to target *that* instead. */
article > :not(#TOC) a:link {
	text-decoration: none;
	background:
		linear-gradient(#fffff8, #fffff8),
		linear-gradient(#fffff8, #fffff8),
		linear-gradient(#333,    #333);
	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%;
}
article > :not(#TOC) a:link::selection,
article > :not(#TOC) a:link *::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;
}
article > :not(#TOC) a:link::-moz-selection,
article > :not(#TOC) 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;
}

/*********/
/* LISTS */
/*********/

#markdownBody ul,
#markdownBody ol {
	list-style-type: none;
	margin: 1.25em 0 1.5em 0;
	padding: 0 0 0 2.5em;
	overflow: hidden;
}
#markdownBody li > ul,
#markdownBody li > ol {
	margin: 0.5em 0 0.5em 0;
}

#markdownBody ul > li,
#markdownBody ol > li {
	position: relative;
	margin: 0;
}
#markdownBody ul > li:nth-of-type(n+2),
#markdownBody ol > li:nth-of-type(n+2) {
	margin: 0.5em 0 0 0;
}

#markdownBody ul > li::before,
#markdownBody ol > li::before {
	position: absolute;
}

@media only screen and (max-width: 649px) {
	#markdownBody ul,
	#markdownBody ol {
		list-style-type: none;
		margin: 1.25em 0 1.5em 1.75em;
		padding: 0;
	}
	#markdownBody li > ul,
	#markdownBody li > ol {
		margin: 0.5em 0 0.5em 1.75em;
	}
}

/*=-----------------------=*/
/*= Bulleted list markers =*/
/*=-----------------------=*/

#markdownBody ul > li::before {
	color: #888;
	font-size: 0.875em;
	top: 0.125em;
	left: -1.375em;
}

#markdownBody ul > li::before,
#markdownBody ul ul ul > li::before {
	content: "\2727";
}
#markdownBody ul ul > li::before,
#markdownBody ul ul ul ul > li::before {
	content: "\2726";
}

/*=-----------------------=*/
/*= Numbered list markers =*/
/*=-----------------------=*/

#markdownBody ol {
	counter-reset: ol;
}
#markdownBody ol > li {
	counter-increment: ol;
}
#markdownBody ol > li::before {
	content: counter(ol) ".";
	width: 2em;
	right: calc(100% + 0.5em);
	text-align: right;
	font-feature-settings: 'onum';
	color: #444;
}

#markdownBody ol ol {
	list-style-type: lower-roman;
	margin-left: 2em;
}
#markdownBody ol ol > li {
	padding: 0 0 0 0.25em;
}
#markdownBody ol ol > li::before {
	content: none;
}

#markdownBody ol ol ol {
	list-style-type: lower-alpha;
}

/*=------------------=*/
/*= Weird edge cases =*/
/*=------------------=*/

li > ul + p,
li > ol + p {
	margin-top: 1em;
}

/**********/
/* IMAGES */
/**********/

figure {
	margin: 1.75em 2em 1.5em 2em;
}
figure img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 5px auto;
	border: 1px solid #888;
}
figcaption {
	text-align: center;
	font-size: 0.9375em;
	font-weight: bold;
}

/**********/
/* VIDEOS */
/**********/

video {
	margin: 0 auto 0.5em auto;
	display: block;
	border: 1px solid #888;
	max-width: 100%;
	height: auto;
}

/***************/
/* BLOCKQUOTES */
/***************/

blockquote {
	margin: 1.5em 1.5em 1.75em 1.5em;
	border: 0.5px solid #ccc;
	font-size: 0.95em;
	padding: 0.8rem 1rem;
}

@media only screen and (min-width: 650px) {
	blockquote {
		overflow: hidden;
	}
}
@media only screen and (max-width: 649px) {
	/* even less horizontal is available on mobile! */
	blockquote {
		margin: 1.25em 0 1.5em 0;
	}
}

/*  Note the awful hack by which we implement 'alternating'/zebra-stripe coloring of quotes.

	See A/B tests: this highlighting is better than no highlighting.
	*/
blockquote,
blockquote blockquote blockquote,
blockquote blockquote blockquote blockquote blockquote {
	z-index: -2;
	background-color: #f5f5f5;
}
blockquote blockquote,
blockquote blockquote blockquote blockquote,
blockquote blockquote blockquote blockquote blockquote blockquote {
	background-color: #e6e6e6;
}

article > :not(#TOC) a:link q,
article > :not(#TOC) q a:link,
article > :not(#TOC) blockquote a:link,
article > :not(#TOC) blockquote blockquote blockquote a:link,
article > :not(#TOC) blockquote blockquote blockquote blockquote blockquote a:link {
	text-shadow:
		 0.03em 0       #f5f5f5,
		-0.03em 0       #f5f5f5,
		 0      0.03em  #f5f5f5,
		 0     -0.03em  #f5f5f5,
		 0.06em 0       #f5f5f5,
		-0.06em 0       #f5f5f5,
		 0.09em 0       #f5f5f5,
		-0.09em 0       #f5f5f5,
		 0.12em 0       #f5f5f5,
		-0.12em 0       #f5f5f5,
		 0.15em 0       #f5f5f5,
		-0.15em 0       #f5f5f5;
}
article > :not(#TOC) blockquote blockquote a:link,
article > :not(#TOC) blockquote blockquote blockquote blockquote a:link,
article > :not(#TOC) blockquote blockquote blockquote blockquote blockquote blockquote a:link {
	text-shadow:
		 0.03em 0       #e6e6e6,
		-0.03em 0       #e6e6e6,
		 0      0.03em  #e6e6e6,
		 0     -0.03em  #e6e6e6,
		 0.06em 0       #e6e6e6,
		-0.06em 0       #e6e6e6,
		 0.09em 0       #e6e6e6,
		-0.09em 0       #e6e6e6,
		 0.12em 0       #e6e6e6,
		-0.12em 0       #e6e6e6,
		 0.15em 0       #e6e6e6,
		-0.15em 0       #e6e6e6;
}

blockquote blockquote {
	margin: 1em 1px;
}

/*=--------------------=*/
/*= Various edge cases =*/
/*=--------------------=*/

#markdownBody blockquote blockquote:first-child {
	margin: 0.25em 1px 1em 1px;
}

#markdownBody blockquote > :last-child,
#markdownBody blockquote > :last-child > :last-child,
#markdownBody blockquote > :last-child > :last-child > :last-child,
#markdownBody blockquote > :last-child > :last-child > :last-child > :last-child {
	margin-bottom: 0;
}
#markdownBody blockquote > :first-child,
#markdownBody blockquote > :first-child > :first-child,
#markdownBody blockquote > :first-child > :first-child > :first-child,
#markdownBody blockquote > :first-child > :first-child > :first-child > :first-child {
	margin-top: 0;
}

#markdownBody blockquote > ul:only-child,
#markdownBody blockquote > ol:only-child {
	margin-left: 1.5em;
}

/*  Interviews (e.g. https://www.gwern.net/Morning-writing#examples).
	*/
blockquote p > code:first-child,
blockquote p > a:first-child code:first-child {
	border: none;
	background-color: transparent;
	font-weight: bold;
	font-family: inherit;
	padding: 0;
	font-size: inherit;
}

/*****************/
/* INLINE QUOTES */
/*****************/

q {
	background-color: rgba(0,0,0,0.04);
	box-shadow: 0 0 0 2px rgba(0,0,0,0.04);
}
blockquote q {
	border-color: transparent;
	background-color: transparent;
	box-shadow: none;
}
/*  WARNING: because of the use of <q>s to get fancy highlighted quotes as syntax-highlighting,
	quote marks are not by default included in browser copy-paste, possibly annoying users.
	You need the following CSS & a line of JS in default.html to insert real quotes. */
q::before,
q::after {
	content: none;
}

/*************/
/* EPIGRAPHS */
/*************/
/* loosely inspired by https://edwardtufte.github.io/tufte-css/#epigraphs */

.epigraph {
	margin: 2em 0 2em 0;
	padding: 0.125em 2em 0 2em;
	overflow: hidden;
}
.epigraph blockquote {
	padding: 0;
	border: none;
	background-color: inherit;
	margin: 0;
	font-size: inherit;
	position: relative;
	z-index: 1;
	overflow: visible;
}
.epigraph q {
	font-style: italic;
	background-color: inherit;
}
.epigraph q em {
	font-style: normal;
} /* reverse back to normal when italics are used inside an epigraph */
#markdownBody .epigraph p:last-child {
	margin: 0.5em 0 0 0;
	text-align: right;
	font-size: 0.875em;
}
.epigraph p:nth-last-of-type(n+2) > q::before,
.epigraph p:nth-last-of-type(n+2) > q::after {
	display: none;
}
.epigraph blockquote::before,
.epigraph blockquote::after {
	display: block;
	position: absolute;
	font-size: 2.5em;
	opacity: 0.5;
}
.epigraph blockquote::before {
	content: "\201C";
	left: -0.65em;
	top: -0.375em;
}
.epigraph blockquote::after {
	content: "\201D";
	right: -0.65em;
	bottom: -0.875em;
}

article > :not(#TOC) .epigraph blockquote a:link,
article > :not(#TOC) .epigraph blockquote a:link q,
article > :not(#TOC) .epigraph blockquote q a:link {
	text-shadow:
		 0.03em 0       #fff,
		-0.03em 0       #fff,
		 0      0.03em  #fff,
		 0     -0.03em  #fff,
		 0.06em 0       #fff,
		-0.06em 0       #fff,
		 0.09em 0       #fff,
		-0.09em 0       #fff,
		 0.12em 0       #fff,
		-0.12em 0       #fff,
		 0.15em 0       #fff,
		-0.15em 0       #fff;
}

@media only screen and (max-width: 649px) {
	.epigraph {
		margin: 2.125em 1em 2em 1em;
		padding: 0;
		font-size: 0.95em;
		overflow: visible;
	}
	.epigraph blockquote::before {
		left: -0.375em;
		top: -0.75em;
	}
	.epigraph blockquote::after {
		right: -0.375em;
		bottom: -1.25em;
	}
}

/*************/
/* FOOTNOTES */
/*************/

/* make footnotes better: http://bytes.com/topic/html-css/answers/97932-superscript-doesnt-distort-line-spacing#post340658 */
sub,
sup {
	line-height: 0.3em;
}
a.footnote-ref sup {
	vertical-align: baseline;
}
a.footnote-ref {
	vertical-align: super;
	line-height: 0.3em;
	position: relative;
	padding: 0 1px;
	font-feature-settings: 'lnum';
}

/* Deal with multiple footnote superscripts one after another; per Charuru */
sup + sup,
a.footnote-ref + a.footnote-ref {
	margin-left: 1px;
}



#markdownBody .footnotes > ol > li + li {
	margin: 1em 0 0 0;
}

/*=------------------------=*/
/*= Back-to-citation links =*/
/*=------------------------=*/

#markdownBody .footnotes a.footnote-back {
	background: none;
	margin: 0 0 0 10px;
	position: relative;
	top: 3px;
	font-weight: bold;
	line-height: 1;
	border: 1px dotted #000;
	display: inline-block;
	padding: 5px 5px 0 6px;
	text-indent: 0;
}
#markdownBody .footnotes a.footnote-back:hover {
	border-color: #999;
}

#markdownBody .footnotes li {
	position: relative;
}
#markdownBody .footnotes blockquote + a.footnote-back,
#markdownBody .footnotes pre + a.footnote-back,
#markdownBody .footnotes .sourceCode + a.footnote-back {
	position: absolute;
	right: 0.5em;
	top: unset;
	bottom: -0.5em;
	background-color: #fff;
}

/*=--------------------------=*/
/*= Floating footnote popups =*/
/*=--------------------------=*/

/*	http://ignorethecode.net/blog/2010/04/20/footnotes/
	*/
#footnotediv {
	z-index: 1;
	font-size: 0.9em;
	box-shadow: 0 0 0 2px #fff;
	position: absolute;
}
#footnotediv > div {
	background-color: #fff;
	padding: 12px 16px 14px 16px;
	max-width: 800px;
	max-height: calc(100vh - 32px);
	border: 3px double #aaa;
	line-height: 1.45;
	overflow: auto;
}
#footnotediv > div::-webkit-scrollbar {
	width: 14px;
}
#footnotediv > div::-webkit-scrollbar-thumb {
	background-color: #ccc;
	box-shadow:
		0 0 0 3px #fff inset;
}
#footnotediv > div::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

#footnotediv a.footnote-back {
	display: none;
}

#footnotediv blockquote {
	margin: 1em 0;
}

/*  The following compensates for the variable edge case where the last
	blockquote within a floating footnote popup either DOES, or DOES NOT, have a
	back-to-citation link after it (which is not shown, if present, but makes it
	uncertain whether the blockquote is the last child of the popup or not. This
	code makes everything consistent regardless of which case applies.
	—Obormot (2019-02-17)
	*/
#footnotediv > div > blockquote:nth-last-child(2) {
	margin-bottom: 2px;
}
#footnotediv > div > blockquote:nth-last-child(2) + p {
	margin-top: 1em;
}

/**********/
/* TABLES */
/**********/

.tableWrapper {
	margin: 2em 0 2.125em 0;
	overflow: auto;
}
h1 + .tableWrapper,
h2 + .tableWrapper,
h3 + .tableWrapper,
h4 + .tableWrapper,
h5 + .tableWrapper,
h6 + .tableWrapper {
	margin: 0 0 2.125em 0;
}
/*=--------------------------------------------------=*/
/*= Horizontal scrollbar styling (Webkit/Blink only) =*/
/*=--------------------------------------------------=*/

.tableWrapper::-webkit-scrollbar {
	height: 16px;
}
.tableWrapper::-webkit-scrollbar-thumb {
	background-color: #ccc;
	box-shadow:
		0 0 0 3px #fafafa inset;
}
.tableWrapper::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

table {
	margin: 0;
	padding: 0;
	border-collapse: collapse;
	width: 100%;
	font-size: 0.65em;
	border: 1px solid #ddd;

	/*  'tabular figures' to make numbers line up in tables:
		https://practicaltypography.com/alternate-figures.html#tabular-and-proportional-figures
		https://helpx.adobe.com/fonts/using/open-type-syntax.html#tnum
		*/
	font-variant-numeric: tabular-nums;
}

/*
 * Tables.less
 * Tables for, you guessed it, tabular data
 * ---------------------------------------- */
/* from Twitter's bootstrap package; adds grid-lines to table */
table th,
table td {
	padding: 7px 10px;
	line-height: 1.35;
}
table th {
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	text-align: left;
}
table td {
	vertical-align: top;
}
table th + th,
table td + td {
	border-left: 1px solid #ddd;
}
table tr + tr td {
	border-top: 1px solid #ddd;
}

/* Add little icons to tables handled by tablesorter.js
   to advertise that they are sortable.
   http://tablesorter.com/docs/#Configuration */
th.header {
	background-image: url(/static/img/bg.gif);
	cursor: pointer;
	font-weight: bold;
	background-repeat: no-repeat;
	background-position: center left;
	padding-left: 20px;
}
th.header:hover {
	background-color: #e2f0f2;
}
th.headerSortUp {
	background-image: url(/static/img/small_asc.gif);
}
th.headerSortDown {
	background-image: url(/static/img/small_desc.gif);
}
th.headerSortUp,
th.headerSortDown,
th.headerSortUp:hover,
th.headerSortDown:hover {
	background-color: #8bd0ed;
	border: 1px solid #8bd0ed;
	color: #fff;
	text-shadow:
	   0.5px 0.5px 0 #000,
	   0 0 1px #000;
}

/* zebra-stripe tables (CSS3); from Twitter's bootstrap package */
tbody tr:nth-child(odd) td {
	background-color: #f9f9f9;
}
tbody tr:hover td {
	background-color: #eee;
	cursor: text;
}

/* CSS written by cwillu in order to rewrite the Modafinil page's table of prices */
#suppliers-prices th {
	padding: 3px 15px 2px 15px;
}
#suppliers-prices td {
	padding: 0 15px;
}
#suppliers-prices td:nth-child(1) {
	text-align: right;
}
#suppliers-prices td:nth-child(1):after {
	content: "mg/$";
}
#suppliers-prices td:nth-child(2) {
	text-align: right;
}
#suppliers-prices td:nth-child(2):after {
	content: "mg";
}
#suppliers-prices td:nth-child(3):before {
	content: "x";
}
#suppliers-prices td:nth-child(5):before {
	content: "$";
}

/**************/
/* PARAGRAPHS */
/**************/

p {
	margin: 0;
}
p + p {
	text-indent: 2.5em;
}

/***************/
/* CODE BLOCKS */
/***************/

code {
	background-color: #fafafa;
	border: 1px solid #c8c8c8;
	padding: 0 4px;
	/* Tufte CSS's monospace/sans suggestions, borrowing from Github: */
	font-family: "Liberation Mono", Consolas, Courier, monospace;
	font-size: 0.9em;
}
pre:not(.sourceCode) {
	overflow: auto;
}
pre.sourceCode code {
	overflow: auto;
}
pre code {
	display: block;
	padding: 8px 14px;
	margin: 0;
}

/*=--------------------------------------------------=*/
/*= Horizontal scrollbar styling (Webkit/Blink only) =*/
/*=--------------------------------------------------=*/

pre.sourceCode {
	border-bottom: 1px solid #c8c8c8;
}
pre code.sourceCode {
	border-bottom: 1px solid transparent;
}
pre code.sourceCode::-webkit-scrollbar {
	height: 16px;
}
pre code.sourceCode::-webkit-scrollbar-thumb {
	background-color: #ccc;
	box-shadow:
		0 1px 0 3px #fafafa inset;
}
pre code.sourceCode::-webkit-scrollbar-thumb:hover {
	background-color: #999;
}

/*=-------------------------------------------------------------------------=*/
/*= Source code highlighting; generated by pandoc/skylighting: 'kate' theme =*/
/*=-------------------------------------------------------------------------=*/

a.sourceLine {
	display: inline-block;
	line-height: 1.25;
}
a.sourceLine {
	pointer-events: none;
	color: inherit;
	text-decoration: inherit;
}
a.sourceLine:empty {
	height: 1.2em;
}
.sourceCode {
	overflow: visible;
}
code.sourceCode {
	white-space: pre;
	position: relative;
}
div.sourceCode {
	margin: 1.75em auto;
}
pre.sourceCode {
	margin: 0;
}
@media only screen {
	div.sourceCode {
		overflow: auto;
	}
}
@media print {
	code.sourceCode {
		white-space: pre-wrap;
	}
	a.sourceLine {
		text-indent: -1em;
		padding-left: 1em;
	}
}
pre.numberSource a.sourceLine {
	position: relative;
	left: -4em;
}
pre.numberSource a.sourceLine::before {
	content: attr(title);
	position: relative;
	left: -1em;
	text-align: right;
	vertical-align: baseline;
	border: none;
	pointer-events: all;
	display: inline-block;

	-webkit-touch-callout: none;
	-webkit-user-select: none;

	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	padding: 0 4px;
	width: 4em;
	background-color: #fff;
	color: #a0a0a0;
}
pre.numberSource {
	margin-left: 3em;
	border-left: 1px solid #a0a0a0;
	padding-left: 4px;
}
div.sourceCode {
	color: #1f1c1b;
	background-color: #fff;
}
@media only screen {
	a.sourceLine::before {
		text-decoration: underline;
	}
}

code span    { color: #1f1c1b; } /* Normal */
code span.al { color: #bf0303; background-color: #f7e6e6; font-weight: bold; } /* Alert */
code span.an { color: #ca60ca; } /* Annotation */
code span.at { color: #0057ae; } /* Attribute */
code span.bn { color: #b08000; } /* BaseN */
code span.bu { color: #644a9b; font-weight: bold; } /* BuiltIn */
code span.cf { color: #1f1c1b; font-weight: bold; } /* ControlFlow */
code span.ch { color: #924c9d; } /* Char */
code span.cn { color: #aa5500; } /* Constant */
code span.co { color: #898887; } /* Comment */
code span.cv { color: #0095ff; } /* CommentVar */
code span.do { color: #607880; } /* Documentation */
code span.dt { color: #0057ae; } /* DataType */
code span.dv { color: #b08000; } /* DecVal */
code span.er { color: #bf0303; text-decoration: underline; } /* Error */
code span.ex { color: #0095ff; font-weight: bold; } /* Extension */
code span.fl { color: #b08000; } /* Float */
code span.fu { color: #644a9b; } /* Function */
code span.im { color: #ff5500; } /* Import */
code span.in { color: #b08000; } /* Information */
code span.kw { color: #1f1c1b; font-weight: bold; } /* Keyword */
code span.op { color: #1f1c1b; } /* Operator */
code span.ot { color: #006e28; } /* Other */
code span.pp { color: #006e28; } /* Preprocessor */
code span.re { color: #0057ae; background-color: #e0e9f8; } /* RegionMarker */
code span.sc { color: #3daee9; } /* SpecialChar */
code span.ss { color: #ff5500; } /* SpecialString */
code span.st { color: #bf0303; } /* String */
code span.va { color: #0057ae; } /* Variable */
code span.vs { color: #bf0303; } /* VerbatimString */
code span.wa { color: #bf0303; } /* Warning */

/********/
/* MATH */
/********/

#markdownBody .MathJax_SVG {
	max-width: 100%;
	overflow: auto;
	vertical-align: bottom;
}
/*
#markdownBody #footnotediv .MathJax_SVG {
	vertical-align: unset;
}
 */

/********/
/* MISC */
/********/

/*  WHAT IS THIS???
	*/
p.hang {
	text-indent: -0.44em;
}

/*  WHAT IS THIS???
	*/
/* number formatting */
.num {
	font-size: 0.85em
}

hr {
	border: none;
	height: 0;
	border-bottom: 1px solid #aaa;
	margin: 1em 0;
}

/* hide the ad in the ad A/B test by default */
#ads {
	display: block;
	text-align: center;
	display: none;
}
#ads a img {
	max-width: 100%;
}

/*******************************/
/* PAGE-SPECIFIC MODIFICATIONS */
/*******************************/

/*=-------------------------=*/
/*= Index page & Tags pages =*/
/*=-------------------------=*/

/*  add some vertical padding for the introduction
	*/
body.siteIndex #markdownBody {
	padding-top: 15px;
}

/*  make the sections reflow; better than fixed-width tables
	*/
body.siteIndex article section {
	display: inline-block;
	vertical-align: top;
}

/*	No index self-link.
	*/
body.siteIndex #sidebar a#logo {
	pointer-events: none;
}

/*  Nice-looking bottom decoration.
	*/
body.siteIndex article,
body.tags article {
	position: relative;
	padding-bottom: 4em;
}
body.siteIndex article::after,
body.tags article::after{
	content: "";
	background-color: #fff;
	background-image: url('/images/logo-smooth.svg');
	display: block;
	position: absolute;
	bottom: 0.75em;
	width: 22px;
	height: 30px;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	left: 0;
	right: 0;
	margin: auto;
	padding: 0 10px 0 11px;
	z-index: 1;
}
body.siteIndex article::before,
body.tags article::before{
	content: "";
	display: block;
	position: absolute;
	bottom: calc(0.75em + 15px);
	height: 1px;
	border-bottom: 1px dotted #000;
	width: 100%;
	opacity: 0.5;
}

/*	Lists on the home page.
	*/
body.siteIndex #markdownBody ul,
body.tags #markdownBody ul {
	margin: 1.25em 3em 0 0;
	padding: 0 0 0 1.375em;
}
body.siteIndex #markdownBody li > ul,
body.tags #markdownBody li > ul {
	margin: 0.25em 0 0.25em 0;
}
body.siteIndex #markdownBody li,
body.tags #markdownBody li {
	margin-top: 0;
}
body.siteIndex #markdownBody > section ~ p {
	border-top: 1px dotted #777;
	margin: 2em 0 0 0;
	padding: 1em 0 0 0;
	font-weight: bold;
}

@media only screen and (min-width: 650px) {
	/*  Leave enough horizontal room to show multiple sections simultaneously,
		table-like
		*/
	body.siteIndex #markdownBody {
		width: 1350px;
		max-width: calc(50vw + 380px);
	}
	body.siteIndex p,
	body.siteIndex hr {
		max-width: 970px;
	}
}
@media only screen and (max-width: 649px) {
	body.siteIndex #sidebar #logo {
		border: 1px dotted transparent;
		align-self: flex-start;
		padding: 7px 5px 6px 5px;
	}
	body.siteIndex #markdownBody section {
		max-width: 100%;
	}
	body.siteIndex #markdownBody ul,
	body.tags #markdownBody ul {
		overflow-wrap: break-word;
		margin-right: 0;
	}
	body.siteIndex #markdownBody li,
	body.tags #markdownBody li {
		padding: 1px 0;
		margin: 2px 0 0 0;
	}
	body.siteIndex #markdownBody ul > li::before,
	body.tags #markdownBody ul > li::before {
		top: 0.25em;
	}
}

/*=-------=*/
/*= /Mead =*/
/*=-------=*/

/*	This is for the pictures of mead bottles next to the reviews.
	*/
body.mead p > img {
	float: right;
	max-height: 8em;
	width: auto;
	position: relative;
	z-index: 1;
	margin: 1em 1em 1em 2em;
	box-shadow:
		0 0 0 15px #fff,
		0 0 0 16px #ccc,
		0 0 0 17px transparent;
}

/********************************************TEMPORARY*****************************************************/
/* http://share.obormot.net/misc/gwern/image-focus.css http://share.obormot.net/misc/gwern/image-focus.js */
/* Clickable/zoomable images */
/***************/
/* IMAGE FOCUS */
/***************/

/*=-------------------=*/
/*= Scroll prevention =*/
/*=-------------------=*/

html.no-scroll {
	overflow-y: scroll;
	position: fixed;
	width: 100%;
}

/*=--------------=*/
/*= Hover styles =*/
/*=--------------=*/

#markdownBody img:hover {
	filter: drop-shadow(0 0 3px #777);
	cursor: zoom-in;
}
#markdownBody img:active {
	transform: scale(0.975);
}

/*=---------=*/
/*= Overlay =*/
/*=---------=*/

#image-focus-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	display: none;
	cursor: zoom-out;
}
#image-focus-overlay::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-color: #000;
	opacity: 0.5;
	z-index: -1;
}
#image-focus-overlay.engaged {
	display: initial;
}

#image-focus-overlay img {
	margin: auto;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
}

/*=---------=*/
/*= Caption =*/
/*=---------=*/

#image-focus-overlay .caption {
	position: absolute;
	bottom: 0.75em;
	background-color: rgba(0, 0, 0, 0.7);
	left: 4.5em;
	right: 4.5em;
	margin: auto;
	max-width: calc(100% - 9em);
	text-align: center;
	font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif;
	border-radius: 8px;
	z-index: 1;
	transition:
		bottom 0.15s ease;
}
@supports (width: -moz-fit-content) {
	#image-focus-overlay .caption {
		width: -moz-fit-content;
	}
}
@supports (width: fit-content) {
	#image-focus-overlay .caption {
		width: fit-content;
	}
}
#image-focus-overlay .caption.hidden {
	bottom: -50%;
	transition:
		bottom 0.5s ease-in;
}

#image-focus-overlay .caption p {
	margin: 1em 1.25em;
	color: #fff;
}

#image-focus-overlay .caption:not(:empty)::before {
	content: "";
	display: block;
	position: absolute;
	width: 100vw;
	height: calc(100% + 1.5em);
	z-index: -1;
	top: -0.75em;
	left: calc(-50vw + 50%);

}

/*=--------------=*/
/*= Help overlay =*/
/*=--------------=*/

#image-focus-overlay .help-overlay {
	position: absolute;
	display: flex;
	flex-flow: column;
	z-index: 2;
	font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif;
	font-size: 1.25rem;
	padding: 1em;
	border-radius: 10px;
	bottom: 1em;
	right: 1em;
	overflow: hidden;
	white-space: nowrap;
	color: transparent;
	visibility: hidden;
	transition:
		visibility 1s ease,
		color 1s ease,
		background-color 1s ease,
		bottom 0.3s ease;
}
#image-focus-overlay .help-overlay:hover {
	max-width: 24em;
	max-height: 14em;
	background-color: rgba(0, 0, 0, 0.85);
	color: #fff;
	visibility: visible;
	transition:
		visibility 0.2s ease 0.3s,
		color 0.2s ease 0.3s,
		background-color 0.2s ease 0.3s;
}

#image-focus-overlay .help-overlay::after {
	content: "?";
	font-weight: bold;
	font-size: 2rem;
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 10px;
	color: #000;
	filter: drop-shadow(0 0 6px #fff);
	visibility: visible;
	opacity: 0.85;
	transition:
		visibility 1s ease;
}
#image-focus-overlay .help-overlay:hover::after {
	visibility: hidden;
	transition:
		visibility 0.2s ease 0.3s;
}

#image-focus-overlay .help-overlay p {
	margin: 0;
	text-indent: -2em;
	padding-left: 2em;
	max-width: 100%;
	overflow: hidden;
}
#image-focus-overlay .help-overlay p + p {
	margin: 0.75em 0 0 0;
}
#image-focus-overlay .help-overlay.hidden {
	bottom: -2em;
}

/*=-----------------=*/
/*= Background blur =*/
/*=-----------------=*/

.blurred {
	filter: blur(3px);
}

/*=---------=*/
/*= Tooltip =*/
/*=---------=*/

.image-wrapper {
	position: relative;
	display: block;
}
.image-wrapper::after {
	content: "Click to enlarge";
	display: block;
	position: absolute;
	margin: auto;
	left: 0;
	right: 0;
	bottom: 10px;
	padding: 6px 15px 7px 15px;
	font-size: 1rem;
	font-family: "Lucida Sans Unicode", "Source Sans Pro", Helvetica, "Trebuchet MS", sans-serif;
	background-color: rgba(0, 0, 0, 0.75);
	color: #fff;
	border-radius: 5px;
	opacity: 0.0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}
@supports (width: -moz-fit-content) {
	.image-wrapper::after {
		width: -moz-fit-content;
	}
}
@supports (width: fit-content) {
	.image-wrapper::after {
		width: fit-content;
	}
}
.image-wrapper:hover::after {
	opacity: 1.0;
}