/* Invisible ink — copy on the left, the conversation on the right, big enough
   to rub with a thumb. */

[data-scene="ink"] .ink-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(40px, 5vw, 72px);
  align-items: center;
}
[data-scene="ink"] .ink-copy .lede { max-width: 30ch; }

.ink-stage { width: 100%; }
.ink-thread {
  --pt: 1.6px;
  display: flex; flex-direction: column; gap: calc(3 * var(--pt));
  font-size: calc(17 * var(--pt));
  line-height: 1.29;
  letter-spacing: -0.02em;
}
.ink-gap { height: calc(5 * var(--pt)); }

[data-scene="ink"] .ink-bub {
  max-width: none;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
[data-scene="ink"] .ink-bub:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--coral) 45%, transparent); }
.ink-sizer { pointer-events: none; }
.ink-canvas {
  position: absolute; left: 0; top: 0;
  display: block;
  pointer-events: none;
}

/* The ghost finger: a fingertip's shadow, the way a screen recording shows a touch. */
.ink-ghost {
  position: absolute; left: 0; top: 0;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.13);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.7), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
  visibility: hidden;
}
.ink-ghost.on { visibility: visible; }

@media (max-width: 860px) {
  [data-scene="ink"] .ink-row { grid-template-columns: minmax(0, 1fr); text-align: center; gap: 56px; }
  [data-scene="ink"] .ink-copy .lede { margin: 0 auto; }
  .ink-stage { max-width: 480px; margin: 0 auto; text-align: left; }
}