{% extends "base.html" %}

{% block content %}
<div class="md-content__inner" style="display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60vh;text-align:center;gap:1rem;">
  <p style="font-family:var(--font-header);font-size:5rem;font-weight:700;color:var(--text-faint);line-height:1;letter-spacing:-0.04em">404</p>
  <h1 style="font-family:var(--font-header);font-size:1.375rem;color:var(--text-heading);letter-spacing:-0.02em">Page not found</h1>
  <p style="color:var(--text-muted);font-size:0.9375rem;max-width:360px">
    The page you're looking for doesn't exist or may have been moved.
  </p>
  <a href="{{ config.site_url | default('/') | url }}" style="
    display:inline-block;
    margin-top:0.5rem;
    padding:0.5rem 1rem;
    font-family:var(--font-header);
    font-size:0.875rem;
    font-weight:600;
    color:var(--text-heading);
    background:var(--bg-elevated);
    border:1px solid var(--border);
    border-radius:var(--radius-sm);
    text-decoration:none;
    transition:border-color var(--transition);
  ">← Back to home</a>
</div>
{% endblock %}