@layer components {
	/*
	 * The films use the catalogue the photographs use, so only what differs is
	 * here: a film is a landscape frame rather than a portrait one, it carries
	 * its title, and it opens into a player instead of a picture.
	 */
	.catalog.is-film .catalog-card {
		width: clamp(230px, 26vw, 400px);
		aspect-ratio: 16 / 9;
	}

	/* The line the page opens with, standing where the categories do. */
	.film-line {
		margin: 0;
		font-family: var(--font-display);
		font-size: clamp(1.05rem, 2vw, 1.9rem);
		line-height: 1.16;
		letter-spacing: -0.02em;
		text-align: center;
		text-wrap: balance;
		max-width: 30ch;
		margin-inline: auto;
		color: var(--over-ink);
		opacity: 0;
		translate: 0 0.75rem;
		transition:
			opacity var(--dur-slow) var(--ease-out),
			translate var(--dur-slow) var(--ease-out);
	}

	.catalog-head.is-open .film-line {
		opacity: 1;
		translate: 0 0;
	}

	/* --------------------------------------------------------- the film card */

	.film-card img {
		transition:
			transform var(--dur-slow) var(--ease-out),
			filter var(--dur-slow) var(--ease-out);
		filter: saturate(0.85) brightness(0.82);
	}

	.film-card:hover img,
	.film-card:focus-visible img {
		filter: saturate(1) brightness(1);
	}

	.film-play {
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -50% -50%;
		width: 3.25rem;
		height: 3.25rem;
		border-radius: 50%;
		border: 1px solid color-mix(in oklab, var(--over-ink) 45%, transparent);
		background: hsl(var(--over-scrim) / 0.35);
		backdrop-filter: blur(6px);
		transition:
			scale var(--dur) var(--ease-out),
			background var(--dur) var(--ease-out),
			border-color var(--dur) var(--ease-out);
	}

	/* The triangle, drawn rather than fetched. */
	.film-play::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		translate: -40% -50%;
		border-style: solid;
		border-width: 0.44rem 0 0.44rem 0.72rem;
		border-color: transparent transparent transparent var(--over-ink);
	}

	.film-card:hover .film-play,
	.film-card:focus-visible .film-play {
		scale: 1.1;
		background: hsl(var(--over-scrim) / 0.55);
		border-color: var(--over-ink);
	}

	.film-plate {
		position: absolute;
		inset: auto 0 0 0;
		padding: var(--space-l) var(--space-xs) var(--space-xs);
		background: linear-gradient(to top, hsl(var(--over-scrim) / 0.9), transparent);
	}

	.film-title {
		display: block;
		font-size: var(--step--1);
		line-height: 1.25;
		color: var(--over-ink);
		text-wrap: balance;
	}

	/* The number sits opposite the title rather than under it. */
	.film-card .catalog-n {
		left: auto;
		right: var(--space-2xs);
		top: var(--space-2xs);
		bottom: auto;
		opacity: 1;
	}

	/* ------------------------------------------------------------ the channel */

	.film-channel {
		margin: var(--space-s) 0 0;
	}

	.film-channel a {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		font-size: var(--step--2);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--over-ink) 72%, transparent);
		text-decoration: none;
		transition: color var(--dur-fast) var(--ease-out), gap var(--dur-fast) var(--ease-out);
	}

	.film-channel a:hover {
		color: var(--over-ink);
		gap: 0.85em;
	}

	/* ------------------------------------------------------------- the viewer */

	/*
	 * The player keeps 16:9 and is bounded on both axes, so a wide window does
	 * not stretch it past the bar beneath and a tall one does not leave it
	 * stranded in the middle.
	 */
	.filmbox-frame {
		width: min(100%, calc((100svh - 12rem) * 16 / 9));
		margin-inline: auto;
	}

	.filmbox-slot {
		position: relative;
		aspect-ratio: 16 / 9;
		width: 100%;
		border-radius: var(--radius-lg);
		overflow: hidden;
		background: #000;
		box-shadow: var(--shadow-2);
	}

	.filmbox-player {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		border: 0;
	}

	/*
	 * The photograph viewer hides its arrows on a phone because the frame is
	 * thrown instead. A film cannot be thrown — the player swallows the gesture
	 * — so the films keep their arrows, moved down out of the picture.
	 */
	@media (max-width: 48rem) {
		.filmbox .lightbox-prev,
		.filmbox .lightbox-next {
			display: grid;
			top: auto;
			bottom: var(--space-m);
			translate: none;
			width: 2.5rem;
			height: 2.5rem;
		}

		.filmbox .lightbox-prev { left: var(--gutter); }
		.filmbox .lightbox-next { right: var(--gutter); }

		/* The caption keeps clear of them. */
		.filmbox .lightbox-bar {
			padding-inline: 3.5rem;
		}
	}

	@media (max-width: 60rem) {
		.catalog.is-film .catalog-card {
			width: min(78vw, 340px);
		}

		.film-play {
			width: 2.75rem;
			height: 2.75rem;
		}

		.filmbox-frame {
			width: 100%;
		}
	}
}