.cv-projects { --cv-project-text: var(--color-darkblue-950); --cv-project-muted: var(--color-darkblue-600); --cv-content-width: calc(var(--container-width) - var(--control-padding-inline-md) - var(--control-gap-md) - var(--control-gap-sm)); width: 100vw; max-width: none; margin-left: calc(50% - 50vw); background: var(--color-orange-dark-25); color: var(--cv-project-text); }
.cv-page__body > .cv-projects { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.cv-projects__inner { width: 100%; max-width: var(--cv-content-width); margin: 0 auto; padding: calc(var(--surface-padding-md) * 2 + var(--control-padding-inline-md)) var(--spacing-xl) 0; box-sizing: border-box; }
.cv-projects__header { display: flex; align-items: flex-start; flex-direction: column; justify-content: space-between; gap: var(--spacing-4xl); margin-bottom: var(--spacing-none); }
.cv-projects__header h2 { margin: 0; color: var(--color-warm-gray-200); font: var(--font-display-xl-semibold); letter-spacing: var(--tracking-display-xl); }
.cv-projects__work-link { flex: 0 0 auto; padding: var(--control-padding-block) var(--surface-padding-md); border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-darkblue-200) 43%, transparent); border-radius: var(--control-radius-md); color: color-mix(in srgb, var(--color-darkblue-950) 50%, transparent); font: var(--font-text-md-medium); text-decoration: none; transition: border-color 180ms ease; }
.cv-projects__work-link:hover, .cv-projects__work-link:focus-visible { border-color: currentColor; }
.cv-project-card { display: flex; flex-direction: column; gap: var(--surface-padding-md); width: 100vw; margin-left: calc(50% - 50vw); padding: calc(var(--surface-padding-md) * 2 + var(--control-padding-inline-md)) var(--spacing-xl); box-sizing: border-box; }
.cv-project-card__media { flex: 0 0 auto; width: 100%; aspect-ratio: 765 / 771; overflow: hidden; border-radius: var(--surface-radius-lg); }
.cv-project-card__visual { display: block; width: 100%; height: 100%; object-fit: contain; }
.cv-project-card__content { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; gap: var(--spacing-4xl); }
.cv-project-card__copy { display: flex; flex-direction: column; gap: var(--surface-padding-md); }
.cv-project-card__tags { display: flex; flex-wrap: wrap; gap: var(--control-gap-md); }
.cv-project-card__tags span { padding: var(--control-gap-sm) calc(var(--surface-padding-md) / 2) var(--control-gap-md); background: var(--color-orange-dark-100); color: var(--color-darkblue-600); font: var(--font-text-md-regular); }
.cv-project-card h3 { margin: 0; font: var(--font-display-sm-semibold); letter-spacing: var(--tracking-text-md); }
.cv-project-card p { margin: 0; color: var(--cv-project-muted); font: var(--font-text-md-regular); }
.cv-project-card__metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--border-width-hairline) solid var(--color-darkblue-100); border-radius: var(--control-radius-md); overflow: hidden; }
.cv-project-card__metric { display: flex; flex-direction: column; gap: var(--control-gap-md); min-width: 0; padding: var(--control-padding-block) var(--surface-padding-md); border-left: var(--border-width-hairline) solid var(--color-darkblue-100); }
.cv-project-card__metric:nth-child(odd) { border-left: 0; }
.cv-project-card__metric:nth-child(n + 3) { border-top: var(--border-width-hairline) solid var(--color-darkblue-100); }
.cv-project-card__metric strong { font: var(--font-display-sm-semibold); }
.cv-project-card__metric span { font: var(--font-text-md-regular); }
.cv-project-card__cta { display: flex; justify-content: center; margin-top: var(--surface-padding-md); padding: var(--control-padding-inline-md) calc(var(--surface-padding-md) * 2 + var(--control-padding-inline-md)); border-radius: var(--control-radius-md); background: var(--color-base-white); color: var(--color-orange-dark-700); font: var(--font-text-lg-medium); text-align: center; }
.cv-project-card--gray { background: var(--color-darkblue-50); }
.cv-project-card--gray .cv-project-card__tags span { background: var(--color-cyan-100); }
.cv-project-card--gray .cv-project-card__cta { background: transparent; border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-blue-100) 40%, transparent); color: var(--color-blue-300); font: var(--font-text-lg-semibold); }
.cv-project-card--gray .cv-project-card__metrics, .cv-project-card--gray .cv-project-card__metric { border-color: color-mix(in srgb, var(--color-blue-100) 40%, transparent); }
.cv-project-card--gray .cv-project-card__metric strong, .cv-project-card--gray .cv-project-card__metric span { color: var(--color-blue-700); }
.cv-project-card--orange .cv-project-card__metric { border-color: color-mix(in srgb, var(--color-orange-dark-900) 10%, var(--color-base-white)); }
.cv-project-card--orange .cv-project-card__metrics { border-color: color-mix(in srgb, var(--color-orange-dark-900) 10%, var(--color-base-white)); }
.cv-project-card--orange .cv-project-card__cta { background: var(--color-transparent); border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-orange-dark-800) 38%, transparent); color: var(--color-orange-dark-800); box-shadow: none; }
.cv-project-card--orange .cv-project-card__metric strong, .cv-project-card--orange .cv-project-card__metric span { color: var(--color-orange-dark-950); }
.cv-project-card--orange .cv-project-card__tags span { color: var(--color-orange-dark-950); }
.cv-project-card--red { background: color-mix(in srgb, var(--color-orange-dark-700) 10%, transparent); --cv-project-text: var(--color-darkblue-950); --cv-project-muted: var(--color-darkblue-600); }
.cv-project-card--red .cv-project-card__tags span { background: color-mix(in srgb, var(--color-orange-dark-700) 10%, transparent); color: var(--color-orange-dark-800); }
.cv-project-card--red .cv-project-card__metric strong, .cv-project-card--red .cv-project-card__metric span { color: var(--color-orange-dark-900); }
.cv-project-card--red .cv-project-card__cta { background: transparent; border: var(--border-width-hairline) solid color-mix(in srgb, var(--color-orange-dark-900) 10%, transparent); color: color-mix(in srgb, var(--color-orange-dark-900) 40%, var(--color-base-white)); font: var(--font-text-lg-semibold); }
.cv-project-card--red .cv-project-card__metrics { border-color: color-mix(in srgb, var(--color-orange-dark-900) 10%, transparent); }
.cv-project-card--red .cv-project-card__metric { border-color: color-mix(in srgb, var(--color-orange-dark-900) 10%, transparent); }
.cv-project-card--red .cv-project-card__metrics--count-2 .cv-project-card__metric:nth-child(2) { border-left: var(--border-width-hairline) solid color-mix(in srgb, var(--color-orange-dark-900) 10%, transparent); }
@media (min-width: 768px) {
	.cv-projects__inner { padding-inline: 0; }
	.cv-projects__header { align-items: center; flex-direction: row; }
	.cv-project-card { display: grid; grid-template-columns: minmax(0, 510px) minmax(0, 1fr); gap: calc(var(--surface-padding-md) + var(--control-padding-inline-md)); padding-block: calc(var(--surface-padding-md) * 2 + var(--control-padding-inline-md)); padding-inline: max(var(--container-offset), calc((100vw - var(--cv-content-width)) / 2)); }
	.cv-project-card__content { gap: 0; padding: var(--control-padding-inline-md) 0; }
	.cv-project-card__metrics { margin-top: auto; }
	.cv-project-card__metrics--count-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.cv-project-card__metrics--count-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.cv-project-card__metric { border-top: 0; }
	.cv-project-card__metric:nth-child(odd) { border-left: var(--border-width-hairline) solid var(--color-darkblue-100); }
	.cv-project-card__metric:first-child { border-left: 0; }
}

@media (max-width: 767px) {
	.cv-projects__inner { padding-top: var(--spacing-4xl); }
	.cv-projects__work-link { order: -1; width: 100%; text-align: center; }
	.cv-project-card { padding-block: var(--spacing-4xl); }
	.cv-project-card__metrics,
	.cv-project-card__metrics--count-2,
	.cv-project-card__metrics--count-3,
	.cv-project-card__metrics--count-4 { grid-template-columns: 1fr; }
	.cv-project-card__metric { padding-block: var(--control-gap-md); border-left: 0; }
	.cv-project-card__metric + .cv-project-card__metric { border-top: var(--border-width-hairline) solid var(--color-darkblue-100); }
	.cv-project-card__metric strong { font: var(--font-display-xs-semibold); }
	:is(.cv-project-card--runero, .cv-project-card--telemetry) .cv-project-card__metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); border-width: calc(var(--border-width-hairline) * 2); }
	:is(.cv-project-card--runero, .cv-project-card--telemetry) .cv-project-card__metric { gap: 0; padding: var(--control-padding-block) var(--surface-padding-md) var(--surface-padding-sm); border-width: 0; }
	:is(.cv-project-card--runero, .cv-project-card--telemetry) .cv-project-card__metric:nth-child(even) { border-left-style: solid; border-left-width: calc(var(--border-width-hairline) * 2); }
	:is(.cv-project-card--runero, .cv-project-card--telemetry) .cv-project-card__metric:nth-child(n + 3) { border-top-width: calc(var(--border-width-hairline) * 2); }
	:is(.cv-project-card--runero, .cv-project-card--telemetry) .cv-project-card__metric strong { font: var(--font-display-sm-semibold); }
	:is(.cv-project-card--runero, .cv-project-card--telemetry) .cv-project-card__metric span { font: var(--font-text-md-regular); }
	.cv-project-card--telemetry .cv-project-card__metric:last-child { grid-column: 1 / -1; }
	.cv-project-card--telemetry .cv-project-card__metrics,
	.cv-project-card--telemetry .cv-project-card__metric { border-color: color-mix(in srgb, var(--color-darkblue-200) 40%, transparent); }
	.cv-project-card--telemetry .cv-project-card__metric strong,
	.cv-project-card--telemetry .cv-project-card__metric span { color: var(--color-cyan-900); }
	.cv-projects__header h2 { font: var(--font-display-md-medium); letter-spacing: var(--tracking-display-md); }
}