feat: move About's 3 fact-slides into the Studio carousel (intro)

Prepend the About hero's fact slides (1B web sites / 400B stars / 86B neurons
+ brain line-draw) as an intro before Studio's 6 tabbed section slides.

- page-studio.php: splice the 3 .dw-fade-slide blocks at the top of the track;
  shift subnav tab targets +3 (data-slide 3-8); add a grayscale .dw-studio-tv
  <video> (tv.mp4/webm) to the bg layer.
- js/studio.js: CONFIG now 9 slides — facts 0-2 use caro-grad5 + the tv video,
  3-8 unchanged; tab/panel activation maps via data-slide (fact slides have no
  tab, so the panel holds); broaden the .hide-svg reveal to cover #brain; add
  the tv-video toggle.
- css/styles.scss: .dw-studio-tv (shared with .dw-studio-video) + grayscale.

About keeps its own copy of these slides until its new page is built.

css/styles.scss

@@ -228,13 +228,17 @@ $enable-negative-margins: true;
   background-size: cover;
   background-position: center;
 }
-.dw-studio-video {
+.dw-studio-video,
+.dw-studio-tv {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
-  display: none; // shown only on the Media slide, by studio.js
+  display: none; // shown per-slide by studio.js (camera → Media, tv → fact intro)
+}
+.dw-studio-tv {
+  filter: saturate(0); // grayscale, as it was behind the About fact slides
 }
 .dw-fade-carousel {
   position: relative;

js/studio.js

@@ -46,18 +46,23 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
   const tabs = Array.from(document.querySelectorAll('.dw-studio-tab'));
   const panes = Array.from(document.querySelectorAll('#studio-tab .tab-pane'));
   const bg = stage.querySelector('.dw-studio-bg');
-  const video = stage.querySelector('.dw-studio-video');
+  const video = stage.querySelector('.dw-studio-video'); // camera → Media slide
+  const tv = stage.querySelector('.dw-studio-tv');       // grayscale → fact intro
   const title = document.querySelector('.site-title a');
 
   const GRADS = ['caro-grad', 'caro-grad2', 'caro-grad3', 'caro-grad5'];
   // per slide: gradient class · background image · show video · navbar-title light
+  // Slides 0-2 are the fact intro (from About); 3-8 are the tabbed sections.
   const CONFIG = [
-    { grad: 'caro-grad5', img: stage.dataset.bg0 || null, video: false, light: true  }, // 0 Studio
-    { grad: 'caro-grad',  img: null,                      video: false, light: true  }, // 1 Web
-    { grad: 'caro-grad2', img: null,                      video: false, light: true  }, // 2 UX
-    { grad: 'caro-grad3', img: null,                      video: false, light: false }, // 3 Graphic
-    { grad: 'caro-grad5', img: null,                      video: true,  light: true  }, // 4 Media
-    { grad: 'caro-grad5', img: stage.dataset.bg5 || null, video: false, light: true  }, // 5 Art
+    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 0 fact: web sites
+    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 1 fact: stars
+    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 2 fact: brain
+    { grad: 'caro-grad5', img: stage.dataset.bg0 || null, video: false, light: true  }, // 3 Studio
+    { grad: 'caro-grad',  img: null,                      video: false, light: true  }, // 4 Web
+    { grad: 'caro-grad2', img: null,                      video: false, light: true  }, // 5 UX
+    { grad: 'caro-grad3', img: null,                      video: false, light: false }, // 6 Graphic
+    { grad: 'caro-grad5', img: null,                      video: true,  light: true  }, // 7 Media
+    { grad: 'caro-grad5', img: stage.dataset.bg5 || null, video: false, light: true  }, // 8 Art
   ];
   const INTERVAL = 5000;
 
@@ -83,12 +88,16 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     slides.forEach((s, n) => {
       const on = n === i;
       s.classList.toggle('active', on);
-      // reveal the active slide's content (slides 2/3/5 ship with .hide-svg)
-      const animac = s.querySelector('.animac');
-      if (animac && on) animac.classList.remove('hide-svg');
+      // reveal the active slide's hidden content (.animac.hide-svg, #brain.hide-svg …)
+      if (on) s.querySelectorAll('.hide-svg').forEach((el) => el.classList.remove('hide-svg'));
     });
-    tabs.forEach((t, n) => t.classList.toggle('active', n === i));
-    panes.forEach((p, n) => p.classList.toggle('active', n === i));
+    // activate the tab (+ its panel) that targets this slide, if any.
+    // The fact intro slides (0-2) have no tab → leave the panels as they were.
+    const tabIndex = tabs.findIndex((t) => parseInt(t.dataset.slide, 10) === i);
+    if (tabIndex >= 0) {
+      tabs.forEach((t, n) => t.classList.toggle('active', n === tabIndex));
+      panes.forEach((p, n) => p.classList.toggle('active', n === tabIndex));
+    }
 
     GRADS.forEach((g) => stage.classList.remove(g));
     stage.classList.add(cfg.grad);
@@ -103,6 +112,15 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
         video.style.display = 'none';
       }
     }
+    if (tv) {
+      if (cfg.tv) {
+        tv.style.display = 'block';
+        tv.play().catch(function () {});
+      } else {
+        tv.pause();
+        tv.style.display = 'none';
+      }
+    }
 
     if (title) title.classList.toggle('light', cfg.light);