feat: add navigation arrows to image carousel

Add left/right navigation arrows to the image carousel for desktop users:
- Arrows appear on multi-image galleries only
- Left arrow hidden on first image, right hidden on last
- White semi-transparent background with muted brown chevron icons
- Uses grain-icon component for consistent iconography
- Click events don't propagate to parent (prevents gallery navigation)

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

Co-Authored-By: Claude Opus 4.5 <[e-mail]>

docs/plans/2025-12-30-carousel-navigation-arrows.md

···
+# Carousel Navigation Arrows Implementation Plan
+
+> **For Claude:** REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.
+
+**Goal:** Add left/right navigation arrows to the image carousel for desktop users.
+
+**Architecture:** Extend `grain-image-carousel.js` with two absolutely-positioned arrow buttons that trigger smooth scrolling. Arrows hide at boundaries (left hidden on first image, right hidden on last).
+
+**Tech Stack:** Lit, CSS positioning, inline SVG icons
+
+---
+
+### Task 1: Add Arrow Button Styles
+
+**Files:**
+- Modify: `src/components/organisms/grain-image-carousel.js:12-45`
+
+**Step 1: Add arrow CSS to static styles**
+
+Add these styles after the existing `.dots` rule:
+
+```css
+.nav-arrow {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: none;
+  background: rgba(0, 0, 0, 0.5);
+  color: white;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  z-index: 1;
+}
+.nav-arrow:hover {
+  background: rgba(0, 0, 0, 0.7);
+}
+.nav-arrow:focus {
+  outline: none;
+}
+.nav-arrow:focus-visible {
+  outline: 2px solid white;
+  outline-offset: 2px;
+}
+.nav-arrow-left {
+  left: 8px;
+}
+.nav-arrow-right {
+  right: 8px;
+}
+.nav-arrow svg {
+  width: 16px;
+  height: 16px;
+}
+```
+
+**Step 2: Verify styles compile**
+
+Run: `npm run dev` (or check browser dev tools)
+Expected: No errors, styles present in component
+
+**Step 3: Commit**
+
+```bash
+git add src/components/organisms/grain-image-carousel.js
+git commit -m "style: add CSS for carousel navigation arrows"
+```
+
+---
+
+### Task 2: Add Navigation Methods
+
+**Files:**
+- Modify: `src/components/organisms/grain-image-carousel.js:62-77`
+
+**Step 1: Add goToPrevious method**
+
+Add after the `#handleScroll` method:
+
+```javascript
+#goToPrevious() {
+  if (this._currentIndex > 0) {
+    const carousel = this.shadowRoot.querySelector('.carousel');
+    const slides = carousel.querySelectorAll('.slide');
+    slides[this._currentIndex - 1].scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start'
+    });
+  }
+}
+```
+
+**Step 2: Add goToNext method**
+
+Add after `#goToPrevious`:
+
+```javascript
+#goToNext() {
+  if (this._currentIndex < this.photos.length - 1) {
+    const carousel = this.shadowRoot.querySelector('.carousel');
+    const slides = carousel.querySelectorAll('.slide');
+    slides[this._currentIndex + 1].scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest',
+      inline: 'start'
+    });
+  }
+}
+```
+
+**Step 3: Commit**
+
+```bash
+git add src/components/organisms/grain-image-carousel.js
+git commit -m "feat: add carousel navigation methods"
+```
+
+---
+
+### Task 3: Add Arrow Buttons to Render
+
+**Files:**
+- Modify: `src/components/organisms/grain-image-carousel.js:79-109`
+
+**Step 1: Add arrow buttons to render method**
+
+Update the render method to include arrow buttons. Add them after the carousel div, before the dots conditional:
+
+```javascript
+render() {
+  const hasPortrait = this.#hasPortrait;
+  const minAspectRatio = this.#minAspectRatio;
+  const carouselStyle = hasPortrait
+    ? `aspect-ratio: ${minAspectRatio};`
+    : '';
+
+  const showLeftArrow = this.photos.length > 1 && this._currentIndex > 0;
+  const showRightArrow = this.photos.length > 1 && this._currentIndex < this.photos.length - 1;
+
+  return html`
+    <div class="carousel" style=${carouselStyle} @scroll=${this.#handleScroll}>
+      ${this.photos.map((photo, index) => html`
+        <div class="slide ${hasPortrait ? 'centered' : ''}">
+          <grain-image
+            src=${this.#shouldLoad(index) ? photo.url : ''}
+            alt=${photo.alt || ''}
+            aspectRatio=${photo.aspectRatio || 1}
+            style=${index === 0 && this.rkey ? `view-transition-name: gallery-hero-${this.rkey};` : ''}
+          ></grain-image>
+        </div>
+      `)}
+    </div>
+    ${showLeftArrow ? html`
+      <button class="nav-arrow nav-arrow-left" @click=${this.#goToPrevious} aria-label="Previous image">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="15 18 9 12 15 6"></polyline>
+        </svg>
+      </button>
+    ` : ''}
+    ${showRightArrow ? html`
+      <button class="nav-arrow nav-arrow-right" @click=${this.#goToNext} aria-label="Next image">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <polyline points="9 18 15 12 9 6"></polyline>
+        </svg>
+      </button>
+    ` : ''}
+    ${this.photos.length > 1 ? html`
+      <div class="dots">
+        <grain-carousel-dots
+          total=${this.photos.length}
+          current=${this._currentIndex}
+        ></grain-carousel-dots>
+      </div>
+    ` : ''}
+  `;
+}
+```
+
+**Step 2: Test in browser**
+
+1. Navigate to a gallery with multiple images
+2. Verify left arrow is hidden on first image
+3. Click right arrow - should smooth scroll to next image
+4. Verify left arrow appears, right arrow hides on last image
+5. Click left arrow - should smooth scroll back
+
+**Step 3: Commit**
+
+```bash
+git add src/components/organisms/grain-image-carousel.js
+git commit -m "feat: add navigation arrow buttons to carousel"
+```
+
+---
+
+### Task 4: Final Testing
+
+**Step 1: Test all scenarios**
+
+- Single image gallery: no arrows visible
+- Multi-image gallery, first image: only right arrow
+- Multi-image gallery, middle image: both arrows
+- Multi-image gallery, last image: only left arrow
+- Swipe still works alongside arrows
+- Dots still update correctly
+
+**Step 2: Test accessibility**
+
+- Tab to arrows, verify focus ring visible
+- Press Enter/Space on focused arrow, verify navigation works
+
+**Step 3: Final commit if any fixes needed**
+
+```bash
+git add -A
+git commit -m "fix: carousel arrow refinements"
+```

src/components/atoms/grain-icon.js

···
   share: 'fa-solid fa-arrow-up-from-bracket',
   camera: 'fa-solid fa-camera',
   paperPlane: 'fa-regular fa-paper-plane',
-  close: 'fa-solid fa-xmark'
+  close: 'fa-solid fa-xmark',
+  chevronLeft: 'fa-solid fa-chevron-left',
+  chevronRight: 'fa-solid fa-chevron-right'
 };
 
 export class GrainIcon extends LitElement {

src/components/organisms/grain-image-carousel.js

···
 import { LitElement, html, css } from 'lit';
 import '../atoms/grain-image.js';
+import '../atoms/grain-icon.js';
 import '../molecules/grain-carousel-dots.js';
 
 export class GrainImageCarousel extends LitElement {
···
       left: 0;
       right: 0;
     }
+    .nav-arrow {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      border: none;
+      background: rgba(255, 255, 255, 0.7);
+      color: rgba(120, 100, 90, 1);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      z-index: 1;
+    }
+    .nav-arrow:hover {
+      background: rgba(255, 255, 255, 1);
+    }
+    .nav-arrow:focus {
+      outline: none;
+    }
+    .nav-arrow:focus-visible {
+      outline: 2px solid rgba(120, 100, 90, 0.5);
+      outline-offset: 2px;
+    }
+    .nav-arrow-left {
+      left: 8px;
+    }
+    .nav-arrow-right {
+      right: 8px;
+    }
   `;
 
   constructor() {
···
     }
   }
 
+  #goToPrevious(e) {
+    e.stopPropagation();
+    if (this._currentIndex > 0) {
+      const carousel = this.shadowRoot.querySelector('.carousel');
+      const slides = carousel.querySelectorAll('.slide');
+      slides[this._currentIndex - 1].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }
+
+  #goToNext(e) {
+    e.stopPropagation();
+    if (this._currentIndex < this.photos.length - 1) {
+      const carousel = this.shadowRoot.querySelector('.carousel');
+      const slides = carousel.querySelectorAll('.slide');
+      slides[this._currentIndex + 1].scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start'
+      });
+    }
+  }
+
   #shouldLoad(index) {
     // Load current slide and 1 slide ahead/behind for smooth swiping
     return Math.abs(index - this._currentIndex) <= 1;
···
   render() {
     const hasPortrait = this.#hasPortrait;
     const minAspectRatio = this.#minAspectRatio;
-
-    // Calculate height based on tallest image when portrait exists
     const carouselStyle = hasPortrait
       ? `aspect-ratio: ${minAspectRatio};`
       : '';
 
+    const showLeftArrow = this.photos.length > 1 && this._currentIndex > 0;
+    const showRightArrow = this.photos.length > 1 && this._currentIndex < this.photos.length - 1;
+
     return html`
       <div class="carousel" style=${carouselStyle} @scroll=${this.#handleScroll}>
         ${this.photos.map((photo, index) => html`
···
           </div>
         `)}
       </div>
+      ${showLeftArrow ? html`
+        <button class="nav-arrow nav-arrow-left" @click=${this.#goToPrevious} aria-label="Previous image">
+          <grain-icon name="chevronLeft" size="12"></grain-icon>
+        </button>
+      ` : ''}
+      ${showRightArrow ? html`
+        <button class="nav-arrow nav-arrow-right" @click=${this.#goToNext} aria-label="Next image">
+          <grain-icon name="chevronRight" size="12"></grain-icon>
+        </button>
+      ` : ''}
       ${this.photos.length > 1 ? html`
         <div class="dots">
           <grain-carousel-dots