/* =====================================================================
   SIZIGRAM
   Pozadina je #1c1c1c, ne #000. Izmereno sa originala (0.110).
   Cisto crno na OLED ekranu ubija osecaj papira — dobijes prazninu
   umesto materijala.
   ===================================================================== */

:root{
  color-scheme:dark;        /* pregledac ne sme da oboji belo izmedju
                               dokumenata — to je bio "trepne jednom" */
  --paper:#1c1c1c;          /* 0.110 — ista vrednost kao disk */
  --ink:#c4c4c4;
  --ink-dim:#7a7a7a;
  --ink-hot:#f2f2f2;

  /* Boja sjaja oko linkova. Plejer je prepisuje na svaku pesmu; ove
     vrednosti su zlato albuma i vaze dok muzika ne krene.
     MORAJU postojati ovde: `rgb(var(--glow) / .55)` sa nedefinisanom
     promenljivom nije nevazeca vrednost nego NEVAZECA NA NIVOU RACUNANJA
     — cela `text-shadow` tada padne na `none`, nulti slojevi u mirnom
     stanju nestanu, i sjaj se vrati na skok umesto na prelaz. */
  --glow:226 190 124;       /* jezgro uz slova */
  --glow2:214 166 88;       /* telo sjaja, tamnije i zasicenije */

  /* TIPOGRAFIJA — ovde menjas kad izabereš pravi font.
     Sistemski stek je namerno: nula mreznih zahteva, instant paint.
     Kandidati koji se slazu sa logotipom: Archivo Condensed,
     Oswald, Space Mono, Input Mono. */
  --face:"Helvetica Neue",Inter,Archivo,"Segoe UI",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}

html,body{
  margin:0;padding:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--face);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* TRAKA ZA SKROL SE NE CRTA NIGDE.
   Probao sam prvo `scrollbar-gutter: stable` (rezervise zleb i kad nema
   sta da se skroluje → trajna siva traka uz ivicu), pa providnu tanku
   traku (i dalje se vidi kanal). Na ovako tamnoj, tihoj slici svaka
   sistemska traka je strano telo.

   Skrolovanje i dalje radi: tockic, prst, tastatura, Page Up/Down.
   Da se ne izgubi trag da ima jos sadrzaja, dno se blago zatamnjuje. */
html{scrollbar-width:none}
*::-webkit-scrollbar{width:0;height:0;display:none}

body{
  overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;
}

/* NISTA SE NE MARKIRA, NISTA SE NE PREVLACI.
   Ovo nije zastita od preuzimanja — to je nemoguce u pregledacu — nego
   uklanjanje svega ocitog: plavo obelezavanje teksta, prevlacenje slike
   na desktop, "Sacuvaj sliku kao" na dugi dodir. */
*{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  -webkit-touch-callout:none;
}
img,canvas,svg{
  -webkit-user-drag:none;
  user-drag:none;
  pointer-events:none;
}
/* IZUZECI od zabrane markiranja.
   Mejl adresa mora moci da se kopira. A polja obrasca moraju da se
   ponasaju kao polja: bez ovoga se u njima ne vidi selekcija, ne radi
   dupli klik na rec i brisanje unazad izgleda kao da je zaglavilo.
   Zabrana markiranja je protiv prevlacenja teksta i slika, ne protiv
   kucanja. */
#foot a[href^="mailto"],
.page a[href^="mailto"],
input,textarea{
  -webkit-user-select:text;
  user-select:text;
}
input,textarea{-webkit-touch-callout:default}

/* Samo home je zakljucan na jedan ekran. Podstranice se skroluju. */
html.home,body.home{height:100%;overflow:hidden}

/* ---------------------------------------------------------------- scena */

#stage{
  position:fixed;inset:0;
  display:block;
  contain:layout paint;
}

/* Poster je SAMO mreza za pad. Nikad se ne vidi u normalnom ucitavanju.
   94.3vmin nije proizvoljno: na originalu je poluprecnik diska 0.2226
   strane slike, a shader ga crta na 0.21 krace strane ekrana.
   0.21 / 0.2226 = 0.943 — tako se poster i shader poklope u piksel. */
#poster{
  position:absolute;
  left:50%;top:50%;
  width:94.3vmin;height:94.3vmin;
  transform:translate(-50%,-50%);
  z-index:0;
  display:block;
  opacity:0;
  transition:opacity 1s ease-out;
}
#stage.fallback #poster{opacity:1}

/* Canvas je vidljiv od prvog kadra. Pri u_intro = 0 crta samo papir —
   istu vrednost kao pozadina stranice — pa nema sta da "blesne".
   Otkrivanje vodi u_intro u shaderu, ne CSS opacity. Dva odvojena
   fade-a se nikad ne uskladе. */
#eclipse{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:block;
  z-index:1;
  opacity:0;
}
#eclipse.live{opacity:1}

/* ------------------------------------------------------------- zvezde */
/* --disk-px postavlja JS iz ISTOG broja koji ide u shader (u_scale).
   Rezerva u vmin je samo za slucaj da JS ne stigne. Ranije je ovo bila
   rucno odrzavana vrednost u vmin i mogla je da odluta od shadera. */
:root{ --disk-px:21vmin; }

/* NI JEDAN transform, NI JEDNA maska.
   Ranije je platno bilo kvadrat sa stranicom = dijagonala ekrana,
   centriran preko translate(-50%,-50%), sa CSS maskom za rupu i CSS
   rotacijom. Kad taj transform iz bilo kog razloga ne prodje, platno
   ostane gornjim levim uglom u centru ekrana i zvezde se pojave samo
   dole-desno — tacno to se i desavalo.

   Sada je platno tacno velicine ekrana, a rotacija i rupa se racunaju
   u JS-u (sky.js) iz istog broja koji ide u shader. Nema sta da odluta. */
#skywrap{
  position:absolute;inset:0;
  z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity 1.0s ease-out;
}
#sky{
  position:absolute;inset:0;
  display:block;
  width:100%;height:100%;
}

body.ready #skywrap.live{opacity:.92}
body.ready #stage.hole #skywrap.live{
  opacity:1;
  transition:opacity .6s cubic-bezier(.33,0,.2,1);
}

/* ------------------------------------------------------------- logotip */

#brand{
  position:absolute;
  left:50%;top:50%;
  margin:0;
  transform:translate(-50%,-50%);
  z-index:3;
  pointer-events:none;      /* logo ne sme da jede hover na rupi */
  /* Vezan za poluprecnik rupe, ne za vmin. Geometrija: logo sirine w i
     odnosa 2.62:1 stane u krug poluprecnika R sve dok je w < 1.87R.
     1.12R je udobno i na desktopu i na telefonu, i logo vise ne moze da
     ispadne iz kruga ni na jednom odnosu stranica. */
  width:min(calc(var(--disk-px) * 1.12), 240px);
}
#brand img{
  display:block;width:100%;height:auto;
  opacity:0;
  transform:scale(1.035);
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  transition:opacity 1.1s cubic-bezier(.33,0,.2,1),
             transform 1.1s cubic-bezier(.33,0,.2,1),
             filter 1.1s cubic-bezier(.33,0,.2,1);
  will-change:filter, transform;
}
body.ready #brand img{opacity:.94;transform:scale(1)}

/* Kursor u rupi: logo se upali i jedva primetno naraste, u istom tempu
   u kom se disk nadima u shaderu (0.60 s ulaz / 0.85 s izlaz). */
#stage.hole #brand img{
  opacity:1;
  transform:scale(1.022);
  filter:drop-shadow(0 0 20px rgba(255,255,255,.34))
         drop-shadow(0 0 58px rgba(255,255,255,.16));
  transition:opacity .60s cubic-bezier(.33,0,.2,1),
             transform .60s cubic-bezier(.33,0,.2,1),
             filter .60s cubic-bezier(.33,0,.2,1);
}

/* --------------------------------------------------------- navigacija */

/* Linkovi su UVEK vidljivi. Hover je nagrada, ne uslov —
   inace mobilni korisnik vidi crni krug i ode. */
#orbit{position:absolute;inset:0;z-index:4}

#orbit a{
  position:absolute;
  display:block;
  padding:.65em .8em;
  margin:-.65em -.8em;          /* hit target veci od teksta */
  color:var(--ink-dim);
  text-decoration:none;
  font-size:clamp(10px,1.15vmin + 7px,15px);
  letter-spacing:.42em;
  /* letter-spacing dodaje razmak i IZA poslednjeg slova, pa je kutija
     sira od mastila i tekst ispadne pomeren ulevo kad ga centriramo.
     Ovim se kutija vraca na stvarnu sirinu teksta. */
  margin-right:calc(-.8em - .42em);
  text-transform:uppercase;
  font-weight:400;
  white-space:nowrap;
  /* KLJUCNO: nulti text-shadow mora postojati i u mirnom stanju, i mora
     imati ISTI BROJ SLOJEVA kao stanje na hoveru.
     Prelaz iz `none` u senku nije interpolabilan, ali ni prelaz sa dva
     sloja na tri — pregledac tada odustane od animacije i uradi skok.
     Zato su ovde tri nulta sloja, tacno koliko ih ima i na hoveru. */
  text-shadow:0 0 0 rgb(var(--glow) / 0),
              0 0 0 rgb(var(--glow2) / 0),
              0 0 0 rgba(255,255,255,0);

  /* Duze i mekse nego "ease". Kriva je gotovo linearna u sredini a
     jako ublazena na oba kraja, pa nema ni trzaja na pocetku ni naglog
     staja na kraju. Ovo je IZLAZNA kriva — sporija, sjaj se povlaci
     duze nego sto se pali. */
  transition:color 1.20s cubic-bezier(.33,0,.2,1),
             opacity 1.20s cubic-bezier(.33,0,.2,1),
             text-shadow 1.20s cubic-bezier(.33,0,.2,1);
  will-change:color, text-shadow;
}

/* Stanje vodi JS preko klase `.on`, ne CSS `:hover`. Tako mis, tastatura
   i dodir daju BUKVALNO isti izgled, i tempo se poklapa sa shaderom.
   `:hover` ostaje kao rezerva ako JS zakaze. */
/* Sjaj uzima boju PESME, isto kao svetlo koje plane iza teksta u shaderu.
   Beo glow preko zlatne korone je izgledao kao dve razlicite stvari — a
   zlatan glow preko ledeno plave korone bi bio ista greska, samo gora.
   Boje stizu iz plejera kao --glow i --glow2 i menjaju se sa pesmom;
   prelaz vodi ista `transition` linija, ne treba nista posebno.

   Tri sloja, od uskog ka sirokom — jedan sloj daje tvrd oreol, tri daju
   pad koji se cita kao svetlo:
     14 px  jezgro uz slova
     42 px  telo sjaja
     90 px  jedva vidljiv oreol, beo (najdalje svetlo je najhladnije) */
#orbit a.on,
#orbit a:focus-visible,
#orbit a:hover{
  color:#fff8ec;
  text-shadow:0 0 14px rgb(var(--glow)  / .55),
              0 0 42px rgb(var(--glow2) / .30),
              0 0 90px rgba(255,255,255,.12);
  outline:none;
  transition:color .70s cubic-bezier(.33,0,.2,1),
             opacity .70s cubic-bezier(.33,0,.2,1),
             text-shadow .70s cubic-bezier(.33,0,.2,1);
}

/* ---------------------------------------------------------------- rep
   Linkovi stoje, ali dobijaju isti vetar kao zvezde: tri kopije svetla
   pomerene KA CENTRU, sve slabije i sve mutnije. Smer daje JS po linku
   (`--tx`/`--ty`, jedinicni vektor ka sredini ekrana), duzinu `--tail`
   (0..1) koji prati muziku.

   SLOVA SE NE MRLJAJU, i to je namerno. Rep nosi `drop-shadow`, koji
   crta senku po providnosti elementa dok se sam element i dalje iscrtava
   ostro preko nje. Razvuci sam tekst bilo bi lakse i izgledalo bi jace,
   ali navigacija je jedina stvar na ovom ekranu koja mora da bude
   citljiva u svakom trenutku — a ovo je pozadinski efekat.

   `filter` NAMERNO nije u `transition`. Rep mora da prati zvuk odmah;
   sjaj na hoveru je taj koji ulazi i izlazi meko, i on zivi u
   `text-shadow`, u sasvim drugom svojstvu. Da su u istom, rep bi kasnio
   za muzikom celu sekundu.

   Boja je ista kao sjaj (`--glow`), dakle boja pesme. Zlatan rep preko
   ledeno plave korone bio bi treci izvor svetla u istom kadru.

   Ukljucuje se samo na desktopu: na telefonu su linkovi u stupcu, nemaju
   pravac ka centru koji nesto znaci, a `filter` je tamo najskuplja stvar
   koja se moze traziti od GPU-a. */
#orbit a{ --tx:0; --ty:0; }
:root{ --tail:0; }

@media (min-width:640px){
  body.tailing #orbit a{
    /* Cetiri sloja, i to je LANAC a ne skup: u `filter` nizu svaki
       sledeci `drop-shadow` uzima kao ulaz vec obradjenu sliku, dakle
       baca senku i na prethodnu senku. Zato se domet SABIRA (6+11+18+28
       = 63 px pri punom repu) i zato prva dva sloja imaju jedva nesto
       zamucenja — oni daju ostar pocetak traga, a poslednja dva ga
       razvuku u dim. Sa tri siroka i meka sloja rep je izgledao kao
       mrlja pored teksta, a ne kao trag. */
    filter:
      drop-shadow(calc(var(--tx) * var(--tail) *  6px)
                  calc(var(--ty) * var(--tail) *  6px)
                  calc(var(--tail) * 1px)
                  rgb(var(--glow)  / calc(var(--tail) * .45)))
      drop-shadow(calc(var(--tx) * var(--tail) * 11px)
                  calc(var(--ty) * var(--tail) * 11px)
                  calc(var(--tail) * 2px)
                  rgb(var(--glow)  / calc(var(--tail) * .32)))
      drop-shadow(calc(var(--tx) * var(--tail) * 18px)
                  calc(var(--ty) * var(--tail) * 18px)
                  calc(var(--tail) * 4px)
                  rgb(var(--glow)  / calc(var(--tail) * .20)))
      drop-shadow(calc(var(--tx) * var(--tail) * 28px)
                  calc(var(--ty) * var(--tail) * 28px)
                  calc(var(--tail) * 8px)
                  rgb(var(--glow2) / calc(var(--tail) * .10)));
  }
}

/* Rep nema sta da trazi na podstranicama ni dok rupa guta ekran. */
body.in-page #orbit a,
#stage.eating #orbit a{filter:none}

/* SPECIFICNOST — pazljivo.
   Linkovi se pale preko `body.entered`, a hover ih prigusuje preko
   `#orbit.focused`. Da `body.entered #orbit a{opacity:1}` (0,1,2 = 112)
   ne bi pobedilo `#orbit.focused a` (0,2,1 = 111) i time trajno ubilo
   prigusenje ostalih linkova, i hover pravila moraju nositi `body.entered`.
   Ovo je tiha zamka: sve bi izgledalo ispravno pri ucitavanju, a hover
   bi prestao da radi. */
/* Linkovi se pojavljuju TEK posle ulaska kroz rupu.
   Dok ih nema, ne smeju da se kliknu ni da uhvate tab. */
#orbit a{opacity:0;pointer-events:none}
body.entered #orbit a{opacity:1;pointer-events:auto}
body.entered #orbit.focused a{opacity:.42}
body.entered #orbit.focused a.on,
body.entered #orbit.focused a:focus-visible{opacity:1}

/* ----------------------------------------------------------- podnozje */

/* Podnozje ima dva kraja i praznu sredinu — to nije stilska odluka nego
   posledica geometrije: sve ostalo na ovom ekranu je centrirano oko
   rupe. Da je i podnozje centrirano, imali bismo dva centra u istoj
   vertikali i oko bi ih citalo kao jednu kolonu koja se prekinula.
   Ovako uglovi drze okvir, a sredina ostaje prazna za pomracenje. */
#foot{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:5;
  padding:1.15rem 1.6rem calc(1.15rem + env(safe-area-inset-bottom));
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:1.2rem;
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  transition:opacity .70s ease-out;
}
body.entered #foot{opacity:1}

/* ------------------------------------------------- napomena o zvuku

   Sedi na ISTOJ liniji kao podnozje, centrirano. Moze zato sto se nikad
   ne vide zajedno: pre ulaska podnozje je na nuli, posle ulaska ova
   napomena. Da su vidljivi u istom trenutku, na uskom ekranu bi upali
   jedno u drugo.

   Ne odlazi zajedno sa "click to enter" nego malo pre njega (.34s prema
   .45s) — natpis u rupi je ono sto je covek kliknuo i on treba da nestane
   poslednji, kao potvrda. */
#pre{
  position:fixed;
  left:0;right:0;
  bottom:calc(1.15rem + env(safe-area-inset-bottom));
  z-index:5;
  margin:0;
  padding:0 1.6rem;
  text-align:center;
  font-size:10px;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  pointer-events:none;
  transition:opacity .70s ease-out;
}
/* Isti trenutak kad i krug postane kliktljiv — pre toga nema sta da se
   najavljuje. */
body.armed #pre{opacity:.55}
body.entered #pre,
body.in-page #pre{
  opacity:0;
  transition:opacity .34s ease-in;
}
/* Bez skripte se nikad ne ulazi, pa nema ni najave. */
html.no-js #pre{display:none}

/* Na telefonu je isto mesto, samo tise slovo — izmedju zvezde levo i
   mreza desno ostaje oko 190 px, a natpis staje u 185. Nema potrebe da
   se dize iznad podnozja: dok se on vidi, podnozja jos nema. */
@media (max-width:640px){
  #pre{font-size:9px;letter-spacing:.2em}
}
#foot a{color:inherit;text-decoration:none;transition:color .35s ease}
#foot a:hover,#foot a:focus-visible{color:var(--ink-hot);outline:none}
#foot .sep{opacity:.45;padding:0 .55em}

/* POTPIS — zvezda koja se otvara u ceo natpis.

   Mereno iz samog fajla (`getBBox` u pregledacu, ne na oko):
     ceo logo   viewBox 0 0 898 119
     zvezda     x 0–149        (16.6% sirine)
     natpis     x 193.3–897.7
   Izmedju zvezde i natpisa stoji prazno 149–193.3; to je razmak iz
   originala i ne dira se.

   Fajl se NE SECE na dva. Okvir `.m` je uzi od slike i `overflow` krije
   ostatak; na hover se animira SIRINA OKVIRA, a slika stoji mirno.
   Zato natpis izlazi ispod zvezde umesto da klizi po ekranu — a i jedan
   fajl znaci jedan zahtev i nula sanse da se dve verzije raziđu.

   Slika mora imati EKSPLICITNU sirinu (`--azw`). Bez toga bi je flex
   okvir stisnuo na raspolozivih 18 px i natpis se ne bi ni pojavio.

   Potpis je tisi od mreza. Nije poziv na klik nego kredit; da stoji u
   istoj tezini kao Bandcamp, otimao bi paznju od jedine tri veze koje
   nekome nesto donose. */
#foot .az,
.page-foot .az{
  --azh:14px;                              /* visina zvezde */
  --azw:calc(var(--azh) * 898 / 119);      /* ceo logo */
  --azs:calc(var(--azh) * 149 / 119);      /* samo zvezda */
  display:inline-flex;
  align-items:center;
  flex:0 0 auto;
  opacity:.45;
  transition:opacity .45s ease;
}
#foot .az .m,
.page-foot .az .m{
  display:block;
  overflow:hidden;
  width:var(--azs);
  transition:width .55s cubic-bezier(.33,0,.2,1);
}
#foot .az img,
.page-foot .az img{
  display:block;
  height:var(--azh);
  width:var(--azw);
  max-width:none;                          /* flex ne sme da je stisne */
}

/* Otvaranje samo tamo gde hover stvarno postoji. Na dodirnom ekranu
   `:hover` ostane zakacen posle tapa, pa bi natpis ostao otvoren dok se
   ne dodirne nesto drugo — a na telefonu se trazi samo zvezda. */
@media (min-width:641px) and (hover:hover){
  #foot .az:hover,#foot .az:focus-visible,
  .page-foot .az:hover,.page-foot .az:focus-visible{opacity:1}
  #foot .az:hover .m,#foot .az:focus-visible .m,
  .page-foot .az:hover .m,.page-foot .az:focus-visible .m{width:var(--azw)}
}

#foot .soc,
.page-foot .soc{flex:0 0 auto;white-space:nowrap}

/* ------------------------------------------------------- enter kapija */
/* Cela rupa je dugme. Nevidljivo je — jedini trag je tekst ispod
   logotipa i to sto se rupa pali na hover (isti u_hole kao i inace). */
#enter{
  position:absolute;
  left:50%;top:50%;
  width:calc(var(--disk-px) * 2);
  height:calc(var(--disk-px) * 2);
  margin:0;padding:0;border:0;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:none;
  color:inherit;font:inherit;
  z-index:5;
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  /* Gestovi za jacinu i promenu pesme su nasi — pregledac ne sme da ih
     pretvori u pomeranje strane ili zumiranje. */
  touch-action:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .9s cubic-bezier(.33,0,.2,1);
}
/* `armed` = sve je ucitano i ulaz je odgledan → tek tada se sme kliknuti */
body.armed #enter{opacity:1;pointer-events:auto}
/* Posle ulaska krug ostaje dugme — samo mu se posao menja u
   pauzu/nastavak. Zato pointer-events ostaju. */
body.entered #enter{opacity:1;pointer-events:auto}
/* KLJUCNO: `animation:none`.
   Hint ima `hint-breathe` koja animira bas `opacity`. CSS animacija
   pobedjuje obicnu deklaraciju (visi je u kaskadi), pa `opacity:0`
   ovde NIJE imalo nikakvog efekta — "CLICK TO ENTER" je ostajao na
   ekranu i posle ulaska, preko naslova pesme. Animacija mora da stane. */
body.entered #enter .hint{
  animation:none;
  opacity:0;
  pointer-events:none;
  transition:opacity .45s ease-in;
}

#enter:focus{outline:none}
#enter:focus-visible{
  box-shadow:0 0 0 1px rgba(255,255,255,.35);
}

#enter .hint{
  position:absolute;
  left:50%;
  top:calc(50% + var(--disk-px) * 0.42);
  transform:translate(-50%,-50%);
  white-space:nowrap;
  font-size:clamp(9px,.9vmin + 6px,12px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-dim);
  transition:color .5s cubic-bezier(.33,0,.2,1);
  /* jedva primetno disanje, da se vidi da ceka */
  animation:hint-breathe 3.4s ease-in-out infinite;
}
#enter:hover .hint,
#enter:focus-visible .hint{color:var(--ink-hot)}
#enter .m{display:none}
@media (hover:none), (pointer:coarse){
  #enter .d{display:none}
  #enter .m{display:inline}
}

@keyframes hint-breathe{
  0%,100%{opacity:.72}
  50%    {opacity:1}
}

/* =====================================================================
   PODSTRANICA UNUTAR ISTOG DOKUMENTA

   Zasto uopste: zrno, njegova faza treperenja, skrol i WebGL kontekst
   su svi vezani za dokument. Pri pravom ucitavanju strane svi krenu
   ispocetka — i to je ono sto se videlo kao glitch na prelazu. Jedini
   nacin da se dva zrna stope jeste da nikad ne budu dva.

   Skrol je ovde, ne na dokumentu. Traka pregledaca se ne pojavljuje
   uopste, a sadrzaj se i dalje skroluje tockicem, prstom i tastaturom.
   Donja senka nagovestava da ima jos.
   ===================================================================== */
#doc{
  position:fixed;inset:0;
  z-index:6;
  overflow-y:auto;
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  scrollbar-width:none;              /* Firefox */
  visibility:hidden;
  pointer-events:none;
}
#doc::-webkit-scrollbar{display:none} /* Chrome, Safari */

body.in-page #doc{visibility:visible;pointer-events:auto}

/* Trag da ima jos sadrzaja ispod, posto trake nema. Ne hvata klik. */
/* SENKA NA DNU MORA DA PRATI SAFARIJEVU TRAKU.

   `bottom:0` na fiksiranom elementu se u Safariju meri od LAYOUT
   viewporta, a on ne prati traku koja se skuplja pri listanju. Senka je
   zato ostajala zakucana iza trake — vidi se kao svetla pruga koja stoji
   dok se sve ostalo pomera.

   `100dvh` je jedina mera koja se menja zajedno sa trakom. Racuna se
   preko `top`, ne `bottom`, jer se `bottom` i dalje odnosi na layout
   viewport. `bottom:0` ostaje kao rezerva za pregledace bez `dvh`. */
#doc-fade{
  position:fixed;left:0;right:0;bottom:0;height:88px;
  z-index:7;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(to top, var(--paper), rgba(28,28,28,0));
  transition:opacity .5s ease-out;
}
@supports (height:100dvh){
  #doc-fade{top:calc(100dvh - 88px);bottom:auto}
}
body.in-page.can-scroll #doc-fade{opacity:1}

/* Dok je podstranica otvorena, home se ne vidi kroz nju. */
body.in-page #brand,
body.in-page #orbit,
body.in-page #enter,
body.in-page #foot,
body.in-page #skywrap{
  opacity:0 !important;
  pointer-events:none !important;
}

/* Otkrivanje sadrzaja unutar panela — isto kao na samostalnim stranama,
   samo vezano za `#doc` umesto za `body`. */
#doc .next-b,
#doc .page-head,
#doc .page-body,
#doc .page-foot{opacity:0;transform:translateY(6px)}
#doc.revealed .page-head{transition:opacity .7s ease-out .05s, transform .7s cubic-bezier(.33,0,.2,1) .05s}
#doc.revealed .page-body{transition:opacity .9s ease-out .16s, transform .9s cubic-bezier(.33,0,.2,1) .16s}
#doc.revealed .next-b,
#doc.revealed .page-foot{transition:opacity .7s ease-out .30s, transform .7s cubic-bezier(.33,0,.2,1) .30s}
#doc.revealed .page-head,
#doc.revealed .page-body,
#doc.revealed .next-b,
#doc.revealed .page-foot{opacity:1;transform:none}

/* izlazak je brz i jednovremen — ne cekamo kaskadu unazad */
#doc.leaving .page-head,
#doc.leaving .page-body,
#doc.leaving .next-b,
#doc.leaving .page-foot{
  opacity:0;transform:translateY(-4px);
  transition:opacity .30s ease-in, transform .30s ease-in;
}

/* --------------------------------------------------- prozdiranje ekrana */

/* Klik na link: rupa naraste dok ne pojede ceo ekran, pa se tek onda
   ide na novu stranu. Tekst i logo se sklone pre nego sto ih obod
   stigne — inace bi belo pisalo preko crnog diska. */
#stage.eating #orbit a,
#stage.eating ~ #foot{
  opacity:0 !important;
  transition:opacity .26s ease-in !important;
  pointer-events:none;
}
#stage.eating #skywrap{
  opacity:0 !important;
  transition:opacity .30s ease-in !important;
}
#stage.eating #brand img{
  opacity:0;
  transform:scale(.965);
  filter:drop-shadow(0 0 0 rgba(255,255,255,0));
  transition:opacity .40s ease-in .10s, transform .55s ease-in .10s,
             filter .30s ease-in;
}

/* Rezerva kad WebGL ne radi: obican krug koji naraste. Boja je ista kao
   papir, pa se ne vidi kao "objekat" — samo proguta koronu. */
#eater{
  position:fixed;
  left:50%;top:50%;
  /* Promenljiva se zove --disk-px, ne --disk. Ranije je ovde pisalo
     --disk, sto ne postoji, pa je `calc()` bio nevazeci i krug je imao
     sirinu 0 — rezerva nije radila NIKAD. Videlo bi se tek na masini bez
     WebGL-a, gde ionako niko nije gledao. */
  width:calc(var(--disk-px) * 2);
  height:calc(var(--disk-px) * 2);
  margin:calc(var(--disk-px) * -1) 0 0 calc(var(--disk-px) * -1);
  border-radius:50%;
  background:var(--paper);
  z-index:8;
  pointer-events:none;
  opacity:0;
  transform:scale(1);
}
#eater.go{
  opacity:1;
  transform:scale(14);
  transition:transform .80s cubic-bezier(.6,0,.85,.35), opacity .01s;
}

/* =====================================================================
   ULAZNA SEKVENCA

   Sve krece iz praznog papira — nikakav poster, nikakav loader.
   Redosled je namerno takav da svaki sloj priprema sledeci:

     0.00 – 0.55 s   zrno         (papir dobije teksturu)
     0.30 – 1.30 s   rupa i zraci (u_intro u shaderu)
     0.85 – 1.85 s   zvezde
     0.95 – 1.70 s   logo
     1.25 s +        linkovi, jedan po jedan na 90 ms
     1.55 – 2.25 s   podnozje i dugme za zvuk
     2.45 s          klasa `intro` se skida

   Klasa `intro` nosi SAMO kasnjenja. Mora da se skine kad se sekvenca
   zavrsi — inace bi `transition-delay: 1.25s` ostao na linkovima i
   hover bi kasnio ceo sekund.
   ===================================================================== */

body.intro #grain{transition-delay:0s}
body.intro #skywrap{transition-delay:.85s}
body.intro #brand img{transition-delay:.95s}

/* poster se pojavi tacno u slotu u kom bi se pojavila rupa */
body.intro #poster{transition-delay:.30s}

/* Posle klika na rupu: linkovi izlaze jedan po jedan, pa podnozje.
   Klasa `stagger` se skida cim sekvenca prodje — inace bi
   `transition-delay` zauvek kasnio hover. */
body.stagger #orbit a{transition-delay:.16s}
body.stagger #orbit a:nth-child(2){transition-delay:.25s}
body.stagger #orbit a:nth-child(3){transition-delay:.34s}
body.stagger #orbit a:nth-child(4){transition-delay:.43s}
body.stagger #orbit a:nth-child(5){transition-delay:.52s}
body.stagger #foot{transition-delay:.62s}

/* Ako JS ne radi, sve mora biti vidljivo odmah i bez kapije. */
html.no-js #grain{opacity:.085}
html.no-js #orbit a,
html.no-js #brand img,
html.no-js #foot,
html.no-js #skywrap,
html.no-js #poster{opacity:1}
html.no-js #brand img{transform:none}
html.no-js #orbit a{pointer-events:auto}
html.no-js #enter{display:none}


/* =====================================================================
   PLEJER

   Krug JE plejer. Strelice se vide samo dok je kursor u krugu — dok ih
   nema, slika je ista kao pre. Naslov pesme stoji tacno tamo gde je
   stajalo "CLICK TO ENTER", u istoj velicini: jedan slot, dva sadrzaja.
   ===================================================================== */

#audio{display:none}

#player{
  position:absolute;inset:0;
  z-index:5;
  pointer-events:none;      /* samo dugmad hvataju klik */
}

/* --- strelice --------------------------------------------------------
   0.72 * poluprecnik: izmedju ivice logotipa (~0.52) i ivice diska (1.0),
   blize ivici — kako je i trazeno. */
#player .nav{
  position:absolute;
  top:50%;
  width:34px;height:34px;
  margin:0;padding:0;border:0;
  background:none;
  color:var(--ink-dim);
  cursor:pointer;
  -webkit-appearance:none;appearance:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;
  transform:translate(-50%,-50%) scale(.9);
  transition:opacity .40s cubic-bezier(.33,0,.2,1),
             transform .40s cubic-bezier(.33,0,.2,1),
             color .35s ease;
  pointer-events:none;
}
#player .nav svg{width:11px;height:16px;display:block}

#prev{left:calc(50% - var(--disk-px) * 0.72)}
#next{left:calc(50% + var(--disk-px) * 0.72)}

/* Vide se dok je kursor u krugu, ili dok su na tastaturi. */
body.entered #stage.hole #player .nav,
body.entered #player .nav:focus-visible{
  opacity:.62;
  transform:translate(-50%,-50%) scale(1);
  pointer-events:auto;
}
body.entered #stage.hole #player .nav:hover,
body.entered #player .nav:focus-visible{
  opacity:1;
  color:var(--ink-hot);
  outline:none;
}
/* Malo veca zona za klik nego sto strelica izgleda. */
#player .nav::before{
  content:'';position:absolute;inset:-10px;
}

/* Na dodirnim ekranima strelica nema — tamo se prevlaci. */
@media (hover:none), (pointer:coarse){
  #player .nav{display:none}
}

/* --- linija napretka -------------------------------------------------
   Stoji izmedju logotipa i naslova. Logo se zavrsava na 0.24R ispod
   centra (visina = sirina / 2.62, pola toga), naslov je na 0.42R —
   0.33R je tacno izmedju.

   Tri sloja jednom linijom:
     osnova  cela pesma, jedva vidljiva      -> "ovoliko je duga"
     .win    isecak koji se cuje             -> "ovo je ono sto ces cuti"
     .play   odsvirani deo isecka            -> "ovde si"
*/
#prog{
  position:absolute;
  left:50%;
  top:calc(50% + var(--disk-px) * 0.33);
  transform:translate(-50%,-50%);
  width:min(calc(var(--disk-px) * 1.12), 240px);
  height:1px;
  background:rgba(255,255,255,.10);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s cubic-bezier(.33,0,.2,1);
}
#prog .win{
  position:absolute;top:0;height:100%;
  left:var(--win-x, 0%);
  width:var(--win-w, 100%);
  background:rgba(255,255,255,.30);
}
#prog .play{
  position:absolute;left:0;top:0;height:100%;
  width:var(--play-w, 0%);
  background:rgba(255,255,255,.85);
}
body.entered #prog{opacity:1}
body.paused  #prog{opacity:.45}
#stage.hole  #prog{background:rgba(255,255,255,.16)}

/* Na telefonu nema mesta izmedju logotipa i naslova — a i trazeno je
   samo za desktop. */
@media (max-width:640px){ #prog{display:none} }

/* --- naslov pesme ----------------------------------------------------
   Ista pozicija i ista velicina kao "CLICK TO ENTER". */
/* --------------------------------------------------------- broj pesme

   Redni broj je jedina informacija koja je nedostajala: naslov kaze STA
   svira, linija kaze koliko je proslo, ali nista nije govorilo GDE si u
   albumu od jedanaest pesama.

   Sedi uz levi kraj linije napretka, u istoj visini. To je mesto brojaca
   na magnetofonu — pocetak trake. Nije pored naslova jer bi tamo bio
   drugi podatak u istom redu i naslov bi prestao da bude jedina rec.

   Namerno je JEDVA vidljiv: broj se trazi kad ti zatreba, ne nudi se.
   Zato je 9 px, boja `--ink-dim` na 55%, a "/11" jos tiše — ukupan broj
   je kontekst, ne vest.

   `font-variant-numeric: tabular-nums` da se sirina ne menja izmedju
   01 i 11 — inace bi ceo blok poskakivao na svaku pesmu.

   Samo desktop: na telefonu ispod logotipa nema ni piksela viska. */
#tno{display:none}

@media (min-width:641px){
  #tno{
    display:block;
    position:absolute;
    /* IZNAD LOGOTIPA, tacno onoliko koliko je linija napretka ispod
       njega (0.33 poluprecnika). Broj gore, linija i naslov dole —
       logo je izmedju i ostaje sredina slike. */
    left:50%;
    top:calc(50% - var(--disk-px) * 0.33);
    transform:translate(-50%,-50%);
    text-align:center;
    margin:0;
    font-size:9px;
    letter-spacing:.14em;
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
    color:var(--ink-dim);
    opacity:0;
    pointer-events:none;
    transition:opacity .55s cubic-bezier(.33,0,.2,1),
               color .55s cubic-bezier(.33,0,.2,1);
  }
  #tno span{color:rgb(var(--glow) / .85)}
  #tno i{font-style:normal;opacity:.35;padding:0 .25em}
  #tno b{font-weight:400;opacity:.5}
  /* Vidi se SAMO dok je kursor u rupi — isto kao prsten jacine.
     Rupa u miru je slika, ne sprava. Cim se udje u nju, pokaze se ono
     sto se moze podesiti: gde si u albumu i koliko je glasno.
     Ranije je broj stajao stalno i time postao deo slike, a nije. */
  body.entered #stage.hole #tno{opacity:.8}
  body.in-page #tno,
  #stage.eating #tno{opacity:0 !important}
}

#track{
  position:absolute;
  left:50%;
  top:calc(50% + var(--disk-px) * 0.42);
  transform:translate(-50%,-50%);
  margin:0;
  /* NA DESKTOPU IMA MESTA — naslov se ne skracuje.
     Granica nije logo nego prvi susedni link. Naslov stoji 0.42R ispod
     centra; BOOKING i MERCH sede na (±0.76 * poluvisina, +0.31R), pa je
     slobodno do ~1.9R sirine. Najduzi naslov je ~235 px, a 1.9R je 359 px
     na 1440x900 — staje sa viskom.
     `max-width` a ne `width`: kad tekst stane, kutija je tacno njegove
     sirine pa `fitTitle()` ne vidi visak i klizanje se ne ukljucuje. */
  max-width:calc(var(--disk-px) * 1.9);
  white-space:nowrap;
  overflow:hidden;
  text-align:center;
  font-size:clamp(9px,.9vmin + 6px,12px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:var(--ink-dim);
  opacity:0;
  pointer-events:none;
  transition:opacity .55s cubic-bezier(.33,0,.2,1),
             color .55s cubic-bezier(.33,0,.2,1);
}
#track .t{
  display:inline-block;
  white-space:nowrap;
  will-change:transform;
}

/* Ako naslov ne staje: klizi napred pa nazad, sa pauzom na oba kraja.
   Ivice se ne seku ostro nego blede — ostar rez izgleda kao greska. */
#track.roll{
  text-align:left;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 10px,
                     #000 calc(100% - 10px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 10px,
             #000 calc(100% - 10px),transparent 100%);
}
#track.roll .t{
  animation:title-roll var(--roll-dur,12s) linear infinite;
}
@keyframes title-roll{
  0%,10%    {transform:translateX(0)}
  45%,55%   {transform:translateX(calc(-1 * var(--roll-d,0px)))}
  90%,100%  {transform:translateX(0)}
}

body.entered #track{opacity:1}
body.playing #track{color:var(--ink)}
/* pauza: naslov se povuce, bez ikakvog ikonskog smeca */
body.paused #track{color:var(--ink-dim);opacity:.55}

/* zamena naslova ide kroz kratko gasenje, nikad skok */
#track.swap{opacity:0 !important;transition:opacity .18s ease-in}


/* --- jacina zvuka ----------------------------------------------------
   Tanak luk uz UNUTRASNJU ivicu rupe, na 0.90 poluprecnika. Rupa je
   prazna crna povrsina, pa se tanka svetla linija tamo cita kao sprava,
   a ne kao deo pomracenja. */
#vol{
  position:absolute;
  left:50%;top:50%;
  /* Luk pada tacno na 0.975 poluprecnika — na sam obod rupe.
     Racun: krug u SVG-u ima r = 47 od viewBox-a 100, pa je prikazani
     poluprecnik (47/100) * stranica. Za 0.975R stranica mora biti
     0.975 * 100/47 = 2.0745 poluprecnika. */
  width:calc(var(--disk-px) * 2.0745);
  height:calc(var(--disk-px) * 2.0745);
  transform:translate(-50%,-50%) rotate(-90deg);   /* pocinje na 12 sati */
  color:var(--ink);
  opacity:0;
  pointer-events:none;
  transition:opacity .45s cubic-bezier(.33,0,.2,1);
  overflow:visible;
}
#vol circle{stroke-width:var(--vol-sw, 1.5)}
#vol .trk{opacity:.14}
#vol .val{
  opacity:.70;
  stroke-dasharray:var(--vol-len, 295.3);
  stroke-dashoffset:var(--vol-off, 59);
  transition:stroke-dashoffset .18s linear, opacity .35s ease;
}

/* Vidi se dok je kursor u krugu i jos ~2 s posle svake promene. */
body.entered #stage.hole #vol,
body.entered #vol.show{opacity:1}
body.entered #vol.active .val{opacity:.95}
body.entered #vol.active{opacity:1}

/* dok se podesava, kursor ne sme da bude "ruka" */
body.vol-drag #enter{cursor:ns-resize}
body.vol-drag{cursor:ns-resize}

body.in-page #player,
#stage.eating #player{opacity:0;pointer-events:none;transition:opacity .26s ease-in}

html.no-js #player{display:none}

/* -------------------------------------------------------------- zrno */

/* Overlay/soft-light blend na ovako tamnoj podlozi daje skoro nulti
   efekat (rezultat skalira sa 2*base = 0.22). Zato je zrno RGBA
   tekstura sa crnim i belim zrncima i normalnim blendom — jedino
   tako se zrno vidi i na tekstu, a ne samo na svetlijim delovima. */
/* Zrno je bilo preagresivno: 0.30 opacity preko ostre teksture je
   grebalo oko. Sada je tekstura blago razmazana pri generisanju, tile
   je krupniji, opacity je trecina — zrno se i dalje oseca, ali ne bode.
   Pomeranje je manje (1% umesto 3%) da ne "vrvi". */
#grain{
  position:fixed;inset:-50%;
  z-index:9;
  pointer-events:none;
  background-image:url("../img/noise.png");
  background-size:210px 210px;
  opacity:0;
  transition:opacity .55s ease-out;
  animation:jitter 1.4s steps(1) infinite;   /* ~4 fps, filmski */
}
body.ready #grain{opacity:.085}

/* Podstranice nemaju klasu `ready` — zrno im je zato bilo nevidljivo.
   Najuocljivije na telefonu, gde je papir jedini sadrzaj ekrana.

   ALI ista brojka NE daje isti utisak. Na home-u zrno lezi preko korone,
   diska i zvezda — preko slike koja se vec menja od piksela do piksela,
   pa se u njoj gubi. Na podstranici je ispod njega ravan papir i samo
   ostar tekst; sum na ravnom polju je najvidljiviji sto sum moze da
   bude, i uz ostra slova izgleda kao da grebe.
   Zato je podstranica uvek nizа od home-a.

   SPUSTENO: home 0.115 -> 0.085, podstranica 0.082 -> 0.060, oboje za
   oko 26%. Na kalibrisanom monitoru je 0.115 bilo tacno; na telefonu,
   gde je ekran sjajniji i drzi se blize oku, isto zrno se cita kao sum.
   Odnos izmedju home-a i podstranice je zadrzan.

   Prelaz je duzi (0.9 s) da promena padne unutar gutanja ekrana i da se
   nigde ne vidi kao da zrno "poskoci". */
body.page #grain,
body.in-page #grain{opacity:.060;transition:opacity .9s ease-out}
@keyframes jitter{
  0%  {transform:translate(0,0)}
  16% {transform:translate(-1%, .8%)}
  33% {transform:translate(.8%,-1%)}
  50% {transform:translate(-.7%,-.7%)}
  66% {transform:translate(1%, .4%)}
  83% {transform:translate(-.4%, 1%)}
  100%{transform:translate(0,0)}
}

/* =====================================================================
   PODSTRANICE
   Isti papir, isto zrno, isti tipografski sistem. Ekran koji je rupa
   upravo pojela je iste boje kao ova pozadina, pa se prelaz ne vidi kao
   ucitavanje nove strane — sadrzaj se prosto pojavi iz crnog.
   ===================================================================== */

.page{
  min-height:100vh;
  min-height:100svh;      /* na telefonu 100vh je vece od vidljivog dela
                             i samim tim pravi skrol niotkuda */
  display:flex;
  flex-direction:column;
  padding:0 clamp(1.2rem,5vw,4rem);
}

/* mala eklipsa u zaglavlju — trag odakle si dosao */
.mark{
  width:12px;height:12px;border-radius:50%;
  background:var(--paper);
  box-shadow:0 0 0 1px rgba(255,255,255,.55),
             0 0 14px 2px rgba(255,255,255,.20);
  flex:0 0 auto;
}

.page-head{
  display:flex;align-items:center;gap:1.1rem;
  padding:2.2rem 0 0;
}
.page-head a.home-link{
  display:flex;align-items:center;gap:.9rem;
  color:var(--ink-dim);text-decoration:none;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  transition:color .5s cubic-bezier(.33,0,.2,1);
}
.page-head a.home-link:hover,
.page-head a.home-link:focus-visible{color:var(--ink-hot);outline:none}
.page-head a.home-link:hover .mark{
  box-shadow:0 0 0 1px rgba(255,255,255,.9), 0 0 22px 4px rgba(255,255,255,.35);
  transition:box-shadow .5s cubic-bezier(.33,0,.2,1);
}

/* ---------------------------------------------- link ka sledecoj strani

   Isti link stoji u dokumentu DVA puta i uvek je tacno jedan vidljiv:
   na sirokom ekranu onaj u zaglavlju, na uskom onaj na dnu. To je
   namerno, a ne lenjost — zaglavlje i podnozje su na suprotnim krajevima
   dokumenta i CSS ne ume da premesti element iz jednog u drugi. Skriveni
   ide na `display:none`, pa ispada i iz reda za tastaturu i iz citaca
   ekrana; duplog linka nema ni za koga.

   Strelica je zaseban element, ne deo teksta. Tako moze da klizne udesno
   na hover, a razmak izmedju reci i strelice ostaje isti — da je unutar
   teksta, `letter-spacing` bi je odgurao i mrdanje bi izgledalo kao
   greska u proredu. */
.next{
  margin-left:auto;                /* gura se na desni kraj reda */
  display:inline-flex;
  align-items:center;
  gap:.85em;
  color:var(--ink-dim);
  text-decoration:none;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  white-space:nowrap;
  transition:color .5s cubic-bezier(.33,0,.2,1);
}
.next i{
  font-style:normal;
  display:inline-block;
  transition:transform .5s cubic-bezier(.33,0,.2,1);
}
.next:hover,.next:focus-visible{color:var(--ink-hot);outline:none}
.next:hover i,.next:focus-visible i{transform:translateX(5px)}

/* Na sirokom ekranu radi onaj u zaglavlju. */
.next-b{display:none}

/* SADRZAJ KORISTI CELU SIRINU.
   Ranije je bio zakljucan na 820 px i centriran, pa je na sirokom
   monitoru ostajalo pola ekrana praznog sa obe strane dok su zaglavlje i
   podnozje isli od ivice do ivice — tri razlicite sirine na istoj
   stranici.

   ALI "puna sirina" NE znaci pun red teksta. Recenica preko 2560 px je
   oko 250 znakova; oko izgubi red pri povratku i tekst postaje
   necitljiv. Zato je puna sirina data RASPOREDU, a duzina reda ostaje
   ogranicena na 62 znaka (`.page p`). Redovi (svirke, izdanja, artikli)
   se sad razvlace od ivice do ivice, i to je i bilo mesto gde je sirina
   nedostajala. */
.page-body{
  flex:1 0 auto;
  width:100%;
  /* Gornja granica, ne 820 px kao ranije. Do 1400 px sadrzaj ide od
     ivice do ivice; preko toga se skuplja ka sredini. Bez ovoga na
     27-incnom monitoru dva bloka sede u suprotnim uglovima a sredina
     ostane prazna — to je slika koja se raspala, a ne "vazduh". */
  max-width:1400px;
  margin:0 auto;
  /* Donji razmak je bio fiksnih 4rem i to je davalo TACNO 6 px preko
     ekrana na laptopu od 1271 px — dovoljno za traku za skrol na strani
     koja je trebalo da bude bez skrola. Merio sam na Music-u: zaglavlje
     57 + telo 1130 + podnozje 90 = 1277.
     Sada se donji razmak povlaci zajedno sa ekranom, a na visokom
     monitoru ostaje isti kao pre. */
  /* Oba razmaka se povlace zajedno sa visinom ekrana. Gornji je bio
     `9vh` i na laptopu od 900 px davao 81 px — sa svim ostalim to je
     bilo 906 px sadrzaja u 900 px ekrana, dakle traka za skrol zbog
     sest piksela. `6.6vh` daje 59 px i stane. Na monitoru od 1400 px
     oba i dalje udare u svoju gornju granicu, pa se tamo nista ne menja. */
  padding:clamp(2.2rem,6.6vh,6rem) 0 clamp(1.6rem,3vh,4rem);
}

.page h1{
  margin:0 0 .35em;
  font-size:clamp(30px,7vw,64px);
  font-weight:400;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--ink-hot);
  line-height:1.08;
}
.page .sub{
  margin:0 0 3.4rem;
  font-size:11px;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ink-dim);
}
.page h2{
  margin:3rem 0 1rem;
  font-size:12px;letter-spacing:.36em;text-transform:uppercase;
  font-weight:400;color:var(--ink-dim);
}
.page p{margin:0 0 1.2rem;line-height:1.75;max-width:62ch;font-size:15px}
.page a{color:var(--ink-hot);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22)}
.page a:hover{border-bottom-color:rgba(255,255,255,.7)}

.page hr{border:0;height:1px;background:rgba(255,255,255,.10);margin:2.6rem 0}

/* Na velikom monitoru slova rastu, a sa njima i duzina reda — mera je
   `ch`, dakle vezana za font. 15 px na 27 inca je sitno, a sirenje
   samo `max-width`-a bi dalo dug red istim sitnim slovima. */
@media (min-width:1500px){
  .page p{font-size:16px}
  .row .what{font-size:16px}
}

/* red (svirka, ploca, artikal) */
.row{
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;align-items:baseline;
  padding:1.05rem 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.row .when{
  flex:0 0 8.5em;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--ink-dim);
}
.row .what{flex:1 1 14em;color:var(--ink-hot);font-size:15px}
.row .where{flex:1 1 10em;color:var(--ink-dim);font-size:13px}
/* Treca kolona ide na DESNU IVICU. Bez ovoga se puna sirina ne cita kao
   raspored nego kao red koji je slucajno ostao kratak. */
@media (min-width:900px){
  .row .where{text-align:right}
}

/* Stranica sa spiskom ima svoj, uzi vertikalni ritam. Jedanaest redova
   plus zaglavlje i uvod ne trpe 96 px praznine iznad naslova; na
   ostalim podstranicama taj vazduh ima smisla jer sadrzaja ima malo. */
.tracks-page{padding-top:clamp(1.6rem,4.5vh,4rem)}
.tracks-page .sub{margin-bottom:2.4rem}
.tracks-page .note{margin-bottom:0}

/* ------------------------------------------------------------ obrazac

   Polja su linije, ne kutije. Okvir sa cetiri strane na ovoj stranici
   izgleda kao administracija; donja linija je isto polje, samo tise.

   Greska stoji ISPOD polja i ima svoje mesto u rasporedu i kad je
   prazna (`min-height`). Da se ubacuje tek kad se pojavi, ceo obrazac
   bi poskocio na svaku gresku.
*/
.book-form{max-width:34rem}

.fld{margin:0 0 1.6rem}
.fld label{
  display:block;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--ink-dim);
  margin:0 0 .55rem;
  transition:color .35s ease;
}
.fld input,
.fld textarea{
  display:block;width:100%;
  background:none;
  border:0;
  border-bottom:1px solid rgba(255,255,255,.16);
  color:var(--ink-hot);
  font-family:inherit;
  font-size:15px;
  line-height:1.6;
  padding:.5rem 0;
  border-radius:0;              /* iOS sam zaobli uglove */
  -webkit-appearance:none;appearance:none;
  transition:border-color .4s ease, background-color .4s ease;
}
.fld textarea{resize:vertical;min-height:7.5rem}
.fld input:focus,
.fld textarea:focus{
  outline:none;
  border-bottom-color:rgb(var(--glow) / .75);
}
.fld:focus-within label{color:var(--ink)}

/* Pregledaci sami oboje polje koje su zapamtili — jarko plavo preko
   crnog papira. Ovo je jedini nacin da se to spreci: senka od 1000 px
   prekrije njihovu pozadinu, a boja teksta se forsira. */
.fld input:-webkit-autofill,
.fld input:-webkit-autofill:hover,
.fld input:-webkit-autofill:focus{
  -webkit-text-fill-color:var(--ink-hot);
  -webkit-box-shadow:0 0 0 1000px var(--paper) inset;
  transition:background-color 9999s ease;
}

.fld .err{
  margin:.5rem 0 0;
  min-height:1.1em;
  font-size:12px;letter-spacing:.02em;
  color:#e0a08c;
}
.fld.bad input,
.fld.bad textarea{border-bottom-color:#c47a63}
.fld .hint{
  margin:.45rem 0 0;
  font-size:11px;letter-spacing:.1em;
  color:var(--ink-dim);
  text-align:right;
}

/* Zamka za robote. `display:none` neki roboti preskacu, pa se polje
   sklanja iz vidokruga a ostaje "postojece". */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.book-form button[type=submit]{
  margin-top:.4rem;
  background:none;
  border:1px solid rgba(255,255,255,.22);
  color:var(--ink-hot);
  font:inherit;
  font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  padding:.95rem 2.2rem;
  cursor:pointer;
  border-radius:0;
  -webkit-appearance:none;appearance:none;
  transition:border-color .4s ease, color .4s ease, background-color .4s ease;
}
.book-form button[type=submit]:hover:not(:disabled),
.book-form button[type=submit]:focus-visible{
  border-color:rgb(var(--glow) / .8);
  color:#fff;
  outline:none;
}
.book-form button[type=submit]:disabled{opacity:.45;cursor:default}

.book-form .msg{
  margin:1.2rem 0 0;
  min-height:1.2em;
  font-size:13px;line-height:1.6;
  color:var(--ink-dim);
  max-width:none;
}
.book-form .msg.ok{color:rgb(var(--glow) / 1)}
.book-form .msg.err{color:#e0a08c}
.book-form .msg a{color:inherit}
.book-form .copy{
  background:none;border:0;padding:0 0 0 .6em;
  color:inherit;font:inherit;font-size:12px;
  text-decoration:underline;cursor:pointer;
}

@media (min-width:900px){
  /* Isti postupak kao na About-u: blok se centrira i po sirini i po
     visini. Ranije je sedeo uz gornju levu ivicu a ispod njega je
     ostajala trecina ekrana prazna — to se cita kao nedovrsena
     stranica, a ne kao vazduh. */
  /* Booking je bio dvokolonski (tekst | obrazac) i sedeo je na sredini
     ekrana. Sada nosi isti raspored kao ostale strane — sve u levoj
     koloni, fotografija desno — pa se tekst i obrazac slazu jedno ispod
     drugog. Polja su i dalje puna sirina te kolone. */
  .book-grid{
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:clamp(1.6rem,3vh,2.6rem);
    width:100%;
  }
  .book-txt h2:first-of-type{margin-top:2rem}
}

/* ----------------------------------------------------------- tracklist

   Traka po pesmi je ISTA sprava kao linija napretka na home-u: cela
   pesma slabo, cujni isecak jako. Zato i nosi boju albuma (`--glow`) —
   ista informacija ne sme da ima dva izgleda na istom sajtu.

   Sirina osvetljenog dela NIJE upisana rukom nego izracunata iz stvarnog
   trajanja fajla (`ffprobe`) i duzine prozora. Kad se prozori pomere,
   menjaju se dva broja u `--x` i `--w` i slika je opet tacna.
   To je i poenta: traka pokazuje koliko se NE cuje. Kod pesme od 5:35
   to je 27% ploce, kod one od 9:50 samo 15%. */
.tracks{list-style:none;margin:0;padding:0}

.trk{
  display:grid;
  grid-template-columns:2.4rem minmax(0,1fr) minmax(140px,2.4fr) 3.6rem;
  gap:1.5rem;
  align-items:center;
  /* Razmak je VEZAN ZA VISINU EKRANA, ne fiksan. Fiksnih 0.82rem je
     radilo tacno na jednom monitoru — cim se doda jedan red teksta
     iznad, spisak opet padne preko ivice. Ovako se na nizem ekranu
     redovi sami skupe, a na visokom ne prelaze gornju granicu. */
  padding:clamp(.42rem, 1.05vh, .82rem) 0;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.trk .no{
  font-size:11px;letter-spacing:.2em;
  color:var(--ink-dim);
  font-variant-numeric:tabular-nums;
}
.trk .ttl{color:var(--ink-hot);font-size:15px}
.trk .dur{
  font-size:12px;color:var(--ink-dim);
  text-align:right;
  font-variant-numeric:tabular-nums;
}
/* Traka ima TRI nivoa, isto kao linija napretka na home-u:
     podloga  — cela pesma, jedva vidljiva
     i        — cujni isecak od 90 s
     b        — deo tog isecka koji je odsviran
   Bez treceg nivoa spisak bi bio samo tabela; sa njim je plejer. */
.trk .bar{
  position:relative;
  height:2px;
  background:rgba(255,255,255,.10);
}
.trk .bar i{
  position:absolute;top:0;bottom:0;
  left:var(--x);width:var(--w);
  background:rgb(var(--glow) / .38);
  transition:background .45s ease;
}
.trk .bar b{
  position:absolute;left:0;top:0;bottom:0;
  width:0;
  background:rgb(var(--glow) / .95);
}
.trk:hover .bar i,
.trk:focus-visible .bar i{background:rgb(var(--glow) / .70)}

/* Red je dugme. Kursor i fokus to moraju da kazu — bez toga se ne zna
   da spisak uopste nesto radi. */
.trk{cursor:pointer;outline:none}
.trk .ttl,.trk .no,.trk .dur{transition:color .35s ease}
.trk:hover .ttl,.trk:focus-visible .ttl{color:#fff}
.trk:focus-visible{
  box-shadow:0 0 0 1px rgb(var(--glow) / .45);
  border-radius:2px;
}

/* Pesma koja trenutno svira. Tacka pored broja je jedini nov element na
   ekranu — naslov se samo pojaca, jer bi jos jedna oznaka na jedanaest
   redova bila buka. */
.trk.now .ttl{color:#fff}
.trk.now .no{color:rgb(var(--glow) / .95)}
.trk.now .bar i{background:rgb(var(--glow) / .55)}
.trk.now .no::after{
  content:'';
  position:absolute;
  margin-left:.55em;margin-top:.42em;
  width:4px;height:4px;border-radius:50%;
  background:rgb(var(--glow) / .95);
  animation:trkpulse 2.6s ease-in-out infinite;
}
.trk.now.paused .no::after{animation:none;opacity:.4}
.trk .no{position:relative}
@keyframes trkpulse{
  0%,100%{opacity:1}
  50%{opacity:.35}
}

@media (min-width:1500px){ .trk .ttl{font-size:16px} }

/* Na telefonu cetiri kolone ne staju. Traka pada u drugi red i ide
   punom sirinom — tamo je i najkorisnija, jer je ekran uzak pa je
   svaki procenat vidljiviji. */
@media (max-width:640px){
  .trk{
    grid-template-columns:2rem minmax(0,1fr) auto;
    gap:.2rem .8rem;
    padding:.85rem 0;
  }
  .trk .bar{grid-column:2 / -1;margin-top:.55rem}
}

.page .note{
  font-size:12px;letter-spacing:.06em;
  color:var(--ink-dim);
  margin-top:1.8rem;
}

/* NIZAK EKRAN (laptop 1080p ima oko 940 px vidljivog).
   Jedanaest redova, naslov, uvod i podnozje tamo ne staju sa razmacima
   koji su tacni na velikom monitoru. Ovde se stiskaju SAMO oni delovi
   koji nista ne znace — razmak izmedju redova i vazduh iznad naslova.
   Slova, trake i trajanja ostaju isti; lista koja se ne moze procitati
   nije resenje za listu koja se skroluje. */
@media (min-width:900px) and (max-height:1000px){
  .trk{padding:clamp(.28rem,.72vh,.6rem) 0}
  .tracks-page{padding-top:clamp(1rem,2.6vh,2rem);padding-bottom:2rem}
  .tracks-page .sub{margin-bottom:1.6rem}
  .tracks-page .lede{margin-bottom:1.4rem}
  .tracks-page h2{margin-top:1.8rem;margin-bottom:.7rem}
  .tracks-page .note{margin-top:1.1rem}
}

/* ------------------------------------------------- velika fotografija

   Isti sloj koristе Music (maketa ploce) i Merch (majice). Stoji IZA sadrzaja i izlazi iz okvira teksta udesno.

   `position:fixed`, ne `absolute` — i to nije sitnica. Apsolutni sloj
   ove velicine bi prelivao preko dna stranice i vratio skrol koji je sa
   ove strane bio najteze izbaciti. Fiksni sloj ne ulazi u visinu
   dokumenta, pa slika moze da bude koliko god hoce.

   Visina je vezana za `vh`, ne sirina za `vw`: slika je siroka 1.2:1 pa
   bi merenje po sirini na niskom i sirokom ekranu izraslo preko vrha.

   MASKA S LEVE STRANE je uslov, ne ukras. Slika ide ispod spiska pesama;
   bez gasenja bi naslovi lezali na omotu i prestali da se citaju. Gasi
   se do nule na 42% svoje sirine, dakle pre nego sto stigne do brojeva. */
.shot{display:none}

@media (min-width:900px){
  .shot{
    display:block;
    position:fixed;
    right:-5vw;
    top:50%;
    transform:translateY(-50%);
    margin:0;
    z-index:0;
    pointer-events:none;
    height:min(104vh, 1180px);

    /* Pocetno stanje. Za razliku od ranije, ovo NIJE animacija sa
       `both` nego prelaz vezan za klasu `revealed` — istu koju cekaju i
       zaglavlje, telo i podnozje.

       Zasto je promenjeno: animacija je krenula cim element postoji u
       dokumentu, dakle po svom satu, nezavisno od ostatka. Na prelazu sa
       podstranice na podstranicu to se videlo — sadrzaj se povukao i
       ugasio, a fotografija je nastavila po svome. Sada su na istom
       lancu i ne mogu da se raziđu.

       Uspravno centriranje mora ostati unutar `transform`, pa se pomeraj
       dodaje kao DRUGI `translateY` u istom nizu. Redosled je bitan:
       prvo -50% (centriranje), pa tek onda pomeraj. */
    transform:translateY(-50%) translateY(12px) scale(1.03);
    opacity:0;
    /* Najduze i najkasnije od svega na strani. Kaskada je 0.05 (zaglavlje),
       0.16 (telo), 0.30 (podnozje) — fotografija na 0.38 i traje 1.25 s,
       pa se otvara tek kad je tekst vec citljiv. */
    transition:opacity 1.25s ease-out .38s,
               transform 1.25s cubic-bezier(.33,0,.2,1) .38s;
  }
  body.revealed .shot,
  #doc.revealed .shot{
    opacity:1;
    transform:translateY(-50%) scale(1);
  }
  /* Odlazak: isto trajanje i ista krivina kao ostatak sadrzaja (0.28 s),
     samo je pomeraj manji jer je slika veca — na 1180 px visine se i
     cetiri piksela vide koliko dvanaest na jednom redu teksta. */
  body.page.leaving .shot,
  #doc.leaving .shot{
    opacity:0;
    transform:translateY(-50%) translateY(-4px) scale(1);
    transition:opacity .28s ease-in, transform .28s ease-in;
  }
  .shot img{
    display:block;
    height:100%;
    width:auto;
    opacity:.85;
    transition:opacity 1.1s ease;
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 42%, #000 100%);
            mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 42%, #000 100%);
  }
  /* Dok zvuk ide, svetlo na maketi se jedva primetno pojaca. Klasu
     postavlja tracklist.js iz stvarnog stanja plejera. */
  body.spinning .shot img{opacity:1;filter:brightness(1.08)}

  /* Sadrzaj mora da bude IZNAD slike. Bez ovoga bi fiksni sloj, koji u
     dokumentu dolazi prvi, i dalje bio ispod — ali `#grain` i podnozje
     imaju svoje z-indekse i red bi zavisio od slucaja. */
  .page-head,.page-body,.page-foot{position:relative;z-index:1}

  /* Spisak se suzava da ne ulazi u gustinu slike. Trake su i dalje
     duze nego sto je potrebno da se procita odnos 90 s prema pesmi. */
  .tracks-page .music-grid{max-width:min(62%, 860px)}

  /* MERCH. Fotografija je skoro kvadratna (1.07:1), za razliku od ploce
     koja je siroka 1.2:1 — na istoj visini zauzme uzu traku, pa tekst
     sme da bude siri nego na Music-u.

     Maska mora da pocne ranije: majice imaju svetla ramena bas na levoj
     ivici, dok se ploca tamo vec izgubila u crno. Bez toga bi poslednja
     rec svakog reda lezala na ramenu. */
  .merch-page .merch-txt{max-width:min(56%, 660px)}

  /* Tekst stoji na sredini visine, kao na Booking-u i About-u. Spisak
     pesama na Music-u je jedini koji ide od vrha — on je dugacak i
     centriranje bi ga pomerilo ispod zaglavlja. */
  .page-body.merch-page,
  .page-body.about,
  .page-body.shows-page,
  .page-body.book-page{
    display:flex;
    /* KOLONA, ne red. Booking i About imaju po jedno dete pa bi radilo i
       sa `row`, ali Merch ima tri (naslov, podnaslov, tekst) — u redu bi
       stala jedno pored drugog. Uspravna sredina se zato dobija preko
       `justify-content`, ne `align-items`. */
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    padding-top:clamp(1.4rem,4vh,3rem);
    padding-bottom:clamp(1.4rem,3vh,2.6rem);
  }
  .page-body.merch-page > *,
  .page-body.about > *,
  .page-body.shows-page > *,
  .page-body.book-page > *{width:100%}

  /* Leva kolona je ista mera na svakoj strani. Sirina nije procenjena
     nego uzeta iz odnosa stranica fotografije: sto je slika uspravnija,
     to je uza traka koju zauzme i to je siri tekst.
        Merch  1.05:1  ->  56%
        About  0.55:1  ->  52%   (uspravna, uska)
     Shows i Booking jos nemaju sliku; do tada drze srednju vrednost. */
  .col-txt{max-width:min(54%, 700px)}
  .shot.shows-shot,
  .shot.booking-shot{right:0}

  /* PROVIDNOST SE RACUNA, NE BIRA. Svaka fotografija ima svoju
     prosecnu svetlinu; da su sve na istoj providnosti, najsvetlija bi
     bila najglasnija strana sajta bez ikakvog razloga.

       majice    28.5 x 0.92 = 26.2
       booking   41.6 x 0.77 = 32.0
       about     60.7 x 0.62 = 37.6

     Brojevi nisu izjednaceni do kraja — bina JESTE svetlija od crnih
     majica i treba da bude. Ali su u istom rasponu, pa nijedna strana
     ne iskace. */
  .shot.booking-shot img{opacity:.77}

  /* SHOWS IDE NA `brightness`, NE NA `opacity`, i to je jedina takva
     slika. Prosecna svetlina joj je 101.5 — tri i po puta jaca od
     majica. Da sam je gasio providnoscu, crna silueta basiste bi se
     podigla ka boji stranice i izgubila bi se bas ona koja nosi kadar;
     `brightness` spusta dim a crno ostavlja crnim, pa se kontrast
     zadrzi.
       101.5 x 0.42 = 42.6, pa jos malo providnosti = 41.4
     — u istom rasponu kao About (37.6) i Booking (32.0). */
  .shot.shows-shot img{
    filter:sepia(.16) saturate(.72) contrast(1.05) brightness(.42);
    opacity:.92;
  }

  /* ABOUT. Nova fotografija je skoro kvadratna (1.05:1), kao i majice,
     pa je i kolona ista sirina.

     PROVIDNOST JE NIZA NEGO NA MERCH-U, i to nije ukus nego merenje:
     ovaj kadar je osvetljena bina i prosecna svetlina mu je 60.7, dok
     je kod majica 28.5 — dakle vise od dva puta jaci. Na istoj
     providnosti bi About bio najsvetlija stranica sajta i povukao bi
     oko sa teksta. `0.62 x 60.7 = 37.6` prema `0.92 x 28.5 = 26.2`:
     jos uvek svetlija, jer to i jeste — ali u istom rasponu. */
  .about-txt{max-width:min(56%, 680px)}
  .shot.about-shot{right:0}
  .shot.about-shot img{opacity:.62}

  /* Ploca sme da izadje iz kadra — okrugla je i secenje se cita kao
     namera. Majica ne sme: na `-5vw` je desnom coveku bila odsecena ruka
     (izmereno 128 px na ekranu od 2560), a to izgleda kao greska u
     rasporedu, ne kao potez. Izmedju desne ivice fotografije i ruke ima
     svega 17 px, pa je jedina bezbedna vrednost nula. */
  .shot.merch{right:0}

  /* GORNJA I DONJA IVICA MORAJU DA SE UGASE.
     Fotografija je visoka 1180 px, ekran 1271 — dakle ne dopire do
     vrha ni do dna, a njena crna nije ista kao crna stranice (stranica
     ima papir i zrno preko sebe). Rezultat je bio vidljiv pravougaonik:
     dve vodoravne linije preko celog kadra.

     Maska za gore-dole stoji na OKVIRU, a maska za levo na SLICI. Dve
     maske na istom elementu se sabiraju (unija), a treba nam presek —
     ugnjezdena dva elementa to daju bez `mask-composite`, koji u
     WebKitu jos nije isti kao u ostalima. */
  .shot.merch,
  .shot.about-shot,
  .shot.shows-shot,
  .shot.booking-shot{
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 13%, #000 87%, rgba(0,0,0,0) 100%);
            mask-image:linear-gradient(to bottom,
      rgba(0,0,0,0) 0%, #000 13%, #000 87%, rgba(0,0,0,0) 100%);
  }
  .shot.merch img,
  .shot.about-shot img,
  .shot.shows-shot img,
  .shot.booking-shot img{
    -webkit-mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 54%, #000 100%);
            mask-image:linear-gradient(to right, rgba(0,0,0,0) 0%, #000 54%, #000 100%);
  }
  .shot.merch img{opacity:.92}
}


/* ------------------------------------------- obrada fotografija

   Sve fotografije prolaze kroz ISTI niz, pa se ne razilaze u tonu.
   Sajt nije neutralno crno-beli: papir je topao (#1c1c1c preko zrna) a
   naglasak je zlatan. Ciste sive fotografije su na toj podlozi delovale
   plavlje nego sto jesu — ne zato sto jesu plave, nego zato sto je sve
   oko njih toplo.

     sepia(.16)     vraca im tu istu toplinu, ne kao filter nego kao
                    tonirana kopija — ista stvar koju radi i barit
                    u tamnoj komori
     saturate(.72)  odmah je i skida, da tonirano ne postane braon
     contrast(1.05) JPEG i WebP na ovim velicinama malo spljoste sredinu

   Svetlina NIJE ovde. Ona je razlicita za svaku sliku i stoji uz nju,
   jer zavisi od toga koliko je taj kadar bio osvetljen. */
.shot img{
  filter:sepia(.16) saturate(.72) contrast(1.05);
}


/* ----------------------------------------------------------- poziv

   Isti oblik kao link "sledeca stranica" u zaglavlju — ista velicina,
   isti razmak slova, ista strelica koja se pomeri na hover. Namerno:
   na sajtu postoji tacno jedan nacin da nesto izgleda kao "idi dalje",
   pa se ne uci dvaput. */
.cta{
  display:inline-flex;
  align-items:center;
  gap:.85em;
  margin-top:2.4rem;
  color:var(--ink-dim);
  text-decoration:none;
  border-bottom:0;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase;
  white-space:nowrap;
  transition:color .5s cubic-bezier(.33,0,.2,1);
}
.cta i{
  font-style:normal;
  display:inline-block;
  transition:transform .5s cubic-bezier(.33,0,.2,1);
}
.cta:hover,.cta:focus-visible{color:var(--ink-hot);outline:none;border-bottom:0}
.cta:hover i,.cta:focus-visible i{transform:translateX(5px)}


/* ------------------------------------------------------------- Merch */

.merch-page .lede{
  font-size:clamp(16px,1.5vw,19px);
  line-height:1.65;
  color:var(--ink-hot);
  max-width:42ch;
}
.merch-page .note{margin-top:1.6rem}


/* ------------------------------------- velika fotografija na telefonu

   Ispod 900 px fiksni sloj nema smisla: nema slobodne desne polovine.
   Fotografija zato prelazi u obican blok ISPOD teksta — na sve tri
   strane koje je imaju (Music, Merch, About).

   U dokumentu okvir stoji posle `</main>`, sto je bitno bas ovde: dok
   je stajao pre zaglavlja, na telefonu je ispadao IZNAD naslova, pre
   nego sto covek uopste sazna na kojoj je strani.

   Maske se gase. One postoje da fotografija ne bi udarila u tekst koji
   lezi preko nje; kad je ispod teksta, gasenje leve ivice bi izgledalo
   kao da je slika nedovrsena. */
@media (max-width:899px){
  /* RITAM: TEKST — SLIKA — LINK.
     Izmereno na telefonu pre popravke: iznad slike 75-95 px, ispod nje
     21-31 px. Naopako. Slika je bila zalepljena za crtu iznad linka za
     sledecu stranu, pa je izgledalo kao da crta pripada slici, a ne
     linku.

     Sada oba razmaka dolaze iz iste vrednosti. Donji razmak `.page-body`
     se gasi da se ne sabira sa marginom slike — dva izvora istog
     razmaka su bila i razlog zasto se gore nakupilo.

     Visak visine (kad je sadrzaj kratak) preuzima PODNOZJE, ne slika.
     Ranije ga je gutala `margin-bottom:auto` na slici, pa se prazan
     prostor otvarao na sred strane umesto na dnu. */
  .page-body{flex:0 0 auto;padding-bottom:0}
  .page-foot{margin-top:auto}
  .next-b{margin-top:clamp(1.8rem,4.5vh,2.8rem)}

  /* Poslednji pasus nosi svoju donju marginu od 1.2rem. Ona se NE
     sklapa sa marginom slike — `.page-body` je flex stavka, a flex
     stavka pravi svoj kontekst pa margine iz nje ne izlaze. Zato se
     sabirala: gore 59.7 px, dole 40.5 px. Gasi se, pa oba razmaka
     dolaze iz iste vrednosti i jednaka su do piksela. */
  .page-body > :last-child,
  .col-txt   > :last-child,
  .merch-txt > :last-child,
  .about-txt > :last-child{margin-bottom:0}

  /* Na telefonu je isti lanac, samo bez uspravnog centriranja — pa je i
     `transform` prostiji. Ranije ovde nije bilo NICEGA: `animation:none`
     je gasio ulaz, a pravilo za odlazak je nosilo `translateY(-50%)` iz
     desktop bloka i nije se ni poklapalo. Zato je fotografija stajala
     nepomicno dok se cela strana menjala ispod nje. */
  .shot{
    display:block;
    position:static;
    margin:clamp(1.8rem,4.5vh,2.8rem) 0 0;
    height:auto;
    opacity:0;
    transform:translateY(12px) scale(1.03);
    transition:opacity 1.25s ease-out .38s,
               transform 1.25s cubic-bezier(.33,0,.2,1) .38s;
  }
  body.revealed .shot,
  #doc.revealed .shot{opacity:1;transform:none}
  body.page.leaving .shot,
  #doc.leaving .shot{
    opacity:0;
    transform:translateY(-6px);
    transition:opacity .28s ease-in, transform .28s ease-in;
  }
  .shot img{
    display:block;
    width:100%;
    height:auto;
    opacity:.95;
    -webkit-mask-image:none;
            mask-image:none;
  }

  /* MAKETA IZDANJA — OKVIR OSTAJE, SLIKA RASTE.

     Na telefonu je cela maketa stala u sirinu ekrana, pa je otvoren omot
     bio velicine nokta. Okvir se NE siri (to bi pomerilo raspored i
     vratilo skrol); siri se sama slika i visak se secka.

     `width:150%` sa `margin-left:-12%` znaci da se odbacuje desna
     trecina — tamo je prazan prostor i rub ploce. Ono sto ostaje u
     kadru je otvoren omot, a to je i jedina stvar na toj slici koja
     nesto govori.

     `overflow:hidden` na okviru: bez njega bi slika izasla iz ekrana
     udesno i vratila vodoravni skrol. */
  /* POZADINA IZA MAJICA — SAMO NA TELEFONU.

     Mokap nema svoju pozadinu (43% povrsine je providno), pa su na
     desktopu majice lebdele u papiru i to je bilo tacno: tamo ih drzi
     tekst sa leve strane i maska koja ih uvodi u stranicu. Na telefonu
     slika stoji sama, preko cele sirine, i nema je sta drzati — dva
     torza bez ramena i bez poda.

     Ovo nije pravougaonik nego BAZEN SVETLA obrnut naopako: tamnije u
     sredini, do nule ka ivicama. Tvrda ivica bi bila jedina tvrda ivica
     na celom sajtu. Radijus je 78% x 66% i gasi se na 74%, sto znaci da
     do samog ruba slike vise nema nicega — pa se ne vidi gde pozadina
     prestaje, samo da majice na necemu stoje.

     Ide na OKVIR, ne na sliku: `filter` na slici (sepia/saturate) inace
     bi obojio i pozadinu, a ona treba da ostane boja papira. */
  .shot.merch{
    background:
      radial-gradient(78% 66% at 50% 46%,
                      rgba(0,0,0,.42) 0%,
                      rgba(0,0,0,.26) 42%,
                      rgba(0,0,0,0)   74%);
  }

  .shot.music{overflow:hidden}
  .shot.music img{
    width:150%;
    max-width:none;
    margin-left:-12%;
  }
}

/* ------------------------------------------------------------- About

   Isti raspored kao Music i Merch: tekst levo, fotografija kao veliki
   fiksni sloj desno (`.shot.about-shot`). Stari dvokolonski `about-grid`
   sa slikom u toku dokumenta je uklonjen — dva razlicita nacina da se
   ista stvar postigne su bila samo dva mesta na kojima se moglo
   pokvariti. */
.about-txt .lede{
  margin:2.2rem 0 1.4rem;
  padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.10);
  font-size:clamp(16px,1.5vw,20px);
  line-height:1.6;
  color:var(--ink-hot);
  max-width:46ch;
}

/* Sve sto je ranije stajalo ovde — dvokolonski `about-grid`, radijalna
   maska preko fotografije, visina vezana za `svh` — otislo je zajedno sa
   starim rasporedom. About sada koristi isti sloj kao Music i Merch
   (`.shot`), pa se pravila ne dupliraju. */
@media (min-width:900px){
  .about-txt h1{margin-bottom:.25em}
  .about-txt .sub{margin-bottom:2.4rem}
}

/* Podnozje podstranice nosi ISTI raspored kao ono na home-u: potpis
   levo, mreze desno. Prvo je bilo u koloni jer je ovde u toku dokumenta,
   ne fiksirano — ali onda podstranica i home imaju dva razlicita
   podnozja, a linija iznad njih ionako povlaci ceo red i daje mu okvir
   koji rasterivanje na krajeve trazi.

   `flex-wrap` je tu za slucaj uskog ekrana: umesto da se dva bloka
   stisnu jedan u drugi, mreze padnu u novi red. */
.page-foot{
  flex:0 0 auto;
  padding:2rem 0 2.6rem;
  border-top:1px solid rgba(255,255,255,.09);
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-dim);
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:.9rem 1.2rem;
}
.page-foot .az{order:1;opacity:.38}
.page-foot .soc{order:2;margin-left:auto}
.page-foot a{color:inherit;border:0}
.page-foot a:hover{color:var(--ink-hot)}
.page-foot .sep{opacity:.45;padding:0 .5em}

/* Otvaranje: sadrzaj izlazi iz crnog. Bez pomeranja od dole — to bi
   izgledalo kao obican web, a ne kao nastavak istog kadra. */
.page-head,.page-body,.next-b,.page-foot{
  opacity:0;
  transform:translateY(6px);
}
body.revealed .page-head{transition:opacity .7s ease-out .05s, transform .7s cubic-bezier(.33,0,.2,1) .05s}
body.revealed .page-body{transition:opacity .9s ease-out .16s, transform .9s cubic-bezier(.33,0,.2,1) .16s}
body.revealed .next-b,
body.revealed .page-foot{transition:opacity .7s ease-out .30s, transform .7s cubic-bezier(.33,0,.2,1) .30s}
body.revealed .page-head,
body.revealed .page-body,
body.revealed .next-b,
body.revealed .page-foot{opacity:1;transform:none}

/* Odlazak na SLEDECU podstranicu, kad je stranica otvorena samostalno.
   Ovde se rupa NE koristi: gutanje ekrana znaci "izlazim iz sadrzaja
   nazad na pomracenje". Prelaz izmedju dve podstranice je pomeranje
   unutar istog nivoa, pa je i gest drugaciji — sadrzaj se povuce nagore
   i ugasi, a novi dodje odozdo. Pozadina i zrno su isti u oba dokumenta,
   pa se sam prelaz ne vidi kao ucitavanje. */
body.page.leaving .page-head,
body.page.leaving .page-body,
body.page.leaving .next-b,
body.page.leaving .page-foot{
  opacity:0;transform:translateY(-6px);
  transition:opacity .28s ease-in, transform .28s ease-in;
}

/* Samostalno otvorena podstranica: ista senka na dnu, ista logika. */
body.page::after{
  content:'';
  position:fixed;left:0;right:0;bottom:0;height:88px;
  z-index:7;pointer-events:none;
  background:linear-gradient(to top, var(--paper), rgba(28,28,28,0));
  opacity:0;transition:opacity .5s ease-out;
}
/* Isto kao kod `#doc-fade` — vidi objasnjenje tamo. */
@supports (height:100dvh){
  body.page::after{top:calc(100dvh - 88px);bottom:auto}
}
body.page.can-scroll::after{opacity:1}

/* TRAKA ZA SKROL KOJA BLESNE PRI ULASKU.

   Ulazna animacija pomera sadrzaj za 6 px nadole preko `transform`, a
   transform ULAZI u prostor za skrol. Na strani koja tacno stane u
   ekran to znaci sest piksela viska: traka se pojavi, sadrzaj se
   slegne, traka nestane. Izmereno: 1277 prema 1271.

   Dok traje ulaz skrol ionako nema sta da pomeri, pa se gasi. Cim
   stigne `revealed`, transform je `none` i viska nema. Bez skripte
   `no-js` pravilo ispod ionako sve postavlja na mesto. */
body.page:not(.revealed){overflow:hidden}
#doc:not(.revealed){overflow:hidden}

/* Ako JS ne radi, sadrzaj mora biti vidljiv. */
.no-js .page-head,.no-js .page-body,.no-js .next-b,.no-js .page-foot,
.no-js .shot{opacity:1;transform:none}

/* ------------------------------------------------------------ mobilni */

/* Na telefonu prsten ne radi: pet reci na krugu od 390 px ispadaju iz
   ekrana, a pomracenje ostaje sicusno. Zato mobilni dobija SVOJ raspored
   — veliko pomracenje i tih stubac linkova — a ne osakacenu verziju
   desktopa. Dodir i dalje pali koronu u pravcu te stavke. */
@media (max-width:640px){
  /* disk 0.56 → 0.56 * vmin/2 = 28vmin */
  :root{ --disk-px:28vmin; }

  /* na telefonu je rupa veca (0.56), pa 1.28R daje isti odnos
     prema krugu kao 1.12R na desktopu */
  #brand{width:min(calc(var(--disk-px) * 1.28), 240px)}
  /* Na telefonu nema sirine — naslov ostaje u koloni logotipa i,
     ako ne stane, klizi. */
  #track{max-width:min(calc(var(--disk-px) * 1.28), 240px)}

  /* poster mora da prati: 0.943 * (0.56 / 0.42) = 1.2573 */
  #poster{width:125.7vmin;height:125.7vmin}

  /* Navigacija ide na VRH. Dole je bila u istoj zoni gde palac drzi
     telefon i gde stoji traka pregledaca — dva reda sitnog teksta jedan
     iznad drugog, oba u uglu do kog se najlakse slucajno dodirne.
     Gore je prazno, ne takmici se ni sa cim, i pomracenje ostaje samo u
     sredini ekrana. */
  #orbit{
    top:calc(env(safe-area-inset-top) + 1.05rem);
    bottom:auto;left:0;right:0;height:auto;
    display:flex;flex-wrap:wrap;
    justify-content:center;align-items:center;
    gap:.1rem .35rem;
    padding:0 1rem;
  }
  /* Ista velicina i isti razmak slova kao "Bandcamp" u podnozju. Dva
     reda sitnog teksta u dve razlicite velicine izgledaju kao greska,
     a ne kao hijerarhija — a hijerarhija ovde i ne treba: i navigacija
     i mreze su sporedne u odnosu na rupu. */
  #orbit a{
    position:static;
    transform:none;
    margin:0;
    padding:.55em .6em;
    letter-spacing:.12em;
    font-size:10px;
  }
  /* mora nositi `body.ready`, isto kao na desktopu — bez toga je
     specificnost 111 i `body.entered #orbit a{opacity:1}` (112) bi ga
     pojelo, pa prigusenje ostalih linkova na telefonu ne bi radilo */
  body.entered #orbit.focused a{opacity:.55}

  /* Podnozje se na telefonu vraca u kolonu i centrira: sirina za dva
     kraja ne postoji, a rasterivanje na uglove bi ostavilo dve usamljene
     mrvice teksta. */
  /* Jedan red, sve uz levu ivicu: prvo zvezda, pa mreze.
     Ranije je bila kolona sa centriranim sadrzajem — dva reda sitnog
     teksta jedan ispod drugog na sredini se citaju kao zaglavlje, a ovo
     je podnozje. Uz ivicu i u jednom redu zauzima upola manje visine i
     ne takmici se sa sadrzajem. */
  /* Jedan red: zvezda uz levu ivicu, mreze uz desnu — isti raspored kao
     na desktopu. Ranije je bila kolona sa centriranim sadrzajem, sto je
     trosilo duplo vise visine i citalo se kao zaglavlje, ne podnozje. */
  #foot{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:.9rem;
    font-size:10px;letter-spacing:.12em;line-height:1.9;
    padding-bottom:calc(.9rem + env(safe-area-inset-bottom));
  }
  #foot .sep{padding:0 .35em}
  #foot .az{order:1;opacity:.4;--azh:12px}
  #foot .soc{order:2;margin-left:auto}

  /* Pored SIZIGRAM-a na 390 px nema mesta za jos jednu rec sa proredom
     od 0.34em — sudarili bi se. Zato link ide na dno, desno, odvojen
     ISTOM linijom kojom je odvojeno i podnozje. */
  .page-head .next{display:none}
  .next-b{
    display:flex;
    justify-content:flex-end;
    padding:1.5rem 0;
    border-top:1px solid rgba(255,255,255,.09);
  }

}

/* ---------------------------------------------- postovanje podesavanja */

@media (prefers-reduced-motion:reduce){
  .shot{animation:none;opacity:1;transform:none;transition:none}
  #eclipse{display:none}
  #grain{animation:none}
  /* nebo se sada okrece iz JS-a; sky.js sam prestane kad je
     pokret iskljucen — vidi site.js */
  #orbit a,#foot a{transition:none}
  #eater{display:none}
  .page-head,.page-body,.next-b,.page-foot{opacity:1;transform:none;transition:none}
}

@media print{ #eclipse,#grain,#player{display:none} }


/* =====================================================================
   "JAVI MI KAD IZADJE"

   Otvara se samo posle poteza koji ga je zatrazio — klik na sivi deo
   trake, ili izricit link. Nema iskakanja na ulazu.

   Boje su iste kao svuda; jedina razlika je sto karta stoji IZNAD zrna
   (`z-index` veci od `#grain`), jer bi tekst kroz zrno na maloj velicini
   poceo da grebe.
   ===================================================================== */

/* VREME JE PODELJENO NA DVA SMERA I NIJE ISTO.

   Otvaranje je sporo (0.9–1.05 s) jer prozor treba da se OTVORI, ne da
   iskoci — iskakanje je jezik reklame, a ovde je odgovor na potez koji
   je covek sam napravio. Zatvaranje je krace (0.42 s): kad je odluceno,
   cekanje je smetnja.

   Kako se to dobija: trajanje ZATVARANJA stoji u osnovnom pravilu, a
   trajanje OTVARANJA u `.on`. Kad se klasa doda vaze duga vremena, kad
   se skine vrate se kratka — bez ijednog reda u skripti.

   Krivina je `cubic-bezier(.33,0,.2,1)`, ista kojom se otvaraju
   podstranice i ulazi fotografija. Sajt ima jedan nacin da se nesto
   pojavi. */
#notify{
  position:fixed;inset:0;
  /* Iznad SVEGA: zrna (9), senke na dnu (7) i rupe koja proždire ekran.
     Ispod je samo ono cega nema — prozor je poslednji sloj sajta. */
  z-index:40;
  display:flex;align-items:center;justify-content:center;
  padding:1.4rem;
  opacity:0;pointer-events:none;
  transition:opacity .42s ease-in;
}
#notify.on{
  opacity:1;pointer-events:auto;
  transition:opacity .9s cubic-bezier(.33,0,.2,1);
}

.nt-veil{
  position:absolute;inset:0;
  background:rgba(10,10,10,.82);
  /* Zamucenje pozadine se PENJE zajedno sa prozorom. Da je odmah puno,
     stranica bi izgubila ostrinu pre nego sto se karta pojavi i to se
     cita kao trzaj. */
  -webkit-backdrop-filter:blur(0px);
          backdrop-filter:blur(0px);
  transition:-webkit-backdrop-filter .42s ease-in, backdrop-filter .42s ease-in;
}
#notify.on .nt-veil{
  -webkit-backdrop-filter:blur(4px);
          backdrop-filter:blur(4px);
  transition:-webkit-backdrop-filter 1.1s cubic-bezier(.33,0,.2,1),
                     backdrop-filter 1.1s cubic-bezier(.33,0,.2,1);
}

.nt-card{
  position:relative;
  width:min(30rem, 100%);
  max-height:calc(100dvh - 2.8rem);
  overflow:auto;
  padding:clamp(1.6rem,4vw,2.4rem);
  background:var(--paper);
  border:1px solid rgba(255,255,255,.12);
  /* Sjaj pesme koja svira — karta pripada trenutku, ne sajtu uopste. */
  box-shadow:0 0 0 1px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.55),
             0 0 60px rgb(var(--glow) / .10);
  transform:translateY(16px) scale(.972);
  transition:transform .42s ease-in;
}
#notify.on .nt-card{
  transform:none;
  /* Karta kasni 0.10 s za velom — prvo se stranica povuce, pa onda dodje
     ono novo. Isti red kojim se otvaraju i podstranice. */
  transition:transform 1.05s cubic-bezier(.33,0,.2,1) .10s;
}

/* SADRZAJ ULAZI U KASKADI, kao na podstranicama: naslov, pa recenica, pa
   obrazac. Bez toga cela karta padne odjednom i deluje kao slika, a ne
   kao nesto sto se otvara. */
.nt-card > h2,
.nt-card > .nt-lede,
.nt-card > form{
  opacity:0;
  transform:translateY(7px);
  transition:opacity .3s ease-in, transform .3s ease-in;
}
#notify.on .nt-card > h2,
#notify.on .nt-card > .nt-lede,
#notify.on .nt-card > form{
  opacity:1;transform:none;
  transition:opacity .8s ease-out, transform .8s cubic-bezier(.33,0,.2,1);
}
#notify.on .nt-card > h2      {transition-delay:.26s}
#notify.on .nt-card > .nt-lede{transition-delay:.34s}
#notify.on .nt-card > form    {transition-delay:.44s}


.nt-card h2{
  margin:0 0 .9rem;
  font-size:clamp(20px,3.4vw,27px);
  font-weight:400;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-hot);
}
.nt-lede{
  margin:0 0 1.6rem;
  font-size:15px;line-height:1.7;color:var(--ink);
  max-width:38ch;
}
.nt-lede em{color:var(--ink-hot);font-style:italic}

/* Dugme za zatvaranje dolazi poslednje i najtise — ono je izlaz, ne
   ponuda, i ne sme da bude prvo sto oko uhvati.

   `transition` mora da nabroji I boju I providnost u JEDNOM pravilu.
   Dok su bila dva bloka, drugi je pisao samo `transition:color` i time
   pobrisao prelaz providnosti iz prvog — dugme se pojavljivalo naglo,
   usred mirnog otvaranja. Skracen zapis ne dodaje, nego zamenjuje. */
.nt-x{
  position:absolute;top:.5rem;right:.6rem;
  width:2.2rem;height:2.2rem;
  background:none;border:0;cursor:pointer;
  font-size:20px;line-height:1;
  color:var(--ink-dim);
  opacity:0;
  transition:color .3s ease, opacity .3s ease-in;
}
#notify.on .nt-x{
  opacity:1;
  transition:color .3s ease, opacity .7s ease-out .6s;
}
.nt-x:hover,.nt-x:focus-visible{color:var(--ink-hot);outline:none}

#notify label{
  display:block;
  margin-bottom:.5rem;
  font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--ink-dim);
}
#notify input[type="email"]{
  width:100%;
  padding:.55rem 0;
  background:none;border:0;border-bottom:1px solid rgba(255,255,255,.20);
  color:var(--ink-hot);
  font:inherit;font-size:15px;
  border-radius:0;                 /* iOS inace zaokrugli i osenci polje */
  transition:border-color .3s ease;
}
#notify input[type="email"]:focus{outline:none;border-bottom-color:rgb(var(--glow) / .8)}
#notify .bad input[type="email"]{border-bottom-color:#b45; }

#notify .err{
  margin:.5rem 0 0;min-height:1.1em;
  font-size:12px;color:#c76;
}
#notify .msg{margin:1rem 0 0;font-size:13px;line-height:1.6}
#notify .msg.ok{color:var(--ink-hot)}
#notify .msg.err{color:#c76}
#notify .msg a{color:inherit}

#nt-send{
  margin-top:1.5rem;
  padding:.7rem 1.6rem;
  background:none;
  border:1px solid rgba(255,255,255,.22);
  color:var(--ink-hot);
  font:inherit;font-size:11px;letter-spacing:.28em;text-transform:uppercase;
  cursor:pointer;
  transition:border-color .3s ease, background .3s ease;
}
#nt-send:hover:not(:disabled),
#nt-send:focus-visible{border-color:rgb(var(--glow) / .7);background:rgba(255,255,255,.04);outline:none}
#nt-send:disabled{opacity:.5;cursor:default}

.nt-fine{
  margin:1.1rem 0 0;
  font-size:11px;letter-spacing:.05em;color:var(--ink-dim);
}

/* Zamka za robote — van ekrana, ali ne `display:none` (to neki roboti
   prepoznaju i preskoce). */
#notify .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Pozadina se ne lista dok je prozor otvoren. Mora na OBA elementa —
   samo `body` ne zaustavi listanje u Safariju. */
html.nt-open,body.nt-open{overflow:hidden}

/* SIVI DEO TRAKE JE SADA DUGME, i to se mora videti pre klika. */
.trk .bar{cursor:pointer}
.trk .bar::after{
  content:'';
  position:absolute;inset:-10px 0;   /* veca meta za prst nego 2 px trake */
}
@media (hover:hover){
  .trk:hover .bar{background:rgba(255,255,255,.16)}
}

@media (prefers-reduced-motion:reduce){
  #notify,#notify.on,
  .nt-veil,#notify.on .nt-veil,
  .nt-card,#notify.on .nt-card,
  .nt-card > h2,.nt-card > .nt-lede,.nt-card > form,
  #notify.on .nt-card > h2,#notify.on .nt-card > .nt-lede,
  #notify.on .nt-card > form,
  .nt-x,#notify.on .nt-x{transition:none;transition-delay:0s}
  .nt-card,.nt-card > h2,.nt-card > .nt-lede,.nt-card > form{transform:none}
  .nt-card > h2,.nt-card > .nt-lede,.nt-card > form,.nt-x{opacity:1}
}

/* Napomena na Music strani nosi i poziv — recenica kaze da ostatka nema,
   dugme odmah nudi sta se s tim moze. Izgleda kao link u tekstu, jer to
   i jeste; `button` je zato sto ne vodi nigde. */
.lnk{
  background:none;border:0;padding:0;
  font:inherit;color:var(--ink-hot);
  border-bottom:1px solid rgba(255,255,255,.28);
  cursor:pointer;
  transition:border-color .3s ease;
}
.lnk:hover,.lnk:focus-visible{border-bottom-color:rgba(255,255,255,.8);outline:none}

/* Dva poziva u istom redu na Shows strani. Na uskom ekranu jedan ispod
   drugog — u redu bi se drugi prelomio na pola. */
.cta-row{
  display:flex;flex-wrap:wrap;
  gap:1.2rem clamp(1.6rem,4vw,3rem);
  margin:2.4rem 0 0;
}
.cta-row .cta{margin-top:0}
button.cta{background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:11px;letter-spacing:.34em;text-transform:uppercase}
@media (max-width:560px){ .cta-row{flex-direction:column;gap:1.1rem} }