/* Modern reset: https://piccalil.li/blog/a-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
	list-style: none;
}

/* Prevent zooming when orientation changes on some iOS devices */
html {
	text-size-adjust: none;
	-webkit-text-size-adjust: none;
}

/* Set core root defaults */
html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	/*text-rendering: optimizeSpeed; - this can break safari thing*/
	line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
	font: inherit;
}

:root {
	/* branding */
	--black: #000;
	--white: #fff;
	--nord0: #1c1c1c;
	--nord1: #191919;
	--nord2: #232a22;
	--nord3: #4c566a;
	--nord4: #d8dee9;
	--nord5: #e5e9f0;
	--nord6: #eceff4;
	--nord7: #5b7b38;
	--nord8: #bae16a;
	--nord9: #eff3e6;
	--nord10: #5e81ac;
	--nord11: #bf616a;
	--nord12: #d08770;
	--nord13: #efc571;
	--nord14: #a3be8c;
	--nord15: #b48ead;

	/* colours */
	--background: var(--nord0);
	--background-soft: var(--nord2);
	--foreground: var(--nord9);
	--foreground-soft: color-mix(in srgb, var(--nord6) 30%, var(--nord0));
	--link: color-mix(in srgb, var(--nord7) 70%, var(--nord0));
	--link-hover: var(--nord8);
	--highlight: var(--nord8);
	--divider: var(--nord8);

	/* syntax highlighting */
	--code-background: var(--nord2);
	--code-default: var(--nord6);
	--code-regex: var(--nord13);
	--code-tag: var(--nord9);
	--code-comment: var(--nord3);
	--code-selector: var(--nord14);
	--code-number: var(--nord15);
	--code-function: var(--nord8);

	/* typography */
	--font-base: Tahoma, Geneva, sans-serif;
	--font-headings: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		Helvetica, Arial, sans-serif;
	/* --font-quote: var(); */
	--font-mono: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
		monospace;
	/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1500,22,1.333,6,1,800&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
	--step--1: clamp(0.5833rem, 0.5127rem + 0.3534vw, 0.844rem);
	--step-0: clamp(0.875rem, 0.8072rem + 0.339vw, 1.125rem);
	--step-1: clamp(1.3125rem, 1.2618rem + 0.2537vw, 1.4996rem);
	--step-2: clamp(1.9688rem, 1.9605rem + 0.041vw, 1.999rem);
	--step-3: clamp(2.6647rem, 3.0314rem + -0.3911vw, 2.9531rem);
	--step-4: clamp(3.552rem, 4.6677rem + -1.1901vw, 4.4297rem);
	--step-5: clamp(4.7348rem, 7.1624rem + -2.5894vw, 6.6445rem);
	--step-6: clamp(6.3115rem, 10.9581rem + -4.9563vw, 9.9668rem);

	/* spacing / layout */
	--tracking: -0.02ch;
	--tracking-s: -0.055ch;
	--gutter: var(--space-s-m);
	--border-radius: var(--step-0);
	/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1500,22,1.333,6,1,800&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l|m-3xl|s-2xl&g=s,l,xl,12 */
	--space-xs: clamp(1.0625rem, 0.91rem + 0.7627vw, 1.625rem);
	--space-s: clamp(1.375rem, 1.1547rem + 1.1017vw, 2.1875rem);
	--space-m: clamp(2.0625rem, 1.7235rem + 1.6949vw, 3.3125rem);
	--space-l: clamp(2.75rem, 2.3093rem + 2.2034vw, 4.375rem);
	--space-xl: clamp(4.125rem, 3.464rem + 3.3051vw, 6.5625rem);
	--space-2xl: clamp(5.5rem, 4.6186rem + 4.4068vw, 8.75rem);
	--space-3xl: clamp(8.25rem, 6.928rem + 6.6102vw, 13.125rem);

	/* One-up pairs */
	--space-xs-s: clamp(1.0625rem, 0.7574rem + 1.5254vw, 2.1875rem);
	--space-s-m: clamp(1.375rem, 0.8496rem + 2.6271vw, 3.3125rem);
	--space-m-l: clamp(2.0625rem, 1.4354rem + 3.1356vw, 4.375rem);
	--space-l-xl: clamp(2.75rem, 1.7161rem + 5.1695vw, 6.5625rem);
	--space-xl-2xl: clamp(4.125rem, 2.8708rem + 6.2712vw, 8.75rem);
	--space-2xl-3xl: clamp(5.5rem, 3.4322rem + 10.339vw, 13.125rem);

	/* Custom pairs */
	--space-s-l: clamp(1.375rem, 0.5614rem + 4.0678vw, 4.375rem);

	/* focus */
	--focus-outline: 0.3ch solid var(--nord13);
}

@media (prefers-reduced-motion) {
	* {
		transition: none !important;
	}
}

html {
	overflow-y: scroll;
}

body {
	background-color: var(--background);
	color: var(--foreground);
	font-family: var(--font-base);
	font-size: var(--step-0);
	line-height: 1.4;
	letter-spacing: var(--tracking);
	transition: background var(--transition-base), color var(--transition-base);
}

::selection {
	background: var(--foreground);
	color: var(--background);
}

:focus {
	transition: var(--transition-base);
	outline: var(--focus-outline);
	outline-offset: 0.3ch;
	border-radius: var(--border-radius);
	text-decoration: none;
}

:focus:not(:focus-visible) {
	outline: none;
}

:target {
	scroll-margin-top: 2ex;
}

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

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

hr {
	border-top: 1px solid var(--divider);
	border-bottom: none;
	width: 70%;
}

p > code,
li > code {
	background-color: var(--background-soft);
	padding: 0.2ch 0.5ch;
	border-radius: var(--border-radius);
}

table {
	width: 100%;
	border: 1px solid var(--foreground-soft);
	border-collapse: collapse;
}

table th {
	font-family: var(--font-headings);
}

table th,
table td {
	border: 1px solid var(--foreground-soft);
	padding: var(--space-2xs);
}

table tbody tr:nth-child(odd) {
	background-color: var(--background-soft);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-headings);
	text-wrap: balance;
}

h1,
h2,
h3 {
	line-height: 1;
	letter-spacing: var(--tracking-s);
}

h1 {
	font-size: var(--step-4);
}

h2 {
	font-size: var(--step-3);
}

h3 {
	font-size: var(--step-2);
}

h4 {
	font-size: var(--step-1);
}

h5,
h6 {
	font-size: var(--step-0);
}

blockquote {
	background: var(--background-soft);
	border-left: 3px solid var(--highlight);
	margin: 1.5em 10px;
	padding: 0.5em 10px;
}

h4,
h5,
h6,
p,
li,
blockquote:not([class]) {
	max-width: 65ch;
}

p:has(> picture) {
	max-width: initial;
	width: 100%;
}

h1,
h2,
h3 {
	max-width: 20ch;
}

mark {
	background-color: var(--nord13);
	color: var(--nord0);
}

figure {
	position: relative;
}

figure > figcaption {
	position: absolute;
	bottom: var(--space-s-m);
	left: var(--space-s-m);
	color: var(--background);
	margin-right: var(--space-s-m);
	background-color: var(--foreground);
	padding: var(--space-2xs) var(--space-xs) var(--space-3xs);
	box-shadow: 0px 4px color-mix(in srgb, var(--foreground), var(--black) 9%);
	border-radius: var(--border-radius);
	font-size: var(--step--1);
}

figure > figcaption::selection {
	background: var(--nord13);
	color: var(--nord0);
}

.entry-header {
	margin-bottom: var(--space-m, 1em);
}

.entry-content > * + * {
	margin-top: var(--space-m, 1em);
	max-width: 1200px;
}

/* utilities */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.rounded {
	border-radius: var(--border-radius);
}

.subtle {
	font-size: var(--step--1);
	color: var(--foreground-soft);
}

.oembed-youtube,
.oembed-vimeo {
	border: 1px solid var(--foreground);
}

.oembed-youtube lite-youtube {
	max-width: 100%;
}

.oembed-youtube lite-youtube::before {
	background: none;
	position: relative;
}

/* notice */

.notice {
	padding: var(--space-s) var(--space-s) calc(var(--space-s) - 4px)
		var(--space-s);
	border-radius: var(--border-radius);
	color: var(--white);
	background-color: var(--nord9);
	box-shadow: 0px 4px color-mix(in srgb, var(--nord9), var(--black) 9%);
	width: 100%;
	max-width: initial;
}

.notice.notice-warning {
	background-color: var(--nord13);
	box-shadow: 0px 4px color-mix(in srgb, var(--nord13), var(--black) 9%);
}

.notice.notice-error {
	background-color: var(--nord11);
	box-shadow: 0px 4px color-mix(in srgb, var(--nord11), var(--black) 9%);
}

.notice a {
	color: var(--nord5);
}

.notice a:hover {
	color: var(--white);
}

/* body and containers */

body {
	display: flex;
	flex-direction: column;
}

#content {
	padding: var(--space-s);
	flex-grow: 1;
}

/* skip to content */

.skip-link {
	transform: translateY(-140px);
	transition: var(--transition-base);
	padding: var(--space-s-l);
	background-color: var(--foreground);
	color: var(--background);
	font-family: var(--font-headings);
	font-weight: 500;
	border-radius: 0;
	width: 100%;
}

.skip-link:hover {
	color: var(--background);
}

.skip-link:focus {
	transform: translateY(0);
	position: fixed;
	display: block;
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: 100%;
	z-index: 10;
}

/* header and navigation */

.navigation {
	padding: var(--space-xs);
	display: flex;
	gap: var(--space-s-l);
	align-items: center;
	font-family: var(--font-headings);
	flex-direction: column;
	font-weight: 500;
	border-bottom: 1px solid var(--divider);
	border-top: none;
	width: 100%;
}

@media (min-width: 600px) {
	.navigation {
		flex-direction: row;
	}
}

.site-logo {
	max-width: 130px;
	height: auto;
}

@media (min-width: 600px) {
	.site-logo {
		max-width: 100px;
		width: 33%;
		position: relative;
		top: -8px;
	}
}

.site-logo svg {
	color: var(--foreground);
}

.site-logo:focus {
	outline: none;
}

.site-logo:focus svg {
	color: var(--link);
}

.navigation-menu {
	list-style: none;
	border: 0;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--space-s-m);
	flex-grow: 1;
	justify-content: center;
}

.navigation-menu li {
	margin: 0;
	padding: 0;
}

.navigation-menu li a {
	text-decoration: none;
	letter-spacing: var(--tracking-s);
}

.navigation-menu li a:focus {
	outline-offset: 0.6ch;
}

a[aria-current="page"] {
	color: var(--link-hover);
	text-decoration: none;
}

/* home */

.home #content {
	display: flex;
	flex-direction: column;
}

.home .site-intro {
	text-align: center;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.home .site-intro svg {
	max-width: 50%;
}

.home .site-intro p {
	margin: var(--space-s-l) auto 0 auto;
	max-width: 550px;
}

/* posts */

.postlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.postlist li {
	margin-bottom: var(--space-s-m);

	&:last-child {
		margin-bottom: 0;
	}
}

.postlist .postlist-date {
	color: var(--foreground-soft);
	font-size: var(--step--1);
	display: block;
}

.posts .meta {
	list-style: none;
	margin: 0 0 var(--space-s-l) 0;
	padding: 0;
}

@media (min-width: 600px) {
	.posts .meta {
		display: flex;
		gap: var(--space-3xs);
	}

	.posts .meta-reading-time::before {
		content: "•";
		display: inline-block;
		padding-left: var(--space-2xs);
		padding-right: var(--space-2xs);
	}
}

.posts .meta-date,
.posts .meta-reading-time {
	color: var(--foreground-soft);
}

/* footer */

.footer {
	padding: var(--space-s-l);
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}

code[class*="language-"],
pre[class*="language-"] {
	color: var(--code-default);
	background: none;
	font-family: var(--font-mono);
	text-align: left;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;
}

code[class*="language-"] {
	padding-right: var(--space-s-l);
}

[class*="language-"]::selection,
[class*="language-"] *::selection {
	background: var(--nord13);
	color: var(--nord0);
}

/* code blocks */
pre[class*="language-"] {
	padding: var(--space-s-l);
	overflow: auto;
}

:not(pre) > code[class*="language-"],
pre[class*="language-"] {
	background: var(--code-background);
	border-radius: var(--border-radius);
}

/* inline code */
:not(pre) > code[class*="language-"] {
	padding: 0.1em;
	border-radius: 0.3em;
	white-space: normal;
}

/* tokens */
.namespace {
	opacity: 0.7;
}

.token.important,
.token.bold {
	font-weight: bold;
}

.token.italic {
	font-style: italic;
}

.token.entity {
	cursor: help;
}

/* colour */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--code-comment);
}

.token.punctuation {
	color: var(--code-tag);
}

.token.property,
.token.tag,
.token.constant,
.token.symbol,
.token.deleted {
	color: var(--code-tag);
}

.token.number {
	color: var(--code-number);
}

.token.boolean {
	color: var(--code-tag);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: var(--code-selector);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string,
.token.variable {
	color: var(--code-tag);
}

.token.atrule,
.token.attr-value,
.token.function,
.token.class-name {
	color: var(--code-function);
}

.token.keyword {
	color: var(--code-tag);
}

.token.regex,
.token.important {
	color: var(--code-regex);
}

.hero {
	background-color: var(--background-soft);
	color: var(--nord9);
	padding: 20px;
	border-radius: 10px;
	margin: 20px;
	border: 1px solid var(--nord8);
}

.highlight {
	background-color: var(--nord2);
	color: var(--nord9);
	padding: 5px;
	border-radius: 5px;
	margin: 5px;
	/* border: 1px solid var(--nord8); */
	font-size: medium;
}

em {
	color: var(--nord8);
}

img {
	width: 100%;
	max-width: 640px;
	margin: 20px auto;
}