polish pass — sharper hero copy + Editor's Letter editorial section

2b2d6c71e0052e4e35959346198cc3383c1e0bc5 · 2026-05-13 13:21:16 -0700 · Steve

- hero: lead with mood-shopping vs SKU-shopping framing, accent color on the
  punchline so the magazine cover reads at a glance instead of being a
  generic 'visual lookbooks' line.
- editor's letter section between the cover and the cluster spread —
  two-paragraph editorial intro with byline, drop-cap, Cormorant Garamond
  body. Establishes voice and gives the home page a distinctive content
  beat the rest of the DW fleet doesn't have.
- footer was already correct (info@, 15442 Ventura, 888-373-4564, 2026,
  G-SDQQKBE3GY GA verified on live).

Deployed to Kamatera pm2 designerlookbooks (port 9923); anchor checks +
HTTP 200 verified.

Files touched

M server.js

Diff

commit 2b2d6c71e0052e4e35959346198cc3383c1e0bc5
Author: Steve <steve@designerwallcoverings.com>
Date:   Wed May 13 13:21:16 2026 -0700

    polish pass — sharper hero copy + Editor's Letter editorial section
    
    - hero: lead with mood-shopping vs SKU-shopping framing, accent color on the
      punchline so the magazine cover reads at a glance instead of being a
      generic 'visual lookbooks' line.
    - editor's letter section between the cover and the cluster spread —
      two-paragraph editorial intro with byline, drop-cap, Cormorant Garamond
      body. Establishes voice and gives the home page a distinctive content
      beat the rest of the DW fleet doesn't have.
    - footer was already correct (info@, 15442 Ventura, 888-373-4564, 2026,
      G-SDQQKBE3GY GA verified on live).
    
    Deployed to Kamatera pm2 designerlookbooks (port 9923); anchor checks +
    HTTP 200 verified.
---
 server.js | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 60 insertions(+), 5 deletions(-)

diff --git a/server.js b/server.js
index 0865ee7..76c8339 100644
--- a/server.js
+++ b/server.js
@@ -323,6 +323,36 @@ button.theme-toggle:hover { border-color: var(--accent); }
   max-width: 1480px; margin: 36px auto 0; padding: 0 32px;
 }
 
+/* ---- editor's letter (home) ---- */
+.letter {
+  max-width: 1480px; margin: 0 auto; padding: 56px 32px 24px;
+}
+.letter-inner {
+  display: grid; grid-template-columns: 280px 1fr; gap: 56px;
+  border-top: 1px solid var(--rule); padding-top: 36px;
+}
+@media (max-width: 880px) {
+  .letter-inner { grid-template-columns: 1fr; gap: 18px; }
+}
+.letter-meta .kicker {
+  font-family: 'Cormorant Garamond', Georgia, serif;
+  font-size: 26px; font-weight: 500; line-height: 1.1;
+  color: var(--accent); margin-bottom: 6px;
+}
+.letter-meta .byline {
+  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
+  color: var(--muted);
+}
+.letter-body p {
+  font-family: 'Cormorant Garamond', Georgia, serif;
+  font-size: 20px; line-height: 1.55; color: var(--fg);
+  max-width: 640px; margin-bottom: 18px;
+}
+.letter-body p:first-child::first-letter {
+  font-size: 64px; line-height: .9; float: left;
+  padding: 6px 12px 0 0; font-weight: 500; color: var(--accent);
+}
+
 /* ---- cluster index (home) ---- */
 .spread {
   max-width: 1480px; margin: 0 auto; padding: 48px 32px 80px;
@@ -562,15 +592,40 @@ app.get('/', (_req, res) => {
   const body = `
     <section class="cover">
       <div class="issue">Issue 01 · Spring 2026</div>
-      <h1>Visual lookbooks for the way rooms are <em>actually</em> imagined.</h1>
+      <h1>Wallpaper, organized the way <em>designers</em> actually shop it &mdash; <span style="color:var(--accent)">by mood.</span></h1>
       <p class="lede">
-        Eight aesthetic clusters drawn from over eight thousand wallcoverings —
-        a magazine-style index of texture, color, and pattern. Click any
-        lookbook to open the full editorial spread, sort by color or style,
-        and order memo samples free.
+        Eight aesthetic clusters drawn from over eight thousand wallcoverings.
+        Skip the SKU lists; open a lookbook, read the spread, request memo
+        samples free.
       </p>
     </section>
     <hr class="divider">
+    <section class="letter">
+      <div class="letter-inner">
+        <div class="letter-meta">
+          <div class="kicker">Editor's Letter</div>
+          <div class="byline">Spring 2026 &middot; Designer Lookbooks</div>
+        </div>
+        <div class="letter-body">
+          <p>
+            Most wallpaper catalogs are organized for the warehouse &mdash; by
+            vendor, by SKU, by collection name no one outside the trade
+            recognizes. That's fine if you already know what you want. It is
+            not how a room actually gets imagined.
+          </p>
+          <p>
+            Designer Lookbooks reorganizes the same eight thousand patterns
+            around the way clients describe a brief: "soft and modern," "loud
+            florals," "lots of metallic light," "something a little noir."
+            Each cluster reads like a magazine feature &mdash; a hero, a
+            tagline, an editorial spread &mdash; so you can browse the
+            <em>feeling</em> first and the specs second. Memo samples are
+            always free.
+          </p>
+        </div>
+      </div>
+    </section>
+    <hr class="divider">
     <section class="spread">
       ${features}
     </section>

← b699470 initial scaffold + GA gtag (8 aesthetic clusters, magazine l · back to Designerlookbooks · add noreferrer to all target=_blank external links 8a72dd2 →