/* ============================================================
   Media shelf — kind archives as a store shelf (PKIW #226 listen).

   Structure is Post Kinds': templates/taxonomy-kind-listen.html renders
   the archive query through the plugin's `is-style-pkiw-shelf` post
   template (styles/kind-layouts.css): a grid, one item per post, and a
   board under each item that runs to the row's end, so a short last
   row shows empty shelf, never placeholder posts. This file only paints:
   blue-green boards, Prussian-blue uprights, the cassettes standing
   upright (no collage tilt), the whole case as one link, and the
   decorative still life (boombox, plant, tapes, pen cup) on the top board.

   The cassettes themselves are the Stream's (inc/stream-media.php adds
   `cr-media--shelf` on this archive; cr-post-kinds.css paints them).
   The shelf uses the palette tokens (not the semantic ones), so it keeps
   its colour in dark mode like the other physical objects (LAYERING.md);
   shadows and focus use the semantic tokens, so the hard shadow turns
   selective yellow in dark mode.
   ============================================================ */

/* ---- The shelf frame ---- */
.cr-media-shelf .wp-block-post-template.cr-media-shelf__list {
	--pkiw-shelf-item-min: 15rem;
	--pkiw-shelf-gap-row: 2.25rem;
	--pkiw-shelf-gap-column: 1.5rem;
	--pkiw-shelf-board-size: 0.85rem;
	--pkiw-shelf-board-color: var(--cr-blue-green);
	--pkiw-shelf-board-opacity: 1;
	--pkiw-focus-indicator: var(--cr-focus-ring);
	columns: auto;
	column-gap: var(--pkiw-shelf-gap-column);
	align-items: stretch;
	max-width: 72rem;
	margin-inline: auto;
	padding: 1.75rem calc(var(--pkiw-shelf-gap-column) / 2) 0;
	border: 0 solid var(--cr-prussian-blue);
	border-inline-width: 0.9rem;
	border-block-end-width: 0.9rem;
	background: linear-gradient(var(--cr-blue-green), var(--cr-blue-green)) top / 100% 0.85rem no-repeat;
	box-shadow: var(--cr-shadow-hard);
}

/* Cases stand upright on the boards: undo the Stream collage's spacing
   and tilts for this list only. */
.cr-media-shelf .wp-block-post-template.cr-media-shelf__list > li {
	break-inside: auto;
	align-self: stretch;
	margin: 0;
	padding: 0 0 calc(var(--pkiw-shelf-board-size) + 0.75rem);
}

.cr-media-shelf .cr-media-shelf__list > li:is(.kind-listen, .kind-watch) .pk-card.pk-card--stream.cr-media--shelf,
.cr-media-shelf .cr-media-shelf__list > li:is(.kind-listen, .kind-watch) .pk-card.pk-card--stream.cr-media--shelf .pk-body {
	transform: none;
}

/* The board. Post Kinds draws it (kind-layouts.css); the Stream's
   cover-box "shelf shadow" (cr-post-kinds.css, li.kind-*::after) outranks
   that rule here, so the board is restated at higher specificity. Its top
   edge catches the light; its front face stays flat. */
.cr-media-shelf .wp-block-post-template.cr-media-shelf__list > li[class*="kind-"]::after {
	content: "";
	position: absolute;
	display: block;
	inset-block-end: 0;
	inset-inline-start: calc(var(--pkiw-shelf-gap-column) / -2);
	inset-inline-end: -100vw;
	width: auto;
	max-width: none; /* .cr-archive's post divider caps ::after at 60% */
	transform: none; /* and tilts it -0.5deg */
	height: var(--pkiw-shelf-board-size);
	margin: 0;
	background: var(--pkiw-shelf-board-color);
	opacity: 1;
	pointer-events: none;
	box-shadow: inset 0 3px 0 var(--cr-sky-blue), 0 4px 0 var(--cr-cerulean);
}

/* No player on the shelf (it plays on the single), so the cassette's
   player tray shrinks to a sliver and the case keeps a cassette's
   proportions instead of the Stream's taller deck. */
.cr-media-shelf .cr-media-shelf__list > li.kind-listen .pk-card.pk-card--stream.cr-cassette--stream.cr-media--shelf .pk-body {
	grid-template-rows: 13cqw 18cqw 4cqw max(6cqw, 1.2rem) auto auto auto auto;
}

/* ---- One link per case ----
   The title link's hit area covers the cassette body (the nearest
   positioned box); the accessible name stays the track title, with the
   date as hidden text (inc/media-shelf.php name_listen_date()). */
.cr-media-shelf .cr-media-shelf__list > li:is(.kind-listen, .kind-watch) .pk-card.pk-card--stream.cr-media--shelf .pk-body > .pk-caption {
	position: static;
}

.cr-media-shelf .cr-media-shelf__list > li:is(.kind-listen, .kind-watch) .pk-card.pk-card--stream.cr-media--shelf .pk-title a::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
}

/* Focus: the site's two-tone ring around the whole case (the mockup's
   selective-yellow outline), drawn on the item so it isn't clipped. */
.cr-media-shelf .wp-block-post-template.cr-media-shelf__list > li:has(.pk-title a:focus-visible) {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

.cr-media-shelf .cr-media-shelf__list > li:is(.kind-listen, .kind-watch) .pk-card.pk-card--stream.cr-media--shelf .pk-title a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ---- Empty archive: bare boards, no content ---- */
.cr-media-shelf .wp-block-query:not(:has(.wp-block-post-template))::before {
	content: "";
	display: block;
	max-width: 72rem;
	height: 9rem;
	margin: 0 auto 1.5rem;
	border: 0 solid var(--cr-prussian-blue);
	border-inline-width: 0.9rem;
	border-block-end-width: 0.9rem;
	background:
		linear-gradient(var(--cr-blue-green), var(--cr-blue-green)) top / 100% 0.85rem no-repeat,
		linear-gradient(var(--cr-blue-green), var(--cr-blue-green)) bottom / 100% 0.85rem no-repeat;
	box-shadow: var(--cr-shadow-hard);
}

/* ---- Listen: the still life on the top board ----
   The approved mockup stands a houseplant, a cassette stack, the boombox,
   upright cassette spines and a pen cup on the shelf's top board. Each is
   its own asset in assets/img/, painted as a background layer of the
   shelf group's ::before: no DOM, never focused or read. The layer sits
   in flow right above the list, so its bottom edge is the top board and
   every object, drawn with its foot on its image's bottom edge, stands on
   it. Its height follows the shelf's width (the viewport less the page
   and shelf gutters), so the composition scales as one picture up to
   17rem tall, then spreads along wider boards. Below 64rem the stack and
   spines drop; on phones only the boombox stays. */
.cr-archive--listen .cr-media-shelf::before {
	content: "";
	display: block;
	height: min(17rem, (100vw - 2 * (var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xl))) * 272 / 1440);
	background:
		url(../img/cr-houseplant.svg) 2.2% bottom / auto 75% no-repeat,
		url(../img/cr-cassette-stack.svg) 17.8% bottom / auto 50% no-repeat,
		url(../img/cr-boombox.svg) center bottom / auto 100% no-repeat,
		url(../img/cr-cassette-spines.svg) 81% bottom / auto 64% no-repeat,
		url(../img/cr-pen-cup.svg) 94.5% bottom / auto 60% no-repeat;
	pointer-events: none;
}

/* ---- Listen: a near-full-width shelf ----
   The mockup's shelf spans about 94% of a 1536px view. Once the page is
   wider than the 1100px wide column plus gutters, the shelf group leaves
   that column and keeps the xl spacing step inside the page's own md
   gutter on each side (48px from the viewport edge), topping out at 96rem
   so very wide screens don't grow the cases past the mockup's. Narrower
   pages keep the column's width. Off phones the wider list keeps the
   approved four columns: each track is at least a quarter of the row. */
.cr-archive--listen .cr-media-shelf.alignwide {
	max-width: max(min(100%, var(--wp--style--global--wide-size)), min(100% - 2 * var(--wp--preset--spacing--xl), 96rem));
}

@media (min-width: 40.0625rem) {

	.cr-archive--listen .cr-media-shelf .wp-block-post-template.cr-media-shelf__list {
		--pkiw-shelf-item-min: max(15rem, (100% - 3 * var(--pkiw-shelf-gap-column)) / 4);
	}
}

.cr-archive--listen .cr-media-shelf .wp-block-post-template.cr-media-shelf__list,
.cr-archive--listen .cr-media-shelf .wp-block-query:not(:has(.wp-block-post-template))::before {
	max-width: none;
}

@media (max-width: 64rem) {

	.cr-archive--listen .cr-media-shelf::before {
		height: min(12rem, (100vw - 2 * (var(--wp--preset--spacing--md) + var(--wp--preset--spacing--xl))) * 200 / 640);
		background:
			url(../img/cr-houseplant.svg) 2.6% bottom / auto 70% no-repeat,
			url(../img/cr-boombox.svg) center bottom / auto 100% no-repeat,
			url(../img/cr-pen-cup.svg) 95.1% bottom / auto 58% no-repeat;
	}
}

/* ---- Small screens: one case per row, a narrower frame ---- */
@media (max-width: 40rem) {

	.cr-media-shelf .wp-block-post-template.cr-media-shelf__list {
		--pkiw-shelf-item-min: 13rem;
		border-inline-width: 0.5rem;
	}

	.cr-archive--listen .cr-media-shelf::before {
		width: min(16rem, 70%);
		height: auto;
		margin-inline: auto;
		aspect-ratio: 480 / 262;
		background: url(../img/cr-boombox.svg) center bottom / contain no-repeat;
	}
}

/* ---- Forced colours: the frame and boards as system lines ---- */
@media (forced-colors: active) {

	.cr-media-shelf .wp-block-post-template.cr-media-shelf__list,
	.cr-media-shelf .wp-block-query:not(:has(.wp-block-post-template))::before {
		border-color: CanvasText;
		background: none;
		box-shadow: none;
	}

	.cr-media-shelf .wp-block-post-template.cr-media-shelf__list > li[class*="kind-"]::after {
		background: CanvasText;
		box-shadow: none;
		forced-color-adjust: none;
	}

	.cr-media-shelf .wp-block-post-template.cr-media-shelf__list > li:has(.pk-title a:focus-visible) {
		outline-color: Highlight;
		box-shadow: none;
	}

	.cr-archive--listen .cr-media-shelf::before {
		display: none;
	}
}

/* ============================================================
   Watch: VHS rental shelf (PKIW #227).

   inc/media-shelf.php splits page 1 into a face-out "New releases"
   shelf and a spine-out "All watches" shelf, each a list led by a real
   h2; later pages are all spine-out. The approved mockup on the issue is
   one wide unit: blue-green posts either side with a yellow outer edge,
   three planks, a TV on a VCR standing on the top plank between tape
   stacks and popcorn, clamshells resting on the middle plank, spines on
   the bottom one, and a tape label at the start of each row. The cards
   are the Stream's VHS (inc/stream-media.php); here each is repainted as
   a rental clamshell (the stored poster, or a typographic sleeve when
   there is none) or a titled spine. The archive is for browsing cases:
   inc/media-shelf.php strips the Stream card's year, rating, services,
   date and meta from every item, so a case is the clamshell and its
   title link alone, and that link covers the whole case; a spine also
   loses the poster and is its title link alone. Physical parts
   use the palette tokens, so they keep their colour in dark mode; text
   and shadows use the semantic ones.
   ============================================================ */

/* stylelint-disable no-descending-specificity -- the watch section's selectors
   match different lists (listen vs watch, face vs spine) than the rules it
   follows, so their order is by section, not by specificity. */

/* ---- The unit: posts, top plank, the still life standing on it ----
   The unit runs across the archive's whole page area, inside the global
   padding the main carries, as the mockup's shelf runs nearly edge to
   edge; the header and Browse all keep the wide size. */
.cr-archive--watch > .cr-media-shelf.alignwide {
	max-width: none;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf {
	--vhs-plank: 1.1rem;
	--vhs-post: 1.4rem;
	--vhs-post-edge: 0.35rem;
	--vhs-label-col: 12.5rem;
	--vhs-still-life: 18rem;
	--vhs-case-ratio: 23 / 26.5; /* the approved mockup's broad rental clamshell */
	--vhs-plank-paint: linear-gradient(var(--cr-sky-blue) 0 28%, var(--cr-blue-green) 28% 82%, var(--cr-cerulean) 82%);
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: var(--vhs-still-life) 0 0;
	padding: var(--vhs-plank) var(--vhs-post) 1rem;
	border: 0;
	background:
		linear-gradient(var(--cr-selective-yellow), var(--cr-selective-yellow)) left / var(--vhs-post-edge) 100% no-repeat,
		linear-gradient(var(--cr-selective-yellow), var(--cr-selective-yellow)) right / var(--vhs-post-edge) 100% no-repeat,
		linear-gradient(var(--cr-blue-green), var(--cr-blue-green)) left / var(--vhs-post) 100% no-repeat,
		linear-gradient(var(--cr-blue-green), var(--cr-blue-green)) right / var(--vhs-post) 100% no-repeat,
		var(--vhs-plank-paint) top / 100% var(--vhs-plank) no-repeat;
	box-shadow: var(--cr-shadow-hard);
}

/* The still life on the top plank: separate assets (assets/img/cr-tv-vcr,
   cr-popcorn, cr-vhs-stack, cr-remote), each a background layer with its
   own size and position, every one drawn with its foot on the image's
   bottom edge so it stands on the plank. The TV on its VCR is the focal
   object (full height), the popcorn beside it, the houseplant, stacks
   and remote quieter; narrower screens drop the remote and far stack,
   then the plant and near stack. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	inset-block-end: 100%;
	height: var(--vhs-still-life);
	background:
		url(../img/cr-popcorn.svg) calc(50% + 15rem) bottom / auto 58% no-repeat,
		url(../img/cr-tv-vcr.svg) center bottom / auto 100% no-repeat,
		url(../img/cr-houseplant.svg) 0 bottom / auto 50% no-repeat,
		url(../img/cr-vhs-stack.svg) 15% bottom / auto 32% no-repeat,
		url(../img/cr-remote.svg) 86% bottom / auto 34% no-repeat,
		url(../img/cr-vhs-stack.svg) 100% bottom / auto 26% no-repeat;
	pointer-events: none;
}

/* Each row is a label and a list in one grid cell: the list spans the
   unit so its planks run post to post, and keeps a start inset where the
   label hangs. Page 2 has one row (All watches). */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf > :is(h2, ul) {
	grid-column: 1;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf > :is(h2, ul):nth-of-type(1) {
	grid-row: 1;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf > :is(h2, ul):nth-of-type(2) {
	grid-row: 2;
}

/* Shelf labels: masking tape, upright text, the row's first thing. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf__label {
	position: relative;
	z-index: 2;
	justify-self: start;
	align-self: start;
	margin: 1.4rem 0 0 0.25rem; /* clear of the first case and its focus halo, which starts 14px outside it */
	padding: 0.3rem 0.6rem;
	border: 0;
	background: var(--cr-printer-ivory);
	color: var(--cr-russian-violet);
	box-shadow: var(--cr-shadow-hard-sm);
	font-family: var(--cr-font-accent);
	font-size: 0.92rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	line-height: 1.2;
	text-transform: uppercase;
	transform: rotate(var(--cr-rotate-neg));
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf > h2:nth-of-type(2) {
	transform: rotate(var(--cr-rotate-1));
}

/* Both lists: no frame of their own, no top board (the unit has one),
   none of the Stream collage's margin doodles (the pattern reuses the
   collage's classes for the cards' sake). */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .wp-block-post-template.cr-media-shelf__list {
	position: relative;
	max-width: none;
	margin: 0;
	padding: 1rem 0.9rem 0; /* the end inset keeps a case's focus ring (3px + 4px offset + 7px halo = 14px) inside the list's horizontal clip */
	border: 0;
	background: none;
	box-shadow: none;
}

.cr-archive--watch .cr-media-shelf .wp-block-post-template::before,
.cr-archive--watch .cr-media-shelf .wp-block-post-template::after {
	content: none;
}

/* ---- Face-out: clamshells resting on the middle plank ----
   The three cases centre across the unit, as in the mockup; the label
   hangs at the row's start beside them. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .wp-block-post-template.cr-vhs-shelf__list--face {
	--pkiw-shelf-gap-column: 2.5rem;
	--pkiw-shelf-gap-row: 2rem;
	grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 13rem));
	justify-content: center;
	padding-block-end: 0.5rem;
}

/* The plugin's board under each item goes: the plank is drawn at the
   case's foot instead (below). */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li {
	padding: 0;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li[class*="kind-"]::after {
	content: none;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body {
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* The tape-face parts belong to the Stream view, not the clamshell. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf__list > li .pk-card.cr-vhs--stream.cr-media--shelf :is(.cr-vhs__reel, .cr-vhs__tape, .cr-vhs__label, .cr-media__mech, .pk-kindlabel),
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf__list > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body::before {
	display: none;
}

/* The clamshell: a Russian-violet case, 23:26.5 like the mockup's, with
   a Prussian-blue spine band (a small label and a mark on it) at the
   start and the cover art in the recess. cr-post-kinds.css pins the
   Stream poster slot's margin with !important and tilts it -1.2deg
   (the matted print on the tape face); the case stands square on the
   plank, so both are answered here. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-media {
	order: -1;
	position: relative;
	display: block;
	box-sizing: border-box;
	aspect-ratio: var(--vhs-case-ratio);
	margin: 0 0 var(--vhs-plank) !important;
	padding: 0.65rem 0.65rem 0.65rem 2.3rem;
	transform: none;
	border-radius: 3px;
	background:
		linear-gradient(var(--cr-printer-ivory), var(--cr-printer-ivory)) 0.7rem 1.6rem / 0.9rem 2.2rem no-repeat, /* spine label */
		linear-gradient(var(--cr-sky-blue), var(--cr-sky-blue)) 0.7rem 4.9rem / 0.9rem 0.35rem no-repeat, /* spine mark */
		linear-gradient(var(--cr-periwinkle), var(--cr-periwinkle)) 2.3rem 0 / 2px 100% no-repeat, /* hinge */
		linear-gradient(var(--cr-prussian-blue), var(--cr-prussian-blue)) 0 0 / 2.3rem 100% no-repeat, /* spine band */
		linear-gradient(var(--cr-glaucous), var(--cr-glaucous)) 2.3rem 0 / calc(100% - 2.3rem) 2px no-repeat, /* top lip */
		linear-gradient(var(--cr-glaucous), var(--cr-glaucous)) 2.3rem 100% / calc(100% - 2.3rem) 2px no-repeat, /* bottom lip */
		var(--cr-russian-violet);
	box-shadow: var(--cr-shadow-hard);
	overflow: visible;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-media img {
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 2px;
	object-fit: cover;
	background-color: var(--cr-cerulean); /* outranks the Dominant Color Images plugin's per-image colour: until the cover paints, the recess reads as the sleeve */
	box-shadow: 0 0 0 2px var(--cr-glaucous); /* the clear sleeve's edge around the art */
}

/* The rental tag on the case's top corner, cover or sleeve. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-media::after,
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-caption::after {
	content: "";
	position: absolute;
	inset-block-start: 1.15rem;
	inset-inline-end: 1.15rem;
	width: 1.9rem;
	height: 1.35rem;
	border-radius: 2px;
	background: var(--cr-selective-yellow);
}

/* The sleeve's tag sits inside its 0.65rem frame, so the same spot is
   0.65rem nearer its padding edge. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-caption::after {
	inset-block-start: 0.5rem;
	inset-inline-end: 0.5rem;
}

/* The middle plank, drawn at each case's foot and run both ways to the
   posts (the list clips it there), so every case in the row stands on
   one board and a row with fewer cases shows empty plank. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-media::before,
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-caption::before {
	content: "";
	position: absolute;
	inset-inline: -100vw;
	inset-block-start: 100%;
	height: var(--vhs-plank);
	background: var(--vhs-plank-paint);
	box-shadow: 0 4px 0 var(--cr-prussian-blue);
	pointer-events: none;
}

/* With a cover, the title link is the whole case: it fills the clamshell
   (its text pushed out of view, so the title stays the link's name and
   the h3 stays in the outline) and the cover's alt is empty, so nothing
   is announced twice. The hit-area pseudo the shelf uses elsewhere is
   not needed here. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case.has-cover .pk-body:has(.pk-media) .pk-caption {
	position: static;
	margin: 0;
	padding: 0;
	overflow: visible;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case.has-cover .pk-body:has(.pk-media) .pk-title {
	position: static;
	margin: 0;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case.has-cover .pk-body:has(.pk-media) .pk-title a {
	position: absolute;
	inset: 0 0 var(--vhs-plank);
	z-index: 2;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 200%;
	color: transparent;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case.has-cover .pk-body:has(.pk-media) .pk-title a::before {
	content: none;
}

/* Focus: the ring sits on the case itself (cover or sleeve), not the
   list item, whose box runs on to the plank. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li:has(.pk-title a:focus-visible) {
	outline: none;
	box-shadow: none;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case .pk-body:has(.pk-title a:focus-visible) > .pk-media,
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case .pk-body:not(:has(.pk-media)):has(.pk-title a:focus-visible) > .pk-caption {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo), var(--cr-shadow-hard);
}

/* No stored poster: a typographic sleeve in the clamshell, still one
   real post. The title shows on the sleeve as text (the caption, moved
   up by order), never as generated art; the plank hangs off the sleeve. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-caption {
	order: -1;
	position: relative;
	box-sizing: border-box;
	aspect-ratio: var(--vhs-case-ratio);
	justify-content: flex-end;
	margin: 0 0 var(--vhs-plank);
	padding: 2.1rem 0.75rem 1rem 1.2rem; /* a long title stops below the rental tag */
	border: 0.65rem solid var(--cr-russian-violet);
	border-inline-start-width: 2.3rem;
	border-radius: 3px;
	background: var(--cr-cerulean); /* ivory title on cerulean: 6.3:1 */
	box-shadow: var(--cr-shadow-hard);
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-title {
	white-space: normal;
	color: var(--cr-printer-ivory);
	font-size: 1.15rem;
	line-height: 1.15;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-sub {
	color: var(--cr-light-orange);
}

/* ---- Spine-out: narrow cases standing on the bottom plank ---- */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .wp-block-post-template.cr-vhs-shelf__list--spine {
	--pkiw-shelf-gap-column: 0.55rem;
	--pkiw-shelf-gap-row: 1.5rem;
	grid-template-columns: repeat(auto-fill, 3.6rem);
	justify-content: start;
	padding-block-end: 0;
	padding-inline-start: var(--vhs-label-col);
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li {
	padding: 0 0 var(--vhs-plank);
}

/* The bottom plank: the plugin's board, repainted and run both ways. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li[class*="kind-"]::after {
	inset-inline: -100vw;
	height: var(--vhs-plank);
	background: var(--vhs-plank-paint);
	box-shadow: 0 4px 0 var(--cr-prussian-blue);
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body {
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	height: 11.5rem;
	padding: 0.5rem 0.3rem;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 3px;
	background:
		linear-gradient(var(--cr-ut-orange), var(--cr-ut-orange)) center 0.55rem / 50% 0.3rem no-repeat,
		linear-gradient(var(--cr-printer-ivory), var(--cr-printer-ivory)) center 1.5rem / 72% calc(100% - 3rem) no-repeat,
		var(--cr-russian-violet);
	box-shadow: var(--cr-shadow-hard-sm);
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-caption {
	display: block;
	flex: 1 0 auto;
	box-sizing: border-box;
	height: 100%;
	padding-top: 1.2rem; /* physical: keeps the title inside the cream label */
	padding-bottom: 1.2rem;
	margin-inline: auto;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	overflow: hidden;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-title {
	color: var(--cr-russian-violet);
	font-size: 0.88rem;
	display: block;
	max-height: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* A rewinder at the end of the bottom plank (assets/img/cr-rewinder.svg),
   while the row has room for it: about one spine height wide, the shelf
   object anchoring the board's end. */
.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine::after {
	content: "";
	position: absolute;
	inset: auto 1rem var(--vhs-plank) auto; /* the collage's doodle field set inset: 0 and z-index: -1 */
	z-index: 0;
	width: 11.5rem;
	height: auto;
	aspect-ratio: 200 / 76;
	background: url(../img/cr-rewinder.svg) right bottom / contain no-repeat;
	opacity: 1;
	pointer-events: none;
}

.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine:has(> li:nth-child(9))::after {
	content: none;
}

/* ---- Under 76rem the label beside the centred cases would overlap
   the first one, so labels go above their rows instead ---- */
@media (max-width: 76rem) {

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf {
		--vhs-label-col: 0.9rem;
		display: block;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf__label {
		display: inline-block;
		margin: 0.9rem 0 0.25rem 0.6rem;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .wp-block-post-template.cr-media-shelf__list {
		padding-block-start: 0.5rem;
	}
}

/* ---- Under 64rem the remote and the far stack go, so the TV, popcorn
   and plant keep their size ---- */
@media (max-width: 64rem) {

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf {
		--vhs-still-life: 15rem;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf::before {
		background:
			url(../img/cr-popcorn.svg) calc(50% + 12.5rem) bottom / auto 58% no-repeat,
			url(../img/cr-tv-vcr.svg) center bottom / auto 100% no-repeat,
			url(../img/cr-houseplant.svg) 0 bottom / auto 48% no-repeat,
			url(../img/cr-vhs-stack.svg) 17% bottom / auto 30% no-repeat;
	}
}

/* ---- Small screens: narrower posts; the TV and popcorn only ---- */
@media (max-width: 40rem) {

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf {
		--vhs-post: 0.9rem;
		--vhs-post-edge: 0.25rem;
		--vhs-still-life: 11rem;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf::before {
		background:
			url(../img/cr-popcorn.svg) right 2% bottom / auto 58% no-repeat,
			url(../img/cr-tv-vcr.svg) 42% bottom / auto 100% no-repeat;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine::after {
		width: 5.5rem;
		height: 2.1rem;
	}
}

/* ---- Forced colours: posts and planks as system lines ---- */
@media (forced-colors: active) {

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf {
		border: 3px solid CanvasText;
		background: none;
		box-shadow: none;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf::before,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine::after {
		display: none;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case .pk-body:has(.pk-title a:focus-visible) > .pk-media,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--case .pk-body:not(:has(.pk-media)):has(.pk-title a:focus-visible) > .pk-caption {
		outline-color: Highlight;
		box-shadow: none;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf__label,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-media,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-caption {
		border: 2px solid CanvasText;
		box-shadow: none;
		background: Canvas;
	}

	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-media::before,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--face > li .pk-card.cr-vhs--stream.cr-media--shelf .pk-body:not(:has(.pk-media)) .pk-caption::before,
	.cr-archive--watch .cr-media-shelf .cr-vhs-shelf .cr-vhs-shelf__list--spine > li[class*="kind-"]::after {
		background: CanvasText;
		box-shadow: none;
		forced-color-adjust: none;
	}
}

/* stylelint-enable no-descending-specificity */