/* A part, drawn: the words at the top left, the drawing standing right of them or tucked under them
   on the page's own ground (the canvas paints nothing but the drawing), its view title lettered under
   it, and the frame check's card on the ground the drawing leaves empty. js/drawn.js places the
   drawing, the title and the card; the words keep their corner. */
.drawn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
/* The top clears the nav's 64 px with room to spare: it comes back over the stage whenever the
   page is scrolled up, and a short window would otherwise have the headline touching it. */
.drawn-copy {
  position: relative; z-index: 2; padding-top: clamp(76px, 12vh, 120px); pointer-events: none;
  display: flex; flex-direction: column; align-items: flex-start; gap: clamp(14px, 2.8vh, 26px);
}
/* Each as wide as its own words, so the drawing can be laid up to where they end. The claim
   starts a line of its own: run on, its first word was left alone at the end of the grey half. */
.drawn-copy > * { width: fit-content; max-width: 100%; }
.drawn-copy .say b { display: block; }

/* The view's title: placed under the drawing once the drawing has a place, and lettered once the
   dimensions it sits under start to arrive. It follows the view as it widens, frame by frame, so it
   has no movement of its own. */
.drawn-fig { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; white-space: nowrap; opacity: 0; transition: opacity 0.6s var(--ease); }
.drawn-fig:not(.placed) { visibility: hidden; }
.drawn-fig.shown { opacity: 1; }

/* The frame check's finding, as the app words it, and its source under it. It rises when datum B is
   drawn and A is not, is struck through as A lands, and goes; js/drawn.js sets how far along each
   is. The strike runs through the words in reading order, line after line, because the line is one
   inline box cut across its lines, and its background is laid along them as if they were one. */
.drawn-check {
  left: 0; top: 0; width: min(348px, calc(100vw - 32px)); padding: 16px 20px 15px; pointer-events: none;
  --rise: 0; --struck: 0; --out: 0;
  opacity: calc(var(--rise) * (1 - var(--out)));
  transform: translate(var(--x, 0px), calc(var(--y, 0px) + (1 - var(--rise)) * 14px));
}
.dc-says { font: 500 15px/1.4 var(--sans); color: var(--snow); letter-spacing: -0.005em; }
.dc-says span {
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / calc(var(--struck) * 100%) 1.5px;
  color: color-mix(in oklab, var(--snow) calc(100% - var(--struck) * 45%), var(--snow-faint));
}
.dc-source { margin-top: 8px; font-size: 11.5px; }
/* A short window has less ground to spare beside the drawing, and a phone less still, where the
   card stands in the room the section leaves beside it. */
@media (max-height: 640px) and (min-width: 641px) {
  .drawn-check { width: 290px; padding: 13px 16px 12px; }
  .dc-says { font-size: 13.5px; }
  .dc-source { margin-top: 6px; font-size: 11px; }
}
@media (max-width: 640px) {
  .drawn-check { width: 184px; padding: 12px 14px 11px; border-radius: 14px; }
  .dc-says { font-size: 13px; line-height: 1.35; }
  .dc-source { margin-top: 6px; font-size: 10.5px; }
}