revamp projects/hardware as grouped index lists, drop emoji tiles, add Freezmo feature section

agents.md

@@ -157,15 +157,25 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   rectangle/square and never ends in an orphan "L" row (a 4th friend made the old
   3-column grid do that). The same `friend.emoji` drives the desktop friend icon
   (Josef is 🧌 goblin, the rest 🧙 — the old per-friend SVGs are gone).
-  Projects/hardware use a CSS multi-column
-  **masonry** gallery (`.project-grid`) so short cards don't leave half-empty
-  grid slots; on phones it drops to 2 columns with a shorter tile. Cards are
-  **asset-free**: each renders a `.project-thumb` — a `.thumb-N` gradient
-  (N = index % 6) with the item's `emoji` glyph centred — instead of a
-  screenshot. `codingProjects` / `techProjects` in `data.ts` carry `emoji`
-  (no `img`/`image`). The two feature panels (`.web-split`) stretch
+  Projects/hardware render as a grouped repo-listing-style
+  **index** (`ProjectIndex.tsx`, `.index-*` classes): group headers
+  (Games & game jams / Linux & desktop / Bots, servers & plugins / Apps &
+  experiments; Desktops & servers / Laptops / Phones / Consoles & handhelds),
+  then rows: coding rows lead with a language-coloured dot, title and a
+  status pill over the description, with the language/host tag right-aligned;
+  hardware rows are plain (no dot) with the year right-aligned. Coding rows are
+  external links with a hover highlight + arrow; hardware rows are static. The
+  rows are **asset-free** (no emoji, no screenshots). `codingProjects` in
+  `data.ts` carries `slug` / `group` / `status?` / `tag` / `accent`;
+  `techProjects` carries `slug` / `group` / `year?`
+  (no `img`/`image`/`emoji`/`accent`). Status pill colors come from the `--status-*`
+  tokens in `web.css`, overridden for the dark desktop windows in `skeuo.css`
+  along with the row hairlines (`--index-line`). Above the split, the full-width
+  **Freezmo** feature panel (`.web-feature` + `.web-feature-shot`) is the one
+  place a **real screenshot** is used (`public/freezmo-app.webp`, the live
+  study app). The two remaining feature panels (`.web-split`) stretch
   to equal height and share a fixed `16 / 10` `.fw` window (the `FeatureWindow`
-  component) — a decorative, **asset-free CSS mock-up** rather than a screenshot:
+  component) — decorative, **asset-free CSS mock-ups** rather than screenshots:
   Revival Inc. is a little necromancy game scene (night sky, moon, tombstones,
   blinking "PRESS START") and RustyWolf is a little browser window (tabs in the
   title bar, toolbar, address bar, start page). The browser window is `aria-hidden`
@@ -178,11 +188,13 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   Revival Inc. → game, RustyWolf → browser), so there are no app-preview
   screenshots. The old stacked TUI panel layout and the `SlBackground` ASCII
   train were removed earlier.
-- **No raster UI assets.** Every card, feature panel, app preview and the desktop
-  wallpaper is drawn in CSS: project/hardware cards are `.project-thumb` gradient
-  tiles with an `emoji`, the feature/app previews are `FeatureWindow` mock windows,
+- **No raster UI assets.** Every list, feature panel mock, app preview and the
+  desktop wallpaper is drawn in CSS: project/hardware entries are `.index-row`
+  list rows (accent dot, status pill, tag/year, hairline separators), the
+  feature/app previews are `FeatureWindow` mock windows,
   and `.win-desktop` carries a layered gradient "wallpaper" (there is no
-  `wallpaper.jpg`). Only the social SVGs, the site logo (`src/app/icon.png`), the
+  `wallpaper.jpg`). Only the social SVGs, the site logo (`src/app/icon.png`),
+  the Freezmo screenshot (`public/freezmo-app.webp`), the
   Joker easter egg (`joker.webp`) and the Gentoo mark (`gentoo.svg`) remain as
   real image files.
 - **Not a terminal.** The web theme deliberately has no TUI chrome: the hero is
@@ -207,7 +219,8 @@ Themes: `web` = default frosted-glass website (sidebar + content, light/dark),
   alphas makes dark look far more gradient-heavy. Tune the two schemes
   separately, not by eye against each other.
 - Interactive surfaces (`.web-ctl`, `.service-button`, `.social-button`,
-  `.project-card`, `.gym-item`, `.contribution-entry`, `.heatmap-container`) read
+  `.index-list`, `a.index-row:hover`, `.gym-item`, `.contribution-entry`,
+  `.heatmap-container`) read
   the `--btn-bg` / `--btn-bg-hi` / `--btn-border` / `--btn-shadow` tokens with
   the glass tokens as **fallbacks** (`var(--btn-bg, var(--glass-lo))`). The
   tokens are only defined under `html[data-theme="web"]`, so the desktop theme