/* ══════════════════════════════════════════════════════════════════════════
   COLLAGE — the shared paint vocabulary for כרך's cut-paper drawings.
   ──────────────────────────────────────────────────────────────────────────
   Every picture on this site is hand-built inline SVG in ONE visual language:
   cut paper, hairline ink, halftone, and a proofreader's mark. This file holds
   the paint (the `.a-*` classes) so a second and third picture cannot drift
   from the first — it does NOT hold geometry, and it does NOT hold layout for
   any single picture. Each composition carries its own <defs> and its own
   placement rules on the page that owns it.

   The paint block below is the homepage's, moved here unchanged: same
   selectors, same token references, same order. Nothing was "improved" on the
   way across, because the point of moving it was that both copies agree.

   TWO RULES a new picture must obey:

   1. SUBJECT INK IS PAGE-LOCAL (L-D15). `--sub-kesef` / `--sub-dira` /
      `--sub-avoda` / `--chip` / `--cut` / `--mark` are NOT defined here on
      purpose. Colour in this system carries one fixed meaning, so the page
      that draws a subject declares that subject's ink in its own scope. A
      picture of something else mints its own token; it never borrows one whose
      meaning belongs to another subject. A class below whose token the page
      has not declared simply must not be used on that page.

   2. DEF IDS ARE NAMESPACED PER INSTANCE. `url(#id)` resolves to the FIRST
      match in the document, so two pictures on one page that both declare
      `id="caHatch"` silently paint each other's patterns. Every picture
      suffixes its def ids with its own name (`caHatch-why`, `caDots-cover`, …)
      and overrides `.a-gutter`'s fill in its own scope to point at them.

   Motion: use `class="ca-art fade-in"`. `.fade-in` and `@keyframes fade` live
   in kerekh.css — a picture does not re-declare an animation the site already
   ships.
   ══════════════════════════════════════════════════════════════════════════ */

/* artwork paint — every value below is a token, so a re-skin cannot leave a
   stale hex behind inside the drawing */
.ca-art .a-paper{ fill:var(--paper) }
.ca-art .a-cut{ fill:var(--cut) }
.ca-art .a-kesef{ fill:var(--sub-kesef) }
.ca-art .a-dira{ fill:var(--sub-dira) }
.ca-art .a-avoda{ fill:var(--sub-avoda) }
.ca-art .a-chip{ fill:var(--chip) }
.ca-art .a-ink{ fill:none; stroke:var(--ink-paper); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.ca-art .a-ink-thin{ fill:none; stroke:var(--ink-paper); stroke-width:1.1 }
.ca-art .a-onto{ fill:none; stroke:var(--paper); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round }
.ca-art .a-onto-thin{ fill:none; stroke:var(--paper); stroke-width:1.2 }
.ca-art .a-dot{ fill:var(--ink-paper) }
.ca-art .a-x{ fill:none; stroke:var(--sub-avoda); stroke-width:2.4;
  stroke-linecap:round }
.ca-art .a-edge{ fill:none; stroke:var(--ink-paper); stroke-width:2.4 }
/* The register chips are chartreuse and cream: 1.12:1 and 1.36:1 against the
   board by luminance, i.e. WCAG cannot see their edges even though the eye
   can. So the edge is drawn, and the fill only colours what the line already
   bounds — the same repair the site already makes with --paper-line. */
.ca-art .a-chips rect{ stroke:var(--ink-paper); stroke-width:1 }
/* the open spread inside the head — line engraving, not a filled object */
.ca-art .a-spread-ink{ fill:var(--ink-paper); opacity:.9 }
/* Stroke widths are pre-multiplied for the group's scale(.72) and for the
   620→390 viewport scale on a phone: a width of W lands at W×0.45 device px
   at 390. Anything under ~0.8 aliases away on the screen that matters. */
.ca-art .a-leaf{ fill:var(--paper-2); stroke:var(--ink-paper); stroke-width:2.6 }
.ca-art .a-gutter{ fill:url(#caHatch); opacity:.6 }
.ca-art .a-set{ fill:none; stroke:var(--ink-paper); stroke-width:1.8; opacity:.8 }
.ca-art .a-mark{ fill:none; stroke:var(--mark); stroke-width:4.2;
  stroke-linecap:round; stroke-linejoin:round }

/* ══ PLACEMENT ════════════════════════════════════════════════════════════
   Two shapes of picture exist so far, and they are placed differently.

   A PLATE is a picture in the flow: it occupies its own band, it may be
   looked at, and it costs the page height. A WASH is a picture behind
   something else: it is absolutely positioned, it costs the page NOTHING,
   and it must never move a single pixel of type. Anything a wash is placed
   inside gets `position:relative`, and the wash is `inset` + `z-index:0`
   with the type above it — never the other way round, because an absolutely
   positioned element later in source order paints over its siblings.
   ══════════════════════════════════════════════════════════════════════════ */
.ca-plate-b{ margin:0 }
.ca-plate-b .ca-art{ display:block; inline-size:100%; block-size:auto }

.ca-wash{ position:absolute; z-index:0; pointer-events:none;
  inline-size:100%; block-size:auto }
/* A wash is under type, so it is tone, not drawing. The value is set on the
   instance, not here — a wash over a hero and a wash under body copy do not
   want the same one, and picking the number without looking at the render is
   how a picture ends up either invisible (L-D14) or in the reader's way. */