/* -------------------------------------------------------------- wordmark --
   Lit by the app's signal: the letters' own white, the word in the light. */
.wordmark {
  display: flex;
  align-items: baseline;
  gap: 7px; /* the tracking, applied once and in one place */
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  user-select: none;
}

.wordmark-letter { color: var(--ink); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85); }

.wordmark-word {
  color: var(--signal-bright);
  /* Bloom: a hot core, a wide glow, and the widest a warm haze — the
     light the letters give off, not an outline round them. */
  text-shadow: 0 0 4px rgba(255, 240, 180, 0.9), 0 0 12px var(--signal), 0 0 26px var(--signal-glow), 0 0 52px rgba(255, 150, 20, 0.45), 0 0 90px rgba(255, 130, 10, 0.25);
  letter-spacing: 7px; /* its own letters breathe at the same rate */
  margin-right: -7px;  /* absorb the trailing letter-space */
}

/* The X is a four-needle star, taller than the caps either side and centred
   against them rather than sitting on the baseline: its points are the whole
   shape, and cropping the lower one to the baseline would leave a broken
   sparkle. The box is a letter's box, so the star lines up with the E and
   the O the way a letter would; a scale then lets the drawing overrun it
   symmetrically without moving its centre off the letters'. Sized up
   directly, the box grew taller than their line and the star hung below the
   baseline. */
.wordmark-x {
  width: 0.78em;
  height: 1em;
  align-self: center;
  transform: scale(1.34);
  overflow: visible;
  flex-shrink: 0;
  /* The same white as the E and the O — it is a letter in the word, not an
     ornament beside it — lit from behind in the signal's light. */
  fill: var(--ink);
  filter: drop-shadow(0 0 4px rgba(255, 240, 180, 0.9)) drop-shadow(0 0 12px var(--signal)) drop-shadow(0 0 30px var(--signal-glow)) drop-shadow(0 0 60px rgba(255, 150, 20, 0.4));
}