/* MapCall wordmark: header mark, opening layer and the cover that hides the page until the opening
   starts. Drawing and timing live in wordmark-motion.js; colours come from the page tokens. */
.wm-svg, #wm-intro {
  --wm-ink: var(--ink);
  --wm-paper: var(--paper);
  --wm-blue: #1d4ed8;
  --wm-land: #6f8a2a; --wm-block: rgba(255, 255, 255, .16); --wm-park: #4f6c1f; --wm-water: #3b82f6;
  --wm-road: #f7f3e8; --wm-call: #1d4ed8; --wm-signal: rgba(247, 243, 232, .8);
}
@media (prefers-color-scheme: dark) {
  .wm-svg, #wm-intro {
    --wm-blue: #8aa8f0;
    --wm-land: #8aa63a; --wm-block: rgba(255, 255, 255, .13); --wm-park: #6a8a2c; --wm-water: #6f97f5;
    --wm-road: #f2eee2; --wm-call: #6b8ff0; --wm-signal: rgba(14, 20, 44, .55);
  }
}

/* header mark: the text stays in the link for assistive tech and tests; the drawing replaces it visually */
.brand .brand-mark { display: none; }
.brand--mark { display: flex; align-items: center; }
.brand .brand-text, .brand .brand-mark { font-size: inherit; margin: 0; color: inherit; vertical-align: baseline; }  /* beats the legacy `.brand span` rule */
.brand--mark .brand-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.brand--mark .brand-mark { display: block; }
body:not(.split-active) .masthead .brand.brand--mark { font-size: 26px; letter-spacing: normal; }
.brand-mark .wm-svg { display: block; width: 4.118em; height: 1.3em; overflow: visible; }

/* until the opening takes over, a cover (no layout change, no pointer events) keeps the page from flashing */
html[data-intro="pending"]::after { content: ""; position: fixed; inset: 0; z-index: 2147483000; background: var(--paper); pointer-events: none; }
#wm-intro { position: fixed; inset: 0; z-index: 2147483001; pointer-events: none; }
.wm-intro-veil { position: absolute; inset: 0; background: var(--paper); }
.wm-svg--intro { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }

.wm-fill { fill: var(--wm-ink); fill-opacity: 1; }
.wm-cover { fill: var(--wm-paper); }
.wm-stroke { fill: none; stroke: var(--wm-blue); stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1.02; stroke-opacity: 0; }
.wm-route { fill: none; stroke: var(--wm-blue); stroke-linecap: round; stroke-dasharray: 1; }
.wm-guide { fill: none; stroke: var(--wm-ink); stroke-opacity: .35; stroke-linecap: round; }
.wm-ping { fill: none; stroke: var(--wm-blue); opacity: 0; }
.wm-pinbody { fill: var(--wm-ink); }
.wm-pinhole { fill: var(--wm-paper); }
.wm-outline path { fill: none; stroke: var(--wm-ink); stroke-linejoin: round; stroke-width: inherit; }
.wm-land { fill: var(--wm-land); } .wm-block { fill: var(--wm-block); } .wm-park { fill: var(--wm-park); }
.wm-water { fill: none; stroke: var(--wm-water); stroke-width: 15; }
.wm-road { fill: none; stroke: var(--wm-road); stroke-width: 7; }
.wm-call { fill: var(--wm-call); }
.wm-ring { fill: none; stroke: var(--wm-signal); stroke-width: 4.5; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; }