@font-face {
	font-display: swap;
	font-family: 'Fraunces';
	font-style: normal;
	font-weight: 100 900;
	src: url('font/fraunces-variable.woff2') format('woff2');
}

@font-face {
	font-display: swap;
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	src: url('font/inter-variable.woff2') format('woff2');
}

:root {
	--site-border-width: 2px;
	--site-border-thin: 1px;
	--site-color-accent-deep: #2A7FA8;
	--site-color-background: #F5EEDF;
	--site-color-ink: #1A1512;
	--site-color-ink-soft: #5B524A;
	--site-color-line: rgba(26, 21, 18, 0.10);
	--site-font-body: 'Inter', system-ui, sans-serif;
	--site-font-display: 'Fraunces', Georgia, serif;
	--site-font-size-brand: 1.272rem;
	--site-font-size-small: 0.809rem;
	--site-radius-pill: 999px;
	--site-shadow-hard-small: 0.1875em 0.1875em 0 var(--site-color-ink);
	--site-shift-hover: -0.125em;
	--site-space-large: 2.618rem;
	--site-space-medium: 1.618rem;
	--site-space-small: 0.618rem;
	--site-space-tiny: calc(var(--site-space-small) / 1.618);
	--site-width-page: 77.5rem;
}

.site-header {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--site-space-medium);
	justify-content: space-between;
	padding: var(--site-space-medium) var(--site-space-large);
	width: min(100%, var(--site-width-page));
}

.site-brand {
	align-items: center;
	color: var(--site-color-ink);
	display: flex;
	gap: var(--site-space-small);
	text-decoration: none;
}

.site-brand svg {
	height: var(--site-space-medium);
	width: var(--site-space-medium);
}

.site-brand__name {
	font-family: var(--site-font-display);
	font-size: var(--site-font-size-brand);
	font-weight: 900;
	letter-spacing: -0.02em;
	line-height: 1;
	/* BlueRobotics has no descenders — nudge the glyph block down to the icon's optical center */
	transform: translateY(0.05em);
}

.site-brand__accent {
	color: var(--site-color-accent-deep);
}

.site-header__navigation {
	align-items: center;
	display: flex;
	gap: var(--site-space-medium);
}

.site-header__link {
	color: var(--site-color-ink);
	font-weight: 600;
	text-decoration: none;
}

.site-header__link:hover {
	color: var(--site-color-accent-deep);
}

.site-header__button {
	background-color: var(--site-color-ink);
	border: var(--site-border-width) solid var(--site-color-ink);
	border-radius: var(--site-radius-pill);
	color: var(--site-color-background);
	font-weight: 600;
	padding: var(--site-space-tiny) var(--site-space-medium);
	text-decoration: none;
	transition: box-shadow 150ms, transform 150ms;
}

.site-header__button:hover {
	box-shadow: var(--site-shadow-hard-small);
	transform: translate(var(--site-shift-hover), var(--site-shift-hover));
}

.site-footer {
	align-items: center;
	border-top: var(--site-border-thin) solid var(--site-color-line);
	display: flex;
	flex-wrap: wrap;
	gap: var(--site-space-small);
	justify-content: space-between;
	padding: var(--site-space-medium) var(--site-space-large);
	width: min(100%, var(--site-width-page));
}

.site-footer__meta {
	color: var(--site-color-ink-soft);
	font-size: var(--site-font-size-small);
}

@media (max-width: 700px) {
	.site-header,
	.site-footer {
		padding-left: var(--site-space-medium);
		padding-right: var(--site-space-medium);
	}
}