/* ============================================================
   Rokin — brand lockup
   THE single logo component. Every nav, footer, and brand slot
   in the codebase uses .brand-lockup and nothing else.

   Linked on every page, immediately after tokens.css.

   ── Why height-only sizing ──
   The lockup is 3.82:1 (1262x330 trimmed). Constrain HEIGHT and
   leave width:auto so the ratio can never be distorted. Never
   set both dimensions on this element.

   ── Light vs dark ──
   The artwork supplied was white-on-transparent only; the navy
   variant is generated from its alpha channel (see Plan.md
   §13.4). Pick by the surface behind it:
     rokin-lockup-light@2x.png  → navy / photographic backgrounds
     rokin-lockup-dark@2x.png   → white / cream backgrounds
   Getting this backwards makes the logo invisible, which is the
   single most likely visual regression in this codebase.

   Both files are 306x80 (2x); the browser scales them down, so
   one asset serves every size below.
   ============================================================ */

.brand-lockup {
  display: block;
  height: 40px;          /* nav default */
  width: auto;           /* never set this to a fixed value */
  flex-shrink: 0;
}

/* Footers, compact bars, secondary placements. */
.brand-lockup--sm { height: 32px; }

/* Dense contexts: printed receipts, table rows. */
.brand-lockup--xs { height: 22px; }