@charset "utf-8";
/* =========================================================================
   RADILICA, smer B za BeeCenter.
   Sve na strani stoji na dasci: red je jedna daska, rupa je razmak izmedju
   rupa u dasci, redovi su pomereni za pola rupe, a svaka cetvrta daska je
   preskocena, tacno kao na klupi u api komori. Nista nije na 60 stepeni i
   nigde nema sestougla osim onog pravog, na zidu.
   ========================================================================= */

@view-transition { navigation: auto; }

/* ---------------------------------------------------------------- pisma */
@font-face{
  font-family:'Geologica';
  src:url('../assets/fonts/geologica-var.woff2') format('woff2');
  font-weight:200 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Golos Text';
  src:url('../assets/fonts/golos-text-var.woff2') format('woff2');
  font-weight:400 700; font-style:normal; font-display:swap;
}

/* ---------------------------------------------------------------- pribor */
:root{
  /* deset vrednosti, izmerene sa njihovih fajlova */
  --zelena-boca:#005240;
  --ugalj:#0C0905;
  --vosak:#EFE6D2;
  --signal:#FEC900;
  --med:#E99F22;
  --zelena-znaka:#006335;
  --sara-magenta:#EB585B;
  --sara-tirkiz:#2DBBB0;
  --sara-plava:#3464A6;
  --dimnjak:#C53D2E;

  /* daska */
  --daska:clamp(52px,5vw,84px);
  --rupa:calc(var(--daska) * 2.4);

  /* razmaci, svaki sa imenom */
  --razmak-fuga:8px;
  --razmak-rupa:32px;
  --razmak-red:96px;
  --razmak-polje:168px;
  --razmak-prazno:340px;

  /* slog */
  --t-oznaka:11px;
  --t-natpis:clamp(12px,.78vw,13px);
  --t-telo:clamp(17px,1.15vw,19px);
  --t-uvod:clamp(21px,1.7vw,27px);
  --t-sredina:clamp(34px,3.4vw,52px);
  --t-veliko:clamp(58px,12vw,220px);
  --t-ogromno:clamp(84px,20vw,380px);

  --p-slog:'Geologica','Helvetica Neue',Arial,sans-serif;
  --p-telo:'Golos Text','Segoe UI',system-ui,sans-serif;

  /* krive: sklop je potez pribora koji legne na svoje mesto */
  --e-sklop:cubic-bezier(.16,.84,.24,1);
  --e-meko:cubic-bezier(.25,1,.5,1);
  --e-krene-stane:cubic-bezier(.65,.05,.36,1);
  --e-izlaz:cubic-bezier(.55,0,1,.45);
  --e-opruga:linear(0,.099 6.6%,.353 13.9%,.673 22%,.888 28.8%,1.026 36.5%,1.055 42.6%,1.033 50.5%,.994 61.3%,.99 73%,1);
  --e-vuce:linear;

  --sirina-trake:120px;

  color-scheme:dark;
}

/* rupe u dasci, staticka pozadina koja se nikad ne precrtava */
:root{
  --rupe-svetle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cg fill='%23EFE6D2' fill-opacity='.09'%3E%3Ccircle cx='60' cy='25' r='3'/%3E%3Ccircle cx='180' cy='25' r='3'/%3E%3Ccircle cx='0' cy='75' r='3'/%3E%3Ccircle cx='120' cy='75' r='3'/%3E%3Ccircle cx='240' cy='75' r='3'/%3E%3Ccircle cx='60' cy='125' r='3'/%3E%3Ccircle cx='180' cy='125' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --rupe-tamne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 200'%3E%3Cg fill='%230C0905' fill-opacity='.11'%3E%3Ccircle cx='60' cy='25' r='3'/%3E%3Ccircle cx='180' cy='25' r='3'/%3E%3Ccircle cx='0' cy='75' r='3'/%3E%3Ccircle cx='120' cy='75' r='3'/%3E%3Ccircle cx='240' cy='75' r='3'/%3E%3Ccircle cx='60' cy='125' r='3'/%3E%3Ccircle cx='180' cy='125' r='3'/%3E%3C/g%3E%3C/svg%3E");
  --zrno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)'/%3E%3C/svg%3E");
  --cvet:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%23006335' stroke-width='2'%3E%3Ccircle cx='50' cy='50' r='24'/%3E%3Cpath d='M26 50a24 24 0 0 1 48 0'/%3E%3Cpath d='M50 26a24 24 0 0 1 0 48'/%3E%3C/g%3E%3C/svg%3E");
}

/* ------------------------------------------------------------ osnove */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--zelena-boca);
  color:var(--vosak);
  font-family:var(--p-telo);
  font-size:var(--t-telo);
  line-height:1.55;
  font-synthesis-weight:none;
  overflow-x:clip;
  padding-left:var(--sirina-trake);
}
img,svg{display:block;max-width:100%}
figure,ol,ul,h1,h2,p,blockquote{margin:0}
ol,ul{list-style:none;padding:0}
::selection{background:var(--signal);color:var(--ugalj)}

.samo-citac{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:clip;clip-path:inset(50%);white-space:nowrap;border:0;
}

/* dvobojni prsten: vosak unutra, ugalj spolja. Jedna boja ne prezivi
   podlogu koja se menja cetiri puta, dve prezive sve cetiri. */
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--vosak); outline-offset:2px; position:relative;
  transition:none;
}
a:focus-visible::after,button:focus-visible::after,[tabindex]:focus-visible::after{
  content:'';position:absolute;inset:-4px;outline:2px solid var(--ugalj);
  pointer-events:none;
}
:focus:not(:focus-visible){outline:none}

/* ------------------------------------------------------------- registri */
.oznaka,.korak__broj,.pitanja__broj,.mesto__ime,.sata__sat,.callout__jed{
  font-family:var(--p-slog);
  font-variation-settings:'wght' 320,'SHRP' 100;
  font-size:var(--t-oznaka);
  line-height:1.3;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.oznaka{display:flex;align-items:center;gap:.7em}
.natpis{
  font-family:var(--p-telo);
  font-size:var(--t-natpis);
  line-height:1.4;
  letter-spacing:.005em;
  max-width:46ch;
  margin-top:var(--razmak-fuga);
}
.proza{
  font-size:var(--t-telo);
  text-wrap:pretty;
  hyphens:manual;
}
.proza + .proza{margin-top:1.1em}
h1,h2{
  font-family:var(--p-slog);
  font-variation-settings:'wght' 620,'SHRP' 0;
  letter-spacing:-.035em;
  line-height:1.02;
  text-wrap:balance;
}
strong{font-weight:600}
em{font-style:normal}

/* -------------------------------------------------- cetiri drzanja sadrzaja */
.mera{max-width:62ch;margin-left:calc(var(--daska) * 1.6)}
.preko{width:calc(100% + 16vw);margin-inline:-8vw;max-width:none}
.van-daske{position:relative}

/* -------------------------------------------------------------- ikone */
.ikona{width:1.45em;height:1.45em;flex:none;color:inherit}
.radnja .ikona{width:1.1em;height:1.1em}

/* ------------------------------------------------------------- radnje */
.radnja{
  display:inline-flex;align-items:center;gap:.8em;
  min-height:44px;padding:10px 0 10px 0;
  color:var(--signal);
  font-family:var(--p-slog);
  font-variation-settings:'wght' 500,'SHRP' 20;
  font-size:var(--t-telo);
  letter-spacing:-.01em;
  text-decoration:none;
  border-bottom:2px solid var(--signal);
  width:fit-content;
  transition:color .12s var(--e-meko),border-color .12s var(--e-meko);
}
.radnja--velika{font-size:var(--t-uvod);border-bottom-width:3px}
.radnja:hover{color:var(--vosak);border-color:var(--vosak)}
.deo--znanja .radnja,.deo--plan .radnja{color:var(--zelena-znaka);border-color:var(--zelena-znaka)}
.deo--znanja .radnja:hover,.deo--plan .radnja:hover{color:var(--ugalj);border-color:var(--ugalj)}

/* ----------------------------------------------------------- preskok */
.kapija-preskok{
  position:fixed;top:0;left:0;z-index:60;
  transform:translateY(-140%);
  background:var(--signal);color:var(--ugalj);
  font-family:var(--p-slog);font-variation-settings:'wght' 500,'SHRP' 100;
  font-size:var(--t-oznaka);letter-spacing:.14em;text-transform:uppercase;
  padding:14px 18px;text-decoration:none;
}
.kapija-preskok:focus{transform:none}

/* ============================ PLAN, koji je i navigacija ================= */
.plan-traka{
  position:fixed;left:0;top:0;bottom:0;width:var(--sirina-trake);z-index:50;
  background:var(--ugalj);
  border-right:2px solid var(--zelena-znaka);
  display:flex;flex-direction:column;
  padding:var(--razmak-rupa) 0 var(--razmak-rupa);
  overflow:clip;
}
.plan-traka__ime{
  font-family:var(--p-slog);
  font-variation-settings:'wght' 300,'SHRP' 100;
  font-size:var(--t-oznaka);letter-spacing:.14em;text-transform:uppercase;
  color:var(--vosak);
  padding:0 14px 14px;
}
.rozeta{width:34px;height:34px;color:var(--signal);margin:0 auto 18px}
.rozeta__list{transform-box:fill-box;transform-origin:center}
.plan-traka__mesta{
  flex:1;position:relative;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:6px 0;
}
/* staza kroz vrt, iscrtana iza mesta */
.plan-traka__mesta::before{
  content:'';position:absolute;left:33px;top:12px;bottom:12px;width:2px;
  background:var(--zelena-znaka);
}
.mesto a{
  display:flex;align-items:center;gap:9px;
  min-height:44px;padding:2px 8px 2px 12px;
  color:var(--vosak);text-decoration:none;
  margin-left:calc(var(--n) * 0px);
}
.mesto--znak a,.mesto--sokla a,.mesto--sto a{padding-left:22px}
.mesto--komora a,.mesto--beefe a{padding-left:4px}
.mesto__crtez{width:22px;height:22px;flex:none;color:var(--zelena-znaka);
  background:var(--ugalj);transition:color .13s var(--e-meko)}
.mesto__ime{font-size:9px;letter-spacing:.1em;color:#8d8f83;
  transition:color .13s var(--e-meko);white-space:nowrap;overflow:clip}
.mesto a:hover .mesto__crtez,.mesto[data-tu] .mesto__crtez{color:var(--signal)}
.mesto a:hover .mesto__ime,.mesto[data-tu] .mesto__ime{color:var(--vosak)}
.mesto--marker{position:absolute;left:0;top:0;pointer-events:none;
  translate:0 var(--marker-y,0px)}
.marker{display:block;width:20px;height:20px;color:var(--dimnjak);margin-left:2px}
.marker svg{width:20px;height:20px}

.plan-traka__izlaz{padding:0 10px;display:flex;flex-direction:column;gap:10px}
.jezik{
  appearance:none;background:none;border:2px solid var(--zelena-znaka);
  color:var(--vosak);min-width:44px;min-height:44px;padding:0;cursor:pointer;
  font-family:var(--p-slog);font-variation-settings:'wght' 400,'SHRP' 100;
  font-size:13px;letter-spacing:.1em;
  transition:background .12s var(--e-meko),color .12s var(--e-meko);
}
.jezik[aria-pressed="true"]{background:var(--signal);color:var(--ugalj);border-color:var(--signal)}
.jezik:hover{background:var(--zelena-znaka)}
.izlaz-veze{display:flex;flex-direction:column}
.izlaz-veze a{
  display:flex;align-items:center;min-height:32px;
  font-family:var(--p-slog);font-variation-settings:'wght' 300,'SHRP' 100;
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  color:#8d8f83;text-decoration:none;
}
.izlaz-veze a:hover{color:var(--signal)}
.izlaz-veze li:first-child a{color:var(--vosak)}

/* ================================ deo ================================== */
.deo{position:relative;overflow-x:clip}
.deo::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--zrno);background-size:180px 180px;
  opacity:.05;mix-blend-mode:overlay;
}
.deo > *{position:relative;z-index:1}

/* ---------------------------------------------------------- B1 dolazak */
.deo--dolazak{
  height:100svh;min-height:600px;
  background:var(--zelena-boca);
}
.dolazak__slika{position:absolute;inset:0 0 0 42%;z-index:1;margin:0}
.dolazak__slika .okvir,.dolazak__slika picture,.dolazak__slika .okvir img{height:100%}
.dolazak__slika picture{display:block}
.dolazak__slika img{width:100%;object-fit:cover;object-position:52% 42%}
.natpis--na-slici{
  position:absolute;right:var(--razmak-rupa);top:var(--razmak-rupa);
  max-width:20ch;color:var(--vosak);z-index:3;
  background:var(--ugalj);padding:10px 14px;border-left:3px solid var(--signal);
}
.dolazak__znak{
  position:absolute;left:-4.08vw;top:13%;width:34vw;z-index:2;
  color:var(--vosak);
}
/* cetiri dela nose --signal, devet ostaju linija u vosku: to je pravi odnos
   4 amber / 9 zeleno sa njihovog fajla, preveden na tamnu podlogu */
.delic--pun{fill:var(--signal)}
.delic--linija{fill:none;stroke:var(--vosak);stroke-width:3;vector-effect:non-scaling-stroke}
.znak--linija{color:var(--signal)}
/* najveci polukrug znaka prelazi levu ivicu fotografije i nacrtan je dvaput:
   pun --signal na zelenoj strani, samo linija tamo gde prelazi preko slike */
.dolazak__krilo{
  position:absolute;left:calc(42% - 17vw);top:-6vw;width:34vw;height:17vw;z-index:3;
}
.krilo{width:100%;height:100%}
.krilo__pun{fill:var(--signal)}
/* dvobojna kontura, isti jezik kao prsten fokusa: prezivi i nebo i krosnju */
.krilo__oreol{fill:none;stroke:var(--vosak);stroke-width:7;vector-effect:non-scaling-stroke}
.krilo__linija{fill:none;stroke:var(--ugalj);stroke-width:2.5;vector-effect:non-scaling-stroke}
/* Polje sa slogom namerno pregazi seceni rub fotografije, ali tacno za jednu
   dasku: prelom je odluka, a ne zauzimanje. Fotografija ostaje puna visina. */
.dolazak__slog{
  position:absolute;left:0;bottom:0;z-index:4;
  width:calc(42% + var(--daska));
  background:var(--zelena-boca);
  padding:var(--daska);
}
.dolazak__tvrdnja{
  view-transition-name:smer-b;
  font-size:clamp(34px,4.3vw,64px);
  font-variation-settings:'wght' 650,'SHRP' 0;
  color:var(--vosak);
  letter-spacing:-.035em;
  line-height:1.0;
}
.dolazak__mesto{
  margin-top:var(--razmak-rupa);
  max-width:38ch;color:var(--vosak);
  font-size:var(--t-telo);
}
.dolazak__slog .radnja{margin-top:18px}
.oznaka--vrh{
  position:absolute;left:var(--razmak-rupa);top:var(--razmak-rupa);z-index:4;
  color:var(--vosak);
}
.oznaka--vrh .broj{color:var(--signal)}

/* ---------------------------------------------------------- B2 vec-ste */
.deo--vec-ste{
  height:240px;background:var(--zelena-boca);
  border-top:2px solid var(--zelena-znaka);
  display:flex;align-items:center;gap:var(--razmak-red);
  padding:0 var(--daska);
}
.vec-ste__red{display:flex;align-items:flex-end;gap:clamp(20px,3vw,54px);flex:none}
.objekat{color:var(--signal);display:flex;flex-direction:column;gap:10px}
.objekat__crtez{display:flex;align-items:flex-end;height:104px}
.objekat--znak .znak{width:104px}
.objekat--plakat .znak{width:96px}
.objekat--tabla .znak{width:78px}
.objekat--rozeta .rozeta{width:62px;height:62px;margin:0}
.objekat .znak,.objekat .rozeta{color:var(--signal)}
.znak--pun .delic--amber{fill:var(--med)}
.znak--pun .delic--zeleno{fill:var(--signal)}
.objekat .oznaka{color:#9aa08f;letter-spacing:.1em;font-size:9px;max-width:11ch;
  display:block}
.vec-ste__tvrdnja{
  margin-left:auto;text-align:right;max-width:34ch;
  font-family:var(--p-telo);font-variation-settings:normal;
  font-size:var(--t-telo);font-weight:400;line-height:1.5;letter-spacing:0;
  color:var(--vosak);
}

/* ------------------------------------------------------------- B3 plan */
.deo--plan{
  background:var(--vosak);color:var(--ugalj);
  min-height:170vh;
  padding:var(--razmak-red) var(--daska) var(--razmak-red);
  background-image:var(--rupe-tamne);
  background-size:calc(var(--rupa) * 2) calc(var(--daska) * 4);
}
.deo--plan .oznaka,.deo--plan .natpis{color:var(--ugalj)}
.plan__zaglavlje{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:var(--razmak-red);align-items:end}
.plan__naslov{font-size:var(--t-sredina);max-width:19ch;color:var(--ugalj)}
.plan__zaglavlje .proza{margin-top:0;color:#3a3a30;margin-left:0}
.plan__ime{
  margin:calc(var(--razmak-red) * .5) 0 var(--razmak-fuga);
  color:var(--zelena-znaka);
  width:min(52vw,620px);
}
.plan__ime .rukopis{width:100%;height:auto}
.plan__crtez{position:relative;margin-top:var(--razmak-rupa);
  width:min(100%,1040px);margin-inline:auto}
.plan__svg{width:100%;height:auto;overflow:visible}
.plan__linije{fill:none;stroke:var(--zelena-znaka);stroke-width:2;
  stroke-linecap:butt;stroke-linejoin:miter}
.crt--drustva circle,.crt--sadnja circle{fill:none}
.crt--dunav path{stroke-width:3}
.plan__vodje path{fill:none;stroke:var(--ugalj);stroke-width:1.5}
.callout{
  position:absolute;transform:translate(0,-50%);
  display:flex;flex-direction:column;gap:2px;
  font-variant-numeric:tabular-nums;
}
.callout__broj{
  font-family:var(--p-slog);font-variation-settings:'wght' 620,'SHRP' 0;
  font-size:clamp(26px,2.6vw,44px);letter-spacing:-.03em;line-height:1;
  color:var(--med);
}
.callout__jed{color:var(--ugalj);white-space:nowrap}
.callout--drustva,.callout--radion,.callout--gosti,.callout--biljke{
  align-items:flex-end;text-align:right;transform:translate(-100%,-50%)}
.plan__inset{
  position:absolute;right:-4%;top:-8%;width:280px;z-index:3;
}
.plan__inset .natpis{color:var(--ugalj);max-width:280px}
.plan__margina{margin-top:var(--razmak-rupa);display:flex;gap:var(--razmak-red);align-items:flex-start;flex-wrap:wrap}
.plan__margina .oznaka{color:var(--zelena-znaka)}
.beleska{
  font-size:var(--t-natpis);max-width:44ch;color:#3a3a30;
  border-left:2px solid var(--dimnjak);padding-left:14px;
}
.plan__pruga{margin-top:var(--razmak-red)}
.plan__pruga .natpis{margin-left:8vw}
/* Amfiteatar je snimljen na 1000 px. Preko te sirine se ne razvlaci: traka
   ostaje preko ivice, ali kadar u njoj staje na 1.000 px i sedi levo od sredine. */
.plan__pruga.preko .okvir{max-width:1000px;margin-right:auto}
@media (max-width:900px){ .plan__pruga.preko .okvir{max-width:none} }

/* --------------------------------------------------------- B4 dva-sata */
.deo--dva-sata{
  background:var(--signal);color:var(--ugalj);
  min-height:200vh;
  padding:var(--razmak-polje) 0 var(--razmak-red);
}
.deo--dva-sata .oznaka,.deo--dva-sata .natpis{color:var(--ugalj)}
.sata__zaglavlje{padding:0 var(--daska);max-width:none;min-height:56vh;
  display:grid;align-content:center;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  grid-template-areas:'oznaka sanduk' 'naslov sanduk' 'proza sanduk';
  column-gap:var(--razmak-red)}
.sata__zaglavlje > .oznaka{grid-area:oznaka}
.sata__naslov{grid-area:naslov}
.sata__zaglavlje > .proza{grid-area:proza}
.sata__sanduk{grid-area:sanduk;align-self:center;justify-self:end;
  width:min(100%,480px);color:var(--ugalj)}
.sata__sanduk .sanduk{width:100%;height:auto}
.sanduk__izvucen{stroke-width:3}
.sata__naslov{font-size:var(--t-sredina);max-width:17ch;margin-top:var(--razmak-rupa);color:var(--ugalj)}
.sata__zaglavlje .proza{margin-top:var(--razmak-rupa);margin-left:0}
.sata__pozornica{margin-top:0;position:relative;min-height:112vh;
  display:flex;flex-direction:column;justify-content:center}
.sata__sat{
  font-variant-numeric:tabular-nums;color:var(--ugalj);
  padding:0 var(--daska);
}
.sata__sat--kraj{text-align:right;margin-top:14px}
.sata__sat--pocetak{margin-bottom:14px}
.sine{
  overflow-x:auto;overflow-y:clip;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--daska);
  scrollbar-width:thin;scrollbar-color:var(--ugalj) transparent;
  overscroll-behavior-x:contain;
  padding-bottom:18px;
}
.sine__traka{display:flex;gap:var(--razmak-rupa);padding:0 var(--daska);align-items:flex-start}
.celija{flex:none;scroll-snap-align:start;border-top:2px solid var(--ugalj);padding-top:12px}
.celija--900{width:min(900px,80vw)}
.celija--380{width:min(380px,62vw)}
.celija--640{width:min(640px,76vw)}
.celija--1100{width:min(1100px,86vw)}
.celija--420{width:min(420px,64vw)}
.celija--760{width:min(760px,78vw)}
.korak{display:flex;align-items:center;gap:.8em;font-family:var(--p-slog);
  font-variation-settings:'wght' 500,'SHRP' 20;font-size:var(--t-telo);
  letter-spacing:-.01em;margin-bottom:14px;color:var(--ugalj)}
.korak__broj{color:#6a5400;letter-spacing:.14em}
.grozd{display:flex;gap:12px}
.grozd figure{width:240px;flex:none}
.celija .natpis{color:var(--ugalj)}

/* -------------------------------------------------------- prazno polje */
.praznina{height:var(--razmak-prazno);background:var(--signal)}

/* ----------------------------------------------------------- B5 komora */
.deo--komora{background:var(--ugalj);color:var(--vosak);min-height:220vh;padding-bottom:var(--razmak-polje)}
.komora__pin{
  position:sticky;top:0;height:100svh;overflow:clip;
  display:flex;align-items:center;
  margin-bottom:50vh;
}
/* zavesa pada u cetiri koraka, ne klizi: podloga se menja stepenasto */
.komora__pin::before{content:'';position:absolute;inset:0;z-index:3;
  pointer-events:none;background-color:transparent}
html.js .komora__pin::before{background-color:var(--signal)}
html.js .komora--otvorena .komora__pin::before{animation:zavesa .7s steps(4,end) forwards}
@keyframes zavesa{from{background-color:var(--signal)}to{background-color:rgba(254,201,0,0)}}
.komora__fasada{
  position:absolute;inset:0 0 0 22%;margin:0;
}
.komora__fasada .okvir,.komora__fasada picture,.komora__fasada .okvir img{height:100%}
.komora__fasada img{width:100%;object-fit:cover;object-position:58% 60%;
  filter:brightness(.72) saturate(.92)}
.natpis--tabla{
  position:absolute;right:var(--razmak-rupa);bottom:var(--razmak-rupa);
  max-width:24ch;text-align:left;color:var(--vosak);
  padding-left:12px;border-left:2px solid var(--sara-magenta);
}
.komora__slog{
  position:relative;z-index:2;
  margin-left:var(--daska);width:min(46vw,660px);
  background:var(--ugalj);padding:var(--daska);
}
.komora__naslov{font-size:clamp(34px,4.4vw,74px);color:var(--vosak)}
.komora__mir{
  margin-top:var(--razmak-rupa);font-size:var(--t-uvod);line-height:1.32;
  color:var(--signal);
}
.komora__posle{position:relative;z-index:2;background:var(--ugalj);
  border-top:2px solid var(--zelena-znaka);
  padding:var(--razmak-red) var(--daska) 0;display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,.78fr);gap:var(--razmak-red);align-items:start}
.komora__dve{display:flex;gap:var(--razmak-rupa);align-items:flex-start}
.komora__dve figure{flex:1 1 0;min-width:0}
.komora__dve .van-daske{margin-top:112px}
.proza--ograda{
  border-left:2px solid var(--sara-tirkiz);padding-left:16px;color:#c8c3b3;
  font-size:var(--t-natpis);
}
.komora__tekst{margin-left:0}

/* ------------------------------------------------------------ B6 traka */
.deo--traka{
  height:136px;background:var(--ugalj);
  display:flex;flex-direction:column;justify-content:center;
  padding:0 0 0 0;overflow:clip;
}
.traka__pojas{position:relative;height:64px;display:flex;align-items:center}
.traka__stop{
  position:absolute;left:0;top:0;z-index:3;
  width:44px;height:64px;padding:0;
  appearance:none;border:0;border-right:2px solid var(--zelena-znaka);
  background:var(--ugalj);color:var(--signal);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.traka__stop svg{width:20px;height:20px}
.traka__tok{overflow:clip;width:100%;height:64px}
.traka__potez{display:flex;align-items:center;width:max-content;height:64px;
  will-change:auto}
.traka__slika{height:40px;width:880px;flex:none}
.traka__rec{color:var(--signal);flex:none;padding:0 46px;height:44px;display:block}
.traka__rec .rukopis{height:44px;width:auto}
.natpis--traka{padding-left:56px;color:#8d8f83;margin-top:10px}

/* -------------------------------------------------------- B7 nema-sefa */
.deo--sefa{background:var(--zelena-boca);min-height:240vh;padding:var(--razmak-red) var(--daska);
  background-image:var(--rupe-svetle);
  background-size:calc(var(--rupa) * 2) calc(var(--daska) * 4)}
.sefa__ploca{min-height:78svh;display:flex;flex-direction:column;justify-content:center}
.sefa__naslov{font-size:var(--t-sredina);color:var(--vosak);max-width:14ch}
.pitanja{margin-top:calc(var(--razmak-red) * .66);max-width:64ch;margin-left:calc(var(--daska) * 1.6)}
.pitanja li{
  display:flex;gap:1.4em;padding:.52em 0;
  border-bottom:2px solid rgba(239,230,210,.16);
  font-size:clamp(17px,1.5vw,23px);line-height:1.3;
}
.pitanja__broj{
  flex:none;width:2.6em;margin-left:-3.9em;text-align:right;
  color:var(--signal);font-variant-numeric:tabular-nums;
  padding-top:.42em;
}
.sefa__sala{margin-top:var(--razmak-rupa);max-width:52ch;color:#b9c4bc;
  margin-left:calc(var(--daska) * 1.6);font-size:var(--t-natpis)}

.sefa__sto{
  margin-top:var(--razmak-red);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:var(--razmak-red);align-items:center;min-height:76vh;
}
.tabla{position:relative;width:100%;aspect-ratio:6/4}
.tabla__polja{
  position:absolute;inset:0;display:grid;
  grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(4,1fr);gap:6px;
}
.polje{
  appearance:none;border:2px solid rgba(239,230,210,.2);background:none;
  padding:0;cursor:pointer;min-width:44px;min-height:44px;
  transition:border-color .12s var(--e-meko),background .12s var(--e-meko);
}
.polje:hover{border-color:var(--signal)}
.polje[data-zauzeto]{pointer-events:none;border-color:rgba(239,230,210,.08)}
.tabla__plocice{position:absolute;inset:0;pointer-events:none}
.plocica{
  position:absolute;appearance:none;border:0;padding:0;cursor:pointer;
  pointer-events:auto;background:var(--med);color:var(--ugalj);
  display:flex;align-items:flex-start;justify-content:flex-start;
  font-family:var(--p-slog);font-variation-settings:'wght' 500,'SHRP' 100;
  font-size:var(--t-oznaka);letter-spacing:.14em;
  padding:8px 9px;
  translate:var(--px) var(--py);
  transition:translate .46s var(--e-opruga);
}
.plocica__broj{pointer-events:none}
.plocica[aria-pressed="true"]{background:var(--signal);outline:2px solid var(--vosak);outline-offset:-6px}
.plocica[data-odbijeno]{animation:odbij .18s var(--e-krene-stane)}
@keyframes odbij{50%{translate:calc(var(--px) + 5px) var(--py)}}
.sefa__uput{
  font-family:var(--p-slog);font-variation-settings:'wght' 500,'SHRP' 0;
  font-size:var(--t-uvod);letter-spacing:-.02em;line-height:1.2;color:var(--signal);
}
.sefa__uz .proza{margin-top:var(--razmak-rupa);color:#b9c4bc;max-width:36ch}
.sefa__uz .radnja{margin-top:var(--razmak-rupa)}
.sefa__slike{
  margin-top:var(--razmak-red);
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr) minmax(0,.8fr);
  gap:var(--razmak-rupa);align-items:start;
}
.sefa__uspravna{margin-top:72px}
.sefa__kvadrat{margin-top:38px}
[data-arhiva]{filter:grayscale(1) sepia(.42) saturate(1.5) hue-rotate(-8deg) contrast(1.05)}

/* -------------------------------------------------- B8 kosnica-znanja */
.deo--znanja{
  background:var(--vosak);color:var(--ugalj);
  min-height:130vh;
  padding:var(--razmak-red) var(--daska) calc(var(--razmak-red) * .7);
  background-image:var(--rupe-tamne);
  background-size:calc(var(--rupa) * 2) calc(var(--daska) * 4);
}
.deo--znanja .natpis,.deo--znanja .oznaka{color:var(--ugalj)}
.znanja__pitanje{
  font-size:clamp(34px,9vw,168px);color:var(--ugalj);
  letter-spacing:-.04em;max-width:none;
}
.znanja__list{
  position:relative;margin-top:calc(var(--razmak-red) * .7);
  display:flex;flex-wrap:wrap;gap:clamp(14px,2.4vw,46px);align-items:flex-start;
}
.rupa{flex:none}
.rupa--1{width:300px;margin-top:0}
.rupa--2{width:280px;margin-top:calc(var(--daska) * .9)}
.rupa--3{width:260px;margin-top:calc(var(--daska) * .45)}
.rupa--4{width:240px;margin-top:calc(var(--daska) * 1.3)}
.rupa--5{width:260px;margin-top:calc(var(--daska) * .45)}
.rupa--6{width:280px;margin-top:calc(var(--daska) * .9)}
.rupa--7{width:240px;margin-top:0}
.natpis--troje{flex:1 1 220px;min-width:200px;align-self:flex-end;
  padding-left:14px;border-left:2px solid var(--zelena-znaka)}
.znanja__slog{margin-top:calc(var(--razmak-red) * .7);display:flex;flex-direction:column;gap:var(--razmak-rupa)}
.deo--znanja .proza{color:#3a3a30}
.partneri{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.7em;
  font-family:var(--p-slog);font-variation-settings:'wght' 500,'SHRP' 0;
  font-size:clamp(17px,1.9vw,28px);letter-spacing:-.02em;color:var(--ugalj);
  margin-top:var(--razmak-rupa);
}
.partneri .oznaka{color:var(--zelena-znaka);margin-right:.6em}

/* ------------------------------------------------------- B9 vrt-uvece */
.deo--uvece{background:var(--ugalj);min-height:170vh;padding-bottom:var(--razmak-red)}
.uvece__prozor{position:relative;padding-top:var(--razmak-red);padding-bottom:var(--razmak-red);overflow:clip}
.uvece__hor{width:min(1024px,60vw);margin-left:auto;margin-right:var(--daska)}
.uvece__hor .natpis{color:#8d8f83;margin-left:auto;max-width:34ch}
.uvece__panel{
  position:absolute;left:0;right:0;top:calc(var(--razmak-red) + 2vw);
  height:clamp(150px,25vw,340px);z-index:2;pointer-events:none;
  translate:0 var(--izrez-y,0px);
}
.uvece__izrez{width:100%;height:100%}
.uvece__slog{position:absolute;left:var(--daska);bottom:var(--razmak-red);z-index:4;
  width:min(42ch,30vw)}
.uvece__naslov{
  font-size:clamp(30px,5.2vw,88px);color:var(--vosak);max-width:16ch;
}
.uvece__zuji{color:var(--signal)}
.uvece__slog .proza{color:#c8c3b3;margin-top:var(--razmak-rupa)}
.uvece__slog .radnja{margin-top:var(--razmak-rupa)}
.uvece__tri{
  margin-top:var(--razmak-red);padding:0 var(--daska);
  display:flex;gap:var(--razmak-rupa);align-items:flex-start;flex-wrap:wrap;
}
.uvece__a{width:min(36vw,500px)}
.uvece__b{width:min(22vw,300px);margin-top:calc(var(--daska) * 1.6)}
.uvece__c{width:min(16vw,220px);margin-top:calc(var(--daska) * .6)}
.uvece__tri .natpis{color:#8d8f83}
/* kosina se lepi na brzinu prsta, ograniceno na 6 stepeni i samo na slike */
[data-kosi]{transform:skewY(var(--kos,0deg));transform-origin:50% 0}

/* izrez „zuji” klizi 6% preko hora: slova idu, vrt stoji */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes izrez{from{translate:0 -6%}to{translate:0 6%}}
    html.js .uvece__panel{animation:izrez linear both;animation-timeline:view();
      animation-range:entry 0% exit 100%}
  }
}

/* --------------------------------------------------------- B10 glasovi */
.deo--glasovi{
  min-height:90vh;background:var(--ugalj);
  display:flex;flex-direction:column;justify-content:center;
  padding:var(--razmak-red) var(--daska);
}
.glasovi__tlo{position:absolute;inset:0;z-index:0;overflow:clip}
.glasovi__tlo .okvir{width:100%;height:100%}
/* Sace je 1200 px sirok izvor. Uvecanje je 200% i tu prestaje: 2.400 px je
   granica, pa na sirokom ekranu raste polje a ne uvecanje. */
.glasovi__tlo .okvir img{
  width:min(200%, 2400px); height:100%; min-width:100%;
  object-fit:cover; object-position:38% 46%;
  filter:saturate(.68) brightness(.26) contrast(.88);
}
.glasovi__mreza{position:absolute;inset:0;width:100%;height:100%;opacity:.3}
.glasovi__tlo::after{content:'';position:absolute;inset:0;background:var(--ugalj);opacity:.64}
.glasovi__prvi{position:relative;z-index:1;max-width:22ch}
.glasovi__navod{
  position:absolute;right:100%;top:-.06em;margin-right:.08em;
  font-family:var(--p-slog);font-variation-settings:'wght' 700,'SHRP' 0;
  font-size:clamp(42px,9vw,150px);line-height:.94;color:var(--signal);
}
.glasovi__wow{
  font-family:var(--p-slog);font-variation-settings:'wght' 700,'SHRP' 0;
  font-size:clamp(42px,9vw,150px);letter-spacing:-.045em;line-height:.94;
  color:var(--vosak);width:3.3em;
}
.glasovi__wow .rec{display:inline-block;white-space:pre}
.glasovi__rest{
  margin-top:.4em;font-size:var(--t-uvod);color:var(--vosak);
  position:relative;max-width:15ch;
}
.glasovi__vise{display:inline-block;width:0;overflow:visible;white-space:nowrap;
  color:var(--signal)}
.glasovi__prvi footer{margin-top:var(--razmak-rupa);display:flex;gap:1em;align-items:baseline}
.glasovi__prvi cite{font-style:normal;font-weight:600;color:var(--vosak)}
.glasovi__prvi .oznaka{color:var(--signal)}
.glasovi__ostali{
  position:relative;z-index:1;margin-top:var(--razmak-rupa);
  columns:3;column-gap:var(--razmak-red);max-width:min(96ch,64vw);
  margin-left:auto;
}
.glasovi__ostali blockquote{break-inside:avoid;margin-bottom:var(--razmak-rupa);
  font-size:var(--t-natpis);color:var(--vosak)}
.glasovi__ostali cite{font-style:normal;color:var(--vosak);font-weight:600}
.glasovi__ostali footer{margin-top:6px;display:flex;gap:.8em;align-items:baseline}
.glasovi__ostali .oznaka{color:var(--signal);font-size:9px}
.glasovi__duz{font-size:var(--t-natpis)}

/* ----------------------------------------------------------- B11 braca */
.deo--braca{
  background:var(--vosak);color:var(--ugalj);
  height:110vh;padding:var(--razmak-red) var(--daska);
  display:grid;grid-template-columns:min(620px,44vw) minmax(0,1fr);
  gap:var(--razmak-red) var(--razmak-red);align-items:center;align-content:center;
}
.deo--braca::after{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--rupe-tamne);
  background-size:calc(var(--rupa) * 2) calc(var(--daska) * 4);
  background-position:0 var(--braca-y,0px);
}
.braca__slika{width:min(620px,44vw);max-width:100%;margin-left:calc(var(--daska) * -.62);
  overflow:clip}
.braca__slika .okvir{overflow:clip}
.braca__slika .natpis{color:var(--ugalj)}
.braca__naslov{font-size:var(--t-sredina);color:var(--ugalj)}
.braca__slog .proza{margin-top:var(--razmak-rupa);color:#3a3a30}
.braca__slog .mera{margin-left:0}
.braca__margina{
  grid-column:2;color:var(--zelena-znaka);max-width:26ch;
  border-top:2px solid var(--zelena-znaka);padding-top:12px;
  margin-top:var(--razmak-rupa);
}

/* ----------------------------------------------------------- B12 dodji */
.deo--dodji{
  min-height:80vh;background:var(--zelena-boca);
  padding:var(--razmak-red) var(--daska) 0;
  overflow:clip;
}
.trazenja{display:flex;flex-direction:column;gap:13px;align-items:flex-start}
.trazenje{display:flex;align-items:center;gap:.7em;color:var(--vosak);
  font-family:var(--p-slog);letter-spacing:-.02em;line-height:1.15}
.trazenje .ikona{color:var(--signal)}
.trazenje--1{font-size:clamp(28px,3.1vw,44px);font-variation-settings:'wght' 620,'SHRP' 0;max-width:22ch}
.trazenje--2{font-size:clamp(21px,1.9vw,27px);font-variation-settings:'wght' 540,'SHRP' 0;max-width:28ch}
.trazenje--3,.trazenje--4{font-size:var(--t-telo);font-variation-settings:'wght' 400,'SHRP' 40;max-width:42ch}
.adresa{
  margin-top:var(--razmak-rupa);display:flex;flex-wrap:wrap;gap:.6em;align-items:center;
  font-family:var(--p-slog);font-variation-settings:'wght' 300,'SHRP' 100;
  font-size:var(--t-oznaka);letter-spacing:.14em;text-transform:uppercase;
  color:var(--vosak);
}
.adresa .ikona{color:var(--dimnjak)}
.dodji__kraj{
  margin-top:var(--razmak-rupa);
  font-family:var(--p-slog);font-variation-settings:'wght' 700,'SHRP' 0;
  font-size:clamp(46px,14vw,260px);letter-spacing:-.045em;line-height:.92;
  color:var(--signal);white-space:nowrap;
  width:100vw;margin-left:calc(var(--daska) * -1);
}
.dodji__znak{
  position:absolute;right:6vw;bottom:calc(var(--daska) * -2.2);
  width:min(30vw,340px);color:var(--zelena-znaka);z-index:0;
}
.dodji__znak .znak--pun .delic--amber{fill:#0a6047}
.dodji__znak .znak--pun .delic--zeleno{fill:#095440}
.kolofon{
  position:relative;z-index:1;font-size:var(--t-natpis);line-height:1.5;
  margin-top:var(--razmak-rupa);max-width:76ch;color:#8fa79c;
  padding:18px 0 var(--razmak-rupa);
  border-top:2px solid var(--zelena-znaka);
  background-image:var(--cvet);background-size:180px 180px;
  background-repeat:repeat-x;background-position:0 22px;
}

/* =========================== fotografije ============================== */
.okvir{
  position:relative;background-size:cover;background-position:50% 50%;
  overflow:clip;
}
.okvir img{width:100%;height:auto}
.okvir--3x1{aspect-ratio:3/1}
.okvir--3x1 img{height:100%;object-fit:cover;object-position:50% 44%}
.okvir--kvadrat{aspect-ratio:1/1}
.okvir--kvadrat img{height:100%;object-fit:cover;object-position:50% 42%}
.okvir--uspravan{aspect-ratio:3/4}
.okvir--uspravan img{height:100%;object-fit:cover;object-position:50% 40%}
.okvir--krug{aspect-ratio:1/1;border-radius:50%}
.okvir--krug img{height:100%;object-fit:cover}
.plan__inset .okvir{aspect-ratio:2/3}
.plan__inset .okvir img{height:100%;object-fit:cover;object-position:50% 34%}
.plan__pruga .okvir--3x1 img{object-position:50% 58%}
.plan__pruga .okvir--3x1{aspect-ratio:3.6/1}
/* jedna gradacija na svakom fajlu: toplo gore, cijan dole, crna podignuta
   za dva procenta da tamne slike sednu na ugalj umesto da probiju rupu */
.okvir img{filter:saturate(1.04) contrast(.985) brightness(1.02) hue-rotate(-3deg)}
/* arhivski red: zeleno-signal duotona samo na starijim dokumentarnim kadrovima */
.okvir img[data-arhiva]{filter:grayscale(1) sepia(.5) saturate(1.7) hue-rotate(-12deg) contrast(1.06) brightness(.98)}
.sefa__siroka .okvir--3x1 img{object-position:50% 26%}
.deo--komora .okvir img{filter:saturate(1) contrast(.97) brightness(.96) hue-rotate(-3deg)}

/* ============================ sklop ================================== */
/* Pribor dolazi iz susedne celije, prvo po x pa po y, jer je veza zidarska.
   Nijedan element ne ceka takt: svaki ima svoj oscilator. */
html.js .sklop{opacity:0}
html.js .sklop.legao{opacity:1}

/* plan se crta sam: svaki oblik nosi pathLength="100", pa je crtez procenat */
.plan__linije .crt > *{transition:stroke-dashoffset .82s var(--e-sklop)}
html.js .plan__linije .crt > *{stroke-dasharray:100;stroke-dashoffset:100}
html.js .plan__linije .crt.legao > *{stroke-dashoffset:0}

/* blende: krugovi SU rupe u dasci, gledate kroz klupu na decu */
@property --otvor{syntax:'<percentage>';inherits:false;initial-value:72%}
.rupa .okvir--krug{clip-path:circle(var(--otvor) at 50% 50%);
  transition:--otvor .74s var(--e-sklop)}
html.js .rupa .okvir--krug{--otvor:0%}
html.js .rupa.legao .okvir--krug{--otvor:72%}
html.js .braca__slika .okvir{clip-path:inset(0 100% 0 0)}
html.js .braca__slika.legao .okvir{clip-path:inset(0 0 0 0)}
.braca__slika .okvir{transition:clip-path .82s var(--e-sklop)}
html.js .braca__slika img{translate:-8% 0}
html.js .braca__slika.legao img{translate:0 0}
.braca__slika img{transition:translate .82s var(--e-sklop)}

/* brojevi u planu se pune odozdo, ne broje se */
@property --puna{syntax:'<percentage>';inherits:false;initial-value:100%}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .callout__broj{
    background-image:linear-gradient(to top,var(--med) var(--puna),rgba(233,159,34,.22) var(--puna));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  html.js .callout__broj{--puna:0%}
  html.js .callout.legao .callout__broj{--puna:100%;transition:--puna .9s var(--e-sklop) calc(var(--n) * 90ms)}
}
@media (forced-colors:active){
  .callout__broj{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}
}

/* traka se vuce, brzina se lepi na brzinu skrola */
@keyframes vuci{from{translate:0 0}to{translate:-2510px 0}}
html.js .traka__potez{animation:vuci 26s linear infinite}
html.js .traka--stoji .traka__potez{animation-play-state:paused}
.traka__pojas:hover .traka__potez,.traka__pojas:focus-within .traka__potez{animation-play-state:paused}

/* sedam okvira se izvlaci bocno iz sanduka */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    @keyframes izvuci{from{translate:calc(var(--i) * -60px) 0}to{translate:0 0}}
    html.js .celija{
      animation:izvuci linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% entry 92%;
    }
  }
}

/* =========================== podesavanja ============================== */
@media (prefers-contrast:more){
  :root{--vosak:#FFFBF0}
  .beleska,.proza--ograda,.plan__zaglavlje .proza,.deo--znanja .proza,
  .braca__slog .proza,.uvece__slog .proza,.sefa__uz .proza,.sefa__sala{color:inherit}
  .mesto__ime,.izlaz-veze a{color:var(--vosak)}
  .callout__broj{color:var(--med);-webkit-text-fill-color:var(--med);background:none}
  .pitanja li{border-bottom-color:var(--vosak)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html.js .sklop{opacity:1}
  html.js .plan__linije .crt > *{stroke-dashoffset:0}
  html.js .rupa .okvir--krug{--otvor:72%}
  html.js .braca__slika .okvir{clip-path:inset(0 0 0 0)}
  html.js .braca__slika img{translate:0 0}
  html.js .callout__broj{--puna:100%}
  html.js .traka__potez{animation:none}
  html.js .celija{animation:none;translate:0 0}
  html.js .komora__pin::before{background-color:transparent;animation:none}
  .uvece__panel{translate:0 0;animation:none}
  [data-kosi]{transform:none}
}

/* ============================= sirine ================================= */
@media (max-width:1180px){
  .komora__posle{grid-template-columns:minmax(0,1fr);gap:var(--razmak-red)}
  .sefa__sto{grid-template-columns:minmax(0,1fr);gap:var(--razmak-red);min-height:0}
  .deo--braca{grid-template-columns:minmax(0,1fr)}
  .braca__margina{grid-column:1}
  .glasovi__ostali{max-width:none;columns:2}
}

@media (max-width:900px){
  body{padding-left:0;padding-bottom:56px}
  .plan-traka{
    top:auto;left:0;right:0;bottom:0;width:auto;height:56px;
    flex-direction:row;align-items:center;
    border-right:0;border-top:2px solid var(--zelena-znaka);
    padding:0;
  }
  .plan-traka__ime{display:none}
  .rozeta{width:26px;height:26px;margin:0 8px 0 10px;flex:none}
  .plan-traka__mesta{
    flex-direction:row;justify-content:flex-start;gap:0;
    overflow-x:auto;overflow-y:clip;padding:0;
    scrollbar-width:none;
  }
  .plan-traka__mesta::before{
    left:12px;right:12px;top:auto;bottom:14px;width:auto;height:2px;
  }
  .mesto a{flex-direction:column;gap:1px;min-width:44px;padding:6px 7px 8px!important;
    justify-content:center}
  .mesto__crtez{width:19px;height:19px}
  .mesto__ime{font-size:8px;letter-spacing:.06em;max-width:8ch;text-overflow:clip}
  .mesto--marker{top:1px;bottom:auto;left:0;translate:var(--marker-x,0px) 0}
  .marker,.marker svg{width:16px;height:16px}
  .plan-traka__izlaz{
    flex-direction:row;align-items:center;gap:0;padding:0 2px 0 3px;
    border-left:2px solid var(--zelena-znaka);height:100%;flex:none;
    background:var(--ugalj);max-width:none;
  }
  .jezik{min-width:44px;min-height:44px}
  /* Na telefonu izlaz stoji u redu, ne u stubu: tri cilja od 44x44 ne staju
     jedan ispod drugog u traku od 56 px, a manji cilj od 44 px je promasaj. */
  .izlaz-veze{flex-direction:row;justify-content:center;align-items:stretch}
  .izlaz-veze li{display:flex}
  .izlaz-veze a{
    min-width:44px;min-height:44px;width:44px;
    flex-direction:column;justify-content:center;align-items:center;
    text-align:center;white-space:normal;overflow-wrap:anywhere;
    font-size:7.5px;line-height:1.15;letter-spacing:.04em;padding:0 2px;
  }

  /* hero: fotografija ostaje preko cele sirine, slog na zelenom polju ispod */
  .deo--dolazak{min-height:640px}
  .dolazak__slika{inset:0}
  .dolazak__slika img{object-position:60% 36%}
  .dolazak__znak{left:-14vw;top:14%;width:62vw}
  .dolazak__krilo{left:calc(50% - 28vw);top:-10vw;width:56vw;height:28vw}
  .natpis--na-slici{right:var(--razmak-rupa);top:calc(var(--razmak-rupa) + 42px);left:auto;
    max-width:17ch}
  .dolazak__slog{width:100%;padding:var(--razmak-rupa);
    padding-bottom:calc(var(--razmak-rupa) + 62px)}
  .dolazak__tvrdnja{font-size:clamp(34px,8.6vw,58px)}

  .deo--vec-ste{height:auto;padding:var(--razmak-red) var(--razmak-rupa);
    flex-direction:column;align-items:flex-start;gap:var(--razmak-rupa)}
  .vec-ste__red{gap:18px}
  .objekat__crtez{height:66px}
  .objekat--znak .znak{width:64px}
  .objekat--plakat .znak{width:60px}
  .objekat--tabla .znak{width:50px}
  .objekat--rozeta .rozeta{width:40px;height:40px}
  .vec-ste__tvrdnja{margin-left:0;text-align:left;max-width:none}

  .deo--plan,.deo--znanja,.deo--sefa,.deo--braca,.deo--dodji{
    padding-left:var(--razmak-rupa);padding-right:var(--razmak-rupa)}
  .deo--plan{padding-top:var(--razmak-red)}
  .plan__ime{width:92vw;margin-left:0}
  .plan__inset{position:relative;right:auto;top:auto;width:min(62vw,280px);
    margin:var(--razmak-rupa) 0 0 auto}
  /* na telefonu povlaka postaje pravilo iznad broja: legenda plana, ne lebdeci broj */
  .callout{position:static;transform:none;margin-top:14px;width:100%;
    align-items:flex-end;text-align:right;border-top:2px solid var(--zelena-znaka);padding-top:6px}
  .plan__brojevi{display:block}
  .plan__crtez{display:flex;flex-direction:column}
  .plan__brojevi-mob{display:grid}
  .plan__pruga .natpis{margin-left:0}

  .sata__zaglavlje{padding:0 var(--razmak-rupa);grid-template-columns:minmax(0,1fr);
    grid-template-areas:'oznaka' 'naslov' 'proza' 'sanduk';row-gap:var(--razmak-rupa);
    min-height:auto}
  .sata__sanduk{justify-self:start;width:min(86%,300px)}
  .deo--dva-sata{min-height:auto;padding-top:var(--razmak-red)}
  .sata__pozornica{min-height:auto;margin-top:var(--razmak-red)}
  .sine__traka{padding:0 var(--razmak-rupa)}
  .sata__sat{padding:0 var(--razmak-rupa)}
  .grozd figure{width:150px}
  .celija--900,.celija--1100{width:88vw}
  .celija--640,.celija--760{width:80vw}
  .celija--380,.celija--420{width:58vw}

  .komora__pin{align-items:flex-end}
  .komora__fasada{inset:0}
  .komora__slog{margin-left:0;width:100%;padding:var(--razmak-rupa)}
  .komora__posle{padding:var(--razmak-red) var(--razmak-rupa) 0}
  .komora__dve{flex-direction:column}
  .komora__dve .van-daske{margin-top:0;margin-left:14vw}

  .pitanja{margin-left:2.9em}
  .sefa__sala{margin-left:0}
  .tabla{aspect-ratio:6/5}
  .sefa__slike{grid-template-columns:minmax(0,1fr)}
  .sefa__uspravna,.sefa__kvadrat{margin-top:0;width:min(64vw,320px)}
  .sefa__kvadrat{margin-left:auto}

  .znanja__pitanje{font-size:clamp(32px,10vw,64px)}
  .znanja__list{gap:14px}
  .rupa--1{width:52vw}.rupa--2{width:40vw}.rupa--3{width:44vw}
  .rupa--4{width:36vw}.rupa--5{width:46vw}.rupa--6{width:40vw}.rupa--7{width:34vw}

  .uvece__hor{width:96vw;margin-right:-4vw}
  .uvece__slog,.uvece__tri{padding-left:var(--razmak-rupa);padding-right:var(--razmak-rupa)}
  .uvece__a{width:86vw}.uvece__b{width:56vw}.uvece__c{width:40vw}
  .uvece__panel{height:22vw}

  .deo--glasovi{height:auto;min-height:0;padding:var(--razmak-red) var(--razmak-rupa)}
  .glasovi__ostali{columns:1;margin-top:var(--razmak-rupa)}
  .glasovi__wow{font-size:clamp(44px,13vw,90px)}

  .braca__slika{margin-left:0;width:100%}
  .dodji__kraj{white-space:normal;width:auto;margin-left:0;
    font-size:clamp(40px,13vw,90px)}
  .dodji__znak{width:52vw;right:-8vw;bottom:-6vw}
  .trazenja{max-width:none}
}

@media (max-width:520px){
  .grozd{flex-wrap:wrap}
  .grozd figure{width:calc(50% - 6px)}
  .sefa__uspravna{width:78%}
  .sefa__kvadrat{width:62%;margin-left:auto}
  .rupa--1{width:60vw}.rupa--2{width:46vw}.rupa--3{width:52vw}
  .rupa--4{width:42vw}.rupa--5{width:54vw}.rupa--6{width:46vw}.rupa--7{width:40vw}
}

/* ================ LQIP, 24x24 zamucene slicice ispod svake slike =========== */
.lqip-amfiteatar{background-image:url("data:image/webp;base64,UklGRpoAAABXRUJQVlA4II4AAAAQBQCdASoYABgAPtViq1AoJSOiqAgBABqJZAC1GyGAvPbRqf0HmCc7nFdZ3pjvpmQAAP7llCEfnXytufvq1ArcUqRxhUi9q5GvMWtkJkCsH7+q1ZK9NpW2ii4NQqKQf0Y0PevuxLU7eJc1kH2SdoYeLUwvg9mkwDGYc77J6QKswkGpVoQu9MEnXAy7VaAA")}
.lqip-bioskop{background-image:url("data:image/webp;base64,UklGRnQAAABXRUJQVlA4IGgAAADQBACdASoYABgAPtVcokwoJaMiMBgMAQAaiWMAzNAMFUlJnWltzPqf9aZJP/nSAAD+7EjOJ3p+7UhUft6TY/WTuWgecdzhQRb8HGcTN1cktAsnWtNWnHvLdqh2+09SVTReGLbTK4AAAA==")}
.lqip-braca-kosnice{background-image:url("data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAABQBQCdASoYABgAPtVkqlAoJSOiqAgBABqJQBdmZDAv50quJqqnWfiC4UmgoKHD2G+FHAAA/tHEEgohgeq4MbHopoZ9CDwe/xgue2jDruJb3ucT19w1VTVd6l1xqg2uqEDiHGxsjS824laPwovzJkNZlz0o3opptAjx8utGJrzY/r1jyY4VBkIJwiAJRywTQIjk2B00lVFEAA==")}
.lqip-brendirane-kosnice{background-image:url("data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAADwBACdASoYABgAPtVmrVEoJSQiqAgBABqJYgC1G47IdCRbh80aArCL/B3ljyCPAIAA/vW4CdvPv3XpL2kOkUT+eGI1q8lyTzeHmOXTcUSKFliOr49KDil80FS5dde+L8Iu+l8sdQcCoBcHUEMKyEHemzvW1BNswlkpJzO2lNDCAAAA")}
.lqip-dario-ram{background-image:url("data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAABwBQCdASoYABgAPtViqVAoJSOiqAgBABqJQBajUAA1BSGBPgZYQsNld+/MW+M+brqfcmNgAOJ+tGT0pJTAdsFjSq5fmE2PEFlSAXq9NPxUZE3jcT6Z/2/XbVqxAWIdb5GVZSvJyOxktjgunm8SyCrrnmgNY2QAaXQ0izDlY4bvxSs6sHA8WrSS7K/AjfGDCYOwbTZ2huaqXfwiYAA=")}
.lqip-daske-otvori{background-image:url("data:image/webp;base64,UklGRpQAAABXRUJQVlA4IIgAAACwBQCdASoYABgAPsVMokwnpCMiN/qoAPAYiUATpll+UAGYiwrCntd/OJ6S98V8XXuGJ58GDQAA/vaT5g+ua8YwTctQG8EYfiXJF4SdpMwNFMeF6pTNl+orrVy204x2ELvwg5sS8S58ul7DRGnjqmgOqKxKb6+ZkWHjGnJm2pHiMXaCk686gAAA")}
.lqip-deca-komora{background-image:url("data:image/webp;base64,UklGRpwAAABXRUJQVlA4IJAAAABQBQCdASoYABgAPtVapkyoJSOiKA1RABqJbACdMoR+ABKoyVfOcI0Ey7SWPO0XCHBlMkAA/RoxmJcfneSk2XdU9hBCsQl+g8QZfybndymeNQqftUKi34HIsscp/MGQbMlnC3p6mQtqRIxtSj8p/rSll1c3/ZE+0dn97g3q9afTtOadN38L73F50akbajKAAAA=")}
.lqip-deca-med{background-image:url("data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAACQBACdASoYABgAPtViq06oJaQiKAqpABqJQBdmcdg1KTr9f3T1/ttClKf2IkAA/u6ZxlmCkXVYVRppUh/Z/D3a5sgKV/195sJHvitnm6FU0x8Fc7kyHf0VoBTHAoZMVG40YIuyViUdf8FEcWrMKzyT1NXYzdkCOfgAAA==")}
.lqip-deca-odusevljeni{background-image:url("data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAAAwBQCdASoYABgAPs1Wo0wnpSMiMAwA8BmJYgCdMuFYAAwKJjgkt4UEQ5O9486kktsP4AD+wdHM97zb3pffUY79EI8TWqkckcR8bEtwlnxAXwrbrsZvYWJO0XcRBD4z7ypWnVJYQK2k5UskyjTyU8VlcnRB8GkKVyOw0Qb6E2BaU3hu1zTIXOXj5DRjUvaG2Whh5v/cYaBA6pjgAAA=")}
.lqip-deca-oprema{background-image:url("data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAABQBQCdASoYABgAPtVaokwoJSMiMBgMAQAaiWUAv+wPSvx6LFtOwfucsrCCcCEvLMP3YAAA/uRevFeDQP8kdcdWpnGUOQTvrB6mE8Lpyek8S1mhG74lKlJmbSVkkILrl13raJbZ51MFPuikNfJN4y5Z8AA=")}
.lqip-deca-razgovor{background-image:url("data:image/webp;base64,UklGRpAAAABXRUJQVlA4IIQAAABwBQCdASoYABgAPtVUo0yoJCMiMBgMAQAaiWQAnTLMAUjc4J6uVLSWcONKI2P/4c/vB3uQAP4WUsG8g8GuBWnkqd7/YaGVvWey+hlNnyEy8odaR0TK5t/iYCtlIfib5uyLQ/i1UvSdhnLSAsMlAElLVad0HZwdVEfxdwd1MdTIhnl4AAA=")}
.lqip-deca-red{background-image:url("data:image/webp;base64,UklGRoAAAABXRUJQVlA4IHQAAACwBACdASoYABgAPtVaqEwoJSQiMAgBABqJYwCw7CHOIACP2Qpy3m4AJ+ouefbAAP7uht5AWirHsrsxui8nZiAWTrQIHy19y6maAi9csWD9ysfy4emfXprnc0xZ7CPHMYbTuIcjgWt/LslNtV1Sj6W8n3AAAA==")}
.lqip-deca-sace{background-image:url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAABQBQCdASoYABgAPsVQoEwnpKMiN/qoAPAYiWoAnTMziBAZGlw0bpbs3Ax6A4gpwO4JmWAA/p78BglZ4nVoUif5scUnua0T6lbYO8P/FER4nGznhdWuvmOSGQQ9Fz4YL66zFEGS/UX760n1AMh/87w4byyOtcvU4vEWHTtRPvsgAA==")}
.lqip-deca-staklo{background-image:url("data:image/webp;base64,UklGRo4AAABXRUJQVlA4IIIAAACwBQCdASoYABgAPtVeqE2oJSQiMBgIAQAaiUATpmX4NUNCJDgYrQE0qG5bNQC29wWyuuSOy4AA/vKxbcdx6f8jqtuwJk0i4etrA6lV8ArfJDVVrHMo7r6W2TX2wPWm27O42Vg0a0uN7SnjgtNPuugmx+oE4Lo/R6VHZnS3p6wAkAAA")}
.lqip-dj-mural{background-image:url("data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAAAwBQCdASoYABgAPtVcpkwoJaOiMAgBABqJbACdMoPNTsaDHDji+6yqinlSo7q8iY/vgAD+wajqLIah5RyFzm1sWgtJqdAIi9LRD13f17Ub1bCebBYcKXGsoTsIsAtvDEeAq64PqZ88DQi0PmN24XU6vQhLkxyhoXtsuSO9koPcRvS6eBVQ5g94rKDXMMrvO0BMKDv+jtu6CgAA")}
.lqip-hor-vece{background-image:url("data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAADQBACdASoYABgAPtFSo0woJKMiN/VYAQAaCWMAwNwJUdRnsh7KQTbY6P0B9XIKYAD+5CMrLc59kLk2okiAqZi/Vu28ViVGpxMX59Fc34TMsorcqcaYPD48Gc9FnSyXAhodh10xX0nkDX5iwuaUFs8R9FhfAAAA")}
.lqip-inhalacija-soba{background-image:url("data:image/webp;base64,UklGRqIAAABXRUJQVlA4IJYAAAAwBQCdASoYABgAPtFSo0woJKMiN/VYAQAaCWoAnTKEYgACKA+B5Zv4sbL1/jFOWD1gAAD9Q8bLG8NyQP+QP0hQ6Ftdx9z/8r5uh/rrt4z2z23SBYNYxcDsDTHBGyevprrU5aN2uItMIbG3A4slbijHWkTmsXBTfayVPBj6Ii7nzTfqRgS5GPm5qXHOf6zfMiHgk8Wa0AA=")}
.lqip-komora-fasada{background-image:url("data:image/webp;base64,UklGRqQAAABXRUJQVlA4IJgAAABwBQCdASoYABgAPtVYpkyoJSOiKA1RABqJYgCdMtpBKCsR5jHgHtP3JHzNEU1F2nCsouCAAP4jSIlUlxjhMO9jNpntfLlb+WE/q9mb3VnqxMKqL4Wa5F4dl9inqVkc4ggfkFdfz29h1EgzMo2C6WlmxHp7RQDyYzc60//9z8klxBwy2r36JXgvlzrvSod0x/JZBReo3p8AAA==")}
.lqip-letnja-daska{background-image:url("data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAABwBACdASoYABgAPtVkq1AoJSOiqAgBABqJZQCxHwnBcKVAa1Sc1lyM1bD+AAD4WX+tri+fD6sO4kmHbjA9W3W2PW52/gqz8PnJWaOfFtxP0QF2xj06eenpJLZq10VXBYcNDIfV26rdnlUVTKKkhxS28eSqt8AA")}
.lqip-nordic-grupa{background-image:url("data:image/webp;base64,UklGRoYAAABXRUJQVlA4IHoAAADQBACdASoYABgAPtVSp0woJKOiMBgMAQAaiWQAeDIBqnyZrr287aRkprA32T6FwAD+6eeFQqHkabCQYnXB7PM/8kE2OlJuY2mErwXwn2N8Xx6oAXQPZuQgbI/uea0Xa58VY98JTqlEYHb0EY9eBeXmHGMigP+ulqAAAA==")}
.lqip-pcele-sace-vert{background-image:url("data:image/webp;base64,UklGRnYAAABXRUJQVlA4IGoAAABQBQCdASoYABgAPtVUpk4oJCOiMBgIAQAaiWMAnS+2gOjT6wEag6qS8Zz4zDwhp8BQqwAA/ujY3FDs/PtLZpAAJzGNzGePaYUHhVFSjOuWrbEZDICRlZfNXljjH2Uk3ElUV6nCV+PoAAAA")}
.lqip-sace-uz-svetlo{background-image:url("data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAADQBQCdASoYABgAPsVOoUwnpCMiN/qoAPAYiWoAnTLdcxhIKCwgKQ6c6etUbJe+KwgMU/Un1CJAAPz/UdonhhPwdkmNIKaBJ4iEbgkro3k3S5D/NF4yBWPMy0wia+TmiCWKQ2Xc03LNFvwzxkTtnvu5OgBdJIbN4m4D2qOnlpoM0JJZ8jNhOM6mZNQxZqDS+6m0PQjj9ObmeTTRN43eKoAA")}
.lqip-silosi-stepenice{background-image:url("data:image/webp;base64,UklGRqgAAABXRUJQVlA4IJwAAABwBQCdASoYABgAPtVapU2oJSMiMBgIAQAaiUAYH5f4h3jkRR5bDR6+C0qR8xHlHdJXzEpAAMwRpjiLjEk7ZS5dnVqxFFcXb3qZQsdLC7UCvMlcaRu58FCpzE/o2tBBKjUgv0J+3lwM5Fk4dkx61du3041npnwEwcBINQR4ssFeyjD3tvgfc/NintMu4bo6Hynw3WWhgOKAAsgAAAA=")}
.lqip-sto-vencanje{background-image:url("data:image/webp;base64,UklGRqYAAABXRUJQVlA4IJoAAAAwBQCdASoYABgAPtVcpU2oJSMiKA1RABqJQBOmUAArIYVijnQHvUbytmRa+KHUDzGOAAD+2nH2Mq28ufj/N16K96936QAnW47Qha3hV6XZ2qhUrGaJjreKQPgfcyAyPBARP6yG+3sDpz4nyesiBWSSchkkd8fL0R8fczMmDn1zE8yS8wZ5OuewqzkNN86YZFh0oIUyT0orAAAA")}
.lqip-tegla-kosnica{background-image:url("data:image/webp;base64,UklGRoIAAABXRUJQVlA4IHYAAACwBACdASoYABgAPtFapkwoJaOiMBgMAQAaCUAToAaMSKYb28JIlwsOnozA4gsAAP7yqktkGd/26nz8PfSFHeCML97sIuo7Otf8xAIiHCAhtJd3sl4SkdP+J0Ux3Oq4cv9sq6Zj4ThmZx9noBMsB3jAzjugmgAA")}
.lqip-timbilding{background-image:url("data:image/webp;base64,UklGRq4AAABXRUJQVlA4IKIAAADQBQCdASoYABgAPtVeqk6oJSQiKAqpABqJYgC7My/BWRlEv29ieL+x8v6+pnSE+enJy6JwBhSgAM2mIFMtK2vdnnHwTmqbZmO30yvqsA7fIH5NpEhmb18tOCLG9T+3/zagS9BzA3ln/t+33u8XSLDRH2h+CbiA/d+JUn5MOSRuTFZ1MBvleFERa/gROnoqIksrHqugy6M+fBMmpaA3kzpAAAA=")}
.lqip-vrt-kanopi{background-image:url("data:image/webp;base64,UklGRp4AAABXRUJQVlA4IJIAAADwBACdASoYABgAPslUo0wnpKMiMAwA8BkJaACdABYmsYCnw7HAaPCKcQQIS5aLqAAA/uy9HYVMv4R4voGXxLEY96y5vT039T9689rQ0krXv8/F3N1dBzQK/KEt1MlHuy0vm16c5k4kV1GUy+wyFasmflT9tWXUIVmvpcuOvY1bwBv2jDt9v3vgdE1bQlFWnlUAAA==")}