SEO polish: OG image, favicons, 404, article schema, image optimization

- Add branded 1200x630 og-default.jpg; article pages use their hero as
  og:image, others use the default
- Wire the existing (previously unlinked) favicon set into every page
- Add branded 404.html with root-absolute paths + noindex
- Emit Article + localized BreadcrumbList JSON-LD on all article pages
- Convert 74 heavy served photos to WebP (28MB -> 8.5MB, -70%), rewrite
  references, add loading=lazy/decoding=async to below-fold images and
  fetchpriority=high to heroes (protect LCP)
- Stop tracking images/original/ (458MB of unused source masters; kept on
  disk, gitignored) and ignore .playwright-mcp/

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

404.html

@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Page not found - MSOS</title>
+    <meta name="robots" content="noindex">
+
+    <!-- Root-absolute paths: a 404 is served under the requested URL, so
+         relative paths would resolve against the wrong directory. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer">
+    <link rel="stylesheet" href="/css/main.css">
+
+    <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg">
+    <link rel="shortcut icon" href="/favicon.ico">
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+    <link rel="manifest" href="/site.webmanifest">
+
+    <style>
+        .nf-wrap { min-height: 82vh; display: flex; align-items: center; justify-content: center; padding: 80px 24px; }
+        .nf-card { max-width: 560px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; }
+        .nf-card img { width: 240px; max-width: 70%; height: auto; margin-bottom: 24px; }
+        .nf-code { font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #2D738C; margin: 0; }
+        .nf-card h1 { font-size: 40px; line-height: 1.15; color: #101828; margin: 8px 0 0; }
+        .nf-card p.nf-lead { font-size: 18px; line-height: 28px; color: #667085; margin: 12px 0 28px; }
+        .nf-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
+        .nf-links { margin-top: 28px; font-size: 15px; color: #667085; }
+        .nf-links a { color: #2D738C; font-weight: 500; text-decoration: none; margin: 0 8px; }
+        .nf-links a:hover { text-decoration: underline; }
+        @media (max-width: 600px){ .nf-card h1 { font-size: 30px; } }
+    </style>
+</head>
+<body>
+    <main class="nf-wrap">
+        <div class="nf-card">
+            <a href="/en/"><img loading="lazy" decoding="async" src="/images/1-logo.png" alt="Macedonian Student Organisation in Slovenia"></a>
+            <p class="nf-code">404 error</p>
+            <h1>Page not found</h1>
+            <p class="nf-lead">The page you're looking for doesn't exist or may have moved. Let's get you back on track.</p>
+            <div class="nf-actions">
+                <a href="/en/" class="btn btn-primary">Go to homepage</a>
+                <a href="/en/student-welcome-guide/" class="btn btn-secondary">Student welcome guide</a>
+            </div>
+            <p class="nf-links">
+                <a href="/en/projects/">Events &amp; projects</a>·
+                <a href="/en/blog/">Blog</a>·
+                <a href="/en/news/">News</a>·
+                <a href="/en/faq/">FAQs</a>
+            </p>
+            <p class="nf-links" style="margin-top:12px;">
+                <a href="/mk/">Македонски</a>·
+                <a href="/si/">Slovenščina</a>
+            </p>
+        </div>
+    </main>
+</body>
+</html>