/* stage.css -- one PSD artboard, scaled as a unit.
 *
 * 1 design px = var(--u) = 100cqw / 1080, so every PSD number is used verbatim.
 * Layers sit at their PSD bounds in % of the stage; z-index is the PSD paint order.
 *
 * TEXT IS PLACED BY BASELINE, metric-free: each .tl line carries a zero-width
 * inline-block strut 1000 design px tall. An empty inline-block's baseline is its
 * bottom edge, so the line's baseline lands exactly 1000u below the line top --
 * top = baseline - 1000u puts the text on the PSD baseline in any font, including
 * the Google-served ones whose metrics we never see.
 */
.stage {
  position: relative;
  width: 100%;
  overflow: hidden;
  container-type: inline-size;
  --u: calc(100cqw / 1080);
}
.base { position: absolute; inset: 0; width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }
.ly { position: absolute; pointer-events: none; }
.ly img { width: 100%; height: 100%; user-select: none; -webkit-user-drag: none; }

.shape {
  position: absolute;
  pointer-events: none;
  border: calc(var(--sw) * var(--u)) solid var(--stroke, transparent);
  border-radius: calc(var(--r) * var(--u));
  background: var(--fill, transparent);
  background-clip: padding-box;
}

.tb { position: absolute; inset: 0; pointer-events: none; }
.tl {
  position: absolute;
  top: calc((var(--b) - 1000) * var(--u));
  left: calc((var(--ax) - 540) * var(--u));
  width: 100%;
  font-size: 0;
  line-height: 0;
  white-space: pre;
  text-align: center;
  padding-left: calc(var(--trail, 0) * var(--u));
}
.tl::before {
  content: "";
  display: inline-block;
  width: 0;
  height: calc(1000 * var(--u));
  vertical-align: baseline;
}
.tl--left { left: calc(var(--ax) * var(--u)); width: auto; text-align: left; }
.tl--right { left: auto; right: calc((1080 - var(--ax)) * var(--u)); width: auto; text-align: right; }

.r {
  font-size: calc(var(--fs) * var(--u));
  line-height: 1;
  letter-spacing: var(--ls, 0);
  font-kerning: normal;
  font-synthesis: none;
}
.r.sup { vertical-align: calc(var(--raise) * var(--u)); }
/* Photoshop Faux Bold: thicker outline AND ~0.027em wider advances. */
.r.fb {
  -webkit-text-stroke: 0.01em currentColor;
  paint-order: stroke fill;
  letter-spacing: calc(var(--ls, 0em) + 0.027em);
}

.tl a.ln { pointer-events: auto; color: inherit; text-decoration: none; }
.tl a.ln:hover .r { text-decoration: underline; text-decoration-thickness: 0.06em; text-underline-offset: 0.18em; }
.hit { position: absolute; z-index: 60; border-radius: calc(14 * var(--u)); }