feat: add user centric features

components/page-header.tsx

@@ -34,9 +34,11 @@ export function PageHeader({
   /** Drop the bordered chrome — useful for pages that want flush title text. */
   bare?: boolean;
   /**
-   * Stick to the top below the global SiteHeader. Used by reading pages so
-   * the chapter title stays visible as the user scrolls long content.
-   * The offset is `top-14 md:top-16` to clear SiteHeader's height.
+   * Stick to the top below the global SiteHeader. Used by reading pages
+   * so the chapter title stays visible as the user scrolls long content.
+   * The offset is `top-12 sm:top-14` — SiteHeader is `h-12 sm:h-14`, so
+   * these values land the PageHeader flush with its bottom edge with no
+   * visible gap.
    */
   sticky?: boolean;
   className?: string;
@@ -66,7 +68,7 @@ export function PageHeader({
       className={cn(
         "px-4 sm:px-6",
         bare ? "py-6" : "border-b border-border bg-card/85 backdrop-blur py-5",
-        sticky && "sticky top-14 md:top-16 z-20",
+        sticky && "sticky top-12 sm:top-14 z-20",
         className,
       )}
     >