/* ============================================================
 * Responsive — breakpoint adjustments for tablet and mobile.
 * Loaded on every page so non-landing routes also adapt.
 * ============================================================ */

/* Tablet (1023px and below) */
@media (max-width: 1023px) {
	.site-nav { padding: 1.5rem 2rem; }
	.ch1, .ch2, .ch3, .ch4, .ch5, .ch6 { padding: 6rem 2rem; }
	.ch1-inner { gap: 4rem; }
	.hub-cards { gap: 1rem; }
	.pillars { gap: 1rem; }
	.site-footer__widgets { padding: 3rem 2rem 1.5rem; gap: 2rem; }
	.site-footer__bar { padding: 2rem; }
}

/* Mobile (768px and below) */
@media (max-width: 768px) {

	.site-nav { padding: 1.2rem 1.5rem; }
	.nav-menu {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: var(--ink);
		flex-direction: column;
		justify-content: center;
		align-items: center;
		gap: 2rem;
		z-index: 10;
		padding: 4rem 2rem;
	}
	.nav-menu.is-open { display: flex; }
	.nav-menu a { font-size: 1rem; }
	.nav-toggle { display: block; }

	.chapter-0 { padding: 0 1.5rem; }

	.ch1, .ch2, .ch3, .ch4, .ch5, .ch6 {
		padding: 6rem 1.5rem;
	}

	.ch1-inner {
		grid-template-columns: 1fr;
		gap: 3rem;
	}
	.ch1-visual { order: -1; }
	.portrait-bg { aspect-ratio: 4 / 3; }

	.pillars { grid-template-columns: 1fr; }

	.hub-cards { grid-template-columns: 1fr; }
	.hub-card.large {
		grid-column: auto;
		grid-template-columns: 1fr;
	}

	.journey-step {
		grid-template-columns: 80px 1fr;
		gap: 1.5rem;
	}

	.road-dots {
		flex-wrap: wrap;
		gap: 1rem;
	}
	.road-dots::before { display: none; }

	.site-footer__widgets {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.site-footer__bar {
		flex-direction: column;
		text-align: center;
	}

	body { cursor: auto; }
	.cursor, .cursor-ring { display: none; }
}

/* Small mobile (480px and below) */
@media (max-width: 480px) {
	.opening-eyebrow { font-size: 0.65rem; }
	.opening-subtitle { font-size: 0.95rem; }
	.ch1, .ch2, .ch3, .ch4, .ch5, .ch6 { padding: 5rem 1.2rem; }
	.hub-card { padding: 2rem 1.5rem; }
	.pillar { padding: 1.5rem 1.3rem; }
}