garden/content/expressive/context.html

---
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>