/* The essay. A reading page, not an interface.

   Prose sits at 66ch. Figures break out to the wider measure, and only
   figures do — a full-bleed paragraph is a design that has stopped caring
   whether anyone finishes the sentence.

   The one device carried over from the rest of the site is the LIMIT: a rule
   in --ink-loss down the left of anything that names what is not known or not
   established. In an essay arguing that a commons has to be honest about its
   own edges, the edges need a visual form, and it needs to be the same one
   the Atlas uses for a missing coordinate. */

.essay { padding-block: var(--s8) var(--s9); }

.essay__head { margin-bottom: var(--s8); }
.essay__title { max-width: 18ch; margin-bottom: var(--s5); }
.essay__standfirst {
  font-family: var(--font-display); font-size: var(--fs-section);
  line-height: 1.35; color: var(--ink-2); max-width: 40ch; font-weight: var(--wt-regular);
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32;
}
.essay__meta {
  margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--rule);
  font: var(--wt-regular) var(--fs-micro)/1.6 var(--font-mono); color: var(--ink-3);
  max-width: var(--measure);
}

.essay section { margin-bottom: var(--s8); }
.essay h2 {
  margin-bottom: var(--s4); max-width: 26ch;
  /* The section number is chrome, so it is mono and it does not compete. */
  display: flex; gap: var(--s3); align-items: baseline;
}
.essay h2 .n {
  font: var(--wt-regular) var(--fs-fine)/1 var(--font-mono);
  color: var(--ink-3); flex: none; padding-top: 2px;
}
.essay h3 { margin: var(--s6) 0 var(--s3); color: var(--ink-2); }

.essay p { font-size: var(--fs-lede); line-height: 1.62; }
.essay p + p { margin-top: 0; }

/* A quotation from a source, as opposed to our prose. Same discipline as the
   Atlas: somebody else's words are set apart, never blended in. */
.quote {
  margin: var(--s5) 0; padding-left: var(--s5);
  border-left: 2px solid var(--rule-strong); max-width: var(--measure);
}
.quote p { font-family: var(--font-display); font-size: var(--fs-section);
  line-height: 1.4; color: var(--ink); margin: 0;
  font-variation-settings: "SOFT" 0, "WONK" 0, "opsz" 32; }
.quote cite {
  display: block; margin-top: var(--s3); font-style: normal;
  font: var(--wt-regular) var(--fs-fine)/1.5 var(--font-mono); color: var(--ink-3);
}

/* Figures break out of the reading measure. */
.fig { margin: var(--s7) 0; max-width: var(--measure-wide); }
.fig svg { width: 100%; height: auto; display: block; }
.fig figcaption {
  margin-top: var(--s3); font-size: var(--fs-fine); color: var(--ink-3);
  line-height: 1.55; max-width: var(--measure);
}
.fig figcaption b { color: var(--ink-2); font-weight: var(--wt-medium); }

/* Diagram type. Set here rather than in each <text> so the whole figure
   scales with one change and nothing inherits the browser default. */
.dia { font-family: var(--font-ui); }
.dia .t    { font-size: 12px; font-weight: 500; fill: var(--ink); }
.dia .t-sm { font-size: 10.5px; fill: var(--ink-2); }
.dia .t-mono { font-family: var(--font-mono); font-size: 9.5px; fill: var(--ink-3); }
.dia .stroke { fill: none; stroke: var(--rule-strong); stroke-width: 1.5; }
.dia .accent { stroke: var(--ink-accent); }
.dia .surface { fill: var(--surface); stroke: var(--rule-strong); stroke-width: 1.5; }
.dia .sunk { fill: var(--surface-sunk); stroke: var(--rule); stroke-width: 1; }

.essay .limit { margin: var(--s5) 0; max-width: var(--measure); }
.essay .limit p { font-size: var(--fs-ui); line-height: 1.6; }
.essay .limit p:last-child { margin-bottom: 0; }

/* The rehearsal box: an authored example, labelled as authored, every time
   it appears. The dotted rule is the same language as a declared loss. */
.rehearsal {
  margin: var(--s6) 0; max-width: var(--measure-wide);
  border: 1px dashed var(--ink-loss); border-radius: var(--r-lg);
  background: var(--surface);
}
.rehearsal__tag {
  display: flex; align-items: center; gap: var(--s2);
  padding: var(--s3) var(--s5); border-bottom: 1px dashed var(--rule);
  font: var(--wt-medium) var(--fs-micro)/1.4 var(--font-mono);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-loss);
}
.rehearsal__body { padding: var(--s5); }
.rehearsal__body p { font-size: var(--fs-ui); line-height: 1.6; }
.rehearsal__body p:last-child { margin-bottom: 0; }

.step { display: grid; grid-template-columns: 92px minmax(0,1fr); gap: var(--s4); padding: var(--s3) 0; }
.step + .step { border-top: 1px solid var(--rule); }
.step__k {
  font: var(--wt-medium) var(--fs-micro)/1.5 var(--font-mono);
  color: var(--ink-3); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 2px;
}
.step__v { font-size: var(--fs-ui); line-height: 1.6; color: var(--ink-2); }
.step__v strong { color: var(--ink); font-weight: var(--wt-medium); }
@media (max-width: 620px) {
  .step { grid-template-columns: 1fr; gap: var(--s1); }
}

.essay .credits { font-size: var(--fs-ui); line-height: 1.7; }
.essay .credits p { font-size: var(--fs-ui); }

.toc {
  position: sticky; top: calc(var(--header-h) + var(--affil-h) + var(--s4));
  font: var(--wt-regular) var(--fs-fine)/1.9 var(--font-mono);
}
.toc a { display: block; color: var(--ink-3); text-decoration: none; }
.toc a:hover, .toc a.on { color: var(--ink); }
.essay__layout { display: grid; grid-template-columns: 168px minmax(0,1fr); gap: var(--s7); align-items: start; }
@media (max-width: 1020px) {
  .essay__layout { grid-template-columns: 1fr; }
  .toc { display: none; }
}

/* ── source marks and the reference list ──────────────────────────────────
   The rest of this site argues that a claim without a traceable source is a
   different kind of statement. This essay used to make roughly forty
   checkable claims about the world and link none of them, which made the
   essay the least accountable page on a site built around accountability.

   Two decisions carry the whole design:

   1. A mark is a LINK, not a script hook. It resolves to a reference that is
      authored into the HTML — the source's verbatim words, who published it,
      the retrieval date and the canonical URL. With JavaScript off, or the
      gateway down, every citation still works. essay.js only adds the CHECK
      (does the collection still say this?).

   2. The references sit in ONE list at the end of the reading, not in five
      blocks under the sections they belong to. That is a change: a reader
      who finished a section used to meet a page and a half of apparatus
      before the next paragraph, and an essay arguing for careful sourcing
      was the hardest page on the site to actually read. Access did not
      change — the number goes down, the number in the reference comes back,
      and both directions work with scripting off. */

.mark {
  /* Superscript, small, accent — visible enough to follow, quiet enough to
     read past. `line-height: 0` keeps a marked sentence on the same leading
     as an unmarked one; without it a paragraph full of marks sits taller
     than its neighbours and the column looks broken.

     The brackets are gone. At one mark per sentence "[14]" is a bracketed
     interruption in the middle of a line of prose; the bare superscript
     numeral is the same link and reads past more easily. */
  font: var(--wt-medium) var(--fs-micro)/0 var(--font-mono);
  vertical-align: super; margin-left: 1px; padding: 0 1px;
  color: var(--ink-accent); text-decoration: none;
}
.mark:hover, .mark:focus-visible { color: var(--ink-accent-hi); text-decoration: underline; }
/* The reference you just jumped to, and the sentence you came back to. Plain
   CSS on :target, so it works with scripting off. */
.note:target { background: var(--surface-sunk); }
.mark:target { background: var(--surface-sunk); outline: 2px solid var(--surface-sunk); }

.notes { max-width: var(--measure); margin-top: var(--s5); }
.note {
  display: flex; gap: var(--s3); padding: var(--s3) 0;
  border-top: 1px solid var(--rule); border-radius: var(--r-sm);
}
.note__n {
  flex: none; width: 22px;
  font: var(--wt-medium) var(--fs-micro)/1.6 var(--font-mono); color: var(--ink-3);
}
.note__n a { color: inherit; text-decoration: none; }
.note__n a:hover { color: var(--ink-accent); }
.note__body { min-width: 0; }
/* Ours: what the essay draws from the passage, and any condition the
   collection attaches to it — a photo caption, a reporter's summary, an
   edited account rather than a transcript. The caveat belongs beside the
   quote, not in a policy page nobody opens. */
.note__claim { font-size: var(--fs-fine); line-height: 1.55; color: var(--ink-2); }
/* Somebody else's words. Same rule-on-the-left device as .quote above and as
   the Atlas card, because the distinction between their sentence and ours is
   the one distinction this site cannot afford to blur. */
.note__quote {
  margin: var(--s2) 0 0; padding-left: var(--s3);
  border-left: 2px solid var(--rule-strong);
  font: var(--wt-regular) var(--fs-fine)/1.6 var(--font-mono);
  color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
}
.note__meta {
  margin-top: var(--s1);
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3);
  overflow-wrap: anywhere;
}
.note__meta a, .note__links a { color: var(--ink-accent); }
/* `overflow-wrap: anywhere` above is for the attributions, some of which
   carry a bare URL (The Conversation's required credit line does). It must
   not also chop the link LABEL across two lines, which is what it did. */
.note__meta a { white-space: nowrap; }
.note__links {
  margin-top: var(--s2);
  font: var(--wt-medium) var(--fs-micro)/1.4 var(--font-mono);
}

/* ── the check, and what it is allowed to say ─────────────────────────────
   essay.js compares each quoted line above with the same passage in the
   collection the gateway is currently serving. That is a STRING COMPARISON.
   It catches the corpus moving under an essay that did not — which is the
   drift that actually happens here — and it catches nothing else. It cannot
   tell whether the passage supports the sentence it is attached to; a person
   decided that, and a person can be wrong. The wording in essay.js says so,
   and this comment exists so nobody restyles the line into a badge. */
.essay__verify {
  margin-top: var(--s3);
  font: var(--wt-regular) var(--fs-micro)/1.6 var(--font-mono); color: var(--ink-3);
  max-width: var(--measure);
}
.essay__verify[data-state="checking"] { opacity: 0.7; }
.essay__verify[data-state="fail"] { color: var(--ink-loss); }
.essay__verify[data-state="unreachable"] { color: var(--ink-loss); }

/* A per-note verdict. Never a tick: the words are the label, because a green
   mark with no sentence attached is exactly how a narrow check gets read as
   a broad one. */
.note__state {
  margin-top: var(--s2);
  font: var(--wt-regular) var(--fs-micro)/1.5 var(--font-mono); color: var(--ink-3);
}
.note__state[data-state="mismatch"], .note__state[data-state="missing"] {
  color: var(--ink-loss);
}
.note__read {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: var(--wt-medium) var(--fs-micro)/1.4 var(--font-mono);
  color: var(--ink-accent); text-decoration: underline; text-underline-offset: 2px;
}
.note__read:hover { color: var(--ink-accent-hi); }
.note__passage {
  margin-top: var(--s2); padding: var(--s3);
  background: var(--surface-sunk); border-radius: var(--r-md);
  font: var(--wt-regular) var(--fs-micro)/1.6 var(--font-mono); color: var(--ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.note__passage[hidden] { display: none !important; }

/* The negative control's own report (?verify=1). Deliberately ugly-plain: it
   is a test result, not part of the reading page. */
.selfcheck {
  margin: var(--s5) 0; padding: var(--s4); max-width: var(--measure);
  border: 1px dashed var(--ink-loss); border-radius: var(--r-md);
  font: var(--wt-regular) var(--fs-micro)/1.7 var(--font-mono); color: var(--ink-2);
  white-space: pre-wrap;
}

@media (max-width: 620px) {
  /* The note number moves above its body rather than beside it: at 390px a
     22px gutter plus a mono quote left almost nothing for the quote. */
  .note { flex-direction: column; gap: var(--s1); }
  .note__n { width: auto; }
}