@layer components {
	/*
	 * The prints use the catalogue the photographs use, so only what differs is
	 * here: a print is a landscape frame, its claims stand where the categories
	 * do, and the title block below carries the way to buy one.
	 */
	/*
	 * Sized on the smaller of the two axes. Six prints do not need the room
	 * 287 photographs get, and the title block below them carries a pitch, a
	 * button and a credit — so the height these cards give up is the height
	 * that keeps the two from meeting.
	 */
	.catalog.is-print .catalog-card {
		width: clamp(180px, min(18vw, 26vh), 290px);
		aspect-ratio: 4 / 3;
	}

	/* --------------------------------------------------------- the claims */

	.print-marks {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-2xs) var(--space-m);
		margin: 0;
		padding: 0;
		list-style: none;
		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 .print-marks {
		opacity: 1;
		translate: 0 0;
	}

	.print-marks li {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		font-size: var(--step--2);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--over-ink) 78%, transparent);
		white-space: nowrap;
	}

	.print-mark-icon {
		font-size: 1.05rem;
		letter-spacing: 0;
		line-height: 1;
	}

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

	.print-card img {
		transition:
			transform var(--dur-slow) var(--ease-out),
			filter var(--dur-slow) var(--ease-out);
		filter: brightness(0.92);
	}

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

	/* -------------------------------------------------------- the buying */

	/*
	 * The title block is anchored to the foot of the hero, so everything added
	 * under the title pushes the whole block up — and the prints have a pitch,
	 * a button and a credit where the archive has nothing. Left alone the block
	 * climbed into the catalogue. The title takes a smaller step and the deep
	 * bottom padding is cut, which buys back the room instead of stacking it
	 * against the cards.
	 */
	.dz-print .hero-body.is-centred {
		padding-bottom: clamp(var(--space-m), 4vh, var(--space-xl));
		gap: var(--space-3xs, 0.4rem);
	}

	.dz-print .hero-body.is-centred .hero-title {
		font-size: clamp(2.75rem, 5.5vw, 5rem);
	}

	/* Sized on height as well, so a longer pitch cannot crowd the cards. */
	.dz-print .hero-lede {
		max-width: 46ch;
		margin-inline: auto;
		font-size: clamp(0.76rem, 1.6vh, 0.95rem);
		line-height: 1.55;
		color: color-mix(in oklab, var(--over-ink) 76%, transparent);
	}

	.print-buy {
		margin-top: var(--space-2xs);
		display: inline-flex;
		align-items: center;
		gap: 0.6em;
		padding: 0.7em 1.4em;
		border-radius: 999px;
		border: 1px solid color-mix(in oklab, var(--over-ink) 40%, transparent);
		background: color-mix(in oklab, var(--over-ink) 10%, transparent);
		backdrop-filter: blur(8px);
		font-size: var(--step--2);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: var(--over-ink);
		text-decoration: none;
		transition:
			background var(--dur-fast) var(--ease-out),
			border-color var(--dur-fast) var(--ease-out),
			gap var(--dur-fast) var(--ease-out);
	}

	.print-buy:hover,
	.print-buy:focus-visible {
		background: color-mix(in oklab, var(--over-ink) 20%, transparent);
		border-color: var(--over-ink);
		gap: 0.95em;
	}

	/* ------------------------------------------------- the aside and credit */

	.print-foot {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		gap: 0.4em var(--space-s);
		margin: var(--space-2xs) 0 0;
		font-size: var(--step--2);
	}

	.print-ask {
		letter-spacing: 0.1em;
		color: color-mix(in oklab, var(--over-ink) 66%, transparent);
		text-decoration-color: color-mix(in oklab, var(--over-ink) 30%, transparent);
		transition: color var(--dur-fast) var(--ease-out);
	}

	.print-ask:hover {
		color: var(--over-ink);
	}

	.print-by {
		letter-spacing: 0.06em;
		color: color-mix(in oklab, var(--over-ink) 52%, transparent);
	}

	.print-by strong {
		font-weight: 400;
		color: color-mix(in oklab, var(--over-ink) 80%, transparent);
	}

	/* The fact about them earns a line only where there is room for one. */
	.print-by-note::before {
		content: "· ";
	}

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

		.print-marks {
			gap: var(--space-3xs, 0.35rem) var(--space-s);
		}

		.print-by-note {
			display: none;
		}
	}
}