:root {
  --hue: 205;
  --accent: hsl(var(--hue) 92% 62%);
  --accent-hi: hsl(calc(var(--hue) + 15) 92% 72%);
  --accent-soft: hsl(var(--hue) 88% 60% / .15);
  --accent-faint: hsl(var(--hue) 86% 60% / .065);
  --accent-2: hsl(calc(var(--hue) + 8) 82% 80%);
  --bg: #030912;
  --bg-2: #06111d;
  --bg-3: #091827;
  --panel: rgb(8 23 36 / .80);
  --panel-strong: #0a1b2b;
  --text: #f5f9ff;
  --muted: #9eb2c7;
  --muted-2: #71889f;
  --line: hsl(var(--hue) 70% 82% / .16);
  --line-strong: hsl(var(--hue) 74% 84% / .28);
  --danger: #f49a9a;
  --header-h: 76px;
  --max: 1240px;
  --radius: 20px;
  --radius-sm: 13px;
  --shadow: 0 28px 90px rgb(0 0 0 / .33);
  --mx: 65%;
  --my: 20%;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 18% -10%, var(--accent-soft), transparent 35rem),
    radial-gradient(circle at 94% 8%, hsl(calc(var(--hue) + 28) 88% 60% / .075), transparent 30rem),
    linear-gradient(180deg, #030912 0%, #06111b 48%, #030912 100%);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.62;
  overflow-x: hidden;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgb(255 255 255 / .018) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / .018) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at var(--mx) var(--my), var(--accent-faint), transparent 24rem);
}
a { color: inherit; }
button, input { font: inherit; }
img, svg, canvas { max-width: 100%; }
[hidden] { display: none !important; }

.skip-link {
  position: fixed;
  top: -80px;
  left: 18px;
  z-index: 9999;
  padding: .74rem 1rem;
  border-radius: 999px;
  background: var(--accent);
  color: #001517;
  text-decoration: none;
  font-weight: 900;
}
.skip-link:focus { top: 16px; }

.shell { width: min(calc(100% - 34px), var(--max)); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-h);
  border-bottom: 1px solid rgb(255 255 255 / .055);
  background: rgb(5 11 16 / .82);
  backdrop-filter: blur(18px) saturate(135%);
}
.nav-row {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  text-decoration: none;
  font-size: .83rem;
  font-weight: 950;
  letter-spacing: .18em;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid hsl(var(--hue) 78% 61% / .5);
  display: grid;
  place-items: center;
  color: var(--accent);
  background: linear-gradient(145deg, hsl(var(--hue) 80% 60% / .12), rgb(255 255 255 / .02));
  box-shadow: inset 0 0 22px hsl(var(--hue) 80% 60% / .05);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-sub { color: var(--muted-2); font-weight: 700; letter-spacing: .08em; }

.nav-cluster { display: flex; align-items: center; gap: 10px; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a,
.utility-button,
.menu-toggle {
  border: 0;
  color: var(--muted);
  background: transparent;
  text-decoration: none;
  padding: .66rem .82rem;
  border-radius: 999px;
  font-size: .91rem;
  font-weight: 800;
  cursor: pointer;
}
.site-nav a:hover,
.site-nav a[aria-current="page"],
.utility-button:hover,
.menu-toggle:hover { color: var(--text); background: rgb(255 255 255 / .055); }
.nav-substack { border: 1px solid hsl(var(--hue) 70% 58% / .35) !important; color: var(--accent) !important; }
.utility-button { display: inline-grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 1px solid var(--line); }
.utility-button svg { width: 18px; height: 18px; }
.menu-toggle { display: none; border: 1px solid var(--line); }

.hero {
  position: relative;
  padding: clamp(70px, 8.5vw, 128px) 0 54px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(420px, .94fr);
  align-items: center;
  gap: clamp(42px, 7vw, 92px);
}
.eyebrow {
  margin: 0 0 18px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .21em;
  font-weight: 950;
  font-size: .75rem;
}
.hero-title,
.page-title {
  margin: 0;
  max-width: 900px;
  font-size: clamp(3.55rem, 7.5vw, 7.45rem);
  line-height: .9;
  letter-spacing: -.067em;
  text-wrap: balance;
}
.hero-title .accent,
.hero-title-reflection .accent {
  display: block;
  color: var(--accent);
  background: linear-gradient(105deg, var(--accent), var(--accent-hi));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-title-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: clamp(38px, 4.3vw, 58px);
}
.hero-title-reflection {
  position: absolute;
  z-index: 0;
  top: calc(100% - clamp(32px, 3.5vw, 48px));
  left: 0;
  width: 100%;
  height: clamp(34px, 4vw, 54px);
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: .15;
  transform: scaleY(-1) skewX(-3deg);
  transform-origin: top;
  filter: blur(.65px);
  -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .25) 42%, transparent 88%);
  mask-image: linear-gradient(to bottom, rgb(0 0 0 / .86) 0%, rgb(0 0 0 / .25) 42%, transparent 88%);
}
.hero-title-reflection .hero-title {
  margin: 0;
  opacity: .95;
}
.hero-title-wrap::after {
  content: "";
  position: absolute;
  left: 2%;
  right: 12%;
  bottom: 18px;
  height: 1px;
  background: linear-gradient(90deg, hsl(var(--hue) 95% 72% / .32), transparent 82%);
  box-shadow: 0 0 20px hsl(var(--hue) 95% 62% / .13);
  pointer-events: none;
}

.hero-copy {
  max-width: 760px;
  margin: 0;
  color: #c9d8db;
  font-size: clamp(1.08rem, 1.7vw, 1.34rem);
}
.hero-actions { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 12px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  gap: .55rem;
  padding: .78rem 1.08rem;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  text-decoration: none;
  font-weight: 900;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary {
  background: linear-gradient(135deg, var(--accent), var(--accent-hi));
  color: #01101c;
  border-color: transparent;
  box-shadow: 0 10px 30px hsl(var(--hue) 90% 58% / .14);
}
.button-secondary { background: rgb(255 255 255 / .025); }
.button-ghost { color: var(--muted); }

.hero-visual {
  position: relative;
  min-height: 500px;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, hsl(var(--hue) 90% 62% / .13), transparent 40%),
    radial-gradient(circle at 80% 18%, hsl(calc(var(--hue) + 22) 92% 64% / .07), transparent 30%),
    linear-gradient(145deg, rgb(255 255 255 / .024), transparent 58%),
    #06111d;
  box-shadow: var(--shadow);
}
.hero-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(hsl(var(--hue) 80% 65% / .05) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--hue) 80% 65% / .05) 1px, transparent 1px);
  background-size: 30px 30px;
}
.hero-visual::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -30%;
  height: 32%;
  background: linear-gradient(to bottom, transparent, hsl(var(--hue) 84% 64% / .08), hsl(var(--hue) 84% 64% / .22), transparent);
  border-bottom: 1px solid hsl(var(--hue) 84% 64% / .38);
  animation: scan 7s linear infinite;
  pointer-events: none;
}
@keyframes scan { to { transform: translateY(650px); } }
#evidence-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.visual-hud {
  position: absolute;
  inset: 18px 18px auto;
  display: flex;
  justify-content: space-between;
  gap: 14px;
  pointer-events: none;
}
.hud-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .42rem .7rem;
  background: rgb(4 12 16 / .72);
  color: var(--muted);
  font-size: .69rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 900;
}
.hud-chip.live { color: var(--accent); }
.visual-caption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgb(5 13 18 / .78);
  backdrop-filter: blur(8px);
}
.visual-caption strong { display: block; font-size: .78rem; color: var(--accent-2); letter-spacing: .11em; text-transform: uppercase; }
.visual-caption span { display: block; margin-top: 5px; color: var(--muted); font-size: .91rem; }

.trace-rail { margin-top: 46px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgb(5 14 19 / .72); }
.trace-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.trace-step { position: relative; padding: 22px 24px; }
.trace-step + .trace-step { border-left: 1px solid var(--line); }
.trace-step::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width .5s ease; }
.trace-step:hover::before { width: 100%; }
.trace-step b { display: block; color: var(--accent-2); font-size: .71rem; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 7px; }
.trace-step span { color: var(--muted); }

.section { padding: 76px 0; }
.section.alt { position: relative; background: linear-gradient(180deg, rgb(255 255 255 / .012), rgb(255 255 255 / .004)); border-block: 1px solid rgb(255 255 255 / .045); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 28px; }
.section-heading h2 { margin: 0; font-size: clamp(2.15rem, 4vw, 4rem); line-height: 1; letter-spacing: -.045em; }
.section-heading p { max-width: 590px; margin: 0; color: var(--muted); }

.featured {
  position: relative;
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  min-height: 460px;
  border: 1px solid var(--line);
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(145deg, rgb(14 33 42 / .9), rgb(7 18 24 / .82));
  box-shadow: var(--shadow);
}
.featured-art { position: relative; min-height: 410px; overflow: hidden; border-right: 1px solid var(--line); }
.forensic-art { position: absolute; inset: 0; background: radial-gradient(circle at 52% 52%, hsl(var(--hue) 80% 62% / .18), transparent 26%), #061117; }
.forensic-art::before,
.forensic-art::after { content: ""; position: absolute; border-radius: 50%; border: 1px solid hsl(var(--hue) 75% 62% / .26); }
.forensic-art::before { width: 330px; height: 330px; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 48px hsl(var(--hue) 75% 62% / .035), 0 0 0 96px hsl(var(--hue) 75% 62% / .025); }
.forensic-art::after { width: 120px; height: 120px; left: 50%; top: 50%; transform: translate(-50%, -50%); border-style: dashed; animation: orbit 14s linear infinite; }
@keyframes orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
.art-node { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 20px var(--accent); }
.art-node.n1 { left: 25%; top: 28%; }
.art-node.n2 { right: 22%; top: 32%; }
.art-node.n3 { left: 35%; bottom: 22%; }
.art-node.n4 { right: 30%; bottom: 24%; }
.art-line { position: absolute; left: 20%; right: 20%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, var(--accent), transparent); transform: rotate(-18deg); transform-origin: center; opacity: .5; }
.art-label { position: absolute; color: var(--muted); font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; }
.art-label.l1 { left: 18px; top: 18px; }
.art-label.l2 { right: 18px; bottom: 18px; }
.featured-copy { padding: clamp(30px, 4vw, 52px); display: flex; flex-direction: column; justify-content: center; }
.article-meta { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; color: var(--accent); font-size: .71rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 900; }
.featured h3 { margin: 20px 0 18px; font-size: clamp(2rem, 3.8vw, 3.6rem); line-height: .98; letter-spacing: -.045em; }
.featured p { margin: 0 0 28px; color: var(--muted); font-size: 1.05rem; }

.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 16px; margin-top: 18px; }
.article-card {
  position: relative;
  min-height: 310px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  background: linear-gradient(180deg, rgb(13 31 40 / .78), rgb(7 20 26 / .74));
  transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease;
  display: flex;
  flex-direction: column;
}
.article-card:hover { transform: translateY(-5px); border-color: hsl(var(--hue) 70% 60% / .37); box-shadow: 0 18px 52px rgb(0 0 0 / .2); }
.article-card::before {
  content: "";
  position: absolute;
  inset: -30% 0 auto;
  height: 28%;
  background: linear-gradient(to bottom, transparent, hsl(var(--hue) 82% 62% / .1), transparent);
  transition: transform .6s ease;
}
.article-card:hover::before { transform: translateY(400px); }
.article-card h3 { margin: 17px 0 12px; font-size: 1.42rem; line-height: 1.12; letter-spacing: -.028em; }
.article-card p { color: var(--muted); margin: 0 0 12px; }
.card-link {
  position: static;
  left: auto;
  bottom: auto;
  margin-top: auto;
  padding-top: 16px;
  align-self: flex-end;
  text-align: right;
  text-decoration: none;
  font-weight: 900;
  z-index: 1;
}
.card-link:hover { color: var(--accent); }

.signal-board { display: grid; grid-template-columns: .7fr 1.3fr; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: rgb(6 17 22 / .72); }
.signal-label { padding: 28px; border-right: 1px solid var(--line); background: linear-gradient(145deg, hsl(var(--hue) 78% 60% / .1), transparent); }
.signal-label b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .15em; color: var(--accent); }
.signal-label strong { display: block; margin-top: 10px; font-size: 1.6rem; line-height: 1.05; }
.signal-stream { padding: 12px 28px; }
.signal-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 18px; align-items: center; padding: 17px 0; border-bottom: 1px solid var(--line); }
.signal-item:last-child { border-bottom: 0; }
.signal-item time { color: var(--muted-2); font-variant-numeric: tabular-nums; font-size: .82rem; }
.signal-item span { color: #c7d5d8; }
.signal-item b { color: var(--accent-2); font-size: .68rem; letter-spacing: .09em; text-transform: uppercase; }

.method-layout { display: grid; grid-template-columns: 1.1fr .9fr; gap: 18px; }
.panel { border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(26px, 4vw, 42px); background: rgb(9 24 31 / .72); }
.method-list { list-style: none; padding: 0; margin: 24px 0 0; }
.method-list li { display: grid; grid-template-columns: 52px 1fr; gap: 15px; padding: 18px 0; border-top: 1px solid var(--line); }
.method-list b { color: var(--accent-2); font-variant-numeric: tabular-nums; }
.method-list strong { display: block; margin-bottom: 3px; }
.method-list span { color: var(--muted); }
.manifest { display: flex; flex-direction: column; justify-content: space-between; min-height: 100%; }
.manifest blockquote { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2.45rem); line-height: 1.16; letter-spacing: -.035em; }
.manifest small { margin-top: 28px; color: var(--muted); }

.page-hero { padding: 92px 0 46px; }
.page-title { font-size: clamp(3rem, 6.7vw, 6.2rem); }
.page-lead { max-width: 780px; margin-top: 24px; color: var(--muted); font-size: 1.13rem; }

.tools-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 28px; }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-button { border: 1px solid var(--line); background: rgb(255 255 255 / .02); color: var(--muted); padding: .62rem .88rem; border-radius: 999px; cursor: pointer; font-weight: 850; }
.filter-button:hover, .filter-button.is-active { color: #001416; background: var(--accent); border-color: transparent; }
.search-box { position: relative; min-width: min(100%, 300px); }
.search-box input { width: 100%; border: 1px solid var(--line); border-radius: 999px; background: rgb(255 255 255 / .025); color: var(--text); padding: .68rem 1rem .68rem 2.5rem; outline: 0; }
.search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px hsl(var(--hue) 70% 58% / .12); }
.search-box svg { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); width: 16px; color: var(--muted); }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.archive-card { min-height: 280px; }

.prose { max-width: 850px; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.7rem, 3vw, 2.5rem); letter-spacing: -.03em; }
.prose p, .prose li { color: #c8d6d8; }
.prose a { color: var(--accent); }
.code-manifest { margin-top: 32px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #061117; }
.code-top { display: flex; justify-content: space-between; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.code-lines { padding: 18px; display: grid; gap: 9px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #c5d6d8; font-size: .9rem; }
.code-lines span::before { content: attr(data-n); display: inline-block; width: 32px; color: var(--muted-2); }
.code-lines em { color: var(--accent); font-style: normal; }

.site-footer { margin-top: 78px; border-top: 1px solid var(--line); padding: 36px 0 52px; color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: start; }
.footer-title { color: var(--text); font-weight: 950; letter-spacing: .12em; }
.footer-links { display: flex; flex-wrap: wrap; gap: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; }
.footer-links a:hover { color: var(--text); }
.micro { margin-top: 10px; color: var(--muted-2); font-size: .82rem; }

.settings-backdrop { position: fixed; inset: 0; z-index: 300; background: rgb(0 0 0 / .48); opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.settings-backdrop.is-open { opacity: 1; pointer-events: auto; }
.settings-panel { position: absolute; top: 0; right: 0; width: min(92vw, 420px); height: 100%; padding: 24px; background: #071421; border-left: 1px solid var(--line); box-shadow: -24px 0 70px rgb(0 0 0 / .35); transform: translateX(100%); transition: transform .25s ease; overflow: auto; }
.settings-backdrop.is-open .settings-panel { transform: translateX(0); }
.settings-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.settings-head h2 { margin: 0; font-size: 1.3rem; }
.close-button { border: 1px solid var(--line); background: transparent; color: var(--text); width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.setting-group { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.setting-group label { display: block; font-weight: 850; }
.setting-group p { margin: 6px 0 12px; color: var(--muted); font-size: .9rem; }
.hue-value { color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); }
.toggle-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; padding: 10px 0; }
.toggle-row input { width: 20px; height: 20px; accent-color: var(--accent); }
.reset-button { width: 100%; border: 1px solid var(--line-strong); background: transparent; color: var(--text); border-radius: 12px; padding: .75rem; cursor: pointer; font-weight: 850; }

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

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

body.high-contrast {
  --text: #fff;
  --muted: #d7e0e2;
  --muted-2: #b9cbcf;
  --line: rgb(255 255 255 / .32);
  --line-strong: rgb(255 255 255 / .5);
}
body.reduce-motion *, body.reduce-motion *::before, body.reduce-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
body.reduce-motion .reveal { opacity: 1; transform: none; }

@media (max-width: 1040px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-visual { min-height: 430px; }
  .card-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .featured { grid-template-columns: 1fr; }
  .featured-art { border-right: 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 820px) {
  .menu-toggle { display: inline-flex; }
  .site-nav { position: absolute; top: calc(var(--header-h) - 2px); left: 17px; right: 17px; display: none; flex-direction: column; align-items: stretch; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #071421; box-shadow: var(--shadow); }
  .site-nav.is-open { display: flex; }
  .site-nav a { border-radius: 10px; }
  .brand-sub { display: none; }
  .trace-grid { grid-template-columns: 1fr; }
  .trace-step + .trace-step { border-left: 0; border-top: 1px solid var(--line); }
  .method-layout, .signal-board { grid-template-columns: 1fr; }
  .signal-label { border-right: 0; border-bottom: 1px solid var(--line); }
  .tools-row { align-items: stretch; flex-direction: column; }
  .search-box { width: 100%; }
  .archive-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :root { --header-h: 64px; }
  .shell { width: min(calc(100% - 24px), var(--max)); }

  .brand { gap: 10px; font-size: .78rem; letter-spacing: .16em; }
  .brand-mark { width: 34px; height: 34px; border-radius: 11px; }
  .brand-mark svg { width: 20px; height: 20px; }
  .menu-toggle { padding: .56rem .72rem; font-size: .86rem; }
  .nav-cluster { gap: 6px; }
  .utility-button { width: 36px; height: 36px; }

  .hero { padding: 34px 0 30px; }
  .hero-grid { gap: 30px; }
  .eyebrow { margin-bottom: 13px; font-size: .69rem; letter-spacing: .19em; }
  .hero-title { font-size: clamp(3rem, 14.8vw, 4.25rem); line-height: .91; letter-spacing: -.06em; }
  .hero-title-wrap { padding-bottom: 36px; }
  .hero-title-reflection {
    top: calc(100% - 29px);
    height: 31px;
    opacity: .13;
    -webkit-mask-image: linear-gradient(to bottom, rgb(0 0 0 / .72), transparent 76%);
    mask-image: linear-gradient(to bottom, rgb(0 0 0 / .72), transparent 76%);
  }
  .hero-title-wrap::after { bottom: 12px; opacity: .8; }
  .hero-copy { font-size: 1.02rem; line-height: 1.58; }
  .hero-actions {
    display: grid;
    grid-template-columns: .95fr 1.05fr;
    gap: 9px;
    margin-top: 24px;
  }
  .hero-actions .button { width: 100%; min-height: 46px; padding: .7rem .58rem; font-size: .88rem; }

  .hero-visual { min-height: 330px; border-radius: 19px; }
  .visual-hud { inset: 12px 12px auto; gap: 8px; }
  .hud-chip { padding: .38rem .55rem; font-size: .57rem; letter-spacing: .08em; }
  .visual-caption { left: 12px; right: 12px; bottom: 12px; padding: 12px 13px; border-radius: 13px; }
  .visual-caption strong { font-size: .66rem; }
  .visual-caption span { margin-top: 4px; font-size: .82rem; line-height: 1.45; }

  .trace-rail { margin-top: 24px; border-radius: 18px; }
  .trace-step { padding: 17px 18px 17px 42px; min-height: 92px; }
  .trace-step::after {
    content: "";
    position: absolute;
    left: 20px;
    top: 23px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 14px hsl(var(--hue) 92% 62% / .45);
  }
  .trace-step b { margin-bottom: 6px; font-size: .67rem; }
  .trace-step span { font-size: .93rem; line-height: 1.45; }

  .card-grid { grid-template-columns: 1fr; }
  .section { padding: 44px 0; }
  .section-heading { flex-direction: column; align-items: start; gap: 16px; margin-bottom: 22px; }
  .section-heading h2 { font-size: clamp(2rem, 11vw, 3rem); }
  .section-heading p { font-size: .96rem; }
  .featured { border-radius: 20px; }
  .featured-art { min-height: 300px; }
  .featured-copy { padding: 24px; }

  .signal-item { grid-template-columns: 66px 1fr; gap: 12px; }
  .signal-item b { grid-column: 2; }
  .site-footer { margin-top: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
}
@media (max-width: 370px) {
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .button { font-size: .92rem; }
  .hud-chip:last-child { display: none; }
}


/* ================================================================
   Vestigo v0.4.0-RC4 — vsebinska arhitektura in tematski portal
   ================================================================ */
.nav-subtle { color: var(--muted); }

.portal-stats {
  display: flex;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.stat-chip {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .52rem .78rem;
  color: var(--muted);
  background: rgb(255 255 255 / .018);
  font-size: .78rem;
}
.stat-chip b { color: var(--text); font-variant-numeric: tabular-nums; }

.theme-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.theme-card {
  position: relative;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  background:
    radial-gradient(circle at 88% 15%, hsl(var(--hue) 90% 64% / .11), transparent 34%),
    linear-gradient(155deg, rgb(10 29 44 / .90), rgb(5 17 28 / .78));
  text-decoration: none;
  transition: transform .23s ease, border-color .23s ease, box-shadow .23s ease;
}
.theme-card:hover {
  transform: translateY(-5px);
  border-color: hsl(var(--hue) 84% 66% / .38);
  box-shadow: 0 18px 52px rgb(0 0 0 / .22);
}
.theme-code {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 850;
}
.theme-count { color: var(--muted-2); }
.theme-card h3 {
  margin: 34px 0 11px;
  max-width: 13ch;
  font-size: clamp(1.45rem, 2.5vw, 2.1rem);
  line-height: 1.02;
  letter-spacing: -.035em;
}
.theme-card p { margin: 0 0 36px; color: var(--muted); }
.theme-card .theme-link { margin-top: auto; font-weight: 900; }
.theme-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -88px;
  bottom: -88px;
  border-radius: 50%;
  border: 1px solid hsl(var(--hue) 80% 64% / .14);
  box-shadow: 0 0 0 34px hsl(var(--hue) 80% 64% / .025), 0 0 0 68px hsl(var(--hue) 80% 64% / .018);
}

.archive-intro {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 22px;
  align-items: end;
  margin-bottom: 24px;
}
.archive-intro p { margin: 0; color: var(--muted); max-width: 760px; }
.result-count { color: var(--muted-2); font-size: .85rem; white-space: nowrap; }

.archive-card {
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.article-date {
  margin-left: auto;
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
}
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 16px 0 0;
  align-items: flex-start;
}
.article-tag {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .28rem .48rem;
  color: var(--muted-2);
  background: rgb(255 255 255 / .018);
  font-size: .67rem;
}
.article-card .category-link {
  color: var(--accent);
  text-decoration: none;
}
.article-card .category-link:hover { text-decoration: underline; }
.article-card[hidden] { display: none !important; }
.empty-state {
  display: none;
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  padding: 36px;
  text-align: center;
  color: var(--muted);
}
.empty-state.is-visible { display: block; }

.topic-hero-grid {
  display: grid;
  grid-template-columns: 1fr .52fr;
  gap: 34px;
  align-items: end;
}
.topic-index {
  min-height: 220px;
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 24px;
  background:
    radial-gradient(circle at 76% 20%, var(--accent-soft), transparent 36%),
    linear-gradient(155deg, rgb(9 26 40 / .9), rgb(5 16 27 / .78));
}
.topic-index .theme-code { margin-bottom: 60px; }
.topic-index strong { display: block; font-size: 2.1rem; line-height: 1; }
.topic-index span { display: block; margin-top: 10px; color: var(--muted); }

.breadcrumbs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
  color: var(--muted-2);
  font-size: .82rem;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--text); }

.theme-article-list { display: grid; gap: 14px; }
.theme-article {
  display: grid;
  grid-template-columns: 128px 1fr auto;
  gap: 22px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px;
  background: rgb(8 22 35 / .64);
}
.theme-article time {
  color: var(--muted-2);
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
}
.theme-article h2 {
  margin: 0 0 7px;
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.theme-article p { margin: 0; color: var(--muted); }
.theme-article .theme-open {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 50%;
  text-decoration: none;
  color: var(--accent);
}
.theme-article .theme-open:hover { border-color: var(--accent); background: var(--accent-faint); }

.home-latest .article-card { min-height: 292px; }
.section-actions { margin-top: 24px; display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 1040px) {
  .theme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-hero-grid { grid-template-columns: 1fr; }
  .topic-index { min-height: 170px; }
  .topic-index .theme-code { margin-bottom: 36px; }
}
@media (max-width: 820px) {
  .archive-intro { grid-template-columns: 1fr; }
  .result-count { white-space: normal; }
  .theme-article { grid-template-columns: 1fr auto; }
  .theme-article time { grid-column: 1 / -1; }
}
@media (max-width: 620px) {
  .theme-grid { grid-template-columns: 1fr; }
  .theme-card { min-height: 220px; }
  .theme-card h3 { margin-top: 28px; max-width: none; }
  .archive-card { min-height: 295px; }
  .article-date { width: 100%; margin-left: 0; }
  .theme-article { padding: 18px; gap: 14px; }
  .topic-index { min-height: 150px; padding: 20px; }
}


/* RC5: predstavitev Vestiga in lokalne objave */
.presentation-section {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(circle at 16% 45%, var(--accent-faint), transparent 30rem),
    linear-gradient(180deg, rgb(255 255 255 / .012), transparent);
}
.presentation-grid {
  display: grid;
  grid-template-columns: .88fr 1.12fr;
  gap: clamp(24px, 5vw, 70px);
  align-items: center;
}
.presentation-lead h2 {
  margin: 0 0 22px;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: .96;
  letter-spacing: -.055em;
}
.presentation-intro {
  max-width: 670px;
  color: var(--muted);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem);
}
.presentation-points {
  padding: clamp(18px, 3vw, 30px);
}
.presentation-points > div {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 5px 14px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.presentation-points > div:first-child { border-top: 0; }
.presentation-points span {
  grid-row: 1 / span 2;
  color: var(--accent);
  font-weight: 900;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.presentation-points strong { font-size: 1.08rem; }
.presentation-points p { margin: 0; color: var(--muted); }

.article-detail { padding-bottom: 40px; }
.article-hero {
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(42px, 7vw, 72px);
}
.article-hero h1 {
  max-width: 980px;
  margin: 18px 0 22px;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .94;
  letter-spacing: -.06em;
}
.article-subtitle {
  max-width: 830px;
  margin: 0;
  color: var(--muted);
  font-size: clamp(1.15rem, 2vw, 1.5rem);
}
.article-byline {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 26px;
  color: var(--muted-2);
  font-size: .9rem;
}
.breadcrumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  color: var(--muted-2);
  font-size: .82rem;
}
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent); }

.article-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 780px);
  gap: clamp(34px, 7vw, 92px);
  justify-content: center;
  align-items: start;
}
.article-rail {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  border-top: 1px solid var(--line-strong);
}
.rail-block {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
}
.rail-block > span {
  display: block;
  margin-bottom: 6px;
  color: var(--accent);
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .14em;
}
.rail-block p, .rail-block a {
  margin: 0;
  color: var(--muted);
  font-size: .85rem;
  line-height: 1.55;
  text-decoration: none;
}
.rail-block a:hover { color: var(--text); }

.article-prose {
  min-width: 0;
  color: #d7e2ed;
  font-size: clamp(1.04rem, 1.3vw, 1.16rem);
  line-height: 1.82;
}
.article-prose > p:first-child {
  font-size: 1.18em;
  color: var(--text);
}
.article-prose h2 {
  margin: 2.7em 0 .8em;
  color: var(--text);
  font-size: clamp(1.65rem, 3vw, 2.4rem);
  line-height: 1.12;
  letter-spacing: -.035em;
}
.article-prose a {
  color: var(--accent-hi);
  text-underline-offset: 3px;
}
.source-list {
  padding-left: 1.3rem;
}
.source-list li {
  margin: 0 0 1.1rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .presentation-grid { grid-template-columns: 1fr; }
  .article-layout { grid-template-columns: 1fr; }
  .article-rail {
    position: static;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    border-top: 0;
  }
  .rail-block {
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
  }
}
@media (max-width: 620px) {
  .presentation-section { padding-top: 44px; padding-bottom: 44px; }
  .presentation-lead h2 { font-size: clamp(2.25rem, 12vw, 3.4rem); }
  .presentation-points > div { grid-template-columns: 38px 1fr; }
  .article-hero { padding-top: 46px; padding-bottom: 34px; }
  .article-hero h1 { font-size: clamp(2.55rem, 13vw, 4.25rem); }
  .article-layout { gap: 26px; }
  .article-rail { grid-template-columns: 1fr; }
  .article-prose { font-size: 1rem; line-height: 1.72; }
}


/* =============================================================
   VESTIGO v0.6.0-RC6 — FUTURE EVIDENCE INTERFACE
   ============================================================= */
:root {
  --hue: 204;
  --cyan: hsl(var(--hue) 100% 67%);
  --cyan-hi: hsl(calc(var(--hue) - 13) 100% 74%);
  --violet: hsl(calc(var(--hue) + 55) 92% 72%);
  --violet-soft: hsl(calc(var(--hue) + 55) 90% 68% / .16);
  --signal: hsl(calc(var(--hue) - 32) 84% 64%);
  --accent: var(--cyan);
  --accent-hi: var(--cyan-hi);
  --accent-2: var(--violet);
  --bg: #020611;
  --bg-2: #050d19;
  --bg-3: #081525;
  --panel: rgb(7 19 33 / .78);
  --panel-strong: #091a2c;
  --text: #f7faff;
  --muted: #9fb4ca;
  --muted-2: #7089a3;
  --line: rgb(126 189 236 / .16);
  --line-strong: rgb(126 205 255 / .31);
  --violet-line: rgb(148 116 255 / .28);
}
body.future-ui {
  background:
    radial-gradient(circle at var(--mx,18%) var(--my,8%), hsl(var(--hue) 96% 60% / .085), transparent 34rem),
    radial-gradient(circle at 87% 14%, hsl(calc(var(--hue) + 55) 92% 63% / .07), transparent 31rem),
    linear-gradient(180deg,#020611 0%,#05101d 43%,#020711 100%);
}
body.future-ui::before {
  opacity:.23;
  background-image:linear-gradient(rgb(105 183 235 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(105 183 235 / .035) 1px,transparent 1px);
  background-size:38px 38px;
}
body.future-ui::after {
  content:""; position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:linear-gradient(115deg,transparent 20%,rgb(87 209 255 / .018) 45%,transparent 65%);
}
.site-header { background:rgb(2 7 16 / .78); border-bottom-color:rgb(102 191 245 / .12); }
.brand-sub { color:var(--violet); }
.brand-mark { border-color:rgb(91 209 255 / .42); box-shadow:inset 0 0 22px rgb(83 206 255 / .06),0 0 18px rgb(83 206 255 / .05); }
.command-button { display:inline-flex; align-items:center; gap:8px; min-height:38px; padding:0 10px; border:1px solid var(--line); border-radius:12px; background:rgb(255 255 255 / .025); color:var(--muted); font:inherit; cursor:pointer; }
.command-button:hover { color:var(--text); border-color:var(--line-strong); background:rgb(72 188 255 / .06); }
.command-button svg { width:17px; height:17px; }
.command-button span { font-size:.78rem; font-weight:800; }
.command-button kbd,.search-hint { border:1px solid var(--line); border-bottom-color:var(--line-strong); border-radius:7px; padding:.12rem .34rem; color:var(--muted-2); background:#06101d; font:700 .62rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

.system-ribbon { display:flex; align-items:center; flex-wrap:wrap; gap:9px; margin:0 0 19px; color:var(--muted-2); font:800 .66rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.12em; }
.system-ribbon b { color:var(--cyan); }
.system-dot { width:7px; height:7px; border-radius:50%; background:var(--signal); box-shadow:0 0 14px var(--signal); }
.system-sep { width:34px; height:1px; background:linear-gradient(90deg,var(--cyan),transparent); }
.hero-title .accent,.hero-title-reflection .accent { background:linear-gradient(100deg,var(--cyan) 10%,var(--violet) 115%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; }
.hero-title-wrap::after { background:linear-gradient(90deg,rgb(80 207 255 / .44),rgb(150 117 255 / .19),transparent 82%); box-shadow:0 0 30px rgb(80 207 255 / .15); }
.hero-visual { border-color:rgb(81 191 245 / .27); background:radial-gradient(circle at 44% 41%,rgb(75 194 255 / .15),transparent 34%),radial-gradient(circle at 78% 28%,rgb(147 112 255 / .13),transparent 33%),linear-gradient(145deg,rgb(255 255 255 / .025),transparent 56%),#050f1c; box-shadow:inset 0 0 60px rgb(70 189 255 / .025),0 32px 90px rgb(0 0 0 / .28); clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px)); }
.visual-hud .hud-chip:nth-child(2) { color:#c8bcff; border-color:var(--violet-line); }
.visual-caption { background:rgb(3 10 19 / .82); border-color:rgb(83 194 255 / .23); backdrop-filter:blur(12px); }
.visual-caption strong { color:var(--violet); }
.trace-step b,.eyebrow { color:var(--cyan); }
.trace-step::after { background:linear-gradient(180deg,var(--cyan),var(--violet)); }
.button-primary { background:linear-gradient(115deg,var(--cyan),hsl(calc(var(--hue) + 24) 100% 69%)); box-shadow:0 13px 38px rgb(66 184 255 / .13); }
.button-secondary:hover { border-color:var(--violet-line); box-shadow:0 0 24px rgb(144 112 255 / .07); }

.chapter { position:relative; }
.chapter::before { content:attr(data-chapter) " / VESTIGO"; position:absolute; left:max(18px,calc((100vw - var(--max))/2 - 62px)); top:42px; color:rgb(118 159 193 / .34); font:800 .61rem ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.16em; writing-mode:vertical-rl; }
.chapter:nth-of-type(even) { background:linear-gradient(180deg,rgb(255 255 255 / .012),transparent 12%,transparent 88%,rgb(255 255 255 / .009)); }
.section-rail { position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:60; display:flex; flex-direction:column; gap:7px; padding:8px; border:1px solid var(--line); border-radius:15px; background:rgb(3 9 18 / .68); backdrop-filter:blur(14px); }
.section-rail a { display:flex; align-items:center; gap:8px; width:33px; height:32px; overflow:hidden; border-radius:9px; color:var(--muted-2); text-decoration:none; transition:width .2s ease,background .2s ease,color .2s ease; }
.section-rail a span { flex:0 0 32px; text-align:center; font:800 .61rem ui-monospace,monospace; }
.section-rail a b { white-space:nowrap; font-size:.64rem; letter-spacing:.1em; }
.section-rail a:hover,.section-rail a.is-active { width:92px; color:var(--text); background:rgb(74 185 255 / .08); }
.section-rail a.is-active span { color:var(--cyan); }

.theme-card { min-height:310px; border-color:rgb(112 180 224 / .17); background:linear-gradient(155deg,rgb(11 28 46 / .87),rgb(4 13 24 / .78)); clip-path:polygon(0 0,calc(100% - 17px) 0,100% 17px,100% 100%,17px 100%,0 calc(100% - 17px)); }
.theme-card:hover { transform:translateY(-5px); border-color:var(--line-strong); box-shadow:0 20px 60px rgb(0 0 0 / .24),0 0 34px rgb(76 196 255 / .045); }
.theme-card::after { width:82px;height:82px;border-color:rgb(149 117 255 / .13); }
.theme-visual { position:relative; height:64px; margin:16px 0 10px; overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:linear-gradient(90deg,rgb(79 194 255 / .03),rgb(148 112 255 / .055),transparent); }
.theme-visual::before { content:""; position:absolute; inset:0; background-image:linear-gradient(90deg,transparent 0 18%,rgb(90 189 245 / .11) 18% 18.5%,transparent 18.5% 42%,rgb(149 113 255 / .10) 42% 42.5%,transparent 42.5% 100%); }
.theme-visual span { position:absolute; bottom:13px; width:8px; border-radius:999px 999px 2px 2px; background:linear-gradient(180deg,var(--cyan),var(--violet)); box-shadow:0 0 12px rgb(82 203 255 / .20); }
.theme-visual span:nth-child(1){left:12%;height:24px}.theme-visual span:nth-child(2){left:23%;height:39px}.theme-visual span:nth-child(3){left:34%;height:18px}
.theme-visual i { position:absolute; width:8px;height:8px;border-radius:50%;right:14%;top:18px;background:var(--violet);box-shadow:-43px 18px 0 -2px var(--cyan),0 0 18px rgb(148 112 255 / .42); }
.theme-code { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }

.archive-card { position:relative; overflow:hidden; border-color:rgb(106 181 232 / .16); background:linear-gradient(160deg,rgb(8 23 39 / .88),rgb(4 13 24 / .76)); }
.archive-card::before { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(110deg,transparent 20%,rgb(88 203 255 / .025) 50%,transparent 68%); transform:translateX(-90%); transition:transform .7s ease; }
.archive-card:hover::before { transform:translateX(90%); }
.archive-signal { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; color:var(--muted-2); font:800 .61rem ui-monospace,monospace; letter-spacing:.12em; }
.source-badge { padding:.25rem .46rem; border:1px solid var(--line); border-radius:999px; }
.source-badge.local { color:var(--signal); border-color:rgb(74 227 203 / .26); background:rgb(74 227 203 / .035); }
.source-badge.legacy { color:#a6bad0; }
.search-box { position:relative; }
.search-hint { margin-right:9px; }

.article-system-line { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:22px; color:var(--muted-2); font:800 .62rem ui-monospace,monospace; letter-spacing:.13em; }
.article-system-line span { border:1px solid var(--line); border-radius:999px; padding:.35rem .55rem; }
.article-system-line span:first-child { color:var(--signal); border-color:rgb(72 226 200 / .22); }
.article-layout { grid-template-columns:180px minmax(0,780px) 220px; }
.article-toc { position:sticky; top:calc(var(--header-h) + 28px); max-height:calc(100vh - var(--header-h) - 56px); overflow:auto; border-left:1px solid var(--line); padding-left:18px; }
.article-toc span { display:block; margin-bottom:12px; color:var(--violet); font:800 .62rem ui-monospace,monospace; letter-spacing:.14em; }
.article-toc a { display:block; padding:.42rem 0; color:var(--muted-2); text-decoration:none; font-size:.79rem; line-height:1.32; }
.article-toc a:hover,.article-toc a.is-active { color:var(--text); }
.reading-progress { position:fixed; z-index:130; top:var(--header-h); left:0; width:100%; height:3px; appearance:none; border:0; background:transparent; }
.reading-progress::-webkit-progress-bar { background:transparent; }
.reading-progress::-webkit-progress-value { background:linear-gradient(90deg,var(--cyan),var(--violet)); box-shadow:0 0 10px rgb(86 205 255 / .4); }
.reading-progress::-moz-progress-bar { background:linear-gradient(90deg,var(--cyan),var(--violet)); }
.related-articles { padding-top:58px; }
.related-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; }
.related-grid a { display:flex;flex-direction:column;gap:10px;min-height:170px;padding:24px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(155deg,rgb(10 27 45 / .82),rgb(5 14 25 / .7));text-decoration:none; }
.related-grid a:hover { border-color:var(--line-strong);transform:translateY(-2px); }
.related-grid span { color:var(--cyan);font:800 .63rem ui-monospace,monospace;letter-spacing:.12em; }
.related-grid strong { font-size:1.2rem; }
.related-grid small { margin-top:auto;color:var(--muted); }

.command-backdrop { position:fixed; inset:0; z-index:200; display:grid; place-items:start center; padding-top:min(14vh,120px); background:rgb(0 4 10 / .68); backdrop-filter:blur(12px); }
.command-backdrop[hidden] { display:none; }
.command-palette { width:min(92vw,720px); border:1px solid var(--line-strong); border-radius:22px; overflow:hidden; background:rgb(5 14 26 / .97); box-shadow:0 40px 120px rgb(0 0 0 / .58),0 0 60px rgb(91 202 255 / .055); }
.command-head { display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--line); }
.command-head svg { width:20px;height:20px;color:var(--cyan); }
.command-head input { flex:1;min-width:0;border:0;outline:0;background:transparent;color:var(--text);font:inherit;font-size:1rem; }
.command-head kbd { border:1px solid var(--line);border-radius:8px;padding:.2rem .4rem;color:var(--muted-2);font:700 .68rem ui-monospace,monospace; }
.command-results { max-height:min(64vh,560px); overflow:auto; padding:8px; }
.command-result { display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;padding:12px;border-radius:13px;text-decoration:none;color:var(--text); }
.command-result:hover,.command-result:focus { background:rgb(74 187 255 / .075); outline:none; }
.command-result .cmd-type { color:var(--cyan);font:800 .59rem ui-monospace,monospace;letter-spacing:.1em; }
.command-result strong { display:block;font-size:.92rem;line-height:1.25; }
.command-result small { color:var(--muted-2); }
.command-empty { padding:30px;text-align:center;color:var(--muted); }

.footer-status { display:inline-flex;align-items:center;gap:8px;margin-top:12px;color:var(--muted-2);font:800 .6rem ui-monospace,monospace;letter-spacing:.12em; }
.footer-status span { width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 12px var(--signal); }

/* Settings panel: true modal treatment */
.settings-backdrop.is-open { backdrop-filter:blur(10px); }
.settings-panel { background:linear-gradient(180deg,#071525,#040c17); border-left-color:var(--line-strong); }

.high-contrast { --muted:#c6d5e4; --muted-2:#a9bed1; --line:rgb(160 213 250 / .30); --line-strong:rgb(190 226 255 / .52); }

@media(max-width:1180px){ .article-layout{grid-template-columns:170px minmax(0,760px)} .article-toc{display:none}.section-rail{display:none}.chapter::before{display:none} }
@media(max-width:760px){ .command-button span,.command-button kbd{display:none}.command-button{width:38px;height:38px;padding:0;justify-content:center;border-radius:50%}.related-grid{grid-template-columns:1fr}.system-ribbon{font-size:.58rem}.system-ribbon span:nth-last-child(-n+2){display:none}.theme-card{min-height:260px}.theme-visual{height:54px}.article-layout{grid-template-columns:1fr}.article-system-line{gap:6px}.article-system-line span{font-size:.55rem}.command-result{grid-template-columns:52px 1fr}.command-result small{display:none} }
@media(max-width:620px){ .hero{padding-top:30px}.hero-grid{gap:24px}.hero-visual{min-height:310px}.chapter:nth-of-type(even){background:linear-gradient(180deg,rgb(255 255 255 / .009),transparent)}.presentation-section{background:radial-gradient(circle at 10% 30%,rgb(75 195 255 / .06),transparent 22rem)} }

@media(max-width:760px){
  .card-link{align-self:flex-start;text-align:left;padding-top:14px}
}
@media(prefers-reduced-motion:reduce){ .archive-card::before{display:none}.theme-card:hover,.related-grid a:hover{transform:none} }


/* ==========================================================================
   RC7 – tematski barvni sistem
   Barva je orientacijski signal; kategorija je vedno zapisana tudi z besedilom.
   ========================================================================== */
:root {
  --topic-color: var(--cyan);
  --topic-rgb: 81 200 255;
  --topic-soft: rgb(var(--topic-rgb) / .12);
  --topic-faint: rgb(var(--topic-rgb) / .055);
}

body[data-topic="varnost"],
[data-topic="varnost"] {
  --topic-color: #FF647C;
  --topic-rgb: 255 100 124;
}
body[data-topic="identitete"],
[data-topic="identitete"] {
  --topic-color: #A783FF;
  --topic-rgb: 167 131 255;
}
body[data-topic="ai"],
[data-topic="ai"] {
  --topic-color: #6C8CFF;
  --topic-rgb: 108 140 255;
}
body[data-topic="sistemi"],
[data-topic="sistemi"] {
  --topic-color: #42D6C5;
  --topic-rgb: 66 214 197;
}
body[data-topic="dokazi"],
[data-topic="dokazi"] {
  --topic-color: #51C8FF;
  --topic-rgb: 81 200 255;
}
body[data-topic="odlocanje"],
[data-topic="odlocanje"] {
  --topic-color: #F2B84B;
  --topic-rgb: 242 184 75;
}

.article-card[data-topic] {
  border-top: 2px solid rgb(var(--topic-rgb) / .72);
  background:
    radial-gradient(circle at 85% -8%, rgb(var(--topic-rgb) / .10), transparent 17rem),
    linear-gradient(155deg, rgb(11 28 46 / .88), rgb(4 13 24 / .82));
}
.article-card[data-topic] .article-meta,
.article-card[data-topic] .category-link,
.article-card[data-topic] .archive-signal > span:first-child {
  color: var(--topic-color);
}
.article-card[data-topic] .article-tag {
  border-color: rgb(var(--topic-rgb) / .18);
  background: rgb(var(--topic-rgb) / .045);
}
.article-card[data-topic]:hover {
  border-color: rgb(var(--topic-rgb) / .48);
  box-shadow: 0 20px 58px rgb(0 0 0 / .25), 0 0 36px rgb(var(--topic-rgb) / .055);
}

.theme-card[data-topic] {
  border-top: 2px solid rgb(var(--topic-rgb) / .72);
  background:
    radial-gradient(circle at 92% 6%, rgb(var(--topic-rgb) / .12), transparent 16rem),
    linear-gradient(155deg, rgb(11 28 46 / .89), rgb(4 13 24 / .80));
}
.theme-card[data-topic] .theme-code,
.theme-card[data-topic] .theme-link {
  color: var(--topic-color);
}
.theme-card[data-topic] .theme-visual {
  color: var(--topic-color);
}
.theme-card[data-topic]:hover {
  border-color: rgb(var(--topic-rgb) / .48);
  box-shadow: 0 20px 58px rgb(0 0 0 / .25), 0 0 40px rgb(var(--topic-rgb) / .07);
}

.filter-button[data-topic] {
  --filter-rgb: var(--topic-rgb);
}
.filter-button[data-topic]:hover {
  color: var(--topic-color);
  border-color: rgb(var(--topic-rgb) / .34);
}
.filter-button[data-topic].is-active {
  color: #fff;
  border-color: rgb(var(--topic-rgb) / .48);
  background: rgb(var(--topic-rgb) / .15);
  box-shadow: inset 0 0 0 1px rgb(var(--topic-rgb) / .05);
}

body[data-topic] .page-hero .eyebrow,
body[data-topic] .topic-index .theme-code,
body[data-topic] .article-meta,
body[data-topic] .category-link {
  color: var(--topic-color);
}
body[data-topic] .topic-index {
  border-color: rgb(var(--topic-rgb) / .28);
  background:
    radial-gradient(circle at 72% 24%, rgb(var(--topic-rgb) / .13), transparent 18rem),
    rgb(6 18 31 / .74);
}
body[data-topic] .topic-index::after {
  border-color: rgb(var(--topic-rgb) / .20);
}

/* ==========================================================================
   RC7 – Master Article / Reader UI
   ========================================================================== */
body.article-page[data-topic] {
  --article-accent: var(--topic-color);
  --article-rgb: var(--topic-rgb);
}

body.article-page .reading-progress {
  accent-color: var(--article-accent);
}
body.article-page .reading-progress::-webkit-progress-value {
  background: linear-gradient(90deg, var(--article-accent), var(--violet));
}
body.article-page .reading-progress::-moz-progress-bar {
  background: linear-gradient(90deg, var(--article-accent), var(--violet));
}

.article-hero {
  position: relative;
}
.article-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: min(70vh, 720px);
  pointer-events: none;
  background:
    radial-gradient(circle at 72% 35%, rgb(var(--article-rgb) / .10), transparent 28rem),
    radial-gradient(circle at 82% 20%, rgb(149 117 255 / .075), transparent 22rem);
  mask-image: linear-gradient(to bottom, black, transparent 94%);
}
.article-system-line,
.article-hero-grid {
  position: relative;
  z-index: 1;
}

.article-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .76fr);
  gap: clamp(34px, 7vw, 90px);
  align-items: center;
}
.article-hero-copy h1 {
  max-width: 800px;
}
.article-hero-copy .eyebrow {
  color: var(--article-accent);
}
.article-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.article-facts > span {
  min-width: 118px;
  padding: 11px 13px;
  border: 1px solid rgb(var(--article-rgb) / .18);
  border-radius: 13px;
  background: rgb(var(--article-rgb) / .035);
}
.article-facts strong {
  display: block;
  color: var(--text);
  font-size: .92rem;
}
.article-facts small {
  display: block;
  margin-top: 2px;
  color: var(--muted-2);
  font-size: .67rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.article-cover {
  position: relative;
  min-height: 420px;
  overflow: hidden;
  border: 1px solid rgb(var(--article-rgb) / .25);
  border-radius: 26px;
  background:
    radial-gradient(circle at 52% 44%, rgb(var(--article-rgb) / .16), transparent 23rem),
    radial-gradient(circle at 84% 18%, rgb(149 117 255 / .12), transparent 19rem),
    #05101c;
  box-shadow: 0 30px 90px rgb(0 0 0 / .34), inset 0 0 70px rgb(var(--article-rgb) / .025);
}
.article-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgb(var(--article-rgb) / .055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--article-rgb) / .055) 1px, transparent 1px);
  background-size: 36px 36px;
  mask-image: linear-gradient(to bottom, black, transparent 90%);
}
.cover-head {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 18px;
  right: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font: 800 .62rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}
.cover-head span:first-child { color: var(--article-accent); }
.cover-network {
  position: absolute;
  inset: 52px 18px 70px;
  width: calc(100% - 36px);
  height: calc(100% - 122px);
  color: var(--article-accent);
}
.network-grid {
  fill: none;
  stroke: rgb(var(--article-rgb) / .08);
  stroke-width: 1;
}
.network-link {
  fill: none;
  stroke: rgb(var(--article-rgb) / .28);
  stroke-width: 1.2;
}
.network-link.primary {
  stroke: rgb(var(--article-rgb) / .70);
  stroke-width: 1.7;
  filter: drop-shadow(0 0 7px rgb(var(--article-rgb) / .32));
}
.network-node {
  fill: #071522;
  stroke: var(--article-accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgb(var(--article-rgb) / .45));
}
.network-node.large {
  fill: rgb(var(--article-rgb) / .23);
}
.cover-network text {
  fill: rgb(225 238 255 / .64);
  font: 800 10px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 1px;
}
.cover-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 34%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--article-rgb) / .9), transparent);
  box-shadow: 0 0 18px rgb(var(--article-rgb) / .38);
  animation: article-cover-scan 7s ease-in-out infinite alternate;
}
.cover-readout {
  position: absolute;
  z-index: 3;
  left: 18px;
  right: 18px;
  bottom: 16px;
  padding: 13px 14px;
  border: 1px solid rgb(var(--article-rgb) / .20);
  border-radius: 14px;
  background: rgb(3 10 18 / .78);
  backdrop-filter: blur(12px);
}
.cover-readout span {
  display: block;
  color: var(--article-accent);
  font: 800 .6rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}
.cover-readout strong {
  display: block;
  margin-top: 5px;
  color: var(--text);
  font-size: .92rem;
}
@keyframes article-cover-scan {
  from { transform: translateY(-80px); opacity: .38; }
  to { transform: translateY(150px); opacity: .82; }
}

.article-rail {
  border-top-color: rgb(var(--article-rgb) / .42);
}
.article-rail .rail-block > span {
  color: var(--article-accent);
}
.rail-status p {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rail-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--article-accent);
  box-shadow: 0 0 12px rgb(var(--article-rgb) / .55);
}

.article-toc {
  border-left-color: rgb(var(--article-rgb) / .24);
}
.article-toc span {
  color: var(--article-accent);
}
.article-toc a.is-active {
  color: var(--article-accent);
}

.article-keyfigures {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 2.5rem 0;
  overflow: hidden;
  border: 1px solid rgb(var(--article-rgb) / .22);
  border-radius: 19px;
  background: rgb(var(--article-rgb) / .15);
}
.article-keyfigures > div {
  padding: 20px;
  background: #06121f;
}
.article-keyfigures strong {
  display: block;
  color: var(--article-accent);
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  letter-spacing: -.035em;
}
.article-keyfigures span {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  font-size: .82rem;
  line-height: 1.45;
}
.article-keyfigures small {
  grid-column: 1 / -1;
  padding: 10px 14px;
  color: var(--muted-2);
  background: #040c16;
  font-size: .72rem;
}

.evidence-profile {
  margin: 3.5rem 0 2.3rem;
  padding: clamp(22px, 4vw, 34px);
  border: 1px solid rgb(var(--article-rgb) / .25);
  border-radius: 22px;
  background:
    radial-gradient(circle at 92% 0%, rgb(var(--article-rgb) / .10), transparent 20rem),
    linear-gradient(150deg, rgb(9 25 42 / .92), rgb(4 13 24 / .90));
}
.evidence-profile-head h2 {
  margin: .3rem 0 .7rem !important;
}
.evidence-profile-head > p:last-child {
  margin: 0;
  color: var(--muted);
}
.evidence-profile-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 22px;
}
.evidence-profile-grid > div {
  min-height: 116px;
  padding: 15px;
  border: 1px solid rgb(var(--article-rgb) / .15);
  border-radius: 14px;
  background: rgb(2 10 18 / .42);
}
.evidence-profile-grid span {
  display: block;
  color: var(--article-accent);
  font: 800 .6rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .1em;
}
.evidence-profile-grid strong {
  display: block;
  margin-top: 10px;
  color: var(--text);
  font-size: 1rem;
}
.evidence-profile-grid small {
  display: block;
  margin-top: 5px;
  color: var(--muted-2);
  line-height: 1.35;
}

.evidence-sources {
  list-style: none;
  padding: 0;
  margin-left: 0;
}
.evidence-sources > li {
  position: relative;
  margin: 0 0 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-left: 2px solid rgb(var(--article-rgb) / .72);
  border-radius: 15px;
  background: rgb(7 19 31 / .72);
}
.source-head {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 9px;
}
.source-index {
  color: var(--article-accent);
  font: 900 .68rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.source-kind {
  padding: .23rem .42rem;
  border: 1px solid rgb(var(--article-rgb) / .24);
  border-radius: 999px;
  color: var(--article-accent);
  background: rgb(var(--article-rgb) / .055);
  font: 800 .57rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .08em;
}
.source-detail {
  color: var(--muted-2);
  font: 700 .58rem ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.related-grid a[data-topic] {
  border-top: 2px solid rgb(var(--topic-rgb) / .65);
  background:
    radial-gradient(circle at 85% 0%, rgb(var(--topic-rgb) / .10), transparent 14rem),
    rgb(6 18 31 / .74);
}
.related-grid a[data-topic] > span {
  color: var(--topic-color);
}

@media (max-width: 1080px) {
  .article-hero-grid {
    grid-template-columns: 1fr;
  }
  .article-cover {
    min-height: 360px;
  }
}
@media (max-width: 760px) {
  .article-cover { min-height: 310px; border-radius: 20px; }
  .article-facts { display: grid; grid-template-columns: repeat(3, 1fr); }
  .article-facts > span { min-width: 0; padding: 10px; }
  .article-facts strong { font-size: .78rem; }
  .article-facts small { font-size: .56rem; }
  .article-keyfigures { grid-template-columns: 1fr; }
  .article-keyfigures small { grid-column: 1; }
  .evidence-profile-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .article-facts { grid-template-columns: 1fr; }
  .evidence-profile-grid { grid-template-columns: 1fr; }
  .cover-network { left: 8px; right: 8px; width: calc(100% - 16px); }
}
@media (prefers-reduced-motion: reduce) {
  .cover-scan { animation: none; opacity: .45; }
}


/* ==========================================================================
   RC7 HOTFIX – eksplicitno tematsko barvanje
   Namen: odstraniti odvisnost vidnih elementov od globalnega --accent in
   zagotoviti jasno razlikovanje šestih vsebinskih skupin.
   ========================================================================== */

.article-card[data-topic] {
  position: relative;
  overflow: hidden;
  border-top-width: 3px;
}
.article-card[data-topic]::before {
  content: "";
  position: absolute;
  left: 0;
  top: 22px;
  bottom: 22px;
  width: 2px;
  border-radius: 2px;
  background: var(--topic-color);
  opacity: .72;
  box-shadow: 0 0 16px rgb(var(--topic-rgb) / .34);
}
.article-card[data-topic] .archive-signal > span:first-child,
.article-card[data-topic] .category-link {
  color: var(--topic-color) !important;
}
.article-card[data-topic] .article-tag {
  border-color: rgb(var(--topic-rgb) / .28) !important;
  color: rgb(var(--topic-rgb) / .90);
  background: rgb(var(--topic-rgb) / .045);
}
.article-card[data-topic]:hover {
  border-top-color: var(--topic-color) !important;
}

/* VARNOST – koralno rdeča */
.article-card[data-topic="varnost"] {
  --topic-color: #FF647C;
  --topic-rgb: 255 100 124;
  border-top-color: #FF647C !important;
  background:
    radial-gradient(circle at 86% -4%, rgb(255 100 124 / .16), transparent 18rem),
    linear-gradient(155deg, rgb(15 26 42 / .92), rgb(5 13 24 / .86));
}
.filter-button[data-filter="varnost"].is-active {
  color: #17070B !important;
  background: #FF647C !important;
  border-color: #FF647C !important;
  box-shadow: 0 0 22px rgb(255 100 124 / .18);
}

/* IDENTITETE – vijolična */
.article-card[data-topic="identitete"] {
  --topic-color: #A783FF;
  --topic-rgb: 167 131 255;
  border-top-color: #A783FF !important;
  background:
    radial-gradient(circle at 86% -4%, rgb(167 131 255 / .16), transparent 18rem),
    linear-gradient(155deg, rgb(15 24 43 / .92), rgb(5 13 24 / .86));
}
.filter-button[data-filter="identitete"].is-active {
  color: #100A1D !important;
  background: #A783FF !important;
  border-color: #A783FF !important;
  box-shadow: 0 0 22px rgb(167 131 255 / .18);
}

/* AI – električno modro-vijolična */
.article-card[data-topic="ai"] {
  --topic-color: #6C8CFF;
  --topic-rgb: 108 140 255;
  border-top-color: #6C8CFF !important;
  background:
    radial-gradient(circle at 86% -4%, rgb(108 140 255 / .17), transparent 18rem),
    linear-gradient(155deg, rgb(12 25 48 / .94), rgb(5 13 24 / .86));
}
.filter-button[data-filter="ai"].is-active {
  color: #071025 !important;
  background: #6C8CFF !important;
  border-color: #6C8CFF !important;
  box-shadow: 0 0 22px rgb(108 140 255 / .20);
}

/* SISTEMI – turkizno zelena */
.article-card[data-topic="sistemi"] {
  --topic-color: #42D6C5;
  --topic-rgb: 66 214 197;
  border-top-color: #42D6C5 !important;
  background:
    radial-gradient(circle at 86% -4%, rgb(66 214 197 / .15), transparent 18rem),
    linear-gradient(155deg, rgb(9 29 40 / .94), rgb(5 13 24 / .86));
}
.filter-button[data-filter="sistemi"].is-active {
  color: #031513 !important;
  background: #42D6C5 !important;
  border-color: #42D6C5 !important;
  box-shadow: 0 0 22px rgb(66 214 197 / .18);
}

/* DOKAZI – ledeno modra */
.article-card[data-topic="dokazi"] {
  --topic-color: #51C8FF;
  --topic-rgb: 81 200 255;
  border-top-color: #51C8FF !important;
  background:
    radial-gradient(circle at 86% -4%, rgb(81 200 255 / .16), transparent 18rem),
    linear-gradient(155deg, rgb(9 27 44 / .94), rgb(5 13 24 / .86));
}
.filter-button[data-filter="dokazi"].is-active {
  color: #04131B !important;
  background: #51C8FF !important;
  border-color: #51C8FF !important;
  box-shadow: 0 0 22px rgb(81 200 255 / .18);
}

/* ODLOČANJE – jantarno zlata */
.article-card[data-topic="odlocanje"] {
  --topic-color: #F2B84B;
  --topic-rgb: 242 184 75;
  border-top-color: #F2B84B !important;
  background:
    radial-gradient(circle at 86% -4%, rgb(242 184 75 / .14), transparent 18rem),
    linear-gradient(155deg, rgb(31 26 25 / .93), rgb(5 13 24 / .86));
}
.filter-button[data-filter="odlocanje"].is-active {
  color: #1B1202 !important;
  background: #F2B84B !important;
  border-color: #F2B84B !important;
  box-shadow: 0 0 22px rgb(242 184 75 / .18);
}

/* Mešani pogled: tudi kategorijski filtri dobijo diskretno barvno piko. */
.filter-button[data-topic] {
  position: relative;
  padding-left: 1.9rem;
}
.filter-button[data-topic]::before {
  content: "";
  position: absolute;
  left: .78rem;
  top: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  transform: translateY(-50%);
  background: var(--topic-color);
  box-shadow: 0 0 10px rgb(var(--topic-rgb) / .32);
}
.filter-button[data-topic].is-active::before {
  background: currentColor;
  box-shadow: none;
  opacity: .62;
}

/* Tematske strani in kartice v pogledu Teme naj uporabljajo isti signal. */
.theme-card[data-topic="varnost"] { --topic-color:#FF647C; --topic-rgb:255 100 124; border-top-color:#FF647C !important; }
.theme-card[data-topic="identitete"] { --topic-color:#A783FF; --topic-rgb:167 131 255; border-top-color:#A783FF !important; }
.theme-card[data-topic="ai"] { --topic-color:#6C8CFF; --topic-rgb:108 140 255; border-top-color:#6C8CFF !important; }
.theme-card[data-topic="sistemi"] { --topic-color:#42D6C5; --topic-rgb:66 214 197; border-top-color:#42D6C5 !important; }
.theme-card[data-topic="dokazi"] { --topic-color:#51C8FF; --topic-rgb:81 200 255; border-top-color:#51C8FF !important; }
.theme-card[data-topic="odlocanje"] { --topic-color:#F2B84B; --topic-rgb:242 184 75; border-top-color:#F2B84B !important; }

@media (max-width: 620px) {
  .article-card[data-topic]::before {
    top: 18px;
    bottom: 18px;
  }
}


/* ==========================================================================
   RC7.2 HOTFIX – kontrastni tematski filtri
   Aktivni gumb NI več zapolnjen s svetlo modro. Tema se pokaže z obrobo,
   signalno piko, diskretnim tintom in sijem; besedilo ostane belo.
   ========================================================================== */

.filter-bar .filter-button {
  color: #b8c9dc !important;
  background: rgb(7 19 32 / .76) !important;
  border-color: rgb(132 174 211 / .18) !important;
  box-shadow: none !important;
  transition:
    color .18s ease,
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease,
    transform .18s ease;
}

.filter-bar .filter-button:hover {
  color: #f5f9ff !important;
  background: rgb(12 28 45 / .96) !important;
  border-color: rgb(132 174 211 / .34) !important;
  transform: translateY(-1px);
}

/* Nevtralni filter "Vsi". */
.filter-bar .filter-button[data-filter="all"].is-active {
  color: #f7fbff !important;
  background: rgb(14 36 57 / .96) !important;
  border-color: rgb(81 200 255 / .46) !important;
  box-shadow:
    inset 0 0 0 1px rgb(81 200 255 / .05),
    0 0 20px rgb(81 200 255 / .08) !important;
}

/* Skupna logika za vse aktivne tematske filtre. */
.filter-bar .filter-button[data-topic].is-active {
  color: #ffffff !important;
  background: rgb(var(--topic-rgb) / .105) !important;
  border-color: rgb(var(--topic-rgb) / .72) !important;
  box-shadow:
    inset 0 0 0 1px rgb(var(--topic-rgb) / .07),
    0 0 22px rgb(var(--topic-rgb) / .11) !important;
  text-shadow: 0 1px 1px rgb(0 0 0 / .22);
}

/* Pika je vedno prava tematska barva, tudi ko je filter aktiven. */
.filter-bar .filter-button[data-topic]::before,
.filter-bar .filter-button[data-topic].is-active::before {
  background: var(--topic-color) !important;
  opacity: 1 !important;
  box-shadow: 0 0 10px rgb(var(--topic-rgb) / .42) !important;
}

/* Hover ne sme preglasiti stanja aktivnega filtra. */
.filter-bar .filter-button[data-topic].is-active:hover {
  color: #ffffff !important;
  background: rgb(var(--topic-rgb) / .145) !important;
  border-color: var(--topic-color) !important;
  box-shadow:
    inset 0 0 0 1px rgb(var(--topic-rgb) / .09),
    0 0 26px rgb(var(--topic-rgb) / .15) !important;
}

/* Izrecna barvna identiteta filtrov. */
.filter-bar .filter-button[data-filter="varnost"] {
  --topic-color: #FF647C;
  --topic-rgb: 255 100 124;
}
.filter-bar .filter-button[data-filter="identitete"] {
  --topic-color: #A783FF;
  --topic-rgb: 167 131 255;
}
.filter-bar .filter-button[data-filter="ai"] {
  --topic-color: #6C8CFF;
  --topic-rgb: 108 140 255;
}
.filter-bar .filter-button[data-filter="sistemi"] {
  --topic-color: #42D6C5;
  --topic-rgb: 66 214 197;
}
.filter-bar .filter-button[data-filter="dokazi"] {
  --topic-color: #51C8FF;
  --topic-rgb: 81 200 255;
}
.filter-bar .filter-button[data-filter="odlocanje"] {
  --topic-color: #F2B84B;
  --topic-rgb: 242 184 75;
}

/* Mobilno: ohrani kontrast in nekoliko zmanjša vizualno težo. */
@media (max-width: 620px) {
  .filter-bar .filter-button {
    padding-top: .58rem;
    padding-bottom: .58rem;
  }
  .filter-bar .filter-button[data-topic].is-active {
    box-shadow:
      inset 0 0 0 1px rgb(var(--topic-rgb) / .07),
      0 0 15px rgb(var(--topic-rgb) / .09) !important;
  }
}


/* RC8 Publisher: semantični vsebinski bloki */
.article-prose .content-lead{margin:0 0 1.8em;color:var(--text);font-size:1.18em;line-height:1.62;font-weight:520}
.article-prose h3{margin:2.1em 0 .7em;color:var(--text);line-height:1.18;letter-spacing:-.02em}
.content-quote{margin:2rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--article-accent,var(--accent));background:rgb(var(--article-rgb,81 200 255)/.055);border-radius:0 14px 14px 0}
.content-quote p{margin:0!important;color:#dce8f4;font-size:1.08em}.content-code{margin:2rem 0;padding:1.1rem 1.2rem;overflow:auto;border:1px solid var(--line);border-radius:15px;background:#020914;color:#dceaff;font:500 .9em ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}.content-code code::before{content:attr(data-language);display:block;margin-bottom:.8rem;color:var(--article-accent,var(--accent));font-size:.68rem;letter-spacing:.12em;text-transform:uppercase}
.content-callout{margin:2rem 0;padding:1.2rem 1.3rem;border:1px solid rgb(var(--article-rgb,81 200 255)/.24);border-radius:16px;background:rgb(var(--article-rgb,81 200 255)/.055)}.content-callout strong{display:block;margin-bottom:.45rem;color:var(--article-accent,var(--accent))}.content-callout p{margin:0!important}.content-callout.warning{--article-accent:#F2B84B;--article-rgb:242 184 75}.content-callout.finding{--article-accent:#42D6C5;--article-rgb:66 214 197}.content-callout.evidence{--article-accent:#51C8FF;--article-rgb:81 200 255}
.content-image{margin:2.4rem 0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#030a13}.content-image img{display:block;width:100%;height:auto}.content-image figcaption{padding:.75rem 1rem;color:var(--muted-2);font-size:.78rem;line-height:1.5}.content-image .image-source{color:var(--muted)}.article-prose .content-image.layout-standard{max-width:720px}.article-prose .content-image.layout-wide{width:min(100%,980px)}.article-prose .content-image.layout-full{width:min(1280px,calc(100vw - 36px));max-width:none;position:relative;left:50%;transform:translateX(-50%)}
.content-table-wrap{margin:2rem 0;overflow:auto;border:1px solid var(--line);border-radius:15px}.content-table{width:100%;border-collapse:collapse;min-width:520px;background:#06111d}.content-table th,.content-table td{padding:.78rem .9rem;text-align:left;border-bottom:1px solid var(--line)}.content-table th{color:var(--article-accent,var(--accent));font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;background:#071827}.content-table tr:last-child td{border-bottom:0}
/* ==========================================================================
   RC8.16 – THEME POLISH
   Strokovnejša in izrazitejša tematska diferenciacija.
   - brez navidezno odrezanih vogalov
   - močnejši, vendar umirjeni tematski signali
   - bolj čist "evidence console" / futuristični vizualni jezik
   ========================================================================== */

/* Tema ostane besedilno prepoznavna; barva je dodatni orientacijski signal. */
.theme-card[data-topic="varnost"] {
  --topic-color: #FF5D78;
  --topic-rgb: 255 93 120;
}
.theme-card[data-topic="identitete"] {
  --topic-color: #B088FF;
  --topic-rgb: 176 136 255;
}
.theme-card[data-topic="ai"] {
  --topic-color: #7F98FF;
  --topic-rgb: 127 152 255;
}
.theme-card[data-topic="sistemi"] {
  --topic-color: #36DFC7;
  --topic-rgb: 54 223 199;
}
.theme-card[data-topic="dokazi"] {
  --topic-color: #4DD8FF;
  --topic-rgb: 77 216 255;
}
.theme-card[data-topic="odlocanje"] {
  --topic-color: #FFC44D;
  --topic-rgb: 255 196 77;
}

.theme-grid {
  gap: 20px;
}

.theme-card,
.theme-card[data-topic] {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  min-height: 322px;
  padding: 24px;

  /*
   * Prejšnji clip-path je optično "odrezal" zgornji desni in spodnji levi kot.
   * Kartica je sedaj geometrijsko čista; futuristični značaj ustvarjajo
   * tematski signal, notranji HUD in svetlobni sloji.
   */
  clip-path: none !important;
  border-radius: 23px;

  border: 1px solid rgb(119 175 217 / .21);
  border-top: 2px solid rgb(var(--topic-rgb) / .92) !important;

  background:
    radial-gradient(
      95% 76% at 100% 0%,
      rgb(var(--topic-rgb) / .155) 0%,
      rgb(var(--topic-rgb) / .055) 28%,
      transparent 58%
    ),
    linear-gradient(
      154deg,
      rgb(11 28 46 / .965) 0%,
      rgb(6 18 31 / .955) 52%,
      rgb(4 13 24 / .985) 100%
    );

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .025),
    inset 0 -1px 0 rgb(0 0 0 / .20),
    0 14px 38px rgb(0 0 0 / .18);

  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

/* Nežen notranji tematski "scan field". */
.theme-card[data-topic]::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  opacity: .72;
  background:
    linear-gradient(
      90deg,
      transparent 0 8%,
      rgb(var(--topic-rgb) / .022) 8% 8.25%,
      transparent 8.25% 100%
    ),
    linear-gradient(
      180deg,
      rgb(255 255 255 / .018),
      transparent 34%
    );
}

/*
 * Dekorativni element ostane v spodnjem desnem delu.
 * Ni več povezan z obliko zunanjega roba, zato vogal ne deluje poškodovan.
 */
.theme-card[data-topic]::after {
  content: "";
  position: absolute;
  z-index: 0;
  width: 112px;
  height: 112px;
  right: -58px;
  bottom: -58px;
  top: auto;
  border-radius: 50%;
  border: 1px solid rgb(var(--topic-rgb) / .17);
  background: transparent;
  box-shadow:
    0 0 0 22px rgb(var(--topic-rgb) / .022),
    0 0 0 44px rgb(var(--topic-rgb) / .012);
  pointer-events: none;
}

/* Vsebina mora vedno ostati nad dekorativnimi sloji. */
.theme-card[data-topic] > * {
  position: relative;
  z-index: 1;
}

.theme-card[data-topic]:hover {
  transform: translateY(-5px);
  border-color: rgb(var(--topic-rgb) / .54) !important;
  border-top-color: var(--topic-color) !important;
  background:
    radial-gradient(
      100% 80% at 100% 0%,
      rgb(var(--topic-rgb) / .205) 0%,
      rgb(var(--topic-rgb) / .072) 31%,
      transparent 61%
    ),
    linear-gradient(
      154deg,
      rgb(12 30 49 / .985) 0%,
      rgb(6 18 31 / .97) 52%,
      rgb(4 13 24 / .99) 100%
    );
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .032),
    0 22px 58px rgb(0 0 0 / .27),
    0 0 38px rgb(var(--topic-rgb) / .095);
}

.theme-card[data-topic]:focus-visible {
  outline: none;
  border-color: rgb(var(--topic-rgb) / .72) !important;
  box-shadow:
    0 0 0 3px rgb(var(--topic-rgb) / .12),
    0 20px 54px rgb(0 0 0 / .25);
}

/* Zgornja sistemska oznaka. */
.theme-card[data-topic] .theme-code {
  color: var(--topic-color) !important;
  font-weight: 880;
  letter-spacing: .145em;
}

.theme-card[data-topic] .theme-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  min-height: 24px;
  padding: .24rem .48rem;

  border: 1px solid rgb(var(--topic-rgb) / .20);
  border-radius: 999px;

  color: rgb(var(--topic-rgb) / .87);
  background: rgb(var(--topic-rgb) / .045);

  font-size: .60rem;
  letter-spacing: .105em;
}

.theme-card[data-topic] .theme-count::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: 0 0 5px;
  border-radius: 50%;
  background: var(--topic-color);
  box-shadow: 0 0 9px rgb(var(--topic-rgb) / .46);
}

/* HUD / mini vizual dobi barvo lastne teme namesto enake modro-vijolične sheme. */
.theme-card[data-topic] .theme-visual {
  position: relative;
  height: 68px;
  margin: 17px 0 12px;
  overflow: hidden;

  border: 1px solid rgb(var(--topic-rgb) / .12);
  border-radius: 13px;

  background:
    linear-gradient(
      90deg,
      rgb(var(--topic-rgb) / .082),
      rgb(var(--topic-rgb) / .026) 44%,
      transparent 100%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 61px,
      rgb(255 255 255 / .035) 61px 62px
    ),
    linear-gradient(
      180deg,
      rgb(255 255 255 / .016),
      rgb(255 255 255 / .004)
    );

  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .018),
    inset 0 -1px 0 rgb(var(--topic-rgb) / .055);
}

.theme-card[data-topic] .theme-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      transparent 0 78%,
      rgb(var(--topic-rgb) / .11) 78% 79%,
      transparent 79%
    ),
    linear-gradient(
      90deg,
      transparent 0 17%,
      rgb(var(--topic-rgb) / .10) 17% 17.35%,
      transparent 17.35% 42%,
      rgb(var(--topic-rgb) / .08) 42% 42.35%,
      transparent 42.35%
    );
}

.theme-card[data-topic] .theme-visual span {
  bottom: 12px;
  width: 8px;
  border-radius: 999px 999px 2px 2px;
  background:
    linear-gradient(
      180deg,
      rgb(238 247 255 / .94),
      var(--topic-color) 50%,
      rgb(var(--topic-rgb) / .72)
    );
  box-shadow:
    0 0 13px rgb(var(--topic-rgb) / .25);
}

.theme-card[data-topic] .theme-visual i {
  background: var(--topic-color);
  box-shadow:
    -43px 18px 0 -2px rgb(var(--topic-rgb) / .93),
    0 0 17px rgb(var(--topic-rgb) / .42);
}

/* Besedilna hierarhija ostane nevtralna in strokovna. */
.theme-card[data-topic] h3 {
  margin: 28px 0 12px;
  max-width: 13ch;
  color: #F5F8FC;
}

.theme-card[data-topic] p {
  color: rgb(192 208 225 / .84);
}

/* Barva je najmočnejša pri dejanju, ne pri celotnem naslovu. */
.theme-card[data-topic] .theme-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--topic-color) !important;
  text-shadow: 0 0 16px rgb(var(--topic-rgb) / .11);
  transition: filter .18s ease, transform .18s ease;
}

.theme-card[data-topic]:hover .theme-link {
  filter: brightness(1.11);
  transform: translateX(2px);
}

/* Na manjših zaslonih ostane geometrija enaka, brez "odrezanih" vogalov. */
@media (max-width: 1024px) {
  .theme-grid {
    gap: 18px;
  }

  .theme-card,
  .theme-card[data-topic] {
    min-height: 296px;
  }
}

@media (max-width: 760px) {
  .theme-card,
  .theme-card[data-topic] {
    min-height: 266px;
    padding: 21px;
    border-radius: 20px;
  }

  .theme-card[data-topic] .theme-visual {
    height: 58px;
  }

  .theme-card[data-topic] h3 {
    max-width: none;
    margin-top: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-card[data-topic],
  .theme-card[data-topic]:hover,
  .theme-card[data-topic] .theme-link,
  .theme-card[data-topic]:hover .theme-link {
    transform: none;
    transition: none;
  }
}

/* === VESTIGO VISUAL POLISH v0.8.20 === */
body.future-ui {
  background:
    radial-gradient(circle at 16% 10%, rgb(74 198 255 / .11), transparent 28rem),
    radial-gradient(circle at 83% 13%, rgb(150 117 255 / .10), transparent 26rem),
    radial-gradient(circle at 52% 115%, rgb(29 106 214 / .13), transparent 42rem),
    linear-gradient(180deg, #020611 0%, #040c18 28%, #061120 56%, #020711 100%);
}
body.future-ui::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  opacity:.34;
  background-image:
    linear-gradient(rgb(105 183 235 / .035) 1px, transparent 1px),
    linear-gradient(90deg, rgb(105 183 235 / .035) 1px, transparent 1px),
    radial-gradient(circle at 15% 18%, rgb(85 201 255 / .16) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 24%, rgb(148 112 255 / .18) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 74%, rgb(85 201 255 / .14) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 68%, rgb(148 112 255 / .12) 0 2px, transparent 3px);
  background-size:38px 38px, 38px 38px, auto, auto, auto, auto;
  background-position:center center, center center, 0 0, 0 0, 0 0, 0 0;
}
body.future-ui::after {
  background:
    linear-gradient(115deg, transparent 14%, rgb(87 209 255 / .026) 42%, transparent 68%),
    radial-gradient(circle at 68% 10%, rgb(148 112 255 / .06), transparent 28%),
    radial-gradient(circle at 18% 88%, rgb(75 194 255 / .05), transparent 30%);
}

.hero,
.page-hero,
.presentation-section {
  position:relative;
  overflow:hidden;
  isolation:isolate;
}
.hero::before,
.page-hero::before,
.presentation-section::before {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 12% 18%, rgb(80 207 255 / .09), transparent 26%),
    radial-gradient(circle at 78% 16%, rgb(150 117 255 / .10), transparent 23%),
    radial-gradient(circle at 62% 78%, rgb(57 139 255 / .07), transparent 18%);
}
.hero::after,
.page-hero::after,
.presentation-section::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.28;
  background-image:
    linear-gradient(rgb(88 191 245 / .028) 1px, transparent 1px),
    linear-gradient(90deg, rgb(88 191 245 / .028) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(to bottom, rgb(0 0 0 / .92), rgb(0 0 0 / .46) 55%, transparent 88%);
}

.hero-title,
.page-title,
.section-heading h2,
.presentation-lead h2 {
  text-shadow:
    0 0 18px rgb(115 215 255 / .05),
    0 18px 58px rgb(0 0 0 / .28);
}
.hero-title-wrap,
.page-title-wrap {
  position:relative;
  display:inline-block;
  max-width:100%;
}
.hero-title-wrap {
  padding-bottom:clamp(42px, 4.6vw, 62px);
}
.page-title-wrap {
  padding-bottom:clamp(30px, 3.6vw, 44px);
}
.hero-title-wrap::before,
.page-title-wrap::before {
  content:"";
  position:absolute;
  left:-4%;
  right:6%;
  top:-6%;
  height:78%;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 34%, rgb(78 204 255 / .16), transparent 28%),
    radial-gradient(circle at 78% 18%, rgb(149 113 255 / .13), transparent 25%);
  filter:blur(22px);
  opacity:.75;
}
.hero-title-wrap::after,
.page-title-wrap::after {
  content:"";
  position:absolute;
  left:1%;
  right:14%;
  bottom:16px;
  height:1px;
  background:linear-gradient(90deg, rgb(80 207 255 / .44), rgb(150 117 255 / .22), transparent 82%);
  box-shadow:0 0 30px rgb(80 207 255 / .15);
  pointer-events:none;
}
.hero-title,
.page-title {
  position:relative;
  z-index:1;
}
.hero-title-reflection,
.page-title-reflection {
  position:absolute;
  left:0;
  width:100%;
  overflow:hidden;
  pointer-events:none;
  user-select:none;
  transform:scaleY(-1) skewX(-4deg);
  transform-origin:top;
  filter:blur(.85px);
  opacity:.22;
  -webkit-mask-image:linear-gradient(to bottom, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .32) 42%, transparent 88%);
  mask-image:linear-gradient(to bottom, rgb(0 0 0 / .9) 0%, rgb(0 0 0 / .32) 42%, transparent 88%);
}
.hero-title-reflection {
  top:calc(100% - clamp(26px, 3vw, 40px));
  height:clamp(42px, 4.6vw, 62px);
}
.page-title-reflection {
  top:calc(100% - clamp(18px, 2.5vw, 28px));
  height:clamp(26px, 3.5vw, 40px);
}
.hero-title-reflection .hero-title,
.page-title-reflection .page-title {
  margin:0;
  opacity:.95;
}

.page-hero {
  padding:96px 0 54px;
}
.page-lead {
  position:relative;
  z-index:1;
}
.presentation-lead h2,
.section-heading h2 {
  position:relative;
  display:inline-block;
}
.presentation-lead h2::after,
.section-heading h2::after {
  content:"";
  position:absolute;
  left:0;
  right:18%;
  bottom:-10px;
  height:1px;
  background:linear-gradient(90deg, rgb(80 207 255 / .36), rgb(150 117 255 / .14), transparent 80%);
  opacity:.7;
}

.hero-visual {
  border-color:rgb(81 191 245 / .28);
  background:
    radial-gradient(circle at 46% 40%, rgb(75 194 255 / .18), transparent 33%),
    radial-gradient(circle at 77% 24%, rgb(147 112 255 / .15), transparent 30%),
    radial-gradient(circle at 24% 82%, rgb(58 138 255 / .08), transparent 18%),
    linear-gradient(145deg, rgb(255 255 255 / .03), transparent 56%),
    #050f1c;
  box-shadow:inset 0 0 60px rgb(70 189 255 / .03), 0 34px 96px rgb(0 0 0 / .30);
}
.hero-visual::before {
  background-image:
    linear-gradient(hsl(var(--hue) 80% 65% / .055) 1px, transparent 1px),
    linear-gradient(90deg, hsl(var(--hue) 80% 65% / .055) 1px, transparent 1px),
    radial-gradient(circle at 20% 28%, rgb(80 207 255 / .14) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 33%, rgb(150 117 255 / .16) 0 2px, transparent 3px),
    radial-gradient(circle at 64% 66%, rgb(80 207 255 / .14) 0 2px, transparent 3px),
    radial-gradient(circle at 34% 58%, rgb(150 117 255 / .14) 0 2px, transparent 3px);
  background-size:30px 30px, 30px 30px, auto, auto, auto, auto;
}
.visual-caption {
  box-shadow:0 16px 40px rgb(0 0 0 / .24);
}
.panel,
.featured,
.archive-card,
.theme-card {
  backdrop-filter:blur(10px);
}

@media (max-width: 820px) {
  .page-title-wrap::after,
  .hero-title-wrap::after { bottom: 10px; }
  .hero-title-wrap { padding-bottom: 36px; }
  .page-title-wrap { padding-bottom: 24px; }
  .hero-title-reflection { height: 32px; }
  .page-title-reflection { height: 22px; }
}

/* =======================================================================
   VESTIGO v0.8.21 — DIRECTIONAL TITLE ECHO / FINISH
   Vizualni popravek: brez HTML, JS, člankov ali uredniškega kataloga.
   ======================================================================= */

/* Naslov in odsev imata isti line-break, a odsev ne pripada več odrezanemu pasu. */
body.future-ui .hero-title-wrap,
body.future-ui .page-title-wrap {
  position: relative;
  display: inline-block;
  isolation: isolate;
  overflow: visible;
  max-width: 100%;
}
body.future-ui .hero-title-wrap {
  padding-bottom: clamp(25px, 2.7vw, 39px);
}
body.future-ui .page-title-wrap {
  padding-bottom: clamp(15px, 1.8vw, 25px);
}
body.future-ui .hero-title-wrap > .hero-title,
body.future-ui .page-title-wrap > .page-title {
  position: relative;
  z-index: 2;
}

/* Na KR-NEKI.SI je optični občutek prostorski, ne navpično zrcaljen.
   Odsev prestavimo za črke in v desno-zgornjo smer. */
body.future-ui .hero-title-reflection,
body.future-ui .page-title-reflection {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  right: auto;
  bottom: auto;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow: visible;
  opacity: .28;
  transform: translate3d(clamp(22px, 3.3vw, 46px), -10px, 0)
             skewX(-14deg) scaleY(.97);
  transform-origin: left top;
  filter: blur(1.55px);
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .25), rgb(0 0 0 / .92) 48%, rgb(0 0 0 / .45));
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .25), rgb(0 0 0 / .92) 48%, rgb(0 0 0 / .45));
  pointer-events: none;
  user-select: none;
}
body.future-ui .hero-title-reflection .hero-title,
body.future-ui .page-title-reflection .page-title {
  margin: 0;
  opacity: 1;
  text-shadow: 0 0 18px rgb(70 186 255 / .28), 0 0 28px rgb(90 102 201 / .12);
  color: #2d7fad;
  -webkit-text-fill-color: #2d7fad;
}
body.future-ui .hero-title-reflection .accent {
  background: none;
  color: #6c77dd;
  -webkit-text-fill-color: #6c77dd;
}

/* Linija je zaključek naslova, ne rob vidnega dela odseva. */
body.future-ui .hero-title-wrap::after,
body.future-ui .page-title-wrap::after {
  z-index: 3;
  bottom: 4px;
  opacity: .8;
}

/* Dolg uvodni opis nad H1 na strani Članki: nikoli ne sme segati iz viewporta. */
body.future-ui .page-hero .eyebrow {
  max-width: min(100%, 960px);
  overflow-wrap: anywhere;
  line-height: 1.58;
}

@media (max-width: 820px) {
  body.future-ui .hero-title-reflection,
  body.future-ui .page-title-reflection {
    transform: translate3d(18px, -6px, 0) skewX(-11deg) scaleY(.98);
    opacity: .21;
    filter: blur(1.15px);
  }
  body.future-ui .hero-title-wrap { padding-bottom: 24px; }
  body.future-ui .page-title-wrap { padding-bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  body.future-ui .hero-title-reflection,
  body.future-ui .page-title-reflection { transition: none; animation: none; }
}

/* ====================================================================
   VESTIGO v0.8.24 — LYING PERSPECTIVE / PER-LINE TITLE REFLECTION
   Letterforms are flattened on a plane receding behind the real title.
   The structural spans are inserted into the decorative mirror only.
   ==================================================================== */
body.future-ui .hero-title-reflection,
body.future-ui .page-title-reflection {
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  height: auto;
  overflow: visible;
  opacity: 1;
  transform: none;
  transform-origin: center center;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
  user-select: none;
}
/* Original content is not painted; only the two transformed line elements are. */
body.future-ui .hero-title-reflection .hero-title {
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  margin: 0;
}
body.future-ui .hero-title-reflection .hero-title > .echo-line {
  display: block;
  position: relative;
  color: #0f476f;
  -webkit-text-fill-color: #0f476f;
  background: none;
  opacity: .60;
  transform-origin: 40% 100%;
  transform: translate3d(clamp(34px, 4.2vw, 52px), -40px, 0)
             perspective(650px) rotateX(67deg) skewX(-14deg);
  text-shadow: 2px -2px 0 rgb(8 56 88 / .65),
               5px -5px 1px rgb(7 47 75 / .38),
               8px -7px 2px rgb(7 47 75 / .18);
  filter: blur(.65px);
  will-change: auto;
}
body.future-ui .hero-title-reflection .hero-title > .echo-line.accent {
  color: #12527c;
  -webkit-text-fill-color: #12527c;
  background: none;
}
/* One-line page titles: the same receding plane, reduced to stay discreet. */
body.future-ui .page-title-reflection {
  transform: translate3d(clamp(18px, 2.4vw, 36px), -13px, 0)
             perspective(650px) rotateX(64deg) skewX(-10deg);
  transform-origin: 40% 100%;
  opacity: .39;
  filter: blur(.6px);
}
body.future-ui .page-title-reflection .page-title {
  margin: 0;
  color: #114669;
  -webkit-text-fill-color: #114669;
  text-shadow: 3px -2px 1px rgb(8 47 77 / .35);
}
body.future-ui .hero-title-wrap > .hero-title,
body.future-ui .page-title-wrap > .page-title { z-index: 2; }
@media (max-width: 820px) {
  body.future-ui .hero-title-reflection .hero-title > .echo-line {
    opacity: .45;
    transform: translate3d(19px, -20px, 0) perspective(500px) rotateX(68deg) skewX(-8deg);
    filter: blur(.55px);
  }
  body.future-ui .page-title-reflection {
    opacity: .27;
    transform: translate3d(14px, -8px, 0) perspective(510px) rotateX(64deg) skewX(-7deg);
  }
}
@media (max-width: 420px) {
  body.future-ui .hero-title-reflection .hero-title > .echo-line {
    opacity: .27;
    transform: translate3d(13px,-14px,0) perspective(460px) rotateX(68deg) skewX(-6deg);
  }
  body.future-ui .page-title-reflection { opacity: .22; }
}
@media (prefers-reduced-motion: reduce) {
  body.future-ui .hero-title-reflection,
  body.future-ui .page-title-reflection,
  body.future-ui .hero-title-reflection .echo-line { animation: none; transition: none; }
}