{{!< default}}

<section class="container mx-auto px-4 py-20 md:py-32 flex flex-col items-center justify-center text-center animate-fadeInUp">
    <h1 class="text-9xl font-bold tracking-tighter text-[var(--brand-primary)] opacity-20 mb-4">404</h1>
    <h2 class="text-4xl md:text-6xl font-bold mb-6">Page Not Found</h2>
    <p class="text-xl md:text-2xl text-[var(--text-secondary)] max-w-lg mb-12 font-serif italic">
        The page you are looking for might have been moved, removed, or is temporarily unavailable.
    </p>
    
    <a href="{{@site.url}}" class="btn-primary">
        Return Home
    </a>

    {{#get "posts" limit="3" include="tags,authors"}}
        {{#if posts}}
            <div class="mt-24 w-full">
                <h3 class="text-2xl font-bold mb-10 text-[var(--text-tertiary)] uppercase tracking-widest">Perhaps read something else?</h3>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
                    {{#foreach posts}}
                        {{> "post-card"}}
                    {{/foreach}}
                </div>
            </div>
        {{/if}}
    {{/get}}
</section>