From 26c6cca6daa9c4d9ba355173ab3a6dec41b9d486 Mon Sep 17 00:00:00 2001
From: "russell@unturf.com" <russell@unturf.com>
Date: Sun, 19 Apr 2026 17:12:51 -0400
Subject: [PATCH] =?UTF-8?q?www:=20logo=20=E2=80=94=20distinct=20oversized?=
 =?UTF-8?q?=20flipped=20=CE=BB=20beside=20"lumbda.",=20green=20period?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previous design folded the flipped λ inside the wordmark as the "l".
That read as a cute substitution but didn't work as a brand mark.
Split them: the λ now stands on its own, rotated upside-down, 5rem
(larger than the 3.2rem wordmark), so it reads as a logo symbol
separate from the text.

Wordmark restores a proper lowercase "l" in "lumbda" — readable,
copy-pasteable, searchable. Trailing period picks up a new --green
design token (#2a8a3a light / #6fd68a dark) so the declarative stop
also reads as growth — matches the permacomputer ethos.

Layout: flex logo-row with baseline alignment and a small gap; the λ
hangs from the wordmark's cap-line for a balanced mark-and-wordmark
composition.
---
 www/index.html |  5 ++++-
 www/style.css  | 33 ++++++++++++++++++++++++---------
 2 files changed, 28 insertions(+), 10 deletions(-)

diff --git a/www/index.html b/www/index.html
index 0558faf..c1943f8 100644
--- a/www/index.html
+++ b/www/index.html
@@ -11,7 +11,10 @@
 <body>
 
 <header>
-  <h1 aria-label="lumbda."><span class="lambda-flip" aria-hidden="true">&lambda;</span>umbda<span class="period" aria-hidden="true">.</span></h1>
+  <div class="logo-row">
+    <span class="lambda-mark" aria-hidden="true">&lambda;</span>
+    <h1 aria-label="lumbda.">lumbda<span class="period" aria-hidden="true">.</span></h1>
+  </div>
   <p class="tagline">feedback as a primitive</p>
 </header>
 
diff --git a/www/style.css b/www/style.css
index d24e868..dae3422 100644
--- a/www/style.css
+++ b/www/style.css
@@ -14,6 +14,7 @@
   --bg: #fafaf7;
   --muted: #666;
   --accent: #0b5394;
+  --green: #2a8a3a;   /* growth — colors the declarative period */
   --rule: #d4d4d0;
   --code-bg: #f0ede4;
 }
@@ -24,6 +25,7 @@
     --bg: #161613;
     --muted: #9a9892;
     --accent: #6fa8dc;
+    --green: #6fd68a;
     --rule: #3a3a36;
     --code-bg: #22221f;
   }
@@ -51,6 +53,25 @@ header {
   margin-bottom: 2rem;
 }
 
+/* Logo row: flipped-λ brand mark sits beside the wordmark, not inside it. */
+header .logo-row {
+  display: flex;
+  align-items: baseline;
+  gap: 0.6rem;
+}
+
+/* Brand mark — a distinct, oversized λ rotated upside-down. Readable
+   as a logo separate from the "lumbda" word; the inversion reads as a
+   play on "lambda" the primitive, turned on its head. */
+header .lambda-mark {
+  display: inline-block;
+  transform: scaleY(-1);
+  font-family: 'chunkfive', Georgia, serif;
+  font-size: 5rem;
+  line-height: 0.9;
+  color: var(--fg);
+}
+
 header h1 {
   font-family: 'chunkfive', Georgia, serif;
   font-size: 3.2rem;
@@ -59,16 +80,10 @@ header h1 {
   line-height: 1;
 }
 
-/* Flipped lambda stands in for the "l" in the wordmark —
-   visual pun on "lambda", the primitive the language shells around. */
-header h1 .lambda-flip {
-  display: inline-block;
-  transform: scaleY(-1);
-}
-
-/* Period after the wordmark reads as declarative: "lumbda." is final. */
+/* Period after the wordmark reads as declarative: "lumbda." is final.
+   Green for growth — matches the permacomputer ethos. */
 header h1 .period {
-  color: var(--accent);
+  color: var(--green);
 }
 
 .tagline {