/* XT4 logo — bracket X, capital T and a 4, all at one size.
   Needs Bricolage Grotesque (weight 600) loaded on the page:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@200..800&display=swap">

   Markup:
   <span class="xt4-logo" role="img" aria-label="XT4">
     <svg class="xt4-logo__x" viewBox="0 0 111 100" aria-hidden="true">
       <polygon points="0,0 21,0 51,50 21,100 0,100 30,50"/>
       <polygon points="111,0 90,0 60,50 90,100 111,100 81,50"/>
     </svg>
     <span class="xt4-logo__t4"><span class="xt4-logo__t">T</span><span class="xt4-logo__4">4</span></span>
   </span>

   Size it with font-size on .xt4-logo (the brackets are 0.66em high, the same height as the T and 4). */

.xt4-logo {
  --xt4-ink: #0D1014;
  --xt4-paper: #F3F4F0;
  --xt4-signal: #2F5BFF;
  display: inline-flex;
  align-items: baseline;
  gap: 0.057em;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 600;
  font-size: 96px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--xt4-ink);
}

.xt4-logo__x {
  width: 0.733em;
  height: 0.66em;
  display: block;
  flex-shrink: 0;
  fill: var(--xt4-signal);
}

.xt4-logo__t4 {
  display: flex;
  align-items: baseline;
}

.xt4-logo__4 {
  color: var(--xt4-signal);
}

/* On ink or other dark grounds: paper t, blue brackets and 4. */
.xt4-logo--on-dark {
  color: var(--xt4-paper);
}

/* On the blue ground: everything paper. */
.xt4-logo--on-signal {
  color: var(--xt4-paper);
}
.xt4-logo--on-signal .xt4-logo__x { fill: var(--xt4-paper); }
.xt4-logo--on-signal .xt4-logo__4 { color: var(--xt4-paper); }

/* Single colour: everything takes the text colour. */
.xt4-logo--mono .xt4-logo__x { fill: currentColor; }
.xt4-logo--mono .xt4-logo__4 { color: inherit; }