/* Based on SimpleCSS by Kev Quirk ~ https://simplecss.org */

/* Global variables. */
:root {
  /* Set sans-serif & mono fonts */
  --sans-font: -apple-system, BlinkMacSystemFont, Helvetica,
    "Helvetica Neue", "Avenir Next", Avenir,
    "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, sans-serif;
  --serif-font: Palatino, Georgia, serif;
  --mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
  --icon-scale: 1;

  /* Default (light) theme */
  --bg: #fff;
  --text: #212121;
  --text-light: #585858;
  --border: #ccc;
  --accent: #06f; /* #83f; #06f; #63f; */ /* #0a0 was JINX */
  --accent-bg: #f0f0f0;
  --icon: #aaa;
  --code: #ff6600;
  --preformatted: #444;
  --marked: #ffdd33;
  --marked-link: #000;
  --disabled: #efefef;
  --border-radius: 5px;
  --border-accent-width: 0px;
  --banner-accent: var(--accent);
  --banner-text: white;
  --font-size-small: 1rem;
  --font-size-tiny: 0.8rem;
  --shadow-light: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.35);
  --shadow-dark: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
  --shadow: var(--shadow-light);
  --overlay: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.2));
  --overlay-light: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.1));
  --overlay-dark: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.3));
  --overlay-darker: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.45));
  --overlay-darker-still: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.7));
  --overlay-very-dark: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.7));
  --overlay-ultra-dark: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85));
  --contrast-text: #212121;
  --contrast-bg: #ccc;
  --star: #ffb000;
  --signature-image: url(/images/matt-signature-blog-light.webp);
}

html {
	font-family: var(--sans-font);
	scroll-behavior: smooth;
	box-sizing: border-box;
	text-rendering: optimizeLegibility;
	background: var(--bg);
}

body, body > header {
	display: grid;
	grid-template-columns: 1fr min(55rem, 90%) 1fr;
}

body {
	color: var(--text);
	background: var(--bg);
	font-size: 1.25rem;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
	grid-template-rows: auto 1fr auto;
}

body.monospaced {
	font-family: var(--mono-font);
	font-size: 1.1rem;
}

body > *, body > header > * {
  grid-column: 2;
}

body > header {
  border-bottom: 1px solid var(--border);
  padding: 0 0.5rem 0rem 0.5rem;
  grid-column: 1 / -1;
  box-sizing: border-box;
}

body > footer {
  margin-top: 2rem;
  /* padding: 1rem 1rem 1.5rem 1rem; */
  padding: 2rem 0 0 0;
  color: var(--text-light);
  font-size: var(--font-size-small);
  text-align: center;
  border-top: 1px solid var(--border);
  align-self: end;
}

body > footer.bare {
	padding: 0;
	border: none;
}

footer > nav a {
	margin: 0 0.3rem;
}

footer > nav + p {
	margin-top: 0.5rem;
}

article > header.bare {
/* 	margin-bottom: 2rem; */
}

article > footer {
	margin-top: 4rem;
	padding: 1rem 0 0 0;
	border-top: 1px solid var(--border);
	font-size: var(--font-size-small);
	color: var(--text-light);
}

article > footer ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: center;
}

article > footer ul li {
	margin: 0.5rem 0;
}

article > footer a {
	margin: 0 0.1rem;
}

article > ul > li, article > ol > li {
	margin-bottom: 1rem;
}

main {
	text-align: center;
}

main > * {
	text-align: left;
}

main article {
	text-align: center;
}

main article > * {
	text-align: left;
}

/* Book promo banner */
main > aside:first-child {
	display: inline-block;
	border-radius: 1rem;
	background: var(--banner-accent);
	color: var(--banner-text);
	text-align: center;
	margin: 0.5rem auto;
	padding: 0rem 0.8rem 0.1rem 0.8rem;
}

main > aside:first-child a {
	color: inherit;
	font-size: var(--font-size-small);
	text-decoration: none;
	font-weight: 550;
}

main > aside:first-child a:hover {
	text-decoration: underline;
}

main header {
	text-align: center;
	margin-bottom: 3rem;
}

main header > h1 {
	margin-bottom: 1rem;
}

main header > time, main header > time a, main header > time a:visited, main header > .byline {
	color: var(--text-light);
	text-decoration: none;
	font-size: var(--font-size-small);
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.6rem;
  margin-top: 3rem;
}

h3 {
	font-size: 2rem;
	margin-top: 3rem;
}

h4 {
	font-size: 1.44rem;
}

h5 {
	font-size: 1.15rem;
}

dt {
	font-weight: bold;
}

dd {
	margin-top: 1rem;
}

dl, dd + dt {
	margin-top: 3rem;
}

h6 {
	font-size: 0.96rem;
}

/* Fix line height when title wraps */
h1,
h2,
h3 {
  line-height: 1.1;
}

/* Reduce heading size on mobile */
@media only screen and (max-width: 720px) {
  h1 {
    font-size: 2.4rem;
  }

  h2 {
    font-size: 2.1rem;
  }

  h3 {
    font-size: 1.6rem;
  }

  h4 {
    font-size: 1.25rem;
  }
}

/* Format links & buttons */
a,
a:visited {
  color: var(--accent);
}

a:hover {
  text-decoration: none;
}

button,
[role="button"],
input[type="submit"],
input[type="reset"],
input[type="button"] {
  border: none;
  border-radius: var(--border-radius);
  background: var(--accent);
  font-size: 1.2rem;
  color: var(--bg);
  padding: 0.5rem 0.9rem;
  margin: 0.5rem 0;
  font-weight: bold;
  min-width: 8rem;
}

.small, button.small, input.small {
	font-size: var(--font-size-small);
}

.tiny {
	font-size: var(--font-size-tiny);
}

button.small, input.small {
	min-width: 6rem;
}

.facebook {
	background: #1877F2;
	color: white;
}

.twitter {
	background: #1D9BF0;
	color: white;
}

.copy-link {
	background: #8e66d0; /* 63f */
	color: white;
	width: 7rem;
}

.kofi {
	margin-left: 0.5rem;
}

.copy-link.copied {
	background: #3a3;
	transition: background 0.2s ease-out;
}

a button.copy-link.copied {
	text-decoration: none;
}

button.topic {
	border: 2px solid var(--text-light);
	border-radius: 2rem;
	color: var(--text-light);
	background: none;
	font-size: var(--font-size-small);
	font-weight: normal;
	font-variant: small-caps;
	padding: 0.1rem 0.7rem 0.2rem 0.7rem;
	min-width: 0;
}

a:hover button.topic {
	text-decoration: none;
	color: var(--accent);
	border-color: var(--accent);
}

.buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.6rem 0.5rem;
	margin-top: 2rem;
}

.buttons.center {
	justify-content: center;
}

@media only screen and (max-width: 600px) {

	.buttons {
		justify-content: center;
	}

}

.buttons p {
	width: 100%;
	margin: 0;
	font-weight: bold;
}

.buttons button {
	margin: 0;
	min-width: 4rem;
	padding: 0.4rem 0.6rem;
	color: var(--bg);
}

.buttons button.amazon {
	background: #ffc436;
	color: black;
}

.buttons button.audible {
	background: #f7991c;
	color: black;
}

.buttons button.applebooks {
	background: #009aff;
}

.buttons button.autographed {
	background: #00ac00;
}

.buttons button.epub {
	background: #8366d0;
}

.buttons button.nook {
	background: #7a8c71;
}

.buttons button.kobo {
	background: #bf1901;
}

.buttons.mono button {
	background: var(--accent);
	color: white;
}

.signature {
	background-image: var(--signature-image);
	margin-top: 2rem;
	height: 9rem;
	width: auto;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: right center;
}

article > .signature + footer {
	margin-top: 1.5rem;
}

button[disabled],
[role="button"][aria-disabled="true"],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][disabled],
select[disabled] {
  cursor: default;
  opacity: 0.5;
  cursor: not-allowed;
}

input:disabled,
textarea:disabled,
select:disabled {
  cursor: not-allowed;
  background-color: var(--disabled);
}

input[type="range"] {
  padding: 0;
}

/* Set the cursor to '?' while hovering over an abbreviation */
abbr {
  cursor: help;
}

button:focus,
button:enabled:hover,
[role="button"]:focus,
[role="button"]:not([aria-disabled="true"]):hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
	text-decoration: underline;
	text-decoration-thickness: 0.2rem;
	text-underline-offset: 0.3rem;
	cursor: pointer;
}

/* Navigation */

header > nav {
	font-size: 1.2rem;
	padding: 0.5rem 0;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 1rem;
}

header > nav a {
	text-decoration: none;
	font-weight: bold;
	font-variant: small-caps;
	text-transform: lowercase;
	letter-spacing: 0.1rem;
}

nav a.menu-only, nav a.hidden {
	display: none;
}

header > nav a,
header > nav a:visited {
	color: var(--text);
}

header > nav a.current {
	color: var(--accent);
}

header > nav a:hover {
	color: var(--accent);
	text-decoration: underline;
	text-decoration-thickness: 0.2rem;
	text-underline-offset: 0.3rem;
}

header > nav a:first-child {
	margin-right: auto;
	font-size: 2.5rem;
	text-transform: initial;
	text-decoration: none;
	color: var(--text);
	position: relative;
}

header > nav > a:first-child:after {
	content: "thriller & horror author";
	color: var(--accent);
	position: absolute;
	bottom: -0.5rem;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 1.1rem;
}

header > nav > a.hide_subheading:first-child:after {
	content: "";
	bottom: 0;
	display: none;
}

body > header > button {
	position: absolute;
	right: 0.2rem;
	top: 0;
	width: 3.5rem;
	height: 3.5rem;
	min-width: 0;
	background: none;
	color: var(--text-light);
	font-size: 3rem;
	padding: 0.4rem;
	margin: 0;
	font-weight: normal;
	text-decoration: none !important;
	display: none;
}

@media only screen and (max-width: 870px) {

	header > nav {
		gap: 0.8rem;
		padding: 0.88rem 0;
	}

	header > nav a {
		font-size: 1.1rem;
		letter-spacing: initial;
	}

	header > nav a:first-child {
		font-size: 2rem;
	}

	header > nav a:first-child:after {
		font-size: 1.0rem;
	}
}

/* Collapse nav into menu on smaller screens */
@media only screen and (max-width: 680px) {

	body > header {
		grid-template-columns: 1fr 100% 1fr;
		padding: 0;
	}

	header > nav {
		display: grid;
		grid-template-columns: auto-fit;
		justify-content: stretch;
		gap: 0;
		max-height: 3.75rem;
		overflow: hidden;
		transition: max-height 0.2s ease-out;
		padding: 0.5rem 0;
	}

	header > nav.open {
		max-height: 100vh;
		transition: max-height 0.5s ease-out;
	}

	header > nav a {
		text-align: center;
		padding: 0.2rem 0;
		letter-spacing: 0.1rem;
		visibility: hidden;
		transition: visibility 0.2s ease-out;
	}

	header > nav.open a {
		visibility: visible;
	}

	header > nav a:hover, nav a:enabled:focus {
		text-decoration: none;
		background: var(--accent);
		color: var(--bg);
	}

	header > nav a:first-child {
		margin-right: 0;
		margin-bottom: 0.1rem;
		padding: 0.4rem 0 0.8rem 0;
		font-size: 2rem;
		visibility: visible;
	}

	header > nav a:first-child:after {
		bottom: 0.1rem;
	}

	header > nav a:first-child:hover, nav a:first-child:enabled:focus {
		background: none;
		color: inherit;
	}

	header > nav a.menu-only {
		display: initial;
	}
	
	header > nav a.hidden {
		display: none;
	}

	body > header > button {
		display: initial;
	}

	body > header > nav.open + button {
		color: var(--accent);
	}
}

@media only screen and (max-width: 340px) {

	body > header > button {
		font-size: 2rem;
		right: 0;
		top: 0.5rem;
	}

}

.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 2rem;
	margin-top: 2rem;
	border-radius: var(--border-radius);
	align-items: center;
	justify-items: center;
	justify-content: center;
	padding: 1.5rem 2.5rem;
	font-size: 1.1rem;
}

body > .grid {
	border-radius: 0;
	margin-top: 0;
	grid-column-start: 1;
	grid-column-end: -1;
	min-height: 50vh;
	background-color: var(--accent-bg);
}

body > .grid .cover img {
	max-height: 55vh;
	max-width: 30vw;
}

@media only screen and (max-height: 380px) {

	body > .grid .cover-container {
		align-self: start;
	}

}

@media only screen and (max-width: 450px) {

	body > .grid .cover img {
		max-width: 60vw;
	}

}

body > .grid .cover-container + div {
	max-width: 600px;
}

hr + .grid {
	margin-top: 0;
}

hr + .grid.contrast {
	margin-top: 2rem;
}

.grid > * {
	border-radius: var(--border-radius);
}

.book, .series, .hero {
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}

.hero, .series {
	min-height: 40vh;
}

hr + .hero {
	margin-top: 2rem;
}

.grid .cover-container {
	text-align: center;
}

.grid .cover-container > *:last-child {
	margin-bottom: 0;
}

.cover, .cover img, .cover:after {
	border-radius: var(--border-radius) 0 0 var(--border-radius);
}

.cover {
	position: relative;
	line-height: 0;
}

.cover img {
	box-shadow: var(--shadow);
}

.dark {
	color: white;
}

.dark button {
	color: var(--accent-bg);
}

.dark .cover img {
	box-shadow: var(--shadow-dark);
}

.contrast, .contrast a {
	color: var(--contrast-text);
	background-color: var(--contrast-bg);
}

.contrast a {
	text-decoration: none;
}

.cover:after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	/* background-image: url(spine-gradient.png); */
	background: linear-gradient(-90deg, #ffffff19, #44445b3b);
	height: 100%;
	width: 5%;
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: left top;
	border-right: 0.05rem solid #3332;
}

.cover.ebook:before, .cover.coming-soon:before, .cover.out-now:before {
	content: "e-book";
	font-variant: small-caps;
	font-weight: bold;
	color: white;
	letter-spacing: 0.1rem;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	background: linear-gradient(#07fd, #09fd);
	border-radius: var(--border-radius) 0 0 0;
	/* height: 1.6rem; */
	height: auto;
	width: 100%;
	font-size: var(--font-size-small);
	line-height: 0.8rem;
	box-sizing: border-box;
	padding: 6px 3px;
	overflow: hidden;
}

.cover.coming-soon:before {
	content: "coming soon!";
	/* background: linear-gradient(#6a6d, #3a3d); */
	background: linear-gradient(#f09f, #e06c);
}

.cover.out-now:before {
	content: "out now!";
	background: linear-gradient(#96fd, #63fd);
}

@media only screen and (max-width: 400px) {

	.cover.ebook:before, .cover.coming-soon:before {
		letter-spacing: 0;
	}

}

.two-up {
	grid-template-columns: 1fr 1fr;
}

.grid.top {
	align-items: start;
}

.grid.center > * {
	text-align: center;
}

.grid.three-up {
	align-items: end;
	grid-template-columns: repeat(auto-fit, minmax(min(90px, 100%), 1fr));
}

.three-up p {
	font-weight: 600;
	font-size: var(--font-size-small);
	height: 1.5rem;
	overflow: hidden;
}

.grid.series {
	grid-template-columns: 1fr;
	background-position: center center;
	min-height: 50vh;
	text-align: center;
}

.grid.series p:last-child {
	margin-bottom: 0;
}

.grid.two-up.articles {
	align-items: stretch;
	justify-items: stretch;
	padding: 0;
}

@media only screen and (max-width: 600px) {

	.grid.two-up.articles {
		gap: 2rem;
	}

}

.grid.two-up.articles > * {
	border: 1px solid var(--border);
	padding: 0 1rem;
}

.grid.two-up.articles a, .grid.two-up.articles a:hover {
	color: var(--accent);
	text-decoration: underline;
}

.grid.two-up.form {
	align-items: start;
	margin: 0 0 1rem 0;
	background-color: var(--contrast-bg);
	color: var(--contrast-text);
}

.grid.two-up.form form + p {
	font-size: var(--font-size-tiny);
	margin: 0.2rem;
	max-width: 20rem;
}

.grid.form input[type=email] {
	width: auto;
}

.grid.book {
	grid-template-columns: 35% 1fr;
}

.grid.book > *, .grid.series {
	font-weight: 500;
}

.grid h1 {
	font-size: 2.5rem;
	margin-top: 0;
}

.grid h2 {
	font-size: 1.3rem;
	margin: 1.5rem 0;
	padding: 0;
}

.grid.book p {
	line-height: 1.6rem;
}

.grid h1 a, .grid h2 a {
	color: inherit;
	text-decoration: none;
}

.grid.kestrel {
	background-image: var(--overlay-darker-still), url(https://c1.staticflickr.com/5/4869/31366311807_214e6340ce_o_d.jpg);
	color: white;
}

.grid.kestrel h1, .grid.kestrel h2 {
	color: #fc0;
}

.grid.kestrel h1, .grid.kestrel h2, .grid.kestrel p,
.grid.series h1, .grid.series h2, .grid.series p
{
	max-width: 30rem;
}

.grid.kestrel button {
	background: #fc0;
	color: black;
}

.grid.dnr {
	background-image: linear-gradient(rgba(255, 255, 255, 0.75), rgba(153, 153, 153, 1)), url(https://mattgemmell.scot/images/dnr/dnr-series-logo.jpg);
	color: white;
	/*
	-webkit-backdrop-filter: opacity(0);
	backdrop-filter: opacity(0);
	overflow: hidden;
	*/
}
/*
.grid.dnr:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.5)), url(https://mattgemmell.scot/images/dnr/dnr-series-logo.jpg);
	background-size: cover;
	background-position: center;
	filter: blur(5px);
	z-index: -1;
	overflow: hidden;
}
*/
.grid.dnr h1, .grid.dnr h2 {
	color: black;
}

.grid.dnr p {
	color: black;
}

.grid.dnr button {
	background: black;
	color: white;
}

.grid.once-upon-a-time {
	background-image: var(--overlay-dark), url(/images/once-upon-a-time-collection/once-upon-a-time-collection-header.jpg);
}

.grid.writing-a-novel-promo {
	background-image: var(--overlay-dark), url(https://mattgemmell.scot/images/podcast/trouble-with-writing/writing-a-novel-header.jpg);
	background-position: bottom right;
}

.grid.writing-a-novel-promo button {
	background: #b6f;
	color: white;
}

.grid.writing-a-novel-promo h1, .grid.writing-a-novel-promo h2 {
	color: white;
}

.grid.once-upon-a-time h1, .grid.once-upon-a-time h2,
.grid.once-upon-a-time-collection h1, .grid.once-upon-a-time-collection h2 {
	color: #A3D7D2;
}

.grid.once-more-upon-a-time-collection h1, .grid.once-more-upon-a-time-collection h2 {
	color: gold;
}

.grid.once-upon-a-time-one-hundred-tales-collection h1, .grid.once-upon-a-time-one-hundred-tales-collection h2 {
	color: #f66;
}

.grid.once-upon-a-time button, .grid.once-upon-a-time-collection button {
	background: #A3D7D2;
	color: black;
}

.grid.once-more-upon-a-time-collection button {
	background: gold;
	color: black;
}

.grid.once-upon-a-time-one-hundred-tales-collection button {
	background: red;
	color: white;
}

.changer button {
	background-color: #b6f;
	color: white;
}

.toll button {
	background-color: #f80;
	color: black;
}

.middleshade-road h1, .changer h1, .toll h1, .jinx h1, .the-sand-king h1 {
	text-shadow: 0 0 5px black;
}

.changer h1, .toll h1, .jinx h1 {
	letter-spacing: 0.3rem;
}

.changer h1 {
	color: #b6f;
}

.toll h1 {
	color: orange;
}

.jinx h1 {
	color: #0d0;
}

.jinx button {
	background-color: #0d0;
	color: black;
}

body > .grid.once-upon-a-time-collection, body > .grid.once-upon-a-time {
	border-bottom: var(--border-accent-width) solid #A3D7D2;
}

body > .grid.once-more-upon-a-time-collection {
	border-bottom: var(--border-accent-width) solid gold;
}

body > .grid.once-upon-a-time-one-hundred-tales-collection {
	border-bottom: var(--border-accent-width) solid red;
}

body > .grid.kestrel {
	border-bottom: var(--border-accent-width) solid #fc0;
}

body > .grid.changer {
	border-bottom: var(--border-accent-width) solid #b6f;
}

body > .grid.toll {
	border-bottom: var(--border-accent-width) solid orange;
}

body > .grid.jinx {
	border-bottom: var(--border-accent-width) solid #0d0;
}

body > .grid.middleshade-road {
	border-bottom: var(--border-accent-width) solid #f33;
}

body > .grid.dnr {
	border-bottom: var(--border-accent-width) solid #fff;
}

body > .grid.the-sand-king {
	border-bottom: var(--border-accent-width) solid #f66;
}

main .grid.once-upon-a-time-collection, main .grid.once-upon-a-time {
	border: var(--border-accent-width) solid #A3D7D2;
}

main .grid.once-more-upon-a-time-collection {
	border: var(--border-accent-width) solid gold;
}

main .grid.once-upon-a-time-one-hundred-tales-collection {
	border: var(--border-accent-width) solid red;
}

main .grid.kestrel {
	border: var(--border-accent-width) solid #fc0;
}

main .grid.dnr {
	border: var(--border-accent-width) solid #fff;
}

main .grid.changer {
	border: var(--border-accent-width) solid #b6f;
}

main .grid.toll {
	border: var(--border-accent-width) solid orange;
}

main .grid.jinx {
	border: var(--border-accent-width) solid #0d0;
}

main .grid.middleshade-road {
	border: var(--border-accent-width) solid #f33;
}

main .grid.the-sand-king {
	border: var(--border-accent-width) solid #f66;
}

main .grid.writing-a-novel-promo {
	border: var(--border-accent-width) solid #b6f;
}

.middleshade-road h1 {
	color: #f33;
	letter-spacing: 0.1rem;
}

.middleshade-road button {
	background-color: #f33;
	color: white;
}

.the-sand-king h1 {
	color: #f66;
	letter-spacing: 0.1rem;
}

.the-sand-king button {
	background-color: #f66;
	color: white;
}

blockquote.review {
	border: 0;
	text-align: center;
	margin: 0;
}

blockquote.review + blockquote.review {
	margin-top: 2rem;
}

blockquote.review > p:first-child {
	font-weight: 550;
	font-size: 1.3rem;
	line-height: 1.6rem;
	margin-bottom: 0;
}

blockquote.review > p:first-child:before,
blockquote.review > p:first-child:after {
	font-family: Georgia;
	font-weight: 550;
}

blockquote.review > p:first-child:before {
	content: "\201c";
	padding-right: 0.2rem;
}

blockquote.review > p:first-child:after {
	content: "\201d";
	padding-left: 0.2rem;
}

blockquote.review > p + p {
	color: var(--star);
	margin: 0;
	font-size: 1.5rem;
	font-style: normal;
}

blockquote.review > p:nth-child(3) cite {
	font-size: var(--font-size-small);
	font-style: italic;
}

blockquote.review > p:nth-child(3) cite:before {
	content: "– ";
}

article .microblog-post {
	max-width: 700px;
	margin: 9rem auto 5rem auto;
	font-size: 2rem;
}

.microblog-date {
	text-align: right;
	font-style: italic;
}

@media only screen and (max-width: 770px) {

	.grid h1 {
		font-size: 2rem;
	}

	.grid h2, .grid p, .grid button {
		font-size: 1.1rem;
	}

	.grid.hero {
		min-height: 0;
	}

	.grid .cover-container {
		max-width: none;
	}

}

@media only screen and (max-width: 600px) {

	.grid.book, .grid.two-up {
		grid-template-columns: 1fr;
		font-size: 1.0rem;
		line-height: 1.3rem;
	}

	.grid.two-up {
		gap: 3rem;
	}

	.grid.three-up p {
		font-size: var(--font-size-tiny);
		line-height: 0.9rem;
		height: 0.9rem;
	}

	.grid.book, .grid.form {
		gap: 1rem;
	}

	.grid {
		gap: 1rem;
		padding: 1rem;
	}

	.grid > * {
		text-align: center;
	}

	.grid img {
		max-height: 40vh;
	}

	.grid .cover {
		display: inline-block;
	}

	.grid h1 {
		font-size: 1.5rem;
	}

	.grid h2, .grid p, .grid button {
		font-size: 1.0rem;
		line-height: 1.3rem;
	}

	blockquote.review > p + p {
		margin-top: 0.5rem;
	}

	article .microblog-post {
		margin: 3rem auto 3rem auto;
	}

}

@media only screen and (max-width: 600px) {
	article > footer button.small {
		min-width: 0;
	}

	span.label {
		display: none;
	}

	footer > nav a {
		margin: 0 0.2rem;
	}

	footer > nav a:first-child {
		display: none;
	}

	body > footer {
		/* padding: 1rem 0 1.5rem 0; */
	}
}

/* Format the expanding box / accordion */
details {
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  margin-bottom: 1rem;
}

summary {
  cursor: pointer;
  font-weight: bold;
  padding: 0.6rem 1rem;
  outline: none;
}

details.bonus-scenes {
	border-color: red;
}

details.bonus-scenes table.index {
	margin-top: 1rem;
}

details.bonus-scenes summary {
	font-weight: inherit;
}

details[open] {
  padding: 0.6rem 1rem 0.75rem 1rem;
}

details[open] summary {
  margin-bottom: 0.5rem;
  padding: 0;
}

details.bonus-scenes[open] summary {
	margin-bottom: 2rem;
}

details[open] > *:last-child {
  margin-bottom: 0;
}

summary h3 {
	display: inline;
	font-size: 1.3rem;
}

details.category-list {
	background: none;
}

details.category-list table.index {
	margin-top: 1rem;
}

audio {
	margin: 1rem 0;
}

/* Format tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.5rem 0;
}

td,
th {
  border: 1px solid var(--border);
  text-align: left;
  padding: 0.5rem;
}

th {
  background: var(--accent-bg);
  font-weight: bold;
}

table.index {
	margin-top: 4rem;
	margin-bottom: 0;
}

table.index tr td {
	border: none;
	vertical-align: top;
}

table.index td {
	font-size: 1.1rem;
	padding-bottom: 2rem;
}

table.index tr td:first-child {
	padding-right: 1rem;
}

table.index tr:last-child td {
	padding-bottom: 0;
}

table.index h2 {
	margin: 0 0 0.5rem 0;
	font-size: 1.2rem;
}

table.index td p {
	margin: 0;
}
/*
.type-podcast > h2:before {
	content: "\23ef";
	margin-right: 5px;
}
*/
.media-icon {
	transform: scale(var(--icon-scale,1));
}

.media-icon, .media-icon::before, .media-icon::after {
	box-sizing: border-box;
	display: inline-block;
	color: var(--icon);
}

.podcast, .writing-a-novel, .videos, .text-file {
	margin-right: 8px;
}

.podcast {
	position: relative;
	width: 7px;
	height: 10px;
	border-left: 3px solid;
	border-right: 3px solid;
	margin-bottom: 2px;
	margin-left: 7px;
	margin-right: 7px;
}

.podcast::before, .writing-a-novel::before, .videos::before {
	content: "";
	position: absolute;
	width: 6px;
	height: 10px;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-left: 6px solid;
	top: 0px;
	left: -10px;
}

.videos, .writing-a-novel {
	position: relative;
	width: 18px;
	height: 18px;
	border: 2px solid;
	border-radius: 20px;
	top: 2px;
	margin-right: 5px;
}

.videos::before, .writing-a-novel::before {
	top: 2px;
	left: 5px;
}

.text-file, .media-icon.posts, .media-icon.stories, .media-icon.bonus-scenes {
	position: relative;
	width: 12px;
	height: 16px;
	border: 2px solid transparent;
	border-right: 0;
	border-top: 0;
	box-shadow: 0 0 0 2px;
	border-radius: 0.5px;
	border-top-right-radius: 4px;
	overflow: hidden;
	margin-left: 2px;
	margin-right: 10px;
}

.text-file::after, .text-file::before,
.media-icon.posts::after, .media-icon.posts::before,
.media-icon.stories::after, .media-icon.stories::before,
.media-icon.bonus-scenes::after, .media-icon.bonus-scenes::before
{
	content: "";
	position: absolute;
}

.text-file::before, .media-icon.posts::before, .media-icon.stories::before, .media-icon.bonus-scenes::before {
	background: currentColor;
	box-shadow: 0 4.5px 0, -4px -4.5px 0;
	top: 7.5px;
	left: 0;
	width: 8px;
	height: 2px;
}

.text-file::after, .media-icon.posts::after, .media-icon.stories::after, .media-icon.bonus-scenes::after {
	width: 4px;
	height: 4px;
	border-left: 2px solid;
	border-bottom: 2px solid;
	right: -1px;
	top: -1px;
}

table.microblog {
	max-width: 650px;
	margin-left: auto;
	margin-right: auto;
}

table.index.microblog td {
	font-size: 1.2rem;
	padding: 1.7rem 0.5rem;
}

table.index.microblog tr:first-child td:first-child {
	padding-top: 0.5rem;
}

table.microblog tr {
	border-bottom: 2px solid var(--accent-bg);
}

table.microblog td p+p {
	margin: 1.5rem 0;
}

table.microblog td p.permalink {
	margin: 0.5rem 0;
	text-align: right;
	font-style: italic;
}

table.index td+td {
	color: var(--text-light);
	font-size: var(--font-size-small);
	text-align: right;
	white-space: nowrap;
}

label.list-filter {
	float: right;
	margin-top: 3px;
	padding: 0 4px 0 2px;
	border-radius: var(--border-radius);
	font-size: var(--font-size-small);
	-webkit-user-select: none;
	user-select: none;
}

input.list-filter {
	margin-top: 6px;
	margin-right: 4px;
}

label.list-filter.show-filtered {
	background-color: var(--accent-bg);
}

.filtered {
	display: none;
}

.show-filtered .filtered {
	display: table-row;
	background-color: var(--accent-bg);
}

label.microblog.list-filter.show-filtered,
table.microblog.show-filtered .filtered {
	background-color: inherit;
}

article > .toc, .toc ol, .toc ul {
	padding-left: 1.7rem;
}

article > .toc > li {
	margin-bottom: 0.5rem;
}

footer details.toc {
	margin-top: 1.5rem;
}

@media only screen and (max-width: 600px) {

	table.index tr td:first-child {
		padding-right: 0;
	}

	table.index td+td {
		font-size: var(--font-size-tiny);
		display: none;
	}

	table.microblog td {
		font-size: 1.1rem;
	}

	table.microblog {
		max-width: none;
	}
}

table caption {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

/* Format forms */
fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0rem 0.7rem;
}

textarea,
select,
input {
  font-size: inherit;
  font-family: inherit;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
  box-shadow: none;
  box-sizing: border-box;
  width: 60%;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Add arrow to drop-down */
select {
  background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%),
    linear-gradient(135deg, var(--text) 51%, transparent 49%);
  background-position: calc(100% - 20px), calc(100% - 15px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

select[multiple] {
  background-image: none !important;
}

/* checkbox and radio button style */
input[type="checkbox"],
input[type="radio"] {
  vertical-align: middle;
  position: relative;
}

input[type="radio"] {
  border-radius: 100%;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background: var(--accent);
}

input[type="checkbox"]:checked::after {
  /* Creates a rectangle with colored right and bottom borders which is rotated to look like a check mark */
  content: " ";
  width: 0.2rem;
  height: 0.5rem;
  border-radius: 0;
  position: absolute;
  top: 0.1rem;
  left: 0.33rem;
  background: transparent;
  border-right: solid var(--bg) 0.16rem;
  border-bottom: solid var(--bg) 0.16rem;
  font-size: 2.2rem;
  transform: rotate(45deg);
}
input[type="radio"]:checked::after {
  /* creates a colored circle for the checked radio button  */
  content: " ";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 100%;
  position: absolute;
  top: 0.25rem;
  background: var(--bg);
  left: 0.25rem;
  font-size: 2.2rem;
}

/* Make the textarea wider than other inputs */
textarea {
  width: 80%;
}

/* Makes input fields wider on smaller screens */
@media only screen and (max-width: 720px) {
  textarea,
  select,
  input {
    width: 100%;
  }
}

/* Ensures the checkbox and radio inputs do not have a set width like other input fields */
input[type="checkbox"],
input[type="radio"] {
  width: auto;
}

/* do not show border around file selector button */
input[type="file"] {
  border: 0;
}

/* Misc body elements */
hr {
  border: none;
  margin: 2rem auto 0 auto;
  height: 1px;
  background-color: var(--border);
}

hr + p {
	margin-top: 2rem;
}

mark, .mark, .updated {
  padding: 2px 5px;
  border-radius: var(--border-radius);
  background: var(--marked);
}

mark a, mark a:visited,
a .updated, a:visited .updated {
	color: var(--marked-link);
}

.updated {
	margin-left: 0.4rem;
	font-weight: bold;
	color: var(--marked-link);
}

a .updated, a:visited .updated {
	text-decoration: none;
}

main img,
main video {
  max-width: 100%;
  height: auto;
  border-radius: var(--border-radius);
  margin: 0 auto;
}

article img, table.index.microblog td p img {
	max-height: 60vh;
	width: auto;
	display: block;
}

table.index.microblog td p img {
	margin-top: 2rem;
}

article > header + p > img {
	margin-bottom: 3rem;
}

article .cover-container {
	display: inline-block;
	margin: 1rem auto;
}

article .cover-container img {
	display: inline-block;
}

article .center {
	text-align: center;
}

.center > div:first-child > blockquote:first-child {
	margin-top: 2rem;
}

img.float, figure.float {
	max-width: 45%;
	float: right;
	margin: 0.2rem 0 0.5rem 2rem;
}

figure.float figcaption {
	margin-bottom: 0;
}

img.float.left, figure.float.left {
	float: left;
	margin: 0.2rem 2rem 0.5rem 0;
}

figure.float > img.float {
	max-width: 100%;
	float: none;
	margin: initial;
}

figure, article > figure {
	margin: 0;
	text-align: center;
}

figure.border img {
	border: 1px solid var(--border);
}

figure.highlight {
	text-align: left;
}

article figure {
	margin: 4rem 0;
}

figcaption, p.caption {
  font-size: 1.1rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  margin-top: 0.5rem;
}

p.caption {
	text-align: center;
}

blockquote {
  margin: 2rem 0 2rem 2rem;
  padding: 0.2rem 1rem;
  border-left: 0.35rem solid var(--accent);
  color: var(--text-light);
  font-style: italic;
  font-size: 1.4rem;
}

blockquote > *:first-child {
	margin-top: 0;
}

blockquote > *:last-child {
	margin-bottom: 0;
}

cite {
  font-size: 1.2rem;
  color: var(--text-light);
  font-style: normal;
}

/* Use mono font for code elements */
code,
pre,
pre span,
kbd,
samp,
.code {
  font-size: 1.075rem;
  font-family: var(--mono-font);
  color: var(--code);
  white-space: pre;
  tab-size: 2;
}

article code {
	font-size: 1.2rem;
	line-height: 1rem;
}

article pre code, article .code {
	font-size: 1rem;
}

kbd {
  color: var(--preformatted);
  border: 1px solid var(--preformatted);
  border-radius: var(--border-radius);
  padding: 0.2rem 0.3rem;
  font-weight: bold;
}

pre, .code {
  padding: 1rem 1.4rem;
  max-width: 75vw;
  overflow: auto;
  overflow-x: auto;
  color: var(--preformatted);
  background: var(--accent-bg);
  border: 1px solid var(--border);
  border-radius: var(--border-radius);
}

/* Fix embedded code within pre */
pre code {
	color: var(--preformatted);
	background: none;
	margin: 0;
	padding: 0;
}

.code {
	margin: 2rem 0;
}

.code mark, .code .mark {
	padding: 2px;
}

mark.blue, .mark.blue {
	background: #09f;
	color: white;
}

mark.red, .mark.red {
	background: #f33;
	color: white;
}

mark.green, .mark.green {
	background: #0a0;
	color: white;
}

.code del {
	text-decoration-color: #f33d;
	text-decoration-thickness: 0.2rem;
}

.code, .code.warning, .code.caution, .code.approved, .code.example {
	border-radius: 0;
	border-width: 0px;
	border-left-width: 0.7rem;
}

.code.warning {
	border-color: #f33;
	background: #fee;
}

.code.caution {
	border-color: #fd3;
	background: #ffc;
}

.code.approved {
	border-color: #0a0;
	background: #efe;
}

.code.example {
	border-color: #09f;
	background: #def;
}

blockquote.example {
	font-style: inherit;
	text-decoration: none;
	background-color: #f5f5f5;
	padding: 1rem 1.2rem;
	border: 2px solid #999;
	border-radius: var(--border-radius);
	white-space: pre-wrap;
}

blockquote.example em {
	font-weight: normal;
}

blockquote.example.flawed {
	border-color: red;
}

blockquote.example.flawed:after {
	content: "\2718";
	font-size: 50px;
	color: rgba(red, 0.7);
	padding-bottom: 15px;
}

blockquote.example.fixed {
	border-color: green;
}

blockquote.example.fixed:after {
	content: "\2714";
	color: rgba(green, 0.7);
	padding-bottom: 15px;
}

.footnotes {
	display: block;
	width: 100%;
	height: auto;
	margin-top: 4rem;
	font-size: var(--font-size-small);
	color: var(--text-light);
}

iframe {
	max-width: 90vw;
	display: block;
	border: var(--border-accent-width) solid #fc0;
	border-radius: var(--border-radius);
	margin: 2rem auto;
}

@media only screen and (max-width: 900px) {

	.footnotes {
		margin-top: 2rem;
	}

}