/* ============================================================
 * Chapter 4 — De Hub. Cream background, four-card grid with one
 * large featured card. Cards invert to dark on hover.
 * ============================================================ */

.ch4 {
	min-height: 100vh;
	background: var(--cream);
	color: var(--ink);
	padding: 8rem 4rem;
	position: relative;
	overflow: hidden;
}

.ch4-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.ch4 .chapter-label { color: var(--ember); }
.ch4 .chapter-label::before { background: var(--ember); }
.ch4 .story-title { color: var(--ink); }

.hub-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	margin-top: 4rem;
}

.hub-card {
	background: var(--parchment);
	border-radius: 8px;
	padding: 2.8rem;
	position: relative;
	overflow: hidden;
	transition: all 0.4s cubic-bezier(.22, 1, .36, 1);
}
.hub-card:hover {
	background: var(--ink);
	color: var(--cream);
	transform: scale(1.02);
}
.hub-card:hover .hub-card-title { color: var(--ember); }
.hub-card:hover .hub-card-body { color: rgba(250, 244, 236, 0.7); }

.hub-card-icon {
	font-size: 2.5rem;
	margin-bottom: 1.5rem;
	display: block;
}
.hub-card-title {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 1.6rem;
	font-weight: 600;
	color: var(--ink);
	margin-bottom: 0.8rem;
	transition: color 0.4s;
}
.hub-card-body {
	font-size: 0.93rem;
	line-height: 1.8;
	color: rgba(26, 15, 10, 0.65);
	font-weight: 300;
	transition: color 0.4s;
}

.hub-card.large {
	grid-column: span 2;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: center;
}
.hub-card.large .hub-card-stat {
	text-align: center;
}
.hub-card.large .hub-card-stat .big-num {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-size: 7rem;
	font-weight: 300;
	color: var(--ember);
	line-height: 1;
	display: block;
}
.hub-card.large .hub-card-stat p {
	font-size: 0.9rem;
	color: rgba(26, 15, 10, 0.6);
	font-weight: 300;
}
.hub-card.large:hover .hub-card-stat p { color: rgba(250, 244, 236, 0.6); }