/* ═══ reader.css — the v14 reading room ═══
   One skin for every article + the writings index: gold on black,
   Inter + JetBrains Mono, the same voice as the board. Applied over the
   existing next-era markup (class names unchanged, content untouched). */

:root {
  --bg: #0b0a07;
  --ink: rgba(236, 229, 212, 0.92);
  --dim: rgba(236, 229, 212, 0.6);
  --gold: #c9a45d;
  --line: rgba(201, 164, 93, 0.28);
  --mono: "JetBrains Mono", monospace;
  --sans: "Inter", sans-serif;
}

/* KNOB LAUNCH 1 · An article opened from the Art site is a transparent
   reading layer over the CURRENT main-page world. The parent page keeps its
   exact chosen artwork, colour grade and living fields; this document supplies
   only the reading plate and controls. */
html.rg-article-on-main .veil,
html.rg-article-on-main .bg-collage,
html.rg-article-on-main #bg {
  display: none !important;
}

html.rg-article-on-main body > main,
html.rg-article-on-main body > .foot {
  position: relative;
  z-index: 3;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  background:
    radial-gradient(70rem 40rem at 50% -10%, rgba(201, 164, 93, 0.06), transparent 60%),
    linear-gradient(rgba(201, 164, 93, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201, 164, 93, 0.045) 1px, transparent 1px),
    var(--bg);
  background-size: 100% 100%, 44px 44px, 44px 44px;
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

/* the old canvas backdrop is retired */
canvas#bg, .bg { display: none; }

/* ---- topbar: same voice as the board ---- */
.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.1rem clamp(1.2rem, 4vw, 3rem);
  background: rgba(11, 10, 7, 0.82);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(201, 164, 93, 0.14);
}
.wordmark, .brand {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
}
.topbar .nav { display: flex; gap: 1.6rem; }
.topbar .nav a {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s ease;
}
.topbar .nav a:hover { color: var(--gold); }

main { display: block; padding: 4.2rem 1.4rem 6rem; }
.reader, .index-wrap { max-width: 720px; margin: 0 auto; }

.back {
  display: inline-block;
  margin-bottom: 2.6rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  opacity: 0.85;
}
.back:hover { opacity: 1; }

/* ---- article ---- */
.article-head { margin-bottom: 3rem; }
.article-title {
  font-size: clamp(2.1rem, 5vw, 3.4rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #f2ead9;
}
.article-dek { margin-top: 1.1rem; font-size: 1.15rem; line-height: 1.6; color: var(--dim); }
.article-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.4rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: rgba(201, 164, 93, 0.8);
}
.dot { width: 4px; height: 4px; border-radius: 50%; background: rgba(201, 164, 93, 0.6); }

.prose p { margin: 0 0 1.35rem; font-size: 1.06rem; }
.prose .lead { font-size: 1.22rem; color: #f2ead9; }
.prose h2 {
  margin: 3rem 0 1.1rem;
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.prose h3 { margin: 2.2rem 0 0.9rem; font-size: 1.2rem; color: #f2ead9; }
.prose blockquote {
  margin: 2rem 0;
  padding: 1.1rem 1.4rem;
  border-left: 2px solid var(--gold);
  border-radius: 0 10px 10px 0;
  background: rgba(20, 18, 13, 0.6);
  color: var(--dim);
  font-style: italic;
}
.prose a { color: var(--gold); }
.prose em { color: #f2ead9; }
.prose hr { margin: 2.6rem auto; border: 0; height: 1px; width: 120px; background: var(--line); }
.prose img { max-width: 100%; border-radius: 12px; }
.prose figcaption { font-family: var(--mono); font-size: 0.72rem; color: var(--dim); margin-top: 0.5rem; }

.article-foot { margin-top: 4rem; padding-top: 1.6rem; border-top: 1px solid rgba(201, 164, 93, 0.16); }
.next-label { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--dim); }
.next-title { color: #f2ead9; }

/* ---- writings index ---- */
.index-head h1 {
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  color: #f2ead9;
}
.index-intro { margin-top: 0.9rem; max-width: 56ch; color: var(--dim); }

.post-list { margin-top: 3rem; display: grid; gap: 22px; }
.post {
  display: block;
  padding: 1.6rem 1.7rem 1.7rem;
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(155deg, rgba(255, 255, 255, 0.04), transparent 42%),
    rgba(12, 11, 7, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 214, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 30px -14px rgba(224, 180, 105, 0.55);
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.post:hover {
  transform: translateY(-4px);
  border-color: rgba(224, 190, 120, 0.8);
  box-shadow:
    inset 0 1px 0 rgba(255, 242, 214, 0.08),
    0 24px 50px rgba(0, 0, 0, 0.5),
    0 0 38px -10px rgba(224, 180, 105, 0.8);
}
.post-meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  color: rgba(201, 164, 93, 0.8);
}
.post-title { margin: 0.7rem 0 0.5rem; font-size: 1.45rem; font-weight: 800; line-height: 1.25; color: #f2ead9; }
.post-excerpt { font-size: 0.98rem; color: var(--dim); }
.post-go {
  display: inline-block;
  margin-top: 1rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}

@media (max-width: 640px) {
  .topbar .nav { gap: 1rem; }
  main { padding-top: 3rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE 20 · DESKTOP READING-ROOM COLOR GRADE

   Article and future research readers are separate documents, so they need
   their own continuation of the desktop grade. The prose and embedded media
   remain untouched; this corrects the room around them.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  :root {
    --bg: #070805;
    --ink: rgba(241, 233, 218, 0.94);
    --dim: rgba(210, 201, 183, 0.68);
    --gold: #d1aa61;
    --line: rgba(211, 176, 105, 0.24);
  }

  body {
    background-color: #050604;
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, 0.08), rgba(7, 5, 2, 0.18)),
      radial-gradient(ellipse at 50% 35%, rgba(217, 161, 79, 0.08), transparent 42%),
      radial-gradient(ellipse at 84% 52%, rgba(34, 60, 60, 0.07), transparent 35%),
      radial-gradient(ellipse at center, transparent 54%, rgba(1, 2, 2, 0.35) 100%),
      linear-gradient(rgba(211, 176, 104, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(211, 176, 104, 0.018) 1px, transparent 1px),
      url("assets/main-desktop-opt.jpg");
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      48px 48px,
      48px 48px,
      cover;
    background-position: center;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-attachment: fixed;
  }

  /* Retire the old independent music/trading/coding collage on readers. */
  body .bg-collage {
    display: none;
  }

  body .scene {
    filter: sepia(0.13) saturate(0.78) brightness(0.94) contrast(1.045);
  }
  body .noise {
    opacity: 0.12;
    mix-blend-mode: soft-light;
  }
  body .veil {
    opacity: 0.045;
    animation: none;
    filter: grayscale(0.2) sepia(0.15) saturate(0.62) brightness(0.94) contrast(1.14);
  }
  body .veil-streams {
    opacity: 0.72;
  }
  body .vcol {
    opacity: 0.12;
  }
  body .t-binary {
    color: rgba(169, 184, 151, 0.64);
    text-shadow: 0 0 7px rgba(116, 151, 132, 0.22);
  }
  body .t-mantra {
    color: rgba(207, 167, 89, 0.78);
    text-shadow: 0 0 8px rgba(194, 143, 57, 0.24);
  }
  body .t-trading {
    color: rgba(169, 180, 137, 0.66);
    text-shadow: 0 0 7px rgba(129, 151, 117, 0.2);
  }
  body .t-trading .dn-neg {
    color: rgba(188, 125, 108, 0.72);
  }
  body .t-code {
    color: rgba(153, 179, 170, 0.66);
    text-shadow: 0 0 7px rgba(113, 151, 145, 0.2);
  }
  body .t-music {
    color: rgba(183, 163, 153, 0.62);
    text-shadow: 0 0 7px rgba(151, 128, 119, 0.18);
  }

  body .topbar {
    background: rgba(5, 7, 5, 0.88);
    border-bottom-color: rgba(211, 176, 105, 0.18);
    -webkit-backdrop-filter: blur(10px) saturate(0.9);
    backdrop-filter: blur(10px) saturate(0.9);
  }
  body .wordmark,
  body .brand {
    color: rgba(238, 228, 208, 0.82);
  }
  body .art-close {
    color: rgba(221, 199, 153, 0.82);
    border-color: rgba(211, 176, 105, 0.32);
    background: rgba(7, 8, 5, 0.72);
  }

  body .read,
  body .reader,
  body .index-wrap {
    background:
      linear-gradient(145deg, rgba(47, 36, 19, 0.08), transparent 38%),
      linear-gradient(180deg, rgba(11, 11, 7, 0.91), rgba(6, 7, 5, 0.88));
    -webkit-backdrop-filter: blur(6px) saturate(0.92);
    backdrop-filter: blur(6px) saturate(0.92);
    border-color: rgba(211, 176, 105, 0.2);
    box-shadow:
      inset 0 1px 0 rgba(246, 228, 189, 0.045),
      0 30px 90px rgba(0, 0, 0, 0.54),
      0 0 150px -52px rgba(202, 153, 67, 0.38);
  }

  .article-title,
  .prose .lead,
  .prose h3,
  .prose em,
  .next-title,
  .index-head h1,
  .post-title {
    color: #f2eadc;
  }
  .article-title {
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.72);
  }
  .prose blockquote {
    background: rgba(18, 16, 10, 0.68);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE 21 · MOBILE READING-ROOM COLOR GRADE

   The shared reader covers Blog articles and future Research articles. Its
   room continues the fixed mobile world; prose and embedded media are not
   colour-altered.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root {
    --bg: #070805;
    --ink: rgba(241, 233, 218, 0.94);
    --dim: rgba(209, 200, 182, 0.68);
    --gold: #d1a85d;
    --line: rgba(211, 176, 105, 0.24);
  }

  body {
    background-color: #050604;
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, 0.055), rgba(7, 5, 2, 0.19)),
      radial-gradient(ellipse at 50% 30%, rgba(217, 161, 79, 0.075), transparent 43%),
      radial-gradient(ellipse at 88% 52%, rgba(34, 60, 60, 0.065), transparent 36%),
      radial-gradient(ellipse at center, transparent 55%, rgba(1, 2, 2, 0.32) 100%),
      linear-gradient(rgba(211, 176, 104, 0.016) 1px, transparent 1px),
      linear-gradient(90deg, rgba(211, 176, 104, 0.016) 1px, transparent 1px),
      url("assets/main-page-mobile-optimized.jpg");
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      42px 42px,
      42px 42px,
      104% auto;
    background-position: center, center, center, center, center, center, center top;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat;
    background-attachment: fixed;
  }

  body .bg-collage {
    display: none;
  }
  body .scene {
    filter: sepia(0.1) saturate(0.82) brightness(0.96) contrast(1.045);
  }
  body .noise {
    opacity: 0.11;
    mix-blend-mode: soft-light;
  }
  body .veil {
    opacity: 0.035;
    animation: none;
    filter: grayscale(0.2) sepia(0.15) saturate(0.62) brightness(0.96) contrast(1.12);
  }
  body .veil-streams {
    opacity: 0.62;
  }
  body .vcol {
    opacity: 0.1;
  }
  body .t-binary {
    color: rgba(169, 184, 151, 0.62);
    text-shadow: 0 0 7px rgba(116, 151, 132, 0.2);
  }
  body .t-mantra {
    color: rgba(207, 167, 89, 0.76);
    text-shadow: 0 0 8px rgba(194, 143, 57, 0.22);
  }
  body .t-trading {
    color: rgba(169, 180, 137, 0.64);
    text-shadow: 0 0 7px rgba(129, 151, 117, 0.18);
  }
  body .t-trading .dn-neg {
    color: rgba(188, 125, 108, 0.7);
  }
  body .t-code {
    color: rgba(153, 179, 170, 0.64);
    text-shadow: 0 0 7px rgba(113, 151, 145, 0.18);
  }
  body .t-music {
    color: rgba(183, 163, 153, 0.6);
    text-shadow: 0 0 7px rgba(151, 128, 119, 0.16);
  }

  body .topbar {
    background: rgba(5, 7, 5, 0.9);
    border-bottom-color: rgba(211, 176, 105, 0.18);
    -webkit-backdrop-filter: blur(8px) saturate(0.9);
    backdrop-filter: blur(8px) saturate(0.9);
  }
  body .wordmark,
  body .brand {
    color: rgba(238, 228, 208, 0.84);
  }
  body .art-close {
    color: rgba(222, 199, 151, 0.86);
    border-color: rgba(211, 176, 105, 0.36);
    background: rgba(7, 9, 6, 0.78);
  }

  body main {
    padding-top: 2.8rem;
  }
  body .read,
  body .reader,
  body .index-wrap {
    background:
      linear-gradient(145deg, rgba(47, 36, 19, 0.075), transparent 38%),
      linear-gradient(180deg, rgba(11, 11, 7, 0.92), rgba(6, 7, 5, 0.9));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-color: rgba(211, 176, 105, 0.22);
    box-shadow:
      inset 0 1px rgba(246, 228, 189, 0.045),
      0 22px 62px rgba(0, 0, 0, 0.48),
      0 0 100px -44px rgba(202, 153, 67, 0.34);
  }
  .article-title,
  .prose .lead,
  .prose h3,
  .prose em,
  .next-title,
  .index-head h1,
  .post-title {
    color: #f2eadc;
  }
  .article-title {
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.72);
  }
  .prose blockquote {
    background: rgba(18, 16, 10, 0.7);
  }
}

/* ═══ KNOB LAUNCH 1 · the COMPLETE living main-page atmosphere ═══
   Same engines as main.html: story weather, the desktop bubble field,
   scrolling/typing information columns and the binary projection. */
html:not(.professional-reader) body > .veil-streams {
  display: block !important;
  z-index: 1 !important;
  opacity: .68;
}
html:not(.professional-reader) body > .veil-code {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
  opacity: .115;
  -webkit-mask-image: radial-gradient(40% 62% at 70% 38%, #000 18%, transparent 76%);
  mask-image: radial-gradient(40% 62% at 70% 38%, #000 18%, transparent 76%);
  animation: readerVeilFlicker 7s steps(14) infinite;
}
html:not(.professional-reader) .veil-code-in {
  white-space: pre;
  text-align: center;
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: .45em;
  color: rgba(175, 188, 155, .72);
  text-shadow: 0 0 9px rgba(134, 162, 143, .28);
  animation: readerCodeScroll 110s linear infinite;
}
@keyframes readerCodeScroll { to { transform: translateY(-50%); } }
@keyframes readerVeilFlicker {
  0%, 100% { opacity: .115; }
  43% { opacity: .08; }
  49% { opacity: .15; }
  71% { opacity: .095; }
}
html:not(.professional-reader) body > .scene {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .55 !important;
  visibility: visible !important;
  pointer-events: none !important;
  filter: sepia(.1) saturate(.84) brightness(1) contrast(1.04);
}
html:not(.professional-reader) canvas.desktop-ambient-field {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  opacity: .34 !important;
  pointer-events: none !important;
  transform: translateZ(0);
  filter: sepia(.16) saturate(.8) brightness(1);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.72), #000 18%, #000 84%, rgba(0,0,0,.82));
  mask-image: linear-gradient(180deg, rgba(0,0,0,.72), #000 18%, #000 84%, rgba(0,0,0,.82));
}
html:not(.professional-reader) body > .noise {
  z-index: 2 !important;
  opacity: .12;
  mix-blend-mode: soft-light;
}
html:not(.professional-reader) body > main,
html:not(.professional-reader) body > .foot {
  position: relative;
  z-index: 3;
}

@media (max-width: 860px) {
  html:not(.professional-reader) canvas.desktop-ambient-field {
    display: none !important;
  }
  html:not(.professional-reader) body > .scene {
    opacity: 1 !important;
    filter: sepia(.08) saturate(.88) brightness(1.02) contrast(1.04);
  }
  html:not(.professional-reader) body > .veil-streams { opacity: .54; }
  html:not(.professional-reader) body > .veil-code { opacity: .09; }
}

@media (prefers-reduced-motion: reduce) {
  html:not(.professional-reader) body > .veil-code,
  html:not(.professional-reader) .veil-code-in { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE 29 · MOBILE READING-ROOM COLOR CORRECTION + FINAL GRADE

   The same corrected ladder as the board: ink pushed above the low-
   brightness legibility floor, one gold across the room, the plate under
   the prose made firmer, the edge vignette relaxed so nothing crushes.
   Prose content and embedded media untouched; desktop untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  :root {
    --bg: #080906;
    --ink: rgba(244, 237, 222, 0.96);
    --dim: rgba(219, 210, 191, 0.74);
    --gold: #d3aa60;
    --line: rgba(214, 180, 110, 0.28);
  }

  body {
    background-color: #060705;
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, 0.04), rgba(7, 5, 2, 0.13)),
      radial-gradient(ellipse at 50% 30%, rgba(222, 168, 84, 0.085), transparent 46%),
      radial-gradient(ellipse at 88% 52%, rgba(34, 60, 60, 0.06), transparent 36%),
      radial-gradient(ellipse at center, transparent 62%, rgba(1, 2, 2, 0.22) 100%),
      linear-gradient(rgba(211, 176, 104, 0.016) 1px, transparent 1px),
      linear-gradient(90deg, rgba(211, 176, 104, 0.016) 1px, transparent 1px),
      url("assets/main-page-mobile-optimized.jpg");
  }

  /* ambient field: same corrected exposure as the board */
  body .scene {
    filter: sepia(0.08) saturate(0.88) brightness(1.02) contrast(1.04);
  }
  body .t-binary {
    color: rgba(172, 186, 154, 0.66);
  }
  body .t-mantra {
    color: rgba(210, 171, 92, 0.8);
  }
  body .t-trading {
    color: rgba(172, 183, 140, 0.68);
  }
  body .t-code {
    color: rgba(156, 182, 173, 0.68);
  }
  body .t-music {
    color: rgba(187, 167, 157, 0.64);
  }

  /* chrome above the floor */
  body .wordmark,
  body .brand {
    color: rgba(241, 231, 211, 0.9);
  }
  body .art-close {
    color: rgba(227, 205, 157, 0.92);
    border-color: rgba(214, 180, 110, 0.42);
    background: rgba(8, 10, 7, 0.8);
  }

  /* the plate: firmer dark ground so the prose never fights the field */
  body .read,
  body .reader,
  body .index-wrap {
    background:
      linear-gradient(145deg, rgba(50, 39, 21, 0.08), transparent 38%),
      linear-gradient(180deg, rgba(13, 13, 8, 0.93), rgba(8, 9, 6, 0.92));
    border-color: rgba(214, 180, 110, 0.26);
    box-shadow:
      inset 0 1px rgba(246, 228, 189, 0.05),
      0 22px 62px rgba(0, 0, 0, 0.44),
      0 0 100px -44px rgba(208, 160, 72, 0.38);
  }
  .article-title,
  .prose .lead,
  .prose h3,
  .prose em,
  .next-title,
  .index-head h1,
  .post-title {
    color: #f6f0e2;
  }
  .prose blockquote {
    background: rgba(20, 18, 11, 0.72);
    border-left-color: rgba(214, 180, 110, 0.4);
  }
  .plate-silk,
  .plate-silk.foot {
    color: rgba(212, 175, 100, 0.5);
  }
  .dropcap::first-letter {
    color: #d3aa60;
    text-shadow: 0 0 24px rgba(211, 169, 95, 0.5);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE 30 · DESKTOP READING-ROOM COLOR CORRECTION + FINAL GRADE

   The same corrected ladder as the board: ink trued for the big screen,
   one gold across the room, the edge vignette relaxed out of crush, the
   plate under the prose made firmer, no lost light in the ambient field.
   Prose content and embedded media untouched; mobile untouched.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) {
  :root {
    --ink: rgba(243, 236, 221, 0.96);
    --dim: rgba(216, 207, 189, 0.74);
    --gold: #d3aa60;
    --line: rgba(214, 180, 110, 0.28);
  }

  body {
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, 0.06), rgba(7, 5, 2, 0.14)),
      radial-gradient(ellipse at 50% 35%, rgba(220, 165, 82, 0.085), transparent 44%),
      radial-gradient(ellipse at 84% 52%, rgba(34, 60, 60, 0.065), transparent 35%),
      radial-gradient(ellipse at center, transparent 60%, rgba(1, 2, 2, 0.26) 100%),
      linear-gradient(rgba(211, 176, 104, 0.018) 1px, transparent 1px),
      linear-gradient(90deg, rgba(211, 176, 104, 0.018) 1px, transparent 1px),
      url("assets/main-desktop-opt.jpg");
  }

  /* ambient field: same corrected exposure as the board */
  body .scene {
    filter: sepia(0.1) saturate(0.84) brightness(1) contrast(1.04);
  }
  body .veil {
    filter: grayscale(0.2) sepia(0.15) saturate(0.62) brightness(1) contrast(1.12);
  }
  body .t-binary  { color: rgba(172, 186, 154, 0.68); }
  body .t-mantra  { color: rgba(210, 170, 91, 0.82); }
  body .t-trading { color: rgba(172, 183, 140, 0.7); }
  body .t-trading .dn-neg { color: rgba(192, 128, 110, 0.76); }
  body .t-code    { color: rgba(156, 182, 173, 0.7); }
  body .t-music   { color: rgba(187, 167, 157, 0.66); }

  /* chrome above the floor */
  body .wordmark,
  body .brand {
    color: rgba(241, 231, 211, 0.88);
  }
  body .art-close {
    color: rgba(226, 204, 156, 0.9);
    border-color: rgba(214, 180, 110, 0.4);
    background: rgba(8, 9, 6, 0.76);
  }

  /* the plate: firmer ground, warmer backlight */
  body .read,
  body .reader,
  body .index-wrap {
    background:
      linear-gradient(145deg, rgba(50, 39, 21, 0.085), transparent 38%),
      linear-gradient(180deg, rgba(13, 13, 8, 0.92), rgba(8, 9, 6, 0.9));
    border-color: rgba(214, 180, 110, 0.26);
    box-shadow:
      inset 0 1px 0 rgba(246, 228, 189, 0.05),
      0 30px 90px rgba(0, 0, 0, 0.5),
      0 0 150px -52px rgba(208, 160, 72, 0.42);
  }

  .article-title,
  .prose .lead,
  .prose h3,
  .prose em,
  .next-title,
  .index-head h1,
  .post-title {
    color: #f6f0e2;
  }
  .prose blockquote {
    background: rgba(20, 18, 11, 0.7);
    border-left-color: rgba(214, 180, 110, 0.4);
  }
  .plate-silk,
  .plate-silk.foot {
    color: rgba(212, 175, 100, 0.5);
  }
  .dropcap::first-letter {
    color: #d3aa60;
    text-shadow: 0 0 24px rgba(211, 169, 95, 0.5);
  }
}

/* ═══ KNOB-5 · one home for the mixer (his call): on reading pages the
   sound trigger sits exactly where it lives on the board — lower-left,
   under the settings cluster, panel opening upward. Mobile untouched
   (the shell's own cluster owns sound there). ═══ */
@media (min-width: 861px) {
  /* KNOB-9 · audio-mixer.css loads AFTER this file and was re-winning
     'top' with equal specificity — body-prefixed selectors outrank it
     no matter the load order. Same values as the board. */
  body .rg-mixer {
    top: auto;
    right: auto;
    bottom: 22px;
    left: 24px;
  }
  body .rg-mixer .rg-mixer__panel {
    top: auto;
    right: auto;
    bottom: 58px;
    left: 0;
  }
}

/* ═══ KNOB LAUNCH 2 · the READING world gets its own artwork ═══
   The reader no longer borrows the main page's hero (his call: same picture
   both places created confusion, and the black plate looked dead). One
   dedicated image for every long-form reader — current blogs, the next
   blog, research when it arrives. Same grade recipe as before.
   Professional readers are explicitly excluded. */
html:not(.professional-reader) body {
  background-color: #050604 !important;
  background-image:
    linear-gradient(180deg, rgba(5, 8, 7, .06), rgba(7, 5, 2, .14)),
    radial-gradient(ellipse at 50% 35%, rgba(220, 165, 82, .085), transparent 44%),
    radial-gradient(ellipse at 84% 52%, rgba(34, 60, 60, .065), transparent 35%),
    radial-gradient(ellipse at center, transparent 60%, rgba(1, 2, 2, .26) 100%),
    linear-gradient(rgba(211, 176, 104, .018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(211, 176, 104, .018) 1px, transparent 1px),
    url("assets/parallex/article-reader-opt.jpg") !important;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    48px 48px,
    48px 48px,
    cover !important;
  background-position: center !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important;
  background-attachment: fixed !important;
}

/* The main Art page carries this final low-light grade above its artwork.
   Keep the live code, bubbles and audio reaction underneath it, then place
   the reading plate above it — exactly the same depth order as Home. */
html:not(.professional-reader) body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(228, 204, 132, .05), transparent 55%),
    linear-gradient(180deg, rgba(5, 4, 3, .45), rgba(5, 4, 3, .12) 28%, rgba(5, 4, 3, .18) 70%, rgba(5, 4, 3, .55)),
    radial-gradient(ellipse at center, transparent 52%, rgba(5, 4, 3, .5) 100%);
}

/* Retire the old reader-only collage and scrolling data wall. */
html:not(.professional-reader) body > .bg-collage,
html:not(.professional-reader) body > #bg {
  display: none !important;
}

@media (max-width: 860px) {
  html:not(.professional-reader) body {
    background-image:
      linear-gradient(180deg, rgba(5, 8, 7, .055), rgba(7, 5, 2, .19)),
      radial-gradient(ellipse at 50% 30%, rgba(217, 161, 79, .075), transparent 43%),
      radial-gradient(ellipse at 88% 52%, rgba(34, 60, 60, .065), transparent 36%),
      radial-gradient(ellipse at center, transparent 55%, rgba(1, 2, 2, .32) 100%),
      linear-gradient(rgba(211, 176, 104, .016) 1px, transparent 1px),
      linear-gradient(90deg, rgba(211, 176, 104, .016) 1px, transparent 1px),
      url("assets/parallex/article-reader-opt.jpg") !important;
    background-size:
      100% 100%,
      100% 100%,
      100% 100%,
      100% 100%,
      42px 42px,
      42px 42px,
      cover !important; /* one landscape master — cover, not the old
                           dedicated-portrait 104% fit */
    background-position: center !important;
  }
}

/* Embedded Art article (the essay overlay): KNOB LAUNCH 2 — the reader
   paints its OWN artwork here exactly like standalone (the rules above
   apply to this document too). Only duplicate motion layers stay hidden. */
html.rg-article-on-main:not(.professional-reader) body > .scene,
html.rg-article-on-main:not(.professional-reader) body > .veil,
html.rg-article-on-main:not(.professional-reader) body > .veil-code,
html.rg-article-on-main:not(.professional-reader) body > .noise,
html.rg-article-on-main:not(.professional-reader) body > .cursor-glow,
html.rg-article-on-main:not(.professional-reader) body > .veil-streams,
html.rg-article-on-main:not(.professional-reader) body > .bg-collage,
html.rg-article-on-main:not(.professional-reader) body > #bg,
html.rg-article-on-main:not(.professional-reader) canvas.desktop-ambient-field {
  display: none !important;
}

/* Long articles reveal in calm ~500-word sections. */
.reader-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .65rem;
  margin: 2.8rem 0 .7rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(211, 170, 96, .18);
}
.reader-more__button {
  min-width: 180px;
  padding: .8rem 1.4rem .72rem;
  border: 1px solid rgba(211, 170, 96, .46);
  border-radius: 999px;
  background: rgba(9, 9, 6, .82);
  color: #d3aa60;
  font: 600 .74rem/1.2 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: inset 0 1px rgba(246, 228, 189, .05), 0 12px 32px rgba(0, 0, 0, .28);
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}
.reader-more__button:hover {
  color: #ffe6a8;
  border-color: rgba(211, 170, 96, .78);
  transform: translateY(-1px);
}
.reader-more__button:focus-visible {
  outline: 2px solid rgba(255, 230, 168, .7);
  outline-offset: 4px;
}
.reader-chunk-enter {
  opacity: 0;
  transform: translateY(9px);
  transition: opacity .45s ease, transform .45s ease;
}
.reader-chunk-enter.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .reader-chunk-enter { transition: none; }
}