/* The site's one system, loaded first by every page (the home page, the
   gallery, sales, the houses, the Altar and the muse page src/muse.ts writes):
   its colors and the pieces every page shares: dark cards, gold pill buttons,
   mono labels. Each page loads its own cut of the fonts (the home page's is
   the smallest, for the hero) and keeps only what is its own, after this. */

:root {
	color-scheme: dark;
	--void: #050403;
	--card: #14110c;
	--card-hi: #1d1811;
	--gold: #e0b35a;
	--gold-hi: #f3cf85;
	--bone: #efe6d2;
	--soft: #cdbfa4;
	--dim: #a79a82;
	--line: rgba(224, 179, 90, 0.14);
	--serif: "Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
	--sans: Figtree, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--pad: 16px;
	--arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 9 9 3M4 3h5v5' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3C/svg%3E");
}

* {
	box-sizing: border-box;
}
html,
body {
	margin: 0;
}
html {
	-webkit-text-size-adjust: 100%;
}
::selection {
	background: var(--gold);
	color: var(--void);
}
.sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* A section's label: small gold mono capitals. */
.label {
	margin: 0;
	font: 400 12px var(--mono);
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--gold);
}

/* Buttons: soft pills 48px tall, one gold and one quiet; a link out carries
   the arrow. .small for a secondary action inside a card. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 22px;
	font: 600 16px / 1.2 var(--sans);
	color: var(--void);
	background: var(--gold);
	border: 1px solid var(--gold);
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	transition:
		background-color 0.3s,
		color 0.3s,
		border-color 0.3s,
		opacity 0.3s,
		transform 0.15s;
}
.btn:active {
	transform: scale(0.98);
}
.btn.quiet {
	background: transparent;
	color: var(--bone);
	border-color: rgba(224, 179, 90, 0.45);
}
.btn.small {
	min-height: 40px;
	padding: 0 18px;
	font-size: 14px;
}
.btn:disabled {
	opacity: 0.6;
	cursor: default;
	background: transparent;
	color: var(--soft);
	border-color: var(--line);
}
a.btn::after {
	content: "";
	width: 11px;
	height: 11px;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--arrow) center / contain no-repeat;
	mask: var(--arrow) center / contain no-repeat;
	transition: transform 0.3s;
}
.btn.quiet::after {
	color: var(--gold);
}
@media (hover: hover) {
	.btn:hover:not(:disabled) {
		background: var(--gold-hi);
		border-color: var(--gold-hi);
	}
	.btn.quiet:hover:not(:disabled) {
		background: rgba(224, 179, 90, 0.1);
		border-color: var(--gold);
	}
	a.btn:hover::after {
		transform: translate(2px, -2px);
	}
}

/* Muse tiles (museTile in src/muse.ts and public/muses/tile.js): art, name
   and the "#id · tier · rank" line, in a grid that fits the width. */
.tiles {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 12px;
}
.tiles li {
	content-visibility: auto;
	contain-intrinsic-size: auto 230px;
}
.tiles a {
	display: grid;
	gap: 8px;
	padding: 8px;
	border-radius: 20px;
	background: var(--card);
	color: inherit;
	text-decoration: none;
	transition: background-color 0.15s;
}
@media (hover: hover) {
	.tiles a:hover {
		background: var(--card-hi);
	}
}
.tiles img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 14px;
	background: var(--card-hi);
}
.tiles a > span {
	display: grid;
	gap: 2px;
	padding: 0 4px 4px;
	min-width: 0;
}
.tiles b {
	font: 600 17px / 1.2 var(--sans);
	color: var(--gold-hi);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tiles em {
	font: 500 14px / 1.2 var(--sans);
	color: var(--gold);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.tiles small {
	font: 400 12px var(--mono);
	color: var(--dim);
}
@media (min-width: 760px) {
	.tiles {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
		gap: 14px;
	}
}

/* A card: a dark panel with soft corners. */
.card {
	padding: 24px 20px;
	border-radius: 28px;
	background: var(--card);
}

/* The quiet line at the foot of a page. */
.foot-note {
	margin: 0;
	font-size: 14px;
	color: var(--dim);
}
.foot-note a {
	color: var(--soft);
}