/* public/brand/wordmark-font.css, the licensed webfont wordmark.

   This file is linked by src/html.js ONLY when the WORDMARK_FONT var is on, and it is the
   whole of the font swap. Nothing else in the site knows a font name for the wordmark.

   THE FILE. /fonts/wordmark.woff is the licensed webfont, copied byte for byte from the
   purchase. It is WOFF, not WOFF2, and it is the whole face, not a subset, because the
   vendor's EULA names the web formats it permits: "You can convert, place online and / or
   link to EOT, WOFF, and / or Web-Only TTF formats", and separately forbids "Reformatting
   the Font Software into other formats (other than the specified web format)". WOFF2 is not
   on the permitted list and a subsetter rewrites the file, so neither is allowed here.
   test/brand.test.mjs pins the shipped file's sha256 to the vendor's. See docs/BRAND.md.

   THE CONFINEMENT RULE (client instruction, confirmed twice): the licensed display face sets
   the large "BreakStream Arts" wordmark and nothing else. Nav, body copy, headings, the Poi
   history, the events calendar, labels and prices stay in EB Garamond and Jost.
   --wordmark-family is therefore declared ON .brand__lockup, not on :root. A custom property
   only inherits DOWNWARD, so `font-family:var(--wordmark-family)` written in any other rule
   resolves to nothing at all and the declaration is dropped. The face cannot leak, by
   construction rather than by discipline. test/brand.test.mjs asserts it stays that way:
   one @font-face, one declaring selector, one var() reader, same rule.
   See public/brand/README.md. */

@font-face{
  font-family:"BSA Wordmark";
  font-style:normal;
  font-weight:400;
  /* block, not swap: the logo is above the fold and a flash of body type where the lockup
     belongs is worse than 100 ms of nothing. */
  font-display:block;
  src:url(/fonts/wordmark.woff) format("woff");
}

@media(min-width:900px){
  .brand__lockup{
    /* The two knobs, set by eye against the box bsa.css already reserves for the outline
       lockup: block-size 19px at aspect-ratio 1460/100, so 277px wide. The licensed face is
       far wider per cap height than the open outline face (24.06:1 against 14.60:1 for the
       same sixteen letters), so it is fitted to that WIDTH, not to that height: at 15px the
       caps stand 11.2px and the wordmark runs 270px, inside the reserved box. Matching the
       19px cap height instead would run 458px and shove the nav into a scroll strip, and the
       header is bsa.css's to lay out, not this file's. */
    --wordmark-size:15px;
    --wordmark-track:0;
    --wordmark-family:"BSA Wordmark";

    /* The fallback is the open text stack, so the header still reads as words if the woff
       fails to load, is blocked, or the licence ever lapses. Nothing is traced or faked: it
       simply falls back to Jost, SIL OFL 1.1, which the site already ships and preloads. */
    font-family:var(--wordmark-family),var(--sans);
    font-size:var(--wordmark-size);
    letter-spacing:var(--wordmark-track);
    text-transform:uppercase;
    line-height:1;
    white-space:nowrap;
    color:var(--ink-1);
    /* bsa.css transitions background-color on hover, which paints the mask. Live text has no
       mask to paint, so the same hover has to move `color` instead or the brand goes inert. */
    transition:color var(--out) var(--ease-out);
    /* unpaint the mask the SVG lockup uses: this is live text now */
    background:none;
    aspect-ratio:auto;
    block-size:auto;
    inline-size:auto;
    -webkit-mask:none;
            mask:none;
  }
}

@media(max-width:899px){
  /* below 900px bsa.css swaps in the compact S3 monogram mask, which still carries the
     identity at a 390px header width. The text stays in the markup for the no-CSS render
     and hides under the mask. */
  .brand__lockup{color:transparent}
}