/* The weekly pot's podium (potPodium in lib/pot.ts): 2nd, 1st, 3rd and 4th
   side by side on steps of falling height, 1st raised under a crown. The
   steps are 1st to 4th in the page and reordered here. `big` is /pot's last
   draw, which fills the page (on a phone 1st takes the top row and the other
   three sit under it); `small` is the pot panel's, four across beside the
   week's numbers on the home page and /muses. */
.podium {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	align-items: end;
}
.podium-place {
	display: grid;
	justify-items: center;
	gap: 6px;
	min-width: 0;
}
.podium-crown {
	display: grid;
	place-items: center;
	color: var(--gold-hi);
	filter: drop-shadow(0 0 12px rgba(var(--gold-hi-rgb), 0.7));
}
.podium-crown .i {
	width: 34px;
	height: 34px;
}
.podium-art {
	display: block;
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
	box-shadow:
		0 0 0 2px var(--ink, var(--line-hi)),
		0 0 36px rgba(var(--gold-rgb), 0.18);
}
.podium-art img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--card-hi);
	transition: transform 0.6s ease;
}
/* The name sits off the art, not against it, and reads as a caption rather
   than a link: the art above it is the link people press. */
.podium-name {
	padding-top: 6px;
	font-size: 14px;
	line-height: 1.3;
	overflow-wrap: anywhere;
	text-decoration: none;
}
.podium-n {
	margin: 0;
	display: grid;
	gap: 2px;
}
.podium-n b {
	font: 700 17px var(--sans);
	color: var(--bone);
	font-variant-numeric: tabular-nums;
}
.podium-n span {
	font-size: 12px;
	color: var(--ash);
}
.podium-n a {
	text-decoration: none;
}
.podium-step {
	display: grid;
	place-items: center;
	width: 100%;
	height: var(--h);
	margin-top: 4px;
	border-radius: 16px 16px 4px 4px;
	background: linear-gradient(180deg, rgba(var(--c), 0.42), rgba(var(--c), 0.06));
	box-shadow: inset 0 2px 0 rgba(var(--c), 0.9);
}
.podium-step span {
	font: italic 600 calc(var(--h) * 0.48) / 1 var(--serif);
	color: rgb(var(--c));
}
.podium-place.p1 {
	--c: var(--gold-hi-rgb);
	--ink: var(--gold-hi);
}
.podium-place.p2 {
	--c: var(--bone-rgb);
	--ink: var(--bone);
}
.podium-place.p3 {
	--c: var(--gold-rgb);
	--ink: var(--gold);
}
.podium-place.p4 {
	--c: var(--bone-rgb);
	--ink: var(--ash);
}
.podium-place.p4 .podium-step {
	opacity: 0.7;
}
/* /pot's cut: the page's own spotlight. */
.podium.big {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px 10px;
}
.podium.big .podium-place.p1 {
	grid-column: 1 / -1;
	position: relative;
}
.podium.big .podium-place.p1 .podium-art {
	width: min(240px, 64vw);
	border-radius: 26px;
	box-shadow:
		0 0 0 3px var(--gold-hi),
		0 0 70px rgba(var(--gold-hi-rgb), 0.55);
}
.podium.big .podium-place.p1 .podium-name {
	font: 600 22px / 1.15 var(--serif);
}
.podium.big .podium-place.p1 .podium-n b {
	font: 600 clamp(34px, 9vw, 48px) / 1.05 var(--serif);
	background: linear-gradient(100deg, var(--gold-hi), var(--bone) 45%, var(--gold));
	background-clip: text;
	color: transparent;
}
.podium.big .podium-place.p1 .podium-step {
	width: min(240px, 64vw);
}
.podium.big .podium-place.p1 {
	--h: 72px;
}
.podium.big .podium-place.p2 {
	--h: 78px;
}
.podium.big .podium-place.p3 {
	--h: 62px;
}
.podium.big .podium-place.p4 {
	--h: 50px;
}
@media (min-width: 760px) {
	.podium.big {
		grid-template-columns: 1fr 1.35fr 1fr 1fr;
		gap: 16px;
		max-width: 940px;
		margin: 0 auto;
		width: 100%;
	}
	.podium.big .podium-place.p1 {
		grid-column: auto;
		order: 2;
	}
	.podium.big .podium-place.p2 {
		order: 1;
	}
	.podium.big .podium-place.p3 {
		order: 3;
	}
	.podium.big .podium-place.p4 {
		order: 4;
	}
	.podium.big .podium-place.p1 .podium-art,
	.podium.big .podium-place.p1 .podium-step {
		width: 100%;
	}
	.podium.big .podium-place.p1 {
		--h: 150px;
	}
	.podium.big .podium-place.p2 {
		--h: 112px;
	}
	.podium.big .podium-place.p3 {
		--h: 88px;
	}
	.podium.big .podium-place.p4 {
		--h: 68px;
	}
}
/* The panel's cut: four across in the room beside the week's numbers, art at
   a face's size and the whole of a place on hover (lib/tip.ts). */
.podium.small {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 4px;
	justify-self: center;
	text-align: center;
	width: 100%;
	max-width: 520px;
}
.podium.small .podium-place {
	flex: 1 1 0;
	gap: 3px;
	max-width: 96px;
}
.podium.small .podium-art {
	width: 60px;
	border-radius: 14px;
	box-shadow:
		0 0 0 2px var(--ink, var(--line-hi)),
		0 0 24px rgba(var(--gold-rgb), 0.16);
}
.podium.small .podium-place.p1 .podium-art {
	width: 84px;
	border-radius: 18px;
	box-shadow:
		0 0 0 2px var(--gold-hi),
		0 0 44px rgba(var(--gold-hi-rgb), 0.45);
}
.podium.small .podium-crown .i {
	width: 20px;
	height: 20px;
}
.podium.small .podium-name {
	padding-top: 3px;
	font-size: 12px;
	line-height: 1.25;
	color: var(--soft);
}
.podium.small .podium-n b {
	font-size: 15px;
	color: var(--gold-hi);
}
.podium.small .podium-place.p1 .podium-n b {
	font-size: 18px;
}
.podium.small .podium-step {
	border-radius: 10px 10px 3px 3px;
	margin-top: 2px;
}
/* The small steps are too short for the big cut's type: a step's number
   keeps one size, and the last one stays as readable as the rest. */
.podium.small .podium-step span {
	font-size: 14px;
}
.podium.small .podium-place.p1 .podium-step span {
	font-size: 17px;
}
.podium.small .podium-place.p4 .podium-step {
	opacity: 0.85;
}
.podium.small .podium-place.p1 {
	--h: 46px;
	order: 2;
}
.podium.small .podium-place.p2 {
	--h: 36px;
	order: 1;
}
.podium.small .podium-place.p3 {
	--h: 29px;
	order: 3;
}
.podium.small .podium-place.p4 {
	--h: 23px;
	order: 4;
}
/* On a phone the four still stand side by side, at a size that leaves each
   name its own room. */
@media (max-width: 560px) {
	.podium.small .podium-place {
		max-width: 76px;
	}
	.podium.small .podium-art {
		width: 46px;
		border-radius: 11px;
	}
	.podium.small .podium-place.p1 .podium-art {
		width: 62px;
		border-radius: 14px;
	}
	.podium.small .podium-crown .i {
		width: 16px;
		height: 16px;
	}
	.podium.small .podium-name {
		font-size: 11px;
	}
	.podium.small .podium-n b {
		font-size: 13px;
	}
	.podium.small .podium-place.p1 .podium-n b {
		font-size: 16px;
	}
	.podium.small .podium-step span {
		font-size: 12px;
	}
	.podium.small .podium-place.p1 .podium-step span {
		font-size: 15px;
	}
	.podium.small .podium-place.p1 {
		--h: 38px;
	}
	.podium.small .podium-place.p2 {
		--h: 30px;
	}
	.podium.small .podium-place.p3 {
		--h: 25px;
	}
	.podium.small .podium-place.p4 {
		--h: 20px;
	}
}
@media (hover: hover) {
	.podium-art:hover img {
		transform: scale(1.05);
	}
}
@media (prefers-reduced-motion: reduce) {
	.podium-art img {
		transition: none;
	}
}