@gemboss/website-ui 0.12.0 → 0.13.0

package/docs/theming.md

@@ -3,8 +3,9 @@
 A GemCommerce brand (GemPages, Gemians…) uses the kit as it is and chooses six things, **and nothing else**:
 
 1. **the accent variables** (eight, light and dark),
-2. **the wash hues** (only if the brand has its own),
-3. **the logo** (and the favicon),
+2. **the wash hues** (only if the brand has its own), and the colours of its **announcement bar** and **Stage** (0.13.0,
+   only if it uses them and wants its own),
+3. **the logo** (and the favicon): a mark beside the name, or one drawing of both (0.13.0),
 4. **the action colour mode**: `data-gw-action="ink|accent"` on `<html>`,
 5. **the radius profile**: `data-gw-radius="tight|soft"` on `<html>`,
 6. **the header style**: the flat bar, or `.gw-header--float`.
@@ -46,9 +47,30 @@ brand's page lights in the brand's own colour, in light, in dark and in night ba
 takes the corners of the element it lights, so both radius profiles hold. A brand does not choose its colour, its
 strength or its size (they are tokens), and never a second colour.
 
-The logo and the favicon are files, not variables: the `<img class="gw-brand__mark">` (26×26, SVG preferred, with
-`alt=""` because the name is written next to it) and the `<span class="gw-brand__name">` in the header and footer
-partials, and `<link rel="icon">` in the page head.
+The logo and the favicon are files, not variables, in the header and footer partials and `<link rel="icon">` in the
+page head. The logo is one of two shapes:
+
+- **a mark beside the name** (GemBoss): `<img class="gw-brand__mark">` (34×34, SVG preferred, `alt=""` because the name
+  is written next to it) and `<span class="gw-brand__name">`;
+- **one drawing of both** (0.13.0, Gemians: the mark and the wordmark in one file): `<img class="gw-brand__logo">`, 26px
+  tall, its width the file's, its `alt` the brand's name. A logo that only works on a dark ground (a white wordmark)
+  comes with a second file in ink for the light theme, or the other way round: the file for light grounds first, then
+  the file for dark grounds as `class="gw-brand__logo gw-brand__logo--dark"`. The kit shows one per theme (the system's
+  setting or the toggle). Keep the brand's own drawing: recolour the wordmark, never redraw it in the kit's type.
+
+```html
+<a class="gw-brand" href="/"><img class="gw-brand__logo" src="/assets/img/logo.png" alt="Gemians" width="150" height="26"><img class="gw-brand__logo gw-brand__logo--dark" src="/assets/img/logo-on-dark.png" alt="Gemians" width="150" height="26"></a>
+```
+
+`check` reports a logo without its name in `alt`, without `width` and `height`, or a dark file without the light one
+right before it (`brand-markup`).
+
+**The announcement bar and the Stage** (0.13.0). The bar over the header (`--gw-announce-*`, `system.json`
+`color.announce`) and the Stage the mega menu's pictures sit on (`--gw-stage-*`, `color.stage`) are GemBoss's iris by
+default. A brand that shows them may set its own in the same `:root` block: the bar's `bg`, `ink`, `line`, `tag`,
+`tag-ink`, `link`, `link-line`; the Stage's `glow`, `glow-2`, `top`, `bottom`, `dot`, `ink`. Both stay the same in
+light and dark. `check` computes the bar's words and link on its ground and the Stage's words on both ends of its
+gradient, and fails below 4.5:1 (`brand-contrast`).
 
 The footer (0.7.0, `templates/footer.html`) is the same for every brand; a brand fills it. Its family row lists the
 brand's siblings (a GemPages site: GemBoss, GemX, GemUpsells), its Ask AI row asks about the brand, and its wordmark
@@ -106,8 +128,9 @@ button filled from site CSS (`accent-button`).
 
 `check` also reports: colours outside the tokens, a redefined kit token (`token-redefined`, including the radius and
 action tokens), overrides of `.gw-*` classes, an unknown profile or one set on another element than `<html>`
-(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), and, on a page with
-`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`).
+(`profile-unknown`), `.gw-header--float` anywhere but the header itself (`header-float-markup`), on a page with
+`data-gw-action="accent"`, accent button words below 4.5:1 (`action-contrast`), a brand's own announcement bar or
+Stage with words below 4.5:1 (`brand-contrast`), and a one-file logo without its markup (`brand-markup`).
 
 ## A full example
 
@@ -136,7 +159,7 @@ action tokens), overrides of `.gw-*` classes, an unknown profile or one set on a
 …
 <header class="gw-header gw-header--float" data-gw-header>
   <div class="gw-wrap gw-header__bar">
-    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="26" height="26"><span class="gw-brand__name">GemPages</span></a>
+    <a class="gw-brand" href="/"><img class="gw-brand__mark" src="/logo-mark.svg" alt="" width="34" height="34"><span class="gw-brand__name">GemPages</span></a>
 ```
 
 ## Check the contrast before you ship
@@ -145,8 +168,10 @@ The accent family is read as text: the kit draws links, step numbers, active men
 `--gw-accent-strong`, and the label square, focus ring, check marks and the featured plan's hairline in `--gw-accent`.
 So:
 
-1. **Accent text on white at least 4.5:1**: `--gw-accent-light` and `--gw-accent-strong-light` on `#ffffff`.
-   Check `--gw-accent-strong-light` on `--gw-bg-soft` (`#f2f3f5`) too, where links sit in soft sections.
+1. **Accent text on white at least 4.5:1**: `--gw-accent-strong-light` on `#ffffff` and on `--gw-bg-soft`
+   (`#f2f3f5`), where links sit in soft sections. The plain `--gw-accent-light` is never text (icons, marks, the focus
+   ring, the featured plan's hairline): **3:1** on `#ffffff` is enough (WCAG 1.4.11), so a gold or a light green can
+   stay bright there (0.13.0; this line asked 4.5:1 of it before, which no gold passes).
 2. `--gw-accent-strong-light` on `--gw-accent-soft-light`: at least 4.5:1 (the accent badge, the active chip and the
    chosen option of a segmented control).
 3. `--gw-accent-dark` and `--gw-accent-strong-dark` on `#0d0d12` (dark page) and on `#0c0e14` (night band): at
@@ -158,7 +183,9 @@ So:
    build does the same for its own colours.
 
 Any WCAG contrast checker works (paste the two hex values). A bright brand colour (yellow, light green, cyan) almost
-never passes on white: darken it for `-light` and keep the bright one for `-dark`. If you cannot get 4.5:1 without
+never passes as text on white: darken it for `-strong-light`, keep it near the brand for `-light` (3:1) and bright
+for `-dark`. A colour that needs dark words on it (gold, yellow) cannot be the button's fill and its text colour at
+once: keep the ink button (Gemians does). If you cannot get 4.5:1 without
 changing the brand colour beyond recognition, keep the kit's accent and use the brand colour only in the logo and
 illustrations, and keep the ink button.
 

package/js/website.js

@@ -1,9 +1,9 @@
-/*! @gemboss/website-ui 0.12.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.13.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.12.0';
+var version = '0.13.0';
 var api = { version: version, init: init, destroy: destroy };
 var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;
 var still, lights;

package/js/website.mjs

@@ -6,7 +6,7 @@
 // the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
 // their own, so the build can leave them out.
 
-var version = '0.12.0';
+var version = '0.13.0';
 var api = { version: version, init: init, destroy: destroy };
 // Page state. Set up by the first init(), never at import: a server can import this file.
 var doc, root, mine, fine, sys, wide, desk, mid, live = [], queued = false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",

package/templates/page.html

@@ -134,7 +134,7 @@
     <div class="gw-wrap">
       <div class="gw-footer__grid">
         <div class="gw-footer__brand">
-          <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
+          <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="34" height="34"><span class="gw-brand__name">[Brand]</span></a>
           <p>[One sentence on what the brand does for the reader.]</p>
         </div>
         <nav class="gw-footer__col" aria-label="[Column heading]">

package/templates/sections/form.html

@@ -11,6 +11,8 @@
     role="status" line ("Sent. We'll reply to name@example.com.").
   - Consent boxes start unchecked, say exactly what the reader gets, and are never required to get something else.
   - One field and its button (a newsletter, "email me the guide"): the .gw-form-inline row, see templates/footer.html.
+  As a page's first screen (a contact page, 0.13.0): the heading is the page's one <h1>, drawn at the section size
+  (<h1 class="gw-h2">), and the page needs no hero above it.
   Limits: three fields, one .gw-btn; no field that the team does not read.
 -->
 <section class="gw-section" aria-labelledby="[form-h]">

package/templates/sections/hero.html

@@ -3,7 +3,8 @@
   Variants: .gw-hero--center (centred, for short promises), .gw-hero--compact (subpages: less height, h2-sized h1).
   Add .gw-band--night for a dark hero (it counts as one of the page's three night bands).
   Limits: a short label, a two-part headline (muted first sentence, ink second), at most two lines under it,
-  one .gw-btn and one secondary action. The optional window holds a real product screen (img with alt, width, height)
+  one .gw-btn and one secondary action. Instead of the window, a photo: <figure class="gw-figure"> with its caption.
+  The optional window holds a real product screen (img with alt, width, height)
   or a drawn mock-up. Numbers in it that are not real get the caption "Illustrative data." (vi: "Dữ liệu minh hoạ.",
   zh: "示意数据。"); real ones get their source there. Never tuck the hero under the header.
 -->

package/templates/sections/split.html

@@ -2,7 +2,7 @@
   Split: one idea told in words beside a figure (a real screen, or a drawn mock-up of the product).
   .gw-split--reverse puts the figure on the left on wide screens; on phones the words always come first.
   Alternate --reverse between consecutive splits. Limits: label, h2, at most two lines, a check list of three to
-  five items, one action (a link or one button). The figure is a .gw-window or a <figure> with alt text; numbers in
+  five items, one action (a link or one button). The figure is a .gw-window (a screen) or a <figure class="gw-figure"> (a photo, with alt text and a caption); numbers in
   a window that are not real get the caption "Illustrative data.", real ones their source.
 -->
 <section class="gw-section">

package/templates/site/app/[[...path]]/route.js

@@ -0,0 +1,23 @@
+// Every static HTML page, served byte for byte from the built file and prerendered at build time, so each page is a
+// file on the CDN. A more specific route (app/blog/[slug]/page.js…) wins over this catch-all. Unknown URL: 404.html, 404.
+// Written by `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { ROOT, pages } from "../../lib/pages.mjs";
+
+export const dynamic = "force-static";
+export const dynamicParams = true;
+
+export function generateStaticParams() {
+  return [...pages().keys()].map((route) => ({ path: route === "/" ? [] : route.slice(1).split("/") }));
+}
+
+const HTML = { "content-type": "text/html; charset=utf-8" };
+
+export async function GET(_req, { params }) {
+  const { path } = await params;
+  const route = "/" + (path || []).join("/");
+  const file = pages().get(route);
+  if (file) return new Response(await readFile(join(/*turbopackIgnore: true*/ ROOT, file)), { status: 200, headers: HTML });
+  return new Response(await readFile(join(/*turbopackIgnore: true*/ ROOT, "404.html")), { status: 404, headers: HTML });
+}

package/templates/site/assets/kit-gaps.css

@@ -0,0 +1,3 @@
+/* Stopgaps for what @gemboss/website-ui does not have yet (AGENTS.md section 9). Each: classes prefixed kitgap-, the
+   kit's tokens and scales only, never a .gw-* override, and a comment naming its gap (gap #N, from
+   npx gemboss-website gap). npx gemboss-website upgrade says when the kit ships it: then delete the stopgap. */

package/templates/site/assets/site.css

@@ -0,0 +1,16 @@
+/* The site's own CSS, linked after the kit (website.css). Two jobs only (AGENTS.md sections 7 and 8):
+   1. the brand's choices, in ONE :root block: its accent family and wash, and if it has its own, its announcement bar
+      and Stage colours (docs/theming.md). Delete the lines the brand keeps from the kit; GemBoss sets none.
+   2. what the kit cannot know: an illustration, a drawn mock-up of the product. Tokens and scales only, classes with
+      the site's own prefix, never .gw-*. Something reusable the kit lacks is a gap: kit-gaps.css. */
+:root {
+  /* --gw-accent-light: #5661f5;         the accent on light pages: links' marks, focus ring, label square, check marks */
+  /* --gw-accent-strong-light: #3a44de;  accent text: 4.5:1 on --gw-bg and --gw-bg-soft */
+  /* --gw-accent-soft-light: #eef0fe;    its tint */
+  /* --gw-on-accent-light: #ffffff;      words on it (the button, under data-gw-action="accent") */
+  /* --gw-accent-dark: #7c84ff;          the same four in dark mode and night bands */
+  /* --gw-accent-strong-dark: #a3a9ff; */
+  /* --gw-accent-soft-dark: #1f2140; */
+  /* --gw-on-accent-dark: #0d0d12; */
+  /* --gw-wash-pink: #ff6f5e; --gw-wash-violet: #7c8af7; --gw-wash-sky: #43b0ff; --gw-wash-mint: #1fcf9f; */
+}

package/templates/site/gitignore

@@ -0,0 +1,4 @@
+/node_modules/
+/.next/
+/public/
+.DS_Store

package/templates/site/lib/pages.mjs

@@ -0,0 +1,41 @@
+// The static HTML pages this site serves, and at which URL: the Next route (app/[[...path]]/route.js) serves them, and
+// `npx gemboss-website build` writes the header and footer into them. An allow-list, not "every .html": partials/ and
+// node_modules/ are full of HTML that is not a page. A new folder of pages goes into DIRS on purpose, e.g. ["blog", true].
+// Written by `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+import { existsSync, readdirSync, statSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+
+export const ROOT = process.cwd();
+// [folder, recursive?]
+const DIRS = [["", false]];
+
+// turbopackIgnore: these reads only run at BUILD (prerendering every page); without it Next traces the whole project
+// into the function. At runtime the function only needs 404.html (next.config.mjs).
+function htmlIn(dir, deep) {
+  const abs = join(/*turbopackIgnore: true*/ ROOT, dir);
+  if (!existsSync(/*turbopackIgnore: true*/ abs)) return [];
+  const out = [];
+  for (const name of readdirSync(/*turbopackIgnore: true*/ abs)) {
+    const full = join(/*turbopackIgnore: true*/ abs, name);
+    if (statSync(/*turbopackIgnore: true*/ full).isDirectory()) {
+      if (deep) out.push(...htmlIn(join(dir, name), true));
+    } else if (name.endsWith(".html")) {
+      out.push(relative(ROOT, full).split(sep).join("/"));
+    }
+  }
+  return out;
+}
+
+/** file → clean URL, like Vercel's cleanUrls: index.html → /, pricing.html → /pricing. */
+export function routeOf(file) {
+  const stem = file.slice(0, -".html".length);
+  if (stem === "index") return "/";
+  return "/" + stem.replace(/\/index$/, "");
+}
+
+/** URL → file for every served page (404.html is the error page, not a page). */
+export function pages() {
+  const map = new Map();
+  for (const [dir, deep] of DIRS) for (const f of htmlIn(dir, deep)) if (f !== "404.html") map.set(routeOf(f), f);
+  return map;
+}

package/templates/site/next.config.mjs

@@ -0,0 +1,15 @@
+// Clean URLs: /pricing.html and /index.html redirect to the clean URL, /pricing/ to /pricing.
+// Written by `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+/** @type {import('next').NextConfig} */
+export default {
+  trailingSlash: false,
+  poweredByHeader: false,
+  async redirects() {
+    return [
+      { source: "/index.html", destination: "/", permanent: true },
+      { source: "/:path(.*)\\.html", destination: "/:path", permanent: true },
+    ];
+  },
+  // an unknown URL runs the route at request time and reads 404.html: ship that file with the function
+  outputFileTracingIncludes: { "/*": ["./404.html"] },
+};

package/templates/site/stage-public.mjs

@@ -0,0 +1,49 @@
+#!/usr/bin/env node
+// Copy the site's static files (not its HTML pages) into public/ before `next build`: Next serves only public/ and the
+// routes in app/. An ALLOW-LIST: only what is listed here becomes a public URL. Written by
+// `gemboss-website init --site` (@gemboss/website-ui); the site owns it from here.
+//   node stage-public.mjs           # rebuild public/ (npm run build runs it)
+//   node stage-public.mjs --check   # CI: public/ has what it needs and nothing internal
+import { cpSync, existsSync, mkdirSync, readdirSync, rmSync, statSync } from "node:fs";
+import { join, relative, sep } from "node:path";
+
+const ROOT = process.cwd();
+const OUT = join(ROOT, "public");
+const ROOT_FILES = ["favicon.svg", "robots.txt", "sitemap.xml"];
+const DIRS = ["assets"];
+const SKIP = (name) => name.endsWith(".html") || name.endsWith(".md") || name === ".DS_Store";
+
+function walk(dir) {
+  const out = [];
+  for (const name of readdirSync(dir)) {
+    const full = join(dir, name);
+    if (statSync(full).isDirectory()) out.push(...walk(full));
+    else out.push(relative(OUT, full).split(sep).join("/"));
+  }
+  return out;
+}
+
+function stage() {
+  rmSync(OUT, { recursive: true, force: true });
+  mkdirSync(OUT, { recursive: true });
+  for (const f of ROOT_FILES) if (existsSync(join(ROOT, f))) cpSync(join(ROOT, f), join(OUT, f));
+  for (const d of DIRS) if (existsSync(join(ROOT, d))) cpSync(join(ROOT, d), join(OUT, d), { recursive: true, filter: (src) => !SKIP(src.split(sep).pop()) });
+  const files = walk(OUT);
+  console.log(`public/: ${files.length} files`);
+  return files;
+}
+
+function check() {
+  const files = stage();
+  const bad = [];
+  for (const need of ["favicon.svg", "assets/kit/website.css", "assets/kit/website.js", "assets/site.css"]) {
+    if (!files.includes(need)) bad.push(`missing public file: ${need}`);
+  }
+  for (const f of files) if (/\.(html|md|py|mjs|sh)$/.test(f) || /(^|\/)(package(-lock)?\.json|vercel\.json)$/.test(f)) bad.push(`internal file in public/: ${f}`);
+  for (const b of bad) console.error("  " + b);
+  console.log(bad.length ? `stage-public: RED, ${bad.length}` : "stage-public: green");
+  return bad.length ? 1 : 0;
+}
+
+if (process.argv.includes("--check")) process.exit(check());
+stage();

package/templates/site/vercel.json

@@ -0,0 +1,5 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "framework": "nextjs",
+  "buildCommand": "npm run build"
+}

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.12.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.13.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
 /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
 :root {
   color-scheme: light;
@@ -740,6 +740,13 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 .gw-window__body:has(> img:only-child) + .gw-window__caption { padding-top: 12px; }
 
+/* figure (0.13.0, Gemians): a photo and its caption where a section shows one outside the prose (beside words in a
+   split, under a hero's actions): the picture at the card radius, the caption 14px, muted, 12px under it, as a figure
+   in .gw-prose. A screen of the product goes in .gw-window instead. */
+.gw-figure > :is(img, video, picture) { display: block; width: 100%; height: auto; border-radius: var(--gw-radius-card); }
+.gw-figure > picture > img { display: block; width: 100%; height: auto; border-radius: inherit; }
+.gw-figure > figcaption { margin-top: 12px; color: var(--gw-muted); font-size: 14px; line-height: 1.5; }
+
 /* icon: 20px inline stroke SVG (1.7 to 2px stroke, currentColor) */
 .gw-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; }
 .gw-icon svg { width: 20px; height: 20px; }
@@ -1541,6 +1548,19 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
 }
 
+/* ---- 0.13.0: the brand's logo as one drawing (Gemians): the mark and the wordmark in one file, in place of the mark and
+   the name, 26px tall, its width the file's. Its alt is the brand's name. A logo drawn for dark grounds only (a white
+   wordmark) comes as a second file, .gw-brand__logo--dark, right after the first: it shows in dark (the system's or the
+   toggle's) and the first one hides, the toggle icons' rule. One file that reads on both: no --dark. */
+.gw-brand__logo { display: block; flex: none; width: auto; height: 26px; }
+.gw-brand__logo--dark { display: none; }
+:root[data-theme="dark"] .gw-brand__logo--dark { display: block; }
+:root[data-theme="dark"] .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-brand__logo--dark { display: block; }
+  :root:not([data-theme="light"]) .gw-brand__logo:has(+ .gw-brand__logo--dark) { display: none; }
+}
+
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
   padding-block: 64px 32px;
@@ -1807,7 +1827,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
     radial-gradient(420px 320px at 52% 118%, color-mix(in srgb, var(--gw-wash-mint) 10%, transparent), transparent 62%);
 }
 .gw-hero h1 .gw-dim { display: block; }
-.gw-hero > .gw-wrap > .gw-window { margin-top: 48px; }
+.gw-hero > .gw-wrap > :is(.gw-window, .gw-figure) { margin-top: 48px; }
 .gw-hero--center { text-align: center; }
 .gw-hero--center > .gw-wrap > * { margin-inline: auto; }
 .gw-hero--center .gw-actions { justify-content: center; }
@@ -1840,7 +1860,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 .gw-logos img { width: auto; height: 28px; }
 
 /* stats: three or four facts, each with its source */
-.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
+.gw-stats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0; list-style: none; }
 .gw-stats__value { font-size: var(--gw-display-h2); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
 .gw-stats__label { margin-top: 8px; max-width: 28ch; color: var(--gw-muted); font-size: 14px; }
 .gw-stats__source { margin-top: 8px; color: var(--gw-muted); font-size: 12px; }
@@ -1873,7 +1893,6 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 32px 24px;
-  margin: 0;
   padding: 0;
   list-style: none;
   counter-reset: gw-step;
@@ -2305,7 +2324,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    .gw-card__media first, a .gw-label for the category, the title (its link covers the card, so the card is one target
    and the link's name is the title alone), one or two lines of excerpt and a .gw-article-meta row at the foot. One
    column on phones, two from 768px, three from 1080px. --compact: one column of rows, no card and no picture. */
-.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
+.gw-post-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; list-style: none; }
 .gw-post-list > li { display: flex; min-width: 0; }
 .gw-post { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
 .gw-post:hover { border-color: var(--gw-line-strong); }
@@ -2521,7 +2540,6 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   gap: 16px;
-  margin: 0;
   padding: 0;
   list-style: none;
 }