/* Halloway wordmark — the canonical brand lockup.
 *
 * "HALLOWAY" with a key standing in for the O. This stylesheet + wordmark.js
 * are the ONE source of truth for that lockup; never hand-inline the spans and
 * key SVG again. Render it with the <halloway-wordmark> element or
 * window.HallowayWordmark.html() (see wordmark.js).
 *
 * Resizable by design: every metric here is in `em`, so the lockup scales with
 * whatever `font-size` it inherits — set font-size on the element (or a parent)
 * to make it bigger or smaller; the key tracks the cap height automatically.
 * Colour comes from `currentColor`, so it takes the ink of its context.
 *
 * Shell-only (path absent in City Seekers); never required by a hunt engine. */

halloway-wordmark,
.halloway-wordmark {
  /* Inline so the lockup is layout-transparent — it flows exactly like the bare
     letters would, which keeps centred/justified contexts honest. */
  display: inline;
  font-weight: 600;
  letter-spacing: 0.42em;
  white-space: nowrap;
  color: inherit;
}

/* The key that takes the O's place. Sized to the cap height of the letters and
   seated so the top of its bow meets the cap line; the shaft reads as a slight
   descender. The SVG also carries width/height attributes (wordmark.js) as a
   no-CSS fallback, so it can never balloon to the default replaced-element box.
   These four values are the hardened look — change them only deliberately. */
.halloway-wordmark__key {
  display: inline-block;
  width: auto;
  height: 0.96em;
  vertical-align: -0.24em;
  margin-left: -0.38em;
  margin-right: 0.1em;
  /* Where a tilt scene publishes --hall-x (e.g. the entry hall), the key turns
     in its bow like a key in a lock; everywhere else --hall-x is 0 and it sits
     still — the lockup looks identical, just static. */
  transform: rotate(calc(var(--hall-x, 0) * 7deg));
  transform-origin: 50% 27%;
  transition: transform 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .halloway-wordmark__key {
    transform: none;
    transition: none;
  }
}