Studio: Recent Projects slide, Web/UX merge, action buttons, slate duotone hero

- Projects tab is now in-page: the top slide is a #dadada card titled 'Recent
  Projects' holding the 4 latest studio-category posts as cards, styled as the top
  half of the .studio-lower content card (rounded top, flush with its square top,
  transparent hero stage so the slate body shows around both). Copy + a
  'View all projects' button sit in the pane below.
- Merge Web + UX into one Web/Dev slide and remove the old Web slide, renumbering
  all the slide-array indices studio.js relies on (tab data-slide, CONFIG, WONDER).
  studio.js: split activate() into setHero() (carousel) + setActiveTab() (tab/pane
  matched by href→id) so a content-only tab like Projects can move independently.
- Every actionable item now sits bottom-right of the content card: 'Learn More'
  (Web/Dev, was the inline Capabilities link) and 'View all projects' (Projects),
  via .dw-studio-action absolutely positioned in .studio-lower.
- Remove the DRAFT admonition + its now-unused .dw-admonition* styles; normalize
  the Studio tab copy padding to match the other tabs (2.5rem).
- Tint the Studio hero image to the slate blue: a 'Slate' duotone preset in
  theme.json + a self-contained inline SVG filter (#dw-duotone-slate, #484c57 →
  #cfd2d8), applied to the first slide only via CONFIG[0].filter.

js/studio.js

@@ -49,20 +49,21 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
   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 studioTab = tabs.find((t) => t.getAttribute('href') === '#studio') || tabs[0];
 
   const GRADS = ['caro-grad', 'caro-grad2', 'caro-grad3', 'caro-grad5'];
   // per slide: gradient class · background image · show video · navbar-title light
-  // Slides 0-5 are the tabbed sections; 6-8 are the fact intro (moved to the end).
+  // Slides 0-4 are the tabbed sections; 5-7 the fact intro; 8 the Projects hero.
   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 }, // 6 fact: web sites
-    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 7 fact: stars
-    { grad: 'caro-grad5', img: null, video: false, tv: true, light: true }, // 8 fact: brain
+    { grad: 'caro-grad5', img: stage.dataset.bg0 || null, video: false, light: true, filter: 'url(#dw-duotone-slate)' }, // 0 Studio (slate-duotone hero)
+    { grad: 'caro-grad2', img: null,                      video: false, light: true  }, // 1 Web/Dev (was UX)
+    { grad: 'caro-grad3', img: null,                      video: false, light: false }, // 2 Graphic
+    { grad: 'caro-grad5', img: null,                      video: true,  light: true  }, // 3 Media
+    { grad: 'caro-grad5', img: stage.dataset.bg5 || null, video: false, light: true  }, // 4 Art
+    { 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)
   ];
   const INTERVAL = 5000;
 
@@ -80,7 +81,11 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     });
   }
 
-  function activate(i) {
+  // Set the hero carousel slide (slide visibility, gradient, bg image, video/tv,
+  // navbar-title colour). Does NOT touch the subnav tabs or content panes — those
+  // are driven by setActiveTab, so the Wonder auto-cycle and the content-only
+  // Projects tab can move the hero and the active tab independently.
+  function setHero(i) {
     i = (i + slides.length) % slides.length;
     index = i;
     const cfg = CONFIG[i];
@@ -91,18 +96,14 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
       // 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'));
     });
-    // 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);
 
-    if (bg) bg.style.backgroundImage = cfg.img ? 'url("' + cfg.img + '")' : '';
+    if (bg) {
+      bg.style.backgroundImage = cfg.img ? 'url("' + cfg.img + '")' : '';
+      bg.style.filter = cfg.filter || ''; // slate duotone on the Studio hero only
+    }
     if (video) {
       if (cfg.video) {
         video.style.display = 'block';
@@ -127,18 +128,29 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     drawSVGs(slides[i]);
   }
 
+  // Mark a subnav tab active and show its matching content pane, matched by the
+  // tab's href hash → pane id (#studio → id="studio", #projects → id="projects").
+  // Tabs with no pane (Wonder) simply hide every pane.
+  function setActiveTab(tab) {
+    tabs.forEach((t) => t.classList.toggle('active', t === tab));
+    const hash = tab ? tab.getAttribute('href') || '' : '';
+    const id = hash.charAt(0) === '#' ? hash.slice(1) : '';
+    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 = [6, 7, 8, 0];
+  const WONDER = [5, 6, 7, 0];
   let wonderTimer = null;
   function stopWonder() { if (wonderTimer) { window.clearTimeout(wonderTimer); wonderTimer = null; } }
   function runWonder() {
     stopWonder();
     let step = 0;
     (function tick() {
-      activate(WONDER[step]);
+      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
     })();
   }
 
@@ -146,11 +158,13 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     t.addEventListener('click', function (e) {
       e.preventDefault();
       stopWonder();
+      setActiveTab(t);
       if (t.classList.contains('dw-studio-wonder')) runWonder();
-      else activate(parseInt(t.dataset.slide, 10) || 0);
+      else setHero(parseInt(t.dataset.slide, 10) || 0);
     });
   });
 
   // No autoplay — the carousel advances only on subnav clicks (Wonder runs its own set).
-  activate(0);
+  setActiveTab(studioTab);
+  setHero(0);
 })();

page-studio.php

@@ -1,5 +1,21 @@
 <?php get_header(); ?>
 <?php get_template_part( 'loader' ); ?>
+	<!-- Duotone filter for the Studio hero image — mirrors the theme.json "Slate"
+	     duotone (#484c57 shadows → #cfd2d8 highlights). Applied to the first slide's
+	     background in js/studio.js (CONFIG[0].filter). -->
+	<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0" focusable="false" role="none" aria-hidden="true" style="visibility:hidden;position:absolute;left:-9999px;overflow:hidden">
+		<defs>
+			<filter id="dw-duotone-slate">
+				<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values="0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0.299 0.587 0.114 0 0 0 0 0 1 0"></feColorMatrix>
+				<feComponentTransfer color-interpolation-filters="sRGB">
+					<feFuncR type="table" tableValues="0.282 0.812"></feFuncR>
+					<feFuncG type="table" tableValues="0.298 0.824"></feFuncG>
+					<feFuncB type="table" tableValues="0.341 0.847"></feFuncB>
+					<feFuncA type="table" tableValues="1 1"></feFuncA>
+				</feComponentTransfer>
+			</filter>
+		</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="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">
@@ -21,43 +37,12 @@
 						</div>
 					</div>
 				</div>
-				<div class="dw-fade-slide" data-id="1">
-					<div class="container animac">
-						<div class="row">
-							<div class="col-sm-7">
-								<h1 style="margin:0px" class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Web</h1>
-								<h2 class="light cm tight wow fadeInUp" data-wow-delay="500ms">Development</h4>
-								<h5 class="light wow fadeIn" data-wow-delay="2s">Client and Server Side Programming<br />Application Development<br />Database<br />Design</h5>
-								<svg id="svg-device" class="svg" viewBox="0 0 280 250">
-								<path d="M274.9,238.2c0,6.2-5.1,11.3-11.3,11.3H95.3c-6.2,0-11.3-5.1-11.3-11.3V14.1c0-6.2,5.1-11.3,11.3-11.3h168.3c6.2,0,11.3,5.1,11.3,11.3V238.2z"/>
-								<path stroke="#FFFFFF" fill="#FFFFFF" d="M256.3,227.4H102.6V24.8h153.7V227.4z"/>
-								<path stroke="#FFFFFF" fill="#3A3A3A" d="M181.4,13.4c0,1.1-0.9,2-2,2c-1.1,0-2-0.9-2-2s0.9-2,2-2C180.6,11.4,181.4,12.3,181.4,13.4z"/>
-								<path stroke="#FFFFFF" fill="#3A3A3A" d="M184.8,238.6c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3s2.4-5.3,5.3-5.3C182.4,233.2,184.8,235.6,184.8,238.6z"/>
-								<path stroke="#FFFFFF" d="M69.8,241.1c0,4.6-3.8,8.4-8.4,8.4H11.9c-4.6,0-8.4-3.8-8.4-8.4V112.5c0-4.6,3.8-8.4,8.4-8.4h49.5c4.6,0,8.4,3.8,8.4,8.4V241.1z"/>
-								<path stroke="#FFFFFF" fill="#3A3A3A" d="M42,238.7c0,2.9-2.4,5.3-5.3,5.3c-2.9,0-5.3-2.4-5.3-5.3c0-2.9,2.4-5.3,5.3-5.3C39.6,233.3,42,235.7,42,238.7z"/>
-								<path stroke="#FFFFFF" fill="#FFFFFF" d="M66.8,226.5H6.5V122.6h60.3V226.5z"/>
-								<path stroke="#FFFFFF" fill="#3A3A3A" d="M46.9,114.9c0,1-0.8,1.8-1.8,1.8h-17c-1,0-1.8-0.8-1.8-1.8l0,0c0-1,0.8-1.8,1.8-1.8h17C46.1,113.1,46.9,113.9,46.9,114.9L46.9,114.9z"/>
-								</svg>
-							</div>
-							<div class="col-sm-5">
-								<svg id="svg-imac" class="svg screen" viewBox="0 0 400 340">
-								<path fill="#9e9e9e" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M272.2,329.5l-23.3-23.3c-5.7-6.8-4.9-29.4-4.8-32.6h-88c0.1,3.2,0.9,25.7-4.8,32.6l-23.3,23.3c-1,1.1-1.4,2-1.3,2.7l0,0c0.6,6.2,5.4,5.1,10.9,5.1h125.1c5.4,0,10,1.1,10.8-4.5C273.7,332,273.5,331,272.2,329.5L272.2,329.5z"/>
-								<path fill="#E3E3E3" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M386.4,1H13.6C7.1,1,1.4,6.5,1.4,13.3v248c0,6.8,5.7,12.8,12.2,12.8h372.8c6.5,0,12.2-5.9,12.2-12.8v-248C398.6,6.5,392.9,1,386.4,1z M382.8,212.4H17.2V16h365.6V212.4z"/>
-								<path fill="#000000" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M207.2,252.2c0-3.3,2.7-5,2.9-5.1c-1.6-2.3-4.1-2.6-4.8-2.6c-2.1-0.2-4.1,1.2-5.1,1.2c-1.1,0-2.7-1.2-4.4-1.1c-2.3,0-4.4,1.3-5.5,3.3c-2.4,4.1-0.6,10.1,1.7,13.5c1.1,1.6,2.5,3.4,4.2,3.3c1.7-0.1,2.3-1.1,4.4-1.1c2,0,2.6,1.1,4.4,1.1c1.8,0,3-1.7,4.1-3.3c1.3-1.8,1.8-3.7,1.8-3.8C210.7,257.6,207.2,256.3,207.2,252.2 M203.9,242.3c1-1.1,1.6-2.7,1.4-4.2c-1.3,0.1-3,0.9-4,2c-0.9,1-1.6,2.6-1.4,4.1C201.4,244.3,202.9,243.4,203.9,242.3"/>
-								<path fill="#000000" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M386.4,1H13.6C7.1,1,1.4,6.6,1.4,13.8V230h397.3V13.8C398.6,6.6,392.9,1,386.4,1z M382.8,212.4H16.3V16h366.4V212.4z"/>
-								<path fill="none" stroke="#FFFFFF" stroke-width="1px" stroke-miterlimit="10" d="M16.8,16.1H383v196.6H16.8V16.1z"/>
-								</svg>
-							</div>
-						</div>
-					</div>
-				</div>
 				<div class="dw-fade-slide" data-id="2">
 					<div class="container animac hide-svg">
-						<div class="row">
+						<div class="row mt-5">
 							<div class="col-sm-3">
-								<h1 style="margin:0px" class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">UX</h1>
-								<h3 class="light cm tight wow fadeInUp" data-wow-delay="500ms">User Experience<br />Design</h3>
-								<h5 class="light wow fadeIn" data-wow-delay="2s">Information Architecture<br/>Interaction Design<br />Usability Testing</h5>
+								<h1 style="margin:0px" class="light super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Dev</h1>
+								<h5 class="light wow fadeIn" data-wow-delay="2s">Web Development<br />Client / Server Side Programming<br />Application Development<br />Database / Information Architecture<br/>Interaction / Usability Testing</h5>
 							</div>
 							<div class="col-sm-9">
 								<svg id="sv" viewBox="0 0 600 220">
@@ -86,8 +71,8 @@
 					<div class="container animac hide-svg">
 						<div class="row">
 							<div class="col-sm-4">
-								<h1 class="super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Graphic</h1>
-								<h3 class="cm tight wow fadeInUp" data-wow-delay="500ms">Design Communication</h3>
+								<h1 class="super cm-sans tight wow fadeInDown" data-wow-delay="500ms">Design</h1>
+								<h3 class="cm tight wow fadeInUp" data-wow-delay="500ms">Graphic Communication</h3>
 								<h5 class="wow fadeIn" data-wow-delay="2s">Branding | Print | Illustration<br/>Infographics<br/>Data Visualization</h5>
 							</div>
 							<div class="col-sm-8">
@@ -178,6 +163,34 @@
 						</div>
 					</div>
 			  </div>
+        <div class="dw-fade-slide" data-id="9">
+          <div class="container dw-studio-projects-slide">
+            <h2 class="dw-studio-projects-title cm-sans">Recent Projects</h2>
+            <div class="row">
+              <?php
+              $studio_q = new WP_Query( array( 'category_name' => 'studio', 'posts_per_page' => 4 ) );
+              while ( $studio_q->have_posts() ) : $studio_q->the_post();
+                if ( has_post_thumbnail() ) {
+                  $img_url = wp_get_attachment_image_src( get_post_thumbnail_id(), 'studio' );
+                } else {
+                  $img_url = get_post_meta( get_the_ID(), 'featured_image_url' );
+                }
+              ?>
+              <div class="col-lg-3">
+                <div class="studio-thumbnail">
+                  <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><img class="studio-thumb" src="<?php echo esc_url( $img_url[0] ?? '' ); ?>" width="100%" alt="<?php the_title(); ?>"/></a>
+                </div>
+                <article class="studio">
+                  <div class="entry-content">
+                    <h5><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" rel="bookmark"><?php the_title(); ?></a></h5>
+                    <?php dw_good_excerpt( 90 ); ?>
+                  </div>
+                </article>
+              </div>
+              <?php endwhile; wp_reset_postdata(); ?>
+            </div>
+          </div>
+        </div>
 			</div>
 		</div>
 	</div>
@@ -186,13 +199,12 @@
 			<div class="col-sm-2 bg-dark studio-subnav-col">
 				<ul class="nav studio-subnav">
 					<li class="list-group-item mt-0"><a class="dw-studio-tab nav-item active" data-slide="0" href="#studio">Studio</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="1" href="#webdev">Web</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="2" href="#ux">UX/UI</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="3" href="#graphic">Graphic</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="4" href="#media">Media</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="5" href="#art">Art</a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab dw-studio-wonder nav-item" data-slide="6" href="#wonder">Wonder</a></li>
-					<li class="list-group-item mt-1"><a class="nav-item" href="/studio/projects/">Projects</a></li>
+					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="1" href="#ux">Web</a></li>
+					<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-projects nav-item" data-slide="8" href="#projects">Projects</a></li>
 					<span class="dw-nav-underline" aria-hidden="true"></span>
 				</ul>
 			</div>
@@ -202,20 +214,10 @@
             <div class="row">
   						<div class="col-sm-12 mt-4">
 							  <div class="entry-content">
-  								<div class="dw-admonition" role="note">
-  								<div class="dw-admonition-heading"><span class="dw-admonition-icon"><svg viewBox="0 0 12 16" aria-hidden="true"><path fill-rule="evenodd" d="M5.05.31c.81 2.17.41 3.38-.52 4.31C3.55 5.67 1.98 6.45.9 7.98c-1.45 2.05-1.7 6.53 3.53 7.7-2.2-1.16-2.67-4.52-.3-6.61-.61 2.03.53 3.33 1.94 2.86 1.39-.47 2.3.53 2.27 1.67-.02.78-.31 1.44-1.13 1.81 3.42-.59 4.78-3.42 4.78-5.56 0-2.84-2.53-3.22-1.25-5.61-1.52.13-2.03 1.13-1.89 2.75.09 1.08-1.02 1.8-1.86 1.33-.67-.41-.66-1.19-.06-1.78C8.18 5.31 8.68 2.45 5.05.32L5.03.3l.02.01z"></path></svg></span>DRAFT</div>
-  								<div class="dw-admonition-content"><p>I recently reworked my IRL studio and I&rsquo;m reworking these as well to just be a more wholistic less work'y projects page mix of personal, business, pro and hobby - whether it&rsquo;s building garden beds or servers... anything I create.</p></div>
-  							</div>
-  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">A</span>lthough it seems that in the shower or sleeping is where my best work occurs,</em><br />my 'studio' is mostly place where the shoe leather hits the pavement. I suppose shop or lab sound alright too but office it's certainly not.</h4>
-  							</div>
-  						</div>
-            </div>
-					</div>
-					<div role="tabpanel" class="tab-pane wow fadeIn" id="webdev">
-            <div class="row">
-  						<div class="col-sm-12 mt-4">
-  							<div class="entry-content">
-  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">T</span>hey don't call it the information age for nothing</em>.<br />The web browser has become the default medium for communication and the craft involves a broad spectrum of knowledge that give a developer complete control over how a web application performs, looks, and operates.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">I</span> 
+									think of my studio as a vegetable garden, where things follow their natural course. They grow, they ripen. You have to graft. You have to water.</em> - Joan Miró</h4><br />
+									
+									<h4 class="fs-5 georgia">Although it seems that in the shower or sleeping is where my best work actually occurs, my studio is mostly place where the shoe leather hits the pavement. I suppose shop or lab sound alright too but an office it's certainly not. It doesn't matter if I'm studying a recipe or working up a spreadsheet, it's where I create and study.</h4>
   							</div>
   						</div>
             </div>
@@ -224,16 +226,17 @@
             <div class="row">
   						<div class="col-sm-12 mt-4">
   							<div class="entry-content">
-  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">U</span>ser experience design, interaction design, and behavior design</em><br />are just a couple of the terms floating around these days for those who work with user interaction, code, and design. I've often found myself refering to cognitive psychology, '<a href="http://en.wikipedia.org/wiki/The_Magical_Number_Seven,_Plus_or_Minus_Two">The magical number seven</a>', when trying to convice others to simplify user navigation options and settings.</h4>
+									<h4 class="fs-5 georgia"><em><span class="firstcharacter">A</span> wealth of information creates a poverty of attention — Herbert A. Simon</em>.<br /><br />They don't call it the information age for nothing. The web browser has become the default medium for communication and the craft involves a broad spectrum of knowledge that give a developer complete control over how a web application performs, looks, and operates. User experience design, interaction design, and behavior design determine outcomes.
   							</div>
   						</div>
             </div>
+					<a href="/work/#what" class="btn btn-dark dw-studio-action">Learn More</a>
 					</div>
-					<div role="tabpanel" class="tab-pane wow fadeIn" id="graphic">
+					<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 />Visual design in communication is powerful and it can make or break a product, company, presentation, or 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 software, I still believe the most powerful tool, besides our imagination is still the pencil &amp; paper.</h4>
   							</div>
   						</div>
             </div>
@@ -242,7 +245,7 @@
             <div class="row">
   						<div class="col-sm-12 mt-4">
   							<div class="entry-content">
-  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">T</span>he average human attention span is a bit shorter than that of a goldfish</em>.<br />People often forget that the web is a multimedia medium. I'm a decent with enough production, lighting, equipment, and I have an eye for detail to make your multimedia look and sound like it was actually done by a   professional.</h4>
+  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">T</span>he average human attention span is a bit shorter than that of a goldfish</em>.<br /><br />The web is a multimedia medium. Audio, video, photography, motion, and interactive content are have undoubtable, abeit sometimes unfortunately, usurped the written word in modern communication.</h4>
   							</div>
   						</div>
             </div>
@@ -251,11 +254,21 @@
             <div class="row">
   						<div class="col-sm-12 mt-4">
   							<div class="entry-content">
-  								<h4 class="fs-5 georgia"><em><span class="firstcharacter">L</span>ife doesn't imitate art, it imitates bad television</em> - Woody Allen.<br />I like to paint portraits, landscapes and abstractions in oil, watercolor and gauche. I wish I was able to paint more often and I keep joking with my better half that it's my retirement plan. Compared to my digital work, it's nice knowing that a painting will last several hundred years.</h4>
+  								<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>
 					</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>
+									<a href="/studio/projects/" class="btn btn-dark dw-studio-action">View all projects &rarr;</a>
+								</div>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 		</div>

style.css

@@ -913,6 +913,16 @@ article.home {
 	border-radius: 0 0 6px 6px;
 	padding-bottom: 2rem;
 	padding-left: 2.5rem; /* inset the subnav so more of the dadada card shows on the left */
+	position: relative; /* positioning context for the .dw-studio-action buttons */
+}
+/* Per-tab action buttons (Learn More, View all projects) pinned to the bottom-right
+   of the content card, so every actionable item on the Studio page lands in the
+   same corner. Only the active pane's button shows. */
+.dw-studio-action {
+	position: absolute;
+	right: 2.5rem;
+	bottom: 1.5rem;
+	margin: 0;
 }
 /* Subnav column background: rounded on the bottom only so its square top stays
    snug against the hero slider above; padding-bottom gives the Projects button room. */
@@ -926,14 +936,6 @@ article.home {
 #studio-tab .tab-pane .entry-content {
 	padding: 2.5rem;
 }
-/* Only the Studio tab pulls its content up (the DRAFT alert sits close to the
-   slider); every other tab keeps the comfortable top padding. */
-#studio-tab #studio .entry-content {
-	padding-top: 1rem;
-}
-#studio-tab #studio .mt-4 {
-	margin-top: 0 !important;
-}
 #studio-tab .tab-pane .entry-content h4 {
 	font-size: 1.3rem !important; /* beat the .fs-5 !important utility on the copy */
 	line-height: 1.6;
@@ -1004,6 +1006,35 @@ 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). */
+.dw-studio-projects-slide {
+	background: #dadada;
+	border-radius: 6px 6px 0 0;
+	padding: 1.5rem 1.5rem 0.5rem;
+	min-height: calc(40vh - 100px);
+}
+.dw-studio-projects-title {
+	margin: 0 0 1rem;
+	font-weight: 700;
+	font-size: 2rem;
+	color: #232323;
+}
+.dw-studio-projects-slide .studio-thumbnail {
+	height: 150px;
+}
+.dw-studio-projects-slide img.studio-thumb {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.dw-studio-projects-slide .studio .entry-content {
+	overflow: hidden;
+}
 
 /*============================================
 		Art
@@ -1022,40 +1053,6 @@ body.art article.studio {
 	background: #dadada;   /* card bg, like the #dadada cards on the other pages */
 	border-radius: 6px;    /* small radius */
 }
-/* Docusaurus-style "DRAFT" admonition — matches the danger admonition on /til
-   (bg #ffebec, #4b1113 text/flame icon, #e13238 thick left border). */
-.dw-admonition {
-	margin: 0 0 1.75rem;
-	padding: 1rem 1.25rem;
-	text-align: left;
-	background-color: var(--wp--preset--color--link, #67000a); /* same red as the search button */
-	color: #fff;
-	border: 1px solid var(--wp--preset--color--link, #67000a);
-	border-left: 6px solid #e13238; /* lighter-red side sliver, like the TIL admonition */
-	border-radius: 6px;
-}
-.dw-admonition-heading {
-	display: flex;
-	align-items: center;
-	margin-bottom: .3rem;
-	font-family: 'Inter', sans-serif;
-	font-weight: 700;
-	line-height: 1.25;
-	text-transform: uppercase;
-}
-.dw-admonition-icon {
-	display: inline-flex;
-	margin-right: .4em;
-}
-.dw-admonition-icon svg {
-	width: 1.5em;
-	height: 1.5em;
-	fill: #fff;
-}
-.dw-admonition-content p {
-	margin: 0;
-	line-height: 1.5;
-}
 .art a {
 	color: #2F3446;
 }

theme.json

@@ -26,6 +26,9 @@
         { "name": "Terminal", "slug": "terminal", "color": "#34f743" },
         { "name": "Meta", "slug": "meta", "color": "#777777" },
         { "name": "Border", "slug": "border", "color": "#cecece" }
+      ],
+      "duotone": [
+        { "name": "Slate", "slug": "slate", "colors": ["#484c57", "#cfd2d8"] }
       ]
     },
     "typography": {