.glyph-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.glyph {
  display: block;
  overflow: visible;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin: 0;
  opacity: 0;
}
.glyph.is-set { opacity: 1; }

.glyph-person {
  width: 160px;
  height: 160px;
}

.glyph-context {
  width: 160px;
  height: 160px;
}

.glyph-composite {
  width: min(480px, 100%);
  height: auto;
  aspect-ratio: 100 / 40;
}

.glyph-feed {
  width: 120px;
  height: auto;
  aspect-ratio: 120 / 132;
  margin-top: 24px;
}

.glyph-handoff {
  width: min(204px, 100%);
  height: auto;
  aspect-ratio: 204 / 132;
  margin-top: 24px;
}

.glyph-team {
  width: 300px;
  max-width: 100%;
  height: auto;
  aspect-ratio: 64 / 48;
}

.glyph-craft {
  width: 160px;
  height: 160px;
}

.glyph-memory {
  width: min(800px, 100%);
  height: auto;
  aspect-ratio: 240 / 48;
}

.glyph-suite {
  width: min(480px, 100%);
  height: auto;
  aspect-ratio: 144 / 48;
}

.glyph-craft .g-craft-core,
.glyph-suite .g-craft-core {
  fill: var(--accent);
  stroke: var(--accent);
}

.g-ink { stroke: var(--ink); }
.g-accent { stroke: var(--accent); }

.context-stack { align-items: center; }

@media (max-width: 899px) {
  .glyph-person,
  .glyph-context,
  .glyph-composite,
  .glyph-team,
  .glyph-craft,
  .glyph-memory,
  .glyph-suite {
    width: 100%;
    height: auto;
  }
  .glyph-person,
  .glyph-context,
  .glyph-craft { aspect-ratio: 1; }
  .glyph-memory { aspect-ratio: 240 / 48; }
  .glyph-suite { aspect-ratio: 144 / 48; }
  .glyph-team { aspect-ratio: 64 / 48; }
  .glyph-feed {
    width: 120px;
    height: auto;
  }
  .glyph-handoff {
    width: min(204px, 100%);
    height: auto;
  }
}