/* ── Body ─────────────────────────────────────────────────────────────────── */

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.75;
}

/* ── Headings ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--color-text-heading);
  line-height: 1.2;
  font-weight: 400;
}

h1 { font-size: var(--text-3xl); letter-spacing: 0.05em; }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl);  }
h4 { font-size: var(--text-lg);  }
h5 { font-size: var(--text-md);  }
h6 { font-size: var(--text-base);}

/* ── Links ────────────────────────────────────────────────────────────────── */

a {
  color: var(--color-amber);
  text-decoration: none;
  transition: color var(--transition);
}

a:hover {
  color: var(--color-amber-bright);
}

/* ── Text elements ────────────────────────────────────────────────────────── */

strong, b {
  font-weight: 700;
}

em, i {
  font-style: italic;
}

small {
  font-size: var(--text-sm);
}

blockquote {
  border-left: 3px solid var(--color-border-accent);
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
  font-style: italic;
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-6) 0;
}

/* ── Selection ────────────────────────────────────────────────────────────── */

::selection {
  background: var(--color-amber);
  color: var(--color-text-inverse);
}

/* ── Focus ────────────────────────────────────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-amber);
  outline-offset: 2px;
}

/* ── Accessibility utilities ──────────────────────────────────────────────── */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--color-amber);
  color: var(--color-text-inverse);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.skip-link:focus {
  top: var(--space-2);
}

/* ── Mono readout utility ─────────────────────────────────────────────────── */

.mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Animation keyframes ──────────────────────────────────────────────────── */

@keyframes flicker {
  0%, 100% { opacity: 1;   }
  92%       { opacity: 1;   }
  93%       { opacity: 0.6; }
  94%       { opacity: 1;   }
  96%       { opacity: 0.8; }
  97%       { opacity: 1;   }
}

@keyframes pulse-live {
  0%   { box-shadow: 0 0 0 0   rgba(76, 175, 80, 0.4); }
  70%  { box-shadow: 0 0 0 6px rgba(76, 175, 80, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(76, 175, 80, 0);   }
}

@keyframes ticker-scroll {
  from { transform: translateX(0);    }
  to   { transform: translateX(-50%); }
}

/* ── Animation utility classes ────────────────────────────────────────────── */

.flicker {
  animation: flicker 8s infinite;
}

/* ── Scanline overlay ─────────────────────────────────────────────────────── */

.scanlines {
  position: relative;
}

.scanlines::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.15) 2px,
    rgba(0, 0, 0, 0.15) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ── Noise texture overlay ────────────────────────────────────────────────── */

.noise-overlay {
  position: relative;
}

.noise-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Inline SVG fractal noise — no external file required.
     %23 is url-encoded # so the filter reference doesn't break CSS url(). */
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 1;
}

/* ── Stamp motif ──────────────────────────────────────────────────────────── */

.stamp {
  display: inline-block;
  border: 2px solid currentColor;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2px 6px;
  transform: rotate(-2deg);
  opacity: 0.9;
}

.stamp--classified { color: var(--color-amber);       border-color: var(--color-amber);       }
.stamp--eyes-only  { color: var(--color-red-bright);  border-color: var(--color-red-bright);  }
.stamp--free       { color: var(--color-green-bright); border-color: var(--color-green-bright); }

/* ── Redaction bar ────────────────────────────────────────────────────────── */

.redacted {
  background: var(--color-red);
  color: transparent;
  user-select: none;
  display: inline-block;
  padding: 0 var(--space-1);
}


/* ── Scroll reveal ────────────────────────────────────────────────────────── */
/*
 * effects.js adds .js to <html> and .is-visible to .section elements as they
 * enter the viewport. Without JS the rule never applies, so sections remain
 * visible. The transition is disabled for prefers-reduced-motion.
 */

.js .section {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 600ms ease, transform 600ms ease;
}

.js .section.is-visible {
  opacity: 1;
  transform: none;
}


/* ── Reduced-motion overrides ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .flicker {
    animation: none;
  }

  .js .section {
    transition: none;
    opacity: 1;
    transform: none;
  }
}