/* ==========================================================================
   Žižek Archive — Swiss / neo-brutalist editorial.
   Light-only by deliberate commitment: hard borders, offset shadows with no
   blur, one yellow accent, no webfonts.

   Two rules govern the greys below. Every ink used for text clears WCAG AA
   (4.5:1) against BOTH backgrounds it can land on — #fff paper and #f6f6f6
   page — because the mono meta text is small and lands on either. And every
   size comes from the scale in --fs-*; nothing is typed in ad hoc.
   ========================================================================== */

:root {
  --bg: #f6f6f6;
  --paper: #ffffff;
  --ink: #111111;
  --ink-2: #636363;              /* 6.01:1 on paper · 5.56:1 on page */
  --ink-3: #71716b;              /* 4.91:1 on paper · 4.54:1 on page */
  --rule: #111111;
  --hair: #dcdcd6;
  --hi: #FFFB05;                 /* the accent — selection, hover, focus */
  --hi-soft: #fffde0;

  /* categorical scale: the 10 meta-clusters, fixed by cluster order.
     Wayfinding only — identity is always carried by a visible label as well.
     Compare mode uses the first three slots of the validated series palette. */
  --m0: #2a78d6; --m1: #eb6834; --m2: #1baf7a; --m3: #eda100; --m4: #e87ba4;
  --m5: #008300; --m6: #4a3aa7; --m7: #e34948; --m8: #00849e; --m9: #7f7000;

  /* stance: read as text on white in .tag, so both clear AA there */
  --pos: #0a7d0a;                /* 5.40:1 on paper */
  --neg: #c02f2f;                /* 5.55:1 on paper */

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Courier New", Courier, monospace;
  --shadow: 0.35ex 0.35ex 0 var(--ink);
  --shadow-lg: 0.6ex 0.6ex 0 var(--ink);

  /* --- type scale ----------------------------------------------------
     mono runs small and letter-spaced, so it gets its own three steps;
     11.2px is the floor for anything a reader is expected to parse. */
  --fm-1: .70rem;   /* 11.2px — counts, captions, sub-meta */
  --fm-2: .74rem;   /* 11.8px — the default meta / label */
  --fm-3: .80rem;   /* 12.8px — controls, inputs, buttons */

  --fs-1: .82rem;   /* 13.1px — .tiny */
  --fs-2: .88rem;   /* 14.1px — .small, dense list text */
  --fs-3: .95rem;   /* 15.2px — secondary prose */
  --fs-4: 1rem;     /* 16px   — body */
  --fs-5: 1.1rem;   /* 17.6px — lede */
  --fs-6: 1.32rem;  /* 21.1px — pull quotes */

  /* --- spacing scale -------------------------------------------------- */
  --s1: .35rem;
  --s2: .6rem;
  --s3: .9rem;
  --s4: 1.4rem;
  --s5: 2.2rem;
  --s6: 3.2rem;
  --pad-y: .9rem;                /* one padding for every bordered panel */
  --pad-x: 1rem;

  --tap: 24px;                   /* WCAG 2.2 minimum target */
  --hdr: 54px;                   /* measured header height; the graph page
                                    sizes itself against it */
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--hi); color: var(--ink); }

a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--ink-3); }
a:hover { background: var(--hi); border-bottom-color: var(--ink); }

/* Keyboard focus: a yellow ring sitting inside a hard ink ring. The pair
   works on paper, on the page grey and on the ink-filled buttons alike —
   one of the two always has >3:1 against whatever is behind it. */
:focus-visible {
  outline: 3px solid var(--hi);
  outline-offset: 0;
  box-shadow: 0 0 0 3px var(--ink);
}
a.card:focus-visible,
.card:focus-visible { box-shadow: 0 0 0 3px var(--ink), var(--shadow-lg); }
:focus:not(:focus-visible) { outline: none; }

h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.02em; margin: 0 0 .4em; }
h1 { font-size: 2.6rem; line-height: 1.05; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1em; }

.mono, .meta, .label {
  font-family: var(--mono);
  font-size: var(--fm-2);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ------------------------------------------------------------------ chrome */
header.top {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1rem;
  padding: .5rem 1.2rem;
  background: var(--bg);
  border-bottom: 2px solid var(--rule);
}
header.top .brand {
  font-weight: 700; font-size: 1.05rem; letter-spacing: -.02em;
  border: none; white-space: nowrap; padding: .15rem 0;
}
header.top .brand:hover { background: var(--hi); }
header.top nav { display: flex; gap: .1rem; flex-wrap: wrap; flex: 1; min-width: 0; }
header.top nav a {
  border: none; padding: .25rem .5rem;
  display: inline-flex; align-items: center; min-height: var(--tap);
  font-family: var(--mono); font-size: var(--fm-2); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
header.top nav a:hover { background: var(--hi); color: var(--ink); }
header.top nav a.on { background: var(--ink); color: #fff; }
header.top nav a.on:hover { background: var(--hi); color: var(--ink); }

.searchbox {
  display: flex; align-items: center; gap: .4rem; flex: none; min-width: 0;
  border: 2px solid var(--ink); background: var(--paper);
  padding: .1rem .5rem;
}
.searchbox input {
  border: 0; outline: 0; background: transparent; font-family: var(--mono);
  font-size: var(--fm-3); width: 15rem; min-width: 0; padding: .3rem 0; color: var(--ink);
}
.searchbox kbd {
  font-family: var(--mono); font-size: var(--fm-1); border: 1px solid var(--hair);
  padding: .1rem .3rem; color: var(--ink-3); flex: none;
}

main { padding: var(--s5) 1.2rem var(--s6); }
main:has(.graph-page) { padding: 0; }
body:has(.graph-page) footer.foot { display: none; }
.wrap { max-width: 1180px; margin: 0 auto; }
.wrap-wide { max-width: 1500px; margin: 0 auto; }

/* Prose measure. Body copy that is allowed to run the full 1180px column
   reaches ~150 characters a line; these caps hold it near 90. */
.measure { max-width: 88ch; }

/* ------------------------------------------------------------------- bits */
.crumb { font-family: var(--mono); font-size: var(--fm-2); letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-2); margin-bottom: var(--s3); }
.crumb a { border: none; color: var(--ink-2); }
.crumb a:hover { background: var(--hi); color: var(--ink); }

.lede { font-size: var(--fs-5); max-width: 62ch; color: #333; }

/* A quoted run inside a write-up is a receipt: it was located in a transcript
   at a known second, so it links there and carries that second as a superscript.
   The mark stays quiet — this is body prose, and a paragraph with three loud
   links in it stops being readable as a sentence. */
/* Two strengths of receipt, marked differently because they are not the same
   claim. `.said` is Žižek's own words located in a transcript at a known second
   — a solid rule, like any other link. `.from` is a reading the composition step
   took from a particular talk, so it is traceable but not a quotation; a dotted
   rule says "sourced" without dressing a paraphrase up as speech. */
.view .cite.said { border-bottom: 1px solid var(--ink-3); }
.view .cite.from { border-bottom: 1px dotted var(--ink-3); }
.view .cite:hover { background: var(--hi); border-bottom-color: var(--ink); }
.cite-at { font-family: var(--mono); font-size: .6em; letter-spacing: .02em;
  color: var(--ink-2); vertical-align: super; margin-left: .15em; }
.view .cite:hover .cite-at { color: var(--ink); }

.rule { border: 0; border-top: 2px solid var(--ink); margin: var(--s5) 0 var(--s4); }
.hair { border: 0; border-top: 1px solid var(--hair); margin: 1rem 0; }

.card {
  background: var(--paper); border: 2px solid var(--ink);
  box-shadow: var(--shadow); padding: var(--pad-y) var(--pad-x);
}
a.card { border-bottom: 2px solid var(--ink); display: block; }
/* A theme card's family is worth more than the 10px swatch it had. The cap is
   the one place colour can go without competing with the ink border. */
.card.accent { border-top: 6px solid var(--accent, var(--ink)); padding-top: calc(var(--pad-y) - 4px); }
a.card:hover { background: var(--hi); transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); }
.card, a.card { transition: transform .1s ease, box-shadow .1s ease, background .1s; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--s3); }
.tile { border: 2px solid var(--ink); background: var(--paper); padding: .75rem .9rem;
  box-shadow: var(--shadow); }
/* The talks are the source of every other number in the row, so the first tile
   is the accent one — the same move the link-preview cards make. */
.tile.lead { background: var(--hi); }
.tile.lead .k { color: var(--ink); }
.tile .v { font-size: 1.9rem; font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.tile .k { font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-2); margin-top: .2rem; }

.grid { display: grid; gap: var(--s3); align-items: start; }
/* cards in a row read as one band only if they share a baseline at the bottom;
   the ragged edges came from the grid's align-items:start */
.grid > a.card, .grid > .card, .grid > .chart, .grid > blockquote.q { align-self: stretch; }
/* Descriptions used to be sliced at 150 characters in JS, which cut mid-word.
   The cards stretch to a shared height anyway, so clamp on a line boundary. */
.card p.tiny { display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.grid > blockquote.q { margin-bottom: 0; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid-2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* Three panels of unrelated lists sitting side by side. Cards carry a border to
   separate them; these do not, so the gutter is the only thing keeping the
   columns from reading as one ragged table. */
.g3-apart { column-gap: var(--s6); row-gap: var(--s5); }
/* "people he thinks with" — the noun is what the reader is scanning for and
   what the link leads to, so it keeps the heading weight and the rest drops to
   regular. Same size and colour throughout: this is emphasis, not a subtitle. */
.h2-kw { font-weight: 400; }
.h2-kw b { font-weight: 700; }

/* The talks finder: results, then a sticky narrow-by rail. Written here rather
   than inline on the element so the responsive rule below can simply override
   it instead of out-specifying a style attribute. */
.finder-split { grid-template-columns: minmax(0, 1fr) 260px; gap: 1.4rem; align-items: start; }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

/* A chip carries a name that can be 50 characters long ("Transcendental
   Horizon, Correlationism & Heidegger"); nowrap made it 488px wide inside a
   352px column. It now wraps inside its own border instead. */
.chip {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1.5px solid var(--ink); background: var(--paper);
  padding: .2rem .5rem; min-height: var(--tap);
  font-family: var(--mono); font-size: var(--fm-1);
  letter-spacing: .03em; margin: 0 .25rem .3rem 0;
  max-width: 100%; min-width: 0; white-space: normal; overflow-wrap: anywhere;
}
a.chip { border-bottom-width: 1.5px; }
a.chip:hover { background: var(--hi); }
.chip .n { color: var(--ink-2); flex: none; }
.chip.on { background: var(--ink); color: #fff; }
.chip.on .n { color: #cfcfcf; }
.swatch { width: .62rem; height: .62rem; display: inline-block;
  border: 1px solid rgba(0,0,0,.35); flex: none; }

.tag { font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); border: 1px solid var(--hair);
  padding: .1rem .35rem; margin-right: .25rem; white-space: nowrap;
  display: inline-block; }
/* Stance is a class, not an inline colour, so the token can later be split into
   a fill and a darker text step without touching the markup. The word itself
   carries the meaning — the colour only reinforces it. */
.tag.positive { color: var(--pos); }
.tag.negative { color: var(--neg); }
.tag.neutral  { color: var(--ink-2); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 2px solid var(--ink); background: var(--ink);
  color: #fff; padding: .3rem .7rem; min-height: 28px;
  font-family: var(--mono); font-size: var(--fm-2);
  letter-spacing: .05em; text-transform: uppercase; cursor: pointer;
}
.btn:hover { background: var(--hi); color: var(--ink); }
.btn.ghost { background: var(--paper); color: var(--ink); }
.btn.ghost:hover { background: var(--hi); }
.btn.on { background: var(--hi); color: var(--ink); }

input[type=text], input[type=search], select {
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink);
  font-family: var(--mono); font-size: var(--fm-3); padding: .3rem .45rem;
  outline: 0; min-height: 28px; max-width: 100%;
}
input:focus, select:focus { background: var(--hi-soft); }
/* the checkbox and slider are the only controls the browser draws for us, and
   at their default 13px they were the smallest targets on the site */
input[type=checkbox] { accent-color: var(--ink); width: 22px; height: 22px;
  margin: 0; flex: none; cursor: pointer; }
input[type=range] { accent-color: var(--ink); height: 24px; }

.toolbar { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin-bottom: 1rem; }
.count { font-family: var(--mono); font-size: var(--fm-2); color: var(--ink-2);
  letter-spacing: .04em; }

/* -------------------------------------------------------------- list rows */
.rows { border-top: 2px solid var(--ink); }
.row {
  display: flex; gap: var(--s3); align-items: baseline;
  padding: .55rem .6rem; border-bottom: 1px solid var(--hair);
  border-left: 3px solid transparent; text-decoration: none;
}
a.row { border-bottom: 1px solid var(--hair); }
/* The 3px left border was reserved for hover and sat transparent the rest of
   the time. Rows that know their meta-cluster set --spine to the same colour
   their dot already carries, so a long list gains a coloured margin that says
   which family each entry belongs to. Hover still overrides it with ink —
   setting the custom property rather than the property itself is what keeps
   the hover rule winning. */
.row { border-left-color: var(--spine, transparent); }
a.row:hover { background: var(--hi); border-left-color: var(--ink); }
.row .n { font-family: var(--mono); font-size: var(--fm-2); color: var(--ink-2);
  min-width: 3.2rem; text-align: right; flex: none; }
.row .t { flex: 1; min-width: 0; }
.row .t .sub { font-size: var(--fs-1); color: var(--ink-2); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.row .side { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2); flex: none; }
.dot { width: .55rem; height: .55rem; flex: none; border: 1px solid rgba(0,0,0,.3); }
/* book / film / opera. The emoji is aria-hidden and the word is always beside
   it, so this is a second channel on an existing label, never the label. */
.wk { display: inline-flex; align-items: baseline; gap: .3em; }
.wk > [aria-hidden] { font-size: 1.05em; line-height: 1; }

/* ------------------------------------------------------------- entity page */
.entity-head { display: flex; gap: var(--s4); flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; margin-bottom: var(--s2); }
.section { margin: var(--s5) 0; }
.section > h2 { display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap; }
.section > h2 .appsort { font-size: var(--fm-1); padding: .2rem .3rem; }
.section > h2 .c { font-family: var(--mono); font-size: var(--fm-2); color: var(--ink-2);
  font-weight: 400; letter-spacing: .05em; }

.occ { border-left: 3px solid var(--hair); padding: .1rem 0 .1rem var(--s3);
  margin-bottom: var(--s3); }
.occ:hover { border-left-color: var(--ink); }
.occ .src { font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .04em;
  margin-bottom: .15rem; }
.occ .src a { border: none; color: var(--ink-2); }
.occ .src a:hover { background: var(--hi); color: var(--ink); }
.occ .body { font-size: var(--fs-3); max-width: 88ch; }

blockquote.q {
  margin: 0 0 1rem; padding: var(--pad-y) var(--pad-x); background: var(--paper);
  border: 2px solid var(--ink); box-shadow: var(--shadow);
  /* The homepage quote is the only place Žižek speaks in his own voice rather
     than being catalogued, so it is set a step above the lede rather than at it. */
  font-size: var(--fs-6);
  line-height: 1.4;
  /* a pull quote set across the full 1180px column runs past 140 characters;
     the box itself has to hold the measure, because the quote text is a bare
     text node with nothing inside it to cap */
  max-width: 90ch;
}
blockquote.q .attrib { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2);
  margin-top: var(--s2); letter-spacing: .04em; line-height: 2; }
blockquote.q .attrib a { border: none; color: var(--ink-2); }
/* the quote box: text left, a full-height die on the right to roll another */
blockquote.q:has(.dice) { display: flex; align-items: stretch; gap: 1rem; }
blockquote.q .qbody { flex: 1; min-width: 0; max-width: 82ch; }
.dice { flex: none; align-self: stretch; display: flex; align-items: center; justify-content: center;
  width: 2.6rem; min-height: var(--tap); border: 0; border-left: 1px solid var(--hair);
  background: none; cursor: pointer; color: var(--ink-2); }
.dice:hover { background: var(--hi); color: var(--ink); }
.dice:active svg { transform: translateY(1px); }
blockquote.q .attrib a:hover { background: var(--hi); color: var(--ink); }

.claim { display: flex; gap: var(--s2); padding: .5rem 0; border-bottom: 1px solid var(--hair); }
.claim .pol { font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase;
  letter-spacing: .05em; border: 1px solid var(--hair); padding: .1rem .3rem;
  height: fit-content; white-space: nowrap; color: var(--ink-2); }

.move { padding: .6rem 0; border-bottom: 1px solid var(--hair); }
.move .f { font-weight: 600; }
.move .g { font-size: var(--fs-3); color: #444; max-width: 88ch; }

/* neighbour cards */
.nbr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem; }
.nbr { display: flex; flex-direction: column; gap: .05rem; padding: .4rem .5rem;
  border: 1px solid var(--hair); background: var(--paper); text-decoration: none;
  border-bottom: 1px solid var(--hair); }
.nbr:hover { background: var(--hi); border-color: var(--ink); }
.nbr .w { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2); letter-spacing: .04em; }
.nbr .nm { font-size: var(--fs-2); line-height: 1.25; }
.nbr .sub { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-3); }

/* stance: two bars side by side, personal then intellectual */
.stance-duo { display: flex; align-items: center; gap: .35rem; flex: none; }
.stance-duo .sl { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-3);
  letter-spacing: .04em; }
.sbar { display: flex; width: 3.6rem; height: .7rem; border: 1.5px solid var(--ink);
  background: var(--paper); flex: none; }
.sbar i { display: block; height: 100%; }
.sbar.empty { border-color: var(--hair); }

/* filter buttons in place of a select */
.kind-row { display: flex; flex-wrap: wrap; gap: .3rem; margin: -.4rem 0 1rem; }
.kind-row .kind {
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer;
  padding: .2rem .55rem; min-height: var(--tap);
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .03em;
}
.kind-row .kind:hover { background: var(--hi); }
.kind-row .kind.on { background: var(--ink); color: #fff; }
.kind-row .kind .n { color: var(--ink-3); }
.kind-row .kind.on .n { color: #cfcfcf; }

/* two-thumb year range */
.range { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin: -.4rem 0 var(--s3); }
.range-track { position: relative; width: min(22rem, 60vw); height: 1.6rem; }
.range-track::before { content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 3px; transform: translateY(-50%); background: #ddddd8; border: 1px solid var(--hair); }
.range-fill { position: absolute; top: 50%; height: 3px; transform: translateY(-50%);
  background: var(--ink); }
.range-track input[type=range] {
  position: absolute; left: 0; width: 100%; margin: 0; background: none;
  pointer-events: none; -webkit-appearance: none; appearance: none; height: 1.6rem;
  border: 0; min-height: 0; padding: 0;
}
.range-track input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 1rem; height: 1rem;
  background: var(--paper); border: 2px solid var(--ink); cursor: grab; border-radius: 0;
}
.range-track input[type=range]::-webkit-slider-thumb:hover { background: var(--hi); }
.range-track input[type=range]::-moz-range-thumb {
  pointer-events: auto; width: 1rem; height: 1rem; background: var(--paper);
  border: 2px solid var(--ink); cursor: grab; border-radius: 0;
}
.range output { min-width: 6rem; }

/* ------------------------------------------------------------ talk finder */
.finder { border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
  padding: .7rem .8rem; margin-bottom: 1rem; position: relative; }
.finder-row { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.finder input[type=search] { border: 0; border-bottom: 2px solid var(--ink); background: transparent;
  font-size: var(--fs-3); font-family: var(--sans); padding: .3rem 0; min-width: 0; }
.finder input[type=search]:focus { background: var(--hi-soft); }
.finder .pill-row { margin-top: var(--s2); }
.finder .pill-row:empty { margin: 0; }

.suggest { position: absolute; left: .8rem; right: .8rem; top: 3.2rem; z-index: 40;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow-lg);
  max-height: 20rem; overflow: auto; }
.suggest .sug { display: flex; gap: var(--s2); align-items: baseline; width: 100%;
  border: 0; border-bottom: 1px solid var(--hair); background: none; cursor: pointer;
  padding: .4rem .55rem; min-height: 28px; text-align: left; color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-2); }
.suggest .sug:hover { background: var(--hi); }
.suggest .sug .k { font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); min-width: 4rem; flex: none; }
.suggest .sug .nm { flex: 1; min-width: 0; }
.suggest .sug .ct { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-3); flex: none; }

#narrow { background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow);
  padding: var(--pad-y) .8rem; position: sticky; top: calc(var(--hdr) + .6rem);
  max-height: calc(100vh - var(--hdr) - 1.6rem); overflow: auto; }
.narrow-block { margin-bottom: var(--s4); }
.narrow-block .nsearch { width: 100%; border: 0; border-bottom: 1px solid var(--hair);
  background: transparent; font-family: var(--mono); font-size: var(--fm-1);
  padding: .25rem 0; margin-bottom: .25rem; min-height: var(--tap); }
.narrow-block .nsearch:focus { background: var(--hi-soft); }
.narrow-block .nmore { border: 0; background: none; cursor: pointer; padding: .25rem .2rem;
  margin-left: -.2rem; min-height: var(--tap);
  font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .05em; color: var(--ink-2);
  text-transform: uppercase; }
.narrow-block .nmore:hover { background: var(--hi); color: var(--ink); }
.narrow-block .mono { margin-bottom: .3rem; }
.narrow-item { display: flex; gap: .4rem; align-items: baseline; width: 100%;
  border: 0; border-bottom: 1px solid var(--hair); background: none; cursor: pointer;
  padding: .3rem .15rem; min-height: var(--tap); text-align: left; color: var(--ink);
  font-family: var(--sans); font-size: var(--fs-1); }
.narrow-item:hover { background: var(--hi); }
.narrow-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.narrow-item .ct { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2); flex: none; }

/* legend strip: the colour key for the meta-clusters, doubling as a filter */
.legend-strip { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 1rem; }
.legend-strip .lg {
  display: inline-flex; align-items: center; gap: .35rem; cursor: pointer;
  border: 1px solid var(--hair); background: var(--paper); color: var(--ink-2);
  padding: .2rem .45rem; min-height: var(--tap);
  font-family: var(--mono); font-size: var(--fm-1);
  letter-spacing: .03em; max-width: 100%; min-width: 0;
  white-space: normal; overflow-wrap: anywhere; text-align: left;
}
.legend-strip .lg:hover { background: var(--hi); color: var(--ink); border-color: var(--ink); }
.legend-strip .lg.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.legend-strip .lg .n { color: var(--ink-3); flex: none; }
.legend-strip .lg.on .n { color: #cfcfcf; }

/* ---------------------------------------------------------------- player */
.player { border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
  max-width: 760px; }
.player .yt { aspect-ratio: 16/9; }
.player .yt iframe { display: block; width: 100%; height: 100%; border: 0; }
.player audio { display: block; width: 100%; }
.player-meta { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap;
  padding: .4rem .6rem; border-top: 1px solid var(--hair);
  font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .04em; color: var(--ink-2); }
.player-meta a { border: none; color: var(--ink-2); }
.player-meta a:hover { background: var(--hi); color: var(--ink); }

/* a clickable moment */
.stamp {
  font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .02em;
  border: 1.5px solid var(--ink); background: var(--paper); color: var(--ink);
  padding: 0 .35rem; cursor: pointer; white-space: nowrap; flex: none;
  min-width: 3.8rem; min-height: var(--tap);
  display: inline-flex; align-items: center; justify-content: center;
  text-align: center; text-decoration: none; vertical-align: middle;
}
a.stamp { border-bottom: 1.5px solid var(--ink); }
.stamp:hover { background: var(--hi); }

.appearance { padding: .7rem 0; border-bottom: 1px solid var(--hair); }
.appearance .src { font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .04em;
  color: var(--ink-2); margin-bottom: .35rem; line-height: 1.9; }
.appearance .src a { border: none; color: var(--ink-2); }
.appearance .src a:hover { background: var(--hi); color: var(--ink); }
/* the note under an appearance was the one block with no size or measure of
   its own: 16px running the full 1180px column */
.appearance .body { font-size: var(--fs-3); max-width: 88ch; margin-top: .25rem; }
.moment { display: flex; gap: var(--s2); align-items: flex-start; padding: .25rem 0;
  font-size: var(--fs-3); }
.moment > span { min-width: 0; max-width: 88ch; }
.moment .mono { color: var(--ink-2); border: none; }
.moment .quote { font-style: italic; }
.more-moments { display: none; }
.appearance.open .more-moments { display: block; }
.linkish { border: 0; background: none; padding: .25rem .3rem; margin-left: -.3rem;
  min-height: var(--tap); cursor: pointer;
  font-family: var(--mono); font-size: var(--fm-1); letter-spacing: .04em; color: var(--ink-2);
  text-transform: uppercase; }
.linkish:hover { background: var(--hi); color: var(--ink); }
.moment a.mono:hover { background: var(--hi); color: var(--ink); }

/* transcript */
.tx { max-height: 62vh; overflow: auto; border: 2px solid var(--ink);
  background: var(--paper); padding: var(--pad-y) var(--pad-x); }
.turn { padding: .5rem 0; border-bottom: 1px solid var(--hair); display: flex; gap: .7rem; }
.turn:last-child { border-bottom: 0; }
.turn > span:last-child { min-width: 0; max-width: 88ch; }
.turn .who { font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-2); min-width: 7.5rem; flex: none; }
.turn .who .ts { display: block; color: var(--ink-3); margin-top: .2rem; }
.turn .who a { border: none; color: var(--ink-2); }
.turn .who a:hover { background: var(--hi); }
.turn.z .who { color: var(--ink); font-weight: 700; }
.turn mark { background: var(--hi); }

/* stance bar */
.stance { display: flex; height: .75rem; border: 1.5px solid var(--ink); background: var(--paper); }
.stance i { display: block; height: 100%; }

/* ------------------------------------------------------------------ graph */
.graph-page { display: grid; grid-template-columns: 1fr 340px; gap: 0;
  height: calc(100vh - var(--hdr)); }
.graph-stage { position: relative; background: var(--paper);
  border-right: 2px solid var(--ink); overflow: hidden; }
.graph-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.graph-stage canvas.drag { cursor: grabbing; }

.gtitle { position: absolute; left: 1rem; top: .9rem; max-width: 40ch; pointer-events: none; }
.gtitle h1 { font-size: 1.5rem; margin: 0; }
.gtitle p { font-size: var(--fs-1); color: var(--ink-2); margin: .25rem 0 0; }

.gcontrols { position: absolute; left: 1rem; bottom: 1rem; display: flex; gap: .4rem;
  flex-wrap: wrap; align-items: center; max-width: calc(100% - 2rem); }
.gcontrols .pod { display: flex; align-items: center; gap: .4rem; background: var(--paper);
  border: 2px solid var(--ink); padding: .3rem .5rem; box-shadow: var(--shadow); }
.gcontrols .pod label { font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); }

.gswitch { position: absolute; right: 1rem; top: .9rem; display: flex; gap: .3rem; flex-wrap: wrap;
  justify-content: flex-end; max-width: 60%; }
.gswitch a { border: 2px solid var(--ink); background: var(--paper); padding: .25rem .5rem;
  display: inline-flex; align-items: center; min-height: var(--tap); white-space: nowrap;
  font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase; letter-spacing: .04em; }
.gswitch a:hover { background: var(--hi); }
.gswitch a.on { background: var(--ink); color: #fff; }

.gside { overflow: auto; padding: 1rem; background: var(--bg); }
.gside .empty { color: var(--ink-2); font-size: var(--fs-2); }
.legend-item { display: flex; align-items: center; gap: .45rem; width: 100%;
  padding: .3rem .35rem; min-height: var(--tap); border: 0; background: none; cursor: pointer;
  font-family: var(--sans); font-size: var(--fs-1); text-align: left; color: var(--ink); }
.legend-item:hover { background: var(--hi); }
.legend-item.on { background: var(--ink); color: #fff; }
.legend-item .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-item .ct { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2); flex: none; }
.legend-item.on .ct { color: #cfcfcf; }

.tooltip {
  position: absolute; pointer-events: none; z-index: 20; max-width: 22rem;
  background: var(--paper); border: 2px solid var(--ink); box-shadow: var(--shadow);
  padding: .4rem .55rem; font-size: var(--fs-2);
}
.tooltip .h { font-weight: 700; }
.tooltip .s { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2);
  text-transform: uppercase; letter-spacing: .04em; }

/* small ego graph on entity pages */
.ego { border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow);
  position: relative; align-self: start; }
.ego canvas { display: block; width: 100%; height: 340px; }
.ego .cap { position: absolute; left: .5rem; bottom: .4rem; font-family: var(--mono);
  font-size: var(--fm-1); color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em; }

/* charts */
.chart { border: 2px solid var(--ink); background: var(--paper);
  padding: var(--pad-y) var(--pad-x); box-shadow: var(--shadow); }
.chart h3 { font-size: var(--fs-4); margin-bottom: .1rem; }
.chart .sub { font-family: var(--mono); font-size: var(--fm-1); text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-2); margin-bottom: .7rem; }
.bars { display: grid; gap: .3rem; }
.bar-row { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: .5rem;
  align-items: center; font-size: var(--fs-1); }
.bar-row .lb { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row a.lb { border: none; }
.bar-row a.lb:hover { background: var(--hi); }
.bar-track { background: #e4e4e0; height: .75rem; }
.bar-fill { height: 100%; background: var(--ink); }
.bar-row .vl { font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2); }

.spark { display: flex; align-items: flex-end; gap: 1px; height: 60px; }
.spark i { flex: 1; background: var(--ink); min-height: 1px; }
.spark i:hover { background: var(--hi); outline: 1px solid var(--ink); }

/* misc */
.pill-row { display: flex; flex-wrap: wrap; gap: .25rem; margin: var(--s1) 0 0; min-width: 0; }
.pill-row > .chip { margin: 0; }
.muted { color: var(--ink-2); }
.small { font-size: var(--fs-2); }
.tiny { font-size: var(--fs-1); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }
.spinner { font-family: var(--mono); font-size: var(--fm-3); color: var(--ink-2); padding: 2rem 0; }

footer.foot { border-top: 2px solid var(--ink); margin-top: var(--s6); padding: 1rem 1.2rem;
  font-family: var(--mono); font-size: var(--fm-1); color: var(--ink-2);
  display: flex; gap: 1rem; flex-wrap: wrap; }

/* ============================================================== responsive */

/* Below ~900px the eight nav items no longer fit on the brand's line. Left to
   wrap they turned the header into a 224px-tall column at 390px and shoved the
   search field off-screen; worse, everything that measures itself against the
   header (the graph page, the sticky finder rail) was then wrong. The header
   is now explicitly two rows, with the nav scrolling sideways instead. */
@media (max-width: 900px) {
  :root { --hdr: 88px; }
  header.top { flex-wrap: wrap; row-gap: .3rem; gap: .6rem; padding: .45rem .8rem; }
  header.top .brand { order: 1; }
  header.top .searchbox { order: 2; flex: 1 1 8rem; max-width: 22rem; margin-left: auto; }
  header.top .searchbox input { width: 100%; }
  header.top nav {
    order: 3; flex-basis: 100%; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
  }
  header.top nav::-webkit-scrollbar { display: none; }

  .graph-page { grid-template-columns: 1fr; height: auto; }
  .graph-stage { height: 68vh; border-right: 0; border-bottom: 2px solid var(--ink); }
  .gside { max-height: none; }

  /* the seven view switches stacked seven deep over the canvas; one sideways
     strip at the top, with the title moved out from under it */
  .gswitch { left: .6rem; right: .6rem; top: .6rem; max-width: none;
    flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
    scrollbar-width: none; padding-bottom: 2px; }
  .gswitch::-webkit-scrollbar { display: none; }
  .gtitle { left: .6rem; right: .6rem; top: 3.4rem; max-width: none; }
  .gtitle h1 { font-size: 1.3rem; }
  /* the pods stay wrapped — hiding a control behind a sideways scroll is worse
     than spending two rows on it — but they are pinned to both edges so the
     rows pack instead of laddering */
  .gcontrols { left: .6rem; right: .6rem; bottom: .6rem; max-width: none; gap: .35rem; }
  .gcontrols .pod { flex: 0 1 auto; min-width: 0; }
  .gcontrols .pod input[type=search] { width: 100% !important; min-width: 6rem; }

  h1 { font-size: 2rem; }
}

@media (max-width: 760px) {
  /* `1fr` here let the track's automatic minimum win: the four homepage
     panels measured 460px inside a 352px column and scrolled the page
     sideways. minmax(0,1fr) clamps the track and lets the rows ellipsise. */
  .grid-2x2 { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }

  .finder-split { grid-template-columns: minmax(0, 1fr); }
  #narrow { position: static; max-height: none; }

  /* several toolbars carry an inline min-width of 16–26rem */
  .toolbar input[type=search], .toolbar input[type=text],
  .finder input[type=search], .finder-row input[type=search] {
    min-width: 0 !important; flex: 1 1 100% !important;
  }
  .finder-row .count, .finder-row .mono { flex: 1 1 100%; }
  .toolbar select, .toolbar .btn { flex: 0 1 auto; }

  .wrap, .wrap-wide { max-width: 100%; }
  main { padding: var(--s4) .9rem var(--s5); }
  .entity-head { gap: var(--s2); }
  .section { margin: var(--s4) 0; }
  .rule { margin: var(--s4) 0 var(--s3); }
  blockquote.q:has(.dice) { gap: .5rem; }
  .turn { flex-direction: column; gap: .2rem; }
  .turn .who { min-width: 0; }
  .turn .who .ts { display: inline-block; margin: 0 0 0 .4rem; }
  .bar-row { grid-template-columns: minmax(0, 8rem) minmax(0, 1fr) auto; }
}

@media (max-width: 460px) {
  h1 { font-size: 1.75rem; }
  .gswitch a { font-size: var(--fm-1); padding: .25rem .4rem; }
  .row { gap: var(--s2); padding: .55rem .35rem; }
  .row .n { min-width: 2.6rem; }
  .nbr-grid { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
  footer.foot { gap: .35rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .card, a.card { transition: none; }
  a.card:hover { transform: none; }
}