chore: AGENTS.md prose sweep and small cleanups

Replaced em-dashes across docs prose with colons, semicolons, periods,
or parentheses per the project rule. Dropped the literal em-dash glyph
from the blog byline divider in favor of a middle dot.

Fixed three Nav components that pixel sizes through `rem()`; nav and
sidebar widths use plain px from `utils/sizes.ts`.

`utils/blog.server.ts` now loads MDX modules concurrently via
`Promise.all`. `utils/cssCompatFormats.ts` deduplicates a double sort.
`Nav/SidebarMenus.tsx` hoists `activeHref(pathname)` out of its top-level
`.map` so the lookup runs once per render instead of per item.

Removed two unused exports: `searchModalWidth` in `utils/sizes.ts`
and the precomputed `Author.websiteHost` in `utils/authors.ts`.

Author: quantizor

components/BlogMeta.tsx

@@ -171,7 +171,7 @@ const JumpToComments = styled.a`
   }
 `;
 
-export const BlogDivider = styled.span.attrs({ 'aria-hidden': 'true', children: '—' })`
+export const BlogDivider = styled.span.attrs({ 'aria-hidden': 'true', children: '·' })`
   color: ${theme.color.blogAccentMuted};
 `;
 

components/Nav/MobileNavbar.tsx

@@ -1,6 +1,5 @@
 import styled, { css } from 'styled-components';
 import { mobile } from '../../utils/media';
-import rem from '../../utils/rem';
 import { navbarHeight } from '../../utils/sizes';
 import { theme } from '../../utils/theme';
 import Link from '../Link';
@@ -28,7 +27,7 @@ export default function MobileNavbar({ isSideFolded, onSideToggle }: MobileNavba
         {isSideFolded ? <FoldIcon /> : <CloseIcon />}
       </NavButton>
 
-      <LogoLink href="/">
+      <LogoLink>
         <Logo />
       </LogoLink>
 
@@ -44,7 +43,7 @@ const Wrapper = styled.div`
     align-items: center;
     display: flex;
     flex-grow: 1;
-    height: ${rem(navbarHeight)};
+    height: ${navbarHeight}px;
     justify-content: space-between;
     padding-left: calc(${theme.layout.gutter} - ${NAV_BUTTON_ICON_INSET}px);
     padding-right: calc(${theme.layout.gutter} - ${THEME_TOGGLE_ICON_INSET}px);

components/Nav/NavButton.tsx

@@ -16,7 +16,7 @@ const NavButton = styled.button.attrs(() => ({
   background: transparent;
   cursor: pointer;
   flex: 0 0 auto;
-  height: ${rem(navbarHeight)};
+  height: ${navbarHeight}px;
   padding: 0 ${rem(10)};
   text-align: center;
   transition: all 200ms ease-in-out;

components/Nav/SidebarMenus.tsx

@@ -95,6 +95,7 @@ export default function SidebarMenu({ latestPost }: { latestPost: LatestPost })
     [currentDocsPage]
   );
   const activeId = useScrollSpy(sectionIds);
+  const currentActiveHref = activeHref(pathname);
 
   return (
     <MenuRoot aria-label="Site navigation">
@@ -103,7 +104,7 @@ export default function SidebarMenu({ latestPost }: { latestPost: LatestPost })
       </SearchWrapper>
 
       {TOP_LEVEL.map(({ href, label, icon: Icon, external, badge, badgeTone }) => {
-        const isActive = !external && href === activeHref(pathname);
+        const isActive = !external && href === currentActiveHref;
 
         return (
           <TopSection key={href}>

components/Nav/Social.tsx

@@ -14,7 +14,7 @@ const Wrapper = styled.nav.attrs({ 'aria-label': 'Social links' })`
 const SocialLink = styled(Link).attrs({ variant: 'unstyled' as const })`
   display: flex;
   margin-right: ${rem(20)};
-  line-height: ${rem(navbarHeight)};
+  line-height: ${navbarHeight}px;
   transition:
     opacity 0.2s,
     transform 0.2s;

sections/advanced/accessibility.mdx

@@ -51,7 +51,7 @@ const IconButton = styled.button.attrs<{ $label: string }>(props => ({
 
 ### Linting
 
-Standard `eslint-plugin-jsx-a11y` does not recognize styled-components — it only inspects JSX element names and cannot determine that `<StyledButton>` is a `<button>`. Use [`eslint-plugin-styled-components-a11y`](https://www.npmjs.com/package/eslint-plugin-styled-components-a11y) instead, which parses styled-components' tagged template literals to identify the underlying HTML element.
+Standard `eslint-plugin-jsx-a11y` does not recognize styled-components: it only inspects JSX element names and cannot determine that `<StyledButton>` is a `<button>`. Use [`eslint-plugin-styled-components-a11y`](https://www.npmjs.com/package/eslint-plugin-styled-components-a11y) instead, which parses styled-components' tagged template literals to identify the underlying HTML element.
 
 ```
 npm install --save-dev eslint-plugin-styled-components-a11y
@@ -71,7 +71,7 @@ The plugin mirrors `eslint-plugin-jsx-a11y` for styled components, including rul
 
 ### Runtime auditing
 
-For runtime accessibility checks, use [`@axe-core/react`](https://www.npmjs.com/package/@axe-core/react) in development. It audits the rendered DOM and logs violations to the browser console — it works with any styling approach since it inspects the final HTML:
+For runtime accessibility checks, use [`@axe-core/react`](https://www.npmjs.com/package/@axe-core/react) in development. It audits the rendered DOM and logs violations to the browser console; it works with any styling approach since it inspects the final HTML:
 
 ```tsx
 if (process.env.NODE_ENV === 'development') {

sections/advanced/components-as-selectors.mdx

@@ -73,7 +73,7 @@ const B = styled.div`
 ```
 
 In development, a `console.error` warning is emitted because `A` is a plain function component
-being used as an interpolation — styled-components calls it as a function and gets an unexpected
+being used as an interpolation; styled-components calls it as a function and gets an unexpected
 result. The component still mounts, but the selector won't work as intended.
 
 However, wrapping `A` in a `styled()` factory makes it eligible for interpolation -- just

sections/advanced/performance.mdx

@@ -22,7 +22,7 @@ const Header = () => <Title>Hello</Title>;
 
 Every unique interpolation result generates a new CSS class. For values that change frequently (colors from a picker, positions from mouse events, animation progress), this can produce hundreds of classes. styled-components warns at 200+.
 
-CSS custom properties avoid this entirely — the CSS rule stays the same and the browser updates the variable natively:
+CSS custom properties avoid this entirely: the CSS rule stays the same and the browser updates the variable natively.
 
 ```tsx
 // Bad: new CSS class for every distinct color
@@ -40,7 +40,7 @@ const Box = styled.div`
 
 ### Use `attrs` for rapidly-changing values
 
-When a value changes on every frame (mouse position, scroll offset), use `attrs` with a `style` object. This applies values as inline styles — no class generation at all:
+When a value changes on every frame (mouse position, scroll offset), use `attrs` with a `style` object. This applies values as inline styles, no class generation at all.
 
 ```tsx
 // Bad: generates a new CSS class on every mouse move
@@ -67,7 +67,7 @@ const Cursor = styled.div.attrs<{ $x: number; $y: number }>(props => ({
 
 ### Data attributes for discrete variants
 
-For finite variant sets (size, color scheme, state), data attributes keep styles fully static — no interpolation functions, one cached class:
+For finite variant sets (size, color scheme, state), data attributes keep styles fully static. No interpolation functions, one cached class.
 
 ```tsx
 // Dynamic: interpolation function runs every render
@@ -129,7 +129,7 @@ function App({ mode }: { mode: 'light' | 'dark' }) {
 }
 ```
 
-This applies regardless of how deep the consumer is — every styled component in the tree pays the cache miss when the theme reference changes.
+This applies regardless of how deep the consumer is: every styled component in the tree pays the cache miss when the theme reference changes.
 
 ### Static vs dynamic components
 

sections/advanced/security.mdx

@@ -26,7 +26,7 @@ You can use [`CSS.escape`](https://developer.mozilla.org/en-US/docs/Web/API/CSS/
 
 If your site sets a [`style-src` CSP](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src) that requires a `nonce`, styled-components will attach it to every injected `<style>` tag. You can supply the nonce in any of the following ways (first match wins):
 
-1. Pass `nonce` explicitly to [`StyleSheetManager`](/docs/api#stylesheetmanager) — the recommended approach for Next.js, Remix, and other frameworks where the nonce is generated per-request:
+1. Pass `nonce` explicitly to [`StyleSheetManager`](/docs/api#stylesheetmanager): the recommended approach for Next.js, Remix, and other frameworks where the nonce is generated per-request.
 
    ```tsx
    <StyleSheetManager nonce={nonce}>

sections/advanced/server-side-rendering.mdx

@@ -16,7 +16,7 @@ Key behaviors in RSC:
 
 - No `'use client'` directive required
 - `ThemeProvider` becomes a pass-through component (no context in RSC)
-- `StyleSheetManager` works in RSC as of v6.4 — `stylisPlugins`, `shouldForwardProp`, and `nonce` are applied
+- `StyleSheetManager` works in RSC as of v6.4 (`stylisPlugins`, `shouldForwardProp`, and `nonce` are applied)
 - CSS is automatically injected inline via `<style>` tags
 
 Best practices for RSC:
@@ -30,7 +30,7 @@ Best practices for RSC:
 
 #### Child-index selector caveat
 
-RSC emits inline `<style>` tags as siblings of your styled elements. These tags are real DOM children, so `:first-child`, `:last-child`, and `:nth-child()` count them — shifting indices and breaking your styles. Use `:first-of-type` / `:nth-of-type()` instead, which filter by element type and are immune to this issue.
+RSC emits inline `<style>` tags as siblings of your styled elements. These tags are real DOM children, so `:first-child`, `:last-child`, and `:nth-child()` count them, shifting indices and breaking your styles. Use `:first-of-type` / `:nth-of-type()` instead, which filter by element type and are immune to this issue.
 
 If you need `:nth-child()` specifically, use the built-in [`stylisPluginRSC`](/docs/api#stylesheetmanager) plugin (v6.4+) which rewrites these selectors to exclude styled-components style tags:
 
@@ -43,7 +43,7 @@ import { StyleSheetManager, stylisPluginRSC } from 'styled-components';
 </StyleSheetManager>
 ```
 
-This uses CSS Selectors Level 4 `of S` syntax ([browser support](https://caniuse.com/css-nth-child-of-s): Chrome 111+, Firefox 113+, Safari 9+). In unsupported browsers, the entire CSS rule is dropped — so only opt in if your audience supports it.
+This uses CSS Selectors Level 4 `of S` syntax ([browser support](https://caniuse.com/css-nth-child-of-s): Chrome 111+, Firefox 113+, Safari 9+). In unsupported browsers, the entire CSS rule is dropped, so only opt in if your audience supports it.
 
 #### Theming with CSS custom properties
 
@@ -62,7 +62,7 @@ const Button = styled.button`
 `;
 ```
 
-Or set variables manually on a parent element — they cascade to all DOM children:
+Or set variables manually on a parent element. They cascade to all DOM children:
 
 ```tsx
 const Container = styled.div``;
@@ -81,7 +81,7 @@ To ensure deterministic component IDs for server/client consistency, use our [Ba
 
 > If you use React Server Components (v6.3+), the plugins are optional for SSR but still provide minification and more legible class names in DevTools.
 
-For Next.js users, the SWC plugin is built-in — just add `styledComponents: true` to your `next.config.js` compiler options.
+For Next.js users, the SWC plugin is built-in; just add `styledComponents: true` to your `next.config.js` compiler options.
 
 ### Example