/* Echo dot-matrix logo — proportions from Figma node 213:1453.
   Every dimension is in em, so `font-size` on .logo scales the whole mark:
   width ≈ 4.08 × font-size (23.776px → 97px, the size used in page headers). */

@font-face {
  font-family: "Matter";
  src: url("../assets/fonts/Matter-Regular.ttf") format("truetype");
  font-weight: 400;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.21em;
  font-family: "Matter", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 23.776px;
  font-weight: 400;
  color: #fff;
  text-decoration: none;
}

.logo .matrix {
  display: grid;
  grid-template-columns: repeat(8, 0.161em);
  grid-template-rows: repeat(3, 0.161em);
  gap: 0.07em;
}

.logo .matrix i {
  display: block;
  width: 0.161em;
  height: 0.161em;
  border-radius: 50%;
  background: currentColor;
}

.logo .matrix i.off { visibility: hidden; }

.logo .wordmark {
  font-size: 1em;
  line-height: 1;
  letter-spacing: -0.055em;
}