/* The client's flame mark, sized for the three lockups it replaces.

   The mark is 0.4976 wide for every 1.0 tall, and the boxes Arcada Two reserved
   for the stock lucide icon were square (18x18, 28x28, 16x16). Setting a square
   box here would squash it, so every rule sets height and lets width follow from
   the viewBox's own aspect ratio. `fill: currentColor` on the SVG means the
   surrounding `text-flame` / `text-ember` classes keep controlling the colour,
   which is what lets one file work in the light header and the dark footer. */

.brand-mark {
  display: block;
  height: 22px;
  width: auto;
  flex-shrink: 0;
  overflow: visible;
}

/* Nav lockup, sits inside the 32px glow circle beside the TORCH wordmark.
   Height drives the rendered width because the mark is 0.4976 wide per 1.0 tall,
   so this looks much smaller than its CSS height suggests. At 21px it came out
   about 10px wide and read as a faint sliver; 27px fills the glow circle without
   touching its edge. */
.brand-mark-nav {
  height: 27px;
}

/* Footer, 28px slot. */
.brand-mark-lg {
  height: 26px;
}

/* Footer wordmark. Sits beside 15px type, but the mark is only 0.4976 as wide as
   it is tall, so matching the type's height made it about 7px wide and it read as
   a speck rather than a logo. 20px keeps it visually equal to the wordmark
   without becoming taller than the line it sits on. */
.brand-mark-sm {
  height: 20px;
}

@media (max-width: 640px) {
  .brand-mark {
    height: 22px;
  }
  .brand-mark-nav {
    height: 25px;
  }
  .brand-mark-lg {
    height: 26px;
  }
  .brand-mark-sm {
    height: 19px;
  }
}