/* ============================================================
   404 · Layout — header, nav, footer, hero scaffold, page shells
   ============================================================ */

/* ---------- Header ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	background: color-mix(in srgb, var(--bg) 62%, transparent);
	backdrop-filter: saturate(120%) blur(2px);
	-webkit-backdrop-filter: saturate(120%) blur(2px);
	border-bottom: 1px solid transparent;
	transition: background var(--t) var(--ease), border-color var(--t) var(--ease);
}
.site-header.is-scrolled {
	background: color-mix(in srgb, var(--bg) 84%, transparent);
	border-bottom-color: var(--line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--s-5);
	height: var(--header-h);
}

.brand {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-shrink: 0;
}
.brand__mark {
	font-family: var(--font-mono);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	color: var(--text);
}
.brand__mark b { color: var(--accent); font-weight: 700; }
.brand__by {
	font-size: 0.66rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--text-faint);
}

.main-nav {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-inline: auto;
}
.main-nav__link {
	position: relative;
	padding: 8px 12px;
	font-size: 0.9rem;
	color: var(--text-muted);
	border-radius: var(--radius-sm);
	transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.main-nav__link:hover,
.main-nav__link[aria-current] { color: var(--text); }
.main-nav__link::after {
	content: "";
	position: absolute;
	left: 12px; right: 12px; bottom: 4px;
	height: 1px;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--t) var(--ease);
}
.main-nav__link:hover::after,
.main-nav__link[aria-current]::after { transform: scaleX(1); }

.header-actions {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
}

.icon-btn {
	display: inline-grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	color: var(--text-muted);
	border: 1px solid var(--line);
	transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.icon-btn:hover { color: var(--text); border-color: var(--line-strong); background: var(--surface); }
.icon-btn svg { width: 18px; height: 18px; }

.nav-toggle { display: none; }

/* ---------- Mobile navigation panel ---------- */
.nav-overlay {
	position: fixed;
	inset: 0;
	background: rgba(4, 5, 6, 0.6);
	backdrop-filter: blur(3px);
	opacity: 0;
	visibility: hidden;
	z-index: var(--z-overlay);
	transition: opacity var(--t) var(--ease), visibility var(--t) var(--ease);
}
.nav-overlay.is-open { opacity: 1; visibility: visible; }

.mobile-nav {
	position: fixed;
	top: 0; right: 0;
	height: 100dvh;
	width: min(360px, 88vw);
	background: var(--bg-soft);
	border-left: 1px solid var(--line);
	z-index: var(--z-panel);
	transform: translateX(100%);
	transition: transform var(--t-slow) var(--ease);
	display: flex;
	flex-direction: column;
	padding: var(--s-5) var(--s-5) var(--s-7);
	overflow-y: auto;
}
.mobile-nav.is-open { transform: none; }
.mobile-nav__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: var(--s-6);
}
.mobile-nav__links { display: flex; flex-direction: column; gap: 2px; }
.mobile-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 12px;
	font-size: 1.1rem;
	color: var(--text);
	border-radius: var(--radius-sm);
	border-bottom: 1px solid var(--line);
}
.mobile-nav__link:hover { background: var(--surface); }
.mobile-nav__link .arrow { color: var(--text-faint); }
.mobile-nav__foot { margin-top: auto; padding-top: var(--s-6); }

/* ---------- Footer ---------- */
.site-footer {
	border-top: 1px solid var(--line);
	background: var(--bg-soft);
	margin-top: var(--section-y);
}
.site-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--s-7);
	padding-block: var(--s-8);
}
.site-footer__brand .brand__mark { font-size: 1.6rem; }
.site-footer__tagline {
	margin-top: var(--s-4);
	color: var(--text-muted);
	max-width: 34ch;
	font-size: var(--fs-small);
}
.footer-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(120px, auto));
	gap: 10px 48px;
	align-content: start;
}
.footer-nav a {
	color: var(--text-muted);
	font-size: 0.92rem;
	transition: color var(--t-fast) var(--ease);
}
.footer-nav a:hover { color: var(--accent); }
.site-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-3) var(--s-5);
	align-items: center;
	justify-content: space-between;
	padding-block: var(--s-5);
	border-top: 1px solid var(--line);
	color: var(--text-faint);
	font-size: var(--fs-small);
}
.site-footer__bottom .mono { color: var(--text-faint); }

/* ---------- Hero scaffold ---------- */
.hero {
	position: relative;
	padding-top: clamp(48px, 8vw, 96px);
	padding-bottom: var(--section-y);
	overflow: clip;
}
.hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 0.95fr;
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}
.hero__lead { max-width: 620px; }
.hero__panel { position: relative; min-width: 0; }

/* ---------- Generic page shell ---------- */
.page-shell { padding-block: clamp(48px, 8vw, 96px) var(--section-y); }
.page-shell__head { max-width: 720px; margin-bottom: var(--s-7); }
.page-shell__title { font-size: var(--fs-h1); margin-block: var(--s-4); }
.prose { max-width: 68ch; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--s-7); }
.prose h3 { font-size: var(--fs-lead); margin-top: var(--s-6); }
.prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.prose ul { list-style: none; display: grid; gap: 10px; }
.prose ul li { padding-left: 22px; position: relative; color: var(--text-muted); }
.prose ul li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; background: var(--accent); border-radius: 2px; }
.prose blockquote {
	border-left: 2px solid var(--accent);
	padding-left: var(--s-4);
	color: var(--text-muted);
	font-style: normal;
}