/* ============================================================
   dfpsmith.com: twilight sky, heavy type, small spaced mono,
   and pixel corners on anything you can press.
   ============================================================ */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: 800;
	font-display: swap;
	src: url(/fonts/montserrat-800-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: 'Space Mono';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(/fonts/spacemono-400-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: 'Space Mono';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url(/fonts/spacemono-700-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: 'Inter';
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url(/fonts/inter-var-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;
}

/* ---------- tokens ---------- */
:root {
	--night: #0e1a2f;
	--night-2: #142440;
	--night-3: #1c3156;
	--sky: #3d7cc9;
	--sky-2: #9cc3e6;
	--peach: #f7b48c;
	--sunset: #ef7f4f;
	--gold: #e6b23c;
	--teal: #1aa39a;
	--coral: #e2553f;
	--grass: #5d8a3a;
	--cream: #fbf6ec;
	--cream-2: #f1e8d6;
	--ink: #0e1a2f;
	--ink-2: #2a3550;
	--ash: #8f9bb2;
	--ash-2: #bcc5d4;
	--ash-ink: #6c6a63;
	--line: rgba(14, 26, 47, .16);
	--line-light: rgba(251, 246, 236, .16);
	--font-display: 'Montserrat', 'Arial Black', system-ui, sans-serif;
	--font-body: 'Inter', system-ui, -apple-system, sans-serif;
	--font-mono: 'Space Mono', ui-monospace, Menlo, monospace;
	--ease: cubic-bezier(.6, .01, .05, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--pad: clamp(16px, 4.5vw, 64px);
	/* stepped "pixel" corners: two 4px steps on every corner */
	--p: 4px;
	--px-clip: polygon(0 calc(var(--p) * 2), var(--p) calc(var(--p) * 2), var(--p) var(--p), calc(var(--p) * 2) var(--p), calc(var(--p) * 2) 0,
			calc(100% - var(--p) * 2) 0, calc(100% - var(--p) * 2) var(--p), calc(100% - var(--p)) var(--p), calc(100% - var(--p)) calc(var(--p) * 2), 100% calc(var(--p) * 2),
			100% calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p) * 2), calc(100% - var(--p)) calc(100% - var(--p)), calc(100% - var(--p) * 2) calc(100% - var(--p)), calc(100% - var(--p) * 2) 100%,
			calc(var(--p) * 2) 100%, calc(var(--p) * 2) calc(100% - var(--p)), var(--p) calc(100% - var(--p)), var(--p) calc(100% - var(--p) * 2), 0 calc(100% - var(--p) * 2));
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	background: var(--night);
}

body {
	font-family: var(--font-body);
	background: var(--night);
	color: var(--cream);
	font-weight: 400;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--gold);
	color: var(--night);
}

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

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

img,
video {
	height: auto;
}

ul,
ol {
	list-style: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

h1,
h2,
h3 {
	font-weight: 800;
	line-height: 1;
}

:focus-visible {
	outline: 3px solid var(--gold);
	outline-offset: 3px;
}

.mono {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.muted {
	color: var(--ash-2);
}

.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip {
	position: fixed;
	left: 12px;
	top: -60px;
	z-index: 3000;
	background: var(--gold);
	color: var(--night);
	font-family: var(--font-mono);
	font-size: 12px;
	padding: 10px 14px;
	transition: top .2s;
}

.skip:focus {
	top: 12px;
}

/* the pixel-corner treatment */
.btn-px,
.filter,
.pillar,
.channels ol,
.wr-thumb,
.wr-award,
.about-skills li,
.drawer-credits li,
.wp-credits li,
.drawer-close,
.reel-close,
.monitor,
.hero-tag,
.motion-toggle,
.sec-label .num {
	clip-path: var(--px-clip);
}

.btn-px {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--gold);
	color: var(--night);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	padding: 14px 20px;
	transition: background .25s, transform .25s var(--ease-out);
}

.btn-px:hover {
	background: var(--peach);
	transform: translateY(-2px);
}

.btn-px.ghost {
	background: var(--night-3);
	color: var(--cream);
}

.btn-px.ghost:hover {
	background: var(--sky);
}

/* ============ LOADER ============ */
#loader {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: var(--night);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 26px;
	transition: opacity .35s var(--ease), visibility .35s;
}

#loader.done {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.no-loader #loader {
	display: none;
}

.loader-mark {
	width: 88px;
	height: 88px;
	image-rendering: pixelated;
}

.loader-bar {
	width: 160px;
	height: 4px;
	background: rgba(251, 246, 236, .15);
	overflow: hidden;
}

.loader-bar i {
	display: block;
	height: 100%;
	width: 0;
	background: var(--gold);
	animation: load .75s steps(10) forwards;
}

@keyframes load {
	to {
		width: 100%;
	}
}

/* ============ CURSOR ============ */
.cursor {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	pointer-events: none;
	mix-blend-mode: difference;
	will-change: transform;
}

#cursor-dot {
	width: 8px;
	height: 8px;
	margin: -4px 0 0 -4px;
	background: #fff;
	transition: transform .25s var(--ease-out), opacity .3s;
}

#cursor-ring {
	width: 64px;
	height: 64px;
	margin: -32px 0 0 -32px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform .35s var(--ease-out), opacity .3s;
}

#cursor-ring .cur-bg {
	position: absolute;
	width: 56px;
	height: 56px;
	border: 3px solid currentColor;
	clip-path: var(--px-clip);
	--p: 6px;
	opacity: 0;
	transform: scale(.5);
	transition: opacity .3s, transform .4s var(--ease-out);
}

#cursor-ring .cur-icon {
	width: 20px;
	height: 20px;
	margin-left: 3px;
	opacity: 0;
	transform: scale(.4);
	transition: opacity .3s, transform .4s var(--ease-out);
}

body.hov-media #cursor-ring .cur-bg,
body.hov-media #cursor-ring .cur-icon {
	opacity: 1;
	transform: scale(1);
}

body.hov-media #cursor-dot {
	opacity: 0;
}

body.hov-link #cursor-dot {
	transform: scale(2.2);
}

@media (hover:none),
(pointer:coarse) {
	.cursor {
		display: none !important;
	}
}

/* ============ NAV ============ */
#progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--gold);
	z-index: 1200;
}

.nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px var(--pad);
	color: var(--cream);
	transition: background .4s, padding .4s var(--ease-out);
}

.nav:not(.scrolled) {
	text-shadow: 0 1px 10px rgba(14, 26, 47, .55);
}

.nav.scrolled {
	background: rgba(14, 26, 47, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	padding-top: 12px;
	padding-bottom: 12px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}

.brand-logo {
	width: 30px;
	height: 30px;
}

.wordmark {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: -.01em;
}

.nav-center {
	display: flex;
	gap: clamp(16px, 2.2vw, 32px);
	align-items: center;
}

.nav-link {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	position: relative;
	padding: 4px 0;
}

.nav-link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 2px;
	background: currentColor;
	transition: width .35s steps(6);
}

.nav-link:hover::after,
.nav-link.active::after {
	width: 100%;
}

.nav-right {
	display: flex;
	align-items: center;
	gap: 22px;
}

.nav-badge,
.nav-status {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.nav-status {
	display: flex;
	align-items: center;
	gap: 8px;
}

.nav-status[hidden] {
	display: none;
}

.nav-status .dot {
	width: 8px;
	height: 8px;
	background: #4cd17f;
	animation: blink 1.2s steps(2) infinite;
}

@keyframes blink {
	50% {
		opacity: .2;
	}
}

.burger {
	width: 40px;
	height: 40px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	gap: 7px;
}

.burger span {
	width: 28px;
	height: 2px;
	background: currentColor;
	transition: transform .3s var(--ease), opacity .3s;
}

.burger span:nth-child(2) {
	display: none;
}

.burger[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(4.5px) rotate(45deg);
}

.burger[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-4.5px) rotate(-45deg);
}

.menu {
	position: fixed;
	inset: 0;
	z-index: 999;
	background: var(--night);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 90px var(--pad) var(--pad);
	gap: 8px;
	transform: translateY(-100%);
	transition: transform .6s var(--ease);
	visibility: hidden;
}

body.menu-open .menu {
	transform: translateY(0);
	visibility: visible;
}

body.menu-open {
	overflow: hidden;
}

.menu nav {
	display: flex;
	flex-direction: column;
}

.menu nav a {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(38px, 9vw, 76px);
	letter-spacing: -.01em;
	line-height: 1.06;
	opacity: .6;
	transition: opacity .3s, padding-left .4s var(--ease-out), color .3s;
}

.menu nav a:hover,
.menu nav a:focus-visible {
	opacity: 1;
	color: var(--gold);
	padding-left: 14px;
}

.menu .mm-foot {
	margin-top: 40px;
	display: flex;
	flex-wrap: wrap;
	gap: 18px 26px;
}

.menu .mm-foot a {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	opacity: .75;
}

/* ============ HERO ============ */
.hero {
	position: relative;
	height: 100vh;
	height: 100svh;
	min-height: 600px;
	overflow: hidden;
	isolation: isolate;
	color: var(--cream);
}

.hero-sky {
	position: absolute;
	inset: 0;
	z-index: -3;
	background: linear-gradient(180deg, #14316a 0%, #234f92 22%, #5d82bf 33%, #f0a283 37%, #3487bd 37.2%, #2a73a8 55%, #5f9140 55.2%, #4f7d36 100%);
}

/* a soft dusk shade over the top of the scene so the white headline, nav and name panel always read */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 60% 48% at 22% 26%, rgba(8, 16, 36, .38), rgba(8, 16, 36, 0) 100%),
		linear-gradient(180deg, rgba(8, 16, 36, .62) 0%, rgba(8, 16, 36, .44) 24%, rgba(8, 16, 36, .3) 40%, rgba(8, 16, 36, .1) 50%, rgba(8, 16, 36, 0) 58%);
	transition: opacity .35s var(--ease);
}

.hero.zoomed::after {
	opacity: 0;
}

.hero-poster {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 50% 60%;
	image-rendering: pixelated;
}

.hero-canvas {
	position: absolute;
	inset: 0;
	z-index: -1;
	opacity: 0;
	transition: opacity .9s var(--ease);
}

.hero-canvas.on {
	opacity: 1;
}

.hero-canvas canvas {
	display: block;
	width: 100% !important;
	height: 100% !important;
	image-rendering: pixelated;
}

.hero.tv-hover .hero-canvas {
	cursor: none;
}

.hero-ui {
	position: absolute;
	inset: 0;
	padding: clamp(96px, 13vh, 132px) var(--pad) clamp(28px, 5vh, 48px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto 1fr auto;
	pointer-events: none;
}

.hero-ui a,
.hero-ui button {
	pointer-events: auto;
}

.hero-ui>[data-depth] {
	will-change: transform;
}

/* during the TV zoom the copy steps aside (filter, because GSAP owns the inline opacity) */
.hero-ui {
	transition: filter .35s var(--ease);
}

.hero.zoomed .hero-ui {
	filter: opacity(0);
}

.hero.zoomed .hero-ui * {
	pointer-events: none;
}

.hero-head {
	grid-column: 1;
	grid-row: 1;
	align-self: start;
}

.hero-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(46px, 8.4vw, 136px);
	line-height: .86;
	letter-spacing: -.005em;
	text-transform: uppercase;
	text-shadow: 0 3px 0 rgba(14, 26, 47, .22), 0 12px 46px rgba(14, 26, 47, .3);
}

.hero-kicker {
	margin-top: clamp(16px, 2.4vh, 26px);
	display: flex;
	align-items: center;
	gap: .7em;
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .3em;
	text-transform: uppercase;
	text-shadow: 0 1px 2px rgba(14, 26, 47, .85), 0 1px 10px rgba(14, 26, 47, .6);
}

.hero-kicker i {
	font-style: normal;
	opacity: .7;
}

.hero-kicker::after {
	content: "";
	width: 56px;
	height: 2px;
	background: currentColor;
	margin-left: .6em;
}

.hero-rail {
	grid-column: 2;
	grid-row: 1 / 3;
	align-self: start;
	justify-self: end;
	max-width: 280px;
	padding: 16px 18px 18px;
	border-left: 3px solid var(--gold);
	background: rgba(14, 26, 47, .5);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.px-emmy {
	width: 24px;
	height: 32px;
	fill: var(--gold);
	margin-bottom: 14px;
	filter: drop-shadow(0 2px 0 rgba(14, 26, 47, .35));
}

.hero-rail h1 {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .22em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

.hero-rail .role {
	display: flex;
	flex-direction: column;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	line-height: 1.5;
	letter-spacing: .14em;
	text-transform: uppercase;
}

.hero-rail .role b {
	font-weight: 700;
	color: var(--gold);
}

.hero-rail .loc {
	opacity: .78;
}

/* "Now showing": the featured films, tuned into the TV on hover */
.channels {
	grid-column: 1;
	grid-row: 3;
	align-self: end;
	justify-self: start;
	max-width: min(400px, 100%);
}

.ch-label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .2em;
	text-transform: uppercase;
	margin-bottom: 10px;
	text-shadow: 0 1px 2px rgba(14, 26, 47, .85), 0 1px 10px rgba(14, 26, 47, .6);
}

.ch-label span {
	opacity: .7;
}

.channels ol {
	background: rgba(14, 26, 47, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	padding: 10px 8px;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.ch[hidden],
.ch.over {
	display: none;
}

.ch a {
	display: flex;
	gap: 12px;
	align-items: baseline;
	padding: 3px 8px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .04em;
	line-height: 1.3;
	color: rgba(251, 246, 236, .86);
	transition: background .15s steps(2), color .15s steps(2);
}

.ch-n {
	flex-shrink: 0;
	opacity: .55;
	letter-spacing: .1em;
}

.ch a:hover,
.ch a:focus-visible,
.ch.on a {
	background: var(--gold);
	color: var(--night);
	outline: none;
}

.ch a:hover .ch-n,
.ch.on .ch-n {
	opacity: .8;
}

.hero-cta {
	grid-column: 2;
	grid-row: 3;
	align-self: end;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 18px;
}

.watch {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .22em;
	text-transform: uppercase;
	padding: 8px 8px 8px 18px;
	background: rgba(14, 26, 47, .62);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	clip-path: var(--px-clip);
	transition: background .25s;
}

.watch:hover {
	background: rgba(14, 26, 47, .82);
}

.watch-ic {
	width: 52px;
	height: 52px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 13' shape-rendering='crispEdges'%3E%3Cpath fill='%23fbf6ec' d='M4 0h5v1H4zM2 1h2v1H2zM9 1h2v1H9zM1 2h1v2H1zM11 2h1v2h-1zM0 4h1v5H0zM12 4h1v5h-1zM1 9h1v2H1zM11 9h1v2h-1zM2 11h2v1H2zM9 11h2v1H9zM4 12h5v1H4zM5 4h1v5H5zM6 5h1v3H6zM7 6h1v1H7z'/%3E%3C/svg%3E") center / contain no-repeat;
	image-rendering: pixelated;
	transition: transform .3s var(--ease-out);
}

.watch:hover .watch-ic {
	transform: scale(1.1);
}

.motion-toggle {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	background: rgba(14, 26, 47, .62);
	padding: 8px 12px;
}

.motion-toggle[aria-pressed="true"] {
	background: var(--gold);
	color: var(--night);
}

.motion-toggle[hidden],
.tv-hit[hidden] {
	display: none;
}

.tv-hit {
	position: absolute;
	left: 0;
	top: 0;
	width: 10px;
	height: 10px;
	opacity: 0;
	pointer-events: none;
}

.tv-hit:focus-visible {
	opacity: 1;
	outline: 3px solid var(--gold);
	outline-offset: 0;
}

.hero-tag {
	position: absolute;
	left: 0;
	top: 0;
	padding: 6px 10px;
	background: var(--night);
	color: var(--cream);
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	opacity: 0;
	transition: opacity .15s steps(2);
}

.hero-tag.on {
	opacity: 1;
}

/* ---------- pixel ridge dividers (generated by build.mjs) ---------- */
.ridge {
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: clamp(36px, 5.5vw, 84px);
	pointer-events: none;
	z-index: 2;
}

.r-night path {
	fill: var(--night);
}

.r-cream path {
	fill: var(--cream);
}

.r-dusk path {
	fill: #13284d;
}

/* ============ INTRO ============ */
.intro {
	background: var(--night);
	padding: clamp(56px, 8vw, 110px) var(--pad) clamp(64px, 8vw, 110px);
}

.intro-grid {
	display: grid;
	grid-template-columns: 1.35fr 1fr;
	gap: clamp(28px, 5vw, 90px);
	align-items: end;
}

.intro-lead {
	font-size: clamp(22px, 2.6vw, 38px);
	line-height: 1.22;
	letter-spacing: -.02em;
	font-weight: 400;
}

.intro-side p {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.65;
}

.cta-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 26px;
}

.cta-row a {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-bottom: 2px dotted var(--line-light);
	padding-bottom: 6px;
	width: fit-content;
	transition: padding-left .3s var(--ease-out), color .3s;
}

.cta-row a:hover {
	padding-left: 10px;
	color: var(--gold);
}

/* ============ MARQUEE ============ */
.marquee {
	overflow: hidden;
	padding: 16px 0;
	background: var(--sunset);
	color: var(--night);
}

.marquee-track {
	display: flex;
	gap: 44px;
	white-space: nowrap;
	width: max-content;
	will-change: transform;
}

.marquee-track span {
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(17px, 2.1vw, 26px);
	display: flex;
	align-items: center;
	gap: 44px;
}

.marquee-track span::after,
.clients-track li::after {
	content: "";
	width: 12px;
	height: 12px;
	background: currentColor;
	clip-path: polygon(33% 0, 67% 0, 67% 33%, 100% 33%, 100% 67%, 67% 67%, 67% 100%, 33% 100%, 33% 67%, 0 67%, 0 33%, 33% 33%);
}

/* ============ SECTIONS ============ */
.sec {
	position: relative;
	padding: clamp(84px, 11vw, 160px) var(--pad);
}

.sec-tight {
	padding-top: 0;
}

.night {
	background: var(--night);
	color: var(--cream);
}

.cream {
	background: var(--cream);
	color: var(--ink);
}

.cream .muted {
	color: var(--ash-ink);
}

.sec-head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "label label" "title tag";
	gap: 20px 40px;
	align-items: end;
	padding-bottom: 26px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.sec-head::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 4px;
	background: linear-gradient(90deg, currentColor 50%, transparent 0) 0 0 / 8px 4px repeat-x;
	opacity: .22;
}

.sec-label {
	grid-area: label;
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.sec-label h2 {
	font: inherit;
	font-weight: 700;
	letter-spacing: inherit;
}

.sec-label .num {
	background: var(--gold);
	color: var(--night);
	font-weight: 700;
	padding: 5px 8px 4px;
	--p: 3px;
}

.sec-title {
	grid-area: title;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(38px, 6.6vw, 100px);
	line-height: .88;
	letter-spacing: -.005em;
	text-transform: uppercase;
}

.sec-head .tag {
	grid-area: tag;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	max-width: 280px;
	text-align: right;
	line-height: 1.75;
	color: var(--ash-2);
}

.cream .sec-head .tag {
	color: var(--ash-ink);
}

/* ============ BRIEF ============ */
.brief-intro {
	max-width: 980px;
	margin-bottom: clamp(48px, 6vw, 80px);
}

.brief-intro p {
	font-size: clamp(22px, 3vw, 40px);
	line-height: 1.2;
	letter-spacing: -.02em;
}

.brief-intro em {
	font-style: normal;
	color: var(--sunset);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.pillar {
	--p: 6px;
	background: var(--cream-2);
	padding: 30px 28px 32px;
	min-height: 290px;
	display: flex;
	flex-direction: column;
	transition: background .3s, transform .4s var(--ease-out);
}

.pillar:hover {
	background: #ebe0ca;
	transform: translateY(-4px);
}

.pillar .pnum {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ash-ink);
	margin-bottom: 34px;
}

.pillar h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(20px, 1.9vw, 26px);
	margin-bottom: 14px;
}

.pillar p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-2);
	margin-top: auto;
}

.pillar .pmap {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--coral);
	margin-top: 16px;
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	margin-top: clamp(48px, 6vw, 80px);
}

.stat {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 18px;
	border-top: 4px solid var(--night);
}

.stat .v {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(44px, 5.6vw, 80px);
	line-height: .9;
	color: var(--night);
}

.stat .k {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ash-ink);
	line-height: 1.5;
}

/* ============ WORK ============ */
.work-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 36px;
}

.filter {
	--p: 3px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 10px 16px;
	background: var(--night-3);
	color: var(--ash-2);
	white-space: nowrap;
	transition: background .2s steps(2), color .2s steps(2);
}

.filter:hover {
	color: var(--cream);
	background: #27406b;
}

.filter.active {
	background: var(--gold);
	color: var(--night);
}

.work-grid {
	border-top: 1px solid var(--line-light);
}

.work-row[hidden] {
	display: none;
}

.work-row>a {
	display: grid;
	grid-template-columns: 34px 112px minmax(0, 1.6fr) minmax(0, 1.05fr) minmax(0, 1fr) 24px;
	gap: 22px;
	align-items: center;
	padding: 16px 6px;
	border-bottom: 1px solid var(--line-light);
	transition: padding .45s var(--ease-out), background .3s;
}

.work-row>a:hover,
.work-row>a:focus-visible {
	padding-left: 18px;
	padding-right: 18px;
	background: rgba(251, 246, 236, .035);
}

.wr-idx {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ash);
}

.wr-thumb {
	--p: 3px;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--night-3);
	overflow: hidden;
}

.wr-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .82;
	transition: opacity .3s, transform .6s var(--ease-out);
}

.work-row>a:hover .wr-thumb img {
	opacity: 1;
	transform: scale(1.06);
}

.wr-main {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

.wr-title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(18px, 2.05vw, 28px);
	line-height: 1.05;
	letter-spacing: -.01em;
	transition: color .25s;
}

.work-row>a:hover .wr-title {
	color: var(--gold);
}

.wr-award {
	--p: 2px;
	font-family: var(--font-mono);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--night);
	background: var(--peach);
	padding: 3px 7px;
}

.wr-client {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ash-2);
	line-height: 1.5;
}

.wr-role {
	font-size: 12.5px;
	color: var(--ash-2);
	line-height: 1.45;
}

.wr-plus {
	justify-self: end;
	width: 16px;
	height: 16px;
	background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat, linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
	opacity: .5;
	transition: transform .4s var(--ease), opacity .3s;
}

.work-row>a:hover .wr-plus {
	opacity: 1;
	transform: rotate(90deg);
	color: var(--gold);
}

#work-preview {
	position: fixed;
	z-index: 800;
	width: 300px;
	aspect-ratio: 16 / 9;
	pointer-events: none;
	opacity: 0;
	overflow: hidden;
	background: #000;
	border: 4px solid var(--cream);
	transform: translate(18px, -50%) scale(.92);
	transition: opacity .3s var(--ease), transform .45s var(--ease-out);
}

#work-preview.show {
	opacity: 1;
	transform: translate(18px, -50%) scale(1);
}

#work-preview video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (hover:none) {
	#work-preview {
		display: none;
	}
}

/* ============ WEBSITES + AWARDS ============ */
.awards-list {
	border-top: 1px solid var(--line-light);
}

.award .row-in {
	display: grid;
	grid-template-columns: 70px minmax(0, 1.25fr) minmax(0, 1.25fr) 220px;
	gap: 24px;
	align-items: center;
	padding: 24px 6px;
	border-bottom: 1px solid var(--line-light);
	transition: padding .4s var(--ease-out), background .3s;
}

.award a.row-in:hover,
.award a.row-in:focus-visible {
	padding-left: 18px;
	background: rgba(251, 246, 236, .035);
}

.award .a-yr {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--ash-2);
}

.award .a-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(17px, 2vw, 26px);
	line-height: 1.1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

.award .star {
	width: 14px;
	height: 14px;
	background: var(--gold);
	flex-shrink: 0;
	clip-path: polygon(40% 0, 60% 0, 60% 30%, 100% 30%, 100% 50%, 75% 50%, 75% 70%, 85% 70%, 85% 100%, 65% 100%, 65% 85%, 35% 85%, 35% 100%, 15% 100%, 15% 70%, 25% 70%, 25% 50%, 0 50%, 0 30%, 40% 30%);
}

.award .a-kind {
	font-family: var(--font-mono);
	font-size: 9px;
	letter-spacing: .1em;
	text-transform: uppercase;
	background: var(--teal);
	color: var(--night);
	padding: 3px 7px;
	clip-path: var(--px-clip);
	--p: 2px;
}

.award .a-proj {
	font-size: 13.5px;
	color: var(--ash-2);
	line-height: 1.5;
}

.award .a-role {
	display: block;
	margin-top: 8px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gold);
}

.award .a-client {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--ash);
	text-align: right;
	line-height: 1.5;
}

.award a.row-in:hover .a-client {
	color: var(--cream);
}

.site .row-in {
	grid-template-columns: 70px minmax(0, .9fr) minmax(0, 1.5fr) 220px;
}

/* ============ CLIENTS ============ */
.clients-wrap {
	overflow: hidden;
	padding: 34px 0;
	border-top: 1px solid var(--line-light);
	border-bottom: 1px solid var(--line-light);
}

.clients-track {
	display: flex;
	gap: 56px;
	width: max-content;
	align-items: center;
	will-change: transform;
}

.clients-track li {
	display: flex;
	align-items: center;
	gap: 56px;
	font-family: var(--font-display);
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(22px, 3vw, 40px);
	color: var(--ash);
	white-space: nowrap;
	transition: color .3s;
}

.clients-track li::after {
	color: var(--gold);
}

.clients-track li:hover {
	color: var(--cream);
}

.clients-note {
	margin-top: 30px;
	max-width: 640px;
	font-size: 15.5px;
	line-height: 1.65;
	color: var(--ash-2);
	padding-bottom: clamp(60px, 8vw, 110px);
}

/* ============ ABOUT ============ */
.about-grid {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
	gap: clamp(30px, 6vw, 96px);
	align-items: start;
}

.about-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	margin: 0 14px 14px 0;
}

.about-portrait::before {
	content: "";
	position: absolute;
	inset: 14px -14px -14px 14px;
	background: var(--sunset);
	clip-path: var(--px-clip);
	--p: 6px;
}

.about-portrait img {
	position: relative;
	width: 100%;
	height: 100%;
	object-fit: cover;
	clip-path: var(--px-clip);
	--p: 6px;
	filter: grayscale(1) contrast(1.03);
	transition: filter .6s;
}

.about-portrait:hover img {
	filter: none;
}

.about-portrait .tag {
	position: absolute;
	left: 18px;
	bottom: 18px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cream);
	text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}

.about-copy h3 {
	font-family: var(--font-display);
	text-transform: uppercase;
	font-size: clamp(26px, 3.4vw, 46px);
	line-height: .98;
	margin-bottom: 26px;
}

.about-copy p {
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.72;
	color: var(--ink-2);
	margin-bottom: 20px;
}

.about-copy p.muted {
	color: var(--ash-ink);
}

.about-copy a {
	border-bottom: 2px solid var(--sunset);
}

.about-copy .hl {
	color: var(--ink);
	font-weight: 600;
}

.about-skills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 30px;
}

.about-skills li {
	--p: 3px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--cream-2);
	padding: 8px 12px;
}

.career {
	margin-top: clamp(50px, 7vw, 96px);
	padding-bottom: clamp(50px, 7vw, 100px);
}

.career-head {
	font-family: var(--font-mono);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ash-ink);
	padding: 0 4px 14px;
}

.career-row {
	display: grid;
	grid-template-columns: 132px minmax(0, 1.15fr) minmax(0, 1.5fr);
	gap: 26px;
	align-items: baseline;
	padding: 24px 4px;
	border-top: 1px solid var(--line);
	transition: padding .45s var(--ease-out), background .3s;
}

.career-row:hover {
	padding-left: 14px;
	background: var(--cream-2);
}

.c-yr {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--ash-ink);
}

.c-role {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(17px, 1.7vw, 22px);
	line-height: 1.12;
}

.c-role b {
	display: block;
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--coral);
	margin-top: 7px;
}

.c-desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}

/* ============ CONTACT ============ */
.dusk {
	background: linear-gradient(180deg, #13284d 0%, #1f4479 40%, #2f62a6 78%, #4f82c2 100%);
	color: var(--cream);
}

.contact {
	text-align: center;
	padding-bottom: clamp(130px, 14vw, 200px);
}

.contact .sec-label {
	justify-content: center;
	margin-bottom: 30px;
}

.contact .sec-title {
	font-size: clamp(40px, 8.6vw, 136px);
	text-shadow: 0 4px 0 rgba(14, 26, 47, .25);
}

.contact-line {
	max-width: 620px;
	margin: 34px auto 0;
	font-size: clamp(16px, 1.3vw, 19px);
	line-height: 1.55;
}

.contact .email {
	display: inline-block;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(22px, 3.6vw, 46px);
	margin: 28px 0 10px;
	padding-bottom: 8px;
	background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 4px no-repeat;
	transition: background-size .5s steps(8);
}

.contact .email:hover {
	background-size: 100% 4px;
}

.contact .lns {
	display: flex;
	gap: 14px 28px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 34px;
}

.contact .lns a {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .85;
	transition: opacity .3s, color .3s;
}

.contact .lns a:hover {
	opacity: 1;
	color: var(--gold);
}

/* ============ FOOTER ============ */
.foot {
	background: var(--night);
	color: var(--ash);
	padding: 30px var(--pad);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}

.foot .mono {
	font-size: 10.5px;
}

.to-top:hover {
	color: var(--cream);
}

/* ============ DRAWER ============ */
#drawer {
	position: fixed;
	inset: 0;
	z-index: 2000;
	pointer-events: none;
	visibility: hidden;
}

#drawer.open {
	pointer-events: auto;
	visibility: visible;
}

.drawer-scrim {
	position: absolute;
	inset: 0;
	background: rgba(6, 11, 22, .66);
	opacity: 0;
	transition: opacity .5s var(--ease);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

#drawer.open .drawer-scrim {
	opacity: 1;
}

.drawer-panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 660px;
	max-width: 100%;
	background: var(--night-2);
	color: var(--cream);
	transform: translateX(100%);
	transition: transform .6s var(--ease), width .6s var(--ease-out);
	overflow-y: auto;
	overscroll-behavior: contain;
}

#drawer.open .drawer-panel {
	transform: translateX(0);
}

#drawer.playing .drawer-panel {
	width: 62vw;
}

.drawer-media {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-bottom: 10px solid #090f1c;
}

.drawer-media video,
.drawer-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.drawer-media video {
	display: none;
	object-fit: contain;
	background: #000;
}

.drawer-close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 5;
	width: 44px;
	height: 44px;
	background: rgba(14, 26, 47, .8);
	color: var(--cream);
	font-family: var(--font-mono);
	transition: background .2s;
}

.drawer-close:hover {
	background: var(--coral);
}

.drawer-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 4;
	width: 100%;
}

.drawer-play[hidden] {
	display: none;
}

.drawer-play .pbtn,
.play-btn {
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--gold);
	clip-path: var(--px-clip);
	--p: 8px;
	transition: transform .3s var(--ease-out), background .2s;
}

.drawer-play:hover .pbtn,
.yt-facade:hover .play-btn {
	transform: scale(1.08);
	background: var(--peach);
}

.drawer-play svg {
	width: 26px;
	height: 26px;
	fill: var(--night);
	margin-left: 4px;
}

.drawer-body {
	padding: 38px clamp(24px, 4vw, 52px) 70px;
}

.d-client,
.wp-client {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 14px;
}

.drawer-body h3 {
	font-family: var(--font-display);
	font-size: clamp(28px, 4vw, 44px);
	line-height: 1;
	margin-bottom: 24px;
}

.drawer-credits,
.wp-credits {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 28px;
}

.drawer-credits li,
.wp-credits li {
	--p: 3px;
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
	background: var(--night-3);
	padding: 7px 11px;
}

.d-desc {
	font-size: 16px;
	line-height: 1.72;
	color: var(--ash-2);
	margin-bottom: 28px;
}

.d-link {
	margin-bottom: 28px;
}

.d-link[hidden] {
	display: none;
}

.drawer-meta-grid,
.wp-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 28px;
}

.drawer-meta-grid>div,
.wp-meta>div {
	border-top: 2px solid var(--line-light);
	padding-top: 12px;
}

.mk,
.wp-meta dt {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--ash);
	margin-bottom: 6px;
}

.mv,
.wp-meta dd {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
}

.drawer-nav {
	display: flex;
	justify-content: space-between;
	border-top: 1px solid var(--line-light);
	padding-top: 22px;
}

.drawer-nav button {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: color .2s;
}

.drawer-nav button:hover {
	color: var(--gold);
}

.drawer-nav button:disabled {
	opacity: .3;
	cursor: default;
	color: inherit;
}

/* ============ REEL PLAYER (the end of the TV zoom) ============ */
.reel {
	position: fixed;
	inset: 0;
	z-index: 2500;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .25s var(--ease);
}

.reel[hidden] {
	display: none;
}

.reel.show {
	opacity: 1;
}

.reel-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(5, 9, 18, .94);
}

.reel.from-tv .reel-backdrop {
	background: rgba(5, 9, 18, .6);
}

.reel-box {
	position: relative;
	width: min(92vw, calc(86vh * 16 / 9));
	aspect-ratio: 16 / 9;
	background: #000;
}

.reel-box video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}

.reel-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 48px;
	height: 48px;
	background: var(--gold);
	color: var(--night);
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 16px;
}

.reel-close:hover {
	background: var(--peach);
}

/* ============ WORK PAGES ============ */
.wp {
	min-height: 100vh;
	padding: clamp(110px, 14vw, 150px) var(--pad) clamp(70px, 9vw, 120px);
}

.wp-inner {
	max-width: 1120px;
	margin: 0 auto;
}

.wp-back {
	display: inline-block;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 34px;
	transition: color .2s, padding .3s var(--ease-out);
}

.wp-back:hover {
	color: var(--gold);
	padding-right: 8px;
}

.wp-title {
	font-family: var(--font-display);
	font-size: clamp(34px, 5.6vw, 76px);
	line-height: .98;
	letter-spacing: -.01em;
	margin-bottom: 26px;
	max-width: 18ch;
}

.monitor {
	--p: 8px;
	background: #070c17;
	padding: clamp(8px, 1.2vw, 14px);
}

.wp-media {
	margin-bottom: clamp(30px, 4vw, 50px);
}

.wp-media img,
.wp-media video,
.yt-facade {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #000;
}

.wp-media video {
	object-fit: contain;
}

.yt-facade {
	position: relative;
}

.yt-facade .play-btn {
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -38px 0 0 -38px;
}

.yt-facade .play-btn::before {
	content: "";
	width: 0;
	height: 0;
	margin-left: 6px;
	border-style: solid;
	border-width: 13px 0 13px 22px;
	border-color: transparent transparent transparent var(--night);
}

.yt-facade iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.wp-body {
	display: grid;
	grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
	gap: clamp(28px, 5vw, 80px);
	align-items: start;
}

.wp-desc {
	font-size: clamp(17px, 1.4vw, 20px);
	line-height: 1.65;
	color: var(--ash-2);
}

.wp-side .btn-px {
	margin-top: 4px;
}

.wp-meta {
	grid-template-columns: 1fr;
}

.wp-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: clamp(50px, 7vw, 90px);
	padding-top: 26px;
	border-top: 1px solid var(--line-light);
}

.wp-nav a {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: 46%;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(16px, 1.7vw, 22px);
	line-height: 1.1;
	transition: color .2s;
}

.wp-nav a .mono {
	font-weight: 400;
	color: var(--ash);
}

.wp-nav .wp-next {
	text-align: right;
	margin-left: auto;
}

.wp-nav a:hover {
	color: var(--gold);
}

.page-work .nav {
	background: rgba(14, 26, 47, .88);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

.nf .btn-px {
	margin: 30px 10px 0 0;
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1180px) {
	.nav-center {
		display: none;
	}

	.work-row>a {
		grid-template-columns: 30px 104px minmax(0, 1.6fr) minmax(0, 1fr) 24px;
	}

	.wr-role {
		display: none;
	}
}

@media (max-width: 900px) {
	.nav-badge {
		display: none;
	}

	/* phones: headline up top, the scene (and the kite's sky) in the middle, the name panel under it */
	.hero-ui {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: auto 1fr auto auto auto;
	}

	.hero-rail {
		grid-column: 1;
		grid-row: 3;
		align-self: end;
		justify-self: start;
		margin: 0 0 14px;
		max-width: 100%;
		padding: 10px 14px 12px;
	}

	.px-emmy,
	.hero-rail #role-line-1,
	.hero-rail #role-line-2 {
		display: none;
	}

	.hero-rail h1 {
		margin-bottom: 6px;
	}

	.hero-rail .role {
		gap: 4px;
	}

	.channels {
		grid-row: 4;
		max-width: 100%;
		width: 100%;
		margin-bottom: 14px;
	}

	.ch-label span {
		display: none;
	}

	.channels ol {
		flex-direction: row;
		overflow-x: auto;
		scrollbar-width: none;
		gap: 6px;
		padding: 8px;
	}

	.channels ol::-webkit-scrollbar {
		display: none;
	}

	.ch a {
		white-space: nowrap;
		background: rgba(251, 246, 236, .08);
	}

	.hero-cta {
		grid-column: 1;
		grid-row: 5;
		justify-self: stretch;
		justify-content: space-between;
	}

	.intro-grid,
	.wp-body {
		grid-template-columns: 1fr;
	}

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

	.award .row-in,
	.site .row-in {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 8px 18px;
	}

	.award .a-proj,
	.award .a-client {
		grid-column: 2;
		text-align: left;
	}

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

	.about-portrait {
		max-width: 360px;
	}

	#drawer.playing .drawer-panel {
		width: 100%;
	}
}

@media (max-width: 680px) {
	.sec-head {
		grid-template-areas: "label" "title";
		grid-template-columns: 1fr;
	}

	.sec-head .tag {
		display: none;
	}

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

	.pillar {
		min-height: 0;
	}

	.stats {
		grid-template-columns: 1fr 1fr;
		gap: 26px 14px;
	}

	.work-row>a {
		grid-template-columns: 96px minmax(0, 1fr) 18px;
		gap: 14px;
		padding: 14px 2px;
	}

	.wr-idx,
	.wr-client {
		display: none;
	}

	.career-row {
		grid-template-columns: 1fr;
		gap: 7px;
		padding: 20px 4px;
	}

	.foot {
		flex-direction: column;
		align-items: flex-start;
	}

	.wp-nav {
		flex-direction: column;
	}

	.wp-nav a {
		max-width: none;
	}
}

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

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.loader-bar i {
		width: 100%;
	}
}