
.question-hero{background:radial-gradient(circle at 50% 110%,rgba(41,199,216,.12),transparent 34%),linear-gradient(130deg,#041221,#0b2b45)}
.question-map-section{color:var(--white);background:radial-gradient(circle at center,rgba(41,199,216,.10),transparent 33%),linear-gradient(180deg,#041321,#071b2f 72%,#061725);padding:4.2rem 1.25rem 4.8rem;border-bottom:1px solid rgba(228,173,69,.28)}
.question-map-intro{max-width:820px;margin:0 auto 2.2rem;text-align:center}.question-map-intro h2{color:var(--white)}.question-map-intro p:not(.eyebrow){color:#bcd0d5}
.question-map{--map-size:min(1060px,94vw);position:relative;width:var(--map-size);aspect-ratio:1/1;margin:0 auto;isolation:isolate}
.map-art{position:absolute;inset:13%;z-index:1;display:grid;place-items:center;opacity:.82;filter:drop-shadow(0 18px 50px rgba(0,0,0,.3));pointer-events:none}.map-art img{width:100%;height:100%;object-fit:contain}.map-orbits,.map-core{position:absolute;inset:0;z-index:3;pointer-events:none}.map-node{pointer-events:auto}

.map-node{
  --node-color:#29c7d8;
  position:absolute;
  left:calc(var(--x)*1%);
  top:calc(var(--y)*1%);
  transform:translate(-50%,-50%);
  width:clamp(104px,11vw,148px);
  min-height:54px;
  border:1px solid color-mix(in srgb,var(--node-color) 62%,transparent);
  border-radius:999px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:.22rem;
  padding:.58rem .82rem;
  color:var(--white);
  background:
    radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--node-color) 15%,transparent),transparent 55%),
    rgba(5,20,34,.92);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.018) inset,
    0 8px 24px rgba(0,0,0,.22),
    0 0 18px color-mix(in srgb,var(--node-color) 9%,transparent);
  text-align:center;
  text-decoration:none;
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease;
  z-index:4;
}
.map-node::before{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:inherit;
  border:1px solid color-mix(in srgb,var(--node-color) 16%,transparent);
  pointer-events:none;
  transition:border-color .24s ease,box-shadow .24s ease;
}
.map-node:hover,.map-node:focus-visible{
  color:var(--white);
  transform:translate(-50%,-50%) translateY(-3px) scale(1.035);
  border-color:var(--node-color);
  background:
    radial-gradient(circle at 38% 28%,color-mix(in srgb,var(--node-color) 24%,transparent),transparent 58%),
    rgba(5,20,34,.97);
  box-shadow:
    0 12px 30px rgba(0,0,0,.30),
    0 0 25px color-mix(in srgb,var(--node-color) 24%,transparent);
  outline:none;
  z-index:8;
  animation-play-state:paused;
}
.map-node:hover::before,.map-node:focus-visible::before{
  border-color:color-mix(in srgb,var(--node-color) 55%,transparent);
  box-shadow:0 0 18px color-mix(in srgb,var(--node-color) 18%,transparent);
}
.map-node-title{
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(.72rem,1.12vw,.94rem);
  line-height:1.08;
  font-weight:700;
  text-wrap:balance;
}
.map-node-teaser{
  position:absolute;
  top:calc(100% + 9px);
  left:50%;
  width:min(230px,46vw);
  max-height:0;
  overflow:hidden;
  transform:translateX(-50%) translateY(-4px);
  padding:0 .72rem;
  border-radius:10px;
  color:#d4e1e4;
  background:rgba(3,16,28,.96);
  border:0 solid color-mix(in srgb,var(--node-color) 38%,transparent);
  box-shadow:0 10px 25px rgba(0,0,0,.30);
  font-size:.72rem;
  line-height:1.28;
  opacity:0;
  pointer-events:none;
  transition:max-height .22s ease,opacity .22s ease,transform .22s ease,padding .22s ease,border-width .22s ease;
}
.map-node:hover .map-node-teaser,.map-node:focus-visible .map-node-teaser{
  max-height:7rem;
  opacity:1;
  transform:translateX(-50%) translateY(0);
  padding:.65rem .72rem;
  border-width:1px;
}
.map-core .map-node{
  width:clamp(148px,16vw,210px);
  min-height:104px;
  border-width:1.5px;
  background:
    radial-gradient(circle,rgba(228,173,69,.22) 0,rgba(228,173,69,.08) 38%,rgba(4,18,33,.94) 72%);
}
.map-core .map-node-title{font-size:clamp(.88rem,1.45vw,1.12rem)}
.map-node-enter{
  opacity:0;
  animation:mapNodeEntrance .58s cubic-bezier(.2,.72,.28,1) forwards;
  animation-delay:var(--entrance-delay,0ms);
}
.map-node-drift{
  animation:
    mapNodeEntrance .58s cubic-bezier(.2,.72,.28,1) forwards,
    mapNodeDrift 4.5s ease-in-out infinite;
  animation-delay:var(--entrance-delay,0ms),calc(var(--entrance-delay,0ms) + 700ms);
}
.map-node-pulse::before{animation:mapCorePulse 4.8s ease-in-out infinite}
@keyframes mapNodeEntrance{
  from{opacity:0;transform:translate(-50%,-50%) translateY(8px) scale(.96)}
  to{opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1)}
}
@keyframes mapNodeDrift{
  0%,100%{margin-top:0}
  50%{margin-top:-6px}
}
@keyframes mapCorePulse{
  0%,100%{box-shadow:0 0 0 color-mix(in srgb,var(--node-color) 0%,transparent)}
  50%{box-shadow:0 0 22px color-mix(in srgb,var(--node-color) 22%,transparent)}
}
.map-help{max-width:800px;margin:1.7rem auto 0;color:#8aa8b0;text-align:center;font-size:.82rem}
.segment-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.segment-list-card{display:grid;gap:.45rem;min-height:170px;padding:1.2rem;color:var(--text);background:rgba(255,255,255,.72);border:1px solid #d5dcdd;border-top:3px solid var(--segment-color,var(--cyan));border-radius:15px;text-decoration:none}.segment-list-card:hover{color:var(--text);box-shadow:0 12px 32px rgba(10,40,55,.10)}.segment-list-card h3{margin:0}.segment-list-card p{margin:0;color:var(--muted)}.segment-state{margin-top:auto;color:#54707a;font-size:.76rem;text-transform:uppercase;letter-spacing:.11em}
.question-card-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.question-card{scroll-margin-top:100px;padding:1.5rem;border-radius:var(--radius);background:rgba(255,255,255,.80);border:1px solid #d5dcdd;border-left:4px solid var(--segment-color,var(--cyan))}.question-card h2{font-size:clamp(1.45rem,3vw,2rem);margin-bottom:.75rem}.question-card .challenge{display:inline-block;color:#8a5a00;font-family:Georgia,"Times New Roman",serif;font-weight:700;font-size:1.15rem}.question-card .publication-state{margin-top:1rem;color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em}.question-boundary{margin-top:2rem}
@media(max-width:980px){.question-map{width:min(760px,96vw);aspect-ratio:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.map-art{position:relative;inset:auto;grid-column:1/-1;width:min(580px,90vw);aspect-ratio:1/1;margin:0 auto}.map-orbits,.map-core{display:contents}.map-node,.map-core .map-node{position:relative;left:auto;top:auto;transform:none;width:100%;min-height:132px;border-radius:18px}.map-node:hover,.map-node:focus-visible{transform:translateY(-4px)}.map-core .map-node{grid-column:1/-1;min-height:160px;order:-1}.map-node-teaser{position:static;width:auto;max-height:none;opacity:1;transform:none;background:transparent;border:0;box-shadow:none;padding:0;pointer-events:auto}.segment-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.question-map,.segment-list,.question-card-grid{grid-template-columns:1fr}.map-core .map-node{grid-column:1}}
@media(prefers-reduced-motion:reduce){.map-node,.map-node-teaser{transition:none;animation:none}.map-node-enter{opacity:1}}


/* Compact Question Paths introduction
   Keeps the interactive map visible much earlier on desktop screens. */
.question-hero .section {
  padding-top: 2.15rem;
  padding-bottom: 2.15rem;
}

.question-hero h1 {
  font-size: clamp(2.45rem, 4.4vw, 4.35rem);
  line-height: 1.02;
  margin-top: .45rem;
  margin-bottom: .65rem;
}

.question-hero p:last-child {
  max-width: 760px;
  margin-bottom: 0;
}

.question-map-section {
  padding-top: 2rem;
  padding-bottom: 3.4rem;
}

.question-map-intro {
  margin-bottom: .35rem;
}

.question-map-intro .eyebrow {
  margin-bottom: .45rem;
}

.question-map-intro h2 {
  font-size: clamp(2rem, 3.7vw, 3.35rem);
  line-height: 1.05;
  margin-bottom: .55rem;
}

.question-map-intro p:not(.eyebrow) {
  max-width: 720px;
  margin: 0 auto;
}

.question-map {
  margin-top: -1.5rem;
}

@media (max-width: 980px) {
  .question-hero .section {
    padding-top: 1.75rem;
    padding-bottom: 1.75rem;
  }

  .question-map-section {
    padding-top: 1.65rem;
  }

  .question-map {
    margin-top: .5rem;
  }
}

@media (max-width: 650px) {
  .question-hero h1 {
    font-size: clamp(2.2rem, 11vw, 3.25rem);
  }

  .question-map-intro h2 {
    font-size: clamp(1.85rem, 9vw, 2.6rem);
  }
}
