:root{
  --paper:#efece4;--ink:#0d0d0f;--ink2:#3a3a42;--ink3:#6f6f7a;
  --line:#c9c4b7;--panel:#f7f5ef;--panelalt:#e6e2d7;
  --acc:#e0004d;--acc2:#0060ff;--acc3:#8a8f00;--grid:rgba(0,0,0,.055);
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --disp:"Archivo Black","Helvetica Neue",Impact,sans-serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;--maxw:1280px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#08090b;--ink:#e9e7e0;--ink2:#b3b1ab;--ink3:#7c7a76;--line:#26272c;
  --panel:#0e1013;--panelalt:#131519;--acc:#ff2d55;--acc2:#25d0ff;--acc3:#c9ff00;--grid:rgba(255,255,255,.05)}}
:root[data-theme="dark"]{--paper:#08090b;--ink:#e9e7e0;--ink2:#b3b1ab;--ink3:#7c7a76;--line:#26272c;
  --panel:#0e1013;--panelalt:#131519;--acc:#ff2d55;--acc2:#25d0ff;--acc3:#c9ff00;--grid:rgba(255,255,255,.05)}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:15px/1.6 var(--sans);overflow-wrap:anywhere;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(127,127,127,.06) 0 1px,transparent 1px 3px)}
a{color:inherit;text-decoration-color:var(--acc);text-underline-offset:2px}
a:hover{color:var(--acc)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.tiny{font:500 10px/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
h1,h2{font-family:var(--disp);font-weight:400;letter-spacing:-.01em;line-height:1.05}
h1{font-size:clamp(34px,6vw,72px);margin:.1em 0}
h2{font-size:clamp(22px,3vw,32px);margin:2.2em 0 .6em;padding-top:.4em;border-top:2px solid var(--ink)}
h3{font:600 15px/1.35 var(--mono);margin:1.6em 0 .5em}
code{font:13px var(--mono);background:var(--panelalt);padding:0 .3em}
blockquote{margin:1em 0;padding:.2em 1em;border-left:3px solid var(--acc);color:var(--ink2)}
.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;height:48px}
.logo{font:22px var(--disp);text-decoration:none;letter-spacing:.02em;
  text-shadow:2px 0 var(--acc),-2px 0 var(--acc2)}
.top nav{display:flex;gap:18px;align-items:center;font:500 12px var(--mono);text-transform:uppercase}
.top nav a{text-decoration:none}
button{font:500 11px var(--mono);background:var(--panel);color:var(--ink);border:1px solid var(--line);
  padding:3px 8px;cursor:pointer}button:hover{border-color:var(--acc)}
footer{padding:48px 16px}
.lead{padding:40px 0 8px}.tagline{font-size:18px;max-width:60ch;color:var(--ink2)}
.untr{font:12px var(--mono);background:var(--acc);color:var(--paper);padding:6px 10px;margin:12px 0}
/* indeks */
.era h2 span{background:var(--ink);color:var(--paper);padding:0 .25em}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.card{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);padding:10px}
.card:hover{border-color:var(--acc)}.card h3{margin:.5em 0 0}.card p{margin:.2em 0;font-size:13px;color:var(--ink2)}
.thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--panelalt)}
.thumbs img{width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.1);display:block}
.card:hover .thumbs img{filter:none}
/* dizajner */
.hero{display:grid;grid-template-columns:minmax(0,220px) 1fr;gap:24px;padding-top:32px;align-items:end}
/* bez portreta: tekst je prvo dijete i upao bi u usku kolonu portreta - raširi ga preko obje */
.hero>div:first-child{grid-column:1/-1}
.hero h1{overflow-wrap:normal;hyphens:manual;max-width:14ch}
.hero .por img{width:100%;filter:grayscale(1) contrast(1.15);display:block}
.hero .meta{font:13px var(--mono);color:var(--ink2)}
.intro{max-width:70ch;margin-top:16px}
.toc{display:flex;flex-wrap:wrap;gap:6px 14px;margin:24px 0;font:12px var(--mono);border-block:1px solid var(--line);padding:8px 0}
section>p,section>ul,section>ol,section>blockquote,.wtxt,.intro,.pr{max-width:78ch}
.ut{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;font-size:14px}
.ut ul{padding-left:1.1em;margin:.3em 0}.rev a{margin-right:12px;font:13px var(--mono)}
.work{border-top:1px solid var(--line);padding-top:8px}
.wgrid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:28px}
.wk{margin:0;background:var(--panelalt);min-height:120px;display:flex;align-items:center;justify-content:center}
.wk img{max-width:100%;max-height:560px;display:block;cursor:zoom-in}
.wk.noimg{min-height:80px;font:12px var(--mono)}
.imgfail{font:12px var(--mono);padding:20px}
.wmeta dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;font:12px/1.45 var(--mono);margin:10px 0}
.wmeta dt{color:var(--ink3);text-transform:uppercase;font-size:10px;letter-spacing:.1em;padding-top:2px}
.wmeta dd{margin:0}
.kl{display:inline-block;margin-top:10px;font:600 10px var(--mono);text-transform:uppercase;letter-spacing:.1em;
  padding:2px 6px;border:1px solid currentColor;cursor:help}
.kl-documented{color:var(--acc3)}.kl-reading{color:var(--acc2)}.kl-to{color:var(--acc)}
.pal{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin:8px 0}
.sw{width:26px;height:26px;border:1px solid var(--line);cursor:copy}.pal.big .sw{width:40px;height:40px}
.sw.ok{outline:2px solid var(--acc)}
.paltxt{font:12px/1.45 var(--mono);color:var(--ink2);margin:6px 0}.paltxt span{color:var(--ink3)}
.tag{display:inline-block;font:11px var(--mono);text-decoration:none;background:var(--panelalt);
  padding:1px 6px;margin:2px 2px 2px 0}.tag:hover{background:var(--acc);color:var(--paper)}
.tag b{color:var(--acc)}
.wtxt ol{padding-left:1.3em}.wtxt li{margin:.35em 0}
details summary{cursor:pointer}details summary h2{display:inline}
.tagcloud{margin:16px 0;line-height:2}
.pr{border-top:1px solid var(--line);margin-top:18px}.pr h3 code{font-size:15px;background:none;color:var(--acc)}
.pr:target{background:var(--panel);outline:1px solid var(--acc);outline-offset:8px}
/* lightbox */
#lb{position:fixed;inset:0;z-index:100;background:#000;display:flex;flex-direction:column}
#lb[hidden]{display:none}
.lb-bar{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;padding:8px 16px;font:12px var(--mono);color:#eee}
.lb-bar>*{white-space:nowrap;display:flex;align-items:center;gap:6px}
.lb-bar a{color:#eee;margin-left:auto}
.lb-bar button{min-height:32px;padding:4px 10px}
#lb-blur{width:110px}
#lb-img{flex:1;min-height:0;object-fit:contain;width:100%;padding:8px}
@media (max-width:760px){.hero,.wgrid{grid-template-columns:1fr}.hero .por{max-width:180px}}

/* autolink: naši dizajneri (.xl) i Wikipedia (.wl) — diskretno, tačkasto */
a.xl{text-decoration:underline dotted var(--ink3);text-underline-offset:3px;text-decoration-thickness:1px}
a.xl:hover{color:var(--acc);text-decoration-color:var(--acc)}
a.wl::after{content:"\00a0w";font:500 9px var(--mono);vertical-align:super;color:var(--ink3);letter-spacing:0}
/* wiki popup kartica */
#wp{position:fixed;z-index:60;width:320px;max-width:calc(100vw - 24px);background:var(--panel);color:var(--ink);
  border:1px solid var(--line);box-shadow:0 8px 28px rgba(0,0,0,.25);padding:12px 14px;font:13px/1.5 var(--sans);
  cursor:pointer}
#wp[hidden]{display:none}
#wp img{float:right;width:88px;height:88px;object-fit:cover;margin:0 0 8px 12px;filter:grayscale(1) contrast(1.1)}
#wp h4{margin:0 0 4px;font:600 14px/1.3 var(--sans)}
#wp .wp-d{margin:0 0 6px;font:500 10px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
#wp p.wp-x{margin:0;display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
#wp .wp-f{margin:8px 0 0;font:500 10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--acc)}