.hero {
	position: relative;
	color: var(--bone);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto 1fr auto;
	min-height: max(100svh, 640px);
	background: var(--black);
	overflow: hidden;
	isolation: isolate;
}

.hero__stage {
	grid-row: 2;
}

.hero__foot {
	grid-row: 3;
}

.hero__film {
	position: absolute;
	inset: 0;
	z-index: -2;
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
}

.hero__film video,
.hero__film img {
	grid-area: 1 / 1;
	width: min(118vw, 190svh);
	max-width: none;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	opacity: var(--film-opacity);
	filter: var(--film-filter);
	mix-blend-mode: var(--film-blend);
	-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
	mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
	translate: 0 -3svh;
}

.hero__film {
	scale: calc(1 + var(--out, 0) * .28);
}

.hero__film video {
	opacity: 0;
	transition: opacity 1.4s ease;
}

.hero__film video.is-playing {
	opacity: var(--film-opacity);
}

.hero__stage {
	position: relative;
	translate: 0 calc(var(--out, 0) * -16svh);
	opacity: calc(1 - var(--out, 0) * 1.6);
	display: grid;
	align-content: center;
	justify-items: center;
	padding: calc(var(--head-h) + 3svh) var(--gutter) 3svh;
	text-align: center;
}

.hero__stage::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 66%;
	z-index: -1;
	width: min(860px, 96vw);
	height: 44%;
	translate: -50% -50%;
	background: radial-gradient(closest-side, rgb(var(--scrim) / .86) 35%, transparent);
	pointer-events: none;
}

/* In light mode the whole stage sits on a cream veil, so the title and the eyebrow
   never fall on the bright part of the footage. */

:root[data-theme="light"] .hero__stage::before {
	top: 50%;
	width: min(1100px, 100vw);
	height: 92%;
	background: radial-gradient(ellipse 60% 50% at 50% 50%, rgb(var(--scrim) / .92) 45%, rgb(var(--scrim) / .55) 72%, transparent 100%);
}

.hero__eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: clamp(12px, 2svh, 22px);
	font-family: var(--display);
	font-stretch: 78%;
	font-weight: 700;
	font-size: clamp(.95rem, 1.35vw, 1.3rem);
	letter-spacing: .22em;
	text-transform: uppercase;
}

.hero__eyebrow::before,
.hero__eyebrow::after {
	content: "";
	width: clamp(28px, 5vw, 72px);
	height: 1px;
	background: var(--gold);
}

.hero__eyebrow em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-size: 1.12em;
	color: var(--gold);
}

.hero__name {
	font-size: var(--t-name);
	line-height: .86;
	color: var(--bone);
}

.js .hero__name .line,
.hero__name .line {
	display: block;
	white-space: nowrap;
}

.hero__sentence {
	margin-top: clamp(14px, 2.2svh, 26px);
	max-width: 44ch;
	text-align: center;
}

.hero__bracket {
	margin-top: 14px;
	font-size: 1.0625rem;
}

.hero__acts {
	margin-top: clamp(20px, 3.4svh, 38px);
	justify-content: center;
}

.hero__plate {
	position: absolute;
	left: var(--gutter);
	bottom: calc(140px + 1svh);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	text-align: left;
}

.hero__plate .frame {
	width: clamp(120px, 11.5vw, 186px);
	border: 1px solid var(--line-2);
}

.hero__plate figcaption {
	display: grid;
	gap: 4px;
	padding-bottom: 2px;
}

.hero__foot {
	position: relative;
	z-index: 2;
	min-width: 0;
}

.hero__year {
	padding-block: 10px 12px;
	text-align: center;
	font-size: .9375rem;
}

@media (max-width: 900px) {
	.hero__plate {
		position: static;
		justify-self: center;
		margin-top: clamp(20px, 3svh, 32px);
		order: 5;
	}

	.hero__plate .frame {
		width: 96px;
	}
}

@media (max-width: 640px) {
	.hero__film video,
	.hero__film img {
		width: 100svh;
		rotate: 90deg;
		translate: 0 -5svh;
		-webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
		mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 62%, transparent 100%);
	}

	.hero__name {
		line-height: .84;
	}

	.js .hero__name .line,
	.hero__name .line {
		white-space: normal;
	}

	.hero__sentence {
		font-size: 1.125rem;
	}
}

/* Dial: the parts of the page hung under an arc above the name, with a small sun that travels the arc */

.dial {
	--dial-step: clamp(84px, 8.4vw, 122px);
	--dial-b: 0px;
	--n: 7;
	--a: calc(var(--n) * .5 + .1);
	--s: 0;
	grid-row: 1;
	position: relative;
	z-index: 3;
	justify-self: center;
	width: calc(var(--dial-step) * var(--n));
	max-width: 100%;
	padding-top: calc(var(--head-h) + 1.6svh);
	translate: 0 calc(var(--out, 0) * -10svh);
	opacity: calc(1 - var(--out, 0) * 2);
}

.hero--dial .hero__stage {
	padding-top: 2svh;
}

.dial__sky {
	position: relative;
	height: 14px;
}

.dial__arc {
	position: absolute;
	left: 50%;
	top: 6px;
	width: calc(var(--dial-step) * var(--a) * 2);
	height: 1px;
	translate: -50% 0;
	background: linear-gradient(to right, transparent, var(--line-2) 12%, var(--line-2) 88%, transparent);
}

.dial__sun {
	position: absolute;
	left: 50%;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--gold);
	box-shadow: 0 0 0 4px rgb(212 175 55 / .16), 0 0 22px 6px rgb(212 175 55 / .5);
	translate: calc(var(--s) * var(--dial-step) - 50%) -50%;
}

.dial__list {
	display: grid;
	grid-template-columns: repeat(var(--n), var(--dial-step));
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dial__item {
	display: grid;
	grid-template-rows: auto auto auto;
	align-content: start;
	justify-items: center;
	gap: 7px;
	padding: 6px 2px 4px;
	text-decoration: none;
	transition: translate var(--mid) var(--ease), color var(--fast) ease;
}

.dial__num {
	font-size: .875rem;
	line-height: 1;
}

.dial__disc {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border: 1px solid var(--line-2);
	border-radius: 50%;
	background: rgb(var(--scrim) / .66);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: border-color var(--fast) ease, background-color var(--mid) ease, color var(--fast) ease, scale var(--mid) var(--ease);
}

.dial__disc .icon {
	width: 24px;
	height: 24px;
}

.dial__label {
	/* One line, always: a second line would push its own item out of step with the rest */
	align-self: start;
	max-width: 100%;
	padding: 3px 7px;
	border-radius: var(--radius);
	background: rgb(var(--scrim) / .84);
	font-size: var(--t-label);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: .06em;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--bone);
	transition: color var(--fast) ease;
}

.dial__item:hover,
.dial__item:focus-visible,
.dial__item.is-on {
	translate: 0 -4px;
}

.dial__item:hover .dial__disc,
.dial__item:focus-visible .dial__disc,
.dial__item.is-on .dial__disc {
	border-color: var(--gold);
	background: var(--gold);
	color: #000;
	scale: 1.1;
}

.dial__item:hover .dial__label,
.dial__item:focus-visible .dial__label,
.dial__item.is-on .dial__label {
	color: var(--gold-pale);
}

.dial__note {
	display: none;
	min-height: 1.5em;
	margin-top: 10px;
	text-align: center;
	font-size: 1.0625rem;
	transition: opacity var(--fast) ease;
}

.dial__note.is-changing {
	opacity: 0;
}

/* Room to spare: the row bends into an arc and the caption shows */

@media (min-width: 1020px) and (min-height: 860px) {
	.dial__note {
		display: block;
	}

	@supports (translate: 0 calc(sqrt(4) * 1px)) {
		.dial {
			--dial-b: clamp(90px, 12svh, 150px);
		}

		.dial__sky {
			height: 20px;
		}

		.dial__arc {
			top: 8px;
			height: calc(var(--dial-b) * 2);
			border: 1px solid var(--line-2);
			border-radius: 50%;
			background: none;
			clip-path: inset(-2px -2px 76% -2px);
			-webkit-mask-image: linear-gradient(to right, transparent 5%, #000 20%, #000 80%, transparent 95%);
			mask-image: linear-gradient(to right, transparent 5%, #000 20%, #000 80%, transparent 95%);
		}

		.dial__sun {
			top: 8px;
			translate:
				calc(var(--s) * var(--dial-step) - 50%)
				calc((1 - sqrt(1 - (var(--s) / var(--a)) * (var(--s) / var(--a)))) * var(--dial-b) - 50%);
		}

		.dial__list > li {
			translate: 0 calc((1 - sqrt(1 - (var(--d, 0) / var(--a)) * (var(--d, 0) / var(--a)))) * var(--dial-b));
		}

		.dial__note {
			margin-top: calc(var(--dial-b) * .2);
		}
	}
}

/* Short windows have no room for it */

@media (max-height: 640px) and (min-width: 641px) {
	.dial {
		display: none;
	}

	.hero--dial .hero__stage {
		padding-top: calc(var(--head-h) + 3svh);
	}
}

/* Phones: one row to swipe */

@media (max-width: 640px) {
	.dial {
		width: 100%;
		padding-top: calc(var(--head-h) + 4px);
	}

	.dial__sky {
		display: none;
	}

	.dial__list {
		display: flex;
		justify-content: flex-start;
		gap: 2px;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-inline: var(--gutter);
		scrollbar-width: none;
		-webkit-mask-image: linear-gradient(to right, #000 86%, transparent);
		mask-image: linear-gradient(to right, #000 86%, transparent);
	}

	.dial__list::-webkit-scrollbar {
		display: none;
	}

	.dial__list > li {
		flex: none;
		width: 68px;
		scroll-snap-align: start;
	}

	.dial__list > li:last-child {
		margin-right: 40px;
	}

	.dial__disc {
		width: 46px;
		height: 46px;
	}

	.dial__disc .icon {
		width: 21px;
		height: 21px;
	}

	.dial__label {
		font-size: .6875rem;
		letter-spacing: .06em;
	}
}

/* Inner page head: smaller echo of the hero */

.page-head {
	position: relative;
	display: grid;
	align-content: end;
	min-height: min(68svh, 640px);
	padding: calc(var(--head-h) + clamp(56px, 9vw, 120px)) 0 clamp(36px, 5vw, 72px);
	border-bottom: 1px dashed var(--line-2);
	overflow: hidden;
	isolation: isolate;
}

.page-head--film {
	background: var(--black);
	color: var(--bone);
}

.page-head__film {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: calc(var(--film-opacity) * .5);
	filter: var(--film-filter);
	mix-blend-mode: var(--film-blend);
	-webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
	mask-image: linear-gradient(to bottom, #000 30%, transparent 96%);
}

.page-head__film {
	scale: calc(1.06 + var(--out, 0) * .2);
}

/* Lines of words behind a title: the titles of the writings, huge and faint, drifting opposite ways */

.page-head__words {
	position: absolute;
	inset: 0;
	z-index: -1;
	display: grid;
	align-content: center;
	gap: clamp(8px, 1.2vw, 20px);
	overflow: hidden;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 62%, transparent 100%);
	mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 62%, transparent 100%);
}

.page-head__words-row {
	display: flex;
	gap: clamp(28px, 4vw, 72px);
	width: max-content;
	font-family: var(--display);
	font-weight: 900;
	font-size: clamp(3.6rem, 9vw, 9.5rem);
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	color: transparent;
	-webkit-text-stroke: 1px color-mix(in srgb, var(--gold) 55%, transparent);
	animation: words-drift 160s linear infinite;
}

.page-head__words-row--back {
	animation-direction: reverse;
	animation-duration: 200s;
	color: color-mix(in srgb, var(--bone) 7%, transparent);
	-webkit-text-stroke: 0;
}

.page-head__words-row span::after {
	content: "\2726";
	margin-left: clamp(28px, 4vw, 72px);
	font-size: .4em;
	vertical-align: middle;
	color: color-mix(in srgb, var(--gold) 60%, transparent);
	-webkit-text-stroke: 0;
}

@keyframes words-drift {
	to { transform: translateX(calc(-50% - clamp(14px, 2vw, 36px))); }
}

@media (prefers-reduced-motion: reduce) {
	.page-head__words-row { animation: none; }
}

/* A wall of pictures behind a title: two rows drifting opposite ways, tipped back, fading into the page */

.page-head__wall {
	position: absolute;
	inset: -6% -10% 0 22%;
	z-index: -1;
	display: grid;
	align-content: center;
	gap: clamp(14px, 1.6vw, 24px);
	opacity: .5;
	transform: perspective(1400px) rotateY(-16deg) rotateX(6deg) rotate(-3deg);
	transform-origin: 100% 50%;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 38%, #000 100%), linear-gradient(to bottom, #000 55%, transparent 98%);
	mask-image: linear-gradient(to right, transparent 0, #000 38%, #000 100%), linear-gradient(to bottom, #000 55%, transparent 98%);
	-webkit-mask-composite: source-in;
	mask-composite: intersect;
	pointer-events: none;
}

.page-head__wall-row {
	display: flex;
	gap: clamp(14px, 1.6vw, 24px);
	width: max-content;
	animation: wall-drift 70s linear infinite;
}

.page-head__wall-row--back {
	animation-direction: reverse;
	animation-duration: 90s;
}

.page-head__wall img {
	flex: none;
	width: clamp(120px, 13vw, 210px);
	height: clamp(120px, 13vw, 210px);
	object-fit: cover;
	border-radius: 2px;
	box-shadow: 0 18px 36px -18px rgb(0 0 0 / .6);
}

@keyframes wall-drift {
	to { transform: translateX(calc(-50% - clamp(7px, .8vw, 12px))); }
}

@media (max-width: 780px) {
	.page-head__wall {
		inset: -4% -30% 0 0;
		opacity: .28;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-head__wall-row { animation: none; }
}

.page-head__wheel {
	position: absolute;
	right: max(-14vw, -220px);
	top: 50%;
	z-index: -1;
	width: min(84vw, 880px);
	aspect-ratio: 1;
	translate: 0 -46%;
	opacity: .55;
	filter: var(--wheel-filter);
	mix-blend-mode: var(--wheel-blend);
	-webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 62%, transparent 100%);
}

.page-head__wheel--dark {
	filter: var(--wheel-filter-alt);
}

.page-head__wheel img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.page-head .wrap {
	translate: 0 calc(var(--out, 0) * 60px);
	opacity: calc(1 - var(--out, 0) * 1.4);
}

.page-head__title {
	font-size: clamp(2.9rem, 9.2vw, 9.6rem);
}

@media (max-width: 640px) {
	.page-head__wheel {
		right: -38vw;
		width: 120vw;
		opacity: .42;
	}
}

.page-head__deck {
	margin-top: clamp(18px, 2.4vw, 30px);
}

.page-head__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin-bottom: 20px;
}