/* Project brand: cube mark and wordmark (templates/components/brand.html).
 *
 * Loaded by base.html, so every page draws the brand the same way. The size
 * comes from the element that contains the wordmark; this file only adds the
 * brand face, colour and the slanted final "X".
 *
 * The company name is always set in Audiowide (regular weight only) and the
 * solid --color-company (#EBC42A). The font is served locally so the CSP
 * `font-src 'self'` holds and no third party is contacted.
 */

@font-face {
  font-family: "Audiowide";
  src: url("../fonts/Audiowide-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Plain-text mentions of the company name (footers, copyright lines). */
.brand-name {
  font-family: var(--font-company);
  color: var(--color-company);
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
}

.brand-mark {
  width: 1.9em;
  height: 1.9em;
  flex: 0 0 auto;
}

.brand-mark__top { fill: #ffd84d; }
.brand-mark__left { fill: #b08f14; }
.brand-mark__right { fill: #7a6208; }

.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
}

.brand-wordmark {
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
  font-family: var(--font-company);
  /* Audiowide ships one weight; asking for bold would make the browser
     smear a synthetic one. */
  font-weight: var(--font-weight-normal);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark__base,
.brand-wordmark__x {
  color: var(--color-company);
}

.brand-wordmark__x {
  display: inline-block;
  margin-inline-start: 0.04em;
  padding-inline-end: 0.08em;
  font-size: 1.16em;
  font-style: italic;
  transform: skewX(-8deg);
  transform-origin: bottom left;
}