/* Context and Knowledge Graphs: one treatment per step of the story.
   Paper panels inside a dark section set their own ink color. */

.cx .section-head h2 { max-width: none; }
.cx-hook {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(1.25rem, 1.7vw, 1.55rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.3;
  text-wrap: balance;
}
.cx-k {
  margin: 0;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.dark .cx-k { color: var(--on-dark-muted); }
.cx-pane .cx-k,
.cx-fact .cx-k,
.cx-diagram .cx-k,
.cx-gold .cx-k,
.cx-layers .cx-k { color: var(--text-muted); }

/* 1. Two answers, then the three definitions */
/* Heading rows with a sentence on the right: the label runs across the top, then the heading and sentence start on the
   same line. The columns match the two cards in How we see the problem, and the sentence lines up with the words inside
   the right card, so it keeps one left edge down the page. */
@media (min-width: 961px) {
  .cx .section-head--top { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .cx .section-head--top > div { display: contents; }
  .cx .section-head--top .kicker { grid-column: 1 / -1; }
  .cx .section-head--top .cx-hook { padding-left: calc(1.3rem + 1px); }
}
.cx-compare-q { margin: 0 0 .85rem; font-size: .95rem; color: var(--text-muted); }
.cx-answers { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cx-answer {
  display: grid; align-content: start; gap: .55rem;
  padding: 1.25rem 1.3rem 1.35rem;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); border-top-width: 3px;
}
.cx-answer--wrong { border-top-color: var(--tangerine); }
.cx-answer--held { border-top-color: var(--forest); }
.cx-answer--wrong .cx-k { color: var(--tangerine-deep); }
.cx-answer--held .cx-k { color: var(--forest); }
.cx-say { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 500; letter-spacing: -0.03em; line-height: 1.25; }
.cx-cite { font-size: .9rem; color: var(--text-muted); }
.cx-trio {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem;
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 1px solid var(--line);
}
.cx-trio h3, .cx-quad h3, .cx-caps h3, .cx-ops h3, .cx-points h3, .cx-steps h3, .cx-layers h3 {
  font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.25;
}
.cx-trio p { margin-top: .4rem; font-size: .95rem; line-height: 1.5; color: var(--text-muted); }

/* 2. Sources converge, then a fact you can read */
.cx-flow { display: grid; justify-items: center; gap: .7rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.cx-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.cx-chips li {
  padding: .4rem .8rem; border: 1px solid var(--line-dark); border-radius: 999px; font-size: .92rem;
}
.cx-flow-to { width: 1.5px; height: 1.35rem; background: rgba(247, 243, 234, .4); }
.cx-layer {
  display: grid; justify-items: center; gap: .12rem;
  margin: 0; padding: .75rem 1.5rem .85rem;
  background: var(--mint); color: var(--ink); border-radius: var(--radius); text-align: center;
}
.cx-layer span { font-size: .75rem; letter-spacing: .04em; }
.cx-layer b { font-size: 1.2rem; font-weight: 500; letter-spacing: -0.02em; }
.cx-quad { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cx-quad li {
  display: grid; align-content: start; gap: .45rem;
  padding: 1.15rem 1.15rem 1.25rem;
  background: var(--surface-dark); border: 1px solid var(--line-dark); border-radius: var(--radius);
}
.cx-quad p, .cx-caps p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--on-dark-muted); }
.cx-fact {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .8fr); gap: 1.5rem 2rem;
  margin-top: 12px; padding: 1.35rem 1.4rem 1.4rem;
  background: var(--paper); color: var(--ink); border-radius: var(--radius);
}
.cx-fact h3 { margin-top: .35rem; font-size: 1.35rem; }
.cx-record { display: grid; gap: .7rem; margin: 1rem 0 0; }
.cx-record div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .5rem 1rem; }
.cx-record dt { font-size: .8rem; letter-spacing: .04em; color: var(--text-muted); padding-top: .15rem; }
.cx-record dd { margin: 0; font-size: .95rem; line-height: 1.4; }
.cx-acl { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.cx-acl > p:last-of-type { margin-top: .45rem; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; }
.cx-acl ul { display: grid; gap: .4rem; margin-top: .85rem; }
.cx-acl li { position: relative; padding-left: .9rem; font-size: .92rem; line-height: 1.4; color: var(--text-muted); }
.cx-acl li::before { content: ""; position: absolute; left: 0; top: .5rem; width: 5px; height: 5px; border-radius: 50%; background: var(--forest); }

/* 3. The graph beside the four practices */
.cx-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; }
.cx-points { display: grid; gap: 1.35rem; margin: 0; padding: 0; list-style: none; }
.cx-points li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .85rem; }
.cx-points li > span {
  grid-row: 1 / span 2; padding-top: .15rem;
  font-size: .85rem; letter-spacing: .06em; color: var(--forest); font-variant-numeric: tabular-nums;
}
.cx-points p { grid-column: 2; margin-top: .3rem; font-size: .95rem; line-height: 1.5; color: var(--text-muted); }
.cx-diagram { padding: 1.5rem 1.35rem 1.25rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); }
.cx-map { display: flex; flex-direction: column; align-items: center; }
.cx-node {
  width: min(100%, 220px); display: grid; gap: .12rem; justify-items: start;
  padding: .75rem .9rem .8rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.cx-node p { font-size: .75rem; letter-spacing: .04em; color: var(--text-muted); }
.cx-node b { font-weight: 500; letter-spacing: -0.02em; }
.cx-pill {
  margin-top: .3rem; padding: .1rem .45rem; border-radius: 999px;
  background: var(--tangerine-light); color: var(--tangerine-deep); font-size: .75rem; font-weight: 500;
}
.cx-stem { display: grid; justify-items: center; gap: .15rem; min-height: 1.6rem; }
.cx-stem::before, .cx-stem::after { content: ""; width: 0; height: 8px; border-left: 1px solid var(--rail); }
.cx-stem span { font-size: .75rem; color: var(--text-muted); }
.cx-stem--plain { min-height: 0; gap: 0; }
.cx-stem--plain::after { display: none; }
.cx-stem--plain::before { height: 14px; }
.cx-branch {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%;
  padding-top: 16px;
}
/* The curve and the labelled lines all hang off each arm's own 50% so they round to the same pixel on any screen. */
.cx-arm { position: relative; display: flex; flex-direction: column; align-items: center; }
.cx-arm::before {
  content: ""; position: absolute; top: -16px; height: 16px; width: calc(50% + .5rem + .5px);
  border-top: 1px solid var(--rail);
}
.cx-arm:first-child::before { left: calc(50% - .5px); border-left: 1px solid var(--rail); border-top-left-radius: 12px; }
.cx-arm:last-child::before { left: -.5rem; border-right: 1px solid var(--rail); border-top-right-radius: 12px; }
.cx-rel {
  position: relative; align-self: stretch; padding: calc(8px + .15rem) 0;
  text-align: center; font-size: .75rem; color: var(--text-muted);
}
.cx-rel::before, .cx-rel::after {
  content: ""; position: absolute; left: calc(50% - .5px); width: 0; height: 8px; border-left: 1px solid var(--rail);
}
.cx-rel::before { top: 0; }
.cx-rel::after { bottom: 0; }
.cx-q { margin: .3rem 0 0; font-size: 1.15rem; font-weight: 500; letter-spacing: -0.02em; line-height: 1.35; }
.cx-diagram .cx-k { margin-top: 1.35rem; }
.cx-merge {
  display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .55rem;
  margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line);
}
.cx-merge .cx-k { margin: 0; width: 100%; }
.cx-merge ul { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.cx-merge li { padding: .25rem .55rem; border-radius: 999px; background: var(--paper); font-size: .85rem; }
.cx-merge-to { color: var(--forest); }
.cx-merge b { font-weight: 500; }
.cx-prov { margin: .85rem 0 0; font-size: .85rem; color: var(--text-muted); }

/* 4. One step's window, then the four rules */
.cx-pane { background: var(--paper); color: var(--ink); border-radius: var(--radius); overflow: hidden; }
.cx-pane-bar {
  display: flex; justify-content: space-between; align-items: end; gap: 1rem;
  padding: 1.1rem 1.3rem; border-bottom: 1px solid var(--line);
}
.cx-pane-bar b { display: block; margin-top: .2rem; font-size: 1.25rem; font-weight: 500; letter-spacing: -0.02em; }
.cx-pane-tools { margin: 0; font-size: .85rem; color: var(--text-muted); }
.cx-pane-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.cx-pane-body > div { padding: 1rem 1.3rem 1.15rem; }
.cx-out { background: rgba(14, 37, 27, .03); border-left: 1px solid var(--line); }
.cx-in { margin: .35rem 0 0; padding: 0; list-style: none; }
.cx-in li {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .1rem .75rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.cx-in b { grid-column: 1; grid-row: 1; font-weight: 500; letter-spacing: -0.02em; }
.cx-in span { grid-column: 1; grid-row: 2; font-size: .8rem; color: var(--text-muted); }
.cx-in em {
  grid-column: 2; grid-row: 1 / span 2; justify-self: end; align-self: center;
  font-style: normal; font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--text-muted); white-space: nowrap;
}
.cx-out ul { display: grid; gap: .45rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.cx-out li { font-size: .95rem; color: var(--text-muted); }
.cx-budget { margin: 0; padding: .85rem 1.3rem; border-top: 1px solid var(--line); font-size: .9rem; color: var(--text-muted); }
.cx-budget b { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.cx-conflict { padding: 1rem 1.3rem 1.15rem; border-top: 1px solid var(--line); }
.cx-conflict > p:last-of-type { margin-top: .3rem; }
.cx-rules { display: flex; flex-wrap: wrap; gap: .4rem; margin: .75rem 0 0; padding: 0; list-style: none; }
.cx-rules li { padding: .3rem .7rem; border: 1px solid var(--line); border-radius: 999px; font-size: .85rem; color: var(--text-muted); }
.cx-rules .is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.cx-caps {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem 1.5rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; padding: 0; list-style: none;
}

/* 5. A question with a known answer, and the checks around it */
.cx-eval-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 12px; align-items: stretch; }
.cx-gold, .cx-layers {
  padding: 1.3rem 1.35rem 1.4rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
}
.cx-gold { border-top: 3px solid var(--forest); }
.cx-gold h3 { max-width: 28ch; margin-top: .45rem; font-size: clamp(1.3rem, 2vw, 1.6rem); line-height: 1.2; }
.cx-layers ol { display: grid; gap: 0; margin: .35rem 0 0; padding: 0; list-style: none; }
.cx-layers li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .15rem .85rem; padding: .85rem 0; border-top: 1px solid var(--line); }
.cx-layers li > span { padding-top: .15rem; font-size: .85rem; letter-spacing: .06em; color: var(--forest); font-variant-numeric: tabular-nums; }
.cx-layers p { margin-top: .25rem; font-size: .93rem; line-height: 1.45; color: var(--text-muted); }
.cx-ops {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 3rem;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  border-top: 1px solid var(--line); list-style: none;
}
.cx-ops p { margin-top: .4rem; max-width: 48ch; font-size: .95rem; line-height: 1.5; color: var(--text-muted); }
.cx-held {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .85rem; padding: .25rem .6rem; border-radius: 999px;
  background: var(--tangerine-light); color: var(--tangerine-deep); font-size: .8rem; font-weight: 500;
}
.cx-held::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tangerine); }

/* 6. Three steps, then an open slot for a real number.
   Evals above is also paper, so this one is white and the proof plate is ink. */
.v2 #main > .cx-engage { background: var(--white); }
.cx-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.cx-steps li {
  display: grid; align-content: start; gap: .45rem;
  padding: 1.25rem; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.cx-n { font-size: .85rem; letter-spacing: .06em; color: var(--forest); font-variant-numeric: tabular-nums; }
.cx-steps p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--text-muted); }
.cx-proof {
  display: grid; gap: .45rem; margin-top: 12px; padding: 1.4rem 1.45rem 1.35rem;
  border-radius: var(--radius); background: var(--ink); color: var(--paper);
  background-image: radial-gradient(rgba(247, 243, 234, .06) 1px, transparent 1px); background-size: 12px 12px;
}
.cx-proof-k { margin: 0; font-size: .8rem; letter-spacing: .06em; color: var(--mint); }
.cx-proof-slot { margin: .15rem 0 0; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; }
.cx-proof p:last-child { margin: 0; max-width: 42ch; font-size: .95rem; line-height: 1.45; color: var(--on-dark-muted); }

@media (max-width: 960px) {
  .cx-trio, .cx-quad, .cx-caps, .cx-steps { grid-template-columns: 1fr 1fr; }
  .cx-split, .cx-eval-grid, .cx-fact, .cx-ops, .cx-pane-body { grid-template-columns: 1fr; }
  .cx-acl { padding: 1rem 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .cx-out { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 700px) {
  .cx-answers, .cx-record div { grid-template-columns: 1fr; }
  .cx-record dt { padding-top: 0; }
  .cx-pane-bar { flex-direction: column; align-items: start; }
}
@media (max-width: 560px) {
  .cx-trio, .cx-quad, .cx-caps, .cx-steps, .cx-ops { grid-template-columns: 1fr; }
}