Footer: editorial site footer with collab credit + partner logos

Adds a multi-row site footer in demo.html (collab block with 4 partner
stamps, three-column identity/resources/sections strip, legal hairline)
backed by a full rewrite of assets/styles/footer.css. Drops partner
artwork under img/partners/ (Hugging Face, Zhongguancun Academy, TIGEM,
Federico II) plus their raw sources for traceability.

Also bundles a few small fixes uncovered while wiring the footer:
- demo.html banner: point Tech report to the paperswithcode landing
- sandbox.js: clear the .empty placeholder when incrementalRender takes
over straight from idle, so generated lines stop rendering inline
- section-vep.css: allow horizontal scroll on .vep-window so the 60bp
mono stack survives narrow viewports without breaking row alignment
- intro/species/controls/recipe/banner CSS: footer-adjacent polish

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

assets/js/sections/sandbox.js

@@ -242,6 +242,18 @@
   }
   function incrementalRender(bpl) {
     const total = promptBases + genText;
+    // Transition out of the empty-placeholder state: when generation
+    // kicks in straight from the idle placeholder, renderSequence() picks
+    // the incremental path (no mode/bpl change, totalLines >= renderedLines),
+    // so we never go through fullRender(). Without this guard the `.empty`
+    // class (display:flex + align-items:center) stays applied and the
+    // placeholder text node lingers next to the new <div class="sb-seq-line">
+    // children, which makes every line render as a flex-row item, all on a
+    // single overflowing horizontal line instead of a normal stack.
+    if (els.seq.classList.contains("empty")) {
+      els.seq.classList.remove("empty");
+      els.seq.textContent = "";
+    }
     const totalLines = Math.ceil(total.length / bpl);
     const lineDivs = els.seq.children;
     if (lineDivs.length > 0) {

assets/styles/banner.css

@@ -513,17 +513,46 @@ a.banner-path:focus-visible { outline: none; }
     min-height: auto;
     padding: 18px 18px 0;
   }
+  /* Hide the DNA helix on narrow viewports: the canvas animation is
+     expensive on mobile and the banner already feels dense without it.
+     We keep the element semantically present but visually removed. */
   .banner-helix {
-    height: 460px;
-    order: -1;        /* helix above headline on narrow viewports */
-  }
-  .cb-helix-canvas {
-    top: -40px; right: 0; bottom: -40px;
-    width: 100%; height: calc(100% + 80px);
-    transform: rotate(8deg);
-    transform-origin: center;
+    display: none;
   }
   .banner-wordmark { font-size: clamp(56px, 16vw, 96px); }
+
+  /* Stack the spec list vertically on narrow viewports: at desktop sizes the
+     three specs read as a comma-separated tagline thanks to the inline "·"
+     separators, but on mobile that row crams into ~320px and the dots end up
+     looking like accidental punctuation. Switching to column drops the
+     separators (hidden below) and gives each spec its own line, matching the
+     stacked links treatment underneath. The bumped top margin opens a small
+     breathing room above the first spec so the block doesn't collide with
+     the wordmark/subtitle stack. */
+  .banner-specs {
+    flex-direction: column;
+    align-items: flex-start;
+    margin-top: 18px;
+  }
+  .banner-spec + .banner-spec::before {
+    content: none;
+  }
+
+  /* Same treatment for the resource links (Models / Tech report / Code).
+     Each <li> takes its own row; the anchor stays inline so the underline
+     hugs the text instead of stretching the full column width. The extra
+     margin-bottom matches the new top spacing on .banner-specs and keeps a
+     clear gap before the tab strip below. */
+  .banner-links {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    margin-bottom: 24px;
+  }
+  .banner-links li {
+    width: auto;
+  }
+
   /* Let the four tabs split the row evenly so they fit a narrow viewport
      without horizontal scroll. min-width: 0 overrides the desktop 150px
      floor; nowrap stays on so "Carbon Recipe" doesn't wrap mid-tab. */

assets/styles/controls.css

@@ -36,7 +36,22 @@ button.action.primary:hover { background: #000; }
 button.action:disabled { opacity: 0.4; cursor: not-allowed; }
 button.action.primary:disabled { background: #888; border-color: #888; }
 .pill.active { background: #1f1f1d; color: #fff; border-color: #1f1f1d; }
-.pills { display: inline-flex; gap: 6px; }
+/* flex-wrap so pill rows (variants, genes, species…) break onto a second
+   line on narrow viewports instead of overflowing the .demo-toolbar to
+   the right. The 6px gap doubles as the row-gap when wrapping kicks in. */
+.pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
+
+/* Mobile: force the pills span onto its own toolbar row (`flex-basis: 100%`)
+   so labels like "color by" / "highlights" stack above and the pills get
+   the full card width to wrap into. Without this, the label eats horizontal
+   space, the pills get squeezed, and you end up with awkward orphan-pill
+   rows ("GENE LENGTH" alone, "MITOCHONDRIAL" alone). The spacer is dropped
+   too, otherwise it leaves a phantom blank row before the trailing action
+   buttons (which then wrap to their own row at their natural width). */
+@media (max-width: 600px) {
+  .demo-toolbar .pills { flex: 0 0 100%; }
+  .demo-toolbar .spacer { display: none; }
+}
 
 /* --- Stub placeholder for unbuilt demos --- */
 .stub {

assets/styles/footer.css

@@ -1,11 +1,436 @@
-/* footer.css, page footer: model identifier line at the bottom. */
+/* footer.css · editorial site footer.
 
-footer {
-  text-align: center; padding: 48px 32px;
-  color: #999; font-size: 11px;
-  font-family: "JetBrains Mono", monospace;
-  letter-spacing: 1px; text-transform: uppercase;
-  border-top: 1px solid #eee;
+   Composition (top → bottom):
+     1. Collaboration block — eyebrow + headline + lede, then a row of 4
+        partner stamps (logo + name + sub). The stamps are bare (no card
+        background) and separated by vertical hairlines so the row reads
+        as one editorial credit line, not four buttons.
+     2. Three-column lower strip — Carbon identity (logo + name + path)
+        on the left, then "Resources" (external) and "Sections" (in-page
+        tabs) link columns on the right.
+     3. Legal hairline strip — copyright + license on the left, model
+        spec recap on the right, all mono caps.
+
+   Sits on the same --paper as the rest of the page; a soft top hairline
+   plus a subtle radial-dot texture (echoing the banner) makes the footer
+   feel like the bottom trim of the editorial sheet rather than a
+   detached UI block. */
+
+.site-footer {
+  position: relative;
+  /* Tight against the preceding section: the panels above already carry
+     their own bottom padding (.container's 96px), so we don't add any
+     extra outer margin — just a hairline + a comfortable inner top pad. */
+  margin-top: 0;
+  background:
+    radial-gradient(circle at 18% 26%, rgba(0, 0, 0, 0.05), transparent 1px),
+    radial-gradient(circle at 82% 74%, rgba(0, 0, 0, 0.045), transparent 1px),
+    linear-gradient(180deg, transparent 0%, rgba(49, 127, 63, 0.02) 100%),
+    var(--paper, #f7f5ee);
+  background-size: 9px 9px, 13px 13px, auto, auto;
+  border-top: 1px solid var(--hairline, #d6d3c4);
+  color: var(--ink, #1f1f1d);
+  font-family: "Inter", "Helvetica Neue", sans-serif;
+}
+.site-footer__inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 40px 32px 24px;
+}
+
+/* ---------------------------------------------------------------------
+   1) COLLABORATION BLOCK
+--------------------------------------------------------------------- */
+.cb-collab {
+  padding-bottom: 56px;
+  margin-bottom: 44px;
+  border-bottom: 1px solid var(--hairline, #d6d3c4);
+}
+.cb-collab__head {
+  max-width: 760px;
+  margin-bottom: 40px;
+}
+.cb-collab__eyebrow {
+  display: inline-block;
+  margin-bottom: 12px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--green, #317f3f);
+}
+.cb-collab__title {
+  margin: 0 0 12px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 24px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.25;
+  color: var(--ink, #1f1f1d);
+}
+.cb-collab__lede {
+  margin: 0;
+  font-size: 14px;
+  line-height: 1.7;
+  color: #5b5b56;
+}
+.cb-collab__lede em {
+  font-style: normal;
+  color: var(--ink, #1f1f1d);
+  font-weight: 500;
+}
+
+/* Partner stamps row.
+   Four equal columns, no card chrome, separated by vertical hairlines
+   so the strip reads as a single editorial credit line. The hairlines
+   are drawn as 1px backgrounds on the left edge of each item, with the
+   first item suppressed. */
+.cb-partners {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+}
+.cb-partner {
+  position: relative;
+}
+.cb-partner + .cb-partner::before {
+  content: "";
+  position: absolute;
+  top: 12px;
+  bottom: 12px;
+  left: 0;
+  width: 1px;
+  background: var(--hairline, #d6d3c4);
+}
+.cb-partner__link {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 14px;
+  padding: 16px 18px;
+  text-decoration: none;
+  color: var(--ink, #1f1f1d);
+  border-radius: 4px;
+  transition: color 0.18s ease, background 0.18s ease, transform 0.18s ease;
+}
+.cb-partner__link:hover,
+.cb-partner__link:focus-visible {
+  color: var(--green, #317f3f);
+  background: rgba(49, 127, 63, 0.04);
+  outline: none;
+  transform: translateY(-1px);
+}
+/* Mark is sized by HEIGHT only so each partner's official logo can render
+   at its natural aspect ratio. HF and Zhongguancun are wide landscape
+   wordmarks (~3.8:1), TIGEM is gently landscape (~1.4:1), Federico II is
+   square. A fixed 56×56 box (the old behaviour) would either crop the
+   wordmarks or shrink them to illegibility. */
+.cb-partner__mark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 56px;
+  max-width: 100%;
+  color: inherit;
+}
+.cb-partner__mark img,
+.cb-partner__mark svg {
+  height: 100%;
+  width: auto;
+  max-width: 100%;
+  object-fit: contain;
+  display: block;
+  /* Calm the colorful logos at rest so the row reads as one credit line,
+     not four competing brand stamps; hover restores full saturation. */
+  filter: saturate(0.9);
+  transition: filter 0.18s ease, transform 0.18s ease;
+}
+.cb-partner__link:hover .cb-partner__mark img,
+.cb-partner__link:hover .cb-partner__mark svg,
+.cb-partner__link:focus-visible .cb-partner__mark img,
+.cb-partner__link:focus-visible .cb-partner__mark svg {
+  filter: saturate(1);
+  transform: scale(1.04);
+}
+.cb-partner__body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  width: 100%;
+}
+/* Both text labels (name + sub) are visually hidden: each partner is
+   already named in the .cb-collab__lede paragraph just above this
+   strip, and each logo carries its own wordmark. We keep both spans in
+   the DOM as sr-only so screen readers still get the explicit label
+   for every partner link. */
+.cb-partner__name,
+.cb-partner__sub {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ---------------------------------------------------------------------
+   2) LOWER STRIP — IDENTITY + LINK COLUMNS
+--------------------------------------------------------------------- */
+.site-footer__cols {
+  display: grid;
+  grid-template-columns: minmax(260px, 2fr) 1fr 1fr;
+  gap: 56px;
+  padding-bottom: 40px;
+}
+.site-footer__brand {
+  display: grid;
+  grid-template-columns: 44px 1fr;
+  gap: 14px;
+  align-items: start;
+}
+.site-footer__brand .logo-card {
+  width: 44px;
+  height: 44px;
+  display: block;
+  flex-shrink: 0;
+  text-decoration: none;
+}
+.site-footer__brand .logo-img { width: 100%; height: 100%; display: block; }
+.site-footer__brand-meta { display: flex; flex-direction: column; }
+.site-footer__brand-name {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 14px;
+  font-weight: 500;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: var(--ink, #1f1f1d);
+  line-height: 1.2;
+}
+.site-footer__brand-path {
+  margin-top: 2px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #8a8a85;
+  line-height: 1.2;
+}
+.site-footer__brand-lede {
+  margin: 14px 0 0;
+  font-size: 13px;
+  line-height: 1.65;
+  color: #5b5b56;
+  max-width: 320px;
+}
+
+.site-footer__col-title {
+  margin: 0 0 14px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.22em;
+  text-transform: uppercase;
+  color: var(--green, #317f3f);
+}
+.site-footer__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.site-footer__list a {
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  color: var(--ink, #1f1f1d);
+  text-decoration: none;
+  border-bottom: 1px solid rgba(31, 31, 29, 0.18);
+  padding-bottom: 1px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.site-footer__list a:hover,
+.site-footer__list a:focus-visible {
+  color: var(--green, #317f3f);
+  border-bottom-color: var(--green, #317f3f);
+  outline: none;
+}
+.site-footer__list .arrow {
+  margin-left: 4px;
+  display: inline-block;
+  font-size: 10px;
+  transform: translateY(-1px);
+  letter-spacing: 0;
+}
+
+/* ---------------------------------------------------------------------
+   3) LEGAL STRIP
+--------------------------------------------------------------------- */
+.site-footer__legal {
+  border-top: 1px solid var(--hairline, #d6d3c4);
+  padding-top: 22px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 10px 24px;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.18em;
+  text-transform: uppercase;
+  color: #8a8a85;
+}
+.site-footer__legal .dot {
+  display: inline-block;
+  margin: 0 8px;
+  color: #c2bfaf;
+}
+.site-footer__legal a {
+  color: #6f6c63;
+  text-decoration: none;
+  border-bottom: 1px solid rgba(111, 108, 99, 0.3);
+  padding-bottom: 1px;
+  transition: color 0.15s ease, border-color 0.15s ease;
+}
+.site-footer__legal a:hover,
+.site-footer__legal a:focus-visible {
+  color: var(--green, #317f3f);
+  border-bottom-color: var(--green, #317f3f);
+  outline: none;
+}
+
+/* ---------------------------------------------------------------------
+   Responsive
+--------------------------------------------------------------------- */
+@media (max-width: 960px) {
+  .site-footer__inner { padding: 36px 24px 22px; }
+  .cb-partners { grid-template-columns: repeat(2, 1fr); }
+  .cb-partner:nth-child(3)::before { display: none; }
+  .cb-partner:nth-child(2n + 1)::before { display: none; }
+  .cb-partner:nth-child(n + 3) {
+    border-top: 1px solid var(--hairline, #d6d3c4);
+    padding-top: 12px;
+    margin-top: 12px;
+  }
+  .site-footer__cols {
+    grid-template-columns: 1fr 1fr;
+    gap: 36px 40px;
+  }
+  .site-footer__brand { grid-column: 1 / -1; }
+  .cb-collab__title { font-size: 20px; }
+}
+
+/* ---------------------------------------------------------------------
+   Mobile (<= 540px)
+   Goals:
+   - Keep the partner strip as a 2×2 grid: a single-column stack with
+     row-flex looks unbalanced because the name/sub spans are sr-only,
+     so the row would render as "logo + empty space".
+   - Tighter vertical rhythm on the collaboration block.
+   - Keep Resources / Sections columns side-by-side so the footer
+     doesn't grow into a tall vertical scroll on phones.
+   - Stack the legal hairline with proper spacing.
+--------------------------------------------------------------------- */
+@media (max-width: 540px) {
+  .site-footer__inner { padding: 36px 20px 24px; }
+
+  /* Collaboration block — compressed editorial rhythm. */
+  .cb-collab {
+    padding-bottom: 32px;
+    margin-bottom: 28px;
+  }
+  .cb-collab__head { margin-bottom: 24px; }
+  .cb-collab__title {
+    font-size: 19px;
+    line-height: 1.3;
+    margin-bottom: 10px;
+  }
+  .cb-collab__lede {
+    font-size: 13px;
+    line-height: 1.6;
+  }
+
+  /* Partner stamps: 2×2 grid with both vertical and horizontal hairlines.
+     Each cell stays a centered logo block (labels remain sr-only). */
+  .cb-partners { grid-template-columns: repeat(2, 1fr); }
+  .cb-partner::before { display: none !important; }
+  .cb-partner {
+    position: relative;
+    padding-top: 0;
+    margin-top: 0;
+    border-top: none;
+  }
+  /* Vertical hairline between the two columns (drawn on the right cell). */
+  .cb-partner:nth-child(2n) {
+    border-left: 1px solid var(--hairline, #d6d3c4);
+  }
+  /* Horizontal hairline between rows (drawn on the top two cells). */
+  .cb-partner:nth-child(-n + 2) {
+    border-bottom: 1px solid var(--hairline, #d6d3c4);
+  }
+  .cb-partner__link {
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: 6px;
+    padding: 16px 10px;
+  }
+  .cb-partner__mark { height: 40px; flex-shrink: 0; }
+  .cb-partner__body { align-items: center; }
+
+  /* Lower strip: brand spans full width, link columns stay side-by-side
+     to keep the footer compact vertically. */
+  .site-footer__cols {
+    grid-template-columns: 1fr 1fr;
+    gap: 28px 20px;
+    padding-bottom: 28px;
+  }
+  .site-footer__brand {
+    grid-column: 1 / -1;
+    grid-template-columns: 40px 1fr;
+    gap: 12px;
+  }
+  .site-footer__brand-lede {
+    margin-top: 12px;
+    max-width: none;
+    font-size: 12.5px;
+  }
+  .site-footer__col-title { margin-bottom: 12px; }
+  .site-footer__list { gap: 10px; }
+
+  /* Legal strip: stack with breathing room; tighten the dot separators
+     so the line wraps gracefully on very narrow screens. */
+  .site-footer__legal {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
+    padding-top: 18px;
+    letter-spacing: 0.14em;
+    font-size: 10px;
+  }
+  .site-footer__legal .dot { margin: 0 6px; }
+}
+
+/* Very narrow screens — drop the partner row to a single column, since
+   four logos compressed into 2×2 start to crowd one another below this
+   width. The cell still centers the logo so the strip stays editorial. */
+@media (max-width: 380px) {
+  .cb-partners { grid-template-columns: 1fr; }
+  .cb-partner:nth-child(2n) { border-left: none; }
+  .cb-partner:nth-child(-n + 2) { border-bottom: none; }
+  .cb-partner + .cb-partner {
+    border-top: 1px solid var(--hairline, #d6d3c4);
+  }
+  .cb-partner__link { padding: 14px 8px; }
+  .cb-partner__mark { height: 36px; }
 }
-footer a { color: #666; text-decoration: none; }
-footer a:hover { color: #1f1f1d; }

assets/styles/recipe.css

@@ -7,4 +7,22 @@
 @media (max-width: 720px) {
   #demo7 #d7-cols { grid-template-columns: 1fr !important; }
   #demo9 > div:first-child { grid-template-columns: 1fr !important; }
+
+  /* On narrow viewports the input is placed on its own row underneath
+     the "type DNA" label so it can take the full toolbar width instead
+     of fighting for space with the label + status pill. */
+  #demo7 #d7-input { flex-basis: 100%; width: 100%; min-width: 0; }
+
+  /* Allow the rendered token chips (1-mer and 6-mer) to wrap to the next
+     line instead of scrolling horizontally. The seq-block defaults to
+     `white-space: pre; overflow-x: auto;` for desktop where horizontal
+     scroll is fine, but on mobile that pushes the DNA sequence off-screen.
+     `word-break: break-all` lets the chain break between chips (and, as a
+     safety net, between letters) so nothing extends past the demo card. */
+  #demo7 #d7-1mer,
+  #demo7 #d7-6mer {
+    white-space: normal;
+    overflow-x: visible;
+    word-break: break-all;
+  }
 }

assets/styles/section-intro.css

@@ -443,4 +443,67 @@
 
 @media (max-width: 720px) {
   .cd-mols { grid-template-columns: repeat(2, 1fr); }
+
+  /* §3 / §4 splice / §5 translate: the inner diagrams are sized by mono
+     letters / 30px circles and cannot shrink below their natural width
+     (cd-genex segments are flex: 0 0 auto; cd-translate is an 11-column
+     max-content grid). On a narrow viewport they overflow the .demo
+     card. Promote each diagram to its own horizontally-scrollable
+     viewport so the card edge stays clean and the rest of the layout
+     keeps working — content remains fully accessible by scrolling. */
+
+  /* §3 standalone gene strip: switch from flex-wrap: wrap to a single
+     horizontal scroll lane so the bar/letters stay aligned in one row
+     instead of breaking mid-sequence. Mirrors the §4 splice behaviour
+     below. The .cd-splice .cd-gene-strip override further down resets
+     overflow back to visible so the parent .cd-splice owns the scroll
+     in §4 rather than each inner strip scrolling on its own. */
+  .cd-gene-strip {
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .cd-translate {
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+    justify-content: start;
+  }
+
+  /* For .cd-splice we collapse the three rows (DNA strip → arrows →
+     mRNA strip) into a single max-content grid column so they all
+     resolve to the same width — the widest row's natural width. That
+     keeps the transcribe arrows aligned with the letters above and
+     below them, and produces a clean horizontal scroll on the whole
+     stack rather than each row scrolling independently. */
+  .cd-splice {
+    display: grid;
+    grid-template-columns: max-content;
+    justify-content: start;
+    width: 100%;
+    max-width: 100%;
+    margin-left: 0;
+    margin-right: 0;
+    overflow-x: auto;
+    overflow-y: hidden;
+    -webkit-overflow-scrolling: touch;
+  }
+  .cd-splice .cd-gene-strip {
+    width: auto;
+    max-width: none;
+    margin: 0;
+    overflow: visible;
+  }
+  .cd-splice-arrows { width: 100%; }
 }

assets/styles/section-species.css

@@ -10,6 +10,13 @@
   padding: 14px 0;
   border-top: 1px solid #eee;
 }
+/* Grid tracks default to min-width: auto, which lets the .species-seq
+   box (white-space: pre + the longest 60-char line) push the 1fr column
+   wider than the demo card. That defeats the inner overflow-x: auto and
+   forces the whole page to scroll horizontally on narrow viewports. Pin
+   both children to min-width: 0 so the column collapses to the card
+   width and .species-seq owns the horizontal scroll itself. */
+.species-row > * { min-width: 0; }
 .species-row:first-child { border-top: none; }
 .species-meta {
   font-family: "JetBrains Mono", monospace;
@@ -37,3 +44,35 @@
   line-height: 1.7; letter-spacing: 0.5px;
 }
 .species-seq.empty { color: #ccc; padding: 18px 12px; text-align: center; }
+
+/* On narrow viewports the 140px meta column eats half the .demo card
+   and squeezes the DNA block down to ~20 bases per line. Stack the row
+   so the sequence gets the full card width — the existing overflow-x
+   on .species-seq keeps it horizontally scrollable when 60 bp + spaces
+   still don't fit. Meta lays out as a single inline row so the species
+   name, sub-meta and identity stat read as a compact header above the
+   sequence rather than a tall left rail. */
+@media (max-width: 720px) {
+  .species-row {
+    grid-template-columns: 1fr;
+    gap: 8px;
+  }
+  .species-meta {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    column-gap: 14px;
+    row-gap: 4px;
+  }
+  .species-name { padding-left: 6px; }
+  .species-sub { margin-top: 0; padding-left: 0; }
+  .species-stats {
+    margin-top: 0;
+    padding-left: 0;
+    display: flex;
+    align-items: baseline;
+    gap: 6px;
+  }
+  .species-stats .stat-id { font-size: 13px; }
+  .species-stats .stat-sub { margin-top: 0; }
+}

assets/styles/section-vep.css

@@ -10,6 +10,13 @@
   background: #f7f7f7; border: 1px solid #e0e0e0;
   padding: 16px 20px; margin: 12px 0;
   text-align: left;
+  /* The .vep-stack inside is an inline-grid whose middle column is a
+     60bp mono sequence (~550px wide). On narrow viewports that overflows
+     the window, so we let the window scroll horizontally as a single
+     unit. Critically, we do NOT introduce a line-break inside .seq-line
+     / .arrow-line (those keep `white-space: pre`) so the original row,
+     arrow row, and mutation row stay character-for-character aligned. */
+  overflow-x: auto;
 }
 .vep-window .vep-stack {
   display: inline-grid;

demo.html

@@ -191,8 +191,6 @@
           <li class="banner-spec"><strong>6-mer</strong> tokenizer</li>
           <li class="banner-spec"><strong>1T</strong> train tokens</li>
         </ul>
-        <!-- TODO: replace the tech-report href with the canonical URL once
-             the report is published. -->
         <ul class="banner-links" aria-label="Resources">
           <li>
             <a href="https://huggingface.co/HuggingFaceBio/Carbon-3B" target="_blank" rel="noopener">
@@ -200,7 +198,7 @@
             </a>
           </li>
           <li>
-            <a href="#" target="_blank" rel="noopener">
+            <a href="https://paperswithcode.co/paper/83340" target="_blank" rel="noopener">
               Tech report<span class="arrow" aria-hidden="true">↗</span>
             </a>
           </li>
@@ -2154,6 +2152,124 @@ print(f"log P(alt) - log P(ref) at pos 20: {delta:+.3f}")</code></pre></div>
 </div>
 </div> <!-- /panel-sandbox -->
 
+<!-- ============================================================ -->
+<!-- SITE FOOTER · always visible across tabs.                    -->
+<!-- Composition: collaboration block (eyebrow + headline + lede  -->
+<!-- + 4 partner stamps), then a three-column strip (Carbon       -->
+<!-- identity / Resources / Sections), then a thin legal hairline -->
+<!-- with copyright + license + model spec recap.                 -->
+<!-- ============================================================ -->
+<footer class="site-footer" role="contentinfo">
+  <div class="site-footer__inner">
+
+    <!-- 1) Collaboration block -->
+    <section class="cb-collab" aria-labelledby="cb-collab-title">
+      <div class="cb-collab__head">
+        <span class="cb-collab__eyebrow">§ Collaboration</span>
+        <h2 id="cb-collab-title" class="cb-collab__title">A joint research effort</h2>
+        <p class="cb-collab__lede">
+          Carbon was built together by the research teams at
+          <em>Hugging Face</em>, the <em>Zhongguancun Academy</em>,
+          <em>TIGEM</em> and the <em>Università di Napoli Federico II</em>.
+        </p>
+      </div>
+
+      <!-- Each <img> uses an aspect-correct width/height pair (height fixed
+           at 56, width derived from each logo's natural ratio) to prevent
+           CLS while the CSS lets the mark display at its full landscape
+           ratio. The .cb-partner__name span is hidden visually because
+           each real logo already carries its own wordmark; it stays in
+           the DOM as an accessible label for screen readers. -->
+      <ul class="cb-partners">
+        <li class="cb-partner">
+          <a class="cb-partner__link" href="https://huggingface.co" target="_blank" rel="noopener">
+            <span class="cb-partner__mark"><img src="/img/partners/hugging-face.svg" alt="Hugging Face" width="211" height="56"></span>
+            <span class="cb-partner__body">
+              <span class="cb-partner__name">Hugging Face</span>
+              <span class="cb-partner__sub">open-source AI</span>
+            </span>
+          </a>
+        </li>
+        <li class="cb-partner">
+          <a class="cb-partner__link" href="https://www.bza.edu.cn/en/" target="_blank" rel="noopener">
+            <span class="cb-partner__mark"><img src="/img/partners/zhongguancun.png" alt="Zhongguancun Academy" width="217" height="56"></span>
+            <span class="cb-partner__body">
+              <span class="cb-partner__name">Zhongguancun Academy</span>
+              <span class="cb-partner__sub">Beijing · China</span>
+            </span>
+          </a>
+        </li>
+        <li class="cb-partner">
+          <a class="cb-partner__link" href="https://www.tigem.it/" target="_blank" rel="noopener">
+            <span class="cb-partner__mark"><img src="/img/partners/tigem.svg" alt="TIGEM, Telethon Institute of Genetics and Medicine" width="80" height="56"></span>
+            <span class="cb-partner__body">
+              <span class="cb-partner__name">TIGEM</span>
+              <span class="cb-partner__sub">genetics &amp; medicine</span>
+            </span>
+          </a>
+        </li>
+        <li class="cb-partner">
+          <a class="cb-partner__link" href="https://www.unina.it/" target="_blank" rel="noopener">
+            <span class="cb-partner__mark"><img src="/img/partners/federico-ii.svg" alt="Università degli Studi di Napoli Federico II" width="56" height="56"></span>
+            <span class="cb-partner__body">
+              <span class="cb-partner__name">Federico II</span>
+              <span class="cb-partner__sub">Napoli · Italy</span>
+            </span>
+          </a>
+        </li>
+      </ul>
+    </section>
+
+    <!-- 2) Identity + link columns -->
+    <div class="site-footer__cols">
+      <div class="site-footer__brand">
+        <a class="logo-card" href="#" aria-label="Carbon, go to top">
+          <img class="logo-img" src="/img/logo.svg" alt="" width="44" height="44">
+        </a>
+        <div class="site-footer__brand-meta">
+          <div class="site-footer__brand-name">CARBON</div>
+          <div class="site-footer__brand-path">huggingfacebio/carbon-3b</div>
+          <p class="site-footer__brand-lede">
+            An autoregressive genomic foundation model — open code, open weights, open data.
+          </p>
+        </div>
+      </div>
+
+      <div class="site-footer__col">
+        <h3 class="site-footer__col-title">Resources</h3>
+        <ul class="site-footer__list">
+          <li><a href="https://huggingface.co/HuggingFaceBio/Carbon-3B" target="_blank" rel="noopener">Model card<span class="arrow" aria-hidden="true">↗</span></a></li>
+          <li><a href="#" target="_blank" rel="noopener">Tech report<span class="arrow" aria-hidden="true">↗</span></a></li>
+          <li><a href="https://github.com/huggingface/carbon" target="_blank" rel="noopener">GitHub<span class="arrow" aria-hidden="true">↗</span></a></li>
+          <li><a href="https://huggingface.co/datasets/HuggingFaceBio/carbon-pretraining-corpus" target="_blank" rel="noopener">Dataset<span class="arrow" aria-hidden="true">↗</span></a></li>
+        </ul>
+      </div>
+
+      <div class="site-footer__col">
+        <h3 class="site-footer__col-title">Sections</h3>
+        <ul class="site-footer__list">
+          <li><a href="#intro">Intro</a></li>
+          <li><a href="#dna-lab">DNA Lab</a></li>
+          <li><a href="#recipe">Carbon Recipe</a></li>
+          <li><a href="#sandbox">Sandbox</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <!-- 3) Legal strip -->
+    <div class="site-footer__legal">
+      <span class="site-footer__copy">
+        © 2026 · Carbon <span class="dot">·</span>
+        <a href="https://www.apache.org/licenses/LICENSE-2.0" target="_blank" rel="noopener">Apache 2.0</a>
+      </span>
+      <span class="site-footer__spec">
+        393,216 bp context <span class="dot">·</span> 6-mer tokenizer <span class="dot">·</span> 1T train tokens
+      </span>
+    </div>
+
+  </div>
+</footer>
+
 <!-- Modular JS, served from /assets/js/. Load order matters because
      section IIFEs reference shared globals (lerp, logprobRgb, GENES,
      loadConfig, etc.) defined in shared/. Each file ends with its own