/* ==========================================================================
   Before and after, boxes (tools/exhibit_before_after.py), from the A1 design.
   Uses the shared slide classes in house.css for its arrow; the switch between
   the slide and its stacked version is in matrix.css. The ochre and the teal
   are the site's (--gold-line, --graphic); the other colours are the design's
   own, for the dark ground of the locked Noir direction.
   ========================================================================== */

.ex-ba {
  --ba-fg: #ece6da;
  --ba-muted: #9fb1b8;
  --ba-faint: #7f97a0;
  --ba-divider: #24404d;
  --ba-ws: #183543;
  --ba-ws-line: #2c4f5c;
  --ba-ws-text: #d7dfe0;
  --ba-figure: #e8c35e;
}

/* --- Before: the tangle ----------------------------------------------------- */
.ex-ba-link {
  fill: none;
  stroke: var(--ba-muted);
  stroke-opacity: 0.3;
  stroke-width: 1;
  stroke-linecap: round;
}

.ex-ba-link--ad-hoc {
  stroke-opacity: 0.45;
  stroke-dasharray: 3 4;
}

/* An ad-hoc forum: its fill is the frame's ground, so the lines stop at its ring. */
.ex-ba-hub {
  fill: var(--plate);
  stroke: var(--ba-muted);
  stroke-width: 1.25;
}

.ex-ba-hub-key {
  fill: none;
  stroke: var(--ba-muted);
  stroke-width: 1.25;
}

.ex-ba-ws {
  fill: var(--ba-ws);
  stroke: var(--ba-ws-line);
  stroke-width: 1;
}

/* --- After: the figure, its tree and the grid -------------------------------- */
.ex-ba-figure-box {
  fill: var(--gold-line);
  fill-opacity: 0.08;
  stroke: var(--gold-line);
  stroke-width: 1.5;
}

.ex-ba-tree {
  fill: none;
  stroke: var(--gold-line);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.ex-ba-grid {
  fill: var(--graphic);
  fill-opacity: 0.06;
  stroke: var(--graphic);
  stroke-opacity: 0.35;
  stroke-width: 1;
}

/* --- Frame: divider and the circled arrow ----------------------------------- */
.ex-ba-divider {
  fill: none;
  stroke: var(--ba-divider);
  stroke-width: 1;
  stroke-linecap: round;
}

.ex-ba-ring {
  fill: var(--plate);   /* the frame's ground: masks the divider as the design's background does */
  stroke: var(--gold-line);
  stroke-width: 1;
}

.ex-ba-turn .ex-sl-ic {
  stroke-width: 1.75;
}

/* --- Type ------------------------------------------------------------------ */
.ex-ba-kicker,
.ex-ba-sub,
.ex-ba-ws-text,
.ex-ba-figure-note,
.ex-ba-note {
  font-family: var(--font-body);
}

.ex-ba-kicker {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
}

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

.ex-ba-title {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 500;
  fill: var(--ba-fg);
}

.ex-ba-sub {
  font-size: 14px;
  font-weight: 400;
  fill: var(--ba-muted);
}

.ex-ba-ws-text {
  font-size: 12px;
  font-weight: 400;
  fill: var(--ba-ws-text);
}

/* The headline figure: lining numerals, as every figure on the site (Cormorant's
   default old-style digits read "1,500" as "I,5OO"). */
.ex-ba-figure {
  font-family: var(--font-display);
  font-size: 124px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums;
  fill: var(--ba-figure);
}

.ex-ba-figure-note {
  font-size: 14px;
  font-weight: 400;
  fill: var(--ba-fg);
}

.ex-ba-figure-note__b {
  font-weight: 600;
}

.ex-ba-note {
  font-size: 12px;
  font-weight: 400;
  fill: var(--ba-faint);
}

/* Stacked version: the sizes in BA_TALL_SCALE (exhibit_before_after.py). */
.exhibit__svg--tall .ex-ba-title { font-size: 26px; }