Studio: contain hero slides as uniform cards, Craft tab, action buttons, Design laptop

- Contain every hero slide in a content-width .dw-studio-stage card (rounded top,
  overflow-clipped for video, per-slide bg on the card not the full-width stage) so
  each slide reads as the top half of the .studio-lower content card, flush with it —
  cohesive with the other pages. Inner slide .containers fill the stage (no fixed
  1170 width) so content no longer overflows the right padding.
- Uniform slide height via min-height: max(calc(40vh - 100px), 440px) so short
  slides fill to the tallest (Craft fact slides / Projects cards) instead of each
  sizing to its own content. Added top/side content padding to the card.
- Rename the Wonder tab to Craft: it still auto-rotates the fact slides once, but now
  stops on the last and keeps its new #wonder copy pane active (placeholder to edit).
- Action buttons bottom-right: 'Art Projects ->' (/studio/art) on the Art pane, and a
  right arrow added to the Web 'Learn More ->' button.
- Design slide: studio-design-3.jpg seats on the laptop (svg-mac) screen via an inline
  <image> in viewBox coords, fading in after the DrawFillSVG stroke draw (~2.4s); a
  bit more top room above the laptop. (img/ assets are gitignored — deploy separately.)

js/studio.js

@@ -41,6 +41,7 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
   const stage = document.getElementById('studio-caro');
   const caro = document.getElementById('caro');
   if (!stage || !caro) return;
+  const card = stage.querySelector('.dw-studio-stage') || stage; // contained rounded hero card that carries the per-slide bg
 
   const slides = Array.from(caro.querySelectorAll('.dw-fade-slide'));
   const tabs = Array.from(document.querySelectorAll('.dw-studio-tab'));
@@ -51,7 +52,7 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
   const title = document.querySelector('.site-title a');
   const studioTab = tabs.find((t) => t.getAttribute('href') === '#studio') || tabs[0];
 
-  const GRADS = ['caro-grad', 'caro-grad2', 'caro-grad3', 'caro-grad5'];
+  const GRADS = ['caro-grad', 'caro-grad2', 'caro-grad3', 'caro-grad5', 'caro-grad-dadada'];
   // per slide: gradient class · background image · show video · navbar-title light
   // Slides 0-4 are the tabbed sections; 5-7 the fact intro; 8 the Projects hero.
   const CONFIG = [
@@ -63,7 +64,7 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 5 fact: web sites
     { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 6 fact: stars
     { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 7 fact: brain
-    { grad: 'caro-grad5', img: null, video: false, light: true }, // 8 Projects (cards; transparent stage → body shows around the #dadada slide card)
+    { grad: 'caro-grad-dadada', img: null, video: false, light: true }, // 8 Projects (#dadada card)
   ];
   const INTERVAL = 5000;
 
@@ -97,8 +98,8 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
       if (on) s.querySelectorAll('.hide-svg').forEach((el) => el.classList.remove('hide-svg'));
     });
 
-    GRADS.forEach((g) => stage.classList.remove(g));
-    stage.classList.add(cfg.grad);
+    GRADS.forEach((g) => card.classList.remove(g));
+    card.classList.add(cfg.grad);
 
     if (bg) {
       bg.style.backgroundImage = cfg.img ? 'url("' + cfg.img + '")' : '';
@@ -138,9 +139,10 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     panes.forEach((p) => p.classList.toggle('active', p.id === id));
   }
 
-  // "Wonder" auto-rotates through the fact slides (6,7,8) then returns to Studio (0)
-  // and stops. Every other tab just switches on click — no autoplay.
-  const WONDER = [5, 6, 7, 0];
+  // "Craft" (the .dw-studio-wonder tab) auto-rotates the hero through the fact
+  // slides (5,6,7) once and stops on the last, leaving the Craft tab + pane active.
+  // Every other tab just switches on click — no autoplay.
+  const WONDER = [5, 6, 7];
   let wonderTimer = null;
   function stopWonder() { if (wonderTimer) { window.clearTimeout(wonderTimer); wonderTimer = null; } }
   function runWonder() {
@@ -150,7 +152,7 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
       setHero(WONDER[step]);
       step++;
       if (step < WONDER.length) wonderTimer = window.setTimeout(tick, INTERVAL);
-      else setActiveTab(studioTab); // cycle ends on the Studio hero → settle the tab there
+      // ends on the last fact slide — the Craft tab + its pane stay active
     })();
   }
 

page-studio.php

@@ -17,6 +17,7 @@
 		</defs>
 	</svg>
 	<div id="studio-caro" class="container-fluid leader" data-bg0="<?php echo get_template_directory_uri(); ?>/img/studio-26.jpg" data-bg5="<?php echo get_template_directory_uri(); ?>/img/paints2.jpg">
+		<div class="container dw-studio-stage">
 		<div class="dw-studio-bg" aria-hidden="true">
 			<video class="dw-studio-video" muted loop playsinline preload="none" poster="<?php echo get_template_directory_uri(); ?>/img/camera.jpg">
 				<source src="<?php echo get_template_directory_uri(); ?>/img/camera.mp4" type="video/mp4">
@@ -84,6 +85,7 @@
 								<path stroke="#000000" fill="#828282" d="M25.5,290h206.3h37.9h206.3c9.5,0,17.9-3.4,21.3-5.7H4.2C7.6,286.5,16,290,25.5,290z"/>
 								<path stroke="#000000" fill="#D6D6D6" d="M3.7,284.7c0-3.2,0-6.4,0-9.6c164.9,0,329.9,0,494.8,0c0,3.2,0,6.4,0,9.6C333.6,284.7,168.7,284.7,3.7,284.7z"/>
 								<path stroke="#000000" fill="#FFFFFF" d="M216.4,281.1c0-2,0-4,0-6c23.2,0,46.4,0,69.6,0c0,2,0,4,0,6C262.8,281.1,239.6,281.1,216.4,281.1z"/>
+								<image class="dw-laptop-img" href="<?php echo get_template_directory_uri(); ?>/img/studio-design-3.jpg" x="63.2" y="25.3" width="375.4" height="231.5" preserveAspectRatio="xMidYMid slice"></image>
 								</svg>
 							</div>
 						</div>
@@ -95,7 +97,7 @@
 							<div class="col-sm-6">
 								<h1 class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Media</h1>
 								<h3 class="light cm tight wow fadeInUp" data-wow-delay="500ms">Communications</h3>
-								<h5 class="light wow fadeIn" data-wow-delay="2s">Motion | Video | Audio<br />Streaming<br />WebRTC</h5>
+								<h5 class="light wow fadeIn" data-wow-delay="2s">Motion | Video | Audio<br />Streaming</h5>
 							</div>
 							<div class="col-sm-6">
 							</div>
@@ -193,6 +195,7 @@
         </div>
 			</div>
 		</div>
+		</div>
 	</div>
 	<div class="container studio-lower">
 		<div class="row">
@@ -203,7 +206,7 @@
 					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="2" href="#design">Design</a></li>
 					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="3" href="#media">Media</a></li>
 					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="4" href="#art">Art</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab dw-studio-wonder nav-item" data-slide="5" href="#wonder">Wonder</a></li>
+					<li class="list-group-item mt-1"><a class="dw-studio-tab dw-studio-wonder nav-item" data-slide="5" href="#wonder">Craft</a></li>
 					<li class="list-group-item mt-1"><a class="dw-studio-tab dw-studio-projects nav-item" data-slide="8" href="#projects">Projects</a></li>
 					<span class="dw-nav-underline" aria-hidden="true"></span>
 				</ul>
@@ -230,13 +233,13 @@
   							</div>
   						</div>
             </div>
-					<a href="/work/#what" class="btn btn-dark dw-studio-action">Learn More</a>
+					<a href="/work/#what" class="btn btn-dark dw-studio-action">Learn More &rarr;</a>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="design">
             <div class="row">
   						<div class="col-sm-12 mt-4">
   							<div class="entry-content">
-  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">D</span>on't mistake legibility with communication.</em> - David Carson<br /><br />Visual design in communication is powerful and it can make or break a product, company, presentation, or even an annual report.  Even though I'm using software, I still believe the most powerful tool, besides our imagination is still the pencil &amp; paper.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">D</span>on't mistake legibility with communication.</em> - David Carson<br /><br />Visual design in communication is powerful and it can make or break a product, company, presentation, or even an annual report.  Even though I'm using mostly software, I still believe the most powerful tool, besides our imagination is a pencil &amp; paper.</h4>
   							</div>
   						</div>
             </div>
@@ -257,13 +260,23 @@
   								<h4 class="fs-5 georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em> - Woody Allen.<br /><br /> I'd like to spend more time away from the monitors. I'm sure my eyes would appreciate it too. I keep joking with my better half that a return to the easel is part of my retirement plan.</h4>
   							</div>
   						</div>
+            </div>
+					<a href="/studio/art" class="btn btn-dark dw-studio-action">Art Projects &rarr;</a>
+					</div>
+					<div role="tabpanel" class="tab-pane wow fadeIn" id="wonder">
+            <div class="row">
+  						<div class="col-sm-12 mt-4">
+  							<div class="entry-content">
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">W</span>e are all apprentices in a craft where no one ever becomes a master</em> - Ernest Hemingway<br /><br />I studied wordworking for several years in college. I learned that an honest enthusiasm for the medium and attention to detail are the hallmarks of quality craftsmanship. The same things that make a nice peice of furniture nice also make for good software.</h4>
+  							</div>
+  						</div>
             </div>
 					</div>
 					<div role="tabpanel" class="tab-pane wow fadeIn" id="projects">
 						<div class="row">
 							<div class="col-sm-12 mt-4">
 								<div class="entry-content">
-									<h4 class="fs-5 georgia"><em><span class="firstcharacter">A</span> rotating set of things I'm building</em> &mdash; personal, business, pro, and hobby alike.<br />Whether it's garden beds or servers, the most recent land up top.</h4>
+									<h4 class="fs-5 georgia"><em><span class="firstcharacter">A</span> good plan violently executed now is a better than a perfect plan next week</em>.<br /> - George S. Patton<br /><br />These are things I've created &mdash; personal, business, pro, and hobby alike.<br />Whether it's garden beds or servers, the most featured or recent will land up top here because I've spent enought time with them to document. I see myself as a personal project.</h4>
 									<a href="/studio/projects/" class="btn btn-dark dw-studio-action">View all projects &rarr;</a>
 								</div>
 							</div>

style.css

@@ -812,6 +812,20 @@ p.cc {
 }
 #caro #svg-mac {
 	height: 290px;
+	margin-top: 1.5rem; /* a bit more room above the laptop on the Design slide */
+}
+/* Design slide — studio-design.jpg sits on the laptop screen (svg-mac) and fades
+   in after the SVG finishes drawing (~2s stroke draw in DrawFillSVG). Re-runs each
+   time the Design slide is shown. */
+.dw-laptop-img {
+	opacity: 0;
+}
+.dw-fade-slide.active #svg-mac .dw-laptop-img {
+	animation: dwLaptopReveal 0.8s ease 2.4s forwards;
+}
+@keyframes dwLaptopReveal {
+	from { opacity: 0; }
+	to { opacity: 1; }
 }
 #studio-caro {
 	-webkit-transition: all 1s ease;
@@ -831,6 +845,32 @@ p.cc {
 .caro-grad5 {
 	background: none;
 }
+.caro-grad-dadada {
+	background: #dadada; /* Projects slide — matches the .studio-lower content card */
+}
+/* Contained hero card: a .container-width box (same width as .studio-lower below)
+   that carries the per-slide background (caro-grad* solid / image / video), a
+   rounded top, and clips its contents — so every slide reads as the top half of the
+   content card, flush with .studio-lower's square top. min-height fills to the
+   hero's 40vh (100px = the .leader top padding on #studio-caro above it). */
+.dw-studio-stage {
+	position: relative;
+	overflow: hidden;
+	border-radius: 6px 6px 0 0;
+	/* Uniform hero height across all slides: a floor tall enough for the tallest
+	   content (the Wonder fact slides / Projects cards) so shorter slides fill to
+	   the same height instead of each sizing to its own content. */
+	min-height: max(calc(40vh - 100px), 440px);
+	padding: 2.5rem 2.5rem 0; /* breathing room for the slide content; the bg fills
+	                             behind it (inset:0, unaffected by this padding) */
+}
+/* Each slide's content sits in its own .container; inside the (already .container-
+   width) stage it must fill the padded box, not re-assert the fixed .container
+   width — otherwise it overflows the stage's right padding (e.g. the Projects cards). */
+.dw-studio-stage .container {
+	width: auto;
+	max-width: none;
+}
 .blur {
   -webkit-filter: blur(5px);
   -ms-filter: blur(5px);
@@ -1006,17 +1046,11 @@ body.projects h1 {
 .projects-card .studio .entry-content {
 	overflow: hidden;
 }
-/* Projects cards shown in the Studio hero slide (data-id 9). The slide is styled
-   as the top half of the #dadada .studio-lower card below it: same width + #dadada
-   bg, rounded top corners, square bottom to meet .studio-lower's square top flush.
-   The hero stage is transparent (caro-grad5) so the dark body shows around it, just
-   as it does around .studio-lower. min-height fills to the hero's 40vh so the two
-   halves stay flush (100px = the .leader top padding above the slide). */
+/* Projects cards in the Studio hero slide (data-id 9). The #dadada card, rounded
+   top, and top/side padding come from .dw-studio-stage (shared by every slide);
+   this just adds a little breathing room below the card grid. */
 .dw-studio-projects-slide {
-	background: #dadada;
-	border-radius: 6px 6px 0 0;
-	padding: 1.5rem 1.5rem 0.5rem;
-	min-height: calc(40vh - 100px);
+	padding: 0 0 0.5rem;
 }
 .dw-studio-projects-title {
 	margin: 0 0 1rem;