/* =================================================================================================
   Fonts / external sources */
@font-face {
	font-family: "Amarante";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/amarante.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: "Noto Serif";
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url(/fonts/noto-serif.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: "Noto Serif";
	font-style: italic;
	font-weight: 100 900;
	font-stretch: 100%;
	font-display: swap;
	src: url(/fonts/noto-serif-italic.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: "Triplicate A Poly";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/triplicate-a-poly-400-normal.woff2) format("woff2");
}

@font-face {
	font-family: "Triplicate A Poly";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/triplicate-a-poly-700-normal.woff2) format("woff2");
}

@font-face {
	font-family: "Triplicate A Poly";
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/triplicate-a-poly-400-italic.woff2) format("woff2");
}

@font-face {
	font-family: "Triplicate A Poly";
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/triplicate-a-poly-700-italic.woff2) format("woff2");
}

/* =================================================================================================
   Variables / helper classes */

:root {
	--color-fg: #333;
	--color-bg: #fff9f0;
	--grid-col-gap: 2rem;
	--rhythm: 1rlh;

	@media (prefers-color-scheme: dark) {
		--color-fg: #fff9f0;
		--color-bg: #111;
	}

	@media (width > 46rem) {
		--grid-col-gap: 3rem;
	}

	@media (width > 60rem) {
		--grid-col-gap: 4rem;
	}
}

@property --left-fade {
	syntax: "<length>";
	inherits: false;
	initial-value: 0px;
}

@property --right-fade {
	syntax: "<length>";
	inherits: false;
	initial-value: 2rem;
}

@keyframes overflow-fade {
	from {
		--left-fade: 0px;
		--right-fade: 2rem;
	}

	to {
		--left-fade: 2rem;
		--right-fade: 0px;
	}
}

/* =================================================================================================
   Reset */

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

img,
pre,
figure {
	max-width: 100%;
}

figure {
	margin: 0;
}

pre {
	overflow-x: auto;
}

a {
	color: currentColor;
	hyphens: none;
	text-underline-offset: 0.15em;
}

/* =================================================================================================
   Base Typography */

:root {
	font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
	line-height: round(nearest, 1.5em, 1px);
	font-family: "Noto Serif", serif;
	hyphens: auto;
}

h1,
h2,
h3,
h4 {
	font-size: 100%;
	font-family: "Amarante", serif;
}

html,
body,
h1,
h2,
h3,
h4,
p,
blockquote,
dl,
dt,
dd,
ol,
ul,
li {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: 2.8rem;
	line-height: calc(var(--rhythm) * 2);
}

h2 {
	font-size: 1.5rem;
	line-height: var(--rhythm);
}

h3 {
	font-size: 1.25rem;
	line-height: var(--rhythm);
}

code,
pre {
	font-family: "Triplicate A Poly", monospace;
	tab-size: 3;
}

aside {
	font-size: 0.875rem;
	line-height: var(--rhythm);
}

ul,
ol {
	padding-left: 1rem;
}

/* =================================================================================================
   Base */

body {
	margin: 0 auto;
	padding: var(--rhythm) 1rem;
	color: var(--color-fg);
	background-color: var(--color-bg);
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: calc(var(--rhythm) * 2) var(--grid-col-gap);
	max-width: 80rem;

	@media (width > 46rem) {
		padding: calc(var(--rhythm) * 2) 1rem;
	}
}

a[href^="https://github.com/"] {
	position: relative;
	padding-left: 1.2rem;

	&::before {
		content: "";
		background-color: currentColor;
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M10 0c5.523 0 10 4.59 10 10.253 0 4.529-2.862 8.371-6.833 9.728-.507.101-.687-.219-.687-.492 0-.338.012-1.442.012-2.814 0-.956-.32-1.58-.679-1.898 2.227-.254 4.567-1.121 4.567-5.059 0-1.12-.388-2.034-1.03-2.752.104-.259.447-1.302-.098-2.714 0 0-.838-.275-2.747 1.051A9.4 9.4 0 0 0 10 4.958a9.4 9.4 0 0 0-2.503.345C5.586 3.977 4.746 4.252 4.746 4.252c-.543 1.412-.2 2.455-.097 2.714-.639.718-1.03 1.632-1.03 2.752 0 3.928 2.335 4.808 4.556 5.067-.286.256-.545.708-.635 1.371-.57.262-2.018.715-2.91-.852 0 0-.529-.985-1.533-1.057 0 0-.975-.013-.068.623 0 0 .655.315 1.11 1.5 0 0 .587 1.83 3.369 1.21.005.857.014 1.665.014 1.909 0 .271-.184.588-.683.493C2.865 18.627 0 14.783 0 10.253 0 4.59 4.478 0 10 0'/%3E%3C/svg%3E")
			center / contain no-repeat;
		height: 1rem;
		aspect-ratio: 1;
		position: absolute;
		left: 0;
		top: 0.21em;
	}
}

/* =================================================================================================
   Navigation */

#navigation {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;

	#logo {
		display: block;
		grid-column: 1 / span 3;
		height: calc(var(--rhythm) * 3);
		width: max-content;

		svg {
			height: 100%;
			fill-rule: evenodd;
			clip-rule: evenodd;
			stroke-linejoin: round;
			stroke-miterlimit: 1.41421;
		}

		path {
			fill: var(--color-fg);
			fill-rule: nonzero;
		}
	}

	ul {
		grid-column: span 9;
		list-style: none;
		display: grid;
		height: max-content;
		gap: var(--rhythm) 0;
		grid-template-columns: subgrid;
		grid-template-rows: none;
		grid-auto-rows: var(--rhythm);
		align-items: end;
	}

	li {
		grid-column: span 3;
		line-height: var(--rhythm);
		text-box: trim-both cap alphabetic;
	}

	@media (width > 46rem) {
		display: block;
		grid-column: span 3;
		grid-row: 1;
		text-align: right;

		#logo,
		ul {
			grid-column: 1 / -1;
		}

		#logo {
			margin-left: auto;
			height: calc(var(--rhythm) * 4);
			transform: translateY(-1rlh);
			margin-right: -0.8rem;
			margin-bottom: 1rlh;
		}

		ul {
			display: grid;
			grid-auto-rows: var(--rhythm);
		}
	}
}

/* =================================================================================================
   Content */

#content {
	min-width: 0;
	grid-column: 1 / span 12;
	display: grid;
	grid-template-columns: subgrid;

	& > * {
		margin-block: 0;
		grid-column: 1 / -1;
	}

	& > :is(h1, h2, h3, h4, blockquote, ul, ol, p:not(:has(img))) {
		text-box: trim-both cap alphabetic;
		margin-top: calc(var(--rhythm) * 2 - 1cap);
	}

	& > :is(h2, h3, h4):not(:first-child) {
		margin-top: calc(var(--rhythm) * 3 - 1cap);
	}

	& > h1:first-child {
		margin-top: calc(var(--rhythm) * 2 - 1cap);
	}

	& > :is(figure, p) > img {
		display: block;
		width: auto;
		max-width: 100%;
		object-fit: contain;
		height: calc-size(auto, round(nearest, size, var(--rhythm)));

		&#headshot {
			margin-top: 1rlh;
			max-width: 9rlh;
		}
	}

	& > p > :is(img, table) {
		margin-top: var(--rhythm);
	}

	& > figure {
		margin-top: var(--rhythm);

		figcaption {
			text-box: trim-both cap alphabetic;
			margin-top: 1cap;
			text-wrap: balance;
		}
	}

	& > pre {
		margin-top: calc(var(--rhythm) * 2 - 1cap);
		padding: 0 1rem var(--rhythm);
		overflow-x: auto;
		hyphens: none;

		code {
			display: block;
			line-height: var(--rhythm);
			white-space: break-spaces;
			overflow-wrap: anywhere;
			text-box: trim-both cap alphabetic;
		}

		.giallo-l {
			display: inline;
		}
	}

	code:not(pre code) {
		line-height: 0;
	}

	& > table {
		margin-top: var(--rhythm);
		display: block;
		overflow-x: auto;
		width: max-content;
		max-width: 100%;
		border-collapse: collapse;
		mask-image: linear-gradient(
			to right,
			transparent,
			black var(--left-fade),
			black calc(100% - var(--right-fade)),
			transparent
		);
		animation: overflow-fade linear both;
		animation-timeline: scroll(self inline);

		th,
		td {
			box-shadow: inset 0 0 0 1px var(--color-fg);
			min-width: 10rem;
			white-space: nowrap;
			padding: calc(var(--rhythm) / 2) 0.6rem;
		}
	}

	& > hr {
		margin-top: calc(var(--rhythm) * 4);
		margin-inline: 0;
		width: 100%;
		height: var(--rhythm);
		position: relative;
		border: none;

		&::after {
			content: "";
			width: 100%;
			height: 1px;
			background-color: var(--color-fg);
			position: absolute;
			top: 50%;
			left: 0;
		}
	}

	blockquote {
		grid-column: 2 / -1;
		position: relative;
		font-style: italic;

		&::before {
			content: "";
			position: absolute;
			left: -1rem;
			top: 0;
			width: 2px;
			height: 100%;
			background-color: var(--color-fg);
		}
	}

	@media (width > 46rem) {
		grid-column: span 9;
		grid-row: 1;
		align-content: start;

		& > :is(h1, h2):first-child {
			margin-bottom: 2rlh;
		}
	}

	@media (width > 60rem) {
		& > :is(ul, ol, p:not(:has(img))) {
			grid-column: 1 / span 7;
		}
	}

	@media (width > 70rem) {
		& > :is(ul, ol, p:not(:has(img))) {
			grid-column: 1 / span 6;
		}

		blockquote {
			grid-column: 2 / span 6;
		}
	}
}

body > footer {
	grid-column: 1 / span 12;
	opacity: 0.5;

	& > small {
		display: block;
		line-height: var(--rhythm);
		text-box: trim-both cap alphabetic;
		margin-top: calc(var(--rhythm) - 1cap);
	}

	@media (width > 46rem) {
		grid-column: 4 / span 9;
	}
}

body.line-height-grid {
	position: relative;

	&::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 9999;
		background: linear-gradient(180deg, #c8e1ff99 1px, transparent 1px);
		background-size: 20px var(--rhythm);
		pointer-events: none;
	}
}