/* Embrace Death. Mere su iz dizajna (Website.psd, 1903 px sirine), preracunate u jedinicu --u. */
@font-face {
	font-family: "Traditio";
	src: url("../fonts/traditio.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

:root {
	--u: calc(100vw / 1903);
	--gold: #8e5f17;
	--gold-hi: #b07a24;
	--red: #820a0b;           /* boja crvenog znaka u futeru */
	--red-hi: #a8100f;
	--black: #000;
	--col: 76.35%;           /* 1453 / 1903 */
	--blackletter: "Traditio", "UnifrakturMaguntia", "Old English Text MT", serif;
	--serif: "Times New Roman", Times, Georgia, serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: #000; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #000;
	color: var(--gold);
	font-family: var(--serif);
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ed-c { color: var(--gold); }
.ed-r { color: var(--red); }

.site { position: relative; min-height: 100vh; display: flex; flex-direction: column; background: #000; }
/* Bocne teksture celom visinom stranice: pri vrhu se tope u crno (Left/Right Shade). */
.site::before, .site::after {
	content: "";
	position: absolute; top: 0; bottom: 0; z-index: 0;
	width: calc((100% - var(--col)) / 2 + 1px);
	background: url("../img/shade-left.webp") right top / cover no-repeat;
	pointer-events: none;
}
.site::before { left: 0; }
.site::after { right: 0; background-image: url("../img/shade-right.webp"); background-position: left top; }

/* ---------- Header (desktop: velika slika u luku) ---------- */
.hd { position: absolute; top: 0; left: 0; right: 0; z-index: 3; pointer-events: none; }
.hd-art img { width: 100%; height: auto; }
.hd-logo { pointer-events: auto; position: absolute; display: block; }
/* Logo je vec u slici headera, ovde je samo klikabilna zona preko njega. */
body:not(.is-compact) .hd-logo { left: calc(var(--u) * 14); top: calc(var(--u) * 10); width: calc(var(--u) * 272); height: calc(var(--u) * 112); }
body:not(.is-compact) .hd-logo img { opacity: 0; width: 100%; height: 100%; }

/* ---------- Glavni deo: crni stub i teksture sa strane ---------- */
.main {
	position: relative; z-index: 1;
	flex: 1 0 auto;
	margin-top: calc(var(--u) * 777);
}
.col {
	position: relative;
	width: var(--col);
	margin: 0 auto;
	min-height: calc(var(--u) * 700);
	padding: calc(var(--u) * 285) 0 calc(var(--u) * 165);
}

/* ---------- Lista intervjua ---------- */
.iv-list { list-style: none; margin: 0; padding: 0; }
.iv-list li { position: relative; text-align: center; }
.iv-list li + li::before {
	content: "";
	position: absolute; left: 0; right: 0; top: 0;
	height: calc(var(--u) * 3); min-height: 1px;
	background: url("../img/separator.webp") center / 100% 100% no-repeat;
}
.iv-list a {
	display: block;
	padding: calc(var(--u) * 17) calc(var(--u) * 30) calc(var(--u) * 20);
	font-family: var(--blackletter);
	font-size: calc(var(--u) * 36);
	line-height: 1.18;
	transition: filter .2s, text-shadow .2s;
}
.iv-list a:hover, .iv-list a:focus-visible { filter: brightness(1.3); text-shadow: 0 0 18px rgba(130, 10, 11, .45); outline: none; }
/* Pretraga: tamna, ne odskace */
.iv-search { position: relative; width: min(100%, calc(var(--u) * 640)); min-width: 260px; margin: calc(var(--u) * -80) auto calc(var(--u) * 30); }
.iv-search input {
	display: block; width: 100%;
	padding: calc(var(--u) * 10) calc(var(--u) * 50) calc(var(--u) * 12);
	background: rgba(255, 255, 255, .025);
	border: 1px solid #1f1811; border-radius: 2px;
	color: var(--gold);
	text-align: center;
	font: normal calc(var(--u) * 36) / 1.18 var(--blackletter);
	outline: none;
	transition: border-color .2s, background .2s;
	-webkit-appearance: none; appearance: none;
}
.iv-search input::-webkit-search-decoration { display: none; }
.iv-search input:focus { border-color: #4a3519; background: rgba(255, 255, 255, .04); }
.iv-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.iv-search svg { position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); fill: none; stroke: #5a4630; stroke-width: 2; pointer-events: none; }
.iv-search-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #4a3a28; font: max(12px, calc(var(--u) * 15)) var(--serif); pointer-events: none; }
.iv-none { text-align: center; color: #5a4630; font: italic max(16px, calc(var(--u) * 22)) var(--serif); margin: calc(var(--u) * 30) 0 0; }
.iv-more { height: 1px; }
.iv-list li.is-new { animation: ivIn .45s ease both; }
@keyframes ivIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.iv-empty { text-align: center; font-family: var(--blackletter); font-size: calc(var(--u) * 41.67); margin: 0; }

/* ---------- Footer ---------- */
.ft {
	position: relative; z-index: 1;
	background: #000;
	text-align: center;
	padding: calc(var(--u) * 55) 20px calc(var(--u) * 15);
	font-family: var(--serif);
	color: var(--gold);
	font-size: max(15px, calc(var(--u) * 23));
	line-height: 1.2;
}
.ft-logo { display: inline-block; }
.ft-logo img { width: max(130px, calc(var(--u) * 190)); margin: 0 auto; }
.ft-copy { margin: calc(var(--u) * 10) 0 calc(var(--u) * 14); }
.ft-social { list-style: none; display: flex; justify-content: center; gap: max(8px, calc(var(--u) * 10)); margin: 0 0 calc(var(--u) * 16); padding: 0; }
.ft-social img { width: max(40px, calc(var(--u) * 59)); height: auto; transition: filter .2s; }
.ft-social a:hover img, .ft-social a:focus-visible img { filter: brightness(1.3); }
.ft-credit { margin: 0 0 calc(var(--u) * 14); }
.ft-sigil { width: max(50px, calc(var(--u) * 70)); margin: 0 auto; }

/* ---------- Kompaktni header (stranica intervjua, 404) ---------- */
.is-compact .main { margin-top: 0; }
.is-compact .hd { position: absolute; }
.is-compact .hd-strip { width: 100%; height: clamp(130px, 15vw, 290px); object-fit: cover; object-position: 50% 20%; }
.is-compact .hd-logo { left: 50%; top: clamp(18px, 2.2vw, 44px); transform: translateX(-50%); width: clamp(230px, 24vw, 470px); }
.is-compact .col { padding-top: clamp(150px, 16.5vw, 320px); }

/* ---------- Stranica intervjua ---------- */
.iv-title {
	margin: 0 0 calc(var(--u) * 40);
	padding: 0 calc(var(--u) * 30);
	text-align: center;
	font-family: var(--blackletter);
	font-weight: normal;
	font-size: calc(var(--u) * 46);
	line-height: 1.18;
}
.iv-back { text-align: center; margin: calc(var(--u) * 40) 0 0; font-family: var(--blackletter); font-size: max(18px, calc(var(--u) * 30)); }
.iv-back a { color: var(--gold); }
.iv-back a:hover { color: var(--red); }

/* Naslovna strana intervjua (flipbook se otvara preko celog prozora) */
.iv-cover {
	display: block; position: relative;
	width: min(70%, 520px); margin: 0 auto;
	padding: 0; border: 0; background: none; cursor: pointer;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .8), 0 0 0 1px rgba(142, 95, 23, .25);
	transition: transform .25s, box-shadow .25s;
}
.iv-cover img { width: 100%; height: auto; }
.iv-cover:hover, .iv-cover:focus-visible { transform: translateY(-4px); box-shadow: 0 26px 70px rgba(0, 0, 0, .9), 0 0 0 1px rgba(130, 10, 11, .8); outline: none; }
.iv-cover-cta {
	position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%);
	padding: 10px 22px; white-space: nowrap;
	background: rgba(0, 0, 0, .82); border: 1px solid var(--red);
	font-family: var(--blackletter); font-size: max(20px, calc(var(--u) * 30)); color: var(--gold);
}
.fb-noscript img { margin: 0 auto 10px; }

/* Loader dok se flipbook ucitava */
.ed-veil { position: fixed; inset: 0; z-index: 99990; display: grid; place-items: center; background: rgba(0, 0, 0, .72); opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; }
.ed-veil.is-on { opacity: 1; visibility: visible; }
.ed-veil span { width: 38px; height: 38px; border: 2px solid rgba(142, 95, 23, .3); border-top-color: #b07a24; border-radius: 50%; animation: edspin .8s linear infinite; }
@keyframes edspin { to { transform: rotate(360deg); } }
.ed-book-anchor { position: absolute; width: 1px; height: 1px; overflow: hidden; left: -9999px; top: 0; }

/* Paywall */
.ed-unlock {
	position: fixed; z-index: 2147483647; left: 50%; top: 14px; transform: translateX(-50%);
	padding: 10px 20px; border-radius: 999px; cursor: pointer;
	background: rgba(0, 0, 0, .78); color: #c89a4a;
	border: 1px solid rgba(176, 122, 36, .55);
	box-shadow: 0 2px 16px rgba(0, 0, 0, .6);
	font: 18px/1 var(--blackletter); letter-spacing: .02em;
	transition: background .2s, color .2s, border-color .2s;
}
.ed-unlock b { font-weight: normal; color: #fff; margin-left: 6px; }
.ed-unlock:hover, .ed-unlock:focus-visible { background: #820a0b; color: #fff; border-color: #820a0b; outline: none; }
.ed-pay { position: fixed; inset: 0; z-index: 2147483647; display: grid; place-items: center; padding: 16px; background: rgba(0, 0, 0, .72); overflow: auto; }
.ed-pay[hidden] { display: none; }
.ed-pay-box {
	position: relative; width: min(100%, 440px);
	padding: 34px 28px 24px; text-align: center;
	background: #070605 url("../img/shade-left.webp") center / cover;
	background-blend-mode: multiply;
	background-color: rgba(7, 6, 5, .94);
	border: 1px solid rgba(176, 122, 36, .4);
	box-shadow: 0 30px 80px rgba(0, 0, 0, .9);
	color: #cbb68f; font-family: var(--serif);
}
.ed-pay-x { position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; background: none; border: 0; color: #8e5f17; font-size: 30px; line-height: 1; cursor: pointer; }
.ed-pay-x:hover { color: #fff; }
.ed-pay-kicker { margin: 0 0 6px; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: #6b5233; }
.ed-pay-title { margin: 0 0 10px; font: normal 32px/1.1 var(--blackletter); color: var(--gold); }
.ed-pay-name { margin: 0 0 14px; font: 18px/1.25 var(--blackletter); color: var(--red-hi); }
.ed-pay-price { margin: 0 0 18px; font: 40px/1 var(--blackletter); color: #e0c48f; }
.ed-pay-buttons { min-height: 50px; background: #fff0; }
.ed-pay-spin { display: inline-block; width: 28px; height: 28px; border: 2px solid rgba(142, 95, 23, .3); border-top-color: #b07a24; border-radius: 50%; animation: edspin .8s linear infinite; }
.ed-pay-msg { min-height: 1.2em; margin: 10px 0 0; font-size: 15px; color: #e0c48f; }
.ed-pay-note { margin: 12px 0 14px; font-size: 13px; line-height: 1.45; color: #7d6648; }
.ed-pay-restore { border-top: 1px solid rgba(176, 122, 36, .2); padding-top: 12px; text-align: left; }
.ed-pay-restore summary { cursor: pointer; color: #b07a24; font-size: 15px; text-align: center; list-style: none; }
.ed-pay-restore summary::-webkit-details-marker { display: none; }
.ed-pay-restore form { display: flex; gap: 8px; margin-top: 10px; }
.ed-pay-restore input { flex: 1; min-width: 0; padding: 9px 10px; background: #000; color: #e0c48f; border: 1px solid #3a2a12; font: 15px var(--serif); }
.ed-pay-restore button { padding: 9px 12px; background: #820a0b; color: #fff; border: 0; cursor: pointer; font: 14px var(--serif); white-space: nowrap; }
.ed-pay-rmsg { margin: 8px 0 0; font-size: 13px; color: #a8916a; text-align: center; }
.ed-note { position: fixed; z-index: 2147483002; left: 50%; bottom: 24px; transform: translateX(-50%); padding: 12px 20px; background: #0b0907; border: 1px solid rgba(176, 122, 36, .5); color: #e0c48f; font: 16px var(--serif); transition: opacity .5s; }
.ed-note.is-out { opacity: 0; pointer-events: none; }

/* Paketi clanarine */
.ed-pay-lead { margin: 0 0 18px; font-size: 16px; line-height: 1.45; color: #a8916a; }
.ed-plans { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 16px; }
.ed-plan {
	display: flex; flex-direction: column; align-items: center; gap: 4px;
	padding: 14px 10px; cursor: pointer;
	background: rgba(0, 0, 0, .55); color: var(--gold);
	border: 1px solid #3a2a12; border-radius: 2px;
	transition: border-color .15s, background .15s;
}
.ed-plan:hover { border-color: #6b4a1c; }
.ed-plan.is-on { border-color: #b07a24; background: rgba(130, 10, 11, .25); box-shadow: inset 0 0 0 1px #b07a24; }
.ed-plan-label { font: 20px/1.1 var(--blackletter); }
.ed-plan-price { font: 30px/1 var(--blackletter); color: #e0c48f; }
.ed-pay-login { margin: 14px 0 0; font-size: 15px; color: #7d6648; }
.ed-pay-login a { color: #b07a24; text-decoration: underline; }

/* Login u headeru */
.hd-acct {
	position: absolute; top: max(10px, calc(var(--u) * 18)); right: max(12px, calc(var(--u) * 26)); z-index: 4;
	pointer-events: auto;
	padding: 6px 14px;
	background: rgba(0, 0, 0, .55); border: 1px solid rgba(176, 122, 36, .45); border-radius: 999px;
	color: #c89a4a; font: max(15px, calc(var(--u) * 20)) / 1 var(--blackletter);
	transition: background .2s, color .2s, border-color .2s;
}
.hd-acct:hover, .hd-acct:focus-visible { background: #820a0b; border-color: #820a0b; color: #fff; outline: none; }

/* Stranica naloga */
.acc { width: min(100%, calc(var(--u) * 820)); min-width: 300px; margin: 0 auto; padding: 0 calc(var(--u) * 20); color: #cbb68f; }
.acc-title { margin: 0 0 calc(var(--u) * 28); text-align: center; font: normal max(28px, calc(var(--u) * 46)) / 1.15 var(--blackletter); }
.acc-sub { margin-top: calc(var(--u) * 60); font-size: max(24px, calc(var(--u) * 38)); }
.acc-lead { text-align: center; font-size: max(16px, calc(var(--u) * 21)); line-height: 1.45; margin: 0 0 22px; color: #a8916a; }
.acc-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }
.acc-actions .ct-send { margin-top: 0; }
.acc-link { background: none; border: 0; padding: 0; color: #b07a24; font: italic max(15px, calc(var(--u) * 19)) var(--serif); text-decoration: underline; cursor: pointer; }
.acc-msg { min-height: 1.3em; margin: 0 0 14px; color: #e0c48f; font-size: 16px; }
.acc-status { text-align: center; font-size: max(17px, calc(var(--u) * 24)); margin: 0 0 10px; }
.acc-status.is-on strong { color: #e0c48f; }
.acc-status.is-off { color: #a8916a; }
.acc-plans { max-width: 460px; margin: 0 auto; text-align: center; }
.acc-pass { max-width: 460px; margin: calc(var(--u) * 60) auto 0; }
.acc-pass summary { cursor: pointer; text-align: center; color: #b07a24; font: max(18px, calc(var(--u) * 24)) var(--blackletter); list-style: none; }
.acc-pass summary::-webkit-details-marker { display: none; }
.acc-pass form { margin-top: 18px; }
.acc-out { margin: calc(var(--u) * 50) 0 0; text-align: center; color: #7d6648; font-size: 16px; }
.acc-out a { color: #b07a24; text-decoration: underline; }
.acc-note { max-width: 560px; margin: 0 auto 24px; padding: 12px 16px; text-align: center; border: 1px solid #3a2a10; font-size: 17px; }
.acc-note.is-ok { color: #e0c48f; }
.acc-note.is-err { color: var(--red-hi); border-color: var(--red); }

/* Real3D lightbox: nase boje */
.flipbook-main-wrapper { background: radial-gradient(ellipse at 50% 45%, #1d150c 0%, #0a0806 55%, #030202 100%) !important; }
.flipbook-currentPageHolder, .flipbook-currentPageNumber { font-family: var(--serif) !important; color: #c89a4a !important; }

/* ---------- Kontakt ---------- */
.ct { padding: 0 calc(var(--u) * 37); }
.ct-f { display: block; margin-bottom: calc(var(--u) * 26); }
.ct-f span { display: block; font-family: var(--blackletter); font-size: max(20px, calc(var(--u) * 33)); line-height: 1.1; margin-bottom: calc(var(--u) * 10); color: var(--gold); }
.ct-f input, .ct-f textarea {
	display: block; width: 100%;
	background: #000; color: #d8c8a8;
	border: 2px solid #5b5b5b; border-radius: 0;
	padding: 10px 12px;
	font: 16px/1.4 var(--serif);
	height: max(42px, calc(var(--u) * 50));
	outline: none;
	transition: border-color .15s;
}
.ct-f textarea { height: max(180px, calc(var(--u) * 230)); resize: vertical; }
.ct-f input:focus, .ct-f textarea:focus { border-color: var(--gold); }
.ct-send {
	margin-top: calc(var(--u) * 26);
	background: none; border: 0; padding: 0;
	font-family: var(--blackletter); font-size: max(22px, calc(var(--u) * 36));
	color: var(--red); cursor: pointer;
}
.ct-send:hover, .ct-send:focus-visible { color: var(--red-hi); outline: none; text-shadow: 0 0 14px rgba(130, 10, 11, .6); }
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ct-note { margin: 0 0 calc(var(--u) * 30); padding: 12px 16px; border: 1px solid #3a2a10; font-size: 17px; }
.ct-note.is-ok { color: var(--gold-hi); }
.ct-note.is-err { color: var(--red); border-color: var(--red); }

/* ---------- 404 i obican tekst ---------- */
.nf { text-align: center; }
.nf img { width: 140px; margin: 0 auto 20px; opacity: .85; }
.txt-body { color: #cbb68f; font-size: 18px; line-height: 1.6; padding: 0 calc(var(--u) * 60); }

/* ======================================================================
   Mobilni (Mobile.psd, 2172 px sirine): traka sa slikom, veliki logo,
   crni stub 86 % sirine, teksture sa strane koje se tope u crno pri vrhu.
   ====================================================================== */
@media (max-width: 820px) {
	:root { --col: 86.2%; }  /* 1872 / 2172 */

	.hd-art img { width: 102%; max-width: none; margin-left: -1%; margin-top: -1.4vw; }
	.hd-logo, body:not(.is-compact) .hd-logo, .is-compact .hd-logo {
		left: 13.35%; top: 6.8vw; width: 73.3%; height: auto; transform: none;
	}
	body:not(.is-compact) .hd-logo img { opacity: 1; width: 100%; height: auto; }

	.main, .is-compact .main { margin-top: 0; }
	.col, .is-compact .col { padding: 37vw 0 14vw; min-height: 60vh; }
	.is-compact .hd-strip { height: auto; object-fit: initial; width: 102%; max-width: none; margin-left: -1%; margin-top: -1.4vw; }

	.iv-search { width: 100%; min-width: 0; margin-bottom: 4vw; padding: 0 4vw; }
	.iv-search svg { left: calc(4vw + 13px); }
	.iv-search-count { right: calc(4vw + 12px); }
	.iv-search { margin-top: 0; }
	.iv-search input { font-size: 5vw; padding: 2vw 10vw; }
	.iv-list a { font-size: 5vw; padding: 3.4vw 4vw 3.8vw; line-height: 1.22; }
	.iv-list li + li::before { height: 2px; }
	.iv-empty { font-size: 6vw; }

	.iv-title { font-size: 6.6vw; padding: 0 4vw; margin-bottom: 5vw; }
	.iv-cover { width: 82%; }
	.iv-cover-cta { font-size: 5.4vw; }
	.iv-back { font-size: 6vw; margin-top: 8vw; }

	.ct { padding: 6vw 5vw 0; }
	.hd-acct { top: 2.5vw; right: 2.5vw; font-size: 15px; padding: 5px 11px; }
	.acc { padding: 4vw 4vw 0; min-width: 0; }
	.acc-title { font-size: 8vw; }
	.acc-sub { font-size: 7vw; margin-top: 12vw; }
	.ed-plans { gap: 8px; }
	.ct-f { margin-bottom: 5vw; }
	.ct-f span { font-size: 6.6vw; margin-bottom: 2vw; }
	.ct-send { font-size: 8vw; margin-top: 3vw; }

	.ft { padding: 10vw 16px 4vw; font-size: 4vw; }
	.ft-logo img { width: 40vw; }
	.ft-copy { margin: 3vw 0 4vw; }
	.ft-social { gap: 3vw; margin-bottom: 4vw; }
	.ft-social img { width: 12vw; }
	.ft-credit { margin-bottom: 4vw; }
	.ft-sigil { width: 14vw; }
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}