/* The picture floats right at the start of the first paragraph, and the text wraps around it. */
  #drawing-slot { float: right; width: 180px; margin: 4px 0 18px 24px; }
  #drawing-slot[hidden] { display: none; }
  #drawing-slot .drawing-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 150px; height: 150px; text-align: center; font: 11px/1.3 "IBM Plex Mono", monospace; opacity: .7; }
  #drawing-slot img.partial { filter: blur(1.5px); }
  #drawing-slot .drawing-tag { margin-top: 10px; font: 700 15px/1.3 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  #drawing-slot .drawing-cap { margin-top: 4px; font: italic 15px/1.4 "Stooonks Serif", Georgia, serif; text-align: left; }
  #drawing-slot { min-height: 150px; }
  /* Sharp card like the zoom card, but light: a hairline border; the dotted square shadow only shows on hover. */
  #drawing-slot { border: 1px solid #111; border-radius: 0; padding: 12px; box-sizing: border-box; position: relative; isolation: isolate; background: #f6f6f6; } /* page colour: the picture blends into it (multiply) */
  body.dark #drawing-slot { border-color: #eee; background: #000; }
  #drawing-slot::before { content: ""; position: absolute; z-index: -1; inset: 6px -6px -6px 6px; background: radial-gradient(#111 1.1px, transparent 1.3px) 0 0 / 5px 5px; opacity: 0; clip-path: polygon(calc(100% - 6px) 0, 100% 0, 100% 100%, 0 100%, 0 calc(100% - 6px), calc(100% - 6px) calc(100% - 6px)); }
  body.dark #drawing-slot::before { background-image: radial-gradient(#eee 1.1px, transparent 1.3px); }
  #drawing-slot .drawing-pic { position: relative; overflow: hidden; margin: 0 auto; width: 100%; aspect-ratio: 1 / 1; }
  #drawing-slot .drawing-pic img { position: absolute; top: 0; left: 0; max-width: none; }
  #drawing-slot .drawing-wait { width: 100%; min-height: inherit; height: auto; }
  #drawing-slot:has(img[src]) { cursor: pointer; }
  #drawing-slot img { cursor: inherit; }
  /* Click the picture: it grows to the width of the text column in an overlay (100 ms); click anywhere to close. */
  #drawing-zoom { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background: rgba(245, 245, 245, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: background-color var(--dz, .1s), backdrop-filter var(--dz, .1s), -webkit-backdrop-filter var(--dz, .1s); cursor: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22%3E%3Cpath d=%22M4 4L20 20M20 4L4 20%22 stroke=%22white%22 stroke-width=%226%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3Cpath d=%22M4 4L20 20M20 4L4 20%22 stroke=%22black%22 stroke-width=%223%22 stroke-linecap=%22round%22 fill=%22none%22/%3E%3C/svg%3E") 12 12, pointer; }
  #drawing-zoom.in { background: rgba(245, 245, 245, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  /* The big picture is a card: page-coloured, thin border, dotted square shadow; the picture is cropped to its drawing. */
  #drawing-card { position: fixed; isolation: isolate; border: 5px solid transparent; transition: transform var(--dz, .1s) ease-out, border-color var(--dz, .1s) ease-out; }
  #drawing-zoom.in #drawing-card { border-color: var(--bc, #111); }
  #drawing-card::before { content: ""; position: absolute; z-index: -1; inset: 10px -10px -10px 10px; background: radial-gradient(#111 1.3px, transparent 1.5px) 0 0 / 6px 6px; opacity: 0; transition: opacity var(--dz, .1s) ease-out; }
  #drawing-zoom.in #drawing-card::before { opacity: 1; }
  #drawing-card .pad { padding: 20px; background: #f6f6f6; }
  #drawing-card .clip { position: relative; overflow: hidden; }
  #drawing-card .pad { display: flex; flex-direction: column; align-items: center; }
  #drawing-card .cap { margin-top: 16px; text-align: center; font: italic 22px/1.4 "Stooonks Serif", Georgia, serif; color: #111; opacity: 0; transition: opacity var(--dz, .1s) ease-out; }
  #drawing-card .tag { margin-top: 16px; text-align: center; font: 700 22px/1.3 "IBM Plex Mono", monospace; letter-spacing: .08em; text-transform: uppercase; color: #111; opacity: 0; transition: opacity var(--dz, .1s) ease-out; }
  #drawing-card .tag + .cap { margin-top: 8px; }
  #drawing-zoom.in #drawing-card .tag { opacity: 1; }
  body.dark #drawing-card .tag { color: #eee; }
  #drawing-zoom.in #drawing-card .cap { opacity: 1; }
  body.dark #drawing-card .cap { color: #eee; }
  #drawing-card img { position: absolute; display: block; max-width: none; mix-blend-mode: multiply; }
  body.dark #drawing-zoom { background: rgba(17, 17, 17, 0); }
  body.dark #drawing-zoom.in { background: rgba(17, 17, 17, .6); }
  body.dark #drawing-zoom { --bc: #eee; }
  body.dark #drawing-card .pad { background: #000; }
  body.dark #drawing-card::before { background-image: radial-gradient(#eee 1.3px, transparent 1.5px); }
  body.dark #drawing-card img { filter: invert(1); mix-blend-mode: lighten; }
  #drawing-slot img { opacity: 0; transition: filter .25s; }
  #drawing-slot img.in { opacity: 1; animation: dr-in .4s ease; }
  @keyframes dr-in { from { opacity: 0; } }
  /* Hover: instant dim (no transition), only on devices that really hover. */
  @media (hover: hover) { #drawing-slot:hover { background: #fff; } #drawing-slot:hover::before { opacity: 1; } body.dark #drawing-slot:hover { background: #000; } }
  #drawing-slot img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }
  /* The picture is black lines on white: invert it in dark mode, and let the dark page show through. */
  body.dark #drawing-slot img { filter: invert(1); mix-blend-mode: lighten; }
  body.dark #drawing-slot img.partial { filter: invert(1) blur(1.5px); }
  @media (max-width: 639px) { #drawing-slot { width: 130px; min-height: 110px; margin-left: 14px; padding: 9px; } }