/* ============================================================
   art.css — original illustrations for the case studies
   ------------------------------------------------------------
   Six pieces of drawn artwork, one per case card. Each is an
   inline SVG sized to a 188×84 plate, so it scales with the card
   and costs one HTTP request less than an image would.

   Everything is drawn in the design system's own tokens: the
   ink/blue/muted ramp, --line for hairlines, and the blue tints
   already used by .case-glyph. Nothing here introduces a colour
   the rest of the site does not already use, so the plates sit
   inside the design system rather than on top of it.

   The plates are decorative — every card already carries a real
   <h2> and a sentence describing the work — so each SVG is
   aria-hidden and labelled by the card heading instead. If a
   plate ever became the only description of a case, that would
   be the moment to give it a role="img" and a real label.

   Three stroke weights, and the gaps between them are the whole
   drawing: 1px hairlines (.plate-line, .plate-faint) for anything
   structural, 1.6px for the subjects themselves, and flat fills for
   anything that should read as solid mass. The plates are drawn in a
   188×84 window with the subject centred and the dot grid running to
   the edges. In a two-up grid at the full 1160px wrap a plate comes
   out around 566×252 — large enough that the drawings read as
   illustrations rather than as icons, short enough that the words
   under them stay the point of the card.
   ============================================================ */

/* ---------- the plate ---------- */

.case-plate{
  position:relative;
  display:block;
  overflow:hidden;
  margin:-22px -22px 0;
  border-bottom:1px solid var(--line);
  border-radius:6px 6px 0 0;   /* the card's own radius, minus the 1px border */
  background:linear-gradient(168deg,#fbf4e8 0%,#f3e6d8 55%,#edd7c0 100%);
}

.case-plate svg{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:188/84;
}

/* The faint dot grid that every plate is drawn over is a <pattern>
   sitting inside that plate's own <defs> — it has to be, because one
   shared id would mean six plates on the same page racing to define
   it. Identical markup six times beats an id that is only ever right
   for whichever plate happens to render first. The identical geometry
   is what makes the six read as one set rather than six pictures. */

/* Every plate shares one hairline treatment. */
.plate-line{
  fill:none;
  stroke:var(--line-strong);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-faint{
  fill:none;
  stroke:#dfc9b1;
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-ink{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-ink-fill{fill:var(--ink)}
.plate-muted{
  fill:none;
  stroke:var(--muted);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-blue{
  fill:none;
  stroke:var(--blue);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-blue-fill{fill:var(--blue)}
.plate-mint{
  fill:none;
  stroke:var(--mint);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-mint-fill{fill:var(--mint)}
/* The one place --amber appears: a single data point on the sparkline,
   so the eye has one warm mark to land on in an otherwise cool plate. */
.plate-amber-fill{fill:var(--amber)}
.plate-cyan{
  fill:none;
  stroke:var(--cyan);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.plate-cyan-fill{fill:var(--cyan)}
/* The one dashed line in the set, and it earns it: it draws the empty
   slot on the last card, so the dashes read as "not filled in yet"
   rather than as another outline. */
.plate-dash{stroke-dasharray:3 4}
.plate-wash{fill:var(--blue-pale)}
.plate-wash-2{fill:#eacfb2}

/* The paper-plane, reused by the two cards that are about sending
   something somewhere. */
.plate-plane{
  fill:none;
  stroke:var(--ink);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}
/* ...but the plane itself is filled, not outlined. The silhouette is
   only about 13 units nose-to-tail, so at plate scale an outline is
   wider than the gaps it is meant to enclose and the whole thing
   collapses into a scribble. Filled, it is a plane on sight. The fold
   is then cut back out in the plate's own background colour, which is
   what makes a flat wedge read as folded paper rather than as an
   arrowhead. */
.plate-plane-solid{fill:var(--ink)}
.plate-plane-crease{
  fill:none;
  stroke:#f3e6d8;
  stroke-width:1;
  stroke-linecap:round;
}
/* The shield and the chevron on the last card each need a filled
   shape as well as an outline. The fill path is written *before* the
   stroke path in the markup so the tint passes underneath, which is
   what lets this be an opaque pale: a stroke straddles its own path,
   so a fill drawn on top at full strength would bury the inner half
   of the outline it is meant to be sitting behind. */
.plate-plane-fill{fill:var(--blue-pale)}

/* Two small labels carry the only words in the artwork: the version
   on the release card and the /100 on the one that claims a perfect
   score. Both are set in the site's mono at plate scale, so they
   read as annotation rather than as headings — and both say the
   same thing as the sentence directly beneath them, which is the
   point: the drawing and the claim agree. */
.plate-tiny{
  fill:#fff;
  font:500 8px var(--mono);
  letter-spacing:-.02em;
}
.plate-score{
  fill:var(--faint);
  font:500 8px var(--mono);
  letter-spacing:.02em;
}

/* ---------- one slow sweep, opt-in per plate ---------- */

/* Applied to a single class inside a plate. The sweep travels once
   and then stops: it has already read as a scan by the time anyone
   has finished looking at it, and a loop would be motion for its
   own sake. Paired with the reduced-motion override at the foot. */
.plate-sweep{
  fill:none;
  stroke:var(--blue);
  stroke-width:1.6;
  stroke-linecap:round;
  animation:plateSweep 5.2s var(--ease) .9s both;
}
@keyframes plateSweep{
  from{transform:translateX(-60px);opacity:0}
  20%{opacity:.85}
  to{transform:translateX(190px);opacity:0}
}

/* ---------- the one thing that can move, when motion is welcome ---------- */

/* A soft pulse on the grader's score badge — the one place on the
   page where something being *live* rather than archived is the
   point of the picture. Slow enough to read as a heartbeat. */
.plate-pulse{
  transform-box:fill-box;
  transform-origin:center;
  animation:platePulse 3.4s ease-in-out infinite;
}
@keyframes platePulse{
  0%,100%{transform:scale(1);opacity:.55}
  50%{transform:scale(1.16);opacity:0}
}

/* ---------- gates ---------- */

/* No script: motion.css has already made the same call with a
   .lean class, so this only has to cover the reduced-motion case
   and any future engine that sets it without that class. */
@media (prefers-reduced-motion:reduce){
  .plate-sweep{animation:none;display:none}
  .plate-pulse{animation:none}
}

/* Print: the plates are illustrative, and a 15% of a page spent on
   ornament is a page spent on nothing. The facts beneath each one
   carry the same information in words. */
@media print{
  .case-plate{display:none!important}
}

/* ---------- narrow ---------- */

/* Below the 620px breakpoint the plate keeps its ratio and just gets
   narrower — the padding is what needs to go, since the card is
   already tight at that width. */
@media(max-width:620px){
  .case-plate{margin:-18px -18px 0;border-radius:6px 6px 0 0}
}