/* ============================================
   Header
   ============================================ */

.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-block: 1.25rem;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--border-subtle);
}

/* On home page, header starts transparent over the hero */
.page-home .site-header {
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border-bottom-color: transparent;
}

.site-header__inner {
	padding-inline: var(--page-gutter);
	display: flex;
	align-items: center;
	/* Logo is position:fixed (out of flow), so the nav is the only in-flow
	   child — keep it hard right, mirroring the logo's left: page-gutter. */
	justify-content: flex-end;
}

/* Blue logo pinned to the extreme upper-left of the viewport, above the
   header bar. Fixed (not in the header's centered inner column) so it hugs
   the true left edge on any screen width. Only appears on non-home pages
   because home.html doesn't include the header partial at all. */
.site-header__logo {
	position: fixed;
	top: 1.25rem; /* aligns with .site-header's top padding */
	left: var(--page-gutter); /* the site's left edge */
	z-index: 101; /* above .site-header (z-index: 100) */
	display: block;
}

.site-header__logo img {
	height: 1.5rem; /* width auto-derives from the 485:126 viewBox */
	width: auto;
	display: block;
	transition: opacity 0.3s ease;
}

.site-header__logo:hover img {
	opacity: 0.8;
}

.site-header__nav {
	display: flex;
	gap: 2rem;
	list-style: none;
}

.site-header__nav a {
	font-size: 0.9rem;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	color: var(--text-muted);
	transition: color 0.3s ease;
}

.site-header__nav a:hover,
.site-header__nav a:focus-visible {
	color: var(--text-primary);
}

/* Mobile nav — native <details> disclosure (no JS, no checkbox hack).
   Hidden on desktop; the inline .site-header__nav is the desktop nav. */
.site-header__nav-mobile {
	display: none;
}

@media (max-width: 48rem) {
	/* Swap: inline links out, ☰ disclosure in. */
	.site-header__nav {
		display: none;
	}

	.site-header__nav-mobile {
		display: block;
		position: relative;
		margin-left: auto; /* push the ☰ to the right edge */
	}

	/* ☰ button — strip the default disclosure triangle in both engines. */
	.site-header__nav-mobile summary {
		list-style: none;
		cursor: pointer;
		font-size: 1.5rem;
		line-height: 1;
		color: var(--text-primary);
	}

	.site-header__nav-mobile summary::-webkit-details-marker {
		display: none;
	}

	/* Dropdown panel, anchored under the ☰. */
	.site-header__nav-mobile ul {
		list-style: none;
		position: absolute;
		right: 0;
		top: calc(100% + 0.75rem);
		margin: 0;
		padding: 1rem 1.5rem;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		min-width: 10rem;
		background: rgba(0, 0, 0, 0.95);
		backdrop-filter: blur(16px);
		-webkit-backdrop-filter: blur(16px);
		border: 1px solid var(--border-subtle);
		border-radius: 8px;
	}

	.site-header__nav-mobile a {
		font-size: 1.1rem;
		letter-spacing: 0.04em;
		text-transform: lowercase;
		color: var(--text-muted);
		transition: color 0.3s ease;
	}

	.site-header__nav-mobile a:hover,
	.site-header__nav-mobile a:focus-visible {
		color: var(--text-primary);
	}
}