/* The Ecosystem on the home page: a map of connected points, one panel of detail.
   Without JavaScript the map shows its points and every panel is listed below it. */
.eco{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); border:1px solid var(--rule-light);}
.eco-map{position:relative; aspect-ratio:4 / 3; border-right:1px solid var(--rule-light);
  background:
    radial-gradient(circle at 44% 50%, rgba(200,197,190,.22), rgba(200,197,190,0) 46%),
    linear-gradient(var(--rule-light) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, var(--rule-light) 1px, transparent 1px) 0 0 / 40px 40px;
  background-color:var(--white);
}
.eco-map::before{content:""; position:absolute; inset:0; background:rgba(255,255,255,.72); pointer-events:none;}
.eco-lines{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.eco-lines line{stroke:#CFCAC0; stroke-width:1; transition:stroke .35s var(--ease), opacity .35s var(--ease);}
.eco-lines line.dev{stroke-dasharray:3 4;}
.eco-lines line.on{stroke:var(--ink); stroke-width:1.3; stroke-dasharray:none;}
.eco-lines line.off{opacity:.45;}
.eco-lines line.on.dev{stroke-dasharray:4 4;}
.eco-lines .sig{fill:var(--ink); opacity:0;}

.eco-nodes{list-style:none; margin:0; padding:0; position:absolute; inset:0;}
.eco-node{position:absolute; left:var(--x); top:var(--y); transform:translate(-50%,-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  background:none; border:0; padding:6px; margin:0; cursor:pointer; color:var(--ink);
  font:600 11px/1.3 var(--display); letter-spacing:.12em; text-transform:uppercase; text-align:center;
  max-width:150px; z-index:1;}
.eco-node i{display:block; width:14px; height:14px; background:var(--ink); border:1px solid var(--ink);
  outline:1px solid transparent; outline-offset:5px;
  transition:transform .35s var(--ease), outline-color .35s var(--ease), background .35s var(--ease);}
.eco-node.md i{width:20px; height:20px;}
.eco-node.lg i{width:30px; height:30px; background:var(--ink); box-shadow:inset 0 0 0 7px var(--ink), inset 0 0 0 9px var(--platinum);}
.eco-node.dev i{background:var(--white);}
.eco-node span{background:rgba(255,255,255,.9); padding:1px 4px; color:var(--ink-label); transition:color .3s var(--ease);}
.eco-node:hover i,.eco-node:focus-visible i{transform:scale(1.18);}
.eco-node:hover span,.eco-node:focus-visible span{color:var(--ink);}
.eco-node:focus-visible{outline:none;}
.eco-node:focus-visible span{outline:1px solid var(--ink); outline-offset:2px;}
.eco-node[aria-pressed="true"] i{outline-color:var(--ink);}
.eco-node[aria-pressed="true"] span{color:var(--ink);}
.eco-node.dim span{color:#A9A59C;}
.eco-node.dim i{opacity:.55;}
.eco-node.dim.dev i{opacity:.7;}

.eco-legend{position:absolute; left:18px; bottom:12px; margin:0; display:flex; gap:18px;
  font:600 10px/1 var(--display); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-label); z-index:1;}
.eco-legend .k{display:inline-flex; align-items:center; gap:8px;}
.eco-legend i{display:inline-block; width:9px; height:9px; background:var(--ink); border:1px solid var(--ink);}
.eco-legend .dev i{background:var(--white);}

.eco-detail{padding:clamp(28px,3.2vw,44px); display:flex; flex-direction:column; justify-content:center; min-height:100%;}
.eco-panel h3{margin-bottom:14px;}
.eco-panel p{font-size:15px; line-height:1.75; color:var(--ink-body); margin:0;}
.eco-panel + .eco-panel{margin-top:36px; padding-top:36px; border-top:1px solid var(--rule-light);}
.js .eco-panel:not(.on){display:none;}
.js .eco-panel + .eco-panel{margin-top:0; padding-top:0; border-top:0;}
.js .eco-panel.on{animation:eco-in .45s var(--ease);}
@keyframes eco-in{from{opacity:0; transform:translateY(6px);}to{opacity:1; transform:none;}}
.eco-conn{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:22px !important; padding-top:18px; border-top:1px solid var(--rule-light);}
.eco-conn > span{width:100%; font:600 10px/1 var(--display); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-label);}
.eco-jump{background:none; border:1px solid var(--rule-light); padding:7px 11px; cursor:pointer; color:var(--ink);
  font:500 12px/1 var(--body); transition:border-color .25s var(--ease);}
.eco-jump:hover,.eco-jump:focus-visible{border-color:var(--ink); outline:none;}
html:not(.js) .eco-jump{display:none;}
html:not(.js) .eco-conn{display:none;}

@media (max-width:900px){
  .eco{grid-template-columns:1fr;}
  .eco-map{aspect-ratio:3 / 4; border-right:0; border-bottom:1px solid var(--rule-light);}
  .eco-node{left:var(--mx); top:var(--my); max-width:104px; font-size:10px; letter-spacing:.1em; gap:8px;}
  .eco-node.lg i{width:26px; height:26px; box-shadow:inset 0 0 0 6px var(--ink), inset 0 0 0 8px var(--platinum);}
  .eco-node.md i{width:18px; height:18px;}
  .eco-node i{width:12px; height:12px;}
  .eco-legend{left:14px; bottom:10px;}
  .eco-detail{min-height:0;}
}
@media (min-width:600px) and (max-width:900px){ .eco-map{aspect-ratio:1 / 1;} }
@media (prefers-reduced-motion: reduce){
  .js .eco-panel.on{animation:none;}
  .eco-node i{transition:none;}
}