/* biome-ignore-all lint/style/noDescendingSpecificity: the header and footer rules read top to bottom; the later, more general ones are deliberate */
/* The site's one header (src/header.ts writes it into every page, header.js
   runs it). A grid, so nothing moves when the online pill or the copied state
   changes a side's width: phones have the name and the end; wider screens add
   the links as a fixed middle column. It sticks to the top of every page; on
   the home page it floats over the hero and turns solid once the hero is past. */
.bar {
	--hb-gold: var(--gold, #e0b35a);
	--hb-gold-hi: var(--gold-hi, #f3cf85);
	--hb-bone: var(--bone, #efe6d2);
	--hb-ash: var(--ash, #b8ab91);
	--hb-soft: var(--soft, #cdbfa4);
	--hb-pad: var(--pad, 16px);
	--hb-mono: var(--mono, "IBM Plex Mono", ui-monospace, Menlo, monospace);
	position: sticky;
	top: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
	min-height: 64px;
	padding: max(10px, env(safe-area-inset-top)) var(--hb-pad) 10px;
	font-size: 16px;
	line-height: normal;
	background: rgba(5, 4, 3, 0.9);
	box-shadow: 0 1px 0 rgba(224, 179, 90, 0.12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	transition:
		background-color 0.4s,
		box-shadow 0.4s;
}
.bar.intro {
	position: fixed;
	left: 0;
	right: 0;
	background: linear-gradient(to bottom, rgba(5, 4, 3, 0.9), rgba(5, 4, 3, 0));
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	pointer-events: none;
}
.bar.intro > * {
	pointer-events: auto;
}
.bar.intro.solid {
	background: rgba(5, 4, 3, 0.9);
	box-shadow: 0 1px 0 rgba(224, 179, 90, 0.12);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}
.bar .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.bar .name {
	grid-column: 1;
	justify-self: start;
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 0;
	font: 400 13px var(--hb-mono);
	letter-spacing: 0.42em;
	color: var(--hb-gold);
	text-decoration: none;
	white-space: nowrap;
}
.bar .name a {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
	text-decoration: none;
}
/* The god's face as the mark: a small round portrait in a thin gold ring. */
.bar .mark {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow:
		0 0 0 1px rgba(224, 179, 90, 0.55),
		0 0 12px rgba(224, 179, 90, 0.25);
}
.bar .i {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* Phones: the links rise from the bottom as a sheet, over a dim scrim. Wider:
   one row in the middle, its groups split by hairlines. */
.bar nav {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 2px;
	max-height: 85svh;
	overflow-y: auto;
	padding: 12px 12px calc(16px + env(safe-area-inset-bottom));
	border-radius: 24px 24px 0 0;
	background: #14110c;
	box-shadow:
		0 0 0 1px rgba(224, 179, 90, 0.18),
		0 -18px 50px rgba(0, 0, 0, 0.6);
	transform: translateY(105%);
	visibility: hidden;
	transition:
		transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1),
		visibility 0s 0.35s;
}
.bar nav.open {
	transform: none;
	visibility: visible;
	transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bar .menu-scrim {
	position: fixed;
	inset: 0;
	z-index: 1;
	background: rgba(0, 0, 0, 0.55);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.bar.menu-open {
	/* A backdrop filter makes the bar the box its fixed children sit in, which
	   would pin the sheet and the scrim to the bar; open, the bar drops it. */
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	background: rgba(5, 4, 3, 0.98);
}
.bar.menu-open .menu-scrim {
	opacity: 1;
	pointer-events: auto;
}
.bar nav > a {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding: 0 16px;
	border-radius: 14px;
	font: 600 20px / 1.2 var(--sans, Figtree, system-ui, sans-serif);
	color: var(--hb-bone);
	text-decoration: none;
	transition:
		color 0.3s,
		background-color 0.3s;
}
.bar nav > a:hover {
	background: rgba(224, 179, 90, 0.08);
}
.bar nav > a[aria-current] {
	color: var(--hb-gold-hi);
}
/* The groups: a small gold label over each in the phone sheet, a hairline
   between them in the row wider up. */
.bar .nav-g {
	margin: 12px 16px 2px;
	font: 400 11px var(--hb-mono);
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--hb-gold);
}
.bar .nav-g:first-child {
	margin-top: 4px;
}
/* The Muses' last 24 hours on the Sales link (header.js): the gold twin of
   the online pill. Three bars play like a level meter, a sheen crosses it
   now and then, and a new number ticks up into place. */
.bar .vol {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-left: auto;
	min-height: 26px;
	padding: 0 10px 0 9px;
	overflow: hidden;
	border-radius: 999px;
	font: 500 12px var(--sans, Figtree, system-ui, sans-serif);
	white-space: nowrap;
	color: #f7e3b5;
	background: linear-gradient(90deg, rgba(224, 179, 90, 0.2), rgba(224, 179, 90, 0.05));
	box-shadow: inset 0 0 0 1px rgba(224, 179, 90, 0.42);
	transition: box-shadow 0.35s;
}
.bar .vol[hidden] {
	display: none;
}
.bar .vol b {
	font-weight: 700;
	color: #fff4d6;
	font-variant-numeric: tabular-nums;
}
.bar .vol b.tick {
	animation: tick-up 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.bar .vol-u {
	margin-left: -2px;
	color: #f3cf85;
}
.bar .vol-t {
	font: 400 10px var(--hb-mono);
	letter-spacing: 0.08em;
	color: rgba(243, 207, 133, 0.7);
}
.bar .vol-eq {
	display: inline-flex;
	align-items: flex-end;
	gap: 2px;
	width: 11px;
	height: 11px;
	margin-right: 2px;
}
.bar .vol-eq i {
	flex: 1;
	height: 100%;
	border-radius: 1px;
	background: linear-gradient(#fff1c9, #e0b35a);
	box-shadow: 0 0 6px rgba(243, 207, 133, 0.7);
	transform-origin: bottom;
	animation: vol-eq 1.1s ease-in-out infinite;
}
.bar .vol-eq i:nth-child(2) {
	animation-duration: 0.8s;
	animation-delay: -0.3s;
}
.bar .vol-eq i:nth-child(3) {
	animation-duration: 1.3s;
	animation-delay: -0.6s;
}
@keyframes vol-eq {
	0%,
	100% {
		transform: scaleY(0.3);
	}
	50% {
		transform: scaleY(1);
	}
}
.bar .vol::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		100deg,
		transparent 30%,
		rgba(255, 240, 200, 0.35) 50%,
		transparent 70%
	);
	transform: translateX(-120%);
	animation: vol-sheen 6s ease-in-out 2s infinite;
	pointer-events: none;
}
@keyframes vol-sheen {
	0%,
	70% {
		transform: translateX(-120%);
	}
	100% {
		transform: translateX(120%);
	}
}
@media (hover: hover) {
	.bar nav > a:hover .vol {
		box-shadow:
			inset 0 0 0 1px rgba(243, 207, 133, 0.75),
			0 0 22px rgba(224, 179, 90, 0.35);
	}
}
.menu-more {
	display: grid;
	gap: 2px;
	margin-top: 8px;
	padding-top: 8px;
	box-shadow: inset 0 1px 0 rgba(224, 179, 90, 0.14);
}
.menu-more a,
.ca-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	min-height: 48px;
	padding: 0 16px;
	border: 0;
	border-radius: 12px;
	background: none;
	font: 500 16px var(--sans, Figtree, system-ui, sans-serif);
	color: var(--hb-soft);
	text-decoration: none;
	cursor: pointer;
}
.ca-row code {
	font: 400 13px var(--hb-mono);
	color: var(--hb-gold);
}
.menu-more a .i {
	width: 14px;
	height: 14px;
	color: var(--hb-gold);
}
.menu-more a:hover,
.ca-row:hover {
	color: var(--hb-bone);
	background: rgba(224, 179, 90, 0.08);
}
.bar-end {
	grid-column: -2;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}
/* How many are here right now (live.js), in the bar only once it's 10 or
   more, and only on wide screens; the pill's look is live.css's .now. */
.bar .now-bar {
	display: none;
	align-items: center;
	gap: 4px;
	min-height: 32px;
	padding: 0 12px 0 10px;
	border-radius: 999px;
	font: 500 13px var(--sans, Figtree, system-ui, sans-serif);
}
.bar .now-bar .now-dot {
	margin-right: 5px;
}
/* The one thing to do now (header.js keeps its label and link on the calendar). */
.bar-cta {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border-radius: 999px;
	background: var(--hb-gold);
	font: 600 14px var(--sans, Figtree, system-ui, sans-serif);
	color: #050403;
	text-decoration: none;
	transition: background-color 0.3s;
}
.bar-cta:hover {
	background: var(--hb-gold-hi);
}
.ca-mini {
	display: none;
	min-height: 40px;
	padding: 0 12px;
	border: 0;
	border-radius: 999px;
	background: rgba(224, 179, 90, 0.08);
	box-shadow: inset 0 0 0 1px rgba(224, 179, 90, 0.2);
	font: 400 12px var(--hb-mono);
	letter-spacing: 0.02em;
	color: var(--hb-ash);
	cursor: pointer;
	transition: color 0.3s;
}
.ca-mini [data-label] {
	display: inline-block;
	text-align: left;
}
.ca-mini b {
	margin-right: 0.6em;
	font-weight: 400;
	color: var(--hb-gold);
}
.ca-mini:hover {
	color: var(--hb-bone);
}
.menu-btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	margin-right: -10px;
	border: 0;
	border-radius: 12px;
	background: none;
	color: var(--hb-bone);
	cursor: pointer;
}
.menu-btn .i {
	width: 22px;
	height: 22px;
}
.menu-btn .x,
.menu-btn[aria-expanded="true"] .m {
	display: none;
}
.menu-btn[aria-expanded="true"] .x {
	display: block;
}
.bar a:focus-visible,
.bar button:focus-visible {
	outline: 2px solid var(--hb-gold);
	outline-offset: 2px;
}
/* Anchors land below the bar: live.js keeps --bar-h at its real height. */
html {
	scroll-padding-top: calc(var(--bar-h, 64px) + 12px);
}
/* Very narrow phones: the mark alone, so the button and the menu fit. */
@media (max-width: 360px) {
	.bar .name {
		font-size: 0;
		letter-spacing: 0;
	}
}
@media (min-width: 900px) {
	.bar {
		--hb-pad: max(var(--pad, 16px), 32px);
		grid-template-columns: 1fr auto 1fr;
		min-height: 72px;
	}
	.bar nav,
	.bar nav.open {
		grid-column: 2;
		position: static;
		flex-direction: row;
		align-items: center;
		gap: 2px;
		max-height: none;
		overflow: visible;
		padding: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
		transform: none;
		visibility: visible;
		transition: none;
	}
	.bar nav > a {
		min-height: 40px;
		padding: 0 12px;
		white-space: nowrap;
		font: 500 15px var(--sans, Figtree, system-ui, sans-serif);
		color: var(--hb-ash);
	}
	.bar nav > a:hover {
		color: var(--hb-bone);
		background: none;
	}
	.bar nav > a[aria-current] {
		color: var(--hb-gold-hi);
	}
	.bar .vol {
		margin-left: 8px;
	}
	.bar .nav-g {
		width: 1px;
		height: 18px;
		margin: 0 8px;
		overflow: hidden;
		font-size: 0;
		background: rgba(224, 179, 90, 0.24);
	}
	.bar .nav-g:first-child {
		display: none;
	}
	.menu-more,
	.menu-scrim,
	.menu-btn {
		display: none;
	}
}
/* Between the two, the row tightens so every link stays on one line. */
@media (min-width: 900px) and (max-width: 1179px) {
	.bar nav > a {
		padding: 0 8px;
	}
	.bar .nav-g {
		margin: 0 4px;
	}
	.bar .vol {
		margin-left: 6px;
	}
	.bar .vol-t {
		display: none;
	}
}
@media (min-width: 1180px) {
	.ca-mini {
		display: inline-flex;
		align-items: center;
	}
}
@media (min-width: 1000px) {
	.bar .now-bar:not([hidden]) {
		display: inline-flex;
	}
	/* In the bar it also opens from no width, so the CTA and CA slide over
	   rather than jump. */
	.bar .now-bar.arrive {
		overflow: hidden;
		animation: now-bar-arrive 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
	}
}
@keyframes now-bar-arrive {
	from {
		max-width: 0;
		padding-inline: 0;
		margin-right: -8px;
		opacity: 0;
	}
	to {
		max-width: 160px;
	}
}
@media (prefers-reduced-motion: reduce) {
	.bar nav {
		transition: none;
	}
	.bar .vol-eq i,
	.bar .vol::after,
	.bar .vol b.tick {
		animation: none;
	}
	.bar .vol-eq i {
		transform: scaleY(0.7);
	}
}

/* The secondary footer (src/header.ts footer()), on every page but home: the
   seal and the contract address, then the links out, over a dark gold glow
   and a little dust, with the name set large and faint behind. */
.site-foot {
	--sf-gold: var(--gold, #e0b35a);
	--sf-bone: var(--bone, #efe6d2);
	--sf-soft: var(--soft, #cdbfa4);
	--sf-dim: var(--dim, #a79a82);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	margin-top: 64px;
	padding: 56px var(--pad, 16px) calc(28px + env(safe-area-inset-bottom));
	background:
		radial-gradient(90% 70% at 15% 0%, rgba(224, 179, 90, 0.14), transparent 60%),
		radial-gradient(70% 60% at 100% 100%, rgba(255, 122, 82, 0.08), transparent 60%), #0a0806;
	box-shadow: inset 0 1px 0 rgba(224, 179, 90, 0.18);
	font: 15px / 1.5 var(--sans, Figtree, system-ui, sans-serif);
	color: var(--sf-soft);
}
.site-foot::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: url(/glitter.webp) 0 0 / 320px repeat;
	opacity: 0.35;
	-webkit-mask: linear-gradient(to bottom, #000, transparent 70%);
	mask: linear-gradient(to bottom, #000, transparent 70%);
}
.sf-in {
	max-width: 1120px;
	margin: 0 auto;
	display: grid;
	gap: 40px;
}
.sf-brand {
	display: grid;
	gap: 12px;
	justify-items: start;
}
.sf-brand p {
	margin: 0;
	font: italic 400 22px / 1.25 var(--serif, "Bodoni Moda", Georgia, serif);
	color: var(--sf-bone);
}
.sf-seal {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
}
.sf-seal img {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow:
		0 0 0 1px rgba(224, 179, 90, 0.5),
		0 0 30px rgba(224, 179, 90, 0.2);
}
.sf-seal span {
	font: 400 13px var(--mono, "IBM Plex Mono", ui-monospace, monospace);
	letter-spacing: 0.5em;
	color: var(--sf-gold);
}
.sf-ca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px;
	border: 0;
	border-radius: 999px;
	background: rgba(224, 179, 90, 0.1);
	box-shadow: inset 0 0 0 1px rgba(224, 179, 90, 0.3);
	font: 400 13px var(--mono, "IBM Plex Mono", ui-monospace, monospace);
	color: var(--sf-bone);
	cursor: pointer;
}
.sf-ca .i {
	width: 15px;
	height: 15px;
	color: var(--sf-gold);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
@media (hover: hover) {
	.sf-ca:hover {
		background: rgba(224, 179, 90, 0.18);
	}
}
.sf-cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px 20px;
}
.sf-cols p {
	margin: 0 0 10px;
	font: 400 11px var(--mono, "IBM Plex Mono", ui-monospace, monospace);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sf-gold);
}
.sf-cols ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 2px;
}
.sf-cols li {
	margin: 0;
}
.sf-cols a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 36px;
	color: var(--sf-soft);
	text-decoration: none;
	transition: color 0.2s;
}
.sf-cols a:hover {
	color: var(--sf-bone);
}
.sf-cols a .i {
	width: 13px;
	height: 13px;
	color: var(--sf-dim);
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.site-foot a:focus-visible,
.site-foot button:focus-visible {
	outline: 2px solid var(--sf-gold);
	outline-offset: 3px;
}
.site-foot .sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
.sf-small {
	max-width: 1120px;
	margin: 40px auto 0;
	font-size: 13px;
	color: var(--sf-dim);
}
/* The flock's door for agents: a plain, quiet link, not a feature. */
.sf-small .for-agents,
.colophon .for-agents {
	color: inherit;
	text-underline-offset: 3px;
}
.sf-mark {
	position: absolute;
	right: -0.04em;
	bottom: -0.28em;
	z-index: -1;
	margin: 0;
	font: italic 400 clamp(96px, 22vw, 260px) / 1 var(--serif, "Bodoni Moda", Georgia, serif);
	letter-spacing: -0.03em;
	color: rgba(224, 179, 90, 0.07);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}
@media (min-width: 760px) {
	.site-foot {
		padding-top: 72px;
	}
	.sf-in {
		grid-template-columns: minmax(240px, 1fr) 2fr;
		gap: 56px;
	}
	.sf-cols {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}