/* ============================================================
   Comics you read (PKIW #228): the bagged comic on three surfaces.

   inc/comic.php decides what each surface holds; this file paints it.
     Archive  .cr-comic-rack: a comic-shop rack. The Query Loop's list is
              the rack; tiers, uprights and the wire rail are backgrounds,
              so empty rack space adds no DOM and no placeholder items.
     Stream   .cr-comic--stream: one bagged issue in the collage.
     Single   body.cr-comic-single: the bag left of the post header, the
              notes card and the reading record.

   The bag, board and rack use the palette tokens (not the semantic
   ones), so they keep their colour in dark mode like the other physical
   objects; page text, focus and hard shadows use the semantic tokens.
   Text stays upright except the stickers on the rack's bag and the
   single's, which tilt by --cr-rotate-neg like the tape beside them.
   ============================================================ */

/* ---- The bag: a backing board in a clear sleeve ---- */
.pk-card.cr-comic .pk-media {
	position: relative;
	box-sizing: border-box;
	margin: 0;
	padding: 0.5rem;
	background: var(--cr-periwinkle);
	border: 1.5px solid var(--cr-russian-violet);
	box-shadow: var(--cr-shadow-hard);
	transform: none;
}

.pk-card.cr-comic .pk-media img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: 1px solid var(--cr-russian-violet);
	border-radius: 0;
	background-color: var(--cr-printer-ivory);
}

/* The sleeve: its edge sits just outside the board, with one hard glint. */
.pk-card.cr-comic .pk-media::after {
	content: "";
	position: absolute;
	inset: -0.3rem;
	border: 1px solid color-mix(in srgb, var(--cr-russian-violet) 45%, transparent);
	background: linear-gradient(112deg, transparent 0 64%, color-mix(in srgb, var(--cr-white) 26%, transparent) 64% 68%, transparent 68%);
	pointer-events: none;
}

/* The tape that closes the sleeve's flap. */
.pk-card.cr-comic .pk-media::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset-block-start: -0.75rem;
	inset-inline-end: 1.1rem;
	width: 3.4rem;
	height: 1.15rem;
	border: 1px solid color-mix(in srgb, var(--cr-russian-violet) 25%, transparent);
	background: var(--cr-tape);
	transform: rotate(var(--cr-rotate-neg2));
	pointer-events: none;
}

/* No stored artwork: a typographic cover from the card's own title, on
   the board and in the sleeve where a picture would be. */
.pk-card.cr-comic .cr-comic__type-cover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	box-sizing: border-box;
	width: 100%;
	aspect-ratio: 2 / 3;
	padding: clamp(0.85rem, 3.5vw, 1.4rem) clamp(0.8rem, 3vw, 1.2rem);
	border: 1px solid var(--cr-russian-violet);
	background: var(--cr-cerulean);
	color: var(--cr-printer-ivory);
	overflow: hidden;
}

.pk-card.cr-comic .cr-comic__type-title {
	font-family: var(--cr-font-accent);
	font-size: clamp(1rem, 4.2vw, 1.15rem);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-tight);
	overflow-wrap: anywhere;
}

.pk-card.cr-comic .cr-comic__type-creators {
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-sm);
	line-height: var(--cr-leading-snug);
}

/* Stored artwork that failed to load (assets/js/site-ux.js marks the
   card): the board becomes the typographic cover. */
.pk-card.cr-comic.cr-comic--no-art .pk-media {
	aspect-ratio: 2 / 3;
	background: var(--cr-cerulean);
	box-shadow: inset 0 0 0 0.5rem var(--cr-periwinkle), var(--cr-shadow-hard);
}

/* ============================================================
   Archive: the rack
   ============================================================ */
.cr-comic-rack {
	max-width: 72rem;
	margin-inline: auto;
}

.cr-comic-rack .wp-block-post-template.cr-comic-rack__list {
	--rack-cols: 4;
	--rack-lip: 2.75rem;
	--rack-tag-drop: 2.25rem;
	--rack-comic: clamp(8rem, 19vw, 14.5rem);
	--rack-tier: calc(var(--rack-comic) * 1.5 + 7.5rem);
	--sleeve-edge: 1px;
	--sleeve-gap: calc(var(--rack-comic) * 0.03);
	--sleeve-foot: calc(var(--rack-comic) * 0.012);
	--sleeve-flap: calc(var(--rack-comic) * 0.11);
	--sleeve-line: color-mix(in srgb, var(--cr-light-gray) 88%, transparent);
	--sleeve-film: color-mix(in srgb, var(--cr-light-gray) 72%, transparent);
	--sleeve-double: color-mix(in srgb, var(--cr-light-gray) 55%, transparent);
	--sleeve-shine: color-mix(in srgb, var(--cr-light-gray) 40%, transparent);
	--sleeve-haze: color-mix(in srgb, var(--cr-light-gray) 16%, transparent);
	--sleeve-veil: color-mix(in srgb, var(--cr-light-gray) 7%, transparent);
	--sleeve-lilac: color-mix(in srgb, var(--cr-periwinkle) 24%, transparent);
	--sleeve-fold: color-mix(in srgb, var(--cr-periwinkle) 34%, transparent);
	--sleeve-tint: color-mix(in srgb, var(--cr-sky-blue) 18%, transparent);
	--sleeve-clear: color-mix(in srgb, var(--cr-light-gray) 0%, transparent);
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--rack-cols), minmax(0, 1fr));
	grid-auto-rows: var(--rack-tier);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	columns: auto;
	border: 2px solid var(--cr-russian-violet);
	background:
		/* Each tier's front lip, in layers: the ink edge, a lit top edge,
		   the front face, its shaded underside, the ink foot. */
		repeating-linear-gradient(180deg, transparent 0 calc(var(--rack-tier) - var(--rack-lip)), var(--cr-russian-violet) calc(var(--rack-tier) - var(--rack-lip)) calc(var(--rack-tier) - var(--rack-lip) + 2px), var(--cr-light-gray) calc(var(--rack-tier) - var(--rack-lip) + 2px) calc(var(--rack-tier) - var(--rack-lip) + 4px), var(--cr-glaucous) calc(var(--rack-tier) - var(--rack-lip) + 4px) calc(var(--rack-tier) - 6px), var(--cr-glaucous-dark) calc(var(--rack-tier) - 6px) calc(var(--rack-tier) - 2px), var(--cr-russian-violet) calc(var(--rack-tier) - 2px) var(--rack-tier)),
		/* Slot cuts down every upright: the rack's back through the steel. */
		conic-gradient(at 0.12rem 0.45rem, transparent 75%, var(--cr-prussian-blue) 0) 0.14rem 0 / calc(100% / var(--rack-cols)) 0.9rem,
		repeating-linear-gradient(180deg, var(--cr-prussian-blue) 0 0.45rem, transparent 0.45rem 0.9rem) calc(100% - 0.14rem) 0 / 0.12rem 100% no-repeat,
		/* The uprights: one at the left of each bay and one closing the
		   right end, lit along one edge. */
		linear-gradient(90deg, var(--cr-glaucous) 0 0.12rem, var(--cr-glaucous-dark) 0.12rem 0.4rem, transparent 0.4rem) 0 0 / calc(100% / var(--rack-cols)) 100%,
		linear-gradient(90deg, var(--cr-glaucous) 0 0.12rem, var(--cr-glaucous-dark) 0.12rem) 100% 0 / 0.4rem 100% no-repeat,
		var(--cr-prussian-blue);
	box-shadow: var(--cr-shadow-hard-2);
}

/* The wire rail that keeps issues from tipping forward, with a post at
   each end of each bay where it bends down into the lip. */
.cr-comic-rack .wp-block-post-template.cr-comic-rack__list::after {
	--rail: calc(var(--rack-tier) - var(--rack-lip) - 2.4rem);
	content: "";
	position: absolute;
	inset: 0;
	background:
		conic-gradient(at 2px 2.4rem, transparent 75%, var(--cr-light-gray) 0) 0.85rem var(--rail) / calc(100% / var(--rack-cols)) var(--rack-tier),
		conic-gradient(at 2px 2.4rem, transparent 75%, var(--cr-light-gray) 0) calc(-0.85rem - 2px) var(--rail) / calc(100% / var(--rack-cols)) var(--rack-tier),
		repeating-linear-gradient(180deg, transparent 0 var(--rail), var(--cr-light-gray) var(--rail) calc(var(--rail) + 2px), transparent calc(var(--rail) + 2px) var(--rack-tier));
	pointer-events: none;
}

/* The side brackets: a shallow end panel on each side of every tier,
   widening toward its lip. They paint behind the rack and its shadow
   (the rack's wrapper is the stacking context), and only where the page
   has room for them beside the rack. */
@media (min-width: 72rem) {

	.cr-comic-rack {
		isolation: isolate;
	}

	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list::before {
		--rack-bracket: 1rem;
		content: "";
		position: absolute;
		z-index: -1;
		inset-block: 0;
		inset-inline: calc(var(--rack-bracket) * -1);
		background:
			linear-gradient(to bottom right, transparent 50%, var(--cr-glaucous-dark) 50%) 0 0 / var(--rack-bracket) var(--rack-tier) repeat-y,
			linear-gradient(to bottom left, transparent 50%, var(--cr-glaucous-dark) 50%) 100% 0 / var(--rack-bracket) var(--rack-tier) repeat-y;
		pointer-events: none;
	}
}

.cr-comic-rack .wp-block-post-template.cr-comic-rack__list > li {
	position: relative;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0 0.75rem var(--rack-lip);
	break-inside: auto;
}

/* The card is the bag and, under it, the shelf tag. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: min(var(--rack-comic), 100%);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	transform: none;
	overflow: visible;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card::before,
.cr-comic-rack .cr-comic-rack__list > li .pk-card::after {
	content: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card .pk-body {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	transform: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card .pk-media {
	order: -1;
}

/* The polybag. On the rack a comic stands in a loose clear bag, not on the
   board the Stream and the single use. The media box is the bag: pale
   plastic that washes the rack lightly where it reaches past the cover, a
   narrow rim at the sides and foot, a taller folded flap on top, soft
   corners, and a slight tilt so it doesn't sit square. ::before is the
   flap, folded over the top of the bag. ::after lies over the cover: one
   broad reflection that fades at both edges and a few creases at the top
   and corners. Neither adds content. The plastic is Light Gray under a
   Periwinkle tint, dense enough at the rim and flap to stay pale against the
   dark rack and thin over the cover, in light and dark mode alike. The comic
   rests at the foot of the bag, and one hard shadow lifts the bag off the
   rack. The shelf tag under it stays upright. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media {
	padding: var(--sleeve-flap) var(--sleeve-gap) var(--sleeve-foot);
	border: var(--sleeve-edge) solid var(--sleeve-line);
	border-radius: var(--cr-radius-sm);
	background: linear-gradient(var(--sleeve-lilac), var(--sleeve-lilac)) var(--sleeve-film);
	box-shadow: var(--cr-shadow-hard-sm);
	transform: rotate(var(--cr-rotate-1));
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media::before {
	z-index: auto;
	inset-block: 0 auto;
	inset-inline: 0;
	width: auto;
	height: var(--sleeve-flap);
	border: 0;
	border-block-end: 1px solid var(--sleeve-line);
	border-radius: var(--cr-radius-sm) var(--cr-radius-sm) 0 0;
	background:
		/* Two creases across the fold. */
		linear-gradient(172deg, var(--sleeve-clear) 38%, var(--sleeve-shine) 46%, var(--sleeve-clear) 58%),
		linear-gradient(186deg, var(--sleeve-clear) 55%, var(--sleeve-fold) 66%, var(--sleeve-clear) 80%),
		/* The doubled plastic of the flap, thicker toward the fold. */
		linear-gradient(180deg, var(--sleeve-haze), var(--sleeve-double));
	transform: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media::after {
	inset: 0;
	width: auto;
	aspect-ratio: auto;
	border: 0;
	border-radius: var(--cr-radius-sm);
	background:
		/* The plastic itself, a thin veil over the whole cover. */
		linear-gradient(var(--sleeve-veil), var(--sleeve-veil)),
		/* A crease at the upper left corner and one at the lower right. */
		linear-gradient(140deg, var(--sleeve-shine) 0, var(--sleeve-clear) 9%) 0 0 / 46% 22% no-repeat,
		linear-gradient(320deg, var(--sleeve-fold) 0, var(--sleeve-clear) 8%) 100% 100% / 40% 16% no-repeat,
		/* A cool edge down the left side, where the bag curls. */
		linear-gradient(90deg, var(--sleeve-tint), var(--sleeve-clear) 7%),
		/* The broad reflection, fading at both edges. */
		linear-gradient(112deg, var(--sleeve-clear) 10%, var(--sleeve-haze) 20%, var(--sleeve-shine) 29%, var(--sleeve-haze) 38%, var(--sleeve-clear) 50%);
}

/* Inside the bag the cover has no inked outline, only the page's own edge. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media img {
	border-color: var(--sleeve-fold);
}

/* No artwork: the typographic cover stands in the bag where a picture
   would, and a failed picture's board is painted the same distance from
   the sleeve's edge. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .cr-comic__type-cover {
	border-color: var(--sleeve-fold);
}

.cr-comic-rack .cr-comic-rack__list > li .cr-comic--rack.cr-comic--no-art .pk-media {
	padding: calc(var(--sleeve-flap) + 0.85rem) calc(var(--sleeve-gap) + 0.8rem) calc(var(--sleeve-foot) + 0.85rem);
	background:
		linear-gradient(var(--cr-cerulean), var(--cr-cerulean)) var(--sleeve-gap) var(--sleeve-flap) / calc(100% - var(--sleeve-gap) * 2) calc(100% - var(--sleeve-flap) - var(--sleeve-foot)) no-repeat,
		var(--sleeve-film);
}

/* A strip its author drew: its picture, unbagged. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic-strip .pk-media {
	margin: 0;
	padding: 0.35rem;
	border: 1.5px solid var(--cr-russian-violet);
	background: var(--cr-printer-ivory);
	box-shadow: var(--cr-shadow-hard);
	transform: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic-strip .pk-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 3;
	border-radius: 0;
	object-fit: cover;
}

/* The shelf tag on the lip under the bag: the title, then series, volume
   and issue when stored. Cover art does not always carry its title, so the
   tag is where a sighted reader finds it. One line: the tiers are a fixed
   height, and the full title is on the single. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card .pk-caption {
	display: flex;
	gap: 0.35rem;
	align-items: baseline;
	justify-content: center;
	box-sizing: border-box;
	margin: 0.45rem 0 calc(var(--rack-tag-drop) * -1);
	padding: 0.2rem 0.45rem;
	border: 1px solid var(--cr-russian-violet);
	background: var(--cr-printer-ivory);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-sm);
	font-weight: var(--cr-weight-semibold);
	line-height: var(--cr-leading-snug);
	white-space: nowrap;
	transform: none;
	overflow: hidden;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card .pk-title {
	flex: 0 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cr-comic-rack .cr-comic__label {
	display: flex;
	flex: none;
	gap: 0.35rem;
	max-width: 60%;
	margin: 0;
	color: inherit;
	font: inherit;
	font-weight: var(--cr-weight-regular);
	overflow: hidden;
}

.cr-comic-rack .cr-comic__label .pk-comic-series {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cr-comic-rack .cr-comic__label :is(.pk-comic-volume, .pk-comic-number) {
	flex: none;
}

/* The title's link is the whole bag and its tag. */
.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a {
	color: var(--cr-russian-violet);
	text-decoration: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a:hover {
	text-decoration: underline;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a::before {
	content: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0 0 calc(var(--rack-tag-drop) * -1);
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a:focus-visible {
	outline: none;
}

.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a:focus-visible::after {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 5px;
	box-shadow: 0 0 0 8px var(--cr-focus-halo);
}

/* Status sticker: a round label stuck on the outside of the plastic, in the
   bag's upper right with plastic showing all round it, tilted, and
   hand-lettered on two lines at the text floor. 5.75rem is the smallest
   circle that holds "Currently reading" in Rock Salt at 12px with its ink
   inside the border, forced colours' 2px border included: 40% of the
   widest bag and most of a phone's; phones use the pill below 40rem. */
.cr-comic-rack .cr-comic__sticker {
	position: absolute;
	z-index: 1;
	inset-block-start: calc(var(--rack-comic) * 0.05);
	inset-inline-end: calc(var(--rack-comic) * 0.045);
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: calc(var(--cr-space-4xl) - var(--cr-space-2xs));
	aspect-ratio: 1;
	height: auto;
	margin: 0;
	padding: 0.2rem;
	border: 1.5px solid var(--cr-russian-violet);
	border-radius: var(--cr-radius-full);
	background: var(--cr-selective-yellow);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-display);
	font-size: var(--cr-text-floor);
	font-weight: var(--cr-weight-regular);
	line-height: 1.35;
	text-align: center;
	text-wrap: balance;
	pointer-events: none;
	transform: rotate(var(--cr-rotate-neg));
}

.cr-comic-rack .cr-comic__sticker--to-read {
	background: var(--cr-light-orange);
}

.cr-comic-rack .cr-comic__sticker--abandoned {
	background: var(--cr-light-gray);
}

@media (max-width: 64rem) {

	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list {
		--rack-cols: 3;
		--rack-comic: clamp(7.5rem, 22vw, 10rem);
	}
}

@media (max-width: 40rem) {

	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list {
		--rack-cols: 2;
		--rack-comic: clamp(6.5rem, 34vw, 9rem);
	}

	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list > li {
		padding-inline: 0.6rem;
	}

	/* Phone racks use a pill because "Currently" is 77.5px wide at the 12px
	   floor, so no circle under 5.75rem can hold it. The pill is as wide as
	   its label up to the circle's old width, wrapping "Currently reading"
	   onto two lines: 92 by 40px at most, about 18% of the bag at 320px and
	   12% at 390px. The circle returns above 40rem. */
	.cr-comic-rack .cr-comic__sticker {
		width: fit-content;
		max-width: calc(var(--cr-space-4xl) - var(--cr-space-2xs));
		aspect-ratio: auto;
		padding: 0.3rem 0.4rem;
		border-radius: var(--cr-radius-full);
		line-height: 1.5;
	}
}

/* ============================================================
   Single: the bag beside its details
   ============================================================ */
body.cr-comic-single .single-post__featured,
body.cr-comic-single .single-post__lede-meta .single-post__date,
body.cr-comic-single .single-post__meta {
	display: none;
}

/* Under the H1: creators, stars, status. */
body.cr-comic-single .cr-comic__creators {
	margin: 0.35rem 0 0;
	color: var(--cr-ink);
	font-family: var(--cr-font-accent);
	font-size: 1.35rem;
	font-weight: var(--cr-weight-regular);
}

body.cr-comic-single .cr-comic__creators::after {
	content: "";
	display: block;
	width: 6rem;
	height: 0.3rem;
	margin-top: 0.4rem;
	border-radius: 1px;
	background: var(--cr-cerulean);
	transform: rotate(var(--cr-rotate-1));
}

body.cr-comic-single .cr-journal__rating {
	display: flex;
	align-items: center;
	gap: 0.15rem;
	margin: 0.45rem 0 0;
	color: var(--cr-selective-yellow);
}

body.cr-comic-single .cr-journal__star {
	display: inline-flex;
	width: 1.35rem;
	height: 1.35rem;
}

body.cr-comic-single .cr-journal__star svg {
	width: 100%;
	height: 100%;
	stroke: var(--cr-russian-violet);
	stroke-width: 1;
}

body.cr-comic-single .cr-journal__star--off {
	color: transparent;
}

body.cr-comic-single .cr-journal__rating-value {
	margin-left: 0.5rem;
	color: var(--cr-ink);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-sm);
	letter-spacing: var(--cr-tracking-eyebrow);
}

body.cr-comic-single .cr-comic__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.8rem;
	margin: 0.6rem 0 0;
	color: var(--cr-ink-muted);
	font-family: var(--cr-font-mono);
	font-size: max(0.75rem, var(--cr-text-floor));
	letter-spacing: var(--cr-tracking-eyebrow);
	text-transform: uppercase;
}

body.cr-comic-single .cr-comic__status-chip {
	display: inline-block;
	padding: 0.28rem 0.7rem;
	border-radius: 2px;
	background: var(--cr-sky-blue);
	color: var(--cr-prussian-blue);
	font-weight: var(--cr-weight-bold);
}

body.cr-comic-single .cr-comic__status--reading .cr-comic__status-chip {
	background: var(--cr-selective-yellow);
	color: var(--cr-russian-violet);
}

body.cr-comic-single .cr-comic__status--abandoned .cr-comic__status-chip {
	background: var(--cr-light-gray);
	color: var(--cr-russian-violet);
}

body.cr-comic-single .cr-comic__status--to-read .cr-comic__status-chip {
	background: var(--cr-light-orange);
	color: var(--cr-russian-violet);
}

/* The bag. Title, creators, stars and dates stay in the card for
   microformats; the header and the record show them. The card's padding
   is the room the clear rim of the sleeve takes outside the board. */
body.cr-comic-single .single-post__content .pk-card.cr-comic--single {
	--sleeve-rim: clamp(0.45rem, 1vw, 0.75rem);
	--sleeve-flap: calc(var(--sleeve-rim) + max(1.1rem, 4.5cqi));
	--sleeve-film: color-mix(in srgb, var(--cr-light-gray) 55%, transparent);
	--sleeve-seam: color-mix(in srgb, var(--cr-russian-violet) 35%, transparent);
	--sleeve-glint: color-mix(in srgb, var(--cr-white) 26%, transparent);
	--sleeve-glint-2: color-mix(in srgb, var(--cr-white) 18%, transparent);
	position: relative;
	display: block;
	box-sizing: border-box;
	width: min(100% - 1.5rem, 18rem);
	margin: 1.5rem auto 0;
	padding: var(--sleeve-rim) var(--sleeve-rim) 0;
	container-type: inline-size;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single::before,
body.cr-comic-single .single-post__content .pk-card.cr-comic--single::after {
	content: none;
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-body {
	position: relative;
	display: block;
	margin: 0;
	padding: 0;
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single :is(.pk-badge, .pk-caption, .pk-stars, .pk-meta) {
	display: none;
}

/* A broad periwinkle board, and round it the sleeve's clear rim: pale
   film (the outline) inside an inked edge. The sleeve carries the hard
   shadow, a seam where the flap folds over, the tape on the flap and two
   hard reflections across the plastic. */
body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-media {
	padding: max(0.85rem, 4.5cqi);
	box-shadow: none;
	outline: var(--sleeve-rim) solid var(--sleeve-film);
	outline-offset: 0;
}

/* The page in the bag is 3:4, as the approved mockup draws it. A 2:3
   cover isn't cropped: the page's ivory edge shows beside it. */
body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-media img,
body.cr-comic-single .single-post__content .pk-card.cr-comic--single .cr-comic__type-cover {
	aspect-ratio: 3 / 4;
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-media img {
	object-fit: contain;
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-media::after {
	inset: calc((var(--sleeve-rim) + 1.5px) * -1);
	border: 1.5px solid var(--sleeve-seam);
	background:
		linear-gradient(180deg, transparent 0 calc(var(--sleeve-flap) - 1.5px), var(--sleeve-seam) calc(var(--sleeve-flap) - 1.5px) var(--sleeve-flap), transparent var(--sleeve-flap)),
		linear-gradient(180deg, var(--sleeve-film) 0 var(--sleeve-flap), transparent var(--sleeve-flap)) 0 0 / 100% 100% no-repeat,
		linear-gradient(112deg, transparent 0 58%, var(--sleeve-glint) 58% 64%, transparent 64% 67%, var(--sleeve-glint-2) 67% 69.5%, transparent 69.5%);
	box-shadow: var(--cr-shadow-hard-2);
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-media::before {
	inset-block-start: calc(var(--sleeve-rim) * -1 - 0.6rem);
	inset-inline-end: 2rem;
	width: 4.4rem;
	height: max(1.15rem, calc(var(--sleeve-flap) * 0.75));
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .cr-comic__type-title {
	font-size: var(--cr-text-2xl);
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .cr-comic__type-creators {
	font-size: var(--cr-text-md);
}

/* The stand the bag leans in. */
body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-body::after {
	content: "";
	display: block;
	height: 0.9rem;
	margin: calc(var(--sleeve-rim) + 0.35rem) calc(var(--sleeve-rim) * -1 - 0.6rem) 0;
	border: 1.5px solid var(--cr-russian-violet);
	border-radius: var(--cr-radius-xs);
	background: var(--cr-light-gray);
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-kindlabel {
	position: absolute;
	z-index: 3;
	inset: 0.4rem 0.4rem auto auto;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 5.4rem;
	height: 5.4rem;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--cr-russian-violet);
	border-radius: var(--cr-radius-full);
	background: var(--cr-selective-yellow);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-display);
	font-size: var(--cr-text-base);
	font-weight: var(--cr-weight-regular);
	letter-spacing: var(--cr-tracking-normal);
	line-height: 1;
	text-transform: none;
	transform: rotate(var(--cr-rotate-neg));
}

body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-kindlabel::after {
	content: "";
	position: absolute;
	inset: auto 1.1rem 1.65rem;
	height: 2px;
	background: var(--cr-russian-violet);
	transform: rotate(var(--cr-rotate-neg));
}

body.cr-comic-single .cr-journal--comic {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

/* ---- Notes: a ruled sheet torn along its top and foot ----
   The menu's and the order ticket's tear: the paper is a pseudo-element
   cut by clip-path, and drop-shadow filters draw the ink edge and the
   hard shadow, so both follow the torn edge. */
body.cr-comic-single .cr-journal__notes {
	--notes-tear: polygon(0 0.3rem, 4% 0.05rem, 11% 0.4rem, 19% 0.1rem, 27% 0.45rem, 36% 0.15rem, 44% 0.35rem, 53% 0, 61% 0.4rem, 70% 0.1rem, 78% 0.45rem, 86% 0.05rem, 93% 0.35rem, 100% 0.1rem, 100% calc(100% - 0.35rem), 94% calc(100% - 0.05rem), 87% calc(100% - 0.4rem), 79% calc(100% - 0.1rem), 71% calc(100% - 0.45rem), 62% calc(100% - 0.05rem), 54% calc(100% - 0.35rem), 45% 100%, 37% calc(100% - 0.4rem), 28% calc(100% - 0.1rem), 20% calc(100% - 0.45rem), 12% calc(100% - 0.05rem), 5% calc(100% - 0.3rem), 0 calc(100% - 0.1rem));
	position: relative;
	isolation: isolate;
	margin: 0;
	padding: 1.4rem 1.6rem 1.6rem 2.9rem;
	color: var(--cr-russian-violet);
	filter: drop-shadow(1.5px 0 0 var(--cr-ink)) drop-shadow(-1.5px 0 0 var(--cr-ink)) drop-shadow(0 1.5px 0 var(--cr-ink)) drop-shadow(0 -1.5px 0 var(--cr-ink)) drop-shadow(var(--cr-shadow-hard));
}

body.cr-comic-single .cr-journal__notes::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background-color: var(--cr-printer-ivory);
	background-image: repeating-linear-gradient(180deg, transparent 0 calc(1.7rem - 1px), color-mix(in srgb, var(--cr-russian-violet) 13%, transparent) calc(1.7rem - 1px) 1.7rem);
	background-position: 0 1.25rem;
	clip-path: var(--notes-tear);
	pointer-events: none;
}

body.cr-comic-single .cr-journal__notes-title {
	display: block;
	margin: 0 0 0.9rem;
	padding: 0 0 0.3rem;
	border-bottom: 2px solid var(--cr-russian-violet);
	background: none;
	box-shadow: none;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-display);
	font-size: 1.3rem;
	font-weight: var(--cr-weight-regular);
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
}

body.cr-comic-single .cr-journal__notes .pk-note {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-mono);
	font-size: 0.92rem;
	line-height: 1.848;
}

body.cr-comic-single .cr-journal__notes .pk-note p {
	margin: 0 0 1.7rem;
}

body.cr-comic-single .cr-journal__notes .pk-note p:last-child {
	margin-bottom: 0;
}

/* ---- Reading record: a library card (the Read single's) ---- */
body.cr-comic-single .cr-record {
	position: relative;
	margin: 0;
	padding: 1.1rem 1.4rem 1.6rem;
	border: 1.5px solid var(--cr-ink);
	background-color: var(--cr-printer-ivory);
	background-image: repeating-linear-gradient(180deg, transparent 0 1.9rem, color-mix(in srgb, var(--cr-russian-violet) 8%, transparent) 1.9rem calc(1.9rem + 1px));
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-mono);
}

body.cr-comic-single .cr-record::before {
	content: "";
	position: absolute;
	inset: 0.45rem;
	border: 1px solid color-mix(in srgb, var(--cr-russian-violet) 40%, transparent);
	pointer-events: none;
}

body.cr-comic-single .cr-record-eyebrow {
	margin: 0;
	color: var(--cr-cerulean);
	font-size: max(0.75rem, var(--cr-text-floor));
	letter-spacing: var(--cr-tracking-eyebrow);
	text-transform: uppercase;
}

body.cr-comic-single .cr-record-title {
	margin: 0.15rem 0 0.9rem;
	padding-bottom: 0.45rem;
	border-bottom: 2px solid var(--cr-russian-violet);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-mono);
	font-size: max(0.82rem, var(--cr-text-floor));
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-widest);
	text-transform: uppercase;
}

body.cr-comic-single .cr-record-rows {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
}

body.cr-comic-single .cr-record-row {
	display: grid;
	grid-template-columns: 7.5rem minmax(0, 1fr);
	gap: 0.6rem;
	align-items: baseline;
	padding: 0.42rem 0;
	border-bottom: 1px dotted color-mix(in srgb, var(--cr-russian-violet) 45%, transparent);
}

body.cr-comic-single .cr-record-row dt {
	margin: 0;
	color: var(--cr-russian-violet-soft);
	font-size: max(0.75rem, var(--cr-text-floor));
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	text-transform: uppercase;
}

body.cr-comic-single .cr-record-row dd {
	margin: 0;
	color: var(--cr-russian-violet);
	font-size: 0.86rem;
	overflow-wrap: anywhere;
}

body.cr-comic-single .cr-record-stamp {
	position: absolute;
	right: 0.9rem;
	bottom: -1.2rem;
	width: 7rem;
	mix-blend-mode: multiply;
	pointer-events: none;
}

body.cr-comic-single .cr-record-stamp .cr-stamp {
	width: 100%;
	height: auto;
}

body.cr-comic-single .cr-record:has(.cr-record-stamp) .cr-record-rows {
	padding-right: 5.5rem;
}

/* ---- Read / find it ---- */
body.cr-comic-single .cr-journal--comic > .pk-sources {
	margin: 0;
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__label {
	margin: 0 0 0.5rem;
	color: var(--cr-ink-muted);
	font-family: var(--cr-font-mono);
	font-size: max(0.75rem, var(--cr-text-floor));
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-widest);
	text-transform: uppercase;
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.55rem 0.65rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__list li {
	margin: 0;
	padding: 0;
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__list li::before,
body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__list li::marker {
	content: none;
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__link {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
	padding: 0.3rem 0.75rem;
	border: 1.5px solid var(--cr-russian-violet);
	background: var(--cr-light-orange);
	box-shadow: var(--cr-shadow-hard-sm);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-sm);
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	text-decoration: none;
	text-transform: uppercase;
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__link:hover {
	background: var(--cr-selective-yellow);
}

body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__link:focus-visible {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 8px var(--cr-focus-halo);
}

/* ---- Body text after the card ---- */
body.cr-comic-single .cr-journal--comic > .cr-journal__more {
	margin-top: 2.25rem;
}

/* Wide screens: the bag stands left of the header, notes and record.
   The header and the post content are siblings in <main>, so the content's
   wrappers step aside (display: contents) and the bag, notes and record
   join the header as items of one grid. The bag grows with the screen,
   from 22rem at 64rem to 44rem (42rem at 1536px, close to half the
   screen, as the approved mockup draws it). The details column keeps the
   width it had beside the 22-36rem bag, so the bag takes its extra width
   from the page margins, not from the notes and record. The gap stays
   8rem: the H1's format avatar hangs 7.25rem to its left and the bag's
   hard shadow 6px to its right, so a narrower gap would put the avatar on
   the COMIC sticker. */
@media (min-width: 64rem) {

	body.cr-comic-single main.single-post {
		--comic-bag: clamp(22rem, 62.5vw - 18rem, 44rem);
		--comic-gap: 8rem;
		--comic-details: calc(var(--wp--style--global--wide-size) - clamp(22rem, 40vw - 4rem, 36rem) - var(--comic-gap));
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			[bag-start] minmax(0, var(--comic-bag)) [bag-end]
			var(--comic-gap)
			[details-start] minmax(0, var(--comic-details)) [details-end]
			minmax(0, 1fr);
		grid-template-rows: repeat(6, auto) minmax(0, 1fr);
	}

	body.cr-comic-single .single-post__content > *,
	body.cr-comic-single main.single-post > *,
	body.cr-comic-single .single-post__content div:has(.cr-journal--comic) > * {
		grid-column: 1 / -1;
	}

	body.cr-comic-single .single-post__content,
	body.cr-comic-single .single-post__content div:has(.cr-journal--comic),
	body.cr-comic-single .cr-journal--comic {
		display: contents;
	}

	body.cr-comic-single main.single-post > .single-post__header {
		grid-column: details;
		grid-row: 1;
		width: 100%;
		max-width: none;
	}

	body.cr-comic-single .single-post__content .cr-journal--comic > .pk-card.cr-comic--single {
		grid-column: bag;
		grid-row: 1 / -1;
		align-self: start;
		width: 100%;
		margin: 0.5rem 0 0;
	}

	/* Beside the tall bag the notes and the record stay sheets, not strips:
	   at least nine notebook rules and eight card rules, so a short note
	   leaves blank ruled lines under it the way the paper would. */
	body.cr-comic-single .cr-journal--comic > .cr-journal__notes {
		grid-column: details;
		grid-row: 2;
		min-height: calc(1.7rem * 9);
		margin-top: 2rem;
	}

	body.cr-comic-single .cr-journal--comic > .cr-record {
		grid-column: details;
		grid-row: 3;
		min-height: calc(1.9rem * 8);
		margin-top: 2rem;
	}

	body.cr-comic-single .cr-journal--comic > .pk-sources {
		grid-column: details;
		grid-row: 4;
		margin-top: 2.25rem;
	}

	body.cr-comic-single .cr-journal--comic > .cr-journal__more {
		grid-column: details;
		grid-row: 5;
	}

	/* "Also on" follows the record in its column. */
	body.cr-comic-single .single-post__content > .syndication-links,
	body.cr-comic-single .single-post__content div:has(.cr-journal--comic) > .syndication-links {
		grid-column: details;
		grid-row: 6;
		margin-top: 2rem;
	}
}

@media (max-width: 40rem) {

	body.cr-comic-single .cr-journal__notes {
		padding-left: 2.4rem;
	}

	body.cr-comic-single .cr-record-row {
		grid-template-columns: 6rem minmax(0, 1fr);
	}

	body.cr-comic-single .cr-record:has(.cr-record-stamp) .cr-record-rows {
		padding-right: 0;
		padding-bottom: 3.6rem;
	}

	body.cr-comic-single .cr-record-stamp {
		width: 5.5rem;
		bottom: -0.9rem;
	}
}

/* ============================================================
   Stream: one bagged issue in the collage
   ============================================================ */
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	overflow: visible;
	aspect-ratio: auto;
	color: var(--cr-russian-violet);
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream::before,
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream::after {
	content: none;
	display: none;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-badge {
	display: none;
}

/* The board carries the cover and, under it, the issue's paper slip. */
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-body {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	width: auto;
	padding: 0.55rem;
	border: 1.5px solid var(--cr-russian-violet);
	border-radius: 0;
	background: var(--cr-periwinkle);
	box-shadow: var(--cr-shadow-hard);
	overflow: visible;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-media {
	order: -1;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-media::after {
	inset: 0;
	border: 0;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-media::before {
	inset-block-start: -1.15rem;
}

/* The caption steps aside so its lines and the stars order as one slip:
   title, issue, creators, rating, status, note. */
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-caption {
	display: contents;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream :is(.pk-title, .pk-sub, .pk-stars, .pk-note) {
	margin: 0;
	padding: 0.2rem 0.85rem;
	background: var(--cr-printer-ivory);
	color: var(--cr-russian-violet);
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-title {
	order: 1;
	padding-block-start: 0.75rem;
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-xl);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-tight);
	letter-spacing: var(--cr-tracking-tight);
	overflow-wrap: anywhere;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-sub {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-base);
	line-height: var(--cr-leading-snug);
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-sub.pk-comic-issue {
	order: 2;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-sub:has(.p-author) {
	order: 3;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-sub:has(.pk-comic-status) {
	order: 5;
	padding-block-end: 0.7rem;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-comic-status {
	display: inline-block;
	padding: 0.1rem 0.7rem;
	border-radius: var(--cr-radius-full);
	background: var(--cr-periwinkle);
	font-size: var(--cr-text-sm);
	font-weight: var(--cr-weight-semibold);
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-stars {
	order: 4;
	display: flex;
	align-items: center;
	gap: 0.1rem;
	color: var(--cr-selective-yellow);
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-stars svg {
	width: 1.1rem;
	height: 1.1rem;
	stroke: var(--cr-russian-violet);
	stroke-width: 1;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-stars svg.off {
	color: transparent;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-rating-value {
	margin-inline-start: 0.45rem;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-sm);
	font-weight: var(--cr-weight-semibold);
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-note {
	order: 6;
	margin-block-start: -0.4rem;
	padding-block-end: 0.85rem;
	border: 0;
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-sm);
	line-height: var(--cr-leading-normal);
}

/* A link inside the note stays its own target above the bag's link. */
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-note a {
	position: relative;
	z-index: 3;
}

/* The title link covers the whole bag: cover and slip. */
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-title a {
	color: var(--cr-russian-violet);
	text-decoration: none;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-title a::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-title a:focus-visible {
	outline: none;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-title a:focus-visible::after {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

/* Kind label: a round sticker on the bag's top corner. */
.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-kindlabel {
	position: absolute;
	z-index: 3;
	inset: 0.1rem 0.1rem auto auto;
	display: grid;
	place-items: center;
	box-sizing: border-box;
	width: 4.6rem;
	height: 4.6rem;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 1.5px solid var(--cr-russian-violet);
	border-radius: var(--cr-radius-full);
	background: var(--cr-selective-yellow);
	box-shadow: none;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-display);
	font-size: var(--cr-text-base);
	font-weight: var(--cr-weight-regular);
	letter-spacing: var(--cr-tracking-normal);
	line-height: 1;
	text-transform: none;
	transform: none;
	pointer-events: none;
}

.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-kindlabel::after {
	content: "";
	position: absolute;
	inset: auto 1rem 1.15rem;
	height: 2px;
	background: var(--cr-russian-violet);
	transform: rotate(var(--cr-rotate-neg));
}

/* ============================================================
   Forced colours: the objects become outlines; text stays text.
   ============================================================ */
@media (forced-colors: active) {

	.pk-card.cr-comic .pk-media,
	.cr-comic-rack .cr-comic__sticker,
	.cr-comic-rack .cr-comic-rack__list > li .pk-card .pk-caption,
	body.cr-comic-single .cr-journal__notes,
	body.cr-comic-single .cr-record,
	body.cr-comic-single .cr-comic__status-chip,
	body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-kindlabel,
	.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-body,
	.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-kindlabel {
		border: 2px solid CanvasText;
		background: Canvas;
		color: CanvasText;
		box-shadow: none;
		forced-color-adjust: none;
	}

	.pk-card.cr-comic .pk-media::before,
	.pk-card.cr-comic .pk-media::after,
	body.cr-comic-single .cr-journal__notes::before {
		content: none;
	}

	body.cr-comic-single .single-post__content .pk-card.cr-comic--single .pk-media {
		outline: none;
	}

	body.cr-comic-single .cr-journal__notes {
		filter: none;
	}

	.pk-card.cr-comic .cr-comic__type-cover,
	.pk-card.cr-comic .cr-comic__type-title,
	.pk-card.cr-comic .cr-comic__type-creators {
		background: Canvas;
		color: CanvasText;
	}

	/* The rack's bag loses its film, flap, reflections and shadow and keeps its outline. */
	.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media,
	.cr-comic-rack .cr-comic-rack__list > li .cr-comic--rack.cr-comic--no-art .pk-media {
		border: 2px solid CanvasText;
		background: Canvas;
		box-shadow: none;
	}

	.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media::before,
	.cr-comic-rack .cr-comic-rack__list > li .pk-card.cr-comic--rack .pk-media::after {
		content: none;
	}

	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list {
		border-color: CanvasText;
		background:
			repeating-linear-gradient(180deg, transparent 0 calc(var(--rack-tier) - 3px), CanvasText calc(var(--rack-tier) - 3px) var(--rack-tier)),
			Canvas;
		box-shadow: none;
		forced-color-adjust: none;
	}

	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list::before,
	.cr-comic-rack .wp-block-post-template.cr-comic-rack__list::after {
		content: none;
	}

	.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a {
		color: LinkText;
	}

	.cr-comic-rack .cr-comic-rack__list > li .pk-card:is(.cr-comic--rack, .cr-comic-strip) .pk-title a:focus-visible::after,
	body.cr-comic-single .cr-journal--comic > .pk-sources .pk-sources__link:focus-visible,
	.cr-stream-page li.kind-comics .pk-card.pk-card--stream.cr-comic--stream .pk-title a:focus-visible::after {
		outline-color: Highlight;
		box-shadow: none;
	}
}