/*
 * The site's header (brand.js): the mark and the name centred over the page,
 * a size up from the app's native bar so it reads as the site's own. Every
 * size scales with --brand-scale, 1 unless the page says otherwise (the
 * profile page passes its --t); the horizontal padding follows the page's
 * --gutter when it has one. The column width is the page's business: each
 * stylesheet bounds .brand-bar with its own content column.
 */
sagacrew-brand {
  display: block;
}

.brand-bar {
  display: flex;
  justify-content: center;
  padding: calc(20px * var(--brand-scale, 1)) var(--gutter, 24px) 0;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: calc(10px * var(--brand-scale, 1));
  color: var(--color-foreground);
  font-size: calc(18px * var(--brand-scale, 1));
  line-height: calc(28px * var(--brand-scale, 1));
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  width: calc(32px * var(--brand-scale, 1));
  height: calc(32px * var(--brand-scale, 1));
  /* The platforms' own icon curvature, so the mark reads as an app icon. */
  border-radius: 22%;
}