/* Open Hardware Archives — an index of engineering ideas.
   Swiss editorial: paper ground, hairline rules, one hot accent held in reserve
   for the concept currently being traced. Colour elsewhere is data, never decor. */

:root {
  color-scheme: light;

  --paper:       #ffffff;
  --wash:        #f7f7f7;
  --ink:         #111111;
  --ink-2:       #444444;
  --ink-3:       #777777;
  --rule:        #e4e4e4;
  --rule-strong: #bcbcbc;
  --rule-hard:   #111111;
  --src-article: #c93c22;
  --src-project: #2f83ab;
  --src-blog:    #b4b0a6;
  --accent:      #e8200d;

  /* Domain hues, deepened to hold their own on paper. No red: that is the accent. */
  --d-silicon:    #1f77b4;
  --d-firmware:   #5c4bb8;
  --d-fabrication:#d1600f;
  --d-rf:         #9467bd;
  --d-power:      #b8890b;
  --d-motion:     #178a5a;
  --d-sensing:    #17879e;
  --d-ai:         #cc3d8f;
  --d-retro:      #8c6d3f;
  --d-systems:    #6b7f8f;
  --d-science:    #5b8c1f;
  --d-human:      #a0506e;

  --sans: "Helvetica Neue", Helvetica, Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;

  --rail: 246px;
  --drawer: 372px;
  --timeline: 128px;
}

/* Dark is a counterpart, not an inversion: the ground is a soft near-black rather
   than pure black, the ink is warm off-white, structural rules step down instead of
   glaring, and every hue is re-picked for a dark ground rather than reused. */
:root[data-theme="dark"] {
  color-scheme: dark;

  --paper:       #0e0e0e;
  --wash:        #171717;
  --ink:         #efeeec;
  --ink-2:       #b4b2ae;
  --ink-3:       #85837f;
  --rule:        #262626;
  --rule-strong: #3d3d3d;
  --rule-hard:   #4a4a4a;
  --src-article: #ff5535;
  --src-project: #3aa6dd;
  --src-blog:    #2c3138;
  --accent:      #ff4f32;

  --d-silicon:    #6ab0e0;
  --d-firmware:   #9a8ce8;
  --d-fabrication:#efa463;
  --d-rf:         #c3a1e8;
  --d-power:      #e0c05a;
  --d-motion:     #5cc79a;
  --d-sensing:    #5fc2d4;
  --d-ai:         #ef83bd;
  --d-retro:      #c6a377;
  --d-systems:    #a2b4c0;
  --d-science:    #a8c85e;
  --d-human:      #dd93ab;
}

* { box-sizing: border-box; }

/* ------------------------------------------------------------------ links */
/* No anchor anywhere falls back to the browser's blue-and-underlined. Every
   link is ink until you point at it, and accent when you do; visited never
   turns purple. Specific components restyle on top of this. */

a {
  color: var(--ink);
  text-decoration: none;
}

a:visited { color: inherit; }
a:hover { color: var(--accent); }

a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}


/* Panels set display:flex, which would otherwise beat the UA rule for [hidden]. */
[hidden] { display: none !important; }

html, body { height: 100%; margin: 0; }

body {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

button, input { font-family: inherit; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

:focus-visible {
  outline: 1.5px solid var(--accent);
  outline-offset: 2px;
}

/* Small caps label, the workhorse of the whole interface. */
.masthead-stats dt,
.rail-block h2,
.mode,
.drawer-eyebrow,
.drawer-facts dt,
.drawer-block h3,
.timeline-label,
.stage-legend {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  display: flex;
  flex: none;
  align-items: flex-end;
  gap: 40px;
  padding: 16px 26px 13px;
  border-bottom: 1px solid var(--rule-hard);
}

.masthead-id h1 {
  margin: 0;
  font-size: 25px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.masthead-sub {
  margin: 0 0 4px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.masthead-search {
  position: relative;
  flex: 1;
  max-width: 340px;
  margin-left: auto;
}

#search {
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--rule-hard);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 14px;
}

#search::placeholder { color: var(--ink-3); }
#search:focus { outline: none; border-bottom-color: var(--accent); }

.suggestions {
  position: absolute;
  z-index: 40;
  top: calc(100% + 1px);
  left: 0; right: 0;
  max-height: 320px;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--rule-hard);
  background: var(--paper);
}

.suggestions li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}

.suggestions li:last-child { border-bottom: 0; }
.suggestions li:hover,
.suggestions li[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.suggestions li span { color: var(--ink-3); font-family: var(--mono); font-size: 11px; }
.suggestions li:hover span,
.suggestions li[aria-selected="true"] span { color: var(--paper); }

.masthead-stats {
  display: flex;
  gap: 28px;
  margin: 0;
}

.masthead-stats dt { color: var(--ink-3); }

.masthead-stats dd {
  margin: 2px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.theme-toggle {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: none;
  padding: 5px 9px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.theme-toggle:hover { border-color: var(--rule-hard); color: var(--ink); }

/* Half-filled disc: the state you are in, not an icon of the sun or moon. */
.theme-mark {
  width: 10px; height: 10px;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: linear-gradient(90deg, currentColor 50%, transparent 50%);
}

/* ------------------------------------------------------------------ layout */

.layout {
  display: grid;
  flex: 1;
  min-height: 0;
  grid-template-columns: var(--rail) 1fr;
}

.layout.has-drawer { grid-template-columns: var(--rail) 1fr var(--drawer); }

/* -------------------------------------------------------------------- rail */

.rail {
  overflow-y: auto;
  padding: 0 0 30px;
  border-right: 1px solid var(--rule);
}

.rail-modes {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--rule);
}

.mode {
  flex: 1 0 33.33%;
  padding: 11px 4px;
  border: 0;
  border-right: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
}

.mode:nth-child(3n) { border-right: 0; }
.mode:nth-child(n+4) { border-top: 1px solid var(--rule); }
.mode:hover { color: var(--ink); }
.mode.is-active { background: var(--ink); color: var(--paper); }

.rail-block { padding: 16px 16px 4px; }
.rail-block + .rail-block { border-top: 1px solid var(--rule); }

.rail-block h2 {
  margin: 0 0 9px;
  color: var(--ink-3);
}

.legend, .movers {
  margin: 0;
  padding: 0;
  list-style: none;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  cursor: pointer;
}

.legend li:last-child { border-bottom: 0; }
.legend li:hover { color: var(--accent); }
.legend li.is-muted { color: var(--rule-strong); }
.legend li.is-muted i { opacity: 0.25; }

.legend i {
  width: 8px; height: 8px;
  flex: none;
}

.legend em {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

/* Rank is real information here, so the index is numbered. */
.movers { counter-reset: rank; }

.movers li {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 12.5px;
  cursor: pointer;
}

.movers li:last-child { border-bottom: 0; }
.movers li:hover { color: var(--accent); }

.movers li::before {
  counter-increment: rank;
  content: counter(rank, decimal-leading-zero);
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--rule-strong);
}

.movers b { font-weight: 400; }

.movers .delta {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.movers .up { color: var(--ink); }
.movers .down { color: var(--ink-3); }

/* ------------------------------------------------------------------- stage */

.stage { position: relative; overflow: hidden; }

#field {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#field.is-dragging { cursor: grabbing; }

.stage-hint {
  position: absolute;
  left: 26px;
  bottom: 22px;
  max-width: 320px;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.stage-hint p {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.stage-hint.is-hidden { opacity: 0; }

.stage-legend {
  position: absolute;
  right: 22px;
  bottom: 22px;
  display: flex;
  gap: 18px;
  pointer-events: none;
  color: var(--ink-3);
}

.stage-legend-item { display: flex; align-items: center; gap: 6px; }

.stage.is-drift .stage-legend,
.stage.is-ideas .stage-legend { display: none; }
.stage.is-ideas #field { display: none; }

/* -------------------------------------------------------------------- ideas */

.ideas { position: absolute; inset: 0; overflow-y: auto; }

.ideas-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 26px 32px 60px;
}

.ideas-lede {
  margin: 0 0 26px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-3);
}

.ideas-lede b { color: var(--ink); font-weight: 500; font-family: var(--mono); }

/* The composed phrase, with the blank still waiting at the end. */
.compose {
  min-height: 96px;
  padding: 0 0 18px;
  border-bottom: 1px solid var(--rule-hard);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.015em;
}

.compose .glue { color: var(--ink-3); font-weight: 300; }

.compose .tok.is-concept {
  border-bottom: 3px solid var(--accent);
  cursor: pointer;
}

.compose .tok.is-concept:hover { color: var(--accent); }

.compose-blank {
  display: inline-block;
  width: 78px;
  margin-left: 6px;
  border-bottom: 2px solid var(--accent);
  vertical-align: 4px;
}

.compose-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 18px 0 34px;
}

.generate {
  padding: 10px 18px;
  border: 1px solid var(--rule-hard);
  border-radius: 0;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.generate:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.ghost {
  padding: 10px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.ghost:hover { border-color: var(--rule-hard); color: var(--ink); }

.temp {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.temp input { width: 110px; }

.predict, .grounding, .seeds { margin-bottom: 32px; }

.predict h3, .grounding h3, .seeds h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-hard);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.predict h3 em, .seeds h3 em {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

/* Each candidate is a bar: the model's own distribution, drawn as it is. */
.candidates { margin: 0; padding: 0; list-style: none; }

.candidates li { border-bottom: 1px solid var(--rule); }

.candidates button {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 16px;
  text-align: left;
  cursor: pointer;
}

.candidates button:hover { color: var(--accent); }

.candidate-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  background: var(--rule);
  z-index: 0;
}

.candidates button:hover .candidate-bar { background: var(--rule-strong); }

.candidate-word, .candidate-mark, .candidate-prob, .candidate-count {
  position: relative;
  z-index: 1;
}

.candidate-mark {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
}

.candidate-count {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--rule-strong);
}

.candidate-prob {
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}

.grounding-claim { margin: 0 0 12px; font-size: 14px; line-height: 1.5; }
.grounding-claim b { font-weight: 500; }

#grounding-list { margin: 0; padding: 0; list-style: none; }

#grounding-list li { padding: 8px 0; border-bottom: 1px solid var(--rule); }

#grounding-list a { color: var(--ink); font-size: 13.5px; text-decoration: none; }
#grounding-list a:hover { color: var(--accent); }

#grounding-list .meta {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

#grounding-list .pitch {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--ink-2);
}

.seed-buttons { display: flex; flex-wrap: wrap; gap: 8px; }

@media (max-width: 700px) {
  .madlib, .slot-body { font-size: 22px; }
}

.swatch-size {
  width: 10px; height: 10px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
}

.swatch-line { width: 18px; height: 1px; background: var(--rule-strong); }

.tooltip {
  position: absolute;
  z-index: 20;
  padding: 8px 10px;
  max-width: 250px;
  pointer-events: none;
  border: 1px solid var(--rule-hard);
  background: var(--paper);
}

.tooltip strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
}

.tooltip span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ drawer */

.drawer {
  position: relative;
  overflow-y: auto;
  padding: 16px 20px 40px;
  border-left: 1px solid var(--rule);
}

.drawer-close {
  position: absolute;
  top: 14px; right: 18px;
  width: 22px; height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.drawer-close:hover { color: var(--accent); }

.drawer-eyebrow { margin: 0; color: var(--accent); }

.drawer-title {
  margin: 6px 0 18px;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.025em;
}

.drawer-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 0 0 24px;
  border-top: 1px solid var(--rule-hard);
}

.drawer-facts div {
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
}

.drawer-facts div:nth-child(odd) { padding-right: 12px; }

.drawer-facts dt { color: var(--ink-3); }

.drawer-facts dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.drawer-block { margin-bottom: 26px; }

.drawer-block h3 {
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-hard);
  color: var(--ink);
}

.caption {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-3);
}

#spark { display: block; width: 100%; height: 90px; }

.lineage, .sources {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lineage li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
  cursor: pointer;
}

.lineage li:hover { color: var(--accent); }

.lineage time {
  margin-left: auto;
  flex: none;
  font-family: var(--mono);
  font-size: 10px;
  text-align: right;
  color: var(--ink-3);
}

.sources li {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}

.sources a {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.35;
  text-decoration: none;
}

.sources a:hover { color: var(--accent); }

.sources .meta {
  display: block;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* ---------------------------------------------------------------- timeline */

.timeline {
  flex: none;
  height: var(--timeline);
  padding: 9px 26px 8px;
  border-top: 1px solid var(--rule-hard);
}

.timeline-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.play {
  width: 24px; height: 24px;
  flex: none;
  padding: 0;
  border: 1px solid var(--rule-hard);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 9px;
  cursor: pointer;
}

.play:hover { background: var(--ink); color: var(--paper); }

.timeline-label {
  margin: 0;
  color: var(--ink-3);
}

.timeline-label strong {
  margin-left: 4px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
}

.timeline-note {
  margin: 0 0 0 auto;
  font-size: 11.5px;
  color: var(--ink-3);
}

#ribbon { display: block; width: 100%; height: 66px; }

.scrub {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.scrub::-webkit-slider-runnable-track { height: 1px; background: var(--rule-strong); }

.scrub::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 9px; height: 9px;
  margin-top: -4px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}

.scrub::-moz-range-track { height: 1px; background: var(--rule-strong); }

.scrub::-moz-range-thumb {
  width: 9px; height: 9px;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 1100px) {
  .layout, .layout.has-drawer { grid-template-columns: 1fr; }
  .rail { display: none; }
  .drawer {
    position: absolute;
    z-index: 30;
    top: 0; right: 0; bottom: 0;
    width: min(372px, 90vw);
    background: var(--paper);
  }
  .masthead { flex-wrap: wrap; gap: 14px; align-items: center; }
  .masthead-stats { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ story */
/* A historiography read left to right: a rail of time, ideas arriving above
   it, and the documents that carried them hanging below. */

.stage.is-history #field { display: none; }
.stage.is-history .stage-legend { display: none; }

.story {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.story-head {
  display: flex;
  align-items: flex-end;
  gap: 34px;
  flex: none;
  padding: 20px 30px 14px;
  border-bottom: 1px solid var(--rule-hard);
}

.story-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.story-head h2 {
  margin: 4px 0 0;
  font-size: 42px;
  font-weight: 700;
  line-height: 0.98;
  letter-spacing: -0.03em;
}

.story-stats { display: flex; gap: 26px; margin: 0 0 4px; }

.story-stats dt {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.story-stats dd {
  margin: 3px 0 0;
  font-family: var(--mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.story-hint {
  margin: 0 0 6px auto;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.story-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: auto;
  overflow-y: auto;
  outline: none;
  cursor: grab;
  overscroll-behavior-x: contain;
}

.story-scroll.is-panning { cursor: grabbing; }
.story-scroll.is-panning .story-event { pointer-events: none; }
.story-event, .story-arrival { cursor: pointer; }

.story-canvas { position: relative; height: 100%; }

/* Year bands sit behind everything as typographic ground. */
.story-year {
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0;
  border-left: 1px solid var(--rule);
  pointer-events: none;
}

/* Sticky so the year stays legible while reading down a deep stack of cards. */
.story-year span {
  position: sticky;
  top: 14px;
  display: block;
  width: max-content;
  margin-left: 12px;
  font-size: 58px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--rule);
  user-select: none;
}

.story-break {
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0;
  background: repeating-linear-gradient(
    -45deg, transparent, transparent 5px,
    var(--rule) 5px, var(--rule) 6px);
  border-left: 1px dashed var(--rule-strong);
  border-right: 1px dashed var(--rule-strong);
}

.story-break span {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-90deg);
  white-space: nowrap;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.story-density { position: absolute; z-index: 1; left: 0; top: 0; pointer-events: none; }

.story-rail {
  position: absolute;
  z-index: 3;
  left: 0; right: 0;
  height: 2px;
  background: var(--ink);
}

.story-tick {
  position: absolute;
  z-index: 3;
  width: 1px;
  background: var(--rule-strong);
}

/* An idea joining the story, pinned above the rail. */
.story-arrival {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 3px 7px 3px 5px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 11px;
  white-space: nowrap;
  cursor: pointer;
  transform: translateX(-2px);
}

.story-arrival:hover { border-color: var(--accent); color: var(--accent); }
.story-arrival i { width: 6px; height: 6px; flex: none; border-radius: 50%; }
/* One layer for every leader line, painted under the boxes so a stem can never
   cross a card. Stacking is explicit: ground, density, stems, rail, chips, cards. */
.story-stems {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.story-stem {
  position: absolute;
  width: 1px;
  background: var(--rule-strong);
}

/* A document that carried the idea, hanging below the rail. */
.story-event {
  position: absolute;
  z-index: 5;
  width: 240px;
  padding: 9px 11px 11px;
  border: 1px solid var(--rule);
  border-top: 2px solid var(--ink);
  background: var(--paper);
}

.story-event .when {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

.story-event .badge {
  padding: 1px 4px;
  border: 1px solid var(--rule);
  font-size: 8.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.story-event .badge.is-project { border-color: var(--accent); color: var(--accent); }

.story-event h4 { margin: 6px 0 0; font-size: 14px; font-weight: 500; line-height: 1.25; }
.story-event h4 a { color: var(--ink); text-decoration: none; }
.story-event h4 a:hover { color: var(--accent); }

.story-event p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
}

.story-event h4 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.story-event p mark {
  padding: 0 1px;
  background: transparent;
  color: var(--accent);
  font-weight: 500;
}

.story-event .brings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--rule);
}

.story-event .brings b {
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.story-event .brings span {
  padding: 1px 5px;
  border: 1px solid var(--rule);
  font-size: 10.5px;
  cursor: pointer;
}

.story-event .brings span:hover { border-color: var(--accent); color: var(--accent); }

.story-empty {
  position: absolute;
  inset: 90px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  color: var(--ink-3);
}

.drawer-cta {
  width: 100%;
  margin: 0 0 24px;
  padding: 11px;
  border: 1px solid var(--rule-hard);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.drawer-cta:hover { background: var(--ink); color: var(--paper); }

/* ------------------------------------------------------------------ sheet */

.sheet { position: fixed; inset: 0; z-index: 90; }

.sheet-scrim {
  position: absolute;
  inset: 0;
  background: var(--ink);
  opacity: 0.34;
}

.sheet-card {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 48px));
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  padding: 26px 30px 30px;
  border: 1px solid var(--rule-hard);
  background: var(--paper);
}

.sheet-close {
  position: absolute;
  top: 16px; right: 18px;
  width: 24px; height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-3);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

.sheet-close:hover { color: var(--accent); }

.sheet-meta {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.sheet-meta .badge {
  padding: 2px 6px;
  border: 1px solid var(--rule-strong);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sheet-meta .badge.is-project { border-color: var(--accent); color: var(--accent); }

.sheet-title {
  margin: 10px 0 0;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.sheet-pitch {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-2);
}

.sheet-block { margin-top: 24px; }

.sheet-block h4 {
  display: flex;
  gap: 6px;
  margin: 0 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet-block h4 em { font-style: normal; color: var(--accent); }

.sheet-quote {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}

.sheet-quote mark {
  padding: 0 1px;
  background: transparent;
  color: var(--accent);
  font-weight: 500;
}

.sheet-chips { display: flex; flex-wrap: wrap; gap: 5px; }

.sheet-chips button {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
}

.sheet-chips button:hover { border-color: var(--accent); color: var(--accent); }

.sheet-link {
  display: inline-block;
  margin-top: 26px;
  padding: 11px 18px;
  background: var(--ink);
  color: var(--paper);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
}

.sheet-link:hover { background: var(--accent); color: #fff; }

.story-event { cursor: pointer; }
.story-event:hover { border-color: var(--accent); }
.story-event:hover h4 { color: var(--accent); }


/* Reopen tab for a collapsed concept panel: closing it should not lose your place. */
.drawer-handle {
  position: absolute;
  z-index: 30;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-height: 60%;
  padding: 16px 7px;
  border: 1px solid var(--rule-hard);
  border-right: 0;
  border-radius: 0;
  background: var(--paper);
  color: var(--ink);
  writing-mode: vertical-rl;
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.drawer-handle:hover { background: var(--ink); color: var(--paper); }


/* Playhead: the scrubber's position inside a historiography. */
.story-playhead {
  position: absolute;
  z-index: 6;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  will-change: transform;
  background: var(--accent);
  pointer-events: none;
}

.story-playhead span {
  position: sticky;
  top: 6px;
  display: block;
  width: max-content;
  padding: 3px 7px;
  background: var(--accent);
  color: #fff;
  font-family: var(--mono);
  font-size: 10px;
  white-space: nowrap;
}

/* Not yet reached: still legible as shape, clearly not yet part of the story. */
.story-event.is-future, .story-arrival.is-future { opacity: 0.22; }

.story-event.is-now { border-color: var(--accent); border-top-color: var(--accent); }
.story-arrival.is-now { border-color: var(--accent); color: var(--accent); }


/* Now playing: what the playhead is passing over, so time moving actually shows. */
.nowplaying {
  position: absolute;
  z-index: 20;
  left: 26px;
  bottom: 22px;
  width: 340px;
  padding: 14px 16px 16px;
  border: 1px solid var(--rule-hard);
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  pointer-events: none;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .nowplaying { background: var(--paper); }
}

.nowplaying-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

.nowplaying-meta .badge {
  padding: 1px 5px;
  border: 1px solid var(--rule-strong);
  font-size: 8.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nowplaying-meta .badge.is-project { border-color: var(--accent); color: var(--accent); }

.nowplaying-tick {
  width: 5px;
  height: 5px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--accent);
}

.nowplaying h3 {
  margin: 8px 0 0;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.22;
}

.nowplaying-quote {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 7px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.nowplaying-quote mark { background: transparent; color: var(--accent); font-weight: 500; }

.nowplaying-brings {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 10px;
}

.nowplaying-brings span {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  font-size: 10.5px;
  color: var(--ink-2);
}

/* The card the playhead is on, lifted out of the field. */
.story-event.is-active {
  border-color: var(--accent);
  border-top-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .nowplaying { transition: opacity 0.18s ease; }
  .nowplaying-tick { animation: np-pulse 1.1s ease-out infinite; }
  @keyframes np-pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
  }
}


/* ------------------------------------------------------------------ atlas */
/* Modular information design: one mark per cluster, assembled from a fixed set
   of elements where each visual dimension carries exactly one data dimension.
   Nothing here is decorative — if it is drawn, it is encoding something. */

.stage.is-atlas #field,
.stage.is-atlas .stage-legend,
.stage.is-atlas .stage-hint { display: none; }

.atlas {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}

.atlas-head {
  display: flex;
  align-items: flex-end;
  gap: 32px;
  flex: none;
  padding: 18px 26px 14px;
  border-bottom: 1px solid var(--rule-hard);
}

.atlas-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.atlas-head h2 {
  margin: 4px 0 0;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.atlas-key {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  max-width: 620px;
  margin-left: auto;
}

.atlas-key div {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 10px;
  color: var(--ink-3);
}

.atlas-key b {
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
}

.atlas-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.atlas-sort select {
  padding: 5px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
}

.atlas-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 4px 26px 50px;
}

.atlas-group { margin-top: 22px; }

.atlas-group > h3 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-hard);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.atlas-group > h3 em {
  font-family: var(--mono);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3);
}

.atlas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 14px;
}

.module {
  display: flex;
  flex-direction: column;
  padding: 14px 15px 15px;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.module:hover { border-color: var(--rule-hard); }
.module.is-linked { border-color: var(--accent); }

.module-top { display: flex; gap: 13px; }

.module-avatar { flex: none; }

.module-id { min-width: 0; }

.module-id h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
}

.module-id p {
  margin: 4px 0 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

/* Each row below is one diagrammatic dimension, kept visually separate. */
.module-row {
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}

.module-row > b {
  display: block;
  margin-bottom: 6px;
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.module-bar { display: flex; height: 7px; }
.module-bar span { height: 100%; }

.module-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
}

.module-chips { display: flex; flex-wrap: wrap; gap: 4px; }

.module-chips button {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}

.module-chips button:hover { border-color: var(--accent); color: var(--accent); }

.module-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.module-links button {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 3px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

.module-links button:hover { border-color: var(--accent); color: var(--accent); }


/* ----------------------------------------------------------------- report */
/* A composed infographic rather than a browsable tool: fixed measure, numbered
   sections, one graphic per idea, read top to bottom. */

.stage.is-report #field,
.stage.is-report .stage-legend,
.stage.is-report .stage-hint { display: none; }

.report { position: absolute; inset: 0; }

.report-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.sheet-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 74px 40px 10px;
}

.sheet-section:first-child { padding-top: 54px; }
.sheet-section:last-child { padding-bottom: 90px; }

.sheet-section + .sheet-section { border-top: 1px solid var(--rule); }

@media (prefers-reduced-motion: no-preference) {
  .sheet-section {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  .sheet-section.is-in { opacity: 1; transform: none; }
}

.sheet-num {
  margin: 0 0 14px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--accent);
}

.sheet-section h2 {
  margin: 0;
  font-size: 46px;
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  max-width: 20ch;
}

.sheet-deck {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
}

.sheet-figure { margin: 34px 0 0; }
.sheet-figure svg { display: block; width: 100%; height: auto; }

.sheet-caption {
  margin: 12px 0 0;
  max-width: 66ch;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.sheet-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0;
  margin: 36px 0 0;
  border-top: 1px solid var(--rule-hard);
}

.sheet-stats div {
  padding: 14px 16px 16px 0;
  border-bottom: 1px solid var(--rule);
}

.sheet-stats dt {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.sheet-stats dd {
  margin: 6px 0 0;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.sheet-stats dd small {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-3);
}

/* The field laid out as a table of marks. */
.plate {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 0;
  margin-top: 30px;
}

.plate-field {
  padding: 14px 14px 14px 0;
  border-top: 1px solid var(--rule-hard);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plate-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-hard);
}

.plate-cell {
  width: 96px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  text-align: center;
  cursor: pointer;
}

.plate-cell svg { display: block; margin: 0 auto; }

.plate-cell b {
  display: block;
  margin-top: 7px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.25;
}

.plate-cell span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 9px;
  color: var(--ink-3);
}

.plate-cell:hover b { color: var(--accent); }

.movers-figure { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 30px; }

.movers-col h3 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-hard);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mover-line {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 13px;
}

.mover-line i { width: 7px; height: 7px; flex: none; }
.mover-line b { font-weight: 400; }

.mover-line u {
  flex: 1;
  height: 5px;
  text-decoration: none;
  background: var(--rule);
}

.mover-line u span { display: block; height: 100%; }

.mover-line em {
  flex: none;
  font-family: var(--mono);
  font-size: 10.5px;
  font-style: normal;
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .sheet-section h2 { font-size: 32px; }
  .movers-figure, .plate { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------- briefing */
/* A written account of the matching set: a lede, then one thread-chart and one
   ledger per field. Every sentence is generated from counts that are on screen. */

.stage.is-brief #field,
.stage.is-brief .stage-legend,
.stage.is-brief .stage-hint { display: none; }

.brief { position: absolute; inset: 0; }

.brief-scroll {
  height: 100%;
  overflow-y: auto;
  padding: 0 0 80px;
  background: var(--paper);
}

.brief-inner { max-width: 860px; margin: 0 auto; padding: 40px 34px 0; }

.brief-eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 18px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brief-eyebrow::before {
  content: "";
  width: 8px; height: 8px;
  border: 1px solid var(--ink-3);
}

.brief-lede {
  margin: 0;
  max-width: 30ch;
  font-size: clamp(26px, 3.6vw, 37px);
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.023em;
}

.brief-stand {
  margin: 18px 0 0;
  max-width: 58ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-3);
}

.brief-rule { margin: 34px 0 0; border-top: 1px solid var(--rule); }

.brief-field { margin-top: 46px; }

.brief-field > h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.brief-meta {
  margin: 7px 0 0;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--rule);
  font-size: 10px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brief-stream { margin-top: 16px; }
.brief-stream svg { display: block; width: 100%; height: auto; }

.brief-note {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-3);
}

.brief-note b { color: var(--ink); font-weight: 500; }

/* The ledger: one row per thread, its span, and the documents that mark it. */
.thread {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 0 18px;
  padding: 16px 0 4px;
  border-top: 1px solid var(--rule-soft, var(--rule));
}

.thread:first-of-type { margin-top: 22px; }

.thread-name {
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.25;
  cursor: pointer;
}

.thread-name:hover { color: var(--accent); }

.thread-span {
  margin: 0 0 8px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.beat {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-soft, var(--rule));
}

.beat b {
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.beat a {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}

.beat a:hover { border-bottom-color: var(--accent); color: var(--accent); }

.brief-close {
  margin-top: 54px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-hard);
}

.brief-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: var(--ink-3);
}

.brief-tally span b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }

@media (max-width: 720px) {
  .thread { grid-template-columns: 1fr; }
  .brief-inner { padding: 28px 20px 0; }
}

/* -------------------------------------------------------------------- city */
/* An axonometric city drawn on canvas: districts are clusters, towers are
   concepts, roads are shared documents. Everything is painted back to front. */

.stage.is-city #field,
.stage.is-city .stage-legend,
.stage.is-city .stage-hint { display: none; }

.city { position: absolute; inset: 0; overflow: hidden; }

#city-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#city-canvas.is-turning { cursor: grabbing; }

.city-hud {
  position: absolute;
  top: 22px; left: 26px;
  pointer-events: none;
}

.city-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.city-sub {
  margin: 5px 0 0;
  max-width: 34ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}

.city-key {
  position: absolute;
  left: 26px; bottom: 46px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.city-key span { display: flex; align-items: center; gap: 8px; }

.city-key i { width: 14px; height: 10px; flex: none; }
.k-tower { border: 1px solid var(--ink-3); border-bottom-width: 4px; }
.k-road { height: 2px; background: var(--ink-3); opacity: 0.5; }
.k-block { border: 1px dashed var(--ink-3); }

.city-hint {
  position: absolute;
  right: 24px; bottom: 20px;
  margin: 0;
  pointer-events: none;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.city-tip {
  position: absolute;
  z-index: 12;
  padding: 9px 12px;
  pointer-events: none;
  border: 1px solid var(--rule-hard);
  background: var(--paper);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.16);
}

.city-tip b {
  display: block;
  font-size: 14px;
  font-weight: 500;
}

.city-tip span {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}


/* A domain with no matches for the current search: struck out, not removed, so
   the shape of the whole vocabulary stays readable while filtering. */
.legend li.is-empty { color: var(--rule-strong); }
.legend li.is-empty i { opacity: 0.3; }
.legend li.is-empty em { text-decoration: line-through; }

/* Where the selected concept sits. The rail, the stage and the panel are three
   views of one set, so the rail says which domain and which group you are in. */
.legend li { position: relative; }
.legend li.is-here { color: var(--ink); }
.legend li.is-here em { color: var(--accent); }

.legend li.is-here::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  width: 3px;
  height: 11px;
  margin-top: -5px;
  background: var(--accent);
}


/* The mover currently narrowing the view. */
.movers li.is-active { color: var(--accent); }
.movers li.is-active::before { color: var(--accent); }
.movers li.is-active b { font-weight: 500; }


/* ----------------------------------------------------------------- descent */
/* A temporal graph: time runs left to right, an idea sits at the month it took
   hold, and a line runs from each idea that was already in the room. */

.stage.is-descent #field,
.stage.is-descent .stage-legend,
.stage.is-descent .stage-hint { display: none; }

.descent { position: absolute; inset: 0; overflow-y: auto; overflow-x: hidden; }

#descent-canvas { display: block; width: 100%; cursor: crosshair; }

.descent-hud {
  position: absolute;
  top: 22px; left: 26px;
  z-index: 3;
  padding-right: 12px;
  background: var(--paper);
  pointer-events: none;
}

.descent-title {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.descent-sub {
  margin: 5px 0 0;
  max-width: 40ch;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
}


.stage.is-descent .city-hint { right: 26px; bottom: 4px; }


/* Playback speed, cycled rather than dialled: three steps is all this needs. */
.speed {
  flex: none;
  min-width: 34px;
  padding: 4px 6px;
  border: 1px solid var(--rule-strong);
  border-radius: 0;
  background: transparent;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.speed:hover { border-color: var(--rule-hard); color: var(--ink); }
.speed.is-fast { border-color: var(--accent); color: var(--accent); }


.rail-hint {
  margin: -4px 0 8px;
  font-size: 10px;
  line-height: 1.4;
  color: var(--rule-strong);
}

/* Domains that are part of the current selection, rather than merely not hidden. */
.legend li.is-on { color: var(--ink); }
.legend li.is-on em { color: var(--ink); }
.legend li.is-solo b, .legend li.is-solo { font-weight: 500; }
.legend li.is-solo i { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px currentColor; }


/* ----------------------------------------------------------------- results */
/* The documents behind whatever the other views are currently showing. */

.stage.is-results #field,
.stage.is-results .stage-legend,
.stage.is-results .stage-hint { display: none; }

.results { position: absolute; inset: 0; display: flex; flex-direction: column; }

.results-head {
  display: flex;
  align-items: flex-end;
  gap: 26px;
  flex: none;
  padding: 20px 26px 14px;
  border-bottom: 1px solid var(--rule-hard);
}

.results-eyebrow {
  margin: 0;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.results-head h2 {
  margin: 4px 0 0;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.results-note {
  margin: 0 0 4px auto;
  max-width: 42ch;
  font-size: 11.5px;
  line-height: 1.45;
  text-align: right;
  color: var(--ink-3);
}

.results-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px 60px; }

.result {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 0 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--rule);
}

.result-when {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  padding-top: 2px;
}

.result-when b {
  display: block;
  margin-top: 4px;
  padding: 1px 5px;
  width: max-content;
  border: 1px solid var(--rule-strong);
  font-family: var(--sans);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.result h3 { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.3; }
.result h3 a { color: var(--ink); text-decoration: none; }
.result h3 a:hover { color: var(--accent); }

.result p {
  margin: 5px 0 0;
  max-width: 78ch;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}

.result-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }

.result-tags button {
  padding: 1px 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
}

.result-tags button:hover { border-color: var(--accent); color: var(--accent); }

.results-empty { padding: 40px 0; color: var(--ink-3); font-size: 13px; }


/* Active filters, each removable. */
.rail-filters:has(#filters[hidden]) { display: none; }

.chips { display: flex; flex-wrap: wrap; gap: 5px; }

.chip {
  display: flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  padding: 3px 7px;
  border: 1px solid var(--accent);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font-family: inherit;
  font-size: 11px;
  text-align: left;
  cursor: pointer;
}

.chip span { font-size: 13px; line-height: 1; }
.chip:hover { background: var(--accent); color: #fff; }
.chip.is-all { border-color: var(--rule-strong); color: var(--ink-3); }
.chip.is-all:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

#ribbon { cursor: ew-resize; }
#ribbon.is-scrubbing { cursor: grabbing; }


.chip-dot {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
}


/* Panel tabs: the numbers on one side, the documents on the other. */
.panel-tabs {
  display: flex;
  gap: 0;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--rule);
}

.panel-tab {
  flex: 1;
  padding: 8px 4px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-3);
  font-family: inherit;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}

.panel-tab:hover { color: var(--ink); }
.panel-tab.is-on { color: var(--ink); border-bottom-color: var(--accent); }

#panel-results .sources li { padding: 10px 0; }
#panel-results .sources .pitch {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--ink-2);
}

/* ------------------------------------------------- results, read properly */
/* Titles carry the row; the excerpt supports it; the metadata gets out of the
   way. Everything here was one size and one weight, so nothing led. */

#panel-results .sources li,
#set-sources li {
  padding: 14px 0;
  border-bottom: 1px solid var(--rule);
}

#panel-results .sources a,
#set-sources a {
  display: block;
  border-bottom: 0;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: -0.012em;
  text-wrap: pretty;
}

#panel-results .sources a:hover,
#set-sources a:hover { color: var(--accent); }

#panel-results .sources .pitch {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

#panel-results .sources .meta,
#set-sources .meta {
  margin-top: 7px;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

#panel-results-note { margin-bottom: 4px; }

/* The full results view. */
.result {
  grid-template-columns: 96px 1fr;
  padding: 18px 0;
  transition: none;
}

.result:hover h3 a { color: var(--accent); }

.result-when {
  padding-top: 3px;
  font-size: 11px;
  letter-spacing: 0.02em;
}

.result-when b {
  margin-top: 6px;
  border-color: var(--rule);
  color: var(--ink-3);
}

.result h3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.26;
  letter-spacing: -0.017em;
  max-width: 46ch;
  text-wrap: pretty;
}

.result p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 7px;
  max-width: 62ch;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.result-tags { margin-top: 11px; }

.result-tags button {
  padding: 2px 7px;
  font-size: 11px;
  color: var(--ink-3);
}

.result-tags button:first-child {
  border-color: transparent;
  padding-left: 0;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}


/* ---------------------------------------------------------------- document */
/* Opening a document pushes the concept panel left and takes the right edge. */

:root { --doc: 400px; }

.layout.has-doc.has-drawer { grid-template-columns: var(--rail) 1fr var(--drawer) var(--doc); }
/* With the concept panel collapsed the document keeps the right edge to itself. */
.layout.has-doc:not(.has-drawer) { grid-template-columns: var(--rail) 1fr var(--doc); }

.docpanel {
  position: relative;
  overflow-y: auto;
  padding: 18px 22px 40px;
  border-left: 1px solid var(--rule-hard);
  background: var(--paper);
}

.doc-title {
  margin: 6px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.022em;
  text-wrap: pretty;
}

.doc-meta {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--ink-3);
}

.doc-pitch {
  margin: 14px 0 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-2);
}

.passage {
  margin: 0 0 12px;
  padding: 11px 13px;
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  font-size: 13.5px;
  line-height: 1.55;
}

@supports not (background: color-mix(in srgb, red 50%, transparent)) {
  .passage { background: var(--wash); }
}

.passage mark { background: transparent; color: var(--accent); font-weight: 500; }

.passage b {
  display: block;
  margin-bottom: 5px;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.result { cursor: pointer; }
.result h3 a { pointer-events: auto; }

/* Both panels stay on screen as the window narrows — they give up width, not
   their place. Only under 1000px does the document have to cover the concept. */
@media (max-width: 1500px) {
  .layout.has-doc.has-drawer { --drawer: 336px; --doc: 352px; }
  .doc-title { font-size: 20px; }
}

@media (max-width: 1280px) {
  .layout.has-doc.has-drawer { --drawer: 300px; --doc: 312px; }
  .doc-title { font-size: 18px; letter-spacing: -0.014em; }
}

@media (max-width: 1120px) {
  .layout.has-doc.has-drawer { --drawer: 272px; --doc: 284px; }
}

@media (max-width: 1000px) {
  .layout.has-doc, .layout.has-doc.has-drawer {
    grid-template-columns: var(--rail) 1fr var(--doc);
  }
  .layout.has-doc .drawer { display: none; }
}

.docpanel .drawer-block { margin-top: 30px; }
.docpanel .sheet-link { margin-top: 32px; }

#doc-nearby li { padding: 12px 0; }
#doc-nearby a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.008em;
}
#doc-nearby .meta { letter-spacing: 0.04em; }

.docpanel mark {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}


/* ------------------------------------------------------------------ canvas */
/* The archive laid brick by brick: one document per brick, in publication
   order, a fresh course each year. Far out it reads as sediment; close in the
   bricks become cards you can read. */

.stage.is-mosaic #field,
.stage.is-mosaic .stage-legend,
.stage.is-mosaic .stage-hint { display: none; }

.mosaic { position: absolute; inset: 0; overflow: hidden; }

#mosaic-canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}

#mosaic-canvas.is-turning { cursor: grabbing; }

.mosaic-key { bottom: 46px; }

/* The wall pans under the headings, so the headings sit on their own paper. */
.mosaic .city-hud,
.mosaic .mosaic-key,
.mosaic .city-hint {
  padding: 10px 14px;
  background: var(--paper);
}

.mosaic .city-hud { top: 12px; left: 12px; }
.mosaic .mosaic-key { left: 12px; bottom: 34px; }
.mosaic .city-hint { right: 12px; bottom: 10px; }
.mosaic-key .k-src {
  width: 15px;
  height: 6px;
  /* The blog tone is nearly the paper it sits on; the swatch needs an edge. */
  box-shadow: inset 0 0 0 1px var(--rule-strong);
}
.k-src-a { background: var(--src-article); }
.k-src-p { background: var(--src-project); }
.k-src-b { background: var(--src-blog); }

/* With a document open the handle rides the edge of the stage, not the window. */
.layout.has-doc .drawer-handle { right: var(--doc); }


/* ------------------------------------------------------------- ideas view */
/* Two questions kept apart: what was proposed, and what was built. */

.stage.is-notions #field,
.stage.is-notions .stage-legend,
.stage.is-notions .stage-hint,
.stage.is-tree #field,
.stage.is-tree .stage-legend,
.stage.is-tree .stage-hint { display: none; }

.notions, .tree {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.notions-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 22px 26px 0;
}

.notions-head h2 {
  margin: 4px 0 0;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: -0.022em;
}

.notions-head .panel-tabs { margin: 0 0 2px; border-bottom: 0; }

.notions-body {
  display: grid;
  grid-template-columns: 1fr 360px;
  flex: 1;
  min-height: 0;
  margin-top: 14px;
  border-top: 1px solid var(--rule);
}

.notions-list { display: flex; flex-direction: column; min-height: 0; }

.notions-sort {
  display: flex;
  gap: 18px;
  padding: 12px 26px 0;
  border-bottom: 1px solid var(--rule);
}

.notions-rows { overflow-y: auto; padding: 6px 26px 40px; }

.notion-year {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 18px 0 6px;
  padding: 6px 0;
  background: var(--paper);
  border-bottom: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

.notion-row {
  display: grid;
  grid-template-columns: 1fr 132px 74px;
  align-items: baseline;
  gap: 16px;
  width: 100%;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.notion-row:hover { background: var(--wash); }
.notion-row.is-on { background: var(--ink); color: var(--paper); }
.notion-row.is-on .notion-anchor, .notion-row.is-on .notion-count { color: var(--paper); }

.notion-name { font-size: 15px; line-height: 1.25; letter-spacing: -0.008em; }
.notion-name b { font-weight: 500; }
.notion-name i { font-style: normal; color: var(--accent); }

.notion-anchor {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notion-count { font-family: var(--mono); font-size: 11px; text-align: right; }

.notion-bar {
  display: block;
  height: 3px;
  margin-top: 5px;
  background: var(--rule-strong);
}

.notion-row.is-on .notion-bar { background: var(--accent); }

/* ------------------------------------------------------------- taxonomy */

.tree-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 14px 26px;
  border-bottom: 1px solid var(--rule);
  font-size: 12px;
}

.tree-crumbs button {
  border: 0;
  background: none;
  color: var(--ink-3);
  font: inherit;
  cursor: pointer;
}

.tree-crumbs button:hover { color: var(--accent); }
.tree-crumbs button.is-here { color: var(--ink); font-weight: 500; cursor: default; }
.tree-crumbs span { color: var(--rule-strong); }

.notions-detail {
  padding: 22px 24px 30px;
  overflow-y: auto;
  border-left: 1px solid var(--rule);
}

.notion-phrase {
  margin: 6px 0 2px;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

.notion-facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 12px;
  margin: 16px 0 22px;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 12px;
}

.notion-facts b { display: block; font-weight: 400; font-size: 9px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.notions-empty { padding: 40px 0; color: var(--ink-3); font-size: 13px; }

/* --------------------------------------------------------- implementations */

.builds-body { display: grid; grid-template-columns: 260px 1fr; flex: 1; min-height: 0;
  margin-top: 14px; border-top: 1px solid var(--rule); }

.builds-tags { overflow-y: auto; padding: 18px 18px 30px; border-right: 1px solid var(--rule); }

.builds-tags button {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 7px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.builds-tags button:hover { color: var(--ink); }
.builds-tags button.is-on { color: var(--accent); }
.builds-tags em { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--ink-3); }

.builds-list { overflow-y: auto; padding: 6px 26px 40px; }

/* ------------------------------------------------------------- taxonomy */

.tree-cols {
  display: grid;
  grid-template-columns: 220px 260px 250px 1fr;
  flex: 1;
  min-height: 0;
  height: 100%;
}

.tree-col { overflow-y: auto; padding: 16px 0 30px; border-right: 1px solid var(--rule); }
.tree-leaf { overflow-y: auto; padding: 22px 26px 40px; }

.tree-col button {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 18px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}

.tree-col button:hover { background: var(--wash); color: var(--ink); }
.tree-col button.is-on { background: var(--ink); color: var(--paper); }
.tree-col button.is-on em { color: var(--paper); }
.tree-col em { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--ink-3); }

.tree-head {
  margin: 0 18px 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* -------------------------------------------------------- marks on results */

.ideastrip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; align-items: center; }

.kindtag {
  padding: 2px 7px;
  border: 1px solid var(--rule-strong);
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kindtag.is-build { border-color: var(--src-project); color: var(--src-project); }
.kindtag.is-proposal { border-color: var(--accent); color: var(--accent); }

.ideachip {
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  cursor: pointer;
}

.ideachip:hover { border-color: var(--ink); color: var(--ink); }
.ideachip.is-first { border-color: var(--ink); color: var(--ink); font-weight: 500; }
.ideachip.is-first::before { content: "\25C6\00a0"; font-size: 8px; color: var(--accent); }

.doc-kindline { margin: 14px 0 0; font-size: 12px; line-height: 1.5; color: var(--ink-3); }

.drawer-block-head {
  margin: 26px 0 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mosaic-lineage {
  position: absolute;
  left: 12px;
  bottom: 132px;
  z-index: 4;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mosaic-lineage.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.doc-claim-line {
  margin: 0 0 12px;
  padding: 10px 0 10px 14px;
  border-left: 2px solid var(--accent);
  font-size: 14.5px;
  line-height: 1.5;
  text-wrap: pretty;
}

.doc-claim-line:last-child { margin-bottom: 0; }


/* ------------------------------------------------------------- the story */
/* A concept read as prose: what the counts say, in sentences, with the
   documents' own words quoted between them. Nothing here is paraphrased. */

#panel-story { padding-bottom: 30px; }

.story-lede {
  margin: 4px 0 20px;
  font-size: 15.5px;
  line-height: 1.55;
  text-wrap: pretty;
}

.story-era { margin: 0 0 24px; }

.story-era h4 {
  margin: 0 0 6px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.story-era p {
  margin: 0 0 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}

.story-quote {
  margin: 0 0 10px;
  padding: 9px 0 9px 13px;
  border-left: 2px solid var(--accent);
}

.story-quote q {
  display: block;
  font-size: 13.5px;
  line-height: 1.5;
  quotes: "\201C" "\201D";
}

.story-quote button {
  display: block;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 10px;
  text-align: left;
  cursor: pointer;
}

.story-quote button:hover { color: var(--accent); }

.story-bar {
  display: flex;
  height: 4px;
  margin: 0 0 6px;
  background: var(--rule);
}

.story-bar i { display: block; height: 100%; }

.story-note {
  margin: 22px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}


/* -------------------------------------------------------------- trends */
/* An index of the pre-generated reports: rank, name, what it is made of, and
   its shape. The report itself is a document and opens as one. */

.stage.is-trends #field,
.stage.is-trends .stage-legend,
.stage.is-trends .stage-hint { display: none; }

.trends {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.trends .notions-head { padding: 22px 26px 14px; }
.trends-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: 0 26px 46px; }

.trend-row {
  display: grid;
  grid-template-columns: 40px 1fr 150px 92px 84px;
  align-items: center;
  gap: 18px;
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.trend-row:hover { background: var(--wash); }

/* The language essay sits above the ranking, marked as a different kind of
   thing: a rule under it, and the accent on the name rather than a number. */
.trend-essay { border-bottom: 1px solid var(--rule-hard); }
.trend-essay .trend-name { color: var(--accent); }
.trend-essay .trend-figure b { font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase; }
.trend-rank { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

.trend-name {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.012em;
}

.trend-sub {
  display: block;
  margin-top: 3px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-3);
}

.trend-spark { width: 150px; height: 30px; display: block; }

.trend-figure {
  font-family: var(--mono);
  font-size: 12px;
  text-align: right;
}

.trend-figure b { display: block; font-weight: 500; }
.trend-figure span { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }

.trend-open {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: right;
  color: var(--ink-3);
}

.trend-row:hover .trend-open { color: var(--accent); }

/* Group rows reuse the domain-row layout, but a role has no colour of its own —
   it is a kind, not a domain — so the swatch is a neutral outline. */
.legend-swatch--role {
  background: transparent;
  border: 1px solid var(--rule-strong, #555);
  border-radius: 2px;
}
.legend--roles .legend-row.is-solo .legend-swatch--role,
.legend--roles .legend-row.is-on .legend-swatch--role { background: var(--ink-2, #888); }

/* ---- corpus search ---- */
.searchbar { margin: 0 0 14px; }
.searchbar input {
  width: 100%;
  padding: 10px 12px;
  background: var(--panel, #14161a);
  border: 1px solid var(--rule, #2a2e35);
  border-radius: 3px;
  color: inherit;
  font: inherit;
  font-size: 15px;
}
.searchbar input:focus { outline: none; border-color: var(--accent, #6ea8fe); }

.facets { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.facet {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 4px 9px;
  background: transparent;
  border: 1px solid var(--rule, #2a2e35);
  border-radius: 999px;
  color: var(--ink-2, #9aa0a6);
  font-family: var(--mono, monospace);
  font-size: 11px;
  cursor: pointer;
}
.facet:hover { color: var(--ink, #e8e8e8); }
.facet.is-on { background: var(--ink, #e8e8e8); border-color: var(--ink, #e8e8e8); color: var(--bg, #0d0f12); }
.facet em { font-style: normal; opacity: 0.65; }

a.hit {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule, #2a2e35);
  text-decoration: none;
  color: inherit;
}
a.hit:hover { background: rgba(255,255,255,0.03); }
a.hit b { display: block; font-size: 15px; font-weight: 600; }
a.hit span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--ink-2, #9aa0a6); }
a.hit em {
  display: block; margin-top: 4px;
  font-family: var(--mono, monospace); font-size: 10.5px;
  font-style: normal; color: var(--ink-3, #6b7075);
}


/* ------------------------------------------------------------- raw data */
/* The crawl on disk, browsable: 48 GB in folders, plus a database that is not
   a folder at all. The point is to judge what was collected, so every node
   carries its counts, its file mix, and what the index kept from it. */

.stage.is-raw #field,
.stage.is-raw .stage-legend,
.stage.is-raw .stage-hint { display: none; }

.raw {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.raw .notions-head { padding: 20px 26px 12px; }

.raw-body {
  display: grid;
  grid-template-columns: 210px 210px 210px 1fr;
  flex: 1;
  min-height: 0;
}

.raw-detail { overflow-y: auto; padding: 20px 26px 40px; border-left: 1px solid var(--rule); }

.raw-node {
  display: block;
  width: 100%;
  padding: 9px 16px;
  border: 0;
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}

.raw-node:hover { background: var(--wash); color: var(--ink); }
.raw-node.is-on { background: var(--ink); color: var(--paper); }
.raw-node.is-on em, .raw-node.is-on span { color: var(--paper); }

.raw-node span {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
}

.raw-figures {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: 14px 0 20px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.raw-figure { padding: 11px 13px; background: var(--paper); }
.raw-figure b { display: block; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; }
.raw-figure em {
  font-family: var(--mono);
  font-size: 9.5px;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.raw-bars { margin: 6px 0 20px; }

.raw-bar {
  display: grid;
  grid-template-columns: 128px 1fr 62px;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
  font-size: 12px;
}

.raw-bar i { display: block; height: 7px; background: var(--accent); }
.raw-bar em { font-family: var(--mono); font-size: 10.5px; font-style: normal; text-align: right; color: var(--ink-3); }

.raw-path {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 1.5;
  color: var(--ink-3);
  word-break: break-all;
}

.raw-sample { margin: 0 0 10px; padding-left: 12px; border-left: 2px solid var(--rule-strong); }
.raw-sample b { display: block; font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.raw-sample span { font-family: var(--mono); font-size: 10px; color: var(--ink-3); }


.stage.is-genealogy #field,
.stage.is-genealogy .stage-legend,
.stage.is-genealogy .stage-hint { display: none; }

/* ------------------------------------------------------------- genealogy */
/* Where an idea came from and what came after it, on a time axis. The year
   bars are the Report's emergence figure made clickable; everything else is
   reachable by clicking a mark, which re-roots the tree. */

.genealogy {
  position: absolute;
  inset: 0;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px 26px 16px;
  overflow-y: auto;
}

.gen-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.gen-title { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }

.gen-sub {
  margin: 4px 0 0;
  max-width: 68ch;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3);
}

.gen-sub b { color: var(--ink); font-weight: 600; }

.gen-trail { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; justify-content: flex-end; }

.gen-trail span {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.gen-step {
  padding: 2px 8px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink-2);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.gen-step:hover { color: var(--accent); border-color: var(--accent); }

.gen-years { display: flex; align-items: flex-end; gap: 3px; height: 72px; }

.gen-year {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  cursor: pointer;
}

.gen-year .gen-stack {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-start;
  width: 100%;
  height: 100%;
}

.gen-year .gen-stack i { display: block; width: 100%; min-height: 1px; }
.gen-year b { font-family: var(--mono); font-size: 9.5px; font-weight: 400; color: var(--ink-3); }
.gen-year:hover { border-bottom-color: var(--rule-strong); }
.gen-year:hover b { color: var(--ink); }
.gen-year.is-on { border-bottom-color: var(--accent); }
.gen-year.is-on b { color: var(--accent); }

.gen-born-head { margin: 2px 0 0; font-size: 12px; color: var(--ink-3); }
.gen-born { display: flex; flex-wrap: wrap; gap: 5px; max-height: 92px; overflow-y: auto; }

.gen-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
}

.gen-chip i { width: 7px; height: 7px; border-radius: 50%; }
.gen-chip em { font-family: var(--mono); font-size: 10px; font-style: normal; color: var(--ink-3); }
.gen-chip:hover { border-color: var(--accent); color: var(--accent); }
.gen-chip.is-on { border-color: var(--ink); background: var(--wash); }

.gen-stage { flex: 1 1 auto; min-height: 340px; }
#gen-svg { display: block; width: 100%; height: 100%; }
.gen-mark { cursor: pointer; }
.gen-mark text { paint-order: stroke; stroke: var(--paper); stroke-width: 3px; }
.gen-mark:hover circle { stroke: var(--accent); stroke-width: 2; }
.gen-mark:hover text { fill: var(--accent); }
.gen-mark.is-root text { font-weight: 600; }

@media (max-width: 900px) {
  .gen-head { flex-direction: column; }
  .gen-trail { justify-content: flex-start; }
}