/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bold}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

* { box-sizing: border-box }
img { max-width: 100%; height: auto; }

:root {
	
	/* Copy */
	--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	
	/* Site base layout */
	--site-padding-top: 51px;
	--site-side-padding: 20px;
	--full-width-margin: -20px;
	--list-item-large-gap: 10px;
	--list-item-small-gap: 10px;
	
	/* Light/dark colours */
	--background-color: rgb(255,255,255);
	--text-color: rgb(29,29,31);
	--text-color-muted: #778;
	--accent-color: #0379ff;
	--tint-color: #f2f2f4;
	
	/* Navbar */
	--navbar-background-color: rgba(255,255,255, .5);
	--navbar-backdrop-filter: blur(30px);
	
	/* Buttons */
	--button-color: #0379ff;
	--button-background-color: #eeeeef;
	
	/* Borders */
	--list-item-separator-color: #dde;
	--logo-border-color: #dde;
	
}

.dark {
	
	--background-color: rgb(0,0,0);
	--text-color: rgb(245,245,247);
	--text-color-muted: #aaa;
	--accent-color: #2183e8;
	--tint-color: #141418;
	
	--navbar-background-color: rgba(0,0,0, .5);
	--navbar-backdrop-filter: blur(30px);
	
	--button-color: #2183e8;
	--button-background-color: #1e1b18;
	
	--list-item-separator-color: #332;
	--logo-border-color: #332;
	
}

@media screen and (min-width: 601px) {
	:root {
		--site-side-padding: 50px;
		--full-width-margin: -50px;
		--list-item-large-gap: 25px;
		--list-item-small-gap: 12px;
	}
}
@media screen and (min-width: 993px) {
	:root {
		
	}
}
@media screen and (min-width: 1140px) {
	:root {
		--site-side-padding: 50px;
		--full-width-margin: -50px;
	}
}


.nav-tool.theme-toggle-to-light {
	display: none;
}

.dark .nav-tool.theme-toggle-to-light {
	display: initial;
}

.dark .nav-tool.theme-toggle-to-dark {
	display: none;
}

html:not(.dark) img[data-appearance="dark"] { display: none !important; }
.dark img[data-appearance="light"] { display: none !important; }














/* Base
   -------------------------------------------------------------------------------- */
html {
	font-size: 62.5%; /* 10px */
	font-family: var(--font-family);
	background-color: var(--background-color);
}

body {
	font-size: 1.4rem;
	line-height: 1.35;
	color: var(--text-color);
	background-color: var(--background-color);
}

@media screen and (min-width: 601px) {
	body {
		font-size: 1.4rem;
	}
}

@media screen and (min-width: 1140px) {
	body {
		font-size: 1.4rem;
	}
}

a,
.accent-color {
	color: var(--accent-color);
}

h1 {
	font-size: 2.8rem;
	line-height: 1.3;
	margin-block-start: 0;
	margin-block-end: 0.5em;
	text-wrap: balance;
}

h2 {
	font-size: 2.2rem;
	margin-block-start: 0;
	margin-block-end: .5em;
	text-align: balance;
}

h3 {
	font-size: 2.0rem;
	margin-block-start: 0;
	margin-block-end: .5em;
	text-align: balance;
}

p {
	margin-block-start: 1em;
	margin-block-end: 1em;
}

.sub-title {
	font-size: 19px;
	line-height: 1.3em;
	font-weight: 400;
	letter-spacing: 0.012em;
	margin-top: 0;
	margin-bottom: 32px;
}

@media screen and (min-width: 993px) {
	h1 {
		font-size: 3.8rem;
	}
	h2 {
		font-size: 2.3rem;
	}
	h3 {
		font-size: 2.1rem;
	}
	.sub-title {
		font-size: 2.8rem;
		margin-bottom: 62px;
	}
}

@media screen and (min-width: 1140px) {
	h1 {
		font-size: 3.8rem;
	}
	h2 {
		font-size: 2.5rem;
	}
	h3 {
		font-size: 2.2rem;
	}
	.sub-title {
		font-size: 2.8rem;
	}
}











/* Base layout
   -------------------------------------------------------------------------------- */
.container {
	
}

main {
	padding-top: var(--site-padding-top);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	max-width: 1300px;
	margin-left: auto;
	margin-right: auto;
}



/* Base layout grids
   -------------------------------------------------------------------------------- */
.grid {
	display: grid;
	gap: 20px;
}

.grid.with-2-columns {
	grid-template-columns: 1fr;
}

.grid.with-3-columns {
	grid-template-columns: 1fr;
}

@media screen and (min-width: 601px) {
	
	.grid.with-2-columns {
		grid-template-columns: 1fr 31.6%;
	}
	
	.grid.with-3-columns {
		grid-template-columns: 1fr 33%;
	}
	
	.grid.with-3-columns > div:first-child {
		display: none;
	}
	
}

@media screen and (min-width: 993px) {
	
	.grid.with-3-columns {
		grid-template-columns: 23.5% 1fr 23.5%;
	}
	
	.grid.with-3-columns > div:first-child {
		display: revert;
	}
	
}














/* Buttons
   -------------------------------------------------------------------------------- */
.btn {
	appearance: none;
	display: inline-block;
	font-size: 1.4rem;
	line-height: 1;
	letter-spacing: .5px;
	border: none;
	border-radius: 8px;
	margin: 1px;
	padding: .75em 1.5em;
	vertical-align: middle;
	background-color: var(--button-background-color);
	color: var(--button-color);
	text-decoration: none;
	text-align: center;
}

.btn.cta {
	font-size: 1.5rem;
	font-weight: 800;
	padding: .5em 1.0em;
	border-radius: 50px;
}

@media (hover: hover) {
	.btn:hover {
		filter: brightness(80%);
	}
	.dark .btn:hover {
		filter: brightness(145%);
	}
}

@media screen and (min-width: 601px) {
	.btn.cta {
		font-size: 1.3rem;
		font-weight: 600;
	}
}

.btn.prominent {
	background-color: var(--button-prominent-background-color);
	color: var(--button-prominent-color);
}



















/* Navbar
   -------------------------------------------------------------------------------- */
#navbar {
	position: fixed;
	z-index: 9;
	display: flex;
	align-items: center;
	top: 0;
	left: 0;
	width: 100%;
	height: 48px;
	background-color: var(--navbar-background-color);
	-webkit-backdrop-filter: var(--navbar-backdrop-filter);
	backdrop-filter: var(--navbar-backdrop-filter);
}

.navbar-container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
}

.nav-link-home {
	color: inherit;
	text-decoration: none;
	font-weight: 900;
}

.nav-tools {
	display: flex;
}

.nav-tools .nav-tool {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 40px;
	height: 40px;
	padding: 10px;
	background: none;
	border: none;
}

.dark .nav-tool img {
	filter: invert(1);
}

@media (hover: hover) {
	.nav-tool:hover {
		background-color: var(--link-highlight-background-color);
	}
}









































/* Base images
-------------------------------------------------------------------------------- */
.icon {
	border-radius: 16%;
	aspect-ratio: 1 / 1;
	border: 1px solid var(--logo-border-color);
}
.tile {
	border-radius: 6px;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--logo-border-color);
}


















/* Accessibility
-------------------------------------------------------------------------------- */
.skip-link {
	position: absolute;
	z-index: 10;
	background: var(--tint-color);
	color: var(--text-color);
	font-weight: 700;
	left: 50%;
	width: 200px;
	margin-left: -100px;
	text-align: center;
	padding: 4px;
	transform: translateY(-140%);
}

.skip-link:focus {
	transform: translateY(0%);
}

















/* Lists
   -------------------------------------------------------------------------------- */
.list {
	margin-block-start: 0;
	margin-block-end: 2em;
	padding: 0;
	list-style: none;
}



/* Lists: icons
   -------------------------------------------------------------------------------- */
.list.icons {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--list-item-small-gap);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin-left: var(--full-width-margin);
	margin-right: var(--full-width-margin);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	scroll-snap-type: x mandatory;
	scroll-padding: var(--site-side-padding);
}

.list.icons .item {
	flex-grow: 0;
	flex-shrink: 0;
	scroll-snap-align: start;
	--list-icon-items: 3;
	width: calc((100% / var(--list-icon-items)) - (((var(--list-icon-items) - 1) / var(--list-icon-items)) * var(--list-item-small-gap)));
}

@media screen and (min-width: 601px) {
	.list.icons .item {
		--list-icon-items: 6;
	}
}

@media screen and (min-width: 993px) {
	.list.icons .item {
		--list-icon-items: 8;
	}
}

@media screen and (min-width: 1140px) {
	.list.icons .item {
		--list-icon-items: 10;
	}
}



/* Lists: tiles
   -------------------------------------------------------------------------------- */
.list.tiles {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--list-item-large-gap);
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	margin-left: var(--full-width-margin);
	margin-right: var(--full-width-margin);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	scroll-snap-type: x mandatory;
	scroll-padding: var(--site-side-padding);
}

.list.tiles .item {
	flex-grow: 0;
	flex-shrink: 0;
	scroll-snap-align: start;
	--list-tile-items: 1;
	width: calc((100% / var(--list-tile-items)) - (((var(--list-tile-items) - 1) / var(--list-tile-items)) * var(--list-item-large-gap)));
}

@media screen and (min-width: 601px) {
	.list.tiles .item {
		--list-tile-items: 2;
	}
}

@media screen and (min-width: 993px) {
	.list.tiles .item {
		--list-tile-items: 3;
	}
}

@media screen and (min-width: 1140px) {
	.list.tiles .item {
		--list-tile-items: 4;
	}
}



/* Lists: columns
   -------------------------------------------------------------------------------- */
.list.columns {
	display: grid;
	grid-template-rows: auto;
	grid-auto-flow: column;
	--list-column-items: 1;
	grid-auto-columns: calc((100% / var(--list-column-items)) - (((var(--list-column-items) - 1) / var(--list-column-items)) * var(--list-item-large-gap)));
	gap: 0 var(--list-item-large-gap);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin-left: var(--full-width-margin);
	margin-right: var(--full-width-margin);
	padding-left: var(--site-side-padding);
	padding-right: var(--site-side-padding);
	scroll-snap-type: x mandatory;
	scroll-padding: var(--site-side-padding);
}

.list.columns .item {
	scroll-snap-align: start;
}

.list.columns.with-2-rows {
	grid-template-rows: auto auto;
}

.list.columns.with-3-rows {
	grid-template-rows: auto auto auto;
}

@media screen and (min-width: 601px) {
	.list.columns {
		--list-column-items: 2;
	}
}

@media screen and (min-width: 993px) {
	.list.columns {
		--list-column-items: 3;
	}
}

@media screen and (min-width: 1140px) {
	.list.columns {
		--list-column-items: 4;
	}
}



/* List Items: tiles
   -------------------------------------------------------------------------------- */
.list.tiles .item {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.list.tiles .title {
	font-size: 1.3em;
	line-height: 1;
	margin-block-start: 0;
	margin-block-end: 3px;
}

.list.tiles .info {
	font-size: 1.1em;
	line-height: 1.3;
	margin-block-start: 0;
	margin-block-end: 8px;
	color: var(--text-color-muted);
}



/* List Items: icons
   -------------------------------------------------------------------------------- */
.list.icons .item {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
}

.list.icons .title {
	font-size: 0.9em;
	line-height: 1;
	margin-block-start: 8px;
	margin-block-end: 3px;
}

.list.icons .info {
	font-size: 0.8em;
	line-height: 1.3;
	color: var(--text-color-muted);
}



/* List Items: minimal
   -------------------------------------------------------------------------------- */
.minimal-items .item {
	position: relative;
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
}

@media screen and (min-width: 601px) {
	.minimal-items .item {
		font-size: 1.3rem;
	}
}

.minimal-items.list.with-1-column .item:after {
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: calc(100% - 54px);
	height: 1px;
	background-color: var(--list-item-separator-color);
}

.minimal-items .body {
	display: flex;
	flex-direction: column;
}

.minimal-items .title {
	font-size: 1.2em;
	line-height: 1;
	font-weight: 500;
	margin-block-start: 3px;
	margin-block-end: 3px;
}

.minimal-items .info {
	font-size: 1.0em;
	line-height: 1.3;
	margin-block-start: 0;
	margin-block-end: 0;
	color: var(--text-color-muted);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}



/* List Items: compact
   -------------------------------------------------------------------------------- */
.compact-items .item {
	position: relative;
	display: grid;
	grid-template-columns: 62px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 0;
}

@media screen and (min-width: 601px) {
	.compact-items .item {
		font-size: 1.3rem;
	}
}

.compact-items.list.with-1-column .item:after {
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: calc(100% - 72px);
	height: 1px;
	background-color: var(--list-item-separator-color);
}

.list.with-1-column .item:last-child:after {
	all: revert;
}

.compact-items.with-2-rows .item:nth-child(odd):after {
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: calc(100% - 72px);
	height: 1px;
	background-color: var(--list-item-separator-color);
}

.compact-items .body {
	display: flex;
	flex-direction: column;
}

.compact-items .title {
	font-size: 1.2em;
	line-height: 1;
	font-weight: 500;
	margin-block-start: 3px;
	margin-block-end: 3px;
}

.compact-items .info {
	font-size: 1.0em;
	line-height: 1.3;
	margin-block-start: 0;
	margin-block-end: 0;
	color: var(--text-color-muted);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}



/* List Items: detailed
   -------------------------------------------------------------------------------- */
.detailed-items .item {
	position: relative;
	display: grid;
	grid-template-columns: 62px 1fr auto;
	gap: 10px;
	align-items: center;
	padding: 8px 8px;
	background-color: var(--tint-color);
	border-radius: 10px;
}

.detailed-items.with-2-rows .item:nth-child(odd):after {
	position: absolute;
	content: '';
	bottom: 0;
	right: 0;
	width: calc(100% - 72px);
	height: 1px;
	background-color: var(--list-item-separator-color);
}

.detailed-items .body {
	display: flex;
	flex-direction: column;
}

.detailed-items .title {
	font-size: 1.2em;
	line-height: 1;
	font-weight: 500;
	margin-block-start: 3px;
	margin-block-end: 3px;
}

.detailed-items .info {
	font-size: 1.0em;
	line-height: 1.3;
	margin-block-start: 0;
	margin-block-end: 0;
	color: var(--text-color-muted);
	-webkit-line-clamp: 2;
	line-clamp: 2;
}


















/* Footer
   -------------------------------------------------------------------------------- */






























/* Common alignment helpers
	  -------------------------------------------------------------------------------- */
.align-left,
table.align-left th { text-align: left; }
.align-center,
table.align-center th { text-align: center; }
.align-right,
table.align-right th { text-align: right; }

.float-right { float: right; }





/* Colours
   -------------------------------------------------------------------------------- */
.text-color-muted { color: var(--text-color-muted); }










/* Screen size display helpers
   -------------------------------------------------------------------------------- */
.hidden { display: none !important; }
@media only screen and (max-width: 600px) {
	.not-sm {
		display: none !important;
	}
}
@media only screen and (min-width: 601px) {
	.only-sm {
		display: none !important;
	}
}
@media only screen and (max-width: 992px) {
	.only-lg {
		display: none !important
	}
}