/* ============================================================
   Brand lockup system
   Spec: docs/superpowers/specs/2026-07-21-brand-lockup-system-design.md

   Wordmark is Inter 700, restoring the treatment used before the
   Michroma round (commit 1ce6021). The metrics below are that
   commit's parent, verbatim, so migrating markup to these classes
   changes structure without changing how anything looks.

   The mark inherits currentColor, so one markup serves dark and light.
   Never set width on .logo-mark; the 74x56 art must scale uniformly.

   Sizing lives here, not in the markup. Pick the variant that matches
   the context and set nothing inline:
     .logo          header gateway   mark 22px, wordmark 1.375rem
     .logo.sm       footer gateway   mark at cap height, wordmark 0.9375rem
     .logo.prod     product lockup   mark 0.75em, cropped glyph
     .logo.stack    stacked variant

   Gateway:  #F4F4F5 on dark, #0A0F1E on light
   Products: Command #6366F1, Scout #14B8A6, Anvil #D4950A
   ============================================================ */

.logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.75rem;
  font-size: 1.375rem;
  line-height: 1;
  text-decoration: none;
}

/* Mark matched to the wordmark's cap height so the gateway and the
   capitals in the wordmark read as the same height. Inter's cap height
   is 1490/2048 of the em, measured on the page as 0.7275. Baseline
   alignment puts the mark in the cap band; see .logo.sm below for why
   centering floats it high. */
.logo .logo-mark {
  height: 0.7275em;
  width: auto;
  flex-shrink: 0;
  display: block;
}

.logo .logo-wm {
  font-family: 'Inter', var(--font-b, var(--font-d, system-ui, sans-serif));
  font-weight: 700;
  letter-spacing: -0.03em;
}

/* Footer and other compact placements.

   The mark is matched to the wordmark's cap height rather than given a
   fixed px size, so the gateway and the capitals in "The Pylon Group"
   read as the same height. Inter's cap height is 1490/2048 of the em,
   measured on this page as 0.7275, which is where that number comes
   from. Baseline alignment puts the mark in the cap band; centering
   would float it high, because the descender in "y" pulls the line
   box's centre below the capitals. */
.logo.sm {
  gap: 0.625rem;
  font-size: 0.9375rem;
}

.logo.sm .logo-mark { height: 0.7275em; }

/* stacked variant */
.logo.stack {
  flex-direction: column;
  align-items: center;
  gap: 0.34em;
}

.logo.stack .logo-mark { height: 2.4em; }

/* Product lockup: Command, Scout, Anvil.

   Restores the pre-Michroma product treatment, which differed from the
   Pylon gateway in both weight and tracking. Products ran Inter 600 at
   -0.02em against the gateway's 700 at -0.03em, so both are overridden
   here rather than inherited. Values from 1ce6021^ assets/css/scout.css.

   The mark is the 22px square app icon, not the cropped glyph. Height
   alone is set; width:auto is inherited so the square art keeps its
   ratio without a width being pinned. */
.logo.prod {
  align-items: center;
  gap: 0.7rem;
  font-size: 1.0625rem;
}

.logo.prod .logo-mark { height: 22px; }

.logo.prod .logo-wm {
  font-weight: 600;
  letter-spacing: -0.02em;
}