/* Blog Kodiranog svijeta — isti tokeni kao prototip, samo slog za dugi tekst. */

:root{
  --bg:#F1EDE4; --surface:#F8F5EE; --surface-hi:#FCFAF5;
  --ink:#1A1714; --ink-2:#5A544B; --ink-3:#8E877C;
  --line:rgba(26,23,20,.11); --line-2:rgba(26,23,20,.06);
  --accent:#D8E85A; --on-accent:#1A1714;
  --font:"Archivo","Segoe UI",system-ui,sans-serif;
  --font-em:"Fraunces",Georgia,serif;
  --font-mono:"Martian Mono","Consolas",monospace;
  --edge:clamp(18px,4.4vw,64px);
  --maxw:1240px;
  --proza:68ch;
  --out:cubic-bezier(.16,1,.3,1);
}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){
  --bg:#15130F; --surface:#1D1A15; --surface-hi:#252119;
  --ink:#F1EDE4; --ink-2:#A79F92; --ink-3:#7C756A;
  --line:rgba(241,237,228,.13); --line-2:rgba(241,237,228,.06);
}}
:root[data-theme="dark"]{
  --bg:#15130F; --surface:#1D1A15; --surface-hi:#252119;
  --ink:#F1EDE4; --ink-2:#A79F92; --ink-3:#7C756A;
  --line:rgba(241,237,228,.13); --line-2:rgba(241,237,228,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:3px}
.mono{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.11em;text-transform:uppercase;line-height:1.4}

/* ---------- traka ---------- */
.traka{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:clamp(14px,3vw,34px);flex-wrap:wrap;
  max-width:var(--maxw);margin-inline:auto;padding:14px var(--edge);
  background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);
}
.traka__brand{display:inline-flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;
  font-size:16px;font-variation-settings:"wght" 620,"wdth" 92;letter-spacing:-.005em;margin-right:auto}
.traka__brand svg{display:block;flex:none}
.traka__brand em{font-family:var(--font-em);font-style:italic;font-size:1.06em;
  font-variation-settings:"opsz" 20,"wght" 500}
.traka__nav{display:flex;align-items:center;gap:clamp(12px,2vw,24px);flex-wrap:wrap}
.traka__nav a{color:var(--ink-2);text-decoration:none;font-size:.9rem;transition:color .3s var(--out)}
.traka__nav a:hover{color:var(--ink)}
.traka__nav a[aria-current]{color:var(--ink)}
.traka__cta{background:var(--ink);color:var(--bg) !important;border-radius:999px;
  padding:9px 16px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.09em;text-transform:uppercase;
  transition:transform .34s var(--out)}
.traka__cta:hover{transform:translateY(-2px)}

/* ---------- popis zapisa ---------- */
.popis{max-width:var(--maxw);margin-inline:auto;padding:clamp(30px,6vw,72px) var(--edge) 0}
.popis__glava{max-width:34ch}
.popis__oko{display:flex;align-items:center;gap:9px;margin:0 0 16px;color:var(--ink-3)}
.popis__oko i{width:5px;height:5px;border-radius:50%;background:var(--accent);flex:none}
.popis h1{margin:0 0 16px;font-weight:400;font-variation-settings:"wght" 640,"wdth" 92;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.02;letter-spacing:-.035em}
.popis h1 em{font-family:var(--font-em);font-style:italic;font-variation-settings:"opsz" 144;font-weight:500}
.popis__lede{margin:0;color:var(--ink-2);max-width:56ch}

.zapisi{list-style:none;margin:clamp(34px,6vw,64px) 0 0;padding:0}
.zapis{border-top:1px solid var(--line-2)}
.zapis:last-child{border-bottom:1px solid var(--line-2)}
.zapis__veza{
  display:grid;grid-template-columns:auto 1fr auto;align-items:start;gap:clamp(14px,3vw,32px);
  padding:clamp(20px,3vw,30px) 0;text-decoration:none;color:var(--ink);
  transition:padding-left .45s var(--out);
}
.zapis__veza:hover{padding-left:10px}
.zapis__broj{color:var(--ink-3);padding-top:5px}
.zapis__tijelo{display:flex;flex-direction:column;gap:7px;min-width:0}
.zapis__oznaka{color:var(--ink-3)}
.zapis__naslov{font-size:clamp(1.2rem,2.4vw,1.62rem);line-height:1.18;letter-spacing:-.024em;
  font-variation-settings:"wght" 600,"wdth" 94}
.zapis__sazetak{color:var(--ink-2);max-width:60ch;font-size:.96rem}
.zapis__meta{color:var(--ink-3);display:flex;gap:8px;margin-top:3px}
.zapis__meta i{color:var(--line)}
.zapis__strelica{color:var(--ink-3);font-size:1rem;padding-top:4px;
  transition:transform .4s var(--out),color .4s var(--out)}
.zapis__veza:hover .zapis__strelica{transform:translate(3px,-3px);color:var(--ink)}

/* ---------- clanak ---------- */
.clanak{max-width:var(--maxw);margin-inline:auto;padding:clamp(30px,6vw,72px) var(--edge) 0}
.clanak__glava{max-width:var(--proza);padding-bottom:clamp(22px,3vw,34px);border-bottom:1px solid var(--line-2)}
.clanak__oko{display:flex;align-items:center;gap:9px;margin:0 0 16px;color:var(--ink-3)}
.clanak__oko a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:2px}
.clanak__oko a:hover{color:var(--ink);border-bottom-color:var(--accent)}
.clanak__oko i{color:var(--line)}
.clanak h1{margin:0 0 18px;font-weight:400;font-variation-settings:"wght" 640,"wdth" 92;
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.04;letter-spacing:-.034em;text-wrap:balance}
.clanak__lede{margin:0 0 18px;color:var(--ink-2);font-size:1.06rem;line-height:1.55;max-width:56ch}
.clanak__meta{margin:0;color:var(--ink-3);display:flex;gap:8px}
.clanak__meta i{color:var(--line)}
.clanak__natrag{margin:clamp(40px,6vw,72px) 0 0;padding-top:20px;border-top:1px solid var(--line-2);max-width:var(--proza)}
.clanak__natrag a{color:var(--ink-2);text-decoration:none;font-family:var(--font-mono);
  font-size:.6rem;letter-spacing:.09em;text-transform:uppercase}
.clanak__natrag a:hover{color:var(--ink)}

/* ---------- proza ---------- */
.proza{max-width:var(--proza);padding-top:clamp(24px,3.4vw,40px)}
.proza p{margin:0;color:var(--ink-2)}
/* razmak odlomka mora doci POSLIJE .proza p i s istom tezinom, inace ga
   "margin:0" gore pojede i tekst se zalijepi uz popis ili citat iznad */
.proza > * + p{margin-top:1.05em}
.proza h2{margin:1.9em 0 0;font-weight:400;font-variation-settings:"wght" 620,"wdth" 92;
  font-size:clamp(1.3rem,2.6vw,1.72rem);line-height:1.18;letter-spacing:-.026em;color:var(--ink)}
.proza h3{margin:1.5em 0 0;font-weight:400;font-variation-settings:"wght" 600,"wdth" 94;
  font-size:1.1rem;letter-spacing:-.018em;color:var(--ink)}
.proza strong{color:var(--ink);font-weight:400;font-variation-settings:"wght" 640}
.proza em{font-family:var(--font-em);font-style:italic;font-variation-settings:"opsz" 24;color:var(--ink)}
.proza a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.proza a:hover{border-bottom-color:var(--accent)}
.proza ul,.proza ol{margin:1.05em 0 0;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.proza li{color:var(--ink-2);padding-left:26px;position:relative}
.proza ul li::before{content:"";position:absolute;left:4px;top:.62em;
  width:8px;height:2px;border-radius:1px;background:var(--accent)}
.proza ol{counter-reset:r}
.proza ol li{counter-increment:r}
.proza ol li::before{content:counter(r,decimal-leading-zero);position:absolute;left:0;top:.06em;
  font-family:var(--font-mono);font-size:.58rem;letter-spacing:.08em;color:var(--ink-3)}
.proza blockquote{margin:1.6em 0 0;padding:2px 0 2px 20px;border-left:2px solid var(--accent)}
.proza blockquote p{color:var(--ink);font-size:1.08rem;line-height:1.5}
.proza code{font-family:var(--font-mono);font-size:.82em;background:var(--surface);
  border:1px solid var(--line-2);border-radius:5px;padding:1px 5px}
.proza hr{margin:2.2em 0 0;border:0;border-top:1px solid var(--line-2)}

/* ---------- dno ---------- */
.dno{max-width:var(--maxw);margin:clamp(50px,8vw,110px) auto 0;padding:clamp(28px,4vw,44px) var(--edge);
  border-top:1px solid var(--line-2);display:flex;align-items:center;gap:16px clamp(18px,3vw,34px);flex-wrap:wrap}
.dno__pitanje{margin:0;font-size:clamp(1.05rem,2.2vw,1.32rem);letter-spacing:-.02em;
  font-variation-settings:"wght" 600,"wdth" 94}
.dno__veza{display:inline-flex;align-items:center;gap:9px;margin-right:auto;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:4px;
  font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;text-transform:uppercase}
.dno__veza:hover{border-bottom-color:var(--accent)}
.dno__pravo{margin:0;color:var(--ink-3)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.001ms !important}
}


/* ---------- pravne stranice i 404 ---------- */
.clanak .eyebrow,.clanak .legal-meta{font-family:var(--font-mono);font-size:.6rem;
  letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);margin:0 0 14px}
.clanak h1{max-width:20ch}
.clanak .accent{font-family:var(--font-em);font-style:italic;
  font-variation-settings:"opsz" 144;font-weight:500}
.clanak .legal-intro{margin:0 0 10px;color:var(--ink-2);font-size:1.06rem;line-height:1.55;max-width:56ch}
.clanak section{max-width:var(--proza);margin-top:clamp(30px,4vw,48px)}
.clanak section h2{margin:0 0 14px;font-weight:400;
  font-variation-settings:"wght" 620,"wdth" 92;
  font-size:clamp(1.2rem,2.4vw,1.6rem);letter-spacing:-.024em;line-height:1.2}
.clanak section p{margin:0 0 12px;color:var(--ink-2);line-height:1.62}
.clanak section p:last-child{margin-bottom:0}
.clanak strong{color:var(--ink);font-weight:400;font-variation-settings:"wght" 640}
.clanak a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:1px}
.clanak a:hover{border-bottom-color:var(--accent)}
.clanak ul{max-width:var(--proza);margin:0 0 12px;padding-left:0;list-style:none;
  display:flex;flex-direction:column;gap:9px}
.clanak li{color:var(--ink-2);padding-left:26px;position:relative;line-height:1.6}
.clanak li::before{content:"";position:absolute;left:4px;top:.62em;
  width:8px;height:2px;border-radius:1px;background:var(--accent)}
.legal-card{border:1px solid var(--line-2);border-radius:16px;
  background:var(--surface);padding:clamp(20px,3vw,30px)}
.legal-back{margin-top:clamp(36px,5vw,60px);padding-top:20px;
  border-top:1px solid var(--line-2);max-width:var(--proza)}
.legal-back a{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.09em;
  text-transform:uppercase;border:0}
.stranica-404{min-height:52vh;display:flex;flex-direction:column;justify-content:center}
.stranica-404 .broj{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 16px}
.skip{position:absolute;left:-9999px}