:root {
  --sem-suit: #7fa9c9;
  --sem-head: #99613a;
  --sem-line: #12181f;
  --sem-flag-yellow: #f6b40e;
  --sem-flag-black: #1a1b20;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
}

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #fff;
  padding: 4vmin 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The field of signalers: the middle third of the screen on desktop,
 * widening as the viewport narrows. Flex (not grid) so the short last
 * row of the 26 letters stays centered. */
.grid {
  width: 33.333vw;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: clamp(6px, 1.4vh, 20px);
}

.cell {
  flex: 0 0 16.6667%;
}

.figure {
  display: block;
  width: 100%;
  height: auto;
}

/* Each articulation point is a .joint group whose transform-origin sits on
 * the pivot (set inline, in viewBox coordinates). Rotating the group is the
 * whole animation system. */
.joint {
  transform-box: view-box;
  transition: transform 900ms cubic-bezier(0.34, 1.3, 0.35, 1);
  transition-delay: var(--pose-delay, 0ms);
}

@media (prefers-reduced-motion: reduce) {
  .joint {
    transition: none;
  }
}

@media (max-width: 1400px) {
  .grid { width: 44vw; }
}

@media (max-width: 1024px) {
  .grid { width: 60vw; }
}

@media (max-width: 720px) {
  .grid { width: 80vw; }
  .cell { flex-basis: 20%; }
}

@media (max-width: 480px) {
  .grid { width: 94vw; }
  .cell { flex-basis: 25%; }
}