Web UI: Jarl logo and wordmark

Add the logo, a Viking jarl drawn like a woodcut whose spear-pointed crown
holds a DNS tree. It is generated by scripts/logo.py, which mirrors the
left half so the figure is exactly symmetrical, as logo.svg (white on a
Nordic-blue disc) and logo-white.svg. It links home in the header, sits on
the login page and is the favicon.

The login page shows an angular "JARL" wordmark drawn as SVG paths over a
rule with a "DNS" node, coloured from the theme. The header's "Jarl" uses
a self-hosted Cinzel Bold subset (SIL OFL); jarld serves .woff2 as
font/woff2.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

internal/web/static/assets/style.css

@@ -87,9 +87,23 @@ header.top {
   background: var(--panel); border-bottom: 1px solid var(--border);
   padding: 8px 16px; position: sticky; top: 0; z-index: 10;
 }
-header.top .brand { font-weight: 700; font-size: 17px; letter-spacing: 0.5px; color: var(--text); }
-header.top .brand span { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: 6px; }
-header.top .brand:hover { text-decoration: none; color: var(--accent); }
+/* The brand face: Cinzel Bold (SIL OFL, assets/fonts/Cinzel-OFL.txt),
+   subset to Latin and served by jarld itself. */
+@font-face {
+  font-family: "Jarl Cinzel";
+  src: url("fonts/cinzel-bold.woff2") format("woff2");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+.brand-name { font-family: "Jarl Cinzel", "Cinzel", "Trajan Pro", Georgia, serif; font-weight: 700; letter-spacing: 1.5px; }
+header.top .brand { display: inline-flex; align-items: center; gap: 8px; color: var(--text); text-decoration: none; }
+header.top .brand img { display: block; transition: transform 0.15s; }
+header.top .brand .brand-name { font-size: 20px; line-height: 1; padding-top: 2px; }
+header.top .brand .brand-version { color: var(--muted); font-size: 12px; align-self: flex-end; padding-bottom: 2px; }
+header.top .brand:hover { text-decoration: none; }
+header.top .brand:hover .brand-name { color: var(--accent); }
+header.top .brand:hover img { transform: scale(1.06); }
 nav.main { display: flex; gap: 2px; flex-wrap: wrap; }
 nav.main a { padding: 6px 10px; border-radius: var(--radius); color: var(--text); }
 nav.main a:hover { background: var(--info-soft); text-decoration: none; }
@@ -215,7 +229,12 @@ button:disabled { opacity: 0.5; cursor: not-allowed; }
 
 /* Login */
 .login { max-width: 360px; margin: 10vh auto; }
-.login h1 { font-size: 26px; text-align: center; margin-bottom: 4px; }
+.login-logo { display: block; margin: 8px auto 10px; }
+.login h1 { text-align: center; margin: 0 0 8px; }
+.wordmark { display: block; width: 220px; height: auto; margin: 0 auto; color: var(--text); }
+.wordmark-rule .fill { fill: var(--accent); }
+.wordmark-rule .line { fill: none; stroke: var(--accent); stroke-width: 2.6; }
+.wordmark-rule .dns { fill: var(--accent); font: 700 12.5px system-ui, sans-serif; letter-spacing: 0.5px; }
 .login .tag { text-align: center; color: var(--muted); margin-bottom: 18px; }
 .login form { display: flex; flex-direction: column; gap: 10px; }
 .login input { width: 100%; padding: 8px 10px; }
@@ -362,3 +381,7 @@ button.chip:hover { background: var(--accent-soft); border-color: var(--accent);
 .name-preview .msg, .will-add .msg { margin: 4px 0 0; padding: 3px 8px; }
 .will-add { margin-top: 8px; font-size: 13px; }
 .will-add code { font-family: var(--mono); background: var(--code-bg); padding: 1px 6px; border-radius: 4px; word-break: break-all; }
+@media (prefers-reduced-motion: reduce) {
+  header.top .brand img { transition: none; }
+  header.top .brand:hover img { transform: none; }
+}