/* NABOR V5 · BACKGROUND REGISTRY · 20 curated dark recipes. Applied via body[data-bg="01".."20"].
   Each overrides the ambient layer only (body::before in base.css) — never the chapter materials.
   No paper/beige/kraft/blue-SaaS/cheap-gradient. Default (no attribute) = base.css's own ambient. */
body[data-bg]::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}
body[data-bg="01"]::before{background:#0A0A0C} /* pure black */
body[data-bg="02"]::before{background:radial-gradient(60% 50% at 50% 0%,rgba(255,255,255,.05),transparent 60%),#0A0A0C} /* black radial spotlight, top */
body[data-bg="03"]::before{background:linear-gradient(180deg,#141419,#0A0A0C 60%)} /* graphite gradient */
body[data-bg="04"]::before{background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 45%),#0A0A0C} /* directional cinematic light */
body[data-bg="05"]::before{background:radial-gradient(50% 40% at 15% 0%,rgba(227,179,74,.09),transparent 60%),#0A0A0C} /* subtle gold ambient bloom */
body[data-bg="06"]::before{background:radial-gradient(60% 60% at 50% 50%,#141419,#050506 85%)} /* vignette black */
body[data-bg="07"]::before{background:radial-gradient(45% 35% at 18% 12%,rgba(227,179,74,.07),transparent 65%),radial-gradient(46% 40% at 84% 24%,rgba(120,90,30,.08),transparent 65%),radial-gradient(60% 50% at 50% 110%,rgba(0,0,0,.5),transparent 60%),#0A0A0C} /* deep mesh */
body[data-bg="08"]::before{background:repeating-linear-gradient(115deg,rgba(255,255,255,.02) 0 2px,transparent 2px 6px),#111015} /* black metal (brushed) */
body[data-bg="09"]::before{background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),#0E1014;background-size:56px 56px} /* graphite instrument grid */
body[data-bg="10"]::before{background:#0A0A0C;opacity:.9} /* black grain (grain handled by --grain var, this just deepens base) */
body[data-bg="11"]::before{background:radial-gradient(38% 55% at 78% 20%,rgba(227,179,74,.14),transparent 65%),radial-gradient(50% 60% at 20% 90%,rgba(0,0,0,.5),transparent 60%),#0A0A0C} /* sculpted light */
body[data-bg="12"]::before{background:radial-gradient(26% 40% at 50% 8%,rgba(255,255,255,.10),transparent 70%),#08080a} /* stage spotlight */
body[data-bg="13"]::before{background:linear-gradient(180deg,#0A0A0C,#17151d 65%,#0A0A0C)} /* black-to-charcoal */
body[data-bg="14"]::before{background:radial-gradient(60% 50% at 50% 0%,rgba(227,179,74,.05),transparent 55%),#0f0d0a} /* warm black */
body[data-bg="15"]::before{background:radial-gradient(60% 50% at 50% 0%,rgba(120,150,200,.05),transparent 55%),#0a0b0d} /* cold graphite */
body[data-bg="16"]::before{background:#050506} /* ultra black */
body[data-bg="17"]::before{background:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px),#0A0A0C;background-size:96px 96px} /* subtle grid */
body[data-bg="18"]::before{background:radial-gradient(45% 45% at 100% 0%,rgba(227,179,74,.10),transparent 60%),#0A0A0C} /* radial corner light */
body[data-bg="19"]::before{background:linear-gradient(180deg,rgba(10,10,12,0),rgba(10,10,12,.9) 70%),radial-gradient(70% 60% at 50% 40%,rgba(255,255,255,.04),transparent 70%),#0A0A0C} /* depth fog */
body[data-bg="20"]::before{background:radial-gradient(50% 40% at 20% 0%,rgba(227,179,74,.10),transparent 60%),radial-gradient(40% 40% at 100% 100%,rgba(255,255,255,.05),transparent 65%),linear-gradient(180deg,#111015,#0A0A0C);opacity:1} /* hybrid cinematic */

/* ==========================================================================
   BACKGROUND CONTROL LAYER · body::after, driven by 5 dials, sits on top of
   the 20 presets above (they own body::before) and stays below main
   (base.css: body::before z-index:0, body::after[grain] z-index:1, main
   z-index:2). Scoped to body[data-bg] only — a page without data-bg keeps
   base.css's own bare body::after grain layer untouched. Composed from
   4 gradient layers so every dial is independently tunable via calc(var()):
   --bg-bright (.7-1.2, white/black wash), --bg-contrast (multiplies the
   vignette's depth), --bg-vignette (0-1), --bg-glow (0-1, gold top-left
   bloom), --bg-grain (0-1, cheap CSS-only dot noise, no animation).
   The 20 presets themselves are untouched. ========================================================================== */
body[data-bg]{--bg-bright:1;--bg-contrast:1;--bg-vignette:.55;--bg-grain:0;--bg-glow:0}
body[data-bg]::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:
    /* grain: two 2px hairline gratings at 90deg, cheap CSS-only stand-in for feTurbulence */
    repeating-linear-gradient(0deg,rgba(255,255,255,calc(.05*var(--bg-grain))) 0 1px,transparent 1px 2px),
    repeating-linear-gradient(90deg,rgba(0,0,0,calc(.06*var(--bg-grain))) 0 1px,transparent 1px 2px),
    /* gold-lit glow, top-left */
    radial-gradient(55% 55% at 6% 0%,rgba(var(--gold-rgb),calc(.24*var(--bg-glow))),transparent 70%),
    /* vignette, darkened corners; contrast dial scales its depth */
    radial-gradient(95% 75% at 50% 105%,rgba(0,0,0,calc(.62*var(--bg-vignette)*var(--bg-contrast))),transparent 65%),
    /* brightness wash: lightens when bg-bright > 1, darkens when < 1 */
    linear-gradient(rgba(255,255,255,calc(.10*max(0,var(--bg-bright) - 1))),transparent),
    linear-gradient(rgba(0,0,0,calc(.45*max(0,1 - var(--bg-bright)))),transparent);
  background-size:3px 3px,3px 3px,auto,auto,auto,auto;
  background-blend-mode:overlay,overlay,normal,normal,normal,normal
}