/* Essay roadmap: four cards, each led by three square specimens from the section it opens.
   No rules or hairlines; the whole card is the link, and hovering one lets the others step back.
   Every rule is scoped to .roadmap.roadmap-visual so the legacy .roadmap rules in style.css stay neutralised. */
.roadmap.roadmap-visual {
  --rm-ink:#222629;
  --rm-muted:#677179;
  --rm-faint:#9aa3a9;
  --rm-accent:#28627b;
  --rm-paper:#f6f5f1;   /* node fill in the essay's Miyazaki figure */
  --rm-hub:#f5ecd6;     /* its target-neuron fill */
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0 44px;
  box-sizing:border-box;
  width:calc(100% - 80px);
  max-width:1128px;
  margin:0 auto 76px;
  padding:0;
  border:0;
  font-family:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif);
}
.roadmap.roadmap-visual * { box-sizing:border-box; }
.roadmap.roadmap-visual .rm-card {
  display:flex;
  flex-direction:column;
  gap:15px;
  min-width:0;
  margin:-12px;
  padding:12px;
  border:0;
  border-radius:6px;
  color:var(--rm-ink);
  text-decoration:none;
  font-size:15px;
  line-height:1.4;
  background:transparent;
  transition:opacity .15s ease;
}

/* Three equal squares. Photos and feature visualizations fill them; white-ground
   illustrations sit on the same paper tint (multiply only swaps their white for it). */
.roadmap.roadmap-visual .rm-art {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  width:100%;
  max-width:240px;
}
.roadmap.roadmap-visual .rm-art > * {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1;
  margin:0;
  overflow:hidden;
  border-radius:3px;
  object-fit:cover;
}
.roadmap.roadmap-visual .rm-soft > span { background:var(--rm-paper); isolation:isolate; }
.roadmap.roadmap-visual .rm-soft img { display:block; width:100%; height:100%; margin:0; object-fit:cover; mix-blend-mode:multiply; }

/* Language models have no pictures, so their specimens are the neurons' own words,
   set like the nodes of the Miyazaki circuit: spelling fragment, name, film. */
.roadmap.roadmap-visual .rm-words > span {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:var(--rm-paper);
  font:14px/1.1 var(--serif,Georgia,serif);
  color:#3b474c;
  text-align:center;
}
.roadmap.roadmap-visual .rm-words b { font:400 25px/1 "Hiragino Mincho ProN","Yu Mincho","Songti SC","Noto Serif CJK JP",serif; color:#2f3b40; }
.roadmap.roadmap-visual .rm-words small { font:11px/1 var(--serif,Georgia,serif); color:var(--rm-muted); }
.roadmap.roadmap-visual .rm-words i { font-style:italic; }
.roadmap.roadmap-visual .rm-words .rm-hub { background:var(--rm-hub); color:#3d3322; }

.roadmap.roadmap-visual .rm-copy { display:block; }
.roadmap.roadmap-visual .rm-title {
  display:block;
  font-size:15px;
  line-height:1.35;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--rm-ink);
  transition:color .15s ease;
}
.roadmap.roadmap-visual .rm-number {
  display:inline-block;
  min-width:1.05em;
  margin-right:5px;
  font-weight:400;
  color:var(--rm-faint);
  font-variant-numeric:tabular-nums;
}
.roadmap.roadmap-visual .rm-deck {
  display:block;
  margin-top:4px;
  font:14px/1.45 var(--serif,Georgia,serif);
  color:var(--rm-muted);
  text-wrap:pretty;
}

/* Quiet hover for the whole row: the other cards step back, the chosen title takes the link colour and underline. */
.roadmap.roadmap-visual:has(.rm-card:hover) .rm-card:not(:hover) { opacity:.55; }
.roadmap.roadmap-visual .rm-card:hover .rm-title { color:var(--rm-accent); }
.roadmap.roadmap-visual .rm-card:hover .rm-label { text-decoration:underline; text-decoration-color:#bccdd5; text-decoration-thickness:1px; text-underline-offset:4px; }
.roadmap.roadmap-visual .rm-card:focus-visible { outline:2px solid var(--rm-accent); outline-offset:0; }
@media (prefers-reduced-motion:reduce) {
  .roadmap.roadmap-visual .rm-card, .roadmap.roadmap-visual .rm-title { transition:none; }
}

/* Two columns once four no longer fit comfortably; edges follow the work tracker below. */
@media (max-width:960px) {
  .roadmap.roadmap-visual { grid-template-columns:repeat(2,minmax(0,1fr)); gap:34px 40px; }
}
@media (max-width:760px) {
  .roadmap.roadmap-visual { width:calc(100% - 48px); margin-bottom:58px; }
}
@media (max-width:480px) {
  .roadmap.roadmap-visual { gap:26px 18px; }
  .roadmap.roadmap-visual .rm-card { margin:-8px; padding:8px; gap:11px; }
  .roadmap.roadmap-visual .rm-art { gap:3px; }
  .roadmap.roadmap-visual .rm-words > span { font-size:11px; gap:2px; }
  .roadmap.roadmap-visual .rm-words b { font-size:19px; }
  .roadmap.roadmap-visual .rm-words small { font-size:9px; }
  .roadmap.roadmap-visual .rm-title { font-size:14px; }
  .roadmap.roadmap-visual .rm-deck { font-size:13px; }
}