/* Architrave — the picture on a post.
 *
 * A drawing carries its own colours inline, because they are an instruction
 * about the reader's mode rather than a value (inc/theme-illustrations.php
 * keeps the story). Two things live here: the box the tag fills, and the one
 * colour that is a decision rather than an instruction.
 */

/* THE INK IS THE MODE'S OWN, WITH ALMOST ALL THE COLOUR TAKEN OUT.
 *
 * These pictures are two colours: a surface, and black line work on it. Left at
 * `--text-primary` the line is literally the body text's colour, which in
 * dune-dark is pink and in matrix-dark is green — correct by the tokens, and it
 * quietly makes a drawing a coloured illustration instead of ink on paper.
 *
 * A FIXED near-black/near-white pair was the obvious answer and is the wrong
 * one: something then has to decide whether a mode is light or dark, and the
 * only way to know is a list of mode names. A thirteenth mode is not in the
 * list and silently gets the wrong ink — the exact failure this whole approach
 * exists to avoid. Measured against four invented modes harsher than any in the
 * registry, the pair also fell through to black on a MID-TONE surface and
 * looked fine by luck.
 *
 * So the lightness is not chosen here at all: it is the mode's, whatever the
 * mode decided, which is why contrast can never break in a mode nobody has
 * written yet. Only the chroma is ours, and 0.02 rather than 0 — a whisper of
 * the page's own colour, so the line belongs to the page instead of being
 * pasted onto it.
 *
 * A mid-tone surface is weak for EVERY ink, because the picture's tinted
 * background pulls away from the mode's plane. That is the contrast gate's
 * problem, not this declaration's.
 */
/* IT IS DECLARED ON THE PICTURE, NOT ON :root, and that is not a preference.
   A custom property is substituted where it is DECLARED, not where it is used:
   on `:root` the mode's ink is whatever the root happens to carry, so every
   drawing inside a `.theme-*` wrapper — a mode box on the lab sheet, a preview,
   anything showing one mode inside another — got the root's ink instead of its
   own. It shipped a dark line on a dark ground for exactly as long as it took
   to look at it. On the picture, it resolves against the picture's own
   inherited ink, which is the mode it is actually sitting in. */
.illustration {
	--illustration-ink: var(--text-primary);
}

@supports (color: oklch(from red l c h)) {
	.illustration {
		--illustration-ink: oklch(from var(--text-primary) l 0.02 h);
	}
}

/* 4:3, THE SHAPE EVERY OTHER PICTURE ON THIS SITE IS — index card, archive
   card, single post, theme card. The drawings are composed square, and they
   stay square: the picture is FITTED into the frame, never cropped to it.
   Several of them run deliberately to their own edge (Waipoua's trunk leaves
   the top, Uku's headstock touches it), and a 4:3 crop would cut exactly those.

   So the drawing is scaled to the frame's height and centred, and the strip
   left over on either side is painted in the drawing's own surface — the same
   colour, set on the tag itself — which is why the frame reads as a wider field
   with the object standing in it rather than as a picture with margins. */
.illustration {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
}

/* In a theme card the drawing stands exactly where the thumbnail stood, to the
   same width, the same 4:3 and the same inner corner — the card family's
   dials, read from the card and not restated. No background: the drawing
   brings its own, which is the colour a post WITHOUT a thumbnail would have
   shown as the quiet step off the paper. */
.theme-card .illustration {
	flex: none;
	width: var(--space-20);
	border-radius: var(--card-inner);
}