/* The /what-if hero banner: one report, two roads.
 *
 * Same grid discipline as /sdlc — --s is how many screen pixels one game pixel is worth, and
 * the band, the two caption columns and the hero's own text column are all sized from it, so
 * the roads in the art and the columns under them cannot drift apart. The PNG is stored at 1x
 * and scaled only by whole multiples with image-rendering: pixelated.
 */

.wf {
  --s: 2;
  --w: calc(256px * var(--s));
  --wf-line: var(--line, #2C2C3A);
  --wf-white: var(--white, #F4F4F8);
  --wf-muted: var(--muted, #A9A9BA);
  --wf-blue: var(--blue, #0098EB);
  --wf-green: #5BD98A;
  --wf-amber: var(--yellow, #FFD166);
  --wf-head: 'Space Grotesk', system-ui, sans-serif;
  --wf-body: 'Outfit', system-ui, sans-serif;
  --wf-pixel: 'Press Start 2P', monospace;
  --wf-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-bottom: 24px;
  color: var(--wf-white);
}
@media (min-width: 820px)  { .wf { --s: 3; } }
@media (min-width: 1080px) { .wf { --s: 4; } }
@media (min-width: 1340px) { .wf { --s: 5; } }
.wf *, .wf *::before, .wf *::after { box-sizing: border-box; }

.wf-stage {
  width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-block: 3px solid var(--wf-line);
  background: #0E0E14;
}
.wf-stage::-webkit-scrollbar { display: none; }
.wf-world { width: var(--w); margin-inline: auto; }
.wf-band {
  display: block;
  width: var(--w);
  height: calc(56px * var(--s));
  image-rendering: pixelated;
}

.wf-lead {
  width: min(var(--w), 100% - 32px);
  max-width: 78ch;
  margin: 16px auto 20px;
  margin-inline: max(calc(50% - var(--w) / 2), 16px) auto;
  font-family: var(--wf-head);
  font-weight: 500;
  font-size: clamp(17px, 1.2vw, 21px);
  line-height: 1.4;
  color: var(--wf-white);
}
.wf-lead b { color: var(--wf-green); font-weight: 700; }

/* the two roads, as two columns under their own lane */
.wf-paths {
  list-style: none;
  width: min(var(--w), 100% - 32px);
  margin: 0 auto;
  padding: 0;
  display: grid;
  gap: 0 34px;
  grid-template-columns: 1fr;
}
@media (min-width: 820px) { .wf-paths { grid-template-columns: 1fr 1fr; } }
.wf-paths li {
  padding: 13px 0 6px;
  border-top: 3px solid var(--wf-amber);
}
.wf-paths li + li { border-top-color: var(--wf-green); }
@media (max-width: 819px) { .wf-paths li { padding-bottom: 16px; } }

.wf-n {
  font-family: var(--wf-pixel);
  font-size: 10px;
  line-height: 1;
  margin: 0 0 10px;
  color: var(--wf-amber);
}
.wf-paths li + li .wf-n { color: var(--wf-green); }
.wf-t {
  font-family: var(--wf-head);
  font-weight: 700;
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.25;
  margin: 0 0 9px;
  color: var(--wf-white);
}
.wf-c {
  font-family: var(--wf-body);
  font-size: 15px;
  line-height: 1.55;
  margin: 0 0 11px;
  color: var(--wf-muted);
}
.wf-c b { color: var(--wf-white); font-weight: 600; }
.wf-end {
  font-family: var(--wf-mono);
  font-size: 13.5px;
  line-height: 1.4;
  margin: 0;
  padding-top: 9px;
  border-top: 2px solid var(--wf-line);
  color: var(--wf-amber);
}
.wf-paths li + li .wf-end { color: var(--wf-green); }

.wf-point {
  width: min(var(--w), 100% - 32px);
  max-width: 70ch;
  margin: 22px auto 0;
  margin-inline: max(calc(50% - var(--w) / 2), 16px) auto;
  font-family: var(--wf-head);
  font-weight: 700;
  font-size: clamp(18px, 1.4vw, 23px);
  line-height: 1.3;
  color: var(--wf-white);
  border-left: 4px solid var(--wf-blue);
  padding-left: 16px;
}
.wf-hint { font-family: var(--wf-body); font-weight: 400; color: var(--wf-blue); }
@media (min-width: 820px) { .wf-hint { display: none; } }

/* the hero's own column follows the same grid, so headline and art share a left edge */
.wi-hero .doc { width: min(var(--wf-w, 900px), 100% - 32px); }
.wi-hero .doc > * { max-width: 900px; }
.wi-hero { --wf-w: calc(256px * 2); }
@media (min-width: 820px)  { .wi-hero { --wf-w: calc(256px * 3); } }
@media (min-width: 1080px) { .wi-hero { --wf-w: calc(256px * 4); } }
@media (min-width: 1340px) { .wi-hero { --wf-w: calc(256px * 5); } }