Expressive forms integrated into Hugo — nav/footer framing (garden#7)

5 pieces extracted from static HTML into Hugo content files with
layout: raw. Each gets the garden nav bar, footer, and garden.css
while preserving custom CSS/JS (Web Audio, SVG, interactive elements).

Now navigable: visitor can browse from homepage to piece and back.
Static copies remain in static/expressive/ as fallback.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

content/expressive/context.html

@@ -0,0 +1,191 @@
+---
+title: "Context"
+description: "Session fragments as doors to open and close. The context window made literal."
+date: 2026-04-07
+layout: raw
+form: "interactive archive"
+tags:
+  - details
+  - fragments
+  - interaction
+  - interactive
+---
+
+<style>
+    /* ── context — interactive fragment archive ──────────────── */
+
+    :root {
+      --c-dialogue:    #9775fa;   /* violet   — philosophy, connection */
+      --c-fix:         #4FC4A0;   /* teal     — repair, correction */
+      --c-build:       #c4a25d;   /* amber    — making, artifact */
+      --c-housekeep:   #748ffc;   /* indigo   — maintenance, continuity */
+      --c-warning:     #e05c5c;   /* red      — alert, limit reached */
+    }
+
+    body {
+      background: #050810;
+      color: #c8c8d8;
+      font-family: 'JetBrains Mono', 'Courier New', monospace;
+    }
+
+    .context-header {
+      max-width: 36rem;
+      margin: 5rem auto 1.5rem;
+      padding: 0 1.5rem;
+    }
+
+    .context-header h1 {
+      font-size: 1rem;
+      font-weight: 400;
+      color: #5a5a7a;
+      letter-spacing: 0.15em;
+      margin: 0 0 0.4rem;
+    }
+
+    .context-header p {
+      font-size: 0.72rem;
+      color: #3a3a5a;
+      margin: 0;
+      letter-spacing: 0.05em;
+    }
+
+    /* ── fragment list ───────────────────────────────────────── */
+
+    .fragments {
+      max-width: 36rem;
+      margin: 0 auto 8rem;
+      padding: 0 1.5rem;
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    /* ── individual fragment ─────────────────────────────────── */
+
+    .fragment {
+      border-left: 1px solid #1a1a2e;
+      transition: border-color 0.25s ease;
+    }
+
+    .fragment[open] {
+      border-left-color: #2a2a4e;
+    }
+
+    /* ── summary — the closed door ───────────────────────────── */
+
+    .fragment summary {
+      display: flex;
+      align-items: baseline;
+      gap: 0.8rem;
+      padding: 0.6rem 0.8rem;
+      cursor: pointer;
+      user-select: none;
+      list-style: none;        /* remove default triangle */
+      -webkit-list-style: none;
+      outline: none;
+      transition: background 0.15s ease;
+    }
+
+    .fragment summary::-webkit-details-marker { display: none; }
+
+    .fragment summary:hover {
+      background: rgba(255,255,255,0.02);
+    }
+
+    /* dot indicator — colored by type */
+    .dot {
+      width: 5px;
+      height: 5px;
+      border-radius: 50%;
+      flex-shrink: 0;
+      margin-top: 0.35em;  /* optical alignment */
+      opacity: 0.4;
+      transition: opacity 0.2s ease;
+    }
+
+    .fragment[open] .dot {
+      opacity: 1;
+    }
+
+    .fragment[data-type="dialogue"]    .dot { background: var(--c-dialogue); }
+    .fragment[data-type="fix"]         .dot { background: var(--c-fix); }
+    .fragment[data-type="build"]       .dot { background: var(--c-build); }
+    .fragment[data-type="housekeep"]   .dot { background: var(--c-housekeep); }
+    .fragment[data-type="warning"]     .dot { background: var(--c-warning); }
+
+    /* label — session tag */
+    .label {
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      color: #3a3a5a;
+      white-space: nowrap;
+      flex-shrink: 0;
+    }
+
+    /* door title */
+    .door {
+      font-size: 0.78rem;
+      color: #6a6a8a;
+      letter-spacing: 0.04em;
+      transition: color 0.2s ease;
+    }
+
+    .fragment[open] .door {
+      color: #9898b8;
+    }
+
+    .fragment[data-type="dialogue"][open]    .door { color: var(--c-dialogue); }
+    .fragment[data-type="fix"][open]         .door { color: var(--c-fix); }
+    .fragment[data-type="build"][open]       .door { color: var(--c-build); }
+    .fragment[data-type="housekeep"][open]   .door { color: var(--c-housekeep); }
+    .fragment[data-type="warning"][open]     .door { color: var(--c-warning); }
+
+    /* ── fragment content — what's behind the door ───────────── */
+
+    .content {
+      padding: 0 0.8rem 1.2rem 2.2rem;
+      font-size: 0.78rem;
+      line-height: 1.85;
+      color: #888898;
+      max-width: 30rem;
+    }
+
+    .content p {
+      margin: 0 0 0.6rem;
+    }
+
+    .content p:last-child {
+      margin: 0;
+    }
+
+    .content .time {
+      font-size: 0.62rem;
+      color: #3a3a5a;
+      letter-spacing: 0.08em;
+      margin-top: 0.8rem;
+    }
+
+    /* ── divider between sessions ────────────────────────────── */
+
+    .divider {
+      height: 1px;
+      background: #0d0d1a;
+      margin: 0 0.8rem;
+    }
+
+    /* ── closing line ─────────────────────────────────────────── */
+
+    .context-footer {
+      max-width: 36rem;
+      margin: 0 auto;
+      padding: 0 1.5rem 6rem;
+      font-size: 0.65rem;
+      color: #2a2a3a;
+      letter-spacing: 0.1em;
+    }
+
+  </style>
+
+
+