/* B"H
 * Boruch Hashem
 * Blessed is He
 * The Awtsmoos joins many routes in one crown; this shell gives Awtsmoos.com a compact and safe threshold.
 */
.civilization-header {
	align-items: center;
	background: rgba(5, 8, 17, .96);
	border-bottom: 1px solid var(--civil-line);
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	min-height: 4.5rem;
	padding: max(.65rem, env(safe-area-inset-top)) clamp(.8rem, 3vw, 2.25rem) .65rem;
	position: sticky;
	top: 0;
	z-index: 80;
}
.civilization-brand {
	align-items: center;
	color: var(--civil-text);
	display: inline-flex;
	font-weight: 850;
	gap: .7rem;
	letter-spacing: -.02em;
	min-height: 2.75rem;
	text-decoration: none;
}
.civilization-brand-mark {
	background: linear-gradient(145deg, var(--civil-cyan), #3984ff);
	border-radius: .8rem;
	color: #03101a;
	display: grid;
	font-size: 1.25rem;
	height: 2.75rem;
	place-items: center;
	width: 2.75rem;
}
.civilization-nav {
	display: flex;
	gap: .35rem;
}
.civilization-nav a {
	border: 1px solid transparent;
	border-radius: .75rem;
	color: var(--civil-text-soft);
	display: grid;
	min-height: 2.75rem;
	padding: .65rem .85rem;
	place-items: center;
	text-decoration: none;
}
.civilization-nav a:is(:hover, [aria-current="page"]) {
	background: var(--civil-surface);
	border-color: var(--civil-line);
	color: var(--civil-text);
}
@media (max-width: 720px) {
	.civilization-header {
		min-height: 4.25rem;
		padding-bottom: .55rem;
	}
	.civilization-nav {
		background: rgba(5, 8, 17, .98);
		border-top: 1px solid var(--civil-line);
		bottom: 0;
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		inset-inline: 0;
		padding: .35rem .45rem max(.35rem, env(safe-area-inset-bottom));
		position: fixed;
		z-index: 95;
	}
	.civilization-nav a {
		font-size: .74rem;
		padding-inline: .2rem;
	}
}