/* Reply letters: archive cards, single citation sheet, and Stream envelope. */
/* stylelint-disable no-descending-specificity */
.cr-letters {
	position: relative;
	overflow-wrap: anywhere;
}

.cr-letters .pkiw-group {
	margin-block: 0 var(--cr-space-2xl);
}

.cr-letters .pkiw-group__items,
.cr-letters > .wp-block-query > ul.wp-block-post-template {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: var(--cr-space-lg);
	align-items: start;
	max-inline-size: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-letters .pkiw-group__items > li,
.cr-letters > .wp-block-query > ul.wp-block-post-template > li {
	min-width: 0;
}

.cr-letters .pkiw-group__heading {
	display: block;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-block: 0 var(--cr-space-md);
	padding: var(--cr-space-2xs) var(--cr-space-sm);
	border: 2px solid var(--cr-russian-violet);
	color: var(--cr-ink);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-base);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
	overflow-wrap: anywhere;
	text-transform: uppercase;
}

.cr-letters .cr-letters__host--ink-1 {
	border-color: var(--cr-cerulean);
}

.cr-letters .cr-letters__host--ink-2 {
	border-color: var(--cr-ut-orange-dark);
}

.cr-letters li.wp-block-post.cr-paper-sheet {
	position: relative;
	isolation: isolate;
	min-width: 0;
	margin: 0;
	padding: var(--cr-space-lg);
	overflow: clip visible;
	overflow-wrap: anywhere;
}

/* The torn lower edge replaces the archive's marker-bar divider on letters. */
.cr-letters li.wp-block-post.cr-paper-sheet--torn::after {
	display: block;
	inline-size: auto;
	max-inline-size: none;
	block-size: var(--cr-paper-tear);
	margin: 0;
	background-color: var(--cr-paper);
	transform: none;
}

.cr-letters li.wp-block-post.cr-paper-sheet:hover {
	background-color: var(--cr-paper);
}

.cr-letter__title {
	margin: 0 0 var(--cr-space-sm);
	color: var(--cr-paper-ink);
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-lg);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
	overflow-wrap: anywhere;
}

.cr-letter__title a {
	color: var(--cr-paper-ink);
	text-decoration: none;
}

.cr-letter__title a::after {
	position: absolute;
	z-index: 3;
	inset: 0;
	content: "";
}

.cr-letter__title a:is(:hover, :focus-visible) {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

.cr-letter__excerpt {
	margin: 0;
	color: var(--cr-paper-ink);
	font-family: var(--cr-font-body);
	font-size: 1rem;
	line-height: var(--cr-leading-normal);
	overflow-wrap: anywhere;
}

.cr-letters li.cr-paper-sheet:has( .cr-letter__title a:focus-visible ) {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

.cr-letters li.cr-paper-sheet:has( .cr-letter__title a:focus-visible ) .cr-letter__title a:focus-visible {
	outline: none;
	box-shadow: none;
}

.cr-letters li.cr-letter-trim--0::before,
.cr-letters li.cr-letter-trim--1::before,
.cr-letters li.cr-letter-trim--2::before {
	position: absolute;
	z-index: -1;
	content: "";
	pointer-events: none;
}

.cr-letters li.cr-letter-trim--0::before {
	inset-block-start: 0;
	inset-inline-end: 0;
	inline-size: 4rem;
	block-size: 4rem;
	background: var(--cr-periwinkle);
	clip-path: polygon( 100% 0, 0 0, 100% 100% );
	transform: rotate( var(--cr-rotate-1) );
	transform-origin: top right;
}

.cr-letters li.cr-letter-trim--1::before {
	inset-block: 0;
	inset-inline-start: 0;
	inline-size: 0.65rem;
	background: repeating-linear-gradient(
		135deg,
		var(--cr-cerulean) 0 0.35rem,
		var(--cr-printer-ivory) 0.35rem 0.7rem,
		var(--cr-ut-orange-dark) 0.7rem 1.05rem,
		var(--cr-printer-ivory) 1.05rem 1.4rem
	);
}

.cr-letters li.cr-letter-trim--2::before {
	inset-block-start: var(--cr-space-sm);
	inset-inline-end: var(--cr-space-sm);
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border: 2px solid var(--cr-russian-violet);
	border-radius: 50%;
	box-shadow: inset 0 0 0 0.35rem var(--cr-paper), inset 0 0 0 0.5rem var(--cr-russian-violet);
	transform: rotate( var(--cr-rotate-neg) );
}

@media ( min-width: 40rem ) {

	.cr-letters .pkiw-group__items,
	.cr-letters > .wp-block-query > ul.wp-block-post-template {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 64rem ) {

	.cr-letters .pkiw-group__items,
	.cr-letters > .wp-block-query > ul.wp-block-post-template {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

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

	.cr-letters li.wp-block-post.cr-paper-sheet {
		transition: translate 160ms ease;
	}

	.cr-letters li.wp-block-post.cr-paper-sheet:hover {
		translate: 0 -2px;
	}
}

body.kind-reply .single-post__date {
	color: var(--cr-ink-soft);
	font-family: var(--cr-font-mono);
	font-size: 0.875rem;
	line-height: var(--cr-leading-snug);
}

body.kind-reply h1 {
	font-family: var(--cr-font-accent);
}

/*
 * The opened letter on a reply single: one printer-ivory torn sheet holds the
 * date, kind chip, H1, citation, reply body and signature. Comments, the
 * newsletter and the post navigation stay on the page below it.
 */
.cr-letter.cr-paper-sheet {
	padding: var(--cr-space-2xl) clamp( var(--cr-space-md), 6vw, var(--cr-space-3xl) );
	border: 2px solid var(--cr-paper-side);
	border-block-end: 0;
	color: var(--cr-paper-ink);
	overflow-wrap: anywhere;
}

/* A focused link shows its own ring; the whole sheet does not light up. */
.cr-letter.cr-paper-sheet:has( :focus-visible ) {
	outline: none;
	box-shadow: var(--cr-shadow-hard);
}

.cr-letter > .single-post__header,
.cr-letter .single-post__content {
	max-inline-size: none;
	padding-inline: 0;
}

.cr-letter > .single-post__header > * {
	max-inline-size: none;
}

.cr-letter .single-post__title {
	color: var(--cr-paper-ink);
}

/* The torn edge replaces the page's marker bar, corner burst and flank marks. The theme sets the flanks with !important. */
body.kind-reply.single .cr-letter .single-post__header::after,
body.kind-reply.single .cr-letter .single-post__content::before {
	content: none;
}

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

/* Single posts widen --cr-measure to 80vw; the letter keeps the tokens.css reading measure. */
.cr-letter-sheet {
	--cr-measure: 65ch;
	margin-block-start: var(--cr-space-lg);
	color: var(--cr-paper-ink);
	font-family: var(--cr-font-body);
	overflow-wrap: anywhere;
}

.cr-letter-cite,
body.kind-reply.single .single-post__content .pk-card.cr-letter-cite {
	display: block;
	margin-block: 0 var(--cr-space-lg);
	padding: var(--cr-space-md);
	border: 0;
	border-inline-start: 0.375rem solid var(--cr-type-reply);
	background: var(--cr-light-gray);
	color: var(--cr-ink);
	box-shadow: none;
	overflow-wrap: anywhere;
}

.cr-letter-cite > .pk-body {
	inline-size: 100%;
	min-inline-size: 0;
}

.cr-letter-cite h2.pk-title {
	margin-block: 0 var(--cr-space-xs);
	font-family: var(--cr-font-accent);
	overflow-wrap: anywhere;
}

.cr-letter-cite h2.pk-title a {
	color: var(--cr-link);
	text-decoration: underline;
	text-underline-offset: 0.16em;
}

.cr-letter-cite h2.pk-title a:focus-visible {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

.cr-letter-cite .pk-sub,
.cr-letter-cite .pk-note {
	color: var(--cr-ink);
	font-family: var(--cr-font-body);
	font-size: 1rem;
	line-height: var(--cr-leading-normal);
	overflow-wrap: anywhere;
}

.cr-letter-cite .pk-note {
	font-style: italic;
}

/* Author, then host, on one supporting line. */
.cr-letter-cite .pk-sub .cr-letter-cite__host {
	font-size: var(--cr-text-sm);
}

.cr-letter-cite__sep {
	margin-inline: var(--cr-space-xs);
	color: var(--cr-ink-soft);
}

.cr-letter-cite__host,
.cr-letter-cite .pk-meta {
	color: var(--cr-ink-soft);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-floor);
	line-height: var(--cr-leading-snug);
	overflow-wrap: anywhere;
}

.cr-letter-cite img {
	max-inline-size: 100%;
	block-size: auto;
}

/* The cited picture supports the letter; it stops at the reading measure. */
.cr-letter-cite .pk-embed--photo {
	inline-size: var(--cr-measure);
	max-inline-size: 100%;
	block-size: auto;
}

.cr-letter-sheet .e-content,
.cr-letter-sheet .pkiw-singular-entry > .wp-block-paragraph {
	max-inline-size: var(--cr-measure);
	margin-inline: 0;
	font-size: var(--cr-text-md);
}

.cr-letter__signature {
	margin: var(--cr-space-lg) 0 0;
	color: var(--cr-ink);
	font-family: var(--cr-font-display);
	font-size: var(--cr-text-xl);
	line-height: var(--cr-leading-loose);
}

.cr-envelope {
	--cr-envelope-tuck: var(--cr-space-2xl);
	--cr-envelope-fold: var(--cr-space-lg);
	position: relative;
	isolation: isolate;
	box-sizing: border-box;
	max-inline-size: 100%;
	min-width: 0;
	padding: var(--cr-space-md) var(--cr-space-md) 0;
	background: var(--cr-light-gray);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-ink);
	overflow-wrap: anywhere;
}

/*
 * Front pocket: a light-gray layer over the insert's blank lower edge, with a
 * V-shaped mouth and two folds converging toward its center, drawn as 1px
 * rule lines. The address prints on it; with no address the envelope itself
 * draws an empty pocket.
 */
.cr-envelope__address::before,
.cr-envelope__address::after,
.cr-envelope:not( :has( > .cr-envelope__address ) )::before,
.cr-envelope:not( :has( > .cr-envelope__address ) )::after {
	position: absolute;
	z-index: -1;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: 100%;
	content: "";
	pointer-events: none;
}

.cr-envelope:not( :has( > .cr-envelope__address ) )::before,
.cr-envelope:not( :has( > .cr-envelope__address ) )::after {
	z-index: 1;
	block-size: calc( var(--cr-envelope-tuck) + var(--cr-space-xs) );
}

.cr-envelope__address::before,
.cr-envelope:not( :has( > .cr-envelope__address ) )::before {
	background: var(--cr-rule);
	clip-path: polygon( 0 0, 50% var(--cr-envelope-fold), 100% 0, 100% 100%, 0 100% );
}

.cr-envelope__address::after,
.cr-envelope:not( :has( > .cr-envelope__address ) )::after {
	background:
		linear-gradient( to top left, transparent calc( 50% - 0.5px ), var(--cr-rule) calc( 50% - 0.5px ) calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) ) left bottom / 50% 100% no-repeat,
		linear-gradient( to top right, transparent calc( 50% - 0.5px ), var(--cr-rule) calc( 50% - 0.5px ) calc( 50% + 0.5px ), transparent calc( 50% + 0.5px ) ) right bottom / 50% 100% no-repeat,
		var(--cr-light-gray);
	clip-path: polygon( 0 1px, 50% calc( var(--cr-envelope-fold) + 1px ), 100% 1px, 100% 100%, 0 100% );
}

.cr-envelope__insert {
	display: grid;
	grid-template-rows: repeat( 3, auto );
	margin-block-end: 0;
	padding: var(--cr-space-md) var(--cr-space-md) calc( var(--cr-space-md) + var(--cr-envelope-tuck) );
}

.cr-envelope__insert::before {
	z-index: -1;
	grid-row: 1 / -1;
	grid-column: 1;
	margin: calc( var(--cr-space-md) * -1 ) calc( var(--cr-space-md) * -1 ) calc( ( var(--cr-space-md) + var(--cr-envelope-tuck) ) * -1 );
	background: var(--cr-printer-ivory);
	box-shadow: var(--cr-shadow-hard-sm);
	content: "";
	pointer-events: none;
}

.cr-envelope__insert > * {
	grid-column: 1;
}

.cr-envelope__insert > :nth-child( 1 ) {
	grid-row: 1;
}

.cr-envelope__insert > :nth-child( 2 ) {
	grid-row: 2;
}

.cr-envelope__insert > :nth-child( 3 ) {
	grid-row: 3;
}

.cr-envelope__insert--tilt-1::before {
	transform: rotate( var(--cr-rotate-1) );
}

.cr-envelope__insert--tilt-2::before {
	transform: rotate( var(--cr-rotate-2) );
}

.cr-envelope__insert--tilt-3::before {
	transform: rotate( var(--cr-rotate-neg) );
}

.cr-envelope__insert--tilt-4::before {
	transform: rotate( var(--cr-rotate-neg2) );
}

.cr-envelope__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cr-space-xs);
	justify-content: space-between;
	align-items: center;
	margin: 0 0 var(--cr-space-xs);
	color: var(--cr-ink-soft);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-floor);
	line-height: var(--cr-leading-snug);
}

.cr-envelope__label {
	color: var(--cr-type-reply);
	font-weight: var(--cr-weight-bold);
	text-transform: uppercase;
}

.cr-envelope__title {
	margin: 0 0 var(--cr-space-xs);
	color: var(--cr-ink);
	font-family: var(--cr-font-accent);
	font-size: var(--cr-text-lg);
	line-height: var(--cr-leading-snug);
	overflow-wrap: anywhere;
}

.cr-envelope__title a {
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-envelope__title a::after {
	position: absolute;
	z-index: 3;
	inset: 0;
	content: "";
}

.cr-envelope__title a:hover {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.16em;
}

.cr-envelope:has( .cr-envelope__title a:focus-visible ) {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 4px;
	box-shadow: 0 0 0 7px var(--cr-focus-halo);
}

.cr-envelope:has( .cr-envelope__title a:focus-visible ) .cr-envelope__title a:focus-visible {
	outline: none;
	box-shadow: none;
}

.cr-envelope__excerpt {
	margin: 0;
	color: var(--cr-ink);
	font-family: var(--cr-font-body);
	font-size: 1rem;
	line-height: var(--cr-leading-normal);
	overflow-wrap: anywhere;
}

.cr-envelope__address {
	position: relative;
	z-index: 1;
	margin: calc( var(--cr-envelope-tuck) * -1 ) calc( var(--cr-space-md) * -1 ) 0;
	padding: calc( var(--cr-envelope-fold) + var(--cr-space-sm) ) var(--cr-space-md) var(--cr-space-lg);
	color: var(--cr-ink);
	font-family: var(--cr-font-mono);
	font-size: var(--cr-text-floor);
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
	overflow-wrap: anywhere;
	text-align: center;
}

/*
 * Dark mode (ruling X1): letters, the single's sheet and citation, and the
 * Stream envelope keep their light palette papers with Russian violet ink.
 * Only the page, text outside the papers, focus and the hard shadow flip.
 */
:root[data-theme="dark"] :is( .cr-letters li.cr-paper-sheet, .cr-letter, .cr-envelope ) {
	--cr-ink: var(--cr-russian-violet);
	--cr-ink-soft: var(--cr-russian-violet-soft);
	--cr-ink-muted: var(--cr-cerulean);
	--cr-link: var(--cr-cerulean);
	--cr-link-hover: var(--cr-russian-violet);
	--cr-link-visited: var(--cr-russian-violet-soft);
	--cr-type-reply: var(--cr-glaucous-dark);
}

:root[data-theme="dark"] .cr-letters .pkiw-group__heading {
	border-color: var(--cr-periwinkle);
	color: var(--cr-ink);
}

:root[data-theme="dark"] .cr-letters .cr-letters__host--ink-1 {
	border-color: var(--cr-selective-yellow);
}

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

	:root:not( [data-theme="light"] ) :is( .cr-letters li.cr-paper-sheet, .cr-letter, .cr-envelope ) {
		--cr-ink: var(--cr-russian-violet);
		--cr-ink-soft: var(--cr-russian-violet-soft);
		--cr-ink-muted: var(--cr-cerulean);
		--cr-link: var(--cr-cerulean);
		--cr-link-hover: var(--cr-russian-violet);
		--cr-link-visited: var(--cr-russian-violet-soft);
		--cr-type-reply: var(--cr-glaucous-dark);
	}

	:root:not( [data-theme="light"] ) .cr-letters .pkiw-group__heading {
		border-color: var(--cr-periwinkle);
		color: var(--cr-ink);
	}

	:root:not( [data-theme="light"] ) .cr-letters .cr-letters__host--ink-1 {
		border-color: var(--cr-selective-yellow);
	}
}

@media ( forced-colors: active ) {

	.cr-letters li.wp-block-post.cr-paper-sheet,
	.cr-letter,
	.cr-envelope {
		border: 2px solid CanvasText;
		background: none;
		box-shadow: none;
		color: CanvasText;
	}

	.cr-letters li.cr-letter-trim--0::before,
	.cr-letters li.cr-letter-trim--1::before,
	.cr-letters li.cr-letter-trim--2::before,
	.cr-envelope::before,
	.cr-envelope::after,
	.cr-envelope__address::before,
	.cr-envelope__address::after,
	.cr-envelope__insert::before {
		display: none;
		content: none;
	}

	.cr-letters .pkiw-group__heading {
		border-color: CanvasText;
		color: CanvasText;
	}

	.cr-letter-cite,
	body.kind-reply.single .single-post__content .pk-card.cr-letter-cite {
		border-inline-start: 0.375rem solid CanvasText;
		background: none;
	}
}