/* -------------------------------------------------------------------
 * THE RECORD INDEX -- standing dossiers as ruled cards.
 *
 * Owner directive, 2026-07-28: "change the record links to boxes with
 * the thumbnail and title for more visual impact. It's a major page and
 * I feel like it needs... more."
 *
 * It did. The page was a bulleted list of two links introducing the
 * most substantial writing on the site, which is the typographic
 * equivalent of filing your best photographs in a drawer.
 *
 * WHAT A "BOX" IS HERE, AND WHAT IT IS NOT. Not a card in the web
 * sense: no shadow, no radius, no fill, no lift on hover, none of which
 * exist anywhere else in this build and all of which are on the SPEC
 * section 9 banned list. A newspaper boxed a standing feature with
 * RULES -- a heavy rule over it and a hairline under it -- and the box
 * was the white space between those two lines. That is what these are.
 * The visual impact the owner asked for comes from the cut and the
 * scale of the head, not from a border-radius.
 *
 * THE FIRST CARD LEADS. A grid of identical tiles is a menu; a page
 * with a lead is a publication. The dossier at menu_order 0 takes the
 * full measure, the larger cut and the larger head. render.php decides
 * which one that is; this file only dresses it.
 *
 * The halftone screen and the colour snap on the cuts are inherited
 * from .rar-press-photo in components-fx.css and are deliberately NOT
 * restated here. Because the whole card is one anchor, hovering
 * anywhere on it hovers the figure inside it, so the cut snaps to
 * colour when the reader's pointer is anywhere near the thing they are
 * about to click. That is free, and it is the reason the anchor wraps
 * the figure rather than sitting beside it.
 * ------------------------------------------------------------------- */

.rar-record-index {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	column-gap: 26px;
	row-gap: 34px;
	margin: 34px 0;
}

.rar-record-card {
	display: block;
	border-top: 3px solid var(--rar-ink, #1a1712);
	border-bottom: 1px solid var(--rar-ink, #1a1712);
	padding: 13px 0 16px;
	color: var(--rar-ink, #1a1712);
	text-decoration: none;
}

/* The lead: cut on the left, copy beside it, across the whole sheet. */
.rar-record-card--lead {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 4fr);
	column-gap: 26px;
	align-items: start;
}

.rar-record-card .rar-press-photo {
	display: block;
	margin: 0 0 13px;
}

.rar-record-card--lead .rar-press-photo {
	margin: 0;
}

.rar-record-card .rar-press-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: 50% 35%;
}

/* The lead cut runs wider and shallower, the way a broadsheet ran the
   art on a standing feature it wanted you to stop at. */
.rar-record-card--lead .rar-press-photo img {
	aspect-ratio: 3 / 2;
}

.rar-record-card-copy {
	display: block;
}

/* The one sanctioned red on this page: SPEC section 4 reserves it for
   FROM THE RECORD labels, and this page IS the Record. Spent once, on
   the cornerstone; every other card sets its label in ink. */
.rar-record-card .rar-kicker {
	display: block;
	font-family: "Oswald", "Arial Narrow", sans-serif;
	font-size: 11px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--rar-ink, #1a1712);
	margin: 0 0 6px;
}

.rar-record-card--lead .rar-kicker {
	color: var(--rar-red, #8c1f13);
}

.rar-record-card .rar-headline {
	display: block;
	font-family: "Libre Caslon Display", Georgia, "Times New Roman", serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.06;
	color: var(--rar-ink, #1a1712);
	margin: 0 0 8px;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.rar-record-card--lead .rar-headline {
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1;
	margin-bottom: 10px;
}

.rar-record-card-stand {
	display: block;
	font-family: "Old Standard TT", Georgia, "Times New Roman", serif;
	font-style: italic;
	font-size: 16px;
	line-height: 1.4;
	color: var(--rar-ink, #1a1712);
	margin: 0 0 10px;
}

.rar-record-card--lead .rar-record-card-stand {
	font-size: 19px;
	line-height: 1.35;
}

.rar-record-card .rar-jump {
	display: block;
	font-family: "Courier Prime", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.4;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rar-ink, #1a1712);
	margin: 0;
}

/* The whole card is the target, so the affordance is on the head --
   the thing a reader reads as the link -- rather than an outline round
   the box. focus-visible gets the house red outline so a keyboard
   reader is never left guessing which card is armed. */
.rar-record-card:hover .rar-headline,
.rar-record-card:focus-visible .rar-headline {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.08em;
}

.rar-record-card:focus-visible {
	outline: 2px solid var(--rar-red, #8c1f13);
	outline-offset: 4px;
}

/* Stacked, the lead is just a bigger card: a 3fr/4fr split inside a
   phone measure gives a 120px photograph beside four-word lines. */
@media (max-width: 700px) {
	.rar-record-card--lead {
		display: block;
	}

	.rar-record-card--lead .rar-press-photo {
		margin: 0 0 13px;
	}

	.rar-record-card--lead .rar-headline {
		font-size: 28px;
	}

	.rar-record-card--lead .rar-record-card-stand {
		font-size: 17px;
	}
}