@font-face {
  font-family: 'Editor';
  src: url('https://phfox.net/assets/private/Editor-Variable.woff2') format('woff2'),
       url('https://phfox.net/assets/private/Editor-Variable.woff') format('woff'),
       url('https://phfox.net/assets/private/Editor-Variable.ttf') format('truetype');
  font-weight: 300 800;
  font-display: block;
  font-style: normal;
}

@font-face {
  font-family: 'Editor';
  src: url('https://phfox.net/assets/private/Editor-VariableItalic.woff2') format('woff2'),
       url('https://phfox.net/assets/private/Editor-VariableItalic.woff') format('woff'),
       url('https://phfox.net/assets/private/Editor-VariableItalic.ttf') format('truetype');
  font-weight: 300 800;
  font-display: swap;
  font-style: italic;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/SourceCodePro-Variable-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/SourceCodePro-Variable-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/SourceCodePro-VariableItalic-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Source Code Pro';
  font-style: italic;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/SourceCodePro-VariableItalic-latinext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@view-transition {
	navigation: auto;
}

@keyframes wolf-logo-blink {
	0% {
		transform: translateY(-50%) scaleY(0%) translateY(60%);
	}
	25% {
		transform: translateY(0%) scaleY(100%) translateY(0%);
	}
	100% {
		transform: translateY(-50%) scaleY(0%) translateY(60%);
	}
}

::selection {
	background-color: var(--accent);
	color: var(--bg);
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-optical-sizing: auto;
	text-wrap: pretty;
	tab-size: 4;
}

:root {
	--bg: #f5e5c5;
	--bg-alt: #fff4db;
	--fg: #1d0700;
	--fg-alt: #291a15;
	--accent: #627546;
	--accent-alt: #283910;

	--fg-20: color-mix(in srgb, var(--fg) 20%, transparent);
	--fg-40: color-mix(in srgb, var(--fg) 40%, transparent);
	--fg-60: color-mix(in srgb, var(--fg) 60%, transparent);

	--main-font-family: "Editor", serif;
	--code-font-family: "Source Code Pro", "Consolas", monospace;

	--page-padding: 1rem;

	overflow-y: scroll;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #1E252F;
		--bg-alt: #151B24;
		--fg: #f2f8ff;
		--fg-alt: #ccced0;
		--accent: #789980;
		--accent-alt: #CBEAD3;
	}
}

body {
	position: relative;

	counter-reset: h2 h3 h4 h5 h6;
	background-color: var(--bg);
	color: var(--fg);
	
	font: 1rem/1.5 var(--main-font-family);
	font-weight: 420;
	padding: 2rem var(--page-padding);
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: 1rem;
	max-width: 100vw;
	overflow-x: none;

	&::before {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 9rem;
		height: 9rem;
		background: var(--bg-alt);
		mask-image: url("/assets/page-detail.svg");
		mask-size: 100%;
		z-index: -1;
	}

	&::after {
		content: "";
		display: block;
		position: absolute;
		inset: 0;
		min-height: 100vh;
		pointer-events: none;
		background: url("/assets/paper.png");
		mix-blend-mode: overlay;
		opacity: 0.25;
	}
}

@media screen and (min-width: 72rem) and (min-height: 54rem) {
	body {
		font-size: 1.2rem;
	}
}

body > * {
	width: 100%;
	max-width: 72rem;
	margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 {
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	color: var(--fg-alt);
	text-wrap: balance;

	&:before {
		margin-right: 1em;
		color: var(--fg-40);
	}
}

h1 {
	font-size: 2em;
	margin-top: 1em;
	margin-bottom: 1em;
	border-bottom: 1px solid var(--fg-40);
	font-weight: 500;
}

h2 {
	font-size: 1.5em;
	&:before {
		counter-increment: h2;
		content: counter(h2);
	}
	font-weight: 500;
}

h3 {
	&:before {
		counter-increment: h3;
		content: counter(h2) "." counter(h3);
	}
	font-weight: 600;
}

h4 {
	&:before {
		counter-increment: h4;
		content: counter(h2) "." counter(h3) "." counter(h4);
	}
	font-weight: 600;
}

h5 {
	&:before {
		counter-increment: h5;
		content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5);
	}
	font-weight: 700;
}

h6 {
	&:before {
		counter-increment: h6;
		content: counter(h2) "." counter(h3) "." counter(h4) "." counter(h5) "." counter(h6);
	}
	font-weight: 700;
}

ul, ol {
	padding-left: 0;
	&.multicol {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(15ch, 1fr));
	}
}

li {
	margin-left: 1em;
	padding-left: 0.25em;
	margin-top: 0.25em;
	margin-bottom: 0.25em;
}

ul {
	list-style: none;
	--bullet-size: 0.4em;
	& ul {
		--bullet-size: 0.3em;
	}

	& > li {
		position: relative;

		&::before {
			content: "";
			display: block;
			position: absolute;
			top: calc(0.5em - var(--bullet-size) / 2);
			left: -1em;
			width: var(--bullet-size);
			aspect-ratio: 0.5;
			background-color: var(--accent);
			mask-image: url("../arrow-right.svg");
			mask-size: 100%;
		}
	}
}

@counter-style counter-plain {
	system: numeric;
	symbols: '0' '1' '2' '3' '4' '5' '6' '7' '8' '9';
	suffix: "";
}

ol {
	list-style-type: counter-plain;
	& > li {
		padding-left: 0.5em;
	}

	& > li::marker {
		color: var(--fg-60);
	}
}

a {
	color: var(--accent-alt);
	transition: text-decoration-color 0.1s;
}

a:hover {
	text-decoration-color: transparent;
}

hr {
	width: 100%;
	height: 1px;
	border: none;
	background: var(--fg-20);
	overflow: visible;

	margin: 3rem 0;

	position: relative;
	&::before {
		content: "";
		display: block;
		position: absolute;
		background-color: var(--bg);
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: 5.6rem;
		height: 0.8rem;
	}

	&::after {
		content: "";
		display: block;
		position: absolute;
		background-color: var(--accent);
		mask-image: url("../asterism.svg");
		mask-size: 100% 100%;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: 3.6rem;
		height: 0.8rem;
	}
}

table {
	display: block;
	max-width: 100vw;
	overflow-x: auto;
	border-collapse: collapse;
	margin: 1rem calc(-1 * var(--page-padding));
	padding: 0 calc(var(--page-padding) - 0.5rem);
	white-space: nowrap;
	mask-image: linear-gradient(to right, transparent 0px, black var(--page-padding), black calc(100% - var(--page-padding)), transparent 100%);
}

th, td {
	min-width: max-content;
	padding: 0.25rem 0.5rem;
	text-align: left;
}

td {
	border-top: 1px solid var(--fg-40);
}

code {
	font: 1em/1.5 var(--code-font-family);
	font-weight: 400;
	background-color: var(--bg-alt);
	padding: 0 0.25em;
}

div.highlight {
	background-color: var(--bg-alt);
	margin: 1rem calc(-1 * var(--page-padding));
}

div.highlight > pre {
	display: flex;
	overflow-x: auto;
	mask-image: linear-gradient(to right, transparent 0px, black var(--page-padding), black calc(100% - var(--page-padding)), transparent 100%);
}

div.highlight > pre > code {
	margin: 1rem var(--page-padding);
	background-color: transparent;
	border: none;
	text-wrap: nowrap;
	font-size: 0.8em;
	font-weight: 450;
}

.footnotes {
	font-size: 0.85em;
	font-weight: 450;
	letter-spacing: 0.02em;

	border-top: 1px solid var(--fg-40);
	margin-top: 3em;

	& > * {
		font-style: italic;
	}

	&::before {
		display: block;
		content: "Footnotes";
		width: fit-content;
		padding-right: 0.5em;
		color: var(--fg-alt);
		background-color: var(--bg);
		margin-top: -0.6lh;
		margin-bottom: 1em;
	}

	& .reversefootnote {
		font-style: normal;
		
		/* Prevent emoji rendering */
		font-family: var(--code-font-family); 
		& > * {
			font-family: var(--main-font-family);
		}

		& > sup::before {
			content: " ";
		}
	}
}

p + p, p + ul, p + ol,
ul + p, ul + ul, ul + ol,
ol + p, ol + ul, ol + ol {
	margin-top: 1em;
}

.header-logo {
	max-width: max-content;
	display: flex;
	align-items: center;
	gap: 1.5em;
	line-height: 0;

	color: inherit;
	text-decoration: none;

	&:hover picture::after {
		animation: wolf-logo-blink 0.2s 2;
	}

	& picture {
		width: max-content;
		height: max-content;
		position: relative;

		& img {
			width: auto;
			height: 6em;
			box-shadow: 0 -6rem 0 var(--accent), inset 0 1px 0 var(--accent);
		}

		&::after {
			content: " ";
			position: absolute;
			display: block;
			top: 48%;
			left: 57%;
			right: 9%;
			bottom: 39%;
			transform: translateY(-50%) scaleY(0%) translateY(50%);
			background-color: var(--accent);
		}
	}

	& span {
		padding-top: 0.05em; /* optical alignment */
		color: var(--fg-alt);
		font-size: 3.5em;
		font-weight: 500;
		text-transform: uppercase;
		padding-right: 1.5rem;
	}
}

main > nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 2rem;
	position: relative;

	& > hr {
		width: 1fr;
		flex-shrink: 1;
		margin: 0;
		position: static;

		@media screen and (max-width: 40rem) {
			&::before, &::after {
				display: none;
			}
		}
	}

	& > a {
		flex-shrink: 0;

		&.nav-back::before {
			display: inline-block;
			content: " ";
			background-color: var(--accent-alt);
			height: 0.8em;
			aspect-ratio: 0.5;
			mask-image: url("../arrow-left.svg");
			mask-size: 100%;
			margin-right: 0.5em;
		}

		&.nav-next::after {
			display: inline-block;
			content: " ";
			background-color: var(--accent-alt);
			height: 0.8em;
			aspect-ratio: 0.5;
			mask-image: url("../arrow-right.svg");
			mask-size: 100%;
			margin-left: 0.5em;
		}
	}
}