style(brand): swap appbar wordmark to Saira variable, weight 300, sentence case

apps/web/app/globals.css

@@ -12,28 +12,32 @@
   src: url("/fonts/Fraunces-Variable.woff2") format("woff2");
 }
 
-/* Logotype face used ONLY by the appbar brand mark (Tournamental
- * FWC2026 in the top-left). Fraunces was reading as too editorial
- * next to the gold ball icon; Archivo Black is a heavy geometric
- * sans deliberately designed as a Helvetica-Bold-adjacent face,
- * which gives the wordmark the squarish Pantone-card weight Tim
- * was after. Two woff2 subsets (latin + latin-ext) total ~33KB
- * and only fetch when the `.vt-logotype` rule is matched, so the
- * body font stack is unaffected. Tim 2026-06-05. */
+/* Logotype face used ONLY by the appbar + drawer brand mark.
+ * Fraunces was reading as too editorial next to the gold ball
+ * icon; Tim 2026-06-05 picked Saira (regular width, variable
+ * weight axis 100..900) for a finer, modern brand mark. The
+ * variable woff2 means DevTools weight scrubbing actually works
+ * (the previous Archivo Black attempt was single-weight, which
+ * is why scrolling 400 -> 300 -> 200 in DevTools didn't visibly
+ * lighten the mark). Two subsets (latin + latin-ext) total
+ * ~58KB and only fetch when the `.vt-appbar-wordmark` or
+ * `.vt-drawer-brand-name` rule is matched. */
 @font-face {
-  font-family: "Archivo Black";
+  font-family: "Saira";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 100 900;
+  font-stretch: 100%;
   font-display: swap;
-  src: url("/fonts/ArchivoBlack-Latin.woff2") format("woff2");
+  src: url("/fonts/Saira-Variable-Latin.woff2") format("woff2");
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
 @font-face {
-  font-family: "Archivo Black";
+  font-family: "Saira";
   font-style: normal;
-  font-weight: 400;
+  font-weight: 100 900;
+  font-stretch: 100%;
   font-display: swap;
-  src: url("/fonts/ArchivoBlack-LatinExt.woff2") format("woff2");
+  src: url("/fonts/Saira-Variable-LatinExt.woff2") format("woff2");
   unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
 

apps/web/components/shell/shell.css

@@ -262,19 +262,18 @@
 .vt-appbar-wordmark {
   color: var(--vt-fg-strong, #ffffff);
   white-space: nowrap;
-  /* Tim 2026-06-05: swap the editorial Fraunces face out of the
-   * appbar wordmark only. Archivo Black is a heavy geometric sans
-   * designed as a Helvetica-Bold-adjacent face, which sits as a
-   * logotype next to the gold ball mark in the Pantone tradition.
-   * Uppercase + tighter tracking + reduced size so the wordmark
-   * keeps its 56px row budget without overflowing. The body
-   * editorial Fraunces is untouched; only this rule is overridden. */
-  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif !important;
-  font-weight: 400 !important;
+  /* Tim 2026-06-05: Saira variable, light weight (300), regular
+   * width, sentence case. Variable axis is preserved so DevTools
+   * weight scrubbing actually moves the rendered weight. The
+   * `!important` flags beat the editorial `.vt-wordmark` utility
+   * still applied on the same span; body Fraunces is unaffected. */
+  font-family: "Saira", "Helvetica Neue", Arial, sans-serif !important;
+  font-weight: 300 !important;
+  font-stretch: 100%;
   font-variation-settings: normal !important;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  font-size: 0.95rem;
+  text-transform: none;
+  letter-spacing: 0.005em;
+  font-size: 1.1rem;
 }
 .vt-appbar-wordmark-sub {
   /* "FWC2026" subtitle next to the brand wordmark. Reads as a
@@ -1159,12 +1158,13 @@
   /* Matches the appbar wordmark face so the drawer logo reads as
    * the same brand mark, not as a second editorial heading. Tim
    * 2026-06-05. */
-  font-family: "Archivo Black", "Helvetica Neue", Arial, sans-serif;
-  font-weight: 400;
+  font-family: "Saira", "Helvetica Neue", Arial, sans-serif;
+  font-weight: 300;
+  font-stretch: 100%;
   font-variation-settings: normal;
-  text-transform: uppercase;
-  letter-spacing: 0.02em;
-  font-size: 0.95rem;
+  text-transform: none;
+  letter-spacing: 0.005em;
+  font-size: 1.1rem;
   line-height: 1;
 }