/* AD ASTRA i Jovana Stojković, zajednički stil (30.09.2026)
   Pravila brenda: samo Noć kao pozadina; polja izlaze napred (zrno, meka senka, svetla gornja ivica);
   tekst i slike na istim linijama; isti razmak između blokova; dve kolone 70 : 30; bez linija razdvajanja. */
@import url("../fonts/fonts.css");

:root{
  --noc:#10191B; --polje:#152124; --papir:#ECE5D6; --antracit:#1C1B1E; --siva:#A3ABA8; --bakar:#C08858;
  --display:"Oswald","Arial Narrow",sans-serif;
  /* Swiss 721 Cn BT čeka web licencu; do tada Roboto Condensed Light */
  /* Swiss 721 se vraća na prvo mesto kad stigne web licenca (@font-face iz fontovi_swiss); do tada svi, i Jovana, vide Roboto Condensed */
  --text:"Roboto Condensed","Arial Narrow",sans-serif;
  --script:"Pinyon Script",cursive;
  --s:clamp(28px,4vw,52px); --pad:clamp(18px,6vw,88px); --gap:14px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{background:var(--noc);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--noc);color:var(--papir);font-family:var(--text);font-weight:300;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
p{margin:0;text-align:justify;hyphens:auto;-webkit-hyphens:auto}
h1,h2,h3{margin:0;font-family:var(--display);font-weight:300;text-transform:uppercase;letter-spacing:.05em;line-height:1.02}
.trim{text-box:trim-both cap alphabetic}
.caps{font-family:var(--display);font-weight:300;text-transform:uppercase}
.oznaka{font-family:var(--display);text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;color:var(--siva)}
.oznaka.bakar{color:var(--bakar)}
.navod{font-style:italic}
/* naslov prvog reda koji se ne vidi na ekranu (strane sa kolonama, About): za pretraživače i čitače ekrana */
.samo-citac{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:-9999px} .skip:focus{left:16px;top:16px;background:var(--papir);color:var(--noc);padding:8px 12px;z-index:100}
:focus-visible{outline:1px solid var(--bakar);outline-offset:4px}

/* mreža */
.mreza{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,3fr);column-gap:36px;row-gap:var(--s);padding-inline:var(--pad)}
.pun{grid-column:1/-1} .glavna{grid-column:1} .sporedna{grid-column:2}
@media (max-width:820px){.mreza{grid-template-columns:minmax(0,1fr)} .glavna,.sporedna{grid-column:1}}
.odeljak{padding-block:calc(var(--s) * 1.5)}

/* meni */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:32px var(--pad)}
.logo{display:flex;align-items:center;gap:14px;color:var(--papir)}
.logo .znak{width:48px;height:48px} .logo .natpis{height:20px;width:auto}
.logo .potpis{width:200px}
.meni{display:flex;gap:30px;margin:0;padding:0;list-style:none;margin-right:-.24em}
.meni a{font-family:var(--display);text-transform:uppercase;letter-spacing:.24em;font-size:13px;color:var(--siva);transition:color .25s}
.meni a:hover,.meni a[aria-current="page"]{color:var(--papir)}
.meni-dugme{display:none;background:none;border:0;color:var(--papir);font-family:var(--display);text-transform:uppercase;letter-spacing:.24em;font-size:13px;padding:8px 0}
@media (max-width:820px){
  .meni-dugme{display:block}
  .meni{display:none;position:absolute;left:0;right:0;top:100px;flex-direction:column;gap:22px;padding:28px var(--pad);background:var(--noc);z-index:20;margin-right:0}
  .nav.otvoren .meni{display:flex}
  .nav{position:relative}
  /* nav bez sopstvene širine, pa dugme stoji tačno na desnoj ivici teksta (30.09.2026) */
  .nav > nav{display:contents}
  .meni-dugme{margin-right:-.24em}
}

/* naslovi i tekst */
.h-velik{font-size:clamp(40px,6vw,76px)}
.h-srednji{font-size:clamp(28px,3.4vw,44px)}
.h-mali{font-size:clamp(18px,1.6vw,22px);letter-spacing:.08em;line-height:1.25}
.glavni-tekst{font-size:clamp(18px,1.7vw,22px);line-height:1.55}
@media (max-width:480px){.glavni-tekst{font-size:17px}}
.sporedni-tekst{font-size:15.5px;line-height:1.6;color:rgba(236,229,214,.78)}
.blok{display:grid;gap:var(--s);align-content:start}
.blok-mali{display:grid;gap:20px;align-content:start}

/* polja koja izlaze napred */
.polje{position:relative;background:var(--noc);padding:clamp(28px,3.4vw,48px);display:grid;gap:22px;align-content:start;
  box-shadow:inset 0 1px 0 rgba(236,229,214,.06),0 2px 4px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.75);
  transition:transform .35s ease,box-shadow .35s ease}
.polje::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.08;mix-blend-mode:screen;background-image:url("../img/zrno.svg");background-size:160px}
.polje>*{position:relative;z-index:1}
a.polje:hover,a.polje:focus-visible{transform:translateY(-6px);box-shadow:inset 0 1px 0 rgba(236,229,214,.11),0 4px 8px rgba(0,0,0,.4),0 34px 60px -16px rgba(0,0,0,.85)}
.polja{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}

/* prazno mesto za sliku, dok ne stigne izbor fotografija */
.slika{position:relative;background:var(--polje);overflow:hidden}
.slika img{width:100%;height:100%;object-fit:cover}
.slika.prazno::before{content:attr(data-mesto);position:absolute;left:20px;bottom:18px;font-family:var(--display);text-transform:uppercase;letter-spacing:.24em;font-size:11px;color:rgba(163,171,168,.55)}
.r-16x9{aspect-ratio:16/9} .r-4x5{aspect-ratio:4/5} .r-1{aspect-ratio:1}

/* kolone koje se skroluju nezavisno */
.kolone-strana{height:100vh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.kolone{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));grid-template-rows:auto minmax(0,1fr);column-gap:var(--gap);row-gap:0;padding:0 var(--pad);min-height:0}
/* glave kolona dele isti red, pa prve pločice u svim kolonama počinju na istoj liniji i kad opis ide u dva reda (30.09.2026) */
.kolona{display:grid;grid-row:span 2;grid-template-rows:subgrid;min-height:0;position:relative}
.kolona::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;pointer-events:none;background:linear-gradient(180deg,rgba(16,25,27,0),var(--noc))}
.kolona-glava{display:grid;gap:6px;padding-bottom:18px;align-content:start}
.kolona-traka{overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;gap:var(--gap);padding-bottom:var(--pad);overscroll-behavior:contain}
.kolona-traka::-webkit-scrollbar{display:none}
.plocica{display:block;flex:none;width:100%;aspect-ratio:1;overflow:hidden;position:relative;background:var(--polje);transition:transform .35s ease;
  box-shadow:inset 0 1px 0 rgba(236,229,214,.06),0 2px 4px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.75)}
.plocica img{width:100%;height:100%;object-fit:cover}
.plocica:hover,.plocica:focus-visible{transform:translateY(-6px)}
@media (max-width:820px){.kolone-strana{height:auto;overflow:visible;display:block} .kolone{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto auto;row-gap:0} .kolona-traka{overflow:visible} .kolona::after{display:none}}

/* faze rada */
.faze{display:grid;gap:var(--gap);grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.faza .broj{font-family:var(--display);font-size:13px;letter-spacing:.24em;color:var(--bakar)}
.faza .sloj{font-size:14px;color:var(--siva)}

/* podnožje */
.podnozje{position:relative;margin-top:calc(var(--s) * 1.5)}
.podnozje::before{content:"";position:absolute;inset:0;background:url("../img/izohipse-traka.png") center/cover;opacity:.26}
.podnozje::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:overlay;background-image:url("../img/zrno.svg")}
.podnozje>*{position:relative;z-index:1}
.podnozje .mreza{padding-block:var(--s)}
/* rečenica u podnožju: 30 px (Jovana 1.10.2026); kolona je široka koliko duži red, pa potpis ispod završava tačno gde i rečenica */
.stav{grid-column:1/-1;display:grid;grid-template-columns:max-content;justify-content:start;row-gap:18px}
.stav .recenica{font-family:var(--display);text-transform:uppercase;letter-spacing:.04em;line-height:1.08;font-size:30px;text-align:left}
.stav .recenica span{display:block;white-space:nowrap;width:max-content}
.stav .potpis{justify-self:end;width:200px;color:var(--papir)}
.kontakt{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:end;font-size:14.5px;line-height:1.55}
/* kontakt u jednoj grupi (mejl i oba telefona), Working internationally zasebno i jednako vidljivo (Jovana 1.10.2026) */
.kontakt .levo{display:flex;flex-wrap:wrap;align-items:flex-start;gap:18px 64px}
.kontakt .grupa{display:grid;gap:2px;color:var(--papir)}
.kontakt .desno{justify-self:end;display:flex;gap:18px}
.kontakt .desno svg{width:22px;height:22px}
.pravno{grid-column:1/-1;display:grid;grid-template-columns:subgrid;font-size:12.5px;color:var(--siva)}
.pravno .desno{justify-self:end;display:flex;gap:26px}
.pravno a:hover,.kontakt a:hover{color:var(--papir)}
@media (max-width:820px){.kontakt,.pravno{grid-template-columns:1fr;row-gap:18px} .kontakt .desno,.pravno .desno{justify-self:start} .stav .recenica{font-size:min(22px,5.6vw)} .stav .recenica span{white-space:normal;width:auto} .stav{grid-template-columns:minmax(0,1fr)} .stav .potpis{width:160px}}

/* dugmad */
.dugme{font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:12px;padding:11px 16px;border:1px solid rgba(236,229,214,.35);background:none;color:var(--papir);cursor:pointer}
.dugme.glavno{background:var(--bakar);border-color:var(--bakar);color:var(--noc)}

/* traka za pristanak na kolačiće (Google Analytics, 5.10.2026): malo polje dole levo, na levoj liniji strane; postoji samo
   kad je analitika uključena u KONFIG. Dva dugmeta iste veličine, da nijedan izbor nije nametnut. */
.kolacici{position:fixed;left:var(--pad);bottom:24px;z-index:70;width:min(430px,calc(100vw - 2 * var(--pad)));display:grid;gap:14px;padding:20px 22px;background:var(--noc);
  box-shadow:inset 0 1px 0 rgba(236,229,214,.08),0 2px 4px rgba(0,0,0,.4),0 22px 44px -14px rgba(0,0,0,.8)}
.kolacici[hidden]{display:none}
.kolacici p{margin:0;text-align:left;hyphens:manual}
.kolacici-dugmad{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.kolacici-dugmad a{font-size:12.5px;color:var(--siva);margin-left:auto}
.kolacici-dugmad a:hover{color:var(--papir)}
.pravno .desno [data-kolacici-otvori]{cursor:pointer}

/* kursor: prsten znaka i zvezda */
@media (pointer:fine){
  html.kursor,html.kursor *{cursor:none!important}
  .k-prsten,.k-zvezda{position:fixed;left:0;top:0;pointer-events:none;z-index:90;border-radius:50%}
  /* prsten se meša sa podlogom kao razlika: na tamnom je svetao, na belom crtežu taman, pa se vidi svuda (Jovana 4.10.2026) */
  .k-prsten{width:30px;height:30px;border:1px solid var(--papir);mix-blend-mode:difference;transition:width .25s ease,height .25s ease}
  .k-zvezda{width:6px;height:6px;background:var(--bakar)}
  html.nad .k-prsten{width:46px;height:46px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* pravne strane: odeljci sa brojem, isti razmak između njih kao između svih blokova */
.pravni{max-width:74ch}
.pravni .deo{display:grid;gap:14px}
.pravni .deo h2{font-size:clamp(17px,1.4vw,19px);letter-spacing:.1em}
.pravni .deo h3{margin-top:6px}
.pravni ul{margin:0;padding-left:1.1em;display:grid;gap:6px}
.pravni li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.pravni li::marker{color:var(--bakar)}
.pravni a{color:var(--bakar)}

/* zakazivanje: tekst i dugme; kalendar se otvara preko strane, a za to vreme se vraća obična strelica */
.zakazivanje{justify-items:start}
.zakazivanje .dugme{display:inline-block}
html.kalendar-otvoren .k-prsten,html.kalendar-otvoren .k-zvezda{display:none}
/* Calendly prozor u bojama sajta (Jovana 4.10.2026). Besplatan Calendly ne prima boje, pa se njegov beli prozor obrće filterom:
   belo postaje Noć, tamni tekst topao svetao, plavo bakarno. Font i traka „Powered by Calendly“ ostaju njihovi.
   Posle prelaska na plaćeni Calendly vidi napomenu uz PARAM u site.js. */
.calendly-overlay{background:rgba(8,12,13,.86)!important}
.calendly-overlay .calendly-popup-content{background:var(--noc)!important}
.calendly-overlay .calendly-popup-content iframe{filter:invert(1) saturate(.55) brightness(.94);mix-blend-mode:screen}

/* projekti (1.10.2026): pločica sa naslovnom slikom, ime preko slike samo uz blago zatamnjenje u boji noći */
.plocica .pl-natpis{position:absolute;left:0;right:0;bottom:0;padding:22px 14px 11px;display:grid;gap:2px;   /* manji natpis (Jovana 2.10.2026) */
  background:linear-gradient(180deg,rgba(16,25,27,0),rgba(16,25,27,.78))}
.pl-ime{font-family:var(--display);text-transform:uppercase;letter-spacing:.12em;font-size:11.5px;color:var(--papir);line-height:1.25}
.pl-god{font-size:11px;color:rgba(236,229,214,.78)}
.projekat .podaci{margin:0;align-self:end;display:grid;gap:14px}
.projekat .podaci dt{font-family:var(--display);text-transform:uppercase;letter-spacing:.2em;font-size:11.5px;color:var(--siva)}
.projekat .podaci dd{margin:2px 0 0;font-size:15.5px}
.slika-pr{margin:0}
.slika-pr{display:flex;justify-content:flex-start}
/* renderi idu širinom glavne kolone, ivice u liniji sa tekstom iznad (Jovana 2.10.2026: bili su preveliki celom širinom); uspravne su ograničene visinom ekrana */
.slika-pr img{display:block;width:100%;height:auto;background:var(--polje)}
.slika-pr.uspravna img{width:auto;max-width:100%;max-height:80vh}
.dalje{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;font-family:var(--display);text-transform:uppercase;letter-spacing:.18em;font-size:13px}
.dalje a{color:var(--papir)} .dalje a:hover{color:var(--bakar)}
@media (max-width:820px){.projekat .podaci{align-self:start}}
@media (max-width:600px){.plocica .pl-natpis{padding:18px 10px 9px} .pl-ime{font-size:10.5px;letter-spacing:.1em} .pl-god{font-size:10.5px}}

/* strana Space: dve velike pločice jedna pored druge */
.svemir-pl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap,18px)}
.svemir-pl .plocica{aspect-ratio:4/3}
@media (max-width:600px){.svemir-pl{grid-template-columns:minmax(0,1fr)}}

/* izbor jezika u meniju (1.10.2026): kodovi, trenutni jezik svetao */
@media (min-width:821px){.meni{align-items:baseline}}
.meni .jezici{display:flex;gap:12px;margin-left:14px;align-items:baseline}
.jezici a,.jezici span{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:11.5px;color:var(--siva)}
.jezici span{color:var(--papir)}
.jezici a:hover,.jezici a:focus-visible{color:var(--papir)}
@media (max-width:1100px) and (min-width:821px){.meni{gap:20px} .meni .jezici{margin-left:4px;gap:9px}}
@media (max-width:820px){.meni .jezici{margin-left:0;flex-wrap:wrap;gap:16px;padding-top:6px}}
/* izbor jezika kao padajući meni (Jovana 4.10.2026): u meniju kod trenutnog jezika i strelica, klik otvara spisak sa punim imenima */
.jezik{position:relative}
.jezik summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;font-family:var(--display);text-transform:uppercase;letter-spacing:.24em;font-size:13px;color:var(--siva);transition:color .25s}
.jezik summary::-webkit-details-marker{display:none}
.jezik summary:hover,.jezik[open] summary{color:var(--papir)}
.jezik summary::after{content:"";width:5px;height:5px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s}
.jezik[open] summary::after{transform:translateY(1px) rotate(225deg)}
.jezik-spisak{position:absolute;right:0;top:calc(100% + 16px);z-index:30;display:grid;gap:12px;padding:18px 22px;background:var(--noc);
  box-shadow:inset 0 1px 0 rgba(236,229,214,.06),0 2px 4px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.75)}
.jezik-spisak a,.jezik-spisak span{display:grid;grid-template-columns:2.4em auto;align-items:baseline;white-space:nowrap}
.jezik-spisak i{font-style:normal;font-family:var(--text);text-transform:none;letter-spacing:0;font-size:14px}
@media (max-width:820px){.jezik-spisak{position:static;box-shadow:none;padding:14px 0 0;grid-template-columns:1fr 1fr;gap:12px 24px}}

/* portret na About (1.10.2026) */
.portret{margin:0;display:grid;gap:10px;width:62%;justify-self:end}   /* manji portret (Jovana 1.10.2026), desna ivica u liniji sa mrežom */
@media (max-width:820px){.portret{width:min(240px,62%);justify-self:start}}
.portret img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
/* biografija: pasusi jednog teksta, ne zasebni blokovi */
.bio{display:grid;gap:1em}
/* lični sajt, Art (2.10.2026): radovi u prirodnoj razmeri, kao na Pinterestu; tekst serije otvara se preko strane na Read */
.plocica.prirodno{aspect-ratio:auto}
.plocica.prirodno img{height:auto;object-fit:contain;display:block}
.serija-dugme{justify-self:start;background:none;border:0;padding:4px 0 0;color:var(--bakar);cursor:pointer}
.serija-tekst{position:fixed;inset:0;margin:auto;width:min(62ch,calc(100vw - 2 * var(--pad)));max-height:min(80vh,820px);overflow-y:auto;
  padding:clamp(24px,4vw,48px);border:0;background:var(--polje);color:var(--papir);display:none;gap:16px;align-content:start;
  box-shadow:inset 0 1px 0 rgba(236,229,214,.07),0 2px 4px rgba(0,0,0,.35),0 22px 44px -14px rgba(0,0,0,.75)}
.serija-tekst:popover-open{display:grid}
.serija-tekst::backdrop{background:rgba(8,12,13,.78)}
.serija-tekst p{margin:0}
.serija-zatvori{justify-self:end;background:none;border:0;padding:8px 0 0;color:var(--papir);cursor:pointer}

/* AD ASTRA, mirnija mera (Jovana 2.10.2026: „da me ne proguta ni tekst ni fotografija, da mogu da sagledam kompoziciju bez odzumiranja“).
   Važi samo za atelje (html.atelje); lični sajt zadržava svoju meru. Slike staju cele u ekran. */
html.atelje{--s:clamp(22px,2.8vw,40px)}
.atelje body{font-size:16px}
.atelje .h-velik{font-size:clamp(32px,3.8vw,56px)}
.atelje .h-srednji{font-size:clamp(24px,2.3vw,34px)}
.atelje .h-mali{font-size:clamp(16px,1.2vw,18px)}
.atelje .glavni-tekst{font-size:clamp(16px,1.2vw,18px)}
.atelje .sporedni-tekst{font-size:14px}
.atelje .polje{padding:clamp(22px,2.4vw,34px);gap:16px}
.atelje .projekat .podaci{gap:12px}
.atelje .projekat .podaci dt{font-size:11px}
.atelje .projekat .podaci dd{font-size:14px}
/* veze u podacima projekta (5.10.2026): gde se o projektu piše; bakar kao i ostale veze u tekstu, svaka u svom redu ako ne staju */
.atelje .projekat .podaci dd .veze{display:flex;flex-wrap:wrap;gap:2px 16px}
.atelje .projekat .podaci dd .veze a{color:var(--bakar)}
.atelje .projekat .podaci dd .veze a:hover,.atelje .projekat .podaci dd .veze a:focus-visible{color:var(--papir)}
/* potpis autora sajta u podnožju ateljea (5.10.2026): od 1200 px u drugoj i trećoj koloni, na liniji „Working internationally“;
   uže od toga ispod godine */
@media (min-width:821px) and (max-width:1199px){.atelje .pravno .autor-sajta{grid-column:1;grid-row:2}}
@media (min-width:1200px){.atelje .pravno .autor-sajta{grid-column:2 / span 2}}
/* Strana Services po Jovaninoj skici (5.10.2026): sve stoji između leve i desne linije strane.
   Uvod: tekst u prve dve kolone, položeno polje crteža (5 : 4) do desne linije, pola kolone vazduha između teksta i polja. */
.atelje .slika.r-5x4{aspect-ratio:5/4}
@media (min-width:1200px){
  .atelje .mreza.uvod > .glavna{grid-column:1 / span 2}
  .atelje .mreza.uvod:not(.projekat) > .glavna.blok:not(.pravni){grid-template-columns:minmax(0,1fr)}
  .atelje .mreza.uvod > .uvod-crtez{grid-column:3 / span 2;margin-left:calc((100% - var(--gap)) / 4)}
}
/* tok projekta: četiri koraka na jednoj liniji; bakarna tačka na početku svakog, kao četiri Sunca na crtežu */
.atelje .koraci{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);row-gap:44px;margin-top:10px;border-top:1px solid rgba(236,229,214,.16);padding-top:30px}
.atelje .korak{position:relative;display:grid;gap:12px;align-content:start;padding-right:18px}
.atelje .korak::before{content:"";position:absolute;left:0;top:-35px;width:7px;height:7px;border-radius:50%;background:var(--bakar)}
.atelje .korak .k-broj{font-family:var(--display);font-weight:300;font-size:clamp(44px,5vw,70px);line-height:1;color:rgba(236,229,214,.2)}
.atelje .korak h3,.atelje .korak p{margin:0}
@media (max-width:1199px){.atelje .koraci{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){
  .atelje .koraci{grid-template-columns:minmax(0,1fr);border-top:0;padding-top:0;border-left:1px solid rgba(236,229,214,.16);padding-left:22px}
  .atelje .korak::before{left:-26px;top:6px}
}
/* konsultacije: jedno polje preko cele širine, ivice na levoj i desnoj liniji strane; unutra iste linije kolona kao na strani
   (pasus u prve dve kolone, zakazivanje u četvrtoj) */
.atelje .mreza > .traka{--up:clamp(18px,2.4vw,34px);grid-column:1 / -1;display:grid;grid-template-columns:subgrid;column-gap:var(--gap);row-gap:26px;padding:calc(var(--up) * 1.2) var(--up)}
.atelje .traka .zakazi{display:grid;gap:14px;align-content:start;justify-items:start}
.atelje .traka .zakazi p{margin:0}
@media (min-width:1200px){
  .atelje .mreza.traka > .glavna{grid-column:1 / span 2}
  .atelje .mreza.traka:not(.projekat) > .glavna.blok:not(.pravni){grid-template-columns:minmax(0,1fr)}
}
/* šta atelje radi (Services, 5.10.2026): spisak u redovima, naziv u prvoj koloni, rečenica od druge kolone do desne linije strane;
   tanka linija između redova. Na telefonu naziv iznad rečenice. */
.atelje .usluge{display:grid;margin-top:6px}
.atelje .usluga{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap);align-items:baseline;padding:17px 0;border-top:1px solid rgba(236,229,214,.14)}
.atelje .usluga:last-child{border-bottom:1px solid rgba(236,229,214,.14)}
.atelje .usluga h3{grid-column:1;margin:0}
.atelje .usluga p{grid-column:2 / span 3;margin:0}
.atelje .usluga p a{color:var(--bakar);white-space:nowrap}
.atelje .usluga p a:hover,.atelje .usluga p a:focus-visible{color:var(--papir)}
@media (max-width:820px){.atelje .usluga{grid-template-columns:minmax(0,1fr);row-gap:6px} .atelje .usluga p{grid-column:1}}
/* crtež u polju slike (Light study na strani Services): vektor ispunjava polje */
.atelje .slika.crtez svg{display:block;width:100%;height:100%}
/* dva crteža u jednom polju (Jovana 5.10.2026): prelaz mišem pretapa prvi u drugi; gde nema miša, dodir dodaje klasu drugi (site.js).
   Dve tačke dole levo kažu da crteža ima dva i koji se vidi. */
.atelje .slika.crtez.dva svg{position:absolute;inset:0;transition:opacity .7s ease}
.atelje .slika.crtez.dva svg + svg{opacity:0}
.atelje .slika.crtez.dva .tacke{position:absolute;left:16px;bottom:16px;display:flex;gap:7px}
.atelje .slika.crtez.dva .tacke i{width:5px;height:5px;border-radius:50%;box-sizing:border-box;border:1px solid var(--siva);opacity:.7;transition:background .7s ease}
.atelje .slika.crtez.dva .tacke i:first-child{background:var(--siva)}
.atelje .slika.crtez.dva.drugi svg{opacity:0}
.atelje .slika.crtez.dva.drugi svg + svg{opacity:1}
.atelje .slika.crtez.dva.drugi .tacke i:first-child{background:none}
.atelje .slika.crtez.dva.drugi .tacke i:last-child{background:var(--siva)}
@media (hover:hover){
  .atelje .slika.crtez.dva:hover svg{opacity:0}
  .atelje .slika.crtez.dva:hover svg + svg{opacity:1}
  .atelje .slika.crtez.dva:hover .tacke i:first-child{background:none}
  .atelje .slika.crtez.dva:hover .tacke i:last-child{background:var(--siva)}
}
@media (prefers-reduced-motion:reduce){.atelje .slika.crtez.dva svg,.atelje .slika.crtez.dva .tacke i{transition:none}}
.atelje .dalje{font-size:12px}
/* okvir slika na stranama projekata (Jovana 4.10.2026: „ne može da bude jedna šira druga uža, bar po širini sve mora da bude isto“):
   sve slike imaju istu širinu, visina ide po razmeri slike. Okvir je širok kao glavna kolona, ali najviše 115vh i 1200 px,
   da položen render stane u ekran i da manji originali ne budu razvučeni. Tekst projekta je širok koliko i okvir. */
.atelje .projekat{--okvir:min(100%,115vh,1200px)}
.atelje .projekat > .glavna.blok{max-width:var(--okvir)}
.atelje .slika-pr{width:var(--okvir);flex-direction:column;gap:12px}   /* natpis ispod crteža, fontom sajta */
.atelje .slika-pr img,.atelje .slika-pr.uspravna img{width:100%;max-width:none;max-height:none;height:auto}
.atelje .stav .recenica{font-size:26px}
.atelje .stav .potpis{width:180px}
.atelje .kontakt{font-size:13.5px}
@media (min-width:821px){.atelje .kontakt .levo{align-items:flex-end}}
.atelje .pravni .deo h2{font-size:clamp(15px,1.2vw,17px)}
@media (max-width:820px){.atelje .stav .recenica{font-size:min(20px,5.4vw)} .atelje .stav .potpis{width:150px}}
/* telefon, poravnanje (Jovana 4.10.2026: „u mobilnoj verziji isto treba sve da bude aligned, slika može biti širine teksta“):
   portret je širok kao tekst, a potpis u podnožju se završava tamo gde i rečenica iznad njega */
@media (max-width:820px){.atelje .portret{width:100%;justify-self:stretch} .atelje .stav{grid-template-columns:fit-content(100%)}}
@media (max-width:480px){.atelje .glavni-tekst{font-size:16px}}
/* citat na About ima veličinu upisanu u samoj strani (zajednička sa ličnim sajtom), pa je ovde nadjačana samo za atelje */
.atelje .navod[style*="font-size"]{font-size:clamp(18px,1.5vw,22px)!important}
/* uvećanje slike ili crteža na klik: cela strana, slika u punoj veličini koliko ekran dozvoljava */
.slika-pr img{cursor:zoom-in}
.uvecanje{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:2vh 2vw;background:rgba(16,25,27,.97);cursor:zoom-out}
.uvecanje[hidden]{display:none}
.uvecanje img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;cursor:zoom-out}
html.uvecano{overflow:hidden}
/* meni je širok tačno koliko kolone na strani Projekti (Jovana 4.10.2026: „align levo i desno tekst sa širinom kolone“):
   prva stavka počinje na levoj ivici kolone, poslednja se završava na desnoj ivici strane. Jedna kolona kad meni u nju staje
   na svim jezicima (od 2300 px), inače dve kolone (od 1200 px); ispod toga meni ostaje u svojoj prirodnoj širini. */
.atelje .meni{margin-right:0}   /* poslednja stavka je strelica izbora jezika, pa nema razmaka slova koji bi trebalo poništiti */
/* širina menija se računa od širine zaglavlja, ne od širine prozora, pa traka za skrolovanje ne pomera liniju */
@media (min-width:1200px){.atelje .nav > nav{flex:0 0 calc((100% - var(--gap)) / 2)} .atelje .meni{justify-content:space-between;gap:0} .atelje .meni .jezici{margin-left:0}}
@media (min-width:2300px){.atelje .nav > nav{flex-basis:calc((100% - 3 * var(--gap)) / 4)}}
/* citat u kurzivu ide u boji sajta, bakarnoj (Jovana 4.10.2026: „može da bude u nekoj od boja sajtova, ovo što je citat i italic“) */
.atelje .navod{color:var(--bakar)}
/* ime ispod citata (Jovana 11.10.2026: „citat nikad nije bez imena ko je nešto rekao“): u pismu oznaka, uspravno, ispod citata */
.atelje .navod .navod-ime{display:block;margin-top:.75em;font-family:var(--display);font-style:normal;text-transform:uppercase;letter-spacing:.2em;font-size:11px;color:var(--siva)}
/* tekst u glavnoj koloni završava se ranije, na 68% kolone, da znak ili slika pored njega imaju prostora da dišu; font se ne povećava
   (Jovana 4.10.2026, prvo za početnu, pa „kao i kod naslovne strane“ za Usluge). Ista mera na svim stranama, pa tekst svuda staje na istoj liniji.
   Potpis i dugme su u istoj traci, pa se završavaju gde i tekst. Izuzeci: strane projekata (tekst ostaje širok kao render ispod) i pravne strane (74ch). */
@media (min-width:1100px){.atelje .mreza:not(.projekat) > .glavna.blok:not(.pravni){grid-template-columns:minmax(0,68%)}}

/* AD ASTRA, jedna mreža za sve strane (Jovana 4.10.2026: „sve što možeš da align-uješ align-uj“; podaci projekta treba da počnu
   na liniji menija). Od 1200 px sve strane koriste iste četiri kolone kao strana Projekti: glavni deo zauzima prve tri, bočni
   četvrtu. Tekst ide preko prve dve kolone, pa se završava na liniji kolone. Meni je iznad četvrte kolone (od 2300 px), inače
   iznad treće i četvrte. Ispod 1200 px ostaje stara mreža 70 : 30 sa tekstom na 68%. */
@media (min-width:1200px){
  .atelje .mreza{grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--gap)}
  .atelje .glavna{grid-column:1 / span 3}
  .atelje .sporedna{grid-column:4}
  /* tekst zauzima prve dve kolone; potpis i dugme su u istoj traci */
  .atelje .mreza:not(.projekat) > .glavna.blok:not(.pravni){grid-template-columns:minmax(0,calc((200% - var(--gap)) / 3))}
  .atelje .pravni{max-width:calc((200% - var(--gap)) / 3)}
  /* polja na početnoj i faze na Uslugama stoje u prve tri kolone, četvrta ostaje prazna ispod znaka */
  .atelje .polja{grid-column:1 / span 3;grid-template-columns:repeat(3,minmax(0,1fr))}
  .atelje .faze{grid-template-columns:repeat(3,minmax(0,1fr));width:calc((300% - var(--gap)) / 4)}
  /* strane projekata: okvir slika i teksta su prve tri kolone, na širokom ekranu prve dve; veze na dnu su široke kao okvir */
  .atelje .projekat{--okvir:100%}
  .atelje .projekat .dalje{grid-column:1 / span 3;width:var(--okvir)}
  /* portret počinje na liniji četvrte kolone */
  .atelje .portret{width:75%;justify-self:start}
  /* podnožje: tri grupe kontakta na linijama prve tri kolone, ikone i pravne veze u četvrtoj, do desne ivice */
  /* grupe u podnožju stoje na poslednjem redu (Jovana 5.10.2026: natpisi u drugoj i trećoj koloni „lebde u sredini“): Working internationally
     i Art and research su na liniji drugog telefona i ikonica, a ne u vrhu */
  .atelje .kontakt .levo{grid-column:1 / span 3;display:grid;grid-template-columns:subgrid;align-items:end;column-gap:var(--gap);row-gap:0}
  .atelje .kontakt .desno,.atelje .pravno .desno{grid-column:4}
}
@media (min-width:1800px){.atelje .projekat{--okvir:calc((200% - var(--gap)) / 3)}}
/* poravnanje po visini: vrh portreta ili slike u bočnoj koloni je na vrhu slova oznake (oznaka bez praznine iznad slova),
   a poslednji red podataka projekta na istoj liniji kao poslednji red teksta (oba se završavaju na osnovnoj liniji slova) */
.atelje .glavna.blok > .oznaka:first-child{text-box:trim-both cap alphabetic}
.atelje .projekat > .glavna.blok > p:last-child,.atelje .projekat > .glavna.blok > .pasusi > p:last-child,.atelje .projekat .podaci > div:last-child dd{text-box:trim-end cap alphabetic}
/* Dug spisak podataka (Helios Ark, 11.10.2026: konzorcijum i reference): spisak ide uz tekst i uz prvu sliku, da ispod teksta ne ostane
   praznina. Kod ostalih projekata spisak ostaje poravnat sa poslednjim redom teksta. */
@media (min-width:1200px){.atelje .projekat.dugi-podaci .podaci{grid-row:1 / span 2;align-self:start}}
/* tekst projekta u više pasusa (11.10.2026, International Planetary Sunshade) */
.atelje .projekat .pasusi{display:grid;gap:.9em}
.atelje .projekat .pasusi p{margin:0}
/* lični sajt, About (4.10.2026): tekst i mejl ispod portreta široki su kao portret i počinju na njegovoj levoj ivici */
.uz-portret{width:62%;justify-self:end}
@media (max-width:820px){.uz-portret{width:auto;justify-self:start}}
/* slike se ne skidaju sa sajta (Jovana 4.10.2026): bez prevlačenja, bez menija na dug pritisak na telefonu, bez označavanja */
img{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
button.plocica{border:0;padding:0;font:inherit;color:inherit;cursor:zoom-in;text-align:left}
/* lični sajt (4.10.2026, Jovana: „širina paragrafa mi je prevelika i teško mi je da čitam“): tekst u glavnoj koloni ima meru
   čitanja od oko 85 znakova u redu, na svakom ekranu; citat, biografija i potpis završavaju na istoj desnoj liniji.
   Citat je u bakarnoj boji, da se vidi da je citat. Atelje ima svoja pravila pod .atelje. */
html:not(.atelje){--mera:calc(34 * clamp(18px,1.7vw,22px))}
html:not(.atelje) .glavna.blok:not(.pravni) > p,html:not(.atelje) .glavna.blok:not(.pravni) > .bio{max-width:var(--mera)}
html:not(.atelje) .glavna.blok:not(.pravni) > .potpis{justify-self:start!important;margin-left:calc(min(100%,var(--mera)) - 250px)}
html:not(.atelje) .navod{color:var(--bakar)}
/* lični sajt, Art: čitanje teksta serije na računaru (4.10.2026): serija levo, tekst desno u širini dve kolone, na liniji naslova kolone */
.citanje[hidden]{display:none}
@media (min-width:821px){
  .kolone.cita{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}
  .kolone.cita .kolona:not(.otvorena){display:none}
  .citanje{grid-column:2;grid-row:1 / span 2;display:grid;align-content:start;gap:18px;min-height:0;overflow-y:auto;scrollbar-width:none;
    padding:0 0 var(--pad) clamp(12px,3vw,48px)}
  .citanje::-webkit-scrollbar{display:none}
  .citanje p{margin:0;max-width:calc(34 * clamp(18px,1.7vw,22px))}
  .citanje-nazad{justify-self:start;background:none;border:0;padding:8px 0 0;color:var(--bakar);cursor:pointer}
}
/* lični sajt na telefonu (Jovana 4.10.2026: „u mobilnoj verziji isto treba sve da bude aligned, slika može biti širine teksta“):
   portret je širok kao tekst, od leve do desne ivice kolone */
@media (max-width:820px){html:not(.atelje) .portret{width:100%;justify-self:stretch}}
/* lični sajt, Art na telefonu: tri serije u dve kolone ostavljaju treću samu na pola širine, pa serije idu jedna ispod druge,
   svaka od leve do desne ivice kao tekst */
@media (max-width:820px){html:not(.atelje) .kolone{grid-template-columns:minmax(0,1fr)}}