/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
	/* Kill all transitions and animations globally */
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		transition-delay: 0ms !important;
		scroll-behavior: auto !important;
	}

	/* Scroll-driven animations (projects.css) — show content immediately */
	.case-section,
	.case-img,
	.case-img-grid,
	video,
	.case-section__title,
	.case-cols > * {
		opacity: 1 !important;
		transform: none !important;
		animation: none !important;
	}

	/* Core values star spin + value reveals (about.css) */
	.about-values__star-wrap {
		animation: none !important;
	}

	.value-item {
		animation: none !important;
	}

	/* Show all value items at once since there's no animation to sequence them */
	.value-item:nth-child(1),
	.value-item:nth-child(2),
	.value-item:nth-child(3) {
		opacity: 1 !important;
		transform: none !important;
		position: relative !important;
	}

	/* Logo spin-in (common.css) */
	.animate-on-load {
		animation: none !important;
	}

	/* Footer star spin */
	.site-footer__mark.do-spin {
		animation: none !important;
	}

	/* Hamburger menu */
	.ham line {
		transition: none !important;
	}

	/* Nav drawer */
	#main-nav {
		transition: none !important;
	}

	/* Header hide/show on scroll */
	.site-header {
		transition: none !important;
	}
}

/* Breakpoint matches --breakpoint-md (48rem) in common.css */
@media (width > 768px) {
	/* Desktop: 1.2× typographic base (14.4px); keeps prior ratio vs 16px→19.2px */
	html {
		font-size: 1.2rem;
	}

	.site-header {
		flex-wrap: nowrap;
	}

	/* Desktop: keep off-canvas, but make it a drawer */
	#main-nav {
		/* width: 25vw; */
	}

	main .projects ul {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-3xl);
		padding-left: var(--space-3xl);
		padding-right: var(--space-3xl);
		align-items: start;
	}

	.site-footer {
		height: var(--height-footer-desktop-vh);
		flex-direction: row-reverse;
	}
}