brand: the drawn Officer wordmark, unskewed

Replaces the old mark everywhere it is referenced — the header reads it through
--logo-src and every theme points at the same file, and the auth landing page and
the emailer read it directly, so one asset covers all three.

The CSS skew goes with it. That is where the old logo's slant came from, and
applying it to this one shears letterforms that were kerned pair by pair by hand
and signed off as finished. See landing/assets/brand/WORDMARK.md for the
construction.

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

public/officer-logo.svg

@@ -1,4 +1,4 @@
-<svg width="1200" height="240" viewBox="-20 40 1200 260" xmlns="http://www.w3.org/2000/svg">
+<svg xmlns="http://www.w3.org/2000/svg" width="900" height="300" viewBox="60 40 900 300">
   <defs>
     <filter id="shadow3d-main-officer">
       <feOffset dx="6" dy="6" in="SourceGraphic" result="offset1"/>
@@ -25,25 +25,26 @@
     </pattern>
 
     <mask id="textMaskOfficer">
-      <text x="580" y="220" text-anchor="middle" class="officer-text-main" fill="white">o<tspan dx="6" dy="30" letter-spacing="14">ff</tspan><tspan dx="-2" dy="-30">icer.dev</tspan></text>
+      <text x="510" y="220" text-anchor="middle" class="officer-text-main" fill="white">Of<tspan dx="16">f</tspan><tspan dx="10">i</tspan><tspan dx="10">c</tspan><tspan dx="10">e</tspan><tspan dx="10">r</tspan></text>
     </mask>
 
     <style>
       .officer-text-main {
-        font-family: system-ui, -apple-system, sans-serif;
+        font-family: system-ui, -apple-system, "System Font", ".SF NS", "Helvetica Neue", sans-serif;
         font-size: 140px;
-        font-weight: 900;
+        font-weight: 700;
         fill: #F4C430;
         stroke: #14532D;
         stroke-width: 3;
         paint-order: stroke fill;
-        letter-spacing: -2px;
-        text-transform: lowercase;
+        letter-spacing: 8px;
+        font-variant-ligatures: none;
+        font-feature-settings: "liga" 0, "clig" 0, "dlig" 0;
       }
     </style>
   </defs>
 
-  <text x="580" y="220" text-anchor="middle" class="officer-text-main" filter="url(#shadow3d-main-officer)">o<tspan dx="6" dy="30" letter-spacing="14">ff</tspan><tspan dx="-2" dy="-30">icer.dev</tspan></text>
+  <text x="510" y="220" text-anchor="middle" class="officer-text-main" filter="url(#shadow3d-main-officer)">Of<tspan dx="16">f</tspan><tspan dx="10">i</tspan><tspan dx="10">c</tspan><tspan dx="10">e</tspan><tspan dx="10">r</tspan></text>
 
   <rect x="0" y="0" width="1160" height="300" fill="url(#gridPatternOfficer)" mask="url(#textMaskOfficer)"/>
 </svg>

src/apps/officer-web/Screens/Dashboard/Layout/Header/Header.tsx

@@ -81,7 +81,10 @@ export function Header({ dockItems, hidden }: HeaderProps) {
               role="img"
               aria-label="Officer"
               className="h-8 md:h-12 w-24 md:w-36 bg-contain bg-left bg-no-repeat"
-              style={{ backgroundImage: logo ? `url(${logo})` : 'none', transform: 'skew(-15deg, -2deg)' }}
+              /* No skew. The wordmark is drawn, kerned pair by pair, and shipped as the finished mark —
+                 shearing it in CSS was how the OLD logo got its slant, and doing it to this one distorts
+                 letterforms that were adjusted by hand. See landing/assets/brand/WORDMARK.md. */
+              style={{ backgroundImage: logo ? `url(${logo})` : 'none' }}
             />
           </Link>
         </div>

src/workspaces/components/Logos/DevSvgLogo.tsx

@@ -9,7 +9,7 @@ export function OfficerIconLogo({ size = 'xl' }: SvgLogoProps) {
     <img
       src="/officer-logo.svg"
       alt="Officer Icon"
-      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+      style={{ width: config.width, height: 'auto' }}
     />
   );
 }

src/workspaces/components/Logos/PastilhasSvgLogo.tsx

@@ -18,7 +18,7 @@ export function OfficerSvgLogoRegular({ size = 'xl' }: SvgLogoProps) {
     <img
       src="/officer-logo.svg"
       alt="Officer Logo"
-      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+      style={{ width: config.width, height: 'auto' }}
     />
   );
 }
@@ -30,7 +30,7 @@ export function OfficerSvgLogoSquare({ size = 'xl' }: SvgLogoProps) {
     <img
       src="/officer-logo.svg"
       alt="Officer Logo"
-      style={{ width: config.width, height: 'auto', transform: 'skew(-15deg, -2deg)' }}
+      style={{ width: config.width, height: 'auto' }}
     />
   );
 }