Music page overhaul, footer Music link/icon, relative cross-property links

Music page (page-music.php, js/music.js, style.css):
- Add page title + #dadada content card, consistent with desk/studio
- Remove the analytics chart section (timeline + doughnuts + stats/legend)
- Remove the AmplitudeJS player; add a "Tune In" / "Daveo Radio" button to /radio
- Trim last.fm sections to top 20 (albums stay 200); give the 6-month and 1-year
  Artists/Tracks their own containers so they no longer double up
- Drop the album play-count; render albums 5-per-row at full card width
- Strip the now-dead AmplitudeJS + Chart.js libraries (js/music.js 124KB -> 24KB)

Footer (parts/footer-home.html, icons.svg, bin/custom-icons/music.svg):
- Rename "Audio" -> "Music" with a new dw-music note icon
- Alphabetize the three footer link columns

Cross-property links (parts/footer-home.html, page-contact.php):
- Relativize /rtc and other in-domain links for the shared-chrome consolidation

bin/custom-icons/music.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+  <path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2m9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2"/>
+  <path fill-rule="evenodd" d="M14 11V2h1v9zM6 3v10H5V3z"/>
+  <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4z"/>
+</svg>

icons.svg

@@ -98,6 +98,9 @@
 <symbol id="dw-microphone" viewBox="0 0 384 512">
 <path fill="currentColor" d="M192 0C139 0 96 43 96 96l0 128c0 53 43 96 96 96s96-43 96-96l0-128c0-53-43-96-96-96zM48 184c0-13.3-10.7-24-24-24S0 170.7 0 184l0 40c0 97.9 73.3 178.7 168 190.5l0 49.5-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l144 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-48 0 0-49.5c94.7-11.8 168-92.6 168-190.5l0-40c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 40c0 79.5-64.5 144-144 144S48 303.5 48 224l0-40z"/>
 </symbol>
+<symbol id="dw-music" viewBox="0 0 16 16" fill="currentColor"><path d="M6 13c0 1.105-1.12 2-2.5 2S1 14.105 1 13c0-1.104 1.12-2 2.5-2s2.5.896 2.5 2m9-2c0 1.105-1.12 2-2.5 2s-2.5-.895-2.5-2 1.12-2 2.5-2 2.5.895 2.5 2"/>
+  <path fill-rule="evenodd" d="M14 11V2h1v9zM6 3v10H5V3z"/>
+  <path d="M5 2.905a1 1 0 0 1 .9-.995l8-.8a1 1 0 0 1 1.1.995V3L5 4z"/></symbol>
 <symbol id="dw-node-js" viewBox="0 0 448 512">
 <path fill="currentColor" d="M224.5 508c-6.7 0-13.5-1.8-19.4-5.2l-61.7-36.5c-9.2-5.2-4.7-7-1.7-8 12.3-4.3 14.8-5.2 27.9-12.7 1.4-.8 3.2-.5 4.6 .4l47.4 28.1c1.7 1 4.1 1 5.7 0L412 367.5c1.7-1 2.8-3 2.8-5l0-213.2c0-2.1-1.1-4-2.9-5.1L227.3 37.7c-1.7-1-4-1-5.7 0L37.1 144.3c-1.8 1-2.9 3-2.9 5.1l0 213.1c0 2 1.1 4 2.9 4.9l50.6 29.2c27.5 13.7 44.3-2.4 44.3-18.7l0-210.4c0-3 2.4-5.3 5.4-5.3l23.4 0c2.9 0 5.4 2.3 5.4 5.3l0 210.5c0 36.6-20 57.6-54.7 57.6-10.7 0-19.1 0-42.5-11.6L20.6 396.1c-12-6.9-19.4-19.8-19.4-33.7l0-213.1c0-13.8 7.4-26.8 19.4-33.7L205.1 9c11.7-6.6 27.2-6.6 38.8 0L428.6 115.7c12 6.9 19.4 19.8 19.4 33.7l0 213.1c0 13.8-7.4 26.7-19.4 33.7L243.9 502.8c-5.9 3.4-12.6 5.2-19.4 5.2zM373.6 297.9c0-39.9-27-50.5-83.7-58-57.4-7.6-63.2-11.5-63.2-24.9 0-11.1 4.9-25.9 47.4-25.9 37.9 0 51.9 8.2 57.7 33.8 .5 2.4 2.7 4.2 5.2 4.2l24 0c1.5 0 2.9-.6 3.9-1.7s1.5-2.6 1.4-4.1c-3.7-44.1-33-64.6-92.2-64.6-52.7 0-84.1 22.2-84.1 59.5 0 40.4 31.3 51.6 81.8 56.6 60.5 5.9 65.2 14.8 65.2 26.7 0 20.6-16.6 29.4-55.5 29.4-48.9 0-59.6-12.3-63.2-36.6-.4-2.6-2.6-4.5-5.3-4.5l-23.9 0c-3 0-5.3 2.4-5.3 5.3 0 31.1 16.9 68.2 97.8 68.2 58.4-.1 92-23.2 92-63.4z"/>
 </symbol>

page-contact.php

@@ -37,7 +37,7 @@
 						</script>
 					</p>
           <h5><a href="<?php echo home_url( '/' ); ?>mail/" title="Newsletter" class="list-group-item">Subscribe</a></h5>
-          <h5><a href="https://davidwindham.com/rtc/" class="list-group-item">Chat</a></h5>
+          <h5><a href="/rtc/" class="list-group-item">Chat</a></h5>
           <h5><a href="<?php echo home_url( '/' ); ?>pay" class="list-group-item">Pay</a></h5>
           <h5><a href="<?php echo home_url( '/' ); ?>contact/guests" title="Guestbook" class="list-group-item">Guests</a></h5>
 				</div>

page-music.php

@@ -5,139 +5,22 @@ Template Name: Music
 
 get_header(); ?>
 
-	<div class="container">
+	<div class="container leader">
+		<div class="row">
+			<div class="col-md-12">
+				<h1 class="cm-sans fs-2 music-heading animate__animated animate__fadeInLeft">Music</h1>
+			</div>
+		</div>
 		<article id="content" class="single" role="main">
 			<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
 			<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
 				<div id="music" class="entry-content">
-					<div class="row">
-						<div class="col-sm-12">
-							<div class="row">
-								<div class="col-sm-8 col-sm-offset-2">
-									<div class="panel panel-default">
-										<div class="panel-body">
-											<div id="player">
-												<div id="song-information">
-													<div class="row">
-														<div class="col-xs-8">
-															<img id="radio" src="<?php bloginfo('template_url'); ?>/img/none.svg" title="radio" width="25px" style="float:left;margin-right:15px;">
-															<span id="amplitude-now-playing-listeners">Listeners: <span id="listeners">00</span> - Peak: <span id="peak-listeners">00</span></span><br>
-															<span id="amplitude-now-playing-bitrate">Bitrate: <span id="bitrate">00</span> Kbps 44.100 Khz</span>
-														</div>
-														<div class="col-xs-4">
-
-														</div>
-													</div>
-												</div>
-												<input class="bar" type="range" id="amplitude-volume-slider" value="90"/>
-											<div id="controls">
-												<div id="amplitude-play-pause" class="amplitude-paused"></div><br>
-													<span id="amplitude-current-time">0:00</span>
-												</div>
-											</div>
-										</div>
-										<div class="panel-footer">
-											<h6 style="margin:0;">
-                        <img id="eq" src="" title="eq" style="float:left;margin:3px 10px 0 7px;">
-                        <span id="amplitude-now-playing-name">Playing: <span id="track">* Off Air *</span></span>
-                      </h6>
-										</div>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="divider"></div>
 					<?php the_content(); ?>
 					<div class="row">
 						<div class="col-sm-12">
 							<p>&nbsp;</p>
 						</div>
 					</div>
-					<div class="row">
-						<div class="col-sm-12">
-							<h5 class="cm-type"><em></em></h5>
-							<div class="timeline">
-								<canvas id="timechart" width="900" height="400"></canvas>
-							</div>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-2">
-							<h5 class="cm-type"><em></em></h5>
-						</div>
-						<div class="col-sm-2">
-							<h5 class="cm-type"><em></em></h5>
-						</div>
-						<div class="col-sm-4">
-						</div>
-						<div class="col-sm-4">
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-md-4">
-							<div class="row">
-								<div class="col-sm-6">
-									<ul class="list-group">
-										<li class="list-group-item active">Tracks</li>
-											<li class='list-group-item'>Year<span class='badge'>7151</span></li>
-											<li class='list-group-item'>Month<span class='badge'>687</span></li>
-											<li class='list-group-item'>Day<span class='badge'>37</span></li>
-										</li>
-									</ul>
-									<ul class="list-group">
-										<li class="list-group-item active">Albums</li>
-											<li class='list-group-item'>Year<span class='badge'>160</span></li>
-											<li class='list-group-item'>Month<span class='badge'>11</span></li>
-										</li>
-									</ul>
-								</div>
-								<div class="col-sm-6">
-									<div id="key">
-
-									</div>
-								</div>
-							</div>
-						</div>
-						<div class="col-md-8">
-							<div class="row">
-								<div class="col-sm-6">
-									<div class="music-types">
-										<canvas id="typechart" width="300" height="300"></canvas>
-									</div>
-								</div>
-								<div class="col-sm-6">
-									<div class="music-typed">
-										<canvas id="artchart" width="300" height="300"></canvas>
-									</div>
-								</div>
-							</div>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-12">
-							<div id="music-notes">
-								<p>&nbsp;</p>
-							</div>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-12">
-							<div id="music-notes">
-							<p>&nbsp;</p>
-							</div>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-12">
-							<div id="linechart"></div>
-						</div>
-					</div>
-					<div class="row">
-						<div class="col-sm-12">
-
-						</div>
-					</div>
 					<?php class NowPlaying{
 					    private $url;
 					    private $noTrackPlayingMessage;
@@ -167,12 +50,22 @@ get_header(); ?>
 					}
 					$nowPlaying = new NowPlaying('windhamdavid', 'e12ea1d0253898ee9a93edfe42ffdeab');
 					?>
-					<div class="row">
-						<div class="col-sm-12">
+					<div class="row align-items-center">
+						<div class="col-sm-8">
 							<h5 class="cm-type"><em>Currently Playing</em></h5>
 							<ul class="list-group">
 								<li class="list-group-item"><h5 style="margin:0;"><?php echo $nowPlaying->getNowPlaying(); ?></h5></li>
 							</ul>
+						</div>
+						<div class="col-sm-4 text-center">
+							<h5 class="cm-type"><em>Tune In</em></h5>
+							<a href="/radio" class="daveo-radio-btn">
+								<svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-microphone"></use></svg> Daveo Radio
+							</a>
+						</div>
+					</div>
+					<div class="row">
+						<div class="col-sm-12">
 							<h5 class="cm-type"><em>Recently Played</em></h5>
 							<ul class="list-group">
 								<div class="recent"></div>
@@ -225,13 +118,13 @@ get_header(); ?>
 						<div class="col-sm-4">
 							<h5 class="cm-type"><em>Artists: 1 Year</em></h5>
 							<ul class="list-group">
-								<div class="artists"></div>
+								<div class="yartists"></div>
 							</ul>
 						</div>
 						<div class="col-sm-8">
 							<h5 class="cm-type"><em>Tracks: 1 Year</em></h5>
 							<ul class="list-group">
-								<div class="tracks"></div>
+								<div class="ytracks"></div>
 							</ul>
 						</div>
 					</div>

parts/footer-home.html

@@ -20,27 +20,27 @@
 							<ul class="footer-links">
 								<li><a href="/about"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-file-lines"></use></svg> About</a></li>
 								<li><a href="/desk/archive" title="Archive"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-box-archive"></use></svg> Archive</a></li>
-								<li><a href="/studio/music/"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-microphone"></use></svg> Audio</a></li>
-								<li><a href="https://davidwindham.com/rtc"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-comment"></use></svg> Chat</a></li>
-								<li><a href="http://chess.davidwindham.com"><span class="chess-html">&#9814;</span> Chess</a></li>
-								<li><a href="http://code.davidawindham.com"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-code"></use></svg> Code</a></li>
+								<li><a href="/rtc"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-comment"></use></svg> Chat</a></li>
+								<li><a href="/chess"><span class="chess-html">&#9814;</span> Chess</a></li>
+								<li><a href="/code"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-code"></use></svg> Code</a></li>
 								<li><a href="/contact"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-envelope"></use></svg> Contact</a></li>
+								<li><a href="/desk"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-pen-to-square"></use></svg> Desk</a></li>
 							</ul>
 						</div>
 						<div class="col-4">
 							<ul class="footer-links">
-								<li><a href="/desk"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-pen-to-square"></use></svg> Desk</a></li>
 								<li><a href="/mail/" title="Newsletter"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-paper-plane"></use></svg> Email</a></li>
 								<li><a href="/contact/guests" title="Guestbook"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-pen-to-square"></use></svg> Guests</a></li>
 								<li><a href="/"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-house"></use></svg> Home</a></li>
+								<li><a href="/studio/music/"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-music"></use></svg> Music</a></li>
 								<li><a href="/studio/art/" title="Art"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-paintbrush"></use></svg> Paint</a></li>
 								<li><a href="/pay"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-credit-card"></use></svg> Pay</a></li>
-								<li><a href="http://photo.davidwindham.com" title="Photo"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-camera-retro"></use></svg> Photo</a></li>
+								<li><a href="/photo" title="Photo"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-camera-retro"></use></svg> Photo</a></li>
 							</ul>
 						</div>
 						<div class="col-4">
 							<ul class="footer-links">
-								<li><a href="http://radio.davidawindham.com"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-microphone"></use></svg> Radio</a></li>
+								<li><a href="/radio"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-microphone"></use></svg> Radio</a></li>
 								<li><a href="/shop"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-credit-card"></use></svg> Shop</a></li>
 								<li><a href="/sitemap"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-sitemap"></use></svg> Sitemap</a></li>
 								<li><a href="/about/analytics/" title="analytics"><svg class="dw-icon" aria-hidden="true" focusable="false"><use href="#dw-gauge"></use></svg> Stats</a></li>

style.css

@@ -1006,6 +1006,19 @@ body.projects h1 {
 	padding: 96px;
 	border-radius: 6px;
 }
+/* Uniform card height: fix the thumbnail height (crop-to-fill) so every card is the
+   same total height regardless of the image's aspect ratio; clip any long excerpt. */
+.projects-card .studio-thumbnail {
+	height: 180px;
+}
+.projects-card img.studio-thumb {
+	width: 100%;
+	height: 100%;
+	object-fit: cover;
+}
+.projects-card .studio .entry-content {
+	overflow: hidden;
+}
 
 /*============================================
 		Art
@@ -1217,9 +1230,58 @@ body.desk .entry-content {
   transform: rotateY(0deg);
 }
 .album {
-  width: 20%;
+  /* 5 per row, filling the full width — subtract the 4 × 6px flex gaps. */
+  width: calc((100% - 24px) / 5);
   -webkit-text-size-adjust: none;
 }
+/* Music page — light content card + 1280 leader width + white title over the dark
+   body.page bg, consistent with the desk / projects / block pages. */
+body.music .container.leader {
+	width: auto;
+	max-width: 1280px;
+}
+/* Neutralize the legacy single-article shell (white bg + 70/140px padding + 100px top
+   margin) so the #dadada card sits directly under the title on the dark body, spanning
+   the full leader width — matching desk. */
+body.music article#content {
+	background: transparent;
+	margin-top: 0;
+	padding: 0 0 3rem;
+}
+.music-heading {
+	color: #fff;
+	font-size: 28px;
+}
+#music.entry-content {
+	background: #dadada;
+	padding: 96px;
+	border-radius: 6px;
+}
+/* "Daveo Radio" CTA — playback now lives on /radio, so the Music page links there. */
+.daveo-radio-btn {
+	display: inline-block;
+	background: #484c57;
+	color: #fff;
+	padding: 0.7rem 1.5rem;
+	border-radius: 6px;
+	font-size: 1.05rem;
+	line-height: 1.2;
+	text-decoration: none;
+	white-space: nowrap;
+	transition: background 0.2s ease;
+}
+.daveo-radio-btn:hover,
+.daveo-radio-btn:focus {
+	background: #25c2a0;
+	color: #fff;
+}
+.daveo-radio-btn .dw-icon {
+	width: 1em;
+	height: 1em;
+	fill: currentColor;
+	vertical-align: -0.125em;
+	margin-right: 0.4rem;
+}
 #music li.list-group-item {
 	padding: 5px 15px;
 	font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;