/* The same authored geometry anchors the wordmark, introduction, and personal stamp. */
.circuit-mark {
  display: block;
  width: 160px;
  aspect-ratio: 260 / 160;
  color: var(--desk-ink);
  transform: perspective(650px) rotateX(var(--circuit-rx, 0deg))
    rotateY(var(--circuit-ry, 0deg));
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.circuit-geometry {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.circuit-letters {
  stroke: var(--desk-accent);
  stroke-width: 18;
  stroke-linecap: square;
  stroke-linejoin: bevel;
}
.circuit-backplane {
  stroke: var(--desk-border);
  stroke-width: 20;
  translate: 3px calc(4px + var(--circuit-lift, 0px));
  opacity: 0.55;
}
.circuit-traces {
  stroke: var(--desk-accent);
  stroke-width: 1.2;
  stroke-linejoin: bevel;
  opacity: 0.55;
}
.circuit-pads {
  fill: var(--desk-bg);
  stroke: var(--desk-accent);
  stroke-width: 1.5;
}
.circuit-packet {
  fill: var(--desk-sticker);
}
body[data-direction="desktop"] .desk-brand-icon {
  padding: 0;
  border: 0;
  border-radius: 0;
}
.desk-brand-icon .circuit-mark {
  width: 35px;
}
.circuit-mark-brand .circuit-traces,
.circuit-mark-brand .circuit-pads {
  display: none;
}
.circuit-mark-brand .circuit-letters {
  stroke-width: 24;
}
body[data-direction="desktop"] .desk-intro-mark {
  margin-bottom: 17px;
  letter-spacing: normal;
}
.desk-intro-mark .circuit-mark {
  width: clamp(124px, 11.6vw, 180px);
}
.personal-stamp > .circuit-mark {
  width: clamp(175px, 18vw, 265px);
  margin-bottom: 30px;
}
@media (max-width: 850px) {
  .desk-intro-mark .circuit-mark {
    width: 128px;
  }
  .personal-stamp > .circuit-mark {
    width: 190px;
    margin-bottom: 22px;
  }
}
@media (max-width: 600px) {
  .desk-intro-mark .circuit-mark {
    width: 114px;
  }
  .personal-stamp > .circuit-mark {
    width: 160px;
  }
}
body[data-motion="off"] .circuit-mark {
  transform: none;
  transition: none;
}
@media (prefers-reduced-motion: reduce) {
  .circuit-mark {
    transform: none;
    transition: none;
  }
}