/**
 * Tech Journey archive (2c). Hero is fixed Distill navy/amber -- the
 * "founder's signature" moment -- and does not follow the light/dark
 * toggle, unlike every other hero on the site.
 */

.chb-tech-hero {
	padding: 56px 48px 44px;
	background: var( --distill-navy );
	border-bottom: 1px solid var( --border );
}
.chb-breadcrumb--tech,
.chb-breadcrumb--tech a {
	color: #9AA6B2;
}
.chb-breadcrumb--tech a:hover {
	color: var( --distill-amber );
}
.chb-tech-hero__title-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
}
.chb-tech-hero__mark {
	width: 44px;
	height: 44px;
	object-fit: contain;
}
.chb-tech-hero__name {
	font-family: var( --font-heading );
	font-weight: 800;
	font-size: 44px;
	letter-spacing: -0.02em;
	color: #F5EFE6;
}
.chb-tech-hero__desc {
	font-size: 16.5px;
	line-height: 1.6;
	color: #C7CDD4;
	max-width: 580px;
	margin-bottom: 18px;
}
.chb-pill--tech {
	background: rgba( 255, 255, 255, 0.06 );
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	color: #F5EFE6;
}
.chb-pill--tech-accent {
	background: rgba( 212, 145, 90, 0.14 );
	border: 1px solid rgba( 212, 145, 90, 0.35 );
	color: var( --distill-amber );
}

.chb-card__label--tech {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --distill-navy-readable );
	margin-bottom: 12px;
}

/* ---- Tablet ---- */
@media ( max-width: 900px ) {
	.chb-tech-hero {
		padding: 40px 32px 32px;
	}
	.chb-tech-hero__name {
		font-size: 34px;
	}
}

/* ---- Mobile ---- */
@media ( max-width: 600px ) {
	.chb-tech-hero {
		padding: 32px 20px 28px;
	}
	.chb-tech-hero__title-row {
		gap: 12px;
	}
	.chb-tech-hero__mark {
		width: 34px;
		height: 34px;
	}
	.chb-tech-hero__name {
		font-size: 26px;
	}
	.chb-tech-hero__desc {
		font-size: 15px;
	}
}