/* Constellation B's original Three.js scene, placed inside Atelier A. */
.network-stage {
  --network-bg:#0b0d12; --network-ink:#efe8dc; --network-ink-2:#c8c1b7;
  --network-muted:#8f8b86; --ember:#eb9a6c; --cool:#86bcd1; --network-line:rgba(239,232,220,.15);
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  display:flex; align-items:center; background:var(--network-bg); color:var(--network-ink);
}
.network-stage::after {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,rgba(11,13,18,.93) 0%,rgba(11,13,18,.74) 34%,rgba(11,13,18,.05) 67%,rgba(11,13,18,.22) 100%);
}
.network-canvas { position:absolute; inset:0; z-index:-2; width:100%; height:100%; display:block; }
.network-canvas canvas { display:block; width:100%!important; height:100%!important; cursor:grab; }
.network-canvas.is-hovering canvas { cursor:pointer; }
.network-copy { position:relative; z-index:1; pointer-events:none; padding-block:clamp(6rem,12vw,10rem); }
.network-copy a,.network-copy button { pointer-events:auto; }
.network-copy .h-section { color:var(--network-ink); max-width:10ch; }
.network-copy .h-section em { color:var(--ember); }
.network-lede { max-width:32rem; color:var(--network-ink-2); font-family:var(--serif); font-size:var(--step-2); line-height:1.35; }
.network-controls { max-width:36rem; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.5rem; }
.chip {
  appearance:none; border:1px solid rgba(239,232,220,.28); border-radius:999px; padding:.5rem .82rem;
  background:rgba(11,13,18,.5); color:var(--network-ink-2); cursor:pointer;
  font:500 .75rem/1 var(--sans); letter-spacing:.02em;
}
.chip:hover,.chip:focus-visible,.chip[aria-pressed="true"] { border-color:var(--ember); color:var(--network-ink); background:rgba(123,45,59,.34); }
.node-label {
  position:absolute; left:0; top:0; z-index:2; max-width:15rem; pointer-events:none;
  color:var(--network-ink-2); font:500 .7rem/1.2 var(--sans); letter-spacing:.02em;
  text-shadow:0 2px 8px var(--network-bg); transition:opacity .25s,color .25s;
}
.node-label.is-area { font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--network-ink-2); }
.node-label.is-featured { color:var(--ember); font-size:.76rem; font-weight:600; letter-spacing:.04em; }
.node-label.is-dim { opacity:.18!important; }
.node-label.is-hot { color:var(--network-ink); background:rgba(11,13,18,.75); border:1px solid rgba(239,232,220,.25); opacity:1!important; text-transform:none; letter-spacing:.02em; font-size:.8rem; padding:.3rem .45rem; border-radius:3px; }
.network-panel {
  --network-bg:#0b0d12; --network-ink:#efe8dc; --network-ink-2:#c8c1b7; --network-muted:#8f8b86; --ember:#eb9a6c; --cool:#86bcd1;
  position:fixed; z-index:130; top:0; right:0; width:min(31rem,100%); height:100dvh; overflow-y:auto;
  padding:clamp(4.5rem,8vw,6rem) clamp(1.5rem,4vw,3rem) 2rem;
  color:var(--network-ink); background:rgba(16,18,24,.97); border-left:1px solid rgba(239,232,220,.16);
  box-shadow:-20px 0 60px rgba(0,0,0,.35); transform:translateX(105%); visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.7,.1,1),visibility 0s .5s;
}
.network-panel[data-open="true"] { transform:none; visibility:visible; transition:transform .5s cubic-bezier(.2,.7,.1,1); }
.network-panel .panel__close { position:absolute; top:1.2rem; right:1.2rem; width:2.6rem; height:2.6rem; border:1px solid rgba(239,232,220,.25); border-radius:50%; background:none; color:var(--network-ink); font-size:1.5rem; cursor:pointer; }
.network-panel .panel__kind { color:var(--cool); font:600 .7rem var(--sans); letter-spacing:.2em; text-transform:uppercase; margin-bottom:.75rem; }
.network-panel .panel__title { color:var(--network-ink); font-family:"Cormorant Garamond",Georgia,serif; font-size:2rem; line-height:1.1; margin-right:2.5rem; }
.network-panel .panel__title:focus { outline:none; }
.network-panel .panel__meta { color:var(--ember); font-size:.85rem; }
.network-panel .panel__text { color:var(--network-ink-2); }
.network-panel .btn { border-color:var(--network-ink); color:var(--network-ink); }
.network-panel .btn:hover { background:var(--network-ink); color:var(--network-bg); }
.network-panel .panel__links { margin-top:1.25rem; padding-top:1rem; border-top:1px solid rgba(239,232,220,.15); }
.network-panel .panel__links h3 { color:var(--network-muted); font:600 .7rem var(--sans); letter-spacing:.2em; text-transform:uppercase; }
.network-panel .panel__links ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.constellation-data { display:none!important; }
.no-webgl .network-canvas { display:none; }
@media(max-width:700px){
  .network-stage{min-height:820px;align-items:flex-start}.network-stage::after{background:linear-gradient(180deg,rgba(11,13,18,.95) 0%,rgba(11,13,18,.72) 42%,rgba(11,13,18,.08) 70%)}
  .network-copy{padding-top:6rem}.network-panel{top:auto;bottom:0;height:min(78dvh,46rem);width:100%;border-left:0;border-top:1px solid rgba(239,232,220,.16);transform:translateY(105%)}
}
@media(prefers-reduced-motion:reduce){.network-panel{transition:none}.node-label{transition:none}}