{{include "header.html"}}
{{include "nav.html"}}

<section class="min-h-[60vh] flex items-center justify-center bg-paper py-20">
  <div class="text-center max-w-md px-4">
    <div class="text-7xl md:text-9xl font-serif text-stone-300 mb-4">404</div>
    <h1 class="text-2xl md:text-3xl font-serif font-semibold text-ink mb-3">页面走丢了</h1>
    <p class="text-sm text-muted mb-8 leading-relaxed">您访问的页面不存在,或已经移走了。也许它正在工坊里被重新打磨。</p>
    <div class="flex flex-wrap justify-center gap-3">
      <a href="/" class="inline-block px-6 py-2.5 bg-ink text-white text-sm tracking-wider hover:bg-primary transition">返回首页</a>
      <a href="/shoes" class="inline-block px-6 py-2.5 border border-ink text-ink text-sm tracking-wider hover:bg-ink hover:text-white transition">看看鞋款</a>
    </div>
  </div>
</section>

{{include "footer.html"}}
{{include "js.html"}}