/* ============================================================================================
   THE ONE WORDMARK (owner's rulings R146 and D56, 2026-10-07). Wherever ZANTŌ is the LOGO, the page
   draws ONE file: /brand/zanto-wordmark.svg (DM Mono 400 at 0.30em, outlined to paths, so it can never
   fall back to another font or be retyped differently). Wherever ZANTŌ is a word in a sentence, a
   title, metadata or alt text, it stays plain text.

   Markup: the logo's element is unchanged and wraps its text in <span class="zmark">ZANTŌ</span>.
   The span keeps the text (read by screen readers, and shown as is if this stylesheet or the mask is
   missing). Where the browser can mask, the text moves out of view and the file is painted in the
   element's own colour (currentColor), so every place keeps the size and ink it already has (D56 "A":
   the quiet grey mark on the inner pages stays quiet). The span sits on the parent's own baseline, so
   the parent's line, and so the page, does not move.

   Sizes are in em of the element's font-size: the file is 4.103em wide and 0.878em tall (cap height plus
   the macron) and sits 0.012em below the baseline (the O's overshoot), measured from the outline at 100 px.
   ============================================================================================ */
@supports ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .zmark {
    display: inline-block;
    width: 4.103em; height: 0.878em; vertical-align: -0.012em;
    margin-top: -0.25em;   /* the drawing never makes its line taller, even at line-height 1 (sign-in); paint is unaffected */
    letter-spacing: 0;
    overflow: hidden; white-space: nowrap; text-indent: 110%;   /* the text stays in the DOM, out of view */
    background-color: currentColor;
    -webkit-mask: url("/brand/zanto-wordmark.svg") center / contain no-repeat;
            mask: url("/brand/zanto-wordmark.svg") center / contain no-repeat;
  }
  /* The parent's tracking and its trailing-space padding were there to centre TYPED letters; the file
     carries its own spacing and is centred as drawn. :root lifts this one class above the page's own
     rule, which can come later in the cascade (auth.js injects its <style> at run time). */
  :root :has(> .zmark) { letter-spacing: 0; padding-left: 0; }

  /* The mark is a painted background, which two modes would otherwise drop, leaving no logo at all
     (the text is out of view): printing (backgrounds off by default) keeps it exact, and Windows High
     Contrast (forced colours) draws it in the system's own text colour. */
  .zmark { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @media (forced-colors: active) {
    .zmark { forced-color-adjust: none; background-color: CanvasText; }
  }
}