---
import Base from '../layouts/Base.astro';
---
<Base title="CTAO Science Portal - Page not found" description="This page does not exist">
  {/* Document archetype (DESIGN.md): the document IS the page — h1, one line,
      recovery links, and a real GET search form as the way forward. */}
  <div class="container article-layout">
    <article class="article">
      <h1>Page not found</h1>
      <div class="prose">
        {/* Keep "the <a>" on one line: the compiler drops the whitespace at a
            line break before a tag, which glued "the" to the link text. */}
        <p>The address may be mistyped or the page may have moved.
          Go to the <a href="/">home page</a> or browse <a href="/news">all news</a>.</p>
      </div>
      <form class="search-form" role="search" action="/search" method="get">
        <label class="sr-only" for="nf-q">Search news</label>
        <svg class="ico search-ico" aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-4.3-4.3" /></svg>
        <input id="nf-q" name="q" type="search" placeholder="Search news…" autocomplete="off" />
        <button class="btn" type="submit">Search</button>
      </form>
    </article>
  </div>
</Base>