:root{
  --paper:#eeedea; --card:#f8f8f6; --ink:#14140f; --muted:#77756d;
  --hair:#c8c6bf; --signal:#1f3fe0; --dot:#c62015;
  --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}

/* ---------- zaglavlje ---------- */
.top{display:flex;align-items:baseline;gap:40px;padding:28px var(--gut) 16px}
.name{font-size:23px;font-weight:400;letter-spacing:-.025em;margin:0;white-space:nowrap}
nav{display:flex;gap:26px;flex:1}
nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
      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)}

/* ---------- pozornica ---------- */
.stage{position:relative;height:66vh;min-height:300px;overflow:hidden;background:var(--paper);cursor:default}
.stage.dragging{cursor:grabbing}
.pan{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);will-change:transform}
.pan .fr{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;
         opacity:0;transition:opacity .26s ease;pointer-events:none;user-select:none}
.pan .fr.base{opacity:1}
.pan .fr.on{opacity:1}

.hot{position:absolute;transform:translate(-50%,-50%) scale(.4);width:40px;height:40px;padding:0;z-index:4;
     background:transparent;border:0;display:grid;place-items:center;opacity:0;pointer-events:none;
     transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1.5)}
.revealed .hot{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;cursor:pointer}
.hot i{display:block;width:12px;height:12px;border-radius:50%;background:var(--dot);
       box-shadow:none;transition:transform .18s ease}
.hot:hover i{transform:scale(1.55)}
@media (prefers-reduced-motion:reduce){ .pan .fr{transition:none} .hot{transition:none} }

/* ---------- osnovni podaci ---------- */
.meta{display:flex;gap:56px;align-items:baseline;padding:20px var(--gut) 36px}
.meta h2{margin:0;font-size:26px;font-weight:400;letter-spacing:-.02em;line-height:1.15;flex:0 0 auto}
.meta .col{max-width:52ch}
.meta .sub{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em;margin:0 0 10px}
.meta p.body{margin:0;font-size:14.5px;color:#42423a}
footer{padding:18px var(--gut) 44px;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)}

/* ---------- prozor rada ---------- */
.ov{position:fixed;inset:0;z-index:50;display:none}
.ov.open{display:block}
.ov-bg{position:absolute;inset:0;background-size:cover;background-position:center;
       filter:blur(6px) saturate(.85);transform:scale(1.06)}
.ov-veil{position:absolute;inset:0;background:rgba(238,237,234,.82)}
.ov-inner{position:relative;height:100%;display:flex;gap:44px;align-items:stretch;
          padding:56px var(--gut);max-width:1500px;margin:0 auto}
.ov-media{flex:1 1 62%;min-width:0;display:flex;flex-direction:column;gap:14px;overflow-y:auto}
.ov-media img{width:100%;height:auto;display:block;background:var(--card)}
.ov-detail{width:100%;flex:1 1 auto;min-height:60%;background-repeat:no-repeat;background-color:var(--card)}
.ov-text{flex:0 0 30%;max-width:38ch;padding-top:4px;overflow-y:auto;max-height:100%;padding-right:6px}
.ov-text h3{margin:0;font-size:24px;font-weight:400;letter-spacing:-.02em;line-height:1.15}
.ov-text .meta-line{font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.05em;margin:8px 0 14px;display:block}
.ov-text p{margin:0;font-size:14.5px;color:#3a3a33;white-space:pre-line}
.ov-note{font-family:var(--mono);font-size:10px;color:var(--muted);letter-spacing:.04em;margin-top:14px;line-height:1.6}
.ov-text .go{display:inline-block;margin-top:18px;font-size:13.5px;color:var(--signal);
             text-decoration:none;border-bottom:1px solid var(--signal)}
.ov-x{position:absolute;top:18px;right:var(--gut);z-index:2;background:none;border:0;
      font-family:var(--mono);font-size:18px;color:var(--ink);cursor:pointer;padding:6px}
.ov-nav{position:absolute;bottom:18px;right:var(--gut);z-index:2;display:flex;gap:8px;align-items:center;
        font-family:var(--mono);font-size:11px;color:var(--muted)}
.ov-nav button{font:inherit;background:none;border:1px solid var(--hair);color:var(--muted);
               padding:5px 11px;cursor:pointer}
.ov-nav button:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- uredivanje ---------- */
.editbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 0;border-top:1px solid var(--hair)}
.ed-btn{font:inherit;font-family:var(--mono);font-size:11px;letter-spacing:.06em;background:none;
        border:1px solid var(--hair);color:var(--muted);padding:6px 11px;cursor:pointer}
.ed-btn:hover{border-color:var(--ink);color:var(--ink)}
.ed-btn.active{border-color:var(--ink);color:var(--card);background:var(--ink)}
.ed-btn.primary{border-color:var(--signal);color:var(--signal)}
.ed-btn.danger{border-color:#a33;color:#a33}
.ed-btn[disabled]{opacity:.5;cursor:default}
.ed-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ed-status{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--muted)}
.ed-status.dirty{color:#a33}
.ed-status.ok{color:var(--signal)}
.ed-tip{flex:1 1 100%;font-family:var(--mono);font-size:10px;line-height:1.6;color:var(--muted)}

.stage.editing .hot{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1);cursor:grab;touch-action:none}
.stage.editing .hot i{background:#a33}
.stage.editing .hot.on i{background:var(--signal);transform:scale(1.55)}

.editpanel{display:none;border-top:1px solid var(--hair);padding:16px 0 24px}
.editpanel.up{display:block}
.ed-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.ed-head strong{font-weight:400;font-size:14px}
.ed-coord{font-family:var(--mono);font-size:11px;color:var(--signal)}
.ed-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 18px}
.ed-field{display:block}
.ed-field.wide{grid-column:1/-1}
.ed-field span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.09em;
               text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.ed-field input,.ed-field textarea{width:100%;font:inherit;font-size:14px;color:var(--ink);
       background:var(--card);border:1px solid var(--hair);padding:6px 8px}
.ed-field textarea{min-height:60px;resize:vertical}
.ed-field input:focus,.ed-field textarea:focus{outline:0;border-color:var(--signal)}
.ed-row{display:flex;gap:10px;margin-top:14px}

@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}
  .stage{height:auto}
  .meta{flex-direction:column;gap:14px}
  .ov-inner{flex-direction:column;padding:52px var(--gut) 24px;overflow-y:auto}
  .ov-text{flex:0 0 auto;max-width:none}
  .ov-detail{min-height:300px}
}

/* ---------- sjecanja: pojavljuju se na mjestu pojedinih ploca ---------- */
body{overflow-x:hidden}
/* Fotografija ide preko cijele sirine zaslona, izvan stupca od 1500px.
   Zaglavlje i tekst ostaju u stupcu. */
.stagewrap{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.memories{display:none}
.mem{position:absolute;transform:translate(-50%,-50%);padding:0;border:0;background:none;
     z-index:3;cursor:pointer;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.mem.show{opacity:.94}
.mem:hover{opacity:1}
.mem img{display:block;width:100%;height:auto;background:var(--card);
         box-shadow:0 3px 14px rgba(20,20,15,.3);transition:transform .45s ease}
.mem:hover img{transform:scale(1.06)}
.mem:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.ov--mem .ov-nav{display:none}
.ov--mem .ov-media{align-items:center;justify-content:center}
.ov--mem .ov-media img{width:auto;max-width:100%;max-height:100%;height:auto}

/* ---------- uredivanje sjecanja ---------- */
.stage.memediting .mem{opacity:1;cursor:grab;touch-action:none;outline:1px dashed rgba(31,63,224,.6);outline-offset:2px}
.stage.memediting .mem.on{outline:2px solid var(--signal);outline-offset:2px}
.mempanel{display:none;border-top:1px solid var(--hair);padding:16px 0 24px}
.mempanel.up{display:block}
.mem-range{width:100%;accent-color:var(--signal)}

/* ---------- hrpa fotografija ---------- */
.ov-media.is-pile{overflow:hidden;display:block;position:relative}
.ov-pile{position:relative;width:100%;height:100%}
.pile-item{position:absolute;margin:0;padding:0;border:0;background:none;cursor:pointer;
           transform:translate(-50%,-50%) rotate(var(--rot,0deg));
           transition:transform .25s ease, filter .25s ease}
.pile-item img{display:block;width:100%;height:auto;background:var(--card);
               box-shadow:0 3px 12px rgba(20,20,15,.28)}
.pile-item:hover{z-index:900 !important;transform:translate(-50%,-50%) rotate(0deg) scale(1.6)}
.pile-item:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.pile-zoom{position:absolute;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;
           background:rgba(238,237,234,.93);cursor:zoom-out;padding:18px}
.pile-zoom img{max-width:100%;max-height:100%;width:auto;height:auto;
               box-shadow:0 10px 40px rgba(20,20,15,.3)}

@media (max-width:900px){
  .ov-media.is-pile{height:58vh;min-height:340px;flex:0 0 auto}
  .ov-inner{gap:18px}
  /* cijeli prozor skrola kao jedno, stupac s fotografijama ne dobiva svoj skroler */
  .ov-media{flex:0 0 auto;overflow:visible}
  .ov-text{max-height:none;overflow:visible}
}

/* okvir hrpe - ispod njega slobodno teku ostale fotografije */
.pile-box{position:relative;width:100%;flex:0 0 auto;height:62vh;min-height:360px;overflow:hidden}
@media (max-width:900px){ .pile-box{height:48vh;min-height:300px} }

/* ime tocke na prijelaz misem */
.hot{overflow:visible}
.hot-label{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);
  white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .18s ease;
  background:var(--card);border:1px solid var(--hair);color:var(--ink);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;padding:3px 8px;
  box-shadow:0 3px 12px rgba(20,20,15,.16);z-index:30}
.hot:hover .hot-label,
.hot:focus-visible .hot-label{opacity:1}
.stage.editing .hot-label{opacity:0}
.stage.editing .hot:hover .hot-label{opacity:1}

/* ime tocke koje se samo upali */
.hot.say .hot-label{opacity:1}
.hot .hot-label{transition:opacity .5s ease}
/* uredivanje i dalje ima svoje gutere */
.editbar,.editpanel,.mempanel{margin-left:var(--gut);margin-right:var(--gut)}


/* === naslovnica: fotografija preko cijelog zaslona === */
/* Zaglavlje vise ne stoji iznad fotografije nego lezi na njoj, a fotografija
   ide od ruba do ruba i visoka je koliko i zaslon. */
.site{position:relative}
.hair{display:none}
.top{position:absolute;top:0;left:50%;transform:translateX(-50%);width:100vw;z-index:40;
     align-items:baseline;gap:38px;padding:30px var(--gut) 26px;
     background:linear-gradient(to bottom,rgba(238,237,234,.78),rgba(238,237,234,.34) 60%,rgba(238,237,234,0))}
/* touch-action: prst vodoravno pomice kadar, okomito i dalje skrola stranicu.
   Bez toga se preglednik i skripta otimaju oko istog poteza i kadar trza. */
.stage{height:100vh;min-height:420px;touch-action:pan-y}

/* krupnije, da se cita preko fotografije */
.name{font-size:34px;letter-spacing:-.03em}
/* izbornik se lijepo prelama kad ne stane u jedan red */
.top nav{display:flex;flex-wrap:wrap;align-items:baseline;gap:14px 26px}

/* ostale stavke izbornika izgledaju jednako kao "radovi";
   > a hvata samo gornju razinu, ne i linkove u padajucem popisu */
.top nav > a{font-size:15px;letter-spacing:.11em;color:var(--ink);padding-bottom:4px}

/* nav.css se ucitava poslije ovoga, pa ove tvrdnje moraju biti specificnije */
.top .navlink{font-size:15px;letter-spacing:.11em;color:var(--ink);padding-bottom:4px}
.top .navlink .caret{font-size:11px;margin-left:7px}
.top .lang{font-size:14px}
html .navmenu a{font-size:16px;padding:11px 18px}
html .navmenu{min-width:290px}

/* tocke i njihova imena */
.hot{width:60px;height:60px}
.hot i{width:20px;height:20px;box-shadow:0 1px 7px rgba(20,20,15,.4)}
.hot-label{font-size:14px;letter-spacing:.02em;padding:6px 12px;bottom:calc(100% + 2px)}

@media (max-width:900px){
  .top{gap:12px;padding:20px var(--gut) 20px}
  .name{font-size:26px}
  .top .navlink,
  .top nav > a{font-size:14px}
  .stage{height:100vh}
  .hot{width:52px;height:52px}
  .hot i{width:18px;height:18px}
  .hot-label{font-size:13px}
}


/* === poruka dok se postav gradi === */
.gradnja{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:20;margin:0;
  font-family:var(--mono);font-size:15px;letter-spacing:.09em;color:var(--ink);
  background:rgba(248,248,246,.88);border:1px solid var(--hair);
  box-shadow:0 4px 18px rgba(20,20,15,.12);padding:11px 17px;white-space:nowrap;
  pointer-events:none;transition:opacity .9s ease}
.gradnja.gasi{opacity:0}
.gradnja{display:inline-grid}
.gradnja .duh{grid-area:1/1;visibility:hidden}
.gradnja .vidljivo{grid-area:1/1;justify-self:start}
.gradnja .kursor{display:inline-block;width:.5em;height:1em;vertical-align:-.13em;
  margin-left:3px;background:var(--ink);animation:trepni 1.05s steps(1) infinite}
@keyframes trepni{50%{background:transparent}}
@media (prefers-reduced-motion:reduce){.gradnja .kursor{animation:none}}
@media (max-width:900px){.gradnja{font-size:13px;padding:9px 13px;letter-spacing:.06em}}