<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" role="img" aria-label="CSTH">
  <style>
    .mini { display: none; }
    @media (max-width: 24px) {
      .full { display: none; }
      .mini { display: block; }
    }
  </style>
  <rect width="64" height="64" fill="#0a0a0a"/>

  <!-- Full mark (32px+) matches site logo -->
  <g class="full">
    <rect x="10" y="14" width="8" height="8" fill="#BCBEC1"/>
    <rect x="22" y="14" width="8" height="8" fill="#1E519E"/>
    <rect x="34" y="14" width="8" height="8" fill="#00A751"/>
    <rect x="46" y="14" width="8" height="8" fill="#F3C412"/>
    <text
      x="32"
      y="48"
      text-anchor="middle"
      fill="#ffffff"
      font-family="Georgia, 'Times New Roman', Times, serif"
      font-size="18"
      font-weight="700"
      letter-spacing="0.04em"
    >CSTH</text>
  </g>

  <!-- Tiny mark: brand squares as a 2x2 (reads at 16px) -->
  <g class="mini">
    <rect x="10" y="10" width="18" height="18" fill="#BCBEC1"/>
    <rect x="36" y="10" width="18" height="18" fill="#1E519E"/>
    <rect x="10" y="36" width="18" height="18" fill="#00A751"/>
    <rect x="36" y="36" width="18" height="18" fill="#F3C412"/>
  </g>
</svg>
