:root {
	color-scheme: light dark;
	
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	
	/* Colors and fonts */
	
	--color-text-dark-bg: white;
	--color-text-light-bg: #202129;
	--color-text: var(--color-text-light-bg);
	
	--color-text-footer: #00203d;
	
	--color-header-background: #eef5ff;
	--color-background: #f1f4f8;
	
	--font-family-geomanist: Geomanist, system-ui, sans-serif;
	--font-family-novela: Novela, system-ui, sans-serif;
	--font-family-novela-display: "Novela Display", system-ui, sans-serif;
	
	/* Specific font styles */
	
	--fontsize-h1: 75px;
	--font-h1: bold var(--fontsize-h1)/1.2 var(--font-family-geomanist);
	--fontspacing-h1: -0.6px;
	
	--fontsize-h2: 43px;
	--font-h2: 500 var(--fontsize-h2)/1.23 var(--font-family-geomanist);
	--fontspacing-h2: -0.4px;
	
	--fontsize-h3: 35px;
	--font-h3: 500 var(--fontsize-h3)/1.32 var(--font-family-geomanist);
	--fontspacing-h3: -0.3px;
	
	--fontsize-h4: 28px;
	--font-h4: 500 var(--fontsize-h4)/1.45 var(--font-family-geomanist);
	--fontspacing-h4: -0.28px;
	
	--fontsize-h5: 22px;
	--font-h5: 500 var(--fontsize-h5)/1.55 var(--font-family-geomanist);
	--fontspacing-h5: -0.18px;
	
	--fontsize-h1-subtitle: 25px;
	--font-h1-subtitle: 450 var(--fontsize-h1-subtitle)/30px var(--font-family-geomanist);
	--fontspacing-h1-subtitle: -0.38px;
	
	--fontsize-page-footer: 21px;
	--font-page-footer: 450 var(--fontsize-page-footer)/1.7 var(--font-family-geomanist);
	--fontspacing-page-footer: -0.31px;
	
	--fontsize-body: 20px;
	--font-body: 400 var(--fontsize-body)/1.7 var(--font-family-novela);
	--fontspacing-body: -0.09px;
	
	/* Layout */
	
	--layout-max-width: 792px;
	--layout-minimum-padding: 30px;
	
	--top-sky-gradient-height: 400px;
	--top-cloud-line-height: 550px;  /* allowed space to display clouds; also pushes down header transition gradient */
	--top-cloud-line-fade-top-percent: 62%;
	--top-cloud-line-fade-bottom-percent: 92%;
	--header-background-fade-height: 250px;
	--bottom-cloud-line-height: 440px; /* allowed space to display clouds */
	
	--layout-centering-padding: calc((100vw - var(--layout-max-width)) / 2);
	--layout-base-padding: max(var(--layout-minimum-padding), var(--layout-centering-padding));
	
	--layout-padding-left: calc(env(safe-area-inset-left) + var(--layout-base-padding));
	--layout-padding-right: calc(env(safe-area-inset-right) + var(--layout-base-padding));
	
	--layout-width: calc(100vh - var(--layout-padding-left) - var(--layout-padding-right));
	
	/* Variants */
	
	@media (width < 768px) {
		/* Specific font styles */
		
		--fontsize-h1: 52px;
		--fontspacing-h1: -0.32px;
		
		--fontsize-h1-subtitle: 21px;
		--fontspacing-h1-subtitle: -0.28px;
		
		--fontsize-page-footer: 17px;
		
		/* Layout */
		
		--layout-minimum-padding: 20px;
		
		--top-sky-gradient-height: 300px;
		--top-cloud-line-height: 600px;
		--top-cloud-line-fade-top-percent: 40%;
		--top-cloud-line-fade-bottom-percent: 60%;
		--header-background-fade-height: 350px;
		--bottom-cloud-line-height: 360px;
	}
	
	@media (prefers-color-scheme: dark) {
		/* Colors and fonts */
		
		--color-text: #ffffffe4;
		
		--color-text-footer: #90c2ee;
		
		--color-header-background: #0c121e;
		--color-background: #121218;
		
		/* Layout */
		
		@media (width < 768px) {
			--top-cloud-line-fade-top-percent: 32%;
			--top-cloud-line-fade-bottom-percent: 60%;
		}
		
		@media (width >= 768px) {
			--top-cloud-line-fade-top-percent: 42%;
			--top-cloud-line-fade-bottom-percent: 80%;
		}
	}
}

* {
	box-sizing: border-box;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

html {
	--sky-gradient-stops: #0c38ff, #0657fe, #0080ff, #01a7ff, #1bceff, #76e9fe 75%, #76e8fe7f 85%, transparent;
	--page-background-bottom-color: #abc2dd;
	
	position: relative;
	
	background:
		/* Top sky */
		linear-gradient(to bottom, var(--sky-gradient-stops)) top/100% var(--top-sky-gradient-height) no-repeat,
		
		/* Transition from header background to page background */
		linear-gradient(
			to bottom,
			var(--color-header-background) var(--top-cloud-line-height),
			transparent calc(var(--top-cloud-line-height) + var(--header-background-fade-height))
		),
		
		/* Bottom darkness */
		linear-gradient(to bottom, transparent, var(--page-background-bottom-color)) bottom/100% 100px no-repeat,
		
		/* Rest of page */
		var(--color-background);
	
	@media (prefers-color-scheme: dark) {
		--stop-1: #082f5c;
		--stop-2: #70a4df;
		--stop-3: #fdffe8;
		
		--sky-gradient-stops: /* fallback if color-mix unsupported */
			var(--stop-1),
			var(--stop-2) 45%,
			var(--stop-3) 70%,
			var(--color-header-background);
		
		--sky-gradient-stops:
			var(--stop-1),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 17.36%), /* easeOutSine */
			color-mix(in oklab, var(--stop-1), var(--stop-2) 34.2%),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 50%),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 64.28%),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 76.6%),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 86.6%),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 93.97%),
			color-mix(in oklab, var(--stop-1), var(--stop-2) 98.48%),
			var(--stop-2) 45%,
			color-mix(in srgb, var(--stop-2), var(--stop-3) 3.02%), /* easeInOutSine */
			color-mix(in oklab, var(--stop-2), var(--stop-3) 11.7%),
			color-mix(in oklab, var(--stop-2), var(--stop-3) 25%),
			color-mix(in oklab, var(--stop-2), var(--stop-3) 41.32%),
			color-mix(in oklab, var(--stop-2), var(--stop-3) 58.68%),
			color-mix(in oklab, var(--stop-2), var(--stop-3) 75%),
			color-mix(in oklab, var(--stop-2), var(--stop-3) 88.3%),
			color-mix(in oklab, var(--stop-2), var(--stop-3) 96.98%),
			var(--stop-3) 70%,
			var(--color-header-background);
			
		--page-background-bottom-color: #10223c;
	}
}

/* Common elements */

p {
	margin: 1.05em 0;
}

h2 {
	margin: 1.05em 0 0.575em -2px;
	
	font: var(--font-h2);
	letter-spacing: var(--fontspacing-h2);
	color: var(--color-text);
}

h3 {
	margin: 0.92em 0 0 -1px;
	
	font: var(--font-h3);
	letter-spacing: var(--fontspacing-h3);
	color: var(--color-text);
}

h4 {
	margin: 0.95em 0 -0.16em -1px;
	
	font: var(--font-h4);
	letter-spacing: var(--fontspacing-h4);
	color: var(--color-text);
}

h5 {
	margin: 0.97em 0 -0.4em;
	
	font: var(--font-h5);
	letter-spacing: var(--fontspacing-h5);
	color: var(--color-text);
}

a, .link {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 1.5px;
	color: #2b69d5;
	
	text-decoration-color: color-mix(in srgb, currentcolor, transparent 37%);
	
	@media (prefers-color-scheme: dark) {
		color: #6ab3f9;
	}
}

code {
	font-size: 0.89em;
}

sup {
	line-height: initial;
}

ul, ol {
	padding-left: 1.9em;
}

li {
	li + & {
		margin-top: 0.65em;
	}
}

/* Structure */

body {
	margin: 0;
}

.page {
	display: flex;
	margin: 0 var(--layout-padding-right) 0 var(--layout-padding-left);
	flex-direction: column;
	min-height: 100vh;
	
	& > main {
		/* Push footer down to bottom of viewport */
		flex-grow: 1;
	}
}

.page-header {
	ul {
		display: flex;
		justify-content: flex-end;
		align-items: baseline;
		margin: 0;
		padding: 0;
		list-style: none;
		
		li {
			&.home {
				margin-right: auto;
				
				text-wrap: nowrap;
				text-overflow: ellipsis;
				
				svg {
					@media (width < 768px) {
						margin: 0 4px -2px -1px;
						width: 11px;
						height: 15px;
					}
					
					@media (width >= 768px) {
						margin: 0 6px -2px -2px;
						width: 16px;
						height: 21px;
					}
				}
			}
			
			a {
				display: inline-block;
				
				text-align: center;
				font: var(--font-h1-subtitle);
				letter-spacing: var(--fontspacing-h1-subtitle);
				color: var(--color-text-dark-bg);
				text-decoration: none;
				
				&:focus-visible {
					outline: 3px solid currentcolor;
					outline-offset: 2px;
					border-radius: 1px;
				}
				
				:first-child > & {
					padding-left: 0;
				}
				
				:last-child > & {
					padding-right: 0;
				}
				
				.home > & {
					font-weight: 500;
				}
				
				@media (width < 768px) {
					padding: 12px 14px;
					
					font-size: 17px;
				}
				
				@media (width >= 768px) {
					padding: 36px 20px;
				}
			}
		}
	}
}

.content-header {
	display: flex;
	flex-direction: column;
	
	@media (width < 768px) {
		gap: 18px;
	}
	
	@media (width >= 768px) {
		gap: 25px;
	}
	
	h1 {
		margin: 0;
		
		text-align: center;
		text-wrap: pretty;
		font: var(--font-h1);
		letter-spacing: var(--fontspacing-h1);
		color: var(--color-text);
		text-shadow: 0 0 10px var(--color-header-background);
	}
	
	.content-header-metadata {
		display: flex;
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
		gap: 0 1.15em;
		
		text-align: center;
		font: var(--font-h1-subtitle);
		letter-spacing: var(--fontspacing-h1-subtitle);
		color: var(--color-text);
		
		opacity: 0.41;
		
		@media (prefers-contrast: more) {
			opacity: 0.65;
		}
		
		.content-header-date-published, .content-header-date-updated {
			display: inline;
		}
		
		svg {
			margin-right: 0.05em;
			width: 0.68em;
			height: 0.68em;
		}
		
		&:not(:has(.content-header-date-updated)) svg {
			/* Only show publication icon if the update date is displayed */
			display: none;
		}
	}
}

.content-body {
	padding-top: 38px;
	
	font: var(--font-body);
	letter-spacing: var(--fontspacing-body);
	color: var(--color-text);
}

.page-footer {
	padding: 34px 0;
	
	text-align: center;
	text-wrap: balance;
	font: var(--font-page-footer);
	letter-spacing: var(--fontspacing-page-footer);
	color: var(--color-text-footer);
	color: color-mix(in srgb, var(--color-text-footer), transparent 50%);
	
	ul {
		margin: auto;
		padding: 0;
		list-style: none;
		
		li {
			display: inline;
			
			&::before {
				content: " • ";
				display: inline;
				padding: 0 5px;
			}
			
			&:first-child::before {
				content: none;
			}
			
			a {
				color: inherit;
				text-decoration: none;
				
				&:hover {
					color: color-mix(in srgb, var(--color-text-footer), transparent 10%);
				}
			}
			
			/* Force first item to be on its own line, and hide the second item's bullet */
			&:first-child {
				display: block;
			}
			
			&:nth-child(2)::before {
				content: none;
			}
		}
	}
}

.page-top-clouds-wrapper, .page-bottom-clouds-wrapper {
	position: absolute;
	
	overflow: hidden;
	z-index: -1;
	pointer-events: none;
}

.page-top-clouds-wrapper {
	inset: 0;
	height: var(--top-cloud-line-height); /* enough to contain the clouds, up until they're hidden by the bottom gradient */
	
	&:after {
		/* Hide the irregular cloud line bottom with a gradient */
		--from: transparent;
		--to: var(--color-header-background);
		
		content: "";
		position: absolute;
		inset: 0;
			
		background: /* fallback if color-mix unsupported */
			linear-gradient(
				to bottom,
				var(--from) var(--top-cloud-line-fade-top-percent),
				var(--to) var(--top-cloud-line-fade-bottom-percent)
			);
		
		background:
			linear-gradient(
				to bottom,
				var(--from) var(--top-cloud-line-fade-top-percent),
				color-mix(in srgb, var(--from), var(--to) 14.64%), /* easeInOutSine */
				color-mix(in srgb, var(--from), var(--to) 50%),
				color-mix(in srgb, var(--from), var(--to) 85.36%),
				var(--to) var(--top-cloud-line-fade-bottom-percent)
			);
		
		z-index: 1;
	}
}

.page-bottom-clouds-wrapper {
	inset: auto 0 0 0;
	height: var(--bottom-cloud-line-height);
}

.page-top-clouds, .page-bottom-clouds {
	position: absolute;
	left: var(--layout-padding-left);
	top: var(--top-sky-gradient-height);
	
	.cloud {
		position: absolute;
		
		width: var(--width);
		height: var(--height);
		
		filter: blur(var(--blur-radius));
		transform:
			translate(
				calc(var(--center-x) - var(--width) / 2),
				calc(var(--center-y) - var(--height) / 2)
			);
			
		will-change: transform;
	}
}

.page-top-clouds {
	.cloud {
		background: white;
		border-radius: 50%;
		
		@media (prefers-color-scheme: dark) {
			/* A gradient here must be subdued, as it can reveal the fixed right-to-left layering of the clouds */
			background: linear-gradient(to bottom, #202b41 5%, #111926);
		}
	}
}

.page-bottom-clouds {
	.cloud {
		background: linear-gradient(to bottom, #a9b9cd 20%, #abc2dd 50%);
		border-radius: 35%;
		
		@media (prefers-color-scheme: dark) {
			background: linear-gradient(to bottom, #0b1524, #1b2e49);
		}
	}
}

/* Specific page types */

main {
	@media (width < 768px) {
		padding: 215px 0 140px;
	}
	
	@media (width >= 768px) {
		padding: 236px 0 250px;
	}
}

main > .post {
	.footnotes {
		@media (width < 768px) {
			margin-top: 70px;
		}
		
		@media (width >= 768px) {
			margin-top: 160px;
		}
		
		hr {
			display: none;
		}
		
		a {
			padding-left: 0.25em;
			vertical-align: -3px;
			
			line-height: 0;
			text-decoration: none;
			font-weight: bold;
		}
	}
}

main > .list {
	& > :first-child {
		margin-top: 0;
	}
	
	.intro {
		margin-bottom: 2em;
		
		font: var(--font-body);
		letter-spacing: var(--fontspacing-body);
		color: var(--color-text);
	}
	
	a {
		display: block;
		margin-bottom: 0.9em;
		
		font: var(--font-body);
		letter-spacing: var(--fontspacing-body);
		color: var(--color-text);
		text-decoration: none;
		
		h6 {
			margin: 0;
			
			font: inherit;
		}
		
		.info {
			.description {
				padding-right: 0.22em;
			}
			
			time {
				text-wrap: nowrap;
				
				opacity: 0.5;
				
				@media (prefers-contrast: more) {
					opacity: 0.75;
				}
			}
		}
	}
	
	@media (width < 768px) {
		/* Align baseline between list and post pages */
		padding-top: 7px;
	}
	
	@media (width >= 768px) {
		/* Align baseline between list and post pages */
		padding-top: 28px;
	}
}

/* Allow Noir to detect dark mode */
@media (prefers-color-scheme: dark) {
	._ {
		color: inherit;
	}
}