/*
	The weekly wrap-up: one page per ISO week at /weekly/<iso-week>/, and the archive list
	behind /weekly/. One stylesheet for both, because they are the same list one level
	apart: a week on the index is what a story is on a week page.

	Loaded as pageStyles: [tokens, news, chrome, weekly], so the palette arrives from
	tokens.css, the .wrap and the focus rule from news.css, and the masthead and sign-off
	from chrome.css. This file styles only what the wrap-up adds: its head, its blocks and
	its rows.

	IT IS A READING PAGE, NOT A BOARD. The trackers are tables of dates and set themselves
	68rem wide; a wrap-up is read top to bottom the way the story pages are, so it takes
	the narrower measure and the ruled-row grammar rather than the tinted cards the hubs
	use. What it borrows from the boards is the rule between rows and the mono standing
	line; what it borrows from the story page is the level dot, so a reader who has seen
	one story page knows what the dot means here without being told again.

	COLOUR IS CARRIED, NEVER INVENTED. Each row wears the story's own family through
	data-accent, the same map the home cards and the story pages read, so a story keeps
	its colour from the river to the wrap-up. The family reaches one thing on the row: the
	type word and the marker on the leading edge. A wash behind type is never the answer.

	Keyboard hyphen only, sentence-case, no BEM: descriptive names and native nesting.
*/

.weekly-main {
	padding-block-end: clamp(3rem, 7vw, 5.5rem);
}

/* Wider than the 44rem story column, narrower than the 68rem boards: a row here carries a
   headline, a dek and a standing line, and 52rem is where those three stop fighting. */
.weekly-inner {
	max-width: 52rem;
	margin-inline: auto;
	padding-block-start: clamp(1.75rem, 4vw, 2.75rem);
}

/* ---------------------------------------------------------------- the head */
/*
	The tracker lockup at the wrap-up's own weight: a kicker with the accent dash, the
	week at display scale, the span under it in mono, and one divided line of counts.
*/

.weekly-head {
	padding-block-end: clamp(1.5rem, 3vw, 2.25rem);
	border-block-end: 1px solid var(--hairline);
	margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
}

.weekly-kicker {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--font-display);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--accent-text);

	&::before {
		content: '';
		width: 1.75rem;
		height: 3px;
		background-color: var(--accent);
	}
}

.weekly-title {
	margin-block-start: 0.75rem;
	font-family: var(--font-display);
	font-size: clamp(1.95rem, 5vw, 3.2rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--text);
	text-wrap: balance;
}

.weekly-range {
	margin-block-start: 0.7rem;
	font-family: var(--font-mono);
	font-size: 0.85rem;
	letter-spacing: 0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}

.weekly-angle {
	margin-block-start: clamp(0.9rem, 1.8vw, 1.2rem);
	font-size: clamp(1rem, 1.6vw, 1.15rem);
	line-height: 1.5;
	color: var(--text);
	max-width: 56ch;
	text-wrap: pretty;
}

/* The counts, divided by a middle dot the way every other summary line on the site is.
   Tabular, so two weeks compared side by side keep their figures still. */
.weekly-summary {
	display: flex;
	flex-wrap: wrap;
	column-gap: 0.6rem;
	margin-block-start: clamp(0.9rem, 2vw, 1.3rem);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;

	& span + span::before {
		content: '\00b7';
		margin-inline-end: 0.6rem;
		color: var(--muted-2);
	}
}

.weekly-note {
	margin-block-start: 1rem;
	font-size: 0.95rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 62ch;
	text-wrap: pretty;
}

/* The editor's note above an issue: the one block of the desk's own voice on the page, so
   it is set in the body face at reading size with the accent holding its leading edge. */
.weekly-intro {
	margin-block-end: clamp(1.75rem, 3.5vw, 2.5rem);
	padding-inline-start: clamp(0.9rem, 2vw, 1.25rem);
	border-inline-start: 3px solid var(--accent);
	font-size: clamp(1.02rem, 1.6vw, 1.18rem);
	line-height: 1.6;
	color: var(--text);
	max-width: 58ch;
	text-wrap: pretty;
}

/* -------------------------------------------------------------- the blocks */
/*
	One block per issue section, plus the block that carries the rest of the week. The
	heading and its count sit on one line at the block's full width, the way the tracker
	boards head their rows.
*/

.weekly-block {
	margin-block-start: clamp(2rem, 4vw, 3rem);

	&:first-of-type {
		margin-block-start: 0;
	}
}

.weekly-block-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 1.5rem;
	row-gap: 0.35rem;
}

.weekly-block-title {
	font-family: var(--font-display);
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--text);
}

.weekly-block-count {
	font-family: var(--font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- the rows */

.weekly-rows {
	margin-block-start: clamp(1rem, 2.2vw, 1.4rem);
	border-block-start: 1px solid var(--hairline-bright);
}

/* The archive index runs its list straight off the head, with no block heading between
   them. The head already closes with a rule, so the list drops its own: two rules with
   dead air between them read as a block heading that failed to render. */
.weekly-head + .weekly-rows {
	margin-block-start: 0;
	border-block-start: 0;
}

.weekly-row {
	--row-accent: var(--accent);
	--row-accent-text: var(--accent-text);

	border-block-end: 1px solid var(--hairline);
}

/* The whole row is the link, so the target is the row rather than the headline alone.
   The leading marker is the family's one appearance on the row and it only stands up on
   hover and focus, which keeps a list of thirty rows from reading as thirty colours. */
.weekly-row-link {
	position: relative;
	display: block;
	padding-block: clamp(0.95rem, 1.9vw, 1.3rem);
	padding-inline-start: 0.9rem;
	text-decoration: none;

	&::before {
		content: '';
		position: absolute;
		inset-block: clamp(0.95rem, 1.9vw, 1.3rem);
		inset-inline-start: 0;
		width: 3px;
		background-color: var(--hairline-bright);
	}

	&:hover::before,
	&:focus-visible::before {
		background-color: var(--row-accent);
	}

	&:hover .weekly-row-headline {
		color: var(--row-accent-text);
	}
}

/* The standing line: the day in mono, then the type in the story's family, then the
   genre. Divided by rules rather than punctuation, the tag row's own grammar. */
.weekly-row-when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	column-gap: 0.6rem;
	row-gap: 0.2rem;

	& time {
		font-family: var(--font-mono);
		font-size: 0.76rem;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
		color: var(--muted);
	}
}

.weekly-row-type,
.weekly-row-genre {
	font-family: var(--font-display);
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.weekly-row-type {
	color: var(--row-accent-text);
}

.weekly-row-genre {
	color: var(--muted-2);
}

.weekly-row-headline {
	margin-block-start: 0.45rem;
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2.2vw, 1.4rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.025em;
	color: var(--text);
	text-wrap: balance;
}

.weekly-row-dek {
	margin-block-start: 0.4rem;
	font-size: 0.94rem;
	line-height: 1.5;
	color: var(--muted);
	max-width: 58ch;
	text-wrap: pretty;
}

/* How well it holds up, in the two public terms and no more: the level as a word and how
   many outlets carried it. The dot is the story page's dot, unchanged, so the three
   levels read the same on both pages. */
.weekly-row-check {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: 0.5rem;
	margin-block-start: 0.6rem;
	font-family: var(--font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.03em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}

.weekly-row-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background-color: var(--muted-2);
}

.weekly-row-check[data-level='confirmed'] .weekly-row-dot {
	background-color: var(--text);
}

.weekly-row-check[data-level='developing'] .weekly-row-dot {
	background-color: transparent;
	box-shadow: inset 0 0 0 2px var(--muted);
}

.weekly-row-check[data-level='single-source'] .weekly-row-dot {
	background-color: var(--muted-2);
}

.weekly-row-level {
	color: var(--text);
}

.weekly-row-outlets {
	color: var(--muted);

	&::before {
		content: '\00b7';
		margin-inline-end: 0.5rem;
		color: var(--muted-2);
	}
}

/* The colour families, the same map the home cards and the story pages read. A death
   notice stays matte here as everywhere: no colour on its edge, no colour on its word. */
.weekly-row[data-accent='tour'] {
	--row-accent: var(--tracker-tour);
	--row-accent-text: var(--tracker-tour-text);
}

.weekly-row[data-accent='festival'] {
	--row-accent: var(--tracker-festival);
	--row-accent-text: var(--tracker-festival-text);
}

.weekly-row[data-accent='award'] {
	--row-accent: var(--tracker-award);
	--row-accent-text: var(--tracker-award-text);
}

.weekly-row[data-accent='band'] {
	--row-accent: var(--type-band);
	--row-accent-text: var(--type-band-text);
}

.weekly-row[data-accent='industry'] {
	--row-accent: var(--type-industry);
	--row-accent-text: var(--type-industry-text);
}

.weekly-row[data-accent='new'] {
	--row-accent: var(--type-new);
	--row-accent-text: var(--type-new-text);
}

.weekly-row[data-accent='matte'] {
	--row-accent: var(--type-matte);
	--row-accent-text: var(--type-matte-text);
}

/* ------------------------------------------------------------- the ranking */
/*
	An issue section is a running order, so its rows are numbered and the numbers are the
	desk's, not a date sort. The counter sits in its own gutter beside the row at reading
	widths and moves up onto the standing line below 34rem, where a gutter would cost more
	than the number is worth.
*/

.weekly-rows-ranked {
	counter-reset: weekly-rank;
}

.weekly-rows-ranked > .weekly-row {
	counter-increment: weekly-rank;
}

.weekly-rows-ranked > .weekly-row > .weekly-row-link {
	padding-inline-start: 3.1rem;

	&::after {
		content: counter(weekly-rank, decimal-leading-zero);
		position: absolute;
		inset-block-start: clamp(0.95rem, 1.9vw, 1.3rem);
		inset-inline-start: 0.9rem;
		font-family: var(--font-mono);
		font-size: 0.76rem;
		letter-spacing: 0.02em;
		font-variant-numeric: tabular-nums;
		color: var(--muted-2);
	}
}

@media (max-width: 34rem) {
	.weekly-rows-ranked > .weekly-row > .weekly-row-link {
		padding-inline-start: 0.9rem;

		&::after {
			position: static;
			display: block;
			margin-block-end: 0.35rem;
		}
	}
}

/* ------------------------------------------------------------ the archive */
/*
	/weekly/ itself. Same rows, one level up: the span stands where a story's day stands,
	the week is the headline, and the count and the issue marker take the standing line.
*/

.week-list-issue {
	font-family: var(--font-display);
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--accent-text);
}

.week-list-count {
	color: var(--text);
}

.week-list-note {
	color: var(--muted);

	&::before {
		content: '\00b7';
		margin-inline-end: 0.5rem;
		color: var(--muted-2);
	}
}

/* The archive rows take the house accent on hover rather than a story's family, because a
   week holds every type at once and one type's hue would misdescribe it. */
.week-list > .weekly-row {
	--row-accent: var(--accent);
	--row-accent-text: var(--accent-text);
}

/* --------------------------------------------------------------- the empty */

.weekly-empty {
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-block: 1px solid var(--hairline);
	font-size: 0.98rem;
	line-height: 1.55;
	color: var(--muted);
	max-width: 60ch;
}

/* ----------------------------------------------------------- week to week */
/*
	The two neighbours and the way back to the archive. Older is on the left and newer on
	the right, which is the direction a reader walking backwards through an archive
	expects. A week with nothing either side keeps the empty column, so the archive link
	stays where it was on the page before.
*/

.weekly-nav {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: start;
	column-gap: clamp(0.75rem, 2vw, 1.5rem);
	margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
	padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem);
	border-block-start: 1px solid var(--hairline);
}

.weekly-nav-next {
	text-align: end;
}

.weekly-nav-link {
	display: grid;
	gap: 0.3rem;
	text-decoration: none;

	&:hover .weekly-nav-label {
		color: var(--accent-text);
	}
}

.weekly-nav-kicker {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--font-display);
	font-size: 0.66rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--muted-2);

	.icon {
		font-size: 0.8rem;
	}
}

.weekly-nav-next .weekly-nav-kicker {
	justify-content: flex-end;
}

.weekly-nav-label {
	font-size: 0.92rem;
	line-height: 1.35;
	color: var(--text);
}

.weekly-nav-all {
	font-family: var(--font-display);
	font-size: 0.72rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	color: var(--accent-text);
	text-decoration: none;
	border: 1px solid var(--hairline-bright);
	padding: 0.45rem 0.75rem;

	&:hover {
		border-color: var(--accent);
		color: var(--text);
	}
}

@media (max-width: 34rem) {
	.weekly-nav {
		grid-template-columns: 1fr;
		row-gap: 1.1rem;
		justify-items: start;
	}

	.weekly-nav-next {
		text-align: start;
	}

	.weekly-nav-next .weekly-nav-kicker {
		justify-content: flex-start;
	}
}

/* The same thumb-target floor the rest of the site's small pill links take
   (audited 2026-08-28). */
@media (width < 64rem) {
	.weekly-nav-all {
		display: inline-flex;
		align-items: center;
		min-height: 2.5rem;
	}
}