fix: add remark-sectionize in articles

src/components/TableOfContents.astro

@@ -63,7 +63,7 @@ function buildToc(headings: Heading[]): Heading[] {
 </details>
 
 <nav
-  class="sticky top-[5.5rem] col-start-1 hidden h-[calc(100vh-5.5rem)] text-xs leading-4 xl:block"
+  class="sticky top-20 col-start-1 hidden h-[calc(100vh-5rem)] text-xs leading-4 xl:block"
 >
   <div class="flex justify-end">
     <ScrollArea client:load className="max-h-[calc(100vh-8rem)]" type="always">

src/content/blog/rehype-patch/index.mdx

@@ -49,7 +49,7 @@ After I replied that I hadn't figured out a workaround yet, they sent me a brill
 
 This happened to be exactly what I needed! I went into my `node_modules` directory and made the changes manually:
 
-```js title="node_modules ＞ rehype-pretty-code ＞ dist ＞ index.js" startLineNumber=18 ins={9} del={8}
+```js title="node_modules⠀›⠀rehype-pretty-code⠀›⠀dist⠀›⠀index.js" startLineNumber=18 ins={9} del={8}
 function isInlineCode(element, parent, bypass = false) {
   if (bypass) {
     return false;
@@ -64,7 +64,7 @@ function isBlockCode(element) {
 
 From here, I ran `npx patch-package rehype-pretty-code`, which created a `patches/rehype-pretty-code+0.14.1.patch` file with the changes I made:
 
-```diff title="patches ＞ rehype-pretty-code+0.14.1.patch"
+```diff title="patches⠀›⠀rehype-pretty-code+0.14.1.patch"
 --- a/node_modules/rehype-pretty-code/dist/index.js
 +++ b/node_modules/rehype-pretty-code/dist/index.js
 @@ -22,7 +22,7 @@ function isInlineCode(element, parent, bypass = false) {

src/content/blog/the-state-of-static-blogs/index.mdx

@@ -123,7 +123,7 @@ This is a non-exhaustive list of features I believe are essential for a friction
 
 - The `cn(){:js}` function is a utility function which combines [clsx](https://www.npmjs.com/package/clsx) and [tailwind-merge](https://www.npmjs.com/package/tailwind-merge), two packages which allow painless conditional class addition and concatenation:
 
-  ```tsx title="src ＞ lib ＞ utils.ts" caption="A utility function for class name concatenation" showLineNumbers
+  ```tsx title="src⠀›⠀lib⠀›⠀utils.ts" caption="A utility function for class name concatenation" showLineNumbers
   import { type ClassValue, clsx } from 'clsx'
   import { twMerge } from 'tailwind-merge'
 
@@ -134,7 +134,7 @@ This is a non-exhaustive list of features I believe are essential for a friction
 
   This needs to be in every single template. This is an example of it being used in my `<Link>{:html}` component:
 
-  ```astro showLineNumbers title="src ＞ components ＞ Link.astro" caption="A custom Link component with tailwind-merge and clsx" {10-15} "cn"
+  ```astro showLineNumbers title="src⠀›⠀components⠀›⠀Link.astro" caption="A custom Link component with tailwind-merge and clsx" {10-15} "cn"
   ---
   import { cn } from '@/lib/utils'
 

src/styles/typography.css

@@ -2,7 +2,7 @@
 
 @layer components {
   .prose {
-    @apply text-foreground text-base leading-8 [&>*]:first:mt-0 [&>*]:last:mb-0;
+    @apply text-foreground text-base leading-8 [&>section:first-child>*]:mt-0 [&>section:last-child>*]:mb-0;
 
     p {
       @apply text-foreground/80 my-5 leading-7 not-first:mt-5;