/* =====================================================================
   PROTO → CODE · base: page frame, rail, prototype layer, header,
   buttons, section headers, page heads, footer, consent panel.
   ===================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-ui);font-size:17.5px;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 5px var(--grid)}
h1,h2,h3,h4{margin:0;text-wrap:balance}
p,ul,ol,dl,dd,figure{margin:0}
.wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.mono{font-family:var(--f-mono);font-size:11.5px;line-height:1.55;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.caps{text-transform:uppercase;letter-spacing:.08em}
.g{color:var(--graphite)}.m{color:var(--muted)}
.slot{font-family:var(--f-mono);font-size:.82em;color:var(--redline);letter-spacing:.02em;border:1px dashed var(--redline);padding:0 4px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);padding:8px 14px;font-weight:650;text-decoration:none}
.skip:focus{top:12px}

/* ---------- revision rail: the shared root with miloszivkovic.dev ---------- */
.rail{position:fixed;left:var(--rail-x);top:0;bottom:0;width:1px;background:var(--rule-2);z-index:30;pointer-events:none}
.rail i{position:absolute;left:-4px;width:9px;height:9px;transform:translateY(-4px)}
.rail i::before,.rail i::after{content:"";position:absolute;background:var(--graphite)}
.rail i::before{left:4px;top:0;width:1px;height:9px}.rail i::after{left:0;top:4px;width:9px;height:1px}
.rail i.on::before,.rail i.on::after{background:var(--ink)}
.rail i.on{outline:1px solid var(--ink);outline-offset:1px}
.rail b{position:absolute;left:-3px;top:4px;width:7px;height:7px;background:var(--ink);transform:translateY(-3px);transition:top .2s linear}
@media (max-width:719px){.rail i{display:none}}

/* ---------- prototype layer (switch at the top of the content: the hero on Home, the page head's first row elsewhere) ---------- */
.gridlay{position:fixed;inset:0;pointer-events:none;z-index:25;opacity:0;transition:opacity .35s var(--ease)}
.gridlay .wrap{height:100%;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.gridlay .wrap i{background:var(--grid);border-inline:1px solid color-mix(in srgb,var(--pencil) 35%,transparent)}
body.proto .gridlay{opacity:1}
.anno{display:none;font-family:var(--f-mono);font-size:11px;line-height:1.5;color:var(--pencil-text);border-left:1px solid var(--pencil);padding-left:8px;margin-top:10px}
body.proto .anno{display:block}
@media (max-width:719px){.gridlay .wrap{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.gridlay .wrap i:nth-child(n+5){display:none}}

/* ---------- header ---------- */
.top{position:relative;z-index:20}
.bar{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap;padding-block:18px}
.wm{font-weight:850;font-size:17px;letter-spacing:.14em;text-decoration:none;line-height:1;white-space:nowrap}
.wm span{color:var(--pencil-text)}
/* the mark (partials/mark.html): < as its pencil outline, > in ink, the squares being inked between them.
   Outlines stay a hairline at any size; the ink parts follow the text colour, so dark mode just works. */
.mk{display:inline-block;height:1.5em;width:auto;overflow:visible;margin-right:.6em;vertical-align:middle;position:relative;top:-.08em}
.mk .p{fill:none;stroke:var(--pencil);stroke-width:1.25px;vector-effect:non-scaling-stroke}
.mk .p *{vector-effect:non-scaling-stroke}
.mk .i{fill:currentColor}
.bar nav{display:flex;flex-wrap:wrap;gap:4px 22px;margin-left:auto}
.bar nav a{text-decoration:none;font-weight:500;font-size:15px;color:var(--ink);padding:4px 0}
.bar nav a:hover,.bar nav a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.bar nav a[aria-current]{text-decoration-color:var(--pencil);text-decoration-thickness:2px}
.tools{display:flex;align-items:center;gap:14px}
.lang{display:flex;gap:6px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.lang a{text-decoration:none;color:var(--graphite);padding:4px 2px}
.lang a[aria-current]{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.sw{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;background:none;border:1px solid var(--rule-2);color:var(--graphite);padding:5px 9px;border-radius:2px;cursor:pointer}
.sw i{width:9px;height:9px;border:1px solid var(--pencil);display:inline-block}
.sw[aria-pressed="true"]{color:var(--pencil-text);border-color:var(--pencil)}
.sw[aria-pressed="true"] i{background:var(--pencil)}
.sh .sw{margin-left:auto;align-self:center}
@media (max-width:860px){.bar nav{order:3;width:100%;margin-left:0;gap:4px 16px}.bar nav a{font-size:14.5px}.tools{margin-left:auto}}

/* ---------- buttons and links ---------- */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-ui);font-weight:650;font-size:16px;line-height:1.2;padding:12px 18px;border-radius:2px;border:1px solid var(--ink);text-decoration:none;cursor:pointer}
.btn.pri{background:var(--ink);color:var(--paper)}
.btn.pri:hover{background:transparent;color:var(--ink)}
.btn.alt{background:transparent;color:var(--ink)}
.btn.alt:hover{background:var(--ink);color:var(--paper)}
.btn .tick{font-family:var(--f-mono);font-weight:500;font-size:13px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.lnk{font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;text-decoration-color:var(--rule-2)}
.lnk:hover{text-decoration-color:var(--ink)}
.more{display:inline-flex;margin-top:28px;font-weight:650;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:2px}
.more:hover{color:var(--pencil-text);border-color:var(--pencil)}
.linkbtn{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:left}
.linkbtn:hover{text-decoration:underline;text-underline-offset:4px}

/* ---------- sections ---------- */
.sec{position:relative;padding-block:clamp(72px,9vw,128px) 0}
.sec.first{padding-top:clamp(40px,5vw,64px)}
.sh{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);position:relative}
.sh::before{content:"";position:absolute;left:calc(var(--rail-x) + 6px - var(--pad) - max(0px,(100vw - var(--max))/2));right:calc(100% + 12px);top:.8em;height:1px;background:var(--ink)}
.sh b{font-weight:500;color:var(--ink)}
.sh .rev{color:var(--pencil-text)}
.h2{margin-top:16px;font-weight:760;font-size:clamp(30px,3.8vw,54px);line-height:1.04;letter-spacing:-.025em;max-width:22ch}
.intro{margin-top:16px;max-width:62ch;font-size:clamp(17px,1.35vw,19.5px);color:var(--graphite)}
.note{margin-top:14px;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);max-width:80ch}

/* ---------- page head (every page except home) ---------- */
.phead{padding-top:clamp(40px,7vw,96px)}
.phead h1{margin-top:18px;font-weight:760;font-size:clamp(36px,5.2vw,76px);line-height:1.02;letter-spacing:-.03em;max-width:17ch}
.phead .intro{margin-top:22px;font-size:clamp(18px,1.5vw,21px);max-width:58ch}

/* ---------- footer: the city on a horizon, carved into the paper ---------- */
.foot{margin-top:clamp(96px,10vw,150px);position:relative}
.city{position:relative;aspect-ratio:1400/1050;max-height:520px;width:100%;overflow:hidden}
/* a drawing-sized box (so the side fade meets the drawing's cut edges) holding three copies of the line art:
   a lit lower-right edge, a shaded upper-left edge, and the groove floor on top */
.city .lines{position:absolute;left:50%;bottom:0;height:100%;aspect-ratio:1400/1050;transform:translateX(-50%)}
.city .lines i{position:absolute;inset:0;-webkit-mask:url(../img/zrenjanin-lines.webp?v=7cac1c7e) 0 0/100% 100% no-repeat,linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);-webkit-mask-composite:source-in;mask:url(../img/zrenjanin-lines.webp?v=7cac1c7e) 0 0/100% 100% no-repeat,linear-gradient(90deg,transparent,#000 24%,#000 76%,transparent);mask-composite:intersect}
.city .lines i:nth-child(1){background:var(--carve-hi);transform:translate(1px,1px)}
.city .lines i:nth-child(2){background:var(--carve-lo);transform:translate(-1px,-1px)}
.city .lines i:nth-child(3){background:var(--carve)}
.city svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .35s var(--ease)}
body.proto .city svg{opacity:1}
.horizon{height:1px;background:var(--ink)}
.coord{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-top:10px}
.fcols{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:28px 32px;padding-block:44px 48px}
.fcols h2{font-family:var(--f-mono);font-size:10.5px;font-weight:500;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:10px}
.fcols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-weight:500;font-size:15px}
.fcols a{text-decoration:none}.fcols a:hover,.fcols a[aria-current]{text-decoration:underline;text-underline-offset:4px}
.fcols .wm{font-size:22px}
.fcols p{margin-top:12px;font-size:14.5px;color:var(--graphite);max-width:34ch}
.endrow{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 24px;padding-block:14px 28px;border-top:1px solid var(--rule)}
.endrow a{text-decoration:none}.endrow a:hover{text-decoration:underline}
.endrow .rv{color:var(--pencil-text);display:none}
body.proto .endrow .rv{display:inline}
@media (max-width:860px){.fcols{grid-template-columns:1fr 1fr}.fcols > div:first-child{grid-column:1/-1}}

/* ---------- consent panel ---------- */
.consent{position:fixed;z-index:60;right:clamp(12px,3vw,32px);bottom:clamp(12px,3vw,32px);width:min(420px,calc(100vw - 24px));background:var(--paper);border:1px solid var(--ink);padding:16px 18px 18px;box-shadow:6px 6px 0 var(--grid)}
.consent[hidden]{display:none}
.consent .k{display:flex;justify-content:space-between;color:var(--muted)}
.consent h2{margin-top:8px;font-weight:720;font-size:20px;line-height:1.2}
.consent p{margin-top:8px;font-size:15px;line-height:1.5;color:var(--graphite)}
.consent p a{color:var(--ink)}
.consent .acts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.consent .acts .btn{justify-content:center;font-size:15px;padding:10px 12px}

/* ---------- print ---------- */
@media print{.rail,.gridlay,.sw,.consent,.city,.coord{display:none!important}body{background:#fff;color:#000}}