@layer reset, defaults, theme, utilities;



/* ====================================
	RESET
==================================== */

@layer reset {

*,
::before,
::after {
	box-sizing: border-box;
	image-rendering: pixelated;
}
button {
	display: block;
	padding: 0;
	font-family: inherit;
	font-size: 1em;
	color: inherit;
	background-color: unset;
	border: unset;
	& * {
		pointer-events: none;
	}
}
dialog {
	max-block-size: unset;
	max-inline-size: unset;
	padding: 0;
	color: unset;
	background-color: unset;
	border: unset;
	& header,
	& header > :first-child {
		margin-block-start: 0;
	}
	& footer,
	& footer > :last-child {
		margin-block-end: 0;
	}
}
body:has(dialog[open]) {
	block-size: 100svb;
	overflow: hidden;
}

/* ===================== END RESET */ }



/* ====================================
	UTILITIES
==================================== */

@layer utilities {

[hidden] {
	display: none;
}

/* ================= END UTILITIES */ }



/* ====================================
	DEFAULTS
==================================== */

@layer defaults {

/* FONTS */

@font-face {
	font-family: Answerer;
	font-weight: normal;
	font-style: normal;
	font-display: block;
	src:
		url("./assets/Answerer-Regular.2025-05-13.woff2")
		format("woff2");
}
@font-face {
	font-family: Answerer;
	font-weight: bold;
	font-style: normal;
	font-display: block;
	src:
		url("./assets/Answerer-Bold.2025-05-13.woff2")
		format("woff2");
}
@font-face {
	font-family: Answerer;
	font-weight: normal;
	font-style: italic;
	font-display: block;
	src:
		url("./assets/Answerer-Italic.2025-05-11.woff2")
		format("woff2");
}
@font-face {
	font-family: Answerer;
	font-weight: bold;
	font-style: italic;
	font-display: block;
	src:
		url("./assets/Answerer-Bold-Italic.2025-05-11.woff2")
		format("woff2");
}

/* VARIABLES */

:root {
	/*
		most measurements are in fakepixels (--fpx)
		1fpx = X * 1/16rem, this is because 1rem = 16 pixels
		X is an integer, so all pixels on-screen scale up by that amount
		since it relies on root font size, it may break if someone adjusts their settings
	*/
	--fpx-scale: 2;
	@media (min-width: 32rem) {
		--fpx-scale: 3;
	}
	--fpx: calc(var(--fpx-scale) * 0.0625rem);
	/*
		can't use the baseline-2024 CSS property "zoom" for two reasons:
		1) it messes with border-image (border-image-slice is applied *after* the zoom,
			so the pixel scale has to be multiplied by the zoom coefficient
			e.g. if the border image is drawn with a 5-pixel-wide border
			and the zoom is 3, border-image-slice needs to be 5 * 3 = 15)
		2) it messes with the info <dialog> (viewport units are converted
			to real lengths *before* the zoom)
		and --fpx would still be necessary, it'd just be set to 0.0625rem,
		so using zoom wouldn't reduce the number of variable uses, it'd *increase*
		them by requiring the zoom coefficient itself be a variable 
	*/

	--button-padding-block-start: calc(2 * var(--fpx));
	--button-padding-inline-start: calc(4 * var(--fpx));
	--button-padding-inline-end: calc(3 * var(--fpx));

	--fore-colour: #fff;
	--back-colour: #123;
	--detail-colour: #f48;
	--thick-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuAgMAAAC7Nc5oAAAACVBMVEUAAAD///8RIjN2QG0AAAAAAXRSTlMAQObYZgAAAFhJREFUSMft1jESQBEMhOE07veaNO6nccpHtmDIAdbM/oXBVxsxs+JpQ4STYtPPmo8+IbDitBUu3NHPqjDBjpowwVhWQiDzs+dCuq+DDOnGD+GDGJXrXoh+dRayYzxy+g4AAAAASUVORK5CYII=");
	--thin-border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAA8AgMAAABZWwFSAAAACVBMVEUAAAD///8RIjN2QG0AAAAAAXRSTlMAQObYZgAAAC9JREFUKM9jYGBgDYUAIHOAeWDGqlVLQVTAgPOiVkHAYOANnnAZTOkFDMCOGnAeAIF95IU8FDBDAAAAAElFTkSuQmCC");
	--avatar-sprite: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAALAAAACwAQMAAACVeXYdAAAABlBMVEUAAAD///+l2Z/dAAAAAXRSTlMAQObYZgAAA+VJREFUSMfs01+IDVEcwPHfuXPNzDI747+5XDvXfyHNRYxcOxfrb/KnPJLrT8jfQTG0zLHLkqjt5sGDNpSSB10pXpRZtEosT9oH5fhTSsosYmi6x5m5m6fjwbvv42fqN+eczgHJB14a4bIRcLngctmy/oUH8oeggMsC4bPPH0KAm89nnc+Ff2Id/lYONDAVKfiGAQwCZoIS2QaGbyqK/hUSdjWS8CxsBM+/yvJDxQQvhMgOGWcuemBUGV9/1FFgjLrtKGEdGgU7km8GM23IhMJpL+aSuA9biDH6ftv2M6F0enU1YVp1Wue+l7WuDjvQ3fpuKWavSqtbuue+j1DXOTvS3YZIbEj4OX3XY0dt6jffjiRiu4zjX2r0IYMdZ77NtAOJeJWf32tc7SQFmKSjG7ZvhJQENa4vH2NsWpnZNjD2vU99DIEdGcGw6wXYts3DyS4RrhsFIVs3zoDJ2IbZfo3rwFVMGQ/DAGKpIWEWY1MxVTIUYlYgqSSGMrAzHFQR/If9BejLF6pTUiU7HFNVzGuGgFUn4fY6mlUKx+9tXz9QPmGkcD5KrlSlnh52wVVXOhPToIp+8bgQMH67dN4lsAKxJ7c6NTStOCt2ShHjl7v6fcw2fZ3T3rgxBWBlz86RHjBublxMxg/duqjypgP1Z+s6OzV5fY3N06uTx78ZcvnEuX7pyU0LL9+fQxgrpuGNtQLpyiHcD+DBuLVLej9BXB5nIVjy9g6ugzUtY1Yd/fWaYYPbewdypUVNn4ojIYdRPmq2GR/szt9FTvB4BxRnrIGnM1UnuSdjm4yZQk8gDITc1rC4+guAFjAeP376LRUfGD7dH3QmvLylC0DAjEf1NJlp6P3w0ldMh1jZz7sgDuF0DoBIo7Hg54gWfPkBSRbCCOJS2ygVAKVSRWBtTRUZ47o14l5KFdh8Siz18RgZ4fqKcpxSPVc+wrg2ZMSLBS0SQRGlllNGihnzQcADSGerRjJPKD1YLS+u8RPAg8jnH1pl2g1K90flZ5mLTOVHAhlF3IZ6Z+pVSoOwA9X4aKmNdm1q05xNKqW9r1qW588xboT2n4bf2WqEa1OU/jx/YkbCG9iVMPCCln5+kc0OET65qY3xJeyoKmxqE0huHaXNKeyWRMZZUMyBkFfmvxgVUuqpWO5sZTwU2BHJWcvzVZNSOyov6+P4TCSyxRd0So2wvAzgDwPki6idUi0oL/PidzkbEAZW/JFSwd9TsSP4a4iAyWFRh2UcVp7CSQ7Lj+ACl7lD0jp3yBYCLod3mwpwUiuDeWzAGB7bMIHHIhQxh3WwgdNI4CbC/35vFIyCUTAKRsEoGAWDHwAA+mmBghHTUWkAAAAASUVORK5CYII=");

	--fore-line: calc(1 * var(--fpx)) solid var(--fore-colour);
	--back-line: calc(1 * var(--fpx)) solid var(--back-colour);

	--main-column-max-inline-size: calc(200 * var(--fpx));
	--border-image-scale: 10; /* number of pixels per “pixel” in the border image source files */

	font-size: 100%;
	font-synthesis: none;
	-webkit-font-smoothing: none;
}

/* GENERAL */

* {
	scrollbar-color: var(--detail-colour) var(--back-colour);
}
:focus-visible {
	outline-width: calc(1 * var(--fpx));
	outline-style: solid;
	outline-color: var(--detail-colour);
}
button:focus-visible {
	outline-offset: calc(-1 * var(--fpx));
}
::selection {
	color: var(--back-colour);
	background-color: var(--fore-colour);
}

/* LAYOUT */

body {
	margin: 0;
	font-size: calc(10 * var(--fpx));
	font-family: Answerer, monospace;
	line-height: 1.2;
	color: var(--fore-colour);
	background-color: var(--back-colour);
}
#banner {
	display: flex;
	justify-content: space-between;
	border-block-end: var(--fore-line);
	border-block-end-width: calc(2 * var(--fpx));
	& > nav {
		padding-block-start: var(--button-padding-block-start);
		padding-inline-start: var(--button-padding-inline-start);
		padding-inline-end: var(--button-padding-inline-end);
	}
	& > button {
		border: unset;
		border-inline-start: var(--fore-line);
	}
}
main {
	--people-gap: calc(10 * var(--fpx));
	padding: var(--people-gap);
	column-count: auto;
	column-width: calc(128 * var(--fpx));;
	column-gap: var(--people-gap);
}

/* GENERICS */

h1, h2 {
	font-size: 1em;
}
h1 {
	display: inline;
	margin-block: 0;
	hyphens: manual;
}
a {
	color: inherit;
	text-decoration-thickness: calc(1 * var(--fpx));
	text-decoration-color: var(--detail-colour);
	text-underline-offset: calc(1 * var(--fpx));
}
a:hover, a:focus {
	color: var(--back-colour);
	background-color: var(--detail-colour);
}
a:focus-visible {
	outline-offset: calc(1 * var(--fpx));
}
a:active {
	--detail-colour: var(--fore-colour);
}
button {
	display: grid;
	place-content: center;
	padding-block-start: var(--button-padding-block-start);
	padding-inline-start: var(--button-padding-inline-start);
	padding-inline-end: var(--button-padding-inline-end);
	border: var(--fore-line);
	&:hover {
		color: var(--detail-colour);
	}
	&:active {
		color: var(--back-colour);
		background-color: var(--detail-colour);
	}
}
dialog {
	block-size: 100svb;
	inline-size: 100svi;
	padding-block: 1lh;
	padding-inline: calc(4 * var(--fpx));
	color: var(--fore-colour);
	background-color: var(--back-colour);
	& > article {
		max-inline-size: var(--main-column-max-inline-size);
		margin-inline: auto;
		& header {
			margin-block-start: 0;
		}
		& footer {
			margin-block-start: calc(10 * var(--fpx));
			margin-block-end: 0;
			padding-block-start: calc(10 * var(--fpx));
			border-block-start: var(--fore-line);
		}
		& > :last-child {
			margin-block-end: 0;
		}
	}
	& h2 {
		padding-block-start: calc(2 * var(--fpx));
		border-block: var(--fore-line);
	}
	& p {
		margin-block: 1lh;
	}
}

/* PEOPLE */

#people {
	list-style-type: "";
	display: grid;
	gap: var(--people-gap);
	margin-block: 0;
	padding-inline: 0;
	& > li {
		display: grid;
		gap: calc(4 * var(--fpx));
		align-self: start;
		break-inside: avoid;
	}
}
.who {
	display: flex;
	align-items: center;
	column-gap: calc(4 * var(--fpx));
	margin-block: 0;
	padding-block-start: calc(1 * var(--fpx));
	padding-inline-start: calc(1 * var(--fpx));
}
.where {
	line-height: 1;
	& > a {
		margin-block-start: calc(1 * var(--fpx));
		color: var(--detail-colour);
		&:hover, &:focus {
			color: var(--back-colour);
		}
	}
}
.what {
	list-style-type: "";
	margin-block: 0;
	padding-block-start: calc(2 * var(--fpx));
	padding-block-end: calc(1 * var(--fpx));
	padding-inline: calc(3 * var(--fpx));
	padding-inline-end: calc(4 * var(--fpx));
	border-width: calc(5 * var(--fpx));
	border-style: solid;
	border-color: transparent;
	border-image-source: var(--thick-border-image);
	border-image-slice: calc(5 * var(--border-image-scale)) fill;
	border-image-repeat: stretch;
}

/* AVATARS */

.avatar-container {
	border-width: calc(2 * var(--fpx));
	border-block-end-width: calc(3 * var(--fpx));
	border-block-end-width: calc(3 * var(--fpx));
	border-style: solid;
	border-color: transparent;
	border-image-source: var(--thin-border-image);
	border-image-slice:
		calc(2 * var(--border-image-scale))
		calc(2 * var(--border-image-scale))
		calc(3 * var(--border-image-scale))
		fill;
	border-image-repeat: stretch;
}
.avatar {
	block-size: calc(16 * var(--fpx));
	aspect-ratio: 1;
	background-color: var(--detail-colour);
	mask-image: var(--avatar-sprite);
	mask-size: 1100%;
	mask-position: calc(var(--avatar-x, 0) * -100%) calc(var(--avatar-y, 0) * -100%);
}

/* PEOPLE BOB EFFECT */

@media (prefers-reduced-motion: no-preference) {
	@property --bob-y {
		syntax: "<integer>";
		inherits: false;
		initial-value: 0;
	}
	#people {
		--bob-duration: 1s;
		--delay-count: 4;
	}
	#people > li {
		transform: translateY(calc(var(--bob-y) * var(--fpx)));
		animation-name: bob;
		animation-timing-function: ease-in-out;
		animation-direction: alternate;
		animation-duration: var(--bob-duration);
		animation-iteration-count: infinite;
	}
	#people > li:is(:hover, :focus-within) {
		animation-play-state: paused;
	}
	@keyframes bob {
		0%, 15% {
			--bob-y: -1;
		}
		85%, 100% {
			--bob-y: 1;
		}
	}
	#people > li:nth-child(4n + 1) {
		animation-delay: calc(4 * 1/var(--delay-count) * var(--bob-duration));
	}
	#people > li:nth-child(4n + 2) {
		animation-delay: calc(3 * 1/var(--delay-count) * var(--bob-duration));
	}
	#people > li:nth-child(4n + 3) {
		animation-delay: calc(2 * 1/var(--delay-count) * var(--bob-duration));
	}
	#people > li:nth-child(4n + 4) {
		animation-delay: calc(1 * 1/var(--delay-count) * var(--bob-duration));
	}
}

/* ================== END DEFAULTS */ }