/**
 * Zone Six Worlds — the shell.
 *
 * The one constant under every world: Barlow for reading, Barlow Condensed for display,
 * the Zone Six blue, and the six-colour rule. Every rule here is scoped to .zsw or a
 * zsw- class so nothing leaks into Soledad's own styles.
 */

.zsw {
	--zsw-ink: #15141a;
	--zsw-ink-soft: #4d4957;
	--zsw-ink-faint: #75717f;
	--zsw-paper: #f7f6f2;
	--zsw-blue: #3b96e6;
	--zsw-black: #14121a;

	--zsw-mv: #C8102E;
	--zsw-who: #534AB7;
	--zsw-bt: #1D9E75;
	--zsw-dune: #BA7517;
	--zsw-wot: #378ADD;
	--zsw-lit: #639922;

	--zsw-gut: clamp(16px, 4vw, 56px);

	box-sizing: border-box;
	font-family: 'Barlow', 'Segoe UI', system-ui, sans-serif;
	color: var(--zsw-ink);
}

.zsw *,
.zsw *::before,
.zsw *::after {
	box-sizing: border-box;
}

/**
 * A default for links, not a rule — hence :where(), which has zero specificity.
 *
 * Written as `.zsw a` this counted a class and an element, which outranked any rule
 * written as a single class. Every world card is itself an <a>, so the card's own
 * colour — `.zsw-card--battletech { color: #e6ecea }` — lost to `color: inherit`, and
 * the card took the page's dark ink instead. On the three dark cards (BattleTech,
 * Wheel of Time, LitRPG) that meant dark text on a dark card: 1.1:1 contrast, which
 * is to say unreadable. Marvel and Dune only escaped because their cards are light.
 */
:where(.zsw) a {
	text-decoration: none;
	color: inherit;
}

.zsw :focus-visible {
	outline: 3px solid var(--zsw-blue);
	outline-offset: 3px;
}

/* Condensed display face, used for the plain-shell headings. */
.zsw .z6c,
.zsw-sec__title {
	font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	font-weight: 700;
}

/* Section heading row: title on the left, a "see all" link on the right. */
.zsw-sec__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 0 0 26px;
}

.zsw-sec__title {
	margin: 0;
	font-size: clamp(30px, 5vw, 56px);
	line-height: 1;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.zsw-sec__more {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--zsw-blue);
}

.zsw-sec__more:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* The six-colour rule from under the logo. */
.zsw-uni {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	height: 5px;
}

.zsw-uni span:nth-child(1) { background: var(--zsw-mv); }
.zsw-uni span:nth-child(2) { background: var(--zsw-who); }
.zsw-uni span:nth-child(3) { background: var(--zsw-bt); }
.zsw-uni span:nth-child(4) { background: var(--zsw-dune); }
.zsw-uni span:nth-child(5) { background: var(--zsw-wot); }
.zsw-uni span:nth-child(6) { background: var(--zsw-lit); }

.zsw-count {
	font-variant-numeric: tabular-nums;
}

/* The hover lift shared by every card in every world. */
.zsw .lift {
	transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.zsw .lift:hover {
	transform: translateY(-8px);
}

/**
 * Motion is decorative everywhere in this plugin — no animation carries meaning that
 * isn't also in the markup — so it all goes when a reader asks for less.
 */
@media (prefers-reduced-motion: reduce) {
	.zsw *,
	.zsw *::before,
	.zsw *::after {
		animation-duration: .001s !important;
		animation-iteration-count: 1 !important;
		animation-delay: 0s !important;
		transition: none !important;
	}
}