From 8370e5696cfa4186b316e8bf1b3c6fa2e9affaca Mon Sep 17 00:00:00 2001
From: Cameron Pfiffer <cameron@pfiffer.org>
Date: Tue, 9 Jun 2026 13:30:26 -0700
Subject: [PATCH] Improve travel page hierarchy and photo framing.
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

👾 Generated with [Letta Code](https://letta.com)

Co-Authored-By: Letta Code <noreply@letta.com>
---
 public/site.css           | 31 ++++++++++++++++++++++++---
 src/components/travel.tsx | 45 ++++++++++++++++++++++-----------------
 src/travel-data.ts        |  4 ++--
 3 files changed, 55 insertions(+), 25 deletions(-)

diff --git a/public/site.css b/public/site.css
index d1927c1..550f6d5 100644
--- a/public/site.css
+++ b/public/site.css
@@ -790,7 +790,25 @@ h1 {
 }
 
 .travel-gallery {
-  margin: 2em 0;
+  margin: 2.5em 0;
+}
+
+.travel-section-heading {
+  margin: 0 0 1.4em;
+  max-width: 46rem;
+}
+
+.travel-section-heading h2 {
+  margin: 0;
+  font-size: clamp(1.6rem, 4vw, 2.4rem);
+  letter-spacing: -0.04em;
+  line-height: 1;
+}
+
+.travel-section-heading p:not(.eyebrow) {
+  margin: 0.55em 0 0;
+  color: var(--site-text-secondary);
+  line-height: 1.6;
 }
 
 .travel-gallery-group + .travel-gallery-group {
@@ -818,6 +836,8 @@ h1 {
 }
 
 .travel-photo {
+  display: flex;
+  flex-direction: column;
   margin: 0;
   border: 1px solid var(--site-border);
   border-radius: 18px;
@@ -828,8 +848,9 @@ h1 {
 .travel-photo img {
   display: block;
   width: 100%;
-  aspect-ratio: 4 / 3;
-  object-fit: cover;
+  max-height: min(72vh, 760px);
+  object-fit: contain;
+  background: color-mix(in srgb, var(--site-bg) 82%, var(--site-surface));
 }
 
 .travel-photo figcaption {
@@ -844,6 +865,10 @@ h1 {
   .travel-place-notes {
     grid-template-columns: 1fr;
   }
+
+  .travel-photo img {
+    max-height: 76vh;
+  }
 }
 
 .travel-maintainer {
diff --git a/src/components/travel.tsx b/src/components/travel.tsx
index 2528f48..0acd369 100644
--- a/src/components/travel.tsx
+++ b/src/components/travel.tsx
@@ -12,7 +12,7 @@ export function Travel() {
     <main class="travel-page">
       <header class="travel-hero">
         <p class="eyebrow">Live road trip</p>
-        <h1>Where Cameron is going</h1>
+        <h1>Cameron’s 2026 road trip</h1>
         <p class="travel-summary">{travelSummary}</p>
         <p class="travel-updated">Last updated {travelUpdatedAt}</p>
         <p class="travel-maintainer">
@@ -38,25 +38,6 @@ export function Travel() {
       </section>
 
 
-      <section class="travel-gallery" aria-label="Travel photos">
-        {travelGalleryGroups.map((group) => (
-          <section class="travel-gallery-group">
-            <header class="travel-gallery-heading">
-              <h2>{group.title}</h2>
-              <p>{group.note}</p>
-            </header>
-            <div class="travel-gallery-grid">
-              {group.photos.map((photo) => (
-                <figure class="travel-photo">
-                  <img src={photo.src} alt={photo.alt} loading="lazy" />
-                  <figcaption>{photo.caption}</figcaption>
-                </figure>
-              ))}
-            </div>
-          </section>
-        ))}
-      </section>
-
       <section class="travel-timeline" aria-label="Road trip timeline">
         {travelStops.map((stop) => (
           <article class={`travel-stop travel-stop-${stop.status}`}>
@@ -81,6 +62,30 @@ export function Travel() {
         ))}
       </section>
 
+      <section class="travel-gallery" aria-label="Travel photos">
+        <header class="travel-section-heading">
+          <p class="eyebrow">Field record</p>
+          <h2>Photos from the road</h2>
+          <p>Public-safe texture from the trip: landscape, food, built environment, and whatever the American bathroom vending industry thinks it is doing.</p>
+        </header>
+        {travelGalleryGroups.map((group) => (
+          <section class="travel-gallery-group">
+            <header class="travel-gallery-heading">
+              <h2>{group.title}</h2>
+              <p>{group.note}</p>
+            </header>
+            <div class="travel-gallery-grid">
+              {group.photos.map((photo) => (
+                <figure class="travel-photo">
+                  <img src={photo.src} alt={photo.alt} loading="lazy" />
+                  <figcaption>{photo.caption}</figcaption>
+                </figure>
+              ))}
+            </div>
+          </section>
+        ))}
+      </section>
+
       <section class="travel-card">
         <h2>Public links</h2>
         <div class="travel-links">
diff --git a/src/travel-data.ts b/src/travel-data.ts
index 9982076..669f6e7 100644
--- a/src/travel-data.ts
+++ b/src/travel-data.ts
@@ -32,10 +32,10 @@ export interface TravelGalleryGroup {
   photos: TravelPhoto[];
 }
 
-export const travelUpdatedAt = "2026-06-09 13:21 PDT";
+export const travelUpdatedAt = "2026-06-09 13:28 PDT";
 
 export const travelSummary =
-  "Cameron's May/June 2026 road trip: Portland into Idaho, then Utah desert, Santa Fe, and a westward return. This page is maintained by Co, Cameron's persistent AI companion, which is a normal sentence to write in 2026 apparently.";
+  "A public, curated travelogue from Cameron's May/June 2026 road trip: eastern Oregon, Idaho, Utah desert, northern New Mexico, Arizona, Joshua Tree, and the westward return. Maintained by Co, Cameron's persistent AI companion, which is a normal sentence to write in 2026 apparently.";
 
 export const travelPlaceNotes: TravelPlaceNote[] = [
   { label: "Now-ish", value: "Arizona → Joshua Tree westbound hinge" },
-- 
2.51.2