.mk-menu {
	--ln: #253f52; --bs: 46px; --ll: 24px; --lw: 1.6px; --lg: 7px; --lgh: 8.5px;
	--pbg: #fff; --pbd: rgba(37, 63, 82, 0.12); --pw: 340px; --po: 23px; --pr: 20px; --pp: 10px;
	--lk: #253f52; --nm: #bc2026; --hv: #f1f5f9; --on: #253f52; --ont: #fff; --onn: #f0505f;
	position: relative; display: flex; justify-content: flex-end;
}

/* hamburger: a single span; the other two lines are box-shadows, which spread on hover and fold into an X when open */
.mk-menu .mk-menu__btn { display: grid; place-items: center; width: var(--bs); height: var(--bs); border-radius: 8px; }
.mk-menu__btn span { display: block; width: var(--ll); height: var(--lw); background: var(--ln); box-shadow: 0 var(--lg) 0 var(--ln), 0 calc(var(--lg) * -1) 0 var(--ln); transition: transform 0.3s, box-shadow 0.3s, background 0.2s; }
.mk-menu__btn:hover span { box-shadow: 0 var(--lgh) 0 var(--ln), 0 calc(var(--lgh) * -1) 0 var(--ln); }
.mk-menu.is-open .mk-menu__btn span { box-shadow: none; transform: rotate(45deg); }
.mk-menu.is-open .mk-menu__btn span::after { content: ''; display: block; width: var(--ll); height: var(--lw); background: var(--ln); transform: rotate(90deg); }

/* panel: fades and slides down 8px; the visibility delay lets the closing animation finish */
.mk-menu__nav {
	position: absolute; top: calc(100% + var(--po)); z-index: 60;
	width: min(var(--pw), calc(100vw - 32px)); display: flex; flex-direction: column;
	background: var(--pbg); border: 1px solid var(--pbd); border-radius: var(--pr); padding: var(--pp);
	box-shadow: 0 24px 60px rgba(22, 34, 44, 0.14);
	opacity: 0; visibility: hidden; transform: translate(var(--dx, 0px), -8px);
	transition: opacity 0.25s, transform 0.25s, visibility 0s 0.25s;
}
.mk-menu--right .mk-menu__nav { right: 0; }
.mk-menu--left .mk-menu__nav { left: 0; }
.mk-menu.is-open .mk-menu__nav { opacity: 1; visibility: visible; transform: translate(var(--dx, 0px), 0); transition: opacity 0.25s, transform 0.25s; }

.mk-menu__nav a { display: flex; align-items: baseline; gap: 16px; font: 500 17px var(--mk-font); padding: 13px 16px 13px calc(16px + var(--d, 0) * 16px); border-radius: 12px; color: var(--lk); transition: background 0.2s, color 0.2s; }
.mk-menu__nav a i { font: 500 11px var(--mk-mono); font-style: normal; letter-spacing: 0.12em; color: var(--nm); }
.mk-menu__nav a:hover, .mk-menu__nav a:focus { background: var(--hv); color: var(--lk); }
.mk-menu__nav a.on, .mk-menu__nav a.on:hover { background: var(--on); color: var(--ont); }
.mk-menu__nav a.on i { color: var(--onn); }

@media (prefers-reduced-motion: reduce) { .mk-menu__nav, .mk-menu__btn span { transition: none; } }