/* Who Do You Think I Am? — essay site for the BSD preprint.
   Palette A: a dark gallery wall in the tones of Las Meninas.
   The map is a light "plate" hung on that wall. */

:root {
  --wall: #1c1915;          /* umber-black of the painting's back room */
  --wall-2: #24201b;        /* slightly lifted wall, for notes */
  --ink-light: #e9e0cd;     /* lead white */
  --ink-muted: #a89c86;     /* warm grey */
  --ink-faint: #6d6455;
  --gilt: #b8924a;          /* frame gold */
  --accent: #a8382c;        /* the red cross on Velázquez's chest */
  --rule: rgba(233, 224, 205, 0.14);

  --paper: #e8ddc5;         /* map plate */
  --paper-ink: #3a2e22;     /* sepia engraving ink */
  --paper-wash: #d8c8a4;    /* ochre wash for a highlighted province */
  --sea-line: rgba(58, 46, 34, 0.22);

  /* Three text styles only: titles (Cormorant), text (Caslon), labels
     (Caslon capitals, spaced). */
  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-text: "Libre Caslon Text", Georgia, serif;

  --measure: 44rem;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--wall);
  color: var(--ink-light);
  font-family: var(--serif-text);
  font-size: 1.06rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration-color: var(--gilt); text-underline-offset: 0.18em; }
a:hover { color: #fff; }
em { font-style: italic; }

.kicker {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  font-size: 1.05rem;
  color: var(--gilt);
}

/* ─── Title page ───────────────────────────────────── */

.title-page {
  position: relative;
  min-height: 72vh;
  max-width: 76rem;
  margin: 0 auto;
  padding: 6rem 2rem 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3.5rem;
}

/* Engraving and headline side by side; the frame spans the headline block
   from the kicker to the last line of the subtitle. */
.title-main {
  display: grid;
  grid-template-columns: minmax(0, 24rem) minmax(0, 1fr);
  gap: 4.5rem;
  align-items: stretch;
}
.title-plate { margin: 0; display: flex; flex-direction: column; }
.title-plate figcaption { margin-top: 0.6rem; font-size: 0.85rem; line-height: 1.4; color: var(--ink-faint); }
.title-plate .painting-frame { flex: 1; display: flex; }
.title-plate img { width: 100%; height: 100%; object-fit: cover; display: block; }

.title-text { display: flex; flex-direction: column; justify-content: center; }
.title-page .kicker { margin-bottom: 1.6rem; display: block; }

.title-page h1 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
}
.title-page h1 em {
  color: var(--accent);
  font-weight: 500;
}

.title-page .subtitle {
  margin: 1.8rem 0 0;
  max-width: 44rem;
  font-size: 1.15rem;
  color: var(--ink-muted);
}
/* No single-word last lines in running text. */
.prose p, .note p, .end-matter p { text-wrap: pretty; }

/* Link to the author's page, top right of the title page. */
.author-link { position: absolute; top: 2rem; right: 2rem; text-decoration: none; border-bottom: 1px solid var(--gilt); padding-bottom: 3px; }
.author-link:hover { color: var(--ink-light); border-color: var(--ink-light); }

/* "Based on: Preprint · Code", under the subtitle, in the label style. */
.title-links {
  margin-top: 2.2rem;
  display: flex;
  align-items: baseline;
  gap: 1.6rem;
}
.title-links a { color: var(--gilt); text-decoration: none; border-bottom: 1px solid var(--gilt); padding-bottom: 3px; }
.title-links a:hover { color: var(--ink-light); border-color: var(--ink-light); }

/* Outline between the title page and the introduction: one wrapped row of labels. */
.outline {
  max-width: 76rem;
  margin: 0 auto;
  padding: 1.6rem 1rem 1.8rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.outline h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 1.1rem;
}
.outline-list {
  display: grid;
  grid-template-columns: repeat(4, auto);
  justify-content: center;
  justify-items: center;
  gap: 0.9rem 2.6rem;
}
@media (max-width: 860px) { .outline-list { grid-template-columns: repeat(2, auto); gap: 0.9rem 1.4rem; } }
.outline-num { color: var(--ink-muted); margin-right: 0.3em; }
.outline a { text-decoration: none; padding-bottom: 3px; border-bottom: 1px solid transparent; }
.outline a:hover { color: var(--ink-light); border-color: var(--ink-light); }

/* ─── Chapter opening ──────────────────────────────── */

.chapter-head {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3.5rem 1rem 1.5rem;
}

.chapter-head .numeral {
  font-family: var(--serif-display);
  font-size: 1.4rem;
  color: var(--gilt);
  letter-spacing: 0.3em;
  display: block;
  margin-bottom: 0.4rem;
}

.chapter-head h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(2rem, 5.2vw, 4rem);
  line-height: 1.05;
  margin: 0.6rem 0 2rem;
  white-space: nowrap;
}
.chapter-head h2 em { color: var(--accent); }

.prose p { margin-bottom: 1.1rem; }
/* Short points with a bold lead-in, set off by a gilt rule. */
.prose .points { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.prose .points li { margin-bottom: 0.9rem; padding-left: 1.1rem; border-left: 1px solid var(--accent); text-wrap: pretty; }
.prose .points strong { font-weight: 700; color: var(--accent); }
.prose ol.points { counter-reset: point; }
.prose ol.points li { counter-increment: point; }
.prose ol.points li::before { content: counter(point) ". "; color: var(--accent); font-weight: 700; }

/* ─── Scrollytelling: the map ──────────────────────── */
/* A pinned stage: the map takes ~65% of the screen height at full width,
   the notes strip sits below it. Invisible triggers behind the stage
   drive the steps as the reader scrolls. */

.scrolly {
  position: relative;
  margin-top: 2rem;
}

.stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.9rem;
  padding: 1vh 2rem 1.5vh;
}

/* The plate: map on paper inside a thin gilt frame. Its width follows the
   height budget (58vh at the map's 1500:680 ratio) but never exceeds the screen. */
.plate {
  position: relative;
  width: min(100%, calc(58vh * 1500 / 680 + 22px));
  margin: 0 auto;
  border: 1px solid var(--gilt);
  padding: 10px;
}
.plate::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 146, 74, 0.35);
  pointer-events: none;
}

.map {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  font-family: var(--serif-text);
}

.notes {
  width: min(100%, calc(58vh * 1500 / 680 + 22px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2rem;
  align-items: start;
  background: var(--wall-2);
  border: 1px solid rgba(184, 146, 74, 0.45);
  border-top: 2px solid var(--gilt);
  padding: 1.1rem 1.8rem 1.1rem;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}

.note-index {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.note-index button {
  background: none;
  border: 0;
  color: var(--ink-faint);
  font-family: var(--serif-text);
  font-size: 1.2rem;
  letter-spacing: 0.1em;
  text-align: left;
  cursor: pointer;
  padding: 0.05rem 0.2rem;
  transition: color 0.3s ease;
}
.note-index button:hover { color: var(--ink-light); }
.note-index button.is-active { color: var(--gilt); }

/* All notes share one grid cell so the strip keeps the height of the longest. */
.note-stack { display: grid; }
.note {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  align-content: start;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s linear 0.45s;
}
.note.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s ease, transform 0.45s ease, visibility 0s;
}
.note-num {
  grid-column: 1 / -1;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.16em;
  color: var(--gilt);
  font-size: 1.15rem;
  margin-bottom: 0.45rem;
}
.note p { font-size: 1.06rem; line-height: 1.65; color: #f1ead9; }

.triggers {
  position: relative;
  margin-top: -100vh;
  margin-top: -100svh;
  pointer-events: none;
}
.trigger { height: 90vh; }
.trigger:last-child { height: 150vh; }

/* ─── Map internals (SVG) ──────────────────────────── */

.map .sea-lines path { stroke: var(--sea-line); fill: none; stroke-width: 0.8; }
.map .rhumb line { stroke: rgba(58, 46, 34, 0.12); stroke-width: 0.6; }

.map .coast { fill: #efe6d2; stroke: var(--paper-ink); stroke-width: 1.4; transition: fill 0.7s ease; }
.map .ripple { fill: none; stroke: var(--paper-ink); }

.map .region-name {
  fill: var(--paper-ink);
  font-family: var(--serif-text);
  font-style: normal;
  letter-spacing: 0.16em;
  font-size: 18px;
}
.map .region-sub {
  fill: rgba(58, 46, 34, 0.75);
  font-style: normal;
  font-size: 13.5px;
  letter-spacing: 0.03em;
}

.map .hill { fill: none; stroke: rgba(58, 46, 34, 0.45); stroke-width: 0.9; }

.map .place { cursor: pointer; }
.map .place .dot-outer { fill: var(--paper); stroke: var(--paper-ink); stroke-width: 1.3; }
.map .place .dot-inner { fill: var(--paper-ink); }
.map .place text {
  fill: var(--paper-ink);
  font-size: 15.5px;
  paint-order: stroke;
  stroke: var(--paper);
  stroke-width: 4px;
  stroke-linejoin: round;
}
.map .place .year { font-size: 12.5px; fill: rgba(58, 46, 34, 0.7); }
.map .place:hover .dot-outer,
.map .place:focus .dot-outer,
.map .place.is-open .dot-outer { fill: var(--accent); stroke: var(--accent); }
.map .place:hover text,
.map .place:focus text,
.map .place.is-open text { fill: var(--accent); }
.map .place:focus { outline: none; }
.map .place:focus-visible .dot-outer { stroke-width: 3; }

.map .strait-label {
  fill: rgba(58, 46, 34, 0.8);
  font-family: var(--serif-text);
  font-style: normal;
  font-size: 19px;
  letter-spacing: 0.06em;
}

.map .rail { fill: none; stroke-width: 1.6; stroke-linecap: round; }
.map .planks line { stroke-width: 1.1; }
.map .bridge-latentqa .rail, .map .bridge-latentqa .planks line { stroke: var(--paper-ink); }
.map .bridge-bsd .rail { stroke: var(--accent); stroke-width: 2.2; }
.map .bridge-bsd .planks line { stroke: var(--accent); }
.map .bridge-name .bridge-label {
  fill: var(--accent);
  font-family: var(--serif-text);
  font-size: 19px;
  font-style: italic;
  font-weight: 500;
  stroke: var(--paper);
  stroke-width: 5px;
}
.map .bridge-name:hover .bridge-label,
.map .bridge-name:focus .bridge-label,
.map .bridge-name.is-open .bridge-label { text-decoration: underline; }

.map .cartouche rect { fill: var(--paper); stroke: var(--paper-ink); stroke-width: 1; }
.map .cartouche .inner { fill: none; stroke: var(--paper-ink); stroke-width: 0.5; }
.map .cartouche .c-title { font-family: var(--serif-display); font-size: 27px; fill: var(--paper-ink); letter-spacing: 0.12em; }

.map .compass path, .map .compass circle { stroke: var(--paper-ink); }
.map .compass text { font-family: var(--serif-text); font-size: 18px; fill: var(--paper-ink); }

/* Step states. The SVG gets data-step="0..4":
   1 the bias island, 2 the persona island, 3 the strait and the LatentQA
   plank, 4 the BSD bridge. */
.map .layer { transition: opacity 0.6s ease; }

.map[data-step="1"] .region-persona,
.map[data-step="2"] .region-bias { opacity: 0.38; }
.map[data-step="1"] .region-bias .coast,
.map[data-step="2"] .region-persona .coast { fill: var(--paper-wash); }

.map .strait-layer,
.map .latentqa-layer,
.map .bsd-layer { opacity: 0; pointer-events: none; }
.map:is([data-step="3"], [data-step="4"]) .strait-layer { opacity: 1; }
.map:is([data-step="3"], [data-step="4"]) .latentqa-layer { opacity: 1; pointer-events: auto; }
.map[data-step="4"] .bsd-layer { opacity: 1; pointer-events: auto; }

/* Bridges are drawn with a stroke-dash sweep. */
.map .draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.4s ease; }
.map:is([data-step="3"], [data-step="4"]) .latentqa-layer .draw,
.map[data-step="4"] .bsd-layer .draw { stroke-dashoffset: 0; }

/* ─── Place card (the "museum label" for a paper) ─── */

.place-card {
  position: absolute;
  z-index: 5;
  width: min(20rem, calc(100% - 2rem));
  background: var(--wall);
  color: var(--ink-light);
  border: 1px solid var(--gilt);
  padding: 1rem 1.1rem 1.05rem;
  font-size: 0.98rem;
  line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
  opacity: 0;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.place-card.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.place-card .pc-meta {
  font-variant-caps: all-small-caps;
  letter-spacing: 0.12em;
  color: var(--gilt);
  font-size: 0.9rem;
}
.place-card .pc-title { font-style: italic; margin: 0.25rem 0 0.5rem; font-size: 1.05rem; }
.place-card .pc-note { color: var(--ink-muted); }
.place-card .pc-link {
  display: inline-block;
  margin-top: 0.7rem;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  text-decoration: none;
  border-bottom: 1px solid var(--gilt);
}
.place-card .pc-close {
  position: absolute;
  top: 0.35rem; right: 0.55rem;
  background: none; border: 0;
  color: var(--ink-muted);
  font-size: 1.2rem;
  cursor: pointer;
  font-family: inherit;
}




/* ─── Chapter II: essay beside a painting plate ────── */

/* The heading sits in the essay column, so heading and text form one block
   centred beside the plate. */
#chapter-2 { padding-top: 3.5rem; }
#chapter-2 .ch2-head { max-width: none; margin: 0; padding: 0 0 0.5rem; }

.essay-with-plate {
  max-width: 78rem;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: minmax(0, 44rem) minmax(0, 26rem);
  gap: 4rem;
  justify-content: center;
  align-items: center;
}

.painting { margin: 0.4rem 0 0; }
.painting-frame {
  border: 1px solid var(--gilt);
  padding: 10px;
  position: relative;
}
.painting-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(184, 146, 74, 0.35);
  pointer-events: none;
  z-index: 1;
}
.painting-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: sepia(0.3) contrast(1.05);   /* warm the print toward the map's paper */
}

.museum-label {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  font-size: 0.98rem;
  line-height: 1.45;
}
.ml-artist { font-variant-caps: all-small-caps; letter-spacing: 0.14em; color: var(--gilt); }
.ml-title { font-size: 1.1rem; }
.ml-source { color: var(--ink-faint); font-size: 0.88rem; }
.ml-note { color: var(--ink-muted); margin-top: 0.6rem; }

/* ─── Chapter II: the cue demo ─────────────────────── */

.cue-demo {
  max-width: 60rem;
  margin: 3rem auto 0;
  padding: 2rem 2.2rem 2.2rem;
  background: var(--wall-2);
  border: 1px solid rgba(184, 146, 74, 0.45);
  border-top: 2px solid var(--gilt);
}

.cue-cards {
  display: grid;
  grid-template-columns: 2fr 3fr;
  gap: 1.4rem;
  margin: 1.2rem 0 1.6rem;
}
/* The written cue is one line: its card keeps its own height. */
.cue-cards .cue-card:first-child { align-self: start; }
.cue-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.2rem 1rem;
  background: var(--wall);
  border: 1px solid var(--rule);
}
.cue-card-label { font-variant-caps: all-small-caps; letter-spacing: 0.14em; color: var(--gilt); font-size: 0.98rem; }
.cue-card-text { font-family: var(--serif-text); font-style: normal; font-size: 1.06rem; line-height: 1.35; }
.cue-card-source { color: var(--ink-faint); font-size: 0.9rem; }
/* A short multi-turn conversation inside a card. */
.cue-convo { display: flex; flex-direction: column; gap: 0.45rem; font-size: 1.12rem; }
.cue-convo .cc-role {
  display: block;
  font-family: var(--serif-text);
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-size: 0.82rem;
  color: var(--ink-faint);
}
.cue-convo .cc-elided { font-family: var(--serif-text); font-size: 0.85rem; color: var(--ink-faint); padding-left: 1rem; }

.cue-chart { display: grid; gap: 1.1rem; }
.cue-legend { display: flex; gap: 2rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.cue-key { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1rem; color: var(--ink-light); }
.cue-key::before { content: ""; width: 1.1rem; height: 0.7rem; display: inline-block; }
.cue-key-cue::before { background: var(--accent); }
.cue-key-belief::before { background: var(--gilt); }

.cue-group {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1rem;
  align-items: center;
}
.cue-group-label { font-family: var(--serif-text); font-size: 1.15rem; }
.cue-group-bars { display: grid; gap: 0.35rem; }
.cue-row {
  display: grid;
  grid-template-columns: 1fr 3rem;
  gap: 0.9rem;
  align-items: center;
}
.cue-track {
  position: relative;
  height: 1.15rem;
  background: rgba(233, 224, 205, 0.06);
}
.cue-bar {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0;
}
.cue-row-cue .cue-bar { background: var(--accent); }
.cue-row-belief .cue-bar { background: var(--gilt); }
.cue-chance {
  position: absolute;
  top: -0.25rem; bottom: -0.25rem;
  border-left: 1px dashed var(--ink-muted);
}
.cue-value { font-family: var(--serif-text); font-size: 1.05rem; text-align: right; }
.cue-axis .cue-track { background: none; height: 1.1rem; }
.cue-chance-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 0.85rem;
  color: var(--ink-muted);
  font-style: normal;
  white-space: nowrap;
}

.cue-caption { margin-top: 1.2rem; color: var(--ink-muted); font-size: 1rem; line-height: 1.5; }

/* Chapter II panel: three text styles only.
   1 label (gold capitals) · 2 text (reading size) · 3 note (small, muted). */
#cue-demo .kicker,
#cue-demo .cue-card-label,
#cue-demo .cc-role {
  font-family: var(--serif-text);
  font-variant-caps: normal;
  text-transform: uppercase;
  font-style: normal;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gilt);
}
#cue-demo .cue-card-text,
#cue-demo .cue-convo,
#cue-demo .cue-group-label,
#cue-demo .cue-key,
#cue-demo .cue-value,
#cue-demo .cue-caption {
  font-family: var(--serif-text);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-light);
}
#cue-demo .cue-group-label { text-transform: none; letter-spacing: 0; font-variant-caps: normal; }
#cue-demo .cc-elided,
#cue-demo .cue-card-source,
#cue-demo .cue-chance-label {
  font-family: var(--serif-text);
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink-muted);
}

/* ─── Static plates (introduction) ─────────────────── */
.static-plate { max-width: 76rem; margin: 2.5rem auto 0; padding: 0 2rem; }
.plate-caption { margin-top: 0.8rem; color: var(--ink-muted); font-size: 0.95rem; line-height: 1.5; }
.static-plate + .chapter-head.chapter-body { padding-top: 2rem; }
.diagram .d-silhouette { fill: var(--paper-ink); }
.diagram .d-silhouette .d-silhouette-cut { fill: #efe6d2; }
.diagram .d-model-small { font-size: 22px; }
.diagram .d-answer-place { fill: var(--paper-ink); font-size: 24px; }
.diagram .d-answer-stay { fill: rgba(58, 46, 34, 0.75); font-size: 19px; }
.diagram .fo-prompt.fo-plain { font-style: normal; }

/* ─── Chapter III: the method diagram ──────────────── */
/* Method pane, data-step: 0–1 one model and its two copies · 2 asking ·
   3 the guesser and the channel · 4 training and the user vector. */

.diagram {
  display: block;
  width: 100%;
  height: auto;
  background: var(--paper);
  font-family: var(--serif-text);
}
.diagram .layer { opacity: 0; transition: opacity 0.6s ease; }
.diagram:is([data-step="0"], [data-step="1"]) .m-spawn,
.diagram:is([data-step="2"], [data-step="3"], [data-step="4"]) :is(.m-conv, .m-reader),
.diagram:is([data-step="3"], [data-step="4"]) :is(.m-guesser, .m-channel),
.diagram[data-step="4"] .m-teach { opacity: 1; }

/* Step i: the two copies slide out of the one model. */
.diagram .ghost {
  transition: transform 1.2s cubic-bezier(0.65, 0, 0.35, 1);
}
/* Before step i: stacked just behind the original, offset like paper. */
.diagram .ghost-top { transform: translate(10px, 190px); }
.diagram .ghost-bottom { transform: translate(-10px, -190px); }
.diagram .d-title { fill: var(--accent); font-size: 20px; letter-spacing: 0.18em; }
.diagram .ghost-arrows { opacity: 0; transition: opacity 0.6s ease 0.6s; }
.diagram[data-step="1"] .ghost { transform: none; }
.diagram[data-step="1"] .ghost-arrows { opacity: 1; }

.diagram .d-card { fill: #efe6d2; stroke: var(--paper-ink); stroke-width: 1.3; }
.diagram .d-card-inner { fill: none; stroke: var(--paper-ink); stroke-width: 0.5; }
.diagram .d-heading { fill: var(--paper-ink); font-size: 15px; letter-spacing: 0.18em; }
.diagram .d-group { fill: var(--accent); font-size: 14px; letter-spacing: 0.18em; }
.diagram .d-quote { fill: var(--paper-ink); font-family: var(--serif-text); font-style: normal; font-size: 20px; }
.diagram .d-question { fill: var(--paper-ink); font-size: 20px; }
.diagram .d-option { fill: var(--paper-ink); font-size: 17px; font-style: normal; }
.diagram .d-note { fill: rgba(58, 46, 34, 0.75); font-size: 15px; font-style: normal; }

.diagram .d-model { fill: var(--paper-wash); stroke: var(--paper-ink); stroke-width: 1.6; }
.diagram .d-model-inner { fill: none; stroke: var(--paper-ink); stroke-width: 0.6; }
.diagram .d-model-name { fill: var(--paper-ink); font-family: var(--serif-display); font-size: 27px; font-weight: 500; letter-spacing: 0.04em; }
.diagram .d-model-role { fill: var(--paper-ink); font-size: 15px; font-style: normal; }
.diagram .d-frozen { fill: rgba(58, 46, 34, 0.6); font-size: 13px; letter-spacing: 0.18em; }

.diagram .d-arrow { stroke: var(--paper-ink); stroke-width: 1.4; }
.diagram .d-arrowhead { fill: var(--paper-ink); }

.diagram .d-bar-label { fill: var(--paper-ink); font-size: 17px; }
.diagram .d-bar-track { fill: rgba(58, 46, 34, 0.08); }
.diagram .d-bar {
  fill: var(--paper-ink);
  transform-box: fill-box;
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

.diagram .d-cell { fill: rgba(58, 46, 34, 0.55); }
.diagram .d-map { fill: rgba(58, 46, 34, 0.12); stroke: var(--paper-ink); stroke-width: 1.2; }
.diagram .d-map-label { fill: var(--paper-ink); font-size: 17px; font-style: normal; }
.diagram .d-dim { fill: var(--paper-ink); font-size: 15px; }
.diagram .d-math { fill: var(--paper-ink); font-family: var(--serif-text); font-style: italic; font-size: 21px; }
.diagram .d-script { font-size: 68%; }
.diagram .d-bb { font-family: "STIX Two Math", "STIXGeneral", "Cambria Math", "Noto Sans Math", serif; font-style: normal; }
.note sub, .note sup { font-size: 0.7em; line-height: 0; }
.diagram .d-vcell { fill: var(--paper-ink); transition: fill 0.6s ease, transform 0.6s ease; }
.diagram .d-vector-label { fill: var(--accent); font-family: var(--serif-text); font-style: normal; font-size: 17px; opacity: 0; transition: opacity 0.6s ease; }
.diagram[data-step="4"] .m-channel .d-vcell { fill: var(--accent); }
.diagram[data-step="4"] .d-vector-label,
.diagram .d-vector-label.is-on { opacity: 1; }
/* A rewritten belief: two cells shift. */
.diagram .d-vector.is-edited .d-vcell:nth-child(3),
.diagram .d-vector.is-edited .d-vcell:nth-child(6) { fill: var(--paper-ink); transform: translateY(-6px); }
.diagram .d-edit { fill: var(--accent); font-size: 17px; font-style: italic; }

/* Teaching signal: belief and answer joined directly. */
.diagram .d-match { stroke: var(--accent); stroke-width: 1.6; stroke-dasharray: 6 5; }
.diagram .d-match-head { fill: var(--accent); }
.diagram .d-match-label { fill: var(--accent); font-family: var(--serif-text); font-style: normal; font-size: 17px; }

/* Reading */
.diagram .d-belief { fill: var(--paper-ink); font-family: var(--serif-text); font-style: normal; font-size: 20px; }
.diagram .d-rule { stroke: rgba(58, 46, 34, 0.18); stroke-width: 1; }

/* Writing */
.diagram .fo-prompt { font-family: var(--serif-text); font-style: normal; font-size: 18px; line-height: 1.4; color: var(--paper-ink); }
.diagram .fo-answer { font-family: var(--serif-text); font-size: 20px; line-height: 1.5; color: var(--paper-ink); }
.diagram .fo-answer mark { background: none; color: var(--paper-ink); font-weight: 600; }
.diagram .fo-answer.is-steered mark { color: var(--accent); }
.diagram .d-tag { fill: var(--paper-ink); font-size: 17px; letter-spacing: 0.18em; }
.diagram .d-tag.is-steered { fill: var(--accent); }

/* ─── Chapter III: reading and writing pane ────────── */
/* data-scene: read · readEval · write · writeEval (set from the step). */
#rw-diagram[data-scene="read"] .r-read,
#rw-diagram[data-scene="readEval"] .r-eval,
#rw-diagram[data-scene="write"] .w-write,
#rw-diagram[data-scene="writeEval"] .w-eval { opacity: 1; }
#ch3-rw-scrolly .trigger { height: 70vh; }
#ch3-rw-scrolly .trigger:last-child { height: 150vh; }

.diagram .d-card-steered { stroke: var(--accent); }
.diagram .d-card.d-card-steered { stroke-width: 1.8; }
.diagram .d-heading-steered { fill: var(--accent); }
.diagram .fo-prompt .fo-role-inline { font-style: normal; font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; margin-right: 0.6em; color: rgba(58, 46, 34, 0.75); }
.diagram .d-case { fill: rgba(58, 46, 34, 0.6); font-size: 15px; font-style: normal; letter-spacing: 0.04em; }
.diagram .d-eval-title { fill: var(--accent); font-size: 22px; letter-spacing: 0.18em; }
.diagram .d-eval-sub { fill: var(--paper-ink); font-family: var(--serif-text); font-style: normal; font-size: 17px; }

.diagram .d-cell-v { fill: rgba(58, 46, 34, 0.55); }
.diagram .d-vuser .d-cell-v,
.diagram .w-write .d-vcell { fill: var(--accent); }
.diagram .d-cover { fill: var(--paper); }
.diagram .d-arrow-path { fill: none; stroke: var(--paper-ink); stroke-width: 1.4; }

.diagram .fo-conv { font-family: var(--serif-text); font-size: 18px; line-height: 1.42; color: var(--paper-ink); }
.diagram .fo-conv p { margin: 0 0 0.55em; }
.diagram .fo-conv .fo-role { display: block; font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(58, 46, 34, 0.7); }
.diagram .fo-conv mark { background: rgba(168, 56, 44, 0.16); color: var(--accent); padding: 0 2px; }

.diagram .d-row-mark { fill: transparent; transition: fill 0.4s ease; }
.diagram .d-belief-row.is-focus .d-row-mark { fill: rgba(168, 56, 44, 0.12); }
.diagram .d-belief-row.is-focus .d-belief,
.diagram .d-belief-row.is-focus .d-bar-label { fill: var(--accent); }

.diagram .d-edit-line { fill: var(--paper-ink); font-family: var(--serif-text); font-style: normal; font-size: 20px; }
.diagram .d-edit-from { fill: rgba(58, 46, 34, 0.7); text-decoration: line-through; }
.diagram .d-edit-to { fill: var(--accent); }
.diagram .d-arrow-red { stroke: var(--accent); }
/* The edited vector: two cells pushed aside. */
.diagram .d-vedited .d-cell-v:nth-child(3),
.diagram .d-vedited .d-cell-v:nth-child(6) { fill: var(--paper-ink); transform: translateX(-5px); }

.diagram .d-axis { stroke: var(--paper-ink); stroke-width: 1; }
.diagram .d-col-v { fill: var(--accent); }
.diagram .d-col-r { fill: rgba(58, 46, 34, 0.3); }
.diagram .d-col-value { fill: var(--paper-ink); font-family: var(--serif-text); font-size: 19px; }
.diagram .d-legend { fill: var(--paper-ink); font-size: 15px; }

/* The reading and writing pane uses three text styles only:
   labels (spaced capitals), text (Caslon upright) and math (italic). */
#rw-diagram :is(.d-heading, .d-group, .d-case, .d-frozen) {
  font-family: var(--serif-text); font-style: normal; font-size: 15px; letter-spacing: 0.18em; text-transform: uppercase;
}
#rw-diagram .d-case, #rw-diagram .d-frozen { fill: rgba(58, 46, 34, 0.7); }
#rw-diagram :is(.d-bar-label, .d-belief, .d-note, .d-map-label, .d-legend, .d-col-value, .d-eval-sub, .d-edit-line, .d-model-name, .d-model-role) {
  font-family: var(--serif-text); font-style: normal; font-weight: 400; font-size: 18px; letter-spacing: 0; fill: var(--paper-ink);
}
#rw-diagram :is(.fo-conv, .fo-answer) { font-size: 18px; }
#rw-diagram .fo-conv .fo-role { font-size: 15px; }
#rw-diagram .d-math { font-size: 20px; }
#rw-diagram .d-eval-title { font-family: var(--serif-display); font-weight: 700; font-size: 36px; letter-spacing: 0; fill: var(--accent); }
#rw-diagram .d-belief-row.is-focus :is(.d-belief, .d-bar-label) { fill: var(--accent); }

/* Ten steps: the step numerals run in a row above the note. */
:is(#ch3-scrolly, #ch3-rw-scrolly) .notes { grid-template-columns: 1fr; gap: 0.5rem; }
:is(#ch3-scrolly, #ch3-rw-scrolly) .note-index { flex-direction: row; gap: 1.1rem; }

/* "Beyond the user": a short essay coda, no drop cap. */
.chapter-head.beyond { padding-top: 2.5rem; }
.chapter-head.beyond 
/* ─── Chapter V: refusal ───────────────────────────── */

.refusal-demo { max-width: 72rem; }
.refusal-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.4rem;
  margin-top: 1.2rem;
}
.refusal-chart { margin: 0; }
.refusal-chart svg { display: block; width: 100%; height: auto; font-family: var(--serif-text); }
.refusal-chart figcaption { margin-top: 0.8rem; color: var(--ink-muted); font-size: 0.9rem; line-height: 1.5; }

.refusal-chart .c-grid { stroke: rgba(233, 224, 205, 0.08); }
.refusal-chart .c-axis { stroke: rgba(233, 224, 205, 0.45); }
/* Chart text: the panel text style, and muted for ticks and secondary lines. */
.refusal-chart :is(.c-tick, .c-label) { fill: var(--ink-muted); font-size: 17px; font-style: normal; }
.refusal-chart .c-threshold { stroke: var(--ink-muted); stroke-dasharray: 5 5; }
.refusal-chart .c-row-label { fill: var(--ink-light); font-size: 17px; }

/* The redacted example beside the chart. */
.refusal-example { margin: 0; display: flex; flex-direction: column; gap: 0.9rem; }
.refusal-example > div {
  background: var(--wall);
  border: 1px solid var(--rule);
  padding: 0.9rem 1.1rem 1rem;
  font-family: var(--serif-text);
  font-size: 1rem;
  line-height: 1.45;
}
.refusal-example .rx-steered { border-color: var(--accent); }
.refusal-example .rx-role {
  display: block;
  font-family: var(--serif-text);
  font-style: normal;
  font-variant-caps: all-small-caps;
  letter-spacing: 0.14em;
  font-size: 0.95rem;
  color: var(--gilt);
  margin-bottom: 0.25rem;
}
.refusal-example .rx-steered .rx-role { color: #d0574a; }
.refusal-example .rx-list { display: block; margin-top: 0.25rem; }
.redacted { color: var(--ink-light); background: var(--ink-light); letter-spacing: -0.12em; user-select: none; word-break: break-all; }
.refusal-charts > * { min-width: 0; }
.refusal-example figcaption { color: var(--ink-muted); font-size: 0.9rem; line-height: 1.5; }

/* A body passage under a chapter head: same column, less space above. */
.chapter-head.chapter-body { padding-top: 0; }
.refusal-chart .c-bar-base { fill: rgba(233, 224, 205, 0.55); }
.refusal-chart .c-bar-intent { fill: var(--accent); }
.refusal-chart .c-bar-other { fill: var(--gilt); }
.refusal-chart .c-value { fill: var(--ink-light); font-family: var(--serif-text); font-size: 17px; paint-order: stroke; stroke: var(--wall-2); stroke-width: 7px; stroke-linejoin: round; }

/* ─── Geometry: three models, one plate ────────────── */
#geometry-plate .diagram .d-geo-text { fill: var(--paper-ink); font-family: var(--serif-text); font-size: 26px; }
#geometry-plate .diagram .d-geo-note { fill: rgba(58, 46, 34, 0.7); font-family: var(--serif-text); font-size: 23px; }
#chapter-geometry .geo-head { max-width: 78rem; text-align: center; }

/* ─── End matter: conclusion, follow-up, use of AI ─── */

.end-matter {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 3rem 1rem 1rem;
  border-top: 1px solid var(--rule);
}
#use-of-ai { margin-top: 0; }
.end-matter h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.end-matter p { font-size: 1.08rem; line-height: 1.6; margin-bottom: 1rem; }
.tbc { color: var(--ink-faint); font-style: normal; }

/* ─── Citations and references ────────────────────── */

.cite { font-size: 0.68em; line-height: 0; margin-left: 0.08em; color: var(--gilt); }
.cite a { color: var(--gilt); text-decoration: none; }
.cite a:hover { color: var(--ink-light); text-decoration: underline; }

.references {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 2rem 1rem 2rem;
  border-top: 1px solid var(--rule);
}
.references h2 {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
}
.references ol { padding-left: 1.6rem; }
.references li { margin-bottom: 0.7rem; font-size: 1rem; line-height: 1.45; color: var(--ink-muted); }
.references li::marker { color: var(--gilt); }
.references li a { color: var(--ink-light); }
.references li:target { color: var(--ink-light); }

/* ─── Footer ───────────────────────────────────────── */

footer {
  border-top: 1px solid var(--rule);
  padding: 2rem 1rem 3rem;
  text-align: center;
  color: var(--ink-faint);
  font-size: 0.92rem;
}

/* ─── Labels: the third and last text style ────────── */
/* Every small heading, kicker, role and step name: Caslon capitals, spaced. */
.kicker, .note-num, .step-num, .cue-card-label, .ml-artist, .title-links span, .title-links a, .author-link, .outline a,
.refusal-example .rx-role, .cue-convo .cc-role, .cue-controls-label, .cue-group-label {
  font-family: var(--serif-text);
  font-variant-caps: normal;
  text-transform: uppercase;
  font-style: normal;
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--gilt);
}
.cue-group-label { color: var(--ink-light); }
.refusal-example .rx-steered .rx-role { color: #d0574a; }

/* ─── Narrow screens: same stage, the map fills the width ── */

@media (max-width: 860px) {
  body { font-size: 1.1rem; }
  .static-plate { padding: 0 1rem; }
  /* Essay beside a plate, and the two example cards: stacked. */
  .essay-with-plate { grid-template-columns: 1fr; gap: 2.5rem; padding: 0 1rem; }
  .essay-with-plate .painting { max-width: 26rem; }
  .cue-demo { padding: 1.4rem 1.1rem 1.6rem; margin-top: 3rem; }
  .cue-cards { grid-template-columns: 1fr; gap: 1rem; }
  .cue-group { grid-template-columns: 6.5rem 1fr; gap: 0.6rem; }
  .cue-legend { gap: 0.6rem 1.4rem; }
  .refusal-charts { grid-template-columns: 1fr; }
  .title-page { padding: 3rem 1rem 2rem; gap: 2rem; }
  .title-main { grid-template-columns: 1fr; gap: 2.2rem; }
  .title-plate { width: min(100%, 22rem); }
  .title-plate img { height: auto; }
  .sub-break { display: none; }
  .stage { padding: 1rem 1rem 1.5rem; justify-content: flex-start; gap: 1rem; }
  .plate { width: 100%; padding: 6px; }
  .notes { width: 100%; grid-template-columns: 1fr; gap: 0.6rem; }
  .note-index { flex-direction: row; gap: 0.6rem; }
  .note { grid-template-columns: 1fr; }
  .note p { font-size: 1.02rem; }
  .note p + p { margin-top: 0.6rem; }
  .place-card { position: fixed; left: 1rem !important; right: 1rem; bottom: 1rem; top: auto !important; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .cue-bar, .diagram .d-bar, .diagram .layer, .diagram .ghost { transition: none; }
  html { scroll-behavior: auto; }
  .map .layer, .map .coast, .note, .place-card { transition: none; }
  .map .draw { transition: none; }
}

.credits { padding-bottom: 5rem; }
.credits p { font-size: 0.95rem; color: var(--ink-muted); }