/*
 * SITE — per-project styling. Loaded non-blocking.
 *
 * This is where a site's actual design lives: hero treatments, section
 * rhythm, one-off pages, brand flourishes. Nothing in here should be
 * expected by the shared block library.
 *
 * Start empty. Resist the urge to move things back into base.css unless a
 * second site genuinely needs them.
 */

@layer utilities {
	.text-center { text-align: center; }
	.text-muted { color: var(--color-ink-muted); }
	.measure { max-inline-size: var(--measure); }
	.stack-tight { --flow-space: var(--space-2xs); }
	.stack-loose { --flow-space: var(--space-xl); }

	.surface {
		background: var(--color-surface);
		color: var(--color-ink);
	}

	.inverse {
		background: var(--color-ink);
		color: var(--color-ink-inverse);
		--color-ink: var(--color-ink-inverse);
		--color-ink-muted: color-mix(in oklab, var(--color-ink-inverse) 70%, transparent);
	}
}

/*
 * Cross-document view transitions.
 *
 * Two declarations and every page-to-page navigation on the site gets a
 * smooth crossfade instead of a white flash. This is the single cheapest
 * thing you can do to close the perceived gap between a multi-page
 * WordPress site and a single-page app.
 *
 * Supported in Chromium and Safari; other browsers ignore it and navigate
 * normally, so there is no fallback to write.
 */
@view-transition {
	navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
	::view-transition-old(root) {
		animation-duration: var(--duration-base);
		animation-timing-function: var(--ease-out);
	}

	::view-transition-new(root) {
		animation-duration: var(--duration-base);
		animation-timing-function: var(--ease-out);
	}

	/* Keep the header visually fixed across the transition. */
	.site-header {
		view-transition-name: site-header;
	}
}