/* THE WORDMARK: ONE COMPONENT (emit, Stage A, 26 Sept 2026).
   Every page that shows the name as a mark uses <span class="st-wordmark">emit</span> and this one file:
   the card heads (Listen Later player, live player, studio), the page top bar (home, help, download,
   beta) and the "sent via" credit under the player. It replaces the text wordmark ACETATE.
   THE NEW LOGO (Sid, 30 Oct 2026): his horizontal logo, brand/emit-logo-horizontal.svg, copied byte for
   byte from his own vector files and never redrawn, orientation as supplied (the triangle points inwards,
   towards the word). It is split in two files so the letters can take the page's colour and the triangle
   keeps its own: emit-logo-letters.svg holds the four letter paths and emit-logo-triangle.svg the
   triangle's path, each with the original's svg line, viewBox and coordinates, so the halves register.
   The letters are drawn through a mask (::before) so they take the text colour of wherever they sit,
   hover included. The triangle is a picture on the same box (::after), #E46F40 always, never on hover.
   On a light ground the letters are #1D1D1B: an ancestor with .on-light sets them (--wm-ink).
   The word "emit" stays in the element for screen readers and find-in-page, moved out of view.
   Nothing is cropped: the file's drawing fills its own viewBox (x 0 to 541.491 and y 0 to 139.513 of a
   541.491 by 139.513 canvas, measured on a render), so the element is 541.491 by 139.513 units and
   both layers are 100% by 100% of it, placed at 0 0.
   Size is set by font-size, as the old text mark was (every context keeps its font-size rule):
   the mark is .9em tall. */
.st-wordmark{
  display:block; position:relative; height:.9em; width:calc(.9em * 541.491 / 139.513); margin:0 auto; padding:0;
  font-size:31px; line-height:1; letter-spacing:0; text-transform:none; white-space:nowrap;
  overflow:hidden; text-indent:110%; color:#fff;
}
/* the letters: the text colour (or --wm-ink) through the letters' mask */
.st-wordmark::before{ content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background-color:var(--wm-ink, currentColor);
  -webkit-mask:url(emit-logo-letters.svg) no-repeat 0 0 / 100% 100%;
          mask:url(emit-logo-letters.svg) no-repeat 0 0 / 100% 100%;
}
/* the triangle: its own orange, the same box, size and place as the letters */
.st-wordmark::after{ content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background:url(emit-logo-triangle.svg) no-repeat 0 0 / 100% 100%;
}
/* the stacked logo (Sid, 30 Oct: the about page's lineage tile): his stacked file split the same way, viewBox
   0 0 606.34 579.899. As wide as the horizontal mark at the same font-size, so each context keeps its size rule */
.st-wordmark.is-stacked{ width:calc(.9em * 541.491 / 139.513); height:calc(.9em * 541.491 / 139.513 * 579.899 / 606.34); }
.st-wordmark.is-stacked::before{ -webkit-mask-image:url(emit-logo-stacked-letters.svg); mask-image:url(emit-logo-stacked-letters.svg); }
.st-wordmark.is-stacked::after{ background-image:url(emit-logo-stacked-triangle.svg); }
/* a light ground: put .on-light on the ground (a page, a card) and the letters turn #1D1D1B there */
.on-light{ --wm-ink:#1D1D1B; }
/* in the top bar the link carries the size (--topbar-mark) and the hover colour */
.sb-tbwm .st-wordmark{ font-size:inherit; display:inline-block; margin:0; vertical-align:middle; }
/* inside the "sent via" credit line, at the line's own size */
.vc-pf1 a .st-wordmark{ font-size:inherit; display:inline-block; margin:0; height:.95em; width:calc(.95em * 541.491 / 139.513); vertical-align:-.1em; }