/* N3ONLAB — Silver Lining Glitch / Cybernetics
   Dark base, metallic silver gradients, chrome highlights, restrained neon. */
:root {
  --bg: #06070a;
  --bg-2: #0b0d12;
  --neon-rgb: 62 242 236;
  --neon2-rgb: 255 63 211;
  --bg-rgb: 6 7 10;
  --panel-rgb: 17 20 27;
  --panel: rgb(var(--panel-rgb) / .82);
  --panel-2: rgb(var(--panel-rgb) / .92);
  --text: #d8dde6;
  --muted: #8c95a5;
  --silver: #c9d0db;
  --silver-hi: #f5f7fb;
  --line: rgba(205, 214, 228, .14);
  --line-hi: rgba(225, 232, 244, .38);
  --neon: #3ef2ec;
  --neon-2: #ff3fd3;
  --chrome: linear-gradient(135deg, #ffffff 0%, #b9c0cc 18%, #5f6876 38%, #eef1f6 55%, #8d96a5 78%, #dfe4ec 100%);
  --chrome-soft: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02) 40%, rgba(0,0,0,.15));
  --radius: 4px;
  --radius-lg: 10px;
  --gap: clamp(14px, 2.4vw, 24px);
  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --mono: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  font: 400 1rem/var(--lh, 1.65) var(--font); color: var(--text);
  background:
    radial-gradient(1200px 600px at 85% -10%, rgb(var(--neon-rgb) / var(--fx-bg-glow, .07)), transparent 60%),
    radial-gradient(900px 500px at -10% 10%, rgb(var(--neon2-rgb) / calc(var(--fx-bg-glow, .07) * .7)), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-color: var(--bg);
  background-attachment: fixed;
}
/* subtle scanlines */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 100;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / var(--fx-scan, .018)) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--silver-hi); text-decoration-color: rgb(var(--neon-rgb) / .5); text-underline-offset: 3px; }
a:hover { color: var(--neon); }
:focus-visible { outline: 2px solid var(--neon); outline-offset: 3px; border-radius: 2px; }
::selection { background: rgb(var(--neon-rgb) / .3); color: #fff; }

.wrap { width: 100%; max-width: var(--wrap, 1180px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .wrap { padding: 0 28px; } }
main { flex: 1; padding-bottom: 64px; }
main:focus { outline: none; }

.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 200; background: var(--silver-hi); color: #000; padding: 8px 14px; border-radius: var(--radius); font-weight: 700; }
.skip:focus { top: 12px; }

.preview-banner {
  position: sticky; top: 0; z-index: 60; text-align: center; padding: 6px 12px;
  font: 700 .75rem/1.4 var(--mono); letter-spacing: .14em; color: #000;
  background: repeating-linear-gradient(45deg, var(--neon) 0 14px, #9ffcf8 14px 28px);
}

/* ---------- chrome text & glitch ---------- */
.chrome-text {
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.glitch { position: relative; display: inline-block; }
.glitch::before, .glitch::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none; opacity: 0;
}
.glitch::before { color: var(--neon); transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); }
.glitch::after  { color: var(--neon-2); transform: translate(2px, 0); clip-path: inset(55% 0 0 0); }
a:hover > .glitch::before, a:focus-visible > .glitch::before, .glitch.is-glitching::before { animation: glitch-a .6s steps(2) both; }
a:hover > .glitch::after,  a:focus-visible > .glitch::after,  .glitch.is-glitching::after  { animation: glitch-b .6s steps(2) both; }
@keyframes glitch-a {
  0% { opacity: .9; clip-path: inset(10% 0 70% 0); transform: translate(-3px, -1px); }
  25% { clip-path: inset(60% 0 10% 0); transform: translate(3px, 1px); }
  50% { clip-path: inset(30% 0 45% 0); transform: translate(-2px, 0); }
  75% { clip-path: inset(80% 0 2% 0); transform: translate(2px, -1px); }
  100% { opacity: 0; }
}
@keyframes glitch-b {
  0% { opacity: .8; clip-path: inset(70% 0 5% 0); transform: translate(3px, 1px); }
  33% { clip-path: inset(5% 0 75% 0); transform: translate(-3px, 0); }
  66% { clip-path: inset(40% 0 35% 0); transform: translate(2px, 1px); }
  100% { opacity: 0; }
}
.glitch-soft { text-shadow: -1px 0 rgb(var(--neon-rgb) / .35), 1px 0 rgb(var(--neon2-rgb) / .25); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--bg-rgb) / .78); backdrop-filter: blur(12px) saturate(1.2); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header::after { /* silver lining */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.55) 30%, var(--neon) 50%, rgba(255,255,255,.55) 70%, transparent);
  opacity: .55;
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; min-height: 64px; flex-wrap: wrap; padding-block: 8px; }
.logo {
  font: 800 1.35rem/1 var(--mono); letter-spacing: .18em; text-decoration: none; text-transform: uppercase;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.logo:hover { color: transparent; }
.main-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.main-nav a {
  font: 600 .78rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--muted); padding: 10px 12px; border: 1px solid transparent; border-radius: var(--radius);
}
.main-nav a:hover { color: var(--silver-hi); border-color: var(--line); }
.main-nav a[aria-current="page"] { color: var(--silver-hi); border-color: var(--line-hi); background: var(--chrome-soft); }

/* ---------- typography ---------- */
h1, h2, h3 { font-family: var(--font-h, var(--font)); color: var(--silver-hi); line-height: 1.2; letter-spacing: -.01em; }
.page-title { font-size: clamp(1.8rem, 5vw, 3rem); margin: 36px 0 8px; font-weight: 800; overflow-wrap: anywhere; }
.page-sub { display: block; font: 500 .9rem/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.section-title, .panel-title {
  font: 700 .8rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--silver);
  display: flex; align-items: center; gap: 12px; margin: 48px 0 18px;
}
.section-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-hi), transparent); }
.panel-title { margin: 0 0 14px; }
.eyebrow { font: 600 .75rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); margin: 0 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lede { font-size: 1.12rem; color: var(--silver); max-width: 70ch; }
.count { font: 600 .7rem/1 var(--mono); color: var(--muted); padding: 3px 6px; border: 1px solid var(--line); border-radius: 999px; margin-left: 4px; }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 .75rem/1.5 var(--mono); letter-spacing: .06em; color: var(--muted); }
.crumbs li:not(:last-child)::after { content: "/"; margin-left: 6px; color: var(--line-hi); }
.crumbs a { color: var(--silver); text-decoration: none; }
.crumbs a:hover { color: var(--neon); }
.crumbs [aria-current] { color: var(--muted); max-width: 40ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 18px;
  font: 700 .8rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  color: var(--silver-hi); border: 1px solid var(--line-hi); border-radius: var(--radius);
  background: var(--chrome-soft), var(--panel-2); transition: border-color .2s, box-shadow .2s, transform .2s;
}
.btn:hover { color: #fff; border-color: var(--neon); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .25), 0 0 24px rgb(var(--neon-rgb) / .18); }
.btn--chrome { color: var(--bg-2); background: var(--chrome); border-color: rgba(255,255,255,.6); }
.btn--chrome:hover { color: #000; }

/* ---------- hero ---------- */
.hero {
  position: relative; display: grid; grid-template-columns: 1fr; overflow: hidden; margin-top: 20px;
  border: 1px solid var(--line-hi); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,0) 40%), var(--panel);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 30px 60px -30px rgba(0,0,0,.8);
}
.hero::before { /* corner brackets */
  content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--neon), var(--neon)) left top / 18px 1px no-repeat,
    linear-gradient(var(--neon), var(--neon)) left top / 1px 18px no-repeat,
    linear-gradient(var(--silver), var(--silver)) right bottom / 18px 1px no-repeat,
    linear-gradient(var(--silver), var(--silver)) right bottom / 1px 18px no-repeat;
  opacity: .7;
}
.hero-inner { position: relative; z-index: 1; padding: clamp(24px, 5vw, 48px); }
.hero-title { font-size: clamp(1.5rem, 4.2vw, 2.6rem); margin: 0 0 14px; overflow-wrap: anywhere; }
.hero-title a { text-decoration: none; color: var(--silver-hi); }
.hero-title a:hover { color: #fff; text-shadow: -2px 0 rgb(var(--neon-rgb) / .6), 2px 0 rgb(var(--neon2-rgb) / .45); }
.hero-text { color: var(--silver); max-width: 60ch; margin: 0 0 24px; }
.hero-img { width: 100%; height: 100%; max-height: 380px; object-fit: cover; filter: grayscale(.35) contrast(1.05); }
.hero-grid {
  min-height: 160px;
  background:
    linear-gradient(rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 28px 28px,
    radial-gradient(circle at 60% 40%, rgba(255,255,255,.18), transparent 55%);
  mask-image: linear-gradient(90deg, transparent, #000 40%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%);
}
@media (min-width: 860px) { .hero { grid-template-columns: 1.3fr 1fr; } }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--neon); box-shadow: 0 0 0 0 rgb(var(--neon-rgb) / .6); animation: pulse 2.4s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 10px rgb(var(--neon-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--neon-rgb) / 0); } }

.cat-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }
.cat-strip a {
  font: 600 .75rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none;
  padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--silver); background: var(--panel);
}
.cat-strip a:hover { border-color: var(--line-hi); color: var(--silver-hi); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.search { flex: 1 1 260px; }
.search input {
  width: 100%; min-height: 44px; padding: 10px 14px; font: 500 .95rem var(--font); color: var(--silver-hi);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
}
.search input:focus { border-color: var(--neon); outline: none; box-shadow: 0 0 0 3px rgb(var(--neon-rgb) / .15); }
.sort { display: inline-flex; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.sort button { min-height: 44px; padding: 0 14px; font: 600 .72rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel); border: 0; cursor: pointer; }
.sort button + button { border-left: 1px solid var(--line); }
.sort button[aria-pressed="true"] { color: var(--bg-2); background: var(--chrome); }

/* ---------- cards grid ---------- */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: var(--gap); }
.card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: transform .25s ease, border-color .25s, box-shadow .25s;
}
.card::before { /* chrome top edge */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 2;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent);
}
.card:hover, .card:focus-within { transform: translateY(-3px); border-color: var(--line-hi); box-shadow: 0 18px 40px -20px rgba(0,0,0,.9), 0 0 0 1px rgb(var(--neon-rgb) / .12); }
.card-media { aspect-ratio: 16 / 9; background: #0e1117; overflow: hidden; }
.card-media img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(.4) contrast(1.05); transition: filter .3s, transform .4s; }
.card:hover .card-media img { filter: none; transform: scale(1.03); }
.card-media--empty {
  aspect-ratio: auto; height: 6px;
  background: var(--chrome); opacity: .5;
}
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 20px; flex: 1; }
.card-meta { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font: 500 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.card-meta .cat { position: relative; z-index: 3; color: var(--neon); text-decoration: none; }
.card-title { margin: 0; font-size: 1.15rem; overflow-wrap: anywhere; }
.card-link { color: var(--silver-hi); text-decoration: none; }
.card-link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* whole card clickable */
.card-link:focus-visible { outline: none; }
.card:has(.card-link:focus-visible) { outline: 2px solid var(--neon); outline-offset: 2px; }
.card-excerpt { margin: 0; color: var(--muted); font-size: .95rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.card .chips { margin-top: auto; position: relative; z-index: 3; }

/* ---------- chips ---------- */
.chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px;
  font: 600 .75rem/1 var(--mono); letter-spacing: .04em; text-decoration: none; color: var(--silver);
  border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03);
}
.chip:hover { color: var(--neon); border-color: rgb(var(--neon-rgb) / .5); background: rgb(var(--neon-rgb) / .06); }
.chips--sm .chip { min-height: 26px; padding: 4px 9px; font-size: .68rem; }
.chips--lg .chip { min-height: 40px; padding: 8px 16px; font-size: .85rem; }

/* ---------- panels ---------- */
.panel { margin-top: 40px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); }
.panel--inline { margin: 20px 0; padding: 16px 18px; }
.list-head { margin: 22px 0 8px; }
.list-head .page-title { margin-top: 16px; }
.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: var(--gap); margin-top: 20px; }
.cat-card { margin: 0; }
.cat-card .panel-title a { color: var(--silver-hi); text-decoration: none; }
.cat-card p { color: var(--muted); margin: 0 0 12px; }
.empty { color: var(--muted); font-family: var(--mono); }

/* ---------- post ---------- */
.post { max-width: var(--read-w, 760px); margin: 0 auto; }
.post-head { padding: 24px 0 8px; border-bottom: 1px solid var(--line); margin-bottom: 28px; }
.post-kicker { display: flex; gap: 8px; font: 600 .75rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.post-kicker a { color: var(--neon); text-decoration: none; }
.post-kicker span { color: var(--muted); }
.post-title { font-size: clamp(1.9rem, 5.5vw, 3.1rem); margin: 14px 0; overflow-wrap: anywhere; }
.post-lede { font-size: 1.15rem; color: var(--silver); margin: 0 0 20px; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0 0 18px; font: 500 .8rem/1.5 var(--mono); color: var(--muted); }
.post-meta div { display: flex; gap: 6px; }
.post-meta dt { color: var(--muted); }
.post-meta dt::after { content: ":"; }
.post-meta dd { margin: 0; color: var(--silver); }
.post-figure { margin: 0 0 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.post-figure img { width: 100%; }

.prose { font-size: 1.08rem; }
.prose > * + * { margin-top: 1.1em; }
.prose h2, .prose h3, .prose h4 { margin-top: 2em; margin-bottom: .4em; }
.prose h2 { font-size: 1.55rem; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.prose h3 { font-size: 1.25rem; }
.prose p, .prose li { color: var(--text); }
.prose img { border-radius: var(--radius-lg); border: 1px solid var(--line); }
.prose blockquote { margin-left: 0; padding: 12px 18px; border-left: 2px solid var(--neon); background: rgb(var(--neon-rgb) / .04); color: var(--silver); }
.prose code { font: .9em var(--mono); padding: 2px 6px; background: rgba(255,255,255,.06); border: 1px solid var(--line); border-radius: 3px; }
.prose pre { overflow-x: auto; padding: 16px; background: #050608; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.prose pre code { padding: 0; border: 0; background: none; }
.prose hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--line-hi), transparent); margin: 2.4em 0; }
.prose a { overflow-wrap: anywhere; }
.source-box { margin: 32px 0 0; }
.link-list { margin: 0; padding-left: 18px; }
.link-list li + li { margin-top: 8px; }
.link-list .host { font: .75rem var(--mono); color: var(--muted); }
.related { margin-top: 24px; }


/* ---------- title + subtitle ---------- */
.post-hgroup { margin: 14px 0 16px; }
.post-hgroup .post-title { margin: 0; }
.post-subtitle {
  margin: 12px 0 0; font: 500 clamp(1.05rem, 2.6vw, 1.3rem)/1.45 var(--font); color: var(--silver);
  padding-left: 14px; border-left: 2px solid; border-image: linear-gradient(180deg, var(--neon), var(--neon-2)) 1;
}
.card-subtitle { margin: -4px 0 0; font-size: .92rem; line-height: 1.45; color: var(--silver); }
.hero-subtitle { margin: -6px 0 14px; font-size: 1.1rem; color: var(--silver-hi); opacity: .9; max-width: 60ch; }

/* ---------- tags on posts ---------- */
.post-tags { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.post-tags-k, .tag-panel-k { font: 700 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.tag-panel-k { margin: 16px 0 8px; }
.chip--combo { border-style: dashed; }

/* ---------- "in short" box ---------- */
.keypoints {
  position: relative; margin: 0 0 28px; padding: 18px 20px 18px 22px;
  background: linear-gradient(135deg, rgb(var(--neon-rgb) / .07), rgb(var(--neon2-rgb) / .03) 60%, transparent), var(--panel);
  border: 1px solid rgb(var(--neon-rgb) / .28); border-radius: var(--radius-lg);
}
.keypoints::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 2px; background: var(--neon); box-shadow: 0 0 12px var(--neon); }
.keypoints-title { margin: 0 0 10px; font: 700 .75rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--neon); }
.keypoints ul { margin: 0; padding-left: 20px; }
.keypoints li { color: var(--silver-hi); }
.keypoints li + li { margin-top: 6px; }
.keypoints li::marker { color: var(--neon); }

/* ---------- table of contents ---------- */
.toc { margin: 0 0 32px; padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.toc-title { margin: 0 0 10px; font: 700 .72rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 22px; columns: 2 220px; column-gap: 28px; }
.toc li { break-inside: avoid; padding: 3px 0; }
.toc li::marker { font: .8em var(--mono); color: var(--muted); }
.toc a { color: var(--silver); text-decoration: none; }
.toc a:hover { color: var(--neon); }
.prose h2[id], .prose h3[id] { scroll-margin-top: 90px; }

/* ---------- FAQ ---------- */
.faq { margin-top: 40px; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.faq-item + .faq-item { margin-top: 10px; }
.faq-item summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center;
  min-height: 48px; padding: 12px 18px; font-weight: 650; color: var(--silver-hi);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font: 700 1.2rem/1 var(--mono); color: var(--neon); transition: transform .2s; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { color: #fff; }
.faq-item p { margin: 0; padding: 0 18px 16px; color: var(--text); }

/* ---------- visual polish ---------- */
.post-title {
  background: linear-gradient(180deg, #fff 0%, #dfe5ee 55%, #9aa3b2 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none; filter: drop-shadow(-1px 0 rgb(var(--neon-rgb) / .35)) drop-shadow(1px 0 rgb(var(--neon2-rgb) / .25));
}
.card { background: linear-gradient(180deg, rgba(255,255,255,.035), transparent 40%), var(--panel); }
.card::after { /* neon underline that grows on hover */
  content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; z-index: 2;
  background: linear-gradient(90deg, var(--neon), var(--neon-2)); transition: width .35s ease;
}
.card:hover::after, .card:focus-within::after { width: 100%; }
.card-media--empty {
  height: 64px; opacity: 1;
  background:
    linear-gradient(rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, rgb(var(--neon-rgb) / .10) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(135deg, rgba(255,255,255,.10), transparent 60%), #0c0f15;
  border-bottom: 1px solid var(--line);
}
.main-nav a { position: relative; }
.main-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 1px; background: var(--neon); box-shadow: 0 0 8px var(--neon);
}
.cat-strip a { display: inline-flex; align-items: center; gap: 4px; transition: border-color .2s, color .2s, box-shadow .2s; }
.cat-strip a:hover { box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .2), 0 0 18px rgb(var(--neon-rgb) / .12); }
.prose { line-height: calc(var(--lh, 1.65) + .1); }
.prose > p:first-child { font-size: 1.12em; color: var(--silver-hi); }
.post-head { border-bottom: 0; position: relative; }
.post-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, var(--line-hi), var(--neon) 30%, transparent); opacity: .6; }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 80px 0; }
.notfound .eyebrow { justify-content: center; font-size: 1rem; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 24px 0; font: 500 .78rem/1.5 var(--mono); color: var(--muted); }
.footer-row { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.footer-row .chrome-text { font-weight: 800; letter-spacing: .18em; }
.site-footer a { color: var(--muted); }

/* ---------- mobile ---------- */
@media (max-width: 600px) {
  .header-row { min-height: 56px; }
  .main-nav { width: calc(100% + 32px); margin: 0 -16px; padding: 0 16px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 16px, #000 calc(100% - 24px), transparent); }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { flex: 0 0 auto; text-align: center; padding: 12px 10px; }
  .hero-inner .btn { width: 100%; justify-content: center; }
  .toolbar { flex-direction: column; align-items: stretch; }
  .search { flex: 0 0 auto; }
  .sort { width: 100%; }
  .sort button { flex: 1; }
  .card-body { padding: 16px; }
  .prose { font-size: 1.02rem; }
  .toc ol { columns: 1; }
  .keypoints { padding: 16px; }
}

/* ---------- motion & contrast preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .card:hover, .card:focus-within { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --line: rgba(230, 236, 245, .45); --muted: #b7bfcc; }
  body::before { display: none; }
}

/* ---------- footer links ---------- */
.footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.linklike { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-decoration-color: rgb(var(--neon-rgb) / .5); text-underline-offset: 3px; cursor: pointer; }
.linklike:hover { color: var(--neon); }
.prose .linklike { color: var(--silver-hi); }

/* ---------- cookie / external content notice ---------- */
.consent {
  position: fixed; z-index: 90; left: 16px; right: 16px; bottom: 16px; margin: 0 auto; max-width: 720px;
  padding: 18px 20px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0) 40%), rgba(12, 14, 19, .97);
  box-shadow: 0 20px 60px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.1);
}
.consent::before { content: ""; position: absolute; left: 20px; right: 20px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--neon), transparent); }
.consent-title { margin: 0 0 6px; font: 700 .78rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--silver-hi); }
.consent-text { margin: 0 0 14px; font-size: .92rem; color: var(--silver); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
@media (max-width: 600px) { .consent { left: 8px; right: 8px; bottom: 8px; padding: 16px; } .consent-actions .btn { flex: 1 1 100%; justify-content: center; } }

/* ---------- AI prompt ---------- */
.prompt-box { margin-top: 36px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background: #050608; overflow: hidden; }
.prompt-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: var(--chrome-soft), var(--panel-2); }
.prompt-head .panel-title { margin: 0; }
.prompt-text { margin: 0; padding: 18px; max-height: 520px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: .92rem/1.6 var(--mono); color: var(--silver-hi); }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: .72rem; }

/* ---------- video (click-to-load) ---------- */
.video-box { margin-top: 36px; }
.video-box .panel-title { margin-bottom: 12px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), transparent 60%), repeating-linear-gradient(0deg, rgb(var(--neon-rgb) / .05) 0 1px, transparent 1px 4px), #07080b; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-consent { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 16px; text-align: center; }
.video-title { margin: 0; font-weight: 700; color: var(--silver-hi); max-width: 50ch; }
.video-note { margin: 0; font-size: .8rem; color: var(--muted); max-width: 52ch; }
.video-link { font: .78rem var(--mono); }
@media (max-width: 480px) { .video-frame { aspect-ratio: 4 / 3; } .video-note { display: none; } }

/* ---------- downloads ---------- */
.dl-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.dl-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dl-list .host { font: .75rem var(--mono); color: var(--muted); }

/* ---------- legal pages ---------- */
.legal { max-width: 820px; }
.legal-dl { display: grid; grid-template-columns: minmax(140px, max-content) 1fr; gap: 8px 20px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.legal-dl dt { color: var(--muted); font: 600 .78rem/1.6 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.legal-dl dd { margin: 0; }
@media (max-width: 600px) { .legal-dl { grid-template-columns: 1fr; } .legal-dl dd { margin-bottom: 8px; } }
.missing { color: #ffb4b4; background: rgba(255, 63, 99, .12); padding: 0 4px; border-radius: 3px; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.cookie-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; }
.cookie-table th, .cookie-table td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.cookie-table th { font: 600 .7rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); background: var(--panel-2); }
.cookie-table tr:last-child td { border-bottom: 0; }
.muted-note { color: var(--muted); font-size: .85rem; }

/* ---------- draft badge (local preview only) ---------- */
.draft-badge { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 7px; font: 700 .62rem/1 var(--mono); letter-spacing: .12em; color: #000; background: #f5b84a; border-radius: 3px; }

/* ---------- series ---------- */
.series { margin: 0 0 28px; padding: 16px 18px; border: 1px solid var(--line-hi); border-left: 2px solid var(--neon); border-radius: var(--radius-lg); background: var(--panel); }
.series-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 10px; }
.series-head .eyebrow { margin: 0; }
.series-head b { color: var(--silver-hi); }
.series-pos { margin-left: auto; font: 600 .72rem var(--mono); color: var(--muted); }
.series-list { margin: 0 0 12px; padding-left: 22px; font-size: .95rem; }
.series-list li { margin: 4px 0; }
.series-list [aria-current] { color: var(--neon); font-weight: 600; }
.series-nav { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- prev / next ---------- */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
.pager-link { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; text-decoration: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--panel); }
.pager-link:hover { border-color: var(--line-hi); }
.pager-next { text-align: right; grid-column: 2; }
.pager-k { font: 600 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager-t { color: var(--silver-hi); font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 600px) { .pager { grid-template-columns: 1fr; } .pager-next { grid-column: 1; } }

/* ---------- combine tags / random ---------- */
.plus { color: var(--neon); margin: 0 .2em; }
.page-title a { color: inherit; text-decoration: none; }
.page-title a:hover { color: var(--neon); }
.chip-toggle { cursor: pointer; font-family: var(--mono); }
.chip-toggle[aria-pressed="true"] { color: #000; background: var(--chrome); border-color: #fff; }
.combiner .chips { margin: 12px 0; }
.combiner-status { font: 600 .8rem var(--mono); color: var(--neon); min-height: 1.4em; margin: 0 0 8px; }
.random-row { margin: 8px 0 0; }

/* ---------- link directory ---------- */
.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: var(--gap); }
.lcard { display: flex; flex-direction: column; gap: 10px; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); position: relative; transition: border-color .2s, box-shadow .2s; }
.lcard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); }
.lcard:hover, .lcard:focus-within { border-color: var(--line-hi); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .12); }
.lcard-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.lcard .host { font: .75rem var(--mono); color: var(--muted); }
.lcard-title { margin: 0; font-size: 1.1rem; overflow-wrap: anywhere; }
.lcard-title a { color: var(--silver-hi); text-decoration: none; }
.lcard-title a:hover { color: var(--neon); }
.lcard-desc { margin: 0; color: var(--text); font-size: .95rem; }
.lcard-foot { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font: 500 .74rem/1.4 var(--mono); color: var(--muted); margin-top: auto; }
.lcard-foot .cat { color: var(--neon); text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.lcard-foot .src { color: var(--silver); }
.lic { font: 700 .66rem/1 var(--mono); letter-spacing: .06em; padding: 4px 8px; border-radius: 999px; border: 1px solid; white-space: nowrap; }
.lic--open { color: #3ddc97; border-color: rgba(61,220,151,.45); background: rgba(61,220,151,.06); }
.lic--closed { color: #f5b84a; border-color: rgba(245,184,74,.45); }
.lic--unknown { color: var(--muted); border-color: var(--line); }
.check-inline { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 .78rem var(--mono); color: var(--silver); cursor: pointer; }
.check-inline input { width: 18px; height: 18px; accent-color: var(--neon); }

/* ---------- archive ---------- */
.btn-row-pub { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 24px; }
.archive-dl { max-width: 760px; }
.hash { font: .85rem var(--mono); overflow-wrap: anywhere; }
.file-list { columns: 2 280px; column-gap: 28px; }
.file-list li { break-inside: avoid; }

/* ---------- source card (curated articles) ---------- */
.source-card {
  margin: 0 0 28px; padding: 16px 20px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg);
  background: linear-gradient(90deg, rgba(255,255,255,.05), transparent 70%), var(--panel);
}
.source-card-k { margin: 0 0 6px; font: 700 .7rem/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.source-card-k a { color: var(--neon); text-decoration: none; }
.source-card-title { margin: 0; font-size: 1.1rem; font-weight: 700; }
.source-card-title a { text-decoration: none; }
.source-card-meta { margin: 4px 0 0; font: .78rem var(--mono); color: var(--muted); }
.source-quote { margin: 14px 0 0; padding: 10px 16px; border-left: 2px solid var(--neon-2); background: rgb(var(--neon2-rgb) / .05); color: var(--silver); font-style: italic; }
.source-quote p { margin: 0; }
.card-why { margin: 0; font: 600 .7rem/1.4 var(--mono); letter-spacing: .04em; color: var(--neon); opacity: .85; }
.host { font: .75rem var(--mono); color: var(--muted); margin: 0 0 10px; }

/* ---------- network map ---------- */
.net { margin: 24px 0 0; padding: 10px; border: 1px solid var(--line-hi); border-radius: var(--radius-lg); background:
  radial-gradient(circle at 50% 50%, rgb(var(--neon-rgb) / .06), transparent 70%),
  linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px,
  linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 32px 32px, #07090d; }
.net-svg { display: block; width: 100%; height: auto; }
/* pan & zoom (app.js): the stage catches the mouse wheel and drags; full screen / detached window fill the screen */
.net-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 2px 10px; }
.net-hint { font: 500 .72rem/1.4 var(--mono); color: var(--muted); }
.net-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.net-btns .btn { min-height: 34px; padding: 6px 10px; font-size: .68rem; }
.net.is-live .net-stage { height: min(72vh, 760px); overflow: hidden; cursor: grab; touch-action: none; border-radius: var(--radius); }
.net.is-live .net-stage.is-dragging { cursor: grabbing; }
.net.is-live .net-svg { width: 100%; height: 100%; user-select: none; -webkit-user-select: none; }
.net:fullscreen, .net-detached .net { display: flex; flex-direction: column; margin: 0; border-radius: 0; border: 0; padding: 10px; }
.net:fullscreen .net-stage, .net-detached .net .net-stage { flex: 1; height: auto; min-height: 0; }
.net:fullscreen .net-svg text, .net-detached .net-svg text { display: block; }
html.net-detached body > *:not(main), html.net-detached main > *:not(.net) { display: none !important; }
html.net-detached main { padding: 0; max-width: none; }
html.net-detached body, html.net-detached main, html.net-detached .net { height: 100vh; }
html.net-detached body::before { display: none; }
.net-svg a circle { transition: r .2s, fill-opacity .2s; }
.net-svg a:hover circle, .net-svg a:focus circle { fill-opacity: 1; stroke: #fff; }
.net-svg text { font-family: var(--mono); pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.net-svg line { transition: stroke-opacity .2s; }
.net.is-focus line { stroke-opacity: .05; }
.net.is-focus line.on { stroke-opacity: .9; stroke: var(--neon); }
.net.is-focus a:not(.on) { opacity: .35; }
.net-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 6px 2px; font: 600 .75rem/1.4 var(--mono); color: var(--silver); }
.net-legend span { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 600px) { .net-svg text { display: none; } }

/* ---------- home: video & links hub ---------- */
.mh-sub { display: flex; align-items: center; gap: 10px; margin: 26px 0 12px; font: 700 .78rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.mh-sub > span { color: var(--neon); }
.mh-all { margin-left: auto; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: none; color: var(--muted); }
.mh-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 12px; }
.mh-card {
  position: relative; display: flex; gap: 14px; align-items: flex-start; height: 100%; padding: 14px; text-decoration: none; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s, box-shadow .2s;
}
.mh-card:hover, .mh-card:focus-visible { color: var(--text); border-color: var(--line-hi); transform: translateY(-2px); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .15), 0 14px 30px -18px #000; }
.mh-card--video { flex-direction: column; }
.mh-thumb {
  position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgb(var(--neon2-rgb) / .18), transparent 60%), repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 1px, transparent 1px 3px), var(--bg-2);
  border: 1px solid var(--line);
}
.mh-play { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-size: 1.2rem; color: var(--bg-2); background: var(--chrome); box-shadow: 0 0 24px rgb(var(--neon2-rgb) / .35); transition: transform .2s; padding-left: 4px; }
.mh-card:hover .mh-play { transform: scale(1.1); }
.mh-favicon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; font: 800 1.1rem var(--mono); color: var(--neon); background: rgb(var(--neon-rgb) / .08); border: 1px solid rgb(var(--neon-rgb) / .3); }
.mh-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mh-k { font: 600 .68rem/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); overflow-wrap: anywhere; }
.mh-title { font-weight: 700; color: var(--silver-hi); line-height: 1.35; overflow-wrap: anywhere; }
.mh-desc { font-size: .88rem; color: var(--muted); line-height: 1.45; }
.mh-note { margin: 12px 0 0; font: .75rem var(--mono); color: var(--muted); }

/* pop-up dialog */
.pop { width: min(960px, calc(100vw - 24px)); max-height: calc(100vh - 24px); padding: 0; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-hi); border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 0 1px rgb(var(--neon-rgb) / .15); }
.pop::backdrop { background: rgba(3,4,6,.78); backdrop-filter: blur(4px); }
.pop-bar { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 18px; border-bottom: 1px solid var(--line); }
.pop-title { flex: 1; margin: 0; font-weight: 700; color: var(--silver-hi); overflow-wrap: anywhere; }
.pop-x { flex: 0 0 44px; height: 44px; font-size: 1.1rem; color: var(--silver); background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; }
.pop-x:hover { color: #fff; border-color: var(--neon); }
.pop-body { padding: 16px 18px 18px; }
.pop-video { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; }
.pop-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.pop-gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; }
.pop-note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); max-width: 60ch; }
.pop-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 12px 0 0; font-size: .9rem; }
.pop-k { margin: 0 0 8px; font: 600 .72rem var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pop-desc { margin: 0 0 16px; color: var(--silver); }
.pop-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 12px; }
.pop-read { display: inline-block; margin-bottom: 4px; }
@media (max-width: 600px) { .pop-btns .btn { width: 100%; justify-content: center; } .pop-body { padding: 12px; } }

/* ---------- category colours (cc-0…cc-7, same palette as the network map) ---------- */
.cc-0 { --cc: var(--neon); } .cc-1 { --cc: var(--neon-2); } .cc-2 { --cc: #c9d0db; } .cc-3 { --cc: #f5b84a; }
.cc-4 { --cc: #7c9cff; } .cc-5 { --cc: #3ddc97; } .cc-6 { --cc: #ff7a59; } .cc-7 { --cc: #b48cff; }

/* global category bar: second row of the sticky header */
.cat-bar { border-top: 1px solid var(--line); background: rgba(8, 10, 14, .6); }
.cat-bar-row { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 6px;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent); }
.cat-bar-row::-webkit-scrollbar { display: none; }
.cat-bar a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  font: 600 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted);
  border: 1px solid transparent; border-radius: 999px; transition: color .2s, border-color .2s, background .2s;
}
.cat-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc, var(--neon)); box-shadow: 0 0 8px var(--cc, var(--neon)); }
.cat-bar a:hover { color: var(--silver-hi); border-color: var(--line); }
.cat-bar a[aria-current] { color: var(--bg-2); background: var(--cc, var(--neon)); border-color: var(--cc, var(--neon)); }
.cat-bar a[aria-current] .cat-dot { background: var(--bg-2); box-shadow: none; }
html { scroll-padding-top: 130px; }

/* home: one block per main category */
.cat-section { position: relative; margin-top: 56px; padding: 22px clamp(14px, 3vw, 26px) 26px; border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--cc) 9%, transparent), transparent 45%), var(--panel); scroll-margin-top: 130px; }
.cat-section::before { content: ""; position: absolute; left: -1px; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: var(--cc); box-shadow: 0 0 14px var(--cc); }
.cat-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; margin-bottom: 16px; }
.cat-section .eyebrow { color: var(--cc); }
.cat-section-title { margin: 0; font-size: clamp(1.4rem, 3.4vw, 2rem); }
.cat-section-title a { color: var(--silver-hi); text-decoration: none; }
.cat-section-title a:hover { color: var(--cc); }
.cat-section-desc { margin: 6px 0 0; color: var(--muted); max-width: 60ch; }
.cat-section-subs { margin-bottom: 16px; }
.cat-section .grid { gap: 14px; }
.card-meta .cat[class*="cc-"], .post-kicker a[class*="cc-"] { color: var(--cc); }
.btn-sm { min-height: 36px; padding: 8px 14px; font-size: .72rem; }
@media (max-width: 600px) {
  .cat-section { margin-top: 36px; }
  .cat-section-head .btn { width: 100%; justify-content: center; }
  html { scroll-padding-top: 150px; }
}

/* ======================================================================
   THEME OPTIONS — switched by classes on <html> from content/theme.json
   (CMS → Appearance). Variables come from /css/theme.css.
   ====================================================================== */

/* ---------- style intensity: fx-0 minimal … fx-4 maximal ---------- */
html:not(.fx-scanlines) body::before { display: none; }
html.fx-0 .glitch::before, html.fx-0 .glitch::after, html.fx-1 .glitch::before, html.fx-1 .glitch::after { display: none; }
html.fx-0 .logo, html.fx-0 .chrome-text { background: none; color: var(--silver-hi); }
html.fx-0 .site-header::after, html.fx-0 .hero::before, html.fx-0 .card::before { display: none; }
html.fx-0 .post-title { background: none; color: var(--silver-hi); filter: none; }
html.fx-0 .glitch-soft { text-shadow: none; }
html.fx-0 .card-media img, html.fx-0 .hero-img { filter: none; }
html.fx-0 .card, html.fx-0 .hero, html.fx-0 .panel { background: var(--panel); box-shadow: none; }
html.fx-0 .pulse { animation: none; }
html.fx-1 .card-media img, html.fx-1 .hero-img { filter: grayscale(.15); }
html.fx-3 .card, html.fx-4 .card { border-color: rgb(var(--neon-rgb) / .22); }
html.fx-3 .panel, html.fx-4 .panel, html.fx-3 .hero, html.fx-4 .hero { border-color: rgb(var(--neon-rgb) / .3); box-shadow: 0 0 var(--fx-glow) rgb(var(--neon-rgb) / .12), inset 0 1px 0 rgba(255,255,255,.08); }
html.fx-3 .site-header::after, html.fx-4 .site-header::after { opacity: 1; height: 2px; }
html.fx-3 .btn:hover, html.fx-4 .btn:hover { box-shadow: 0 0 var(--fx-glow) rgb(var(--neon-rgb) / .35); }
html.fx-4 .section-title, html.fx-4 .panel-title { color: var(--neon); }
html.fx-4 .cat-bar { box-shadow: 0 6px 24px -12px rgb(var(--neon-rgb) / .5); }
html.fx-4 .chip:hover { box-shadow: 0 0 12px rgb(var(--neon-rgb) / .4); }
html.fx-heading-glow h1, html.fx-heading-glow h2 { text-shadow: 0 0 var(--fx-glow, 12px) rgb(var(--neon-rgb) / .45); }
html.fx-heading-glow .post-title { filter: drop-shadow(0 0 calc(var(--fx-glow, 12px) / 2) rgb(var(--neon-rgb) / .5)); }
html.fx-line .site-header::after { background-size: 200% 100%; animation: line-run 6s linear infinite; }
@keyframes line-run { from { background-position: 200% 0; } to { background-position: 0 0; } }
html.fx-grid body {
  background-image:
    linear-gradient(rgb(var(--neon-rgb) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--neon-rgb) / .05) 1px, transparent 1px),
    radial-gradient(1200px 600px at 85% -10%, rgb(var(--neon-rgb) / var(--fx-bg-glow)), transparent 60%),
    linear-gradient(180deg, var(--bg-2), var(--bg) 40%);
  background-size: 40px 40px, 40px 40px, auto, auto;
}
html.fx-vignette body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 99; background: radial-gradient(ellipse at center, transparent 55%, rgb(0 0 0 / .55)); }
html.contrast-high a { text-decoration: underline; }
html.contrast-high .card-excerpt, html.contrast-high .muted { color: var(--silver); }

/* ---------- density ---------- */
html.dens-compact { --gap: 12px; }
html.dens-compact .card-body { padding: 12px 14px 14px; gap: 6px; }
html.dens-compact .section-title { margin: 32px 0 12px; }
html.dens-airy { --gap: clamp(20px, 3.2vw, 36px); }
html.dens-airy .card-body { padding: 24px 24px 26px; }
html.dens-airy .section-title { margin: 64px 0 24px; }

/* ---------- header layouts ---------- */
html.hdr-center .header-row { flex-direction: column; justify-content: center; gap: 6px; }
html.hdr-center .main-nav { justify-content: center; }
html.hdr-stacked .header-row { flex-direction: column; align-items: flex-start; gap: 6px; }
html.hdr-static .site-header { position: relative; }
html.hdr-solid .site-header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
html.catbar-static .cat-bar--below { position: relative; }
.cat-bar--below { border-bottom: 1px solid var(--line); }
.site-tagline { display: block; font: 500 .65rem/1.2 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }

/* ---------- logo effects ---------- */
html.logo-fx-chrome .logo .glitch::before, html.logo-fx-chrome .logo .glitch::after,
html.logo-fx-neon .logo .glitch::before, html.logo-fx-neon .logo .glitch::after,
html.logo-fx-plain .logo .glitch::before, html.logo-fx-plain .logo .glitch::after { display: none; }
html.logo-fx-neon .logo { background: none; color: var(--neon); text-shadow: 0 0 8px rgb(var(--neon-rgb) / .8), 0 0 22px rgb(var(--neon-rgb) / .4); }
html.logo-fx-plain .logo { background: none; color: var(--silver-hi); }
html.fx-4.logo-fx-neon .logo { animation: flicker 5s infinite; }

/* ---------- menu effects ---------- */
.main-nav a { position: relative; }
html.menu-normal-case .main-nav a { text-transform: none; letter-spacing: .02em; font-size: .9rem; }
html.menu-fx-none .main-nav a, html.menu-fx-none .main-nav a:hover, html.menu-fx-none .main-nav a[aria-current="page"],
html.menu-fx-underline .main-nav a, html.menu-fx-glow .main-nav a, html.menu-fx-glitch .main-nav a, html.menu-fx-flicker .main-nav a, html.menu-fx-scan .main-nav a, html.menu-fx-bracket .main-nav a { border-color: transparent; background: none; }
html.menu-fx-none .main-nav a[aria-current="page"] { color: var(--neon); }
html.menu-fx-underline .main-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: linear-gradient(90deg, var(--neon), var(--neon-2)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; }
html.menu-fx-underline .main-nav a:hover::after, html.menu-fx-underline .main-nav a:focus-visible::after, html.menu-fx-underline .main-nav a[aria-current="page"]::after { transform: scaleX(1); }
html.menu-fx-glow .main-nav a:hover, html.menu-fx-glow .main-nav a:focus-visible, html.menu-fx-glow .main-nav a[aria-current="page"] { color: var(--neon); text-shadow: 0 0 6px rgb(var(--neon-rgb) / .9), 0 0 18px rgb(var(--neon-rgb) / .5); }
html.menu-fx-glitch .main-nav a:hover, html.menu-fx-glitch .main-nav a:focus-visible { color: var(--silver-hi); animation: nav-glitch .45s steps(2) 2; }
html.menu-fx-glitch .main-nav a[aria-current="page"] { color: var(--silver-hi); text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); }
@keyframes nav-glitch { 0% { text-shadow: -2px 0 var(--neon), 2px 0 var(--neon-2); transform: translate(0); } 33% { text-shadow: 2px 0 var(--neon), -2px 0 var(--neon-2); transform: translate(-1px, 1px); } 66% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); transform: translate(1px, -1px); } 100% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); transform: translate(0); } }
html.menu-fx-flicker .main-nav a:hover, html.menu-fx-flicker .main-nav a:focus-visible { color: var(--neon); animation: flicker 1.2s linear 1; text-shadow: 0 0 10px rgb(var(--neon-rgb) / .7); }
html.menu-fx-flicker .main-nav a[aria-current="page"] { color: var(--neon); }
@keyframes flicker { 0%, 19%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 21%, 63% { opacity: .35; } }
html.menu-fx-scan .main-nav a { overflow: hidden; }
html.menu-fx-scan .main-nav a::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgb(var(--neon-rgb) / .35) 50%, transparent 70%); transform: translateX(-120%); }
html.menu-fx-scan .main-nav a:hover::after, html.menu-fx-scan .main-nav a:focus-visible::after { transform: translateX(120%); transition: transform .6s ease; }
html.menu-fx-scan .main-nav a[aria-current="page"] { color: var(--neon); }
html.menu-fx-bracket .main-nav a::before, html.menu-fx-bracket .main-nav a::after { position: absolute; top: 50%; translate: 0 -50%; color: var(--neon); opacity: 0; transition: opacity .2s, transform .2s; }
html.menu-fx-bracket .main-nav a::before { content: "["; left: 0; transform: translateX(4px); }
html.menu-fx-bracket .main-nav a::after { content: "]"; right: 0; transform: translateX(-4px); }
html.menu-fx-bracket .main-nav a:hover::before, html.menu-fx-bracket .main-nav a:hover::after, html.menu-fx-bracket .main-nav a:focus-visible::before, html.menu-fx-bracket .main-nav a:focus-visible::after,
html.menu-fx-bracket .main-nav a[aria-current="page"]::before, html.menu-fx-bracket .main-nav a[aria-current="page"]::after { opacity: 1; transform: none; }
html.menu-fx-bracket .main-nav a[aria-current="page"] { color: var(--silver-hi); }

/* categories dropdown in the main menu */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-menu { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 220px; padding: 6px; display: none; flex-direction: column; gap: 2px;
  background: rgb(var(--bg-rgb) / .97); border: 1px solid var(--line-hi); border-radius: var(--radius); box-shadow: 0 18px 40px -16px rgba(0,0,0,.9), 0 0 var(--fx-glow, 0) rgb(var(--neon-rgb) / .15); }
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu { display: flex; }
.main-nav .nav-dd-menu a { text-transform: none; letter-spacing: .02em; font-size: .85rem; padding: 8px 10px; }
.main-nav .nav-dd-menu a .cat-dot { display: inline-block; flex: 0 0 auto; margin-right: 8px; }
@media (max-width: 600px) { .nav-dd-menu { position: fixed; left: 8px; right: 8px; top: auto; } }

/* ---------- card hover effects ---------- */
html.card-fx-none .card:hover, html.card-fx-none .card:focus-within { transform: none; box-shadow: none; }
html.card-fx-none .card::after { display: none; }
html.card-fx-glow .card:hover, html.card-fx-glow .card:focus-within { transform: none; box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .5), 0 0 28px rgb(var(--neon-rgb) / .25); }
html.card-fx-border .card:hover, html.card-fx-border .card:focus-within { transform: none; border-color: var(--neon); box-shadow: none; }
html.card-fx-tilt .card { transition: transform .3s ease, box-shadow .3s; }
html.card-fx-tilt .card:hover, html.card-fx-tilt .card:focus-within { transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-3px); }
html.card-fx-scan .card { overflow: hidden; }
html.card-fx-scan .card-body::before { content: ""; position: absolute; left: 0; right: 0; top: -40%; height: 40%; pointer-events: none; z-index: 2; background: linear-gradient(180deg, transparent, rgb(var(--neon-rgb) / .12), transparent); }
html.card-fx-scan .card:hover .card-body::before { top: 110%; transition: top .9s ease; }
.card-body { position: relative; }

/* ---------- home layouts ---------- */
@media (min-width: 900px) {
  html.home-cols-2 .page-home .grid { grid-template-columns: repeat(2, 1fr); }
  html.home-cols-3 .page-home .grid { grid-template-columns: repeat(3, 1fr); }
  html.home-cols-4 .page-home .grid { grid-template-columns: repeat(4, 1fr); }
  html.home-cols-1 .page-home .grid { grid-template-columns: 1fr; }
  html.home-list .page-home .card { flex-direction: row; }
  html.home-list .page-home .card-media { flex: 0 0 34%; aspect-ratio: auto; min-height: 100%; }
  html.home-list .page-home .grid { grid-template-columns: 1fr; }
}
html.home-compact .page-home .card-media { display: none; }
html.home-compact .page-home .card-body { padding: 14px; }
html.no-excerpts .card-excerpt { display: none; }
.type-badge { font: 700 .62rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--bg-2); background: var(--silver); padding: 3px 6px; border-radius: 3px; position: relative; z-index: 3; }
.type-badge--prompt { background: var(--neon); }
.type-badge--video { background: var(--neon-2); }
.type-badge--link, .type-badge--news { background: var(--silver-hi); }

/* ---------- sidebar & widgets ---------- */
.with-sidebar { display: grid; gap: calc(var(--gap) * 1.5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 980px) {
  .with-sidebar.sb-right { grid-template-columns: minmax(0, 1fr) 300px; }
  .with-sidebar.sb-left { grid-template-columns: 300px minmax(0, 1fr); }
  .with-sidebar.sb-left > .site-sidebar { order: -1; }
  .site-sidebar.is-sticky { position: sticky; top: 140px; align-self: start; max-height: calc(100vh - 160px); overflow: auto; scrollbar-width: thin; }
}
.site-sidebar { padding-top: 24px; display: flex; flex-direction: column; gap: 16px; }
.widget { padding: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.widget-title { font: 700 .72rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--silver); margin: 0 0 12px; }
.widget ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.widget li a { text-decoration: none; color: var(--silver); }
.widget li a:hover { color: var(--neon); }
.widget .chips { flex-direction: row; flex-wrap: wrap; gap: 6px; }
.widget p { margin: 0 0 8px; color: var(--muted); font-size: .92rem; }
.widget-cat { display: flex; justify-content: space-between; gap: 8px; }
.widget-recent time { display: block; font: 500 .68rem/1.4 var(--mono); color: var(--muted); }
html.fx-3 .widget, html.fx-4 .widget { border-color: rgb(var(--neon-rgb) / .22); }

/* ---------- footer layouts ---------- */
.footer-cols { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); padding: 12px 0 24px; }
.footer-col h2 { font: 700 .7rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--silver); margin: 0 0 12px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.footer-col p { margin: 0; max-width: 40ch; }
.footer-social { display: flex; gap: 10px; flex-wrap: wrap; }
.footer-bottom { display: flex; gap: 12px 24px; flex-wrap: wrap; align-items: center; justify-content: space-between; border-top: 1px solid var(--line); padding-top: 16px; }
.site-footer--minimal { padding: 16px 0; }
.site-footer--minimal .footer-row { justify-content: center; text-align: center; }
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; text-decoration: none;
  background: var(--panel-2); border: 1px solid var(--line-hi); color: var(--silver-hi); box-shadow: 0 0 var(--fx-glow, 0) rgb(var(--neon-rgb) / .3); }
.to-top:hover { color: var(--neon); border-color: var(--neon); }
.consent:not([hidden]) ~ .to-top { display: none; }

/* ---------- logo (text / image / both) ---------- */
.logo { display: inline-flex; align-items: center; gap: 10px; font-size: calc(1.35rem * var(--logo-scale, 1)); }
.logo-img { height: var(--logo-h, 32px); width: auto; display: block; }

/* ---------- icons ---------- */
.ico { display: inline-block; flex: 0 0 auto; vertical-align: -.2em; }

/* ---------- recommended strip under the menu ---------- */
.rec-bar { border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgb(var(--neon-rgb) / .06), transparent 60%), rgb(var(--bg-rgb) / .6); }
.rec-bar-row { display: flex; align-items: center; gap: 12px; min-height: 40px; padding-block: 6px; overflow: hidden; }
.rec-bar-k { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.rec-bar-list { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; }
.rec-bar-list li { flex: 0 0 auto; scroll-snap-align: start; }
.rec-bar-list a { display: inline-flex; align-items: center; gap: 8px; max-width: 34ch; padding: 6px 12px; font-size: .82rem; text-decoration: none; color: var(--silver); border: 1px solid var(--line); border-radius: 999px; background: rgb(var(--panel-rgb) / .6); white-space: nowrap; }
.rec-bar-list a span { overflow: hidden; text-overflow: ellipsis; }
.rec-bar-list a:hover { color: var(--silver-hi); border-color: var(--neon); }
.rec-bar--cards .rec-bar-list a { border-radius: var(--radius); padding: 4px 10px 4px 4px; }
.rec-bar--cards .rec-bar-list img { width: 44px; height: 28px; object-fit: cover; border-radius: 3px; }
.rec-bar--ticker .rec-bar-list a { border: 0; background: none; padding: 4px 6px; border-radius: 0; }
.rec-bar--ticker .rec-bar-list li + li a::before { content: "//"; color: var(--neon); margin-right: 10px; opacity: .7; }

/* ---------- article tools (print / Obsidian / vault) ---------- */
.post-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.post-tools .btn, .vault-btns .btn { min-height: 36px; padding: 8px 12px; font-size: .7rem; }
.vault-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }

/* ---------- author box ---------- */
.author-box { display: flex; gap: 16px; align-items: flex-start; margin-top: 40px; padding: 20px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.author-ico { display: grid; place-items: center; flex: 0 0 52px; height: 52px; border-radius: 50%; border: 1px solid var(--line-hi); color: var(--neon); }
.author-ico .ico { width: 26px; height: 26px; }
.author-k { margin: 0; font: 700 .66rem/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.author-name { margin: 6px 0 8px; font-size: 1.2rem; }
.author-name a { text-decoration: none; }
.author-bio, .author-url, .author-more { margin: 0 0 6px; color: var(--silver); font-size: .95rem; }
.author-more { color: var(--muted); font-size: .88rem; }

/* ---------- under the article: related · recommended · random ---------- */
.below { margin-top: 48px; }
.below-tabs { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.below-tabs [role="tab"] { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px; margin-bottom: -1px; cursor: pointer;
  font: 700 .74rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: none; border: 1px solid transparent; border-bottom: 0; border-radius: var(--radius) var(--radius) 0 0; }
.below-tabs [role="tab"]:hover { color: var(--silver-hi); }
.below-tabs [role="tab"][aria-selected="true"] { color: var(--neon); border-color: var(--line); background: var(--panel); box-shadow: inset 0 2px 0 var(--neon); }
.below-title { display: flex; align-items: center; gap: 10px; }
.below-title .ico { color: var(--neon); }
.below.is-tabbed .below-title { display: none; }
.below--stacked .below-panel + .below-panel, .below:not(.is-tabbed) .below-panel + .below-panel { margin-top: 32px; }
.below-more { margin: 14px 0 0; }

/* ---------- extra theme options: card & button styles, headings, links ---------- */
html.cards-flat .card { background: var(--panel); box-shadow: none; }
html.cards-flat .card::before { display: none; }
html.cards-glass .card { background: rgb(var(--panel-rgb) / .45); backdrop-filter: blur(10px) saturate(1.3); -webkit-backdrop-filter: blur(10px) saturate(1.3); }
html.cards-outline .card { background: transparent; border-color: var(--line-hi); }
html.cards-outline .card::before { display: none; }
html.cards-neon .card { border-color: rgb(var(--neon-rgb) / .45); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .12), 0 0 18px -6px rgb(var(--neon-rgb) / .4); }
html.btns-neon .btn { background: transparent; border-color: var(--neon); color: var(--neon); box-shadow: 0 0 12px -4px rgb(var(--neon-rgb) / .6); }
html.btns-neon .btn:hover { background: rgb(var(--neon-rgb) / .12); color: var(--silver-hi); }
html.btns-outline .btn { background: transparent; }
html.btns-pill .btn { border-radius: 999px; }
html.btns-solid .btn { background: var(--neon); border-color: var(--neon); color: var(--bg); }
html.btns-solid .btn:hover { background: var(--neon-2); border-color: var(--neon-2); color: var(--bg); }
html.btns-neon .btn--chrome, html.btns-outline .btn--chrome { color: var(--bg-2); background: var(--chrome); }
html.h-upper h1, html.h-upper h2, html.h-upper h3 { text-transform: uppercase; letter-spacing: .04em; }
.prose a { color: var(--link, var(--silver-hi)); }

/* ---------- vault view (/vault/): full screen, Obsidian-style ---------- */
.page-vault { height: 100vh; overflow: hidden; }
.vault { display: grid; height: 100vh; grid-template-columns: 280px minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "bar bar bar" "tree note side"; background: var(--bg); }
.vault:fullscreen { background: var(--bg); }
.vault-bar { grid-area: bar; display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding: 8px 14px; border-bottom: 1px solid var(--line); background: rgb(var(--bg-rgb) / .9); }
.vault-home { font: 700 .74rem/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
.vault-name { display: inline-flex; align-items: center; gap: 6px; font: 800 .9rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.vault-search { flex: 1 1 200px; max-width: 420px; }
.vault-search input { width: 100%; min-height: 36px; padding: 6px 12px; font: inherit; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.vault-legal { display: flex; gap: 12px; flex-wrap: wrap; width: 100%; font-size: .72rem; color: var(--muted); }
.vault-legal a, .vault-legal .linklike { color: var(--muted); }
@media (min-width: 1200px) { .vault-legal { width: auto; } }
.vault-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.vault-actions .btn { min-height: 34px; padding: 6px 10px; font-size: .68rem; }
.vault-actions .btn[aria-pressed="true"] { border-color: var(--neon); color: var(--neon); }
.vault-tree { grid-area: tree; overflow: auto; padding: 10px 8px 40px; border-right: 1px solid var(--line); background: rgb(var(--panel-rgb) / .5); font-size: .88rem; scrollbar-width: thin; }
.vt-folder summary { cursor: pointer; padding: 6px 8px; font: 700 .72rem/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--silver); border-radius: var(--radius); }
.vt-folder summary:hover { background: rgb(var(--neon-rgb) / .06); }
.vt-folder summary .count { color: var(--muted); font-weight: 400; }
.vt-folder ul { list-style: none; margin: 0 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--line); margin-left: 12px; }
.vt-folder a { display: block; padding: 4px 8px; color: var(--muted); text-decoration: none; border-radius: var(--radius); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vt-folder a:hover { color: var(--silver-hi); background: rgb(var(--neon-rgb) / .06); }
.vt-folder a[aria-current] { color: var(--neon); background: rgb(var(--neon-rgb) / .1); }
.vault-note { grid-area: note; overflow: auto; padding: 28px clamp(16px, 4vw, 56px) 80px; scrollbar-width: thin; }
.vault-note:focus { outline: none; }
.vault-body { max-width: 760px; }
.vault-path { margin: 0 0 12px; font: 500 .72rem/1.3 var(--mono); letter-spacing: .08em; color: var(--muted); }
.vault-body a[data-note] { color: var(--neon); text-decoration-style: dotted; }
.vault-missing { opacity: .55; }
.vault-side { grid-area: side; overflow: auto; padding: 16px; border-left: 1px solid var(--line); background: rgb(var(--panel-rgb) / .5); font-size: .88rem; scrollbar-width: thin; }
.vault-sec { margin-bottom: 18px; }
.vault-sec-title { margin: 0 0 8px; font: 700 .68rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--silver); }
.vault-sec ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.vault-sec a { color: var(--muted); text-decoration: none; }
.vault-sec a:hover { color: var(--neon); }
.vault-sec .chip { display: inline-flex; }
.vault-props { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; }
.vault-props dt { font: 500 .7rem/1.6 var(--mono); color: var(--muted); }
.vault-props dd { margin: 0; overflow-wrap: anywhere; }
.vault-dl { margin: 0 0 16px; }
.vault.show-graph { grid-template-rows: auto minmax(0, 1.25fr) minmax(0, 1fr); grid-template-areas: "bar bar bar" "tree graph side" "tree note side"; }
.vault-graph { grid-area: graph; display: flex; flex-direction: column; overflow: hidden; border-bottom: 1px solid var(--line-hi); background: radial-gradient(circle at 50% 50%, rgb(var(--neon-rgb) / .06), transparent 70%), var(--bg); }
.vault-graph[hidden] { display: none; }
.vg-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border-bottom: 1px solid var(--line); font-size: .76rem; background: rgb(var(--bg-rgb) / .85); }
.vg-tools .btn { min-height: 28px; padding: 4px 9px; font-size: .68rem; }
.vg-tools select { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius); }
.vg-tools .check { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); cursor: pointer; }
.vg-group { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.vg-f i { width: 8px; height: 8px; border-radius: 50%; background: var(--silver); display: inline-block; }
.vg-f.vg-posts i { background: var(--neon); } .vg-f.vg-tags i { background: var(--neon-2); } .vg-f.vg-categories i { background: var(--silver-hi); } .vg-f.vg-links i { background: var(--muted); } .vg-f.vg-pages i { background: #ffb000; }
.vg-stage { flex: 1; min-height: 0; position: relative; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.vg-stage.is-dragging { cursor: grabbing; }
.vg-stage .vault-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.vg-node { cursor: pointer; }
.vg-node text { opacity: 0; transition: opacity .2s; pointer-events: none; paint-order: stroke; stroke: var(--bg); stroke-width: 3px; }
.vg-labels .vg-node text, .vg-node.is-cur text, .vg-node.is-near text, .vg-node:hover text, .vg-node.is-hit text { opacity: 1; }
.vg-pages circle { fill: #ffb000; }
.vg-focus .vg-node:not(.is-near) { opacity: .25; }
.vg-focus line:not(.on) { stroke-opacity: .08; }
.vg-node.is-hit circle { stroke: var(--silver-hi); stroke-width: 3; }
.vault-svg { width: 100%; height: 100%; }
.vault-svg line { stroke: rgb(var(--neon-rgb) / .22); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.vault-svg line.on { stroke: var(--neon); stroke-width: 2; }
.vg-node circle { fill: var(--silver); fill-opacity: .8; stroke: var(--bg); stroke-width: 2; }
.vg-node text { fill: var(--muted); font: 500 12px var(--font); }
.vg-posts circle { fill: var(--neon); }
.vg-tags circle { fill: var(--neon-2); }
.vg-categories circle { fill: var(--silver-hi); }
.vg-links circle { fill: var(--muted); }
.vg-node.is-near text, .vg-node:hover text, .vg-node:focus text { fill: var(--silver-hi); }
.vg-node.is-cur circle { stroke: var(--silver-hi); stroke-width: 4; }
.vg-node.is-cur text { fill: var(--neon); font-weight: 700; }
@media (max-width: 980px) {
  .page-vault { height: auto; overflow: auto; }
  .vault { height: auto; min-height: 100vh; grid-template-columns: minmax(0, 1fr); grid-template-areas: "bar" "tree" "note" "side"; }
  .vault-tree { max-height: 38vh; border-right: 0; border-bottom: 1px solid var(--line); }
  .vault-note { overflow: visible; }
  .vault-side { border-left: 0; border-top: 1px solid var(--line); }
  .vault.show-graph { grid-template-rows: none; grid-template-areas: "bar" "tree" "graph" "note" "side"; }
  .vault-graph { min-height: 70vh; }
}

/* ======================================================================
   GUI STYLES (CMS → Appearance → CG → GUI stil): html.gui-<style> + gui-s1…s3
   ====================================================================== */
/* ---------- cyber HUD: clipped corners, corner brackets, // labels ---------- */
html.gui-cyber { --cut: 10px; }
html.gui-cyber.gui-s3 { --cut: 16px; }
html.gui-cyber .card, html.gui-cyber .panel, html.gui-cyber .widget, html.gui-cyber .pager-link, html.gui-cyber .lcard, html.gui-cyber .hero {
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut)); border-radius: 0; }
html.gui-cyber .btn { clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); border-radius: 0; }
html.gui-cyber .panel, html.gui-cyber .widget, html.gui-cyber .keypoints, html.gui-cyber .toc {
  background-image: linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon));
  background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px; background-repeat: no-repeat;
  background-position: right 0 top 0, right 0 top 0, left 0 bottom 0, left 0 bottom 0; }
html.gui-cyber .section-title::before, html.gui-cyber .panel-title::before, html.gui-cyber .widget-title::before { content: "// "; color: var(--neon); }
html.gui-cyber .page-title, html.gui-cyber .post-title { letter-spacing: .02em; }
html.gui-cyber .card-meta, html.gui-cyber .eyebrow { color: var(--neon); }
html.gui-cyber.gui-s2 .card:hover, html.gui-cyber.gui-s3 .card:hover { box-shadow: 0 0 0 1px var(--neon), 0 0 24px -4px rgb(var(--neon-rgb) / .6); }
html.gui-cyber.gui-s3 .main-nav a { clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }
html.gui-cyber.gui-s3 body { background-image: linear-gradient(rgb(var(--neon-rgb) / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--neon-rgb) / .045) 1px, transparent 1px), linear-gradient(180deg, var(--bg-2), var(--bg) 40%); background-size: 24px 24px, 24px 24px, auto; }

/* ---------- glitch: RGB split, jittering titles, glitchy images ---------- */
@keyframes gui-glitch-txt { 0%, 86%, 100% { text-shadow: none; transform: none; } 87% { text-shadow: -3px 0 var(--neon), 3px 0 var(--neon-2); transform: translate(1px, -1px) skewX(-4deg); } 89% { text-shadow: 3px 0 var(--neon), -3px 0 var(--neon-2); transform: translate(-2px, 1px); } 91% { text-shadow: -1px 0 var(--neon), 1px 0 var(--neon-2); transform: none; } }
@keyframes gui-glitch-img { 0%, 90%, 100% { filter: none; transform: none; } 91% { filter: hue-rotate(90deg) saturate(2); transform: translateX(-4px); } 93% { filter: invert(.1) hue-rotate(-60deg); transform: translateX(3px) skewX(3deg); } 95% { filter: none; transform: none; } }
@keyframes gui-tear { 0%, 94%, 100% { opacity: 0; } 95% { opacity: .9; transform: translateY(18vh); } 97% { opacity: .6; transform: translateY(63vh); } }
html.gui-glitch h1, html.gui-glitch .section-title, html.gui-glitch .card-title { text-shadow: -1px 0 rgb(var(--neon-rgb) / .55), 1px 0 rgb(var(--neon2-rgb) / .55); }
html.gui-glitch h1 { animation: gui-glitch-txt 6s steps(1) infinite; }
html.gui-glitch.gui-s1 h1 { animation-duration: 12s; }
html.gui-glitch.gui-s3 h1, html.gui-glitch.gui-s3 h2 { animation: gui-glitch-txt 3.2s steps(1) infinite; }
html.gui-glitch .card:hover .card-media img, html.gui-glitch .post-figure img, html.gui-glitch .hero-img { animation: gui-glitch-img 5s steps(1) infinite; }
html.gui-glitch.gui-s1 .post-figure img, html.gui-glitch.gui-s1 .hero-img { animation: none; }
html.gui-glitch .btn:hover, html.gui-glitch .main-nav a:hover { text-shadow: -2px 0 var(--neon), 2px 0 var(--neon-2); }
html.gui-glitch.gui-s2 body::after, html.gui-glitch.gui-s3 body::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 98; opacity: 0;
  background: linear-gradient(90deg, transparent, rgb(var(--neon-rgb) / .9), rgb(var(--neon2-rgb) / .9), transparent); animation: gui-tear 7s steps(1) infinite; }
html.gui-glitch.gui-s3 body::after { animation-duration: 3.5s; }

/* ---------- matrix: mono, green-ish glow, code rain (canvas from app.js) ---------- */
html.gui-matrix { --font: var(--mono); }
html.gui-matrix body { font-family: var(--mono); }
html.gui-matrix h1, html.gui-matrix h2, html.gui-matrix h3 { font-family: var(--mono); text-shadow: 0 0 calc(4px * var(--gui-k, 2)) rgb(var(--neon-rgb) / .55); }
html.gui-matrix .s1, html.gui-matrix.gui-s1 { --gui-k: 1; } html.gui-matrix.gui-s3 { --gui-k: 3; }
html.gui-matrix a { text-shadow: 0 0 6px rgb(var(--neon-rgb) / .35); }
html.gui-matrix .card, html.gui-matrix .panel, html.gui-matrix .widget { background-color: rgb(var(--bg-rgb) / .82); }
.gui-rain-canvas { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; opacity: .22; }
html.gui-s1 .gui-rain-canvas { opacity: .12; } html.gui-s3 .gui-rain-canvas { opacity: .34; }
html.gui-rain { background: radial-gradient(1200px 600px at 85% -10%, rgb(var(--neon-rgb) / var(--fx-bg-glow, .07)), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg) 40%) fixed; background-color: var(--bg); }
html.gui-rain body { background: transparent; }

/* ---------- terminal: everything mono, $ prompts, ASCII boxes, blinking cursor ---------- */
html.gui-terminal { --font: var(--mono); --font-h: var(--mono); }
html.gui-terminal body { font-family: var(--mono); font-size: .95rem; }
html.gui-terminal h1, html.gui-terminal h2, html.gui-terminal h3 { font-family: var(--mono); background: none; -webkit-text-fill-color: currentColor; color: var(--neon); letter-spacing: 0; }
html.gui-terminal .section-title::before, html.gui-terminal .panel-title::before, html.gui-terminal .widget-title::before, html.gui-terminal .prose h2::before { content: "$ "; color: var(--muted); }
html.gui-terminal .page-title::before, html.gui-terminal .post-title::before { content: "> "; color: var(--muted); }
html.gui-terminal .card, html.gui-terminal .panel, html.gui-terminal .widget, html.gui-terminal .pager-link, html.gui-terminal .btn, html.gui-terminal .chip, html.gui-terminal .hero { border-radius: 0; border-style: dashed; box-shadow: none; background-image: none; background-color: rgb(var(--bg-rgb) / .9); }
html.gui-terminal.gui-s3 .card, html.gui-terminal.gui-s3 .panel { border-style: double; border-width: 3px; }
html.gui-terminal .card-media img, html.gui-terminal .hero-img, html.gui-terminal .post-figure img { filter: grayscale(1) contrast(1.2) sepia(.3); }
html.gui-terminal.gui-s1 .card-media img { filter: grayscale(.5); }
html.gui-terminal .btn { text-transform: lowercase; }
html.gui-terminal .btn::before { content: "["; } html.gui-terminal .btn::after { content: "]"; }
@keyframes gui-blink { 50% { opacity: 0; } }
html.gui-cursor h1::after { content: "▍"; display: inline-block; margin-left: .15em; color: var(--neon); -webkit-text-fill-color: var(--neon); animation: gui-blink 1s steps(1) infinite; }
html.gui-terminal.gui-s2 body::before, html.gui-terminal.gui-s3 body::before { display: block; }
@media print { .gui-rain-canvas { display: none !important; } html.gui-cursor h1::after, html.gui-terminal .btn::before, html.gui-terminal .btn::after { content: none !important; } }

/* ======================================================================
   HOMEPAGE · MENU · FINESSE (CMS → Appearance → Homepage / Izbornik / CG)
   ====================================================================== */
/* ---------- homepage sections ---------- */
.home-intro { margin-top: 24px; }
.home-intro-title { margin: 0 0 8px; font-size: clamp(1.3rem, 3vw, 1.8rem); }
.home-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--gap); margin-top: 28px; }
.stat { padding: 18px; text-align: center; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.stat-n { display: block; font: 800 clamp(1.8rem, 4vw, 2.6rem)/1 var(--mono); color: var(--neon); text-shadow: 0 0 18px rgb(var(--neon-rgb) / .45); }
.stat-l { display: block; margin-top: 6px; font: 600 .7rem/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.latest-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.latest-list li { display: grid; grid-template-columns: 9.5em 1fr auto; gap: 12px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.latest-list time { font: 500 .72rem var(--mono); color: var(--muted); }
.latest-list a { text-decoration: none; }
.latest-list .cat { font: 600 .66rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cc, var(--neon)); }
@media (max-width: 600px) { .latest-list li { grid-template-columns: 1fr; gap: 2px; } }
.more-row { text-align: center; margin: 18px 0 0; }
.hero-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.hero-mini { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s; }
.hero-mini:hover { border-color: var(--neon); transform: translateY(-2px); }
.hero-mini-t { font-weight: 700; color: var(--silver-hi); }
/* hero styles */
html.hero-full .hero { display: block; position: relative; min-height: 420px; }
html.hero-full .hero .hero-img, html.hero-full .hero .hero-grid { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; opacity: .45; }
html.hero-full .hero .hero-inner { position: relative; z-index: 2; max-width: 760px; padding-top: 72px; background: linear-gradient(90deg, rgb(var(--bg-rgb) / .9), transparent); }
html.hero-minimal .hero { display: block; text-align: center; background: none; border-left: 0; border-right: 0; border-radius: 0; box-shadow: none; }
html.hero-minimal .hero-inner { max-width: 820px; margin: 0 auto; padding-block: 56px; }
html.hero-minimal .hero-title { font-size: clamp(2rem, 6vw, 3.6rem); }
html.hero-minimal .hero-text { margin-inline: auto; }
html.hero-card .hero { max-width: 860px; margin-inline: auto; }
@media (min-width: 860px) { html.hero-card .hero { grid-template-columns: 1fr 1.2fr; } html.hero-card .hero .hero-img { order: -1; max-height: 300px; } }

/* ---------- menu ---------- */
.main-nav { gap: var(--menu-gap, 4px); }
.main-nav a { font-size: calc(.78rem * var(--menu-scale, 1)); display: inline-flex; align-items: center; gap: 6px; }
.main-nav a .ico { width: 15px; height: 15px; }
html.menu-al-left .header-row { justify-content: flex-start; } html.menu-al-left .main-nav { margin-left: 24px; }
html.menu-al-center .header-row { justify-content: center; gap: 12px 40px; }
html.menu-al-spread .main-nav { flex: 1; justify-content: space-evenly; margin-left: 24px; }
html.menu-w-normal .main-nav a { font-weight: 400; }
html.menu-sep-slash .main-nav > a + a::before, html.menu-sep-slash .main-nav > * + *::before { content: "/"; position: absolute; left: calc(var(--menu-gap, 4px) / -2 - 3px); color: var(--line-hi); }
html.menu-sep-dot .main-nav > * + *::before { content: "•"; position: absolute; left: calc(var(--menu-gap, 4px) / -2 - 3px); color: var(--neon); opacity: .7; }
html.menu-sep-pipe .main-nav > * + *::before { content: "|"; position: absolute; left: calc(var(--menu-gap, 4px) / -2 - 2px); color: var(--line-hi); }
html.menu-sep-slash .main-nav, html.menu-sep-dot .main-nav, html.menu-sep-pipe .main-nav { --menu-gap: 14px; }
.main-nav > .nav-dd { position: relative; }
html.menu-ind-none .main-nav a[aria-current="page"]::after { display: none; }
html.menu-ind-dot .main-nav a[aria-current="page"]::after { left: 50%; right: auto; width: 6px; height: 6px; border-radius: 50%; translate: -50% 0; bottom: 0; }
html.menu-ind-bar .main-nav a[aria-current="page"]::after { left: 0; right: 0; bottom: -9px; height: 3px; box-shadow: 0 0 14px var(--neon); }
.main-nav a.nav-cta { color: var(--bg); background: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px -4px rgb(var(--neon-rgb) / .8); }
.main-nav a.nav-cta:hover { color: var(--bg); background: var(--neon-2); border-color: var(--neon-2); }
html.menu-m-wrap .main-nav { flex-wrap: wrap; }
@media (max-width: 600px) {
  html.menu-m-wrap .main-nav { flex-wrap: wrap; overflow: visible; width: auto; margin: 0; }
  html.menu-m-burger .nav-toggle:not([hidden]) { display: inline-flex; }
  html.menu-m-burger .main-nav { display: none; width: 100%; flex-direction: column; flex-wrap: nowrap; overflow: visible; margin: 0; padding: 6px 0 10px; }
  html.menu-m-burger .main-nav.is-open { display: flex; }
  html.menu-m-burger .main-nav a { padding: 12px 10px; font-size: .9rem; }
}
.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; margin-left: auto; padding: 10px; background: none; border: 1px solid var(--line-hi); border-radius: var(--radius); cursor: pointer; }
.nav-toggle span { display: block; height: 2px; background: var(--silver-hi); transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 601px) { .nav-toggle { display: none !important; } }

/* ---------- finesse: shine, glowing borders, reflection, cursor light, grain, HUD corners, text glow, chroma, glass ---------- */
@keyframes fx-shine { from { transform: translateX(-130%) skewX(-20deg); } to { transform: translateX(230%) skewX(-20deg); } }
html.fx-shine-hover .card, html.fx-shine-loop .card, html.fx-shine-hover .btn, html.fx-shine-loop .btn, html.fx-shine-hover .hero, html.fx-shine-loop .hero { position: relative; overflow: hidden; }
html.fx-shine-hover .card-body::after, html.fx-shine-loop .card-body::after, html.fx-shine-hover .hero-inner::after, html.fx-shine-loop .hero-inner::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none; z-index: 4;
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16) 45%, rgb(var(--neon-rgb) / .22) 50%, rgb(255 255 255 / .12) 55%, transparent); transform: translateX(-130%) skewX(-20deg); }
html.fx-shine-hover .card:hover .card-body::after, html.fx-shine-hover .hero:hover .hero-inner::after { animation: fx-shine .9s ease-out 1; }
html.fx-shine-loop .card-body::after, html.fx-shine-loop .hero-inner::after { animation: fx-shine 4.5s ease-in-out infinite; }
html.fx-shine-loop .card:nth-child(2n) .card-body::after { animation-delay: 1.4s; } html.fx-shine-loop .card:nth-child(3n) .card-body::after { animation-delay: 2.6s; }
html.fx-shine-hover .btn:hover, html.fx-shine-loop .btn { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .25) 48%, transparent 66%), var(--chrome-soft); background-size: 250% 100%, auto; animation: fx-btn-shine 2.8s linear infinite; }
html.fx-shine-hover .btn--chrome:hover, html.fx-shine-loop .btn--chrome, html.fx-shine-loop .nav-cta, html.fx-shine-hover .nav-cta:hover { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 66%), var(--chrome); background-size: 250% 100%, auto; }
html.fx-shine-loop .main-nav a.nav-cta, html.fx-shine-hover .main-nav a.nav-cta:hover { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .55) 48%, transparent 66%); background-color: var(--neon); animation: fx-btn-shine 2.8s linear infinite; }
html.btns-solid.fx-shine-loop .btn:not(.btn--chrome), html.btns-solid.fx-shine-hover .btn:not(.btn--chrome):hover { background-image: linear-gradient(110deg, transparent 30%, rgb(255 255 255 / .45) 48%, transparent 66%); background-color: var(--neon); }
@keyframes fx-btn-shine { from { background-position: 150% 0, 0 0; } to { background-position: -150% 0, 0 0; } }
html.fx-gb-always .card, html.fx-gb-always .panel, html.fx-gb-always .widget, html.fx-gb-always .hero, html.fx-gb-always .pager-link { border-color: rgb(var(--neon-rgb) / .55); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .18), 0 0 22px -6px rgb(var(--neon-rgb) / .7), inset 0 0 18px -10px rgb(var(--neon-rgb) / .6); }
html.fx-gb-hover .card:hover, html.fx-gb-hover .panel:hover, html.fx-gb-hover .widget:hover, html.fx-gb-hover .hero:hover, html.fx-gb-hover .pager-link:hover { border-color: var(--neon); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .35), 0 0 30px -4px rgb(var(--neon-rgb) / .8), inset 0 0 22px -10px rgb(var(--neon-rgb) / .7); }
html.fx-reflect .logo { -webkit-box-reflect: below -4px linear-gradient(transparent 45%, rgb(255 255 255 / .28)); }
html.fx-reflect .page-title .chrome-text { -webkit-box-reflect: below -10px linear-gradient(transparent 55%, rgb(255 255 255 / .22)); }
.cursor-glow { position: fixed; left: 0; top: 0; width: 420px; height: 420px; margin: -210px 0 0 -210px; pointer-events: none; z-index: 1; border-radius: 50%; background: radial-gradient(circle, rgb(var(--neon-rgb) / .13), transparent 62%); mix-blend-mode: screen; will-change: transform; }
html.fx-grain body::after { content: ""; position: fixed; inset: -50%; z-index: 97; pointer-events: none; opacity: .07; animation: fx-grain 1s steps(6) infinite;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>"); }
@keyframes fx-grain { 0% { transform: translate(0, 0); } 33% { transform: translate(-3%, 2%); } 66% { transform: translate(2%, -3%); } 100% { transform: translate(0, 0); } }
html.fx-corners .card, html.fx-corners .panel, html.fx-corners .widget, html.fx-corners .hero, html.fx-corners .stat {
  background-image: linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon)), linear-gradient(var(--neon), var(--neon));
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px; background-repeat: no-repeat;
  background-position: left 0 top 0, left 0 top 0, right 0 top 0, right 0 top 0, left 0 bottom 0, left 0 bottom 0, right 0 bottom 0, right 0 bottom 0; background-color: var(--panel); }
html.fx-tg-1 h1, html.fx-tg-1 h2 { text-shadow: 0 0 6px rgb(var(--neon-rgb) / .45); }
html.fx-tg-2 h1, html.fx-tg-2 h2, html.fx-tg-2 .card-title { text-shadow: 0 0 10px rgb(var(--neon-rgb) / .6), 0 0 22px rgb(var(--neon-rgb) / .3); }
html.fx-tg-3 h1, html.fx-tg-3 h2, html.fx-tg-3 h3, html.fx-tg-3 .main-nav a { text-shadow: 0 0 6px var(--neon), 0 0 18px rgb(var(--neon-rgb) / .7), 0 0 36px rgb(var(--neon2-rgb) / .4); }
html.fx-chroma .card:hover .card-title, html.fx-chroma h1:hover, html.fx-chroma .hero-title:hover { text-shadow: -2px 0 rgb(255 0 80 / .8), 2px 0 rgb(0 220 255 / .8); }
html.fx-chroma .card:hover .card-media img, html.fx-chroma .post-figure img:hover { filter: drop-shadow(-3px 0 rgb(255 0 80 / .55)) drop-shadow(3px 0 rgb(0 220 255 / .55)); }
html.fx-chroma .card-media img { filter: drop-shadow(-1px 0 rgb(255 0 80 / .35)) drop-shadow(1px 0 rgb(0 220 255 / .35)); }
html.fx-glass .card, html.fx-glass .panel, html.fx-glass .widget, html.fx-glass .hero, html.fx-glass .site-header, html.fx-glass .stat { background-color: rgb(var(--panel-rgb) / .38); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .04); }
@media print { .cursor-glow { display: none !important; } html.fx-grain body::after { display: none !important; } }

/* ---------- WordPress-like options: cards, single post, related, downloads, archives ---------- */
.card-media { aspect-ratio: var(--card-ratio, 16 / 9); }
.card-title { font-size: calc(1.15rem * var(--card-title, 1)); }
.card-author { position: relative; z-index: 3; color: var(--silver); text-decoration: none; }
.card-author:hover { color: var(--neon); }
.card-more { align-self: flex-start; margin-top: auto; font: 700 .7rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--neon); padding: 8px 12px; border: 1px solid rgb(var(--neon-rgb) / .4); border-radius: var(--radius); }
.card--compact .card-body { padding: 14px 16px; }
.rel-list li { padding: 4px 0; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.share-k { font: 700 .66rem/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-right: 4px; }
.share-a { font: 600 .74rem/1 var(--mono); padding: 7px 10px; text-decoration: none; color: var(--silver); background: rgb(var(--panel-rgb) / .7); border: 1px solid var(--line); border-radius: 999px; cursor: pointer; }
.share-a:hover { color: var(--neon); border-color: var(--neon); }
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; }
.read-progress span { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--neon), var(--neon-2)); box-shadow: 0 0 12px var(--neon); }
html.post-dropcap .post .prose > p:first-of-type::first-letter { float: left; font: 800 3.6em/.82 var(--font-h, var(--font)); margin: .06em .12em 0 0; color: var(--neon); text-shadow: 0 0 18px rgb(var(--neon-rgb) / .5); }
.post-figure--top { margin: 0 0 18px; }
.post-head--banner { position: relative; overflow: hidden; padding: 48px 24px 24px; border-radius: var(--radius-lg); margin-bottom: 28px; }
.post-head--banner > *:not(.post-banner-img) { position: relative; z-index: 1; }
.post-banner-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .32; filter: saturate(1.2); }
.post-head--banner::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, rgb(var(--bg-rgb) / .15), rgb(var(--bg-rgb) / .92)); }
.downloads--list .dl-list { display: flex; flex-direction: column; gap: 8px; }
.dl-row { display: flex; gap: 10px; align-items: center; }
.dl-ico { display: inline-grid; place-items: center; min-width: 42px; height: 26px; padding: 0 6px; font: 800 .62rem/1 var(--mono); letter-spacing: .08em; color: var(--bg); background: var(--neon); border-radius: 3px; }
.downloads--cards .dl-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; list-style: none; padding: 0; }
.dl-card { display: flex; flex-direction: column; gap: 8px; padding: 16px; text-decoration: none; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-lg); transition: border-color .2s, transform .2s; }
.dl-card:hover { border-color: var(--neon); transform: translateY(-2px); }
.dl-name { font-weight: 700; color: var(--silver-hi); }
.dl-go { margin-top: auto; font: 700 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--neon); }
.page-category .grid, .page-tag .grid, .page-source .grid, .page-author .grid { --x: 0; }
@media (min-width: 900px) {
  html.arch-cols-1 :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: 1fr; }
  html.arch-cols-2 :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: repeat(2, 1fr); }
  html.arch-cols-4 :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: repeat(4, 1fr); }
  html.arch-list :is(.page-category, .page-tag, .page-source, .page-author) .grid { grid-template-columns: 1fr; }
  html.arch-list :is(.page-category, .page-tag, .page-source, .page-author) .card { flex-direction: row; }
  html.arch-list :is(.page-category, .page-tag, .page-source, .page-author) .card-media { flex: 0 0 32%; aspect-ratio: auto; min-height: 100%; }
}
html.arch-compact :is(.page-category, .page-tag, .page-source, .page-author) .card-media { display: none; }
.home-page { margin-top: 24px; }
@media print { .share, .read-progress { display: none !important; } }

/* ---------- glitch on selecting a post / menu item (CG → Finese → Glitch na klik) ---------- */
@keyframes gl-jitter {
  0% { transform: none; filter: none; }
  15% { transform: translate(calc(var(--gl-amp) * -1), 1px) skewX(-2deg); filter: hue-rotate(40deg) saturate(1.6); }
  30% { transform: translate(var(--gl-amp), -1px); clip-path: inset(12% 0 58% 0); }
  45% { transform: translate(calc(var(--gl-amp) * -.5), 0); clip-path: inset(48% 0 22% 0); filter: contrast(1.6) hue-rotate(-30deg); }
  60% { transform: translate(calc(var(--gl-amp) * .6), 2px) skewX(3deg); clip-path: none; }
  80% { transform: translate(calc(var(--gl-amp) * -.3), 0); filter: brightness(1.4); }
  100% { transform: none; filter: none; opacity: .85; }
}
@keyframes gl-hit { 0%, 100% { text-shadow: none; transform: none; } 25% { text-shadow: calc(var(--gl-amp) * -1) 0 var(--neon), var(--gl-amp) 0 var(--neon-2); transform: translateX(2px) skewX(-6deg); } 55% { text-shadow: var(--gl-amp) 0 var(--neon), calc(var(--gl-amp) * -1) 0 var(--neon-2); transform: translateX(-2px); } }
@keyframes gl-bar { 0%, 100% { opacity: 0; } 20%, 70% { opacity: 1; } 45% { opacity: .3; } }
html.is-glitching main, html.is-glitching .site-header, html.is-glitching .cat-bar { animation: gl-jitter var(--gl-ms) steps(6) both; }
.gl-hit, .gl-hit .card-title, .gl-hit .pager-t { animation: gl-hit var(--gl-ms) steps(4) both; }
.gl-veil { position: fixed; inset: 0; z-index: 130; pointer-events: none; mix-blend-mode: screen; }
.gl-veil i { position: absolute; left: -5%; right: -5%; display: block; animation: gl-bar var(--gl-ms) steps(3) both;
  background: linear-gradient(90deg, transparent, rgb(var(--neon-rgb) / .55) 20%, rgb(var(--neon2-rgb) / .45) 60%, transparent); }
html.gl-s1 .gl-veil i { opacity: .5; }
html.gl-s3 .gl-veil { mix-blend-mode: difference; }
html.gl-enter.is-entering main, html.gl-enter.is-entering .site-header { animation: gl-jitter var(--gl-ms) steps(6) reverse both; }
@media (prefers-reduced-motion: reduce) { .gl-veil { display: none; } html.is-glitching main, html.is-glitching .site-header, html.is-glitching .cat-bar, .gl-hit { animation: none !important; } }
@media print { .gl-veil { display: none !important; } }

/* ---------- category bar options (Appearance → Kategorije) ---------- */
.cat-bar a { font-size: calc(.74rem * var(--cb-scale, 1)); }
.cat-bar a .count { font-size: .85em; opacity: .7; }
.cb-label { flex: 0 0 auto; align-self: center; margin-right: 6px; font: 700 calc(.66rem * var(--cb-scale, 1))/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--neon); }
.cb-all { margin-left: auto; }
html.cb-al-center .cat-bar-row { justify-content: center; }
html.cb-al-spread .cat-bar-row { justify-content: space-between; }
html.cb-nodot .cat-bar .cat-dot { display: none; }
html.cb-nocaps .cat-bar a { text-transform: none; letter-spacing: .02em; font-family: var(--font); font-size: calc(.86rem * var(--cb-scale, 1)); }
html.cb-c-neon .cat-bar [class*="cc-"] { --cc: var(--neon); }
html.cb-c-mono .cat-bar [class*="cc-"] { --cc: var(--silver); }
html.cb-tabs .cat-bar-row { gap: 0; padding-block: 0; }
html.cb-tabs .cat-bar a { border-radius: 0; min-height: 42px; border: 0; border-bottom: 2px solid transparent; }
html.cb-tabs .cat-bar a[aria-current] { background: rgb(var(--panel-rgb) / .9); color: var(--cc); border-bottom-color: var(--cc); }
html.cb-tabs .cat-bar a[aria-current] .cat-dot { background: var(--cc); }
html.cb-underline .cat-bar a { border: 0; border-radius: 0; padding-inline: 4px; margin-inline: 8px; }
html.cb-underline .cat-bar a:hover { border: 0; box-shadow: inset 0 -2px 0 var(--line-hi); }
html.cb-underline .cat-bar a[aria-current] { background: none; color: var(--silver-hi); box-shadow: inset 0 -2px 0 var(--cc), 0 6px 14px -8px var(--cc); }
html.cb-underline .cat-bar a[aria-current] .cat-dot { background: var(--cc); box-shadow: 0 0 8px var(--cc); }
html.cb-buttons .cat-bar a { border-color: var(--line-hi); border-radius: var(--radius); background: rgb(var(--panel-rgb) / .7); color: var(--silver); }
html.cb-buttons .cat-bar a:hover { border-color: var(--cc); color: var(--silver-hi); }
html.cb-neon .cat-bar a { color: var(--cc); text-shadow: 0 0 8px color-mix(in srgb, var(--cc) 70%, transparent); border-color: color-mix(in srgb, var(--cc) 35%, transparent); }
html.cb-neon .cat-bar a:hover { border-color: var(--cc); box-shadow: 0 0 14px -2px var(--cc); }
html.cb-neon .cat-bar a[aria-current] { color: var(--bg-2); text-shadow: none; box-shadow: 0 0 22px -2px var(--cc); }
.cb-dd { position: relative; display: inline-flex; flex: 0 0 auto; }
.cb-dd-menu { position: absolute; top: 100%; left: 0; z-index: 70; min-width: 200px; display: none; flex-direction: column; padding: 6px; background: rgb(var(--bg-rgb) / .97); border: 1px solid var(--line-hi); border-radius: var(--radius); }
.cb-dd:hover .cb-dd-menu, .cb-dd:focus-within .cb-dd-menu { display: flex; }
.cb-dd-menu a { border-radius: var(--radius) !important; text-transform: none !important; letter-spacing: .02em !important; }
.cat-bar:has(.cb-dd) .cat-bar-row { overflow: visible; -webkit-mask-image: none; mask-image: none; flex-wrap: wrap; }

/* ======================================================================
   PRINT / PDF — always a clean text output of the article:
   no header, menus, bars, sidebar, buttons, related posts or effects; black on white,
   serif text, link addresses written out, FAQ answers opened (app.js), page breaks kept sane.
   ====================================================================== */
.print-only { display: none; }
@media print {
  @page { margin: 18mm 16mm 20mm; }
  html, body { background: #fff !important; color: #111 !important; height: auto !important; overflow: visible !important; }
  body { display: block; font: 11.5pt/1.55 Georgia, "Times New Roman", serif !important; }
  *, *::before, *::after { color: #111 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; animation: none !important; transition: none !important; -webkit-text-fill-color: currentColor !important; }
  body::before, body::after, .site-header, .cat-bar, .rec-bar, .site-footer, .site-sidebar, .consent, .to-top, .skip, .crumbs, .preview-banner,
  .post-tools, .vault-btns, .below, .related, .pager, .backlinks, .tag-panel, .series-nav, .toolbar, .source-box, .author-more,
  .video-frame iframe, [data-yt-load], .video-note, .prompt-head button, [data-copy-prompt], .random-row, .draft-badge, .glitch::before, .glitch::after,
  main > .panel, .post-tags, .card-media, .keypoints-title + .ico { display: none !important; }
  main, .wrap, .with-sidebar, .main-col, .post { display: block !important; max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
  .print-only { display: block !important; }
  .print-head { margin: 0 0 8mm; padding-bottom: 2mm; border-bottom: 1px solid #999; font: 9pt/1.3 Arial, sans-serif !important; color: #555 !important; }
  .print-foot { margin-top: 10mm; padding-top: 2mm; border-top: 1px solid #999; font: 9pt/1.3 Arial, sans-serif !important; color: #555 !important; word-break: break-all; }
  .post-kicker { font: 9pt Arial, sans-serif; text-transform: uppercase; letter-spacing: .1em; }
  .post-kicker a { text-decoration: none; }
  .post-title { font: 700 22pt/1.2 Georgia, serif !important; margin: 2mm 0 !important; }
  .post-subtitle, .post-lede { font-size: 12.5pt !important; font-style: italic; }
  .post-meta { display: flex !important; flex-wrap: wrap; gap: 0 6mm; font: 9pt Arial, sans-serif !important; color: #444 !important; margin: 3mm 0 6mm !important; }
  .post-meta div, .post-meta dd { margin: 0; }
  h1, h2, h3, h4 { font-family: Georgia, serif !important; break-after: avoid; page-break-after: avoid; }
  h2 { font-size: 15pt !important; margin-top: 7mm !important; }
  h3 { font-size: 13pt !important; }
  p, li, blockquote { orphans: 3; widows: 3; }
  img, figure, pre, blockquote, table, .keypoints, .source-card, .faq-item, .prompt-box { break-inside: avoid; page-break-inside: avoid; }
  img { max-width: 100% !important; max-height: 110mm; width: auto !important; height: auto !important; margin: 3mm auto; }
  .post-figure img { max-height: 90mm; }
  .panel, .keypoints, .source-card, .toc, .prompt-box, .faq, .video-box, .downloads, .author-box, .series { border: 1px solid #bbb !important; border-radius: 0 !important; padding: 3mm 4mm !important; margin: 4mm 0 !important; }
  .toc { break-inside: avoid; }
  pre, code, .prompt-text { font: 9.5pt/1.45 "Courier New", monospace !important; white-space: pre-wrap !important; word-break: break-word; overflow: visible !important; max-height: none !important; }
  blockquote { border-left: 3px solid #999 !important; padding-left: 4mm !important; font-style: italic; }
  a { text-decoration: underline !important; }
  .prose a[href^="http"]::after, .source-card a[href^="http"]::after, .link-list a[href^="http"]::after, .video-link::after, .author-url a::after { content: " <" attr(href) ">"; font: 8.5pt Arial, sans-serif; word-break: break-all; }
  .video-frame { aspect-ratio: auto !important; height: auto !important; min-height: 0 !important; border: 0 !important; }
  .video-consent { position: static !important; display: block !important; padding: 0 !important; }
  .video-box .video-link { display: inline !important; }
  details > summary { list-style: none; font-weight: 700; }
  details > summary::-webkit-details-marker { display: none; }
  .faq-item > * { display: block !important; }
  .chip { border: 0 !important; padding: 0 !important; }
  .btn { display: inline !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; font: inherit !important; letter-spacing: normal !important; text-transform: none !important; }
  .btn[data-yt-load], .btn[data-print], .btn[data-shuffle], .btn[data-copy-prompt] { display: none !important; }
  .panel-title, .keypoints-title, .toc-title { font: 700 10pt Arial, sans-serif !important; letter-spacing: .08em; }
  .author-box { display: block !important; }
  .author-ico { display: none !important; }
}
.btn[hidden], .net-tools[hidden] { display: none !important; }

/* ---------- profiles & pages ---------- */
.avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; border: 1px solid var(--line-hi); }
.avatar--lg { width: 112px; height: 112px; box-shadow: 0 0 0 3px rgb(var(--neon-rgb) / .25), 0 0 28px -6px rgb(var(--neon-rgb) / .6); }
.avatar--txt { display: inline-grid; place-items: center; font: 800 1.2rem/1 var(--mono); color: var(--neon); background: var(--panel); }
.avatar--lg.avatar--txt { font-size: 2rem; }
.author-head { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.author-head > div { flex: 1 1 320px; min-width: 0; }
.profile-facts { list-style: none; padding: 0; margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .92rem; }
.profile-facts li { display: flex; gap: 8px; align-items: baseline; }
.pf-k { font: 700 .64rem/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.author-page { margin: 32px auto 0; }
.author-card { display: flex; gap: 14px; align-items: flex-start; }
.author-ava { width: 52px; height: 52px; }
.footer-contact a { color: inherit; }
.page .post-head { margin-bottom: 20px; }

/* ---------- previous / next article with icons ---------- */
.pager--rich { flex-direction: row; align-items: center; gap: 12px; transition: border-color .2s, box-shadow .2s, transform .2s; }
.pager--rich:hover { border-color: var(--neon); box-shadow: 0 0 0 1px rgb(var(--neon-rgb) / .2), 0 0 22px -6px rgb(var(--neon-rgb) / .5); }
.pager-next.pager--rich { justify-content: flex-end; text-align: right; }
.pager-ico { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; border: 1px solid var(--line-hi); color: var(--neon); transition: transform .2s, background .2s; }
.pager-ico .ico { width: 22px; height: 22px; }
.pager-prev.pager--rich:hover .pager-ico { transform: translateX(-3px); background: rgb(var(--neon-rgb) / .1); }
.pager-next.pager--rich:hover .pager-ico { transform: translateX(3px); background: rgb(var(--neon-rgb) / .1); }
.pager-next.pager--rich .pager-ico { order: 3; }
.pager-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pager-next.pager--rich .pager-body { align-items: flex-end; }
.pager-cat { font: 600 .64rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager-img { flex: 0 0 72px; width: 72px; height: 48px; object-fit: cover; border-radius: var(--radius); }
.pager-float a.pf { position: fixed; top: 50%; z-index: 45; display: none; place-items: center; width: 44px; height: 64px; translate: 0 -50%; color: var(--silver-hi); text-decoration: none;
  background: rgb(var(--panel-rgb) / .85); border: 1px solid var(--line-hi); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: color .2s, border-color .2s, box-shadow .2s; }
.pager-float .pf-prev { left: 0; border-left: 0; border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }
.pager-float .pf-next { right: 0; border-right: 0; border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.pager-float a.pf:hover { color: var(--neon); border-color: var(--neon); box-shadow: 0 0 18px -4px rgb(var(--neon-rgb) / .6); }
@media (min-width: 1100px) { .pager-float a.pf { display: grid; } }
@media print { .pager-float { display: none !important; } }