/* The homepage system introduction, between the hypothesis and results.
   v3 (5 October 2026): the graphic is a still; it no longer plays on hover. */
.ttc-bridge {
  background:var(--cream);
  padding:64px 0 0;
  margin:0 0 76px;
}

.ttc-bridge-grid {
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:90px;
  padding:30px 0 50px;
  align-items:center;
}

.ttc-copy h2 {
  margin:0 0 23px;
  font:400 clamp(42px,4.8vw,68px)/1.03 var(--sans);
  letter-spacing:-.052em;
}

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

.ttc-lead {
  font:400 clamp(21px,2vw,28px)/1.35 var(--sans);
  letter-spacing:-.025em;
  margin:0 0 20px;
}

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

/* The graphic, drawn by scripts/build_ttc_figure.py: the agent above, and the Test Time Cognition
   layer, where cognition (the dot at the root of the search) coordinates the model's learned weights
   (sage), memory of past episodes (coral) and a new search (accent green). Every colour is a site
   theme token, so the light (sage and coral) and dark (graphite and chalk) themes both work. */
.ttc-figure { margin:0; width:100%; }
.ttc-art { --art-bg:var(--paper); display:block; width:100%; height:auto; overflow:visible; }

.ttc-art .tc-frame { fill:var(--paper); stroke:var(--accent); stroke-width:1.2; }
.ttc-art .tc-rule { fill:none; stroke:var(--rule); stroke-width:1; }
.ttc-art .tc-card { fill:var(--cream); stroke:var(--rule); stroke-width:1; }
.ttc-art .tc-on-card { --art-bg:var(--cream); }
.ttc-art .tc-dot { fill:var(--ink); }  /* the layer's name, marked with cognition's dot */

.ttc-art .tc-mono { font:11px/1 var(--mono); letter-spacing:1.2px; fill:var(--ink); }
.ttc-art .tc-mono--small { font-size:9.5px; letter-spacing:1px; }
.ttc-art .tc-mono--muted { fill:var(--muted-text); }
.ttc-art .tc-mono--accent { fill:var(--accent-text); }
.ttc-art .tc-mono--coral { fill:var(--coral); }
.ttc-art .tc-sans { font:13px/1 var(--sans); fill:var(--muted-text); }

.ttc-art .tc-task { fill:none; stroke:var(--ink); stroke-opacity:.6; stroke-width:1.2; }
.ttc-art .tc-answer { fill:none; 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 { fill:none; stroke:var(--ink); stroke-opacity:.075; stroke-width:.7; }
.ttc-art .tc-neuron { fill:var(--cream); stroke:var(--ink); stroke-opacity:.35; 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 { fill:none; stroke:rgb(var(--field-glow-rgb)); stroke-width:2.4; }

/* Guidance into cognition, and the outcome kept for next time. */
.ttc-art .tc-guide { fill:none; stroke-width:1.6; stroke-dasharray:1 4; }
.ttc-art .tc-guide--weights { stroke:rgb(var(--field-glow-rgb)); stroke-width:2.2; }
.ttc-art .tc-guide--memory { stroke:var(--coral); }
.ttc-art .tc-keep { fill:none; stroke:var(--coral); stroke-width:1.3; stroke-dasharray:3 3.5; stroke-opacity:.8; }

/* The search space, drawn as a forest: branches thin and fade as they reach outward. */
.ttc-art .tc-tw { fill:none; stroke:var(--ink); }
.ttc-art .tc-tw--1 { opacity:.7; stroke-width:1.25; }
.ttc-art .tc-tw--2 { opacity:.58; stroke-width:1.05; }
.ttc-art .tc-tw--3 { opacity:.45; stroke-width:.85; }
.ttc-art .tc-tw--4 { opacity:.34; stroke-width:.7; }
.ttc-art .tc-knot { fill:var(--ink); fill-opacity:.6; }
.ttc-art .tc-ray { fill:none; stroke:rgb(var(--field-glow-rgb)); stroke-width:.9; stroke-opacity:.55; }

/* The new search, in accent green, and the checked answer. */
.ttc-art .tc-sel { fill:none; stroke:var(--accent); stroke-width:2.4; }
.ttc-art .tc-sel-node { fill:var(--accent); stroke:var(--paper); stroke-width:1.4; }
.ttc-art .tc-goal circle { fill:var(--paper); stroke:var(--accent); stroke-width:1.5; }
.ttc-art .tc-goal path { fill:none; stroke:var(--accent); stroke-width:1.7; }
.ttc-art .tc-x { fill:none; stroke:var(--muted); stroke-width:1.2; }

/* Memory, in coral. */
.ttc-art .tc-mem { fill:none; stroke:var(--coral); stroke-width:2.2; }
.ttc-art .tc-mem-node { fill:var(--coral); stroke:var(--art-bg); stroke-width:1.4; }
.ttc-art .tc-mem-node--sm { stroke-width:.8; }

/* Cognition: one ink dot at the root of the search. */
.ttc-art .tc-root { fill:var(--ink); }

/* The labels are drawn in the graphic's own units, so where it is drawn smaller they are set larger
   to stay legible: a narrow desktop column, then phones. */
@media (max-width:1299px) and (min-width:1001px) {
  .ttc-art .tc-mono { font-size:13px; }
  .ttc-art .tc-mono--small { font-size:12px; }
  .ttc-art .tc-sans { font-size:15.5px; }
}

@media(max-width:1000px) {
  .ttc-bridge-grid { grid-template-columns:1fr; gap:40px; }
  .ttc-figure { max-width:640px; }
}

@media(max-width:760px) {
  .ttc-bridge { padding-top:40px; margin-bottom:55px; }
  .ttc-bridge-grid { gap:35px; padding:24px 0 32px; }
  .ttc-copy h2 { font-size:46px; }
  .ttc-lead { font-size:23px; }
  .ttc-art .tc-mono { font-size:14px; letter-spacing:1px; }
  .ttc-art .tc-mono--small { font-size:12.5px; letter-spacing:.9px; }
  .ttc-art .tc-sans { font-size:17px; }
}

@media(max-width:480px) {
  .ttc-art .tc-mono { font-size:16px; }
  .ttc-art .tc-mono--small { font-size:14px; letter-spacing:.8px; }
  .ttc-art .tc-sans { font-size:19px; }
}

@media(max-width:360px) {
  .ttc-art .tc-mono { font-size:17px; }
  .ttc-art .tc-mono--small { font-size:16px; }
  .ttc-art .tc-sans { font-size:21px; }
}