@gemboss/website-ui 0.9.0 → 0.10.0

package/templates/footer.html

@@ -2,8 +2,8 @@
   Footer: one per site, the same on every page, built from this template (AGENTS.md: brands fill its rows, they never
   invent a footer part). It is the footer of gemboss.ai (0.7.0). In order:
     1. the brand block: logo, one sentence; OPTIONAL the Ask AI row; OPTIONAL the newsletter form (0.6.0)
-    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (below 768px), open
-       columns from 768px. Headings one or two words in sentence case, four to seven links each.
+    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (up to 620px), open
+       columns from 621px. Headings one or two words in sentence case, four to seven links each.
     3. OPTIONAL product-family rows: a label and two to eight products, name and one line each; repeat the <nav> for a
        second family
     4. the bottom row: copyright, legal links, OPTIONAL theme toggle, social links. Nothing else.
@@ -11,14 +11,15 @@
   Replace every [bracketed] placeholder and delete the optional parts you do not use. website.js wires the folds and
   the toggle; without it the footer still works (the browser folds the <details> by itself).
 
-  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true"></span> (a drawn ↗). A link with
+  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true">↗</span> (the glyph, set muted, as
+  gemboss.ai writes it; an empty span draws it instead). A link with
   target="_blank" also carries <span class="gw-visually-hidden"> (opens in a new tab)</span>; a link without it does not.
 -->
 <footer class="gw-footer">
   <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>
         <!-- OPTIONAL Ask AI: each link opens an assistant with the same neutral question already typed, URL-encoded after
              ?q= (spaces as %20). Ask what the brand is and what it does for the reader, never a leading question. Words,
@@ -89,7 +90,7 @@
             <li><a href="[/blog]">[Blog]</a></li>
             <li><a href="[/docs]">[Docs]</a></li>
             <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog]<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
+            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog] <span class="gw-footer__ext" aria-hidden="true">↗</span></a></li>
           </ul>
         </details>
       </nav>
@@ -114,8 +115,8 @@
         <ul>
           <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
           <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
-          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i></a></li>
-          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product] <span class="gw-footer__ext" aria-hidden="true">↗</span></b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product] <span class="gw-footer__ext" aria-hidden="true">↗</span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
         </ul>
       </details>
     </nav>
@@ -126,7 +127,7 @@
         <li><a href="[/terms]">Terms</a></li>
       </ul>
       <!-- OPTIONAL theme toggle: the header's toggle, here instead of (or as well as) in the header -->
-      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
+      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg class="gw-theme-toggle__moon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="M21 12.8A8 8 0 1111.2 3a6 6 0 009.8 9.8z"/></svg><svg class="gw-theme-toggle__sun" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="4"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M5 5l1.5 1.5M17.5 17.5L19 19M19 5l-1.5 1.5M6.5 17.5L5 19"/></svg></button>
       <ul aria-label="Social">
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
@@ -134,7 +135,8 @@
     </div>
     <!-- OPTIONAL wordmark: decoration (aria-hidden="true", the name is already in the brand block). The mark is an
          inline SVG drawn in currentColor, so it takes the faint colour; an <img> cannot, so leave the mark out and keep
-         the name. Not shown on phones. -->
+         the name. Not shown up to 620px. The mark is 7vw wide; give the <svg> width and height attributes for its
+         shape (gemboss.ai's gem: width="86" height="100"). -->
     <div class="gw-footer__wordmark" aria-hidden="true">
       <svg viewBox="[0 0 width height]">[the brand's mark, every fill and stroke "currentColor"]</svg>
       <span>[Brand]</span>

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.9.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.10.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;
@@ -95,7 +95,7 @@
   --gw-surface: #ffffff;
   --gw-ink: #1b1c1e;
   --gw-ink-2: #3b3d42;
-  --gw-muted: #686b71;
+  --gw-muted: #6a6d73;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
   --gw-line-control: #85888e;
@@ -187,7 +187,7 @@
   --gw-surface: #ffffff;
   --gw-ink: #1b1c1e;
   --gw-ink-2: #3b3d42;
-  --gw-muted: #686b71;
+  --gw-muted: #6a6d73;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
   --gw-line-control: #85888e;
@@ -1222,22 +1222,38 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   .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; }
+}
+
 /* 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; }
@@ -1250,33 +1266,35 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   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) ---------------------------------------------------------------
@@ -1290,16 +1308,14 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    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;
@@ -1309,6 +1325,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   -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
@@ -1317,48 +1334,52 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    (::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)); }
 }
 
@@ -1368,6 +1389,8 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    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;
@@ -1381,14 +1404,18 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 .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); }
@@ -1396,7 +1423,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 
 /* 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;
@@ -1407,12 +1434,15 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 }
 .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,
@@ -1422,39 +1452,37 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 /* 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; }
 }
 
 /* sections: hero, logos, stats, features, split, showcase, steps, quote, pricing, CTA. */