html {
	scroll-behavior: smooth;
}

body {
	font-family: 'Space Grotesk', sans-serif;
}

.font-mono-custom {
	font-family: 'Space Mono', monospace;
}

#particles {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}

@keyframes slideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@keyframes slideDown {
	from { transform: translateY(0); }
	to   { transform: translateY(100%); }
}

.details-overlay {
	animation: slideUp 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.details-overlay.closing {
	animation: slideDown 0.35s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.grain::before {
	content: '';
	position: fixed;
	inset: -50%;
	width: 200%;
	height: 200%;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 1;
	opacity: 0.12;
}

.hero-headline {
	font-size: clamp(2rem, 10vw, 7rem);
	font-weight: 700;
	line-height: 0.92;
	letter-spacing: -0.03em;
}

.nav-link {
	position: relative;
}

.nav-link:hover {
	text-decoration: underline;
	text-decoration-style: dashed;
	text-underline-offset: 4px;
}

.cta-btn {
	border: 1px dashed rgba(14, 14, 14, 0.25);
	transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.cta-btn:hover {
	background: #0e0e0e;
	color: #F2F0EB;
	border-color: #0e0e0e;
}

.scroll-line {
	width: 1px;
	height: 60px;
	background: linear-gradient(to bottom, transparent, rgba(14, 14, 14, 0.4));
	animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
	0%, 100% { opacity: 0.3; transform: scaleY(1); }
	50% { opacity: 1; transform: scaleY(1.2); }
}

.tag-pill {
	border: 1px dashed rgba(14, 14, 14, 0.25);
	background: rgba(14, 14, 14, 0.03);
}

/* Projects grid — 1 col mobile, 2 col md+ */
.projects-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 768px) {
	.projects-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Burger → X animation */
#burger-btn.open .burger-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#burger-btn.open .burger-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
#burger-btn.open .burger-bar:nth-child(3) { width: 1.5rem; transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu-drawer {
	max-height: 0;
	overflow: hidden;
	background: #F2F0EB;
	transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu-drawer.open {
	max-height: 400px;
	border-bottom: 1px dashed rgba(14, 14, 14, 0.15);
}