CHANGELOG.md

@@ -20,6 +20,7 @@ Versioning: [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 - FAB stack rides above the on-screen keyboard on mobile via `interactive-widget=resizes-content` in the viewport meta tag (handled by Chrome on Android).
 - Layout: From / To dropdowns now occupy 2 columns at the top (was 3 columns including Model).
 - Model selector moved into a slide-out side drawer (hamburger menu in the top-left). Drawer opens from the left with a backdrop, closes via the X button, backdrop click, or `Esc`. Honours Android safe-area insets.
+- Page header (`h1 finrod` + tagline) removed from the main view to recover vertical space. The "Finrod" wordmark now lives only inside the side drawer, set in Cinzel (classical-inscription serif, loaded from Google Fonts) alongside the Star of Fëanor mark.
 - Default source language is now Dutch (was Auto-detect). Target stays English.
 - Crop modal:
   - No default crop box. User drags on the image to draw the region; falls back to full image if they confirm without drawing.

static/index.html

@@ -6,6 +6,7 @@
   <title>finrod — translator</title>
   <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cg fill='%23d4a566'%3E%3Cpath d='M16 1 L18 14 L31 16 L18 18 L16 31 L14 18 L1 16 L14 14 Z'/%3E%3Cpath d='M16 4 L22 16 L16 28 L10 16 Z' opacity='.55'/%3E%3C/g%3E%3C/svg%3E" />
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&display=block" />
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&display=swap" />
   <style>
     :root {
       color-scheme: light dark;
@@ -34,16 +35,26 @@
       background: var(--bg);
       color: var(--fg);
       margin: 0;
-      /* extra bottom padding so content scrolls clear of the stacked FABs */
+      /* Top padding (~3.5 rem) clears the fixed hamburger button.
-      padding: 2rem 1rem calc(9rem + env(safe-area-inset-bottom, 0px)) 1rem;
+         Bottom padding leaves room for the stacked FABs. */
+      padding: 3.5rem 1rem calc(9rem + env(safe-area-inset-bottom, 0px)) 1rem;
     }
     .wrap { max-width: 960px; margin: 0 auto; }
-    h1 {
+    /* Cinzel wordmark — only used inside the side drawer */
-      font-weight: 300;
+    .drawer-wordmark {
-      letter-spacing: 0.05em;
+      font-family: 'Cinzel', Georgia, serif;
-      margin: 0 0 0.25rem 0;
+      font-size: 1.9rem;
+      font-weight: 600;
+      letter-spacing: 0.08em;
+      color: var(--accent);
+      display: flex;
+      align-items: center;
+      gap: 0.55rem;
+      margin: 0;
+      text-transform: uppercase;
+      line-height: 1;
     }
-    .sub { color: var(--muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
+    .drawer-wordmark svg { width: 26px; height: 26px; }
     .controls {
       display: grid;
       grid-template-columns: 1fr 1fr;
@@ -114,14 +125,6 @@
       justify-content: space-between;
       margin-bottom: 0.5rem;
     }
-    .drawer-header h2 {
-      margin: 0;
-      font-size: 1rem;
-      font-weight: 500;
-      letter-spacing: 0.04em;
-      color: var(--muted);
-      text-transform: uppercase;
-    }
     .drawer-close {
       background: transparent;
       border: none;
@@ -488,7 +491,15 @@
   <div id="drawer-backdrop" class="drawer-backdrop"></div>
   <aside id="drawer" class="drawer" aria-hidden="true">
     <div class="drawer-header">
-      <h2>Settings</h2>
+      <div class="drawer-wordmark">
+        <svg viewBox="0 0 32 32" aria-hidden="true">
+          <g fill="currentColor">
+            <path d="M16 1 L18 14 L31 16 L18 18 L16 31 L14 18 L1 16 L14 14 Z"/>
+            <path d="M16 4 L22 16 L16 28 L10 16 Z" opacity=".55"/>
+          </g>
+        </svg>
+        <span>Finrod</span>
+      </div>
       <button type="button" id="drawer-close" class="drawer-close" aria-label="Close menu" title="Close">
         <span class="material-symbols-outlined">close</span>
       </button>
@@ -499,9 +510,6 @@
     </div>
   </aside>
   <div class="wrap">
-    <h1>finrod</h1>
-    <div class="sub">Translation via Ollama · loremaster of tongues</div>
-
     <div class="controls">
       <div>
         <label for="source">From</label>