feat(404): randomise between core design and jolie lara croft stills

- NotFoundView now picks one of two on-theme Lara Croft images per
visit: the classic TR1 render by Core Design (jungle palette, fits
the site's green theme) and the 2001 film promotional still of
Angelina Jolie in full Lara costume
- Each variant carries its own attribution line: CC BY-NC-SA 4.0
credit for the Core Design render via Raiding The Globe, and an
honest non-commercial fan-site disclosure for the Paramount film
still via the Guardian
- Responsive layout: image + copy side-by-side on desktop, stacks
and centres below 640px

src/frontend/src/views/NotFoundView.vue

@@ -1,11 +1,70 @@
 <script setup>
 import { RouterLink } from 'vue-router'
+
+const variants = [
+  {
+    src: '/lara.jpg',
+    alt: 'Lara Croft, classic Core Design render',
+    credit: 'Lara Croft render by Core Design, via',
+    sourceLabel: 'Raiding The Globe',
+    sourceHref: 'https://raidingtheglobe.com/gallery/core-design/tomb-raider-1/renders',
+    licenseLabel: 'CC BY-NC-SA 4.0',
+    licenseHref: 'https://creativecommons.org/licenses/by-nc-sa/4.0/',
+  },
+  {
+    src: '/jolie.jpg',
+    alt: 'Angelina Jolie as Lara Croft, Lara Croft: Tomb Raider (2001)',
+    credit: 'Film still: Lara Croft: Tomb Raider (2001), © Paramount Pictures — shown here under non-commercial fan-site usage, via',
+    sourceLabel: 'The Guardian',
+    sourceHref: 'https://www.theguardian.com/film/2001/jul/06/angelinajolie',
+    licenseLabel: '',
+    licenseHref: '',
+  },
+]
+
+const pick = variants[Math.floor(Math.random() * variants.length)]
 </script>
 
 <template>
-  <div class="ui segment">
-    <h1 class="ui header">404 — Page not found</h1>
-    <p class="muted">The tomb you seek lies elsewhere.</p>
-    <RouterLink to="/" class="ui button primary">Back to home</RouterLink>
+  <div class="ui segment not-found">
+    <div class="not-found-inner">
+      <img class="not-found-img" :src="pick.src" :alt="pick.alt" />
+      <div class="not-found-text">
+        <h1 class="ui header">404 — Page not found</h1>
+        <p class="muted">The tomb you seek lies elsewhere.</p>
+        <RouterLink to="/" class="ui button primary">Back to home</RouterLink>
+        <p class="attribution muted">
+          {{ pick.credit }}
+          <a :href="pick.sourceHref" target="_blank" rel="noopener">{{ pick.sourceLabel }}</a><template v-if="pick.licenseLabel">.
+          Used under
+          <a :href="pick.licenseHref" target="_blank" rel="noopener">{{ pick.licenseLabel }}</a></template>.
+        </p>
+      </div>
+    </div>
   </div>
 </template>
+
+<style scoped>
+.not-found { padding: 2rem !important; }
+.not-found-inner {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.not-found-img {
+  width: clamp(200px, 35vw, 360px);
+  height: auto;
+  border-radius: 8px;
+  border: 2px solid var(--primary);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+  flex-shrink: 0;
+}
+.not-found-text { max-width: 480px; }
+.attribution { margin-top: 1.5rem; font-size: 0.8em; }
+
+@media (max-width: 640px) {
+  .not-found-inner { flex-direction: column; text-align: center; }
+}
+</style>