/* Vaulty logo sizing — render the brand mark larger in the header, hero and
   footer, and lift it off the square canvas it ships on.

   logo.png is a 1512x1512 square (that shape is what the favicon and Apple
   touch icon want), but the wordmark itself only occupies the middle 774px —
   the bands above and below it are transparent. With `object-fit: contain` in
   a square box, roughly half the box is empty padding and the mark renders at
   half the size the box suggests. Giving the element the artwork's own ratio
   and switching to `cover` crops exactly those empty bands, so the wordmark
   fills the box edge to edge with nothing clipped. */

.vlt-brand__logo,
.vlt-footer__logo,
.vlt-hero__logo {
  aspect-ratio: 1512 / 774;
  height: auto;
  object-fit: cover;
}

/* Header row is 64px tall; 92px wide lands the mark at ~47px, which still
   leaves room for the 1.05x `flame` pulse. */
.vlt-brand__logo {
  width: 92px;
}

.vlt-footer__logo {
  width: 150px;
}

.vlt-hero__logo {
  width: min(320px, 82vw);
  margin-bottom: 24px;
}

/* Podium and preview-card badges stay circular, so the mark keeps `contain`
   there and just grows within the circle. */
.vlt-podium__badge img,
.vlt-preview-card__badge img {
  width: 90%;
  height: 90%;
}

@media (max-width: 640px) {
  .vlt-brand__logo {
    width: 68px;
  }

  .vlt-footer__logo {
    width: 120px;
  }
}