/* Craft kind surfaces for issue 249: the pegboard archive, the project-paper single and the Stream tool tag. */
/* stylelint-disable no-descending-specificity -- archive cards, single papers and Stream tags are separate surfaces. */

/* ============================================================
   Archive: grouped project cards hang on one perforated board.
   The board, cards and tools keep their palette colours in dark mode;
   tape and hard shadows change through the shared tokens.
   ============================================================ */

.cr-pegboard {
	position: relative;
	min-width: 0;
}

.cr-pegboard__board {
	--peg-cols: 1;
	display: grid;
	grid-template-columns: repeat(var(--peg-cols), minmax(0, 1fr));
	gap: var(--cr-space-xl);
	box-sizing: border-box;
	min-width: 0;
	margin: 0;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	background:
		radial-gradient(circle, var(--cr-prussian-blue) 0 0.2rem, transparent 0.2rem) 0 0 / 1.5rem 1.5rem,
		var(--cr-fiber),
		var(--cr-sky-blue);
	color: var(--cr-russian-violet);
	list-style: none;
}

/* The gutters reserve the tool art's strips. components.css zeroes the
   archive Post Template's left padding at 0,2,0, so this selector carries
   the post-template class to win at 0,3,0. */
.cr-pegboard > .cr-pegboard__board.wp-block-post-template {
	padding: var(--cr-space-xl) var(--cr-space-md);
}

.cr-pegboard .pkiw-group {
	--peg-span: 1;
	position: relative;
	z-index: 2;
	grid-column: span var(--peg-span);
	min-width: 0;
	padding-block-start: var(--cr-space-xl);
}

.cr-pegboard .pkiw-group__heading {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	z-index: 3;
	max-width: calc(100% - var(--cr-space-md));
	margin: 0;
	padding: var(--cr-space-2xs) var(--cr-space-sm);
	background: var(--cr-tape);
	color: var(--cr-tape-ink);
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-md);
	font-style: normal;
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-tight);
	text-align: start;
	text-transform: none;
	translate: 0 -50%;
	overflow-wrap: anywhere;
}

.cr-pegboard .pkiw-group__items {
	display: grid;
	grid-template-columns: repeat(var(--peg-span), minmax(0, 1fr));
	gap: var(--cr-space-xl) var(--cr-space-lg);
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-pegboard .pkiw-group__items > li {
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-pegboard .pkiw-group__items > li::before,
.cr-pegboard .pkiw-group__items > li::after,
.cr-pegboard .pkiw-group__items > li::marker {
	content: none;
}

.cr-peg-card {
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	background: var(--cr-printer-ivory);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
}

.cr-peg-card::before {
	content: "";
	position: absolute;
	inset-block-start: -1.35rem;
	inset-inline-start: 50%;
	z-index: 3;
	box-sizing: border-box;
	width: 0.65rem;
	height: 1.55rem;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0.45rem 0.45rem 0 0;
	background: var(--cr-prussian-blue);
	translate: -50% 0;
}

.cr-peg-card::after {
	content: "";
	position: absolute;
	inset-block-start: -0.45rem;
	inset-inline-end: var(--cr-space-xs);
	z-index: 2;
	width: 3.5rem;
	height: 0.9rem;
	background: var(--cr-tape);
	pointer-events: none;
	rotate: var(--cr-rotate-2);
}

.cr-peg-card__cover {
	margin: 0;
}

.cr-peg-card__cover picture,
.cr-peg-card__img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.cr-peg-card__img {
	border-block-end: 2px solid var(--cr-russian-violet);
	filter: none;
	mix-blend-mode: normal;
}

.cr-peg-card.cr-cover--failed .cr-peg-card__cover {
	display: none;
}

.cr-peg-card__title {
	margin: 0;
	padding: var(--cr-space-md);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-md);
	font-style: normal;
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
	text-transform: none;
	overflow-wrap: anywhere;
}

.cr-peg-card__title a {
	color: var(--cr-cerulean);
	text-decoration: none;
}

.cr-peg-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.cr-peg-card__title a:hover {
	color: var(--cr-russian-violet);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.cr-peg-card__title a:focus-visible {
	outline: none;
	box-shadow: none;
}

.cr-peg-card:focus-within {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 0;
	box-shadow: var(--cr-shadow-hard-2), 0 0 0 7px var(--cr-russian-violet);
}

.cr-pegboard::before,
.cr-pegboard::after {
	content: none;
	position: absolute;
	inset-block: 0;
	z-index: 1;
	background: none;
	pointer-events: none;
}

.cr-pegboard:not(:has(li))::before,
.cr-pegboard:not(:has(li))::after {
	content: none;
	background: none;
}

.cr-pegboard__board:not(:has(li)) {
	display: none;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {

	.cr-pegboard__board {
		--peg-cols: 2;
	}

	.cr-pegboard > .cr-pegboard__board.wp-block-post-template {
		padding-inline: 3.5rem;
	}

	.cr-pegboard .pkiw-group:has(> .pkiw-group__items > li:nth-child(2)) {
		--peg-span: 2;
	}

	.cr-pegboard::before,
	.cr-pegboard::after {
		content: "";
		width: 3.5rem;
		background-repeat: no-repeat;
	}

	.cr-pegboard::before {
		inset-inline-start: 0;
		background-image: url(../img/cr-tool-needles.svg);
		background-position: center 5rem;
		background-size: 2.5rem auto;
	}

	.cr-pegboard::after {
		inset-inline-end: 0;
		background-image: url(../img/cr-tool-saw.svg);
		background-position: center calc(100% - 5rem);
		background-size: 2.75rem auto;
	}
}

@media (min-width: 64rem) {

	.cr-pegboard__board {
		--peg-cols: 3;
	}

	.cr-pegboard > .cr-pegboard__board.wp-block-post-template {
		padding-inline: 7rem;
	}

	.cr-pegboard .pkiw-group:has(> .pkiw-group__items > li:nth-child(2)) {
		--peg-span: 2;
	}

	.cr-pegboard .pkiw-group:has(> .pkiw-group__items > li:nth-child(3)) {
		--peg-span: 3;
	}

	.cr-pegboard::before,
	.cr-pegboard::after {
		content: "";
		width: 7rem;
		background-repeat: no-repeat, no-repeat;
	}

	.cr-pegboard::before {
		inset-inline-start: 0;
		background-image: url(../img/cr-tool-needles.svg), url(../img/cr-tool-bone-folder.svg);
		background-position: center 4rem, center calc(100% - 4rem);
		background-size: 3.75rem auto, 3.25rem auto;
	}

	.cr-pegboard::after {
		inset-inline-end: 0;
		background-image: url(../img/cr-tool-ruler.svg), url(../img/cr-tool-saw.svg);
		background-position: center 4rem, center calc(100% - 4rem);
		background-size: 3.5rem auto, 4rem auto;
	}
}

/* ============================================================
   Single: facts and editable project sections become paper objects.
   Only the front end gains the three-column grid; the same paper paint
   applies in the editor canvas through the body class.
   ============================================================ */

body.cr-craft-single .single-post__title {
	display: block;
	box-sizing: border-box;
	width: fit-content;
	max-width: 100%;
	padding: var(--cr-space-sm) var(--cr-space-md);
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	background: var(--cr-periwinkle);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-style: normal;
	text-transform: none;
	overflow-wrap: anywhere;
}

body.cr-craft-single .single-post__title.cr-flank::before,
body.cr-craft-single .single-post__title.cr-flank::after {
	content: none !important;
	display: none !important;
}

body.cr-craft-single.single main.single-post > .single-post__header::after {
	content: none;
}

.cr-craft-single .pkiw-craft-facts,
.cr-craft-single .pkiw-craft-section {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--cr-space-lg);
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-body);
	font-size: max(var(--cr-text-floor), 1rem);
	line-height: var(--cr-leading-normal);
}

.cr-craft-single .pkiw-craft-facts,
.cr-craft-single .pkiw-craft-section--steps {
	--craft-hole: var(--cr-rule);
	padding-inline-start: calc(var(--cr-space-xl) + var(--cr-space-xs));
	background:
		radial-gradient(circle, var(--craft-hole) 0 0.22rem, transparent 0.22rem) left 0.55rem top 1.4rem / 1.25rem 2rem repeat-y,
		var(--cr-fiber),
		var(--cr-printer-ivory);
}

.cr-craft-single .pkiw-craft-facts::before,
.cr-craft-single .pkiw-craft-section--steps::before {
	content: "";
	position: absolute;
	inset-block-start: -0.65rem;
	inset-inline-start: 50%;
	z-index: 2;
	width: 4rem;
	height: 1.2rem;
	background: var(--cr-tape);
	pointer-events: none;
	rotate: var(--cr-rotate-neg);
	translate: -50% 0;
}

/* Light mode punches the holes in the rule tone so they read on ivory;
   dark mode shows the dark page through them. */
@media (prefers-color-scheme: dark) {

	:root:is(:not([data-theme]), [data-theme="system"]) .cr-craft-single :is(.pkiw-craft-facts, .pkiw-craft-section--steps) {
		--craft-hole: var(--cr-surface);
	}
}

:root[data-theme="dark"] .cr-craft-single :is(.pkiw-craft-facts, .pkiw-craft-section--steps) {
	--craft-hole: var(--cr-surface);
}

.cr-craft-single .pkiw-craft-section--materials {
	background: var(--cr-fiber), var(--cr-sky-blue);
}

.cr-craft-single .pkiw-craft-section--materials + .pkiw-craft-section--tools {
	margin-block-start: var(--cr-space-lg);
}

.cr-craft-single .pkiw-craft-section--tools {
	padding-inline-end: 7rem;
	background:
		url(../img/cr-tool-scissors.svg) right var(--cr-space-md) bottom var(--cr-space-md) / 5rem auto no-repeat,
		var(--cr-fiber),
		var(--cr-light-orange);
}

.cr-craft-single .pkiw-craft-facts__row {
	display: grid;
	grid-template-columns: minmax(6.5rem, 0.45fr) minmax(0, 1fr);
	gap: var(--cr-space-xs) var(--cr-space-md);
	align-items: baseline;
}

.cr-craft-single .pkiw-craft-facts__row + .pkiw-craft-facts__row {
	margin-block-start: var(--cr-space-sm);
}

.cr-craft-single .pkiw-craft-facts dt,
.cr-craft-single .pkiw-craft-facts dd {
	margin: 0;
	color: var(--cr-russian-violet);
}

.cr-craft-single .pkiw-craft-facts dt {
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-floor);
	font-style: normal;
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	text-transform: uppercase;
}

.cr-craft-single .pkiw-craft-section :is(h2, h3) {
	margin-block-start: 0;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-style: normal;
	text-transform: none;
}

.cr-craft-single .pkiw-craft-section :is(p, li, figcaption),
.cr-craft-single .pkiw-craft-facts dd {
	background: none;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-body);
}

.cr-craft-single :is(.pkiw-craft-facts, .pkiw-craft-section) a {
	color: var(--cr-cerulean);
}

.cr-craft-single :is(.pkiw-craft-facts, .pkiw-craft-section) a:hover {
	color: var(--cr-russian-violet);
}

.cr-craft-single .pkiw-craft-section--materials a {
	color: var(--cr-russian-violet);
}

.cr-craft-single .pkiw-craft-section > :last-child,
.cr-craft-single .pkiw-craft-section > :last-child > :last-child {
	margin-block-end: 0;
}

.cr-craft-single .pkiw-craft-steps {
	counter-reset: craft-step;
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-craft-single .pkiw-craft-step {
	counter-increment: craft-step;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr);
	gap: var(--cr-space-xs) var(--cr-space-sm);
	min-width: 0;
	margin: 0 0 var(--cr-space-lg);
	padding: 0;
	background: none;
}

.cr-craft-single .pkiw-craft-step:last-child {
	margin-block-end: 0;
}

.cr-craft-single .pkiw-craft-step::before {
	content: counter(craft-step);
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-lg);
	font-style: normal;
	font-weight: var(--cr-weight-bold);
	line-height: 1;
	text-align: center;
}

.cr-craft-single .pkiw-craft-step > * {
	grid-column: 2;
	min-width: 0;
}

.cr-craft-single .pkiw-craft-step figure {
	margin: 0;
}

.cr-craft-single .pkiw-craft-step img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	filter: none;
	mix-blend-mode: normal;
}

.cr-craft-single .pkiw-craft-step :is(p, figcaption) {
	margin: 0;
	font-family: var(--cr-font-body);
}

@media (min-width: 64rem) {

	body.cr-craft-single main.single-post {
		--craft-column: calc((var(--wp--style--global--wide-size) - var(--cr-space-xl) - var(--cr-space-xl)) / 3);
		display: grid;
		grid-template-columns:
			minmax(0, 1fr)
			[craft-left-start] minmax(0, var(--craft-column)) [craft-left-end]
			var(--cr-space-xl)
			[craft-middle-start] minmax(0, var(--craft-column)) [craft-middle-end]
			var(--cr-space-xl)
			[craft-right-start] minmax(0, var(--craft-column)) [craft-right-end]
			minmax(0, 1fr);

		/* The middle column owns the rows: H1, Materials, then Tools in the
		   flexible row. Cover, Facts and Steps span into that flexible row,
		   so their heights land there and never stretch the H1 or Materials
		   rows. */
		grid-template-rows: auto auto minmax(0, 1fr);
		grid-auto-flow: row dense;
		grid-auto-rows: auto;
		align-items: start;
	}

	/* :where() keeps the full-width default at the weight of the body class alone,
	   so the placement rules below win without a longer selector chain. */
	body.cr-craft-single :where(
		.single-post__content > *,
		.single-post__content > .pkiw-singular-entry > *,
		.single-post__content > div:has(> .pkiw-craft-facts) > *,
		main.single-post > *
	) {
		grid-column: 1 / -1;
		min-width: 0;
	}

	body.cr-craft-single .single-post__content,
	body.cr-craft-single .single-post__content > .pkiw-singular-entry,
	body.cr-craft-single .single-post__content > div:has(> .pkiw-craft-facts) {
		display: contents;
	}

	body.cr-craft-single main.single-post > .single-post__header {
		grid-column: craft-middle;
		grid-row: 1;
		align-self: start;
		width: 100%;
		max-width: none;
	}

	body.cr-craft-single main.single-post > .single-post__featured {
		grid-column: craft-left;
		grid-row: 1 / span 3;
		align-self: start;
		width: 100%;
		max-width: none;
		margin: 0;
	}

	/* Facts share the cover's area and start below it. A percentage margin
	   resolves against the grid area's width, which is the cover's width, and
	   inc/single-craft.php prints the cover's height-to-width ratio. */
	body.cr-craft-single .pkiw-craft-facts {
		grid-column: craft-left;
		grid-row: 1 / span 3;
		align-self: start;
	}

	body.cr-craft-single:has(main.single-post > .single-post__featured) .pkiw-craft-facts {
		margin-block-start: calc(100% * var(--craft-cover-ratio, 0.75) + var(--cr-space-lg));
	}

	body.cr-craft-single .pkiw-craft-section--materials,
	body.cr-craft-single .pkiw-craft-section--tools {
		grid-column: craft-middle;
		align-self: start;
	}

	body.cr-craft-single .pkiw-craft-section--materials {
		grid-row: 2;
		margin-block-start: var(--cr-space-lg);
	}

	body.cr-craft-single .pkiw-craft-section--tools {
		grid-row: 3;
	}

	/* Each step reads as one row: number, picture, caption. */
	.cr-craft-single .pkiw-craft-step {
		grid-template-columns: 2rem minmax(0, 1.25fr) minmax(0, 1fr);
		align-items: center;
	}

	.cr-craft-single .pkiw-craft-step::before {
		grid-row: 1;
		align-self: start;
	}

	.cr-craft-single .pkiw-craft-step > figure {
		grid-column: 2;
		grid-row: 1;
	}

	.cr-craft-single .pkiw-craft-step > :not(figure) {
		grid-column: 3;
	}

	body.cr-craft-single .pkiw-craft-section--steps {
		grid-column: craft-right;
		grid-row: 1 / span 3;
	}
}

/* ============================================================
   Stream: the generic craft card becomes one paper tool tag.
   Selector weight restores its border, paper and media order after the
   shared collage resets without changing any neighbouring kind.
   ============================================================ */

.wp-block-post-template > li > .pk-card.cr-craft-tag {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	min-height: 44px;
	margin: 0;
	padding: 1.5rem var(--cr-space-md) var(--cr-space-md);
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	background: var(--cr-printer-ivory);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-russian-violet);
}

.wp-block-post-template > li > .pk-card.cr-craft-tag.cr-craft-tag--light-orange {
	background: var(--cr-light-orange);
}

.wp-block-post-template > li > .pk-card.cr-craft-tag.cr-craft-tag--printer-ivory {
	background: var(--cr-printer-ivory);
}

.cr-craft-tag__hole {
	position: absolute;
	inset-block-start: 0.3rem;
	inset-inline-start: 50%;
	z-index: 2;
	box-sizing: border-box;
	width: 0.8rem;
	height: 0.8rem;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 50%;
	background: var(--cr-surface);
	pointer-events: none;
	translate: -50% 0;
}

.cr-craft-tag__tape {
	position: absolute;
	inset-block-start: -0.65rem;
	inset-inline-start: var(--cr-space-md);
	z-index: 2;
	width: 4rem;
	height: 1.3rem;
	background: var(--cr-tape);
	pointer-events: none;
	rotate: var(--cr-rotate-neg2);
}

.wp-block-post-template > li > .pk-card.cr-craft-tag > .pk-body {
	position: static;
	display: flex;
	flex-direction: column;
	gap: var(--cr-space-xs);
	min-width: 0;
	margin: 0;
	padding: 0;
	background: none;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-caption {
	position: static;
	display: contents;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-kindlabel {
	position: static;
	display: block;
	margin: 0;
	padding: 0;
	color: var(--cr-russian-violet-soft);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-floor);
	font-style: normal;
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	line-height: var(--cr-leading-tight);
	text-transform: none;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-title {
	position: static;
	min-width: 0;
	margin: 0;
	padding: 0;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-md);
	font-style: normal;
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
	text-transform: none;
	overflow-wrap: anywhere;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-title a {
	color: var(--cr-cerulean);
	text-decoration: none;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-title a:hover {
	color: var(--cr-russian-violet);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-title a:focus-visible {
	outline: none;
	box-shadow: none;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-craft-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cr-space-2xs) var(--cr-space-sm);
	margin: 0;
	padding: 0;
	background: none;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-body);
	font-size: max(var(--cr-text-floor), var(--cr-text-sm));
	line-height: var(--cr-leading-snug);
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-media {
	position: static;
	order: 0;
	width: 100%;
	max-width: none;
	margin: var(--cr-space-xs) 0 0;
	padding: 0;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-media img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 10rem;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 0;
	object-fit: cover;
	aspect-ratio: auto;
	filter: none;
	mix-blend-mode: normal;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-media.cr-cover--failed {
	display: none;
}

.wp-block-post-template > li > .pk-card.cr-craft-tag:focus-within {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 0;
	box-shadow: var(--cr-shadow-hard-2), 0 0 0 7px var(--cr-russian-violet);
}

@media (prefers-reduced-motion: no-preference) {

	.cr-peg-card,
	.wp-block-post-template > li > .pk-card.cr-craft-tag {
		transition: box-shadow 0.15s ease, translate 0.15s ease;
	}

	.cr-peg-card:hover,
	.cr-peg-card:focus-within,
	.wp-block-post-template > li > .pk-card.cr-craft-tag:hover,
	.wp-block-post-template > li > .pk-card.cr-craft-tag:focus-within {
		box-shadow: var(--cr-shadow-hard-2);
		translate: 0 -1px;
	}

	.cr-peg-card:focus-within,
	.wp-block-post-template > li > .pk-card.cr-craft-tag:focus-within {
		box-shadow: var(--cr-shadow-hard-2), 0 0 0 7px var(--cr-russian-violet);
	}
}

@media (prefers-reduced-motion: reduce) {

	.cr-peg-card,
	.wp-block-post-template > li > .pk-card.cr-craft-tag {
		transition: none;
		translate: none;
	}
}

@media (forced-colors: active) {

	.cr-pegboard__board,
	.cr-peg-card,
	body.cr-craft-single .single-post__title,
	.cr-craft-single .pkiw-craft-facts,
	.cr-craft-single .pkiw-craft-section,
	.wp-block-post-template > li > .pk-card.cr-craft-tag {
		border: 2px solid CanvasText;
		background: Canvas;
		box-shadow: none;
		color: CanvasText;
	}

	/* components.css forces every .pk-card to a 1px CanvasText border with !important in this mode; the tag takes the same 2px weight as the other craft papers, so it needs !important too. */
	.wp-block-post-template > li > .pk-card.cr-craft-tag {
		border: 2px solid CanvasText !important;
	}

	.cr-pegboard::before,
	.cr-pegboard::after {
		content: none;
		background: none;
	}

	.cr-peg-card::before,
	.cr-peg-card::after,
	.cr-craft-single .pkiw-craft-facts::before,
	.cr-craft-single .pkiw-craft-section--steps::before,
	.cr-craft-tag__hole,
	.cr-craft-tag__tape {
		display: none;
		content: none;
	}

	.cr-pegboard .pkiw-group__heading {
		border: 2px solid CanvasText;
		background: Canvas;
		color: CanvasText;
	}

	.cr-peg-card__title a:any-link,
	.wp-block-post-template > li > .pk-card.cr-craft-tag .pk-title a:any-link,
	.cr-craft-single :is(.pkiw-craft-facts, .pkiw-craft-section) a:any-link {
		color: LinkText;
	}

	.cr-craft-single .pkiw-craft-step::before,
	.cr-craft-single .pkiw-craft-facts :is(dt, dd),
	.cr-craft-single .pkiw-craft-section :is(h2, h3, p, li, figcaption),
	.wp-block-post-template > li > .pk-card.cr-craft-tag :is(.pk-kindlabel, .pk-title, .pk-craft-facts) {
		color: CanvasText;
	}
}