/* ==========================================================================
   Page illustrations — the paint for the inline SVGs in
   `templates/partials/illus.php`.

   ⚠️ ITS OWN FILE ON PURPOSE. The drawings are used by pages that share no
   other stylesheet (`/contact/feedback` loads contact.css, `/news` loads
   news.css), so these rules cannot live in either one — the first page to be
   given the illustration would work and the second would render an unpainted,
   invisible SVG. Any page that calls an `illus_*()` function must add
   `illus.css` to its `extraCss`.

   Everything here is DECORATION: no rule in this file positions anything, sizes
   the drawing, or hides it. That belongs to the page — `.fb-head__art` and
   `.nws-head__art` own the layout, this file owns the colours.

   The fills are TOKENS, which is the whole reason these are inline SVG rather
   than image files: the navy scoped to `.ct` / `.fb` / `.nws` reaches the
   artwork. A flat asset would have the old brand blue baked into it.
   ========================================================================== */

.il {
  inline-size: 100%;
  block-size: auto;
}

/* ---- shared parts ---- */

.il-ground { fill: var(--c-primary-soft); }   /* the pale disc behind it all */
.il-mark   { fill: var(--c-primary); }        /* speech bubble */
.il-dots   { fill: #fff; }

/* ---- /contact/feedback — envelope, card, pen, leaves ---- */

.il-paper    { fill: #fff; stroke: var(--c-line); stroke-width: 2; }
/* ⚠️ The envelope is PALE, not navy. Filled with the brand colour it became the
   heaviest thing on the page and swallowed the message card inside it — which
   is the one part of the drawing that carries the idea. Light envelope, navy
   bubble: the eye lands on the message. */
.il-env      { fill: #d5deee; }
.il-env-face { fill: #edf1f8; }
.il-env-edge { fill: none; stroke: #c2cfe3; stroke-width: 2; }
.il-leaf     { fill: #a9bacf; }
.il-stem     { fill: none; stroke: #a9bacf; stroke-width: 3; stroke-linecap: round; }
.il-pen      { fill: var(--c-ink); }
.il-pen-grip { fill: var(--c-primary); }
.il-pen-nib  { fill: #c8d0dc; }
.il-pen-clip { fill: #c8d0dc; }

/* ---- /news — a stack of paper ---- */

.il-sheet      { fill: #fff; stroke: var(--c-line); stroke-width: 2; }
.il-sheet-back { fill: #dfe6f2; }
.il-block      { fill: #d7e0ef; }
.il-block-sun  { fill: #fff; }
.il-block-hill { fill: #b3c2da; }
.il-line rect  { fill: #e2e8f2; }
.il-head-rule  { fill: var(--c-primary); }

/* ---- /about/awards — a star trophy on a plinth ---- */

/* ⚠️ The cup is the BRAND BLUE, not gold. Gold would be the literal reading of
   a trophy, but nothing else on this site is gold and one gold object in a navy
   palette reads as a stock graphic dropped in. The star carries the "award"
   idea on its own. */
.il-awd-cup     { fill: var(--c-primary); }
.il-awd-cup-lip { fill: var(--c-primary-deep); }
.il-awd-shine   { fill: #fff; opacity: 0.22; }
.il-awd-handle  { fill: none; stroke: var(--c-primary-deep); stroke-width: 9; stroke-linecap: round; }
.il-awd-star    { fill: #fff; }
.il-awd-stem    { fill: var(--c-primary-deep); }
.il-awd-base    { fill: var(--c-primary-deep); }
.il-awd-plinth  { fill: #d5deee; }
.il-awd-plate   { fill: var(--c-green); }
.il-awd-shadow  { fill: #c2cfe3; opacity: 0.55; }
.il-awd-spark   { fill: var(--c-green); }