/* Showroom „Styki” — instalacja z nici w kolorach księgi znaku STYKI (#12 v3).
   Jasna rama strony, ciemna „sala” z instalacją, typografia STYKI: wersaliki z szerokim światłem. */
:root{--ink:#1d2b2a;--paper:#f6f4ef;--line:#dcd7cd;--muted:#59625f;--night:#121a1a;--night-2:#18211f;--red:#b3261e;--serif:'Newsreader',Georgia,serif;--sans:'Open Sans',system-ui,-apple-system,Segoe UI,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit}button{font:inherit;color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--red);outline-offset:4px}
.top{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:14px clamp(20px,4vw,64px);border-bottom:1px solid var(--line);background:var(--paper)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;text-transform:uppercase;letter-spacing:.24em;font-size:.72rem;font-weight:600}
.brand img{height:40px;width:auto}
.tag{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.top .tag{text-decoration:none;letter-spacing:.08em;text-transform:none;font-size:.85rem}
.intro{display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:14px 48px;padding:48px clamp(20px,6vw,105px) 30px;max-width:1500px;margin:auto}
.intro h1{grid-row:1 / span 2;margin:0;font:300 clamp(2.2rem,4.6vw,3.8rem)/1 var(--sans);letter-spacing:.2em;text-transform:uppercase}
.intro p{margin:0;max-width:540px;color:var(--muted);font-size:.98rem}
.intro .lede{font:400 clamp(1.3rem,2vw,1.65rem)/1.3 var(--serif);color:var(--ink)}
.intro .lede em{color:#a8392c}
.atlas-guide{grid-column:3;grid-row:1 / span 2;align-self:end}
.atlas-guide button{border:1px solid var(--ink);background:transparent;padding:10px 18px;cursor:pointer;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.atlas-guide button[aria-pressed=true]{background:var(--ink);color:#fff}

/* Sala z instalacją */
.atlas-shell{position:relative;height:min(78vh,700px);min-height:560px;background:radial-gradient(ellipse at 50% 50%,#1b2524 0%,var(--night) 70%);overflow:hidden;color:#f3efe7}
.connections{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.connections line{fill:none;stroke-width:.7;stroke-linecap:round}
.thread{opacity:.42;transition:opacity .45s}
.spoke{opacity:.18;stroke-dasharray:2 5;transition:opacity .45s}
.ray line{opacity:.6;transition:opacity .45s}
.core-ray{stroke:#f3efe7;opacity:.55}
.core-dot{fill:var(--red)}
.connections.has-sel .pair .thread{opacity:.2}
.connections .pair.sel .thread{opacity:.78}
.connections .ray.sel line{opacity:1}
.connections.has-hov .pair .thread,.connections.has-hov .spoke{opacity:.07}
.connections.has-hov .ray line{opacity:.25}
.connections .pair.hov .thread{opacity:1}
.connections .spoke.hov,.connections .ray.hov line{opacity:1}
@keyframes draw-thread{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes breathe{0%,100%{filter:none}50%{filter:brightness(1.35)}}
.thread{stroke-dasharray:1;stroke-dashoffset:0;animation:draw-thread 2.2s cubic-bezier(.3,.6,.2,1) both;animation-delay:var(--d,0s)}
.pair{animation:breathe 9s ease-in-out infinite;animation-delay:var(--d,0s)}
.node{position:absolute;transform:translate(-50%,-8px);display:flex;flex-direction:column;align-items:center;gap:2px;width:190px;padding:0;background:none;border:0;cursor:pointer;text-align:center;z-index:2;color:#f3efe7}
.node:before{content:"";width:12px;height:12px;border-radius:50%;background:var(--night);border:1.5px solid var(--node-color);margin-bottom:12px;transition:transform .3s,background .3s}
.node strong{font:600 .72rem/1.35 var(--sans);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 0 12px var(--night),0 0 4px var(--night)}
.node span{font:italic 400 .95rem/1.25 var(--serif);color:#bdb7ab;text-shadow:0 0 10px var(--night)}
.node.label-up{flex-direction:column-reverse;transform:translate(-50%,calc(-100% + 8px))}
.node.label-up:before{margin:12px 0 0}
.node:hover:before,.node:focus-visible:before{transform:scale(1.3);background:var(--node-color)}
.node[aria-pressed=true]:before{background:var(--node-color);box-shadow:0 0 0 6px color-mix(in srgb,var(--node-color),transparent 78%)}
.node:focus-visible{outline:none}
.node:focus-visible strong{text-decoration:underline;text-underline-offset:5px}
.atlas-shell.story-mode .node:not([aria-pressed=true]){opacity:.5}

/* Opowieść */
.story-panel{display:flex;align-items:center;justify-content:space-between;gap:28px;padding:24px clamp(20px,6vw,105px);background:var(--night-2);color:#f3efe7;border-top:1px solid #ffffff14}
.story-panel[hidden]{display:none}
.story-panel .tag{color:#9fa7a3}
.story-panel h2{font:400 clamp(1.4rem,2.2vw,2rem)/1.2 var(--serif);margin:4px 0 6px}
.story-panel p{margin:0;max-width:760px;color:#cfd2cc;font-size:.96rem}
.story-panel button{flex-shrink:0;border:1px solid #f3efe7;background:transparent;padding:11px 18px;cursor:pointer;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}

/* Szczegóły wybranego punktu */
.detail-zone{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,6vw,90px);padding:48px clamp(20px,6vw,105px) 56px;max-width:1500px;margin:auto}
.detail{border-top:2px solid var(--c,var(--ink));padding-top:22px;overflow:hidden}
.detail h2{font:400 clamp(2rem,3.4vw,3rem)/1.08 var(--serif);margin:10px 0 6px}
.detail .sub{font:italic 400 1.2rem/1.4 var(--serif);color:var(--muted)}
.detail p{max-width:620px}
.detail aside{font-size:.85rem;color:var(--muted);margin-top:12px}
.detail .link{display:inline-block;margin-top:10px;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
.detail-cover{float:right;width:min(32%,190px);height:auto;margin:0 0 16px 28px;box-shadow:0 18px 40px #1d2b2a24}
.links{border-top:1px solid var(--line);padding-top:22px}
.links h3{margin:0 0 8px;font:600 .72rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.links button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);padding:13px 0 13px 18px;cursor:pointer;font:400 1.15rem var(--serif);position:relative}
.links button:before{content:"";position:absolute;left:0;top:22px;width:8px;height:8px;border-radius:50%;background:var(--c)}
.links button:hover{color:var(--red)}
.links small{display:block;font:400 .78rem var(--sans);color:var(--muted)}

/* Ekosystem: wszystkie pozycje */
.listing{background:#ece8e0;padding:46px clamp(20px,6vw,105px) 64px}
.listing-inner{max-width:1300px;margin:auto}
.listing h2{margin:0 0 20px;font:300 1rem var(--sans);letter-spacing:.24em;text-transform:uppercase}
.list-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:#d6d0c5;border:1px solid #d6d0c5}
.list-grid button{display:flex;flex-direction:column;gap:4px;text-align:left;background:var(--paper);border:0;border-top:3px solid var(--c);padding:18px 18px 20px;cursor:pointer;min-height:132px;transition:background .2s}
.list-grid button:hover{background:#fff}
.list-grid span{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.list-grid strong{font:400 1.3rem/1.2 var(--serif)}
.list-grid small{color:var(--muted);font-size:.8rem;margin-top:auto}
footer{display:flex;justify-content:space-between;gap:20px;padding:22px clamp(20px,6vw,105px);font-size:.8rem;color:var(--muted);border-top:1px solid var(--line)}

@media(max-width:900px){.intro{grid-template-columns:1fr}.intro h1{grid-row:auto}.atlas-guide{grid-column:auto;grid-row:auto}.detail-zone{grid-template-columns:1fr}.list-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.node{width:150px}}
@media(max-width:620px){
 .atlas-shell{height:700px;min-height:0}
 .node{width:128px}
 .node strong{font-size:.62rem;letter-spacing:.14em}
 .node span{font-size:.82rem}
 .story-panel{display:block}.story-panel button{margin-top:14px}
 .detail-cover{float:none;display:block;width:130px;margin:0 0 14px}
 .list-grid{grid-template-columns:1fr}
 .intro h1{font-size:2rem;letter-spacing:.16em}
 .top .brand span{display:none}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.list-grid .eco{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:18px;background:var(--night);color:#f3efe7;text-decoration:none;min-height:132px}
.list-grid .eco span{color:#9fa7a3}
.eco b{font:400 1.5rem/1 var(--sans);letter-spacing:.42em}
.eco i{font-style:normal}.eco i:nth-child(1){color:#f05aa0}.eco i:nth-child(2){color:#f06e64}.eco i:nth-child(3){color:#82c88c}.eco i:nth-child(4){color:#00b9c8}.eco i:nth-child(5){color:#4696d2}
.eco small{color:#cfd2cc;font-size:.8rem}
.eco:hover b{letter-spacing:.5em;transition:letter-spacing .4s}
/* v4: bez ramek, zwarte odstępy */
.top,footer{border:0}
.intro{padding-top:36px;padding-bottom:22px}
.detail-zone{padding-top:36px;padding-bottom:40px}
.links,.links button{border:0}
.links button{padding:9px 0 9px 18px}.links button:before{top:18px}
.listing{padding-top:36px;padding-bottom:48px}
.list-grid{gap:14px;background:none;border:0}
/* Kropka = wejście na stronę projektu */
.dot-link{position:absolute;width:30px;height:30px;transform:translate(-50%,-50%);border-radius:50%;z-index:3;display:block}
.dot-link:after{content:"↗";position:absolute;left:24px;top:-6px;font-size:.8rem;color:var(--node-color);opacity:0;transition:opacity .3s}
.dot-link:hover:after,.dot-link:focus-visible:after{opacity:1}
.dot-link:hover{box-shadow:0 0 0 1px var(--node-color)}
.dot-link:focus-visible{outline:2px solid var(--node-color);outline-offset:2px}
.list-grid .eco{grid-column:1 / -1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between}
@media(max-width:620px){.list-grid .eco{flex-direction:column;align-items:flex-start}.eco b{font-size:1.2rem;letter-spacing:.3em}}
.intro{grid-template-columns:auto minmax(0,1fr)}@media(max-width:900px){.intro{grid-template-columns:1fr}}
.top .tag{font-size:15px;font-weight:600;color:var(--ink)}