/* ─────────────────────────────────────────────────────────────
   rampage :: crt theme
   phosphor emerald + bruised purple, late-80s VT220 lineage
   ───────────────────────────────────────────────────────────── */

:root {
  --phosphor: #00ff9c;
  --phosphor-bright: #9bffd6;
  --phosphor-dim: #5ed4a3;
  --phosphor-fade: #1c6e4d;

  /* rose-magenta family (~320°) — complement-harmony with phosphor (~156°) */
  --magenta: #e85cc8;
  --magenta-bright: #ffb1ec;
  --magenta-deep: #8a2c75;
  --magenta-fade: #34132c;

  --amber: #ffb000;
  --rose: #ff7ad9;

  --bg: #0b0510;
  --bg-raise: #18091f;
  --bg-deep: #050108;
  --ink: #e8fff2;

  --glow-emerald:
    0 0 1px var(--phosphor), 0 0 8px rgba(0, 255, 156, 0.45),
    0 0 18px rgba(0, 255, 156, 0.18);
  --glow-magenta:
    0 0 1px var(--magenta), 0 0 10px rgba(232, 92, 200, 0.55),
    0 0 22px rgba(232, 92, 200, 0.25);
  --glow-amber: 0 0 1px var(--amber), 0 0 8px rgba(255, 176, 0, 0.5);

  --font-display: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-body: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  --font-code: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  --font-terminal: "VT323", "JetBrains Mono", ui-monospace, monospace;

  --measure: 72ch;
  --gutter: clamp(1rem, 3vw, 2.5rem);

  /* code-block tokens (shiki output is mapped to these via colorReplacements) */
  --code-bg: #14081f;
  --code-fn: var(--phosphor);
  --code-comment: #0fa371;
  --code-keyword: var(--magenta);
  --code-string: var(--amber);
  --code-number: var(--rose);
  --code-var: #7fffce;
  --code-type: #d49bff;
  --code-punct: #6a1b9a;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(15px, 0.4vw + 13px, 17px);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100%;
  overflow-x: clip;
}

body {
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(232, 92, 200, 0.08),
      transparent 60%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgba(0, 255, 156, 0.05),
      transparent 70%
    ),
    var(--bg);
  background-attachment: fixed;
  overflow-x: clip;
}

/* ─── CRT shell layers ─── */
.crt-shell {
  position: relative;
  isolation: isolate;
  min-height: 100vh;
}

.crt-scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.14) 0px,
    rgba(0, 0, 0, 0.14) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: multiply;
}

.crt-noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9001;
  opacity: 0.04;
  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='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.7  0 0 0 0 1  0 0 0 0 0.85  0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
  animation: noiseShift 1.2s steps(6) infinite;
}

.crt-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9002;
  background:
    radial-gradient(
      ellipse 120% 90% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    radial-gradient(
      ellipse 100% 80% at 50% 50%,
      transparent 70%,
      rgba(138, 44, 117, 0.18) 100%
    );
}

@keyframes noiseShift {
  0% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-3px, 2px);
  }
  40% {
    transform: translate(2px, -2px);
  }
  60% {
    transform: translate(-2px, -1px);
  }
  80% {
    transform: translate(1px, 3px);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* subtle horizontal flicker on whole shell */
.crt-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9003;
  background: linear-gradient(
    180deg,
    rgba(232, 92, 200, 0.04),
    transparent 30%,
    transparent 70%,
    rgba(0, 255, 156, 0.04)
  );
  animation: flicker 7s linear infinite;
}

@keyframes flicker {
  0%,
  100% {
    opacity: 1;
  }
  47% {
    opacity: 1;
  }
  48% {
    opacity: 0.78;
  }
  49% {
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  73% {
    opacity: 0.85;
  }
  74% {
    opacity: 1;
  }
}

/* ─── Layout ─── */
.container {
  max-width: var(--measure);
  margin: 0 auto;
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--gutter) 4rem;
  position: relative;
  z-index: 10;
}

/* ─── Header ─── */
.site-header {
  margin-bottom: 2.5rem;
}

.banner-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.banner {
  margin: 0;
  font-family: var(--font-code);
  font-weight: 700;
  font-size: clamp(12px, 1.1vw + 2px, 23px);
  line-height: 1;
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  white-space: pre;
  overflow-x: auto;
  padding: 1.2em 0;
  letter-spacing: 0;
  filter: drop-shadow(2px 0 0 rgba(0, 255, 156, 0.32))
    drop-shadow(-2px 0 0 rgba(232, 92, 200, 0.32));
}

.banner-fallback {
  display: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: -0.02em;
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  margin: 0;
}

@media (max-width: 520px) {
  .banner {
    display: none;
  }
  .banner-fallback {
    display: block;
  }
}

.tagline {
  margin: 0.4rem 0 1.6rem;
  color: var(--phosphor-dim);
  font-family: var(--font-code);
  font-style: italic;
  font-size: 0.7em;
  text-shadow: none;
}

.boot-nav {
  font-family: var(--font-terminal);
  font-size: 1.2em;
  line-height: 1.2;
}

.boot-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.4rem;
}

.boot-nav li {
  animation: bootline 280ms steps(12) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

.boot-nav .boot-line {
  color: var(--phosphor-dim);
  text-shadow: none;
  margin-right: 0.6rem;
}

.boot-nav .nav-item a {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  text-decoration: none;
  border-bottom: 1px dashed transparent;
  padding: 0 2px;
  transition: none;
}

.boot-nav .nav-item a:hover,
.boot-nav .nav-item a:focus-visible {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
  outline: none;
  border-bottom-color: var(--magenta-bright);
}

@keyframes bootline {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* ─── Rules + dividers ─── */
.rule {
  border: none;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--magenta-deep) 12%,
    var(--magenta) 50%,
    var(--magenta-deep) 88%,
    transparent
  );
  margin: 1.6rem 0;
  position: relative;
}

.rule::before {
  content: "█▓▒░";
  position: absolute;
  left: 0;
  top: -0.65em;
  background: var(--bg);
  padding: 0 0.4em;
  color: var(--magenta);
  font-family: var(--font-code);
  font-size: 0.7em;
}

/* ─── Home listing ─── */
.terminal-prompt {
  margin-bottom: 1.4rem;
  color: var(--phosphor-dim);
  font-family: var(--font-terminal);
  font-size: 1.15em;
  text-shadow: none;
}

.terminal-prompt .prompt {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-weight: bold;
}

.terminal-prompt .typed {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}

/* shared row template — header + each row use same columns so they align */
:root {
  --row-cols: 2ch 11ch 2ch 1fr 8ch;
  --row-gap: 0.9ch;
  --row-pad-x: 0.6rem;
}

.listing-header {
  display: grid;
  grid-template-columns: var(--row-cols);
  gap: var(--row-gap);
  padding: 0.4rem var(--row-pad-x);
  background: var(--bg-raise);
  border: 1px solid var(--magenta-deep);
  border-bottom: none;
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  font-size: 0.8em;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.listing-header .h-glyph,
.listing-header .h-sep {
  visibility: hidden;
}
.listing-header > span,
.post-row > a > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.post-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  border: 1px solid var(--magenta-deep);
}

.post-row {
  border-top: 1px dashed var(--magenta-fade);
  animation: bootline 280ms steps(14) backwards;
  animation-delay: calc(var(--i, 0) * 60ms + 200ms);
}

.post-row:first-child {
  border-top: none;
}

.post-row > a {
  display: grid;
  grid-template-columns: var(--row-cols);
  align-items: baseline;
  gap: var(--row-gap);
  padding: 0.65rem var(--row-pad-x);
  color: var(--ink);
  text-decoration: none;
}

.post-row > a:hover,
.post-row > a:focus-visible {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
  outline: none;
}

.post-row > a:hover .row-glyph,
.post-row > a:hover .row-date,
.post-row > a:hover .row-sep,
.post-row > a:hover .row-meta {
  color: var(--bg-raise);
  text-shadow: none;
}

.row-glyph {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
}
.row-date {
  color: var(--phosphor-dim);
  font-family: var(--font-code);
  font-size: 0.9em;
  text-shadow: none;
}
.row-sep {
  color: var(--magenta-deep);
  text-shadow: none;
}
.row-meta {
  color: var(--phosphor-dim);
  font-family: var(--font-code);
  text-shadow: none;
  font-size: 0.8em;
}

/* indent matches the title column start: glyph + date + sep + 3 gaps + row pad */
.row-desc {
  margin: 0 0 0.6rem
    calc(2ch + 11ch + 2ch + (var(--row-gap) * 3) + var(--row-pad-x));
  padding-right: var(--row-pad-x);
  color: var(--phosphor-dim);
  text-shadow: none;
  font-size: 0.85em;
  font-family: var(--font-code);
  font-style: italic;
}

.post-row.empty {
  padding: 1rem 0.6rem;
  color: var(--phosphor-dim);
  text-shadow: none;
}

/* ─── Post page ─── */
.frontmatter-cat {
  background: var(--bg-raise);
  border-left: 3px solid var(--magenta);
  padding: 0.9rem 1.1rem;
  margin: 0 0 2rem;
  color: var(--phosphor-bright);
  text-shadow: none;
  font-size: 0.85em;
  line-height: 1.55;
  font-family: var(--font-code);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.frontmatter-cat .prompt {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-weight: bold;
}

.post-head {
  margin-bottom: 2rem;
}

.post-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 3.2rem);
  line-height: 1.1;
  margin: 0 0 0.4rem;
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  letter-spacing: -0.05em;
  filter: drop-shadow(2px 0 0 rgba(0, 255, 156, 0.4))
    drop-shadow(-1px 0 0 rgba(232, 92, 200, 0.45));
}

.post-desc {
  color: var(--phosphor-dim);
  text-shadow: none;
  font-family: var(--font-code);
  font-style: italic;
  font-size: 0.9em;
  margin: 0;
}

/* ─── Prose ─── */
.prose {
  max-width: 68ch;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.7;
}

.prose h1,
.prose h2,
.prose h3,
.prose h4 {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  margin: 2.4rem 0 1rem;
  letter-spacing: -0.02em;
  line-height: 1.15;
  position: relative;
  padding-left: 0.2em;
}

.prose h2 {
  font-size: 1.6em;
  display: flex;
  align-items: center;
  gap: 0.6ch;
}

.prose h2::before {
  content: "┌─[";
  color: var(--magenta-deep);
  text-shadow: none;
  font-family: var(--font-code);
}

.prose h2::after {
  content: "]──";
  color: var(--magenta-deep);
  text-shadow: none;
  font-family: var(--font-code);
  flex: 1;
  overflow: hidden;
  letter-spacing: -1px;
}

.prose h3 {
  font-size: 1.25em;
}
.prose h3::before {
  content: "▸ ";
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  font-family: var(--font-code);
}

.prose p {
  margin: 1rem 0;
}

.prose a {
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  text-decoration: none;
  border-bottom: 1px dashed var(--magenta);
  padding-bottom: 1px;
}

.prose a:hover,
.prose a:focus-visible {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
  border-bottom-color: var(--magenta-bright);
  outline: none;
}

.prose strong {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  font-weight: 700;
}

.prose em {
  color: var(--rose);
  text-shadow: 0 0 8px rgba(255, 122, 217, 0.4);
  font-family: var(--font-code);
  font-style: italic;
  font-size: 0.95em;
}

.prose blockquote {
  margin: 1.4rem 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--magenta);
  background: rgba(106, 27, 154, 0.12);
  color: var(--phosphor-bright);
  font-family: var(--font-code);
  font-style: italic;
  font-size: 0.95em;
}

.prose blockquote::before {
  content: "│ ";
  color: var(--magenta);
  font-style: normal;
}

.prose ul,
.prose ol {
  padding-left: 0;
  list-style: none;
}

.prose ul li,
.prose ol li {
  padding-left: 4ch;
  text-indent: -4ch;
}

.prose ul li::before {
  content: "▪   ";
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
}

.prose ol {
  counter-reset: item;
}

.prose ol li {
  counter-increment: item;
}

.prose ol li::before {
  content: "[" counter(item, decimal-leading-zero) "] ";
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-family: var(--font-code);
  font-size: 0.85em;
}

.prose hr {
  border: none;
  text-align: center;
  color: var(--magenta-deep);
  font-family: var(--font-code);
  margin: 2rem 0;
}

.prose hr::before {
  content: "═══════ ◇ ═══════";
}

.prose img {
  max-width: 100%;
  filter: hue-rotate(280deg) saturate(0.6) contrast(1.1);
  border: 1px solid var(--magenta-deep);
}

.prose .video-js {
  width: 100%;
  margin: 1.5rem 0;
  border: 1px solid var(--magenta-deep);
  background: #000;
}
.prose .video-js .vjs-big-play-button {
  background-color: rgba(20, 8, 31, 0.85);
  border-color: var(--magenta-deep);
}

.prose code {
  font-family: var(--font-code);
  font-size: 0.85em;
  background: var(--bg-raise);
  color: var(--phosphor-bright);
  text-shadow: none;
  padding: 0.05em 0.35em;
  border: 1px solid var(--magenta-deep);
}

.prose .code-block {
  margin: 1.4rem 0;
  border: 1px solid var(--magenta-deep);
  background: var(--bg-raise);
  overflow: hidden;
}

.code-bar {
  background: var(--magenta-fade);
  color: var(--magenta-bright);
  font-family: var(--font-code);
  font-size: 0.7em;
  letter-spacing: 0.2em;
  padding: 0.25rem 0.6rem;
  border-bottom: 1px solid var(--magenta-deep);
  text-shadow: none;
  text-transform: uppercase;
}

.prose .code-block pre {
  margin: 0;
  padding: 0.85rem 1rem;
  font-family: var(--font-code);
  font-size: 0.85em;
  line-height: 1.55;
  overflow-x: auto;
  text-shadow: none;
}

.prose .code-block code {
  background: transparent;
  border: none;
  padding: 0;
  text-shadow: none;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4rem 0;
  font-size: 0.9em;
}

.prose th,
.prose td {
  border: 1px solid var(--magenta-deep);
  padding: 0.4rem 0.6rem;
  text-align: left;
}

.prose th {
  background: var(--magenta-fade);
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
}

/* ─── Footer ─── */
.site-footer {
  margin-top: 3rem;
}

.post-foot {
  margin-top: 2.5rem;
}

.prompt-line {
  font-family: var(--font-terminal);
  font-size: 1.15em;
  margin: 0.6rem 0;
}

.prompt {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-weight: bold;
  margin-right: 0.4ch;
}

.cursor {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  animation: blink 1.05s steps(2) infinite;
  display: inline-block;
}

@keyframes blink {
  0%,
  49% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

.meta {
  color: var(--phosphor-dim);
  text-shadow: none;
  font-size: 0.85em;
  margin: 0.6rem 0 0;
}

.meta a {
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  text-decoration: none;
  border-bottom: 1px dashed var(--magenta);
}

.meta a:hover {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
}

/* ─── 404 ─── */
.error-screen {
  min-height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.error-art {
  font-family: var(--font-code);
  font-size: 1.1em;
  color: var(--amber);
  text-shadow: var(--glow-amber);
  background: var(--bg-raise);
  border: 1px solid var(--amber);
  padding: 1rem 1.4rem;
  margin: 0 0 1.4rem;
}

/* ─── Selection ─── */
::selection {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
}

/* ─── Scrollbar (webkit) ─── */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
::-webkit-scrollbar-track {
  background: var(--bg-deep);
}
::-webkit-scrollbar-thumb {
  background: var(--magenta-deep);
  border: 2px solid var(--bg-deep);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--magenta);
}

/* ─── Hero bloom (homepage ASCII art) ─── */
.hero-bloom {
  margin: 0 0 2rem;
  padding: 1.2rem 0 1.6rem;
  border-top: 1px dashed var(--magenta-fade);
  border-bottom: 1px dashed var(--magenta-fade);
  display: flex;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.hero-bloom pre {
  margin: 0;
  font-family: var(--font-code);
  font-weight: 700;
  font-size: clamp(10px, 0.9vw + 4px, 15px);
  line-height: 1.05;
  white-space: pre;
  color: var(--magenta-bright);
  text-shadow:
    0 0 1px var(--magenta),
    0 0 8px rgba(255, 122, 217, 0.5),
    0 0 18px rgba(232, 92, 200, 0.32);
  filter: drop-shadow(1px 0 0 rgba(0, 255, 156, 0.4))
    drop-shadow(-1px 0 0 rgba(232, 92, 200, 0.5));
  animation: bloomPulse 4.6s ease-in-out infinite;
}

.hero-bloom::before,
.hero-bloom::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-bloom::before {
  background: radial-gradient(
    ellipse 40% 70% at 50% 50%,
    rgba(255, 122, 217, 0.18),
    transparent 70%
  );
  mix-blend-mode: screen;
}

.hero-bloom::after {
  background: radial-gradient(
    ellipse 60% 30% at 50% 50%,
    rgba(0, 255, 156, 0.1),
    transparent 75%
  );
  mix-blend-mode: screen;
}

.hero-bloom .bloom-caption {
  position: absolute;
  bottom: 0.2rem;
  right: 0.4rem;
  font-family: var(--font-code);
  font-style: italic;
  font-size: 0.7em;
  color: var(--phosphor-dim);
  text-shadow: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@keyframes bloomPulse {
  0%,
  100% {
    opacity: 0.92;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.015);
  }
}

@media (max-width: 520px) {
  .hero-bloom pre {
    font-size: 9px;
  }
  .hero-bloom .bloom-caption {
    display: none;
  }
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .crt-noise,
  .crt-shell::before {
    display: none;
  }
  .cursor {
    animation: none;
    opacity: 1;
  }
  .hero-bloom pre {
    animation: none;
  }
}

/* ─── Print ─── */
@media print {
  body {
    background: white;
    color: black;
    text-shadow: none;
  }
  .crt-scanlines,
  .crt-noise,
  .crt-vignette,
  .crt-shell::before {
    display: none;
  }
}

/* ─── Pagination ─── */
.pagination {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0 1rem;
  padding: 0.6rem 0.8rem;
  border-top: 1px dashed var(--phosphor-fade);
  border-bottom: 1px dashed var(--phosphor-fade);
  font-family: var(--font-code);
  font-size: 0.95em;
}
.pagination a {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  text-decoration: none;
}
.pagination a:hover {
  color: var(--magenta-bright);
}
.pagination .disabled {
  color: var(--phosphor-fade);
  text-shadow: none;
  cursor: not-allowed;
}
.pagination .page-marker {
  color: var(--phosphor-dim);
  font-style: italic;
}

/* ─── Tag pages ─── */
.tag-screen,
.tags-screen,
.search-screen {
  margin-top: 1.5rem;
}
.tag-title {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-family: var(--font-display);
  margin: 0.4rem 0 0.8rem;
}
.tag-name {
  color: var(--amber);
  text-shadow: var(--glow-amber);
}
.tag-list .post-row a {
  display: flex;
  gap: 1rem;
  align-items: baseline;
}
.tag-row .row-title {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}

/* inline tag chips inside post frontmatter */
.tag {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
}
.tag:hover {
  color: var(--magenta-bright);
}

/* ─── Search ─── */
.search-form {
  display: flex;
  gap: 0.6rem;
  align-items: center;
  margin: 1rem 0 0.4rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-raise);
  border: 1px solid var(--phosphor-fade);
}
.search-form .prompt-inline {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-family: var(--font-code);
}
#search-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-family: var(--font-code);
  font-size: 1rem;
  outline: none;
  caret-color: var(--magenta);
}
#search-input::placeholder {
  color: var(--phosphor-fade);
}
.search-list {
  margin-top: 1rem;
}
.search-hit a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  padding: 0.4rem 0;
  border-bottom: 1px dashed var(--phosphor-fade);
  text-decoration: none;
}
.search-hit .hit-date {
  color: var(--amber);
  font-family: var(--font-code);
}
.search-hit .hit-title {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}
.search-hit .hit-tags {
  color: var(--magenta);
  font-size: 0.85em;
}
.search-hit .hit-snippet {
  grid-column: 2 / -1;
  margin: 0.2rem 0 0.4rem;
  color: var(--phosphor-dim);
  font-size: 0.92em;
  line-height: 1.45;
}
.search-hit mark {
  background: var(--magenta-fade);
  color: var(--magenta-bright);
  padding: 0 2px;
}
.search-miss {
  color: var(--phosphor-fade);
  font-style: italic;
  padding: 0.6rem 0;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Locale switcher ─── */
.locale-switch {
  font-family: var(--font-code);
  font-size: 0.9em;
  color: var(--phosphor-dim);
  margin: 0.4rem 0 0.6rem;
}
.locale-switch .locale-link {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  text-decoration: none;
  margin: 0 0.4rem;
}
.locale-switch .locale-link.active {
  color: var(--amber);
  text-shadow: var(--glow-amber);
  text-decoration: underline;
}
.locale-switch .locale-sep {
  color: var(--phosphor-fade);
  margin: 0 0.1rem;
}

/* ─── Images (pipeline output) ─── */
.prose img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1.4rem auto;
  border: 1px solid var(--phosphor-fade);
  filter: contrast(1.05) saturate(1.1);
}
/* zone theme — STALKER GAMMA :: military mainframe terminal.
   Single-channel green phosphor (Pip-Boy 3000 shades), heavy CRT
   bleed tuned for the Exclusion Zone — slow vertical sync roll,
   geiger flash, banner h-sync jitter. The build prepends the CRT
   base stylesheet. */

:root {
  /* primary green column — Pip-Boy 3000 phosphor shades verbatim */
  --phosphor: #2cff7a;
  --phosphor-bright: #b6ffce;
  --phosphor-dim: #1fb854;
  --phosphor-fade: #0a4d22;

  /* accent green — slightly cooler / paler tube */
  --magenta: #62ff9a;
  --magenta-bright: #d6ffe2;
  --magenta-deep: #157a3b;
  --magenta-fade: #06321a;

  /* warm slots re-tinted into the green family — every accent is
     still a shade of phosphor, no amber, no blood */
  --moss: #00cec8;
  --spring: #00ff7f;
  --rose: #88ffae;

  /* tube body — almost black with a green undertone */
  --bg: #04140a;
  --bg-raise: #082416;
  --bg-deep: #010604;
  --ink: #d8ffe7;

  --glow-emerald:
    0 0 1px var(--phosphor), 0 0 6px rgba(44, 255, 122, 0.55),
    0 0 14px rgba(44, 255, 122, 0.25);
  --glow-magenta:
    0 0 1px var(--magenta), 0 0 8px rgba(98, 255, 154, 0.5),
    0 0 18px rgba(98, 255, 154, 0.2);
  --glow-amber: 0 0 1px var(--moss), 0 0 8px rgba(170, 255, 82, 0.5);

  --font-display: "Space Mono", "JetBrains Mono", ui-monospace, monospace;
  --font-heading: "JetBrains Mono", "Space Mono", ui-monospace, monospace;
  --font-terminal: "VT323", "JetBrains Mono", ui-monospace, monospace;

  /* code-block tokens — green/teal/lime spectrum, no warm channels.
     Distinct hues for readable highlighting, all on-theme phosphor. */
  --code-bg: #03110a;
  --code-fn: #b6ffce; /* fn names — pale mint, pops */
  --code-comment: #3a7a52; /* comments — moss, italic */
  --code-keyword: #62ff9a; /* keywords — bright mint */
  --code-string: #00d4b5; /* strings — teal */
  --code-number: #aaff66; /* numbers — lime */
  --code-var: #d6ffe2; /* vars — paper white-green */
  --code-type: #5cf5d4; /* types — cyan-mint */
  --code-punct: #4d8a6e; /* punct — muted moss */
  --code-tag: #62ff9a; /* html tags */
  --code-attr: #aaff66; /* html attrs */
  --code-builtin: #5cf5d4; /* builtins */
  --code-operator: #b6ffce; /* operators */

  /* border hierarchy — strongest first.
     frame = outer chrome; line/dash/dot = subdividers (weakest last);
     rail = accented left/edge stripe. */
  --border-frame: 2px solid var(--phosphor-dim);
  --border-line: 1px solid var(--phosphor-fade);
  --border-dash: 1px dashed var(--phosphor-fade);
  --border-dot: 1px dotted var(--phosphor-fade);
  --rail-strong: 2px solid var(--phosphor);
  --rail-quote: 3px double var(--phosphor);
  --border-magenta-strong: 1.5px solid var(--magenta);
  --border-magenta-dash: 1px dashed var(--magenta-deep);

  /* spacing scale — modular, prefer tokens for new code.
     Existing literal values left alone to avoid noisy mass-rewrites. */
  --space-0: 0.1rem;
  --space-1: 0.2rem;
  --space-2: 0.4rem;
  --space-3: 0.6rem;
  --space-4: 0.8rem;
  --space-5: 1rem;
  --space-6: 1.4rem;
  --space-7: 2rem;

  /* z-index ramp — content < FX overlays < shell < drawer.
     CRT base owns 9000+ (scanlines/noise/vignette). */
  --z-deep: 0;
  --z-default: 1;
  --z-raised: 2;
  --z-fx-noise: 6;
  --z-fx-vignette: 7;
  --z-fx-frame: 8;
  --z-fx-flicker: 9;
  --z-shell: 10;
  --z-backdrop: 49;
  --z-drawer: 50;

  interpolate-size: allow-keywords;
}

/* ─── utilities (hoisted) ──────────────────────────────────────── */

.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;
}

/* hide scrollbar — keep page scrollable but invisible chrome */
html {
  scrollbar-width: none; /* firefox */
  -ms-overflow-style: none; /* legacy edge / ie */
}
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none; /* chromium / safari */
}

/* ─── CRT effect stack ────────────────────────────────────────── */

/* layer 1 — classified stencil border (replaces military amber) */
.crt-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  border: var(--border-frame);
  outline: var(--border-dash);
  outline-offset: -8px;
  pointer-events: none;
  z-index: var(--z-fx-frame);
  box-shadow:
    inset 0 0 80px rgba(44, 255, 122, 0.08),
    inset 0 0 0 6px var(--bg);
}

/* layer 2 — geiger tick: short flash + occasional double-pulse */
.crt-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(44, 255, 122, 0.025);
  pointer-events: none;
  z-index: var(--z-fx-flicker);
  animation: geigerTick 2.4s steps(1, end) infinite;
}
@keyframes geigerTick {
  0%,
  70% {
    opacity: 0;
  }
  71%,
  72% {
    opacity: 0.75;
  } /* first click */
  73%,
  81% {
    opacity: 0;
  }
  82% {
    opacity: 0.4;
  } /* echo / double tick */
  83%,
  100% {
    opacity: 0;
  }
}

/* layer 3 — slow vertical-sync bright bar drifting top→bottom,
   ~11s cycle, low-opacity. Implemented on body::before so CRT shell
   layers stay clean. */
body::before {
  content: "";
  position: fixed;
  inset: -8vh 0 0 0;
  height: 100vh;
  pointer-events: none;
  z-index: var(--z-fx-vignette);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(44, 255, 122, 0.035) 35%,
    rgba(182, 255, 206, 0.05) 50%,
    rgba(44, 255, 122, 0.035) 65%,
    transparent 100%
  );
  background-size: 100% 14vh;
  background-repeat: no-repeat;
  /* animation: vsyncRoll 11s linear infinite; */
  mix-blend-mode: screen;
}
@keyframes vsyncRoll {
  0% {
    background-position: 0 -16vh;
  }
  100% {
    background-position: 0 110vh;
  }
}

/* layer 4 — barrel curvature: pinch corners with a radial darken */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-fx-noise);
  background: radial-gradient(
    ellipse 130% 100% at 50% 50%,
    transparent 60%,
    rgba(0, 0, 0, 0.55) 100%
  );
}

/* tighter scan lines, single-channel green */
.crt-scanlines {
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(44, 255, 122, 0.09) 0,
    rgba(44, 255, 122, 0.09) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
}

/* zone vignette — concrete dust hatching + corner falloff */
.crt-vignette {
  background:
    radial-gradient(
      ellipse 95% 85% at 50% 50%,
      transparent 50%,
      rgba(0, 0, 0, 0.55) 100%
    ),
    repeating-linear-gradient(
      135deg,
      rgba(31, 184, 84, 0.04) 0,
      rgba(31, 184, 84, 0.04) 2px,
      transparent 2px,
      transparent 8px
    );
}

/* page bg — bunker tar, soft sodium pool top-center */
body {
  background: radial-gradient(
    ellipse 110% 80% at 50% 25%,
    var(--bg-raise) 0%,
    var(--bg) 60%,
    var(--bg-deep) 100%
  );
}

/* horizontal-sync jitter on the banner only — every ~8s the ASCII
   logo glitches sideways one frame, like a tube losing lock */
.banner-link {
  text-align: center;
  display: block;
  container-type: inline-size;
  overflow: hidden;
  max-width: 100%;
}
.banner {
  animation: hsyncJitter 4s steps(1, end) infinite;
  display: block;
  text-align: center;
  margin: 0 auto;
  /* figlet "sektant" Slant ≈ 70 chars wide → ~1.4cqw fits inside container */
  font-size: clamp(11px, min(1.4vw, 1.35cqw), 23px);
  line-height: 1.05;
  letter-spacing: 0;
  max-width: 100%;
  overflow: hidden;
  scrollbar-width: none;
  white-space: pre;
}
.banner::-webkit-scrollbar {
  display: none;
}
@keyframes hsyncJitter {
  0%,
  94%,
  100% {
    transform: translateX(0);
  }
  95% {
    transform: translateX(-2px);
    filter: blur(0.3px);
  }
  96% {
    transform: translateX(2px);
    filter: blur(0.4px);
  }
  97% {
    transform: translateX(-1px);
    filter: blur(0.15px);
  }
  98% {
    transform: translateX(0);
    filter: none;
  }
}

/* whole-shell flicker — slow, very low-amplitude brightness wobble.
   Animation declaration consolidated with the warmup at line ~1324. */
@keyframes shellFlicker {
  0%,
  100% {
    filter: brightness(1);
  }
  17% {
    filter: brightness(0.985);
  }
  34% {
    filter: brightness(1.012);
  }
  52% {
    filter: brightness(0.978);
  }
  68% {
    filter: brightness(1.008);
  }
  84% {
    filter: brightness(0.992);
  }
}

/* ─── typography & content ────────────────────────────────────── */

/* monochrome titles — kill chromatic offset, single-channel phosphor */
.post-title,
.banner-link h1,
.banner-fallback {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  filter: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 10px 0;
  line-height: 1.1;
  font-family: var(--font-terminal);
}
.post-title::before {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}

/* cursor — single-channel green */
.cursor {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}

/* row title — military log entry, restrained until hover */
.row-title {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.04em;
}
.post-row > a:hover .row-title,
.post-row > a:focus-visible .row-title {
  color: var(--phosphor-fade);
  text-shadow: var(--glow-emerald);
}
.row-glyph {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}
.row-date {
  color: var(--phosphor-dim);
}
.row-meta,
.hit-tags {
  color: var(--phosphor-fade);
  text-shadow: none;
}

/* tag chips — radioactive find designations */
.tag,
.tag-row .row-title {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tag:hover {
  color: var(--magenta-bright);
}
.tag-row .row-title::before {
  content: "☢ ";
  color: var(--phosphor-bright);
}

/* search matches */
.search-hit mark {
  background: var(--phosphor-fade);
  color: var(--phosphor-bright);
  border: 1px solid var(--phosphor-dim);
  padding: 0 2px;
}
.search-miss::before {
  content: "// нет сигнала — ";
  color: var(--phosphor-dim);
}

/* code blocks — terminal output panel */
.prose .code-block {
  background: var(--code-bg);
  border: 1px solid var(--phosphor-fade);
  box-shadow: inset 0 0 24px rgba(44, 255, 122, 0.04);
}
.code-block .code-bar {
  color: var(--phosphor);
  background: rgba(44, 255, 122, 0.06);
  border-bottom: var(--border-dash);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-family: var(--font-terminal);
  font-size: 0.78em;
  text-shadow: var(--glow-emerald);
}
.prose .code-block pre {
  background: transparent;
  font-family: var(--font-heading);
  font-size: 0.86em;
  line-height: 1.55;
}
/* inline code */
.prose code {
  background: rgba(44, 255, 122, 0.06);
  border: 1px solid var(--phosphor-fade);
  color: var(--phosphor-bright);
  font-family: var(--font-heading);
  font-size: 0.86em;
  padding: 0.05em 0.4em;
  text-shadow: none;
}
.prose .code-block code {
  background: transparent;
  border: none;
  padding: 0;
}
/* shiki tokens — italic comments for readability */
.prose pre [style*="--code-comment"],
.prose pre span[style*="color:var(--code-comment)"] {
  font-style: italic;
}

/* nav — re-tint only, layout left to CRT base styles */
.locale-switch .locale-link {
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/* ─── home hero (terminal broadcast panel) ───────────────────── */

.hero-zone {
  margin: 0 0 2rem;
  container-type: inline-size;
}

.hero-frame {
  position: relative;
  border: 1px solid var(--phosphor);
  background:
    radial-gradient(
      ellipse 120% 70% at 50% 0%,
      rgba(44, 255, 122, 0.08) 0%,
      transparent 70%
    ),
    var(--bg);
  box-shadow:
    0 0 0 1px var(--phosphor-fade) inset,
    0 0 24px rgba(44, 255, 122, 0.18),
    0 0 60px rgba(44, 255, 122, 0.06);
  overflow: hidden;
}
.hero-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: var(--border-dash);
  pointer-events: none;
  z-index: 1;
}

.hero-hud {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.7rem;
  font-family: var(--font-terminal);
  font-size: 0.85em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--phosphor-dim);
  position: relative;
  z-index: 2;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 6px,
      rgba(44, 255, 122, 0.05) 6px 7px
    ),
    var(--bg-raise);
}
.hero-hud-top {
  border-bottom: var(--border-line);
}
.hero-hud-bot {
  border-top: var(--border-line);
}
.hud-label {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hud-spacer {
  flex: 1 1 auto;
  min-width: 0;
}
.hud-text {
  color: var(--phosphor-dim);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hud-bars {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.05em;
}

.hud-led {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow:
    0 0 4px currentColor,
    0 0 10px currentColor;
}
.hud-led-rec {
  color: var(--magenta-bright);
  background: currentColor;
  animation: hudBlink 1.4s steps(2, end) infinite;
}
.hud-led-pwr {
  color: var(--phosphor);
  background: currentColor;
  animation: hudPulse 2.6s ease-in-out infinite;
}
@keyframes hudBlink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.18;
  }
}
@keyframes hudPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(0.85);
  }
}

.hud-tape {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  border-left: var(--border-dash);
  border-right: var(--border-dash);
  padding: 0 0.6rem;
}
.hud-tape-run {
  display: inline-block;
  white-space: nowrap;
  animation: hudTapeRoll 22s linear infinite;
  will-change: transform;
  color: var(--phosphor-fade);
  letter-spacing: 0.18em;
}
@keyframes hudTapeRoll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

.hero-art-wrap {
  position: relative;
  padding: 1.4rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  min-height: 14em;
  isolation: isolate;
}

.hero-art {
  font-family: var(--font-heading);
  font-weight: 700;
  /* art is ~22-30 chars wide; auto-fit container */
  font-size: clamp(3px, min(3.6vw, 2.4cqw), 4px);
  line-height: 1.2;
  margin: 0;
  white-space: pre;
  color: var(--phosphor-bright);
  text-shadow:
    0 0 1px var(--phosphor),
    0 0 8px rgba(44, 255, 122, 0.55),
    0 0 20px rgba(44, 255, 122, 0.25);
  filter: none;
  position: relative;
  z-index: 1;
  animation:
    heroFadeIn 900ms ease-out 1 backwards,
    heroBreathe 4.2s ease-in-out 900ms infinite,
    heroGlitch 7s steps(1, end) 1.4s infinite;
  transform-origin: 50% 50%;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    filter: blur(4px) brightness(0.4);
    transform: scaleY(0.6);
  }
  100% {
    opacity: 1;
    filter: blur(0) brightness(1);
    transform: scaleY(1);
  }
}
@keyframes heroBreathe {
  0%,
  100% {
    text-shadow:
      0 0 1px var(--phosphor),
      0 0 6px rgba(44, 255, 122, 0.45),
      0 0 16px rgba(44, 255, 122, 0.18);
    opacity: 0.95;
  }
  50% {
    text-shadow:
      0 0 1px var(--phosphor),
      0 0 14px rgba(44, 255, 122, 0.85),
      0 0 28px rgba(44, 255, 122, 0.4);
    opacity: 1;
  }
}
@keyframes heroGlitch {
  0%,
  92%,
  100% {
    transform: translateX(0);
    filter: none;
  }
  93% {
    transform: translateX(-2px);
    filter: blur(0.4px) hue-rotate(8deg);
  }
  94% {
    transform: translateX(3px);
    filter: blur(0.2px);
  }
  95% {
    transform: translateX(-1px);
    filter: none;
  }
  96% {
    transform: translateX(0);
  }
}

/* horizontal scanline sweep over art */
.hero-scanline {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 14%;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(182, 255, 206, 0.18) 45%,
    rgba(44, 255, 122, 0.28) 50%,
    rgba(182, 255, 206, 0.18) 55%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: heroScan 5.5s ease-in-out infinite;
}
@keyframes heroScan {
  0% {
    transform: translateY(-120%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(820%);
    opacity: 0;
  }
}

/* corner vignette inside art panel */
.hero-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(
      ellipse 90% 70% at 50% 50%,
      transparent 55%,
      rgba(0, 0, 0, 0.45) 100%
    ),
    repeating-linear-gradient(
      to bottom,
      rgba(44, 255, 122, 0.05) 0,
      rgba(44, 255, 122, 0.05) 1px,
      transparent 1px,
      transparent 3px
    );
  mix-blend-mode: screen;
  opacity: 0.7;
}

@media (max-width: 540px) {
  .hero-hud {
    font-size: 0.72em;
    gap: 0.4rem;
    padding: 0.3rem 0.45rem;
  }
  .hero-art-wrap {
    padding: 0.9rem 0.4rem;
    min-height: 9em;
  }
  .hud-tape {
    padding: 0 0.3rem;
  }
  .hud-led {
    width: 0.55em;
    height: 0.55em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .hero-scanline,
  .hud-led-rec,
  .hud-led-pwr,
  .hud-tape-run {
    animation: none !important;
  }
  .hero-art {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* legacy hero-bloom (still used elsewhere?) — keep auto-fit */
.hero-bloom {
  container-type: inline-size;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  margin: 0 0 1rem;
  padding: 0.4rem 0;
}
.hero-bloom pre {
  filter: none;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  /* VAULT braille is ~69 chars wide; 0.6ch per glyph + 1ch slack = ~42 cqw / size factor */
  font-size: clamp(3px, min(1.6vw, 1.45cqw), 14px);
  line-height: 1;
  letter-spacing: 0;
  white-space: pre;
  margin: 0;
  max-width: 100%;
  display: block;
  text-align: center;
}
.hero-bloom::before,
.hero-bloom::after {
  display: none;
}

/* tagline — radio callsign, uppercase phosphor */
.tagline {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* prose blockquotes — radio chatter */
.prose blockquote {
  border-left: var(--rail-quote);
  background: rgba(44, 255, 122, 0.04);
  color: var(--phosphor-bright);
  padding: 0.6rem 0.9rem;
  font-style: italic;
}
.prose blockquote::before {
  content: "$ cat > ";
  color: var(--magenta-bright);
}

/* prose headings — JetBrains Mono, distinct from VT323 body */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  filter: none;
  position: relative;
  padding-left: 0;
  display: block;
}

.prose h1 {
  font-size: clamp(1.8rem, 3.4vw, 2.4rem);
  margin: 2.2rem 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.prose h2 {
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  margin: 2.4rem 0 1rem;
  padding: 0.3rem 0 0.35rem 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-bottom: var(--border-line);
  border-left: 3px solid var(--phosphor);
  background: linear-gradient(90deg, rgba(44, 255, 122, 0.08), transparent 60%);
  display: block;
}
.prose h2::before,
.prose h2::after {
  content: none;
}
.prose h2::before {
  content: "// ";
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  margin-right: 0.2ch;
}

.prose h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  margin: 1.8rem 0 0.6rem;
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  letter-spacing: 0.04em;
}
.prose h3::before {
  content: "▸ ";
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-family: var(--font-terminal);
}

.prose h4 {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  margin: 1.4rem 0 0.5rem;
  color: var(--phosphor);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.prose h4::before {
  content: "└─ ";
  color: var(--phosphor-fade);
  font-family: var(--font-terminal);
}

.prose h5,
.prose h6 {
  font-size: 1rem;
  margin: 1.2rem 0 0.4rem;
  color: var(--phosphor-dim);
  text-shadow: none;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.prose {
  max-width: 100%;
}

/* 404 / anomaly — even danger stays in green, just deeper + wider glow */
.error-screen .error-art {
  color: var(--phosphor-bright);
  text-shadow:
    0 0 1px var(--phosphor),
    0 0 12px rgba(44, 255, 122, 0.7),
    0 0 24px rgba(44, 255, 122, 0.4);
  border: 1px dashed var(--phosphor);
  padding: 1rem 1.4rem;
  background: rgba(44, 255, 122, 0.04);
  animation: anomalyPulse 2s ease-in-out infinite;
}
@keyframes anomalyPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.92;
  }
}

/* frontmatter cat block — log header (legacy, kept for any post still
   using the raw <pre class="frontmatter-cat">) */
.frontmatter-cat {
  border-left: var(--rail-strong);
  padding-left: 0.8rem;
  background: rgba(44, 255, 122, 0.03);
  color: var(--phosphor-bright);
}
.frontmatter-cat .prompt {
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
}

/* ─── post header (redesigned) ─────────────────────────────────── */

.post-head {
  position: relative;
  margin: 0 0 var(--space-7);
  padding: var(--space-3) 0 var(--space-4);
  border-top: var(--border-frame);
  border-bottom: var(--border-dash);
}
.post-head::before,
.post-head::after {
  content: "+";
  position: absolute;
  top: -0.6em;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-family: var(--font-terminal);
  font-size: 1em;
  line-height: 1;
  background: var(--bg);
  padding: 0 0.3ch;
  user-select: none;
}
.post-head::before {
  left: var(--space-2);
}
.post-head::after {
  right: var(--space-2);
}

.post-stamp {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6ch;
  margin: 0 0 var(--space-3);
  font-family: var(--font-terminal);
  font-size: 0.78em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--phosphor-fade);
}
.post-stamp .stamp-glyph {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}
.post-stamp .stamp-text {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-weight: 700;
}
.post-stamp .stamp-sep {
  color: var(--phosphor-fade);
}
.post-stamp .stamp-id {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  letter-spacing: 0.14em;
  word-break: break-all;
  font-size: 0.95em;
}

/* title — overrides crt base + earlier zone monochrome rule */
.post .post-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 2vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: -0.05em;
  text-transform: none;
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  margin: 0 0 var(--space-3);
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5ch;
  filter: none;
}
.post .post-title::before {
  flex: 0 0 auto;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-size: 0.85em;
  line-height: 1;
  padding-top: 0.12em;
  animation: stampPulse 4.2s ease-in-out infinite;
}
.post-title-text {
  flex: 1 1 auto;
  background-image: linear-gradient(
    180deg,
    var(--phosphor-bright) 0%,
    var(--phosphor-bright) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 0 22px rgba(44, 255, 122, 0.35);
  text-transform: uppercase;
}

@keyframes stampPulse {
  0%,
  100% {
    opacity: 1;
    filter: brightness(1);
  }
  50% {
    opacity: 0.85;
    filter: brightness(1.25);
  }
}

.post-desc {
  font-family: var(--font-terminal);
  font-style: normal;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  color: var(--phosphor-dim);
  letter-spacing: 0.02em;
  margin: 0 0 var(--space-4);
  max-width: 60ch;
  line-height: 1.4;
}

.post-meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  grid-template-columns: repeat(auto-fit, minmax(11ch, 1fr));
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0 0;
  border-top: var(--border-dash);
  font-family: var(--font-terminal);
  font-size: 0.82em;
  font-variant-numeric: tabular-nums;
}
.pm-cell {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.pm-cell--tags {
  grid-column: 1 / -1;
}
.post-meta dt {
  font-size: 0.78em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--phosphor-fade);
}
.post-meta dt::before {
  content: "// ";
  color: var(--phosphor-fade);
  opacity: 0.7;
}
.post-meta dd {
  margin: 0;
  color: var(--phosphor-bright);
  text-shadow: 0 0 6px rgba(44, 255, 122, 0.35);
  letter-spacing: 0.04em;
  display: inline-flex;
  align-items: center;
  gap: 0.5ch;
  min-width: 0;
}
.pm-led {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--phosphor);
  box-shadow:
    0 0 6px var(--phosphor),
    0 0 12px rgba(44, 255, 122, 0.5);
  animation: siPulse 2.2s ease-in-out infinite;
}
.pm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.4rem;
  text-shadow: none;
}
.pm-tags .tag {
  border: var(--border-magenta-dash);
  padding: 0.05em 0.45em;
  text-decoration: none;
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  font-size: 0.92em;
  letter-spacing: 0.05em;
  transition: background 120ms ease-out;
}
.pm-tags .tag:hover {
  background: var(--magenta);
  color: var(--bg);
  text-shadow: none;
  border-color: var(--magenta-bright);
}

@media (max-width: 540px) {
  .post-head {
    padding: var(--space-3) 0;
  }
  .post .post-title {
    font-size: clamp(1.7rem, 8vw, 2.4rem);
  }
  .post-stamp {
    font-size: 0.7em;
    letter-spacing: 0.18em;
  }
  .post-meta {
    grid-template-columns: repeat(auto-fit, minmax(9ch, 1fr));
    gap: var(--space-2) var(--space-3);
  }
}

/* listing-header column band */
.listing-header {
  color: var(--phosphor-dim);
  border-bottom: var(--border-line);
  border-top: var(--border-line);
  padding: 0.3rem 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.85em;
}

/* operator console prompt block */
.terminal-prompt {
  color: var(--phosphor-bright);
  border-bottom: var(--border-dash);
  padding: 0.3rem 0;
  margin-bottom: 0.6rem;
}
.terminal-prompt .prompt {
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  font-family: var(--font-terminal);
}
.terminal-prompt .typed {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}

/* pagination */
.pagination {
  border-color: var(--phosphor-fade);
}
.pagination a {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
}
.pagination a:hover {
  color: var(--magenta-bright);
}
.pagination .page-marker {
  color: var(--phosphor-dim);
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

/* search input */
#search-input {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  caret-color: var(--magenta-bright);
}
#search-input::placeholder {
  color: var(--phosphor-fade);
}
.search-form {
  border-color: var(--phosphor-dim);
  background: rgba(44, 255, 122, 0.03);
}
.search-form .prompt-inline {
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
}

/* selection */
::selection {
  background: var(--phosphor-fade);
  color: var(--phosphor-bright);
}

/* prose links — radio callsigns */
.prose a {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.prose a:hover {
  color: var(--magenta-bright);
}

/* classification stripe — now in green (no amber anywhere) */
.classification {
  text-align: center;
  font-family: var(--font-terminal);
  font-size: 0.85em;
  letter-spacing: 0.22em;
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  background: rgba(44, 255, 122, 0.05);
  border-top: 1px dashed var(--phosphor);
  border-bottom: 1px dashed var(--phosphor);
  padding: 0.25rem 0.4rem;
  margin: 0 0 0.6rem;
}

/* ─── NERDTree sidebar ────────────────────────────────────────── */
.zone-shell {
  display: grid;
  grid-template-columns: clamp(220px, 22vw, 280px) minmax(0, 1fr) clamp(
      220px,
      20vw,
      260px
    );
  align-items: start;
  position: relative;
  z-index: var(--z-shell);
}
.zone-shell .container {
  max-width: 100%;
  margin: auto;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: clamp(1rem, 3vw, 2.5rem);
}
@media (min-width: 1400px) {
  .zone-shell .container {
    max-width: 80ch;
  }
}
@media (max-width: 1180px) {
  .zone-shell {
    grid-template-columns: clamp(220px, 26vw, 280px) minmax(0, 1fr);
  }
  .sysinfo {
    display: none;
  }
}

.nerdtree {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow: hidden;
  border-right: var(--border-dash);
  background: linear-gradient(
    to right,
    rgba(44, 255, 122, 0.05) 0%,
    rgba(44, 255, 122, 0.012) 100%
  );
  font-family: var(--font-terminal);
  font-size: 1.05em;
  color: var(--phosphor-dim);
  display: flex;
  flex-direction: column;
  min-width: 0;
  contain: layout paint;
  transition: transform 220ms ease-out;
}

.nt-toggle {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: transparent;
  border: var(--border-dash);
  color: var(--phosphor);
  font-family: var(--font-terminal);
  font-size: 1.1em;
  width: 1.8em;
  height: 1.6em;
  cursor: pointer;
  z-index: var(--z-raised);
  text-shadow: var(--glow-emerald);
  padding: 0;
  line-height: 1;
}
.nt-toggle:hover {
  background: var(--phosphor);
  color: var(--bg);
  text-shadow: none;
}

.nt-root {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: var(--space-3) var(--space-2) var(--space-3) var(--space-3);
  scrollbar-width: none;
}
.nt-root::-webkit-scrollbar {
  display: none;
}

.nt-header {
  margin: 0 0 var(--space-3);
  padding: 0 var(--space-1) 0.5rem;
  border-bottom: var(--border-dash);
}
.nt-buf {
  margin: 0;
  font-size: 0.78em;
  letter-spacing: 0.18em;
  color: var(--phosphor-fade);
  text-transform: uppercase;
}
.nt-title {
  margin: var(--space-0) 0 0;
  font-family: var(--font-terminal);
  font-size: 1.4em;
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.04em;
  word-break: break-all;
}
.nt-status {
  margin: var(--space-2) 0 0;
  font-size: 0.72em;
  color: var(--phosphor-fade);
  letter-spacing: 0.1em;
}
.nt-status kbd {
  font-family: var(--font-terminal);
  border: var(--border-line);
  padding: 0 0.3em;
  color: var(--phosphor);
  background: rgba(44, 255, 122, 0.05);
  font-size: 0.95em;
}

.nt-tree,
.nt-children {
  list-style: none;
}
.nt-tree {
  margin: 0;
  padding: 0;
}
.nerdtree li::marker {
  content: "";
}
.nerdtree li {
  list-style: none;
}
.nt-row {
  margin: 0;
  padding: 0;
  white-space: nowrap;
  line-height: 1.5;
}
.nt-root-row {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  padding: 0.05rem var(--space-1);
}
.nt-root-row .nt-fold {
  color: var(--phosphor);
}

.nt-row[data-depth="1"] > .nt-fold-btn,
.nt-row[data-depth="1"] {
  padding-left: 1ch;
}
.nt-row[data-depth="2"] .nt-link {
  padding-left: 3ch;
}
.nt-fold {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  display: inline-block;
  width: 1ch;
  text-align: center;
}
.nt-dir {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.02em;
}
.nt-meta {
  color: var(--phosphor-fade);
  font-size: 0.85em;
  margin-left: 0.3em;
}

.nt-fold-btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  display: block;
  width: 100%;
  cursor: pointer;
  padding: 0.05rem var(--space-1);
  box-sizing: border-box;
  white-space: nowrap;
  line-height: inherit;
}
.nt-fold-btn:hover {
  background: rgba(44, 255, 122, 0.08);
}
.nt-fold-btn:hover .nt-dir {
  color: var(--phosphor-bright);
}
.nt-fold-btn:focus-visible {
  outline: 1px dashed var(--phosphor);
  outline-offset: -1px;
}

.nt-children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  overflow: hidden;
  animation: ntFold 160ms ease-out;
}
.nt-group.nt-open > .nt-children {
  display: block;
}

@keyframes ntFold {
  from {
    opacity: 0;
    transform: translateY(-2px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.nt-leaf {
  padding: 0;
}
.nt-leaf .nt-link {
  display: block;
  padding: 0.1rem var(--space-1);
  color: var(--phosphor-dim);
  text-decoration: none;
  text-shadow: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-left: 2px solid transparent;
  transition:
    background 120ms ease-out,
    color 120ms ease-out;
}
.nt-leaf .nt-link:focus-visible {
  outline: 1px dashed var(--phosphor);
  outline-offset: -1px;
}
.nt-leaf .nt-label {
  display: inline;
}
.nt-leaf .nt-link:hover {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  background: rgba(44, 255, 122, 0.06);
}
.nt-leaf.nt-active .nt-link {
  color: var(--bg);
  background: var(--phosphor);
  text-shadow: none;
  font-weight: 700;
  border-left-color: var(--magenta);
}

.nt-empty .nt-dir {
  color: var(--phosphor-fade);
}
.nt-empty .nt-fold {
  color: var(--phosphor-fade);
}

.nt-footer {
  border-top: var(--border-dash);
  padding: 0.5rem var(--space-2) var(--space-1);
  color: var(--phosphor-fade);
  font-size: 0.78em;
  letter-spacing: 0.08em;
}
.nt-footer .nt-cmd {
  margin: 0 0 var(--space-1);
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}
.nt-footer .nt-meta {
  margin: 0;
  font-size: 0.95em;
}

/* fixed toggle button (hamburger) — base style; visibility controlled below */
.nt-toggle--fixed {
  display: none;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: var(--space-3);
  width: 2.4em;
  height: 2.2em;
  background: var(--bg);
  border: var(--border-frame);
  color: var(--phosphor);
  font-family: var(--font-terminal);
  font-size: 1.1em;
  line-height: 1;
  cursor: pointer;
  z-index: calc(var(--z-drawer) + 1);
  text-shadow: var(--glow-emerald);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
  padding: 0;
}
.nt-toggle--fixed:hover,
.nt-toggle--fixed:focus-visible {
  background: var(--phosphor);
  color: var(--bg);
  text-shadow: none;
  outline: none;
}
.nt-toggle--fixed .nt-toggle-glyph {
  display: inline-block;
  transition: transform 200ms ease-out;
}
.nt-toggle--fixed[aria-expanded="true"] .nt-toggle-glyph {
  transform: rotate(90deg);
}

/* DESKTOP: collapsed = fully hidden sidebar, main expands, fixed toggle re-opens */
@media (min-width: 761px) {
  .nerdtree.nt-collapsed {
    display: none;
  }
  .zone-shell:has(.nerdtree.nt-collapsed) {
    grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 260px);
  }
  .zone-shell:has(.nerdtree.nt-collapsed) .nt-toggle--fixed {
    display: inline-flex;
  }
}
@media (min-width: 761px) and (max-width: 1180px) {
  .zone-shell:has(.nerdtree.nt-collapsed) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* MOBILE: drawer overlay */
@media (max-width: 760px) {
  .zone-shell {
    grid-template-columns: 1fr;
  }
  .zone-shell .container {
    max-width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }
  .nerdtree {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    height: 100dvh;
    z-index: var(--z-drawer);
    background: var(--bg);
    border-right: var(--border-frame);
    box-shadow: 6px 0 32px rgba(0, 0, 0, 0.7);
    transform: translateX(0);
    transition: transform 220ms ease-out;
    visibility: visible;
  }
  .nerdtree.nt-collapsed {
    transform: translateX(-100%);
    box-shadow: none;
    visibility: hidden;
    transition:
      transform 220ms ease-out,
      visibility 0s linear 220ms;
  }
  .nerdtree .nt-root {
    display: flex !important;
    flex-direction: column;
  }
  .nt-toggle--inline {
    display: none;
  }
  .nt-toggle--fixed {
    display: inline-flex;
  }
  /* backdrop when drawer open */
  .nt-backdrop {
    position: fixed;
    inset: 0;
    /* background: rgba(0, 0, 0, 0.6); */
    /* backdrop-filter: blur(2px); */
    z-index: var(--z-backdrop);
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease-out;
  }
  .nt-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* tighter sidebar spacing on mobile */
  .nerdtree {
    font-size: 1em;
  }
  .nt-root {
    padding: 3rem var(--space-2) var(--space-3);
  }
}

@media (max-width: 540px) {
  .nerdtree .nt-title {
    font-size: 1.05em;
  }
  .nerdtree .nt-header {
    padding-bottom: 0.35rem;
  }
  .nerdtree .nt-footer {
    padding: 0.35rem var(--space-2) var(--space-1);
    font-size: 0.7em;
  }
  .nt-root {
    padding: var(--space-2) 0.3rem var(--space-2) 0.5rem;
  }
}

/* responsive: collapse post-row grid columns at narrow widths.
   Drop the row-sep + tighten cols so titles win the space. */
@media (max-width: 760px) {
  .post-list {
    --row-cols: 1ch 9ch 1fr 5ch;
    --row-gap: 0.7ch;
    --row-pad-x: 0.5rem;
  }
  .post-row > a {
    padding: 0.55rem var(--row-pad-x);
  }
  .post-row .row-sep {
    display: none;
  }
}
@media (max-width: 480px) {
  .post-list {
    --row-cols: 1ch 1fr 4ch;
    --row-gap: 0.6ch;
  }
  .post-row .row-date {
    display: none;
  }
  .post-row .row-title {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }
}

/* ─── Sysinfo right rail ─── */
.sysinfo {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  border-left: var(--border-dash);
  background: linear-gradient(
    to left,
    rgba(44, 255, 122, 0.05) 0%,
    rgba(44, 255, 122, 0.015) 100%
  );
  font-family: var(--font-terminal);
  font-size: 0.95em;
  color: var(--phosphor-dim);
  padding: var(--space-3) 0.7rem var(--space-3) var(--space-4);
  scrollbar-width: none;
}
.sysinfo::-webkit-scrollbar {
  display: none;
}

.si-head {
  margin: 0 0 var(--space-3);
  padding-bottom: 0.5rem;
  border-bottom: var(--border-dash);
}
.si-buf {
  margin: 0;
  font-size: 0.72em;
  letter-spacing: 0.2em;
  color: var(--phosphor-fade);
  text-transform: uppercase;
}
.si-title {
  margin: var(--space-0) 0 0;
  font-family: var(--font-terminal);
  font-size: 1.25em;
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.08em;
}

.si-block {
  margin: 0 0 0.9rem;
  padding-bottom: var(--space-3);
  border-bottom: var(--border-dot);
}
.si-block:last-child {
  border-bottom: 0;
}
.si-h {
  margin: 0 0 0.3rem;
  font-size: 0.8em;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}
.si-h::before {
  content: "// ";
  color: var(--phosphor-fade);
}

.si-row {
  margin: var(--space-0) 0;
  display: grid;
  grid-template-columns: 7ch minmax(0, 1fr) 8ch;
  align-items: center;
  gap: 0.5ch;
  font-size: 0.95em;
  color: var(--phosphor-dim);
  font-variant-numeric: tabular-nums;
}
.si-k {
  color: var(--phosphor-fade);
  font-size: 0.88em;
  letter-spacing: 0.05em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-v {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-bars {
  letter-spacing: -0.04em;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  white-space: nowrap;
  overflow: hidden;
}

.si-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.si-list li {
  display: grid;
  grid-template-columns: 9ch minmax(1ch, 1fr) auto;
  align-items: baseline;
  gap: 0.4ch;
  font-size: 0.95em;
  margin: 0.15rem 0;
  font-variant-numeric: tabular-nums;
}
.si-list li .si-k {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-list li .si-v {
  text-align: right;
}
.si-dots {
  border-bottom: var(--border-dot);
  margin: 0 0.2em 0.25em;
  align-self: end;
  height: 0;
}

.si-feed {
  list-style: none;
  margin: 0;
  padding: 0;
}
.si-feed li {
  margin: 0.25rem 0;
  border-left: 2px solid var(--phosphor-fade);
  padding-left: 0.5em;
}
.si-link {
  display: block;
  color: var(--phosphor-dim);
  text-decoration: none;
  line-height: 1.25;
}
.si-link:hover {
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
}
.si-feed li:hover {
  border-left-color: var(--phosphor);
}
.si-date {
  display: block;
  font-size: 0.74em;
  color: var(--phosphor-fade);
  letter-spacing: 0.08em;
}
.si-title-row {
  display: block;
  font-size: 0.92em;
  word-break: break-word;
}

.si-tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem var(--space-2);
}
.si-tag {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  text-decoration: none;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  border: var(--border-magenta-dash);
  padding: 0.05em 0.35em;
}
.si-tag:hover {
  color: var(--magenta-bright);
  border-color: var(--magenta);
}
.si-tag-n {
  color: var(--phosphor-fade);
  margin-left: 0.25em;
  font-size: 0.85em;
}

.si-clock .si-row {
  font-size: 0.92em;
  grid-template-columns: 7ch minmax(0, 1fr);
}
.si-clock .si-row.si-pulse {
  grid-template-columns: 1.2ch 7ch minmax(0, 1fr);
  gap: 0.5ch;
}
.si-led {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  background: var(--magenta);
  box-shadow:
    0 0 4px var(--magenta),
    0 0 10px rgba(98, 255, 154, 0.55);
  vertical-align: middle;
  animation: siPulse 2.2s ease-in-out infinite;
}
@keyframes siPulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.25;
  }
}

.tag-name {
  color: var(--spring);
}

/* ─── PDA window (operator dossier) ───────────────────────────── */
.home-whoami.pda-window {
  margin: 1.6rem 0 2.2rem;
  padding: 0;
  border: 1px solid var(--phosphor);
  background: var(--bg);
  position: relative;
  box-shadow:
    0 0 0 1px var(--phosphor-fade) inset,
    0 0 18px rgba(44, 255, 122, 0.18),
    0 0 60px rgba(44, 255, 122, 0.06);
}
.home-whoami.pda-window::before {
  content: "";
  position: absolute;
  inset: 4px;
  pointer-events: none;
  border: var(--border-dash);
  z-index: 0;
}

/* PDA titlebar */
.pda-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.8rem;
  padding: 0.35rem 0.7rem;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 6px,
      rgba(44, 255, 122, 0.05) 6px 7px
    ),
    var(--bg-raise);
  border-bottom: var(--border-line);
  font-family: var(--font-terminal);
  font-size: 0.82em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--phosphor-dim);
  position: relative;
  z-index: 1;
}
.pda-leds {
  display: inline-flex;
  gap: 0.45rem;
  align-items: center;
}
.pda-led {
  width: 0.65em;
  height: 0.65em;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 4px currentColor;
}
.pda-led--rec {
  color: #ff5a6e;
  background: currentColor;
  animation: pdaBlink 1.6s steps(2, end) infinite;
}
.pda-led--rx {
  color: var(--moss);
  background: currentColor;
  animation: pdaBlink 2.8s steps(2, end) infinite 0.4s;
}
.pda-led--pwr {
  color: var(--phosphor);
  background: currentColor;
}
@keyframes pdaBlink {
  0%,
  60% {
    opacity: 1;
  }
  61%,
  100% {
    opacity: 0.18;
  }
}
.pda-title {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pda-title::before {
  content: "▒ ";
  color: var(--phosphor-fade);
}
.pda-meta {
  color: var(--phosphor-fade);
  font-size: 0.92em;
  white-space: nowrap;
}

/* PDA body — terminal output area */
.pda-body {
  padding: 0.9rem 1.1rem 0.9rem;
  position: relative;
  z-index: 1;
  background: radial-gradient(
    ellipse 100% 60% at 50% 0%,
    rgba(44, 255, 122, 0.05) 0%,
    transparent 70%
  );
}
.pda-body::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(44, 255, 122, 0.04) 0,
    rgba(44, 255, 122, 0.04) 1px,
    transparent 1px,
    transparent 3px
  );
  mix-blend-mode: screen;
  opacity: 0.55;
}
.pda-body > * {
  position: relative;
  z-index: 1;
}

.whoami-out {
  margin: 0.6rem 0 0.4rem;
  padding: 0 0 0.4rem;
  font-family: var(--font-terminal);
  font-size: clamp(0.78rem, 2.2vw, 1.1em);
  line-height: 1.4;
  color: var(--phosphor-bright);
  text-shadow: var(--glow-emerald);
  white-space: pre;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--phosphor-fade) transparent;
  min-height: 22em;
}
.whoami-out::-webkit-scrollbar {
  height: 4px;
}
.whoami-out::-webkit-scrollbar-thumb {
  background: var(--phosphor-fade);
}
.whoami-out .whoami-caret {
  margin-left: 1px;
}
.pda-prompt-line {
  margin: 0.4rem 0 0;
  font-family: var(--font-terminal);
  font-size: 1.05em;
  border-top: var(--border-dash);
  padding-top: 0.4rem;
}
.pda-prompt-line .prompt {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
}

@media (max-width: 540px) {
  .pda-bar {
    grid-template-columns: auto 1fr;
    gap: 0.5rem;
    font-size: 0.74em;
  }
  .pda-meta {
    display: none;
  }
  .pda-body {
    padding: 0.7rem 0.7rem;
  }
  .whoami-out {
    min-height: 24em;
  }
}

/* ─── extra terminal animations ─── */

/* CRT warmup — tube powers on once on load */
@keyframes crtWarmup {
  0% {
    opacity: 0;
    filter: brightness(0) blur(8px) saturate(0);
    transform: scaleY(0.02);
  }
  18% {
    opacity: 1;
    filter: brightness(0.35) blur(2px) saturate(0.6);
    transform: scaleY(1);
  }
  60% {
    opacity: 1;
    filter: brightness(1.4) blur(0.4px) saturate(1.4);
  }
  100% {
    opacity: 1;
    filter: brightness(1) blur(0) saturate(1);
    transform: scaleY(1);
  }
}
.crt-shell {
  animation:
    crtWarmup 850ms ease-out 1 backwards,
    shellFlicker 12s ease-in-out 850ms infinite;
  transform-origin: 50% 50%;
}

/* classification marquee — military teleprinter scroll */
.classification {
  overflow: hidden;
  text-align: left;
  padding: 0.25rem 0;
  position: relative;
}
.classification .cls-tape {
  display: inline-block;
  white-space: nowrap;
  animation: clsScroll 22s linear infinite;
  will-change: transform;
}
@keyframes clsScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* tagline typewriter — single-line reveal once on load */
.tagline {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 0.5ch solid var(--phosphor);
  width: 0;
  max-width: 100%;
  interpolate-size: allow-keywords;
  animation:
    taglineType 2.4s steps(60, end) 900ms forwards,
    taglineCaret 0.9s steps(2) 900ms 6;
}
@keyframes taglineType {
  to {
    width: max-content;
  }
}
@keyframes taglineCaret {
  50% {
    border-right-color: transparent;
  }
}

/* post-row stagger reveal — boot scan in */
.post-row {
  animation: postScan 380ms steps(18, end) backwards;
  animation-delay: calc(var(--i, 1) * 70ms + 1100ms);
}
.post-row.empty {
  animation: none;
}
@keyframes postScan {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

/* sidebar status LED — slow heartbeat */
.nt-led {
  display: inline-block;
  width: 0.55em;
  height: 0.55em;
  background: var(--phosphor);
  box-shadow:
    0 0 4px var(--phosphor),
    0 0 10px rgba(44, 255, 122, 0.6);
  vertical-align: middle;
  margin-right: 0.3em;
  animation: ntLed 1.6s ease-in-out infinite;
}
@keyframes ntLed {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  45% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  55% {
    opacity: 0.25;
  }
}

/* hero hazard — slow geiger pulse */
.hero-bloom pre {
  animation: hazardPulse 4.5s ease-in-out infinite;
}
@keyframes hazardPulse {
  0%,
  100% {
    text-shadow: var(--glow-emerald);
    opacity: 0.92;
  }
  50% {
    text-shadow:
      0 0 1px var(--phosphor),
      0 0 14px rgba(44, 255, 122, 0.85),
      0 0 28px rgba(44, 255, 122, 0.4);
    opacity: 1;
  }
}

/* prompt-line idle cursor — already blinks; add slow drift glow */
.prompt-line .cursor {
  animation:
    blink 1.05s steps(2) infinite,
    cursorBreathe 4s ease-in-out infinite;
}
@keyframes cursorBreathe {
  0%,
  100% {
    text-shadow: var(--glow-emerald);
  }
  50% {
    text-shadow:
      0 0 1px var(--phosphor),
      0 0 16px rgba(44, 255, 122, 0.85);
  }
}

/* ─── ZF :: footer transmission panel ──────────────────────────── */

.site-footer.zf {
  margin-top: 4rem;
  padding-top: 0;
  font-family: var(--font-terminal);
  color: var(--phosphor-dim);
  position: relative;
}

/* top scrolling teletype tape */
.zf-tape {
  overflow: hidden;
  border-top: var(--border-dash);
  border-bottom: var(--border-line);
  background: repeating-linear-gradient(
    90deg,
    transparent 0 14px,
    rgba(44, 255, 122, 0.04) 14px 16px
  );
  padding: var(--space-1) 0;
  font-size: 0.78em;
  letter-spacing: 0.18em;
  color: var(--phosphor-fade);
  text-transform: uppercase;
}
.zf-tape-run {
  display: inline-block;
  white-space: nowrap;
  animation: zfTapeRoll 38s linear infinite;
  will-change: transform;
}
@keyframes zfTapeRoll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* stencil frame containing the 3 panels */
.zf-stencil {
  position: relative;
  border: var(--border-line);
  background:
    linear-gradient(135deg, rgba(44, 255, 122, 0.025) 0%, transparent 60%),
    repeating-linear-gradient(
      45deg,
      transparent 0 11px,
      rgba(31, 184, 84, 0.035) 11px 12px
    );
  padding: var(--space-6) var(--space-5) var(--space-5);
  margin-top: -1px;
}
.zf-stencil-corner {
  position: absolute;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-size: 1.1em;
  width: 1ch;
  height: 1ch;
  line-height: 1;
  user-select: none;
}
.zf-c-tl {
  top: -0.55em;
  left: var(--space-2);
}
.zf-c-tr {
  top: -0.55em;
  right: var(--space-2);
}
.zf-c-bl {
  bottom: -0.55em;
  left: var(--space-2);
}
.zf-c-br {
  bottom: -0.55em;
  right: var(--space-2);
}

/* 3-col grid: object · dossier · rx */
.zf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.zf-cell {
  padding: var(--space-1) 1.2rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.zf-cell + .zf-cell {
  border-left: var(--border-dash);
}

/* section heading */
.zf-h {
  margin: 0 0 var(--space-3);
  font-size: 0.78em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-weight: 400;
}
.zf-h::before {
  content: "// ";
  color: var(--phosphor-fade);
}

/* OBJECT panel */
.zf-object {
  align-items: center;
  text-align: center;
}
.zf-trefoil {
  margin: 0 0 var(--space-2);
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  font-size: 0.7em;
  line-height: 1;
  animation: zfTrefoilPulse 3.4s ease-in-out infinite;
}
@keyframes zfTrefoilPulse {
  0%,
  100% {
    opacity: 0.85;
    filter: brightness(1);
  }
  50% {
    opacity: 1;
    filter: brightness(1.25);
  }
}
.zf-stamp {
  margin: 0 0 0.5rem;
  font-size: 1.05em;
  letter-spacing: 0.28em;
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  font-weight: 700;
  border: 1.5px solid var(--phosphor-dim);
  padding: 0.2rem 0.7rem 0.1rem 1rem;
  display: inline-block;
  max-width: 100%;
  background: rgba(4, 20, 10, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zf-coord {
  margin: var(--space-0) 0;
  font-size: 0.82em;
  letter-spacing: 0.06em;
  color: var(--phosphor-dim);
  font-variant-numeric: tabular-nums;
}
.zf-coord span[aria-hidden] {
  color: var(--phosphor);
  margin-right: 0.4ch;
}
.zf-mini {
  margin: var(--space-3) 0 0;
  font-size: 0.7em;
  letter-spacing: 0.3em;
  color: var(--phosphor-fade);
  text-transform: uppercase;
}

/* DOSSIER panel */
.zf-dl {
  display: grid;
  grid-template-columns: 9ch minmax(0, 1fr);
  gap: 0.25rem 6ch;
  margin: 0 0 0.9rem;
  font-size: 0.92em;
  align-items: baseline;
}
.zf-dl dt {
  color: var(--phosphor-fade);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.78em;
  white-space: nowrap;
}
.zf-dl dt::after {
  content: " ::";
  color: var(--magenta-deep);
}
.zf-dl dd {
  margin: 0;
  color: var(--phosphor-bright);
  text-shadow: 0 0 4px rgba(44, 255, 122, 0.35);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zf-links {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0 0;
  border-top: var(--border-dash);
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.zf-links a {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  padding: 0.05rem 0;
  max-width: 100%;
  min-width: 0;
  transition:
    transform 120ms ease-out,
    color 120ms ease-out;
}
.zf-link-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zf-link-glyph {
  flex: 0 0 auto;
}
.zf-links a:hover,
.zf-links a:focus-visible {
  color: var(--magenta-bright);
  transform: translateX(3px);
  outline: none;
}
.zf-link-glyph {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
}

/* RX panel */
.zf-row {
  display: grid;
  grid-template-columns: 3em minmax(0, 1fr) 2em;
  gap: 0.6ch;
  align-items: baseline;
  margin: 0.22rem 0;
  font-size: 0.88em;
  font-variant-numeric: tabular-nums;
}
.zf-k {
  color: var(--phosphor-fade);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.82em;
}
.zf-v {
  color: var(--phosphor-bright);
  text-shadow: 0 0 3px rgba(44, 255, 122, 0.4);
  text-align: right;
}
.zf-bars {
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  letter-spacing: 0.05em;
  overflow: hidden;
  white-space: nowrap;
}
.zf-row--clock .zf-v {
  font-family: var(--font-code);
  font-size: 0.95em;
}
.zf-led-row {
  display: grid;
  grid-template-columns: 1.2ch 6em minmax(0, 1fr);
  align-items: center;
  gap: 0.6ch;
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: var(--border-dash);
  font-size: 0.88em;
}
.zf-led-row .zf-v {
  text-align: right;
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  letter-spacing: 0.18em;
}
.zf-led {
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--phosphor);
  box-shadow:
    0 0 4px var(--phosphor),
    0 0 10px rgba(44, 255, 122, 0.7);
  animation: zfLedPulse 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes zfLedPulse {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.35;
    transform: scale(0.85);
  }
}

/* bottom bar — prompt + EOF stamp */
.zf-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.2rem;
  align-items: center;
  justify-content: space-between;
  padding: 0.8rem 1.2rem 0.4rem;
  margin-top: 0.8rem;
  border-top: var(--border-line);
}
.zf-prompt {
  margin: 0;
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
  min-width: 0;
}
.zf-prompt .prompt {
  color: var(--magenta);
  text-shadow: var(--glow-magenta);
}
.zf-eof {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.85em;
  flex: 0 0 auto;
}
.zf-eof-mark {
  display: inline-block;
  border: var(--border-magenta-strong);
  color: var(--magenta-bright);
  text-shadow: var(--glow-magenta);
  padding: 0.05rem 0.55rem;
  letter-spacing: 0.22em;
  font-weight: 700;
  transform: rotate(-2deg);
  background: rgba(4, 20, 10, 0.55);
}
.zf-eof-text {
  color: var(--phosphor-fade);
  letter-spacing: 0.04em;
}

/* responsive — collapse panels */
@media (max-width: 900px) {
  .zf-grid {
    grid-template-columns: 1fr 1fr;
  }
  .zf-rx {
    grid-column: 1 / -1;
    border-top: var(--border-dash);
    padding-top: 1rem;
    margin-top: 0.6rem;
  }
  .zf-grid > .zf-cell.zf-rx {
    border-left: none;
  }
}
@media (max-width: 600px) {
  .zf-grid {
    grid-template-columns: 1fr;
  }
  .zf-cell + .zf-cell {
    border-left: none;
    border-top: var(--border-dash);
    padding-top: 1rem;
    margin-top: 0.4rem;
  }
  .zf-bar {
    justify-content: flex-start;
  }
  .zf-stencil {
    padding: 1.2rem 0.8rem 0.9rem;
  }
}

/* ─── mobile layout fixes ─────────────────────────────────────── */

/* prevent any descendant from creating horizontal page scroll */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* banner-link wraps a wide pre — clip it so figlet overflow stays inside */
.banner-link {
  display: block;
  max-width: 100%;
  overflow: hidden;
}
.banner {
  max-width: 100%;
}

/* hide wide figlet banner sooner; show fallback h1 instead */
@media (max-width: 760px) {
  .banner {
    display: none;
  }
  .banner-fallback {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 9vw, 2.6rem);
    color: var(--phosphor-bright);
    text-shadow: var(--glow-emerald);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0;
    text-align: center;
    word-break: break-word;
  }
}

/* main container gets a sane gutter at mobile (zone uses --gutter from crt base) */
@media (max-width: 760px) {
  .zone-shell {
    grid-template-columns: minmax(0, 1fr);
  }
  .zone-shell > main.container {
    min-width: 0;
    width: 100%;
    padding: clamp(0.8rem, 3vw, 1.4rem) clamp(0.7rem, 3vw, 1rem) 2.4rem;
  }
}

/* hero VAULT art — auto-scales via container queries, just trim margins on mobile */
@media (max-width: 760px) {
  .home-hero {
    margin: 0;
  }
  .hero-bloom {
    margin: 0 0 0.6rem;
    padding: 0.2rem 0;
  }
}

/* classification tape — keep marquee inside viewport */
.classification {
  max-width: 100%;
  overflow: hidden;
}

/* nav rows wrap cleanly + add row gap */
@media (max-width: 760px) {
  .boot-nav ul {
    gap: 0.3rem 1rem;
    row-gap: 0.3rem;
  }
  .boot-nav {
    font-size: 1.05em;
  }
}

/* PDA window — tighten on mobile, keep dossier readable */
@media (max-width: 760px) {
  .home-whoami.pda-window {
    margin: 1rem 0 1.4rem;
  }
  .pda-body {
    padding: 0.7rem 0.7rem;
  }
  .whoami-out {
    font-size: 0.78rem;
    min-height: 0;
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: hidden;
  }
  .terminal-prompt {
    font-size: 0.92em;
    word-break: break-word;
    white-space: normal;
  }
}

/* listing header — hide sub-columns at narrow widths */
@media (max-width: 480px) {
  .listing-header {
    grid-template-columns: var(--row-cols);
    font-size: 0.7em;
    letter-spacing: 0.1em;
  }
  .listing-header > span:nth-child(n + 4) {
    display: none;
  }
}

/* code / pre blocks in posts: never horizontal-overflow the page */
.prose pre,
.prose .code-block pre,
.frontmatter-cat {
  max-width: 100%;
  overflow-x: auto;
}
.prose img {
  max-width: 100%;
  height: auto;
}

/* footer stencil — shrink padding on mobile so it fits */
@media (max-width: 540px) {
  .zf-stencil {
    padding: 1rem 0.7rem 0.8rem;
  }
  .zf-bar {
    padding: 0.6rem 0.4rem 0.4rem;
  }
  .zf-tape {
    font-size: 0.7em;
  }
}

/* prose tables scroll instead of breaking layout */
.prose table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}

/* ─── reduced motion (consolidated) ────────────────────────────
   Kill all animations, transforms-of-text, and decorative cursors. */
@media (prefers-reduced-motion: reduce) {
  body::before,
  .crt-shell,
  .crt-shell::after,
  .banner,
  .classification .cls-tape,
  .tagline,
  .post-row,
  .nt-led,
  .hero-bloom pre,
  .prompt-line .cursor,
  .pda-led--rec,
  .pda-led--rx,
  .error-screen .error-art,
  .zf-tape-run,
  .zf-led,
  .zf-trefoil {
    animation: none !important;
  }
  .tagline,
  .post-row {
    width: auto !important;
    border-right: 0 !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}

.row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}
.btn-prompt {
  font-family: var(--font-terminal);
  font-size: 17px;
  background: transparent;
  border: 1px solid var(--phosphor);
  color: var(--phosphor);
  text-shadow: var(--glow-emerald);
  padding: 6px 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}

.btn-prompt:hover {
  background: var(--phosphor);
  color: var(--bg);
  text-shadow: none;
}

.btn-prompt.alt {
  border-color: red;
  color: salmon;
  text-shadow: none;
}
.btn-prompt.disabled {
  border-color: var(--phosphor-fade);
  color: var(--phosphor-dim);
  text-shadow: none;
  pointer-events: none;
}
.btn-prompt.alt:hover {
  background: red;
  color: white;
  text-shadow: none;
}
.link {
  font-family: var(--font-code);
  font-size: 13px;
  color: #62ff9a;
  text-shadow: var(--glow-magenta);
  text-decoration: none;
  border-bottom: 1px dashed #62ff9a;
  padding-bottom: 1px;
}
.link:hover {
  background: #62ff9a;
  color: var(--bg);
  text-shadow: none;
  border-bottom-color: #d6ffe2;
}
.lab {
  font-family: var(--font-terminal);
  font-size: 11px;
  color: var(--phosphor-fade);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  width: 100%;
  margin-top: 4px;
}