.whf-all-letter-lists {
	width: min(1080px, calc(100% - 42px));
	margin: clamp(3rem, 6vw, 5rem) auto;
}

.whf-all-letter-lists .whf-results-heading {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 2.5rem;
}

.whf-all-letter-lists .whf-results-heading h1,
.whf-all-letter-lists .whf-results-heading h2 {
	color: #efe2bd;
	font-family: var(--whf-serif);
	font-size: clamp(3rem, 6vw, 5.75rem);
	line-height: .95;
	font-weight: 400;
	margin: .35rem 0 1rem;
	text-shadow: 0 12px 34px rgba(0,0,0,.42);
}

.whf-all-letter-lists .whf-results-heading p:not(.whf-kicker) {
	color: rgba(243,231,204,.82);
	font-size: 1.08rem;
}

/* Accordion wrapper */

.whf-letter-list-accordion {
	display: grid;
	gap: 1.15rem;
}

/* Each list = antique newspaper/envelope file */

.whf-letter-list-item {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	color: var(--whf-ink);

	background:
		linear-gradient(rgba(243,231,204,.90), rgba(243,231,204,.93)),
		var(--whf-parchment-img);
	background-size: auto, 560px auto;
	background-repeat: repeat;
	border: 1px solid rgb(157 128 82);
	box-shadow:
		0 24px 65px rgba(0,0,0,.34),
		inset 0 0 0 1px rgba(255,255,255,.25);
}

/* aged-paper corner texture */

.whf-letter-list-item::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image: url("/wp-content/uploads/2026/06/aged-parchment-texture.webp");
	background-size: auto;
	background-position: center;
	background-repeat: repeat;
	opacity: .48;

	mask-image:
		radial-gradient(circle at top left, black 0%, rgba(0,0,0,.85) 12%, transparent 34%),
		radial-gradient(circle at top right, black 0%, rgba(0,0,0,.85) 12%, transparent 34%),
		radial-gradient(circle at bottom left, black 0%, rgba(0,0,0,.85) 12%, transparent 34%),
		radial-gradient(circle at bottom right, black 0%, rgba(0,0,0,.85) 12%, transparent 34%);
	-webkit-mask-image:
		radial-gradient(circle at top left, black 0%, rgba(0,0,0,.85) 12%, transparent 34%),
		radial-gradient(circle at top right, black 0%, rgba(0,0,0,.85) 12%, transparent 34%),
		radial-gradient(circle at bottom left, black 0%, rgba(0,0,0,.85) 12%, transparent 34%),
		radial-gradient(circle at bottom right, black 0%, rgba(0,0,0,.85) 12%, transparent 34%);
}

.whf-letter-list-item[open]::before {

	background:
		radial-gradient(
			circle at top left,
			rgba(184,148,70,.10),
			transparent 28%
		),

		radial-gradient(
			circle at bottom right,
			rgba(184,148,70,.08),
			transparent 24%
		),
		
		linear-gradient(
			to bottom,
			rgba(255,255,255,.12),
			transparent 80px
		),

		url("/wp-content/uploads/2026/06/aged-parchment-texture.webp");

	background-size:
		auto,
		auto,
		auto,
		600px auto;

	background-repeat:
		no-repeat,
		no-repeat,
		no-repeat,
		repeat;

	opacity: .55;
}

/* inner postal/envelope rule */

.whf-letter-list-item::after {
	content: "";
	position: absolute;
	inset: 12px;
	z-index: 0;
	pointer-events: none;
	border: 1px solid rgba(81,57,21,.32);
	box-shadow:
		inset 0 0 28px rgba(73,64,39,.22),
		0 0 18px rgba(53,37,21,.22);
}

/* Summary */

.whf-letter-list-summary {
	position: relative;
	z-index: 2;
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 1.25rem;
	padding: 1.35rem 1.6rem;
}

.whf-letter-list-summary::-webkit-details-marker {
	display: none;
}

.whf-letter-list-summary::after {
	content: "+";
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	font-family: var(--whf-serif);
	font-size: 2rem;
	line-height: 1;
	color: #d9c39a;
	background:
		linear-gradient(to bottom, #17372c, #07130f);
	border: 1px solid rgba(184,148,70,.55);
	box-shadow: 0 8px 18px rgba(0,0,0,.22);
}

.whf-letter-list-item[open] .whf-letter-list-summary::after {
	content: "–";
}

/* Title + meta */

.whf-list-title {
	display: block;
	font-family: var(--whf-serif);
	font-size: clamp(1.65rem, 3vw, 2.35rem);
	line-height: 1.02;
	font-weight: 400;
	color: var(--whf-ink);
}

.whf-list-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .4rem .75rem;
	margin-top: .45rem;
	font-family: var(--whf-sans);
	font-size: .64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .13em;
	color: #60451d;
}

.whf-list-meta span {
	display: inline-flex;
	align-items: center;
}

.whf-list-meta span + span::before {
	content: "•";
	margin-right: .75rem;
	color: rgba(96,69,29,.45);
}

/* Count badge */

.whf-list-count {
	min-width: 88px;
	padding: .7rem .75rem;
	text-align: center;
	color: #efe2bd;
	background:
		linear-gradient(rgba(7,19,15,.86), rgba(7,19,15,.94)),
		url("/wp-content/uploads/2026/06/green-paper-texture.webp");
	background-size: cover;
	border: 1px solid rgba(184,148,70,.55);
	box-shadow:
		inset 0 0 24px rgba(0,0,0,.36),
		0 10px 22px rgba(0,0,0,.18);
}

.whf-list-count strong {
	display: block;
	font-family: var(--whf-serif);
	font-size: 2rem;
	line-height: .9;
	font-weight: 400;
	color: #efe2bd;
}

.whf-list-count span {
	display: block;
	margin-top: .25rem;
	font-family: var(--whf-sans);
	font-size: .55rem;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: rgba(243,231,204,.72);
}

/* Panel */

.whf-letter-list-panel {
	position: relative;
	z-index: 2;
	padding: 0 1.6rem 1.7rem;
	border-top: 1px solid rgba(96,69,29,.18);
}

/* Source bar */

.whf-list-source-bar {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 1rem 0;
	margin-bottom: .6rem;
	font-family: var(--whf-sans);
	font-size: .66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: #60451d;
}

.whf-list-source-bar a {
	color: #3e674f;
	text-decoration: none;
	border-bottom: 1px solid rgba(62,103,79,.35);
}

.whf-list-source-bar a:hover {
	color: #7a5520;
}

/* Name index */

.whf-name-index {
	column-count: 3;
	column-gap: 2.75rem;
	padding-top: .6rem;
}

.whf-name-group {
	break-inside: avoid;
	margin: 0 0 1.45rem;
}

.whf-name-group h2 {
	font-family: var(--whf-serif);
	font-size: 1.85rem;
	line-height: 1;
	font-weight: 400;
	color: #60451d;
	border-bottom: 1px solid rgba(96,69,29,.25);
	margin: 0 0 .55rem;
	padding-bottom: .25rem;
}

.whf-name-group ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.whf-name-group li {
	font-family: var(--whf-serif);
	font-size: 1.04rem;
	line-height: 1.45;
	padding: .16rem 0;
	color: var(--whf-ink);
}

.whf-name-group li:hover {
	color: #3e674f;
}

/* Empty state */

.whf-empty-list {
	color: #705b36;
	font-family: var(--whf-serif);
	font-size: 1.05rem;
}

/* Tablet */

@media (max-width: 900px) {
	.whf-name-index {
		column-count: 2;
	}

	.whf-letter-list-summary {
		grid-template-columns: 1fr auto;
	}

	.whf-letter-list-summary::after {
		grid-column: 2;
		grid-row: 1;
	}

	.whf-list-count {
		grid-column: 1 / -1;
		width: max-content;
		min-width: 96px;
	}
}

/* Mobile */

@media (max-width: 620px) {
	.whf-all-letter-lists {
		width: calc(100% - 26px);
		margin-top: 3rem;
	}

	.whf-letter-list-summary {
		grid-template-columns: 1fr auto;
		padding: 1rem;
		gap: .8rem;
	}

	.whf-list-title {
		font-size: 1.55rem;
	}

	.whf-list-meta {
		display: grid;
		gap: .25rem;
		font-size: .58rem;
	}

	.whf-list-meta span + span::before {
		display: none;
	}

	.whf-letter-list-summary::after {
		width: 36px;
		height: 36px;
		font-size: 1.65rem;
	}

	.whf-list-count {
		grid-column: 1 / -1;
		min-width: 84px;
		padding: .6rem .7rem;
	}

	.whf-list-count strong {
		font-size: 1.55rem;
	}

	.whf-letter-list-panel {
		padding: 0 1rem 1rem;
	}

	.whf-list-source-bar {
		display: grid;
		font-size: .58rem;
	}

	.whf-name-index {
		column-count: 1;
	}

	.whf-name-group h2 {
		font-size: 1.55rem;
	}
}