The brand lockup spaces by the glyph, not by the image box

The gap between the mark and the divider read wider than the gap between the
divider and the section name, even though both were the same 10px. The mark is
a PNG carrying about 16% transparent padding, so a gap measured from the
image's box lands about 4px further from the glyph than the same number does
from a letterform -- and the eye measures from the glyph.

The divider owns the spacing on both sides now, 6px before and 10px after, so
the two gaps look equal even though they are not.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_0149rBWy7br1Z7bbz9NrQhEr

Co-Authored-By

Claude Opus 5 (1M context) <noreply@anthropic.com>

Claude-Session

https://claude.ai/code/session_0149rBWy7br1Z7bbz9NrQhEr

Deploy story

What this commit did to the running system — joined from the forge receipt chain, the part a commit page elsewhere cannot show.

Changed files

• modified assets/css/openagents.css

Diff

1 file changed, +8 -1

    display: flex;

    flex: none;

    align-items: center;

    gap: 10px;

    /* No gap here: the divider owns the spacing on both of its sides, because

       the two sides are not equal -- see `.sidebar-brand__divider`. */

    gap: 0;

    min-height: 52px;

    padding-inline: 20px;

  }

    width: 1px;

    height: 16px;

    flex: none;

    /* Not a symmetric gap. The mark is a PNG carrying about 16% transparent

       padding, so a gap measured from the image's box reads ~4px wider on that

       side than on the word's -- the eye measures from the glyph, not the box.

       6px plus that padding is the 10px on the right. */

    margin-inline: 6px 10px;

    background: var(--line-strong);

  }