/* Feniks π: zajednički stil podstranica (privatnost, uvjeti, preuzimanje). Noć, žar i zlato; fontovi s vlastite domene. */
@import url("/fontovi/fontovi.css");
:root {
  --crno: #000; --ink: #efe7d6; --tekst: #cfc7b6; --muted: #a49e8e; --zlato: #f0c05a; --zar: #e8a23a; --crta: rgba(232, 162, 58, .22);
  --f-kras: "Pinyon Script", cursive; --f-nas: "Marcellus", Georgia, serif; --f-tijelo: "Alegreya Sans", system-ui, sans-serif; --f-glag: "Noto Sans Glagolitic", serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--crno); }
body { margin: 0; background: radial-gradient(ellipse 90% 50% at 50% 0%, #141a3a 0%, #070a18 45%, #000 100%) no-repeat, #000; color: var(--ink); font: 18px/1.65 var(--f-tijelo);
  padding: 0 max(18px, env(safe-area-inset-right, 0px)) 60px max(18px, env(safe-area-inset-left, 0px)); }
a { color: var(--zlato); }
:focus-visible { outline: 2px solid var(--zlato); outline-offset: 3px; }
header.vrh { max-width: 1100px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding-block: 18px; }
header.vrh .ime { font: 400 2rem/1 var(--f-kras); color: var(--zlato); text-decoration: none; }
header.vrh nav { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .95rem; }
header.vrh nav a { color: var(--muted); text-decoration: none; }
header.vrh nav a:hover, header.vrh nav a[aria-current] { color: var(--zlato); }
main { max-width: 70ch; margin: 0 auto; }
main.siroko { max-width: 1100px; }
h1 { font: 400 clamp(2rem, 4vw, 2.6rem)/1.15 var(--f-nas); margin: 18px 0 8px; }
h2 { font: 400 1.35rem var(--f-nas); margin: 34px 0 8px; color: var(--ink); }
h3 { font: 500 1.05rem var(--f-tijelo); margin: 20px 0 4px; color: var(--ink); }
p, li { color: var(--tekst); }
.sazetak { border: 1px solid var(--crta); border-radius: 14px; padding: 6px 20px; background: rgba(20, 26, 58, .35); }
.sazetak li { margin-block: 6px; }
.datum { color: var(--muted); font-size: .9rem; }
.oznaka { display: inline-block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--zar); border: 1px solid var(--zar); border-radius: 99px; padding: 2px 10px; }
.mreza { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; margin-top: 22px; }
.kartica { background: linear-gradient(160deg, rgba(28, 34, 66, .6), rgba(10, 13, 30, .55)); border: 1px solid var(--crta); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 8px; }
.kartica h2 { margin: 0; font-size: 1.4rem; }
.kartica p { margin: 0; font-size: .97rem; }
.kartica ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.gumb { display: inline-block; text-align: center; border: 1px solid var(--zlato); color: var(--zlato); border-radius: 10px; padding: 9px 14px; text-decoration: none; font-weight: 500; }
.gumb[aria-disabled="true"] { border-color: var(--crta); color: var(--muted); pointer-events: none; }
.kartica .gumb { margin-top: auto; }
footer { max-width: 1100px; margin: 48px auto 0; border-top: 1px solid var(--crta); padding-top: 22px; color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; }
footer a { color: var(--muted); }