web: live GitHub-parsed stats, visitor-first copy, ibm validated, mobile pass

- hero stats parse from GitHub at view time: project count from the org's
  public repos, maintainer count from shotgate's MAINTAINERS.md roster
  table, license SPDX id, stage from the dev-status classifier and latest
  release tag; static values remain as fallback
- copy: replaced design-system-internal language with visitor-facing copy
  (projects intro, planned-project card, shared-system panel)
- shotgate card: ibm chip now working (validated on ibm_fez), docs link
  points at the rendered docs reader
- mobile: nav links become a scrollable mono row instead of disappearing,
  denser stats/cards/panels at small widths

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: morph-eos

index.html

@@ -47,26 +47,27 @@
       <h1>coldqubit</h1>
       <p class="tagline">The missing <span class="c">layers</span> between a quantum circuit and production.</p>
 
+      <!-- values are static fallbacks; js/site.js re-parses them from GitHub -->
       <div class="stats">
         <div class="stat">
           <div class="l">Active projects</div>
-          <div class="v"><span class="tick"></span>01</div>
-          <div class="s">shotgate · more planned</div>
+          <div class="v"><span class="tick"></span><span id="s-projects">01</span></div>
+          <div class="s" id="s-projects-sub">shotgate · more planned</div>
         </div>
         <div class="stat">
           <div class="l">Maintainers</div>
-          <div class="v">1</div>
-          <div class="s">co-maintainers welcome</div>
+          <div class="v" id="s-maintainers">1</div>
+          <div class="s">from MAINTAINERS.md · co-maintainers welcome</div>
         </div>
         <div class="stat">
           <div class="l">License</div>
-          <div class="v">Apache-2.0</div>
+          <div class="v" id="s-license">Apache-2.0</div>
           <div class="s">permissive, OSI-approved</div>
         </div>
         <div class="stat">
           <div class="l">Stage</div>
-          <div class="v">alpha</div>
-          <div class="s">structured to grow</div>
+          <div class="v" id="s-stage">alpha</div>
+          <div class="s" id="s-stage-sub">latest release v0.2.2</div>
         </div>
       </div>
     </div>
@@ -77,7 +78,7 @@ <h1>coldqubit</h1>
       <div class="sec-head">
         <span class="kicker"><span class="tick"></span>Projects under coldqubit</span>
         <h2>One home, growing into an ecosystem.</h2>
-        <p>Every project inherits the shared system, palette, type, and the tile-based mark language, and adds a single glyph and accent. Today there is one.</p>
+        <p>Independent tools that share one standard: declarative workflows, container-first reproducibility, statistical rigor, and honest status reporting. Today there is one, and room for more.</p>
       </div>
 
       <div class="projects">
@@ -92,12 +93,12 @@ <h2>One home, growing into an ecosystem.</h2>
               <span class="chip alpha"><span class="dot"></span>alpha</span>
             </div>
           </div>
-          <p class="proj-desc">CI/CD quality gates for quantum circuits. Statistically validate the probabilistic output of quantum programs across simulators and real QPUs, as declarative YAML, with drop-in exit-code gating.</p>
+          <p class="proj-desc">CI/CD quality gates for quantum circuits. Statistically validate the probabilistic output of quantum programs across simulators and real QPUs, as declarative YAML, with drop-in exit-code gating. Validated on real hardware: ibm_fez, Bell/GHZ/Grover at 4096 shots.</p>
 
           <div class="field-label">Backends</div>
           <div class="row">
             <span class="chip working"><span class="dot"></span>local-aer</span>
-            <span class="chip alpha"><span class="dot"></span>ibm</span>
+            <span class="chip working"><span class="dot"></span>ibm</span>
             <span class="chip planned"><span class="dot"></span>braket</span>
           </div>
 
@@ -106,7 +107,7 @@ <h2>One home, growing into an ecosystem.</h2>
           <div class="proj-links">
             <a class="plink" href="https://shotgate.coldqubit.org">Site <span class="arr">→</span></a>
             <a class="plink" href="https://github.com/coldqubit/shotgate">GitHub <span class="arr">→</span></a>
-            <a class="plink" href="https://github.com/coldqubit/shotgate/tree/main/docs">Docs <span class="arr">→</span></a>
+            <a class="plink" href="https://shotgate.coldqubit.org/docs/">Docs <span class="arr">→</span></a>
           </div>
         </div>
 
@@ -118,9 +119,9 @@ <h2>One home, growing into an ecosystem.</h2>
               <div class="proj-role">planned</div>
             </div>
           </div>
-          <p class="proj-desc">Reuses the shared tile and type, adds one new glyph and accent. The system is built to grow into an ecosystem, not a one-off. Proposals start as an issue under the project home.</p>
+          <p class="proj-desc">The gap between a runnable circuit and production is wider than one tool: scheduling, observability, policy, cost. If you want to build one of those layers in the open, start the conversation with an issue.</p>
           <div class="proj-links">
-            <a class="plink" href="https://github.com/coldqubit">Watch the home <span class="arr">→</span></a>
+            <a class="plink" href="https://github.com/coldqubit/shotgate/issues">Propose a project <span class="arr">→</span></a>
           </div>
         </div>
       </div>
@@ -147,9 +148,9 @@ <h3>One maintainer today, structured to grow.</h3>
         </div>
 
         <div class="panel" id="system">
-          <span class="kicker"><span class="tick"></span>Shared design system</span>
-          <h3>coldqubit owns the system; products inherit it.</h3>
-          <p>One palette, one type family, one tile-based mark language. The violet tile is the shared base; each product adds a glyph and owns exactly one accent. Cyan is the home's; shotgate runs solar coral.</p>
+          <span class="kicker"><span class="tick"></span>One recognizable system</span>
+          <h3>You should always know where you are.</h3>
+          <p>Every coldqubit surface, from CLI output to docs to this page, speaks the same language: terminal-native type, green/red PASS/FAIL semantics, one accent per project. Cyan means you are at the home; solar coral means shotgate.</p>
           <div class="mark-row">
             <img src="assets/coldqubit-logomark.svg" alt="coldqubit mark">
             <div>

js/site.js

@@ -1,5 +1,8 @@
 // coldqubit.org · surface behavior
-// One effect: show the navbar name only while the hero "coldqubit" is off screen.
+// Two effects: the scroll-reveal navbar name, and hero stats parsed live
+// from GitHub (org repos, MAINTAINERS.md, license, release/stage).
+
+// Show the navbar name only while the hero "coldqubit" is off screen.
 (function () {
   var nav = document.getElementById('topnav');
   var heroName = document.querySelector('.hero h1');
@@ -8,3 +11,71 @@
     nav.classList.toggle('scrolled', !entries[0].isIntersecting);
   }, { threshold: 0 }).observe(heroName);
 })();
+
+// Hero stats, parsed from GitHub. The HTML values are static fallbacks;
+// anything that fails (offline, rate limit) keeps the baked-in value.
+// Responses cache in sessionStorage for 10 minutes to respect the
+// unauthenticated GitHub API limit (60 req/h per IP).
+(function () {
+  var ORG = 'coldqubit';
+  var TTL = 10 * 60 * 1000;
+
+  function cached(url, asText) {
+    var key = 'cq:' + url;
+    try {
+      var hit = JSON.parse(sessionStorage.getItem(key));
+      if (hit && Date.now() - hit.t < TTL) return Promise.resolve(hit.v);
+    } catch (e) { /* fall through to network */ }
+    return fetch(url).then(function (r) {
+      if (!r.ok) throw new Error(String(r.status));
+      return asText ? r.text() : r.json();
+    }).then(function (v) {
+      try { sessionStorage.setItem(key, JSON.stringify({ t: Date.now(), v: v })); } catch (e) { /* quota */ }
+      return v;
+    });
+  }
+
+  function set(id, value) {
+    var el = document.getElementById(id);
+    if (el && value != null) el.textContent = value;
+  }
+
+  // Active projects: public, non-fork, non-archived repos that are products
+  // (the .github org-management repo is the home itself, not a project).
+  cached('https://api.github.com/orgs/' + ORG + '/repos?per_page=100&type=public').then(function (repos) {
+    var projects = repos.filter(function (r) {
+      return !r.fork && !r.archived && r.name !== '.github';
+    });
+    if (!projects.length) return;
+    set('s-projects', String(projects.length).padStart(2, '0'));
+    var names = projects.map(function (r) { return r.name; }).sort().join(' · ');
+    set('s-projects-sub', names + ' · more planned');
+  }).catch(function () {});
+
+  // Maintainers: count the rows of the "Current maintainers" table in
+  // shotgate's MAINTAINERS.md, the project's source of truth for the roster.
+  cached('https://raw.githubusercontent.com/' + ORG + '/shotgate/main/MAINTAINERS.md', true).then(function (md) {
+    var section = md.split(/^## Current maintainers/m)[1];
+    if (!section) return;
+    section = section.split(/^## /m)[0];
+    var rows = section.split('\n').filter(function (l) {
+      return /^\|\s*\[/.test(l); // table rows whose first cell is a [link]
+    });
+    if (rows.length) set('s-maintainers', rows.length);
+  }).catch(function () {});
+
+  // License: SPDX id of the flagship repo.
+  cached('https://api.github.com/repos/' + ORG + '/shotgate').then(function (r) {
+    var spdx = r.license && r.license.spdx_id;
+    if (spdx && spdx !== 'NOASSERTION') set('s-license', spdx);
+  }).catch(function () {});
+
+  // Stage: dev-status classifier + latest release tag.
+  cached('https://raw.githubusercontent.com/' + ORG + '/shotgate/main/pyproject.toml', true).then(function (t) {
+    var st = t.match(/Development Status :: \d+ - ([A-Za-z/ ]+)"/);
+    if (st) set('s-stage', st[1].trim().toLowerCase());
+  }).catch(function () {});
+  cached('https://api.github.com/repos/' + ORG + '/shotgate/releases/latest').then(function (r) {
+    if (r.tag_name) set('s-stage-sub', 'latest release ' + r.tag_name);
+  }).catch(function () {});
+})();

styles/site.css

@@ -119,11 +119,27 @@ a { color: inherit; text-decoration: none; }
 @media (max-width: 980px) {
   .stats { grid-template-columns: repeat(2, 1fr); }
   .projects, .lower { grid-template-columns: 1fr; }
-  .topnav-links { display: none; }
+}
+
+/* mobile nav: never hide the links; they become a scrollable mono row */
+@media (max-width: 980px) {
+  .topnav-inner { flex-wrap: wrap; height: auto; padding-top: 12px; column-gap: 16px; }
+  .topnav-brand { order: 1; }
+  .gh-link { order: 2; margin-left: auto; }
+  .topnav-links { order: 3; flex-basis: 100%; margin-left: 0; gap: 18px; font-size: 13px; padding: 10px 2px 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
+  .topnav-links::-webkit-scrollbar { display: none; }
+  :is(.section, .panel)[id] { scroll-margin-top: 112px; }
 }
 
 @media (max-width: 640px) {
   .wrap { padding: 0 22px; }
-  .hero-inner { padding-left: 22px; padding-right: 22px; }
+  .hero-inner { padding-left: 22px; padding-right: 22px; padding-top: 46px; }
   .kicker { white-space: normal; }
+  .section { padding: 44px 0; }
+  .stats { grid-template-columns: 1fr 1fr; gap: 10px; }
+  .stat { padding: 14px 16px; }
+  .stat .v { font-size: 22px; }
+  .panel { padding: 22px 20px; }
+  .proj { padding: 20px 18px 18px; }
+  .foot-inner .right { margin-left: 0; }
 }