/* Use the owner's supplied vector artwork without redrawing or font substitution. */
.site-header .brand,
.site-footer .brand,
.preview-brand {
  --brand-symbol-size: 44px;
  --brand-wordmark-width: 240px;
  --brand-gap: 12px;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  min-height: 44px;
  max-width: 100%;
  text-decoration: none;
}

.site-header .brand .brand-word,
.site-footer .brand .brand-word,
.preview-brand .brand-word {
  display: inline-flex;
  align-items: center;
  gap: var(--brand-gap);
  line-height: 1;
}

.site-header .brand .brand-wordmarks,
.site-footer .brand .brand-wordmarks,
.preview-brand .brand-wordmarks {
  display: inline-grid;
  flex: 0 0 var(--brand-wordmark-width);
  width: var(--brand-wordmark-width);
  align-items: center;
}

.site-header .brand .brand-symbol,
.site-footer .brand .brand-symbol,
.preview-brand .brand-symbol {
  display: block;
  flex: 0 0 var(--brand-symbol-size);
  width: var(--brand-symbol-size);
  height: var(--brand-symbol-size);
  max-width: none;
  object-fit: contain;
}

.site-header .brand .brand-wordmark,
.site-footer .brand .brand-wordmark,
.preview-brand .brand-wordmark {
  display: block;
  width: var(--brand-wordmark-width);
  height: auto;
  max-width: none;
  aspect-ratio: 891 / 104;
  object-fit: contain;
}

.site-header .brand :is(.brand-symbol-dark, .brand-wordmark-dark),
.site-footer .brand :is(.brand-symbol-dark, .brand-wordmark-dark),
.preview-brand :is(.brand-symbol-dark, .brand-wordmark-dark) {
  display: none;
}

/* The footer is a dark surface in both site themes. */
.site-footer .brand :is(.brand-symbol-light, .brand-wordmark-light),
:root[data-theme='dark'] :is(.site-header .brand, .preview-brand) :is(.brand-symbol-light, .brand-wordmark-light),
:root:is([data-design='obsidian'], [data-design='copper']) .site-header .brand :is(.brand-symbol-light, .brand-wordmark-light) {
  display: none;
}

.site-footer .brand :is(.brand-symbol-dark, .brand-wordmark-dark),
:root[data-theme='dark'] :is(.site-header .brand, .preview-brand) :is(.brand-symbol-dark, .brand-wordmark-dark),
:root:is([data-design='obsidian'], [data-design='copper']) .site-header .brand :is(.brand-symbol-dark, .brand-wordmark-dark) {
  display: block;
}

/* A palette preview explicitly controls its own surface, regardless of saved theme. */
:root[data-design='steel'] .site-header .brand :is(.brand-symbol-light, .brand-wordmark-light) {
  display: block;
}

:root[data-design='steel'] .site-header .brand :is(.brand-symbol-dark, .brand-wordmark-dark) {
  display: none;
}

.site-footer .brand {
  --brand-symbol-size: 40px;
  --brand-wordmark-width: 215px;
  --brand-gap: 10px;
}

.preview-brand {
  --brand-symbol-size: 36px;
  --brand-wordmark-width: 195px;
  --brand-gap: 10px;
}

@media (max-width: 1199px) {
  .site-header .brand {
    --brand-symbol-size: 40px;
    --brand-wordmark-width: 220px;
    --brand-gap: 10px;
  }
}

@media (max-width: 767px) {
  .site-header .brand {
    --brand-symbol-size: 36px;
    --brand-wordmark-width: 190px;
    --brand-gap: 9px;
  }

  .preview-brand {
    --brand-symbol-size: 32px;
    --brand-wordmark-width: 165px;
    --brand-gap: 8px;
  }
}

@media (max-width: 479px) {
  .site-header .brand {
    --brand-symbol-size: 28px;
    --brand-wordmark-width: clamp(100px, calc(100vw - 260px), 160px);
    --brand-gap: 7px;
  }

  .site-footer .brand {
    --brand-symbol-size: 36px;
    --brand-wordmark-width: 195px;
    --brand-gap: 9px;
  }

  .preview-brand {
    --brand-symbol-size: 28px;
    --brand-wordmark-width: 140px;
    --brand-gap: 7px;
  }
}

@media (max-width: 359px) {
  .site-header .brand {
    --brand-symbol-size: 26px;
    --brand-wordmark-width: 80px;
    --brand-gap: 6px;
  }

  .preview-brand {
    --brand-wordmark-width: 112px;
  }
}