diff --git a/examples/1900/index.html b/examples/1900/index.html
index 16862e5..ce28d0b 100644
--- a/examples/1900/index.html
+++ b/examples/1900/index.html
@@ -222,6 +222,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -858,6 +936,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1900 rule: the new century entering through an iron flower.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-current="page" aria-label="Viewing 1900">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1900</span>
       <a href="../../corpus/1900.md">Read the full 1900 corpus</a>
diff --git a/examples/1901/index.html b/examples/1901/index.html
index f34ddf7..a58bad0 100644
--- a/examples/1901/index.html
+++ b/examples/1901/index.html
@@ -232,6 +232,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -873,6 +951,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1901 rule: the floral line being squared into a room.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-current="page" aria-label="Viewing 1901">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1901</span>
       <a href="../../corpus/1901.md">Read the full 1901 corpus</a>
diff --git a/examples/1902/index.html b/examples/1902/index.html
index 8030fe5..980f353 100644
--- a/examples/1902/index.html
+++ b/examples/1902/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -838,6 +916,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1902 rule: the decorative arts standing in public and naming their ambitions.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-current="page" aria-label="Viewing 1902">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1902</span>
       <a href="../../corpus/1902.md">Read the full 1902 corpus</a>
diff --git a/examples/1903/index.html b/examples/1903/index.html
index 63181a6..60f3b33 100644
--- a/examples/1903/index.html
+++ b/examples/1903/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -855,6 +933,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1903 rule: the handmade ideal meeting the engine and the printed plate.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-current="page" aria-label="Viewing 1903">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1903</span>
       <a href="../../corpus/1903.md">Read the full 1903 corpus</a>
diff --git a/examples/1904/index.html b/examples/1904/index.html
index e54c586..aaca647 100644
--- a/examples/1904/index.html
+++ b/examples/1904/index.html
@@ -222,6 +222,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -856,6 +934,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1904 rule: ornament crossing a tiled platform into modern systems.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-current="page" aria-label="Viewing 1904">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1904</span>
       <a href="../../corpus/1904.md">Read the full 1904 corpus</a>
diff --git a/examples/1905/index.html b/examples/1905/index.html
index 3a5901e..1d8b886 100644
--- a/examples/1905/index.html
+++ b/examples/1905/index.html
@@ -232,6 +232,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -874,6 +952,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1905 rule: elegance under pressure from wild color and hard edges.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-current="page" aria-label="Viewing 1905">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1905</span>
       <a href="../../corpus/1905.md">Read the full 1905 corpus</a>
diff --git a/examples/1906/index.html b/examples/1906/index.html
index d8471ed..6866763 100644
--- a/examples/1906/index.html
+++ b/examples/1906/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -840,6 +918,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1906 rule: ornament learning to stand up as structure.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-current="page" aria-label="Viewing 1906">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1906</span>
       <a href="../../corpus/1906.md">Read the full 1906 corpus</a>
diff --git a/examples/1907/index.html b/examples/1907/index.html
index 6def2ee..dfccf17 100644
--- a/examples/1907/index.html
+++ b/examples/1907/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -854,6 +932,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1907 rule: the hand, the factory, and the fractured figure entering the same argument.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-current="page" aria-label="Viewing 1907">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1907</span>
       <a href="../../corpus/1907.md">Read the full 1907 corpus</a>
diff --git a/examples/1908/index.html b/examples/1908/index.html
index b7587ef..4363464 100644
--- a/examples/1908/index.html
+++ b/examples/1908/index.html
@@ -222,6 +222,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -858,6 +936,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1908 rule: the decorative century being cross-examined by cubes, cars, and plain walls.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-current="page" aria-label="Viewing 1908">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1908</span>
       <a href="../../corpus/1908.md">Read the full 1908 corpus</a>
diff --git a/examples/1909/index.html b/examples/1909/index.html
index 2e40fc9..7ea2f7a 100644
--- a/examples/1909/index.html
+++ b/examples/1909/index.html
@@ -232,6 +232,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -877,6 +955,56 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1909 rule: speed and color claiming the future before anyone has agreed what the future is.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1900/index.html" aria-label="Open the 1900 example">
+          <span class="year-chip-num">1900</span>
+          <span class="year-chip-stamp">Paris 1900</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1901/index.html" aria-label="Open the 1901 example">
+          <span class="year-chip-num">1901</span>
+          <span class="year-chip-stamp">Secession line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1902/index.html" aria-label="Open the 1902 example">
+          <span class="year-chip-num">1902</span>
+          <span class="year-chip-stamp">Turin 1902</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1903/index.html" aria-label="Open the 1903 example">
+          <span class="year-chip-num">1903</span>
+          <span class="year-chip-stamp">Workshops</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1904/index.html" aria-label="Open the 1904 example">
+          <span class="year-chip-num">1904</span>
+          <span class="year-chip-stamp">Vienna grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1905/index.html" aria-label="Open the 1905 example">
+          <span class="year-chip-num">1905</span>
+          <span class="year-chip-stamp">Wild color</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #7a5230; --chip-c: #a8472f;" href="../1906/index.html" aria-label="Open the 1906 example">
+          <span class="year-chip-num">1906</span>
+          <span class="year-chip-stamp">Stone curve</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c5a3c; --chip-b: #7d3b53; --chip-c: #3f6b5e;" href="../1907/index.html" aria-label="Open the 1907 example">
+          <span class="year-chip-num">1907</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c6b3f; --chip-b: #3f6b5e; --chip-c: #b89150;" href="../1908/index.html" aria-label="Open the 1908 example">
+          <span class="year-chip-num">1908</span>
+          <span class="year-chip-stamp">Ornament trial</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-current="page" aria-label="Viewing 1909">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1909</span>
       <a href="../../corpus/1909.md">Read the full 1909 corpus</a>
diff --git a/examples/1910/index.html b/examples/1910/index.html
index b1db6a1..e01cf81 100644
--- a/examples/1910/index.html
+++ b/examples/1910/index.html
@@ -221,6 +221,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -860,6 +938,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1910 rule: the old room struck by a motor and a lamp.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-current="page" aria-label="Viewing 1910">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1910</span>
       <a href="../../corpus/1910.md">Read the full 1910 corpus</a>
diff --git a/examples/1911/index.html b/examples/1911/index.html
index fd2caf3..47ba690 100644
--- a/examples/1911/index.html
+++ b/examples/1911/index.html
@@ -219,6 +219,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -851,6 +929,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1911 rule: color looking for a system and a soul.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-current="page" aria-label="Viewing 1911">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1911</span>
       <a href="../../corpus/1911.md">Read the full 1911 corpus</a>
diff --git a/examples/1912/index.html b/examples/1912/index.html
index 3aaa3f3..6279651 100644
--- a/examples/1912/index.html
+++ b/examples/1912/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -850,6 +928,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1912 rule: reality cut into fragments and glued back as modern form.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-current="page" aria-label="Viewing 1912">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1912</span>
       <a href="../../corpus/1912.md">Read the full 1912 corpus</a>
diff --git a/examples/1913/index.html b/examples/1913/index.html
index e9aed10..94c11fa 100644
--- a/examples/1913/index.html
+++ b/examples/1913/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -866,6 +944,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1913 rule: the public suddenly forced to process modern force.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-current="page" aria-label="Viewing 1913">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1913</span>
       <a href="../../corpus/1913.md">Read the full 1913 corpus</a>
diff --git a/examples/1914/index.html b/examples/1914/index.html
index 58bc65c..1bdf01f 100644
--- a/examples/1914/index.html
+++ b/examples/1914/index.html
@@ -221,6 +221,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -875,6 +953,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1914 rule: the design future drafted into history.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-current="page" aria-label="Viewing 1914">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1914</span>
       <a href="../../corpus/1914.md">Read the full 1914 corpus</a>
diff --git a/examples/1915/index.html b/examples/1915/index.html
index b08c210..03e1cd4 100644
--- a/examples/1915/index.html
+++ b/examples/1915/index.html
@@ -219,6 +219,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -854,6 +932,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1915 rule: the page as battlefield and icon wall.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-current="page" aria-label="Viewing 1915">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1915</span>
       <a href="../../corpus/1915.md">Read the full 1915 corpus</a>
diff --git a/examples/1916/index.html b/examples/1916/index.html
index 2364b47..232d4c7 100644
--- a/examples/1916/index.html
+++ b/examples/1916/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -853,6 +931,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1916 rule: nonsense against war, clarity against chaos.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-current="page" aria-label="Viewing 1916">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1916</span>
       <a href="../../corpus/1916.md">Read the full 1916 corpus</a>
diff --git a/examples/1917/index.html b/examples/1917/index.html
index 879a5c8..e8bd2fb 100644
--- a/examples/1917/index.html
+++ b/examples/1917/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -867,6 +945,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1917 rule: the future trying to draw itself as a hard line.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-current="page" aria-label="Viewing 1917">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1917</span>
       <a href="../../corpus/1917.md">Read the full 1917 corpus</a>
diff --git a/examples/1918/index.html b/examples/1918/index.html
index ca62619..6245774 100644
--- a/examples/1918/index.html
+++ b/examples/1918/index.html
@@ -221,6 +221,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -863,6 +941,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1918 rule: a world ending in noise while abstraction lowers its voice to white.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-current="page" aria-label="Viewing 1918">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1918</span>
       <a href="../../corpus/1918.md">Read the full 1918 corpus</a>
diff --git a/examples/1919/index.html b/examples/1919/index.html
index db7ceeb..2308ecf 100644
--- a/examples/1919/index.html
+++ b/examples/1919/index.html
@@ -219,6 +219,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -852,6 +930,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1919 rule: a workshop trying to build a future from ruins.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #b8843d; --chip-b: #9c4a3c; --chip-c: #6f8f86;" href="../1909/index.html" aria-label="Open the 1909 example">
+          <span class="year-chip-num">1909</span>
+          <span class="year-chip-stamp">Speed myth</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1910/index.html" aria-label="Open the 1910 example">
+          <span class="year-chip-num">1910</span>
+          <span class="year-chip-stamp">Futurist</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1911/index.html" aria-label="Open the 1911 example">
+          <span class="year-chip-num">1911</span>
+          <span class="year-chip-stamp">Blue Rider</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1912/index.html" aria-label="Open the 1912 example">
+          <span class="year-chip-num">1912</span>
+          <span class="year-chip-stamp">Collage</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1913/index.html" aria-label="Open the 1913 example">
+          <span class="year-chip-num">1913</span>
+          <span class="year-chip-stamp">Armory</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1914/index.html" aria-label="Open the 1914 example">
+          <span class="year-chip-num">1914</span>
+          <span class="year-chip-stamp">Werkbund</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1915/index.html" aria-label="Open the 1915 example">
+          <span class="year-chip-num">1915</span>
+          <span class="year-chip-stamp">Zero-ten</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b9923f; --chip-b: #1c1f24; --chip-c: #c43d2a;" href="../1916/index.html" aria-label="Open the 1916 example">
+          <span class="year-chip-num">1916</span>
+          <span class="year-chip-stamp">Dada</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f3b2c; --chip-b: #a83a25; --chip-c: #5a6b3f;" href="../1917/index.html" aria-label="Open the 1917 example">
+          <span class="year-chip-num">1917</span>
+          <span class="year-chip-stamp">De Stijl</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #1d1b18; --chip-c: #c79a3c;" href="../1918/index.html" aria-label="Open the 1918 example">
+          <span class="year-chip-num">1918</span>
+          <span class="year-chip-stamp">Armistice</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-current="page" aria-label="Viewing 1919">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1919</span>
       <a href="../../corpus/1919.md">Read the full 1919 corpus</a>
diff --git a/examples/1920/index.html b/examples/1920/index.html
index 52e1d93..98941e8 100644
--- a/examples/1920/index.html
+++ b/examples/1920/index.html
@@ -226,6 +226,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -864,6 +942,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1920 rule: postwar order learning to dance.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-current="page" aria-label="Viewing 1920">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1920</span>
       <a href="../../corpus/1920.md">Read the full 1920 corpus</a>
diff --git a/examples/1921/index.html b/examples/1921/index.html
index 7461ae9..f06649e 100644
--- a/examples/1921/index.html
+++ b/examples/1921/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -852,6 +930,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1921 rule: modernism learning its exercises.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-current="page" aria-label="Viewing 1921">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1921</span>
       <a href="../../corpus/1921.md">Read the full 1921 corpus</a>
diff --git a/examples/1922/index.html b/examples/1922/index.html
index 4d125e1..25d625b 100644
--- a/examples/1922/index.html
+++ b/examples/1922/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -852,6 +930,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1922 rule: angular modernism under a gold spotlight.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-current="page" aria-label="Viewing 1922">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1922</span>
       <a href="../../corpus/1922.md">Read the full 1922 corpus</a>
diff --git a/examples/1923/index.html b/examples/1923/index.html
index ec463ce..f87cfc6 100644
--- a/examples/1923/index.html
+++ b/examples/1923/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -863,6 +941,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1923 rule: the machine becoming a domestic philosophy.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-current="page" aria-label="Viewing 1923">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1923</span>
       <a href="../../corpus/1923.md">Read the full 1923 corpus</a>
diff --git a/examples/1924/index.html b/examples/1924/index.html
index ad90c23..bd33944 100644
--- a/examples/1924/index.html
+++ b/examples/1924/index.html
@@ -226,6 +226,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -868,6 +946,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1924 rule: the dream and the grid waiting for Paris.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-current="page" aria-label="Viewing 1924">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1924</span>
       <a href="../../corpus/1924.md">Read the full 1924 corpus</a>
diff --git a/examples/1925/index.html b/examples/1925/index.html
index 4c1f778..d97f021 100644
--- a/examples/1925/index.html
+++ b/examples/1925/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -855,6 +933,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1925 rule: luxury and the machine arguing over the same future.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-current="page" aria-label="Viewing 1925">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1925</span>
       <a href="../../corpus/1925.md">Read the full 1925 corpus</a>
diff --git a/examples/1926/index.html b/examples/1926/index.html
index 921f728..2fd827a 100644
--- a/examples/1926/index.html
+++ b/examples/1926/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -856,6 +934,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1926 rule: the future moves indoors and starts using a grid.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-current="page" aria-label="Viewing 1926">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1926</span>
       <a href="../../corpus/1926.md">Read the full 1926 corpus</a>
diff --git a/examples/1927/index.html b/examples/1927/index.html
index 8de8392..c637163 100644
--- a/examples/1927/index.html
+++ b/examples/1927/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -867,6 +945,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1927 rule: the modern line learns to speak to crowds.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-current="page" aria-label="Viewing 1927">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1927</span>
       <a href="../../corpus/1927.md">Read the full 1927 corpus</a>
diff --git a/examples/1928/index.html b/examples/1928/index.html
index 59677cb..fa92c32 100644
--- a/examples/1928/index.html
+++ b/examples/1928/index.html
@@ -226,6 +226,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -869,6 +947,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1928 rule: modernism becomes a manual for use.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-current="page" aria-label="Viewing 1928">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1928</span>
       <a href="../../corpus/1928.md">Read the full 1928 corpus</a>
diff --git a/examples/1929/index.html b/examples/1929/index.html
index 58305dd..09fb43d 100644
--- a/examples/1929/index.html
+++ b/examples/1929/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -857,6 +935,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1929 rule: polished modernity at the edge of collapse.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #33484f; --chip-b: #cfa94a; --chip-c: #2c2a26;" href="../1919/index.html" aria-label="Open the 1919 example">
+          <span class="year-chip-num">1919</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1920/index.html" aria-label="Open the 1920 example">
+          <span class="year-chip-num">1920</span>
+          <span class="year-chip-stamp">Jazz age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1921/index.html" aria-label="Open the 1921 example">
+          <span class="year-chip-num">1921</span>
+          <span class="year-chip-stamp">Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1922/index.html" aria-label="Open the 1922 example">
+          <span class="year-chip-num">1922</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1923/index.html" aria-label="Open the 1923 example">
+          <span class="year-chip-num">1923</span>
+          <span class="year-chip-stamp">Machine modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1924/index.html" aria-label="Open the 1924 example">
+          <span class="year-chip-num">1924</span>
+          <span class="year-chip-stamp">Roaring line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1925/index.html" aria-label="Open the 1925 example">
+          <span class="year-chip-num">1925</span>
+          <span class="year-chip-stamp">Deco debut</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f0c63e; --chip-b: #16181b; --chip-c: #e23b2c;" href="../1926/index.html" aria-label="Open the 1926 example">
+          <span class="year-chip-num">1926</span>
+          <span class="year-chip-stamp">Dessau</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1a1714; --chip-b: #b8862f; --chip-c: #2c6b63;" href="../1927/index.html" aria-label="Open the 1927 example">
+          <span class="year-chip-num">1927</span>
+          <span class="year-chip-stamp">Futura</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d8332b; --chip-b: #1f6fb2; --chip-c: #f2c33b;" href="../1928/index.html" aria-label="Open the 1928 example">
+          <span class="year-chip-num">1928</span>
+          <span class="year-chip-stamp">New type</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-current="page" aria-label="Viewing 1929">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1929</span>
       <a href="../../corpus/1929.md">Read the full 1929 corpus</a>
diff --git a/examples/1930/index.html b/examples/1930/index.html
index ca0573e..7f5ec86 100644
--- a/examples/1930/index.html
+++ b/examples/1930/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -848,6 +926,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1930 rule: chrome optimism at the edge of scarcity.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-current="page" aria-label="Viewing 1930">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1930</span>
       <a href="../../corpus/1930.md">Read the full 1930 corpus</a>
diff --git a/examples/1931/index.html b/examples/1931/index.html
index 77c184e..940fb8a 100644
--- a/examples/1931/index.html
+++ b/examples/1931/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -850,6 +928,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1931 rule: monumental confidence with a shadow behind it.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-current="page" aria-label="Viewing 1931">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1931</span>
       <a href="../../corpus/1931.md">Read the full 1931 corpus</a>
diff --git a/examples/1932/index.html b/examples/1932/index.html
index 135c095..e91c6bd 100644
--- a/examples/1932/index.html
+++ b/examples/1932/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -872,6 +950,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1932 rule: public modernity under Depression lights.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-current="page" aria-label="Viewing 1932">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1932</span>
       <a href="../../corpus/1932.md">Read the full 1932 corpus</a>
diff --git a/examples/1933/index.html b/examples/1933/index.html
index 1f1ff21..c2604f4 100644
--- a/examples/1933/index.html
+++ b/examples/1933/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -864,6 +942,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1933 rule: a broken school and a clearer map.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-current="page" aria-label="Viewing 1933">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1933</span>
       <a href="../../corpus/1933.md">Read the full 1933 corpus</a>
diff --git a/examples/1934/index.html b/examples/1934/index.html
index 60305df..091545f 100644
--- a/examples/1934/index.html
+++ b/examples/1934/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -849,6 +927,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1934 rule: useful objects under a spotlight.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-current="page" aria-label="Viewing 1934">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1934</span>
       <a href="../../corpus/1934.md">Read the full 1934 corpus</a>
diff --git a/examples/1935/index.html b/examples/1935/index.html
index ff763ca..e15a30a 100644
--- a/examples/1935/index.html
+++ b/examples/1935/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -854,6 +932,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1935 rule: public modernity with rounded corners.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-current="page" aria-label="Viewing 1935">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1935</span>
       <a href="../../corpus/1935.md">Read the full 1935 corpus</a>
diff --git a/examples/1936/index.html b/examples/1936/index.html
index 0f9baa5..6b72975 100644
--- a/examples/1936/index.html
+++ b/examples/1936/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -874,6 +952,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1936 rule: proof under spotlights.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-current="page" aria-label="Viewing 1936">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1936</span>
       <a href="../../corpus/1936.md">Read the full 1936 corpus</a>
diff --git a/examples/1937/index.html b/examples/1937/index.html
index 6cfa118..fe5d341 100644
--- a/examples/1937/index.html
+++ b/examples/1937/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -865,6 +943,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1937 rule: beauty built under political weather.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-current="page" aria-label="Viewing 1937">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1937</span>
       <a href="../../corpus/1937.md">Read the full 1937 corpus</a>
diff --git a/examples/1938/index.html b/examples/1938/index.html
index 5ad24f2..0ca3e4a 100644
--- a/examples/1938/index.html
+++ b/examples/1938/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -850,6 +928,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1938 rule: synthetic confidence before the break.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-current="page" aria-label="Viewing 1938">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1938</span>
       <a href="../../corpus/1938.md">Read the full 1938 corpus</a>
diff --git a/examples/1939/index.html b/examples/1939/index.html
index f91864b..139402b 100644
--- a/examples/1939/index.html
+++ b/examples/1939/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -871,6 +949,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1939 rule: tomorrow on display at the edge of war.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #1c1c1c; --chip-b: #2f7d6b; --chip-c: #9c3b2f;" href="../1929/index.html" aria-label="Open the 1929 example">
+          <span class="year-chip-num">1929</span>
+          <span class="year-chip-stamp">Glass fall</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1930/index.html" aria-label="Open the 1930 example">
+          <span class="year-chip-num">1930</span>
+          <span class="year-chip-stamp">Chrome cliff</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1931/index.html" aria-label="Open the 1931 example">
+          <span class="year-chip-num">1931</span>
+          <span class="year-chip-stamp">Hard glamour</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1932/index.html" aria-label="Open the 1932 example">
+          <span class="year-chip-num">1932</span>
+          <span class="year-chip-stamp">Public modern</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1933/index.html" aria-label="Open the 1933 example">
+          <span class="year-chip-num">1933</span>
+          <span class="year-chip-stamp">After Bauhaus</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1934/index.html" aria-label="Open the 1934 example">
+          <span class="year-chip-num">1934</span>
+          <span class="year-chip-stamp">Machine art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1935/index.html" aria-label="Open the 1935 example">
+          <span class="year-chip-num">1935</span>
+          <span class="year-chip-stamp">Streamline</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e3b441; --chip-b: #1a1c18; --chip-c: #d24b2c;" href="../1936/index.html" aria-label="Open the 1936 example">
+          <span class="year-chip-num">1936</span>
+          <span class="year-chip-stamp">Deco peak</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #6f4a30; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1937/index.html" aria-label="Open the 1937 example">
+          <span class="year-chip-num">1937</span>
+          <span class="year-chip-stamp">WPA poster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f7d8a; --chip-b: #d9762f; --chip-c: #e8c24a;" href="../1938/index.html" aria-label="Open the 1938 example">
+          <span class="year-chip-num">1938</span>
+          <span class="year-chip-stamp">Machine age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-current="page" aria-label="Viewing 1939">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1939</span>
       <a href="../../corpus/1939.md">Read the full 1939 corpus</a>
diff --git a/examples/1940/index.html b/examples/1940/index.html
index 4335581..cc9b81d 100644
--- a/examples/1940/index.html
+++ b/examples/1940/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -845,6 +923,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1940 rule: tomorrow under blackout.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-current="page" aria-label="Viewing 1940">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1940</span>
       <a href="../../corpus/1940.md">Read the full 1940 corpus</a>
diff --git a/examples/1941/index.html b/examples/1941/index.html
index db00b6a..29b9fd3 100644
--- a/examples/1941/index.html
+++ b/examples/1941/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -860,6 +938,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1941 rule: discipline with a postwar curve inside it.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-current="page" aria-label="Viewing 1941">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1941</span>
       <a href="../../corpus/1941.md">Read the full 1941 corpus</a>
diff --git a/examples/1942/index.html b/examples/1942/index.html
index f096d0d..6973935 100644
--- a/examples/1942/index.html
+++ b/examples/1942/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -848,6 +926,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1942 rule: everyday life converted into instructions.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-current="page" aria-label="Viewing 1942">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1942</span>
       <a href="../../corpus/1942.md">Read the full 1942 corpus</a>
diff --git a/examples/1943/index.html b/examples/1943/index.html
index b2db7bc..9788c92 100644
--- a/examples/1943/index.html
+++ b/examples/1943/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1943 rule: the factory becomes a portrait studio.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-current="page" aria-label="Viewing 1943">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1943</span>
       <a href="../../corpus/1943.md">Read the full 1943 corpus</a>
diff --git a/examples/1944/index.html b/examples/1944/index.html
index f36d65a..7cf17f5 100644
--- a/examples/1944/index.html
+++ b/examples/1944/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -848,6 +926,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1944 rule: peace being drafted in wartime ink.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-current="page" aria-label="Viewing 1944">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1944</span>
       <a href="../../corpus/1944.md">Read the full 1944 corpus</a>
diff --git a/examples/1945/index.html b/examples/1945/index.html
index 8986643..42f91bc 100644
--- a/examples/1945/index.html
+++ b/examples/1945/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -867,6 +945,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1945 rule: victory with the lights still rationed.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-current="page" aria-label="Viewing 1945">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1945</span>
       <a href="../../corpus/1945.md">Read the full 1945 corpus</a>
diff --git a/examples/1946/index.html b/examples/1946/index.html
index 091d60a..0da2b63 100644
--- a/examples/1946/index.html
+++ b/examples/1946/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -852,6 +930,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1946 rule: a demonstration model for peace.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-current="page" aria-label="Viewing 1946">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1946</span>
       <a href="../../corpus/1946.md">Read the full 1946 corpus</a>
diff --git a/examples/1947/index.html b/examples/1947/index.html
index e3f1ca3..81a9a4f 100644
--- a/examples/1947/index.html
+++ b/examples/1947/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -866,6 +944,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1947 rule: recovery suddenly takes shape.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-current="page" aria-label="Viewing 1947">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1947</span>
       <a href="../../corpus/1947.md">Read the full 1947 corpus</a>
diff --git a/examples/1948/index.html b/examples/1948/index.html
index f268b80..e1034df 100644
--- a/examples/1948/index.html
+++ b/examples/1948/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -853,6 +931,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1948 rule: the future becomes a new format.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-current="page" aria-label="Viewing 1948">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1948</span>
       <a href="../../corpus/1948.md">Read the full 1948 corpus</a>
diff --git a/examples/1949/index.html b/examples/1949/index.html
index 1293166..04e870b 100644
--- a/examples/1949/index.html
+++ b/examples/1949/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -868,6 +946,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1949 rule: modern life enters the showroom and the alliance.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #7a3b2c; --chip-b: #3f6b5e; --chip-c: #1c1814;" href="../1939/index.html" aria-label="Open the 1939 example">
+          <span class="year-chip-num">1939</span>
+          <span class="year-chip-stamp">Tomorrow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1940/index.html" aria-label="Open the 1940 example">
+          <span class="year-chip-num">1940</span>
+          <span class="year-chip-stamp">Blackout</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1941/index.html" aria-label="Open the 1941 example">
+          <span class="year-chip-num">1941</span>
+          <span class="year-chip-stamp">Utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1942/index.html" aria-label="Open the 1942 example">
+          <span class="year-chip-num">1942</span>
+          <span class="year-chip-stamp">Home front</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1943/index.html" aria-label="Open the 1943 example">
+          <span class="year-chip-num">1943</span>
+          <span class="year-chip-stamp">Propaganda</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1944/index.html" aria-label="Open the 1944 example">
+          <span class="year-chip-num">1944</span>
+          <span class="year-chip-stamp">Rebuild</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1945/index.html" aria-label="Open the 1945 example">
+          <span class="year-chip-num">1945</span>
+          <span class="year-chip-stamp">Victory utility</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c7a23d; --chip-b: #1a1f22; --chip-c: #b53728;" href="../1946/index.html" aria-label="Open the 1946 example">
+          <span class="year-chip-num">1946</span>
+          <span class="year-chip-stamp">Peacetime</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a3b2c; --chip-b: #9c5a2f; --chip-c: #3f5f6b;" href="../1947/index.html" aria-label="Open the 1947 example">
+          <span class="year-chip-num">1947</span>
+          <span class="year-chip-stamp">New look</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0341f; --chip-b: #2c4a6b; --chip-c: #cfae4a;" href="../1948/index.html" aria-label="Open the 1948 example">
+          <span class="year-chip-num">1948</span>
+          <span class="year-chip-stamp">Instant LP</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-current="page" aria-label="Viewing 1949">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1949</span>
       <a href="../../corpus/1949.md">Read the full 1949 corpus</a>
diff --git a/examples/1950/index.html b/examples/1950/index.html
index 66e2bb1..f4dbc30 100644
--- a/examples/1950/index.html
+++ b/examples/1950/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -858,6 +936,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1950 rule: the showroom learns to speak modern.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-current="page" aria-label="Viewing 1950">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1950</span>
       <a href="../../corpus/1950.md">Read the full 1950 corpus</a>
diff --git a/examples/1951/index.html b/examples/1951/index.html
index e644372..dc68109 100644
--- a/examples/1951/index.html
+++ b/examples/1951/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -857,6 +935,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1951 rule: a temporary city teaches modern taste.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-current="page" aria-label="Viewing 1951">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1951</span>
       <a href="../../corpus/1951.md">Read the full 1951 corpus</a>
diff --git a/examples/1952/index.html b/examples/1952/index.html
index 7338636..ac716be 100644
--- a/examples/1952/index.html
+++ b/examples/1952/index.html
@@ -222,6 +222,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1952 rule: modern life thins into glass, wire, and screen.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-current="page" aria-label="Viewing 1952">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1952</span>
       <a href="../../corpus/1952.md">Read the full 1952 corpus</a>
diff --git a/examples/1953/index.html b/examples/1953/index.html
index 0f0b6d9..57ccef4 100644
--- a/examples/1953/index.html
+++ b/examples/1953/index.html
@@ -230,6 +230,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -873,6 +951,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1953 rule: modern design starts explaining itself as a system.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-current="page" aria-label="Viewing 1953">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1953</span>
       <a href="../../corpus/1953.md">Read the full 1953 corpus</a>
diff --git a/examples/1954/index.html b/examples/1954/index.html
index abb51ab..ab6c483 100644
--- a/examples/1954/index.html
+++ b/examples/1954/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -860,6 +938,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1954 rule: precision dreaming under an atomic shadow.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-current="page" aria-label="Viewing 1954">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1954</span>
       <a href="../../corpus/1954.md">Read the full 1954 corpus</a>
diff --git a/examples/1955/index.html b/examples/1955/index.html
index ab0a56d..4f5fddc 100644
--- a/examples/1955/index.html
+++ b/examples/1955/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -856,6 +934,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1955 rule: the future becomes something you can enter.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-current="page" aria-label="Viewing 1955">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1955</span>
       <a href="../../corpus/1955.md">Read the full 1955 corpus</a>
diff --git a/examples/1956/index.html b/examples/1956/index.html
index 0140742..eb14179 100644
--- a/examples/1956/index.html
+++ b/examples/1956/index.html
@@ -222,6 +222,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -860,6 +938,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1956 rule: modernism becomes comfortable, branded, and media-aware.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-current="page" aria-label="Viewing 1956">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1956</span>
       <a href="../../corpus/1956.md">Read the full 1956 corpus</a>
diff --git a/examples/1957/index.html b/examples/1957/index.html
index f2d1bbe..d07ae0a 100644
--- a/examples/1957/index.html
+++ b/examples/1957/index.html
@@ -230,6 +230,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -872,6 +950,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1957 rule: neutral order under a new sky.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-current="page" aria-label="Viewing 1957">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1957</span>
       <a href="../../corpus/1957.md">Read the full 1957 corpus</a>
diff --git a/examples/1958/index.html b/examples/1958/index.html
index 971ab70..eab5190 100644
--- a/examples/1958/index.html
+++ b/examples/1958/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -857,6 +935,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1958 rule: the future snaps into systems you can inhabit or assemble.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-current="page" aria-label="Viewing 1958">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1958</span>
       <a href="../../corpus/1958.md">Read the full 1958 corpus</a>
diff --git a/examples/1959/index.html b/examples/1959/index.html
index c7658ed..47334b1 100644
--- a/examples/1959/index.html
+++ b/examples/1959/index.html
@@ -216,6 +216,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -870,6 +948,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1959 rule: excess and efficiency cross at the decade&#39;s edge.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #a8472f; --chip-b: #caa84a; --chip-c: #2f3b2c;" href="../1949/index.html" aria-label="Open the 1949 example">
+          <span class="year-chip-num">1949</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1950/index.html" aria-label="Open the 1950 example">
+          <span class="year-chip-num">1950</span>
+          <span class="year-chip-stamp">Good design</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1951/index.html" aria-label="Open the 1951 example">
+          <span class="year-chip-num">1951</span>
+          <span class="year-chip-stamp">Festival</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1952/index.html" aria-label="Open the 1952 example">
+          <span class="year-chip-num">1952</span>
+          <span class="year-chip-stamp">Glass wire</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1953/index.html" aria-label="Open the 1953 example">
+          <span class="year-chip-num">1953</span>
+          <span class="year-chip-stamp">Ulm begins</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1954/index.html" aria-label="Open the 1954 example">
+          <span class="year-chip-num">1954</span>
+          <span class="year-chip-stamp">Precision</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1955/index.html" aria-label="Open the 1955 example">
+          <span class="year-chip-num">1955</span>
+          <span class="year-chip-stamp">Atomic welcome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #f2c84a; --chip-b: #5a3b4a; --chip-c: #d94f6b;" href="../1956/index.html" aria-label="Open the 1956 example">
+          <span class="year-chip-num">1956</span>
+          <span class="year-chip-stamp">System comfort</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3f5a3c; --chip-b: #e3a93b; --chip-c: #2f8a9d;" href="../1957/index.html" aria-label="Open the 1957 example">
+          <span class="year-chip-num">1957</span>
+          <span class="year-chip-stamp">Grid orbit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #2f9d9d; --chip-c: #f2c84a;" href="../1958/index.html" aria-label="Open the 1958 example">
+          <span class="year-chip-num">1958</span>
+          <span class="year-chip-stamp">Atom grid</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-current="page" aria-label="Viewing 1959">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1959</span>
       <a href="../../corpus/1959.md">Read the full 1959 corpus</a>
diff --git a/examples/1960/index.html b/examples/1960/index.html
index 910ab6b..3274ae0 100644
--- a/examples/1960/index.html
+++ b/examples/1960/index.html
@@ -226,6 +226,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -869,6 +947,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1960 rule: the grid preparing for orbit.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-current="page" aria-label="Viewing 1960">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1960</span>
       <a href="../../corpus/1960.md">Read the full 1960 corpus</a>
diff --git a/examples/1961/index.html b/examples/1961/index.html
index c10f024..a9a6d36 100644
--- a/examples/1961/index.html
+++ b/examples/1961/index.html
@@ -218,6 +218,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -847,6 +925,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1961 rule: consumer objects floating in zero gravity.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-current="page" aria-label="Viewing 1961">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1961</span>
       <a href="../../corpus/1961.md">Read the full 1961 corpus</a>
diff --git a/examples/1962/index.html b/examples/1962/index.html
index 99ce7ca..938c297 100644
--- a/examples/1962/index.html
+++ b/examples/1962/index.html
@@ -226,6 +226,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -868,6 +946,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1962 rule: the supermarket and the spaceport discovering each other.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-current="page" aria-label="Viewing 1962">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1962</span>
       <a href="../../corpus/1962.md">Read the full 1962 corpus</a>
diff --git a/examples/1963/index.html b/examples/1963/index.html
index 034654d..6f43511 100644
--- a/examples/1963/index.html
+++ b/examples/1963/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -844,6 +922,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1963 rule: coded systems learning to scream.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-current="page" aria-label="Viewing 1963">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1963</span>
       <a href="../../corpus/1963.md">Read the full 1963 corpus</a>
diff --git a/examples/1964/index.html b/examples/1964/index.html
index 25401b7..e5ff754 100644
--- a/examples/1964/index.html
+++ b/examples/1964/index.html
@@ -230,6 +230,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -892,6 +970,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1964 rule: international systems turning into optical spectacle.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-current="page" aria-label="Viewing 1964">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1964</span>
       <a href="../../corpus/1964.md">Read the full 1964 corpus</a>
diff --git a/examples/1965/index.html b/examples/1965/index.html
index ef4afda..948c938 100644
--- a/examples/1965/index.html
+++ b/examples/1965/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -866,6 +944,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1965 rule: the grid learning to vibrate.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-current="page" aria-label="Viewing 1965">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1965</span>
       <a href="../../corpus/1965.md">Read the full 1965 corpus</a>
diff --git a/examples/1966/index.html b/examples/1966/index.html
index c876ced..6a1c495 100644
--- a/examples/1966/index.html
+++ b/examples/1966/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -845,6 +923,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1966 rule: the poster discovering feedback.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-current="page" aria-label="Viewing 1966">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1966</span>
       <a href="../../corpus/1966.md">Read the full 1966 corpus</a>
diff --git a/examples/1967/index.html b/examples/1967/index.html
index 9d392c8..29f698c 100644
--- a/examples/1967/index.html
+++ b/examples/1967/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -864,6 +942,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1967 rule: the world as a designed happening.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-current="page" aria-label="Viewing 1967">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1967</span>
       <a href="../../corpus/1967.md">Read the full 1967 corpus</a>
diff --git a/examples/1968/index.html b/examples/1968/index.html
index a4d62f4..3afa942 100644
--- a/examples/1968/index.html
+++ b/examples/1968/index.html
@@ -211,6 +211,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -845,6 +923,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1968 rule: cosmic precision under political pressure.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-current="page" aria-label="Viewing 1968">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1968</span>
       <a href="../../corpus/1968.md">Read the full 1968 corpus</a>
diff --git a/examples/1969/index.html b/examples/1969/index.html
index 0f3718b..938812a 100644
--- a/examples/1969/index.html
+++ b/examples/1969/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -876,6 +954,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1969 rule: a future achieved just as the dream changes shape.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #e06a3b; --chip-b: #f0c63e; --chip-c: #23484c;" href="../1959/index.html" aria-label="Open the 1959 example">
+          <span class="year-chip-num">1959</span>
+          <span class="year-chip-stamp">Fin spiral</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1960/index.html" aria-label="Open the 1960 example">
+          <span class="year-chip-num">1960</span>
+          <span class="year-chip-stamp">Swiss order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1961/index.html" aria-label="Open the 1961 example">
+          <span class="year-chip-num">1961</span>
+          <span class="year-chip-stamp">Pop shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1962/index.html" aria-label="Open the 1962 example">
+          <span class="year-chip-num">1962</span>
+          <span class="year-chip-stamp">Psych bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1963/index.html" aria-label="Open the 1963 example">
+          <span class="year-chip-num">1963</span>
+          <span class="year-chip-stamp">Space age</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1964/index.html" aria-label="Open the 1964 example">
+          <span class="year-chip-num">1964</span>
+          <span class="year-chip-stamp">Op art</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1965/index.html" aria-label="Open the 1965 example">
+          <span class="year-chip-num">1965</span>
+          <span class="year-chip-stamp">Optic order</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #234a52; --chip-c: #ff8a2f;" href="../1966/index.html" aria-label="Open the 1966 example">
+          <span class="year-chip-num">1966</span>
+          <span class="year-chip-stamp">Poster shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f4a; --chip-b: #d63b6b; --chip-c: #3f9d8a;" href="../1967/index.html" aria-label="Open the 1967 example">
+          <span class="year-chip-num">1967</span>
+          <span class="year-chip-stamp">Color bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #e8402c; --chip-b: #1f6fb2; --chip-c: #f2c63b;" href="../1968/index.html" aria-label="Open the 1968 example">
+          <span class="year-chip-num">1968</span>
+          <span class="year-chip-stamp">Tool planet</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-current="page" aria-label="Viewing 1969">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1969</span>
       <a href="../../corpus/1969.md">Read the full 1969 corpus</a>
diff --git a/examples/1970/index.html b/examples/1970/index.html
index 3160f0e..70fd148 100644
--- a/examples/1970/index.html
+++ b/examples/1970/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -861,6 +939,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1970 rule: progress turning earthy, systematic, and nervous.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-current="page" aria-label="Viewing 1970">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1970</span>
       <a href="../../corpus/1970.md">Read the full 1970 corpus</a>
diff --git a/examples/1971/index.html b/examples/1971/index.html
index b880c31..32a9915 100644
--- a/examples/1971/index.html
+++ b/examples/1971/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -867,6 +945,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1971 rule: the future hiding inside simple signs.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-current="page" aria-label="Viewing 1971">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1971</span>
       <a href="../../corpus/1971.md">Read the full 1971 corpus</a>
diff --git a/examples/1972/index.html b/examples/1972/index.html
index fd46005..25b7945 100644
--- a/examples/1972/index.html
+++ b/examples/1972/index.html
@@ -212,6 +212,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -852,6 +930,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1972 rule: clean systems discovering the world is messier than the grid.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-current="page" aria-label="Viewing 1972">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1972</span>
       <a href="../../corpus/1972.md">Read the full 1972 corpus</a>
diff --git a/examples/1973/index.html b/examples/1973/index.html
index 0644d0d..ae74684 100644
--- a/examples/1973/index.html
+++ b/examples/1973/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -855,6 +933,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1973 rule: monumental ambition under energy pressure.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-current="page" aria-label="Viewing 1973">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1973</span>
       <a href="../../corpus/1973.md">Read the full 1973 corpus</a>
diff --git a/examples/1974/index.html b/examples/1974/index.html
index 63c4309..5322a1f 100644
--- a/examples/1974/index.html
+++ b/examples/1974/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -863,6 +941,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1974 rule: the everyday world clicking into systems.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-current="page" aria-label="Viewing 1974">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1974</span>
       <a href="../../corpus/1974.md">Read the full 1974 corpus</a>
diff --git a/examples/1975/index.html b/examples/1975/index.html
index 2cd1682..ee55ca6 100644
--- a/examples/1975/index.html
+++ b/examples/1975/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -860,6 +938,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1975 rule: brown rooms with electronic futures inside them.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-current="page" aria-label="Viewing 1975">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1975</span>
       <a href="../../corpus/1975.md">Read the full 1975 corpus</a>
diff --git a/examples/1976/index.html b/examples/1976/index.html
index 120bef8..93ec4f9 100644
--- a/examples/1976/index.html
+++ b/examples/1976/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -873,6 +951,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1976 rule: official polish with a tear across it.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-current="page" aria-label="Viewing 1976">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1976</span>
       <a href="../../corpus/1976.md">Read the full 1976 corpus</a>
diff --git a/examples/1977/index.html b/examples/1977/index.html
index b682295..cf4ca0d 100644
--- a/examples/1977/index.html
+++ b/examples/1977/index.html
@@ -212,6 +212,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -856,6 +934,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1977 rule: icons arriving from opposite directions.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-current="page" aria-label="Viewing 1977">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1977</span>
       <a href="../../corpus/1977.md">Read the full 1977 corpus</a>
diff --git a/examples/1978/index.html b/examples/1978/index.html
index 4c6c08e..2e6e4dd 100644
--- a/examples/1978/index.html
+++ b/examples/1978/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -874,6 +952,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1978 rule: clean systems hearing electronic footsteps.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-current="page" aria-label="Viewing 1978">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1978</span>
       <a href="../../corpus/1978.md">Read the full 1978 corpus</a>
diff --git a/examples/1979/index.html b/examples/1979/index.html
index 01d579c..0ca8af4 100644
--- a/examples/1979/index.html
+++ b/examples/1979/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -853,6 +931,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1979 rule: private signals moving through public space.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #d63b8f; --chip-b: #b9ff3c; --chip-c: #5a2f4a;" href="../1969/index.html" aria-label="Open the 1969 example">
+          <span class="year-chip-num">1969</span>
+          <span class="year-chip-stamp">Moon echo</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1970/index.html" aria-label="Open the 1970 example">
+          <span class="year-chip-num">1970</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1971/index.html" aria-label="Open the 1971 example">
+          <span class="year-chip-num">1971</span>
+          <span class="year-chip-stamp">Signal mark</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1972/index.html" aria-label="Open the 1972 example">
+          <span class="year-chip-num">1972</span>
+          <span class="year-chip-stamp">Diagram year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1973/index.html" aria-label="Open the 1973 example">
+          <span class="year-chip-num">1973</span>
+          <span class="year-chip-stamp">Shortage future</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1974/index.html" aria-label="Open the 1974 example">
+          <span class="year-chip-num">1974</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1975/index.html" aria-label="Open the 1975 example">
+          <span class="year-chip-num">1975</span>
+          <span class="year-chip-stamp">Earth tone</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ededea; --chip-b: #7a2d22; --chip-c: #e8332b;" href="../1976/index.html" aria-label="Open the 1976 example">
+          <span class="year-chip-num">1976</span>
+          <span class="year-chip-stamp">Disco shine</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #5a4a2c; --chip-b: #b8862f; --chip-c: #3f6b5e;" href="../1977/index.html" aria-label="Open the 1977 example">
+          <span class="year-chip-num">1977</span>
+          <span class="year-chip-stamp">Punk tear</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c2702f; --chip-b: #6b7a2f; --chip-c: #caa23d;" href="../1978/index.html" aria-label="Open the 1978 example">
+          <span class="year-chip-num">1978</span>
+          <span class="year-chip-stamp">Corporate clean</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-current="page" aria-label="Viewing 1979">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1979</span>
       <a href="../../corpus/1979.md">Read the full 1979 corpus</a>
diff --git a/examples/1980/index.html b/examples/1980/index.html
index f5363c3..9fbce88 100644
--- a/examples/1980/index.html
+++ b/examples/1980/index.html
@@ -230,6 +230,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -825,6 +903,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1980 rule: modernism losing its monopoly.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-current="page" aria-label="Viewing 1980">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1980</span>
       <a href="../../corpus/1980.md">Read the full 1980 corpus</a>
diff --git a/examples/1981/index.html b/examples/1981/index.html
index c8edb0f..0df01be 100644
--- a/examples/1981/index.html
+++ b/examples/1981/index.html
@@ -231,6 +231,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -873,6 +951,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1981 rule: style becomes infrastructure.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-current="page" aria-label="Viewing 1981">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1981</span>
       <a href="../../corpus/1981.md">Read the full 1981 corpus</a>
diff --git a/examples/1982/index.html b/examples/1982/index.html
index 159699d..bd8fbf4 100644
--- a/examples/1982/index.html
+++ b/examples/1982/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -918,6 +996,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1982 rule: the future has become a style war.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-current="page" aria-label="Viewing 1982">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1982</span>
       <a href="../../corpus/1982.md">Read the full 1982 corpus</a>
diff --git a/examples/1983/index.html b/examples/1983/index.html
index a912876..048c8fd 100644
--- a/examples/1983/index.html
+++ b/examples/1983/index.html
@@ -222,6 +222,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -887,6 +965,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1983 rule: the interface moves onto the body.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-current="page" aria-label="Viewing 1983">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1983</span>
       <a href="../../corpus/1983.md">Read the full 1983 corpus</a>
diff --git a/examples/1984/index.html b/examples/1984/index.html
index e1d1120..a73d751 100644
--- a/examples/1984/index.html
+++ b/examples/1984/index.html
@@ -223,6 +223,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -959,6 +1037,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1984 rule: the screen learns to smile while the future learns to threaten.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-current="page" aria-label="Viewing 1984">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1984</span>
       <a href="../../corpus/1984.md">Read the full 1984 corpus</a>
diff --git a/examples/1985/index.html b/examples/1985/index.html
index 5cb408d..9086c05 100644
--- a/examples/1985/index.html
+++ b/examples/1985/index.html
@@ -221,6 +221,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -893,6 +971,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1985 rule: design becomes a distribution engine.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-current="page" aria-label="Viewing 1985">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1985</span>
       <a href="../../corpus/1985.md">Read the full 1985 corpus</a>
diff --git a/examples/1986/index.html b/examples/1986/index.html
index af1c962..7d37c73 100644
--- a/examples/1986/index.html
+++ b/examples/1986/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -865,6 +943,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1986 rule: the paste-up table starts glowing.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-current="page" aria-label="Viewing 1986">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1986</span>
       <a href="../../corpus/1986.md">Read the full 1986 corpus</a>
diff --git a/examples/1987/index.html b/examples/1987/index.html
index bf48027..383629c 100644
--- a/examples/1987/index.html
+++ b/examples/1987/index.html
@@ -218,6 +218,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1987 rule: the screen learns color, vectors, and links.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-current="page" aria-label="Viewing 1987">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1987</span>
       <a href="../../corpus/1987.md">Read the full 1987 corpus</a>
diff --git a/examples/1988/index.html b/examples/1988/index.html
index 187227d..37a1793 100644
--- a/examples/1988/index.html
+++ b/examples/1988/index.html
@@ -231,6 +231,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -876,6 +954,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1988 rule: the polished surface begins to split open.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-current="page" aria-label="Viewing 1988">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1988</span>
       <a href="../../corpus/1988.md">Read the full 1988 corpus</a>
diff --git a/examples/1989/index.html b/examples/1989/index.html
index 6fa1534..42ede88 100644
--- a/examples/1989/index.html
+++ b/examples/1989/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -911,6 +989,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1989 rule: the screen becomes portable and the world becomes linked.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #8a3fd6; --chip-b: #ffb43c; --chip-c: #3f2f5a;" href="../1979/index.html" aria-label="Open the 1979 example">
+          <span class="year-chip-num">1979</span>
+          <span class="year-chip-stamp">Funk line</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3b1f; --chip-b: #00b8d9; --chip-c: #f2cc2f;" href="../1980/index.html" aria-label="Open the 1980 example">
+          <span class="year-chip-num">1980</span>
+          <span class="year-chip-stamp">Hinge year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #08b9bd; --chip-c: #b9ff2f;" href="../1981/index.html" aria-label="Open the 1981 example">
+          <span class="year-chip-num">1981</span>
+          <span class="year-chip-stamp">Ignition year</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a2d; --chip-b: #00d7ff; --chip-c: #d6ff3f;" href="../1982/index.html" aria-label="Open the 1982 example">
+          <span class="year-chip-num">1982</span>
+          <span class="year-chip-stamp">Style war</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff315f; --chip-b: #36d6ff; --chip-c: #ffe14a;" href="../1983/index.html" aria-label="Open the 1983 example">
+          <span class="year-chip-num">1983</span>
+          <span class="year-chip-stamp">Lifestyle interface</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #111111; --chip-b: #5a5a5a; --chip-c: #0a4fb4;" href="../1984/index.html" aria-label="Open the 1984 example">
+          <span class="year-chip-num">1984</span>
+          <span class="year-chip-stamp">Graphical turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #b8392b; --chip-b: #2f5aa0; --chip-c: #c79a3c;" href="../1985/index.html" aria-label="Open the 1985 example">
+          <span class="year-chip-num">1985</span>
+          <span class="year-chip-stamp">Publishing desktop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff3caf; --chip-b: #36d6ff; --chip-c: #c6ff3c;" href="../1986/index.html" aria-label="Open the 1986 example">
+          <span class="year-chip-num">1986</span>
+          <span class="year-chip-stamp">Screen body</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #00c2d6; --chip-b: #ffd23c; --chip-c: #2f6f8a;" href="../1987/index.html" aria-label="Open the 1987 example">
+          <span class="year-chip-num">1987</span>
+          <span class="year-chip-stamp">Color screen</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffe14a; --chip-b: #9c3bd6; --chip-c: #ff2f7d;" href="../1988/index.html" aria-label="Open the 1988 example">
+          <span class="year-chip-num">1988</span>
+          <span class="year-chip-stamp">Black cube</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-current="page" aria-label="Viewing 1989">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1989</span>
       <a href="../../corpus/1989.md">Read the full 1989 corpus</a>
diff --git a/examples/1990/index.html b/examples/1990/index.html
index 0825a30..edb9092 100644
--- a/examples/1990/index.html
+++ b/examples/1990/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -848,6 +926,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1990 rule: the future arrives with dirt under its fingernails.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-current="page" aria-label="Viewing 1990">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1990</span>
       <a href="../../corpus/1990.md">Read the full 1990 corpus</a>
diff --git a/examples/1991/index.html b/examples/1991/index.html
index b5b08d2..58786db 100644
--- a/examples/1991/index.html
+++ b/examples/1991/index.html
@@ -230,6 +230,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -871,6 +949,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1991 rule: a basement signal suddenly audible through the wall.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-current="page" aria-label="Viewing 1991">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1991</span>
       <a href="../../corpus/1991.md">Read the full 1991 corpus</a>
diff --git a/examples/1992/index.html b/examples/1992/index.html
index 1d184d4..f8f2a57 100644
--- a/examples/1992/index.html
+++ b/examples/1992/index.html
@@ -221,6 +221,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -890,6 +968,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1992 rule: order is still present, but it no longer gets the final word.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-current="page" aria-label="Viewing 1992">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1992</span>
       <a href="../../corpus/1992.md">Read the full 1992 corpus</a>
diff --git a/examples/1993/index.html b/examples/1993/index.html
index 7f00199..fe7f876 100644
--- a/examples/1993/index.html
+++ b/examples/1993/index.html
@@ -212,6 +212,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -852,6 +930,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1993 rule: the future becomes visible before it becomes smooth.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-current="page" aria-label="Viewing 1993">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1993</span>
       <a href="../../corpus/1993.md">Read the full 1993 corpus</a>
diff --git a/examples/1994/index.html b/examples/1994/index.html
index 7eeb348..0ec9fde 100644
--- a/examples/1994/index.html
+++ b/examples/1994/index.html
@@ -218,6 +218,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1994 rule: the underground becomes infrastructure and inventory.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-current="page" aria-label="Viewing 1994">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1994</span>
       <a href="../../corpus/1994.md">Read the full 1994 corpus</a>
diff --git a/examples/1995/index.html b/examples/1995/index.html
index 32721a1..b15dbca 100644
--- a/examples/1995/index.html
+++ b/examples/1995/index.html
@@ -228,6 +228,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -873,6 +951,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1995 rule: paper fraying as the browser opens.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-current="page" aria-label="Viewing 1995">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1995</span>
       <a href="../../corpus/1995.md">Read the full 1995 corpus</a>
diff --git a/examples/1996/index.html b/examples/1996/index.html
index 3cccaf4..08e8b2b 100644
--- a/examples/1996/index.html
+++ b/examples/1996/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -856,6 +934,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1996 rule: concrete, pixels, and motion finding each other.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-current="page" aria-label="Viewing 1996">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1996</span>
       <a href="../../corpus/1996.md">Read the full 1996 corpus</a>
diff --git a/examples/1997/index.html b/examples/1997/index.html
index 3d075a8..cb5b21e 100644
--- a/examples/1997/index.html
+++ b/examples/1997/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -849,6 +927,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1997 rule: the future is calling for your attention.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-current="page" aria-label="Viewing 1997">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1997</span>
       <a href="../../corpus/1997.md">Read the full 1997 corpus</a>
diff --git a/examples/1998/index.html b/examples/1998/index.html
index fb94461..85e7d33 100644
--- a/examples/1998/index.html
+++ b/examples/1998/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -889,6 +967,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1998 rule: the system smiles through translucent plastic.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-current="page" aria-label="Viewing 1998">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1998</span>
       <a href="../../corpus/1998.md">Read the full 1998 corpus</a>
diff --git a/examples/1999/index.html b/examples/1999/index.html
index 9f64f79..0a366f6 100644
--- a/examples/1999/index.html
+++ b/examples/1999/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -870,6 +948,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>1999 rule: standing at midnight inside the network.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2f6b4a; --chip-b: #3cff9d; --chip-c: #ff5a3c;" href="../1989/index.html" aria-label="Open the 1989 example">
+          <span class="year-chip-num">1989</span>
+          <span class="year-chip-stamp">Web proposed</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1990/index.html" aria-label="Open the 1990 example">
+          <span class="year-chip-num">1990</span>
+          <span class="year-chip-stamp">Grunge bloom</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1991/index.html" aria-label="Open the 1991 example">
+          <span class="year-chip-num">1991</span>
+          <span class="year-chip-stamp">Rave glow</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1992/index.html" aria-label="Open the 1992 example">
+          <span class="year-chip-num">1992</span>
+          <span class="year-chip-stamp">Deconstruct</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1993/index.html" aria-label="Open the 1993 example">
+          <span class="year-chip-num">1993</span>
+          <span class="year-chip-stamp">Early web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1994/index.html" aria-label="Open the 1994 example">
+          <span class="year-chip-num">1994</span>
+          <span class="year-chip-stamp">Techno gray</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1995/index.html" aria-label="Open the 1995 example">
+          <span class="year-chip-num">1995</span>
+          <span class="year-chip-stamp">Print breaks</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c0c4cc; --chip-b: #2f3a4a; --chip-c: #2f6fd6;" href="../1996/index.html" aria-label="Open the 1996 example">
+          <span class="year-chip-num">1996</span>
+          <span class="year-chip-stamp">Page moves</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #3a2f3a; --chip-b: #c0392b; --chip-c: #3f6f6b;" href="../1997/index.html" aria-label="Open the 1997 example">
+          <span class="year-chip-num">1997</span>
+          <span class="year-chip-stamp">Alien signal</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #9c7a2f; --chip-b: #5a6b3f; --chip-c: #b83b2f;" href="../1998/index.html" aria-label="Open the 1998 example">
+          <span class="year-chip-num">1998</span>
+          <span class="year-chip-stamp">Translucent</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-current="page" aria-label="Viewing 1999">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 1999</span>
       <a href="../../corpus/1999.md">Read the full 1999 corpus</a>
diff --git a/examples/2000/index.html b/examples/2000/index.html
index 5a44133..b278fed 100644
--- a/examples/2000/index.html
+++ b/examples/2000/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -870,6 +948,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2000 rule: polished optimism before the correction.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-current="page" aria-label="Viewing 2000">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2000</span>
       <a href="../../corpus/2000.md">Read the full 2000 corpus</a>
diff --git a/examples/2001/index.html b/examples/2001/index.html
index f9c4bee..f852b54 100644
--- a/examples/2001/index.html
+++ b/examples/2001/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -858,6 +936,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2001 rule: soft interfaces meeting a hardened world.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-current="page" aria-label="Viewing 2001">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2001</span>
       <a href="../../corpus/2001.md">Read the full 2001 corpus</a>
diff --git a/examples/2002/index.html b/examples/2002/index.html
index 612f82e..d72102c 100644
--- a/examples/2002/index.html
+++ b/examples/2002/index.html
@@ -207,6 +207,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -876,6 +954,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2002 rule: the network finding a body.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-current="page" aria-label="Viewing 2002">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2002</span>
       <a href="../../corpus/2002.md">Read the full 2002 corpus</a>
diff --git a/examples/2003/index.html b/examples/2003/index.html
index 491676c..51f888d 100644
--- a/examples/2003/index.html
+++ b/examples/2003/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -869,6 +947,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2003 rule: the network becomes a place to perform.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-current="page" aria-label="Viewing 2003">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2003</span>
       <a href="../../corpus/2003.md">Read the full 2003 corpus</a>
diff --git a/examples/2004/index.html b/examples/2004/index.html
index 36ddaa7..b0330c5 100644
--- a/examples/2004/index.html
+++ b/examples/2004/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -893,6 +971,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2004 rule: the web becoming a place with faces, photos, and invitations.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-current="page" aria-label="Viewing 2004">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2004</span>
       <a href="../../corpus/2004.md">Read the full 2004 corpus</a>
diff --git a/examples/2005/index.html b/examples/2005/index.html
index 9dbee27..823ad3e 100644
--- a/examples/2005/index.html
+++ b/examples/2005/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2005 rule: the internet becomes a shiny public workbench.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-current="page" aria-label="Viewing 2005">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2005</span>
       <a href="../../corpus/2005.md">Read the full 2005 corpus</a>
diff --git a/examples/2006/index.html b/examples/2006/index.html
index f43eee2..3eb092d 100644
--- a/examples/2006/index.html
+++ b/examples/2006/index.html
@@ -207,6 +207,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -845,6 +923,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2006 rule: everything wants to be social, glossy, and easy to touch.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-current="page" aria-label="Viewing 2006">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2006</span>
       <a href="../../corpus/2006.md">Read the full 2006 corpus</a>
diff --git a/examples/2007/index.html b/examples/2007/index.html
index 69d48c9..0493272 100644
--- a/examples/2007/index.html
+++ b/examples/2007/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -894,6 +972,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2007 rule: the future is a pane of glass pretending to be friendly.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-current="page" aria-label="Viewing 2007">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2007</span>
       <a href="../../corpus/2007.md">Read the full 2007 corpus</a>
diff --git a/examples/2008/index.html b/examples/2008/index.html
index 65e9f84..0bb2487 100644
--- a/examples/2008/index.html
+++ b/examples/2008/index.html
@@ -229,6 +229,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -871,6 +949,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2008 rule: a bright interface trying to stay optimistic as the system cracks.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-current="page" aria-label="Viewing 2008">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2008</span>
       <a href="../../corpus/2008.md">Read the full 2008 corpus</a>
diff --git a/examples/2009/index.html b/examples/2009/index.html
index 0578745..61e9f4a 100644
--- a/examples/2009/index.html
+++ b/examples/2009/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -864,6 +942,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2009 rule: glossy optimism learning to justify itself with utility.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6c0; --chip-b: #ff3c8f; --chip-c: #2f5a3f;" href="../1999/index.html" aria-label="Open the 1999 example">
+          <span class="year-chip-num">1999</span>
+          <span class="year-chip-stamp">Millennium</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2000/index.html" aria-label="Open the 2000 example">
+          <span class="year-chip-num">2000</span>
+          <span class="year-chip-stamp">Y2K chrome</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2001/index.html" aria-label="Open the 2001 example">
+          <span class="year-chip-num">2001</span>
+          <span class="year-chip-stamp">Aqua reset</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2002/index.html" aria-label="Open the 2002 example">
+          <span class="year-chip-num">2002</span>
+          <span class="year-chip-stamp">Glass gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2003/index.html" aria-label="Open the 2003 example">
+          <span class="year-chip-num">2003</span>
+          <span class="year-chip-stamp">Pod candy</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2004/index.html" aria-label="Open the 2004 example">
+          <span class="year-chip-num">2004</span>
+          <span class="year-chip-stamp">Bubble UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2005/index.html" aria-label="Open the 2005 example">
+          <span class="year-chip-num">2005</span>
+          <span class="year-chip-stamp">Upload gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #c6ff3c; --chip-b: #3f4a6b; --chip-c: #3c9cff;" href="../2006/index.html" aria-label="Open the 2006 example">
+          <span class="year-chip-num">2006</span>
+          <span class="year-chip-stamp">Status gloss</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f6b6b; --chip-b: #2fd6c0; --chip-c: #ff9a2f;" href="../2007/index.html" aria-label="Open the 2007 example">
+          <span class="year-chip-num">2007</span>
+          <span class="year-chip-stamp">Touch glass</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb6ff; --chip-b: #9cff3c; --chip-c: #ff8a2f;" href="../2008/index.html" aria-label="Open the 2008 example">
+          <span class="year-chip-num">2008</span>
+          <span class="year-chip-stamp">App hope</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-current="page" aria-label="Viewing 2009">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2009</span>
       <a href="../../corpus/2009.md">Read the full 2009 corpus</a>
diff --git a/examples/2010/index.html b/examples/2010/index.html
index 21b2161..f21686d 100644
--- a/examples/2010/index.html
+++ b/examples/2010/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -855,6 +933,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2010 rule: the screen stops apologizing for being a screen.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-current="page" aria-label="Viewing 2010">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2010</span>
       <a href="../../corpus/2010.md">Read the full 2010 corpus</a>
diff --git a/examples/2011/index.html b/examples/2011/index.html
index 6857203..6ee04b6 100644
--- a/examples/2011/index.html
+++ b/examples/2011/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -848,6 +926,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2011 rule: digital surfaces start behaving like social weather.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-current="page" aria-label="Viewing 2011">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2011</span>
       <a href="../../corpus/2011.md">Read the full 2011 corpus</a>
diff --git a/examples/2012/index.html b/examples/2012/index.html
index 3fc347b..88b4b2b 100644
--- a/examples/2012/index.html
+++ b/examples/2012/index.html
@@ -219,6 +219,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -862,6 +940,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2012 rule: everything becomes a tile, a metric, or a card waiting to reflow.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-current="page" aria-label="Viewing 2012">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2012</span>
       <a href="../../corpus/2012.md">Read the full 2012 corpus</a>
diff --git a/examples/2013/index.html b/examples/2013/index.html
index b2e34b0..ae40eed 100644
--- a/examples/2013/index.html
+++ b/examples/2013/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -864,6 +942,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2013 rule: flat color arrives with a surveillance shadow.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-current="page" aria-label="Viewing 2013">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2013</span>
       <a href="../../corpus/2013.md">Read the full 2013 corpus</a>
diff --git a/examples/2014/index.html b/examples/2014/index.html
index da443bf..0e06641 100644
--- a/examples/2014/index.html
+++ b/examples/2014/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -874,6 +952,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2014 rule: flat design becomes an operating discipline.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-current="page" aria-label="Viewing 2014">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2014</span>
       <a href="../../corpus/2014.md">Read the full 2014 corpus</a>
diff --git a/examples/2015/index.html b/examples/2015/index.html
index 44c5550..70d428b 100644
--- a/examples/2015/index.html
+++ b/examples/2015/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -850,6 +928,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2015 rule: friendly systems replacing dramatic surfaces.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-current="page" aria-label="Viewing 2015">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2015</span>
       <a href="../../corpus/2015.md">Read the full 2015 corpus</a>
diff --git a/examples/2016/index.html b/examples/2016/index.html
index 6adaab4..02eae4d 100644
--- a/examples/2016/index.html
+++ b/examples/2016/index.html
@@ -219,6 +219,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -862,6 +940,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2016 rule: controlled grids with sudden color heat.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-current="page" aria-label="Viewing 2016">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2016</span>
       <a href="../../corpus/2016.md">Read the full 2016 corpus</a>
diff --git a/examples/2017/index.html b/examples/2017/index.html
index bcfd225..5c8904d 100644
--- a/examples/2017/index.html
+++ b/examples/2017/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -871,6 +949,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2017 rule: clean systems under pressure from raw expression.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-current="page" aria-label="Viewing 2017">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2017</span>
       <a href="../../corpus/2017.md">Read the full 2017 corpus</a>
diff --git a/examples/2018/index.html b/examples/2018/index.html
index 9ccb6c9..89ad243 100644
--- a/examples/2018/index.html
+++ b/examples/2018/index.html
@@ -217,6 +217,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2018 rule: the system performs for the feed.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-current="page" aria-label="Viewing 2018">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2018</span>
       <a href="../../corpus/2018.md">Read the full 2018 corpus</a>
diff --git a/examples/2019/index.html b/examples/2019/index.html
index 5dff7ed..e8f2762 100644
--- a/examples/2019/index.html
+++ b/examples/2019/index.html
@@ -208,6 +208,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -850,6 +928,60 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2019 rule: minimal systems at dusk.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #2fd6a8; --chip-b: #ffc63c; --chip-c: #2f5a8a;" href="../2009/index.html" aria-label="Open the 2009 example">
+          <span class="year-chip-num">2009</span>
+          <span class="year-chip-stamp">Check-in UI</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2010/index.html" aria-label="Open the 2010 example">
+          <span class="year-chip-num">2010</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2011/index.html" aria-label="Open the 2011 example">
+          <span class="year-chip-num">2011</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2012/index.html" aria-label="Open the 2012 example">
+          <span class="year-chip-num">2012</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2013/index.html" aria-label="Open the 2013 example">
+          <span class="year-chip-num">2013</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2014/index.html" aria-label="Open the 2014 example">
+          <span class="year-chip-num">2014</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2015/index.html" aria-label="Open the 2015 example">
+          <span class="year-chip-num">2015</span>
+          <span class="year-chip-stamp">Flat turn</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fcf9d; --chip-b: #2f3a4a; --chip-c: #ff5a5a;" href="../2016/index.html" aria-label="Open the 2016 example">
+          <span class="year-chip-num">2016</span>
+          <span class="year-chip-stamp">Material</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #caa23d; --chip-b: #d97a2f; --chip-c: #2f6b6b;" href="../2017/index.html" aria-label="Open the 2017 example">
+          <span class="year-chip-num">2017</span>
+          <span class="year-chip-stamp">Brutalist web</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2fb0a8; --chip-b: #ff6b5a; --chip-c: #2f4a8a;" href="../2018/index.html" aria-label="Open the 2018 example">
+          <span class="year-chip-num">2018</span>
+          <span class="year-chip-stamp">Gradient pop</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-current="page" aria-label="Viewing 2019">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2019</span>
       <a href="../../corpus/2019.md">Read the full 2019 corpus</a>
diff --git a/examples/2020/index.html b/examples/2020/index.html
index 3f39067..8d6d072 100644
--- a/examples/2020/index.html
+++ b/examples/2020/index.html
@@ -220,6 +220,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -859,6 +937,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2020 rule: the interface as emergency shelter.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-current="page" aria-label="Viewing 2020">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-label="Open the 2021 example">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-label="Open the 2022 example">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-label="Open the 2023 example">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-label="Open the 2024 example">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-label="Open the 2025 example">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-label="Open the 2026 example">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2020</span>
       <a href="../../corpus/2020.md">Read the full 2020 corpus</a>
diff --git a/examples/2021/index.html b/examples/2021/index.html
index 9216b46..a294caf 100644
--- a/examples/2021/index.html
+++ b/examples/2021/index.html
@@ -209,6 +209,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -851,6 +929,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2021 rule: digital reality becomes something to own, inhabit, and pitch.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-current="page" aria-label="Viewing 2021">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-label="Open the 2022 example">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-label="Open the 2023 example">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-label="Open the 2024 example">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-label="Open the 2025 example">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-label="Open the 2026 example">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2021</span>
       <a href="../../corpus/2021.md">Read the full 2021 corpus</a>
diff --git a/examples/2022/index.html b/examples/2022/index.html
index e1b4523..654fe8e 100644
--- a/examples/2022/index.html
+++ b/examples/2022/index.html
@@ -225,6 +225,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -865,6 +943,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2022 rule: the image machine wakes up inside a nostalgia rave.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-label="Open the 2021 example">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-current="page" aria-label="Viewing 2022">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-label="Open the 2023 example">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-label="Open the 2024 example">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-label="Open the 2025 example">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-label="Open the 2026 example">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2022</span>
       <a href="../../corpus/2022.md">Read the full 2022 corpus</a>
diff --git a/examples/2023/index.html b/examples/2023/index.html
index 9e13e3e..66796cc 100644
--- a/examples/2023/index.html
+++ b/examples/2023/index.html
@@ -214,6 +214,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -861,6 +939,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2023 rule: synthetic abundance looking for human fingerprints.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-label="Open the 2021 example">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-label="Open the 2022 example">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-current="page" aria-label="Viewing 2023">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-label="Open the 2024 example">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-label="Open the 2025 example">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-label="Open the 2026 example">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2023</span>
       <a href="../../corpus/2023.md">Read the full 2023 corpus</a>
diff --git a/examples/2024/index.html b/examples/2024/index.html
index 228dd38..eaf83e0 100644
--- a/examples/2024/index.html
+++ b/examples/2024/index.html
@@ -212,6 +212,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -855,6 +933,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2024 rule: the first draft is automated, but trust is not.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-label="Open the 2021 example">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-label="Open the 2022 example">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-label="Open the 2023 example">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-current="page" aria-label="Viewing 2024">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-label="Open the 2025 example">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-label="Open the 2026 example">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2024</span>
       <a href="../../corpus/2024.md">Read the full 2024 corpus</a>
diff --git a/examples/2025/index.html b/examples/2025/index.html
index c2ef315..9d59606 100644
--- a/examples/2025/index.html
+++ b/examples/2025/index.html
@@ -224,6 +224,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -866,6 +944,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2025 rule: the platform becomes glass while the web gets rougher.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-label="Open the 2021 example">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-label="Open the 2022 example">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-label="Open the 2023 example">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-label="Open the 2024 example">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-current="page" aria-label="Viewing 2025">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-label="Open the 2026 example">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2025</span>
       <a href="../../corpus/2025.md">Read the full 2025 corpus</a>
diff --git a/examples/2026/index.html b/examples/2026/index.html
index 777985c..7c4fbb4 100644
--- a/examples/2026/index.html
+++ b/examples/2026/index.html
@@ -218,6 +218,84 @@
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -863,6 +941,44 @@ <h2 id="anti-title">Anti-cliches</h2>
       <p>2026 rule: adaptive systems looking for human proof.</p>
     </section>
 
+      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+        <a class="year-chip" style="--chip-a: #ff7a3c; --chip-b: #2fb6d6; --chip-c: #3f2f6b;" href="../2019/index.html" aria-label="Open the 2019 example">
+          <span class="year-chip-num">2019</span>
+          <span class="year-chip-stamp">Mono hipster</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2020/index.html" aria-label="Open the 2020 example">
+          <span class="year-chip-num">2020</span>
+          <span class="year-chip-stamp">Remote shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2021/index.html" aria-label="Open the 2021 example">
+          <span class="year-chip-num">2021</span>
+          <span class="year-chip-stamp">Spec surf</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2022/index.html" aria-label="Open the 2022 example">
+          <span class="year-chip-num">2022</span>
+          <span class="year-chip-stamp">Prompt shock</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #2f3a4a; --chip-b: #3cf0c0; --chip-c: #b45aff;" href="../2023/index.html" aria-label="Open the 2023 example">
+          <span class="year-chip-num">2023</span>
+          <span class="year-chip-stamp">Human texture</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #7c5cff; --chip-b: #2fd6c0; --chip-c: #ff5a8f;" href="../2024/index.html" aria-label="Open the 2024 example">
+          <span class="year-chip-num">2024</span>
+          <span class="year-chip-stamp">Spatial fatigue</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ff5a3c; --chip-b: #2fb6ff; --chip-c: #1a1a1a;" href="../2025/index.html" aria-label="Open the 2025 example">
+          <span class="year-chip-num">2025</span>
+          <span class="year-chip-stamp">Glass grit</span>
+        </a>
+        <a class="year-chip" style="--chip-a: #ffd23c; --chip-b: #3a2f5a; --chip-c: #ff4d8d;" href="../2026/index.html" aria-current="page" aria-label="Viewing 2026">
+          <span class="year-chip-num">2026</span>
+          <span class="year-chip-stamp">Adaptive bloom</span>
+        </a>
+        </div>
+      </nav>
+
     <footer class="footer">
       <span>Flashback / examples / 2026</span>
       <a href="../../corpus/2026.md">Read the full 2026 corpus</a>
diff --git a/scripts/flashback-examples.mjs b/scripts/flashback-examples.mjs
index 6fafc56..79e1640 100644
--- a/scripts/flashback-examples.mjs
+++ b/scripts/flashback-examples.mjs
@@ -448,7 +448,7 @@ function syncExamples(entries) {
   for (const entry of entries) {
     const yearDir = join(EXAMPLES_DIR, String(entry.year));
     mkdirSync(yearDir, { recursive: true });
-    writeFileSync(join(yearDir, 'index.html'), generateExampleHtml(entry));
+    writeFileSync(join(yearDir, 'index.html'), generateExampleHtml(entry, entries));
   }
 
   writeFileSync(INDEX_PATH, generateIndexHtml(entries));
@@ -477,7 +477,7 @@ function checkExamples(entries) {
   for (const entry of entries) {
     const examplePath = join(EXAMPLES_DIR, String(entry.year), 'index.html');
     const relativeExamplePath = relative(ROOT, examplePath);
-    const expectedHtml = generateExampleHtml(entry);
+    const expectedHtml = generateExampleHtml(entry, entries);
 
     if (!existsSync(examplePath)) {
       errors.push(`${relativeExamplePath} is missing. Run npm run sync:examples.`);
@@ -630,12 +630,13 @@ function cleanupObsoleteExamples(entries) {
   }
 }
 
-function generateExampleHtml(entry) {
+function generateExampleHtml(entry, entries = [entry]) {
   const theme = getTheme(entry);
   const art = theme.art;
   const recipeNames = entry.recipes.map((recipe) => recipe.name).join(', ');
   const timelineItems = entry.timeline.slice(0, 6);
   const emergingItems = entry.designClimate.emerging.slice(0, 6);
+  const yearNavigator = renderExampleYearNavigator(entry, entries);
 
   return `<!doctype html>
 <html lang="en">
@@ -839,6 +840,84 @@ ${ornamentCss(art.ornament)}
       background: var(--accent-c);
     }
 
+    .year-rail {
+      display: grid;
+      gap: 12px;
+      margin-top: 22px;
+    }
+
+    .year-rail-title {
+      margin: 0;
+      color: var(--muted);
+      font-family: var(--mono);
+      font-size: 0.78rem;
+      letter-spacing: 0.16em;
+      text-transform: uppercase;
+    }
+
+    .year-rail-track {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 10px;
+    }
+
+    .year-chip {
+      --chip-a: var(--accent-a);
+      --chip-b: var(--accent-b);
+      --chip-c: var(--accent-c);
+      display: inline-flex;
+      align-items: baseline;
+      gap: 10px;
+      padding: 8px 12px;
+      color: var(--paper);
+      text-decoration: none;
+      border: 1px solid color-mix(in srgb, var(--chip-b) 55%, var(--line));
+      border-top: 3px solid var(--chip-a);
+      background: color-mix(in srgb, var(--chip-a) 12%, rgba(0, 0, 0, 0.42));
+      box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.34);
+      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
+    }
+
+    .year-chip:hover,
+    .year-chip:focus-visible {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: var(--chip-c);
+      box-shadow: 7px 7px 0 rgba(0, 0, 0, 0.4);
+      transform: translate(-2px, -2px);
+    }
+
+    .year-chip-num {
+      font-family: var(--display);
+      font-size: clamp(1.05rem, 2.6vw, 1.5rem);
+      line-height: 1;
+      letter-spacing: -0.08em;
+      text-transform: uppercase;
+    }
+
+    .year-chip-stamp {
+      font-family: var(--mono);
+      font-size: 0.62rem;
+      letter-spacing: 0.12em;
+      text-transform: uppercase;
+      color: var(--ink);
+      background: var(--chip-c);
+      padding: 4px 7px;
+      white-space: nowrap;
+    }
+
+    .year-chip[aria-current="page"] {
+      color: var(--ink);
+      border-color: var(--chip-c);
+      background: color-mix(in srgb, var(--chip-c) 74%, var(--paper));
+      box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.42);
+      pointer-events: none;
+    }
+
+    .year-chip[aria-current="page"] .year-chip-stamp {
+      background: color-mix(in srgb, var(--chip-a) 16%, var(--paper));
+    }
+
     .backlink {
       display: inline-flex;
       align-items: center;
@@ -1294,6 +1373,8 @@ ${entry.antiCliches.map((item) => `        <li>${escapeHtml(item)}</li>`).join('
       <p>${escapeHtml(entry.feeling ? `${entry.year} rule: ${entry.feeling}.` : entry.frontmatter.subtitle)}</p>
     </section>
 
+${yearNavigator}
+
     <footer class="footer">
       <span>Flashback / examples / ${escapeHtml(entry.year)}</span>
       <a href="../../corpus/${escapeAttribute(entry.year)}.md">Read the full ${escapeHtml(entry.year)} corpus</a>
@@ -1304,6 +1385,49 @@ ${entry.antiCliches.map((item) => `        <li>${escapeHtml(item)}</li>`).join('
 `;
 }
 
+function renderExampleYearNavigator(entry, entries) {
+  const nearbyYears = buildExampleYearSet(entry.year, entries);
+  if (nearbyYears.length <= 1) return '';
+
+  const entryByYear = new Map(entries.map((candidate) => [candidate.year, candidate]));
+  const chips = nearbyYears
+    .map((year) => {
+      const candidate = entryByYear.get(year);
+      if (!candidate) return '';
+      const chipTheme = getTheme(candidate);
+      const current = year === entry.year;
+      const currentAttr = current ? ' aria-current="page"' : '';
+      const label = current ? `Viewing ${year}` : `Open the ${year} example`;
+      return `        <a class="year-chip" style="--chip-a: ${chipTheme.accentA}; --chip-b: ${chipTheme.accentB}; --chip-c: ${chipTheme.accentC};" href="../${escapeAttribute(year)}/index.html"${currentAttr} aria-label="${escapeAttribute(label)}">
+          <span class="year-chip-num">${escapeHtml(year)}</span>
+          <span class="year-chip-stamp">${escapeHtml(chipTheme.stamp)}</span>
+        </a>`;
+    })
+    .filter(Boolean)
+    .join('\n');
+
+  return `      <nav class="year-rail" aria-label="Browse nearby years">
+        <p class="year-rail-title">Jump nearby</p>
+        <div class="year-rail-track">
+${chips}
+        </div>
+      </nav>`;
+}
+
+function buildExampleYearSet(currentYear, entries) {
+  const sortedYears = [...new Set(entries.map((candidate) => candidate.year))].sort((a, b) => a - b);
+  const decadeStart = Math.floor(currentYear / 10) * 10;
+  const decadeEnd = decadeStart + 9;
+  const years = sortedYears.filter((year) => year >= decadeStart && year <= decadeEnd);
+  const previous = [...sortedYears].reverse().find((year) => year < decadeStart);
+  const next = sortedYears.find((year) => year > decadeEnd);
+
+  if (previous !== undefined) years.unshift(previous);
+  if (next !== undefined) years.push(next);
+
+  return years;
+}
+
 function siteBaseStyles() {
   return `    :root {
       color-scheme: dark;
@@ -2138,7 +2262,7 @@ function buildSite(entries) {
   for (const entry of entries) {
     const yearDir = join(siteExamples, String(entry.year));
     mkdirSync(yearDir, { recursive: true });
-    writeFileSync(join(yearDir, 'index.html'), generateExampleHtml(entry));
+    writeFileSync(join(yearDir, 'index.html'), generateExampleHtml(entry, entries));
     writeFileSync(join(siteCorpus, `${entry.year}.md`), entry.source);
   }