html {
	font-size: var(--unk-root-font-size);
}

body {
	background: var(--unk-color-bg);
	color: var(--unk-color-text);
	font-family: var(--unk-font-family-02);
	font-size: var(--unk-font-size-16);
	font-weight: var(--unk-font-weight-medium);
	line-height: var(--unk-leading-base);
	letter-spacing: var(--unk-tracking-normal);
}

::selection {
	background: transparent;
	color: var(--unk-color-accent);
	text-shadow:
		0 0 3px currentColor,
		0 0 8px currentColor,
		0 0 14px currentColor;
}

a {
	color: inherit;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.16em;
}

:focus-visible {
	outline-color: var(--unk-color-accent);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

:is(a, button):focus-visible {
	outline: none;
	color: var(--unk-color-accent);
	box-shadow: inset 0 -1px 0 var(--unk-color-accent);
}

.unk-type--mono-10 {
	font-family: var(--unk-font-family-01);
	font-size: var(--unk-font-size-10);
	line-height: 0.875rem;
	text-transform: uppercase;
}

.unk-text-wrap--balance {
	text-wrap: balance;
}

.unk-text-wrap--pretty {
	text-wrap: pretty;
}

.unk-scroll-fade--active::before,
.unk-scroll-fade--active::after {
	position: absolute;
	z-index: 2;
	inset: 0;
	content: "";
	pointer-events: none;
	transition: opacity 0.25s ease-out;
}

.unk-scroll-fade--active::before {
	background-image: var(--unk-scroll-fade-gradient-up);
}

.unk-scroll-fade--active::after {
	background-image: var(--unk-scroll-fade-gradient-down);
	opacity: 0;
}

.unk-scroll-fade--active.unk-scroll-fade--down::before,
.unk-scroll-fade--down .unk-scroll-fade--active::before {
	opacity: 0;
}

.unk-scroll-fade--active.unk-scroll-fade--down::after,
.unk-scroll-fade--down .unk-scroll-fade--active::after {
	opacity: 1;
}

.unk-view-projects__column,
.unk-view-inspiration__canvas {
	--unk-scroll-fade-gradient-up: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.8141) 5%,
		rgba(0, 0, 0, 0.5891) 10%,
		rgba(0, 0, 0, 0.3109) 15%,
		rgba(0, 0, 0, 0.0859) 20%,
		rgba(0, 0, 0, 0) 25%,
		rgba(0, 0, 0, 0.0859) 30%,
		rgba(0, 0, 0, 0.3109) 35%,
		rgba(0, 0, 0, 0.5891) 40%,
		rgba(0, 0, 0, 0.8141) 45%,
		rgba(0, 0, 0, 0.9) 50%,
		rgba(0, 0, 0, 0.8141) 55%,
		rgba(0, 0, 0, 0.5891) 60%,
		rgba(0, 0, 0, 0.3109) 65%,
		rgba(0, 0, 0, 0.0859) 70%,
		rgba(0, 0, 0, 0) 75%,
		rgba(0, 0, 0, 0.0859) 80%,
		rgba(0, 0, 0, 0.3109) 85%,
		rgba(0, 0, 0, 0.5891) 90%,
		rgba(0, 0, 0, 0.8141) 95%,
		rgba(0, 0, 0, 0.9) 100%
	);
	--unk-scroll-fade-gradient-down: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.9) 0%,
		rgba(0, 0, 0, 0.8332) 5%,
		rgba(0, 0, 0, 0.7606) 10%,
		rgba(0, 0, 0, 0.6803) 15%,
		rgba(0, 0, 0, 0.5892) 20%,
		rgba(0, 0, 0, 0.4811) 25%,
		rgba(0, 0, 0, 0.3402) 30%,
		rgba(0, 0, 0, 0) 35%,
		rgba(0, 0, 0, 0) 40%,
		rgba(0, 0, 0, 0) 45%,
		rgba(0, 0, 0, 0) 50%,
		rgba(0, 0, 0, 0) 55%,
		rgba(0, 0, 0, 0) 60%,
		rgba(0, 0, 0, 0) 65%,
		rgba(0, 0, 0, 0.3402) 70%,
		rgba(0, 0, 0, 0.4811) 75%,
		rgba(0, 0, 0, 0.5892) 80%,
		rgba(0, 0, 0, 0.6803) 85%,
		rgba(0, 0, 0, 0.7606) 90%,
		rgba(0, 0, 0, 0.8332) 95%,
		rgba(0, 0, 0, 0.9) 100%
	);
}

.unk-corner-frame {
	--unk-corner-frame-color: var(--unk-color-accent);
	--unk-corner-frame-extension: 24px;
	--unk-corner-frame-x: 0;
	--unk-corner-frame-y: 0;
	--unk-corner-frame-x-opacity: 0;
	--unk-corner-frame-y-opacity: 0;

	position: relative;
}

.unk-corner-frame::before,
.unk-corner-frame::after {
	content: "";
	position: absolute;
	z-index: 3;
	pointer-events: none;
	will-change: transform, opacity;
}

.unk-corner-frame::before {
	inset: 0 calc(-1 * var(--unk-corner-frame-extension));
	border-top: 1px solid var(--unk-corner-frame-color);
	border-bottom: 1px solid var(--unk-corner-frame-color);
	opacity: calc(var(--unk-line-opacity) * var(--unk-corner-frame-x-opacity));
	transform: scaleX(var(--unk-corner-frame-x));
}

.unk-corner-frame::after {
	inset: calc(-1 * var(--unk-corner-frame-extension)) 0;
	border-right: 1px solid var(--unk-corner-frame-color);
	border-left: 1px solid var(--unk-corner-frame-color);
	opacity: calc(var(--unk-line-opacity) * var(--unk-corner-frame-y-opacity));
	transform: scaleY(var(--unk-corner-frame-y));
}

.unk-site-shell {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.unk-site-main {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding-inline: var(--unk-space-md);
	padding-block: var(--unk-space-3xl);
}

.unk-site-main:focus {
	outline: none;
}

.unk-view-shell {
	width: 100%;
	max-width: 76rem;
	margin-inline: auto;
}

.unk-view-shell__title {
	margin: 0;
	font-family: var(--unk-font-family-03);
	font-size: var(--unk-font-size-48);
	font-weight: var(--unk-font-weight-bold);
	line-height: var(--unk-leading-tight);
	letter-spacing: var(--unk-tracking-normal);
	text-align: center;
}

@media (min-width: 48em) {
	.unk-site-main {
		padding-inline: var(--unk-space-xl);
		padding-block: var(--unk-space-4xl);
	}
}

@media (prefers-reduced-motion: reduce) {
	.unk-scroll-fade--active::before,
	.unk-scroll-fade--active::after {
		display: none;
	}

	.unk-corner-frame--active.unk-corner-frame--hover {
		--unk-corner-frame-x: 1;
		--unk-corner-frame-y: 1;
		--unk-corner-frame-x-opacity: 1;
		--unk-corner-frame-y-opacity: 1;
	}
}

@media (forced-colors: active) {
	.unk-scroll-fade--active::before,
	.unk-scroll-fade--active::after {
		display: none;
	}

	html,
	html * {
		cursor: auto !important;
	}
}

@media (min-width: 80em) {
	.unk-site-main {
		padding-inline: var(--unk-space-2xl);
	}
}