*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	margin: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: var(--theme-color, #0a0a0a);
	color: #f5f5f5;
	font-family: 'Manrope', sans-serif;
	touch-action: pan-y;
}

#app,
#scene {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

#scene {
	pointer-events: none;
	touch-action: none;
}

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

.overlay-header {
	margin: 0;
	font-family: 'Syncopate', sans-serif;
	font-weight: 700;
	font-size: 0.68rem;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.overlay-subheader {
	margin: 0;
	font-family: 'Manrope', sans-serif;
	font-weight: 500;
	font-size: 10px;
	line-height: 1.4;
	letter-spacing: 0.02em;
}

#overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.6s ease;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

#overlay.is-ready {
	opacity: 1;
}

#overlay.is-ready .overlay-hit {
	pointer-events: auto;
}

.overlay-north {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.overlay-identity {
	position: absolute;
	top: max(1.25rem, env(safe-area-inset-top));
	right: max(1.25rem, env(safe-area-inset-right));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.08rem;
	text-align: right;
	max-width: min(72vw, 38rem);
	pointer-events: none;
	text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75);
}

.overlay-identity h1,
.overlay-identity h2 {
	margin: 0;
	color: #ffffff;
}

.overlay-identity h1 {
	font-size: clamp(1.55rem, 3.4vw, 2.55rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
}

.overlay-identity h2 {
	font-size: clamp(0.82rem, 1.4vw, 1.05rem);
	font-weight: 500;
	line-height: 1.05;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.overlay-categories {
	--category-bar: 6px;
	--category-bar-offset: -4px;
	position: absolute;
	top: max(1.25rem, env(safe-area-inset-top));
	left: max(1.45rem, env(safe-area-inset-left));
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: max-content;
	max-width: none;
	transition: gap 0.32s ease;
}

.overlay-categories.is-open {
	gap: 0.35rem;
}

.overlay-categories [data-skill].is-active {
	order: -1;
}

.overlay-categories [data-skill]:not(.is-active) {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	padding-top: 0;
	padding-bottom: 0;
	min-width: max-content;
	pointer-events: none;
	transition: max-height 0.32s ease, opacity 0.22s ease, padding 0.32s ease;
}

.overlay-categories.is-open [data-skill]:not(.is-active) {
	max-height: 2.4em;
	opacity: 1;
	padding-top: 0.05em;
	padding-bottom: 0.22em;
	pointer-events: auto;
}

.overlay-categories [data-skill].is-active::before {
	content: '';
	position: absolute;
	right: 0.12em;
	top: 50%;
	width: 0.8em;
	height: 0.8em;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(calc(-70% - 2px)) rotate(45deg);
	transition: transform 0.2s ease;
}

.overlay-categories.is-open [data-skill].is-active::before {
	transform: translateY(calc(-20% - 2px)) rotate(225deg);
}

.overlay-categories-bar {
	position: absolute;
	top: 0;
	left: var(--category-bar-offset);
	width: var(--category-bar);
	background: #f5f5f5;
	pointer-events: none;
	opacity: 0;
	transform: translateY(0);
}

.overlay-categories-bar.is-on {
	opacity: 1;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.overlay-categories button {
	--category-text-inset: 0.72em;
	appearance: none;
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0.05em 1.65em 0.22em var(--category-text-inset);
	border: 0;
	background: none;
	color: #ffffff;
	text-align: left;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.2s ease;
}

.overlay-categories-label {
	position: relative;
	display: inline-block;
}

.overlay-categories-line {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.22em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.28s ease, left 0.28s ease;
	pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
	.overlay-categories button:hover .overlay-categories-line {
		transform: scaleX(1);
	}

	.overlay-categories button:hover {
		color: #f5f5f5;
	}

	.overlay-contact-item:hover {
		color: #f5f5f5;
	}

	.project-panel-list a:hover,
	.project-panel-block a:hover {
		color: color-mix(in srgb, var(--project-theme) 48%, #ffffff);
	}
}

.overlay-categories button:focus-visible .overlay-categories-line {
	transform: scaleX(1);
}

.overlay-categories button.is-active .overlay-categories-label {
	position: static;
}

.overlay-categories button.is-active .overlay-categories-line {
	transform: scaleX(1);
	left: var(--category-bar-offset);
	right: 0;
	bottom: 0;
}

.overlay-categories button:focus-visible,
.overlay-categories button.is-active {
	color: #f5f5f5;
}

@media (prefers-reduced-motion: reduce) {
	.overlay-categories-bar.is-on,
	.overlay-categories-line,
	.overlay-categories,
	.overlay-categories [data-skill]:not(.is-active),
	.overlay-categories [data-skill].is-active::before,
	.thumb-title {
		transition: none;
	}
}

.overlay-south {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.9rem;
	padding: 0.85rem max(1.25rem, env(safe-area-inset-right)) max(1.25rem, env(safe-area-inset-bottom)) 1.5rem;
	transition: opacity 0.35s ease;
}

#overlay.is-project-open .overlay-project {
	position: absolute;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

.overlay-contact {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 0.85rem 1.35rem;
	margin: 0;
	font-style: normal;
	text-align: right;
}

.overlay-contact-item {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.12rem;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.2s ease;
}

.overlay-contact-item:focus-visible {
	color: #f5f5f5;
}

.overlay-project {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.2rem;
	max-width: min(70vw, 28rem);
	text-align: right;
	opacity: 0;
	transform: translateY(0.6rem);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.overlay-project.is-on {
	opacity: 1;
	transform: none;
}

.overlay-project:not(.is-on) {
	position: absolute;
	visibility: hidden;
}

.overlay-project-title {
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
}

.thumb-titles {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.thumb-title {
	--category-bar: 6px;
	--category-bar-offset: 0px;
	--category-text-inset: calc(0.72em + 4px);
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	padding: 0.05em 0 0.22em;
	color: #ffffff;
	text-align: left;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	user-select: none;
	pointer-events: none;
	transition: opacity 0.16s linear;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
	transform-origin: 0 0;
}

.thumb-title.is-on {
	visibility: visible;
	opacity: 1;
}

.thumb-title-label {
	position: relative;
	display: block;
	padding-left: var(--category-text-inset);
	overflow: hidden;
	text-overflow: ellipsis;
}

.thumb-title-bar {
	position: absolute;
	left: var(--category-bar-offset);
	bottom: 0;
	width: var(--category-bar);
	height: calc(1.08em + 7px);
	background: #f5f5f5;
	pointer-events: none;
}

.thumb-title-line {
	position: absolute;
	left: var(--category-bar-offset);
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	pointer-events: none;
}

@media (max-width: 700px) {
	.overlay-header {
		font-size: 0.58rem;
	}

	.overlay-project-title {
		font-size: 0.68rem;
	}

	.overlay-north {
		--overlay-north-left: max(1.45rem, env(safe-area-inset-left));
		--overlay-north-right: max(1.25rem, env(safe-area-inset-right));
		inset: auto;
		top: 0;
		left: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.7rem;
		padding: max(0.5rem, env(safe-area-inset-top)) var(--overlay-north-right) 0 var(--overlay-north-left);
	}

	.overlay-north:has(.overlay-categories.is-open) {
		bottom: var(--overlay-south-height, calc(5.75rem + env(safe-area-inset-bottom)));
	}

	#overlay.is-ready .overlay-north {
		pointer-events: auto;
	}

	.overlay-identity {
		position: static;
		z-index: 1;
		flex-shrink: 0;
		max-width: none;
		align-items: flex-end;
		text-align: right;
		gap: 0.08rem;
	}

	.overlay-identity h1,
	.overlay-identity h2 {
		text-align: right;
		width: 100%;
	}

	.overlay-identity h1 {
		font-size: clamp(1.15rem, 6.5vw, 1.7rem);
		margin-right: -0.1em;
	}

	.overlay-identity h2 {
		font-size: clamp(0.68rem, 3.2vw, 0.85rem);
		margin-right: -0.22em;
	}

	.overlay-categories {
		position: relative;
		top: auto;
		left: auto;
		align-self: flex-start;
		width: max-content;
		max-width: none;
		margin-top:10px;
		background: transparent;
		transition: gap 0.32s ease, background-color 0.28s ease;
	}

	.overlay-categories.is-open {
		align-self: stretch;
		flex: 1 1 auto;
		width: auto !important;
		max-width: none;
		min-height: 0;
		margin: 0;
		padding: 0 0 1rem;
		background: transparent;
		overflow: visible;
		isolation: isolate;
	}

	.overlay-categories.is-open::before,
	.overlay-categories.is-open::after {
		content: '';
		position: absolute;
		top: -0.7rem;
		right: calc(-1 * var(--overlay-north-right));
		bottom: 0;
		left: calc(-1 * var(--overlay-north-left));
		z-index: -1;
		pointer-events: none;
	}

	.overlay-categories.is-open::before {
		background: #000;
	}

	.overlay-categories.is-open::after {
		background-color: #ffffff;
		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
		-webkit-mask-size: 8px 8px;
		-webkit-mask-repeat: repeat;
		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
		mask-size: 8px 8px;
		mask-repeat: repeat;
		-webkit-mask-position: 4px 0;
		mask-position: 4px 0;
		opacity: 0.4;
	}

	.overlay-categories button {
		touch-action: manipulation;
	}

	.overlay-categories.is-open button {
		--category-text-inset: 0.4176rem;
		font-size: clamp(0.92rem, 4.1vw, 1.12rem);
		line-height: 1.2;
		padding-right: 2.1em;
	}

	.overlay-categories [data-skill]:not(.is-active) {
		min-height: 0;
	}

	.overlay-categories.is-open [data-skill]:not(.is-active) {
		max-height: 3.5rem;
		min-height: 2.75rem;
		padding-top: 0.55em;
		padding-bottom: 0.5em;
	}

	.overlay-categories button:hover .overlay-categories-line,
	.overlay-categories button:focus-visible .overlay-categories-line {
		transform: scaleX(0);
	}

	.overlay-categories button.is-active .overlay-categories-line {
		transform: scaleX(1);
	}

	.overlay-south {
		z-index: 5;
	}

	.overlay-contact {
		gap: 0.65rem 1rem;
	}

	.project-panel-title {
		font-size: clamp(1.05rem, 6vw, 1.55rem);
	}
}

.project-panel {
	--project-theme: #ffffff;
	--panel-chrome-height: 2.25rem;
	container-type: inline-size;
	container-name: project-panel;
	position: absolute;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 0 0 8px;
	color: #ffffff;
	background: rgba(0, 0, 0, 0.4);
	outline: 1px solid var(--project-theme);
	outline-offset: 0;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	overflow: hidden;
	touch-action: pan-y;
	transition: opacity 0.4s ease, visibility 0.4s ease;
}

.project-panel.is-on {
	opacity: 1;
	visibility: visible;
}

#overlay.is-ready .project-panel.is-on {
	pointer-events: auto;
}

.project-panel-chrome {
	position: relative;
	z-index: 6;
	display: flex;
	flex-direction: row;
	align-items: stretch;
	flex: 0 0 auto;
	height: var(--panel-chrome-height);
	margin-bottom: 8px;
}

.project-panel-close {
	appearance: none;
	box-sizing: border-box;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--panel-chrome-height);
	height: var(--panel-chrome-height);
	margin: 0;
	padding: 0;
	border: 0;
	border-right: 1px solid var(--project-theme);
	border-bottom: 1px solid var(--project-theme);
	background: none;
	color: #ffffff;
	cursor: pointer;
}

.project-panel-close svg {
	width: 1.15rem;
	height: 1.15rem;
}

.project-panel-close:hover,
.project-panel-close:focus-visible {
	color: #ffffff;
	opacity: 0.7;
}

.project-panel-close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.project-panel-chrome-bar {
	flex: 1 1 auto;
	min-width: 0;
	align-self: stretch;
	border: 0;
	border-bottom: 1px solid var(--project-theme);
}

.project-panel-scroll {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	padding: 0 8px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-gutter: stable;
}

.project-panel-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 1.75rem;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	padding: 0;
}

.project-panel-body::before,
.project-panel-body::after {
	content: '';
	display: block;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 100%;
	height: 8px;
	background: var(--project-theme);
	position: sticky;
	z-index: 5;
}

.project-panel-body::before {
	margin-bottom: -1.75rem;
	top: 0;
}

.project-panel-body::after {
	margin-top: auto;
	bottom: 0;
}

.project-panel-video-slot {
	position: static;
	width: 100%;
}

.project-panel-video {
	position: relative;
	top: auto;
	left: auto;
	z-index: 2;
	width: 100%;
	height: auto;
	aspect-ratio: var(--video-aspect, 16 / 9);
	margin: 0 0 0.85rem;
	overflow: hidden;
	background: #000;
	border: 1px solid var(--project-theme);
	transition: top 0.45s cubic-bezier(0.22, 1, 0.36, 1), left 0.45s cubic-bezier(0.22, 1, 0.36, 1), width 0.45s cubic-bezier(0.22, 1, 0.36, 1), height 0.45s cubic-bezier(0.22, 1, 0.36, 1), aspect-ratio 0.45s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.45s ease;
}

.project-panel-video.is-expanded {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 8;
	display: grid;
	place-items: center;
	container-type: size;
	width: 100%;
	height: 100%;
	margin: 0;
	aspect-ratio: auto;
	overflow: hidden;
	background: #000;
	border-color: transparent;
}

.project-panel-video.is-expanded::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	grid-area: 1 / 1;
	pointer-events: none;
	background-color: var(--project-theme);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 8px 8px;
	-webkit-mask-repeat: repeat;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
	mask-size: 8px 8px;
	mask-repeat: repeat;
	opacity: 0.4;
}

.project-panel-video.is-expanded .project-panel-video-poster {
	display: none;
}

.project-panel-video.is-expanded iframe {
	position: relative;
	inset: auto;
	z-index: 1;
	grid-area: 1 / 1;
	width: min(100cqw, calc(100cqh * var(--video-aspect, 16 / 9)));
	height: min(100cqh, calc(100cqw / (var(--video-aspect, 16 / 9))));
}

.project-panel:has(.project-panel-video.is-expanded) .project-panel-chrome,
.project-panel:has(.project-panel-video.is-expanded) .project-panel-body::before,
.project-panel:has(.project-panel-video.is-expanded) .project-panel-body::after {
	visibility: hidden;
	pointer-events: none;
}

.project-panel-video-poster,
.project-panel-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}

.project-panel-video-play {
	appearance: none;
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(0, 0, 0, 0.28);
	color: #ffffff;
	cursor: pointer;
}

.project-panel-video-play svg {
	width: 4.25rem;
	height: 4.25rem;
	fill: currentColor;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.55));
	transform: translateX(0.15rem);
}

.project-panel-video-play:hover,
.project-panel-video-play:focus-visible {
	background: rgba(0, 0, 0, 0.4);
}

.project-panel-video-play:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: -2px;
}

.project-panel-video-play[hidden] {
	display: none;
}

.project-panel-video-close {
	appearance: none;
	position: absolute;
	top: 0.7rem;
	left: 0.7rem;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: rgba(0, 0, 0, 0.45);
	color: #ffffff;
	cursor: pointer;
}

.project-panel-video-close svg {
	width: 1.15rem;
	height: 1.15rem;
}

.project-panel-video-close:hover,
.project-panel-video-close:focus-visible {
	background: rgba(0, 0, 0, 0.7);
}

.project-panel-video-close:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.project-panel-video-close[hidden] {
	display: none;
}

.project-panel-header {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1rem;
}

.project-panel-masthead {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.45rem;
	overflow: hidden;
	padding: 1.15rem 1.25rem 1.2rem;
	border: 1px solid var(--project-theme);
	background-color: transparent;
}

.project-panel.has-video .project-panel-masthead {
	min-height: 0;
	justify-content: flex-start;
}

.project-panel-masthead-image {
	position: absolute;
	inset: -32px;
	z-index: 0;
	width: calc(100% + 64px);
	height: calc(100% + 64px);
	max-width: none;
	object-fit: cover;
	filter: blur(12px);
	transform: scale(1.1);
	pointer-events: none;
}

.project-panel-masthead::before,
.project-panel-masthead::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.project-panel-masthead::after {
	z-index: 1;
	background: rgb(0 0 0 / 40%);
}

.project-panel-masthead::before {
	z-index: 2;
	background-color: var(--project-theme);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
	-webkit-mask-size: 8px 8px;
	-webkit-mask-repeat: repeat;
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect width='1' height='1' fill='%23000'/%3E%3C/svg%3E");
	mask-size: 8px 8px;
	mask-repeat: repeat;
	opacity: 0.4;
}

.project-panel-masthead > :not(.project-panel-masthead-image) {
	position: relative;
	z-index: 3;
}

.project-panel-title {
	margin: 0;
	font-family: 'Syncopate', sans-serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.15;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: inherit;
}

.project-panel-subtitle {
	margin: 0;
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.project-panel-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 1.35rem;
	margin: 0.35rem 0 0;
	padding: 0;
}

.project-panel-meta div {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
}

.project-panel-meta dt {
	margin: 0;
	font-family: 'Syncopate', sans-serif;
	font-weight: 700;
	font-size: 0.58rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--project-theme);
}

.project-panel-meta dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.35;
}

.project-panel-lists {
	display: flex;
	flex-direction:column;
	gap: 8px 2rem;
	max-width:1200px;
}

.project-panel-list {
	margin: 0;
	padding: 1.15rem 1.25rem 1.2rem;
	list-style: none;
	border: 1px solid var(--project-theme);
}

.project-panel-list h2,
.project-panel-block h2 {
	margin: 0 0 0.55rem;
	font-family: 'Syncopate', sans-serif;
	font-weight: 700;
	font-size: 0.68rem;
	line-height: 1.35;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--project-theme);
}

.project-panel-block h1,
.project-panel-block h3,
.project-panel-block h4,
.project-panel-block h5,
.project-panel-block h6 {
	color: var(--project-theme);
	font-weight: 700;
}

.project-panel-list ul {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.28rem 1.75rem;
	margin: 0;
	max-width:1200px;
	padding: 0;
	list-style: none;
}

.project-panel-list a,
.project-panel-block a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.18em;
	transition: color 0.2s ease;
}

.project-panel-list a:focus-visible,
.project-panel-block a:focus-visible {
	color: color-mix(in srgb, var(--project-theme) 48%, #ffffff);
	outline: 2px solid var(--project-theme);
	outline-offset: 3px;
}

.project-panel-block {
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
	font-size: 1rem;
	line-height: 1.6;
	max-width:1200px;
}

.project-panel-block p {
	margin: 0 0 0.85rem;
}

.project-panel-block p:last-child {
	margin-bottom: 0;
}

.project-panel-block ul,
.project-panel-block ol {
	margin: 0 0 0.85rem;
	padding-left: 1.2rem;
}

.project-panel-block img,
.project-panel-image {
	display: block;
	width: 100%;
	height: auto;
}

.project-panel-gallery,
.project-panel-snapshots {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.35rem;
}

.project-panel-snapshot {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 0;
	border: 1px solid var(--project-theme);
}

.project-panel-snapshot figcaption {
	font-size: 0.88rem;
	line-height: 1.45;
	opacity: 0.8;
	padding: 4px 10px 6px;
}

.project-panel-snapshot figcaption p {
	margin: 0;
}

@container project-panel (min-width: 700px) {
	.project-panel-video-slot:not(:empty) + .project-panel-body {
		max-width: calc(100% - 308px);
		margin-left: auto;
	}

	.project-panel-video:not(.is-expanded):not(.is-playing) {
		position: absolute;
		top: calc(var(--panel-chrome-height) + 8px);
		left: 8px;
		width: 300px;
		margin: 0;
	}

	.project-panel-video-slot:not(:empty) + .project-panel-body .project-panel-masthead {
		min-height: calc(300px / (var(--video-aspect, 16 / 9)) - 8px);
		justify-content: flex-end;
	}
}

@container project-panel (min-width: 800px) {

	.project-panel-list ul {
		grid-template-columns: repeat(2, 1fr);
	}
}

@container project-panel (min-width: 1300px) {

	.project-panel-list ul {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

	.project-panel-video {
		transition: none;
	}
}