/* 1838 — site chrome: header, desktop nav, mobile menu, footer.
   Values reproduce the approved preview (shared header/footer of the 20 pages). */

/* Header ------------------------------------------------------------------ */
.c-header {
	padding: var(--header-top) var(--gutter) 0;
	background: var(--c-paper);
}
.c-header__inner {
	max-width: var(--inner);
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 22px 64px;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--c-rule);
}

.c-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: var(--ls-label);
	text-transform: uppercase;
	color: var(--c-ink-quiet);
	transition: color var(--m-hover, 160ms) ease;
}
.c-brand::before {
	content: "";
	flex: none;
	display: block;
	width: 7px;
	height: 7px;
	background: var(--c-accent);
	transform: rotate(45deg);
}
.c-brand:hover { color: var(--c-ink); }

/* Home keeps its approved mobile header values (Home's mobile composition, <1100px):
   52px top padding, 11px brand. Bottom padding, gutters and the menu button are shared,
   so the button stays aligned; the menu dialog's brand matches via .mnav--home. */
@media (max-width: 1099px) {
	.c-header--home { padding-top: 52px; }
	.c-header--home .c-brand, .mnav--home .c-brand { font-size: 11px; gap: 12px; }
	.c-header--home .c-brand::before, .mnav--home .c-brand::before { width: 6px; height: 6px; }
}

/* Desktop nav (.s1 hover; current = ink + 1px ink underline, static) */
.c-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 34px;
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
}
.c-nav a {
	padding-bottom: 4px;
	border-bottom: 1px solid transparent;
	color: var(--c-ink-quiet);
}
.c-nav a:hover { color: var(--c-ink); border-color: var(--c-rule); }
.c-nav a[aria-current="page"] { color: var(--c-ink); border-color: var(--c-ink); }

/* Mobile menu (≤767px, only with html.nav-js) ------------------------------- */
.mnav-btn { display: none; }
@media (max-width: 767px) {
	html.nav-js .c-nav { display: none; }
	html.nav-js .mnav-btn { display: inline-flex; }
}
.mnav-btn {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: -13px -11px -13px auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--c-ink);
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.mnav-icon { position: relative; display: block; width: 22px; height: 8px; }
.mnav-icon::before, .mnav-icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 1px;
	background: currentColor;
}
.mnav-icon::before { top: 0; }
.mnav-icon::after { top: 7px; }
.mnav-btn.is-close .mnav-icon::before { top: 3.5px; transform: rotate(45deg); }
.mnav-btn.is-close .mnav-icon::after { top: 3.5px; transform: rotate(-45deg); }

html.mnav-lock, html.mnav-lock body { overflow: hidden; }

.mnav {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--c-paper);
	color: var(--c-ink);
	opacity: 0;
	transition: opacity var(--m-state, 240ms) var(--m-ease, ease);
}
.mnav[hidden] { display: none; }
.mnav.is-open { opacity: 1; }
.mnav-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 44px;
	margin: var(--mnav-top, 18px) var(--mnav-r, 15px) 0 var(--mnav-l, 26px);
}
.mnav-top .mnav-close { display: inline-flex; margin: 0; }
.mnav-list {
	display: flex;
	flex-direction: column;
	padding: 30px calc(var(--mnav-r, 15px) + 11px) 48px var(--mnav-l, 26px);
	transform: translate3d(0, 8px, 0);
	transition: transform var(--m-state, 240ms) var(--m-ease, ease);
}
.mnav.is-open .mnav-list { transform: none; }
.mnav-list a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
	border-top: 1px solid var(--c-rule);
	font-family: var(--f-mono);
	font-size: var(--t-mono);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--c-ink-quiet);
	transition: color var(--m-hover, 160ms) ease;
}
.mnav-list a:last-child { border-bottom: 1px solid var(--c-rule); }
.mnav-list a:hover, .mnav-list a[aria-current="page"] { color: var(--c-ink); }
.mnav-list a[aria-current="page"]::before {
	content: "";
	flex: none;
	width: 6px;
	height: 6px;
	background: var(--c-accent);
	transform: rotate(45deg);
}

/* Footer ------------------------------------------------------------------ */
.c-footer {
	padding: clamp(56px, 6vw, 96px) var(--gutter) clamp(44px, 4vw, 62px);
	border-top: 1px solid var(--c-rule);
	background: var(--c-paper);
}
.c-footer__inner { max-width: var(--inner); margin: 0 auto; display: flex; flex-direction: column; }
.c-footer__cols {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 26px 64px;
	font-family: var(--f-mono);
	font-size: var(--t-mono-s);
	line-height: 1.9;
	letter-spacing: var(--ls-foot);
	text-transform: uppercase;
}
.c-footer__col { display: flex; flex-direction: column; gap: 12px; }
.c-footer__heading { color: var(--c-ink-quiet); }
.c-footer__col a { color: var(--c-ink-faint); }
.c-footer__col a:hover { color: var(--c-ink); }
.c-footer__colophon {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 22px;
	padding-top: clamp(58px, 5vw, 72px);
}
.c-footer__place {
	font-family: var(--f-mono);
	font-size: var(--t-mono-s);
	line-height: 1.9;
	letter-spacing: var(--ls-foot);
	text-transform: uppercase;
	text-align: right;
	color: var(--c-ink-colophon);
}
.c-footer__logo { width: clamp(58px, 4.5vw, 72px); height: auto; opacity: 0.92; }

/* Generic page (page.php) + 404 ---------------------------------------------- */
.c-prose { max-width: 600px; }
.c-prose > * + * { margin-top: 1.2em; }
.c-prose h2 { font-size: var(--t-h2); line-height: var(--t-h2-lh); letter-spacing: var(--t-h2-ls); margin-top: 1.8em; }
.c-prose h3 { font-size: var(--t-lead); line-height: 1.4; margin-top: 1.6em; }
.c-prose a { border-bottom: 1px solid var(--c-rule); }
.c-prose a:hover { border-color: var(--c-rule-strong); }
.c-prose ul, .c-prose ol { padding-left: 1.2em; }

/* Shown only when JS runs (filters, chips that need script). */
html:not(.js) .u-js-only { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.mnav, .mnav-list { transition: none; transform: none; }
}
@media print {
	.mnav, .mnav-btn { display: none !important; }
}