:root {
  --brand-charcoal: #1C1B19;
  --brand-gold: #E9A817;
  --brand-warm-white: #FAF8F4;
  --brand-taupe: #BFB19F;
  --brand-surface: #FFFFFF;
  --brand-surface-alt: #F3EFE8;
  --brand-text-muted: #5A5147;
  --brand-text-soft: #6F6254;
  --brand-action: #75520A;
  --brand-action-hover: #5F4100;
  --brand-focus: #8A6100;
  --brand-border: #DED5CA;
  --brand-border-strong: #958572;
  --brand-gold-soft: #FFF2CE;
  --brand-danger: #8B2E1A;
  --brand-success: #456126;
  --brand-success-soft: #E8EEDC;
  --brand-warning: #73510E;
  --brand-warning-soft: #FBEFD6;
  --brand-font-ui: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  --brand-font-display: 'Instrument Serif', Georgia, serif;
  --brand-font-utility: 'JetBrains Mono', ui-monospace, monospace;
}

.bl-brand-surface {
  --active-bg: var(--brand-warm-white);
  --active-surface: var(--brand-surface);
  --active-surface-alt: var(--brand-surface-alt);
  --active-ink: var(--brand-charcoal);
  --active-ink-2: var(--brand-text-muted);
  --active-ink-3: var(--brand-text-soft);
  --active-line: var(--brand-border);
  --active-line-soft: #ECE6DE;
  --active-control-border: var(--brand-border-strong);
  --active-danger-border: var(--brand-danger);
  --active-accent: var(--brand-gold);
  --active-accent-contrast: var(--brand-charcoal);
  --active-accent-text: var(--brand-action);
  --active-accent-deep: var(--brand-focus);
  --active-accent-soft: var(--brand-gold-soft);
  --active-accent-tint: #FFF8E7;
  --active-focus: var(--brand-focus);
  --active-success: var(--brand-success);
  --active-success-soft: var(--brand-success-soft);
  --active-warn: var(--brand-warning);
  --active-warn-soft: var(--brand-warning-soft);
  --active-font-ui: var(--brand-font-ui);
  --bg: var(--active-bg);
  --surface: var(--active-surface);
  --surface-alt: var(--active-surface-alt);
  --ink: var(--active-ink);
  --ink-2: var(--active-ink-2);
  --ink-3: var(--active-ink-3);
  --line: var(--active-line);
  --line-soft: var(--active-line-soft);
  --accent: var(--active-accent-text);
  --accent-deep: var(--active-accent-deep);
  --accent-soft: var(--active-accent-soft);
  --accent-tint: var(--active-accent-tint);
  --warn: var(--active-warn);
  color: var(--brand-charcoal);
  font-family: var(--brand-font-ui);
}

.bl-brand-identity {
  min-width: 0;
  width: min(100%, 220px);
  max-width: 220px;
  display: inline-grid;
  justify-items: start;
  gap: 6px;
  color: var(--brand-charcoal);
  font-family: var(--brand-font-ui);
  line-height: 1;
}

.bl-brand-identity[data-brand-size='sm'] {
  width: min(100%, 154px);
  max-width: 154px;
}

.bl-brand-identity[data-brand-size='lg'] {
  width: min(100%, 320px);
  max-width: 320px;
}

.bl-brand-identity__detail {
  max-width: 100%;
  padding-inline: 3px;
  overflow: hidden;
  color: var(--brand-text-muted);
  font-family: var(--brand-font-utility);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .065em;
  line-height: 1.2;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.bl-sidebar-brand-identity {
  flex: 0 1 auto;
  margin-right: auto;
  overflow: hidden;
}

.bl-brand-identity__lockup {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
}

.bl-auth-brand {
  width: 100%;
  min-height: 96px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand-charcoal);
  font-family: var(--brand-font-ui);
}

.bl-auth-brand__art {
  width: min(100%, 320px);
  height: auto;
  display: block;
  object-fit: contain;
}

@media (max-width: 480px) {
  .bl-auth-brand {
    min-height: 0;
    margin-bottom: 24px;
  }
}