#mega-menu {
	position: fixed;
	inset: 0;
	height: 100dvh;
	z-index: 35;
	display: flex;
	align-items: stretch;
	justify-content: center;
	padding-left: 1rem;
	padding-block: 0rem;
	background: #fff;
	opacity: 0;
	transform: translateY(-20px);
	pointer-events: none;
	user-select: none;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

#mega-menu.open {
	opacity: 1;
	transform: translateY(0);
	pointer-events: all;
}

.mega-menu-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

/* The overlay itself stays a fixed 100dvh — only the link list scrolls
   internally once it grows taller than the available space. Full width
   so the scrollbar sits flush against the right edge instead of hugging
   the text, and only appears once content actually overflows. */
#mega-menu .mega-menu-links {
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
}

.mega-menu-links a {
	display: inline-flex;
	align-items: center;
	gap: 0.15em;
	font-size: clamp(2rem, 10vw, 8rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
	transition: color 0.2s ease-in-out;
}

/* Marks links that open in a new tab (Pattern, Draw, Sequencer) —
   sized relative to the link's own font-size so it scales with the
   clamp() above at every breakpoint. */
.external-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 0.45em;
	height: 0.45em;
}

.external-icon svg {
	width: 100%;
	height: 100%;
}

.mega-menu-links a:hover {
	color: var(--primary);
}

.home-hero {
	position: fixed;
	inset: 0;
	height: 100dvh;
	padding-left: 1rem;
	padding-block: 0rem;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	overflow-y: auto;
	user-select: none;
}

/* External desktop-only project links (Pattern, Pixel, Sequencer)
   are hidden on small screens; the pages themselves also redirect
   away if opened directly on mobile. */
@media (max-width: 767px) {
	.desktop-only-link {
		/* display: none; */
		text-decoration: line-through;
		cursor: default;
		pointer-events: none;
	}

	.desktop-only-link .external-icon {
		display: none;
	}

	.mega-menu-links a.desktop-only-link:hover {
		color: inherit;
	}
}