@layer components {
	/*
	 * The index uses the catalogue every other screen uses. What differs is the
	 * card: a photograph is looked at, a piece of writing is chosen — so it
	 * carries its date, its title and a line of itself, and it is bigger,
	 * because two cards in a gallery-sized row read as an empty shelf.
	 */
	.catalog.is-journal .catalog-card {
		width: clamp(230px, min(26vw, 34vh), 360px);
		aspect-ratio: 3 / 4;
	}

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

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

	.post-plate {
		position: absolute;
		inset: auto 0 0 0;
		display: flex;
		flex-direction: column;
		gap: 0.4rem;
		padding: var(--space-2xl) var(--space-s) var(--space-s);
		background: linear-gradient(to top, hsl(var(--over-scrim) / 0.92) 30%, transparent);
		text-align: left;
	}

	.post-when {
		font-size: var(--step--2);
		letter-spacing: 0.16em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--over-ink) 62%, transparent);
	}

	.post-name {
		font-family: var(--font-display);
		font-size: clamp(1.15rem, min(1.8vw, 2.6vh), 1.75rem);
		line-height: 1.12;
		letter-spacing: -0.02em;
		color: var(--over-ink);
		text-wrap: balance;
	}

	.post-lede {
		font-size: var(--step--2);
		line-height: 1.5;
		color: color-mix(in oklab, var(--over-ink) 70%, transparent);
	}

	.post-go {
		display: inline-flex;
		align-items: center;
		gap: 0.5em;
		margin-top: 0.15rem;
		font-size: var(--step--2);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		color: var(--over-ink);
		transition: gap var(--dur-fast) var(--ease-out);
	}

	.post-card:hover .post-go {
		gap: 0.9em;
	}

	/* Counted from the posts themselves, so the line cannot go stale. */
	.journal-foot {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 0.5em var(--space-2xs);
		margin: var(--space-2xs) 0 0;
		font-size: var(--step--2);
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--over-ink) 55%, transparent);
	}

	/* ------------------------------------------------------------- a piece */

	/*
	 * The article scrolls, unlike every other screen here, because it is an
	 * article. The frame is given the first screen and the writing follows it.
	 */
	.hero.has-piece {
		display: grid;
		grid-template-rows: 1fr auto;
		min-height: 100svh;
	}

	.hero.has-piece .hero-media,
	.hero.has-piece .hero-scrim {
		grid-area: 1 / 1 / -1 / -1;
	}

	/*
	 * One row each. Spanning the head across both rows left the cue with no
	 * cell of its own, so it was auto-placed into a second column and ended up
	 * a narrow strip against the right edge of the frame.
	 */
	.piece-head {
		grid-area: 1 / 1;
		z-index: 2;
		align-self: end;
		max-width: min(46rem, 100%);
		margin-inline: auto;
		padding: calc(var(--header-h) + var(--space-l)) var(--gutter) var(--space-l);
		text-align: center;
		color: var(--over-ink);
	}

	.piece-title {
		margin: var(--space-2xs) 0 0;
		font-family: var(--font-display);
		font-size: clamp(2.25rem, min(6vw, 9vh), 5rem);
		font-weight: 400;
		line-height: 1.02;
		letter-spacing: -0.03em;
		text-wrap: balance;
	}

	.piece-lede {
		margin: var(--space-s) auto 0;
		max-width: 52ch;
		font-size: var(--step-0);
		line-height: 1.6;
		color: color-mix(in oklab, var(--over-ink) 78%, transparent);
	}

	.piece-cue {
		grid-area: 2 / 1;
		z-index: 2;
		margin: 0;
		padding-bottom: var(--space-l);
		text-align: center;
		font-size: var(--step--2);
		letter-spacing: 0.24em;
		text-transform: uppercase;
		color: color-mix(in oklab, var(--over-ink) 72%, transparent);
	}

	.piece-cue::after {
		content: "";
		display: block;
		width: 1px;
		height: 2.5rem;
		margin: var(--space-2xs) auto 0;
		background: linear-gradient(to bottom, currentcolor, transparent);
	}

	/* ---------------------------------------------------------- the reading */

	.piece {
		max-width: min(42rem, 100%);
		margin-inline: auto;
		padding: var(--space-3xl) var(--gutter) var(--space-2xl);
	}

	.piece .entry-content p {
		font-size: var(--step-0);
		line-height: 1.75;
	}

	.piece .entry-content > * + * {
		margin-top: var(--space-m);
	}

	/* The photographs in a piece break the measure — they are the reason for it. */
	.piece .entry-content figure {
		margin-block: var(--space-xl);
		margin-inline: calc(50% - 50vw + var(--gutter));
		max-width: 100vw;
		width: auto;
	}

	.piece .entry-content figure img {
		width: 100%;
		height: auto;
		border-radius: var(--radius-lg);
	}

	.piece .entry-content figcaption {
		margin-top: var(--space-2xs);
		text-align: center;
		font-size: var(--step--2);
		color: var(--ink-soft, color-mix(in oklab, currentcolor 60%, transparent));
	}

	/* ------------------------------------------------------------- the end */

	.piece-end {
		margin-top: var(--space-3xl);
		padding-top: var(--space-l);
		border-top: 1px solid color-mix(in oklab, currentcolor 14%, transparent);
		display: grid;
		gap: var(--space-l);
	}

	.piece-tags,
	.piece-share ul,
	.piece-onward {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--space-2xs) var(--space-s);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.piece-tags {
		justify-content: center;
		gap: var(--space-3xs, 0.4rem);
	}

	.piece-tags a {
		display: inline-block;
		padding: 0.3em 0.8em;
		border-radius: 999px;
		border: 1px solid color-mix(in oklab, currentcolor 18%, transparent);
		font-size: var(--step--2);
		letter-spacing: 0.08em;
		text-decoration: none;
		transition: border-color var(--dur-fast) var(--ease-out);
	}

	.piece-tags a:hover {
		border-color: currentcolor;
	}

	.piece-share {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		justify-content: center;
		gap: var(--space-2xs) var(--space-s);
	}

	.piece-share-label {
		margin: 0;
		font-size: var(--step--2);
		letter-spacing: 0.2em;
		text-transform: uppercase;
		opacity: 0.55;
	}

	.piece-share a {
		font-size: var(--step--1);
		text-decoration-color: color-mix(in oklab, currentcolor 30%, transparent);
	}

	/*
	 * The way on, in place of the footer: back on one side, the pieces either
	 * side of this one on the other. Three cells so the row is held at both
	 * edges even when only one neighbour exists.
	 */
	.piece-onward {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: var(--space-m);
		padding-top: var(--space-m);
		border-top: 1px solid color-mix(in oklab, currentcolor 14%, transparent);
	}

	.piece-step {
		display: grid;
		gap: 0.2em;
		text-decoration: none;
	}

	.piece-step.is-next {
		grid-column: 3;
		text-align: right;
	}

	.piece-step-kicker {
		font-size: var(--step--2);
		letter-spacing: 0.2em;
		text-transform: uppercase;
		opacity: 0.5;
	}

	.piece-step-name {
		font-size: var(--step--1);
		line-height: 1.25;
	}

	.piece-back {
		grid-column: 2;
		font-size: var(--step--2);
		letter-spacing: 0.18em;
		text-transform: uppercase;
		opacity: 0.7;
		text-decoration: none;
	}

	.piece-back:hover {
		opacity: 1;
	}

	/* No footer on a piece; its end is the end. */
	body.dz-piece .site-footer {
		display: none;
	}

	@media (max-width: 60rem) {
		.catalog.is-journal .catalog-card {
			width: min(72vw, 300px);
		}

		.piece-head {
			padding-bottom: var(--space-2xl);
		}

		.piece .entry-content figure {
			margin-inline: 0;
			max-width: 100%;
		}

		/* Stacked, so neither neighbour's title is squeezed to a word a line. */
		.piece-onward {
			grid-template-columns: minmax(0, 1fr);
			justify-items: center;
			text-align: center;
			gap: var(--space-s);
		}

		.piece-step.is-next {
			grid-column: 1;
			text-align: center;
		}

		.piece-back {
			grid-column: 1;
			order: 1;
		}
	}
}