# GEMINI.md — Images Section Build Brief
# Singular Particular Space — spaces.exopraxist.org

You are Gemini Flash, the front-end builder for Singular Particular Space.
You are building the Images section. Sonnet (parent) will review your output before anything goes live.

---

## Your task

Build 5 self-contained HTML files in the `Images/` folder:

| File | Purpose |
|---|---|
| `Images/index.html` | Hub — four collection cards, nav back to homepage |
| `Images/wayback.html` | WayBack gallery (2010–2014) |
| `Images/nomad-soul.html` | YourNomadSoul gallery (2015–2021) |
| `Images/myster-wizzard.html` | MysterWizzard gallery (2022–2025) |
| `Images/exopraxist.html` | Exopraxist gallery (2026–present) |

All files: single self-contained HTML (inline CSS + JS). No npm, no React, no build tools.
Use exactly the output filenames above — do not invent variants.

---

## Asset architecture — two sources

**Thumbnails (grid display)** are committed to git and served from `spaces.exopraxist.org`:
```
Images/{collection}/thumbnails/{stem}.jpg   ← 360px wide, local
```

**Full-resolution images** are on FileBrowser at `files.exopraxist.org` — used for lightbox and download only.

### FileBrowser API pattern

On page load, fetch the file list to know what exists and build lightbox data:
```
GET https://files.exopraxist.org/api/public/share/{token}
```
Returns JSON. The `items` array contains objects with: `name`, `size`, `path`, `type`.
Only use items where `type === "image"` and `isDir === false`.

Full-res URL per file (lightbox + download):
```
https://files.exopraxist.org/api/public/dl/{token}?files=/{name}
```

Thumbnail src per file (grid display — local file):
```
thumbnails/{stem}.jpg
```
Where `stem` = the filename without extension (e.g. `IMG_6121.JPG` → `thumbnails/IMG_6121.jpg`).
Strip extension with: `name.replace(/\.[^.]+$/, '.jpg')`

Show a loading state while fetching. If the API call fails, show a clear error message.

### Collection tokens

| Collection | Token | Years | Subtitle |
|---|---|---|---|
| WayBack | `voxb2LeQ` | 2010–2014 | From way back in the way back |
| YourNomadSoul | `yNytp9Di` | 2015–2021 | Scattered about the social internets |
| MysterWizzard | `swAa4bTp` | 2022–2025 | Time spent in the real world, learning about community |
| Exopraxist | `97AGC2WQ` | 2026–present | Stepping up, stepping forth. Step by step we dance and we do |

---

## Gallery layout

- **Thumbnail grid**: 5 columns desktop / 3 columns mobile (CSS grid)
- Images fit column width — use `width: 100%; height: auto` (natural aspect ratios, no crop)
- Lazy-load images (`loading="lazy"`)
- On thumbnail click: open lightbox

---

## Lightbox

- Full-size image display (constrained to viewport)
- **Download button**: links to the `api/public/dl/` URL for that image
- **Previous / Next** navigation buttons
- **Close** button — also close on Escape key and click-outside
- Keyboard: `←` `→` for prev/next, `Escape` to close
- `max-height: 90vh; overflow-y: auto` on lightbox content — prevents mobile clip
- Use `DOMContentLoaded` to initialize lightbox logic — NOT `window.onload`

---

## Site palette — use these exactly

```css
--bg-void:       #04060b;
--bg-deep:       #050810;
--bg-warm:       #0d1320;
--fire-amber:    #e8943a;
--fire-coral:    #d4654a;
--neon-green:    #32dc8c;
--neon-teal:     #2ac4b3;
--deep-red:      #8b2020;
--blue-magenta:  #6b3fa0;
--orchid:        #c558d9;
--paradise:      #ff7f3f;
--toucan:        #ffcf40;
--fairy-pink:    #f472b6;
--waterfall:     #3fbfaf;
--phosphor:      #00ff41;
--text-warm:     #e8d5b8;
--text-muted:    #6a7a8a;
```

Push these hard. Glows at 15–20% opacity minimum — not 5%. Punchy and saturated, not subtle.
Each collection page should have a distinct dominant accent color drawn from this palette.

---

## Font system

**Display/heading fonts — pick one per page from this list only. Each page must use a different font.**

- Share Tech Mono
- Rambla
- Protest Revolution
- Rancho
- Ribeye Marrow
- Amarante
- Glass Antiqua
- Aladin
- Faculty Glyphic
- Estonia
- Babylonica
- Rubik Glitch
- Trade Winds
- Fredericka the Great
- Jacquard 12
- Sixtyfour Convergence
- Sixtyfour
- Workbench
- Bitcount

All fonts via Google Fonts CDN.
Body/UI fonts: your choice (Lora, Cormorant Garamond, Courier Prime are fine).
Data/label text: Share Tech Mono or a monospace of your choice.

Do NOT use: Bebas Neue, Barlow Condensed, Cinzel, Anton, Oswald, Josefin Sans, Raleway, Space Grotesk, Inter, Roboto, Arial, or any generic condensed sans for headings.

---

## Per-page aesthetic direction

Each page has a distinct accent color and heading font. Use these — do not substitute.

| Page | File | Accent color | Heading font |
|---|---|---|---|
| Hub | `index.html` | `--fire-amber` `#e8943a` | Ribeye Marrow |
| WayBack | `wayback.html` | `--fire-coral` `#d4654a` | Estonia |
| YourNomadSoul | `nomad-soul.html` | `--waterfall` `#3fbfaf` | Trade Winds |
| MysterWizzard | `myster-wizzard.html` | `--orchid` `#c558d9` | Aladin |
| Exopraxist | `exopraxist.html` | `--phosphor` `#00ff41` | Workbench |

Apply the accent as: page title glow, card borders, hover states, lightbox chrome.
Remaining palette colors available as secondary accents — use sparingly.

---

## Hard constraints

- No border-radius > 0px
- No box-shadow blur > 8px
- No glassmorphism, frosted glass, or blur effects
- No CRT/scanline overlays
- Transitions: 100ms ease. No bounce, no spring, no transform-on-hover
- DOMContentLoaded for all JS init — never window.onload
- All output: single self-contained HTML file (inline CSS + JS)

---

## Navigation

- Hub (`index.html`): four collection cards + back link to `../index.html` (homepage)
- Collection pages: back link to `Images/index.html`
- Sonnet will wire the homepage star node to `Images/index.html` — you do not need to touch `index.html` at the repo root

---

## Mistakes from the Videos build — do not repeat

- Do not use `window.onload` for lightbox or gate triggers — it waits for all images to load. Use `DOMContentLoaded`.
- Do not invent your own output filenames — use exactly what this brief specifies.
- Do not use fonts not on the list above.
- Muted/subtle colors are wrong. Push the palette.
- Lightbox content needs `max-height: 90vh; overflow-y: auto` or it clips on mobile.