From 4f1780bd05aafe70e6cc94f2530a62af2d5aa443 Mon Sep 17 00:00:00 2001
From: Ankesh Bharti <hey@ankeshbharti.com>
Date: Sun, 19 Apr 2026 10:17:33 +0530
Subject: [PATCH] Adjust book title spacing on mobile and desktop

---
 app/globals.css                     | 13 +++++++++----
 components/book-datestamp-mover.tsx |  4 ++--
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/app/globals.css b/app/globals.css
index c2b50a28..4a095cf4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -853,6 +853,11 @@ sniper-link[hidden] {
   box-sizing: border-box;
 }
 
+/* Keep title-to-meta spacing consistent across breakpoints */
+[data-book-section] article h1:first-of-type {
+  margin-bottom: 0.25rem !important;
+}
+
 /* Ensure page navigation is constrained to content width */
 [data-book-section] nav[data-book-navigation] {
   max-width: 100%;
@@ -935,7 +940,7 @@ sniper-link[hidden] {
   /* h1 title comes first in visible order */
   [data-book-section] article h1:first-of-type {
     order: 1 !important;
-    margin-bottom: 0.5rem !important;
+    margin-bottom: 0.25rem !important;
     padding-left: 0 !important;
     padding-right: 0 !important;
   }
@@ -955,7 +960,7 @@ sniper-link[hidden] {
     display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
-    margin: 0 0 0.75rem 0 !important;
+    margin: 0 0 1rem 0 !important;
     font-size: 0.8125rem !important;
     color: var(--muted-foreground) !important;
     text-align: left !important;
@@ -1013,8 +1018,8 @@ sniper-link[hidden] {
   /* Datestamp styling after JS moves it below h1 */
   [data-book-section] article main > div:has(time),
   [data-book-section] article main div:has(> time) {
-    margin-top: 0.5rem !important;
-    margin-bottom: 1.5rem !important;
+    margin-top: 0 !important;
+    margin-bottom: 1rem !important;
     font-size: 0.875rem !important;
     color: var(--muted-foreground) !important;
     text-align: left !important;
diff --git a/components/book-datestamp-mover.tsx b/components/book-datestamp-mover.tsx
index 9dd675d5..46c7650c 100644
--- a/components/book-datestamp-mover.tsx
+++ b/components/book-datestamp-mover.tsx
@@ -34,8 +34,8 @@ export function BookDatestampMover() {
 
       // Style the datestamp
       const div = datestampDiv as HTMLElement
-      div.style.marginTop = '0.5rem'
-      div.style.marginBottom = '1.5rem'
+      div.style.marginTop = '0'
+      div.style.marginBottom = '1rem'
       div.style.textAlign = 'left'
       div.style.fontSize = '0.875rem'
       div.style.color = '#8A8A8A'