/* ═══════════════════════════════════════════════════════════════
   CRNI HRAM · temelj
   Jedno mjesto za sve mjere: boju, pismo, razmak, tempo, sloj.
   Ništa u ostatku stranice ne smije izmisliti vlastitu brojku.

   Pravilo kuće: ništa zaobljeno. Nigdje border-radius, nigdje krug.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── crnina ───────────────────────────────────────────────────
     Podloga je hladnija nego prije (#040406 umjesto #050506) jer je
     svaka fotografija na ovoj stranici topla: baklja, zlato u rezu,
     mjed. Hladna crnina ispod tople slike daje dubinu koju ista
     temperatura ne može dati. */
  --crno:        #040406;   /* podloga stranice */
  --crno-2:      #0b0c0e;   /* podignuta ploha */
  --crno-3:      #121316;   /* podignuta ploha, drugi kat */
  --crno-dublje: #020203;   /* podnožje, zastori */

  /* ── svjetlo ──────────────────────────────────────────────── */
  /* Omjeri prema podlozi #040406: 16.9 / 7.4 / 5.0. Sve tri prolaze AA
     i na podignutim plohama, pa i najsitnija oznaka ostaje čitljiva. */
  --kost:   #ece9e2;   /* glavni tekst */
  --kost-2: #a09b90;   /* sporedni tekst */
  --kost-3: #837e73;   /* oznake, izvori */

  /* ── znak ─────────────────────────────────────────────────────
     Znak više nije žuto zlato nego blijedo — elektrum, bijelo zlato,
     ono što ostane kad se iz zlata izvadi mjed. Omjer prema podlozi
     je 12.7 umjesto 9.1, pa je znak istovremeno mirniji i čitljiviji.
     Žuto zlato ostaje ondje gdje mu je mjesto: u rezu na fotografiji. */
  --zlato:   #d9cba6;   /* znak, urezi, aktivno */
  --zlato-2: #f0e6c8;   /* znak pod svjetlom */
  --zlato-3: #6f6650;   /* znak u sjeni: vlasi, rubovi */
  --zeravica:   #a8452c;   /* upozorenje, opreka */
  --zeravica-2: #d4795c;   /* isto, ali za slovo */
  --mahovina:#7d9468;
  /* Stara imena i dalje vrijede: sve što ih zove dobiva žeravicu. */
  --krv:   var(--zeravica);
  --krv-2: var(--zeravica-2);

  /* ── rubovi ───────────────────────────────────────────────── */
  --rub:       rgba(236, 233, 226, .085);
  --rub-jaci:  rgba(236, 233, 226, .17);
  --rub-zlato: rgba(217, 203, 166, .3);

  /* ── pisma ────────────────────────────────────────────────────
     Cinzel nema pravo malo slovo: njegova su mala slova kapitalke.
     Zato nosi natpise — ime odjeljka, brojku, oznaku — gdje je verzal
     na svom mjestu. Velike rečenice nosi Cormorant, koji ima pravo
     malo slovo, pa se rečenica čita kao rečenica a ne kao natpis. */
  --pismo-znak:  'UnifrakturCook', 'Cinzel', Georgia, serif;
  --pismo-vel:   'Cinzel', 'Cormorant Garamond', Georgia, serif;
  --pismo-ured:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --pismo-tekst: Georgia, 'Palatino Linotype', 'Times New Roman', serif;
  --pismo-ui:    'Manrope', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* ── veličine ─────────────────────────────────────────────── */
  --t-znak:    clamp(3.5rem, 9.6vw, 9.6rem);    /* ime hrama u zaglavlju */
  --t-golem:   clamp(2.9rem, 7vw, 7rem);        /* velike izjave */
  --t-naslov:  clamp(2.1rem, 4.6vw, 4.4rem);    /* naslovi odjeljaka */
  --t-pod:     clamp(1.45rem, 2.3vw, 2.1rem);   /* h3 */
  --t-mali:    clamp(1.15rem, 1.5vw, 1.35rem);  /* h4 */
  --t-uvod:    clamp(1.2rem, 1.65vw, 1.5rem);   /* uvodni odlomak */
  --t-tekst:   clamp(1rem, .28vw + .94rem, 1.14rem);
  --t-sitno:   .9rem;
  --t-oznaka:  .72rem;

  /* ── razmaci (korak 8) ────────────────────────────────────── */
  --r1: 4px;  --r2: 8px;  --r3: 12px; --r4: 16px; --r5: 24px;
  --r6: 32px; --r7: 48px; --r8: 64px; --r9: 96px; --r10: 128px;

  /* Uspravni ritam odjeljaka. Bio je 11vh (do 152 px) gore i dolje, pa
     je između zadnjeg retka jednog poglavlja i naslova sljedećeg znalo
     biti tristo piksela crnine — a to je više od visine same kartice
     koja im stoji između. Sada je razmak i dalje razmak, ali se kroz
     njega ne pada. */
  --odjeljak: clamp(60px, 7.5vh, 104px);
  --sirina:   1280px;                     /* najšira mjera stranice */
  /* Poglavlje je uže od stranice. Prije je članak bio razapet preko
     cijele mjere, a tekst u njemu širok 58ch, pa je desna trećina
     ekrana ostajala prazna kroz cijelo poglavlje. Sada je poglavlje
     usko i središnje, a široko je samo ono što je doista slika. */
  --clanak:   1180px;
  /* Georgia ima široke znamenke, pa je njezin ch širi nego što se čini:
     58ch ovdje daje otprilike 65 slova u retku, taman za čitanje. */
  --stupac:   58ch;
  --pojas:    clamp(20px, 5vw, 76px);     /* bočni rub */
  --traka-h:  66px;                       /* visina navigacije */

  /* ── tempo ────────────────────────────────────────────────── */
  --brzo:  180ms;
  --tempo: 420ms;
  --sporo: 900ms;
  --hod:   cubic-bezier(.22, .61, .24, 1);
  --izlaz: cubic-bezier(.4, 0, .2, 1);

  /* ── slojevi ──────────────────────────────────────────────── */
  --z-plocica: 5;
  --z-traka:   40;
  --z-izbornik:60;
  --z-preglednik: 80;
  --z-zastor:  100;
}

/* ═══════════════════════════════════════════════════════════════
   POSTAVKA
   ═══════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scrollbar-color: #2a2823 var(--crno-dublje);
}

body {
  margin: 0;
  background: var(--crno);
  color: var(--kost);
  font-family: var(--pismo-tekst);
  font-size: var(--t-tekst);
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

/* Zrno: jedva vidljiva mrena da crnina ne bude plastična.
   Ispod svega interaktivnog, iznad medija. */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 3;
  pointer-events: none; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

::selection { background: var(--zlato); color: #100e0a; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--crno-dublje); }
::-webkit-scrollbar-thumb { background: #2a2823; border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #4c4738; }

/* Fokus se mora vidjeti. Uvijek, na svemu, bez iznimke. */
:focus-visible {
  outline: 2px solid var(--zlato-2);
  outline-offset: 3px;
}
:focus:not(:focus-visible) { outline: none; }

img, video, svg, canvas { display: block; max-width: 100%; }
img, video { height: auto; }

/* ═══════════════════════════════════════════════════════════════
   TIPOGRAFIJA
   ═══════════════════════════════════════════════════════════════ */

h1, h2, h3, h4 {
  font-family: var(--pismo-vel);
  font-weight: 600;
  color: var(--kost);
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: var(--t-naslov);
  line-height: 1.02;
  letter-spacing: .012em;
}

h3 {
  font-size: var(--t-pod);
  line-height: 1.18;
  letter-spacing: .02em;
  color: var(--zlato-2);
}

h4 {
  font-size: var(--t-mali);
  line-height: 1.3;
  letter-spacing: .03em;
}

p { margin: 0 0 var(--r4); }
p:last-child { margin-bottom: 0; }

a { color: var(--zlato-2); text-decoration: none; }

strong { color: var(--kost); font-weight: 700; }
em { color: var(--kost); font-style: italic; }

ul, ol { margin: 0 0 var(--r5); padding-left: 1.3em; }
li { margin-bottom: var(--r2); }

blockquote { margin: 0; }
figure { margin: 0; }

/* ═══════════════════════════════════════════════════════════════
   POMOĆNO
   ═══════════════════════════════════════════════════════════════ */

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

/* Preskoči na sadržaj: prva stanica tipkovnice na svakoj stranici. */
.preskoci-na {
  position: fixed; top: var(--r3); left: var(--r3); z-index: 200;
  transform: translateY(-160%);
  background: var(--zlato); color: #100e0a;
  font-family: var(--pismo-ui); font-size: var(--t-oznaka); font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  padding: var(--r3) var(--r5);
  transition: transform var(--tempo) var(--hod);
}
.preskoci-na:focus { transform: none; }