/**
 * The same contract core's `site-icon` keeps: the call site gives the box, the mark fills it.
 *
 * Restated here rather than inherited because registering this tag replaces core's element whole —
 * its stylesheet included — so anything the call sites rely on has to be answered again. They size
 * `site-icon` and nothing below it.
 */
site-icon {
  display: block;
  color: var(--text);
  line-height: 0;
}

/**
 * `object-fit` because the two marks are not the same shape. Core's flame is drawn in a 100x140 box
 * and the boxes around the site are cut for it; this one is square. Fitting inside the box keeps the
 * mark round in a 24x32 slot instead of stretching it into an egg, and centres what is left over.
 */
site-icon > svg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}