/* Architrave — the related posts under the article (Jetpack related posts).
 *
 * THE ARCHIVE'S ROWS (Manuel, 2026-09-02, from a screenshot of the archive
 * page): up to five posts, title left, date right, the archive's seam
 * between rows and its pill under the pointer — the archive row (style.css,
 * .arch-row) without its format mark. No heading, no pictures, no card.
 * The dials are the archive's own: 48 tall, 16 inset, corner 12, the seam
 * at --border-subtle stopping where the corner turns.
 *
 * What came before is in this file's git history: the fixed bar with the
 * fold (2026-08-02), the section of archive-voice cards with pictures
 * (2026-08-18), and the hairline list of the same morning as this.
 */

/* A new thing begins after the conversation: the rhythm's 64. */
.article-tail {
	margin-block-start: var(--space-reading-section);
}

.related-list {
	--arch-row-height: 48px;
	--arch-row-inset: var(--space-4);
	--arch-row-corner: 12px;
	display: flex;
	flex-direction: column;
	font-family: var(--font-sans);
	font-size: var(--text-base);
	line-height: var(--text-base-line-height);
	font-weight: var(--font-weight-body);
}

.related-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	min-height: var(--arch-row-height);
	padding: 0 var(--arch-row-inset);
	border-radius: var(--arch-row-corner);
	color: inherit;
	text-decoration: none;
	transition: background-color var(--motion-duration-feedback)
		var(--motion-easing-standard);
}

/* The archive's seam: a background hairline at --border-subtle, stopping
   where the pill's corner turns (100% − 2 × corner), stepping aside around
   a hovered row — its own seam and the next one's. A background and not a
   border, because a border cannot be inset and a full-width line cuts
   across the pill's corner curve. */
.related-row + .related-row {
	background-image: linear-gradient(var(--border-subtle), var(--border-subtle));
	background-size: calc(100% - 2 * var(--arch-row-corner))
		var(--border-width-default);
	background-position: center top;
	background-repeat: no-repeat;
}

.related-row:focus-visible,
.related-row:focus-visible + .related-row {
	background-image: none;
}

@media (hover: hover) {
	.related-row:hover,
.related-row:hover + .related-row {
		background-image: none;
	}
}

@media (hover: hover) {
	.related-row:hover {
		background-color: var(--surface-hover);
	}
}

.related-row:active {
	background-color: var(--surface-selected);
}

.related-row-title {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--text-primary);
}

.related-row-date {
	flex: none;
	color: var(--text-muted);
	font-variant-numeric: var(--font-variant-numeric-tabular);
}