/* ── Logo mark ──────────────────────────────────────────────────────────────
   ONE source of truth. The artwork lives in /img/stakk-mark.svg and is painted
   through a CSS mask, so it takes its colour from the surrounding text
   (currentColor). To change the logo everywhere - every page, every storefront,
   the embed widget - replace that one SVG file. Nothing else needs editing.

   To resize or respace it everywhere, change the two variables below.
   --sk-mark-h is 1.60x the Geist cap height (0.72em), so 1.152em. The mark is
   a rotated form, so its box is mostly empty air - matching the box to cap
   height makes the ink read far smaller than the number suggests.
   --sk-mark-gap is 0.43em, which is 20px against 46px type and scales down
   correctly at nav size. Never set either of these in fixed px.            */
:root{
  --sk-mark-h: 1.152em;
  --sk-mark-gap: .43em;
  --sk-mark-aspect: .8527;   /* width / height of the artwork */
  --sk-mark-src: url("/img/stakk-mark.svg");
}
.sk-mark, .logo .sk-mark{
  display: inline-block;
  height: var(--sk-mark-h);
  aspect-ratio: var(--sk-mark-aspect);
  width: auto;
  flex: none;
  /* The mask paints with currentColor, so colour is PINNED here, not inherited.
     Inheriting looks right until the mark sits somewhere whose text is not
     black, and then it silently takes that colour instead:
       - the dashboard topbar lockup is a bare <a> with no colour of its own, so
         the mark came out UA link blue, visited purple, and red while pressed;
       - the footer lockup on index / pricing / about / contact / orders sits in
         grey footer text, so the mark came out grey.
     The old inline <svg> hid all of this because every copy hardcoded
     fill:var(--sk-black). To put the mark on a dark ground, set colour at the
     call site - `.my-dark-bar .sk-mark{color:#fff}` - which is what the embed
     widget does. */
  color: var(--sk-black, #000);
  background: currentColor;
  -webkit-mask: var(--sk-mark-src) center / contain no-repeat;
          mask: var(--sk-mark-src) center / contain no-repeat;
}
/* The lockup: mark, then the gap, then the wordmark. */
.logo{ gap: var(--sk-mark-gap); }