@layer reset {
	/* Box sizing rules */
	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	/* Set core root defaults */
	:root {
		box-sizing: border-box;
		text-size-adjust: none; /* Prevent font size inflation */
		scroll-behavior: smooth;
	}

	/* Set core body defaults */
	body {
		margin: 0;
		-webkit-font-smoothing: antialiased;
		text-rendering: optimizespeed;
	}

	/* Remove default margin in favour of better control in authored CSS */
	body,
	h1,
	h2,
	h3,
	p,
	figure,
	blockquote,
	dl,
	dd,
	ol,
	ul,
	pre {
		margin-block: 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"] {
		padding-inline-start: 0;
		margin-inline-start: 0;
		list-style: none;
	}

	picture,
	img,
	svg,
	video,
	canvas,
	audio,
	iframe,
	embed,
	object {
		display: block;
		max-inline-size: 100%;
	}

	picture,
	img,
	svg,
	video,
	canvas {
		block-size: auto;
	}

	img {
		object-fit: cover;
		border-style: none;
	}

	input,
	button,
	textarea,
	select {
		font: inherit;
	}

	pre {
		white-space: pre-wrap;
	}

	[hidden] {
		/* biome-ignore lint/complexity/noImportantStyles: Elements with the hidden attribute should always be hidden */
		display: none !important;
	}

	:target {
		scroll-margin-block: 5rlh;
	}

	/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
	@media (prefers-reduced-motion: reduce) {
		:root {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			/* biome-ignore lint/complexity/noImportantStyles: User prefers reduced motion */
			transition-duration: 0.01ms !important;
			/* biome-ignore lint/complexity/noImportantStyles: User prefers reduced motion */
			animation-duration: 0.01ms !important;
			/* biome-ignore lint/complexity/noImportantStyles: User prefers reduced motion */
			animation-iteration-count: 1 !important;
			/* biome-ignore lint/complexity/noImportantStyles: User prefers reduced motion */
			scroll-behavior: auto !important;
		}
	}
}

/* Bluu Next - Titling (normal) */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Bluu Next";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/bluunext-titling.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Bluu Next - Bold */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Bluu Next";
	font-style: normal;
	font-weight: bold;
	src: url("../fonts/bluunext-bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Bluu Next - Bold Italic */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Bluu Next";
	font-style: italic;
	font-weight: bold;
	src: url("../fonts/bluunext-bolditalic.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Ronzino Regular */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Ronzino";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Ronzino-Regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Ronzino Regular (italic) */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Ronzino";
	font-style: italic;
	font-weight: 400;
	src: url("../fonts/Ronzino-Oblique.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Ronzino Medium */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Ronzino";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Ronzino-Medium.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Ronzino Medium (italic) */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Ronzino";
	font-style: italic;
	font-weight: 400;
	src: url("../fonts/Ronzino-MediumOblique.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Ronzino Bold */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Ronzino";
	font-style: normal;
	font-weight: 400;
	src: url("../fonts/Ronzino-Bold.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* Ronzino Bold (italic) */
@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: "Ronzino";
	font-style: italic;
	font-weight: 400;
	src: url("../fonts/Ronzino-BoldOblique.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

@layer base {
	/** Sticky footer */
	.site-wrapper {
		display: grid;
		grid-template-columns: var(--side-padding) 1fr var(--side-padding);
		grid-template-rows: auto 1fr auto;
		max-inline-size: 100%;
		min-block-size: 100svb;

		& > * {
			grid-column: 2;
		}

		& > main {
			display: flex;
			flex-direction: column;
		}
	}

	/** Prose */
	body {
		font-family: var(--font-family-base);
		font-size: var(--step-0);
		line-height: 1.65;
		color: white;
		text-wrap: pretty;
		background: var(--color-background);
	}

	h1,
	h2,
	h3,
	p {
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	.lede {
		text-wrap: balance;
	}

	h1,
	h2,
	h3 {
		font-family: var(--font-family-headings);
		line-height: 1.1;
	}

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

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

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

	blockquote {
		padding-inline-start: 1ch;
		margin: 0;
		font-size: var(--step-1);
		font-style: italic;
		border-inline-start: 0.3ex solid currentcolor;
	}

	:any-link {
		color: currentColor;
	}

	:focus-visible {
		outline: solid 2px currentColor;
		outline-offset: 0.5cap;
	}
}

@layer variables {
	:root {
		/* Fonts */
		--font-family-base: Ronzino, system-ui, sans-serif;
		--font-family-headings: Bluu Next, system-ui, serif;

		/* Font weights */
		--font-weight-thin: 100;
		--font-weight-extra-light: 200;
		--font-weight-light: 300;
		--font-weight-regular: 400;
		--font-weight-medium: 500;
		--font-weight-semi-bold: 600;
		--font-weight-bold: 700;
		--font-weight-extra-bold: 800;
		--font-weight-black: 900;

		/* @link https://utopia.fyi/type/calculator?c=360,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
		/* Step -2: 12.5px → 12.8px */
		--step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
		/* Step -1: 15px → 16px */
		--step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
		/* Step 0: 18px → 20px */
		--step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
		/* Step 1: 21.6px → 25px */
		--step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
		/* Step 2: 25.92px → 31.25px */
		--step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
		/* Step 3: 31.104px → 39.0625px */
		--step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
		/* Step 4: 37.3248px → 48.8281px */
		--step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
		/* Step 5: 44.7898px → 61.0352px */
		--step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);

		/* Colors */
		--color-black: #000;
		--color-white: #000;
		--color-offwhite: #f2e8e8;
		--color-red: #aa0000;

		--color-background: var(--color-black);
		--color-foreground: var(--color-white);
		--color-accent: var(--color-red);
		--color-aaa-accent: #ff6161;

		/* Layout */
		--side-padding: 1ch;
		--max-content-inline-size: 1200px;
	}
}


@layer utilities {
	.flow > * + * {
		margin-block-start: var(--flow-space, 1lh);
	}

	.prose {
		max-inline-size: var(--max-content-inline-size);
		inline-size: 100%;
		margin-inline: auto;

		> * {
			max-inline-size: 65ch;
		}

		:is(h1, h2, h3) + p {
			--flow-space: 1cap;
		}
	}
}


@layer components {
	.site-wrapper {
		overflow-y: clip;
	}

	.site-wrapper > header {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		gap: 2ch 1lh;
		max-inline-size: var(--max-content-inline-size);
		margin-inline: auto;
		margin-block: 1lh 2lh;
		inline-size: 100%;

		.logo {
			position: relative;
			display: block;
			inline-size: fit-content;

			svg {
				max-block-size: 2lh;
				inline-size: fit-content;
			}

			&::after {
				content: "";
				position: absolute;
				display: block;
				background-color: var(--color-red);
				inline-size: 200vi;
				block-size: 200vb;
				inset-inline-end: 85.3%;
				inset-block-end: 50%;
				rotate: -45deg;
				transform-origin: 50% 100%;
				translate: 50% 0%;
				z-index: -1;
				pointer-events: none;
			}
		}

		nav {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}

		nav > ul {
			display: flex;
			gap: 1cap 2ch;
			flex-wrap: wrap;
		}

		.abort-fo :any-link:hover {
			color: #00ff28;
		}
	}
}

@layer components {
	.site-wrapper > footer {
		display: grid;
		grid-template-columns: subgrid;
		background-color: var(--color-red);
		padding-block: 1lh;
		margin-block-start: 2lh;
		grid-column: 1 / -1;

		& > * {
			grid-column: 2;
		}

		.logo {
			display: block;
			inline-size: fit-content;

			svg {
				max-block-size: 2lh;
				inline-size: fit-content;
			}
		}

		:any-link {
			color: inherit;
		}

		.content {
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			gap: 1lh 2ch;
			max-inline-size: var(--max-content-inline-size);
			inline-size: 100%;
			margin-inline: auto;
			font-size: var(--step--1);
		}

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

@layer components {
	.article-list {
		article {
			display: flex;
			flex-direction: column;
			gap: 1cap;
		}
		.publish-date {
			font-size: var(--step--1);
		}
	}
}