Improve gallery video UX and add upload-to-publish media workflow.

Stage raw files in upload/, publish with make sync-media/publish, and polish the lightbox: autoplay, remembered volume, Escape to close, and image/video icons without poster or caption clutter.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/static/style.css

@@ -311,21 +311,26 @@ main {
   background: var(--surface);
 }
 
-.gallery-video-badge {
+.gallery-media-icon {
   position: absolute;
-  left: 0.35rem;
-  bottom: 0.35rem;
-  padding: 0.15rem 0.4rem;
-  border-radius: 3px;
-  background: rgba(0, 0, 0, 0.65);
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 4px;
+  background: rgba(20, 16, 12, 0.8);
   color: var(--text);
-  font-family: var(--mono);
-  font-size: 0.65rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
   pointer-events: none;
 }
 
+.gallery-media-icon svg {
+  width: 1rem;
+  height: 1rem;
+}
+
 .gallery-item:hover img {
   transform: scale(1.04);
 }
@@ -524,54 +529,30 @@ main {
   background: #000;
 }
 
-.modal-video {
-  position: relative;
-  width: 100%;
-}
-
-.modal-figure img,
-.modal-figure video {
+.modal-figure > img {
   display: block;
   width: 100%;
   max-height: 75vh;
-  min-height: 12rem;
   object-fit: contain;
   border-radius: 8px;
   background: #000;
 }
 
-.modal-figure video.video-broken {
-  display: none;
-}
-
-.video-unavailable {
-  margin: 0;
-  padding: 1.25rem;
-  text-align: center;
-  color: var(--text-muted);
-  background: #000;
-  border-radius: 8px;
-  min-height: 12rem;
+.modal-video-stack {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: center;
   gap: 0.75rem;
+  width: 100%;
 }
 
-.video-unavailable[hidden] {
-  display: none !important;
-}
-
-.video-unavailable a {
-  color: var(--accent);
-}
-
-.modal-figure figcaption {
-  margin-top: 0.75rem;
-  color: var(--text-muted);
-  font-family: var(--mono);
-  font-size: 0.85rem;
+.modal-video-stack video {
+  display: block;
+  width: 100%;
+  max-height: 75vh;
+  min-height: 3.5rem;
+  object-fit: contain;
+  border-radius: 8px;
+  background: #000;
 }
 
 .modal-nav {
@@ -742,14 +723,25 @@ main {
     min-height: 0;
   }
 
-  .modal-figure img,
-  .modal-figure video {
+  .modal-figure > img {
     flex: 1;
     min-height: 0;
     max-height: none;
     object-fit: contain;
   }
 
+  .modal-video-stack {
+    flex: 1;
+    min-height: 0;
+    justify-content: center;
+  }
+
+  .modal-video-stack video {
+    flex: 1;
+    min-height: 0;
+    max-height: none;
+  }
+
   .modal-nav {
     flex-shrink: 0;
     gap: 0.5rem;