fix(tools): make each tools card a link to its docs page

src/components/organisms/BuildTools/BuildTools.module.scss

@@ -40,15 +40,34 @@
 .box {
     display: flex;
     flex-direction: column;
-    cursor: pointer;
+
+    // The button is positioned against the box.
+    position: relative;
     width: rem(308);
     height: rem(300);
-    padding: rem(20) rem(10) rem(10);
     color: var(--color-bg);
     background-color: var(--color-stone);
     border-radius: rem(4);
 }
 
+// Fills the box; the bottom padding keeps the text clear of the button.
+.boxLink {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: rem(20) rem(10) rem(48);
+    color: inherit;
+    text-decoration: none;
+    border-radius: inherit;
+
+    // The link is each box's only tab stop, and the global reset drops the
+    // focus outline.
+    &:focus-visible {
+        outline: 2px solid var(--color-step-text);
+        outline-offset: 2px;
+    }
+}
+
 .boxTitle {
     @include font-size(26px, 0.95);
 
@@ -67,8 +86,9 @@
 }
 
 .boxButton {
-    align-self: flex-end;
-    margin-top: auto;
+    position: absolute;
+    right: rem(10);
+    bottom: rem(10);
 }
 
 .headingBlock {

src/components/organisms/BuildTools/BuildTools.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 
 import styles from './BuildTools.module.scss';
 
@@ -35,33 +35,39 @@ const boxes = [
     },
 ];
 
-const renderBox = (index: number, go: (href: string) => void) => {
+const renderBox = (index: number) => {
     const { title, text, href } = boxes[index]!;
 
     return (
+        // The zone is the box: hovering anywhere on it flies the button's arrow
+        // (see the Button atom), and the link fills it.
         <article className={styles.box} data-reveal-group="soft" data-button-zone>
-            <h3 className={styles.boxTitle} data-reveal="text" style={revealIndex(0)}>
-                {title}
-            </h3>
-            <p className={styles.boxText} data-reveal="text" style={revealIndex(1)}>
-                {text}
-            </p>
+            <Link href={href} className={styles.boxLink}>
+                <h3 className={styles.boxTitle} data-reveal="text" style={revealIndex(0)}>
+                    {title}
+                </h3>
+                <p className={styles.boxText} data-reveal="text" style={revealIndex(1)}>
+                    {text}
+                </p>
+            </Link>
+            {/* Beside the link, since an anchor cannot hold another one. The box
+                is the link, so this copy stays out of the tab order and the
+                accessibility tree. */}
             <Button
+                href={href}
                 className={styles.boxButton}
                 icon="arrow"
-                aria-label={`Learn more about ${title}`}
+                tabIndex={-1}
+                aria-hidden
                 data-reveal
                 style={revealIndex(2)}
-                onClick={() => go(href)}
             />
         </article>
     );
 };
 
 const BuildTools = () => {
     const sectionRef = useReveal<HTMLElement>();
-    const router = useRouter();
-    const go = (href: string) => router.push(href);
 
     return (
         <section
@@ -72,12 +78,12 @@ const BuildTools = () => {
         >
             <div className={styles.grid}>
                 <div className={styles.column}>
-                    {renderBox(0, go)}
-                    {renderBox(1, go)}
+                    {renderBox(0)}
+                    {renderBox(1)}
                 </div>
                 <div className={styles.column}>
-                    {renderBox(2, go)}
-                    {renderBox(3, go)}
+                    {renderBox(2)}
+                    {renderBox(3)}
                 </div>
             </div>
             <SectionHeading