/* Dvorba — logotip. Izvor: packages/tokens/src/logotip.ts */

@font-face{font-family:Forum;font-style:normal;font-weight:400;font-display:swap;src:url(/pisma/forum-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Forum;font-style:normal;font-weight:400;font-display:swap;src:url(/pisma/forum-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* Forum ima jedinu debljinu 400. Zato se tezina upisuje izricito: gostova
   pocetna nosi <h1>, a on iz teme povuce --tez-naslov (700 na plazi, 600 u
   gradu) — sto bi preglednik sam podebljao, a sinteticki potez se na klesanoj
   kapitali vidi odmah. Uzmak je naslovno pismo teme: dok Forum ne stigne
   (font-display: swap) natpis je vec ondje, samo drugim slovom. */
.logotip, header strong.sustav {
  font-family: Forum, var(--disp);
  font-weight: 400;
  /* VERZAL, i to na svakom mjestu i svakoj velicini — logotip je „Carski
     verzal", a razmak od .3em pripada iskljucivo velikim slovima.
     Razmaknuti kurent nije manja inacica istog znaka nego druga stvar:
     rimska kapitala je klesana s razmakom medu slovima, a mala slova su
     pisana povezano — razmaknuta, ona se raspadnu u niz slova („D v o r b a").
     Zato pravilo stoji OVDJE, uz lice i razmak, a ne uz pojedino mjesto:
     mjesto bira velicinu, nikad oblik. */
  text-transform: uppercase;
  letter-spacing: .3em;
  /* Visak iza zadnjeg slova — vidi objasnjenje u zaglavlju ovog lista. */
  margin-right: -.3em;
}

/* Zaglavlje panela: sve sto se ovdje kaze je MJERA, nikad oblik — oblik je
   gore, jedan za oba mjesta.

   font-size  dvije mjere vece od ostatka zaglavlja (16 px), i to nije
              isticanje nego IZJEDNACAVANJE: Forum je klesana rimska kapitala
              s malom x-visinom i tankim potezom, pa na istoj brojci kao Jost
              ili Space Grotesk izgleda manje i blijede nego sto jest.

   min-height od 14.8. logotip u zaglavlju stoji SAM — plocica sa znakom je
              maknuta (odluka M.S.), jer logotip vec nosi znak i pratilac uz
              rijec bio bi drugi znak u istom retku. Ali visinu retka je dotad
              drzala upravo ta plocica (--tap-admin, 32 px): bez nje bi
              zaglavlje na svakom zaslonu panela skocilo za pet piksela i sav
              sadrzaj ispod njega s njim. Zato je mjeru preuzeo logotip, i to
              je i posteno — on je sada prvi i noseci element retka.
              Uz nju je obavezan i flex s poravnanjem po sredini: bez njega bi
              slovo sjelo na vrh te 32 px visoke kutije, a ne u njezinu
              sredinu. */
header strong.sustav {
  font-size: 18px;
  min-height: var(--tap-admin);
  display: flex;
  align-items: center;
}

/* Znak brenda. Tocka stoji ODMAH iza rijeci — bez toga bi izgledala kao
   recenicna tocka koja je zalutala, a ne kao dio imena.

   Zasto <span> u predlosku, a ne ::after s generiranim sadrzajem:
   citaci zaslona se oko generiranog sadrzaja ne slazu — jedni ga citaju, drugi
   ga presute, a treci ovisi o postavci korisnika. Prava tocka u dokumentu je
   interpunkcija i s njom svaki citac zna sto ce: procita „Dvorba" i stane.
   Uz to, boju ovako nosi element koji se u pregledniku vidi i moze izmjeriti —
   generirani sadrzaj se u alatu za provjeru kontrasta ne da uhvatiti.

   Tocka NIJE nosilac znacenja sama za sebe: uz nju uvijek stoji ime. Boju
   svejedno nosi --znak, koji je u svakoj kuci iznad 4,5 : 1 — znak koji se ne
   vidi nije znak. */
.logotip .tacka, header strong.sustav .tacka {
  margin-left: -.3em;
  color: var(--znak);
}