/* RAZGOVORI / TALKS — Galerija Brodac
   Samostalan stil sekcije; crno-bijelo, Archivo + IBM Plex Mono. */
:root{--bg:#000;--fg:#fff;--mute:#8a8a8a;--line:#2a2a2a;--pad:clamp(16px,4vw,48px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:400 17px/1.6 "IBM Plex Mono",ui-monospace,monospace}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto;filter:grayscale(1)}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.display{font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;text-transform:uppercase;line-height:.88;letter-spacing:-.01em}

/* header */
.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px var(--pad);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.top nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.top nav a{color:var(--mute);transition:color .2s}
.top nav a:hover,.top nav a[aria-current]{color:var(--fg)}
.brand{font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;font-size:22px;text-transform:uppercase;letter-spacing:.02em}
.lang a{border:1px solid var(--fg);padding:2px 8px}
.crumb{padding:14px var(--pad);color:var(--mute)}
.crumb a:hover{color:var(--fg)}

/* hero */
.hero{padding:clamp(40px,8vw,110px) var(--pad) clamp(28px,5vw,60px);border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(52px,13vw,200px);overflow-wrap:anywhere}
html,body{overflow-x:hidden}
.hero .sub{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:22px;color:var(--mute)}
.lede{max-width:46ch;padding:clamp(28px,5vw,60px) var(--pad);font-size:clamp(17px,1.6vw,21px)}

/* index list */
.list{border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:70px 1fr auto;align-items:baseline;gap:20px;padding:22px var(--pad);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.row .n{color:var(--mute)}
.row h2{font-size:clamp(40px,7vw,96px)}
.row .meta{color:var(--mute);text-align:right}
.row::before{content:"";position:absolute;inset:0;background:var(--fg);transform:scaleY(0);transform-origin:bottom;transition:transform .35s cubic-bezier(.7,0,.2,1);z-index:-1}
.row:hover{color:var(--bg)}
.row:hover .n,.row:hover .meta{color:var(--bg)}
.row:hover::before{transform:scaleY(1)}
.row .q{grid-column:2/4;color:var(--mute);max-width:60ch}
.row:hover .q{color:var(--bg)}
.soon{padding:22px var(--pad);color:var(--mute);border-bottom:1px solid var(--line)}

/* interview */
.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,60px);padding:clamp(28px,5vw,60px) var(--pad);border-bottom:1px solid var(--line)}
.intro .facts{color:var(--mute)}
.intro .facts dt{color:var(--fg);margin-top:14px}
.intro .facts dt:first-child{margin-top:0}
.intro p{max-width:62ch}
.intro p+p{margin-top:1em}
.intro .links{margin-top:22px;display:flex;flex-wrap:wrap;gap:10px}
.btn{border:1px solid var(--fg);padding:8px 14px;transition:background .2s,color .2s}
.btn:hover{background:var(--fg);color:var(--bg)}

.qa{border-bottom:1px solid var(--line);padding:clamp(34px,6vw,80px) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(20px,4vw,60px)}
.qa .num{font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;font-size:clamp(80px,12vw,180px);line-height:.8;color:transparent;-webkit-text-stroke:1px var(--fg)}
.qa h2{font-family:"Archivo",sans-serif;font-stretch:75%;font-weight:700;font-size:clamp(26px,3.2vw,42px);line-height:1.02;text-transform:uppercase;margin-bottom:14px}
.qa .ctx{color:var(--mute);font-size:14px;max-width:60ch;margin-bottom:30px}
.qa .ans p{max-width:62ch}
.qa .ans p+p{margin-top:1em}
.pull{padding:clamp(40px,8vw,110px) var(--pad);border-bottom:1px solid var(--line)}
.pull blockquote{font-family:"Archivo",sans-serif;font-stretch:62%;font-weight:800;text-transform:uppercase;font-size:clamp(40px,7.4vw,112px);line-height:.92;max-width:16ch}
.pull cite{display:block;margin-top:22px;font-style:normal;color:var(--mute)}

.plates{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.plates figure{background:var(--bg);padding:var(--pad) var(--pad) 18px}
.plates figcaption{margin-top:10px;color:var(--mute)}

.next{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:26px var(--pad);border-bottom:1px solid var(--line)}
.next a:hover{text-decoration:underline}
footer{padding:26px var(--pad) 40px;color:var(--mute);display:flex;flex-wrap:wrap;gap:8px 28px}
footer a:hover{color:var(--fg)}

/* motion */
.rv{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.hero h1 span{display:inline-block;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.08s}
@keyframes rise{from{transform:translateY(40%);opacity:0}to{transform:none;opacity:1}}
.progress{position:fixed;left:0;top:0;height:2px;background:var(--fg);width:0;z-index:10}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.hero h1 span{animation:none}}

@media (max-width:760px){
  body{font-size:16px}
  .top{flex-wrap:wrap}
  .intro,.qa{grid-template-columns:1fr}
  .row{grid-template-columns:44px 1fr}
  .row .meta{grid-column:2;text-align:left}
  .row .q{grid-column:2}
}

/* v2 — radovi, portret, lightbox */
img{filter:none}
.lede{max-width:none;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(18px,3vw,48px)}
.lede p{max-width:48ch}
.row{grid-template-columns:70px 1fr auto 120px}
.row .thumb{grid-row:1/3;grid-column:4;width:120px;height:150px;object-fit:cover;opacity:.85;transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .3s}
.row:hover .thumb{transform:scale(1.04);opacity:1}
.row .q{grid-column:2/4}
.hero-talk .kicker{color:var(--mute);margin-bottom:18px}
.standfirst{margin-top:clamp(22px,3vw,40px);max-width:40ch;font-family:"Archivo",sans-serif;font-stretch:87%;font-weight:500;font-size:clamp(20px,2.1vw,30px);line-height:1.25}
.label{color:var(--mute);margin-bottom:14px}
.intro aside{display:flex;flex-direction:column;gap:24px}
.portrait img{width:100%;max-width:420px;aspect-ratio:1/1;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.portrait figcaption{margin-top:8px;color:var(--mute)}
.plates{display:grid;gap:clamp(16px,3vw,40px);padding:clamp(28px,5vw,70px) var(--pad);background:none;border-bottom:1px solid var(--line)}
.plates.two{grid-template-columns:1fr 1fr;align-items:end}
.plates.one,.plates.lead{justify-items:center}
.plates.one .work{width:min(100%,640px)}
.plates.lead .work{width:min(100%,760px)}
.work{background:none;padding:0}
.work a{display:block;overflow:hidden;cursor:zoom-in}
.work img{width:100%;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.work a:hover img{transform:scale(1.025)}
.work figcaption{margin-top:10px;color:var(--mute)}
.lb{position:fixed;inset:0;background:rgba(0,0,0,.96);z-index:50;display:flex;align-items:center;justify-content:center;padding:56px 64px}
.lb[hidden]{display:none}
.lb img{max-width:100%;max-height:100%;object-fit:contain;animation:lbin .35s ease both}
@keyframes lbin{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}
.lb button{position:absolute;background:none;border:1px solid var(--fg);color:var(--fg);width:40px;height:40px;cursor:pointer;font-size:16px}
.lb button:hover{background:var(--fg);color:var(--bg)}
.lb-x{top:12px;right:12px}.lb-p{left:12px;top:50%}.lb-n{right:12px;top:50%}
.lb-c{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:var(--mute)}
@media (max-width:760px){
  .plates.two{grid-template-columns:1fr}
  .row{grid-template-columns:44px 1fr 84px}
  .row .thumb{grid-column:3;grid-row:1/4;width:84px;height:106px}
  .row .meta,.row .q{grid-column:2}
  .lb{padding:56px 12px}
  .lb-p,.lb-n{top:auto;bottom:10px}
  .portrait img{max-width:none}
}