/* Badnjević Vizija — glavni stilovi */

:root {
	--navy: #0E1830;
	--ink: #101B30;
	--paper: #F8F5EF;
	--page: #ECE8E0;
	--card: #FFFFFF;
	--tile: #F4F0E8;
	--border: #DED7CA;
	--text: #101B30;
	--muted: #55585F;
	--gold: #BB8F58;
	--gold-light: #E9C891;
	--gold-text: #8A6634;
	--muted-dark: #A6ADBB;
	--serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
	--sans: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--r-xl: 36px;
	--r-lg: 32px;
	--r-md: 24px;
	color-scheme: light;
}

[data-theme="dark"] {
	--page: #080D18;
	--card: #121A2D;
	--tile: #18223A;
	--border: #26304A;
	--text: #F2EEE6;
	--muted: #A6ADBB;
	--gold-text: #E9C891;
	color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0; background: var(--page); color: var(--text);
	font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: inherit; }
a:hover { color: var(--gold); }
h1, h2, h3 { text-wrap: balance; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

.skip-link {
	position: absolute; left: 12px; top: -60px; z-index: 2000;
	background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; text-decoration: none;
}
.skip-link:focus { top: 12px; }
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.site { max-width: 1640px; margin: 0 auto; padding: 20px; display: flex; flex-direction: column; gap: 20px; }

/* ---------- Tipografija ---------- */
.display { margin: 0; font-weight: 200; font-size: clamp(56px, 7vw, 116px); line-height: .95; letter-spacing: -.035em; }
.display em, .h2 em, .h3 em { font-family: var(--serif); font-style: italic; font-weight: 500; letter-spacing: -.01em; }
.display em { color: var(--gold-light); }
.display--home { font-size: clamp(64px, 9vw, 156px); line-height: .92; }
.display--cta { font-size: clamp(52px, 7vw, 112px); }
.display--section { font-size: clamp(40px, 4.6vw, 72px); line-height: 1; }
.card--gold .display em, .card--gold .h2 em { color: var(--ink); }
.h2 { margin: 0; font-weight: 200; font-size: clamp(40px, 4.4vw, 64px); line-height: 1; letter-spacing: -.03em; }
.h3 { margin: 0; font-weight: 300; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.02em; }
.h2 em, .h3 em { color: var(--gold-text); }
.card--dark .h2 em, .card--dark .h3 em, .card--dark .display em { color: var(--gold-light); }
.eyebrow { margin: 0; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-text); }
.eyebrow--gold, .card--dark .eyebrow { color: var(--gold-light); }
.card--gold .eyebrow { color: var(--ink); }
.muted { margin: 0; color: var(--muted); }
.muted-light { margin: 0; color: #C9CED8; }
.lead-sm { margin: 0; font-size: 19px; line-height: 1.5; }
.note { margin: 0; font-size: 13px; color: var(--muted); }
.note--light { color: var(--muted-dark); }

/* ---------- Dugmad i linkovi ---------- */
.btn {
	display: inline-flex; align-items: center; gap: 12px; align-self: flex-start;
	min-height: 52px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
	font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; line-height: 1.2;
}
.btn:has(.dot) { padding-right: 8px; }
.btn--lg { min-height: 60px; font-size: 17px; padding-left: 30px; }
.btn--light { background: #fff; color: var(--ink); }
.btn--gold { background: var(--gold); color: var(--ink); }
.btn--navy { background: var(--ink); color: var(--paper); }
.btn--outline { border-color: var(--border); color: var(--text); background: transparent; }
.btn--outline-navy { border-color: currentColor; color: inherit; background: transparent; }
.btn--outline-gold { border-color: var(--gold-light); color: var(--gold-light); background: transparent; }
.btn:hover { color: inherit; filter: brightness(1.06); }
.btn--navy:hover { color: var(--paper); }
.btn--light:hover, .btn--gold:hover { color: var(--ink); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

.dot { width: 36px; height: 36px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; background: var(--gold); color: var(--ink); }
.dot--navy { background: var(--ink); color: var(--gold-light); }
.dot--paper { background: var(--paper); color: var(--ink); }
.dot--gold { background: var(--gold); color: var(--ink); }

.round-btn { width: 52px; height: 52px; border-radius: 50%; border: 0; flex: none; background: #fff; color: var(--ink); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.round-link { width: 48px; height: 48px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); color: inherit; text-decoration: none; }
.round-link--light { background: #fff; color: var(--ink); border: 0; }
.round-link--glass { background: rgba(255, 255, 255, .14); color: #fff; border: 0; }
.link-gold { color: var(--gold-light); font-weight: 500; text-decoration: none; }
.link-gold::after { content: " ↗"; }
.link-gold:hover { color: #fff; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
	position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px;
	border-radius: 999px; border: 1px solid var(--border); background: transparent; color: inherit;
	font: inherit; font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer;
}
.chip span { opacity: .65; }
.chip[aria-pressed="true"], .chip[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip--static { cursor: default; }
.chip--radio input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip--radio span { opacity: 1; }
.chip--radio:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chip--radio:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
.card--dark .chip { border-color: rgba(255, 255, 255, .2); }
[data-theme="dark"] .chip[aria-pressed="true"],
[data-theme="dark"] .chip[aria-current="page"],
[data-theme="dark"] .chip--radio:has(input:checked) { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.icon { display: block; flex: none; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--navy); color: #fff; display: flex; flex-direction: column; }
.hero--home { min-height: 880px; }
.hero--inner { min-height: 600px; }
.hero__img {
	position: absolute; right: 0; top: 0; height: 100%; width: 50%; object-fit: cover; object-position: center 20%;
	-webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%); mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.hero--home .hero__img { width: 58%; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 38%); mask-image: linear-gradient(90deg, transparent 0%, #000 38%); }
.hero__ring { position: absolute; border-radius: 50%; border: 1px solid rgba(187, 143, 88, .32); pointer-events: none; }
.hero__ring--a { right: -120px; top: -120px; width: 620px; height: 620px; }
.hero__ring--b { right: 40px; top: 60px; width: 360px; height: 360px; border-color: rgba(187, 143, 88, .2); }
.hero__content { position: relative; z-index: 2; flex: 1; max-width: 820px; padding: 64px 48px 56px; display: flex; flex-direction: column; justify-content: flex-end; gap: 24px; }
.hero__lead { margin: 0; max-width: 560px; font-size: 18px; font-weight: 300; color: rgba(255, 255, 255, .86); }
.glass { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }

.topbar { position: relative; z-index: 3; padding: 22px 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.logo-pill { display: inline-flex; align-items: center; min-height: 52px; padding: 10px 22px; border-radius: 999px; text-decoration: none; }
.logo-pill img { display: block; width: 150px; height: auto; }
.pill-nav, .role-pill { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; background: rgba(255, 255, 255, .94); color: var(--ink); padding: 6px; border-radius: 999px; font-size: 14px; font-weight: 500; }
.pill-nav a { padding: 10px 16px; border-radius: 999px; text-decoration: none; color: var(--ink); }
.pill-nav a:hover { background: var(--tile); color: var(--ink); }
.pill-nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
[data-theme="dark"] .pill-nav a:hover { background: #EFEAE0; }
.role-pill { border-radius: 22px; padding: 8px 10px; }
.role-pill a { display: flex; flex-direction: column; line-height: 1.25; padding: 6px 22px; text-decoration: none; color: var(--ink); }
.role-pill a + a { border-left: 1px solid #E2DCD0; }
.role-pill small { font-size: 11px; color: #5C5F66; }
.role-pill span { font-size: 15px; }
.kontakt-pill { display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 10px 0 24px; border-radius: 999px; background: #fff; color: var(--ink); font-weight: 500; text-decoration: none; }
.kontakt-pill.is-current { background: var(--gold); }
.kontakt-pill .dot { width: 34px; height: 34px; background: var(--ink); color: var(--gold-light); }
.kontakt-pill:hover { color: var(--ink); }
.burger { display: none; }

.hero__body { position: relative; z-index: 2; flex: 1; display: flex; gap: 24px; padding: 8px 24px 24px; }
.rail { display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.rail__nav, .rail__theme { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 999px; }
.rail a, .rail button { width: 44px; height: 44px; border-radius: 50%; border: 0; background: transparent; color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.rail a:hover, .rail button:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.rail a.is-current, .rail button[aria-pressed="true"] { background: #fff; color: var(--ink); }
.hero__main { flex: 1; min-width: 0; padding: 48px 0 0 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.hero__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; max-width: 900px; }
.hero__intro .hero__lead { max-width: 460px; }
.hero__cards { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px; }

.paper-card { flex: 0 1 400px; background: rgba(248, 245, 239, .96); color: var(--ink); border-radius: 28px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.paper-card h2, .glass-card h2 { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; }
.paper-card p { margin: 0; font-size: 14px; color: #4A4E57; }
.paper-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.paper-card .round-link { border-color: #D5CDBE; color: var(--ink); }
.paper-card .bignum { margin: 0; display: flex; align-items: baseline; gap: 10px; font-size: 64px; font-weight: 500; line-height: .9; letter-spacing: -.03em; color: var(--ink); }
.bignum small { font-size: 13px; font-weight: 400; letter-spacing: 0; line-height: 1.3; color: #5C5F66; max-width: 110px; }

.glass-card {
	flex: 0 1 380px; color: #fff; background: rgba(16, 27, 48, .42); border: 1px solid rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
	border-radius: 28px; padding: 26px; display: flex; flex-direction: column; gap: 12px;
}
.glass-card p { margin: 0; font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, .86); }
.glass-card .eyebrow { color: var(--gold-light); }
.glass-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.glass-card__head h2 { margin-top: 4px; }
.glass-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .18); font-size: 13px; color: rgba(255, 255, 255, .75); }
.glass-card--inset { position: relative; margin: 20px; max-width: 480px; flex: none; }
.glass-card--inset h2 { font-size: 28px; font-weight: 400; }

.monogram {
	position: absolute; z-index: 3; left: 50%; bottom: 34px; transform: translateX(-50%);
	width: 92px; height: 92px; border-radius: 50%; background: var(--ink); border: 1px solid var(--gold);
	display: flex; align-items: center; justify-content: center;
	font-family: var(--serif); font-style: italic; font-size: 38px; color: var(--gold-light); box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}

/* ---------- Kartice i mreže ---------- */
.row, .bento { display: flex; flex-wrap: wrap; gap: 20px; }
.row > *, .bento > * { flex: 1 1 340px; }
.row > .card--w2, .bento > .card--w2 { flex: 2 1 620px; }
.bento > .card--w3 { flex: 1 1 100%; }
.card { min-width: 0; background: var(--card); color: var(--text); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 48px; display: flex; flex-direction: column; gap: 24px; }
.card--dark { background: var(--ink); color: var(--paper); border-color: transparent; }
.card--gold { background: var(--gold); color: var(--ink); border-color: transparent; }
.card--photo { position: relative; overflow: hidden; min-height: 520px; padding: 0; justify-content: flex-end; background: var(--navy); color: #fff; border: 0; }
.card--photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.card--stat { justify-content: space-between; min-height: 520px; }
.card__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-top: auto; }
.mega { margin: 0; font-size: clamp(88px, 9vw, 140px); font-weight: 200; line-height: .85; letter-spacing: -.05em; }
.mega em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold); }

.roles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); column-gap: 40px; }
.roles li { position: relative; padding: 16px 0 16px 28px; border-bottom: 1px solid var(--border); font-size: 16px; }
.roles li::before { content: "❖"; position: absolute; left: 0; top: 17px; font-size: 11px; color: var(--gold); }
.quote { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 2.6vw, 34px); line-height: 1.22; }
.quote--navy { color: var(--ink); }
[data-theme="dark"] .card:not(.card--gold) .quote--navy { color: var(--text); }
.signature { display: block; width: 200px; height: auto; }

.timeline-mini { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.timeline-mini li { display: flex; gap: 16px; align-items: baseline; padding: 0 0 15px 22px; font-size: 16px; }
.timeline-mini li:last-child { padding-bottom: 0; }
.timeline-mini span { min-width: 44px; font-weight: 500; color: var(--gold-text); }
.works { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.works a { display: flex; flex-direction: column; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--border); text-decoration: none; font-size: 16px; line-height: 1.45; }
.works li:last-child a { border-bottom: 0; }
.works small { font-size: 13px; color: var(--muted); }

.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; }
.highlight { background: var(--card); border: 1px solid var(--border); border-radius: var(--r-md); padding: 28px; }
.highlight p { margin: 0; font-size: 15px; color: var(--muted); }
.highlight .highlight__k { margin: 0 0 8px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; color: var(--gold-text); }

/* Knjige */
.book-feature { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 40px; }
.book-feature--lg { padding: 64px; gap: 56px; }
.book-feature__text { flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px; }
.book-feature__text p { margin: 0; }
.book-cover { flex: none; width: 200px; }
.book-cover--sm { width: 180px; }
.book-cover--lg { width: 280px; }
.book-cover img { display: block; width: 100%; border-radius: 12px; box-shadow: 0 30px 60px rgba(16, 27, 48, .4); }
.book-cover__type { aspect-ratio: 2 / 3; background: var(--ink); color: var(--paper); border: 1px solid var(--gold); border-radius: 14px; padding: 26px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 30px 60px rgba(16, 27, 48, .4); }
.book-cover__type img { width: 72%; box-shadow: none; border-radius: 0; }
.book-cover__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 30px; line-height: 1.04; }
.book-cover--lg .book-cover__title { font-size: 38px; }
.book-cover__sub { font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted-dark); }
.books { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 32px 24px; }
.book h3 { margin: 14px 0 2px; font-size: 18px; font-weight: 500; line-height: 1.3; }
.book h3 a { text-decoration: none; }
.book p { margin: 0; font-size: 14px; color: var(--muted); }
.book__cover { aspect-ratio: 3 / 4; border-radius: 22px; padding: 24px; border: 1px solid var(--border); display: flex; flex-direction: column; justify-content: space-between; }
.book__cover--navy { background: var(--ink); color: var(--paper); }
.book__cover--gold { background: var(--gold); color: var(--ink); }
.book__cover--paper { background: var(--tile); color: var(--text); }
.book__cover--blue { background: #1E2C4A; color: var(--paper); }
.book__year { font-size: 11px; letter-spacing: .2em; opacity: .75; }
.book__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 28px; line-height: 1.05; }
.book__author { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; opacity: .75; }

/* Tekst */
.prose p { margin: 0; max-width: 72ch; font-size: 17px; font-weight: 300; line-height: 1.75; }
.prose .prose__lead { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.4vw, 30px); line-height: 1.32; }
.prose .btn { margin-top: 8px; }
.stats-col { gap: 22px; }
.stat { display: flex; flex-direction: column; gap: 2px; padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.stat:last-child { border-bottom: 0; padding-bottom: 0; }
.stat__v { font-size: 56px; font-weight: 200; line-height: 1; }
.stat__v em { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold-light); }
.stat__l { font-size: 14px; color: var(--muted-dark); }
.row--stats > .card { flex: 1 1 220px; padding: 32px; gap: 10px; justify-content: space-between; }
.row--stats > .card:not(.card--dark) .stat__l { color: var(--muted); }
.row--stats .stat__v { font-size: 60px; }

.timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); border-top: 1px solid var(--text); }
.timeline li { display: flex; flex-direction: column; gap: 6px; padding: 24px 24px 24px 0; border-bottom: 1px solid var(--border); }
.timeline strong { font-weight: 500; }
.timeline li > span:last-child { font-size: 14px; color: var(--muted); }
.timeline__y { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 34px; line-height: 1; color: var(--gold-text); }
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger li { display: grid; grid-template-columns: 56px 1fr; gap: 2px 20px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.ledger li:last-child { border-bottom: 0; }
.ledger__y { font-weight: 500; color: var(--gold-text); }
.ledger__o { grid-column: 2; font-size: 14px; color: var(--muted); }
.inst { list-style: none; margin: 0; padding: 0; }
.inst a { display: flex; flex-direction: column; padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); text-decoration: none; }
.inst li:last-child a { border-bottom: 0; }
.inst strong { font-weight: 500; }
.inst span { font-size: 14px; color: var(--muted-dark); }
.inst a:hover strong { color: var(--gold-light); }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; }
.tiles--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.tiles--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.tile { background: var(--tile); border-radius: var(--r-md); padding: 30px; display: flex; flex-direction: column; gap: 10px; }
.tile h3 { margin: 0; font-size: 21px; font-weight: 500; line-height: 1.25; }
.tile p, .tile ul { margin: 0; font-size: 15px; color: var(--muted); }
.tile ul { padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.facts { margin: 0; }
.facts div { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); }
.facts div:last-child { border-bottom: 0; }
.facts dt { font-size: 13px; color: var(--muted-dark); }
.facts dd { margin: 0; font-size: 18px; }

.essay { align-items: center; padding-top: 64px; padding-bottom: 64px; }
.motto { list-style: none; margin: 0; padding: 0; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(28px, 3.4vw, 48px); line-height: 1.22; }
.motto strong { color: var(--gold-text); font-weight: 600; }
.essay__body { max-width: 68ch; display: flex; flex-direction: column; gap: 20px; }
.essay__body p { margin: 0; font-size: 19px; font-weight: 300; line-height: 1.75; }
.essay__sep { text-align: center; color: var(--gold); }
.essay__body .signature { margin-top: 12px; }
.essay > .btn { align-self: center; }
.statement { gap: 10px; padding: 64px 56px; }
.statement p { margin: 0; max-width: 940px; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(24px, 2.6vw, 36px); line-height: 1.3; }
.statement p:first-child { color: var(--gold-light); }

/* Polja i bibliografija */
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.field label, .form legend { font-size: 13px; font-weight: 500; }
.field input, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 15px 20px; color: var(--text); background: var(--tile); border: 1px solid var(--border); border-radius: 18px; }
.field textarea { resize: vertical; min-height: 150px; }
.field--search { min-width: min(340px, 100%); }
.field--search input { border-radius: 999px; }
.bib__count { margin: 0; font-size: 14px; color: var(--muted); }
.bib__list { list-style: none; margin: 0; padding: 0; }
.bib__list li { display: grid; grid-template-columns: 64px 1fr auto; gap: 6px 28px; align-items: baseline; padding: 20px 0; border-top: 1px solid var(--border); }
.bib__list li[hidden] { display: none; }
.bib__y { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; color: var(--gold-text); }
.bib__t p { margin: 0; font-size: 16px; line-height: 1.5; }
.bib__tag { font-size: 12px; color: var(--muted); }
.bib__doi { max-width: 250px; font-size: 13px; color: var(--muted); overflow-wrap: anywhere; }
.bib__empty { margin: 0; color: var(--muted); }

/* Mediji */
.videos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 28px 24px; }
.video { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.video__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 22px; background: var(--ink); }
.video__thumb img { width: 100%; height: 100%; object-fit: cover; }
.video__play { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(16, 27, 48, .55); border: 1px solid rgba(255, 255, 255, .35); color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; }
.video iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 22px; }
.video figcaption { font-size: 17px; line-height: 1.35; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.gallery__item { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-lg); background: var(--navy); }
.gallery__item--tall { aspect-ratio: auto; min-height: 520px; }
.gallery__item--wide { grid-column: span 2; aspect-ratio: auto; min-height: 520px; }
.gallery__item a, .gallery__item img { display: block; width: 100%; height: 100%; }
.gallery__item img { object-fit: cover; object-position: center 25%; }
.gallery__item figcaption { position: absolute; left: 18px; bottom: 18px; padding: 9px 16px; border-radius: 999px; font-size: 13px; color: #fff; background: rgba(16, 27, 48, .5); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.press-bio { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.38; }
.downloads { list-style: none; margin: 0; padding: 0; }
.downloads a { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); text-decoration: none; font-size: 18px; }
.downloads small { display: block; font-size: 13px; color: var(--muted-dark); }
.downloads .icon { color: var(--gold-light); }

/* Kontakt */
.form { display: flex; flex-direction: column; gap: 22px; }
.form fieldset { margin: 0; padding: 0; border: 0; }
.form legend { margin-bottom: 10px; padding: 0; }
.form__row { display: flex; flex-wrap: wrap; gap: 18px; }
.form__row .field { flex: 1 1 240px; }
.form abbr { text-decoration: none; color: var(--gold-text); }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; cursor: pointer; }
.consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); flex: none; }
.notice--ok { background: var(--ink); color: var(--paper); border-radius: var(--r-md); padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.notice--ok p { margin: 0; }
.notice--ok .notice__big { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 40px; line-height: 1; color: var(--gold-light); }
.notice--err { margin: 0; padding: 14px 18px; border-radius: 16px; background: #FBEAEA; color: #8A1F1F; }
.topics { list-style: none; margin: 0; padding: 0; }
.topics li { padding: 14px 0; border-bottom: 1px solid rgba(255, 255, 255, .14); font-size: 18px; line-height: 1.35; }

/* Članci */
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px 24px; }
.post-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; background: var(--ink); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__ph { position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(187, 143, 88, .35), transparent 55%), var(--ink); }
.post-card__tag { position: absolute; left: 16px; bottom: 16px; padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .92); color: var(--ink); font-size: 12px; font-weight: 500; }
.post-card__meta { margin: 14px 0 4px; font-size: 13px; color: var(--muted); }
.post-card__title { margin: 0; font-size: 22px; font-weight: 400; line-height: 1.3; }
.post-card__title a { text-decoration: none; }
.feature-essay { justify-content: space-between; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--border); text-decoration: none; font-size: 14px; }
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.empty { margin: 0; color: var(--muted); }
.entry { padding-top: 64px; padding-bottom: 64px; }
.entry__content { width: 100%; max-width: 72ch; margin: 0 auto; font-size: 18px; font-weight: 300; line-height: 1.75; }
.entry__content > * + * { margin-top: 1.1em; }
.entry__content h2, .entry__content h3 { font-weight: 400; line-height: 1.2; letter-spacing: -.01em; margin-top: 1.8em; }
.entry__content h2 { font-size: 34px; }
.entry__content h3 { font-size: 26px; }
.entry__content blockquote { margin: 1.6em 0; padding: 0 0 0 24px; border-left: 2px solid var(--gold); font-family: var(--serif); font-style: italic; font-size: 26px; line-height: 1.35; }
.entry__content a { color: var(--gold-text); }
.entry__content img { border-radius: 20px; }
.entry__foot { width: 100%; max-width: 72ch; margin: 24px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }

/* Završni poziv i podnožje */
.cta { border-radius: var(--r-xl); background: var(--navy); color: var(--paper); padding: 88px 40px 40px; display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.cta .btn { align-self: center; }
.cta--compact { padding: 36px 40px; }
.site-footer { width: 100%; margin-top: 64px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .14); display: grid; grid-template-columns: auto 1fr; gap: 16px 48px; align-items: start; text-align: left; font-size: 14px; color: var(--muted-dark); }
.cta--compact .site-footer { margin-top: 0; padding-top: 0; border-top: 0; }
.site-footer__logo { grid-row: span 2; width: 180px; height: auto; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.site-footer__nav a { color: #E6E1D6; text-decoration: none; }
.site-footer__nav a:hover { color: var(--gold-light); }
.site-footer__note { grid-column: 1 / -1; margin: 8px 0 0; }

/* Mobilni meni */
.mmenu { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background: var(--navy); color: var(--paper); padding: 14px 18px 32px; display: flex; flex-direction: column; gap: 26px; }
.mmenu[hidden] { display: none; }
.mmenu__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mmenu .logo-pill { background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); min-height: 46px; padding: 8px 18px; }
.mmenu .logo-pill img { width: 118px; }
.mmenu__name { margin: 8px 0 0; font-size: 12px; letter-spacing: .26em; text-transform: uppercase; color: var(--gold-light); }
.mmenu__nav { display: flex; flex-direction: column; }
.mmenu__nav a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 14px 4px; border-bottom: 1px solid rgba(255, 255, 255, .12); font-size: 38px; font-weight: 200; letter-spacing: -.02em; line-height: 1.1; color: var(--paper); text-decoration: none; }
.mmenu__nav small { font-size: 13px; color: var(--muted-dark); letter-spacing: 0; }
.mmenu__nav .is-current span { font-family: var(--serif); font-style: italic; font-weight: 500; color: var(--gold-light); }
.mmenu__nav .is-current small { color: var(--gold-light); }
.mmenu__social { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 14px; }
.mmenu__social a { color: #E6E1D6; }
body.menu-open { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
	.mmenu:not([hidden]) { animation: ab-fade .22s ease-out; }
	@keyframes ab-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

[data-theme="dark"] .card:not(.card--dark):not(.card--gold) .btn--navy { background: var(--gold); color: var(--ink); }
[data-theme="dark"] .card:not(.card--dark):not(.card--gold) .dot--gold { background: var(--ink); color: var(--gold-light); }

/* ---------- Prilagođavanje ekranima ---------- */
@media (max-width: 1240px) {
	.monogram { display: none; }
	.role-pill a { padding: 6px 14px; }
}
@media (max-width: 1100px) {
	.pill-nav a { padding: 10px 12px; }
}
@media (max-width: 980px) {
	.pill-nav, .role-pill { display: none; }
	.burger { display: inline-flex; }
	.hero__img, .hero--home .hero__img { width: 62%; }
}
@media (max-width: 760px) {
	body { font-size: 16px; }
	.site { padding: 10px; gap: 10px; }
	.hero { border-radius: 26px; }
	.hero--home, .hero--inner { min-height: 0; }
	.hero__img, .hero--home .hero__img {
		width: 100%; height: 440px; object-position: center 15%;
		-webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%);
	}
	.topbar { padding: 14px; flex-wrap: nowrap; }
	.logo-pill { min-height: 46px; padding: 8px 18px; }
	.logo-pill img { width: 118px; }
	.kontakt-pill { display: none; }
	.hero__content { padding: 28px 22px 30px; }
	.has-img .hero__content { padding-top: 250px; }
	.hero__ring--a { width: 420px; height: 420px; right: -160px; top: -160px; }
	.hero__ring--b { display: none; }
	.hero__body { flex-direction: column; gap: 16px; padding: 0 14px 14px; }
	.rail { order: 2; flex-direction: row; justify-content: flex-start; }
	.rail__nav { display: none; }
	.rail__theme { flex-direction: row; }
	.hero__main { padding: 230px 0 0; gap: 28px; }
	.paper-card, .hero__cards .glass-card { flex: 1 1 100%; }
	.display, .display--home { font-size: 50px; line-height: 1; }
	.display--cta { font-size: 52px; }
	.display--section { font-size: 40px; }
	.card { padding: 30px 22px; border-radius: 26px; gap: 20px; }
	.card--photo { padding: 0; min-height: 420px; }
	.card--stat { min-height: 0; }
	.book-feature, .book-feature--lg { flex-direction: column; align-items: flex-start; padding: 30px 22px; gap: 28px; }
	.book-cover--lg { width: 220px; }
	.statement { padding: 40px 22px; }
	.essay, .entry { padding-top: 40px; padding-bottom: 40px; }
	.bib__list li { grid-template-columns: 1fr; gap: 4px; }
	.bib__y { font-size: 20px; }
	.gallery__item--wide { grid-column: auto; }
	.gallery__item--tall, .gallery__item--wide { min-height: 380px; }
	.cta { padding: 56px 20px 24px; border-radius: 26px; }
	.cta--compact { padding: 24px 20px; }
	.site-footer { grid-template-columns: 1fr; margin-top: 40px; }
	.site-footer__logo { grid-row: auto; }
	.mega { font-size: 88px; }
	.paper-card .bignum { font-size: 56px; }
}
@media print {
	.topbar, .rail, .monogram, .cta .btn, .mmenu, .hero__img { display: none !important; }
	.hero { background: none; color: #000; min-height: 0; }
	.card { border: 0; padding: 0; }
}