Roll the Observatory system out to every page

.hallmark/log.json

@@ -1,4 +1,16 @@
 [
+  {
+    "date": "2026-10-05",
+    "scope": "app",
+    "genre": "atmospheric",
+    "macrostructure": "design.md family — dossier · catalogue · long document",
+    "theme": "custom (design.md)",
+    "theme_axes": "dark / geometric-sans / warm",
+    "nav": "N10",
+    "footer": "Ft5",
+    "enrichment": "symbol-on-orbit hero per entry",
+    "brief": "Observatory rollout to all inner pages after Danny's pick on #53"
+  },
   {
     "date": "2026-10-02",
     "scope": "home (review PR)",
@@ -10,7 +22,7 @@
     "nav": "N10",
     "footer": "Ft5",
     "enrichment": "H9 Tier B SVG instrument + symbol sprite",
-    "brief": "Home redesign for owner review — symbolic graphics, motion, every-width mobile, local intelligence (NVIDIA stack), program logos"
+    "brief": "Home redesign for owner review — symbolic graphics, motion, every-width mobile, local intelligence on your own hardware (owner removed Apple/NVIDIA marks), program logos"
   },
   {
     "date": "2026-08-07",

AGENTS.md

@@ -41,8 +41,9 @@ links, product posture, identity-motion constraints). Dev server:
   licensing claims without an approved source (`CONTRIBUTING.md`).
 - Changes to the static mark or highway-centerline motion require
   explicit brand review.
-- Official home is the dark landing (`index.html` + `tokens.css` + `home.css` + `home.js`).
-  Inner pages keep `styles-dark.css` / `styles-light.css` until the redesign rollout.
+- Official home is the dark landing (`index.html` + `home.css` + `home.js`). Every page shares
+  `tokens.css` + `site.css` + `site.js`; inner pages add `pages.css`. `styles-dark.css` stays
+  because the validator asserts it exists; no page links it.
 - Evidence labels: `OBSERVED` / `INFERRED` / `ASPIRATIONAL` / `NOT_READY`
   / `NOT_COMPUTABLE`. App Store and production product URLs stay
   `NOT_READY` until a release is ready.

CHANGELOG.md

@@ -23,11 +23,18 @@ Cumulative release since `v0.3.0`: official dark home, social preview, and Herme
 
 ## Unreleased
 
+### Observatory rollout
+- Footer adds YouTube (@zer0state_studio) and TikTok (@zer0state3) on every page; the home's structured data lists them too.
+- Every public page moves onto the Observatory system: dossiers for products, skills, client, community, and the HexWire media kit; a catalogue for Work and Products; long documents with an on-this-page rail for philosophy, about, contact, privacy, and terms. Copy, alt text, and link targets carried over verbatim.
+- Shared `site.css` / `site.js` split out of the home files; cross-page view transitions hand the clicked symbol to the next page's hero.
+- Fixes the old inner pages' malformed `<picture>` markup; evidence images get WebP sources.
+
 ### Home redesign — proposed (A · Observatory)
 - New home in review: symbolic graphics, motion with reduced-motion paths, verified at 320–1440 px.
 - New sections: local intelligence deployments on your own hardware and program logos (ElevenLabs Startup Grants, Databricks Startup Program, Neon Startup Program).
 - Fixes malformed `<picture>` markup and dead `srcset` targets on the old home; hero image 1 MB → 107 KB; fonts self-hosted.
 - See `intent/2026-10-02-site-redesign.md`. Not deployed until approved.
+- Surveillance Survivor's image is now the current build's title screen (SS-runtime `shell_title_backdrop` + `shell_wordmark`, composed with the app's own scrim), replacing the legacy pixel-art hero.
 
 ### Community
 - Add a **Community** section on Work (`#community`) and a short Community block on the home evidence area, separate from Products and Clients.

README.md

@@ -97,14 +97,14 @@ Humans and coding agents follow [`AGENTS.md`](AGENTS.md). [`CLAUDE.md`](CLAUDE.m
 | `products/` | Parent-brand product summaries + repo links |
 | `clients/` | Parent-brand client notes; live product remains on the client site |
 | `community/` | Parent-brand notes for civic and hackathon work; not products for sale |
-| `index.html` + `tokens.css` + `home.css` + `home.js` | **Official home** (dark landing) |
-| `styles-dark.css` | Inner product, skill, client, community, and work pages (until the redesign rollout) |
+| `index.html` + `home.css` + `home.js` | **Official home** (dark landing) |
+| `tokens.css` + `site.css` + `site.js` | Shared system on every page: tokens, nav, footer, motion |
+| `pages.css` | Inner-page templates: dossier, long document, catalogue |
+| `styles-dark.css` | Legacy; kept because the validator asserts it exists |
 | `assets/glyphs.svg` | Symbol system — one glyph per portfolio entry and section |
 | `assets/fonts/` | Self-hosted OFL faces (see `assets/THIRD_PARTY_NOTICES.md`) |
 | `concepts/dark-landing/` | Redirect to official home (legacy URL) |
-| `styles-light.css` | Secondary light pages (work, philosophy, about, …) |
 | `assets/` | Marks, retina identity, product heroes |
-| `styles.css`, `script.js` | Shared light-site presentation |
 | `design.md` | Locked design system |
 | `scripts/validate-site.js` | CI / Pages build validation |
 | `sitemap.xml`, `robots.txt` | Public crawler list at `https://zer0state.com/` |

about.html

@@ -1,83 +1,74 @@
 <!doctype html>
 <html lang="en">
 <head>
-<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
-<meta name="description" content="About Zero State.">
-<meta name="theme-color" content="#F4F0E8">
-<title>About — Zero State</title>
-<link rel="canonical" href="https://zer0state.com/about.html">
-<link rel="icon" href="assets/zero-state-mark.svg" type="image/svg+xml">
-<link rel="stylesheet" href="styles-light.css">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
+  <meta name="description" content="About Zero State.">
+  <meta name="theme-color" content="#0f1110">
+  <meta name="color-scheme" content="dark">
+  <title>About — Zero State</title>
+  <link rel="canonical" href="https://zer0state.com/about.html">
+  <link rel="icon" href="assets/brand/favicon-64.png" type="image/png">
+  <link rel="apple-touch-icon" href="assets/brand/apple-touch-icon.png">
+  <link rel="preload" href="assets/fonts/geist-latin.woff2" as="font" type="font/woff2" crossorigin>
+  <link rel="stylesheet" href="tokens.css">
+  <link rel="stylesheet" href="site.css">
+  <link rel="stylesheet" href="pages.css">
 </head>
-<body>
+<body class="obs">
 <a class="skip-link" href="#main">Skip to content</a>
-
-<header class="site-header" data-header>
-  <div class="shell nav-wrap">
-    <a class="brand" href="index.html" aria-label="Zero State home">
-      <img src="assets/zero-state-mark.svg" alt="" width="34" height="34">
-      <span>ZERØ STATE</span>
-    </a>
-    <button class="menu-button" type="button" aria-expanded="false" aria-controls="site-nav" data-menu-button>
-      <span class="sr-only">Toggle navigation</span><span></span><span></span>
-    </button>
-    <nav id="site-nav" class="site-nav" aria-label="Primary" data-nav>
-      <a class="nav-cta" href="contact.html">Begin here</a>
-      <a href="work.html">Work</a>
-      <a href="marketing.html">Products</a>
-      <a href="about.html" aria-current="page">About</a>
+<header class="nav" data-nav>
+  <div class="nav__inner">
+    <a class="wordmark" href="index.html" aria-label="Zero State home"><picture><source srcset="assets/brand/zero_state_mark_3_nav.webp" type="image/webp"><img src="assets/brand/zero_state_mark_3_nav.png" alt="" width="20" height="32"></picture><span>ZERØ STATE</span></a>
+    <nav class="nav__links" id="nav-links" aria-label="Primary">
+      <a href="index.html#evidence">Work</a><a href="index.html#local">Local intelligence</a><a href="index.html#method">Method</a><a href="work.html">Portfolio</a>
+      <a class="nav__sheet-cta" href="index.html#contact">Begin here</a>
     </nav>
+    <a class="nav__cta" href="index.html#contact">Begin here</a>
+    <button class="nav__menu" type="button" aria-expanded="false" aria-controls="nav-links" data-menu><span>Menu</span></button>
   </div>
 </header>
-
-<main id="main">
-  <section class="page-hero shell">
-    <p class="eyebrow">About</p>
-    <h1>A software company at the beginning of its work.</h1>
-    <p class="hero-lede">Zero State LLC develops software from an adaptive, first-principles philosophy.</p>
-  </section>
-
-  <section class="section shell longform">
-    <h2>Legal entity</h2>
+<main id="main" class="doc">
+<header class="doc__head">
+  <p class="kicker" data-load="0">About</p>
+  <h1 class="page-title" data-load="1">A software company at the beginning of its work.</h1>
+  <p class="doc__lede" data-load="2">Zero State LLC develops software from an adaptive, first-principles philosophy.</p>
+</header>
+<div class="doc__layout">
+  <nav class="doc__rail" aria-label="On this page"><p class="kicker">On this page</p><a href="#legal-entity">Legal entity</a><a href="#our-position">Our position</a><a href="#our-method">Our method</a><a href="#our-standard">Our standard</a><a href="#public-sources">Public sources</a><a href="#contact">Contact</a></nav>
+  <article class="doc__body">
+<h2 id="legal-entity">Legal entity</h2>
     <p><strong>Zero State LLC</strong> is a United States limited liability company. We publish products and public work under the Zero State brand. Contact: <a href="mailto:zer0state@zer0state.com">zer0state@zer0state.com</a>.</p>
 
-    <h2>Our position</h2>
+    <h2 id="our-position">Our position</h2>
     <p>We are neither waiting for the future nor claiming to own it. We are learning how to build responsibly within changing technological conditions.</p>
 
-    <div class="threshold-cross"></div>
+    <hr>
 
-    <h2>Our method</h2>
+    <h2 id="our-method">Our method</h2>
     <p>We begin from reality, remove expired assumptions, preserve what remains true, and use emerging technologies deliberately.</p>
 
-    <h2>Our standard</h2>
+    <h2 id="our-standard">Our standard</h2>
     <p>We allow the quality, coherence, and durability of the work to reveal whether the philosophy has value.</p>
 
-    <div class="threshold-cross"></div>
+    <hr>
 
-    <h2>Public sources</h2>
+    <h2 id="public-sources">Public sources</h2>
     <p>Product work is developed under the Zero State brand. Portfolio pages present the current product posture; App Store and production product URLs are not claimed until a release is ready.</p>
 
-    <h2>Contact</h2>
+    <h2 id="contact">Contact</h2>
     <p>Reach Zero State at <a href="mailto:zer0state@zer0state.com">zer0state@zer0state.com</a>.</p>
-  </section>
+  </article>
+</div>
 </main>
-
-<footer class="site-footer">
-  <div class="shell footer-grid">
-    <a class="brand footer-brand" href="index.html">
-      <img src="assets/zero-state-mark-inverse.svg" alt="" width="32" height="32">
-      <span>ZERØ STATE</span>
-    </a>
-    <p>Software for a world that keeps changing.</p>
-    <div class="footer-links">
-      <a href="privacy.html">Privacy</a>
-      <a href="terms.html">Terms</a>
-      <a href="marketing.html">Products</a>
-      <a href="contact.html">Support</a>
-      <span>© <span data-year></span> Zero State LLC</span>
-    </div>
+<footer class="foot">
+  <p class="foot__line">Software for a world that keeps changing.</p>
+  <div class="foot__meta">
+    <a class="wordmark" href="index.html" aria-label="Zero State home"><picture><source srcset="assets/brand/zero_state_mark_3_nav.webp" type="image/webp"><img src="assets/brand/zero_state_mark_3_nav.png" alt="" width="20" height="32"></picture><span>ZERØ STATE</span></a>
+    <nav class="foot__links" aria-label="Footer"><a href="https://github.com/Zero-State-LLC">GitHub</a><a href="https://www.facebook.com/1289691754235122" target="_blank" rel="noopener noreferrer">Facebook</a><a href="https://www.instagram.com/zerostatehq/" target="_blank" rel="noopener noreferrer">Instagram</a><a href="https://x.com/z3r0st4t3" target="_blank" rel="noopener noreferrer">X</a><a href="https://www.youtube.com/@zer0state_studio" target="_blank" rel="noopener noreferrer">YouTube</a><a href="https://www.tiktok.com/@zer0state3" target="_blank" rel="noopener noreferrer">TikTok</a><a href="privacy.html">Privacy</a><a href="terms.html">Terms</a><a href="marketing.html">Products</a><a href="work.html#clients">Clients</a><a href="work.html#community">Community</a><a href="contact.html">Support</a><a href="work.html">Work</a><a href="about.html">About</a></nav>
+    <p class="foot__legal">© <span data-year>2026</span> Zero State LLC</p>
   </div>
 </footer>
-<script src="script.js"></script>
+<script src="site.js" defer></script>
 </body>
 </html>