/* The homepage hero: standard inference vs Test Time Cognition (2 October 2026). The section is a
   scroll track with a pinned stage. This stylesheet places the copy; hero-compare.20261002.v5.js draws
   the graphic on the canvas, moves the copy as the reader scrolls and places the chapter heads, the
   labels, the hero run's axis and caption, and the legend. Every colour is a site theme token, so
   both themes work. The design study is in design-explorations/hero-compare/.
   v4: the hero's run has a caption and an axis with a label at each step (.hc-tick); the chapter
   rail, the line under the titles and the close-up's verdict lines are gone.
   v2: the stage is as tall as the small viewport (svh), so on phones it fits above the browser's
   toolbars and keeps its size as they come and go. Where the copy can't sit in the stage beside or
   above the graphic (phones, phones on their side, short windows), it comes first in the page
   (.is-flow) and the stage that pins holds the graphic alone. */
.hc-hero {
  --hc-margin: max(56px, calc(50% - 720px));  /* the page's side margin, as .page-width sets it */
  --hc-header: 118px;                          /* the header's height, until the script measures the stage */
  --hc-vh: 100vh;
  position: relative;
  height: calc(var(--hc-vh) + var(--hc-track, 0px));
}
@supports (height: 100svh) {
  .hc-hero { --hc-vh: 100svh; }
}
.hc-stage { position: sticky; top: 0; height: var(--hc-vh); overflow: hidden; }
.hc-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hc-stage > :is(.hc-head, .hc-label, .hc-tick, .hc-legend, .hc-skip, .hc-cue) { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform, opacity; }
/* Until the script has placed them, and without it, only the copy shows. */
.hc-hero:not(.is-live) :is(.hc-canvas, .hc-head, .hc-label, .hc-tick, .hc-legend, .hc-skip, .hc-cue) { visibility: hidden; }
.hc-description {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The hero copy. It sits at the page's side margin and, on wide screens, a little above the centre
   of the part of the stage below the header (--hc-vis, which the script sets exactly); when it is
   taller than that, it starts at the top. The script reads where it is and only moves it. */
.hc-stage > .hc-copy {
  position: absolute;
  z-index: 1;
  left: var(--hc-margin);
  top: 0;
  box-sizing: border-box;
  width: min(560px, 40vw);
  height: var(--hc-vis, calc(var(--hc-vh) - var(--hc-header)));
  padding: 24px 0 calc(var(--hc-vis, calc(var(--hc-vh) - var(--hc-header))) * 0.08 + 24px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  justify-content: safe center;
  pointer-events: auto;
  will-change: transform, opacity;
}
.hc-copy h1 { margin: 0 0 32px; font-size: clamp(44px, 4.15vw, 66px); font-weight: 400; letter-spacing: -.06em; line-height: 1.08; }
.hc-copy h1 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.078em; }
.hc-copy .hero-dek { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; letter-spacing: -.35px; }

/* The chapter head: the chapter's title, still for the chapter. */
.hc-head { width: min(1240px, calc(100vw - 80px)); text-align: center; }
.hc-title { margin: 0; color: var(--ink); font-size: clamp(30px, 2.75vw, 44px); line-height: 1.1; letter-spacing: -.045em; text-wrap: balance; }

/* Labels beside the graphic: a name and a note. */
.hc-label { width: max-content; max-width: 460px; }
.hc-label :is(.hc-name, .hc-note), .hc-tick { text-shadow: 0 0 2px var(--paper), 0 0 5px var(--paper), 0 0 9px var(--paper); }
.hc-name i {
  position: relative;
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink);
}
.hc-label[data-align="c"] { text-align: center; }
.hc-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--ink);
  font: 400 12px/1.4 var(--mono);
  letter-spacing: 1.35px;
  text-transform: uppercase;
}
.hc-name i { display: none; top: 0; }
.hc-note { margin: 3px 0 0; color: var(--muted); font-size: 14px; line-height: 1.35; letter-spacing: -.1px; text-wrap: balance; }
.hc-note:empty { display: none; }
/* The hero run's caption: the inference, then a sentence on what it does. */
.hc-caption .hc-note { margin-top: 5px; font-size: 16px; line-height: 1.4; letter-spacing: -.2px; }
.hc-label[data-align="end"] .hc-name i { display: none; }
.hc-label[data-align="key"] .hc-name i { display: block; }
.hc-label[data-align="end"] .hc-name { color: var(--muted-text, var(--muted)); }
.hc-label[data-align="end"][data-tag="check"] .hc-name { color: var(--accent-text, var(--accent)); }

/* The legend: the site's mono tags, one colour each. The one the graphic has at work is lit. */
.hc-legend {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  gap: 10px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
  color: var(--muted);
  font: 400 11.5px/1.4 var(--mono);
  letter-spacing: 1.25px;
  text-transform: uppercase;
}
.hc-legend li { display: flex; align-items: center; gap: 9px; transition: color .25s ease; }
.hc-legend[data-runs="false"] [data-key="agent"] { display: none; }
.hc-skip { color: var(--muted); font: 400 11.5px/1.4 var(--mono); letter-spacing: 1.1px; text-transform: uppercase; text-decoration: none; }
.hc-skip:hover { color: var(--ink); }
.hc-skip span { margin-left: 4px; }
.hc-cue { margin: 0; white-space: nowrap; color: var(--muted); font: 400 11.5px/1.4 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; }
/* The axis under the hero's run: the agent's trajectory, and a label at each step's tick. */
.hc-tick { margin: 0; white-space: nowrap; color: var(--muted); font: 400 11px/1.4 var(--mono); letter-spacing: 1.2px; text-transform: uppercase; }
.hc-cue span { margin-left: 6px; }
.hc-legend i { position: relative; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.hc-legend [data-key="agent"] i { width: 22px; border-radius: 0; background: linear-gradient(var(--ink), var(--ink)) center / 100% 1.6px no-repeat; }
.hc-legend [data-key="agent"] i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -5.5px 0 0 -5.5px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--paper);
}
.hc-legend [data-key="priors"] i { background: rgb(var(--field-glow-rgb)); }
.hc-legend [data-key="memory"] i { background: var(--coral); }
.hc-legend [data-key="search"] i { background: var(--accent); }
.hc-legend[data-active="priors"] [data-key="priors"],
.hc-legend[data-active="memory"] [data-key="memory"],
.hc-legend[data-active="search"] [data-key="search"] { color: var(--ink); }
.hc-legend[data-active="priors"] [data-key="priors"] i,
.hc-legend[data-active="memory"] [data-key="memory"] i,
.hc-legend[data-active="search"] [data-key="search"] i { transform: scale(1.4); }

/* The page's side margins and the header's height follow the site's breakpoints. */
@media (max-width: 1100px) {
  .hc-hero { --hc-margin: 32px; --hc-header: 94px; }
}
@media (max-width: 760px) {
  .hc-hero { --hc-margin: 20px; --hc-header: 120px; }
}

/* Narrow screens: the same story in a taller stage, with the copy first in the page. */
@media (max-width: 899.98px) {
  .hc-copy h1 { font-size: clamp(32px, 8.7vw, 56px); margin-bottom: 22px; }
  .hc-copy .hero-dek { font-size: 17px; }
}
/* The copy in the page's flow, where the script finds that it can't sit in the stage; and, before
   the script runs and without it, on narrow and short screens. */
.hc-hero.is-flow > .hc-copy {
  pointer-events: auto;
  position: relative;
  left: auto;
  top: auto;
  display: block;
  width: auto;
  height: auto;
  margin: 0 var(--hc-margin);
  padding: 18px 0 10px;
}
@media (max-width: 899.98px), (max-height: 600px) {
  .hc-hero:not(.is-live) { height: auto; }
  .hc-hero:not(.is-live) .hc-stage { position: relative; height: auto; }
  .hc-hero:not(.is-live) .hc-stage > .hc-copy {
    position: relative;
    left: auto;
    top: auto;
    display: block;
    width: auto;
    height: auto;
    margin: 0 var(--hc-margin);
    padding: 18px 0 10px;
  }
}
.hc-hero:not(.is-wide) .hc-head { width: calc(100vw - 32px); }
.hc-hero:not(.is-wide) .hc-title { font-size: clamp(24px, 6.6vw, 32px); }
.hc-hero:not(.is-wide) .hc-label { max-width: calc(100vw - 40px); }
.hc-hero:not(.is-wide) .hc-note { font-size: 13px; }
.hc-hero:not(.is-wide) .hc-caption .hc-note { font-size: 15px; }
.hc-hero:not(.is-wide) .hc-name { font-size: 11px; }
.hc-hero:not(.is-wide) .hc-tick { font-size: 10px; letter-spacing: 1px; }
.hc-hero:not(.is-wide) .hc-legend { flex-wrap: wrap; width: calc(100vw - 40px); white-space: normal; gap: 8px 16px; font-size: 10.5px; }

/* The graphic keeps its colours in the dark theme, as the homepage's other graphics do
   (figure-colors.20260928.css). Print keeps the day palette. */
@media screen {
  html[data-theme="dark"] .hc-hero {
    --coral: #eb8b61;
    --accent: #75b68c;
    --accent-text: #94cda7;
    --field-glow-rgb: 181,194,132;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hc-legend li, .hc-legend i { transition: none; }
}

/* Print: the copy without the graphic, as the previous hero printed. */
@media print {
  .hc-hero { height: auto; }
  .hc-stage { position: static; height: auto; overflow: visible; }
  .hc-stage > :is(.hc-canvas, .hc-head, .hc-label, .hc-tick, .hc-legend, .hc-skip, .hc-cue) { display: none; }
  .hc-stage > .hc-copy {
    position: static;
    display: block;
    width: auto;
    max-width: 560px;
    height: auto;
    margin-left: var(--hc-margin);
    padding: 24px 0 36px;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}