.brand-lockup {
  --brand-logo-h: 1rem;
  --brand-logo-gap: .16em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--brand-logo-gap);
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.brand-logo-part {
  display: inline-block;
  flex: 0 0 auto;
  height: var(--brand-logo-h);
  width: calc(var(--brand-logo-h) * var(--brand-logo-ratio));
  background: currentColor;
  -webkit-mask: var(--brand-logo-mask) center / contain no-repeat;
  mask: var(--brand-logo-mask) center / contain no-repeat;
}

.brand-logo-part--ca-crown {
  --brand-logo-ratio: 4.4667;
  --brand-logo-mask: url("/static/img/logos/ca-crown.svg");
  color: var(--ca-metal);
}

.brand-logo-part--ca-alchemy {
  --brand-logo-ratio: 5.726;
  --brand-logo-mask: url("/static/img/logos/ca-alchemy.svg");
  color: var(--text-strong);
}

.brand-logo-part--ca-horizontal {
  --brand-logo-ratio: 10.158;
  --brand-logo-mask: url("/static/img/logos/ca-horizontal.svg");
  color: var(--text-strong);
}

.brand-logo-part--athanor-crown {
  --brand-logo-ratio: 4.4667;
  --brand-logo-mask: url("/static/img/logos/athanor-crown.svg");
  color: var(--ca-metal);
}

.brand-logo-part--athanor-word {
  --brand-logo-ratio: 5.737;
  --brand-logo-mask: url("/static/img/logos/athanor-word.svg");
  color: var(--text-strong);
}

.brand-logo-part--athanor-horizontal {
  --brand-logo-ratio: 10.342;
  --brand-logo-mask: url("/static/img/logos/athanor-horizontal.svg");
  color: var(--text-strong);
}

.brand-lockup--header {
  --brand-logo-h: 20px;
  --brand-logo-gap: .14rem;
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ca-lava-core) 62%, transparent))
          drop-shadow(0 0 34px color-mix(in srgb, var(--ca-lava-deep) 72%, transparent));
}

.brand-lockup--sheet {
  --brand-logo-h: .86em;
  --brand-logo-gap: .1em;
  transform: translateY(.02em);
}

.brand-lockup--heading {
  --brand-logo-h: clamp(1.85rem, 3.75vw, 3.45rem);
  --brand-logo-gap: clamp(.18rem, .45vw, .38rem);
  filter: drop-shadow(0 0 18px color-mix(in srgb, var(--ca-lava-core) 52%, transparent))
          drop-shadow(0 0 36px color-mix(in srgb, var(--ca-lava-deep) 58%, transparent));
}

.brand-lockup--about {
  --brand-logo-h: clamp(1.85rem, 3.5vw, 3.15rem);
  color: var(--text-strong);
}

.brand-lockup-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 900px) {
  .brand-lockup--header {
    --brand-logo-h: .92rem;
  }
}

@media (max-width: 520px) {
  .brand-lockup--about {
    --brand-logo-h: clamp(1.28rem, 7.8vw, 2rem);
  }

  .brand-lockup--heading {
    --brand-logo-h: clamp(1.35rem, 7.2vw, 2.2rem);
  }
}