/**
 * Homepage v2 — design recovery, 2026-10-01.
 * Spec: 00-CURRENT/DESIGN-RECOVERY-C1.md (repo).
 *
 * The numbers are the visual: large tabular figures in the accessible
 * sage, hairline rules instead of card boxes, no shadows, no pill
 * buttons. Sections separate by rules and space, not by background
 * colour, except the masthead (primary-soft) and the trust band (beige).
 */

.sp2-top {
	background: var(--sp-color-primary-soft);
	border-bottom: var(--sp-border-width) solid var(--sp-color-border);
}

.sp2-top__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding: var(--sp-space-7) var(--sp-space-4) var(--sp-space-6);
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: var(--sp-space-7);
	align-items: end;
}

.sp2-mast__line {
	font-family: inherit;
	font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.02em;
	color: var(--sp-color-text);
	margin: 0 0 var(--sp-space-3);
	word-break: keep-all;
}

/* Two clauses that only break between each other, never mid-clause. */
.sp2-mast__line span {
	display: inline-block;
}

.sp2-mast__sub {
	font-size: var(--sp-font-size-base);
	color: var(--sp-color-text-muted);
	margin: 0 0 var(--sp-space-5);
	word-break: keep-all;
	max-width: 34em;
}

.sp2-mast__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-space-1) var(--sp-space-4);
	font-size: var(--sp-font-size-sm);
	font-weight: 600;
}

.sp2-mast__links a {
	color: var(--sp-color-link-accessible);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}

.sp2-mast__links a:hover {
	color: var(--sp-color-text);
}

/* Lead story: the number first, then what it means, then the headline. */
.sp2-lead {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-2);
	padding-top: var(--sp-space-4);
	border-top: 3px solid var(--sp-color-text);
	color: var(--sp-color-text);
	text-decoration: none;
}

.sp2-lead__label {
	font-size: var(--sp-font-size-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--sp-color-link-accessible);
}

.sp2-stat {
	display: block;
	font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums;
	color: var(--sp-color-link-accessible);
	white-space: nowrap;
}

.sp2-stat--lead {
	font-size: clamp(2.75rem, 2rem + 3vw, 4.25rem);
}

.sp2-lead__note {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	word-break: keep-all;
	max-width: 36em;
}

.sp2-lead__title {
	font-size: var(--sp-font-size-xl);
	font-weight: 700;
	line-height: var(--sp-line-height-heading);
	word-break: keep-all;
	margin-top: var(--sp-space-2);
}

.sp2-lead:hover .sp2-lead__title,
.sp2-stories a:hover .sp2-stories__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.sp2-lead__meta {
	font-size: var(--sp-font-size-xs);
	color: var(--sp-color-text-muted);
}

/* Stories: three columns separated by rules, not boxed. */
.sp2-stories {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-space-6);
}

.sp2-stories li {
	margin: 0;
	border-top: 2px solid var(--sp-color-text);
	padding-top: var(--sp-space-4);
}

.sp2-stories a {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-2);
	color: var(--sp-color-text);
	text-decoration: none;
}

.sp2-stories__note {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	word-break: keep-all;
}

.sp2-stories__title {
	font-size: var(--sp-font-size-lg);
	font-weight: 700;
	line-height: var(--sp-line-height-heading);
	word-break: keep-all;
}

/* Guide index: a reference table in list form. */
.sp2-index__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--sp-space-7);
	border-top: var(--sp-border-width) solid var(--sp-color-border);
}

.sp2-index__list li {
	margin: 0;
	border-bottom: var(--sp-border-width) solid var(--sp-color-border);
}

.sp2-index__list a {
	display: grid;
	grid-template-columns: 6.5em minmax(0, 1fr) auto;
	gap: var(--sp-space-3);
	align-items: baseline;
	padding: var(--sp-space-3) 0;
	color: var(--sp-color-text);
	text-decoration: none;
}

.sp2-index__item {
	font-weight: 700;
	word-break: keep-all;
}

.sp2-index__number {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	word-break: keep-all;
}

.sp2-index__arrow {
	color: var(--sp-color-link-accessible);
}

.sp2-index__list a:hover .sp2-index__item {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Latest: dated list. */
.sp2-latest__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: var(--sp-border-width) solid var(--sp-color-border);
}

.sp2-latest__list li {
	display: grid;
	grid-template-columns: 9.5em minmax(0, 1fr) auto;
	gap: var(--sp-space-4);
	align-items: baseline;
	margin: 0;
	padding: var(--sp-space-3) 0;
	border-bottom: var(--sp-border-width) solid var(--sp-color-border);
}

.sp2-latest__list time,
.sp2-latest__cat {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sp2-latest__list a {
	font-weight: 600;
	color: var(--sp-color-text);
	text-decoration: none;
	word-break: keep-all;
}

.sp2-latest__list a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Same-day rows: their <time> is visually hidden (absolutely positioned,
   so out of the grid), which would slide the title into the date track.
   Pin title and category to their own tracks so the date column stays
   empty; on mobile the list is one column and the row tucks up instead. */
.sp2-latest__list li.sp2-latest__same-day a {
	grid-column: 2;
}

.sp2-latest__list li.sp2-latest__same-day .sp2-latest__cat {
	grid-column: 3;
}

/* Tools: one row, no boxes, no orphan card. */
.sp2-tools__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: var(--sp-space-5);
}

.sp2-tools__list li {
	margin: 0;
	border-top: var(--sp-border-width) solid var(--sp-color-text);
	padding-top: var(--sp-space-3);
}

.sp2-tools__list a {
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-1);
	text-decoration: none;
	color: var(--sp-color-text);
}

.sp2-tools__title {
	font-weight: 700;
	word-break: keep-all;
}

.sp2-tools__desc {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	word-break: keep-all;
}

.sp2-tools__list a:hover .sp2-tools__title {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Trust band. */
/* The band is inset to the content column (the section's own 16px side
   padding), so its tinted edge lines up with every rule above it instead
   of sticking out past them; the bottom margin is the footer gap. */
.sp2-trust {
	box-sizing: border-box;
	width: calc(100% - 2 * var(--sp-space-4));
	max-width: calc(1200px - 2 * var(--sp-space-4));
	margin: var(--sp-space-6) auto var(--sp-space-6);
	background: var(--sp-color-beige);
	border-radius: var(--sp-radius-sm);
	padding: var(--sp-space-6) var(--sp-space-5);
}

.sp2-trust .salimpick-section-heading {
	margin-bottom: var(--sp-space-4);
}

.sp2-trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--sp-space-5);
}

.sp2-trust__list li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-space-1);
}

.sp2-trust__list span {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	word-break: keep-all;
}

.sp2-top a:focus-visible,
.sp2-numbers a:focus-visible,
.sp2-index a:focus-visible,
.sp2-latest a:focus-visible,
.sp2-tools a:focus-visible {
	outline: 2px solid var(--sp-color-link-accessible);
	outline-offset: 3px;
}

@media (max-width: 899px) {
	.sp2-top__inner {
		grid-template-columns: 1fr;
		gap: var(--sp-space-6);
		padding-top: var(--sp-space-6);
	}

	.sp2-stories {
		grid-template-columns: 1fr;
		gap: var(--sp-space-5);
	}

	.sp2-index__list {
		grid-template-columns: 1fr;
	}

	.sp2-trust__list {
		grid-template-columns: 1fr;
	}
}

/* Tablet: the stories become stat rows -- number on the left, meaning and
   headline on the right -- instead of one narrow column per story. */
@media (min-width: 600px) and (max-width: 899px) {
	.sp2-stories a {
		display: grid;
		grid-template-columns: 11.5rem minmax(0, 1fr);
		column-gap: var(--sp-space-5);
		row-gap: var(--sp-space-1);
		align-items: baseline;
	}

	.sp2-stories .sp2-stat {
		grid-row: 1 / span 2;
		font-size: 1.625rem;
	}

	.sp2-stories__title {
		grid-column: 2;
	}
}

@media (max-width: 599px) {
	.sp2-top__inner {
		padding: var(--sp-space-5) var(--sp-space-4);
		gap: var(--sp-space-5);
	}

	.sp2-mast__sub {
		display: none;
	}

	.sp2-index__list a {
		grid-template-columns: 5.5em minmax(0, 1fr) auto;
	}

	.sp2-latest__list li {
		grid-template-columns: 1fr;
		gap: 2px;
	}

	.sp2-latest__list li.sp2-latest__same-day {
		padding-top: var(--sp-space-2);
	}

	.sp2-latest__list li.sp2-latest__same-day a {
		grid-column: 1;
	}

	.sp2-latest__cat {
		display: none;
	}

	.sp2-trust {
		padding: var(--sp-space-5) var(--sp-space-4);
	}
}

/* Situation entry points (2026-10-08, C17): readers start from a
   situation, not from a number. Same editorial vocabulary as the tools
   list -- a hairline rule over each block, bold label, muted line, plain
   text links -- no card shadows, icons or tinted boxes. */
.sp2-situations__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: var(--sp-space-6) var(--sp-space-5);
}

.sp2-situations__list > li {
	margin: 0;
	border-top: 2px solid var(--sp-color-primary);
	padding-top: var(--sp-space-3);
}

.sp2-situations__label {
	font-size: var(--sp-font-size-lg);
	line-height: var(--sp-line-height-heading);
	margin: 0;
	word-break: keep-all;
}

.sp2-situations__desc {
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	margin: var(--sp-space-1) 0 var(--sp-space-3);
	word-break: keep-all;
}

.sp2-situations__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp2-situations__links li + li {
	margin-top: var(--sp-space-2);
}

.sp2-situations__links a {
	color: var(--sp-color-text);
	text-decoration: none;
	word-break: keep-all;
}

.sp2-situations__links a::after {
	content: " →";
	color: var(--sp-color-link-accessible);
}

.sp2-situations__links a:hover,
.sp2-situations__links a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}