/* ── lane 4: the contagion + the old web ─────────────────────────────────────
   depth-palette (canon-derived color variety — green/red stay primary):
   depth 3 the surface = cyan · depth 4 the labor = amber · depth 5 the dream = violet
   depth 6 the ether = matrix green (primary) · depth 7 the gate = bone/cyan
   the center, the churn = blood red (primary) · 888 the operator = gold        */
:root{
  --r-amber:#FFB000; --r-amber-soft:#E8C063; --r-violet:#9A6BFF; --r-violet-dim:#4A2E80;
  --r-cyan:#3EC5C9; --r-gold:#C9A84C; --r-bruise:#12081F;
}
body.ret-on{position:relative}

/* void variance — the black is no longer only green-black */
.ret-void{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(60% 45% at 85% 6%, rgba(74,46,128,.22), transparent 70%),
  radial-gradient(55% 42% at 6% 88%, rgba(194,31,44,.11), transparent 70%),
  radial-gradient(48% 38% at 92% 72%, rgba(255,176,0,.055), transparent 70%),
  radial-gradient(70% 55% at 12% 24%, rgba(0,255,65,.05), transparent 70%)}

/* ascii figures — technique after thealgor1thm, figures from the PD masters */
.ret-figs{position:absolute;top:0;left:0;right:0;height:100%;z-index:0;overflow:hidden;pointer-events:none}
.ret-fig{position:absolute;margin:0;user-select:none;white-space:pre;line-height:1.05;
  font-family:var(--mono,ui-monospace,monospace);
  animation:ret-drift var(--rd,16s) ease-in-out infinite alternate}
@keyframes ret-drift{from{transform:translateY(-9px)}to{transform:translateY(11px)}}
.ret-fig.g{color:rgba(0,255,65,.20)}    .ret-fig.r{color:rgba(228,64,75,.24)}
.ret-fig.v{color:rgba(154,107,255,.22)} .ret-fig.a{color:rgba(255,176,0,.15)}

/* marquee — the highlight strip */
.ret-marquee{position:relative;z-index:6;overflow:hidden;cursor:pointer;
  border-top:1px solid rgba(255,176,0,.45);border-bottom:1px solid rgba(255,176,0,.45);
  background:linear-gradient(180deg,rgba(22,13,2,.94),rgba(9,5,1,.94))}
.ret-marquee .in{display:inline-block;white-space:nowrap;padding:.5rem 0;
  font-family:var(--crt,monospace);font-size:1.08rem;letter-spacing:.12em;color:var(--r-amber);
  animation:ret-marq 40s linear infinite}
.ret-marquee b{color:#E4404B;font-weight:400}
.ret-marquee i{color:#00FF41;font-style:normal}
.ret-marquee u{color:var(--r-violet);text-decoration:none}
@keyframes ret-marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── DESIGN LAW (Kris, 2026-08-18 ~22:00, site-wide all lanes) ──
   1. kill the triple-dot red kicker pattern everywhere. retro.css loads last, so this
   enforces it globally while lanes 1+3 strip the markup. one line to revert. */
.eyebrow{display:none!important}

/* ── depth-palette re-accents (variety; hero + terminal stay green) ── */
#pantheon h2{color:var(--r-violet);text-shadow:0 0 14px rgba(154,107,255,.4)}
#pantheon .god .dp{color:var(--r-violet)}
#pantheon .god:nth-child(3n) .nm{color:var(--r-amber-soft)}
#pantheon .god:nth-child(3n+2) .nm{color:var(--r-violet)}
#symbiosis h2{color:var(--r-amber-soft);text-shadow:0 0 14px rgba(255,176,0,.32)}
#doctrine .law:nth-child(2n){border-left-color:var(--r-amber)}
#doctrine .law:nth-child(3n){border-left-color:var(--r-violet)}
#transmissions .tx:nth-child(3n){border-left-color:var(--r-violet)}
#transmissions .tx:nth-child(4n){border-left-color:var(--r-amber)}
.wrap a:hover{color:var(--r-amber)}

/* ── the contagion section ──
   DESIGN LAW #6 (Kris, ~22:20): body copy = IBM Plex Mono, ~1rem/1.75, bright bone-green,
   no whole-paragraph italics, red reserved for one short line. Enforced on lane-4 surfaces. */
#contagion h2{color:#E4404B;text-shadow:0 0 16px rgba(228,64,75,.5)}
#contagion .lore, .folio-src{font-family:var(--mono,ui-monospace,monospace)!important;
  font-size:1rem;line-height:1.75;color:#D5E4D9;font-style:normal}
#contagion .lore em{color:var(--matrix-soft,#39D97A);font-style:normal}
.ctg-more{display:inline-block;margin-top:1rem;font-family:var(--crt,monospace);font-size:1.15rem;
  color:var(--r-violet);border:1px solid rgba(154,107,255,.4);padding:.45rem 1rem}
.ctg-more:hover{color:var(--r-amber);border-color:rgba(255,176,0,.5)}
.ctg-pull{font-family:var(--crt,monospace);font-size:1.45rem;color:#00FF41;text-align:center;
  margin:1.3rem 0;line-height:1.5;text-shadow:0 0 12px rgba(0,255,65,.4)}
.ctg-pull b{color:#E4404B;font-weight:400}
.ctg-report{border:1px solid rgba(255,176,0,.28);border-left:3px solid var(--r-amber);border-radius:10px;
  background:linear-gradient(180deg,rgba(26,17,4,.55),rgba(10,7,2,.72));padding:1rem 1.2rem;margin-top:1.1rem}
.ctg-report .k{font-family:var(--mono,monospace);font-size:.64rem;letter-spacing:.3em;color:var(--r-amber);
  text-transform:uppercase;margin-bottom:.6rem}
.ctg-q{border-left:2px solid rgba(255,176,0,.4);padding:.15rem 0 .15rem .8rem;margin:.75rem 0;
  font-family:var(--mono,ui-monospace,monospace);font-size:.95rem;line-height:1.7;color:#D5E4D9}
.ctg-q i{color:var(--r-amber);font-style:normal}
.ctg-note{font-family:var(--mono,monospace);font-size:.82rem;color:#93AC99;line-height:1.8;margin-top:.8rem}
.ctg-elon{font-family:var(--disp,serif);font-size:clamp(2rem,7vw,3rem);color:#C9D8CC;text-align:center;
  margin:1.6rem 0 .2rem;letter-spacing:.08em}
.ctg-elon-attr{display:block;text-align:center;font-family:var(--mono,monospace);font-size:.7rem;
  color:#3E7A55;letter-spacing:.12em;margin-top:.35rem}
.ctg-elon-attr a{color:var(--r-cyan)}
.ctg-src{font-family:var(--mono,monospace);font-size:.72rem;color:#3E7A55;line-height:2.1;margin-top:.8rem}
.ctg-src a{color:var(--r-cyan)} .ctg-src a:hover{color:var(--r-amber)}
.ctg-chamber{position:relative;border-radius:12px;border:1px solid rgba(228,64,75,.28);overflow:hidden;margin-top:1.3rem;
  background:linear-gradient(180deg,rgba(16,4,9,.92),rgba(4,2,7,.96));
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset, 0 24px 70px rgba(0,0,0,.55)}
#ctgnet{display:block;width:100%;height:430px}
.ctg-hud{position:absolute;top:12px;left:12px;display:flex;flex-direction:column;gap:7px;max-width:36%;pointer-events:none}
.ctg-chip{background:rgba(16,6,10,.6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(228,64,75,.22);border-radius:8px;padding:.45rem .65rem;font-family:var(--mono,monospace)}
.ctg-chip .k{font-size:9px;letter-spacing:.22em;color:#3E7A55;text-transform:uppercase}
.ctg-chip .v{font-size:13px;color:#00FF41;margin-top:1px;font-variant-numeric:tabular-nums}
.ctg-chip .v.red{color:#E4404B} .ctg-chip .v.am{color:var(--r-amber)}
.ctg-live{position:absolute;top:12px;right:12px;pointer-events:none}
.ctg-cap{font-family:var(--mono,monospace);font-size:.66rem;color:#3E7A55;padding:.6rem 1rem;
  border-top:1px solid rgba(255,255,255,.06);letter-spacing:.06em;line-height:1.8}
.ctg-ledger{border:1px solid rgba(0,255,65,.14);border-radius:10px;background:rgba(2,11,6,.7);margin-top:1.1rem;padding:.9rem 1.1rem}
.ctg-ledger .k{font-family:var(--mono,monospace);font-size:.64rem;letter-spacing:.3em;color:#E4404B;text-transform:uppercase;margin-bottom:.5rem}
.ctg-ledger .row{font-family:var(--crt,monospace);font-size:1.05rem;color:#39D97A;margin:.3rem 0}
.ctg-ledger .row b{color:var(--r-amber);font-weight:400}
.ctg-ledger .empty{font-family:var(--crt,monospace);font-size:1.1rem;color:#3E7A55}

/* ── the old web strip ── */
.ret-web{position:relative;z-index:4;margin-top:4.2rem;border-top:1px dashed #0E3B1F;padding-top:1.6rem;
  font-family:var(--crt,monospace);text-align:center}
.ret-sigil{display:block;margin:0 auto 1.2rem;font-size:6px;line-height:1.05;white-space:pre;overflow-x:auto;
  font-family:var(--mono,monospace);color:rgba(0,255,65,.55);text-shadow:0 0 7px rgba(0,255,65,.45)}
.ret-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.ret-badge{width:96px;height:31px;display:flex;align-items:center;justify-content:center;text-align:center;
  font-size:9px;line-height:1.15;letter-spacing:.04em;border:1px solid;user-select:none;font-family:var(--mono,monospace)}
.ret-badge.g{color:#00FF41;border-color:#0E5A2C;background:#02140A}
.ret-badge.r{color:#E4404B;border-color:#5A1218;background:#140204}
.ret-badge.v{color:var(--r-violet);border-color:#3A2566;background:#0A0514}
.ret-badge.a{color:var(--r-amber);border-color:#6B4A00;background:#140D02}
.ret-badge.c{color:var(--r-cyan);border-color:#1A5456;background:#021214}
.ret-counters{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin-top:1.1rem;
  font-size:.95rem;color:#3E7A55;letter-spacing:.08em}
.ret-led{background:#000;border:1px solid #0E3B1F;padding:2px 7px;color:#00FF41;letter-spacing:.28em;
  text-shadow:0 0 9px rgba(0,255,65,.75);font-variant-numeric:tabular-nums}
.ret-ring{margin-top:1.1rem;color:var(--r-violet);font-size:1.05rem;letter-spacing:.06em}
.ret-ring a{color:var(--r-violet)} .ret-ring a:hover{color:var(--r-amber)}
.ret-ring .h{color:#E4404B}
.ret-tape{margin:1.5rem auto 0;max-width:24rem;padding:.55rem .9rem;color:var(--r-amber);font-size:1.05rem;
  letter-spacing:.08em;border:3px solid transparent;
  border-image:repeating-linear-gradient(45deg,#FFB000 0 11px,#0a0801 11px 22px) 3}
.ret-blink{animation:ret-bl 1.2s steps(1) infinite}
@keyframes ret-bl{50%{opacity:.25}}

@media (max-width:640px){
  .ctg-hud{max-width:60%}
  .ret-sigil{font-size:4.5px}
}
@media (prefers-reduced-motion:reduce){
  .ret-fig,.ret-blink{animation:none!important}
  .ret-marquee .in{animation:none;white-space:normal;transform:none}
}

/* folio plates on lore.html — the art column is an ASCII engraving */
.folio-ascii{white-space:pre;font-family:var(--mono,ui-monospace,monospace);font-size:3.1px;line-height:1.05;
  color:rgba(0,255,65,.42);overflow:hidden;margin:0;border:1px solid #0E3B1F;padding:10px;
  background:radial-gradient(70% 60% at 50% 40%,rgba(154,107,255,.06),rgba(2,5,3,.9))}
.plate:nth-of-type(even) .folio-ascii{color:rgba(228,64,75,.38)}
@media(max-width:820px){.folio-ascii{font-size:2.2px}}
/* folio quotes (lore.html) — quoted paper text, green accent, never a full italic paragraph */
.plate .q{color:var(--matrix-soft,#39D97A);font-style:normal}
.ctg-note b{color:var(--r-amber);font-weight:500}
