/* Fixed light chrome: transparent over the hero, and once scrolled it takes
   a translucent platinum ground so labels never fight the section beneath.
   The same ground engages while the hero field is awake (onyx columns,
   15 Sep) — the nav never sinks into the dark. */
.site-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 40;
	display: grid;
	grid-template-columns: 180px 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 20px 24px;
	color: var(--ink);
	pointer-events: none;
	transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-header a, .site-header button { pointer-events: auto; }

.site-header.scrolled,
body:has(.hero-signal:hover) .site-header,
body:has(.hero-signal:focus-within) .site-header {
	background: rgba(241, 243, 243, 0.92);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 0 var(--bone-hair);
}

.brand-link { display: inline-flex; align-items: center; width: 124px; color: inherit; }
.brand-logo { display: block; width: 100%; fill: currentColor; }

.site-nav { display: flex; justify-content: flex-end; gap: 6px; }

/* nav-01 "the rise": four columns rise from below to claim the word.
   Widths are randomized per hover by nav-rise.js. */
.rl {
	position: relative;
	overflow: hidden;
	display: block;
	padding: 12px 20px;
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.01em;
	text-decoration: none;
	text-transform: lowercase;
}
.rl .cols {
	position: absolute;
	inset: 0;
	display: flex;
	gap: 3px;
	pointer-events: none;
}
.rl .cols i {
	flex: 45 0 0;
	background: var(--onyx);
	transform: translateY(103%);
	transition: transform 0.3s var(--ease-rise);
}
.rl .cols i:nth-child(1) { transition-delay: 0s; }
.rl .cols i:nth-child(2) { flex-grow: 120; transition-duration: 0.48s; transition-delay: 0.05s; }
.rl .cols i:nth-child(3) { transition-delay: 0.1s; }
.rl .cols i:nth-child(4) { transition-delay: 0.15s; }
.rl:hover .cols i, .rl:focus-visible .cols i { transform: translateY(0); }
.rl:focus-visible { outline: none; }
.rl .t { position: relative; transition: color 0.2s ease 0.1s; }
.rl:hover .t, .rl:focus-visible .t { color: var(--silver); }
.rl--current .t { text-decoration: underline; text-underline-offset: 6px; }

.header-tools { display: flex; align-items: center; gap: 14px; }

.lang-switch { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: var(--fs-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.lang-switch a { text-decoration: none; opacity: 0.6; }
.lang-switch a:hover, .lang-switch a[aria-current] { opacity: 1; }

.menu-btn {
	display: none;
	align-items: center;
	padding: 10px;
	margin-right: -10px;
	border: 0;
	background: none;
	cursor: pointer;
}
.menu-btn:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }

@media (max-width: 900px) {
	.site-header { grid-template-columns: 1fr auto; padding: 16px 18px; }
	.brand-link { width: 100px; }
	.site-nav, .lang-switch { display: none; } /* lang switcher moves into the overlay */
	.menu-btn { display: flex; }
}