:root {
	--nr-duration: 220ms;
	--nr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.nr-card:hover,
	.nr-work-card:hover .nr-work-card__frame {
		transform: none !important;
	}
}

/*
 * The design draws exactly one focus state (the contact fields' rose
 * underline, forms.css). Everything else is ours.
 *
 * A single-colour ring cannot clear 3:1 on every surface this site draws:
 * the burnt-orange ring it replaced measured 1.00:1 on the Elsewhere
 * footer, 2.28:1 on teal and 2.33:1 on lime. This one is two-tone — a 3px
 * ink outline with a 2px off-white band either side of it (the box-shadow
 * fills the outline-offset gap and extends 2px past the outline). Ink
 * clears 3:1 on off-white, cream, lime and orange; off-white on ink and
 * teal (tokens.css, decisions-log "Focus ring"). Forced-colours mode drops
 * the box-shadow and keeps the outline, in the system colour.
 */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: 3px solid var(--nr-focus-ring);
	outline-offset: 2px;
	box-shadow: 0 0 0 7px var(--nr-focus-inner);
	border-radius: 2px;
}

/*
 * Buttons and button-styled links set their own box-shadow (theme.json's
 * button shadow; `box-shadow: none` on the outline variants, at up to
 * 0,4,0), which would silently drop the off-white band that makes the ring
 * visible on ink. A focus indicator is the one place this file overrides
 * that on purpose.
 */
:where(a, button):focus-visible {
	box-shadow: 0 0 0 7px var(--nr-focus-inner) !important;
}