/* The Ghost in the Export (Lab Notes, 31 Oct 2026) - the Halloween skin.

   Loaded after blog.css, on this one post only. Everything is scoped to body.ghost so the site's
   top bar, ticker and footer stay standard. Fonts are served from this site (the CSP allows no
   third-party fonts): Creepster and Special Elite (Apache 2.0 / OFL), IBM Plex Mono (OFL). */

@font-face { font-family: "Creepster"; src: url("/blog/fonts/creepster.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("/blog/fonts/special-elite.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/blog/fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/blog/fonts/ibm-plex-mono-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

body.ghost {
  --g-bg: #07060a; --g-ink: #d8d2c2; --g-mute: #8a8276; --g-blood: #b7141a; --g-blood2: #e23b2e;
  --g-slime: #8ad11f; --g-panel: #0e0c12; --g-line: #241c22;
  background-color: var(--g-bg);
  background-image:
    radial-gradient(1200px 500px at 50% -10%, #19070a 0%, transparent 60%),
    radial-gradient(800px 400px at 110% 20%, #0c1405 0%, transparent 55%);
}
.ghost .ticker { background: linear-gradient(90deg, rgba(183, 20, 26, 0.22), rgba(138, 209, 31, 0.1)); color: #f2b3ab; }

/* scanlines + vignette, behind the top bar (z-index 40 and 39 sit under .top's) */
.ghost main::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0) 0 2px, rgba(0, 0, 0, 0.22) 3px 4px);
  mix-blend-mode: overlay; opacity: 0.5;
}
.ghost main::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 1;
  background: radial-gradient(130% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.75) 100%);
}

.ghost .g-post { position: relative; z-index: 3; color: var(--g-ink); font-family: "Special Elite", "Courier New", monospace; line-height: 1.65; }
.ghost .g-wrap { max-width: 760px; margin: 0 auto; padding: 0 var(--gut) 40px; }
.ghost .g-post a { color: var(--g-blood2); text-decoration: none; border-bottom: 1px dotted #5c1f22; }
.ghost .g-post a:hover { color: var(--g-slime); border-bottom-color: var(--g-slime); }
.ghost hr { border: 0; border-top: 1px solid var(--g-line); margin: 34px 0; }

.ghost .g-hero { position: relative; text-align: center; padding: 70px var(--gut) 40px; overflow: hidden; }
.ghost .g-bats { position: absolute; inset: 0; pointer-events: none; opacity: 0.5; font-size: 20px; }
.ghost .g-hero h1 {
  max-width: none; text-transform: none; margin: 0.1em 0; font: 400 clamp(2.6rem, 10vw, 5.2rem)/0.95 "Creepster", cursive; color: var(--g-blood2);
  text-shadow: 0 0 6px #7e0e13, 0 0 24px #3a0608, 2px 2px 0 #000;
}
.ghost .g-sub { max-width: 52ch; margin: 14px auto 0; color: var(--g-mute); font-size: 0.95rem; }
.ghost .g-drip { display: block; margin-top: 18px; font: 400 0.72rem/1.4 "IBM Plex Mono", var(--mono); letter-spacing: 0.3em; text-transform: uppercase; color: var(--g-slime); opacity: 0.8; }
.ghost .g-by { margin: 10px 0 0; font: 400 0.78rem/1.4 "IBM Plex Mono", var(--mono); color: var(--g-mute); }

.ghost .g-lede { margin: 28px 0; font-size: 1.12rem; color: #e7e1d2; }
.ghost .g-lede strong { color: var(--g-blood2); }
.ghost .g-post h2 {
  max-width: none; text-transform: none; margin: 48px 0 6px; font: 400 clamp(1.7rem, 5.5vw, 2.5rem)/1.1 "Creepster", cursive; letter-spacing: 0.02em;
  color: var(--g-slime); text-shadow: 0 0 10px #1c3a05;
}
.ghost .g-no { margin-right: 0.2em; font-size: 0.8em; color: var(--g-blood); }
.ghost .g-wrap p { margin: 14px 0; }
.ghost .g-card {
  margin: 20px 0; padding: 14px 18px; border: 1px solid var(--g-line); border-left: 3px solid var(--g-blood); border-radius: 4px;
  background: linear-gradient(180deg, var(--g-panel), #0a0810); box-shadow: 0 0 0 1px #000 inset, 0 10px 30px -20px #000;
}
.ghost .g-card.slime { border-left-color: var(--g-slime); }
.ghost .g-post ul { padding-left: 1.2em; }
.ghost .g-post li { margin: 8px 0; }

.ghost .g-do h2 { color: var(--g-blood2); text-shadow: 0 0 10px #3a0608; }
.ghost .g-do li::marker { content: "\2620  "; color: var(--g-blood); }

.ghost .g-sources { font: 400 0.78rem/1.6 "IBM Plex Mono", var(--mono); }
.ghost .g-sources h2 { font-size: 1.5rem; }
.ghost .g-sources li { color: var(--g-mute); word-break: break-word; }
.ghost .g-sig { margin: 60px 0 10px; text-align: center; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--g-mute); }

/* Lab Notes index card for this post */
.g-card-art { display: grid; place-items: center; min-height: 220px; background: radial-gradient(80% 70% at 50% 35%, #2a0a0d, #07060a 70%); }
.g-card-art span { font: 400 clamp(2rem, 5vw, 3rem)/0.95 "Creepster", cursive; color: #e23b2e; text-align: center; text-shadow: 0 0 6px #7e0e13, 0 0 24px #3a0608, 2px 2px 0 #000; }

@media (prefers-reduced-motion: no-preference) {
  .ghost .g-hero h1 { animation: g-flick 4.5s infinite steps(1); }
}
@keyframes g-flick { 0%, 97%, 100% { opacity: 1; } 92% { opacity: 0.35; } 94% { opacity: 0.9; } 96% { opacity: 0.5; } }

.ghost .g-art { margin: 36px 0 8px; }
.ghost .g-art img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid rgba(0,229,255,.25); box-shadow: 0 0 40px rgba(0,229,255,.12); }
.ghost .g-art figcaption { margin-top: 8px; font-size: .8rem; color: var(--g-mute); text-align: center; letter-spacing: .04em; }