/* The Asaqefah house lockup.
 *
 * Loaded from base.html, because the landing page, the sign-in page and the
 * error pages all draw it and none of them should own the styling.
 *
 * The gold is the one decision here. Gateway's palette already carries three:
 * #C9A227 is the bright accent, #A8881F its darker step, #8A6D14 the one that
 * fills a button. The lockup takes the middle one — bright gold on white is
 * about 2:1 and reads as a highlighter, and the button gold is dark enough to
 * lose the metal. On the dark ground the relationship inverts, so it lifts to
 * the bright step there. */
:root {
    --bl-gold: #A8881F;
}
html[data-theme="dark"] {
    --bl-gold: #C9A227;
}

.bl {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px;          /* the one number that scales the whole lockup */
    line-height: 1;
    color: var(--bl-gold);
    user-select: none;
}

.bl-wordmark {
    block-size: 3.2em;
    inline-size: auto;
    display: block;
}

/* The rule fades at both ends rather than stopping dead — a hard-ended hairline
   at this size reads as a border somebody forgot to remove. */
.bl-rule {
    block-size: 1.5px;
    inline-size: 7.6em;
    margin-block: 0.8em;
    border-radius: 999px;
    background: linear-gradient(to right, transparent, currentColor 22%, currentColor 78%, transparent);
}

/* Wide tracking is what makes a short word read as a mark rather than a
   heading. Tracking is added after every letter, the last one included, so a
   centred word sits visibly left; the negative end margin gives that back. */
.bl-product {
    font-size: 1.15em;
    font-weight: 800;
    letter-spacing: 0.3em;
    margin-inline-end: -0.3em;
    text-transform: uppercase;
}

/* Inline: for a header band, where the stacked form is too tall. */
.bl-inline { flex-direction: row; align-items: center; gap: 0.7em; }
/* The wordmark is set against the product word, not against the em box. At
   2.2em the two Latin rows inside the mark came out visibly smaller than
   GATEWAY beside it and the pair read as a logo with a caption; 3.1em puts the
   ASAQEFAH row at the same weight on the page as the word it sits next to. */
.bl-inline .bl-wordmark { block-size: 3.1em; }
.bl-inline .bl-rule {
    block-size: 2.6em;
    inline-size: 1.5px;
    margin-block: 0;
    background: linear-gradient(to bottom, transparent, currentColor 22%, currentColor 78%, transparent);
}

.bl-sm { font-size: 11px; }

/* The header lockup lifts on hover, the way the old diamond mark did. */
a:hover > .bl-inline .bl-wordmark { transform: translateY(-2px); }
.bl-inline .bl-wordmark { transition: transform 0.18s ease; }

/* Only the landing header drops to the group mark alone on a narrow screen —
   it is competing there with a nav, a language picker and a sign-in button. The
   sidebar has the width, and a dashboard that says only ASAQEFAH would have
   stopped naming the product the person is actually in. */
@media (max-width: 560px) {
    .lp-brand .bl-inline .bl-rule, .lp-brand .bl-inline .bl-product { display: none; }
}