/* The Blurt lockup — the mark and the word — on every page, from one place.
   Markup: src/partials/lockup.html (tools/build-lockup.mjs), served as {{LOCKUP}}.

   Geometry is the app's BrandMark (BrandKit.swift), in units of the mark's
   height --lk-h: a 42×22 slab, corner 6 (OverlayMetrics.slabRadius), four
   2.5-wide capsules [5, 9, 13, 7] 2.5 apart, the app's shadow and top highlight.
   The word is an outline whose viewBox is its ink, so align-items:center puts
   the middle of the INK on the middle of the mark — the owner's rule, checked
   by `node build.mjs --check` and measured in pixels by blurt-workspace
   docs/research/2026-09-11-site-redesign/work/delivery-2026-09-25/tools/lockup.mjs.

   Colours come from whichever stylesheet the page uses: it sets --lk-top,
   --lk-bottom and --lk-bar from its own tokens. Size: set --lk-h on .lockup. */

.lockup {
  --lk-h: 24px;
  display: inline-flex;
  align-items: center;
  gap: calc(var(--lk-h) * var(--lk-gap));
  vertical-align: middle;
  /* Its own layer: the mark (a box) and the word (an <svg>) snap to pixels by
     different rules, and on a line that falls between two pixels — the footer,
     below text of any height — they snapped half a pixel apart. Drawn in the
     lockup's own coordinates they keep the geometry's centring. */
  will-change: transform;
}
.lk-mark {
  flex: none;
  height: var(--lk-h);
  aspect-ratio: 42 / 22;
  border-radius: calc(var(--lk-h) * 6 / 22);
  background: linear-gradient(var(--lk-top), var(--lk-bottom));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
              0 calc(var(--lk-h) * .12) calc(var(--lk-h) * .56) rgba(0, 0, 0, .45);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--lk-h) * 2.5 / 22);
}
.lk-mark i {
  display: block;
  width: max(2px, calc(var(--lk-h) * 2.5 / 22));
  height: calc(var(--lk-h) * 9 / 22);
  border-radius: 999px;
  background: var(--lk-bar);
}
.lk-mark i:nth-child(1) { height: calc(var(--lk-h) * 5 / 22); }
.lk-mark i:nth-child(3) { height: calc(var(--lk-h) * 13 / 22); }
.lk-mark i:nth-child(4) { height: calc(var(--lk-h) * 7 / 22); }
.lk-word {
  display: block;
  flex: none;
  height: calc(var(--lk-h) * var(--lk-word));
  width: auto;
  overflow: visible;
  fill: currentColor;
}