feat: move publication date to top-right corner

- Position publication date in top-right corner of article header
- Works for both hero image and non-image layouts
- Add subtle background and border for better visibility
- On hero images: dark semi-transparent background with backdrop blur
- On regular headers: uses surface-secondary background
- Remove date from inline metadata (reading time and highlights remain)

src/components/ReaderHeader.tsx

@@ -27,17 +27,17 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
     return (
       <div className="reader-hero-image">
         <img src={image} alt={title || 'Article image'} />
+        {formattedDate && (
+          <div className="publish-date-topright">
+            <FontAwesomeIcon icon={faCalendar} />
+            <span>{formattedDate}</span>
+          </div>
+        )}
         {title && (
           <div className="reader-header-overlay">
             <h2 className="reader-title">{title}</h2>
             {summary && <p className="reader-summary">{summary}</p>}
             <div className="reader-meta">
-              {formattedDate && (
-                <div className="publish-date">
-                  <FontAwesomeIcon icon={faCalendar} />
-                  <span>{formattedDate}</span>
-                </div>
-              )}
               {readingTimeText && (
                 <div className="reading-time">
                   <FontAwesomeIcon icon={faClock} />
@@ -61,15 +61,15 @@ const ReaderHeader: React.FC<ReaderHeaderProps> = ({
     <>
       {title && (
         <div className="reader-header">
+          {formattedDate && (
+            <div className="publish-date-topright">
+              <FontAwesomeIcon icon={faCalendar} />
+              <span>{formattedDate}</span>
+            </div>
+          )}
           <h2 className="reader-title">{title}</h2>
           {summary && <p className="reader-summary">{summary}</p>}
           <div className="reader-meta">
-            {formattedDate && (
-              <div className="publish-date">
-                <FontAwesomeIcon icon={faCalendar} />
-                <span>{formattedDate}</span>
-              </div>
-            )}
             {readingTimeText && (
               <div className="reading-time">
                 <FontAwesomeIcon icon={faClock} />