@devslab/site-kit 0.12.2 → 0.14.0

package/dist/types.d.ts

@@ -23,11 +23,25 @@ export interface SiteLink {
     href: string;
     label: string;
     external?: boolean;
+    /**
+     * Drawn heavier than its neighbours. For a link the product must make
+     * easy to find — a Korean site's 개인정보처리방침 (privacy policy), which
+     * the law asks to stand out from the other footer links.
+     */
+    emphasis?: boolean;
 }
 export interface SiteBrand {
     name: string;
     href: string;
     logo?: JSX.Element;
+    /**
+     * The header brand link's accessible name, when the visible name is not
+     * enough ("Acme home"). Start it with the visible name so voice users can
+     * say what they see. A product whose wordmark is its logo passes the mark
+     * as `logo` and `name: ""` — the name would otherwise print twice — and
+     * names the link here.
+     */
+    label?: string;
 }
 export interface LocaleState {
     locale: SiteLocale;

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/solid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE;AAC7E,MAAM,WAAW,SAAS;IAAG,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAA;CAAE;AAC7E,MAAM,WAAW,WAAW;IAAG,MAAM,EAAE,UAAU,CAAC;IAAC,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;CAAE;AAClG,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/solid/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,UAAU,CAAC;AACpC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,MAAM,WAAW,YAAY;IAC3B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,EAAE,MAAM,CAAC;IACtB,YAAY,EAAE,MAAM,CAAC;IACrB,aAAa,EAAE,MAAM,CAAC;IACtB,mBAAmB,EAAE,MAAM,CAAC;IAC5B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,gBAAgB,EAAE,MAAM,CAAC;IACzB,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,QAAQ;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AACD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,WAAW;IAAG,MAAM,EAAE,UAAU,CAAC;IAAC,aAAa,EAAE,CAAC,MAAM,EAAE,UAAU,KAAK,MAAM,CAAA;CAAE;AAClG,MAAM,MAAM,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devslab/site-kit",
-  "version": "0.12.2",
+  "version": "0.14.0",
   "description": "Strict i18n, SEO/GEO, and Solid public-site shells for DevsLab products",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",
@@ -60,7 +60,7 @@
     "./site-sections.css": "./site-sections.css"
   },
   "dependencies": {
-    "@devslab/dds-solid": "0.12.2"
+    "@devslab/dds-solid": "0.14.0"
   },
   "peerDependencies": {
     "@tanstack/solid-router": "1.170.30",

package/site-sections.css

@@ -4,6 +4,10 @@
    tokens carry light and dark. */
 
 .site-section { padding-block: var(--dds-space-64); border-block-start: 1px solid var(--dds-color-border-default); }
+/* The site header sticks to the top; an in-page link ("#how") stops the section below it, not under it.
+   A product that changes --site-header-block-size sets it on :root or .site-shell (an ancestor of both
+   the header and <main>) — set on .site-header it resizes the header but never reaches the sections. */
+.site-hero, .site-section { scroll-margin-block-start: calc(var(--site-header-block-size, 64px) + var(--dds-space-8)); }
 .site-section[data-tone="band"] { background: var(--dds-color-bg-subtle); }
 .site-section__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
 
@@ -53,7 +57,9 @@ html:lang(ko) .site-rows__body { word-break: keep-all; overflow-wrap: break-word
    height rule — a swapping scene fixes its own height in the consumer. */
 .site-hero { padding-block: var(--dds-space-64); }
 .site-hero__shell { inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--dds-space-48); align-items: start; }
-.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); letter-spacing: .18em; }
+/* Tracking and weight are hooks: wide mono tracking suits Latin caps, not Hangul — a product whose
+   eyebrow is Korean sets --site-hero-eyebrow-tracking: 0 (and a weight) on its landing root. */
+.site-hero__eyebrow { margin: 0; margin-block-end: var(--dds-space-12); color: var(--dds-color-text-brand); font-family: var(--dds-font-family-mono); font-size: var(--dds-typo-caption-font-size); font-weight: var(--site-hero-eyebrow-weight, normal); letter-spacing: var(--site-hero-eyebrow-tracking, .18em); }
 .site-hero__copy h1 { margin: 0; font-size: var(--dds-typo-display-font-size); line-height: var(--dds-typo-display-line-height); letter-spacing: -.025em; text-wrap: balance; white-space: pre-line; }
 .site-hero__lede { margin: 0; margin-block-start: var(--dds-space-24); max-inline-size: 46ch; color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-1-font-size); line-height: 1.7; }
 .site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--dds-space-16) var(--dds-space-24); margin-block-start: var(--dds-space-32); }

package/src/core/gtm.d.mts

@@ -0,0 +1,12 @@
+/** `GTM-` followed by uppercase letters and digits. Anything else is refused before it reaches a script string. */
+export declare const GTM_CONTAINER_ID_PATTERN: RegExp;
+/**
+ * Body of Google's nonce-aware Tag Manager head loader for `containerId`, without the `<script>` tag or a nonce —
+ * the renderer owns the element and its per-request nonce. Throws RangeError for an id that does not match GTM_CONTAINER_ID_PATTERN.
+ */
+export declare function gtmHeadScript(containerId: string): string;
+/** The `<iframe>` HTML Google puts inside `<noscript>` right after `<body>` opens. Throws RangeError for a malformed id. */
+export declare function gtmNoscriptIframe(containerId: string): string;
+export type GtmCspDirective = "script-src" | "connect-src" | "img-src" | "frame-src";
+/** CSP sources for Tag Manager + GA4 without Ads features (Google's CSP guide). Excludes preview mode, Custom JavaScript variables and Ads hosts. */
+export declare const GTM_CSP_SOURCES: Readonly<Record<GtmCspDirective, readonly string[]>>;

package/src/core/gtm.mjs

@@ -0,0 +1,76 @@
+/**
+ * Google Tag Manager, written once for the family sites (D-031).
+ *
+ * The strings below are Google's, character for character, with only the
+ * container id substituted. The loader is the nonce-aware variant Google
+ * publishes for pages under a Content Security Policy
+ * (https://developers.google.com/tag-platform/security/guides/csp): it is the
+ * standard snippet plus one statement that copies the page's nonce onto the
+ * gtm.js element it creates, so Tag Manager can pass that nonce on to the
+ * scripts it adds. Every family site runs a nonce CSP, so this is the variant
+ * that fits all of them; on a page without nonces the extra statement finds no
+ * `[nonce]` element and does nothing.
+ *
+ * The id is validated before it is placed inside a script string: a value
+ * that is not `GTM-` plus uppercase letters and digits never reaches the
+ * output. The pattern admits no quote, backslash, `<` or whitespace, so the
+ * id cannot close the string literal or the element it sits in.
+ */
+
+export const GTM_CONTAINER_ID_PATTERN = /^GTM-[A-Z0-9]+$/;
+
+const containerId = (value) => {
+  if (typeof value !== "string" || !GTM_CONTAINER_ID_PATTERN.test(value)) {
+    throw new RangeError(`Google Tag Manager container id must match ${GTM_CONTAINER_ID_PATTERN} (for example "GTM-AB12CD3"); got ${JSON.stringify(value)}`);
+  }
+  return value;
+};
+
+/**
+ * The body of the head loader `<script>` — no `<script>` tag and no nonce:
+ * the page's renderer owns the element and puts the per-request nonce on it
+ * (in TanStack Start the router does, from `ssr.nonce`).
+ */
+export function gtmHeadScript(id) {
+  return `(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+'https://www.googletagmanager.com/gtm.js?id='+i+dl;var n=d.querySelector('[nonce]');
+n&&j.setAttribute('nonce',n.nonce||n.getAttribute('nonce'));f.parentNode.insertBefore(j,f);
+})(window,document,'script','dataLayer','${containerId(id)}');`;
+}
+
+/** The contents of the `<noscript>` Google places right after `<body>` opens. */
+export function gtmNoscriptIframe(id) {
+  return `<iframe src="https://www.googletagmanager.com/ns.html?id=${containerId(id)}" height="0" width="0" style="display:none;visibility:hidden"></iframe>`;
+}
+
+const sources = (...list) => Object.freeze(list);
+
+/**
+ * CSP sources a page needs for Tag Manager plus Google Analytics 4 without
+ * Ads features, per Google's "Use Tag Manager with a Content Security
+ * Policy" guide. Add each list to the directive of the same name, next to
+ * the page's own nonce.
+ *
+ * - script-src: Google lists it under `script-src-elem`; a policy without
+ *   that directive falls back to `script-src`, which is where the family
+ *   sites keep their nonce.
+ * - connect-src: `*.google.com` is Google's own entry and also covers
+ *   `www.google.com` (the container's) and `*.analytics.google.com` (GA4's
+ *   regional collection hosts) — a CSP wildcard matches any depth of
+ *   subdomain.
+ * - frame-src: the `<noscript>` iframe.
+ *
+ * Not included, by design: Tag Manager preview mode (tagmanager.google.com,
+ * gstatic, Google Fonts), Custom JavaScript variables (`'unsafe-eval'`), and
+ * the Google Ads / Google signals hosts (doubleclick, googlesyndication,
+ * googleadservices, `*.google.<TLD>`). A product that turns one of those on
+ * adds its sources from the same guide.
+ */
+export const GTM_CSP_SOURCES = Object.freeze({
+  "script-src": sources("https://www.googletagmanager.com"),
+  "connect-src": sources("https://www.googletagmanager.com", "https://*.google-analytics.com", "https://*.google.com"),
+  "img-src": sources("https://www.googletagmanager.com", "https://*.google-analytics.com"),
+  "frame-src": sources("https://www.googletagmanager.com"),
+});

package/src/core/index.d.mts

@@ -3,3 +3,4 @@ export * from "./catalog.mjs";
 export * from "./seo.mjs";
 export * from "./geo.mjs";
 export * from "./publisher.mjs";
+export * from "./gtm.mjs";

package/src/core/index.mjs

@@ -3,3 +3,4 @@ export { CatalogValidationError, createTranslator, validateCatalogs } from "./ca
 export { BRAND_ICON_FILES, ROBOTS_USER_AGENTS, brandIconLinks, buildMetadata, buildRobots, buildSitemap, localizedPath, localizedUrl, renderSitemapXml } from "./seo.mjs";
 export { VerifiedFactRegistry, buildVerifiedJsonLd, renderLlmsTxt } from "./geo.mjs";
 export { definePublisher, buildPublisher, serializeJsonLd, renderPublisherHtml } from "./publisher.mjs";
+export { GTM_CONTAINER_ID_PATTERN, GTM_CSP_SOURCES, gtmHeadScript, gtmNoscriptIframe } from "./gtm.mjs";

package/src/tanstack-start.d.mts

@@ -6,7 +6,13 @@ import type { SiteLocale } from "./core/locales.mjs";
  * registry (D-018) yields `SiteMetadata<string>`; the adapter reads the
  * same fields whatever the code type is, so it must not refuse that.
  */
-/** `icons: true` appends brandIconLinks() (the /brand default); an object passes its options through. Omitted, no icon links are emitted. */
-export interface TanStackHeadOptions { icons?: boolean | { basePath?: string } }
-export declare function toTanStackHead<Code extends string = SiteLocale>(metadata: SiteMetadata<Code>, options?: TanStackHeadOptions): { meta: Array<Record<string, string>>; links: Array<Record<string, string>> };
+/**
+ * `icons: true` appends brandIconLinks() (the /brand default); an object passes its options through. Omitted, no icon links are emitted.
+ * `gtm` adds Google Tag Manager's head loader for that container id as `scripts[0]`; omitted or `undefined` (a route without Tag Manager), the result has no `scripts` key.
+ */
+export interface TanStackHeadOptions { icons?: boolean | { basePath?: string }; gtm?: string | undefined }
+/** A route `head().scripts` entry: the loader body only. The router adds `ssr.nonce` when it renders the tag. Throws RangeError for a malformed id. */
+export interface GtmHeadEntry { children: string }
+export declare function gtmHeadEntry(containerId: string): GtmHeadEntry;
+export declare function toTanStackHead<Code extends string = SiteLocale>(metadata: SiteMetadata<Code>, options?: TanStackHeadOptions): { meta: Array<Record<string, string>>; links: Array<Record<string, string>>; scripts?: GtmHeadEntry[] };
 export declare const toHtmlAttributes: <Code extends string = SiteLocale>(metadata: SiteMetadata<Code>) => { lang: Code; dir: string };

package/src/tanstack-start.mjs

@@ -1,11 +1,29 @@
 import { brandIconLinks } from "./core/seo.mjs";
+import { gtmHeadScript } from "./core/gtm.mjs";
+
+/**
+ * A route `head().scripts` entry that loads Google Tag Manager (D-031).
+ *
+ * Only `children`: no `nonce`, on purpose. The router's HeadContent stamps
+ * `router.options.ssr.nonce` on every head script it renders, after the
+ * entry's own attributes, so the per-request nonce reaches this script the
+ * same way it reaches the meta and link tags. A nonce written here would be
+ * overwritten anyway. The product sets `ssr.nonce` when it creates the
+ * router (asklinq#427); without it the loader renders with no nonce and the
+ * page's CSP blocks it.
+ */
+export function gtmHeadEntry(containerId) {
+  return { children: gtmHeadScript(containerId) };
+}
 
 // `icons` is opt-in: the adapter cannot know where (or whether) a product
 // serves the linq-brand files, and a head that links icons the server 404s
 // is worse than one that links none. `true` takes the /brand default.
+// `gtm` is opt-in the same way, and per route: the product decides which
+// pages carry Tag Manager (public marketing and legal pages, not consoles).
 export function toTanStackHead(metadata, options = {}) {
   const icons = options.icons === true ? brandIconLinks() : options.icons ? brandIconLinks(options.icons) : [];
-  return {
+  const head = {
     meta: [
       { title: metadata.title },
       { name: "description", content: metadata.description },
@@ -27,6 +45,8 @@ export function toTanStackHead(metadata, options = {}) {
       ...icons,
     ],
   };
+  if (options.gtm !== undefined) head.scripts = [gtmHeadEntry(options.gtm)];
+  return head;
 }
 
 export const toHtmlAttributes = (metadata) => ({ lang: metadata.html.lang, dir: metadata.html.dir });

package/styles.css

@@ -8,12 +8,14 @@
 .site-main { flex: 1; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; }
 .site-main--bleed { inline-size: 100%; }
 .site-header { position: sticky; inset-block-start: 0; z-index: 100; border-block-end: 1px solid var(--dds-color-border-default); background: var(--dds-color-bg-default); }
-.site-header__inner { min-block-size: 64px; inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
+.site-header__inner { min-block-size: var(--site-header-block-size, 64px); inline-size: min(100% - var(--dds-space-32), 1120px); margin-inline: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--dds-space-16); }
 .site-brand { justify-self: start; color: var(--dds-color-text-primary); font-weight: 700; text-decoration: none; }
 .site-nav { grid-column: 2; justify-self: center; min-inline-size: 0; }
 .site-nav__list, .site-footer__links { display: flex; flex-wrap: wrap; gap: var(--dds-space-16); padding: 0; margin: 0; list-style: none; }
 .site-nav__list a, .site-footer__links a { color: var(--dds-color-text-secondary); text-decoration: none; }
 .site-nav__list a:hover, .site-footer__links a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+/* SiteLink.emphasis — a link the product must make easy to find (a Korean privacy policy). */
+:is(.site-nav__list, .site-footer__links, .site-footer__brand) a.site-link--emphasis { color: var(--dds-color-text-primary); font-weight: 700; }
 .site-header__controls { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: var(--dds-space-8); }
 .site-menu-button { display: none; }
 .site-locale { inline-size: auto; min-inline-size: 9rem; }
@@ -22,7 +24,8 @@
 /* The kit gave these rows layout and colour but no size, so the footer
    inherited the 16px body and read a step larger than the same row on a
    sibling product's page. Every consumer that noticed fixed it locally. */
-.site-footer__links { font-size: var(--dds-typo-body-2-font-size); }
+/* Baseline, so a bare copyright line sits level with links that are 44px targets on touch. */
+.site-footer__links { font-size: var(--dds-typo-body-2-font-size); align-items: baseline; }
 .site-footer__langs { font-size: var(--dds-typo-caption-font-size); }
 .site-footer__langs-menu { position: relative; display: inline-block; }
 .site-footer__langs-trigger { display: inline-flex; align-items: center; gap: var(--dds-space-4); color: var(--dds-color-text-muted); cursor: pointer; list-style: none; }
@@ -38,9 +41,17 @@
 .site-footer__langs-list a[aria-current="page"] { color: var(--dds-color-text-primary); font-weight: 600; }
 .site-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--dds-space-16) var(--dds-space-32); }
 .site-footer__brand { display: inline-flex; align-items: center; gap: var(--dds-space-8); margin: 0; color: var(--dds-color-text-secondary); }
-.site-footer__brand img, .site-footer__brand svg { block-size: 16px; inline-size: 16px; }
+/* The icon mark beside a printed name. A wordmark passed as the logo (name "") keeps its own size. */
+.site-footer__brand:has(> strong) :is(img, svg) { block-size: 16px; inline-size: 16px; }
 .site-footer__brand a { color: inherit; text-decoration: none; }
 .site-footer__brand a:hover { color: var(--dds-color-text-primary); text-decoration: underline; }
+/* SiteFooter.details — a block under the brand line (business registration, address). */
+.site-footer__identity { display: grid; gap: var(--dds-space-8); min-inline-size: 0; }
+.site-footer__details { display: grid; gap: var(--dds-space-4); color: var(--dds-color-text-secondary); font-size: var(--dds-typo-body-2-font-size); }
+.site-footer__details > * { margin: 0; }
+.site-footer__details address { font-style: normal; }
+/* With details the left column runs several lines; the links sit level with its first line, not its middle. */
+.site-footer__row:has(> .site-footer__identity) { align-items: first baseline; }
 .site-legal { max-inline-size: 760px; margin-inline: auto; padding-block: var(--dds-space-40); }
 .site-status { border: 1px solid var(--dds-color-border-default); border-inline-start-width: var(--dds-space-4); border-radius: var(--dds-radius-md); padding: var(--dds-space-12) var(--dds-space-16); }
 .site-status--danger { border-inline-start-color: var(--dds-color-status-danger); }
@@ -54,14 +65,25 @@
 .oss-product-mark--md { --oss-product-mark-size: 32px; }
 .oss-product-mark--lg { --oss-product-mark-size: 48px; }
 
+/* Touch: every link in the chrome is a 44px target (spec §6), as every button already is
+   (dds-css button.css). Placed before the narrow block so its menu rows can override the display. */
+@media (pointer: coarse) {
+  .site-brand, .site-nav__list a, .site-footer__links a, .site-footer__brand a, .site-footer__langs-trigger { display: inline-flex; align-items: center; min-block-size: 44px; }
+  .site-footer__langs-list a { display: flex; align-items: center; min-block-size: 44px; }
+}
+
 @media (max-width: 720px) {
-  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; padding-block: var(--dds-space-12); }
+  /* The first row is the header's own height whatever the button's size (44px on touch), so the
+     closed header is the same 64px everywhere and a section's scroll offset holds. */
+  .site-header__inner { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--site-header-block-size, 64px); padding-block: 0; }
   .site-menu-button { display: inline-flex; grid-column: 2; grid-row: 1; }
   .site-nav { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; }
   .site-nav[data-open="true"] { display: grid; }
-  .site-nav__list { display: grid; }
+  /* The open menu is a list of full-width 44px rows (about the pitch the 16px gap gave text lines). */
+  .site-nav__list { display: grid; gap: 0; }
+  .site-nav__list a { display: flex; align-items: center; min-block-size: 44px; }
   .site-header__controls { display: none; grid-column: 1 / -1; grid-row: 3; flex-wrap: wrap; }
-  .site-header__controls[data-open="true"] { display: flex; }
+  .site-header__controls[data-open="true"] { display: flex; padding-block-end: var(--dds-space-12); }
 }
 
 @media (prefers-reduced-motion: reduce) { .site-header { scroll-behavior: auto; } }