.grave-auto-hide-header {
	position: sticky;
	top: 0;

	/* Sticky always makes a stacking context, so the header needs a z-index of
	   its own: without it the mega-menu drawer opens underneath the page. */
	z-index: 100;
	transition-property: top;
	transition-duration: var(--wp--custom--motion--duration--base, 280ms);
	transition-timing-function: var(--wp--custom--motion--easing, ease);
}

.grave-auto-hide-header.is-hidden {
	top: calc(-1 * var(--grave-auto-hide-header-height, 100px));
}

@media (prefers-reduced-motion: reduce) {
	.grave-auto-hide-header {
		transition: none;
	}
}