@layer components {
  .brand {
    display: inline-flex;
    align-items: center;
    gap: var(--logo-gap);
    font: 400 var(--logo-size)/1 var(--font-display);
    letter-spacing: var(--tracking-tight);
    color: var(--color-ink-display);
    white-space: nowrap;
  }

  .brand--primary,
  .brand--one-color,
  .brand--stacked {
    font-size: max(var(--logo-min-wordmark), var(--logo-size));
  }

  .brand__mark {
    flex: none;
    inline-size: calc(var(--logo-mark-scale) * 1em);
    block-size: calc(var(--logo-mark-scale) * 1em);
  }

  .brand__recede {
    color: var(--color-ink-faint);
  }

  .brand--mark .brand__mark {
    inline-size: 1em;
    block-size: 1em;
  }

  .brand--one-color,
  .brand--one-color .brand__recede {
    color: inherit;
  }

  .brand--stacked {
    flex-direction: column;
    gap: var(--logo-stacked-gap);
  }

  .brand--stacked .brand__mark {
    inline-size: calc(var(--logo-stacked-mark-scale) * 1em);
    block-size: calc(var(--logo-stacked-mark-scale) * 1em);
  }

  .brand--compact {
    gap: var(--space-4);
  }

  .brand--compact .brand__mark {
    inline-size: calc(var(--logo-compact-mark-scale) * 1em);
    block-size: calc(var(--logo-compact-mark-scale) * 1em);
  }

  .brand--compact .brand__word {
    display: grid;
    line-height: var(--logo-compact-leading);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
  }

  .brand--celebrate .brand__mark {
    color: var(--color-celebrate);
  }

  .brand--inverse,
  .brand--inverse .brand__recede {
    color: var(--color-ink-on-inverse);
  }

  /* The logo at the head of a page someone reaches signed out: it says where they are and leads
     to Exhale Vault. */
  .page-brand {
    --logo-size: var(--logo-min-wordmark);

    display: flex;
    max-inline-size: var(--measure);
    margin-inline: auto;
    padding: calc(var(--safe-top) + var(--space-7)) var(--gutter-fluid) var(--space-0);
  }

  .page-brand__link {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--tap-min);
    border-radius: var(--radius-xs);
    color: inherit;
    text-decoration: none;
  }

  .page-brand .brand {
    margin-inline-start: calc(var(--logo-mark-scale) * 1em * (var(--logo-mark-visible) - 1) / 2);
  }

  .page-brand:has(+ .new-conversation) {
    justify-content: center;
  }

  .page-brand:has(+ .new-conversation) .brand {
    margin-inline-start: var(--space-0);
  }

  .page-brand + .page-title {
    padding-block-start: var(--space-8);
  }

  .page-brand + .page-message {
    padding-block-start: var(--space-12);
  }
}