/* ============================================================
   Recipes (PKIW #229)

   The recipe archive is an open ring binder: a cover, two paper
   leaves, rings down the gutter and course tabs on its edge. Each
   recipe is a card taped to a leaf. Everything drawn here is CSS on
   the spread, a group that always renders around the Query Loop's
   list and its no-results text, so a course with no recipes still
   opens the binder. An archive page with fewer than four recipes
   leaves the rest of the spread empty.

   The binder, its leaves and its cards are objects, so they take
   palette tokens and keep their colours in dark mode. Focus and the
   hard shadows use the semantic tokens.
   ============================================================ */

/* ============================================================
   Archive: the binder
   ============================================================ */
.cr-recipe-binder {
	margin-inline: auto;
}

/* Tabs come first in the source and sit above the binder on a narrow
   screen, on its right edge on a wide one. */
.cr-recipe-binder .cr-recipe-binder__query {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.cr-recipe-binder .cr-recipe-binder__query > * {
	min-width: 0;
}

/* Each leaf is its own sheet: fibred paper inside a 2px ink edge. */
.cr-recipe-binder .cr-recipe-binder__spread {
	--binder-gutter: 3.5rem;
	--binder-leaf: var(--cr-printer-ivory);
	--leaf-paper: linear-gradient(var(--binder-leaf), var(--binder-leaf));
	--leaf-ink: linear-gradient(var(--cr-russian-violet), var(--cr-russian-violet));
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0.9rem;
	overflow: hidden;
	border: 2px solid var(--cr-russian-violet);
	border-radius: var(--cr-radius-md);
	background:
		var(--cr-fiber) content-box,
		var(--leaf-paper) left 2px top 2px / calc(100% - 4px) calc(100% - 4px) no-repeat content-box,
		var(--leaf-ink) content-box,
		var(--cr-cerulean);
	box-shadow: var(--cr-shadow-hard-2);
}

/* The cards' grid: transparent, so the leaves show through. */
.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	columns: auto;
}

/* No recipes: the sentence is printed on the leaf, in line with a card's text. */
.cr-recipe-binder .cr-recipe-binder__spread > .wp-block-query-no-results {
	box-sizing: border-box;
	margin: 0;
	padding: calc(1.25rem + 2px + 0.9rem) calc(1rem + 2px + 0.9rem);
}

.cr-recipe-binder .cr-recipe-binder__spread .cr-archive-stream__empty {
	margin: 0;
	color: var(--cr-russian-violet);
}

.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list > li {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	display: flex;
	padding: 1.25rem 1rem 0.75rem;
	break-inside: avoid;
}

.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list > li:last-child {
	padding-bottom: 1.25rem;
}

/* The recipe card: paper taped to the leaf, picture beside its facts. */
.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card {
	--card-accent: var(--cr-blue-green);
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	padding: 0.9rem;
	border: 2px solid var(--card-accent);
	border-radius: 0.25rem;
	background: var(--cr-fiber), var(--cr-white);
	box-shadow: 3px 3px 0 var(--cr-russian-violet);
	color: var(--cr-russian-violet);
	transform: none;
	overflow: visible;
}

.cr-recipe-binder .cr-recipe-binder__list > li:nth-child(4n + 2) .pk-card.cr-recipe-card {
	--card-accent: var(--cr-cerulean);
}

.cr-recipe-binder .cr-recipe-binder__list > li:nth-child(4n + 3) .pk-card.cr-recipe-card {
	--card-accent: var(--cr-ut-orange);
}

.cr-recipe-binder .cr-recipe-binder__list > li:nth-child(4n + 4) .pk-card.cr-recipe-card {
	--card-accent: var(--cr-glaucous);
}

/* One strip of tape holds each card. */
.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card::before {
	content: "";
	position: absolute;
	top: -0.7rem;
	left: 50%;
	width: 5.5rem;
	height: 1.35rem;
	margin-left: -2.75rem;
	background: var(--cr-light-orange);
	opacity: 0.92;
	transform: rotate(var(--cr-rotate-neg));
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card::after {
	content: none;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-body {
	position: static;
	display: grid;
	flex: 1;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	transform: none;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card.has-picture .pk-body {
	grid-template-columns: minmax(0, min(42%, 11rem)) minmax(0, 1fr);
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-media {
	order: -1;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: 0.125rem;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-caption {
	position: static;
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title {
	margin: 0;
	font-family: var(--cr-font-accent);
	font-size: clamp(var(--cr-text-md), 2.2vw, var(--cr-text-2xl));
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-tight);
	color: var(--cr-russian-violet);
	overflow-wrap: anywhere;
	transform: none;
}

/* The title is the card's one link; its hit area is the whole card. */
.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title a {
	color: inherit;
	text-decoration: none;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title a:focus-visible {
	outline: none;
	background: none;
	box-shadow: none;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title a:focus-visible::after {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 9px var(--cr-russian-violet);
}

/* Course and time: text with a small mark, only what the recipe holds. */
.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-facts {
	display: grid;
	gap: 0.4rem;
	margin: 0.7rem 0 0;
	padding: 0.7rem 0 0;
	border-top: 1px solid var(--cr-periwinkle);
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-base);
	line-height: var(--cr-leading-snug);
	color: var(--cr-russian-violet);
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-course,
.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-time {
	display: flex;
	gap: 0.55rem;
	align-items: center;
	min-width: 0;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-course::before,
.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-time::before {
	content: "";
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	background: var(--cr-cerulean);
	mask: var(--recipe-mark) center / contain no-repeat;
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-course::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a8 8 0 0 1 16 0z'/%3E%3Cpath d='M2 20h20M12 6v3'/%3E%3C/svg%3E");
}

.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-time::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* The tabs. */
.cr-recipe-binder .cr-recipe-tabs {
	position: relative;
	z-index: 1;
	margin: 0;
}

.cr-recipe-binder .pk-recipe-courses__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	padding: 0 0.9rem;
	list-style: none;
}

.cr-recipe-binder .pk-recipe-courses__item {
	--tab: var(--cr-light-orange);
	margin: 0;
	padding: 0;
}

.cr-recipe-binder .pk-recipe-courses__item:nth-child(5n + 2) {
	--tab: var(--cr-selective-yellow);
}

.cr-recipe-binder .pk-recipe-courses__item:nth-child(5n + 3) {
	--tab: var(--cr-periwinkle);
}

.cr-recipe-binder .pk-recipe-courses__item:nth-child(5n + 4) {
	--tab: var(--cr-sky-blue);
}

.cr-recipe-binder .pk-recipe-courses__item:nth-child(5n + 5) {
	--tab: var(--cr-light-gray);
}

.cr-recipe-binder .pk-recipe-courses__link {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: 0.4rem 0.9rem;
	border: 2px solid var(--cr-russian-violet);
	border-bottom: 0;
	border-radius: var(--cr-radius-sm) var(--cr-radius-sm) 0 0;
	background: var(--tab);
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-sm);
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-wide);
	line-height: var(--cr-leading-tight);
	color: var(--cr-russian-violet);
	text-decoration: none;
	text-transform: uppercase;
}

.cr-recipe-binder .pk-recipe-courses__link:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.cr-recipe-binder .pk-recipe-courses__link[aria-current] {
	background: var(--cr-russian-violet);
	color: var(--cr-printer-ivory);
}

.cr-recipe-binder .pk-recipe-courses__link:focus-visible {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

/* Dark mode: ink turns ivory, so the tab edges do, and the current tab
   inverts the way the archive pager's current page does. The papers stay. */
@media (prefers-color-scheme: dark) {

	:root:is(:not([data-theme]), [data-theme="system"]) .cr-recipe-binder .pk-recipe-courses__link {
		border-color: var(--cr-printer-ivory);
	}

	:root:is(:not([data-theme]), [data-theme="system"]) .cr-recipe-binder .pk-recipe-courses__link[aria-current] {
		background: var(--cr-printer-ivory);
		color: var(--cr-russian-violet);
	}
}

:root[data-theme="dark"] .cr-recipe-binder .pk-recipe-courses__link {
	border-color: var(--cr-printer-ivory);
}

:root[data-theme="dark"] .cr-recipe-binder .pk-recipe-courses__link[aria-current] {
	background: var(--cr-printer-ivory);
	color: var(--cr-russian-violet);
}

/* The spread: two leaves, the first two cards on the left. */
@media (min-width: 64rem) {

	/* The open binder takes most of a wide screen, as the approved spread does. */
	.cr-archive--recipes .cr-recipe-binder.alignwide {
		max-width: min(max(var(--wp--style--global--wide-size), 88vw), 90rem);
	}

	.cr-recipe-binder .cr-recipe-binder__query {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.cr-recipe-binder .cr-recipe-binder__query > * {
		grid-column: 1 / -1;
	}

	/* Each leaf is a sheet with a second page under its foot edge. The
	   spread stretches to the tabs' height, so they stay on its edge. */
	.cr-recipe-binder .cr-recipe-binder__spread {
		--leaf-w: calc(50% - var(--binder-gutter) / 2);
		--leaf-page: linear-gradient(var(--cr-light-gray), var(--cr-light-gray));
		grid-column: 1;
		grid-row: 1;
		padding: 1.25rem;
		border-radius: var(--cr-radius-lg);
		background:
			var(--cr-fiber) content-box,
			var(--leaf-paper) left 2px top 2px / calc(var(--leaf-w) - 4px) calc(100% - 10px) no-repeat content-box,
			var(--leaf-paper) right 2px top 2px / calc(var(--leaf-w) - 4px) calc(100% - 10px) no-repeat content-box,
			var(--leaf-ink) left top / var(--leaf-w) calc(100% - 6px) no-repeat content-box,
			var(--leaf-ink) right top / var(--leaf-w) calc(100% - 6px) no-repeat content-box,
			var(--leaf-page) left 5px bottom 2px / calc(var(--leaf-w) - 10px) 10px no-repeat content-box,
			var(--leaf-page) right 5px bottom 2px / calc(var(--leaf-w) - 10px) 10px no-repeat content-box,
			var(--leaf-ink) left 3px bottom 0 / calc(var(--leaf-w) - 6px) 14px no-repeat content-box,
			var(--leaf-ink) right 3px bottom 0 / calc(var(--leaf-w) - 6px) 14px no-repeat content-box,
			var(--cr-cerulean);
	}

	.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: repeat(2, minmax(18rem, auto));
		grid-auto-flow: column;
		column-gap: var(--binder-gutter);
	}

	/* An empty spread is as tall as its rings and tabs; the sentence sits on the left leaf. */
	.cr-recipe-binder .cr-recipe-binder__spread:has(> .wp-block-query-no-results) {
		min-height: 24rem;
	}

	.cr-recipe-binder .cr-recipe-binder__spread > .wp-block-query-no-results {
		width: var(--leaf-w);
		padding: calc(1.5rem + 2px + 1rem);
	}

	.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list > li,
	.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list > li:last-child {
		padding: 1.5rem 1.5rem 0.75rem;
	}

	.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list > li:nth-child(even),
	.cr-recipe-binder .wp-block-post-template.cr-recipe-binder__list > li:only-child {
		padding-bottom: 1.75rem;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card {
		padding: 1rem;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card::before {
		top: -0.8rem;
		width: 7rem;
		height: 1.5rem;
		margin-left: -3.5rem;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-body {
		gap: 1.25rem;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card.has-picture .pk-body {
		grid-template-columns: minmax(0, min(42%, 13rem)) minmax(0, 1fr);
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-facts {
		gap: 0.4rem;
		margin-top: 0.65rem;
		padding-top: 0.65rem;
		font-size: var(--cr-text-md);
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-course::before,
	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-time::before {
		width: 1.5rem;
		height: 1.5rem;
	}

	/* The rings: one bar across the gutter, two beside each row of cards. */
	.cr-recipe-binder .cr-recipe-binder__spread::before {
		content: "";
		position: absolute;
		top: 7.25rem;
		left: 50%;
		z-index: 1;
		width: calc(var(--binder-gutter) + 1.5rem);
		height: 0.9rem;
		margin-left: calc((var(--binder-gutter) + 1.5rem) / -2);
		border: 2px solid var(--cr-russian-violet);
		border-radius: var(--cr-radius-full);
		background: var(--cr-light-gray);
		box-shadow:
			0 6.5rem 0 -2px var(--cr-light-gray),
			0 6.5rem 0 0 var(--cr-russian-violet),
			0 18rem 0 -2px var(--cr-light-gray),
			0 18rem 0 0 var(--cr-russian-violet),
			0 24.5rem 0 -2px var(--cr-light-gray),
			0 24.5rem 0 0 var(--cr-russian-violet);
		pointer-events: none;
	}

	/* An empty spread has three rings, all inside its foot edge. */
	.cr-recipe-binder .cr-recipe-binder__spread:has(> .wp-block-query-no-results)::before {
		box-shadow:
			0 6.5rem 0 -2px var(--cr-light-gray),
			0 6.5rem 0 0 var(--cr-russian-violet),
			0 13rem 0 -2px var(--cr-light-gray),
			0 13rem 0 0 var(--cr-russian-violet);
	}

	.cr-recipe-binder .cr-recipe-tabs {
		grid-column: 2;
		grid-row: 1;
		align-self: start;
		margin: 1.75rem 0 0 -2px;
	}

	.cr-recipe-binder .pk-recipe-courses__list {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
		padding: 0;
	}

	/* The tabs share their edges, so the binder's shadow doesn't show between them. */
	.cr-recipe-binder .pk-recipe-courses__item + .pk-recipe-courses__item {
		margin-top: -2px;
	}

	.cr-recipe-binder .pk-recipe-courses__link {
		max-width: 9.5rem;
		border: 2px solid var(--cr-russian-violet);
		border-left: 0;
		border-radius: 0 var(--cr-radius-sm) var(--cr-radius-sm) 0;
	}
}

/* ============================================================
   Single: the binder page

   The post header, the featured image and the content sit on one
   sheet of paper with punched holes down its left edge. The sheet is
   main's ::before, so it is continuous behind all three. The post
   title is the page heading and the featured image is the picture;
   WP Recipe Maker's card (the theme's cr-binder template) follows
   without repeating either. The sheet and what is printed on it are
   objects and keep their colours in dark mode.
   ============================================================ */
body.cr-recipe-single main.single-post {
	--page-paper: var(--cr-printer-ivory);
	--page-ink: var(--cr-russian-violet);
	--page-photo: 20rem;
	--page-gap: 2.5rem;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	isolation: isolate;
}

body.cr-recipe-single main.single-post > * {
	grid-column: 1 / -1;
	min-width: 0;
}

body.cr-recipe-single main.single-post > .single-post__header {
	grid-row: 1;
	padding-top: 2.25rem;
}

body.cr-recipe-single main.single-post > .single-post__featured {
	grid-row: 2;
}

body.cr-recipe-single main.single-post > .single-post__content {
	grid-row: 3;
	padding-bottom: 2.5rem;
}

/* The sheet. Holes are punched through to the page behind it. */
body.cr-recipe-single main.single-post::before {
	content: "";
	z-index: -1;
	grid-row: 1 / 4;
	grid-column: 1 / -1;
	justify-self: center;
	box-sizing: border-box;
	width: min(100% - 1rem, var(--wp--style--global--wide-size) + 5rem);
	margin-block: 0.75rem 0;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	background:
		url(../img/cr-recipe-dots.svg) right 1rem bottom 0.6rem / 2.5rem auto no-repeat,
		radial-gradient(circle, var(--wp--preset--color--main-accent, var(--cr-surface)) 0 0.4rem, var(--cr-russian-violet) 0.4rem calc(0.4rem + 2px), transparent calc(0.4rem + 2px)) 0.5rem 1.5rem / 1.5rem 3.25rem repeat-y,
		var(--page-paper);
	box-shadow: var(--cr-shadow-hard-2);
}

/* The header's own children line up with the body's left edge on the
   sheet; the constrained layout would centre them. */
body.cr-recipe-single main.single-post > .single-post__header > * {
	max-width: none;
	margin-inline: 0 !important;
}

/* Everything printed on the sheet takes the sheet's ink, and so does a
   focused link's halo: the site's halo is ivory in dark mode, the same as
   the sheet, which keeps its colors. */
body.cr-recipe-single main.single-post > .single-post__header,
body.cr-recipe-single main.single-post > .single-post__content {
	--cr-focus-halo: var(--page-ink);
	box-sizing: border-box;
	padding-inline: clamp(2.25rem, 5vw, 3rem) clamp(1rem, 3vw, 2rem);
	color: var(--page-ink);
}

body.cr-recipe-single .single-post__header .single-post__title,
body.cr-recipe-single .single-post__header .single-post__date,
body.cr-recipe-single .single-post__content :is(p, li, h2, h3, span, div) {
	color: var(--page-ink);
}

/* The kind tape is the header's sky-blue accent; dark mode keeps the dark
   tape and its yellow ink. The tape switches on tokens.css's own dark-mode
   selectors, the ones that switch its ink (--cr-tape-ink), so with no
   JavaScript to set data-theme the OS scheme picks both. */
body.cr-recipe-single .single-post__header .single-post__kind.cr-chip {
	background: var(--cr-sky-blue);
	transform: rotate(var(--cr-rotate-neg));
}

/* Only the kind tape sits over the title, as the approved page draws it.
   The h-recipe keeps its own hidden dt-published; this date and the
   category are the template's copies. The site's post-terms chip sets
   its display with !important, so hiding it needs it too. */
body.cr-recipe-single .single-post__header :is(.single-post__date, .single-post__category) {
	display: none !important;
}

/* The sprigs on the sheet replace the article's corner burst. */
body.cr-recipe-single main.single-post > .single-post__content::before {
	content: none;
}

@media (prefers-color-scheme: dark) {

	:root:is(:not([data-theme]), [data-theme="system"]) body.cr-recipe-single .single-post__header .single-post__kind.cr-chip {
		background: var(--cr-tape);
	}
}

:root[data-theme="dark"] body.cr-recipe-single .single-post__header .single-post__kind.cr-chip {
	background: var(--cr-tape);
}

/* The title's flank marks would land on the picture beside it. The
   theme sets them with !important, so hiding them needs it too. */
body.cr-recipe-single .single-post__title.cr-flank::before,
body.cr-recipe-single .single-post__title.cr-flank::after {
	display: none !important;
}

/* The picture, taped to the sheet. */
body.cr-recipe-single main.single-post > .single-post__featured,
body.cr-recipe-single main.single-post > figure.wp-block-post-featured-image.single-post__featured {
	position: relative;
	box-sizing: border-box;
	width: min(100% - 4.5rem, 24rem);
	margin: 1.25rem auto 1rem !important;
}

/* stylelint-disable-next-line no-descending-specificity -- the single's picture and the archive card's never share a page. */
body.cr-recipe-single .single-post__featured img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0.125rem;
}

body.cr-recipe-single .single-post__featured::before {
	content: "";
	position: absolute;
	top: -0.75rem;
	left: 1.25rem;
	z-index: 1;
	width: 6rem;
	height: 1.5rem;
	background: var(--cr-selective-yellow);
	opacity: 0.85;
	transform: rotate(var(--cr-rotate-neg));
}

/* Under the title: the summary and the recipe plugin's print link.
   The print link is a sharp-cornered zine button, following the design
   system's no-radius button rule in case the plugin rounds it. */
body.cr-recipe-single .cr-recipe__summary {
	margin: 0.5rem 0 0;
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-lg);
	line-height: var(--cr-leading-snug);
	color: var(--page-ink);
}

body.cr-recipe-single .cr-recipe__actions {
	margin: 1rem 0 0;
}

body.cr-recipe-single .cr-recipe__actions .wprm-recipe-print {
	display: inline-flex;
	gap: 0.6rem;
	align-items: center;
	min-height: 2.75rem;
	border-width: 2px;
	border-style: solid;
	border-radius: 0;
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-lg);
	text-decoration: none;
	box-shadow: var(--cr-shadow-hard-sm);
}

body.cr-recipe-single .cr-recipe__actions .wprm-recipe-print svg {
	width: 1.25em;
	height: 1.25em;
}

body.cr-recipe-single .cr-recipe__actions .wprm-recipe-print:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
}

body.cr-recipe-single .cr-recipe__actions .wprm-recipe-print:focus-visible {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

/* The recipe plugin's card: no box of its own, it is print on the sheet. */
body.cr-recipe-single .wprm-recipe-container,
body.cr-recipe-single .wprm-recipe.wprm-recipe-template-cr-binder {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font-family: var(--cr-font-body);
	color: var(--page-ink);
}

body.cr-recipe-single .cr-binder-recipe {
	display: grid;
	gap: 1.5rem;
	margin-top: 1.5rem;
}

/* Times, servings, course: a ruled row of label over value. */
body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-meta-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
	gap: 0.75rem 1.25rem;
	margin: 0;
	padding: 1rem 0;
	border-block: 1px solid var(--cr-periwinkle);
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-block-container {
	display: grid;
	grid-template-columns: 1.75rem minmax(0, 1fr);
	gap: 0 0.6rem;
	align-items: center;
	margin: 0;
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-block-container::before {
	content: "";
	grid-row: 1 / 3;
	width: 1.75rem;
	height: 1.75rem;
	background: var(--cr-cerulean);
	mask: var(--recipe-mark) center / contain no-repeat;
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-time-container::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-servings-container::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3v8M4 3v5a3 3 0 0 0 6 0V3M7 11v10M17 3c-2 2-3 5-3 9h3zM17 12v9'/%3E%3C/svg%3E");
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-tag-container::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a8 8 0 0 1 16 0z'/%3E%3Cpath d='M2 20h20M12 6v3'/%3E%3C/svg%3E");
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-details-label {
	grid-column: 2;
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-xs);
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	line-height: var(--cr-leading-tight);
	text-transform: uppercase;
	color: var(--cr-cerulean);
}

body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-block-container > :not(.wprm-recipe-details-label) {
	grid-column: 2;
	font-size: var(--cr-text-lg);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
}

/* Section links, and the plugin's unit and servings controls when an add-on prints them. */
body.cr-recipe-single .cr-binder-recipe__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	justify-content: space-between;
}

body.cr-recipe-single .cr-binder-recipe__controls:empty {
	display: none;
}

body.cr-recipe-single .cr-binder-recipe .wprm-recipe-jump-to-section-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

body.cr-recipe-single .cr-binder-recipe a.wprm-recipe-jump-to-section {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin: 0;
	padding: 0 1rem;
	border: 0;
	border-radius: 0;
	background: none;
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-lg);
	font-weight: var(--cr-weight-semibold);
	color: var(--cr-cerulean);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.3em;
}

body.cr-recipe-single .cr-binder-recipe a.wprm-recipe-jump-to-section:first-child {
	padding-left: 0;
}

body.cr-recipe-single .cr-binder-recipe a.wprm-recipe-jump-to-section:focus-visible {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--cr-russian-violet);
}

body.cr-recipe-single .cr-binder-recipe a.wprm-recipe-jump-to-section + a.wprm-recipe-jump-to-section {
	border-left: 1px solid var(--cr-periwinkle);
}

/* Ingredients and equipment beside the instructions. */
body.cr-recipe-single .cr-binder-recipe__columns {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.5rem 2.5rem;
}

body.cr-recipe-single .cr-binder-recipe__column {
	display: grid;
	gap: 1.5rem;
	align-content: start;
	min-width: 0;
}

body.cr-recipe-single .cr-binder-recipe .wprm-recipe-header {
	margin: 0 0 0.6rem;
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-2xl);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-tight);
	color: var(--page-ink);
}

body.cr-recipe-single .cr-binder-recipe :is(.wprm-recipe-ingredients, .wprm-recipe-equipment, .wprm-recipe-instructions) {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.cr-recipe-single .cr-binder-recipe :is(.wprm-recipe-ingredient, .wprm-recipe-equipment-item) {
	position: relative;
	margin: 0;
	padding-left: 1.6rem;
	font-size: var(--cr-text-lg);
	line-height: var(--cr-leading-snug);
	list-style-type: none !important;
}

body.cr-recipe-single .cr-binder-recipe :is(.wprm-recipe-ingredient, .wprm-recipe-equipment-item)::before {
	content: "";
	position: absolute;
	top: 0.45em;
	left: 0.15rem;
	width: 0.6rem;
	height: 0.6rem;
	display: block;
	border-radius: var(--cr-radius-full);
	background: var(--cr-ut-orange);
}

body.cr-recipe-single .cr-binder-recipe .wprm-recipe-ingredient-group-name,
body.cr-recipe-single .cr-binder-recipe .wprm-recipe-instruction-group-name {
	margin: 0.75rem 0 0.4rem;
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-sm);
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-wide);
	text-transform: uppercase;
	color: var(--cr-cerulean);
}

/* Numbered steps: the number is the list's own counter. */
body.cr-recipe-single .cr-binder-recipe .wprm-recipe-instructions {
	gap: 0.9rem;
	counter-reset: recipe-step;
}

body.cr-recipe-single .cr-binder-recipe .wprm-recipe-instruction {
	position: relative;
	min-height: 2.25rem;
	margin: 0;
	padding: 0.3rem 0 0 3.1rem;
	font-size: var(--cr-text-lg);
	line-height: var(--cr-leading-snug);
	list-style-type: none !important;
	counter-increment: recipe-step;
}

body.cr-recipe-single .cr-binder-recipe .wprm-recipe-instruction::before {
	content: counter(recipe-step);
	position: absolute;
	top: 0;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: var(--cr-radius-full);
	background: var(--cr-glaucous-dark);
	font-family: var(--cr-font-accent);
	font-weight: var(--cr-weight-bold);
	color: var(--cr-white);
}

body.cr-recipe-single .cr-binder-recipe__more {
	display: grid;
	gap: 1.5rem;
}

body.cr-recipe-single .cr-binder-recipe__more:not(:has(.wprm-recipe-header)) {
	display: none;
}

/* The spread: picture left of the title, ingredients left of the steps. */
@media (min-width: 64rem) {

	/* A binding column down the sheet's left edge holds the rings. */
	body.cr-recipe-single main.single-post {
		--page-photo: 23rem;
		--page-gap: 3rem;
		--page-binding: clamp(4.5rem, 7vw, 7rem);
		grid-template-columns:
			minmax(1rem, 1fr)
			[binding-start] var(--page-binding) [binding-end photo-start] minmax(0, var(--page-photo)) [photo-end]
			var(--page-gap)
			[details-start] minmax(0, calc(var(--wp--style--global--wide-size) - var(--page-binding) - var(--page-photo) - var(--page-gap))) [details-end]
			minmax(1rem, 1fr);
	}

	/* The sheet lies on a band of sky-blue paper as wide as the page and
	   nearly fills it; its spread shadow is that band, clipped to the
	   sheet's rows. The rings punch their own holes, so the sheet has
	   none here. Line-art sprigs and dot marks sit in its margins. */
	body.cr-recipe-single main.single-post::before {
		grid-row: 1 / 3;
		grid-column: 1 / -1;
		justify-self: stretch;
		width: auto;
		margin: 1.25rem 0.75rem 2rem;
		background:
			url(../img/cr-recipe-sprig.svg) right 0.75rem top 1.25rem / clamp(2.5rem, 13vw - 7rem, 6rem) auto no-repeat,
			url(../img/cr-recipe-tomato.svg) left 4.25rem bottom 2.5rem / clamp(2.5rem, 14vw - 6.5rem, 6.5rem) auto no-repeat,
			url(../img/cr-recipe-sprig.svg) right 1rem bottom 2.25rem / clamp(2rem, 8vw - 4rem, 3.5rem) auto no-repeat,
			url(../img/cr-recipe-dots.svg) left 5.25rem top 40% / 2.75rem auto no-repeat,
			url(../img/cr-recipe-dots.svg) right 1.5rem top 55% / 2.5rem auto no-repeat,
			var(--cr-fiber),
			var(--page-paper);
		box-shadow: var(--cr-shadow-hard-2), 0 0 0 100vmax var(--cr-accent-shape);
		clip-path: inset(-1.25rem -100vmax -2rem);
	}

	/* The rings: a metal loop around the sheet's edge into a punched
	   hole, every 5rem. The loop is open, so the band and the paper show
	   through it; whole loops only, stopping clear of the torn foot. */
	body.cr-recipe-single main.single-post::after {
		--ring-ink: var(--cr-russian-violet);
		--ring-metal: var(--cr-light-gray);
		content: "";
		z-index: -1;
		grid-row: 1 / 3;
		grid-column: 1 / -1;
		justify-self: start;
		width: 5.5rem;
		margin: 1.25rem 0 3.5rem -0.75rem;
		background:
			radial-gradient(circle 0.55rem at 4.8rem 2.5rem, var(--cr-accent-shape) calc(0.55rem - 2px), var(--ring-ink) calc(0.55rem - 2px) 0.55rem, transparent 0.55rem) 0 0 / 5.5rem 5rem,
			radial-gradient(2.5rem 1.1rem at 2.6rem 2.5rem, transparent 62%, var(--ring-ink) 62% 70%, var(--ring-metal) 70% 90%, var(--ring-ink) 90% 100%, transparent 100%) 0 0 / 5.5rem 5rem;
		background-repeat: no-repeat space;
		pointer-events: none;
	}

	/* The sheet's foot is torn: a strip of the band, ragged along its top,
	   covers the straight edge and its shadow. main clips it at the page's
	   sides (overflow-x: clip), and the band hides it beside the sheet. */
	body.cr-recipe-single main.single-post > .single-post__content::after {
		content: "";
		position: absolute;
		right: -100vmax;
		bottom: 1.25rem;
		left: -100vmax;
		z-index: -1;
		height: 2rem;
		background: var(--cr-accent-shape);
		mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 32' preserveAspectRatio='none'%3E%3Cpath d='M0 9 L9 6 L18 11 L29 5 L38 10 L50 8 L59 14 L71 7 L82 11 L93 4 L104 10 L116 7 L125 13 L137 6 L148 10 L160 8 L169 15 L181 9 L192 12 L203 5 L215 11 L226 7 L237 13 L247 8 L256 9 V32 H0 Z'/%3E%3C/svg%3E") 0 0 / 16rem 100% repeat-x;
		pointer-events: none;
	}

	body.cr-recipe-single main.single-post > .single-post__header {
		grid-row: 1;
		grid-column: details;
		align-self: center;
		width: 100%;
		max-width: none;
		padding-block: 2.75rem 0.75rem;
		padding-inline: 0;
	}

	/* A recipe with no picture: the header takes the whole width of the sheet. */
	body.cr-recipe-single main.single-post:not(:has(> .single-post__featured)) > .single-post__header {
		grid-column: photo-start / details-end;
	}

	body.cr-recipe-single main.single-post > .single-post__featured,
	body.cr-recipe-single main.single-post > figure.wp-block-post-featured-image.single-post__featured {
		grid-row: 1;
		grid-column: photo;
		align-self: center;
		width: 100%;
		max-width: none;
		margin: 3rem 0 0.75rem !important;
	}

	body.cr-recipe-single .single-post__featured img {
		aspect-ratio: 5 / 4;
	}

	/* The title is the page's largest type, one display step up. */
	body.cr-recipe-single .single-post__header .single-post__title.wp-block-post-title {
		font-size: var(--cr-text-5xl);
	}

	/* The facts are one row of equal cells with a thin rule between them. */
	body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-meta-container {
		grid-template-columns: none;
		grid-auto-columns: minmax(0, 1fr);
		grid-auto-flow: column;
		column-gap: 0;
	}

	body.cr-recipe-single .cr-binder-recipe__facts .wprm-recipe-block-container + .wprm-recipe-block-container {
		padding-left: 1.25rem;
		border-left: 1px solid var(--cr-periwinkle);
	}

	body.cr-recipe-single main.single-post > .single-post__content {
		grid-row: 2;
		grid-column: photo-start / details-end;
		width: 100%;
		max-width: none;
		padding-inline: 0;
		padding-bottom: 4.5rem;
	}

	body.cr-recipe-single .cr-binder-recipe__columns {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	}

	body.cr-recipe-single .cr-binder-recipe__column + .cr-binder-recipe__column {
		padding-left: 2.5rem;
		border-left: 1px solid var(--cr-periwinkle);
	}

	body.cr-recipe-single .cr-binder-recipe__more {
		grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
		padding-top: 1.5rem;
		border-top: 2px dashed var(--cr-periwinkle);
	}
}

/* stylelint-disable no-descending-specificity -- the Stream card, the archive card and the single are separate surfaces; their selectors never match one element. */

/* ============================================================
   Stream: the 3x5 card

   A recipe in the Stream's collage is an index card: the picture on
   the left, then the kind label, the title, the course and time and
   the link to the recipe. The card is an object and keeps its paper
   and ink in dark mode. The Stream's own layout is untouched.
   ============================================================ */
.cr-stream-page .pk-card.k-recipe.cr-recipe-stream {
	position: relative;
	width: 100%;
	padding: 0.9rem;
	border: 2px solid var(--cr-russian-violet);
	background: var(--cr-printer-ivory);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-body {
	position: static;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.4rem 0.9rem;
	align-content: start;
	align-items: start;
	margin: 0;
	padding: 0;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream.has-picture .pk-body {
	grid-template-columns: minmax(0, 40%) minmax(0, 1fr);
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream.has-picture .pk-body > .pk-kindlabel,
.cr-stream-page .pk-card.k-recipe.cr-recipe-stream.has-picture .pk-body > .pk-caption {
	grid-column: 2;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream.has-picture .pk-body > .pk-media {
	grid-row: 1 / span 2;
	grid-column: 1;
	margin: 0;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--cr-russian-violet);
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-kindlabel {
	justify-self: start;
	margin: 0;
	padding: 0.2rem 0.55rem;
	background: var(--cr-selective-yellow);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-xs);
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	line-height: var(--cr-leading-tight);
	color: var(--cr-russian-violet);
	text-transform: uppercase;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-caption {
	display: block;
	min-width: 0;
	margin: 0;
	padding: 0;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-title {
	margin: 0;
	padding: 0;
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-lg);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-tight);
	color: var(--cr-russian-violet);
	overflow-wrap: anywhere;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-title a {
	color: inherit;
	text-decoration: none;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

/* The title is the card's one link; its hit area is the whole card. */
.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-title a::after {
	content: "";
	position: absolute;
	z-index: 2;
	inset: 0;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-title a:focus-visible {
	outline: none;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-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);
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.9rem;
	margin: 0.45rem 0 0;
	padding-inline: 0;
	overflow: hidden;
	font-family: var(--cr-font-body);
	font-size: var(--cr-text-sm);
	line-height: var(--cr-leading-snug);
	color: var(--cr-russian-violet);
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-course,
.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-time {
	display: inline-flex;
	gap: 0.4rem;
	align-items: center;
}

/* A rule halfway across the gap between course and time. When the time
   wraps to its own line, the row's overflow clips the rule. */
.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-course + .pk-recipe-time {
	position: relative;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-course + .pk-recipe-time::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-0.45rem - 0.5px);
	border-left: 1px solid var(--cr-periwinkle);
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-course::before,
.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-time::before {
	content: "";
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	background: var(--cr-cerulean);
	mask: var(--recipe-mark) center / contain no-repeat;
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-course::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 17a8 8 0 0 1 16 0z'/%3E%3Cpath d='M2 20h20M12 6v3'/%3E%3C/svg%3E");
}

.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-recipe-time::before {
	--recipe-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

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

@media (forced-colors: active) {

	.cr-recipe-binder .cr-recipe-binder__spread,
	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card,
	.cr-recipe-binder .pk-recipe-courses__link {
		border-color: CanvasText;
		background: Canvas;
		box-shadow: none;
	}

	.cr-recipe-binder .cr-recipe-binder__spread::before,
	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card::before {
		content: none;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-course::before,
	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-recipe-time::before {
		background: CanvasText;
	}

	.cr-stream-page .pk-card.k-recipe.cr-recipe-stream,
	.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-kindlabel {
		border: 2px solid CanvasText;
		background: Canvas;
		box-shadow: none;
		color: CanvasText;
	}

	.cr-stream-page .pk-card.k-recipe.cr-recipe-stream .pk-title a:focus-visible::after {
		outline-color: Highlight;
		box-shadow: none;
	}

	.cr-recipe-binder .pk-recipe-courses__link[aria-current] {
		border-color: Highlight;
		background: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card .pk-title a:focus-visible::after,
	.cr-recipe-binder .pk-recipe-courses__link:focus-visible {
		outline-color: Highlight;
		box-shadow: none;
	}

	body.cr-recipe-single main.single-post::after,
	body.cr-recipe-single main.single-post > .single-post__content::after {
		content: none;
	}

	body.cr-recipe-single main.single-post::before {
		background: Canvas;
	}
}

/* Printing the archive prints the cards, not the binder's furniture. */
@media print {

	.cr-recipe-binder .cr-recipe-tabs,
	.cr-recipe-binder .wp-block-query-pagination {
		display: none;
	}

	.cr-recipe-binder .cr-recipe-binder__spread {
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
	}

	.cr-recipe-binder .cr-recipe-binder__spread::before {
		content: none;
	}

	.cr-recipe-binder .cr-recipe-binder__list > li .pk-card.cr-recipe-card {
		break-inside: avoid;
		box-shadow: none;
	}

	body.cr-recipe-single main.single-post::before {
		box-shadow: none;
	}

	body.cr-recipe-single main.single-post::after,
	body.cr-recipe-single main.single-post > .single-post__content::after {
		content: none;
	}
}