:root {
	--content-max-width: 750px;
	--page-bg-color: white;
	--body-text-color: #121;
	--link-color: royalblue;
	--link-color-visited: blueviolet;
	--tag-color: grey;
	--tag-color-bg: color-mix(in srgb, black 5%, transparent);
	--header-divider-color: lightgray;
	--callout-color: green;
	--callout-color-bg: color-mix(in srgb, green 20%, transparent);
}

hr
{
	border-top: medium double var(--header-divider-color);
	border-bottom: none;
	border-left: none;
	border-right: none;
}

/* Page spacing */
body
{
	padding: 2em 2em 3em;
	max-width: 100%;
}
header.site-header
{
	max-width: var(--content-max-width);
	margin: 0 auto 2em auto;
	border-bottom: medium double var(--header-divider-color);
}
article.post,
article.page,
main.post-list
{
	max-width: var(--content-max-width);
	margin: 0 auto;
}
footer.site-footer
{
	max-width: var(--content-max-width);
	margin: 4em auto 0;
}

/* Nav */

nav.site-nav ul
{
	margin: 0;
	padding: 0;
	line-height: 1;
	white-space: nowrap;
	margin-bottom: 0.5em;
}

nav.site-nav li,
li.dropdown,
li.dropdown-child
{
	list-style: none;
	line-height: 1;
}

nav.site-nav li,
li.dropdown
{
	display: inline-block;
}

ul.dropdown-children
{
  display: none;
  position: absolute;
}

li.dropdown:hover ul.dropdown-children {
  display: block;
  background-color: var(--page-bg-color);
  padding: 0.5em;
}

li.dropdown-child
{
	display: block !important;
	padding: 0.5em 0;
}

nav.site-nav a,
nav.site-nav a:visited,
nav.site-nav li.dropdown
{
	color: var(--link-color);
}

li.dropdown:hover
{
	color: var(--body-text-color) !important;
}

/* Font */

body
{
	/* Oldstyle serif */
	font-family: "Hoefler Text", "Big Caslon", Georgia, "Plantagenet Cherokee", serif;
	line-height: 1.2;
	color: var(--body-text-color);
}

h1, h2, h3, h4, h5, h6
{
	font-variant-ligatures: discretionary-ligatures;
}

body a[href] { text-decoration: none; }
body a[href]:hover { text-decoration: underline; }
/* Link colours */
body a[href] { color: var(--link-color) }
body a[href]:visited { color: var(--link-color-visited); }

header.site-header h1 a[href],
header.site-header h2 a[href],
header.post-header h2 a[href]
{
	color: var(--body-text-color);
}

/* a.link-external::after
{
	content: "➚";  // "⤴︎";
	font-size: 62%;
	vertical-align: super;
} */


/* Get title and nav in a line */
header.site-header,
header.post-header,
footer.site-footer
{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}
header.site-header h1,
header.site-header h2,
header.site-header header,
header.site-header nav
{
	display: inline-block;
	line-height: 55pt;
}
header.site-header nav
{
	margin-left: auto;
	order: 2;
}
header.site-header nav .separator
{
	margin: 0 0.5em 0 0.5em;
}

/* Get footer in a line */
footer.site-footer p.last-updated,
footer.site-footer nav
{
	display: inline-block;
	order: 2;
}
footer.site-footer nav
{
	padding-left: 2em;
	margin-left: auto;
}


/* Make title less giant */
header.site-header h1
{
	margin-top: 0em;
	margin-right: 1em;
	margin-bottom: 0em;
	font-size: xxx-large;
}

header.site-header h2
{
	margin-top: 0em;
	margin-right: 1em;
	margin-bottom: 0em;
	font-size: inherit;
}

/* Make footer smaller */
footer.site-footer
{
	font-size: small;
}

/* Post layout */

/* Post header in a line */
header.post-header h1,  /* Post page title */
header.post-header h2,  /* Post list title */
header.post-header .date-posted
{
	display: inline-block;
	line-height: 55px;
	margin-top: 0;
	margin-bottom: 0;
}
header.post-header h1,
header.post-header h2
{
	margin-right: 1em;
}
header.post-header .date-posted
{
	margin-left: auto;
}

/* tag pills */
ul.post-tags
{
	text-align: right;
	margin: 0;
}
ul.post-tags li.post-tag
{
	display: inline-block;
	border: none;
	padding: 4px 8px;
	text-align: center;
	margin-left: 13px;
	margin-right: 0;
	border-radius: 100px;
	font-size: x-small;
	background-color: var(--tag-color-bg);
}
ul.post-tags li.post-tag a
{
	color: var(--tag-color);
	text-decoration: none;
}

/* Footnotes */
hr.footnotes-sep
{
	margin-top: 2em;
	border-top: medium double var(--header-divider-color);
	border-bottom: none;
	border-left: none;
	border-right: none;
}

/* Post list */
section.post-stub
{
	margin-top: 3em;
}

nav.postlist-pagination
{
	text-align: right;
	padding-top: 1em;
	margin-top: 2em;
	border-top: medium double var(--header-divider-color);
}

/* Comments */
section#comments
{
	font-size: small;
}
section.comment
{
	margin-top: 2em;
	padding-left: 2em;
	border-left: solid;
}
section.comment header
{
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
}
p.comment-timestamp
{
	padding-left: 2em;
	margin-left: auto;
}
p.comment-note
{
	margin-top: 2em;
	padding-top: 2em;
	border-top: medium double var(--header-divider-color);
}

/* Callouts */
.note
{
	border: solid;
	border-color: var(--callout-color);
	background-color: var(--callout-color-bg);
	border-radius: 1em;
	padding: 0 1em;
	margin-bottom: 1em;
}