/* =============================================================================
   header.css: header, phone menu and the line of descent
   -----------------------------------------------------------------------------
   Markup: parts/header.html (one template part for every page).
   Scripts: assets/js/descent.js (year marks, progress, phone menu),
            assets/js/site.js (marks the current page in the nav).
   ============================================================================= */

/* ---- Header (component 1) -------------------------------------------------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: var(--s-5);
	min-height: var(--header-h);
	padding: var(--s-3) calc(var(--gutter) + var(--line-gutter));
	background: var(--paper);
}
.wordmark {
	margin-right: auto;
	font: 700 clamp(1.375rem, 1.2rem + .45vw, 1.625rem)/1 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	letter-spacing: 0;
	text-decoration: none;
}
.nav { display: flex; gap: var(--s-5); }
.nav a { padding-block: 14px; font: 600 1rem/1 var(--text); text-decoration: none; }
/* Current page and hover: underlined (motion.css draws it as a growing bar instead) */
.nav a[aria-current], .nav a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* ---- Phone header and menu (component 2) ---------------------------------- */
.menu-btn {
	display: none;
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: 0;
	color: inherit;
	font: 500 var(--step-label)/1 var(--text);
	cursor: pointer;
}
@media (max-width: 900px) {
	.site-header .nav, .site-header > .btn { display: none; }
	.menu-btn { display: block; }
}
.sheet {
	position: fixed;
	inset: 0;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	padding: var(--s-4) var(--gutter) var(--s-6);
	background: var(--paper);
}
.sheet[hidden] { display: none; }
.sheet .close { display: block; align-self: flex-end; }
.sheet nav { display: flex; flex-direction: column; gap: var(--s-3); margin-top: auto; }
.sheet nav a {
	font: 600 var(--step-title)/1.05 var(--display);
	font-optical-sizing: none;
	font-variation-settings: "opsz" 6;
	text-decoration: none;
}
.sheet .btn { align-self: flex-start; }

/* ---- The line of descent (component 3, the signature) ---------------------- */
/* Desktop: a 2 px line fixed in the left margin that fills with scroll; the year of each
   chapter ([data-year]) is a link on it, the current one on a red tag. descent.js places them. */
.descent {
	position: fixed;
	top: calc(var(--header-h) + 16px);
	bottom: 24px;
	left: calc(var(--gutter) * .6);
	z-index: 25;
	width: 120px;
	pointer-events: none;
}
.descent-line { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: var(--seamless); }
.descent-fill { position: absolute; inset: 0; background: var(--ink); transform: scaleY(var(--p, 0)); transform-origin: top; }
.descent ol { position: absolute; inset: 0; }
.descent li { position: absolute; left: 0; transform: translateY(-50%); }
.descent a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-left: 12px;
	color: var(--grey);
	font: 500 var(--step-label)/1 var(--text);
	text-decoration: none;
	pointer-events: auto;
}
.descent a::before { content: ""; position: absolute; left: -3px; width: 8px; height: 8px; background: var(--ink); }
.descent a[aria-current="true"] { color: var(--ink); }
.descent a[aria-current="true"] span { padding: 4px 8px; background: var(--red); }

/* Over the night band the line turns paper, and the current year drops its red fill
   (red stays at two per screen) */
.descent.on-night .descent-line { background: #3A3A3A; }
.descent.on-night .descent-fill, .descent.on-night a::before { background: var(--paper); }
.descent.on-night a { color: var(--night-grey); }
.descent.on-night a[aria-current="true"] { color: var(--paper); }
.descent.on-night a[aria-current="true"] span { padding: 0; background: none; }

/* Phones and tablets: a 2 px bar under the header filling left to right; only the current
   year shows, inside the header bar left of Menu (never over content). descent.js sets an
   inline top on every mark, hence the !important on the current one. */
@media (max-width: 1023px) {
	.descent { top: var(--header-h); right: 0; bottom: auto; left: 0; z-index: 35; width: auto; height: 2px; }
	.descent-line { right: 0; left: 0; width: auto; height: 2px; }
	.descent-fill { transform: scaleX(var(--p, 0)); transform-origin: left; }
	.descent ol li { display: none; }
	.descent ol li.is-current {
		display: block;
		top: calc(var(--header-h) * -.5) !important;
		right: calc(var(--gutter) + 64px);
		left: auto;
		transform: translateY(-50%);
	}
	.descent ol li.is-current a { padding-left: 0; }
	.descent ol li.is-current a::before { display: none; }
}