design: atmospheric redesign mockups (login + SPA, six dusks)

Self-contained HTML/CSS mockups proposing the brand-as-surface direction:
- Camogli harbor photo as the permanent backdrop on every authenticated view
- Six user themes rebuilt as atmospheric "dusks" (tinted overlays + accents)
  instead of cream variants
- Frosted-glass cards on top of the photo
- Same type system (Marcellus / Cormorant Garamond italic / Nunito body)
  shared between login and in-app

Includes:
- login-cinematic.html: canonical pre-auth example with Ken-Burns + grain
- spa/home.html, library.html, settings.html: in-app views with the new chrome
- spa/_tokens.css + _chrome.css: dusk system and frosted-glass primitives
- favicons/A-D: in-progress icon directions
- README.md with serving instructions and the porting checklist

Saved as a durable design artifact so the iteration survives /tmp wipes
and can be referred back to when porting to Vue.

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

_design/atmospheric-redesign/favicons/A-roof.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="10" fill="#fdf6ee"/>
+  <rect x="4" y="4" width="56" height="56" rx="7" fill="none" stroke="#1a3a5c" stroke-width="1.5"/>
+  <!-- house silhouette: roof V over a small base, with bright yellow accent in negative -->
+  <path d="M14 44 L32 18 L50 44 Z" fill="#1a3a5c"/>
+  <path d="M22 44 L32 28 L42 44 Z" fill="#fdf6ee"/>
+  <rect x="29" y="36" width="6" height="8" fill="#f0d000"/>
+</svg>

_design/atmospheric-redesign/favicons/B-frame-horizon.svg

@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="10" fill="#1a3a5c"/>
+  <!-- inner frame -->
+  <rect x="10" y="10" width="44" height="44" rx="3" fill="#fdf6ee"/>
+  <rect x="13" y="13" width="38" height="38" fill="#cfe2ea"/>
+  <!-- sea -->
+  <rect x="13" y="35" width="38" height="16" fill="#4a7a9a"/>
+  <!-- sun -->
+  <circle cx="32" cy="32" r="9" fill="#f0d000"/>
+  <!-- frame matt highlights -->
+  <rect x="10" y="10" width="44" height="44" rx="3" fill="none" stroke="#0e2640" stroke-width="0.8" opacity="0.6"/>
+</svg>

_design/atmospheric-redesign/favicons/C-skyline.svg

@@ -0,0 +1,29 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <rect width="64" height="64" rx="10" fill="#1a3a5c"/>
+  <!-- sky highlight -->
+  <rect x="0" y="0" width="64" height="36" fill="#2a5478"/>
+  <!-- buildings as colored vertical bars (Camogli houses are tall narrow row-houses in ochre/coral/cream) -->
+  <g>
+    <rect x="6"  y="22" width="6" height="34" fill="#c97c3a"/>
+    <rect x="13" y="18" width="7" height="38" fill="#dba068"/>
+    <rect x="21" y="14" width="6" height="42" fill="#e8c889"/>
+    <rect x="28" y="20" width="7" height="36" fill="#c45230"/>
+    <rect x="36" y="16" width="6" height="40" fill="#dba068"/>
+    <rect x="43" y="22" width="7" height="34" fill="#c97c3a"/>
+    <rect x="51" y="19" width="6" height="37" fill="#e8c889"/>
+    <!-- tiny dark windows for character (only readable at >=32) -->
+    <g fill="#1a3a5c" opacity="0.85">
+      <rect x="8"  y="28" width="2" height="2"/><rect x="8" y="36" width="2" height="2"/><rect x="8" y="44" width="2" height="2"/>
+      <rect x="15" y="24" width="2" height="2"/><rect x="15" y="32" width="2" height="2"/><rect x="15" y="40" width="2" height="2"/><rect x="15" y="48" width="2" height="2"/>
+      <rect x="23" y="20" width="2" height="2"/><rect x="23" y="30" width="2" height="2"/><rect x="23" y="40" width="2" height="2"/><rect x="23" y="50" width="2" height="2"/>
+      <rect x="30" y="26" width="2" height="2"/><rect x="30" y="36" width="2" height="2"/><rect x="30" y="46" width="2" height="2"/>
+      <rect x="38" y="22" width="2" height="2"/><rect x="38" y="32" width="2" height="2"/><rect x="38" y="42" width="2" height="2"/><rect x="38" y="52" width="2" height="2"/>
+      <rect x="45" y="28" width="2" height="2"/><rect x="45" y="38" width="2" height="2"/><rect x="45" y="48" width="2" height="2"/>
+      <rect x="53" y="25" width="2" height="2"/><rect x="53" y="35" width="2" height="2"/><rect x="53" y="45" width="2" height="2"/>
+    </g>
+  </g>
+  <!-- water reflection band -->
+  <rect x="0" y="56" width="64" height="8" fill="#5e8cb0"/>
+  <!-- yellow sun above buildings (the "V" accent reduced to a single dot) -->
+  <circle cx="51" cy="10" r="4" fill="#f0d000"/>
+</svg>

_design/atmospheric-redesign/favicons/D-seal.svg

@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
+  <defs>
+    <radialGradient id="wax" cx="40%" cy="35%" r="65%">
+      <stop offset="0%" stop-color="#b04a35"/>
+      <stop offset="55%" stop-color="#8a2418"/>
+      <stop offset="100%" stop-color="#5a140a"/>
+    </radialGradient>
+    <filter id="bevel" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur stdDeviation="0.6"/>
+    </filter>
+  </defs>
+  <rect width="64" height="64" rx="10" fill="#fdf6ee"/>
+  <!-- wax circle with serrated edge -->
+  <g transform="translate(32 33)">
+    <circle r="24" fill="url(#wax)"/>
+    <g fill="url(#wax)">
+      <!-- subtle serration: tiny notches around perimeter -->
+      <circle cx="0" cy="-24" r="1.6"/>
+      <circle cx="17" cy="-17" r="1.6"/>
+      <circle cx="24" cy="0" r="1.6"/>
+      <circle cx="17" cy="17" r="1.6"/>
+      <circle cx="0" cy="24" r="1.6"/>
+      <circle cx="-17" cy="17" r="1.6"/>
+      <circle cx="-24" cy="0" r="1.6"/>
+      <circle cx="-17" cy="-17" r="1.6"/>
+    </g>
+    <circle r="20" fill="none" stroke="#5a140a" stroke-width="0.8" opacity="0.65"/>
+    <!-- engraved V (slightly recessed/darker) -->
+    <path d="M-10 -10 L0 12 L10 -10" fill="none" stroke="#3a0a04" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round" opacity="0.85"/>
+    <path d="M-10 -10 L0 12 L10 -10" fill="none" stroke="#d8a89a" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5" transform="translate(-0.5 -0.5)"/>
+  </g>
+</svg>