Apply the publication's thesis to its own design

- Self-host Newsreader/Inter/IBM Plex Mono via fontsource (no external requests)
- Open each story with its trust anatomy: pattern moved into the article
  header, expanded by default; review date flags itself when overdue
- Homepage shows only what exists: podcast, book, and guide placeholders
  replaced by one honest roadmap note
- Story-card diagram now drawn from the story's own trust pattern; the
  failure link encodes status (dashed developing, broken disputed, solid
  resolved)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

src/pages/index.astro

@@ -29,7 +29,11 @@ const latestEpisode = episodes[0];
         </p>
         <div class="hero-actions">
           {featured && <a class="button primary" href={`/stories/${featured.id}`}>Read the current story</a>}
-          <a class="button" href="/podcast">Listen to the podcast</a>
+          {latestEpisode ? (
+            <a class="button" href="/podcast">Listen to the podcast</a>
+          ) : (
+            <a class="button" href="/about">How this publication works</a>
+          )}
         </div>
       </div>
     </div>
@@ -63,74 +67,61 @@ const latestEpisode = episodes[0];
     </div>
   </section>
 
-  <section class="shell listening">
-    <div class="section-rule">
-      <h2 class="section-title">Listen</h2>
-      <a href="/podcast">Podcast archive →</a>
-    </div>
-    <div class="listen-grid">
-      <div class="sound-mark" aria-hidden="true">
-        <span></span><span></span><span></span><span></span><span></span>
+  {latestEpisode && (
+    <section class="shell listening">
+      <div class="section-rule">
+        <h2 class="section-title">Listen</h2>
+        <a href="/podcast">Podcast archive →</a>
       </div>
-      <div>
-        {latestEpisode ? (
-          <>
-            <p class="eyebrow">Episode {latestEpisode.data.episode}</p>
-            <h3><a href={`/podcast/${latestEpisode.id}`}>{latestEpisode.data.title}</a></h3>
-            <p>{latestEpisode.data.description}</p>
-          </>
-        ) : (
-          <>
-            <p class="eyebrow">Podcast</p>
-            <h3>Who gets to act in our name?</h3>
-            <p>Conversations about authority, recovery, delegation, and the human lives hidden inside technical systems. Episodes and full transcripts will live here.</p>
-          </>
-        )}
+      <div class="listen-grid">
+        <div class="sound-mark" aria-hidden="true">
+          <span></span><span></span><span></span><span></span><span></span>
+        </div>
+        <div>
+          <p class="eyebrow">Episode {latestEpisode.data.episode}</p>
+          <h3><a href={`/podcast/${latestEpisode.id}`}>{latestEpisode.data.title}</a></h3>
+          <p>{latestEpisode.data.description}</p>
+        </div>
       </div>
-    </div>
-  </section>
+    </section>
+  )}
 
-  <section class="shell guides">
-    <div class="section-rule">
-      <h2 class="section-title">Field guides</h2>
-      <a href="/guides">All guides →</a>
-    </div>
-    {guides.length > 0 ? (
+  {guides.length > 0 && (
+    <section class="shell guides">
+      <div class="section-rule">
+        <h2 class="section-title">Field guides</h2>
+        <a href="/guides">All guides →</a>
+      </div>
       <div class="guide-grid">
-        {guides.slice(0, 3).map((guide, index) => (
+        {guides.slice(0, 3).map((guide) => (
           <article>
-            <span class="guide-number">0{index + 1}</span>
+            <small class="guide-reviewed">Reviewed {formatDate(guide.data.reviewed)}</small>
             <h3><a href={`/guides/${guide.id}`}>{guide.data.title}</a></h3>
             <p>{guide.data.description}</p>
-            <small>Reviewed {formatDate(guide.data.reviewed)}</small>
           </article>
         ))}
       </div>
-    ) : (
-      <div class="guide-grid planned">
-        {['Passkeys', 'Government wallets', 'Agent authority'].map((title, index) => (
-          <article>
-            <span class="guide-number">0{index + 1}</span>
-            <h3>{title}</h3>
-            <p>In preparation. Published only when the review date means something.</p>
-          </article>
-        ))}
-      </div>
-    )}
-  </section>
+    </section>
+  )}
 
-  <section class="shell book-strip">
-    <div class="book-object" aria-hidden="true"><span>THE<br />BOOK</span></div>
-    <div>
-      <p class="eyebrow">The book</p>
-      <h2>A permanent home, not a checkout widget.</h2>
-      <p>The book page is ready for its real title, cover, sample chapter, argument, and purchase route—without inventing details before they are supplied.</p>
-      <a class="button" href="/book">Visit the book page</a>
-    </div>
-  </section>
+  {site.book.enabled && (
+    <section class="shell book-strip">
+      <div class="book-object" aria-hidden="true"><span>THE<br />BOOK</span></div>
+      <div>
+        <p class="eyebrow">The book</p>
+        <h2>{site.book.title}</h2>
+        <p>{site.book.description}</p>
+        <a class="button" href="/book">Visit the book page</a>
+      </div>
+    </section>
+  )}
 
   <div class="shell maintenance-wrap">
     <RecentMaintenance />
+    <p class="planned-note">
+      Planned but not yet real: the podcast{site.book.enabled ? '' : ', the book'}, and more guides.
+      Nothing ships here before it exists — <a href={`${site.repositoryUrl}/src/branch/main/ROADMAP.md`}>see the roadmap ↗</a>
+    </p>
   </div>
 </BaseLayout>
 
@@ -153,7 +144,7 @@ const latestEpisode = episodes[0];
   }
 
   .hero-note p:first-child {
-    font-family: 'Newsreader', Georgia, serif;
+    font-family: 'Newsreader Variable', Georgia, serif;
     font-size: 1.45rem;
     line-height: 1.2;
   }
@@ -197,7 +188,7 @@ const latestEpisode = episodes[0];
   .guide-grid h3,
   .book-strip h2 {
     margin: 0.35rem 0;
-    font-family: 'Newsreader', Georgia, serif;
+    font-family: 'Newsreader Variable', Georgia, serif;
     font-weight: 600;
     letter-spacing: -0.025em;
     line-height: 1;
@@ -292,10 +283,13 @@ const latestEpisode = episodes[0];
     border-right: 0;
   }
 
-  .guide-number {
-    color: var(--amend);
+  .guide-reviewed {
+    display: block;
+    color: var(--muted);
     font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.72rem;
+    font-size: 0.65rem;
+    letter-spacing: 0.05em;
+    text-transform: uppercase;
   }
 
   .guide-grid h3 {
@@ -303,18 +297,14 @@ const latestEpisode = episodes[0];
     font-size: 2rem;
   }
 
-  .guide-grid p,
-  .guide-grid small {
+  .guide-grid p {
     color: var(--muted);
   }
 
-  .guide-grid small {
-    font-family: 'IBM Plex Mono', monospace;
-    font-size: 0.65rem;
-  }
-
-  .planned article {
-    opacity: 0.75;
+  .planned-note {
+    margin: 2rem 0 0;
+    color: var(--muted);
+    font-size: 0.85rem;
   }
 
   .book-strip {
@@ -335,7 +325,7 @@ const latestEpisode = episodes[0];
     border: 1px solid #7690ad;
     box-shadow: 18px 18px 0 #0e2c51;
     background: #102f55;
-    font-family: 'Newsreader', Georgia, serif;
+    font-family: 'Newsreader Variable', Georgia, serif;
     font-size: 2.5rem;
     line-height: 0.9;
     text-align: center;