feat(header): logo mark + Lee Teong Hoe in brand, two-row mobile nav

- brand: three-colour Hoelee mark (rasterised from the brand vector,
  transparent, public/images/hoelee-mark-96.png) followed by the name
- section links grouped in .nav-links so the mobile header puts them on
  their own row instead of wrapping past the search/lang/theme controls
- measured 320/360/390/414/600/768/1280: scrollWidth == innerWidth,
  header 91.6px two rows (<600px) / 60.3px one row, mark loads at 22/26px

src/styles/global.css

@@ -107,22 +107,46 @@ body {
   gap: 1rem;
 }
 .nav .brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.55rem;
   font-weight: 700;
-  font-size: 1.05rem;
+  font-size: 1.02rem;
   color: var(--ink);
   text-decoration: none;
   margin-right: auto;
   letter-spacing: -0.01em;
   white-space: nowrap;
 }
+/* Brand mark: the three-colour Hoelee mark, rasterised from the vector source
+   with a transparent background (public/images/hoelee-mark-96.png = 96 px, so
+   it stays sharp at 26 CSS px on a 3x screen). It is decorative — the name text
+   next to it is the accessible label. */
+.nav .brand-mark {
+  width: 26px;
+  height: 26px;
+  display: block;
+  flex: none;
+}
+.nav .brand .brand-name { color: var(--ink); }
+.nav .brand:hover .brand-name { color: var(--brand); }
 .nav .brand .dot { color: var(--brand); }
-.nav a:not(.brand) {
+.nav .nav-link {
   color: var(--muted);
   text-decoration: none;
   font-size: 0.92rem;
   font-weight: 500;
+  white-space: nowrap;
+}
+.nav .nav-link:hover { color: var(--brand); }
+.nav-links {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
 }
-.nav a:not(.brand):hover { color: var(--brand); }
 .theme-toggle {
   background: none;
   border: 1px solid var(--border);
@@ -923,7 +947,17 @@ a.category-card:hover .art img {
 /* ---------- Mobile ---------- */
 @media (max-width: 600px) {
   .wrap { padding: 1.5rem 1.25rem 4rem; }
-  .nav { padding: 0.8rem 1.25rem; gap: 0.85rem; }
+  /* Two-row header: brand + search/lang/theme on row 1, the four section links
+     on row 2. Without the grouped list the links wrapped one at a time and
+     pushed the right-hand controls past the viewport edge at 320–390 px. */
+  .nav { padding: 0.7rem 1.25rem; gap: 0.55rem 0.7rem; }
+  .nav .brand { order: 1; font-size: 0.95rem; gap: 0.45rem; }
+  .nav .brand-mark { width: 22px; height: 22px; }
+  .search-toggle, .lang-switch, .theme-toggle { order: 2; }
+  .search-toggle { padding-inline: 0.55rem; }
+  .lang-switch { padding: 0.25rem 0.45rem; }
+  .theme-toggle { padding: 0.25rem 0.5rem; }
+  .nav-links { order: 3; flex: 0 0 100%; gap: 0.9rem; flex-wrap: wrap; row-gap: 0.35rem; }
   h1 { font-size: 1.7rem; }
   h2 { font-size: 1.25rem; }
   /* Related grid: one full-width card per row on phones, first four only. */