/* OSTC reserved media box (spec 4.6) and the pen drawing's CSS (R14, R17 b and c). Contract: /shared/README-scripts.md.
   No spinner, no grey box. The box is reserved by aspect-ratio and painted with the render's own light (R13: the default is cream, #F3E7CF, with a #FFF3D6 core):
   a two-stop radial gradient, stored with the media record and set as custom properties on the figure.
   .render holds a photograph only until R14's sketch sheet replaces it; there is no video anywhere on the site (R17 d), so no rule here touches one. */
.render {
  --core: #fff3d6;
  --cx: 50%;
  --cy: 50%;
  --ground: #f3e7cf;
  position: relative;
  box-sizing: border-box;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(ellipse farthest-corner at var(--cx) var(--cy), var(--core), var(--ground) var(--reach, 100%));
}
.render picture,
.render img {
  display: block;
  width: 100%;
  height: 100%;
}
.render img { object-fit: cover; }
.render picture { position: absolute; inset: 0; }

/* R14 drawing and its pen (README-scripts sections 6 and 7). A drawing is two layers over its own paper: the wash (opacity) and the navy line layer, which the
   pen shows stroke by stroke through a time map (/shared/draw.js, a canvas laid over the paper for the length of one run). Every drawing that moves is a pen
   drawing (data-sketch data-pen); nothing arrives as a sweep. The finished drawing is the default: no script, reduced motion, Pause, Save-Data, a slow connection
   or a finished run all show it. The only CSS that moves is the wash, and it moves opacity only: it blooms once the lines are two thirds in.
   --lines and --wash carry the timings (R14 i, R17 b): a drawing further down draws its lines over 1.2 s and blooms its wash over 0.4 s from 0.8 s (1.6 s in all);
   one in the first screen (.is-first, set by observer.js) draws over 2.0 s and blooms over 1.0 s from 1.33 s (2.33 s in all, under the 2.4 s ceiling). A retime
   touches no markup, and the time map is cut for its run (README-scripts section 7).
   A drawing is drawn once, then stays finished (remembered for the session, section 3). It starts only when every layer it shows, the time map included, has decoded
   (observer.js): a drawing whose layers come late appears finished with a 200 ms fade (.is-late), and one that fails shows its bare paper (.is-failed), never a
   broken-image mark, half a drawing, or lines with no wash. Every rule that starts a motion says :not(.is-done), so Pause and then Play restarts nothing. */
.sketch {
  --lines: 1200ms; --wash: 400ms;
  position: relative;
  overflow: clip;
  margin: 0;
  background: var(--sketch-ground, #f3e7cf);   /* the loading placeholder: the drawing's own paper, flat, no gradient */
}
.sketch.is-first { --lines: 2000ms; --wash: 1000ms; }
.sketch img { display: block; }
.sketch__wash, .sketch__ink { position: absolute; inset: 0; }
.sketch__wash img, .sketch__lines { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.sketch__ink { pointer-events: none; }
.sketch__strokes { display: none; }   /* the old sweep's second copy of the lines: a page that still writes it fails the build (tools/fingerprint.mjs); hidden so it does not draw its ink twice while it is converted */
.sketch__time { display: none; }   /* the time map only has to decode; draw.js reads it as a texture */
.draw__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; }   /* the line layer's shape fitted into the figure, the way object-fit: contain fits the plain lines */
.sketch.is-failed :is(.sketch__ink, .sketch__wash) { visibility: hidden; }
html.js .sketch[data-wake]:not(.is-loaded) :is(.sketch__ink, .sketch__wash) { opacity: 0; }   /* a woken figure (observer.js) shows both layers together, once both have decoded: never the wash alone */   /* a layer failed: the paper, and the figure's own words and alt */
/* a sheet: the drawing on its own cream paper where the page's ground is another colour (R13's bounded panel, in cream). Drawn things stay square (R15 f): a literal 2 px, never var(--radius) */
.sketch-sheet { --sketch-ground: #f3e7cf; position: relative; overflow: clip; background: var(--sketch-ground); border: 1px solid rgb(18 35 58 / 0.16); border-radius: 2px; }

@media (prefers-reduced-motion: no-preference) {
  /* waiting: an armed drawing until it is drawn, and on a page's first view this session any drawing the script has not sorted yet */
  html.motion-ok:not(.motion-paused) .sketch.is-armed:not(.is-drawn, .is-done) :is(.sketch__ink, .sketch__wash) { opacity: 0; }
  html.motion-ok.sketch-intro:not(.motion-paused) .sketch[data-sketch]:not(.is-armed, .is-done) :is(.sketch__ink, .sketch__wash) {
    opacity: 0; animation: sketch-safety 1ms 4s both;   /* if the script never runs, the finished drawing shows at 4 s (counted from arrival on a prerendered page, README-scripts section 1) */
  }

  /* drawn once: the plain lines wait while the pen's canvas draws them (draw.js adds .is-drawing), and the wash blooms from two thirds of the run */
  html.motion-ok:not(.motion-paused) .sketch.is-drawing:not(.is-done) .sketch__ink { opacity: 0; }
  html.motion-ok:not(.motion-paused) .sketch.is-armed.is-drawn:not(.is-done) .sketch__wash { animation: sketch-wash var(--wash) ease-out calc(var(--lines) * 2 / 3) both; }

  /* a drawing whose layers decoded after its window: finished at once, fading in over 200 ms so it does not pop (R17 c 3) */
  html.motion-ok:not(.motion-paused) .sketch.is-late :is(.sketch__ink, .sketch__wash) { animation: sketch-late var(--t-late) ease-out both; }
}
@keyframes sketch-wash { from { opacity: 0; } to { opacity: 1; } }
@keyframes sketch-safety { to { opacity: 1; } }
@keyframes sketch-late { from { opacity: 0; } }