/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}
body {
	line-height: 1;
}
ol,
ul {
	list-style: none;
}
blockquote,
q {
	quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}


:root {
	--colour-background: #ffffff;
	--colour-text-black: #000000;
	--colour-text-gray: #6b6b6b;
	--colour-text-link: #0769ff;

	@media (prefers-color-scheme: dark) {
		--colour-background: #222222;
		--colour-text-black: #ffffff;
		--colour-text-gray: #bcbec0;
		--colour-text-link: #3e8bff;
	}
}

/* CSS VARS - COLOUR SCHEME */

:root {
	/*
			* COLOR PALETTE: stolen from TailWind:
			* https://tailwindcss.com/docs/colors
										NOTE: Could look into a really minimal "manual toggle"
			 situation: https://tailwindcss.com/docs/dark-mode#with-system-theme-support */
	/* blue */
	--color-blue-200: oklch(0.882 0.059 254.128);
	--color-blue-300: oklch(0.809 0.105 251.813);
	--color-blue-400: oklch(0.707 0.165 254.624);
	--color-blue-500: oklch(0.623 0.214 259.815);
	--color-blue-600: oklch(0.546 0.245 262.881);
	--color-blue-700: oklch(0.488 0.243 264.376);
	--color-blue-800: oklch(0.424 0.199 265.638);
	/* neutral */
	--color-neutral-0: oklch(1 0 0); /* note: custom addition */
	--color-neutral-50: oklch(0.985 0 0);
	--color-neutral-100: oklch(0.97 0 0);
	--color-neutral-150: oklch(0.946 0 0);
	--color-neutral-200: oklch(0.922 0 0);
	--color-neutral-300: oklch(0.87 0 0);
	--color-neutral-400: oklch(0.708 0 0);
	--color-neutral-500: oklch(0.556 0 0);
	--color-neutral-600: oklch(0.439 0 0);
	--color-neutral-700: oklch(0.371 0 0);
	--color-neutral-800: oklch(0.269 0 0);
	--color-neutral-850: oklch(0.237 0 0);
	--color-neutral-900: oklch(0.205 0 0);
	--color-neutral-950: oklch(0.145 0 0);
}

@media (prefers-color-scheme: dark) {
	:root {
		/* blue */
		--color-blue-200: oklch(0.424 0.199 265.638);
		--color-blue-300: oklch(0.488 0.243 264.376);
		--color-blue-400: oklch(0.546 0.245 262.881);
		--color-blue-500: oklch(0.623 0.214 259.815);
		--color-blue-600: oklch(0.707 0.165 254.624);
		--color-blue-700: oklch(0.809 0.105 251.813);
		--color-blue-800: oklch(0.882 0.059 254.128);
		/* neutral */
		--color-neutral-0: oklch(0 0 0); /* note: custom addition */
		--color-neutral-50: oklch(0.985 0 0);
		--color-neutral-100: oklch(0.205 0 0);
		--color-neutral-150: oklch(0.237 0 0);
		--color-neutral-200: oklch(0.269 0 0);
		--color-neutral-300: oklch(0.371 0 0);
		--color-neutral-400: oklch(0.439 0 0);
		--color-neutral-500: oklch(0.556 0 0);
		--color-neutral-600: oklch(0.708 0 0);
		--color-neutral-700: oklch(0.87 0 0);
		--color-neutral-800: oklch(0.922 0 0);
		--color-neutral-850: oklch(0.946 0 0);
		--color-neutral-900: oklch(0.97 0 0);
		--color-neutral-950: oklch(0.985 0 0);
	}
}

/* SEMANTIC COLOUR VARIABLES - builds on the above */
:root {
	--color-background-primary: var(--color-neutral-0);
	--color-border-gray: var(--color-neutral-400);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background-primary: var(--color-neutral-150);
	}
}


:root {
	/* System font stacks swiped from https://systemfontstack.com/ */
	--font-family-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir,
		segoe ui, helvetica neue, Cantarell, Ubuntu, roboto, noto, helvetica, arial,
		sans-serif;
	--font-family-serif: Iowan Old Style, Apple Garamond, Baskerville,
		Times New Roman, Droid Serif, Times, Source Serif Pro, serif,
		Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
	--font-family-monospace: Menlo, Consolas, Monaco, Liberation Mono,
		Lucida Console, monospace;
}


/* NOTE: loosely using https://github.com/jescalan/gps here.
			   Probably makes sense to localize that README for future reference */

* {
	box-sizing: border-box;
}

html,
body {
	font-size: 16px;
	padding: 0;
	margin: 0;
	font-family: var(--font-family-sans);
}

body {
	background: var(--color-background-primary);
	color: var(--colour-text-black);
}


.g-date {
	color: var(--colour-text-gray);
	font-size: 0.875rem;
}


/* FOOTER */

.g-footer {
	/* border-top: 1px solid var(--color-neutral-200); */
	text-align: center;
	padding: 3rem 1rem 2rem 1rem;
}


/* GLOBAL: LINKS */

.g-link {
	color: var(--color-blue-600);
	text-decoration: none;
	font-family: var(--font-family-sans);
	font-weight: 400;
}

.g-link-outlined {
	border-radius: 99px;
	border: 1px solid var(--color-blue-600);
	color: var(--color-blue-600);
	display: block;
	font-family: var(--font-family-sans);
	padding: 0.5rem 1rem;
	text-decoration: none;
	font-weight: 400;
}

.g-link-outlined-disabled {
	border-color: var(--color-neutral-600);
	color: var(--color-neutral-600);
}

.g-links-list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}


/* GLOBAL: MARKDOWN */

.g-markdown {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.g-markdown p {
	line-height: 1.6;
	font-weight: 300;
	color: var(--color-neutral-800);
	font-family: var(--font-family-serif);
}

.g-markdown a {
	color: var(--color-blue-600);
	text-decoration: none;
	font-family: var(--font-family-serif);
	font-weight: 400;
}

.g-markdown a:hover {
	text-decoration: underline;
}

.g-markdown em {
	font-style: italic;
}

.g-markdown code {
	font-family: var(--font-family-monospace);
	background-color: var(--color-neutral-300);
	padding: 0.2em 0.4em;
	border-radius: 6px;
	font-size: 0.875rem;
}


/* GLOBAL: MIN-100-LAYOUT */

.g-min-100-layout {
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.g-min-100-layout-footer {
	margin-top: auto;
}


.g-rss-icon {
	display: inline;
	height: 1rem;
	width: auto;
	position: relative;
	top: 0.125rem;
	margin-right: 0.25rem;
}


/* GLOBAL: SPACERS */
/* As much as I love flex layouts, setting up containers just to
			   vary spacing is annoying. But I also hate margins and padding.
				 So I use "spacer" divs, and set their height with inline styles.
				 This feels icky from a CSS purist standpoint, but I'm over it. */
.g-spacer {
	width: 100%;
	height: 1rem;
}


/* GLOBAL: TYPOGRAPHY */

.g-type-small-heading {
	font-family: var(--font-family-sans);
	color: var(--color-neutral-950);
	font-size: 0.875rem;
	font-weight: 600;
}

.g-type-page-heading {
	font-family: var(--font-family-sans);
	color: var(--color-neutral-950);
	font-size: 1.8rem;
	font-weight: 700;
}