@gemboss/website-ui 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -4,6 +4,115 @@ Every release lists what changed for a site that uses the kit. A release that ad
 says so with `Closes gap #N` (the GitHub issue number), so `npx gemboss-website upgrade` can tell that site which
 stopgap (`kitgap-*`) it can now delete.
 
+## 0.11.0 (2026-10-26)
+
+The header, 1:1 with gemboss.ai. Since the footer (0.10.0), the header was the last part of gemboss.ai not drawn by
+the kit, and the kit's header was a simpler one: a narrower panel with icons, a button for each section, no pictures,
+nothing behind. Chris asked for it identical, with nothing missed, and for every value to live in the kit so that
+GemPages, Gemians and GemX inherit it (26/10/2026). 0.11.0 takes every value and every motion from gemboss.ai's own
+header and was measured against it in Chromium, pixel by pixel: the bar at 320 to 1920px, every menu open at 1081,
+1366, 1440 and 1920px, rows hovered (their previews), the pill under a hovered name, the keyboard's focus, the phone
+menu's top level, each level and each level's end at 390, 768 and 1080px, light and dark, on pages in each section.
+All of it is identical but one thing, on purpose: on the phone, gemboss.ai's own menu gives "Start free" a light
+bottom hairline and takes "Book a demo"'s away (a rule meant for its menu's rows reaches them); the kit draws the two
+buttons whole.
+
+A minor version: a 0.10.0 header changes to these values, and its mega menu's markup changes (below).
+
+- The bar: the page's wrap + 12px (1132px on GemBoss), 24px inside (6px up to 640px), its own width whatever order the
+  stylesheets load in (`.gw-header > .gw-header__bar`; drop `.gw-wrap` from it). The logo 34px with 8px corners (was
+  26px), a 44px row up to 768px. The menu's words 0.005em tighter, 38px tall (8px x 12px, 1.6 lines); the current page
+  or section in the accent's strong ink, weight 600 (was ink with an underline; a section's name carries
+  `aria-current`). Actions 4px apart: Sign in from 1081px, a second text action `.gw-header__link` (Book a demo) from
+  1181px, the button from 561px, 8px further out. The menu button 42px (44px on touch) with one strong hairline on
+  the surface, the card radius, ink while open; its icons gemboss.ai's. The phone menu runs to 1080px, the desktop
+  starts at 1081px (was 1080px), in the CSS and in `website.js`.
+- The mega menu, gemboss.ai's own (its v5): a section's name is a link to its page (`a.gw-nav__trigger` with a 12px
+  `.gw-nav__chev`) that opens its panel after the pointer rests 200ms (90ms to switch, 350ms to close; the keyboard's
+  focus at once; ArrowDown steps into the first row). One surface morphs to the open panel's size and place, the
+  panels crossfade on it, a caret points at the name, a pill glides under the hovered name, a highlight under the
+  hovered row, the page behind dims and blurs (`.gw-scrim`, `--gw-scrim`). A panel: `.gw-mega__body` (columns of
+  rows, then `.gw-mega__aside`, the pictures) and an optional `.gw-mega__foot` strip; its widths and columns are its
+  markup's (`--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols`). Pictures sit on the Stage (`.gw-mega__art`, new tokens
+  `--gw-stage-*`): the panel's own `.gw-mega__card`, and a row's preview, the `<template>` its `data-gw-preview` names
+  (`"feature"`: the panel's card). A card's pictures load the first time it shows (`data-gw-bg`,
+  `template[data-gw-hydrate]`, `.is-hydrated`). A picture straight on the Stage (an `<img>`) fills it.
+- Moving a 0.10.0 header: the panel's `.gw-wrap.gw-mega__grid` becomes `.gw-mega__body > .gw-mega__grid`, the
+  `.gw-mega__feature` card becomes a `.gw-mega__card` in a `.gw-mega__aside` (its words in `.gw-mega__card-text`, a
+  picture in `.gw-mega__art`), the rows' `.gw-mega__icon` is not drawn on desktop. A `<button>` name still works: a
+  click opens its panel and keeps it open, a second click closes it. `templates/header.html` has the new markup.
+- The script: the mega menu is wired per header (the `mega` mark is on the `.gw-header` now, not on each name);
+  `gw:mega` fires on the name. One panel open on the page, across headers. `destroy` takes the surface, caret, pill,
+  scrim and previews away and hides the panels again.
+- The phone menu (the drill-down): 24px in from the edges, its links set at 18px, weight 500, 0.005em tighter, its
+  heads and headings on 1.6 lines; a row under the pointer or the keyboard takes the soft ground, 2px to the right, its
+  icon tile in the accent; a row may carry a 48x32 picture; a level may end with its panel's card and "All of … →"
+  (the arrow after a space); the action bar's buttons 8px apart, 16px words; `.gw-mobile-menu__link--muted`, a
+  quieter link before Sign in (What's new). The current page is not marked on the phone.
+- Tokens, gemboss.ai's: the dark theme's shadows (`shadow.dark`: a 1px ledge, a deeper raised shadow; the kit kept
+  the light ones in dark before), `--gw-shadow-lift` (an object on the Stage), `--gw-stage-*` (glow, glow-2, top,
+  bottom, dot, ink), `--gw-scrim` light and dark, `--gw-radius-2` (the caret's corner), the dark theme's primary
+  button `#e3e4e8` (gemboss.ai's ink, was `#f2f3f5`). The focus ring 3px out with 4px corners (was 2px out).
+- `check`: a mega panel's `--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols` are inputs set in the markup, not tokens;
+  every kit shadow (dark ones and the lift included) is a token shadow.
+- Budget: `js/website.js` is 34 KB, 9.9 KB gzipped (0.10.0: 23.1 KB, 7.1 KB); the test's budget is now 36 KB and
+  10 KB.
+- Tests: `test/run.mjs` holds the header's base rules byte for byte again from this version (their hash renewed once),
+  the mega menu in its fake DOM (the marks, the drawn parts, hover 200/90/350ms, touch, focus, ArrowDown, the pinned
+  button, one open across headers, destroy); `test/browser.mjs` drives the desktop mega menu at 1366px (its timing,
+  the surface and caret placement, a row's preview, ArrowDown, Escape, destroy). Demos and templates carry the new
+  markup.
+
+## 0.10.0 (2026-10-26)
+
+The footer, 1:1 with gemboss.ai. 0.7.0 drew the footer "as gemboss.ai has it", but not to the pixel: when gemboss.ai
+moved onto the kit (site PR #76) its footer changed in about a dozen places (the gaps, the bottom row, the logo, the
+wordmark, the widths where the columns fold). Chris asked for it identical, with nothing missed, and for the values to
+live in the kit, so every site that uses it inherits them (26/10/2026). 0.10.0 takes every value from the site's own
+footer before #76 and was measured against it in Chromium: part by part (position, size, type, colour of every word)
+and pixel by pixel, at 14 widths from 320 to 1920px, light and dark, folded and open, every part hovered and focused
+from the keyboard, on every page of the site. All of it is pixel-identical but one thing, on purpose: at 320px
+gemboss.ai squeezed the chevron of its longest row to 7.3px, and the kit keeps it 8px.
+
+A minor version: a footer that already uses the kit changes to these values. Nothing to change in its markup.
+
+- Widths: the columns fold up to 620px and stand open from 621px (were 767 and 768), in the CSS and in `website.js`
+  (`matchMedia('(min-width: 621px)')`); the footer is one row from 1081px (was 1080px); two columns between (was three
+  from 768px). The wordmark shows from 621px (was 480px), its gap 16px up to 640px.
+- The footer: 64px above and 32px below (was 40px), no ground of its own (`background: transparent`, was `--gw-bg`), 32px
+  between columns (24px x 20px up to 620px).
+- The brand block: the mark 34px with 8px corners (`--gw-radius-8`), the row 34px tall, as wide as the block (44px on
+  touch); its sentence 30 characters a line at most, 22px lines (was 320px wide). The block keeps its width beside the
+  Ask AI row; the 0.7.0 rules that widened it are gone.
+- Headings: 12px over their links (was 8px), 1.6 line height, balanced, whatever the page's `h2` rule says (a site's
+  `h2` gave them its display face, and balance on some pages, not on others).
+- The face: the brand's name, the headings and the wordmark are set in `--gw-font` whatever the page's body says (a
+  page in Chinese puts PingFang first; gemboss.ai keeps Inter for these three). A brand sets its face with the token.
+- Links in a column: 44px rows up to 768px and on touch (gemboss.ai's), 20px lines.
+- The bottom row: 32px under the columns (was 48px), 12px x 24px between its parts, 16px between its links (8px x 16px on
+  touch); no 24px minimum size on a desktop link; a social link at least 44px wide on touch.
+- Folds up to 620px: each column's hairline on top, the last column's and each family row's below; a 52px row without
+  padding (was 44px padded to 52px); the chevron is two 2px borders, 8px, turned 45deg and 225deg open, at once (it
+  eased 0.18s); a focused row draws 2px of accent 2px out with 6px corners.
+- Family rows: four items a line from 621px, 44px items from 621 to 768px, the list pulled 12px left only from 1081px;
+  each item fills its cell.
+- `.gw-footer__ext` takes the glyph: `<span class="gw-footer__ext" aria-hidden="true">↗</span>`, set muted at weight
+  400, as gemboss.ai writes it. An empty one is still drawn (the 12px mask).
+- The Ask AI label has 22px lines; a hovered Ask AI link takes the browser's own underline (was 1px, 4px under).
+- The theme toggle: on hover its hairline turns ink and its icon the accent, its ground stays (colour only, 0.15s; was
+  the soft ground). Two icons: `.gw-theme-toggle__moon` shows in light, `.gw-theme-toggle__sun` in dark (a new section
+  at the end of `header.css`, for any `.gw-theme-toggle`); a toggle with one plain `<svg>` stays as it was.
+- The wordmark: weight 800 (added to `type.weights`, its one use), 48px above and nothing under but the footer's 32px
+  (was 24px), the mark 7vw wide (40 to 96px; was 0.9em tall). Its `<svg>` may carry `width` and `height` for its shape:
+  gemboss.ai's gem says `width="86" height="100"`.
+- Token: light `--gw-muted` is `#6a6d73` (was `#686b71`), gemboss.ai's: 5.18:1 on white, 4.67:1 on the soft ground
+  (were 5.34 and 4.81), both above 4.5:1.
+- `templates/footer.html` follows: the ↗ glyph, the two toggle icons, a 34px mark, the new widths in its notes.
+- Docs: `components.md` (Footer) and `markup-contract.md` (the folds' widths, the ↗, the toggle's icons, the
+  wordmark's mark).
+- Tests: `test/run.mjs` holds the base rules byte for byte again from this version (their hash, renewed once on purpose)
+  and pins the values above; the fold tests read 620/621px.
+
 ## 0.9.0 (2026-10-25)
 
 The spotlight, a named hover effect for the things you click (Chris, 25/10/2026, chosen over a heading that glows

package/README.md

@@ -40,9 +40,9 @@ nó đọc `AGENTS.md` của kit trước, dựng từ mẫu, và chạy `check`
 **Site HTML tĩnh hoặc không có bước build:** dùng CDN của npm, ghim đúng phiên bản.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.9.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.11.0/website.min.css">
 <link rel="stylesheet" href="/site.css">   <!-- CSS riêng của site, luôn SAU kit -->
-<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.9.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.11.0/js/website.js" defer></script>
 ```
 
 Chèn markup của kit sau khi trang đã tải (block của builder, bản xem trước CMS): gọi `gwWebsite.init(phầnMới)` ngay

package/bin/lib/check.mjs

@@ -335,7 +335,9 @@ export function subjectOf(sel) {
 const ATTR_THEME = String.raw`\[\s*data-theme(?:\s*[~|^$*]?=\s*(?:"[^"]*"|'[^']*'|[\w-]+))?\s*\]`;
 const ROOTISH = new RegExp(`^(?::root|html)?(?:${ATTR_THEME}|:not\\(\\s*${ATTR_THEME}\\s*\\))*$`, "i");
 const isRootish = (sel) => splitTop(sel).every((s) => s && ROOTISH.test(s));
-const INPUTS = new Set(["--gw-stars"]); // set on one element in the markup (style="--gw-stars: 4.9"), read by the kit's CSS
+// set on one element in the markup, read by the kit's CSS: the stars' value (style="--gw-stars: 4.9"); a mega panel's width,
+// its pictures' width and its columns (0.11.0: style="--gw-mega-w: 1120px; --gw-mega-pv: 380px; --gw-mega-cols: 2")
+const INPUTS = new Set(["--gw-stars", "--gw-mega-w", "--gw-mega-pv", "--gw-mega-cols"]);
 const THEMABLE = /^--gw-(?:accent(?:-[\w-]+)?|on-accent(?:-(?:light|dark))?|wash(?:-[\w-]+)?)$/; // docs/theming.md: the eight accent variables (-light/-dark) + wash
 
 const COLOR_PROPS = /^(?:color|background(?:-color|-image)?|border(?:-(?:top|right|bottom|left|block|inline)(?:-(?:start|end))?)?(?:-color)?|outline(?:-color)?|fill|stroke|text-decoration(?:-color)?|caret-color|accent-color|column-rule(?:-color)?|text-emphasis(?:-color)?|-webkit-text-fill-color|-webkit-text-stroke(?:-color)?|scrollbar-color|stop-color|flood-color|lighting-color)$/;
@@ -361,7 +363,9 @@ const BUTTONISH = /btn|button/i;
 const pxNumbers = (v) => [...v.matchAll(/(-?\d*\.?\d+)(px|rem)\b/gi)].map((m) => ({ raw: m[0], px: Math.abs(parseFloat(m[1])) * (m[2].toLowerCase() === "rem" ? 16 : 1), unit: m[2].toLowerCase() }));
 const isFraction = (n) => Math.abs(n - Math.round(n)) > 1e-6;
 const normShadow = (s) => s.toLowerCase().replace(/\b0\./g, ".").replace(/\s*([,()])\s*/g, "$1").replace(/\s+/g, " ").trim();
-const TOKEN_SHADOWS = new Set(Object.entries(SYSTEM.shadow).filter(([k]) => !k.startsWith("$")).map(([, v]) => normShadow(v)));
+// every shadow the kit draws: rest, sm, raised, the Stage's lift and (0.11.0) the dark theme's own
+const TOKEN_SHADOWS = new Set(Object.entries(SYSTEM.shadow).filter(([k]) => !k.startsWith("$"))
+  .flatMap(([, v]) => (typeof v === "string" ? [v] : Object.values(v))).map(normShadow));
 
 function okShadowPart(p) {
   const v = p.trim();

package/css/base.css

@@ -74,7 +74,8 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 :where(p, dd, td, figcaption, .gw-list--check li, .gw-prose) a:not([class]):hover,
 .gw-link:hover { text-decoration-color: currentColor; }
 
-:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }
+/* the focus ring, as gemboss.ai draws it (0.11.0): 2px of accent, 3px out, 4px corners */
+:focus-visible { border-radius: var(--gw-radius-4); outline: 2px solid var(--gw-accent); outline-offset: 3px; }
 [id] { scroll-margin-top: calc(var(--gw-header-height) + 16px); }
 
 .gw-skip {

package/css/effects.css

@@ -50,7 +50,7 @@
      the build checks the words on. */
   .gw-btn.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-action); }
   /* the mega menu's feature card is the Stage, a night ground: a stronger light, or it would not show */
-  .gw-mega__feature.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-stage); }
+  .gw-mega__art.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-stage); }
 
   /* words under the light: lit, muted words are ink-2 at once (rules above); back to muted only once the light has gone
      out (a colour that waits the light's time, no movement). :where(), so a part's own transition wins. */

package/css/footer.css

@@ -1,19 +1,23 @@
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
-  padding-block: 64px 40px;
+  padding-block: 64px 32px;
   border-top: 1px solid var(--gw-line);
-  background: var(--gw-bg);
+  background: transparent;
   color: var(--gw-ink);
   font-size: 14px;
 }
 .gw-footer__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 32px 24px;
-}
-.gw-footer__brand { grid-column: 1 / -1; max-width: 320px; }
-.gw-footer__brand p { margin-top: 16px; color: var(--gw-muted); }
-.gw-footer__heading { margin: 0 0 8px; color: var(--gw-ink); font-size: 13px; font-weight: 600; letter-spacing: 0; }
+  gap: 32px;
+}
+.gw-footer__brand p { max-width: 30ch; margin-top: 16px; color: var(--gw-muted); line-height: 22px; }
+.gw-footer__brand .gw-brand { display: flex; min-height: 34px; font-family: var(--gw-font); line-height: 1.6; }
+.gw-footer__brand .gw-brand__mark { width: 34px; height: 34px; border-radius: var(--gw-radius-8); }
+/* the brand's name, the column headings and the wordmark are set in the kit's face (--gw-font), whatever the page
+   does to its body or its h2 (a page in Chinese puts PingFang first; gemboss.ai keeps Inter for these three); a
+   heading is balanced, like gemboss.ai's main pages */
+.gw-footer__heading { margin: 0 0 12px; color: var(--gw-ink); font-family: var(--gw-font); font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.6; text-wrap: balance; }
 /* an optional newsletter form in the brand block (0.6.0): label, the inline row (field and button), a note on what the
    reader agrees to; only when the form is wired to a list that keeps the address */
 .gw-footer__newsletter { margin-top: 24px; }
@@ -26,33 +30,35 @@
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 8px 24px;
-  margin-top: 48px;
+  gap: 12px 24px;
+  margin-top: 32px;
   padding-top: 24px;
   border-top: 1px solid var(--gw-line);
   color: var(--gw-muted);
   font-size: 13px;
 }
 .gw-footer__bottom:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
-.gw-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 0; padding: 0; list-style: none; }
+.gw-footer__bottom ul { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; list-style: none; }
 .gw-footer__bottom a {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 24px;
-  min-height: 24px;
   color: var(--gw-muted);
 }
 .gw-footer__bottom a:hover { color: var(--gw-ink); }
-@media (min-width: 768px) {
-  .gw-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+@media (max-width: 620px) {
+  .gw-footer__grid { gap: 24px 20px; }
+  .gw-footer__brand { grid-column: 1 / -1; }
 }
-@media (min-width: 1080px) {
-  .gw-footer__grid { grid-auto-flow: column; grid-template-columns: minmax(0, 1.6fr); grid-auto-columns: minmax(0, 1fr); }
-  .gw-footer__brand { grid-column: auto; }
+@media (min-width: 1081px) {
+  .gw-footer__grid { grid-auto-flow: column; grid-template-columns: minmax(0, 1.6fr); grid-auto-columns: minmax(0, 1fr); gap: 32px 24px; }
 }
 @media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__brand .gw-brand { min-height: var(--gw-tap-min); }
+  .gw-footer__col a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
   .gw-footer__bottom a { min-height: var(--gw-tap-min); }
+  .gw-footer__bottom ul:last-child a { min-width: var(--gw-tap-min); }
+  .gw-footer__bottom ul:not(:last-child) { gap: 8px 16px; }
 }
 
 /* ---- 0.7.0: the footer as gemboss.ai has it (issue #71) ---------------------------------------------------------------
@@ -66,16 +72,14 @@
    touch. */
 .gw-footer__ask { margin-top: 24px; }
 /* the row may run wider than the brand's sentence (four names on one line at 390px) */
-.gw-footer__brand:has(> .gw-footer__ask) { max-width: none; }
-.gw-footer__brand:has(> .gw-footer__ask) > :not(.gw-footer__ask) { max-width: 320px; }
-.gw-footer__ask > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; }
+.gw-footer__ask > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; line-height: 22px; }
 .gw-footer__ask > ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 4px 0 0; padding: 0; list-style: none; }
 .gw-footer__ask a { display: block; padding-block: 4px; color: var(--gw-ink); line-height: 20px; }
-.gw-footer__ask a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+.gw-footer__ask a:hover { text-decoration: underline; }
 
 /* the mark after a link that leaves the site (↗, drawn), aria-hidden; the words "(opens in a new tab)" are a separate
    .gw-visually-hidden span, only when the link has target="_blank" */
-.gw-footer__ext {
+.gw-footer__ext:empty {
   display: inline-block;
   width: 12px;
   height: 12px;
@@ -85,6 +89,7 @@
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
 }
+.gw-footer__ext:not(:empty) { color: var(--gw-muted); font-weight: 400; }
 
 /* Folds: <details class="gw-footer__fold"> inside a .gw-footer__col (or a .gw-footer__family), its <summary> holding the
    .gw-footer__heading, then the <ul>. Below 768px each is a 52px row with a chevron, folded unless the markup says
@@ -93,48 +98,52 @@
    (::details-content; website.js also sets `open` there, for browsers without it). */
 .gw-footer__fold > summary { list-style: none; }
 .gw-footer__fold > summary::-webkit-details-marker { display: none; }
-.gw-footer__fold .gw-footer__heading { margin: 0; line-height: 20px; }
+.gw-footer__fold .gw-footer__heading { margin: 0; }
 .gw-footer__fold > ul { margin: 0; padding: 0; list-style: none; }
 .gw-footer__col > .gw-footer__fold a { line-height: 20px; }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__fold > summary { display: contents; }
   .gw-footer__col > .gw-footer__fold .gw-footer__heading { margin-bottom: 12px; }
 }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__fold::details-content { content-visibility: visible; }
 }
-@media (max-width: 767px) {
+@media (max-width: 620px) {
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) > .gw-footer__brand { padding-bottom: 24px; }
-  .gw-footer__col:has(> .gw-footer__fold),
+  /* a column's hairline on top, the last column's below too, a family row's below (gemboss.ai's order: a focused
+     row's ring passes under the next row's line) */
+  .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
+  .gw-footer__col:has(> .gw-footer__fold):last-child,
   .gw-footer__family { border-bottom: 1px solid var(--gw-line); }
-  .gw-footer__brand + .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
   .gw-footer__fold > summary {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    min-height: var(--gw-tap-min);
-    padding-block: 16px;
+    min-height: 52px;
+    padding: 0;
     cursor: pointer;
   }
   .gw-footer__fold > summary::after {
     content: "";
     flex: none;
-    width: 16px;
-    height: 16px;
-    background: var(--gw-muted);
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
-    transition: transform 0.18s var(--gw-ease);
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+    border-right: 2px solid var(--gw-muted);
+    border-bottom: 2px solid var(--gw-muted);
+    rotate: 45deg;
+    translate: 0 -2px;
   }
-  .gw-footer__fold[open] > summary::after { transform: rotate(180deg); }
+  .gw-footer__fold[open] > summary::after { rotate: 225deg; translate: 0 2px; }
+  .gw-footer__fold > summary:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; border-radius: var(--gw-radius-6); }
   .gw-footer__fold > ul { padding-bottom: 12px; }
   .gw-footer__col > .gw-footer__fold a { display: flex; align-items: center; min-height: var(--gw-tap-min); }
 }
 /* desktop: the brand's track is as wide as gemboss.ai draws it beside five columns (1.2 parts of 6.2, after five 24px
    gaps), whatever the number of columns, so a family row can line up with it; the columns share the rest */
-@media (min-width: 1080px) {
+@media (min-width: 1081px) {
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, calc((100% - 120px) * 6 / 31)); }
 }
 
@@ -144,6 +153,8 @@
    the items start where the first column starts. */
 .gw-footer__family .gw-footer__heading { color: var(--gw-muted); font-weight: 500; }
 .gw-footer__family .gw-footer__fold > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.gw-footer__family .gw-footer__fold > ul > li { display: flex; }
+.gw-footer__family .gw-footer__fold > ul > li > a { flex: 1 1 auto; }
 .gw-footer__family a {
   display: flex;
   flex-direction: column;
@@ -157,14 +168,18 @@
 .gw-footer__family a:hover { background: var(--gw-bg-soft); }
 .gw-footer__family b { font-size: 14px; font-weight: 600; line-height: 20px; }
 .gw-footer__family i { color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__family { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gw-line); }
   .gw-footer__family .gw-footer__heading { margin-bottom: 12px; }
-  .gw-footer__family .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-left: -12px; }
+  .gw-footer__family .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; }
   .gw-footer__family a { min-height: 0; padding: 8px 12px; }
   .gw-footer__family + .gw-footer__bottom { margin-top: 32px; }
 }
-@media (min-width: 1080px) {
+@media (min-width: 621px) and (max-width: 768px) {
+  .gw-footer__family a { min-height: var(--gw-tap-min); }
+}
+@media (min-width: 1081px) {
+  .gw-footer__family .gw-footer__fold > ul { margin-left: -12px; }
   .gw-footer__family { display: flow-root; }
   .gw-footer__family .gw-footer__heading { float: left; width: calc((100% - 120px) * 6 / 31); margin: 8px 0 0; }
   .gw-footer__family .gw-footer__fold > ul { margin-left: calc((100% - 120px) * 6 / 31 + 12px); }
@@ -172,7 +187,7 @@
 
 /* The theme toggle in the bottom row (.gw-theme-toggle with data-gw-theme-toggle, wired like the header's): a 32px
    square with one hairline, its hit area 40px, 44px on touch. It pushes itself and the social links to the right.
-   Below 768px the copyright and the toggle share the first line, legal and social links the second. */
+   Up to 620px the copyright and the toggle share the first line, legal and social links the second. */
 .gw-footer__toggle {
   position: relative;
   width: 32px;
@@ -183,12 +198,15 @@
 }
 .gw-footer__toggle::after { content: ""; position: absolute; inset: -5px; }
 .gw-footer__toggle svg { width: 18px; height: 18px; }
+/* on hover the hairline turns ink and the icon the accent, the ground stays (gemboss.ai's); colour only, 0.15s */
+.gw-footer__toggle { transition: border-color 0.15s, color 0.15s; }
+.gw-footer__toggle:hover { border-color: var(--gw-ink); background: var(--gw-surface); color: var(--gw-accent); }
 @media (max-width: 768px), (pointer: coarse) {
   .gw-footer__toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
 }
-@media (max-width: 767px) {
-  .gw-footer__bottom:has(> .gw-footer__toggle) { column-gap: 16px; }
-  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - var(--gw-tap-min) - 16px); }
+@media (max-width: 620px) {
+  .gw-footer__bottom:has(> .gw-footer__toggle) { gap: 8px 16px; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - 64px); }
   .gw-footer__bottom > .gw-footer__toggle { order: 1; margin: 0; }
   .gw-footer__bottom:has(> .gw-footer__toggle) > ul { order: 2; }
   .gw-footer__family + .gw-footer__bottom,
@@ -198,37 +216,35 @@
 /* The wordmark: the brand's mark and name, large and faint, the footer's last line. Decoration (aria-hidden="true"):
    the name is already in the brand block. Its size follows the viewport (--gw-display-wordmark) and it never makes the
    page scroll sideways: a name too long for the line is cut. The mark is drawn in currentColor (an inline SVG); an
-   <img> mark keeps its own colours, so leave it out and keep the name. Not on phones, as on gemboss.ai. 24px more room
-   under it than gemboss.ai gives: the kit's footer is a painted band (white like the page), and the breathing gate
-   wants half the letters' size between them and its edge (67px under 123px letters at 1366px). */
+   <img> mark keeps its own colours, so leave it out and keep the name. Values are gemboss.ai's, 1:1 (Chris 26/10/2026):
+   weight 800, 48px above, nothing below but the footer's own 32px, the mark 7vw wide (40–96px), hidden up to 620px.
+   The footer is not painted (transparent on the page), so the breathing gate reads it as part of the page. */
 .gw-footer__wordmark {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
-  padding-block: 48px 24px;
+  padding-block: 48px 0;
   color: color-mix(in srgb, var(--gw-ink) 10%, transparent);
+  font-family: var(--gw-font);
   font-size: var(--gw-display-wordmark);
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: var(--gw-display-tracking);
   line-height: 1;
   white-space: nowrap;
   user-select: none;
 }
 .gw-footer__wordmark > svg,
-.gw-footer__wordmark > img { flex: none; width: auto; height: 0.9em; }
+.gw-footer__wordmark > img { flex: none; width: clamp(40px, 7vw, 96px); height: auto; }
 .gw-footer__wordmark > span { min-width: 0; overflow-x: clip; }
-@media (max-width: 767px) { .gw-footer__wordmark { gap: 16px; } }
-@media (max-width: 479px) { .gw-footer__wordmark { display: none; } }
+@media (max-width: 640px) { .gw-footer__wordmark { gap: 16px; } }
+@media (max-width: 620px) { .gw-footer__wordmark { display: none; } }
 
 @media (max-width: 768px), (pointer: coarse) {
   .gw-footer__ask a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
 }
-@media (prefers-reduced-motion: reduce) {
-  .gw-footer__fold > summary::after { transition: none; }
-}
 /* a forced-colours screen drops backgrounds: draw the chevron and the ↗ in its text colour */
 @media (forced-colors: active) {
-  .gw-footer__ext,
-  .gw-footer__fold > summary::after { forced-color-adjust: none; background: CanvasText; }
+  .gw-footer__ext:empty { forced-color-adjust: none; background: CanvasText; }
+  .gw-footer__fold > summary::after { border-color: CanvasText; }
 }