.portfolio {
	position: relative;
	padding-block: var(--air-6);
}
.portfolio .section-label {
	margin-top: var(--sp-5);
	margin-bottom: var(--air-6);
}
.marquee {
	overflow: hidden;
	margin-block: var(--air-1);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: marquee-run var(--marquee-dur, 60s) linear infinite;
}
@keyframes marquee-run {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.marquee--reverse .marquee__track { animation-direction: reverse; }
.marquee__item {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	flex: none;
	padding-inline-end: var(--gap, var(--air-5));
	font-size: var(--fs-2);
	letter-spacing: normal;
	color: var(--ink-2);
	white-space: nowrap;
}
.marquee__item img,
.marquee__item .marquee__mark {
	height: 1.5rem;
	width: auto;
	max-width: 7.375rem;
	flex: none;
	opacity: 0.82;
}
.marquee__item img {
	object-fit: contain;
}
.marquee__item--brand .marquee__mark {
	color: color-mix(in srgb, var(--brand, currentColor) 65%, var(--ink));
}
.marquee__item--own img {
	filter: saturate(0.65) brightness(0.85);
}
.marquee__item--tall img,
.marquee__item--tall .marquee__mark {
	height: 2.75rem;
}
.marquee__mark {
	display: block;
	background: currentColor;
	aspect-ratio: var(--mark-ratio, 1);
	-webkit-mask: var(--mark) no-repeat center / contain;
	mask: var(--mark) no-repeat center / contain;
}
@media (prefers-reduced-motion: reduce) {
	.marquee__track { animation: none; }
}
.marquee--projects {
	position: relative;
	-webkit-mask-image: none;
	mask-image: none;
	touch-action: pan-y;
}
.marquee--projects:focus-visible {
	outline: calc(2 * var(--px)) solid var(--ink);
	outline-offset: calc(4 * var(--px));
	border-radius: var(--r-md);
}
.marquee--projects.is-driven .marquee__track {
	animation: none;
	will-change: transform;
}
.marquee--projects { --slide-w: min(75rem, 88vw); }
.marquee__slide {
	flex: none;
	width: var(--slide-w, min(75rem, 88vw));
	padding-inline-end: var(--sp-5);
}
.marquee--projects {
	--lead: calc((100% - var(--slide-w) + var(--sp-5)) / 2);
}
.marquee__nav {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	place-items: center;
	width: 3rem;
	height: 4.5rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--fill);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: color 0.18s ease;
	-webkit-tap-highlight-color: transparent;
}
.marquee--projects.is-driven .marquee__nav { display: grid; }
.marquee__nav svg {
	width: 2rem;
	height: 2rem;
	overflow: visible;
	transition: transform 0.18s var(--ease);
}
.marquee__nav path { stroke-width: 3; }
@media (hover: hover) and (pointer: fine) {
	.marquee__nav:hover { color: var(--ember-70); }
	.marquee__nav--prev:hover svg { transform: translateX(calc(-3 * var(--px))); }
	.marquee__nav--next:hover svg { transform: translateX(calc(3 * var(--px))); }
}
.marquee__nav--prev:active svg { transform: translateX(calc(-3 * var(--px))); }
.marquee__nav--next:active svg { transform: translateX(calc(3 * var(--px))); }
.marquee--projects { --nav-x: min(var(--lead) / 2, 3rem); }
.marquee__nav--prev { left: var(--nav-x); }
.marquee__nav--next { left: calc(100% - var(--nav-x)); }
.marquee--projects.is-driven::before,
.marquee--projects.is-driven::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 1;
	width: var(--lead);
	pointer-events: none;
}
.marquee--projects.is-driven::before {
	left: 0;
	background: linear-gradient(90deg, var(--field) 60%, transparent);
}
.marquee--projects.is-driven::after {
	right: 0;
	background: linear-gradient(270deg, var(--field) 60%, transparent);
}
@media (min-width: 901px) {
	.marquee__nav {
		width: 4rem;
		height: 6rem;
	}
	.marquee__nav svg {
		width: 2.75rem;
		height: 2.75rem;
	}
	.marquee--projects {
		--fog:
			color-mix(in srgb, var(--field) 95%, transparent) 0%,
			color-mix(in srgb, var(--field) 89%, transparent) 15%,
			color-mix(in srgb, var(--field) 75%, transparent) 30%,
			color-mix(in srgb, var(--field) 55%, transparent) 45%,
			color-mix(in srgb, var(--field) 33%, transparent) 60%,
			color-mix(in srgb, var(--field) 15%, transparent) 75%,
			color-mix(in srgb, var(--field) 3%, transparent) 90%,
			transparent 100%;
	}
	.marquee--projects.is-driven::before { background: linear-gradient(90deg, var(--fog)); }
	.marquee--projects.is-driven::after { background: linear-gradient(270deg, var(--fog)); }
}
.marquee--projects .marquee__track { align-items: stretch; }
.marquee--projects .project { height: 100%; }
.project__aside {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}
.project__note { flex: 1 0 auto; }
.project {
	display: grid;
	grid-template-columns: minmax(13.75rem, 1fr) minmax(0, 2.4fr) minmax(12.5rem, 1fr);
	gap: var(--air-3);
	align-items: start;
	padding: var(--air-3);
	background: var(--field);
	border: 1px solid var(--edge);
	border-radius: var(--r-lg);
}
.project__name {
	font-size: var(--fs-7);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--edge);
}
.project__note {
	margin-top: var(--sp-4);
	font-size: var(--fs-4);
	color: var(--ink-2);
}
.project__note::before,
.project__note::after {
	color: var(--ember-60);
}
.project__note::before { content: "/* "; }
.project__note::after  { content: " */"; }
.project__shot img,
.project__shot-placeholder {
	width: 100%;
	height: auto;
	aspect-ratio: 710 / 403;
	object-fit: cover;
	border-radius: var(--r-md);
	background: color-mix(in srgb, var(--edge) 45%, var(--field));
	border: 1px solid var(--edge);
	display: block;
}
.project__meta {
	--punct: color-mix(in srgb, var(--field) 60%, transparent);
	align-self: stretch;
	padding: var(--air-2);
	border-radius: var(--r-md);
	background: var(--ink);
	color: var(--field);
}
.project__kicker {
	font-size: var(--fs-4);
	font-weight: var(--fw-medium);
	color: var(--field);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--on-ink-rule);
}
.spec { margin-top: var(--sp-4); }
.spec__key {
	font-size: var(--fs-4);
	font-weight: var(--fw-medium);
	color: var(--field);
}
.spec__key::after,
.spec__close::before {
	color: var(--punct);
	font-weight: var(--fw-text);
}
.spec__key::after   { content: "{"; }
.spec__close::before { content: "}"; }
.spec__body {
	margin-left: var(--sp-1);
	padding-left: var(--sp-3);
	border-left: 1px solid var(--on-ink-rule);
}
.spec__val {
	margin-block: var(--sp-2);
	font-size: var(--fs-3);
	color: var(--amber-40);
}
.spec__val--stack span {
	display: block;
}
.spec__val--stack span::before,
.spec__val--stack span::after {
	color: var(--punct);
}
.spec__val--stack span:first-child::before { content: "/"; }
.spec__val--stack span:last-child::after   { content: "/"; }
.spec__val--stack span + span::before      { content: "+ "; }
.spec--inner { margin-top: var(--sp-4); }
.spec__close {
	margin-left: var(--sp-1);
	font-size: var(--fs-4);
	line-height: var(--lh-flat);
}
@media (max-width: 900px) {
	.marquee__slide { width: min(75rem, 88vw); }
	.project {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--sp-4);
		padding: var(--sp-4);
	}
	.project__shot { order: -1; }
	.project { grid-template-rows: auto 1fr; }
	.project__name {
		font-size: var(--fs-6);
	}
	.project__meta { display: none; }
}
.project__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: var(--sp-5);
	color: var(--ember-60);
	font-size: var(--fs-4);
	font-weight: var(--fw-medium);
	transition: color 0.18s ease;
}
.project__more::after {
	content: "→";
	transition: transform 0.18s var(--ease), color 0.18s ease;
}
.project__more:hover::after,
.project__more:focus-visible::after { color: var(--ember-50); }
.project__more:hover,
.project__more:focus-visible {
	color: var(--ember-70);
}
.project__more:hover::after,
.project__more:focus-visible::after {
	transform: translateX(calc(3 * var(--px)));
}
.marquee--still .marquee__track {
	width: auto;
	animation: none;
	transform: none;
	justify-content: center;
	flex-wrap: wrap;
}