@gemboss/website-ui 0.8.0 → 0.10.0

package/AGENTS.md

@@ -10,7 +10,7 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | file | what it is |
 |---|---|
 | `website.css` | the whole kit, one file (tokens, base, layout, components, sections) |
-| `js/website.js` | header, mega menu, mobile menu (and its drill-down), language switcher, theme toggle, scroll reveal, segmented control, busy buttons, an article's contents and its tables' scroll box, the footer's folds; no dependencies; `window.gwWebsite.init(root)` |
+| `js/website.js` | header, mega menu, mobile menu (and its drill-down), language switcher, theme toggle, scroll reveal, segmented control, busy buttons, an article's contents and its tables' scroll box, the footer's folds, the spotlight; no dependencies; `window.gwWebsite.init(root)` |
 | `js/website.mjs` | the same script as an ES module for apps: `import { init, destroy } from '@gemboss/website-ui/website.mjs'` |
 | `system.json` | every value of the system: colours, spacing, type, radii, shadows, widths |
 | `templates/page.html` | the page skeleton: start every new page from it |
@@ -23,6 +23,7 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | `demo/forms.html` | fields in every state, choices, the footer newsletter, a short form, stars, the testimonial wall and the rating badge |
 | `demo/footer.html` | the full footer (Ask AI, columns that fold on phones, family rows, theme toggle, wordmark), and the same for a GemPages-style brand |
 | `demo/header.html` | the header of gemboss.ai: the mobile menu that drills down with its bar of actions, and the language switcher, and the same for a GemPages-style brand |
+| `demo/spotlight.html` | the spotlight on plan cards, link cards, the feature card and a night band's button, and the same for a GemPages-style brand |
 | `docs/components.md` | every class, what it is for, its variants |
 | `docs/theming.md` | what a brand other than GemBoss chooses (accent, wash, logo, three named profiles), and what it must not change |
 
@@ -122,6 +123,9 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
   else on white or `--gw-bg-soft`.
 - **Motion**: only `transform` and `opacity`, the kit's ease, nothing moves under `prefers-reduced-motion`. Scroll
   reveal is `.gw-reveal` (the JS adds `.is-in`, and a failsafe shows it anyway).
+- **Spotlight** (0.9.0): `data-gw-spot` only on a link, a button or a card with exactly one action (a plan, a link
+  card, the mega menu's feature card, a night band's primary button). The kit draws the light in the accent; never on a
+  heading or text, never in another colour, never your own script.
 
 ## 4. Don't (each of these has happened, and each one made a page look cheap or broke it)
 
@@ -272,8 +276,9 @@ with numbers and no caption, an unknown brand profile or one set off `<html>`, `
 words on the accent button below 4.5:1, breadcrumbs without their markup, a contents link to an id that is not on
 the page, a callout without its label, stars without their value in words, a rating or a testimonial without a link to
 its source, a footer fold without its heading in the summary or a wordmark a screen reader reads, a drill-down level
-without its Back or its title, a language switcher shown by the markup or a translation without `hreflang`, and
-patterns that repeat across pages (likely gaps). It does not replace looking at the page at 320px and 1366px.
+without its Back or its title, a language switcher shown by the markup or a translation without `hreflang`, a
+spotlight on a heading or on something that is not one action, and patterns that repeat across pages (likely gaps). It
+does not replace looking at the page at 320px and 1366px.
 
 ## 11. Upgrading the kit
 

package/CHANGELOG.md

@@ -4,6 +4,116 @@ 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.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
+under the pointer): a soft light in the brand's accent follows the pointer over a plan card, a link card, the mega menu's
+feature card or the primary button of a night band. Opt-in per element: a page without `data-gw-spot` looks exactly
+as before. The demo index (without its new link), `brand-profiles.html`, `article.html`, `blog.html`, `forms.html`,
+`footer.html`, `header.html` and `theme-example.html` are pixel-identical to 0.8.0 at 390 and 1366px, light and dark.
+
+Closes #74
+
+- `data-gw-spot` on an `<a href>`, a `<button>`, or a card (`<div>`, `<article>`, `<li>`) that holds exactly one of
+  them: a `.gw-plan` with its one `.gw-btn`, a `.gw-card--link`, the `.gw-mega__feature`, the `.gw-btn` of a
+  `.gw-band--night`. `data-gw-spot="<selector>"` lights the first element the selector names inside it instead (the art
+  of a card). Never on a heading or running text: the script refuses a heading, and the kit still forbids gradient or
+  accent-coloured words in a heading, and lights of more than one colour.
+- The light: a radial gradient on the `::before` of the element that carries it, under its words, in its own corners
+  (`border-radius: inherit`, so both radius profiles hold), no layout change. One colour, `--gw-accent` mixed with
+  `color-mix()`: 22% on a card, 38% on a button, 40% on the Stage's night ground; the `-dark` family in dark mode and in
+  night bands, the brand's own accent everywhere (a GemPages-style page lights blue). Its radius, a registered
+  `@property --gw-spot-r` that inherits, grows to 260px (120px on a button) in 0.55s with `cubic-bezier(.16,1,.3,1)`:
+  the one animated property that is neither transform nor opacity (`system.json` `motion` says so).
+- The motion, as Chris asked after the prototype: the light starts where the pointer comes in, then trails it, going
+  18% of the way that is left on each frame (one `requestAnimationFrame` loop per element, stopped within 0.3px), so a
+  jump of the pointer is followed over several frames, never snapped.
+- Pointer devices only: the CSS is all inside `(hover: hover) and (pointer: fine)`, and `website.js` adds no listener
+  without a fine pointer (again on every change). Keyboard focus shows the same light, centred and as large, on the
+  focused host or on a card whose one action has the focus (`:has(:focus-visible)`, in a rule of its own). Reduced
+  motion: no listener, a still light in the middle that appears without a transition.
+- Fallback: without `@property` or `color-mix()` the script wires nothing, so nothing is drawn, not half a light.
+- Tokens (`system.json` `motion.spot`): `--gw-spot-radius`, `--gw-spot-radius-action`, `--gw-spot-strength`,
+  `--gw-spot-strength-action`, `--gw-spot-strength-stage`, `--gw-spot-ms`, `--gw-spot-ease`; the trail and the settle
+  distance are the script's, held equal to `motion.spot.trail` and `.settle` by the tests.
+- CSS: `css/effects.css`, last in `website.css`. Every rule of it selects a wired spot (`data-gw-ready~="spot"`) or the
+  element carrying its light (`.gw-spot`, set by the script), so no page without the attribute can change.
+- `website.js`: the `spot` part in the `init(root)`/`destroy(root)` registry (`data-gw-ready="spot"`), a
+  `pointerenter` and a `pointermove` listener per element, `--gw-spot-x` and `--gw-spot-y` on the element that carries
+  the light, nothing else and no event. `destroy` takes the listeners, the frame, the class and the place back.
+- `check`: `spot-target` (an error): `data-gw-spot` on a heading, with a selector that names a heading, on running text
+  or a section, on an `<a>` without `href`, or on a card with no link or button or with more than one.
+- Words under the light: while a thing is lit (hover, keyboard focus), its muted words read `--gw-ink-2`: the host sets
+  `--gw-muted: var(--gw-ink-2)`, so every part that uses the muted token follows, with no class of its own. Muted would
+  dip to 4.0:1 at the light's middle on a white card (5.3:1 at rest); ink-2 there is 8.2:1 measured in Chromium (7.6:1
+  in dark), and 4.5:1 or more on every ground by the tokens (a card, a soft card, a night band). The words turn ink-2 at
+  once and turn back only once the light has gone (a colour that waits 0.55s, no movement; at once under reduced
+  motion). Ink keeps 10:1 or more and a button's words 4.5:1 in every profile, light and dark.
+- Demo: `demo/spotlight.html`, plan cards, link cards, the feature card (also in the Product menu) and the night band's
+  CTA, with a switch to a GemPages-style brand (`data-gw-action="accent"`, `data-gw-radius="soft"`, `#3c67ff`), linked
+  from `demo/index.html`. No other demo page opts in.
+- Budget: `js/website.js` is 23.1 KB unminified, 7.1 KB gzipped (0.8.0: 20.8 KB, 6.4 KB); the test's budget is now
+  24 KB and 8 KB. `website.min.css` is 73.8 KB, 12.7 KB gzipped (0.8.0: 71.8 KB, 12.3 KB).
+- Tests: `test/run.mjs` holds the CSS (every rule opt-in, fine pointer only, the accent only, the reduced-motion and
+  focus rules, the tokens), the contrast under the light, the script in its fake DOM (entry point, trailing frame by
+  frame, settling, touch, inner element, init twice, destroy, media changes, no `@property`, no `color-mix()`) and the
+  check rule; `test/browser.mjs` drives `demo/spotlight.html` in Chromium (the radius read on the `::before` while
+  hovering, the light following a jump over several frames, no layout shift, the Stage and the night band, Tab to a
+  card and to a plan's button, reduced motion, a touch screen with no listener counted by DevTools and the same
+  pixels after a tap, no `@property` or `color-mix()`, init twice and destroy counted by DevTools, a heading refused
+  by the script and flagged by `check`, the GemPages-style accent and corners, light and dark, and a muted line at the
+  light's middle measured on the drawn pixel: 4.5:1 or more, light and dark, ink-2 while the light fades, muted after).
+
 ## 0.8.0 (2026-10-25)
 
 The header of gemboss.ai on a phone, so the site's header can move onto the kit: a mobile menu that drills down into

package/README.md

@@ -12,11 +12,11 @@ it. Made so that a team working with Claude Code, even without a designer, ships
 
 | | |
 |---|---|
-| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 101 KB, 72 KB bản min, 12,2 KB khi nén gzip): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn, đang chờ và nút xoá), link, nhãn, chip, segmented control, badge, card (kèm ảnh trên đầu thẻ), khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), bộ khung bài blog (breadcrumb, dòng tác giả và ngày, mục lục dính, hộp lưu ý, danh sách bài, phân trang), ô nhập và trạng thái lỗi (ô chữ, danh sách chọn, ô nhiều dòng, checkbox, radio, hàng một ô một nút cho newsletter), sao đánh giá, tường review, huy hiệu điểm App Store, header + mega menu + menu điện thoại (tuỳ chọn đi sâu từng mục kèm thanh nút dính đáy, như gemboss.ai) + nút đổi ngôn ngữ, footer như gemboss.ai (cột gập lại trên điện thoại, hàng Ask AI, hàng sản phẩm cùng nhà, nút sáng/tối, wordmark; ô newsletter tuỳ chọn), 16 section, 3 hồ sơ thương hiệu |
-| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại (kể cả bản đi sâu từng mục: Back, giữ focus trong menu, sự kiện `gw:menu`), nút đổi ngôn ngữ (đọc `<link rel="alternate" hreflang>` của trang, ẩn khi trang chỉ có một ngôn ngữ), đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ, đánh dấu mục đang đọc trong mục lục bài viết, khung cuộn cho bảng trong bài, cột footer gập/mở theo khổ màn; không phụ thuộc thư viện nào, khoảng 6,4 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
+| `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 107 KB, 74 KB bản min, 12,7 KB khi nén gzip): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn, đang chờ và nút xoá), link, nhãn, chip, segmented control, badge, card (kèm ảnh trên đầu thẻ), khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), bộ khung bài blog (breadcrumb, dòng tác giả và ngày, mục lục dính, hộp lưu ý, danh sách bài, phân trang), ô nhập và trạng thái lỗi (ô chữ, danh sách chọn, ô nhiều dòng, checkbox, radio, hàng một ô một nút cho newsletter), sao đánh giá, tường review, huy hiệu điểm App Store, header + mega menu + menu điện thoại (tuỳ chọn đi sâu từng mục kèm thanh nút dính đáy, như gemboss.ai) + nút đổi ngôn ngữ, footer như gemboss.ai (cột gập lại trên điện thoại, hàng Ask AI, hàng sản phẩm cùng nhà, nút sáng/tối, wordmark; ô newsletter tuỳ chọn), đốm sáng theo con trỏ trên thứ bấm được (`data-gw-spot`, bật từng chỗ), 16 section, 3 hồ sơ thương hiệu |
+| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại (kể cả bản đi sâu từng mục: Back, giữ focus trong menu, sự kiện `gw:menu`), nút đổi ngôn ngữ (đọc `<link rel="alternate" hreflang>` của trang, ẩn khi trang chỉ có một ngôn ngữ), đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ, đánh dấu mục đang đọc trong mục lục bài viết, khung cuộn cho bảng trong bài, cột footer gập/mở theo khổ màn, đốm sáng theo con trỏ; không phụ thuộc thư viện nào, khoảng 7,1 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
 | `AGENTS.md` | luật mà Claude Code (và người) phải theo: 10 luật, cách dựng trang, điều cấm, chữ, khả năng truy cập, đổi thương hiệu, khi kit thiếu |
 | `templates/` | khung một trang, header (`header.html`: hai tuỳ chọn, menu điện thoại đi sâu và nút ngôn ngữ), footer (`footer.html`: footer của gemboss.ai, mọi phần tuỳ chọn đều ghi rõ) và 16 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta, prose, article, post-list, form, testimonials) |
-| `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ; `article.html` là một bài blog trọn vẹn, `blog.html` là trang danh sách bài; `forms.html` là mọi trạng thái của ô nhập, newsletter ở footer, tường review và huy hiệu điểm (dữ liệu mẫu); `footer.html` là footer đầy đủ như gemboss.ai, kèm nút chuyển sang bản kiểu GemPages; `header.html` là header của gemboss.ai trên điện thoại (menu đi sâu từng mục, thanh nút dính đáy, nút đổi ngôn ngữ với ba ngôn ngữ), cũng có bản kiểu GemPages |
+| `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ; `article.html` là một bài blog trọn vẹn, `blog.html` là trang danh sách bài; `forms.html` là mọi trạng thái của ô nhập, newsletter ở footer, tường review và huy hiệu điểm (dữ liệu mẫu); `footer.html` là footer đầy đủ như gemboss.ai, kèm nút chuyển sang bản kiểu GemPages; `header.html` là header của gemboss.ai trên điện thoại (menu đi sâu từng mục, thanh nút dính đáy, nút đổi ngôn ngữ với ba ngôn ngữ), cũng có bản kiểu GemPages; `spotlight.html` là đốm sáng trên thẻ gói giá, thẻ link, thẻ nổi bật của mega menu và nút trong dải tối, cũng có bản kiểu GemPages |
 | `docs/` | danh mục class (`components.md`), đổi thương hiệu (`theming.md`), triết lý (`philosophy.md`), hợp đồng markup |
 | `system.json` | mọi giá trị của hệ thống (màu, khoảng cách, chữ, bo góc, bóng, khung): nguồn duy nhất |
 | CLI `gemboss-website` | `init`, `check`, `gap`, `upgrade` |
@@ -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.8.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.10.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.8.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.10.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

@@ -159,6 +159,11 @@ export const RULES = {
     why: "website.js fills .gw-lang from the page's <link rel=\"alternate\" hreflang href> and shows it only when there is another language: it starts hidden, its button (.gw-lang__btn) names its list with aria-controls and says aria-expanded, and the list is empty in the markup. A switcher shown by the markup is an empty button on a page with one language; links typed into the list are replaced; a translation's <link rel=\"alternate\"> without hreflang is one the switcher (and search engines) cannot list.",
     fix: "Copy the switcher from templates/header.html: <div class=\"gw-lang\" data-gw-lang hidden><button class=\"gw-lang__btn\" type=\"button\" aria-expanded=\"false\" aria-controls=\"gw-lang-menu\">…</button><ul class=\"gw-lang__menu\" id=\"gw-lang-menu\" hidden></ul></div>, and give each translation <link rel=\"alternate\" hreflang=\"vi\" href=\"…\"> in <head>.",
   },
+  "spot-target": {
+    level: "error", title: "Spotlight on something that is not one action",
+    why: "data-gw-spot lights what you can click: the light says \"this goes somewhere\". On a heading or running text it promises a link that is not there (and a heading stays ink: no gradient, no accent words, no light); on a box with no action, or several, the light cannot say which one it means.",
+    fix: "Put data-gw-spot on the <a href> or the <button> itself, or on a card (a <div>, <article> or <li>) that holds exactly one of them, such as a .gw-plan with its one .gw-btn. Never on a heading, a paragraph or a section, and never with a selector that names a heading (docs/components.md, Spotlight).",
+  },
   "uppercase-text": {
     level: "warning", title: "Uppercase text",
     why: "Headings, buttons, labels and menu items are sentence case.",
@@ -509,6 +514,9 @@ function elementEnd(text, start, tag) {
   }
   return -1;
 }
+// The spotlight (0.9.0): a card lit as a whole is one of these, holding exactly one link or button.
+const SPOT_BOX = new Set(["div", "article", "li"]);
+const HEADING_SEL = /(?:^|[\s>+~,(])h[1-6](?![\w-])/i;
 const LOADING_CLASS = /^(?:is-)?(?:loading|busy)$|--(?:loading|busy)$/;
 const SPINNER_CLASS = /\bclass\s*=\s*["'][^"']*(?:spinner|loader|loading)/i;
 
@@ -692,6 +700,17 @@ function analyzeHtml(file, text, out) {
       if (missing.length) add("lang-markup", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)}  missing: ${missing.join(", ")}`));
     }
     if (tag === "link" && /(?:^|\s)alternate(?:\s|$)/i.test(a.rel || "") && !a.type) alts.push({ a, where: where() });
+    if ("data-gw-spot" in a) {
+      const sel = (a["data-gw-spot"] || "").trim();
+      const acts = (inner().match(/<a\b[^>]*\bhref\s*=|<button\b/gi) || []).length;
+      const why = /^h[1-6]$/.test(tag) ? `on a heading (<${tag}>)`
+        : HEADING_SEL.test(sel) ? `its selector names a heading (data-gw-spot="${sel}")`
+        : (tag === "a" && "href" in a) || tag === "button" ? ""
+        : tag === "a" ? "on an <a> without href"
+        : !SPOT_BOX.has(tag) ? `on a <${tag}>, which is not a link, a button or a card`
+        : acts !== 1 ? `on a <${tag}> that holds ${acts} links or buttons, not exactly one` : "";
+      if (why) add("spot-target", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)}  ${why}`));
+    }
     if (cls.includes("gw-rating-badge") || cls.includes("gw-testimonial")) {
       const linked = (tag === "a" && "href" in a) || /<a\b[^>]*\bhref\s*=/i.test(inner());
       if (!linked) add("rating-source", where(`${m[0].replace(/\s+/g, " ").slice(0, 80)} ${decode(visible.slice(m.index, elementEnd(scanText, m.index, tag))).replace(/\s+/g, " ").trim().slice(0, 60)}`));

package/css/effects.css

@@ -0,0 +1,71 @@
+/* effects: the spotlight (0.9.0, Chris 25/10/2026, issue #74), a named hover effect for the things you click.
+   data-gw-spot on an <a href>, a <button>, or a card that holds exactly one of them (a plan card, the mega menu's
+   feature card, the primary button of a night band, a .gw-card--link): a soft light in the brand's accent follows the
+   pointer over it. Opt-in per element: a page without the attribute does not change.
+   website.js wires the host (data-gw-ready="spot") and puts .gw-spot on the element that carries the light: the host,
+   or the one its data-gw-spot="<selector>" names inside it. It writes the pointer's place there (--gw-spot-x,
+   --gw-spot-y, trailing it a little every frame); this file draws the light on its ::before, under its words, in its
+   own corners (border-radius: inherit, so the radius profile holds), and grows the light's radius on hover.
+   - Pointer devices only: nothing here applies without (hover: hover) and (pointer: fine).
+   - Keyboard focus (on the host, or on the one action of a card) shows the same light, centred.
+   - Reduced motion: the light stands still, centred, and appears without a transition.
+   - Words under the light: while a thing is lit, its muted words read --gw-ink-2 (the token, set as --gw-muted on the
+     host), so they keep 4.5:1 at the light's middle; they turn back once the light has gone. A colour, no movement.
+   - Without @property or color-mix(), website.js puts .gw-spot nowhere: no light at all, nothing half drawn.
+   - One colour, the accent family, as the page has it (the -dark family in dark mode and in night bands). Never on a
+     heading or running text: a heading stays ink, with no gradient and no accent words (check: spot-target).
+   The radius is the one animated property that is neither transform nor opacity: it repaints one layer of one
+   element. Registered, so it can transition; inherited, so the ::before (and an inner element) reads the host's. */
+@property --gw-spot-r {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  /* the host: no light at rest (a lit card does not light a lit button inside it), the light's size on hover and focus */
+  [data-gw-ready~="spot"] { --gw-spot-r: 0px; }
+  [data-gw-ready~="spot"]:is(:hover, :focus-visible) { --gw-spot-r: var(--gw-spot-radius); --gw-muted: var(--gw-ink-2); }
+  /* a card whose one action has the keyboard focus; a rule of its own, so a browser without :has() drops only it */
+  [data-gw-ready~="spot"]:has(:focus-visible) { --gw-spot-r: var(--gw-spot-radius); --gw-muted: var(--gw-ink-2); }
+  .gw-btn[data-gw-ready~="spot"]:is(:hover, :focus-visible) { --gw-spot-r: var(--gw-spot-radius-action); }
+
+  /* the element that carries the light: positioned for its layer, isolated so the layer sits under its words.
+     :where(), so a site's own position for an inner element wins. */
+  :where(.gw-spot) { position: relative; isolation: isolate; }
+  /* the light. Not on a busy button: its ::before is the ring. */
+  .gw-spot:not([aria-busy="true"])::before {
+    --gw-spot-mix: var(--gw-spot-strength);
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    background: radial-gradient(circle var(--gw-spot-r) at var(--gw-spot-x, 50%) var(--gw-spot-y, 50%), color-mix(in srgb, var(--gw-accent) var(--gw-spot-mix), transparent), transparent 70%);
+    pointer-events: none;
+    transition: --gw-spot-r var(--gw-spot-ms) var(--gw-spot-ease);
+  }
+  /* a button is small and filled: a stronger light. Its words keep their contrast: the light is the accent over the
+     button's fill, so under the accent action profile it lies between the accent and the accent-strong, the two fills
+     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); }
+
+  /* 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. */
+  :where([data-gw-ready~="spot"] *) { transition: color 0s linear var(--gw-spot-ms); }
+  :where([data-gw-ready~="spot"]:is(:hover, :focus-visible) *) { transition-delay: 0s; }
+  :where([data-gw-ready~="spot"]:has(:focus-visible) *) { transition-delay: 0s; }
+
+  /* keyboard focus: the light in the middle, so focus is never weaker than hover */
+  :is([data-gw-ready~="spot"]:focus-visible, [data-gw-ready~="spot"]:focus-visible *).gw-spot::before { --gw-spot-x: 50%; --gw-spot-y: 50%; }
+  :is([data-gw-ready~="spot"]:has(:focus-visible), [data-gw-ready~="spot"]:has(:focus-visible) *).gw-spot::before { --gw-spot-x: 50%; --gw-spot-y: 50%; }
+}
+
+/* reduced motion: a still light in the middle, there at once and gone at once, the words with it (website.js follows
+   no pointer then) */
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
+  .gw-spot:not([aria-busy="true"])::before { --gw-spot-x: 50%; --gw-spot-y: 50%; transition: none; }
+  :where([data-gw-ready~="spot"] *) { transition: none; }
+}

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; }
 }

package/css/header.css

@@ -437,3 +437,15 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 @media (min-width: 1080px) {
   .gw-header__actions > .gw-lang { display: block; }
 }
+
+/* ---- 0.10.0: the theme toggle's two icons ---------------------------------------------------------------------------
+   A toggle may hold two icons: .gw-theme-toggle__moon, shown in light, and .gw-theme-toggle__sun, shown in dark, as
+   gemboss.ai draws them. The theme in force picks one: data-theme on <html>, else the system's. A toggle with one plain
+   <svg> stays as it is. */
+.gw-theme-toggle__sun { display: none; }
+:root[data-theme="dark"] .gw-theme-toggle__sun { display: block; }
+:root[data-theme="dark"] .gw-theme-toggle__moon { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-theme-toggle__sun { display: block; }
+  :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
+}