Adopt the design-kit product landscape across public pages

package.json

@@ -116,7 +116,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",
-    "@hraness/design-kit": "github:hraness/design-kit#v0.36.3",
+    "@hraness/design-kit": "github:hraness/design-kit#v0.41.0",
     "@hraness/desktop-foundation": "https://github.com/hraness/desktop-foundation/releases/download/v0.8.0/hraness-desktop-foundation-0.8.0.tgz",
     "@hraness/posthog": "https://github.com/hraness/posthog/releases/download/v0.3.11/hraness-posthog-0.3.11.tgz",
     "@hraness/ui": "github:hraness/ui#v0.5.18",

site/assets.test.ts

@@ -24,8 +24,10 @@ test("site CSS references separate hashed fonts with exact shared font bytes", a
     expect(faces.length).toBe(originals.size);
     expect(faces.length).toBeGreaterThan(0);
     // Design-kit 0.36.3 includes the shared marketing controls: 605,499 bytes,
-    // 90,697 with gzip. Allow 600 KiB raw; retain the 96 KiB transport guard.
-    expect(Buffer.byteLength(css)).toBeLessThan(614_400);
+    // 90,697 with gzip. Design-kit 0.41.0 adds the product-landscape ruleset:
+    // 640,999 bytes, 94,791 with gzip. Allow 640 KiB raw; retain the 96 KiB
+    // transport guard.
+    expect(Buffer.byteLength(css)).toBeLessThan(655_360);
     expect(gzipSync(css).byteLength).toBeLessThan(98_304);
     const references = new Set<string>();
     const hashes = new Set<string>();

site/build.ts

@@ -813,7 +813,7 @@ for (const [slug, doc] of specRenderers) docTitles.set(`spec/${slug}`, doc.title
 
 const emitDocPage = async (meta: SitePageMeta, body: string) => {
   routeLabels.set(meta.path, routeLabel(meta.path, meta.ogTitle));
-  let document = pageDocument(meta, `<main id="main" class="hraness-marketing-page docs-page">${body}</main>`);
+  let document = pageDocument(meta, `<main id="main" class="hraness-marketing-page docs-page" data-hraness-landscape="page">${body}</main>`);
   for (const [key, value] of Object.entries(replacements)) document = document.replaceAll(`{{${key}}}`, value);
   if (/\{\{[A-Z_]+\}\}/.test(document)) throw new Error(`Unresolved site build placeholder in ${meta.path}`);
   const target = join(DIST, meta.path, "index.html");

site/pages/grow.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page living-page grow-page">
+<main id="main" data-hraness-landscape="page" class="hraness-marketing-page living-page grow-page">
   <section class="living-intro" aria-labelledby="grow-title">
     <div><p class="eyebrow">Preview / browser application</p><h1 id="grow-title">Change a component<br><em>in your browser.</em></h1></div>
     <div class="living-intro-copy"><p class="lede">Choose an audience and release stage, then compare a proposed change to this component. You can apply it, restore an earlier version, and reopen its saved history in this browser.</p><p class="living-local-note"><span class="live-dot" aria-hidden="true"></span>The application runs in your browser without an account or server-side runtime.</p></div>

site/pages/home.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page product-landscape">
+<main id="main" class="hraness-marketing-page" data-hraness-landscape="page">
   <div class="intro-field hraness-marketing-field">
   <section class="hero hraness-marketing-hero" aria-labelledby="hero-title">
     <p class="eyebrow"><svg class="site-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="/icons.svg#terminal"></use></svg>{{SITE_CATEGORY}}</p>

site/pages/living.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page living-page">
+<main id="main" data-hraness-landscape="page" class="hraness-marketing-page living-page">
   <section class="living-intro" aria-labelledby="living-title">
     <div><p class="eyebrow">A living experiment / 01</p><h1 id="living-title">Software you<br>can <em>reshape.</em></h1></div>
     <div class="living-intro-copy"><p class="lede">A small piece of this website, with its workings open. Change the words. Change its context. Try another version, and find your way back.</p><p class="living-local-note"><span class="live-dot" aria-hidden="true"></span>Your changes stay in this browser.</p><p class="living-fine"><a href="/grow/">Try the evolving application with durable history and optional local AI <svg class="site-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="/icons.svg#arrow-right"></use></svg></a></p></div>

site/pages/tasks.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page living-page tasks-page">
+<main id="main" data-hraness-landscape="page" class="hraness-marketing-page living-page tasks-page">
   <section class="living-intro" aria-labelledby="tasks-heading">
     <div><p class="eyebrow">Preview / browser application</p><h1 id="tasks-heading">Tasks</h1></div>
     <div class="living-intro-copy"><p class="lede">Save tasks in this browser. Preview a different ordering, grouping, or reopening rule before applying it to your list.</p><p class="living-local-note">The application runs on this device without an account or server-side runtime.</p></div>

site/pages/tour.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page">
+<main id="main" data-hraness-landscape="page" class="hraness-marketing-page">
   <section class="page-intro" aria-labelledby="tour-title">
     <p class="eyebrow"><svg class="site-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="/icons.svg#terminal"></use></svg>A guided tour</p>
     <h1 id="tour-title" class="hraness-marketing-hero__heading">Inside a living program.</h1>

site/pages/use-cases.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page">
+<main id="main" data-hraness-landscape="page" class="hraness-marketing-page">
   <section class="page-intro" aria-labelledby="use-cases-title">
     <p class="eyebrow"><svg class="site-icon" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><use href="/icons.svg#file-check"></use></svg>Use cases</p>
     <h1 id="use-cases-title" class="hraness-marketing-hero__heading">Put living programs<br><em>to work.</em></h1>

site/pages/workbench.html

@@ -1,4 +1,4 @@
-<main id="main" class="hraness-marketing-page workbench-page">
+<main id="main" data-hraness-landscape="page" class="hraness-marketing-page workbench-page">
   <section class="workbench-intro"><div><p class="eyebrow">The application, explained</p><h1>Why <em>this?</em></h1></div><div><p class="lede">A running component and the evidence behind it. Follow a word to its source, inspect a change, and see what the host will allow next.</p><p id="wb-mode" class="workbench-mode">Recorded example · read only</p></div></section>
   <section id="wb-root" class="workbench" aria-label="Application workbench" aria-busy="true">
     <div class="workbench-toolbar"><span class="eyebrow">Malleable marketing</span><span id="wb-state-label">Loading captured state</span><div><button id="wb-refresh" type="button" class="living-text-button" hidden>Refresh</button><button id="wb-export" type="button" class="living-text-button" disabled>Export capture</button><label class="living-text-button living-file-button" for="wb-import">Open capture<input type="file" id="wb-import" accept="application/json,.json"></label></div></div>

site/styles.css

@@ -785,46 +785,11 @@ nav a[aria-current="page"] { color: var(--ink); }
   }
 }
 
-/* Product landscape: the generated, product-themed world behind the homepage.
- * A grayscale luminance mask carries the drawing, so its ink is the page's own
- * text mixed into the paper: a deeper shade of the background hue in light
- * themes and a lifted one in dark themes, never an accent colour. */
-body:has(> main.product-landscape) {
-  isolation: isolate;
-  position: relative;
-}
-
-@supports (mask-mode: luminance) {
-  body:has(> main.product-landscape)::before {
-    background: color-mix(in oklch, var(--foreground, CanvasText) 30%, var(--background, Canvas));
-    content: "";
-    inset: 0;
-    mask-image: image-set(url("./landscape/landscape-d47a65ab6fe28b81a1346eb2246900ee4a6fa24abea5340c19567038db9935d6.webp") 1x, url("./landscape/landscape-8f3f3dcf85540505deec117c4cbd96024adb384e62a169bf6a1cdf49433be2fd.webp") 2x);
-    mask-mode: luminance;
-    mask-position: top center;
-    mask-repeat: no-repeat;
-    mask-size: 100% auto;
-    opacity: .5;
-    pointer-events: none;
-    position: absolute;
-    z-index: -1;
-  }
-}
-
-@media (max-width: 48rem) {
-  body:has(> main.product-landscape)::before {
-    mask-image: url("./landscape/landscape-43d9ae67ae90f5993f596c75042d925bfc9314fa7ea697a56fb1cdb16122ffb0.webp");
-    opacity: .36;
-  }
-}
-
-@media (forced-colors: active), print {
-  body:has(> main.product-landscape)::before {
-    display: none;
-  }
-}
-
-/* The marketing column repaints the page colour; let the landscape show through it. */
-main.product-landscape {
-  background: transparent;
+/* Product landscape: this product's drawing for @hraness/design-kit/product-landscape.css.
+ * Public pages opt in with data-hraness-landscape="page"; see the kit's LANDSCAPE.md. */
+:root {
+  --hraness-landscape-image: image-set(url("./landscape/landscape-e118538b95a683b95105029c55b1db9a7967267b42c00bdc2c542a097403c2df.webp") 1x, url("./landscape/landscape-3f464d19210b415fc5b17d0b5feb30cb53a0d9a49869cfa4187b8cf2fc43279a.webp") 2x);
+  --hraness-landscape-image-narrow: url("./landscape/landscape-1ff8900612ff8c7da1954e3f640a470ca53c213e483cebad39f426192299df20.webp");
+  --hraness-landscape-ink: color-mix(in oklch, var(--foreground, CanvasText) 30%, var(--background, Canvas));
 }
+/* Product landscape: end */