Tab-lede: typographic step-down on P2 + §X chip anchors

The intro paragraph below the banner had grown to two full-size lede
paragraphs, which read as a wall of text. Without touching the copy,
this gives the second paragraph a clear visual demotion so the eye
reads it as a navigator / table of contents rather than a second lede:

- P2 gets .tab-lede__note (font-size 19→14, color #2d2d2a→#5b5b56,
line-height 1.5→1.6, +14px top margin). Reads as a follow-up note
under the main definition.
- Each "(§X)" in P2 becomes an <a class="lede-chip" href="#section-id">
pointing at the matching section. Mono + warm-green border so the
references pop out as scannable jump-to markers within the prose,
and clicking actually scrolls to the section.

Section anchors used: §1 → #completion, §2 → #track, §3 → #vep,
§4 → #species, §5 → #folding, §6 → #umap, §7 → #speciesTree.

Co-authored-by: Cursor <cursoragent@cursor.com>

assets/styles/layout.css

@@ -48,6 +48,42 @@
   color: #2d2d2a;
   max-width: 760px;
 }
+/* Secondary "navigator" paragraph that follows the lede. Drops a step
+   in size + weight + saturation so the eye reads it as a follow-up /
+   table of contents rather than another full lede paragraph; the inline
+   §X references are styled as chip anchors (below) to keep it scannable. */
+.tab-lede p + p.tab-lede__note {
+  margin-top: 14px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: #5b5b56;
+}
+/* Inline chip anchors for the §1..§7 section references. Mono + warm
+   green border so they read as deliberate "jump-to" markers within
+   the prose. Subtle by default, fill in on hover/focus. */
+.lede-chip {
+  display: inline-block;
+  padding: 0 6px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  color: #1f5024;
+  background: rgba(49, 127, 63, 0.06);
+  border: 1px solid rgba(49, 127, 63, 0.35);
+  border-radius: 3px;
+  text-decoration: none;
+  vertical-align: 1px;          /* nudge up so it sits on the baseline of 14px prose */
+  line-height: 1.4;
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
+}
+.lede-chip:hover,
+.lede-chip:focus-visible {
+  background: rgba(49, 127, 63, 0.16);
+  border-color: #317f3f;
+  color: #1f1f1d;
+  outline: none;
+}
 
 /* --- Sections --- */
 section {

demo.html

@@ -118,14 +118,18 @@
       DNA, predict what comes next (six bases at a time, autoregressively). That's it — no
       annotations, no labels, no biology curriculum. Just <em>read DNA, predict more DNA</em>.
     </p>
-    <p>
+    <p class="tab-lede__note">
       The interesting question is what else falls out of that. We didn't tell Carbon what an
       exon is. We didn't tell it which mutations are pathogenic. We didn't tell it how genes
       differ between species. The sections below are ways to read what it picked up
-      anyway — autocomplete a gene (§1), see structure emerge in its confidence (§2), score a
-      disease variant against a healthy one (§3), recognise a gene's species of origin (§4),
-      and then push further into folded protein structure (§5), the embedding manifold (§6),
-      and the species tree (§7). Each demo runs against the public
+      anyway — autocomplete a gene (<a class="lede-chip" href="#completion">§1</a>), see
+      structure emerge in its confidence (<a class="lede-chip" href="#track">§2</a>), score
+      a disease variant against a healthy one (<a class="lede-chip" href="#vep">§3</a>),
+      recognise a gene's species of origin (<a class="lede-chip" href="#species">§4</a>),
+      and then push further into folded protein structure
+      (<a class="lede-chip" href="#folding">§5</a>), the embedding manifold
+      (<a class="lede-chip" href="#umap">§6</a>), and the species tree
+      (<a class="lede-chip" href="#speciesTree">§7</a>). Each demo runs against the public
       <code>HuggingFaceBio/Carbon-3B</code> checkpoint behind a live inference endpoint.
     </p>
   </div>