diff --git a/src/pages/index.astro b/src/pages/index.astro
index 4583c05..54f6723 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -44,6 +44,10 @@ const featuredTools = pickCoreTools(allTools);
   <!-- HERO -->
   <section class="hero">
     <div class="container">
+      <div class="masthead-bar">
+        <span class="masthead-name">ML Systems</span>
+        <span class="masthead-meta">An open archive · Est. 2026</span>
+      </div>
       <div class="hero-grid">
         <div>
           <h1 class="hero-h1">
@@ -97,23 +101,29 @@ const featuredTools = pickCoreTools(allTools);
               All articles →
             </a>
           </div>
-          <div class="latest-grid">
-            {featured.map((p) => (
-              <a class="article-card" href={`/blog/${p.id}`}>
-                <div class="article-meta">
-                  {p.data.topicId && <span class="chip chip--sm">{topicName(p.data.topicId)}</span>}
-                </div>
-                <h3 class="article-title">{p.data.title}</h3>
-                <p class="article-summary">{p.data.summary}</p>
-                <div class="article-foot">
-                  <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
-                  <span>
-                    {formatDate(p.data.date)} · {p.data.readMin} min
+          <ol class="idx-list">
+            {featured.map((p, i) => (
+              <li class="idx-row">
+                <a class="idx-link" href={`/blog/${p.id}`}>
+                  <span class="idx-num">{String(i + 1).padStart(2, '0')}</span>
+                  <div class="idx-main">
+                    <h3 class="idx-title">{p.data.title}</h3>
+                    <p class="idx-sum">{p.data.summary}</p>
+                    <div class="idx-meta">
+                      {p.data.topicId && <span class="idx-topic">{topicName(p.data.topicId)}</span>}
+                      <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
+                      <span>
+                        {formatDate(p.data.date)} · {p.data.readMin} min
+                      </span>
+                    </div>
+                  </div>
+                  <span class="idx-arrow" aria-hidden="true">
+                    →
                   </span>
-                </div>
-              </a>
+                </a>
+              </li>
             ))}
-          </div>
+          </ol>
         </div>
       </section>
     )
@@ -132,23 +142,29 @@ const featuredTools = pickCoreTools(allTools);
               All articles →
             </a>
           </div>
-          <div class="latest-grid">
-            {recent.map((p) => (
-              <a class="article-card" href={`/blog/${p.id}`}>
-                <div class="article-meta">
-                  {p.data.topicId && <span class="chip chip--sm">{topicName(p.data.topicId)}</span>}
-                </div>
-                <h3 class="article-title">{p.data.title}</h3>
-                <p class="article-summary">{p.data.summary}</p>
-                <div class="article-foot">
-                  <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
-                  <span>
-                    {formatDate(p.data.date)} · {p.data.readMin} min
+          <ol class="idx-list">
+            {recent.map((p, i) => (
+              <li class="idx-row">
+                <a class="idx-link" href={`/blog/${p.id}`}>
+                  <span class="idx-num">{String(i + 1).padStart(2, '0')}</span>
+                  <div class="idx-main">
+                    <h3 class="idx-title">{p.data.title}</h3>
+                    <p class="idx-sum">{p.data.summary}</p>
+                    <div class="idx-meta">
+                      {p.data.topicId && <span class="idx-topic">{topicName(p.data.topicId)}</span>}
+                      <span>{p.authors.map((a) => a.data.name).join(', ')}</span>
+                      <span>
+                        {formatDate(p.data.date)} · {p.data.readMin} min
+                      </span>
+                    </div>
+                  </div>
+                  <span class="idx-arrow" aria-hidden="true">
+                    →
                   </span>
-                </div>
-              </a>
+                </a>
+              </li>
             ))}
-          </div>
+          </ol>
         </div>
       </section>
     )
@@ -354,6 +370,142 @@ const featuredTools = pickCoreTools(allTools);
 </BaseLayout>
 
 <style>
+  /* Zine masthead — a running rule with mono wordmark + tagline at the ends */
+  .masthead-bar {
+    display: flex;
+    justify-content: space-between;
+    align-items: baseline;
+    gap: 16px;
+    padding-bottom: 14px;
+    margin-bottom: 40px;
+    border-bottom: 1px solid var(--ink);
+    font-family: var(--font-mono);
+    font-size: 12px;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+  }
+  .masthead-name {
+    font-weight: 600;
+    color: var(--ink);
+  }
+  .masthead-meta {
+    color: var(--ink-3);
+  }
+  @media (max-width: 560px) {
+    .masthead-meta {
+      display: none;
+    }
+  }
+
+  /* Editorial index — numbered, ruled list instead of a card grid */
+  .idx-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    border-top: 1px solid var(--line);
+  }
+  .idx-row {
+    border-bottom: 1px solid var(--line);
+  }
+  .idx-link {
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: baseline;
+    column-gap: 28px;
+    padding: 26px 8px;
+    color: inherit;
+    text-decoration: none;
+    transition:
+      background 0.15s ease,
+      padding 0.18s ease;
+  }
+  .idx-link:hover {
+    background: var(--accent-soft);
+    padding-left: 16px;
+    padding-right: 16px;
+  }
+  .idx-num {
+    font-family: var(--font-mono);
+    font-size: 13px;
+    font-weight: 500;
+    color: var(--ink-4);
+    letter-spacing: 0.04em;
+    padding-top: 6px;
+    transition: color 0.15s ease;
+  }
+  .idx-link:hover .idx-num {
+    color: var(--accent);
+  }
+  .idx-main {
+    min-width: 0;
+  }
+  .idx-title {
+    font-family: var(--font-display);
+    font-size: clamp(24px, 3.2vw, 34px);
+    font-weight: 400;
+    line-height: 1.12;
+    letter-spacing: -0.015em;
+    color: var(--ink);
+    margin: 0 0 10px;
+    transition: color 0.15s ease;
+  }
+  .idx-link:hover .idx-title {
+    color: var(--accent);
+  }
+  .idx-sum {
+    font-family: var(--font-read);
+    font-size: 16px;
+    line-height: 1.55;
+    color: var(--ink-2);
+    margin: 0 0 14px;
+    max-width: 60ch;
+  }
+  .idx-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 14px;
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    letter-spacing: 0.03em;
+    color: var(--ink-3);
+    text-transform: uppercase;
+  }
+  .idx-topic {
+    color: var(--accent);
+    font-weight: 500;
+  }
+  .idx-arrow {
+    font-family: var(--font-mono);
+    font-size: 18px;
+    color: var(--ink-4);
+    align-self: center;
+    opacity: 0;
+    transform: translateX(-6px);
+    transition:
+      opacity 0.18s ease,
+      transform 0.18s ease,
+      color 0.15s ease;
+  }
+  .idx-link:hover .idx-arrow {
+    opacity: 1;
+    transform: none;
+    color: var(--accent);
+  }
+  @media (max-width: 640px) {
+    .idx-link {
+      grid-template-columns: auto 1fr;
+      column-gap: 16px;
+      padding: 22px 4px;
+    }
+    .idx-arrow {
+      display: none;
+    }
+    .idx-title {
+      margin-bottom: 8px;
+    }
+  }
+
   .kernel-toggle {
     background: none;
     border: none;
diff --git a/src/styles/global.css b/src/styles/global.css
index b8411e6..a2014fc 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -47,6 +47,13 @@ html {
   --accent-2: #8a3318;
   --accent-soft: rgba(184, 67, 31, 0.08);
 
+  /* Elevated surfaces (dialogs, popovers) — raised above the page */
+  --elevated: #fffdf8;
+  --elevated-border: var(--line-2);
+  --elevated-shadow:
+    0 20px 60px -20px rgba(60, 40, 20, 0.28), 0 8px 24px -8px rgba(60, 40, 20, 0.12);
+  --scrim: rgba(24, 20, 14, 0.32);
+
   /* Highlight tints (light) */
   --mark-gray: #ebeced;
   --mark-brown: #e9e5e3;
@@ -128,6 +135,13 @@ html {
   --accent-2: #ffa07a;
   --accent-soft: rgba(255, 122, 77, 0.1);
 
+  /* Elevated surfaces (dark): lighter than the page + a visible border, since
+     shadows can't separate a surface from a near-black background. */
+  --elevated: #211d16;
+  --elevated-border: #4a4234;
+  --elevated-shadow: inset 0 1px 0 rgba(255, 244, 230, 0.05), 0 24px 60px -16px rgba(0, 0, 0, 0.7);
+  --scrim: rgba(0, 0, 0, 0.62);
+
   /* Highlight tints (dark) — translucent so light text stays readable */
   --mark-gray: rgba(255, 255, 255, 0.1);
   --mark-brown: rgba(150, 110, 90, 0.28);
@@ -1027,7 +1041,7 @@ a.hashtag:hover {
 
 /* Side panel (right of community) */
 .side-panel {
-  border: 1px solid var(--line);
+  border: 1px solid var(--line-2);
   border-radius: var(--radius-md);
   background: var(--paper-2);
   padding: 28px;
@@ -1419,17 +1433,17 @@ a.hashtag:hover {
   position: absolute;
   inset: 0;
   border: none;
-  background: rgba(20, 16, 10, 0.45);
+  background: var(--scrim);
   cursor: pointer;
 }
 .nl-panel {
   position: relative;
   width: min(440px, 100%);
-  background: var(--paper);
-  border: 1px solid var(--line);
+  background: var(--elevated);
+  border: 1px solid var(--elevated-border);
   border-radius: var(--radius-md);
   padding: 28px;
-  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
+  box-shadow: var(--elevated-shadow);
 }
 .nl-panel h3 {
   font-family: var(--font-display);
@@ -2630,7 +2644,7 @@ a.hashtag:hover {
 .search-backdrop {
   position: absolute;
   inset: 0;
-  background: color-mix(in srgb, var(--paper) 60%, transparent);
+  background: var(--scrim);
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
   border: none;
@@ -2643,12 +2657,10 @@ a.hashtag:hover {
   max-height: calc(100vh - 96px);
   display: flex;
   flex-direction: column;
-  background: var(--paper);
-  border: 1px solid var(--line-2);
+  background: var(--elevated);
+  border: 1px solid var(--elevated-border);
   border-radius: 14px;
-  box-shadow:
-    0 20px 60px -20px rgba(0, 0, 0, 0.25),
-    0 8px 24px -8px rgba(0, 0, 0, 0.1);
+  box-shadow: var(--elevated-shadow);
   overflow: hidden;
   animation: search-pop 0.16s ease-out;
 }