Studio: DRAFT admonition, vertical nav underline, Wonder tab, tab cleanup

- DRAFT admonition (Docusaurus danger style) in the Studio tab above the copy:
  site link-color red fill + lighter-red left sliver + white copy/flame, full
  width, pulled up tight under the slider (scoped to the Studio tab only — other
  tabs keep their top padding).
- Vertical 'magic line' underline on the tab subnav (the navbar/footer slider,
  keyed to the .active tab via MutationObserver).
- Subnav: de-italicized, added a 'Wonder' item, and made 'Projects' a plain list
  item (dropped the button + its orphaned CSS).
- Carousel: autoplay off (advances only on subnav clicks); 'Wonder' auto-rotates
  the 3 fact slides then returns to Studio and stops.
- Copy: collapsed double <br><br> to single line breaks.

js/studio.js

@@ -127,22 +127,30 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
     drawSVGs(slides[i]);
   }
 
-  function next() { activate(index + 1); }
-  function start() { stop(); timer = window.setInterval(next, INTERVAL); }
-  function stop() { if (timer) { window.clearInterval(timer); timer = null; } }
+  // "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];
+  let wonderTimer = null;
+  function stopWonder() { if (wonderTimer) { window.clearTimeout(wonderTimer); wonderTimer = null; } }
+  function runWonder() {
+    stopWonder();
+    let step = 0;
+    (function tick() {
+      activate(WONDER[step]);
+      step++;
+      if (step < WONDER.length) wonderTimer = window.setTimeout(tick, INTERVAL);
+    })();
+  }
 
   tabs.forEach(function (t) {
     t.addEventListener('click', function (e) {
       e.preventDefault();
-      activate(parseInt(t.dataset.slide, 10) || 0);
-      start(); // restart the autoplay clock after manual navigation
+      stopWonder();
+      if (t.classList.contains('dw-studio-wonder')) runWonder();
+      else activate(parseInt(t.dataset.slide, 10) || 0);
     });
   });
 
-  // pause autoplay while the pointer is over the hero
-  stage.addEventListener('mouseenter', stop);
-  stage.addEventListener('mouseleave', start);
-
+  // No autoplay — the carousel advances only on subnav clicks (Wonder runs its own set).
   activate(0);
-  start();
 })();

page-studio.php

@@ -185,14 +185,16 @@
 		<div class="row">
 			<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"><em>Studio</em></a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="1" href="#webdev"><em>Web</em></a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="2" href="#ux"><em>UX/UI</em></a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="3" href="#graphic"><em>Graphic</em></a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="4" href="#media"><em>Media</em></a></li>
-					<li class="list-group-item mt-1"><a class="dw-studio-tab nav-item" data-slide="5" href="#art"><em>Art</em></a></li>
+					<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>
+					<span class="dw-nav-underline" aria-hidden="true"></span>
 				</ul>
-				<a href="/studio/projects/" class="btn studio-projects-btn">Projects</a>
 			</div>
 			<div class="col-sm-10">
 				<div id="studio-tab" class="tab-content">
@@ -200,7 +202,11 @@
             <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>lthough it seems that in the shower or sleeping is where my best work occurs,</em><br /><br />the studio is the place where the shoe leather hits the pavement. I mostly work with web and application development, but I also do a good deal of graphic, print, and multimedia design. On my off hours, I like to turn off the computers to paint with camel hair, canvas, and minerals.</h4>
+  								<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>
@@ -209,7 +215,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>hey don't call it the information age for nothing</em>.<br /><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">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>
   							</div>
   						</div>
             </div>
@@ -218,7 +224,7 @@
             <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 /><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">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>
   							</div>
   						</div>
             </div>
@@ -227,7 +233,7 @@
             <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 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 />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>
   							</div>
   						</div>
             </div>
@@ -236,7 +242,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 /><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 />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>
   							</div>
   						</div>
             </div>
@@ -245,7 +251,7 @@
             <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 /><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 />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>
   							</div>
   						</div>
             </div>
@@ -254,4 +260,43 @@
 			</div>
 		</div>
 	</div>
+	<script>
+	/* Vertical "magic line" underline for the studio tab nav — the same sliding
+	   underline as the navbar/footer, adapted for the stacked subnav: it rests under
+	   the active tab and slides to whichever tab is hovered (back to active on leave).
+	   Active state = the .active class the tab-switcher toggles (click or carousel-
+	   synced), watched via MutationObserver. */
+	(function () {
+	  function init() {
+	    var nav = document.querySelector('ul.studio-subnav');
+	    if (!nav) return;
+	    var line = nav.querySelector('.dw-nav-underline');
+	    if (!line) return;
+	    var links = Array.prototype.slice.call(nav.querySelectorAll('a.dw-studio-tab'));
+	    if (!links.length) return;
+	    function rel(el) {
+	      var left = 0, top = 0, node = el;
+	      while (node && node !== nav) { left += node.offsetLeft; top += node.offsetTop; node = node.offsetParent; }
+	      return { left: left, top: top, width: el.offsetWidth, height: el.offsetHeight };
+	    }
+	    function place(el, show) {
+	      var r = rel(el);
+	      line.style.left = r.left + 'px';
+	      line.style.width = r.width + 'px';
+	      line.style.top = (r.top + r.height) + 'px';
+	      line.style.opacity = show ? '1' : '0';
+	    }
+	    function activeLink() { return nav.querySelector('a.dw-studio-tab.active') || links[0]; }
+	    function rest() { var a = activeLink(); if (a) place(a, true); else line.style.opacity = '0'; }
+	    links.forEach(function (a) { a.addEventListener('mouseenter', function () { place(a, true); }); });
+	    nav.addEventListener('mouseleave', rest);
+	    window.addEventListener('resize', rest);
+	    var obs = new MutationObserver(rest);
+	    links.forEach(function (a) { obs.observe(a, { attributes: true, attributeFilter: ['class'] }); });
+	    rest();
+	  }
+	  if (document.readyState !== 'loading') init();
+	  else document.addEventListener('DOMContentLoaded', init);
+	})();
+	</script>
 <?php get_footer('full'); ?>

style.css

@@ -929,23 +929,19 @@ article.home {
 	padding-bottom: 1.5rem;
 }
 /* Projects page button under the tabs — light, to contrast with the dark subnav column */
-.studio-projects-btn {
-	display: block;
-	margin: 1.25rem 10px 0;
-	text-align: center;
-	background: #dadada;
-	color: #232323;
-	border: 1px solid #dadada;
-}
-.studio-projects-btn:hover {
-	background: #fff;
-	color: #232323;
-}
 /* Studio tab copy — now full-width (the Tools third column was removed); give it
    breathing room all around and a larger type size. */
 #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;
@@ -1034,6 +1030,40 @@ 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;
 }
@@ -2415,7 +2445,8 @@ ul.nav .list-group-item a:hover {
 }
 /* floating "magic line": one shared underline that slides between the nav items
    (positioned by js/nav-underline.js). ul is the positioning context. */
-ul.nav.list-group-horizontal {
+ul.nav.list-group-horizontal,
+ul.nav.studio-subnav {
   position: relative;
 }
 .dw-nav-underline {