:root {
  --vino: #6d2639;
  --vino-tamno: #351723;
  --senf: #d79a28;
  --nebo: #dceaf2;
  --grafit: #202328;
  --tinta: #292e34;
  --siva: #68727a;
  --papir: #fbfaf8;
  --bijela: #fff;
  --linija: #d1d5d7;
  --serif: "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Segoe UI", Arial, sans-serif;
  --mono: "Lucida Console", Monaco, monospace;
  --max: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { margin: 0; color: var(--tinta); background: var(--papir); font: 17px/1.68 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; }
.preskoci { position: fixed; top: -5rem; left: 1rem; z-index: 100; padding: .7rem 1rem; color: var(--bijela); background: var(--vino); text-decoration: none; }
.preskoci:focus { top: 1rem; }

.zaglavlje { position: sticky; top: 0; z-index: 30; background: rgba(251,250,248,.96); border-bottom: 1px solid var(--linija); backdrop-filter: blur(10px); }
.zaglavlje-unutra { width: min(var(--max),calc(100% - 40px)); min-height: 78px; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.naziv { display: flex; align-items: center; gap: .75rem; text-decoration: none; font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
.naziv-znak { width: 45px; height: 45px; display: grid; place-items: center; color: var(--bijela); background: var(--vino); border-radius: 50%; font: 700 .8rem var(--mono); }
.naziv small { display: block; margin-top: .25rem; color: var(--siva); font-size: .66rem; font-weight: 400; letter-spacing: .03em; }
.navigacija { display: flex; align-items: center; gap: 1.25rem; font-size: .78rem; font-weight: 700; }
.navigacija a { padding-block: .3rem; text-decoration: none; border-bottom: 2px solid transparent; }
.navigacija a:hover,.navigacija a:focus-visible { border-color: var(--vino); }
.jezik { padding: .42rem .6rem; color: var(--grafit); background: var(--senf); font: 700 .68rem var(--mono); }
.meni-gumb { display: none; }

.naslovnica { width: min(1380px,calc(100% - 40px)); margin: 30px auto 0; position: relative; min-height: 720px; background: var(--nebo); overflow: hidden; }
.naslovnica-kadar { position: absolute; inset: 0 0 0 32%; margin: 0; }
.naslovnica-kadar::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg,rgba(220,234,242,.86) 0,rgba(220,234,242,.12) 42%,transparent 75%); pointer-events: none; }
.naslovnica-kadar img { width: 100%; height: 100%; object-fit: cover; }
.kadar-oznaka { position: absolute; right: 18px; bottom: 18px; z-index: 2; display: grid; gap: .2rem; padding: .65rem .8rem; color: var(--bijela); background: rgba(32,35,40,.84); font: 400 .66rem var(--mono); text-transform: uppercase; }
.naslovnica-papir { position: relative; z-index: 3; width: 57%; min-height: 720px; display: flex; flex-direction: column; justify-content: center; padding: clamp(2.5rem,6vw,5.8rem); }
.izdanje { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 1rem; padding-bottom: .8rem; border-bottom: 1px solid #aabac2; color: #596971; font: 400 .66rem var(--mono); text-transform: uppercase; }
.rubrika { margin: 2.7rem 0 1rem; color: var(--vino); font: 700 .7rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
h1 { margin: 0; font: 400 clamp(3.5rem,6.6vw,7.2rem)/.89 var(--serif); letter-spacing: -.06em; }
h1 em { color: var(--vino); font-weight: 400; }
.naslovnica-uvod { max-width: 610px; margin: 2rem 0 0; color: #45545c; }

.napomena { width: min(960px,calc(100% - 40px)); margin: -28px auto 85px; position: relative; z-index: 4; display: grid; grid-template-columns: 90px 1fr; box-shadow: 0 18px 45px rgba(53,23,35,.16); }
.napomena-ikona { display: grid; place-items: center; color: var(--grafit); background: var(--senf); font: italic 700 1.6rem var(--serif); }
.napomena > div { padding: 1.45rem 1.8rem; color: var(--bijela); background: var(--vino); }
.napomena h2 { margin: 0 0 .25rem; font: 400 1.2rem var(--serif); }
.napomena p { margin: 0; color: #eadde1; font-size: .86rem; }

.brzi-sadrzaj { width: min(var(--max),calc(100% - 40px)); margin: 0 auto 100px; display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--linija); border-left: 1px solid var(--linija); }
.brzi-sadrzaj a { min-height: 95px; display: flex; flex-direction: column; justify-content: space-between; padding: .9rem; border-right: 1px solid var(--linija); border-bottom: 1px solid var(--linija); color: #526068; font-size: .72rem; line-height: 1.35; text-decoration: none; }
.brzi-sadrzaj span { color: var(--vino); font: 700 .75rem var(--mono); }
.brzi-sadrzaj a:hover,.brzi-sadrzaj a:focus-visible { color: var(--tinta); background: var(--nebo); }

.clanak { width: min(980px,calc(100% - 40px)); margin: auto; }
.poglavlje { padding: 0 0 105px; }
.poglavlje-zaglavlje { display: grid; grid-template-columns: 100px 1fr; gap: 1.4rem; align-items: start; margin-bottom: 2.7rem; }
.broj-poglavlja { color: transparent; -webkit-text-stroke: 1px var(--vino); font: 400 4rem/.9 var(--serif); }
.poglavlje-zaglavlje > div:last-child > p { margin: 0 0 .45rem; color: var(--vino); font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .09em; }
.poglavlje-zaglavlje h2 { max-width: 760px; margin: 0; font: 400 clamp(2.3rem,4.5vw,4.7rem)/1 var(--serif); letter-spacing: -.04em; }
.uvodni-tekst { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; }
.uvodni-tekst p { margin: 0; color: #47555c; }
.uvodni-tekst p:first-child::first-letter { float: left; margin: .08rem .45rem 0 0; color: var(--vino); font: 400 4rem/.75 var(--serif); }
.pojmovne-linije { margin-top: 2.5rem; border-top: 3px solid var(--grafit); }
.pojmovne-linije > div { display: grid; grid-template-columns: 180px 1fr; gap: 1.2rem; padding: 1rem 0; border-bottom: 1px solid var(--linija); }
.pojmovne-linije span { color: var(--vino); font: 400 1rem var(--serif); }
.pojmovne-linije p { margin: 0; color: var(--siva); font-size: .84rem; }

.tamno { width: 100vw; margin-left: calc(50% - 50vw); padding: 85px max(20px,calc((100vw - 980px)/2)) 100px; color: var(--bijela); background: var(--grafit); }
.tamno .broj-poglavlja { -webkit-text-stroke-color: var(--senf); }
.tamno .poglavlje-zaglavlje > div:last-child > p { color: var(--senf); }
.uvodna-recenica { max-width: 720px; margin: 0 0 2.2rem; color: #4b5960; }
.tamno .uvodna-recenica { color: #c1c7ca; }
.signalni-redovi { border-top: 1px solid rgba(255,255,255,.25); }
.signalni-redovi > div { display: grid; grid-template-columns: 48px 185px 1fr; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.signalni-redovi b { width: 30px; height: 30px; display: grid; place-items: center; color: var(--grafit); background: var(--senf); border-radius: 50%; font: 700 .72rem var(--mono); }
.signalni-redovi h3 { margin: 0; font: 400 1.2rem var(--serif); }
.signalni-redovi p { margin: 0; color: #bdc5c9; font-size: .86rem; }
blockquote { margin: 2.8rem 0 0; padding: 2rem 2.4rem; color: var(--grafit); background: var(--senf); }
blockquote p { margin: 0; font: italic 400 clamp(1.4rem,2.7vw,2.25rem)/1.28 var(--serif); }
blockquote cite { display: block; margin-top: 1rem; color: #654812; font: 400 .66rem var(--mono); text-transform: uppercase; }

.traka-hitnosti { border-top: 3px solid var(--grafit); }
.traka-hitnosti article { display: grid; grid-template-columns: 140px 1fr; gap: 2rem; padding: 1.5rem 0; border-bottom: 1px solid var(--linija); }
.traka-hitnosti article > span { align-self: start; padding: .4rem .55rem; color: var(--bijela); background: var(--grafit); text-align: center; font: 700 .67rem var(--mono); text-transform: uppercase; }
.traka-hitnosti .hitno > span { background: var(--vino); }
.traka-hitnosti .uskoro > span { color: var(--grafit); background: var(--senf); }
.traka-hitnosti h3 { margin: 0 0 .35rem; font: 400 1.3rem var(--serif); }
.traka-hitnosti p { margin: 0; color: var(--siva); font-size: .87rem; }
.sitno { margin: 1rem 0 0; color: #788188; font-size: .76rem; }

.svijetlo-plavo { width: 100vw; margin-left: calc(50% - 50vw); padding: 85px max(20px,calc((100vw - 980px)/2)) 100px; background: var(--nebo); }
.put-procjene { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4,1fr); list-style: none; border-top: 1px solid #a9bac3; border-left: 1px solid #a9bac3; }
.put-procjene li { min-height: 220px; padding: 1.2rem; border-right: 1px solid #a9bac3; border-bottom: 1px solid #a9bac3; }
.put-procjene span { display: block; margin-bottom: 2rem; color: var(--vino); font: 400 2.2rem var(--serif); }
.put-procjene h3 { margin: 0 0 .4rem; font: 400 1.12rem var(--serif); }
.put-procjene p { margin: 0; color: #53656e; font-size: .77rem; }
.naglasak { margin-top: 2.5rem; padding: 1.7rem 1.9rem; color: var(--bijela); background: var(--vino); }
.naglasak > span { display: block; margin-bottom: .5rem; color: #f1ced9; font: 700 .67rem var(--mono); text-transform: uppercase; }
.naglasak p { margin: 0; }

.biljeske { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--linija); border-left: 1px solid var(--linija); }
.biljeske p { min-height: 116px; margin: 0; display: grid; grid-template-columns: 48px 1fr; gap: .8rem; padding: 1.25rem; border-right: 1px solid var(--linija); border-bottom: 1px solid var(--linija); font-size: .84rem; }
.biljeske span { color: var(--vino); font: 700 .75rem var(--mono); }

.lokalno { width: 100vw; margin-left: calc(50% - 50vw); padding: 85px max(20px,calc((100vw - 980px)/2)) 100px; color: var(--bijela); background: var(--vino-tamno); }
.lokalno .broj-poglavlja { -webkit-text-stroke-color: var(--senf); }
.lokalno .poglavlje-zaglavlje > div:last-child > p { color: var(--senf); }
.lokalno-raspored { display: grid; grid-template-columns: 1fr 280px; gap: 3rem; }
.lokalno-raspored > div p { margin: 0 0 1rem; color: #decfd4; }
.hitni-brojevi { align-self: start; color: var(--tinta); background: var(--bijela); border-top: 8px solid var(--senf); }
.hitni-brojevi p { margin: 0; display: grid; grid-template-columns: 85px 1fr; align-items: center; gap: .8rem; padding: 1rem; border-bottom: 1px solid var(--linija); }
.hitni-brojevi strong { color: var(--vino); font: 400 2.1rem var(--serif); }
.hitni-brojevi span { font-size: .76rem; line-height: 1.4; }
.hitni-brojevi small { display: block; padding: .8rem 1rem; color: var(--siva); font-size: .66rem; }

.nema { margin: 0 0 95px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 3rem; padding: 2.2rem; border: 1px solid var(--grafit); background: var(--bijela); }
.nema > div > span { color: var(--vino); font: 700 .67rem var(--mono); text-transform: uppercase; }
.nema h2 { margin: .45rem 0 0; font: 400 clamp(2rem,3.6vw,3.5rem)/1 var(--serif); }
.nema ul { margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem 1.2rem; list-style: none; }
.nema li { position: relative; padding: .6rem 0 .6rem 1.25rem; border-bottom: 1px solid var(--linija); font-size: .82rem; }
.nema li::before { content: "×"; position: absolute; left: 0; color: var(--vino); font-weight: 800; }

.podnozje { padding: 70px max(20px,calc((100vw - var(--max))/2)); color: #e1e3e4; background: #191b1e; }
.podnozje-uvod { display: grid; grid-template-columns: .8fr 1.2fr; gap: 4rem; padding-bottom: 2.8rem; border-bottom: 1px solid rgba(255,255,255,.16); }
.podnozje-naziv { display: flex; align-items: center; gap: 1rem; }
.podnozje-naziv span { width: 48px; height: 48px; display: grid; place-items: center; color: var(--grafit); background: var(--senf); border-radius: 50%; font: 700 .75rem var(--mono); }
.podnozje-naziv h2 { margin: 0; font: 400 2rem var(--serif); }
.podnozje-uvod > p { max-width: 680px; margin: 0; color: #a6acb0; }
.podnozje-kolone { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; padding: 2.8rem 0; }
.podnozje-kolone h3 { margin: 0 0 1rem; color: #e4b85f; font: 700 .67rem var(--mono); text-transform: uppercase; }
.podnozje-kolone dl,.podnozje-kolone p { margin: 0; color: #a6acb0; font-size: .76rem; }
.podnozje-kolone dl div { display: grid; grid-template-columns: 155px 1fr; gap: .7rem; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.podnozje-kolone dt,.podnozje-kolone b { color: #e1e3e4; }
.podnozje-kolone dd { margin: 0; }
.podnozje-kolone p + p { margin-top: 1rem; }
.podnozje-dno { display: flex; justify-content: space-between; gap: 1rem; padding-top: 1.15rem; border-top: 1px solid rgba(255,255,255,.16); color: #747c80; font: 400 .68rem var(--mono); }
.podnozje-dno a { color: #e4b85f; text-decoration: none; }

@media (max-width: 980px) {
  .navigacija { gap: .75rem; }
  .naslovnica-kadar { inset: 0; }
  .naslovnica-kadar::after { background: linear-gradient(90deg,rgba(220,234,242,.95) 0,rgba(220,234,242,.72) 48%,rgba(220,234,242,.08) 100%); }
  .naslovnica-papir { width: 72%; }
  .brzi-sadrzaj { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 72px; }
  body.meni-otvoren { overflow: hidden; }
  .zaglavlje-unutra { width: calc(100% - 28px); min-height: 68px; }
  .naziv small { display: none; }
  .meni-gumb { display: flex; align-items: center; gap: .65rem; padding: .5rem .65rem; color: var(--tinta); background: transparent; border: 1px solid var(--linija); cursor: pointer; font: 700 .68rem var(--mono); text-transform: uppercase; }
  .meni-gumb i,.meni-gumb i::after { width: 20px; height: 1px; display: block; background: currentColor; transition: transform .2s ease; }
  .meni-gumb i { position: relative; }
  .meni-gumb i::after { content: ""; position: absolute; top: -6px; }
  .meni-gumb[aria-expanded="true"] i { transform: rotate(45deg); }
  .meni-gumb[aria-expanded="true"] i::after { top: 0; transform: rotate(90deg); }
  .navigacija { position: fixed; inset: 68px 0 0; display: none; align-content: start; align-items: stretch; gap: 0; padding: 2rem 22px; background: var(--papir); }
  .navigacija.otvorena { display: grid; }
  .navigacija a { padding: 1rem 0; border-bottom: 1px solid var(--linija); font: 400 1.4rem var(--serif); }
  .jezik { width: fit-content; margin-top: 1.4rem; }
  .naslovnica { width: calc(100% - 24px); min-height: auto; margin-top: 12px; display: grid; }
  .naslovnica-kadar { position: relative; inset: auto; min-height: 340px; order: 1; }
  .naslovnica-kadar::after { background: linear-gradient(0deg,rgba(220,234,242,.35),transparent 50%); }
  .naslovnica-papir { width: 100%; min-height: auto; order: 2; padding: 2.8rem 1.35rem 3.2rem; }
  h1 { font-size: clamp(3rem,14vw,5.2rem); }
  .napomena { width: calc(100% - 38px); grid-template-columns: 1fr; margin-bottom: 65px; }
  .napomena-ikona { width: 62px; min-height: 48px; }
  .brzi-sadrzaj { width: calc(100% - 36px); grid-template-columns: 1fr 1fr; margin-bottom: 75px; }
  .clanak { width: calc(100% - 36px); }
  .poglavlje { padding-bottom: 78px; }
  .poglavlje-zaglavlje { grid-template-columns: 72px 1fr; gap: .8rem; }
  .broj-poglavlja { font-size: 2.8rem; }
  .uvodni-tekst,.lokalno-raspored,.nema,.podnozje-uvod,.podnozje-kolone { grid-template-columns: 1fr; }
  .signalni-redovi > div { grid-template-columns: 40px 1fr; }
  .signalni-redovi p { grid-column: 2; }
  .traka-hitnosti article { grid-template-columns: 110px 1fr; gap: 1rem; }
  .put-procjene { grid-template-columns: 1fr 1fr; }
  .biljeske { grid-template-columns: 1fr; }
  .biljeske p { min-height: auto; }
  .nema { gap: 1.6rem; padding: 1.6rem; }
  .podnozje-uvod,.podnozje-kolone { gap: 2rem; }
}

@media (max-width: 480px) {
  .naslovnica-kadar { min-height: 270px; }
  .izdanje { display: grid; }
  .brzi-sadrzaj,.put-procjene,.nema ul { grid-template-columns: 1fr; }
  .brzi-sadrzaj a { min-height: 76px; }
  .poglavlje-zaglavlje { grid-template-columns: 1fr; }
  .traka-hitnosti article { grid-template-columns: 1fr; }
  .traka-hitnosti article > span { width: fit-content; }
  .pojmovne-linije > div { grid-template-columns: 1fr; gap: .25rem; }
  blockquote { padding: 1.5rem; }
  .podnozje-kolone dl div { grid-template-columns: 1fr; gap: .1rem; }
  .podnozje-dno { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }