@charset "utf-8";
/* ============================================================
   BeeCenter · Ispod dasaka
   Boje su očitane sa piksela u imenovanim fotografijama.
   U ovom fajlu nema nijedne senke, nijednog radijalnog gradijenta
   i nijednog blur filtera. Ništa u toj sobi ne svetli.
   ============================================================ */

@view-transition { navigation: auto }

/* ---- 1. lice ---------------------------------------------- */

@font-face{
  font-family:'Bodoni Moda';
  src:url('../assets/fonts/bodoni-moda-italic-var.woff2') format('woff2-variations');
  font-weight:400 900; font-style:italic; font-display:swap;
}
@font-face{
  font-family:'Bodoni Moda';
  src:url('../assets/fonts/bodoni-moda-var.woff2') format('woff2-variations');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Alegreya';
  src:url('../assets/fonts/alegreya-var.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Alegreya';
  src:url('../assets/fonts/alegreya-italic-var.woff2') format('woff2-variations');
  font-weight:400 700; font-style:italic; font-display:swap;
}

/* ---- 2. tokeni -------------------------------------------- */

:root{
  /* boje, svaka očitana sa piksela */
  --mrak:#1A0900;        /* tlo stranice, toplo smeđe-crno */
  --bocna:#3B1600;       /* izbušena bočna strana ležaja */
  --bor-senka:#814810;   /* bor u senci: svaka linija od 1px */
  --bor-svetlo:#E08A35;  /* osvetljeni bor: površina crtane klupe */
  --rub:#E0A863;         /* osvetljeni rub izbušene rupe */
  --vosak:#F1E0C0;       /* voštani papir: sav slog na tamnom */
  --zastor:#C9CAD1;      /* dnevno svetlo kroz roletnu. JEDINA svetlost */
  --znak:#006335;        /* zelena iz znaka, isključivo za radnje */
  --zvezda:#048546;      /* zelena zvezda iz oslikanog pojasa */
  --krst:#F55C91;        /* magenta krst iz oslikanog pojasa */
  --zuta-hex:#F9DF1B;    /* linijska pčela sa heksagona */
  --dimnjak:#C55423;     /* dimnjak. Potrošen tačno dvaput */
  --praznina:#140901;    /* šupljina rupe */

  /* krive */
  --dah:cubic-bezier(.16,1,.3,1);
  --dodir:cubic-bezier(.25,1,.5,1);
  --stani:cubic-bezier(.65,.05,.36,1);
  --odlazak:cubic-bezier(.55,0,1,.45);
  --vlakno:linear;

  /* razmaci, po značenju */
  --u-splet:6px;
  --u-blok:36px;
  --u-poglavlje:140px;
  --u-praznina:300px;
  --u-vrata:0px;

  /* mreža */
  --kicma:1008px;
  --razmak:24px;
  --pretek:clamp(0px, calc((100vw - 116px - 1008px)/2 - 32px), 120px);
  --uvala:0px;

  /* stanje */
  --priv:0;
  --napredak:0;

  color-scheme:dark;
}

*,*::before,*::after{ box-sizing:border-box }

html{ background:var(--mrak) }
html.lenis,html.lenis body{ height:auto }
.lenis.lenis-smooth{ scroll-behavior:auto !important }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior:contain }

body{
  margin:0;
  padding-left:var(--uvala);
  background:var(--mrak);
  color:var(--vosak);
  font-family:Alegreya,'Iowan Old Style','Palatino Linotype',Georgia,serif;
  font-optical-sizing:auto;
  font-size:19px;
  line-height:1.66;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
  hyphens:manual;
}
img{ display:block; max-width:100%; height:auto }
figure{ margin:0 }
p,h1,h2,h3,ol,ul,blockquote{ margin:0; padding:0 }
ol,ul{ list-style:none }
a{ color:inherit }

::selection{ background:var(--zuta-hex); color:var(--mrak) }

/* Navodnici su tipografija stranice, a ne deo citata. Zato dolaze iz
   CSS-a: prekidač za jezik ne može da ih dodirne, pa nijedan citat ne
   može da bude prepunktuiran. Srpski „ ”, engleski “ ”. */
:root{ --navod-o:"„"; --navod-z:"”" }
html[lang="en"]{ --navod-o:"“"; --navod-z:"”" }
.prikaz__red:first-child > span::before{ content:var(--navod-o) }
.prikaz__red:last-child > span::after{ content:var(--navod-z) }
.glas blockquote p::before{ content:var(--navod-o) }
.glas blockquote p::after{ content:var(--navod-z) }
.izvod::before{ content:var(--navod-o) }
.izvod::after{ content:var(--navod-z) }

:focus-visible{ outline:2px solid var(--zuta-hex); outline-offset:3px; transition:none }
.kazu :focus-visible,.gde :focus-visible{ outline-color:var(--bocna) }

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

.kutija-znakova{ position:absolute; width:0; height:0; overflow:clip }

/* ---- 3. tipografska lestvica ------------------------------- */

.oznaka{
  font-family:Alegreya,Georgia,serif;
  font-size:13px; font-weight:500; line-height:1.5;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  letter-spacing:.05em;
  color:var(--rub);
  display:flex; align-items:center; gap:8px;
}
.potpis{
  font-family:Alegreya,Georgia,serif;
  font-style:italic; font-size:14px; line-height:1.42;
  font-variation-settings:'opsz' 14;
  color:var(--rub);
  max-width:44ch;
}
.telo{
  font-size:19px; line-height:1.66;
  font-variation-settings:'opsz' 19;
  max-width:62ch;
  text-wrap:pretty;
}
.uvod{
  font-size:clamp(22px,1.4vw + 15px,31px);
  font-weight:500; line-height:1.34;
  max-width:34ch;
  text-wrap:balance;
}
.izvod{
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:600; font-size:28px; line-height:1.22;
  font-variation-settings:'opsz' 24;
  text-wrap:balance;
}
.prikaz{
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:800;
  font-size:clamp(52px,12vw,164px);
  font-variation-settings:'opsz' 24;
  letter-spacing:-.012em;
  line-height:1.02;
}
.cifre{ font-variant-numeric:tabular-nums }

/* ---- 4. mreža --------------------------------------------- */

.mreza{
  --kol:calc((100% - 11 * var(--razmak)) / 12);
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--razmak);
  width:min(100% - 48px, var(--kicma));
  margin-inline:auto;
}

/* ---- 5. crtana klupa --------------------------------------- */

.klupa{ position:absolute; inset:0; overflow:clip }
.klupa__crtez{ position:absolute; inset:0; width:100%; height:100% }
.klupa__rupe{ position:absolute; inset:0 }

.klupa--hero{
  --zbijeno:.6; --pomak-svetla:-60px; --zrcalo:-1;
  --p1:#301B05; --p2:#3A2107; --p3:#48290A; --p4:#5C350E;
  --p5:#7A4712; --p6:#8E5316; --p7:#A05F1A; --p8:#B0691F;
}
.klupa--komora{
  --pomak-svetla:90px; --zrcalo:1;
  --p1:#B0691F; --p2:#A05F1A; --p3:#8E5316; --p4:#7A4712;
  --p5:#5C350E; --p6:#48290A; --p7:#3A2107; --p8:#301B05;
}

.red{ position:absolute; inset:0 }
.red > i{
  position:absolute; left:50%; top:var(--rowY);
  width:calc(var(--rmax) * 2px);
  height:calc(var(--rmax) * var(--squash) * 2px);
  transform:translate(calc(var(--k) * var(--rowW) - 50%), -50%);
  background:var(--praznina);
  border-radius:50%;
  --n:1;
  --r:calc(clamp(0, (var(--priv) - var(--n) * .45) / .55, 1) * var(--rmax));
}
.red > i::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:1px solid transparent;
  border-top-color:var(--rub); border-right-color:var(--rub);
}
.red > i::before{
  content:''; position:absolute; inset:0;
  background-repeat:no-repeat;
  background-size:800px 1199px;
  background-position:
    calc(var(--rmax) * 1px - 400px - var(--k) * var(--rowW))
    calc(var(--sidro) - 430px - var(--rowY) + var(--rmax) * var(--squash) * 1px);
  clip-path:ellipse(calc(var(--r) * 1px) calc(var(--r) * var(--squash) * 1px) at center);
}
.klupa--zivo .red > i::before{
  background-image:url('../assets/img/daske/pcele-sace-vert-800.webp');
  background-image:image-set(
    url('../assets/img/daske/pcele-sace-vert-800.avif') type('image/avif'),
    url('../assets/img/daske/pcele-sace-vert-800.webp') type('image/webp'));
}

.klupa{ --sidro:58svh }
.klupa--komora .red--1{ --rowY:79.2svh; --squash:.62; --rmax:34; --rowW:360px }
.klupa--komora .red--2{ --rowY:66.6svh; --squash:.52; --rmax:28; --rowW:306px }
.klupa--komora .red--3{ --rowY:55.7svh; --squash:.43; --rmax:23; --rowW:252px }
.klupa--komora .red--4{ --rowY:46.3svh; --squash:.35; --rmax:19; --rowW:200px }
.klupa--komora .red--5{ --rowY:37.9svh; --squash:.28; --rmax:16; --rowW:152px }
.klupa--komora .red--bok{ --rowY:91svh;  --squash:.92; --rmax:15; --rowW:380px }

.klupa--hero .red--1{ --rowY:87.55svh; --squash:.62; --rmax:30; --rowW:360px }
.klupa--hero .red--2{ --rowY:79.97svh; --squash:.52; --rmax:25; --rowW:306px }
.klupa--hero .red--3{ --rowY:73.45svh; --squash:.43; --rmax:21; --rowW:252px }
.klupa--hero .red--4{ --rowY:67.78svh; --squash:.35; --rmax:17; --rowW:200px }
.klupa--hero .red--5{ --rowY:62.77svh; --squash:.28; --rmax:14; --rowW:152px }
.klupa--hero .red > i{ --n:9 }
.klupa--hero .red > i.rupa--krupna{
  --n:0; --rmax:75;
  --r:calc(clamp(0, var(--priv) * 8, 1) * (.24 + .76 * clamp(0, var(--priv), 1)) * var(--rmax));
}

/* ---- 6. radnja: rupa koja je popunjena --------------------- */

.cin{
  display:inline-flex; align-items:center;
  min-height:44px;
  text-decoration:none; color:var(--vosak);
  --d:58px;
}
.cin--44{ --d:44px }
.cin--28{ --d:28px }
.cin__krug{
  flex:none; width:var(--d); height:var(--d);
  border-radius:50%;
  background:var(--znak);
  border:1px solid var(--rub);
  display:grid; place-items:center;
}
.cin__krug .ikona{ width:20px; height:20px; stroke:var(--vosak); opacity:.9 }
.cin--28 .cin__krug .ikona{ width:14px; height:14px }
.cin__natpis{
  font-size:15px; line-height:1;
  padding:0 0 9px 14px;
  width:220px; max-width:44vw;
  border-bottom:1px solid var(--rub);
  transition:border-bottom-width 140ms var(--dodir), padding-bottom 140ms var(--dodir);
}
.cin:hover .cin__natpis{ border-bottom-width:2px; padding-bottom:8px }
.cin--44 .cin__natpis{ width:190px }
.cin--28 .cin__natpis{ width:150px; font-size:14px }

/* ---- 7. crtani znaci --------------------------------------- */

.ikona{
  width:22px; height:22px; flex:none;
  fill:none; stroke:var(--rub); stroke-width:2;
  stroke-linecap:butt; stroke-linejoin:miter;
}
.ikona--sitna{ width:16px; height:16px; stroke-width:2.2 }
.ikona--u-krugu{ stroke:var(--vosak) }

/* ---- 8. levi indeks ---------------------------------------- */

.indeks{
  position:fixed; left:0; top:0; bottom:0; z-index:20;
  width:116px; padding:26px 0 26px 18px;
  display:flex; flex-direction:column; justify-content:center; gap:18px;
  pointer-events:none;
}
.indeks a,.indeks button{
  pointer-events:auto;
  font-family:Alegreya,Georgia,serif;
  font-size:13px; font-weight:500; line-height:1.2;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  letter-spacing:.05em;
  color:var(--bor-svetlo);
  text-decoration:none;
  background:none; border:0; padding:6px 4px; margin:0;
  display:block; text-align:left; cursor:pointer;
  transition:color 140ms var(--dodir);
}
.indeks a:hover{ color:var(--vosak) }
.indeks__lista li + li{ margin-top:2px }
.indeks__lista a[aria-current]{ color:var(--vosak); font-weight:700 }
.indeks__lista a[aria-current]::after{
  content:''; display:block; width:20px; height:1px;
  background:var(--rub); margin-top:3px;
}
.indeks__jezik{ margin-top:12px }
.jezik[aria-pressed="true"]{ color:var(--zuta-hex) }
.indeks__nazad{
  border-top:1px solid var(--bor-senka);
  padding-top:12px; margin-top:4px;
}
.indeks .indeks__prekidac{ display:none }
html.js .indeks{ opacity:0; transition:opacity 240ms var(--dodir) }
html.js .indeks[data-vidljiv]{ opacity:1 }

@media (min-width:900px){ :root{ --uvala:116px } }

/* ---- 9. C1 · otvor ----------------------------------------- */

.otvor{
  position:relative; height:100svh; overflow:clip;
  background:var(--mrak);
}
.otvor__slog{ position:relative; padding-top:4svh }
.prikaz{
  grid-column:2 / 13;
  view-transition-name:smer-c;
  color:var(--vosak);
}
.prikaz__red{
  display:block; overflow:clip;
  padding-bottom:.02em;
}
.prikaz__red:first-child{ text-indent:-.42em }
.prikaz__red > span{ display:block; white-space:nowrap }
html.js .prikaz__red > span{
  transform:translateY(.38em); opacity:0;
  animation:dizanje 640ms var(--dah) both;
}
.prikaz__red:nth-child(1) > span{ animation-delay:420ms }
.prikaz__red:nth-child(2) > span{ animation-delay:516ms }
.prikaz__red:nth-child(3) > span{ animation-delay:612ms }
@keyframes dizanje{ to{ transform:translateY(0); opacity:1 } }

html.js .klupa--hero .klupa__crtez{ animation:svetla-gore 420ms var(--dah) both }
@keyframes svetla-gore{ from{ opacity:.2 } to{ opacity:1 } }

.otvor__oznaka{
  position:absolute; left:32px; bottom:32px;
  font-size:13px; font-weight:500; line-height:1.4;
  font-feature-settings:"smcp" 1,"c2sc" 1;
  letter-spacing:.05em;
  color:var(--rub);
}
.otvor > .cin{ position:absolute; right:32px; bottom:32px }

/* ---- 10. C2 · skini sat ------------------------------------ */

.skini-sat{
  height:180px; background:var(--bocna);
  display:flex; align-items:center;
}
.skini-sat .mreza{ width:min(100% - 48px, var(--kicma)) }
.skini-sat__linija{
  grid-column:5 / 12; text-align:right;
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:600; font-size:28px; line-height:1.28;
  font-variation-settings:'opsz' 24;
  color:var(--vosak);
}

/* ---- 11. oslikani pojas ------------------------------------ */

.pojas{ line-height:0; overflow:clip }
.pojas svg{ display:block; width:100% }
.komora > .pojas{ margin-top:var(--u-praznina) }
.pojas--kraj{ margin-top:var(--u-poglavlje) }

/* ---- 12. C3 · ispod dasaka --------------------------------- */

.komora{
  position:relative; background:var(--mrak);
  height:calc(300svh + 320px);
  overflow:clip;
}
.komora__scena{
  position:sticky; top:0; height:100svh; overflow:clip;
  display:grid; grid-template-columns:1fr;
}
.komora__scena > *{ grid-area:1 / 1 }
.klupa--komora{ position:sticky; top:0; height:100svh; align-self:start }
.komora__sadrzaj{ position:relative; z-index:1; height:100% }

.komora__kolona{
  position:absolute; top:8svh;
  left:calc(50% + 12px); width:min(452px, 44vw);
  padding-left:20px;
}
.komora__spina{
  position:absolute; left:0; top:0; bottom:0; width:1px;
  background:var(--bor-senka);
}
.komora__spina::after{
  content:''; position:absolute; left:0; top:0; width:1px;
  height:calc(var(--napredak) * 100%);
  background:var(--rub);
}
.beat{
  font-size:19px; line-height:1.66; font-weight:400;
  font-variation-settings:'opsz' 19;
  color:var(--rub);
  margin-bottom:var(--u-blok);
  text-wrap:pretty;
  transition:color 220ms var(--dodir);
}
.beat.je-aktivan{ color:var(--vosak) }
.komora__kolona h2.beat{ font-size:19px; font-weight:600 }

.zvuk{ margin-top:calc(var(--u-blok) * 1.2) }
.zvuk__dugme{
  display:flex; align-items:center; gap:10px;
  min-height:44px; padding:8px 10px 8px 0;
  background:none; border:0; cursor:pointer;
  color:var(--vosak); font-family:inherit; font-size:15px;
}
.zvuk__dugme[aria-pressed="true"] .zvuk__natpis{ color:var(--zuta-hex) }
.zvuk__dugme[aria-pressed="true"] .ikona{ stroke:var(--zuta-hex) }
.zvuk__nota,.zvuk__ios{
  font-style:italic; font-size:14px; line-height:1.42; color:var(--rub);
  max-width:38ch; margin-top:var(--u-splet);
}

.privika{
  position:absolute; right:max(24px, calc(50% - 504px)); bottom:5svh;
  display:flex; align-items:center; gap:8px;
  font-style:italic; font-size:19px; color:var(--vosak);
  opacity:clamp(0, calc((var(--priv) - .55) * 4), 1);
}
.privika .ikona{ stroke:var(--rub) }

.ploca__okvir{
  position:relative; overflow:clip;
  background-size:cover; background-position:50% 50%;
}
.ploca__okvir img{ width:100%; height:auto }

/* Korak 04 je jedini kvadratni kadar na strani. Isečen je iz kadra od 1600 px,
   nikada razvučen: 460 px prikaza iz 1600 px izvora. */
.ploca--k04 .ploca__okvir{ aspect-ratio:1 }
.ploca--k04 .ploca__okvir img{ height:100%; object-fit:cover; object-position:64% 50% }
.ploca--deca{ position:absolute; top:5svh; left:max(150px, calc(50% - 470px)); width:320px }
.ploca--otvori{ position:absolute; bottom:-170px; left:max(24px, calc(50% - 600px)); width:650px }
.ploca--otvori .potpis{ position:absolute; left:260px; bottom:calc(100% + 14px); margin:0; width:min(340px,34vw) }
.potpis--na-dasci{ color:var(--vosak) }
.ploca .potpis{ margin-top:var(--u-splet) }

/* grade: ništa u ovom svetu ne emituje svetlost */
.ploca__okvir img,.vrt__ploca img,.niz img,.gde__traka img{
  filter:brightness(.86) contrast(1.05) saturate(1.03);
}
.ploca__okvir::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--bocna); opacity:.18; mix-blend-mode:multiply;
}

/* ---- 13. C4 · vazduh --------------------------------------- */

.vazduh{
  position:relative; height:68svh; min-height:520px;
  margin-top:var(--u-vrata);
  background:var(--mrak); overflow:clip;
}
.vazduh__slika{ position:absolute; inset:0; width:min(100%,1600px); margin-inline:auto }
.vazduh__slika .ploca__okvir{ height:100% }
.vazduh__slika img{
  width:100%; height:100%; object-fit:cover; object-position:50% 62%;
  filter:brightness(1) contrast(.94);
}
.vazduh__slika .ploca__okvir::after{ background:#2a1204; opacity:.06 }
.potpis--preko{
  position:absolute; right:3vw; bottom:3svh; width:min(380px,52vw);
  text-align:right; color:var(--mrak); max-width:none;
}
.vazduh__blok{
  position:absolute; left:-40px; top:7svh; bottom:7svh;
  width:min(620px, 62vw);
  background:var(--mrak);
  padding:40px 40px 40px 80px;
}
.vazduh__blok .telo{ color:var(--vosak); max-width:60ch }
.vazduh__blok .oznaka{ margin-bottom:var(--u-blok) }
.vazduh__polica{
  position:absolute; left:min(550px, 56vw); bottom:12svh; width:210px;
}
.vazduh__polica .potpis{
  position:absolute; right:calc(100% + 34px); bottom:0; width:190px;
  text-align:right; color:var(--rub);
}

/* ---- 14. C5 · dvesta --------------------------------------- */

.dvesta{ position:relative; height:200px; overflow:clip; background:var(--mrak) }
.dvesta__figura{ height:100% }
.dvesta__broj{
  position:absolute; right:-.28em; top:50%; translate:0 -50%;
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:normal; font-weight:500;
  font-size:clamp(150px,30vw,380px);
  font-variation-settings:'opsz' 96;
  line-height:.78; white-space:nowrap;
  font-variant-numeric:tabular-nums;
  color:transparent; -webkit-text-fill-color:transparent;
  background-image:url('../assets/img/daske/sace-uz-svetlo-1600.webp');
  background-size:1200px auto;
  background-position:50% 62%;
  background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  filter:brightness(1.35) contrast(1.15);
}
.dvesta__uz{
  position:absolute; left:max(24px, calc(50% - 504px)); bottom:26px;
  width:min(360px, 42vw);
  display:flex; flex-direction:column; gap:var(--u-splet);
}
.dvesta__nota{ font-size:17px; line-height:1.4; color:var(--vosak) }
@keyframes sace-hod{
  from{ background-position-y:16% }
  to{ background-position-y:80% }
}
@media (forced-colors:active){
  .dvesta__broj{
    color:CanvasText; -webkit-text-fill-color:CanvasText;
    background:none; filter:none;
  }
}

/* ---- 15. C6 · dva sata ------------------------------------- */

.sati{ background:var(--mrak); padding-block:var(--u-poglavlje); overflow:clip }
.sati .mreza{ position:relative }
.uvod{ grid-column:2 / 9; color:var(--vosak) }
.sati__cifra{
  grid-column:9 / 13; justify-self:end; align-self:start;
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:800;
  font-size:clamp(46px,10.5vw,164px);
  font-variation-settings:'opsz' 24;
  line-height:.86; letter-spacing:-.012em;
  color:var(--bor-senka);
  margin-top:-.16em;
}
.rail{
  grid-column:1 / 13; position:relative;
  --kol:calc((100% - 11 * var(--razmak)) / 12);
  margin-top:var(--u-poglavlje);
}
.rail::before{
  content:''; position:absolute; top:10px; bottom:-40px; width:1px;
  left:calc(3 * (var(--kol) + var(--razmak)) + var(--kol) / 2);
  background:var(--bor-senka);
}
.korak{
  display:grid; grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:var(--razmak);
  align-content:start;
  position:relative;
  padding-bottom:70px;
}
.korak__broj{
  grid-column:3; justify-self:end; align-self:start;
  font-size:13px; font-weight:500; line-height:1.5;
  font-feature-settings:"smcp" 1,"c2sc" 1; letter-spacing:.05em;
  font-variant-numeric:tabular-nums;
  color:var(--rub); margin-top:2px;
}
.korak__tacka{
  grid-column:4; justify-self:center; align-self:start;
  width:14px; height:14px; border-radius:50%;
  background:var(--rub); margin-top:4px;
}
.korak--komora .korak__tacka{ border:2px solid var(--dimnjak) }
.korak__ime{
  grid-column:5 / 9;
  font-size:25px; font-weight:600; line-height:1.24;
  display:flex; align-items:baseline; gap:10px;
}
.korak--komora .korak__ime{ font-style:italic }
.korak__red{
  grid-column:5 / 9;
  font-size:19px; line-height:1.6; color:var(--rub);
  margin-top:var(--u-splet); max-width:44ch;
}
.korak .ploca{ position:absolute }
.korak .ploca--k02{ width:300px; top:-64px; right:0 }
.korak .ploca--k04{ width:320px; top:14px; right:0 }
.korak .ploca--k06{ width:240px; top:-118px; right:76px }
.korak--sa-slikom-02{ min-height:216px }
.korak--sa-slikom-04{ min-height:400px }
.korak--sa-slikom-06{ min-height:262px }
@media (min-width:1160px){
  .korak .ploca--k04{ width:460px; right:calc(-1 * var(--pretek)) }
  .korak--sa-slikom-04{ min-height:540px }
}
.cin--kraj-rajsne{
  grid-column:1 / 13;
  margin-left:calc(3 * (var(--kol) + var(--razmak)) + var(--kol) / 2 - 29px);
  margin-top:6px;
}
.sati__nota{
  grid-column:1 / 13;
  margin-left:calc(3 * (var(--kol) + var(--razmak)) + var(--kol) / 2 + 44px);
  margin-top:var(--u-splet);
  font-style:italic; font-size:14px; color:var(--rub);
}
@keyframes tacka-raste{
  from{ background:var(--bocna); scale:.714 }
  to{ background:var(--rub); scale:1 }
}

/* ---- 16. C7 · šta kažu ------------------------------------- */

.kazu{
  background:var(--vosak); color:var(--bocna);
  min-height:72svh; padding-block:110px;
}
.kazu .oznaka{ color:var(--bor-senka); margin-top:12px; font-style:normal }
.glas blockquote p{ text-wrap:balance }
.glas--1{
  grid-row:1; grid-column:2 / 9;
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:600; font-size:52px; line-height:1.12;
  font-variation-settings:'opsz' 24;
}
.glas--2{ grid-row:1; grid-column:7 / 12; margin-top:206px; font-size:26px; line-height:1.38 }
.glas--3{ grid-row:1; grid-column:3 / 7; margin-top:452px; font-style:italic; font-size:20px }
.glas--4{ grid-row:1; grid-column:8 / 12; margin-top:576px; font-size:18px }

/* ---- 17. C8 · vrt kad padne mrak --------------------------- */

.vrt{ background:var(--mrak); padding-top:var(--u-poglavlje); min-height:124svh; overflow:clip }
.vrt__zid{ width:min(100%,1400px); margin-inline:auto }
.vrt__zid-okvir{
  position:relative; height:118px; overflow:clip;
  background:var(--mrak); background-size:cover; background-position:50% 40%;
}
.vrt__zid-okvir img{
  width:100%; height:100%; object-fit:cover; object-position:26% 42%;
  filter:url(#dvotonka) contrast(1.12);
}
.vrt__zid .potpis{ margin-top:var(--u-splet); padding-inline:24px }
.vrt > .mreza{ margin-top:var(--u-poglavlje) }
.vrt > .mreza .uvod{ grid-column:2 / 9 }
.vrt__ploca{
  width:min(1024px,100vw); margin:var(--u-blok) auto 0;
  display:flex; flex-direction:column-reverse;
}
.vrt__ploca .potpis{ margin:0 0 var(--u-splet); padding-inline:4px }
.niz{
  margin-top:0; overflow-x:auto; overscroll-behavior-x:contain;
  scrollbar-width:thin;
}
.niz__traka{ display:flex; gap:var(--razmak); width:max-content; padding:0 24px }
.niz .ploca{ flex:none }
.ploca--n1{ width:min(1024px,86vw) }
.ploca--n2{ width:min(900px,78vw); align-self:flex-end }
.ploca--n3{ width:min(1000px,82vw) }
.vrt__kapacitet{
  position:absolute; left:26px; top:20px;
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:600; font-size:40px; line-height:1;
  font-variation-settings:'opsz' 24;
  color:var(--vosak);
}
.vrt__telo{ grid-column:2 / 8; margin-top:var(--u-poglavlje) }
.vrt__izvod{ grid-column:8 / 13; margin-top:var(--u-poglavlje); color:var(--rub) }
@keyframes niz-uvod{ from{ translate:-90px 0 } to{ translate:0 0 } }

/* ---- 18. C9 · gde ------------------------------------------ */

.gde{
  position:relative; min-height:82svh;
  background:var(--zastor); color:var(--bocna);
  overflow:clip;
}
.gde__traka{ position:absolute; left:0; top:-6%; bottom:-6%; width:34% }
.gde__traka-okvir{ position:absolute; inset:0; overflow:clip; background-size:cover }
.gde__traka img{ width:100%; height:100%; object-fit:cover; filter:none }
.gde__traka .potpis{
  position:absolute; left:calc(100% + 18px); top:8%; width:min(24ch,24vw);
  color:var(--bocna);
}
.gde__slog{
  margin-left:38%; padding:9svh 5vw 7svh 0; max-width:660px;
}
.gde__slog .uvod{ color:var(--bocna) }
.gde__slog .telo{ margin-top:var(--u-blok); max-width:60ch }
.plan{ display:block; width:min(520px,100%); height:auto; margin:var(--u-blok) 0 }
.plan__crte{ fill:none; stroke:var(--bocna); stroke-width:1.5 }
.plan__dimnjak rect:first-child{ fill:var(--vosak); stroke:var(--bocna); stroke-width:1.5 }
.plan__dimnjak rect + rect{ fill:var(--dimnjak); stroke:none }
.plan__oznake text{
  font-family:Alegreya,Georgia,serif; font-size:13px; font-weight:500;
  font-feature-settings:"smcp" 1,"c2sc" 1; letter-spacing:.05em;
  fill:var(--bocna);
}
.plan__brojka{ font-variant-numeric:tabular-nums }
.gde__adresa{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:500;
  font-feature-settings:"smcp" 1,"c2sc" 1; letter-spacing:.05em;
  color:var(--bocna); margin-top:var(--u-blok);
}
.gde__adresa .ikona{ stroke:var(--bocna) }
.gde__gaia{ font-style:italic; font-size:14px; color:var(--bor-senka); margin-top:var(--u-splet) }
@keyframes silos-hod{ from{ translate:0 -5% } to{ translate:0 5% } }

/* ---- 19. C10 · braća --------------------------------------- */

.braca{ background:var(--mrak); min-height:96svh; padding-bottom:var(--u-poglavlje); overflow:clip }
.braca > .mreza:first-of-type{ min-height:38svh; align-content:end; padding-bottom:0 }
.braca__telo{ grid-column:2 / 7 }
.braca__izvod{
  grid-column:9 / 12; align-self:end;
  margin-bottom:-18px; position:relative; z-index:2;
  color:var(--vosak);
}
/* 1480 x 1.08 = 1598,4: ni na ulaznom skaliranju ne prelazi 1600 px izvora */
.braca__pojas{ width:min(100%,1480px); margin-inline:auto }
.braca__pojas-okvir{
  aspect-ratio:3.4; overflow:clip; background-size:cover; background-position:50% 40%;
}
.braca__pojas img{
  width:100%; height:100%; object-fit:cover; object-position:50% 36%;
  filter:brightness(.86) contrast(1.05) saturate(1.03);
}
.braca__pojas .potpis{ margin-top:var(--u-splet); padding-inline:24px }
.braca > .mreza:last-of-type{ margin-top:var(--u-poglavlje) }
.grozd{ grid-column:2 / 12 }
.grozd__slike{ display:flex; align-items:flex-start; gap:var(--razmak) }
.grozd__a{ width:260px; margin-top:38px }
.grozd__b{ width:300px; margin-top:0 }
.grozd__c{ width:240px; margin-top:74px }
.grozd__slike > div{ flex:none; position:relative; overflow:clip }
.grozd__slike img{ width:100%; height:auto; filter:brightness(.86) contrast(1.05) saturate(1.03) }
.grozd .potpis{ margin-top:var(--u-blok) }

/* ---- 20. C11 · četiri načina ------------------------------- */

.nacini{ background:var(--mrak); overflow:clip }
.nacini > .mreza{ min-height:520px; padding-block:var(--u-poglavlje) 60px }
.ask{ grid-row:1 }
.ask__red{ font-size:15px; line-height:1.5; color:var(--rub); margin-top:12px; max-width:36ch }
.ask--1{ grid-column:2 / 6 }
.ask--1 .cin__natpis{ font-size:28px; padding-bottom:12px; width:200px }
.ask--2{ grid-column:6 / 9; margin-top:126px }
.ask--2 .cin__natpis{ font-size:22px; padding-bottom:11px }
.ask--3{ grid-column:9 / 13; margin-top:38px }
.ask--3 .cin__natpis{ font-size:22px; padding-bottom:11px }
.ask--4{ grid-column:3 / 8; margin-top:322px }
.ask--4 .cin__natpis{ font-size:16px }

.podnozje{ padding-block:60px 96px; overflow:clip }
.kraj{
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:800;
  font-size:clamp(40px,8.6vw,140px);
  font-variation-settings:'opsz' 24;
  line-height:1.09; letter-spacing:-.012em;
  padding-left:max(24px, calc(50% - 504px));
  white-space:nowrap;
  color:var(--vosak);
}
.kraj span:last-child{ display:inline-block; margin-left:4.3em; white-space:nowrap }
.podnozje .mreza{ margin-top:var(--u-poglavlje) }
.podnozje__broj{ grid-column:2 / 8; font-size:19px; line-height:1.66; color:var(--rub) }
.podnozje__partneri{
  grid-column:2 / 13; margin-top:var(--u-blok);
  font-size:13px; font-weight:500; line-height:1.9;
  font-feature-settings:"smcp" 1,"c2sc" 1; letter-spacing:.05em;
  color:var(--bor-svetlo);
}

/* ---- 21. drugi sloj šuma ----------------------------------- */

body::after{
  content:''; position:fixed; inset:0; z-index:30; pointer-events:none;
  background-image: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='0.82' numOctaves='1' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)' opacity='0.5'/%3E%3C/svg%3E");
  background-size:180px 180px;
  mix-blend-mode:overlay;
  opacity:.04;
}

/* ---- 22. pokret vezan za skrol ----------------------------- */

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .dvesta__broj{
      animation:sace-hod var(--vlakno) both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
    .korak__tacka{
      animation:tacka-raste var(--vlakno) both;
      animation-timeline:view(); animation-range:entry 12% cover 30%;
    }
    .niz__traka{
      animation:niz-uvod var(--vlakno) both;
      animation-timeline:view(); animation-range:entry 0% cover 42%;
    }
    .braca__pojas img{
      animation:pojas-mir var(--vlakno) both;
      animation-timeline:view(); animation-range:entry 0% cover 46%;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width:768px){
    .gde__traka img{
      animation:silos-hod var(--vlakno) both;
      animation-timeline:view(); animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes pojas-mir{ from{ scale:1.08 } to{ scale:1 } }

/* ---- 23. veći kontrast ------------------------------------- */

@media (prefers-contrast: more){
  :root{ --vosak:#FFF6E4; --rub:#F0C48C }
  .klupa--komora{ --p1:#C4740E; --p2:#B86C1F; --p3:#A6621A; --p4:#985913;
                  --p5:#5A340D; --p6:#4E2C0B; --p7:#442709; --p8:#3A2107 }
  .klupa--hero{ --p1:#3A2107; --p2:#442709; --p3:#4E2C0B; --p4:#5A340D;
                --p5:#985913; --p6:#A6621A; --p7:#B86C1F; --p8:#C4740E }
  .beat{ color:var(--vosak) }
  .potpis{ color:#F5D3A4 }
}

/* ---- 24. manje pokreta ------------------------------------- */

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  :root{ --priv:1; --napredak:1 }
  .beat{ color:var(--vosak) }
  .privika{ opacity:1 }
  .niz__traka{ translate:0 0 }
}

/* ---- 25. telefon ------------------------------------------- */

@media (max-width:899px){
  :root{ --razmak:14px; --u-poglavlje:96px; --u-praznina:180px }

  .indeks{
    width:auto; min-width:0; inset:auto auto 0 0; padding:0;
    background:var(--mrak);
    flex-direction:column; justify-content:flex-end;
    gap:0;
  }
  .indeks__lista{ order:1 }
  .indeks__nazad{ order:2 }
  .indeks .indeks__prekidac{ order:3 }
  .indeks .indeks__prekidac{
    display:block; margin:10px 0 14px 16px;
    min-height:44px; min-width:44px;
    color:var(--rub) !important;
  }
  .indeks__prekidac::after{
    content:''; display:block; width:22px; height:1px;
    background:var(--rub); margin-top:4px;
  }
  .indeks__lista,.indeks__nazad{
    display:none; background:var(--mrak);
    border-top:1px solid var(--bor-senka);
    padding:14px 20px;
  }
  .indeks[data-otvoren] .indeks__lista,
  .indeks[data-otvoren] .indeks__nazad{ display:block; min-width:190px }
  .indeks__nazad{ border-top:1px solid var(--bor-senka) }

  .prikaz{ grid-column:1 / 13 }
  .otvor__slog{ padding-top:6svh }
  .otvor__oznaka{ left:20px; top:38svh; bottom:auto; font-size:12px }
  .otvor > .cin{ right:20px; bottom:20px }
  .cin__natpis{ width:auto; max-width:52vw }

  .klupa--hero .red--1{ --rowW:38vw; --rmax:15 }
  .klupa--hero .red--2{ --rowW:32vw; --rmax:13 }
  .klupa--hero .red--3{ --rowW:27vw; --rmax:12 }
  .klupa--hero .red--4{ --rowW:22vw; --rmax:11 }
  .klupa--hero .red--5{ --rowW:17vw; --rmax:10 }
  .klupa--hero .red > i.rupa--krupna{ --rmax:44 }
  .klupa--komora .red--1{ --rowW:42vw; --rmax:13 }
  .klupa--komora .red--2{ --rowW:36vw; --rmax:12 }
  .klupa--komora .red--3{ --rowW:30vw; --rmax:11 }
  .klupa--komora .red--4{ --rowW:24vw; --rmax:10 }
  .klupa--komora .red--5{ --rowW:18vw; --rmax:9 }
  .klupa--komora .red--bok{ --rowW:40vw; --rmax:9 }

  .skini-sat{ height:180px }
  .skini-sat__linija{ grid-column:2 / 13; font-size:23px }

  .komora{ height:auto }
  .komora__scena{ position:static; height:auto; display:block }
  .klupa--komora{ position:relative; inset:auto; height:100svh }
  .komora__sadrzaj{ height:auto; padding-bottom:12svh }
  .komora__kolona{
    position:static; width:auto; left:auto; top:auto;
    padding:9svh 20px 0 34px; margin-left:16px;
  }
  .beat{ min-height:34svh; font-size:21px; max-width:34ch }
  .komora__kolona{ max-width:640px }
  .komora__kolona h2.beat{ font-size:21px }
  .zvuk{ margin-top:0 }
  .privika{ position:static; margin:24px 20px 0 50px }
  .ploca--deca{ position:static; width:min(300px,64vw); margin:0 20px 0 auto }
  .ploca--otvori{ position:static; width:min(650px,92vw); margin:8svh 0 0 -14px }
  .ploca--otvori .potpis{ position:static; width:auto; margin-top:var(--u-splet) }


  .vazduh{ height:auto; min-height:0; display:flex; flex-direction:column }
  .vazduh__slika{ position:static; height:52svh }
  .vazduh__slika .ploca__okvir{ height:100% }
  .potpis--preko{ position:static; text-align:left; width:auto; color:var(--rub); padding:14px 20px 0 }
  .vazduh__blok{
    position:static; width:auto; inset:auto;
    padding:var(--u-blok) 20px;
  }
  .vazduh__polica{ position:static; width:180px; margin:0 0 var(--u-blok) 20px }
  .vazduh__polica .potpis{ position:static; width:auto; text-align:left; margin-top:var(--u-splet) }

  .dvesta{ height:170px }
  .dvesta__broj{ font-size:clamp(112px,29vw,380px) }
  .dvesta__uz{ width:min(186px,48vw); bottom:16px; left:20px }
  .dvesta__nota{ font-size:15px }
  .dvesta__uz .oznaka{ line-height:1.3 }

  .uvod{ grid-column:1 / 10 }
  .sati__cifra{ grid-column:10 / 13 }
  .rail{ grid-column:1 / 13 }
  .rail::before{ left:12px }
  .korak{ display:block; padding-left:40px; padding-bottom:52px; position:relative }
  .korak__broj{ position:absolute; left:-2px; top:34px }
  .korak__tacka{ position:absolute; left:6px; top:6px }
  .korak__ime,.korak__red{ max-width:none }
  .ploca--k02,.ploca--k04,.ploca--k06{
    width:min(300px,72vw); margin:20px 0 0; justify-self:auto;
  }
  .ploca--k04{ width:min(340px,80vw); margin-left:auto; margin-right:0 }
  .cin--kraj-rajsne{ margin-left:0 }
  .sati__nota{ margin-left:0; margin-top:14px }

  .kazu{ padding-block:80px }
  .glas{ grid-column:1 / 13 !important; grid-row:auto !important; margin-top:0 !important }
  .glas + .glas{ margin-top:56px !important }
  .glas--1{ font-size:38px }
  .glas--2{ font-size:21px }
  .glas--3{ margin-left:12% !important }

  .vrt__zid-okvir{ height:78px }
  .vrt > .mreza .uvod{ grid-column:1 / 13 }
  .vrt__telo,.vrt__izvod{ grid-column:1 / 13; margin-top:var(--u-poglavlje) }
  .vrt__izvod{ margin-top:var(--u-blok) }
  .vrt__kapacitet{ font-size:28px; left:16px; top:14px }

  .gde{ min-height:0 }
  .gde__traka{ position:static; width:100%; height:46svh }
  .gde__traka-okvir{ position:relative; height:100% }
  .gde__traka .potpis{ position:static; padding:12px 20px 0; width:auto; color:var(--bocna); left:auto; top:auto }
  .gde__slog{ margin-left:0; padding:var(--u-blok) 20px }

  .braca > .mreza:first-of-type{ min-height:26svh }
  .braca__telo{ grid-column:1 / 13 }
  .braca__izvod{ grid-column:1 / 13; margin-top:var(--u-blok); font-size:24px }
  .braca__pojas-okvir{ aspect-ratio:2.2 }
  .grozd{ grid-column:1 / 13 }
  .grozd__slike{ overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:8px }
  .grozd__a{ width:200px } .grozd__b{ width:230px } .grozd__c{ width:185px }

  .ask{ grid-column:1 / 13 !important; grid-row:auto !important; margin-top:0 !important }
  .ask + .ask{ margin-top:44px !important }
  .ask--2{ margin-left:8% !important }
  .ask--4{ margin-left:4% !important }
  .ask--1 .cin__natpis{ font-size:24px; width:auto }
  .kraj{ padding-left:20px; white-space:normal; font-size:clamp(44px,12vw,140px) }
  .kraj span:last-child{ margin-left:2.6em }
  .podnozje__broj,.podnozje__partneri{ grid-column:1 / 13 }
}

@media (max-width:479px){
  .glas--1{ font-size:31px }
  .vazduh__blok{ padding-inline:16px }
  .gde__slog{ padding-inline:16px }
}


/* ---- C7b. ne samo ti ---------------------------------------
   Ne dolaziš samo ti. Firme i deca dolaze zbog istog rasporeda ispod
   dasaka, pa je i tlo drugo: --bocna, isti bok ležaja na kojem si ležao.
   Bez markera: dva su potrošena, treći bi bio treći. */

.nesamo{
  background:var(--bocna);
  padding-block:var(--u-poglavlje);
  overflow:clip;
}
.nesamo .mreza{ row-gap:var(--u-blok) }

.nesamo__prikaz{
  grid-column:2 / 12; margin:0;
  font-family:'Bodoni Moda','Bodoni MT',Didot,'Times New Roman',serif;
  font-style:italic; font-weight:800;
  font-size:clamp(30px,5.05vw,71px);
  font-variation-settings:'opsz' 24;
  letter-spacing:-.012em; line-height:1.09;
  color:var(--vosak);
}
.nesamo__red{ display:block }
/* the breaks are placed by hand; the rows do not get to rewrap */
.nesamo__red > span{ display:block; white-space:nowrap }
.nesamo__red:first-child{ text-indent:-.42em }
.nesamo__red:first-child > span::before{ content:var(--navod-o) }
.nesamo__red:last-child  > span::after { content:var(--navod-z) }

.nesamo__uvod{ grid-column:2 / 8; color:var(--vosak); margin:0 }

.pitanja{
  grid-column:2 / 10; margin:0; padding:0; list-style:none;
  border-top:1px solid var(--bor-senka);
}
.pitanje{
  display:grid; grid-template-columns:3.4em 1fr; column-gap:var(--razmak);
  padding:16px 0; border-bottom:1px solid var(--bor-senka);
}
.pitanje__broj{
  justify-self:end; align-self:start; margin-top:.42em;
  font-family:Alegreya,Georgia,serif; font-size:13px; font-weight:500;
  font-feature-settings:"smcp" 1,"c2sc" 1; letter-spacing:.05em;
  font-variant-numeric:tabular-nums; color:var(--rub);
}
.pitanje__red{
  font-family:Alegreya,Georgia,serif; font-weight:500;
  font-size:clamp(20px,1.15vw + 14px,27px); line-height:1.32;
  color:var(--vosak); text-wrap:pretty; max-width:38ch;
}
.nesamo__sala{
  grid-column:2 / 8; margin:0;
  font-family:Alegreya,Georgia,serif; font-style:italic;
  font-size:19px; line-height:1.56; font-variation-settings:'opsz' 19;
  color:var(--rub); max-width:52ch;
}

.nesamo__deca{ grid-column:2 / 7; grid-row:5; margin:0 }
.nesamo__ime{
  margin:0 0 12px;
  font-family:Alegreya,Georgia,serif; font-weight:600; font-size:25px;
  line-height:1.24; color:var(--vosak);
}
.nesamo__deca .telo{ color:var(--vosak) }

/* off the grid on purpose: the plate hangs into the gutter beside the copy */
.nesamo__ploca{
  grid-column:8 / 12; grid-row:5; align-self:start;
  width:300px; max-width:100%; margin:0; justify-self:end;
  transform:translateY(-92px);
}
.nesamo__ploca .potpis{ color:var(--rub) }

@media (max-width:900px){
  .nesamo__prikaz{ grid-column:1 / 13; font-size:clamp(27px,7.4vw,56px) }
  .nesamo__red > span{ white-space:normal }
  .nesamo__uvod,.nesamo__sala,.nesamo__deca{ grid-column:1 / 13 }
  .pitanja{ grid-column:1 / 13 }
  .pitanje{ grid-template-columns:2.6em 1fr }
  .nesamo__ploca{
    grid-column:1 / 13; grid-row:auto; justify-self:start;
    transform:none; width:min(260px,72%);
  }
}