styled status on main page. don't like how it looks though

src/lib/lists/blog-gallery.svelte

@@ -44,7 +44,7 @@
                     border-radius var(--duration-animation) var(--anim-curve);
         border: var(--border-dash-size) var(--border-style) transparent;
         text-decoration: none;
-        border-radius: 24px;
+        border-radius: var(--border-radius);
     }
 
     .entry:hover {
@@ -59,8 +59,8 @@
 
     .entry:hover .entry-banner-container {
         /* border-radius: 24px 24px 0 0; */
-        border-top-left-radius: 16px;
+        border-top-left-radius: calc(var(--border-radius) - 8px);
-        border-top-right-radius: 16px;
+        border-top-right-radius: calc(var(--border-radius) - 8px);
         border-bottom-left-radius: 4px;
         border-bottom-right-radius: 4px;
     }

src/routes/+layout.svelte

@@ -128,6 +128,8 @@
             --border-dash-size: 2px;
             --underline-dash-size: 1px;
 
+            --border-radius: 24px;
+            
             /* durations */
             --duration-blur: 0.2s;
 

src/routes/+page.svelte

@@ -13,7 +13,7 @@
     let latestDevlogDate = devlogPosts[0].post.date;
     let latestBlogDate = blogPosts[0].post.date;
 
-    let updateEntriesTrimmed = updateEntries.slice(0, 4);
+    let updateEntriesTrimmed = updateEntries.slice(0, 5);
 
     let latestStatusContent = $state("fetching status...");
     let latestStatusTimestamp = $state("?");
@@ -109,12 +109,19 @@
     </div>
 
     <div class="split-container">
-        <div class="info-container">
+        <div class="meta-vertical-container">
+            <div class="meta-container info-container">
+                <a class="status-header-link" href="/"><h4 class="update-header">latest status</h4></a>
+                <p class="status-content">{latestStatusContent}</p>
+                <span class="status-timestamp">:: {latestStatusTimestamp}</span>
+            </div>
+            <div class="meta-container info-container">
                 <h4 class="update-header">heads-up</h4>
                 <p>This website works best on Firefox and other Gecko-based browsers! All pages <i>should</i> be responsive and work on mobile.</p>
-            <p>Also, this place is a constant work-in-progress and things may move around. If anything's outright <a href="/blog/2026/0131">broken</a> though, please do let me know.</p>
             </div>
-        <div class="update-container">
+        </div>
+        
+        <div class="meta-container update-container">
             <a class="update-header-link" href="/meta/updates"><h4 class="update-header">website updates <span class="small-supertext">(new!)</span></h4></a>
             {#each updateEntriesTrimmed as entry}
                 <UpdateEntry {entry} />
@@ -122,8 +129,6 @@
         </div>
     </div>
 
-    <p>{latestStatusTimestamp} :: {latestStatusContent}</p>
-
     <GalleryRow entries={galleryTopRow} />
     <GalleryRow entries={galleryBottomRow} />
 
@@ -173,7 +178,7 @@
         width: 100%;
         display: flex;
         flex-direction: row;
-        gap: 16px;
+        gap: 8px;
         margin: 16px 0;
     }
 
@@ -214,29 +219,51 @@
         margin-right: 12px;
     }
 
-    .update-container, .info-container, .button-container, .webring-container {
+    .meta-vertical-container {
+        flex: 3;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+    }
+
+    .meta-container {
         padding: 8px 24px;
         backdrop-filter: blur(var(--blur-radius-background));
-        flex: 2;
+        border-width: var(--border-dash-size);
+        border-style: var(--border-style);
+        /* transition: border-radius var(--duration-animation) var(--anim-curve); */
+        /* border-radius: var(--border-radius); */
     }
 
-    .update-container, .button-container, .webring-container {
-        border: var(--border-dash-size) var(--color-highlight) var(--border-style);
-    }
-
-    .info-container, .button-container {
-        border: var(--border-dash-size) var(--color-highlight-alt) var(--border-style);
-    }
     .info-container {
-        flex: 1;
+        border-color: var(--color-highlight-alt);
-    }
-    .info-container > h4, .button-container > h4 {
-        color: var(--color-highlight-alt);
     }
     .info-container p, .info-container a {
         font-size: 1.0rem;
         line-height: 1.4rem;
     }
+    .info-container > h4 {
+        color: var(--color-highlight-alt);
+    }
+
+    .update-container {
+        border-color: var(--color-highlight);
+        flex: 4;
+    }
+
+    .status-content {
+        margin-bottom: 8px;
+    }
+
+    .status-timestamp {
+        font-family: var(--font-mono);
+        font-size: 0.8rem;
+        line-height: 0.8rem;
+        display: block;
+        color: var(--color-text-highlight-alt);
+        font-weight: 600;
+        margin-top: 0;
+    }
 
     .webring-container {
         display: flex;
@@ -251,11 +278,23 @@
         padding-bottom: 16px;
     }
 
-    .update-header-link {
+    .update-header-link, .status-header-link {
         text-decoration: none;
     }
     .update-header-link:hover {
-        text-decoration: underline var(--border-style) var(--border-dash-size) var(--color-highlight);
+        text-decoration-color: var(--color-highlight);
+    }
+    .status-header-link:hover {
+        text-decoration-color: var(--color-highlight-alt);
+    }
+    .update-header-link:hover, .status-header-link:hover {
+        text-decoration-line: underline;
+        text-decoration-style: dashed;
+        text-decoration-thickness: var(--border-dash-size);
+    }
+
+    .status-header-link .update-header {
+        color: var(--color-highlight-alt);
     }
     
     .update-header {