/* ==========================================================================
   Mobile / full-screen menu
   ========================================================================== */

.menu {
	position: fixed;
	inset: 0;
	z-index: var(--z-menu);
	display: flex;
	background: var(--ace-navy-deep);
	color: var(--ace-ivory);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition:
		clip-path 900ms var(--ease-premium),
		visibility 0s linear 900ms;
	overflow-y: auto;
}

.menu.is-open {
	clip-path: inset(0 0 0 0);
	visibility: visible;
	transition: clip-path 900ms var(--ease-premium), visibility 0s;
}

.menu__inner {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-6);
	min-height: 100%;
	padding-top: calc(var(--header-h) + var(--space-6));
	padding-bottom: var(--space-6);
}

.menu__list {
	counter-reset: menu;
	border-top: var(--hairline-inverse);
}

.menu__list li {
	counter-increment: menu;
	border-bottom: var(--hairline-inverse);
	overflow: hidden;
}

.menu__list a {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	padding-block: clamp(0.75rem, 2.2vh, 1.25rem);
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.4rem + 3.5vw, 3.5rem);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: var(--tracking-display);
	transform: translate3d(0, 100%, 0);
	transition: transform 900ms var(--ease-premium), color var(--dur-fast);
}

.menu__list a::before {
	content: counter(menu, decimal-leading-zero);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	letter-spacing: 0.12em;
	color: var(--ace-gold-soft);
}

.menu__list a:hover {
	color: var(--ace-gold-soft);
}

.menu.is-open .menu__list a {
	transform: none;
}

.menu.is-open .menu__list li:nth-child(1) a { transition-delay: 200ms; }
.menu.is-open .menu__list li:nth-child(2) a { transition-delay: 260ms; }
.menu.is-open .menu__list li:nth-child(3) a { transition-delay: 320ms; }
.menu.is-open .menu__list li:nth-child(4) a { transition-delay: 380ms; }
.menu.is-open .menu__list li:nth-child(5) a { transition-delay: 440ms; }
.menu.is-open .menu__list li:nth-child(6) a { transition-delay: 500ms; }

.menu__meta {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	opacity: 0;
	transition: opacity 600ms var(--ease-standard);
}

.menu.is-open .menu__meta {
	opacity: 1;
	transition-delay: 500ms;
}

.menu__meta .eyebrow {
	margin-bottom: var(--space-2);
	color: var(--text-inverse-muted);
}

.menu__contact {
	align-self: flex-start;
	font-size: var(--fs-lead);
}

.menu__tagline {
	margin-top: var(--space-4);
	font-size: var(--fs-xs);
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--text-inverse-muted);
}

.menu-open {
	overflow: hidden;
}