/* The Tiny Quest wordmark, set in Baloo 2 like the logo board: TINY over QUEST, a pennant, two pines.
   Size it with font-size on .wm. Colours: --wm-a (TINY, pines) and --wm-b (QUEST). */
.wm {
  --wm-a: #1f3b2e; --wm-b: #b5541b;
  display: inline-flex; align-items: flex-end; gap: .08em;
  font-family: "Baloo 2", "Trebuchet MS", system-ui, sans-serif; font-weight: 800; line-height: .8;
  text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; text-decoration: none;
}
.wm-words { display: inline-grid; justify-items: center; }
.wm-tiny { position: relative; color: var(--wm-a); font-size: 1em; padding-right: .06em; }
.wm-quest { color: var(--wm-b); font-size: 1.16em; margin-top: -.02em; }
.wm-tiny b, .wm-quest b { display: inline-block; font-weight: inherit; }
.wm-tiny b:nth-child(1) { transform: rotate(-4deg) translateY(.02em); }
.wm-tiny b:nth-child(2) { transform: rotate(3deg); }
.wm-tiny b:nth-child(3) { transform: rotate(-2deg) translateY(-.03em); }
.wm-tiny b:nth-child(4) { transform: rotate(5deg); }
.wm-quest b:nth-child(odd) { transform: rotate(-2deg); }
.wm-quest b:nth-child(even) { transform: rotate(2.5deg) translateY(.02em); }
.wm-flag { position: absolute; right: -.18em; top: -.62em; width: .62em; height: .66em; }
.wm-flag path:first-child { fill: none; stroke: var(--wm-a); stroke-width: 1.6; stroke-linecap: round; }
.wm-flag path:last-child { fill: var(--wm-b); }
.wm-pine { width: .5em; height: 1.32em; fill: var(--wm-a); flex: none; margin-bottom: .04em; }
.wm-pine.r { width: .44em; height: 1.12em; }
.wm.is-reverse { --wm-a: #fff6e6; --wm-b: #f4a35f; }