frontend: make the logo block exactly as wide as the second-level menu

The logo block stopped wherever its text happened to end (~140px) while the
rail below it is 208px, so the left edge was a step rather than a column.

Both now read `asideWidth()` from src/layout.ts, so they cannot drift apart,
and collapsing the rail narrows the logo block with it — the wordmark is
dropped and the mark centres in the 56px strip. The block also carries the
rail's separator up through the header, so the column reads as one piece.

The header's own 20px padding had to go for this to work: the logo block has
to start at x=0 to be flush with the rail, so the nav and the right-hand mark
now own their insets. The mark's inset comes from the same `ASIDE_INSET` as
the rail's section title, so the two line up.

A side effect worth keeping: the rail is 208px and the top nav's first item
and .el-main are each inset a further 20px by their own Element Plus defaults,
so the nav text, the page body and the page header all start on one vertical
line.

The widths live in a module rather than CSS custom properties because el-aside
takes its width through a prop and would otherwise fight an inline style.

docs/OVERVIEW.md

@@ -145,13 +145,14 @@ Conventions worth knowing:
 ### Shell
 
 ```
-┌──────────────────────────────────────────────────────────┐
-│ [book mark] paper-doc   论文  模板              [mark]   │  header
-├───────────────────┬──────────────────────────────────────┤
+┌───────────────────┬──────────────────────────────────────┐
+│ [mark] paper-doc  │  论文   模板                    [mk] │  header
+├───────────────────┼──────────────────────────────────────┤
 │  模板配置         │                                      │  second-level
 │   模板列表        │  <RouterView>                        │  menu, left
 │   字段管理        │                                      │
 └───────────────────┴──────────────────────────────────────┘
+       <- 208px ->
 ```
 
 The mark appears at both ends of the header. The second-level menu sits on the
@@ -159,9 +160,28 @@ The mark appears at both ends of the header. The second-level menu sits on the
 which menu it belongs to and deep links render correctly on first paint. Routes
 without a `section` (the welcome page) show no menu.
 
-Which side the menu lands on follows from its DOM order inside the flex row in
-`App.vue` — first child, left — so moving it is a one-block change there rather
-than a stylesheet override.
+Two things about this layout are deliberate and easy to break by accident:
+
+- **Which side the menu lands on follows from its DOM order** inside the flex
+  row in `App.vue` — first child, left. Moving it is a one-block change there,
+  not a stylesheet override.
+- **The logo block is exactly as wide as the rail.** Both read `asideWidth()`
+  from `src/layout.ts`, so they cannot drift apart, and collapsing the rail
+  narrows the logo block with it (dropping the wordmark and centring the mark).
+  The header's own padding is zeroed for this; the two insets come from
+  `ASIDE_INSET` so the mark lines up with the section title below it.
+
+The column also carries through to the content: the rail is 208px and both the
+top nav's first item and `.el-main` are inset a further 20px by their own
+Element Plus defaults, so the menu text, the page body, and the page header all
+start on the same vertical line.
+
+### Shell metrics
+
+`src/layout.ts` is the single source for the rail's width and inset. It is a
+module rather than CSS custom properties because `el-aside` takes its width
+through a prop, which would otherwise fight an inline style coming from the
+stylesheet.
 
 ### Routes