:root {
	--color-midnight: #000000;
	--color-canvas-white: #ffffff;
	--color-cloud-gray: #595b60;
	--color-ash-gray: #888888;
	--color-stone-slate: #808080;
	--color-forest-whisper: #7c8d66;

	--font-monument-grotesk: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--text-caption: 12px;
	--leading-caption: 1.5;
	--text-body: 16px;
	--leading-body: 1.33;
	--text-subheading: 20px;
	--leading-subheading: 1.2;
	--text-heading-sm: 22px;
	--leading-heading-sm: 1.13;
	--text-heading: 35px;
	--leading-heading: 1.1;
	--text-heading-lg: 40px;
	--leading-heading-lg: 1.1;
	--text-display: 170px;
	--leading-display: 0.9;

	--font-weight-regular: 400;
	--font-weight-semibold: 600;

	--spacing-4: 4px;
	--spacing-16: 16px;
	--spacing-20: 20px;
	--spacing-40: 40px;
	--spacing-60: 60px;

	--page-max-width: 1440px;
	--section-gap: 40px;
	--card-padding: 20px;
	--element-gap: 20px;

	--radius-all: 0px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border-radius: var(--radius-all);
}

html,
body {
	background: var(--color-midnight);
	color: var(--color-canvas-white);
	font-family: var(--font-monument-grotesk);
	font-size: var(--text-body);
	line-height: var(--leading-body);
	font-weight: var(--font-weight-regular);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

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

img {
	max-width: 100%;
	height: auto;
	display: block;
}

ul {
	list-style: none;
}

/* ---- Navigation ---- */

.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: var(--spacing-20) var(--spacing-40);
	font-size: var(--text-body);
}

.nav__brand {
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.02em;
}

.nav__brand:hover {
	color: var(--color-forest-whisper);
}

.nav__meta {
	color: var(--color-ash-gray);
	font-size: var(--text-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* ---- Page wrapper ---- */

.page {
	flex: 1;
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: var(--spacing-40);
	display: flex;
	flex-direction: column;
	gap: calc(var(--section-gap) * 2);
}

/* ---- Hero ---- */

.hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--spacing-60);
	align-items: center;
	padding-top: var(--spacing-40);
}

.hero__image {
	width: 100%;
	display: flex;
	justify-content: center;
}

.hero__image img {
	width: 100%;
	max-width: 460px;
}

.hero__text {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-40);
}

.display {
	font-family: var(--font-monument-grotesk);
	font-size: clamp(72px, 14vw, 170px);
	line-height: var(--leading-display);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.02em;
	display: flex;
	flex-direction: column;
}

.display span {
	display: block;
}

.hero__subtitle {
	font-size: var(--text-subheading);
	line-height: var(--leading-subheading);
	color: var(--color-ash-gray);
	max-width: 32ch;
}

/* ---- Bio ---- */

.bio {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--spacing-60);
	border-top: 1px solid var(--color-cloud-gray);
	padding-top: var(--spacing-40);
}

.bio::before {
	content: '01 / about';
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ash-gray);
	grid-column: 1 / 2;
}

.bio__lead {
	font-size: var(--text-heading);
	line-height: var(--leading-heading);
	font-weight: var(--font-weight-semibold);
	letter-spacing: -0.01em;
}

.bio__body {
	margin-top: var(--spacing-20);
	font-size: var(--text-subheading);
	line-height: var(--leading-subheading);
	color: var(--color-ash-gray);
	max-width: 56ch;
}

.bio > .bio__lead,
.bio > .bio__body {
	grid-column: 2 / 3;
}

/* ---- Contact ---- */

.contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: var(--spacing-60);
	border-top: 1px solid var(--color-cloud-gray);
	padding-top: var(--spacing-40);
}

.section-label {
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ash-gray);
	font-weight: var(--font-weight-regular);
}

.contact__list {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-20);
}

.action {
	display: inline-flex;
	align-items: baseline;
	gap: var(--spacing-16);
	width: fit-content;
	font-family: inherit;
	font-size: var(--text-heading-sm);
	line-height: var(--leading-heading-sm);
	color: var(--color-canvas-white);
	background: transparent;
	border: 1px solid var(--color-forest-whisper);
	padding: var(--spacing-16) var(--spacing-20);
	text-align: left;
	cursor: pointer;
	transition: color 120ms ease, background 120ms ease;
}

.action:hover,
.action:focus-visible {
	background: var(--color-forest-whisper);
	color: var(--color-midnight);
	outline: none;
}

.action__hint {
	font-size: var(--text-caption);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-ash-gray);
	transition: color 120ms ease;
}

.action:hover .action__hint,
.action:focus-visible .action__hint {
	color: var(--color-midnight);
}

/* ---- Links ---- */

.link-accent {
	color: var(--color-forest-whisper);
	border-bottom: 1px solid var(--color-forest-whisper);
}

.link-accent:hover {
	color: var(--color-canvas-white);
	border-bottom-color: var(--color-canvas-white);
}

.link-ghost {
	color: var(--color-ash-gray);
}

.link-ghost:hover {
	color: var(--color-forest-whisper);
}

/* ---- Footer ---- */

.foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	max-width: var(--page-max-width);
	margin: 0 auto;
	padding: var(--spacing-40);
	font-size: var(--text-caption);
	line-height: var(--leading-caption);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ash-gray);
	border-top: 1px solid var(--color-cloud-gray);
}

/* ---- Responsive ---- */

@media (max-width: 900px) {
	.nav,
	.page,
	.foot {
		padding-left: var(--spacing-20);
		padding-right: var(--spacing-20);
	}

	.hero,
	.bio,
	.contact {
		grid-template-columns: 1fr;
		gap: var(--spacing-40);
	}

	.bio::before {
		grid-column: 1;
	}

	.bio > .bio__lead,
	.bio > .bio__body {
		grid-column: 1;
	}

	.hero__image img {
		max-width: 320px;
	}

	.hero__text {
		gap: var(--spacing-20);
	}
}

@media (max-width: 480px) {
	.foot {
		flex-direction: column;
		gap: var(--spacing-4);
		align-items: flex-start;
	}
}