@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: block;
	src: url(../fonts/archivo-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: block;
	src: url(../fonts/archivo-latin-ext.woff2) format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Share Tech Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(../fonts/share-tech-mono-latin.woff2) format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
	--bg: #08090c;
	--panel: #101318;
	--panel-2: #161a21;
	--line: #21262e;
	--text: #e9ebee;
	--muted: #8d949f;

	--teal: #2ee6c5;
	--pink: #ff4fa3;
	--orange: #faa70e;
	--red: #fa4343;
	--blue: #30c0ff;
	--coral: color-mix(in srgb, var(--pink) 45%, var(--orange));

	--teal-ink: var(--teal);
	--pink-ink: var(--pink);
	--orange-ink: var(--orange);
	--red-ink: var(--red);
	--blue-ink: var(--blue);
	--coral-ink: var(--coral);

	--accent: var(--teal);
	--accent-ink: var(--teal-ink);

	--hero-text: #f5f7f9;
	--hero-muted: rgba(245, 247, 249, 0.78);
	--hero-scrim: 0.95;
	--hero-foot-opacity: 1;
	--hero-foot-tint: #08090c;
	--plate: #0b0e13;

	--shell: 1240px;
	--pace: 0.33s ease-in-out;
	--display: "Archivo", system-ui, sans-serif;
	--mono: "Share Tech Mono", ui-monospace, monospace;
}

:root[data-theme="light"] {
	--bg: #e7e9ed;
	--panel: #fafbfc;
	--panel-2: #f1f3f6;
	--line: #d0d5dc;
	--text: #0e1014;
	--muted: #5a616b;
	--teal-ink: #14705f;
	--pink-ink: #c2196a;
	--orange-ink: #8a5800;
	--red-ink: #c22020;
	--coral-ink: #b0431a;
	--hero-scrim: 1;
	--hero-foot-opacity: 0;
}

@media (prefers-color-scheme: light) {
	:root:not([data-theme]) {
		--bg: #e7e9ed;
		--panel: #fafbfc;
		--panel-2: #f1f3f6;
		--line: #d0d5dc;
		--text: #0e1014;
		--muted: #5a616b;
		--teal-ink: #14705f;
		--pink-ink: #c2196a;
		--orange-ink: #8a5800;
		--red-ink: #c22020;
		--blue-ink: #0f7ab8;
		--coral-ink: #b0431a;
		--hero-scrim: 1;
		--hero-foot-opacity: 0;
	}
}

* {
	box-sizing: border-box;
}

@property --scroll-accent {
	syntax: "<color>";
	inherits: true;
	initial-value: #2ee6c5;
}

html {
	scroll-behavior: smooth;
	background: var(--bg);
	--scroll-accent: var(--coral-ink);
	scrollbar-color: color-mix(in srgb, var(--scroll-accent) 52%, var(--muted)) var(--panel-2);
}

html.is-spy-live {
	transition: --scroll-accent 0.7s ease;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font-family: var(--display);
	font-variation-settings: "wdth" 100, "wght" 400;
	font-size: 16px;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

a {
	color: inherit;
}

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

:focus-visible {
	outline: 2px solid var(--teal-ink);
	outline-offset: 3px;
	border-radius: 2px;
}

::selection {
	background: var(--select-accent, var(--teal));
	color: #08090c;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.is-theming,
.is-theming *:not(.hero-img):not(.hero-drift):not(svg) {
	transition: background-color 0.45s ease, border-color 0.45s ease, color 0.45s ease, fill 0.45s ease;
}

.skip-link {
	position: fixed;
	left: -9999px;
	top: 1rem;
	z-index: 100;
	background: var(--teal);
	color: #08090c;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.65rem 1.1rem;
	border-radius: 2px;
}

.skip-link:focus {
	left: 1rem;
}

h1, h2, h3 {
	margin: 0;
	font-variation-settings: "wdth" 122, "wght" 800;
	letter-spacing: -0.025em;
	line-height: 1.02;
	text-transform: uppercase;
}

.shell {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0 2rem;
}

.tag {
	font-family: var(--mono);
	font-size: 0.76rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.site-nav {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background var(--pace), border-color var(--pace);
}

.site-nav.is-stuck {
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(14px);
	border-bottom-color: var(--line);
}

.nav-inner {
	max-width: var(--shell);
	margin: 0 auto;
	padding: 0.75rem 2rem;
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.nav-logo {
	display: flex;
	align-items: center;
	margin-right: auto;
}

.nav-logo img {
	height: 20px;
	width: auto;
	transition: opacity var(--pace);
}

.nav-logo:hover img {
	opacity: 0.7;
}

.nav-links {
	position: relative;
	top: 3px;
	display: flex;
	gap: 1.5rem;
	font-family: var(--mono);
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.nav-links a {
	position: relative;
	text-decoration: none;
	color: var(--muted);
	padding-bottom: 2px;
	transition: color var(--pace);
}

.nav-links a:nth-child(1) {
	--accent: var(--teal);
	--accent-ink: var(--teal-ink);
}

.nav-links a:nth-child(2) {
	--accent: var(--red);
	--accent-ink: var(--red-ink);
}

.nav-links a:nth-child(3) {
	--accent: var(--pink);
	--accent-ink: var(--pink-ink);
}

.nav-links a:nth-child(4) {
	--accent: var(--orange);
	--accent-ink: var(--orange-ink);
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--accent-ink);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--pace);
}

.nav-links a:hover,
.nav-links a.is-active {
	color: var(--accent-ink);
}

.nav-links a:hover::after,
.nav-links a.is-active::after {
	transform: scaleX(1);
}

.theme-toggle {
	background: none;
	border: 1px solid var(--line);
	border-radius: 2px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	color: var(--muted);
	cursor: pointer;
	transition: color var(--pace), border-color var(--pace);
}

.theme-toggle:hover {
	color: var(--text);
	border-color: var(--teal-ink);
}

.site-nav:not(.is-stuck) .nav-links a,
.site-nav:not(.is-stuck) .theme-toggle {
	color: rgba(245, 247, 249, 0.86);
	border-color: rgba(245, 247, 249, 0.32);
}

.site-nav:not(.is-stuck) .nav-links a:hover,
.site-nav:not(.is-stuck) .nav-links a.is-active {
	color: var(--accent);
}

.site-nav:not(.is-stuck) .nav-links a::after {
	background: var(--accent);
}

.site-nav:not(.is-stuck) .theme-toggle:hover {
	color: var(--hero-text);
	border-color: var(--teal);
}

.theme-toggle svg {
	grid-area: 1 / 1;
	transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.theme-toggle .icon-moon {
	opacity: 0;
	transform: rotate(-70deg) scale(0.5);
}

:root[data-theme="light"] .theme-toggle .icon-sun {
	opacity: 0;
	transform: rotate(70deg) scale(0.5);
}

:root[data-theme="light"] .theme-toggle .icon-moon {
	opacity: 1;
	transform: none;
}

.hero {
	--accent-ink: var(--coral-ink);
	position: relative;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-top: clamp(4rem, 10rem - 5vh, 8rem);
}

.hero-plate {
	position: absolute;
	inset: 0;
	background: #05070a;
	z-index: 0;
}

.hero-plate::before,
.hero-plate::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity 0.6s ease;
}

.hero-plate::before {
	z-index: 1;
	background: linear-gradient(to top, var(--hero-foot-tint) 0%, transparent 11%);
	opacity: var(--hero-foot-opacity);
}

.hero-plate::after {
	background:
		linear-gradient(to bottom, rgba(6, 8, 12, 0.6) 0%, transparent 13%),
		linear-gradient(to top, rgba(6, 8, 12, 0.86) 0%, rgba(6, 8, 12, 0.5) 13%, transparent 28%),
		linear-gradient(96deg, rgba(6, 8, 12, 0.94) 0%, rgba(6, 8, 12, 0.86) 30%, rgba(6, 8, 12, 0.5) 62%, rgba(6, 8, 12, 0.1) 100%);
	opacity: var(--hero-scrim);
}

.hero-drift {
	position: absolute;
	inset: -4%;
}

.hero-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transform: scale(1.045);
	transition: opacity 1.1s ease-in-out, transform 9s cubic-bezier(0.16, 0.7, 0.3, 1);
}

.hero-img.is-live {
	opacity: 1;
	transform: scale(1);
}

.hero-inner {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
}

.js .hero-inner > *,
.js .hero-meta {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

.js.is-ready .hero-inner > *,
.js.is-ready .hero-meta {
	opacity: 1;
	transform: none;
}

.js .hero-inner > *:nth-child(1) {
	transition-delay: 0.1s;
}

.js .hero-inner > *:nth-child(2) {
	transition-delay: 0.2s;
}

.js .hero-inner > *:nth-child(3) {
	transition-delay: 0.32s;
}

.js .hero-inner > *:nth-child(4) {
	transition-delay: 0.44s;
}

.js .hero-meta {
	transition-delay: 0.56s;
}

.hero-eyebrow {
	color: var(--hero-muted);
	margin-bottom: 1.75rem;
}

.hero-eyebrow b {
	color: var(--teal);
	font-weight: inherit;
}

.wordmark {
	font-size: clamp(2.4rem, 12vw, 9.5rem);
	line-height: 0.86;
	color: var(--hero-text);
	margin-bottom: 1.5rem;
}

.wordmark span {
	display: block;
}

.wordmark span:first-child {
	color: color-mix(in oklab, color-mix(in srgb, var(--red) 72%, var(--orange)) 55%, #fff6f2);
}

.wordmark span:last-child {
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--orange) 38%, var(--hero-text));
	text-stroke: 1.5px color-mix(in srgb, var(--orange) 38%, var(--hero-text));
}

.hero-tagline {
	font-size: clamp(1.05rem, 1.9vw, 1.45rem);
	color: var(--hero-text);
	max-width: 30ch;
	margin: 0 0 2.25rem;
	line-height: 1.35;
}

.hero-actions {
	display: flex;
	gap: 0.85rem;
	flex-wrap: wrap;
}

.hero-meta {
	position: relative;
	z-index: 1;
	width: fit-content;
	max-width: 100%;
	margin: 2rem auto 0;
	border-top: 1px solid rgba(245, 247, 249, 0.16);
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--hero-muted);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.6rem 2.5rem;
	padding-top: 0.9rem;
	padding-bottom: 0.9rem;
}

.hero-meta b {
	color: var(--hero-text);
	font-weight: inherit;
}

#plate-trigger {
	cursor: pointer;
}

#plate-trigger:hover b,
#plate-trigger:focus-visible b {
	color: var(--coral);
}

#plate-id {
	display: inline-block;
	min-width: 2ch;
	transition: opacity var(--pace), color var(--pace);
}

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.85rem 1.5rem;
	border-radius: 2px;
	text-decoration: none;
	font-variation-settings: "wdth" 108, "wght" 650;
	font-size: 0.88rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid transparent;
	transition: background var(--pace), color var(--pace), border-color var(--pace), transform var(--pace);
}

.btn-solid {
	background: var(--orange);
	color: #140f04;
}

.btn-solid:hover {
	background: var(--teal);
	color: #04140f;
	transform: translateY(-2px);
}

.btn-line {
	border-color: rgba(245, 247, 249, 0.3);
	color: var(--hero-text);
}

.btn-line:hover {
	border-color: var(--pink);
	color: var(--pink);
	transform: translateY(-2px);
}

.section {
	padding: 7rem 0;
	border-top: 1px solid var(--line);
	scroll-margin-top: 4.5rem;
	overflow-x: clip;
}

#about {
	--accent: var(--teal);
	--accent-ink: var(--teal-ink);
}

#services {
	--accent: var(--red);
	--accent-ink: var(--red-ink);
}

#works {
	--accent: var(--pink);
	--accent-ink: var(--pink-ink);
}

#contact {
	--accent: var(--orange);
	--accent-ink: var(--orange-ink);
}

.section-head {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 2rem;
	margin-bottom: 3.5rem;
}

.section-head h2 {
	font-size: clamp(1.9rem, 4.2vw, 3rem);
	margin-bottom: 0.9rem;
}

.section-lead {
	color: var(--muted);
	margin: 0;
	max-width: 64ch;
	text-wrap: pretty;
}

.section-head .tag {
	align-self: start;
	padding-top: 0.5rem;
	color: var(--accent-ink);
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.section-head .tag::before {
	content: "";
	width: 20px;
	height: 2px;
	background: var(--accent-ink);
	flex: none;
}

.js .reveal .rise {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.js .reveal .rise.tag {
	transform: translateX(-22px);
}

.js .reveal .rise.client-band {
	transform: translateX(26px);
}

.reveal.is-visible .rise,
.reveal.is-visible .rise.tag,
.reveal.is-visible .rise.client-band {
	opacity: 1;
	transform: none;
}

.js .index-row,
.js .work-card {
	opacity: 0;
}

.js .reveal.is-visible .index-row {
	opacity: 1;
	animation: slide-in-left 0.55s ease-out backwards;
}

.js .reveal.is-visible .index-row:nth-child(2) {
	animation-delay: 0.05s;
}

.js .reveal.is-visible .index-row:nth-child(3) {
	animation-delay: 0.1s;
}

.js .reveal.is-visible .index-row:nth-child(4) {
	animation-delay: 0.15s;
}

.js .reveal.is-visible .index-row:nth-child(5) {
	animation-delay: 0.2s;
}

.js .reveal.is-visible .index-row:nth-child(6) {
	animation-delay: 0.25s;
}

.js .reveal.is-visible .index-row:nth-child(n+7) {
	animation-delay: 0.3s;
}

.js .reveal.is-visible .work-card {
	opacity: 1;
	animation: slide-in-left 0.6s ease-out backwards;
}

.js .reveal.is-visible .work-card:nth-child(3n+2) {
	animation-name: slide-in-up;
	animation-delay: 0.08s;
}

.js .reveal.is-visible .work-card:nth-child(3n) {
	animation-name: slide-in-right;
	animation-delay: 0.16s;
}

@keyframes slide-in-left {
	from {
		opacity: 0;
		transform: translate3d(-26px, 10px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes slide-in-up {
	from {
		opacity: 0;
		transform: translateY(26px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes slide-in-right {
	from {
		opacity: 0;
		transform: translate3d(26px, 10px, 0);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

.reveal.is-visible .rise:nth-child(2) {
	transition-delay: 0.08s;
}

.reveal.is-visible .rise:nth-child(3) {
	transition-delay: 0.16s;
}

.reveal.is-visible .rise:nth-child(4) {
	transition-delay: 0.24s;
}

.about-body {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 2rem;
}

.about-body + .about-body {
	margin-top: 3rem;
	padding-top: 3rem;
	border-top: 1px solid var(--line);
}

.about-body p {
	font-size: clamp(1.15rem, 2.1vw, 1.55rem);
	line-height: 1.4;
	max-width: 44ch;
	margin: 0 0 1.5rem;
	font-variation-settings: "wdth" 100, "wght" 500;
	text-wrap: pretty;
}

.about-body .about-note {
	font-size: 1.05rem;
	line-height: 1.65;
	max-width: 60ch;
	text-wrap: pretty;
	font-variation-settings: "wdth" 100, "wght" 400;
}

.about-body .about-foot {
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--muted);
	max-width: 60ch;
	margin-bottom: 0;
	text-wrap: pretty;
	font-variation-settings: "wdth" 100, "wght" 400;
}

.about-body a {
	color: var(--text);
	text-decoration-color: var(--blue-ink);
	text-underline-offset: 4px;
	transition: color var(--pace);
}

.about-body a:hover {
	color: var(--blue-ink);
}

.index-list {
	border-top: 1px solid var(--line);
}

.index-row {
	display: grid;
	grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.1fr);
	gap: 1rem 2rem;
	align-items: center;
	padding: 1.5rem 1.25rem 1.5rem 0;
	border-bottom: 1px solid var(--line);
	box-shadow: 0 -1px 0 var(--line);
	position: relative;
	transition: background var(--pace), padding var(--pace), margin var(--pace), border-radius var(--pace);
}

.index-row::before {
	content: "";
	position: absolute;
	left: 0;
	top: -1px;
	bottom: -1px;
	width: 2px;
	background: var(--accent-ink);
	transform: scaleY(0);
	transition: transform var(--pace);
}

.index-row:hover {
	background: var(--panel);
	margin-left: -1.25rem;
	margin-right: -1.25rem;
	padding-left: 2.5rem;
}

.index-row:hover::before {
	transform: scaleY(1);
}

.index-row:nth-child(4n+1) {
	--accent: var(--teal);
	--accent-ink: var(--teal-ink);
}

.index-row:nth-child(4n+2) {
	--accent: var(--orange);
	--accent-ink: var(--orange-ink);
}

.index-row:nth-child(4n+3) {
	--accent: var(--pink);
	--accent-ink: var(--pink-ink);
}

.index-row:nth-child(4n+4) {
	--accent: var(--red);
	--accent-ink: var(--red-ink);
}

.index-row h3 {
	font-size: 1.15rem;
	font-variation-settings: "wdth" 112, "wght" 700;
	transition: color var(--pace);
}

.index-row:hover h3 {
	color: var(--accent-ink);
}

.index-row p {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
	text-wrap: pretty;
}

.index-keys {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.15rem;
	font-family: var(--mono);
	font-size: 0.76rem;
	letter-spacing: 0.06em;
	color: var(--muted);
}

.index-keys li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
}

.index-keys li::before {
	content: "";
	width: 4px;
	height: 4px;
	flex: none;
	background: color-mix(in srgb, var(--muted) 45%, transparent);
	transition: background var(--pace);
}

.index-row:hover .index-keys li::before {
	background: var(--accent-ink);
}

.index-row-more {
	border-top: 1px dashed var(--line);
	border-bottom: none;
	box-shadow: none;
	background: var(--panel);
	border-radius: 10px;
	margin-top: 0.5rem;
	padding: 1.5rem 1.25rem;
}

.index-row-more:hover {
	margin-left: -1.25rem;
	margin-right: -1.25rem;
	padding-left: 2.5rem;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.index-row-more::before,
.index-row-more:hover::before {
	background: var(--muted);
}

.index-row-more h3,
.index-row-more:hover h3 {
	color: var(--muted);
	font-variation-settings: "wdth" 100, "wght" 500;
}

.index-row-more .index-keys li::before,
.index-row-more:hover .index-keys li::before {
	background: color-mix(in srgb, var(--muted) 45%, transparent);
}

.works-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

.work-card {
	--accent: var(--teal);
	--accent-ink: var(--teal-ink);
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 3px;
	overflow: hidden;
	text-decoration: none;
	transition: border-color var(--pace), transform var(--pace);
}

.work-card[data-category="Game"] {
	--accent: var(--teal);
	--accent-ink: var(--teal-ink);
}

.work-card[data-category="Website"] {
	--accent: var(--orange);
	--accent-ink: var(--orange-ink);
}

.work-card[data-category="Software"] {
	--accent: var(--pink);
	--accent-ink: var(--pink-ink);
}

.work-card[data-category="Story"] {
	--accent: var(--red);
	--accent-ink: var(--red-ink);
}

.work-card[data-category="Library"] {
	--accent: var(--coral);
	--accent-ink: var(--coral-ink);
}

.work-card:hover {
	border-color: color-mix(in srgb, var(--accent-ink) 60%, var(--line));
	transform: translateY(-3px);
}

.work-card.is-feature {
	grid-column: 1 / -1;
	flex-direction: row;
}

.work-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--plate);
	border-bottom: 1px solid var(--line);
	overflow: hidden;
}

.work-shot {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.work-media.has-image::before,
.client-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(100deg, transparent 0 40%, color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent 60% 100%);
	background-size: 200% 100%;
	animation: plate-wait 1.5s linear infinite;
	transition: opacity var(--pace);
}

.work-media.is-loaded::before,
.client-media.is-loaded::before {
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--pace), visibility 0s var(--pace);
}

.work-shot,
.client-media img {
	opacity: 0;
	transition: opacity var(--pace);
}

.work-media.is-loaded .work-shot,
.client-media.is-loaded img {
	opacity: 1;
}

@keyframes plate-wait {
	from {
		background-position: 150% 0;
	}
	to {
		background-position: -50% 0;
	}
}

.is-feature .work-media {
	aspect-ratio: 21 / 9;
	flex: 1 1 58%;
	border-bottom: none;
	border-right: 1px solid var(--line);
}

.work-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, rgba(6, 8, 12, 0.88) 0%, rgba(6, 8, 12, 0.15) 52%, transparent 78%),
		radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 52%, transparent), transparent 62%),
		linear-gradient(200deg, transparent 30%, color-mix(in srgb, var(--accent) 14%, transparent));
	opacity: 0.9;
	transition: opacity var(--pace);
}

.work-media.has-image::after {
	background:
		linear-gradient(to top, rgba(6, 8, 12, 0.9) 0%, rgba(6, 8, 12, 0.2) 46%, transparent 72%),
		radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 62%);
	opacity: 0.85;
}

.work-card:hover .work-media::after {
	opacity: 1;
}

.work-mark {
	position: absolute;
	left: 1.15rem;
	right: 1.15rem;
	bottom: 0.9rem;
	z-index: 1;
	font-variation-settings: "wdth" 116, "wght" 800;
	font-size: clamp(1.1rem, 2vw, 1.55rem);
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: #f5f7f9;
	transition: opacity var(--pace);
}

.is-feature .work-mark {
	font-size: clamp(1.6rem, 3.4vw, 2.6rem);
	bottom: 1.2rem;
	left: 1.4rem;
}

.work-media.hides-mark.is-loaded .work-mark {
	opacity: 0;
}

.work-card:hover .work-media.hides-mark .work-mark,
.work-card:focus-within .work-media.hides-mark .work-mark {
	opacity: 1;
}

.work-cat {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	background: var(--accent);
	color: #08090c;
	padding: 0.28rem 0.7rem;
}

.work-body {
	padding: 1.25rem 1.35rem 1.4rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 0.5rem;
}

.is-feature .work-body {
	flex: 1 1 42%;
	justify-content: center;
	padding: 2rem 2.25rem;
	gap: 0.7rem;
}

.is-feature .work-desc {
	flex: 0;
	font-size: 1rem;
}

.work-status {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.55rem;
}

.work-status span + span::before {
	content: "/";
	margin-right: 0.55rem;
	color: var(--line);
}

.work-desc {
	color: var(--muted);
	font-size: 0.93rem;
	margin: 0;
	flex: 1;
	text-wrap: pretty;
}

.work-card.is-redacted {
	--accent: var(--muted);
	--accent-ink: var(--muted);
	background: var(--panel-2);
}

.work-card.is-redacted .work-body {
	justify-content: center;
	gap: 0.9rem;
	min-height: 14rem;
}

.work-redact {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0;
}

.redact-bars {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	flex: 1;
}

.redact-bars span {
	position: relative;
	height: 0.62rem;
	border-radius: 2px;
	background: var(--line);
	overflow: hidden;
}

.redact-bars span:nth-child(2n) {
	width: 60%;
}

.redact-bars span:nth-child(3n) {
	width: 78%;
}

.redact-bars span::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	background: linear-gradient(100deg, transparent 0 40%, color-mix(in srgb, var(--text) 14%, transparent) 50%, transparent 60% 100%);
	background-size: 200% 100%;
	background-position: 150% 0;
	animation: plate-wait 1.5s linear 2s infinite;
	animation-play-state: paused;
	transition: opacity var(--pace);
}

.work-card.is-redacted:hover .redact-bars span::after,
.work-card.is-redacted:focus-within .redact-bars span::after {
	opacity: 1;
	animation-play-state: running;
	transition: opacity var(--pace) 2s;
}

.work-hint {
	font-family: var(--mono);
	font-size: 0.75rem;
	line-height: 1.55;
	font-style: italic;
	color: var(--muted);
	margin: 0;
	text-wrap: pretty;
}

.work-card.is-more {
	grid-column: 1 / -1;
	background-image: repeating-linear-gradient(-45deg, transparent 0 9px, color-mix(in srgb, var(--text) 4%, transparent) 9px 18px);
	border-style: dashed;
}

.work-card.is-more:hover {
	transform: none;
}

.work-card.is-more .work-body {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.5rem 1.1rem;
	padding: 1.5rem;
}

.more-mark {
	color: var(--accent-ink);
	animation: more-turn 4s linear infinite;
	animation-play-state: paused;
}

.work-card.is-more:hover .more-mark,
.work-card.is-more:focus-within .more-mark {
	animation-play-state: running;
}

@keyframes more-turn {
	to {
		transform: rotate(360deg);
	}
}

.work-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	margin-top: 0.4rem;
}

.work-go {
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: color var(--pace);
}

.work-go svg {
	transition: transform var(--pace);
}

.work-go:hover {
	color: var(--accent-ink);
}

.work-go:hover svg {
	transform: translateX(3px);
}

.client-band {
	--accent: var(--orange);
	--accent-ink: var(--orange-ink);
	margin-top: 4rem;
	border-top: 1px solid var(--line);
	padding-top: 2rem;
}

.client-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	margin-bottom: 1.25rem;
}

.client-head .tag {
	color: var(--accent-ink);
	font-variation-settings: normal;
}

.client-note {
	margin: 0;
	color: var(--muted);
	font-size: 0.95rem;
}

.see-more {
	margin-left: auto;
	transform: translateY(-7px);
	margin-bottom: -12px;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
	display: inline-flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0;
	text-align: right;
	transition: color var(--pace);
}

.see-more-main {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.see-more-domain {
	font-size: 0.72rem;
	color: var(--muted);
	text-transform: none;
	letter-spacing: 0;
	margin-top: -0.3rem;
	transition: color var(--pace);
}

.see-more:hover .see-more-domain {
	color: inherit;
}

.see-more svg {
	transition: transform var(--pace);
}

.see-more:hover {
	color: var(--accent-ink);
}

.see-more:hover svg {
	transform: translate(2px, -2px);
}

.client-row {
	display: grid;
	grid-template-columns: minmax(0, 240px) minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.5rem 2rem;
	padding: 1.4rem 1.5rem;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 3px;
	text-decoration: none;
	transition: border-color var(--pace), transform var(--pace);
}

.client-row.has-image {
	grid-template-columns: 190px minmax(0, 200px) minmax(0, 1fr) auto;
	padding: 1rem 1.5rem 1rem 1rem;
}

.client-row:hover {
	border-color: color-mix(in srgb, var(--accent-ink) 60%, var(--line));
	transform: translateY(-3px);
}

.client-media {
	position: relative;
	aspect-ratio: 16 / 9;
	background-color: var(--plate);
	border: 1px solid var(--line);
	border-radius: 2px;
	overflow: hidden;
	filter: saturate(0.85);
	transition: filter var(--pace);
}

.client-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.client-row:hover .client-media {
	filter: saturate(1.1);
}

.client-name {
	display: block;
	font-variation-settings: "wdth" 114, "wght" 750;
	font-size: 1.35rem;
	letter-spacing: -0.02em;
	text-transform: uppercase;
	line-height: 1.1;
	transition: color var(--pace);
}

.client-row:hover .client-name {
	color: var(--accent-ink);
}

.client-kind {
	display: block;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin-top: 0.2rem;
}

.client-desc {
	color: var(--muted);
	font-size: 0.95rem;
	text-wrap: pretty;
}

.client-go {
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	white-space: nowrap;
	color: var(--muted);
	transition: color var(--pace);
}

.client-row:hover .client-go {
	color: var(--accent-ink);
}

.img-zoom {
	background-color: transparent;
	border: 0;
	padding: 0;
	cursor: zoom-in;
}

.work-media .img-zoom {
	position: absolute;
	inset: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
}

.img-zoom:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: -2px;
}

.lightbox {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.lightbox[hidden] {
	display: none;
}

.lightbox.is-open {
	opacity: 1;
}

.lightbox-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 6, 8, 0.86);
}

.lightbox-panel {
	position: relative;
	max-width: min(90vw, 960px);
	max-height: 90vh;
	display: flex;
	flex-direction: column;
	background: var(--panel);
	border: 1px solid var(--line);
	border-radius: 4px;
	overflow: hidden;
	transform: scale(0.96) translateY(6px);
	transition: transform 0.25s ease;
}

.lightbox.is-open .lightbox-panel {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.lightbox,
	.lightbox-panel {
		transition: none;
	}

	.work-media.has-image::before,
	.client-media::before,
	.lightbox-figure::after,
	.redact-bars span::after,
	.more-mark {
		animation: none;
	}
}

.lightbox-figure {
	position: relative;
	overflow: hidden;
	min-height: 0;
}

.lightbox-img {
	display: block;
	width: min(90vw, 960px, calc(70vh * var(--shot-ratio, 1.78)));
	height: auto;
	aspect-ratio: var(--shot-ratio, 1.78);
	margin: 0 auto;
	object-fit: contain;
	background: var(--plate);
	transition: filter var(--pace), transform var(--pace);
}

.lightbox-figure.is-waiting .lightbox-img {
	filter: blur(8px);
	transform: scale(1.02);
}

.lightbox-figure::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	opacity: 0;
	visibility: hidden;
	background: linear-gradient(100deg, transparent 0 40%, color-mix(in srgb, var(--text) 9%, transparent) 50%, transparent 60% 100%);
	background-size: 200% 100%;
	animation: plate-wait 1.5s linear infinite;
	transition: opacity var(--pace), visibility 0s var(--pace);
}

.lightbox-figure.is-waiting::after {
	opacity: 1;
	visibility: visible;
	transition: opacity var(--pace);
}

.lightbox-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.4rem;
	padding: 1.1rem 1.4rem;
}

.lightbox-links:empty {
	display: none;
}

.lightbox-close {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	z-index: 1;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 6, 8, 0.6);
	color: #f5f7f9;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}

.lightbox-zoom {
	position: absolute;
	top: 0.75rem;
	right: 3.4rem;
	z-index: 1;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(5, 6, 8, 0.6);
	color: #f5f7f9;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
}

.lightbox-zoom[hidden] {
	display: none;
}

.lightbox-zoom:focus-visible {
	outline: 2px solid var(--accent-ink);
	outline-offset: 2px;
}

body.lightbox-open {
	overflow: hidden;
}

.contact-grid {
	display: grid;
	grid-template-columns: 180px 1fr;
	gap: 2rem;
	align-items: start;
}

.contact-line {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.5rem 1.25rem;
	margin-bottom: 2rem;
}

.contact-mail {
	display: inline-block;
	font-family: var(--mono);
	font-size: clamp(1.1rem, 3.4vw, 2.2rem);
	text-decoration: none;
	color: var(--text);
	border-bottom: 1px solid var(--line);
	padding-bottom: 0.4rem;
	transition: color var(--pace), border-color var(--pace);
	word-break: break-word;
}

.contact-mail:hover {
	color: var(--teal-ink);
	border-color: var(--teal-ink);
}

.copy-mail {
	background: none;
	border: 1px solid var(--line);
	border-radius: 2px;
	padding: 0.4rem 0.8rem;
	margin-bottom: 0.45rem;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--muted);
	cursor: pointer;
	transition: color var(--pace), border-color var(--pace);
}

.copy-mail:hover {
	color: var(--red-ink);
	border-color: var(--red-ink);
}

.copy-mail.is-done {
	color: var(--teal-ink);
	border-color: var(--teal-ink);
}

.social-row {
	display: flex;
	gap: 0.6rem;
}

.social-link {
	width: 42px;
	height: 42px;
	border: 1px solid var(--line);
	border-radius: 2px;
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: color var(--pace), border-color var(--pace), background var(--pace);
}

.social-link:nth-child(1) {
	--accent: var(--teal);
	--accent-ink: var(--teal-ink);
}

.social-link:nth-child(2) {
	--accent: var(--orange);
	--accent-ink: var(--orange-ink);
}

.social-link:nth-child(3) {
	--accent: var(--pink);
	--accent-ink: var(--pink-ink);
}

.social-link:hover {
	color: var(--accent-ink);
	border-color: var(--accent-ink);
	background: var(--panel);
}

.social-link.is-pending {
	color: color-mix(in srgb, var(--muted) 55%, transparent);
	border-style: dashed;
}

.social-link.is-pending:hover {
	color: color-mix(in srgb, var(--accent-ink) 65%, transparent);
	border-color: color-mix(in srgb, var(--accent-ink) 45%, var(--line));
	background: var(--panel);
}

.support-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	max-width: 60ch;
}

.support-group:nth-child(1) .tag {
	color: var(--orange-ink);
}

.support-group:nth-child(2) .tag {
	color: var(--blue-ink);
}

.support-group .tag {
	margin-bottom: 0.5rem;
	white-space: nowrap;
}

.support-group {
	display: flex;
	flex-direction: column;
}

.about-body .support-note {
	color: var(--muted);
	font-size: 1.05rem;
	line-height: 1.65;
	margin-bottom: 1.2rem;
	max-width: 40ch;
	text-wrap: pretty;
	font-variation-settings: "wdth" 100, "wght" 400;
}

.support-note small {
	color: color-mix(in srgb, var(--muted) 80%, transparent);
}

.support-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem;
	margin-top: auto;
}

.support-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid var(--line);
	border-radius: 2px;
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--text);
}

.about-body .support-link {
	transition: color var(--pace), border-color var(--pace), background var(--pace);
}

.support-group:nth-child(1) .support-links .support-link:nth-child(1) {
	--accent-ink: var(--red-ink);
}

.support-group:nth-child(1) .support-links .support-link:nth-child(2) {
	--accent-ink: var(--coral-ink);
}

.support-group:nth-child(2) .support-links .support-link:nth-child(1) {
	--accent-ink: var(--teal-ink);
}

.support-group:nth-child(2) .support-links .support-link:nth-child(2) {
	--accent-ink: var(--pink-ink);
}

.support-links .support-link:hover {
	color: var(--accent-ink);
	border-color: var(--accent-ink);
	background: var(--panel);
}

.support-link.is-pending {
	color: color-mix(in srgb, var(--muted) 55%, transparent);
	border-style: dashed;
}

.site-footer {
	border-top: 1px solid var(--line);
	padding: 2rem 0;
	font-family: var(--mono);
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--muted);
}

.footer-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem 1.5rem;
}

.footer-inner p {
	margin: 0;
}

.footer-inner a {
	text-decoration: none;
	transition: color var(--pace);
}

.footer-inner a:hover {
	color: var(--teal-ink);
}

.footer-inner .spacer {
	margin-left: auto;
}

@media (max-width: 900px) {
	.section-head,
	.about-body,
	.contact-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.support-grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.index-row {
		grid-template-columns: 1fr;
		gap: 0.5rem;
	}

	.works-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.work-card.is-feature {
		flex-direction: column;
	}

	.is-feature .work-media {
		flex: none;
		border-bottom: 1px solid var(--line);
		border-right: none;
	}

	.is-feature .work-body {
		padding: 1.5rem 1.6rem;
	}

	.client-row,
	.client-row.has-image {
		grid-template-columns: 1fr;
		gap: 0.6rem;
		padding: 1.4rem 1.5rem;
	}

	.client-media {
		margin-bottom: 0.3rem;
	}

	.client-go {
		margin-top: 0.3rem;
	}
}

@media (max-width: 620px) {
	.shell,
	.nav-inner {
		padding-left: 1.15rem;
		padding-right: 1.15rem;
	}

	.nav-inner {
		gap: 0.9rem;
	}

	.nav-links {
		gap: 0.85rem;
		font-size: 0.72rem;
		letter-spacing: 0.04em;
	}

	.nav-logo img {
		height: 17px;
	}

	.section {
		padding: 4.5rem 0;
	}

	.index-row:hover {
		margin-left: -1.15rem;
		margin-right: -1.15rem;
		padding-left: 2.4rem;
	}

	.hero {
		min-height: 88svh;
		padding-top: 6rem;
	}

	.hero-inner {
		justify-content: flex-end;
		padding-bottom: 2.5rem;
	}

	.hero-plate::after {
		background: linear-gradient(180deg, rgba(5, 7, 10, 0.5) 0%, rgba(5, 7, 10, 0.55) 20%, rgba(5, 7, 10, 0.9) 40%, rgba(5, 7, 10, 0.95) 100%);
	}

	.hero-meta {
		gap: 0.35rem 1.5rem;
		font-size: 0.68rem;
	}

	.hero-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
	}

	.hero-actions .btn {
		justify-content: center;
	}

	.works-grid {
		grid-template-columns: 1fr;
	}

	.is-feature .work-media {
		aspect-ratio: 16 / 9;
	}

	.section-head {
		margin-bottom: 2.25rem;
	}

	.client-band {
		margin-top: 2.5rem;
	}

	.see-more {
		margin-left: 0;
		align-items: flex-start;
		text-align: left;
		transform: none;
		margin-bottom: 0;
	}

	.lightbox {
		padding: 0.75rem;
	}

	.lightbox-panel {
		max-width: 100%;
	}
}

@media (max-width: 420px) {
	.nav-inner {
		gap: 0.65rem;
	}

	.nav-links {
		gap: 0.6rem;
		font-size: 0.68rem;
		letter-spacing: 0;
	}

	.nav-logo img {
		height: 15px;
	}

	.theme-toggle {
		width: 30px;
		height: 30px;
	}

	.section-head h2 {
		font-size: 1.65rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.hero-img {
		transform: none;
		transition: opacity 0.3s linear;
	}

	.hero-img.is-live {
		transform: none;
	}

	.reveal .rise,
	.js .reveal .rise.tag,
	.js .reveal .rise.client-band,
	.js .hero-inner > *,
	.js .hero-meta {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.js .index-row,
	.js .work-card,
	.js .reveal.is-visible .index-row,
	.js .reveal.is-visible .work-card {
		opacity: 1;
		animation: none;
	}

	.theme-toggle svg {
		transition: opacity 0.2s linear;
	}

	.is-theming,
	.is-theming *:not(.hero-img):not(.hero-drift):not(svg) {
		transition: none;
	}
}