fix super nitpicky indented headings

components/Heading/Heading.tsx

@@ -1,20 +1,15 @@
 import innerText from "react-innertext";
+import HeadingAnchor from "../HeadingAnchor/HeadingAnchor";
 import { styled } from "../../lib/styles/stitches.config";
 import type { ComponentProps } from "react";
 
-const Anchor = styled("a", {
+const Anchor = styled(HeadingAnchor, {
   margin: "0 0.25em",
   padding: "0 0.25em",
   color: "$mediumLight",
   fontWeight: 300,
-  textDecoration: "none",
   opacity: 0, // overridden on hover below (except on small screens)
 
-  "&::before": {
-    // pound sign `#`, done here to keep content DOM cleaner
-    content: "\\0023",
-  },
-
   "&:hover": {
     color: "$link",
   },
@@ -62,9 +57,7 @@ const Heading = ({ as, id, children, ...rest }: HeadingProps) => {
       {children}
 
       {/* add anchor link to H2s and H3s. ID is already generated by rehype-slug. `#` character inserted via CSS. */}
-      {id && (as === "h2" || as === "h3") && (
-        <Anchor href={`#${id}`} title={`Jump to "${innerText(children)}"`} tabIndex={-1} aria-hidden={true} />
-      )}
+      {id && (as === "h2" || as === "h3") && <Anchor id={id} title={innerText(children)} />}
     </H>
   );
 };