/* Categoria: componentes. components; composição e estados deste módulo. */
/* Componentes de apresentação compartilhados; composição fica por página. */
.ui-skip-link {
    position: fixed;
    z-index: 30;
    top: 8px;
    left: 8px;
    padding: 12px 16px;
    transform: translateY(calc(-100% - 16px));
    background: var(--cream);
    color: var(--deep);
}

.ui-skip-link:focus {
    transform: translateY(0);
}

.ui-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--forest);
    text-decoration: none;
}

.ui-brand__mark {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: var(--olive);
    font-size: 24px;
    line-height: 1;
}

.ui-brand__mark--map {
    display: block;
    border: 0;
    border-radius: 0;
}

.ui-brand__name, .ui-brand__sub {
    display: block;
    line-height: 1.25;
}

.ui-brand__name {
    font: 600 19px var(--font-display);
}

.ui-brand__sub {
    margin-top: 3px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
}

.ui-brand--inverse {
    color: var(--white);
}

.ui-brand--inverse .ui-brand__mark {
    color: var(--gold);
}