#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 {
	font-size: clamp(2rem, 10vw, 8rem);
	font-weight: 400;
	letter-spacing: -0.04em;
	line-height: 1;
	transition: color 0.2s ease-in-out;
}

.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;
	}

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