/* Everything Is Related — stage styles. Chrome, the sea and the wipes come from
   ../kit/film-kit.css. The figure's lines, labels and disc follow the model page
   (../../DRM/site/app/styles.css, .drm-rel and .drm-core rules). */

:root {
  --c-outcomes: #34708b;
  --c-activities: #5d7b49;
  --c-assessment: #a25e2e;
  --warn: #b7822f;
}

/* ---------- the mobile ---------- */
.m-thread { stroke: var(--ink-soft); stroke-width: 1.1; }
.m-bar { stroke: var(--ink); stroke-width: 3.2; stroke-linecap: round; }
.m-label { font-size: 11.5px; letter-spacing: 0.06em; fill: var(--ink-soft); }
.fly-disc { fill: var(--ink); }
.fly-tri { stroke: var(--ink); stroke-width: 1.4; stroke-linejoin: round; }
.weight rect { fill: var(--ink); }
.weight-t { font-size: 12px; font-weight: 600; fill: var(--paper); }

/* ---------- title ---------- */
.title-word { font-size: 84px; font-weight: 500; letter-spacing: -0.02em; fill: var(--ink); }
.title-b { font-style: italic; }
.title-kicker { font-size: 12.5px; letter-spacing: 0.2em; fill: var(--ink-soft); }

/* ---------- the figure, after the model page ---------- */
.rel-line { fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; }
.rel-hd { fill: currentColor; }
.rel.kind-ring { color: #b3aa94; }
.rel.kind-ring .rel-line { stroke-width: 1.2; }
.rel.kind-cond { color: #938a78; }
.rel.kind-spoke { color: var(--ink-soft); }
.rel.kind-spine { color: #2f332b; }
.rel.kind-spine .rel-line { stroke-width: 2.5; }
.rel.is-lit { color: var(--warn); }
.rel.is-lit .rel-line { stroke-width: 3; }
.rel-flow { fill: none; stroke: var(--paper); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1.5 14.5; }
.rel.is-lit .rel-flow { stroke: #fcfaf4; }
.core-disc { fill: var(--ink); }
.core-halo { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.core-word { font-size: 23px; font-weight: 500; fill: var(--paper); }
.core-sub { font-size: 9.5px; letter-spacing: 0.14em; fill: var(--hair-strong); }
.ca-label { font-size: 11px; letter-spacing: 0.14em; fill: var(--muted); paint-order: stroke; stroke: #ebe6da; stroke-width: 5px; stroke-linejoin: round; }
.el-label { font-family: var(--font-ui); font-weight: 600; font-size: 18px; letter-spacing: 0.01em; fill: var(--muted); }
.el-outcomes { fill: var(--c-outcomes); }
.el-activities { fill: var(--text-green); }
.el-assessment { fill: var(--text-brown); }
.badge circle { fill: var(--ink); }
.badge-t { font-size: 11px; font-weight: 600; fill: var(--paper); }
.walker { fill: var(--warn); stroke: var(--paper); stroke-width: 2; }
.walk-trail { fill: none; stroke: var(--warn); stroke-width: 2.4; stroke-dasharray: 2 6; stroke-linecap: round; }

/* ---------- overlays ---------- */
.dk-word { font-size: 46px; font-style: italic; fill: var(--ink); }
.dk-every { font-size: 20px; font-style: italic; fill: var(--muted); }
.dk-strike { stroke: var(--danger); stroke-width: 2.2; stroke-linecap: round; }
.dk-nordic { font-size: 46px; font-weight: 500; fill: var(--ink); }
.dk-q { font-size: 30px; font-style: italic; fill: var(--ink-soft); }
.dk-why { font-size: 40px; font-weight: 600; fill: var(--ink); }
.given-tag { font-size: 10.5px; letter-spacing: 0.16em; fill: var(--muted); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.moves-tag { font-size: 10.5px; letter-spacing: 0.12em; fill: var(--text-ochre); font-weight: 600; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.ghost { fill: none; stroke: var(--warn); stroke-width: 1.6; stroke-dasharray: 4 4; }
.an-line { font-size: 25px; font-style: italic; fill: var(--ink); }
.an-src { font-size: 11.5px; letter-spacing: 0.14em; fill: var(--muted); }

/* ---------- chapter 3 ---------- */
.session-card { fill: var(--card); stroke: var(--hair-strong); stroke-width: 1.2; }
.session-kicker { font-size: 11px; letter-spacing: 0.18em; fill: var(--muted); }
.session-line { font-size: 20px; fill: var(--ink); }
.session-fact { fill: var(--ink-soft); }
.hi-ink { fill: var(--ink); }
.hi-warn { fill: var(--text-ochre); }
.note-line { font-size: 19px; font-style: italic; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; stroke-linejoin: round; }
.starts-tag { font-size: 10.5px; letter-spacing: 0.16em; font-weight: 600; fill: var(--text-ochre); }
.stays-tag { font-size: 10.5px; letter-spacing: 0.16em; fill: var(--ink-soft); paint-order: stroke; stroke: var(--paper); stroke-width: 4px; }
.hit-ring, .pulse-ring { fill: none; stroke: var(--warn); stroke-width: 2; }

/* ---------- chapter 4: the older models, in ink and greys ---------- */
.bl-line { fill: none; stroke: var(--ink); stroke-width: 1.4; }
.bl-arc { fill: none; stroke: var(--ink); stroke-width: 1.2; }
.bl-hd { fill: var(--ink); }
.hh-circle { fill: none; stroke: #8a8272; stroke-width: 1.4; }
.hh-line { fill: none; stroke: #6b6557; stroke-width: 1.3; }
.hh-hd { fill: #6b6557; }
.old-label { font-size: 19px; font-style: italic; fill: var(--ink); paint-order: stroke; stroke: var(--paper); stroke-width: 5px; }
.split { fill: var(--ink); }
.inn-note { font-size: 17px; font-style: italic; fill: var(--ink-soft); }
.year { font-size: 110px; font-weight: 500; fill: none; stroke: var(--ink); stroke-width: 1.6; }
.who { font-size: 12px; letter-spacing: 0.18em; fill: var(--ink-soft); }

/* ---------- lower third and wipes ---------- */
.chapter-label { font-size: 12.5px; font-weight: 500; letter-spacing: 0.18em; fill: var(--ink); }
.wipe-change .wipe-shape { fill: var(--warn); }
.wipe-history .wipe-shape { fill: var(--ink); }

/* the big Play button on the opening frame: between the disc and the hanging shapes */
.screen { --play-x: 37.5%; --play-y: 50%; }