/* ==========================================================================
   corporate-memphis-theme / illustration layer
   --------------------------------------------------------------------------
   The half of this register that tokens cannot carry: the scenes themselves,
   the background shapes they sit on, and the rules for pairing a picture with
   a paragraph.

   This file and illustrations/ are separable from the rest of the theme.
   Delete both and everything still works, quietly, and the theme lands on the
   ordinary SaaS register. That deletion is a real move along the framework's
   sensory ambition axis and CUSTOMIZE.md works it in both directions.

   Every value here is a var() reference to tokens.css. There is not one color
   literal in this file.

   Requires tokens.css. Load it, then components.css, then this:

     <link rel="stylesheet" href="tokens/tokens.css" />
     <link rel="stylesheet" href="components/components.css" />
     <link rel="stylesheet" href="components/illustration.css" />

   THE SVGs IN illustrations/ ARE MEANT TO BE INLINED into your markup rather
   than loaded through <img>. An SVG in an <img> is an isolated document that
   cannot read the page's custom properties, so it would have to carry its own
   color values and the single source of truth would be gone. Inlined, the
   paint rules below reach them. Opened on their own the files stay correct,
   because each shape carries a presentation attribute holding the same value
   the token holds. Those attributes are the fallback, not the source: if you
   change a color, change it in tokens.css and let the paint rules below carry
   it, and treat the attributes as what the file looks like to a viewer that
   has never seen your stylesheet.
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAINT
   Two families, because a class cannot serve both. CSS beats a presentation
   attribute, so a single .cm-art-coral setting fill would fill the limb
   strokes as well and turn every figure into a blob. Fill classes paint fills,
   stroke classes paint strokes, and nothing carries both.
   -------------------------------------------------------------------------- */
.cm-art-fill-coral {
  fill: var(--cm-illo-coral);
}

.cm-art-fill-teal {
  fill: var(--cm-illo-teal);
}

.cm-art-fill-mustard {
  fill: var(--cm-illo-mustard);
}

.cm-art-fill-plum {
  fill: var(--cm-illo-plum);
}

.cm-art-fill-sky {
  fill: var(--cm-illo-sky);
}

.cm-art-fill-skin-1 {
  fill: var(--cm-illo-skin-1);
}

.cm-art-fill-skin-2 {
  fill: var(--cm-illo-skin-2);
}

.cm-art-fill-line {
  fill: var(--cm-illo-line);
}

.cm-art-fill-paper {
  fill: var(--cm-illo-paper);
}

.cm-art-fill-blob-1 {
  fill: var(--cm-blob-1);
}

.cm-art-fill-blob-2 {
  fill: var(--cm-blob-2);
}

.cm-art-stroke-coral {
  stroke: var(--cm-illo-coral);
}

.cm-art-stroke-teal {
  stroke: var(--cm-illo-teal);
}

.cm-art-stroke-mustard {
  stroke: var(--cm-illo-mustard);
}

.cm-art-stroke-plum {
  stroke: var(--cm-illo-plum);
}

.cm-art-stroke-sky {
  stroke: var(--cm-illo-sky);
}

.cm-art-stroke-skin-1 {
  stroke: var(--cm-illo-skin-1);
}

.cm-art-stroke-skin-2 {
  stroke: var(--cm-illo-skin-2);
}

.cm-art-stroke-line {
  stroke: var(--cm-illo-line);
}

.cm-art-stroke-blob-1 {
  stroke: var(--cm-blob-1);
}

.cm-art-stroke-blob-2 {
  stroke: var(--cm-blob-2);
}

/* The paper copies inside each scene are left as bare white attributes rather
   than given a class. They are structural rather than decorative: their job is
   to be the same color as whatever the scene sits on, and a retheme that moved
   them to a tinted value would put a visible outline around every limb. If you
   place a scene on something other than a near-white ground, change
   --cm-illo-paper and add .cm-art-fill-paper to those shapes in the file. */

/* --------------------------------------------------------------------------
   SIZING
   A scene scales with its column up to a ceiling. Past that ceiling the
   picture grows taller than the copy beside it, the reader reads the picture
   first, and the headline becomes a caption.
   -------------------------------------------------------------------------- */
.cm-illo {
  display: block;
  width: 100%;
  height: auto;
}

.cm-illo-scene {
  max-width: var(--cm-illo-max);
}

.cm-illo-spot {
  width: var(--cm-illo-spot);
  height: var(--cm-illo-spot);
}

/* --------------------------------------------------------------------------
   PAIRING
   The composition rule of this register: one block of copy, one scene, on one
   row, at a ratio that keeps the copy first.

   --cm-illo-share is the picture column's fraction against the copy column's
   1fr. Below 900px the pair stacks and the picture goes second, because a
   picture above a headline on a phone costs the reader a screen of scrolling
   before they learn what the page is.

   Set --cm-illo-share to 0fr and the picture column collapses. The rest of the
   composition holds, which is what makes the zero-illustration variant in
   CUSTOMIZE.md a token change rather than a rebuild.
   -------------------------------------------------------------------------- */
.cm-pair {
  display: grid;
  gap: var(--cm-space-10);
  align-items: center;
}

@media (min-width: 900px) {
  .cm-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--cm-illo-share));
    gap: var(--cm-space-14);
  }

  /* The reversed pair puts the picture first on desktop and leaves it second
     in the source, so the reading order a screen reader follows stays the one
     the page is written in. */
  .cm-pair-reverse {
    grid-template-columns: minmax(0, var(--cm-illo-share)) minmax(0, 1fr);
  }

  .cm-pair-reverse > :first-child {
    order: 2;
  }

  .cm-pair-reverse > :last-child {
    order: 1;
  }
}

/* The figure a scene sits in. It carries the background shape, so the shape
   is positioned against the picture rather than against the section, and the
   two travel together when the layout moves. */
/* The vertical padding is the background shape's overhang, reserved. A blob is
   wider than the 4:3 scene it sits behind is tall, so it sticks out above and
   below by roughly a sixth of its width. Without this the stacked layout put
   the blob over the paragraph above it, because the gap between the two grid
   rows is not the blob's to spend. */
.cm-illo-plate {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding-block: var(--cm-space-10);
  min-width: 0;
}

.cm-illo-plate > .cm-illo-scene {
  position: relative;
  z-index: 1;
}

/* --------------------------------------------------------------------------
   BACKGROUND SHAPES
   A blob or an arc stack behind a scene. These are the register's other tell
   and the easiest thing to overdo: one shape per block, never two, and never
   one behind a block that already has a tinted background.

   The shape runs past the plate by --cm-blob-bleed so it reads as a piece of
   something larger rather than as a second object the same size as the first.
   The page needs overflow-x: clip for that to stay off the horizontal scroll.
   -------------------------------------------------------------------------- */
/* Placed explicitly rather than left to the static position. An absolutely
   positioned child of a flex container inherits its box from the container's
   alignment, which is real behavior and the wrong thing to depend on: change
   align-items on the plate and the shape moves for reasons nothing in this
   file mentions. */
.cm-illo-blob,
.cm-illo-arc {
  position: absolute;
  left: 50%;
  z-index: 0;
  height: auto;
  pointer-events: none;
}

.cm-illo-blob {
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% + var(--cm-blob-bleed));
  max-width: var(--cm-blob-size);
}

.cm-illo-arc {
  bottom: var(--cm-space-10);
  transform: translateX(-50%);
  width: calc(100% + var(--cm-blob-bleed));
  max-width: var(--cm-arc-size);
}

/* --------------------------------------------------------------------------
   SPOTS IN CARDS
   The spot sits in the fixed square .cm-card-spot reserves for it, on a tinted
   pad. The pad is what stops three spots in a row reading as three unrelated
   drawings: a shared frame is cheaper than shared subject matter and works
   even when the three scenes have nothing to do with each other.
   -------------------------------------------------------------------------- */
.cm-card-spot-1 {
  background: var(--cm-blob-1);
}

.cm-card-spot-2 {
  background: var(--cm-blob-2);
}

.cm-card-spot-3 {
  background: var(--cm-fill-info);
}

/* The card row lives in components.css rather than here, even though the spot
   pads above are the reason it usually has three columns. Deleting this file
   is a move along the sensory axis, and a sensory move that silently restacks
   every card row on the site is doing something it did not say it would. That
   was found by deleting the layer and looking at the page, not by reading. */

/* Nothing in this file animates. The scenes are static geometry, and a
   register this soft has nothing to gain from moving them. */