/* ============================================================================
   Arrange — brand wordmark
   ----------------------------------------------------------------------------
   The logo is the word. It is drawn as a modular geometric alphabet on one grid
   — cap 34, x-height 24, radius 9, one stroke weight — and four of its letters
   ARE the brand primitives:

       A  = the wedge   (no crossbar: the primitive itself, left alone)
       a  = the wedge again, at x-height
       g  = the square
       e  = the circle

   Every letter is drawn on the same convention: x-height letters run 13 to 31,
   so each one sits half a stroke inside the guides and their tops and feet line
   up with each other. Do not draw a letter on the 10/34 guides themselves — it
   reads as an overshoot against every letter beside it.

   There is no separate icon sitting beside a word, so there are no lockup rules,
   no clear-space diagram, and nothing to keep in sync. When a square mark is
   required, it is the wordmark's own A — see favicon.svg.

   Canonical source (do not redraw; copy this):

     <svg class="brand-wordmark" viewBox="-3 -3 216 50" role="img" aria-label="Arrange">
       <g fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter">
         <polygon points="17,3 31,31 3,31"/>
         <path d="M45,31 V19 A6,6 0 0 1 51,13 H55"/>
         <path d="M69,31 V19 A6,6 0 0 1 75,13 H79"/>
         <polygon points="102,13 111,31 93,31"/>
         <path d="M125,31 V22 A9,9 0 0 1 143,22 V31"/>
         <rect x="157" y="13" width="18" height="18"/><path d="M175,31 V41 H157"/>
         <path d="M189,22 H207 A9,9 0 1 0 204.36,28.36"/>
       </g>
     </svg>

   The e is one path, not two. Its crossbar and bowl share a mitered corner; as
   separate paths their butt caps left a square chip bitten out of the right
   side of the letter.

   Inside a link that already names itself, use aria-hidden="true" instead of
   role/aria-label so the accessible name is not announced twice.
   ========================================================================= */

:root {
  /* Stroke weight in mark units, against a 24-unit x-height. */
  --brand-weight: 4.5;
}

.brand-wordmark {
  display: block;
  height: 20px;          /* host contexts override; width follows the ratio */
  width: auto;
  overflow: visible;
  flex-shrink: 0;
  color: inherit;
}

.brand-wordmark g {
  stroke-width: var(--brand-weight);
}

/* Wrapper for the wordmark plus any qualifier ("· Docs", "· Design System"). */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}

/* The toy (js/wordmark-toy.js). The letters are objects, so they can be picked
   up; while one is in hand the mark leaves the header's stacking order so it
   can fall in front of the page instead of behind it. */
.brand-wordmark .wordmark-toy__letter { cursor: grab; }
/* While a letter is in hand the mark leaves the header's stacking order and
   hangs in front of the panels it falls past — below modals (100000), above
   everything else. The header itself may clip, so the letters are lifted into
   a fixed layer that nothing else bounds. */
.brand-lockup.is-playing {
  position: relative;
  z-index: 99990;
}
.brand-lockup.is-playing .brand-wordmark {
  overflow: visible;
  pointer-events: auto;
}
.brand-lockup.is-playing .brand-wordmark,
.brand-lockup.is-playing .wordmark-toy__letter { cursor: grabbing; }
/* A drag must not also scroll the page out from under it on touch. */
.brand-wordmark { touch-action: none; }

/* The wordmark carries its own weight — a heading that contains it should not
   add a second one. */
.brand-lockup h1,
h1.brand-lockup {
  margin: 0;
  font-size: 0;
  line-height: 0;
}