/* The CANA wordmark, as the sign painter and the bag set it.
 *
 * Three things distinguish it from the letters alone, and all three are in
 * the shop's own artwork: a four-pointed copper star inside the bowl of the
 * C, a copper arc filling the counter of each A, and letters set close rather
 * than widely tracked. Everything is in em, so the mark scales with whatever
 * font-size it is given.
 */

.wm {
  display: inline-block;
  /* Inherits family, weight, size and colour from whatever sets the
   * wordmark — only the tracking is the mark's own, because the shop's
   * artwork sets the letters close. */
  letter-spacing: 0.06em;
  text-indent: 0.06em;
  line-height: 1;
  white-space: nowrap;
}

.wm i { font-style: normal; position: relative; display: inline-block; }

/* The star sits just right of the C's stem, on the cap-height centre line. */
.wm-c::after {
  content: '';
  position: absolute;
  /* Placed from the measured ink of Playfair's C, not by eye. At line-height
   * 1 the baseline sits 0.902em below the box top; the cap is 0.725em tall,
   * so the bowl's centre is 0.545em down. The star sits a shade right of that
   * centre, as it does in the shop's artwork, because a C opens to the right. */
  left: 0.25em;
  top: 0.435em;
  width: 0.22em;
  height: 0.22em;
  background-color: var(--brass);
  -webkit-mask: url('star.svg') center / contain no-repeat;
  mask: url('star.svg') center / contain no-repeat;
}

/* The arc tucked under each A's apex, following the crossbar. */
.wm-a::after {
  content: '';
  position: absolute;
  /* The A's ink centre falls within a pixel of the box centre, so 50% is
   * right; the arc sits in the counter just clear of the baseline. */
  left: 50%;
  bottom: 0.13em;
  width: 0.30em;
  height: 0.15em;
  transform: translateX(-50%);
  background-color: var(--brass);
  -webkit-mask: url('a-arc.svg') center / contain no-repeat;
  mask: url('a-arc.svg') center / contain no-repeat;
}