From 74dfb8206946e9a9e9275990866f0169466ffaad Mon Sep 17 00:00:00 2001
From: Krishna Ayyalasomayajula <krishna@ayyalasomayajula.net>
Date: Mon, 1 Jun 2026 23:45:53 -0500
Subject: [PATCH] fix: use CSS variable for TOC sticky offset instead of
 hardcoded pixels

---
 app/globals.css                     | 1 +
 components/blog/TableOfContents.tsx | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/app/globals.css b/app/globals.css
index c7ae4d0..e00f7c6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -73,6 +73,7 @@
     scroll-padding-top: 96px;
   }
   body {
+    --header-height: 56px;
     font-family: var(--font-serif);
     font-weight: 400;
     line-height: 1.6;
diff --git a/components/blog/TableOfContents.tsx b/components/blog/TableOfContents.tsx
index 3d81447..6cf1e2e 100644
--- a/components/blog/TableOfContents.tsx
+++ b/components/blog/TableOfContents.tsx
@@ -58,7 +58,7 @@ export function TableOfContents() {
   if (headings.length === 0) return null;
 
   return (
-    <nav className="lg:sticky lg:top-[72px]">
+    <nav className="lg:sticky lg:top-[var(--header-height)]">
       <h4 className="font-sans text-xs font-semibold uppercase tracking-wider text-ink-soft mb-3">
         On this page
       </h4>