/* =============================================================================
   @elements/style — brand

   The Elements mark + wordmark.

   Standalone mark — controlled by font-size on the element. The size
   classes set width/height; default is 24px.

     <span class="mark"><svg>…</svg></span>            — 24px
     <span class="mark size-16"><svg>…</svg></span>    — explicit pixel size
     <span class="mark size-48"><svg>…</svg></span>

   Lockup — mark + wordmark together. Sizes follow the universal
   vocabulary (xs / sm / md / lg / xl):

     <a class="brand is-sm" href="/">
       <span class="mark"><svg>…</svg></span>
       elements
     </a>

   Sky override — pins the mark to --blue regardless of page accent:

     <span class="mark is-sky"><svg>…</svg></span>
============================================================================= */

/* ─── Standalone mark ─────────────────────────────────────────── */

.mark {
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
}
.mark svg { width: 100%; height: 100%; display: block; }
.mark.is-sky { color: var(--blue); }

/* Explicit pixel sizes for the standalone mark. */
.mark.size-16  { width: 16px;  height: 16px; }
.mark.size-20  { width: 20px;  height: 20px; }
.mark.size-24  { width: 24px;  height: 24px; }
.mark.size-26  { width: 26px;  height: 26px; }
.mark.size-32  { width: 32px;  height: 32px; }
.mark.size-34  { width: 34px;  height: 34px; }
.mark.size-48  { width: 48px;  height: 48px; }
.mark.size-64  { width: 64px;  height: 64px; }
.mark.size-72  { width: 72px;  height: 72px; }
.mark.size-96  { width: 96px;  height: 96px; }
.mark.size-128 { width: 128px; height: 128px; }
.mark.size-256 { width: 256px; height: 256px; }

/* ─── Lockup (mark + wordmark) ─────────────────────────────────── */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.1875rem;
  font-family: var(--font-sans);
  font-weight: var(--font-bold);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  font-size: 15px;
}
.brand > .mark { width: 18px; height: 18px; }

.brand.is-xs     { font-size: 11.5px; gap: 0.25rem; }
.brand.is-xs > .mark { width: 14px; height: 14px; }

.brand.is-sm     { font-size: 15px; }
.brand.is-sm > .mark { width: 18px; height: 18px; }

.brand.is-md     { font-size: 22px; }
.brand.is-md > .mark { width: 26px; height: 26px; }

.brand.is-lg     { font-size: 32px; }
.brand.is-lg > .mark { width: 38px; height: 38px; }

.brand.is-xl     { font-size: 48px; }
.brand.is-xl > .mark { width: 56px; height: 56px; }