@font-face {
	font-family: 'Coelacanth';
	src: url('/assets/fonts/coelacanth-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display:swap;
}

@font-face {
	font-family: 'Coelacanth';
	src: url('/assets/fonts/coelacanthitalic-webfont.woff2') format('woff2');
	font-weight: normal;
	font-style: italic;
	font-display: swap;
}

:root {
	--background-colour: #fcfdf0;
	--text-colour: #474535;
	--highlight-colour: #d5160a;
	--blending-approach: multiply;

	font-family: Coelacanth, serif;
}

@media(prefers-color-scheme: dark) {
	:root {
		--background-colour: #171717;
		--text-colour: #fafafa;
		--highlight-colour: #e85049;
		--blending-approach: normal;
	}
}

/* Base */
body {
  font-size: 1.25em;
  line-height: 1.15;
  margin: 0;
  background: var(--background-colour);
  color: var(--text-colour);
}

h1 {
  font-weight: 600;
  font-size: 1.75em;
  font-variant: small-caps;
  line-height: 1.286;
  margin: 0 0 0.5em;
  color: var(--highlight-colour);
}

h2 {
  font-weight: 600;
  font-size: 1.4em;
  font-variant: small-caps;
  line-height: 1.214;
  margin: 1em 0;
}

h3 {
  font-weight: 700;
  font-size: 1.1em;
  line-height: 1.182;
  margin: 0 0 .25em;
}

h4 {
  font-weight: 700;
  font-size: 1em;
  line-height: 1.2;
  margin: 0 0 .25em;
}

p {
  margin: 0 0 0.5em;
  max-width: 60ch;
}

a {
  color: var(--highlight-colour);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:focus,
a:hover {
  text-decoration: none;
}

address { font-style: normal; }

abbr { border: 0; text-decoration: none; }
abbr[title] { cursor: help; }

ul, ol { margin: 0 0 1em 1.5em; padding: 0; }

figure {
  margin: 1.5em 0;
}

dl { content: ""; display: table; clear: both; }
dt { font-size: .8em; text-transform: uppercase; letter-spacing: .05em; float: left; clear: both; margin: .358em 0 0; padding: 0; }
dd { float: right; margin: 0; padding: 0; }

table { border-collapse: collapse; font-size: 0.7em; margin: 2em 0; width: 100%; }
caption { padding-bottom: 1em; }
th { padding: 0 .25em .25em 0; text-align: left; vertical-align: top; }
td { padding: .25em; vertical-align: top; border-top: 1px solid; }
td:first-child { padding-left: 0; }

td.number { text-align: right; white-space: nowrap; }
td.answer-complete { text-align: center; }
td.answer-yes { background: #b4eeb3; }
td.answer-no { background: #efb8ba; }
td.answer-maybe { background: #f1f4d4; }

@media(prefers-color-scheme: dark) {
    td.answer-yes { background: #4c864b; }
    td.answer-no { background: #ca6265; }
    td.answer-maybe { background: #938758; }
}

.meta {
  font-size: .8em;
  letter-spacing: .05em;
  font-variant: small-caps;
}

.notice { background: var(--highlight-colour); color: #fff; margin: -1em -1em 2em; padding: 1em; }

.icon {
    > svg {
        display: inline-block;
        width: 16px;
        height: 16px;
        vertical-align: middle;

        path {
            fill: var(--border-colour);
        }
    }
}

.sr-only { position: absolute; left: -9999px; }

/* Layout */
.site-header {
	padding: 1em;
}

.site-title {
	font-variant: small-caps;
	text-decoration: none;
}

nav {
	margin-top: 1em;
}

nav > ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

main { padding: 1em; }

.site-footer { border-top: 1px solid var(--border-colour); padding: 1em; clear: both; }
.social-media-list { margin: 0; padding: 0; list-style: none; }

@media print {
	.site-header,
	.site-footer {
		display: none;
	}
}

/* Posts */
.posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.post {
	margin-bottom: 2em;
}

@media (min-width: 640px){
	.post {
		display: grid;
		gap: 0 1.5em;
		grid-template-columns: 7em minmax(auto, 60ch);
	}

	.post > * {
		grid-column: 2;
	}

	.post > h1,
	.post > h2:first-child {
		grid-column: 1 / 3;
	}

	.post > p:nth-child(2):has(time:only-child) {
		grid-column: 1;

		& + figure {
			margin-top: 0;
		}
	}
}

.post img {
	max-width: 100%;
	filter: grayscale(100%);
	mix-blend-mode: var(--blending-approach);
	transform: translate3d(0,0,0); /* Hack to get both filter and mix-blend-mode working in Safari */
}

.post code {
	-moz-tab-size: 2;
	tab-size: 2;
}

.attribution {
	padding: 0 0 0 0.5em;
	border-left: 0.25em solid var(--highlight-colour);
	margin-bottom: 2em;
}

.note {
	padding: 0 0 0 0.5em;
	border-left: 0.25em solid var(--highlight-colour);
	margin-bottom: 2em;
	font-style: italic;
}

.endnote-ref{
	font-size: .75em;
	vertical-align: text-top;
}

.endnotes{
	border-top: 1px solid var(--border-colour);
	margin: 3em 0;
	padding: 1em 40px 0;
}

/* CV */
@media (min-width: 640px) {
	.vcard { display: flex; justify-content: space-between; }
}
.vcard h1 { white-space: nowrap; }
.address-details { text-align: right; }
.address-details dl { min-width: 17em; }

.cv > section {
	margin: 0 0 3em;
	max-width: 70ch;
}

.cv ol { list-style: none; margin: 0; padding: 0; }
.cv ol>li { margin-bottom: 2em; }
.cv ol>li+li { font-size: .889em; line-height: 1.375; }
.cv ul>li { list-style-type: disc; }

#personal-statement>p { font-size: 1.222em; line-height: 1.364; margin: 0 2.5em 1.5em; }

@media print {
	.notice {
		display: none;
	}

	.cv > section {
		max-width: 100%;
	}
}

/* Books */
.books {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1em;
	margin: 0 0 1em;
	padding: 0;
	text-align: center;
	list-style: none;
}

@media (min-width: 470px) {
	.books {
		grid-template-columns: repeat(auto-fill, 10em);
		gap: 1.5em;
	}
}

.books > li {
	width: 100%;
}

.books img {
	display: block;
	width: 100%;
	margin: 0 0 .5em;
	aspect-ratio: 2 / 3;
}

.books i {
	display: block;
}

.books span {
	font-variant: small-caps;
}