.bp-header {
	position: sticky;
	top: 0;
	z-index: 30;
	background: rgba(14, 15, 18, 0.84);
	border-bottom: 1px solid var(--bp-line);
	padding-top: env(safe-area-inset-top);
	backdrop-filter: blur(10px);
}

.bp-header__inner {
	display: flex;
	align-items: center;
	gap: 1rem;
	width: min(var(--bp-wrap), calc(100% - 2.5rem));
	min-height: var(--bp-header-h);
	margin-inline: auto;
}

.bp-brand {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	margin-right: auto;
	padding-inline: 0.15rem;
	color: var(--bp-paper);
	text-decoration: none;
}

.bp-brand__name {
	font-family: var(--bp-display);
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: -0.04em;
}

.bp-brand__logo {
	display: block;
	width: auto;
	height: 2.45rem;
	max-width: min(58vw, 15.5rem);
}

.bp-nav-toggle {
	display: none;
	align-items: center;
	gap: 0.55rem;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0.4rem 0.55rem;
	border: 1px solid var(--bp-line);
	background: transparent;
	color: var(--bp-paper);
	font: inherit;
	font-size: 0.95rem;
	cursor: pointer;
	border-radius: 0.4rem;
}

.bp-nav-toggle__bars {
	display: grid;
	gap: 5px;
	width: 1.15rem;
}

.bp-nav-toggle__bars span {
	display: block;
	height: 1px;
	background: currentColor;
}

.bp-nav {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.bp-nav__list {
	display: flex;
	gap: 1.35rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bp-nav__list a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	color: var(--bp-muted);
	text-decoration: none;
	font-weight: 600;
}

.bp-nav__list a:hover,
.bp-nav__list a:focus-visible {
	color: var(--bp-paper);
}

@media (max-width: 899px) {
	.bp-nav-toggle {
		display: inline-flex;
	}

	.bp-nav {
		position: fixed;
		top: calc(var(--bp-header-h) + env(safe-area-inset-top));
		right: 0;
		bottom: 0;
		left: 0;
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		padding: 1.25rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
		background: var(--bp-ink);
		visibility: hidden;
		pointer-events: none;
	}

	.bp-header.is-open .bp-nav {
		visibility: visible;
		pointer-events: auto;
	}

	.bp-nav__list {
		flex-direction: column;
		gap: 0;
	}

	.bp-nav__list a {
		min-height: 3.25rem;
		font-family: var(--bp-display);
		font-size: 1.7rem;
		letter-spacing: -0.04em;
		color: var(--bp-paper);
	}

	.bp-nav .bp-btn {
		margin-top: 0.75rem;
	}
}