:root{color-scheme:dark;--bg:#0b0c0c;--surface:#141515;--text:#e9e7e2;--muted:#a2a39f;--accent:#ef941b;--line:#303130;--ease:cubic-bezier(.22,1,.36,1)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;-webkit-font-smoothing:antialiased}body{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,#map:focus-visible{outline:1px solid var(--accent);outline-offset:6px}button:hover,a:hover{color:#fff}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}.skip{position:fixed;top:-100px;left:30px;background:var(--surface);padding:15px;z-index:100}.skip:focus{top:0}
.header{position:fixed;inset:0 0 auto;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 35px;z-index:10;background:var(--bg)}.signature,.header nav{font-size:14px;letter-spacing:-.15px}.header nav{display:flex;gap:38px;align-items:center}.nav-link{position:relative;display:flex;align-items:center;min-height:44px;color:var(--muted)}.nav-link.active{color:var(--text)}.nav-link.active:after{content:'';position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);bottom:0;left:calc(50% - 2px)}
#gallery{position:fixed;inset:72px 0 115px;outline:none}#map{width:100%;height:100%;position:relative;overflow:hidden;cursor:grab;touch-action:none;outline-offset:-6px}#map.dragging,#map.dragging *{cursor:grabbing!important}#world{position:absolute;width:1720px;height:840px;transform-origin:0 0;will-change:transform}.work{position:absolute;width:var(--w);left:var(--x);top:var(--y);transform:rotate(var(--rot));text-align:left;padding:0;z-index:2;overflow:visible;cursor:pointer;isolation:isolate}.work[data-slot=ravnoteza]{z-index:5}.work[data-slot=plan]{z-index:4}.art{height:var(--h);position:relative;background:#141515;overflow:hidden;transform:translate(var(--px,0px),var(--py,0px));transition:transform .3s var(--ease),box-shadow .3s;box-shadow:0 12px 50px #0002}.art img{width:100%;height:100%;object-fit:cover;display:block;object-position:var(--pos,50% 50%);transition:transform .7s var(--ease);pointer-events:none}.art.crop img{transform:scale(1.7)}.art.mono img{filter:grayscale(1)}.work:hover .art{transform:translate(var(--px,0px),var(--py,0px)) scale(1.018);box-shadow:0 18px 55px #0006}.work:hover .art img{transform:scale(1.025)}.work:hover .art.crop img{transform:scale(1.73)}.work:focus-visible{z-index:8}.caption{display:flex;justify-content:space-between;gap:12px;margin-top:14px;transform:rotate(calc(var(--rot) * -1));transform-origin:top left;font-size:14px;line-height:1.55}.caption{font-size:calc(14px / var(--view-scale,1))}.caption small{display:block;font-size:calc(13px / var(--view-scale,1));color:var(--muted)}.caption .arrow{opacity:0;transition:opacity .2s,transform .2s;transform:translate(-4px,4px);font-size:20px}.work:hover .arrow,.work:focus-visible .arrow{opacity:1;transform:translate(0,0)}.work.entering{animation:enter .9s var(--ease) both;animation-delay:var(--delay)}@keyframes enter{from{opacity:0;translate:0 20px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
.demo-note{position:fixed;bottom:116px;right:35px;font-size:12px;letter-spacing:.03em;color:#9a9b96;margin:0;pointer-events:none}.demo-note span{opacity:.7}.toolbar{position:fixed;bottom:0;left:0;right:0;height:115px;z-index:10;background:var(--bg);display:flex;align-items:center;padding:10px 35px 20px;gap:28px}.toolbar button{min-width:44px;min-height:44px}#minimap{padding:0;width:155px;height:78px;min-width:155px;border:1px solid #3d3e3b}#minimap svg{width:100%;height:100%;display:block}.view-switch{position:absolute;left:50%;top:15px;transform:translateX(-50%);text-align:center}.view-switch>div{display:flex;align-items:center;gap:8px;white-space:nowrap}.view-switch button{font-size:14px;color:var(--muted);padding:0 12px}.view-switch button[aria-pressed=true]{color:var(--text)}.view-switch i{display:inline-block;width:12px;height:12px;border-radius:50%;border:1px solid #777;margin-right:12px;vertical-align:-1px}.view-switch [aria-pressed=true] i{background:var(--accent);border-color:var(--accent)}.slash{color:#62635f;font-size:12px}#hint{display:flex;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin:8px 0 0;transition:opacity .35s}#hint.used{opacity:0}#hint span{font-size:18px;line-height:12px}.zoom{margin-left:auto;display:flex;gap:4px}.zoom button{border:1px solid #3d3e3b;border-radius:50%;font-size:23px;width:44px;height:44px;transition:border-color .2s,background .2s}.zoom button:hover{border-color:var(--accent);background:#181a18}.social{font-size:13px;white-space:nowrap;margin-left:15px}.social span{margin-left:8px}.toolbar.overview #minimap,.toolbar.overview .zoom{visibility:hidden}.toolbar.overview #hint{opacity:0}
#overview{height:100%;overflow:auto;padding:30px 5vw 70px;scrollbar-width:thin;scrollbar-color:#444 transparent}.overview-heading{display:flex;justify-content:space-between;gap:25px;align-items:center;margin:10px 0 40px}h1{font-size:20px;font-weight:400;margin:0}.overview-heading h1 span{font-size:12px;color:var(--muted);margin-left:12px}#filters{display:flex;gap:16px;flex-wrap:wrap}#filters button{font-size:13px;min-height:44px;color:var(--muted);border-bottom:1px solid transparent}#filters [aria-pressed=true]{color:var(--text);border-bottom-color:var(--accent)}#grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:36px;row-gap:55px;align-items:start}#grid .work{position:relative;left:auto;top:auto;width:100%;transform:none;--rot:0deg!important;animation:enter .5s var(--ease) both}#grid .art{height:auto;aspect-ratio:var(--ratio)}#grid .work:nth-child(3n+2){margin-top:70px}#grid .caption{transform:none}.plan-ui{width:100%;height:100%;background:#101211;border:1px solid #343634;padding:24px;overflow:hidden;color:#c7c9c2;font-size:10px;pointer-events:none}.plan-top{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #292c29;padding-bottom:22px;gap:16px}.plan-top strong{font-size:16px;font-weight:400;color:#f0eee7}.plan-top span{font-size:9px;white-space:nowrap}.plan-top .selected{color:#fff;position:relative}.plan-top .selected:after{content:'';height:1px;background:var(--accent);position:absolute;inset:auto 0 -12px}.plan-plus{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#141515;border-radius:50%;width:23px;height:23px;font-size:19px}.plan-body{display:flex;height:calc(100% - 43px);padding-top:20px}.plan-side{width:80px;flex-shrink:0;display:flex;flex-direction:column;gap:22px;font-size:9px}.plan-side span:first-child{color:#f4a532}.timeline{position:relative;flex:1;display:flex;justify-content:space-around;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(20% - 1px),#222522 calc(20% - 1px),#222522 20%);font-size:9px}.task{position:absolute;display:flex;align-items:center;gap:10px;width:56%;height:42px;left:2%;top:34px;background:#20231f;border:1px solid #363b33;box-shadow:0 6px 15px #0004}.task img{width:37%!important;height:100%!important;object-fit:cover!important;filter:grayscale(1)}.task:nth-last-child(2){left:23%;top:90px}.task:last-child{left:42%;top:145px}.time-line{position:absolute;top:30px;bottom:0;width:1px;background:#bf791f;left:67%}.time-line:before{content:'';position:absolute;top:0;left:-2px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
dialog{color:var(--text);border:1px solid #333630;padding:0;background:#0e100f;max-width:100vw;max-height:100dvh;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#555 transparent}dialog::backdrop{background:#030403eb;backdrop-filter:blur(9px)}dialog[open]{animation:dialog-in .45s var(--ease)}@keyframes dialog-in{from{opacity:0;translate:0 15px}to{opacity:1;translate:0 0}}#detail{width:min(1260px,94vw);height:92dvh}.dialog-head{height:72px;padding:0 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #272a25;position:sticky;top:0;background:#0e100ff5;z-index:5;font-size:13px;color:var(--muted)}.close{min-height:44px;display:flex;gap:18px;align-items:center;font-size:13px}.close span{font-size:25px}#detail-content{padding:30px 5vw 15px}.detail-art{max-width:100%;height:58dvh;display:flex;justify-content:center;align-items:center;position:relative}.detail-art>img{width:100%;height:100%;object-fit:contain;display:block}.detail-art .plan-ui{width:min(850px,100%);height:100%;min-height:320px;font-size:13px}.detail-art .plan-top{padding:25px 10px}.detail-art .timeline{font-size:13px}.detail-art .task{height:65px;top:55px}.detail-art .task:nth-last-child(2){top:140px}.detail-art .task:last-child{top:225px}.detail-copy{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:35px auto 15px;max-width:950px}.detail-copy h1{font-size:25px;line-height:1.4}.detail-copy .category{font-size:13px;color:var(--muted);margin:8px 0}.detail-copy p{font-size:16px;line-height:1.7;color:#b6b9b0;margin:0}.sample-label{display:block;font-size:12px;line-height:1.6;margin-top:16px;color:#a4a698}.project-nav{border-top:1px solid #30332d;padding:18px 30px;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}.project-nav button{min-height:44px}.project-nav span{font-size:12px}.project-nav button:hover{color:var(--accent)}#info{width:min(850px,92vw)}#info-content{padding:70px 8%;min-height:360px}#info h1{font-size:34px;font-weight:400;margin-bottom:30px}#info p{font-size:18px;line-height:1.8;color:#b5b8af;max-width:610px}#info .eyebrow{font-size:12px;letter-spacing:.15em;color:var(--accent);text-transform:uppercase}#info .contact-link{display:block;padding:24px 0;border-bottom:1px solid var(--line);font-size:18px}#info .contact-link span{float:right;color:var(--accent)}#info .pending{font-size:14px;color:var(--muted)}.transition-clone{position:fixed;z-index:1000;pointer-events:none;object-fit:cover;transform-origin:top left}.no-js{position:fixed;inset:72px 0 0;overflow:auto;z-index:50;background:var(--bg);padding:30px}.no-js img{max-width:32%;height:400px;object-fit:contain}
@media(min-width:1700px){.header{height:84px}#gallery{top:84px}.toolbar{height:125px}#gallery{bottom:125px}.demo-note{bottom:126px}}
@media(max-width:1100px){.social{max-width:140px;white-space:normal;line-height:1.5;font-size:12px}.toolbar{gap:14px;padding-left:24px;padding-right:24px}#minimap{width:120px;min-width:120px;height:66px}.zoom{gap:3px}.zoom button{width:40px}.overview-heading{display:block}#filters{margin-top:25px}#grid{gap:35px 25px}.plan-ui{padding:18px}}
@media(max-width:760px){body{overflow:auto}.header{height:72px;padding:0 20px}.header nav{gap:20px;font-size:13px}.signature{font-size:13px}.nav-link.active:after{bottom:0}#gallery{position:relative;inset:auto;margin-top:72px;padding-bottom:100px}#map{display:none}#overview{height:auto;overflow:visible;padding:25px 20px 50px}.overview-heading{margin:0 0 30px}.overview-heading h1{font-size:16px}.overview-heading h1 span{font-size:12px}#filters{gap:7px 19px;margin-top:18px}#filters button{font-size:12px}#grid{display:block}#grid .work{display:block;margin:0 0 45px;width:100%}#grid .work:nth-child(3n+2){margin-top:0;width:94%;margin-left:auto}#grid .work:nth-child(3n){width:77%;margin-left:6%}#grid .work[data-slot=plan]{width:100%;margin-left:0}#grid .work[data-slot=svjetlo]{width:72%;margin-left:auto}#grid .art{max-height:70dvh}#grid .caption{font-size:14px}.caption .arrow{opacity:1;font-size:16px}.toolbar{height:72px;padding:8px 20px calc(8px + env(safe-area-inset-bottom));border-top:1px solid #252722;justify-content:space-between}.toolbar #minimap,.toolbar .zoom,.toolbar .view-switch{display:none}.social{max-width:none;font-size:12px;margin:0}.toolbar:before{content:'grzunov.com';font-size:12px;color:var(--muted)}.demo-note{position:static;font-size:12px;padding:0 20px}.plan-ui{padding:16px}.plan-top{gap:9px;padding-bottom:15px}.plan-top span{font-size:7px}.plan-top strong{font-size:12px}.plan-side{width:57px;font-size:7px;gap:18px}.plan-body{padding-top:14px}.timeline{font-size:7px}.task{height:29px;top:24px;gap:5px;font-size:6px}.task:nth-last-child(2){top:62px}.task:last-child{top:100px}.plan-plus{width:16px;height:16px;font-size:14px}#detail{width:100vw;height:100dvh;max-height:100dvh;border:0}.dialog-head{height:66px;padding:0 20px}#detail-content{padding:20px}.detail-art{height:54dvh}.detail-copy{display:block;margin:28px 0}.detail-copy h1{font-size:24px}.detail-copy p{font-size:16px;margin-top:20px}.project-nav{padding:10px 20px}.detail-art .plan-ui{height:235px;min-height:0}.detail-art .plan-top{padding:10px 0 18px}.detail-art .timeline{font-size:8px}.detail-art .task{height:33px;top:25px}.detail-art .task:nth-last-child(2){top:68px}.detail-art .task:last-child{top:111px}#info-content{padding:45px 25px}#info h1{font-size:28px}#info p{font-size:16px}.no-js img{max-width:100%;width:100%;height:auto}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.work:hover .art{transform:none}.art{transform:none!important}}

.signature{display:flex;align-items:center;min-height:44px}

/* Profinjena prostorna kompozicija: radovi se nastavljaju izvan kadra. */
body{font-family:'Avenir Next','Segoe UI','Helvetica Neue',sans-serif}
.header{height:64px;padding:0 32px;background:transparent}
.header:after{content:'';position:absolute;bottom:0;left:32px;right:32px;height:1px;background:#e9e7e208;pointer-events:none}
.signature,.header nav{font-size:13px;font-weight:400;letter-spacing:.01em}
.header nav{gap:38px}.nav-link.active:after{width:4px;height:4px;bottom:3px}
#gallery{top:64px;bottom:102px}
#world{perspective:1800px;perspective-origin:50% 42%}
.work{transform:rotate(var(--rot)) rotateY(var(--tilt,0deg));transform-style:preserve-3d}
.work[data-slot=perspektiva]{--rot:2deg!important;--tilt:-3deg}
.work[data-slot=obala]{--rot:1.8deg!important;--tilt:-2deg}
.work[data-slot=ravnoteza]{--rot:3deg!important;--tilt:-3deg}
.work[data-slot=plan]{--rot:2deg!important;--tilt:-5deg}
.art{box-shadow:0 20px 70px #0008;transition:transform .65s var(--ease),box-shadow .65s var(--ease)}
.art:after{content:'';position:absolute;inset:0;border:1px solid #ffffff0c;pointer-events:none}
.work:hover .art{transform:translate(var(--px,0px),var(--py,0px)) scale(1.012);box-shadow:0 28px 80px #000a}
.caption{font-size:calc(13px / var(--view-scale,1));margin-top:16px;line-height:1.7;letter-spacing:.005em}
.caption small{font-size:calc(12px / var(--view-scale,1));color:#95968f;letter-spacing:.025em}
.serial{font-size:.88em;font-variant-numeric:tabular-nums;color:#c3c3b8}.sep{color:#707267;padding:0 4px}
.toolbar{height:102px;padding:8px 32px 18px;background:#0b0c0cf7}
#minimap{width:124px;min-width:124px;height:65px;border-color:#ffffff20;opacity:.8;transition:opacity .3s}
#minimap:hover{opacity:1}.view-switch{top:8px}.view-switch button{font-size:13px}.view-switch i{width:9px;height:9px;margin-right:10px}#hint{font-size:12px;color:#81847b;letter-spacing:.02em}
.zoom{gap:8px}.zoom button{width:36px;height:36px;min-width:36px;min-height:36px;font-size:20px;border-color:#ffffff25}.zoom #reset{border-color:transparent;font-size:23px;margin-right:5px}.social{font-size:12px;margin-left:28px;letter-spacing:.015em}
.demo-note{bottom:108px;right:32px;font-size:12px;color:#77796f}.demo-note span{display:none}
#grid .work{--tilt:0deg;--rot:0deg!important;transform:none}
.dialog-head{letter-spacing:.03em}.detail-copy h1{font-weight:400;letter-spacing:-.04em}.detail-copy p{font-size:16px;font-weight:400}
@media(max-width:760px){.header{padding:0 20px;height:72px;background:var(--bg)}.header:after{left:20px;right:20px}.header nav{gap:18px;font-size:12px}.signature{font-size:12px}#gallery{top:auto;bottom:auto}.toolbar{height:72px;padding:8px 20px}.social{margin-left:0;font-size:11px}.demo-note{position:static}.caption{font-size:14px}.caption small{font-size:12px}.work{--tilt:0deg!important}.zoom button{min-width:44px;min-height:44px}}

#world .work[data-slot=obala] .caption{justify-content:flex-end;text-align:right}#world .work[data-slot=obala] .caption .arrow{display:none}#world .work[data-slot=ravnoteza] .art img{object-fit:fill}

#world .work[data-slot=identitet] .caption{padding-left:45px}