@font-face {
  font-family: 'Georgia';
  src: url('fonts/Georgia.woff2') format('woff2'),
       url('fonts/Georgia.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
	--bg: #fafafa;
	--text: #444444;
	--text-light: #fafafa;
	--text-para-num: #999999;
	--link: #003366;
	--link-visited: #663399;
	--border: #dfdfdf;
	--border-light: #f2f2f2;
	--accent: #f5f5f5;
	--code-bg: #eeeeee;

	--base-font-size: 16px;
	--header-bg: #0a5167;
	--nav-bg: #0a5167;

	--max-width: 700px;
	/* Grid debugging colours
	--main-bg: #ffff64;
	--footer-bg: #8cffa0; */
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	-webkit-text-size-adjust: 100%;
	font-family: Georgia, "Times New Roman", Times, serif;
	font-size: var(--base-font-size);
	line-height: 1.5;
	color: var(--text);
	background: var(--bg);
}

body p {
	text-wrap: pretty;
	text-align: left;
	font-weight: 400;
}

/* Mobile Layout Single Column*/
#page {
	display: grid;
	width: 100%;
	min-height: 100vh;
	grid-template-areas:
		"head"
		"nav"
		"main"
		"foot";
	grid-template-rows: auto auto 1fr auto;
	grid-template-columns: 100vw;
}

/* Wide screen layout */
@media (min-width: 600px) {
	#page {
		grid-template-areas:
			"head main"
			"nav main"
			"nav foot";
		grid-template-rows: auto 1fr auto;
		grid-template-columns: minmax(auto, 15ch) minmax(0, var(--max-width));
	}

	body p {
		text-wrap: pretty;
		text-align: justify;
		hyphens: auto;
		font-weight: 400;
	}
}

sup {
	position: relative;
	top: -0.4em;
	line-height: 0;
	vertical-align: baseline;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1 {
	/* Min: 1.5rem (~24px), Max: 1.875rem (~30px) */
	font-size: clamp(1.5rem, 3.5vw, 1.875rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.025em;
	margin-bottom: 1rem;
}

h2 {
	/* Min: 1.25rem (~20px), Max: 1.5rem (~24px) */
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	font-weight: 400;
	line-height: 1.2;
	margin-top: 2rem;
	color: #2d2d2d;
}

h3 {
	/* Min: 1.1rem (~17.6px), Max: 1.125rem (~18px) */
	/* Nearly linear with body text, separated by style */
	font-size: clamp(1.1rem, 2vw, 1.125rem);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #666;
}

#page>header {
	grid-area: head;
	background-color: var(--header-bg);
	padding: 20px 20px 0px 15px;
}

#page>header h1 {
	font-size: 28px;
	font-weight: normal;
	color: var(--text-light);
}

#page>nav {
	grid-area: nav;
	color: var(--text-light);
	background-color: var(--nav-bg);
	padding: 10px 18px;
	display: flex;
	flex-wrap: wrap;
	gap: 15px;
}

#page>nav a {
	font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	color: var(--text-light);
}

#page>nav a:hover {
	text-decoration: underline;
}

@media (min-width: 600px) {
	#page>nav {
		flex-direction: column;
	}

	#page>nav a {
		margin-bottom: 8px;
	}

	#page>header {
		grid-area: head;
		background-color: var(--header-bg);
		padding: 15px 20px;
	}
}

#page>main {
	grid-area: main;
	background-color: var(--main-bg);
	padding: 20px;
	max-width: var(--max-width);
}

#page>footer {
	grid-area: foot;
	background-color: var(--footer-bg);
	padding: 15px 20px;
	font-size: 12px;
	font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
	text-align: center;
}

a {
	text-decoration: none;
	color: var(--link);
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var(--link-visited);
}

img {
	max-width: 100%;
	height: auto;
	border: 1px solid var(--border);
	margin: 10px 0;
}

figure {
	margin: 60px 0;
	display: flex;
	flex-direction: column;
	background: var(--bg);
}

figure a {
	display: inline-block;
	line-height: 0;
}

figure img {
	max-height: 90vh;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	border: 1px solid var(--border);
	margin: 0;
	display: block;
}

figcaption {
	margin-top: 12px;
	padding: 10px 15px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
	border-left: 3px solid var(--border);
	font-family: "Trebuchet MS", "Helvetica Neue", Arial, sans-serif;
}

figcaption a {
	text-decoration: underline;
	text-decoration-color: var(--border);
}

figcaption a:hover {
	text-decoration-color: var(--link);
}

@media (max-width: 700px) {
	figure {
		margin: 50px 0;
	}

	figcaption {
		font-size: 13px;
	}
}

h2 {
	font-size: 22px;
	font-weight: normal;
	border-bottom: 1px solid var(--border);
	padding-bottom: 5px;
	margin: 25px 0 15px;
	color: var(--text);
}

h3 {
	font-size: 18px;
	font-weight: normal;
	margin: 20px 0 10px;
}

h4 {
	font-size: 16px;
	font-weight: bold;
	margin: 15px 0 10px;
}

p {
	margin-bottom: 15px;
}

.para-num p::before {
	content: attr(data-pnum);
	color: var(--text-para-num);
	margin-right: 0.5em;
}

@media (min-width: 600px) {
	.para-num p {
		position: relative;
		padding-right: 2em;
	}

	.para-num p::before {
		position: absolute;
		right: 0;
		top: 0;
		margin-right: 0;
		font-size: 0.75em;
	}
}

blockquote>p {
	margin-top: 15px;
}

ul,
ol {
	margin: 10px 0 15px 25px;
}

li {
	margin-bottom: 5px;
}

blockquote {
	border-left: 4px solid var(--border);
	margin: 15px 0;
	padding: 5px 15px;
	background: var(--border);
	font-style: italic;
}

pre {
	background: var(--code-bg);
	border: 1px solid var(--border);
	overflow-x: auto;
	margin: 15px 0;
	font-family: "Courier New", Courier, monospace;
	font-size: 14px;
}

code {
	font-family: "Courier New", Courier, monospace;
	background: var(--code-bg);
	padding: 2px 5px;
	font-size: 14px;
}

pre code {
	background: none;
	padding: 0;
}

table {
	border-collapse: collapse;
	margin: 15px 0;
	width: 100%;
}

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

th {
	background: var(--border-light);
}

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 25px 0;
}

ul.link-list {
	list-style: none;
	margin-left: 0;
}

ul.link-list li {
	margin-bottom: 10px;
	padding-left: 20px;
	text-indent: -20px;
}

.footnote {
	font-size: 12px;
	vertical-align: super;
}

.footnotes {
	margin-top: 40px;
	padding-top: 15px;
	font-size: 14px;
}

.footnotes ol {
	margin-left: 15px;
}