---
import Base from "../layouts/Base.astro";
---

<Base title="Page not found">
	<div class="not-found">
		<span class="not-found-code">404</span>
		<h1>Page not found</h1>
		<p>The page you're looking for doesn't exist or has been moved.</p>
		<div class="not-found-links">
			<a href="/" class="link-primary">Go home</a>
			<a href="/work" class="link-secondary">View our work</a>
		</div>
	</div>
</Base>

<style>
	.not-found {
		text-align: center;
		padding: var(--spacing-4xl) var(--spacing-lg);
		max-width: var(--max-width);
		margin: 0 auto;
	}

	.not-found-code {
		display: block;
		font-family: var(--font-serif);
		font-size: 8rem;
		font-weight: 500;
		line-height: 1;
		color: var(--color-border);
		margin-bottom: var(--spacing-lg);
	}

	.not-found h1 {
		font-family: var(--font-serif);
		font-size: var(--font-size-2xl);
		font-weight: 500;
		margin-bottom: var(--spacing-sm);
	}

	.not-found p {
		color: var(--color-muted);
		margin-bottom: var(--spacing-2xl);
	}

	.not-found-links {
		display: flex;
		gap: var(--spacing-md);
		justify-content: center;
	}

	.link-primary {
		padding: var(--spacing-sm) var(--spacing-lg);
		font-size: var(--font-size-sm);
		color: var(--color-bg);
		background: var(--color-text);
		text-decoration: none;
		border-radius: var(--radius);
		transition:
			background var(--transition-fast),
			transform var(--transition-fast);
	}

	.link-primary:hover {
		background: var(--color-accent);
		color: white;
		transform: translateY(-1px);
	}

	.link-secondary {
		padding: var(--spacing-sm) var(--spacing-lg);
		font-size: var(--font-size-sm);
		color: var(--color-text);
		text-decoration: none;
		border: 1px solid var(--color-border);
		border-radius: var(--radius);
		transition:
			border-color var(--transition-fast),
			transform var(--transition-fast);
	}

	.link-secondary:hover {
		border-color: var(--color-text);
		transform: translateY(-1px);
	}

	@media (max-width: 480px) {
		.not-found-code {
			font-size: 5rem;
		}

		.not-found-links {
			flex-direction: column;
		}
	}
</style>