/* Homepage hard-tasks section (29 October 2026), between Our Research Applied and Our team. It
   shows Figure 6's per-task drawing from "Test-Time Cognition Makes Post-Training Faster, Better,
   Cheaper" (/blog/test-time-cognition-makes-post-training-faster-better-cheaper), drawn into the
   page by scripts/build_correct_trajectories_figures.py and coloured by
   correct-trajectories-figures.20261027.css, as on the post. The section's heading stands in for
   the figure's headline, beside the same Fullscreen button. It sits on the paper, between the dark
   green results band and the cream team band.

   On wide screens the figure is kept narrow enough that the heading, the drawing and its legend fit
   in one window together: the drawing is 1120 by 462 units, so its width may be at most
   (window height − what the heading, legend and margins take) × 1120 / 462. Phones get the post's
   narrow drawing at full width. */
.home-hard-tasks {
  padding-block: 92px 96px;
  scroll-margin-top: 40px;
}

.home-hard-tasks-figure {
  --hard-tasks-reserved: 250px;  /* heading, legend and breathing room, out of the window height */
  width: 100%;
  max-width: max(600px, calc((100svh - var(--hard-tasks-reserved)) * 1120 / 462));
  margin: 0 auto;
}

.home-hard-tasks .ct-figure-head {
  align-items: center;
  margin-bottom: 28px;
}

.home-hard-tasks .ct-figure-head h2 {
  flex: 1 1 18rem;
  margin: 0;
  font: 400 clamp(30px, 3.1vw, 46px)/1.1 var(--sans);
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}

.home-hard-tasks .ct-figure .ct-art { margin-bottom: 0; }

.home-hard-tasks .evidence-footer {
  max-width: max(600px, calc((100svh - 250px) * 1120 / 462));
  margin-inline: auto;
}

/* Fullscreen: the whole window, as on the post. */
.home-hard-tasks-figure.is-fullscreen { max-width: none; }
.home-hard-tasks-figure.is-fullscreen .ct-figure-head h2 { font-size: clamp(22px, 2.4vw, 34px); }

@media (max-width: 760px) {
  .home-hard-tasks { padding-block: 60px 64px; }
  .home-hard-tasks .ct-figure-head { margin-bottom: 20px; }
}

@media (max-width: 640px) {
  .home-hard-tasks-figure,
  .home-hard-tasks .evidence-footer { max-width: none; }
}

/* ─── The chart's animation (29 October 2026) ─────────────────────────────────────────────────
   The steps of the post's pamphlet, without its pause, ("A drop-in cognitive layer…"), with no Replay
   button: correct-trajectories-figures.20261027.js plays the drawing (.ct-anim) once, when it
   scrolls into view. First the baseline's bars grow left to right while each tier shows its
   baseline rate (from 0.3s); a regression's part of the bar grows on top of its bar, once that
   has risen, in the baseline's grey. Then TTC's change: the gains grow on top, left to right, and
   the regressions turn red (from 2.1s, as soon as the last grey bar is up; the post's pamphlet
   waits until 3s). Then each tier's rates under the baseline and TTC (4.7s), and its multiple, one
   tier at a time (from 5.2s). The final frame is the drawing as drawn, so without the script, or with
   reduced motion, readers see the still chart. The pieces are grouped by class (ct-hc-*) by
   scripts/build_correct_trajectories_figures.py. */
.home-hard-tasks .ct-hc-before { opacity: 0; }

.home-hard-tasks .ct-anim.is-armed :is(.ct-hc-base, .ct-hc-gain, .ct-hc-loss) rect {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.home-hard-tasks .ct-anim.is-armed .ct-hc-base rect {
  animation: ct-grow-y 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(0.3s + var(--d, 0) * 1.2s);
}
.home-hard-tasks .ct-anim.is-armed .ct-hc-loss rect {
  animation: ct-grow-y 0.3s ease-out both, ct-hc-redden 0.3s ease both;
  animation-delay: calc(0.6s + var(--d, 0) * 1.2s), calc(2.1s + var(--d, 0) * 1.2s);
}
.home-hard-tasks .ct-anim.is-armed .ct-hc-before { animation: ct-pp-blip 3.6s ease 1.2s both; }
.home-hard-tasks .ct-anim.is-armed .ct-hc-gain rect {
  animation: ct-grow-y 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(2.1s + var(--d, 0) * 1.2s);
}
.home-hard-tasks .ct-anim.is-armed .ct-hc-after { animation: ct-in 0.5s ease 4.7s both; }
.home-hard-tasks .ct-anim.is-armed .ct-hc-multiples text {
  transform-box: view-box;
  animation: ct-pp-pop 0.45s cubic-bezier(0.2, 0.7, 0.3, 1) both;
  animation-delay: calc(5.2s + var(--i, 0) * 0.5s);
}

@keyframes ct-hc-redden { from { fill: var(--ct-base); } to { fill: var(--ct-cost); } }