feat: v1.2.0-rc.2 - Media display fixes and feed enhancements

## Added
- Feed Media Enhancement with Media RSS namespace support
  - RSS enclosure, media:content, media:thumbnail elements
  - JSON Feed image field for first image
- ADR-059: Full feed media standardization roadmap

## Fixed
- Media display on homepage (was only showing on note pages)
- Responsive image sizing with CSS constraints
- Caption display (now alt text only, not visible)
- Logging correlation ID crash in non-request contexts

## Documentation
- Feed media design documents and implementation reports
- Media display fixes design and validation reports
- Updated ROADMAP with v1.3.0/v1.4.0 media plans

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

static/css/style.css

@@ -100,6 +100,76 @@ small { display: block; margin-top: var(--spacing-xs); color: var(--color-text-l
 .note-editor { max-width: 50rem; }
 .note-editor .note-meta { margin-bottom: var(--spacing-md); }
 
+/* Media Display Styles - v1.2.0 Media Display Fixes */
+.note-media {
+  margin-bottom: var(--spacing-md);
+  width: 100%;
+}
+
+/* Single image - full width */
+.note-media:has(.media-item:only-child) {
+  max-width: 100%;
+}
+
+.note-media:has(.media-item:only-child) .media-item {
+  width: 100%;
+}
+
+/* Two images - side by side */
+.note-media:has(.media-item:nth-child(2):last-child) {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-sm);
+}
+
+/* Three or four images - grid */
+.note-media:has(.media-item:nth-child(3)),
+.note-media:has(.media-item:nth-child(4)) {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-sm);
+}
+
+/* Media item wrapper */
+.media-item {
+  margin: 0;
+  padding: 0;
+  background: var(--color-bg-alt);
+  border-radius: var(--border-radius);
+  overflow: hidden;
+  aspect-ratio: 1 / 1; /* Instagram-style square crop */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Image constraints */
+.media-item img,
+.u-photo {
+  width: 100%;
+  height: 100%;
+  object-fit: cover; /* Crop to fill container */
+  display: block;
+}
+
+/* For single images, allow natural aspect ratio */
+.note-media:has(.media-item:only-child) .media-item {
+  aspect-ratio: auto;
+  max-height: 500px; /* Prevent extremely tall images */
+}
+
+.note-media:has(.media-item:only-child) .media-item img {
+  object-fit: contain; /* Show full image for singles */
+  width: 100%;
+  height: auto;
+  max-height: 500px;
+}
+
+/* Remove figcaption from display */
+.media-item figcaption {
+  display: none; /* Captions are for alt text only */
+}
+
 @media (min-width: 768px) {
   body { padding: var(--spacing-lg); }
   h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.5rem; }
@@ -111,4 +181,13 @@ small { display: block; margin-top: var(--spacing-xs); color: var(--color-text-l
   .note-actions .button { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
   .admin-nav { flex-direction: column; align-items: stretch; }
   .admin-nav .logout-form { margin-left: 0; }
+
+  /* Stack images vertically on small screens */
+  .note-media:has(.media-item:nth-child(2):last-child) {
+    grid-template-columns: 1fr;
+  }
+
+  .media-item {
+    aspect-ratio: 16 / 9; /* Wider aspect on mobile */
+  }
 }