/* BRAND-1: THE LOCKUP. One make for every page (the landing, the policies, the old page, the Studio in both skins): the owner's vector wordmark with its
   pronunciation centred beneath it. The wordmark is a mask filled with currentColor, so it takes the ink of whatever it stands on (the grey page, the dark Studio).
     <a class="lockup" href="/" aria-label="DAWVID"><span class="lockup-w" aria-hidden="true"></span><span class="lockup-p" aria-hidden="true">( daw · vid )</span></a>
     (not a link: <span class="lockup" role="img" aria-label="DAWVID">). One image, one name; the line under it is not read out as punctuation.
   Sizes, by the wordmark's height (it is 8.08 times as wide as it is tall):
     .lockup        146 x 18   the outline in its small-size cut (a heavier line), the pronunciation at 11 px
     .lockup.l      232 x 29   the same cut (the outline as drawn, wordmark_outline.svg, is for 44 px of height and up, where its line reaches a pixel), the pronunciation at 14 px
     .lockup.xs      92 x 11   the wordmark ALONE, solid: under 16 px of height the hollow letters close up and the line beneath would be under 9 px
   The pronunciation is the interface's face (Inter), lower case, no tracking, at 68 % of the ink. */
.lockup { --lw: 146px; display: inline-grid; justify-items: center; row-gap: 4px; flex: none; color: inherit; line-height: 1; text-decoration: none; letter-spacing: 0; text-transform: none; user-select: none; -webkit-user-select: none; }
.lockup-w { display: block; width: var(--lw); aspect-ratio: 5624 / 696; background: currentColor; -webkit-mask: url(wordmark_outline_small.svg) center / 100% 100% no-repeat; mask: url(wordmark_outline_small.svg) center / 100% 100% no-repeat; }
.lockup-p { display: block; font: 500 11px/1 var(--sans, "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", system-ui, sans-serif); letter-spacing: 0; white-space: nowrap; opacity: .68; }
.lockup.l { --lw: 232px; row-gap: 6px; } .lockup.l .lockup-p { font-size: 14px; }
.lockup.xs { --lw: 92px; } .lockup.xs .lockup-w { -webkit-mask-image: url(wordmark_solid.svg); mask-image: url(wordmark_solid.svg); } .lockup.xs .lockup-p { display: none; }
@media (forced-colors: active) { .lockup-w { background: CanvasText; } }