/**
 * The mark and the wordmark, in the two arrangements the site actually uses:
 * a row in the header, and a stack on the pages that are nothing but a form.
 *
 * Sizing is CSS rather than an attribute because `brand-flame` resolves its grid
 * against the box it is given — so a bigger logo is a bigger box, and the dither
 * follows on its own.
 */
site-logo {
  display: inline-flex;
}

site-logo [logo] {
  display: flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  text-decoration: none;
  color: var(--text);
}

site-logo [mark] {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 32px;
  height: 32px;
}

site-logo [mark] brand-flame {
  width: 100%;
  height: 100%;
}

site-logo [word] {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* A logo given no name is the mark alone, rather than the mark and a gap. */
site-logo [word]:empty {
  display: none;
}

/**
 * `[stacked]` — the auth pages, where the logo is the only thing above the
 * heading and has the width of the card to sit in. Bigger, centred, and with the
 * name under the mark rather than beside it.
 */
site-logo[stacked] [logo] {
  flex-direction: column;
  gap: 14px;
}

/* The flame is drawn in a 100×140 box, so a square gives it a third of the
   width back as air. The stacked mark is sized to the shape instead, which puts
   it within a few pixels of the 72px artwork it replaces. */
site-logo[stacked] [mark] {
  width: 56px;
  height: 72px;
}

/* Muted where the page has a heading of its own. In the header the wordmark is
   the only name on the row and takes the page's ink; on an auth page it sits
   above "SIGN IN" in the same tracked mono, and two equals read as neither. */
site-logo[stacked] [word] {
  font-size: 12px;
  letter-spacing: 0.2em;
  color: var(--text2);
}