/* ═══════════════════════════════════════════════════════════════════════
   KNOB LAUNCH 7 · MASTER COLOR GRADE

   One photographic response across the selector, Artistic world/readers
   and Professional portfolio. This file changes exposure and colour only:
   no geometry, timing, animation, interaction or content is touched.

   Palette
   shadow      neutral olive-black
   midtone     smoked bronze
   highlight   warm archival paper
   accent      restrained instrument gold
   separation  mineral teal, used only in the deepest cool values
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --grade-black: #050604;
  --grade-deep: #080906;
  --grade-surface: #10110d;
  --grade-surface-raised: #15150f;
  --grade-paper: #f1eadc;
  --grade-paper-soft: #d8cfbd;
  --grade-muted: #aaa18f;
  --grade-gold: #d4aa58;
  --grade-gold-bright: #edcd82;
  --grade-gold-deep: #8e6c2e;
  --grade-teal: #789b92;
  color-scheme: dark;
}

body.grade-selector,
body.grade-art,
body.grade-professional {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.grade-selector ::selection,
body.grade-art ::selection,
body.grade-professional ::selection {
  color: #080906;
  background: rgba(230, 194, 116, .82);
}

/* ── Identity selector ─────────────────────────────────────────────── */
body.grade-selector {
  --bg: var(--grade-black);
  --ink: var(--grade-paper);
  --muted: #b2a78f;
  --muted-2: #746b58;
  --gold: var(--grade-gold);
  --gold-bright: var(--grade-gold-bright);
  --gold-deep: #9e7937;
  --line: rgba(219, 181, 101, .075);
  --line-2: rgba(219, 181, 101, .25);
  --glow: rgba(217, 173, 83, .34);
  background:
    radial-gradient(68% 68% at 50% 42%, rgba(123, 92, 37, .11), transparent 58%),
    radial-gradient(50% 46% at 13% 8%, rgba(91, 117, 105, .035), transparent 72%),
    linear-gradient(155deg, #0a0a06 0%, #050604 53%, #030402 100%);
}

body.grade-selector .aurora {
  opacity: 1.22;
  filter: blur(48px) saturate(92%);
}

body.grade-selector .aurora-cool {
  filter: blur(52px) saturate(68%);
}

body.grade-selector .grid-overlay {
  opacity: .68;
}

body.grade-selector #field {
  opacity: .92;
}

body.grade-selector .word {
  color: rgba(219, 179, 94, .075);
}

body.grade-selector .dial {
  /* KL14 · GLASS INSTRUMENT (his call): the dial melts into the night —
     the world shows through it, one gold hairline holds its shape. */
  background:
    radial-gradient(circle at 48% 31%, rgba(85, 67, 31, .34), rgba(17, 16, 10, .44) 57%, rgba(5, 6, 4, .5) 100%);
  border-color: rgba(228, 196, 116, .42);
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, .28),
    0 0 30px rgba(215, 168, 74, .12),
    0 18px 38px -18px rgba(0, 0, 0, .7),
    inset 0 1px 0 rgba(250, 226, 167, .28),
    inset 0 -12px 22px rgba(0, 0, 0, .35);
}

body.grade-selector .dial-disc {
  background: radial-gradient(circle at 48% 31%, rgba(60, 50, 27, .5), rgba(13, 13, 8, .55) 67%);
  border-color: rgba(232, 198, 119, .26);
}

/* the glass never rides: a live backdrop blur on a travelling dial is the
   Knob 28 framerate killer — strip it the moment the knob moves */
body.grade-selector.dial-away .dial,
body.grade-selector .dial-anchor .dial {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
body.grade-selector.boot-done .dial,
body.grade-selector.gate-dead .dial {
  -webkit-backdrop-filter: blur(7px) saturate(1.15);
  backdrop-filter: blur(7px) saturate(1.15);
}

body.grade-selector .mode {
  color: #b8ad96;
  border-color: rgba(221, 181, 96, .3);
  background:
    linear-gradient(115deg, rgba(255, 240, 200, .035), transparent 42%),
    rgba(12, 12, 8, .72);
  box-shadow: inset 0 1px rgba(255, 237, 192, .025);
}

body.grade-selector .mode:hover,
body.grade-selector .mode:focus-visible {
  color: #f1d58f;
  border-color: rgba(226, 185, 96, .72);
  background: rgba(43, 35, 18, .52);
}

body.grade-selector .mode-pro:hover,
body.grade-selector .mode-pro:focus-visible {
  color: #dce8e4;
  border-color: rgba(125, 162, 153, .7);
  box-shadow: 0 0 25px rgba(86, 129, 120, .14);
}

body.grade-selector .legend,
body.grade-selector .select-mode,
body.grade-selector .axis,
body.grade-selector .coord {
  color: #786f5c;
}

/* ── Artistic main world ───────────────────────────────────────────── */
body.grade-art {
  --bg: var(--grade-black);
  --ink: rgba(239, 232, 217, .94);
  --dim: rgba(217, 207, 188, .68);
  --gold: var(--grade-gold);
  --line: rgba(214, 175, 96, .25);
  background-color: var(--grade-black);
}

body.grade-art.home {
  --panel: rgba(15, 15, 10, .91);
  --panel-deep: rgba(6, 8, 6, .95);
  --text: var(--grade-paper);
  --muted: #b1a895;
  --faint: rgba(222, 211, 191, .54);
  --gold: var(--grade-gold);
  --cyan: #8eaaa3;
  --green: #9daa87;
  --pink: #c5908d;
  --purple: #9c93aa;
  background: var(--grade-black);
}

/* Grade the fixed photograph with overlays, not a live CSS filter. This
   preserves the compositor stability fixed in Knob Launch 4. */
body.grade-art.home .main2-fixed-world::after {
  background:
    linear-gradient(180deg, rgba(4, 7, 5, .18), transparent 21%, transparent 66%, rgba(3, 4, 2, .38)),
    radial-gradient(ellipse at 51% 39%, rgba(214, 158, 67, .055), transparent 43%),
    radial-gradient(ellipse at 84% 48%, rgba(62, 94, 85, .045), transparent 36%),
    radial-gradient(ellipse at center, transparent 49%, rgba(0, 0, 0, .32) 100%),
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(207, 178, 105, .018) 3px 4px) !important;
  mix-blend-mode: normal !important;
}

body.grade-art.home .topbar::before {
  background: linear-gradient(180deg, rgba(4, 6, 4, .97), rgba(5, 7, 5, .7) 55%, transparent) !important;
}

body.grade-art.home .wordmark,
body.grade-art.home .topbar {
  color: rgba(239, 228, 207, .86);
}

body.grade-art.home #hero-title {
  color: var(--grade-paper);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .84), 0 0 28px rgba(219, 175, 91, .1);
}

body.grade-art.home .home .diagram.main1-after-hero .board .node.chip,
body.grade-art.home .board .node.chip {
  background:
    linear-gradient(145deg, rgba(255, 239, 199, .12), transparent 31%),
    radial-gradient(ellipse at 50% 38%, rgba(210, 157, 64, .105), transparent 70%),
    rgba(9, 10, 7, .9) !important;
  border-color: rgba(222, 182, 98, .48) !important;
  box-shadow:
    inset 0 1px rgba(255, 237, 190, .13),
    inset 0 -10px 20px rgba(0, 0, 0, .28),
    0 12px 25px -15px rgba(0, 0, 0, .96),
    0 0 24px rgba(202, 145, 48, .12) !important;
}

body.grade-art.home .home .diagram.main1-after-hero .cpu,
body.grade-art.home .cpu {
  border-color: rgba(223, 180, 92, .58) !important;
  box-shadow:
    inset 0 0 0 1px rgba(238, 199, 119, .14),
    inset 0 0 22px rgba(127, 82, 24, .11),
    0 0 0 3px rgba(113, 78, 28, .07),
    0 0 22px rgba(198, 135, 39, .2) !important;
}

body.grade-art.home .station {
  background:
    radial-gradient(ellipse at 48% 24%, rgba(154, 105, 38, .075), transparent 48%),
    linear-gradient(180deg, rgba(6, 8, 6, .9), rgba(4, 5, 3, .96)) !important;
}

body.grade-art.home .station-in {
  color: var(--grade-paper);
}

body.grade-art.home .journal-card,
body.grade-art.home .float-box,
body.grade-art.home .experiment-card {
  background-color: rgba(12, 12, 8, .94) !important;
  border-color: rgba(208, 166, 82, .34) !important;
}

body.grade-art.home .station img {
  filter: saturate(.72) contrast(1.08) brightness(.84) sepia(.07) !important;
}

body.grade-art.home .station a:hover img,
body.grade-art.home .station button:hover img {
  filter: saturate(.88) contrast(1.06) brightness(.94) sepia(.035) !important;
}

body.grade-art.home .mshell-drawer {
  background:
    radial-gradient(circle at 50% 40%, rgba(133, 91, 32, .09), transparent 53%),
    rgba(4, 6, 4, .985) !important;
}

/* ── Artistic readers and utility pages ───────────────────────────── */
body.grade-art:not(.home) {
  background:
    radial-gradient(75rem 46rem at 50% -15%, rgba(161, 112, 42, .085), transparent 62%),
    radial-gradient(62rem 42rem at 88% 42%, rgba(65, 95, 87, .035), transparent 68%),
    linear-gradient(180deg, #080906, #050604 68%, #030402);
  color: var(--grade-paper-soft);
}

body.grade-art:not(.home) .topbar {
  background: rgba(5, 7, 5, .9);
  border-bottom-color: rgba(213, 174, 92, .18);
}

body.grade-art:not(.home) .bgc {
  filter: grayscale(.3) sepia(.24) saturate(.72) brightness(.86) contrast(1.11);
}

body.grade-art:not(.home) .noise {
  opacity: .13;
}

body.grade-art:not(.home) .read,
body.grade-art:not(.home) .reader,
body.grade-art:not(.home) .index-wrap {
  background:
    linear-gradient(145deg, rgba(255, 239, 202, .022), transparent 34%),
    linear-gradient(180deg, rgba(11, 12, 8, .94), rgba(7, 8, 5, .92));
  border-color: rgba(215, 174, 88, .25);
  box-shadow:
    inset 0 1px 0 rgba(255, 239, 201, .055),
    0 32px 96px rgba(0, 0, 0, .58),
    0 0 130px -54px rgba(199, 140, 43, .3);
}

body.grade-art:not(.home) .article-title,
body.grade-art:not(.home) .index-head h1 {
  color: var(--grade-paper);
  background: none;
  -webkit-text-fill-color: var(--grade-paper);
  text-shadow: 0 2px 2px rgba(0, 0, 0, .82), 0 0 24px rgba(213, 167, 79, .08);
}

body.grade-art:not(.home) .article-dek,
body.grade-art:not(.home) .prose p,
body.grade-art:not(.home) .prose li {
  color: #d6cebf;
}

body.grade-art:not(.home) .prose .lead,
body.grade-art:not(.home) .prose em,
body.grade-art:not(.home) .prose strong {
  color: #eee6d8;
}

body.grade-art:not(.home) .prose h2,
body.grade-art:not(.home) .prose h3,
body.grade-art:not(.home) .reader-more__button,
body.grade-art:not(.home) .article-meta {
  color: var(--grade-gold);
}

/* ── Professional portfolio and secondary pages ───────────────────── */
body.grade-professional {
  --bg: #080907;
  --surface: #11120f;
  --text: #f0ece3;
  --muted: #aaa499;
  --faint: #777268;
  --accent: var(--grade-gold);
  --line: rgba(234, 225, 207, .13);
  --line-soft: rgba(228, 210, 177, .07);
  background:
    radial-gradient(90% 58% at 48% -12%, rgba(173, 126, 49, .07), transparent 69%),
    radial-gradient(54% 52% at 96% 36%, rgba(72, 100, 93, .025), transparent 70%),
    #080907;
  color: var(--text);
}

body.grade-professional .professional-entry-curtain {
  background: #080907;
}

body.grade-professional .bg {
  background:
    radial-gradient(48% 40% at 11% 6%, rgba(207, 159, 72, .105), transparent 64%),
    radial-gradient(43% 38% at 91% 13%, rgba(109, 136, 128, .045), transparent 62%),
    radial-gradient(45% 42% at 84% 92%, rgba(119, 108, 139, .035), transparent 64%),
    linear-gradient(160deg, #111009 0%, #080907 43%, #070806 70%, #0c0a07 100%);
}

body.grade-professional .bg-photo {
  opacity: .68;
}

body.grade-professional #bubbles {
  opacity: .88;
}

body.grade-professional .grain {
  opacity: .24;
}

body.grade-professional nav {
  background: rgba(6, 7, 6, .9);
  border-bottom-color: rgba(218, 181, 107, .1);
}

body.grade-professional .hero h1,
body.grade-professional header.page h1 {
  color: var(--grade-paper);
  background: linear-gradient(102deg, #f4efe6 0%, #eee5d5 54%, #d5b66f 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.grade-professional .hero .lede,
body.grade-professional header.page .lede,
body.grade-professional .block p,
body.grade-professional .about-text p {
  color: #b8b1a5;
}

body.grade-professional .map-panel {
  background:
    linear-gradient(145deg, rgba(255, 241, 208, .018), transparent 34%),
    rgba(14, 15, 12, .76);
  border-color: rgba(223, 202, 162, .09);
}

body.grade-professional .mnode,
body.grade-professional .mcore,
body.grade-professional .chip {
  border-color: rgba(230, 215, 187, .09);
  box-shadow: inset 0 1px rgba(255, 244, 218, .018);
}

body.grade-professional .work-chapter::before {
  opacity: .42;
  filter: grayscale(.32) sepia(.08) saturate(.58) contrast(1.1) brightness(.62);
}

body.grade-professional .work-chapter .sec-head h2,
body.grade-professional .work-chapter .group-label,
body.grade-professional .block .b-label {
  color: var(--grade-gold-bright);
  background: linear-gradient(100deg, #e9c97f 0%, #c79740 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

body.grade-professional .work-chapter .sec-desc {
  color: #e1dbcf;
}

body.grade-professional .work-chapter .group-label::before,
body.grade-professional .block .b-label::before {
  background: linear-gradient(180deg, #e4c06e, #aa772b);
  box-shadow: 0 0 13px rgba(202, 151, 54, .2);
}

body.grade-professional .work .thumb,
body.grade-professional .venture-card .thumb,
body.grade-professional .entry .thumb,
body.grade-professional .about-photo {
  border-color: rgba(225, 207, 171, .1);
  background: #10110e;
}

body.grade-professional .work .thumb img,
body.grade-professional .venture-card .thumb img,
body.grade-professional .entry .thumb img,
body.grade-professional .about-photo {
  filter: saturate(.72) contrast(1.075) brightness(.84) sepia(.055);
}

body.grade-professional .work:hover .thumb img,
body.grade-professional .venture-card:hover .thumb img,
body.grade-professional .entry:hover .thumb img {
  filter: saturate(.9) contrast(1.06) brightness(.95) sepia(.025);
}

body.grade-professional .cta,
body.grade-professional .cta-line {
  color: #0b0b07;
  background: linear-gradient(105deg, #dcb866, #c4923b);
  box-shadow: inset 0 1px rgba(255, 239, 191, .22), 0 12px 28px -18px rgba(218, 166, 67, .72);
}

body.grade-professional .professional-work-back {
  color: #ddbd73;
  border-color: rgba(216, 174, 88, .34);
  background: rgba(8, 9, 7, .78);
}

/* ── Pocket response ──────────────────────────────────────────────── */
@media (max-width: 860px) {
  body.grade-selector {
    background:
      radial-gradient(82% 50% at 50% 35%, rgba(145, 103, 39, .12), transparent 69%),
      linear-gradient(165deg, #090a06 0%, #050604 56%, #030402 100%);
  }

  body.grade-selector .aurora { opacity: 1.08; }
  body.grade-selector .grid-overlay { opacity: .52; }
  body.grade-selector .mode {
    background: rgba(13, 13, 9, .84);
    border-color: rgba(222, 182, 97, .38);
  }

  body.grade-art.home .main2-fixed-world::after {
    background:
      linear-gradient(180deg, rgba(4, 7, 6, .11), transparent 19%, transparent 70%, rgba(3, 4, 2, .34)),
      radial-gradient(ellipse at 50% 40%, rgba(219, 160, 70, .045), transparent 44%),
      radial-gradient(ellipse at center, transparent 52%, rgba(0, 0, 0, .24) 100%),
      repeating-linear-gradient(180deg, transparent 0 3px, rgba(205, 180, 112, .018) 3px 4px) !important;
  }

  body.grade-art:not(.home) .reader,
  body.grade-art:not(.home) .index-wrap {
    background:
      linear-gradient(145deg, rgba(255, 237, 195, .02), transparent 30%),
      rgba(8, 9, 6, .94);
    border-color: rgba(219, 177, 90, .29);
    box-shadow: inset 0 1px rgba(255, 238, 197, .05), 0 24px 62px rgba(0, 0, 0, .5);
  }

  body.grade-art:not(.home) .article-dek,
  body.grade-art:not(.home) .prose p,
  body.grade-art:not(.home) .prose li {
    color: #d8d0c1;
  }

  body.grade-professional {
    background:
      radial-gradient(78% 42% at 64% 3%, rgba(158, 113, 43, .075), transparent 70%),
      #070806;
  }

  body.grade-professional .bg-photo { opacity: .46; }
  body.grade-professional .grain { opacity: .18; }
  body.grade-professional .work-chapter::before { opacity: .32; }
  body.grade-professional nav { background: rgba(6, 7, 6, .965); }
}

@media (prefers-contrast: more) {
  body.grade-art,
  body.grade-professional {
    --muted: #c8c0b2;
    --faint: #9d9587;
  }
}