/* ── The FlopMAX lockup ──────────────────────────────────────────────────────
   The shield (static/assets/logo.svg, cropped tight to the shield) and the
   wordmark, one unit wherever the brand appears: the nav, the table's corner,
   the index hero and the home page. Markup comes from templates/macros/brand.html.
   Sizes are in em, so a lockup scales with the font-size its container sets.
   Loaded by base.html and home.html. docs/design-tokens.md, "Brand".
   ─────────────────────────────────────────────────────────────────────────── */

.brand-lockup {
    display: inline-flex;
    align-items: center;
    gap: 0.2em;                 /* tight: the shield belongs to the name */
    line-height: 1;
    color: var(--text-primary);
    text-decoration: none;
}

.brand-lockup img {
    flex: none;
    height: 1.12em;
    width: auto;
}

/* Saira italic, a touch wide: "Flop" semibold, "MAX" black in brand green. */
.wordmark {
    font-family: var(--font-brand);
    font-style: italic;
    font-stretch: 112%;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;        /* one inline box: "Flop" and "MAX" never split */
}

.wordmark .brand-max {
    font-weight: 900;
    color: var(--brand);
}

/* On a brand-green background "MAX" keeps the text colour; its weight alone
   carries it. */
.wordmark--on-brand .brand-max { color: inherit; }