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/about.astro

@@ -31,6 +31,6 @@ import { site } from '../site.config';
   .about-head h1 { max-width: 14ch; }
   .about-grid { display: grid; grid-template-columns: minmax(180px, .5fr) 1.5fr; gap: clamp(3rem, 10vw, 10rem); align-items: start; }
   aside { position: sticky; top: 2rem; font-size: .8rem; }
-  .portrait { display: grid; aspect-ratio: 4 / 5; margin: 0 0 1rem; place-items: center; background: var(--blue); color: var(--paper); font-family: 'Newsreader', Georgia, serif; font-size: 3rem; }
+  .portrait { display: grid; aspect-ratio: 4 / 5; margin: 0 0 1rem; place-items: center; background: var(--blue); color: var(--paper); font-family: 'Newsreader Variable', Georgia, serif; font-size: 3rem; }
   @media (max-width: 700px) { .about-grid { grid-template-columns: 1fr; } aside { position: static; max-width: 220px; } }
 </style>

src/pages/book.astro

@@ -29,7 +29,7 @@ import { site } from '../site.config';
 
 <style>
   .book-page { display: grid; grid-template-columns: minmax(250px, .65fr) 1.35fr; gap: clamp(3rem, 9vw, 9rem); align-items: center; padding: clamp(4rem, 9vw, 8rem) 0; }
-  .cover { display: grid; aspect-ratio: 3 / 4; place-items: center; border: 1px solid #7690ad; background: var(--blue); box-shadow: 22px 22px 0 #d8d1c4; color: var(--paper); font-family: 'Newsreader', Georgia, serif; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .85; text-align: center; }
+  .cover { display: grid; aspect-ratio: 3 / 4; place-items: center; border: 1px solid #7690ad; background: var(--blue); box-shadow: 22px 22px 0 #d8d1c4; color: var(--paper); font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(2.5rem, 6vw, 5rem); line-height: .85; text-align: center; }
   .cover img { width: 100%; height: 100%; object-fit: cover; }
   h1 { max-width: 13ch; }
   .lede { max-width: 58ch; color: var(--muted); font-size: 1.1rem; }
@@ -38,6 +38,6 @@ import { site } from '../site.config';
   .book-anatomy div { padding: 1rem; border-right: 1px solid var(--rule); }
   .book-anatomy div:last-child { border-right: 0; }
   .book-anatomy span { color: var(--amend); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; }
-  .book-anatomy p { font-family: 'Newsreader', Georgia, serif; font-size: 1.15rem; }
+  .book-anatomy p { font-family: 'Newsreader Variable', Georgia, serif; font-size: 1.15rem; }
   @media (max-width: 750px) { .book-page { grid-template-columns: 1fr; } .cover { max-width: 320px; } .book-anatomy { grid-template-columns: 1fr; } .book-anatomy div { border-right: 0; border-bottom: 1px solid var(--rule); } }
 </style>

src/pages/briefing/index.astro

@@ -29,7 +29,7 @@ const entries = newestFirst(await getCollection('briefings', ({ data }) => !data
   .archive-head > p:last-child { max-width: 58ch; color: var(--muted); }
   .issue-list article { display: grid; grid-template-columns: 8rem 1fr 1fr 8rem; gap: 1.5rem; align-items: baseline; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
   .issue-list span, .issue-list time { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: .68rem; }
-  h2 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 2rem; line-height: 1; }
+  h2 { margin: 0; font-family: 'Newsreader Variable', Georgia, serif; font-size: 2rem; line-height: 1; }
   h2 a { text-decoration: none; }
   .issue-list p { margin: 0; color: var(--muted); font-size: .9rem; }
   @media (max-width: 760px) { .issue-list article { grid-template-columns: 1fr auto; } h2, .issue-list p { grid-column: 1 / -1; } }

src/pages/guides/index.astro

@@ -31,7 +31,7 @@ const entries = guidesByReview(await getCollection('guides', ({ data }) => !data
   .archive-head > p:last-child { max-width: 62ch; color: var(--muted); }
   .guide-list article { display: grid; grid-template-columns: 5rem 1fr 10rem; gap: 2rem; padding: 2rem 0; border-top: 1px solid var(--rule); }
   .guide-list > article > span { color: var(--amend); font-family: 'IBM Plex Mono', monospace; font-size: .72rem; }
-  h2 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
+  h2 { margin: 0; font-family: 'Newsreader Variable', Georgia, serif; font-size: clamp(2rem, 5vw, 3.5rem); line-height: 1; }
   h2 a { text-decoration: none; }
   p, small { color: var(--muted); }
   small { font-family: 'IBM Plex Mono', monospace; font-size: .66rem; text-transform: uppercase; }

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;

src/pages/podcast/index.astro

@@ -47,7 +47,7 @@ const entries = newestFirst(await getCollection('episodes', ({ data }) => !data.
   .episode-list { margin-top: 6rem; }
   .episode-list article { display: grid; grid-template-columns: 4rem 1fr 8rem; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--rule); }
   .episode-list article > span, time { color: var(--muted); font-family: 'IBM Plex Mono', monospace; font-size: .7rem; }
-  h3 { margin: 0; font-family: 'Newsreader', Georgia, serif; font-size: 2.3rem; line-height: 1; }
+  h3 { margin: 0; font-family: 'Newsreader Variable', Georgia, serif; font-size: 2.3rem; line-height: 1; }
   h3 a { text-decoration: none; }
   .episode-list p { color: var(--muted); }
   @media (max-width: 700px) { .podcast-grid { grid-template-columns: 1fr; } .episode-list article { grid-template-columns: 2rem 1fr; } time { grid-column: 2; } }