header#nav {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: var(--z-nav);
	display: flex;
	align-items: center;
	padding: 60px var(--gutter) 0;
	border-bottom: 1px solid transparent;

	transition:
		padding var(--dur) var(--ease-out),
		background var(--dur) var(--ease-out),
		backdrop-filter var(--dur) var(--ease-out),
		border-color var(--dur) var(--ease-out)
	;
}
header#nav.is-scrolled {
	background: color-mix(in srgb, var(--color-bg) 72%, transparent);
	backdrop-filter: blur(18px) saturate(140%);
	border-block-end: 1px solid var(--color-line);
	padding: clamp(0.6rem, 0.3rem + 1vw, 1rem) var(--gutter);

	& img.logo-header {
		height: clamp(50px, 5vw, 60px);
	}
}
.nav__inner {
	width: 100%;
	max-width: var(--container-wide);
	margin-inline: auto;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--space-lg);
}
.nav__brand {
	display: flex; align-items: center; gap: 0.7em;
	font-family: var(--font-mono);
	font-size: var(--step-xs);
	letter-spacing: 0.04em;
}
img.logo-header {
	height: clamp(64px, 6vw, 80px);
	transition: height var(--dur) var(--ease-out);
}

.nav__links {
	justify-self: center;
	display: flex;
	align-items: center;
	gap: clamp(1rem, 0.5rem + 2vw, 2.4rem);
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}
.nav__links a {
	position: relative;
	color: var(--color-fg-muted);
	transition: color var(--dur) var(--ease-out);
	padding-block: 0.3em;
}
.nav__links a:hover { color: var(--color-fg); }
.nav__links a::after {
	content: ""; position: absolute; left: 0; bottom: 0;
	width: 100%; height: 1px;
	background: var(--color-accent);
	transform: scaleX(0); transform-origin: left;
	transition: transform var(--dur) var(--ease-out);
}
.nav__links a:hover::after { transform: scaleX(1); }
.nav__cta {
	justify-self: end;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

@media (max-width: 1100px) {

	#nav__top-cta {
		display: none;
	}

	nav#nav-links > a:last-child {
		color: var(--color-accent);
	}
}

/* ---- Hamburger toggle (hidden on desktop) ---- */
.nav__toggle {
	display: none;
	position: relative;
	z-index: 1;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	padding: 0;
	border-radius: var(--radius-sm);
	background: transparent;
	transition: background var(--dur) var(--ease-out);
}
.nav__toggle:hover { background: var(--color-line); }
.nav__toggle-bar {
	display: block;
	width: 22px; height: 2px;
	margin-inline: auto;
	background: var(--color-fg);
	border-radius: 2px;
	transition: transform var(--dur) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
	transform-origin: center;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) {
	opacity: 0;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ---------- Tier 1: condensed nav (≤ 880px) ---------- */
@media (max-width: 880px) {
	.nav__links {
		gap: clamp(0.7rem, 0.3rem + 1.5vw, 1.2rem);
		font-size: var(--step-2xs);
	}
}

/* ---------- Tier 2: mobile overlay (≤ 720px) ---------- */
@media (max-width: 720px) {
	.nav__inner { gap: var(--space-sm); }
	.nav__links { display: none; }
	.nav__toggle { display: flex; }
}

/* ---- Mobile overlay panel ---- */
.nav__overlay {
	position: fixed;
	inset: 0;
	z-index: calc(var(--z-nav) + 2);
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 1rem + 6vw, 4rem) var(--gutter);
	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-accent) 5%, transparent) 0 10px,
			transparent 10px 20px
		),
		var(--color-bg);
	border-block-start: 2px solid var(--color-accent);
	overflow-y: auto;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition:
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out),
		visibility var(--dur);
}
body.nav-open .nav__overlay {
	opacity: 1;
	visibility: visible;
	transform: none;
	min-height: 680px;
}
.nav__overlay-inner {
	width: 100%;
	max-width: var(--container-narrow);
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}
.nav__overlay-links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
}
.nav__overlay-links a {
	display: inline-flex;
	align-items: baseline;
	gap: 0.6em;
	width: fit-content;
	max-width: 100%;
	font-family: var(--font-mono);
	font-size: var(--step-lg);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-fg-muted);
	padding-block: 0.2em;
	position: relative;
	transition: color var(--dur) var(--ease-out);
	opacity: 0;
	transform: translateY(14px);
}
.nav__overlay-links a::after {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	width: 100%; height: 2px;
	background: var(--color-accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--dur) var(--ease-out);
}
.nav__overlay-links a:hover,
.nav__overlay-links a[aria-current="page"] {
	color: var(--color-fg);
}
.nav__overlay-links a:hover::after,
.nav__overlay-links a[aria-current="page"]::after {
	transform: scaleX(1);
}
.nav__overlay-links a[aria-current="page"] {
	color: var(--color-accent);
}
body.nav-open .nav__overlay-links a {
	opacity: 1;
	transform: none;
	transition:
		color var(--dur) var(--ease-out),
		opacity var(--dur) var(--ease-out),
		transform var(--dur) var(--ease-out);
	transition-delay: calc(var(--i, 0) * 80ms + 80ms);
}
.nav__overlay-cta {
	align-self: flex-start;
	margin-top: var(--space-2xs);
}
.nav__overlay-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--space-xs);
	margin-top: var(--space-md);
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--color-fg-dim);
}
.nav__overlay-foot .dot-pulse {
	margin-inline: 0 0.6rem;
}

/* Lift header above overlay when open so the toggle stays clickable */
body.nav-open header#nav {
	z-index: calc(var(--z-nav) + 3);
}

/* Hide overlay on desktop */
@media (min-width: 721px) {
	.nav__overlay { display: none; }
}

/* Lock body scroll when overlay is open */
body.nav-open { overflow: hidden; }

/* Scroll progress */
.progress {
	position: fixed;
	inset: 0 0 auto 0;
	height: 2px;
	background: transparent;
	z-index: calc(var(--z-nav) + 1);
	transform: scaleX(var(--p, 0));
	transform-origin: left;
	background: var(--color-accent);
	will-change: transform;
}

@media (pointer: fine) {
	body.has-cursor * { cursor: none !important; }

	.cursor,
	.cursor-trail {
		position: fixed;
		top: 0; left: 0;
		pointer-events: none;
		z-index: var(--z-cursor);
		will-change: transform;
		opacity: 0;
	}
	body.has-cursor > .cursor,
	body.has-cursor > .cursor-trail
	{
		opacity: 1;
	}

	/* ---- Dot + ring (original) ---- */
	body.has-cursor > .cursor {
		width: 8px; height: 8px;
		border-radius: 50%;
		background: #fff;
		mix-blend-mode: difference;
		transform: translate(-50%, -50%);
	}
	body.has-cursor > .cursor-trail {
		width: 38px; height: 38px;
		border-radius: 50%;
		border: 1px solid rgba(255,255,255,0.6);
		mix-blend-mode: difference;
		transform: translate(-50%, -50%);
		transition: width var(--dur) var(--ease-out), height var(--dur) var(--ease-out), border-color var(--dur);
	}
	body.has-cursor > .cursor-trail.is-hover {
		width: 64px; height: 64px;
		border-color: var(--color-accent);
	}
}
@media (pointer: coarse) {
	.cursor, .cursor-trail { display: none !important; }
}

/* ---- Status strip (full-width, tape-style background) ---- */

.status-strip {
	width: 100%;
	background:
		repeating-linear-gradient(
			135deg,
			color-mix(in srgb, var(--color-accent) 9%, transparent) 0 10px,
			transparent 10px 20px
		),
		color-mix(in srgb, var(--color-accent) 16%, var(--color-bg));
	border-block-end: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
	color: var(--color-fg);
	position: relative;
	z-index: calc(var(--z-nav) + 1);
	box-shadow: 0 6px 18px -12px rgba(0,0,0,0.6);
}
.status-strip__inner {
	max-width: var(--container-wide);
	padding: 0.5em var(--gutter);
	height: 30px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-lg);
	font-family: var(--font-mono);
	font-size: var(--step-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-fg);
	position: relative;
}
.status-strip__inner > span:last-child {
	text-align: right;
}

.status-strip .dot-pulse {
	display: inline-block;
	margin-inline: 1rem;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	box-shadow: 0 0 0 0 var(--color-accent), 0 0 10px var(--color-accent);
	animation: dot-pulse 2.4s ease-out infinite;
}
@keyframes dot-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 60%, transparent), 0 0 10px var(--color-accent); }
	70%  { box-shadow: 0 0 0 9px transparent, 0 0 10px var(--color-accent); }
	100% { box-shadow: 0 0 0 0 transparent, 0 0 10px var(--color-accent); }
}

@media (max-width: 720px) {
	.status-strip__inner {
		height: 42px;
		flex-flow: column;
		gap: 0;
		align-items: stretch;
	}
	main#main {
		margin-top: -42px;
	}
}
@media (max-width: 400px) {
	.status-strip .dot-pulse {
		display: none;
	}
}