/* One content-owned geometric source: the static SVG seat also drives Canvas2D. */
.hero {
  --hero-poster-gain: .32;
  --hero-poster-field-gain: .12;
}
.hero-intro { container-type: inline-size; }
#hero-title { position: relative; isolation: isolate; }
.hero-mark-seat {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 58cqi;
  width: min(25.5rem, 72cqi, calc(13rem + 16cqi));
  aspect-ratio: 1;
  display: block;
  transform: translate(-50%, -44%);
  pointer-events: none;
}

/* Open stacked flank: align the bounded square to the intro's right edge.
   Without JS, 38cqi is a conservative font-independent approximation. */
@media (min-width: 47.01rem) {
  .hero-mark-seat {
    left: var(--mark-x, 100cqi);
    width: min(25.5rem, var(--mark-space, 38cqi));
    transform: translate(-100%, -50%);
  }
}

/* Two columns: center on the measured ink-to-sidebar gap. The no-JS seat
   uses the title-box flank, staying clear of the sidebar without fr math. */
@media (min-width: 64rem) {
  .hero-mark-seat {
    left: var(--mark-x, 100%);
    width: min(25.5rem, var(--mark-space, calc(1.5 * clamp(3rem, 7vw, 7rem))));
    transform: translate(-50%, -50%);
  }
}