/* /places (places.html, filled by places/page.ts): Agent Places, the open
   spec. The intro beside the orbit (the week's busiest muse with every place
   around it, each in its hue from site.css, reports travelling in along the
   spokes), how it works as three cards, the patterns, what a place does,
   what a collection does beside its discovery file, and the places live
   today. The shell is site.css; this is the page's own. */

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, .go) {
	max-width: 40em;
	color: var(--soft);
}
.go {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}
.i {
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.8;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* The intro: the words, and the orbit beside them where there's room. */
.intro {
	display: grid;
	gap: 32px;
	align-items: center;
}
.intro-copy {
	display: grid;
	gap: 12px;
	min-width: 0;
}
:where(.intro-copy) > * {
	margin: 0;
}
.intro .lede {
	max-width: 30em;
}
.intro .go {
	margin-top: 8px;
}
.live {
	font-size: 14px;
	color: var(--dim);
	font-variant-numeric: tabular-nums;
}
@media (min-width: 900px) {
	.intro {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 40px;
	}
}

/* The orbit: a square with the muse at its middle and each place on a ring,
   placed by its angle (--a) at the ring's radius (--r), a spoke from the
   middle to it, and a dot of the place's hue running in along the spoke
   (each a little after the last, --d). */
.orbit {
	--size: 460px;
	--r: 172px;
	--node: 104px;
	--muse: 150px;
	justify-self: center;
	display: grid;
	gap: 6px;
	width: var(--size);
	max-width: 100%;
	margin: 0;
}
.sky {
	position: relative;
	aspect-ratio: 1;
	background:
		radial-gradient(circle at 50% 50%, rgba(var(--gold-rgb), 0.16), transparent 34%),
		radial-gradient(
			circle at 50% 50%,
			transparent calc(var(--r) - 1px),
			rgba(var(--gold-rgb), 0.18) var(--r),
			transparent calc(var(--r) + 1px)
		);
}
.orbit-muse {
	position: absolute;
	inset: 50% auto auto 50%;
	z-index: 2;
	width: var(--muse);
	height: var(--muse);
	margin: calc(var(--muse) / -2) 0 0 calc(var(--muse) / -2);
	border-radius: 50%;
	overflow: hidden;
	background: #0d0a06;
	box-shadow:
		0 0 0 2px rgba(var(--gold-rgb), 0.7),
		0 0 0 10px rgba(var(--gold-rgb), 0.08),
		0 20px 60px -10px rgba(var(--gold-rgb), 0.45);
}
.orbit-muse img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s;
}
@media (hover: hover) {
	.orbit-muse:hover img {
		transform: scale(1.06);
	}
}
.orbit-places {
	margin: 0;
	padding: 0;
	list-style: none;
}
.orbit .orb {
	position: absolute;
	inset: 50% auto auto 50%;
}
.spoke {
	position: absolute;
	left: 0;
	top: 0;
	width: var(--r);
	height: 1px;
	transform: rotate(var(--a));
	transform-origin: 0 50%;
	background: linear-gradient(
		90deg,
		transparent 18%,
		color-mix(in srgb, var(--hue) 45%, transparent)
	);
}
.spoke::after {
	content: "";
	position: absolute;
	top: -2.5px;
	left: calc(100% - var(--node) / 2);
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--hue);
	box-shadow: 0 0 10px var(--hue);
	opacity: 0;
	animation: inbound 3s ease-in var(--d) infinite;
}
@keyframes inbound {
	0% {
		left: calc(100% - var(--node) / 2);
		opacity: 0;
	}
	15% {
		opacity: 1;
	}
	80% {
		opacity: 1;
	}
	100% {
		left: calc(var(--muse) / 2);
		opacity: 0;
	}
}
@media (prefers-reduced-motion: reduce) {
	.spoke::after {
		animation: none;
	}
}
.orb-node {
	position: absolute;
	width: var(--node);
	margin: calc(var(--node) / -2) 0 0 calc(var(--node) / -2);
	transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a)));
	display: grid;
	justify-items: center;
	gap: 2px;
	text-align: center;
}
.orb-mark {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--hue) 14%, var(--card));
	box-shadow:
		inset 0 0 0 1px color-mix(in srgb, var(--hue) 45%, transparent),
		0 8px 24px -10px var(--hue);
}
.orb-mark img {
	display: block;
}
.orb-mark .glyph {
	font: 700 18px / 1 var(--sans);
	color: var(--hue);
}
.orb-node b {
	margin-top: 4px;
	font: 600 14px / 1.2 var(--sans);
	color: var(--bone);
	white-space: nowrap;
}
.orb-node small {
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--dim);
	font-variant-numeric: tabular-nums;
}
.orbit figcaption {
	font-size: 12.5px;
	text-align: center;
	color: var(--dim);
}
.orbit figcaption a {
	color: var(--soft);
}
@media (max-width: 559px) {
	.orbit {
		--size: 340px;
		--r: 122px;
		--node: 86px;
		--muse: 108px;
	}
	.orb-mark {
		width: 42px;
		height: 42px;
	}
	.orb-node b {
		font-size: 12.5px;
	}
	.orb-node small {
		display: none;
	}
}

/* Once the week's muse is in: the places it lives in stay lit, the rest
   step back. */
.orbit-places.lit .orb:not(.home) :is(.orb-mark, b) {
	opacity: 0.45;
}
.orbit-places.lit .orb:not(.home) .spoke {
	opacity: 0.35;
}
.orbit-places.lit .orb.home .orb-mark {
	box-shadow:
		inset 0 0 0 2px var(--hue),
		0 0 0 6px color-mix(in srgb, var(--hue) 14%, transparent),
		0 8px 28px -8px var(--hue);
}

/* Three voices: each card its mark, its name, what it says and a line it signs. */
.voices {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 14px;
}
.voices .card {
	display: grid;
	grid-template-rows: auto auto 1fr auto;
	gap: 10px;
	padding: 20px;
}
.v-i,
.p-i {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 12px;
	background: rgba(var(--gold-rgb), 0.1);
	color: var(--gold-hi);
}
.voices b {
	font: 600 22px / 1.15 var(--serif);
	color: var(--gold-hi);
}
.voices p {
	margin: 0;
	color: var(--soft);
}
.voices code {
	display: block;
	padding: 10px 12px;
	border-radius: 12px;
	background: rgba(var(--gold-rgb), 0.06);
	font: 12.5px / 1.5 var(--mono);
	color: var(--bone);
	overflow-wrap: anywhere;
}

/* The patterns: a card each, its mark, its point and the line under it. */
.patterns {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 14px;
}
.patterns li {
	display: grid;
	grid-template-columns: 38px minmax(0, 1fr);
	gap: 4px 14px;
	align-content: start;
	padding: 16px;
	border-radius: 18px;
	box-shadow: inset 0 0 0 1px var(--line);
}
.patterns .p-i {
	grid-row: span 2;
}
.patterns b {
	color: var(--bone);
	font-weight: 600;
}
.patterns p {
	margin: 0;
	font-size: 14.5px;
	color: var(--soft);
}

/* For places: a lit card with three numbered steps. */
.bring {
	padding: clamp(20px, 4vw, 36px);
	background:
		radial-gradient(90% 120% at 100% 0%, rgba(var(--gold-rgb), 0.12), transparent 60%), var(--card);
}
.steps {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 14px;
	counter-reset: step;
}
.steps li {
	counter-increment: step;
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	gap: 12px;
	align-items: start;
	color: var(--soft);
}
.steps li::before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 16px;
	background: rgba(var(--gold-rgb), 0.14);
	font: 700 14px var(--sans);
	color: var(--gold-hi);
}
.steps b {
	display: block;
	margin-bottom: 2px;
	color: var(--bone);
}
.bring > p {
	margin: 0;
	max-width: 46em;
	color: var(--soft);
}

/* For collections: the words beside the discovery file. */
.run {
	align-items: center;
}
.run .sec-head .go {
	margin-top: 8px;
}
.file {
	margin: 0;
	display: grid;
	gap: 8px;
	min-width: 0;
}
.file figcaption {
	font: 12.5px var(--mono);
}
.file figcaption a {
	color: var(--soft);
}
.file pre {
	margin: 0;
	padding: 16px;
	border-radius: 16px;
	background: var(--card);
	box-shadow: inset 0 0 0 1px var(--line);
	overflow-x: auto;
}
/* The long line wraps rather than scroll the panel sideways. */
.file code {
	display: block;
	font: 12.5px / 1.55 var(--mono);
	color: var(--bone);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
@media (min-width: 900px) {
	.run {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
		gap: 32px;
	}
}

/* Live today: each place in its hue, its mark, and how it reaches the record. */
.pl-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 10px;
}
.pl-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--hue) 6%, var(--card));
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 22%, transparent);
}
.pl-list .orb-mark {
	flex: none;
	width: 40px;
	height: 40px;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--hue) 45%, transparent);
}
.pl-list span:last-child {
	display: grid;
	gap: 2px;
	min-width: 0;
}
.pl-list b {
	font: 600 17px / 1.2 var(--serif);
	color: var(--bone);
}
.pl-list small {
	font-size: 13px;
	color: var(--dim);
	font-variant-numeric: tabular-nums;
}