{# brutalist page-suggestions override — themed 404. Fields: title, emptyMessage, showDescription. NOTE: the builtin computes `suggestions` via a server-side SearchSimilarPages DB query keyed on the requested path; that data is NOT exposed to codeless templates, so the dynamic suggestion list cannot be reproduced here (WO limitation). The `{% for %}` below renders defensively if the host ever supplies `suggestions`; otherwise the themed 404 chrome + a way home is shown. #}
<section class="bru-section bg-background text-foreground{% if class %} {{ class }}{% endif %}">
<div class="bru-wrap-mid text-center">
  <p class="bru-kicker text-accent" style="font-size:clamp(4rem,18vw,11rem);line-height:0.85">404</p>
  <h2 class="bru-kicker mt-4" style="font-size:clamp(1.5rem,3.5vw,2.5rem)">{{ title|default:"Page not found" }}</h2>
  {% if suggestions %}
  <div class="mt-10 grid grid-cols-1 gap-5 sm:grid-cols-2 text-left">
    {% for s in suggestions %}
    <a href="/{{ s.Slug }}" class="bru-slab bru-shadow bru-hover block p-5">
      <h3 class="bru-kicker" style="font-size:1.1rem;text-transform:none">{{ s.Title }}</h3>
      {% if showDescription and s.Excerpt %}<p class="mt-2 text-sm text-muted-foreground">{{ s.Excerpt }}</p>{% endif %}
    </a>
    {% endfor %}
  </div>
  {% elif emptyMessage %}
  <p class="mt-6 text-lg text-muted-foreground mx-auto" style="max-width:38rem">{{ emptyMessage }}</p>
  {% endif %}
  <div class="mt-10"><a href="/" class="bru-btn bru-btn-solid">Back to home</a></div>
</div>
</section>