/* #region: Fonts declarations */
@font-face {
	font-family: "Absans";
	src: url("/fonts/Absans-Regular.woff2") format("woff2");
	font-feature-settings: "ss03" on;
}
@font-face {
	font-family: "Karrik";
	src: url("/fonts/Karrik-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
	font-feature-settings:
		"ss01" on,
		"ss06" on,
		"pnum" on;
}
/* #endregion */

:root {
	--page-edge: 0.625rem;
	--link-gap: 0.4rem;
	--site-name-space: 8rem;

	--focus-color: #f00;

	--text-width: min(100%, 55ch);

	--main-font-size: 1.1rem;
	--content-font-size: calc(var(--main-font-size) - 0.1rem);
	/* --content-font-size: var(--text-width); */
}

/* Main */
body {
	margin: var(--page-edge);

	cursor: crosshair;

	font-family: "Absans", sans-serif;
	font-size: var(--main-font-size);
	line-height: 1.2;
	background: #fff;
	color: #000;
}
/* Header fixed only on homepage */
body:not(:has(.project-list)) .site-identity {
	position: static;
}
/* about page offset */
body:has(.about-biography) .site-identity {
	float: left;
	gap: 0;
}
/* space before about text */
body:has(.about-biography) .site-identity::after {
	content: " ";
	white-space: pre;
	font-weight: normal;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	/* margin: 0; */
	font: inherit;
	max-width: var(--text-width);
}

/* Images */
img {
	width: auto;
	height: auto;
}

a {
	text-decoration: none;
	color: inherit;
}

a:hover,
a:focus-visible {
	color: var(--focus-color);
}
/* Active page */
a[aria-current="page"] {
	color: var(--focus-color);
}

/* #region: Header and footer management */
.site-identity,
.site-footer {
	position: fixed;
	right: var(--page-edge);
	left: var(--page-edge);
	z-index: 2;
	pointer-events: none;

	font-weight: bold;
	/* display: flex; */
	/* justify-content: space-between; */
}
.site-identity a,
.site-footer a,
.site-footer span {
	pointer-events: auto;
}
.header-links,
.footer-links {
	display: flex;
	gap: var(--link-gap);
}

.site-identity {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem;

	top: var(--page-edge);
}
.site-name {
	/* font-weight: bold; */
}
.site-footer {
	bottom: var(--page-edge);
	font-size: var(--content-font-size);

	/* background-color: white; */
}
/* #endregion */

/* About page */
.about-biography {
}
.about-biography p:first-child {
	margin: 0;
}

.about-biography img {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 15rem;
}

/* Projects */
.project-list {
	text-align: right;

	list-style: none;
	padding: 0;
	margin: 0;
}

.project-list li {
	margin-block: -0.05em;
}
.project-link {
	display: inline-block;
	overflow: clip;
	vertical-align: top;

	/* font-weight: bold; */
	font-size: min(8vw, 8rem);
	line-height: 0.82;
	text-transform: uppercase;
}
/* #region: Projects Pages */
.project-page {
	font-family:
		system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
		"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	font-size: var(--content-font-size);

	/* padding-block: 1rem; */
}
.project-page-title {
	font-family: "Absans";
	font-weight: bold;
	line-height: 1;

	/* text-transform: uppercase; */
}
.project-page-title h1 {
	margin-top: 5px;
}
.project-page-title hr {
	margin-bottom: 0;
}
.project-collaborators {
	font-size: var(--content-font-size);
	line-height: 1;
}
/* #endregion */

/* #region Project content */
.project-content {
	max-width: var(--text-width);
	font-size: var(--content-font-size);
}

.project-content > ol {
	/* smaller font size for lists */
	font-size: calc(var(--content-font-size) - 0.05rem);
}

.project-content > pre {
	/* code blocks */
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
/* #endregion */

/* #region: Project media management */
.project-page--with-media {
	display: grid;
	grid-template-columns:
		minmax(0, var(--text-width))
		minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 4rem);
	row-gap: 0;
}
.project-page--with-media .project-page-title {
	grid-column: 1 / -1;
}

.project-media {
	min-width: 0;
	padding-top: 1em;
}
.project-media-item {
	margin: 0;
}

.project-media-item--main figcaption {
	/* margin-bottom: 0.4em; */
	margin-top: 0.2em;
	margin-left: 0.2em;
	margin-right: 0.2em;

	font-size: 0.875em;
	font-style: italic;
	color: #555;

	line-height: 1.3;
	text-align: right;
}

.project-media img,
.project-media video,
.project-media audio {
	display: block;
	width: 100%;
}
.project-media img,
.project-media video {
	height: auto;
}

.project-media video {
	background-color: #000;
}

.project-media-embed {
	aspect-ratio: var(--media-aspect-ratio, 16 / 9);
}
.project-media-item--pdf {
	width: min(100%, 40rem);
	margin-inline: auto;
}
.project-media-pdf {
	height: clamp(28rem, 68svh, 42rem);
}
.project-media iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}
/* #endregion */

@media (max-width: 50rem) {
	.project-page--with-media {
		display: flex;
		flex-direction: column;

		row-gap: clamp(0.75rem, 3vw, 1.25rem);
	}
	.project-media {
		display: contents;
	}
	.project-page--with-media .project-page-title {
		order: 1;
	}
	.project-media-main {
		order: 2;
	}
	.project-content {
		order: 3;
	}
	.project-media-grid {
		order: 4;
	}
	.project-media-pdf {
		height: clamp(20rem, 52svh, 28rem);
	}
}

/* Face spawning */
.face {
	position: fixed;
	transform: translate(-50%, -50%);

	width: min(15vw, 120px);
	height: auto;
	max-width: 120px;
	max-height: 120px;

	pointer-events: none;
	user-select: none;
	-webkit-user-drag: none;

	transition: opacity 1s ease;
	opacity: 1;
}