feat: publish long-context deep dive

src/pages/index.astro

@@ -7,6 +7,7 @@ import { chapters, statusLabel } from "@/data/chapters";
 const routes: Record<string, string> = {
   roadmap: "/roadmap/",
   foundations: "/foundations/",
+  "long-context": "/long-context/",
 };
 
 const paths = [
@@ -74,6 +75,7 @@ const paths = [
           <a class="button primary" href="/roadmap/">选择学习路径 <span aria-hidden="true">↓</span></a>
           <a class="button" href="/k3/">直接解剖 K3</a>
           <a class="button" href="/deepseek/">DeepSeek 专题</a>
+          <a class="button" href="/long-context/">长上下文专题</a>
         </div>
       </div>
       <aside class="hero-aside" aria-label="项目统计">
@@ -95,6 +97,25 @@ const paths = [
     </div>
   </section>
 
+  <section class="section compact release-section" id="new-long-context">
+    <a class="release-card" href="/long-context/">
+      <div>
+        <p class="eyebrow"><span>NEW / CHAPTER 07</span> LONG CONTEXT</p>
+        <h2>一百万 Token，不是一扇更大的窗</h2>
+        <p>
+          新专题把长上下文拆成计算、缓存、位置、状态容量与系统五张账单，
+          沿 26 篇一手论文走完 FlashAttention、MLA、Delta Rule、KDA、Kimi K3 与 DeepSeek-V4。
+        </p>
+      </div>
+      <dl>
+        <div><dt>LINEAGE</dt><dd>2019 → 2026</dd></div>
+        <div><dt>VISUALS</dt><dd>10+ 机制图</dd></div>
+        <div><dt>LAB</dt><dd>8 种策略 · 4 档长度</dd></div>
+      </dl>
+      <span class="release-arrow" aria-hidden="true">进入专题 →</span>
+    </a>
+  </section>
+
   <section class="section" id="why">
     <div class="section-heading">
       <div>
@@ -295,4 +316,89 @@ const paths = [
       buttons.forEach((button) => button.addEventListener("click", () => select(button.dataset.pathButton ?? "beginner")));
     });
   </script>
+
+  <style>
+    .release-section {
+      padding-top: clamp(52px, 7vw, 92px);
+      padding-bottom: 0;
+    }
+
+    .release-card {
+      position: relative;
+      display: grid;
+      grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.65fr);
+      gap: clamp(34px, 6vw, 90px);
+      padding: clamp(28px, 4vw, 58px);
+      border: 1px solid var(--line-strong);
+      color: inherit;
+      text-decoration: none;
+      background:
+        radial-gradient(circle at 78% 20%, rgba(76, 118, 112, 0.12), transparent 34%),
+        var(--paper-raised);
+      transition: transform 180ms ease, border-color 180ms ease;
+    }
+
+    .release-card:hover {
+      transform: translateY(-3px);
+      border-color: var(--copper);
+    }
+
+    .release-card h2 {
+      max-width: 760px;
+      margin: 20px 0 18px;
+      font-size: clamp(2rem, 4vw, 4.2rem);
+      line-height: 1.03;
+    }
+
+    .release-card p:not(.eyebrow) {
+      max-width: 780px;
+      color: var(--ink-soft);
+      font-size: clamp(1rem, 1.4vw, 1.18rem);
+      line-height: 1.8;
+    }
+
+    .release-card dl {
+      margin: 0 0 28px;
+      border-top: 1px solid var(--line);
+    }
+
+    .release-card dl div {
+      display: grid;
+      grid-template-columns: 100px 1fr;
+      padding: 17px 0;
+      border-bottom: 1px solid var(--line);
+    }
+
+    .release-card dt {
+      color: var(--ink-muted);
+      font: 0.62rem/1.4 var(--mono);
+      letter-spacing: 0.12em;
+    }
+
+    .release-card dd {
+      margin: 0;
+      font-family: var(--serif);
+    }
+
+    .release-arrow {
+      position: absolute;
+      right: clamp(28px, 4vw, 58px);
+      bottom: clamp(24px, 3vw, 42px);
+      color: var(--copper);
+      font: 0.7rem/1 var(--mono);
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+
+    @media (max-width: 760px) {
+      .release-card {
+        grid-template-columns: 1fr;
+        padding-bottom: 76px;
+      }
+
+      .release-card dl {
+        margin: 0;
+      }
+    }
+  </style>
 </BaseLayout>