/*
 * atvesmir — "Archiv ročníků" (year archive) page (block 09)
 * 1:1 with the prototype's archive screen: a mono eyebrow + serif H1 + lead
 * intro band, then a flat divider-separated list of rows — a mono terracotta
 * year, the serif theme title, and a mono uppercase kind label. Colours/metrics
 * come from the design tokens (tokens.css) so the page follows light/dark.
 * Measured against tests/design (archive screen).
 *
 * The <main> itself is the centered 1000px container (mirrors the prototype's
 * <main> exactly); refur does not impose width/padding on .site-main.
 */

.at-archive {
	max-width: 1000px;
	margin-inline: auto;
	/* Bottom is 0 to match the prototype main exactly; the footer carries its
	 * own margin-top for the gap below the list. */
	padding: clamp(34px, 5vw, 56px) var(--at-gutter) 0;
}

/* ---------------------------------------------------------------- *
 * 1. Intro band — eyebrow / display title / lead
 * ---------------------------------------------------------------- */
.at-archive__eyebrow {
	font-family: var(--font-mono);
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	line-height: 1.65;
	color: var(--ink3);
	margin: 0 0 10px;
	padding: 0;
}
.at-archive__title {
	font-family: var(--font-serif);
	font-size: clamp(2.1rem, 4.6vw, 3.2rem);
	font-weight: 400;
	letter-spacing: -.02em;
	/* Inherit the prototype's 1.65 (the proto has no heading reset); the token
	 * h1–h6 rule's 1.1 would shorten this title and shift the lead up. */
	line-height: 1.65;
	color: var(--ink);
	margin: 0;
	padding: 0;
}
.at-archive__lead {
	font-family: var(--font-serif);
	font-size: 1.18rem;
	line-height: 1.65;
	color: var(--ink2);
	max-width: 56ch;
	margin: 18px 0 0;
	padding: 0;
}

/* ---------------------------------------------------------------- *
 * 2. Year list — one row per ročník
 * ---------------------------------------------------------------- */
.at-archive__list {
	margin: 34px 0 0;
	border-top: 1px solid var(--line);
}
/* The row is an <a>; every interactive state stays put so the legacy refur
 * a:hover (--accent2) recolour can't tint the link box (the child spans carry
 * their own explicit colours, so the visible text never inherits anyway). */
.at-archive__row,
.at-archive__row:visited,
.at-archive__row:focus,
.at-archive__row:active,
.at-archive__row:hover {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 18px 6px;
	border-bottom: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}
.at-archive__year {
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--accent);
	min-width: 54px;
	line-height: 1.65;
}
.at-archive__theme {
	flex: 1;
	min-width: 0;
	font-family: var(--font-serif);
	font-size: clamp(1.15rem, 2vw, 1.5rem);
	line-height: 1.65;
	color: var(--ink);
}
.at-archive__kind {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	color: var(--ink3);
	text-transform: uppercase;
	line-height: 1.65;
}