/* The text period/Earth is independent of its four character poses. The Earth
   runtime measures the original punctuation and owns fallback visibility. */
.studio-signoff .studio-period {
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--period-width);
  min-width: var(--touch-size);
  height: var(--period-height);
  min-height: var(--touch-size);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  line-height: var(--period-line);
  letter-spacing: 0;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
}
.studio-signoff .studio-period:disabled { cursor: default; }
.studio-period__fallback { display: block; }
.studio-period__art {
  /* Resolve here, after inheriting the measured Earth size and pose override. */
  --period-art-size: calc(var(--earth-glyph-size) * var(--period-pose-scale));
  position: absolute;
  z-index: var(--period-art-layer);
  left: calc(var(--earth-glyph-left) + var(--earth-glyph-size) * .5 - var(--period-art-size) * var(--period-anchor-x));
  top: calc(var(--earth-glyph-top) + var(--earth-glyph-size) * .5 - var(--period-art-size) * var(--period-anchor-y));
  width: var(--period-art-size);
  height: var(--period-art-size);
  background-image: var(--period-sheet);
  background-size: var(--period-sheet-size);
  background-position: 0 0;
  background-repeat: no-repeat;
  visibility: hidden;
  pointer-events: none;
  transform-origin: calc(var(--period-anchor-x) * 100%) calc(var(--period-anchor-y) * 100%);
}
.studio-period[data-period-pose="balance"] .studio-period__art {
  background-image: var(--period-drawing-sheet);
  --period-pose-scale: var(--period-balance-scale);
  --period-anchor-x: var(--period-balance-anchor-x);
  --period-anchor-y: var(--period-balance-anchor-y);
  background-position: 100% 0;
}
.studio-period[data-period-pose="read"] .studio-period__art {
  --period-pose-scale: var(--period-read-scale);
  --period-anchor-x: var(--period-read-anchor-x);
  --period-anchor-y: var(--period-read-anchor-y);
  background-position: 0 100%;
}
.studio-period[data-period-pose="coffee"] .studio-period__art {
  --period-pose-scale: var(--period-coffee-scale);
  --period-anchor-x: var(--period-coffee-anchor-x);
  --period-anchor-y: var(--period-coffee-anchor-y);
  background-position: 100% 100%;
}
.studio-period.is-period-ready[data-earth-ready="true"] .studio-period__art { visibility: visible; }
.studio-period:focus-visible {
  outline: var(--focus-width) solid var(--focus-ring);
  outline-offset: var(--focus-offset);
  border-radius: var(--radius-small);
}
@media (prefers-reduced-motion: reduce) {
  .studio-period__art { transform: none; }
}