/* Brandmark: the one logo of Agency Simulation Research, on the site (nav,
   footer, 404) and in the capacity planner. The A icon next to the wordmark
   "Agency Simulation Research" in live Inter, set in capitals by CSS.

   Markup (the link names itself; the text inside stays in sentence case):
     <a class="brandmark" href="/" aria-label="Agency Simulation Research">
       <img class="brandmark-icon" src="/assets/brand/favicon.svg" alt="" width="18" height="18">
       <span class="brandmark-text">Agency Simulation Research</span>
     </a>

   Size: one custom property, --bm-size, the font size of the wordmark. Set it
   on the element or any ancestor. The icon (1.71em) and the gap (0.665em)
   follow, so the whole mark scales together. The default is the planner
   header's size: 0.78 x clamp(13.5px, 0.84vw, 17px), and 0.7 x 14px at 900 px
   and below.

   Icon: /assets/brand/favicon.svg (the grid-snapped small master on its ink
   tile) while the icon renders below 32 px, /assets/brand/mark.svg at 32 px
   and up (logo/brand.md), so from --bm-size 18.7px. Add .brandmark--mark with
   mark.svg: its A fills 50 of 64 units where the favicon's fills 48, so a
   1.64em box with a 0.64em gap keeps the A at the same height and distance
   from the text. (--bm-icon and --bm-gap carry the two lengths.)

   Colour: --bm-fg, hover --bm-fg-hover. Unset, they fall back to the page's
   own tokens: the planner's --text-2 or the site's --text-soft, then --text.

   .brandmark-word is the lowercase "agencysims.dev" of the home page intro
   (font size --bm-word, default 1.8em); .brandmark-tld is its muted ".dev". */

.brandmark {
  display: inline-flex;
  align-items: center;
  gap: var(--bm-gap, 0.665em);
  font-family: var(--bm-font, var(--font-sans, var(--font, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif)));
  font-size: var(--bm-size, clamp(10.53px, 0.6552vw, 13.26px));
  font-weight: 650;
  font-style: normal;
  line-height: normal;   /* as the planner header had it: the capitals sit a pixel lower than with 1 */
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bm-fg, var(--text-2, var(--text-soft, #C5CBCF)));
  text-decoration: none;
}
@media (max-width: 900px) {
  .brandmark { font-size: var(--bm-size, 9.8px); }
}
a.brandmark:hover { color: var(--bm-fg-hover, var(--text, #EEEAE2)); }

.brandmark-icon {
  display: block;
  flex: none;
  width: var(--bm-icon, 1.71em);
  height: var(--bm-icon, 1.71em);
  max-width: none;
}
.brandmark--mark { --bm-icon: 1.64em; --bm-gap: 0.64em; }

.brandmark-text { display: block; }

.brandmark-word {
  display: block;
  font-size: var(--bm-word, 1.8em);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  text-transform: none;
  color: var(--bm-word-fg, var(--text, #EEEAE2));
}
.brandmark-tld { color: var(--bm-tld-fg, var(--text-muted, var(--muted, #97A3AE))); }