@layer components {
  .brand-clearspace {
    width: min(100%, var(--brand-width));
    aspect-ratio: var(--brand-ratio);
    box-shadow: inset 0 0 0 1px var(--ui-line-divider);
    background: repeating-linear-gradient(-45deg, transparent 0 5px, var(--ui-line-hair) 5px 6px);
    place-items: center;
    display: grid;
    position: relative;
  }

  .brand-clearspace[data-artwork="mark"] {
    --brand-width: 24rem;
    --brand-ratio: 336.6 / 240;
    --brand-fill: calc(216.6 / 336.6 * 100%);
  }

  .brand-clearspace[data-artwork="logotype"] {
    --brand-width: 40rem;
    --brand-ratio: 1397.53 / 330.26;
    --brand-fill: calc(1197.53 / 1397.53 * 100%);
  }

  .brand-clearspace > img {
    z-index: 1;
    width: var(--brand-fill);
    background: var(--ui-surface-stage);
    height: auto;
    box-shadow: 0 0 0 1px var(--ui-line-contour);
    position: relative;
  }

  .brand-clearspace > span {
    color: var(--ui-text-muted);
    font: var(--ui-weight-regular) .6875rem/1.4 var(--font-family-mono);
    position: absolute;
    top: .375rem;
    left: .5rem;
  }

  .brand-minimums {
    justify-content: center;
    align-items: end;
    gap: var(--ui-space-xl) var(--ui-space-2xl);
    flex-wrap: wrap;
    display: flex;
  }

  .brand-minimums > figure {
    justify-items: center;
    gap: var(--ui-space-sm);
    margin: 0;
    display: grid;
  }

  .brand-minimums img {
    width: auto;
    height: var(--brand-height);
    display: block;
  }

  .brand-typefaces {
    gap: var(--ui-space-lg);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    width: 100%;
    display: grid;
  }

  .brand-typefaces > div {
    align-content: start;
    gap: 2px;
    display: grid;
  }

  .brand-typefaces > div > span {
    margin-bottom: var(--ui-space-md);
    color: var(--ui-text-strong);
    font-size: 3.25rem;
    font-weight: var(--ui-weight-regular);
    letter-spacing: -.02em;
    line-height: 1;
  }

  .brand-typefaces > div > span:lang(zh) {
    letter-spacing: 0;
  }

  .brand-typefaces > div > b {
    color: var(--ui-text-strong);
    font-size: var(--ui-text-small);
    font-weight: var(--ui-weight-medium);
  }

  .brand-typefaces > div > small {
    color: var(--ui-text-muted);
    font-size: var(--ui-text-caption);
    line-height: var(--ui-leading-caption);
  }

  .brand-mono {
    font-family: var(--font-family-mono);
  }

  .brand-gold {
    gap: var(--ui-space-sm);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
    width: 100%;
    display: grid;
  }

  .brand-gold [data-signal] {
    background: var(--color-amber-40);
  }

  .brand-gold > .ui-swatch {
    gap: var(--ui-space-sm);
    box-shadow: none;
    background: none;
    padding: 0;
  }

  .brand-gold > .ui-swatch > .ui-swatch-paint {
    border-radius: var(--ui-radius-lg);
    height: 5rem;
  }

  .brand-gold > .ui-swatch > figcaption {
    padding: 0;
  }

  .brand-downloads {
    gap: var(--ui-space-md);
    margin: var(--line) calc(var(--bleed) * -1);
    display: grid;
  }

  @media (width >= 40rem) {
    .brand-downloads {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .brand-kit {
    align-items: center;
    gap: var(--ui-space-sm) var(--ui-space-md);
    margin-block: var(--line);
    flex-wrap: wrap;
    display: flex;
  }
}

@layer theme{:root,:host{--color-zinc-0:oklch(98.6% .0008 265);--color-zinc-95:oklch(19.4% .0019 265);--color-amber-40:oklch(83.04% .1701 81.1)}:root,:host{--font-family-mono:var(--font-mono, ui-monospace), SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}:root,:host{--color-code-function:var(--ui-code-function);--color-code-keyword:var(--ui-code-keyword);--color-code-number:var(--ui-code-number);--color-code-property:var(--ui-code-property);--color-code-string:var(--ui-code-string);--color-code-surface:light-dark(var(--color-zinc-0), var(--color-zinc-95))}:root,:host{--font-mono:"IBM Plex Mono"}}