:root{
  --paper:#eeedea; --card:#f8f8f6; --ink:#14140f; --muted:#77756d;
  --hair:#c8c6bf; --signal:#1f3fe0;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --gut:48px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;
     line-height:1.55;-webkit-font-smoothing:antialiased}
.site{max-width:1500px;margin:0 auto;padding:0 var(--gut)}

.top{display:flex;align-items:baseline;gap:40px;padding:28px 0 16px}
.name{font-size:23px;font-weight:400;letter-spacing:-.025em;margin:0;white-space:nowrap}
.name a{color:inherit;text-decoration:none}
nav{display:flex;gap:26px;flex:1}
nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);white-space:nowrap;
      text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
nav a:hover{color:var(--ink)}
nav a[aria-current]{color:var(--ink);border-bottom-color:var(--ink)}
.lang{font-family:var(--mono);font-size:11px;color:var(--muted);display:flex;gap:3px}
.lang button{font:inherit;background:none;border:0;padding:0 1px;cursor:pointer;color:var(--muted)}
.lang button[aria-pressed="true"]{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lang i{font-style:normal;opacity:.5}
.hair{height:1px;background:var(--hair)}

/* ---------- popis radova kao izbornik ---------- */
.works{list-style:none;margin:0;padding:64px 0 0;max-width:70ch}
.work{border-bottom:1px solid var(--hair)}
.work > *{display:flex;align-items:baseline;gap:20px;padding:22px 2px;text-decoration:none;color:inherit}
.work a:hover .w-title{border-bottom-color:var(--ink)}
.work a:hover .w-go{opacity:1;transform:translateX(0)}
.w-no{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
      flex:0 0 auto;width:2.5em}
.w-title{font-size:34px;font-weight:400;letter-spacing:-.025em;line-height:1.05;
         border-bottom:1px solid transparent;transition:border-color .25s ease}
.w-year{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
        margin-left:auto;flex:0 0 auto;white-space:nowrap}
.w-go{font-family:var(--mono);font-size:12px;color:var(--signal);opacity:0;
      transform:translateX(-6px);transition:opacity .25s ease,transform .25s ease;flex:0 0 auto}
.work.soon > div{cursor:default}
.work.soon .w-title{color:var(--muted)}
.work.soon .w-year{opacity:.75}
.w-soon{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--muted);flex:0 0 auto}

footer{padding:26px 0 44px;margin-top:70px;font-family:var(--mono);font-size:10.5px;color:var(--muted);
       letter-spacing:.05em;display:flex;justify-content:space-between;border-top:1px solid var(--hair)}

@media (max-width:900px){
  :root{--gut:20px}
  .top{flex-wrap:wrap;gap:14px}
  nav{order:3;flex:1 1 100%;flex-wrap:wrap;gap:12px 18px;overflow:visible}
  .works{padding-top:34px}
  .w-title{font-size:25px}
  .work > *{gap:12px;padding:18px 2px;flex-wrap:wrap}
  .w-year{margin-left:0;flex:1 1 100%}
}

/* ---------- stranica pojedinog rada ---------- */
.rad-head{padding:64px 0 0;max-width:72ch}
.rad-back{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--muted);
          text-decoration:none;display:inline-block;margin-bottom:26px}
.rad-back:hover{color:var(--ink)}
.rad-title{font-size:38px;font-weight:400;letter-spacing:-.025em;line-height:1.05;margin:0}
.rad-meta{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);margin:12px 0 0}
.rad-body{margin:22px 0 0;font-size:15px;color:#42423a;max-width:56ch;white-space:pre-line}
.rad-empty{margin:40px 0 0;padding:26px 0;border-top:1px solid var(--hair);
           font-family:var(--mono);font-size:11px;letter-spacing:.05em;color:var(--muted);line-height:1.8}
.rad-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin:40px 0 0}
.rad-shots img{width:100%;height:auto;display:block;background:var(--card)}

/* ---------- video i tekst rada ---------- */
.rad-video{margin:40px 0 0}
.vid-frame{position:relative;width:100%;padding-top:56.25%;background:#14140f;overflow:hidden}
.vid-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vid-cap{display:flex;gap:16px;flex-wrap:wrap;margin:10px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted)}
.vid-cap a{color:var(--signal);text-decoration:none}
.rad-text{margin:30px 0 0;font-size:15px;line-height:1.7;color:#42423a;max-width:62ch;white-space:pre-line}
.rad-credit{margin:18px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted);max-width:62ch;line-height:1.7}
@media (max-width:900px){ .rad-text{font-size:14.5px} }