/* The homepage hero: the copy beside the search forest drawn by assets/js/hero-forest.20260925.js,
   with a one-line caption underneath that narrates it. Every colour is a site theme token, so the
   light and dark themes both work. */
.hero.hero-forest {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.15fr);
  align-items: center;
  gap: clamp(28px, 3vw, 52px);
  min-height: 0;
  padding-block: 40px 56px;
}
.hero-forest .hero-copy {
  width: auto;
  min-width: 0;
  pointer-events: auto;
}
.hero-forest h1 {
  margin: 0 0 32px;
  font-size: clamp(44px, 4.15vw, 66px);
  line-height: 1.08;
}
.hero-forest .hero-dek {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  letter-spacing: -.35px;
}
.forest-art {
  position: relative;
  min-width: 0;
  width: 100%;
  margin: 0;
}
.forest-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 720 / 600;
}
.forest-description {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* The caption: what is happening now, tagged with the colour of whoever is acting, and the running
   count of paths each search explores. It sits under the graphic, well clear of the headline, and
   keeps a fixed height so changing lines never move the page. */
.forest-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px 36px;
  min-height: 90px;  /* room for a line that wraps, so the page never shifts */
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
}
/* Without JavaScript the canvas stays empty, so the caption waits for the graphic. */
.forest-caption:not([data-live]) { visibility: hidden; }
.fc-now { flex: 1 1 300px; min-width: 0; }
.fc-tag,
.fc-label {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 7px;
  color: var(--muted);
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.fc-tag i { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; background: var(--ink); }
.fc-tag[data-tag="priors"] i { background: rgb(var(--field-glow-rgb)); }
.fc-tag[data-tag="memory"] i { background: var(--coral); }
.fc-tag[data-tag="search"] i { background: var(--accent); }
.fc-tag[data-tag="cognition"] i { width: 9px; height: 9px; background: transparent; border: 1.5px solid var(--ink); }
.fc-text {
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.3px;
}
/* Counts fill in left to right in a fixed slot, so a new number never moves the ones before it. */
.fc-ledger { flex: 0 0 13.5em; }
.fc-counts {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
  color: var(--muted-text);
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
.fc-num[data-current] { color: var(--accent-text); }
.fc-arrow { color: var(--muted); font-size: 14px; }

@media (max-width: 1000px) {
  .hero.hero-forest {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    padding-block: 58px 56px;
  }
  .hero-forest .hero-copy { max-width: 660px; }
  .hero-forest h1 { font-size: clamp(40px, 6.3vw, 60px); }
  .hero-forest .hero-dek { font-size: 20px; max-width: 590px; }
  .forest-art { max-width: 680px; margin-inline: auto; }
}
@media (max-width: 760px) {
  .hero.hero-forest { gap: 12px; padding-block: 41px 36px; }
  .hero-forest h1 { font-size: clamp(32px, 8.7vw, 56px); margin-bottom: 27px; }
  .hero-forest .hero-dek { font-size: 18px; }
  /* The forest's rim fades out, so on phones it can run to the screen edges; the caption keeps the
     page's side margins. */
  .forest-art { width: calc(100% + 40px); max-width: none; margin-inline: -20px; }
  .forest-caption { min-height: 146px; margin-inline: 20px; }
  .fc-text, .fc-counts { font-size: 17px; }
  .fc-ledger { flex-basis: auto; }
}
@media print {
  .hero.hero-forest { display: block; padding-block: 24px 36px; }
  .forest-art { display: none; }
}