/* The homepage system introduction ("From hypothesis to system"), between the hypothesis and results.
   6 October 2026: the graphic is the Test Time Cognition box, with the agent above it (drawn by
   scripts/build_ttc_figure.py), and the copy uses the shared section type in section-type.20261006.css:
   the title is the size of the other section titles, and the lead is set like the hero's paragraphs. */
.ttc-bridge {
  background:var(--cream);
  padding:64px 0 0;
  margin:0 0 76px;
}

.ttc-bridge-grid {
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(48px,5vw,80px);
  padding:30px 0 50px;
  align-items:center;
}

.ttc-copy h2 {
  margin:0 0 26px;
}

.ttc-copy em {
  font-family:Georgia,"Times New Roman",serif;
  font-weight:400;
}

.ttc-lead {
  margin:0 0 18px;
}

.ttc-body {
  font:400 17px/1.65 var(--sans);
  color:var(--muted-text);
  margin:0 0 20px;
  max-width:570px;
}

/* The graphic: the agent above the Test Time Cognition box, where cognition (one ink dot) is fed by
   the model's learned weights (sage) and episodic memory (coral) and sets a search going (accent
   green). Every colour is a site theme token, so both themes work; figure-colors.20260928.css gives
   the dark theme its lighter coral, green and sage. There are two drawings: wide, and tall for phones. */
.ttc-figure { margin:0; width:100%; }
.ttc-art { display:block; width:100%; height:auto; overflow:visible; }
.ttc-art--tall { display:none; }

.ttc-art .tc-agent { fill:var(--paper); stroke:var(--ink); stroke-opacity:.5; stroke-width:1.2; }
.ttc-art .tc-frame { fill:var(--paper); stroke:var(--accent); stroke-width:1.4; }
.ttc-art .tc-card { fill:var(--cream); stroke:var(--rule); stroke-width:1; }
.ttc-art .tc-dot { fill:var(--ink); }

.ttc-art .tc-title { font:400 21px/1 var(--sans); letter-spacing:-.4px; fill:var(--ink); }
.ttc-art .tc-caption { font:9.5px/1 var(--mono); letter-spacing:1.2px; fill:var(--muted-text); }
.ttc-art .tc-label { font:10.5px/1 var(--mono); letter-spacing:2.2px; fill:var(--accent-text); }
.ttc-art--tall .tc-label { font-size:9.5px; letter-spacing:1.1px; }
.ttc-art .tc-flow { font:9.5px/1 var(--mono); letter-spacing:1.2px; fill:var(--muted-text); }
.ttc-art .tc-flow--answer { fill:var(--accent-text); }

/* The task down from the agent, and the answer back up to it. */
.ttc-art .tc-task { stroke:var(--ink); stroke-opacity:.6; stroke-width:1.3; }
.ttc-art .tc-answer { stroke:var(--accent); stroke-width:1.8; }

/* The model: a small network, with the pathway its weights have learned in sage. */
.ttc-art .tc-edge { stroke:var(--ink); stroke-opacity:.12; stroke-width:.7; }
.ttc-art .tc-neuron { fill:var(--cream); stroke:var(--ink); stroke-opacity:.4; stroke-width:1; }
.ttc-art .tc-neuron--prior { fill:rgb(var(--field-glow-rgb)); stroke:rgb(var(--field-glow-rgb)); stroke-opacity:1; }
.ttc-art .tc-prior { stroke:rgb(var(--field-glow-rgb)); stroke-width:2.4; }

/* Episodic memory: three past episodes in coral, the most recent the strongest. */
.ttc-art .tc-mem { stroke:var(--coral); }
.ttc-art .tc-mem--1 { stroke-width:2.2; }
.ttc-art .tc-mem--2 { stroke-width:1.6; stroke-opacity:.55; }
.ttc-art .tc-mem--3 { stroke-width:1.6; stroke-opacity:.35; }
.ttc-art .tc-mem-node { fill:var(--coral); }
.ttc-art .tc-mem-node--2 { fill-opacity:.55; }
.ttc-art .tc-mem-node--3 { fill-opacity:.35; }

/* What feeds cognition, and the search it sets going. */
.ttc-art .tc-guide { stroke-width:1.8; stroke-dasharray:.1 4.6; }
.ttc-art .tc-guide--weights { stroke:rgb(var(--field-glow-rgb)); stroke-width:2; }
.ttc-art .tc-guide--memory { stroke:var(--coral); }
.ttc-art .tc-go { stroke:var(--accent); stroke-width:1.6; }
.ttc-art .tc-cognition { fill:var(--ink); }

/* Search: a small tree, its dead ends crossed out and the chosen path checked. */
.ttc-art .tc-branch { stroke:var(--ink); stroke-opacity:.38; stroke-width:1.3; }
.ttc-art .tc-x { stroke:var(--muted); stroke-opacity:.75; stroke-width:1.2; }
.ttc-art .tc-sel { stroke:var(--accent); stroke-width:2.6; }
.ttc-art .tc-goal circle { fill:var(--paper); stroke:var(--accent); stroke-width:1.6; }
.ttc-art .tc-goal path { stroke:var(--accent); stroke-width:1.8; }
.ttc-art .tc-root { fill:var(--ink); }

/* The labels are drawn in the graphic's own units, so where it is drawn smaller its small capitals are
   set a size up: beside the copy on narrower desktops, and under it on small tablets. Under 1180
   pixels the graphic goes under the copy, as the hero's video does, so it is drawn large enough to
   read. Phones get the tall drawing. */
@media (min-width:1180px) and (max-width:1360px) {
  .ttc-art--wide :is(.tc-caption, .tc-flow) { font-size:10.5px; letter-spacing:1px; }
}

@media (max-width:1179px) {
  .ttc-bridge-grid { grid-template-columns:minmax(0,1fr); gap:40px; }
  .ttc-figure { max-width:680px; }
}

@media (max-width:760px) {
  .ttc-bridge { padding-top:40px; margin-bottom:55px; }
  .ttc-bridge-grid { gap:35px; padding:24px 0 32px; }
}

@media (max-width:700px) {
  .ttc-art--wide :is(.tc-caption, .tc-flow) { font-size:10.5px; letter-spacing:1px; }
}

@media (max-width:560px) {
  .ttc-figure { max-width:440px; }
  .ttc-art--wide { display:none; }
  .ttc-art--tall { display:block; }
}

@media (max-width:360px) {
  .ttc-art :is(.tc-caption, .tc-flow) { font-size:10.5px; letter-spacing:.9px; }
  .ttc-art--tall .tc-label { font-size:10px; letter-spacing:.8px; }
}