@charset "utf-8";
@view-transition { navigation: auto; }

/* ============================================================
   BeeCenter, prezentacija. Ljuska.
   Ovo nije nijedan od tri pravca. Ovo je papir na kojem stoje.
   Papir, mastilo, hairline, tabela. Boje pravaca postoje samo
   tamo gde se o tom pravcu govori.
   ============================================================ */

@font-face{
  font-family:'Schibsted Grotesk';
  src:url('../assets/fonts/schibsted-grotesk-var.woff2') format('woff2-variations');
  font-weight:400 800; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../assets/fonts/newsreader-italic-var.woff2') format('woff2-variations');
  font-weight:500; font-style:italic; font-display:swap;
}
/* Tri uzorka. Svaki je pravo pismo tog pravca, izrezano samo na slova uzorka. */
@font-face{ font-family:'Uzorak A'; src:url('../assets/fonts/spec-a-fraunces.woff2') format('woff2');
  font-weight:900; font-style:italic; font-display:swap; }
@font-face{ font-family:'Uzorak B'; src:url('../assets/fonts/spec-b-geologica.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Uzorak C'; src:url('../assets/fonts/spec-c-bodoni.woff2') format('woff2');
  font-weight:800; font-style:italic; font-display:swap; }

:root{
  --papir:      #EFEDE7;
  --papir-2:    #E4E1D8;
  --mastilo:    #16150F;
  --siva:       #5E5C53;
  --linija:     rgba(22,21,15,.24);
  --linija-jaka:rgba(22,21,15,.62);

  /* boje pravaca, samo unutar njihovih polja */
  --a-tlo:#192312; --a-tip:#FEC900; --a-crv:#C94A2C;
  --b-tlo:#005240; --b-tip:#FEC900; --b-roze:#EB585B;
  --c-tlo:#1A0900; --c-tip:#F1E0C0; --c-bor:#E08A35;

  --u1:8px; --u2:28px; --u3:88px; --u4:200px; --tisina:300px;
  --marg:clamp(24px,7vw,140px);

  --e-uho:   cubic-bezier(.25,1,.5,1);
  --e-stane: cubic-bezier(.65,.05,.36,1);

  --zrno:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23z)' opacity='.42'/%3E%3C/svg%3E");
  color-scheme: light;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--papir); color:var(--mastilo);
  font-family:'Schibsted Grotesk','Segoe UI',Arial,sans-serif;
  font-size:19px; line-height:1.56; font-weight:400;
  /* tnum ide samo na brojke u nizu. Na tekst ne: u ovom rezu tnum daje i zarezu
     i tacki tabelarnu sirinu, pa se interpunkcija odlepi od reci. */
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:60;
  background:var(--zrno); background-size:180px 180px; opacity:.04; mix-blend-mode:multiply;
}
::selection{ background:var(--mastilo); color:var(--papir); }
img,svg{ max-width:100%; }
a{ color:inherit; }

:focus-visible{
  outline:2px solid var(--a-crv); outline-offset:3px; transition:none;
}
.polje-a :focus-visible{ outline-color:var(--a-tip); }
.polje-b :focus-visible{ outline-color:var(--b-tip); }
.polje-c :focus-visible{ outline-color:var(--c-bor); }

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

/* ---------- tri ponašanja kontejnera ---------- */
.list{                                   /* puni list, ivica do ivice */
  width:100%;
}
.stubac{                                 /* mera, 62ch, nikad centrirana */
  width:min(62ch, calc(100% - var(--marg) - 24px)); margin-left:var(--marg); margin-right:0;
}
.sirina{                                 /* preko mere, tabela i podnožje */
  width:min(1560px, calc(100% - var(--marg) - 24px)); margin-left:var(--marg); margin-right:0;
}
@media (max-width:900px){
  .stubac,.sirina{ width:calc(100% - 40px); margin-left:20px; }
}

/* ---------- naslovnica ---------- */
.naslovnica{ padding:clamp(28px,6vh,64px) 0 var(--u3); }
.naslovnica .sirina{ display:grid; grid-template-columns:minmax(0,1fr); gap:var(--u2); }
.znak-red{ display:flex; align-items:flex-end; gap:22px; }
.znak{ width:104px; height:auto; flex:0 0 auto; }
.znak .zelena{ fill:#006335; } .znak .amber{ fill:#E99F22; }
.znak-red p{
  margin:0 0 4px; font-size:13px; font-weight:600; letter-spacing:.15em;
  text-transform:uppercase; color:var(--siva);
}
.naslov{
  font-family:'Newsreader',Georgia,'Times New Roman',serif; font-style:italic; font-weight:500;
  font-size:clamp(56px,10.5vw,168px); line-height:.94; letter-spacing:-.014em;
  margin:clamp(24px,5vh,64px) 0 0; text-wrap:balance;
  max-width:14ch;
}
.naslov em{ font-style:italic; }
.pravilo{ height:0; border:0; border-top:1.5px solid var(--linija-jaka); margin:var(--u2) 0 0; }
.uvod{
  margin:var(--u2) 0 0; max-width:56ch; font-size:clamp(21px,1.5vw,26px); line-height:1.44;
  text-wrap:pretty;
}
.uvod b{ font-weight:600; }
.datum{
  margin:var(--u2) 0 0; font-size:13px; font-weight:600; letter-spacing:.15em;
  font-variant-numeric:tabular-nums;
  text-transform:uppercase; color:var(--siva);
  display:flex; flex-wrap:wrap; gap:6px 22px;
}

/* ---------- metod ---------- */
.metod{ padding:var(--u3) 0 var(--u4); }
.metod h2, .kako h2, .kolofon h2, .tabela-blok h2{
  font-size:13px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  margin:0 0 var(--u2); color:var(--siva);
}
.metod p{ margin:0 0 var(--u2); text-wrap:pretty; }
.metod p:last-child{ margin-bottom:0; }
.odbijeno{ list-style:none; margin:var(--u2) 0 0; padding:0; }
.odbijeno li{
  border-top:1px solid var(--linija); padding:12px 0 12px 0;
  display:grid; grid-template-columns:22px 1fr; gap:14px; font-size:17px;
}
.odbijeno li:last-child{ border-bottom:1px solid var(--linija); }
.odbijeno .ne{ font-weight:700; color:var(--a-crv); letter-spacing:.02em; }

/* ---------- tri ulaza ---------- */
.ulazi{ padding:0 0 var(--u4); }
.ulaz{
  display:block; text-decoration:none; position:relative; isolation:isolate;
  border:0; color:inherit;
}
.ulaz-tlo{
  --pad:clamp(26px,3.4vw,52px);
  position:relative; overflow:clip; padding:var(--pad) var(--pad) 0;
  display:grid; align-content:space-between; gap:clamp(22px,3vw,44px);
}
.ulaz-tlo::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:var(--zrno); background-size:180px 180px; opacity:.05; mix-blend-mode:screen;
}
.ulaz-glava{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; }
.ulaz-broj{ font-size:13px; font-weight:700; letter-spacing:.16em; font-variant-numeric:tabular-nums; }
.ulaz-ime{
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:500;
  line-height:.92; letter-spacing:-.015em; margin:0;
}
.ulaz-teza{ margin:0; max-width:44ch; text-wrap:pretty; }
.uzorak{ margin:0; line-height:1; overflow:clip; }
.uzorak span{ display:block; }
.uzorak .rec{ font-size:1em; }
.uzorak .dijak{ font-size:.40em; line-height:1.2; margin-top:.18em; opacity:.92; }
.uzorak-ime{
  font-family:'Schibsted Grotesk',sans-serif; font-style:normal; font-weight:600;
  font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  opacity:.72; margin-top:18px; line-height:1.34;
}
/* paleta kao stvarna povrsina, puna sirina i uz samu ivicu polja */
.trake{
  display:flex; height:clamp(52px,5.4vw,84px);
  margin:0 calc(-1 * var(--pad)); width:auto;
  border-top:1px solid currentColor;
}
.trake i{ display:block; height:100%; flex:0 0 auto; }
.ulaz-noga{ padding-bottom:calc(var(--pad) * .55); }
.otvori{
  display:inline-flex; align-items:center; gap:14px; font-size:17px; font-weight:600;
  padding-bottom:5px; border-bottom:3px solid currentColor; width:max-content;
  transition:gap 140ms var(--e-uho);
}
.ulaz:hover .otvori{ gap:22px; }
.ulaz-noga{
  display:flex; flex-wrap:wrap; gap:8px 26px; font-size:12px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; opacity:.8;
}

/* svaki ulaz je druge veličine i ne stoji na istoj liniji kao ostali */
.ulaz-a .ulaz-tlo{ background:var(--a-tlo); color:var(--a-tip); min-height:560px; }
.ulaz-a .ulaz-ime{ font-size:clamp(46px,6.6vw,104px); }
.ulaz-a .uzorak{ font-size:clamp(40px,6.2vw,96px); }
.ulaz-a .uzorak .rec,.ulaz-a .uzorak .dijak{ font-family:'Uzorak A',Georgia,serif;
  font-style:italic; font-weight:900; color:var(--a-tip); }
.ulaz-a .otvori{ color:var(--a-tip); }
.ulaz-a .ulaz-teza{ color:#EDE6CE; }

.ulaz-b .ulaz-tlo{ background:var(--b-tlo); color:var(--b-tip); min-height:400px; }
.ulaz-b .ulaz-ime{ font-size:clamp(38px,4.6vw,74px); }
.ulaz-b .uzorak{ font-size:clamp(30px,4.2vw,64px); }
.ulaz-b .uzorak .rec,.ulaz-b .uzorak .dijak{ font-family:'Uzorak B','Helvetica Neue',Arial,sans-serif;
  font-weight:600; letter-spacing:-.03em; color:var(--b-tip); }
.ulaz-b .otvori{ color:var(--b-tip); }
.ulaz-b .ulaz-teza{ color:#DCE7DF; }

.ulaz-c .ulaz-tlo{ background:var(--c-tlo); color:var(--c-bor); min-height:470px; }
.ulaz-c .ulaz-ime{ font-size:clamp(40px,5.4vw,86px); color:var(--c-tip); }
.ulaz-c .uzorak{ font-size:clamp(34px,5.2vw,80px); }
.ulaz-c .uzorak .rec,.ulaz-c .uzorak .dijak{ font-family:'Uzorak C','Bodoni MT',Didot,serif;
  font-style:italic; font-weight:800; color:var(--c-tip); }
.ulaz-c .otvori{ color:var(--c-bor); }
.ulaz-c .ulaz-teza{ color:#D9C9AC; }

.ulazi-mreza{
  display:grid; grid-template-columns:repeat(12,1fr); gap:0 24px;
  align-items:start;
}
.ulaz-a{ grid-column:1 / span 9; }
.ulaz-b{ grid-column:5 / span 8; margin-top:calc(var(--u3) * -0.5); }
.ulaz-c{ grid-column:2 / span 7; margin-top:var(--u3); }
@media (max-width:1000px){
  .ulazi-mreza{ grid-template-columns:1fr; }
  .ulaz-a,.ulaz-b,.ulaz-c{ grid-column:1; margin-top:0; }
  .ulaz-b{ margin-top:var(--u2); } .ulaz-c{ margin-top:var(--u2); }
  /* i na telefonu tri polja nisu jedan ravan stubac */
  .ulaz-a{ margin-right:-20px; }
  .ulaz-b{ margin-left:26px; margin-right:-20px; }
  .ulaz-c{ margin-left:12px; margin-right:34px; }
  .ulaz-a .ulaz-tlo{ min-height:440px; }
  .ulaz-b .ulaz-tlo{ min-height:360px; }
  .ulaz-c .ulaz-tlo{ min-height:400px; }
}

/* ---------- tabela ---------- */
.tabela-blok{ padding:0 0 var(--u4); }
.tabela-omot{ overflow-x:auto; overscroll-behavior-x:contain; }
table.uporedno{
  border-collapse:collapse; width:100%; min-width:820px; font-size:16px; line-height:1.42;
}
table.uporedno td, table.uporedno th{ font-variant-numeric:tabular-nums; }
table.uporedno caption{
  text-align:left; font-size:16px; color:var(--siva); padding:0 0 var(--u2); max-width:64ch;
}
table.uporedno th, table.uporedno td{
  text-align:left; vertical-align:top; padding:16px 22px 16px 0;
  border-bottom:1px solid var(--linija);
}
table.uporedno thead th{
  border-bottom:1.5px solid var(--linija-jaka); padding-bottom:12px;
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:500; font-size:27px;
  letter-spacing:-.01em;
}
table.uporedno thead th span{
  display:block; font-family:'Schibsted Grotesk',sans-serif; font-style:normal;
  font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--siva); margin-top:6px;
}
table.uporedno tbody th{
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--siva); width:190px; padding-right:32px;
}
table.uporedno td:nth-of-type(1){ border-left:4px solid var(--a-tlo); padding-left:16px; }
table.uporedno td:nth-of-type(2){ border-left:4px solid var(--b-tlo); padding-left:16px; }
table.uporedno td:nth-of-type(3){ border-left:4px solid var(--c-tlo); padding-left:16px; }
.tabela-nota{ margin:var(--u2) 0 0; font-size:15px; color:var(--siva); max-width:64ch; }

/* ---------- kako da biramo ---------- */
.kako{
  background:var(--mastilo); color:var(--papir); padding:var(--u3) 0;
}
.kako h2{ color:rgba(239,237,231,.62); }
.kako p{
  margin:0; font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(24px,2.5vw,40px); line-height:1.26; max-width:22ch; text-wrap:pretty;
}
.kako ol{
  margin:var(--u2) 0 0; padding:0; list-style:none; max-width:66ch;
  border-top:1px solid rgba(239,237,231,.24);
}
.kako li{
  border-bottom:1px solid rgba(239,237,231,.24); padding:14px 0;
  display:grid; grid-template-columns:44px 1fr; gap:14px; font-size:17px;
}
.kako li b{ font-weight:700; letter-spacing:.1em; font-size:13px; padding-top:4px; }
.kako ::selection{ background:var(--papir); color:var(--mastilo); }

/* ---------- kolofon ---------- */
.kolofon{ padding:var(--u3) 0 var(--u3); }
.kolofon-mreza{
  display:grid; grid-template-columns:repeat(12,1fr); gap:var(--u2) 24px;
}
.kolofon-mreza > div:nth-child(1){ grid-column:1 / span 5; }
.kolofon-mreza > div:nth-child(2){ grid-column:7 / span 5; }
@media (max-width:900px){ .kolofon-mreza > div{ grid-column:1 / -1 !important; } }
.kolofon dl{ margin:0; }
.kolofon dt{
  font-size:12px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--siva); border-top:1px solid var(--linija); padding-top:12px; margin-top:14px;
}
.kolofon dd{ margin:4px 0 0; font-size:17px; text-wrap:pretty; }
.potpis{
  margin-top:var(--u3); border-top:1.5px solid var(--linija-jaka); padding-top:var(--u2);
  display:flex; flex-wrap:wrap; gap:10px 32px; align-items:baseline;
  font-size:12px; font-weight:600; letter-spacing:.13em; text-transform:uppercase; color:var(--siva);
}

/* ---------- 404 ---------- */
.greska{ min-height:78svh; display:grid; align-content:center; padding:var(--u3) 0; }
.greska .broj{
  font-family:'Newsreader',Georgia,serif; font-style:italic; font-weight:500;
  font-size:clamp(96px,20vw,300px); line-height:.82; margin:0; letter-spacing:-.02em;
}
.greska p{ margin:var(--u2) 0 0; max-width:52ch; font-size:21px; }
.greska .nazad{ margin-top:var(--u2); display:flex; flex-wrap:wrap; gap:12px 28px; }
.greska a{
  font-weight:600; text-decoration:none; border-bottom:3px solid var(--mastilo); padding-bottom:3px;
}

/* ---------- prelaz između stranica ---------- */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:none; }
  ::view-transition-new(root){
    animation:otkrivanje 520ms cubic-bezier(.65,.05,.36,1) both;
  }
  @keyframes otkrivanje{
    from{ clip-path:inset(var(--vt-t,50%) var(--vt-r,50%) var(--vt-b,50%) var(--vt-l,50%)); }
    to  { clip-path:inset(0 0 0 0); }
  }
}
::view-transition-group(root){ z-index:auto; }

/* Naslov svakog polja nosi isto ime kao naslov svog pravca, pa se pri prelazu
   jedno pretvara u drugo. Imena moraju biti jedinstvena u dokumentu. */
.ulaz-a .ulaz-ime{ view-transition-name:smer-a; }
.ulaz-b .ulaz-ime{ view-transition-name:smer-b; }
.ulaz-c .ulaz-ime{ view-transition-name:smer-c; }
@media (prefers-reduced-motion: reduce){
  .ulaz-a .ulaz-ime,.ulaz-b .ulaz-ime,.ulaz-c .ulaz-ime{ view-transition-name:none; }
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}
@media (prefers-contrast: more){
  :root{ --siva:#3A382F; --linija:rgba(22,21,15,.45); }
}
@media print{
  body::before{ display:none; }
}