/* /musex (musex.html): the Muse Index, $MUSEX. The intro beside the ring
   (the four tokens as arcs sized by weight, drawn in one after another, a
   chip on each), the four as cards, how it works in three steps with the
   fee split as a bar, and the address. Hovering a chip or a card dims the
   other arcs. Each token keeps one hue: META bone, MUSEBOOK bright gold,
   MUSEGOD gold and AGRIPPA a deep gold. The shell is site.css; this is the
   page's own. No script. */

main {
	max-width: 1080px;
	margin: 0 auto;
	padding: 28px var(--pad) calc(56px + env(safe-area-inset-bottom));
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 72px;
	overflow-x: clip;
}
main > section {
	display: grid;
	gap: 22px;
	min-width: 0;
}
section h2 {
	margin: 0;
	font: italic 600 clamp(28px, 6.5vw, 42px) / 1.08 var(--serif);
	letter-spacing: -0.02em;
	color: var(--bone);
}
section h2 em {
	color: var(--gold-hi);
}
.sec-head p:not(.label) {
	max-width: 40em;
	color: var(--soft);
}
.go {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
.meta {
	--hue: var(--bone);
}
.book {
	--hue: var(--gold-hi);
}
.god {
	--hue: var(--gold);
}
.house {
	--hue: color-mix(in srgb, var(--gold) 72%, var(--void));
}

/* The intro: the words, and the ring beside them where there's room. */
.intro {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 28px;
	align-items: center;
}
.intro-copy {
	display: grid;
	gap: 12px;
	min-width: 0;
}
:where(.intro-copy) > * {
	margin: 0;
}
.intro h1 em {
	display: block;
}
.intro .lede {
	max-width: 30em;
}
.intro .go {
	margin-top: 8px;
}
@media (min-width: 900px) {
	.intro {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 40px;
	}
}

/* The ring: an SVG circle per token, each a dash of its weight (out of a
   pathLength of 100, one short for the gap) moved round by the weights
   before it (--o) and turned so META starts 40° past the top, drawn in from
   nothing (--d staggers them). The chips sit
   on the ring at each arc's middle angle (--a), on a circle 31.5% of the
   figure out from its middle, each pushed a fifth of its own width outward
   so it clears the name in the middle. */
.ring {
	position: relative;
	justify-self: center;
	width: 460px;
	max-width: 100%;
	aspect-ratio: 1;
	margin: 0;
	container-type: inline-size;
	background: radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb), 0.18), transparent 46%);
}
.ring svg {
	position: absolute;
	inset: 8%;
	width: 84%;
	height: 84%;
	transform: rotate(-50deg);
	overflow: visible;
}
.ring circle {
	fill: none;
	stroke-width: 26;
}
.track {
	stroke: rgba(var(--gold-rgb), 0.08);
}
.arc {
	stroke: var(--hue);
	stroke-dasharray: var(--w) 100;
	stroke-dashoffset: var(--o);
	animation: draw 1.1s var(--ease) var(--d) both;
	transition: opacity 0.3s;
	filter: drop-shadow(0 0 14px rgba(var(--gold-rgb), 0.25));
}
@keyframes draw {
	from {
		stroke-dasharray: 0 100;
	}
}
.core {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 6px;
	text-align: center;
}
.core b {
	font: 600 min(64px, 10.5cqi) / 1 var(--serif);
	letter-spacing: -0.01em;
	color: var(--gold-hi);
	text-shadow: 0 0 40px rgba(var(--gold-rgb), 0.35);
}
.core small {
	font: 400 12px var(--mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--dim);
}
.node {
	position: absolute;
	left: calc(50% + 31.5% * cos(var(--a)));
	top: calc(50% + 31.5% * sin(var(--a)));
	translate: calc(-50% + 20% * cos(var(--a))) calc(-50% + 20% * sin(var(--a)));
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 8px;
	border-radius: 999px;
	background: var(--card-hi);
	box-shadow:
		0 0 0 1px var(--line-hi),
		0 10px 30px -10px rgba(var(--void-rgb), 0.9);
	font: 700 13px / 1 var(--sans);
	letter-spacing: 0.04em;
	color: var(--bone);
	white-space: nowrap;
	animation: pop 0.6s var(--ease) var(--d) both;
}
.node i,
.four .t i {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--hue);
}
.node img {
	flex: none;
	width: 22px;
	height: 22px;
	margin: -2px 0;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px var(--gold);
}
.node em {
	font-style: normal;
	font-variant-numeric: tabular-nums;
	color: var(--gold-hi);
}
@keyframes pop {
	from {
		opacity: 0;
		scale: 0.8;
	}
}
@media (max-width: 420px) {
	.node {
		gap: 5px;
		padding: 5px 10px 5px 7px;
		font-size: 12px;
	}
}

/* Pointing at a token, on the ring or its card, leaves its arc lit. */
@media (hover: hover) {
	main:has(.meta:hover) .arc:not(.meta),
	main:has(.book:hover) .arc:not(.book),
	main:has(.god:hover) .arc:not(.god),
	main:has(.house:hover) .arc:not(.house) {
		opacity: 0.25;
	}
}

/* The four: a card each, its share of the basket as a bar under its line. */
.four {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.four .card {
	position: relative;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 8px;
	padding: 22px 20px;
	transition: background 0.3s;
}
@media (hover: hover) {
	.four .card:hover {
		background: var(--card-hi);
	}
}
:where(.four .card) > p {
	margin: 0;
}
.four .card > p:not(.t, .role) {
	color: var(--soft);
}
.four .t {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 700 14px var(--sans);
	letter-spacing: 0.06em;
	color: var(--bone);
}
.four .t img {
	flex: none;
	border-radius: 50%;
	box-shadow: 0 0 0 1.5px var(--gold);
}
.four .t span {
	margin-left: auto;
	font: 700 24px / 1 var(--sans);
	font-variant-numeric: tabular-nums;
	letter-spacing: 0;
	color: var(--gold-hi);
}
.role {
	font: italic 600 24px / 1.1 var(--serif);
	color: var(--hue);
}
.weight {
	height: 6px;
	margin-top: 6px;
	border-radius: 999px;
	background:
		linear-gradient(var(--hue), var(--hue)) 0 0 / calc(var(--w) * 1%) 100% no-repeat,
		rgba(var(--gold-rgb), 0.1);
}

/* How it works: three steps side by side where there's room. */
.steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.steps li {
	display: grid;
	align-content: start;
	gap: 8px;
	padding: 22px 20px;
	border-radius: 28px;
	background: rgba(var(--gold-rgb), 0.05);
	box-shadow: inset 0 0 0 1px var(--line);
}
:where(.steps li) > * {
	margin: 0;
}
.steps b {
	font: 600 18px / 1.3 var(--sans);
	color: var(--bone);
}
.steps p {
	color: var(--soft);
}
.s-i {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin-bottom: 4px;
	border-radius: 50%;
	background: rgba(var(--gold-rgb), 0.12);
	color: var(--gold-hi);
}
.s-i .i {
	width: 20px;
	height: 20px;
}

/* The fee as a bar: what stays in the basket, and Bankr's share. */
.fee {
	display: flex;
	gap: 3px;
	margin-top: 6px;
	font: 600 12px / 1.2 var(--sans);
}
.fee span {
	flex: var(--f) 1 0;
	display: grid;
	gap: 2px;
	padding: 8px 10px;
	border-radius: 10px;
	min-width: 0;
}
.fee b {
	font: 700 15px / 1 var(--sans);
	font-variant-numeric: tabular-nums;
}
.f-in {
	background: var(--gold);
	color: var(--ink);
}
.f-in b {
	color: var(--ink);
}
.f-out {
	background: rgba(var(--gold-rgb), 0.12);
	color: var(--soft);
}
.f-out b {
	color: var(--bone);
}

/* The address. */
.addr {
	padding: 28px 20px;
	background:
		radial-gradient(circle at 100% 0, rgba(var(--gold-rgb), 0.14), transparent 55%), var(--card);
}
.ca {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	padding: 12px 12px 12px 16px;
	border-radius: 16px;
	background: rgba(var(--void-rgb), 0.5);
	box-shadow: inset 0 0 0 1px var(--line-hi);
}
.ca code {
	flex: 1 1 16em;
	min-width: 0;
	font: 500 14px / 1.4 var(--mono);
	color: var(--gold-hi);
	overflow-wrap: anywhere;
}
.ca .btn .i {
	width: 15px;
	height: 15px;
}
@media (min-width: 700px) {
	.addr {
		padding: 36px 32px;
	}
}

main > .foot-note {
	max-width: 46em;
	margin: -40px 0 0;
}