:root {
	--hlb-bg: #faf9f6;
	--hlb-bg-tint: #f0eee8;
	--hlb-ink: #1c1d1a;
	--hlb-mute: #5c6158;
	--hlb-line: #d9d6ce;
	--hlb-accent: #55603f;
	--hlb-on-accent: #faf9f6;
	--hlb-danger: #9b3b2e;
	--hlb-shell: 74rem;
	--hlb-gutter: 1.25rem;
	--hlb-header: 4.6rem;
	--hlb-sans: Inter, system-ui, sans-serif;
	--hlb-display: "Space Grotesk", Inter, system-ui, sans-serif;
}

html {
	background: var(--hlb-bg);
	scroll-behavior: smooth;
}

.hlb-page {
	background: var(--hlb-bg);
	color: var(--hlb-ink);
	font-family: var(--hlb-sans);
	font-size: 1.05rem;
}

.hlb-page--is-locked {
	overflow: hidden;
}

.hlb-shell {
	width: min(100% - (var(--hlb-gutter) * 2), var(--hlb-shell));
	margin-inline: auto;
}

.hlb-shell--narrow {
	width: min(100% - (var(--hlb-gutter) * 2), 44rem);
}

.hlb-skip {
	position: absolute;
	left: 0.75rem;
	top: 0.75rem;
	z-index: 80;
	transform: translateY(-8rem);
	padding: 0.55rem 0.85rem;
	background: var(--hlb-accent);
	color: var(--hlb-on-accent);
	font-weight: 500;
}

.hlb-skip:focus {
	transform: none;
}

.hlb-eyebrow {
	margin: 0 0 0.65rem;
	color: var(--hlb-accent);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.hlb-prose {
	color: var(--hlb-mute);
	max-width: 40rem;
}

.hlb-prose p + p {
	margin-top: 0.85rem;
}

.hlb-note {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
	color: var(--hlb-mute);
	font-size: 0.92rem;
}

.hlb-icon {
	width: 1.25rem;
	height: 1.25rem;
	stroke: currentColor;
	fill: none;
}

.hlb-icon--sm {
	width: 1rem;
	height: 1rem;
}

.hlb-icon--lg {
	width: 1.7rem;
	height: 1.7rem;
}

.hlb-icon--flip {
	transform: scaleX(-1);
}

.hlb-img--is-failed {
	opacity: 0;
}

.hlb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.8rem;
	padding: 0.5rem 1.1rem;
	border: 1px solid var(--hlb-line);
	background: var(--hlb-bg);
	color: var(--hlb-ink);
	font-size: 0.94rem;
	font-weight: 500;
}

.hlb-btn--primary {
	background: var(--hlb-accent);
	border-color: var(--hlb-accent);
	color: var(--hlb-on-accent);
}

.hlb-btn--ghost,
.hlb-btn--quiet {
	background: transparent;
	color: var(--hlb-ink);
}

.hlb-btn--full {
	width: 100%;
}

.hlb-link {
	color: var(--hlb-accent);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.hlb-grid {
	display: grid;
	gap: 1.1rem;
}

@media (min-width: 800px) {
	.hlb-grid,
	.hlb-grid--two {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1100px) {
	.hlb-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.hlb-reveal {
	opacity: 0;
	transform: translateY(0.7rem);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

.hlb-reveal--is-in {
	opacity: 1;
	transform: none;
}

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

	.hlb-reveal,
	.hlb-reveal--is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
}