/* ==========================================================================
   The logo
   ==========================================================================
   The mark is one partial used by every layout, so its styling is one file
   used by every layout too. It lived in home.css, which the signed-in pages do
   not load — so there the wordmark fell back to the body font in capitals and
   stopped looking like the logo. Load this before the page's own stylesheet;
   each of them still sets the colour it needs. */

.brand-logo {
    display: inline-flex;
    align-items: center;
    overflow: visible;
}

.brand-logo img,
.brand-logo__mark,
.brand-logo--mark {
    display: block;
    height: 22px;
    width: 22px;
    overflow: visible;
    flex: none;
}

/* The wordmark, set to sit with the star rather than against it. Fredoka is
   rounded where the mark is pointed, which is the contrast that makes a
   lockup read as one thing; Outfit at 800 was simply loud. Lower case, because
   the brand is written that way everywhere else. */
.brand-logo__word {
    font-family: Fredoka, Outfit, sans-serif;
    font-weight: 600;
    font-size: 23px;
    letter-spacing: -0.01em;
    text-transform: lowercase;
    color: #2B1B4E;
    line-height: 1;
}

.brand-logo__e {
    position: relative;
    display: inline-block;
}

.brand-logo__star {
    position: absolute;
    width: 18px;
    height: 18px;
    top: -0.58em;
    right: -0.62em;
    display: block;
    overflow: visible;
    pointer-events: none;
}