/* Maas Glass Hall: what the theme cannot say. Unlayered, so each rule wins
   over Yeti without a specificity fight. Every rule below is the show's own
   composition, lettering or motion, or a gap the ledger carries under the
   GAP number in its comment. */

/* The face. Yeti ships no fonts and expects the page to load its own.
   Variable: weight 200 to 900, width 75% to 125%. */
@font-face {
	font-family: "Mona Sans";
	src: url("/yeti/examples/exhibition/fonts/mona-sans-latin.woff2") format("woff2");
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Mona Sans";
	src: url("/yeti/examples/exhibition/fonts/mona-sans-italic-latin.woff2") format("woff2");
	font-weight: 200 900;
	font-stretch: 75% 125%;
	font-style: italic;
	font-display: swap;
}

/* The rooms. Each names its field and its ink; wherever the page cannot
   cross-fade between them, a room paints its own field edge to edge. */
#furnace { --room-ground: var(--furnace); --room-ink: var(--furnace-ink); }
#cobalt { --room-ground: var(--cobalt); --room-ink: var(--cobalt-ink); }
#amber { --room-ground: var(--amber); --room-ink: var(--amber-ink); }
#ruby { --room-ground: var(--ruby); --room-ink: var(--ruby-ink); }
#uranium { --room-ground: var(--uranium); --room-ink: var(--uranium-ink); }
#clear { --room-ground: var(--clear); --room-ink: var(--clear-ink); }
#visit,
.site-foot { --room-ground: var(--night); --room-ink: var(--night-ink); }

.room,
.site-foot {
	--ground: var(--room-ground);
	--ink: var(--room-ink);
	background-color: var(--ground);
	color: var(--ink);
	/* A room's field runs a pixel past its own edge, so a boundary that
	   lands on a fractional pixel never lets the page's ground through. */
	box-shadow: 0 1px 0 var(--ground);
}

/* The programme grid is Yeti's: twelve tracks (data-tracks) that each
   title, plate and label is placed on by line in the markup, collapsing to
   one column below lg. The rows here are the page's own spacing. */

/* The top bar: the brand in a wide, even hand at the left; the rooms, the
   checklist and the visit gathered at the right beside the one button. */
.nav > [data-brand] {
	font-stretch: 118%;
	letter-spacing: 0.01em;
}

/* The bar lines up with the page's own left edge. */
.site-bar .nav {
	padding-inline: 0;
}

/* The one button never breaks its line. */
.site-bar .button {
	white-space: nowrap;
}

@media (width >= 50rem) {
	.site-bar .nav > ul {
		justify-content: end;
		margin-inline: auto var(--yeti-space-lg);
		font-size: var(--yeti-text-sm);
	}
}

/* --- Opening --------------------------------------------------------------- */

.opening {
	min-block-size: calc(100svh - 7.5rem);
	display: grid;
	align-items: end;
}

.opening-grid {
	grid-template-rows: auto auto;
	row-gap: var(--yeti-space-xl);
	align-items: end;
}

.opening h1 {
	grid-row: 1;
	z-index: 1;
	margin: 0;
	font-size: clamp(4.25rem, 15vw, 13.5rem);
	font-weight: 200;
	font-stretch: 125%;
	line-height: 0.84;
	letter-spacing: -0.045em;
}

.opening h1 span {
	display: block;
}

.opening h1 span + span {
	padding-inline-start: calc(100% / 6);
}

.opening-plate {
	grid-row: 1 / 3;
	align-self: end;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 5;
	max-block-size: calc(100svh - 11rem);
	object-fit: cover;
}

.opening-facts {
	grid-row: 2;
	display: flex;
	flex-wrap: wrap;
	gap: var(--yeti-space-sm) var(--yeti-space-xl);
	padding: var(--yeti-space-sm) 0 0;
	margin: 0;
	border-block-start: var(--yeti-border-width) solid var(--yeti-color-border);
	font-size: var(--yeti-text-sm);
	font-weight: var(--yeti-weight-strong);
	list-style: none;
}

/* --- The furnace ------------------------------------------------------------ */

.interlude {
	overflow: clip;
}

.interlude-plate {
	display: block;
	inline-size: 100%;
	block-size: min(58svh, 40vw);
	object-fit: cover;
	object-position: 50% 45%;
}

.statement {
	max-inline-size: 30ch;
	margin-block: 0;
	margin-inline-start: calc(100% / 3);
	font-size: var(--yeti-text-xl);
	font-weight: 300;
	font-stretch: 108%;
	line-height: 1.18;
	letter-spacing: -0.015em;
	text-wrap: pretty;
}

/* --- Rooms ------------------------------------------------------------------ */

.room-head {
	align-items: end;
	margin-block-end: var(--yeti-space-3xl);
}

/* The programme grid, drawn: a hairline over each room's heading with a
   registration tick at the start of every track, so the tracks a room
   leaves empty read as the grid's, not as a gap. */
@container band (inline-size >= 48rem) {
	.room-head {
		padding-block-start: var(--yeti-space-xl);
		background:
			linear-gradient(var(--yeti-color-border), var(--yeti-color-border)) 0 0 / 100% var(--yeti-border-width) no-repeat,
			linear-gradient(to right, var(--yeti-color-border) var(--yeti-border-width), transparent var(--yeti-border-width)) 0 0 / calc((100% + var(--yeti-space-md)) / 12) 0.625rem repeat-x;
	}

	/* And under the works, the same ruler turned up: the room closes on the
	   grid it opened on. */
	.works {
		padding-block-end: var(--yeti-space-xl);
		background:
			linear-gradient(var(--yeti-color-border), var(--yeti-color-border)) 0 100% / 100% var(--yeti-border-width) no-repeat,
			linear-gradient(to right, var(--yeti-color-border) var(--yeti-border-width), transparent var(--yeti-border-width)) 0 100% / calc((100% + var(--yeti-space-md)) / 12) 0.625rem repeat-x;
	}
}

.room-head h2,
.visit-grid h2 {
	margin: 0;
	font-size: clamp(3.25rem, 9vw, 7.5rem);
	line-height: 0.88;
	letter-spacing: -0.04em;
}

/* The room's number sits in the title at the same size, lighter and
   quieter: the plan's number, not a label above it. */
.room-no {
	font-weight: 200;
	color: var(--yeti-color-text-muted);
	margin-inline-end: 0.12em;
}

.room-head p {
	max-inline-size: 36ch;
	margin: 0;
	text-wrap: pretty;
}

.works {
	row-gap: var(--yeti-space-3xl);
	align-items: start;
}

.work {
	margin: 0;
}

.work img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* The label: catalogue number, artist, title, then the facts, in the
   museum's order, small and exact. */
.work figcaption {
	max-inline-size: 38ch;
	line-height: 1.5;
	margin-block-start: var(--yeti-space-sm);
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
	text-wrap: pretty;
}

.work figcaption b {
	font-weight: var(--yeti-weight-strong);
	color: var(--yeti-color-text);
}

.cat {
	color: var(--yeti-color-text);
	margin-inline-end: 0.5em;
}

/* Each room hangs its works differently: a pair stepped down, one wide,
   one alone to the left, a pair apart, one large to the right. */
#cobalt .work { grid-template-columns: minmax(0, 5fr) minmax(0, 4fr); grid-template-areas: "plate label"; }
#amber .work { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr); grid-template-areas: "label plate"; }
/* Gold ruby hangs one work at landscape scale, the widest plate in the
   show, with its label beneath. */
#ruby .work { display: block; }
#ruby .work figcaption { margin-block-start: var(--yeti-space-sm); }
#uranium .work:nth-child(2) { margin-block-start: 20rem; }
/* Clear stands alone in the middle, its label beneath it. */
#clear .work { display: block; }
#clear .work figcaption { margin-block-start: var(--yeti-space-sm); }

/* A work hung alone keeps its label beside it, at the foot, the way a
   museum hangs one. */
.work:only-child {
	display: grid;
	column-gap: var(--yeti-space-md);
	align-items: end;
}

.work:only-child img { grid-area: plate; }
.work:only-child figcaption { grid-area: label; margin-block-start: 0; }


/* --- Checklist -------------------------------------------------------------- */

.checklist {
	margin-block-start: var(--yeti-space-3xl);
	padding-block-start: var(--yeti-space-md);
	border-block-start: var(--yeti-border-width) solid var(--yeti-color-border-strong);
}

/* GAP-046: the checklist measures itself, so on a phone its technique and
   lender columns step out by data-show and the rest keep their room. */
.checklist {
	container-type: inline-size;
}

.checklist h2 {
	margin: 0;
	font-size: var(--yeti-text-xl);
	font-weight: 300;
}

.checklist [data-numeric] {
	font-variant-numeric: normal;
}

.checklist th {
	font-weight: var(--yeti-weight-strong);
	color: var(--yeti-color-text-muted);
}

/* --- Visit -------------------------------------------------------------------- */

.visit-grid {
	row-gap: var(--yeti-space-2xl);
	align-items: start;
}

.visit-grid h2 {
}

.visit-facts {
	display: grid;
	gap: var(--yeti-space-lg);
	margin: 0;
}

.visit-facts dt {
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}

.visit-facts dd {
	margin: 0;
	font-size: var(--yeti-text-lg);
	font-weight: 300;
	line-height: 1.3;
}

.booking {
	padding-block-start: var(--yeti-space-md);
	border-block-start: var(--yeti-border-width) solid var(--yeti-color-border-strong);
}

.booking fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.booking legend {
	padding: 0;
	margin-block-end: var(--yeti-space-xs);
}

.booking h3 {
	margin: 0;
	font-size: var(--yeti-text-xl);
	font-weight: 300;
}

/* The arrival times as a row of plates: the chosen one filled with ink.
   The radio itself stays in the tab order and draws the focus ring. */
.slots > .field {
	position: relative;
	border-radius: var(--yeti-control-radius);
	padding: var(--yeti-space-xs) var(--yeti-space-sm);
	border: var(--yeti-border-width) solid var(--yeti-color-border-strong);
	transition: background-color var(--yeti-duration-fast) var(--yeti-ease), color var(--yeti-duration-fast) var(--yeti-ease);
}

.slots > .field input {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.slots > .field:has(input:checked) {
	background-color: var(--ink);
	color: var(--ground);
}

.slots > .field:has(input:focus-visible) {
	outline: 2px solid var(--ink);
	outline-offset: 3px;
}

.slots > .field:hover:not(:has(input:checked)) {
	background-color: var(--yeti-color-surface-sunken);
}

.held {
	display: none;
	font-size: var(--yeti-text-sm);
}

.held:target {
	display: block;
}

/* --- Foot ----------------------------------------------------------------- */

.site-foot p {
	max-inline-size: 64ch;
	line-height: 1.5;
	margin: 0;
	font-size: var(--yeti-text-sm);
	color: var(--yeti-color-text-muted);
}

/* --- One column on a phone ------------------------------------------------ */

/* The tracks grids collapse to one column below their lg threshold,
   measured on their own width; what their children do then is asked of
   the same grid. */
@container (inline-size < 48rem) {
	.opening-grid > *,
	.room-head > *,
	.works > .work,
	#uranium .work:nth-child(2),
	.visit-grid > * {
		grid-row: auto;
		margin-block-start: 0;
	}

	/* The opening stacks: the title, then the plate rising under the end
	   of its second line, then the facts. */
	.opening-plate {
		inline-size: 78%;
		justify-self: end;
		margin-block-start: -3.5rem;
		max-block-size: none;
	}

	.opening-facts {
		flex-direction: column;
		gap: 0.25rem;
	}

	.work:only-child {
		display: block;
	}

	.work:only-child figcaption,
	#ruby .work figcaption {
		margin-block-start: var(--yeti-space-sm);
		margin-inline: 0;
		justify-self: stretch;
	}

	.works .work:nth-child(2) {
		inline-size: 72%;
		justify-self: end;
	}
}

/* The spacing around the grids follows the same measure, asked of the
   band the grid stands in, so it can never disagree with the collapse. */
main .center {
	container: band / inline-size;
}

@container band (inline-size < 48rem) {
	.opening-grid,
	.room-head,
	.works,
	.visit-grid {
		row-gap: var(--yeti-space-lg);
	}

	.statement {
		margin-inline-start: 0;
	}

	.room-head {
		margin-block-end: var(--yeti-space-xl);
	}
}

@media (width < 50rem) {
	.opening {
		min-block-size: 0;
	}
}

/* --- Motion --------------------------------------------------------------- */

/* The signature: moving between rooms, the whole page's ground cross-fades
   from one colour to the next as the room comes up the screen, and the ink
   follows. Each room names a view timeline; the root reads them all and
   runs one short animation per threshold. The top bar rides along, since it
   is painted with the same two values. Where scroll timelines are missing,
   or the reader has asked for less motion, the rooms paint their own fields
   and the colour changes at the room's edge. */
@keyframes to-furnace { from { --ground: var(--cobalt); --ink: var(--cobalt-ink); } to { --ground: var(--furnace); --ink: var(--furnace-ink); } }
@keyframes to-cobalt { from { --ground: var(--furnace); --ink: var(--furnace-ink); } to { --ground: var(--cobalt); --ink: var(--cobalt-ink); } }
@keyframes to-amber { from { --ground: var(--cobalt); --ink: var(--cobalt-ink); } to { --ground: var(--amber); --ink: var(--amber-ink); } }
@keyframes to-ruby { from { --ground: var(--amber); --ink: var(--amber-ink); } to { --ground: var(--ruby); --ink: var(--ruby-ink); } }
@keyframes to-uranium { from { --ground: var(--ruby); --ink: var(--ruby-ink); } to { --ground: var(--uranium); --ink: var(--uranium-ink); } }
@keyframes to-clear { from { --ground: var(--uranium); --ink: var(--uranium-ink); } to { --ground: var(--clear); --ink: var(--clear-ink); } }
@keyframes to-night { from { --ground: var(--clear); --ink: var(--clear-ink); } to { --ground: var(--night); --ink: var(--night-ink); } }

/* A plate is unveiled from the bottom as it comes into view, the way a
   curtain rises on a vitrine. */
@keyframes unveil {
	from { clip-path: inset(22% 0 0 0); }
	to { clip-path: inset(0); }
}

/* The furnace settles as it passes. */
@keyframes settle {
	from { scale: 1.12; }
	to { scale: 1; }
}

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) and (timeline-scope: none) {
		html {
			timeline-scope: --room-furnace, --room-cobalt, --room-amber, --room-ruby, --room-uranium, --room-clear, --room-night;
			animation: to-furnace linear forwards, to-cobalt linear forwards, to-amber linear forwards, to-ruby linear forwards, to-uranium linear forwards, to-clear linear forwards, to-night linear forwards;
			animation-timeline: --room-furnace, --room-cobalt, --room-amber, --room-ruby, --room-uranium, --room-clear, --room-night;
			/* The furnace fade runs over a set distance once the room is a
			   quarter-screen up, so a phone, which shows the room's top on the
			   first screen, still opens in cobalt, and the fade is done before
			   the statement is read. */
			animation-range: entry 16rem entry 34rem, entry 25% entry 75%, entry 25% entry 75%, entry 25% entry 75%, entry 25% entry 75%, entry 25% entry 75%, entry 25% entry 75%;
			scroll-padding-block-start: 5rem;
		}

		#furnace { view-timeline-name: --room-furnace; }
		#cobalt { view-timeline-name: --room-cobalt; }
		#amber { view-timeline-name: --room-amber; }
		#ruby { view-timeline-name: --room-ruby; }
		#uranium { view-timeline-name: --room-uranium; }
		#clear { view-timeline-name: --room-clear; }
		#visit { view-timeline-name: --room-night; }

		/* The rooms stop painting and take the page's colour instead. */
		.room,
		.site-foot {
			--ground: inherit;
			--ink: inherit;
			background-color: transparent;
			box-shadow: none;
		}

		/* With the colour following the reader, the top bar can too. */
		.site-bar {
			position: sticky;
			inset-block-start: 0;
			z-index: 2;
			background-color: var(--ground);
		}

		.work img {
			animation: unveil linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 90%;
		}

		.interlude-plate {
			animation: settle linear both;
			animation-timeline: view();
			animation-range: cover 0% cover 100%;
		}
	}

	.opening-plate {
		animation: unveil 1400ms var(--yeti-enter-ease) 200ms both;
	}
}