/**
 * The element is a frame; the canvas fills it. Sizing is the caller's — the
 * header gives it 32px, the hero gives it an aspect-ratio box — because the
 * grid resolves against whatever box it lands in.
 *
 * `color` is the one thing the logic reads back out of the cascade: it is the
 * flame's ink, so the mark follows the theme without knowing a theme exists.
 */
brand-flame {
  display: block;
  color: var(--text);
  line-height: 0;
}

brand-flame [flame] {
  display: block;
  width: 100%;
  height: 100%;
}

/* Nothing to wireframe: the mark is decoration, and a grey box in its place
   says less than the mark itself. */
brand-flame[skeleton] {
  opacity: 0.35;
}