/* The programme's plates (ManyWays::Plate): their palette and assembly,
   shared by every page that shows them — the course landing's programme
   composition (course_landing_programme.css builds on this sheet) and the
   workshops page. A page that shows plates carries the `plates` class on
   its root and links this sheet. The palette is the series' own art
   (DESIGN.md, The Plate Palette Exception): defined once for the day and
   once for the night, read only inside a plate through the f-* fills, never
   by UI, text, a control or a surface. */

.plates {
  /* the plates' palette — day: the series' own colours, anchored on the
     brand's teal (forest) and ochre */
  --pl-teal: #4E8E8A;
  --pl-cream: #F3E5BC;
  --pl-mauve: #B4879A;
  --pl-mist: #D2DCDC;
  --pl-lagoon: #8DC1BA;
  --pl-shell: #F7EADD;
  --pl-rose: #E8B3A4;
  --pl-coral: #D07C62;
  --pl-vermilion: #CC5C3A;
  --pl-terracotta: #B65638;
  --pl-orange: #D9893D;
  --pl-ochre: #C99A3F;
  --pl-sage: #B3C098;
  --pl-moss: #8DA88A;
  --pl-grey: #A0B0AC;
  --pl-slate: #6C807A;
  --pl-forest: #3E6F6B;
  --pl-pale: #E2E9D7;
  --pl-peach: #EEC6A9;
  --pl-fog: #D6DADE;
  --pl-blush: #E29E95;
}
/* the plates by night: the same colours under a lower lamp, so the art
   keeps its hues without glaring off the night paper */
:root[data-theme="dark"] .plates {
  --pl-teal: #3F7470;
  --pl-cream: #C9BD98;
  --pl-mauve: #94707F;
  --pl-mist: #A9B3B3;
  --pl-lagoon: #6E9F99;
  --pl-shell: #CDC2B6;
  --pl-rose: #BE9385;
  --pl-coral: #AE6750;
  --pl-vermilion: #A84B2F;
  --pl-terracotta: #95462E;
  --pl-orange: #B47131;
  --pl-ochre: #D9AE56;
  --pl-sage: #939E7C;
  --pl-moss: #738B71;
  --pl-grey: #83918E;
  --pl-slate: #586A64;
  --pl-forest: #31575A;
  --pl-pale: #BAC1B1;
  --pl-peach: #C5A48C;
  --pl-fog: #AFB3B7;
  --pl-blush: #BA827A;
}

/* ── the plates ── */
.clp-plate { display: block; width: 100%; height: auto; isolation: isolate; }
.clp-plate .m { mix-blend-mode: multiply; opacity: .92; }
.clp-plate .f-teal { fill: var(--pl-teal); }
.clp-plate .f-cream { fill: var(--pl-cream); }
.clp-plate .f-mauve { fill: var(--pl-mauve); }
.clp-plate .f-mist { fill: var(--pl-mist); }
.clp-plate .f-lagoon { fill: var(--pl-lagoon); }
.clp-plate .f-shell { fill: var(--pl-shell); }
.clp-plate .f-rose { fill: var(--pl-rose); }
.clp-plate .f-coral { fill: var(--pl-coral); }
.clp-plate .f-vermilion { fill: var(--pl-vermilion); }
.clp-plate .f-terracotta { fill: var(--pl-terracotta); }
.clp-plate .f-orange { fill: var(--pl-orange); }
.clp-plate .f-ochre { fill: var(--pl-ochre); }
.clp-plate .f-sage { fill: var(--pl-sage); }
.clp-plate .f-moss { fill: var(--pl-moss); }
.clp-plate .f-grey { fill: var(--pl-grey); }
.clp-plate .f-slate { fill: var(--pl-slate); }
.clp-plate .f-forest { fill: var(--pl-forest); }
.clp-plate .f-pale { fill: var(--pl-pale); }
.clp-plate .f-peach { fill: var(--pl-peach); }
.clp-plate .f-fog { fill: var(--pl-fog); }
.clp-plate .f-blush { fill: var(--pl-blush); }