/* The five experiments, drawn as small dawn-lit notebook scenes on a winding path. */
#fig-asks { max-width: 70rem; }
#fig-asks .asks { position: relative; padding: 0.5rem 0 1.5rem; }
#fig-asks .asks-path { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 0; }
#fig-asks .asks-path path { fill: none; stroke: var(--a1); stroke-opacity: 0.34; stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1 9; }

#fig-asks .ask { position: relative; z-index: 1; width: min(27rem, 47%); margin-left: var(--x, 0); }
#fig-asks .ask + .ask { margin-top: -11.5rem; }
#fig-asks .ask:nth-of-type(1) { --x: 0%; }
#fig-asks .ask:nth-of-type(2) { --x: 52%; }
#fig-asks .ask:nth-of-type(3) { --x: 9%; }
#fig-asks .ask:nth-of-type(4) { --x: 53%; }
#fig-asks .ask:nth-of-type(5) { --x: 19%; }

#fig-asks .ask-scene {
  display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none;
  cursor: pointer; -webkit-tap-highlight-color: transparent; font: inherit; color: inherit;
  border-radius: 50% / 46%;
}
#fig-asks .ask-scene canvas {
  display: block; width: 100%; aspect-ratio: 3 / 2;
  -webkit-mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 60%, transparent 100%);
          mask-image: radial-gradient(ellipse 58% 58% at 50% 50%, #000 60%, transparent 100%);
}
#fig-asks .ask-scene:focus-visible { outline: 1px dashed var(--a1); outline-offset: 4px; }

#fig-asks .ask-txt {
  display: flex; gap: 0.9rem; align-items: flex-start;
  margin: 0.5rem 0 0 0.6rem; padding-right: 0.5rem;
  opacity: 0.66; transition: opacity 0.5s ease;
}
#fig-asks .ask.on .ask-txt { opacity: 1; }
#fig-asks .ask-no {
  flex: none; width: 2.6rem; text-align: center;
  font-family: var(--display); font-size: 3.5rem; line-height: 0.95;
  color: transparent; -webkit-text-stroke: 1px var(--a1);
  text-shadow: 0 0 22px rgba(255, 213, 154, 0.38);
  transition: color 0.5s ease, text-shadow 0.5s ease;
}
#fig-asks .ask.on .ask-no { color: rgba(255, 213, 154, 0.16); text-shadow: 0 0 28px rgba(255, 213, 154, 0.6); }
#fig-asks .ask h3 {
  margin: 0.2rem 0 0.35rem; font-family: var(--display); font-weight: 400;
  font-size: 1.28rem; line-height: 1.12; color: var(--ink);
}
#fig-asks .ask p { margin: 0 0 0.5rem; font-family: var(--serif); font-size: 0.97rem; line-height: 1.45; color: var(--ink-2); }
#fig-asks .ask-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--a2); border-bottom: 1px dotted rgba(255, 159, 178, 0.5); padding-bottom: 0.12rem;
}
#fig-asks .databar { margin-top: 1.4rem; }

@media (max-width: 760px) {
  #fig-asks .asks-path { display: none; }
  #fig-asks .ask { width: 100%; margin-left: 0; }
  #fig-asks .ask + .ask { margin-top: 1.6rem; }
  #fig-asks .ask-scene canvas { -webkit-mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 52% 52% at 50% 50%, #000 70%, transparent 100%); }
  #fig-asks .ask-txt { opacity: 1; margin-left: 0.2rem; }
  #fig-asks .ask-no { font-size: 3rem; width: 2.2rem; }
}
@media (prefers-reduced-motion: reduce) { #fig-asks .ask-txt, #fig-asks .ask-no { transition: none; } }
@media (min-width: 761px) { #fig-asks .ask:nth-of-type(5) { margin-top: -6rem; } }