/**
 * Site header (BEM block: .site-header, .site-nav).
 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background-color: transparent;
	transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}

.site-header.is-scrolled {
	background-color: rgba(247, 244, 239, 0.9);
	backdrop-filter: blur(8px);
	box-shadow: var(--shadow-soft);
}

.site-header__inner {
	max-width: var(--container-width);
	margin-inline: auto;
	padding: var(--space-sm) var(--container-padding);
	display: flex;
	align-items: center;
	gap: var(--space-lg);
}

.site-header__brand {
	margin-right: auto;
}

.site-header__logo {
	font-family: var(--font-display);
	font-size: 1.5rem;
	font-weight: 600;
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-lg);
	font-size: var(--fs-sm);
}

.site-nav__list a {
	transition: color var(--duration-fast) var(--ease-out);
}

.site-nav__list a:hover {
	color: var(--color-accent);
}

.site-header__toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: var(--space-2xs);
}

.site-header__toggle-bar {
	width: 22px;
	height: 2px;
	background-color: var(--color-text);
	transition: transform var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
}

/* Mobile nav drawer */
.nav__drawer {
    display: none;
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--color-dark-2);
    z-index: 999;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-base);
}

.nav__drawer--open {
    opacity: 1;
    pointer-events: all;
}

.nav__drawer nav {
    display: flex;
    flex-direction: column;
}
.nav__drawer-link {
    font-family: var(--font-display);
    font-size: 3rem;
    letter-spacing: 4px;
    color: var(--color-white);
    text-decoration: none;
    transition: color var(--duration-base);
    border-bottom: 1px solid var(--color-accent);
}


@media (max-width: 900px) {
	.site-header__toggle {
		display: flex;
	}

	.site-nav {
		position: fixed;
		inset: 0;
		top: var(--header-height, 64px);
		background-color: var(--color-bg);
		transform: translateY(-8px);
		opacity: 0;
		pointer-events: none;
		transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
		padding: var(--space-lg);
	}

	body.nav-open .site-nav {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}

	.site-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-md);
		font-size: var(--fs-h3);
	}

	.site-header__cta {
		display: none;
	}

	body.nav-open .site-header__toggle-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	body.nav-open .site-header__toggle-bar:nth-child(2) {
		opacity: 0;
	}

	body.nav-open .site-header__toggle-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
	.nav__drawer {
		display: flex;
	}
}