studio/projects/desk refinements + footer polish

Studio (page-studio.php, js/studio.js, css/styles.css, style.css):
- Move the three fact intro slides (web sites / stars / brain) to the end of the
  carousel; Studio leads. Reorder DOM, studio.js CONFIG, tab data-slide, and the
  active class together.
- Halve the hero height: #caro min-height 400->200 so #studio-caro's 40vh binds.
- Drop the Tools third column from every tab pane; copy is full-width with a 1.3rem
  serif at line-height 1.6 and a break between each italic quote and the body copy.
- Tighten the tab line spacing; add a light Projects button under the tabs linking
  to /studio/projects/.
- Subnav column: bottom-only radius so its square top stays snug under the slider;
  wrap the below-slider section in a dadada card (square top, rounded bottom) with
  left padding so the card shows around the subnav.

Projects (page-projects.php, style.css):
- Match the other pages: dadada card (1280) on the dark-blue body, white heading,
  and a little padding beneath each featured image.

Desk (page-desk.php):
- New Recommended Reading section (pulls the 'recommended' category) above Bookmarks.
- Halve the bookmarks (7); bump Posts and Today I Learned to 21 each.

Footer (parts/footer-home.html, style.css):
- Drop the Spotify social icon; make the icons smaller (19px) and closer (5px gap)
  like the /work site.
- Float the three link columns to the right above the social row, content-width
  with a fixed gap and tighter line spacing.

Rebuilt v4-style.min.css.

css/styles.css

@@ -480,7 +480,7 @@ body { color: #232323; }
 #studio-caro {
   position: relative;
   overflow: hidden;
-  min-height: 80vh;
+  min-height: 40vh;
 }
 .dw-studio-bg {
   position: absolute;

js/studio.js

@@ -52,17 +52,17 @@ document.querySelectorAll('.nav-toggle').forEach(function (el) {
 
   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.
+  // Slides 0-5 are the tabbed sections; 6-8 are the fact intro (moved to the end).
   const CONFIG = [
-    { 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
+    { 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
   ];
   const INTERVAL = 5000;
 

page-desk.php

@@ -23,7 +23,7 @@ get_header(); ?>
 							<div class="col-md-6 studio-tools">
 								<h4 class="fw-bold">Posts</h4>
 								<ul>
-									<?php $recentposts = get_posts('numberposts=18'); foreach ($recentposts as $post) : setup_postdata($post); ?>
+									<?php $recentposts = get_posts('numberposts=21'); foreach ($recentposts as $post) : setup_postdata($post); ?>
 									<li style="color:#777"><?php echo get_the_date('y/m/d'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
 									<?php endforeach; ?>
 								</ul>
@@ -31,14 +31,14 @@ get_header(); ?>
 							<div class="col-md-6 studio-tools d-lg-block">
 								<h4 class="fw-bold">Today I Learned</h4>
 								<ul>
-									<?php pull_til(18); ?>
+									<?php pull_til(21); ?>
 								</ul>
 							</div>
 						</div>
 					</div>
 					<div class="col-lg-4 studio-tools desk-meta">
 						<?php $sticky = get_option('sticky_posts'); if( !empty($sticky) ){ ?>
-						<h4 class="fw-bold">Edited</h4>
+						<h4 class="fw-bold">Recently Edited</h4>
 						<ul>
 							<?php $args = array('post_type' => 'post', 'orderby' => 'modified', 'posts_per_page' => 5,'post__in' => $sticky);?>
 							<?php $stickyposts = get_posts($args); foreach ($stickyposts as $post) : setup_postdata($post); ?>
@@ -46,11 +46,17 @@ get_header(); ?>
 							<?php endforeach; ?>
 						</ul>
 						<?php } ?>
-						<h4 class="fw-bold mt-4">Bookmarks</h4>
+						<h4 class="fw-bold mt-4">Recommended Reading</h4>
 						<ul>
-							<?php bookmarks_pull(14); ?>
+							<?php $recposts = get_posts( array( 'category_name' => 'recommended', 'numberposts' => 10 ) ); foreach ( $recposts as $post ) : setup_postdata( $post ); ?>
+							<li style="color:#777"><?php echo get_the_date('y/m/d'); ?> - <a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
+							<?php endforeach; wp_reset_postdata(); ?>
 						</ul>
-						<h4 class="fw-bold">Year</h4>
+						<h4 class="fw-bold mt-4">Recent Bookmarks</h4>
+						<ul>
+							<?php bookmarks_pull(7); ?>
+						</ul>
+						<h4 class="fw-bold">By Year</h4>
 						<ul class="tags">
 							<?php wp_get_archives( array( 'type' => 'yearly', 'format' => 'custom', 'before' => '', 'after' => ',&nbsp;' ) ); ?>
 						</ul>

page-projects.php

@@ -6,8 +6,9 @@
 get_header(); ?>
 <div class="container leader">
 	<div class="row mt-5">
-		<h1><em><?php the_title(); ?></em></h1>
+		<h1><?php the_title(); ?></h1>
 	</div>
+	<div class="projects-card">
 	<div class="row">
     <?php $i = 0; $query = new WP_Query( array( 'category_name' => 'studio', 'posts_per_page' => -1 ) ); while ( $query->have_posts() ) : $query->the_post(); ?>
 			<div class="col-lg-3">
@@ -34,5 +35,6 @@ get_header(); ?>
     <?php endif; ?>
     <?php endwhile; wp_reset_postdata(); $i++; ?>
   	</div>
+	</div>
 </div>
 <?php get_footer( 'home' ); ?>

parts/footer-home.html

@@ -70,7 +70,6 @@
 						<li><a href="https://www.facebook.com/windhamdavid" class="facebook"><svg class="dw-icon dw-icon-2x" role="img" aria-label="Facebook"><use href="#dw-facebook"></use></svg></a></li>
 						<li><a href="https://bsky.app/profile/davidwindham.com" class="twitter" rel="me"><svg class="dw-icon dw-icon-2x" role="img" aria-label="Bluesky"><use href="#dw-bluesky"></use></svg></a></li>
 						<li><a href="https://www.reddit.com/user/windhamdavid" class="reddit"><svg class="dw-icon dw-icon-2x" role="img" aria-label="Reddit"><use href="#dw-reddit"></use></svg></a></li>
-						<li><a href="https://open.spotify.com/user/windhamdavid" class="spotify" rel="me"><svg class="dw-icon dw-icon-2x" role="img" aria-label="Spotify"><use href="#dw-spotify"></use></svg></a></li>
 						<li><a href="https://www.linkedin.com/in/windhamdavid" class="linkedin" rel="me"><svg class="dw-icon dw-icon-2x" role="img" aria-label="LinkedIn"><use href="#dw-linkedin"></use></svg></a></li>
 					</ul>
 				</div>

style.css

@@ -681,12 +681,25 @@ p.cc {
 	padding: 0;
 }
 #dw-footer ul.footer-links li {
-	margin: 0 0 .35rem;
-	padding: 0 0 .35rem;
+	margin: 0 0 .1rem;
+	padding: 0;
+	line-height: 1.35;
 }
 #dw-footer ul.footer-links li:last-child {
 	margin-bottom: 0;
 }
+/* pull the three link columns closer: size each to its content and space them with
+   a fixed gap instead of the fixed-width col-4 thirds that spread them apart. */
+#dw-footer .br-widget .row {
+	--bs-gutter-x: 0;
+	gap: 2.5rem;
+	justify-content: flex-end; /* float the columns to the right, above the social icons */
+}
+#dw-footer .br-widget .row > [class*="col-"] {
+	flex: 0 0 auto;
+	width: auto;
+	max-width: none;
+}
 /* sliding underline on hover (left-to-right) */
 #dw-footer .br-widget a:before,
 #dw-footer .footer-end a:before {
@@ -721,7 +734,7 @@ p.cc {
 #dw-footer ul.footer-social {
 	list-style: none;
 	display: flex;
-	gap: 16px;
+	gap: 5px;
 	justify-content: flex-end;
 	margin: .5rem 0 0;
 	padding: 0;
@@ -731,8 +744,8 @@ p.cc {
 	padding: 0;
 }
 #dw-footer ul.footer-social .dw-icon-2x {
-	width: 22px;
-	height: 22px;
+	width: 19px;
+	height: 19px;
 }
 @media (max-width: 767.98px) {
 	#dw-footer .footer-end .gaegu,
@@ -775,7 +788,7 @@ p.cc {
 
 [contenteditable] {outline: none;}
 #caro {
-	min-height: 400px;
+	min-height: 200px; /* halved with #studio-caro's 40vh to cut the hero height in half */
 }
 
 .hide-svg {
@@ -897,6 +910,49 @@ article.home {
 	margin: 28px 0px;
 	padding: 10px;
 }
+/* tighter line spacing between the studio tabs */
+.studio-subnav .list-group-item {
+	margin-top: 0;
+	padding-top: .1rem;
+	padding-bottom: .1rem;
+	line-height: 1.35;
+}
+/* Card behind the below-slider section (tabs + tab content) — the other pages'
+   dadada card, with a square top so it stays snug under the slider. */
+.studio-lower {
+	background: #dadada;
+	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 */
+}
+/* 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. */
+.studio-subnav-col {
+	border-radius: 0 0 6px 6px;
+	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;
+}
+#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;
+}
 .studio-subnav a {
 	color: #000;
 	text-decoration: none;
@@ -917,7 +973,7 @@ article.home {
 
 article.studio {
 	background: #fff;
-	padding: 0 15px 10px;
+	padding: 14px 15px 10px; /* top padding = a little space beneath the featured image */
 	margin:0 0 20px;
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }
@@ -936,6 +992,20 @@ img.studio-thumb:hover {
     -webkit-filter: saturate(1) opacity(1);
     filter: saturate(1) opacity(1);
 }
+/* Projects page — same dark-blue body (body.page) + light content card + 1280
+   width as the desk / block pages. body.projects comes from page_bodyclass(). */
+body.projects .container.leader {
+	width: auto;
+	max-width: 1280px;
+}
+body.projects h1 {
+	color: #fff;
+}
+.projects-card {
+	background: #dadada;
+	padding: 96px;
+	border-radius: 6px;
+}
 
 /*============================================
 		Art
@@ -1549,7 +1619,7 @@ body.page .edit-link {
 
 article.studio {
 	background: #fff;
-	padding: 0 15px 10px;
+	padding: 14px 15px 10px; /* top padding = a little space beneath the featured image */
 	margin:0 0 20px;
 	box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
 }