/* 05 · The network · illustrated map (see network-map.js) */
.netsteps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--human);}
.netstep{appearance:none;border:0;background:transparent;font:inherit;text-align:left;cursor:pointer;padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.2rem;color:var(--material);transition:background .5s,color .5s;}
.netstep+.netstep{border-left:1px solid var(--human);}
.netstep .n{font-size:.72rem;letter-spacing:.12em;}
.netstep .tt{font-family:var(--display);font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.2;}
.netstep .ts{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;opacity:.85;}
.netstep.done{color:var(--human);}
.netstep.on{background:var(--human);color:var(--paper);}
.netstep:focus-visible{outline:2px solid var(--earth);outline-offset:-2px;}

.netstage{position:relative;border:1px solid var(--human);border-top:0;background:var(--nature);overflow:hidden;aspect-ratio:1/.52;}
.netstage::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 36px 14px var(--nature);pointer-events:none;}
.netstage svg.netsketch{display:block;width:100%;height:100%;}
.netstage .netcap{position:absolute;left:20px;top:16px;z-index:2;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--material);pointer-events:none;}
.netstage .netcompass{position:absolute;right:18px;bottom:14px;z-index:2;width:46px;height:46px;pointer-events:none;opacity:.8;}
.netstage.failed::before{content:'Map unavailable';position:absolute;inset:0;display:grid;place-items:center;color:var(--material);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;}

.netsketch .n-sphere{fill:none;stroke:rgba(82,73,66,.45);stroke-width:1;}
.netsketch .n-sphere2{fill:none;stroke:rgba(82,73,66,.18);stroke-width:1;}
.netsketch .n-grat{fill:none;stroke:rgba(82,73,66,.13);stroke-width:.7;stroke-dasharray:1 3;}
.netsketch .n-wl1{fill:none;stroke:rgba(82,73,66,.10);stroke-width:13;}
.netsketch .n-wl1b{fill:none;stroke:var(--nature);stroke-width:11.6;}
.netsketch .n-wl2{fill:none;stroke:rgba(82,73,66,.13);stroke-width:7;}
.netsketch .n-wl2b{fill:none;stroke:var(--nature);stroke-width:5.6;}
.netsketch .n-fill{fill:var(--paper);}
.netsketch .n-pencil{fill:none;stroke:rgba(82,73,66,.6);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round;}
.netsketch .n-pencil2{fill:none;stroke:rgba(82,73,66,.22);stroke-width:.8;stroke-linejoin:round;}
.netsketch .n-sea{font-family:var(--display);font-style:italic;letter-spacing:.32em;fill:var(--material);text-transform:uppercase;pointer-events:none;}

.netsketch .n-arc{fill:none;stroke:var(--earth);stroke-width:1.2;stroke-dasharray:3 5;opacity:.75;transition:opacity .4s,stroke-width .4s;}
.netsketch .n-arc.flow{animation:n-march 1.6s linear infinite;}
@keyframes n-march{to{stroke-dashoffset:-16;}}
.netsketch .n-arc.soft{opacity:.45;}
.netsketch .n-arc.dim{opacity:.08;}
.netsketch .n-arc.hot{opacity:1;stroke-width:1.8;}

.netsketch .n-pt{cursor:pointer;outline:none;}
.netsketch .n-dot{fill:var(--material);transition:fill .25s;}
.netsketch .n-lbl{font-family:var(--display);letter-spacing:.1em;fill:var(--human);transition:fill .25s,opacity .4s;}
.netsketch .hub .n-dot,.netsketch .dest .n-dot,.netsketch .region .n-dot,.netsketch .n-pt.on .n-dot{fill:var(--earth);}
.netsketch .hub .n-lbl,.netsketch .n-pt.on .n-lbl,.netsketch .n-pt:focus-visible .n-lbl{fill:var(--earth);}
.netsketch .partner .n-dot{fill:var(--paper);stroke:var(--earth);stroke-width:1.4;}
.netsketch .regionlbl .n-lbl{letter-spacing:.42em;fill:var(--human);}
.netsketch .regionlbl:hover .n-lbl{fill:var(--earth);}
.netsketch .n-pt.dim .n-lbl{opacity:.3;}
.netsketch .n-ring,.netsketch .n-pulse{fill:none;stroke:var(--earth);stroke-width:1;pointer-events:none;}
.netsketch .n-parcel{fill:var(--earth);pointer-events:none;}

.netbar{display:flex;flex-wrap:wrap;gap:.8rem 1.5rem;justify-content:space-between;align-items:center;border:1px solid var(--human);border-top:0;padding:.9rem 1.2rem;font-size:.82rem;letter-spacing:.06em;}
.netbar strong{font-weight:400;color:var(--earth);font-size:1.25rem;font-variant-numeric:tabular-nums;}
.netctrls{display:flex;gap:.5rem;flex-wrap:wrap;}
.netctrls button{appearance:none;font:inherit;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--human);border:1px solid var(--line);padding:.5rem .75rem;cursor:pointer;transition:background .3s,border-color .3s;}
.netctrls button:hover{border-color:var(--earth);}
.netctrls button[aria-pressed=true]{background:var(--earth);border-color:var(--earth);color:var(--paper);}
.netnote{min-height:5.6rem;padding:1.1rem 1.2rem;border:1px solid var(--human);border-top:0;background:var(--paper);margin-bottom:2.4rem;}
.netnote h3{margin:0 0 .35rem;font-family:var(--display);font-weight:400;font-size:1.1rem;color:var(--ink);}
.netnote p{margin:0;font-size:.9rem;line-height:1.6;}
.netnote p span{color:var(--material);}
.netnote .fade{animation:n-note .5s cubic-bezier(.2,.7,.2,1);}
@keyframes n-note{from{opacity:0;transform:translateY(6px);}}

@media (max-width:680px){
  .netsteps{grid-template-columns:repeat(2,1fr);}
  .netstep:nth-child(3){border-left:0;}
  .netstep:nth-child(n+3){border-top:1px solid var(--human);}
  .netstep{padding:.75rem .8rem;} .netstep .ts{display:none;}
  .netstage{aspect-ratio:1/.75;}
  .netstage .netcap{display:none;}
  .netsketch .dest:not(.on) .n-lbl,.netsketch .partner:not(.on) .n-lbl{display:none;}
}
@media (prefers-reduced-motion:reduce){.netsketch .n-arc.flow{animation:none;}.netnote .fade{animation:none;}}