/**
 * The logo lockup.
 *
 * logo.png is 1600×900 with the artwork sitting in the middle of it: the ink
 * runs x 255–1441, y 245–606, which is 1187×362 with margins of 16% left, 10%
 * right, 27% top and 33% bottom. Those margins are transparent, so they cost
 * nothing to look at — but they are not symmetric, and sizing the image by
 * height alone leaves the logo floating small in a box four times its height.
 *
 * So the box is the shape of the ink, and the image is placed inside it by the
 * measured offsets. Every number below is that measurement, as a percentage of
 * the box, and nothing is cropped: the whole logo shows, edge to edge.
 *
 *   width  1600 / 1187 = 134.79%   (of the box's width)
 *   left   -255 / 1187 = -21.48%
 *   top    -245 / 900 of the image's own height, which works out at -67.6% of
 *          the box's height
 *
 * A page sets --logo-h and gets a logo that tall. Re-measure if the artwork is
 * ever re-exported: tools/measure-logo.mjs prints these numbers.
 */

.logo-lockup {
  --logo-h: 44px;
  position: relative;
  height: var(--logo-h);
  /* Width comes from the ratio, not from whatever the page set on the element
     this replaces: brand.css sizes its old square mark with a width clamp, and
     that clamp would squeeze this to a sliver. */
  width: auto;
  aspect-ratio: 1187 / 362;
  overflow: hidden;
  flex: 0 0 auto;
  display: block;
}

.logo-lockup img {
  position: absolute;
  display: block;
  width: 134.79%;
  height: auto;
  left: -21.48%;
  top: -67.6%;
}

/**
 * The mark on its own, without the wordmark.
 *
 * icon-mark.png comes out of tools/make-icons.mjs already cropped to its own
 * ink and centred in a square, so unlike the lockup above it needs no window
 * and no measured offsets — there is nothing to crop. A page sets --logo-h
 * and gets a mark that tall and that wide.
 *
 * The width is stated rather than left to the image because brand.css sizes
 * its old square mark with a clamp, and that clamp would win here.
 */
.logo-mark {
  --logo-h: 44px;
  height: var(--logo-h);
  width: var(--logo-h);
  flex: 0 0 auto;
  display: block;
}

.logo-mark img {
  display: block;
  width: 100%;
  height: 100%;
}