diff --git a/frontend/src/assets/main.css b/frontend/src/assets/main.css
index b40a54bd..85a1dbf3 100644
--- a/frontend/src/assets/main.css
+++ b/frontend/src/assets/main.css
@@ -21,6 +21,12 @@
   --color-info: #06b6d4;
   --sidebar-width: 220px;
   --topbar-height: 56px;
+
+  /* The main column's padding, which the sidebar takes as its top padding, and the page title's
+     line, which the sidebar brand takes as its height: together they put the logo level with the
+     title on every page. */
+  --content-padding: 2rem;
+  --page-title-height: 2rem;
   --footer-height: 48px;
   --radius: 10px;
   --demo-banner-height: 2.2rem;
@@ -216,20 +222,25 @@ body,
   border-width: 1px 1px 0 0;
   display: flex;
   flex-direction: column;
-  padding: 0.5rem;
+
+  /* Less its top border, so the brand inside starts exactly where the main column's title does. */
+  padding: calc(var(--content-padding) - 1px) 0.5rem 0.5rem;
   flex-shrink: 0;
   overflow-y: auto;
 }
 
+/* As tall as the page title's line and as far down, so the two share a middle; the gap below it
+   matches the one under the page header, so the first nav link starts level with the first card. */
 .sidebar-brand {
   display: flex;
   align-items: center;
   gap: 0.6rem;
+  min-height: var(--page-title-height);
   font-size: 1.1rem;
   font-weight: 700;
   color: var(--color-primary);
   text-decoration: none;
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 
   /* The nav links' own inline padding, so the logo sits in the same column as their icons. */
   padding-left: 0.75rem;
@@ -271,7 +282,7 @@ body,
 .main-content {
   flex: 1;
   overflow-y: auto;
-  padding: 2rem;
+  padding: var(--content-padding);
   min-width: 0;
 }
 
@@ -290,6 +301,7 @@ body,
 .view-header h1 {
   font-size: 1.5rem;
   font-weight: 700;
+  line-height: var(--page-title-height);
 }
 
 /* A line about the page, tucked under its title rather than spaced like a section of its own. */
@@ -1925,8 +1937,11 @@ textarea.form-control {
 
   /* The same gutter as the topbar, so the page title and cards line up under the menu button and
      the footer under both. */
+  :root {
+    --content-padding: 0.75rem;
+  }
+
   .main-content {
-    padding: 0.75rem;
     overflow-x: hidden;
   }
 
@@ -1971,8 +1986,8 @@ textarea.form-control {
 /* ── Tablet (600–1023px) ──────────────────────────────────── */
 
 @media (width >= 600px) and (width <= 1023px) {
-  .main-content {
-    padding: 1.5rem;
+  :root {
+    --content-padding: 1.5rem;
   }
 
   .status-grid {