:root {
  --forge-bg: #071113;
  --forge-panel: #0c1b1e;
  --forge-panel-raised: #102529;
  --forge-text: #e7f2ee;
  --forge-muted: #9cafab;
  --forge-cyan: #55e6d2;
  --forge-lime: #c8ff55;
  --forge-line: #29484e;
}

html {
  background: var(--forge-bg);
  scroll-behavior: smooth;
}

body {
  background-color: var(--forge-bg) !important;
  color: var(--forge-text) !important;
}

nav {
  background-color: rgba(7, 17, 19, 0.96) !important;
  background-image:
    linear-gradient(rgba(85, 230, 210, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 230, 210, 0.035) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  border-color: var(--forge-line) !important;
}

/* Keep the Systems Signal grid in article headers while giving long-form copy
   an uninterrupted reading surface. Article cards are intentionally excluded. */
body > article,
.articles-signal-index {
  background-image:
    linear-gradient(rgba(85, 230, 210, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85, 230, 210, 0.035) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
}

body > article .article-content,
body > article .prose {
  background: var(--forge-bg);
  box-shadow: 0 0 0 100vmax var(--forge-bg);
  clip-path: inset(0 -100vmax);
}

nav svg.w-8.h-8 {
  background: url('/favicon.svg') center / contain no-repeat;
  color: transparent !important;
}

nav svg.w-8.h-8 path {
  display: none;
}

nav > div > div::after {
  color: var(--forge-cyan);
  content: "FIELD NOTES / QUALITY SYSTEMS";
  display: none;
  font: 600 0.62rem "JetBrains Mono", monospace;
  letter-spacing: 0.15em;
}

.gradient-text {
  background: none !important;
  color: var(--forge-lime) !important;
  -webkit-text-fill-color: var(--forge-lime) !important;
}

.text-forge-primary,
.text-purple-600,
.article-content a,
.prose a {
  color: var(--forge-cyan) !important;
}

.bg-forge-primary {
  background: var(--forge-lime) !important;
  color: var(--forge-bg) !important;
}

.border-forge-primary {
  border-color: var(--forge-lime) !important;
}

.bg-forge-dark {
  background-color: var(--forge-bg) !important;
}

.bg-forge-accent,
.bg-forge-secondary {
  background-color: rgba(12, 27, 30, 0.9) !important;
}

.border-gray-800,
.border-gray-700 {
  border-color: var(--forge-line) !important;
}

.text-gray-300 {
  color: #c7d5d1 !important;
}

.text-gray-400,
.text-gray-500 {
  color: var(--forge-muted) !important;
}

article > div > .flex:first-child,
article header .flex:first-child {
  font-family: "JetBrains Mono", monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.articles-signal-index {
  background-color: transparent !important;
  min-height: 52vh;
  display: flex;
  align-items: end;
}

.articles-signal-index > div {
  margin-inline: auto;
  text-align: left !important;
  width: 100%;
}

.articles-signal-index h1 {
  font-size: clamp(3.5rem, 8vw, 7rem) !important;
  letter-spacing: -0.065em;
  line-height: 0.9;
  max-width: 900px;
}

.articles-signal-index p {
  margin-left: 0 !important;
}

article h1 {
  font-size: clamp(2.75rem, 7vw, 5.75rem) !important;
  letter-spacing: -0.055em;
  line-height: 0.96 !important;
  text-wrap: balance;
}

article h2 {
  letter-spacing: -0.025em;
  text-wrap: balance;
}

article p,
article li {
  text-wrap: pretty;
}

article pre {
  background: #061012 !important;
  border: 1px solid var(--forge-line);
  border-radius: 2px !important;
  overflow-x: auto;
}

article blockquote,
article .border-l-4 {
  background: rgba(12, 27, 30, 0.92) !important;
  border-color: var(--forge-lime) !important;
  border-radius: 0 !important;
}

.rounded-lg,
.rounded-xl,
.rounded-2xl {
  border-radius: 2px !important;
}

article .shadow-lg,
article .shadow-xl,
article .shadow-2xl {
  box-shadow: none !important;
}

footer {
  background: #050c0e !important;
  border-color: var(--forge-line) !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--forge-lime) !important;
  outline-offset: 3px;
}

::selection {
  background: var(--forge-lime);
  color: var(--forge-bg);
}

/* Article body emphasis and callouts.
   The per-article <style> blocks still carry the pre-Signal purple (#7c3aed) for
   strong, code, blockquote and .callout. These rules bring them onto the Signal
   palette. Semantic callout variants keep their meaning, retuned for the dark
   background. Declared after .callout so the variants win the cascade. */

.article-content strong,
.prose strong {
  color: var(--forge-lime) !important;
}

.article-content code,
.prose code {
  background-color: rgba(85, 230, 210, 0.1) !important;
  border-radius: 2px !important;
  color: var(--forge-cyan) !important;
}

.article-content blockquote {
  border-left-color: var(--forge-lime) !important;
  color: var(--forge-muted) !important;
}

.callout {
  background-color: rgba(12, 27, 30, 0.92) !important;
  border-left-color: var(--forge-lime) !important;
  border-radius: 0 !important;
}

.callout-warning {
  border-left-color: #f0b429 !important;
}

.callout-danger {
  border-left-color: #ff6b6b !important;
}

.callout-success {
  border-left-color: #7bd88f !important;
}

.callout-warning strong {
  color: #f0b429 !important;
}

.callout-danger strong {
  color: #ff6b6b !important;
}

.callout-success strong {
  color: #7bd88f !important;
}

.code-block {
  background-color: #061012 !important;
  border: 1px solid var(--forge-line);
  border-radius: 2px !important;
}

.code-block code {
  background: none !important;
  color: #c7d5d1 !important;
}

@media (min-width: 768px) {
  nav > div > div::after {
    display: block;
  }
}

@media (max-width: 767px) {
  article h1 {
    font-size: clamp(2.5rem, 13vw, 4rem) !important;
  }

  article,
  article > div {
    min-width: 0;
  }

  pre,
  table {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}