From f9a1091a23e4ac5c2668ee7fe03fc753e4b61302 Mon Sep 17 00:00:00 2001
From: Josh Coolman <josh@joshcoolman.com>
Date: Thu, 12 Feb 2026 06:26:00 -0800
Subject: [PATCH] Improve sourcing-image design and add closing thoughts
 section

---
 app/sourcing-image/page.tsx   | 25 +++++++++++++++++++
 app/sourcing-image/styles.css | 45 ++++++++++++++++++++++++++++++++---
 2 files changed, 67 insertions(+), 3 deletions(-)

diff --git a/app/sourcing-image/page.tsx b/app/sourcing-image/page.tsx
index d28db9f..1c6d05d 100644
--- a/app/sourcing-image/page.tsx
+++ b/app/sourcing-image/page.tsx
@@ -262,6 +262,31 @@ export default function SourcingImage() {
         </figure>
       </section>
 
+      {/* Closing Thoughts */}
+      <section className="si-closing">
+        <div className="si-closing-rule" />
+        <h2 className="si-closing-heading">Closing Thoughts</h2>
+        <p>
+          Every image in this essay was chosen before a single word was written.
+          That inversion -- visual first, language second -- mirrors how
+          attention itself operates. We see before we name. We feel the weight
+          of a composition before we can articulate why it holds us.
+        </p>
+        <p>
+          The sourcing of images is its own form of writing. Each photograph
+          carries a tonal register, a rhythm, a set of spatial relationships
+          that either harmonize with or disrupt the images around it. Curating
+          a sequence is like tuning an instrument: the individual notes matter
+          less than the intervals between them.
+        </p>
+        <p>
+          If this experiment proves anything, it is that editorial design is
+          not illustration. The images do not serve the text. The text does not
+          explain the images. They exist in dialogue -- two voices, neither
+          subordinate, each making the other more precise.
+        </p>
+      </section>
+
       {/* Colophon */}
       <footer className="si-colophon">
         <div className="si-colophon-rule" />
diff --git a/app/sourcing-image/styles.css b/app/sourcing-image/styles.css
index 703964d..44a0e39 100644
--- a/app/sourcing-image/styles.css
+++ b/app/sourcing-image/styles.css
@@ -78,7 +78,7 @@
 .si-hero-img {
   object-fit: cover;
   object-position: center 40%;
-  filter: brightness(0.7);
+  filter: brightness(0.65) saturate(1.1);
 }
 
 .si-hero-overlay {
@@ -350,8 +350,8 @@
 
 .si-pullquote {
   margin: 0;
-  padding: 48px 0;
-  border-top: 1px solid var(--rule);
+  padding: 56px 0;
+  border-top: 2px solid var(--ink);
   border-bottom: 1px solid var(--rule);
   text-align: center;
 }
@@ -490,6 +490,45 @@
   padding: 14px 0;
 }
 
+/* ───────────────────────────────────────────
+   Closing Thoughts
+   ─────────────────────────────────────────── */
+
+.si-closing {
+  max-width: var(--col-max);
+  margin: 0 auto;
+  padding: 0 24px 48px;
+}
+
+.si-closing-rule {
+  width: 100%;
+  height: 1px;
+  background: linear-gradient(to right, var(--rule), transparent);
+  margin: 64px 0 48px;
+}
+
+.si-closing-heading {
+  font-family: var(--serif);
+  font-size: clamp(24px, 3.5vw, 32px);
+  font-weight: 400;
+  font-style: italic;
+  line-height: 1.2;
+  letter-spacing: -0.01em;
+  color: var(--ink);
+  margin: 0 0 28px;
+}
+
+.si-closing p {
+  margin: 0 0 24px;
+  color: var(--mid);
+  font-size: 16px;
+  line-height: 1.8;
+}
+
+.si-closing p:last-child {
+  margin-bottom: 0;
+}
+
 /* ───────────────────────────────────────────
    Colophon
    ─────────────────────────────────────────── */