/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize */

/*
Document
========
*/

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the line height in all browsers.
3. Prevent adjustments of font size after orientation changes in iOS.
4. Use a more readable tab size (opinionated).
*/

html {
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji'; /* 1 */
	line-height: 1.15; /* 2 */
	-webkit-text-size-adjust: 100%; /* 3 */
	tab-size: 4; /* 4 */
}

/*
Sections
========
*/

/**
Remove the margin in all browsers.
*/

body {
	margin: 0;
}

/*
Text-level semantics
====================
*/

/**
Add the correct font weight in Chrome and Safari.
*/

b,
strong {
	font-weight: bolder;
}

/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/

code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}

/**
Add the correct font size in all browsers.
*/

small {
	font-size: 80%;
}

/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/*
Tabular data
============
*/

/**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/

table {
	border-color: currentcolor;
}

/*
Forms
=====
*/

/**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/

button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
Correct the inability to style clickable types in iOS and Safari.
*/

button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}

/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/

legend {
	padding: 0;
}

/**
Add the correct vertical alignment in Chrome and Firefox.
*/

progress {
	vertical-align: baseline;
}

/**
Correct the cursor style of increment and decrement buttons in Safari.
*/

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}

/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/

[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
Remove the inner padding in Chrome and Safari on macOS.
*/

::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/

::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/*
Interactive
===========
*/

/*
Add the correct display in Chrome and Safari.
*/

summary {
	display: list-item;
}



/**
 * Actual design of the page. Mostly inspired by:
 * 
 * - Bartosz Ciechanowskis Blog (https://ciechanow.ski/): Spacing, navigation, minimalist aesthetic.
 * - Chirpy (https://chirpy.cotes.page/): Rough color scheme, but to noisy and distracting.
 * 
 * Other somewhat inspirations, or rather designs I liked when reading the articles:
 * 
 * - https://www.universetoday.com/articles/watch-the-sun-unleash-a-solar-flare
 * - https://miketuritzin.com/post/rendering-particles-with-compute-shaders/
 * - https://giannirosato.com/blog/post/lossless-data-comp/
 */

/* Basic typography */
@font-face { font-family: SourceSans; font-weight: 200 900; src: url("SourceSans3-VariableFont_wght.ttf"); }
@font-face { font-family: SourceCodePro; font-weight: 200 900; src: url("SourceCodePro-VariableFont_wght.ttf"); }
html { font: 19px SourceSans, sans-serif; }
code, kbd, samp, pre { font: 1em SourceCodePro, monospace; }

b, strong, h1, h2, h3, h4, h5, h6 { font-weight: 600; }

@font-face { font-family: FontAwesome; src: url("fa-regular-400.woff2"); }
@font-face { font-family: FontAwesome; src: url("fa-solid-900.woff2"); font-weight: bold; }
@font-face { font-family: FontAwesomeBrands; src: url("fa-brands-400.woff2"); }


/* Basic colors */
:root {
	--main-text: hsl(0 0% 70%); --main-bg: hsl(240 5% 11%);
	--landmark: hsl(220 90% 75%); --highlight: hsl(15 65% 55%); --interacting: color-mix(in oklab, var(--highlight), 20% black);
	--callout-bg: hsl(0 0% 8%); --callout-border: hsl(0 0% 18%);
	--marker-bg: hsl(45 95% 15%);
	--selected: hsl(65 45% 40%);
	--input-bg: hsl(245 10% 18%); --input-border: hsl(0 0% 35%);
	--backdrop-text: hsl(0, 0%, 35%);
}
html { color-scheme: dark; color: var(--main-text); background: var(--main-bg); }


/* Basic content elements */
h1 { font-size: 2.0em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.2em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1.0em; }
:is(h1, h2, h3, h4, h5, h6) {
	margin: 1.5em 0 0.5em 0; clear: both;
	&:target { color: var(--selected); }
	& > a.permalink {
		opacity: 0; transition: opacity 0.2s; user-select: none;
		:hover > &, :focus-within > & { opacity: 1; }
	}
}

@media (width < 900px) {
	h1 { font-size: calc(1.5em); }
	h2 { font-size: calc(1.4em); }
	h3 { font-size: calc(1.3em); }
	h4 { font-size: calc(1.2em); }
	h5 { font-size: calc(1.1em); }
	h6 { font-size: calc(1.0em); }
	
	ul, ol { padding-left: 1.25em; }
}

a, summary {
	--base-color: var(--landmark);
	color: var(--base-color); text-decoration: none; transition: 0.2s color;
	&:is(summary) { cursor: pointer; }
	&:hover { color: var(--highlight); }
	&:active { color: var(--interacting); }
	
	&:is(a):has(img) {
		/* Using display: table; to size link to content size. display: block; width: min-content; doesn't work for SVGs (they collapse down to 0 width). */
		display: table; border: 1px solid var(--landmark); padding: 1px; border-radius: 3px; box-sizing: border-box; transition: 0.2s border-color;
		&:hover  { border-color: var(--highlight); }
		&:active { border-color: var(--interacting); }
	}
}

details { margin: 1em 0; }

table {
	margin: 1em; border-spacing: 0; overflow-x: auto;
	& :is(td, th) { padding: 0.3em 1em; }
	& th { text-align: left; }
	& tbody > tr:nth-of-type(odd) { background-color: var(--callout-bg); }
}

blockquote { margin: 1em 0; border-left: 0.25em solid hsl(0 0% 20%); color: color-mix(in oklab, var(--main-text), 20% black); padding: 0 0 0 1em; }

pre {
	font: 0.8em SourceCodePro; margin: 1em 0; padding: 0.75em; overflow-y: auto; word-break: break-word;
	background: var(--callout-bg); color: inherit; border: 1px solid var(--callout-border); border-radius: 0.5em; 
	& > code { font: inherit; }
}
pre.console {
	& > samp { }
	& > kbd  { color: #d28445; }
}

:not(pre) > code { font: 0.9em SourceCodePro; background: var(--callout-bg); color: inherit; padding: 0.1em 0.2em; border-radius: 6px; }
mark { background-color: var(--marker-bg); color: inherit; border-radius: 5px; }
/* Syntax highlighting, colors based on base16.dark (https://github.com/mzlogin/rouge-themes/tree/master?tab=readme-ov-file#base16dark) and base16-edge-dark (https://highlightjs.org/demo) */
code[class^=lang_] {
	& span.landmark_a  { color: #d28445; }
	& span.landmark_b  { color: #d390e7; }
	& span.landmark_c  { color: #dbb774; }
	& span.variation_a { color: #5ebaa5; }
	& span.variation_b { color: #90a959; }
	& span.variation_c { color: #73b3e7; }
	& span.backdrop_a  { color: #848484; }
}

aside { margin: 1em 0; padding: 0 0 0 0.5em; border-left: 0.25em solid color-mix(in oklab, var(--landmark), 20% black); }


/* Form controls (only textboxes and buttons right now) */
:focus-visible { outline: 2px solid var(--landmark); outline-offset: 1px; }

input[type=text], input[type=mail], input[type=number], textarea {
	font: inherit; color: inherit; margin: 0; padding: 0.2em 0.5em;
	background: var(--input-bg); border: 1px solid var(--input-border); border-radius: 6px;
	&::placeholder { color: inherit; opacity: 0.55; }
}
label:has(input[type=text], input[type=mail], input[type=number], textarea) {
	display: inline-block; position: relative; margin-top: 1lh;
	& > span { position: absolute; left: calc(0.5em / 0.83 + 1px); top: calc(-1lh + 2px); font-size: 0.83em; }
	&:has(:focus-visible) > span { color: var(--landmark); }
	&:has(textarea) { display: block; }
}
textarea { display: block; margin: 0; box-sizing: border-box; width: 100%; min-height: 6.75lh; resize: vertical; }
label:has(textarea) { width: 100%; }

button, .button {
	--button-bg: hsl(0 0% 15%);        --button-color: var(--landmark);                                        --button-outer-border: hsl(0 0% 20%); --button-inner-border: hsl(0 0% 10%);
	--button-hover-bg: hsl(0 0% 17%);  --button-hover-color: color-mix(in oklab, var(--landmark), 25% white);  --button-hover-outer-border: hsl(0 0% 25%);
	--button-active-bg: hsl(0 0% 13%); --button-active-color: color-mix(in oklab, var(--landmark), 20% black); --button-active-outer-border: hsl(0 0% 25%);
	font: inherit; margin: 0; padding: 0.2em 0.5em; border-radius: 6px; cursor: pointer; transition: color 0.2s, background 0.2s, border 0.2s;
	color: var(--button-color); background: var(--button-bg); border: 1px solid var(--button-outer-border); box-shadow: inset 0 0 0 1px var(--button-inner-border);
	&:hover  { background: var(--button-hover-bg);  border-color: var(--button-hover-outer-border);  color: var(--button-hover-color); }
	&:active { background: var(--button-active-bg); border-color: var(--button-active-outer-border); color: var(--button-active-color); transition-duration: 0.05s; }
	&::before { font-family: FontAwesome; margin-right: 0.25em; position: relative; top: 1px; /* content: "\f059"; Not sure we really need an icon for every button. Makes figure captions explode. Disabled for now. */ }
	&:is(summary.button) { display: inline-block; user-select: none; }
	
	&.dangerous:hover  { color: var(--highlight);   background: color-mix(in oklab, var(--button-hover-bg),  20% var(--highlight));   }
	&.dangerous:active { color: var(--interacting); background: color-mix(in oklab, var(--button-active-bg), 20% var(--interacting)); }
}


/* Figures */
figure {
	font-size: 0.8em; margin: 1rem auto; max-width: 100%; display: table; caption-side: bottom;
	@media (width >= 900px) {
		& { max-width: calc(100% - 2rem); }
	}
	
	& pre { margin: 0; }
	& :is(img, video) { display: block; margin: 0 auto; max-width: 100%; }
	& img { background: white; }
	
	/* Buttons for controls */
	& p { margin: 0.5em 0; }
	& p:has(button) { display: flex; align-items: baseline; gap: 0.5em; flex-wrap: wrap; }
	
	/* Normal figure: Caption centered and width based on image width. */
	& p:has(button) { justify-content: center; }
	& > figcaption { text-align: center; display: table-caption; }
	& > figcaption:not(:has(p)) { margin: 0.5em 0 0 0; text-wrap: balance; }
	
	/* Long caption (e.g. good for 3 paragraphs or more): Caption not centered, full width. */
	&.long-caption > figcaption { text-align: unset; display: unset; }
	
	@media (width >= 900px) {
		/* Side-by-side figure: Caption not centered, flex at right. */
		&.side-by-side {
			display: flex; align-items: start; flex-wrap: wrap; gap: 0.5em;
			& > img { flex: 0 0 auto; }
			& > figcaption {
				flex: 1 1 min-content; margin: 0; text-align: initial;
				& > :first-child { margin-top: 0; }
				& > :last-child { margin-bottom: 0; }
			}
			& p:has(button) { justify-content: start; }
		}
		
		/* Inline figures */
		&.inline { float: right; margin: 0.5em 0 0 2em; }
		&.inline.important { float: left; margin: 0.5em 2em 0 0; }
	}
}


/* Main page layout */
body {
	--main-width: min(900px, 90vw);
	margin: 0; padding: 0; min-height: 100vh;
	display: grid; grid-template:
		"header" auto
		"main"   1fr
		"footer" auto
	;
	& > header { grid-area: header; }
	& > main   { grid-area: main; margin: 0 auto; width: var(--main-width); }
	& > footer { grid-area: footer; }
}

/* Pager header */
body > header {
	background: hsl(0 0% 12%); color: hsl(0 0% 50%); border-bottom: 1px solid hsl(0 0% 16%);
	& > p, & > nav { max-width: var(--main-width); margin: 0 auto; }

	& a {
		color: inherit; transition: color 0.2s;
		&:hover  { color: hsl(0 0% 95%); }
		&:active { color: hsl(0 0% 75%); }
	}
	
	& > p {
		margin: 1rem auto 0.5rem auto; color: hsl(0deg 0% 44%);
		& > a { font-size: 1.75rem; font-weight: bold; letter-spacing: 0.25px; }
		& > small { display: block; margin-top: -0.5rem; font-style: italic;  }
	}
	& > nav {
		display: flex;
		
		& a { display: block; padding: 0.5rem 1rem; }
		& a:first-of-type { margin-left: -1rem; }
		& a:last-of-type { margin-right: -0.5rem; }
		& a[href*="github"] { margin-left: auto; }
		
		& a:is([href^="https://github.com/"], [href^="mailto:"], [type="application/atom+xml"]) {
			width: 1em; padding: 0.5rem; align-self: center;
			display: inline-block; line-height: 0; text-indent: -9999px;
			&::after { display: block; text-indent: 0; line-height: 1.3rem; }
			&[href^="https://github.com/"]::after { content: "\f09b"; font-family: FontAwesomeBrands; }
			&[href^="mailto:"]::after             { content: "\f0e0"; font-family: FontAwesome; font-weight: bold; }
			&[type="application/atom+xml"]::after { content: "\f09e"; font-family: FontAwesome; font-weight: bold; }
		}
	}
}

/* Page footer */
body > footer {
  margin: 3rem 0 0 0; padding: 1em;
  color: gray; font-size: smaller; text-align: center;
  & a { --base-color: currentcolor; text-decoration: none; }
}


/* Reaction menu and reaction list */
details[data-reaction-menu-for] {
	margin: 0; position: relative; display: inline-block;
	& > summary.button {
		& > span { display: inline-block; text-indent: -9999px; }
		&::before { content: "\f118"; margin-right: 0; }
		details[open] > & { background: var(--button-active-bg); border-color: var(--button-active-outer-border); color: var(--button-active-color); }
	}
	
	&[open]::after { content: ""; position: absolute; left: calc(50% - 6px); top: calc(-6px - 1px); width: 0; height: 0; border: 6px solid transparent; border-top-color: #2d2d2d; }
	& > p {
		position: absolute; margin: 0; left: 0; bottom: calc(100% + 7px); width: max-content; padding: 0.25em 0;
		background: var(--callout-bg); border: 1px solid var(--callout-border); border-radius: 6px;
		& > a {
			display: block; margin: 0; padding: 0.25em 0.75em; --base-color: gray;
			&::before { margin-right: 0.5em; vertical-align: -1px; }
			
			&.selected {
				--base-color: inherit;
				&::before { color: #ffcc4d; font-weight: bold; }
			}
			
			&:hover  { background: hsl(0deg 0% 15%); color: hsl(0deg 0% 85%); }
			&:active { background: hsl(0deg 0% 12%); color: hsl(0deg 0% 65%); transition-duration: 0.05s; }
		}
	}
}
ul[data-reactions-list-for] {
	display: flex; gap: 0.75em; margin: 0; padding: 0; list-style: none;
	& > [data-reaction] {
		font-size: smaller; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0 0 0 0.2rem;
		&::before { font-size: 1rem; color: #ffcc4d; font-weight: bold; }
	}
}
:is(details[data-reaction-menu-for], ul[data-reactions-list-for]) {
	& [data-reaction          ]::before { font-family: FontAwesome; }
	& [data-reaction=nice     ]::before { content: "\f118"; }
	& [data-reaction=meh      ]::before { content: "\f11a"; }
	& [data-reaction=bad      ]::before { content: "\f119"; }
	& [data-reaction=surprised]::before { content: "\f5c2"; }
	& [data-reaction=confused ]::before { content: "\f567"; }
	& [data-reaction=agree    ]::before { content: "\f164"; }
	& [data-reaction=disagree ]::before { content: "\f165"; }
}
footer:has(details[data-reaction-menu-for]) {
	display: flex; align-items: baseline; flex-wrap: wrap; row-gap: 0.5em;
	& > details[data-reaction-menu-for] { margin-left: 1.25em; margin-right: 1.0em; }
	& > ul[data-reactions-list-for] { position: relative; top: 1px; }
}


/* Comments */
section > ul.comments {
	margin: 0; padding: 0; list-style: none;
	
	/* Common styles for comments on all levels (e.g. denser content). Also apply to comment previews. */
	& :is(article.comment, form.comment > div.preview) {
		& :is(p, ul, ol, table) { margin: 0.5em 0; }
		& :last-child { margin-bottom: 0; }
		& > footer {
			font-size: smaller;
			& ul[data-reactions-list-for] { margin: 0; }
		}
		&:target > header { color: var(--selected); }
	}
	
	/* Level 1 comments (they're not replies) */
	& > li {
		margin: 1lh 0; padding: 0.5em; background: var(--callout-bg); border: 1px solid var(--callout-border); border-radius: 0.5em;
		& > article {
			& > header {
				margin: -0.5em -0.5em 0 -0.5em; padding: 0.5em; background: color-mix(in oklab, var(--callout-bg), 15% black); border-radius: 0.5em 0.5em 0 0;
				display: flex; gap: 0.25em; white-space: pre-wrap; align-items: baseline;
				& > time { margin-left: auto; font-size: smaller; }
			}
		}
	}
	
	/* Replies (comments of level 2 or lower) */
	& ul.comments:has(li) {
		margin: 0; padding: 0 0 0 1.5rem; list-style: none; position: relative;
		&::before { content: ""; position: absolute; left: 1ch; top: 0.5lh; bottom: 0; border-left: 1px dashed var(--callout-border); z-index: 0; }
		
		& > li {
			margin: 1.5rem 0; padding: 0;
			&:last-of-type { margin-bottom: 0.5rem; }
			& article {
				position: relative;
				& > header {
					& > :first-child { margin-left: -1.5rem; }
					& > a { background: var(--callout-bg); }
					& > :is(span.author, span.reply-to)::after { content: ","; }
					& > :not(a, span.author) {
						font-size: smaller; color: var(--backdrop-text);
						& a { --base-color: var(--backdrop-text); }
					}
				}
			}
		}
	}
}
form.comment {
	& input[name=your-bet] { width: 125px; margin-right: 0.25em; }
	& > p { margin-bottom: 0; }
	& > div.preview {
		& > :first-child { margin-top: 0.5em; }
		& > :last-child { margin-bottom: 0.5em; }
	}
	
	main > & {
		margin: 1.25em 0; padding: 0 0.5em 0.5em 0.5em; background: var(--callout-bg); border: 1px solid var(--callout-border); border-radius: 0.5em;
		& > div.preview:has(:first-child) { margin: 0.75em -0.5em -0.5em -0.5em; padding: 0 0.5em; border-top: 1px solid var(--callout-border); }
	}
	
	section > ul.comments & {
		margin: 1em -0.5em 0 0; padding: 0.25em 0.75em 0.75em 0.75em;
		border: 1px solid var(--callout-border); border-radius: 0.5em 0 0 0.5em; border-right: none;
		& > div.preview:has(:first-child) { margin: 0.75em -0.75em -0.75em -0.75em; padding: 0 0.75em 0.5em 0.75em; border: 1px solid var(--callout-border); border-width: 1px 0 0 0; }
	}
}


/* Blog page */
main#blog {
	& h2 {
		& + ul {
			margin: 1lh 0; padding: 0; list-style: none;
			& > li {
				margin: 0.5lh 0; padding: 0; display: flex;
				& > time {
					display: contents; color: var(--backdrop-text);
					& > span:nth-of-type(1) { flex: 0 0 1.5rlh; }
					& > span:nth-of-type(2) { flex: 0 0 2.0rlh; }
				}
			}
		}
	}
}


/* Blog post pages */
main#post {
	hyphens: auto;
	& code { hyphens: none; }
	
	& > article {
		& > header {
			& > h1 { margin-bottom: 0; }
			& > h1 + p {
				margin-top: 0; color: var(--backdrop-text);
				& > a { margin-left: 1.2em; }
			}
			article:not(.comment) & a { --base-color: inherit; }
		}
	}
	
	& > section {
		position: relative;
		& > a {
			position: absolute; right: 0; top: 1rem;
			&::before { content: "\f09e"; font-family: FontAwesome; font-weight: bold; margin-right: 0.25em; }
		}
		& > ul > li:first-of-type { margin-top: 0; }
		& > p { color: var(--backdrop-text); margin: 2em 0; padding: 0; text-align: center; }
	}
}


/* Projects page */
main#projects {
	& small { display: block; }
}


/* Tags page */
main#tags {
	ul.tags {
		margin: 1em 0; padding: 0; list-style: none; line-height: 1.0; text-align: center;
		& > li { display: inline; margin: 0 0.25em; }
		& > li > a {
			--base-color: gray;
			white-space: nowrap; transition: 0.2s text-shadow;
			&.selected { --base-color: var(--selected); text-shadow: 0 0 15px black, 0 0 15px black, 0 0 15px black, 0 0 10px black, 0 0 10px black, 0 0 5px black, 0 0 5px black; }
		}
	}
	ul.posts {
		margin: 1lh 0; padding: 0; list-style: none;
		& > li:not([hidden]) {
			margin: 1em 0; padding: 0; display: grid; grid-template:
				" year .   title"
				" date .   tags "
				/ 4em  1em 1fr
			;
			& > time { display: contents; color: var(--backdrop-text); text-align: right; }
			& > time > span:nth-of-type(1) { grid-area: year; }
			& > time > span:nth-of-type(2) { grid-area: date; }
			& > a    { grid-area: title; }
			& > ul   { grid-area: tags; color: var(--backdrop-text); }
			
			& > ul {
				margin: 0; padding: 0; list-style: none;
				& > li {
					display: inline; margin-right: 0.25em;
					&.selected { color: var(--selected); }
				}
			}
		}
	}
}