/* ─────────────────────────────────────────────────────────────────────────
   Our logo — the lockup: the mark and the "DirectoryListing" wordmark in one
   image, 187×32 at 1x (public/assets/brand/wordmark-187.webp, cropped from
   tools/brand/wordmark-logo.webp by tools/brand/build-brand.mjs).

   HAND-MAINTAINED, never built (webpack bundles JS only — see CLAUDE.md). It
   is its own file rather than a block in app.css because four stylesheets draw
   the logo — home.css, app.css (get-started / signin), dashboard.css and
   paywall.css — and one rule copied into four files is one rule that drifts.
   It carries no colour at all, which is what let the landing swap its whole
   palette without the lockup noticing.
   templates/partials/brand.php is the markup; every surface that draws the
   logo includes that partial and loads this file.

   `display: flex` on the anchor is not decoration. The lockup is an <img>, and
   an inline-level image sits on the text baseline, which leaves the line's
   descender space under it — a 32px image in a 60px bar would push its box 4px
   taller than the image and sit that much high.
   ───────────────────────────────────────────────────────────────────────── */
.brand { display: flex; flex: none; text-decoration: none; color: inherit; }
/* Height only: the width follows the image's own intrinsic ratio, so the
   artwork's aspect ratio is stated once, in the file, and a re-export moves the
   width/height attributes in brand.php rather than this rule. (Pinning both
   would silently stretch the lockup on the day those two disagree.)

   32px is the height the mark drew at, so the wordmark moved into every header
   without moving anything around it, and it is the height on every surface: a
   lockup that resized per breakpoint would be a second aspect ratio to keep in
   step, and the bars it sits in all have the room — 60px or taller, and the
   narrowest column it lands in is the dashboard's 264px sidebar, where 187px
   plus its 18px gutters still leaves the row a margin. What sits NEXT to it
   degrades first if a bar does get tight (the wizard's meter drops its bar, and
   then its label, on a phone). The attributes on the <img> reserve that same
   box before the file decodes, so nothing reflows around it. */
.brand .brand-lockup { height: 32px; width: auto; flex: none; }