@milesroxas/create-design-hub 0.0.0-stage → 0.1.1

package/template/docs/.obsidian/core-plugins.json

@@ -0,0 +1,32 @@
+{
+  "file-explorer": true,
+  "global-search": true,
+  "switcher": true,
+  "graph": true,
+  "backlink": true,
+  "canvas": true,
+  "outgoing-link": true,
+  "tag-pane": true,
+  "footnotes": false,
+  "properties": true,
+  "page-preview": true,
+  "daily-notes": true,
+  "templates": true,
+  "note-composer": true,
+  "command-palette": true,
+  "slash-command": false,
+  "editor-status": true,
+  "bookmarks": true,
+  "zk-prefixer": false,
+  "random-note": false,
+  "outline": true,
+  "word-count": true,
+  "slides": false,
+  "audio-recorder": false,
+  "workspaces": false,
+  "file-recovery": true,
+  "publish": false,
+  "sync": true,
+  "bases": true,
+  "webviewer": false
+}

package/template/docs/README.md

@@ -0,0 +1,19 @@
+# Docs
+
+Written documentation for the project's design work. This folder is also an Obsidian vault: open `docs/` in Obsidian to edit here, or edit the Markdown in any editor. Git is the sync.
+
+## Layout
+
+| Folder | What goes there |
+| --- | --- |
+| `sprints/<feature>/` | One feature's working documents: `design-doc.md`, `guide.md` (the walkthrough reviewers follow), `port.md` (the port report `miles-port` writes), the exploration it set aside under `archive/`, and `assets/` for the figures only these documents embed. The folder name is the feature's slug, the same one its prototypes use. |
+| `research/` | Product walkthroughs, meeting notes, findings. |
+| `assets/` | Product screenshots and other figures more than one document embeds. |
+
+## Conventions
+
+- Standard Markdown links and images (`[text](path.md)`, `![alt](assets/x.jpg)`), not wikilinks, so GitHub and other editors render them. The vault settings in `.obsidian/app.json` enforce this for new links.
+- Callouts use the GitHub alert syntax: `> [!NOTE]`, `> [!TIP]`, `> [!IMPORTANT]`, `> [!WARNING]`, `> [!CAUTION]`. Obsidian renders the same markers.
+- Diagrams go in fenced `mermaid` blocks. Charts go in `assets/` as SVG and are embedded as images.
+- `.obsidian/workspace*.json` is ignored; the rest of `.obsidian/` is committed.
+- Every `sprints/<feature>/guide.md` is also a page on the prototypes site, at `/guide/<feature>/`: the build compiles the Markdown and its images, so an edit here is the edit there, and a new guide needs no wiring `pnpm guide <feature>` starts one.

package/template/docs/sprints/sample/guide.md

@@ -0,0 +1,69 @@
+---
+type: guide
+feature: sample
+date: 2026-10-30
+audience: Anyone learning the template
+---
+
+# Sample list: a walkthrough
+
+The one prototype that ships with the template: a list page inside the product shell, with every fixture set on a dial. Nothing here is a real product. It exists so a reviewer can see what a prototype from this hub looks like, and so Claude has a working example of the conventions to read.
+
+## Before you start
+
+1. **Open the prototype** at `/sample-list/`.
+2. **Find Controls.** The dark round button at the top of the page opens a panel that belongs to the prototype, not the product. Review holds the fixture set and the row density; Motion holds the two numbers the entrance uses; View holds theme, reduced motion and speed. The panel's last row, **Open the walkthrough**, brings this page back in a new tab.
+3. **Nothing persists.** Reload and the list is back on the real set.
+
+## 1. Read the list
+
+**Do:** open the prototype. Eight items arrive one after another.
+
+- The row is the link. Its name and owner sit beside a cover; status and date are pinned right so they line up down the list.
+- The foot counts the items (the Ledger Foot Rule).
+
+**Try:** click a row. A dark toast says the item would open here. That is the prototype speaking, not the product: anything a control would do that the prototype does not build says so in that voice (the Scope Toast Rule).
+
+## 2. Break it
+
+Controls → Review → Fixtures → **longest**
+
+The first item carries, in every text field, the longest real value doubled. The name wraps; the status and the date stay where they were.
+
+Controls → Review → Fixtures → **empty**
+
+The empty state replaces the list. The one action stays in the page head.
+
+Controls → Review → Fixtures → **max**
+
+Forty rows, the design's maximum. Scroll: the entrance stagger is capped at the eighth row, so the fortieth does not wait a second to appear.
+
+Controls → Review → Fixtures → **missing**
+
+An item with no cover, one with no owner, one with no name. Each says what is missing where the value would be.
+
+## 3. Tune the entrance
+
+Controls → Motion → **Rise** and **Stagger**
+
+The numbers the entrance uses, live. Watch at 0.25× (Controls → View → Speed) to see the curve. When a pair feels right, copy it into the README's Decision.
+
+## Every state, and how to reach it
+
+| State | How to reach it |
+| --- | --- |
+| Real list | Controls → Review → Fixtures → **real** |
+| Longest names | Controls → Review → Fixtures → **longest** |
+| Empty | Controls → Review → Fixtures → **empty** |
+| Maximum count | Controls → Review → Fixtures → **max** |
+| Missing media | Controls → Review → Fixtures → **missing** |
+| Compact rows | Controls → Review → Density → **compact** |
+| Dark | Controls → View → Theme → **dark** |
+
+## What the prototype does not do
+
+Opening an item and adding one are scope toasts. The sidebar's other pages are the shell's stubs.
+
+## What we need from you
+
+Nothing. Delete `prototypes/sample-list/` and `docs/sprints/sample/` once the project has a feature of its own.

package/template/kit/AppShell.tsx

@@ -0,0 +1,149 @@
+import { type ReactNode, useEffect } from 'react';
+import './app-shell.css';
+import { parkDials } from '@kit/dials';
+import { useHashRoute } from '@kit/hooks';
+import { Icon } from '@kit/Icon';
+import { BRAND, type NavItem, PRODUCT, type User, type Workspace } from '@kit/shell';
+import { Button } from '@kit/ui/Button';
+import { installPressFeedback } from '@kit/ui/layer';
+import { useMenu } from '@kit/ui/Menu';
+import { OverlayHost } from '@kit/ui/Overlay';
+import { Toaster, toast } from '@kit/ui/Toast';
+import { ViewTools } from '@kit/ViewTools';
+
+parkDials();
+
+type Props = {
+  active?: string;
+  role?: string;
+  nav?: NavItem[];
+  navFoot?: NavItem[];
+  workspace?: Workspace;
+  user?: User;
+  children: ReactNode;
+};
+
+// The disposable product shell: a sidebar around a page, plus the dialog,
+// sheet and toast hosts and the View dials. The brand, the navigation and
+// the people come from kit/shell.ts; a prototype overrides them by prop
+// only when its question is about them. Nav items are hash routes.
+// Product chrome only: prototype controls belong in DialKit, never in the sidebar.
+export function AppShell({
+  active,
+  role = 'Owner',
+  nav = PRODUCT.nav,
+  navFoot = PRODUCT.navFoot,
+  workspace = PRODUCT.workspace,
+  user = PRODUCT.user,
+  children,
+}: Props) {
+  const route = useHashRoute();
+  const path = active ?? route.path;
+
+  const workspaceMenu = useMenu({
+    items: [
+      { label: workspace.name, desc: role, value: 'current' },
+      { label: 'Another workspace', desc: 'Viewer', value: 'other' },
+    ],
+    align: 'start',
+    width: 288,
+    checkable: true,
+    selected: 'current',
+    onSelect: (v) => {
+      if (v === 'other') toast(`Only ${workspace.name} is in this prototype.`, { kind: 'scope' });
+    },
+  });
+
+  useEffect(installPressFeedback, []);
+
+  const link = (n: NavItem) => {
+    const on = path.startsWith(n.href);
+    return (
+      <a
+        key={n.href}
+        className={on ? 'nav-item is-active' : 'nav-item'}
+        href={n.href}
+        aria-current={on ? 'page' : undefined}
+      >
+        <Icon name={n.glyph} size={20} />
+        <span className="nav-label">{n.label}</span>
+      </a>
+    );
+  };
+
+  return (
+    <>
+      <div className="shell">
+        <aside className="sidebar" aria-label="Sidebar">
+          <a className="sidebar-logo" href={nav[0]?.href ?? '#/'} aria-label={BRAND.name}>
+            <Icon name={BRAND.glyph} size={24} />
+            <span className="sidebar-brand">{BRAND.name}</span>
+          </a>
+          <button type="button" className="team" {...workspaceMenu.triggerProps}>
+            <span className="team-avatar" style={{ background: workspace.color }} aria-hidden="true">
+              {workspace.initials}
+            </span>
+            <span className="team-text">
+              <span className="team-name">{workspace.name}</span>
+              <span className="team-role">{role}</span>
+            </span>
+            <Icon name="chevron-selector-vertical" size={20} />
+          </button>
+          {workspaceMenu.menu}
+          <nav className="nav" aria-label="Primary">
+            {nav.map(link)}
+          </nav>
+          <div className="sidebar-foot">
+            <nav className="nav" aria-label="Account">
+              {navFoot.map(link)}
+            </nav>
+            <div className="user">
+              <span className="user-avatar">{user.initials}</span>
+              <span className="user-text">
+                <span className="user-name">{user.name}</span>
+                <span className="user-email">{user.email}</span>
+              </span>
+              <Button kind="tertiary" size={null} icon="log-out-01" aria-label="Log out" />
+            </div>
+          </div>
+        </aside>
+        <main className="content" id="main">
+          {children}
+        </main>
+      </div>
+      <OverlayHost />
+      <Toaster />
+      <ViewTools />
+    </>
+  );
+}
+
+export function PageHead({
+  title,
+  desc,
+  back,
+  actions,
+}: {
+  title: string;
+  desc?: string;
+  back?: { href: string; label: string };
+  actions?: ReactNode;
+}) {
+  return (
+    <>
+      {back ? (
+        <a className="back-link" href={back.href}>
+          <Icon name="arrow-left" size={16} />
+          {back.label}
+        </a>
+      ) : null}
+      <div className="page-head">
+        <div>
+          <h1 className="page-title">{title}</h1>
+          {desc ? <p className="page-desc">{desc}</p> : null}
+        </div>
+        <div className="page-actions">{actions}</div>
+      </div>
+    </>
+  );
+}

package/template/kit/SiteShell.tsx

@@ -0,0 +1,75 @@
+import { type ReactNode, useEffect } from 'react';
+import './site-shell.css';
+import { useHashRoute } from '@kit/hooks';
+import { Icon } from '@kit/Icon';
+import { BRAND, SITE, type SiteLink } from '@kit/shell';
+import { installPressFeedback } from '@kit/ui/layer';
+import { OverlayHost } from '@kit/ui/Overlay';
+import { Toaster } from '@kit/ui/Toast';
+import { ViewTools } from '@kit/ViewTools';
+
+type Props = {
+  active?: string;
+  nav?: SiteLink[];
+  preFooter?: ReactNode;
+  children: ReactNode;
+};
+
+// The disposable website shell: a site header and footer around a page, with
+// a pre-footer slot for anything the design treats as a global (a newsletter
+// band, a call to action). Reads kit/shell.ts like AppShell does.
+export function SiteShell({ active, nav = SITE.nav, preFooter, children }: Props) {
+  const route = useHashRoute();
+  const path = active ?? route.path;
+
+  useEffect(installPressFeedback, []);
+
+  return (
+    <>
+      <div className="site">
+        <header className="site-head">
+          <a className="site-brand" href="#/" aria-label={BRAND.name}>
+            <Icon name={BRAND.glyph} size={24} />
+            <span>{BRAND.name}</span>
+          </a>
+          <nav className="site-nav" aria-label="Primary">
+            {nav.map((n) => {
+              const on = n.href === '#/' ? path === '#/' : path.startsWith(n.href);
+              return (
+                <a key={n.href} href={n.href} aria-current={on ? 'page' : undefined}>
+                  {n.label}
+                </a>
+              );
+            })}
+          </nav>
+        </header>
+        <main className="site-main" id="main">
+          {children}
+        </main>
+        {preFooter ? <section className="site-prefoot">{preFooter}</section> : null}
+        <footer className="site-foot">
+          <div className="site-foot-grid">
+            <div className="site-foot-brand">
+              <Icon name={BRAND.glyph} size={20} />
+              <span>{BRAND.name}</span>
+            </div>
+            {SITE.footer.columns.map((c) => (
+              <nav key={c.title} className="site-foot-col" aria-label={c.title}>
+                <p className="site-foot-title">{c.title}</p>
+                {c.links.map((l) => (
+                  <a key={l.href} href={l.href}>
+                    {l.label}
+                  </a>
+                ))}
+              </nav>
+            ))}
+          </div>
+          <p className="site-foot-note">{SITE.footer.note}</p>
+        </footer>
+      </div>
+      <OverlayHost />
+      <Toaster />
+      <ViewTools />
+    </>
+  );
+}

package/template/kit/app-shell.css

@@ -0,0 +1,70 @@
+/* The product shell: sidebar, content column, page head. Brand and navigation come from kit/shell.ts. */
+
+/* dvh, not vh: the phone's URL bar is part of 100vh, so a 100vh sidebar
+   overflows by its height until the bar collapses. */
+.shell { display: flex; min-height: 100dvh; }
+.sidebar { width: 320px; flex: none; background: var(--bg-secondary_subtle); border-right: 1px solid var(--border-secondary); display: flex; flex-direction: column; padding: calc(24px + env(safe-area-inset-top, 0px)) 16px calc(32px + env(safe-area-inset-bottom, 0px)) calc(16px + env(safe-area-inset-left, 0px)); position: sticky; top: 0; height: 100dvh; }
+.sidebar-logo { display: flex; align-items: center; gap: 8px; padding: 0 8px; color: var(--fg-primary); height: 28px; margin-bottom: 24px; text-decoration: none; border-radius: var(--radius-xs); }
+.sidebar-brand { font-weight: 600; font-size: 16px; line-height: 24px; color: var(--text-primary); }
+.team { display: flex; align-items: center; gap: 12px; padding: 8px; border-radius: var(--radius-sm); width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; margin-bottom: 24px; }
+.team-avatar { width: 40px; height: 40px; border-radius: var(--radius-sm); display: grid; place-items: center; font-weight: 600; font-size: 16px; color: var(--gray-900); flex: none; }
+.team-text { flex: 1; min-width: 0; }
+.team-name { font-weight: 600; display: block; }
+.team-role { color: var(--text-tertiary); display: block; }
+.team .icon { color: var(--fg-quaternary); }
+.team { transition: background-color var(--dur-hover) var(--ease-hover); }
+@media (hover: hover) and (pointer: fine) { .team:hover:not([aria-expanded="true"]) { background: var(--bg-primary_hover); } }
+.team[aria-expanded="true"] { background: var(--button-secondary-bg_open); }
+.nav { display: flex; flex-direction: column; gap: 4px; }
+.nav-item { display: flex; align-items: center; gap: 10px; height: 36px; padding: 8px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 600; text-decoration: none; border: 0; background: transparent; width: 100%; cursor: pointer; }
+.nav-item .icon { color: var(--nav-item-icon-fg); }
+.nav-item.is-active { background: var(--bg-active); color: var(--text-primary); }
+.nav-item.is-active .icon { color: var(--nav-item-icon-fg_active); }
+@media (hover: hover) and (pointer: fine) { .nav-item:hover { background: var(--bg-primary_hover); } }
+.nav-item:active { background: var(--bg-active); }
+.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; }
+.user { display: flex; align-items: center; gap: 12px; padding: 8px; margin-top: 24px; }
+.user-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--avatar-bg); border: 1px solid var(--avatar-contrast-border); font-weight: 600; color: var(--text-secondary); flex: none; }
+.user-text { flex: 1; min-width: 0; }
+.user-name { font-weight: 600; display: block; }
+.user-email { color: var(--text-tertiary); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.user .btn-icon { color: var(--fg-quaternary); }
+.content { flex: 1; min-width: 0; }
+
+.page { padding: 32px 24px 96px; max-width: 1532px; margin: 0 auto; }
+.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
+/* The title row is 42px, a header button's height, title centred in it. */
+.page-title { font-size: 24px; line-height: 32px; font-weight: 600; padding: 5px 0; }
+.page-desc { color: var(--text-tertiary); font-size: 16px; line-height: 24px; margin-top: 4px; }
+.page-actions { display: flex; gap: 12px; align-items: center; flex: none; }
+/* A 20px line with a 44px reach: the pseudo-element carries the finger's share without moving the title. */
+.back-link { position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; color: var(--text-tertiary); text-decoration: none; font-size: 14px; line-height: 20px; margin-bottom: 6px; border-radius: var(--radius-xs); }
+.back-link::before { content: ''; position: absolute; inset: -12px -8px; }
+@media (hover: hover) and (pointer: fine) { .back-link:hover { color: var(--text-secondary); } }
+.back-link:active { color: var(--text-secondary); }
+
+/* Harness: parkDials() puts the DialKit trigger beside the wordmark, where the sidebar is empty. */
+@media (min-width: 1024px) { .dialkit-root .dialkit-panel[data-position="top-left"] { left: 262px; } }
+
+@media (max-width: 1023px) {
+  .sidebar { width: calc(68px + env(safe-area-inset-left, 0px)); padding: calc(24px + env(safe-area-inset-top, 0px)) 12px calc(32px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px)); }
+  .sidebar-brand { display: none; } .sidebar-logo { justify-content: center; padding: 0; }
+  .team .icon, .user-text, .user .btn-icon { display: none; }
+  .team-text, .nav-item .nav-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
+  .team { justify-content: center; padding: 0; } .team-avatar { width: 36px; height: 36px; font-size: 14px; }
+  .nav-item { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
+  .user { justify-content: center; padding: 0; }
+  /* The head's actions wrap under the title; an unshrinkable row would push the page wider than the phone. */
+  .page-actions { flex: 0 1 auto; min-width: 0; max-width: 100%; flex-wrap: wrap; }
+}
+
+/* A finger needs 44px: the rail's icon targets grow to it, keeping their rhythm (28 + 24 = 44 + 8). */
+@media (max-width: 1023px) and (pointer: coarse) {
+  .sidebar-logo { height: 44px; margin-bottom: 8px; }
+  .team { min-height: 44px; margin-bottom: 16px; }
+  .nav-item { height: 44px; }
+}
+
+@media (max-width: 767px) {
+  .page { padding: 24px 16px 96px; }
+}

package/template/kit/icons.ts

@@ -0,0 +1,11 @@
+// The project's icons: the package's Untitled UI line set, plus the project's
+// own glyphs. Add one by pasting its inner SVG here under a name; `@kit/Icon`
+// draws from this file, so a glyph added here is on every prototype at once.
+import { icons as base } from '@milesroxas/design-hub/kit/icons';
+
+export const icons = {
+  ...base,
+  // logo: { vb: '0 0 24 24', inner: '<path d="…" fill="currentColor"/>' },
+} as const;
+
+export type IconName = keyof typeof icons;

package/template/kit/shell.ts

@@ -0,0 +1,59 @@
+import type { IconName } from '@kit/icons';
+
+// The one place a project names its shell. DESIGN.md, Shell, says which Paper
+// frames hold it; the values below are what the kit draws from that answer.
+// AppShell (product: sidebar, content) and SiteShell (website: header,
+// footer) both read this file, so the brand and the navigation are written
+// once and never again inside a prototype.
+
+export type NavItem = { href: string; label: string; glyph: IconName };
+export type SiteLink = { href: string; label: string };
+export type User = { name: string; email: string; initials: string };
+export type Workspace = { name: string; initials: string; color: string };
+
+export const BRAND = {
+  name: 'Design Hub',
+  // The product shell draws this glyph beside the name; a project swaps it
+  // for its own mark in kit/icons.ts and names it here.
+  glyph: 'logo' as IconName,
+};
+
+export const PRODUCT = {
+  nav: [
+    { href: '#/overview', label: 'Overview', glyph: 'grid-01' },
+    { href: '#/items', label: 'Items', glyph: 'file-06' },
+    { href: '#/people', label: 'People', glyph: 'users-01' },
+    { href: '#/reports', label: 'Reports', glyph: 'bar-chart-01' },
+  ] satisfies NavItem[],
+  navFoot: [{ href: '#/settings', label: 'Settings', glyph: 'settings-02' }] satisfies NavItem[],
+  workspace: { name: 'Sample workspace', initials: 'SW', color: '#dbe6fe' } satisfies Workspace,
+  user: { name: 'Sam Reviewer', email: 'sam@example.com', initials: 'SR' } satisfies User,
+};
+
+export const SITE = {
+  nav: [
+    { href: '#/', label: 'Home' },
+    { href: '#/work', label: 'Work' },
+    { href: '#/about', label: 'About' },
+    { href: '#/contact', label: 'Contact' },
+  ] satisfies SiteLink[],
+  footer: {
+    columns: [
+      {
+        title: 'Company',
+        links: [
+          { href: '#/about', label: 'About' },
+          { href: '#/careers', label: 'Careers' },
+        ],
+      },
+      {
+        title: 'Legal',
+        links: [
+          { href: '#/privacy', label: 'Privacy' },
+          { href: '#/terms', label: 'Terms' },
+        ],
+      },
+    ] satisfies { title: string; links: SiteLink[] }[],
+    note: `© ${new Date().getFullYear()} ${BRAND.name}`,
+  },
+};

package/template/kit/site-shell.css

@@ -0,0 +1,27 @@
+/* The website shell: header, content, optional pre-footer, footer. One
+   measure (1120px) for everything, 24px gutters, 16px on a phone. */
+.site { min-height: 100dvh; display: flex; flex-direction: column; }
+.site-head { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 64px; padding: 0 max(24px, calc((100% - 1120px) / 2)); background: var(--bg-primary); border-bottom: 1px solid var(--border-secondary); }
+.site-brand { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--text-primary); text-decoration: none; border-radius: var(--radius-xs); }
+.site-nav { display: flex; gap: 4px; }
+.site-nav a { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; text-decoration: none; transition: background-color var(--dur-hover) var(--ease-hover), color var(--dur-hover) var(--ease-hover); }
+.site-nav a[aria-current="page"] { color: var(--text-primary); background: var(--bg-active); }
+@media (hover: hover) and (pointer: fine) { .site-nav a:hover { background: var(--bg-primary_hover); color: var(--text-primary); } }
+.site-nav a:active { transform: scale(0.97); }
+.site-main { flex: 1; width: min(1120px, 100% - 48px); margin: 0 auto; padding: 48px 0 96px; }
+.site-prefoot { padding: 48px max(24px, calc((100% - 1120px) / 2)); background: var(--bg-secondary); border-top: 1px solid var(--border-secondary); }
+.site-foot { padding: 48px max(24px, calc((100% - 1120px) / 2)) 32px; border-top: 1px solid var(--border-secondary); color: var(--text-tertiary); }
+.site-foot-grid { display: grid; grid-template-columns: 2fr repeat(auto-fit, minmax(140px, 1fr)); gap: 32px; }
+.site-foot-brand { display: inline-flex; align-items: center; gap: 8px; align-self: start; font-weight: 600; color: var(--text-primary); }
+.site-foot-col { display: flex; flex-direction: column; gap: 8px; }
+.site-foot-title { font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
+.site-foot-col a { color: var(--text-tertiary); text-decoration: none; transition: color var(--dur-hover) var(--ease-hover); }
+@media (hover: hover) and (pointer: fine) { .site-foot-col a:hover { color: var(--text-primary); } }
+.site-foot-note { margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--border-secondary); font-size: 12px; line-height: 18px; }
+:root[data-motion="reduce"] .site-nav a:active { transform: none; }
+@media (max-width: 767px) {
+  .site-head { height: 56px; }
+  .site-nav a { padding: 0 8px; }
+  .site-main { width: min(1120px, 100% - 32px); padding: 32px 0 64px; }
+  .site-foot-grid { grid-template-columns: 1fr 1fr; }
+}