site: architecture diagram + "four primitives, one proof" reframe

From the external design review: stop presenting all five things as peer
primitives, and add one diagram that communicates the stack in ten seconds.

- §02 "Five primitives" → "Four primitives. One proof." with a "built with
  the four ↓" band separating BitLogin/BitGate/BitFeed/BitUnlock from Tessera.
- §03 replaces the flat five-across flow with a layered architecture diagram:
  OPEN SUBSTRATE (Nostr · Lightning) → FOUR PRIMITIVES → BUILT WITH THE STACK
  (Tessera + your app + what's next), read bottom to top with "built on ↓" /
  "composed from ↓" joins. The ghost "your app / what's next" slots make the
  point that the four generate a family of apps, not one.

Uses the existing design system (block colours as the only chroma, mono
uppercase tier labels, condensed display). Responsive: tiers collapse to one
column under 700px. Verified in-browser via DOM (structure/grid/colours).

Implements the bitblocks landing item from the design review (docs/TODO.md).

Co-Authored-By: Claude Opus 4.8 <[email protected]>
Claude-Session: https://claude.ai/code/session_01BXQCvJPA6sVSQ5j8uBd9bB

assets/bitblocks.css

@@ -176,6 +176,30 @@ section { border-top: 1px solid var(--line); }
 .flow .node .sq { width: 20px; height: 20px; background: var(--bc); margin-bottom: 12px; }
 .flow .node .nm { font-weight: 720; font-size: 18px; letter-spacing: -0.01em; }
 .flow .node .role { color: var(--muted); font-size: 13px; margin-top: 3px; }
+
+/* Layered architecture diagram (§03): substrate -> primitives -> apps. */
+.arch { margin-top: 4px; }
+.tier { border: 1px solid var(--line); background: var(--surface); }
+.tier .tk { display: block; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); padding: 13px 18px; }
+.tier-row { display: grid; gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
+.tier-row.n4 { grid-template-columns: repeat(4, 1fr); }
+.tier-row.n3 { grid-template-columns: repeat(3, 1fr); }
+.tier-row.n2 { grid-template-columns: repeat(2, 1fr); }
+.arch .cell { background: var(--surface); padding: 20px 18px; display: flex; flex-direction: column; gap: 3px; position: relative; text-decoration: none; color: var(--ink); overflow: hidden; }
+.arch .cell .sq { width: 18px; height: 18px; background: var(--bc, var(--line)); margin-bottom: 8px; }
+.arch .cell b { font-weight: 720; font-size: 17px; letter-spacing: -0.01em; font-variation-settings: 'wdth' 90; }
+.arch .cell span { color: var(--muted); font-size: 12.5px; }
+.arch a.cell::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--bc); transform: scaleY(0.25); transition: transform 0.25s; }
+.arch a.cell:hover { background: color-mix(in srgb, var(--bc) 8%, transparent); }
+.arch a.cell:hover::before { transform: scaleY(1); }
+.arch .cell.ghost { background: repeating-linear-gradient(135deg, transparent, transparent 7px, var(--line-soft) 7px, var(--line-soft) 8px); }
+.arch .cell.ghost .sq { background: var(--line); }
+.arch .cell.ghost b { color: var(--muted); }
+.tier-join { text-align: center; font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 9px 0; }
+@media (max-width: 700px) { .tier-row.n4, .tier-row.n3, .tier-row.n2 { grid-template-columns: 1fr; } }
+/* §02 tier band before the built-with (Tessera) row. */
+.tier-label { padding: 13px 22px; background: var(--paper); border-bottom: 1px solid var(--line); font-family: 'Ubuntu Sans Mono V', ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
+
 .compose .note { margin-top: 30px; color: var(--muted); max-width: 66ch; }
 .compose .note b { color: var(--ink); font-weight: 600; }
 

index.html

@@ -41,7 +41,7 @@
         <a class="btn ghost" href="#compose">How they fit together</a>
       </div>
     </div>
-    <div class="assembly" aria-label="The five building blocks">
+    <div class="assembly" aria-label="The BitBlocks stack: four primitives and Tessera">
       <div class="stack">
         <a class="block-bar" style="--bc:var(--c-login)" href="https://login.bitblocks.network"><span class="swatch"></span><span class="bn">BitLogin</span><span class="bq">who are you</span></a>
         <a class="block-bar" style="--bc:var(--c-gate)" href="https://gate.bitblocks.network"><span class="swatch"></span><span class="bn">BitGate</span><span class="bq">what may you do</span></a>
@@ -79,9 +79,9 @@
   <div class="frame">
     <div class="section-head">
       <p class="coord" style="width:100%">§ 02 — the blocks</p>
-      <h2 class="display">Five primitives.<br>One per question.</h2>
-      <p>Each block is small, opinionated, and independent. Use one, or snap them together — they were
-        designed to compose, not to depend.</p>
+      <h2 class="display">Four primitives.<br>One proof.</h2>
+      <p>Four small, independent primitives — identity, policy, feeds, payments. Use one, or snap them
+        together. Then Tessera proves they compose: a real application built from the four.</p>
     </div>
     <div class="block-list">
       <a class="block-row" style="--bc:var(--c-login)" href="https://login.bitblocks.network">
@@ -113,6 +113,7 @@
           access, and capabilities in bitcoin, with cryptographic proof instead of a payment processor.</p>
         <span class="go">bitunlock.network →</span>
       </a>
+      <div class="tier-label">built with the four ↓</div>
       <a class="block-row" style="--bc:var(--c-tessera)" href="https://tessera.bitblocks.network">
         <div class="id"><span class="sq"></span><div><div class="nm">Tessera</div><div class="q">what you can do</div></div></div>
         <p class="desc">The <b>capability network for agents</b> — Agent Plugins published, curated, and
@@ -129,21 +130,43 @@
   <div class="frame">
     <div class="section-head">
       <p class="coord" style="width:100%">§ 03 — how they compose</p>
-      <h2 class="display">A stack, not a suite.</h2>
-      <p>Read left to right, they answer the full lifecycle of a sovereign app. Any block can stand
-        alone; together they interlock.</p>
+      <h2 class="display">Four primitives.<br>One proof they compose.</h2>
+      <p>Read it bottom to top: an open substrate, four primitives built on it, and applications
+        assembled from those primitives. The client is the disposable part.</p>
+    </div>
+    <div class="arch" aria-label="BitBlocks architecture: an open substrate, four primitives, and applications built with them">
+      <div class="tier">
+        <span class="tk">built with the stack</span>
+        <div class="tier-row n3">
+          <a class="cell" style="--bc:var(--c-tessera)" href="https://tessera.bitblocks.network"><span class="sq"></span><b>Tessera</b><span>agent capabilities — the worked example</span></a>
+          <div class="cell ghost"><span class="sq"></span><b>your app</b><span>assembled from the same four</span></div>
+          <div class="cell ghost"><span class="sq"></span><b>what's next</b><span>a second, unlike application</span></div>
+        </div>
+      </div>
+      <div class="tier-join">composed from ↓</div>
+      <div class="tier">
+        <span class="tk">four primitives</span>
+        <div class="tier-row n4">
+          <a class="cell" style="--bc:var(--c-login)" href="https://login.bitblocks.network"><span class="sq"></span><b>BitLogin</b><span>identity — who are you</span></a>
+          <a class="cell" style="--bc:var(--c-gate)" href="https://gate.bitblocks.network"><span class="sq"></span><b>BitGate</b><span>policy — what may you do</span></a>
+          <a class="cell" style="--bc:var(--c-feed)" href="https://feed.bitblocks.network"><span class="sq"></span><b>BitFeed</b><span>feeds — what do you see</span></a>
+          <a class="cell" style="--bc:var(--c-unlock)" href="https://bitunlock.network"><span class="sq"></span><b>BitUnlock</b><span>payments — how you're paid</span></a>
+        </div>
+      </div>
+      <div class="tier-join">built on ↓</div>
+      <div class="tier">
+        <span class="tk">open substrate</span>
+        <div class="tier-row n2">
+          <div class="cell"><span class="sq" style="background:var(--ink)"></span><b>Nostr</b><span>signed events · public relays</span></div>
+          <div class="cell"><span class="sq" style="background:var(--c-unlock)"></span><b>Lightning</b><span>cryptographic payment</span></div>
+        </div>
       </div>
-    <div class="flow">
-      <div class="node" style="--bc:var(--c-login)"><div class="q">who are you</div><div class="sq"></div><div class="nm">BitLogin</div><div class="role">a key you hold</div></div>
-      <div class="node" style="--bc:var(--c-gate)"><div class="q">what may you do</div><div class="sq"></div><div class="nm">BitGate</div><div class="role">policy you set</div></div>
-      <div class="node" style="--bc:var(--c-feed)"><div class="q">what do you see</div><div class="sq"></div><div class="nm">BitFeed</div><div class="role">an algorithm you write</div></div>
-      <div class="node" style="--bc:var(--c-unlock)"><div class="q">how you're paid</div><div class="sq"></div><div class="nm">BitUnlock</div><div class="role">money you custody</div></div>
-      <div class="node" style="--bc:var(--c-tessera)"><div class="q">what you can do</div><div class="sq"></div><div class="nm">Tessera</div><div class="role">capabilities you own</div></div>
     </div>
     <p class="note"><b>Tessera is the worked example.</b> It signs users in with BitLogin, moderates
       with BitGate's four dimensions, ranks its feed with BitFeed-shaped recipes, and gates paid
-      plugins through BitUnlock — a real application assembled entirely from the blocks. Nothing about
-      it is special-cased; it's just a client over public events, which is the whole point.</p>
+      plugins through BitUnlock — a real application assembled entirely from the four. Nothing about it
+      is special-cased; it's just a client over public events. Prove the architecture and a second,
+      unlike app should assemble from the same four the same way.</p>
   </div>
 </section>