/* ============================================================================
   Temeljno — "The Verified Ledger"
   A trust-forward Croatian news portal. Editorial serif + transparency layer.
   ========================================================================== */

/* ============================================================================
   SELF-HOSTED FONTS — Fraunces + Inter (SIL OFL, see static/fonts/OFL-*.txt).
   Served locally (not Google Fonts) so no visitor IP is sent to a third party.
   Both latin and latin-ext subsets are included so Croatian diacritics
   (č ć š ž đ) render crisply. Variable woff2 (weight 100–900; Fraunces keeps its
   optical-size axis via font-optical-sizing:auto). font-display:swap as before.
   ========================================================================== */
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/fraunces-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;
}
@font-face{
  font-family:"Fraunces"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/fraunces-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:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/fraunces-italic-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;
}
@font-face{
  font-family:"Fraunces"; font-style:italic; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/fraunces-italic-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:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/inter-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;
}
@font-face{
  font-family:"Inter"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("/static/fonts/inter-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;
}

:root{
  /* Paper & ink */
  --bg:#f4f1ea;          /* warm newsprint */
  --bg-deep:#ece7db;     /* slightly deeper paper for fills */
  --panel:#ffffff;
  --ink:#15140f;         /* near-black, warm */
  --ink-soft:#3a3833;
  --muted:#76726a;
  --muted-2:#928d83;
  --line:#e3ddcf;        /* hairline */
  --line-strong:#d4ccb9;

  /* Brand */
  --accent:#b3122a;      /* Croatian red */
  --accent-dark:#820d1f;
  --accent-bright:#d6182f;
  --accent-wash:#fbeaec;

  /* Semantic */
  --ok:#0d6b46; --ok-bg:#e4f1ea; --ok-line:#bfe0cf;
  --warn:#8a5300; --warn-bg:#faedd4; --warn-line:#ecd6a8;
  --info:#274b6d; --info-bg:#e8eef4;

  /* Chips */
  --chip:#f0ece2; --chip-ink:#4a463e; --chip-line:#e0d9c8;

  --maxw:1220px;
  --read:760px;
  --radius:14px;
  --radius-sm:9px;
  --shadow:0 1px 2px rgba(20,16,8,.04), 0 10px 30px -12px rgba(20,16,8,.16);
  --shadow-lg:0 30px 70px -28px rgba(20,16,8,.42);

  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit; text-decoration:none}
img{max-width:100%; display:block}
::selection{background:var(--accent); color:#fff}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:3px}

/* ============================================================================
   HEADER
   ========================================================================== */
.site-header{background:var(--panel); border-bottom:1px solid var(--line)}

/* Utility strip */
.util{background:var(--ink); color:#efe9da}
.util-inner{display:flex; align-items:center; justify-content:space-between;
  padding:7px 22px; font-size:.74rem; letter-spacing:.02em}
.util-date{text-transform:uppercase; letter-spacing:.12em; color:#cdc6b5; font-weight:600}
.util-right{display:flex; align-items:center; gap:8px; color:#b7b0a0}
.live-dot{width:7px; height:7px; border-radius:50%; background:#1a9e57;
  box-shadow:0 0 0 0 rgba(26,158,87,.55); animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(26,158,87,.5)}
  70%{box-shadow:0 0 0 7px rgba(26,158,87,0)}100%{box-shadow:0 0 0 0 rgba(26,158,87,0)}}

/* Masthead */
.masthead{display:flex; align-items:center; justify-content:space-between; gap:22px;
  padding:20px 22px 18px}
.brand{display:inline-flex; align-items:baseline; gap:.5rem; line-height:1}
.brand-mark{
  width:.62em; height:.62em; border-radius:50%; background:var(--accent);
  display:inline-block; position:relative; top:.02em;
  box-shadow:0 0 0 4px var(--accent-wash);
}
.brand-name{font-family:var(--serif); font-weight:900; font-size:2.5rem;
  letter-spacing:-.018em; font-optical-sizing:auto}
.brand-sub{display:block; font-family:var(--sans); font-size:.7rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-top:6px}
.masthead-tag{flex:1; text-align:center; font-family:var(--serif); font-style:italic;
  font-size:1.02rem; color:var(--ink-soft); max-width:380px; margin:0 auto; line-height:1.4}
.masthead-actions{display:flex; align-items:center; gap:16px}
.ghost-link{font-weight:600; font-size:.86rem; color:var(--ink-soft); white-space:nowrap}
.ghost-link:hover{color:var(--accent)}

/* Section nav (sticky) */
.sections-bar{position:sticky; top:0; z-index:40; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-top:1px solid var(--line);
  border-bottom:2px solid var(--ink)}
.sections-inner{display:flex; flex-wrap:nowrap; gap:2px; overflow-x:auto;
  scrollbar-width:none; padding:0 22px}
.sections-inner::-webkit-scrollbar{display:none}
.sec-link{position:relative; color:var(--ink-soft); font-size:.83rem; font-weight:600;
  padding:13px 14px; white-space:nowrap; border-bottom:3px solid transparent; margin-bottom:-2px}
.sec-link:hover{color:var(--accent)}
.sec-link.active{color:var(--accent); border-bottom-color:var(--accent)}

/* ============================================================================
   PAGE SCAFFOLD
   ========================================================================== */
main.wrap{min-height:64vh; padding-top:30px; padding-bottom:56px}

.section-head{display:flex; align-items:baseline; gap:14px; margin:6px 0 22px}
.section-head h1{font-family:var(--serif); font-weight:800; font-size:1.75rem;
  letter-spacing:-.01em; margin:0; line-height:1.1}
.section-head .rule{flex:1; height:1px; background:var(--line-strong)}
.section-kicker{font-size:.72rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--accent)}

/* ============================================================================
   TRUST LEDGER (signature motif) — badges & chips
   ========================================================================== */
.ledger{display:flex; flex-wrap:wrap; align-items:center; gap:7px}
.badge{display:inline-flex; align-items:center; gap:5px; font-size:.71rem; font-weight:700;
  padding:4px 9px; border-radius:7px; white-space:nowrap; line-height:1.2; letter-spacing:.01em}
.badge svg{width:12px; height:12px}
.badge-section{background:var(--accent); color:#fff; text-transform:uppercase;
  letter-spacing:.06em; border-radius:5px}
.badge-ok{background:var(--ok-bg); color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok-line)}
.badge-warn{background:var(--warn-bg); color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn-line)}
.badge-pending{background:var(--warn-bg); color:var(--warn); box-shadow:inset 0 0 0 1px var(--warn-line)}
.badge-count{background:var(--ink); color:#fff}
.badge-muted{background:var(--chip); color:var(--muted); box-shadow:inset 0 0 0 1px var(--chip-line)}

.chip{display:inline-flex; align-items:center; font-size:.71rem; font-weight:600;
  background:var(--chip); color:var(--chip-ink); padding:3px 9px; border-radius:6px;
  white-space:nowrap; box-shadow:inset 0 0 0 1px var(--chip-line)}
.chip-sm{font-size:.67rem; padding:2px 7px}
.chip-outlet{background:var(--ink); color:#fff; box-shadow:none}

/* ============================================================================
   HOME — lead hero
   ========================================================================== */
.lead{display:grid; grid-template-columns:1.35fr 1fr; gap:0; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow); margin-bottom:34px}
.lead .media{position:relative; min-height:340px}
.lead .lead-body{padding:34px 36px; display:flex; flex-direction:column; justify-content:center}
.lead-rank{font-family:var(--serif); font-weight:900; font-size:.8rem; color:var(--accent);
  letter-spacing:.16em; text-transform:uppercase; margin-bottom:12px; display:flex;
  align-items:center; gap:8px}
.lead-rank::before{content:""; width:22px; height:2px; background:var(--accent)}
.lead-headline{font-family:var(--serif); font-weight:800; font-size:2.3rem; line-height:1.08;
  letter-spacing:-.018em; margin:0 0 14px}
.lead-headline a:hover{color:var(--accent)}
.lead-dek{color:var(--ink-soft); font-size:1.04rem; line-height:1.55; margin:0 0 18px;
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.lead .ledger{margin-bottom:0}

/* Rotating hero — a single hero that auto-cycles the top "Najvažnije danas"
   stories. The track has a CONSTANT height so slides never shift the layout;
   slides crossfade (all absolutely positioned, stacked), and the prev/next
   arrows + dots are overlaid on the hero itself. */
.hero{margin-bottom:30px}
.hero-track{position:relative; height:440px; background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.hero-slide{display:grid; grid-template-columns:1.35fr 1fr; gap:0;
  position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .55s ease}
.hero-slide.is-active{opacity:1; visibility:visible; pointer-events:auto}
.hero-slide .media{position:relative; height:100%}
.hero-slide .lead-body{padding:34px 40px; display:flex; flex-direction:column;
  justify-content:center; overflow:hidden; min-height:0}
/* No line-clamp here: the hero headline is auto-fit by JS (see base.html) so the
   full text always fits without an ellipsis. */
.hero-slide .lead-headline{overflow:hidden}
.hero-slide .lead-dek{-webkit-line-clamp:3}
.hero-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:42px; height:42px; border-radius:50%; border:1px solid var(--line);
  background:rgba(244,241,234,.92); color:var(--ink); font-size:1.5rem; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow);
  transition:background .15s, border-color .15s, color .15s}
.hero-prev{left:16px}
.hero-next{right:16px}
.hero-arrow:hover{background:var(--accent); border-color:var(--accent); color:#fff}
.hero-dots{position:absolute; left:50%; bottom:16px; transform:translateX(-50%); z-index:3;
  display:flex; align-items:center; gap:9px; padding:8px 13px; border-radius:999px;
  background:rgba(244,241,234,.88); box-shadow:var(--shadow)}
.hero-dot{width:9px; height:9px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:var(--line-strong); transition:background .15s, transform .15s}
.hero-dot:hover{background:var(--muted)}
.hero-dot.is-active{background:var(--accent); transform:scale(1.3)}

/* Media with graceful fallback */
.media{position:relative; background:linear-gradient(135deg,#2a2722,#15140f); overflow:hidden}
.media img{width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s ease}
.media--failed img{display:none}
.media::after{content:"●"; position:absolute; inset:0; display:none; align-items:center;
  justify-content:center; color:rgba(214,24,47,.5); font-size:3rem}
.media--failed::after{display:flex}

/* ============================================================================
   HOME — layout grid
   ========================================================================== */
.home{display:block}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:30px}
.topic-section{margin-top:38px}
.topic-section .section-head h2{font-family:var(--serif); font-weight:800; font-size:1.5rem;
  letter-spacing:-.01em; margin:0; line-height:1.1}
.topic-section .section-head h2 a:hover{color:var(--accent)}

.card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; transition:box-shadow .2s, transform .2s, border-color .2s;
  display:flex; flex-direction:column}
.card:hover{box-shadow:var(--shadow); transform:translateY(-3px); border-color:var(--line-strong)}
.card:hover .media img{transform:scale(1.04)}
.card .media{aspect-ratio:16/9}
.card-body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1}
.card-rank{font-family:var(--serif); font-weight:900; color:var(--accent); font-size:.78rem;
  letter-spacing:.08em}
.card-headline{font-family:var(--serif); font-weight:700; font-size:1.24rem; line-height:1.2;
  letter-spacing:-.01em; margin:6px 0 8px}
.card-dek{color:var(--ink-soft); font-size:.92rem; line-height:1.5; margin:0 0 12px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card .ledger{margin-top:auto}

/* Split section: 2x2 large cards on the left + ONE condensed box on the right
   (max 8 condensed items). On desktop the box stretches to the full height of
   the card block; items sit at the top with empty space below (no item
   stretching). On mobile it stacks and shrinks to its real content height. */
.split-section{display:grid; grid-template-columns:2fr 1fr; gap:20px; margin-bottom:30px;
  align-items:stretch}
.split-main{display:grid; grid-template-columns:repeat(2,1fr); gap:20px}
/* Single condensed box: on desktop it stretches to the full height of the card
   block, with items top-aligned and empty space below (no item stretching). */
.mini-list{display:flex; flex-direction:column; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  box-shadow:var(--shadow)}
.mini-item{display:flex; gap:12px; padding:10px 14px; align-items:center;
  border-bottom:1px solid var(--line); transition:background .15s}
.mini-item:last-child{border-bottom:0}
.mini-item:hover{background:var(--bg-deep)}
.mini-thumb{flex-shrink:0; width:74px; height:56px; border-radius:var(--radius-sm);
  overflow:hidden; aspect-ratio:auto}
.mini-thumb img{width:100%; height:100%; object-fit:cover}
.mini-body{display:flex; flex-direction:column; gap:4px; min-width:0}
.mini-sec{font:700 .64rem/1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent)}
.mini-head{font:600 .96rem/1.3 var(--serif); color:var(--ink); overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.mini-item:hover .mini-head{color:var(--accent-dark)}

/* ============================================================================
   STORY PAGE
   ========================================================================== */
.crumbs{display:flex; align-items:center; gap:9px; font-size:.82rem; color:var(--muted);
  margin-bottom:18px}
.crumbs a:hover{color:var(--accent)}
.crumbs .sep{color:var(--line-strong)}

.story-layout{display:block}
.article{min-width:0; max-width:var(--read); margin:0 auto}
.story-kicker{font-size:.74rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px}
.story-headline{font-family:var(--serif); font-weight:800; font-size:2.5rem; line-height:1.09;
  letter-spacing:-.02em; margin:0 0 16px}
.story-flags{margin-bottom:22px}
.story-hero{margin:0 0 26px}
.story-hero .media{aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)}
.story-caption{font-size:.76rem; color:var(--muted); margin:8px 0 0; padding-left:2px}
.story-caption a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.story-caption a:hover{color:var(--accent)}

/* "Foto: <outlet>" corner overlay on home/section/hero card images */
.photo-credit{position:absolute; left:0; bottom:0; z-index:2; max-width:85%;
  font:600 .62rem/1 var(--sans); letter-spacing:.02em; color:#fff;
  background:rgba(20,18,14,.72); padding:4px 7px; border-top-right-radius:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; pointer-events:none}
.media--failed .photo-credit{display:none}
/* Original Temeljno illustration credit — crimson tint so readers can tell our
   own art apart from a borrowed outlet photo at a glance. */
.photo-credit--ill{background:rgba(179,18,42,.86)}
.story-caption--ill{color:var(--accent); font-weight:700}

/* AI-provenance colophon — a quiet note at the foot of every story explaining
   the article is AI-assembled from the cited sources, with links to O projektu
   and the contact channel for corrections. Human-visible text, understated. */
.article-colophon{margin-top:34px; padding-top:16px; border-top:1px solid var(--line);
  font-size:.8rem; line-height:1.6; color:var(--muted)}
.article-colophon p{margin:0}
.article-colophon a{color:var(--muted); text-decoration:underline; text-underline-offset:2px}
.article-colophon a:hover{color:var(--accent)}

.lead-para{font-family:var(--serif); font-size:1.32rem; line-height:1.5; color:var(--ink);
  margin:0 0 8px; font-weight:400}

/* "prvi objavio" (first-published) marker shown on the earliest source in the
   merged "Izvori" list. */
.coverage-tag{font-family:var(--sans); font-size:.62rem; font-weight:800;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  background:var(--accent-wash); padding:2px 7px; border-radius:5px}
/* Byline of the source article ("Autor: …"), shown in the detailed Izvori list.
   Cleaned to a human name (contact emails reduced/dropped); wire bylines like
   HINA kept; omitted when the feed gives none. */
.source-author{color:var(--muted); font-weight:600}
.source-author::before{content:"·"; margin-right:8px; color:var(--line-strong); font-weight:400}

/* Up-front source strip: compact NAME-ONLY chips just under the hero that link
   straight to each outlet's original article. Distinct from the detailed bottom
   "Izvori" list (titles + byline + time); this is the at-a-glance "who is this
   from, take me to the source" row, ordered earliest-first so the originator
   leads. */
.source-strip{display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin:0 0 22px; padding-bottom:18px; border-bottom:1px solid var(--line)}
.source-strip-label{font-family:var(--sans); font-size:.66rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.source-strip-list{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
/* Each item pairs a dark outlet chip (the link) with an optional crimson
   "prvi objavio" tag — the SAME chip + .coverage-tag pairing used in the
   detailed Izvori list below, so both source areas read as one family. */
.source-strip-list li{display:inline-flex; align-items:center; gap:6px}
.source-pill{display:inline-flex; align-items:center; font-family:var(--sans);
  font-size:.76rem; font-weight:600; color:#fff; background:var(--ink);
  border-radius:6px; padding:4px 11px; white-space:nowrap;
  transition:background-color .12s}
.source-pill:hover{background:var(--accent-dark)}

/* Key points ("Ključno") — at-a-glance summary box */
.keypoints{margin:22px 0 4px; padding:18px 20px 16px; background:var(--panel);
  border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--radius-sm); box-shadow:var(--shadow)}
.keypoints-label{display:flex; align-items:center; gap:7px; font-family:var(--sans);
  font-size:.72rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--accent); margin-bottom:12px}
.keypoints-label svg{width:14px; height:14px}
.keypoints-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.keypoints-list li{position:relative; padding-left:22px; font-size:1rem; line-height:1.5;
  color:var(--ink); font-weight:500}
.keypoints-list li::before{content:""; position:absolute; left:3px; top:.62em; width:6px; height:6px;
  border-radius:50%; background:var(--accent)}

/* Flowing article body */
.article-body{margin-top:18px; scroll-margin-top:64px}
.article-body p{font-size:1.07rem; line-height:1.78; color:var(--ink-soft); margin:0 0 18px}
.article-body p:last-child{margin-bottom:0}

/* Inline emphasis — the single most important fact per paragraph */
.key-fact{font-weight:700; color:var(--ink)}

/* Inline source-attribution links */
.src-link{color:var(--accent-dark); font-weight:600; text-decoration:none;
  border-bottom:1px solid rgba(179,18,42,.32); transition:color .12s, border-color .12s}
.src-link:hover{color:var(--accent); border-bottom-color:var(--accent)}
.chip-outlet .src-link, .chip-outlet a.src-link{color:#fff; font-weight:600;
  border-bottom-color:rgba(255,255,255,.45)}
.chip-outlet .src-link:hover{color:#fff; border-bottom-color:#fff}

/* Source-attribution hint above the article */
.src-hint{font-family:var(--sans); font-size:.8rem; color:var(--muted);
  margin:0 0 18px; padding-left:14px; border-left:2px solid var(--line)}

/* Whole-sentence source attribution: highlight + reveal-on-hover popup */
.claim-sent{position:relative; cursor:help; outline:none; border-radius:3px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-color .12s}
.claim-sent:focus, .claim-sent:focus-within{
  background-color:rgba(179,18,42,.10)}
.claim-text{display:inline}
.claim-pop{position:absolute; left:0; top:calc(100% + 7px); z-index:40;
  display:none; min-width:160px; max-width:300px; padding:11px 12px 8px;
  background:#fff; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 12px 32px rgba(20,16,12,.18); white-space:normal;
  cursor:auto}
.claim-sent:focus .claim-pop,
.claim-sent:focus-within .claim-pop{display:block}
/* Hover-reveal only on pointer devices. On touch, emulated :hover "sticks"
   after a tap and would keep the popup open even after focus is cleared, so the
   touch popup is focus-driven only (the ×/outside-tap/Esc reliably clear it). */
@media (hover: hover){
  .claim-sent:hover{background-color:rgba(179,18,42,.10)}
  .claim-sent:hover .claim-pop{display:block}
}
.claim-pop-label{display:block; font-family:var(--sans); font-size:.62rem;
  font-weight:800; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px}
.src-chip{display:inline-flex; align-items:center; gap:4px; margin:0 5px 5px 0;
  padding:4px 9px; font-family:var(--sans); font-size:.78rem; font-weight:600;
  color:var(--ink); text-decoration:none; background:var(--panel);
  border:1px solid var(--line); border-radius:7px;
  transition:border-color .12s, color .12s}
.src-chip::after{content:"↗"; font-size:.72rem; color:var(--muted)}
.src-chip:hover{color:var(--accent-dark); border-color:var(--accent)}
/* Explicit close control inside the popup. On pointer devices the popup
   dismisses by moving the mouse away, so the button is hidden there and only
   shown on touch (@media hover:none), where there is no hover-out gesture. */
.claim-pop-close{display:none; position:absolute; top:4px; right:4px;
  width:28px; height:28px; padding:0; margin:0; border:0; border-radius:7px;
  background:transparent; color:var(--muted); cursor:pointer;
  font-family:var(--sans); font-size:1.35rem; line-height:1;
  align-items:center; justify-content:center;
  transition:color .12s, background-color .12s}
.claim-pop-close:hover, .claim-pop-close:focus{color:var(--accent-dark);
  background:var(--panel); outline:none}
@media (hover: none){.claim-pop-close{display:inline-flex}}

.block{margin-top:34px; scroll-margin-top:64px}
.block-title{font-family:var(--serif); font-size:1.3rem; font-weight:700; letter-spacing:-.01em;
  margin:0 0 14px; padding-bottom:9px; border-bottom:2px solid var(--ink);
  display:flex; align-items:baseline; gap:10px}
.block-hint{font-family:var(--sans); font-size:.76rem; font-weight:500; letter-spacing:0;
  text-transform:none; color:var(--muted)}
/* Cross-check verification badge in the merged "Izvori" heading; pushed to the
   trailing edge so the trust signal sits opposite the title. */
.source-verify{margin-left:auto; align-self:center}
.block p{font-size:1.03rem; line-height:1.7; color:var(--ink-soft); margin:0 0 14px}

/* Facts (known / disputed) */
.facts{list-style:none; margin:0; padding:0}
.facts li{padding:14px 0 14px 30px; border-bottom:1px solid var(--line); position:relative}
.facts li::before{content:""; position:absolute; left:2px; top:18px; width:15px; height:15px;
  border-radius:50%; background:var(--ok-bg);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d6b46' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size:11px; background-repeat:no-repeat; background-position:center;
  box-shadow:inset 0 0 0 1px var(--ok-line)}
.facts li:last-child{border-bottom:0}
.fact-text{display:block; font-size:1.01rem; line-height:1.55; margin-bottom:8px}
.fact-src{display:flex; flex-wrap:wrap; gap:5px}
.disputed-body p{font-size:1.03rem; line-height:1.72; color:var(--ink-soft); margin:0 0 14px}
.disputed-body p:last-child{margin-bottom:0}
.block-disputed .block-title{border-bottom-color:var(--warn)}
.block-disputed .facts li::before{background-color:var(--warn-bg); box-shadow:inset 0 0 0 1px var(--warn-line);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a5300' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E")}

/* Sources */
/* Narrative cue under the "Izvori" heading: Temeljno is an orientation layer,
   the full story lives at the source. */
.source-lead{font-family:var(--sans); font-size:.9rem; color:var(--muted); margin:-4px 0 14px}
.source-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.source-list li{border:1px solid var(--line); border-radius:11px; transition:border-color .15s, box-shadow .15s; background:var(--panel)}
.source-list li:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.source-link{display:flex; align-items:center; gap:14px; padding:14px 16px}
.source-glyph{width:38px; height:38px; border-radius:9px; background:var(--ink); color:#fff;
  display:grid; place-items:center; font-family:var(--serif); font-weight:900; font-size:1.05rem;
  flex-shrink:0; text-transform:uppercase}
.source-main{flex:1; min-width:0}
.source-title{font-weight:600; font-size:.98rem; line-height:1.35; color:var(--ink); margin:0 0 4px}
.source-list li:hover .source-title{color:var(--accent-dark)}
.source-meta{display:flex; align-items:center; gap:8px; font-size:.77rem; color:var(--muted)}
.source-arrow{color:var(--muted); flex-shrink:0; transition:transform .15s, color .15s}
.source-arrow svg{width:18px; height:18px}
.source-list li:hover .source-arrow{color:var(--accent); transform:translateX(3px)}

.transparency{margin-top:40px; padding:18px 20px; background:var(--bg-deep);
  border:1px solid var(--line); border-radius:11px; color:var(--ink-soft); font-size:.86rem;
  line-height:1.6; display:flex; gap:12px; align-items:flex-start}
.transparency svg{width:18px; height:18px; color:var(--accent); flex-shrink:0; margin-top:2px}
code{background:#15140f12; padding:1.5px 6px; border-radius:5px; font-size:.85em;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

/* ============================================================================
   ABOUT
   ========================================================================== */
.about{max-width:var(--read); margin:0 auto}
.about h1{font-family:var(--serif); font-weight:800; font-size:2.4rem; letter-spacing:-.02em;
  line-height:1.1; margin:0 0 8px}
.about .sub{font-size:1.1rem; color:var(--muted); margin:0 0 30px; font-family:var(--serif);
  font-style:italic}
.about h2{font-family:var(--serif); font-weight:700; font-size:1.4rem; margin:34px 0 12px;
  padding-bottom:8px; border-bottom:2px solid var(--ink)}
.about p{font-size:1.03rem; line-height:1.75; color:var(--ink-soft); margin:0 0 14px}

/* Private /stats page — anonymous aggregate page-open counts. */
.stats .stat-cards{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:6px 0 12px}
.stat-card{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; display:flex; flex-direction:column; gap:6px}
.stat-num{font-family:var(--serif); font-weight:900; font-size:2.3rem; color:var(--accent); line-height:1}
.stat-lbl{font-size:.86rem; color:var(--muted)}
.stat-table{width:100%; border-collapse:collapse; margin:0 0 8px; font-size:.95rem}
.stat-table th{text-align:left; font-size:.74rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:700; padding:8px 10px; border-bottom:2px solid var(--line-strong)}
.stat-table td{padding:9px 10px; border-bottom:1px solid var(--line); color:var(--ink-soft); vertical-align:top}
.stat-table td a{color:var(--ink); text-decoration:none; border-bottom:1px solid transparent}
.stat-table td a:hover{color:var(--accent); border-bottom-color:var(--accent)}
.stat-table .num{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;
  font-weight:700; color:var(--ink); width:1%}
.stat-aged{color:var(--muted); font-size:.82rem}
.stat-empty{color:var(--muted); font-style:italic}
@media (max-width:640px){ .stats .stat-cards{grid-template-columns:1fr} }
.steps{display:grid; gap:14px; margin:18px 0; padding:0; list-style:none; counter-reset:s}
.steps li{counter-increment:s; display:grid; grid-template-columns:auto 1fr; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:11px; padding:16px 18px}
.steps li::before{content:counter(s); font-family:var(--serif); font-weight:900; font-size:1.4rem;
  color:var(--accent); width:34px; height:34px; border-radius:9px; background:var(--accent-wash);
  display:grid; place-items:center}
.steps strong{display:block; margin-bottom:3px}
.steps span{font-size:.95rem; color:var(--ink-soft)}
.source-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:10px;
  margin:18px 0; padding:0; list-style:none}
.source-grid li{display:flex; align-items:center; gap:11px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; transition:border-color .15s}
.source-grid li:hover{border-color:var(--accent)}
.source-grid .source-glyph{width:32px; height:32px; font-size:.92rem; border-radius:8px}
.source-grid .nm{font-weight:600; font-size:.9rem; line-height:1.2}

/* ============================================================================
   EMPTY / 404
   ========================================================================== */
.empty{background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:64px 32px; text-align:center; max-width:var(--read); margin:18px auto}
.empty-mark{font-family:var(--serif); font-weight:900; font-size:3.4rem; color:var(--accent);
  line-height:1; margin-bottom:14px}
.empty h1{font-family:var(--serif); font-weight:800; font-size:1.9rem; margin:0 0 10px}
.empty p{color:var(--muted); font-size:1rem; margin:0 auto 18px; max-width:46ch}
.btn{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#fff;
  font-weight:700; font-size:.9rem; padding:11px 20px; border-radius:10px; transition:background .15s}
.btn:hover{background:var(--accent-dark)}

/* Section pager (older/newer page navigation) */
.pager{display:flex; align-items:center; justify-content:center; gap:16px; margin:14px 0 40px}
.pager-page{font-family:var(--serif); font-weight:700; color:var(--muted); font-size:.95rem}
.pager-link.is-disabled{background:var(--line); color:var(--muted); cursor:default; pointer-events:none}

/* ============================================================================
   FOOTER
   ========================================================================== */
.site-footer{background:var(--ink); color:#b7b0a0; padding:44px 0 38px; margin-top:30px;
  font-size:.86rem}
.foot-top{display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px;
  padding-bottom:24px; border-bottom:1px solid rgba(255,255,255,.12); margin-bottom:22px}
.foot-brand .brand-name{color:#fff; font-size:1.7rem}
.foot-brand .brand-mark{box-shadow:0 0 0 4px rgba(214,24,47,.22)}
.foot-tag{margin:10px 0 0; max-width:340px; line-height:1.5; color:#cfc8b8;
  font-family:var(--serif); font-style:italic}
.foot-note{max-width:440px; line-height:1.6}
.foot-note strong{color:#efe9da}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; color:#8d877a}
.site-footer a{color:#efe9da; text-decoration:underline; text-underline-offset:2px}
.site-footer a:hover{color:#fff}
.site-footer code{background:rgba(255,255,255,.12); color:#efe9da}

/* ============================================================================
   MOTION
   ========================================================================== */
.reveal{opacity:0; transform:translateY(14px)}
.reveal.in{opacity:1; transform:none; transition:opacity .5s ease, transform .5s ease}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .reveal{opacity:1; transform:none}
}

/* ============================================================================
   SHARE BUTTON
   ========================================================================== */
.share-btn{
  display:inline-flex; align-items:center; gap:7px;
  margin-left:auto; padding:7px 13px;
  font:600 .78rem/1 var(--sans); color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--line-strong);
  border-radius:999px; cursor:pointer;
  transition:border-color .15s ease, color .15s ease, background .15s ease, transform .12s ease;
}
.share-btn svg{width:15px; height:15px}
.share-btn:hover{border-color:var(--accent); color:var(--accent); transform:translateY(-1px)}
.share-btn.is-done{border-color:var(--ok-line); color:var(--ok); background:var(--ok-bg)}

/* ============================================================================
   RELATED STORIES
   ========================================================================== */
.related .block-title{margin-bottom:18px}
.related-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.related-card{
  display:flex; flex-direction:column;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius-sm); overflow:hidden;
  transition:border-color .15s ease, box-shadow .2s ease, transform .15s ease;
}
.related-card:hover{border-color:var(--line-strong); box-shadow:var(--shadow); transform:translateY(-2px)}
.related-thumb{aspect-ratio:16/10; background:var(--bg-deep)}
.related-thumb img{width:100%; height:100%; object-fit:cover}
.related-body{display:flex; flex-direction:column; gap:7px; padding:13px 14px 15px}
.related-sec{
  font:700 .66rem/1 var(--sans); letter-spacing:.07em; text-transform:uppercase;
  color:var(--accent);
}
.related-head{
  font:600 1rem/1.32 var(--serif); color:var(--ink);
}
.related-card:hover .related-head{color:var(--accent-dark)}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
/* Never let anything force a horizontal scrollbar on small screens */
.article-body p, .block p, .disputed-body p, .keypoints-list li,
.source-title, .lead-dek, .card-dek, .foot-note{overflow-wrap:anywhere}

@media(max-width:980px){
  .feature-grid{grid-template-columns:repeat(2,1fr)}
  .related-grid{grid-template-columns:repeat(2,1fr)}
  .masthead-tag{display:none}
  /* Split: the condensed box drops below the 2x2 card block */
  .split-section{grid-template-columns:1fr}
  /* An empty box (section with <=4 stories) is shown on desktop but hidden on
     mobile, where the box should reflect the real story count (0 = nothing). */
  .mini-list--empty{display:none}
}
@media(max-width:760px){
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .lead{grid-template-columns:1fr}
  .lead .media{min-height:200px; aspect-ratio:16/9}
  /* Hero stays a single constant-height block: media row on top, text below.
     Fixed track height keeps the layout from jumping as slides change. */
  .hero-track{height:500px}
  .hero-slide{grid-template-columns:1fr; grid-template-rows:210px 1fr}
  .hero-slide .media{min-height:0; height:auto; aspect-ratio:auto}
  .lead-headline{font-size:1.7rem}
  .lead .lead-body{padding:24px}
  .hero-slide .lead-body{padding:18px 22px}
  .hero-slide .lead-dek{-webkit-line-clamp:2}
  .hero-arrow{width:36px; height:36px; font-size:1.3rem}
  .hero-prev{left:10px}
  .hero-next{right:10px}
  .hero-dots{bottom:12px}
  .feature-grid{grid-template-columns:1fr}
  .split-main{grid-template-columns:1fr}
  .masthead{flex-wrap:wrap; gap:14px; padding:16px 22px}
  .brand-name{font-size:2rem}
  .story-headline{font-size:1.85rem}
  .about h1{font-size:1.95rem}
  .empty h1{font-size:1.6rem}
  .lead-para{font-size:1.15rem}
  .util-date{font-size:.68rem}

  /* Source popup: a bottom sheet on phones so it never overflows the viewport
     when the anchoring sentence sits near the right edge of a line. */
  .claim-pop{position:fixed; left:12px; right:12px; top:auto; bottom:12px;
    min-width:0; max-width:none; padding:14px 14px 9px;
    max-height:50vh; overflow-y:auto;
    box-shadow:0 -8px 40px rgba(20,16,12,.26)}
  .src-chip{padding:7px 11px; font-size:.82rem}
  .claim-pop-close{top:7px; right:7px; width:36px; height:36px; font-size:1.6rem}
}
@media(max-width:480px){
  .wrap{padding:0 16px}
  .util-inner{padding:7px 16px}
  .masthead{padding:14px 16px}
  .sections-inner{padding:0 16px}
  .brand-name{font-size:1.78rem}
  .story-headline{font-size:1.58rem}
  .lead-headline{font-size:1.5rem}
  .section-head h1{font-size:1.45rem}
  .topic-section .section-head h2{font-size:1.3rem}
  .about h1{font-size:1.7rem}
  .article-body p{font-size:1.02rem}
  .lead .lead-body{padding:22px 20px}
  .empty{padding:48px 22px}
}

/* ── Shutdown notices: slim banner (story/section) + first-visit overlay (home) ── */
.shutdown-banner{background:var(--accent); color:#fff}
.hide-shutdown-banner .shutdown-banner{display:none}
/* The home page's banner is persistent: it ignores the stored dismissal. */
.hide-shutdown-banner .shutdown-banner--persistent{display:block}
.shutdown-banner-inner{
  max-width:var(--maxw); margin:0 auto; padding:9px 22px;
  display:flex; align-items:center; gap:8px 16px;
  font-size:.88rem; line-height:1.4;
}
.shutdown-banner-text{flex:1; min-width:0}
.shutdown-banner-text strong{font-weight:800}
.shutdown-banner-link{
  color:#fff; font-weight:700; white-space:nowrap;
  text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px;
}
.shutdown-banner-link:hover{opacity:.82}
.shutdown-banner-close{
  flex:none; background:transparent; border:0; color:#fff; cursor:pointer;
  font-size:1.35rem; line-height:1; padding:0 2px; opacity:.85;
}
.shutdown-banner-close:hover{opacity:1}
@media(max-width:560px){
  .shutdown-banner-inner{flex-wrap:wrap; padding:8px 16px}
  .shutdown-banner-text{flex:1 0 100%}
}

.shutdown-overlay{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(21,20,15,.62); backdrop-filter:blur(3px);
  animation:shutdownFade .24s ease both;
}
.hide-shutdown-overlay .shutdown-overlay{display:none}
@keyframes shutdownFade{from{opacity:0}to{opacity:1}}
.shutdown-modal{
  position:relative; width:100%; max-width:520px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-lg); padding:38px 34px 32px;
  animation:shutdownRise .28s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes shutdownRise{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
.shutdown-modal-kicker{
  font-family:var(--sans); font-size:.72rem; font-weight:800;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent); margin-bottom:12px;
}
.shutdown-modal h2{
  font-family:var(--serif); font-weight:800; font-size:2rem; line-height:1.08;
  letter-spacing:-.02em; margin:0 0 14px; color:var(--ink);
}
.shutdown-modal p{color:var(--ink-soft); font-size:1.02rem; line-height:1.6; margin:0 0 24px}
.shutdown-modal-actions{display:flex; flex-wrap:wrap; gap:12px}
.shutdown-btn{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:700; font-size:.94rem;
  padding:12px 22px; border-radius:10px; cursor:pointer;
  border:1px solid transparent; transition:background .15s, border-color .15s, color .15s;
}
.shutdown-btn--primary{background:var(--accent); color:#fff}
.shutdown-btn--primary:hover{background:var(--accent-dark)}
.shutdown-btn--ghost{background:transparent; color:var(--ink-soft); border-color:var(--line-strong)}
.shutdown-btn--ghost:hover{border-color:var(--accent); color:var(--accent)}
.shutdown-modal-close{
  position:absolute; top:12px; right:14px;
  background:transparent; border:0; color:var(--muted); cursor:pointer;
  font-size:1.5rem; line-height:1; padding:4px 8px;
}
.shutdown-modal-close:hover{color:var(--accent)}
@media(max-width:560px){
  .shutdown-modal{padding:30px 22px 26px}
  .shutdown-modal h2{font-size:1.62rem}
  .shutdown-btn{flex:1 0 100%}
}
@media(prefers-reduced-motion:reduce){
  .shutdown-overlay,.shutdown-modal{animation:none}
}