/* ==========================================================================
   Slide exhibits kept in their own modules (tools/exhibit_slide.py), starting
   with the proposition house (tools/exhibit_house.py), from the Option A design.
   Like the matrix, the case page shows the slide full width above "At a glance"
   from 64em up, and the stacked version below that: the switch between the two
   and the full-width grid are in matrix.css, shared by every wide exhibit.
   The ochre and the teal are the site's (--gold-line, --graphic); the other
   colours are the design's own, for the dark ground every exhibit sits on in
   the locked Noir direction (a light --plate would need its own values).
   ========================================================================== */

/* --- Shared by the slides (ex-sl-*) ---------------------------------------- */
.ex-sl {
  --sl-fg: #ede8dd;
  --sl-ink: #0f232d;
  --sl-steel: #b7c6cb;
  --sl-muted: #9db1b8;
  --sl-faint: #7f97a0;
  --sl-panel: #10242e;
  --sl-line: #3b5965;
  --sl-tile: rgba(157, 177, 184, 0.12);
  --sl-teal-soft: #5cc3c0;
}

.ex-sl-path,
.ex-sl-head,
.ex-sl-kicker,
.ex-sl-name {
  font-family: var(--font-body);
}

.ex-sl-path {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  fill: var(--sl-muted);
}

.ex-sl-path__end {
  fill: var(--gold-line);
}

.ex-sl-title {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-sl-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ex-sl-head--gold { fill: var(--gold-line); }
.ex-sl-head--steel { fill: var(--sl-steel); }

.ex-sl-kicker {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.ex-sl-kicker--faint { fill: var(--sl-faint); }
.ex-sl-kicker--muted { fill: var(--sl-muted); }
.ex-sl-kicker--gold { fill: var(--gold-line); }

.ex-sl-name {
  font-size: 15px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-sl-card {
  fill: var(--sl-panel);
  stroke: var(--sl-line);
  stroke-width: 1;
}

.ex-sl-tile {
  fill: var(--sl-tile);
}

/* Line icons: drawn on a 24-unit grid and scaled, so strokes scale with them. */
.ex-sl-ic {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ex-sl-ic--gold { stroke: var(--gold-line); }
.ex-sl-ic--muted { stroke: var(--sl-muted); }
.ex-sl-ic--teal { stroke: var(--sl-teal-soft); }
.ex-sl-ic--ink { stroke: var(--sl-ink); }

.ex-sl-ic--steel {
  stroke: var(--sl-steel);
  stroke-width: 1.75;
}

/* Stacked version: the sizes in TALL_SCALE (exhibit_slide.py); a test keeps them in step. */
.exhibit__svg--tall .ex-sl-path { font-size: 11px; }
.exhibit__svg--tall .ex-sl-title { font-size: 26px; }
.exhibit__svg--tall .ex-sl-kicker { font-size: 11px; }

/* --- Proposition house (ex-hs-*) ------------------------------------------- */
.ex-hs {
  --hs-base: #1b3b47;
  --hs-rule: #27454f;
  --hs-leader: #4f6e79;
}

.ex-hs-roof {
  fill: var(--gold-line);
}

.ex-hs-roof-kicker,
.ex-hs-bar,
.ex-hs-item,
.ex-hs-base-name,
.ex-hs-body {
  font-family: var(--font-body);
}

.ex-hs-roof-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  fill: var(--sl-ink);
}

.ex-hs-roof-text {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  fill: var(--sl-ink);
}

/* The beam (market priorities) and the foundation (shared ways of working). */
.ex-hs-beam {
  fill: var(--sl-panel);
  stroke: var(--gold-line);
  stroke-opacity: 0.6;
  stroke-width: 1;
}

.ex-hs-ways {
  fill: var(--graphic);
  fill-opacity: 0.1;
  stroke: var(--graphic);
  stroke-opacity: 0.6;
  stroke-width: 1;
}

.ex-hs-bar {
  font-size: 13px;
  font-weight: 400;
  fill: var(--sl-steel);
}

.ex-hs-bar__b {
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-hs-rule {
  fill: var(--hs-rule);
}

.ex-hs-item {
  font-size: 12px;
  font-weight: 400;
  fill: var(--sl-steel);
}

.ex-hs-base {
  fill: var(--hs-base);
  stroke: var(--sl-line);
  stroke-width: 1;
}

.ex-hs-base-name {
  font-size: 14px;
  font-weight: 600;
  fill: var(--sl-fg);
}

.ex-hs-plus {
  fill: var(--gold-line);
}

.ex-hs-leader {
  fill: none;
  stroke: var(--hs-leader);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ex-hs-body {
  font-size: 14px;
  font-weight: 400;
  fill: var(--sl-fg);
}

/* Stacked version: the sizes in HS_TALL_SCALE (exhibit_house.py). */
.exhibit__svg--tall .ex-hs-roof-text { font-size: 20px; }